/**
 * 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:108%;
  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:bold;
  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:none repeat scroll 0 0 transparent
}
.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
}
#rent-header {
  background:#FFFFFF url("../Images/rent-heading.gif") no-repeat scroll left top;
  height:55px;
  margin-bottom:0pt;
  padding:2em 0pt 0pt 21em
}
#beyond-lamu-header {
  background:#FFFFFF url("../Images/beyond-lamu-header.jpg") no-repeat scroll left top;
  height:55px;
  margin-bottom:0pt;
  padding:2em 0pt 0pt 23em
}
#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
}
.rates-table th {
  border:medium none;
  color:#990000;
  font-size:116%;
  text-align:left
}
.rates-table td {
  color:#990000;
  font-weight:bold
}
/*
 * 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 */