A.navprincip:link {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #808080; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
A.navprincip:visited {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #808080; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
A.navprincip:active {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #808080; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
A.navprincip:hover {
	FONT-WEIGHT: bold;
	FONT-SIZE: 12px;
	COLOR: #990000;
	FONT-FAMILY: Arial, Helvetica, sans-serif;
	TEXT-DECORATION: none;

}
.textprincip {
	FONT-WEIGHT: normal; FONT-SIZE: 13px; COLOR: #585858; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.textpetit {
	FONT-WEIGHT: normal; FONT-SIZE: 8px; COLOR: #333333; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.parcoursdate {
	FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #ffffff; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.textemois {
	FONT-WEIGHT: bolder; FONT-SIZE: 18px; COLOR: #990000; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: underline
}
.texttitrepetit {
	FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #333333; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: underline
}
.comentpics {
	FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #333333; FONT-STYLE: italic; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.créditscitation {
	FONT-WEIGHT: lighter; FONT-SIZE: 9px; COLOR: #999999; FONT-STYLE: italic; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.textprincipgras {
	FONT-WEIGHT: bolder;
	FONT-SIZE: 14px;
	COLOR: #990000;
	FONT-STYLE: normal;
	FONT-FAMILY: Arial, Helvetica, sans-serif;
	font-variant: normal;
	letter-spacing: 1px;

}
.textsouvenirs {
	FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #333333; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.textprinciplien {
	FONT-WEIGHT: normal; FONT-SIZE: 14px; COLOR: #666666; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: underline
}
.textrecettes {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #999999; FONT-STYLE: oblique; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-VARIANT: small-caps
}
A.navsecond:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #666666;
	letter-spacing: 1px;
	cursor: crosshair;


}
A.navsecond:link {
	FONT-WEIGHT: normal;
	FONT-SIZE: 9px;
	COLOR: #666666;
	FONT-FAMILY: Arial, Helvetica, sans-serif;
	TEXT-DECORATION: none;
	cursor: crosshair;
	letter-spacing: 1px;


}
A.navsecond:visited {
	FONT-WEIGHT: normal;
	FONT-SIZE: 9px;
	COLOR: #666666;
	FONT-FAMILY: Arial, Helvetica, sans-serif;
	TEXT-DECORATION: none;
	letter-spacing: 1px;
	cursor: crosshair;

}
A.navsecond:hover {
	FONT-WEIGHT: normal;
	FONT-SIZE: 9px;
	COLOR: #990000;
	FONT-FAMILY: Arial, Helvetica, sans-serif;
	TEXT-DECORATION: none;
	letter-spacing: 1px;
	cursor: crosshair;
}	
ul{
	position:relative;
	list-style:url(none) none;
	padding: 0px;
	margin: 0px;
	width:276;
	height:173px;
	left: -41px;
	top: 303px;
	z-index: 2;



}


/** LA BALISE A **
 * ------------- *
 * La balise A va nous permettre de définir les attributs communs à chaque element du menu 
 */
a.menu{
	position:absolute;
	display:block;
	left:auto;
	height:20px;
	text-decoration:none;
	font: bold 12px Arial, Helvetica, sans-serif;
	color:#808080;
	z-index:2;
	width: 242px;





}


/** LA PSEUDO-CLASS :hover **
 * ------------------------ *
 * La pseudo-class :hover va nous permettre de définir les attributs communs à chaque balise A 
 * survolée par la souris
 * NOTE : IE comprend la pseudo-class :hover uniquement lorsqu'elle est appliquée a la balise A
 */
a.menu:hover{
	color:#990000;
	width:241px;
	z-index:2;



}

/** LE CAS PAR CAS **
 * ---------------- *
 * Les modifications globals de balises etant définies, nous allons maintenant nous attaquer
 * aux cas particuliers grace à l'utilisation des identifiants uniques de classes
 * NOTE : Tous les identifiants suivant sont appliqués à des balises A, ils héritent donc tous des
 *        comportements definis ci-dessus pour la balise A et pour la pseudo-classe associée :hover
 */
 
#menu1{
	top: 35px;
	padding-left: 13px;
	background-position: 0% 0%;

}
 
#menu1:hover{
 /* Lors du survol de la balise, la portion de background visible sera plus importante, on modifie donc
  * la proriété top et on conserve la position du texte en jouant sur le padding-top
  * NOTE : C'est ce petit truc qui nous contrains à utiliser un Z-index. En effet, dans ce cas, on risque 
  *        de voir deux balises A se chevaucher. Donc, il faut toujours s'assurer que la balise qui est
  *        survolée sera bien en dessous des balises non-survolées afin que celles-ci ne soit pas cachées 
  *        par la balise survolée. 
  */
  top: 0px;
  padding-top: 35px;
	
 /* On redéfinie le positionnement du background de la balise pour afficher la portion de background 
  * necessaire pour cet element de menu spécifique
  */
  background-position: 0% -72px;
}

/* Il ne reste plus qu'à répéter ces opérations pour chaque element de menu individuel */

#menu2{
  top: 53px;
  padding-left: 20px;
  background-position: 0% -12px;
}
 
#menu2:hover{
	background-position: 0% -119px;
	top: 0px;
	padding-top: 53px;










}

#menu3{
  top: 71px;
  padding-left: 28px;
  background-position: 0% -24px;
}

#menu3:hover{
  top: 0px;
  padding-top: 71px;
  background-position: 0% -184px;
}

#menu4{
  top: 89px;
  padding-left: 39px;
  background-position: 0% -36px;
}
 
#menu4:hover{
  top: 0px;
  padding-top: 89px;
  background-position: 0% -267px;
}

#menu5{
  top: 107px;
  padding-left: 53px;
  background-position: 0% -40px;
}

#menu5:hover{
  top: 0px;
  padding-top: 107px;
  background-position: 0% -368px;
}

#menu6{
  top: 125px;
  padding-left: 69px;
  background-position: 0% -60px;
}
 
#menu6:hover{
  top: 0px;
  padding-top: 125px;
  background-position: 0% -487px;
}

#menu7{
  top: 143px;
  padding-left: 89px;
  background-position: 0% -60px;
}

#menu7:hover{
  top: 0px;
  padding-top: 143px;
  background-position: 0% -487px;
}

li {
	display : list-item;
	list-style-image : url(images/point-rge.gif);
	list-style-position: outside;

} 
