/* ----------------------------------------------------------------------*/
/* balises generales A NE PAS MODIFIER */
a img { border:0; }
* html tr 	{ font-size:80%; }	/* pour ie...*/ 
body	{
	margin:0px;padding:0px; 
	text-align: center; /* pour corriger le bug de centrage IE */
	}

/* ----------------------------------------------------------------------*/
/* disposition des blocs*/

#Page, #Principale, #Entete, #Bandeau, #MenuHaut, #menuG , #menuD, .PiedMenu, #BasMenuHaut  {position:absolute;}
#Principale, #Bandeau, #MenuHaut,#Page, #Entete {width:983px; }

#Page 	{	
	position:relative;
	top:15px;	left:0px;
	margin:0 auto;
/*
	margin-right:auto;
	margin-left:auto;
*/
	text-align: left;   /* retablir l'alignement normal du texte */ 	
	height:600px;				/* h mini pour ie */
}
html>body #Page {		
	height:auto;	min-height:600px;		/* ie comprend pas */
}
#Entete {
	top:0px;	left:0px;
	margin:0px;
	height:260px;
}
#Bandeau 	{ 
	visibility:visible;
	top:0px;	left:0px;
	margin:0px;
	height:225px;
	}
#MenuHaut 	{ 
	visibility:visible;
	left:0px;	top:225px;
	height:35px;
	}
#DebutMenuHaut {
	width:0px;
	}
#BasMenuHaut 	{ 
	visibility:hidden;
	}
#Principale {
	top:260px;
	text-align:left;
}
* html body #Principale {height:100%;overflow:hidden}
* html body #Principale {height:0px;overflow:visible} 		/* pour IE/mac */
#Contenu{
	position:relative;
	top:0px;
	width:auto;
	margin:0px 0px 0px 210px;
	padding:0px 20px;
	}
#LeContenu {
	position:relative;
	margin:0px;padding:0px;
	min-height:530px;
	}
* html body #LeContenu {
	height:530px;	
	} 
#menuG , #menuD	{
	top:20px;
	height:100%;
	}	
#menuG {
	left:0px;
	width:210px;
	}	

#menuD 	{	
	right:0px;
	width:0px;
	}	

#pied 	{	
	position:relative;
	left:0px;
	height:48px;
	width:100%; 
	}	
.PiedMenu {
	width:100%;
	height:48px;
	bottom:0px;
}

#pied hr {		
	text-align:center; 
	left:0px;
	width:50%;
	margin-top:0px;
}
#piedG	{	
	float:left;
	}	
#piedC	{	
	margin-left:auto; margin-right:auto;
	text-align:center;
	}	
#piedD 	{	
	float:right;
	}	

/* ----------------------------------------------------------------------*/
/*------- menu haut : donnees de base*/
#MenuHaut dl {
	float:left;
	background:url(/styles/interface/fondmenu.png) 0 top repeat-x;
	width:100%; 	/*595px;*/
	margin: 0px; padding: 0px;
	list-style:none;
	} 
#MenuHaut dd a, #MenuHaut dt a  {
	float:left;
	border-right: 1px solid #FFF;
	height:35px;	
	margin:0px; padding:0 1em; 
	cursor: pointer;
	}
#MenuHaut dd a span, #MenuHaut dt a span {
	float:left;
	margin:0px; padding:4px 0 2px 0; 
	height:35px;
	}
* html body #MenuHaut dd a span, * html body #MenuHaut dt a span {
	height:34px;			/* pour ie */
	} 
#MenuHaut a span {float:none;}

#DebutMenuHaut {
	float:left; 
	height:35px;
	}
#FinMenuHaut 	{ 
	float:left; 
	width:0px;
	height:35px;
	}

/* ----------------------------------------------------------------------*/
/*------- menus lateraux : donnees de base*/

#menuG dl, #menuD dl {
	padding: 0px 0px 10px 0px;
	margin:15px 5px;
}
#menuG dt, #menuD dt {
	height: 1.7em;
	text-align:center;
	margin: 5px 0px 0px 0px;
	padding:0px 0px 0px 10px;
	}
#menuG dt span, #menuD dt span{
	display: block;			
	height: 1.7em;
	padding:0px 10px 0px 0px;
	}
#menuG dd, #menuD dd {
	height:1.7em;
	margin:0px;
	padding:0px;
	}
#menuD dd {
	height:auto;
	}
#menuG dd {
	text-align:left;
	}
#menuD dd {
	text-align:right;
	}
#menuD dd p {
	text-align:right;
	}
#menuG dd a,  #menuG dd a:visited, #menuD dd a,  #menuD dd a:visited
	{
	height:1.7em;
	display:block;			
	text-decoration:none;		
	cursor: pointer;
	}
#menuG dd a span, #menuD dd a span
	{
	display:block;			
	height:100%;
	}
#menuG dd a span
	{
	padding:0px 0px 0px 10px;
	}
#menuD dd a span
	{
	padding:0px 10px 0px 0px;
	}

#menuG dd.finbloc, #menuD dd.finbloc {
	display: inline;
	height:1px;line-height:1px;
	}
#menuG dd.finbloc span{}
#menuD dd.finbloc span{}

/* ----------------------------------------------------------------------*/
/*------- couleurs, bordures et images de fond */
body	{
	background:#78A8A8 url(/styles/interface/fondbody.png) center 48px no-repeat;
	}
#Principale 	{background-color:#FFF;	}
#Entete { background:url(/styles/interface/3-nd-de-la-garde.jpg) no-repeat;	}
#Bandeau {}
#MenuHaut {}
#MenuHaut dd a, #MenuHaut dt a  {	}
#MenuHaut dd a span, #MenuHaut dt a span {
	color:#EEE;
	}
#MenuHaut #current a, #MenuHaut a:hover {
	background:url(/styles/interface/fondmenu.png) 0 bottom repeat-x;
	}
#MenuHaut #current a span, #MenuHaut a:hover span {
	color:#FFF;
	}
#DebutMenuHaut {}
#FinMenuHaut 	{ }
#BasMenuHaut 	{ }

#Contenu{}

#menuG, #menuD	{}
#menuG dl, #menuD dl {}
#blocG-0 {background:url(/styles/interface/FondMenu1.png) center bottom repeat-y;}
#blocG-2 {background:url(/styles/interface/FondMenu2.png) center bottom repeat-y;}
#blocG-3 {background:url(/styles/interface/FondMenu3.png) center bottom repeat-y;}
#blocD-4 {background:url(/styles/interface/FondMenu2i.png) center bottom repeat-y;}
#menuG dt, #menuD dt {
	background:url(/styles/interface/FondMenuTitre.png) center bottom repeat-y;
	color:#FFA852;
	}
#menuG dt span, #menuD dt span{}
#menuG dd a,  #menuG dd a:visited, #menuD dd a,  #menuD dd a:visited	{}
#menuD dd p {margin-top:0;margin-bottom:0;}
#menuG dd a span, #menuD dd a span {}
#blocG-0 dd a:hover {background:url(/styles/interface/FondMenu1i.png) center bottom repeat-y;}
#blocG-2 dd a:hover {background:url(/styles/interface/FondMenu2i.png) center bottom repeat-y;}
#blocG-3 dd a:hover {background:url(/styles/interface/FondMenu3i.png) center bottom repeat-y;}
#blocD-4 dd a:hover {background:url(/styles/interface/FondMenu2.png) center bottom repeat-y;}

#menuG dd a:hover, #menuD dd a:hover {
	}
#menuG dd a:hover span, #menuD dd a:hover span {
	}

#menuG dd.finbloc, #menuD dd.finbloc {
	}
#menuG dd.finbloc span, #menuD dd.finbloc span{
	}
.current_g a span{
	color:#F00;
	}
.current_g a:hover span{
	color:#F00;
	}

/* ----------------------------------------------------------------------*/
/* ------polices */
body	{
	font-family: Optima, "Trebuchet MS", Lucida, Arial, Geneva, Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size:90%;
	}
#MenuHaut { font-size:150%;}
#menuG, #menuD { font-size:100%;}
#MenuHaut dd a, #MenuHaut dt a  {
	font-weight:bold;
	text-decoration:none;
	}
#MenuHaut dd a span, #MenuHaut dt a span {
	text-decoration:none;
	}
#BasMenuHaut 	{ 
	font-size:3px;	
	}

#pied 	{	
	font-size:9px;
	}	
.PiedMenu {
	font-size:9px; 
}
#menuG dd, #menuD dd {}
#menuG dt, #menuD dt {font-weight:bold;}

/*------------------------------------*/
/* styles divers : entetes, perso, blocs... */

#LeContenu > h1
	{
	margin-top:0px;	
	}
h1 {
	font-size:180%;
	text-transform:none; 
	text-align:center;
	letter-spacing:2px;word-spacing:3px;
}
h2 {
	font-size:120%;
	text-transform:none; 
	text-align:left;
	letter-spacing:1px;word-spacing:2px;
	color:#F90;
	background: url(/styles/interface/bulletitre2orange.gif) left 0.4em no-repeat;
	margin:10px 0 3px 0;
	padding-left:15px;
}
h3 {
	font-size:100%;
	text-transform:none; 
	text-align:left;
	margin-left:2em;
	margin-bottom:0;
}
h4 {
}
#LeContenu p
	{
	text-align:justify;	
	margin:0 0 1.2ex 0;
	}

/*
 styles perso : perso1 et 2 sont utilisés en span pour mettre en valeur mots ou expressions
 pour les gras et italiques (strong et em) on peut determiner une couleur
 les paragraphes ont une marge basse.

*/

.perso1 {color:#F69;	
	}
.perso2 {color:#930;
	}
.deuxcolonnes {
	-moz-column-count:2;
	-moz-column-gap:2em;
	-moz-column-width:auto;
	}
 
#LeContenu strong {
	font-weight:bolder;
	color:#F69;
	}
#LeContenu h2 strong {	color:#F90;	}
#LeContenu em{	color:#60F;	}

.blocdroite, .blocgauche  {
	border:1px solid #000; 
	border-right:2px solid #000; 
	border-bottom:2px solid #000;
	width:auto;
	padding:5px;
	}

.blocdroite {
	float:right;
	margin:0px 0px 10px 5px;
}
.blocgauche {
	float:left;
	margin:0px 5px 10px 0px;
}
.imagedroite {
	float:right;
	width:auto;
	margin:2px 0px 2px 5px;
}
.imagegauche {
	float:left;
	width:auto;
	margin:2px 5px 2px 0px;
}
.retraitgauche {
	margin: 0 0 0 40px;
	}

/* meteo sur chaque page */

#meteoresult div {  float:left;width:51px;}
#meteoresult div p {  text-align:center;}
#meteoresult .lib2 {  display:none;  }
#meteoresult p.soleil {  display:none;  }
#meteoresult p.temperatures span.lib {  display:none;  }
#meteoresult p.temperatures {  font-size:80%;  }
#meteoresult .finbloc {clear:both;height:0px;}

/* marges du form : identique qq soit le navigateur sinon ie deborde...*/
#menuD2 form { margin:0 2px 0 2px;}
/* largeur du select : id */
#menuD2 select { width:110px;}

/* logos dans le bandeau                */
. logo, . logoD {
	background-color:#FFF;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	-moz-opacity:0.8;
	-opacity:0.8;
	margin-top:25px;
	}
.logo {	float:left;width:250px;}
.logoD {
	float:right;
	width:320px;height:60px;
	background:url(/styles/images/logoD.gif);
	}
.logo h1, .logoD h1 {
	color:#FFA852;
	padding:0;margin:0;
	}
.logo h1 {position:absolute;top:-5000px;}
.logoD h2 {
	background: url();
	color:#78A8A8;
	padding:0;margin:0;
	}
h2.titrepage {
	background: url();
	color:#000;position:absolute;bottom:5px;left:5px;
	}
.logo h2 {
	letter-spacing:0px;word-spacing:0px;
	font-size:80%;
	}
.logoD h2 {
	letter-spacing:1px;word-spacing:2px;
	font-size:80%;text-align:center;
	}

/* menu d'accessibilité */
#accessible {
	margin:0 auto 0 auto; width:40em;
	font-size:90%;
	} 
#accessible ul {
	list-style:none;margin:0;padding:0;
	} 
#accessible li {float:left;}
#accessible li a  {
	color:#FFF;text-decoration:none;
	padding:0 10px;margin:0 0.5em;
	}
#accessible li a:hover  {background-color:#F90;}

.article{width:50%;float:left;}

.cliquez {margin:60px 0 0 0;}