/**
 * CSS Document by Christian Knochenhauer and Jeffrey Ouma.
 * Copyright© 2008 artkenya.net Ltd.
 * All rights reserved.
 * 
 * CSS file name: universal.js
 * Purpose: Defines the styles that are used by every page in the website.
 */

/**
 * LAYOUT DIVS
 * The styles position and size the main page
 * html, body and custom-doc (the main wrapper)
 */
html {
	background-color:#990000;
}

body {
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin:0;
}

#body-bg1 {
/* This style represents the series of lines alongside the top navigation.
 * Since the pattern of these lines may change for different pages, these other patterns 
 * may be represented by body-bg2, etc.
 * Dreamweaver allows the id attribute of the body tag to be changed using the "Template Properties" 
 * command in the "Modify" menu even though this tag is locked in the template
 */
	background:transparent url("../Images/body-bg1.jpg") repeat-x left top;
}

#custom-doc {
	/*
	 * The width of the wrapper is 986px to accomodate the shadow
	 * The actual width of the page is 946 as dictated by the size of the home page picture
	 */
	margin:0px auto;
	width:75.8461em; /* 986/13 */
	*width:73.9502em;/* 986/13.3333 */
}
#custom-doc2 {
	/*
	 * The width of the wrapper is 986px to accomodate the shadow
	 * The actual width of the page is 946 as dictated by the size of the home page picture
	 */
	margin:0px auto;
	width:75.8461em; /* 986/13 */
	*width:73.6502em;/* 986/13.3333 */
}

/**
 * HEADER
 * Encompasses the masthead, masthead navigation and top navigation bar
 * Note: the main picture is part of the body
 */

#hd {
	margin:0px auto;
}

#mast-head {
	/* This contains the Lamu Island Property banner and logo */
	background:#550000 url("../Images/hd-bg.jpg") no-repeat scroll left top;
	height:136px;
}

/* The masthead navigation is the collection of links at the top-right corner
 * of the screen (home | links | contact us)
 */ 
#mast-head .mast-head-nav {
	bottom:-96px;
	color:white;
	font-size:90%;
	position:relative;
	right:38px;
	text-align:right;
}
#mast-head .mast-head-nav a {
	color:white;
	text-decoration:none;
}
#mast-head .mast-head-nav a:hover {
	text-decoration:underline;
}


/* The main navigation that appears just above the main picture */
#top-nav {
/*	background:#EDEDB6 url("../Images/nav-bg.png") no-repeat scroll left top;*/
	background:#EDEDB6 url("../Images/topnav-bg.gif") no-repeat scroll center top;
	color:#550000;
	font-weight:normal;
	font-size:116%;
	margin:0px;
	padding:12px;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
}
#top-nav a {
	color:#550000;
	text-decoration:none;
}
#top-nav a:hover {
	text-decoration:underline;
}

/**
 * BODY
 * Contains the main content area, main picture, sidebar and all other content that is the 
 * main body of the page
 */
#bd {
	background:white url("../Images/bd-bg.png") repeat-y scroll center top;
	margin:0px auto;
	padding:0px 20px;
	text-align:left;
	font-size: 12px;
	line-height: 140%;
	color: #333333;	
}
#custom-doc2 #bd {
	*margin:0px 0px 0px -2px;
}

#main-pic {
	/* The main picture that appears before the body text and spans the width of the body */
	border-bottom:1px solid #550000;
	padding-bottom:1px;
	margin:0pt auto;
}

#main-content-area , .content10 { 
	/* Changed by JO to separate layout and content */
	padding:10px 48px;
}
#main-content-area.main-content-area-half {
	/* When the main content area and the sidebar are sharing the page 50-50, 
	 * the following width needs to be set to accomodate their combined padding
	 */
	width:39.5%;
}
#main-content-area.main-content-area-narrow {
	/* When the main content area and the sidebar are sharing the page 50-50, 
	 * the following width needs to be set to accomodate their combined padding
	 */
	width:550px;
}
#main-content-area {
	/*border:10px solid #000000;
	float: left;
	width: 100px;*/
}

#main-content-area a, #sidebar-right a, .property-box a {
	/* Sets all the links in the body to a dark red color */
	color:#990000;
}
/* NEW: Add this to display a larger content are in conjunction with a  
 * narrow sidebar
 */
#main-content-area.main-content-area-wide { 
	width:60.57787%;
}
#main-content-area a, #sidebar-right a, .property-box a {
	/* Sets all the links in the body to a dark red color */
	color:#990000;
}

.quote-box {
	/* Indents the text within and displays a graphic of large, faint quotation marks */
	background:url("../Images/quote-left.gif") no-repeat scroll left top transparent;
	color:#990000;
	font-family:"Times New Roman";
	font-weight: bold;
	margin:0.5em 0pt 0pt;
	/*padding:15px 25px;*/
}
.quote-box .end-quote {
	/* Displays a graphic of large, faint quotation marks and formats the text within in italics
	 * Good for displaying the source of the quotation
	 */
	background:transparent url("../Images/quote-right.gif") no-repeat scroll right bottom;
	padding:15px 25px;
}
.no-quotation .quote-box .end-quote, .no-quotation .quote-box,
.smallquotes .end-quote {
	background:none;
}
.smallquotes {
	/*background: transparent url("../Images/quote_small-left.gif") no-repeat left top;*/
}
.smallquotes .end-quote {
	padding:0pt 20px;
}

.quote-box p {
	font-size:138.5%;
	line-height:1.5em;
	margin-bottom:0pt;
}

.fullpage-quotebox-wrapper {
	margin:20px 40px;
}
.inline-quotebox-wrapper {
	background:#FFFFFF url("../Images/shela-heading.gif") no-repeat scroll left top;
	height:55px;
	padding:1em 0pt 1em 17em;
	*padding:1.5em 0pt 1em 17em;
}

.inline-quotebox-wrapper .quote-box {
	width:21em;
}
.inline-quotebox-wrapper .end-quote {
	background-position:right top;
}
.marrakech {
	float:right;
	font-family:"Times New Roman";
	font-weight:bold;
	margin:0.5em 15em 0pt 0pt;
	*margin:0em 8em 0pt 0pt;
	padding:15px 25px 0px;
	*padding:15px 0px 0px;
	font-size:123.1%;
	line-height:1.5em;
}

/* NEW: Replace the four classes below marked with updated */

/* The property-box and sidebar-right classes both have a beige background */
.property-box, .property-box-half, #sidebar-right, .insetimage-left, 
.insetimage-right { /* updated */
	background-color:#EDEDB6;
}
.property-box, .property-box-half { /* updated */
	border-top:1px solid #990000;
	border-bottom:1px solid #990000;
	margin:15px 0px; /* The margin of the original property-box is now provided by main-content-area */
	padding:20px 10px 10px 10px;
	height: 260px; /* +CK  */
}
.property-box-long {
	 height:330px; /* +JO  */
}
.property-box { /* updated */
	margin:15px 0px;
}

.property-box-half { /* updated */
	/* When two property boxes are sharing, the margin of 10px creates a space of 20px btw. them */
	margin:10px 5px;
}
.property-box-half h2, .property-box h2 { /* CK */
	margin-top: 0;
}
/*.property-box-half p{ CK 
	text-align: justify;
}*/

.property-box-auto {
	height: auto;
}
.property-box table.extra-padding td {
	padding:0px 20px;
}


/* SIDEBAR RIGHT */
#sidebar-right {
	/* This border helps the sidebar blend with the page border making it seem uniform */
	border-right:1px solid #550000;
	font-size: 11px;
	/*text-align: justify;
	width:49.9%;*/
}
#sidebar-right.fixed-width {
	width:49.9%;
}
#sidebar-right h2 { /* CK */
	margin-top: 25px;
	margin-bottom: 5px;
}
#sidebar-right.sidebar-right-narrow {
	width:235px;
	padding: 20px;
}
#sidebar-right.sidebar-right-narrow h2 { /* CK */
	margin-top: 45px;
	margin-bottom: 10px;
}
#sidebar-right .img-frame {
	/* The image frame in the sidebar has a slightly wider margins to appear in line with the
	 * header and give adequate spacing to the text
	 */
	margin:1em 1em 1em 0pt;
}

.inside-right {
	float: right;
	margin-bottom:10px;
	margin-left:20px;
	*margin-right:-2px;
}

.sidebar-right-fullpage {
	float: left;
	width: 100%;
}

/**
 * Note: When the sidebar contains a photo gallery, the sidebar needs to have less padding 
 * to accomodate three pictures in a row otherwise it only allows 2 pics
 */
#sidebar-right .content20 {
	padding:10px 20px;
}
#sidebar-right .content48 {
	padding:10px 48px;
}

/**
 * ELEMENTS
 * ========
 * Additional styles for HTML tags to give them a not-so-ordinary look
 */
h1, h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color:#990000;
}
h1 { /* CK */
	font-size: 20px;
}
h2 { /* CK */
	font-size: 18px;
}
h3 { /* CK */
	margin-top: 0;
	margin-bottom: 0px;
	color: #990000;
}
a:hover, h2 a, h2 a:active, h2 a:focus, h2 a:link, h2 a:visited { /* JO */
	text-decoration: none;
}
strong { /* JO */
	color: #990000;
}
strong em {
	font-weight:bold;
}
table { /* CK */
	border: 0;
}
table td { /* CK */
	border: none;
}

/**
 * SPECIAL FORMATTING
 * ==================
 * These are applied to text, often to make it standout.
 */
.breadcrumb { /* JO */
	border-bottom: 1px dotted #990000;
	padding-bottom: 5px;
}


.small { /* CK */
	font-size: 90%;
}

.highlight-link { /* Surrounds the link with a beige color to highlight it */
	background-color:#EDEDB6;
	font-weight:bold;
	margin-right:20px;
	padding:5px 15px;
	text-decoration:none;
}
.highlight-link:hover { /* JO */
	text-decoration:underline;	
}

.firstletter { /* JO - Makes the first letter slightly larger and a different color from the rest of the text */
	float: left;
	font-size:36px;
	padding:8px 5px 5px 0px;
}
.firstletter-image {
	margin-right:4px;
	padding-top:6px;
}

.sale {
	background-color:#990000;
	border:1px solid #FFFFFF;
	color:#FFFFFF;
	font-weight:bold;
	outline:1px solid #990000;
	padding:5px 10px;	
}

/**
 * FOOTER
 * ======
 * For the copyright and links at the bottom of the page
 */
#ft {
	background:transparent url("../Images/ft-bg.png") no-repeat scroll center top;
	color:white;
	font-size:93%;
	height:4.5385em; /* 59/13 */
	*height:4.425em; /* 59/13.3333 */
	padding:10px;
	text-align:center;
}

#ft a {
	color:white;
	text-decoration:none;
}

#ft a:hover {
	text-decoration:underline;
}

#footnote {
	font-size:85%;
}
#footnote p, #footnote a, #footnote a:active, #footnote a:focus, 
#footnote a:link, #footnote a:visited {
	color:white;
}

/**
 * OTHER
 * =====
 * These classes perform special functions for layout and formatting in certain instances
 * They are used widely and repeatedly throughout the website
 */
.clear { /* Clear trailling floats */
	clear:both;
	margin: 0; /* + CK */
	padding: 0; /* + CK */
	line-height: 0; /* + CK */
}
.clear-left {
	clear:left;
	margin: 0; /* + JO */
	padding: 0; /* + JO */
	line-height: 0; /* + JO */
}
.clear-right {
	clear:right;
}
.hide { /* Don't show the target */
	display: none;
}
.divider { /* CK - Clears trailing floats and separates text with a red dotted border */
	clear:both;
	margin: 10px 0; 
	padding: 0; 
	border-bottom: 1px dotted #990000;
}
.divider2 { /* JO - Clears trailing floats and separates text with a red double border */
	background-color: white;
	border-bottom: 3px double #550000;
	clear:both;
	margin: 10px 0; 
	padding: 0; 
}

#jumpmenu {
	background-color:#EDEDB6;
	border:1px solid #990000;
	float:right;
	margin-top:10px;
	opacity:0;
	padding:10px;
}

#propertyforsale-header {
	background:#FFFFFF url("../Images/property-heading.gif") no-repeat scroll left top;
	height:55px;
	margin-bottom:0pt;
	padding:2em 0pt 0pt 21em;
}

#press-header {
  background:#FFFFFF url("../Images/press-heading.jpg") no-repeat scroll left top;
  height:55px;
  margin-bottom:0pt;
  padding:2em 0pt 0pt 10em;
}

.file-icon {
	background:url("http://cpanel.artkenya.com/Images/fileicon-sprite.gif") no-repeat scroll 0 0 transparent;
	float:left;
	height:16px;
	margin-right:5px;
	width:16px;
}
.file-icon.wmv  {
	background-position:-95px 0;
}
.file-icon.mov {
	background-position:-111px 0;
}

/*
 * FLOWPLAYER
 * ==========
 */

.flowplayer-wrapper {
	border:1px solid #D2D2D2;
	margin:20px;
	position:relative;
}

.flowplayer {
	background-attachment:scroll;
	background-color:#333333;
	background-position:50% 50%;
	background-repeat:no-repeat;
	cursor:pointer;
	display:block;
	height:319px;
	position:relative;
	text-align:center;
	text-decoration:none !important;
	width:425px;
}
.flowplayer img.play {
	margin-top:93px;
}
.flowplayer .player-info {
	background:url("../Images/player-gradient.png") repeat-x scroll 0 0 #000000;
	border-top:1px solid #CCCCCC;
	bottom:0;
	color:#FFFFFF;
	display:block;
	font-family:"bitstream vera sans","trebuchet ms";
	height:40px;
	left:0;
	opacity:0.7;
	padding:5px 15px;
	position:absolute;
	right:0;
	text-align:left;
	*background:url("../Images/player-gradient.png") repeat-x scroll 0 0 #000000 !important;
	*background:none #666666;
	*width:auto !important;
	*width:395px;
}
.flowplayer .player-info .duration {
	display:block;
	font-weight:bold;
}

/* End of Flowplayer styles */