/*----------------------------------------------------------------------------- 
NORTH AMERICAN WHITE SMILE Screen Stylesheet 

version:   1.0 
date:      15/12/2009 
author:    Carl Servant / SÉQUENCE DIGITALE SENC 
email:     info@sequencedigitale.com 
website:   www.sequencedigitale.com/web/ 
version history: /_INCLUDES/css/style.css
-----------------------------------------------------------------------------*/

/***************************************  
	RESET - NE PAS TOUCHER 
****************************************/

	html, body, div, span,  
	h1, h2, h3, h4, h5, h6, a, p,
	address, big, img, small, strike, strong, sub, sup,
	b, u, i, center, dl, dt, dd, ol, ul, li, 
	fieldset, form, label, legend {
		border: 0;
		margin: 0;
		padding: 0;		
	}
	
	/* CLEAR FIX*/
	.clearfix:after {content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;}
	.clearfix {display: inline-block;}
	/* Hides from IE-mac \*/
	* html .clearfix { height: 1%;}
	.clearfix {display: block;}
	/* End hide from IE-mac */
	
/***************************************  
	TYPOGRPAHIE 
****************************************/

	body{
		color: #000; 
		font: 75%/1.333 arial, verdana, helvetica, tahoma, sans-serif;
	}
	
	h1, h2, h3, dt{ margin-bottom: 0.5em; }
	
	h1{
		background-repeat: no-repeat;
		font-size: 1.6em;
		height: 18px; 
		margin-bottom: 25px; 
		text-indent: -9000%; 
	}
	
		h1.HeaderLogo{ background-image: none !important; text-indent: 0; }

		#notresysteme.FR h1{ background-image: url(../images/h1_-_notre_systeme.jpg); }
		#ensemblesdeblanchiment.FR h1{ background-image: url(../images/h1_-_ensembles_de_blanchiment.jpg); }
		#resultats.FR h1{ background-image: url(../images/h1_-_resultats.jpg); }
		#faq.FR h1{ background-image: url(../images/h1_-_faq.jpg); }
		#contacteznous.FR h1{ background-image: url(../images/h1_-_contactez-nous.jpg); }
	
		#etapes_du_traitement.FR h1{ background-image: url(../images/h1_-_etapes_du_traitement.jpg); }
		#points_de_service.FR h1{ background-image: url(../images/h1_-_points_de_service.jpg); }
		
		
		#notresysteme.EN h1{ background-image: url(../images/h1_-_our_process.jpg); }
		#ensemblesdeblanchiment.EN h1{ background-image: url(../images/h1_-_teeth_whitening_packages.jpg); }
		#resultats.EN h1{ background-image: url(../images/h1_-_results.jpg); }
		#faq.EN h1{ background-image: url(../images/h1_-_faq_en.jpg); }
		#contacteznous.EN h1{ background-image: url(../images/h1_-_contact_us.jpg); }
	
	
	h2{
		color: #407D6B;
		font-size: 1.4em;
	}
	
		h2.notresysteme, h2.ensemblesdeblanchiment,
		h2.resultats, h2.faq,
		h2.etapes_du_traitement, h2.points_de_service{
			background-repeat: no-repeat;
			font-size: 1.6em;
			height: 18px; 
			margin-bottom: 15px; 
			text-indent: -9000%; 
		}
	
		#accueil.FR div.commercants h2.notresysteme{ background-image: url(../images/h2_-_notre_systeme.jpg); }
		#accueil.FR div.commercants h2.ensemblesdeblanchiment{ background-image: url(../images/h2_-_ensembles_de_blanchiment.jpg); }
		#accueil.FR div.commercants h2.resultats{ background-image: url(../images/h2_-_resultats.jpg); }
		#accueil.FR div.commercants h2.faq{ background-image: url(../images/h2_-_faq.jpg); }		
		
		#accueil.FR div.consommateurs h2.etapes_du_traitement{ background-image: url(../images/h1_-_etapes_du_traitement.jpg); }
		#accueil.FR div.consommateurs h2.points_de_service{ background-image: url(../images/h1_-_points_de_service.jpg); }
		#accueil.FR div.consommateurs h2.faq{ background-image: url(../images/h1_-_faq.jpg); }		
		
		#accueil.EN div.commercants h2.notresysteme{ background-image: url(../images/h2_-_our_process.jpg); }
		#accueil.EN div.commercants h2.ensemblesdeblanchiment{ background-image: url(../images/h2_-_teeth_whitening_packages.jpg); }
		#accueil.EN div.commercants h2.resultats{ background-image: url(../images/h2_-_results.jpg); }
		#accueil.EN div.commercants h2.faq{ background-image: url(../images/h2_-_faq_en.jpg); }		

	
	h3, dt{ 
		border-bottom: 1px dashed #CCC;
		color: #792026; 
		font: 20px Calibri, arial; 
	}
	
	a:link{
		color: #762124;
	}
	
		a:hover{
			color: #FF3300;
		}
		
		a:visited{
			color: #600505;
		}
		
		a:active{
			color: yellow;
		}
		
	address{
		font-style: normal;
		margin-bottom: 1em;
	}
	
		.FooterAlign address{
			margin: 0;
		}

	dl{}
	
		dt{}		
		dd{
			padding-bottom: 15px;
			padding-left: 15px;
		}
		
		
	hr{
		border: 0;
		border-top: 1px solid #FFF;
		color: #FFF;		
		clear: both;
		height: 1px;
		margin: 15px 0;
	}
	
	img{
		border: 1px solid #333;
	}
		
	ol, ul{
		margin: 15px 0;
	}
		li{
			margin-left: 25px;
		}

	p{
		margin-bottom: 1em;
	}
	
	span{}
		span.poste{
			display: block;
			margin-bottom: 1em;;
		}


/***************************************  
	SHELL 
****************************************/

	html { background: #EEE9E3 url(../images/Body_Background.gif) repeat-x; height: 100.1%; }
	body, #PageWrap{ height: 100%; }
	body > #PageWrap { height: auto; min-height: 100%;}
	
	#HeaderWrap, #PageWrap, .FooterAlign{
		margin: 0 auto;
		position: relative;
		width: 975px;
	}
	
	
	#HeaderWrap{
		height: 250px;
		margin-bottom: -250px;
		overflow: hidden;
		position: relative;		
		z-index: 55;
	}
	
	#PageWrap{}
	
		#ContentPadding{
			margin: 250px 0 110px 0;	
			background: #FBFAF7 url(../images/contenu_side.gif) repeat-y;
			border: 1px solid #CCC;		
			border-bottom: 20px solid #792026;				
		}
		
		/* NON-IE */
		#PageWrap > #ContentPadding{
			margin-bottom: 110px !important;
		}
		
			#contenu_IMAGE{
				background: #CFD7D6 url(../images/Contenu_IMAGE.jpg) no-repeat; 
				position: absolute;
				height: 408px;
				width: 224px; 
				z-index: 33;
			}
		
			#ContenuTexte{						
				margin-left: 225px;
				padding: 30px 25px;				
			}
			
			/* NON-IE */
				#ContentPadding > #ContenuTexte{
					height: auto;
					min-height: 400px;
				}
	
	#FooterWrap{
		background: #A0BAB1;
		color: #5D181B;
		height: 100px;
		margin-top: -80px;
		position: relative;
	}	
	
		/* NON-IE */
		body > #FooterWrap{
			
		}
	
		.FooterAlign{
			text-align: right;
			padding: 10px 10px 0 0;
		}


/***************************************  
	STRUCTURE 
****************************************/
	
	h1.HeaderLogo{
		position: absolute;
		top: 50px;
	}
	
	a.langue, a.ChangerSection{
		font-weight: bold;
		overflow: hidden;
		padding: 11px;
		text-decoration: none;
	}
	
	a.langue:hover, a.ChangerSection:hover{
		background: #BFCCC6;
		color: #FFF;
	}
	
	a.langue{
		background: #95B3A9;
		position: absolute;
		top: 2px;
		right: 10px;
	}
	
	a.ChangerSection{
		background: #95B3A9;
		position: absolute;
		top: 2px;
		right: 74px;
	}
	

	
	/* PAGE ACCUEIL */
	#accueil #ContentPadding{
		background-image: none;
		border-bottom: 1px solid #CCC;
		margin-top: 0px;
	}	
	
		/* NON-IE */
		#accueil > #ContentPadding{
			margin-bottom: 0px !important;
		}
	
	#accueil #accueil_IMAGE{
		float: none; 
		height: 335px;
		margin-top: 245px;
		width: 975px; 
	}
	
		#accueil.FR div.commercants #accueil_IMAGE{ background: transparent url(/commercants/index.jpg) no-repeat; }
		#accueil.FR div.consommateurs #accueil_IMAGE{ background: transparent url(/consommateurs/index.jpg) no-repeat; }
		
		#accueil.EN div.commercants #accueil_IMAGE{ background: transparent url(/retailers/index.jpg) no-repeat; }
		
		#accueil #contenu_IMAGE{
			display: none;
		}
	
	#accueil #ContenuTexte{
		margin: 0px;
		overflow: hindden;
		padding: 20px 28px;
	}
	
	#accueil #ContenuTexte p, #accueil #ContenuTexte ol{
		height: 75px;
	}
	
		#accueil div.commercants #ContenuTexte{
			height: 250px !important;
			min-height: 250px;		
		}
		
		#accueil div.consommateurs #ContenuTexte{
			height: 275x !important;
			min-height: 275px !important;		
		}
	
	#accueil div.accueil{
		border-right: 1px dotted #CCC;
		float: left;	
	}
	
		#accueil div.commercants div.accueil{
			margin-right: 30px;
			padding-right: 29px;
			width: 183px;		
		}
		
		#accueil div.consommateurs div.accueil{
			margin-right: 34px;
			padding-right: 34px;
			width: 259px;		
		}		
	
		#accueil div.faq{
			border: 0;
			float: right;
			margin-right: 0!important;
			padding-right: 0!important;			
		}
	
	#accueil div.accueil img{
		margin-bottom: 10px;
	}
	
	#accueil div.accueil ol{
		margin: 0 0 15px 0;
	}
	
	#accueil div.accueil li{
		list-style: none;
		margin: 0;
	}
	
	
	/* PAGE NOTRE SYSTME */	
	.etapes, .kits{
		clear: both;
		height: 150px;
	}
	
		.etapes h3{
			margin-left: 215px;
		}
		
		.etapes img{
			float: left;
			margin-right: 15px;
		}
		
	/* PAGE ENSEMBLES DE BLANCHIMENT */
	.kits{
		clear: both;
		height: 500px;
	}
	
		.kits h3{
			margin-left: 315px;
		}
		
		.kits ul{
			margin-left: 325px;
		}
	
		.kits img.floatLeft{
			margin: 0 25px 100px 0;
		}

/***************************************  
	FORMULAIRE 
****************************************/	
		
	form label, form input, textarea{
		display: block
	}
	
	fieldset{
		background: #FAFAFA;
		border: 1px solid #CCC;
		padding: 15px;
	}
	
		fieldset legend{
			font-weight: bold;
		}
		
		fieldset label{
			font-size: 0.9em;
			margin-top: 5px;
		}
		
		form input, textarea{
			border: 1px solid #CCC;
			padding: 3px;
		}
	
	form button{
		margin-top: 15px;
	}		
		
		
/***************************************  
	BOUTONS 
****************************************/

	a.bouton{
		background: url(../images/bouton.gif) no-repeat top right; 
		color: #333333;
		display: block;
		float: left;		
		font-weight: bold;
		height: 25px;
		margin-right: 6px;
		padding-right: 18px;
		text-decoration: none;
	}
	
	a.bouton span{
		background: url(../images/bouton.gif) no-repeat top left;
		display: block;
		line-height: 14px;
		padding: 5px 0 5px 18px;
	}

	
/***************************************  
	NAVIGATION 
****************************************/

	#MenuPrincipal ul{ 
		background: url(../images/Menu_Background.jpg) no-repeat top right; 
		height: 43px; 
		position: absolute; left: 0px; bottom: 0px;
		list-style: none;
		width: 100%;
	}

	#MenuPrincipal li{ 
		background: url(../images/Menu_Background.jpg) no-repeat -236px 0px; 
		float: left; 
		margin: 0;
	}	
	
	#MenuPrincipal li a{ 
		color: #FFFFFF; 
		display: block; 
		float: left;
		height: 13px; 
		padding: 14px 15px 16px 15px; 
		text-align: center;
		text-decoration: none;
	}
	
	#MenuPrincipal li a:hover{ 
		text-decoration: underline; 
	}
	
		#MenuPrincipal li.accueil{ 
			background-position: 0px 0px; 
		}

	/* POSITION COURRANTE */
	
		#accueil li.accueil a,
		#notresysteme li.notresysteme a,
		#ensemblesdeblanchiment li.ensemblesdeblanchiment a,
		#resultats li.resultats a,
		#faq li.faq a,
		#contacteznous li.contacteznous a,
		
		#etapes_du_traitement li.etapes_du_traitement a,
		#points_de_service li.points_de_service a		
		{ 
			color: red;
		}

	
/***************************************  
	RACCOURCIS 
****************************************/

	.alignLeft{ text-align: left; }
	.alignRight{ text-align: right; }

	.displayNone{ display: none; }

	.floatLeft{ float: left; }
	.floatRight{ float: right; }
	
	.noBorder{ border: 0px !important; }
	
	.NoList, .NoList li{ margin: 0; padding: 0; list-style-type: none; }
/**/