
/*********************************************************
**********************************************************
***
*** dhtmltooltip
***
*** This will be used to display tooltips.  The tooltips are
*** mostly used to expand bible verses, but could be used in
*** other parts of the website.
***
**/

#dhtmltooltip{
position: absolute;
width: 250px;
border: 2px solid black;
font-size: 20px;
text-align: center;
padding: 5px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

/*********************************************************
**********************************************************
***
*** body
***
*** Defines the default values used throughout the site.
***
**/

body {
	margin: 0px;
	background-color: #886633;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

/*********************************************************
**********************************************************
***
*** header_column & main_logo
***
*** Header column is the gradiant blue background area
*** Logo area link is where Liberty Baptist Church appears
***
**/

td.header_column {
	height: 125px;
	vertical-align: middle;
	font-size: large;
	color: #FFFFFF;
	background-image: url('images/header4_bg.jpg');
	background-position: top;
}

a.logo_area_link:active,a.logo_area_link:visited,a.logo_area_link:link {
	font-size: 44px;
	font-weight: bold;
	font-family: Times;
	text-decoration: none;
	padding-left: 10px;
	color: #FFFFFF;
}

a.logo_area_link:hover{
	color: #00DDFF;
}

/*********************************************************
**********************************************************
***
*** shadow_right & shadow_left
***
*** Shadow right and left are the gradiant black background
*** that taper off the edge of the main display area
***
**/

td.shadow_right {
	background-image: url(images/border_shadow_l.jpg);
	background-repeat: repeat-y;
	background-position: left;
}

td.shadow_left {
	background-image: url(images/border_shadow_r.jpg);
	background-repeat: repeat-y;
	background-position: right;
}

/*********************************************************
**********************************************************
***
*** horizontal_column
***
*** This is the black region (no gradiant) left and right
*** of the horizontal_center (main image).  Kinda makes a cross effect.
***
**/

td.horizontal_column {
	background-color: #000000;
	border-top-width: 15px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	height: 150px;
	display: table-cell;
	vertical-align: top;
}

/*********************************************************
**********************************************************
***
*** horizontal_center
***
*** Is the main image across the page.
***
**/

td.horizontal_center {
	background-color: #FFFFFF;
	border-top-width: 15px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #333333;
	border-bottom-color: #000000;
	border-left-color: #333333;
	height: 150px;
	display: table-cell;
	vertical-align: top;
	background-image: url('images/header-770x150_bg.jpg');
}

/*********************************************************
**********************************************************
***
*** LinkContainer / main_link
***
*** These are the main links within the Horizontal Center 
***
**/

table.linkcontainer td {
	background-color: #000000;
	filter:alpha(opacity=70);
	opacity: .7;
	-moz-opacity: .7;
}

a.main_link:active,a.main_link:visited,a.main_link:link {
	font-weight: bold;
	font-size: large;
	text-decoration: none;
	display: block;
	width: 100%;
	color: #FFFFFF;
	line-height: 50px;
}

a.main_link:hover {
	background-color:#444444;
	color: #FFFFFF;
}

/*********************************************************
**********************************************************
***
*** ask_link
***
*** These are the Ask/Seek/Knock links within the Horizontal Center 
***
**/

a.ask_link:active, a.ask_link:visited, a.ask_link:link {
	font-weight: bold;
	font-size: x-large;
	font-family: Times;
	text-decoration: none;
	color: #AFAFAF;
	line-height: 100px;
}

a.ask_link:hover {
	color: #FFFFFF;
	font-size: xx-large;
}


/*********************************************************
**********************************************************
***
*** staff_header & location_header & belief_header & missions_header
***
*** This is the Staff and Location Headers within
*** the Horizontal Center 
***
**/

td.staff_header {
	font-weight: bold;
	font-size: x-large;
	font-family: Times;
	color: #FFFFFF;
	line-height: 100px;
}

td.location_header {
	font-weight: bold;
	font-size: x-large;
	font-family: Times;
	color: #FFFFFF;
	line-height: 100px;
}

td.belief_header {
	font-weight: bold;
	font-size: x-large;
	font-family: Times;
	color: #FFFFFF;
	line-height: 100px;
}

td.missions_header {
	font-weight: bold;
	font-size: x-large;
	font-family: Times;
	color: #FFFFFF;
	line-height: 100px;
}

td.gallery_header {
	font-weight: bold;
	font-size: x-large;
	font-family: Times;
	color: #FFFFFF;
	line-height: 100px;
}

/*********************************************************
**********************************************************
***
*** below_header
***
*** Below header is just ABOVE the main body content and
*** just BELOW the Horizontal Center.
***
**/

td.below_header {
	background-color: #212121;
	height: 20px;
	color: #FFFFFF;
	padding: 13px;
	font-size: large;
	font-weight: bold;
/*	text-align: center;*/
}

/*********************************************************
**********************************************************
***
*** staff_link
***
*** These are the Staff Links within the Below Header 
***
**/

a.staff_link:active, a.staff_link:visited, a.staff_link:link {
	font-weight: bold;
	font-size: large;
	text-decoration: none;
	color: #CFCFCF;
	line-height: 25px;
}

a.staff_link:hover {
	color: #FFFFFF;
}


/*********************************************************
**********************************************************
***
*** left_content / body_content / main_content
***
*** This is the main area in the lower center of the page.
*** This area has the white check background design.
***
**/

td.left_content {
	width: 200px;
	padding: 5px;
	vertical-align: top;
	background-image: url('images/bg_new.jpg');
	background-repeat: repeat;
}

td.body_content {
	padding: 15px;
	font-size: large;
	background-image: url('images/bg_new.jpg');
	background-repeat: repeat;
	height: 50px;
}

td.main_content_box {
	background-color: #FFFFFF;
}

/*********************************************************
**********************************************************
***
*** Middle Spacer is just below main body content
***
*** ====================================================
*** !!!!!!THIS IS THE OVERRIDING WIDTH OF THE PAGE!!!!!!
*** ====================================================
***
*** Sounds crazy to me, but changing the width here will
*** adjust the width of the entire website.
***
**/

td.middle_spacer {

	width: 750px; /** <-- Adjust width of website! **/

	background-color: #212121;
	color: #FFFFFF;
	padding: 10px;
}

td.ask {
	color: #FFFFFF;
	text-align: center;
	font-weight: bold;
	font-family: Times;
	font-size: x-large;
}

td.bottom_link_container {
	background-color: #000000;
	text-align: center;
	color: #FFFFFF;
	padding: 5px;
}

a.bottom_link:active,a.bottom_link:visited,a.bottom_link:link {
	font-weight: bold;
	text-decoration: none;
	color: #FFFFFF;
}

a.bottom_link:hover{
	color: #999999;
}

a.clipart_link:active,a.clipart_link:visited,a.clipart_link:link {
	text-decoration: none;
	color: #00AADD;
}

a.hpsc_link:active,a.hpsc_link:visited,a.hpsc_link:link {
	text-decoration: none;
	color: #00AADD;
}

a.gallery_link:active,a.gallery_link:visited,a.gallery_link:link {
	text-decoration: none;
	font-weight: bold;
	color: #008800;
}

div.bottom_content{
	color: #FFFFFF;
	padding: 5px;
}

div.navigation {
	height: 50px;
	vertical-align: middle;
	text-align: center;
}
