body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #929292 ;
}
/* On a ajouté de quoi mettre une police de caractère et une couleur de fond */

div#conteneur
{
	width: 770px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #525252 ;
	background: #fff ;
}
/* Une bordure autour de l'ensemble de la page,
et couleur blanche pour le fond de celle-ci */

h1#header
{
	height: 120px;
	background: url(images/ban.jpg) no-repeat left top;
}
/* Une image de fond correspondant aux 258 pixels
 de tout à l'heure, attention à bien compresser vos images */
 
h1#header a
{
	width: 400px ;
	height: 70px ;
	display: block ;
	background: url(title.gif) no-repeat ;
	position: relative ;
	left: 350px ;
	top: 15px ;
	text-indent: -5000px ;
}/* On donne les mêmes dimensions au lien, chose
 possible grâce à la propriété display: block ; qui transforme le lien
  en élément de type block, auquel on peut donner des propriétés de taille.
   On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé */
/* Le text-indent négatif est fait pour pouvoir ne
 cacher le texte hors de la page, ce que nous voulons. Ainsi il reste
  exploitable pour les syntèses vocales */
  
#menu ul {
	padding:0 0 0 50px; 
	width:690px; 
	margin:0; 
	list-style:none; height:36px; 
	background:transparent url(images/menu/menu_back.jpg);
	position:relative; 
	z-index:500; 
	font-family:arial, verdana, sans-serif;
}

#menu li.top {display:block; float:left;}
#menu li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#666; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 8px; cursor:pointer;background: url(images/menu/menu_0a.jpg) no-repeat;}
#menu li a.top_link span {float:left; display:block; padding:0 20px 0 10px; height:36px;background:url(images/menu/menu_0b.jpg) right top;}
#menu li a.top_link:hover {color:#000; background: url(images/menu/menu_2a.gif) no-repeat; line-height:25px;}
#menu li a.top_link:hover span {background:url(images/menu/menu_2b.gif) no-repeat right top;}

#menu li:hover > a.top_link {color:#000; background: url(images/menu/menu_2a.gif) no-repeat; line-height:25px;}
#menu li:hover > a.top_link span {background:url(images/menu/menu_2b.gif) no-repeat right top;}

#menu ul li:hover {position:relative; z-index:200;}

#menu li ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#menu ul li ul.sub1 {width:126px;}
#menu ul li ul.sub2 {width:122px;}
#menu ul li ul.sub3 {width:131px;}
#menu ul li ul.sub4 {width:124px;}
#menu ul li ul.sub5 {width:116px;}

#menu ul li:hover ul {left:0; top:35px; background: #f0f0f0; padding:3px; border:1px dotted #525252; border-width:0 2px 2px; white-space:nowrap; height:auto; z-index:300;}
#menu li:hover ul li {display:block; height:20px; position:relative; font-weight:normal; width:auto;}
#menu li:hover ul li a {display:block; font-size:11px; height:20px; line-height:20px; width:auto; padding:0 10px; color:#000; text-decoration:none;}
#menu li:hover ul li a:hover {background:#c72020; color:#fff;}
  

div#contenu
{
	padding: 0 30px 0 100px ;
	background: url(images/bg_page.jpg) no-repeat 15px 15px ;
	min-height:470px;
	color:#000;
	
}
/* 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#contenu h2
{
	padding-left: 30px ;
	line-height: 24px ;
	font-size: 1.4em ;
	background: url(images/Joystick.png) no-repeat left bottom ;
	color: #525252 ;
	border-bottom: 1px solid #b30101 ;
}
/* 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 */

div#contenu h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #525252 ;
	border-left: 3px solid #525252 ;
	color: #b30101 ;
}
/* De même que pour le titre h2, à ceci près qu'on
 ne donne pas d'image décorative cette fois ci */
 
 div#contenu h4
{
	padding-left: 30px ;
	line-height: 24px ;
	font-size: 1.4em ;
	background: url(images/book.png) no-repeat left bottom ;
	color: #525252 ;
	border-bottom: 1px solid #b30101 ;
}
 
 div#contenu h1
{
	padding-left: 30px ;
	line-height: 25px ;
	font-size: 1.4em ;
	background: url(images/meeple.png) no-repeat left bottom ;
	color: #525252 ;
	border-bottom: 1px solid #b30101 ;
}

div#contenu p
{
	text-align: justify ;
	/*text-indent: 2.2em ;*/
	line-height: 0.7em ;
	color:#000;
}
/* On rend les paragraphes plus propre, alignement justifié,
 alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */

div#contenu a
{
	color: #525252 ;
	text-decoration:none;
	
}

div#contenu a:hover
{
	color: #b30101;
	text-decoration: none;
	font-weight: bold;
}
/* On met en forme les liens contenu dans la page */


.tableau td{
color:#000;
text-align:justify;
border-width: 1px;
border-style: dotted;
border-collapse: collapse;
border-color: #525252;
background-color: #f8f8f8;
line-height: 1.6em ;
}

.tableau th{
color:#000;
text-align:justify;
border-width: 1px;
border-style: solid;
border-collapse: collapse;
border-color: #525252;
background-color: #ebd5d5;
line-height: 1.6em ;
}



p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #8a0 ;
}
/* Mise en forme de la partie pied de page, rien d'extra-ordinaire */

pre
{
	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}
/*une couleur de fond, une bordure, la taille de police
 et un léger espace entre le texte et les bords du pre */

pre span
{
	color: #560 ;
}
/* Couleur de texte des éléments compris dans des span
 eux mêmes compris dans un pre */

pre span.comment
{
	color: #b30000 ;
}
/* Couleur différente pour les span.comment, les span
 utilisés pour les commentaires */