@charset "utf-8";
/* CSS Document */

.menu
{
	text-align: center;
	color: #000;
	background-color: #FFFFFF;
	list-style-type: none;
	padding-top: 5px;
	padding-bottom: 5px;
	display: block;
	text-decoration: none;
	float: none;
}

.menu ul
{
	text-decoration: none;
	display: inline;
	text-align: center;
}

.menu ul li
{
	margin-right: 20px;
	text-decoration: none;
	display: inline;
	text-align: center;
}

#menu .sousmenu
{
	border-style : solid;
	border-color : #fff;
	border-width : 1px;
	padding-top : 2px;
	padding-bottom : 2px;
	margin-top : 5px;
	margin-bottom : 5px;
	background-color : #E4E4EC;
	border-radius : 3px;
	list-style-type : none;
	position : absolute;
}

/* Par defaut, on cache les sous-menus */
.menu li .sousmenu
{
	display : none;
	position : relative;
}

#menu li:hover .sousmenu
{
	display : block;
	position : relative;
	left : 0px;
	top : 0px;
	background-color : #808080;
}

#menu .sousmenu li
{
	background-color: #000000;
	display : block;
	position : relative;
	left : 0px;
	top : 0px;
}

#menu .sousmenu li a
{
	margin: 0;
	padding: 0;
}

.sousmenu li a:hover
{
	cursor: pointer;
	color : #fff;
	border-style : solid;
	border-color : #fff;
	border-width : 1px;
	list-style-type : none;
}

/* Comportement des cases du sous-menu quand la souris passe dessus */
.sousmenu:hover
{
	background-color : #808080;
	color : #fff;
	border-style : solid;
	border-color : #fff;
	border-width : 1px;
	list-style-type : none;
}

/*  Menu 2 */
#menuDeroulant
{
	display: table;
	width: 100%;
	margin-top: auto;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
	padding: 0;
	font: 1.1em sans-serif;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
	box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
}

#menuDeroulant.floatable
{
	position: fixed;
	top: 0px;
	max-width: 1224px;
	min-width: 700px;
	z-index: 2;
}

#menuDeroulant li
{
	display: table-cell;
	background: #A0A0A0;
	background: -webkit-linear-gradient(#DFDFDF, #A0A0A0);
	background: -moz-linear-gradient(#DFDFDF, #A0A0A0);
	background: -ms-linear-gradient(#DFDFDF, #A0A0A0);
	background: -o-linear-gradient(#DFDFDF, #A0A0A0);
	background-color: linear-gradient(#DFDFDF, #A0A0A0);
}

#menuDeroulant li:first-child, #menuDeroulant li:first-child a
{
	border-radius: 5px 0 0 5px;
}

#menuDeroulant li:last-child, #menuDeroulant li:last-child a
{
	border-radius: 0 5px 5px 0;
}

#menuDeroulant li a
{
	display: block;
	position: relative;
	text-align: center;
	text-decoration: none;
	padding: 8px 8px 17px 8px;
	color: black;
	color: rgba(0,0,0,.7);
	text-shadow: 0 1px 0 rgba(255,255,255,.4);
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 hsl(70,66%,14%) inset, 0 -2px 0 hsl(70,66%,24%) inset, 0 -3px 0 hsl(70,66%,34%) inset, 0 -4px 0 hsl(70,66%,44%) inset, 0 -5px 0 hsl(70,66%,54%) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 hsl(70,66%,14%) inset, 0 -2px 0 hsl(70,66%,24%) inset, 0 -3px 0 hsl(70,66%,34%) inset, 0 -4px 0 hsl(70,66%,44%) inset, 0 -5px 0 hsl(70,66%,54%) inset;
	-webkit-transition: all .3s .1s;
	-moz-transition: all .3s .1s;
	-ms-transition: all .3s .1s;
	-o-transition: all .3s .1s;
	transition: all .3s .1s;
}

#menuDeroulant li a:hover, #menuDeroulant li a:focus
{
	background: #51c3fa;
	background: rgba(255,255,255,.2);
	padding: 8px 25px 17px 25px;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 hsl(70,66%,14%) inset, 0 -2px 0 hsl(70,66%,24%) inset, 0 -3px 0 hsl(70,66%,34%) inset, 0 -4px 0 hsl(70,66%,44%) inset, 0 -5px 0 hsl(70,66%,54%) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 hsl(70,66%,14%) inset, 0 -2px 0 hsl(70,66%,24%) inset, 0 -3px 0 hsl(70,66%,34%) inset, 0 -4px 0 hsl(70,66%,44%) inset, 0 -5px 0 hsl(70,66%,54%) inset;
	-webkit-transition: all .3s 0s;
	-moz-transition: all .3s 0s;
	-ms-transition: all .3s 0s;
	-o-transition: all .3s 0s;
	transition: all .3s 0s;
}

#menuDeroulant li a:active
{
	background: #09c;
	background: rgba(0,0,0,.15);
	background: -webkit-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1));
	background: -moz-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1));
	background: -ms-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1));
	background: -o-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1));
	background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1));
	/*-webkit-box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
	box-shadow: 0 0 2px rgba(0,0,0,.3) inset;*/
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 hsl(70,66%,14%) inset, 0 -2px 0 hsl(70,66%,24%) inset, 0 -3px 0 hsl(70,66%,34%) inset, 0 -4px 0 hsl(70,66%,44%) inset, 0 -5px 0 hsl(70,66%,54%) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 hsl(70,66%,14%) inset, 0 -2px 0 hsl(70,66%,24%) inset, 0 -3px 0 hsl(70,66%,34%) inset, 0 -4px 0 hsl(70,66%,44%) inset, 0 -5px 0 hsl(70,66%,54%) inset;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}

#menuDeroulant li a::before
{
}

#menuDeroulant li a:hover::before
{
	content: "\266B";
	position: absolute;
	LEFT: 5px;
	color: #000;
}

/* Ligne support du sous menu */
#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: left;
	position: absolute;
	width: 200px;
}

#menuDeroulant .sousMenu li
{
	display: block;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: auto;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}

/* Block sous menu */
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #000;
	margin: 0;
	border: 0;
	padding-top: 5px;
	padding-left: 5px;
	padding-bottom: 5px;
	background: #D0D0D0;
	text-align: center;
}

/* On arrondi les angles de chaque sous menu */
#menuDeroulant .sousMenu li:nth-child(n), #menuDeroulant .sousMenu li:nth-child(n) a
{
	border-radius: 5px 5px 5px 5px;
}


#menuDeroulant .sousMenu li a:hover
{
	background: rgba(255,255,255,.2);
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 hsl(70,66%,14%) inset, 0 -2px 0 hsl(70,66%,24%) inset, 0 -3px 0 hsl(70,66%,34%) inset, 0 -4px 0 hsl(70,66%,44%) inset, 0 -5px 0 hsl(70,66%,54%) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 hsl(70,66%,14%) inset, 0 -2px 0 hsl(70,66%,24%) inset, 0 -3px 0 hsl(70,66%,34%) inset, 0 -4px 0 hsl(70,66%,44%) inset, 0 -5px 0 hsl(70,66%,54%) inset;

}

#menuDeroulant li:hover > .sousMenu
{
	display: block;
}

nav
{
	float:left;
}