/*index */
.boutiq_cat {float:left;width:182px;margin:5px;padding:5px;border:1px dotted #999;text-align:center;height:350px;font-weight:bold;background:#eee}
	.boutiq_cat img {height:89px}
	.boutiq_cat em {color:#999;display:block}
	.boutiq_cat h2 {font-size:12px;padding:0;margin:0}
	.boutiq_cat span {text-align:left}
.boutiq_sscat {margin-top:1em;border-top:1px solid #999;padding-top:1em;font-size:10px;text-align:left;background:#fff;padding:2px}
	.boutiq_sscat h3 {font-size:11px;padding:0;margin:10px 0 0 0;display:inline}
	.boutiq_sscat img {float:left;height:auto;width:30px;padding-right:2px;margin-bottom:5px}
	.boutiq_sscat hr {clear:left;color:#eee}




/*cat*/
#Dos_catphp_sscat {width:98%}
#Dos_catphp_sscat h3 {display:block}
#Dos_catphp_sscat div {float:left;width:210px;text-align:center;font-weight:bold;border:1px dotted #999;margin:10px 5px 10px 5px;padding:10px 0 10px 0}
.hrshop {float:left;width:98%}


DIV.boutiq {float:left;width:98%;margin-bottom:50px;padding-top:20px}
 DIV.boutiq img.imgprod {float:left;margin-right:5px;margin-top:-20px}
 DIV.boutiq h2 {color:#F60; display:inline}
 DIV.boutiq p {margin-left:55px}
 DIV.boutiq div.boutiq_prix {margin-left:55px; font-weight:bold; text-align:right; color:#F60;border-bottom: #999 1px dotted;padding:20px 0 10px 0; margin-bottom:20px}
 DIV.boutiq div.boutiq_prix img {margin-right:5px}

/*cat1*/
DIV.boutiq_2 {width:120px;background:#eee;float:left;margin:1em;padding:5px;text-align:center}
DIV.boutiq_2  img.imgprod {float:none;margin:0}
 DIV.boutiq_2 h2 {color:#F60; margin:0 0 5px 0;padding:0;font-size:1em}
 DIV.boutiq_2 DIV.boutiq_prix {font-weight:bold; text-align:center; color:#F60;padding:20px 5px 10px 0; margin-bottom:5px;font-size:1.15em}


/*detail*/
DIV.boutiq2 {width:98%;}
 DIV.boutiq_tit {margin-left:20px}
 DIV.image_produit {float:left;margin-right:5px;background:#eee;width:100px}
 .image_loupe {float:right;margin-right:5px}
 DIV.boutiq_tit h2 {color:#F60}
 DIV.boutiq_text {margin-left:55px}

 DIV.boutiq_edito {margin-left:55px}

 DIV.boutiq_prix2 {margin-left:55px; font-weight:bold; text-align:right; color:#F60;border-bottom: #999 1px dotted;padding:5px 0 10px 0; margin-bottom:20px}
 DIV.boutiq_prix2 img {margin-right:5px}

DIV.boutiq_com {width:98%}
DIV.boutiq_com h1 {display:inline}
 DIV.boutiq_com2 {margin:2em 0 0.5em 55px; border-top:1px #666 solid; padding:1em 0 1em 0}
 DIV.boutiq_com2 h2 {margin:0 0 0.5em 0; padding:0;}
 DIV.boutiq_com2 img {}
 DIV.boutiq_com2 span {font-weight:bold; display:block; padding-top:1em}

/*commentaire*/
  DIV.commentaire {margin-top:1em; border-top:2px dotted #FF6600; text-align:center; padding:0.5em 0 0.2em 0; font-weight:bold}
	DIV.commentaire A {color:#FF6600}
  DIV.commentaire_login {text-align:left;font-weight:bold;border-bottom:1px solid #FF6600}

  DIV.commentaire_texte {text-align:left;padding:1em;margin-bottom:2em;background:#eee}


/*panier.php*/
#comtab {float:left;width:95%;border:1px #666 solid}
#comtab th {background-color:#EEE}
#comconf {width:98%;text-align:right; font-weight:bold}
#comtab td {border-bottom:1px #999 solid}
#comtab td span {border-top:1px #999 dotted;color:#999;font-size:9px}


/*inscription.php*/

#nouvclient {width:45%;float:left;padding:0.5em}

#oldclient {width:45%;float:right;margin-left:1em;padding:0.5em;background:#eee;border-left:2px solid #ff6600;padding-left:3em}
#oldclient input {background:#fff}

#nouvclient legend, #oldclient legend {font-weight:bold;color:#000;font-size:1.1em;padding:0.2em;background:#fff}
#nouvclient fieldset, #oldclient fieldset {margin-bottom:1em}
#nouvclient input, #oldclient input {margin-bottom:0.3em;margin-top:0.3em}

#oldclient input.fondok, #nouvclient input.fondok {background:#FFCC33;font-weight:bold}

#viewcom {display:none}


/*choixpaiement*/
#infoclient, #infopanier, #moyenpaie {float:left;border-top:1px #000 dotted;padding:10px;margin:5px;width:95%}
#infoclient1 {float:left;padding:10px;margin:5px;width:45%}
#infoclient2 {float:left;padding:10px;margin:5px;width:45%}
#infoclient2 h2, #infoclient1 h2, #infoclient h2 {margin:0;padding:0}
#infoclient2 span, #infoclient1 span, #infoclient span {font-weight:bold}
#moyenpaie {margin:10px 0 10px 0}
#moyenpaie h3 {margin:0 0 10px 0;padding:0;color:#FF6600}
#moyenpaie div {width:230px;margin-bottom:1em;padding:0;border:1px solid #666;text-align:center}
#moyenpaie span {color:yellow;font-weight:bold;display:block;padding:2px;background:#666;}
#imprimfact {text-align:right;width:95%}

#moyenpaie legend {color:#FF6600;font-weight:bold;font-size:1.2em}
#moyenpaie fieldset {padding:20px}

.btmodif {background:#FFCC33;font-weight:bold;border:1px solid #000;color:#000;padding:1px}

/*les paiements*/
#validationpaie fieldset {border:0}

/*systeme de vote*/
.catnotation {float:left;width:98%;height:20px;margin:2px 0 0 2px}
.catnotation p.static {display:none}

/**** systeme de notation ****/
.ratingblock {
	display:block;
	padding-bottom:8px;
	margin-bottom:8px;
	}

.ratingblock p {margin:0;padding:0}

.loading {
	height: 15px;
	background: url('img/working.gif') 50% 50% no-repeat;
	}
	
.unit-rating { /* the UL */
	list-style:none;
	margin: 0px;
	padding:0px;
	height: 15px;
	position: relative;
	background: url('img/starrating.gif') top left repeat-x;		
	}

.unit-rating li{
    text-indent: -90000px;
	padding:0px;
	margin:0px;
	/*\*/
	float: left;
	/* */
	}
	
.unit-rating li a {
	outline: none;
	display:block;
	width:15px;
	height: 15px;
	text-decoration: none;
	text-indent: -9000px;
	z-index: 15;
	position: absolute;
	padding: 0px;
	}
	
.unit-rating li a:hover{
	background: url('img/starrating.gif') left center;
	z-index: 2;
	left: 0px;
	}

.unit-rating a.r1-unit{left: 0px;}
.unit-rating a.r1-unit:hover{width:15px;}
.unit-rating a.r2-unit{left:15px;}
.unit-rating a.r2-unit:hover{width: 30px;}
.unit-rating a.r3-unit{left: 30px;}
.unit-rating a.r3-unit:hover{width: 45px;}
.unit-rating a.r4-unit{left: 45px;}	
.unit-rating a.r4-unit:hover{width: 60px;}
.unit-rating a.r5-unit{left: 60px;}
.unit-rating a.r5-unit:hover{width: 75px;}
.unit-rating a.r6-unit{left: 75px;}
.unit-rating a.r6-unit:hover{width: 90px;}
.unit-rating a.r7-unit{left: 90px;}
.unit-rating a.r7-unit:hover{width: 105px;}
.unit-rating a.r8-unit{left: 105px;}
.unit-rating a.r8-unit:hover{width: 120px;}
.unit-rating a.r9-unit{left: 120px;}
.unit-rating a.r9-unit:hover{width: 135px;}
.unit-rating a.r10-unit{left: 135px;}
.unit-rating a.r10-unit:hover{width: 150px;}

.unit-rating li.current-rating {
	background: url('img/starrating.gif') left bottom;
	position: absolute;
	height: 15px;
	display: block;
	text-indent: -9000px;
	z-index: 1;
	}

.voted {color:#999;}
.thanks {color:#36AA3D;}
.static {color:#5D3126;}


/*agrandissement image*/
#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}

/*minipanier 2 */
#minipangen {width:273px;height:40px}
#minipanier2 {float:left;width:50px;height:40px;background:#f93;text-align:center;margin-right:2px}
#minipanier2 a {display:block;width:50px;height:40px;background:#f93;text-align:center;font-weight:bold;color:#000;font-size:8px}
#minipanier2 a:hover {background:#fc6}
#minipanier3 {float:left;width:180px;height:32px;background:#f93;margin-right:2px;font-size:8px;padding:4px}
#minipanier3 span {float:left;font-size:30px;color:#000;margin-right:5px;margin-top:-3px}
#minipanier3 a {display:block;width:80px;background:#fc6;text-align:center;font-weight:bold;color:#000;font-size:8px;border:1px solid #000;margin:3px 0 0 35px}
#minipanier3 a:hover {background:#c60}


/*recommander*/

p#note {
	border-bottom: 1px dotted black;
	padding: 1em;background:#F7F7F7;margin:0 1em 1em 1em;
}
p#note img{
float:left;padding: 1em;
}
#inscription { 
   border: none; 
   margin: auto;  
   padding: 0; 
   width: 600px;   /*** Largeur du formulaire ***/ 
} 
 fieldset#coordonnees label {   /*** Mise en forme des intitules de champs ***/  
   float: left;   /*** Tres important, ne pas suprimer ! ***/ 
   width: 30%;   /*** Les intitules prennent 1/3 de la largeur totale du formulaire... ***/ 
   text-align: right;   /*** ... et ils sont alignes a droite... ***/  
   margin: 0; 
   padding: 0 .5em 0 0; 
   height: 2em; 
   line-height: 1.8;   /*** ... et centres verticalement. ***/  
} 
 fieldset#secu img {   /*** Image captcha ***/  
   margin-left: 31%;   /*** Les intitules prennent 1/3 de la largeur totale du formulaire... ***/ 
} 
label.oblig { 
   font-weight: bold;   /*** Mise en  evidence des champs obligatoires ***/  
} 
label, #piedform input { 
   cursor: pointer ;   /*** Petite astuce pour   apprendre aux utilisateurs a cliquer sur les intitules ***/  
} 
.legende {   /*** Mise en forme des aides contextuelles ***/  
   font-style: italic; 
   color: #666; 
   background: transparent;  
   margin: 0; 
   padding: 0; 
} 
  legend strong{ /*** Mise en forme des titres des  cadres ***/  
   background: transparent; 
   color:#6DAC0A 
} 
#piedform {background: #4A1B4B; 
   text-align: right; /*** Les boutons sont alignes a droite ***/  
   margin: 0; 
   padding: .5em; 
} 
#piedform input { 
   font-weight: bold; /*** Pour ameliorer la lisibilite des boutons ***/ 
   margin-right: 1em; 
} 
 .alerte {   /*** Mis en evidence des champs mal renseignes ***/  
   border: 1px solid red; 
}