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

*{ margin: 0; padding: 0; }

body{
	background: black;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 12px;
	margin: 0;
	padding: 0;
	text-align: center;
	color: white;
	}

.clear{
	clear: both;
	}

div.clear{
	display: block;
	height: 0;
	font-size: 1px;
	visibility: hidden;
	}

/********************/
/* Général */
/********************/
h1{ font-size: 24px; }
h2{ font-size: 18px; }
h3{ font-size: 14px; }
h4{ font-size: 14px; }
h5{ font-size: 12px; }
h6{ font-size: 12px; }

a img{
	border: none;
	}

/********************/
/* Conteneurs */
/********************/

#global{
	position: relative;
	width: 990px;
	margin: 5px auto 0 auto;
	padding: 0;
	text-align: left;
	background: white url(../images/css/arrondi_hg.gif) no-repeat left top;
	color: black;
	}
	#page{
		background: transparent url(../images/css/fond_gris_250.gif) repeat-y left top;
		border-top: 1px solid black;
		}
		#wrapper{
			}

/********************/
/* Header */
/********************/

#header{
	position: absolute;
	top: 0;
	right: 0;
	width: 578px;
	height: 111px;
	}
	#header h1{
		position: absolute;
		top: 5px;
		right: 5px;
		width: 100%;
		height: 100%;
		}
		#header h1 a:link,
		#header h1 a:visited{
			display: block;
			width: 100%;
			height: 100%;
			background: white url(../images/css/logo_header.jpg) no-repeat left top;
			text-indent: -9999px;
			overflow: hidden;
			}

/********************/
/* Contenu */
/********************/

#main{
	float: left;
	margin-top: 115px;
	width: 740px;
	height: auto !important;
	height: 288px; /* BUG IE6 */
	min-height: 288px;
	}
	#content{
		margin-left: 30px;
		padding: 5px;
		}

/********************/
/* Contenu */
/********************/

/********************\
 * Rouge : rgb(215, 42, 35*) (enlever l'étoile)
 * Bleu  : rgb(22, 120, 185*)
 * Vert  : rgb(133, 186, 52*)
\********************/

#content h2{
	margin-bottom: 10px;
	color: rgb(215, 42, 35);
	}
	#content h3{
		margin-bottom: 10px;
		color: rgb(22, 120, 185);
		text-align: center;
		}
	#content h4{
		margin: 10px 0 7px;
		color: rgb(22, 120, 185);
		text-align: left;
		}

table td small{
	display: block;
	color: rgb(113, 123, 124);
	font-weight: normal;
	}

/**************************/
/* Affichage des articles */
/**************************/
div.famille{
	clear: none;
	padding: 5px 0;
	width: 480px;
	}
	#content div.famille h3{
		margin-bottom: 5px;
		padding: 2px 15px 2px 10px;
		height: 20px;
		background: black url(../images/css/bg_h3.gif) no-repeat right center;
		color: rgb(133, 185, 51);
		font-size: 14px;
		line-height: 20px;
		text-align: left;
		}
	div.famille p.image{
		float: left;
		margin: 0 5px 0 0;
		width: 100px;
		text-align: center;
		}
		div.famille p.image a img{
			margin-bottom: 2px;
			border: none;
			}
		div.famille p.image .linkDetail{
			color: rgb(113, 123, 124);
			font-size: 11px;
			}
	div.famille table.references{
		width: 350px;
		border-collapse: collapse;
		}
		div.famille tr td{
			vertical-align: middle;
			padding: 5px 5px;
			border-top: 1px dotted rgb(223, 223, 223);
			}
		div.famille tr.first td{
			border-top: none;
			}
		div.famille td.reference{
			font-weight: bold;
			}
			div.famille td.reference small{
				display: block;
				color: rgb(113, 123, 124);
				font-weight: normal;
				}
		div.famille td.prix{
			padding-right: 20px;
			width: 70px;
			text-align: right;
			}
		div.famille td.addBasket{
			width: 90px;
			}
			div.famille .addBasketInput{
				float: left;
				margin: 0;
				padding: 2px;
				width: 50px;
				background: white;
				border: 1px solid rgb(113, 123, 124);
				}
			div.famille span.basketButtons{
				float: left;
				margin-left: 1px;
				width: 23px;
				}
			div.famille span.basketButtons img{
				margin: 0 1px 4px;
				}
		div.famille td.removeFromBasket{
			width: 20px;
			}

/**************************/
/* Affichage des étapes   */
/**************************/

/* Contenu principal */
#etapeMain{
	width: 545px;
	}
	#etapeMain a:link,
	#etapeMain a:visited{
		color: rgb(90, 127, 31) /*rgb(133, 185, 51)*/;
		}
	#etapeMain a:hover,
	#etapeMain a:focus,
	#etapeMain a:active{
		color: rgb(133, 185, 51);
		}
/* Liste des étapes */
#etapes{
	float: right;
	width: 155px;
	}
	#etapes ul{
		margin: 0;
		padding: 0;
		list-style: none;
		}
	#etapes ul li{
		margin: 0;
		padding: 0;
		text-align: right;
		}


/***********************/
/* Affichage du panier */
/***********************/
table.panier{
	margin-bottom: 10px;
	width: 530px;
	border-collapse: collapse;
	background: rgb(239, 239, 239);
	}
	table.panier tr th{
		padding: 5px 5px;
		background: rgb(215, 42, 35);
		color: white;
		vertical-align: middle;
		}
		
		#etapeMain table.panier tr th span{
			font-size: 90%;
			font-weight: normal;
			}
			#etapeMain table.panier tr th span a:link,
			#etapeMain table.panier tr th span a:visited{
				color: white;
				text-decoration: underline;
				}
			#etapeMain table.panier tr th span a:hover,
			#etapeMain table.panier tr th a:focus,
			#etapeMain table.panier tr th a:active{
				text-decoration: none;
				}
	
	table.panier tr td{
		vertical-align: middle;
		padding: 5px 5px;
		border-top: 1px solid white;
		}
	table.panier tr.first td{
		}
	table.panier td.famille,
	table.panier td.reference{
		font-weight: bold;
		vertical-align: top;
		}
		table.panier td.reference small{
			display: block;
			color: rgb(113, 123, 124);
			font-weight: normal;
			}
	table.panier td.prix{
		padding-right: 10px;
		width: 60px;
		text-align: right;
		}
	table.panier th.montant{
		width: 70px;
		}
	table.panier th.montant,
	table.panier td.montant{
		text-align: right;
		font-weight: bold;
		}
	table.panier td.quantity{ /* Uniquement dans le récapitulatif */
		width: 50px;
		text-align: right;
		}
	table.panier td.addBasket{
		width: 110px;
		}
		table.panier .addBasketInput{
			float: left;
			margin: 0;
			padding: 2px;
			width: 50px;
			background: white;
			border: 1px solid rgb(113, 123, 124);
			}
		table.panier span.basketButtons{
			float: left;
			margin-left: 1px;
			width: 23px;
			}
		table.panier span.basketButtons img{
			margin: 0 1px 4px;
			}
	table.panier span.removeFromBasket{
		float: left;
		width: 20px;
		}
	/* Total */
	table.panier tr.fraisDePort th,
	table.panier tr.montantHTtotal th,
	table.panier tr.montantTVA th,
	table.panier tr.totalTTC th,
	table.panier tr.total th{
		padding-left: 150px;
		border-top: 1px solid white;
		text-align: left;
		}
	table.panier tr.total td{
		background: rgb(215, 42, 35);
		color: white;
		font-weight: bold;
		}
		table.panier tr.total td.prix{
			padding: 5px;
			font-size: 120%;
			font-weight: bold;
			}
	table.panier tr.montantTVA th,
	table.panier tr.fraisDePort th,
	table.panier tr.totalTTC th,
	table.panier tr.montantHTtotal th{
		border-top: 1px solid rgb(215, 42, 35);
		}
		table.panier tr.montantTVA td.prix,
		table.panier tr.fraisDePort td.prix,
		table.panier tr.totalTTC td.prix,
		table.panier tr.montantHTtotal td.prix{
			padding: 5px;
			border-top: 1px solid rgb(215, 42, 35);
			font-weight: bold;
			}
	
/*****************************/
/* Affichage de l'historique */
/*****************************/
table.commandes{
	width: 530px;
	border-collapse: collapse;
	background: rgb(239, 239, 239);
	}
	table.commandes tr th{
		padding: 5px 5px;
		background: rgb(215, 42, 35);
		color: white;
		vertical-align: middle;
		}
	table.commandes tr td{
		vertical-align: top;
		padding: 5px 5px;
		border-top: 1px solid white;
		}
	table.commandes tr.first td{
		}
	table.commandes td.numero{
		font-weight: bold;
		}
	/* Précédé de #etapeMain pour la priorité des CSS */
	#etapeMain table.commandes td.numero a:link,
	#etapeMain table.commandes td.numero a:visited{
		color: rgb(215, 42, 35);
		text-decoration: underline;
		}
	#etapeMain table.commandes td.numero a:active,
	#etapeMain table.commandes td.numero a:focus,
	#etapeMain table.commandes td.numero a:hover{
		text-decoration: none;
		}
	table.commandes td.montantTTC{
		padding-right: 10px;
		width: 70px;
		text-align: right;
		}
	table.commandes td.statut{
		color: black;
		}
		table.commandes td.normal{
			color: black;
			}
		table.commandes td.warning{
			color: orange;
			}
		table.commandes td.error{
			color: red;
			}
		table.commandes td.sended{
			color: green;
			}
	table.commandes td.actions{
		width: 109px;
		vertical-align: middle;
		}

/**************************/
/* Affichage des adresses (livraison et facturation) */
/**************************/

div.adresse{
	float: left;
	margin: 0 0 10px;
	padding-bottom: 5px;
	width: 250px;
	background: rgb(239, 239, 239);
	border-bottom: 10px solid rgb(215, 42, 35);
	}
div.livraison{
	margin-left: 30px;
	}
	#content div.adresse h3{
		position: relative;
		margin-bottom: 5px;
		padding: 5px 5px;
		background: rgb(215, 42, 35);
		color: white;
		font-size: 110%;
		text-align: left;
		}
		div.adresse h3 span{
			position: absolute;
			top: 2px;
			right: 5px;
			font-weight: normal;
			font-size: 85%;
			}
			#etapeMain div.adresse h3 span a:link,
			#etapeMain div.adresse h3 span a:visited{
				color: white;
				text-decoration: underline;
				}
			#etapeMain div.adresse h3 span a:hover,
			#etapeMain div.adresse h3 span a:focus,
			#etapeMain div.adresse h3 span a:active{
				text-decoration: none;
				}
	div.adresse p{
		padding: 0 5px;
		}
		div.adresse p.nom{
			font-weight: bold;
			}
		div.adresse p.societe{
			}
		div.adresse p.adresseL1{
			margin-top: 5px;
			padding-top: 5px;
			border-top: 1px solid white;
			}
		div.adresse p.adresseL2{
			}
		div.adresse p.codePostal{
			}
		div.adresse p.ville{
			}
		div.adresse p.pays{
			}

/********************/
/* Commentaire */
/********************/
div.commentaire {
	margin: 0 15px 10px 0;
	padding-bottom: 5px;
	background: rgb(239, 239, 239);
	border-bottom: 10px solid rgb(215, 42, 35);
	}
	#content div.commentaire h3 {
		position: relative;
		margin-bottom: 5px;
		padding: 5px 5px;
		background: rgb(215, 42, 35);
		color: white;
		font-size: 110%;
		text-align: left;
		}
	div.commentaire label {
		margin: 0 5px;
		}
	div.commentaire p,
	div.commentaire textarea {
		margin: 5px;
		padding: 2px 5px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 100%;
		width: 505px;
		height: 150px;
		}
	div.commentaire p {
		height: auto;
		}

/********************/
/* Choix des adresses */
/********************/
#content div.popup{
	padding: 5px 10px;
	width: 600px;
	background: white;
	border: 2px solid rgb(133, 185, 51);
	}
	#content div.popup h2{
		color: rgb(133, 185, 51);
		}
	#content div.popup table{
		margin-bottom: 20px;
		width: 100%;
		border-collapse: collapse;
		border-bottom: 5px solid rgb(133, 185, 51);
		}
	#content div.popup table th,
	#content div.popup table td{
		padding: 5px;
		}
	#content div.popup table th{
		background: rgb(133, 185, 51);
		color: white;
		}
	#content div.popup table td{
		background: rgb(239, 239, 239);
		border-bottom: 1px solid white;
		color: black;
		}
#content div.popup p.buttons input.button{
	color: rgb(133, 185, 51);
	}

/********************/
/* Pied de page */
/********************/

#footer{
	}
	#footer ul{
		margin: 0;
		padding: 0 0 3px;
		text-align: right;
		}
		#footer ul li{
			margin: 0;
			padding: 0 5px;
			display: inline;
			font-size: 10px;
			text-transform: uppercase;
			border-left: 1px solid rgb(113, 123, 124);
			}
			#footer ul li.first{
				border: none;
				}
			#footer ul li a:link,
			#footer ul li a:visited{
				color: rgb(73, 82, 84);
				}
			#footer ul li a:hover,
			#footer ul li a:active,
			#footer ul li a:focus{
				color: rgb(113, 123, 124);
				}

/********************/
/* Cacher le body (lors de l'apparition de fenêtre, etc.) */
/********************/
#hideBody,
#hideBodyPassword{
	position: fixed !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	visibility: hidden;
	}

/********************/
/* Navigation */
/********************/

#prelude{
	margin-top: 5px;
	}
	#navHaut{
		padding: 0 0 0 15px;
		height: 100%;
		}
		#navHaut li{
			display: inline;
			padding: 5px;
			font-size: 10px;
			text-transform: uppercase;
			border-left: 1px solid rgb(113, 123, 124);
			}
			#navHaut li a:link,
			#navHaut li a:visited{
				color: black;
				text-decoration: none;
				}
			#navHaut li a:hover,
			#navHaut li a:active,
			#navHaut li a:focus{
				color: rgb(73, 82, 84);
				}

#menu{
	float: left;
	background: rgb(113, 123, 124);
	width: 250px;
	height: auto !important;
	height: 288px; /* BUG IE6 */
	min-height: 288px;
	}
	#menu h2{
		display: none;
		}

	#menu ul{
		margin: 20px 0 0 0;
		padding: 0 0 0 40px;
		color: rgb(192, 192, 192);
		list-style: none;
		text-align: left;
		}
		#menu ul li {
			margin: 0;
			padding: 0;
			line-height: 15px;
			font-size: 11px;
			}
			#menu ul li strong{
				color: white;
				}
			#menu ul li a:link,
			#menu ul li a:visited {
				color: #a8afaf;
				text-decoration: none;
				}
				#menu ul li a:hover,
				#menu ul li a:active {
					color: #fff;
					font-weight: bold;
					}

	#menu ul li ul{
		margin: 0;
		padding: 0 0 0 10px;
		}
		#menu ul li ul li{
			margin: 5px 0 0;
			}
			#menu ul li ul #infoPanier,
			#menu ul li ul #infoPanier a:link,
			#menu ul li ul #infoPanier a:visited{
				color: white;
				font-size: 12px;
				font-weight: bold;
				}
			#menu ul li ul #infoPanier a:focus,
			#menu ul li ul #infoPanier a:active,
			#menu ul li ul #infoPanier a:hover{
				text-decoration: underline;
				}

/********************************************/
/* Formulaires */
/********************************************/
#content form p.error,
#content form p.infos{
	margin: 0;
	padding: 10px 0;
	}
#content form p.error{
	color: red;
	}
#content form fieldset{
		margin: 0;
		padding: 10px 0 0;
		border: none;
		}
	#content form fieldset legend{
		margin: 0 15px;
		padding: 2px 5px;
		color: rgb(20, 122, 186);
		font-weight: bold;
		font-size: 120%;
		}
	#content form fieldset p{
		clear: both;
		padding: 0 0 10px;
		}
		#content form fieldset p span.label{
			display: block;
			float: left;
			padding: 3px 0 10px;
			width: 180px;
			}
		#content form fieldset p.required span.label{
			font-weight: bold;
			}
			#content form fieldset p.required span.label label{
				padding-right: 6px;
				background: url(../images/css/asterisque.gif) no-repeat right top;
				}
			#content form fieldset p span.field{
				display: block;
				float: left;
				padding: 0 0 10px;
				width: 350px;
				}
			#content form fieldset p span.field select,
			#content form fieldset p span.field textarea,
			#content form fieldset p span.field input.text{
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: 1em;
				color: rgb(20, 122, 186);
				border: 1px solid rgb(113, 123, 124);
				}
			#content form fieldset p span.field input.text{
				padding: 2px;
				width: 300px;
				}
			#content form fieldset p span.field textarea{
				padding: 2px 5px;
				width: 294px;
				height: 150px;
				}
			#content form fieldset p span.field select{
				}
				form fieldset p span.field select option{
					padding: 2px;
					}
			#content form fieldset p span.field input.readonly{
				color: rgb(129, 177, 207);
				}
		/* Erreurs JS */
			#content form fieldset p span.field select.red,
			#content form fieldset p span.field textarea.red,
			#content form fieldset p span.field input.red{
				background-color: rgb(255, 240, 239);
				border-color: red;
				}
			#content form fieldset p span.errorMessage{
				display: block;
				color: red;
				font-size: 11px;
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-weight: bold;
				}
	/* Boutons */
	#content p.buttons,
	#content form p.buttons{
		margin: 10px 0;
		text-align: center;
		}
		#content form p.buttons input.button{
			padding: 2px 5px;
			background: rgb(248, 248, 248);
			border: 1px solid rgb(226, 226, 226);
			color: rgb(215, 42, 35);
			cursor: pointer;
			}
		#content form p.buttons input.submit{
			font-weight: bold;
			}
		#content form p.buttons input.image{
			margin: 0;
			padding: 0;
			}
		#content form p.buttons input.image,
		#content form p.buttons img{
			margin: 0 15px;
			border: none;
			background: none;
			}
	/* Champs spéciaux */
	/* Accepter les CGV */
	#content form#accepterCGV label{
		padding: 0 10px 0 0;
		}
	


/*******************************/
/* Formulaire d'identification */
/*******************************/

#content #formLogin fieldset{
	margin: 0 auto;
	padding: 10px;
	width: 500px;
	border-color: rgb(192, 192, 192);
	}
	#content #formLogin fieldset legend{
		}
	#content #formLogin fieldset p{
		margin-bottom: 10px;
		padding: 0;
		}
	#content #formLogin fieldset p span.label{
		display: block;
		padding: 0;
		}
	#content #formLogin fieldset p.required span.label{
		color: rgb(215, 42, 35);
		font-weight: bold;
		}
		#content #formLogin fieldset p span.field{
			display: block;
			}
		#content #formLogin fieldset p span.field input.text{
			padding: 5px;
			font-size: 100%;
			color: rgb(73, 82, 84);
			border: 1px solid rgb(192, 192, 192);
			}
	#content #formLogin fieldset p.buttons{
		margin-top: 10px;
		text-align: center;
		}
		#content #formLogin fieldset p.buttons input.button{
			padding: 0;
			font-size: 12px;
			vertical-align: middle;
			}
			#content #formLogin fieldset p.buttons input.submit{
				font-weight: bold;
				cursor: pointer;
				}
			#content #formLogin fieldset p.buttons #linkForgottenPassword{
				color: rgb(113, 123, 124);
				}
			#content #formLogin fieldset p.buttons #linkForgottenPassword:hover,
			#content #formLogin fieldset p.buttons #linkForgottenPassword:active
			#content #formLogin fieldset p.buttons #linkForgottenPassword:focus{
				color: rgb(215, 42, 35);
				}

#CGV p{
	font-size: 11px;
	line-height: 18px;
	text-align: justify;
	}

/***************************/
/* Une promo ? Un cadeau ! */
/***************************/
#homepageNews{
	position: absolute;
	top: 91px;
	right: 5px;
	padding: 5px;
	width: 190px;
	background: white;
	color: rgb(73, 82, 84);
	}
	#homepageNews h2{
		margin-bottom: 5px;
		color: rgb(215, 42, 35);
		border-bottom: 1px dotted rgb(215, 42, 35);
		}
	#homepageNews p{
		text-align: justify;
		}
	#homepageNews p.image{
		text-align: center;
		}
	#homepageNews p.read_more{
		text-align: right;
		}
		#homepageNews a:link,
		#homepageNews a:visited,
		#news a:link,
		#news a:visited {
			color: rgb(90, 127, 31);
			}
		#homepageNews a:focus,
		#homepageNews a:active,
		#homepageNews a:hover,
		#news a:focus,
		#news a:active,
		#news a:hover{
			color: rgb(133, 185, 51);
			}
#news div.news {
	clear: both;
	}
	#news div.news h3{
		margin-bottom: 5px;
		text-align: left;
		}
	#news div.news p.image {
		margin: 0 5px 5px 0;
		float: left;
		}

/***** EXTRA SUR NAV *****/
#downloadDominoSimul {
	text-align: center;
	}
	#downloadDominoSimul a:link,
	#downloadDominoSimul a:visited {
		color: white;
		font-weight: bold;
		text-decoration: none;
		}
	#downloadDominoSimul a:hover,
	#downloadDominoSimul a:focus,
	#downloadDominoSimul a:active {
		text-decoration: underline;
		}


/**********************************/
/***** Navigation langue **********/
/**********************************/


div#navLangues {
	position: absolute;
	width: 54px;
	height: 16px;
	margin: 0;
	padding: 0;
	right: 50px;
	top: 120px;
	z-index: 1;
	}
	div#navLangues ul#menuNavLangues {
		width: 54px;
		height: 16px;
		background: transparent url(../images/common/nav_langues.jpg) left top no-repeat;
		margin: 0;
		padding: 0;
		position: relative;
		}
		div#navLangues ul#menuNavLangues li {
			margin: 0;
			padding: 0;
			list-style: none;
			position: absolute;
			top: 0;
			}
			ul#menuNavLangues li, ul#menuNavLangues a {
				height: 16px;
				display: block;
			}
			div#navLangues ul#menuNavLangues li a {
				text-indent: -9999px;
				text-decoration: none;
			}
			#navFr {
				left: 0;
				width: 24px;
			}
			#navGb {
				left: 30px;
				width: 24px;
			}
			#navFr a:hover {
				background: transparent url(../images/common/nav_langues.jpg) 0 -16px no-repeat;
			}
			#navGb a:hover {
				background: transparent url(../images/common/nav_langues.jpg) -30px -16px no-repeat;
			}