/*--------------------------------------------------------------------------------------------------------------*/
/*--- MENU ---*/
#menu {
display: inline;
position: relative;
z-index: 1000;
background-color: transparent;
float: left;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 210px;
}
#menu ul{
margin: 0px;
padding: 0;
}
#menu ul li{ /* -- supprime la hauteur des li pour IE --*/
display:inline;
}
#menu ul li a {
display: block;
position: absolute; 
top: -220px;
display: block;
text-decoration: none;
color: #000;
height: 45px;
background-repeat: no-repeat;
background-position: left bottom;
}
#menu ul li a:hover,
#menu ul li.on a,
#menu ul li a.lv1Over {
overflow: hidden;/* --pour IE --*/
position: absolute; 
top: -210px;
}
#menu ul li a span{
display: block;
text-indent: -5000px;
}
#menu ul ul li a span{
display: block;
text-indent: 0px;
}
/*------------------*/
#menu ul li.lienAccueil a{
left: 0px;
width:45px;
background-image: url(menu_accueil.gif);
}
body.bodyaccueil #menu ul li.lienAccueil a{
top: -210px;
}
#menu ul li.lien01 a{
left: 50px;
width:100px;
background-image: url(menu_votre_ville.gif);
}
#menu ul li.lien02 a{
left: 155px;
width:148px;
background-image: url(menu_vos_demarches.gif);
}
#menu ul li.lien03 a{
left: 308px;
width:150px;
background-image: url(menu_vie_quotidienne.gif);
}
#menu ul li.lien04 a{
left: 463px;
width:132px;
background-image: url(menu_vie_citoyenne.gif);
}
#menu ul li.lien05 a{
left: 600px;
width:205px;
background-image: url(menu_vie_culturelle.gif);
}
/* --- SOUS MENU  --- */
#menu ul li ul,
#menu ul.on li ul.on li ul,
#menu ul.on li ul.on li ul.on li ul,
#menu ul.on li ul.on li ul.on li ul.on li ul{
display:none;
}
#menu ul li.on ul,
#menu ul.on li ul.on li.on ul,
#menu ul.on li ul.on li ul.on li.on ul,
#menu ul.on li ul.on li ul.on li ul.on li.on ul{
display: block;
position: relative;
}
#menu ul li ul {
margin: 5px 0px 10px 0px;
padding: 0px 0px 0px 0px;
}
#menu ul li.lien01 ul li a,
#menu ul li.lien02 ul li a,
#menu ul li.lien03 ul li a,
#menu ul li.lien04 ul li a,
#menu ul li.lien05 ul li a{
position: relative;
top: 0px; 
left: 0px;
width: 185px;
height: auto;
font-size: 100%;
padding: 2px 5px 2px 20px;
margin: 0px 0px 2px 0px;
text-decoration: none;
background-color:#FFF;
background-repeat: no-repeat;
background-position: 3px 3px;
background-image: none;
}
#menu ul li.lien01 ul li a{
background-image:url(ul_01.gif);
}
#menu ul li.lien02 ul li a{
background-image:url(ul_02.gif);
}
#menu ul li.lien03 ul li a{
background-image:url(ul_03.gif);
}
#menu ul li.lien04 ul li a{
background-image:url(ul_04.gif);
}
#menu ul li.lien05 ul li a{
background-image:url(ul_05.gif);
}
#menu ul li.lien01 ul li a:hover,
#menu ul li.lien01 ul li.on a,
#menu ul li.lien02 ul li a:hover,
#menu ul li.lien02 ul li.on a,
#menu ul li.lien03 ul li a:hover,
#menu ul li.lien03 ul li.on a,
#menu ul li.lien04 ul li a:hover,
#menu ul li.lien04 ul li.on a,
#menu ul li.lien05 ul li a:hover,
#menu ul li.lien05 ul li.on a,
#menu ul li.lien06 ul li a:hover,
#menu ul li.lien06 ul li.on a{
color: #000;
text-decoration: underline;
}
#menu ul ul ul{
padding: 0px 0px 0px 0px;
margin: 0px 0px 5px 0px;
}
#menu ul li.lien01 ul ul li a,
#menu ul li.lien01 ul ul.on li a,
#menu ul li.lien02 ul ul li a,
#menu ul li.lien02 ul ul.on li a,
#menu ul li.lien03 ul ul li a,
#menu ul li.lien03 ul ul li a.on,
#menu ul li.lien03 ul ul.on li a,
#menu ul li.lien04 ul ul li a,
#menu ul li.lien04 ul ul.on li a,
#menu ul li.lien05 ul ul li a,
#menu ul li.lien05 ul ul.on li a,
#menu ul li.lien06 ul ul li a,
#menu ul li.lien06 ul ul.on li a{
text-decoration: none;
background-image: none;
color: #CC0000;
}
#menu ul li.lien01 ul ul li a:hover,
#menu ul li.lien01 ul ul li.on a,
#menu ul li.lien02 ul ul li a:hover,
#menu ul li.lien02 ul ul li.on a,
#menu ul li.lien03 ul ul li a:hover,
#menu ul li.lien03 ul ul li.on a,
#menu ul li.lien04 ul ul li a:hover,
#menu ul li.lien04 ul ul li.on a,
#menu ul li.lien05 ul ul li a:hover,
#menu ul li.lien05 ul ul li.on a{
text-decoration: underline;
}
#menu ul ul ul ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 5px 0px;
}
#menu ul li.lien01 ul ul ul li a,
#menu ul li.lien01 ul ul ul.on li a,
#menu ul li.lien02 ul ul ul li a,
#menu ul li.lien02 ul ul ul.on li a,
#menu ul li.lien03 ul ul ul li a,
#menu ul li.lien03 ul ul ul li a.on,
#menu ul li.lien03 ul ul ul.on li a,
#menu ul li.lien04 ul ul ul li a,
#menu ul li.lien04 ul ul ul.on li a,
#menu ul li.lien05 ul ul ul li a,
#menu ul li.lien05 ul ul ul.on li a{
background-color: #996633;
}
#menu ul li.lien01 ul ul ul li a:hover,
#menu ul li.lien01 ul ul ul li.on a,
#menu ul li.lien02 ul ul ul li a:hover,
#menu ul li.lien02 ul ul ul li.on a,
#menu ul li.lien03 ul ul ul li a:hover,
#menu ul li.lien03 ul ul ul li.on a,
#menu ul li.lien04 ul ul ul li a:hover,
#menu ul li.lien04 ul ul ul li.on a,
#menu ul li.lien05 ul ul ul li a:hover,
#menu ul li.lien05 ul ul ul li.on a{
background-color: #996600;
}
/* --- SOUS MENU FLIP FLAP  --- */
#menu ul li ul.flip{
margin: 0px 0px 0px 0px;
padding: 10px 0px 5px 0px;
position: absolute;
width: 205px;
top: -168px;
display: block;
z-index: 10000;
background-repeat: no-repeat;
background-position:  left top;
}
#menu ul li ul.flip li{
display: block; /* --- permet de contrarier le display inline qui supprime la hauteur des li pour IE pour corriger un bug d'affichage en mode flip ---*/
position:relative;
top: 0px; 
left: 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-top: #FFF 1px dotted;
float: left;
}
#menu ul li ul.flip li:first-child{
border-top: none;
}
#menu ul li ul.flip li a{
float: left;
display: block;
width: 176px;
height: auto;
margin: 1px 2px 1px 2px;
padding: 0px 5px 0px 20px;
background-image: none;
text-align: left;
color: #FFF;
background-position: 5px top;
background-repeat: no-repeat;
}

#menu ul li.lien01 ul.flip li a:hover,
#menu ul li.lien01 ul.flip li a.lv1Over,
#menu ul li.lien02 ul.flip li a:hover,
#menu ul li.lien02 ul.flip li a.lv1Over,
#menu ul li.lien03 ul.flip li a:hover,
#menu ul li.lien03 ul.flip li a.lv1Over,
#menu ul li.lien04 ul.flip li a:hover,
#menu ul li.lien04 ul.flip li a.lv1Over,
#menu ul li.lien05 ul.flip li a:hover,
#menu ul li.lien05 ul.flip li a.lv1Over{
color: #000;
text-decoration: none;
background-color: #FFF;
background-position: 5px -84px;
}

/* --- SOUS MENU FLIP FLAP PAR LIEN --- */
#menu ul li.lien01 ul.flip{
position: absolute;
left: 50px;
background-image: url(bgUL_menu_votre_ville.gif);
}
#menu ul li.lien01 ul.flip li a{
background-color: #FFBA00;
background-image: url(puce_menu_votre_ville.gif);
}
/* ---- */
#menu ul li.lien02 ul.flip{
position: absolute;
left: 155px;
background-image: url(bgUL_menu_vos_demarches.gif);
}
#menu ul li.lien02 ul.flip li a{
background-color: #D64C22;
background-image: url(puce_menu_vos_demarches.gif);
}
/* ---- */
#menu ul li.lien03 ul.flip{
position: absolute;
left: 308px;
background-image: url(bgUL_menu_vie_quotidienne.gif);
}
#menu ul li.lien03 ul.flip li a{
background-color: #B71684;
background-image: url(puce_menu_vie_quotidienne.gif);
}
/* ---- */
#menu ul li.lien04 ul.flip{
position: absolute;
left: 463px;
background-image: url(bgUL_menu_vie_citoyenne.gif);
}
#menu ul li.lien04 ul.flip li a{
background-color: #059229;
background-image: url(puce_menu_vie_citoyenne.gif);
}
/* ---- */
#menu ul li.lien05 ul.flip{
position: absolute;
left: 600px;
background-image: url(bgUL_menu_vie_culturelle.gif);
}
#menu ul li.lien05 ul.flip li a{
background-color: #3A5396;
background-image: url(puce_menu_vie_culturelle.gif);
}

/* pour le troisieme niveau */
#menu ul li ul li ul.flip li a{
padding: 0px 0px 0px 10px;
}
#menu ul li ul li ul.flip{
display: none; /* mettre sur block pour activer tous les niveaux */ 
background: url(menuBottom2.gif) no-repeat right bottom;
}
#menu ul li ul.flip li ul li a{
background-image: none;
}
#menu ul li.lien01 ul.flip li ul,
#menu ul li.lien02 ul.flip li ul,
#menu ul li.lien03 ul.flip li ul,
#menu ul li.lien04 ul.flip li ul,
#menu ul li.lien05 ul.flip li ul
#menu ul li.lien06 ul.flip li ul{
position: absolute;
left: 180px;
top: -10px;
padding: 10px 0px 0px 0px;
}