@charset "utf-8";
/* CSS Document */

html, body {
	margin: 0;
	padding:0;
	background-color:#233C52;
	background-image: URL(/images/mainBG.jpg);
	background-repeat:repeat-x;
	font-family:Verdana;
	font-size:10px;
	color:white;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:20px;
}

div#container {
 	text-align:center; 
 	margin-left:auto; 
 	margin-right:auto; 
 	width:1000px; 
	position:relative;

}

/*This is the middle section (deep blue) that contains everything below the toolbar*/
div#content {
	width:1000px;
	margin:0 auto;
	background-color:#3A4652;
	border:1px;
	border-color:#3A4652;
	border-style:solid;
	text-align:center;
	overflow:hidden;
	position:absolute;
	left:0;
	top: 198px;
	z-index:200;
	padding-bottom:26px;
}

/*
	The secton that should be on the right side of the screen that has the accordion feature, links to subpages, and other features.
    A variation of it should be on every page
*/
div#navSection {
	position:relative;
	float:right;
	margin:20px;
	margin-top:0px;
	width:212px;
}

div#spacer5 {
	height: 5px;
	width:100%;
	background:#3A4652;
}


/*This is the bottom section that contains everything below the toolbar*/
div#footer {
	width:1000px;
	height:28px;
	margin:0 auto;
	padding: 0;
	text-align:right;
	background-image:URL(/images/footerBG.jpg);
	background-repeat:repeat-x;
        background-position: bottom;

	border:1px;
	border-color:#333333;
	border-style:solid;
	font-size:11px;	
	font-weight:bold;
	text-transform:uppercase;
	position:absolute;
	bottom:0;
	left:0;
        clear:both;

}

/*This is the bottom section that contains everything below the toolbar*/
div#footer p {
	margin:0;
	padding:0;
	padding-right: 20px;
	padding-top:6px;
}

div#footer a {
        color: white;
        text-decoration:none;
}

div#headerImage {
    position:absolute;
    left:0; 
    top:0; 
    width:1000px; 
    height: 110px;
    z-index:0;
}
div#headerImage img{
    display:none;
}

/************************************************************************************************************
*  The next section is used to create the "sections" of the page with rounded edges, a decorated            *
*    title bar, and a footer to run along the bottom
*************************************************************************************************************/

/* The next four section ensures that the corners look rounded any section and that they are always on top */
div.topRightCorner {
	background-image:url(/images/section/sectionTopRight.gif);
        background-position: top right;
	background-repeat:no-repeat;
	position:absolute;
	right:0px;
	top:0;
	width:8px;
	height:30px;
	z-index:500;
}
div.topLeftCorner {
	background-image:url(/images/section/sectionTopLeft.gif);
        background-position: top left;
	background-repeat:no-repeat;
	position:absolute;
	left:0;
	top:0;
	width:8px;
	height:30px;
	z-index:500;
}
div.bottomRightCorner {
	background-image:url(/images/section/sectionBottomRight.gif);
        background-position: bottom right;
	background-repeat:no-repeat;
	position:absolute;
	right:0px;
	bottom:0;
	width:8px;
	height:8px;
	z-index:500;
}
div.bottomLeftCorner {
	background-image:url(/images/section/sectionBottomLeft.gif);
        background-position: bottom left;
	background-repeat:no-repeat;
	position:absolute;
	left:0;
	bottom:0;
	width:8px;
	height:8px;
	z-index:500;
}

div.sectionHeader {
	background-image:url(/images/section/sectionHeader.jpg);
	position:relative;
	width:100%;
	height:30px;
	text-align:left;
	z-index:100;
}

div.sectionFooter {
	
	background: url(images/section/sectionFooter.jpg) repeat-x bottom;
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
	height:2px;
	z-index:0;
}
div.sectionTitle {
	font-size:14px;
	font-weight:bold;
	color:white;
	padding-top:6px;
	padding-left:10px;
	z-index:100;
}

div.sectionTitle input {
        font-family:Helvetica;
	font-size:14px;
	font-weight:bold;
	color:white;
	width:100%;
        border:none; 
        background:transparent; 
        position:absolute;
        top:6px;
	left:10px;
       
}

/************************************************************************************************************
*  These styles are used only on the navigation section on the right hand side of every page                *
*************************************************************************************************************/


/* Adds the borders to the content sections of the page */
div#sectionContent {
	position:relative;
	float:left;
	width:208px;
	margin:0;
	padding:0;
	margin-top:-3px;
	border-right-color:#7F878F;
	border-right-width:2px;
	border-right-style:solid;	
	border-left-color:#7F878F;
	border-left-width:2px;
	border-left-style:solid;	
	text-align:left;
	min-height:306px;
	height:auto!important;
	height:306px;
	/*min-height:100%;*/
}

div#sectionContent a{
	text-decoration:none;
	color:white;
	text-transform:uppercase;
}

div#sectionContent a:hover{
	text-decoration:underline;
}

div#sectionContent ul{
	margin:0;
	padding:0;
	width: 190px;
}

div#sectionContent li{
	margin:0;
	padding:0;
	border-top-color:#7F878F;
	border-top-width:1px;
	border-top-style:solid;
	display:block;
	list-style:none;	
}

/* h3 is what is shown no matter what and has an arrow inside of it */
div#sectionContent h3{
	margin:0;
	display:block;
	text-transform:uppercase;
	font-weight:bold;
	cursor:pointer;
	font-size:10px;
	padding:12px;
	padding-top:15px;
	padding-bottom:14px;
}

div#sectionContent h3:hover{
	background-image:url(/images/section/sectionContentHover.png);
	background-position:right;
	background-repeat:repeat-y;
}

/* The element is what will expand and contract when the h3 is clicked on */
.element{
	background-image:none;
	padding-left:10px;
}

/*Man, this one is a mouthful*/
div#sectionContent span.arrow{ 
	background-image:url(/images/arrow.gif);
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:left;
	vertical-align:middle;
	width:12px;
}

/************************************************************************************************************
*  This section just contains the flipping image series                 *
*************************************************************************************************************/

div#slideshowSection {
	position:relative;
	float:left;
	margin:0px;
	margin-bottom:8px;
	margin-left:20px;
	width: 728px;  /*The images must be set to this size to look good*/
	height:254px;
}

div#slideshowSection img{
	border-color:#7F878F;
	border-width:2px;
	border-style:solid;
	z-index:50; /*Just needs to be something less than the rounded corners and the slider */
	position:absolute;
	top:0;
	left:0;
	width:724px;
	height:250px;
}

div#seeThruHeader {
	background-image:URL(/images/billboard/header.png);
	background-repeat:repeat-x;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:30px;
	text-align:left;
	z-index:100; /*Greater than the image but less than the corners */
	border-top-color:#7F878F;
	border-top-width:2px;
	border-top-style:solid;
}

div.slider {
	background-image:URL(images/billboard/slider.png);
	background-position:bottom left;
	background-repeat:no-repeat;
        background-color:transparent;
	position:absolute;
	bottom:2px; /* I put it at 2 so it is above the image's border*/
	right:2px;
	width:89px;
	height:27px;
	z-index:100; /*Greater than the image but less than the corners */
	text-align:center;
	/*border:1px red solid;*/
}

div.slider a img {
	border:none;
}

div.slider div.arrowleft{
	position:relative;
	float:left;
	width:35px;
	height:26px;
	cursor:pointer;
	background:URL(images/arrowLeft.gif) no-repeat ;
	background-position: right center;
	margin-top:2px;
}

div.slider div.arrowRight{
	position:relative;
	float:right;
	cursor:pointer;
	background:URL(images/arrowRight.gif) no-repeat;
	background-position:left center;
	width:35px;
	height:26px;
	margin-top:2px;
}
/************************************************************************************************************
*  The ministries section displays three different buttons, texts, and videos              *
*************************************************************************************************************/


div#ministriesSection {
	position:relative;
	float:left;
	margin:0px;
	margin-left:20px;
	width:728px;
}
/* Adds the borders to the content sections of the page */
div#ministriesContent {
	position:relative;
	float:left;
	width:724px;
	margin:0;
	padding:0;
	border-right-color:#7F878F;
	border-right-width:2px;
	border-right-style:solid;	
	border-left-color:#7F878F;
	border-left-width:2px;
	border-left-style:solid;	
	text-align:left;
}

div#ministriesButtons {
	position:relative;
	float:left;
	margin:0;
	padding:0;
	width:245px;
	display:block;
}

div#ministriesButtons img {
	margin:0px;
	padding:0px;
	/*border-bottom:1px solid #7F8891;*/
	display:block;
	margin-bottom:-13px;
	cursor:pointer;
}

div#ministriesContent span {
	position:relative;
	float:left;
	margin:0;
	margin-top:10px;
	padding:0;
	padding-left:5px;
	border:0;
	text-align:left;
	width:205px;
	
	display:none;
}

div#ministriesContent img#ministriesVideo {
	position:relative;
	float:right;
	margin:10px;
	padding:0;
	
	border-color:#7F878F;
	border-width:1px;
	border-style:solid;	
}

.editButton {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 8px;
    width: 36px;
    height: 18px;
}