ul  {
  list-style: none;
	vertical-align: baseline;
	border: 0;
	outline: 0;
	padding: 0;
	margin: 0;
}

#nav {
	width: 45em; /* 1000 */
	font-family: 'Open Sans', sans-serif;
	font-size :12px;
	position: absolute;
	top:40px;
	right: 0px;
	opacity:0.7;
	z-index:1000;
}
#nav > a {
	display: none;
}
#nav li {
	position: relative;
	font-size:100%;

}
/* style des textes du menu */
#nav li a {
	color: #fff;
	display: block;
	text-decoration: none;
}
/* fond du menu cliqué */
#nav li a:active {
	background-color: #666 !important;
}

/* triangle des menus avec sous-menu */
#nav span:after {
	width: 0;
	height: 0;
	border: 0.313em solid transparent; /* 5 */
	border-bottom: none;
	border-top-color: #fff; /*couleur du triangle */
	content: '';
	vertical-align: middle;
	display: inline-block;
	position: relative;
	right: -0.313em; /* 5 */

}

/* first level (barre du grand menu) */
#nav > ul {
	height: 3.75em; /* 60 */
	background-color: transparent;

}
#nav > ul > li {
	width: 25%; /*selon le nombre d'options du menu */
	height: 100%;
	float: left;
}
#nav > ul > li > a {
	height: 100%;
	font-size: 1.5em; /* 24 */
	line-height: 2.5em; /* 60 (24) */
	text-align: center;
	color:#fff;
}
#nav > ul > li:not( :last-child ) > a {
	border-right: 0px solid red;
}


/* barre de menus hover*/

#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {
	background-color: #0ff; /* couleur des menus sans sous-menu */
	color:#000;
}
#nav > ul > li:hover > a > span {
	display:block;
	background-color: #000; /* couleur des menus avec sous-menu */
	color: #fff;
	/* fait passe le menu de rang 1 du cyan (defini dans le style ci-dessus) au noir (défini dans le présent style) */
			-webkit-animation: fadein 1s; /* Safari and Chrome */
		   -moz-animation: fadein 5s; /* Firefox */
			-ms-animation: fadein 1s; /* Internet Explorer */
			 -o-animation: fadein 1s; /* Opera */
				animation: fadein 1s;
		-webkit-animation: fadeout 1s; /* Safari and Chrome */
		   -moz-animation: fadeout 5s; /* Firefox */
			-ms-animation: fadein 1s; /* Internet Explorer */
			 -o-animation: fadein 1s; /* Opera */
				animation: fadein 1s;
}

/* second level */
#nav li ul {
	background-color: #000;
	display: none;
	position: absolute;
	top: 100%;
}
#nav li:hover ul {
	display: block;
	left: 0;
	right: 0;
		-webkit-animation: fadein 1s; /* Safari and Chrome */
		   -moz-animation: fadein 5s; /* Firefox */
			-ms-animation: fadein 1s; /* Internet Explorer */
			 -o-animation: fadein 1s; /* Opera */
				animation: fadein 1s;
		-webkit-animation: fadeout 1s; /* Safari and Chrome */
		   -moz-animation: fadeout 5s; /* Firefox */
			-ms-animation: fadein 1s; /* Internet Explorer */
			 -o-animation: fadein 1s; /* Opera */
				animation: fadein 1s;
}
#nav li:not( :first-child ):hover ul {
	left: 0px;
}
#nav li ul a {
	font-size: 1.25em; /* 20 */
	border-top: 0px solid red;
	padding: 0.75em; /* 15 (20) */
}

/* fond des sous-menus */
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {
	background-color: #0ff; 
	color : #000;
}

/**************** Mini menu ****************************************/
@media only screen and ( max-width: 650px ) /* 640 */ {
	#nav.menuhide {
		background-color:black;
	}
	
	#nav {
		width:100%;
		top: -10px;
		left:0px;
		margin:0px;
		
	}
	/* Mini menu */   
	#nav > a, #nav table {
		width: 100%; /* 50 */
		font-size:35px; /* taille du symbole d'ouverture et de fermeture de menu */
		text-decoration:none;
		color : white;
		position: relative;
		height:60px;
	}
	
	
	/* mini menu fermé */
	#nav:not( :target ) > a:first-of-type {
		display: block;
		background-color:transparent;
	}
	
	#nav:not( :target ) > a:first-of-type:hover {
		display: block;
		background-color:cyan;
	}	
    /* fin du mini menu fermé */
	
	/* mini menu ouvert */
	#nav:target > a:last-of-type {
		display: block;
		background-color:#000;
	}
	
	#nav:target > a:last-of-type:hover{
		display: block;
		background-color:cyan;
	}
    /* fin du mini menu ouvert */

	
	/* first level */

	#nav > ul {
		height: auto;
		display: none; /* replie le mini-menu */
		position: absolute;
		left: 0;
		right: 0;
		background-color:black;
		border-bottom:1px solid cyan; /* fin du menu */
	}
	#nav:target > ul {
		display: block; /* redéploie de mini-menu */
		background-color:black;
				-webkit-animation: fadein 1s; /* Safari and Chrome */
		   -moz-animation: fadein 5s; /* Firefox */
			-ms-animation: fadein 1s; /* Internet Explorer */
			 -o-animation: fadein 1s; /* Opera */
				animation: fadein 1s;
		-webkit-animation: fadeout 1s; /* Safari and Chrome */
		   -moz-animation: fadeout 5s; /* Firefox */
			-ms-animation: fadein 1s; /* Internet Explorer */
			 -o-animation: fadein 1s; /* Opera */
				animation: fadein 1s;
		
	}
	#nav > ul > li {
		width: 100%;
		float: none;
		border-top:1px solid #099; /*debut des entetes de menu */
	}
	#nav > ul > li > a {
		height: auto;
		text-align: left;
		padding: 0; /* 20 (24) */
		text-indent : 20px;
	}

	
	#nav > ul > li:not( :last-child ) > a {
		border-right: none;
		border-bottom: 0px solid cyan;
	}
	#nav > ul > li:last-child  > a {
		border-right: none;
		border-top: 0px solid cyan;
	}
	/* second level */

	#nav li ul {
		position: static;
		text-indent:30px;
		padding-top: 0;
		text-align:left;
		display:block; /* Empêche les sous-menus de se replier en mode mini-menu */
		border-bottom:0px solid cyan;
	}

}