/* Sets hyperlinks to black colour, overrides Style LSBU settings */
a, #mainContent p a:link
{
color: #000000;
}

/*Adds the blue fade to the bottom of the homepage */
#clearingHome
{
background: url(../images/bluefade.jpg) repeat-x bottom;
margin-bottom: 0px;
}

/*Controls the banner image */
#header {background: url(../images/DarkBlueBanner.jpg) no-repeat bottom;
	height: 136px}

/* Controls the settings for the div on the left */
#leftPaneltop
{
margin:0px;
padding:0px;
margin-top: 2px;
padding-left: 10px;
width: 524px;
float:left;
}

/* Controls the settings for the div on the right */
#rightPanel
{
width: 225px;
float:right;
margin-top: 2px;
padding-right:10px;
}

/* Settings for the Main campaign section at the top */
#mainMedia
{
width: 524px;
margin: 0px;
margin-top: 10px;
padding: 0px;
position:relative;
}

#mainMedia p
{
position:absolute;
left: 290px;
top: 160px;
width: 250px;
margin-bottom: 0px;
font-size: 1.2em;
font-weight: 800;
text-align: right;
color: #ffffff;
padding: 1px 10px 2px 0px;
background-color:#000;
}

/* Code for the elevator statement box */
#headerBox
{
margin: 0px;
padding: 0px;
width: 524px;
margin-top: 2px;
}

#headerBox h1
{
padding:0px;
padding: 4px 0px 0px 4px;
width: 376px;
margin-bottom: 12px;
color: #00204d;
font-weight:300;
}

#headerBox p
{
margin: 0px;
padding: 0px;
padding: 0px 0px 10px 4px;
margin-right: 15px;
color: #00204d;
font-size:1.10em;
}

/* Code for any content that may be placed in the left hand panel, this includes secondary campaigns */
.contentBox
{
margin: 0px;
padding: 0px;
width: 524px;
margin-top: 2px;
}

/* Code to use when using double images in secondary campaigns */
.doubleImage
{
border-color:#d7d7d7;
border-style:solid;
border-width: 1px;
}

.doubleImageright
{
	margin-left:2px;
}

/* Code for the news box in the left hand panel */
.newsBox
{
	border-color:#d7d7d7;
	border-style:solid;
	border-width: 1px;
	margin-top: 10px;
	background: url(../images/newsgrayfade.jpg) repeat-x bottom;
}

.newsBox img
{
	width: 100px;
}

.newsBox ul
{
list-style-type: none;
list-style-image:url(../images/newsbullet.gif);
list-style-position: outside;
margin: 0px 0px 0px 128px;
padding: 0px 5px 0px 8px;
}

.newsBox ul li
{
	margin-bottom:4px;
}

.newsBox p
{
	margin-left:250px;
	padding-bottom:3px;
}

/* Code for resource boxes in the right hand panel */
.resourceNav
{
border-color:#d7d7d7;
border-style:solid;
border-width: 1px;
width: 220px;
margin-top: 10px;
float:right;
padding-bottom:8px;
background: url(../images/grayfade.jpg) repeat-x bottom;
}

.resourceNav h2, .newsBox h2
{
margin: 6px 0px 6px 8px;
padding:0px;
color: #001f4c;
font-size: 1em;
font-weight:bold;
}

.resourceNav img, .newsBox img
{
margin: 0px 6px 0px 8px;	
float:left;
}
.resourceNav input#sb
{
margin-left: 8px;
border-width: 1px;
border-style: solid;
border-color: #025abb;
}

.resourceNav ul, .resourceNav p
{
list-style-type: none;
list-style-image: none;
list-style-position: outside;
margin:0px;
padding: 0px 5px 0px 8px;
}

.textRight{
	float:right;
	padding-right:2px;
}

/* Code to override properties of the resourceNav div */
.courseBox
{
background-color: #e0e4e9;
background-image:none;
}

/* Code for Sitemap styling */
.sitemapcols
{
width: 757px;
padding: 0px;
margin: 0px;
padding: 0px;
clear:both;
}




/* Code for the Explore div at the bottom of the page */

#explore
{
width: 757px;
padding: 0px;
margin: 0px;
padding: 10px;
clear:both;
}

/* The explore div is broken up in to category blocks */

.categoryblock{
background:inherit;	
width: 170px;	
margin:0px;
margin: 5px 0px 10px 0px;
padding:0px;
padding: 0px 4px 0px 8px;
float:left;
}

.categoryblock h2
{
margin: 0px;
padding: 0px;
color: #001f4c;
font-size: 1em;
font-weight:bold;
margin-bottom:4px;
}

.categoryblock ul
{
display:block;
float:left;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
width: 160px;
margin: 0px;
padding: 0px;
}

.categoryblock div{
	clear:both;
}
.categoryblock img
{
	margin: 0px;
	padding: 0px;
	padding: 0px 10px 4px 0px;
	float:left;
	clear:left;
}

.categoryblock p
{
	margin: 0px;
	padding:0px;
	padding: 5px 5px 5px 0px;
	margin-top:5px;
}

/* Code for the footer div */

#homeFooter
{
clear:both;
padding:0px;
padding: 2px 0px;
margin:0px;
border:none;
background-color: #e2e2e2;
width: 777px;
}


#homeFooter p
{
font-size:0.85em;
padding:0px;
padding:1px 1px 1px 8px;
margin:0px;
}

#homeFooter a
{
color: #025abb;
}

/**
Stylesheet: CSS for Slideshow.

License:
	MIT-style license.

Copyright:
	Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
	
HTML:
	<div class="slideshow">
		<div class="slideshow-images" />
		<div class="slideshow-captions" />
		<div class="slideshow-controller" />
		<div class="slideshow-loader" />
		<div class="slideshow-thumbnails" />
	</div>
	
Notes:
	These next four rules are set by the Slideshow script.
	You can override any of them with the !important keyword but the slideshow probably will not work as intended.
*/

.slideshow {
	display: block;
	position: relative;
	z-index: 0;
}
.slideshow-images {
	display: block;
	overflow: hidden;
	position: relative;
}		
.slideshow-images img {
	display: block;
	position: absolute;
	z-index: 1;
}		
.slideshow-thumbnails {
	overflow: hidden;
}



/**
HTML:
	<div class="slideshow-images">
		<img />
		<img />
	</div>
	
Notes:
	The images div is where the slides are shown.
	Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/

.slideshow-images {
	height: 265px;
	width: 525px;
}		
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0; 
}
.slideshow-images-next { 
	opacity: 0; 
}
.slideshow-images img {
	float: left;
	left: 0;
	top: 0;
}	

/**
Notes:
	These are examples of user-defined styles.
	Customize these classes to your usage of Slideshow.
*/
	.slideshow
		{
		width: 524px;
		margin: 0px;
		margin-top: 10px;
		padding: 0px;
		position:relative;
		}

	.slideshow p
		{
		position:absolute;
		left: 290px;
		top: 160px;
		width: 250px;
		margin-bottom: 0px;
		font-size: 1.2em;
		font-weight: 800;
		text-align: right;
		color: #ffffff;
		padding: 1px 10px 2px 0px;
		background-color:#000;
		}


/**
HTML:
	<div class="slideshow-captions">
		...
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions {
	background: #000;
	bottom: 0;
	color: #FFF;
	font: normal 12px/22px Arial, sans-serif;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-indent: 10px;
	width: 100%;
	z-index: 10000;
}
.slideshow-captions-hidden {
	height: 0;
	opacity: 0;
}
.slideshow-captions-visible {
	height: 22px;
	opacity: .7;
}

/**
HTML:
	<div class="slideshow-controller">
		<ul>
			<li class="first"><a /></li>
			<li class="prev"><a /></li>
			<li class="pause play"><a /></li>
			<li class="next"><a /></li>
			<li class="last"><a /></li>
		</ul>
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the controller animation.
*/

.slideshow-controller {
	background: url(/erclib/images/controller/controller.png) no-repeat;
	height: 42px;
	left: 50%;
	margin: -21px 0 0 -119px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	width: 238px;
	z-index: 10000;
}
.slideshow-controller * {
	margin: 0;
	padding: 0;
}
.slideshow-controller-hidden { 
	opacity: 0;
}
.slideshow-controller-visible {
	opacity: 1;
}
.slideshow-controller a {
	cursor: pointer;
	display: block;
	height: 18px;
	overflow: hidden;
	position: absolute;
	top: 12px;
}
.slideshow-controller a.active {
	background-position: 0 18px;
}
.slideshow-controller li {
	list-style: none;
}
.slideshow-controller li.first a {
	background-image: url(/erclib/images/controller/controller-first.gif);
	left: 33px;
	width: 19px;
}
.slideshow-controller li.last a {
	background-image: url(/erclib/images/controller/controller-last.gif);
	left: 186px;
	width: 19px;
}
.slideshow-controller li.next a {
	background-image: url(/erclib/images/controller/controller-next.gif);
	left: 145px;
	width: 28px;
}
.slideshow-controller li.pause a {
	background-image: url(/erclib/images/controller/controller-pause.gif);
	left: 109px;
	width: 20px;
}
.slideshow-controller li.play a {
	background-position: 20px 0;
}
.slideshow-controller li.play a.active {
	background-position: 20px 18px;
}
.slideshow-controller li.prev a {
	background-image: url(/erclib/images/controller/controller-prev.gif);
	left: 65px;
	width: 28px;
}

/**
HTML:
	<div class="slideshow-loader" />
	
Notes:
	Customize the hidden / visible classes to affect the loader animation.
*/

.slideshow-loader {
	height: 28px;
	right: 0;
	position: absolute;
	top: 0;
	width: 28px;
	z-index: 10001;
}
.slideshow-loader-hidden {
	opacity: 0;
}
.slideshow-loader-visible {
	opacity: 1;
}

/**
HTML:
	<div class="slideshow-thumbnails">
		<ul>
			<li><a class="slideshow-thumbnails-active" /></li>
			<li><a class="slideshow-thumbnails-inactive" /></li>
			...
			<li><a class="slideshow-thumbnails-inactive" /></li>
		</ul>
	</div>
	
Notes:
	Customize the active / inactive classes to affect the thumbnails animation.
	Use the !important keyword to override FX without affecting performance.
*/

.slideshow-thumbnails {
	bottom: -65px;
	height: 65px;
	left: 0;
	position: absolute;
	width: 100%;
}
.slideshow-thumbnails * {
	margin: 0;
	padding: 0;
}
.slideshow-thumbnails ul {
	height: 65px;
	left: 0;
	position: absolute;
	top: 0;
	width: 10000px;
}
.slideshow-thumbnails li {
	float: left;
	list-style: none;
	margin: 5px 5px 5px 0;
	position: relative;
}
.slideshow-thumbnails a {
	display: block;
	float: left;
	padding: 5px;
	position: relative; 
}
.slideshow-thumbnails a:hover {
	background-color: #FF9 !important;
	opacity: 1 !important;
}
.slideshow-thumbnails img {
	display: block;
}
.slideshow-thumbnails-active {
	background-color: #9FF;
	opacity: 1;
}
.slideshow-thumbnails-inactive {
	background-color: #FFF;
	opacity: .5;
}