/*
	(1) html elements
	(2) structures
	(3) formatting for structures
	(4) general purpose 
	(5) hacks 
	    made in washington */
	

/************************************************
	(1) html elements 
*************************************************/
body {
	background-color: #fff;
	font: 75% normal;
        font-family: "Segoe UI", tahoma, arial, sans-serif;
	color: #333;
}

td {
    vertical-align:top;
}

img {
	border: none;
	padding-right: 8px;

}

a {
	color: #069;
}

p {
	margin: 0 0 15px 0;
}

form {
	margin: 0;
}

h1 {
	color: #069;
	font-size: 21px;
	letter-spacing: -.25px;
	line-height: 1em;
	font-weight: bold;
	margin: 15px 0 3px 0;
}

h2 {
	color: #6e9ac8;
	font-size: 1.5em;
	font-weight: normal;
	margin: 0;
	padding: 0 0 5px 13px;

}

h4 {
	color: #6e9ac8;
	font-size: 1.5em;
	font-weight: normal;
	margin: 0;
	padding: 0 0 5px 13px;
        line-height: 25px;

}

h3 {
	color: #6e9ac8;
	font-size: .9em;
	margin: 0 0 6px 0;
}


/************************************************
	(2) structures
*************************************************/
#main {
	width: 906px;
	margin: 0 auto;
}

#masthead {
	overflow: auto;
}

#logo {
	float: left;
	width: 146px;
	margin: 11px 0 0 26px;
}

#tagline {
	float: left;
	width: 283px;
	margin: 66px 265px 0 16px;
}

#login {
	float: left;
	width: 161px;
	height: 20px;
	padding: 7px 0 0 9px;
	margin: 74px 0 0 0;
	text-align: center;
	background: transparent url(../images/bg_customer_login.gif) 0 0 no-repeat;
}

#nav {
	height: 40px;
	background: transparent url(../images/bg_nav.gif) 0 0 no-repeat;
	width: 906px;
	font-size: .9em;
}

#content-wrapper {
	float: left;
	width: 700px;
}

#content {
	line-height: 1.3em;
	padding: 20px 10px 0 14px;
 }/*
 |
 |---> */ #content.two-column {
			border:1;
			width: 460px;
			float: left;
}


/* 
	- first of all, IE6 is insulting to support
	- i could just create subclasses of #header: #header.type-a, #header.type-b
	  but that's a problem for IE6
	- so, instead, i have to create anonymous classes which makes me a little nervous
	  in terms of class name collisions so i'm prefixing these with hdr-
	- sheesh
*/

#header {
	border-bottom: 2px solid #6e9ac8;
	margin-top: 18px;
 }/*
 |
 |---> */ .hdr-banner {
 			border-bottom: none;
			background-color: transparent;
			background: position: 0 0;
			background-repeat: no-repeat;
			width: 701px;
			height: 109px;
}/*
 |
 |---> */ .hdr-alerts {
			background-image: url(../images/bg_photo_alerts.jpg);
}/*
 |
 |---> */ .hdr-banner h1 {
			color: #fff;
			font-size: 2em;
			padding-top: 3.3em;
}

#resources-wrapper {
	width: 206px;
	float: left;
	margin-top: 10px;
	padding-top: 15px;
	background: transparent url(../images/bg_resources_top.gif) top left no-repeat;
}

#resources {
	background: transparent url(../images/bg_resources_bottom.gif) bottom left no-repeat;
	padding: 0 0 0 20px;
	float: none;
	min-height: 170px;
}

#secondary-nav-wrapper {
	width: 200px;
	float: left;
	margin: 13px 0 0 3px;
	background: transparent url(../images/bg_secondary-nav_top.gif) top right no-repeat;
}

#secondary-nav {
	background: transparent url(../images/bg_secondary-nav_bottom.gif) bottom right no-repeat;
	padding-right: 20px;
}

#footer {
	margin-top: 45px;
	padding: 5px 0 0 5px;
	border-top: 2px solid #6e9ac8;
	color: #999;
	font-size: 80%;
	text-transform: uppercase;
}


/************************************************
	(3) formatting for structures
*************************************************/


/* --- login --- */
#login a {
	color: #999;
	font-weight: bold;
	font-size: .9em;
}



/* --- nav --- */
#nav ul {
	list-style: none;
	margin: 0 0 0 3px;
	padding: 0;
}

#nav li {
	display: inline;
}

#nav li a {
	color: #417da7;
	font-size: 1.1em;
	font-weight: bold;
	text-decoration: none;
	float: left;
	text-align: center;
	background: transparent url(../images/bg_nav_item_static.gif) bottom right no-repeat;
	width: 150px;
	height: 24px;
	padding-top: 12px;
}

#nav li.last a {
	width: 152px;
	background-image: none;
}

#nav li a:hover {
	background-image: url(../images/bg_nav_item_active.gif);
	color: #fff;
}


/* --- secondary-nav lists/items/anchors -- */

#secondary-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#secondary-nav li {
	float: left;
	clear: both;
	width: 100%;
}

#secondary-nav a {
	display: block;
	color: #666;
	font-size: .95em;
	text-decoration: none;
}

/* --- secondary-nav level 1 --- */
#secondary-nav ul li.active {
	background: #e2ebf4 url(../images/bg_dots.gif) bottom left repeat-x;
}

#secondary-nav ul li a {
	padding: 8px 0;
	font-weight: bold;
}

#secondary-nav ul li a:hover,
#secondary-nav ul li.active a {
	background-color: #e2ebf4;
	padding-left: 5px;
}

/* --- secondary-nav level 2 --- */

#secondary-nav li li {
	background: transparent url(../images/bg_dots.gif) bottom left repeat-x;
}

#secondary-nav ul li.active li {
	background-color: #fff;
}

#secondary-nav li li a {
	font-weight: normal;
	margin-bottom: 6px;
	padding: 4px 0 4px 20px !important;
	/* ? */
	background: #fff url(../images/bg_arrow_secondary-nav.gif) 7px 7px no-repeat !important;
}

#secondary-nav li li.active a,
#secondary-nav li li a:hover {
	color: #f45c00;
	background-image: url(../images/bg_arrow_secondary-nav_active.gif) !important;
}


/* --- content --- */
#content ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#content li {
	margin: 0 0 10px 0;
	padding: 0 0 0 15px;
	background: transparent url(../images/bg_bullet_orange.gif) 0 5px no-repeat;
}

/* --- resources --- */

#resources h3 {
	background: transparent url(../images/bg_dots.gif) bottom left repeat-x;
	padding: 0 0 8px 4px;
}

#resources ul.menu {
	list-style: none;
	margin: 0 0 15px 7px;
	padding: 0;
}

#resources ul.menu li {
	margin: 0;
	padding: 0;
	display: inline;
}

#resources ul.menu li a {
	display: block;
	background: transparent url(../images/bg_menu_item.gif) 0 6px no-repeat;
	padding: 2px 0 0 13px;
	color: #666;
	font-size: .95em;
	text-decoration: none;
}

#resources ul.menu li a:hover {
	font-weight: bold;
}



/* --- footer --- */

#footer ul {
	display: inline;
}

#footer a {
	color: #999;
}

/************************************************
	(4) general purpose
*************************************************/


/* --- table.events --- */
table.events {}

table.events td {
	padding: 0 5px 5px 0;
	vertical-align: top;
}

table.events td.date {
	width: 90px;
}

/* --- local-nav --- (paging/inter-section nav within content region) */
ul.local-nav {
	display: inline;
	float: right;
	font-weight: bold;
	margin-top: 5px;
}

ul.local-nav li {
	float: left;
	margin-left: 20px;
}

ul.local-nav a {
	color: #666;
	text-decoration: none;
}

/* apply an rss icon to a link */
.rss {
	background: transparent url(../images/icon_rss.gif) 0 0 no-repeat;
	padding-left: 20px;
}


/* --- action links --- */
a.action {
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	padding-right: 12px;
	background: transparent url(../images/bg_arrow_action.gif) 100% 60% no-repeat;
}

a.action:hover {
	color: #f60;
}


/* --- utilist --- */
ul.utilist {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 10px;
}

ul.utilist li {
	margin: 0;
	padding: 0;
	display: inline;
}

ul.utilist li a {
	text-transform: uppercase;
	margin: 0 1px;
	color: #333;
}


/* UTILITIES */


.left					{ float: left !important; }
.right					{ float: right !important; }

.small-1				{ font-size: .9em; }
.small-2				{ font-size: .8em; }
.small-3				{ font-size: .7em; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/************************************************
	(5) hacks
*************************************************/

* html #logo 			{ margin-left: 16px; }
* html #tagline 		{ margin-right: 258px; }
* html #resources		{ height: 140px; }
* html #content			{ height: 140px; }