/* general styling   */
* {padding: 0px; margin-left: 0px;margin-bottom: 0px;margin-top: 0px;}
 body{margin: 0px;padding: 0px;font-family: Verdana, Arial, sans-serif;font-size: 75%; background:#000000;}

p{font-family: verdana, arial, sans-serif;font-size: .90em;}
div#wrapper{min-width: 900px;max-width: 1024px;margin-left: auto;margin-right: auto;text-align: left;}
#top{text-transform: uppercase;width: 100%;background: #999966;padding: 0px 0px 0px 0px;height: 25px;text-align: center;}
#search{position: fixed;text-align: right;vertical-align: top;float: right;text-transform: none;font-size: 0.8em;padding: 0px 5px 5px 0px;left: 0px;}
#header{width: 100%;background: #000000;padding: 0px 0px 0px 0px; color:#999;text-indent: 30px;height: 142px;}
#header h1{float: left;width: auto;vertical-align: bottom;font-family: "Century Gothic" , Verdana, Arial, sans-serif;font-weight: normal;padding: 0px;margin-top: 40px;margin-left: 0px;margin-right: 0px;margin-bottom: 0px;color: #fff;letter-spacing: -.025em;}
#header h1 span{padding: 0px;margin-left: 80px;color: #fff;font-family: "Viner Hand ITC" , Sans-Serif;font-weight: normal;font-size: .8em;letter-spacing: -.025em;vertical-align: top;text-indent: 0px;padding-bottom: 10px;}
div#HopeLogo{float: left;background-color: #000000;width: 138px;height: 136px;}
#vision{top: 0px;text-transform: uppercase;width: auto;height: 18px;background-color: #333333;margin-top: 0px;font-weight: normal;padding-top: 0px;text-align: left;color: #fff;font-family: Arial, sans-serif;font-size: .7em;font-weight: normal;border-top: solid 5px #FFF;}
div#siteNav{min-width: 800px;max-width: 1024px; background: #000000;margin-left: auto;margin-right: auto;margin-bottom: 0px;padding-bottom: 0px;border-top: solid 2px #999966;border-bottom: solid 2px #999966; border-left: solid 2px #999966; border-right: solid 3px #999966;font-size: .9em;left: 0px; }

div#siteNav ul{margin-left: auto;margin-right: auto;padding: 0px;top: 0px;}
div#siteNav ul li {padding: 0px;}
div#siteNav li {float: left;color: #fff;list-style-type: none;background-color: #000000;position: relative;padding: 0px;z-index: 6;}
div#siteNav a {display: block;color: #fff;font-size: 1.2em;text-decoration: none;padding: 1px;margin: 1px;width: 110px;text-align: center;}
div#siteNav a:hover span {text-decoration: none;color: #CC9;background-color: #999966;}
div#siteNav a:hover {display: block;color: #fff;background-color: #999966;}
div#siteNav li:hover {background: #999966;font-weight: bold;}
div#sitNav a:active {background-color: red;color: White;}
div#siteNav a:hover{font-weight: bold;}
/* the drop-down starts here */
/*div#siteNav ul li a:activelink{background-color:red;text-align:left;} */
div#siteNav ul li ul {margin: 0px;width: 100%;position: absolute;left: -1px;top: 20px;}
div#siteNav ul li ul li {width: 180px;border-bottom: solid 1px red;}
/* make the drop-down display as the menu is rolled over */
div#siteNav ul li ul {display: none;}
/* conceals the drop-down when menu not hovered */
div#siteNav ul li:hover ul {display: block;background: #999966;-moz-opacity: 0;opacity: .9;filter: alpha(opacity=90);width: 100%;}
/* shows the drop-down when menu is hovered */
/* dropdown list starts here */
div#siteNav ul li ul li ul {margin: 0px;width: 100%;position: absolute;left: 180px;}
div#sitNav ul li ul li ul li {width: 180px;border-bottom: solid 1px red;}
/*div#siteNav ul li ul li ul {display:none;} conceals the drop-down when menu not hovered */
div#sitNav ul li ul li:hover ul {display: block;background: #999966;-moz-opacity: 0;opacity: .9;filter: alpha(opacity=90);width: 100%;}
/* shows the drop-down when menu is hovered */
/* the drop-down ends here */
div#container2 {position: relative;width: 100%;z-index: 1;top: 0px;left: -1px;height: auto;}
div#bookmarks {position: absolute;top: 0px;left: 0px; width: 131px;font-size: .9em;background: #999966;font-weight: normal;height: 100%;}
div#bookmarks a {display: block;font-weight: normal;text-decoration: none;padding: 0px;}
/* End Left Bar Navigation styling */
div#mainContent {width: auto;margin: 0px 30px 0px 153px;background: #fff;padding: 10px;font-size: 1em;font-weight: normal;min-height: 332px;}
#mainContent strong {color: #fff;}
#mainContent strong:first-child {color: #991116;}
/*div#imageBar {position: absolute; top:2px; right:-152px; width: 152px; background: #fff; height: 332px;} */
#login {margin-right: 6px;}
div#footer {width: 100%;text-align: center;background: #111111;height: 70px;border-bottom: solid 5px #fff;}
div#footer a:hover {color: #c30;}
div#footer p span {color: White;font-weight: normal;}
.clearfix:after { content: "."; /* the period is placed on the page as the last thing before the div closes */ display: block; /* inline elements don't respond to the clear property */ height: 0; /* ensure the period is not visible */ clear: both; /* make the container clear the period */ visibility: hidden; }
/* further ensures the period is not visible */
.clearfix {display: inline-block;}
/* a fix for IE Mac */ 
/* next a fix for the dreaded Guillotine bug in IE6 */
* html .clearfix {height: 1%; }
/* Hides from IE-mac \*/
.clearfix {display: block; background-color: #111111; }
/* End hide from IE-mac */
/* link styling */
a {color: red;}
#bottom span {text-align: left;}
#bottom {width: 100%; background: #999966;padding: 0px 0v 0v 0px;height: 25px;text-align: right;}
div#messageLink {color:#000; background-image:url(../images/HopeLive.gif); background-repeat:no-repeat; background-color: #999966; width:131px; height: 44px;}
div#messageLink a{display:block; text-decoration:none; height: 100%; color:white; font-family:Arial; font-size: .8em; padding-top: 15px; padding-left: 55px;  font-weight: bold;}
div#messageLink a:hover{display:block; background-image:url(../images/HopeLiveOver.gif); background-repeat:no-repeat; background-color: #999966; color:red; font-family:Arial; font-size: .8em; padding-top: 15px; padding-left: 55px; font-weight: bold;}
div#messageLink a:active {color:red;}

div#devotionLink {background-image:url(../images/HopeJournal.gif); background-repeat:no-repeat; background-color: #999966; width:131px; height: 44px;}
div#devotionLink a{display:block; text-decoration:none;height: 100%;color:white; font-family:Arial; font-size: .8em; padding-top: 15px; padding-left: 55px; font-weight: bold;}
div#devotionLink a:hover{display:block; background-image:url(../images/HopeJournalOver.gif);  background-repeat:no-repeat; background-color: #999966;color:red; font-family:Arial; font-size: .8em; padding-top: 15px; padding-left: 55px; font-weight: bold; }
div#devotionLink a:active {color:red;}
div#directionLink {background-image:url(../images/HopeMap.gif); background-repeat:no-repeat; background-color: #999966; width:131px; height: 44px;}

div#directionLink a{display:block; text-decoration:none; height: 100%;color:white; font-family:Arial; font-size: .8em; padding-top: 15px; padding-left: 55px; font-weight: bold;}
div#directionLink a:hover{display:block; background-image:url(../images/HopeMapOver.gif); background-repeat:no-repeat; background-color: #999966;color:red; font-family:Arial; font-size: .8em; padding-top: 15px; padding-left: 55px; font-weight: bold;}
div#directionLink a:active {color:red;}

div#calendarLink {background-image:url(../images/HopeEvent.gif); background-repeat:no-repeat; background-color: #999966; width:131px; height: 44px;}
div#calendarLink a{display:block; text-decoration:none;height: 100%;color:white; font-family:Arial; font-size: .8em; padding-top: 15px; padding-left: 55px; font-weight: bold;}
div#calendarLink a:hover{display:block; background-image:url(../images/HopeEventOver.gif); background-repeat:no-repeat;background-color: #999966;color:red; font-family:Arial; font-size: .8em; padding-top: 15px; padding-left: 55px; font-weight: bold;}
div#calendarLink a:active {color:red;}

div#faceLink {background-image:url(../images/facebook.gif); background-repeat:no-repeat; background-color: #999966; width:131px; height: 44px;}
div#faceLink a{display:block; text-decoration:none;height: 100%;color:white; font-family:Arial; font-size: .8em; padding-top: 15px; padding-left: 55px; font-weight: bold;}
div#faceLink a:hover{display:block; background-image:url(../images/facebookOver.gif); background-repeat:no-repeat;background-color: #999966;color:red; font-family:Arial; font-size: .8em; padding-top: 15px; padding-left: 55px; font-weight: bold;}
div#faceLink a:active {color:red;}

div#twitLink {background-image:url(../images/twitter.gif); background-repeat:no-repeat; background-color: #999966; width:131px; height: 44px;}
div#twitLink a{display:block; text-decoration:none;height: 100%;color:white; font-family:Arial; font-size: .8em; padding-top: 15px; padding-left: 55px; font-weight: bold;}
div#twitLink a:hover{display:block; background-image:url(../images/twitterOver.gif); background-repeat:no-repeat;background-color: #999966;color:red; font-family:Arial; font-size: .8em; padding-top: 15px; padding-left: 55px;font-weight: bold;}
div#twitLink a:active {color:red;}