/** MENU SMILIES **
 * -------------- *
 * Jeremie Patonnier <jep@ibilab.net>
 * -------------- *
 * Compatibilité : IE 5.5+ 
 *                 Mozilla 1.6 
 *                 FireFox
 *                 Opera 7
 *                 Safari
 */


/* LA BALISE UL *
 * ------------ *
 * La balise UL va servir de conteneur global pour le menu 
 * NOTE : Dans le cadre de ce menu, les balises LI ne nous servent
 *        a rien, elle ne seront donc pas redefinie
 */
.ul_menu{
 /* La balise est déclaré en position "relative" afin que les futurs balises A
  * utilisent la balise UL comme point de repère de leurs propres coordonnés absolus
  * NOTE : la position "relative" est preférer a la position "absolute" afin 
  *        de conserver le menu dans le flux HTML
  */
  position:relative;

 /* On supprime les puces pour les elements LI de la balise */
  list-style:none;
	
 /* On s'assure qu'il n'y aura aucun décalage autour du menu
  * NOTE : il faut définir le padding ET le margin car dans le cadre des listes à
  *        puces. Les différents navigateurs utilisent l'une ou l'autre des valeurs
  *        pour afficher les puces et assurer les retraits des elements.
  */
  padding: 0px;
  margin: 0px;
	
 /* On définie la largeur et la hauteur de la balise en fonction des dimensions de l'image de fond	*/
  width:200px;
  height:243px;
	
 /* On definit le background de la balise */
  background: url(../images/menu2.gif) no-repeat left top;
}


/** LA BALISE A **
 * ------------- *
 * La balise A va nous permettre de définir les attributs communs à chaque element du menu 
 */
.ul_menu a {
 /* La balise est déclarée en position "absolute" afin de pouvoir positionner nos elements
  * de menu au pixel près à l'interieur de la balise UL.
  */
  position:absolute;
	
 /* En temps normal, la balise A est une balise "inline". Pour les besoin de ce menu, nous
  * la transformons en balise "block"
  */
  display:block;
	
 /* Quoi qu'il arrive par la suite, toutes les balises A seront accoler au bord gauche de
  * leur conteneur : la balise UL
  */
  left:0px;
	
 /* De même, quoi qu'il arrive, les balise A auront toute une hauteur de base de 12px
  * NOTE : Cette hauteur dépend de l'image de fond qui sera utilisée, ainsi que de la taille
  *        de la police typographique qui sera utilisée.
  */
  height:12px;
	  width:200px;
 /* On supprime le soulignement par défaut des liens */
  text-decoration:none;
	
 /* On definie les valeurs typographiques du texte de la balise */
  font: bold 9px Verdana,Arial,Helvetica,sans-serif;
  color:#A00E1B;
	
 /* Le Z-index nous permettra d'être sûr qu'une balise A sera toujour par dessus
  * toute autre balise que l'on pourrais definir. Cette valeur est necessaire pour
  * Assuré la compatibilité avec Mozilla/Firefox.
  */
	z-index:2;
	
 /* Pour eviter les problèmes de prechargement et d'eventuel scintillement, toutes les puces
  * sont mises sur une seul image. Cette image est placé en background sur toutes les balises A.
 */
	background: url(../images/menu2.gif) no-repeat top left; 
}


/** 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
 */
.ul_menu a:hover{
 /* On redéfinie la couleur de la police typographique */
  color:#868686;
	
 /* On fixe la largeur de la balise 
  * NOTE : Cette largeur dépend de l'image de fond utilisée.
  */
  width:200px;
	
 /* Le Z-index nous permettra de nous assurer qu'une balise A survolée sera toujours en arrière plan
  * par rapport à une balise A non survolée. En effet, nous verrons par la suite que certaines balises
  * seront amenées à se chevaucher.
  */
  z-index:1;
}

/** 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
 */
 
#lien1 {
 /* Cet element de menu sera placé à 35px du bord haut de son conteneur : la balise UL */
  top: 12px;
	
 /* Le texte sera décallé de 58px vers la droite tout en laissant apparaitre le background de la balise */
  padding-left: 110px;
	
 /* 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% 12px;
}
 
#lien1: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: 12px;
	
 /* 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% -243px;
}

/* Il ne reste plus qu'à répéter ces opérations pour chaque element de menu individuel */

#lien2 {
  top: 49px;
  padding-left: 109px;
  background-position: 0% 12px;
}
 
#lien2:hover {
  top: 0px;
  padding-top: 49px;
  background-position: 0% -280px;
}

#lien3 {
  top: 90px;
  padding-left: 104px;
  background-position: 0% 12px;
}

#lien3:hover {
  top: 0px;
  padding-top: 90px;
  background-position: 0% -356px;
}

#lien4{
  top: 126px;
  padding-left: 92px;
  background-position: 0% 12px;
}
 
#lien4:hover {
  top: 0px;
  padding-top: 126px;
  background-position: 0% -467px;
}

#lien5 {
  top: 166px;
  padding-left: 74px;
  background-position: 0% 12px;
}

#lien5:hover {
  top: 0px;
  padding-top: 166px;
  background-position: 0% -616px;
}

#lien6 {
  top: 202px;
  padding-left: 44px;
  background-position: 0% 12px;
}
 
#lien6:hover {
  top: 0px;
  padding-top: 202px;
  background-position: 0% -802px;
}