/* HTML5  ---------------------------------- */

article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary, mark, markStec, markMRO {display:block;}
mark {background:none;border:none;}

/* FONT FACE -------------------------------------------------------------------------  */ 

@font-face {
	font-family: 'helveticaneuelight';
    src: url('helveticaneue_light-webfont.eot');
    src: url('helveticaneue_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('helveticaneue_light-webfont.woff') format('woff'),
         url('helveticaneue_light-webfont.ttf') format('truetype'),
         url('helveticaneue_light-webfont.svg#helveticaneuelight') format('svg');
    font-weight: normal;
    font-style: normal;
	}
	
@font-face {
	font-family: 'helveticaneuelight';
    src: url('helveticaneue_light-webfont.eot');
    src: url('helveticaneue_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('helveticaneue_light-webfont.woff') format('woff'),
         url('helveticaneue_light-webfont.ttf') format('truetype'),
         url('helveticaneue_light-webfont.svg#helveticaneuelight') format('svg');
    font-weight: normal;
    font-style: normal;
	}


/* GENERAL -------------------------------------------------------------------------  */ 

html, body {
	margin:0;
	padding:0;
	background:#fff;
	  width:100%;
	}

* {outline:none;}

div,  dl,dt,dd,  ul,ol,li,  h1,h2,h3,h4,h5,h6,  pre,  form,fieldset,  input,textarea,  a,  p,blockquote,  th,td   { 
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	}
    
address,  caption,  cite,  code,  dfn,  em,  strong,  th,  var {font-style: normal;font-weight: normal;}   
ol,ul {list-style: none;}

/***********************************************
PAGE INDEX
***********************************************/

/* INDEX HEADER	-------------------------------------------------------------------------- */

#header {
	top:60px;
	width:100%;
	height:74px;
	}
	
#titre {
	background: url("../images/titre.png") no-repeat scroll 0 0 transparent;
	display: none;
	height: 74px;
	position: absolute;
	right: 20px;
	top: 20px;
	width: 334px;
	}
	
.chooseyourchemical {font:25px "helveticaneuelight";border-right: 1px dashed #999999;padding:0 10px;}	
a.chooseyourchemical:hover {color: #ccc !important;} 

#contentWrapper {
	position: absolute;
	width:100%;
	}

/* INDEX NAV	-------------------------------------------------------------------------- */

#content {
	top:60px;
	width:990px;
	height:410px;
	margin:0 auto;	
	background:url(../images/bg_main.gif) no-repeat;
	display: none;
	}
		
#nav-shadow {
	list-style: none;
	margin: 0;
	padding: 0;
}

#nav-shadow li {
	width: 330px;
	height: 410px;
	position: relative;
	float: left;
}

#nav-shadow a, #nav-shadow a:visited, #nav-shadow a, #nav-shadow a:hover {
	margin: 0 auto;
	width: 330px;
	height: 410px;
	text-indent: -9999px;
	overflow: hidden;
	background:url("../images/marques.png") 0 0 no-repeat;	
	display: block;
	position: relative;
	z-index: 2;
}

#nav-shadow li.button-color-1 a {
	background:url("../images/marques.png") 0 0 no-repeat;
}

#nav-shadow li.button-color-2 a {
	background-position: -330px 0;
}

#nav-shadow li.button-color-3 a {
	background-position: -660px 0;
}	

.popup, .popup2, .popup3{
	position: absolute;
	display: none;
	background:#333;
	width:280px;
	padding:15px;
	height:auto;
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	background-image: -webkit-gradient(
	linear,
	right top,
	left bottom,
	color-stop(0.02, rgb(89,89,89)),
	color-stop(0.51, rgb(5,5,5)),
	color-stop(0.76, rgb(41,41,41))
	);
	background-image: -moz-linear-gradient(
	right top,
	rgb(89,89,89) 2%,
	rgb(5,5,5) 51%,
	rgb(41,41,41) 76%
	);
	-moz-box-shadow: 0px 5px 15px 0px #888;
	-webkit-box-shadow: 0px 5px 15px 0px #888;
	box-shadow: 0px 5px 15px 0px #888;
}
	
.popup h3, .popup2 h3, .popup3 h3 {font:20px "helveticaneuelight";color:#fff;text-align: center;text-shadow:1px 1px 5px #000;letter-spacing:1px;font-weight:100;}
.popup p, .popup2 p, .popup3 p {font:12px "helveticaneuelight", Arial, Helvetica, sans-serif;color:#ccc;text-align: left;text-shadow:1px 1px 1px #000;}
.popup p strong, .popup2 p strong, .popup3 p strong {color:#fff;}								
h3 {font:28px "helveticaneuelight";color:#ccc;text-align: center;}

/* INDEX FOOTER ---------------------------------- */


.footerWrapper{
position:fixed;
color: white;
padding: 5px;
visibility:hidden;
background: #303030;
z-index: 10000;
width:100%;
font-weight:bold;
display:none;
background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.21, rgb(0,0,0)),
    color-stop(0.56, rgb(20,20,20)),
    color-stop(1, rgb(71,71,71))
);
background-image: -moz-linear-gradient(
    center top,
    rgb(0,0,0) 21%,
    rgb(20,20,20) 56%,
    rgb(71,71,71) 100%
);

}

.footerWrapper a{color: white;}
	
#footer {
	width:990px;
	height:410px;
	margin:0 auto;	
	}
.footerWrapper h1, .footerWrapper h1 a {
	font:11px "helveticaneuelight", Arial, Helvetica, sans-serif;
	text-shadow:1px 1px 1px #000;
	color:#999;
	letter-spacing:2px;
	text-decoration:none;
	}
	
.blocInfosWide {margin:0 auto;width:990px;}

.blocInfos1 h3, .blocInfos2 h3, .blocInfos3  h3 {font:20px "helveticaneuelight";color:#999;margin:20px 0 10px 0;text-align:left;border-bottom: 1px dotted #666666;}
	
.blocInfos1, .blocInfos2, .blocInfos3  {	
    list-style: none outside none;
    position: relative;
    width: 290px;
	float:left;
	border-right:4px dotted #333;
	padding-right:15px;
	text-align:justify;
	padding-left:25px;
	margin-top:40px;
	
	font:11px "helveticaneuelight", Arial, Helvetica, sans-serif;
}	

.blocInfos1 {padding-left:0px !important;}

.blocInfos3 {
	border-right:0 !important;
	padding-right:0 !important;}
		
.blocInfos1 ul, .blocInfos2 ul, .blocInfos3 ul {	
	list-style:none;
	padding-left:0;
}

.blocInfos1 p, .blocInfos2 p, .blocInfos3 p {	
	color:#ccc;
	}	
	
.blocInfos1 a, .blocInfos2 a, .blocInfos3 a {
	text-shadow:1px 1px 1px #000;
	color:#999;
	text-decoration:none;
	}	
	
.blocInfos1 a:hover, .blocInfos2 a:hover, .blocInfos3 a:hover {
	text-shadow:1px 1px 1px #000;
	color:#ccc;
	}
	
#twitter_update_list_mcontentwrapper {height: 150px !important;}
#twitter_update_list li{font-family:"helveticaneuelight", Arial, Helvetica, sans-serif;font-weight:normal;list-style-type:none;font-size:12px;color:#ccc;padding-bottom:10px;margin-bottom:10px;border-bottom:1px dotted #999;}
#twitter_update_list li a{color:#ffaa17;}
#twitter_update_list li a:hover{color:#fff;}


a.fbLogo {background:url(../images/bg-social.gif) 0 0 no-repeat;width:58px;height:52px;display:block;float:left;opacity:0.5;margin-left:20px;}
a.twLogo {background:url(../images/bg-social.gif) -58px 0 no-repeat;width:58px;height:52px;display:block;float:left;opacity:0.5;}
a.viLogo {background:url(../images/bg-social.gif) -116px 0 no-repeat;width:58px;height:52px;display:block;float:left;opacity:0.5;}
a.inLogo {background:url(../images/bg-social.gif) -174px 0 no-repeat;width:58px;height:52px;display:block;float:left;opacity:0.5;}

a.fbLogo:hover, a.twLogo:hover, a.viLogo:hover, a.inLogo:hover {opacity:1;}

/***********************************************
PAGES INTERNES
***********************************************/

/* COUNTER  ---------------------------------- */

.counterIdeas {z-index:1000;float:right;margin-right: 25px; }
.counterIdeas2 {z-index:1000;float:left;margin-left: 25px; margin-top:20px}
.counterIdeas mark, .counterIdeas markStec, .counterIdeas markMRO {
	color: #fff;
    font: 30px "helveticaneuelight",Arial,Helvetica,sans-serif;
	float:right;
	padding-left: 15px;
	}
	
.counterIdeas h2 strong{font-size: 25px;font-weight:bold;color:#fff;}
.counterIdeas h2 {float:right;color:#ccc;font-size: 15px;line-height: 12px;padding-left: 5px;padding-top: 3px;}

/* WRAPPER ---------------------------------- */

div#wrapper {
	width: 100%;
	max-width: 1920px;
	min-width: 100px;
	padding: 0;
	margin: 0 auto;
	position:relative;
	font-family: helveticaneuelight, Arial, Helvetica, sans-serif;
}


/* NAV ---------------------------------- */

nav#main {
  position: fixed;
  left: 20px;
  top: 50%;
  z-index: 999999;
	}

nav#main li {
	height: 20px;
	position: relative;
  	}

nav#main a {
	display: block;
	width: 20px;
	height: 20px;
	background: url(../images/dotnav.png) 0 100% no-repeat;
	text-indent: -9000px;
	overflow: hidden;
	opacity:0.7;
 	}

nav#main a:hover {opacity:1;}
nav#main li.active a {background-position: 0 0;}
  
nav#main h1 {
	display: none;
	opacity: 0;
	position: absolute;
	left: 25px;    
	top: -4px;
	white-space: nowrap;
	font:13px "helveticaneuelight", Arial, Helvetica, sans-serif;
	padding: 0 6px 0 0;
	background: url(../krafft-lubrifiants-de-maintenance/img/arrow_right.png) 100% 50% no-repeat;
}

nav#main span {
	display: block;
	background: #000;
	color: #fff;
	padding: 4px 8px;
	white-space: nowrap;
	}
	
	
	/* TOPNAV ---------------------------------- */

nav#main2 {
  position: fixed;
  left: 30px;
  top: 20px;
  z-index: 999999;
  float:left;
  
	}

nav#main2 li {
	height: 20px;
	position: relative;
	float:left;
	margin-right:30px;
  	}

nav#main2 a {
	display: block;
	width: 80px;
	height: 20px;
	/*background: url(../images/dotnav.png) 0 100% no-repeat;*/
	text-indent: -9000px;
	overflow: auto;
	color:#FFF;
	
 	}

nav#main2 a:hover {
	display:inline;	
	opacity:1;
	color:#FFF;
	}
nav#main2 li.active a {
	background-position: 0 0;

	
	}
  
nav#main2 h1 {
	display: none;
	
	position: absolute;
	left: 0px;    
	
	white-space: nowrap;
	font:13px "helveticaneuelight", Arial, Helvetica, sans-serif;
	
	
}

nav#main2 span {
	display: block;
	
	color: #FFF;
	
	white-space: nowrap;
	}
	
	
.topmenu {
  display: block;
  position: fixed;
  left: 30px;
  top: 20px;
  z-index: 999999;
  float:left;
  
	}


/* PANTALLAS - ECRAN ---------------------------------- */

.ecran {
  min-height: 900px;
  position: relative;
  width: 100% !important;
  min-width: 1000px;
  margin: 0;
  padding: 0;
  align:center;
}

.ecran article {
    width: 990px;
    margin: 0 auto;
    min-height: 100%;
    position: relative;
  }

.ecran header {
	position: absolute;
	height: auto;
	/*left: 0;*/
   top: 0;
	width: 370px;
	z-index: 99999;
	left: 1px;
  }
  
.ecran .article-content {z-index: 1;}
  
.ecran header p {
    color: black;
    font-size: 15px;
  }
  
.ecran header p a {color: #3CF;}
    
.ecran header a {
      font-size: 12px;
      color: #3CF !important;
    }
    
.ecran header a:hover { 
      border-bottom: 0;
	  text-decoration:underline; 
    }
  
.ecran header h1 {
    font:39px/45px "helveticaneuelight";
    color: #6CF;
    margin: 0 0 2px 0;
  }
 
.ecran article {
	z-index: 999;
	font-family: helveticaneuelight, Arial, Helvetica, sans-serif;
}

/* CODA ---------------------------------- */

.panel h2.title { margin-bottom: 10px; font-size:20px;font-family:"helveticaneuelight"; }
.coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px }
.coda-slider, .coda-slider .panel { width: 400px } 
.coda-slider-wrapper.arrows .coda-slider { margin: 0 10px }
.coda-slider-wrapper {margin-top:50px;}
.coda-nav-left a, .coda-nav-right a { color: #fff; padding: 5px; width: 100px }
.coda-slider p.loading { padding: 20px; text-align: center }
.coda-nav ul li { display: inline }
.coda-slider {
	float: left;
	overflow: hidden;
	position: relative;
	font-family: helveticaneuelight, Arial, Helvetica, sans-serif;
}
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
header .coda-nav-left a{ background:url(../images/arrows.png) 0 0 no-repeat; width:54px;height:54px;display: block;text-indent:-9999px;border:none;opacity:0.5; }
header .coda-nav-left a:hover{background-position:0 -64px;}
header .coda-nav-right a{ background:url(../images/arrows.png) -64px 0 no-repeat; width:54px;height:54px;display: block;text-indent:-9999px;border:none;opacity:0.5; }
header .coda-nav-right a:hover{background-position:-64px -64px;}
.coda-nav-left {float:left;}
.coda-nav-right {float:left;}
.panel-wrapper {
	padding:0 15px;
	font-family: helveticaneuelight, Arial, Helvetica, sans-serif;
}
.coda-slider-wrapper .panel-wrapper p {font-size:14px;line-height:18px;text-align:justify;}
.coda-slider-wrapper .panel-wrapper p em {font-size:11px;font-weight:bold;}

/* FOOTER ---------------------------------- */
#chemicalcredits {
  width: 100%;
  background: url(../images/krafft/bg_final.jpg) center 0 no-repeat fixed;
  margin:0;
  overflow: hidden;
  text-align:center;
  font-size: 11px;
}

footer {
  width: 900px;
  margin: 0 auto 0 auto;
  padding: 0px;
}

footer a {
	color: #222;
	border-bottom: 1px dotted #222;
	padding: 0 !important;
	margin: 0 !important;
	text-indent: -9999px !important;
  }
  
footer a:hover {
	border-bottom: 0;
}
  
#chemicalcredits * {
    font-size: 11px;
}

/* SOCIAL MEDIA ---------------------------------- */

#site-share {
  position: fixed;
  bottom: 25px;
  right: 25px;
}

.icon-fb{
	display: block;
	margin: 0 4px 0 0 !important;
	line-height: 60px;
	width: 50px;
	height: 50px;
	overflow: hidden;
	text-indent: -9000px;
	background: url(../images/icon_share.png) -50px 0 no-repeat;
	float: left;
	border: 0 !important;
	text-decoration: none !important;
}
  
.icon-fb:hover {background-position: -50px -50px;}
 
.icon-twitter{
	display: block;
	margin: 0 0 0 0 !important;
	line-height: 60px;
	width: 49px;
	height: 50px;
	overflow: hidden;
	text-indent: -9000px;
	background: url(../images/icon_share.png) 0 0 no-repeat;
	float: left;
	border: 0 !important;
	text-decoration: none !important;
}
.icon-twitter:hover {background-position: 0 -50px;
}

.ventana_flotante {
    top: 70px;
    right: auto;
    margin-right: -120px;
    padding: 0px;
    position: fixed;
    text-align: center;
    width: 90px;
    z-index: 15;
}



/* ---------------------------------- */

/* @Clear */

.clear-self:after 
{ 
  content: " "; 
  display: block; 
  clear: both; 
  visibility: hidden; 
  line-height: 0; 
  height: 0;
  margin-bottom: 0; 
}

.clear-self 
{ 
  /*display: inline-block;*/
  display: block;
}

html[xmlns] .clear-self 
{ 
  display: block;
}

* html .clear-self 
{ 
  height: 1%; 
}