@charset "utf-8";
/* CSS Document */

body {
	text-align:center;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	color:#000000;
	background-color:#eeeeee;
	font-size:1em;
	margin:0px;  
}
h1 {
	font-size:0.7em;
	font-weight:bold;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	margin:0px; 
}
h1 a:link {
	color:#ffffff; text-decoration:none;
}
h1 a:visited {
	color:#ffffff; text-decoration:none;
}
h1 a:hover {
	color:#000000; text-decoration:none;
}
h1 a:active {
	color:#ffffff; text-decoration:none;
}

h2,h4 {
	margin-top: 12px;
	margin-bottom:0px;
	padding-left:20px;
	font-weight: bold;
	font-size: 0.8em;
	color:#ffffff;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	/* border-bottom:#ffffff 0.1em dashed; /* effet souligne du titre */
}
h4 {
	display:block;   /* <h2> devient une balise block, et avec la propriete float on peut avoir une autre balise block collée */
	float:left;
}
h3 {
	padding-left: 0px;
	padding-right: 0px;
	margin-top: 0px;
	margin-bottom:0px;
	font-weight: bold;
	font-size: 0.7em;
	color:#ffffff;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
}

p {     /* valeurs par defaut de l'elt p si aucun style particulier supplementaire ne lui ait applique */
  display: block;
  margin: 1.12em 0;  /* marge haute et basse de 1.12em, et d'une marge gauche et droite de 0 - valeurs par defaut du p */
}
form {
	margin-top: 10px;  /* alignement avec la liste deroulante */
	margin-bottom:0px;
}
.main {
	padding-right: 20px;
	padding-left: 20px;
	font-size: 0.6em;
	color:#5f98b6;
	line-height:140%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
}
.mainbody {
	padding-right: 20px;
	padding-left: 20px;
	font-size: 0.8em;
	color:#a0c1d3;
	line-height:140%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
}
#page {
	background-color: #ffffff; 
	width:900px;
	/*height:768px;*/
	text-align:left;
	margin:auto;  /* pour le centrer surtout marges droite et gauche */
	background-image:url(images/page-bg_900.gif);
	background-repeat:repeat-y;
	margin-bottom:20px; 
}
#header {
	background-image: url(images/esf9_100.gif);
	background-repeat:no-repeat;
	width:900px;
	height:100px;
	margin:0px;
	z-index:10;
}

#menu {
	background-image: url(images/bandeau_red_vierge.gif);
	background-repeat:no-repeat;
	width:900px;
	height:24px;
	margin:0px;
	padding:0;
}
.esf_menu {
	width:225px;
	height:19px;  /* 24 moins le padding top de 5 , sinon decalage only sous IE6 */
	padding-top:5px;
	text-align:center;	
	float:left;
}

#pano_top {
	width:900px;
	height:200px;
	margin:0px;
}

#between_top {
	background-image: url(images/report-top_900.gif);
	background-repeat:repeat-x;
	width:900px;
	height:10px;
	margin:0px;
}
#between_bottom {
	background-image: url(images/report-bottom_900.gif);
	background-repeat:repeat-x;
	width:900px;
	height:10px;
	margin:0px;
	float:left;
}	
#gauche,#milieu,#droite{
	float:left; 
}

#gauche {
	background-image: url(images/gauche_596.gif);
	background-repeat:no-repeat;
	width:596px;
	margin:5px 0 0 0;
}
#milieu {
	background-image: url(images/milieu_281.gif);
	background-repeat:no-repeat;
	width:281px; 
	margin:0px;
}
#droite {
	background-image: url(images/droite_23.gif);
	background-repeat:no-repeat;
	width:23px;
	margin:0px;
}
#img_bottom {
	background-image: url(images/plan-serre-chevalier_namesred4.jpg);
	background-repeat:no-repeat;
	width:900px;
	height:362px;
	margin:0px;
	clear:left; /* pour que img_bottom ne se mette pas a gauche de div=droite , puisque ce dernier est en float:left */
}

#footer {
	background-image: url(images/footer_essai4.gif);
	background-repeat:repeat-x;
	width:900px;
	height:85px;
	margin:0px;
	padding-top:0px;
	padding-bottom:0px;
	color:#FFffff;
	font-weight:bold;
	font-size:0.8em;
	clear:left;  /* pour ne pas lui appliquer tous les float des div precedents*/
}

#footer a:link {
	color:#ffffff; text-decoration:underline;
}
#footer a:visited {
	color:#ffffff; text-decoration:underline;
}
#footer a:hover {
	color:#000000; text-decoration:none;
}
#footer a:active {
	color:#ffffff; text-decoration:underline;
}

#footer_left, #footer_milieu, #footer_right{
	float:left;
	width:300px;
}

#footer_milieu {
	padding-top:10px;
	text-align:left;
}
#footer_right {
	padding-top:10px;
	text-align:right;
}
#footer_milieu ul {
padding-top:10px;
/*padding-left:30px;*/
}
#footer_milieu li {
list-style-position:inside;
}





#milieu table {  /* la balise "table"  dans div d'id "milieu" */
	background-color:#004771;
	border:none;
	margin:auto; /*centre le tableau */
	/* attention on n'utilise pas width pour le tableau */
}

#milieu td, th { 
	border:none;
	padding: 5px; 
}
.video {
	text-align: center; 
}

/* Pour le choix du village */

select,optgroup {
	border-style:none;
	border-width:0px;
	padding-right: 5px;
	padding-left: 5px;
	font-size: 0.8em;
	color:#ffffff;
	background-color:#7b1515;
	line-height:140%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-style:normal;
	border:#000000 1px dashed;
	border-collapse:collapse;
}
option { 
	font-size: 0.9em;
}

#village-A, #village-B {
	clear:left; 
	margin-left:6px;/* 27 au debut mais il faut diminuer pour ne pas avoir decalage avec IE6 */
	width:590px; /* 596 moins le margin left de 6, sinon decalage avec IE6 */
	margin-top: 60px;
	font-weight: bold;
	font-size: 11px;
	margin-bottom: 0px;
	color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#village-B {
	visibility:hidden;
}
#village-A a:link {
	color:#0066FF;
}
#village-A a:visited {
	color:#0066FF;
}
#village-A a:hover {
	color:#0066FF;
}
#village-A a:active {
	color:#0066FF;
}
#texte-A, #texte-B  {
	width:545px; /* 565 moins 20 du remplissage de la classe main sinon decalage avec IE6 */
	margin-top: 10px;
	clear:left;

}
#texte-B {
	visibility:hidden;
}