/***************************************************************
           Base Styles for the Southern Cape Website
   Copyright by Robert I. Sadler (rsadler@southerncape.co.za)
                     Version 8.1, 26/05/2009
***************************************************************/

/**************************
** GLOBAL DEFAULT STYLES **
**************************/
body { background-color: #fff; color: #000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; margin: 0; padding: 0; position: relative; }
a { text-decoration: none; }
a:hover { color: darkgreen; text-decoration: underline; }
a:link img,
a:visited img,
a:hover img { border: none; }

/**************************************
** STYLES FOR TYPOGRAPHICAL ELEMENTS **
**************************************/
sup { font-size: 0.8em; font-weight: normal; vertical-align: text-top; }
sub { font-size: 0.8em; font-weight: normal; vertical-align: text-bottom; }
/* I don't like the HTML elements <b>, <big>, <i>, <s>, <small>, <strike>, <tt> and <u>, so I've replaced them with: */
.bold { font-weight: bold; }
.italic { font-style: italic; }
.larger { font-size: larger; }
.smaller { font-size: smaller; }
.strike { text-decoration: line-through; }
.monospace { font-family: monospace; }
.underline { text-decoration: underline; }
/* CSS-based replacement for <nobr> tag. */
.no-break { white-space: nowrap; }

/**************************************
** STYLES FOR THE ONION SKIN SHADOWS **
**************************************/
.shadow { background: url(/images/shadow.png) right bottom no-repeat; }
.shadow-tr { background: url(/images/shadow-tr.png) right top no-repeat; margin: 0; padding-right: 6px; }
.shadow-bl { background: url(/images/shadow-bl.png) left bottom no-repeat; margin: 0; padding-bottom: 6px; }

/**********************************
** STYLES FOR THE header SECTION **
**********************************/
#header { margin: 0; padding: 0; position: relative; z-index: 10; }
#hlb { background-color: #4682b4; background-image: url(/images/hlb.png); border-bottom: 1px solid #000; height: 70px; position: relative; }
#hsi { margin: 0; z-index: 3; }
#hpi { }
#hli { position: absolute; top: 0; right: 0; z-index: 2; }
#hmb { background-color: #ffd700; border-bottom: 1px solid #000; font-weight: bold; }
#hmb ul { list-style: none; margin: 0; padding: 0; }
#hmb ul ul { background-color: #ffffe0; border: 1px solid #000; display: none; left: 2px; margin-top: 13px; position: absolute; top: 1.1em; width: 250px; }
#hmb ul ul ul { left: 253px; margin-top: 2px; top: -1px; }
#hmb li { display: block; float: left; position: relative; }
#hmb ul ul li { float: none; }
#hmb ul ul>li:last-child { margin-bottom: 1px; } /* Mozilla fix */
#hmb a { border: 1px solid #ffd700; color: #000; display: block; margin: 1px; padding: 2px; text-decoration: none; }
#hmb ul ul a { border-color: #ffffe0; }
#hmb a:hover, #hmb a.highlighted:hover, #hmb a:focus, #hmb a.highlighted { background-color: #4169e1; border: 1px solid #000; color: #fff; }
/*
 HACKS: IE/Win:
 A small height on <li> and <a> tags and floating prevents gaps in menu.
 * html affects <=IE6 and *:first-child+html affects IE7.
*/
*:first-child+html #hmb ul ul li { float: left; width: 100%; }
* html #hmb ul ul li { float: left; height: 1%; }
* html #hmb ul ul a { height: 1%; }
/* End Hacks */
#breadcrumb { color: #999; font-weight: bold; padding: 2px 8px; text-align: right; }
#breadcrumb a { color: #999; text-decoration: none; }
#breadcrumb a:hover { color: #000; }

/**********************************
** STYLES FOR THE titles SECTION **
**********************************/
#titles { margin: 0; padding: 0; position: relative; z-index: 5; }
#titles h1,
#titles h2 { font-family: Georgia, 'Times New Roman', serif; font-style: normal; font-variant: normal; font-weight: normal; margin: 25px 0; padding: 0; text-align: center; text-decoration: none; text-indent: 0; text-transform: none; }
#titles h1 { font-size: 2.5em; font-weight: bold; margin-top: 1em; }
#titles h2 { font-size: 1.85em; font-style: italic; margin-top: -25px; }
#titles h3,
#titles p.byline { font-size: 1.2em; font-style: italic; font-weight: bold; margin-top: -15px; text-align: center; }
#titles h4,
#titles p.date { font-size: 1em; font-weight: bold; margin-top: -15px; text-align: center; }
#titles p.summary, #titles h5 { }

/**********************************
** STYLES FOR THE banner SECTION **
**********************************/
#banner { clear: both; margin: 5px auto; padding: 5px; text-align: center; }
#banner img { border: 1px solid #efefef; }

/*******************************************
** DEFAULT STYLES FOR THE content SECTION **
*******************************************/
#content { margin: 0; padding: 0 5%; position: relative; }
#content a { text-decoration: none; }
#content a:hover { color: darkgreen; text-decoration: underline; }
#content a:link img,
#content a:visited img,
#content a:hover img { border: none; }

/************************************************************************
** DEFAULT STYLES FOR BASIC HTML BLOCK ELEMENTS IN THE content SECTION **
************************************************************************/
#content h1 { border-bottom: 1px solid #999; clear: both; font-family: Georgia, 'Times New Roman', serif; font-size: 1.8em; font-variant: small-caps; font-weight: bold; margin: 2em 0 1em; padding: 0.2em; }
#content h2 { font-size: 1.4em; font-style: italic; font-variant: small-caps; font-weight: bold; margin: 1em 0.714em 0.5em; padding: 0; text-align: left; }
#content h3 { font-size: 1.2em; font-style: normal; font-weight: bold; margin: 1em 1.25em 0.5em; padding: 0; }
#content h4 { font-size: 1.1em; font-weight: bold; margin: 1em 1.818em 0.5em; padding: 0; }
#content h5 { }
#content h6 { }
#content p { margin: 0.6em 2em 0.2em; padding: 0; text-align: justify; }
#content ol,
#content ul { margin: 0.6em 2em 0.2em 4em; padding: 0; text-align: justify; }
#content ol { list-style-type: decimal; }
#content ol ol,
#content ol ul,
#content ul ol,
#content ul ul { margin: 0; margin-left: 2em; }
#content li { margin-top: 0.3em; margin-bottom: 0.2em; }
#content dl { margin: 0.6em 2em 0.2em; }
#content dt { margin-top: 0.5em; font-weight: bold; }
#content dd { text-align: justify; }
#content hr { background-color: #999; border: none; clear: both; color: #999; height: 1px; margin: 1em 0; padding: 0; }

/*************************************************************************
** DEFAULT STYLES FOR BASIC HTML PHRASE ELEMENTS IN THE content SECTION **
*************************************************************************/
#content abbr { border-bottom: 1px dotted #aaa; cursor: help; }
#content acronym { border-bottom: 1px dotted #aaa; cursor: help; }
#content cite {  }
#content code {  }
#content del { color: #777; text-decoration: line-through; }
#content dfn {  }
#content em { font-style: italic; }
#content ins {  }
#content kbd { font-family: monospace; }
#content q { font-weight: normal; }
#content q:before { content: no-open-quote; }
#content q:after { content: no-close-quote; }
#content samp {  }
#content strong { font-weight: bolder; }
#content var { color: darkorange; font-style: normal; font-weight: bolder; }

/*************************************************************
** STYLES FOR TYPOGRAPHICAL ELEMENTS IN THE content SECTION **
*************************************************************/
/* These are basically typographic in nature, but also lend some structure to the document */
#content span.reference { color: #999; font-size: 0.8em; font-weight: normal; }
#content span.species { font-style: italic; white-space: nowrap; }

/************************************************************************
** DEFAULT STYLES FOR BASIC HTML TABLE ELEMENTS IN THE content SECTION **
************************************************************************/
#content table { background-color: #f8fff8; border: 1px solid #bbb; }
#content table th { background-color: #eee; border: 1px solid #bbb; font-size: 1.1em; padding: 2px 4px; vertical-align: top; }
#content table td { border: 1px solid #bbb; padding: 2px 4px; }

/***************************************************************
** DEFAULT STYLES FOR BLOCK QUOTATIONS IN THE content SECTION **
***************************************************************/
#content blockquote { font-family: Georgia, 'Times New Roman', serif; margin: 0.8em 4em; }
#content blockquote p { margin-left: 0; margin-right: 0; }
#content blockquote cite { display: block; text-align: right; }

/**************************************************
** VARIOUS TYPES OF LISTS IN THE content SECTION **
**************************************************/
#content ul.toc { font-size: 1.15em; list-style-image: url(/images/icons/page_white_go.png); margin: 1.74em 10px 1.74em 3em; padding: 0; text-align: left; }
#content ul.toc li { margin-bottom: 0.2em; padding-left: 2px; }
#content ol.group,
#content ul.group { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 1.25em; font-style: normal; font-variant: normal; font-weight: bold; list-style-image: none; list-style-position: outside; list-style-type: none; margin: 0; margin-left: 1.6em; padding: 0; text-align: left; text-decoration: none; text-indent: 0; text-transform: none; }
#content ol.group { list-style-type: upper-roman; }
#content ol.group ul,
#content ul.group ul { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.85em; font-weight: normal; list-style-position: inside; list-style-type: disc; margin: 0.2em 0 0.8em 1em; }
#content ul.subgroup { font-weight: bold; list-style-position: outside; list-style-type: none; }
#content ul.subgroup ul { font-size: 1em; font-weight: normal; list-style-position: inside; list-style-type: disc; }
#content ul.references { list-style-type: none; margin: 0.6em 2em 0.2em 4em; padding: 0; text-align: justify; }
#content ul.references li { margin-top: 0.5em; text-indent: -2em; }

/***************************************************************
** STYLES FOR VARIOUS CLASSED ELEMENTS IN THE content SECTION **
***************************************************************/
#content address.byline { font-style: italic; margin: 0.6em 2em 0.2em; padding: 0; text-align: right; }
#content address.byline:before { content: "\2014\A0"; }
#content address.byline:after { content: "\A0\2014"; }
#content p.breaker { clear: both; }

/**************************************************
** STYLES FOR note BLOCKS IN THE content SECTION **
**************************************************/
#content div.note { border: 1px solid #000; margin: 20px 0; padding: 0; }
#content div.note.left { float: left; margin: 6px 15px 6px 0; max-width: 33%; min-width: 120px; }
#content div.note.right { float: right; margin: 6px -6px 6px 15px; max-width: 33%; min-width: 120px; }
#content div.note h2 { background-color: #4682b4; border-bottom: 1px solid #226; color: #fff; font-weight: bolder; margin: 0; padding: 5px 10px; }
#content div.note p { margin: 0.5em 10px; }
#content div.note ul {  }

/********************************************************
** STYLES FOR PHOTOGRAPH BLOCKS IN THE content SECTION **
********************************************************/
#content div.album { border: 1px solid #fff; clear: both; margin: 3em 0; padding: 0; position: relative; }
#content div.photograph { padding: 0; }
#content div.photograph.left { clear: left; float: left; margin: 6px 15px 6px 0; }
#content div.photograph.right { clear: right; float: right; margin: 6px -6px 6px 15px; }
#content div.photograph.centre { clear: both; margin: 0.3em auto; }
#content div.photograph.group { position: absolute; top: 0; visibility: hidden; }
#content div.photograph div.frame { background-color: #fff; border: 1px solid #808080; border-bottom-color: #606060; border-right-color: #606060; margin: 0; padding: 0; }
#content div.photograph div.photo { border: 1px solid #2f4f4f; margin: 3px; }
#content div.photograph div.caption { background-color: #eef; border-top: 1px solid #d3d3d3; color: #000; font-size: 0.9em; margin: 0; padding: 0.1em; }
#content div.photograph div.caption p.caption { font-size: 0.9em; margin: 0.1em 0.5em; padding: 0; text-align: center; }
#content div.photograph div.caption p.gear { color: #909090; font-size: 0.75em; margin: 0.1em 0.5em; padding: 0; text-align: center; }
#content div.photograph div.caption p.date { font-size: 0.8em; margin: 0.1em 0.5em; padding: 0; text-align: center; }
#content div.photograph div.caption p.copyright { color: #606060; font-size: 0.8em; font-style: italic; margin: 0.1em 0.5em; padding: 0; text-align: center; }
#content div.photograph div.caption p.actions { font-size: 0.8em; font-style: italic; margin: 0.1em 0.5em; padding: 0; text-align: center; }
#content div.photograph div.caption p.actions a { color: #000; }

/*******************************
** STYLES FOR PRODUCT REVIEWS **
*******************************/
#content div.product { clear: both; margin: 3em 3em 1em; padding: 0; position: relative; }
#content div.product hr { background-color: #bbb; border: none; color: #bbb; height: 1px; margin: 0; }
#content div.product div.image { float: left; padding: 0; text-align: center; width: 160px; }
#content div.product div.image img { border: 1px solid #555; margin: 0.5em 0; }
#content div.product div.details { margin-left: 165px; }
#content div.product div.details h4 { font-family: Georgia, serif; font-size: 1.7em; margin: 0 0 0.22em; padding: 0; padding-right: 100px; position: relative; }
#content div.product div.details h4 span.number { bottom: 3px; color: #333; font-size: smaller; font-weight: normal; position: absolute; right: 10px; }
#content div.product div.details p.author { font-size: 1.2em; margin: 0.18em 0; padding-left: 0.833em; }
#content div.product div.details p.details { font-size: 0.9em; margin: 0; padding-left: 1.11em; }
#content div.product div.details p.rating { margin: 4px 0; padding-left: 1em; }
#content div.product div.details div.review { border-top: 1px solid #dcdcdc; margin-top: 0.4em; margin-bottom: 1em; padding: 0.4em 1em; }
#content div.product div.details div.review h5 { font-size: 1.1em; font-variant: small-caps; font-weight: bold; margin: 0; margin-top: 0.55em; }
#content div.product div.details div.review p { margin: 0; margin-top: 0.6em; padding: 0; text-align: justify; }
#content div.product div.details div.review p.note { font-style: italic; }
#content div.product div.details div.review ol,
#content div.product div.details div.review ul { margin-top: 0.6em; margin-left: 2em; }
#content div.product div.details div.review li { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
#content div.product div.details div.purchase { font-size: 1.1em; margin: 0.91em 0 0.46em; }

/********************************************************
** STYLES FOR SIMULATING COMPUTER CONSOLE INPUT/OUTPUT **
********************************************************/
#content div.cli,
#content div.code,
#content p.code { background-color: #efefef; border: 1px solid #ccc; font-family: 'Courier New', monospace; margin: 0.6em 2em 0.2em; padding: 0.4em 0.8em; text-align: left; }
#content div.cli p { font-weight: bold; margin: 0; padding: 0; text-align: left; white-space: pre; }
#content div.cli p kbd { color: #010; }
#content div.cli p kbd span.argument { color: #555; font-style: italic; }
#content div.cli p span.hostname { color: red; }
#content div.cli p span.user { color: blue; }
#content div.cli p span.prompt { color: blue; }
#content div.cli div.edit { margin: 0.6em 1em; }
#content div.cli div.edit code { font-weight: normal; white-space: pre; }
#content div.code { white-space: pre-wrap; }

/**********************************
** STYLES FOR THE NAVIGATION BAR **
**********************************/
#navigation { border-top: 1px dotted #aaa; font-size: 1.1em; margin: 25px 5% 0; padding-top: 0.3em; }
#navleft { float: left; padding-bottom: 0.5em; text-align: left; width: 33%; }
#navcentre { margin-left: 34%; margin-right: 34%; padding-bottom: 0.5em; text-align: center; }
#navright { float: right; padding-bottom: 0.5em; text-align: right; width: 33%; }





/* HTML TAG DESCRIPTIONS */
#content div.tag { margin: 3em 2em 6em; padding: 0; }
#content div.tag h4 { border-bottom: 1px solid #ccc; font-style: normal; font-variant: normal; font-weight: bold; margin: 0.2em 0 0.8em; margin-left: -0.5em; padding: 0; padding-bottom: 2px; }
#content div.tag p { margin: 1em 0; padding: 0; }
#content div.tag table { border: none; margin: 0; margin-left: 0.8em; padding: 0; }
#content div.tag table th { background-color: transparent; min-width: 20em; padding-right: 0.5em; text-align: left; vertical-align: top; }
#content div.tag h5 { border-bottom: 1px solid #ccc; font-size: 1.15em; margin: 1em 0 0.2em -0.2em; padding: 0; padding-left: 0.2em; padding-bottom: 2px; }

ol.biblio { margin: 0.6em 10px 0.2em 2em; padding: 0; text-align: justify; }
ol.single,
ul.single { margin-top: 2em; margin-bottom: 2em; }
.single li { margin-top: 0.2em; }

#adverts { clear: both; border-top: 1px solid #999; margin: 3.6em 5% 0; padding: 25px 0; text-align: center; }
#adverts div.banner { clear: both; margin: 25px auto 5px; padding: 0; }

#webring {  }
#footer { border-top: 1px solid black; clear: both; margin: 3.6em 5% 0; padding: 0.5em 0; }
#footer p { color: #000; font-family: 'Courier New', Courier, monospace; font-size: 0.85em; font-style: normal; font-variant: normal; margin: 0; padding: 0; text-align: center; }