/**
** CSS des menus et de la division pricipal des sections.
** Ce Css devrait être utilisé par presque toute les pages du site
**/

/* Section entête de la page */
.sectionEntete {
	background-color: #999999;
	float: left;
	height: 73px;
	width: 575px;
	margin: 0px;
}
/* Le section du menu du haut */
.sectionMenuHaut {
	background-color: #FF9966;
	height: 21px;
	width: 575px;
	float: left;
	background-image: url(/images/menus/boutonsNoirsFull.gif);
	clear: none;
}
/* La section du menu de gauche */
.sectionMenuGauche {
	background-color: #006699;
	height: 1000px;
	width: 195px;
	float: left;
	clear: left;
	margin: 0px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #000000;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #000000;
        border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
/* La section contenue du site */
.sectionContenue {
	height: 556px;
	width: 475px;
	float: left;
	text-align: left;
}
/* La section du menu de droite */
.sectionMenuDroite {
	background-color: #FFFFFF;
	height: 556px;
	width: 103px;
	float: left;
	clear: none;
}

/***************/
/** Les Menus 
/** Chaque menus utilise une seule image
/** Qui contien à la foi, les boutons désactivés
/** et les boutons en rollover.
/** Le truc est l'utilisation de l'image de fond avec sa position décallé
/** pour chaque rollover. Chaque boutons a un Id différent
/***************/

/* Menu du haut */
.menuHaut a {
	margin: 0;
	width: 150px;
	height: 21px;
	float: left;
	display: block;
	text-decoration: none;
	color: #000;
	margin-top: 0px;
     }
/* Change le curseur pour tout les rollover du menu */	 
.menuHaut a:hover {
	cursor: hand;
}

/* Les rollover spécifiques pour chaques menus */
.menuHaut a#qui-sommes-nous:hover {
	background-image: url(/images/menus/boutonsNoirsFull.gif);
	background-position: -590px 0%;
     }
.menuHaut a#services:hover {
	background-image: url(/images/menus/boutonsNoirsFull.gif);
	background-position: -740px 0%;
     }
/* Cas spécial pour changer la largeur de cet élément. Car sinon il cache l'élément suivant */
.menuHaut a#membres {
	width: 100px;
     }	 
.menuHaut a#membres:hover {
	background-image: url(/images/menus/boutonsNoirsFull.gif);
	background-position: -890px 0%;
     }
.menuHaut a#contact:hover {
	background-image: url(/images/menus/boutonsNoirsFull.gif);
	background-position: -990px 0%;
     }	 

/* Pour le menu de gauche il faut un container car le menu n'occuppe pas toute la place */
.menuGauche {
	height: 350px;
	width: 195px;
	float: none;
	clear: none;
	background-image: url(/images/menus/boutonsBleusFull2.gif);
}

/* Bouton de gauche standart */
.menuGaucheBouton a {
	height: 26px;
	width: 193px;
	margin: 0;
	float: left;
	display: compact;
	text-decoration: none;
	margin-top: 0px;
	clear: both;		
}

/* Change le curseur pour tout les rollover du menu */	 
.menuGaucheBouton a:hover {
	cursor: hand;
	background-image: url(/images/menus/boutonsBleusFull2.gif);
}

/* Le premier bouton est plus grand que les autres */
.menuGaucheBouton a#formation {
	height: 30px;
 }
 
/* Les rollover spécifiques pour chaques menus */
.menuGaucheBouton a#formation:hover {
	background-position: 0% -379px;
 }
 .menuGaucheBouton a#calendrier:hover {
	background-position: 0% -409px;
 }
 .menuGaucheBouton a#info-riviere:hover {
	background-position: 0% -435px;
 }
.menuGaucheBouton a#truc:hover {
	background-position: 0% -461px;
 }
.menuGaucheBouton a#album:hover {
	background-position: 0% -487px;
 }
.menuGaucheBouton a#annonces:hover {
	background-position: 0% -513px;
 }
.menuGaucheBouton a#journal:hover {
	background-position: 0% -539px;
 }
 /* Le bounton du journal est aussi plus grand que les autres */
.menuGaucheBouton a#english {
	height : 52px
 }
.menuGaucheBouton a#english:hover {
	background-position: 0% -565px;
 }


.menuDroite {
	background-color: #33CC66;
	height: 435px;
	width: 103px;
	float: left;
	clear: none;
	background-image: url(/images/menus/boutonsCarre.jpg);
}

/* Bouton de gauche standart */
.menuDroiteBouton a {
	height: 101px;
	width: 103px;
	margin: 0;
	float: left;
	margin-top: 0px;
	clear: both;		
}

/* Change le curseur pour tout les rollover du menu */	 
.menuDroiteBouton a:hover {
	cursor: hand;
	background-image: url(/images/menus/boutonsCarre.jpg);
}

/* Le premier bouton est plus grand que les autres */
.menuDroiteBouton a#avantages {
	height: 110px;
 }
 
/* Les rollover spécifiques pour chaques menus */
.menuDroiteBouton a#avantages:hover {
	background-position: 0% -436px;
 }
.menuDroiteBouton a#info-debit:hover {
	background-position: 0% -546px;
 } 
.menuDroiteBouton a#album:hover {
	background-position: 0% -647px;
 }
.menuDroiteBouton a#protection:hover {
	background-position: 0% -748px;
 }