body
{
	font: 16px verdana;
	background-image: url("../etape4/images/bg.jpg");
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
}

#menu
{
	width: 644px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}

#menu li
{
	width: 200px;
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
}

#menu .sousMenu
{
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}

#menu .sousMenu li
{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 200px;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}


/* 
	Etape 7 
	Maintenant, on va s'occuper de l'apparence du menu déroulant en donnant du style
	aux liens contenus dans nos listes. On va faire passer les éléments "a" de leur type 
	inline par défaut à un type block via display: block; et styler les différents états des liens. 
*/

#menu li a:link, #menu li a:visited
{
	display: block;
	color: #FFF; /* Couleur blanche */
	background: #3B4E77; /* Couleur bleu foncé */ 
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
}

#menu li a:hover  /* Regle CSS qui selectionne les liens (dans #menu li) lors du survol */
{
	background-color: #F2462E;  /* Couleur rouge */
}

#menu li a:active { 
	/* a:active = Le lien de la page actuelle (exemple: Si nous sommes dans la page horaire.html 
	et le lien nous redirige vers horaire.html aussi) */
	
	background-color: #5F879D; /* Couleur bleu foncé */
} 

#menu .sousMenu li a:link, /* a:link = Un lien non clicqué encore */
#menu .sousMenu li a:visited /* a:visited = Un lien clicqué */
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	/* Faire répéter l'image bg-menu.png en axe x et y et la mettre comme image de fond pour les éléments sous-menus
		(L'image doit etre PNG pour avoir l'effet de transparence)
		*/
	background: url("./images/bg-menu.png") repeat; 
}

#menu .sousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;  /* Couleur rouge clair */
}

