body {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em; 
color:#000000; 
margin:20px 0 0 0;
padding:0 0 0 0;
background:#ffffff;
}

.hidden {
   display: none;
}

.visible {
   display: inline;
}

p {
margin-bottom:8px;
line-height:1.1em;
}

strong {
font-weight:bold;
}
hr { width:100%; border: 1px solid #4D84BD; padding:1px;background:#4D84BD;}
em {font-style:italic;}

a {
font-family:Arial, Helvetica, sans-serif;
font-size:12px; 
color:#C33E2F;
text-decoration:none;
font-weight:bold;
}
a:hover {
color:#000;
text-decoration:none;
font-weight:bold;
}
.lienblanc  {
font-family:Arial, Helvetica, sans-serif;
font-size:12px; 
color:#FFF;
text-decoration:none;
font-weight:bold;
}
.livreblanc {
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#FFF;
	font-weight: bold;
	line-height: 25px;
}
.titrepage {
font-family:Arial, Helvetica, sans-serif;
font-size:18px; 
width:490px;
height:20px;
line-height:20px;
text-align:center;
background-color: #4D84BD;
border-top:1px solid #757575;
border-bottom:1px solid #757575;
color:#FFF; 
margin-bottom: 5px;
margin-top: 10px;
}

H1 {
font-family:Arial, Helvetica, sans-serif;
font-size:18px; 
width:490px;
height:20px;
line-height:20px;
text-align:center;
background-color: #4D84BD;
border-top:1px solid #757575;
border-bottom:1px solid #757575;
color:#FFF; 
margin-bottom: 5px;
margin-top: 10px;
}
.titre {
font-family:Arial, Helvetica, sans-serif;
font-size:1em; 
color:#000000; 
margin:0;
padding:0 ;
}

.titrebleu {
font-family:Arial, Helvetica, sans-serif;
font-size:14pt; 
color:#4D84BD; 
}
.titrenoir {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:14pt; 
color:#000; 
font-weight: bold;
}
.titreblanc {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#FFF;
	font-weight: bold;
}
.ref {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11pt;
	color:#B5613A;
	font-weight: bold;
}
.cartesite {
	font-family:Arial, Helvetica, sans-serif;
	font-size:10pt;
	color:#000;
}
.nom {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#005173;
	text-transform: uppercase;
	text-decoration:none;
	font-weight: bold;
	}
.prix {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#CC0000;
	font-weight: bold;
	}
.promo {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	padding:5px;
	font-weight: bold;
	background-color: #FFCC33;
	border:1px solid #CC0000;
	color:#CC0000; 
	}
.grasmarronbarre {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #B5613A;
	font-weight: bold;
	text-decoration: line-through;
	}
	
.prixpromo {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: bold;
	color:#CC0000;
	}
.petit {
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight: bold;
	color:#005173;
	}
.messageform {
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight: bold;
	color:#C00000;
	}	
.grasjaune {
font-family:Arial, Helvetica, sans-serif;
font-size:1em; 
color:#FFCC33; 
}
.imageD {float:right; margin-left:10px; margin-bottom:5px;border: 1px solid #ffcc99;}
.imageG {float:left; margin-right:10px;margin-bottom:5px; border: 1px solid #ffcc99;}
.grasrouge {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	color: #CC0000;
	font-weight: bold;
	}
.alerte {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #CC0000;
	font-weight: bold;
	}
.message {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height:16px;
	color: #4D84BD;
	font-weight: bold;
	}

.grasbleu{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #4D84BD;
	font-weight: bold;
	}
.grasnoir {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	font-weight: bold;
	}
.grasmarron {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #B5613A;
	font-weight: bold;
	}

.entetepage {
font-family:Arial, Helvetica, sans-serif;
font-size:20px; 
width:700px;
height:30px;
line-height:30px;
text-align:center;
background-color: #3366CC;
border-top:1px solid #757575;
border-bottom:1px solid #757575;
color:#FFF; 
}

.clear { clear: both;}

/* ###########################    DEBUT DU GABARIT ################################# */
#container {
margin:0 auto;
padding:0;
width:930px;
border:2px solid #555;
background:url(images/container.jpg);
background-position:0 0;
background-repeat:repeat-y;
}

/* << ----------------// Header //---------------->> */
#header {
 margin:0;
 padding:0;
 width:930px;
 height:116px;
 background-image:url(images/bandeau.jpg);
 background-position:0 0;
 background-repeat:no-repeat;
}

/* ----------------- Menu horizontal ----------------------- */
#navBar {
float:left;
margin:0;
padding:0;
width:930px;
height:30px;
line-height:30px;
background:url(images/fondhaut.png);
background-position:0 0;
background-repeat:repeat-x;
}

#navBar ul{
list-style-type:none;
margin-left:20px;
}

#navBar li{
margin:0;
padding:0;
list-style-type:none;
display:inline;
background-image:none;
}

#navBar li a{
margin:0 0 0 -5px;
padding:9px 20px 9px 20px;
color:#ffffff;
text-decoration:none;
font-size:1.1em;
border-left:1px solid #757575;
}
#navBar ul li a:hover{
color:#ffffff;
text-decoration:none;
background-color:#AC4B41;
background-image:url(images/fondhaut-hover.png);
background-position:0px 2px;
background-repeat:repeat-x;
}

#navBar li.end {
margin:0;
padding:0;
list-style-type:none;
display:inline;
background-image:none;
}

#navBar li.end a{
margin:0 0 0 -5px;
padding:9px 20px 9px 20px;
color:#ffffff;
text-decoration:none;
font-size:1.1em;
border-left:1px solid #757575;
border-right:1px solid #757575;
}

#navBar li.end a:hover{
color:#ffffff;
text-decoration:none;
background-color:#AC4B41;
}
#bandeauhaut {
	float:left;
	margin:0;
	padding:0px;
	padding: 0;
	padding-left: 10px;
	width:920px;
	height:30px;
	line-height:30px;
	background-image:url(images/bandeau_haut.png);
	background-position:0 0;
	background-repeat:repeat-x;
	vertical-align: middle;
}

/* << ----------------// gauche //---------------->> */
#gauche {
 float:left;
 color: #333;
 background:#FFCC99;
 margin: 0px;
 margin-top:5px;
 padding: 2px;
 width: 188px;
}
#gauche ul li{
 margin: 0px;
 padding: 0;
}
#gauche table tr td{
padding:3px;
}

/* << ----------------// centre //---------------->> */
#centre {
float:left;
margin-left:10px;
margin-right:5px;
padding:10px;
width:490px;
}
#centre table tr td{
padding:3px;
border: 1px;
}

#centre ul li{
	padding:3px;
	margin:0;
	}

/* << ----------------// droite //---------------->> */
#droite {
float:right;
margin:0;
margin-top:5px;
padding:5px;
width:193px;
color: #333;
}



/* << ----------------// Footer //---------------->> */
#footer {
margin:0;
padding:0;
width:930px;
clear: both;
height:68px;
background: #FFF;
background-image:url(images/bas.gif);
background-position:bottom center;
background-repeat:no-repeat;
border-top: 1px solid #FFCC99;
}

#footer p {
margin:0;
padding: 10px;
line-height:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
color:#000;
text-align:center;

}
/* ###########################    FIN DU GABARIT ################################# */
/* << ----------------// Fix so that the outer DIV will wrap around all floated DIVs within //---------------->> */
.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#detail {
float:left;
margin-top:0px;
margin-bottom:5px;
padding:5px;
font-family:Arial, Helvetica, sans-serif;
width:475px;
font-size:1em;
color:#000000;
border: 1px solid #FFCC99;
}
input[type=button], input[type=reset], input[type=submit] {
margin-top:0;
border:1px outset #B5613A;
font-weight:bold;
cursor:pointer;
background-color:#FFCC99;
color:#B5613A;
}

#boite 
{
float:left;
clear:both;
margin-top:5px;
margin-bottom:5px;
padding:5px;
width:470px;
background-color:#FFFFFF;
border:1px dashed #3366CC;
}

#boite table tr td
{

vertical-align:middle;
padding:2px;
border:1px solid #FFCC99;
}


/* pagination n° de page */
#pagination {
margin:5px;
padding:3px;
font-size:1em; 
width:480px;
font-size:1.1em;
text-align: center;
}
#cadre180{
margin:0;
padding:5px;
width:180px;
background-color:#FFF;
border-top:1px solid #3366CC;
border-bottom:1px solid #3366CC;
}
#cadre180 p 
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height:12px;
	color: #0C5F9C;
	font-weight: bold;
}
#pagination a, #pagination a:link, #pagination a:visited, #pagination a:hover, #pagination a:active  
{
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
background-color:#FFCC99;
color: #000;
text-decoration:none;
text-align: center;
}
#pagination a:hover, #pagination a:active
{
background-color:#B5613A;
color: #FFF;
text-align: center;
}
#technique {
	clear:left;
	width:188px;
	padding:0px; 
	border:0;
	padding-top: 5px;
	text-align:center;
	background:#fa4;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	color:#000;
	border-bottom: solid 2px #B5613A;
}
#titredroite {
		width:186px;
		padding:2px; margin:0; border:0;
		padding-top: 5px;
		text-align:center;
		background:#fa4;
		font-family:Arial, Helvetica, sans-serif;
		font-size:1em; 
		font-weight:bold;
		color:#000000;
		border-bottom: solid 2px #B5613A;
}
#panier {
margin:0;
padding:2px;
width:182px;
background-color:#FFF;
height: 105px; 
}

#panier H1{
		padding:2px; margin:0; border:0;
		padding-top: 5px;
		text-align:center;
		background:#fa4;
		font-family:Arial, Helvetica, sans-serif;
		font-size:15px; 
		font-weight:bold;
		color:#000000;
		border-bottom: solid 2px #B5613A;
	}