/****************************************************
 *
 *  Main stylesheet for Meerkat Manor Microsite 
 *  17/08/2006
 *  Ben Griffiths
 *
 ****************************************************/


/* Main page containers - used for page layout
 * where possible these follow the order in which
 * they occur along the page
 */

body { /* main body declarations */
  margin-top: 0px;
  margin-left: 0px;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

img { /* ensure no borders around images with links */
  border-width: 0px;
}

hr.yellow {  /* yellow line */
  background-color: #f3cf32;
  color: #f3cf32;
  height: 2px;
  border: 0px;
  overflow: hidden;
  margin-top: 0px;
  margin-bottom: 0px;
  width: 100%;
}

#content {  /* holds all page content */
  width: 760px;
  background-color:#000000;
}

#breadcrumbBox { /* user location navigation */
  background-color: #000000;
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

#backgroundImage { /* holds main background image */
  background-image: url('/ap/meerkat/style/images/kalahari_desert.jpg');
  background-repeat: no-repeat;
  width: 760px;
  min-height: 803px;
}

/* left hand navigation section
 */


#leftNav { /* main area holding left navigation */
  width: 165px;
  margin-right: 10px;
  margin-left: 4px;
  float: left;
}

#leftCamera { /* holds site title on camera */
  overflow: hidden;
  width: 165px;
  height: 153px;
}

#leftNavSection { /* holds the navigation section - including rounding images */
  width: 165px;
}

#leftNavTop { /* nav top rounding */
  overflow: hidden;
  width: 165px;
  height: 11px;
  background-image: url('/ap/meerkat/style/images/nav_top.gif');
  background-repeat: no-repeat;
}

#leftNavMiddle { /* sets links section background */
  width: 165px;
  background-image: url('/ap/meerkat/style/images/nav_middle.gif');
  background-repeat: repeat-y;
}

#leftNavInner { /* holds the actual nav links */
  margin-left: 2px;
  margin-right: 2px;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 80%;
  font-weight: normal;
}

#leftNavBottom { /* nav bottom rounding */
  overflow: hidden;
  width: 165px;
  height: 11px;
  background-image: url('/ap/meerkat/style/images/nav_bottom.gif');
  background-repeat: no-repeat;
}

#leftMeerkatImage { /* holds the randomized meerkat image */
  width: 165px;
  overflow: hidden;
  height: 241px;
}

#leftMessageArea { /* holds the lefthand message */
  width: 165px;
  background-color: #000000;
}


/* right hand part of the page; non navigation
 */


#rightContent { /* generic right hand content container */
  float: left;
  margin-right: 9px;
  width: 566px;
}

#rightTopBox { /* holds the top promo box and image/flash elements */
  margin-top: 10px;
  width: 566px;
  height: 142px;
}

#rightTopBoxHome { /* holds the top promo box and image/flash elements */
  margin-top: 10px;
  width: 566px;
  height: 70px;
}

#rightTopBoxFlash { /* holds the top promo box and image/flash elements */
  margin-top: 10px;
  width: 566px;
  height: 60px;
}

#topBoxMinHeight {
  float: left;
  height: 142px;
  width: 1px;
}

#rightTopBoxLeft { /* holds image/flash element */
  width: 225px;
  float: left;
}

#rightTopBoxRight { /* holds top promo box */
  width: 340px;
  float: right;
}

#rightTopBoxRightTopRound { /* rounding for top promo box */
  overflow: hidden;
  width: 340px;
  height: 10px;
  background-image: url('/ap/meerkat/style/images/promo_box_top.gif');
  background-repeat: no-repeat;
}

#rightTopBoxRightInner { /* top promo box main content */
  width: 340px;
  background-color: #3c1a06;
}

#rightTopBoxRightInnerPadded {
  padding-left: 10px;
  padding-right: 10px;
}

#rightTopBoxRightBottomRound {  /* rounding for top promo box */
  width: 340px;
  height: 10px;
  background-image: url('/ap/meerkat/style/images/promo_box_bottom.gif');
  background-repeat: no-repeat;
}

#rightMainCopy {  /* main page content */
  width: 566px;
}

#minHeight {
  width: 1px;
  height: 803px;
  float: left;
}

#disclaimer {
  clear: both;
  background-color: #000000;
  color: #ffffff;
  font-size: 60%;     
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top: 15px;
}

#disclaimerColorFix {
	background-color: #ffffff;
	width: 760px;
	height: 68px;
	overflow: hidden;
}

/* style information for main content pages; content area
 */

#rightContentBrown {
  width: 566px;
}

#rightContentBrownTop {
  overflow: hidden;
  height: 14px;
  background-image: url('/ap/meerkat/style/images/content_top.gif');
  background-repeat: no-repeat;
}

#rightContentBrownMiddle {
  clear: both;
  float: left;
  width: 566px;
  background-color: #3c1a06;
}

#rightContentBrownBottom {
  clear: both;
  overflow: hidden;
  height: 14px;
  background-image: url('/ap/meerkat/style/images/content_bottom.gif');
  background-repeat: no-repeat;
}

/* style information for download page
 */
 
.downloadArea {
  float: left;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 268px;
 }
 
 /* style information for "about the show" page
  */
  
#aboutContentPadded {
  padding: 10px;
}

#aboutTheShowRightImage {
  float: right;
}

/* stlye information for Kalahari Desert page
 */

#kdLeftText {
  clear: left;
  float: left;
  width: 350px;
}

#kdRightImages {
  clear: right;
  width: 172px;
  float: right;
}

/* font declarations
 */

.breadcrumb {
  color: #ffffff;
  font-size: 70%;
}

.breadcrumb a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}

.breadcrumb a:Hover {
}

.titleFont {
  color: #ffffff;
  font-size: 80%;
  font-weight: bold;
}

.titleFont a {
  color: #ffffff;
  font-weight: bold;
}

.titleFont a:hover {
  color: #ffffff;
  font-weight: bold;
}

.bodyFont {
  color: #ffffff;
  font-size: 75%;
  font-weight: normal;
}

.bodyFont a {
  color: #f3cf32;
  font-size: 85%;
  font-weight: bold;
}

.bodyFont a:hover {
  color: #fdb9a2;
  font-size: 85%;
  font-weight: bold;
}

.titleFontTopPadded {
  color: #ffffff;
  font-size: 80%;
  font-weight: bold;
  padding-top: 5px;
}

.titleFontTopPadded a {
  color: #ffffff;
  font-weight: bold;
  padding-top: 5px;
}

.titleFontTopPadded a:hover {
  color: #ffffff;
  font-weight: bold;
  padding-top: 5px;
}

.titleFontTopLeftPadded {
  color: #ffffff;
  font-size: 75%;
  font-weight: bold;
  padding-top: 10px;
  padding-left: 10px;
}

.titleFontTopLeftPadded a {
  color: #ffffff;
  font-weight: bold;
  padding-top: 10px;
  padding-left: 10px;
}

.titleFontTopLeftPadded a:hover {
  color: #ffffff;
  font-weight: bold;
  padding-top: 10px;
  padding-left: 10px;
}

.bodyFontTopPadded {
  color: #ffffff;
  font-size: 75%;
  font-weight: normal;
  padding-top: 5px;
}

.bodyFontTopPadded a {
  color: #f3cf32;
  font-size: 90%;
  font-weight: bold;
  padding-top: 5px;
}

.bodyFontTopPadded a:hover {
  color: #fdb9a2;
  font-size: 90%;
  font-weight: bold;
  padding-top: 5px;
}

.bodyFontTopBottomPadded {
  color: #ffffff;
  font-size: 75%;
  font-weight: normal;
  padding-top: 5px;
  padding-bottom: 10px;
}

.bodyFontTopBottomPadded a {
  color: #f3cf32;
  font-size: 90%;
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 10px;
}

.bodyFontTopBottomPadded a:hover {
  color: #fdb9a2;
  font-size: 90%;
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 10px;
}

.bodyFontLeftPadded {
  color: #ffffff;
  font-size: 75%;
  font-weight: normal;
  padding-left: 10px;
}

.bodyFontLeftPadded a {
  color: #f3cf32;
  font-size: 90%;
  font-weight: bold;
  padding-left: 10px;
}

.bodyFontLeftPadded a:hover {
  color: #fdb9a2;
  font-size: 90%;
  font-weight: bold;
  padding-left: 10px;
}

.bodyFontLeftBottomPadded5 {
  color: #ffffff;
  font-size: 75%;
  font-weight: normal;
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 10px;
}

.bodyFontLeftBottomPadded5 a {
  color: #f3cf32;
  font-size: 90%;
  font-weight: bold;
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 10px;
}

.bodyFontLeftBottomPadded5 a:hover {
  color: #fdb9a2;
  font-size: 90%;
  font-weight: bold;
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 10px;
}

.captionFont {
  line-height: 18px;
  color: #ffffff;
  font-size: 65%;
  font-weight: bold;
}

.captionFont a {
  line-height: 18px;
  color: #f3cf32;
  font-weight: bold;
}

.captionFont a:hover {
  line-height: 18px;
  color: #fdb9a2;
  font-weight: bold;
}

.pageTitle {
  color: #ffffff;
  font-size: 110%;
  font-weight: bold;
  padding-left: 5px;
}

html>body .pageTitle {
  padding-top: 5px;
  padding-bottom: 5px;
}


/* animal planet standard left hand navigation style (fixed)
 */

/* remove the bullet points etc */
#discovery_navigation ul {
  list-style-type:none;
  margin: 0px;
  padding: 0px;
}

#discovery_navigation {
  font-size: 11px;
  line-height: 18px;
  color: #ffd03f;
  text-decoration: none;
  background:#891a00;
  font-weight: bold;
}

#discovery_navigation a {
  color: #ffd03f;
  display: inline-block;
  text-decoration: none;
}

#discovery_navigation a:hover {
  color: #fdb9a2;
}

/* make it work in firefox */
html>body #discovery_navigation a {
  display:block;
}

/* Color andpadding are split out because combined it does notwork in IE */
/* First level color */
#discovery_navigation ul li {
  padding-left:5px;
}

/* Second level padding */
#discovery_navigation ul ul li {
  padding-left:15px;
}

/* Third level padding */
#discovery_navigation ul ul ul li {
  padding-left:25px;
}

/* Fourth level padding */
#discovery_navigation ul ul ul ul li { 
  padding-left:35px;
}

/* Fifth level padding */
#discovery_navigation ul ul ul ul ul li { 
  padding-left:45px;
}

#discovery_navigation_head { 
  font-size: 11px;
  font-weight: bold;
  padding-bottom: 3px;
  color: #ffd03f;
  text-decoration: none;
  line-height: 18px;
}

#discovery_navigation_head a {
  color: #ffd03f;
  text-decoration: none;
}

#discovery_navigation_head a:hover {
  color: #ffffff;
}