@charset "UTF-8";
/* CSS Document */

/*****************************************/
/* Généralités */
/*****************************************/
body {
	background:#FFFFFF;
	padding:0;
	margin:0;
	font-family:"Trebuchet MS", sans-serif;
	font-size:0.8em;
	color:#666666;
}
#page {
	background:#FFFFFF;
	padding:0;
	margin:0 auto;
	width:957px;
}
h1#logo {
	margin:0;
	padding:0;
	position:relative;
	top:20px;
}
hr.separation {
	visibility:hidden;
	clear:both;
	border:1px solid white;
	padding:0;
	margin:0;
	font-size:1px;
}
object, embed {
	margin:0;
	padding:0;
	border:0;
}
#contenu a {
	text-decoration:none;
	color:#222;
}
#contenu a:hover {
	text-decoration:none;
}
a.more, #home a.more {
	display:block;
	background:url(../images/structures/more-colours.png) no-repeat top left transparent;
	width:130px;
	height:28px;
	text-decoration:none;
	color:#999;
	line-height:28px;
	text-align:right;
	padding-right:20px
}
a:hover.more, #home a:hover.more {
	background:url(../images/structures/more-colours-over.png) no-repeat top left transparent;
	text-decoration:none;
	color:#FFFFFF;
}
#RSS a {text-decoration:underline;}
#RSS ul { padding:0; margin:0 0 0 10px}
#RSS li { padding:0 5px; list-style-type:square; margin:5px;}
#RSS a:hover { color:#FF6600; }


.warning { color:#CC0000;}
p.warning { border:1px solid #c00; margin:2em 1em; padding:0.5em; text-align:center;}
table.formulaire { background:#EEE; border-collapse:collapse; border:1px solid white;}
table.formulaire td {  border-collapse:collapse; border:1px solid white;}
.illustration-mosaic {float:left; margin-right:30px;}
/*****************************************/
/* Layout */
/*****************************************/
#contenu {
	position:relative;
	padding:0;
	margin:10px 0 0 0;
}
#contenu div {
	padding:0;
	margin:0;
}
#contenu div.principal {
	float:left;
	width:585px;
	padding:0 10px 10px 10px;
	border:1px solid #B3B3B3;
	margin:0 0 30px 20px;

}
#contenu div.secondaire {
	float:left;
	width:270px;
	margin:0 0 30px 20px;
	padding:0 10px 10px 10px;
	border:1px solid #B3B3B3;

}
#contenu div.equal {
	float:left;
	width:425px;
	padding:0 10px 10px 10px;
	border:1px solid #B3B3B3;
	margin:0 0 30px 20px;

}
div#collection {
	float:left;
	margin:0 0 30px 0;
	width:734px;
}
/* OverFlow hidden
Remarquez comme on a donné aux deux flottants de petites marges ? Elles serviront à créer un retrait entre les flottants et le bloc central. Attention : il est préférable de ne pas attribuer de marges latérales à div#centre, car les résultats dans les différents navigateurs peuvent être très divers.

Autre point notable : on a choisi ici la valeur hidden plutôt que la valeur auto pour la propriété overflow. En effet, dans certains cas un overflow: auto peut poser quelques problèmes de rendu (en particulier : apparition inopportune de barres de défilement dans certains contextes). Par contre, un overflow: hidden n'est pas non plus sans conséquences ! Les objets qui dépasseront les limites du bloc central seront tout simplement tronqués, ou invisibles. Cela demandera donc un minimum de prudence (mais rien de catastrophique, rassurez-vous !).


/*****************************************/
/* Titrage */
/*****************************************/
#contenu h2 {
	font-size:12px;
	height:20px;
	line-height:21px;
	text-transform:uppercase;
	letter-spacing: 0.1em;
	text-indent:5px;
	font-weight:normal;
}
#contenu h3 {
	font-size:12px;
	font-weight:normal;
	font-family:"Trebuchet MS", sans-serif;
	color:#B3B3B3;
	background:url(/images/structures/titrage-niveau3.png) no-repeat bottom left white;
	padding-bottom:15px;
	text-transform:uppercase;
}
.integre h3 {
	height:235px;
	background-color:#E6E6E6;
	padding:20px;
	margin:1px 0;
}
#collection h2 {
	color:white;
	margin:0px 0px 1px 0;
	padding:0;
}
.important {
	color:#00A9C9;
	font-weight:normal;
}

h2.titrage-hot {
	background:url(../images/structures/titrage-hot.png) repeat-y 0 0 white;
	color:white;
	margin:1px -9px 20px  -9px;
	padding:0;
}
h2.titrage-fun {
	background:url(../images/structures/titrage-fun.png) repeat-y 0 0 white;
	color:white;
	margin:1px -9px 20px  -9px;
	padding:0;
}
h2.titrage-officiel {
	background:url(../images/structures/titrage-officiel.png) repeat-y 0 0 white;
	color:white;
	margin:1px -9px 20px  -9px;
	padding:0;
}
h2.titrage-fresh {
	background:url(../images/structures/titrage-fresh.png) repeat-y 0 0 white;
	color:white;
	margin:1px -9px 20px  -9px;
	padding:0;
}
h2.titrage-dynamique {
	background:url(../images/structures/titrage-dynamique.png) repeat-y 0 0 white;
	color:white;
	margin:1px -9px 20px  -9px;
	padding:0;
}

.gamme-quiva h2 {
	background:url(../images/structures/titrage-quiva.png) repeat-y 0 0 white;
}
.gamme-saniway h2 {
	background:url(../images/structures/titrage-saniway.png) repeat-y 0 0 white;
}
.gamme-o-basics h2 {
	background:url(../images/structures/titrage-basics.png) repeat-y 0 0 white;
}
.gamme-o-ultralite h2 {
	background:url(../images/structures/titrage-ultralite.png) repeat-y 0 0 white;
}
.gamme-o-finest h2 {
	background:url(../images/structures/titrage-finest.png) repeat-y 0 0 white;
}
.gamme-o-safety h2 {
	background:url(../images/structures/titrage-safety.png) repeat-y 0 0 white;
}
/*****************************************/
/* Pied */
/*****************************************/
div#pied {
	font-size:0.9em;
	padding:0 1em;
	clear:both;
}
div#pied a {
	color:#0099CC;
	text-decoration:none;
}
div#pied a:hover {
	color:#0066CC;
	text-decoration:none;
}
div#contact {
	border-bottom:1px solid #CCC;
	border-top:1px solid #CCC;
	padding:1em 0;
	margin:0;
}
div#pied form {
	text-align:center;
}
.right {
	float:right;
}