/* @group default Joomla styles */
/*
*	You can can the default Joomla styles here
*	if you haven't already added specific style
*	rules in "style.css". If you have already added
*	specific style rules to "style.css" you will be
*	over-riding those with the styles you declare
*	below.
*/
div.componentheading {}
div.contentpane {}
div.contentdescription {}
td.sectiontablefooter {}
td.sectiontableheader {}
a.category {}
td.sectiontableentry1 {}
td.sectiontableentry2 {}
form#selectForm {}
table.contentpane {}
td.contentheading {}
form#emailForm {}
input#contact_name {}
label#contact_emailmsg {}
input#contact_email {}
input#contact_subject {}
label#contact_textmsg {}
textarea#contact_text {}
input#contact_email_copy {}
form.form-validate {}
div.contact_email {}
input.inputbox {}
input.required {}
input.validate-email {}
textarea.inputbox {}
textarea.required {}
button.button {}
button.validate {}
span.hasTip {}
hr#system-readmore {padding:0px; margin:0px;}
form#jForm {}
ul#archive-list {}
div#navigation {}
li.row {}
h4.title {}
h5.metadata {}
span.created-date {}
span.author {}
div.intro {}
div.contentpaneopen_edit {}
table.contentpaneopen {}
a.contentpagetitle {}
td.buttonheading {}
span.small {}
td.createdate {}
td.modifydate {}
a.readon {color:#3399FF;}
span.article_separator {}
input#title {}
input#created_by_alias {}
input#publish_up {}
input#publish_down {}
textarea#metadesc {}
textarea#metakey {}
table.adminform {}
td.key {}
img.calendar {}
input#alt {}
table.blog {}
td.article_column {}
div.blog_more {}
a.blogsection
td.contentdescription {}
span .article_separator {}
td.componentheading {}
form#poll {}
table.pollstableborder {}
th.sectiontableheader {}
td.smalldark {}
span.highlight {}
table.searchintro {}
input#search_searchword {}
/*input#area_{VALUE} {} /* Value is set programatically. Replace {VALUE} with the ID VALUE of the input you want to target */
input.button {}
form#login {}
form#josForm {}
label#namemsg {}
input#name {}
label#usernamemsg {}
input#username {}
label#emailmsg {}
input#email {}
label#pwmsg {}
input#password {}
label#pw2msg {}
input#password2 {}
div.message {}
form.josForm {}
label.hasTip {}
input#password1 {}
input.validate-password {}
input#token {}
input#name {}
form#adminForm {}
input#jformtitle {}
input#jformurl {}
textarea#jformdescription {}
table#explain-sql {}
table.Table {}
td.TD {}
div#keepAliveLayer {}
/*input#cb{ROW_NUMBER} {} /* Value is set programatically. Replace {ROW NUMBER} with the Row Number of the input checkbox you want to target */
dl.tabs {}
div.pane-sliders {}
div.panel {}
h3.jpane-toggler  {}
h3.title {}
div.jpane-slider  {}
div.content {}
table.paramlist {}
table.admintable {}
td.paramlist_description {}
td.paramlist_key {}
td.paramlist_value {}
div.toolbar {}
#search {}
input.text_area {}
select.inputbox {}
span.breadcrumbs  {}
span.pathway {}
/*button#trigger_{ID} {} /* Value is set programatically. Replace {ID} with the ID number of the button you want to target */
div.expander {}
/*input#{NAME} {} /* Value is set programatically. Replace {NAME} with the ID name of the input you want to target */
div#overDiv {}
a.tooltip {}
/*form{FORMNAME} {} /* Value is set programatically. Replace {FORMNAME} with the name of the form you want to target */
link#luna-tab-style-sheet {}
/*div#{PANEID} {} /* Value is set programatically. Replace {PANEID} with the PANEID of the div you want to target */
div.tab-page {}
h2.tab {}
div.bannergroup {}
div.bannerheader {}
div.banneritem {}
div.clr {}
div.bannerfooter {}
a.pathway {}
table.moduletable {}
ul.newsfeed {}
ul.latestnews {}
li.latestnews {}
a.latestnews {}
input#mod_login_username {}
input#mod_login_password {}
input#mod_login_remember {}
/*li#{ITEM ID} {} /* Value is set programatically. Replace {ITEM ID} with the ITEM ID of the list liem you want to target */
span.separator {}
ul#mainlevel {}
ul#sublevel {}
ul.mostread {}
li.mostread {}
a.mostread {}
table.poll {}
ul.relateditems {}
input#mod_search_searchword {}
div.search {}
ul.sections {}
/* @end */

/* 
	-- INITIAL --
	by Eric Meyer - http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ 
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img,
a img {border: 0px;}
/* 
	-- End INITIAL --
	v2.1, by Faruk Ates - www.kurafire.net
	Addendum by Robert Nyman - www.robertnyman.com 
*/
/* @group General site layout */
body {margin: 0; padding: 0;text-align: center;}
.left {float: left;}
.right {float: right;}
a.right {color:#efefef;}
.hidden { display: none; }
div.inside {margin:10px 10px 10px 10px;} /* we add margin or padding for the main body column here rather than above so as not to break the layout */
	
div#page {
	margin: 0 auto;
	padding: 0;
	width: 966px;
} /* we want to center this div for browsers that understand so we have an auto declaration for the left and right margin */ 

	div#backtotoplink a {float:right}
/* @end general site layout */

/* @group Header */
div#header {
	background: url(../images/header.jpg) repeat-x;
	margin: 0;
	padding-top: 10px;
	padding-right: 25px;
	height: 140px;
	border-bottom: 2px solid #fccb3f;
}
a#sblogo {
	position: relative;
	left: 40px;
	/*top: 10px;*/
	display: block;
	width: 225px;
	height: 130px;
	background: transparent url(../images/sblogo09.png) no-repeat 0 0;
}
a#tagline {
	position: absolute;
	left: 460px;
	top: 110px;
	display:block;
	width: 499px;
	height: 31px;
	background: transparent url(../images/tagline09.png) no-repeat 0 0;
}
div#user10 {
	position: absolute;
	top: 0px;
	left: 540px;
	width: 360px;
	height: 102px;
}

/* -- Access links -- */
	ul#access {list-style-type: none;}
	ul#access:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
	ul#access li{float:left; margin:0; padding:2px 5px 3px 5px;}

/* -- Branding link container -- */		
	div#branding {float: left; width: 40%; margin: 0; padding: 10px 0 10px 20px; text-align: left;} /* we set the width to 40% to allow for the left padding on this div and the right padding on the top-module div below. 10 pixels top padding, 0 pixels right padding, 10 pixels bottom padding and 20 pixels left padding */

/* -- Top module container -- */			
	div#top-module {
		background-color: #013F67;
		clear:both; 
		float: left; 
		margin: 0; 
		padding: 0; 
		text-align: left;
		border-bottom: 2px solid #fccb3f;
	} 

/* -- Breadcrumbs container -- */	
	div#breadcrumbs {clear:both; float:left; margin:0 0 1em 0; padding:0;} /* beacuse the above divs have widths equalling 89% and 40pixels horizontal padding (left padding + right padding) there may be a gap between those two modules. We want to ensure that the breadcrumbs module clears both of these modules */

/* @end header */

/* @group Maincontent */
	#BodyContent {
		padding: 0px; 
		margin: 0px; 
		text-align: left;
		clear:both;
			background: url(../images/mainbody-bg.jpg) repeat-y;
		}
	#LoadFirst {
		float: left;
		}

/* The #MiddleCol container holds the mainbody content. We load this container before we load the left column for SEO Source Ordering purposes.
We set the width of this container based upon the content layout logic. (see template_config.php) */
	#MiddleCol {
	padding: 15px 0px 0px 0px;
}
	.mc-both {float: right;}
	.mc-left-only {float: right;}
	.mc-right-only {float: left;}
	.mc-wide {float: left;}

/* -- Teaser Modules -- */
/* To work out the widths of the teaser modules we are going to have to know how many are published in a row (upto four modules per row).
See includes/template_config.php */ 
	div.count1 {width:100%; float:left;}
	div.count2 {width:50%; float:left;}
	div.count3 {width:33%; float:left;}
	div.count4 {width:25%; float:left;}
			
/* this container holds the left column content. We load this container before we load the right column for SEO Source Ordering purposes. */
	#left {float: left; background:#f5f5f5; width:190px;}
	#left div.inside {padding-left:5px; margin:10px 10px 10px 0px;} /* we add margin or padding for the left cloumn here rather than above so as not to break the layout */

/* this container holds the right column content. */
	#right {
		float: right;
		/*background:gray;*/
		width:200px;
		color:#efefef;
		}
	#right a{
		color:#f6f6f6;
	}
	#right div.inside {
	width: 180px;
	margin:10px 10px 10px 10px;
	} 
	/* we add margin or padding for the right cloumn here rather than above so as not to break the layout */

/* @end Maincontent */
/* @group Footer*/
	#footer {
		text-align:center;
		background-color: #03629f;
		color:#efefef;
		font-size:9px;}
	#footer div.inside {margin:10px 0px 10px 10px;} /* we add margin or padding for the footer here rather than above so as not to break the layout */
/* @end footer */

div#user1{
	background: url(../images/user1-mod.png) no-repeat;
	margin: 0px;
	padding: 0px;
}
div#user2{
	background: url(../images/user2-mod.png) no-repeat;
	margin: 0px;
	padding: 0px;
}
div#user4{
	background: url(../images/user4-mod.png) no-repeat;
	margin: 0px;
	padding: 0px;
}
/* @group Search form */
div.search input { padding:3px  5px; }
div.search input.button { margin: 0 10px 0 5px; }
/* @end search module */

/* @group login module */
form#form-login { margin:0; padding:0; }
	form#form-login p { margin:0; padding:0; }

	form#form-login input#modlgn_username,
	form#form-login input#modlgn_passwd { margin:0; padding:3px  5px; }

	form#form-login input.button { }
/* @end login module */

/* @group Moduletable headers */
.moduletable h3, .moduletable h3 a { 
	text-align:center;
	color:#999;
	font-weight: bold;
	text-decoration: none;
	margin:0 0 0 0; 
	padding: 0; }
.moduletable h3 a:hover{ 
	text-decoration: underline;
}

.moduletable_userRow h3, .moduletable_userRow h3 a { 
	text-align:center;
	color:#fff;
	font-weight: bold;
	text-decoration: none;
	margin:0 0 0 0; 
	padding: 4px 0 0 0; }
.moduletable_userRow h3 a:hover{ 
	text-decoration: underline;
}
/* @end moduletable headers */

/* @group Round corner modules */
div.module { margin:auto auto 1em auto;  padding:0; }
	div.module div { margin:0; padding:1em 0 0 0; }
		div.module div div { margin:0; padding:0 0 0 7px; }
			div.module div div div { margin:0;  padding:0 0 0.5em 0; }
				div.module div div div div { margin:0; padding:0; }
					div.module div div div div p { margin:0; padding:0; line-height:1.6; background:none; }
/* @end Round corner modules */

/* @group Left column modules */
div#left .module,
div#left .moduletable { margin:0; padding:0 0 25px 0; }

div#left h3 { padding:0; }
div#left .moduletable h3, .moduletable h3 a { 
	text-align:left;
	color:#999;
	font-weight: bold;
	text-decoration: none;
	margin:0 0 0 0; 
	padding: 0; }
	div#left .moduletable h3 a:hover{ 
	text-decoration: underline;
}

div#left ul { list-style-type:none; }
	div#left li { margin:0 0 0 20px; padding:0; }
	div#left p { margin:0 0 0 7px; padding:0 0 10px 0; }
	div#left a { }
/* @end left column modules */

/* @group Top-module */
div#top-module .module,
div#top-module .moduletable { margin:0; padding:0; }

	div#top-module h3 { padding:0; }
	div#top-module ul { list-style-type:none; }
		div#top-module li { margin:0 0 0 20px; padding:0; }
		div#top-module p { margin:0 0 0 7px; padding:0 0 10px 0; }
		div#top-module a { }
/* @end Top-module */

/* @group Top-module */
div#top-module .module_nav,
div#top-module .moduletable_nav { margin:0; padding:0; }

	div#top-module_nav h3 { padding:0; }
	div#top-module_nav ul { list-style-type:none; }
		div#top-module_nav li { margin:0 0 0 20px; padding:0; }
		div#top-module_nav p { margin:0 0 0 7px; padding:0 0 10px 0; }
		div#top-module_nav a:link, div#top-module_nav a:visited { 
			text-decoration:none;
			font-size: .8em;
			font-weight:normal;
			color: #fccb3f;
		}
		div#top-module_nav a:link, div#top-module_nav a:visited { 
			text-decoration:none;
			font-size: .8em;
			font-weight:bold;
			color: #FFFFFF;
		}
/* @end Top-module */

/* @group Right column modules */
div#right .module,
div#right .moduletable { margin:0; padding:0px; }

	div#right h3 {
	padding: 0px;
	color: #f3f3f3;
	}
	div#right ul { list-style-type:none; }
		div#right li { margin:0 0 0 0px; padding:0; }
	/*div#right p { margin:0 0 0 7px; padding:0 0 10px 0; }*/
	div#right a { }
	
	div#right .chronoform{
		width:180px;
	}
	div#ChronoContact_SB-Email {
		position: relative; 
		width: 180px; 
		float:left;
		padding-left:0px;
		margin-left: 0px;
	}
		
/* @end right column modules */

/* @group Top user modules */
#top-user-modules .moduletable        { padding-top: 5px; }
/* @end top user modules */

/* @group Bottom user modules */
#bottom-user-modules .moduletable        { padding-top: 15px; }
/* @end Bottom user modules */

/*
*	CSS based dropdown and flyout menus
*	You shouldn't need to edit anything in this file
*	as the rules contained herein only govern the
*	dropdown behaviour of the top menu's submenus and 
*	the flyout behaviours of the left and right menus.
*/

/* @group Horizontal dropdown suckerfish menu */
#nav {
	position: relative;
	margin: 0;
	margin: 0 auto;
	z-index: 900;
	float: left;
	border: 0px;
}
	#nav ul {padding:0; margin:0;list-style-type: none;}
		#nav ul li {float:left; 
			margin:0px; 
			position:relative;
			color: #fccb3f;
			}
			#nav ul li a, #nav ul li a:visited {
				display:block; 
				text-decoration:none;
				overflow:hidden;
				}
				#nav ul li ul {display: none;}
				#nav ul li:hover ul, #nav ul li.iehover ul {display:block; position:absolute;}/* This rule tells our submenu to appear on hover over parent */
						#nav ul li:hover ul li ul, #nav ul li.iehover ul li ul {display: none;}
							#nav ul li:hover ul li a, #nav ul li.iehover ul li a {display:block;}
								#nav ul li:hover ul li:hover ul, #nav ul li.iehover ul li.iehover ul {display:block; position:absolute;}/* This rule tells our sub submenu to appear on hover over parent*/
/* @end */

/* @group Left Column Vertical fly-out suckerfish menu */
#left ul#mainlevel li, 
#left ul.menu li {width: 100%;}
	#left ul#mainlevel li a:link, 
	#left ul#mainlevel li a:visited, 
	#left ul.menu li a:link, 
	#left ul.menu li a:visited {width: 100%;display:block;}

/* Root = Vertical, Secondary = Vertical */
#left ul#mainlevel,
#left ul.menu,
	#left ul.menu li,
		#left ul.menu ul {width: 100%; /*For KHTML*/
}
#left ul#mainlevel:after,
#left ul.menu:after /*From IE 7 lack of compliance*/{clear: both;display: block;font: 1px/0px serif;content: ".";height: 0;visibility: hidden;}
	#left ul#mainlevel li, 
	#left ul.menu li {float: left; /*For IE 7 lack of compliance*/display: block !important; /*For GOOD browsers*/display: inline; /*For IE*/position: relative;}

/* Root Menu */
		#left ul#mainlevel a, 
		#left ul.menu a {display: block;height: auto !important;height: 1%; /*For IE*/}

/* Submenu Initialisation */					
	#left ul.menu ul,
		#left ul.menu ul ul,
			#left ul.menu ul ul ul {display: none;position: absolute;z-index:900;}
/* Do Not Move - Must Come Before display:block for Gecko */
/* Hide sub submneus on page load */
			#left ul.menu li:hover ul ul,
				#left ul.menu li:hover ul ul ul,
			#left ul.menu li.iehover ul ul,
				#left ul.menu li.iehover ul ul ul {display: none;}

/* Display submenus on hover over parent item */
	#left ul.menu li:hover ul,
		#left ul.menu ul li:hover ul,
	#left ul.menu ul ul li:hover ul,
		#left ul.menu li.iehover ul,
	#left ul.menu ul li.iehover ul,
		#left ul.menu ul ul li.iehover ul {display: block;}
/* @end */

/* @group Right Column Vertical fly-out suckerfish menu */
#right ul#mainlevel li, 
#right ul.menu li {width: 100%;}
	#right ul#mainlevel li a:link, 
	#right ul#mainlevel li a:visited, 
	#right ul.menu li a:link, 
	#right ul.menu li a:visited {width: 100%;display:block;}

/* Root = Vertical, Secondary = Vertical */
#right ul#mainlevel,
#right ul.menu,
	#right ul.menu li,
		#right ul.menu ul {width: 100%; /*For KHTML*/}

#right ul#mainlevel:after,
#right ul.menu:after /*From IE 7 lack of compliance*/{clear: both;display: block;font: 1px/0px serif;content: ".";height: 0;visibility: hidden;}
	#right ul#mainlevel li,
	#right ul.menu li {float: left; /*For IE 7 lack of compliance*/display: block !important; /*For GOOD browsers*/display: inline; /*For IE*/position: relative;}

/* Root Menu */
		#right ul#mainlevel a,
		#right ul.menu a {display: block;height: auto !important;height: 1%; /*For IE*/}
					
/* Submneu Initialisation */
	#right ul.menu ul,
		#right ul.menu ul ul,
			#right ul.menu ul ul ul {display: none;position: absolute;z-index:900;}
/* Do Not Move - Must Come Before display:block for Gecko */
/* Hide sub submenus on page load */
				#right ul.menu li:hover ul ul,
					#right ul.menu li:hover ul ul ul,
				#right ul.menu li.iehover ul ul,
					#right ul.menu li.iehover ul ul ul {display: none;}

/* Display submenus on hover over parent item */
	#right ul.menu li:hover ul,
		#right ul.menu ul li:hover ul,
			#right ul.menu ul ul li:hover ul,
	#right ul.menu li.iehover ul,
		#right ul.menu ul li.iehover ul,
			#right ul.menu ul ul li.iehover ul {display: block;}
/* @end */

/* @group Horizontal dropdown suckerfish menu */
#bottom-menu {
	position: relative;
	margin: 0;
	margin: 0 auto;
	z-index: 900;
	float: left;
	border: 0px;
}
	#bottom-menu ul {padding:0; margin:0;list-style-type: none;}
		#bottom-menu ul li {float:left; 
			margin:0px; 
			position:relative;
			color: #fff;
			}
			#bottom-menu ul li a, #bottom-menu ul li a:visited {
				display:block; 
				text-decoration:none;
				overflow:hidden;
				}
				#bottom-menu ul li ul {display: none;}
				#bottom-menu ul li:hover ul, #nav ul li.iehover ul {display:block; position:absolute;}/* This rule tells our submenu to appear on hover over parent */
						#nav ul li:hover ul li ul, #nav ul li.iehover ul li ul {display: none;}
							#nav ul li:hover ul li a, #nav ul li.iehover ul li a {display:block;}
								#nav ul li:hover ul li:hover ul, #nav ul li.iehover ul li.iehover ul {display:block; position:absolute;}/* This rule tells our sub submenu to appear on hover over parent*/
/* @end */

/* @group Basic typography */
body {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 76%;
	line-height: 1.8em;
	color: #666;
	
	} 
	/* we set the font size to 76% to compensate for different browsers and operating systems. 76% tends to look like 12px on most screens and we set the line height equalt to the height of an uppercase "M" character */

	div {font-size: 1em;}
	div#page {text-align: center;}
	div#page-wrapper {width: 904px;}
	
		div#header {
			text-align: left;
			}

			/* this declaration is for ie6 only, if you need to set specific font styles for the newsflash module and you have it published
			in the Joomla default top position then you will need to set them here */
			div#top-module table.contentpaneopen {}
/* @end Basic typography */

/* @group Links */
			a, a:link, a:visited {color:#3399FF;text-decoration:none;font-weight:bold;}
			a:hover {text-decoration: underline;}
/* @end links */

/* @group Headings */
			h1,	.componentheading  {
				font-size: 1.8em;
				font-weight: bold;
				color:#777;
				margin-top: 0em;
				margin-bottom: 0em;
				}
			h2,	.contentheading, .contentpagetitle, a.contentpagetitle {
				font-size: 16px;
				margin: 1.2em 0em 1.2em 0em;
				font-weight: bold;
				color:#999;
				}
			a.contentpagetitle:hover{color:#3399FF; text-decoration:underline;}
			h3 {font-size: 1.4em;margin: 1.2em 0em 1.2em 0em;font-weight: bold;color:#999;}
			h4 {font-size: 1.2em;margin: 1.2em 0em 1.2em 0em;font-weight: bold;color:#999;}
			h5 {font-size: 1.0em;margin: 1.2em 0em 1.2em 0em;font-weight: bold;color:#999;}
			h6 {font-size: 0.8em;margin: 1.2em 0em 1.2em 0em;font-weight: bold;color:#999;}
/* @end headings */

/* @group Text styles */
			p {font-size: 1.0em;line-height: 1.8em;margin: 1.2em 0em 1.2em 0em;}
			strong, b {font-weight: bold;}
			em, i {font-style:italic;}
			blockquote {border-left:10px solid #ddd;margin-left:10px;}
			pre {font-family: monospace;font-size: 1.0em;}
			code {font-family: "Courier New", Courier, monospace;font-size: 1em;white-space: pre;}
			.small,
			.createdate,
			.modifydate {font-size: 85%;line-height: 90%;}
/* @end text styles */

/* @group Lists */
			ol, ul, li {font-size: 1.0em;line-height: 1.8em;margin-top: 0.2em;margin-bottom: 0.1em;}
				li > p {margin-top: 0.2em;}
/* @end lists */

/* @group Tables */
			table {font-size: 1em;line-height: 1.8em;margin: 1.5em 0;padding: 0;}
			table caption {font-weight: bold;margin: 0 0 0 0;padding: 0 0 1.5em 0;}
				th {font-weight: bold;text-align: left;}
					td {font-size: 1em; vertical-align: top;}
					
			form table {font-size: 1.1em;}
			
				
/* @end tables */

/* @group Horizontal rules */
			hr {display: none;}
			div.hr {height: 1px;margin: 1.5em 10px;border-bottom: 1px dotted #000;}
/* @end horizontal rules */

/* @group Code presentation */			
	pre, code {font-family: monospace;font-size: 1.0em;}
	/*moz 1.0/1.1/1.2.1, net 7.0/7.01 make this way too small, but we're not going to go larger because monospace tends to run you into overflow pretty quick. prior moz and net are okay.*/
/* @end code presentation */

/*
* 	Other than setting the template's widths, in most cases this is the only stylesheet we should need to edit in order to build our custom Joomla 1.5.x template.
*/

/* @group logo image */

/* 	Uncomment this block if you are using a logo image in place of the site title */
/*
div#header h1 a:link,div#header h1 a:visited,div#header h1 a:hover,{background:url('../images/logo-image.png') left top no-repeat;height:100px;width: 50px;display: block;text-decoration: none;text-indent:-9000em;}			}
div#header h1 a:focus {outline: none;}
*/

/*	1. Set the background property url to the path of your logo image (relative to this css file). 
	2. Set the height to the height of your logo image. 
	3. Set the width to the width of your logo image.
	4. We set the display to block so that the region becomes clickable
	6. We set the text-decoration to none so that our logo image is not underlined even if our links are. 
	7. We set the text to indent by negative 9000ems to take it off our screen 
	8. We don't want an outline for our image upon focus (click) as the outline will try to extend 9000 ems to the left of our screen because of the text-indent rule 
*/
		
/* @end logo image */

/* @group Menus */
/* @group Horizontal dropdown suckerfish menu */

/* common styling */
#nav {
	background: #029f8e;
	border-bottom: 2px solid #fccb3f;
	padding-left: 5px;
}
#nav.menu{
	width: 906px;
}
	#nav ul {}
		#nav ul li {}
			#nav ul li a, #nav ul li a:visited {
	color: #C1E1F5;
	font-weight: bold;
	padding: 0 20px;
	height: 30px;
	/*border-right: 1px solid #b6b6b6;*/
	line-height: 30px;
}
			#nav ul li#current a, #nav a#active_menu-nav {
				color:#fccb3f;
				}
			#nav ul li:hover a, #nav ul li.iehover a {
				color:#ffffff;
				background:#9F4002;
				}
/* top level parent */
			#nav ul li.parent a:after {content: " +";}
			#nav ul li.parent li a:after {content: none;}
			
/* first sub-level list (tier 2 links) */
				#nav ul li ul {border-top:1px solid #b6b6b6;}
				#nav ul li:hover ul, #nav ul li.iehover ul {top:30px; left:-1px; width:200px;}
				#nav ul li:hover ul li a, #nav ul li.iehover ul li a {background:#029f8e;color:#333;width:200px;padding: 0px;text-indent:10px;border:1px solid #b6b6b6;border-top:0px;}
				#nav ul li:hover ul li:hover a, #nav ul li.iehover ul li.iehover a {background:#9F4002;color:#ffffff;}
/* first sub-level parent */
					#nav ul li li.parent a:after {content: " +";}
					#nav ul li li.parent li a:after {content: none;}

/* Second sub-level list (tier 3 links)*/
						#nav ul li:hover ul li ul, #nav ul li.iehover ul li ul {}
							#nav ul li:hover ul li a, #nav ul li.iehover ul li a {color:#333;}
							#nav ul li:hover ul li a:hover, #nav ul li.iehover ul li a:hover {color:#ff0000;}
							#nav ul li:hover ul li:hover ul, #nav ul li.iehover ul li.iehover ul {display:block; position:absolute; left:201px; top:-1px;}
/* second sub-level parent */
									#nav ul li li li.parent a:after {content: " +";}
									#nav ul li li li.parent li a:after {content: none;}
/* @end horizontal menu */
#bottom-menu {
	background: #fff;
}
#bottom-menu.menu{
	width: 906px;
}
	#bottom-menu ul {}
		#bottom-menu ul li {}
			#bottom-menu ul li a, #bottom-menu ul li a:visited {
			color:#fff;
			padding: 0 30px;
			height: 20px;
			/*border-right: 1px solid #b6b6b6;*/
			line-height: 20px;
}
			#bottom-menu ul li#current a, #bottom-menu a#active_menu-nav {
				color:#ffffff;
				}
			#bottom-menu ul li:hover a, #bottom-menu ul li.iehover a {
				color:#ffffff;
				background:#fff;
				}
/* top level parent */
			#bottom-menu ul li.parent a:after {content: " +";}
			#bottom-menu ul li.parent li a:after {content: none;}
			
/* first sub-level list (tier 2 links) */
				#bottom-menu ul li ul {border-top:1px solid #b6b6b6;}
				#bottom-menu ul li:hover ul, #bottom-menu ul li.iehover ul {top:30px; left:-1px; width:200px;}
				#bottom-menu ul li:hover ul li a, #bottom-menu ul li.iehover ul li a {background:#fff;color:#fff;width:200px;padding: 0px;text-indent:10px;border:1px solid #b6b6b6;border-top:0px;}
				#bottom-menu ul li:hover ul li:hover a, #bottom-menu ul li.iehover ul li.iehover a {background:#ffffff;color:#ffffff;}
/* first sub-level parent */
					#bottom-menu ul li li.parent a:after {content: " +";}
					#bottom-menu ul li li.parent li a:after {content: none;}

/* Second sub-level list (tier 3 links)*/
						#bottom-menu ul li:hover ul li ul, #nav ul li.iehover ul li ul {}
							#bottom-menu ul li:hover ul li a, #nav ul li.iehover ul li a {color:#fff;}
							#bottom-menu ul li:hover ul li a:hover, #nav ul li.iehover ul li a:hover {color:#fff;}
							#bottom-menu ul li:hover ul li:hover ul, #nav ul li.iehover ul li.iehover ul {display:block; position:absolute; left:201px; top:-1px;}
/* second sub-level parent */
									#bottom-menu ul li li li.parent a:after {content: " +";}
									#bottom-menu ul li li li.parent li a:after {content: none;}
/* @end bottom horizontal menu */
									
/* @group Left Column Vertical fly-out suckerfish menu */

#left ul.menu ul, 
	#left ul.menu ul ul, 
		#left ul.menu ul ul ul {background:#ffffff;list-style: none;}
	#left ul#mainlevel li, 
	#left ul.menu li {
	list-style: none;
	padding-left: 10px;
	margin: 0 0 0 15px;
	text-indent: 0px;
	width: 150px;
	background-color: #808080;
	border-bottom: 3px solid #f5f5f5;
}
		#left ul#mainlevel li a:link, 
		#left ul#mainlevel li a:visited, 
		#left ul.menu li a:link, 
		#left ul.menu li a:visited {
	color: #f3f3f3;
	font-weight: bold;
	padding: 0;
	width: 100%;
	text-decoration: none;
}
		#left ul#mainlevel li a:hover, 
		#left ul.menu li a:hover {text-decoration:underline;}
		#left ul#mainlevel li a#active_menu, 
		#left ul.menu li#current a {text-decoration:none;color:#B61D20;}
			#left ul.menu ul li {background:none;}

/* Root Menu */
		#left ul#mainlevel a, 
		#left ul.menu a {}
/* Root Menu Hover Persistence */
		#left ul.menu a:hover,
		#left ul.menu li:hover a,
		#left ul.menu li.iehover a {}
/* top level parent */
		#left ul.menu li.parent:hover, #left ul.menu li.parent.iehover {background:#e9e9e9;}
		#left ul.menu li.parent a:after {content: " +";}
		#left ul.menu li.parent li a:after {content: none;}

/* 2nd Menu */
			#left ul.menu ul {border-top: 1px solid #b6b6b6;width: 150px;margin: 0;padding: 0;}
			#left ul.menu li:hover li {background:#e9e9e9;border:1px solid #b6b6b6;border-top:0px;padding:0px;margin: 0px;}
			#left ul.menu li:hover li a,
			#left ul.menu li.iehover li a {color:#333;margin: 0.25em 0.5em 0;}
/* 2nd Menu Hover Persistence */
			#left ul.menu li:hover li a:hover,
			#left ul.menu li:hover li:hover a,
			#left ul.menu li.iehover li a:hover,
			#left ul.menu li.iehover li.iehover a {}
/* first sub-level parent */
			#left ul.menu li li.parent a:after {content: " +";}
			#left ul.menu li li.parent li a:after {content: none;}

/* 3rd Menu */
				#left ul.menu li:hover li:hover li a,
				#left ul.menu li.iehover li.iehover li a {}
/* 3rd Menu Hover Persistence */
				#left ul.menu li:hover li:hover li a:hover,
				#left ul.menu li:hover li:hover li:hover a,
				#left ul.menu li.iehover li.iehover li a:hover,
				#left ul.menu li.iehover li.iehover li.iehover a {}
/* second sub-level parent */
				#left ul.menu li li li.parent a:after {content: " +";}
				#left ul.menu li li li.parent li a:after {content: none;}

/* 4th Menu */
					#left ul.menu li:hover li:hover li:hover li a,
					#left ul.menu li.iehover li.iehover li.iehover li a {}
/* 4th Menu Hover Persistence*/
					#left ul.menu li:hover li:hover li:hover li a:hover,
					#left ul.menu li.iehover li.iehover li.iehover li a:hover {}

/* Submenu positioning */
	#left ul.menu ul,
		#left ul.menu ul ul,
			#left ul.menu ul ul ul {top: 10px;left: 75%;}
/* @end left menu */

/* @group Right Column Vertical fly-out suckerfish menu */

#right ul.menu ul,
	#right ul.menu ul ul,
		#right ul.menu ul ul ul {background:#ffffff;}
	#right ul#mainlevel li, 
	#right ul.menu li {list-style:none;padding:0;margin:0;text-align:right;text-indent:none;}
		#right ul#mainlevel li a:link, 
		#right ul#mainlevel li a:visited, 
		#right ul.menu li a:link, 
		#right ul.menu li a:visited {color:#414141;font-weight:400;padding:0 0 6px 0;text-decoration:none;}
		#right ul#mainlevel li a:hover, 
		#right ul.menu li a:hover {text-decoration:underline;}
		#right ul#mainlevel li a#active_menu, 
		#right ul.menu li#current a {text-decoration:none;color:#B61D20;}
			#right ul.menu ul li {background:none;}

/* Root = Vertical, Secondary = Vertical */
#right ul#mainlevel,
#right ul.menu,
	#right ul.menu li,
		#right ul.menu ul {list-style: none;}

/* Root Menu */
		#right ul#mainlevel a,
		#right ul.menu a {}
/* Root Menu Hover Persistence */
		#right ul.menu a:hover,
		#right ul.menu li:hover a,
		#right ul.menu li.iehover a {}
/* top level parent */
		#right ul.menu li.parent:hover {background:#e9e9e9;}
		#right ul.menu li.parent a:before {content: "+ ";}
		#right ul.menu li.parent li a:before {content: none;}

/* 2nd Menu */
			#right ul.menu ul {border-top: 1px solid #b6b6b6;width: 150px;margin: 0;padding: 0;}
			#right ul.menu li:hover li {background:#e9e9e9;border:1px solid #b6b6b6;border-top:0px;padding:0px;padding-right: 0.5em;}
			#right ul.menu li:hover li a,
			#right ul.menu li.iehover li a {margin: 0.25em 0.5em 0 0;}
/* 2nd Menu Hover Persistence */
			#right ul.menu li:hover li a:hover,
			#right ul.menu li:hover li:hover a,
			#right ul.menu li.iehover li a:hover,
			#right ul.menu li.iehover li.iehover a {}
/* first sub-level parent */
			#right ul.menu li li.parent a:before {content: "+ ";}
			#right ul.menu li li.parent li a:before {content: none;}

/* 3rd Menu */
				#right ul.menu li:hover li:hover li a,
				#right ul.menu li.iehover li.iehover li a {}
/* 3rd Menu Hover Persistence */
				#right ul.menu li:hover li:hover li a:hover,
				#right ul.menu li:hover li:hover li:hover a,
				#right ul.menu li.iehover li.iehover li a:hover,
				#right ul.menu li.iehover li.iehover li.iehover a {}
/* second sub-level parent */
				#right ul.menu li li li.parent a:before {content: "+ ";}
				#right ul.menu li li li.parent li a:before {content: none;}

/* 4th Menu */
					#right ul.menu li:hover li:hover li:hover li a,
					#right ul.menu li.iehover li.iehover li.iehover li a {}
/* 4th Menu Hover Persistence */
					#right ul.menu li:hover li:hover li:hover li a:hover,
					#right ul.menu li:hover li:hover li:hover li:hover a,
					#right ul.menu li.iehover li.iehover li.iehover li a:hover {}
					#right ul.menu li.iehover li.iehover li.iehover li.iehover a {}
					
/* Submneu positioning */
	#right ul.menu ul,
		#right ul.menu ul ul,
			#right ul.menu ul ul ul {top: 10px;left: -75%;}
/* @end right menu*/
/* @end Menus */

/* @group Pathway */
div#breadcrumbs {border: 1px solid #b6b6b6;}
	div#breadcrumbs p {margin: 0.25em 0.5em;padding: 0;}
/* @end */

/* @group article and blog layout */
p.buttonheading {float: right;margin-top:-40px;}
p.iteminfo {}
	span.createdby {display: block;}
	span.createdate {display: block;}
	span.modifydate {display: block;}

div.column2 h2.contentheading {margin-top: 0px;}

div.article_row {clear: both;}
	.article_column p {text-align: justify;}
	div.column1,
	div.column2,
	div.column3,
	div.column4 {float: left;margin: 0;padding-left:20px;}
	div.cols2 {width: 47%;}
	div.cols3 {width: 33%;}
	div.cols4 {width: 24%;}

ul.pagination {text-align: center; clear: both;
}
	ul.pagination li {
	list-style-type: none;
	float: left;
	padding-bottom: 10px;
	padding: 10px;
}
/* @end article and blog layout */

/* @group Tables */
	.sectiontableheader {
	background: #e9e9e9;
	border: 1px solid #b6b6b6;
	padding: 0.5em;
	margin-top: 3px;
}
		.sectiontableentry1 td {border:1px solid #b6b6b6;padding: 0.5em;}
		.sectiontableentry2 td {background:#f3f3f3;border:1px solid #b6b6b6;padding: 0.5em;}

	td.sectiontableheader:first-child,
		.sectiontableentry1 td:first-child,
		.sectiontableentry2 td:first-child {}
	td.sectiontableheader:last-child,
		.sectiontableentry1 td:last-child,
		.sectiontableentry2 td:last-child {}
		.sectiontableentry1 img, .sectiontableentry2 img {vertical-align: middle;}
	
	.sectiontablefooter {border:1px solid #b6b6b6;border-top: 0px;}

table.contenttoc {
	float: right;
	display:block;
	border: 2px solid #03639f;
	padding: .5em;
	margin-left: 1em;
	}

table.contenttoc th{
	font-weight: bold;
	color: #999999;
	font-size: 1em;
	border-bottom: 1px solid #03639f;
	}
table.contenttoc td{
	font-weight: normal;
	color: #999999;
	font-size: 1em;
	border-bottom: 1px solid #03639f;
	}
a.toclink{
	font-weight:normal;
	color:#3399FF;
	text-decoration: none;
}
.toclink a:hover{
	font-weight:bold;
	text-decoration: underline;
}


/* @end tables */

/* @group Forms */
form { 
	margin:0; padding:0; 
	textarea:font-size:100%; font-family: arial, serif; 
	}
input.button {
	padding: 2px;
	background: #808080;
	border: 1px solid black;
	color: #f3f3f3;
	}

/* -- Joomla Contact Form override -- */
.contact fieldset { width: 440px; border-width: 0px; }
	.contact legend { color: #00A4DF; font-size: 120%; font-weight: bold; padding: 1em 0; }
	.contact label { font-weight: bold; line-height: 150%; padding:  0 0  1px; }
	.contact .req { color: red !important; float: none; font-weight: bold; padding-left: 5px; }
	.contact .field { display: inline; }
	.contact .inputbox { 
		width: 100%; 
		margin-bottom: 15px; 
		border-color: #7C7C7C rgb(195, 195, 195) rgb(221, 221, 221); 
		border-style: solid; 
		border-width: 1px; 
		padding: 2px; 
		line-height: 1.4em; 
		font-size: .84em;
		color:#515151
		}
	#namebox, #emailbox, #subjectbox, #messagebox { 
		font-size: .92em;
		color:#666
		}
	.contact .contact_email { text-align: left; }
	.contact .contact { padding: 0 1em;  }
/* @end forms */

/* @group Tooltips */
.tool-tip {text-align: left;background: #ffc;border: 1px solid #D4D5AA;padding: 5px;max-width: 200px;line-height:110%;}
	.tool-title {padding: 0;margin: 0;font-weight: bold;margin-top: -15px;margin-bottom: 5px;padding-top: 15px;padding-bottom: 5px;background: url(../../system/images/selector-arrow.png) no-repeat;border-bottom: 1px solid #d4d5aa;}
	.tool-text  {margin: 0;}
/* @end tooltips */

/* @group Error Messages */
dl#system-message {clear:both;text-align: left;	padding: 5px 20px;border-top: 2px solid #FEABB9;border-bottom: 2px solid #FEABB9;}
	dt.error { }
		dd.error { }
/* @end error messages */
div#modintro{
	padding:15px 5px 0px 5px;
}
div#modintro, div#modintro a, div#modintro a:link, div#modintro a:visited{
	font-size:.96em;
	line-height: 130%;
	color:#666;
	text-decoration:none;
	font-weight:normal;
}
div#modintro a:hover {
	color:#3399FF;
	text-decoration: underline;
}
div#modintro-readmore, div#modintro-readmore a, div#modintro-readmore a:link, div#modintro-readmore a:visited{
	color:#3399FF;
	font-weight: bold;
	text-decoration:none;
}
div#modintro-readmore a:hover {
	text-decoration: underline;
}
.count3 h3{
	color:#fff;
}
div#articlepage{
	padding:0px 10px 0px 10px;
	}
div#component-contact{
	display: block;
	padding-left: 25px;
}
.blog-latest{
	font-size:.92em;
	margin-left:-10px;
}
.blogModuleTitle{
	font-size: 92%;
	/*margin-left: -20px;*/
	font-weight: bold;
}
.blogModuleText{
	font-size: 92%;
	/*margin-left: -20px;*/
	font-weight: normal;
}
.blogModuleReadmore{
	font-size: 92%;
	/*margin-left: -20px;*/
	font-weight: bold;
}
.pretext{
	font-size:.92em;
}
.leading_separator{
	font-size: small;
}

/* clearing */
/*******************************************************************************
 * HACKS : Clearfix
 *
 * Clearfix provides a means to for an element to contain all it's floated 
 * children even if it's not normally tall enough to do so. For more information
 * on clearfix please see:
 * http://www.positioniseverything.net/easyclearing.html
 */
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {min-width: 0; display: inline-block; /* \*/	display: block;}	/* trigger hasLayout for IE7. Hide from IE Mac */

* html .clearfix {height: 1%;} /* Hide from IE Mac */ 

.clr, .clear {clear:both;}
/* end clearing */

/* @group Layout */

div#page {width: 966px;} /* the width of our outermost container */
	div#nav {width: 961px;} /* the width of our outermost container minus any margin or padding */
	
	li.narrow {display: block;}
	li.wide {display: none;}

/* @group Maincontent */

/* this container holds the left column and mainbody content. We load this container first for SEO Source Ordering purposes.
We set the width of this container based upon the content layout logic. (see includes/template_config.php) */
	.lf-both {width: 766px !important; width:746px;} /* The available width minus the width of the right container */
	.lf-left-only {width: 100%;} /* The available width because we no longer have the right container */
	.lf-right-only {width: 766px;} /* The available width minus the width of the right container */
	.lf-wide {width: 100%;} /* The available width because we no longer have the left or right containers */

/* The #MiddleCol container holds the mainbody content. We load this container before we load the left column for SEO Source Ordering purposes.
We set the width of this container based upon the content layout logic. (see template_config.php) */
		.mc-both {width: 566px !important; width:546px;} /* The available width */
		.mc-left-only {width: 766px;} /* The available width minus the width of the left container */
		.mc-right-only {width: 766px;} /* The available width minus the width of the right container */
		.mc-wide {width: 100%;} /* The available width */

/* this container holds the left column content. We load this container before we load the right column for SEO Source Ordering purposes. */
		#left {width: 200px;}

/* this container holds the right column content. */
	#right {width: 200px;}
/* @end Maincontent */

/* @end Layout */