/* Styles Menu Déroulant full CSS */

#mainNav {
    left: 290px;
    position: absolute;
    top: 70px;
}

#mainNav,
#mainNav ul {
	padding: 0;
	margin: 0;
	list-style: none;
    line-height: 1em;
}

#mainNav a {
	display: block;
    /*
	width: 250px;
    */
}

#mainNav li { /* tous les items de liste */
	float: left;
    position: relative;
    padding: 0;
    width: 100%;
    /*
    */
}

#mainNav > li {
    display: inline-block;
    font: 1.4em/1em 'BebasRegular', arial, sans-serif;
    margin: 0;
    padding: 0px 5px 0px 5px;
    word-spacing: 4px;
    width: auto;
}

#mainNav > li > a {
    color: #fff;
    padding: 8px 13px;
    text-align: center;
    text-decoration: none;
    /*
    display: inline;
    */
    width: auto;
    position: relative;
}

#mainNav > li.sfhover > a,
#mainNav > li:hover > a,
#mainNav > li > a:hover {
    background: #676767;
    border: none;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

#mainNav > li.sfhover > a:after,
#mainNav > li:hover > a:after,
#mainNav > li > a:hover:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
	border: solid transparent;
	height: 0;
	width: 0;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #676767;
	border-width: 6px;
	margin-left: -6px;
}


#mainNav li ul { /* listes de deuxième niveau */
	position: absolute;
	width: 250px;
    font-size: 11px;
    font-weight: bold;
    font-family: arial, sans-serif;
    
	left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
}

#mainNav > li > ul {
    padding-top: 20px;
}

#mainNav > li > ul li {
	background: #676767;
            background: rgba(103, 103, 103, 0.8);
}

#mainNav > li > ul li.sfhover,
#mainNav > li > ul li:hover {
	/*background: #898989;*/
    background: rgba(103, 103, 103, 0.8);
    z-index: 2;
}

#mainNav li ul a {
    color: #ffffff;
    text-decoration: none;
    padding: 8px 10px;
}

/*#mainNav > li > ul > li > a:after {
    content: '';
    display: block;
    height: 0px;
    border-bottom: 1px dotted #ffffff;
    position: absolute;
    bottom: -1px;
    left: 10px;
    right: 10px;
    z-index: 1;
}*/
#mainNav > li > ul > li:after {
    content: '';
    display: block;
    height: 0px;
    border-bottom: 1px dotted #ffffff;
    position: absolute;
    bottom: 0px;
    left: 10px;
    right: 10px;
    z-index: 1;
}
#mainNav > li > ul > li:last-child:after {
    content: '';
    display: block;
    height: 0px;
    border-bottom: 0px;
    position: absolute;
    bottom: 0px;
    left: 10px;
    right: 10px;
    z-index: 1;
}

#mainNav > li > ul > li:first-child {
    border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
}

#mainNav > li > ul > li:last-child {
    padding-bottom: 5px;
    border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
}

/*
#mainNav > li > ul > li.sfhover,
#mainNav > li > ul > li:hover {
    border-top-right-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-top-right-radius: 0;
}
*/

#mainNav > li > ul > li.sfhover > a:after,
#mainNav > li > ul > li:hover > a:after,
#mainNav > li > ul > li:last-child > a:after {
    display: none;    
}

#mainNav li ul a:focus,
#mainNav li ul a:hover {
    color: #ffffff;
}

#mainNav li ul ul { /* listes de troisième niveau et plus */
	margin: 0 0 0 250px;
    top: 0px;
    cursor: pointer;
}

#mainNav > li > ul, /* fix bug IE */
#mainNav li ul ul:after {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAK9JREFUeNpsULsKhDAQXK4S//8HDNpEwTYgFqawMPgxPkCMieMlYDxPF3YZmNnZBwEgIQQYY3D4P6mua0dgnmckSfIQUdd12Pfdi6Zpejj50vc9jDGvTkGplApOwzAgyzLcBC7btsUZ4zgiTVN86CeWZaGvi8dRFFEcx5dDVVWhe9s2FEVxjThPtdZiXddAekHTNJ50C2qtwTm/n3ku5jrzPH8+yhUpJcqyfH31IcAAPEknv9L/nUMAAAAASUVORK5CYII=) no-repeat left center;
}

#mainNav li ul ul:after {
    content: '';
    display: block;
    width: 25px;
    height: 35px;    
    /*background-color: #898989; */   
    position: absolute;
    top: 0px;
    left: -15px;
}

#mainNav li ul ul li:first-child {
    border-radius: 0px 3px 0 0;
    -webkit-border-radius: 0px 3px 0 0;
    -moz-border-radius: 0px 3px 0 0;
}

#mainNav li ul ul li:last-child {
    padding-bottom: 10px;
    border-radius: 0 0 3px 0px;
    -webkit-border-radius: 0 0 3px 0px;
    -moz-border-radius: 0 0 3px 0px;
}

#mainNav > li > ul li.sfhover ul li,
#mainNav > li > ul li:hover ul li {
	/*background: #898989;*/
    background: rgba(103, 103, 103, 0.8);
    /*
    padding-left: 3px;
    margin-left: -3px;
    */
}

#mainNav > li > ul li.sfhover ul li a:focus,
#mainNav > li > ul li.sfhover ul li a:hover,
#mainNav > li > ul li:hover ul li a:hover {
    color: #3b3b3b;
}

#mainNav li:hover ul ul, #mainNav li:hover ul ul ul, #mainNav li.sfhover ul ul, #mainNav li.sfhover ul ul ul {
	left: -999em;
}

#mainNav li:hover ul, #mainNav li li:hover ul, #mainNav li li li:hover ul, #mainNav li.sfhover ul, #mainNav li li.sfhover ul, #mainNav li li li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
	left: auto;
}