html 
{	font-size: 100%; /*  -> évite un bug de redimensionnement du texte dans IE. */}
	body 
{	width: 99% ;/* Largeur en */
	margin:0px; 
	padding:0px; /* Pour navigateur opéra */	
	background-color:rgb(231,218,58);
	background-image: url(images/paysages.jpg);
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:center;
	text-align:center; /* Pour navigateur internet explorer*/
	vertical-align: middle; /*Seulement pour les navigateurs récents*/

	font-family:"Comic sans MS",Arial, Verdana,Serif;}
h1
{	margin-right:1em;
	color: black;
	font-size:180%;}
table.tete
{	width:90%;
	margin:11px 5% 0px;
	border:0px;
	color:red;
	font-size:85%;}
td.drap  
{	text-decoration : none;	
	width:32%;
	border-width:0;}	
td.bann
{	background:url(images/generateur.jpg) no-repeat;/* Image de fond non repétée et taille en pixels*/
	width:40%;
	padding:0px;
	margin:auto;}		
td.logo 
{	width:50px;
	height:50px;}
td.lang
{	font-size:100%;
	color:black;}
td.jour
{	text-align:right; /* Pour navigateur internet explorer*/	}
td.reserv
{	text-align:left; /* Pour navigateur internet explorer*/	}	
img#fran
 {	border:0px;  }	
img#ang 
{	border:0px;}
img#ned
{	border:0px;}
div#navbar2 /* Conserne barre de menu horizontale*/
{ 	height: 30px;
    width: 76%;
	margin-left:12%;
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
    background-color: rgb(18,126,23);}
div#navbar2 ul 
{   margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #FFF;
    line-height: 30px;
    white-space: nowrap;}
div#navbar2 li 
{   list-style-type: none;
    display: inline;}
div#navbar2 li a 
{   text-decoration: none;
    padding: 7px 10px;
    color: #FFF;}
div#navbar2 li a:link 
{   color: #FFF;}
div#navbar2 li a:visited 
{   color: #CCC;}
div#navbar2 li a:hover 
{   font-weight: bold;
    color: #FFF;
    background-color: #9B2;}
	
div.contenu	
{	height: 100%;
	overflow: auto;	
	margin-left:11%;
	margin-top:2%;
	font-size:1.2em;
	text-align:center; /* Pour navigateur internet explorer*/
	color: #00FFFF;
	width: 77%;
	padding: 0 10px 0 10px ;/* Marges intérieures: haut droite bas gauche en pixels*/	
	border:0;}
div.contenu  h2 /* Titre de haut de pagel*/
{	line-height:80px;/* hauteur de ligne */
	margin-left:1%;
	font-size: 1.5em ;/* Taille du texte en relatif (conseillé)*/
	background: url(images/vache_151.gif) no-repeat left bottom;
	color: black ;
	border-bottom: 1px solid #9b2 ;/* bordure basse du type ligne */}
div.contenu  h4 /* Remarque bas de page tarifs*/
{	color: #9b2 ;}
div.contenu p.gene
{	color:red;
	font-size:1.3em;}	
div.contenu p.logo  img /* Logo hte Marne dans page situation*/
{	width:180px;
	height:180px;
	float: left;
	margin-top:10px; /* Marge extérieure haute*/}
div.contenu input
{	font-size:1.2em;}	
div.contenu p img.gauch /* Images de la description*/
{	width:200px;
	height:160px;
	margin-left:50px;
	margin-right:10px;
	float:left;
	left: 50px;}
div.contenu p img.gauch:hover
{	width:420px;
	height:315px;
	background: url(video.jpg) 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 */
	border: 1px solid #f97;}
div.contenu p img.gauch1 /* Images de  description et activité*/
{	width:120px;
	height:160px;
	margin-left:50px;
	margin-right:10px;
	float:left;
	left: 50px;}
div.contenu p img.gauch2 /* Images de la description*/
{	width:200px;
	height:160px;
	margin-left:50px;
	margin-right:10px;	
	float:left;
	left: 50px;}
div.contenu p img.gauch2:hover
{	width:420px;
	height:315px;
	background: url(chjaune.jpg) 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 */
	border: 1px solid #f97;}
div.contenu p img.gauch3 /* Images de la description*/
{	width:160px;
	height:120px;
	margin-left:50px;
	margin-right:10px;	
	float:left;
	left: 50px;}
div.contenu p img.gauch3:hover
{	width:420px;
	height:315px;
	background: url(cathedra.jpg) 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 */
	border: 1px solid #f97;}
div.contenu p img.gauch4 /* Images de  description et activité*/
{	width:160px;
	height:120px;
	margin-left:50px;
	margin-right:10px;
	float:left;
	left: 50px;}	
div.contenu p img.droit /* Images de  description et activité*/
{	width:200px;
	height:160px;
	margin-right:50px;
	margin-left:10px;
	float:right;
	right: 50px;}
div.contenu p img.droit:hover
{	width:420px;
	height:315px;
	background: url(sam.jpg) 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 */
	border: 1px solid #f97;}
div.contenu p img.droit1 /* Images de la description*/
{	width:200px;
	height:160px;
	margin-right:50px;
	margin-left:10px;
	float:right;
	right: 50px;}
div.contenu p img.droit1:hover
{	width:420px;
	height:315px;
	background: url(cuisine.jpg) no-repeat 0 30px ; /* Et ici on agrandit l'image */
	border: 1px solid #f97;}
div.contenu p img.droit2 /* Images de la description*/
{	width:200px;
	height:160px;
	margin-right:50px;
	margin-left:10px;
	float:right;
	right: 50px;}
div.contenu p img.droit2:hover
{	width:420px;
	height:315px;
	background: url(chverte.jpg) no-repeat 0 30px ; /* Et ici on agrandit l'image  */
	border: 1px solid #f97;}
div.contenu p img.droit3 /* Images de activités*/
{	width:140px;
	height:120px;
	margin-right:50px;
	margin-left:10px;
	float:right;
	right: 50px;}
div.contenu p img.droit4 /* Images de la description*/
{	width:160px;
	height:120px;
	margin-left:50px;
	margin-right:10px;	
	float:right;
	left: 50px;}
div.contenu p img.droit4:hover
{	width:420px;
	height:315px;
	background: url(cremail.jpg) 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 */
	border: 1px solid #f97;}	
div.contenu p img.droit5 /* Images de la description*/
{	width:160px;
	height:120px;
	margin-left:50px;
	margin-right:10px;	
	float:right;
	left: 50px;}
div.contenu p img.droit5:hover
{	width:420px;
	height:315px;
	background: url(corgirno.jpg) 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 */
	border: 1px solid #f97;}
div.contenu p img.centre /* Images de la description */
{	width:200px;
	height:160px;}
div.contenu p img.centre:hover
{	width:420px;
	height:315px;
	background: url(litsbleu.jpg) no-repeat 0 30px ; /* Et ici on agrandit l'image  */
	border: 1px solid #f97;}
div.contenu p img.centre1 /* Images de la description */
{	width:200px;
	height:160px;}

div#page  table.moi /* Concerne les pages tarif*/
{	color: #00FFFF;
	margin-left: auto; 
	margin-right: auto; 
	width: 90%; 	
	padding: 0 10px 0 10px ;/* Marges intérieures: haut droite bas gauche en pixels*/
	background-color:#dea;
	color:blue;
	font-size:1.0em;}
table.tarif /* Concerne les pages tarif*/
{	margin-left: auto; 
	margin-right: auto; 
	width: 90%; 
	background-color:yellow;
	color:blue;
	border: 2px solid #f97;
	font-size:80%;}
div.contenu  table.calend /* Concerne les pages tarif*/
{	border:1px;	
	margin-left: auto; 
	margin-right: auto; 
	width: 90%; 
	background-color:yellow;
	color:blue;
	font-size:80%;}
div.contenu object /* Concerne la carte*/
{ 	width:425px;
	height:350px;
	color:#0000FF;
	text-align:left;}
p.texte  
{	text-align:left; }
div.contenu p
{   color:#FFF; }
div#page table.anim /* Concerne le bandeau défilant des pages mois réservations*/
{	margin-top:0px; 
	margin-left: auto; 
	margin-right: auto;
	font-size:1.0em;
	color:red;
	height:20px;}
div#page table.calend /* Concerne les pages mois réservations*/
{	border:1px inset;
	margin-left: auto; 
	margin-right: auto; 
	width: 95%; 
	color: #66CC33;
	background-color:yellow;
	font-size:0.7em;}
.bt  /* Concerne la page tarif  bouton je réserve*/
{	width:200px;
	height:50px;
	border-left:5px solid blue;
	border-top:5px solid red;
	border-right: 5px solid green;
	border-bottom:5px solid yellow;
	background-color: black;
	color: white;
	font-family:"Comic sans MS", Arial, Verdana,Serif;
	font-size: 80%;}
.bt:hover
{	background-color: #66CC33;
	cursor: pointer;}
.bt:active
{	background-color: red;
	cursor: pointer;}	
table.grille  /* Concerne les pages mois réservations*/
{	margin-top:0px; 
	margin-left: auto; 
	margin-right: auto; 
	width: 93%; 
	color:black;
	font-size:1.0em;}
/*div.contenu p.ref Concerne les pages contact référencement
{	text-align:right;
	font-size:0.5em;}*/
.pied  p
{	width: 90%; 	
	padding: 0 10px 0 10px ;/* Marges intérieures: haut droite bas gauche en pixels*/
	margin-top:0px; 
	margin-left: 20px; 
	margin-right: auto;
	color:###FF;
	font-size:1.0em;}