/***************** 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:url(../images/charte/bg.jpg) repeat-x #834800;
}
/***************** CONTAINER *****************/
#container{
position:relative;
min-height:100%;
width:970px;
margin:0 auto;
background:url(../images/charte/bg_container.jpg) scroll repeat-y;
}
/***************** HEADER *****************/
#header{
width:970px;
height:285px;
}



/***************** COL RIGHT *****************/
#colRight{
float:right;
width:207px;
height:364px;
background:url(../images/charte/bg_contenu.jpg) top right no-repeat;
}
#colRight form input.case{
z-index:100;
font:normal 10px Arial, Helvetica, sans-serif;
color:#a26d07;
width:156px;
height:14px;
padding:0 3px;
border:1px solid #a26d07;
background:#fff;
}
/*** NEWSLETTER ***/
form#news{
position:relative;
width:172px;
height:34px;
padding:45px 0 0 8px;

background:url(../images/charte/bg-newsletter.gif) no-repeat scroll left top;
}
#colRight form#news input.case{
width:89px;
height:16px;

}
form#news input.btn{
position:absolute;
width:64px;
height:18px;
top:45px;
left:108px;
}
/*** COMPTE ***/
#colRight a.moncompte{
text-decoration:none;
position:relative;
display:block;
width:201px;
height:42px;
background:url(../images/charte/bg-moncompte.gif) no-repeat scroll left top;
}
#colRight a:hover.moncompte{
text-decoration:none;
background-position:left bottom;
}
/*** PANIER ***/
#colRight a.panier{
font:normal 10px Arial, Helvetica, sans-serif;
color:#525f16;
text-decoration:underline;
position:relative;
display:block;
width:170px;
height:34px;
padding:28px 0 0 31px;
background:url(../images/charte/bg-panier.gif) no-repeat scroll left top;
}
#colRight a:hover.panier{
text-decoration:none;
color:#b02d2e;
background-position:left bottom;
}
/*** TITRE DIAPORAMA ***/
#titrediapo{
position:relative;
width:180px;
height:62px;

}
/* DIAPORAMA */
#diaporama{
position:relative;
width:180px;
height:219px;
background:none;
padding-bottom:3px;
}
/***************** CONTENU *****************/
#contenu{
position:relative;
width:910px;
margin:0 0 0 0px;
background:url(../images/charte/bg_contenu.jpg) top left no-repeat;
padding:0 0 0px 60px;
}
/*****************************************************/
/* 		SELECTION
/*****************************************************/
#selection{
position:relative;
width:670px;
margin-bottom:30px;

}
#contenu #selection h3{
text-align:center;
width:158px;
}
#detail{
min-height:150px;

}
#laselection img.plus{
border:0;
margin-top:4px;
margin-left:36px;

}
#laselection{
float:left;
width:200px;
height:310px;
padding-right:23px;
margin-right:20px;
border-right:1px solid #e4ebc3;
}
#laselection a#image{
text-decoration:none;
/*float:left;*/
display:block;
width:158px;

height:135px;
border:1px solid #6c7a29;
background:no-repeat scroll center center;
}
#laselection a:hover#image{
border:1px solid #a26d06;
}
/*****************************************************/
/* 		VIGNETTE PRODUIT
/*****************************************************/
#container #contenu a.vign{
float:left;
width:162px;
padding:4px 4px 22px 4px;
text-decoration:none;
margin:0 10px 29px 10px;
border:1px solid #6c7a29;
background:#fff url(../images/charte/bt-fiche.gif) no-repeat scroll right bottom;
}
#container #contenu a.vign #image{
width:158px;
height:135px;
background:no-repeat scroll center center;
margin-bottom:5px;
border:1px solid #eee;
}
#container #contenu a.vign p{
font:normal 10px Arial, Helvetica, sans-serif;
text-align:left;
color:#6c7a29;
text-transform:uppercase;
}
#container #contenu a.vign p.prix{
font:bold 14px Arial, Helvetica, sans-serif;
color:#c21926;
}
#container #contenu a.vign p.prix span{
font-size:13px;
color:#6c7a29;
text-decoration:line-through;
}
#container #contenu a.vign:hover{
border:1px solid #ee8293;
cursor:pointer;
}
#container #contenu a.vign:hover p{
color:#c21926;
}
/*---obligatoire pour le footer---*/
/*---mettre <div class="clearer"></div> apres la div contenu---*/
.clearer
{
clear: both;
display: block;
height: 134px;
margin-bottom: -1px;
font-size: 1px;
line-height: 1px;
}
/***************** FOOTER *****************/
#footer{
position:relative;
clear:both;
width:970px;
height:134px;
margin:-134px auto 0;
background:url(../images/charte/bg_footer.jpg);
}


#footer2{
position:relative;
width:970px;
height:134px;
margin:0 auto;
background:url(../images/charte/bg_footer.jpg);
}

#idep{
position:absolute;
left:20px;
top:100px;
width:192px;
height:30px;
}
#idep img{
float:left;
}
#idep a.idep{
display:block;
font:normal 9px/9px Arial, Helvetica, sans-serif;
text-align:left;
color:#7f5210;
margin-top:4px;
}
#idep a:link.idep, #idep a:visited.idep{
text-decoration:none;
color:#7f5210;
}
#idep a:hover.idep, #idep a:active.idep{
text-decoration:none;
color:#ffc3cd;
}

#footer2 p{
font:normal 9px/30px Arial, Helvetica, sans-serif;
text-align:right;
color:#fff;
padding:70px 10px 0 0;
}
#footer2 a:link, #footer2 a:visited{
text-decoration:none;
color:#fff;
}
#footer2 a:hover, #footer2 a:active{
text-decoration:underline;
color:#ffc3cd;
}