/* Style de Menu deroulant de trois niveaux, avec icone */

:root{
	--mn_bgcol_nav: #666;	/* ori:#64abfb, darkgrey */
	--mn_bgcol_li: #666;		/* ori:#64abfb, #555 */
	--mn_bgcol_active: chocolate;		/* ori:chocolate, */
	--mnu_color: #fff;			/* ori: #FFF; */
	--mnu_color_hover: yellow;
	--mnu_bar_height: 77px;		/* ori: 79px; sans_icon: 53px*/
}
body {
	margin: 0px;
	padding: 0px;
}
#container {
	margin: 0 auto;
	min-width: 850px;
	max-width: 1032px;
	border: 3px solid #666;
}
#nav {
	width:100%;
	display:block;
	background-color: var(--mn_bgcol_nav);	/* #64abfb; */
	border-bottom:5px solid #2980b9;
}

#nav ul {
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
}
	
#nav ul:After {
	content: "";
	display:block;
	clear:both;
}	
	
#nav ul li {
	display:list-item;
	list-style: none;
	float:left;
	background-color: var(--mn_bgcol_li);	/* #64abfb; */
	position: relative;	/* tao:add: pour que la position de sous menu est correcte (le cas: le width de windows small) */
}

#nav ul li i {
	font-size:25px;
	width:30px;
}

#nav ul li a {
	display:block;
	padding:15px 30px;
	
	color: var(--mnu_color);	/* ori: #FFF; */
	font-size:20px;
	text-decoration:none;
	font-family: 'Bree Serif', 'serif';
	text-align:center;
}

#nav li a:hover {
	background-color: #2980b9;
	color: var(--mnu_color_hover);
}

/* The Dropdown Styles */
/* =================== */

/* Hide Dropdowns by Default */
#nav ul ul {
	display: none;
	position: absolute;
	top: var(--mnu_bar_height);		/* 79px; */
	z-index: 3;	/* important for submenu which is long or high (tao:add)(le cas: where deux menu se coller: un cache l'autre) */
}

/* Display Dropdowns on Hover */
#nav ul li:hover > ul {
	display:list-item;
}
	
/* Fisrt Tier Dropdown */
#nav ul ul li {
	width:200px;
	float:none;
	position: relative;
	border-bottom:none;
}

#nav ul ul li i {
	margin-right:10px;
}

#nav ul ul li a {
	padding:15px 20px;
	text-align:left;
}


#nav ul ul ul {
	display: none;
	position: absolute;
	top: var(--mnu_bar_height);		/* 79px; */
	z-index: 4;	/* important for submenu which is long or high (tao:add)(le cas: where deux menu se coller: un cache l'autre) */
}

/* Second, Third and more Tiers */
#nav ul ul ul li {
	position: absolute relative;
	top: calc(0px - var(--mnu_bar_height)); /* -79px; -var(--mnu_bar_height);	*/
	left: 170px;					/* 200px; */
}

#nav ul li.to-right ul ul li {	/* tempo */
	position: absolute relative;
	top: calc(0px - var(--mnu_bar_height)); /* -79px; -var(--mnu_bar_height);	*/
	left: -190px;					/* 200px; */
	/* background: green;	/* */
}

#nav ul ul li.at-right {
	right:60px;	/* pour ne pas sortir par droite. */
}

#nav ul ul ul li.at-right {
	right:60px;	/* pour ne pas sortir par droite. */
}

#nav ul ul li.at-right li {
	right:60px;	/* pour ne pas sortir par droite. */
}

#nav ul ul ul li.at-right {
	right:30px;
}

#nav ul li.to-right li {	/* tao:add */
	right:80px;
}


#nav li > a:after { content: ' »'; }

#nav > li > a:after {content: ' »'; }

#nav li > a:only-child:after {content: ''; }


#nav .to-right{
	float: right;
}

#nav li.active {
	color:#FFF;
	background: var(--mn_bgcol_active);		/* chocolate;	orange; */
}

#nav li.disable {
	color:#FFF;
	background: grey;		/* chocolate;	orange; */
}
#nav li.disable:hover {
	color:#BBB;
	background: grey;		/* chocolate;	orange; */
}
#nav li.disable a,
#nav li.disable a:hover {
	color:#BBB;
	background: grey;		/* chocolate;	orange; */
}