html { height: 100%; }

body {
	background: url(graphics/global/Back_2.png) repeat;
	color: #564f55;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	min-height: 100%;
	height: 100%;  /*allows contained divs to have 100% height*/
	
}

#popup {
	background-image:none;
	background-color: #FFFFFF;
}


h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #2c5482;
	margin-top: -20px;
	
}



h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #342f33;
	font-weight: bold;
	
}


dt {line-height: 1.3em;
}

dd {
	margin: 5px;
	line-height: 1.3em;
}


a:link {color:#5a46aa;}


a:active {color: #337baf;}
a:visited {color: #5a46aa;}
a:hover{color: #337baf;}
	
/* --- Text Settings -- */

.text {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1.5em;
	color: #564f55;

}

.text11 {
	font-size: 11px;
}

.text2 {
	font-size: 12px;
}


label {padding-top: 10px;
}

.formlabel {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #342f33;
	font-size: 11px;
	font-weight: bold;
	padding-right: 5px;
	text-align: right;
}
	
.smalltext {
	font-size:9px;
}

.subhead {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #2c5482;

}

.subhead2 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #337baf;
	font-weight: bold;
}

.largecap {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
}

.largetext {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
}

.subhead3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #342f33;
	font-weight: bold;
}


.subhead4 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #2c5482;
	font-weight: bold;
}

.subheadgray {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #342f33;
	font-weight: bold;
}

.subhead_blog {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #2c5482;
	font-style: italic;

}
	
.subhead a {color: #5a46aa;}
.subhead a:link {color:#5a46aa;}
.subhead a:active {color:#337baf;}
.subhead a:visited {color:#5a46aa;}
.subhead a:hover {color:#337baf;}		

.scripture {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11.5px;
	font-style: italic;
	color: #2C5482;
}


.caption {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 1.3em;
	
}
	
.endorse {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
	line-height: 1.3em;
}


.red {color: #990000;
}

.imagebox {
	border: 1px solid #CCCCCC;
	padding: 2px 2px 2px 2px;

}

.right { 
	margin: 5px 0 5px 8px; 
	float:right;
	
	
}
.left {
	margin: 5px 8px 5px 0; 
	float:left; 
}
	
		
#wrapper {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	/*background: url(graphics/global/mainback.png) repeat #E9EEF5;*/
	/*background: #E9EEF5;*/
	background: #E3F4F2;
	border: 1px solid #332E32;
	min-height: 100%;
	height: auto;
	
	display: block;
	
}
#header {
	height: 150px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0;
	background: url(graphics/stacie_web_header.jpg) no-repeat top left;
	border: 1px solid black;
}

#main {
	width: 960px;
	height:auto;
	/*background: url(graphics/global/mainback.png) repeat #E9EEF5;*/
	padding-bottom: 20px;
	
	
	
	display: block;
	position: relative;
}

* html #stretchybox {
  height: 100%;
  }

#footer {
	width: 960px;
	/*background: #E9EEF5;*/
	background: #E3F4F2;
	position: relative;
	padding: 40px 0 30px 0;
	margin-top: -15px;
	text-align: center;
	clear: both; /* Very Important!  This is what made the whole layout work! */


}

.footer_credits {
	font-size: 10px;
	color: #999999;
	
}

.footer_credits a, .footer_credits a:link, .footer_credits a:visited {
	color: #999999;
	text-decoration: none;
	
}

.footer_credits a:active, .footer_credits a:hover {
	text-decoration: underline;

}

/* ---------- Text Boxes --------- */
.article {
	position: relative;
	margin: -10px 0 0px -2px;
	padding: 20px 50px 50px 50px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11.5px;
	color: #564f55;
	line-height: 1.8em;
}


/* ************************	SLIDING DOORS CSS FOR ROUNDED BOXES *******************************


Sample HTML Below

		<div id="top_right" class="mainbox"> 				*** Use an ID to position the box
			<div class="boxhead"><span>&nbsp;</span></div>   *** boxhead prints the left side image - 
																 boxhead span prints the right side.  nbsp; is necessary!
			
			<div class="boxbody">Sidebar stuff goes here<br><br>
					<br><br><br><br>
					
			</div>
			<div class="boxbottom"><span>&nbsp;</span></div>    *** Same as above
		</div>


*/


.mainbox {
	width: 100%;
	background: url(graphics/box4/boxbody-l.png) repeat-y top left;
	margin-top: 3px;
	/*height: 80%;*/
	/*border:1px solid;*/

}

.boxhead {
	background: url(graphics/box4/boxhead-l.png) no-repeat top left;
	text-align: center;
	margin: 0;
	padding: 0;
	height: 40px;
	/*border: 1px solid black;*/
	
}
.boxhead span {
	background: url(graphics/box4/boxhead-r.png) no-repeat top right;
	height: 40px;
	display: block;
	margin: 0;
}


.boxbody {
	background: url(graphics/box4/boxbody-r.png) repeat-y bottom right;
	position: relative;
	margin: 0 0px 0px 13px;
	padding: 10px 35px 20px 25px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #564f55;
	line-height: 1.8em;
	clear:none;
	/*border: 1px solid;*/
	
}

.sidebox { /* to format text in right side boxes */
	margin-top: -20px;
	margin-bottom: -20px;
	
}



.boxbottom {
	background: url(graphics/box4/boxbottom-l.png) no-repeat bottom left;
	height: 40px;
}

.boxbottom span {
	display: block;
	position: relative;
	height: 40px;
	background: url(graphics/box4/boxbottom-r.png) no-repeat bottom right;
	
}

	
	
/* ------- Start Navigation Section ----- */

#home {
	height: 77px;
	width: 122px;
	clear: right;
	float: left;
	margin-top: 100px;
	margin-left: -22px;
}

#about,
#services, #news, 
#calendar, #contact, #donate  {
	height: 77px;
	width: 122px;
	float: left;
	clear: right;
	margin-top: 100px;
	margin-left: 12px;
}



#home em {
	background: url(graphics/global/home.png) no-repeat;
	cursor: pointer;
	background-position: 0 -77px;
}

#home a:hover em
	{background-position: 0 0;}
	


#about em {
	background: url(graphics/global/about.png) no-repeat;
	cursor: pointer;
	background-position: 0 -77px;
}

#about a:hover em
	{background-position: 0 0;}
	



#services em {
	background: url(graphics/global/services.png) no-repeat;
	cursor: pointer;
	background-position: 0 -77px;
}

#services a:hover em
	{background-position: 0 0;}
	





#news em {
	background: url(graphics/global/news.png) no-repeat;
	cursor: pointer;
	background-position: 0 -77px;
}

#news a:hover em
	{background-position: 0 0;}
	





#calendar em {
	background: url(graphics/global/calendar.png) no-repeat;
	cursor: pointer;
	background-position: 0 -77px;
}

#calendar a:hover em
	{background-position: 0 0;}
	






#contact em {
	background: url(graphics/global/contact.png) no-repeat;
	cursor: pointer;
	background-position: 0 -77px;
}

#contact a:hover em
	{background-position: 0 0;}
	



#donate em {
	background: url(graphics/global/donate.png) no-repeat;
	cursor: pointer;
	background-position: 0 -77px;
}

#donate a:hover em
	{background-position: 0 0;}



	



#nav, #nav ul {list-style: none;}

#nav li
	{float: left;
	 padding-bottom: 5px;
	 
	}

#nav li, #nav li em
	{width: 122px;
	 height: 77px;
	 
	}
	

#nav li ul 
	{position: absolute;
	 z-index: 10;
	 top: 77px;
	 left: -999em;
	 list-style: none;
	 
	 }
	 
#nav li:hover ul
	{left: auto;}

#nav li li
	{height: auto;
	 margin-left: -40px;
	 line-height: 25px; 
	 left: 0;
	 padding-bottom: 0;
	 font-family: Verdana, Helvetica, Arial,  sans-serif;
	 font-size: 11px;
	 text-indent: 4px;
	 color: #FFFFFF;
}

/*Off State */
#nav li li.mid	{
	 background-color: #332E32;
	 color: #FFFFFF;
}

#nav li li.mid a:hover,
#nav li li.top a:hover,
#nav li li.bottom a:hover {
	color: #332E32;
}

#nav li ul a {
	 margin: 0;
	 padding: 0;
	 color: #FFFFFF;
	 /*font-weight: bold;*/
	 text-decoration: none;
	 left: 0;
}


#nav a {
	display: block;
}


/*On State*/	
/*#nav li ul.mid a:hover {
	color:#332E32;
	background-color: #FACD3E;
	
}
*/
#nav li:hover ul, #nav li.sfhover, #nav li.sfhover ul
	{left: auto;
	 color: #332E32;}

ul.IR li 
	{position: relative;
	 font-family: Verdana, Arial, Helvetica, sans-serif;
	 font-size: 14px;
	 
	}


.top {
	border-top: 1px solid;
	background-color: #332E32;
	height: 25px;
	color: #FACD3E;
	border-bottom: 1px solid;
}

.top a:hover{
	background-color: #FACD3E;
	color: #332E32;
	height: 25px;
}


.mid {
	background-color: #332E32;
	height: 25px;
	color: #FACD3E;
	border-bottom: 1px solid;

}

.mid a:hover {
	background-color: #EECD48;
	color: #FACD3E;
	height: 25px;
}


.bottom {
	background-image: url(graphics/global/nav_bottom.png);
	background-position: 0 -25px;
	border-bottom: none;
	height: 25px;
}
	
.bottom a:hover {
	background-image: url(graphics/global/nav_bottom.png);
	background-position: 0 0;
	border-bottom: none;
	height: 25px;
}
		
	

	




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

	
.IR em 
	{display: block;
	 position: absolute;
	 top: 0;
	 left: 0;
	 z-index: 1;
	}
	
* html>body .IR
	{position: static;}
	
* html>body .IR em
	{position: static;}
	
	
/* ----- End Navigation -- */