/*  
Theme Name: Hillside Church of Marin
Description: Custom Theme
Author: Andy
*/


/* ----------  RESET  ------------ */
html, body, div, span,applet, object, iframe,h1, h2, h3, h4, h5, h6, blockquote, pre,a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,s, samp, small, strike, strong, sub, sup, tt, var,dd, dl, dt, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, ul, ol, li {margin: 0px;padding: 0px;border: 0px;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;}

a img, :link img, :visited img { border: 0px; }
table { border-collapse: collapse; border-spacing: 0px; }
ol, ul { list-style: none; }
a { font: bold 11px Arial; color:#6a6a6a; }
a:hover {color:#454545;}



/* ----------  BASIC SETUP  ------------ */
body {background: #ffffff url(images/bg_main.jpg) repeat-x;font-family: Arial, Helvetica, sans-serif;color: #000000;font-size: 12px;}
h1 {font-size: 16px;font-weight: normal;margin-bottom: 4px;color: #6da3c4;}
h2 {font-size: 24px;margin-bottom: 4px;font-weight: normal;color: #6da3c4;}
h3 {font-size: 16px;margin-bottom: 4px;font-weight: normal;color: #4e4e4e;}
h4 {font-size: 16px;margin-top: 5px;font-weight: bold;color: #6da3c4;}
h5 {font-size: 16px;margin-top: 25px;margin-bottom: -6px;font-weight: normal;color: #4e4e4e;}
h6 {font-size: 22px;margin-top:7px;font-weight: bold;color: #6da3c4;}

strong {font-weight: bold;}
em {font-style: italic;}
.messageTitle {font-size: 12px;margin-bottom: 0px;font-weight: bold;color: #6da3c4;}
.topMeta {font-size: 16px;margin-bottom: 7px;font-weight: bold;}
.clr {clear: both;}
.alignright {float: right;}
.browntext {color: #6A5D51;}
.foottext {font-family: Arial, Helvetica, sans-serif;color: #999999;font-size: 10px;float:right;}
.mytitle {font-size: 20px;margin-top:7px;font-weight: bold;color: #6da3c4;}

/* ----------  DESIGN  ------------ */
#wrapper {width: 930px;margin: 0 auto;position: relative;}
#header {height: 136px;width: 100%;position: relative;}
#logo {background: url(images/logo_hillside.jpg) no-repeat;width: 297px;height: 95px;text-indent: -99999px;float: left;display: block;margin-top:10px;}
#topnav {width: 514px;height: 37px;margin-top: 90px;position: absolute;top: 0;right: 0;padding-top: 0px;padding-left: 0px;}
#footer {clear: both;height: 40px;margin:0px auto; width:839px;}
#contactus {float: left;display: block;text-indent: -99999px;width: 93px;height: 25px;padding-top: 10px;background: url(images/contactus.png) no-repeat 0 5px;}
#northpoint {float: right;display: block;text-indent: -99999px;width: 103px;height: 37px;padding-top: 1px;background: url(images/logo-northpoint.png) no-repeat;}
#mainpix2 img {width:200px;}

/* ----------  NAV  ------------ */
#topnav ul {padding-left:0px;}
#topnav li {float:left;}
#topnav li a {height:36px;display: block;}

a#menu-imnew {width: 169px;font: bold 13px Arial; color:#000000;text-decoration:none;background: url('images/hillside_nav.png') no-repeat top left;overflow:hidden;}
a#menu-imnew:hover, a#menu-imnew.current {font:bold 13px Arial; color:#ffffff;background: url('images/hillside_nav.png') no-repeat bottom left;}

a#menu-getinvolved {width:169px;font:bold 13px Arial; color:#000000;text-decoration:none;background: url(images/hillside_nav.png) no-repeat top center;overflow:hidden;}
a#menu-getinvolved:hover, a#menu-getinvolved.current {font: bold 13px Arial; color:#ffffff;background: url('images/hillside_nav.png') no-repeat bottom center;}

a#menu-media {width:173px; font:bold 13px Arial; color:#000000;text-decoration:none;background: url(images/hillside_nav.png) no-repeat top right;overflow:hidden;}
a#menu-media:hover, a#menu-media.current {font: bold 13px Arial; color:#ffffff;text-decoration:none;background: url('images/hillside_nav.png') no-repeat bottom right;}





/* ----------  SUB-MENUS  ------------ */
.submenu li a {font: bold 11px Arial; color:#000000;text-decoration:none;z-index:999999;}
.submenu li a:hover {color:#ffffff;}
.submenu ul {width: 145px;float: left;line-height:18px;}
.submenu {position: absolute;top: 127px;height: 241px;padding:8px 12px 7px 15px;overflow: none;display: none;z-index: 150;}
#submenu-imnew {left: 418px;width: 185px;background: url(images/bg-dropdownmenu2.png) no-repeat;}
#submenu-getinvolved {left: 587px;width: 185px;background: url(images/bg-dropdownmenu2.png) no-repeat;}
#submenu-media {left: 757px;width: 185px;background: url(images/bg-dropdownmenu2.png) no-repeat;}



/* ----------  MAIN CONTENT  ------------ */
#headercontent {background: url(images/inside-header.png);margin:0px auto;width:838px;height:29px;}
#topcontent {width:838px; min-height:315px;background: url(images/bg-topcontent.png) no-repeat;margin:0px auto;}
#maincontent {width:838px; margin:0px auto;height:124px; background: url(images/main_btm.png) no-repeat;}
#middlecontent {width:822px;margin:0px auto; background:#3d3d3d;border-bottom: solid 8px #d4d4d4; border-right: solid 8px #d4d4d4; border-left: solid 8px #d4d4d4; min-height:100px;border-top: solid 6px #d4d4d4;}
div#mygallery {margin:0px auto;position: relative;min-width:20px;left-margin: auto;rigth-margin: auto;}
#middlecontent img {text-align:center;}

#insidecontent {width:838px; min-height:200px;margin:0px auto;background: url(images/bg-body.jpg) repeat-y;}
#footercontent {background: url(images/inside-footer.png);margin:0px auto;width:838px;height:42px;}
#homefix {padding:5px;}
#mainpix {width:820;margin:0px auto;position: relative;padding-top:21px;padding-left:8px;min-height:291px;}
#mainpix p {padding:0px;margin:0px;}
#content {background: url(images/bg-lightcontent.png) repeat;margin-top: 8px;margin-bottom: 8px;padding: 8px 16px;}
#content p {padding: 15px 13px 15px 20px;}
.content1 {clear: both;background: url(images/bg-lightcontent.png) repeat;margin-top: 0;padding: 8px 16px;min-height: 185px;}
#slidecontent {width:340px; margin:0px auto; min-height:150px;padding-top:9px;color: #4e4e4e;font-size: 12px;}



/* ----------  PAGE STYLES ------------ */
.staticcolumn {color: #4e4e4e;float: left;font-size: 12px;text-align: left;width: 770px;padding:30px;}
.staticcolumn strong, .staticcolumnlast strong, .staticcolumn_half1 strong, .staticcolumn_half2 strong, .staticcolumn_medium strong, .staticcolumn_medium_right strong {font-weight:bold;}	
.staticcolumn img {margin-bottom: -13px;padding: 24px 0 0 0;}

#staticcolumn_half1 {color: #4e4e4e;float: left;font-size: 12px;margin-bottom: 36px;padding-left:30px; width: 280px;}
#staticcolumn_half2 {color: #4e4e4e;float: right;left;font-size: 12px;margin-bottom: 36px;padding-right:30px; width: 400px;}
#staticcolumn p, #staticcolumn_half1 p, #staticcolumn_half2 p {padding: 5px 0 10px 0;}
#inviteimage img {width:320px;height:120px;padding-bottom:20px;}

#in_half1 {float:left;width:370px;}
#in_half2 {float:right;width:370px;padding-left:20px;} 
#in_half1_th {float:left;width:250px;}
#in_half2_th {float:left;width:230px;padding-left:20px;}
#in_half3_th {float:left;width:230px;padding-left:20px;}

#in_half1_f {float:left;width:180px;}
#in_half2_f {float:left;width:175px;padding-left:20px;}
#in_half3_f {float:left;width:175px;padding-left:20px;}
#in_half4_f {float:left;width:175px;padding-left:20px;}

.content:first-child {margin-top: 0;}
#imageset-full {height: 302px;width: 829px;padding: 0px 5px;}
.more-link {float: right;}
.col-half {width: 48%;padding-right: 4px;float: left;}
#maincontent  ul li {list-style: disc outside;margin-left: 35px;padding-left: 1px;margin-bottom: 4px;}
#maincontent  ul {padding-bottom: 8px;}

.required {font-weight: bold;color: red;}


/* ----------  FRONT PAGE  ------------ */
#imageset_container {float:left;width:684px;margin:0px auto;}
#imageset1 {float: left; width: 185px; height: 293px; margin-left:7px;}
#imageset2 {margin:0px auto;height:293px;padding-top:17px;padding-left:5px;}
#imageset3 {float: left; width: 192px; height: 293px; }

#tricontent1 {float:left; height: 89px;width: 200px;margin-top: 3px;background: url('images/divider.jpg') no-repeat right;color: #4e4e4e;font-size: 12px;padding-right:15px;padding-left:10px;}
#tricontent2 {float: left;height: 89px;width: 355px;margin-top: 3px;background: url('images/divider.jpg') no-repeat right;padding-left:5px;padding-right:15px;}
#tricontent3 {float: left;height: 89px;width: 200px;margin-top: 3px;color: #4e4e4e;font-size: 12px;padding-left:15px;padding-right:10px;}
#tricontent1 p, #tricontent2 p, #tricontent3 p {margin-bottom: 7px;}

#trileft {float:right;text-align:right;}
#tricenter {text-align:center;display:block;}

#getdirectionsbutton {display: block;height: 25px;width: 112px;background: url(images/direc-btn.png) no-repeat 0 0;text-indent: -99999px;}
#getdirectionsbutton:hover {background-position: 0 -25px;}
.thumbdiv {float: left;width: 275px;padding-right: 10px;}
.descriptdiv {width: 500px;float: right;}
.videoplayer {display: none;}


/* ----------  IMAGE GALLERY  ------------ */
#imagegallery {margin-left: 28px;padding: 7px 0;}
#imagegallery img {width: 94px;height: 94px;padding: 11px;background: url(images/bg-image.png) no-repeat;margin: 0 16px;float: left;}

#mainimagenavbtn {height:7px; width:7px; float:right; margin: 0 0 0 0px;padding: 1px 4px 4px 4px;text-decoration:none;color: #999999;font-size: 6px;}

#mainimagenavwrap {width: 820px;position:absolute;border:solid 0px black;margin-top:283px;z-index:9999999;}
#mainimagenav {margin: 8px 10px 8px 0;padding: 0;float:right;}
#mainimagenav a { margin: 0 0 0 4px;padding: 1px 4px 4px 4px;background: url(images/button.png) no-repeat;text-decoration:none;color: #999999;font-size: 6px;}
#mainimagenav a:hover { background: url(images/button.png) no-repeat;text-decoration:none;color: #999999;font-size: 6px;}
#mainimagenav a.activeSlide {background: url(images/button_selected.png) no-repeat;text-decoration:none;color: #2D2D2D;font-size: 6px;}
#mainimagenav a:focus{outline:none}



/* ----------  ONLINE MESSAGES  ------------ */
.topPost {margin-top: 12px;padding-bottom: 30px;}
.topPost .playnowlink {float: right;}

.message_lg {width:200px;position:relative;float:left;font: bold 10px Arial;padding-top:10px;}
.message_sm {width:100px;position:relative;float:left;font: bold 10px Arial;padding-top:10px;}
.message_name {width:280px;position:relative;float:left;font: bold 10px Arial;padding-top:10px;}
.message_date {width:70px;position:relative;float:left;font: bold 10px Arial;padding-top:10px;}
.message_speaker {width:140px;position:relative;float:left;font: bold 10px Arial;padding-top:10px;}
.message_listen {width:100px;position:relative;float:left;font: bold 10px Arial;}
.message_listenhdr {width:100px;position:relative;float:left;font: bold 10px Arial;padding-top:10px;}


/* WATCH MESSAGES PAGE */
.messagedrop {border-bottom: 1px solid #858585;}
.message {border:0px solid #cccccc; background: url(images/messagestopborder.jpg) no-repeat;margin: 0px auto 25px auto;width: 800px;padding-top:10px;}
.message_ind {border:0px solid #cccccc; background: url(images/messagestopborder.jpg) no-repeat;margin: 0px auto 25px 20px;width: 800px;padding-top:10px;}	
.message img {float: left;margin-left: 10px;}
.message_pix img {max-width:230px;}
.message_pix {border:0px solid black;width:230px;height:200px;float:left;position:relative;}
.message_text ul {padding:0px; margin:0px;}
	
ul.weeklies {color: #4e4e4e;float: left;padding-left: 38px;padding-top: 2px;text-align: left;width: 400px;}
li.title {font-size: 18px;}
li.byline {margin-bottom: 4px;font-size: 11px;}
ul.watch {float: left;width: 60px;}
ul.watch li {color: #858585;font-size: 11px;margin-bottom: 35px;}
ul.watch li a {color: #4e4e4e;font-weight: normal;text-decoration: none;}
ul.watch li a:hover {background-color: #cccccc;color: #858585;}
ul.buy {float: left;width: 60px;}
ul.buy li {color: #858585;font-size: 11px;margin-bottom: 35px;}
ul.buy li a {color: #4e4e4e;font-weight: normal;text-decoration: none;}
ul.buy li a:hover {background-color: #ffffff;color: #858585;}
ul.discuss{float: left;width: 60px;}
ul.discuss li {color: #858585;font-size: 11px;margin-bottom: 35px;}	
ul.discuss li a {color: #4e4e4e;font-weight: normal;text-decoration: none;}
ul.discuss li a:hover {background-color: #ffffff;color: #858585;}


/* ----------  CLEAR FIX  ------------ */
.clearfix:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix {display:block;}
* html .clearfix {height:1%;}
.clear {clear:both;}