/* import browser reset css */
@import "/display/css/global/reset.css";

/*This is important because reset css formats the page to look the same across web browsers such as opera, firefox, IE, safari, and so on.*/

/*===========*/
/* RED Theme */
/*===========*/
body.red, body.red #global-header, body.red #global-footer {
	background: #fff url("../images/bg_dark.gif") repeat top center; 
	height: 100%; 
	color: #333;
}
body.red #global-searchBtn {background: transparent url("/display/images/global/black/global-go.gif") top left no-repeat;}
body.red #global-inside-header { margin: 0 auto; background: #990E0E;}
body.red #top-nav li.selected a, body.red #top-nav li.selected a:link, body.red #top-nav li.selected a:visited, body.red #top-nav li a:hover { background: url("../images/topnavActiveBG_red.gif") repeat center; color: #fff;}

/*=============*/
/* WHITE Theme */
/*=============*/
body.white, body.white #global-header, body.white #global-footer {
	height: 100%;
	color: #333;
	background-color: #fff;
	background-image: url("../images/bg_dark.gif");
	background-repeat: repeat;
	background-position: center top;
}
body.white #global-searchBtn {background: transparent url("/display/images/global/white/global-go.gif") top left no-repeat;}
body.white #global-inside-header { margin: 0 auto; background: #fff;}
body.white #top-nav li.selected a, body.white #top-nav li.selected a:link, body.white #top-nav li.selected a:visited, body.white #top-nav li a:hover { background: url("../images/topnavActiveBG_white.jpg") repeat center; color: #462b22;}

/*===============*/
/* HTML Elements */
/*This section determines the design of the structure accross the web site. Each section of css names are directly effecting a certai section of the HTML website. For example, h1, here in css, is styalizing the header (h1) in the html document. If you change something in h1 in the css it will make the same change in all header pages of this website. To determine what section is what, go into the HTML document and in design view click what it is you want to edit. You can see the breakdown on the bottom of the window. For example, if you click on the top navigation bar in the HTML, it will show the breakdown:"<body.white two><div#main-wrapper><div#inner-wrapper><div#content-wrapper><div#top-nav><ul><li><a>" If you scroll down the css you can find the sections #top-nav where the css edits those portions.  */
/*===============*/
* html { height: 100.02%; }
a:active, a:focus {
	outline: none;
} 
a, a:link, a:active, a:visited {
	color: #990000; 
	line-height:13px;
}
a:hover {
	text-decoration:none;
}
img { 
	border: none; 
}
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 135%;
	color: #900;
	margin: 15px 20px 7px 18px;
}
h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #990000;
	margin: 10px 20px 5px 18px;
}
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #462b22;
	margin: 10px 20px 5px 18px;
}
dl {
	margin: 5px 20px;
	} 
dt {
	margin: 5px 0;
	font-size: 110%;
	color: #462b22;
	font-weight: bold;
}
dd, dd a, dd a:link, dd a:visited {
	margin: 0 0 0 10px;
	padding: 0;
	line-height: 16px;
	font-size: 95%;
	color: #990000;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
ol, ul {
	margin: 5px, 20px;
	font-size: 90%;
}
li {
	margin: 0 15px;
	line-height: 16px;
}
input { 
	margin: 0;
	padding: 0;
	width: 175px; 
}
select { 
	margin: 0 0 10px 0;
	padding: 0;
	width: 175px; 
}

/*======================*/
/* global.css Overrides */
/*======================*/
#global-header h1 { padding-left: 3px;}
#global-search { padding-right: 5px; }
#local-footer { 
	float: left;
	clear: both; 
	border-top: 1px solid #cbcad2; 
	border-bottom: 1px solid #cbcad2; 
	background:#fff; 
	margin: 0 auto; 
	padding: 3px 0; 
	color: #9bb3bf; 
}
#local-footer p, #local-footer p a:link, #local-footer p a:visited, #local-footer p a { color: #333;}
#local-footer p {width: 960px; margin: 0 auto 0 auto; font-weight: bold;}
#local-footer a { color: #9bb3bf; text-decoration: none; } 
#global-footer { float: left; clear: both}
#global-footer a, #global-footer a:link, #global-footer a:visited {color: #9bb3bf;}
#global-footer-nav {background: #fff;}
#global-footer p {border-bottom: 0px /*1px solid #dedede*/; color: #9bb3bf;}
#global-footer p a, #global-footer p a:link, #global-footer p a:visited {font-weight: bold;}

/*===========*/
/* STRUCTURE */
/*===========*/
#inner-wrapper {background: #fff;}

#content-wrapper{ 
	width: 960px; 
	margin: 0 auto; 
	padding: 0 0 0 0;
	height: 100%;
	background: #fff;
	float: left;
} 

/* TOP GLOBAL NAVIGATION */
#top-nav {
	border-top: 1px solid #cbcbd0;
	border-bottom: 1px solid #cbcbd0;
	margin: 0 auto;
	padding: 0; 
	width: 960px;
	float: left;
	clear: both;
	background: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	background: #ccc url("../images/topnavInactiveBG.jpg") repeat center;
}
#top-nav .logo {
	float: left;
	background: #fff url("../images/logo.gif") no-repeat center bottom;
	width: 240px;
	height: 53px;
	cursor: hand;
} 
#top-nav ul {
	float: left;
	margin: 1px 0;
	padding: 0;
	font-size: 10px; 
}
#top-nav li{
	float: left;
	margin: 0;
	list-style: none;
	width: 82px;
	text-align: center;
	display: block;
	background: #ccc url("../images/topnavInactiveBG.jpg") repeat center;
}
#top-nav li.long{
	width:190px;
}
#top-nav li a, #top-nav li a:link, #top-nav li a:visited {
	color: #5a5030;
	text-decoration: none;
	font-weight: bold;
	display: block;
	padding: 15px 12px 11px 12px;
	height: 26px;
	line-height: 26px;
	text-align: center;
}

#top-nav li a.double-line {
	line-height: 13px;
	text-align: center;
}

#top-nav li a.long {
	line-height: 13px;
	text-align: center;
	width:175px;
}
#top-nav li.selected a, #top-nav li.selected a:link, #top-nav li.selected a:visited, #top-nav li a:hover { 
	display: block;
}

#masthead {
	width: 960px;
	background: #fff;
	height: 160px;
	float: left;
}
#masthead .header {
	float: left;
	background: #fff url("../images/header.jpg") no-repeat center bottom;
	width: 960px;
	height: 160px;
	cursor: hand;
}

/* LEFT NAV WITHIN MASTHEAD WRAPPER */
#side-nav {
	float: left;
	clear: both;
	margin: 0;
	padding: 0;
	width: 240px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* LEFT NAV MENU STYLE */
#side-nav ul.menu {
	margin: 0;
	padding: 0;
	list-style:none;
}
#side-nav ul.menu li {
	margin: 0;
	border-bottom: 1px solid #cdcdcd;
	background: #fcfcfc;
}
#side-nav ul.menu li a, #side-nav ul.menu li a:link, #side-nav ul.menu li a:visited {
	color: #444424;
	font-weight: bolder;
	text-transform: uppercase;
	line-height: 11px;
	margin: 0;
	text-decoration: none;
	display: block;
	padding: 4px 5px 3px 15px;
	font-size: 90%;
}
#side-nav ul.menu li a:hover, #side-nav ul.menu li.selected a, #side-nav ul.menu li.selected a:link, #side-nav ul.menu li.selected a:visited  {
	background: url("../images/sidenavActiveBG.jpg") repeat center;
	color: #fff;
	display: block;
	margin-bottom: 0px;
	padding-top: 4px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 15px;
	margin-top: 0px;
}

/* RESOURCES BLOCK STYLE */
ul.resources {
	background: url("../images/doubleLine.gif") repeat-x top left;
	margin: 25px 15px 10px 15px;
	padding: 3px 0 0 0;
	list-style:none;
}
ul.resources li {
	margin: 0;
	padding: 7px 0 0 0;
}
ul.resources li.last {
	margin:0;
	height: 30px;
	background: url("../images/doubleLine.gif") repeat-x bottom left;
}

#side-nav ul.btn { 
	float: left; 
}
#side-nav li.btn {
	background: #fff;
	border-bottom: 1px solid #cdcdcd;
	margin:0;
}
#side-nav li.btn a:hover {
	background: #fff;
}

.bottom-border {
	background: url("../images/mainContentBorder.jpg") repeat-x;
	height: 5px;
	width: 100%;
	margin:0;
	padding:0;
	float: left;
	clear: both;
}

#main-content {
	float: left;
	min-height: 550px;
	margin: 0;
	padding: 0;
}
body.two #main-content {
	width: 720px;
	background-image: url("../images/wideMainContentBG.jpg");
	background-repeat: repeat-y;
	padding: 0px;
}
body.three #main-content {
	background: url("../images/mainContentBG.jpg") repeat-y;
	width: 555px;
}

/*IE min-height hack*/
/*This must be left alone as it fixes problems with Internet explorer*/
* html #main-content {height: 550px;}
#main-content p {
	font-size: 90%;
	line-height: 14px;
	margin: 0 30px 10px 20px;
	padding: 0;
}

#breadcrumbs {
	font-size: 85%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 15px;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
	padding-left: 10px;
	width: 680px;
}

/*RIGHT-SIDE CONTENT*/
#side-bar {
	float: left;
	width: 165px;
	background: #fff;
	margin: 0;
	padding: 0;
}
#side-bar h1 {
	margin: 20px 20px 10px 10px;
	text-align: center;
	padding: 0;
	font-weight: bold;
	font-size: 110%;
	color: #901104;
}
#side-bar p {
	margin: 5px 15px;
	padding: 0px; 
	font-size: 80%;
	color: #222;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
body.two #side-bar {display: none; width: 0; height: 0;}

/*==================*/
/* Classes for Copy */
/*==================*/
.pullquote {
	margin: 25px 15px 10px 15px;
	padding: 0;
	font-weight: bold;
	font-size: 110%;
	color: #901104;
}
.captiontext {
	margin: 5px 15px;
	padding: 0px; 
	font-size: 80%;
	color: #222;
}

.video {
	float: left;
	margin: 15px 40px;
} 

/*Styles for content images */
.image-center {
	margin: 10px;
	padding: 0;
}
.image-right {
	float: right;
	margin: 5px 15px 10px 5px;
	padding: 0;
}
.image-left {
	float: left;
	margin: 5px 10px 5px 5px;
	padding: 0;
}

/*Styles for content lists */
.listLeft {
	width:250px;
	margin-top:20px;
}
.listRight {
	width:230px;
	float:right;
	margin:10px 30px 0 0;
	display: inline;
}

.bordered {
	border: 1px solid #e2d6bc;
}

.photo-credit {
	font-size: 80%;
	font-weight: bolder;
	margin: 5px 0 0 0;
	padding: 5px 3px;
	border: 1px solid #e2d6bc;
	text-align: left;
	background: #fafafa ;
	color: #9d7f74; 
}

.caption {
	font-size: 80%;
	margin: 0 10px 10px 10px; 
	padding: 0;
	line-height: 12px;
	clear: left;
}

.last {
	margin: 0 0 30px 0;
}

a.pdflink {
	background: #fff url("../images/iconAcrobat.gif") no-repeat left;
	margin:0;
	padding:1px 0 1px 20px;
}
a.doclink {
	background: #fff url("../images/iconWord.gif") no-repeat left;
	margin:0;
	padding:1px 0 1px 20px;
}