﻿/* Main CSS StyleSheet for Hamburg Seventh-day Adventist Church
 Designed and Developed by the Knarr Brothers, your web design and development team!
 To Contact the Knarr Brothers, 
  Website: http://www.knarr.org
  Phone: 484-335-1269
*/
body {
font-family: arial, helvetica, sans-serif;
font-size: .9em;
color: #330066;
background: #660099;
margin: 0;
padding: 0;
border: 0;
min-width: 1024px;
text-align: center;
}
#wrapper4 {
 background: #660099;
 padding: 0 0 auto 0;
 min-height: 100%;
}
#wrapper3 {
 width: 100%;
 background: #ffffff url(../images/header-bg.jpg) repeat-x top left;
}
#wrapper2 {
 width: 100%;
 min-height: 500px;
 background: transparent url(../images/footer-bg2.jpg) repeat-x bottom left; 
}
#wrapper1 {
 width: 900px;
 margin: 0 auto 0 auto; 
}

/* header Details */
#header {
 width: 900px;
 margin: 0;
 height: 79px;
 background: transparent;
}
#logo {
 margin: 0px;
}
#logo img {
 margin: 0 8px 0 8px;
 padding: 0;
 border: 0;
 float: left;
 height: 79px;
}

/* mainLinks */
#mainLinks { margin: 0; padding: 0; float: right; width: 600px; height: 53px; vertical-align: top; }
#mainLinks ul { list-style: none; float: left; width: auto; margin: 0; vertical-align: top; }
#mainLinks ul li { margin: 0; float: left; vertical-align: top; line-height: 53px; width: 130px; }
#mainLinks ul li a, #mainLinks ul li a:link, #mainLinks ul li a:active, #mainLinks ul li a:visited, #mainLinks ul li a:hover {
 text-align: center; text-decoration: none; font-size: 14px; display: block;
}
#mainLinks ul li a, #mainLinks ul li a:link, #mainLinks ul li a:active {
 color: #ffffff; text-decoration: none; background: url(../images/link-bg.jpg) no-repeat top right;
}
#mainLinks ul li a:visited { color: #ffff99; text-decoration: none; background: url(../images/link-bg.jpg) no-repeat top right; }
#mainLinks ul li a:hover { color: #ffff00; text-decoration: none; background: url(../images/link-bg.jpg) no-repeat top right; }

#mainLinks ul ul { border: solid 2px #330066; margin: 0; padding: 0; background: #ffffff; background: url(../images/wht-tp.png) repeat top left;
 /* background: rgba(255, 255, 255, .85); */ }
#mainLinks ul li li { width: 240px; line-height: 28px; padding: 2px 6px; border-bottom: solid 1px #9900cc; }
#mainLinks ul li li a, #mainLinks ul li li a:link, #mainLinks ul li li a:active { font-weight: bold;
 color: #330099; text-decoration: none; background: transparent; }
#mainLinks ul li li a:visited { font-weight: bold; color: #330099; text-decoration: none; background: transparent; }
#mainLinks ul li li a:hover { font-weight: bold; color: #9933cc; text-decoration: none; background: transparent; }
 
#mainLinks li { position: relative; }
#mainLinks ul ul { position: absolute; z-index: 500; }
#mainLinks ul ul ul { top: 0; left: 100%; }

div#mainLinks ul ul, div#mainLinks ul li:hover ul ul, div#mainLinks ul ul li:hover ul ul { display: none; }
div#mainLinks ul li:hover ul, div#mainLinks ul ul li:hover ul, div#mainLinks ul ul ul li:hover ul { display: block; }

/* content Details */
#content {
 width: 900px;
 min-height: 450px;
 background: transparent;
}
#leftContent {
 float: left;
 width: 245px;
 margin: 10px auto auto 0px;
 position: relative;
 border: 0;
 padding: 0 0 0 25px;
}
.lCtop { 
 background: url(../images/lh-top2.jpg) no-repeat left top;
 min-height: 40px;
 width: 218px;
 vertical-align: middle;
}
.lCbtm {
 background: url(../images/lh-btm.jpg) no-repeat left bottom;
}
#rightContent {
 float: right;
 width: 600px;
 margin: 10px 5px auto auto;
 text-align: justify;
 border: dotted 0px #660099;
 padding: 5px;
}

/* INDIVIDUAL TAGS */
table.tblCenter {margin-left: auto; margin-right: auto;}
h1, h2, h3, h4, h5, h6, tr, th, td {text-align: left;}  
h1, h2, h3, h4, h5, h6 {
 color: #996600;
}
h1 {font-size: 1.5em;}
h2 {font-size: 1.3em;}
h3 {font-size: 1.1em;}
h4 {font-size: .9em;}
h5 {font-size: .8em;}
h6 {font-size: .7em;}
p {font-size: .9em;}
img {margin: 8px; border: 0;}
.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center;}
.justify {text-align: justify;}
.superscript {font-size: xx-small; vertical-align: top;}
.subscript {font-size: xx-small; vertical-align: bottom;}
h4.sFont {font-family: Georgia, Times New Roman, Serif; padding: 2px 15px 2px 15px;}

/* Border with Linear Gradient */
.bborder { border-bottom: solid 2px #660099; }
.gradient-bg {
  height: 2px;
  /* fallback/image non-cover color */
  background-color: #9900cc;
  /* fallback image */
  background-image: url(../images/hr4.jpg) no-repeat center; 
  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient(left, #ffffff, #9900cc, #ffffff);
  /* Safari 4+, Chrome 1+ */
  background-image: -webkit-gradient(linear, left top, right top, from(#ffffff), color-stop(0.25, #9900cc), to(#ffffff));
  /* Safari 5.1+, Chrome 10+ */
  background-image: -webkit-linear-gradient(left, #ffffff, #9900cc, #ffffff); 
  /* Opera 11.10+ */
  background-image: -o-linear-gradient(left, #ffffff, #9900cc, #ffffff);
}

/* Form Information */
.tbxForm {
 border-width: 2px;
 border-style: solid;
 border-top-color: #330066;
 border-right-color: #663399;
 border-bottom-color: #663399;
 border-left-color: #330066;
 -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
 font-size: 11px;
 font-weight: normal;
 font-family: Arial, helvetica, Sans-Serif;
 color: #330066;
 padding: 1px 3px;
}
.btnForm {
 border: none;
 font-size: 11px;
 font-weight: bold;
 width: 90px;
 height: 22px;
 background: #330066 url(../images/btnForm.jpg) no-repeat;
 color: #ffffff;
 line-height: 22px;
 vertical-align: middle;
}
.lblText {font-weight: bold;}
.redText {color: #ff0000; font-size: 11px;}

/* Table */
#leftContent table {border: 0; margin: 0; padding: 0; }
#leftContent tr { }
#leftContent th {
 font-size: 14px; 
 text-align: left; 
 color: #ffff00; 
 text-indent: 5px;
 height: 40px;
 padding: 0;
}
#leftContent td {font-size: 12px; text-indent: 8px; }

/* Links */
#content a, #content a:link, #content a:visited, #content a:active, #content a:hover {
 font-weight: bold;
 font-size: 12px;
 text-transform: capitalize;
 letter-spacing: normal;
 font-style: normal;
 text-decoration: none;
}
#content a:link { color: #0000dd; }
#content a:visited { color: #6600cc; }
#content a:hover { color: #ff0000; }
#content a:active { color: #bb0000; }
#content h3 a:hover { color: #996600; }

/* footer Details */
#footer {
 width: 900px;
 text-align: center;
 color: #ffffff;
 background: #660099;
 margin: 0 auto 15px auto;
}
#footer p {
 font-size: 11px;
 text-align: center;
 color: #ffffff; 
}
#footer a, #footer a:link, #footer a:active, #footer a:visited, #footer a:hover {
 font-size: 11px;
}
#footer a, #footer a:link, #footer a:active {
 color: #ffff00;
 font-weight: bold;
 text-decoration: none;
}
#footer a:visited {
 color: #ffffff;
 font-weight: bold;
 text-decoration: none;
}
#footer a:hover {
 color: #ffff00;
 font-weight: bold;
 text-decoration: underline;
}

/* BEGIN CLEARFIX (http://www.positioniseverything.net/easyclearing.html)
=========================================================================
	ClearFix is for floated elements instead of <div class="Clear"></div> below it.
	When ClearFix is used, Clear div should not be needed.
	USE THIS:
	<div class="ClearFix">
		<div style="width: 30%; float: left;">content</div>
		<div style="width: 30%; float: left;">content</div>
	</div>
	NOT THIS:
	<div style="width: 30%; float: left;">content</div>
	<div style="width: 30%; float: left;">content</div>
	<div class="Clear"></div>
	*/
	.ClearFix:after, .cmspage:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
	.ClearFix, .cmspage {
	display: inline-block;
	}
	/* Holly Hack Targets IE Win only \*/
	* html .ClearFix, * html .cmspage {
		height: 1%;
	}
	.ClearFix, .cmspage {
		display: block;
	}
	/* End Holly Hack */
/* END CLEARFIX
===================================== */
/* FORM ELEMENT Styles */
#content .txtBox { padding: 1px 4px; color: #330066; background: #ffffff; border: solid 1px #330066; -moz-border-radius: 4px; -webkit-border-radius: 4px;
 border-radius: 4px; -moz-box-shadow: 4px 4px 3px #aaa; -webkit-box-shadow: 4px 4px 3px #aaa; box-shadow: 4px 4px 3px #aaa; width: 120px; }

/* ASP Link Button Styles */
#content a.Btn2, #content a:link.Btn2, #content a:active.Btn2, #content a:visited.Btn2, #content a:hover.Btn2 { padding: 3px 10px; background: #660099; 
 border: solid 2px #330066; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
 -moz-box-shadow: 4px 4px 4px #888; -webkit-box-shadow: 4px 4px 4px #888; box-shadow: 4px 4px 4px #888; }
#content a.Btn2, #content a:link.Btn2, #content a:active.Btn2, #content a:visited.Btn2 { color: #ffffff; background: #660099;  }
#content a:hover.Btn2 { color: #ffff00; background: #660099; }

 /* For Login Page */
.indent { width: 100px; text-align: right; display: inline-block; }
.indent2 { width: 100px; text-align: right; line-height: 20px; float: left; }
.indent50 { width: 50px; text-align: right; display: inline-block; }
.rBtns { margin: 0 0 0 10px; padding: 0; }

