body, html {margin:0 auto; padding:0; height:100%; width:100%; }
body {color:#5A3D1C;/*brown*/ font-size:12pt; font-family:Arial,san serif; background:url(/images-ecc/bgBody.jpg) no-repeat center top fixed #ffffff; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; /* must keep background setting in this order */filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images-ecc/bgBody.jpg',sizingMethod='scale');}
a {display:inline-block;}
a:link, a:visited, a img {color:#FFDC87; text-decoration:none; border:none; outline:none;}
a:hover {color:#6F0B34;}
.rotateL3 {
-ms-transform:rotate(-3deg); /* IE 9 */
-moz-transform:rotate(-3deg); /* Firefox */
-webkit-transform:rotate(-3deg); /* Safari and Chrome */
-o-transform:rotate(-3deg); /* Opera */
transform:rotate(-3deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0.3);
}
.rotateL10 {
-ms-transform:rotate(-10deg); /* IE 9 */
-moz-transform:rotate(-10deg); /* Firefox */
-webkit-transform:rotate(-10deg); /* Safari and Chrome */
-o-transform:rotate(-10deg); /* Opera */
transform:rotate(-10deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.shadow {
-moz-box-shadow: 1px 1px 5px black;
-webkit-box-shadow: 1px 1px 5px black;
box-shadow: 1px 1px 5px black;
}
.insideshadow {
-moz-box-shadow:inset 0 0 30px black;
-webkit-box-shadow:inset 0 0 30px black;
box-shadow:inset 0 0 30px black;
}
.heading {font-family:'Marcellus', Arial, sans-serif; font-size:2em; font-weight:bold;}
.heading2 {font-family:'Marcellus', Arial, sans-serif; font-size:1.5em; font-weight:bold;}
.top-object {z-index:5;}
.vert-align {height:100%; width:0px; display:inline-block; vertical-align:middle;}
.last {margin-right:0;}
.social-media {display:inline-block; height:18px;}
.social-media img {height:100%; width:auto;}
.label {text-transform:uppercase;}
div {margin:0; padding:0; display:block;}

body#home #homeNav, body#about #aboutNav, body#visit #visitNav, body#contact #contactNav, body#events #eventsNav, body#ministries #ministriesNav, body#missions #missionsNav, body#nursery #ministriesNav, body#childrenChurch #ministriesNav, body#youth5 #ministriesNav, body#youthHS #ministriesNav,  body#widows #ministriesNav, body#men #ministriesNav, body#smallGroups #ministriesNav {color:#ffffff;}
#header, #home-head-banner, #head-banner, #page-content, #footer {margin:0 auto; padding:0; width:90%; min-width:375px; max-width:1200px;}
#header {text-align:right;}
#header .logo {padding-top:2px; width:auto; height:auto; text-align:right;}
#header .logo a {width:35%; height:auto; min-width:375px; text-align:right;}
#header .logo img {width:100%; height:auto;}
#header .contact {width:auto; height:auto;}
#header .contact a {vertical-align:top;}
#header .contact > span {padding:0 10px; border-right:1px solid #5A3D1C; vertical-align:middle;}
#header .contact > span.last {border:none;}
#head-banner {margin-top:15px; height:30%; max-height:150px; display:block; position:relative;}
#head-banner .banner-bar {width:100%; height:auto; min-height:40px; text-align:right; position:absolute; bottom:10px; background:url(/images-ecc/bgNav.png) no-repeat #6F0B34; -webkit-background-size:100% 40px; -moz-background-size:100% 40px; -o-background-size:100% 40px; background-size:100% 40px; /* must keep background setting in this order */}
#head-banner .banner-images {width:100%; height:100%; position:absolute; left:7px;}
#head-banner .banner-images img {height:100%; max-height:150px; width:auto; max-width:150px; display:inline; width:auto; vertical-align:middle; border:3px solid #ffffff;}
#head-banner .banner-images p {text-align:right; position:absolute; right:20px; bottom:0; font-size:1.25em; color:#ffffff; display:none;}
#head-banner .banner-images img.top-object {margin-left:-15px;}
#main-nav {width:100%; height:auto; text-align:center; position:absolute; right:0; z-index:10;}
#main-nav-content {display:block; height:100%; z-index:2; text-align:right; position:relative;}
ul {margin:10px; padding:0; display:block; width:auto; min-width:75px; height:100%; list-style:none; position:relative; z-index:20;}
#menusymbol {width:36px; height:36px; display:none; position:absolute; right:0; top:0;}
ul li {margin:0; padding:2px 10px; width:auto; height:auto; display:inline-block; font-size:.9em;}
ul li:hover ul, ul li:active ul {display:block;}
ul li a:hover {background-color:#FFDC87;}
ul ul {margin:0; padding:0 7px 7px 7px; width:150px; height:auto; text-align:left; background:#FBF6EB; display:none; position:absolute; top:100%; outline:2px solid #6F0B34;}
ul ul li {padding:5px; width:98%;}
ul ul li a:link, ul ul li a:visited {color:#6F0B34;}
ul > p {display:block; margin:5px 0 0 0; padding:0; width:100%; height:auto; font-size:.9em; font-size:.9rem; font-weight:bold;}

/* home page */
#home-head-banner {margin-top:25px; padding-bottom:25px; position:relative; background:url(/images-ecc/slideshowBG.png) no-repeat center bottom; -webkit-background-size:100% 25px; -moz-background-size:100% 25px; -o-background-size:100% 25px; background-size:100% 25px; /* must keep background setting in this order */}
#banner-bar {height:40px; width:100%; border:1px solid #660A30; background:url(/images-ecc/bgNav.png) no-repeat #6F0B34; -webkit-background-size:100% 40px; -moz-background-size:100% 40px; -o-background-size:100% 40px; background-size:100% 40px; /* must keep background setting in this order */}
#banner-images {height:90%; width:30%; max-height:300px; position:absolute; top:25px; z-index:1;}
#banner-images img {max-width:100%; max-height:100%; display:inline; position:absolute; top:0; left:50px; vertical-align:middle; border:4px solid #ffffff;}
.tagline {width:auto; text-align:right; position:absolute; bottom:-40px; right:20px; font-size:3em; font-style:italic; color:#ffffff; text-shadow:4px 4px 5px #000000; z-index:1;}
.slideshow {display:block; width:100%; height:315px; text-align:center; border:1px solid #660A30; position:relative; overflow:hidden;}
.slide-thumbnails {margin:0; padding:0; width:100%; height:0; text-align:center; z-index:1; position:absolute; bottom:0;}
.slideTN a.tn {margin:0 5px; padding:0; width:10px; height:10px; position:relative; bottom:15px; left:40%; float:left; outline:1px solid black; background:white; display:inline-block; z-index:1;}
.slideTN a.slide {display:none; width:100%; height:auto; position:absolute; bottom:0; left:0; z-index:0;}
.slideTN:hover a.slide {display:block;}

#page-content {margin-top:10px; padding:10px 0; background:#FBF6EB;}
#page-content a:link, #page-content a:visited, #page-content a img {color:#6F0B34; text-decoration:none; border:none; outline:none;}
#page-content a:hover {color:#6F0B34;}
#page-content .content-left, #page-content .content-right {margin:0 0 0 2%; display:inline-block; vertical-align:top;}
#page-content .content-left {width:60%;}
#page-content .content-right {width:35%;}
#page-content .article {padding-bottom:10px; width:98%;}
#page-content .article .heading {width:100%; border-bottom:2px solid #D5CEB8; text-transform:uppercase; font-size:1.2em; font-size:1.2rem;}
#page-content .article.gallery {width:90%; height:auto; text-align:center;}
#page-content .article.gallery > img {display:block; margin:5px 0; width:100%; max-width:300px; height:auto;}
#page-content .article p > img {display:inline-block; margin-right:10px; height:100px; width:auto; float:left; border:3px solid #ffffff;}
#page-content .article p {width:100%; font-size:.9em; font-size:.9rem;}
#page-content .article p.lev1 {padding-left:20px; width:90%; font-size:.8em;}
#page-content .article p.verse {width:98%; padding:2px 5px; font-style:italic; background-color:#FFDC87;}
.button {padding:0 0 10px 0; display:block;}
.button a {display:inline-block; margin-right:10px; padding:5px; width:75px; height:auto; float:left; text-align:center; vertical-align:top; color:#FFDC87; background-color:#6F0B34;}
#page-content .button a:link, #page-content .button a:visited {color:#FFDC87;}
.button p {display:inline; font-size:.9em; font-size:.9rem; vertical-align:top;}
ul.missions {margin:0; padding:0; display:block; width:100%; height:auto; font-size:1em; font-size:1rem; font-weight:bold; list-style:none; z-index:0;}
ul.missions li {margin:0; padding:0 2px; display:inline; font-size:.7em; font-weight:normal;}
ul.missions li:hover, ul.missions li:active, ul.missions li.highlight {background:#FFDC87;}
ul.missions li > div {display:none; padding:2px 5px; width:80%; font-size:1.2em; position:absolute; background-color:#ffffff; border:1px solid #333333;}
ul.missions li:hover div {display:block;}

#footer {padding:15px 0; height:auto; text-align:center; background:url(/images-ecc/bgFooter.gif) repeat-x #D7D8C8;}
#footer a {color:#6F0B34;}
#footer .footer-menu {display:inline-block; margin:0 10px; width:auto; min-width:100px; text-align:left; font-size:.8em; font-size:.8rem; vertical-align:top;}
#footer .footer-menu > a {display:block;}
#footer .copyright {margin:10px 0; width:100%; font-size:.7em; font-size:.7rem;}

/* ministries page*/
#ministries .content-right {display:none;}
#ministries .content-left {width:98%; text-align:center;}
#ministries .article .heading {text-align:left;}
.ministries {margin:10px; width:200px; height:200px; display:inline-block; vertical-align:top; position:relative;}
.ministries a {display:block; width:100%; height:100%; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; /* must keep background setting in this order */}
.ministries img {max-width:100%; max-height:100%;}
.ministries span {display:block; width:95%; height:auto; position:absolute; left:0; bottom:10px; text-align:right; color:white; text-shadow:2px 2px 5px #000000;}

@media screen and (max-width:800px) {
ul.menu {height:36px; position:fixed; top:50px; right:7px; z-index:100; padding-top:36px;}
#menusymbol {display:block;}
ul li {display:none; padding:5px; width:100px; background-color:#6F0B34;}
ul > li > a {text-align:left; width:100%;}
ul ul {width:150px; right:100%; top:100%;}
ul ul li {display:inline-block; width:98%; background:#FBF6EB;}
ul.menu:hover > li, ul.menu:active > li {display:block;}
#head-banner .banner-images p {display:block;}
#home-head-banner #banner-bar {position:absolute; top:0; background:transparent; border:none;}
}
@media screen and (max-width:600px) {
#head-banner .banner-images img {max-height:100px}
#home-head-banner #banner-images img {display:none; max-height:150px; left:10px; bottom:0px;}
.tagline {font-size:2em; bottom:-25px;}
.slideTN a.tn {bottom:60px;}
#page-content .content-left, #page-content .content-right {width:98%;}
ul.missions li {background-color:transparent;}
#footer .footer-menu {width:100%; text-align:center; margin-top:10px;}
}