/* CSS Document */

.container {
	background: #FFF url('../../images/FR/background.gif') repeat-x top left;
	height:		100%;
	width:		1028px;
	margin:		0;}

/**************************************************/
/**************************************************/
/*

SOMMAIRE
1. TEMPLATE DE PAGE
	1.1 HEADER 	( Bandeau haut + menu catégories )
	1.2 MIDDLE 	( Ensemble de la partie basse )
		1.2.a MENU 		( menu flash )
		1.2.b CONTENT	( contenu du centre )
			1.2.b.1 BOX MODEL		( cadre extérieur, intérieur )
			1.2.b.2 CONTENT TOOL	( style de conteneur interne )
			1.2.b.3 VISUEL GAUCHE	( visuel vertical récurent	 )
		1.2.c FOOTER
	1.3 DIV-BOX			( Div qui servira à ajouter les popup )
	1.4 TEXT MODEL		( Les style par défaut des titre, labeur etc...)
	1.5 INFO-BULLE-ERREUR

*/
/*****************************************************/
/*****************************************************/



/********** 
1.1 HEADER
**********/

.logo	{	float: left; }

#entete	{	
	float:		left;
	width:		736px;
	padding:	0 16px 0 0;
}
#entete.entete_distributeur 
{	width:680px;
}
p.baseline	{ 
		font-size:		20px; 
		font-weight:	bold; 
		float:			left;
		color:			#5d5d5d;
		font-style:		italic;
		margin:			10px 0 0 6px;
		width:			325px; }
p.baseline span {
		font-size:	14px;
		color:		#888;
		display:	block;
		margin:		29px 0 0; }
			
.espace_distributeur {
	float:				right;
	padding:			5px 0 0;
}
.espace_distributeur .input-text,
.espace_distributeur input[type=text] {
	text-align:	center;
	width:		90px; }
.newsletter {
	float:		right;
	padding:	5px 0 0 10px;
	width:		150px;
	text-align:	right;
}
	.newsletter .input-text,
	.newsletter input[type=text] {
		width:	115px; 
	}
.switch_lang {
	float:		right;
	margin:		24px 31px 0 0;
	color:		#FFF; 
	width:		200px;
	text-align:	right;
}
.switch_lang img {
	margin:0 0 -7px;	}
.marques_mini{
	left:680px;
	position:absolute;
	top:20px;
	width:300px;
	text-align:right;
}
.marques_mini img
{	margin:0 5px 10px;
 	vertical-align:middle;
}

/* DIV MDP OUBLIE */

.div_mdp_oublie {
	width:		266px;
	height:		158px;
	background:	transparent url('../../images/FR/background/bg_mdp_oublie.png') no-repeat;
	position:	absolute;
	left:		440px;
	top:		260px;
	text-align:	center;
	z-index:	4;	
	padding:	20px 20px 0;
}
.div_mdp_oublie strong {	
	text-transform: uppercase;
	display:block;
	margin:20px 0 20px;
}
.home .div_mdp_oublie .fermer-actu {
	float:	right;
	cursor:	pointer;
	position:absolute;
	right:0;
	top:0;
}

.home .div_mdp_oublie .fermer-actu {
	float:	right;
	cursor:	pointer;
}

/********** 
1.2 MIDDLE
**********/

#middle {	
	clear:		both;
	min-height:	570px;
	position:	relative;	}

/*
************ -> 1.2.a MENU */

.menu {
	float:		left;
	width:		276px;
	min-height:	570px;
	background:	#565e61;
	padding:	40px 0 0;	}
	
	ul.menu_pro,
	ul.menu_distributeur 	{
		width:		185px; 
		margin:		10px 0 0;	
	}
		ul.menu_pro li,
		ul.menu_distributeur li {
			color:		#FFF;
		    text-align:	right;
		}
		    ul.menu_pro li a,
		    ul.menu_distributeur li a {
				color:		#999;
				text-align:	right;
				display:	block;
				padding:	0 5px 0 0;
		   }
				ul.menu_pro li a:hover,
				ul.menu_distributeur li a:hover  {
					color:				#FFF;
					background:			#3883c7 /*url('../../images/FR/background/bg_menupro_anim_hover.gif') no-repeat*/;
					text-decoration:	none;
					cursor:				pointer;
	           }
				
	ul.menu_part 	{
		width:		185px; 
		margin:		10px 0 0;	}
		ul.menu_part li {
			color:		#FFF;
		    text-align:	right;             }	    
		    ul.menu_part li a {
				color:		#999;
				text-align:	right; 
				display:	block;
				padding:	0 5px 0 0;
             }
				ul.menu_part li a:hover	{
					color:				#FFF;
					background:			#e23843 /*url('../../images/FR/background/bg_menupart_anim_hover.gif') no-repeat*/;
					text-decoration:	none;
					cursor:				pointer;}
	
	
			ul.menu_part li.titre_menu {
			font-size:11px;
			text-transform:uppercase;
			}

	
		ul.menu_pro li.titre_menu,
		ul.menu_part li.titre_menu,
		ul.menu_distributeur li.titre_menu {
			text-transform:	uppercase;
			margin:			15px 0 5px;
			padding:		5px 20px 3px 0;
			font-size:		11px;
			background:		#73787c url('../../images/FR/background/bg_pro_deplie.gif') 167px 7px no-repeat;	}
		ul.menu_part li.titre_menu	{
			background:		#73787c url('../../images/FR/background/bg_part_deplie.gif') 167px 7px no-repeat;	}
		
			.pro_plie ul.menu_pro li.titre_menu {
				background:		url('../../images/FR/background/bg_pro_plie.gif') 167px 7px no-repeat;	}
			.part_plie ul.menu_part li.titre_menu	{
				background:		url('../../images/FR/background/bg_part_plie.gif') 167px 7px no-repeat;	}
				
		ul.menu_part li.titre_menu a, 
		ul.menu_pro li.titre_menu a,
		ul.menu_distributeur li.titre_menu a {
			color:		#FFF;
			text-align:	right; 
			display:	block;
			padding:	0 5px 0 0;
        }
        ul.menu_part li.titre_menu a:hover, 
        ul.menu_pro li.titre_menu a:hover,
        ul.menu_distributeur li.titre_menu a:hover{
			background:	none;
        }

.menu ul.menu_pro .active,
.menu ul.menu_distributeur .active{
	background:			#3883c7;
	color:				#fff;
}
.menu ul.menu_part .active{
	background:			#e23843;
	color:				#fff;
}

.environnement .menu ul.menu_part .environnement {
	background:			#e23843;
	color:				#fff;
}

.pro_plie ul.menu_pro li { display:none;}
.pro_plie ul.menu_pro li.titre_menu { display:block;}
.part_plie ul.menu_part li { display:none;}
.part_plie ul.menu_part li.titre_menu { display:block;}
	


/*
************ -> 1.2.b CONTENT */

/*--------------- -> 1.2.b.1 BOX MODEL */
#content-box {
	width:		787px;
	min-height:	465px;
	padding:	10px 18px 15px 17px;
	background:	url('../../images/FR/background/bg_content.png') no-repeat 10px 0;
	position:	absolute;
	left:		168px; 		/* se cale à droite du menu -99px (superposition ombre) */	}
	
	div.pro #content-box {	background:	url('../../images/FR/background/bg_content_pro.png') no-repeat 10px 0;	}
	div.part #content-box {	background:	url('../../images/FR/background/bg_content_part.png') no-repeat 10px 0;	}
	
	#content-box #content {
		width:		769px;
		min-height:	457px;
		padding:	8px 9px 0;
		height:		100%;
		position:	relative;
		background: #FFF url('../../images/FR/background/bg_box.gif') no-repeat top;	}
	
	#content-box #box-bottom {
		height:			20px;
		background:		#FFF url('../../images/FR/background/bg_btm_box.gif') no-repeat top;	}
		
	div.pro #content-box #content		{	background: #FFF url('../../images/FR/background/bg_box_pro.gif') no-repeat top;	}
	div.part #content-box #content		{	background: #FFF url('../../images/FR/background/bg_box_part.gif') no-repeat top;	}
	
	div.pro #content-box #box-bottom	{	background:		#FFF url('../../images/FR/background/bg_btm_box_pro.gif') no-repeat top;	}
	div.part #content-box #box-bottom	{	background:		#FFF url('../../images/FR/background/bg_btm_box_part.gif') no-repeat top;	}
	
	/* Spécificité pour la homepage : pas de cadre intérieur */
	.home #content-box 	{
		min-height:	475px;	}
		.home #content-box #content {
			padding:		0;
			background: #FFF;	}
		.home #content-box #box-bottom {
			height:		0px;
			background:	none;
			display:	none;	}

	#content-bottom {
		width:		813px;
		height:		20px;
		background:	url('../../images/FR/background/bg_btm_content.png') no-repeat 10px 0;
		position:	absolute;	top:	491px;
		left:		168px; 		/* se cale à droite du menu -99px (superposition ombre) */	}
	
	
/*--------------- -> 1.2.b.2 CONTENT TOOL */
.rounded-box {
	padding: 18px 19px 0;
	background : transparent url('../../images/FR/background/bg_rounded_box.gif') no-repeat 12px 12px;
	}
.rounded-box-btm 
{
	height:		15px;
	padding:	0 19px 0;
	margin:		0 0 10px;
	background: transparent url('../../images/FR/background/bg_btm_rounded_box.gif') no-repeat 12px 0 ;
	}
	
/*--------------- -> 1.2.b.3 VISUEL GAUCHE */
div.visuel-gauche {
	width:		172px;
	min-height: 425px !important;
	float:		left;
}
.withImage  {	margin-left:	182px !important;}

/*
************ -> 1.2.b FOOTER */
#footer {
	padding:	5px 30px 0 0;
	position:	relative;
	top:		500px;
	text-align:	right;	}
	
	#footer ul { padding:0;}
	#footer ul li {		display:inline;	}
		#footer ul li span {	color:	#bbb;	}


/********** 
1.3 DIV-BOX
*********/

#div-box {
	position:	absolute;
	z-index:	2;
	background:	#000;
	opacity : 	0.5;
	filter:		alpha(opacity=50);
	left:		0;
}
.actualite {
	width:		473px;
	height:		333px;
	margin:		-167px 0 0 -237px;
	background:	transparent url('../../images/FR/background/bg_actualite.png') no-repeat;
	position:	absolute;
	left:		50%;
	top:		50%;
	z-index:	4;
}
	.home #content .actualite .fermer-actu {
		float:	right;
		cursor:	pointer;
	}
	
.mdp_oublie {
	position:absolute;
	font-size:9px;
}





/*************** 
1.4 TEXT-MODEL
***************/
.tit-div { 
		font-size:		13px;
		font-weight:	bold;
		display:		block;
	}
	.pro .tit-div { color:#4289c9;}
	.part .tit-div { color:#e45b65;margin:10px 0 0;}
	
img.a-right {margin:0 0 0 15px; vertical-align:middle; float:right;}
img.a-left { float:left; margin: 0 10px 0 0;}
p.a-center { text-align:center;}


.input-text, select, textarea {
	border:#ccc 1px solid;
}

	
.radio-list {display:inline;}
ul.formulaire .radio-list li {
	float:left;
	clear:none;
}
.radio-list input {
		width:		auto !important;
		position:	relative !important;
		top:		-5px !important;
}
.radio-list label {
		width:		auto !important;
		float:		none !important;
		color:		#888 !important;
}


/* FORMULAIRE */

ul.formulaire {
	padding:			10px;
	margin:				10px;
}
ul.formulaire li {
	padding:			3px 0;
	clear:				left;
}
ul.formulaire label {
	float:				left;
	width:				200px;
	margin:				0 10px 0 0;
	text-align:			left;
}
ul.formulaire input {
	width:				200px;
	height:				16px;
	margin:				0 5px 0 0;
	color:				#999;
	border:				1px solid #CCCCCC;
}
ul.formulaire input.short {	
	width:				100px;
}
ul.formulaire select {	
	width:				204px;
	height:				22px;
	margin:				0 4px 0 0;
}
ul.formulaire .input-image,
ul.formulaire imput[type=image] {
	width:				auto;
	height:				auto;
}
ul.formulaire .input-radio,
ul.formulaire input[type=radio] {
	width:				auto;
	border:				0;
}
ul.formulaire .input-checkbox,
ul.formulaire input[type=checkbox] {
	width:				auto;
	margin:				0 5px 2px 0;
	border:				0;
}
ul.formulaire li.date_naissance select {
	width:				63px;
}
ul.formulaire span {
	color:				#AAA;
	display:			block;
	font-size:			10px;
	font-style:			italic;
	/*margin:				0 0 0 210px;*/
}
ul.formulaire .text_nonedit 
{	color:				#999;
	border:				1px solid #CCCCCC;
}

/* Civilite */
ul.formulaire li.civilite label {
	width:				auto;
}
ul.formulaire li.civilite .label_radio {
	float:				none; 
	width:				auto;
}
/* Date de naissance */
ul.formulaire li.naissance select {
	width:				63px;
}
/* Optin */
ul.formulaire li.optin label {
	width:				350px;
}

/* Mentions */
ul.formulaire li.mentions span {
	margin:				0;
	font-size:			11px;
}

/* Validation */
ul.formulaire li.validation input {
	margin:				0 0 0 210px;
	width:				auto;
	height:				auto;
}


/********************
1.5 INFO-BULLE-ERREUR
*********************/
.loginerreur
{
	margin-top:2px;
	margin-left:85px;
}
.mdpoublieerreur{margin-left:30px;}
.gestioncompteerreur{margin-left:160px;}
.adresseerreur{margin-left:370px;}
.checkboxadresseerreur{margin-left:520px;margin-top:15px;}

.blackstone
{
	position:absolute;
	z-index:10;
	opacity:1;
}
.blackstone .tl{
	background: url('../../images/info-bulle-erreur/tl.png') no-repeat;
}
.blackstone .t{
	background: url('../../images/info-bulle-erreur/t.png') no-repeat;
	height: 16px;
}
.blackstone .tr{
	background: url('../../images/info-bulle-erreur/tr.png') no-repeat;
}
.blackstone .l{
	background: url('../../images/info-bulle-erreur/l.png') repeat-y;
	width : 16px;
}
.blackstone .r{
	background: url('../../images/info-bulle-erreur/r.png') repeat-y;
	width: 16px;
}
.blackstone .bl{
	background: url('../../images/info-bulle-erreur/bl.png') no-repeat;
}
.blackstone .b{
	background: url('../../images/info-bulle-erreur/b.png') repeat-x;
	height: 25px;
}
.blackstone .br{
	background: url('../../images/info-bulle-erreur/br.png') no-repeat;
}
.blackstone .c{
	background: url('../../images/info-bulle-erreur/c.png') repeat;
}
.blackstone a.close, .formMotDePasseOublie a.close{
	float: right;
	background: url('../../images/info-bulle-erreur/close.png') no-repeat;
	position: relative;
	margin-left: 5px;
	display: block;
	width: 10px;
	height: 10px;
	cursor: pointer;
}
.blackstone .err {
	float: left;
}
.blackstone .err span{
	color:red;
	font-size:10px;
}
.blackstone p {
	width : auto;
	display: block;
	font-size: 10px;
	font-family: tahoma, verdana, "sans-serif";
	margin : 0;
	padding : 0;
	border : 0;
	color : #FFF;
}