/* Feuille de style pour la charte graphique du site
 * Cette feuille de style est appelée depuis styles.css.
 */

/***************** STRUCTURE *****************/
*{
/*---toutes les marges sont à 0---*/
margin:0;
padding:0;
}
body,html{
	height:100%;/*---obligatoire pour le footer---*/
	background-color:#FFF;

}

body{
	font-size:62.5%;
	background:url(../images/charte/bg.jpg);
	background-repeat:repeat-x;
}

#container{
	position: relative;/*---obligatoire pour le footer---*/
	min-height:100%; /*---obligatoire pour le footer:Firefox---*/
	height:auto !important;/*---obligatoire pour le footer:Firefox---*/
	height:100%;/*---obligatoire pour le footer:IE---*/
	width:970px;
	margin:0 auto;
	background-image:url(../images/charte/bg-contenu2.jpg);
	background-repeat:repeat-y;
}
#container2{
	position: relative;/*---obligatoire pour le footer---*/
	min-height:100%; /*---obligatoire pour le footer:Firefox---*/
	height:auto !important;/*---obligatoire pour le footer:Firefox---*/
	height:100%;/*---obligatoire pour le footer:IE---*/
	width:970px;
	margin:0 auto;
	background-image:url(../images/charte/bg-contenu.jpg);
	background-repeat:no-repeat;
	background-position:top;
}

#header{
	width:970px;
	height:149px;
	background-color:#FFF;
}
/***************** CONTAINER DU CONTENU *****************/


#contenu {
	position:relative;
	width:970px;
	padding-bottom:44px;
	display:table;
	font-family:Arial, Helvetica, sans-serif;
	color:#605F5F;

}

/***************** MENU ********************/

#contenu #menu {
	float:left;
	width:199px;
	padding: 12px 0px 0 0px;
}

#contenu #menu dt a:link, #menu dt a:visited{
width:199px;
height:23px;
color:#9A9A9A;
text-decoration: none;
display: block;
margin:10px 0 0 0;

}
#contenu #menu dd{
background-image: url(../images/charte/rep.gif);
background-repeat: repeat-y;
background-position:left top;
}
#contenu #menu dt a:hover {
width:199px;
height:23px;
color:#9A9A9A;
text-decoration: none;
display: block;	
text-decoration: underline;
margin:10px 0 0px 0;
}
#contenu #menu ul{
padding:0px 0 0px 0px;
width:199px;
text-align:left;

}
#contenu #menu li {
padding-left:30px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:11px;
line-height:20px;
color:#9A9A9A;
list-style-type:none;
}

#contenu #menu li a,#menu li a:visited{
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
color:#505050;
text-decoration:none;
}

#contenu #menu li a:hover {
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
color:#498ADC;
text-decoration:none;
}


#contenu #menu dt span {	display:none; }

a.bt1		{ 	background:url(../images/charte/menu-01.gif) no-repeat left top;  		}
a:hover.bt1 {	background:url(../images/charte/menu-01-over.gif) no-repeat left top; 	}

a.bt2		{ 	background:url(../images/charte/menu-02.gif) no-repeat left top;  		}
a:hover.bt2 {	background:url(../images/charte/menu-02-over.gif) no-repeat left top; 	}


/***************** CONTENU TEXTUEL *****************/

#contenuTexte{
	padding:10px 0 0 0px;
	width:771px;
	float:left;
}


#contenuTexte h1{
	margin:10px 0;
	font:bold 1.4em Arial, Helvetica, sans-serif;
	color:#498ADC;
	margin-left:10px;
/*	border-bottom:1px solid #498ADC;*/
}

#contenuTexte h2{
	margin:10px 0;
	font:bold 1.4em Arial, Helvetica, sans-serif;
	color:#498ADC;
}

#contenuTexte p{
	padding-bottom:5px;
	font-size:1.1em;
	line-height:1.2em;
	text-align:justify;
}
#contenuTexte a:link, #contenu a:visited{
	color: #498ADC;
	text-decoration:none;
}
#contenuTexte a:hover, #contenu a:active{
	color: #498ADC;
	text-decoration:none;
}
#contenuTexte p.couleur, .couleur{
	font-weight:normal;
	color:#605F5F;

}

/********** FICHE PRODUIT **********/
#fiche{
position:relative;
width:694px;
min-height:232px;
margin:29px 0 30px 5px;
background:url(../images/charte/bg-produit.gif) no-repeat scroll left top;
}
#fiche div#photo{
float:left;
width:332px;
padding:0 16px 0 0;
}
#fiche div#photo img.prod{
border:1px solid #e9d9a9;
}
#fiche div#photo a.mini img{
display:block;
float:left;
margin:10px 5px 10px 0;
}

#fiche div#photo a:link.mini img, #fiche div#photo a:visited.mini img{
border:1px solid #e9d9a9;
}
#fiche div#photo a:hover.mini img, #fiche div#photo a:active.mini img{
border:1px solid #6D6D6D;
}
#fiche div#photo a.bouton{
float:left;
display:block;
height:16px;
width:120px;
margin:12px 0 0 15px;
}
#fiche div#photo a.bouton.amis{
background:url(../images/charte/bt-amis.gif) no-repeat scroll left top;
}
#fiche div#photo a.bouton.print{
background:url(../images/charte/bt-print.gif) no-repeat scroll left top;
}
#fiche div#photo a:link.bouton, #fiche div#photo a:visited.bouton{
font:normal 1.1em/16px Arial, Helvetica, sans-serif;
color:#757063;
text-align:left;
text-decoration:underline;
text-indent:21px;
}
#fiche div#photo a:hover.bouton, #fiche div#photo a:active.bouton{
color:#6D6D6D;
text-decoration:none;
}
#fiche div#desc{
float:left;
width:330px;
padding:9px 0 0 0;
}
#fiche div#desc h1{
font:bold 1.6em "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#3F5621;
text-align:left;
margin:0 0 9px 0;
}
#fiche div#desc h2{
font:bold 1.6em "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#3F5621;
text-align:left;
margin:0;
}
#fiche div#desc p{
font:normal 1.1em/1.2em Arial, Helvetica, sans-serif;
color:#35322d;
text-align:justify;
}
#fiche div#desc p.ref{
font-style:italic;
color:#757063;
text-align:left;
}
#fiche div#desc ul{
margin:5px 0 0 22px;
}
#fiche div#desc li{
font:normal 1.1em Arial, Helvetica, sans-serif;
color:#35322d;
text-align:left;
padding:5px 0;
list-style-type:disc;
}
#fiche div#desc img.ajouter{
margin:5px 0 0 0;
}
#fiche div#option{
width:330px;
background:#f9f6eb;
border:1px solid #e9d9a9;
margin:30px 0 35px 0;
}
#fiche div#option h1{
font:bold 1.4em "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#1bbbe9;
text-align:left;
margin:0;
padding:3px 5px;
background:#ede4c1;
}
#fiche div#option table#opt{
width:330px;
font:normal 1.1em/1.2em Arial, Helvetica, sans-serif;
color:#757063;
text-align:left;
}
#fiche div#option table#opt td{
padding:7px 0;
vertical-align:middle;
}
#fiche div#option table#opt td.nom{
width:185px;
padding-right:5px;
}
#fiche div#option table#opt td.prix{
width:70px;
padding-right:5px;
font:bold 1.1em Arial, Helvetica, sans-serif;
color:#3F5621;
}
#fiche div#option table#opt td.ajout{
width:40px;
padding-left:5px;
padding-right:10px;
text-align:center;
}
#fiche div#option table#opt td.ajout img{
margin-bottom:5px;
}


/*****************************************************/
/* 		Vignette Produit
/*****************************************************/
#container #contenu a.vign{
float:left;
width:160px;
height:207px;
padding:13px 4px;
text-decoration:none;
margin:0 0px 10px 20px;
background:url(../images/charte/bg-fiche.gif) no-repeat scroll left top;
}
#container #contenu a.vign img{
border:none;
margin-left:5px;
margin-bottom:5px;
}
#container #contenu a.vign p{
font:bold 11px Arial, Helvetica, sans-serif;
text-align:left;
padding-left:10px;
color:#498ADC;
text-transform:uppercase;
}
#container #contenu a.vign p.prix{
font:bold 16px Arial, Helvetica, sans-serif;
color:#272727;
}
#container #contenu a:hover.vign{
background-position:left bottom;
cursor:pointer;
}
#container #contenu a:hover.vign p{
color:#272727;
}
#container #contenu a:hover.vign p.prix{
color:#498ADC;
}

/***************** DIVERS *****************/
#recherche{
	float:left;
	width:155px;
}

#separateur{
	clear:both;
}

.style-champ{
	float:left;
	width:95px;
	padding-top:7px;
	padding-left:30px;
	background:none;
	border:none;
	color:#FFF;
}


#ok{
	float:left;
	padding-top:50px
	height:34px;
	width:31px;
	background:none;
	border:none;
}
/***************** CONNEXIOn *****************/
#bgconnexion{
	float:left;
	background-image:url(../images/charte/connexion.gif);
	width:970px;
	height:39px;
	background-position:top;
}

.style-connexion{
	float:left;
	padding:10px 10px 0 105px;
	background:none;
	border:none;
	color:#243D8A;
	width:95px;
}


.style-passe{
	padding:10px 10px 0 20px;
	background:none;
	border:none;
	color:#243D8A;
	width:95px;
}

.ok2{
float:left;
padding:8px 0px 0 300px;}

/***************** FIN CONNEXION *****************/

.gauche {
float:left;
width:730px;
padding:0px 0px 0 22px;
}

/*---obligatoire pour le footer---*/
/*---mettre <div class="clearer"></div> apres la div contenu---*/
.clearer
{
	clear: both;
	display: block;
	height: 0px;
	margin-bottom: 0px;
	font-size: 0px;
	line-height: 0px;
}
/***************** FOOTER *****************/
#footer{
	position: relative;/*---obligatoire pour le footer---*/
	margin: -44px auto 0 auto;/*---margin top = - hauteur du footer---*/
	width:100%;
	height:44px;
	font:bold 1em Arial, Helvetica, sans-serif;
	color: #D1D1D1;
	clear:both;
	background-image:url(../images/charte/footer.jpg);
	background-repeat:repeat-x;
}


#footer a {
	font:Arial, Helvetica, sans-serif;
	text-decoration:none;
	color: #D1D1D1;
}
#footer a:hover {
text-decoration:underline;
color: #D1D1D1;

}
#footer a.sousrubz{
	color: #D1D1D1;
	font-weight:normal;
}