/* 
Siyakhula Main Stylesheet
$Id: screen.css 168 2006-02-09 08:07:33Z gareth $
*/

/* Main layout */

body {
	margin: 0;
	padding: 0;
	text-align: center; 
	min-width: 720px;
	font-size: 76%;
	font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Trebuchet, Tahoma, Verdana, Helvetica, Arial, sans-serif;
	line-height: 1.6em;
	background: #FFF;
}

#page {
	padding: 0;
	margin: 0 auto;
	width: 720px; 
	text-align: left;
	position: relative;
}

#header {
	margin: 0;
	margin-top: 1em;
	padding: 0;
	background: url("../images/header_back.jpg") top left no-repeat;
	height: 140px;
	padding-top: 2px;
}

#header img {
	border: 0;
	margin: 0;
	padding: 0;
}

#header a {
	margin: 0;
	padding: 0;
	display: block;
}

#header a:hover {
	background: #FFF;
}

#blurb {
	position: absolute;
	right: 0;
	top: 110px;
	color: #5FB754;
	margin-right: 20px;
	float: right;
	font-size: large;
}

#footer {
	border-top: 1px dashed #CCC;
	padding: 1em 0;
	font-size: 90%;
	clear: both;
}

#contentholder {
	position: relative;
	margin-top: 3em;
	margin-left: 250px;
}

* html #contentholder {
	z-index: -1;
}

#content {
	text-align: justify;
}

#leftside {
	float: left;
	margin-top: 1em;
}

* html #leftside {
	margin-top: 2em;
}

#leftside h2 {
	font-size: 150%;
	margin-bottom: -0.3em;
}

/* Navigation */

#nav {
	margin: 0 0 1em 0;
	background: #B2D44C;
	border-bottom: 3px solid #739D2F;
}

/* Float fix */
#nav:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html #nav { height: 1%; }
/* End hide from IE-mac */

/* End float fix */

#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav ul li {
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
}

#nav a {
	margin: 0;
	padding: 5px 1em 5px 1em;
	float: left;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
}

/*sub item seleced color */
#nav a.selected {
	background: #57722C;
}

#nav a.first {
}

#nav a:hover {
	background: #739D2F;
}

ul.depth1 { /* second-level lists */
	display: none;
	position: absolute;
	top: 2.2em;
	left: 0;
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
	display: block;
}

li:hover a, li.over a {
	background: #57722C;
	color: #FFF;
}

ul.depth1 {
	width: 150px;
}

ul.depth1 li {
	float: none;
	width: 100%;
	z-index: 100;
}

ul.depth1 a {
	display: block;
	float: none;
	width: 100%;
	/*sub list background*/
	background: #B2D44C;
	border-bottom: 1px solid #57722C;
	border-left: 1px solid #57722C;
	border-right: 1px solid #57722C;
}

ul.depth1 a.first {
	border-top: 1px solid #57722C;
}

/* Formatting */

p {
	line-height: 1.7em;
}

h1, h2, h3 {
}

h1 {
	color: #444;
	line-height: 27px;
}

h1#pagetitle {
	font-size: 300%;	
}

h4
{
	font-style: italic;
    font-weight: bold;
    font-size: 150%;
    color: #2AA5DE;
}

a img {
	border: 0 none;
}

img.img_left {
	float: left;
	padding: 1em 3em 1em 0;	
}

img.img_right {
	float: right;
	padding: 1em 0 1em 1em;	
}

a {
	color: #B2D44C;
	font-weight: bold;
}

a:hover {
	color: #57722C;
}


/* contact page */

/* Contact us page */


.required
{
	color: #C00; 
}

input {
	font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
	font-size: 100%;
	border: 1px solid #BBB;
	width: 400px;
}

textarea {
	font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
	font-size: 100%;
	border: 1px solid #BBB;
	width: 400px;
}

input.button {
	font-weight: bold;
}

form .list label {
	display: block;
	margin: 0;
	padding: 0;
}

input.imagesubmit {
	width: 65px;
	height: 22px;
	border: 0;
	padding: 0;
	margin-top: 1em;
}

input.imagesubmit:hover {
	background: #EEE;
}


/* Image headers */

#imageheader {
	height: 200px;
	width: 700px;
	margin-top: -1em;
}

.page-home #imageheader {
	background: url("../images/back-home.jpg") top left no-repeat;	
}