/* ----------------------------------------------------------- */
/* Toute la page
/* ----------------------------------------------------------- */

body {
	/* position */
	
	/* dimensions */
	
	/* marges */
	
	/* garnitures */
	font: 12px Arial, Helvetica, sans-serif;
	color: #666666;
	background: url(../images/degrade.jpg) repeat-x;
}

/* ----------------------------------------------------------- */
/* Les blocs principaux
/* ----------------------------------------------------------- */

#tout {
	/* position */
	
	/* dimensions */
	width: 775px;
	
	/* marges */
	margin: 0 auto;
		/*
		TRUC IMPORTANT ET CLASSIQUE pour centrer un bloc horizontalement dans la fenêtre d'un browser
	
		Lire les valeurs dans cet ordre :
		0 : top
		auto : right,
		0 : bottom
		auto : left
		
		C'est le raccourci de : 
		margin-left : auto;
		margin-right : auto;
		
		*/
	
	/* garnitures */
	border: 1px solid #CC6600;
	background: #FFFFFF;
}

#haut {
	/* position */
	
	/* dimensions */
	
	/* marges */
	
	/* garnitures */
}

#milieu {
	/* position */
	
	/* dimensions */
	
	/* marges */
	
	/* garnitures */
}

#bas {
	/* position */
	clear: both;
		/* Annule les floatings imposés dans les divs précédents, en particulier le float left du bloc "gauche"
		
	/* dimensions */
	
	/* marges */
	padding: 0.5em;
		/*
		ASTUCE : Cette valeur ne fonctionne que si le texte à l'intérieur de ce bloc est un <SPAN> et non un <P> !!!
		Donc il faut que vous modifier dans l'XHTML le <p> en <span> pour le contenu textuel, sinon vous n'arriverez jamais à contrôler les marges, paddings ou centrages
		En effet, c'est la faute des valeurs par défaut de marges et de paddings programmés par les développeurs pour le <p>
		*/	
	padding-left: 200px;
	
	/* garnitures */
	color: #990000;
	background: #FFCC66;
}
#bas span {
	font-style: italic;
	letter-spacing: 0.2em;
}

#gauche {
	/* position */
	float: left;
		/*
		ASTUCE FONDAMENTALE pour placer les blocs horizontalement entre eux.
		Quand on utilise cette propriété, il faut toujours considérer 2 blocs entre eux.
		La propriété signifie :
		Le bloc où cette propriété est définie va "flotter à gauche" du bloc suivant.
		*/
		
	/* dimensions */
	width: 135px;
		
	/* marges */
/*	margin-left: 10px;	
	padding-top: 1em;	*/
	
	/* garnitures */
}

#droite {
	/* position */
		/*
		RIEN ici,
		car en fixant le float à gauche pour le bloc précédent,
		ce bloc-ci suivant va se mettre automatiquement à droite du précédent
		*/
	
	/* dimensions */
		/*
		RIEN ici,
		car la largeur va prendre la place restante
		*/		
	
	/* marges */
	margin: 0 2em 0 200px;
		/*
		ASTUCE :
		Pour que le texte qui serait fort long ne vienne "habiller" le bas de la navigation, 
		il suffit de fixer la marge  gauche de ce bloc,
		par exemple à 200px
		*/
	
	/* garnitures */
}

/* ----------------------------------------------------------- */
/* Le bloc de la navigation
/* ----------------------------------------------------------- */
		
#navi {
	/* position */
	
	/* dimensions */
	width: 125px; 
		
	/* marges */
	margin: 3em 0 0 0;
	padding: 0; 	
	
	/* garnitures */
	font-weight: bold;
	
}


#navi li {
	/* garnitures */
	list-style: none;
	padding: 0.5em;
}

#navi li a {
	/* position */
	/*display: block;*/
	/*
		ASTUCE :
		Permet de faire un rollover sur toute la surface du rectangle !
		Si cette propriété n'est pas définie, le rollover ne se ferait que sur le mot du menu
			
	/* dimensions */
	/*width: 100%;*/
		/*
		ASTUCE pour rendre les browsers compatibles :
		Pour être sûr que la largeur du rectangle soit bien au maximum dans le bloc list
		*/
	
	/* marges */
	/*padding: 2px 2px 2px 0.5em;*/
		/*
		ASTUCE :
		Pour garder de la place à pour le petit rectangle de couleur plus claire à gauche du bouton de la navigation,
		on décale le texte de 0.5em
		*/
	
	/* garnitures */
	text-decoration: none;
	color: #FF6600;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #FF6600;
	padding-left: 10px;
}


#navi li a:hover {
	/* position */
	
	/* dimensions */
	
	/* marges */
	
	/* garnitures */
	border-left: 10px solid #FFCC00;
	color: #990000;
}


/* ----------------------------------------------------------- */
/* Le bloc de droite
/* ----------------------------------------------------------- */

h1 {
	/* position */
	
	/* dimensions */
	
	/* marges */
	
	/* garnitures */
	color: #990000;
	font-size: 24px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #FFCC00;
}

.nom {
	font-weight: bold;
	color: #FF6600;
}