/*--------------------------------------------------------------------------------------------------------------*/
/*--- MENU ---*/
body.accueil #menu {
position: absolute; 
top: 699px;
display: inline;
z-index: 3;
padding: 0;
height:44px;
width:100%;
}
#menu {
position: absolute; 
top: 399px;
display: inline;
z-index: 3;
padding: 0;
height:44px;
width:100%;
}
#menuburger {
display:none;
}
#menu ul{
margin: 0px;
padding: 0;
}
#menu ul li{ /* -- supprime la hauteur des li pour IE --*/
/*display:inline;*/
float:left;
}
#menu ul li a {
position:relative;
overflow:hidden;
display: block;
text-decoration: none;
color: #000;
float:left;
height:168px;
}
#menu > ul > li{
position:relative;
border-right: 1px solid #666;
background-color: #274c69;
opacity:.7;
width:20%;
}
#menu > ul > li:hover{
opacity:1;
}
#menu > ul > li > a{
width:100%;
background:url(pucemenu.png) no-repeat 15px 15px;
}
#menu > ul > li.lien01 > a span {
background: url(sprites.png) no-repeat 0 -64px;
}
#menu > ul > li.lien02 > a span{
background: url(sprites.png) no-repeat -41px -67px;
}
#menu > ul > li.lien03 > a span{
background: url(sprites.png) no-repeat -83px -66px;
}
#menu > ul > li.lien04 > a span{
background: url(sprites.png) no-repeat -123px -64px;
}
#menu > ul > li.lien05 > a span{
background: url(sprites.png) no-repeat -161px -67px;
}
/*---*/
#menu.allemand > ul > li.lien01 > a{
background: url(premierNiveauLien01_de.png) no-repeat 0 0;
}
#menu.allemand > ul > li.lien02 > a{
background: url(premierNiveauLien03_de.png) no-repeat 0 0;
}
#menu.allemand > ul > li.lien03 > a{
background: url(premierNiveauLien02_de.png) no-repeat 0 0;
}
#menu.allemand > ul > li.lien04 > a{
background: url(premierNiveauLien04_de.png) no-repeat 0 0;
}
/*---*/
#menu.espagnol > ul > li.lien01 > a{
background: url(premierNiveauLien01_es.png) no-repeat 0 0;
}
#menu.espagnol > ul > li.lien02 > a{
background: url(premierNiveauLien03_es.png) no-repeat 0 0;
}
#menu.espagnol > ul > li.lien03 > a{
background: url(premierNiveauLien02_es.png) no-repeat 0 0;
}
#menu.espagnol > ul > li.lien04 > a{
background: url(premierNiveauLien04_es.png) no-repeat 0 0;
}
/*---*/
#menu.anglais > ul > li.lien01 > a{
background: url(premierNiveauLien01_en.png) no-repeat 0 0;
}
#menu.anglais > ul > li.lien02 > a{
background: url(premierNiveauLien03_en.png) no-repeat 0 0;
}
#menu.anglais > ul > li.lien03 > a{
background: url(premierNiveauLien02_en.png) no-repeat 0 0;
}
#menu.anglais > ul > li.lien04 > a{
background: url(premierNiveauLien04_en.png) no-repeat 0 0;
}
#menu.anglais > ul > li.lien05 > a{
background: url(premierNiveauLien05_en.png) no-repeat 0 0;
}
/*---*/
#menu ul li.on a{
background-position:0 -44px;
}
/*---*/
#menu > ul > li > a > span{
margin:40px auto 0 auto;
display:block;
height:40px;
width:40px;
}
#menu > ul > li > a > p{
font-size:1.5em;
text-transform: uppercase;
font-family: 'Gill Sans','Gill Sans MT', Calibri, sans-serif;
width:100%; 
text-align:center;
color:white;
margin:25px auto;
}
/* --- 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;
}
/*------------------------------------------------------------------------*/
/* ------------------ SOUS MENU FLIP FLAP  ------------------ */
#menu ul li ul.flip{
min-height:168px;
margin: 0px 0px 0px 0px;
position: absolute;
bottom:0px;
display: block;
width:100%;
z-index: 99;
background: #b1d4ce;
opacity:1;
}
#menu ul li.lien01 ul #faire{
background:url(sprites.png) 0px -217px no-repeat;
height:90px;
width:90px;
margin: -40px 0 20px 65px;
padding:0;
}
#menu ul li.lien02 ul #dormir{
background:url(sprites.png) -93px -217px no-repeat;
height:90px;
width:90px;
margin: -40px 0 20px 65px;
padding:0;
}
#menu ul li.lien03 ul #manger{
background:url(sprites.png) -184px -217px no-repeat;
height:90px;
width:90px;
margin: -40px 0 20px 65px;
padding:0;
}
#menu ul li.lien04 ul #shopping{
background:url(sprites.png) 0px -307px no-repeat;
height:90px;
width:90px;
margin: -40px 0 20px 65px;
padding:0;
}
#menu ul li.lien05 ul #culture{
background:url(sprites.png) -93px -307px no-repeat;
height:90px;
width:90px;
margin: -40px 0 20px 65px;
padding:0;
}
#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;
margin: 0 10px 0 0;
padding: 0;
}
#menu ul li ul.flip > li > a{
display: block;
color: #fff;
background:none;
}
#menu ul li ul.flip li a:hover {
text-decoration:underline;
}
#menu ul li ul.flip > li.imageLinkFlip{
width:160px;
margin: 0 10px;
}
#menu ul li ul.flip > li{
width:82%;
float:left;
margin: 0 10px 0 20px;
padding-bottom:20px;
line-height:1.3em;
}
#menu ul li ul.flip > li > a{
display:block;
height:auto;
width:100%;
padding: 0 0 20px;
margin: 0 0 5px;
font-family: 'Gill Sans','Gill Sans MT', Calibri, sans-serif;
font-size:1.2em;
font-weight:400;
text-transform: uppercase;
color:#274c69;
border-bottom: 1px solid white;
text-align:center;
text-decoration:none !important;
}
#menu ul li ul.flip > li:last-of-type > a {
border-bottom:0;
}
#menu ul li ul.flip > li > img{
float:left;
margin: 0 10px 0 0;
}
/*---------------------------------------------*/
/*---------- Pour le deuxieme niveau ----------*/
/*---------------------------------------------*/
#menu ul.flip ul{
display:block;
float:right;
width:280px;
}
#menu ul.flip ul li{
display:inline;
}
#menu ul.flip ul li a{
display:inline;
font-weight:lighter;
height:auto;
color:#fff;
float:none;
}
#menu ul.flip ul li:last-child a:after{
content:"";
}
#menu ul.flip ul li a:after{
content:",";
}
/*---*/
#menu ul li.lien01 ul.flip ul li a,
#menu ul li.lien02 ul.flip ul li a,
#menu ul li.lien05 ul.flip ul li a{
white-space:nowrap;
}