/*===| I. MAIN LAYOUT  |=====================================================*/
* {margin: 0;}
html, body { width: 100%;}
ul, li{list-style: none;list-style-position: outside;	margin: 0;	padding: 0;}
.left{float: left;} .right{float: right;}
#push, .clr	{clear: both;}
body{font: 11px/1.2em Verdana, Arial, Tahoma, Geneva, Helvetica, sans-serif; color:#303030}


p{padding:12px 0 0; line-height:16px; text-align: justify; }
a:link,
a:visited{color:#F0662F; }
a:active,
a:hover{color:#535353; text-decoration: none;}
a:focus{outline: none;}


body{}
#bg1{position:absolute;z-index: 1; width:100%;}
#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;}

h1 span{display:none;}
h1 {height:23px; clear:both; border-bottom:1px solid #FFA27E; margin-bottom:15px;}
h1#institut{background: url("../../images/charte/title-institut.jpg") no-repeat left top;}
h1#produits{background: url("../../images/charte/title-produits.jpg") no-repeat left top;}
h1#maroquinerie{background: url("../../images/charte/title-maroquinerie.jpg") no-repeat left top;}
h1#parfumerie{background: url("../../images/charte/title-parfumerie.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;}

h2{font:bold 13px Verdana; color:#DD0D00; padding-bottom:5px;}


#wrap-container{position:relative;z-index:4; width: 100%;  background: url("../../images/charte/bg-repeat.jpg") 50% 0% repeat-y;}
#container{background: url("images/bg0.gif") 50% 50% repeat-y; margin:0 auto;	text-align: left;}
#content{}

/* ===| II. HEADER ELEMENTS |================================================*/
#site-header.outter{background:url("images/header.jpg") 50% 0 no-repeat;}
#site-header .inner{}

/* ===| III. LEFT COLUMN ELEMENTS |===========================================*/
#left-outter{float:left; margin: 0; overflow: hidden; background:url("../../images/charte/bg-left.jpg") no-repeat left top;}
#left-outter div.outter{background: url(images/box1.gif) 50% 0% no-repeat;}
#left-outter div.inner{}
#left-outter p{line-height: 14px;}

#left-outter div.box1{}
#left-outter .box1 .inner{padding:0}

#mdm, #info, #horaire{width:277px; margin-left:19px; float:left;}

#mdm{background:url("../../images/charte/bg-mdm.jpg") no-repeat left top; margin-top:12px; padding-top:30px; position: relative; height:85px}
  #mdm img{border:1px solid #FF6258;}
  .details{position:absolute; left:0; bottom:0px;}

#horaire{background:url("../../images/charte/bg-horaire.jpg") no-repeat left top; margin-top:20px; padding-top:35px;}
#info{ clear:both; margin-top:17px; background: url("../../images/charte/bg-adresse.jpg") no-repeat left top; padding-top:50px;}

/* ===| IV. RIGHT COLUMN ELEMENTS |===========================================*/
#right-outter{	float:left;	margin:0; padding:0; overflow: hidden;}
#right-inner{padding:0 25px}

/* ===| V. FOOTER BOXES |=====================================================*/
#wrap-footer {position:relative; z-index: 4; width: 100%; text-align: left; height:74px;}
#fwrap1 {position:absolute; z-index: -3; left:0; width:100%;}
#fwrap2 {position:absolute; z-index: -2; left:0; width:100%;}
#fwrap3 {position:absolute; z-index: -1; left:0; }

#footer.outter	{background:#FF7F4C url("../../images/charte/bg-footer.jpg") no-repeat left top; margin: 0 auto; height:60px;}
#footer .inner	{background:url("images/footer-bg-1.gif") -16px 100% no-repeat;}
#footer .box1	{background:url("images/footer-bg-2.gif") -16px 0% no-repeat;}


#footer{height:46px; margin:0 auto; padding-top:10px}
#footer p{color:#FCE2D2; font-size:11px; line-height:20px;}
.footer-digital{float:left; margin-left:7px; display:inline; width:315px;}
.footer-links{float:left; color:#89C6E9; padding-left:30px; text-align:right; color:#FCE2D2}
.footer-links a:link,
.footer-links a:visited{color:#FCE2D2; margin:0 5px; font-size:11px; text-decoration: none;}
.footer-links a:hover,
.footer-links a:active{color:#ffffff; }
#footer a.digital:link, #footer a.digital:visited{color:#FFFFFF; text-decoration:underline}
#footer a.digital:hover, #footer a.digital:active{color:#FCE2D2; text-decoration:none}

div.ref{padding: 0px 10px 0px; clear:both; text-align:center; font-size:11px; color:#26394D; line-height:13px;}


/* ===| VI. OTHER ELEMENTS |====================================================*/
img {border: 0;}
.lead{padding-top:0 !important; }
.lead1{padding-top:5px; }
.lead2{padding-top:15px; }
.couleur{color:#DD0D00;}
.clear{clear:both}
.image-right{float:right;margin-left:13px; margin-bottom:5px;}
.image-left{float:left;margin-right:13px; margin-bottom:5px;}
.left{float:left;}
.right{float:right;}
.line{height:14px; background: url(../../images/charte/line.jpg) repeat-x left center; line-height:0; font-size:0px; padding:0; clear:both;}
.line1{height:14px; background: url(../../images/charte/line-index.jpg) no-repeat left center; line-height:0; font-size:0px; padding:0; margin-top:12px;}
.centered{text-align: center; margin:0 auto}
.indent{margin-left:30px;}
ul.list{
  list-style:none;
  padding-left:40px;
  margin-top:10px;
  }
  ul.list li{
    background: url(../../images/charte/icon-list.jpg) no-repeat left 7px;
    padding-left:10px;
    line-height:17px;
    }

ul.list1{
  list-style:none;
  padding-left:20px;
  margin-top:6px;
  }
  ul.list1 li{
    background: url(../../images/charte/icon-list.jpg) no-repeat left 7px;
    padding-left:10px;
    line-height:17px;
    }
ul.list2{
  list-style:none;
  padding-left:50px;
  margin-top:6px;
  }
  ul.list2 li{
    background: url(../../images/charte/icon-list.jpg) no-repeat left 7px;
    padding-left:10px;
    line-height:17px;
    }



/* institut */
.cadre{background: url(../../images/charte/cadre.jpg) no-repeat left top; width:364px; height:228px; float:right; padding-top:35px;}
.cadre p{text-align: center; color:#D63C00; margin-right:35px;}

/* contact */
#contact-form{
  float:left;
  width:640px;
  }
.contact-left{
  width:280px;
  float:left;
  padding-left:30px;
  font:normal 11px Verdana;
  }
  .contact-right{
    width:238px;
    display:inline;
    float:left;
    margin-left:48px;
    display:inline;
    }


.inputForm{
	border:1px solid #FF7F4C;
	background-color:#ffffff;
	color:#605F5F;
  width:160px;
  font:normal 11px Verdana;
  height:15px;
	}
.inputFormOver{
  border:1px solid #FFA886;
	background-color:#FAE5E0;
	color:#DC2619;
  width:160px;
  font:normal 11px Verdana;
  height:15px;}
textarea{font:normal 11px Verdana; height:100px}

.label{
	width:90px;
	float:left;
	display:inline;
	clear:both;
	margin-top:5px;
	color:#303030;
	text-align:left;
  font:normal 11px Verdana;
	}
  .label span, .obligatoire span{color:#DD0D00;}
  .wide{width:238px !important;}

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

.submit-buttons{
  width:400px;
  text-align: center;
  margin:0px 0 0 125px;
  padding-top:38px;
  }
  .submit-buttons div{
    float:left;
    display:inline;
    width:200px;
    }
.button{
  background:url(../../images/charte/button.jpg) no-repeat center bottom;
  border:none;
	width:102px;
  height:22px;
	cursor:pointer;
  color:#ffffff;
  font:bold 11px Verdana;
	}
  .buttonOver{
    background:url(../../images/charte/button-over.jpg) no-repeat center bottom;
    border:none;
  	width:102px;
    height:22px;
  	cursor:pointer;
    color:#E15108;
    font:bold 11px Verdana;
    }

#mail-labels{
  background:url(../../images/charte/bg-maillabels.jpg) no-repeat right bottom;
  width:238px;
  width:200px;
  height:140px;
  color:#303030;
  margin-top:6px;
  }
  #mail-labels ul{
   padding-top:10px;
   }
   #mail-labels input{
    float:left;
    }
    #mail-labels li{
      height:20px;
      line-height:17px;
      clear:both;
      }
#container .obligatoire{font-size:9px; text-align: center; padding-top:5px; margin-left:212px; float:left; display: inline;}

/* parapluie */
.btn{ margin: 0 11px 0 16px;}
.btn1{ margin: 0 11px 5px 16px !important;}
#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9{padding-left:16px; padding-right:16px; margin-top:20px;}

a:hover img.btn1{opacity:0.6;}

.produits-link{position: absolute; left:117px; top:0px;}
.produits-link1{position: absolute; left:113px; top:41px;}

#mdm-popup{
    background:url("../../images/charte/bg-popup.jpg") 0 0 no-repeat;
    }
    .mdm-popup-content{
       width:565px;
      height: 330px;
      overflow: auto;
      margin-left:25px;
      padding-right:30px;
      color:#303030;
      text-align: justify;
      line-height:15px;
      float:left;
      }
    #mdm-popup img{border:1px solid #FEBC98;}

#mdm-popup p{
  color:#303030;
  font:normal 11px Verdana;
  }