/*===| I. MAIN LAYOUT  |====================================================*/
* {margin: 0;}
html, body {height: 100%;width: 100%;}
ul, li{list-style: none;list-style-position: outside;	margin: 0;	padding: 0;}
p{	padding: 5px 0 0; margin:0; text-align: justify;}
.left{float: left;} .right{float: right;}
#push, .clr	{clear: both;}

body{background-color: #F0F0F0;}
#bg1{position:absolute; width:100%;}
#bg2{position:absolute; width:100%; }
#bg3{position:absolute;}

#wrap-container{width: 100%; background: url("images/bg0.jpg") 50% 0% repeat-y;}
#container{ margin:0 auto; text-align: left;}
#content{}

/* ===| II. HEADER ELEMENTS |===============================================*/
#header.outter{}
#header .inner{}

/* ===| III. LEFT COLUMN ELEMENTS |===========================================*/
#left-outter{float:left; margin: 0; overflow: hidden;}
#left-outter div.outter{height: auto!important; }
#left-outter div.inner{}

#left-outter div.box1{}
#left-outter .box1 .inner{}

#left-outter div.box2{}
#left-outter div.box3{}
#left-outter .box4{}


/* ===| IV. RIGHT COLUMN ELEMENTS |===========================================*/
#right-outter{	float:left;	margin:0; padding:0; overflow: hidden; z-index:4; position:relative}
#right-inner{padding:0px 10px; z-index:1; position:relative}
#right-inner p{
  line-height:17px;
}
#right-outter a{
  color:#E99406;
  text-decoration: none;
  font-weight:bold;
  }
#right-outter a:hover{color:#000000;}


/* ===| V. FOOTER BOXES |====================================================*/
#wrap-footer {width: 100%; text-align: left; background:url("images/bg0.jpg") 50% bottom repeat-y;}
#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{height:58px;color:#375D07; position:relative; z-index:0}
#home{
  position:absolute;
  right:-21px;
  top:-139px;
  background: url("../../images/charte/home.jpg") left top no-repeat;
  width:387px;
  height:197px;
  z-index:0;
  }

#footer.outter{background: url("images/footer-bg-0.jpg") left top repeat-x; margin: 0 auto; padding: 0px;}
#wrap-footer #footer .inner	{background: url("images/footer-bg-0.jpg") left bottom repeat-x; padding: 0; height:58px}
#footer .box1	{background:  url("images/footer-bg-0.jpg") left top repeat-x; padding:0;}
#digital{
  float:left;
  padding-top:10px;
  padding-left:10px;
  line-height:16px;
  }
#footer-menu{
  float:right;
  margin-right:135px;
  display: inline;
  padding-top:10px;
  text-align: right;
  line-height:16px;
  }
  #footer a:link, #footer a:visited{
    color:#375D07;
    text-decoration: none;
    }
  #footer a:hover, #footer a:active {color:#000000}

  #footer a.digital:link, #footer a.digital:visited{
    color:#000000;
    text-decoration: none;
    }
  #footer a.digital:hover, #footer a.dogotal:active {color:#375D07}

  #footer-menu a{margin:0 4px;}



div.ref{padding: 5px 0px 0; text-align: center;width:960px; margin:0 auto}

/* ===| VI. OTHER ELEMENTS |====================================================*/
img {border: 0;}

a.thumb:link,
a.thumb:visited{border:	0px; padding:0px; margin:1px 0; width:auto; display:block;}

/* ===| BASIC CSS |====================================================*/

.line{
  height:20px;
  background: url(../../images/charte/line.jpg) repeat-x left center;
  line-height:0;
  font-size:0px;
  padding:0;
  clear:both;
  }
#content .lead{padding-top:0px;}
#content .clear{clear:both}
#content .normal{font-size:12px;}
#content .indent{margin-left:15px;}
#content .indent1{margin-left:21px;}
#content .centered{
  text-align:center;
  margin:0 auto;
  clear:both;}
#content .vertical{padding-top:100px;}

.left{float:left}
.right{float:right}
.image-left{
  float:left;
  margin-right:9px !important;
  margin-bottom:2px;
  display:inline;

  }
.image-right{
  float:right;
  padding-left:10px;
  }
.couleur{
	font-weight:bold;
	color:#3F690A;
  }
.couleur1{
	font-weight:bold;
	color:#E79F14;
  }
.list ul.sublist{
  list-style:none;
  margin-left:45px;
  margin-top:0px;
  float:left;
  }
  .list ul.sublist li{
    background: url(../../images/charte/icon-list3.jpg) no-repeat left 7px;
    padding-left:8px;
    line-height:17px;
    }
ul.list{
  list-style:none;
  padding-left:45px;
  margin-top:0px;
  float:left;
  }
  ul.list li{
    background: url(../../images/charte/icon-list2.jpg) no-repeat left 4px;
    padding-left:17px;
    line-height:17px;
    }
ul.list1{
  list-style:none;
  margin-left:20px;
  margin-top:0px;
  }
  ul.list1 li{
    background: url(../../images/charte/icon-list.jpg) no-repeat left 4px;
    padding-left:17px;
    line-height:17px;
    margin-top:3px;
    display:inline;
    margin-right:30px;
    }
ul.list2{
  list-style:none;
  padding-left:190px;
  margin-top:4px;
  }
  ul.list2 li{
    background: url(../../images/charte/icon-list2.jpg) no-repeat left 4px;
    padding-left:17px;
    line-height:17px;
    margin-top:3px;
    display:inline;
    margin-right:75px;
    }

/* LEFT COLUMN */
#left-outter{
  color:#3F690A;
  font-size:11px;
  line-height:14px;
  text-align: justify;
  }

/* ===| MDM |====================================================*/
.mdm{
  background:url("images/bg-mdm.jpg") left top no-repeat;
  width:230px;
  height:95px;
  padding:34px 10px 0;
  margin-top:12px;
  }
.mdm .image-left{
  border:1px solid #D6D3CA;
  padding:1px;
  background-color: #FCFFF5;
  }

/* ===| ADRESSE |====================================================*/
#info .inner{
  background:url(images/bg-adresse.jpg) left top no-repeat;
  width:240px;
  height:100px;
  padding:34px 0px 0 10px;

  }
#info .inner p{
  line-height: 14px;

}
#info .image-right{padding-top:12px;}

 #info a.mail:link, #info a.mail:visited{
    background: url(../../images/charte/mail.jpg) left 0px no-repeat;
    padding-left:16px;
    }

/* ===| NEWSLETTER |====================================================*/
#newsletter{
  background: url(images/bg-newsletter.jpg) left top no-repeat;
  width:230px;
  height:24px;
  padding:30px 10px;
  margin-top:12px;
  }
  .ok{
    background: url(../../images/charte/ok.jpg) right top no-repeat;
    border:none;
    width:25px;
    height:17px;
    cursor:pointer;
    }
    .okOver{
      background: url(../../images/charte/ok-over.jpg) right top no-repeat;
      border:none;
      width:25px;
      height:17px;
      cursor:pointer;
      }
    .inputnl{
      border:1px solid #648E14;
      background: url(../../images/charte/bg-input.jpg) right top no-repeat;
      color:#ffffff;
      font-size:11px;
      width:196px;
      float:left;
      margin-right:2px;
      }



/* ===| CONTENT |====================================================*/
#right-outter{padding-top:20px;}

/* ===| ACCUEIL |====================================================*/
.orange-box{
  background:#FFEDC9 url(../../images/charte/orange-box.jpg) right top no-repeat;
  border: 1px solid #FFA800;
  clear:both;
  padding:9px;
  float:left;
  width:669px;
  margin:10px 0;
  }
.quali{
  background:transparent url(../../images/charte/logo-quali.gif) right 0px no-repeat;
  padding-right:55px;
  padding-top:10px;
  padding-bottom:7px;
  line-height:27px;
  }
.bleuciel{
  background:#FFEDC9 url(../../images/charte/logo-bleuciel.jpg) right 0px no-repeat;
  padding-right:48px;
  padding-top:10px;
  padding-bottom:7px;
  }
.logo{
  padding-left:15px;
  padding-right:15px;
  }
.subtitle{
  margin-top:20px;
  margin-left:16px;
  background:url(../../images/charte/subtitle5.gif) left top no-repeat;
  width:535px;
  height:114px;
  padding-top:20px;
  text-align:center;
  }

/* ===| MDM POPUP |====================================================*/
.mdm-popup{
  background:#ffffff url(../../images/charte/bg-mdm.jpg) left top no-repeat;
  font:normal 12px Arial;
  padding:165px 14px 20px;
  text-align: justify;

  }
  .mdm-popup img{
    border:1px solid #D6D3CA;
    padding:1px;
    background-color: #FCFFF5;
    }


/* realisations-box */
.realisations-box{
  width:215px;
  height:166px;
  float:left;
  padding:15px 7px 0 7px;
  }

.realisations-content{
  background:#ffffff url(../../images/charte/bg-realisations.jpg) left top no-repeat;
  padding:0px 7px 5px;
  height:143px
  }
  .realisations-box td{
    text-align: center;
    padding:0 2px;
    width:211px;
    height:28px;
    }
  .realisations-box td p{
    text-align: center;
    font:bold 11px Arial;
    color:#ffffff !important;
    line-height:12px;
    margin-top:0;
    padding-top:0;
    }
  .realisations-box .image-right img{
    border:1px solid #D6D3CA;
    padding:1px;
    background-color: #FCFFF5;
    }
  #right-inner .realisations-box p{
    color:#3F690A;
    font-size:11px;
    line-height:12px
    }
/* realisations detail */

.realisations-left{
  width:254px;
  float:left;
  padding-left:20px;
  }

  .realisations-left .image{
    height:250px;
    width:250px;
    text-align: center;
    }


.realisations-left .image,
.thumbs img{
   text-align: center;
   cursor:pointer;
  }
  .thumbs{
    float:left;
    margin:5px 1px 5px 3px;
    width:75px;
    height:75px;
    text-align: center;
    border:1px solid #D6D3CA;
    padding:1px;
    background-color: #FCFFF5;
    }

.realisations-right{
  padding-right:30px;
  padding-left:20px;
  float:left;
  width:355px;
  }
.realisations-right p{  line-height:16px}



/* Contact */
/* contact */
.contact-left{
  width:300px;
  float:left;
  padding-left:50px;
  font:normal 12px Arial;
  }
  .contact-right{
    width:270px;
    display:inline;
    float:left;
    }
    .contact-right p{
      padding-left:5px;
      }

.inputForm{
	border:1px solid #8ABC2C;
	background-color:#fff;
	color:#98C641;
  width:160px;
  font:normal 12px Arial;
	}
.inputFormOver{
	border:1px solid #F4AF24;
	background-color:#FFF6E5;
	color:#D28B02;
  width:160px;
  font:normal 12px Arial
	}
textarea{
  font:normal 12px Arial;
}


.label{
	width:90px;
	float:left;
	display:inline;
	clear:both;
	margin-top:5px;
	color:#000000;
	text-align:left;
  font:normal 12px Arial;

	}
  .label span{
    color:#FF9F04;
    }
.field{
	width:160px;
	float:left;
	margin-top:5px;
  font:normal 12px Arial;
 	}
.btn{
  clear:both;
  width:330px;
  text-align: center;
  margin:10px auto 0;
  }
  .btn div{
    float:left;
    display:inline;
    width:165px;
    }


.button{
  background:url(../../images/charte/button.jpg) no-repeat center top;
  border:none;
	width:108px;
  height:23px;
	cursor:pointer;
  color:#ffffff;
  font:bold 12px Arial;
	}
  .buttonOver{
    background:url(../../images/charte/button-over.jpg) no-repeat center top;
    border:none;
  	width:108px;
    height:23px;
  	cursor:pointer;
    color:#ffffff;
    font:bold 12px Arial;
    }
.recherche{
  background:url(../../images/charte/recherche.jpg) no-repeat center top;
  border:none;
	width:100px;
  height:19px;
	cursor:pointer;
  color:#ffffff;
  font:bold 12px Arial;
	}
  .recherche:hover{
    background:url(../../images/charte/recherche-over.jpg) no-repeat center top;
    border:none;
  	width:100px;
    height:19px;
  	cursor:pointer;
    color:#ffffff;
    font:bold 12px Arial;
    }

.vertical{
  padding-top:50px;
  }