/***************** 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:#2D4F97;
}
/***************** CONTAINER *****************/
#container{
position:relative;
min-height:100%;
width:980px;
margin:0 auto;
background:url(../images/charte/bg-container.jpg) center top repeat-y;
}
/***************** HEADER *****************/
#header{
background:url(../images/charte/header.jpg) center top no-repeat;
width:980px;
height:140px;
}
/***************** MENU TOP *****************/
#menuTop{
position:relative;
z-index:10;
width:980px;
height:40px;
}
#menuTop ul{
list-style:none;
padding:100px 0 0 167px;
}
#menuTop li{
position:relative;
float:left;;
}
#menuTop a span{
display:none;
}
#menuTop li.bt01 a{background:url(../images/charte/bt01.jpg); width:117px;}
#menuTop li.bt02 a{background:url(../images/charte/bt02.jpg); width:146px;}
#menuTop li.bt03 a{background:url(../images/charte/bt03.jpg); width:190px;}
#menuTop li.bt04 a{background:url(../images/charte/bt04.jpg); width:188px;}
#menuTop li.bt05 a{background:url(../images/charte/bt05.jpg); width:132px;}

#menuTop li a{
background-position:center top;
background-repeat:no-repeat;
text-decoration:none;
font:bold 12px/30px Arial, Helvetica, sans-serif;
color:#A98A4E;
text-align:center;
text-transform:uppercase;
display:block;
height:40px;
overflow:hidden;
}
#container #menuTop li a:hover,
#container #menuTop a.trigered{
background-position:center bottom;
background-repeat:no-repeat;
color:#2D4F97;
}
/***************** SOUS MENU *****************/
#container #menuTop li ul{
list-style:none;
position:absolute;
width:146px;
top:-6000px;
left:0;
background:#A98A4E;
padding:0;
}
#container #menuTop li li{
float:none;
width:146px;
}
#container #menuTop li li a{
background:none;
width:auto;
position:relative;
height:30px;
font:bold 12px/20px Arial, Helvetica, sans-serif;
text-transform:none;
text-transform:uppercase;
color:#fff;
text-decoration:none;
}
#container #menuTop li li a:hover{
color:#2D4F97;
}
/***************** CONTENU *****************/
#contenu{
float:left;
width:880px;
padding:10px 0 10px 50px;
}
#contenu a{
/*font:bold 11px/12px Arial, Helvetica, sans-serif;*/
color:#2D4F97;
text-decoration:none;
width:auto;
/*float:right;
display:block;
margin-right:10px;*/
}

#contenu a.lien{
font:bold 11px/12px Arial, Helvetica, sans-serif;
color:#2D4F97;
text-decoration:none;
width:auto;
float:right;
display:block;
margin-right:10px;
}

#contenu a:hover{
text-decoration:underline;
}
/** ACCUEIL ** ACCUEIL ** ACCUEIL ** ACCUEIL ** ACCUEIL ** ACCUEIL **/
/***************** DIAPO */
#galerie{
width:880px;
height:300px;
float:left;
margin-bottom:10px;
}
/***************** LEFT *****************/
#colLeft{
float:left;
width:170px;
}
/***************** MESURES */
#boxMesures{
background:url(../images/charte/box-mesures.jpg) center top no-repeat;
width:170px;
height:130px;
float:left;
}
#boxMesures a{
margin-top:110px;
}
/***************** NEWSLETTER */
#boxNews{
background:url(../images/charte/box-newsletter.jpg) center top no-repeat;
width:170px;
min-height:130px;
height:auto !important;
float:left;
margin-top:10px;
}
#boxNews a{
margin-top:10px;
}
#boxNews input{
background:none;
border:none;
width:140px;
height:20px;
font:10px Arial, Helvetica, sans-serif;
color:#666;
float:left;
margin:80px 0 0 15px;
} 
/***************** CENTER *****************/
#colCenter{
width:480px;
/*height:270px;*/
float:left;
padding-left:5px;
}
/***************** ZOOM */
#boxZoom{
background:url(../images/charte/box-zoom.jpg) center top no-repeat;
width:480px;
height:270px;
float:left;
}
#boxZoom a{
font-size:14px;
}

#contenu a.lien_info{
font:bold 11px/12px Arial, Helvetica, sans-serif;
color:#2D4F97;
text-decoration:none;
width:auto;
display:block;
background:url(../images/charte/puce_lien.jpg) center left no-repeat;
padding-left:10px;
margin-left:148px;
} 


#boxZoom #image{
width:190px;
height:215px;
margin:40px 0 0 15px;
float:left;
}
#container #contenu #colCenter #boxZoom p{
font:12px Arial, Helvetica, sans-serif;
color:#fff;
width:240px;
/*height:210px;*/
margin:0px 0 10px 15px;
float:left;
}


#container #contenu #colCenter #boxZoom p.txt_zoom{
font:12px Arial, Helvetica, sans-serif;
color:#fff;
width:240px;
height:120px;
margin:0px 0 10px 15px;
float:left;
}

#container #contenu #colCenter #boxZoom p.titre_zoom{
font:14px Arial, Helvetica, sans-serif;
color:#fff;
width:240px;
font-weight:bold;
font-family:"Trebuchet MS";
border-bottom:1px #FFFFFF dotted;
/*height:210px;*/
margin:35px 0 10px 15px;
float:left;
}

#container #contenu #colCenter #boxZoom p.titre_zoom a{
color:#fff;
font-weight:bold;
}

#container #contenu #colCenter #boxZoom p.prix{
	font-size:16px;
	font-weight:bold;
	text-align:center;
	margin-bottom:25px;
	color:#3269CE;
}
#container #contenu #colCenter #boxZoom p.prix span{
	text-decoration:line-through;
	color:#CCCCCC;
	font-size:12px;
	padding-right:10px;
}

/***************** RIGHT *****************/
#colRight{
float:left;
width:220px;
padding-left:5px;
}
/***************** COMPTE */
#boxCompte{
background:url(../images/charte/box-compte.jpg) center top no-repeat;
width:220px;
height:100px;
float:left;
}
#boxCompte2{
width:220px;
float:left;
}
#boxCompte a{
margin-top:5px;
}
#boxCompte input{
background:none;
border:none;
width:150px;
height:16px;
font:10px Arial, Helvetica, sans-serif;
color:#666;
float:left;
margin-left:55px;
} 
#boxCompte #box1{
margin-top:32px;
}
#boxCompte #box2{
margin-top:10px;
}
/***************** CADDIE */
#boxPanier{
background:url(../images/charte/box-panier.jpg) center top no-repeat;
width:220px;
height:30px;
float:left;
margin-top:5px;
}
#boxPanier a{
margin:10px 30px 0 0;
font-size:14px;
}
/***************** ACTU */
#boxActus{
float:left;
width:220px;
height:130px;
background:url(../images/charte/box-actus.jpg) center top no-repeat;
margin-top:5px;
}
#lesActus{
margin:45px 0 0 10px;
width:190px;
height:80px;
overflow:auto;
padding-right:10px;
}
.uneactu{
padding:0 0px 0 5px;
margin:0 0 20px;
}
#lesActus  .uneactu p{
font-size:11px;
margin-bottom:10px;
}
#lesActus .uneactu p.date{
width:175px;
height:14px;
color:#fff;
background: url(../images/charte/bg-date.gif);;
padding:1px 0 2px 4px;
margin:0 0 7px;
}
#contenu #actu .uneactu a{
position:relative;
top:5px;
font:10px Arial, Helvetica, sans-serif;
text-decoration:underline;
width:auto;
margin-left:90px;
}
#contenu #actu .uneactu a:hover{
color:#2D4F97;
}
/***************** ADRESSE */
#adresse{
background:url(../images/charte/adresse.jpg) center top no-repeat;
width:880px;
height:40px;
float:left;
margin-top:10px;
}
/** COLLECTION ** COLLECTION ** COLLECTION ** COLLECTION ** COLLECTION ** COLLECTION **/
#contenuCollection{
background:#fff;
float:left;
width:725px;
border:#ccc solid 1px;
margin-left:10px;
padding-bottom:5px;
height:100%;
}
/***************** TOP *****************/
#top{
background: url(../images/charte/top.jpg) center top no-repeat;
height:30px;
width:900px;
margin-left:40px;
}
#top a{
font:11px/30px Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
text-transform:uppercase;
display:block;
width:auto;
float:right;
margin:0 15px 0 10px;
}
#top a:hover{
text-decoration:underline;
}
/***************** MENULEFT *****************/
#container #contenu #menuLeft{
width:140px;
float:left;
}
#container #contenu #menuLeft .grands{
background:url(../images/charte/menu-grand.jpg) center top no-repeat;
width:140px;
}
#container #contenu #menuLeft .caustaud{
background:url(../images/charte/menu-costaud.jpg) center top no-repeat;
width:140px;
}
#container #contenu #menuLeft ul{
list-style:none;
padding:45px 0 10px 0;
}
#container #contenu #menuLeft ul li{
height:auto !important;
}
#container #contenu #menuLeft a{
text-decoration:none;
font:bold 11px/25px Arial, Helvetica, sans-serif;
color:#2D4F97;
display:block;
height:auto !important;
width:120px;
overflow:hidden;
padding:0 0 0 20px;
margin:0;
}
#container #contenu #menuLeft a:hover,
#container #contenu #menuTop a.trigered{
color:#A98A4E;
}
/***************** THUMB *****************/
#container #contenu #thumb{
background: url(../images/charte/thumb.gif) left top no-repeat;
width:340px;
height:160px;
display:block;
float:left;
margin:10px;
}
#container #contenu #thumb img{
float:left;
width:140px;
height:150px;
padding:5px;
}
#container #contenu #thumb ul{
list-style:none;
float:left;
height:125px;
}
#container #contenu #thumb li{
font:bold 14px Arial, Helvetica, sans-serif;
color:#2D4F97;
height:25px;
}
#container #contenu #thumb li.titre{
font:bold 14px/35px Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#fff;
width:185px;
height:30px;
text-align:center;
margin-bottom:10px;
}
#container #contenu #thumb li.taille{
font-size:14px;
font-weight:bold;
padding-left:10px;
}
#container #contenu #thumb li.prix{
font-size:14px;
font-weight:bold;
padding-left:10px;
}
#container #contenu #thumb li.prix span{
text-decoration:line-through;
color:#999;
padding-right:10px;
}
#container #contenu #thumb a{
font:12px/20px Arial, Helvetica, sans-serif;
text-decoration:none;
color:#666;
float:left;
margin:5px 5px 0 5px;
height:20px;
width:auto;
padding:0 20px 0 20px;
background:#fff;
border:#ccc solid 1px;
display:block;
text-align:center;
}
#container #contenu #thumb a:hover{
color:#fff;
background:#2D4F97;
}

/*---obligatoire pour le footer---*/
/*---mettre <div class="clearer" id="clearFooter"></div>--*/
/*---apres la div contenu---*/
.clearer{
clear:both;
}
#clearFooter{
height:90px;/*--- = à la hauteur du footer ---*/
}
#clearContenu{
height:20px;/*--- = à la hauteur du footer ---*/
}
/***************** FOOTER *****************/
#footer{
position:relative;
clear:both;
width:980px;
height:90px;
margin:-90px auto 0;
background: url(../images/charte/footer.jpg) center top no-repeat;
}
#idep{
position:absolute;
right:0;
top:60px;
width:195px;
height:30px;
}
#idep img{
float:left;
}
#footer #idep a.idep{
text-decoration:none;
display:block;
font:9px/8px Arial, Helvetica, sans-serif;
color:#fff;
margin:4px 0 0;
}
#footer #idep a.idep.optea{
margin:0;
}
#footer #idep a:hover.idep{
text-decoration:none;
color:#887145;
}