/************************************************************************************************************
* Web Designer Toolbox- © The toolbox for Web Designers (www.royvella.com)
* This is intended to help all the good designers work less at coding - Please feel free to use and improve.
* Visit my website at http://www.royvella.com for what's latest in the 'box!
*************************************************************************************************************/

/* ---------------------------------------------------------------------
Master - Styles for page layout, color and all around greater control
------------------------------------------------------------------------ */

/* Layout Container
------------------------------------------------------------------ */

#botImg {
background: url(../img/bg_bottom.gif) bottom repeat-x;
bottom: 0;

}

#topRightImg {
position:relative;
background:url(../img/bg_topRight.png) top right no-repeat;
margin:0 auto;
width: 900px;
}

#container {
margin:0 auto; padding:1px;
width: 816px;
background: #597FA3;
}

.section1 {
margin:4px auto;
padding:0px;
width:800px;
background:#C8D5DD url(../img/right-hp_bgFoliage.gif) bottom right no-repeat;
border:5px solid #fff;
height:340px;
min-height:350px;
}

.section2 {
position:relative;
margin:4px auto; padding:5px;
background:#C8D5DD url(../img/bottom-hp_bgFoliage.gif) bottom repeat-x;
border:5px solid #fff;
height:100%; min-height:100%;
width:790px;
}

.sectionIP {
margin:4px auto;
width:800px; 
height: auto!important; height:768px;
background: #D3DDE4 url(../img/ip_BG-right.gif) right repeat-y;
border:5px solid #fff;
}



/* headersIP
------------------------------------------------------------------ */

#header { 
position:relative;
margin:0 auto;
height: 60px; width:808px;  }

#header h1 { position: absolute; left: 5px; top: 24px; margin: 0;}

#header img { color:#E6EAEB; }



/* Nav
------------------------------------------------------------------ */


#tabNav{
position: absolute;
top: 36px; right: -5px;
border: 4px solid #597FA3;
border-bottom: 0;
letter-spacing: 2px; }

#tabNav ul {
margin:0; padding:0;
list-style:none;
}
#tabNav li {
display:inline;
}
#tabNav a {
float:left;
background:url(../img/bg-Nav-left.gif) no-repeat left top;
text-decoration:none;
}
#tabNav a span {
float:left;
display:block;
background: url(../img/bg-Nav-right.gif) no-repeat right top;
padding:2px 12px;
font: 130% Arial, Helvetica, sans-serif;
color:#000;
}

#tabNav a span {float:none;}

#tabNav a:hover span {color:#000;}

#tabNav a:hover {background-position:0% -25px;}

#tabNav a:hover span {background-position:100% -25px;}  

#dropmenudiv{
position:absolute;
margin-top:5px;
margin-left:3px;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
color:#fff;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color:#31475B;
}



/* contentBox - Home Page
------------------------------------------------------------------ */

#leftContent1{
float:left;
background-color:#DEE3E5;
}

#leftContent2{
width: 500px;
float: left;
}

#leftContent2 h1{color:#990000; margin-bottom: 1px}


#leftContent2 h2{ color:#587FA3; margin-bottom: 10px}

#leftContent2 p{ margin-bottom: 15px}


#rightContent1 {
width: 262px;
border-left: 5px solid #fff;
height: 100% !important; height:350px;
float: right;
}

#rightContent1 h3 {
padding-left:10px;
margin-top: 5px;
}

#rightContent1 h4 {
font:normal "Arial Narrow"; color:#990000;
margin-top:8px !important; margin-top:3px;
padding-left:10px;
}

#rightContent1 p {
margin-bottom:8px !important; margin-bottom:3px;
padding-left:10px;
display: block;
}

#rightContent1 #sermonsList a:hover {
background:url(../img/bg-hover-hp.png) bottom repeat-x;
display: block;
text-decoration: none;
}

.btn#btn-viewAll{ margin:10px 0 0 205px;}

.btn a{
color:#fff;
text-decoration:none;
background: #587FA3;
padding:2px 4px !important; padding:0 4px}

.btn a:hover {background: #425F79;}

#banners-right {
width: 265px;
float: right;
}

#banners-right img {margin:10px auto 10px 2px;}


/* contentBox - Inner Pages
------------------------------------------------------------------ */


#leftContentIP{
padding:0; margin:0;
width: 532px !important; width:492px;
background:url(../img/bg-LeftContentIP.gif) top right no-repeat;
min-height: 768px;
float: left;
}

#worshipBox {
padding-left:10px
}

#leftContentIP a {
border-bottom: 1px dotted #990000;
color:#990000;
}

#leftContentIP a:hover {
border-bottom: 1px dotted #fff;
color:#fff;
text-decoration:none;
}


#leftContentIP P, #leftContentIP h3{ padding:5px 0 5px 10px;}


#leftContentIP dl {
width:100%;
line-height:normal;
margin:10px;
float:left;
}


#leftContentIP dl dt {
margin:0; padding:0;
list-style:none;
}

#leftContentIP dl dd {
float:left;
background: url("../img/bg-headerIP-left.gif") no-repeat left top;
margin:0; padding:0 0 0 9px;
}

#leftContentIP h1{
display:block;
background:url("../img/bg-headerIP-right.gif") no-repeat right top;
padding:2px 10px 4px 0;
font:140% Arial, Helvetica, sans-serif;
color:#990000;
}

#leftContentIP	ul#worship {margin-left:10px; padding:0; list-style:none; }
#leftContentIP	ul#worship li { display: block; padding: 5px;  }

#leftContentIP ul {margin:0; padding:0; list-style:none; }
#leftContentIP li { display:inline; padding: 0 10px;  }
#leftContentIP li img { padding-right:10px; vertical-align:middle;}

#rightSideIP {
background:url(../img/ip-BG-RightTop.gif) top no-repeat;
width: 252px; height:270px;
padding: 5px;
float: right;
}

#rightSideIP h1 {
background: url(../img/bg-rightHeader.gif) no-repeat;
height: 20px; width:250;
color:#587FA3;
font:140% Arial, Helvetica, sans-serif;
padding: 2px 0 0 25px;
margin:12px auto;
}

#rightSideIP a { 
font:120% "Arial Narrow" arial, helvetica,clean,sans-serif;
color:#990000;
margin-left:5px;}


#banners-rightIP {
position: absolute;
width: 256px;
right:54px; bottom:75px;
}

#banners-rightIP img { margin:10px auto 10px 2px; }

.photoImgBox {
width:220px;
float: left;
margin:10px;
}


.photoImgBox img {
background:#FFFFFF;
border:1px solid #000;
padding:5px 5px 15px 5px;
float:left;
margin-right:10px;}


/* IpContent
------------------------------------------------------------------ */
.IpContent {padding: 10px;}
.IpContent p { margin-bottom:-5px;}
.IpContent h2 { margin-top:;}
.IpContent h3 { font-size: 200%; margin:0 0 -10px -10px; }
.IpContent h4 {font:150% normal; margin:0 0 20px 0;}
.IpContent h4 a { color:#CC0000; font-weight:bold}
.sermonsContent h4 a:hover { color:#fff;}
small.verse { font-size:10px; color:#CC0000;}



/* Footer
------------------------------------------------------------------ */

#footer {
position:relative;
margin:0 auto;
height: 60px; width:808px;
text-align:center;
}



/* Global
------------------------------------------------------------------ */

.clear {
clear:both;
margin:5px !important; margin:0;
padding:5px !important; padding:0;}

.separator { 
background: url(../img/line_dotted_white.gif) repeat-x; 
margin: 5px auto;
padding: 5px 0; 
width: 98%; height: 1px;
}

.separator-blue { 
background: url(../img/line_dotted_blue.gif) repeat-x; 
margin: 3px auto;
width: 98%; height: 1px;
}

.left {float: left;}
.right { float: right; }

#leftContent2 a { border-bottom: 1px dotted #990000; color:#990000;}
#leftContent2 a:hover { border-bottom: 1px dotted #fff; color:#fff; text-decoration:none;}