/*===| I. MAIN LAYOUT  |=====================================================*/
* {margin: 0;}
html, body {width: 100%;}
body{font: 12px/17px Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif; background:#B4D1E2 url(../../images/charte/bg-body.jpg) left top repeat-x;}

ul, li{list-style: none;list-style-position: outside;	margin: 0;	padding: 0;}
li{color:#26394D;}

p{padding-top: 14px; text-align:justify}
.left{float: left;} .right{float: right;}
#push, .clr	{clear: both;}

a:link,
a:visited{color:#CA8712; text-decoration: none;}
a:hover,
a:active{color:#C59842; text-decoration: underline;}
a:focus{outline:none}


h1 span{display:none;}
h1 {height:22px; clear:both; border-bottom:1px solid #A7C3D4; padding-bottom:1px; margin-bottom:15px}

h1#garage{background: url("../../images/charte/title-garage.jpg") no-repeat left top;}
h1#vehicules{background: url("../../images/charte/title-vehicules.jpg") no-repeat left top;}
h1#vehicules1{background: url("../../images/charte/title-vehicules1.jpg") no-repeat left top;}
h1#infos{background: url("../../images/charte/title-infos.jpg") no-repeat left top;}
h1#atelier{background: url("../../images/charte/title-atelier.jpg") no-repeat left top;}
h1#contact{background: url("../../images/charte/title-contact.jpg") no-repeat left top;}
h1#merci{background: url("../../images/charte/title-merci.jpg") no-repeat left top;}



body{}
#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%; margin:0 auto; background:url(../../images/charte/bg-container.jpg) center 280px no-repeat;}
#container{ margin:0 auto;	text-align: left; }
#content p{color:#26394D;}
#content{padding:16px 20px 20px; width:820px;}


/* ===| III. LEFT COLUMN ELEMENTS |===========================================*/


/* ===| V. FOOTER BOXES |=====================================================*/
#wrap-footer {position:relative; z-index: 4; width: 100%; text-align: left;  background:#B4D1E2 url(../../images/charte/bg-body.jpg) left top repeat-x;}
#fwrap1 {position:absolute; z-index: -3; left:0; background:url("images/footer-bg-0.gif") 50% 0% repeat-y; width:100%;}
#fwrap2 {position:absolute; z-index: -2; left:0; background:url("images/footer-bg-1.gif") 50% 100% no-repeat; width:100%;}
#fwrap3 {position:absolute; z-index: -1; left:0; }

#footer{height:46px; margin:0 auto; padding-top:12px}
#footer p{color:#8FB3C1; font-size:11px;}
.footer-digital{float:left; margin-left:20px; display:inline}
.footer-links{float:right; padding-right:20px; color:#89C6E9; text-align:right}
.footer-links a:link,
.footer-links a:visited{color:#89C6E9; margin:0 5px; font-size:11px;}
.footer-links a:hover,
.footer-links a:active{color:#F3BE37}
#footer a.digital:link, #footer a.digital:visited{color:#8FB3C1;}
#footer a.digital:hover, #footer a.digital:active{color:#F3BE37; text-decoration:none}

div.ref{padding: 0px 10px 0px; clear:both; text-align:center; font-size:11px; color:#26394D; line-height:13px;}



.copyright{padding: 17px 0 0; text-align: center;}
div.ref{padding: 0 10px 0; text-align:center;}

/* ===| VI. OTHER ELEMENTS |====================================================*/
img {border: 0;}
.lead{padding-top:0 !important; margin-top:0 !important; }
.lead1{padding-top:5px !important; }
.big{font-size:13px; line-height:17px;}
.couleur{color:#207DC3;}
.clear{clear:both}
.image-right{float:right;margin-left:12px; margin-bottom:5px; margin-top:4px; border:1px solid #ffffff}
.image-left{float:left;margin-right:12px; margin-bottom:5px; margin-top:4px; border:1px solid #ffffff}
.left{float:left;}
.right{float:right;}
.line{height:37px; 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:80px; padding-top:15px}

ul.list{
  list-style:none;
  margin-left:40px;
  margin-top:4px;
  display:inline;
  }
  ul.list li{
    background: url(../../images/charte/icon-list.png) no-repeat left 4px;
    font:normal 12px Arial;
    color:#26394D;
    padding-left:17px;
    line-height:15px;
    margin-top:2px;
    }
/* garage */

.logo-mega{
  float:left;
  margin-right:20px;
  background: url(../../images/charte/garage-logo.jpg) no-repeat left top;
  width:123px;
  height:135px;
  border:1px solid #7A95A5;
  padding-left:155px;
  }
  #content .logo-mega p{color:#031E22; font-size:11px; line-height:15px; text-align:left;}

/* contact */
#contact-form{
  float:left;
  width:800px;
  background: url(../../images/charte/envelope.jpg) no-repeat 560px 340px;
  padding-bottom:10px
  }
.contact-left{
  width:300px;
  float:left;
  padding-left:110px;
  font:normal 11px Verdana;
  }
  .contact-right{
    width:360px;
    display:inline;
    float:left;
    margin-left:30px;
    display:inline;
    }
    .contact-right p{
      padding-left:5px;
      }

.inputForm{
	border:1px solid #4D6D81;
	background-color:#ffffff;
	color:#516171;
  width:180px;
  font:normal 12px Arial;
  padding:1px 2px;
	}
.inputFormOver{
  border:1px solid #F0B954;
	background-color:#ffffff;
	color:#D9A036;
  width:180px;
  font:normal 12px Arial;
  padding:1px 2px;
	}
textarea{font:normal 11px Arial;}

.label{
	width:80px;
	float:left;
	display:inline;
	clear:both;
	margin-top:5px;
	color:#26394D;
	text-align:left;
  font:normal 12px Arial;
	}
  .label span, .obligatoire span{color:#E7B22B;}

.field{
	width:160px;
	float:left;
	margin-top:5px;
  font:normal 11px Arial;
 	}

.submit-buttons{
  width:400px;
  text-align: center;
  margin-left:260px;
  margin-top:40px;
  clear:both;
  }
  .submit-buttons div{
    float:left;
    display:inline;
    width:200px;
    }
.button{
  background:url(../../images/charte/button.jpg) no-repeat center bottom;
  border:none;
	width:120px;
  height:26px;
	cursor:pointer;
  color:#ffffff;
  font:bold 11px Verdana;
	}
  .buttonOver{
    background:url(../../images/charte/button-over.jpg) no-repeat center bottom;
    border:none;
  	width:120px;
    height:26px;
  	cursor:pointer;
    color:#86A1AF;
    font:bold 11px Verdana;
    }

.indent{margin-left:110px;}
.wide{width:220px !important;}
.obligatoire{margin-left:100px; font-size:11px; text-align:center;}
#mail-labels{
  background:#F3E05D url(../../images/charte/mail-labels.jpg) no-repeat left top;
  width:185px;
  height:100px;
  color:#E9C7AC;
  margin-top:6px;
  margin-left:80px;
  border:1px solid #D2E6F1;
  }
  #mail-labels ul{
   padding-top:10px;
   padding-left:35px;
  }
   #mail-labels input{
    float:left;
    }
    #mail-labels li{
      height:20px;
      line-height:17px;
      clear:both
      }

/* infos pratique */
.crash-test{
  width:750px;
  background-color: #ffffff;
  padding:15px;
  margin-left:21px;
  display:inline;
  float:left;
  }
.infos-box{background-color: #395D73;
  border: 1px solid #CED4D8;
  width:175px;
  padding:5px;
  float:left;
  margin-right:15px;
  margin-top:20px
  }
  .infos-box td{color:#ffffff; font-size:11px;}


body#map{
  background-color:#fff;
  margin:0;
  padding:0;
	}

/* map buttons */
#imprimer{
	position:absolute;
  left:386px;
	top:127px;
  }
#plus{
	position:absolute;
  left:524px;
	top:129px;
	}
#imprimer img, #fermer img, #plus img{
  cursor:pointer;
  border:0;
  }

/* map adresse */
#map-adresse{
	position:absolute;
	left:13px;
	top:128px;
	}
  #map-adresse p{
    font:normal 11px/19px Arial;
    margin:0;
    padding:0;
    color:#ffffff;
    }

#horaire{background:#B4D1E2 url(../../images/charte/horaire.jpg) no-repeat left top;}
#horaire p{padding-top:130px; color:#26394D; line-height:18px}
#coordonnees{background:#B4D1E2 url(../../images/charte/horaire.jpg) no-repeat left top;}
#coordonnees p{padding-top:120px; color:#26394D; line-height:18px}

/* Nos vehicules */
.produit-box{
  width:350px;
  height:144px;
  background-color:#ffffff;
  border:1px solid #81BDDF;
  padding:12px 15px;
  float:left;
  display:inline;
  position: relative;
  z-index:998;
  margin:0px 10px 10px;
  }
h2{font:bold 12px Arial; color:#207DC3; padding-top:0; padding-bottom:5px; margin:0; text-transform: uppercase; text-align: left;}
  #content .produit-box .thumb{width:102px; height:102px; text-align: center; float:left; margin-right:10px;}
  .produit-box .thumb img{border:1px solid #03314B;}
  .produit-box p.labels{background:url(../../images/charte/dot.jpg) repeat-x left 12px; padding:0; float:left; width:238px; display:inline; font-size:11px; margin-top:2px;}
  .produit-box p.labels.first{margin-top:0px;}
  .produit-box .label1{background:#ffffff; padding:0 3px; float:left;}
  .produit-box .label2{background:#ffffff; padding:0 3px; float:right; color:#207DC3}
  .contact-link{position:absolute; left:15px; bottom:8px; font:normal 11px Arial; z-index:999; float:left; display: block;}
  .details{position:absolute; right:15px; bottom:10px; z-index:1000; float:left; display:block}
  select{border:1px solid #4D6D81; background-color:#ffffff; color:#516171; width:180px; font:normal 12px Arial; float:left; margin-right:5px;}
#reche
{
  width:300px;
    height:30px;
    margin: 0 auto;

}

 .a-over
 {
    width:137px;
    height:26px;
    float: left;
    background: url(../../images/charte/a-over.gif) no-repeat top center;
    color: #02222d!important;
    font-weight: bold;
    text-align: center;
 }

 .a-link {
   width:137px;
   height:26px;
   float: left;
   background: url(../../images/charte/a-link.gif) no-repeat top center;
   color: #ffffff!important;
   font-weight: bold;
   text-align: center;
 }



/* details */
.image-box{width:250px; margin-right:25px;float:left; margin-left:20px; display:inline}
.image-box .thumbs {width:75px; height:75px; float:left; margin:0 2px 10px 5px; display:inline; text-align:center;}
.image-box .image {width:250px; height:250px; text-align:center; float:left;}

.descriptif{background-color:#ffffff; float:left; width:460px; padding:10px 20px 10px 20px;}
  .descriptif p.labels{background:url(../../images/charte/dot.jpg) repeat-x left 12px; padding:0; float:left; width:460px; display:inline; font-size:12px; margin-top:2px;}
  .descriptif p.labels.first{margin-top:13px;}
  .descriptif .label1{background:#ffffff; padding:0 3px 0 0; float:left;}
  .descriptif .label2{background:#ffffff; padding:0 0 0 3px; float:right; color:#207DC3}
  .descriptif .small{font-size:11px; line-height:13px;}



/* mdm popup */
#mdm-popup{
    background:url("../../images/charte/bg-popup.jpg") 0 0 no-repeat;
    }
    .mdm-popup-content{
      width:560px;
      height: 350px;
      overflow: auto;
      margin-top:135px;
      margin-left:20px;
      padding-right:5px;
      color:#26394D;
      text-align: justify;
      line-height:15px;
      float:left;
      display: inline;
      }
    #mdm-popup img{border:1px solid #535F6F;}

#mdm-popup p{
  color:#26394D;
  font:normal 12px Arial;
  }

