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




.main_accueil {
	/*clear:both;*/
	position:absolute;
	top:680px;
	left:0%;
	
	min-height:500px;
	
	margin:/*0%*/50px 0px 0px 0px;/*par défaut, presentation verticale pour petits écrans */
	padding:0%;	
	/*height:500px;*/
	/*border:1px solid blue;*/
	/*overflow:auto;*/
}



#main_img{
	margin:0px;
	padding:0;
	border:#000000;	
	
}

#main_img img{
	margin:0px;
	padding:0;
	border:0;
	height:/*50%*//*100%*/80px;/*par défaut, presentation verticale pour petits écrans */
	/* les pourcentages ne sont pas supportés par chrome */
	width:99.8%;
	border:1px solid #e8f87a;
}



.main_txt {
	margin:0px;
	color:/*white*/black;
	font-size:0.9em;
}

.main_txt ul {
	padding:0;
}

.main_txt li {
	padding:0;
	list-style:none;
}

.main_txt a {
	text-decoration: none;
	color:/*white*/black;
	font-size:1em;
	text-shadow:0px 1px 0px rgba(255,255,255,1);
	
}

.main_txt a:hover ul, 
.main_txt a:focus ul
{
	
	color: black;
	
	background-color: #c0d346;
	
	opacity:0.8;
	border-radius: 5px;
	
	font-size:1.05em;
	
	transition: 
		background-color 0.5s ease 0s, 
		color 0.5s ease 0s
		;
	-webkit-transition: 
		background-color 0.5s ease-in-out, 
		color 0.5s ease-in-out
		;
		
}

#main_txt_left{
	/*float:left;
	margin:0% 0% 0% 5%;*//*par défaut, presentation verticale pour petits écrans */
	margin:0px 0px 0px 15px;/*par défaut, presentation verticale pour petits écrans */
}

#main_txt_center{
	/*float:left;
	margin:0% 0% 0% 23%;*/
	margin:50px 0px 0px 15px;/*par défaut, presentation verticale pour petits écrans */
}

#main_txt_right{
	/*float:right;
	margin:0% 10% 0% 0%;*/
	margin:50px 0px 0px 15px;/*par défaut, presentation verticale pour petits écrans */
	
	text-shadow:0px 1px 0px rgba(255,255,255,1);
	color:black;
}

#corp {
	font-size:1.5em;
	color:#c0d346;
	font-variant:small-caps;
}





#main_metiers,#main_pi,#main_contacts {
	clear:both;
	
	position:absolute;
	top:20%;
	left:0%;
	height:3350px;/* par défaut mode 1 colonne */
	
	width:99.5%;
	
	margin:0%;
	padding:0%;

	color:#887c75;
	
}

#main_contacts {
	color:black;
	height:2100px; 
	margin:20px 0px 20px 10px;
	
}



.col,.col_contacts{
	
	margin:0.5% 1% 1% 1.2%;
	padding:0% 0.5% 0% 0.5%;
	
	background-color:#f6f8e7;
	
	width:90%;
	float:none;/* par défaut mode 1 colonne */
	
	
	height:1100px;
	overflow: auto; /* pas mal ! */
	
	border-radius:3px;
	background-image:
	-moz-linear-gradient(10% 100% 85deg,#d6dbae, #f6f8e7, #c7cd98 84%)
	;
	background-image:
	-webkit-gradient(linear, 50% 10%, 10% 50%, from(#d6dbae), to(#f6f8e7), color-stop(.5,#c7cd98))
	;
	
}


.col_contacts{
	height:950px;
	margin:20px 5px 5px 5px;
	padding:0;
}


.col li,.col_contacts li{
	color:#736357;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.42);
	list-style: /*disc*/none;
	font-weight: 500;
}


.text {
	text-shadow:0 1px 0 rgba(255,255,255,0.6);
	color:#83766f;
	font-weight: 500;
	font-size: 0.80em;
	
	margin:1.5% 0.5% 0.5% 0%; 
	text-align: left;
}


.text_ico {
	width:40px;
	height:40px;
	float:left;
	margin:-5px 0px 0px 0px;
}

.text_ico img {
	width:35px;
	height:35px;
	border:#000000;
}


.col li span,.col_contacts li span
 {
	padding:0px 0px 9px 0px;
	display:block;
}

.li_contacts{
	margin:20px 0px 20px 0px;
}

.InsideImg img{
	
	border-radius:5px;
	max-width:90%
}

	
#piLogo img{
	
	max-width:95%;
	
	margin:0% 0% 0% 0.5%;
	border-radius:3px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.42);
	opacity:1;
}

#sousListe1 li, #sousListe2 li, #sousListe3 li{
	
	margin:0.5% 0.5% 0.5% 0%; 
	list-style: circle;
	font-weight: 400; 
	text-shadow: none;
	color:black;
}

.li_disc{
	list-style: disc;
	margin:1% 0.5% 0.5% 25px;
}

#map_canvas {
	min-width:95%;
	height:600px;
	border:1px solid /*#c0d346*/ black;
	border-radius: 5px;
	box-shadow: 3px 3px 3px 3px #796A5E;
	margin:5px 20px 5px 0px;
}

#map_canvas,#map_canvas_span,#map_canvas_ico {
		display:none;
	}

#eer div{
	margin:5px 20px 5px 5px;
}

.eer_field div{
	float:none;
	display:block;
}

.eer_field input{
	float:none;
	clear:both;
	display:inline-block;
	border:0;
}

.eer_field textarea {
	
}

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




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

/* si vraiment trop petit, pas de formulaire entree en relation*/
@media screen and (max-width:300px) 
/* menu horizontal activé (1er niveau) sans cases ni icones*/
/* sous menus verticaux */
{
	#form_eer_ico,#form_eer_span,#form_eer_div,#eer {
		display:none;
	}
	
}


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

	.main_accueil {
	
	position:absolute;
	top:850px;
	left:0%;
	
	width:99.7%;
	
	clear:both;
	
	margin:20px 0px 0px 0px;
	padding:0px 0px 0px 0px;	
	
	}

	#main_img img{
		
		height:130px;/*par défaut, presentation verticale pour petits écrans */
	}
	
	#main_metiers,#main_pi {
		height:1200px; 
	}

	#main_contacts{
		height:2000px;
	}
	
	.col_contacts {
		height:900px;
	}

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


/* si assez gd, plan */
@media screen and (min-width:500px) 
/* menu horizontal activé (1er niveau) sans cases ni icones*/
/* sous menus verticaux */
{
	#map_canvas,#map_canvas_span,#map_canvas_ico {
		display:block;
	}
}


@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*/

{
	.main_accueil {
		clear:both;
		position:absolute;
		top:450px;
		left:0%;
		min-height:300px;
		max-height:400px;
	}
	
	#main_img img{
		margin:30px 0px 0px 0px;
		height:180px;/*par défaut, presentation verticale pour petits écrans */
	}
	
	.main_txt {
		font-size:0.85em;
	}
	
	
	#main_txt_left{
	float:left;
	width:30%;
	margin:0% 0% 0% 3%;
	}

	#main_txt_center{
	float:left;
	width:30%;
	margin:0% 0% 0% 5%;
	}

	#main_txt_right{
	float:left;
	width:30%;
	margin:-1% 0% 0% 2%;
	}
	
	.col {
	
		width:30%;
		float:left;
		overflow:auto;
		
		height:1300px;	
	}
	
	#main_contacts{
		height:1100px;
	}
	
	.col_contacts	{
	
		width:47%;
		float:left;
		overflow:auto;
		
		height:1000px;	
	}
	
	#main_metiers , #main_pi{
		height:1400px; 
	}
	
	.eer_field {
		border-radius: 3px;

	}
	
	.eer_field input,.eer_field textarea {
			border-color: #f6f8e7;
		border-style: double;	
	}
	
	.eer_field input,.eer_field textarea {
			border-color: #f6f8e7;
		border-style: double;	
	}	
	
	.eer_field input:focus,.eer_field textarea:focus {
		-webkit-box-shadow: 0 0 12px rgba(51,204,255,0.5);	
		-moz-box-shadow: 0 0 12px rgba(51,204,255,0.5);
		box-shadow: 0 0 12px rgba(51,204,255,0.5);
	}

			
} /* 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 */
{
	
		#main_metiers , #main_pi{
		height:800px; 
	}

		.col_contacts	{width:48%;}	
	
	
} /*fin media querie pour ecran de largeur >=1225px */



 

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

	#main_metiers , #main_pi{
		height:900px; 
	}
	
	#main_contacts,#main_pi,#main_metiers{
		top:10%;
	}
	
	
	.col{height:1000px;}
	
	.col_contacts	{
		width:49%;
	}
	
} /* fin media querie pour full ecran >=1315px */





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