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


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

#wrap-container{position:relative;z-index:4; width: 100%;}
#container{ margin:0 auto;	text-align: left;}
#content{}


#intro{
  width:996px;
  height:383px;
}

#info-intro{
  width:996px;
  height:109px;
  background: url(images/bg-info-intro.jpg) left top no-repeat;
}


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

/* ===| III. CONTENT |=====================================================*/
#content{
  background: #f1f1f1 url(images/bg-contenu.jpg) left top repeat-x;
}

#info{
  width: 726px;
  height: 51px;
  padding: 14px 0px 0px 270px;
  background: url(images/bg-info.jpg) left top no-repeat;
}

.paragraph{
  width:956px;
  padding:0px 20px 0px 20px;
}
.box{
  float:left;
  width: 772px;
  height:77px;
  padding:8px 18px 0px 18px;
  background: url(../../images/charte/bg-box.jpg) right bottom no-repeat;
  border: 1px solid #d8d8d8;
  margin-bottom:9px;
}
.box-bg{
  float:left;
  width: 714px;
  background-color: #ffffff;
  border: 1px solid #cacaca;
  padding: 2px 13px 3px 13px;
  margin-bottom:8px;
}
.box3{
  width:742px;
  height:31px;
  float:left;
  padding: 7px 0px 0px 0px;
  text-align:center;
  background: url(../../images/charte/bg-box3.jpg) left top no-repeat;
}

.box4{
  width:956px;
  height:31px;
  float:left;
  padding: 7px 0px 0px 0px;
  text-align:center;
  background: url(../../images/charte/bg-box4.jpg) left top no-repeat;
}




.separator {clear: both; height: 1px; margin: 0px 0 10px 0; background: #cacaca; line-height: 0px; font-size: 0px;  }


ul.list2{overflow: hidden;display:inline; float: left; }
ul.list2 li{list-style: none; padding-left: 0px !important; font:normal 12px Arial; color:#424242; line-height: 18px; float:left; width:246px;}
ul.list2 li {background: url(../../images/charte/dotted.gif) left 13px repeat-x !important;}

ul.list2 li span{
  background: #FCFCFC;
  float:left;
}



ul.list3{overflow: hidden;display:inline; float: left; margin-bottom:8px;}
ul.list3 li{list-style: none; padding-left: 0px !important; font:normal 12px Arial; color:#424242; line-height: 18px; float:left; width:246px;}
ul.list3 li {background: url(../../images/charte/dotted.gif) left 13px repeat-x !important;}

ul.list3 li span{
  background: #F1F1F1;
  float:left;
}

ul.list4{overflow: hidden;display:inline; float: left; background: #cacaca; }
ul.list4 li{list-style: none; padding-left: 20px !important; font:normal 12px Arial; color:#424242; line-height: 20px;}
ul.list4 li {background: none !important;}
/* ===| PRODUCTS |====================================================*/
.product{
  display:inline;
  float:left;
  width:285px;
  height:180px;
  padding:5px 10px;
  background: url(../../images/charte/bg-product.jpg) left top no-repeat;
  margin: 0px 0px 20px 20px;

}
.prod-photo{
  float:left;
  width:110px;
  background-color: #fcfcfc;
  text-align: center;
  margin-right:10px;
  border: 1px solid #f9f9f9;
}


.pagination {float: left; clear:left; width:100%; text-align:center;}
.pagination span{padding:1px; margin: 0 15px 0 15px;}
.pagination a:link, .pagination a:visited{padding:1px 3px; text-decoration: none; color: #F47026;}
.pagination a:hover, .pagination a:active{color:#000000; text-decoration: underline;}

/* ===| /PRODUCTS |====================================================*/



/* ===| IV. OTHER ELEMENTS |====================================================*/
img {border: 0;}
a:focus{
  outline: none;
}


.clear{
  clear:both;
  padding:0px;
  margin:0px;
  line-height: 0px;
  font-size: 0px;
  height: 0px;
}

.clear10{
  clear:both;
  padding:0px;
  margin:0px;
  line-height: 0px;
  font-size: 0px;
  height: 10px;
}

.clear20{
  clear:both;
  padding:0px;
  margin:0px;
  line-height: 0px;
  font-size: 0px;
  height: 20px;
}


.thumb-left{
  float:left;
  border:1px solid #a3a3a3;
  margin-right: 15px;
}
.thumb-right{
  float:right;
  border:1px solid #a3a3a3;
  margin-left: 15px;
}

.thumb-left1{
  float:left;
  border:1px solid #a3a3a3;
  margin-right: 15px;
  margin-top: 5px;
}
.thumb-right1{
  float:right;
  border:1px solid #a3a3a3;
  margin-left: 15px;
}

.thumb-left2{
  float:left;
  border:1px solid #a3a3a3;
  margin-right: 15px;
  margin-left: 25px;
}

#menu2 ul li{display: inline;}

.spacer{
  clear:both;
  width: 956px;
  height: 17px;
}

.spacer2{
  clear:both;
  width: 956px;
  height: 1px !important;
  line-height: 0px !important;
  border-top: 1px solid #ffffff;
  background-color:#eaeaea;
  margin:10px 0px 15px 0px;
  padding:0px !important;
}

/* ===| V. FOOTER BOXES |=====================================================*/
#wrap-footer {position:relative; z-index: 4; width: 100%; text-align: left;}
#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:url(images/bg-footer.jpg) left top no-repeat; margin: 0 auto; padding: 0px; height:57px;}
#footer .inner	{padding: 0px;}
#footer .box1	{width: 286px; height:46px; float:left; padding :11px 0px 0px 20px; }
#footer .box2	{width: 670px; height:45px; float:left; padding :12px 20px 0px 0px; text-align:right; }

/* ===| VII. CONTACT FORM |=====================================================*/
/* contact */
.mail-input
{
    color: #40371c;
    width:240px;
    text-align: left;
    float: left;

}
.mail-label{
	font-weight: normal;
	float:left;
	text-align:left;
	height:10px;
	width:80px;
    text-align: left;
    margin-top:7px;
    font-family:  Arial, Verdana, Tahoma, sans-serif;
    font-size: 12px;
    color: #444444;
}

.buttonE
{
    background: url(../../images/charte/envoyer.jpg) no-repeat top left;
	border: none;
    width: 102px;
	height: 25px;
    margin-right: 20px;
}
.buttonEover
{
    background:  url(../../images/charte/envoyer-over.jpg) no-repeat top left;
	border: none;
    width: 102px;
	height: 25px;
    cursor: pointer;
    margin-right: 20px;
}
.buttonR
{
    background:  url(../../images/charte/retablir.jpg) no-repeat top left;
	border: none;
    width: 102px;
	height: 25px;
}
.buttonRover
{
    background:  url(../../images/charte/retablir-over.jpg) no-repeat top left;
	border: none;
    width: 102px;
	height: 25px;
    cursor: pointer;
}
.inputForm
{
    font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
    font-size:12px;
    padding: 2px;
	margin: 5px 0 0 0px;
	width:230px;
    color: #444444;
    border: 1px solid #CACACA;
	background-color:#ffffff;
	float:left;
	height:15px;
}
.inputFormOver
{
    font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
    font-size:12px;
 	padding: 2px;
	margin: 5px 0 0 0px;
	width: 230px;
	width: 230px;
	height:15px;
    color: #624F2C;
    border: 1px solid #A3A3A3;
	background-color:#ECECEC;
    float:left;
}
.couleur3
{
    color: #000000;
}