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

#menu{
	background:#FFB000;
}
#menu p{
	font-size:12px;
}

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

#menu.jav{
	position:absolute;
	top:6px;
	left:3px;
	border:1px solid #FFFFFF;
	margin:0px;
	padding:0px;
}
.jav, .jav ul{
	width:142px;                   /* * * LARGEUR DU MENU * * */
	margin:0px;
	padding:0px;
	list-style:none;
	background:#FFB000;
}
.jav li{
	clear:both;
}
.jav ul ul{
	width:265px;                  /* * * LARGEUR DES SOUS MENUS * * */
	margin:0px;
	padding:0px;
}
.jav ul ul{
	position:absolute;
	visibility:hidden;
	border:1px solid #FFFFFF;  /* bordure des sous menus  */
	margin-top:0px;           /* opposé de la bordure ci-dessus */
	left:100%;
}
.jav a{
	float:left;
	text-align:left;
	text-decoration:none;
	color:white;
	font-size:10pt;
}

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

.jav span, .jav ul span, .jav li span{
	display:block;
	width:123px;
	border:1px solid white;
	/* la valeur 12px est égale à la largeur des fleches, cela évite que le texte ne se superpose à la fleche */
	padding:2px 15px 2px 2px;
	margin-right:-2px;
	cursor:pointer;
	height:1%; /* pour IEwindows. Etale la zone sensible à tout le span et non plus seulement au texte */
}
.jav ul ul span, .jav ul ul li span{
	display:block;
	width:246px;
	border:1px solid white;
	/* la valeur 12px est égale à la largeur des fleches, cela évite que le texte ne se superpose à la fleche */
	padding:2px 15px 2px 2px;
	margin-right:-2px;
	cursor:pointer;
	height:1%; /* pour IEwindows. Etale la zone sensible à tout le span et non plus seulement au texte */
}
/* menu normal avec une fleche (fleche grise dans l'exemple) */
.jav a.fleche{
	background:#FFB000 url(image/fleche1.gif) no-repeat right;
}

/* menu avec une fleche dont le sous menu est visible(fond orange clair et fleche rouge dans l'exemple) */
.jav a.flecheActive{
	color:#4F8EB6;	
	background:#fc6 url(image/fleche2.gif) no-repeat right;
}
/* menu pointé (fond orange vif dans l'exemple) */
.jav a:hover, .jav a:focus, .jav a:active{
	background: #f60;
	color: white;
}
.jav a.flecheActive:hover,
.jav a.flecheActive:focus,
.jav a.flecheActive:active{
	background:#f60 url(image/fleche3.gif) no-repeat right;
}