/*  The following CSS Reset was written by Dejan Cancarevic
http://stylizedweb.com/2008/02/14/10-best-css-hacks/         */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}
 
/* Here is a list of all the DIVs in Whiteboard. */

#container{}
.post{}
.postmeta{}
.postnavigation{}
#searchform{}
#sidebar{}
#comments
.comments_navigation{}
.comments_navigation{}
.comments_reply{}
.comments_text{}
.comments_meta{}



strong {
	font-weight: bold;
}

/*******************************************************
 * 				BASE AND BACKGROUND ELEMENTS
 */

body {
	background: #0099cb url('../images/bg-shadow.gif') repeat-y center top;
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: "Trebuchet MS", 'Lucida Grande', Helvetica, Arial, Verdana, Sans-Serif;
}

#container {
	background: transparent url('../images/bg-gradient.jpg') no-repeat center top;
	width: 100%;
	height: 100%;
}


/*******************************************************
 * 			HEADER AND MAIN NAVIGATION
 */
#header {
	position: relative;
	width: 803px;
	height: 409px;
	margin: 0px auto 0px auto;
}

/* this needs to randomly cycle through images, so maybe this gets replaced on the page later */
#topTitle h1 a {
	position: absolute;
	background: transparent url('../images/header-hula-hoop.jpg') no-repeat center top;
	text-indent: -99999px;
	width: 755px;
	height: 283px;
	margin: 0px 0px 24px 24px;
}

#topNav {
	/*border: 1px solid green;*/
	position: relative;
	height: 106px;
	top: 283px;
	padding-left: 26px;
	overflow: hidden;
}

#topNav li {
	list-style: none;
	float: left;
}

#topNav li a {
	position: relative;
	display: block;
	width: 189px;
	height: 126px;
}

#topNav .page_item {
	text-indent: -999999px;
}

#topNav #our-mission a {
	background: transparent url('../images/nav-our-mission.gif') no-repeat left top;
}

#topNav #our-mission.current_page_item a {
	background: transparent url('../images/nav-our-mission-selected.gif') no-repeat left top;
}

#topNav #the-school a {
	background: transparent url('../images/nav-the-school.gif') no-repeat left top;
}

#topNav #the-school.current_page_item a {
	background: transparent url('../images/nav-the-school-selected.gif') no-repeat left top;
}

#topNav #get-involved a {
	background: transparent url('../images/nav-get-involved.gif') no-repeat left top;
}

#topNav #get-involved.current_page_item a {
	background: transparent url('../images/nav-get-involved-selected.gif') no-repeat left top;
}

#topNav #donate-now a {
	background: transparent url('../images/nav-donate-now.gif') no-repeat left top;
}

#topNav #donate-now.current_page_item a {
	background: transparent url('../images/nav-donate-now-selected.gif') no-repeat left top;
}

/**********************************************************************
 * 					MAIN CONTENT
 */

#content {
	/*border: 1px solid green*/;
	background: transparent url('../images/content-top-gradient.gif') repeat-x left top;
	position: relative;
	width: 707px; /* 755- padding */
	margin: 0px auto 0px auto;
	padding: 24px 24px 24px 24px;
	display: block;
}

#content h1 {
	font-size: 200%;
	font-weight: bold;
	text-transform: uppercase;
	color: #ed1c24;
	letter-spacing: 3pt;
}

#content h1 {
	font-size: 210%;
	font-weight: bold;
	text-transform: uppercase;
	color: #ed1c24;
	letter-spacing: 1pt;
	margin-bottom: 16px;
}

#content h2 {
	font-size: 150%;
	font-weight: bold;
	color: #1eaad4;
	letter-spacing:.2pt;
	margin-bottom: 6px;
}

#content p {
	font-size: 125%;
	color: #4f4f4f;
	margin-bottom: 25px;
}

#content .testimonial {
	position: relative;
	width: 306px; /* 354 -margin */
	float: right;
	display: block;
	margin: 0px 24px 24px 24px;
}

#content .testimonial img {
	border: 1px solid #ccc;
	padding: 3px;

}

#content .testimonial q {
	display: block;
	font-style: italic;
	font-size: 125%;
	color: #0d82a7;
	margin: 12px 12px 12px 12px;
}

#content .testimonial cite {
	display: block;
	color: #4f4f4f;
	margin: 0px 12px 12px 12px;
	font-style: normal;
}

#content ul {
	color: #4f4f4f;
	font-size: 130%;
	margin: 5px 0px 0px 30px;
}

#content ul li {
	margin-bottom: 5px;	
}

#content table {
	/*border: 1px solid green;*/
}

#content td {
	/*border: 1px solid blue;*/
	vertical-align: top;
	padding: 16px 0px;
}


/* this is for sticked announcemnt posts - imported from the blog*/
#content .announcement {
	width: 340px;
	background-color: #ffeede;
	padding: 10px;
	margin-bottom: 15px;
	font-size: 95%;
}

#content .announcement p {
	margin-bottom: 5px;
}

#content .announcement img.alignleft {
	float: left;
	margin: 0px 20px 8px 0px;
}

#content .announcement h2 {
	color:#FF6600;
	font-size:210%;
	font-weight:bold;
	margin:0px 0px 8px 0px;
}

#content .announcement h2 a {
	color:#FF6600;
	text-decoration:none;
}