/*  Généralités  ___________________________________________________________________________ */

body {
	padding:0; 
	margin:0; 
	background-color:#034b74;
	font-family:Arial, Verdana, sans-serif; 
	font-size: 0.7em; 
	line-height:1.4em; 
	color: #fff;
	background:#034B74 url(images/bg.gif) 0 0 repeat-y;
	}
	
#main h1 {font-size:1.3em;  color:#39f; padding:20px 0 10px 0; margin:0; letter-spacing:0.1em }
h2 {font-size:1.2em; font-weight:bold; color:#034b74; padding:0; margin:20px 30px 5px 0}
h3 {font-size:1em; font-weight:bold; color:#034b74; padding:0; margin:10px 30px 0 5px}
li { margin-bottom:1px;list-style-type:none;}
a {color:#fff; text-decoration:none; } a:hover { border:none; color: #FC6; text-decoration:underline; }
img {border:none;} 



/*  Spécificités  ___________________________________________________________________________ */
.pixleft {float:left; margin:0 7px 3px 0;}
#main h1.nomargintop {margin-top:0; padding-top:0;}

/*  pour  l"edito et sa page dédiée  */
#centre h1.edito {font-size:1.1em;} /*  pour que le titre de l'edito "le mot du maire" ne sorte pas de l'image en bg  */
a.edito {text-decoration:underline; font-style:italic;}
span#chapo {color:#555;}


/* bandeau haut et barre de navigation ___________________________________________________ */
#haut { margin-top:1px;}
#haut img {float:left; }
#haut h1 {background-image: url(images/photos/bienvenue.jpg); background-repeat:no-repeat; height:71px; margin:0 0 0 160px; border:none;}
#haut span , #nav  span { display:none;}

#nav ul {margin:19px 0 0 0px; padding:0;}
#nav li { float:left; padding:0; margin:0;}
#nav a { display:block; height:35px; width:80px; margin:0 ; background-repeat:no-repeat; border:none;}

a#ville{background-image: url(images/boutons/b_h_1a.gif);} a#ville:hover {background-image: url(images/boutons/b_h_1b.gif);}
a#mairie {background-image: url(images/boutons/b_h_2a.gif);} a#mairie:hover {background-image: url(images/boutons/b_h_2b.gif);}
a#economie{background-image: url(images/boutons/b_h_3a.gif);} a#economie:hover {background-image: url(images/boutons/b_h_3b.gif);}
a#culture{background-image: url(images/boutons/b_h_4a.gif);} a#culture:hover {background-image: url(images/boutons/b_h_4b.gif);}
a#enfjeun {background-image: url(images/boutons/b_h_5a.gif);} a#enfjeun:hover {background-image: url(images/boutons/b_h_5b.gif);}
a#aines{background-image: url(images/boutons/b_h_6a.gif);} a#aines:hover {background-image: url(images/boutons/b_h_6b.gif);}
a#vieprat {background-image: url(images/boutons/b_h_7a.gif);} a#vieprat:hover {background-image: url(images/boutons/b_h_7b.gif);}
a#agenda {background-image: url(images/boutons/b_h_8a.gif);} a#agenda:hover {background-image: url(images/boutons/b_h_8b.gif);}
a#urgences {background-image: url(images/boutons/b_h_9a.gif);} a#urgences:hover {background-image: url(images/boutons/b_h_9b.gif);}
a#handicap {background-image: url(images/boutons/b_h_handicap_a.gif);} a#handicap:hover {background-image: url(images/boutons/b_h_handicap_b.gif);}
a#sport {background-image: url(images/boutons/b_h_10a.gif);} a#sport:hover {background-image: url(images/boutons/b_h_10b.gif);}
a#association {background-image: url(images/boutons/b_h_11a.gif);} a#association:hover {background-image: url(images/boutons/b_h_11b.gif);}


/* partie principale ____________________________________________________________________________________________________________*/
#main { 
	position:relative; 
	width:976px;
	}
	
.decal { 
	margin-left:7px; 
	clear:both;
	}
	
.separateur { 
	margin-right:1em; 
	border-bottom: 1px solid #003660; 
	height:10px;}
 
/* bloc de GAUCHE ........................................ */
#gauche { position:absolute; top:60px; left:0; width:190px; height:650px; padding-left:5px ; padding-top:5px; }
#gauche h1 { color:#c2d7ec; border-bottom:1px solid  #c2d7ec;  padding-bottom: 1px; padding-top:5px; margin:0 30px 2px 5px  }

#cadredevie a { margin-left:10px;}
#gauche ul {padding:0 30px 0 0; margin:0; text-align:right; font-weight:bold; }

#recherchefield { margin:3px 0 3px 0 ; }
/* fin du bloc de gauche  ..... */ 


/* bloc du CENTRE ........................................ */
#centre a { color:#014972;}
#centre h1 { color:#fff;  font-size:1.3em; padding:3px 10px 0 5px ; margin: 0; }
#centre h2 { clear:left; padding:1px 10px 0 5px; margin:10px 0 2px 0;}
#centre p {padding:1px 10px 0 5px; margin:5px 0 2px 0;}
#centre p { line-height:1.2em;}
#centre a {padding:1px 10px 0 5px; margin:5px 0 2px 0;}
#centre ul { margin:3px 10px 0 25px; padding:0;}
#centre li {list-style-type: none;}

#centre {
	position:absolute; 
	top:60px; 
	left:190px; 
	width:560px;  
 /*	height:650px;   on garde cette valeur au cas ou les infos de "événement" ne rempliraient pas assez la page (cela assure une bonne hauteur à la colonne centrale) (dans le html maintenant)	*/
	padding: 5px 15px 0 7px;
	background: transparent url(images/centre.gif) repeat-y;	
	color:#000; 
	line-height:1.5em;
	}
		 
#centre div {  background:#fff url(images/bg_onglet.gif) top left repeat-x;    }

#evenement, .actu {border-bottom:2px solid #034B74; 
				   background-color:#fff; 
				   padding:0 0 5px 0;
				   margin:0 10px 7px 3px;}

/* attention, class provisoire appliqué sur un espace insécable pour que l'img flotante ne sorte pas de la div quand le texte n'est pas assez consistant.  
.spacer {clear:right; margin:0; padding:0;  height:0; font-color:#fff; border:1px solid red;}
*/

#evenement img, .actu img {float:left; margin:2px 10px 5px; }
				 
/* pour le texte défilant  */
#cadrpg { overflow:hidden;}
#centre div#newshr { position:relative; width:98%; height:20px; overflow:hidden; color:inherit; background-image:none; margin:3px 0 0 3px; }
#centre div#defile { position:absolute; margin-top:1px; background-color:transparent; background-image:none;   }
/*  >:(  */   

/* fin du bloc central ..... */


/* bloc de DROITE ........................................ */
#droite { position:absolute; top:60px; right:0; width:215px;  height:650px; padding-top: 5px; font-weight:normal;}

#droite h1 { color:#c2d7ec; border-bottom:1px solid  #c2d7ec; padding-bottom: 2px; padding-top:3px; margin:0 0 10px 5px  }
#droite p { margin-top:5px; margin-bottom:5px; line-height:1.3em}
.details { line-height:1.1; font-style: oblique; font-weight:normal; }
/* fin du bloc de droite ..... */