/* CSS Document */

body {
	background-color: #FCCC52;
	background-attachment:fixed; 
	background-image:url(image/Fonds/fond_jaune.jpg);
	text-align:center;
	
}

a{text-decoration:none;font-family:"Monotype Corsiva"; font-size:20px;}


/*le conteneur total pour le positionnement des autres elements*/
div.parent{
	position:relative;
	text-align:left;
	margin:0 auto;
	width:682px;
	display:block;
}

/*texte en dessous et au dessus de l´image*/
div.texte {
	display:block;
	/*width:682px;/*pour avoir la même largeur que l´image*/
	color: #FFFFCC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8px;
	position:absolute;
	/*left: 163px;*/
}

div.texte a {
	color: #FFFFCC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8px;
}	

/*positionnement du texte en haut de l ecran*/
div#textehaut{
	top:6px;
	height:20px;
	text-align:center;
}

/*le conteneur du menu et du diaporama*/
div#conteneur{
	background-image:url(image/Fonds/fond.gif);
	width:682px;
	height:385px;
	z-index:3;/*un z index medium pour que les textes soient au dessus*/
	position:absolute;
	top:32px;
	background-repeat:no-repeat;
}

/*le conteneur du menu et du diaporama*/
div#conteneurexcu{
	background-image:url(image/Fonds/fond_3.gif);
	width:682px;
	height:385px;
	z-index:3;/*un z index medium pour que les textes soient au dessus*/
	position:absolute;
	top:32px;
	background-repeat:no-repeat;
}
/*le texte riad de charme marrakech au dessus des photos*/
div#charme{
	font-family:"Monotype Corsiva"; 
	font-size:12px;
	color: #663300;
	position:absolute;
	left:523px;
	top:31px;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	width:200px;/*pour eviter un retour a la ligne*/
}

/*le texte riad de charme marrakech au dessus des photos pour les pages textuelles en*/
div#charme_en{
	font-family:"Monotype Corsiva"; 
	font-size:12px;
	color: #663300;
	position:absolute;
	left:518px;
	top:30px;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	width:200px;/*pour eviter un retour a la ligne*/
}

/*le conteneur du diaporama*/
div#diapo{
	z-index:0;   /*un z index bas pour que les images soient au dessus de cet element*/
	position:absolute;
	left:145px!important;
	left:155px;
	top:48px;
	height:254px;
}

#situation_img{
	padding-left:10px!important;
	padding-left:0px;
}

/*les boutons de navigation dans le diaporama*/
div#conteneur_bouton{
	position:absolute;
	top:302px;
	left:555px;
	z-index:4;
	float:right;
}

div.btn{
	position:relative;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	background-image:url(image/Image/btnjaune.gif);
	width:10px;
	top:0px;
	right:11px;
	float:right;
	font-size:8px;
	text-align:center;
	cursor:pointer;
}

/*pour que le bouton 1 soit allume au debut du diaporama*/
div#btn1{
	background-image:url(image/Image/btnorange.gif);
}



/*les menus les donnees sont les memes pour les pages francaises et anglaises*/
/* le menu horizontale dans la bande sombre*/
div#menuH{
	top:315px;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	color:#333333;
	position:absolute;
	left:192px;
	width: 492px;/*pour eviter un retour a la ligne*/
	height: 25px;
}

/*les couleurs des ancres du menu d'en haut*/
div#menuH a{color:#333333;font-size:16px; font-weight:500}/*la couleur de base*/
div#menuH a:hover{color:#000000;}/*quand on passe sur les elements du menu*/


div#menuH a:actived { color: #fc7216;}
/* les menus dans la partie blanche cassee*/
div#bienvenue{
	position:absolute;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	left: 192px;
	top: 352px;
	width:220px/*pour eviter un retour a la ligne*/
}

div#excu1{
	position:absolute;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	left: 192px;
	top: 352px;
	width:220px/*pour eviter un retour a la ligne*/
}
div#chambres{
	position:absolute;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	left: 383px;
	top: 352px;
	width:150px;/*pour eviter un retour a la ligne*/
}

}
div#excu2{
	position:absolute;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	left: 340px;
	top: 352px;
	width:150px;/*pour eviter un retour a la ligne*/
}
div#restauration{
	position:absolute;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	left: 538px;
	top: 352px;
	width:140px;/*pour eviter un retour a la ligne*/
}
div#excu3{
	position:absolute;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	left: 538px;
	top: 352px;
	width:140px;/*pour eviter un retour a la ligne*/
}

div#chambres_en{/*pour les pages visites en*/
	position:absolute;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	left: 413px;
	top: 352px;
	width:150px;/*pour eviter un retour a la ligne*/
}
div#restauration_en{/*pour les pages visites en*/
	position:absolute;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	left: 578px;
	top: 352px;
	width:140px;/*pour eviter un retour a la ligne*/
}

div#salon{
	position:absolute;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	left: 192px;
	top: 373px;
	width:220px;/*pour eviter un retour a la ligne*/
}

div#detente{
	position:absolute;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	left: 383px;
	top: 373px;
	width:150px;/*pour eviter un retour a la ligne*/
}
div#situation{
	position:absolute;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	left: 538px;
	top: 373px;
	width:140px;/*pour eviter un retour a la ligne*/
}


/*on ajoute la couleur pour le menu centrale qui fait la difference entre actuel et non*/

a.actuel{color:#462417;}/*couleur de l element actuel*/
a.actuel:hover{color:#fc7216;}
a.actuel:actived{color:#fc7216;}


/*le positionnement de l'adresse au dessous du rectangle central*/
div#adresse{
	font-family:Arial, Helvetica, sans-serif;
	word-spacing:0.001em;
	font-weight:bold;
	font-size:12px;
	position:absolute;
	top:420px;
	text-align:center;
	width: 678px;
}

div#adresse a{
	font-family:Arial, Helvetica, sans-serif;
	word-spacing:0.001em;
	font-weight:bold;
	font-size:12px;
}
/*positionnement du texte en bas de l ecran*/
div#textebas{
	top:460px;
}



/*pour la page offres speciales*/
div#conteneur2{/*valables pour les pages offres, environs, partenaires et contact fr ou en */
	background-image:url(image/Fonds/fond2.png);/*le fond n est pas le meme que pour les autres pages*/
	width:682px;
	height:385px;
	z-index:3;
	position:absolute;
	top:-4px;
	background-repeat:no-repeat;
	left: -14px;
}

div#conteneur2 a{/*les ancres qui sont partenaires, fermer, page 1, page 2, envoyer, annuler*/
	text-decoration:underline;
	color:#61492d;
	display:block;	
}

div.offre_ancre{/*la position des boutons verticales de la page offre fr*/
	float:left;
	position:absolute;
	top:353px;
}	

div.offre_ancre_en{/*la position verticales des boutons de la page offre en*/
	float:left;
	position:absolute;
	top:345px;
}	

div#offre_part{/*la position horizontale du bouton partenaire fr ou en*/
	left:300px;
}

div#offre_fermer{/*la position horizontale du bouton fermer fr ou en*/
	left:440px;
	width:140px;
}		

div.titre_offre{/*l'apparence des titres sur la page offre fr ou en*/
	color:#8d5232;
	font-family:"Monotype Corsiva";
	font-weight:bold;
	z-index:4;
	left: 190px;
	position:relative;
	display:block;
	width:400px
}

span.soustitre_offre{/*l'apparence des sous-titres (les dates) sur la page offre fr ou en*/
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	z-index:4;
	color:#000000;
	font-weight:normal;
}

div.offre{/*l'apparence des textes explicatifs des offres fr ou en*/
	color:#000000;
	font-family:Verdana, sans-serif ;
	word-spacing:0.001em;/*pour resserer le texte*/
	font-size:9px;	
	position:relative;
	z-index:4;
	left: 205px;
	display:block;
	width:450px;
	font-weight:bolder;
}

div.offre2{/*l'apparence des textes explicatifs des offres fr ou en*/
	color:#000000;
	font-family:Verdana, sans-serif ;
	word-spacing:0.001em;/*pour resserer le texte*/
	font-size:9px;	
	position:relative;
	z-index:4;
	left: 205px;
	display:block;
	width:450px;
	font-weight:bolder;
}

/*le positionnement des differentes offres pour la page fr*/
div#lune{
	top: 25px;
}
div#lune_liste{
	top: 25px;
}

div#hiver{
	top: 28px;
	left:240px;
}
div#hiver_liste{
	top: 28px;
}

div#valentin{
	top: 33px;
	left:230px;
}

div#valentin_liste{
	top:33px;
}	

div#ete{
	top: 38px;
}

div#ete_liste{
	top:38px
}

/*le positionnement des differentes offres pour la page en*/
div#lune_en{
	top: 25px;
}
div#lune_liste_en{
	top: 25px;
}

div#hiver_en{
	top: 30px;
	left:240px;
}
div#hiver_liste_en{
	top: 30px;
}

div#valentin_en{
	top: 38px;
	left:220px
}

div#valentin_liste_en{
	top:38px;
}	

div#ete_en{
	top: 46px;
}

div#ete_liste_en{
	top:46px
}

/*pour la page situation*/
div#conteneur3{/*situation */
	background-image:url(image/pages-situation/plan1.jpg);/*le fond n est pas le meme que pour les autres pages*/
	width:682px;
	height:385px;
	z-index:3;
	position:absolute;
	top:-4px;
	background-repeat:no-repeat;
	left: -14px;
}

div#conteneur3 a{/*les ancres qui sont partenaires, fermer, page 1, page 2, envoyer, annuler*/
	text-decoration:underline;
	color:#61492d;
	display:block;	
}
div#offre_imprimer{/*la position horizontale du bouton imprimer fr ou en*/
	left:344px;
	width:80px;
}		





/*pour la page contact*/
div.contacts{/*le style des deux parties du texte permet de donner l'effet de deux colonnes pages fr et en*/
	z-index:4;
	position:relative;
	display:block;
	font-family:Arial, Helvetica, sans-serif ;
	font-size:10px;
	top: 15px;
	float:left;
}

div#tarifs{/*le bloc tarifs avec sa position verticale des pages fr et en*/
	width:180px;
	left: 180px;
	padding-right:10px;
	text-align:center;
	border-right:solid 1px #8d5232;/*pour la barre de separation*/
}

div#formulaire{/*le bloc formulaire avec sa position verticale des pages fr et en*/
	width:370px;
	left: 180px;
	padding:0px 10px;/*pour s eloigner des bords*/
}

span.contact_titre{/* les deux titres de la page, fr et en*/
	color:#8d5232;
	font-family:"Monotype Corsiva";
	font-weight:bold;
	font-size:16px;
	font-variant:normal;
}

hr.contacts{border:solid 1px #8d5232;}/*les lignes de separation horizontale de la partie tarifs*/

p#hautesaison{/*l encart de la haute saison fr*/
	position:relative;
	display:block; 
	border:solid 1px #8d5232 ; 
	padding:5px; 
	width:120px;
	left:15px;
}

div#hautesaison_en{/*l encart de la haute saison en*/
	position:relative;
	display:block; 
	border:solid 1px #8d5232 ; 
	padding:2px; 
	width:130px;
	left:12px;
	margin:10px 0px;
}

div.form{/*le positionnement de la partie formulaire*/
	display:block;
	float:left;
	text-align:left;
}

div#f_d{position:relative;left:20px}/*pour le placemant horizontale du formulaire*/

div#textearea{/*le placement verticale du textearea observations*/
	position:relative;
	top:2px;}


div.bouton{/*le positionnement verticale des boutons et leur apparence*/
	color:#8d5232;
	font-family:"Monotype Corsiva";
	font-weight:bold;
	font-size:17px;
	font-variant:normal;
	position:relative;
	float:left;
	top:5px;
	cursor:pointer;
}	
	
/*partenaires*/
div#conteneur2 h1{/*le titre de la page*/
	color:#8d5232;
	font-family:"Monotype Corsiva";
	font-weight:bold;
	z-index:4;
	left: 300px;
	position:relative;
	display:block;
	width:600px;

}

div.partenaires{/*le placement general de la page fr et en*/
	z-index:4;
	width:320px;
	position:absolute;
	display:block;
	font-family:Arial, Helvetica, sans-serif ;
	top: 60px;
	float:left;
	font-size:12px
}

div#essaouira{/*le placement horizontal de la partie sur sur essaouira fr et en*/
left:220px;
width:230px;
}

div#annuaire{/*le placement horizontal de la partie sur sur les annuaires fr et en*/
left:480px;
}

/*environs page1 fr et en idem*/
div#ourika{
	top: 25px;
	left:210px;
}

div#tinmel{
	top: 53px;
	left:237px;

}

div#tinmel_texte{
	top: 53px;
	left:247px;
	width:410px;
}

div#essa{
	top: 70px;
	left:190px;

}

div#essa_texte{
	top:70px;
	left:200px;
}


div#env_p1{/*fr*/
	top: 345px;
	left:245px;
	color:#fc7216;
}

div#env_p2{/*fr*/
	top: 345px;
	left:300px;
}

div#env_part{/*fr*/
	top: 345px;
	left:365px;

}

div#env_fermer{/*fr*/
	top: 345px;
	left:490px;
	width:110px;
}

div#env_p1_en{/*en*/
	top: 97px;
	left:245px;
	color:#fc7216;
}

div#env_p2_en{/*en*/
	top: 97px;
	left:255px;
}

div#env_part_en{/*en*/
	top: 97px;
	left:320px;

}

div#env_fermer_en{/*en*/
	top: 97px;
	left:360px;
	width:110px;
}

/*environs page2*/
div#asni{
	top: 30px;
	left:237px;

}

div#asni_texte{
	top: 30px;
	left:217px;
}

div#ouzoud{
	top: 30px;
	left:220px;

}

div#ouzoud_texte{
	top: 30px;
	left:220px;
}

div#lalla{/*lalla fr*/
	top: 10px;
	left:220px;

}

div#lalla_texte{/*lalla fr*/
	top: 10px;
	left:220px;
}

div#env_p12{/*bouton p1 fr*/
	top: 23px;
	left:245px;

}

div#env_p22{/*bouton p2 fr*/
	top: 23px;
	left:255px;
}

div#env_part2{/*bouton partenaires fr*/
	top: 23px;
	left:320px;

}

div#env_fermer2{/*bouton fermer fr*/
	top: 23px;
	left:360px;
	width:110px;
}


/*page index*/
div#conteneur_accueil{
	background-image:url(image/Fonds/index.jpg);
	width:682px;
	height:385px;
	z-index:3;/*un z index medium pour que les textes soient au dessus*/
	position:absolute;
	top:32px;
	background-repeat:no-repeat;
}
div#menu_index{
	position:absolute;
	top:330px;
	z-index:4;
	left: 100px;
	font-size:28px;
	width: 549px;/*pour eviter un retour a la ligne*/
	height: 22px;
	visibility: visible;
	
}	

a#francais{
	position:relative;
	left:90px;
	display:block;
	float:left;
	font-variant:small-caps;
	color:#990000;
	width:82px;
	height:22px;
	visibility: visible;
}

a#anglais{
	position:relative;
	left:235px;
	display:block;
	float:left;
	font-variant:small-caps;
	color:#990000;
	width:85px;
	height:22px;
	visibility: visible;
}

div#charme_index{
	font-family:"Monotype Corsiva";
	color: white;
	position:absolute;
	left:400px;
	top:35px;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	width:262px;/*pour eviter un retour a la ligne*/
	height: 23px;
}

div#bienvenue_index{
	font-family:"Monotype Corsiva";
	position:absolute;
	z-index:4;/*un z index haut pour etre au dessus de l'image de fond*/
	left: 240px;
	top: 355px;
	width:434px;/*pour eviter un retour a la ligne*/
	font-size:45px;
	color:#FFFFFF;
	height: 52px;
}