/* 
  Copyright : CSIR
  Author : Derek R Hohls 
  Date Created : 18 March 2007
  System : NFAQG Website
	Client: Dept. Environmental Affairs & Tourism, South Africa
  Type :  CSS Page  
  Purpose : Primary screen page formatting and appearance
*/

/* key colors:
top sky "dark light blue": #6CABDE
very pale grey: #E0DFE3
dark blue     : #396E9A
dark contrast : #1F3A52
light blue    : #C0DBF0
*/

body,p,table,ol,ul,a,caption,.newsbox-title {
  font-family: Arial, sans-serif;
	font-size: 0.9em;
}
body {
  margin: 0;
  padding: 0;
	background-color: white;
}
p {
  margin-top: 2px;
}
table {
  border: 1px solid #396E9A;
} 
tr {
  font-size: 0.95em;
}
h1 {
	font-family: Tahoma, Verdana, "Arial Narrow", Arial, sans-serif;
	font-size: 1.2em;
	color: #1F3A52;
	margin-top: 0px;
  margin-bottom: 1px;
	border-bottom: solid #E0DFE3 2px;
	font-weight:bold;
}
h2 {
	font: bold 1.125em  Arial, sans-serif;
	color: #1F3A52;
	margin-top: 0px;
  margin-bottom: 2px;
}
h3 {
	font: bold 1.025em Arial, sans-serif;
	color: #396E9A;
	margin-bottom: 2px;
}
h4 {
	font: bold 1.0em Arial, sans-serif;
	color: #396E9A;
	margin-bottom: 2px;
}
h5 {
	font: bold 1.1em Arial, sans-serif;
	color: #43616B;
	margin-top: 2px;
}
a {
  color: #1F3A52;
	text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
ul {
	list-style-type: square; 
}

div#left h1 {
  font-size: 1.0em;
	background-color: #396E9A;
  color: #232900;
  border: solid #1F3A52 2px;
	margin: 0px;
  margin-top: 5px;
  padding: 2px;
}
img.map, img.photo {
  border: solid #396E9A 3px; 
}
ul {
  margin-top: 0;
}

/* ----------------------------  Layout Table ------------------------------*/

.table-layout, .table-layout th, .table-layout td,
.table-layout-row, .table-layout-cell {
  border: none;
	padding: 0;
	margin: 0;
}

/* ---------------------------  Table Elements  ----------------------------*/
caption {
  text-align: center;
  background-color: #6CABDE;
	padding: 1px;
	font-size: 1.0em;
	color: #396E9A;
	font-weight: bold;
}
.even {
  background-color: #C0DBF0;
}
table, table td, table th {
  border: none;
	padding: 0.25em;
}
table {
  border: 1px solid #6CABDE;
	border-top: none;
}
table td {
  font-size: 1.05em;
}
table th {
  font-size: 1.05em;
  background-color: #396E9A;
	color: white;
}
table a {
  text-decoration: none;
	font-size: 1.0em;
}
table a:hover {
  text-decoration: underline;
}
.loginForm {
  background-color: #C0DBF0;
}
.required {
  color: red;
}


/* ---------------------------- CORE PAGE DIVisions ------------------------*/

#page-top-image {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  /*background:  #fff url(sky-slice.png) repeat-x left top;*/
	background: #6CABDE;  
  height: 78px;
  border: none;
	border-bottom: solid #396E9A 1px;
}
#page-top-logo {
  margin: 0;
  padding: 0;
  background-color: #396E9A;
  height: 30px;
	vertical-align: baseline;
	border: none;
  border-bottom: solid #396E9A 1px;
}
#heading, #logo {
	font-family: "Arial Narrow", Arial, sanserif;
  font-size: 14pt;
  font-weight: bold;
  /*letter-spacing: -0.02em;*/
  color: #F2F2F2;
  /*text-decoration: overline;*/
  float: left;
  margin-top:  2px;
  margin-left: 5px;
	text-transform: uppercase;
	position: relative;
}
#logo {
  font-size: 24pt;
}
#contact {
	font-family: Arial, sans-serif;
  font-size: 10pt;
  font-weight: bold;
  float: right;
	position: relative;
  margin-top:   5px;
  margin-right: 5px;
	vertical-align: baseline;
}
#page-top-button {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  padding-top: 4px;
  /*padding-left: 195px;*/
  background-color: #C0DBF0;
  height: 24px;
  border-top: solid #fff 1px;
  border-bottom: solid #CCCCCC 1px;
  color: #396E9A;
  text-align: left;
  width: 100%;
	font-size: 10pt;
	text-transform: lowercase;
}
.page-top-indent {
  margin-left: 190px;
}
.page-top-indent-head {
  margin-left: 179px;
}
a:link.mbutton, a:visited.mbutton,
a:link.mbutton-right, a:visited.mbutton-right  {
  margin: 0;
  padding-left: 4px;
  padding-right: 4px;
  background-color: #C0DBF0;
  height: 18px;
  border-left: solid #41759F 2px; /*  #396E9A*/
  color: #396E9A;
	font-weight: bold;
  text-align: center;
  text-decoration: none;
}
a:hover.mbutton, a:hover.mbutton-right {
  border-left: inset #fff 2px;
  color: #1F3A52;
  text-decoration: none;
}
a:link.mbutton-right, a:visited.mbutton-right  {
  border-right: inset #fff 2px;
}
a:hover.mbutton-right {
  border-right: outset #fff 1px;
}
a:visited.mbutton-right  {
  border-right: solid #41759F 2px;
}
#page-wrapper, #page-footer, #left, #right, #center  {
  background-color: white;
}
#page-wrapper {
  margin-top: 0;
  margin-left: 0px;
  margin-right: 0px;
  padding: 0;  
  margin-bottom: 0;
  border: none; 
}
#left-column-wrapper {
  margin: 0;
  padding: 0;
	background-color: #A3CFF2;
}
#left-column {
  float: left;
  width: 175px;
  padding: 0; 
  margin-bottom: 0;
	background-color: #A3CFF2;
}
#right-column {
	position: absolute;
	width: 185px;
	top: 162px;
	right: 1px;
	padding: 0px;
	background-color: white;
	left: 1042px;
	height: 571px;

}
#center-column {
  margin: 0px;
  margin-right: 200px;
  padding: 5px;
  border-left: none;
	background-color: white; 
}
#page-footer {
	font-family: Arial, sans-serif;
  font-size: 0.85em;
	color: #C0DBF0;
  margin-top: 0;
  margin-left: 0px;
  margin-right: 0px;
  text-align: center;
  border-top: solid #C0DBF0 1px;
	background-color: white;
}
div#page-footer p {
  margin: 0;
}
#page-end, .link-bottom {
	font-family: Arial, sans-serif;
  font-size: 0.75em;
	color: #ccc;
}
#page-end {
  margin-top: 2px;
  text-align: center;
  border: 0;
}
.clear {
  clear: both;
}
.URL { 
  display: none;
}


/* ------------------------------ NEWS ITEMS ------------------------------- */

.newsbox {					
  margin-top: 1px;
	padding: 2px;
	font: normal 0.95em Arial, sans-serif;
	color: #012D50;  /*#222A00;*/
	background-color: #F2F3F9;/*#E0DFE3;*/
	border: 1px solid #8BA4D5;
	/*
	border-left: 1px solid #E0DFE3;
	border-top: 1px solid #E0DFE3;
	border-right: 1px solid #716F64;
	border-bottom: 1px solid #716F64;
	*/
}
.newsbox p {
  margin: 0;
	margin-top: 0.8em;
}
.newsbox a {
  text-decoration: underline;  
}
/* moz
div.newsbox ul {
  text-indent: -1.5em;
	padding-left: 1.5em;
	list-style-type: square; 
}
div.newsbox ul li {
  padding-left: -1em; 
	text-indent: 0em;
}
*/
div.newsbox ul {
	margin-left: 1em;
	list-style-type: square; 
}
div.newsbox ul li {
	margin-left: 0.25em; 
	padding-left: -1em;
}
.newsbox-title {
  text-align:left; 
	font-weight:bold;
	color: #1F3A52;
}
.newsbox-footer {
  text-align:right; 
	font-weight:normal;
	font-style: italic;
	font-size: 0.9em;
	color: #DB6004;
}


/* ------------------------------------------------------------------------- */

.lead {
  margin-top: 0;
	padding-top: 0.5em;
  color: #396E9A;
}
.lead:first-letter {
	font-family: sans-serif;
  font-weight: bold;
  font-size: 1.4em;
	float:left;
}
.photo {
  float: right;
  margin: 0;
  margin-bottom: 2px;
  border: none; 
  background-color: #396E9A;
  color: white;
}
.photo-title, .map-title, .figure-title {
  color: white;
  font-size: 0.8em;
  text-align: center;
}
.figure-title {
  color: #330066;
  font-size: 14px;
  font-weight: bold;
}
.map, .figure {
  float: none;
  margin: 0;
  margin-bottom: 2px;
  border: none;  
  color: white;
  text-align: center;
}
.clear {
  clear: both;
}
.centre {
  clear: both;
  text-align: center;
}
.contrast {
  color: white;
  font-size: 0.8em;
}
a.readmore {
 font-size: 0.9em;
 text-decoration: none;
}
a:hover.readmore {
 text-decoration: underline;
}
.topright {
  margin: 0;
  float: right;
}

/* -------------------------- Form Elements -------------------------------- */

#formStyle {
  border: solid #396E9A 1px;
  background-color: #C0DBF0;
	width: 90%;
}
.formLabel {
  color: #1F3A52;
	text-align: left;
	font-weight: bold;
}
.button {
	font-family: Verdana, Arial, Helvetica, sans-serif ;
	color: #C0DBF0;
	font-weight: bold;	
	display: block;
	border: #E0DFE3 1px solid;
	background-color: #396E9A;
	padding: 2px;	
	text-align: center;
	cursor: hand;
	font-size: 0.9em;
}
.input {
	font-family: Arial, Helvetica, sans-serif;
	height: 16px;
	font-size: 1.0em;
	color: #396E9A;
}

/* --------------------------- MAIN NAVIGATION (LHS) ----------------------- */

ul#mainnav {
  font-family: Verdana, sans-serif;
	list-style: none;
	margin: 0px;
	padding: 0px;
  padding-top: 0px;
	background-color: #FEFFFA;
	}
		
ul#mainnav li {
	display: block;
  margin-bottom: 0px;
	}

ul#mainnav li a {
  font: 1.0em Arial, sans-serif;
	font-weight: normal;		
	/* If you get an unwanted gap after your a block (IE-Win) try increasing the line height		*/
	display: block;
	margin: 0px 0px 0px 0px;
	padding: 3px 6%;
	/*background-color: #0F0D7A; !*/
	background-color: #E0DFE3;
	border: 1px solid #CCCCCC; /*#E0DFE3 #1F3A52*/
	border-top: none;
	border-left: none;
	color: #1F3A52;
	text-decoration: none;
	width: 96%;				/* 	Causes Problems in IE5-Mac and Netscape/Mozzilla - see next fix		*/
}

div#topcontent ul li.first {
	border-top: 0px none;
}

ul#mainnav li a:hover {
  /*
	background-color: #396E9A;
  color: #fff;
	*/
	padding-left: 5px;
	padding-right: -5px;
}
	
ul#mainnav ul.subnav {
	margin: 0px;
	list-style: none;
	padding: 0px;
	border: 0px solid pink;
	}

ul#mainnav ul.subnav li {
	border-top: 0 none;
	border: 0px solid green;
	padding-left: 0.5em;
  margin: 0px;
	}

ul#mainnav ul.subnav li a {
	padding: 1%;
	margin: 0px;
	font: bold 0.7em /1.5 verdana, sans-serif;
	color: #1713B7;
	background-color: transparent;
	border: 0px solid yellow;
	}

ul#mainnav ul.subnav li a:hover {
  /*
  color: #0F0D7A;
	background-color: #FDC499;
  */
  color: white;
  background-color: #1F3A52;
	text-decoration: none;
  border: 0px solid #FDC499;
	}
  
#contact a {
  color: #F2F2F2;
	text-decoration: none;
  border: 0;
	}   
  
#contact a:hover {
	text-decoration: underline;
  border: 0;
}  


/* Removes default top margin from left/right column paragraphs in Mozilla */
div > p {
  margin-top: 0;
}

a:link.colHeader, a:link.colHeaderRight,
a:hover.colHeader, a:hover.colHeaderRight {
  color: #FFF;
	font-size: 1.05em;
}
a:link.colHeaderRight, a:hover.colHeaderRight {
	text-align: right;
}
a:hover.colHeaderRight, a:hover.colHeaderRight {
	text-decoration: underline;
}

/* ================================== buttons ============================== */

a.button {
  font-family: Verdana, Arial, Helvetica, Geneva, Swiss, sans-serif;
  font-size: 0.8em;
  text-decoration: none;
	color: #396E9A;
  background-color: #D7D7D7;
	padding-left: 4px;
	padding-right: 4px;
  padding-top: 0px;
  padding-bottom: 0px;
	border-left: 1px solid #D4D9DD;
	border-top: 1px solid #D4D9DD;	
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;	
	width: 50px;
}
a.button:hover {
  color: black;
  background-color: #EEEEEE;
  text-shadow: black 0.5em 0.5em 0.5em;
}
a.button:active {
  background-color: #EEEEEE;
	border-right: 1px solid #D4D9DD;
	border-bottom: 1px solid #D4D9DD;	
	border-left: 1px solid #000;
	border-top: 1px solid #000;		
}

.map {
	font-style: normal;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	line-height: normal;
	font-variant: normal;
	font-size: medium;

}

.map-title {
	color: #FFFFFF;
	font-size: 0.9em;
	font-weight: bold;
	background-color: #CCCCCC;

 }