/****************************************************************

	BARRE DE NAVIGATION
	complétée par du javascript dans js/public.js
	
*****************************************************************/

/* reset du menu */
#nav ul{ padding: 0; margin: 0; }
#nav li{ padding: 0; margin: 0; list-style-type: none; }

/* générique */
#nav{
	position: fixed;
	top: 0;  left: 0;
	height: 50px; width: 100%;
	background: #FAFAFA;
	border-bottom:1px solid #DDD;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
	z-index: 4;
	/*overflow: hidden;*/
}


#nav>div{ display: table; height: 50px;}
#nav>div>ul { display: table-row; height: 50px; overflow: hidden; }
#nav>div>ul>li {display: table-cell; width: 2%; position: relative; vertical-align: top;}
#nav>div>ul>li .logo{width: 24px; margin: 0; display: block; margin-right: 5px; float:left; overflow:hidden; }
#nav>div>ul>li .logo img { margin: 0; height: auto; width: 24px; float: left; }
#nav>div>ul>li .descriptif { display: block;}
#nav>div>ul>li .texte { display: inline-block; }

#nav li.accueil,
#nav li.header-recherche { width: 1%; }
#nav li.header-recherche a{ padding: 10px 10px 10px 0; display: none; }
#nav li.header-recherche{ text-align:center; }
#nav li.header-recherche .bt-recherche { display: none; }

/* Liens et survol */

#nav>div>ul>li>a {
	height: 50px; display: block; width: 100%; font-weight: normal; text-decoration: none; padding: 10px;
	border:1px solid #DDD; border-top: none; border-right:none;
	/*overflow: hidden;*/
}
#nav>div>ul>li.on>a,
#nav>div>ul>li.open>a,
#nav>div>ul>li>a:hover{
	background:#FFF;
}
#nav>div>ul>li.open a{
	border-bottom: none;
}
#nav>div>ul>li>a .logo{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8/9 */
	filter: alpha(opacity=70); /* IE 5/6/7/8/9 */
	-moz-opacity:0.7; /* Firefox > 0.9 */
	-khtml-opacity: 0.7; /* Safari < webkit */
	opacity: 0.7; /* css 3 */
}
#nav>div>ul>li.open>a .logo,
#nav>div>ul>li.on>a .logo,
#nav>div>ul>li>a:hover .logo{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8/9 */
	filter: alpha(opacity=100); /* IE 5/6/7/8/9 */
	-moz-opacity:1; /* Firefox > 0.9 */
	-khtml-opacity: 1; /* Safari < webkit */
	opacity: 1; /* css 3 */
}

/****************************************************************

	BOUTONS DEROULANTS
	
*****************************************************************/

/* Generic */
#nav .sous-menu{
	display: none;
	position:fixed;
	top: 50px; left: 0; bottom: 0px;
	width: 100%;
	z-index: 4;
	background: rgba(0, 0, 0, 0.4);
	overflow: auto !important;
	text-align: left;
}
#nav .sous-menu-contenu{
	position: absolute; float: left;
	padding: 10px;
	background: #FFF;
	moz-box-shadow: 	2px 5px 5px 0px rgba(0, 0, 0, 0.5);
	webkit-box-shadow: 	2px 5px 5px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 		2px 5px 5px 0px rgba(0, 0, 0, 0.5);
}
#nav .sous-menu.full-width .sous-menu-contenu{
	width: 100%;
}

/* HOME */
#nav .accueil .sous-menu-contenu{ padding: 0; min-width: 200px; }
#nav .accueil .sous-menu ul li a{
	display: block; padding: 5px 10px;
	text-align: left;
	border-top : solid 1px #DDD;
	text-decoration: none;
	background: #FAFAFA;
}
#nav .accueil .sous-menu ul li a:first-letter{
	text-transform: capitalize
}
#nav .accueil .sous-menu ul li a:hover{
	background: #FFF;
}

/* SEARCH */

#formulaire_recherche input.submit{
	border-top-right-radius: 5px; border-bottom-right-radius: 5px;
	background: -moz-linear-gradient(center top , #333333 30%, #000000 90%) repeat scroll 0 0 #111;
}
#formulaire_recherche label{ display: none; }
#formulaire_recherche input { vertical-align:top; font-size: 14px; line-height: 18px; margin: 0; padding:4px;}
#formulaire_recherche input.text { width: 130px; background:#EEE; color: #999; border:none; margin-right: -5px; }
#formulaire_recherche input.submit { width:30px; border:none; color:#fff; background:#333; }
#formulaire_recherche input.submit::-moz-focus-inner {border:0;}
#formulaire_recherche input.submit:focus { outline: solid 1px blue;}


/* LOGIN */

#nav li.login .sous-menu-contenu > div{
	width:50%;
	min-width: 300px;
	float:left;
	padding: 10px 20px; 
	border-right: solid 1px #DDD;
}

#nav li.login { width: 0.1%; min-width: 48px;}
#nav li.login a{ text-align: center; }
#nav li.login .logo{ width: auto; text-align: center; display: inline-block; float: none;}
#nav li.login .logo img{ margin: 0; }
#nav li.login .sous-menu h2{ margin-bottom: 10px;}
#nav li.login .sous-menu-contenu > div:last-child{ border: 0;}
#nav li.login .explication{  }
#nav li.login h2 { max-width:300px; margin: 0 auto;}
#nav li.login form { max-width:300px; margin: 0 auto;}
#nav li.login form input[type="text"],
#nav li.login form input[type="password"]{ width:100%; }
#nav li.login form,
#nav li.login p { font-size: 12px; line-height: 16px; font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;}
#nav li.login legend.mode,
#nav li.login p.mode { display: none; }

#nav li.login .sous-menu a.bouton{
	margin: 20px; padding: 5px 10px;
	color: #DDD; font-family: Verdana, sans-serif; font-size: 12px;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 5px;
	background: #111;
	background: -moz-linear-gradient(center top , #333333 30%, #000000 90%) repeat scroll 0 0 #111;
}
#nav li.login .sous-menu a.bouton:hover{ color: #FFF; }


/****************************************************************

	MEDIA QUERIES
	
*****************************************************************/

/* Over 960px */
@media screen and (min-width: 961px) {
	/* inline the search box */
	#nav li.header-recherche{ display: table-cell; width: 1%; }
	#nav li.header-recherche .sous-menu{ position: relative; width: auto; display: inline; }
	#nav li.header-recherche .sous-menu .sous-menu-contenu{
		moz-box-shadow: 	none;
		webkit-box-shadow: 	none;
		box-shadow: 		none;
		position: relative; top: 0px; left: 0px;
		width: auto;
		background: none;
	}
}

/* Below 960px */
@media screen and (max-width: 960px) {
	/* generic */
	#nav>div>ul>li a { text-align: center; padding: 10px 5px }
	#nav>div>ul>li a .logo { height: 16px; width: 20px; display: inline-block; float:none; padding: 0; margin-right: 3px; margin: 0; margin-top: 5px;}
	#nav>div>ul>li a .logo img { width: auto; height: 16px; margin: 0;}
	#nav>div>ul>li a .texte {position: relative; top: -2px;}
	#nav>div>ul>li a .descriptif { display: none; }
	
	/* Search */
	#formulaire_recherche form { height: 30px; display:block; position: absolute; bottom:7px; left:10px; right: 40px; }
	#formulaire_recherche input.text{ width : 100%; }
	#formulaire_recherche input.submit{ position: absolute; top: 0px; right: -30px; }
	#nav>div>ul>li.header-recherche #bouton-recherche{ display: block; }
	#nav>div>ul>li.header-recherche .sous-menu-contenu {
		position:fixed;
		top: 50px; left: 0;
		width: 100%; height: 50px;
		z-index: 4;
		width : 100%;
	}
}

/* Below 640px */
@media screen and (max-width: 640px) {
	/* generic */
	#nav { text-align: center; left: 0;}
	#nav>div>ul>li a .texte { display: none; }
	#nav>div>ul>li a .logo { height: 24px; width:24px; margin-top:3px;}
	#nav>div>ul>li a .logo img { width: auto; height: 24px; margin: 0;}
	
	/* home */
	#nav .accueil .sous-menu-contenu{ width: 100%; }
	
	/* login */
	#nav li.login .sous-menu-contenu { padding-bottom: 100px; }
	#nav li.login .sous-menu-contenu > div { border: none; padding: 0; width: 100%; margin: 10px 0; }
	#nav li.login .sous-menu-contenu > div > a.bouton{ display: block; width: 100%; margin: 0; padding: 10px;	 }
	#nav li.login input{ font-size: 18px; padding: 5px; }
	
}

/*
	Landscape smartphone
*/
/*@media screen and (orientation:landscape) and (max-width: 480px) { 
	#nav{ position:fixed; width: 50px; top: 0; bottom:0px; left: 0px; height: auto;}
	#nav .table-div{ display: block; position:relative; left:0; top:0; height:100%; width: 50px; border-right: solid 1px #DDD;}
	#nav>ul { display: table; width: 50px; height:100%;}
	#nav>div>ul>li { display: table-row; height: 1%; width:50px; height: 50px; border:none; vertical-align: center;}
	#nav>div>ul>li a{ height: 100%; border-top:1px solid #DDD; vertical-align: center; }
	
	#nav>div>ul>li.header-recherche .sous-menu {
		top: auto; bottom: 0px; left: 50px; right: 0px;
		width : auto;
		display: none;
		box-shadow: none;
	}
	
	#nav li.header-recherche .sous-menu { top: 200px; bottom: 0px; left: 50px; right: 0px; }
	
	#nav > div > ul > li a{ width: 49px; height: 50px; text-align:center; border: none; border-bottom: solid 1px #DDD;}
	#nav > div > ul > li.on a{ width: 50px; }
	#nav > div > ul > li.rubrique.on{ height: auto; background: #FFF; }
	#nav > div > ul > li.header-recherche #formulaire_recherche form { top:10px; }
	
	#nav li.login .sous-menu { top: 0; left: 50px; width: auto; height:100%; overflow:auto !important; box-shadow: none;}
	#nav li.login .sous-menu form{ max-width: none; width: auto; min-width: 100px; }
	#nav li.login .sous-menu-contenu > div { border: none; padding: 0; width: 100%; }
}*/