html { width: 100%; }

body { background: #6B89AE; }

/* ========================================================================== */
/* CONTAINERS */
/* ========================================================================== */
/* these fill the width of the page */
/* and provide background color in horizontal bands */
/* everything inside slides to center */

/* black container - banner */
#container-1 {
	clear: both;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	background: #000;
	height: 87px;
}

/* royal blue container - navbar */
#container-2 {
	clear: both;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	padding: 0px;
	background: #1B067C;
}

/* clear container - main body */
#container-3 {
	clear: both;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	padding: 0px;
}

/* navy blue container - footer */
#container-4 {
	clear: both;
	bottom: 0px;
	width: 100%;
	height: 60px;
	margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	background: #003;
}

/* ========================================================================== */
/* INNER CONTAINERS */
/* ========================================================================== */

/* this is an all-purpose container that slides to center of page */
#inner-container-1 {
	position: relative;
	width: 780px;
	margin-left: auto;
	margin-right: auto;
}

/* action-nav goes in here */
#tidbit-1 {
	position: absolute;
	width: 210px;
	top: 0px;
	right: 0px;
}

/* royal blue feature boxes */
#feature-1 {
	background: #1B067C;
	padding: 10px;
}

/* initiatives feature boxes */
#feature-2 {
	background: #537298;
	padding: 20px 20px 15px 20px;
	text-align: center;
	height: 160px;
}

/* ========================================================================== */
/* DROP SHADOWS */
/* ========================================================================== */
/* thanks to Randy 'ydnar' Reddig for the beautiful ydnar Drop-Shadow-Fu - http://www.sixapart.com/pronet/articles/ydsf_-_robust_c.html */

.ydsf {
	display: block;
	position: relative;
	margin: 4px -4px -4px 4px;
	background: url(img/shadow-grid.gif) repeat;
}

html>body .ydsf {
	margin: 10px -10px -10px 10px;
	background: url(img/shadow.png) right bottom no-repeat;
}

.ydsf:before,
.ydsf:after {
	content: " ";
	display: block;
	width: 10px;
	height: 10px;
	background: inherit;
}

.ydsf:before {
	position: absolute;
	top: 0;
	right: 0;
	margin: -10px 0 0 auto;
	background-position: right top;
}

.ydsf:after {
	margin: -10px 0 0 -10px;
	background-position: left bottom;
}

.ydsf .inner {
	display: block;
	position: relative;
	overflow: hidden; /* prevents margin leakage from child elements */
	left: -4px;
	top: -4px;
}

html>body .ydsf .inner {
	left: -10px;
	top: -10px;
	margin: 0;
}

.left {
	float: left;
	display: inline; /* fixes ie double margin-left bug */
}

.right { float: right; }

/* spacer div to push some space between shadowed elements */
#spacer {
	padding-bottom: 15px;
}


/* ========================================================================== */
/* COLUMNS */
/* ========================================================================== */

#sidebar {
	float: left;
	width: 280px;
	margin-bottom: 10px;
}

#main-column {
	float: left;
	width: 460px;
	padding-left: 20px;
	margin-bottom: 10px;
}

/* these two transparent containers can break up page into two columns of equal width */

#column-l {
	float: left;
	width: 380px;
	margin-bottom: 10px;
}

#column-r {
	float: left;
	width: 380px;
	padding-left: 20px;
	margin-bottom: 10px;
}

/* ========================================================================== */
/* IMAGE STYLES */
/* ========================================================================== */

img {
	border: none;
	overflow: hidden;
}

img.inline {
	border: none;
	overflow: hidden;
	margin-right: 5px;
}

img.inset-l {
	border: none;
	float: left;
	margin: 0px 10px 5px 0px;
	overflow: hidden;
}

img.inset-r {
	border: none;
	float: right;
	margin: 0px 0px 5px 10px;
	overflow: hidden;
}

img.feature {
	border: none;
	float: left;
	margin: 0px 30px 0px 0px;
	overflow: hidden;
}

/* ========================================================================== */
/* TEXT STYLES */
/* ========================================================================== */

h1 {
	font-family: Palatino, Times, serif;
	font-size: 36px;
	line-height: 36px;
	color: #003;
	margin-top: 0px;
	margin-bottom: 15px;
}

h2 {
	font-family: Palatino, Times, serif;
	font-size: 21px;
	line-height: 24px;
	color: #003;
	margin-top: 0px;
	margin-bottom: 15px;
}

h2.feature {
	font-family: Palatino, Times, serif;
	font-size: 21px;
	line-height: 24px;
	color: #fff;
	margin-top: 0px;
	margin-bottom: 15px;
}

h2.initiatives {
	font-family: Palatino, Times, serif;
	font-size: 21px;
	line-height: 24px;
	color: #003;
	margin-top: 0px;
	margin-bottom: 0px;
}

h3 { /* subheads */
	font-family: Arial, sans-serif;
	font-size: 10px;
	line-height: 14px;
	text-transform: uppercase;
	color: #000;
	font-weight: 800;
	margin-top: 0px;
}

h3.feature { /* feature subheads */
	font-family: Arial, sans-serif;
	font-size: 10px;
	line-height: 14px;
	text-transform: uppercase;
	color: #fff;
	font-weight: 800;
	margin-top: 0px;
}

p {
	font-family: Verdana, Arial, sans-serif;
	font-size: 10px;
	line-height: 12px;
	color: #003;
	margin-top: 0px;
	margin-bottom: 15px;
}

p.action-nav {
	margin-top: 30px;
}

p.feature {
	font-family: Verdana, Arial, sans-serif;
	font-size: 10px;
	line-height: 12px;
	color: #fff;
	margin-top: 0px;
	margin-bottom: 15px;
}

p.footer {
	font-family: Verdana, Arial, sans-serif;
	font-size: 10px;
	line-height: 12px;
	color: #fff;
	margin-top: 0px;
	margin-bottom: 20px;
}

ol, ul {
	margin-left: 2;
	font-family: Verdana, Arial, sans-serif;
	font-size: 10px;
	line-height: 12px;
	color: #003;
	margin-top: 0px;
	margin-bottom: 15px;
}

li {
	margin-top: 0px;
	text-align:left;
}

/* ========================================================================== */
/* LINKS */
/* ========================================================================== */

/* normal links */
a:link {
	color: #3015D3;
	text-decoration: none;
}

a:visited {
	color: #3015D3;
	text-decoration: none;
}

a:hover {
	color: #fff;
	text-decoration: none;
	background-color: #3015D3;
}

a:active { 
	color: #3015D3; 
	text-decoration: none;
}

/* nav links */
a.nav:link {
	font-family: Arial, sans-serif;
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	padding-right: 13px;
	font-weight: 800;
	background-color: #1B067C;
}

a.nav:visited {
	font-family: Arial, sans-serif;
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	padding-right: 13px;
	font-weight: 800;
	background-color: #1B067C;
}

a.nav:hover {
	font-family: Arial, sans-serif;
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	padding-right: 13px;
	font-weight: 800;
	background-color: #1B067C;
}

a.nav:active {
	font-family: Arial, sans-serif;
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff; 
	text-decoration: none;
	padding-right: 13px;
	font-weight: 800;
	background-color: #1B067C;
}

/* action-nav links - the little ones in the uppper right */
a.action-nav:link {
	font-family: Arial, sans-serif;
	font-size: 12px;
	line-height: 12px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}

a.action-nav:visited {
	font-family: Arial, sans-serif;
	font-size: 12px;
	line-height: 12px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}

a.action-nav:hover {
	font-family: Arial, sans-serif;
	font-size: 12px;
	line-height: 12px;
	text-transform: uppercase;
	color: #6B89AE;
	text-decoration: none;
	background-color: #003;
}

a.action-nav:active { 
	font-family: Arial, sans-serif;
	font-size: 12px;
	line-height: 12px;
	text-transform: uppercase;
	color: #fff; 
	text-decoration: none;
}

/* feature links */
a.feature:link {
	color: #6B89AE;
	text-decoration: none;
}

a.feature:visited {
	color: #6B89AE;
	text-decoration: none;
}

a.feature:hover {
	color: #fff;
	text-decoration: none;
	background-color: #003;
}

a.feature:active { 
	color: #6B89AE; 
	text-decoration: none;
}

/* footer links */
a.footer:link {
	color: #6B89AE;
	text-decoration: none;
}

a.footer:visited {
	color: #6B89AE;
	text-decoration: none;
}

a.footer:hover {
	color: #fff;
	text-decoration: none;
	background-color: #003;
}

a.footer:active { 
	color: #6B89AE; 
	text-decoration: none;
}

/* ========================================================================== */
/* IMAGE FIX */
/* ========================================================================== */
/* drags divs down to contain floated images */
/* thanks to http://positioniseverything.net/easyclearing.html */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    class: clearfix floatholder;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}