/* * * *
 *
 *   Menu dynamique multi-niveaux
 *   Version 2.0
 *   Par Raphael Wils
 *   Email : info@r-wils.com
 *   web site : www.r-wils.com
 *
 * * * */

/* --------------------- styles par défaut  ------------------ */

#menu{
	background: url(images/vert_gauche.gif) 0 1000 repeat-y;
	color: #ffffff;
	text-transform: uppercase ;
	width: 169px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	letter-spacing: 1px ;
	font-weight: bolder;
}


/* styles avec javascript
   .jav : classe affectée au conteneur #menu par le script
--------------------------------------------------------------- */

#menu.jav{
	position:absolute;
	color: #ffffff;
	left:0px;
}
.jav, .jav ul, .jav li, .jav a{
	width:169px;                   /* * * LARGEUR DU MENU * * */
	margin:0;
	padding:0;
	list-style:none;
	background:#99CC00;
}
.jav ul ul, .jav ul ul li, .jav ul ul a{
	width:200px;
	background-color: #99CC00; 
	
}

.jav ul ul{
	position:absolute;
	visibility:hidden;
	border:0px solid #99CC00;  /* nécessaire pour voir flèche lors du mouseover bordure des sous menus  */
	margin-top:-5px;           /* opposé de la bordure ci-dessus */
	left:100%;
}
.jav li{
	float:left; /* pour IEwindows */
	clear:both;
}
html>body .jav li{float:none;}

.jav a{
	float:left;
	text-align:left;
	text-decoration:none;
	color:#FFFFFF;
	
}
.jav span{display:none;} /* span typographiques */


/* le span dont il est question dans ce qui suit est ajouté par
   le javascript.
   ---------------------------------------------------------- */

.jav a span{
	display:block;
	
	/* la valeur 12px est égale à la largeur des fleches,
	cela évite que le texte ne se superpose à la fleche */
	padding:2px 12px;
	cursor:pointer;
	height:1%; /* pour IEwindows. Etale la zone sensible
		          à tout le span et non plus seulement au texte */
}
html>body .jav a span{height:auto;}

/* menu normal avec une fleche (fleche grise dans l'exemple) */
.jav a.fleche{
	background:#99CC00 url(fleche1.gif) no-repeat right;
}

/* menu avec une fleche dont dont le sous menu est visible 
	(fond orange clair et fleche rouge dans l'exemple) */
.jav a.flecheActive{
	color: #ffffff;
	background:#FFCC00 url(fleche2.gif) no-repeat right;
}


/* menu pointé (fond orange vif dans l'exemple) */
.jav a:hover, .jav a:focus, .jav a:active{
	background: #336699;
	color: white;
}


.jav a.flecheActive:hover,
.jav a.flecheActive:focus,
.jav a.flecheActive:active{
	background:#336699 url(fleche3.gif) no-repeat right;
}
#menu h1{
color: #336699;
font-size: 13px;
font-weight: bold;
line-height: 12px;
text-align:center;
text-transform: uppercase;
border-style:solid;
border-width:1px 0 1px 0;
margin-left: 0px;
margin-right: 0px;
padding-top:5px;
padding-bottom: 5px;
}
#menu p{
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 10px;
font-weight: bold;
text-transform: none;
text-align:left;

}
#menu p a{
color: #000000;
font-size: 9px;
font-weight: bold;
text-transform: none;
text-align:left;
padding-left:-10px;

}
#menu p a:hover{
color: #ffffff;
background-color:#99CC00 ;
text-align:left;
padding-left:-10px;
}