body /* On travaille sur la balise body, donc sur TOUTE la page */
{
   width: 900px;
   background-color: #DDD; /* Le fond de la page sera gris clair */
   background-repeat:no-repeat;
   background-position:50% 102px;
   margin: auto; /* On peut donc demander à ce que le block soit centré avec "auto" */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   font-size:medium;
}

#en_tete
{
   width: 903px;
   height: 93px;
   background-image:url(images/banniere.jpg);
   background-repeat: no-repeat;
   margin-bottom: 10px;
   background-position:50% 50%;
}

#twitter_div
{
  font-family: Arial, Helvetica, sans-serif;
  font-size:small;
}

#twitter_div h3
{
	font-variant:small-caps;
}



a {
	text-decoration: none;
	color:#FFF;
	font-weight:bold;
}

a:hover /* Quand le visiteur pointe sur le lien */
{
}

a img /* Toutes les images contenues dans un lien */
{
   border: none; /* Pas de bordure */
}


p {
font-family: Arial, Helvetica, sans-serif;
}

#menu2 {
width: 220px;
font-family: Arial, Helvetica, sans-serif;
font-variant: small-caps;
}

/* fond blanc pour le menu */ 
#menu2 a {
	color:#FFF
}

#menu2 ul {
padding: 0; width: 220px; border:1px solid; margin:0px; background: #C00
}

/* fond different au survol de la souris pour les sous menu et les "basiques"*/ 
#menu2 li:hover {
background: #666
}
#menu2 li.sousmenu:hover {
background: #666;
}

/* Rajout d'une petite fleche pour les sous menu */ 
#menu2 li.sousmenu {
background: url(fleche.gif) 95% 50% no-repeat;
}

#menu2 ul li {
position:relative; 
list-style: none; 
border-bottom:1px solid;
}

#menu2 ul ul {
position: absolute; 
top: -1px; left: 220px; 
display:none;
}

/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 */ 
#menu2 li a {
text-decoration: none; 
padding: 4px 0 4px 8px; 
display:block; 
border-left: 8px solid #BBB; 
width:204px;
}

#menu2 ul.niveau1 li.sousmenu:hover ul.niveau2 {
display:block;
}

/* la bordure de chaque hauteur a une couleure de survol*/ 
#menu2 li a:hover {
border-left-color: #C00;
}

#menu2 ul ul li a:hover {
	border-left-color: #333;
}

#menu2 ul ul ul li a:hover {
	border-left-color: #FFF;
}


#menu {
width: 150px;
font-family: Arial, Helvetica, sans-serif;
font-variant: small-caps;
font-size:small;
}

/* fond blanc pour le menu */ 
#menu a {
	color:#FFF
}

#menu ul {
padding: 0; width: 150px; border:1px solid; margin:0px; background: #C00
}

/* fond different au survol de la souris pour les sous menu et les "basiques"*/ 
#menu li:hover {
background: #666
}
#menu li.sousmenu:hover {
background: #666;
}

/* Rajout d'une petite fleche pour les sous menu */ 
#menu li.sousmenu {
background: url(fleche.gif) 95% 50% no-repeat;
}

#menu ul li {
position:relative; 
list-style: none; 
border-bottom:1px solid;
}

#menu ul ul {
position: absolute; 
top: -1px; left: 150px; 
display:none;
}

/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 */ 
#menu li a {
text-decoration: none; 
padding: 4px 0 4px 8px; 
display:block; 
border-left: 8px solid #BBB; 
width:134px;
}

#menu ul.niveau1 li.sousmenu:hover ul.niveau2 {
display:block;
}

/* la bordure de chaque hauteur a une couleure de survol*/ 
#menu li a:hover {
border-left-color: #C00;
}

#menu ul ul li a:hover {
	border-left-color: #333;
}

#menu ul ul ul li a:hover {
	border-left-color: #FFF;
}

#pied_de_page
{
   width: 901px;
   height: 31px;
   background-image:url(images/bannierebas.jpg);
   background-repeat: no-repeat;
   margin-bottom: 10px;
    background-position:50% 50%;
   
}