/***************************
* Default Typography
***************************/

h1, h2, h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
	font-weight: bold;
}

h1 {
	color: #f7bf32;
	font-size: 40px;
	line-height: 40px;
	margin-bottom: 12px;
}

h2 {
	color: #fff;
	font-size: 16px;
	line-height: 16px;
	margin-bottom: 14px;
	font-style: normal;
	text-decoration: underline;
}

h2 a {
	color: #003556;
	text-decoration: none;
}

h2 a:hover {
	color: #003556;
	text-decoration: underline;
}

h3 {
	color: #ccc;
	font-size: 14px;
	font-style: normal;
	line-height: 14px;
	margin-bottom: 10px;
}

h3 a {
	color: #e0ebf1;
	text-decoration: none;
}

h3 a:hover {
	color: #e0ebf1;
	text-decoration: underline;
}

body, p, li {
	color: #e0ebf1;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

p, li {
	line-height: 18px;
}

p { margin-bottom: 12px; }

a {
	color: #fff;
	text-decoration: underline;
	font-weight: bold;
}

a:hover {
	color: #fff;
}

/***************************
* Layout
***************************/

html {
	background: url(../images/background-header.gif) #005481 repeat-x top left;
}

body {
	background: url(../images/background-footer.gif) repeat-x bottom left;
}

#container {
	background: url(../images/background-container.gif) no-repeat top left;
	margin: 0 auto;
	position: relative;
	width: 720px;
}

#header {
	float: left;
	height: 410px;
	position: relative;
	width: 720px;
}

#page {
	background: url(../images/background-content.gif) no-repeat bottom right;
	float: left;
	padding: 10px 0 20px 0;
	width: 720px;
}

#content {
	float: right;
	padding-left: 248px;
	width: 472px;
}

#page .min-height {
	float: left;
	height: 400px;
}

#footer {
	clear: both;
	height: 98px;
	width: 720px;
}

/***************************
* Design Elements
***************************/

#site-title {
	background: url(../images/logo.png) no-repeat top left;
	float: left;
	height: 92px;
	left: -10px;
	overflow: hidden;
	position: absolute;
	text-indent: -5000px;
	top: 14px;
	width: 427px;
}

#site-title a {
	display: block;
	height: 92px;
	width: 427px;
}

#section-banner {
	background: url(../images/background-banner.png) no-repeat top left;
	float: right;
	margin: 130px -10px 0 0;
	padding: 17px;
	width: 484px;
}

#site-meta {
	float: left;
	margin-top: 16px;
	width: 100%;
}

/***************************
* Navigation
***************************/

#header .navigation {
	list-style: none;
	margin-top: 180px;
	width: 171px;
}

#header .navigation li {
	margin-bottom: 6px;
}

#header .navigation li a {
	display: block;
	height: 36px;
	overflow: hidden;
	text-indent: -5000px;
	width: 171px;
}

#header .navigation li.home a { background: url(../images/nav-home.gif) no-repeat top left; }
#header .navigation li.about a { background: url(../images/nav-about.gif) no-repeat top left; }
#header .navigation li.volunteers a { background: url(../images/nav-volunteers.gif) no-repeat top left; }
#header .navigation li.calendar a { background: url(../images/nav-calendar.gif) no-repeat top left; }
#header .navigation li.jobs a { background: url(../images/nav-job-opportunities.gif) no-repeat top left; }
#header .navigation li.contact a { background: url(../images/nav-contact.gif) no-repeat top left; }
#header .navigation li.espanol a { background: url(../images/nav-espanol.gif) no-repeat top left; }

#header .navigation li a:hover,
#header .navigation li a.current {
	background-position: 0 -36px;
}

/***************************
* Meta Information
***************************/

#site-meta .copyright,
#site-meta .developer {
	color: #7895a6;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	height: 18px;
	line-height: 18px;
}

#site-meta .developer {
	background: url(../images/impulse-development-logo.gif) no-repeat center right;
	float: right;
	font-size: 11px;
	margin-bottom: 6px;
	padding-right: 22px;
}

#site-meta .developer a {
	color: #7895a6;
	font-weight: bold;
}

#site-meta .developer a:hover {
	color: #9bb2bf;
}

#site-meta .copyright {
	float: left;
	font-size: 10px;
}