/* @override http://islandchurch.cpmpreview.com/_css/styles.css */ /* @override http://island.dev/_css/styles.css http://islandchurch.cpmpreview.com/_css/styles.css */ /*===== SITE:Island Church FILE: styles.css CREATED: 7/21/2009 MODIFIED: AUTHOR: Luke Simpson (luke@churchplantmedia.com) =====*/ /* @group GLOBALS */ * { margin:0; padding:0; line-height:1; } html { height:100%; } body { font-size:62.5%; margin:0; padding:0; background:#0f2234; height:100%; font-family: Helvetica, Arial, Geneva, sans-serif; min-width: 1000px; } #container { background:url(/_img/bg_container.jpg); position:relative; } #mainContent { display:block; width:900px; margin:0 auto; padding-bottom:90px; position:relative; z-index:12;min-height: 300px;} .banner { background:url(/_img/sub_maincontent_bg.jpg) no-repeat; width:670px; height:239px; display:block; } .banner img { position:relative; } .show{ display: block; } .hidden, hr { display:none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block;} a img{ border: none; } /* @end */ /* @group HEADER */ #headwrap{ background: url(/_img/body_bg.jpg) repeat-x center top; } #header { position:relative; z-index:1000; height:182px; background:url(/_img/bg_header2.jpg) no-repeat center top; } #header-inner { width:897px; margin:0 auto; position:relative; } #header h1, #header h1 a { display:block; width:247px; height:118px; } #header h1 { background:url(/_img/logo.png) no-repeat; text-indent:-999em; position:absolute; top:0; left:0;} #header h1 a:focus { outline:none; } #guide { display:block; width:136px; height:32px; background:url(/_img/guide_btn.png) no-repeat; text-indent:-999em; position:absolute; top:142px; right:-2px; } #guide.on { background:url(/_img/guide_up.png) no-repeat; top:142px; } #guide:focus { outline:none; } #skip { position:absolute; top:-999em; } /* @end */ /* @group SHELF */ #sitemap-wrap { background:#0b406a url(/_img/shelf_bg.jpg) repeat-x left bottom; padding-bottom:48px;position:relative; z-index:13; } #sitemap { display:none; padding:0; width:900px; margin:0 auto; position:relative; } #sitemap .col{ width:150px; margin:30px 0 0; padding:10px 0 40px; float:left; } #sitemap ul {list-style:none; float:left; } #sitemap h3{ font-size: 1.5em; color: #C2EAF6; font-weight: normal; margin-bottom: 7px; } #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(/_img/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:137px; left:0px; height:42px; width:800px;} #nav li { cursor:pointer; float:left; display: inline; padding-left:3px; margin:0 2px 0;} #nav li a { display:block; height: 33px; padding:13px 17px 0 15px; text-decoration:none; font-size:1.4em; font-family: helvetica, arial, sans-serif; color:#C2EAF6; } #nav li a:hover { color:#fffefc; } #articles #nav li#nav_resources, #nav li.current, #nav li:hover { padding-left:3px; background:url(/_img/nav_li_bg.gif) no-repeat left top; } #articles #nav li#nav_resources a, #nav li.current a, #nav li:hover a { background:url(/_img/nav_li_a.gif) no-repeat right top; color:#1a3446; } #nav li ul { display:none; } /* @end */ /* @group PRIMARY CONTENT */ #primaryContent { float:left; width:672px; } #primaryContent.wide { float:none; width:100%; } .banner, #banner { background:url(/_img/bg_banner.png) no-repeat left top; display:block; width:646px; height:215px; padding: 13px; overflow: hidden; margin: 0 !important;} #text { padding-left:13px; margin-top:-20px; padding-right: 15px;} #primaryContent a { text-decoration:underline; color:#00a5cd; } #primaryContent a:hover { text-decoration: none; } #primaryContent p, #primaryContent li { font-size:1.3em; line-height:20px; margin-bottom:1em !important; color:#4b4b41;} #primaryContent li *, #primaryContent p *, #primaryContent td * { font-size:1em; line-height:1; margin:0; } #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(/_img/subpage_h2.png) no-repeat; line-height:45px; padding:0 15px 0; margin-top:-1px;} .wide h2 { background-repeat: repeat-x; } #home h2 { background:url(/_img/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; position:relative; left:9px;} .col { float:left; } #secondaryContent h3{ font-size: 1.5em; color: #00538b; margin-left: 4px; } /* @group SUBNAV */ #subnav { background:#fefdf0 repeat-y; width:215px; margin-bottom:30px; } #snav { padding:16px; margin:0; list-style:none; } #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:#00538b; display:block; line-height:36px; text-decoration:none; font-weight:bold; padding:0 0 3px 8px; border-bottom:1px solid #dad9cc; margin-bottom:8px; } /* 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: helvetica, arial, sans-serif; color:#43433e; font-size:13px; } #snav li.current li a:hover{ text-decoration: underline; } #snav li li.current a { background:url(/_img/current_arrow.gif) no-repeat; color:#fffffe; font-weight:bold; position:relative; left:-24px; padding-left:24px; width:177px; text-decoration: none; height: 34px; padding-top: 0px; } #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(/_img/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(/_img/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(/_img/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(/_img/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 { display:block; position:relative; background:#1b84a4 url(/_img/footer_bg.jpg) repeat-x; z-index:8; margin-top:-50px; } #footer-inner { display:block; width:897px; margin:0 auto; position:relative; top:-67px; padding-top:108px; background:url(/_img/maincontent_bg.png) no-repeat center top; } #footer .col { width:221px; padding:0 12px; float:left; } #footer h4 { background:url(/_img/footer_h4_bg.gif) no-repeat; width:199px; height:30px; color:#e4dbb4; font-size:1.6em; font-weight:normal; padding:2px 15px 0; line-height:30px; position:relative; top:-2px; } /* @group Extras */ #extras ul{ padding-left: 12px; } #extras ul li{ list-style: none; margin-bottom: 12px; width: 197px; float: left; } #extras ul li a{ font-size: 1.3em; color: #ebe6c8; text-decoration: none; display: block; } #extras ul li a img{ float: left; display: inline; margin-right: 5px; } #extras ul li a span{ float: left; padding-top: 3px; } #extras ul li a:hover span{ text-decoration: underline; } /* @end */ /* @group FOCUS */ #focus.col { padding-left:11px; width:219px; position:relative; margin-left:-5px; margin-right: 10px;} #focus h4 { margin:0px 0 7px -3px; } #focus h5 { font-size:1.4em; font-weight:bold; 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.7em; } #focus p a { color:#a6c8de; font-size:11px; } #focus a:hover { text-decoration:none; } /* @end */ /* @group MESSAGE */ #service-times.col { background:#157d9d url(/_img/latest_message_bg.gif) no-repeat; position:relative; border:1px solid #1a738e; padding:15px 22px 15px; 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(/_img/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.4em; font-weight: bold; color:#fffffd; line-height:1.2em; margin-top:-8px; } /* @end */ /* @group ADDRESS */ #footer #address { padding:2px 10px 8px 16px; width:167px; border-left:1px solid #2c637b; margin-left: 14px;} #address p { font:1.1em helvetica, sans-serif; color:#e3e3d7; line-height:1.5em; margin-bottom:.2em; padding-left: 0px; } #address a { display:block; width:160px; height:21px; margin-top: 7px;margin-bottom:6px; } #address a:focus { outline:none; } /* @end */ /* @group FOOTER BOTTOM */ #footer-bottom { background:#0f2234 url(/_img/footer_bottom_bg.jpg) repeat-x; width:100%; min-height:100px; position:relative; margin-top:-50px; z-index:3000; padding-top:70px; } #footer-bottom .inner { width:897px; margin:0 auto; display:block; } #footer-bottom p#copyright { font-size:1.1em; color:#91a0a7; font-family:"Lucida Grande", verdana, sans-serif; float:left; margin:5px 0 0 7px;} #footer-bottom a{ color: #91a0a7; } #footer-bottom a:hover{ text-decoration: none; } #footer-bottom p#designed { float:right; width:auto; margin:1px 4px 0 0} #footer-bottom #cpm-logo { display:block; width:141px; height:21px; background:url(/_img/cpm_logo.gif) no-repeat; text-indent:-999em; } #footer-bottom #cpm-logo:hover { background-position:left -21px; } #footer-bottom #cpm-logo: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; padding-bottom: 9px; color: #8b8672;} #primaryContent .sermonbox h5 span { font-size:10px; margin-left:10px; } #primaryContent .sermonbox p { margin:2px 0 0; line-height:.5; } #primaryContent .sermonbox a { margin:2px 0 0; line-height:.5; } .sermonbox ul { position:absolute; top:20px; right:0px; 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(/_img/play_icon_app.gif) no-repeat; padding-right: 4px; } .sermonbox li.sl_download a { background:url(/_img/download_icon_app.gif) no-repeat;padding-right: 4px; } .sermonbox li.sl_notes a { background:url(/_img/notes_icon_app.gif) no-repeat; padding-right: 4px;} .sermonbox li.sl_video a { background:url(/_img/video_icon_app.gif) no-repeat; } .sermonbox li a:focus { outline:none; } /* @group MEDIA BOX */ #byline { margin:10px 0 20px !important; padding:0; list-style:none; } #primaryContent #byline li { line-height:1; margin:2px 0 0 0; padding:0; } #mediabox { padding:20px; margin:0; background:#fefdf0; 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; padding:20px; font-size:1.6em; font-weight:bold; color:#1d2426; } #mediabox li#mb_jukebox { background:url(/_img/play_icon_app.gif) no-repeat left 2px; } #mediabox li#mb_download { background:url(/_img/download_icon_app.gif) no-repeat left 2px; } #mediabox li#mb_notes { background:url(/_img/notes_icon_app.gif) no-repeat left 2px; } #mediabox li#mb_video { background:url(/_img/video_icon_app.gif) no-repeat left 2px; } #mediabox li#mb_podcast { background:url(/_img/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; margin-left: -3px; padding:7px; padding-left: 12px;list-style:none; background:#fefdf0; border:2px solid #e7e0c7; } #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(/_img/play_icon.gif) no-repeat left center; } #how-it-works li#notes { background:url(/_img/notes_icon.gif) no-repeat left center; } #how-it-works li#hwvideo { background:url(/_img/video_icon.gif) no-repeat left center; } #how-it-works li#save { background:url(/_img/download_icon.gif) no-repeat left center; } /* @end */ /* @group SORTING */ #sorting { background:#fefdf0 repeat-y; padding:20px; width:175px; } #sorting h3 { margin:-20px -20px 0; background:#fefdf0 no-repeat; padding:20px; color:#00538b; 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:133%; } .calendar caption { padding-bottom: 13px; font-size: 1.7em; margin-left: 5px;} .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: #E4DBBC; 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; } #primaryContent .calendar td li { margin-bottom:8px; font-size: 1.1em; line-height: 1.2; } .calendar td li a { color: #FFF; text-decoration: underline; } /* @end */ /* @group MINI */ #calendar { width:210px; margin-bottom: 20px; position: relative;} #calendar table { border:0; border-collapse:collapse; margin-bottom:12px; width: 210px;} #calendar th { display:none; } #calendar caption {background:url(/_img/cal_caption_bg.gif) no-repeat right 2px; padding:0 0 10px; text-align:left; font-size:11px; font-weight:bold; color: #52483d; font-family:"Lucida Grande", arial, sans-serif; position: relative;} #calendar caption em{ font-style: normal; font-weight: normal; } #calendar caption span {display:block; height:11px; width:12px; padding-top: 2px; } #calendar caption span.calendar-next{ position:absolute; top:0; right:1px; } #calendar caption span.calendar-prev{ position:absolute; top:0; right:18px;} #calendar caption span img{ width: 12px; height: 11px; display: block; float: left; vertical-align: bottom; } #calendar td { width: 25px; height: 22px; padding: 4px 2px 2px; border: 1px solid #e1e1d4; border-right: 0; border-top: 0; background: #fff; color: #656555; font-size: 9px; font-family:"Lucida Grande", arial, sans-serif; vertical-align: top; } #calendar .empty { background:#fdfcf6; } #calendar .linked-day { background:#fdf3ba;} #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 #dad4b9; font-size:1.1em; font-family: helvetica, arial, sans-serif; color:#999989; } #calendar .last { border:0; } #calendar li a { float:left; color:#565447; text-decoration:none; font-size: 1.2em;} #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: 140px; height: 100px; color: #FFF; } #traildiv ul { padding: .75em; padding-bottom: 1px; background: #4c493c; font-size: 1.1em; padding-left: 10px; } #traildiv li { color: #FFF; margin-left: 1em; margin-bottom: .75em; padding-top: 3px; padding-bottom: 1px; } #traildiv a { color: #FFF; text-decoration: none; } /* @end */ /* @group */ #blog #comments label{ display: block; font-size: 1.5em; margin-bottom: 10px; } #blog #comments textarea{ width: 400px; height: 150px; margin-bottom: 10px; } .comment{ padding-left: 20px; } /* @end */