/****************************************************************/
/****************** début styles header par défaut **************/
/****************************************************************/


.header{

	top:/*25%*/250px;
	left:0%;
	position:absolute; /*par défaut, presentation verticale pour petits écrans */
	
	/*height:42%;*/ /*par défaut, presentation verticale pour petits écrans */
	width:99%;
	
	margin:0%;
	padding:0%;
	/*border:1px solid red;*/
}

.header_left {
	/*height:100%;*/
	width:/*45%*/99%;/*par défaut, presentation verticale pour petits écrans */
	/*float:left;*/ /*par défaut, presentation verticale pour petits écrans */
	/*border:1px solid red;*/
	
}

.header_left img{
	margin:/*10% 0% 0% 8%*/0;/*par défaut, presentation verticale pour petits écrans */
	
	max-width:85%;
	max-height:85%;
	border-radius:3px;
	
	border:#000000;

}


.header_right {

	margin:/*0% 0% 0% 8%;*/30px 0px 0px 0px;/*par défaut, presentation verticale pour petits écrans */
	padding:1.5% 0% 0% 0%;

	/*height:85%;*/
	width:/*45%*/99%;/*par défaut, presentation verticale pour petits écrans */
	font-size:0.9em;

	/*float:right;*/ /*par défaut, presentation verticale pour petits écrans */
	line-height:2em;	
	/*border:1px solid blue;*/
}



#MainMenu .MainMenuItem
{
	
	width:/*85%*/99%;/*par défaut, presentation verticale pour petits écrans */
	/*height:40%;*/
	display:inline-block;
	clear:both;
	
	margin:0.2% 1% 0% 1%; 
	
	/*border:1px solid black;*/
	
}

.MainMenuItem .MainMenuRef {
	width:/*60*/99%;/*par défaut, presentation verticale pour petits écrans */
	
	display:inline-block;
	/*clear:both;*/
	background-color:#9f8d7c;
	
	border-radius: 5px;
	
	background-image:
	-moz-linear-gradient(10% 100% 85deg,#9f8d7c, #796a5e, #B5B9BA 84%)
	;
	background-image:
	-webkit-gradient(linear, 50% 10%, 10% 50%, from(#9f8d7c), to(#796a5e), color-stop(.5,#B5B9BA))
	;
	background-image:
	-ms-linear-gradient(top left, #9f8d7c 10%, #796a5e 100%)
	;
	
	/*border:1px solid #FF0000;*/
}


.MainMenuItem  .pointeGrey {
	clear:both;
	/*float:right;*/ /*par défaut, presentation verticale pour petits écrans */
	
	display: /*inline-block*/none; /*par défaut, presentation verticale pour petits écrans */
	
}

.MainMenuItem  div.pointeGreen {
	clear:both;
	
	display:none;/*par défaut, presentation verticale pour petits écrans */
	
	/*border:1px solid red;*/
}

.MainMenuItem  div.pointeGreen img {
	border:#000000;
	margin:0;
	/*height:20px;*/
	display:none;/*par défaut, presentation verticale pour petits écrans */
}




.MainMenuItem .MainMenuRef a
{
clear:both;
color:white;
display:inline-block;
text-decoration: none;
margin:/*0% 0% 0% 2%*/0% 0% 0% 1%; /*par défaut, presentation verticale pour petits écrans */

/*border:1px solid green;*/
width:99%;
font-size:0.9em;/*par défaut, presentation verticale pour petits écrans */
}



#MainMenu .MainMenuRef a:hover, 
#MainMenu .MainMenuRef a:focus
{
	
	color: black;
	width: /*105%*/99%;/*par défaut, presentation verticale pour petits écrans */
	/* sensible dans ie */
	
	background-color: #c0d346;
	
	opacity:0.8;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.42);
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.42);
	border-radius: 5px;
	
	/*padding:0% 0% 0% 3%;*/ /*par défaut, presentation verticale pour petits écrans */
	
	transition: 
		background-color 0.5s ease 0s, 
		color 0.5s ease 0s, 
		box-shadow 0.5s ease 0s, 
		text-shadow 0.5s ease 0s/*,
		padding 0.5s ease 0s */ /*par défaut, presentation verticale pour petits écrans */
		;
	-webkit-transition: 
		background-color 0.5s ease-in-out, 
		color 0.5s ease-in-out, 
		box-shadow 0.5s ease-in-out, 
		text-shadow 0.5s ease-in-out/*,
		padding 0.5s ease-in-out*/ /*par défaut, presentation verticale pour petits écrans */
		;
			
}

#MainMenu .MainMenuRef a:hover div.pointeGreen img,
#MainMenu .MainMenuRef a:focus div.pointeGreen img
{
	
	display:inline-block;
	margin:-0.3% 0% 0% 50%;
	padding:0;
	opacity:1;
	border:0;
	
}

/************* fin styles header par défaut *************/




/***********************************************************/
/*************** media queries *****************************/
/***********************************************************/



@media screen and (min-width:395px) 
/* menu horizontal activé (1er niveau) sans cases ni icones*/
/* sous menus verticaux */
{
	
	.header{

	top:20%;
	left:0%;
	position:absolute;
	
	height:42%;
	width:99%;
	
	margin:0%;
	padding:0%;
	/*border:1px solid red;*/
	}
	
	.header{
		margin:20px 0px 20px 0px;
	}
	
	.header_left { 
		margin:20px 0px 20px 0px;
		}
	
	.header_left img{
		margin:40px 0px 20px 0px;
	}


} /* fim media querie pour ecran de largeur >= 365 px */





@media screen and (min-width:860px) 
/*mode 3 colonnes pour métiers et pi*/
/* la hauteur se règle avec overflow:auto */
/* on pourrait ici rajouter les cases et icones pour menu horizontal */
/* pas encore de sous menus ici*/

{

	.header{
	top:6%;
	left:0%;
	position:absolute;
	}
	

	.header_left {
	/*height:100%;*/
	width:45%;
	
	margin:2% 0% 0% 0%;
	
	float:left; 
	}
	
	
	.header_right {

	margin:2% 0% 0% 0%;
	padding:1.5% 0% 0% 0%;

	/*height:85%;*/
	width:45%;
	font-size:0.9em;
	
	line-height:2em;	
	
	float:right;
	/*border:1px solid blue;*/
	}



	#MainMenu .MainMenuItem
	{
	
	width:98%;
	/*height:40%;*/
	display:inline-block;
	clear:both;
	
	margin:0.2% 1% 0% 1%; 
	
	/*border:1px solid red;*/
	
	}	

	.MainMenuItem .MainMenuRef {
		width:99%;
	}
	
	

			
} /* fin media queries pour mode 3 colonnes */
/*fin media querie pour ecran de largeur >=800px */



@media screen and (min-width:1225px) 
/* présentation header et menu pincipal en mode horizontal */
{
	
	.MainMenuItem .MainMenuRef {
		width:85%;
	}

	.MainMenuItem  .pointeGrey {
	
	float:right;
	margin:  -0.2% 11% -1.6% 0%;
	display: inline-block;
	
	}	
	
	.MainMenuItem  div.pointeGreen {
		display:inline-block;
		float:right;
		margin:/*-1% -5% 0% 0%*/ -0.3% -5.5% 0% 0%;
		height:40px;
		border:0;
	}
	
	
	#MainMenu .MainMenuRef a:hover, 
	#MainMenu .MainMenuRef a:focus
	{
	width: 105%;
	padding:0% 0% 0% 3%;
	
	transition: 
		background-color 0.5s ease 0s, 
		color 0.5s ease 0s, 
		box-shadow 0.5s ease 0s, 
		text-shadow 0.5s ease 0s,
		padding 0.5s ease 0s 
		;
	-webkit-transition: 
		background-color 0.5s ease-in-out, 
		color 0.5s ease-in-out, 
		box-shadow 0.5s ease-in-out, 
		text-shadow 0.5s ease-in-out,
		padding 0.5s ease-in-out
		;		
	}

	
	#MainMenu .MainMenuRef a:hover div.pointeGreen,
	#MainMenu .MainMenuRef a:focus div.pointeGreen
	{
	display:inline-block;
	/*clear:both;*/
	margin:-0.3% -5.5% 0% 0%;
	padding:0;
	opacity:1;
	border:0;
	/*height:10%;*/
	/*height:25px;
	width:*/
	width:8%;
	
	/*border:1px solid blue;*/
	}
	
} /*fin media querie pour ecran de largeur >=1225px */



 

@media screen and (min-width:1405px) 
/* activation full des sous menus et présentation horizontale full*/
{	

	
	
	
} /* fin media querie pour full ecran >=1315px */





/***************** fin media queries **********************/