/* -------------------------------------------------------------
	St. John's Episcopal Church
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Description:	Screen Style
	Filename:		style.css
	Version:		1.0
	Date:			29 August 2006
------------------------------------------------------------- 

Table of Contents (subject to change):
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

	+ Re-defined Styles
	+ Custom Classes
		- Document Setup
		- Masthead
		- Sidebar
		- Body
		- Footer
	+ Form Styles
	+ Miscellaneous

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
*/


/* -------------------------------------------------------------
	Re-defined Styles
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

body {
	background: #341416 url(/images/bg_body.gif);
	font: normal 11px/1.6em Verdana, Helvetica, sans-serif;
	color: #2d1203;
	text-align: center;
}

body,
h1, h2, h3, h4, h5, h6,
ul, li,
p,
form, fieldset,
div {
	margin: 0;
	padding: 0;
}

fieldset {
	border: 0px;
}

a img {
	border: none;
}

a:link, a:visited {
	color: #592328;
	text-decoration: underline;
}

a:hover, a:active {
	color: #592328;
	text-decoration: none;
}

ul li {
	padding-left: 10px;
	position: relative;
	list-style-type: none;
	background: url(/images/icon_list.gif) no-repeat 0 7px;
}




/* -------------------------------------------------------------
	Custom Classes
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/*	Document Setup
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#index {
	width: 720px;
	margin: 0 auto;
	padding: 0;
	border: 20px solid #373431;
	border-top: 13px solid #373431;
	text-align: left;
	background: #373431 url(/images/bg_index.gif) repeat-y;
}

.title, .title a {
	display: block;
	text-indent: -9000em;
	overflow: hidden;
}

#body p,
#body ul,
#body ol {
	margin-bottom: 15px;
}



/*	Masthead
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#masthead {
	width: 100%;
	height: 260px;
	clear: both;
	position: relative;
	z-index: 1;
	overflow: hidden;
	background: url(/images/img_masthead_home.jpg) no-repeat;
}

#interior #masthead {
	height: 155px;
	background: url(/images/img_masthead_education.jpg) no-repeat;
}

/*
#interior #masthead.about {
	background: url(/images/img_masthead_about.jpg) no-repeat;
}

#interior #masthead.groups {
	background: url(/images/img_masthead_extra.jpg) no-repeat;
}

#interior #masthead.outreach {
	background: url(/images/img_masthead_outreach.jpg) no-repeat;
}

#interior #masthead.education {
	background: url(/images/img_masthead_education.jpg) no-repeat;
}

#interior #masthead.resources {
	background: url(/images/img_masthead_resources.jpg) no-repeat;
}

#interior #masthead.events {
	background: url(/images/img_masthead_events.jpg) no-repeat;
}
*/

#brand, #brand a {
	width: 284px;
	height: 65px;
}

#brand {
	position: absolute;
	left: 16px;
	bottom: 40px;
}



/*	Sidebar
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#sidebar {
	width: 193px;
	min-height: 395px;
	padding-top: 29px;
	float: left;
	background: #373431 url(/images/bg_sidebar.jpg) no-repeat;
}


/* --- ui --- */

#ui {
	width: 187px;
	padding-left: 6px;
}

#ui li {
	margin-bottom: 7px;
	padding: 0;
	background: transparent;
}

#ui a {
	height: 22px;
	width: 187px;
	display: block;
	overflow: hidden;
	text-indent: -9000em;
}

#ui a:hover, #ui a:active {
	background-position: top right;
}

#ui_home, #ui_home a {
	background-image: url(/images/ui_home.gif);
}

#ui_about, #ui_about a {
	background-image: url(/images/ui_about.gif);
}

#ui_groups, #ui_groups a {
	background-image: url(/images/ui_groups.gif);
}

#ui_outreach, #ui_outreach a {
	background-image: url(/images/ui_outreach.gif);
}

#ui_education, #ui_education a {
	background-image: url(/images/ui_education.gif);
}

#ui_resources, #ui_resources a {
	background-image: url(/images/ui_resources.gif);
}

#ui_events, #ui_events a {
	background-image: url(/images/ui_events.gif);
}

/* --- ui secondary --- */

#ui ul li {
	margin: 0;
}

#ui ul a:link, #ui ul a:visited {
	width: 162px;
	height: auto;
	padding-left: 25px;
	text-indent: 0;
	background: url(/images/icon_arrow_ui.gif) no-repeat 15px 7px;
	color: #fff;
	text-decoration: none;
}

#ui ul a:hover, #ui ul a:active, #ui ul a:focus {
	color: #999;
	background-position: 15px 7px;
}


/*	Body
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/*	Body: Content
- - - - - - - - - - - - - -  */

#body {
	width: 464px;
	min-height: 390px;
	margin-top: -16px;
	padding: 23px 30px 27px 33px;
	float: left;
	position: relative;
	z-index: 2;
	background: #f1efe5 url(/images/bg_content_body.jpg) no-repeat top right;
}

#header {
	margin-bottom: 10px;
	color: #736e55;
	font: normal 26px Georgia, "Times New Roman", Times, serif;
}


/* --- Image Positioning --- */

.floatLeft {
	float: left;
	padding: 0 8px 8px 0;
}

.floatRight {
	float: right;
	padding: 0 0 8px 8px;
}


/* --- Sitemap --- */

.sitemapList {
	width: 49%;
	padding: 0;
	float: left;
}


/*	Body: subcontent
- - - - - - - - - - - - - -  */

#subcontent {
	padding-top: 10px;
	clear: both;
}

#subcontent li {
	width: 224px;
	height: 89px;
	margin-left: 14px;
	padding: 0;
	display: inline;
	float: left;
	background: transparent;
}

#subcontent li.first {
	margin: 0;
}

#title_upcoming_events, #title_upcoming_events a {
	width: 224px;
	height: 89px;
	background: url(/images/img_upcoming_events.jpg) no-repeat;
}

#title_about_stjohns, #title_about_stjohns a {
	width: 224px;
	height: 89px;
	background: url(/images/img_about_stjohns.jpg) no-repeat;
}




/*	Footer
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#footer {
	width: 760px;
	height: 75px;
	margin: 0 auto;
	padding-top: 5px;
	clear: both;
	border-top: 6px solid #2a2725;
	color: #98555b;
	text-align: left;
	font: normal 11px Georgia, "Times New Roman", Times, serif;
}

#footer a:link, #footer a:visited {
	color: #98555b;
}

#footer ul li {
	padding: 0;
	float: left;
}

#copyright {
	width: 500px;
	float: left;
}

#copyright a {
	margin-left: 120px;
}

#siteCredit {
	width: 250px;
	float: right;
	text-align: right;
}



/* -------------------------------------------------------------
	Form Styles
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.inputClass {
	border: 1px solid #999;
	font: normal 11px/1.4em Arial, Helvetica, sans-serif;
}

.required {
	color: #f00;
}





/* -------------------------------------------------------------
	Miscellaneous
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* http://www.access-board.gov/sec508/guide/1194.22.htm#(o) */
#skip {
	position: absolute;
	left: -9000em;
}

/* http://microformats.org/wiki/hcard */
.vcard {
	display: none;
}

.clearfix {
	width: 100%;
	height: 0;
	clear: both;
}