/************************************************************************/
/*                  	styles appliqués aux				*/
/*           	catégories, produits et navigation			*/
/************************************************************************/

 

body{
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 0.8em;	
	line-height: 1em;	
	color: #38415E;
	margin: 0;
	padding: 0;
	background-color: #38415E;
}

a{
	color: #38415E;
	text-decoration: underline;
}

a:link{
	color: #38415E;
	text-decoration: underline;
}

a:visited{
	color: #38415E;
	text-decoration: underline;
}

a:hover{
	color: #336699;
	text-decoration: underline;
}

p {
	font-weight: normal;
    	padding:0;
	margin: 0;
    	font-size: 100%;
}

h1{
	font-family: Arial,Verdana,sans-serif;
	font-size: 100%;
	color: #38415E;
	margin: 0;
	padding: 0;
}

h2{
	font-family: Arial,sans-serif;
	font-size: 114%;
	color: #38415E;
	margin: 0;
	padding: 0;
}

h3{
	font-family: Arial,sans-serif;
	font-size: 100%;
	color: #38415E;
	margin: 0;
	padding-left: 5px;
}

h4{
	font-family: Arial,sans-serif;
	font-size: 100%;
	font-weight: normal;
	color: #38415E;
	margin: 0;
	padding: 0;
}

h5{
	font-family: Verdana,Arial,sans-serif;
	font-size: 100%;
	color: #38415E;
	margin: 0;
	padding: 0;
}

ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul ul{
	margin: 0;
	padding: 0;
}

ul ul ul{
	margin: 0;
	padding: 0;
}

label{
	font-family: Arial,sans-serif;
	font-size: 100%;
	font-weight: bold;
	color: #334d55;
}
input{
	font-family: Arial,sans-serif;
	font-size: 80%;
	font-weight: normal;
	color: #334d55;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/

#conteneur {
	width:100%;
	max-width: 1300px;
	margin:0 auto;
	padding: 0;
	background-color:#FFF;
}

/***********************************************/
#header {
	height: 130px;
	background: #fff url('../images/boutique/images/euro.jpg') no-repeat right bottom;
	text-align: left;
	margin:0;
	padding: 0;
}
#header img{
	margin: 0;
	padding: 0;
}
#header p{
	margin-right: 20px;
	padding: 0;
	text-align: right;
	font-weight: bold;
}


/***********************************************/

#footer {
	float:left;
	height: 23px;
	width: 100%;
	background: #ccc url('../images/boutique/images/bas_page.gif');
	text-align: right;
	margin:0;
	padding: 0;
}
#footer img{
	margin-top: 80px;
}
/***********************************************/

#gauche {
	float:left;
	width: 166px;
	height: 1000px;
	background: #F9BA2D;    
}
#sommaire {
	float:left;
	width: 166px;
	height: 20px;
	background: #F9BA2D;    
}
#recherche {
	float:left;
	width: 166px;
	height: 68px;
	background: #fff url('../images/boutique/images/rechercher.gif') no-repeat left top;    
}
#recherche ul {
    	margin:0;
	padding:0;
	list-style:none;
}
#recherche li {
    	float:left;    
    	font-size: 90%;
	font-weight: bold;
    	margin:0;
    	padding: 12px 0px 0px 10px;
}
#recherche form{
    	margin: 0;
    	padding: 0px 0px 0px 3px;
}
#recherche input{
	width: 132px;
	border: 0px solid #fff;
    	padding: 0;
    	font-size: 90%;
}


#famille {
	float:left;
	height: 26px;
	width: 166px;
    	padding: 0;
	margin: 0;
	background: #F9BA2D url('../images/boutique/images/famille.gif') no-repeat left top;
}
#famille ul {
	margin: 0;
	padding:0;
	list-style:none; 
}
#famille li {
    	float:left;    
    	margin:0;
    	padding: 10px 0 0 10px;
	font-size: 90%;
	font-weight: bold;
}
#fondmenugauche {
	float:left;
	width: 164px;
	margin: 0;
	padding: 0;
}
#menugauche {
	float:left;
	list-style-type: none;
    	font-size: 89%;
	width: 147px;
	margin: 0;
	padding: 10px 0 30px 2px;
	background: #fff url('../images/boutique/images/rayure.gif') repeat-x bottom;
}

#menugauche li {
	position: relative;
	margin: 0;
	padding:0;
}

#menugauche ul {
	position: relative;
	margin: 0px 0px 2px 10px;
	padding:0;
}

#menugauche a {
	text-decoration: none;
}

#menugauche a:hover {
	text-decoration: underline;
	color: #666;
}

#menugauche a.current {
	font-weight: none;
	color: #666;
}


/***********************************************/
#droite {
	float:right;
	width: 180px;
	height: 1000px;	
	padding:0;
	margin: 0;	
	background: #F9BA2D;
}

#infolegal{
	float:right;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0;
	background: #38415E url('../images/boutique/images/fond-infolegal.gif') no-repeat left top;
}

#infolegal p	{
	margin: 15px 0 0 5px;
}
#panier{
	float:right;
	width: 180px;
	height: 77px;
	margin-top: 10px;
	padding:0;
	background: url('../images/boutique/images/panier.gif') no-repeat left top;
}
#panier .titre{
	margin: 14px 0 0 98px;
	padding: 0;
	font-size: 90%;
	font-weight: bold;
}
#panier .texte{
	font-size: 100%;
	font-weight: bold;
	padding: 0px 0px 0px 105px;
	margin-top: 20px;
}
#processus_droite{
	float:right;
	width: 180px;
	height: 50px;
	padding:0;
	margin: 0;
	display: none;
	background-color:#ccc;
}
#identification{
	float: right;
	width: 180px;
	height: 132px;
	padding: 0;
	margin-top: 20px;
	background:  url('../images/boutique/images/identification.gif') no-repeat left top;    
}
#identification .titre{
	margin: 14px 0 0 87px;
	padding: 0;
}
#identification .titre p{
	font-size: 90%;
	font-weight: bold;
}
#identification form{
	margin-top: 10px;
	margin-left: 35px;
	line-height: 17px;
}
#identification p{	
    	font-size: 85%;
}
#identification input{
    	font-size: 90%;
    	width: 130px;
	padding: 0px;
	margin: 0px;
}
#identification input#valideridentification{
 	margin-left: 80px;
}
#compte{
	float:right;
	width: 166px;
	text-align: left;
	padding-right: 0px;
	margin-top: 20px;
    	background: #fff url('../images/boutique/images/onglet_droite.gif') no-repeat right top;
}
#compte .titre{
	margin: 14px 0 0 80px;
	padding: 0;
}
#compte .titre p{
	font-size: 90%;
	font-weight: bold;
}
#compte ul{
	position: relative;
	margin-top:  4px;
	padding-top: 10px;
 	padding-bottom: 10px;
}

#compte li{
 	position: relative;
	margin: 5px 0px 5px 10px;
	padding-left : 10px;	
   	font-size: 90%;
    	background: url('../images/boutique/images/puce.gif') no-repeat left top;
}
#conditionvente{
	float:right;
	width: 166px;
	height: 200px;
	padding:0;
	margin-top: 20px;
	background: #fff url('../images/boutique/images/onglet_droite.gif') no-repeat left top;    
}
#conditionvente .titre{
	margin: 14px 0 0 90px;
	padding: 0;
}
#conditionliste{
	float:right;
	width: 166px;
	height: 210px;
	background: #fff url('../images/boutique/images/rayure.gif') repeat-x bottom;    
}
#conditionvente .titre p{
	font-size: 90%;
	font-weight: bold;
}
#conditionvente img{
	padding: 0;
	margin: 10px;
}



/***********************************************/
#centre {
	background-color:#fff;
	margin-left: 166px;
	margin-right: 180px;
}


/***********************************************/
#haut {
	float: left;
	width: 100%;
	height: 62px;
	font-size: 93%;
	line-height: normal;
	margin-top: -27px;
	padding: 0;
	background: #fff url('../images/boutique/images/ligne_bleu.gif') repeat-x bottom;    
}
    
#haut ul {
	margin-top: 0px;
	padding:0;
	list-style:none;
}
    
#haut li {
	float:left;    
	margin: 0;
	padding:0;
	background: #ccc url('../images/boutique/images/menu-haut-droite.jpg') no-repeat right top;    
}
    
#haut a {
    	display: block;
    	background: url('../images/boutique/images/menu-haut-gauche.jpg') no-repeat left top;
    	padding: 12px 10px 0px 12px;
	font-weight: bold;
	text-decoration: none;
}
#haut #current {
	background-image:url('../images/boutique/images/menu-haut-droite-on.jpg');
}
#haut #current a {
	background-image:url('../images/boutique/images/menu-haut-gauche-on.jpg');
}

#navigation {
	float:left;
	height:40px;
	background-color:#fff;
}

#txtnavigation{
	font-weight: bold;
	padding: 5px 0px 10px 10px;
	font-size: 80%;
}

#contenu {
	float:left;
	background-color:#fff;
	width: 100%;
	text-align: center;
}

#accueil {
	float:left;
	width: 100%;
	margin: 0;
	padding-top: 50px;
	background: #fff url('../images/boutique/images/accueil_promo.jpg') no-repeat left top;    
}

/************** processus d'achat ***************/
#processus_centre{
	float:left;
	width: 100%;
	height: 30px;
	padding: 0;
	margin-bottom: 10px;
	text-align: center;
}

/************** promo styles ***************/
.categoriepromo{
	float: left;
	width: 130px;
  	height: 200px;
 	padding: 0;	
	margin:  2% 4%;
	background-color: #fff;
}
.prixproduit	{
	width: 134px;
	height: 30px;
  	margin: 0;
  	padding: 0;
	line-height: 30px;
	background-color: #F5F4F9;
}
.prixvente	{
	float: left;
	font-size: 88%;
	text-decoration: line-through;
	margin-top: 0px;
	margin-left: 10px;
  	padding: 0;
  	background-color: #F5F4F9;
}
.prixpromo	{
	float: right;
	font-size: 100%;
	font-weight: bold;
	color: red;
	margin-top: 0px;
	margin-right: 10px;
  	padding: 0;
  	background-color: #F5F4F9;
}
.legendepromo{
	width: 134px;	
  	height: 80px;
	margin-top: 2px;
  	padding: 0;
	text-align: center;
	background-color: #fff;
}
.legendepromo a	{
	font-size: 88%;
 	padding: 0; 	
 	margin: 0; 
}

/************** categories styles ***************/
.categorie{
	float: left;
	width: 130px;
  	height: 170px;
 	padding: 0;	
	margin:  1% 3%;
	background-color: #fff;
}
.photocategorie{
	width: 130px;
  	height: 134px;
	line-height: 130px;
 	padding: 0; 	
 	margin: 0; 
	border: 2px solid #38415E;
}
.photocategorie:hover {
	width: 130px;
  	height: 134px;
	line-height: 130px;
 	padding: 0; 	
 	margin: 0; 
	border: 2px solid #F9BA2D;
}
.legende{
	width: 134px;	
  	height: 40px;
	margin: 0;
  	padding: 0;
	text-align: center;
	background-color: #fff;
}
.legende a	{
	font-size: 88%;
 	padding: 0; 	
 	margin: 0; 
}

/************** liste produits styles ***************/

.listeproduit	{
	float: left;
	width: 100%;
  	height: 51px;
 	padding: 0; 	
 	margin: 0;
 	border-top : 1px solid #F5F4F9;
 	font-size:93%;
}

.photolisteproduit	{
	float: left;
	width: 50px;
  	height: 50px;
   	line-height: 50px;
	padding: 0; 	
 	margin: 0;
 	background-color: #fff;
}

.photolisteproduit a img{
	border: 1px solid #F5F4F9;
 	vertical-align: middle;
}

.photolisteproduit a:hover img{
	border: 1px solid #aaa;
}
.referencelisteproduit	{
	float: left;
	font-size: 85%;
	width: 100px;  	
 	padding: 0; 	
 	margin-top: 15px;
}
.referencelisteproduit	p	{
  	height: 20px;
}

.libellelisteproduit	{
	float: left;
	width: 200px;  	
 	padding: 0; 	
 	margin-top: 15px;
}
.prixlisteproduit	{
	float: left;
	font-size: 105%;
	width: 130px;
 	padding: 0; 	
 	margin-top: 15px;
 	text-align: right;
}
.prixlisteproduitancien	{
	font-size: 88%;
	color: #38415E; 
	text-decoration: line-through;
}

.prixlisteproduitpromo	{
	float: left;
 	padding: 0; 	
 	margin: 0; 	
  	color: #F98080;
 	text-align: right;
}
.etatlisteproduit	{
	float: left;
	width: 60px;
 	padding: 0; 	
 	margin-top: 15px;
}
.etatlisteproduit  p.stock	{
	font-size: 1em;
	font-weight: bold;
}
.etatlisteproduit p.nonstock	{
	font-size: 0.8em;
}
.plusdinfolisteproduit	{
	float: left;
	width: 52px; 	
	height: 40px;
 	margin-top: 8px;
 	padding: 0;
 	
}
.plusdinfolisteproduit p	{
	width: 52px; 	
	height: 32px;
 	margin: 0;
 	padding-top: 8px;
	background: url('../images/boutique/images/infos.png') no-repeat left top;
} 
.logolisteproduit	{
	float: left;
	width: 50px; 	
 	margin-left: 10px;
 	padding: 0;
}