/*
page_design a.css
------------------
*/
/*J'appelle le fichier csshover pour la compatibilité Hover avec IE < 7 (NON VALIDE CSS MAIS INDISPENSABLE)*/
body {
  behavior: url("csshover.htc");
}

body{width: 1000px; height: 810px;
	margin: auto; /* Pour centrer notre page */
	margin-top: 10px;    margin-bottom: 20px;    /* Idem pour le bas du navigateur */
	padding: 0;
	font-family: Arial, "Arial Black", "Times New Roman", Times, serif; background: url("images_clos_dauphin/degrade.png") repeat-x bottom;}
h1{width: 110px; height: 14px; position: absolute; right: 130px; top: 155px; padding: 0; margin: 0; color: white; background-color:rgb(90,168,73); text-align: center; font-size: 0.8em; font-style:italic;}

h3{font-size: 1.6em; margin-top: -15px; color: rgb(221,236,172);}
h4{width: auto; font-size: 1em; color: rgb(177,45,14); margin: 0; margin-top: 5px; margin-bottom: 0;}
p{font-size: 0.8em; text-align: left;}

/*LA TETE*/
#tete{width: 1000px; height:200px;
	position: absolute; left: 10px; top: 10px;
	background: url("images_clos_dauphin/bandeau_a.jpg") no-repeat; border-top: solid 1px rgb(111,20,18); border-left: solid 1px rgb(111,20,18);}
#logo{width: 70px; height: 70px; background: url("images_clos_dauphin/gdfrance.png") no-repeat; position: absolute; left: 940px; top: 115px;}
#epis{width: 40px; height: 32px; background: url("images_clos_dauphin/epis.png") no-repeat; position: absolute; left: 890px; top: 150px;}
   
/*LE MENU*/
#menu{width: 120px; height: 605px; margin-left: 0;
	position: absolute; top: 205px; left: 10px;
	font-size: 0.7em; font-weight: bold; font-style: italic; color: rgb(66,111,18); 
	background-color:rgb(239,250,194); line-height: 2em; 
	text-align: right; padding: 0px; padding-right: 5px;
	border-top: 1px solid rgb(66,111,18); border-left: 6px solid rgb(66,111,18); list-style-type: none;}
#menu li{border-collapse: collapse;  border-bottom: 1px solid rgb(66,111,18);}
#menu a {text-decoration: none;  display: block; margin: 0; color: rgb(66,111,18);} /*le display:block rend la zone cliquable*/
#menu a:hover
	{background-color: rgb(66,111,18);
	border-top: outset 1px rgb(255,255,255); border-right: outset 1px rgb(255,255,255);
	color: rgb(255,255,255); padding: 0; padding-right: 3px;}
#menu a:active
	{width: 130px; height: 30px; left: 15px; background-color: rgb(37,57,139);
	border-top: outset 4px rgb(255,255,255); border-right: outset 4px rgb(255,255,255);
	color:rgb(255,255,0); padding-right: 5px;}
	
#meteo{width:100px; height: 80px; position: absolute; left: 30px; top: 620px; z-index: 20;}   
#visites{width:100px; height: 40px; position: absolute; left: 30px; top: 770px;  z-index: 20;}   

/*LE PIED*/
#pied{width: 1000px; height:25px; position: absolute; left: 10px; top: 815px;
	background-color:rgb(66,111,18); background: url("images_clos_dauphin/bandeau_pied.png");  z-index: 2;}
#pied p{position: relative; left: 20px; top: -20px;}
#pied table{position: relative; top: -60px; width: 540px; height: 25px; margin: auto; color: rgb(66,111,18);}
#pied td{width: 180px; font-size: 0.7em; text-align: center; padding-top: 5px;}
#filet_vertical{border-left: solid 1px white; border-right: solid 1px white;}
#pied a{color: rgb(66,111,18);}

/*--------------------------------
LES PAGES EN GENERAL
-----------------------------------*/
.page{width: 830px; height:600px; padding: 0;
	position: absolute; left: 177px; top: 210px;
	border-top: 4px inset rgb(176,178,62); border-right: 4px inset rgb(176,178,62);}
.page h2{width: auto; padding: 0; padding-left: 20px; padding-top: 10px; font-size: 1.6em; color: rgb(66,111,18);}
.acc_page{width: 150px; height: 40px; background: url("images_clos_dauphin/degrade_fleur.jpg") no-repeat right; position: absolute; top: 15px; right: 10px;}
.lettrine:first-letter
	{font-size: 3em; font-weight: bold; color: rgb(66,111,18); float: left; margin-right:4px;}
.signature{font-size: 0.7em; font-style: italic; text-align: right;}
.mentions{text-align: center;}

/*PAGE INDEX*/
#img_accueil{width: 400px; height:400px;
	position: absolute; left: 50px; top: 20px; margin: 0; padding: 0; background: url("images_clos_dauphin/img_accueil.png") no-repeat; }
#titre_edito{width: 100%; text-align: center;
	font-size: 1.2em; font-family: "Arial Black", "Times New Roman", serif;
	font-style: italic; color: rgb(66,111,18);}
#edito{width: 300px; height:450px;
	position: absolute; left: 470px; top: 20px;
	padding: 0; padding: 7px; border: solid 1px rgb(176,178,62); overflow: auto;}
#edito p{margin-bottom: 10px;}

/*AFFICHAGE DYNAMIQUE DE L'ACTUALITÉ LOCALE*/
/*Je définis l'id générale*/
#actu_dynamique {position: absolute; left:50px; top:400px;}
/*Je définis la première balise ul*/
#actu_dynamique ul {
 display: block; width:250px; height:60px;
 list-style:none; padding: 10px;
 text-align: center; font-size: 1em; font-weight: bold; 
 background-color:rgb(14,72,178); border: inset 6px rgb(56,222,222);}
#actu_dynamique ul a {color: rgb(255,211,33);}
/*Je définis la deuxième balise ul (imbriquée)*/
#actu_dynamique ul li ul {
  display: block; width: 500px; height: auto; padding: 10px;
  font-size: 0.9em; font-style:italic; color: rgb(37,57,139); background-color: rgb(221,236,172);
  border: outset 3px rgb(37,57,139); overflow: auto;}
/*Je cache la deuxième balise ul (imbriquée)*/
#actu_dynamique ul li ul{
  display:none;}
/*Le pseudo-format hover peut s'appliquer à n'importe quelle balise*/
/*L'astuce: au survol de la première balise li, je paramètre la deuxième balise ul pour qu'elle apparaisse*/
#actu_dynamique ul li:hover ul {
  display:block;
  position:relative;
  top:-10px;
  left:150px;}


/*PAGE LA BALME*/
#commune{width: 750px; height: auto; position: absolute; left: 60px; top: 65px ;}
#commune p{line-height: 1.1em;}
.image_b, .image_d {float: left; margin-right: 5px;}
.image_a, .image_c{float: right; margin-left: 5px;}

/*PAGE GITE*/
.plan{width: 750px; height: auto; position: absolute; left: 20px; top: 100px ;}
#descr_gite p{width: 360px; height: auto; position: absolute; left: 400px; top: 110px ; line-height: 1.2em;}

/*PAGE GALERIE PHOTOS*/
#fond_photos{height: 580px; width: 820px; background-color:black; padding-left: 10px;}
#fond_photos h3{margin-top: 5px;}
img{border:0;}
#legende{position: absolute; top: 200px; left: 300px; color:rgb(255,255,0);}

#horizon {position:relative; top:0; left:0; margin-top:-10px;} /*imagettes relatives entre elles*/
#horizon a {margin:0;text-decoration:none;}
#horizon a:hover {
  background-color:black;} /*valeur neutre au lien pour que hover fonctionne*/
#horizon a .grande_hor {display:block; position:absolute; width:0px;} /*l'image affichée sera fixe*/	  
#horizon a:hover .grande_hor { 
  position:absolute; top:100px; left:130px; width:600px; height:399px;} /*position et taille image affichée*/
  
/*même raisonnement en vertical avec ajustements divers*/  
#vertical{position:relative; top:0; left:0; width: 90px;} /*larg 90px sinon le hover fonctionne sur tte la largeur*/
#vertical img{display: block; margin-bottom: 5px;}
#vertical a {margin:0; text-decoration:none;}
#vertical a:hover {
  background-color:black;}
#vertical a .grande_ver {display:block; position:absolute; width:0px;}	  
#vertical a:hover .grande_ver { 
  position:absolute; top:35px; left:130px; width:600px; height:399px;}

/*PAGE HISTOIRE*/
#histoire p{width: 510px; height: auto; position: absolute; left: 150px; top: 75px ; line-height: 1.1em;}
  

/*PAGE VILLES PROCHES*/
#villes_proches{width: 379px; height: 385px; background: url("images_clos_dauphin/villes_proches_a.jpg") no-repeat; position: absolute; top:55px; right: 50px;}
#leg_tableau{position: absolute; left: 20px; top: 70px;}
#tableau_villes{width: 330px; height: 300px; position: absolute; left: 20px; top: 130px; margin: 0px;
	border-collapse: collapse; background-color: rgb(221,236,172); color: black; border: inset 5px rgb(66,111,18);}
#tableau_villes td{text-align: center; font-size: 0.8em; border: solid 1px rgb(66,111,18);}
#tableau_villes a{color: black;}
#tableau_villes a:hover
	{display: block; margin: 0; background-color: rgb(66,111,18); color: white;} /*display block rend la cellule cliquable*/
#tableau_villes a:active
	{background-color: rgb(66,111,18) ; color: white;}

/*PAGE ACTIVITES*/
#activites{width: 750px; height: auto; position: absolute; left: 40px; top: 60px ;}
#activites li{font-size: 0.8em; margin-top: 2px;}
.img_droit{height: 150px; width: 121px; float: right; margin-left: 15px; margin-right: 70px;}
.img_gauche{height: 150px; width: 188px; float: left; margin-right: 30px;}

/*PAGE ACCES*/
#acces{width: 400px; height: 430px; position: absolute; left: 80px; top: 50px ;}
#acces h4{margin-top: 30px;}
#acces table{width: 300px; margin-top: 20px; position: absolute; left: 100px;}
#acces td{width: 250px; height: 30px; font-size: 0.8em; text-align: center; background-color: rgb(221,236,172); border: solid 2px rgb(66,111,18);}
#plan_acces{width:300px; height:287px; position: absolute; top: 120px; right:30px; border: solid 1px rgb(66,111,18);}

/*PAGE SÉJOUR*/
#sejour1 {width: 370px; height: auto; position: absolute; left: 20px; top: 70px;}
#sejour2 {width: 370px; height: auto; position: absolute; left: 410px; top: 70px;}
div #sejour1 p, div #sejour2 p{font-size: 0.7em; text-align: justify; margin-top: 0 ; margin-bottom: 5px;}
#sejour1 br, #sejour2 br{line-height:1.2em;}
#sejour1 a, #sejour2 a{color: rgb(177,45,14);}

/*PAGE TARIFS*/
#tarifs caption{text-align: center; font-size: 0.9em; font-weight: bold; color: rgb(111,20,18); margin-top: 10px; margin-bottom: 10px;}
#tarifs{width: 660px; height: auto; position: absolute; left: 80px; top: 80px ;
border-collapse: collapse; background-color: rgb(221,236,172); color: black; border: inset 5px rgb(66,111,18);}
#tarifs td{text-align: center; font-size: 0.8em; width: 220px; height: 40px; background-color: rgb(238,255,187); border: solid 1px rgb(66,111,18);}
#tarifs p{text-align: center; font-weight: bold; color: black; margin-top: 10px; margin-bottom: 10px;}

/*PAGE RÉSERVATIONS*/
#reserv{width: 450px; height: auto; position: absolute; left: 180px; top: 100px ;}
#reserv p{line-height: 1.1em; text-align: center; margin-bottom: 10px;}
#reserv p strong{font-size: 1.1em; font-weight: bold; color: white; padding:5px; background-color:rgb(66,111,18);}
#reserv p em{font-size: 1.1em; font-weight: bold; color: white; padding:5px; background-color:rgb(45,114,178);}

/*PAGE LIVRE D'OR*/
#livre{width: 660px; height: auto; max-height: 400px; position: absolute; left: 80px; top: 80px ;
border-collapse: collapse; background-color: rgb(221,236,172); color: black; border: outset 5px rgb(66,111,18); overflow: auto;}
#livre td{font-size: 0.8em; padding: 10px; vertical-align: top;}
.client{font-weight: bold; width: 160px; background-color: rgb(255,255,255);}
.message_client{width: 500px; border-bottom: solid 1px rgb(255,255,255);}

#liens_pages{width: 665px; height: auto; position: absolute; left: 80px; top: 500px ; color: black; border: solid 1px rgb(66,111,18);}
#liens_pages p {text-align: center;} 

/*PAGE LIENS UTILES*/
#liens_ut{width: 500px; height: auto; position: absolute; left: 120px; top: 70px ;}
#liens_ut dt{font-size: 0.9em; text-align: left; margin-top: 20px;}
#liens_ut a{font-size: 0.9em; color: rgb(66,111,18); line-height:1.5em;}

/*PAGE MENTIONS*/
#mentions{width: 450px; height: auto; position: absolute; left: 180px; top: 70px ;}
#mentions p{text-align: center;}