/***************** BODY *****************/
*{
/*---on passe toutes les marges à 0---*/
margin:0;
padding:0;
}
body,html{
height:100%;
/*---permet de changer la couleur de la barre de scroll dans IE (déconseillé)
scrollbar-base-color:#7d8a2e;
---*/
}
body{
background:#fff;
}
/***************** CONTAINER *****************/
#container{
position:relative;
min-height:100%;
width:960px;
padding:0 10px 0 10px;
margin:0 auto;
background:url(../images/charte/bg-container.jpg) center top repeat-y;
}
/***************** HEADER *****************/
#header{
width:960px;
height:230px;
margin:0 0 20px 0;
background:url(../images/charte/bg-header.jpg) center top no-repeat;
}
#header #rondflash{
position:absolute;
width:450px;
left:50%;
top:0;
margin-left:-200px;
}
#header #logo{
position:absolute;
width:273px;
height:144px;
display:block;
background:url(../images/charte/logo.gif) no-repeat;
}
#header #espaceClient{
position:absolute;
top:0;
right:10px;
width:160px;
height:130px;
padding:30px 0 0 0;
}
#header #espaceClient input{
background:none;
border:1px solid #fff;
width:140px;
margin:5px 0 0 5px;
color:#fff;
}
#header #espaceClient a{
color:#fff;
text-decoration:none;
margin:0 0 0 5px;
font:13px Arial, Helvetica, sans-serif;
}
#header #recherche{
position:absolute;
top:195px;
left:60px;
}
#header #recherche input{
border:none;
background:none;
width:110px;
}
#header #recherche a{
color:#990000;
text-decoration:none;
font:13px Arial, Helvetica, sans-serif;
}

/***************** MENU TOP *****************/
#menuTop{
position:relative;
z-index:10;
width:572px;
height:26px;
top:200px;
left:240px;
list-style:none;
}

#menuTop li{
position:relative;
float:left;
}

#menuTop a{
text-decoration:none;
display:block;
height:26px;
overflow:hidden;
background:left top no-repeat;
}

#menuTop a span{
display:none;
}
#container #menuTop a:hover,
#container #menuTop a.trigered{

}

#menuTop li.bt-hommes{width:190px;}
#menuTop li.bt-femmes{width:199px;}
#menuTop li.bt-enfants{width:183px;}

#menuTop li.bt-hommes a{background-image:url(../images/charte/bt-homme.gif);}
#menuTop li.bt-femmes a{background-image:url(../images/charte/bt-femme.gif);}
#menuTop li.bt-enfants a{background-image:url(../images/charte/bt-enfants.gif);}
/***************** SOUS MENU */
#menuTop li ul{
list-style:none;
position:absolute;
width:180px;
top:-6000px;
left:0;
background:#fff;
border:solid #CCCCCC;
border-width:1px 0 0 0;
}
#menuTop li li{
float:none;
}
#container #menuTop li li a{
background:none;
width:auto;
position:relative;
height:20px;
padding:0 0 0 20px;
font:11px/20px Arial, Helvetica, sans-serif;
text-transform:none;
color:#666;
text-decoration:none;
border-bottom:1px solid #CCCCCC;
}
#container #menuTop li li a:hover{
background:#990000;
color:#fff;
}
/***************** MENU LEFT ***************/
#menuLeft{
float:left;
width:181px;
list-style:none;
}
#menuLeft li{
float:left;
width:181px;
}
#menuLeft a span{
display:none;
}
a.bt1{
width:181px;
height:35px;
display:block;
background:url(../images/charte/bt1.gif) no-repeat;
}
a.bt2{
width:181px;
height:30px;
display:block;
background:url(../images/charte/bt2.gif) no-repeat;
}
a.bt3{
width:181px;
height:30px;
display:block;
background:url(../images/charte/bt3.gif) no-repeat;
}
a.bt4{
width:181px;
height:30px;
display:block;
background:url(../images/charte/bt4.gif) no-repeat;
}
a.bt5{
width:181px;
height:30px;
display:block;
background:url(../images/charte/bt5.gif) no-repeat;
}
a.bt6{
width:181px;
height:30px;
display:block;
background:url(../images/charte/bt6.gif) no-repeat;
}
a.bt7{
width:181px;
height:30px;
display:block;
background:url(../images/charte/bt7.gif) no-repeat;
}
a.bt8{
width:181px;
height:30px;
display:block;
background:url(../images/charte/bt8.gif) no-repeat;
}
/***************** CONTENU *****************/
#contenu{
width:700px;
float:right;
padding:10px 20px 0 20px;
}
#contenu #txt{
width:700px;
float:left;
}
#contenu #accesRapide{
width:572px;
height:96px;
float:left;
margin:0 0 20px 0;
background:url(../images/charte/bg-accesrapide.gif) no-repeat;
}
/*---obligatoire pour le footer---*/
/*---mettre <div class="clearer" id="clearFooter"></div>--*/
/*---apres la div contenu---*/
.clearer{
clear:both;
}
#clearFooter{
height:30px;/*--- = à la hauteur du footer ---*/
}/******************** ENCARTS ACCUEIL ********/
#newsletter{
width:572px;
height:88px;
float:left;
margin:0 0 20px 0;
background:url(../images/charte/newsletter.jpg) no-repeat;
}
#newsletter form{
float:right;
margin:47px 50px 0 0;
}
#newsletter form input{
border:1px solid #999999;
width:180px;
color:#999999;
}
#promo{
float:left;
width:268px;
height:185px;
padding:50px 0 0 5px;
margin-left:40px;
margin-right:35px;
background:url(../images/charte/promo.jpg) no-repeat;
}
#nvtes{
width:268px;
height:185px;
float:left;
margin:0 0 0 25px;
padding:50px 0 0 5px;
background:url(../images/charte/nouveautes.jpg) no-repeat;
}
/***************** FOOTER *****************/
#footer{
position:relative;
clear:both;
width:960px;
height:30px;
margin:-30px auto 0;
background: url(../images/charte/bg-footer.jpg) no-repeat;
}
#idep{
position:absolute;
right:100px;
top:10px;
width:195px;
height:30px;
}
#idep img{
float:left;
}
#footer #idep a.idep{
text-decoration:none;
display:block;
font:9px/7px Arial, Helvetica, sans-serif;
color:#fff;
}
#footer #idep a.idep.optea{
margin:0;
}
#footer #idep a:hover.idep{
text-decoration:none;
color:#CC3300;
}


#liens{
position:absolute;
right:300px;
top:5px;
width:195px;
height:30px;
margin-right:300px;
color:#FFFFFF;
}


#footer #liens a{
	text-decoration:none;
	font:11px/7px Arial, Helvetica, sans-serif;
	color:#fff;
}

#footer #liens a:hover{
	text-decoration:none;
	color:#CC3300;
}