/* On met le padding à 0 pour le navigateur Opera qui définit des padding par 
	défaut pour le body */
	/* On utilise text-align: center ; pour Internet Explorer, c'est la seule façon 
	de centrer les éléments de type block avec ce navigateur */
html {
	height: 100%; 
}

body
{
        margin: 0 ;
        padding: 0 ;
        text-align: center ;
        font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: url(../images/back.gif) repeat;
}

	/* On définit la largeur de la division qui contient l'ensemble de la page à 
	796 pixels */
	/* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type 
	block (comme les divisions), nous centrons donc cette division */
	/* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */	

a:hover {
	background: none; /* correction d'un bug IE */
}

/* Pour centrer les images autrement qu'en passant par les tableaux, le valideur du w3c affichant des erreurs! */
img.centre { 
	display: block;
	clear: both;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#container {
	height: 100%; 
        width: 796px ;
        margin: 0 auto ;
	padding: 0;
        text-align: left ;
        border: 2px solid #ab4 ;
	background: url(../images/back2.gif) repeat;
}

	/* On définit la hauteur de la partie header, contenant le titre du site */
	/* On ajoute un petit élément décoratif sur le côté de la page et on crée un 
	espace à gauche et à droite du contenu */

#extraDiv1 {
	height: 100%;
	margin: 0 auto;
	padding: 0;
	background: url(../images/cedre+gazon.gif) bottom right no-repeat;	
}

#intro {
	margin: 0;
	padding: 0;
}

#extraDiv2 {
	margin: 0;
	padding: 0;

}

#pageHeader {
	margin: 0;
	padding: 0;
	height: 150px;
	background: #ffc url(../images/en_oree.png) top left no-repeat;
}

#pageHeader img {
	float: right;
	margin: 20px 15px 0 0;
	border: 0;
}

#pageHeader h1 {
	text-indent: -5000px;
	margin: 0;
	padding: 0;
	line-height: 0;
}

	/* La barre de menu (#menuhaut) */

#quickSummary {
	margin: 0;
	padding: 3px 0;
	height: 1.3em;
	background-color: #a39278;	
	font-weight: bold;
	font-size: 1em;
}

#quickSummary ul {
	margin: 0;
	padding: 0 0.6em 0;
	list-style-type: none;
	background-color: #a39278;
	color: orange;
	text-align: right;
}

#quickSummary li {
	display: inline;
}

#quickSummary a {
	color: white;
	text-decoration: none;
}

#quickSummary a:hover {
	text-decoration: underline;
}

/* Drapeaux */

#lang_select {
	margin: 0 2em;
	padding: 0;
	color: orange; 
	float: left; 
}

#lang_select img {
        border: 0 none;
	width: 18px;
	height: 12px;
}

#lang_select a {
	color: gray; 
}

#lang_select a:hover {
	text-decoration: none;
	color: orange;
}

/* END DRAPEAUX */

#preamble {
	margin: 0;
	padding: 0;
}

	/* La boîte centrale comprenant les div "mainLeft" et "supportingText",
	respectivement les boîtes gauche et droite */

#main {
	float: left;
	margin: 0 0 2em 0;
	padding: 0;
	width: 796px;
} 

	/* La boîte de gauche */

#mainLeft {
	float: left; 
	margin:3em  0;
	padding: 5px 20px 0 0; 
	width: 180px; 
	height: 600px ; 
        background: url(../images/papillon1.gif) no-repeat bottom center;
}

	/* La boîte des liens	*/

#linkList {
	margin-top: 1em;
	margin-left: 1em;	
}

#linkList ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
} 

#linkList li {
	margin: 0 0 5px 0;
	padding: 0;
}

#linkList a {
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 170px ;
	line-height: 30px ;
	color: #000 ;
	text-indent: 30px ; /* On décale le texte de 40px du bord gauche */
	text-decoration: none ;
	background: url(../images/bg_menu1.gif) no-repeat ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
        font-family: italic Georgia "Trebuchet MS", helvetica, serif ;	
	font-size: 1em;
	font-weight: bolder; 
	color: #ab4; 
}

#linkList a:hover {
	border-color: #ab4 #ab9 #ab9 #ab4;
	background-color: yellow;
	text-decoration: none;
	color: gray;	
	background: url(../images/bg_menu1.gif) no-repeat 0 -30px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

	/* Test du défilement */

#supportingText {
	float: left;  
	margin: 0 ;
        padding: 1em 0 5em 3em ;
	width: 550px;
	font: 11px "trebuchet ms", arial, helvetica, sans-serif; 
	color: green;
        background: url(../images/bg_page3.gif) no-repeat top left;	
}

#supportingText h2 {
	text-indent: -5000px;
	margin: 0;
	line-height: 0;
}

#supportingText h3 {
        margin-left: 2em ;
        padding-left: 5px ;
        border-bottom: 1px solid #9b2 ;
        border-left: 3px solid #9b2 ;
	font-weight: bolder;
	font-size: 120%;
        color: #9b2 ;
}



#supportingText a {
        color: #8a0 ;
	text-decoration: none;
}

#supportingText a:hover {
        color: #9b2;
}



#supportingText .liste {
	margin: 0;
	padding: 0;
	border: none;
	color: green;
	text-decoration: underline;
}

#supportingText p {
        text-align: center ;
	margin: 1em 2em 1em 7em;
}

#supportingText p.partenaire {
	padding-bottom: 2em;
        text-align: left;
}


#supportingText p.norm {
	font-family: "Trebuchet MS", arial, helvetica, sans-serif;
	font-size: 1.8em;
	font-style: italic;
}

#supportingText img {
	border: 2px solid;
        border-color: #444 #AAA #AAA #444;
}

#supportingText q {
	margin-left: 12em;
	font-family: "Trebuchet MS", arial, helvetica, sans-serif;
	font-style: italic;
}

/* ---------------------------------------------- */

#supportingText table {
	margin: 1em 0 0 5em;
	border-collapse: collapse;	
	padding: 2em; 
	width: 90%;
}

#supportingText table p {
	margin: 0;
	padding: 0;
}

#supportingText th {
	background-color: yellow;
	border-bottom: 1px solid green;
	text-align: center;
	width: 10%;
}

#supportingText th.gauche {
	background-color: yellow;
	border-bottom: 1px solid green;
	text-align: left;
	width: 50%;
}

#supportingText th.droite {
	background-color: yellow;
	border-bottom: 1px solid green;
	text-align: center;
	width: 20%;
}

#supportingText td {
	text-align: center;
	width: 10%;
}

#supportingText td.gauche {
	text-align: left;
	width: 50%;
}

#supportingText td.droite {
	text-align: center;
	width: 20%;
}

#supportingText td.sep{
	text-align: left;
	border-bottom: 1px solid green;
}

#supportingText td.sep2{
	text-align: center;
	border-bottom: 1px solid green;
}

/* -------------------------------------------- */
#supportingText th.tarifsHeadGauche {
	background-color: yellow;
	border-bottom: 1px solid green;
	text-align: left;
	width: 25%;
}

#supportingText th.tarifsHead {
	background-color: yellow;
	border-bottom: 1px solid green;
	text-align: center;
	width: 20%;
}

#supportingText td.tarifsGauche {
	text-align: left;
	width: 25%;
}

#supportingText td.tarifs {
	text-align: center;
	width: 20%;
}

/* -------------------------------------------- */

#supportingText ul {
	list-style-type: none;
	padding-bottom: 5px;
	font-weight: bolder;
	color: green;
}

#supportingText .accueil {
	height: 80px;
	background: url(../images/en_title_accueil.gif) top center no-repeat;
}

#supportingText .gite {
	height: 80px;
	background: url(../images/en_title_gite.gif) top center no-repeat;
}

#supportingText .chambre {
	height: 80px;
	background: url(../images/en_title_chambres.gif) top center no-repeat;
}

#supportingText .cedres {
	height: 80px;
	background: url(../images/en_title_cedres.gif) top center no-repeat;
}

#supportingText .cadre {
	height: 80px;
	background: url(../images/en_title_cadre.gif) top center no-repeat;
}

#supportingText .activites {
	height: 80px;
	background: url(../images/en_title_activites.gif) top center no-repeat;
}

#supportingText .tourisme {
	height: 80px;
	background: url(../images/en_title_tourisme.gif) top center no-repeat;
}

#supportingText .acces {
	height: 80px;
	background: url(../images/en_title_acces.gif) top center no-repeat;
}

#supportingText .tarifs {
	height: 80px;
	background: url(../images/en_title_tarifs.gif) top center no-repeat;
}

#supportingText .themes {
        height: 80px;
        background: url(../images/en_themes.gif) top center no-repeat;
}

	/* Pour le logo 'partenaire terre de quad' */

#supportingText img.partenaire {
	border: none;
	width: 120px;
	height: 25px;
	padding-top: 6px;
}

#supportingText span.flottant {
	float: left;
	margin-top: 1em;
	background-color: yellow;      
}
	/* Pied de page */

#footer {
	margin: 0;
	padding: 0;
	clear: both;
	height: 80px;
}

#footer p
{
	margin: 0 2em;
        padding-right: 10px ;
        text-align: right ; 
        color: green;
}

#footer a {
	text-align: right;
	color: green;
	text-decoration: none;
}

	/* Gestion du cache */

.cache {
position: absolute;
left: 0;
top: -10000px;
}



	/* Pour agrandir la zone de la carte (acces.php) */

#carte {    	/* bloc image en arrière-plan */
	margin: 2em 0 0 5em ;
}

#carte iframe {  
        width : 435px;
        height: 360px;
}

#zone1 {    	/* zone cliquable */
	float: left; 
	width : 20px;
	height: 20px;
	margin-left: 210px;
	margin-top: 60px;
	background: url(../images/circle-green.png) no-repeat;
}

#zone1:hover {
	position: absolute;
	top: 5em;
	left: 10em; 
	width : 600px;
	height: 600px;
	border: 1px solid black;
	background: url(../images/mapprint600.gif) top left no-repeat;
}

#carte a span { 	/* contenu masqué mais accessible sans CSS*/
	position: absolute;
	left: -500em;
	top: -500em;
	text-indent: -500em;
}

/* Div AdSense */

#AdSense {
        margin: 0 auto;
	width: 796px;
	height: 90px;
	border-top: 0px;
        border-right: 2px solid #ab4 ;
        border-bottom: 2px solid #ab4 ;	
        border-left: 2px solid #ab4 ; 		
	background-image: url(../images/banniere_bg.png);
}

#AdSense p {
        margin: 0;
	padding: 0;
        text-align: center ;
}

/* Renvoi en début de page */

#back2top {
        margin: 0;
	float: right;
}

#back2top p {
        margin: 0;
	padding: 0;
	font-weight: bold;
	background-color: yellow;
}

#back2top a {
	color: green;
       text-decoration: underline;
}

#back2top a:hover {
        text-decoration: none;
	background-color: #C3D4DF;
	color: #385C72;
}