/* always necessary to define html and body values due to browser differences */
html {margin: 0; padding: 0px;}
body {margin: 0px; padding: 0px; text-align: center; border: 0px; font: 11px Verdana, sans-serif;}
body a{color: #4286A4; text-decoration: none;}
body a:hover{color: #99C2D6; text-decoration: none;}

div#top_banner a img {
	border: 0px;
}




h1 {
	margin: 12px 0px 10px 3px;
	padding: 0px;
	color: #306378;
	font: 16px Verdana, sans-serif;
	font-weight: bold;
	}

/**No Idea why the h2 h3 h4 have to have td#main_content defined but h1 doesn't but there we go... **/

td#main_content {
	margin: 0px 2px 10px 5px;
	font: 12px/1.25 Verdana, sans-serif;
	color: gray;
	letter-spacing: 0.03em;
	line-height: 1.4em;
	}
	
td#main_content h2 {
	margin: 0px 0px 10px 3px;
	padding: 0px;
	color: #306378;
	font: 16px Verdana, sans-serif;
	font-weight: bold;
	}
	
	
td#main_content h3 {
	margin: 0px 0px 10px 3px;
	color: #306378;
	font: 14px Verdana, sans-serif;
	font-weight: bold;
	}

td#fr_col h3 {
	margin: 20px 0px 10px 3px;
	color: #306378;
	font: 14px Verdana, sans-serif;
	font-weight: bold;
	}


td#main_content h4 {
	margin: 0px 0px 10px 3px;
	font: 12px Verdana, sans-serif;
	font-weight: bold;
	color: #306378;
	}

p {
	margin: 0px 2px 10px 5px;
	font: 12px/1.25 Verdana, sans-serif;
	color: gray;
	letter-spacing: 0.03em;
	line-height: 1.4em;
	}

ol {	font: 12px/1.25 Verdana, sans-serif;
	color: gray;
	letter-spacing: 0.03em;
	}

ul {	font: 12px/1.25 Verdana, sans-serif;
	color: gray;
	letter-spacing: 0.03em;
	}


div#webpage {
	width: 740px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 40px;
	text-align: left;
	}
		
/****** top banner *********/
div#top_banner {
	background: white url('/graphics/banner_curl_450_55.gif') no-repeat bottom right;
}

div#top_banner_home {
	position: absolute;
	top: 55px;
	right: 30px;
}

div#top_banner_home a{
	font-weight: bold;
	text-decoration: none;
}

div#top_banner_contact {
	position: absolute;
	top: 70px;
	right: 30px;
}

div#top_banner_contact a{
	font-weight: bold;
	text-decoration: none;
}

div#top_banner_members {
	position: absolute;
	top: 85px;
	right: 30px;
}

div#top_banner_members a{
	font-weight: bold;
	text-decoration: none;
}


/****** Main navigation *********/
/* Tried many different methods to position these items (padding / margins / floating with the grpahic as a background image). All would work on one browser but then not the other (aargh!!) - so went for individual relative positioning in the end 
*/

div#navigation {
	position: relative;
	top: 0px;
	left: 40px;
	/* this bottom margin is needed to bring back up the bottom of the div after the relative positioning of it's elements */
	margin-bottom: -100px;
}

.nav_item {
	width: 100px;
	height: 25px;
	text-align: center;
	position: relative;
	font: 12px Verdana, sans-serif;
}

.nav_item a{
	font-weight: bold;
	text-decoration: none;
}

div#about_us {
	top: 5px;
	left: 0px;
}
div#whats_on {
	top: -20px;
	left: 160px;

}
div#news {
	top: -45px;
	left: 320px;
}
div#what_we_do {
	top: -70px;
	left: 480px;
}

div#nav_graphic {
	top: -100px;
	left: 645px;
}
/****** content *********/

/* relative position to ensure this and all it's content sits on top of the navigation div.*/
/* navigation div is 100 px deep & falls into the content*/
/* this lack of relative position was the cause of the links not working at the top of 'content' */
table#table_content {
	position: relative;
}

/* top_row and bot_row of the table must have the same parameters to line up */
td#top_row{
	text-align: left;
}

td#top_row img#content_top_curl {
	margin: 0px 0px 0px 60px;
}

td#bot_row{
	text-align: left;
}

td#bot_row img#content_bot_curl {
	margin: 0px 0px 0px 60px;
}

/* below columns must ALL add up to 740 */
td#fl_col{
	width: 60px;
	color: white;
}
td#main_content{
	/* vert align is to keep content at the top of the cell */
	vertical-align: top;
	width: 433px;
	/*background: white;*/
}
td#col_3{
	width: 26px;
	/* vert align is to keep col3_top_curl_26_26.gif at the top of the cell */
	vertical-align: top;
	background: white url('/graphics/col3_bot_curl_26_127.gif') no-repeat bottom right;
	
}
td#fr_col{
	/* width here should be 276px but that makes the col3 curl 1px out on IE*/
	/* so have set this 4th col to be one less (275) to pull the col3 curl back to the right*/
	/* mozilla unaffected on the value of this */ 
	width: 220px;
	vertical-align: top;
	/*background: white;*/
}

div.content_with_image img{
	float: right;
	border: 1px solid black;
	margin: 5px;
}

/*** used in /index.php & /diary/index.php****/

#diary_week {
	padding: 0px 0px 0px 0px;
}

.diary_day {
	color: gray;
	font: 11px Verdana, sans-serif;
	padding: 0em 0px 0.5em 0px;
	position: relative;          /** without relative position hyperlink of first day in list breaks in Firefox - no idea why!!**/
	}
.diary_day p:first-line {
	font-weight: bold;
	}


/***************** nav_path *****/

#nav_path {
	text-align: right;
	font: 10px Verdana, sans-serif;
	position: relative;          /** without relative pos hyperlink breaks in Firefox - no idea why!!**/
	margin-bottom: 10px;
	color: gray;
	}

/**
#nav_path a{
	color: #AE5439;
	}
#nav_path a:visited{
	color: #AE5439;
	}
**/



/*********************** right hand navigation **************/

.rh_nav {
	text-align: left;
	position: relative;          /** without relative pos hyperlink breaks in Firefox - no idea why!!**/
	margin: 20px 0px 0px 10px;
	color: #99C2D6;
	font: 14px Verdana, sans-serif;
	font-weight: bold;
}

.rh_nav a{
	font-weight: bold;
}


/****************forms*****************/
table.form {
	color: gray;
	/*backgound: white;*/
	border: 0px none;; 
	font-style:normal; 
	font-variant:normal; 
	font-weight:normal; 
	line-height:1.25; 
	font-size:12px; 
	font-family:Verdana, sans-serif;
}

table.form td.form_cell_prompt {
	width: 200px;
	}

/************pastors_blog_header**********/
div#pastors_blog_header {
	height: 50px;
	background: white url('/graphics/pastors_blog_fade_in.jpg') no-repeat top right;
	/**border-top: 1px solid gray; **/
	margin: 0px 0px 10px 0px;
}

div#pastors_blog_header h3 {
	margin: 0px;
}

div#pastors_blog_header p {
	margin: 3px 0px 0px 5px;
	font: 12px/1.25 Verdana, sans-serif;
	color: gray;
	letter-spacing: 0.03em;
	}

/************subsection*******************/

div.subsection {
	/** border-top: 2px solid #CCE0EB; **/
	border-top: 1px solid #4286A4;
	padding-top: 10px;
}

/************w3c compliance ***************/
div#w3c_xhtml {
	margin-top: 5px;
	text-align: right;
}

div#w3c_xhtml a img {
	border: 0px;
}


/******** alerts **********/
/** these also exist in members.css **/

div.alert {
	margin: 0px 2px 10px 5px;
	font: 12px/1.25 Verdana, sans-serif;
	color: red;
	letter-spacing: 0.03em;
	}

div.alert_success {
	margin: 0px 2px 10px 5px;
	font: 12px/1.25 Verdana, sans-serif;
	color: green;
	letter-spacing: 0.03em;
	}

/**********keeping box structure from collapsing with floating images *****/
/**
	this clear div enables us to keep the box structure and thus stopping
	the images from floating up next to each other.
	better then doing a min-height as that does not account for the amount of content in the box.
	see http://www.greywyvern.com/code/min-height-hack for explanation
**/
.clear {
    clear:both;
    height:1px;
    overflow:hidden;
  }