/*===| I. MAIN LAYOUT  |=====================================================*/
* {margin: 0;}
html, body {/*height: 100%;*/width: 100%;}
body{
  font:11px/16px  Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
  background:#545454 url(../../images/charte/bg-body.jpg) left top repeat-x;
  color:#9E9696;
  }
p{padding-top: 10px; text-align:justify;}

#push, .clr	{clear: both;}
object { outline:none;}
a:focus{outline:none}

a:link,a:visited{color:#F40000; text-decoration: none;}
a:hover,a:active{color:#8F8F8F;}



h1{height:26px; width:571px; border-bottom:1px solid #393939; padding-bottom:3px;}
h1 span{display: none;}

h1#presentation{background: url("../../images/charte/title-presentation.jpg") no-repeat right 0px; width:411px; margin-left:158px;}
h1#produits{background: url("../../images/charte/title-produits.jpg") no-repeat right 0px;}
h1#securite{background: url("../../images/charte/title-securite.jpg") no-repeat right 0px;}
h1#contact{background:url("../../images/charte/title-contact.jpg") no-repeat right 0;}
h1#merci{background:url("../../images/charte/title-merci.jpg") no-repeat right 0;}

h3{font:bold 12px Arial; color:#D3D3D3; padding:10px 0;}


#bg1{position:absolute;z-index: 1; width:100%; background:url("images/bg0.gif") 50% 0% repeat-y;}
#bg2{position:absolute;z-index: 2; width:100%; background:url("images/bg1.jpg") 50% 0% repeat-x;}
#bg3{position:absolute;z-index: 3; background:url("images/bg2.jpg") 50% 0% no-repeat;}

#wrap-container{position:relative;z-index:4; width: 100%; background: url(../../images/charte/bg-container.jpg) no-repeat center top;}
#container{background-color:#2C2C2C; margin:0 auto;	text-align: left; }
#content{padding-bottom:10px;}


/* ===| III. LEFT COLUMN ELEMENTS |===========================================*/
#left-outter{float:left; margin: 0; overflow: hidden;}
#left-outter div.inner p{color:#D3D3D3;}

  #mdm{width:247px; height:146px; background: url(../../images/charte/bg-mdm.jpg) no-repeat left top; padding-left:12px; padding-top:19px; position:relative;}
    #mdm p{line-height:14px}
    #mdm img{border:1px solid #8F8F8F;}
    .details{position:absolute; left: 13px; top:113px}
    #mdm-popup{
      background:#ffffff url("../../images/charte/bg-popup.jpg") 0 0 no-repeat;
      }
    .mdm-popup-content{
        width:560px;
        height: 345px;
        overflow: auto;
        margin-top:145px;
        margin-left:20px;
        padding-right:5px;
        color:#2A2A2A;
        text-align: justify;
        line-height:15px;
        }
    #mdm-popup img{border:1px solid #969696; padding:2px;}

    #mdm-popup p{
      color:#2A2A2A;
      font:normal 11px/15px Arial;
      }

  #info{width:247px; height:165px; background: url(../../images/charte/bg-info.jpg) no-repeat left top; padding-left:12px}
  #info .inner{padding-top:47px;}
  #info p{text-align: left; line-height:16px}
  p#mailsPlace {background: url(../../images/charte/mailto.jpg) no-repeat left top; padding-top:2px; padding-left:29px; height:21px; margin-top:15px;}


/* ===| IV. RIGHT COLUMN ELEMENTS |===========================================*/
#right-outter{float:left;	margin:0; padding:0; overflow: hidden; background: url(../../images/charte/bg-right.jpg) no-repeat left top;}
#right-inner{padding:17px 20px 0px 50px;}

/* ===| V. FOOTER BOXES |=====================================================*/
#wrap-footer {z-index: 4; width: 100%; text-align: left; }

#footer{height:43px; margin:0 auto; background: url(../../images/charte/bg-footer.jpg) repeat-x left top;}
#footer p{color:#1B1B1B; font-size:11px; line-height:19px;}
.footer-digital{float:left; display:inline; width:570px; padding-top:0; margin-left:16px;}
.footer-links{float:right; padding-right:0px; color:#FFFFFF; text-align:right; margin-right:20px; display:inline}

.footer-links a:link,.footer-links a:visited{color:#1B1B1B; margin:0 5px; font-size:11px; }
.footer-links a:hover,.footer-links a:active{color:#8F0000;}

.actif{color:#8F0000 !important; margin:0 5px; }


#footer a.digital:link, #footer a.digital:visited{color:#8F0000;}
#footer a.digital:hover, #footer a.digital:active{color:#1B1B1B; }

div.ref{padding: 0px 10px 0px; clear:both; text-align:center; color:#A9A9A9; line-height:13px; margin-top:3px}
.copyright{padding: 17px 0 0; text-align: center;}

/* ===| VI. OTHER ELEMENTS |====================================================*/
img {border: 0;}
ul, li{list-style: none;list-style-position: outside;	margin: 0;	padding: 0;}
.left{float: left;}
.right{float: right;}
.lead{padding-top:0 !important; margin:0 !important; }
.lead1{padding-top:5px !important; }
.lead2{padding-top:12px !important; }
.couleur{color:#F11F0D;}
.couleur1{color:#D3D3D3;}
.clear{clear:both}
.image-right{float:right;margin-left:12px;}
.image-left{float:left;margin-right:12px;}
.line{height:30px; background: url(../../images/charte/line.jpg) repeat-x left center; line-height:0; font-size:0px; padding:0; clear:both;}
.centered{text-align: center; margin:0 auto}
.indent{padding-left:20px;}

ul.list{
  list-style:none;
  display:inline;
  margin-top:0px;
  padding:0;
  }
  ul.list li{
    background: url(../../images/charte/icon-list.jpg) no-repeat left 4px;
    padding-left:15px;
    line-height:16px;
    color:#D8D2D2
    }

/* Contact */
#contact-form{
  width:571px;
  }
#contact-content{
  width:540px;
  border:1px solid #393939;
  clear:both;
  padding:10px 0;
  float:left;
  margin-left:14px;
  display: inline;

  }

.contact-left{
  width:245px;
  float:left;
  padding-left:20px;
  padding-right:20px

  }
  .contact-right{
    width:240px;
    display:inline;
    float:left;
    }
    .contact-right p{
      padding-left:5px;
      }

.inputForm{
	border:2px solid #fff;
	background-color:#fff;
	color:#555555;
  width:160px;
  font:normal 11px Arial;
	}
.inputFormOver{
  border:2px solid #F11F0D;
	background-color:#ffffff;
	color:#EA0001;
  width:160px;
  font:normal 11px Arial;
	}

.label{
	width:72px;
	float:left;
	display:inline;
	clear:both;
	margin-top:5px;
	text-align:left;
  color:#D3D3D3
	}


  .label span, .obligatoire span{color:#FF1E0B;}
  .wide{width:230px !important;}

.field{
	width:160px;
	float:left;
	margin-top:5px;
  font:normal 11px Arial;
 	}

.submit-buttons{
  width:400px;
  text-align: center;
  margin:0px 0 0 88px;
  clear: both;
  padding-top:10px;
  padding-bottom:5px;
  }
  .submit-buttons div{
    float:left;
    display:inline;
    width:200px;
    }
.button{
  background:url(../../images/charte/button-over.jpg) no-repeat center bottom;
  border:none;
	width:88px;
  height:21px;
	cursor:pointer;
  color:#ffffff;
  font:bold 11px Tahoma;
	}
  .buttonOver{
    background:url(../../images/charte/button.jpg) no-repeat center bottom;
    border:none;
  	width:88px;
    height:21px;
  	cursor:pointer;
    color:#ffffff;
    font:bold 11px Tahoma;
    }


#mail-labels{
  background:#E4EAE4 url(../../images/charte/bg-maillabels.jpg) no-repeat 160px 15px;
  width:223px;
  height:110px;
  margin-top:6px;
  }
  #mail-labels ul{
   padding-top:10px;
   padding-left:50px;
   }
   #mail-labels input{
    float:left;
    }
    #mail-labels li{
      height:18px;
      line-height:10px;
      clear:both;
      }
.obligatoire{text-align: center; font-size:10px;clear:both; color:#9E9E9E;}

/* Plan d'accès */
body#map{
  background-color:#fff;
  margin:0;
  padding:0;
	}

/* map buttons */
#imprimer{
	position:absolute;
  left:246px;
	top:98px;
  }
#plus{
	position:absolute;
  left:500px;
	top:137px;
	}
#imprimer img, #fermer img, #plus img{
  cursor:pointer;
  border:0;
  }

/* map adresse */
#map-adresse{
	position:absolute;
	left:15px;
	top:143px;
	}
  #map-adresse p{
    font:normal 11px Arial;
    margin:0;
    padding:0;
    color:#2A2A2A;
    }

/* Presentation */
#thumb{
  position: absolute;
  margin-left:0px;
  margin-top:8px;
  }

.cadre{
  background:url(../../images/charte/cadre.jpg) no-repeat left top;
  width:397px;
  height:82px;
  padding-top:8px;
  padding-left:32px;
  margin-bottom:12px;
  }
.cadre2{
  background:url(../../images/charte/cadre2.jpg) no-repeat left top;
  width:401px;
  height:107px;
  padding:12px;
  float:right;
  }


/* Produits */
.cadre1{
  background:transparent url(../../images/charte/bg-cadre1.png) no-repeat left bottom;
  width:390px;
  height:240px;
  padding-top:0px;
  padding-left:25px;
  float:left
  }
.cadre3{
  background: url(../../images/charte/bg-cadre3.png) no-repeat right top;
  width:380px;
  height:95px;
  padding-top:20px;
  padding-left:30px;
  float:right
  }