@import url("reset.css"); /* Theoretically get every browser on the same level */
@import url("SearchOverlay.css"); /* Google Search Box Customization */

/* 
Designed and coded by Stephen Shaw ( shshaw @ gmail.com ).

Table of Contents:
------------------
1. =General
2. =Specific Styles
3. =Design
	3.1 =Header
	3.2 =Navigation
	3.3 =Side-Navigation
	3.4 =Footer
	
/**************************************
 1. =General */

	html, body { height: 100%; }
	
	body {
		background: #1c1817;
		color: #FFF;
		text-align: center; /* IE <5.5 Fix */
		font: 100 80% Verdana, Tahoma, Arial, sans-serif; }
		

/**************************************
 2. =Specific Styles */			


	#Class-Selection {
		width: 620px;
		margin: 0 auto 10px; }
		
	#Class-Selection a {
		display: block;
		width: 290px;
		height: 150px;
		float: left;
		padding-left: 10px;
		padding-right: 10px; }		

		
/* Sermon Tables */
 
	#Sermons {
		width: 820px;
		margin: 0 auto 20px;
/*		border: solid 2px #e5e1db; */ }
	
	#Sermons thead th {
		padding: 7px 5px;
		background-color: #f2ede7;
		border-right: solid 1px #fefaf9;
		font-size: 10px;
		color: #69635c;
		text-align: center; }
		
	#Sermons tbody {
		text-align: center; }
		
	#Sermons tbody td, #Sermons tbody th {
		padding: 13px 5px 15px; 
		border-bottom: solid 3px #f2ede7; }
		
	#Sermons .Date {
		width: 50px; 
		font-weight: bold; }	
		
	#Sermons .Service {
		font-size: 10px;
		font-weight: normal; }
			
	.Calendar-Display {
		width: 40px;
		height: auto;
		margin: 0 auto;
		text-align: center;
		font-weight: bold; }
		
	.Calendar-Display span { display: block; }
	
	.Calendar-Display .Month {
		height: 17px;
		padding-top: 3px;
		background: url("../img/design/Calendar-Top.jpg") no-repeat bottom center;
		color: #FFF;
		font-size: 12px; }
	
	.Calendar-Display .Day {
		height: 20px;
		padding-top: 3px;
		background: url("../img/design/Calendar-Bottom.jpg") no-repeat top center;
		color: #29211f;
		font-size: 18px; }
	
	#Sermons .Sermon-Title { text-align: center; }
		
	#Sermons tr:hover { background-color: #f9f5ef; }
		
	#Sermons .Scripture {
		font-size: 10px;
		width: 120px; }
		
	#Sermons .Speaker {
		font-size: 10px;
		width: 100px; }
		
	#Sermons .Listen-Download { 
		width: 180px;
		border-right: none; }
		
 	#Sermons a.Listen, #Sermons a.Download, #Sermons a.Watch {
		margin-top: 6px;
		display: block;
		width: 87px; 
		height: 22px;
		text-align: center;
		background-image: url("../img/design/Listen-Download-Watch.gif");
		background-repeat: no-repeat;
		text-indent: -999em; }	
				
	#Sermons a.Listen {	
		float: left;
		background-position: 0 0; }
		
	#Sermons a.Download {
		float: right; 
		background-position: -110px 0; }		
		
	#Sermons a.Watch {
		margin: 0 auto;
		background-position: -220px 0; }
		
	#Sermons a.Listen:hover { background-position: 0 bottom; }	
	#Sermons a.Download:hover { background-position: -110px bottom; }	
	#Sermons a.Watch:hover { background-position: -220px bottom; }			
		
	.p10px { 
		padding-left: 10px; 
		padding-right: 10px; }
	.p20px { 
		padding-left: 20px;
		padding-right: 20px; }	
	.p25px { 
		padding-left: 25px;
		padding-right: 25px; }	
	.p50px { 
		padding-left: 50px;
		padding-right: 50px; }
	
	a {
		color: #f5af54;
		font-weight: bold;
		text-decoration: none; }		
	a:hover, a:focus, a:active {
		color: #eec48c;
		text-decoration: underline; }			
	a:active, a:focus { outline: none; }		
	a img, a:hover img, a:active img, a:focus img { border: none; }
	.Jump {
		display: inline-block;
		padding-top: 10px; }
	.Jump:hover, .Jump:active, .Jump:focus {
		padding-top: 0px;
		padding-bottom: 10px; }
	
	p { 
		font-family: Verdana, Arial, Tahoma, sans-serif;
		font-size: 1em;
		line-height: 1.3em;
		margin: 0 0 1em 0;
		text-align: left;
		word-spacing: .1em;
		letter-spacing: .01em;  }
		
	strong { font-weight: bold; }
		
	em { font-style: italic; }
	
	sup { 
		vertical-align: top;
		padding-top: 3px; }
		
	dl { margin-bottom: 1em; }		
	dt { 
		font-size: 14px;
		font-weight: bold; 
		margin-bottom: .5em; }	
	dd { margin: 0 50px 1em; }
		
	h2, h3, h4, h5, h2 a, h3 a, h4 a, h5 a {
		font-family: Tahoma, Arial, sans-serif;
		font-weight: bold;
		text-align: left;
		word-spacing: 2px;
		text-align: center; }
		
	h2 {
		color: #7fb6ba;
		font-size: 32px; 
		margin: 0 0 12px;
		letter-spacing: .04em; }		
	h2 a { color: #7fb6ba; }		
	h2 a:hover, h2 a:focus, h2 a:active {
		color: #33b2bc;
		text-decoration: none; }
		
	h3 {
		font-size: 32px; 
		margin: 24px 0 12px;
		color: #5f503f; 
		letter-spacing: .1em; }		
	h3 a { color: #5f503f; }		
	h3 a:hover, h3 a:focus, h3 a:active, h5 a:hover, h5 a:focus, h5 a:active {
		color: #a86a24;
		text-decoration: none; }
		
	h4 {
		font-size: 18px;
		color: #372e29;
		margin: 12px 0; }		
	h4 a, h5 a { color: #f5af54; }		
	h4 a:hover, h4 a:focus, h4 a:active, h5 a:hover, h5 a:focus, h5 a:active {
		color: #587378;
		text-decoration: none; }
		
	.f10 { font-size: 10px; }
	.f12 { font-size: 12px; }
	.f14 { font-size: 14px; }
	.f16 { font-size: 16px; }
	.f18 { font-size: 18px; }
	
	.hr {
		display: block;
		width: 80%;	height: 1px;
		margin: 30px auto 30px;
		background: #DDD; }		
	hr { display: none; }	
	
	.FloatLeft { float: left; }
	.FloatRight { float: right; }
	
	.Clear { clear: both; }	
	.ClearLeft { clear: left; }
	.ClearRight { clear: right; }
	
	.center { 
		text-align: center;
		margin-left: auto;
		margin-right: auto; }
	.left { text-align: left; }
	.right { text-align: right; }
	
	blockquote { margin: 0 75px 1em; }
	
	.Bible-Verse {
		background: #F1F1F1;
		padding: 10px;
		border: solid 1px #AAA; }	
	.Bible-Verse p {
		margin-bottom: 0;
		font-style: italic; }
	/* .Bible-Verse sup {
		font-weight: bold; } */
		
	.Bible-Reference { 
		display: block;
		text-align: right; 
		font-weight: bold;
		color: #5f503f; }
		
	.Header-Img { margin: 5px auto 5px; }

/* Table Setup */	
	table { margin: 0 auto 1em; }
	
	th { 
		font-weight: bold;
		padding: 0 10px; }
		
	tr { padding: 2px; }
		
		
/* List type classes */		
	.List-Alpha, .List-Numeric, .List-Roman, .List-Bullet, List-None { margin-bottom: 1em; }
	
	.List-Alpha li, .List-Numeric li, .List-Roman li, .List-Bullet li, .List-None li { margin: 0 50px 1em; }
		
	.List-Alpha { list-style-type: upper-alpha; }		
	ol .List-Alpha { list-style-type: lower-alpha; }
	
	.List-Numeric { list-style-type: decimal; }
	
	.List-Roman { list-style-type: upper-roman; }	
	ol .List-Roman { list-style-type: lower-roman; }
	
	.List-Bullet { list-style-type: disc; }
	ul .List-Bullet { list-style-type: circle; }
		
		
/* Div Box with a border to separate content */		
	.BoxWithBorder {
		padding: 20px 25px 10px;
		margin: 0 50px 1em;
		border: solid 1px #DDD; }
		
	.BoxWithBorder h2, .BoxWithBorder h3, .BoxWithBorder h4 {
		margin-top: 0;
		margin-bottom: 1em;
		text-align: center; }
		
		
/* Content Button */

	.Content-Buttons {
		display: block;
		width: 600px;
		margin: 20px auto; }
		
	.Content-Buttons li {
		float: left; }
		
	.Content-Buttons li a {
		display: block;
		width: 160px;
		height: 15px;
		padding: 25px 5px;
		margin: 10px;
		background: url("../img/design/Content-Button.jpg") no-repeat 0 0;
		font: bold 16px Arial, sans-serif;
		color: #4a423a;
		text-align: center;
		text-decoration: none; }
		
	.Content-Buttons li a.Two-Lines {
		height: 27px;
		padding: 19px 5px;
		font-size: 14px; }	
		
	.Content-Buttons li a:hover, .Content-Buttons li a:focus, .Content-Buttons li a:active {
		background-position: 0 -120px;
		color: #b44a16; }
		
	
	
/* Page Navigation */
	.Page-Navigation {
		width: 630px;
		margin: 0px auto;
		text-align: center; }
	
	.Page-Navigation li { float: left; }
	
	.Page-Navigation a {
		float: left;
		display: block;
		width: 190px;
		height: 25px;
		padding: 12px 5px 3px 5px;
		margin: 5px 5px;
		background: url("../img/design/Photo-Button.gif") no-repeat 0 0;
		font-size: 14px; 
		text-decoration: none; 
		text-align: center;
		color: #7fb6ba; }  
		
	.Page-Navigation a:hover {
		background-position: 0 -100px;
		color: #d55e2f; }  
		
	.Page-Navigation .CurrentGallery {
		background-position: 0 -200px;
		color: #404d4e; }


	/*.Page-Navigation {
		display: block;
		width: 648px;
		margin: 0 auto 10px; }
		
	.Page-Navigation.Two-Column { width: 324px; }
		
	.Page-Navigation.Three-Column { width: 486px; }
		
		
	.Page-Navigation li a {
		display: block;
		width: 150px;
		height: 20px;
		padding: 6px 6px 2px;
		background: url("../img/design/Page-Navigation-Button.jpg") no-repeat 0 0;
		font-size: 10px;
		color: #9a918b;
		text-align: center; }	
		
	.Page-Navigation li a:hover, .Page-Navigation li a:focus, .Page-Navigation li a:active {
		background-position: 0 -50px;
		color: #d55e2f;
		text-decoration: none; }*/

					
/**************************************
 3. =Design */	
 
 	#Container { background: url("../img/design/Background-Repeater.jpg") repeat-x top center; }
	
	#Container2 { background: #353230 url("../img/design/Texture.jpg") repeat top center; }
	
	#Content {
		width: 880px;
		margin: 0 auto;
		padding: 0 40px;
		background: url("../img/design/Content-Background.jpg") repeat-y top center; 
		color: #372e29;
		text-align: left; }	
	
	/**************************************
	 3.1 =Header */
		#Header { 
			position: relative;
			width: 100%;
			background: url("../img/design/Header-Background.jpg") no-repeat top center; }
			
		#Header-Content {
			width: 900px;
			height: 160px;
			margin: 0 auto;
			padding: 0 30px;
			background: url("../img/design/Header-Background.jpg") no-repeat top center; }
		
		#Meta-Navigation {
			width: 430px;
			height: 25px;
			font-size: .75em;
			padding: 12px 0 0 0;
			margin: 0 25px 0 auto;
			text-align: center;
			/*background: #2a2724;*/ }
			
		#Meta-Navigation a { 
			color: #b57a2d;
			padding: 0 10px; }
		
		#Meta-Navigation a#Return-To-Olive {
			padding: 0 14px;
			border-left: solid 1px #71685f; }
		
		#Meta-Navigation a:hover, a:focus, a:active { color: #e39836; }			
		
		#Meta-Navigation fieldset {
			float: right;
			padding: 0 6px 0 0;
			vertical-align: middle;
			position: relative;
			top: -2px; }
			
		#Meta-Navigation #Search-Box, #Meta-Navigation #q {
			color: #2a2724;
			font-size: 10px;
			margin: 0px;	padding: 2px;
			width: 155px; 	height: 12px;
			vertical-align: middle;
			border-style: solid;
			border-width: 1px;
			border-color: #FFF;
			padding: 0px;
			margin: 0px;
			z-index: 1; } 
			
		#Meta-Navigation #Search-Button, #Meta-Navigation #sa {
			display: inline-block;
			margin: 0px;	padding: 0 2px; 
			font-size: 10px; 
			width: 20px; 	height: 18px;
			color: #2a2724;
			vertical-align: middle;
			background: #aaa;
			border: solid 1px #888; }
			
		#Meta-Navigation #Search-Button:hover, #Meta-Navigation #sa:hover {
			background: #ccc;			
			color: #6e6b68; }
			
		#Header h1 a {
			display: block;
			width: 310px;	height: 75px; 
			position: absolute;
			top: 55px;
			text-indent: -999em; }
			
		#Skip-To-Navigation { 
			position:absolute;
			left:-999em;
			width:1px;
			height:1px;
			overflow:hidden;
			font-size: .75em; }		
		
		#Skip-To-Navigation:active, #Skip-To-Navigation:focus { 
			display: block;
			position:static;
			height: auto;
			width: 200px;
			margin: 0 auto;
			padding: 5px 10px;
			background: #2a2724;
			border: solid 1px #d4f1f6; }
				
	/**************************************
 	 3.2 =Navigation */

		#Navigation {
			width: 846px;
			height: 90px;
			margin: 0 auto;
			padding: 7px 0; }
		
		#Navigation a {
			display: block;
			float: left;
			height: 85px;
			padding: 0 20px; }
			
		#Navigation a span { /* Fixes a dreamweaver display glitch */
			display: block;
			text-indent: -999em; }
			
		#Navigation a:hover, #Navigation a:focus, #Navigation a:active { background-position: center -5px; }
		
		#Audio-Archives-Button {
			width: 240px;
			background: url("../img/design/Audio-Archives.jpg") no-repeat bottom center; }
		
		#Video-Archives-Button {
			width: 240px;
			background: url("../img/design/Video-Archives.jpg") no-repeat bottom center; }
			
		#Live-Streaming-Button {
			width: 240px;
			background: url("../img/design/Live-Streaming.jpg") no-repeat bottom center; }


		
	/**************************************
 	 3.4 =Footer */
		#Footer {
			background: #2a2724 url("../img/design/Footer-Background1.jpg") repeat-x top center;
			font-size: .75em;
			height: auto;
			color: #686765;}
			
		#Footer a { color: #6b8a8e; }
			
		#Footer a:hover, #Footer a:active, #Footer a:focus { color: #7fb6ba; }
	
		#Footer-Content {
			width: 860px;
			height: 200px;
			margin: 0 auto;
			padding: 95px 50px 0px;
			background: url("../img/design/Footer-Background2.jpg") no-repeat top center;
			font-size: 1.1em; 
			text-align: center; }
					
		#Address-And-Misc {
			width: 120px;
			margin: 0 auto;
			padding: 0 13px;
			font-size: .9em; }
			
		#Address-And-Misc p { 
			text-align: center; }