#menu-wrap
	{
		text-align: center;
		font-family:'Open Sans',sans-serif;
		font-size:0px; /* trick: http://stackoverflow.com/questions/20106428/why-does-inline-block-cause-this-div-to-have-height*/
		background:rgb(67,67,67);
		z-index:16383;
	}
	
	#menu .mobile
	{
		display: none;
	}

	/* mini reset */
	#menu, #menu ul
	{
		margin: 0;
		padding: 0;
		list-style: none;
		white-space:nowrap;
		font-size:14px;
	}
	
	/* mini reset */
	#menu li
	{
		margin: 0;
		padding: 0;
	}
	
	#menu
	{
		text-align:left;
		margin: 0px auto;
		background-color: rgb(67,67,67);
	}
	
	#menu >li
	{
		display:table-cell;
		border-left:1px solid rgb(178,152,99);
		z-index:16383;
	}
	
	#menu >li:last-child
	{   
		border-right:1px solid rgb(178,152,99);
	}
	
	#menu a
	{
		display:table-cell;
		position:relative;		
		padding: 10px 12px;
		color: rgb(255,203,96);
		text-decoration: none;
		z-index:16383;
	}
	
	#menu .submenu0
	{
		position:relative;
		z-index:16383;
	}
	
	#menu .submenu
	{
		position:relative;
		z-index:16383;
	}
	
	#menu ul
	{
		position:absolute;
		top:0;
		left:0;
		display:table-row;
		background: rgb(67,67,67);
	}
	
	#menu ul li
	{
		display:table-row; /* block doesn't work (too short) */
		z-index:16383;
	}

	#menu ul li:last-child a
	{
		box-shadow: none;
		z-index:16383;
	}

	#menu ul li a
	{
		z-index:16383;
	}

	#menu ul a
	{
		padding: 10px;
		text-transform: none; /* Remove underline */
	}

	#menu li:hover > a
	{
		color: rgb(189,189,255);
	}
	
	#menu div
	{
		opacity: 0;
		visibility: hidden;
		transition: all .4s ease-in-out;
	}
	
	#menu li:hover > div
	{
		opacity: 1;
		visibility: visible;
		margin: 0;
	}
	
	@media screen and (max-width:640px)
	{
		.reduceable
		{
			display:none;
		}
	}
	
	
/* ------------------------------------------------------------------------- */

@media screen and (min-width: 600px)
{
	#menu-trigger /* Hide it initially */
	{
		display: none;
	}
	
	#menu
	{
		display:inline-block !important;
	}

	#menu li:hover
	{
		background-color:rgb(37,37,37);
	}
	
	#menu .submenu0
	{
		display:block !important;
	}
	
	#menu .submenu
	{
		display:table-cell !important;
	}
	
	#menu ul li a
	{
		border-top: 1px solid rgb(77,77,77);
		border-left: 1px solid rgb(77,77,77);
	}
	
	#menu ul li span
	{
		border-top: 1px solid rgb(77,77,77);
	}
	
	/* Triangle supérieur */
	#menu > li > div > ul > li:first-child > a:after
	{
		content: '';
		position: absolute;
		left: 25px;
		top: -6px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid rgb(67,67,67);
	}
	
	/* Triangle supérieur en cas d'illumination */
/*	#menu > li > div > ul > li:first-child a:hover:after
	{
		border-bottom-color: rgb(67,67,67);
	}*/
	
	.menu-arrow
	{
		position:relative;
	}
	
	.menu-arrow::after
	{
		content:'\0000a0';
		margin:0 7px;
	}
	
	.menu-arrow::before
	{
		content: '\0025B6';
		position:absolute;
		right:7px;
		top:9px;
		color:rgb(255,203,96);
		visibility: hidden;
	}
	
	.menu-link
	{
		position:relative;
	}
	
	.menu-link::after
	{
		content:'\0000a0';
		margin:0 7px;
	}
	
	.menu-link::before
	{
		content: '\0000a0';
		position:absolute;
		right:7px;
		top:9px;
		width:1em;
		background:url("../../pix/lien-externe.png") no-repeat center;
		visibility: hidden;
	}
	
	.menu-empty
	{
		display:table-cell;
	}
	
	#menu li:hover span.menu-arrow::before, #menu li:hover span.menu-link::before
	{
		visibility: visible;
	}

	#menu li:hover>.menu-arrow::before
	{
		color: rgb(189,189,255);
	}

	#menu .menu-arrow, #menu .menu-link
	{
		display:table-cell;
	}
	
}

@media screen and (max-width: 600px)
{
    #menu-wrap
	{
        position: relative;
    }

    #menu-wrap *
	{
        box-sizing: border-box;
    }

	#menu
	{
        display: none;
    }
	
	#menu .submenu0
	{
		display:none;
	}
	
	#menu .submenu
	{
		display:none;
	}
	
    #menu-trigger
	{
        display: block;
		font-size:13px;
		text-align:left;
        height: 40px;
        line-height: 40px;
        cursor: pointer;        
        padding: 0 0 0 35px;
        border: 1px solid #222;
        color: #fafafa;
        font-weight: bold;
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC") no-repeat 10px center/*, linear-gradient(#444, #111)*/;
        background-color:rgb(67,67,67);
		border-bottom:1px solid rgb(178,152,99);
    }

    #menu
	{
        margin: 0;
		padding: 0px;
        position: absolute;
        top: 40px;
        width: 100%;
        z-index: 1;
        box-shadow: none;       
    }

	#menu .submenu0
	{
		padding-left:20px;
	}
	
	#menu .submenu
	{
		padding-left:20px;
	}
	
	#menu div
	{
		visibility: visible;
		opacity: 1;
	}
	
    #menu ul
	{
        position: static;
        visibility: visible;
        opacity: 1;
        margin: 0;
        background: none;
        box-shadow: none;               
    }

    #menu ul ul
	{
        margin: 0 0 0 20px !important;
        box-shadow: none;   
		font-size:13px;
    }

    #menu li
	{
        position: static;
        display: block;
        float: none;
        border: 0;
        margin: 5px;
        box-shadow: none;           
    }

    #menu ul li
	{
        margin-left: 20px;
        box-shadow: none;       
    }

    #menu a
	{
        display: block;
        float: none;
        padding: 0;
        color: rgb(255,203,96);
    }
/*
    #menu a:hover
	{
        color: #fafafa;
    }   
*/
    #menu ul a
	{
        padding: 0;
        width: auto;
    }

	#menu ul a:hover
	{
		/*background-image: none;*/
	}
	/*
	#menu li:hover > a
	{
		color: rgb(189,189,255);
		background-color:rgb(67,67,67);
	}*/

	#menu li:last-child
	{   
		border-right:0;
	}
	
    #menu ul li:first-child a:after,
    #menu ul ul li:first-child a:after
	{
        border: 0;
    }

	#menu .mobile
	{
		display: inline;
	}

}

/* iPad */
.no-transition {
    transition: none;
    opacity: 1;
    visibility: visible;
    display: none;          
}

#menu li:hover > .no-transition {
    display: block;
}

#submenu
{
	width:100%;
	display:block;
	padding: 0 0 10px 0;
	text-align:center;
	vertical-align:middle;
	background-color:rgb(240,240,240);
	font-size:28px;
	font-weight:lighter;
	text-shadow: 4px 4px 4px rgba(150, 150, 150, 0.81);
}

#submenu > a
{
	color:rgb(140,37,37);
	text-decoration:none;
}