body {
	margin: 0 100px ; // marges haute et basse
	padding: 0 ; //marges droite et gauche
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #CCCCFF;
}

font#liste {
	color: #FF0000;
	font-size: 22px;
}

table#liste {
	background: #FFFFFF;
}

table#comm {
	background: #CCCCFF;
}

font {
	font-weight: bold;
	color: #FF0000;
}

font#conseil {
	font-weight: bold;
	color: #FF0000;
}

body#popup {
	margin: 10px 10px ;
	background: #CCCCFF ;
}

body#popup h2 {
	font-size: 35px ;
	font-family: TIRED TERRORIST;
	color: #458FCB ;
	border-bottom: 1px solid #458FCB ;
}

body#popup li {
	list-style: none;
}

body#popup a
{
	font-weight: bold ;
	color: #0000AA;
}

popup#popup a:hover
{
	color: #FFFFFF;
}

div#conteneur
{
	width: 770px ; // largeur de la division centrale
	margin: 0 0 ; // centrer les éléments de type block
	text-align: left ; // rétablir l'alignement à gauche
	background: #FFFFFF ;
}

h1#header
{	
	font: 50px "TIRED TERRORIST", helvetica, sans-serif ;
	color: #FF0000;
	height: 258px ;
	background: url(../haine.jpg) no-repeat left top;
}

h1#header a
{
	width: 400px ;
	height: 70px ;
	display: block ;
	background: url(title.gif) no-repeat ;
	position: relative ;
	left: 350px ;
	top: 15px ;
	text-indent: -5000px ;
}

ul#liste
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#liste li a
{
	color: #458FCB;
}

ul#liste li a:hover
{
	color: #000099;
}

ul#menu
{
	height: 25px ;
	margin: 0 ;
	padding: 0 ;
	background: url(../bg_menu.jpg) repeat-x 0 0 ;
	list-style-type: none ;
	border-bottom: 1px solid #CCCCFF ;
	border-top: 1px solid #CCCCFF ;
}

ul#menu li
{
	float: left ;
	text-align: center ;
}

ul#menu li a
{
	width: 110px ;
	line-height: 25px ;
	font-size: 13px ;
	font-family: Comic Sans MS;
	font-weight: bold ;
	letter-spacing: 1px ;
	color: #555555 ;
	display: block ;
	text-decoration: none ;
	
}/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */

ul#menu li a:hover
{
	color: #222222 ;
	background: url(../bg_menu2.jpg) repeat-x 0 0 ;
}

div#contenu
{
	padding: 0 30px 0 100px ;
	margin: 0 ;
	background: #FFFFFF ;
}

div#contenu h2
{
	padding-left: 0px ;
	line-height: 35px ;
	font-size: 45px ;
	color: #458FCB;
	font-family: TIRED TERRORIST;
	border-bottom: 1px solid #458FCB ;
}

div#contenu h3
{
	margin-left: 10px ;
	padding-left: 10px ;
	color: #458FCB ;
}


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 */

div#contenu a
{
	color: #458FCB ;
	font-weight: bold;
	margin: 0 ;
	padding: 0 ;
}

div#contenu a:hover
{
	color: #000088;
}

p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 80px ;
	text-align: right ;
	color: #458FCB ;
}

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 */

* html pre
{
	width: 636px ;
}

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 ;
}