/*******************************************
	CSS global hassan-aventure
********************************************/

* {
outline:none; }

body { /* redéfini les propriétés de toute la page */
	overflow: auto ; 
	margin:0px 0% 20px 176px;
	padding:0; /* marge intérieur à 0 pixels */
	font-family: Verdana,Helvetica,Arial,sans-serif;
	background-image: url("../images/fond_page.png"); 
	background-repeat: repeat;}
	
body.temoignages {
	overflow: auto ; 
	margin:auto;
	width:95%;
	max-width:1024px;
	padding-left:20px;
	padding-right:20px;
	text-align:left;
	font-family: Georgia,Helvetica,Arial,sans-serif;
	background-image: url("../images/fond_menu.png"); 
	background-repeat: repeat;}

a {
	color:#6b0c0c;
	font-weight: bold;
	text-decoration:none;}

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

a img {
	border: none;}

.ligne {
	clear:both;
	width:70%;
	height:10px;
	background-image: url("../images/ligne.png");
	background-repeat: repeat;
	margin:auto; }

ul.vert {
	line-height:1.5em;
	list-style-image:url("../images/puceV.png");}
ul.red {
	line-height:1.5em;
	list-style-image:url("../images/puceR.png");}

ul.red_accueil {
	font-family:Verdana,Helvetica,Arial,sans-serif;
	font-size:.8em;
	list-style-image:url("../images/puceV.png");
	font-weight:bold;
	line-height:1.8em;
	color:#c00000;
	width:780px;
	margin:auto;
	text-align:left;}

.center {
	text-align:center;
	font-weight:bold;}

.center_fin {
	text-align:center;}

.etoile {
	text-align:left;
	margin-left:20px;
	color:red;
	font-weight: bold;
	font-size:1.3em; }

/*******************************************
	CSS retour page précédente et accueil
********************************************/
.retour {
	padding:10px;
	width:500px;
	margin:auto;
	margin-bottom:8px;}

.retour_page {
	float:left;
	border: 2px solid #c00000;
	padding:2px 20px 2px 20px;
	background-color: silver;}

.retour_accueil {
	float:right;
	border: 2px solid #c00000;
	padding:2px 20px 2px 20px;
	background-color: silver;}

/*******************************************
	CSS en tête et bannière
********************************************/
.en_tete { /* block fixe en haut de l'écran */
	position: fixed ; /* position du menu = par rapport à la boite parent (ici le body) */
	top: 0 ; /* Le haut du menu est à 0 pixels du haut de l'écran */ 
	left: 0 ; /* La gauche du menu est à 0 pixels du bas de l'écran */ 
	height:108px;
	width: 100% ;
	z-index:100;} 

div#banniere1 {
	position:absolute; /* La première partie sera à gauche*/
	left:0px;
	width:720px; /* On définit la largeur de l'image */
	height: 100px; /* On définit la hauteur de l'image */
	background-image: url("../images/banniereG.png");
	background-repeat: no-repeat;
	margin-right: -5px;	/*Pour que la partie 1 se colle à la 2.*/
	border-top: 4px solid #003333;
	border-bottom: 4px solid #003333;
	border-left: 4px solid #003333;}

div#banniere3 {
	position:absolute; /* La dernière partie est à droite */
	right:0px;
	width:180px;
	height: 100px;
	background-image: url("../images/banniereD.png");
	background-repeat: no-repeat;
	margin-bottom: 0px;
	margin-left : -5px; /*Pour que la partie 3 se colle à la 2.*/
	border-top: 4px solid #003333;
	border-bottom: 4px solid #003333;
	border-right: 4px solid #003333;}

div#banniere2 {
	width:auto; /* Se répétera sur la place qu'on lui donne. */
	height: 100px;
	background-image: url("../images/banniereC.png");
	background-repeat: repeat; /* Un repeat  suffit, puisque l'on définit la hauteur, un repeat-x n'est pas la nécessaire*/
	margin-bottom: 20px;
	border-top: 4px solid #003333;
	border-bottom: 4px solid #003333;}

#banniere {
	position:absolute;
	padding-top:0px;
	margin-left:260px;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-size:2.5em;
	line-height:1em;
	font-weight: bold;
	color: #ffffff;}

.description {
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-size:.55em;
	font-weight: bold;
	color:#ffffff; }

/*****************************************************************
	EN-TÊTE CARTES
 *****************************************************************/
#header { /* block fixe en haut de l'écran */ /* OK*/
	position: fixed ; /* position du header = par rapport à la boite parent (ici le body) */
	top: 0 ; /* Le haut du header est à 0 pixels du haut de l'écran */ 
	left: 0 ;/* La gauche du header est à 0 pixels de la gauche de l'écran */ 
	margin-bottom:0;
	width: 100% ; /* largeur du header */
	height:34px;/* hauteur du header */
	z-index:100;}

/*******************************************
	CSS Menu
********************************************/
#menu { /* block fixe à gauche de l'écran */
	position: fixed;
	top: 108px; /* Le haut du menu est à 108 pixels du haut de l'écran (pour ne pas recouvrir la zone du haut) */ 
	left: 0;
	width: 174px; /* largeur du menu */
	height: 100%; /* hauteur du menu (toute la page) */
	border-right: 2px solid #c00000;
	background-image: url("../images/fond_menu.png"); 
	background-repeat: repeat; }

#menu ul {
	padding:0px;
	margin:0px;
	margin-left:7px;
	width:160px;
	list-style-type:none; }

#menu ul li {
	width:auto;
	height:30px; }

#menu ul li:hover ul li {
	width:auto;
	height:25px; }

#menu ul li ul {
	display:none; }

#menu ul li:hover ul {
	display:block;
	position:relative;
	margin-left:0px;
	left:160px;
	top:-35px; }

#menu ul li a {
	display:block;
	width:160px;
	height:25px;
	background:url('../images/menu.png') no-repeat;
	text-decoration:none;
	color:#ffffff;
	font-weight:bold;
	font-family:Verdana;
	font-size:80%;
	margin-top:5px;
	padding-top:5px;
	text-align:center; }

#menu ul li.extend a {
	background:url('../images/menu_fleche.png') no-repeat; }
	
html > body #menu ul li.extend:hover {
	overflow:visible; }

#menu ul li.extend:hover {
	width:160px;
	height:30px;
	overflow:hidden; }

#menu ul li:hover a {
	background:url('../images/menu.png') -160px 0 no-repeat;
	color:#FFCD1C; }

#menu ul li.extend:hover a {
	background:url('../images/menu_fleche.png') -160px 0 no-repeat; }

#menu ul li.extend:hover ul li a {
	background:url('../images/menu_extend.png') no-repeat;
	color:#000000; }

#menu ul li.extend:hover ul li:hover a {
	background:url('../images/menu_extend.png') -160px 0 no-repeat;
	color:#c00000; }

/*****************************************************************
	MENU HORIZONTAL
 *****************************************************************/
#menu_horiz { /* block menu fixe sous la bannière */
	position: absolute ; /* position du menu = par rapport à la boite parent (ici la boite) */
	top: 108px ; /* Le haut du menu est à 108 pixels du haut de l'écran */ 
	margin-left: 176px; /* La gauche du menu est à 176 pixels de la gauche de l'écran */
	padding-left: 26px;
	width:99%;
	height:34px;
	padding-top:2px;
	background-image: url("../images/fond_page.png"); }

#menu_horiz ul {
	float: left;
	margin-top: 0px;
	margin-left: 5px;
	margin-bottom: 0px;
	margin-right: 0px;
	padding: 0px;
	line-height: 30px ;
	height: 30px;
	font-size: 80%;
	text-align: center;
	list-style: none;}

#menu_horiz ul li {
	float: left;
	width: 160px;
	margin-right: 5px;}

#menu_horiz ul li a {
	float: left;
	width: 160px;
	margin-right: 5px;
	text-decoration: none;
	color: #ffcd1c;
	background-image: url(../images/menu_cartes.png);
	background-position: 0 -30px;
	background-repeat: no-repeat;}

#menu_horiz ul li a:hover {
	color: #ffffff;
	background-position: 0 0 ;}

#menu_horiz ul li a:focus {
	color: #ffffff;
	background-position: 0 0;} 

/*******************************************
	CSS Pied de page
********************************************/
.pied_de_page { /* block fixe en bas de l'écran */
	position: fixed ; /* position du pied de page = par rapport à la boite parent (ici le body) */
	bottom:0 ; /* Le bas du pied de page est à 0 pixels du bas de l'écran */ 
	left: 174px ; /* La gauche du pied de page est à 0 pixels du bas de l'écran */ 
	width: 90% ; /* largeur du pied de page = 99.5% de l'écran */
	height: 2.4em ; /* hauteur du pied de page */
	color:#c00000;
	background-image: url("../images/fond_menu.png"); 
	background-repeat: repeat;
	border-top: 2px solid #c00000;
	padding-bottom:0px;
	text-align:center;
	font-size: 80%;
	z-index:100;}

#copyright {
	margin-top:8px;
	text-align:center;}

#logo_html {
	float:left;
	margin-top:0px;
	margin-left:108px;
	padding:0;}

#logo_css {
	float:right;
	margin-top:0px;
	margin-right:130px;
	padding:0;}

/*******************************************
	CSS Content et boite
********************************************/
.content { /* boite prenant toute la page sauf le menu */
	height: 100%; /* la hauteur de la boite occupe 100% de l'écran */
	margin-left:20px; }

.boite {
	width:98% ;
	padding-top:110px;
	max-width:1280px;
	height:100%;
	line-height:1.4em;
	font-size:1em;}/* boite servant à faire défiler l'écran, en débordant de la page */

.boite h1 {
	color:#008000;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	text-align:center;
	text-transform:uppercase;}

.temoignages h2 {
	color:#008000;
	font-family: Georgia,Helvetica,Arial,sans-serif;
	text-align:center;}
	

.boite h2 {
	font-size:1.8em;
	color:#008000;
	text-align:center;}

#proverbe_accueil {
	text-align:center;
	font-family:Georgia;
	font-size:1.8em;
	line-height:1.2em;
	font-style:italic;
	font-weight:bold;
	color:#c00000;}

.accueil {
	font-family:Georgia;
	font-size:1.6em;
	font-weight:bold;
	color:#008000;
	text-align:center;}

.boite h3 {
	font-size:1em;
	margin-left:20px;
	padding-left:5px;
	padding-right:50px;
	padding-top:5px;
	padding-bottom:5px;
	display:inline;
	color:#ffffff;
	border-left:4px solid #490000;
	border-bottom:2px solid #490000;
	background-image:url("../images/titre1.png");}

.boite h4 { /******* à vérifier *********/
	text-indent:20px;}

.boite h5 { /******* à vérifier *********/
	text-indent:40px;
	font-size:92%;}

.travaux { /******* à vérifier *********/
	text-indent:30px;
	color:#c00000;
	text-decoration:underline;
	margin-bottom:0px;}

/*******************************************
	CSS  PLAN DE MARRAKECH & ESSAOUIRA
********************************************/

#marrakech {
	position:relative;
	margin:auto;
	width:680px;
	height:512px;
	z-index:10;}

.zone1 a {
	position:absolute;
	width:337px;
	height:254px;
	top: 2px;
	margin-left: 3px;
	background: url(../images/cartes/zoneG.png) 337px 0 no-repeat;}

.zone1:hover a {
	background: url(../images/cartes/zoneG.png) no-repeat;
	z-index:20;}

.zone2 a {
	position:absolute;
	width:337px;
	height:254px;
	top: 2px;
	margin-left: 340px;
	background: url(../images/cartes/zoneD.png) no-repeat;}

.zone2:hover a {
	background: url(../images/cartes/zoneD.png) -337px no-repeat;
	z-index:20;}

.zone3 a {
	position:absolute;
	width:337px;
	height:254px;
	top: 256px;
	margin-left: 3px;
	background: url(../images/cartes/zoneG.png) 337px 0 no-repeat;}

.zone3:hover a {
	background: url(../images/cartes/zoneG.png) no-repeat;
	z-index:20;}

.zone4 a {
	position:absolute;
	width:337px;
	height:254px;
	top: 256px;
	margin-left: 340px;
	background: url(../images/cartes/zoneD.png) no-repeat;}

.zone4:hover a {
	background: url(../images/cartes/zoneD.png) -337px 0 no-repeat;
	z-index:20;}

.zone5 a {
	position:absolute;
	top: 160px;
	width:77px;
	height:83px;
	margin-left: 425px;
	background: url(../images/cartes/zone1.png) no-repeat;
	z-index:30;}

.zone5:hover a {
	background: url(../images/cartes/zone1.png) -77px 0 no-repeat;
	z-index:30;}

.zone6 a {
	position:absolute;
	width:250px;
	height:190px;
	top: 120px;
	margin-left: 210px;
	background: url(../images/cartes/zone2.png) no-repeat;
	z-index:10;}

.zone6:hover a {
	background: url(../images/cartes/zone2.png) -250px 0 no-repeat;
	z-index:20;}

/*****************************************************************
* CSS TABLEAU LEXIQUE 
*****************************************************************/
table {/*********************************************/
	margin:auto;
	width:95%;
	border-collapse:collapse;
	border:4px solid #ee8012;}

col.un {
	width:18%;}

col.deux {
	width:32%;}

th {
	background-color:#ff866a;
	border:2px solid #c00000;
	font-size:.9em;}

.titre th {
	background-color:#c00000;
	border-left:4px;
	border-right:4px;
	border-style:solid;
	border-color:#ee8012;
	height:2.5em;
	vertical-align:middle;
	font-size:.9em;
	color:white;}

.impair th {
	background-color:#c00000;
	border-left:4px;
	border-right:4px;
	border-style:solid;
	border-color:#ee8012;
	height:2.5em;
	font-size:1em;
	color:white;}

td.gras {
	font-weight:bold;}

.pair td, .impair td {
	padding:1px 5px;
	border-left:2px;
	border-right:2px;
	border-top:1px;
	border-bottom:1px;
	border-style:solid;
	border-color:#008000;
	font-size:.8em;}

.pair td {
	background-color:#bdf7b3;}

.impair td {
	background-color:#e1f0dd;}

/*****************************************************************
* IMAGES ET CARTES
*****************************************************************/
.fleches_bas {
	text-align:center;
	margin:20px;}

.image {
	text-align:center;}

.img_accueil {
	margin-bottom:30px;}

.cartes {
	width:702px;
	margin:auto;}

.cartes img {
	border:2px solid #c00000;}

.legende_img {
	text-align:center;
	color:red;
	font-weight:bold;
	font-style:italic;
	font-size:0.9em;}

.legende_photo {
	text-align:center;
	color:green;
	font-weight:bold;
	font-style:italic;
	font-size:0.8em;}

.img_align p, .img_align2 p, .img_align3 p  {
	text-align:center;
	color:green;
	font-weight:bold;
	font-style:italic;
	font-size:0.8em;}

.container {/*2 images de 267px de largeur marge 16px*/
	width:598px;
	margin:auto;}

.container2 {/*2 images de 300px de largeur marge 16px*/
	width:664px;
	margin:auto;}

.container3 {/*3 images - 2 de 267px et 1 de 200px de largeur marge 10px*/
	width:794px;
	margin:auto;}

.container4 {/*1 image de 267px et 1 image de 400px de largeur marge 16px*/
	width:731px;
	margin:auto;}

.container5 {/*1 image de 267px et 2 images de 200px de largeur marge 16px*/
	width:763px;
	margin:auto;}

.img_align {
	float:left;
	margin-left:16px;
	margin-right:16px;}

.img_align2 {
	float:left;
	margin-left:40px;
	margin-right:40px;}

.img_align3 {
	float:left;
	margin-left:5px;
	margin-right:5px;}

.clear {
	display:block;
	clear:both;}

.fleche_left {
	float:left;
	margin-left:50px;
	margin-top:10px;}

.fleche_right {
	float:right;
	margin-right:50px;
	margin-top:10px;}

.legende_photoL {
	text-align:center;
	color:green;
	font-weight:bold;
	font-style:italic;
	font-size:0.8em;}

.legende_photoR {
	text-align:center;
	color:green;
	font-weight:bold;
	font-style:italic;
	font-size:0.8em;}

.langage {
	text-align:center;
	padding-top:30px;}

.souligne {
	font-weight:bold;
	color:#000000;
	text-decoration:underline;}

.rouge {
	font-weight:bold;
	color:red; }

.rouge_fort {
	font-size:1.8em;
	font-weight:bold;
	color:red;
	text-align:center;
	text-decoration:underline;}

.rouge_italic {
	font-style:italic;
	font-weight:bold;
	color:red;}

.rouge_souligne {
	font-style:italic;
	font-weight:bold;
	color:red;
	text-decoration:underline;}

.bleu {
	font-weight:bold;
	color:#008000;}

.bleu_fin {
	color:#008000;}

.bleu_italic_normal {
	font-weight:bold;
	color:#008000;
	font-style:italic; }

.bleu_italic {
	font-weight:bold;
	color:#008000;
	font-style:italic;
	text-decoration:underline; }

.bleu_souligne {
	font-weight:bold;
	color:#008000;
	text-decoration:underline; }

.bleu_fort {
	font-weight:bold;
	font-size:1.1em;
	color:#008000;
	font-style:italic;
	text-decoration:underline; }

.green {
	font-weight:bold;
	color:green;}

.citation {
	font-size:.9em;
	font-style:italic;
	text-indent:30px;
	font-weight:bold;
	color:green;}

.fondjaune {
	background-color:yellow;}

.fondvert {
	background-color:#008000;
	color:#deaf2c;}
	
.optimise {
	text-align:center;
	font-style:italic;
	font-weight:bold;
	color:green;}

.devise {
	font-family: Verdana,Helvetica,Arial,sans-serif;
	text-align:center;
	font-size:1em;
	font-weight:bold;
	color:#c00000;
	font-weight:bold;}

.italic {
	font-style:italic;
	font-size:1em;}

/*****************************************************************
* CSS compteur *
*****************************************************************/
.compteur {
	background-color:#c00000;
	text-align:center;
	line-height:30px;
	border:2px solid #000000;
	font-size:0.9em;
	font-weight:bold;
	color:#ffffff;
	width:60%;
	margin:auto; }

.nb {
	font-size:1.4em; }

/*****************************************************************
	CSS Livre d'or  Contact et Newsletter
*****************************************************************/
#message {
	border:2px solid #c00000;
	padding:5px;
	width:auto;
	background-color:#f0e68c;}

.pages {
	margin-bottom:55px;}

#presentation_livreor p, #presentation_livreor {
	text-align:center;
	font-weight:bold;
	color:#c00000;}

#presentation_livreor a {
	font-size:1.1em;
	font-weight:bold;
	background-color:#f0e68c;
	padding:2px 5px;
	border:2px solid #c00000;}

.border_msg {
	font-size:.9em;
	border:1px solid #c00000;
	padding:4px 5px 10px 5px;
	margin:3px 0 6px 0;
	background-color:#e1f0dd;}

.texte {
	font-size:.8em;}

#formulaire_livreor, #ntux3_reg, #ntux3_unreg {
	border:1px solid #c00000;
	background-color:#f0e68c;
	width:65%;
	margin:auto;
	padding:10px 5px 5px 5px;
	text-align:center;}

label {
	color:#c00000;
	text-align:center;}

.fieldset {
	border:2px solid #c00000;
	margin-bottom:10px;
	padding:10px 0px;
	text-align:center;
	vertical-align: middle;
	background-color:#e1f0dd;}

#ntux3_reg fieldset,  #ntux3_unreg fieldset{
	border:2px solid #c00000;
	margin-bottom:5px;
	padding:5px 0px;
	text-align:center;
	vertical-align: middle;
	background-color:#e1f0dd;}

#ntux3_reg fieldset ul {
	margin:0;}

.compulsorylegend {
	color:#c00000;
	font-weight:bold;
	padding-left:10%;}

.formbody {
	color:#008000;}

.formbody legend{
	margin-left:30px;
	padding:5px 8px 0;}

.form {
	text-align:center;}

#website {
	display:none;}

.input {
	border:1px solid #c00000;
	width:160px;}

#ntux3_reg input, #ntux3_unreg input {
	border:1px solid #c00000;
	margin-left:10px;}

.textarea {
	border:1px solid #c00000;
	width:98%;
	margin-top:5px;
	height:150px;}

input[type=submit] {
	background:url('../images/selection.png') repeat-x 0px -22px;
	font-size:.9em;
	color:red;
	font-weight:bold;
	font-style:italic;
	padding:0px 5px;
	border-style:outset;
	border-width:2px;
	border-color:#c00000;}

input[type=submit]:hover, input[type=submit]:focus {
	background-position:0px 0px; }

@media screen {
	input[type=submit]:hover, input[type=submit]:focus {
	cursor:pointer;}

h1#ancre {
	padding-top:108px;
	padding-bottom:10px;}

.urgent {
	font-size:20px;
	font-weight:bold;
	text-decoration:blink;
	color:#c00000;
	border: solid 2px #008000;
	padding:0px 10px;
	background-color:#f0e68c;}

.lettre {
	font-size: .9em;}

.ntux3_nok, .ntux3_ok {
	font-weight:bold;
	color:#c00000;
	text-align:center;}

.lettresite {
	width:736px;
	margin:auto;}