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

/* 
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
	
	#fbf7ee
	
/**************************************
 1. =General */

	html, body { height: 100%; }
	
	body {
		background: #fdfcf5 url("../img/Design/Background-Repeater.gif") repeat-x top center;
		color: #000;
		text-align: center; /* IE <5.5 Fix */
		font: 100 80% Verdana, Tahoma, Arial, sans-serif; }
		

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

	.Box {
		display: block;
		width: 600px;
		padding-bottom: 5px; }
		
	.Box h2, .Box h3 {
		display: block;
		width: 580px;
		padding: 5px 10px;
		margin-bottom: 10px;
		background: #7d4634;
		border-bottom: solid 4px #d3a65e;
		text-align: left;
		font-size: 18px;
		letter-spacing: .1em;
		color: #FFF;		
		font-family: Tahoma, Arial, sans-serif; }
		
	.Box-Content {
		padding: 0 15px 10px; }	
		
	#Buttons {
		height: 100px;
		margin: 60px auto; }
		
	#Buttons li {
		float: left;
		display: block;
		margin-right: 13px;
		background-position: top center;
		background-repeat: no-repeat; }
		
	#Buttons li a {
		display: block;
		width: 190px;
		padding-top: 73px;
		height: 27px; 
		text-align: center;
		font: bold 12px "Andale Mono", Helvetica, Arial;
		text-transform: uppercase;
		text-indent: -999em; }
		
	#Buttons li#Health-And-Hope-Clinic { background-image: url("../img/index/Health-And-Hope-Clinic.png"); }		
	#Buttons li#Charis-House { background-image: url("../img/index/Charis-House.png"); }		
	#Buttons li#Future-Plans { background-image: url("../img/index/Future-Plans.png"); }		
	#Buttons li#Bethany-Christian-Services { background-image: url("../img/index/Bethany-Christian-Services.png"); }
	#Buttons li#CastingCrowns { background-image: url("../img/index/CastingCrowns.png"); }
	#Buttons li#Concert { background-image: url("../img/index/Concert.png"); }
	
	#Buttons li a:hover { 
		background: url("../img/index/Button-Highlight.png") no-repeat top center;
		color: #B00;
		text-decoration: none; }
		
	#Buttons #Future-Plans { margin-right: 0; }
		
	.p10px { 
		padding-left: 10px; 
		padding-right: 10px; }	
	.p25px { 
		padding-left: 25px;
		padding-right: 25px; }	
	.p50px { 
		padding-left: 50px;
		padding-right: 50px; }
		
	.p150px { 
		padding-left: 100px;
		padding-right: 100px; }
	
	a {
		color: #91220e;
		font-weight: bold;
		text-decoration: none; }
		
	a:hover, a:focus, a:active {
		color: #d3a65e;
		text-decoration: underline; }
			
	a:active, a:focus { outline: none; }
		
	a img, a:hover img, a:active img, a:focus img { border: none; }
	
	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; }
		
	blockquote {
		margin: 0 20px; }
		
	dl { 
		margin-bottom: 1em; }
		
	dt { 
		font-size: 14px;
		font-weight: bold; 
		margin-bottom: .5em; }
	
	dd { margin: 0 25px; }
		
	h2, h3, h4, h5, h2 a, h3 a, h4 a, h5 a {
		font-family: Tahoma, Arial, sans-serif;
		font-weight: bold;
		word-spacing: 2px; }
		
	h2 {
		text-align: center;
		color: #5b412d;
		font-size: 48px; 
		padding: 12px 0;
		letter-spacing: .2em;
		font-family: "Andale Mono", Helvetica, Arial, sans-serif; }
		
	h2 a { color: #f5af54; }
		
	h2 a:hover, h2 a:focus, h2 a:active {
		color: #eec48c;
		text-decoration: none; }
		
	h3 {
		font-size: 22px; 
		padding: 0 0 12px;
		color: #5f503f; }
		
	h3 a {
		display: block;
		width: 100%;
		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; }
		
	h4 a, h5 a {
		color: #372e29;}
		
	h4 a:hover, h4 a:focus, h4 a:active, h5 a:hover, h5 a:focus, h5 a:active {
		color: #587378;
		text-decoration: none; }
	
	.hr {
		display: block;
		width: 80%;	height: 1px;
		margin: 30px auto 30px;
		background: #DDD; }
		
	hr { display: none; }
	
	.center { 
		text-align: center;
		margin-left: auto;
		margin-right: auto; }	
		
	.floatleft { float: left; }	
	img.floatleft { margin: 10px 20px; }	
	.floatright { float: right; }
	
	.ClearLeft { clear: left; }
	.ClearRight { clear: right; }
	.Clear { clear: both; }	
	.Clear hr { display: none; }
		
	.List-Alpha, .List-Numeric, .List-Roman, .List-Bullet, List-None { margin-bottom: 1em; text-align: left; }	
	.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; }
	
	table { margin: 0 auto 1em; }	
	th { 
		font-weight: bold;
		padding: 0 10px; }		
	tr { padding: 2px; }
	
	blockquote { margin: 0 75px 1em; }	
	blockquote p { font-style: italic; }
	
	.border { border: solid 1px #d3a65e; }
	
	.fineprint { 
		font-size: 10px;
	color: #d8c1a2;

    margin-top: 11px;

    margin-bottom: 11px;

    font-weight: normal;

    text-align: center;}


/**************************************
 3. =Design */	
		
	#Main {
		height: 100%;
		background: url("../img/Design/Background-Color-Repeat.gif") repeat-y top center; }
		
	#Container {
		min-height: 750px;
		background-repeat: no-repeat;
		background-position: top center; }
		
	#Index #Container {
		background-image: url("../img/Random/Desperation.jpg"); } /* Only for Local Preview. This gets overwritten with random.php on the server */
 
	#Header	{
		height: 150px;
		background: url("../img/Design/Header.png") no-repeat top center; }
		
	#Logo {
		position: absolute;
		top: 35px;
		left: 0;
		width: 100%; }
		
	#Logo h1 {
		position: relative;
		width: 790px; /* A little smaller so 800x600'ers don't have a horizontal scrollbar */
		margin: 0 auto; }	
		
	#Logo h1 a {
		position: absolute;
		left: 0;
		display: block;
		width: 255px;
		height: 70px;
		text-indent: -999em; }
		
	#Navigation {
		position: absolute;
		top: 107px;
		left: 0;
		width: 100%; }
		
	#Navigation ul { 
		position: relative;
		width: 790px; /* 800x600 again. */
		margin: 0 auto; }
		
	#Navigation li { float: left; }
	
	#Navigation li a { 
		display: block;
		width: 160px;
		height: 21px;
		padding: 7px 0 11px;	
		color: #3b1a05;	
		font: bold 18px "Segoe UI", Arial, sans-serif;
		text-transform: lowercase;
		letter-spacing: .1em; }
	
	#Navigation li a#Contact { width: 150px; } /* This one has to make the nav fit for 800x600 */
		
	#Navigation li a#Giving { color: #91220e; }
		
	#Navigation li a:hover {
		color: #863d0f;
		background: #eee5d3;
		text-decoration: none; }
	
	#Navigation li:hover a, #Navigation li.sfhover a { 
		background: #eee5d3; }
		
	#Navigation .Sub {
		display: none;
		width: 152px;
		border: solid 4px #f2e5d1; }
		
	#Navigation li:hover .Sub, #Navigation li.sfhover .Sub {
		display: block;
		position: absolute; }
		
	#Navigation .Sub li { float: none; }
	
	#Navigation ul .Sub a {
		width: 152px;
		height: auto;
		padding: 5px 0;
		letter-spacing: normal;
		background: #e4d4be;
		font: bold 12px "Segoe UI", Arial, sans-serif; }
		
	#Content {
		width: 800px;
		min-height: 100%;
		margin: 30px auto;
		padding-bottom: 60px; }
		
	.Top-Line {
		color: #7b6b5c;
		padding: 0 20px;
		font-size: 14px;
		font-weight: bold;
		font-style: italic; }
		
	#Left-Side {
		float: left;
		width: 600px; }
		
	#Right-Side {
		float: right;
		width: 180px; }
		
	#Right-Side h3 {
		text-align: center; 
		border-top: double 4px #d3a65e;
		padding: 4px 0 3px; }
		
	#Right-Side h3 a {
		display: block;
		width: 180px; }
		
	#Right-Side h3 a:hover {
		background: #f7efdb; }
		
	.Side-Navigation {
		padding: 10px 0 0;
		border-top: double 4px #d3a65e;
		border-bottom: double 4px #d3a65e; }
		
	.Side-Navigation li {
		margin-bottom: 10px; }
		
	.Side-Navigation li a {
		display: block;
		width: 158px;
		padding: 5px 10px;
		background: #e6dac1;
		border: dotted 1px #d3a65e;
		font-size: 14px;
		font-weight: 100;
		text-align: center; }
		
	.Side-Navigation li a:hover {
		background: #f7efdb;
		border: dotted 1px #eeb252;
		color: #a22912; }
		
	#Footer {
		display: block;
		height: 60px;
		margin-top: 10px;
		width: 100%;
		padding: 5px;
		background: #5a402d;
		border-top: solid 4px #d8c1a2;
		text-align: center;
		font-size: 10px;
		letter-spacing: .1em;
		color: #d8c1a2;		
		font-family: Tahoma, Arial, sans-serif;  }