body {
	background: #0D87BD url('/images/northside_bg.png') repeat-x;
	margin: 0px;
	padding: 0px;
	font: 1em Verdana, Arial, Helvetica, sans-serif;
	behavior: url(css/csshover.htc);
}

#wrapper {
	margin: 0 auto;
	padding: 0;
	width: 760px;
	text-align: left;
}

#main {
	margin: 5px 0 0 0;
	width: 760px;
	background-color: #fff;
	border-left: 5px solid #fff;
	border-right: 5px solid #fff;
	border-bottom: 5px solid #fff;
	border-top: 5px solid #fff;
}

#header {
	width: 760px;
	height: 175px;
	position: relative;
}


---------------------------
	TOP NAVIGATION
---------------------------
*/

* {margin: 0; padding: 0;}
	
/* the horizontal menu starts here */
#topNav {
	width: 100%;
	height: 25px;
	float: left;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 85%;
	font-weight: 400;
	font-color: #237ECB;
	background: url(../images/topNav_bg.png) repeat-x;
	top: 125px;
	position: absolute;
}
	
	#topNav ul {
		margin: 3px 0 0 30px;
	}
	
	#topNav li {
		float: left;
		position: relative;
		list-style-type: none;
	}
	
	#topNav a {
		display: block; 
		padding: 0 15px; /*creates space each side of menu item's text */
		text-decoration: none;	 
		color: #fff;	
	}
	
	#topNav ul li a:hover {
		color: #999;
	}


	/* the drop-down starts here */
	#topNav ul li ul {
		border: 1px solid #666666;
		padding: 0px;
		width: 175px;
		display: none;
		position: absolute;
		background: url(../images/topNav_dropdown_bg.png) repeat;
		margin: 0;
	}
	
	#topNav ul li ul li {
		width: 100%; /* makes the list items fill the list container (ul) */
		font-weight: normal; /* Set weight of text for sublinks */
	}

	#topNav ul li ul li a:link,
	#topNav ul li ul li a:visited {
		color: #ccc;
	}
	
	#topNav ul li ul li a:hover {
		background: #0D87BD;
		color: #fff;
	}

	/* make the drop-down display as the menu is rolled over */
	div#topNav ul li ul {display: none;} 
	div#topNav ul li:hover ul {display: block; } 

	/* THE HACK ZONE - */
	
	/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */
	* html  div#topNav ul li ul li ul { 
		left: 9.85em; 
		voice-family: "\"}\""; 
		voice-family: inherit;
		left: 10em;
		}
	
	/* the "be nice to Opera" rule */
	html>body div#topNav ul li ul li ul {
		left: 10em;
		}
	
	/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
	/* the first-level drop stays open for 100px below the bottom but at least it works */
	/* this can be reduced to as little as 22px if you don't have pop-outs */
	/* the pop-out menu stays open for 22px below the bottom but at least it works */
		@media all and (min-width: 0px) {
		body div#topNav ul li ul {padding-bottom: 200px;}
		body div#topNav ul li ul li ul {padding-bottom: 22px;}
		body div#topNav ul li ul li ul li ul li:hover {visibility: visible;} 
		}


	 /* this stylesheet is read by IE5 Mac only - hack omits 'url' and leave no space between @import and ("   */
		@import("../ie51_menu_hack.css"); 

/*
-----------------------------
	BOTTOM NAVIGATION
-----------------------------
*/

#bottomNav {
	text-align: center;
}

	#bottomNav ul {
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 80%;
		color: #333333;
	}

	#bottomNav li {
		display: inline;
	}

	#bottomNav li a:link,
	#bottomNav li a:visited {
		font-size: 90%;
		color: #666666;
	}


/*
-----------------------------
	CONTENT
-----------------------------
*/
#content {
	padding: 20px;
	background:#FFF;
}

	#content ul {
		list-style: url(../images/bullet.png) outside;
		font-size: 85%;
		margin-left: 10px;
		margin-bottom: 5px;
		margin-top: 2px;
	}

	#content img {
		border: none;
	}

	#content strong {
		color: #333333;
	}

	#contentLeft {
	float: left;
	width: 325px;
	padding-right: 10px;
	}

	#contentRight {
	float: right;
	width: 375px;
	}
	
	#contentRight dl {
		border-bottom: 1px dotted #999999;
		margin: 0px;
		display: block;
		padding: 0px;
	}
	
	#contentRight dt,
	#contentRight dt a:link,
	#conenetRight dt a:visited {
		font-weight: bold;
		font-size: 90%;
		color: #804C24;
		text-decoration: none;
	}

	#contentRight dd {
		font-size: 80%;
		margin: 0 0 5px 0;
		padding: 0px;
		color: #333333;
		text-decoration: none;
	}
	
	#contentRight dd a:link,
	#contentRight dd a:visited {
		margin: 0px;
		padding: 0px;
		color: #45619b;
		text-decoration: underline;
	}
	
	#contentRight a:hover {
		margin: 0;
		padding: 0;
		color: 666;
	}
	
	#contentLeft dl {
	margin: 0px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	}
	
	#contentLeft dt {
	font-weight: bold;
	font-size: 85%;
	color: #804C24;
	text-decoration: none;
	display: block;
	}

	#contentLeft dd {
	font-size: 85%;
	margin: 0px;
	padding: 0px;
	color: #333333;
	text-decoration: none;
	}

#homeEvents {
	margin: 0 0 25px;
	padding: 0;
}

	#homeEvents dl {
		padding-bottom: 10px;
		padding-left: 5px;
		padding-top: 5px;
	}
	
#serviceTimes,
#announcements,
#sermonSeries {
	margin-bottom: 20px;
	margin-left: 0px;
	padding-left: 3px;
}
	
	#serviceTimes dl {
		margin: 0px;
		padding: 0px;
	}
	
	#serviceTimes dl dt {
		font-size: 80%;
	}
	
	#serviceTimes dl dd {
		text-align: left;
		margin: 0px;
		padding: 0px;
		font-size: 80%;
	}

	#serviceTimes ul {
		margin-top: 0;
	}
	
	#serviceTimes ul li {
		list-style: square;
		font-size: 80%;
	}
	
	#sermonSeries dl dd em {
	font-weight: bold;
	color: #666;
	}
	


h1 {
	color: #0D87BD;
	margin-bottom: 5px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #0D87BD;
}

h2 {
	font-size: 0.80em;
	color: #79A84E;
	margin: 5px 0 0px;
}

p {
	font-size: 80%;
	margin: 0px;
	padding: 2px 0px 10px;
	line-height: 120%;
color: #444;
}

#announcements {
	margin-bottom: 15px;
	background-color: #FEFEFE;
	border: 1px solid #EEE;
	padding: 5px;
	}
	
#announcements p {
	font-size: 80%;
	line-height: 120%;
	color: #666;
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-top: 2px;
}

a:link {
	color: #45619b;
}	

a:visited {
	color: #395080;
}

/*
------------------------------
	FOOTER 
------------------------------
*/
#footer {
	border-top: 1px solid #EEE;
	margin: 5px 0px 0px;
	padding-top: 5px;
	clear: both;
	height: 40px;
}

#bottomNav {
	text-align: center;
}

#bottomNav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 80%;
	color: #333333;
}

#bottomNav li {
	display: inline;
}

#bottomNav li a:link,
#bottomNav li a:visited {
	font-size: 90%;
	color: #666666;
}

#copyright {
	color: #CCCCCC;
	font-size: 80%;
	margin-top: 3px;
	
}

/*
---------------------------
	CONTACT PAGE
---------------------------
*/
#staffLeft {
	clear: left;
	float: left;
	border: 1px solid #ccc;
	height: 95px;
	width: 325px;
	margin-bottom: 10px;
	background: #f1f1f1;
	}
	
#staffRight {
	clear: right;
	float: right;
	border: 1px solid #ccc;
	height: 95px;
	width: 325px;
	margin-bottom: 10px;
	background: #f1f1f1;
	}
	
#staffRight img,
#staffLeft img {
	float: left;
	border: 1px solid #666666;
	margin: 8px;	
}
	
/*
------------------------------
	EVENT CALENDAR
------------------------------
*/

.topDates {
	text-align: left;
	margin-bottom: 20px;
	font-size: 80%;
}

.bottomDates {
	text-align: left;
	margin: 20px 0 20px;
	font-size: 80%;
}

.topDates ul,
.bottomDates ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #333;
}

.topDates ul li,
.bottomDates ul li {
	display: inline;
}

.topDates a:link,
.bottomDates a:link,
#topDates a:visited,
#bottomDates a:visited {
	color: #666;
}

.topDates a:hover,
.bottomDates a:hover {
	text-decoration: underline;
	color: #333;
}

#events  {
	margin: 0;
	padding: 0;
}

#events h2 {
	padding: 0;
	border-bottom: 1px dashed #999;
}
	
#events table {
	width: 100%;
	border: none;
	margin-bottom: 10px;
	padding: 0;
}

#events th {
	border-bottom: 1px solid #666;
	text-align: left;
	font-size: 80%;
	color: #45619B;
}

#events td {
	padding: 2px 5px 2px 5px;
	margin: 0;
	border-bottom: 1px dotted #999;
	font-size: 80%;
	background: #dedede;
	color: #333333;
}

.eventTitle {
	width: 35%;
}

.eventDescription {
	width: 55%;
}

.eventTime {
	width 10%;
	text-align: right;
}

#content #contentLeft form {
	margin: 0 0 10px 0;
	padding: 5px 15px 0px;
	border: 1px solid #EEE;
	background-color: #FEFEFE;
}