/*-------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------		Fichier : index.html
-------------------		
-------------------		Objectif : Site Web Chiropratique Reims
-------------------
-------------------		Auteur : Julien Grandtener
-------------------
-------------------		Date de création : 16/04/2008
-------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------------*/

		/* Definition des feuilles de styles */
		/*--[if IE]>
		 <style type="text/css">
		 html pre
		{	
			width: 636px ;
}	
		</style>
		<![endif]-->
		
		<style type="text/css">*/
		
		/*************************************************/
		/*************************************************/
		/*				Conteneur Body			 */
		/*************************************************/
		/*************************************************/
		body
		{
			margin: 10px 0 ;
			padding: 0 ;
			text-align: center ;
			font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
			background: #C0E7E2;
		}
		
		/*  On définit les marges haute et basse à 10px et les marges droite et gauche à 0 
		    On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body 
		    On utilise text-align: center ; pour Internet Explorer, 
		    c'est la seule façon de centrer les éléments de type block avec ce navigateur 
		    On a ajouté de quoi mettre une police de caractère et une couleur de fond */
		
		
		/*************************************************/
		/*************************************************/
		/*				Conteneur Global				 */
		/*************************************************/
		/*************************************************/
		div#conteneur
		{
			position: relative;
			width: 850px ;
			padding-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
			margin: 0 auto ; /* Pour centrer notre page */
			text-align: left ;
			border: 5px double #407285 ;
			background: #fff ;
		}
		
		/*  On définit la largeur de la division qui contient l'ensemble de la page à 820 pixels 
		margin: 0 auto ; est la méthode correcte pour centrer les éléments de type
		block (comme les divisions), nous centrons donc cette division 
		Il faut rétablir l'alignement à gauche que nous avons changé plus haut 
		Une bordure autour de l'ensemble de la page,et couleur blanche pour le fond de celle-ci */
			
		/*************************************************/
		/*************************************************/
		/*			Conteneur Utiles				 */
		/*	Liste contenant les élements au dessus du Header	 */
		/*************************************************/
		/*************************************************/		
		div#utiles ul {
			float: right; /*Le menu flottera à gauche*/
			/*list-style-image: url(./Images/feuilleSmall.jpg);*/
			line-height: 2; /* Hauteur du menu*/
			background: white; /*Couleur de fond de chaque items du menu*/
			font-weight: bold;
			font-size: 1em ;
			padding: 10px 0px 10px 0px; /* Marge intérieure*/
			margin: 0 10px 0 20px;
		}
		
		/*************************************************/
		/*				Element de Utiles	(champ)	 */
		/*************************************************/
		div#utiles li {
			float: left; /* On les aligne par la gauche*/
			list-style-type: none;
			background-image: url(./Images/feuilleSmall.jpg);
			background-repeat: no-repeat;
			background-position: 0% 65%;
			padding-left: 15px;
			padding-right:10px;
			width: 13em;
		}
		
		/*************************************************/
		/*************************************************/
		/*			Conteneur Utiles				 */
		/*			Liste dans la zone contenu	 	 */
		/*************************************************/
		/*************************************************/	
		div#contenu ul {
			/*list-style-image: url(./Images/feuilleSmall.jpg);*/
			line-height: 2; /* Hauteur du menu*/
			background: white; /*Couleur de fond de chaque items du menu*/
			font-size: 1em ;
			padding: 10px; /* Marge intérieure*/
			margin: 0 10px 0 80px;
		}
		
		/*************************************************/
		/*				Element de Utiles	(champ)	 */
		/*************************************************/
		div#contenu li {
			text-align : center;
			/*float: left; /* On les aligne par la gauche*/
			list-style-type: none;
			background-image: url(./Images/feuilleSmall.jpg);
			background-repeat: no-repeat;
			background-position: 0% 1%;
			text-align: justify ;
			padding-left: 15px;
			padding-right:25px;
			width: 36em;
		}
		
		/*************************************************/
		/*************************************************/
		/*				Conteneur En-Tete		 */
		/*			Contient la bannière du site		 */
		/*************************************************/
		/*************************************************/
		div#header
		{
			clear:both;
			height: 300px ;
			background: url(./Images/Header.jpg) no-repeat center top ;
			margin: 0 ;
		}
		
		/* On définit la hauteur de la partie header, contenant le titre du site*/
		
		/*************************************************/
		/*************************************************/
		/*				Conteneur Info			 */
		/*			Zone fixe sur le coté gauche		 */
		/*************************************************/
		/*************************************************/
		div#info{
			clear: both;
			position: absolute;
			left:0;
			text-align : center;
			margin-top: 80px;
			margin-left: 25px;
			padding: 10px 10px 10px 10px ;
			width: 170px;
			height:800px;
			background: url(./Images/Info.jpg) no-repeat ;
		
		}
	
		
		/*************************************************/
		/*				Texte Conteneur Info		 */
		/*************************************************/
		div#info h1
		{
			font-size: 1em ;
			color: #407285 ;
		}
		

		/*************************************************/
		/*************************************************/
		/*				Conteneur Menu			 */
		/*************************************************/
		/*************************************************/		
		div#menu,div#menu ul {
			float: left; /*Le menu flottera à gauche*/
			list-style: none;
			line-height: 2; /* Hauteur du menu*/
			background: white; /*Couleur de fond de chaque items du menu*/
			font-weight: bold;
			width: 770px;
			font-size: 1em ;
			padding: 0; /* Marge intérieure*/
			border: solid #407285; /*Couleur de la bordure du menu*/
			border-width: 1px 0; /*Epaisseur de la bordure*/
			margin: 0 0px 0 17px;
		}

		/*************************************************/
		/*				Lien du menu			 */
		/*************************************************/
		div#menu a {
			display: block;
			font-weight: bold ;
			width: 10em;
			w\idth: 10em;
			color: #407285; /*Couleur du texte du menu*/
			text-decoration: none;
			padding: 0.25em 1em;
		}
		
		/*************************************************/
		/*				Element du menu	(champ)	 */
		/*************************************************/
		div#menu li {
			text-align : center;
			float: left; /* On les aligne par la gauche*/
			padding: 0;
			width: 10em;
			w\idth: 10em;
		}
		
		/*************************************************/
		/*				Liste du sous-menu		*/
		/*************************************************/
		div#menu li ul {
			position: absolute;
			left: -999em; /*Invisible par défaut*/
			height: auto;
			width: 16em;
			w\idth: 12em; /*Largeur du sous-menu*/
			font-weight: normal;
			border-width: 0.05em; /*Epaiseur du contour du sous-menu*/
			margin: 0;
			z-index:1; /*permet de spécifier la position d'empilement d'un bloc par rapport aux autres (notion de profondeur)*/
		}

		div#menu li:hover ul {
			left: auto;
		}	
		
		/*************************************************/
		/*				Element du sous-menu(champ)	 */
		/*************************************************/
		div#menu li li {
			padding-right: 1em; /*Marge à droite*/
			text-align : left;
		}

		/*************************************************/
		/*				Lien du sous-menu   	 	*/
		/*************************************************/
		div#menu li ul a {
			width: 15em;
			w\idth: 11em; /*Largeur du texte du sous-menu*/
		}

		/*************************************************/
		/*				Liste du sous-menu (au survol)  */
		/*************************************************/
		div#menu li:hover ul, div#menu li li:hover ul, div#menu li li li:hover ul, div#menu li.sfhover ul, div#menu li li.sfhover ul, div#menu li li li.sfhover ul {
			left: auto;
			overflow: visible;
			background: #EDFEF8; /*Couleur de fond du menu deroulant*/
			width: 15em;
			w\idth: 11em;
		}

		/*************************************************/
		/*				Liste du menu (au survol)  	 */
		/*************************************************/
		div#menu li:hover, div#menu li.sfhover {
			width: 14em;
			w\idth: 10em;
			background: #C0E7E2;
			overflow: visible;
			color : #000;
		}

		/*************************************************/
		/*************************************************/
		/*				Conteneur Contenu		 */
		/*************************************************/
		/*************************************************/
		div#contenu
		{ 
			clear: left;
			min-height: 730px;
			margin-left: 200px;
			margin-top: 80px;
			padding: 0 50px 10px 20px ;
		}
		/*  On ajoute un petit élément décoratif sur le côté
		de la page et on crée un espace à gauche et à droite du contenu */
		
		
		div#contenuFooter {
			height: 65px ;
			margin-right : 50px ;
			background: url(./Images/feuilleHuge.jpg) no-repeat right top;
		}
		
		/*************************************************/
		/*				Texte Titre principale  		 */
		/*************************************************/
		div#contenu h1
		{
			text-align: center ;
			line-height: 30px ;
			font-size: 1.4em ;
			color: #407285 ;
			margin: 25px 0 25px 0;
		}
		
		/* Mise en forme du titre de page, une petite image,
		   on décale le texte en fonction de l'image, on donne un couleur au texte et
		   on met une bordure basse */
		
		/*************************************************/
		/*				Texte Titre principale  		 */
		/*************************************************/
		div#contenu h2
		{
			padding-left: 35px ;
			position: relative; /*cd Pb sous Internet Explorer*/
			line-height: 30px ;
			font-size: 1.4em ;
			background: url(./Images/feuilleBig.jpg) no-repeat left center ;
			color: #407285 ;
			border-bottom: 1px solid #407285 ;
		}
		
		/* Mise en forme du titre de page, une petite image,
		   on décale le texte en fonction de l'image, on donne un couleur au texte et
		   on met une bordure basse */
		
		/*************************************************/
		/*				NU			  		*/
		/*************************************************/
		div#contenu h3
		{
			text-align: center ;
			font-size: 1em ;
			text-indent: 1em ;
			line-height: 1em ;
			color: #407285 ;
		}
		
		/* De même que pour le titre h2, à ceci près qu'on
		 ne donne pas d'image décorative cette fois ci */
		 
		/*************************************************/
		/*				Paragraphe			  	 */
		/*************************************************/
		div#contenu p
		{
			text-align: justify ;
			text-indent: 2em ;
			line-height: 1.7em ;
		}
		
		/* On rend les paragraphes plus propre, alignement justifié,
		 alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */
		
		/*************************************************/
		/*				Lien du contenu		  	*/
		/*************************************************/
		div#contenu a, div#utiles a
		{
			color: #407285 ;
		}
		
		/*************************************************/
		/*				Lien du contenu	 (au survol)	 */
		/*************************************************/
		div#contenu a:hover, div#utiles a:hover
		{
			color: #99CCFF ;
		}
		
		/* On met en forme les liens contenu dans la page */
		
		/*************************************************/
		/*************************************************/
		/*			Conteneur blockquote			 */
		/* 			permet d'inclure une citation		 */
		/*************************************************/
		/*************************************************/
		blockquote
		{
			padding : 12px;
			border: 2px solid #407285 ;
			background: #EDFEF8;
			text-align: justify ;
			width : 500px
		}
		
		/*************************************************/
		/*************************************************/
		/*				Conteneur Footer			*/
		/*				Contient le pied de page		*/
		/*************************************************/
		/*************************************************/
		div#footer
		{
			height: 45px ;
			margin: 20px ;
			padding: 20px ;
			margin-top: 0px;
			background: url(./Images/Footer.jpg) no-repeat right top ;
			color: #407285 ;
			text-align : center;
		}
		/* Mise en forme de la partie pied de page, rien d'extra-ordinaire */
		
		/*************************************************/
		/*************************************************/
		/*			Conteneur FooterPlan			 */
		/*			Contient le plan du site			 */
		/*************************************************/
		/*************************************************/
		div#footerPlan  {
			margin : 20px 0 20px 0;
		}
		
		div#footerPlan a {
			width: 8em;
			font-weight: bold ;
			w\idth: 10em;
			color: #407285; /*Couleur du texte du menu*/
			text-decoration: none;
			padding: 0.25em 2em;
		}
		
		/*************************************************/
		/*************************************************/
		/*			Propriétés du tableau			*/
		/*			sous forme de liste			*/
		/*************************************************/
		/*************************************************/
		div#contenu caption /* Titre du tableau */
		{
		   margin: auto; /* Centre le titre du tableau */
		   font-family: Arial, Times, "Times New Roman", serif;
		   font-weight: bold;
		   font-size: 1.2em;
		   color: #407285;
		   margin-bottom: 20px; /* Pour éviter que le titre ne soit trop collé au tableau en-dessous */
		}

		.tableListe /* Le tableau en lui-même */
		{
		   margin: 0 10px 0 10px; /* Centre le tableau */
		   border: 2px solid #407285; /* Bordure du tableau avec effet 3D (outset) */
		   border-collapse: collapse; /* Colle les bordures entre elles */
		}

		.thListe /* Les cellules d'en-tête */
		{
		   background-color: #C0E7E2 ;
		   color: #407285;
		   padding: 0 10px 0 10px;
		   font-size: 1em;
		   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
		}

		.tdListe /* Les cellules normales */
		{
		   border: 1px solid #407285;
		   font-size: 0.8em;
		   font-family: Arial, "Trebuchet MS", Times, "Times New Roman", serif;
		   text-align: center; /* Tous les textes des cellules seront centrés*/
		   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
		}
		
		/*************************************************/
		/*************************************************/
		/*			Propriétés du tableau simple		*/
		/*************************************************/
		/*************************************************/
		
		.tableSimple /* Le tableau en lui-même */
		{
			horizontal-align:center;
			margin: 10px 25px 10px 25px; /* Centre le tableau */
			border-collapse: collapse; /* Colle les bordures entre elles */
		}

		.tdSimple/* Les cellules normales */
		{
		   vertical-align : middle;
		   font-size: 0.8em;
		   font-family: Arial, "Trebuchet MS", Times, "Times New Roman", serif;
		   text-align: center; /* Tous les textes des cellules seront centrés*/
		   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
		}
		
		/*************************************************/
		/*************************************************/
		/*		Propriétés du formulaire de conatct		*/
		/*************************************************/
		/*************************************************/
		div#contenu input, textarea
		{
		   font-family: "Times New Roman", Times, serif; /* On modifie la police du texte tapé l'intérieur des champs */
		   wrap : soft;
		   /*text-align :center;*/
		}
		 
		div#contenu input:focus, div#contenu textarea:focus /* Quand le curseur est sur un champ (ne marche pas sur IE) */
		{
		   background-color: #EDFEF8;
		}
		 
		div#contenu label
		{
		   color: black; /* Colorer en bleu tous les labels (bah oui, pourquoi pas en bleu ?) */
		}
		 
		div#contenu legend /* On met un peu plus en valeur les titres des fieldset */
		{
		   font-family: Arial, "Arial Black", Georgia, "Times New Roman", Times, serif;
		   color: #407285;
		   font-weight: bold;
		}
		 
		div#contenu fieldset
		{
			margin: 15px 50px 25px 50px; /* Une marge pour séparer les fieldset */
			background-color: #C0E7E2;
			text-align : middle;
			color: #407285;
		}
		
		
		/*************************************************/
		/*************************************************/
		/*		Image flottante à droite				*/
		/*************************************************/
		/*************************************************/
		.imgFloatRight
		{
		   float: right;
		   margin: 10px 10px 10px 10px ;
		}



		
		</style>