/*Site Réalisé par Marc NACHIN - Développeur Multimédia à l'office de toursime de Sixt fer à Cheval*/

body /*configuation du body*/
{
	margin: 10px 0 ; /* Marge externe - On définit les marges haute et basse à 10px et les marges droite et gauche à 0 */
	padding: 0 ; /* Marge interne - On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
	text-align: center ; /* 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 */
	font: 0.8em "Century Gothic", helvetica, sans-serif ; /* On a ajouté de quoi mettre une police de caractère et une couleur de fond */
    background: #ddd;

}

#header /*configuration de la tête du site*/
{
	height: 223px ; /* On définit la hauteur de la partie header, contenant le titre du site */
	background:    url(image/bandeau5.jpg) no-repeat left top;
	margin: 0 ;
}

ul#menu  /*configuration des listes contenu dans le menu*/
{
	height: 25px ; /* On donne une hauteur au menu correspondant a la taille de l'image utilisée en fond*/
	margin: 0 ; 
	padding-left: 8px ;
	background:    url(image/fondMenu4.jpg) repeat-x 0 -25px ; /*on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel */
	list-style-type: none ;
	border-top: 2px solid #669966;
	border-bottom: 2px solid #669966;
}

ul#menu li /*configuration des lignes des listes contenu dans le menu*/ 
{
	float: left ; /* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces*/
	text-align: center ; /*on centre le texte */
	align: center ;
	/*border-right: 2px solid #696 ; /*bordure*/
}

ul#menu li a /* configuration des liens des lignes de la liste du menu*/
{ 
	line-height: 25px ; /*hauteur de ligne*/
	font-size: 1.2em ; /*taille de police*/
	font-weight: bold ; /*graisse de police*/
	letter-spacing: 2px ; /*espacement des lettres*/
	color: #363 ; /*couleur*/
	display: block ; /*Nous pouvons dimensionner les a grâce à la propriété display: block*/
	/*width: 100% ;/* largeur */ 
	padding-left : 9px ; 
	padding-right : 9px ;
	text-decoration: none ; /*decoration du texte*/
	/*border: 2px solid #000 ; /*bordure*/
}

ul#menu li a:hover /* Et pour finir on décale l'image de fond au passage de la souris pour laisser aparaître l'état survolé de l'image, voir le tutoriel sur les roll over pour plus de détails */
{
	background:    url(image/fondMenu4.jpg) repeat-x 0 0 ;
	color: #DEE9CB;
}

#conteneur /* configuration du conteneur principal du site (qui englobe tout)*/
{
	width: 770px ; /* On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels */
	margin: 0 auto ; /* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type block (comme les divisions), nous centrons donc cette division */
	text-align: left ; /* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */
	border: 1px solid #669966 ; /* Une bordure autour de l'ensemble de la page, et couleur blanche pour le fond de celle-ci */
	background: #fff ;
}

#contenu /* configuartion de la partie princiaple du site*/
{
    /*height: 400;*/
	padding: 0 30px 0 30px ;
	/*background:    url(image/titre.jpg) no-repeat 15px 15px ; /* 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 */
}

#contenu h2 /* configuration de titre de 1er niveau pour la partie principale du site*/
{
	padding-left: 60px ; /* 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 */
	line-height: 20px ;
	font-size: 1.4em ;
	background:    url(image/fleur3.jpg) no-repeat left bottom ;
	color: #363 ;
	border-bottom: 1px solid #696 ;
}

#contenu h3 /* configuration de titre de 2eme niveau pour la partie principale du site*/
{
	margin-left: 15px ; /* De même que pour le titre h2, à ceci près qu'on ne donne pas d'image décorative cette fois ci */
	padding-left: 5px ;
	border-bottom: 1px solid #9b2 ;
	border-left: 3px solid #9b2 ;
	color: #9b2 ;
}

#contenu p /* configuration des paragraphe pour la partie principale du site*/
{
	text-align: justify ; /* On rend les paragraphes plus propre, alignement justifié, alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */
	line-height: 1.6em ;
	font-family: "Arial";
}

#contenu span /* configuration des paragraphe pour la partie principale du site*/
{
	text-align: justify ; /* On rend les paragraphes plus propre, alignement justifié, alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */
	line-height: 1.6em ;
	font-family: "Arial";
}


#contenu ul /* On met en forme les liens contenu dans la partie principale du site NORMAL */
{	
	text-align: justify ; /* On rend les paragraphes plus propre, alignement justifié, alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */
	text-indent: 2em ;
	line-height: 1.6em ;
	font-family: "Arial";
}

#contenu a /* On met en forme les liens contenu dans la partie principale du site NORMAL */
{
	color: #363 ; 
}

#contenu a:hover /* On met en forme les liens contenu dans la partie principale du site SURVOLE */
{
	color: #AAAAAA ;
}

#contenu table
{
	margin-left: 25px;
	font-family: "Arial";
}

p#footer /* Mise en forme de la partie pied de page, rien d'extra-ordinaire */
{
	line-height: 21px ; /*hauteur de ligne*/
	font-size: 0.9em ; /*taille de police*/
	color: #363 ; /*couleur du txt*/
	background-color: #DDE8CA; /*couleur du fond*/
	text-decoration: none ; /*decoration du texte*/
	text-align: center;
}

p#footer a 
{
	color: #363 ; 
	text-decoration: none ; /*decoration du texte*/
}

.img{
	float: left;
	margin: 4px 10px 0px 0px;
}