html, body { margin: 0; padding: 0; color: #404040; font-family: verdana; font-size: 11px;}

form, input, select, textarea { margin: 0; padding: 0; font-family: verdana; font-size: 11px;}
div, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, fieldset { margin: 0; padding: 0; font-size:11px;}

a {color: #464646;}
a:hover {background-color: #464646; color: #aaa;}

body
{
	background-image: url("../images/bg.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
}

h3
{
	color: #000;
	text-align: center;
	font-size: 15px;
	font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

/* L'en-tête */
#page
{
	position:relative;
	background:url('../images/page_bot.gif') no-repeat bottom center;
	padding-bottom:30px;
}

/* L'en-tête */
#container
{
	background: url("../images/degrade.png") repeat-x;

}

#content
{
	width: 950px;
	margin: 0 auto;
}

#header
{
	width: 946px;
	height: 100px;
	margin: auto;
	background: url("../images/logo.png") no-repeat top left;
}

/* Le menu */
#menu
{
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	float: left;
	width: 150px;
}

.pub
{
	width: 125px;
	height: 125px;
	margin: auto;
	margin-bottom: 20px;
}

.element_menu
{
	margin-bottom: 10px;
}

.top
{
	width: 150px;
	margin: auto;
	background: url("../images/box.png") no-repeat;
	height: 30px;
}

.middle
{
	width: 146px;
	margin: auto;
	padding: 10px 0px 10px 0px;
	background-color: #fff;
	border: 2px solid black;
	border-top: none;
	border-bottom: none;
}

.bottom
{
	margin: 0px;
	height: 30px;
	background: url("../images/box_bot.png") no-repeat;
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
	list-style-image: url("../images/puce.gif"); /* On change l'apparence des puces */
	padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
	padding-left: 23px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
	margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
	color: #464646;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
	background-color: #B3B3B3;
	color: black;
}

#top_menu
{
	background-color: #6e321a;
}


ul#top_menu
{
	width: 750px ;
	height: 89px;
	margin: 0 auto;
	margin-top: 0px;
	padding: 0px;
	list-style-type: none ;
}
/* On donne une hauteur au menu, correspondant a
 la taille de l'image utilisée en fond, 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; */
ul#top_menu li
{
	float: left;
	text-align: center;
}/* On rend les li en flottant pour pouvoir les
 afficher horizontalement, on cache les puces, et on centre le texte */

ul#top_menu li a
{
	width: 150px ;
	height: 89px;
	line-height: 89px;
	background-color: #c5c;
	background: url(../images/button.png) repeat-x 0px 0px;
	margin: 0px;
	padding: 0px;
	font-size: 15px; ;
	font-weight: bold ;
/*	letter-spacing: 2px ;*/
	color: #000;
	display: block ;
	text-decoration: none ;
	text-align: center;
	/*border-right: 2px solid #dea ;*/
}/* 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#top_menu li a:hover, ul#top_menu li.selected a
{
	color: #6e321a;
	background: url(../images/button.png) repeat-x 0 -89px ;
}/* 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 */

#main_container
{
	margin-left: 165px; /* 165 instead of 170 because of ie6*/
	width: 780px;
	margin-bottom: 20px;
	position:relative;
	background:url('../images/bg_bot_right.jpg') no-repeat bottom right;
	/*background-color: #fff; /* Une couleur de fond pour le corps */
	background-color: #fff;
}
#top
{
	margin-left: 165px; /* 165 instead of 170 because of ie6*/
	width: 780px;
	height: 30px;
	background: url('../images/main_top.png') no-repeat;
}

#corps
{
	padding: 0px 5px 0px 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
	/*padding-top: 0px;*/
	color: #464646;
	border: 2px solid black;
	border-top: none;
}

#corps h1 /* Tous les titres h1 du corps */
{
	height: 30px;
	color: #000;
	background: url("../images/h1_title.png") no-repeat center center;
	text-align: center;
	font-size: 22px;
	font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2 /* Tous les titres h2 du corps */
{
	height: 30px;
	background-image: url("../images/titre.png"); /* Une petite image de fond sur les titres h2 */
	background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
	padding-left: 30px;
	color: #B3B3B3;
	text-align: left;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
#pied_de_page
{
	padding: 5px;
	text-align: center;
	color: #B3B3B3;
	position:relative;
	background:url('../images/bg_top_right.jpg') no-repeat top right #fff;
	border: 2px solid black;
}