/* Style site mairie de Campsas															*/
/* V0.1 : 11/04/2008 : Création															*/

/* Le menu */
/* ----------------------------------------------------------------------------------------------------*/
/* les styles pour le menu déroulant de toutes les pages du site				*/
/* ---------------------------------------------------------------------------------------------------*/
#menu, #menu ul /* Liste */     
{
	padding : 0; /* pas de marge intérieure */
	margin : 0; /* ni extérieure */
	list-style : none; /* on supprime le style par défaut de la liste */
	line-height : 1.5em; /* on défini une hauteur pour chaque élément */
	text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
	font-weight : bold; /* on met le texte en gras */
	font-size : 1em; /* hauteur du texte : */
	width :50em; /* mettre ici une valeur sup ou egale à nb de menu*Taille menu */
}

#menu a, #menu  .element_menu /* Contenu des listes : les titre des menus plus les renvois sur les autre pages */
{
	display : block; /*on change le type d'élément, les liens deviennent des balises de type block  pour ne pas être sue la meme ligne*/
	padding : 0; /* aucune marge intérieure */     
	color : rgb(255,255,255); /* couleur du texte */
	text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
	width : 8em; /* largeur */
	background: transparent url("../fond/painroll.png") repeat ;
}

#menu li /* Elements des listes */      
{ 
	float : left; 
	border : 2px inset rgb(160,160,160); 
}

#menu li ul /* Sous-listes */
{ 
	position: absolute; /* Position absolu */
	width: 8em; /* Largeur des sous-listes */
	left: -999em; /* Hop, on envoi loin du champ de vision */
}

#menu li ul ul 
{
	margin : -1.5em 0 0 8em ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
	/* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
	border : 2px inset rgb(160,160,160);     
}

#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
	left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
	left: auto; /* Repositionnement normal */
	min-height: 0; /* Corrige un bug sous IE */
}
#menu a:hover, #menu a.sfhover
{
	color: rgb(0,255,0);
}

/* -------------------------------------------------------------------------------------------------------------- */
/*  le style utiliser pour le haut de page. Il définit entre autre l'image qui sert de banniere */
/* -------------------------------------------------------------------------------------------------------------- */
#en_tete{
	text-align: justify;
	height: 100px;
	width: 787px;
	background-image: url("../images/campsas1.jpg");
	background-repeat: repeat-x;
	margin-bottom: 2px;
	border-width: 4 px;
	border-style : ridge ;
}


body{
   margin-top: 2px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */
   margin-bottom: 10px;    /* Idem pour le bas du navigateur */
   background-image: url("../fond/texturefond.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc */
   background-attachment: fixed;
   background-repeat: repeat;  
}

textarea{
	background-color: rgb(200,200,200);
	text-align: left;
	text-indent:0em;
}

/* -------------------------------------------------------------------------------------------------------------------------------- 	*/
/* Les styles standard pour l'affichage de texte dans les pages du site 									*/
/* --------------------------------------------------------------------------------------------------------------------------------	*/
.corps_texte
{
	text-indent:1em; /* decale la première ligne des textes */
	font-weight:none;
	font-size:100%;
	color : rgb(0,0,0);
	padding-left : 10px;
	margin-bottom : 5px;  
}

.corps_texte:first-letter 
{
   font-weight: bold; /* En gras */
   font-size: 1.2em; /* Ecrit légèrement plus gros que la normale */
   color: blue; /* En Blue */
}

.corps_texte  ul{
	list-style-position:outside;
	margin-bottom:0.2em;
}

.corps_texte  li{
	margin-bottom:0.3em;
}

.corps_texte_ss_titre
{
	text-decoration: underline ;
	font-style:italic;
	font-weight: bolder;
}

.important_centre_block, .important_large_block{
	padding: 5px;
	margin: 1em;
	border: 4px double blue;
}

.important_centre_block{
	width:50%;
	text-align:center;
	font-weight: bolder;
	font-size:0.8em;	
}

.important_large_block{
	margin:5%;
	width:80%;
	background-color: rgb(176,236,250) ;
}

/* -------------------------------------------------------------------------------------------------------------------------- */
/* 	Création de block de text encadrés flottants à droite avec titre, sous titre, et corp de texte			*/
/* -------------------------------------------------------------------------------------------------------------------------- */
.encart_block_left
{
	float : left; 
	background-image: url("../fond/etincelles.jpg");
}

.encart_block_simple
{
	background-color: rgb(176,236,250) ;
	border: 4px double black;
	margin-left:1%;
	width: 80%;
	padding : 5px;
	text-align: center;
}

.encart_block
{
	float : right; 
	background-color: rgb(176,236,250) ;
}

.encart_block, .encart_block_left
{
	border: 4px double black;
	margin-left:1%;
	width: 40%;
	padding : 5px;
}

.encart_block .encart_titre, .encart_block_left .encart_titre, .encart_block_simple.encart_titre
{
	font-size:1em;
	font-weight: bolder;
	text-align: center;
	text-decoration: underline ;
	text-transform:uppercase ;
	color:black;
	margin-bottom : 0px;
	margin-top: 0px;
}

.encart_block .encart_corps, .encart_block_left .encart_corps, .encart_block_simple.encart_corps
{
	font-size:small;
	text-align: justify;
	color:black;
}

.encart_block  .encart_sous_titre, .encart_block_left  .encart_sous_titre,..encart_sous_titre
{
	margin-bottom : 0px;
	margin-top: 0px;
	text-align:left;
	font-weight: bolder;
	text-decoration: underline ;
}

.encart_block li, .encart_block_left li, .encart_block_simple li
{
	font-size:small;
}


/* -------------------------------------------------------------------------------------------------------------------------------	*/
/* style pour le pas de page. Enlève les flottans qu'il pourrait y avoir avant, met en gras et en italic				*/
/* -------------------------------------------------------------------------------------------------------------------------------- */
#pied_de_page
{
	clear: both;
    font-weight:bold;
	font-style: italic;
	color : rgb(0,128,0);
	text-align:center;
}

h1
{
	text-align:center;
	color : rgb(0,128,0);
}
/* ----------------------------------------------------------------------------------------- */
/*  Style pour les pages des professionnele                                                               */
/* ---------------------------------------------------------------------------------------- */
.corps_viticulteurs
{
	text-align: center;
	background-image: url("../fond/cep de vigne.jpg");
}

.nom_chateau
{
	text-decoration: underline;
	font-weight: bold;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------------------*/
/* styles pour la petite enfance									*/
/* --------------------------------------------------------------------------------------- */
.creche_maternelle
{
	background-image: url("../fond/enfantin3.jpg");
	padding-left : 2%;
	padding-right: 2%;
	border: 1px SOLID;
}

/* ------------------------------------------------------------------------------------------------------------------- */
/*  mise en place des images dans les pages 											*/
/* ------------------------------------------------------------------------------------------------------------------- */
.imageflottantegauche
{
	float: left;
	border-width: 4px;
	border-style : ridge ;
	margin-right : 20px; /* pour que le texte ne soit pas coller à l'image */
}

.imageflottantedroite
{
	float: right;
	border-width: 4px;
	border-style : ridge ;
	margin-left : 20px; /* pour que le texte ne soit pas coller à l'image */
}
.imagecentree
{
	margin:auto;
	clear: both;
	border-width: 4px;
	border-style : ridge ;
}

.imagesimple
{
	border-width: 4px;
	border-style : ridge ;
}

/* -------------------------------------------------------------------------------------------- */
/* des formulaires pour l'affichage des news défilant dans la page d'index */ 
/* -------------------------------------------------------------------------------------------- */
.bouton_simple_gauche
{
	float: left;
}

.boite_defilante
{
	border : 4px inset rgb(160,160,160);
	background-color: rgb(200,200,200);
	text-align:center;
	width: 84%;
}

/* ------------------------------------------------------------------------------------------------- */
/* styles utilisés pour l'affichage des news                                                             */
/* ------------------------------------------------------------------------------------------------- */
.titre_news, .contenu_news
{
	width : 80%;
	margin: auto;
	padding-left : 4px;
}

.titre_news
{
  background: transparent url("../fond/jaune_4.jpg") repeat ;
  color : black;
  font-weight: bolder ;
  border-style : ridge;
  border-width : 4px ;
}

.contenu_news
{
	background: transparent url("../fond/jaune_2.gif") repeat ;
	color : blue;
	border-style : SOLID;
	border-width : 2px;
	font-size: small;
}

.lien_de_news
{
	text-align:center;
	font-weight: bolder ;
}

.table_news
{
	border-collapse:collapse;
	border:2px solid black;
	margin:auto;
	
}
.table_news th, .table_news td
{
	border:1px solid black;
	border-style : outset;
	border-width : 4px ;
}
/* les menus verticaux simples */
#sous_menu_vertical{
	float: left;
	font-weight : bold; /* on met le texte en gras */
	list-style-type:none; /* on enlève la puce */ 
	margin: 0; /* on retire les marges intérieures et extérieures */
	padding:0; 
	width: 140px;  /*  20 de moins que le margin-left de "corps de texte */
	border : ridge 4px rgb(202,242, 255);  /* on applique des bordures à la balise ul */
	border-bottom: none; /* et on retire celle du bas */
	margin-right : 10px; /*  pour permettre que le texte ne soit pas coller au menu */
}
#sous_menu_vertical li{
	margin: 0; /* on retire les marges intérieures et extérieures */
	padding: 0; 
	border-bottom: ridge 4px rgb(202,242, 255);  /* ici on affiche  une bordure uniquement en bas */
}

#sous_menu_vertical a{
	text-decoration:none;  /* on enlève le soulignement */
	background: transparent url("../fond/Curtain.png") repeat ;
	color:white; 
	display:block;   /* pour que le fond au survol soit sur l'ensemble de la ligne du menu et pas seulement sur le texte */
	padding-left:0.8em;  /* une marge intérieure gauche juste pour l'esthétique */
}
#sous_menu_vertical a:hover{
	background: transparent url("../fond/marble.png") repeat ;  
	color:rgb(200,200,94); 
}

/* les menus horizontaux simples */
.sous_menu_horizontal{
	font-weight : bold; /* on met le texte en gras */
	list-style-type:none; /* on enlève la puce */ 
	margin: 0; /* on retire les marges intérieures et extérieures */
	padding:0; 
	width: 800px; 
}

.sous_menu_horizontal li
{
	display:inline;
}

.sous_menu_horizontal a{
	float: left;
	text-decoration:none;  /* on enlève le soulignement */
	background: transparent url("../fond/sunripple.png") repeat ;
	color:white; 
	border : ridge 4px rgb(202,242, 255);  /* on applique des bordures */
	display:block;   /* pour que le fond au survol soit sur l'ensemble de la ligne du menu et pas seulement sur le texte */
	padding-left:1.5em;  /* une marge intérieure gauche juste pour l'esthétique */
	padding-right:1.5em;  /* une marge intérieure gauche juste pour l'esthétique */
}
.sous_menu_horizontal a:hover{
	background: transparent url("../fond/metal34.png") repeat ; 
	color:rgb(255,0,0); 
}
/* -------------------------------------------------------------------------------------------------------------- */
/* pour la mise en forme de la liste des personnes apprtenant au  bureau d'une association */
/* ou à une commission											    */
/* -------------------------------------------------------------------------------------------------------------- */
.table_bureau
{
	margin : auto;
	border-collapse: collapse;
	background:  url("../fond/jaune_6.jpg") repeat ;
}

.table_bureau th, .table_bureau caption, .table_bureau td
{
	border: 4px ridge blue;
	text-align:center;
}

.table_bureau thead th
{
	border: 4px ridge blue;
	text-align:center;
	background:  url("../fond/jaune_5.jpg") repeat ;
}

.table_bureau caption
{
	font-weight : bold; /* on met le texte en gras */
	color : blue;
	background-color : rgb(255,255,0);
}

.table_bureau td
{
  font-size:0.8em;
  width :25%;
  vertical-align: middle;
}

.table_bureau ul
{
	list-style : none; /* on supprime le style par défaut de la liste */
	text-align : left;
}

/* pour la mise en forme des assistantes maternelles */
.table_assistante
{
	border-collapse: collapse;
	background-color:  pink;
}
.table_assistante th, .table_assistante caption, .table_assistante td
{
	border: 4px ridge blue;
	text-align:center;
}
.table_assistante th
{
	background-color:  white;
}

.table_assistante caption
{
	font-weight : bold; /* on met le texte en gras */
	color : black;
	background:  url("../fond/picasso faded.png") repeat ;
}
.table_assistante td
{
  font-size:0.8em;
  width :14%;
  vertical-align: middle;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* pour la mise en forme de la liste des maires			                					*/
/* ------------------------------------------------------------------------------------------------------------ */
.table_maires
{
	border-collapse:collapse;
	border-spacing:1px;
	table-layout:fixed;
	font-weight : bold;
	border: 1px solid black;
}

.table_maires td
{
	border: 1px solid black;
	padding-left : 5px;
	padding-right : 5px;
	background:  url("../fond/jaune_6.jpg") repeat ;
}

.table_maires  .nom_maire:first-letter 
{
	font-size:1.5em;
	font-family: "Old English Text MT", "OldgateLaneOutline", "Openclassic", "Algerian", cursive, serif;
}

.source_info
{
	font-style:italic;
	font-size:x-small;
}

.table_maires caption
{
	border: none;
	font-weight : bold; /* on met le texte en gras */

}
.table_maires  th
{
	border: 1px solid black;
	text-align:center;
	background-color : rgb(255,255,0);
}

/* ---------------------------------------------------------------------------------------- */
/* pour la mise en forme des calendriers		                					*/
/* ---------------------------------------------------------------------------------------- */
.table_calendrier
{
	margin: auto; 
	border-collapse:collapse;
	border-spacing:10px;
	table-layout:fixed;
	border: 4px inset blue;
}

.table_calendrier caption
{
	margin: auto; /* Centre le titre du tableau, ça rend mieux */
	font-size: 1.1em; /* taille de la police */
	color: #556dff; /* Couleur du texte */
	margin-bottom: 10px; /* Marge avec le tableau */
	font-weight : bold; /* on met le texte en gras */
	font-family: "Garamond", "Rockwell", "Bookman Old Style", "Times New Roman", serif;
}

.table_calendrier  th
{
	background-color: #7ba3ff; /* Couleur de fond */
	color: white; /* Couleur du texte */
	font-size: 1em; /* Taille des jours */
	font-family: "Arial ", "Verdana", "Helvetica", sans-serif;
	text-align:center;
}

.table_calendrier td
{
	border: 1px solid black;
	padding-left : 5px;
	padding-right : 5px;
	background:  url("../fond/brushed_metal2.png") repeat ;
	min-width: 1.5em;
	text-align:center;
}

.table_calendrier td .styleJourCourant
{
	background-color: white; /* Couleur de fond */
	color: red;
	border: 2px solid black;
	padding : 3px;
}

.table_calendrier  td .styleJourCourantAveclien
{
	background-color: white; /* Couleur de fond */
	color: red;
	border: 2px solid black;
	padding : 3px;
	font-weight : bolder;
	text-decoration:blink underline ;
}

.table_calendrier  td .aveclien
{
	font-weight : bolder;
	font-style: italic;
	text-decoration:blink underline ;
}

.table_calendrier  .textevenement
{
	display:none; /* par défaut on affiche pas le texte */
	text-align:left;
	font-size:0.8em;
	color:white;
}

/* si le style  textevenement suit l'un des style "styleCalendrierCourantAveclien" ou "aveclien" on déclenche un evenement au passage de la souris */
.aveclien:hover  +.textevenement , .aveclien+.textevenement:hover
{
	display:block; /* on affiche le bloc quand le curseur est dessus */
}

.styleJourCourantAveclien:hover  +.textevenement , .styleJourCourantAveclien+.textevenement:hover
{
	display:block; /* on affiche le bloc quand le curseur est dessus */
}

/* ------------------------------------------------------------------------------------- */
/* table pour afficher la liste des déchets autorisés ou interdit au SIEEOM		*/
/* -------------------------------------------------------------------------------------- */
.dechet_sieeom
{
	border-collapse:collapse;
	border: 1px solid blue;
}

.dechet_sieeom td, .dechet_sieeom th
{
	border: 1px solid black;
	padding-left : 5px;
	padding-right : 5px;
}

/* -------------------------------------------------------------------------------------- */
/* pour la création de bouton (ceux des retours à la page précédentes par exemple) */
/* -------------------------------------------------------------------------------------- */
.boutons_horizontal{
	font-weight : bold; /* on met le texte en gras */
	list-style-type:none; /* on enlève la puce */ 
	margin: 0; /* on retire les marges intérieures et extérieures */
	padding:0; 
	width: 800px; 
}

.boutons_horizontal li
{
	display:inline;
}

.boutons_horizontal a{
	float: left;
	text-decoration:none;  /* on enlève le soulignement */
	background: transparent url("../fond/sunripple.png") repeat ;
	color:white; 
	border : ridge 4px rgb(202,242, 255);  /* on applique des bordures */
	padding-left:1.5em;  /* une marge intérieure gauche juste pour l'esthétique */
	padding-right:1.5em;  /* une marge intérieure gauche juste pour l'esthétique */
}
.boutons_horizontal a:hover{
	background: transparent url("../fond/metal34.png") repeat ; 
	color:rgb(255,0,0); 
}

/* -------------------------------------------------------------------------------------- */
/* table simple
/* -------------------------------------------------------------------------------------- */
.bordure_simple
{
	border-collapse: collapse;
	margin-left:10%;
	width:80%;
}
.bordure_simple th, .bordure_simple caption, .bordure_simple td
{
	border: 4px ridge rgb(192,192,192);
	text-align:center;
}

.bordure_simple caption
{
	font-weight : bold; /* on met le texte en gras */
	color : black;
}
.bordure_simple td
{
  font-size:0.8em;
  vertical-align: middle;
}

.bordure_simple th
{
  font-size:1.2em;
  vertical-align: middle;
  font-weight:bolder;
}

.bordure_simple td .titre_description
{
  font-size:1.0em;
  vertical-align: top;
  font-weight:bold;
  color:blue;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/* Redéfinition des titres
/* "Wide Latin", "Impact", Times, Helvetica,Verdana, "'Times New Roman", serif, "Comic Sans MS", Garamond,Avantgarde,Balloon,cursive ,sans-serif ,
/* :"Century Schoolbook", Arial
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.titre_1
{
	font-size:1.3em;
	font-style:italic;
	font-weight:bolder;
	font-stretch:extra-expanded;
	text-decoration:underline;
	color:rgb(190,0,255);
	font-family:"Wide Latin",fantasy;
}	

.titre_2
{
	font-size:1em;
	font-style:italic;
	font-weight:bolder;
	font-stretch:expanded;
	text-decoration:none;
	color:rgb(50,150,50);
	font-family:"Garamond",fantasy;
}