/* @override http://westhillscommunity.cpmpreview1.com/css/styles.css */ /*===== SITE: West Hills Community FILE: styles.css CREATED: 9/26/2008 MODIFIED:10/13/2008 AUTHOR: Ben Otero (ben@churchplantmedia.com) =====*/ /* @group GLOBALS */ * { margin:0; padding:0; line-height:1; } html { height:100%; } body { font-size:62.5%; margin:0; padding:0; background:#e7e5d6; height:100%; font-family:georgia, times, serif; } a img { border: none; } #container { background:#e0e0d3; position:relative; } #mainContent { display:block; width:897px; margin:0 auto; padding-bottom:90px; position:relative; z-index:12; background:url(/images/sub_maincontent_bg.jpg) no-repeat left top; } .show { display:block; } .hidden, hr { display:none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block;} /* @end */ /* @group HEADER */ #header { position:relative; z-index:1000; height:155px; background:url(/images/body_bg.jpg) repeat-x left bottom; } #header-inner { width:897px; margin:0 auto; position:relative; } #header h1, #header h1 a { display:block; width:350px; height:75px; } #header h1 { background:url(/images/logo.png) no-repeat; text-indent:-999em; position:absolute; top:10px; left:-6px} #header h1 a:focus { outline:none; } #guide { display:block; width:131px; height:25px; background:url(/images/guide_btn.gif) no-repeat; text-indent:-999em; position:absolute; top:125px; right:-2px; } #guide.on { background:url(/images/guide_up.gif) no-repeat; top:124px; } #guide:focus { outline:none; } #skip { position:absolute; top:-999em; } #header form { position:absolute; top:0; right:0; background:url(/images/search_bg.gif) no-repeat; padding:5px 10px; width:217px; height:29px; } #header fieldset { margin:0; padding:0; border:none; } #header input { background:none; border:none; paddign:5px; height:24px; width:150px; float:left; } #header form a { display:block; width:60px; height:25px; float:left; margin-left:7px; text-indent:-999em; } #slogan { position:absolute; top:56px; right:-25px; width:350px; } /* @end */ /* @group SHELF */ #sitemap-wrap { background:#1c2325 url(/images/shelf_bg.jpg) repeat-x left bottom; padding-bottom:55px;position:relative; z-index:13; } #sitemap { display:none; padding:10px 0 40px 20px; width:900px; margin:0 auto; position:relative; } #sitemap ul { width:150px; margin:30px 0 0; padding:0; list-style:none; float:left; } #sitemap li { float:left; display:inline; } #sitemap li a { font:1.2em "Lucida Grande", verdana, sans-serif; color:#e0e0d3; text-decoration:none; line-height:2em; display:block; width:150px; } #sitemap li b a { font-weight:bold; color:#fff;} #sitemap li a:hover { text-decoration:underline; } #sitemap #close { display:block; width:70px; height:22px; background:url(/images/close_btn.gif) no-repeat; text-indent:-999em; position:absolute; right:30px; bottom:5px; } #sitemap #close:focus { outline:none; } /* @end */ /* @group NAVIGATION */ #nav, #nav * { list-style:none;margin:0;padding:0;} #nav { position:absolute; top:113px; left:0px; height:42px; width:800px;} #nav li { cursor:pointer; float:left; padding-left:3px; margin:0;} #nav li a { display:block; padding:0 12px 0 9px; text-decoration:none; line-height:46px; font-size:1.3em; font-family:"Lucida Grande", verdana, arial, sans-serif; color:#afae98; } #nav li a:hover { color:#fffefc; } #articles #nav li#nav_resources, #nav li.current { padding-left:3px; background:url(/images/nav_li_bg.gif) no-repeat left top; } #articles #nav li#nav_resources a, #nav li.current a { background:url(/images/nav_li_a.gif) no-repeat right top; color:#fffefc; } #nav li ul { display:none; } #sermons #nav_home a, #sermons #nav_home, #articles #nav_home a, #articles #nav_home { background:none; color:#afae98; } /* @end */ /* @group PRIMARY CONTENT */ #primaryContent { float:left; width:654px; position:relative; } #primaryContent.wide { float:none; width:100%; } #banner { display:block; width:634px; height:226px; background:url(/mediafiles/subpage-header.jpg) no-repeat; position:relative; top:10px; left:10px; margin:0 0 10px; padding:0; } #text { padding-left:13px; margin-top:0;} #primaryContent a { text-decoration:underline; color:#3d4b4e; } #primaryContent a:hover { text-decoration: none; } #primaryContent p, #primaryContent li, #primaryContent td { font-size:1.3em; line-height:20px; margin-bottom:1em; color:#4b4b41;} #primaryContent p *, #primaryContent li *, #primaryContent td * { font-size:1em; line-height:1; margin:0; } #primaryContent p#subscribe { position:absolute; top:250px; right:20px; } #primaryContent #subscribe a { background:url(/images/feed_icon.gif) no-repeat left center; padding:4px 0 4px 20px; } #primaryContent ul, #primaryContent ol { margin:1em; padding-left:2em; } img.left-align { float:left; margin:10px 10px 10px 0; } img.right-align { float:right; margin:10px 0 10px 10px; } img.no-border, img.mcms_stats { border:0; } /* @group HEADINGS */ h2, h3, h4, h5, h6 { margin-bottom:1em; } h2 { background:url(/images/subpage_h2.jpg) no-repeat; line-height:45px; padding:13px 13px 0; margin-top:-1px;} .wide h2 { background-repeat: repeat-x; } #home h2 { background:url(/images/title_bg.jpg) no-repeat; } .article h4 { margin-bottom:4px } .article p { margin-top:3px; } #primaryContent h3 { font-size:1.6em; } #primaryContent h4 { font-size:1.5em; } #primaryContent h5 { font-size:1.4em; } #primaryContent h6 { font-size:1.3em; } /* @end */ /* @end */ /* @group SECONDARY CONTENT */ #secondaryContent { float:left; display:inline; width:228px; margin-left:10px; position:relative; left:19px;} .col { float:left; } /* @group SUBNAV */ #subnav { background:url(/images/subnav_bg.gif) repeat-y; width:215px; margin-bottom:30px; } #snav { padding:20px; margin:0; list-style:none; background:url(/images/box_top.gif) no-repeat left top; } .btm { background:url(/images/box_btm.gif) no-repeat left bottom; display:block; width:215px; height:6px; position:relative; top:6px;} #snav * { margin:0; padding:0; list-style:none; } #snav li, #snav li ul { display:none; margin:0; padding:0; } #snav li.current, #snav li.current * { display:block;} #snav li.current li ul { display:none; } /* top item */ #snav li.current a { font-size:16px; color:#1d2426; display:block; line-height:29px; text-decoration:none; font-weight:bold; padding:0 0 8px 9px; border-bottom:1px solid #dad9cc; margin-bottom:4px; } /* 1st level items reset */ #snav li.current ul { margin-left:9px; } #snav li.current li a { font-weight:normal; border:0; margin:0; padding:0; font-family:"Lucida Grande", arial, sans-serif; color:#43433e; font-size:13px; } #snav li li.current a { background:url(/images/current_arrow.gif) no-repeat; color:#fffffe; font-weight:bold; position:relative; left:-39px; padding-left:39px; width:174px; } #snav li li.current.active li a { background:none; font-size:11px; line-height:16px; color:#43433e; font-weight:normal; } #snav li li.active li a:hover { text-decoration:underline; } #snav li li.current ul { display:block; } #snav li li.current li a { background:none; color:#43433e; font-weight:normal; font-size:11px; line-height:20px; } #snav li li.current li a:hover { text-decoration:underline; } #snav li li.current li.current a:hover { text-decoration:none; } #snav li li.current li.current a{ background:url(/images/current_arrow.gif) no-repeat; color:#fffffe; line-height:29px; display:block; position:relative; left:-46px; padding-left:46px; margin-right:-30px; } #snav li li.current li a { display:block; } #snav li li.active a { background:url(/images/children_arrow.gif) no-repeat right center; color:#43433e; font-weight:normal; } /* 4th level fixes */ #snav li li.current li.current.active a { background:url(/images/children_arrow.gif) no-repeat right center; color:#43433e; line-height:20px; width:95% } #snav li li.current li.current.active li a, #snav li li.current li.current li a { background:none; color:#43433e; display:block; line-height:20px; width:140px; } #snav li li.current li.current li a:hover { text-decoration:underline; } #snav li li.current li.current li.current a { background:url(/images/current_arrow.gif) no-repeat; display:block; line-height:29px; color:#fffffe; position:relative; } #snav li li.current li.current li.current a:hover { text-decoration:none; } /* @end */ /* @end */ /* @group FOOTER */ #footer { position:relative; height:335px; background:#2b2a25 url(/images/footer_bg.jpg) repeat-x; z-index:8; margin-top:-50px; } #footer-inner { display:block; width:897px; height:165px; margin:0 auto 2.5em; position:relative; top:-67px; padding-top:118px; background:url(/images/maincontent_bg.jpg) no-repeat center top; } #footer-bottom { clear:both; padding-top:50px; } #footer p#copyright { font-size:1.1em; color:#6f6d5f; font-family:"Lucida Grande", verdana, sans-serif; float:left; margin:5px 0 0 19px;} #footer #copyright a { color:#6f6d5f; } #footer p#designed { float:right; width:auto; margin:1px 4px 0 0} #footer .col { width:221px; padding:0 12px; float:left; } #footer h4 { background:url(/images/footer_h4_bg.gif) no-repeat; width:199px; height:30px; color:#fdf4bd; font-size:1.6em; font-weight:normal; padding:0 15px; line-height:30px; position:relative; top:-2px; } #footer #cpm-logo { display:block; width:141px; height:22px; background:url(/images/cpm_logo.gif) no-repeat; text-indent:-999em; } #footer #cpm-logo:hover { background-position:left -21px; } #footer #cpm-logo:focus { outline:none; } /* @group LIFE JOURNAL */ #journal.col { padding-right:18px; padding-left:18px; margin-right:10px; border-right:1px solid #48463b; } #journal h4 { padding-left:13px; width:204px; margin:0 0 5px -5px; } #journal p { font-size:1.2em; font-family:"Lucida Grande", verdana, sans-serif; line-height:1.5em; color:#fff; } #journal p.reference { font:italic 1.2em georgia, times, serif; color:#cdcdbd; text-transform:uppercase; margin-top:5px; } #journal a { color:#cdcdbd; } /* @end */ /* @group FOCUS */ #focus.col { padding-left:11px; width:219px; position:relative; margin-left:-5px; } #focus h4 { margin:0px 0 7px -3px; } #focus h5 { font-size:1.3em; font-weight:normal; font-family:"Lucida Grande", verdana, sans-serif; margin:10px 0 9px; } #focus h5 a { color:#fff; text-decoration:none; } #focus h5 a:hover { text-decoration:underline; } #footer #focus.col p { font-size:1.1em; color:#e1e1d4; font-family:"Lucida Grande", verdana, sans-serif; line-height:1.5em; } #focus p a { color:#dedea5; font-size:11px; } #focus a:hover { text-decoration:none; } /* @end */ /* @group SERVICE TIMES */ #service-times.col { background:#625f4f url(/images/latest_message_bg.gif) no-repeat; position:relative; top:-5px; border:1px solid #686658; padding:15px 18px 5px; width:321px; position:relative; margin-left:32px; } #service-times h3 { font-size:1.6em; font-family:"Lucida Grande", arial, sans-serif; color:#fefefe; font-weight:normal; background:url(/images/service_times_h3.gif) repeat-x left bottom; padding-bottom:9px; margin-bottom:10px; } #service-times h3 span { font-size:12px; } #footer #service-times h4 { background:none; font-size:1.4em; padding:0; margin:0; top:-9px; } /* @end */ /* @group SUNDAYS */ #footer #sundays { width:103px; padding:1px 10px 0 0; } #footer #sundays.col h3 { background:none; font-weight:normal; font-style:italic; font-size:1.4em; font-family:Georgia, times, serif; color:#bfbf8e; margin:0 0 5px; } #sundays p { font-size:1.2em; color:#d6d6c7; line-height:1.2em; margin-top:-8px; } /* @end */ /* @group ADDRESS */ #footer #address { padding:2px 0 4px 11px; width:195px; border-left:1px solid #565446} #address p { font:1.1em "Lucida Grande", verdana, sans-serif; color:#e3e3d7; line-height:1.5em; margin-bottom:.2em; } #address a { display:block; width:146px; height:19px; text-indent:-999em; background:url(/images/map_btn.gif) no-repeat; margin-bottom:6px; } #address a:focus { outline:none; } /* @end */ /* @end */ /* @group SERMONS */ #filter select { width:200px; margin-left:10px; } #filter a { margin-left:20px; } #primaryContent h4#current { clear:both; } #primaryContent .sermonlist h4 { margin:0; padding:10px 0; clear:both; } .sermonbox { position:relative; padding:10px 0; border-top:1px solid #d4d2c1; } #primaryContent .sermonbox h5 { margin:0;} #primaryContent .sermonbox h5 span { font-size:10px; margin-left:10px; } #primaryContent .sermonbox p { margin:2px 0 0; line-height:1; } .sermonbox ul { position:absolute; top:20px; right:10px; margin:0; padding:0; list-style: none;} .sermonbox li { float:left; display:inline; margin-right:5px; } .sermonbox li a { display:block; width:16px; height:16px; text-indent:-999em; } .sermonbox li.sl_listen a { background:url(/images/play_icon_app.gif) no-repeat; } .sermonbox li.sl_download a { background:url(/images/download_icon_app.gif) no-repeat; } .sermonbox li.sl_notes a { background:url(/images/notes_icon_app.gif) no-repeat; } .sermonbox li.sl_video a { background:url(/images/video_icon_app.gif) no-repeat; } .sermonbox li a:focus { outline:none; } /* @group MEDIA BOX */ #byline { margin:10px 0 0; padding:0; list-style:none; } #primaryContent #byline li { line-height:1; margin:2px 0 0 0; padding:0; } #mediabox { padding:20px; margin:0; background:url(/images/subnav_bg.gif) repeat-y; width:175px;} #mediabox ul { margin:0; padding:0; list-style:none; } #mediabox li { padding:4px 0 4px 20px; } #mediabox li a { font-size:1.2em; color:#3d4b4e } #mediabox li a:hover { text-decoration:none; } #mediabox li#mb_links { margin:-20px -20px 0; background:url(/images/box_top.gif) no-repeat; padding:20px; font-size:1.6em; font-weight:bold; color:#1d2426; } #mediabox li#mb_jukebox { background:url(/images/play_icon_app.gif) no-repeat left 2px; } #mediabox li#mb_download { background:url(/images/download_icon_app.gif) no-repeat left 2px; } #mediabox li#mb_notes { background:url(/images/notes_icon_app.gif) no-repeat left 2px; } #mediabox li#mb_video { background:url(/images/video_icon_app.gif) no-repeat left 2px; } #mediabox li#mb_podcast { background:url(/images/feed_icon_app.gif) no-repeat left 2px; } #mediabox .btm { margin:20px -20px -20px; } /* @end */ /* @group HOW IT WORKS */ #primaryContent #how-it-works { display:block; height:20px; margin:0 0 2.5em; padding:5px; list-style:none; background:#f6f5f0; border:2px solid #d4d2c1; } #how-it-works li { padding-left:20px; margin-bottom:1.5em; font-size:1.2em; float:left; display:inline; margin-right:10px;} #how-it-works li#how { font-weight:bold; margin-right:20px; padding:0; } #how-it-works li#play { background:url(/images/play_icon.gif) no-repeat left center; } #how-it-works li#notes { background:url(/images/notes_icon.gif) no-repeat left center; } #how-it-works li#hwvideo { background:url(/images/video_icon.gif) no-repeat left center; } #how-it-works li#save { background:url(/images/download_icon.gif) no-repeat left center; } /* @end */ /* @group SORTING */ #sorting { background:url(/images/subnav_bg.gif) repeat-y; padding:20px; width:175px; } #sorting h3 { margin:-20px -20px 0; background:url(/images/box_top.gif) no-repeat; padding:20px; color:#1d2426; font-size:1.6em;} #sorting .btm { margin:20px -20px -20px; } #sorting label, #sorting select { display:block; } #sorting label { font:bold 1.3em "Lucida Grande", arial, sans-serif; margin-bottom:.5em; color:#1d2426; } #sorting select { width:100%; margin-bottom:1em; } #sorting a { color:#fff; font-size:1.2em; font-weight:bold; text-decoration:none; padding:3px; background:#3d4b4e; margin:15px 0 0; } #sorting a:hover { background:#fff; color:#3d4b4e } /* @end */ /* @end */ /* @group CALENDAR */ .calendar { margin-bottom: 25px; border: 1px solid #d4d2c1; border-right: 0; border-bottom: 0; border-collapse: collapse; width:100%; } .calendar caption { padding-bottom: 10px; font-size: 1.6em; } .calendar th { padding: 6px 0; background: #f6f5f0; color: #1d2426; font-size: 1.3em; font-weight: normal; } .calendar td { width: 68px; height: 68px; padding: 2px; border: 1px solid #f6f5f0; border-left: 0; border-top: 0; background: #d4d2c1; color: #1d2426; font-size: 12px; vertical-align: top; } .calendar td a { color: #FCFDFE; text-decoration: none; } #primaryContent .calendar ul { margin: .5em 0 0 .5em; padding:0; font-size: 100%; list-style: none; } .calendar td li { margin-bottom: .75em; font-size: 11px; line-height: 1.2; } .calendar td li a { color: #FFF; text-decoration: underline; } /* @end */ /* @group MINI */ #calendar { width:210px; } #calendar table { border:0; border-collapse:collapse; margin-bottom:12px} #calendar th { display:none; } #calendar caption { font-size:11px; color:#4b4b41; text-align:right; font-family:helvetica, arial, verdana, sans-serif; } #calendar td { width: 25px; height: 22px; padding: 2px; border: 1px solid #e1e1d4; border-right: 0; border-top: 0; background: #fff; color: #656555; font-size: 10px; font-family:"Lucida Grande", arial, sans-serif; vertical-align: top; } #calendar .empty { background:#f6f5f0; } #calendar .linked-day { background:#f8f1c6 } #calendar td a { color: #656555; text-decoration: none; display:block; width:25px; height:22px;} #calendar ul { margin:0; padding:0 0 0 5px; list-style:none; } #calendar li { display:block; line-height:28px; padding:8px 0; border-bottom:1px solid #d2d2c4; font-size:1.1em; font-family:"Lucida Grande", arial, sans-serif; color:#999989; } #calendar .last { border:0; } #calendar li a { float:left; color:#4c4c42; text-decoration:none; } #calendar li a:hover { text-decoration:underline; } #calendar li span { float:right; } #traildiv { position: absolute; top: 0px; left: 0px; z-index: 999; visibility: hidden; width: 100px; height: 100px; color: #FFF; } #traildiv ul { padding: .75em; padding-bottom: 0; border: 3px solid #e1e1d4; background: #f8f1c6; font-size: 1.1em; } #traildiv li { color: #FFF; margin-left: 1em; margin-bottom: .75em; } #traildiv a { color: #656555; text-decoration: none; } /* @end */