<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;

font-family: sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
background-color:#feefdc;

}

/****************************
LETTRINE
****************************/
.lettrine {
float: left; /* positionnement de la lettrine dans le conteneur*/
font-size: 2.5em; /* 3 hauteurs de lignes pour la lettrine*/
font-weight: bold;

font-family: Georgia, Times New Roman, Times, serif;
color: #990000;
margin: 1px  1px 1px 1px;
padding: 1px 1px 1px 1px;
line-height: 1em;
}


.erreur{

font-size: 0.7em;
font-family: Georgia, Times New Roman, Times, serif;
color: #FF0000;
}

.pmilieu{
Margin-left:35%;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color:#feefdc;
height:100%;
background-image: url('../images/menugauche_bg.jpg');
background-repeat: repeat-y;
background-position: left;
}

#header {
height: 100px;
background-image: url('../images/headerBG.jpg');
background-repeat: repeat-x;

}



.telImage{
position: absolute;
right:0;
top:0px;
}

.telTexte{
position: absolute;
right:40px;
top:50px;
font-size: 1.4em;
//font-weight: bold;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-style: italic;
}


#haut {
height: 50px;

}
#conteneur {
/*position: absolute; */
width: 100%;
height:100%;
background-color:#feefdc;
text-align:justify;
background-image: url('../images/menugauche_bg.jpg');
background-repeat: repeat-y;
background-position: left;
}

h2
{       font:Georgia;
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 1.4em ;
	background: url(../images/h2etoile2.jpg) no-repeat left bottom ;
	color: #faaf44 ;
	border-bottom: 1px solid #aa0503 ;
}

h3{     text-align:center;
        font:Georgia;
        padding-left: 25px ;
        line-height: 25px ;
        font-size: 3em ;
        color: #faaf44 ;

}

h4{
        text-align:center;
        font:Arial;
        line-height: 25px ;
        font-size: 3em ;
        color: #faaf44 ;

}

#centre {  
background-color:#feefdc;
margin-left: 100px;
margin-right: 300px;
padding-top:20px;
height:100%;

}



#gauche {
position: absolute;
left:0;
width: 100px;
height:100%;
background-color:#632f17;
background-image: url('../images/menugauche_bg.jpg');
background-repeat: repeat-y;
background-position: right;

}
#droite {
position: absolute;
right:0;
height:100%;
width: 300px;
background-color:#feefdc;
}


#pied {
height: 30px;
background-color: #99CC99;
}

.menuhaut {
list-style-type: none;
margin: 0;
padding:0;
}
.menuhaut li {
display: inline;
}
.menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menuhaut a:hover {
text-decoration: none;
}
.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}

htest{
margin: 0 2px;
color: #990000;
text-decoration: bold underline;
}


.menugauche a:hover {
text-decoration: none;
}
.menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
.menudroit li {
margin-bottom: 5px;
}
.menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menudroit a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}



/*Menu*/
ul#menu
{
	height: 50px ;
	margin: 0 ;
	padding: 0 ;
	background: url(../images/menu_bg.jpg) repeat-x 0 -50px ;
	list-style-type: none ;
}
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */
ul#menu li
{
	float: left ;
	text-align: center ;
}/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */

ul#menu li a
{
	/*width: 200px ;     */
	line-height: 50px ;
	font-size: 0.8em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	color: #c34007 ;
	display: block ;
	padding-right: 10px ;
	padding-left: 10px ;
	text-decoration: none ;
	/*border-right: 2px solid #dea ;*/
}/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */

ul#menu li a:hover
{
	background: url(../images/menu_bg.jpg) repeat-x 0 0 ;
	font-weight: bold ;
}/* Et pour finir on décale l'image de fond au passage de la souris pour laisser aparaître l'état survolé de l'image, voir le tutoriel sur les roll over pour plus de détails */







/***************************
   THUMBS
****************************/

.thumbnail{
position: relative;
z-index: 0;
text-decoration: none ;
font-family: arial;

font-size: 0.8em;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
text-decoration: none ;
font-family: arial;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #FFFFFF;
padding: 5px;
left: -2000px;
border: 1px groove gray;
visibility: hidden;
color: black;
text-decoration: none;
font-family: arial;

}

.thumbnail span img{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 0; /*position where enlarged image should offset horizontally */
z-index: 50;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
text-decoration: none ;
top: -120;
left: 0; /*position where enlarged image should offset horizontally */
     
}

#cadre img {
  border: 1px solid #9A6930;
  background-color:#FEEFDC;
  /*background-image: url('../images/bgalbum.jpg'); */
  padding:10px;
}



#cadre { /* taille du cadre, à titre d'exemple */
width: 250px;
background-color: #feefdc/*DEBC7F*/;
text-align:center;
border: 1px solid #9A6930;

}
/* propriétés communes à l'ensemble des 4 coins */
#hautgauche, #hautdroit, #basgauche, #basdroit {
height: 19px; width: 19px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}
/* propriétés spécifiques à chaque coin */
#hautgauche {
background: url(../images/hautgauche.jpg);
}
#hautdroit {
float: right;
background: url(../images/hautdroit.jpg);
}
#basgauche {
background: url(../images/basgauche.jpg);
}
#basdroit {
float: right;
background: url(../images/basdroit.jpg);
}
/*****************************
           IMAGES
******************************/
droitePhotos.thumb{
        text-align:center;
	margin: 10px;
	border: 1px solid #A0ACC0;
	/*width: 200px;*/
        /*background-color: #FEF2F2;*/

	}
div.thumb
         {
        text-align:center;
	margin: 10px;
	border: 1px solid #A0ACC0;

        /*background-color: #FEF2F2;*/
        display:block;
	}

.thumb img{
        text-align:center;
	display: inline;
	margin: 10px;
	border: 1px solid #000000;
        padding: 10px;
        background-color: #ffffff;
	}
.thumb a:hover img {border: 1px solid #A0ACC0;}

.photocattitle {text-align: center; font-weight: bold;}
.phototitle {
  text-align:center;
  font-size: 1em;
  text-align: center;
  font-weight: normal;
  /*width: 120px;*/
  margin: 10px ;
  }

#galerie{
background-color:#F6F5F0;

border:1px solid #778;
margin-bottom:5px;
padding:2.5%;

}




#imageContainer {
	position:relative;
	margin:auto;
	width:500px;
	border:1px solid #000;
}

/* styles unrelated to the application follow */
h1 {
	position:relative;
	font:1em verdana;
}

.copy {
	width:500px;
	margin:auto;
	position:relative;
	font:0.7em verdana;
}

#so_credits {
	position:relative;
	margin:25px auto 0px auto;
	width:350px; 
	font:0.7em;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	height:90px;
	padding-top:4px;
}

#so_credits img {
	float:left;
	margin:5px 10px 5px 0px;
	border:1px solid #000000;
	width:80px;
	height:79px;
}



#imageContainer img {
	display:none;
	position:absolute;
	top:0; left:0;
}


.imgGalerie{
  height:150px;
  width:150px;
  border: 4px double #000/*#9A6930*/;
  padding:auto;
  background-image: url('../images/cadre.jpg');
  /*vertical-align: middle;
  line-height:150px;*/
  float:left;
  margin-right:20px;
  margin-top:20px;

}

.imgGalerie img{
  /*max-*/height:80px;
  /*max-width:100px;*/
  background-color:#FFF;
  text-align:center;
  display: inline;
  margin: 10px;
  border: 1px solid #000000;
  padding: 10px;


}

.blocPhotos{
        text-align:center;
	margin-top: 40px;
        width:100%;
	border: 0px solid;
        display:block;
}

.photoGrande{
        text-align:center;
	margin: 10px;
	border: 1px solid #A0ACC0;
        margin-top:50px;
        padding:50px;
        /*background-color: #FEF2F2;*/
	}


/* Fading Tooltips*/
 div#toolTip { position:absolute;z-index:1000;max-width:500px;background:#FCE2C4;border:2px double #A70302;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px; }
 div#toolTip img {border:1px double #000;}
 div#toolTip p { margin:0;padding:0;color:#000;font:11px/12px verdana,arial,sans-serif; }
 div#toolTip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }
 div#toolTip p em span { font-weight:bold;color:#fff; }

.menuAdmin{
           text-align:center;
}

.menuAdmin img{
           border:0;
}


.menuAdmin table{
    border-style:solid;
    border-width:1px; 
    border-color:#662F11;
}

.menuAdmin td{
border-style:solid; 
border-width:1px; 
border-color:#662F11;

}

.menuAdmin th{
border-style:solid; 
border-width:1px; 
border-color:#662F11;
background-color:#F7B26D;

}

.formulaireReservation img{
           border:0;
}

 label
{
width: 200px;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}

 input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351;
}

 textarea
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351;
}

.submit input
{
text-align:center;
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9;
}

 fieldset
{
border: 1px solid #781351;
width: 95%;
}

legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px;
}





.divTexteGaucheRiad{
        margin-left:280px;
}






#imageContainer {
        float:left;
	height:180px;
	width:240px;
	margin-right:10px;
	margin-left:10px;
	margin-top:0px;
	margin-bottom:10px;
}

#imageContainer img {
	display:none;
	position:absolute;
	top:0; left:0;
}

#imageContainer3 {
        margin:auto;
	height:95px;
	width:585px;

}

#imageContainer3 img {
	display:none;
	position:absolute;
        margin:auto;
}




#avion
{
margin-left: 0;
padding-left: 0;
list-style: none;
}

#avion li
{
padding-left: 30px;
padding-top: 8px;
background-image: url(../images/avion.gif);
background-repeat: no-repeat;
background-position: 0 .5em; 
margin-left:100px;
}

#avion a
{
color:black;
}

#avion ul { 

  list-style: none; }



#plan{

width : 437px;
height: 355px;
background: url(../images/moyenplan.jpg) no-repeat;
margin:auto;
}
#zone1 {
position: absolute;
width : 50px;
height: 50px;
left: 703px;
top: 324px;
border: 1px dotted white;
}
#zone1:hover {
width : 192px;
height: 128px;
left: 703px;
top: 324px;
border: 1px dotted white;
background: url(../images/AlQaria.jpg) top left no-repeat;
z-index: 100;
}

.auteur img{
border:0;
}

/**************TEST**************/

.today {
	float: left;
	width:74px;
	text-align: center;
	list-style-type: none;
	font-size:10px;
	margin:0px;
	padding:0px;
}
#date {
	padding-left:10px;
	margin-bottom:4px;
	margin-top:2px;
	text-align: left;
	font-size:10px;
}

#ville a{
	font-size:12px;
	color:#000000;
	font-weight:bold;
}

#enveloppe a{
	color:#000000;
	text-decoration:underline;
}
#enveloppe a:hover{
	text-decoration:none;
}
#ville a.meteo{
	color:#000000;
		font-size:9px;
}
#ville {
	text-align: center;

	margin: 0px;
	padding:2px 0px 0px 0px;
	
	
}
#icons li{
	list-style:none;
	list-style-image:none;
	margin:0;padding:0;
	text-align:center;

}
#icons ul{
	list-style:none;
	list-style-image:none;
	margin:0;padding:0;
	float:left;
	width:75px;
	margin-bottom:4px;
}
ul#info {
	margin:0;
	padding:0;

}
ul#info li{
	list-style:none;
	list-style-image:none;
	margin:0;padding:0;
	margin-bottom:2px;
	margin-top:2px;
	margin-left:8px;
	text-align:left;
	font-size:10px;
	float:none;
	
}
#lien1{
	padding-right:3px;
}
#bas {
	list-style-type: none;
	font-size: 11px;
	padding:5px 0px 0px 10px;
	margin:0px;
}
#lien-bas {
	font-weight: bold;
	text-align: right;
	font-size: 10px;
	padding: 0;
	margin:0;
	padding-right:5px;
	padding-bottom:5px;
		font-size:12px;
}
#enveloppe {
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	width: 152px!important;
		width:150px;
	border: 1px solid #000000;
	margin: 0px auto;
	background:url(http://www.meteo-marrakech.com/image/back.gif)  no-repeat bottom;
	background-color:#FFFFFF;
}
#milieu {
	border-top: 1px dashed #000000;
	border-bottom:1px dashed #000000;
	margin: 0px;
	padding-top:2px;
	padding-bottom:0px;
}

.clear{
	clear:both;
}

span.meteo{
	color:#FFFFFF;
}





 </style>