/*--------------------------------------------------------------------------------------------------------------*/
/*--- MENU ---*/
.com-menu {
position: relative;
display:inline;
z-index: 998;
background-color: transparent;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 200px;
font-family: 'Open Sans', "Arial", sans-serif;
}
.com-menu ul{
margin: 0px;
padding: 0;
}
.com-menu ul li{ /* -- supprime la hauteur des li pour IE --*/
display:inline;
}
.com-menu ul li a {
display: block;
text-decoration: none;
color: #ffffff;
}
.com-menu > ul > li > a {
 margin:0 0 6px 0;
}
.com-menu ul li a:hover,
.com-menu ul li.on a,
.com-menu ul li a.lv1Over {
display: block;
}
.com-menu > ul > li > a > span {
 background:#232659;
 color:#fff;
 padding:5px 5px;
 display:inline-block;
 text-transform:uppercase;
 font-weight:bold;
}
.com-menu > ul > li.lien01 > a > span{
 background:#14f6ea;
 color:#202656;
}
.com-menu > ul > li.lien02 > a > span{
 background:#e5fe58;
 color:#294f5a;
}
.com-menu > ul > li.lien03 > a > span{
 background:#b9fc57;
 color:#294f5a;
}
.com-menu > ul > li.lien04 > a > span{
 background:#038c70;
}
.com-menu > ul > li.lien05 > a > span{
 background:#00c590;
}
.com-menu > ul > li.lien06 > a > span{
 background:#38f8c5;
 color:#255057;
}
.com-menu > ul > li.lien07 > a > span{
 background:#b9fc57;
 color:#048d6f;
}
.com-menu > ul > li.lien01 > a > span:hover,
.com-menu > ul > li.lien02 > a > span:hover,
.com-menu > ul > li.lien03 > a > span:hover,
.com-menu > ul > li.lien04 > a > span:hover,
.com-menu > ul > li.lien05 > a > span:hover,
.com-menu > ul > li.lien06 > a > span:hover,
.com-menu > ul > li.lien07 > a > span:hover{
 background:#232659;
 color:#fff;
}
.com-menu ul li.lien_accueil {
 display:none;
}
/* --- SOUS MENU  --- */
.com-menu ul li ul,
.com-menu ul.on li ul.on li ul,
.com-menu ul.on li ul.on li ul.on li ul,
.com-menu ul.on li ul.on li ul.on li ul.on li ul{
display:none;
}
.com-menu ul li.on ul,
.com-menu ul.on li ul.on li.on ul,
.com-menu ul.on li ul.on li ul.on li.on ul,
.com-menu ul.on li ul.on li ul.on li ul.on li.on ul{
display: block;
position: relative;
}
.com-menu ul li ul {
margin: -5px 0px 6px 0px;
padding: 0px 0px 0px 0px;
width:200px;
}
.com-menu ul li ul li{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display:block;
width:200px;
list-style-type:square;
}
.com-menu ul ul li a {
 margin:1px 0 0 0;
 padding:5px 0 5px 25px;
 display:block;
 font-weight:normal;
}
.com-menu ul li.lien01 ul li a {
 background:#14f6ea;
 color:#202656;
}
.com-menu ul li.lien02 ul li a {
 background:#e5fe58;
 color:#294f5a;
}
.com-menu ul li.lien03 ul li a,
.com-menu ul li.lien03 ul ul li a  {
 background:#b9fc57;
 color:#294f5a;
}
.com-menu ul li.lien04 ul li a {
 background:#038c70;
}
.com-menu ul li.lien05 ul li a {
 background:#00c590;
}
.com-menu ul li.lien06 ul li a {
 background:#38f8c5;
 color:#255057;
}
.com-menu ul li.lien07 ul li a {
 background:#b9fc57;
 color:#048d6f;
}
.com-menu ul li.lien01 ul li.on a,
.com-menu ul li.lien01 ul li.on a span,
.com-menu ul li.lien01 ul li a:hover,
.com-menu ul li.lien01 ul li a:hover span,
.com-menu ul li.lien02 ul li.on a,
.com-menu ul li.lien02 ul li.on a span,
.com-menu ul li.lien02 ul li a:hover,
.com-menu ul li.lien02 ul li a:hover span,
.com-menu ul li.lien03 ul li.on a,
.com-menu ul li.lien03 ul li.on a span,
.com-menu ul li.lien03 ul li a:hover,
.com-menu ul li.lien03 ul li a:hover span,
.com-menu ul li.lien04 ul li.on a,
.com-menu ul li.lien04 ul li.on a span,
.com-menu ul li.lien04 ul li a:hover,
.com-menu ul li.lien04 ul li a:hover span,
.com-menu ul li.lien05 ul li.on a,
.com-menu ul li.lien05 ul li.on a span,
.com-menu ul li.lien05 ul li a:hover,
.com-menu ul li.lien05 ul li a:hover span,
.com-menu ul li.lien06 ul li.on a,
.com-menu ul li.lien06 ul li.on a span,
.com-menu ul li.lien06 ul li a:hover,
.com-menu ul li.lien06 ul li a:hover span,
.com-menu ul li.lien07 ul li.on a,
.com-menu ul li.lien07 ul li.on a span,
.com-menu ul li.lien07 ul li a:hover,
.com-menu ul li.lien07 ul li a:hover span {
 color:#274f57;
}
.com-menu ul li.lien01 ul li.on > a,
.com-menu ul li.lien01 ul li a:hover,
.com-menu ul li.lien02 ul li.on > a,
.com-menu ul li.lien02 ul li a:hover,
.com-menu ul li.lien03 ul li.on > a,
.com-menu ul li.lien03 ul li a:hover,
.com-menu ul li.lien04 ul li.on > a,
.com-menu ul li.lien04 ul li a:hover,
.com-menu ul li.lien05 ul li.on > a,
.com-menu ul li.lien05 ul li a:hover,
.com-menu ul li.lien06 ul li.on > a,
.com-menu ul li.lien06 ul li a:hover,
.com-menu ul li.lien07 ul li.on > a,
.com-menu ul li.lien07 ul li a:hover{ 
background-image:url(puce_01.png);
background-repeat:no-repeat;
background-position:5px 9px;
 color:#274f57;
 font-weight:bold;
}
.com-menu ul ul ul {
 margin:5px 0 4px 0;
 padding:0;
}
.com-menu ul ul ul li a {
 font-size:0.85em;
 color:#000000;
 padding-left:25px;
 padding-right:5px;
 margin:0;
 border-bottom:1px solid #20486c;
 font-weight:normal;
}
/*---- 3EME NIVEAU ----*/
.com-menu ul.on li ul.on li.on ul{ 
 display:none;
}
.com-menu ul ul li{
 position:relative;
}
.com-menu ul.on li ul li:hover ul,
.com-menu ul.on li ul.on li.on:hover ul,
.com-menu ul ul li:hover ul {
 display:block;
 position:absolute;
 left:198px;
 top:-5px;
 width:150px;
 padding-left:5px;
 background:url(pixou.png) repeat center center;
}
.com-menu ul ul li:hover ul.on {
 position:relative;
 left:0;
 top:auto;
 width:auto;
 border-left:none;
 padding-left:0;
}
/*----- iPads (portrait) ----------- */
@media only screen 
and (max-width : 962px) {
/*----- Styles----- */
 .com-menu {
  width:640px;
  display:block;
  margin:auto;
}
body.accueil .com-menu {
 width:440px;
}
.com-menu ul li.lien_accueil {
 display:block;
}
.com-menu > ul {
-webkit-transition: 2s ease;
-moz-transition: 2s ease;
-o-transition: 2s ease;
-ms-transition: 2s ease;
transition: 2s ease;
 max-height:38px;
 overflow:hidden;
}
.com-menu > ul:hover {
 max-height:1000px; 
}
.com-menu ul li.lien_accueil a span{
 display:none;
}
.com-menu ul li.lien_accueil a:after{
 content:"MENU";
}
.com-menu ul li.lien_accueil a {
 color:#274f57;
 background:url(flecheMenuTab.png) no-repeat 616px 16px #b8fc57;
}
body.accueil .com-menu ul li.lien_accueil a {
 background:url(flecheMenuTab.png) no-repeat 415px 16px #b8fc57;
}
.com-menu ul li a span{
 background:transparent;
 color:#ffffff;
}
.com-menu ul li a {
 background:#232659;
 display:block;
 width:100%;
 text-decoration:none;
 padding:8px 12px;
 color:#ffffff;
}
.com-menu > ul > li.lien01 > a > span, 
.com-menu > ul > li.lien02 > a > span, 
.com-menu > ul > li.lien03 > a > span, 
.com-menu > ul > li.lien04 > a > span,
.com-menu > ul > li.lien05 > a > span, 
.com-menu > ul > li.lien06 > a > span, 
.com-menu > ul > li.lien07 > a > span {
 background-color:transparent;
 color:#fff;
}
.com-menu ul li.lien01.on a span,
.com-menu ul li.lien01.on a,
.com-menu ul li.lien02.on a span,
.com-menu ul li.lien02.on a,
.com-menu ul li.lien03.on a span,
.com-menu ul li.lien03.on a,
.com-menu ul li.lien04.on a span,
.com-menu ul li.lien04.on a,
.com-menu ul li.lien05.on a span,
.com-menu ul li.lien05.on a,
.com-menu ul li.lien06.on a span,
.com-menu ul li.lien06.on a,
.com-menu ul li.lien07.on a span,
.com-menu ul li.lien07.on a,
.com-menu ul li.lien01 a:hover span,
.com-menu ul li.lien02 a:hover span,
.com-menu ul li.lien03 a:hover span,
.com-menu ul li.lien04 a:hover span,
.com-menu ul li.lien05 a:hover span,
.com-menu ul li.lien06 a:hover span,
.com-menu ul li.lien07 a:hover span,
.com-menu ul li a:hover span,
.com-menu ul li a:hover {
 color:#274f57;
 background:#b8fc57;
}
.com-menu > ul > li > a {
 text-transform:uppercase;
 font-size:2.0em;
 font-weight:bold;
 padding:10px 12px;
 margin:0;
}
.com-menu ul li ul, 
.com-menu ul li ul li{
 width:630px;
}
.com-menu ul li ul {
 margin:5px 0;
}
.com-menu ul li.lien01 ul li a,
.com-menu ul li.lien02 ul li a,
.com-menu ul li.lien03 ul li a,
.com-menu ul li.lien04 ul li a,
.com-menu ul li.lien05 ul li a,
.com-menu ul li.lien06 ul li a,
.com-menu ul li.lien07 ul li a,
.com-menu ul li.lien01 ul li a span,
.com-menu ul li.lien02 ul li a span,
.com-menu ul li.lien03 ul li a span,
.com-menu ul li.lien04 ul li a span,
.com-menu ul li.lien05 ul li a span,
.com-menu ul li.lien06 ul li a span,
.com-menu ul li.lien07 ul li a span,
.com-menu ul ul li a {
 margin:0;
 background:#b8fc57;
 color:#274f57;
}
.com-menu ul ul li:hover ul {
 display:block;
 position:absolute;
 left:198px;
 bottom:20%;
 width:150px;
 padding-left:5px;
 background:url(pixou.png) repeat center center;
 z-index:100;
}
.com-menu ul ul li:hover ul.on {
 width:100%;
}
.com-menu ul ul li:hover ul li a{ 
}
.com-menu ul ul li:hover ul li a span,
.com-menu ul ul li:hover ul li a{ 
}
}