body,html
{
	background-image:url(images/fond_rouge_bis.jpg); /* elle est belle l'image, hein ? */
	background-attachment:fixed; /* pour que ça ne bouge pô */
	background-position:center; /* on centre l'image, c'est mieux */
	height:100%;
	overflow:visible; /* tout visible, force l'apparition de barres de défilement */
}


div#conteneur /* conteneur des autres blocs */
{
	position:relative; /*  Si on met en absolute, c'est tout qui part en bijous de famille à gauche */
	width:900px; /* largeur fixe et les margin auto permet de centrer la page et les bloc inclus dedans */
	min-height:100%; /* hauteur fait au minimum la hauteur de l'écran, mais s'agrandit lorsque la hauteur cumulée des blocs est importante. En principe...mais là, ça déconne un peu : ça ne marche carrément pas !!!!!! */
	margin-left:auto;
	margin-right:auto;
	margin-top:0; /* en principe, pas de marge en haut mais il y a quant même un espace entre le haut de la page et le haut de l'écran. Les padding ne changent rien, rien de rien, non, je ne regrette rien...oups */
	margin-bottom:0;
	overflow:hidden; /* le bas de la page reste bien au bas de l'écran. Sinon, il y a un espace qui apparaît entre le pied de page et la bas de l'écran */
}	

div#en_tete /* ensemble de l'en tête */
{	
   z-index:11; /* s'afiche par dessus le corps mais en dessous du menu */
   background-image:url(images/en_tete_complet_bis.JPG); /* image l'en tête */
   background-position:top; /* l'image de fond est positionnée sur le haut sinon, on ne voit pas la tête des gens...*/
   border-style: none;
   position:fixed;
   width: 900px; /*largeur fixe pour que l'image soit toute seule */
   height:95px; /* hauteur fixe */
   margin-right:auto;
   margin-left:auto;
   margin-top:0; /* évite le risque de fusion des marges */
   padding:auto;
   top:0; /* position en haut de page */
}

div#menu_deroulant /* ensemble du menu et là, ça marche*/
{
	z-index:10; /* indique le bloc qui apparaît par dessus les autres, par ordre de n° */
	border-style:none;
	position:fixed; /* le menu est toujours visible comme ça mais internet explorer 6  ne prend par en charge :( */
	background-color:#000000; /* fond du menu en noir */
	width:900px; /* largeur de la page, comme ça, on évite les risques de décalage */
	margin-left:auto;
	margin-right:auto;
	padding:auto;
	top:95px; /* se colle en dessous de l'en tête */
}

#menu_deroulant /* Toutes les listes */     
{
        padding :0; /*  pas de marge intérieure */
        margin :0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu_deroulant a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type bloc */
        padding : 1; /*  marge intérieure de 1*/
        background-color:#330000; /* couleur de fond */        
        color : #fff; /* couleur du texte */
		font-size:16px; /* taille de la police dans le menu et sous menus */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width :149px; /* largeur des cellules du menu*/
		list-style: none;
}

#menu_deroulant li /* Elements des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
		list-style:none;
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu_deroulant li
{
        border-right: 1px solid ; /* on met une bordure transparente à droite de chaque élément */
}

#menu_deroulant li ul/* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 143px; /* Largeur des sous-listes */
		border-top:1px solid ; 
		border-right: 1px solid ;
        left: -999em; /* Hop, on envoie loin du champ de vision */
}

#menu_deroulant li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu_deroulant li ul li                
{
        border-top : 1px solid ; /* on met une bordure transparente en haut de chaque élément */
}

#menu_deroulant li li ul/* sous-sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 143px; /* Largeur des sous-listes */
		border-top:1px solid ; /*donne plus de transparence aux menus ( c'est plus joli :) )*/
		border-right: 1px solid ;
        left: -999em; /* Hop, on envoie loin du champ de vision */
}

#menu_deroulant li ul /*éléments sous liste 2ème niveau */
{
        margin :0 ; /* les sous-listes restent en dessous */ 
		padding:0px;
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left : 1px solid #FFF; /* Petite bordure à gauche pour ne pas coller ... */      
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu_deroulant li ul ul              
{
        border-left: 1px solid  ; /* on met une bordure transparente sur la gauche de chaque élément */
}

#menu_deroulant a:hover /* Lorsque la souris passe sur un des liens */    
{
	background-color:#993333; /* ...et le fond en rouge bordeaux (transparent, c'est illisible avec le texte en dessous, dommage parce c'était jooooolliieeuu */
}

#menu_deroulant li:hover ul ul, #menu_deroulant li.sfhover ul ul /* sous sous liste lorsque la souris passe sur une sous liste */
{
	left:-999em /* on expédie les sous sous listes en dehors du champ de vision */
}
 
#menu_deroulant li:hover ul, #menu_deroulant li li:hover ul, #menu_deroulant li.sfhover ul, #menu_deroulant li li.sfhover ul/* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-listes lorsque la souris passe sur un élément de sous-liste */
{
        left:auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}

	
div#corps /* ensemble du corps principal */
{
	border-style: none;
	position:relative;
	background:url(images/fond_corps.png); /* image de fond pour la partie centrale */
	top:90px;
	min-height:100%; /* règle la hauteur de la page à 100% minimum mais ça déconne:la hauteur se règle sur le texte uniquement. c'est gonflant */
	width:100%; /* largeur fixe égale à la largeur du conteneur ie page, là, ça marche */
	margin: 0 auto; /* évite les risques de fusions des marges */
	padding-top:2em; /* évite au texte de coller au menu déroulant */
	padding-bottom:24em; /* évite que le pré pied de page soit par dessus le texte */
}

div#corps_bonjour /* page d'accueil */

{
	height:600px; /* hauteur fixe du corps pour la page d'accueil*/
}

div#news
{
	float:right; /* le texte à droite */
	width: 32%; /* largeur du corps fixe */
	position:relative;
	top:0%;
	right: 0%;	
	border:medium solid black;
}

div#texte_accueil
{
	position:relative;
	top:2%;
	width:80%;
	left:10%;
}

div#JCD /* coordonnées Jean Charles */
	{
		width:50%; /* largeur du bloc fixe */
		position:relative;
		top:55%; /* le bloc se situe en bas du corps de la page d'accueil */
		left:25%; /* centre le bloc dans la page */
	}	

div#image_fond /* image de la page d'accueil */
{
	background-image:url(images/accueil_bis.png);
	background-attachment:visible;
	background-repeat:repeat-y;
}

div#pre_pied
{
	border-style:none;
	background-image:url(images/fond_pre_pied.GIF);/* porphyrine en transparence, permet de voir l'image de fond en dessous. C'est joli, non ?*/
	background-position:center;
	position:absolute; /* on positionne le pre pied de page par rapport au bloc précedent */
	width:100%; /* largeur égale à celle du bloc page */
	height:245px; 
	margin:0 0 0 0 ; /*pas de marge */
	bottom:40px; /* reste collé sur au dessus du pied de page */
}

div#pied_de_page /* pied de page, comme son nom l'indique */
{
   background: black; /* fond noir parce que c'est comme ça et puis c'est tout */
   border-style:none;
   position:absolute; /* permet de placer le pied de page par rapport au coin gauche de la page */
   width:900px; /* largeur fixe à 900 px */
   left:0;
   height:40px; /* en principe, règle la hauteur du pied de page mais là, ça déconne :( */
   bottom:0; /* le pied de page reste toujours en bas de la page ou de l'écran suivant la taille des textes*/
}