/* rouille menu haut : #d4884e */
/* crème : #fff4dd */
/* marron: #46270f */

@charset "utf-8";
html, body {padding: 0; margin:0; height: 100%; width: 100%; font-family: "Verdana", "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 90%; color: #4e3e23; }
* {padding:0; margin:0; border:0;}
body {background: #46270f url(../images/bkg-body-photo-2.jpg) no-repeat top center; }
img {border: none; }
h1 {margin-bottom: 20px; }
p {margin-bottom: 20px; }

/* contient la photo du background */
#main-frame {position: relative; margin-left: auto; margin-right: auto; width: 992px; margin-top: 38px; min-height: 723px; height: 723px; height: auto !important; }

/* contient le corps de la page */
#menu-top {position: relative; float: left; width: 941px; height: 20px; text-align: right; padding-right: 50px; }
#menu-top a {color: #d4884e; text-decoration: none; }
#menu-top a:hover {color: #4e3e23; }
#frame-top {position: relative; float: left; width: 991px; height: 52px; background: transparent url(../images/bkg-main-frame.png) no-repeat 0 0; }
#frame-bottom {position: relative; float: left; width: 991px; height: 52px; background: transparent url(../images/bkg-main-frame.png) no-repeat -1999px 0px; }
#frame-body {position: relative; float: left; width: 991px; height: 600px; height: auto !important; min-height: 600px; background: transparent url(../images/bkg-main-frame.png) repeat-y -999px 0; margin-bottom: 0px; }
#frame-foot {position: relative; float: left; width: 991px; height: auto; text-align: center; color: #fff4dd; margin-top: 20px; margin-bottom: 20px; }

#frame-body.koutoubia #bkg-photo {position: absolute; bottom: 30px; left: 12px; width: 968px; height: 400px; background: transparent url(../images/bkg-koutoubia-2.png) no-repeat right bottom; z-index: 0; }

/* header */
#logo {position: absolute; top: 5px; left: -20px;   top: -45px; }
#slogan {position: absolute; bottom: 5px; right: 50px; color: #fff; font-size: 1.2em; }

/* body */
#bandeau {position: absolute; top: 0; left: 12px; width: 968px; height: 151px; background: transparent url(../images/bandeau-photos3.jpg) no-repeat 0 0; overflow: hidden; z-index: 20; }
#corps {position: relative; float: left; margin-top: 155px; width: 968px; height: auto; margin-left: 12px; z-index: 2; padding-top: 10px; }
#colonne-gche {position: relative; float: left; width: 150px; height: auto; z-index: 2; }
#colonne-gche #menu-principal {position: relative; float: left; margin-top: 50px; width: 150px; }
#colonne-gche #menu-principal-top {position: relative; float: left; width: 136px; height: 20px; background: transparent url(../images/bkg-menu.png) no-repeat 0 0; }
#colonne-gche #menu-principal-bottom {position: relative; float: left; width: 136px; height: 20px; background: transparent url(../images/bkg-menu.png) no-repeat -300px 0 ; }
#colonne-gche #menu-principal-body {position: relative; float: left; width: 136px; height: auto; background: transparent url(../images/bkg-menu.png) repeat-y -150px 0; padding-top: 30px; padding-bottom: 30px; }
#colonne-gche #menu-principal-body ul {position: relative; float: left; list-style-position: inside; list-style: none; font-size: 0.9em; margin-left: 3px; }
#colonne-gche #menu-principal-body ul a {color: #fff4dd; text-decoration: none; }
#colonne-gche #menu-principal-body ul a:hover {color: #4e3e23; }
#colonne-gche #menu-principal-body ul li {position: relative; float: left; clear: left; width: 115px; border-bottom: dashed 1px #fff4dd; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; }

#logo-amhms {position: relative; float: left; clear: left; margin-left: 27px; margin-top: 40px; z-index: 1; }

#frame-contenu {position: relative; float: left; z-index: 4; width: 791px; height: auto; }

/* menu à onglets */
#frame-contenu-menu {position: relative; float: left; width: 786px; height: 33px; }
#menu-onglets {position: relative; float: left; z-index: 4; }
#menu-onglets ul {list-style: none; }
#menu-onglets ul li {position: relative; float: left; height: 34px; width: auto; line-height: 33px; border-right: solid 1px #fff4dd; padding-right: 10px; padding-left: 10px; background: transparent url(../images/bkg-menu-onglets.png) no-repeat 0 -80px; color: #46270f; }
#menu-onglets ul li a {color: #46270f; text-decoration: none; }
#menu-onglets ul li a:hover {color: #fff4dd; }
#menu-onglets ul li#first {padding-left: 98px; background-position: 0 -200px; }
#menu-onglets ul li#first.selected {background-position: 0 0; }
#menu-onglets ul li.selected {background-position: 0 -40px; }
#menu-onglets ul li.selected a {color: #fff4dd; }
#menu-onglets ul li#last {background: transparent url(../images/bkg-menu-onglets-last.png) no-repeat bottom right; border: none; padding-right: 16px; }
#menu-onglets ul li#last.selected {background-position: top right; }
#frame-contenu-onglets-right {overflow: hidden; height: 32px; z-index: 3; border-bottom: solid 1px #fff4dd; }

/* corps */
#frame-contenu-corps {position: relative; float: left; width: 785px; border: solid 1px #fff4dd; border-top: none; padding-top: 15px; }
#frame-contenu-corps-bkg {position: relative; float: left; width: 750px; padding: 20px; min-height: 400px; height: 400px; height: auto !important; /*background-color: #fff4dd;*/ background: transparent url(../images/bkg-main-contenu.jpg) no-repeat left bottom; }
#frame-contenu.index #frame-contenu-corps-bkg {background-image: none; }

#frame-contenu-corps h1 {font-weight: normal; font-size: 1.6em; }
#frame-contenu-corps h2 {font-weight: normal; /*color: #b96e3e;*/ color: #fff;  font-size: 1.2em; margin-bottom: 20px; }
#frame-contenu-corps ul {list-style-position: inside; list-style-type: square; margin-left: 20px; }
#frame-contenu-corps ul li {margin-bottom: 10px; }
#frame-contenu-corps em {color: #fff; font-style: normal; font-weight: bold; }

.album {position: relative; clear: left; width: 600px; margin-left: auto; margin-right: auto; height: 350px; margin-bottom: 30px; padding: 10px; border: solid 1px #4e3e23; }
#image-commentaire {position: absolute; bottom: 11px; right: 11px; z-index: 10; background-color: #fff4dd; color: #46270f; padding: 10px; padding-top: 3px; padding-bottom: 3px; font-size: 0.9em; }
.texte {position: relative; float: left; clear: left; }


/* corps de classe 'index' */
#frame-contenu.index {text-align: center; color: #fff4dd; margin-top: 50px; padding-right: 100px; padding-left: 100px; width: 591px; }
#frame-contenu.index h1 {color: #46270f; font-weight: normal; font-size: 1.3em; }
#frame-contenu.index h1 strong {font-weight: normal; font-size: 1.6em; }
#frame-contenu.index #frame-contenu-menu {display: none; }
#frame-contenu.index #frame-contenu-corps {width: 591px; border: none; padding: 0; }
#frame-contenu.index #frame-contenu-corps-bkg {width: 591px; background-color: transparent; padding: 0; }

/* corps de la classe 'sans-onglet' */
#frame-contenu.sans-onglet #frame-contenu-corps {padding-top: 0; }


/* page prestations */
p.tarif {width: 750px; text-align: center; margin-bottom: 20px; margin-top: 20px; font-size: 1.1em; }


/* page tarifs et conditions */
table.tarifs {position: relative; width: 700px; margin-left: auto; margin-right: auto; border: solid 1px #46270f; border-collapse: collapse; padding: 3px; margin-bottom: 20px; }
table.tarifs thead th, 
table.tarifs tbody th,
table.tarifs tbody td {text-align: center; padding: 6px; border: solid 1px #46270f; }
table.tarifs tbody td.euro,
table.tarifs tbody td.dirham {width: 84px; }

#promotion {position: relative; float: right; border: solid 2px #fff; padding: 7px; background-color: #e5b796; }
#promotion #titre {color: #fff !important; font-size: 1.2em !important;  }
#promotion p {margin: 0; padding: 0; }

/* page réservation */
#formulaire {position: relative; float: left; clear: left; }
#formulaire p {width: 721px; }
#formulaire form label {position: relative; float: left; width: 240px; text-align: right; margin-right: 10px; }
#formulaire form input {padding-top: 3px; padding-bottom: 3px; border: solid 1px #d4884e; }
#formulaire form select,
#formulaire form textarea {border: solid 1px #d4884e; }
#formulaire form input.submit {background-color: #d4884e; color: #fff4dd; cursor: pointer; padding: 4px; font-variant: small-caps; font-size: 1.2em; }
#formulaire form input.submit:hover {color: #46270f; }
#formulaire p.submit {text-align: right; }
div#erreur {position: relative; float: left; clear: left; text-align: center; color: #d4884e;; margin-bottom: 20px; width: 721px; }
label.error {color: #fff; font-style: italic; position: relative; float: left; clear: left; width: 721px !important; }


/* page activites */
#activites-menu {position: relative; float: left; clear: left; width: 750px; margin-bottom: 40px; }
#activites-menu ul {}
#activites-menu ul li {margin: 0; padding: 0; }
#activites-menu ul li span {cursor: pointer; text-decoration: underline; color: #fff; }
#activites-menu ul li span:hover {color: #46270f; }
#activites {position: relative; float: left; clear: left; width: 750px; }

/* page liens */
ul.liens p {margin: 0; padding: 0; }
ul.liens a {color: #46270f; text-decoration: underline; }
ul.liens a:hover {text-decoration: none; }
ul.liens a.url {font-size: 0.9em; color: #fff; }

/* page tripadvisor */
table.tripadvisor-pos td {vertical-align: top; padding-right: 20px; }

/* plugin datePicker */
table.jCalendar {border: 1px solid #555;	background-color: #fff4dd;border-collapse: separate;border-spacing: 2px;}
table.jCalendar th {background-color: #fff4dd;	color: #555;font-weight: bold;padding: 3px 5px;}
table.jCalendar td {background: #fff;color: #000;padding: 3px 5px;text-align: center;}
table.jCalendar td.other-month {background: #fff;color: #5c423e;}
table.jCalendar td.today {background-color: #d4884e; color: #fff;}
table.jCalendar td.selected {background: #f66;color: #fff;}
table.jCalendar td.selected:hover {background: #f33;color: #fff;}
table.jCalendar td:hover, table.jCalendar td.dp-hover {background: #fff;color: #000;}
table.jCalendar td.disabled, table.jCalendar td.disabled:hover {background: #eee;color: #888;}

/* For the popup */
/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */
div.dp-popup {position: relative;background: #fff;font-size: 10px;font-family: arial, sans-serif;padding: 2px;width: 171px;line-height: 1.2em;border: solid 1px #d4884e;;}
div#dp-popup {position: absolute;z-index: 199;}
div.dp-popup h2 {font-size: 12px;text-align: center;margin: 2px 0;	padding: 0;}
a#dp-close {font-size: 11px;padding: 4px 0;text-align: center;display: block;}
a#dp-close:hover {text-decoration: underline;}
div.dp-popup a {color: #000;text-decoration: none;padding: 3px 2px 0;}
div.dp-popup div.dp-nav-prev {position: absolute;top: 2px;left: 4px;width: 100px;}
div.dp-popup div.dp-nav-prev a {float: left;}
/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */
div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {cursor: pointer;}
div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {cursor: default;}
div.dp-popup div.dp-nav-next {position: absolute;top: 2px;right: 4px;width: 100px;}
div.dp-popup div.dp-nav-next a {float: right;}
div.dp-popup a.disabled {cursor: default;color: #aaa;}
div.dp-popup td {cursor: pointer;}
div.dp-popup td.disabled {	cursor: default;}
input.dp-applied {float: left;height: 1.1em;font-size: 0.7em;}

#credits {position: absolute; right: 0px; bottom: -30px; font-size: 0.9em; }
#credits a {color: #fff4dd; text-decoration: none; }
#credits a:hover {text-decoration: underline; }