/* Feuille de style Dossier : 20260401_site_saintalbandhurtieres_php */
/* Dernière actualisation : 20260408 */
/* theme_summer */


*{
padding: 0;
margin: 0;
}

li{
list-style: none;
}

a{
text-decoration: none;
}



/* --------------------Typos et tab_sources des typos ------------------------*/
@font-face{
	font-family: caviar;
	src: url('font/CaviarDreams_1.ttf');
	}
@font-face{
	font-family: couture;
	src: url('font/couture-bld.otf');
	}
@font-face{	
	font-family: dreamo;
	src: url('font/dream-orphans-bd.ttf');
}
@font-face{	
	font-family: Coolvetica;
	src: url('font/coolvetica rg.ttf');
}
@font-face{	
	font-family: Amasis;
	src: url('font/amasis-mt.ttf');
}
@font-face{	
	font-family: BigNoodleTitling;
	src: url('font/big_noodle_titling.ttf');
}


/* --------------------Typos flexslider */
@font-face {
  font-family: 'flexslider-icon';
  src: url('font/flexslider-icon.eot');
  src: url('font/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('font/flexslider-icon.woff') format('woff'), url('font/flexslider-icon.ttf') format('truetype'), url('font/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}



/* ------------------------Gestion des class et des tableaux----------------*/

/* Elements communs des libelles des titres de menu et titres*/
.titre_menu {
	color: white;
	font-size: 75%;
	line-height: 35px;
	display: inline;
	font-family: "Couture", "Caviar Dreams", "Tahoma";
	font-weight: lighter;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	float: left;
}
/* Elements communs des libelles des titres de sous-menu */
.titre_sous_menu {
	font-size: 75%;
	line-height: 30px;
	color: white;
	display: inline;
	font-family: "Couture", "Caviar Dreams", "Tahoma";
	font-weight: lighter;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
}
/* Elements communs des libelles des titres h1*/
.titreh1 {
	color: #3f5121;
	font-size: 80%;
	line-height: 35px;
	display: inline;
	font-family: "Couture", "Caviar Dreams", "Tahoma";
	font-weight: lighter;
	text-transform: uppercase;
	letter-spacing: 1px;
	width: 98%;
	height: 25px;
	float: left;
	text-align: left;
	margin: 0% 0% 0% 1%;
}
/* Elements communs des libelles des titres de sous-menu h1*/
.titreh1_sous_menu {
	font-size: 75%;
	line-height: 30px;
	color: white;
	display: inline;
	font-family: "Couture", "Caviar Dreams", "Tahoma";
	font-weight: lighter;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #91b851;
	text-align: left;
}
/* Elements communs des libelles des titres h3*/
.titreh3 {
	color: white;
	font-size: 90%;
	line-height: 30px;
	display: inline;
	font-family: "Couture", "Caviar Dreams", "Tahoma";
	font-weight: lighter;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	text-align: center;
}
.gros_titreh2 {
	width: 98%;
	height: 30px;
	color: #326163;
	line-height: 24px;
	font-family: "Dream Orphans", "Amasis MT", "Caviar Dreams", " Arial", "Tahoma";
	font-size: 90%;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	display: block;
	float: left;
	text-align: left;
	margin: 40px 0 20px 20px;
}
.titreh2 {
	color: #91b851;
	font-size: 70%;
	line-height: 15px;
/* 	display: inline; */
	font-family: "Couture", "Caviar Dreams", "Tahoma";
	font-weight: lighter;
	text-transform: uppercase;
	text-align: left;
	display: block;
}
.titreh2lc {
	color: #005a7e;
	font-size: 60%;
	line-height: 15px;
	font-family: "Dream Orphans", "Couture", "Caviar Dreams", "Tahoma";
	font-weight: lighter;
	text-transform: initial;
	letter-spacing: 1.5px;
	text-align: left;
	display: block;
}
.texte_bloc {
	color: white;
	font-size: 90%;
	line-height: 18px;
	display: block;
	font-family:  "Amasis MT", "Caviar Dreams", " Arial", "Tahoma";
	font-weight: normal;
	text-transform: initial;
	text-align: left;
}
.texte_bloc_noir {
	color: black;
	font-size: 90%;
	line-height: 18px;
	display: block;
	font-family: "Amasis MT", " Arial", "Tahoma";
	font-weight: normal;
	text-transform: initial;
	text-align: left;
	letter-spacing: 0.5px;
}
.texte_bloc_blanc {
	color: white;
	font-size: 90%;
	line-height: 18px;
	display: block;
	font-family: "Amasis MT", " Arial", "Tahoma";
	font-weight: normal;
	text-transform: initial;
	text-align: left;
	letter-spacing: 0.5px;
}
/* elements communs des tableaux --------------------------*/
table {
	border-collapse: collapse;
}
td, th.tab_col1 {
    border-color: #cccccc #656565;
    border-style: solid;
    border-width: 1px;
}
td, th {
    padding: 0.5%;
    vertical-align: middle;
}
table td {
	color: black;
	font-size: 80%;
	font-family: "Amasis MT", " Arial", "Tahoma";
	font-weight: normal;
	text-transform: initial;
	text-align: left;
	background-color: #ffffff;
}
table th{
	color: black;
	font-size: 80%;
	font-family: "Amasis MT", " Arial", "Tahoma";
	font-weight: bold;
	text-transform: initial;
	text-align: center;
	background-color: #ffffff;
}
/* titre du tableaux */
.titre-tab0 {
	color: black;
	font-size: 90%;
	line-height: 16px;
	display: block;
	font-family: "Caviar Dreams", " Arial", "Tahoma";
	font-weight: bold;
	text-transform: initial;
	text-align: left;
	display: block;
}
/* titre colonnes */
.titre-tab1 {
    border-style: solid;
    border-width: 1px;
	border-color: #6e020a;
	color: white;
	font-size: 90%;
	line-height: 15px;
/* 	display: block; */
	font-family: "Caviar Dreams", " Arial", "Tahoma";
	font-weight: bold;
	text-transform: initial;
	text-align: center;
	background-color: #6e020a;
	padding: 1%;
}
.tab_col1_italic {
    font-style: italic;
	font-size: 75%;
	padding-left: 2%;
}
.tab_result_italic {
    font-style: italic;
	font-size: 75%;
	padding-left: 2%;
	text-align: right;
}
.tab_result{
	 text-align: right;
	 width: 12%;
}
.tab_source{
	 text-align: center;
	 color: #9a9a9a;
}
/* fin elements communs des tableaux --------------------------*/
/* bloc menu responsive ---------------------------------------*/
.bloc_menu_responsive{
	width: 90%;
	display : none;
}
/* fin bloc menu responsive ---------------------------------------*/
/* icones chiffres -------------------------------------------*/
.icone_chiffre{
	width: 18px;
	vertical-align: text-bottom;
}
/* fin icones chiffres --------------------------*/
/* elements communs des boutons menu fleche --------------------------*/
.bouton_menu{
	width: 360px;
	height: 30px;
	padding: 15px;
	border: none;
	border-radius: 10px;
	margin: 0 20px 20px 20px;
}
.bouton_menu img{
	float: left;
	height: 30px;
}
.bouton_menu h3{
	font-size: 90%;
/* 	width: 70%; ----passé en commentaire pour boutons sou des ecoles */
	height: 30px;
	float: left;
	text-align: left;
	margin-left: 30px;
}
/* fin elements communs des boutons menu fleche --*/
/* elements communs des bloc info gauche --------------------------*/
.bloc_info_gauche{
	width: 60%;
/* 	max-width: 750px; */
	float: left;
	padding: 2% 2% 2% 2%;
	background: white;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius: 5px 5px 5px 5px;
	margin : 20px 0 25px 20px;
}
.bloc_info_gauche h3{
	font-size: 100%;
    height: 25px;
    margin: 0 0 15px;
    width: 100%;
}
/* elements communs des bloc info droite --------------------------*/
/* Taille de la div liens et positionnement div bloc droite */
.bloc_info_droite{
	width: 30%;
	float: right;
	padding: 0% 1% 2% 1%;
	margin : 0 9px 25px 0;
	text-align: center;
}
.bloc_info_droite ul{
	padding: 15px;
}
/* Taille des titres h3*/
.bloc_info_droite  h3{
	font-size: 80%;
	height: initial;
	margin: 0 0 10px 0;
	text-align: center;
}
.bloc_info_droite section{
	width: 98%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius: 5px 5px 5px 5px;
	margin : 20px 0 25px 0px;
	padding: 3%;
}
/* Taille et couleur de la div contact et des h3 et p*/
.bloc_contact{
	width: 40%;
	max-width: 750px;
	float: left;
	padding: 2% 2% 2% 2%;
	background: #3cc4de;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius: 5px 5px 5px 5px;
	margin : 0 0 25px 20px;
}
.bloc_contact h3{
	font-size: 80%;
	width: 17%;
	height: 200px;
	border-right: 3px solid;
	float: left;
	color: white;
	margin: 0;
}
.bloc_contact p{
	margin-left: 20%;
}
/* elements communs des boutons acces paragraphe --------------------------*/
.liste_bouton{
	width: 100%;
	display: inline;
}
.bouton{
	width: 200px;
	margin: 0 0 0 20px; 
}
.liste_bouton2{
	width: 100%;
	display: block;
	float: right;
}

.bouton2{
	width: 120px;
	margin: 0 0 0 20px;
	float: right;
}



/* _____________________________PAGE INDEX_______________________________________*/
/* _____________________________________________________________________________ */

/* -------------------------------BODY-------------------------------------------*/
/* couleur de fond du body avec la grille répétitive */

body{
	/*background: url(img_theme/bg_grid_3400.png) repeat-x fixed 0 0;*/	
}

/* -------------------------------WRAPPER-----------------------------------------*/
/* ---------------WRAPPER page INDEX---------------------------------------------*/
/* Taille du wrapper en 1400x1050px */
#wrapper {
	clear: both;
	width: 98%;
	height: 1035px;
	position: relative;
/* 	background: url(img_theme/trait_gris_sup.png) no-repeat;
	background-size: contain; */
	margin: 0 auto;
} 

/* supression bordures images (pour compatibilite IE)----*/
#wrapper  img{	
	border: none;
}


/* --------------WRAPPER page INDEX / HEADER -----------------------------------*/

/* Taille du header en full HD*/
#wrapper header {
	position: relative;
	width: 100%;
	max-height: 300px;
	/* background taille haute pour menu sous le village  */
/* 	background: url(img_theme/bg_header.png) no-repeat;	 */
	/* height: 29%; */
	/* background taille réduite pour menu haut de fenetre */
	background: url(img_theme/bg_header_short.png) no-repeat right;
	height: 23%;
	background-size: cover;
	background-position: center;
	border-radius: 0px 0px 5px 5px;
	margin: 0 auto;
}

/* Taille et positionnement du titre invisible pour le référencement */
#wrapper #titre-invisible{
	float: left;
    margin-top: 35px;
    opacity: 0;
	width: 250px;
}


/* Taille et positionnement de la rubrique météo */
/* définit dans le iframe */

/* Taille et positionnement du logo et de l'image du logo 343x127 */
#wrapper header #logo{
	width: 230px;
	height: 95px;
	position: absolute;
	top: 110px;
	left: 38px;
	background: url(img_theme/logo_complet.png) no-repeat;
	background-size: contain;
}
/* Taille et positionnement du village 313x97 */
#wrapper header #village{
	width: 230px;
	height: 70px;
	position: absolute;
	top: 155px;
	left: 445px;
}
/* Taille et positionnement image site_en_cours de creation */
#wrapper header #site_en_cours{
	width: 185px;
/* 	height: 70px; */
	position: fixed;
	top: 0px;
	Right: 1%;
	z-index:1000;
}

/* ---------------------------------- Menu ---------------------- */
/* Zone du Menu ---------------------- */
#wrapper header #menu_header {
	/* pour un affichage permanent  */
	position: fixed;
	width: 98%;
	z-index: 999;
	/* pour un affichage non permanent  */
/* 	position: absolute;
	width: 100%; */
	height: 35px;
	background-size: contain;
	border : none;
	display: block;
	/* left: 0px; */
	/* pour menu sous le village  */
	/* top: 235px; */
	/* background: #3f5121; */
	/* background taille réduite pour menu haut de fenetre */
	background: black;
	border-radius: 0 0 5px 5px;
}

/* Elements communs des li du menu */
#wrapper header #menu_header  li{
	float: left;
	display: block;
	border-right: 1px solid white;
/* 	height: 35px; */
}


/* Icone Home du menu */
#wrapper header #menu_header #li_home{
	border-left: 1px solid white;
	margin-left: 38px;
	line-height: 0px;
}
#wrapper header #menu_header #li_home a, #wrapper header #menu_header #li_home img{
	width:28px;
	height:28px;
	margin: 4px;
}
#wrapper #menu_header li:nth-child(2), #wrapper #menu_header #le_village{
	float: left;
	width: 105px;
}
/* Taille des li et des balises a du menu */
#wrapper #menu_header li:nth-child(3), #wrapper #menu_header #artisans{
	float: left;
	width: 200px;
}
#wrapper #menu_header li:nth-child(4), #wrapper #menu_header #infos{
	float: left;
	width: 150px;
}
#wrapper #menu_header li:nth-child(5), #wrapper #menu_header #asso{
	float: left;
	width: 140px;
}
#wrapper #menu_header li:nth-child(6), #wrapper #menu_header #tourisme{
	float: left;
	width: 100px;
}
#wrapper #menu_header li:nth-child(7), #wrapper #menu_header #agenda{
	float: left;
	width: 190px;
}

/* changement de couleur de fond en survole de la souris sur les menu du header sauf pour l'icone du menu home */
#wrapper #menu_header li:hover{
	background: rgba(255, 255, 255, .5);
}
#wrapper #menu_header #li_home:hover{
	background: rgba(255, 255, 255, 0);
}

/* couleur de fond des sous menu et indication de non affichage des sous menus du header*/
#wrapper #menu_header li ul{
	height: 30px;
	float: left;
	display: none;
}
/* ---------------------------------- Sous Menu ---------------------- */
/* affichage des sous menus en survole des menu*/
#wrapper #menu_header li:hover ul{
	display: block;
	-ms-display: block;
}
/* menu village */
/* couleur de fond lors du survol */
#wrapper #menu_header li:nth-child(2) ul{
	-ms-background: #ed1659;
	-ms-border-radius: 0px 0px 5px 5px;
	background: #ed1659;
	border-radius: 0px 0px 5px 5px;
}
/* couleur de typo des sous menu lors du survol */
#wrapper #menu_header li:nth-child(2) ul li:hover a{
	-ms-background: #ffffff;
	-ms-color: #ed1659;
	-ms-opacity: 0.8;
	background: #ffffff;
	color: #ed1659;
	opacity: 0.8;
	border-radius: 0px 0px 3px 3px;
}
/* menu Artisans */
/* couleur de fond lors du survol */
#wrapper #menu_header li:nth-child(3) ul{
	background: #eb7800;
	/*background: #3cc4de;*/
	border-radius: 0px 0px 5px 5px;
}
/* couleur de typo des sous menu lors du survol */
#wrapper #menu_header li:nth-child(3) ul li:hover a{
	background: #ffffff;
	color: #eb7800;
	opacity: 0.8;
	border-radius: 0px 0px 3px 3px;
}
/* menu Infos pratiques */
/* couleur de fond lors du survol */
#wrapper #menu_header li:nth-child(4) ul{
	background: #00999f ;
	border-radius: 0px 0px 5px 5px;
}
/* couleur de typo des sous menu lors du survol */
#wrapper #menu_header li:nth-child(4) ul li:hover a{
	background: #ffffff;
	color: #00999f ;
	opacity: 0.8;
	border-radius: 0px 0px 3px 3px;
}
/* menu vie associative */
/* couleur de fond lors du survol */
#wrapper #menu_header li:nth-child(5) ul{
	background: #762E7E ;
	border-radius: 0px 0px 5px 5px;
}
/* couleur de typo des sous menu lors du survol */
#wrapper #menu_header li:nth-child(5) ul li:hover a{
	background: #ffffff;
	color: #762E7E ;
	opacity: 0.8;
	border-radius: 0px 0px 3px 3px;
}
/* menu Tourisme*/
/* couleur de fond lors du survol */
#wrapper #menu_header li:nth-child(6) ul{
	background: #b7d523 ;
	border-radius: 0px 0px 5px 5px;
}
/* couleur de typo des sous menu lors du survol */
#wrapper #menu_header li:nth-child(6) ul li:hover a{
	background: #ffffff;
	color: #b7d523 ;
	opacity: 0.8;
	border-radius: 0px 0px 3px 3px;
}
/* menu Agenda */
/* couleur de fond lors du survol */
#wrapper #menu_header li:nth-child(7) ul{
	background: #3cc4de  ;
	border-radius: 0px 0px 5px 5px;
}
/* couleur de typo des sous menu lors du survol */
#wrapper #menu_header li:nth-child(7) ul li:hover a{
	background: #ffffff;
	color: #3cc4de  ;
	opacity: 0.8;
	border-radius: 0px 0px 3px 3px;
}


/* taille des sous menu --------------------------------*/
/* sous menu de la rubrique Le village */
#wrapper #menu_header li:nth-child(2) ul{
	width: 403px;
/* 	display: none; */
}
#wrapper #menu_header li:nth-child(2) ul li:nth-child(1), #wrapper #menu_header li:nth-child(2) ul li:nth-child(1) a{
	width: 120px;
	float: left;
}
#wrapper #menu_header li:nth-child(2) ul li:nth-child(2), #wrapper #menu_header li:nth-child(2) ul li:nth-child(2) a, #wrapper #menu_header li:nth-child(2) ul li:nth-child(3), #wrapper #menu_header li:nth-child(2) ul li:nth-child(3) a{
	width: 140px;
	float: left;
}
#wrapper #menu_header li:nth-child(2) ul li:nth-child(3){
	border: none;
}

/* sous menu de la rubrique Artisans */
#wrapper #menu_header li:nth-child(3) ul{
	width: 496px;
}
#wrapper #menu_header li:nth-child(3) ul li:nth-child(1), #wrapper #menu_header li:nth-child(3) ul li:nth-child(1) a{
	width: 100px;
	float: left;
}
#wrapper #menu_header li:nth-child(3) ul li:nth-child(2), #wrapper #menu_header li:nth-child(3) ul li:nth-child(2) a{
	width: 110px;
	float: left;
}
#wrapper #menu_header li:nth-child(3) ul li:nth-child(3), #wrapper #menu_header li:nth-child(3) ul li:nth-child(3) a{
	width: 125px;
	float: left;
}
#wrapper #menu_header li:nth-child(3) ul li:nth-child(4), #wrapper #menu_header li:nth-child(3) ul li:nth-child(4) a{
	width: 155px;
	float: left;
}
#wrapper #menu_header li:nth-child(3) ul li:nth-child(4){
	border: none;
}


/* sous menu de la rubrique Infos pratiques */
#wrapper #menu_header li:nth-child(4) ul{
	width: 634px;
}
#wrapper #menu_header li:nth-child(4) ul li:nth-child(1), #wrapper #menu_header li:nth-child(4) ul li:nth-child(1) a{
	width: 230px;
	float: left;
}
#wrapper #menu_header li:nth-child(4) ul li:nth-child(2), #wrapper #menu_header li:nth-child(4) ul li:nth-child(2) a{
	width: 180px;
	float: left;
}
#wrapper #menu_header li:nth-child(4) ul li:nth-child(3), #wrapper #menu_header li:nth-child(4) ul li:nth-child(3) a{
	width: 110px;
	float: left;
}
#wrapper #menu_header li:nth-child(4) ul li:nth-child(4), #wrapper #menu_header li:nth-child(4) ul li:nth-child(4) a{
	width: 110px;
	float: left;
}
#wrapper #menu_header li:nth-child(4) ul li:nth-child(4){
	border: none;
}


/* sous menu de la rubrique Vie associative */
#wrapper #menu_header li:nth-child(5) ul{
	width: 322px;
}
#wrapper #menu_header li:nth-child(5) ul li:nth-child(1), #wrapper #menu_header li:nth-child(5) ul li:nth-child(1) a{
	width: 160px;
	float: left;
}
#wrapper #menu_header li:nth-child(5) ul li:nth-child(2), #wrapper #menu_header li:nth-child(5) ul li:nth-child(2) a{
	width: 160px;
	float: left;
}
/*#wrapper #menu_header li:nth-child(5) ul li:nth-child(3), #wrapper #menu_header li:nth-child(5) ul li:nth-child(3) a{
	width: 155px;
	float: left;
}*/
#wrapper #menu_header li:nth-child(5) ul li:nth-child(2){
	border: none;
}


/* sous menu de la rubrique Tourisme */
#wrapper #menu_header li:nth-child(6) ul{
	width: 615px;
}
#wrapper #menu_header li:nth-child(6) ul li:nth-child(1), #wrapper #menu_header li:nth-child(6) ul li:nth-child(1) a{
	width: 125px;
	float: left;
}
#wrapper #menu_header li:nth-child(6) ul li:nth-child(2), #wrapper #menu_header li:nth-child(6) ul li:nth-child(2) a{
	width: 145px;
	float: left;
}
#wrapper #menu_header li:nth-child(6) ul li:nth-child(3), #wrapper #menu_header li:nth-child(6) ul li:nth-child(3) a{
	width: 220px;
	float: left;
}
#wrapper #menu_header li:nth-child(6) ul li:nth-child(4), #wrapper #menu_header li:nth-child(6) ul li:nth-child(4) a{
	width: 120px;
	float: left;
}
#wrapper #menu_header li:nth-child(6) ul li:nth-child(4){
	border: none;
}


/* sous menu de la rubrique Agenda / Actualites */
#wrapper #menu_header li:nth-child(7) ul{
	width: 254px;
}
#wrapper #menu_header li:nth-child(7) ul li:nth-child(1), #wrapper #menu_header li:nth-child(7) ul li:nth-child(1) a{
	width: 185px;
	float: left;
}
#wrapper #menu_header li:nth-child(7) ul li:nth-child(2), #wrapper #menu_header li:nth-child(7) ul li:nth-child(2) a{
	width: 67px;
	float: left;
}
#wrapper #menu_header li:nth-child(7) ul li:nth-child(2){
	border: none;
}


/* --------------WRAPPER page INDEX / Fin du HEADER -----------------------------*/

/* --------------WRAPPER page INDEX / CONTENT -----------------------------------*/

/* Taille du content en full HD*/
#wrapper #content {
	clear: both;
	position: relative;
	width: 102%;
	height: 64%;
	background-size: contain;
	background-position: center;
	margin: 0 auto;
}

/* Taille de la class bloc image des blocs images */
.bloc_image{
/* 	width: 430px; */
	width: 31.6%;
	height: 300px;
	background-color: #9d9b95;
	border-radius: 5px;
	float:left;
	margin: 1.55% 1.55% 0% 0;
}

/* couleur de fond des sous menu et indication de non affichage des sous menus des tuiles images*/
#wrapper #content li{
	height: 30px;
	float: left;
/* 	background: rgba(255, 255, 255, .7); */
	display: none;
}
#wrapper #content ul li:last-child{
	border-radius: 0px 0px 5px 5px;
}
#wrapper #content ul:hover li:last-child:hover a{
	border-radius: 0px 0px 5px 5px;
}

/* affichage des sous menus pour les tuiles images*/
#wrapper #content div:hover li{
	display: block;
	-ms-display: block;
}


/* changement de couleur de fond en survole de la souris sur les sous menus des tuiles */

/* bloc le village */
#wrapper #content #bloc_village li{
	background: #ed1659;
	opacity: 0.9;
}
#wrapper #content #bloc_village li:hover a{
	background: #ffffff;
	color: #ed1659;
	opacity: 0.9;
}

/* bloc artisans */
#wrapper #content #bloc_artisans li{
	background: #eb7800;
	/*background: #3cc4de;*/
	opacity: 0.9;
}
#wrapper #content #bloc_artisans li:hover a{
	background: #ffffff;
	opacity: 0.9;
	color: #eb7800;
}
/* bloc infos pratiques */
#wrapper #content #bloc_infos li{
	background: #00999f;
	opacity: 0.9;
}
#wrapper #content #bloc_infos li:hover a{
	background: #ffffff;
	opacity: 0.9;
	color: #00999f;
}
/* bloc tourisme */
#wrapper #content #bloc_tourisme li{
	background: #b7d523;
	opacity: 0.9;
}
#wrapper #content #bloc_tourisme li:hover a{
	background: #ffffff;
	opacity: 0.9;
	color: #b7d523;
}
/* bloc vie associative */
#wrapper #content #bloc_asso li{
	background: #762E7E;
	opacity: 0.9;
}
#wrapper #content #bloc_asso li:hover a{
	background: #ffffff;
	opacity: 0.9;
	color: #762E7E;
}
/* bloc agenda */
#wrapper #content #bloc_agenda li{
	/*background: #4b2814;*/
	background: #3cc4de;
	opacity: 0.9;
}
#wrapper #content #bloc_agenda li:hover a{
	background: #ffffff;
	opacity: 0.9;
	color: #3cc4de;
}

/* Positionnement du bloc ul et des titre de chaque image bloc */
#wrapper #content  ul{
	width: 80%;
	height: 160px;
	margin: 130px auto 0 auto;
}
#wrapper #content  ul h3{
	border-bottom: 1px solid white;
	display: block;
}

/* Taille et positionnement des sous menus des tuiles images */
#wrapper #content  li{
	width: 100%;
	height: 30px;
	margin: 4px auto 0 auto;
}
#wrapper #content  a{
	width: 100%;
	display: block;
}

/* Retaille pour le titre demarches admin*/
#wrapper #content #bloc_infos li:nth-child(2) a{
	letter-spacing: 0px;
	
}


/* -------------- Image de fond des blocs image* -----------/
/* Image de fond du bloc image Village et effet de survole */
#wrapper #content #bloc_village{
	background: url(img_theme/img3_village.png) no-repeat #9d9b95;
	background-size: cover;
}
#wrapper #content #bloc_village:hover{
	background: url(img_theme/img3_village_opaque.png) no-repeat #9d9b95;
	background-size: cover;
}
/* Image de fond du bloc image artisans et effet de survole */
#wrapper #content #bloc_artisans {
	background: url(img_theme/img2_artisans.png) no-repeat #9d9b95;
	background-size: cover;
}
#wrapper #content #bloc_artisans:hover{
	background: url(img_theme/img2_artisans_opaque.png) no-repeat #9d9b95;
	background-size: cover;
}
/* Image de fond du bloc_infos et effet de survole */
#wrapper #content #bloc_infos{
	background: url(img_theme/img1_infos.png) no-repeat #9d9b95;
	background-size: cover;
}
#wrapper #content #bloc_infos:hover{
	background: url(img_theme/img1_infos_opaque.png) no-repeat #9d9b95;
	background-size: cover;
}
/* Image de fond du bloc_asso et effet de survole */
#wrapper #content #bloc_asso{
	background: url(img_theme/img1_asso.png) no-repeat #9d9b95;
	background-size: cover;
}
#wrapper #content #bloc_asso:hover{
	background: url(img_theme/img1_asso_opaque.png) no-repeat #9d9b95;
	background-size: cover;
}/* Image de fond du bloc_tourisme et effet de survole */
#wrapper #content #bloc_tourisme{
	background: url(img_theme/img1_tourisme.png) no-repeat #9d9b95;
	background-size: cover;
}
#wrapper #content #bloc_tourisme:hover{
	background: url(img_theme/img1_tourisme_opaque.png) no-repeat #9d9b95;
	background-size: cover;
}
/* Image de fond du bloc_agenda et effet de survole */
#wrapper #content #bloc_agenda{
	background: url(img_theme/img2_agenda.png) no-repeat #9d9b95;
	background-size: cover;
}
#wrapper #content #bloc_agenda:hover{
	background: url(img_theme/img2_agenda_opaque.png) no-repeat #9d9b95;
	background-size: cover;
}
/* Taille et couleur - Typo des titres et textes du bloc infos_mairie */
/* Taille et couleur fond */
#infos_mairie {
	width: 98%;
	clear: both;
	height: 23%;
	max-height: 45%;
	float: left;
	background: #a9cb40;
	margin: 1.55% 1% 0 0;
	border-radius: 5px 5px 5px 5px;
}
/* Taille et couleur texte */
#infos_mairie h3{
	font-size: 90%;
	width: 125px;
	line-height: 135px;
	float: left;
	border-right: 1px solid white;
	margin: 9px 20px 0 0;
}
#infos_mairie p:nth-child(2){
	float: left;
	margin: 9px 15px;
}
/*#infos_mairie p:nth-child(2) span{
	font-weight: bold;
}*/
#infos_mairie p:nth-child(3){
	width: 2px;
	float: left;
	height: 135px;
	border-left: 1px solid white;
	margin: 9px auto;
}

/* iframe meteo---------------------------------------*/
/* Taille de l'iframe meteo france */
/*#wrapper #infos_mairie #widget_autocomplete_preview {
	width: 450px;
	height: 150px;
	float: left;
}
/* fin iframe meteo france-----------------------------------*/




/* ____________________________________________________________________________ */
/* --------------WRAPPER page INDEX / Fin du CONTENT ---------------------------*/


/* --------------WRAPPER page INDEX / FOOTER -----------------------------------*/
/* ____________________________________________________________________________ */
/* Taille du content en full : 1400x1050px */
footer {
	clear: both;
	position: relative;
	width: 98%;
	min-height: 65px;
	max-height: 80px;
	height: 7%;
	/* background: #a9cb40; */
	background:  #a9cb40;
	background-size: contain;
	border-radius: 5px 5px 0px 0px;
	margin: 1.5% auto 0 auto;
}
/* Taille et positionnement du logo maurienne */
footer img{
	width: 54px;
	height: 59px;
	float: left;
	margin: 5px 30px 0 38px;
}
/* Taille et positionnement des rubriques du footer */
footer a:nth-child(2), footer a:nth-child(3), footer a:nth-child(4), footer h3:nth-child(5){
	width: 150px;
	float: left;
	display: block;
	margin: 20px auto;
	border-left: 1px solid white;
}
/* Taille et positionnement de la rubrique conception du footer et de l'adresse email*/
footer a:nth-child(6){
	width: 150px;
	float: left;
	display: block;
	margin: 20px auto auto -15px;
	/* color: black; */
	color: white;
	/* font-weight: bold; */
}
footer a:nth-child(7){
	width: 230px;
	float: left;
	display: block;
	margin: 34px auto auto -150px;
	font-size: 80%;
}
/* ____________________________________________________________________________ */
/* --------------WRAPPER page INDEX / Fin du FOOTER ----------------------------*/





/* _____________________________________________________________________________ */

/* __________________________PAGE VILLAGE-HISTOIRE______________________________ */
/* _____________________________________________________________________________ */

/* --------------WRAPPER page VILLAGE-HISTOIRE / CONTENT ------------------------*/

/* Taille du content_vh */
#wrapper #content_vh {
	clear: both;
	position: relative;
	margin: 0;
}
/* div histoire-----------------------------*/
/* Taille de la div histoire*/
#wrapper #content_vh #histoire{
	width: 44%;
	position: relative;
	margin: 0;
}
#wrapper #content_vh #histoire span, #tableaux_insee span{
	color: #91b851;
	text-align: left;
}
/* Taille et position du titre h2*/
#wrapper #content_vh h2{
	font-size: 150%;
	color: #ed1659;
}
/* Taille et position du bloc histoire */
#wrapper #content_vh #histoire p{
	width: 98%;
	float:left;
	margin: 2% 2% 5% 4%;
}
/* fin div histoire-----------------------------*/


/* div slider-----------------------------------*/
/* le css a été dissocié et figure dans la feuille de style style-slider-histoire */
/* fin div slider-----------------------------------*/

/* div blason---------------------------------------*/
/* Taille de la div blason */
#wrapper #content_vh #blason{
	width: 98%;
	float:left;
}
#wrapper #content_vh #blason img{
	width: 9%;
	min-width: 100px;
	float:left;
	margin: 0 2% 3% 2%;
}

/* Taille et couleur - Typo des titres et textes du bloc blason */
#wrapper #content_vh #blason p {
	width: 80%;
	float: right;
	height: 35%;
/* 	max-height: 90px; */
	background: #a1010d;
	margin: auto;
	padding: 1%;
	border-radius: 5px 5px 5px 5px;
	font-size: 80%;
}
/* fin div blason-----------------------------------*/


/* div tableaux_insee--------------------------------------------*/
#wrapper #content_vh #tableaux_insee{
	width: 98%;
	position: relative;
}
/* section tableaux_insee_gauche------------------------*/
/* Taille de la section tableaux_insee_gauche */
#wrapper #content_vh #tableaux_insee_gauche{
	width: 48%;
	min-width: 300px;
	float: left; 
}
#wrapper #content_vh #chiffres-cles1{
	margin: 2% 0% 3% 5%;
}
/* div tableaux_insee_droite---------------------------------------*/
/* Taille de la section tableaux_insee_droite */
#wrapper #content_vh #tableaux_insee_droite{
	width: 40%;
	min-width: 280px;
	float: right; 
}
/* Marge du tableau chiffres-cles2 & chiffres-cles3 */
#wrapper #content_vh #chiffres-cles2, #wrapper #content_vh #chiffres-cles3{
	margin: 15% 2% 3% 0%;
}
/* Taille du diagrame */
#wrapper #content_vh #tableaux_insee_droite img{
	width: 100%;
	min-width: 300px;
	float: left;
	margin: 0% 2% 10% 0%;
}
/* ________________________FIN PAGE VILLAGE-HISTOIRE___________________________ */




/* ____________________________________________________________________________ */

/* __________________________PAGE VILLAGE-LOCALISATION__________________________ */
/* _____________________________________________________________________________ */

/* --------------WRAPPER page VILLAGE-LOCALISATION / CONTENT --------------------*/

/* Taille du content_vl */
#wrapper #content_vl {
	clear: both;
	margin: auto;
}
/* Taille et position du titre h2*/
#wrapper #content_vl h2{
	font-size: 150%;
	color: #ed1659;
}
#wrapper #content_vl #localisation h2{
	margin: 10px 0 5px 20px;
}
/* div localisation-----------------------------*/
/* Taille de la div localisation*/
#wrapper #content_vl #localisation{
	width: 33%;
	float: left;
	margin: 0;
}
#wrapper #content_vl #tableaux_geographie h2{
	margin: 0 0 3% 5%;
}
#wrapper #content_vl #localisation span, #wrapper #content_vl #tableaux_geographie h3 span{
	color: #91b851;
	text-align: left;
}

/* Taille et position du bloc localisation */
#wrapper #content_vl #localisation p{
	float:left;
	margin: 2% 2% 5% 5%;
}
/* fin div localisation-------*/

/* div street_map-----------------------------*/
/* Taille de la div bloc_street_map - fond de la div */
#wrapper #content_vl #bloc_street_map{
	float: left;
    height: 475px;
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	border-radius: 5px 5px 5px 5px;
    margin: 0 0 3% 3%;
    width: 64%;
}
/* Taille de la div street_map*/
#wrapper #content_vl #street_map{
	position: center;
	border-radius: 5px;
    height: 94%;
    margin: 2%;
    width: 96%;
}
/* fin div bloc_street_map---------*/
/* div tableaux_geographie-----------------------------*/
/* Taille de la div ---*/
#wrapper #content_vl #tableaux_geographie{
	width: 60%;
	min-width: 300px;
	float: left;
	margin-left: 33%;
}
/* Taille des collones */
#wrapper #content_vl #tableaux_geographie .tab_col1{
	width: 20%;
}
#wrapper #content_vl #tableaux_geographie #chiffres-cles4{
	margin: 2% 0% 3% 20%;
}	
/* fin div tableaux_geographie-----*/

/* ________________________FIN PAGE VILLAGE-LOCALISATION_______________________ */


/* ____________________________________________________________________________ */

/* __________________________PAGE MAIRIE-LES ELUS______________________________ */
/* _____________________________________________________________________________ */

/* --------------WRAPPER page MAIRIE-LES ELUS / CONTENT ------------------------*/
/* --------------CONTENU SUPPRIME sauf bloc mairie a adapter--------------------*/


/* _____________________________________________________________________ */

/* _________________________PAGE MAIRIE-LES COMMISSIONS__________________ */
/* _______________________________________________________________________*/

/* --------WRAPPER page MAIRIE-LES COMMISSIONS/ CONTENT ---------------*/
/* --------------CONTENU SUPPRIME -------------------------------------*/



/* ________________________________PAGE CONTACT________________________ */
/* _____________________________________________________________________ */
/* zone formulaire---------------------------*/
/* taille et positionnement de la zone content_form qui contiendra le formulaire de contact  */
/* Taille du content_mc */
#wrapper #content_form{
	clear: both;
	position: relative;
	width: 100%;
/* 	margin: auto; */
	height: 600px;
	border: none;
}

/* taille et position pour la section qui va contenir le bloc formulaire */
#wrapper #zone1_form{
	float: left;
	width: 80%;
	height: 90%;
	margin: 4% 0 0 10%;
	margin: 4% 0 0 10%;
	border: none;
	background: radial-gradient(#0dd3da, #0f8e93); /* Standard syntax */
	background: -webkit-radial-gradient(#0dd3da, #0f8e93); /* Safari 5.1 to 6.0 */
	background: -o-rradial-gradient(#0dd3da, #0f8e93); /* Opera 11.1 to 12.0 */
	background: -moz-radial-gradient(#0dd3da, #0f8e93); /* Firefox 3.6 to 15 */
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
	border-radius: 5px 5px 5px 5px;
}
/* taille et position pour le titre h1 du bloc formulaire */
#wrapper #zone1_form h2{
	width: 100%;
	display: block;
	border: none;
	margin: 0;
	color: white;
	background: linear-gradient( 
		#bcbcbc 0%,
		#777777 100%);
	border-radius: 5px 5px 0 0;
	text-align: center;
	letter-spacing: 1.5px;
}
/* taille et position pour le bloc formulaire */
#wrapper #form_contact{
	border: none;
    height: 280px;
    padding: 2%;
    width: 96%;
}
/* taille et position des bloc zone1 et zone 2 */
#wrapper #zone1, #wrapper #zone2{
	width:50%;
	float:left;
	border: none;
}
#wrapper #zone2{
	margin-top: 33px;
}

/* taille et position / typo des libelles des champs de saisie  */
#wrapper #zone1 label, #wrapper #zone2 label{
	float:left;
	border: none;
	width: 115px;
	line-height: 25px;
	display: block;
	font-family: "Caviar Dreams", " Arial", "Tahoma";
	font-weight: normal;
	text-transform: initial;
	text-align: left;
	color: white;
	
}
/* taille des champs de saisie  */
#wrapper #zone1 input{
	width:90%;
	max-width: 310px;
}
#zone2 textarea {
	width:97%;
	margin-top: 2%;
	height: 300px;
}
/* typo des libelles des champs de saisie  */
#wrapper #zone1 input, #zone2 textarea {
	font-size: 90%;
	line-height: 25px;
	display: block;
	float:left;
	font-family: "Caviar Dreams", " Arial", "Tahoma";
	font-weight: normal;
	text-transform: initial;
	text-align: left;
	color: grey;
	background-color: white;
	border-radius: 5px 5px 5px 5px;
	margin-bottom: 2%;
	padding-left: 1%;
}
/* le retour va faire un renvoi a une reinitialisation du positionnement
- on definit directement pour la class les proprietes*/
.retour{
	clear: both;
	width: 130px;
	height: 25px;
}
/* taille et position des 2 radio bouton */
#wrapper #zone1 input:nth-child(1), #wrapper #zone1 input:nth-child(3){
	width: 20px;
	height: 25px;
}
#wrapper #zone1 label:nth-child(2), #wrapper #zone1 label:nth-child(4){
	width: 40px;
	height: 25px;
}
/* -------------zone saisie droite--------------------*/
/* taille et position de la case a cocher */
#wrapper #zone2 input:nth-child(4){
	float:left;
	width:20px;
	height: 25px;
}
#wrapper #zone2 label:nth-child(3){
	width:65%;
}
/* taille et position du bouton OK */
#wrapper #zone2 input:nth-child(5){
	float:left;
	width:100px;
	height: 49px;
	border: none;
	background: url(img_theme/bouton_envoi_contact.png) no-repeat;
	margin: 4% 0 0 75%;
}
/* ________________________________________________________________________*/
 
 
/* ____________________________________________________________________________ */

/* _________________________PAGE MENTIONS LEGALES _____________________________ */
/* ____________________________________________________________________________ */

/* --------WRAPPER page MENTIONS LEGALES / CONTENT ------------------------*/

/* Taille du content_mentions_legales ---*/
#wrapper #content_mention_legales {
	clear: both;
	position: relative;
	width: 100%;
	margin: auto;
}

/* Taille et position du titre */
#wrapper #content_mention_legales h1{
	color: red;
	text-align: left;
	font-size: 150%;
}
#wrapper #content_mention_legales h2{
	color: white;
	text-align: center;
}

/* div bloc section1 section 2 & section3 -----------------------------*/
/* couleur span-----------------------------*/
#wrapper #content_mention_legales #section3 p span{
	color: #ed1659;
}
/* Taille des sections */
#wrapper #content_mention_legales  #section1{	
	width: 26%;
	height: 800px;
	max-height: 3500px;
	border: none;
	float: left;
	margin: 1% 2% 2% 0;
}
#wrapper #content_mention_legales  #section2 {	
	width: 32%;
	height: 1000px;
	max-height: 3500px;
	border: none;
}
#wrapper #content_mention_legales  #section3{	
	width: 37%;
	height: 800px;
	max-height: 3500px;
	border: none;
}
/* bloc aside limitation technique ---------*/
/* Taille */
#wrapper #content_mention_legales  #lim_tech{	
	width: 97%;
	border: none;
	height: 250px;
	max-height: 500px;
	float: left;
	background: white;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	margin: 10% 0 0;
}

/* marges et couleur des fonds des sections et articles */
#wrapper #content_mention_legales #section1 #realisation{	
	background: #475618;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	margin: 1% 2% 1% 0;
}
#wrapper #content_mention_legales #section2{	
	float: left;
	margin: 1% 2% 1% 0;
}
#wrapper #content_mention_legales #section3{	
	float: right;
	height: 45%;
	background: white;
	border-radius: 5px 5px 5px 5px;
	margin: 1% 0% 1% 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5)
}
/* taille et couleur des articles de la section2 */
#wrapper #content_mention_legales #section2 #copyright {	
	width: 100%;
	height: 45%;
	background: #8dab2f;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	float: left;
	margin: 0% 0% 10% 0%;
}
#wrapper #content_mention_legales #section2 #cnil {	
	width: 100%;
	height: 48%;
	background: #a9cb40;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	float: left;
	margin: auto;
}
/* taille des bloc et gestion des marges */
#wrapper #content_mention_legales h2{
	margin: 15px 0 25px 0;
}
#wrapper #content_mention_legales #section2 #cnil h2, #wrapper #content_mention_legales #section3 h2{
	color: #475618;
}
#wrapper #content_mention_legales h3{
	margin: 0% 5% 2% 5%;
}
#wrapper #content_mention_legales p{
	margin: 0% 5% 0 5%;
}
/* ________________________________________________________________________*/
 
 
/* ____________________________________________________________________________ */

/* _________________________PAGE MAIRIE - BULLETIN ____________________________ */
/* ____________________________________________________________________________ */
/* ---A PAGE EST SUPPRIMEE - LE SYTLE EST NON SUPPRIME SI RAJOUT DANS LE FUTUR--*/

/* --------WRAPPER page MAIRIE - BULLETIN ------------------------*/

/* Taille du content_mentions_legales ---*/
#wrapper #content_bulletin {
	clear: both;
	position: relative;
	width: 100%;
	margin: auto;
}
/* Taille et position du titre h2*/
#wrapper #content_bulletin h2{
	font-size: 150%;
	color: #3cc4de;
}
/* Taille des titres h3*/
#wrapper #content_bulletin h3{
	color: #005a7e;
	font-size: 90%;
	margin: 0 0 10px 0;
}
/* Taille et de la div liens et positionnement des bulletins */
#wrapper #content_bulletin #bulletins{
	width: 60%;
	float: left;
/* 	padding: 1% 1% 1% 1%; */
}
#wrapper #content_bulletin #bulletins img{
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
/* Taille et position du titre h3 anciens no*/
#wrapper #content_bulletin ul h3:nth-child(2){
	width: 98%;
	font-size: 110%;
	color: #3cc4de;
	height: 30px;
	float: left;
	text-align: left;
	margin: 10px 0 0 20px;
}
/* Taille et de la div liens et positionnement des anciens bulletins*/
#wrapper #content_bulletin #bulletins li{
	width: 30%;
	min-width: 280px;
	float: left;
	margin: 20px 0 20px 20px;
}
/* Taille et de la div liens et positionnement du dernier bulletins édité*/
#wrapper #content_bulletin #bulletins li:nth-child(1) {
	width: 100%;
	float: left;
	margin: 10px 0px 20px 20px;
}
/* Taille et de la div liens et positionnement des liens */
#wrapper #content_bulletin #liens{
	width: 36%;
	background: linear-gradient(to left, #5d0101, #d50a0a); /* Standard syntax */
	background: -webkit-linear-gradient(left, #5d0101, white); /* Safari 5.1 to 6.0 */
	background: -o-linear-gradient(left, #5d0101, white); /* Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(to left, #5d0101, #d50a0a); /* Firefox 3.6 to 15 */
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius: 5px 5px 5px 5px;
	float: right;
	margin: auto;
	padding: 2% 2% 2% 2%;
}
#wrapper #content_bulletin #liens p{
	width: 100%;
	font-size: 80%;
	float: left;
	color: white;
	margin : auto;
}
#wrapper #content_bulletin #liens a:nth-child(2) img{
	float: left;
	margin: 2% 0 0 20%;
}
#wrapper #content_bulletin #liens a:nth-child(3) img{
	float: left;
	margin: 2% 0 0 20%;
}
/* ________________________________________________________________________*/
 
 
/* ____________________________________________________________________________ */

/* _________________________PAGE MAIRIE - COMCOM_____________________________ */
/* ____________________________________________________________________________ */

/* ---------WRAPPER page MAIRIE - COMCOM ------------------------*/
/* --------------CONTENU SUPPRIME -------------------------------*/

/* ________________________________________________________________________*/


/* ____________________________________________________________________________ */

/* ____________________PAGE DEMARCHES ADMINISTRATIVES _________________________ */
/* ____________________________________________________________________________ */

/* --------WRAPPER page DEMARCHES ADMINISTRATIVES --------------------*/


/* Taille et position du bloc texte warning */

#wrapper #content_demarches #warning p {
	color: black;
	font-size: 100%;
    height: 45%;
	padding: 5px 5px 5px 5px;
    text-align: left;
    width: 80%;
	margin: 0% 1% 2% 2%;
}


/* Taille et position du bloc infos_mairie */
#wrapper #content_demarches #infos_mairie {
	background-color: #005a7e;
	max-height: 350px;
	max-width: 470px;
	min-width: 400px;
	width: 39%;
	margin: 2% 2% 10% 2%;
}
#wrapper #content_demarches #infos_mairie h3{
	color: white;
    height: 215px;
    margin: 2.5% 0 0 4%;
    text-align: left;
    width: 15%;
}
#wrapper #content_demarches #infos_mairie p{
	border: none;
	width: 73%;
	font-size: 90%;
}


/* Taille du content_demarches ---*/
#wrapper #content_demarches {
	clear: both;
	position: relative;
	width: 100%;
	margin: auto;
}
/* Taille et position du titre h2*/
#wrapper #content_demarches h2{
	font-size: 150%;
	color: #00999f;
}
/* Taille et position des bloc ul*/
#wrapper #content_demarches ul{	
	border: none;
	float: left;
	margin: 0 50px 0 0;
}
/* Couleur des bouton menu normal + hover */
#wrapper #content_demarches ul li:nth-child(1){	
	background: #12b4ba;
}
#wrapper #content_demarches ul li:nth-child(2){	
	background: #0e9fa4;
}
#wrapper #content_demarches ul li:nth-child(3){	
	background: #087a84;
}
#wrapper #content_demarches ul li:hover{	
	background: white;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
#wrapper #content_demarches li:hover h3{	
	color: #00999f;
}

/* ____________________________________________________________________________ */

/* ____________________PAGE DEMARCHES ADMINISTRATIVES - naissance - mariage */
/* deces - livret - recensement - etat civil__________________________ */

/* WRAPPER page DEMARCHES ADMINISTRATIVES - naissance - mariage - deces- livret - recencement - etat civil _______________________________________________________/

/* Taille des content  ---*/
#wrapper #content_demarches_naissance, #wrapper #content_demarches_mariage, #wrapper #content_demarches_deces, #content_demarches_livret, #content_demarches_recensement, #content_demarches_identite{
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}

/* Animation des pages enfants lors chargement fenetres ---*/
#wrapper #content_demarches_naissance, #wrapper #content_demarches_mariage, #wrapper #content_demarches_deces, #content_demarches_livret, #content_demarches_recensement, #content_demarches_identite{
	animation: SubMenuAnimIn1 0.4s ease;
	transition: all 1.4s cubic-bezier(.49,.22,.52,1);
}


/* Taille du bloc1 de la page etat civil identite ---*/
#wrapper #content_demarches_identite #bloc1{
	width: 100%; 
	margin: auto;
	float: left;
}

/* Taille du bloc condition préalable de la page mariage ---*/
#wrapper #content_demarches_mariage #bloc1_gauche{
	width: 94%; 
	margin: 20px 0 10px 20px;
	max-width: initial;
}
/* puces condition préalable de la page mariage ---*/
#wrapper #content_demarches_mariage #bloc1_gauche li{
	list-style: square;
	margin: 0 0 0 15px;
}

/* Taille et position du titre h2*/
#wrapper #content_demarches_naissance h2, #wrapper #content_demarches_mariage h2, #wrapper #content_demarches_deces h2, #wrapper #content_demarches_livret h2, #wrapper #content_demarches_recensement h2, #wrapper #content_demarches_identite h2{
	font-size: 150%;
	color: #00999f;
}
/* Taille et position du bouton retour menu effet hover */
#wrapper #content_demarches_naissance a img, #wrapper #content_demarches_mariage a img, #wrapper #content_demarches_deces a img, #wrapper #content_demarches_livret a img, #wrapper #content_demarches_recensement a img, #wrapper #content_demarches_identite a img{
	margin: 0 0 0 5%;
	vertical-align: -30%;
	width: 150px; /*-- Retaille qu'il faudrait appliquer à tous les boutons retours */
	float: right;  /* a appliquer aux boutons retour menu pour éviter problème en responsive*/
}
#wrapper #content_demarches_naissance a img:hover, #wrapper #content_demarches_mariage a img:hover, #wrapper #content_demarches_deces a img:hover, #wrapper #content_demarches_livret a img:hover, #wrapper #content_demarches_recensement a img:hover, #wrapper #content_demarches_identite a img:hover{	
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius: 10px;
}
/* couleur des titre h3*/
#wrapper #content_demarches_naissance #bloc1_gauche h3, #wrapper #content_demarches_naissance #bloc2_gauche h3, #wrapper #content_demarches_naissance #bloc3_gauche h3{
	color: #00999f;
}
#wrapper #content_demarches_mariage #bloc1_gauche h3, #wrapper #content_demarches_mariage #bloc2_gauche h3, #wrapper #content_demarches_mariage #bloc3_gauche h3, #wrapper #content_demarches_mariage #bloc4_gauche h3{
	color: #00999f;
}
#wrapper #content_demarches_deces #bloc1_gauche h3, #wrapper #content_demarches_deces #bloc2_gauche h3, #wrapper #content_demarches_deces #bloc3_gauche h3{
	color: #00999f;
}
#wrapper #content_demarches_livret #bloc1_gauche h3, #wrapper #content_demarches_livret #bloc2_gauche h3{
	color: #00999f;
}
#wrapper #content_demarches_recensement #bloc1_gauche h3, #wrapper #content_demarches_recensement #bloc2_gauche h3, #wrapper #content_demarches_recensement #bloc3_gauche h3{
	color: #00999f;
}
#wrapper #content_demarches_identite #bloc1_gauche h3, #wrapper #content_demarches_identite #bloc2_gauche h3{
	color: #00999f;
}

/* Couleur et position des bloc pieces a fournir */
#wrapper #content_demarches_naissance .bloc_info_droite section, #wrapper #content_demarches_mariage .bloc_info_droite section, #wrapper #content_demarches_deces .bloc_info_droite section, #wrapper #content_demarches_livret .bloc_info_droite section, #wrapper #content_demarches_recensement .bloc_info_droite section, #wrapper #content_demarches_identite .bloc_info_droite section{
	background: #12b4ba;
	margin: 40px 0 0 0 ;
}
#wrapper #content_demarches_naissance .bloc_info_droite section h3, #wrapper #content_demarches_mariage .bloc_info_droite section h3, #wrapper #content_demarches_deces .bloc_info_droite section h3, #wrapper #content_demarches_livret .bloc_info_droite section h3, #wrapper #content_demarches_recensement .bloc_info_droite section h3, #wrapper #content_demarches_identite .bloc_info_droite section h3{
	color: white;
}
/* puce des listes des bloc droite */
#wrapper #content_demarches_naissance .bloc_info_droite section li, #wrapper #content_demarches_mariage .bloc_info_droite section li, #wrapper #content_demarches_deces .bloc_info_droite section li, #wrapper #content_demarches_livret .bloc_info_droite section li, #wrapper #content_demarches_recensement .bloc_info_droite section li, #wrapper #content_demarches_identite .bloc_info_droite section li{
	list-style-type:square;
}
/* justification texte ul dans pieces a fournir */
.bloc_info_droite ul {
/*     text-align: left; */
    width: 98%;
}
/* ____________________________________________________________________________ */

/* ____________________PAGE INFO PRATIQUES - EAU __________________________ */

/* WRAPPER page INFO PRATIQUES - Eau - assainissement __________________*/
/* Taille des content  ---*/
#wrapper #content_eau {
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}

/* Taille et position du titre h2*/
#wrapper #content_eau h2{
	font-size: 150%;
	color: #00999f;
}
/* Taille et position du titre h3 pour ajustement img */
#wrapper #content_eau  #bloc1 #bloc1_gauche h3{
	height: 105px;
}


/* Taille du bouton "retour haut" effet hover */
#wrapper #content_eau #bloc1 li img, #wrapper #content_eau #bloc2_gauche li img{	
	width: 100px; /*-- Retaille qu'il faudrait appliquer à tous les boutons retours */
	margin: 0 0 0 5%;
}

/* hover  sur les boutons eau / assainissement / retour haut*/
#wrapper #content_eau ul li:hover img{	
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius : 10px;
}

/* Taille et position des bloc1 et bloc2 */
#wrapper #content_eau #bloc1, #wrapper #content_eau #bloc2{
	width: 100%; 
	margin: auto;
	float: left;
}
/* retaille des bloc gauche et droite */
#wrapper #content_eau .bloc_info_gauche{
	width: 55%;
}
#wrapper #content_eau .bloc_contact{
	width: 55%;
}
#wrapper #content_eau .bloc_info_droite{
	width: 33%;
}
/* Taille et position de l'img contenu dans le h3*/
#wrapper #content_eau  #bloc1 #bloc1_gauche h3 img{
	height: 85px;
	float: right;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius: 5px 5px 5px 5px;
	margin: -45px 5px 0 0;
}
#wrapper #content_eau #bloc1_gauche h3, #wrapper #content_eau #bloc2_gauche h3{
	color: #00999f;
}
/* taille icone pdf telecharger tableaux*/
.texte_bloc_noir img{
	width: 30px;
}
/* couleur des entete des tableaux*/
#wrapper #content_eau .titre-tab1{
	background-color: #005a7e
}
/* largeur et largeur max des tableaux*/
#wrapper #content_eau table{
/* 	max-width: 500px; */
    width: 100%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
} 
 


/* ____________________PAGE INFOS PRATIQUES - URBANISME ______________ */

/* Taille et position du bloc warning */

#wrapper #content_urbanisme #warning p {
	color: black;
	font-size: 100%;
    height: 45%;
	padding: 5px 5px 5px 5px;
    text-align: left;
    width: 80%;
	margin: -1% 1% 2% 2%;
}

/* Taille et position du bloc infos_mairie */
#wrapper #content_urbanisme #infos_mairie {
	background-color: #53696B;
	max-height: 350px;
	max-width: 470px;
	min-width: 400px;
	width: 72%;
	margin: 2% 2% 10% 2%;
}
#wrapper #content_urbanisme #infos_mairie h3{
	color: white;
    height: 215px;
    margin: 2.5% 1% 0 4%;
    text-align: left;
    width: 15%;
	font-size: 85%;
}
#wrapper #content_urbanisme #infos_mairie p{
	border: none;
	width: 69%;
	font-size: 90%;
}
/* travaux - construire - certificats __________________________ */
/* WRAPPER page INFOS PRATIQUES - URBANISME -  travaux - construire - certificats _________________________________________________________________ */

/* Taille des content  ---*/
#wrapper #content_urbanisme, #wrapper #content_urbanisme_travaux, #wrapper #content_urbanisme_construire, #content_urbanisme_certificat{
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}
/* Taille et position du titre h2*/
#wrapper #content_urbanisme h2{
	font-size: 150%;
	color: #354445;
	margin: 4% 2% 2% 1%;
}


/* Taille et position des bloc ul - boutons */
#wrapper #content_urbanisme ul{	
	border: none;
	float: left;
	margin: 0 50px 0 10px;
}
/* Couleur des bouton menu normal + hover */
#wrapper #content_urbanisme ul li:nth-child(1){	
	background: #a1b6b7;
}
#wrapper #content_urbanisme ul li:nth-child(2){	
	background: #53696B;
}
#wrapper #content_urbanisme ul li:nth-child(3){	
	background: #354445;
}
#wrapper #content_urbanisme ul li:hover{	
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	background: white;
}
#wrapper #content_urbanisme li:hover h3{	
	color: #53696B;
}


/* Taille du bouton "retour haut" */
#wrapper #content_urbanisme_travaux #r_h img, #wrapper #content_urbanisme_construire #r_h img, #wrapper #content_urbanisme_certificat #r_h img{	
	width: 100px; /*-- Retaille qu'il faudrait appliquer à tous les boutons retours */
	margin: 0 0 0 5%;
}

/* hover  sur les boutons travaux / demarche / decision / retour*/
#wrapper #content_urbanisme_travaux ul li:hover img, #wrapper #content_urbanisme_construire ul li:hover img, #wrapper #content_urbanisme_certificat ul li:hover img{	
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius : 10px;
}

/* Taille et position du titre h2*/
#wrapper #content_urbanisme h2, #wrapper #content_urbanisme_travaux h2, #wrapper #content_urbanisme_construire h2, #content_urbanisme_certificat h2{
	font-size: 150%;
	color: #00999f;
}

/* Taille et position du bouton retour effet hover */
#wrapper #content_urbanisme_travaux h2 a img{
	margin: 0 0 0 25px;
	vertical-align: -40%;
	float: right;  /* a appliquer aux boutons retour menu pour éviter problème en responsive*/
	width: 150px; /*-- Retaille qu'il faudrait appliquer à tous les boutons retours */
}/* Taille et position du bouton retour effet hover */
#wrapper #content_urbanisme_construire h2 a img{
	margin: 0 0 0 177px;
	vertical-align: -40%;
	float: right;  /* a appliquer aux boutons retour menu pour éviter problème en responsive*/
	width: 150px; /*-- Retaille qu'il faudrait appliquer à tous les boutons retours */
}
#content_urbanisme_certificat h2 a img{
	margin: 0 0 0 164px;
	vertical-align: -40%;
	float: right;  /* a appliquer aux boutons retour menu pour éviter problème en responsive*/
	width: 150px; /*-- Retaille qu'il faudrait appliquer à tous les boutons retours */
}
#wrapper #content_urbanisme h2 a img:hover, #wrapper #content_urbanisme_travaux h2 a img:hover, #wrapper #content_urbanisme_construire h2 a img:hover, #content_urbanisme_certificat h2 a img:hover{	
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius: 10px;
}
/* couleur des titre h3*/
#wrapper #content_urbanisme #bloc1_gauche h3, #wrapper #infos_content_urbanisme #bloc2_gauche h3, #wrapper #infos_content_urbanisme #bloc3_gauche h3{
	color: #00999f;
}

/* couleur de fond entete tableaux*/
#wrapper #content_urbanisme_travaux #bloc2_droite .titre-tab1, #wrapper #content_urbanisme_construire #bloc2_droite .titre-tab1, #wrapper #content_urbanisme_certificat #bloc2_droite .titre-tab1{
	background-color: #53696B;
}

/* Animation des pages enfants lors chargement fenetres ---*/
#wrapper #content_urbanisme_travaux, #wrapper #content_urbanisme_construire, #content_urbanisme_certificat{
	animation: SubMenuAnimIn1 0.5s ease;
}


/* ____________________PAGE INFOS PRATIQUES - DECHETTERIE ______________ */
/* _____________________________ dechetterie  __________________________ */

/* WRAPPER page INFOS PRATIQUES - dechettereie __________________________*/
/* Taille des content  ---*/
#wrapper #content_dechetterie{
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}
/* Taille et position du titre h2*/
#wrapper #content_dechetterie h2{
	font-size: 150%;
	color: #00999f;
}
#wrapper #content_dechetterie #bloc1_gauche h3, #wrapper #content_dechetterie #bloc2_gauche h3 , #wrapper #content_dechetterie #bloc3_gauche h3 {
    color: #00999f;
}
#wrapper #content_dechetterie h4 {
	color: #00999f;
	font-size: 100%;
	text-align: center;
}
#wrapper #content_dechetterie #bloc2_gauche span {
    color: #ed1659;
}



/* Taille des bloc1_gauche et bloc3_gauche*/
#wrapper #content_dechetterie #bloc1_gauche, #wrapper #content_dechetterie #bloc3_gauche{ 
	width: 95%;
	position: relative;
}
/* Taille du bloc1_gauche et repartition section / aside */
#wrapper #content_dechetterie #bloc1_gauche section{ 
	position: relative;
	width: 70%;
	float: left;
/* 	background: initial; */
}
#wrapper #content_dechetterie #liens_utiles h3{	
	color: white;
	font-size: 95%;
	text-align: center;
	text-transform: uppercase;
	margin: 1% 1% 10% 1%;
}
#wrapper #content_dechetterie aside{	
	background: #087a84;
	margin: 20px;
}


/* Taille de du bloc2_gauche ------------------------------------------------------------------------------------------------------*/
#wrapper #content_dechetterie #bloc2_gauche { 
	width: 88%;
	position: relative;
}
/* Répartition des 2 blocs dans le bloc2_gauche ---------*/
/* bloc texte ---------*/
#wrapper #content_dechetterie #bloc2_gauche #bloc2_gauche_1 { 
	width: 32%;
	float: left;
	margin: 2% 2% 2% 2%;
}
/* bloc image ---------*/
#wrapper #content_dechetterie #bloc2_gauche #bloc2_gauche_2 { 
	width: 60%;
	float: left;
	margin: 2% 2% 2% 2%;
}

/* Taille et position de l'image retour haut */
#wrapper #content_dechetterie #bloc2_gauche #r_h img, #wrapper #content_dechetterie #bloc3_gauche #r_h img  { 
	width: 100px; /*-- Retaille qu'il faudrait appliquer à tous les boutons retours */
	margin: 0 0 0 5%;
	position: right;
	vertical-align: -30%;
}
/* fin bloc_2 ----------------------------------------------------------------------------------------------------------------------------*/


/* Taille du bloc3_gauche et repartition section / table */
#wrapper #content_dechetterie #bloc3_gauche section{ 
	width: 70%;
	background: url(img_theme/terre_eco.png) no-repeat fixed 37% 0;
	float: left;
}
/* couleur de fond entete tableaux*/
#wrapper #content_dechetterie #bloc3_gauche  table{
	width: 40%;
	margin: 20px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
/* couleur de fond entete tableaux*/
#wrapper #content_dechetterie #bloc3_gauche .titre-tab1{
	background-color: #53696B;
}
/* effet sur image en survole */
#wrapper #content_dechetterie ul img:hover{	
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius: 10px;
}



/* ____________________PAGE VIE ASSOCIATIVE & CULTURELLE ______________ */
/* _____________________________ LES ECOLES	  __________________________ */

/* WRAPPER page les ecoles - les associations - la bibliotheque__________*/
/* Taille des content  ---*/
#wrapper #content_ecole, #wrapper #content_associations, #wrapper #content_bibliotheque {
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}

/* Taille et position des titres h2*/
#wrapper #content_ecole h2, #wrapper #content_associations h2, #wrapper #content_bibliotheque h2{
	font-size: 150%;
	color: #7b1b77;
}


/* _____________________________ LES ASSOCIATIONS _____________________*/
/* WRAPPER page les associations  __________________________________*/
#wrapper #content_soudesecoles, #wrapper #content_terrepierres, #wrapper #content_pepinart, #wrapper #content_gdh , #wrapper #content_hurtibelle, #wrapper #content_comite {
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}


/* Animation des pages enfants lors chargement fenetres ---*/
#wrapper #content_soudesecoles, #wrapper #content_terrepierres, #wrapper #content_pepinart, #wrapper #content_gdh , #wrapper #content_hurtibelle, #wrapper #content_comite{
	animation: SubMenuAnimIn1 0.4s ease;
	transition: all 1.4s cubic-bezier(.49,.60,.52,1);
}

/* Taille, couleur des titres h2*/
#wrapper #content_soudesecoles h2, #wrapper #content_terrepierres h2, #wrapper #content_pepinart h2, #wrapper #content_gdh h2, #wrapper #content_hurtibelle h2, #wrapper #content_comite h2{
	font-size: 150%;
	color: #7b1b77;
}
/* Couleur des titres h3*/
#wrapper #content_soudesecoles h3, #wrapper #content_terrepierres h3, #wrapper #content_pepinart h3, #wrapper #content_gdh h3, #wrapper #content_hurtibelle h3, #wrapper #content_comite h3{
	color: #c26ecd;
}

/* Page associations  __________________________________*/
/* Taille et position des bloc ul*/
#wrapper #content_associations ul{	
	border: none;
	float: left;
	margin: 0 50px 0 0;
}
/* Couleur des bouton menu normal + hover */
#wrapper #content_associations ul li:nth-child(1){	
	background: #b851c2;
}
#wrapper #content_associations ul li:nth-child(2){	
	background: #7b1b77;
}
#wrapper #content_associations ul li:nth-child(3){	
	background: #3e1642;
}
#wrapper #content_associations ul li:hover{	
	background: white;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
#wrapper #content_associations li:hover h3{	
	color: #762E7E;
}
/* reduction espacement lettres titres sou des ecoles */
#wrapper #content_associations #bloc1 li:nth-child(1) h3{	
	letter-spacing: 0px;
}

/* Taille et position du bouton retour + effet hover page soudesecoles - terrepierres - pepinart - gdh - hurtibelle - comite */
#wrapper #content_soudesecoles h2 a img, #wrapper #content_terrepierres h2 a img, #wrapper #content_pepinart h2 a img, #wrapper #content_gdh h2 a img, #wrapper #content_hurtibelle h2 a img, #wrapper #content_comite h2 a img{
	margin: 0 0 0 150px;
	vertical-align: -40%;
}
/* hover sur les boutons retour */
#wrapper #content_soudesecoles h2 a img:hover, #wrapper #content_terrepierres h2 a img:hover, #wrapper #content_pepinart h2 a img:hover, #wrapper #content_gdh h2 a img:hover, #wrapper #content_hurtibelle h2 a img:hover, #wrapper #content_comite h2 a img:hover{	
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius : 10px;
}

/* Page associations - Club Hurtibelle  _____________________________*/
/* couleur et marges bloc contact droite  */
#wrapper #content_hurtibelle section {
    background: #c26ecd;
    margin: 20px 0 0;
}
/* couleur titre h3 contact droite  */
#wrapper #content_hurtibelle section h3 {
    background: #ffffff;
	width: 100%;
	border-radius: 5px;
}
/* hover sur les boutons retour et du menu*/
#wrapper #content_hurtibelle a img:hover{	
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius : 10px;
}


/* _________________PAGES TOURISME - LA PLAN D'EAU - RANDO - PATRIMOINE_____ */
/* ______________________ le plan d'eau	- rando - patrimoine  ______________ */
/* WRAPPER page le plan d'eau	- rando - patrimoine __________*/
/* Taille des content  ---*/
#wrapper #content_lac, #wrapper #content_rando, #wrapper #content_patrimoine {
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}

/* Taille et position des titres h2*/
#wrapper #content_lac h2, #wrapper #content_rando h2, #wrapper #content_patrimoine h2{
	font-size: 150%;
	color: #b7d523;
}

/* page LE PLAN D'EAU ______________________________ */
#wrapper #h1_t{
	margin: 0 0 10px 0;
}
#wrapper #content_lac{
	background: url(img_theme/vue_plan_eau.jpg) no-repeat fixed 0 5%;
	background-size: cover;
	height: 900px;
	border-radius: 10px;
}
#wrapper #content_lac h2{
	font-size: 150%;
	color: #b7d523;
	margin: -5px 0 0 -11px;
}
#wrapper #content_lac h3{
	color: #b7d523;
}
#wrapper #content_lac #bloc1_gauche, #wrapper #content_lac #bloc2_gauche {
	float: left;
	width: 100%; 
	margin: auto;
}
#wrapper #content_lac .bloc_info_gauche {
    width: 70%;
}
#wrapper #content_lac #bloc1_gauche section{
	opacity: 0.85;
}
#wrapper #content_lac #bloc2gauche{
	float: left;
	margin: 0px 0 15px -38px;
} 
#wrapper #content_lac #bloc2gauche img{
	width: 95%;
	border-radius : 10px 10px 0 0;
	box-shadow: 2px 1px 3px rgba(0, 0, 0, .3);
	z-index: 1000;
} 
#wrapper #content_lac #bloc2gauche figcaption{
	width: 93%;
	color: black;
	line-height: 35px;
	display: block;
	font-weight: bold; 
	background: #ffffff;
	opacity: 0.85;
	box-shadow: 2px 1px 3px rgba(0, 0, 0, .3);
	border-radius: 0 0 10px 10px;
	padding-left: 5px;
} 
/* bloc aside liens utiles --*/
#wrapper #content_lac #liens_utiles h3{	
	color: #ffffff;
	font-size: 95%;
	text-align: center;
	text-transform: uppercase;
	margin: 1% 1% 10% 1%;
}
#wrapper #content_lac aside{	
	background:  #009899;
	opacity: 0.85;
	margin: 20px;
	border: none
}
/* div liens_utiles -----------------------------*/
/* Taille de la div */
.liens_utiles{	
	width: 10%;
	background: linear-gradient(to right, #3cc4de, #005a7e); /* Standard syntax */
	background: -webkit-linear-gradient(right, #3cc4de, #005a7e); /* Safari 5.1 to 6.0 */
	background: -o-linear-gradient(left, #3cc4de, #005a7e); /* Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(to right, #3cc4de, #005a7e); /* Firefox 3.6 to 15 */
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius: 5px 5px 5px 5px;
	float: right;
	margin: 1% 1% 1% 1%;
	padding: 1% 1% 1% 1%;
}
/* Taille des blocs liens */
.liens_utiles img{	
	width: 100%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	border-radius: 5px 5px 5px 5px;
/* 	float: right; */
}

/* pages le lac_localisation - lac_infos - lac_portfolio - lac_natura2000 --*/
#wrapper #content_lac_localisation, #wrapper #content_lac_infos, #wrapper #content_lac_portfolio , #wrapper #content_lac_natura2000 {
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}
/* Taille et position des titres h2*/
#wrapper #content_lac_localisation h2, #wrapper #content_lac_infos h2, #wrapper #content_lac_portfolio h2, #wrapper #content_lac_natura2000 h2{
	font-size: 150%;
	color: #a9cb40;
}
/* Taille et position du bouton retour + effet hover le lac_localisation - lac_infos - lac_portfolio - lac_natura2000 */
#wrapper #content_lac_localisation h2 a img, #wrapper #content_lac_infos h2 a img, #wrapper #content_lac_natura2000 h2 a img, #wrapper #content_lac_portfolio h2 a img{
	width: 125px; /*-- Retaille qu'il faudrait appliquer à tous les boutons retours */
	margin: 10px 10px 0 150px;
	vertical-align: -40%;
	float: right;  /* a appliquer aux boutons retour menu pour éviter problème en responsive*/
}
/* hover sur les boutons retour */
#wrapper #content_lac_localisation h2 a img:hover, #wrapper #content_lac_infos h2 a img:hover, #wrapper #content_lac_portfolio h2 a img:hover, #wrapper #content_lac_natura2000 h2 a img:hover{	
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius : 10px;
}
/* Page gites et chambres d'hotes  __________________________________*/
/* WRAPPER page gite et pages enfants _____________*/
/* Taille des content  ---*/
#wrapper #content_gite, #wrapper #gite_gite1, #wrapper #gite_gite2, #wrapper #gite_gite3 , #wrapper #gite_gite4, #gite_gite5, #content_gite_gite6 {
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}
/* Taille et position des titres h2*/
#wrapper #content_gite h2, #wrapper #gite_gite1 h2, #wrapper #gite_gite2 h2, #wrapper #gite_gite3 h2, #wrapper #gite_gite4 h2, #gite_gite5 h2, #content_gite_gite6  h2{
	font-size: 150%;
	color: #327e23;
}
/* Taille et position des titres h3*/
#wrapper #content_gite h3 {
	font-size: 100%;
	color: #ffffff;
}
/* Taille et position des titres h4*/
#wrapper #content_gite h4 {
	font-size: 80%;
	color: #1b4513;
}
/* Page gites  __________________________________*/
/* Taille et position des bloc ul*/
#wrapper #content_gite ul{	
	border: none;
	float: left;
	margin: 0 50px 0 0;
}
/* Couleur des bouton menu normal + hover */
#wrapper #content_gite ul li:nth-child(1){	
	background: #327e23;
}
#wrapper #content_gite ul li:nth-child(2){	
	background: #27621b;
}
#wrapper #content_gite ul li:nth-child(3){	
	background: #1b4513;
}
#wrapper #content_gite ul li:hover{	
	background: white;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
#wrapper #content_gite li:hover h3{	
	color: #327e23;
}
/* ____fin pages bien-être & gite et pages enfants_ */

/* ____fin pages gites et chambres d'hotes et pages enfants */


/* _________________PAGES AGENDA & ACTUALITES_________________________________ */
/* _________________________________ agenda & actualites  __________________ */
/* WRAPPER pages agenda -& actualites __________*/
/* Taille des content  ---*/
#wrapper #content_agenda, #wrapper #content_divers {
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}
/* Taille et position des titres h2*/
#wrapper #content_agenda h2, #wrapper #content_divers  h2{
	font-size: 150%;
	color: #4b2814;
}
/* div image resultat municipale 2026 ---------------------------*/
/* Taille de la div resultats2026 */
#wrapper #content_agenda #resultats2026{
	width: 98%;
	float:left;
}
#wrapper #content_agenda #resultats2026 img{
	width: 98%;
	min-width: 400px;
	float:left;
	margin: 0 2% 3% 2%;
}
/* fin div image actus resultat municipale 2026 -----------------------*/

/* Taille et position du bouton "retour menu" effet hover */
#wrapper #content_agenda a img {
	width: 150px; /*-- Retaille qu'il faudrait appliquer à tous les boutons retours */
	float: right;  /* a appliquer aux boutons retour menu pour éviter problème en responsive*/
	margin: 0 0 0 5%;
	vertical-align: -30%;
}
#wrapper #content_agenda a img:hover {	
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius: 10px;
}
/* Taille et position du bouton "retour haut" effet hover */
#wrapper #content_agenda ul li a img {
	width: 100px; /*-- Retaille qu'il faudrait appliquer à tous les boutons retours */
	margin: 0 0 0 5%;
	vertical-align: -30%;
}


/* _____________________________ divers  __________________________ */
/* debut style page divers a adapter
/* WRAPPER page AGENDA & ACTUALITES - divers __________________________*/
/* Taille des content  ---*/

/*fin style page divers a adapter */




/* _____________________________ LE PATRIMOINE _____________________*/
/* WRAPPER pages patrimoine et pages enfants le patrimoine   _______*/
#wrapper #content_patrimoine, #wrapper #content_patrimoine_eglise, #wrapper #content_patrimoine_chapelle, #wrapper #content_patrimoine_temple , #wrapper #content_patrimoine_cadrans, #content_patrimoine_tables, #content_patrimoine_vestiges {
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}
/* Taille et position des titres h2*/
#wrapper #content_patrimoine h2, #wrapper #content_patrimoine_eglise h2, #wrapper #content_patrimoine_chapelle h2, #wrapper #content_patrimoine_temple h2, #wrapper #content_patrimoine_cadrans h2, #content_patrimoine_tables h2, #content_patrimoine_vestiges h2{
	font-size: 150%;
	color: #b63451;
}
/* Page patrimoine  __________________________________*/
/* Taille et position des bloc ul*/
#wrapper #content_patrimoine ul{	
	border: none;
	float: left;
	margin: 0 50px 0 0;
}
/* Couleur des bouton menu normal + hover */
#wrapper #content_patrimoine ul li:nth-child(1){	
	background: #f16d7c;
}
#wrapper #content_patrimoine ul li:nth-child(2){	
	background: #b63451;
}
#wrapper #content_patrimoine ul li:nth-child(3){	
	background: #7e1b31;
}
#wrapper #content_patrimoine ul li:hover{	
	background: white;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
#wrapper #content_patrimoine li:hover h3{	
	color: #b63451;
}

/* Taille et position du bouton retour + effet hover page eglise la chapelle le temple les cadrans les tables vestiges */
#wrapper #content_patrimoine_eglise h2 a img, #wrapper #content_patrimoine_chapelle h2 a img, #wrapper #content_patrimoine_temple h2 a img, #wrapper #content_patrimoine_cadrans h2 a img, #content_patrimoine_tables h2 a img, #content_patrimoine_vestiges h2 a img{
	Width: 150px; /* retaille a appliquer aux boutons retour menu */
	margin: 0 0 0 200px;
	float: right;  /* a appliquer aux boutons retour menu pour éviter problème en responsive*/
	vertical-align: -40%;
}
/* hover sur les boutons retour */
#wrapper #content_patrimoine_eglise h2 a img:hover, #wrapper #content_patrimoine_chapelle h2 a img:hover, #wrapper #content_patrimoine_temple h2 a img:hover, #wrapper #content_patrimoine_cadrans h2 a img:hover, #content_patrimoine_tables h2 a img:hover, #content_patrimoine_vestiges h2 a img:hover{	
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius : 10px;
}

/* ______________________________PAGES ARTISANS & COMMERCE_________________________________ */
/* _____________________page artisans______________________ */
/* WRAPPER page artisans et pages enfants artisans__________*/
/* Taille des content  ---*/
#wrapper #content_artisans, #wrapper #artisans_artisan1, #wrapper #artisans_artisan2, #wrapper #artisans_artisan3 , #wrapper #artisans_artisan4, #artisans_artisan5, #content_artisans_artisan6 {
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}
/* Taille et position des titres h2*/
#wrapper #content_artisans h2, #wrapper #artisans_artisan1 h2, #wrapper #artisans_artisan2 h2, #wrapper #artisans_artisan3 h2, #wrapper #artisans_artisan4 h2, #artisans_artisan5 h2, #content_artisans_artisan6  h2{
	font-size: 150%;
	color: #eb7800;
}
/* Taille et position des titres h3*/
#wrapper #content_artisans h3 {
	font-size: 100%;
	color: #ffffff;
}
/* Taille et position des titres h4*/
#wrapper #content_artisans h4 {
	font-size: 80%;
	color: #0d9fa1a;
}
/* Page artisans  __________________________________*/
/* Taille et position des bloc ul*/
#wrapper #content_artisans ul{	
	border: none;
	float: left;
	margin: 0 50px 0 0;
}
/* Couleur des bouton menu normal + hover */
#wrapper #content_artisans ul li:nth-child(1){	
	background: #ebb166;
}
#wrapper #content_artisans ul li:nth-child(2){	
	background: #eb9842;
}
#wrapper #content_artisans ul li:nth-child(3){	
	background: #eb7800;
}
#wrapper #content_artisans ul li:hover{	
	background: white;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
#wrapper #content_artisans li:hover h3{	
	color: #eb7800;
}
/* ________fin pages artisans et pages enfants artisans______ */

/* _____________________page commercess______________________ */
/* WRAPPER page commerces et pages enfants commerces _________*/
/* Taille des content  ---*/
#wrapper #content_commerces, #wrapper #commerces_commerce1, #wrapper #commerces_commerce2, #wrapper #commerces_commerce3 , #wrapper #commerces_commerce4, #commerces_commerce5, #content_commerces_commerce6 {
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}
/* Taille et position des titres h2*/
#wrapper #content_commerces h2, #wrapper #commerces_commerce1 h2, #wrapper #commerces_commerce2 h2, #wrapper #commerces_commerce3 h2, #wrapper #commerces_commerce4 h2, #commerces_commerce5 h2, #content_commerces_commerce6  h2{
	font-size: 150%;
	color: #b83800;
}
/* Taille et position des titres h3*/
#wrapper #content_commerces h3 {
	font-size: 100%;
	color: #ffffff;
}
/* Taille et position des titres h4*/
#wrapper #content_commerces h4 {
	font-size: 80%;
	color: #0d9fa1a;
}
/* Page commerces  __________________________________*/
/* Taille et position des bloc ul*/
#wrapper #content_commerces ul{	
	border: none;
	float: left;
	margin: 0 50px 0 0;
}
/* Couleur des bouton menu normal + hover */
#wrapper #content_commerces ul li:nth-child(1){	
	background: #b86941;
}
#wrapper #content_commerces ul li:nth-child(2){	
	background: #b85022;
}
#wrapper #content_commerces ul li:nth-child(3){	
	background: #b83800;
}
#wrapper #content_commerces ul li:hover{	
	background: white;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
#wrapper #content_commerces li:hover h3{	
	color: #eb7800;
}
/* ____fin pages artisans et pages enfants commerces ____ */

/* _____________________page restauration______________________ */
/* WRAPPER page restauration et pages enfants restauration _________*/
/* Taille des content  ---*/
#wrapper #content_restauration, #wrapper #restauration_restaurant1, #wrapper #restauration_restaurant2, #wrapper #restauration_restaurant3 , #wrapper #restauration_restaurant4, #restauration_restaurant5, #content_restauration_restaurant6 {
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}
/* Taille et position des titres h2*/
#wrapper #content_restauration h2, #wrapper #restauration_restaurant1 h2, #wrapper #restauration_restaurant2 h2, #wrapper #restauration_restaurant3 h2, #wrapper #restauration_restaurant4 h2, #restauration_restaurant5 h2, #content_restauration_restaurant6  h2{
	font-size: 150%;
	color: #b32214;
}
/* Taille et position des titres h3*/
#wrapper #content_restauration h3 {
	font-size: 100%;
	color: #ffffff;
}
/* Taille et position des titres h4*/
#wrapper #content_restauration h4 {
	font-size: 80%;
	color: #0d9fa1a;
}
/* Page restauration  __________________________________*/
/* Taille et position des bloc ul*/
#wrapper #content_restauration ul{	
	border: none;
	float: left;
	margin: 0 50px 0 0;
}
/* Couleur des bouton menu normal + hover */
#wrapper #content_restauration ul li:nth-child(1){	
	background: #b35a4e;
}
#wrapper #content_restauration ul li:nth-child(2){	
	background: #b33e32
}
#wrapper #content_restauration ul li:nth-child(3){	
	background: #b32214;
}
#wrapper #content_restauration ul li:hover{	
	background: white;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
#wrapper #content_restauration li:hover h3{	
	color: #eb7800;
}
/* ____fin pages restauration et pages enfants restauration ____ */

/* ________________page bien-être & sante______________________ */
/* WRAPPER page bien-être & sante_ et pages enfants _____________*/
/* Taille des content  ---*/
#wrapper #content_sante, #wrapper #sante_sante1, #wrapper #sante_sante2, #wrapper #sante_sante3 , #wrapper #sante_sante4, #sante_sante5, #content_sante_sante6 {
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}
/* Taille et position des titres h2*/
#wrapper #content_sante h2, #wrapper #sante_sante1 h2, #wrapper #sante_sante2 h2, #wrapper #sante_sante3 h2, #wrapper #sante_sante4 h2, #sante_sante5 h2, #content_sante_sante6  h2{
	font-size: 150%;
	color: #f58858;
}
/* Taille et position des titres h3*/
#wrapper #content_sante h3 {
	font-size: 100%;
	color: #ffffff;
}
/* Taille et position des titres h4*/
#wrapper #content_sante h4 {
	font-size: 80%;
	color: #0d9fa1a;
}
/* Page santes  __________________________________*/
/* Taille et position des bloc ul*/
#wrapper #content_sante ul{	
	border: none;
	float: left;
	margin: 0 50px 0 0;
}
/* Couleur des bouton menu normal + hover */
#wrapper #content_sante ul li:nth-child(1){	
	background: #f5ba9f;
}
#wrapper #content_sante ul li:nth-child(2){	
	background: #f59772;
}
#wrapper #content_sante ul li:nth-child(3){	
	background: #f58858;
}
#wrapper #content_sante ul li:hover{	
	background: white;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
#wrapper #content_sante li:hover h3{	
	color: #eb7800;
}
/* ____fin pages bien-être & sante et pages enfants_ */



/* _________________PAGE SITEMAP_________________________________ */
/* WRAPPER pages sitemap __________*/
/* Taille des content  ---*/
#wrapper #content_sitemap{
	clear: both;
	position: relative;
	width: 100%; 
	margin: auto;
}
/* Taille et position des titres h2*/
#wrapper #content_sitemap  h2{
	font-size: 150%;
	color: #4b2814;
}
#wrapper #content_sitemap  ul li ul li a{
	margin-left: 20px;
}



/* _________________PAGE UNDER CONSTRUCTION_______________________ */

/* -------------- UNDER CONSTRUCTION------------------------*/
/* Taille de la div under_construction */
#wrapper #under_construction{
	width: 80%;
	position: relative;
	float:left;
}
/* Taille de l'image under_construction */
*#wrapper #under_construction img{
	width: 90%;
	min-width: 400px;
	float:left;
	margin: 0 2% 3% 2%;
}
/* fin div under_construction -----------------------------------*/