@charset "UTF-8";

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

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

/* ----------------------------------------------------------- */
/* Le bloc principal
/* ----------------------------------------------------------- */

#tout {
	/* position */
	position : relative;
	
	/* dimensions */
	width: 775px;
	
	/* marges */
	margin: 20px 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 */
	background: #FFFFFF; 
	
	border: 1px solid #CC6600;
	
	-moz-border-top-left-radius: 20px;
	-webkit-top-left-radius: 20px;
	-o-top-left-radius: 20px;
	border-top-left-radius: 20px;
	
	-moz-border-top-right-radius: 20px;
	-webkit-top-right-radius: 20px;
	-o-top-right-radius: 20px;
	border-top-right-radius: 20px;
	
	box-shadow: 3px 3px 30px 3px #7A3A2D;
}

/* ----------------------------------------------------------- */
/* Le bloc d'entête
/* ----------------------------------------------------------- */

header {
	/* position */
	position: relative;
	
	/* dimensions */
	height: 105px;
		
	/* marges */
	
	/* garnitures */
	background: url(../images/bandeau.jpg) no-repeat;
	
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-o-top-border-radius: 20px;
	border-top-radius: 20px;
}

#langues {
	/* position */
	position: absolute;
	right: 20px;
	
	/* dimensions */
	width: 80px;
	height: 20px;
	
	/* marges */
	
	/* garnitures */
	background: yellow;
	top: 0;
	background-color: #FEDEB8;
}

#langues li {
	/* position */
	display: inline;
	
	/* dimensions */
	
	/* marges */
	line-height: 20px;
	padding-left: 1.2em;
	
	/* garnitures */
	list-style: none;	
	
	/* garnitures */	
}

#langues li a {
	/* garnitures */
	text-decoration: none;
	color: #FF6600;
}

#langues li a:hover {
	/* garnitures */
	color: #C30 ;
}

/* ----------------------------------------------------------- */
/* Le bloc du côté
/* ----------------------------------------------------------- */

#cote {
	/* position */
	float:left;
	
	/* dimensions */
	width: 125px;
	
	/* marges */
	margin: 2em;
	padding: 0;
}

#menus {
	/* position */
		
	/* dimensions */
	width: 135px;
	
	/* marges */
	margin-bottom: 2em;
	
	/* garnitures */
	font-weight: bold;
}

#menus li {
	/* marges */
	padding: .5em;
	
	/* garnitures */
	list-style: none;
	
}

#menus 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-left: 10px;
		/*
		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;	
}

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

aside {
	/* position */
	
	/* dimensions */
	
	/* marges */
	padding: 5px;
	
	/* garnitures */
}

/* ----------------------------------------------------------- */
/* Le bloc de contenu
/* ----------------------------------------------------------- */

#contenu {
	/* 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 */
}

article {
	/* position */
	
	/* dimensions */
	
	/* marges */
	
	/* garnitures */
}

section {
	/* position */
	
	/* dimensions */
	
	/* marges */
	margin-bottom: 1em;
	
	/* garnitures */
}

p {
	/* position */
	
	/* dimensions */
	
	/* marges */
	margin-bottom: .5em;
	
	/* garnitures */
}

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

h2 {
	/* position */
	
	/* dimensions */
	
	/* marges */
	margin-top: 1em;
	margin-bottom: .3em;
	
	/* garnitures */
	color: #990000;
	font-size: 1.5em;
}

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

#belgique a {
	/* position */
	display: block;
		/* Il faut absolument ajouter ce display, car une balise "a" est par défaut "inline" ! */
	
	/* dimensions */
	width: 131px;
	height: 110px;
	
	/* marges */
		
	/* garnitures */
	background: url(../images/belgium.jpg) no-repeat;
}

#belgique a:hover {
	/* position */
	
	/* dimensions */
	
	/* marges */
		
	/* garnitures */
	background: url(../images/belgium_halo.jpg) no-repeat;
}

/* ----------------------------------------------------------- */
/* Le bloc de pied
/* ----------------------------------------------------------- */

footer {
	/* position */
	clear: both;
	/* Annule les floatings imposés dans les divs précédents, en particulier le float left du bloc "gauche"
		
	/* dimensions */
	
	/* marges */
	
	/*
		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;
}

footer p {
	/* marges */
	margin-bottom: 0;
		/* Il faut remettre ce margin-bottom, car on a défini plus haut un sélecteur p avec un margin-bottom différent ! */
	line-height: 2em;
		/* Ceci est une astuce pour pouvoir centrer le texte en hauteur */	
	
	/* garnitures */
	font-style: italic;
	letter-spacing: .2em;
}