/*	This CSS and XHTML markup written by Nathan Rice
		Contact: 
			ncrice(at)gmail(dot)(com) - preferred contact
	Please feel free to copy, use, and/or modify this code for anything.  
	All I ask is that you let me know you are doing it by contacting me
	using the info above.
#######################################################################	
	Basic Screen Style; no Print Style yet, possible future project.
	No Mobile Style either, no need, no one surfs TBC on a PDA/Cell.
	---------------------------------------------------------------
	Sloppy Border code because of a simple column workaround inspired
	by http://alistapart.com/articles/fauxcolumns implemented only 
	within the "container" div.  Also, this eliminates the problem IE 
	has with adding border widths to the width of the div, rather than
	including it in the width.  That also explains the sloppy border code.
	Very small filesize for the bg img, 0.8k
	---------------------------------------------------------------
	Other ideas/inspirations taken from http://veerle.duoh.com/
	---------------------------------------------------------------
*/		
/*	---This is the code for the basic skeleton of the markup--- */
body {
	/*background: #ddd url(../images/offwhitestripes.gif) top left repeat;*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #C5CFD0;
	background-image: url(images/bg_grad.jpg);
	background-repeat: repeat-x;
}
a img {
	border: 0;
}
/*	Top Banner h1 */
h6 {
	width: 750px;
	height: 100px;
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	border: 1px solid #000000;
	background-image: url(images/topbanner3.jpg);
	background-color: #04580D;
}
/*	Header 2 style */
h2 {
	font: normal 18px Georgia, Times New Roman, Times, serif;
	color: #80866A;
	padding: 10px 0px 0px 30px;
}
/*	Header 3 style */
h3 {
}
/*	Header 4 style within the left column */
a {
	text-decoration: none;
	border: 0px;
}
#left h4 {
	padding: 8px 0px 8px 15px;
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}
/*	Header 1 style in the content columns */
#center h1, #centerfull h1 {
 	font-family: Verdana,Arial,sans-serif;
 	font-size: 120%;
 	color: #334d55;
	padding: 0px;
	margin: 0px;
	clear: both;
}
/*	Header 3 style in the content column */
#center h3, #centerfull h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	color: #006600;
	text-align: center;
}
/*	Header 4 style in the content column */
#center h4, #centerfull h4 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 120%;
	color: #006600;
	text-align: left;
	display: block;
	width: 450px;
	padding: 0px 10px 5px 10px;
	margin-left: 10px;
	border-bottom: 2px solid #006600;
}
/*	Header 5 style in the content column */
#center h5, #centerfull h5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-align: left;
	padding: 0px 10px 5px 10px;
	margin-left: 10px;
}
/*	To make all <p></p>'s have 0px padding 
	unless otherwise specified */
p {
	padding: 0px;
}
hr {
	border: none;
	height: 1px;
	color: #000;
	background-color: #000;
}
/*	3 Column Outer container div to hold all things in */
#container {
	width: 752px;
	background-image: url(images/bgsep3col.gif);
	background-repeat: repeat-y;
	background-color: #FFFFFF;
	margin: 0px auto;
	text-align: left;
	padding: 0px;
}
/*	2 Column Outer container div to hold all things in
	There has to be 2 because of the image divider hack */
#container2col {
	width: 752px;
	background-image: url(images/bgsep2col.gif);
	background-repeat: repeat-y;
	background-color: #FFFFFF;
	margin: 0px auto;
	text-align: left;
	padding: 0px;
}
/*	Self explanitory */
#left {
	width: 169px;
	margin: 0px;
	float: left;
	/*height: 400px;*/
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 1px;
}
/*	Box in the top left hand corner */
#topleft {
	width: 169px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	padding: 0px;
	margin: 0px;
}
/*	Center div.  Could also be considered the 'content' div */
#center {
	width: 412px;
	float: left;
	padding: 0px;
	margin: 0px;
}
/*	fix for IE (div within a div) */
#center div {
}

/*	story texts seperated by a bottom border
	<p> tags and style will take care of the padding */
.centerstory {
	padding: 0px 0px 0px 0px;
}
.centerstory2 {
	padding: 0px 0px 0px 0px;
	border-top: 1px solid #000000;
}
/*	Center div without the 3rd column.  For use when 2 columns are used. */
#centerfull {
	width: 581px;
	float: left;
	padding: 0px;
	margin: 0px;
	background-color: #FFFFFF;
}
#centerfullsplit {
	width: 581px;
	float: left;
	padding: 0px;
	margin: 0px;
	background-color: #FFFFFF;
	background-image: url(/images/dot.gif);
	background-repeat: repeat-y;
	background-position: 289px;
}

/* for when the left side should be bigger than the right. use the centerleftmajority and centerrightminority id's */
#centerfullsplitmoreleft { 
	width: 581px;
	float: left;
	padding: 0px;
	margin: 0px;
	background-color: #FFFFFF;
	background-image: url(/images/dot.gif);
	background-repeat: repeat-y;
	background-position: 429px;
}
/*	Self explanitory */
#right {
	width: 169px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #5B604C;
	padding: 0px;
	margin: 0px;
}
/* Footer div */
#footer {
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #EBEBEB;
	padding: 5px;
	margin: 0px;
	text-align: left;
	position: static;
	clear: both;
	border: 1px solid #000000;
	height: 13px;
	background-color: #0D5E1B;
}	
/*	This is for the horizontal navigation lists
	used in parts of the site */
#horiznavlist {
	padding: 0px;
	margin: 0px;
	width: 581px;
	float: left;
	background: url("/images/navBarBg.gif") repeat-x 20px;
	border-top: 1px solid #A8B090;
	border-bottom: 1px solid #A8B090;
}
#horiznavlist ul {
	padding: 0px;
	margin: 0px;
	width: 581px;
}
#horiznavlist ul li {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: block;
	float: left;
	font: 10px/20px "Lucida Grande", verdana, sans-serif;
	text-align: center;
}
#horiznavlist a
{
	color: #000;
	text-decoration: none;
	display: block;
	width: 145px;
	/*border-left: 1px solid #A8B090;*/
}
#horiznavlist a:hover {
	background: url("/images/navBarBgHover.gif") repeat-x 20px;
	color: #000000;
}
/*	End Horizonal Navigation list code */

/*	This is the individual code to control how different elements are
	displayed within individual div tags (i.e. a, p, img, etc.)
*/
/*	controls the look of paragraphes in the content columns */
#center p, #centerfull p, #centerfullsplit p, #centerfullsplitmoreleft p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #5B604C;
	line-height: 18px;
	margin: 5px 10px 5px 10px;
	padding: 2px 0px 2px 0px;
}
/*	Gives some <p>s a clear of both */
.clearboth {
	clear: both;
}
/*	ordered lists...used on the "salvation" page */
#center ol, #centerfull ol {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #5B604C;
	line-height: 18px;
	padding: 0px 10px 5px 30px;
}
.basicul {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
        color: #5B604C;
        line-height: 18px;
        margin: 5px 10px 5px 35px;
        padding: 2px 0px 2px 0px;
}
/*	makes a letter(or word) with this class big and red :-) */
#center .firstletter, #centerfull .firstletter {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #990000;
}
/*	controls the look of links within the content columns */
#center p a:link, #center p a:active, #center p a:visited, #centerfull p a:link, #centerfull p a:active, #centerfull p a:visited, #centerfullsplit p a:link, #centerfullsplit p a:active, #centerfullsplit p a:visited, #centerfullsplitmoreleft p a:link, #centerfullsplitmoreleft p a:active, #centerfullsplitmoreleft p a:visited  {
	background-color: transparent;
	border: none;	
	color: #0033FF;
	text-decoration: none;
}
#center p a:hover, #centerfull p a:hover, #centerfullsplit p a:hover, #centerfullsplitmoreleft p a:hover {
	background-color: transparent;
	border: none;
	color: #FF0000;
	text-decoration: underline;
}
/*	used to control the style of image links */
.imagelink-pcast a:link, .imagelink-pcast a:visited, .imagelink-pcast a:active {
	background-color: transparent;
	border: none;
	padding: 0px;
	margin: 0px;
	color: #FFFFFF;
	text-decoration: none;
}
table a:link, table a:visited, table a:active{
	color: #0033FF;
	text-decoration: none;
}
table a:hover {
	color: #FF0000;
	text-decoration: underline;
}
/*	when the centerfull div needs 2 equal
	columns, these next 2 divs are used */
#centerleft {
	width: 290px;
	margin: 0px;
	float: left;
	padding: 0px;
	margin: 0px;
}
#centerright {
	width: 291px;
	margin: 0px;
	float: left;
	padding: 0px;
	margin: 0px;
}

#centerleftmajority {
	width: 430px;
	margin: 0px;
	float: left;
	padding: 0px;
	margin: 0px;
}
#centerrightminority {
	width: 151px;
	margin: 0px;
	float: left;
	padding: 0px;
	margin: 0px;
}

/*	Adds a border to any element with this class */
.border {
	border-bottom: 1px solid #000;
}
/*	the image style for the "listen now" button in the hilites */
#hilites img {
	float:right;
	padding: 7px;
	margin-left: 10px;
}
/*	add this class to an image and it will float right and have
	the attributes specified in the style */
.imageright {
	float: right;
	padding: 7px;
	margin-left: 10px;
	background-color: #ffffff;
	border: 1px solid #bac1a3;
}
/*	add this class to an image and it will float left and have
	the attributes specified in the style */
.imageleft {
	float: left;
	padding: 7px;
	margin-right: 10px;
	background-color: #ffffff;
	border: 1px solid #bac1a3;
}
.imageright a:hover, .imageleft a:hover {
	border: 1px solid #7C7F72;
	background-color: #9ABA9C;
}	
/*	add this class to an image and it will float right and have
	the attributes specified in the style */
.imageright-noborder {
	float: right;
	padding: 7px;
	margin-left: 10px;
	background-color: #ffffff;
}
/*	add this class to an image and it will float left and have
	the attributes specified in the style */
.imageleft-noborder {
	float: left;
	padding: 7px;
	margin-right: 10px;
	background-color: #ffffff;
}
.imagecenter {
	align: center;
}
/*	gives padding to forms with this class*/
.centerform {
	padding: 5px 10px 5px 10px;
	margin: 0px;
}
.recordstable{
	float: right;
	padding: 0px 0px 0px 10px;
	margin: 5px 5px 5px 5px;
}
.white-bold {
	color: #FFFFFF;
	font-weight: bold;
}
/*	links in the right column */
#rightlinks {
	margin: 0px;
	padding: 0px;
}
#rightlinks a:link, #rightlinks a:active, #rightlinks a:visited {
	color: #009900;
	text-decoration: none;
}
#rightlinks a:hover {
	color: #000000;
	text-decoration: underline;
}
.rightboxes {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	padding: 10px;
}
/*	controls all <p> tags in the topleft div */
#topleft p {
	padding: 5px 5px 5px 10px;
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
}
/*	controls links in the topleft div */
#topleft a:link, #topleft a:active, #topleft a:visited {
	color: #009900;
	text-decoration: none;
}
#topleft a:hover {
	color: #000000;
	text-decoration: none;
}
/*	controls the links below the ministry links */
#secondarylinks {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#secondarylinks ul {
	list-style: none;
	margin: 0;
	padding: 0px 0px 10px 12px;
	text-indent: 0;
	line-height: 20px;
}
#secondarylinks li {
	list-style: none;
	padding-left: 14px;
	background-image: url(/images/bullet.gif);
	background-repeat: no-repeat;
	background-position: 0 6px;
}
#secondarylinks li a:link, #secondarylinks li a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	text-decoration: none;
}
#secondarylinks li a:hover {
	color: #FF0000;
}
/*footer links */
#footer a:link, #footer a:active, #footer a:visited {
	color: #EBEBEB;
	text-decoration: none;
	font-weight: bold;
}
#footer a:hover {
	text-decoration: underline;
}
.radio {
	background-image: url(/images/church/radio.gif);
	background-repeat: no-repeat;
	background-position: 65px 0px;
	float: left;
	margin: 10px 0px 0px 0px;
	display: block;
	width: 288px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #293AAE;
	text-decoration: none;
}
.radio a:link, .radio a:visited, .radio a:active {
	display: block;
	width: 288px;
	padding: 110px 0px 0px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #293AAE;
	text-decoration: none;
}
.tv {
	float: left;
	margin: 10px 0px 0px 0px;
	display: block;
	background-image: url(/images/church/video.gif);
	background-repeat: no-repeat;
	background-position: 65px 0px;
	width: 288px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #293AAE;
	text-decoration: none;
}
.tv a:link, .tv a:visited, .tv a:active {
	display: block;
	width: 288px;
	padding: 170px 0px 0px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #293AAE;
	text-decoration: none;
}
.radio a:hover, .tv a:hover {
	font-weight: bold;
}
.radio-offair {
	background-image: url(/images/church/radio-bw.gif);
	background-repeat: no-repeat;
	background-position: 65px 0px;
	float: left;
	margin: 10px 0px 0px 0px;
	display: block;
	width: 288px;
	padding: 110px 0px 0px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: grey;
	text-decoration: none;
}
.tv-offair {
	float: left;
	margin: 10px 0px 0px 0px;
	display: block;
	background-image: url(/images/church/video-bw.gif);
	background-repeat: no-repeat;
	background-position: 65px 0px;
	width: 288px;
	padding: 170px 0px 0px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: grey;
	text-decoration: none;
}
.hilitesbox {
	display: block;
	width: 550px;
	height: 100px;
	margin: 12px 0px 12px 15px;
	border: 1px solid #000;
	text-align: left;
	background-image: url(/images/wtbi/aiken.jpg);
	background-repeat: no-repeat;
}
.hilitesbox-rob {
	display: block;
	width: 550px;
	height: 100px;
	margin: 12px 0px 12px 15px;
	border: 1px solid #000;
	text-align: left;
	background-image: url(/images/wtbi/robertson.jpg);
	background-repeat: no-repeat;
}
.hilitesbox-guest {
	display: block;
	width: 550px;
	height: 100px;
	margin: 12px 0px 12px 15px;
	border: 1px solid #000;
	text-align: left;
	background-image: url(/images/wtbi/guest.jpg);
	background-repeat: no-repeat;
}
.hparagraph {
	display: block;
	width: 280px;
	padding: 5px 0px 10px 110px;
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #5B604C;
	line-height: 17px;
	float: left;	
}
.date {
	padding: 8px 0px 8px 0px;
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}
.hilitesimg { 
	float: right;
	border-left: 1px solid #000;
	display: block;
	height: 80px;
	padding: 20px 10px 0px 10px;
}
/*WTBI Live Button Code */
#wtbilive {
	padding: 0px;
}
#wtbilive a:link, #wtbilive a:active, #wtbilive a:visited {
	display: block;
	background-image: url(images/listenliveweb.jpg);
	background-position: 0px 0px;
	height: 77px;
	width: 169px;
	float: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
#wtbilive a:hover {
	background-position: 0px -77px;
}

#wtbiliveinpage {
	/*padding: 0px;   */
	padding-right: 15px;
}

#wtbiliveinpage a:link, #wtbiliveinpage a:active, #wtbiliveinpage a:visited {
	display: block;
	padding: 0px;
	background-image: url(images/listenliveweb.jpg);
	background-position: -2px 0px;
	height: 77px;
        width: 167px;
	border-width: 0px;
}
#wtbiliveinpage a:hover {
	background-position: -2px -77px;
}

#centerfull .playertable {
	padding: 10px;
}