/* ICT colors
	#00923F is our green, 
	#00a23f is complementary but subtly lighter, 
	#006d33 is complementary but darker,
	#228b22 is forest green, 
	#006400 is dark green, 
	#008000 is green 

	#fffff1 is a light cream, #ffffdf is a more visible cream
	
	#555 is a dark grey (e.g.for text)

	#fff is white

	Note: repeated gif images of a line create the variable width block, 
	e.g. behind headers, across the whole header etc.
*/

/* star hack - overrules different browser defaults for common elements ----- */

*
{
	margin: 0em;
	padding: 0em;
	height: 0.01%;
}

html>body * { height: auto; }

/* center website on wide screens - see margin,text-align reset in #container */

body
{
	text-align: center;
	font-family: verdana, tahoma, "trebuchet ms", sans-serif;
	font-size: 10pt;
	background-color: #fff;
	color: #555;
}

/* underlining links color -------------------------------------------------- */

a
{
	color: #00923F;
	text-decoration: underline;
}

a:hover
{
	text-decoration: none;
}


/* container ---------------------------------------------------------------- */

#container
{
	position: relative;
	min-width: 620px;  /* default: 760px */
	max-width: 900px;  /* default: 960px - divides well... */
	margin: 1em auto; /* widescreen webpage centering - 0px auto */
	text-align: left; /* IE hack - re-set 'body' declaration to avoid all text being centered... */
	background: #fff url('images/logo2_56px.png') 10px 40px no-repeat;
}

/* header ------------------------------------------------------------------- */

#header
{
	position: absolute;
	top: 0px;
	left: 120px;
	background: #00923F url('images/letter_key_129px.png') top right no-repeat;
	height: 129px; /* should match the image height */
	width: 86%;

}

#header h1
{
	position: absolute;
	top: 0.8em;
	left: 16px;
	font-size: 2.5em;
	font-weight: normal;
	color: #fff;
	/* width not set - let it run across any graphics etc */
}

#header h2
{
	position: absolute;
	top: 1em;
	left: 16px;
	font-size: 1.0em;
	font-weight: normal;
	color: #fff;
}

#header p 
{
	position: absolute;
	top: 6em;
	left: 16px;
	font-size: 1.0em;
	font-weight: bold;
	color: #fff;
	width: 70%;

	text-align: center;
	
}

#header a
{
	color: #fff;
	text-decoration: none;
}

/* navigation menu ---------------------------------------------------------- */

#nav
{
	width: 110px;
	background-color: #00a23f;
	position: absolute;
	top: 129px;
	left: 10px;
	padding: 0 0 0 0;
}

#nav ul
{

	list-style: none;
}

#nav li
{
	
	margin-bottom: 0em;
	text-align: left;

}


#nav li a
{
	color: #fff;
	background-color: #00923f;
	text-decoration: none;
	padding: 10px;
	width: 90px;
	display: block;
	/* border: 0.1em solid #006d33; */
	
}



#nav li a:hover
{
	background-color: #006d33;
}

#nav ul ul li a
{
	background-color: #00a23f;
	padding: 5px 0px 5px 20px;
	width: 90px;
}


/* content ------------------------------------------------------------------ */

#content
{
	line-height: 1.2em;
	padding-top: 129px; /* allows space for the header */
	padding-left: 120px; /* allows space for the nav menu */
}

#content p
{
	margin-bottom: 1.5em;
}

/* headings -- when there's a heading, put shading hdr_shade.gif behind it... */
#content h2,h3,h5,h6
{
	width: 100%;
	position: relative;
	left: -14px;
	right: -14px;
	margin: 0em -22px 1.2em 0em;
	color: #333;
	padding: 1.1em 14px 0.0em 14px;
	font-size: 1.1em;
	background: #fff url('images/hdr_shade.gif') top left repeat-x;
}

/* heading plus span places graphic (e.g. a rounded corner) to the right */

#content h2 span, #content h3 span
{
	position: absolute;
	top: 0em;
	right: 0em;
	background: #fff url('images/rrnd.gif') top right no-repeat;
	width: 16px;
	height: 28px;
}


#content ul, ol
{
	margin-bottom: 1.5em;
	padding-left: 1em;
}

.slist
{
	font-size: 0.8em;
}

.more
{
	text-align: right;
}

/* Rounded corner text box, h4 header --------------------------------------- */

/* set the image to use and establish the lower-right position */ 
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h4
{
 background: transparent url('images/roundbox.png') no-repeat bottom right; 
} 

.cssbox 
{
 width: 275px !important; /* intended total box width - padding-right(next) */
 width: 260px; /* IE Win = width - padding */ 
 padding-right: 15px; /* the gap on the right edge of the image (not content padding) */ 
 margin: 20px auto; /* use to position the box */ 
} 

/* set the top-right image */ 
.cssbox_head 
{
 background-position: top right; 
 margin-right: -15px; /* pull the right image over on top of border */ 
 padding-right: 40px; /* right-image-gap + right-inside padding */ 
} 

/* set the top-left image */ 
.cssbox_head h4
{
 background-position: top left; margin: 0; /* reset main site styles*/ 
 border: 0; /* ditto */ 
 padding: 25px 0 15px 40px; /* padding-left = image gap + interior padding ... no padding-right */ 
 height: auto !important; height: 1%; /* IE Holly Hack */ 
} 

/* set the lower-left corner image */ 

.cssbox_body 
{
 background-position: bottom left; margin-right: 25px; /* interior-padding right */ 
 padding: 15px 0 15px 40px; /* mirror .cssbox_head right/left */ 
} 

/* contact_box -------------------------------------------------------------- */

.contact_box
{
	border: medium double #00923f;
	padding: 5px;
}

.photo
{
	position:relative;
	padding: 5px 15px 5px 5px;
	float: left;
}



#content blockquote
{
	border: dashed 1px #BFB793;
	background: #FFFEFB url('images/yell_line.gif') top left repeat-x;
	padding: 1em;
	margin-bottom: 1.5em;
}

#content blockquote p
{
	margin-bottom: 0em;
}

#content table
{
	margin-bottom: 1.5em;
}

#content table th
{
	text-align: left;
	font-weight: bold;
	padding: 0.5em;
}

#content table td
{
	padding: 0.5em;
}

#content table tr.rowA
{
	background: #FDFEFE url('images/tbl_line.gif') top left repeat-x;
	color: inherit;
}

#content table tr.rowB
{
	background: #FFFEFC url('images/tbl_line2.gif') top left repeat-x;
	color: inherit;
}

/* content-main ------------------------------------------------------------- */

#content-main
{
	float: left;
	width: 35%;
	padding: 1.5em 16px 1.5em 2.5em;
}


/* content-sidebar ---------------------------------------------------------- */

#content-sidebar
{
	float:right;
	width: 47%;
	padding: 1.5em 16px 1.5em 16px;
}


/* footer ------------------------------------------------------------------- */

/* the .gif creates a shaded line */
#footer
{
	clear: both;
	padding: 1em 1em 2em 1em;
	background: #fff url('images/ftr_shade.gif') bottom left repeat-x;
	font-size: 0.8em;
}

.footer-center
{
	color: #00923f;
	font-weight: bolder;
	text-align: center;
}

.footer-left
{
	float: left;
	text-align: left;
}

.footer-right
{
	float: right;
	text-align: right;
}