﻿body {
	margin: 0 auto; 
	background: #1A2131 url(../images/morocco-tile-bg.jpg) repeat top left;
	font-family: Georgia, Times, serif;
	font-size: 14px;
	line-height: 2em;
	color: #333;
	}

#main {
	margin: 0 20px; 
	width: 970px;
	color: #333;
	border: solid 1px #6C2B00;}

#header {
	margin: 0; padding: 0;
	}

ul#mainphoto  {border-top: solid 1px #243C52; padding: 0; margin: 0; border: none; list-style: none;}	
ul#mainphoto li {padding: 0; margin: 0; border: none; list-style: none;}	

img {border: none;}

.spacer {clear: both; font-size: .25em; line-height: 1px;}

.day {clear: both; padding: 20px 0 0 0;}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* ^^^^^^^^^^^MENU STYLES^^^^^^^^^^^^^ */
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
#menu-lang {
	margin: 0; padding: 0 10px 0 0;
	height: 20px;
	background: #6C2B00;
	color: #FFF2CC;
	text-align: right;
	width: 960px;
	font-size: 12px;
	font-weight: normal;
	line-height: 1em;
	
	}



#menu {
	margin: 0; padding: 0;
	height: 36px;
	background: #6C2B00;
	color: #FFF2CC;
	}

#menu div {height: 36px; text-align: center; float: left; padding: 3px 0 0 0;}

#menu div.home {background: transparent url(../images/menu-home.jpg) no-repeat top left;  width: 125px;}
#menu div.about {background: transparent url(../images/menu-about.jpg) no-repeat top left; width: 114px;}
#menu div.highatlas {background: transparent url(../images/menu-highatlas.jpg) no-repeat top left; width: 160px;}
#menu div.tours {background: transparent url(../images/menu-tours.jpg) no-repeat top left; width: 114px;}
#menu div.culture {background: transparent url(../images/menu-culture.jpg) no-repeat top left; width: 126px;}
#menu div.practicalities {background: transparent url(../images/menu-practicalities.jpg) no-repeat top left; width: 177px;}
#menu div.photos {background: transparent url(../images/menu-practicalities.jpg) no-repeat top left; width: 154px;}

#menu div.home-on {background: transparent url(../images/menu-on-home.jpg) no-repeat top left;  width: 125px;}
#menu div.about-on {background: transparent url(../images/menu-on-about.jpg) no-repeat top left; width: 114px;}
#menu div.highatlas-on {background: transparent url(../images/menu-on-highatlas.jpg) no-repeat top left; width: 160px;}
#menu div.tours-on {background: transparent url(../images/menu-on-tours.jpg) no-repeat top left; width: 114px;}
#menu div.culture-on {background: transparent url(../images/menu-on-culture.jpg) no-repeat top left; width: 126px;}
#menu div.practicalities-on {background: transparent url(../images/menu-on-practicalities.jpg) no-repeat top left; width: 177px;}
#menu div.photos-on {background: transparent url(../images/menu-on-practicalities.jpg) no-repeat top left; width: 154px;}
	
#menu div:hover.home {background: transparent url(../images/menu-on-home.jpg) no-repeat top left;}
#menu div:hover.about {background: transparent url(../images/menu-on-about.jpg) no-repeat top left;}
#menu div:hover.highatlas {background: transparent url(../images/menu-on-highatlas.jpg) no-repeat top left;}
#menu div:hover.tours {background: transparent url(../images/menu-on-tours.jpg) no-repeat top left;}
#menu div:hover.culture {background: transparent url(../images/menu-on-culture.jpg) no-repeat top left;}
#menu div:hover.practicalities {background: transparent url(../images/menu-on-practicalities.jpg) no-repeat top left;}
#menu div:hover.photos {background: transparent url(../images/menu-on-practicalities.jpg) no-repeat top left;}
	
	
#menu a:link {color: #FFF2CC; text-decoration: none; font-size: 20px; height: 36px; font-weight: normal; padding: 5px;}
#menu a:visited {color: #FFF2CC; text-decoration: none; font-size: 20px; height: 36px; font-weight: normal; padding: 5px;}
#menu a:hover {color: #FFF2CC; text-decoration: none; font-size: 20px; height: 36px; font-weight: normal; padding: 5px;}
#menu a:active {color: #FFF2CC; text-decoration: none; font-size: 20px; height: 36px; font-weight: normal; padding: 5px;}

ul#sidemenu {list-style: none; padding: 0; margin: 0;}

ul#sidemenu li { padding: 3px; border-bottom: solid 1px #CCB299;}
ul#sidemenu li a:link {text-decoration: none; padding: 5px;}
ul#sidemenu li:hover {background: #DABE99;}
ul#sidemenu li.on { padding: 3px; border-bottom: solid 1px #CCB299; background-color: #DABE99; }



/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* ^^^^^^^^^^^HEADER STYLES^^^^^^^^^^^^^ */
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

#header #logo img {
	margin: 0; padding:0px;}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* ^^^^^^^^^^^^^^^^^LINK STYLES^^^^^^^^^^^^^^^^ */
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

a:link {color: #996633; font-weight: normal;}
a:visited {color: #996633; font-weight: normal;}
a:hover {color: #996633; text-decoration: none; font-weight: normal;}
a:active {color: #996633; font-weight: normal;}

#menu-lang a:link {color: #FFF2CC; font-weight: normal; text-decoration: none;}
#menu-lang a:visited {color: #FFF2CC; font-weight: normal;text-decoration: none;}
#menu-lang a:hover {color: #FFF2CC; text-decoration: underline; font-weight: normal;}
#menu-lang:active {color: #FFF2CC; font-weight: normal;text-decoration: none;}


#footer a:link {color: #996633; text-decoration: underline;  font-weight: normal;}
#footer a:visited {color: #996633; text-decoration: underline; font-weight: normal;}
#footer a:hover {color: #996633; text-decoration: none; font-weight: normal;}
#footer a:active {color: #996633; text-decoration: none; font-weight: normal;}

a.moretour {display: block; width: 100%; text-align: right;}


/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* ^^^^^^^^^^^^^^^^^TEXT STYLES^^^^^^^^^^^^^^^^ */
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

#text {
	margin: 0px; padding: 0;
	background: #DBBE98 url(../images/text-bg.jpg) no-repeat top left;
	border-top: solid 1px #6C2B00;}
	
#footer {
	color: #996633;
	margin: 0; padding: 10px;
	font-size: 10px;
	}
	

p {margin: 0; padding: 0 0 1.5em 0;}

.hottip  {background: #DABE99; color: #663300; padding: 10px; border: solid 1px #663300; width: 160px; float: right; margin: 0 0 10px 10px;  }

.hottip-wide  {background: #DABE99; color: #663300; padding: 10px; border: solid 1px #663300; width: 260px; float: right; margin: 0 0 10px 10px;  }

.priceinfo  {text-align: right; color: #243C52;  padding: 0px 10px 10px 10px; border-top: dotted 1px #663300; margin: 10px 0;  }

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* ^^^^^^^^^^^LEFTCOLUMN STYLES^^^^^^^^^^^^^ */
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */


#leftcol {
	margin: 0px;  padding: 30px 20px;
	width: 580px;
	background: #EBD8C0 url(../images/large-left-text-bg.jpg) no-repeat top left;
	position: relative;
   left:10px;
   top: 10px;
	
	}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* ^^^^^^^^^^^RIGHTCOLUMN STYLES^^^^^^^^^^^^^ */
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

#rightcol {
	margin: 0px; padding: 30px 10px;
	width: 290px;
	position: absolute;
   left:660px;
   top: 465px;
	background: #EBD8C0 url(../images/small-right-text-bg.jpg) no-repeat top left;
	}

#rightcol p, #rightcol2 p {
	padding: 1em 20px;
	
	}
#rightcol2 {
	margin: 30px 0px 0 0; padding: 10px 0;
	border-top: solid 1px #CCB299; }



/* ^^^^^^^^^^^^^^^^^IMAGES^^^^^^^^^^^^^^^^ */


.leftphoto {
	float: left;
	padding: 0 10px 10px 0;
	margin: 0;
	font-size: 10px;
	font-style: itallic;}

.rightphoto {
	float: right;
	padding: 0 0px 10px 10px;
	margin: 0;
	font-size: 10px;
	font-style: itallic;}



/* ^^^^^^^^^^^^^^^^^HEADLINES^^^^^^^^^^^^^^^^ */

h1 {color: #663300; font-weight: normal; font-size: 24px; padding: 0 0 10px 0; margin: 0;}
h2 {color: #243C52; font-weight: normal; font-size: 20px; padding: 0; margin: 0;}

























