/*********************************************** STYLES DU CONTENU ***********************************************/

BODY, TH, TD, P, INPUT, TEXTAREA, SELECT, BUTTON
		{
		font-family: Arial, Helvetica, Tahoma, Sans-serif;
		font-size: 8pt;
		color: #414753;
		}
@media handheld, projection, screen, tv
		{
		BODY
			{
			/*filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#cae0fe,endColorStr=#4772cc);*/
			background: -moz-linear-gradient(top, #cae0fe 0%, #4772cc 100%) !important;
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#cae0fe), color-stop(1,#4772cc)) !important;
			background: #cae0fe;
			}
		}
TABLE
		{
		border-collapse: collapse;
		padding: 0;
		margin-top: 0;
		margin-bottom: 0.5em;
		table-layout: fixed;
		}
TH, TD
		{
		margin: 0;
		}
TABLE.Fond
		{
		text-align: center;
		width: 100%;
		background: #fff;
		margin-bottom: 0;
		}
TABLE.Colonne, TD.Colonne
		{
		width: 170px;
		text-align: center;
		vertical-align: top;
		padding-left: 0;
		padding-right: 0;
		}
TABLE.TabCadre
		{
		width: 99%;
		text-align: left;
		}
TD.Centre
		{
		text-align: center;
		vertical-align: top;
		}
TABLE.Contenu
		{
		width: 97%;
		text-align: left;
		margin-left: 7px;
		margin-right: 7px;
		}
IMG
		{	
		border: 0;
		}
.Gras, .Promo
		{
		font-weight: bold;
		}
TH, H1, H2, H3, H4, .Gras, EM
		{	
		color: #007bc2;
		}
H1, H2, H3, H4, .Ariane
		{
		font-family: Verdana, Tahoma, Arial;
		}
H1
		{
		font-size: 200%;
		border-bottom: 1px solid #007bc2;
		}
H2
		{
		font-size: 140%;
		margin-top: 1em;
		margin-bottom: 1em;
		}
H3
		{
		font-size: 120%;
		margin-top: 0;
		margin-bottom: 1em;
		}
H4
		{
		font-size: 100%;
		margin-bottom: 0.5em;
		}
P, BLOCKQUOTE, OL, UL
		{
		margin-top: 0;
		margin-bottom: 0.5em;
		}
UL, LI
		{
		list-style: url("/habillage/pix/puce.gif");
		}
SMALL
		{
		font-size: 80%;
		}
BIG, .Produit
		{
		font-size: 120%;
		}
HR
		{
		height: 1px;
		color: #007bc2;
		background-color: #007bc2;
		padding: 0;
		border: 0;
		}
HR.Listing
		{
		color: #c0c0c0;
		background-color: #c0c0c0;
		}
FORM
		{
		padding: 0;
		margin: 0;
		}
INPUT[type="submit"]
		{
		text-align: center;
		}
textarea
		{
		max-width: 400px;
		}
BLOCKQUOTE
		{
		text-indent: -6ex;
		}
.Ariane
		{
		font-size: 80%;
		margin-bottom: 1.2em;
		}
.Barre
		{
		color: gray;
		text-decoration: line-through;
		}
.Bordure
		{
		border: 1px solid #007bc2;
		padding: 0 4px 0 4px;
		vertical-align: middle;
		}
.DemiBr
		{
		line-height: 0.6em;
		}
.Footer
		{
		color: #f5f5f5;
		background: #cae0fe url("/habillage/pix/bg_footer.png") repeat-x;
		}
.NoBr
		{
		white-space: nowrap;
		}
.Pied
		{
		color: #696969;
		}
.Prix
		{
		background: #f9b200;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		}
.Promo
		{	
		color: red;
		font-size: 120%;
		}
.PromoJ
		{
		position: absolute;
		width: 220px;
		visibility: hidden;
		z-index: -1;
		}
.Titre
		{
		border-bottom: 1px solid #007bc2;
		}
@media print
	{
	.Pied, .NoPrint, .Footer
		{
		display: none;
		}
	}

/*********************************************** STYLES DES LIENS ***********************************************/

a:link, a:visited
		{
		color: #414753;
		}
a.Menu:link, a.Menu:visited
		{
		text-decoration: none;
		}
a.Uni:link, a.Uni:visited, a:hover, a.Menu:hover
		{
		color: #007bc2;
		text-decoration: none;
		}
a:active, a.Menu:active
		{
		color: #004e86;
		text-decoration: none;
		}
a.Uni:hover
		{
		color: #414753;
		}
a.Glossaire:link, a.Glossaire:visited
		{
		font-family: Verdana, Tahoma, Arial;
		text-decoration: none;
		}
a.Glossaire:hover
		{
		color: #f5f5f5;
		background: #004e86;
		}
.image-hover img
		{
		opacity: 1.0;
		-moz-opacity: 1.0;
		filter: alpha(opacity=100);
		}
.image-hover:hover img
		{
		opacity: 0.7;
		-moz-opacity:0.7;
		filter: alpha(opacity=70);
		}
a.Pied:link, a.Pied:visited, a.Pied:hover, a.Pied:active
		{
		color: #696969;
		text-decoration: none;
		}
a.Pied:hover
		{
		text-decoration: underline;
		}

/*********************************************** STYLES DU MENU DEROULANT ***********************************************/

@media print
	{
		/*A l'impression on cache le menu, marche au moins pour IE, Moz et Opéra.*/
	.MenuD, .ssMenuD
		{
		visibility:hidden;
		}
	}
.MenuD, .ssMenuD
	{
	font-family: Verdana, Tahoma, Arial;
	font-weight:bold;
		/* width et margin sont au cas où le javascript est désactivé. */
	width:15em;
	margin:1em;
	}
.MenuD
	{
	color: #f5f5f5;
	border: 0;
	padding: 2px;
	text-align: center;
	}
.ssMenuD
	{
	color: #414753;
	border: 1px solid #f9b200;
	padding: 2px;
	background: #f9b200;
	opacity: 0.96;
	-moz-opacity:0.96;
	filter: alpha(opacity=96);
	filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#f9b200,endColorStr=#f78316) progid:DXImageTransform.Microsoft.Alpha(opacity=96);
	background: #f9b200 -moz-linear-gradient(top, #f9b200 0%, #f78316 100%);
	background: #f9b200 -webkit-gradient(linear, left top, left bottom, color-stop(0,#f9b200), color-stop(1,#f78316));
	}
.MenuD span, .ssMenuD span
	{
		/* Ne pas toucher
		C'est pour cacher les ; en fin de <li>, ce qui permet aux synthèse vocales de prendre une
		pause dans l'élocution */
	display:none;
	}
.ssMenuD ul, .ssMenuD li
	{
		/* Ne pas trop toucher.
		Les items (les <li>) des sous-menus, notamment pour enlever les puces des listes */
	padding: 1px;
	margin: 0;
	list-style: none;
	list-style-type: none;
	}
.MenuD a, .MenuD a:visited
	{
	color: #f5f5f5;
	}
.ssMenuD a, .ssMenuD a:visited
	{
	color: #414753;
	}
.MenuD a, .ssMenuD a, .MenuD a:visited, .ssMenuD a:visited
	{
		/* Les liens qui ne sont pas sous le curseur. */
	text-decoration: none;
	padding: 2px 1px;
		/* Ne pas modifier le block */
	display: block;
		/*	Un width:100% fait planter Mozilla, sans le width:100% c'est IE et Opera... La combinaison
		aucun width et height:100% marche sur tous, donc ne pas toucher ces 2 lignes */
		/*	height:100%;
			margin:0px;*/
	margin: 0;
	width: 100%;
	}
html>body .MenuD a, html>body .MenuD a:visited, html>body .MenuD a:hover, html>body .MenuD a:active,
html>body .ssMenuD a, html>body .ssMenuD a:visited, html>body .ssMenuD a:hover, html>body .ssMenuD a:active
	{
	width:auto;
	}
.ssMenuD ul:hover, .ssMenuD a:hover, .ssMenuD a:focus, .MenuD a:hover, .MenuD a:focus
	{
		/* Les liens sous le curseur.
		On change les couleurs du texte et de fond, et on enlève le soulignement.	*/
	background: #007bc2;
	color: #f5f5f5;
	text-decoration: none;
	}
img
	{
		/* Si on met une image dans un lien (par exemple un logo à gauche du lien), pas de bordure
		car c'est vilain :-p */
	border: none;
	}
.ssMenuD img
	{
		/* un petit espacement entre l'image et le texte du lien <a href="..."><img.../>blabla</a> */
	margin-right: 2px;
	}
.ssMenuD img.hr
	{
		/* Encore un peu expérimental, un <hr /> entre deux items pour faire un "séparateur"... */
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	display: block;
	}

/* Bref... pour résumer, ce qu'il y a à modifier à la base, c'est :
- couleurs, police, bordure.
- l'effet spécial IE pour les ssMenuD si on aime ça...
- police et couleurs des liens "non survolés" et "survolés". */

/*********************************************** STYLES DES COLONNES *******************************************/

.TabHaut, .TabHautPromo
	{
	font-family: Verdana, Tahoma, Arial;
	color: #f5f5f5;
	font-weight: bold;
	text-align: center;
	width: 100%;
	height: 30px;
	}
.TabHaut
	{
	background: transparent url(/habillage/pix/block_header.gif) no-repeat bottom center;
	}
.TabHautPromo
	{
	background: transparent url(/habillage/pix/block_header_promo.gif) no-repeat bottom center;
	}
.TabGauche
	{
	text-align: left;
	width: 100%;
	background: transparent url(/habillage/pix/block_bg.gif) repeat-y top center;
	padding: 5px 14px 0 14px;
	}
.TabCentre
	{
	text-align: center;
	width: 100%;
	background: transparent url(/habillage/pix/block_bg.gif) repeat-y top center;
	padding-top: 5px;
	}
.TabPromo
	{
	text-align: center;
	width: 100%;
	background: transparent url(/habillage/pix/block_bg_promo.gif) repeat-y top center;
	padding: 5px 14px 0 14px;
	}
.TabBas
	{
	width: 100%;
	background: transparent url(/habillage/pix/block_bottom.gif) no-repeat top center;
	}
.TabBasPromo
	{
	width: 100%;
	background: transparent url(/habillage/pix/block_bottom_promo.gif) no-repeat top center;
	}

/*********************************************** STYLES DES ONGLETS PRODUITS ********************************************/

.shadetabs{
padding: 3px 0;
margin: 1px 0 0 0;
list-style-type: none;
text-align: left; /*left, center, ou right pour la position des onglets*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
font-weight:bold;
color: #f5f5f5;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #007bc2;
background: url(/habillage/pix/bg_degrade_bleu.gif) repeat-x top left;
		border-radius: 5px 5px 0 0;
		-moz-border-radius: 5px 5px 0 0;
		-webkit-border-radius: 5px 5px 0 0;
}

.shadetabs li a:hover{
font-weight:bold;
color: #f5f5f5;
text-decoration: none;
background: #f78316;
}

.shadetabs li a.selected{ /*selected main tab style */
font-weight:bold;
color: #f5f5f5;
position: relative;
top: 1px;
background: #f78316;
border-bottom-color: #fff;
}

.shadetabs li a.selected:hover{ /*selected main tab style */
font-weight:bold;
color: #f5f5f5;
text-decoration: none;
background: #f78316;
}

.tabscontent{
display:none;
}

@media print {
.tabscontent {
display:block;
}
}