/*
 * Définition du menu :
 * 
 * - float:left -->  alignement de l'élément à gauche. Le conteneur suivant se
 *   positionnant directement à droite ou en dessous de celui-ci. 
 * - position:relative --> la position du menu sera calculée relativement par
 *   rapport aux autres éléments (qui l'entoure) de la page. 
 * - width:100% --> L'élément étant flottant il doit avoir une largeur de 100%
 * - line-height:normal --> spécifie l'interligne.
 * 
 */

.menu {
  position:relative;
  height:28px;  /* IE7 # */
  background:#FFC9A5 url("imgmenu/fond5.gif")
	repeat-x bottom left;
  border-top:1px solid #986265;
  padding-bottom:1px; /* Opera */
  font-family:"lucida grande";
  font-size:15px;
  line-height:normal;
  z-index:5;
}

/*
 * Applique la propriété à toutes les balises de classes "menu" qui sont
 * filles de la balise html, cette dernière pouvant être fille d'une balise
 * de plus haut niveau.
 * 
 * Un bug de IE à pour conséquence d'ignorer le caractère astérix. Grace à ce
 * bug, cette directive ne s'appliquera qu'à IE.
 * 
 */

* html .menu { padding-bottom:0px; }

/*
 * Définition de la liste du menu principal :
 *
 * - list-style:none -->  retire la puce.
 *
 */

.menu ul {
  list-style-type:none;
  padding:0;
  margin:0 0 0 20px;
  /*width:748px;*/
  height:28px;
  z-index:6;
}

.menu li {
  float:left;
  z-index:7;
}

/*
 * Définition du tableau utilisé pour la compatibilité IE6
 *
 * -  border-collapse:collapse fusionne les bordures du tableau.
 *
 */

.tableM {
  position:absolute;
  border-collapse:collapse;
  top:0;
  z-index:8;
}

.menu a em, .menu :visited em {
  display:block;
  /* float:none */
  color:#765;
  text-decoration:none;
  background:url("imgmenu/left_both.gif")
        no-repeat left top;
  margin:0;
  padding:0 0 0 9px; 
  font-weight:bold;
  border-bottom:0px solid #765;
  z-index:8;
}

.menu > ul a em {
  width:auto;
  z-index:8;
}

.menu a em span, .menu :visited em span {
  /*float:none;*/
  display:block;
  color:#765;
  text-decoration:none;
  background:url("imgmenu/right_both.gif")
           no-repeat right top;
  padding:5px 15px 4px 6px; /*Third = 4*/
  font-weight:bold;
  cursor:pointer;
  z-index:8;
}

/* Le hack de l'antislash commenté
   cache cette règle à IE5-Mac \*/
.menu a {float:none;}
/* End IE5-Mac hack */

.menu a:hover em span {
  color:#333;
  z-index:8;
}

.menu a:hover em {
  background-position:0% -150px;
  border-width:0;
  z-index:8;
}

.menu a:hover em span {
  color:#333;
  background-position:100% -150px;
  padding-bottom:5px;
  z-index:8;
}

/*
 * Change l'apparence de l'onglet de la page en cours.
 *
 */

.menu .actived a em, .menu ul li.actived :visited em {
  background:url("imgmenu/left_both2.gif")
        no-repeat left top;
  border-width:0;
}

.menu .actived a em span, .menu ul li.actived :visited em span {
  color:#333;
  background:url("imgmenu/right_both2.gif")
        no-repeat right top;
}

.menu .actived a:hover em {
  background-position:0% -150px;
  border-width:0;
}

.menu .actived a:hover em span {
  color:#333;
  background-position:100% -150px;
  padding-bottom:5px; 
}

/*
 * Sous Menu.
 *
 */

.menu ul ul {
  visibility:hidden;
  position:absolute;
  float:none;
  height:28px;
  top:27px;  /* FF=-1 */
  border-bottom:1px solid #777;
  background:#F0F5FA;
  margin-left:0px; /* align le sous-menu pour FF et IE7 sous l'onglet */
  z-index:9;
}

.menu :hover {
  white-space:normal;
}

/*
 * Change la couleur de l'onglet lors du survol du menu et sous-menu.
 *
 */

.menu li:hover > a em {
  background-position:0% -150px;
  border-width:0px;
}

.menu li:hover > a em span {
  color:#333;
  background-position:100% -150px;
  padding-bottom:5px;
}

/*
 * Fait apparaitre le sous-menu lors du survol d'un onglet.
 *
 */

.menu ul li:hover ul, .menu ul a:hover ul {
  display:block;
  visibility:visible;
  width:200px;
  margin-top:1px;
  z-index:9;
}

.menu ul :hover ul li {
  display:block;
  border-left:1px solid #777;
  border-right:1px solid #777;
  border-bottom:1px solid #777;
  background:#F0F5FA;
  height:28px;
  width:200px;
  z-index:9;
}

/*
 * Affiche une flêche à droite du menu lorsqu'il y a un sous menu
 *
 */

.menu ul :hover ul li.sousmenu {
  background:#F0F5FA url("imgmenu/fleche29.gif") 100% 50% no-repeat;
  z-index:9;
}

.menu ul :hover ul li.sousmenu a.sma:hover {
  background:#FAA url("imgmenu/fleche29.gif") 100% 50% no-repeat;
  z-index:9;
}

.menu ul :hover ul li a {
  display:block;
  color:#765;
  text-decoration:none;
  font-size:12px;
  height:28px;
  width:180px;
  line-height:27px;
  float:left;
  padding:0 10px;
  z-index:10;
}

.menu ul :hover ul li a:hover {
  color:#c00;
  background:#FAA;
  width:180px;
  z-index:10;
}  

/*
 * Sous sous Menu.
 *
 */

.tableSM {
  position:relative;
  border-collapse:collapse;
  z-index:11;
}

.menu dl {
  visibility:hidden;
  position:absolute;
  float:none;
  width:150px;
  border-top:1px solid #777;
  background:#F0F5FA;
  z-index:11;
}

.menu ul ul li:hover dl, .menu ul ul a:hover dl {
  display:block;
  visibility:visible;
  border-top:1px solid #777;
  left:153px; /* IE6 FF Opera */
  width:150px;
  margin-top:5px; /* IE6 */
  z-index:11;
}

.menu ul ul :hover dl dt {
  display:block;
  border-left:1px solid #777;
  border-right:1px solid #777;
  border-bottom:1px solid #777;
  background:#F0F5FA;
  width:148px;
  height:28px;
  z-index:12;
}

.menu ul ul :hover dl dt a {
  display:block;
  color:#765;
  text-decoration:none;
  font-size:12px;
  width:148px;
  height:28px;
  float:left;
  z-index:13;
}

.menu ul ul li:hover dl dt a:hover {
  color:#c00;
  width:128px; /* IE6 FF */
  background:#FAA;
  z-index:13;
}

/*
 * Change la couleur de survol du lien du menu parent.
 *
 */

.menu ul ul li:hover > a.sma {
  color:#c00;
  width:180px;  
  background:#FAA url("imgmenu/fleche29.gif") 100% 50% no-repeat;
  z-index:9;
}