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

body{ background:url(i/bg_bluesanctuary.jpg) #017C9B top center no-repeat; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 62.5%;}
#container{ width: 840px; margin: 0 auto; padding: 0; }
#header{margin: 0; padding: 0; height: 90px; }
#header #logo h1{ display: none; }
#header #logo{ float: left; width: 206px; height: 90px; margin: 12px 0 0 18px; background:url(i/newhopehilo_logo.jpg) top left no-repeat; }
#header #header-msg{ float: left; height: 21px; width: 440px; margin: 42px 0 0 26px; background: url(i/txt-header-heb13-8.gif) top left no-repeat; }
#header #header-msg span{ display: none; }

#navcontainer{ text-align: center; width: 828px; clear: both; margin: 0 auto; padding: 0; background: #fff url(i/bg_nav.jpg) top left repeat-x; height: 25px; font-family:Arial, Helvetica, sans-serif; font-size: 1.3em; opacity:0.7;filter:alpha(opacity=80); border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
#navcontainer:hover{  opacity:0.99;filter:alpha(opacity=100); }
#navcontainer ul{ margin: 0; padding: 5px 0 0 25px; }
#navlist li{ display: inline; list-style-type: none; padding-right: 70px; }
#navlist li a{ text-transform: uppercase; text-decoration: none; color: #000; }
#navlist li a:hover{ color: #333; text-decoration:underline; }
#content-container{  }
#content-main{ background: #fff !important;  }
#content-main img{ border: 1px solid #ccc; }
#content-main a{ color: #388294; }
#content-main .float_left{ float: left; margin: 0 8px 0 0; border: 1px solid #ccc; }

#splash-row{ text-align: left; height: 280px; background: #fff;  }

#gallery-home{ float: left; }
#billboard-home{ width: 300px; height: 273px; margin: 0 0 0 15px; border: 1px solid #ccc; float: left; background: #666; }

#content-main{ text-align: left; padding-bottom: 15px; font-family: Arial, Helvetica, sans-serif; }
#content-main{ line-height: 1.4em; }

#footer{  height: 30px; clear: both; }

.col-left{ width: 500px; float: left; padding: 0; margin: 0 10px 0 0; background: #fff !important; }
.col-right{ width: 251px; float: left; margin-left: 20px; margin-top: 15px;  padding: 0; background: #E7F3F6; }
.col-right h1, .col-right h2, .col-right h3, .col-right p{padding: 0 12px; }
.col-right ul.nav{list-style: none;  padding: 0; margin: 0; border-top: 1px solid #999;  }
.col-right ul.nav li{  border-bottom: 2px #fff solid; font-size: 1.1em; }
.col-right ul.nav a{ padding: 6px 8px 9px 8px; background: #5BADC1 url(../img/nav-side-fade.jpg) bottom repeat-x; text-decoration: none; color: #fff !important; display: block; font-weight: bold; border-left: 2px solid #ccc; }
.col-right ul.nav a:hover{ background: #388294; color: #fff; }


#calendar{ clear: both; border: 1px solid #fff; margin-top: 20px; }
#calendar h2{ background: #4AA2B8 url(../img/nav-side-fade.jpg) bottom repeat-x; margin: 0; padding: 5px 7px; color: #fff; font-size: 1.4em; font-style: italic;  }
#calendar h3{ background: #eee; font-size: 1.1em; margin: 0 0 7px 0; padding: 4px 7px 1px 7px; }
#calendar ul{ list-style: none; margin: 0; padding: 0;}
#calendar li{ margin: 0 0 6px 0; padding: 0; }
#calendar ul ul{ margin: 0 0 0 10px;  }
#calendar em{ font-size: 0.9em; }

#footer{ color:#eee; font-size: 1.2em; text-align: center; }
#footer a{ color: #fff; text-decoration: none; }
#footer a:hover{ text-decoration: underline; }

/* typography */

h1{ font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.9em; font-weight: normal; font-style: italic; color: #B15602; }
h2{ font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.5em; font-weight: normal; font-style: normal; color: #B15602; }


#content-container{ font-size: 1.3em; }



/* CSS for the box starts here
================================================*/
/* Default styling. Used when JavaScript is unsupported */
.cbb {
	padding:0 10px;
	margin:1em 0;
	background: #fff;
	border: none;
	}

/* Insert the custom corners and borders for browsers with sufficient JavaScript support */

/* Two of the boxes are floated just for this demo. Adjust to your needs. */
.cb {
	margin:0.5em 0;
	}
.two {
	width:45%;
	float:left;
	}
.three {
	width:45%;
	float:right;
	}
/* Rules for the top corners and border */
.bt {
	background:url(i/box.png) no-repeat 100% 0;
	margin:0 0 0 18px;
	height:17px;
	}
.bt div {
	height:17px;
	width:18px;
	position:relative;
	left:-18px;
	background:url(i/box.png) no-repeat 0 0;
	}

/* Rules for the bottom corners and border */
.bb {
	background:url(i/box.png) no-repeat 100% 100%;
	margin:0 0 0 12px;
	height:14px;
	}
.bb div {
	height:14px;
	width:12px;
	position:relative;
	left:-12px;
	background:url(i/box.png) no-repeat 0 100%;
	}

/* Insert the left border */
.i1 {
	padding:0 0 0 12px;
	background:url(i/borders.png) repeat-y 0 0;
	height: 100%;
	}
/* Insert the right border */
.i2 {
	padding:0 12px 0 0;
	background:url(i/borders.png) repeat-y 100% 0;
	}
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
	background:#fff !important;
	border:1px solid #fff;
	border-width:1px 0;
	padding:0 10px;
	}
/* CSS for the box ends here */