/* -------------------------------------------------------------- 
  	GENERAL CROSS-BROWSER RESET 
-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

body { 
  line-height: 1.5;
  padding-bottom: 10em;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }

/* PC FF3 adds an outline to Flash objects? */
a, object {
	outline: none;
}

/* -------------------------------------------------------------- 
  	TYPOGRAPHIC DEFAULTS 
-------------------------------------------------------------- */

/* Headings
-------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    color: #003B69;
	font-weight: bold;
	font-family: georgia, serif; 
	margin: 0 0 0.75em 0;
	text-transform: uppercase;
}  
h1 { font-size: 1.667em; }
h2 { font-size: 1.5em; text-transform: none; }
h3 { font-size: 1.083em; }
h4 { font-size: 0.917em; }
h5 { font-size: 0.917em; text-transform: none; color: #578FBA; font-family: verdana,helvetica,sans-serif; }
h6 { font-size: 0.833em; font-weight: normal; color: #578FBA;  font-family: verdana,helvetica,sans-serif; }

h1 a, h1 a:link,
h2 a, h2 a:link,
h3 a, h3 a:link,
h4 a, h4 a:link,
h5 a, h5 a:link,
h6 a, h6 a:link { color: #1393BA; }

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover { color: #00BFE5; }

/* Text Elements
-------------------------------------------------------------- */

p { font-size: 1.083em; margin: 0 0 1em; line-height: 1.5;}
.summary p { 
	margin-bottom: 1em;
	color: #578FBA; 
	font: italic 1.417em georgia, sans-serif; 
}

a { text-decoration: underline; }
a,a:link { color: #1393BA; }
a:visited { color: #22809d; }
a:hover,a:active,a:focus { color: #00BFE5; }
a.btn, .commandButton { 
	background: url(../images/design/btn-bg.jpg) 0 0 repeat-x; 
	color: #FFFFFF; 
	font-size: 0.833em;
	font-weight: bold; 
	padding: 3px 5px; 
	text-decoration: none;
	text-transform: uppercase; 
}
a.btn { display: block; text-align: center; }
a.btn:hover, .commandButton:hover { color: #ffffff; }
blockquote  { font-family: georgia, sans-serif; font-style: italic; margin: 1.5em; }
strong { font-weight: bold; }
em  { font-style: italic; }
address { font-style: normal; }
cite { font-style: normal; text-transform: uppercase; }
small { font-size: 0.833em; }

/* Following six styles generally do not need to be edited */

sup, sub    { line-height: 0; }
dfn { font-style: italic; }
del { color:#666; }
pre { white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

/* HRs with background images
-------------------------------------------------------------- */
div.hr {
  	height: 3px;
  	margin: 10px 0;
  	background: #fff url() 0 0 repeat-x;
}
	div.hr hr {
	  	display: none;
	}

/* Lists
-------------------------------------------------------------- */

li ul, 
li ol       { margin:0 1.5em; }
ul, ol      { margin: 0 1.5em 1.5em 1.5em; }
ul ol li 	{ background: none; padding-left: 0; }

ul          { font-size: 1.083em; margin-left: 1.5em; }
ol          { list-style-type: decimal; }
dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}

/* Tables
-------------------------------------------------------------- */

table { 
	border: 1px solid #DCEDF5; 
	border-bottom: none; 
	border-right: none; 
	margin-bottom: 1.4em; 
	width:100%; 
}

th { 
	color: #003B69; 
	background: #c0d3dc url(../images/design/th-bg.jpg) 0 0 repeat-x; 
	font-weight: bold; 
	border-right: 1px solid #DCEDF5; 
}

th,td,caption { padding: 4px 10px 4px 5px; }

td { 
	border-bottom: 1px dashed #DCEDF5; 
	border-right: 1px solid #DCEDF5;  
	color: #003B69;
}

tfoot       { font-style: italic; }
caption     { background: #eee; text-align: center; }

/* -------------------------------------------------------------- 
	PAGE STRUCTURE
	Elements that make up the skeleton of the layout and holds things together
----------------------------------------------------------- */
body {
	margin: 0;
	height: 100%;
	color: #003B69;
	font: 62.5% verdana, helvetica, sans-serif;
	text-align: center;
	background: #FFFFFF url(../images/design/body-bg.jpg) 0 0 repeat-x;
}

#page {
	background: url(../images/design/page-bg.jpg) 50% 10px no-repeat;
	font-size: 1.2em; /* this, along with body font size of 62.5% renders type approximately 12px in size across all browsers */
	padding: 0;
	text-align: left;
	min-width: 800px;
	min-height: 1000px;
}

#wrapper {
	margin: 0 auto;	
	width: 720px;
	padding-left: 16px;
}

#header {
	border-top: 10px solid #003B69;
	height: 96px;
	position: relative;	
	z-index: 200;
}

#mainContent { position: relative; padding: 8px 20px 1.5em 10px; min-height: 450px; }
#mainContentInner { background: url(../images/design/aside-bg.gif) 0 0 repeat-y; }

/* Template Specific */
body.home-page #mainContent 				{ background: none; padding-left: 0; padding-right: 0; }

body.inner-1-col #mainContentInner 			{ background: none; padding: 50px 15px 0 15px; }
body.home-page #mainContentInner 			{ background: none; padding-top: 320px; } 
body.contact-us-page #mainContentInner, 	
body.get-involved-page #mainContentInner	{ background: url(../images/design/horizontal-lines.gif) 15px 25px no-repeat; } 
body.current-event-page #mainContentInner 	{ padding-top: 0; } 

#mainSection {
	float: left;
	width: 469px;
	padding-top: 5.5em;	
	overflow: hidden; /* Prevent float drop in ie6 */
}

/* -------------------------------------------------------------- 
	PAGE STRUCTURE ELEMENTS
	Elements  such as logos, search bars, and any other design element repeated throughout the site, but doesn't effect the structural layout
----------------------------------------------------------- */
    
#logo {
	width: 127px;
	height: 144px;
	display: block;
	background: url(../images/design/logo.gif) 0 0 no-repeat;
	position: absolute;
	right: 20px;
	bottom: -71px;
	z-index: 200;
	margin: 0;
	padding: 0;
}
	body.home-page #logo { 
		background-image: url(../images/design/home-logo.gif);
		height: 145px;
	}
		
	#logo a {
		width: 127px;
		height: 144px;
		display: block;
		text-indent: -9999px;
	}

#breadCrumbs { 
	list-style: none; 
	margin: 0; 
	margin-bottom: 1em; 
}

	#breadCrumbs li { 
		font-size: 0.917em; 
		margin: 0; 
		display: inline; 
		color: #003B69; 
		text-transform: uppercase; 
		font-size: 0.818em; 
	}

p.contactNumber {
	border-bottom: 1px dashed #005596;
	color: #FFFFFF;
	font: 0.917em georgia, sans-serif;
	margin: 5px 0 5px 0;
	padding-bottom: 10px;
	text-transform: uppercase;
	width: 541px;
}

	p.contactNumber a.donate {
		background: #005596 url(../images/design/donate-arrow.gif) 88% 12px no-repeat;
		color: #FFFFFF;
		float: right;
		font: bold 0.917em verdana, sans-serif;
		padding: 8px 18px 8px 8px;
		text-decoration: none;
	}
	
	p.contactNumber span {
		clear: right;
		display: inline-block;
		font-size: 1.2em;	
		text-transform: none;
	}
		p.contactNumber span a {color: #FFFFFF; text-decoration: none; }
			
			p.contactNumber span a:hover {color: #00BFE5; text-decoration: underline;}

#footer { 
	border-top: 1px dashed #005596; 
	color: #005596; 
	font-size: 0.833em;
	padding: 1em 0;
}

#footerLeft 		{ float: left; width: 279px; }
#footerLeft span	{ display: block; }
#footerRight 		{ float: right; width: 437px; text-transform: uppercase; text-align: right; }
#footerRight a		{ color: #005596; }

/* -------------------------------------------------------------- 
	PAGE STYLES
----------------------------------------------------------- */

/* Homepage */

#animation { 
	height: 320px; 
	left: 0; 
	position: absolute; 
	top: -7px; 
	z-index: 10; 
}

#homepageIntro 		{ float: left; width: 535px; } /*360px*/
#homepageIntroInner { padding-right: 45px; }

#newsEvents			{ float: left; width: 180px; }
#newsEventsInner 	{ padding-right: 25px; }

#newsEventsInner ul 		{ margin: 0; list-style: none; }
#newsEventsInner li			{ color: #003B69; margin-bottom: 1em; font: bold 10px verdana, sans-serif; }
#newsEventsInner li span 	{ display: block; }
#newsEventsInner li a	 	{ color: #003B69; font-weight: normal; font-size: 11px; text-decoration: none; }
#newsEventsInner li a:hover	{ text-decoration: underline; }

#homepageCallout { overflow: hidden; width: 180px; }

.oldLogo {margin-bottom: 1em; }

/* List Template */

.pageList, .newsList {
	border-top: 1px dashed #005596;
	clear: both;
	padding: 1em 0;
}

.pageList h2, .pageList h3  { margin-bottom: 0.5em; }
.pageListLast,
.newsListLast 				{ border: 0; }
	
.pageList,
.thumbnail 					{ padding-left: 96px; width: 373px; }

.pageList img,
.thumbnail img 				{ float: left; margin-left: -96px; margin-bottom: 1em; }
	
.pressItem {
	border-bottom: 1px dashed #005596;
	clear: both;
	float: left;
	margin-bottom: 1.5em;
	padding: 0 0 1.5em 61px;
}

	.pressItem h3  { margin-bottom: 0.5em; }
	.pressItem img { float: left; margin-left: -53px; }
	.pressItemLast { border: 0; }
	
	
/* Event Archive */

#upcomingEvent, 
#pastEvents .event { 
    border-bottom: 1px solid #BDD0E6; 
    float: left; 
    padding-left: 60px; 
    margin-bottom: 1em; 
}

#upcomingEvent h3 { margin-bottom: 0.5em; }
#upcomingEvent img,
#pastEvents .event img { float: left; margin-left: -60px; }

#pastEvents 		{ float: left; margin-right: 20px; width: 290px; }
#pastEvents .event 	{ 
						border-bottom: 1px dashed #005596; 
						float: left; 
						width: 230px; 
						padding-bottom: 1em; 
					}

#allEvents 				{ float: left; width: 159px; }
#allEvents ul 			{ font-size: 0.917em; list-style: none; margin: 0; }
#allEvents li			{ line-height: 1.25; }
#allEvents li strong 	{ margin-right: 10px; }

/* Current Event */

#eventBanner		{ border-bottom: 1px solid #BDD0E6; height: 140px; margin-bottom: 1em; }
#eventBanner img 	{ margin-bottom: 0;}

#eventIntro 					{ float: left; margin-bottom: 1em; width: 659px; }

#eventIntroContent				{ float: left; margin-right: 9px; width: 520px; }
#eventIntroContent .summary p 	{ border-bottom: 0; margin-bottom: 0;  }

#eventWebsite 					{ float: left; padding-top: 30px; 	text-align: right; width: 130px; }
#eventWebsite a.link			{ font-size: 0.833em; text-transform: uppercase; }

#eventInfo 			{ float: left; padding-top: 1.5em; width: 659px; }
#eventHighlights,
#eventMedia,
#pastEventsList 	{ float: left; }

#eventHighlights 		{ margin-right: 31px; width: 268px; }
#eventHightlights li 	{ margin-bottom: 1em; }

#eventMedia				{ margin-right: 21px; width: 190px; }

#pastEventsList			{ width: 149px; }
#pastEventsList img		{ margin-bottom: 1em; }
#pastEventsList ul 		{ font-size: 0.917em; list-style: none; margin: 0 0 1em 0	; }
#pastEventsList li		{ line-height: 1.25; }

/* Donate Page */

.donate-page li {margin-bottom: .5em;}
.donate-page li ul { margin:.5em 1.5em; }

/* Contact Us Page */

#contactForm 		{ float: left; width: 439px; overflow: hidden; }
#contactFormInner 	{ padding: 0 29px 0 0; }

#contactForm form 				{ padding: 0 50px; text-align: right; }
#contactForm fieldset			{ background: none; padding: 0 0 1.5em 0; }
#contactForm fieldset.submit 	{ border: 0; }

#contactInformation 		{ float: left; width: 218px; }
#contactInformationInner 	{ padding: 45px 0 0 19px; }

#contactInformation .vcard { margin-bottom: 1.2em; }

#contactInformation h2,
#contactInformation h3 { color: #005596; }

#contactInformation h2 { margin-bottom: 0.5em; }
#contactInformation h3 { margin-bottom: 0.25em; text-transform: capitalize; }

#contactInformation .adr 			{ margin-bottom: 1em; }
#contactInformation .street-address,
#contactInformation .tel 			{ display: block; }

#contactFormInner .fieldArea textarea	{ height: 50px; }
#contactFormInner .fieldArea select 	{ width: 310px; }
#contactFormInner .htmlSelectOneMenu label { 
	width: 100%; 
	display: block; 
	margin-bottom: 10px;
	text-align: right; 
}


/* Get Involved Templates */
#getInvolved 		{ float: left; width: 439px; }
#getInvolvedInner 	{ padding: 0 29px 0 0; }

#callouts 		{ float: left; width: 218px; }
#calloutsInner 	{ padding: 0 0 0 19px; }

/* -------------------------------------------------------------- 
	NAVIGATION
----------------------------------------------------------- */

#mainMenu {
	list-style: none;
	margin: 0;
}

	#mainMenu li {
		float: left;
		margin-right: 15px;
	}
	
	#mainMenu li.last-child { margin-right: 0; }
	
		#mainMenu a {
			color: #005596;
			font: 1.3em georgia, sans-serif;
			padding: 2px 4px;
			display: block;
			text-transform: uppercase;
			text-decoration: none;
		}
		
		#mainMenu a:hover {
			background: #578FBA;
			color: #FFFFFF;
		}
		
		#mainMenu a.active {
			color: #FFFFFF;
			text-shadow: 1px 1px 1px #578FBA;
		}
		
/* Local Navigation
-------------------------------------------------------------- */
#localNav {
	float: left;
	margin: 0 50px 1.5em 0;
	padding-bottom: 2em;
	width: 170px;
	text-align: center;
}
	#localNav p {margin: 0 1em;}

	#localNav h3 { 
		background: #BDD0E6 url(../images/design/localnav-header-bg.gif) 0 0 no-repeat; 
		border-bottom: 1px solid #FFFFFF;
	}
	
		#localNav h3 a { 
			background: none;
			color: #FFFFFF;
			display: block; 
			font-size: 1.5em; 
			padding: 0.5em 5px;
			text-decoration: none;
			text-transform: none;
			text-align: center;
		}
	
	#localNav ul {
		border-bottom: 1px solid #FFFFFF;
		list-style: none;
		margin: 0 0 1.5em 0;
		padding-bottom: 1em;
		text-align: left;
	}

	#localNav li {
		padding: 0;
		margin-bottom: 0.5em;
		display: inline;
	}
	
		#localNav li a {
			background: url(../images/design/localnav-bullet.gif) 11px 10px no-repeat;
			color: #003B69;
			display: block;
			font-weight: bold;
			font-family: georgia, sans-serif;
			padding: 3px 16px 3px 20px;
			text-decoration: none;
			text-transform: uppercase;
		}
		
		#localNav li a:hover {
			background: #578FBA url(../images/design/localnav-bullet-hover.gif) 11px 10px no-repeat;
			color: #FFFFFF;
		}
	
		#localNav li.active a {
			background: #BDD0E6 url(../images/design/localnav-arrow.gif) 11px 8px no-repeat;
			color: #FFFFFF;
		}

			#localNav li ul { background-color: #dee7f2; padding: 0.5em 0 0 0; border-bottom: none; margin-bottom: 0; }
			
				#localNav li ul li { padding: 0 10px; display: block; }
			
					#localNav li.active ul li a { background: #dee7f2 url(../images/design/localnav-small-bullet.gif) 8px 9px no-repeat; padding-left: 15px; color: #005596; text-transform: capitalize; font-size: 0.833em; }
					
					#localNav li.active ul li a:hover { background: #578FBA url(../images/design/localnav-small-bullet-hover.gif) 8px 9px no-repeat; color: #FFFFFF; }
					
					#localNav li.active ul li a.active { background: #BDD0E6 url(../images/design/localnav-small-bullet-hover.gif) 8px 9px no-repeat; color: #FFFFFF; }
					
/* -------------------------------------------------------------- 
	IMAGE ELEMENTS
----------------------------------------------------------- */		

/* Image Gallery */
	
#eventPhotos { 
	border-bottom: 1px solid #BDD0E6;
	border-top: 1px solid #BDD0E6;
	clear: left; 
	padding: 12px 25px; 
	position: relative;
}

#eventPhotosInner { 	
	height: 100px;
	overflow: hidden;
	position: relative;
}
	
#eventPhotos #galleryItems 		{ position: absolute; width: 9999em; }
#eventPhotos #galleryItems div 	{ float: left; height: 100px; margin-right: 20px; }
#eventPhotos #galleryItems a 	{ display: block; height: 100px; width: 100px; }
			
.galleryLeft,
.galleryRight {
	background: url(../images/design/gallery-arrows.gif) 0 0 no-repeat;
	cursor: pointer;
	display: block;
	height: 100px; 
	top: 12px;
	position: absolute;
	width: 20px;
}
	
.galleryLeft	{ left: 0; background-position: 0 0; }
.galleryRight 	{ right: 0; background-position: -20px 0; }
.disabledPrev	{ background-position: -20px -100px; }
.disabledNext	{ background-position: 0 -100px; }

/* Alternative Gallery Styles */
body.get-involved-page #eventPhotos						{ border-top: 0; margin-bottom: 3em; padding-right: 160px; }
body.get-involved-page #eventPhotos	.galleryRight		{ right: 120px; }
body.get-involved-page #eventPhotosInner 				{ width: 460px; }

/* Callouts */
.volunteerBtn,
.donateBtn { 
	background: url(../images/btn/btn-volunteer.gif) 0 0 no-repeat;
	display: block;
	height: 50px;
	width: 199px;
	text-indent: -9999px;
	margin-bottom: 1em;

}

.donateBtn { background-image: url(../images/btn/btn-donate.gif); }

.volunteerBtn:hover,
.donateBtn:hover 	{ background-position: 0 -50px; }


.board {float:right; width: 250px; margin: 5px 0 10px 20px; }
	.board p {font-size: .75em; padding-top: 5px; }


/* -------------------------------------------------------------- 
	FORM ELEMENTS
----------------------------------------------------------- */
fieldset {
	border-bottom: 1px dashed #BDD0E6;
	margin-bottom: 1.5em;
	padding: 1em 1.5em;
}

legend { font-weight: bold; }

.fieldArea 			{ margin-bottom: 0.833em; float: left; }
.fieldArea input, 
.fieldArea select, 
.fieldArea textarea { color: #003B69; padding: 2px 2px; border: 1px solid #BDD0E6; width: 190px; font-size:1em; }
textarea { font-family: inherit; }

.otherOrgsFieldArea label {
	float: none;
	width: auto;
}
.otherOrgsFieldArea textarea {
	display: block;
	width: 320px;
	height: 2.5em;
}

label {
	color: #003B69;
	float: left;
	margin-right: 10px;
	text-align: right;
	text-transform: none;
	width: 100px;
	line-height: 18px;
}

.commandButton { border: 0; cursor: pointer; padding: 5px 8px; float: right; }

span.message { 
	display: block; 
	font-size: 0.833em; 
	text-align: right; 
	padding-top: 0.5em;
}

span.error { color: #DD0000; }
		
div.errors {
	background: #FEFAD9 url(../images/forms/bg_error.gif) 0 0 repeat-x;
	border: 1px solid #E0D75F;
	display: block;
	margin: 0 0 2em 0;
	text-align: left;
}

div.errorsInner {
	background: url(../images/forms/big_error.gif) 15px 1em no-repeat;
	padding: 1em 10px 1em 80px;
}

/* -------------------------------------------------------------- 
	MISC
----------------------------------------------------------- */

.floatLeft { float: left; }
.floatRight { float: right; }
.clearLeft { clear: left; }
.clearRight { clear: right; }
.clear {clear: both;}
.first { margin-left:0; padding-left:0; }
.last  { margin-right:0; padding-right:0; }
.top   { margin-top:0; padding-top:0; }
.bottom { margin-bottom:0; padding-bottom:0; }

img.floatLeft { margin: 0 1.5em 1.5em 0; }
img.floatRight { margin: 0 0 1.5em 1.5em; }

.volunteerImg {text-align: center; margin-bottom: 0;}
.volunteer {text-align: center; font-weight: bold;}

/* ----------------
	CLEAR FLOATS WITHOUT EXTRA HTML MARKUP
	add this class to the element that needs to be cleared - This works in modern browser that support the after pseudo element
    ------------- */ 
.group:after { 
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
}


/* Board Members page */

.summary .boardPhoto {float: right; margin: 0 0 1.5em 1em;}
	.summary .boardPhoto p {font-size: .75em; }
	
/* Press Kit Page */

.origLogo {background: url(../images/design/press-orig-logo-bg.jpg) 0 0 repeat-x; float: right; width: 200px; padding: 10px; clear: left; }
	
	.origLogo a {float: left; margin-right: 10px; }
	
.col_1 { float: left; width: 50%; clear: left; }
.col_2 { margin-left: 52%; }




/* Pagination */
.pagination { border-top: 1px dashed #005596; padding-top: 1em; }
.pagination a { padding: 0 0.25em; }
.pagination .pageInfo { float: right; }
