/* @override http://www.thegrovechurch.com/css/styles.css */ /* @override http://www.thegrovechurch.com/css/styles.css */ /* @override http://cogchurch.org/css/styles.css */ /*============================================= SITE: Northminster Presbyterian FILE: styles.css - main CSS styles for staging site CREATED: 2/26/2009 MODIFIED: AUTHOR: Ben Otero (ben@churchplantmedia.com) ===============================================*/ /* @group GLOBAL */ html { height:100%; } body { background:#2E251C url(/images/body_bg.jpg) repeat-x; margin:0; padding:0; font-size:62.5%; font-family:"Lucida Grande", arial, helvetica, sans-serif; color:#4b4b47; height:100%; } hr { display: none; } #skip { position: absolute; text-indent: -9999px; list-style: none; overflow-x:hidden; } #container { margin:0 auto; width:888px; position:relative; min-height:60%; } * html #container { height:60%; } #mainContent { position:relative; clear:both; } .column { float:left; display:inline; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block;} fieldset { border:none; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix { display: block;} /* End hide from IE-mac */ /* @end */ /* @group HEADER */ #header-wrap { background:url(/images/header_bg.jpg) no-repeat center top; } #header { position:relative; width:888px; height:147px; margin:0 auto; } #header h1, #header h1 a { display:block; width:181px; height:111px; } #header h1 { margin:0; padding:0; position:absolute; top:19px; left:21px; text-indent: -999em; background:url(/images/logo.png) no-repeat; } #header h1 a:focus { outline:none; } #tagline { display:block; width:245px; height:35px; position:absolute; top:59px; right:12px; /*background:url(/images/tagline_bg.png) no-repeat; text-indent:-999em; margin:0;*/ } #tagline p { margin:0; font-size: 1.6em; color: #f2e0b0;} #skip { position:absolute; top:-999em; left:-999em; } /* @end */ /* @group NAVIGATION */ #nav, #nav * { list-style:none; margin:0; padding:0; } #nav { height:38px; position:relative; padding-left:23px; width:620px; z-index:11; } #nav li { float:left; display:inline; } #nav li a { font-size:1.2em; color:#d2c295; text-decoration:none; padding:0 18px; display:block; line-height:38px;} #nav li:hover a, #nav li a:hover { background:url(/images/nav_hover.gif) repeat-x left bottom; } #nav li.current { background:url(/images/nav_li_current.gif) no-repeat left top; position:relative; top:-4px; margin-bottom:-8px; padding-left:3px; font-weight: bold; } #nav li.current a, #nav li.current a:hover { padding-left:15px; background:url(/images/nav_a_current.gif) no-repeat right top; color:#473f36; line-height:42px; } #nav li li { float:none; display:block; } #nav li.current li a { font-weight:normal; padding:0 18px; } #nav li:hover li a, #nav li li a { line-height:29px; background:#f7f2e8; color:#292825; width:145px; font-size:11px; padding:0 18px; } #nav li.current li { padding:0; } #nav li.current li a:hover, #nav li li a:hover { background:#fff; color:#cf560d; font-weight:bold; line-height:29px; top:0; margin-bottom:0; padding:0 18px; } #nav li ul { position:absolute;left:-5000px;z-index:1001; border-top:0; margin-left:-1px; } #nav li:hover ul { left:auto;} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { left:-5000px;} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { left:auto;} #nav li:hover ul li:hover ul { margin:-28px 0 0 150px;} /* @end */ /* @group BANNER */ #banner img { border:0; } #banner { display:block; width:888px; height:222px; position:relative; top:-4px; background:url(/images/sub_banner_bg.jpg) no-repeat; z-index:10; } #banner #image { margin:0; width:869px; height:192px; background:url(/file/sp.jpg) no-repeat; position:relative; left:10px; top:12px; } #banner-left { display:block; width:93px; height:222px; background:url(/images/sub_banner_left.jpg) no-repeat; position:absolute; top:-10px; left:-93px; } #banner-right { display:block; width:100px; height:222px; background:url(/images/sub_banner_right.jpg) no-repeat; position:absolute; top:-10px; right:-100px; } /* @end */ /* @group PRIMARY CONTENT */ #primaryContent { position:relative; width:860px; } #content { float:left; width:600px; padding-left:15px; padding-bottom:0; position:relative; } #content.wide { width:860px; } #sidebar .side-section a, #content a { color:#fbd473; } #content a:hover { text-decoration:none; } #lowerContent { padding-bottom:30px; margin-top:7px;} #lowerContent p, #lowerContent li, #lowerContent td { font-size:1.3em; color:#f4eee3; line-height:1.5em; } #subscribe { background:url(/images/feed_icon.png) no-repeat left center; padding:4px 0 4px 20px; position:absolute; top:10px; right:0; font-size:1.2em; } #content p *, #content li *, #content td * { font-size:1em; line-height:1; } #content .article p { margin-top:0; } #content img { border:0; } img.left-align { float:left; margin:10px 10px 10px 0; } img.right-align { float:right; margin:10px 0 10px 10px } /* @group HEADINGS */ h2, h3, h4, h5, h6 { color:#d54f0d; } h2 { margin-top:0; font-size:2.4em; font-family:georgia, times, roman, serif; } #content h3 { font-size:1.5em; } #content h4 { font-size:1.4em; color: #cbbda0; } #content h4.title { margin:0; } #content h5 { font-size:1.6em; font-weight: normal; } #content h6 { font-size:1.3em; color: #fffefe; text-transform: uppercase;} /* @end */ /* @group SIDEBAR */ .box { background:url(/images/box_bg.gif) repeat-y left top; } .box-btm { background:url(/images/box_btm.gif) no-repeat left bottom; display:block; height:20px; width:235px; position:relative; margin:0; } #sidebar { float:right; width:235px; background:url(/images/sidebar_bg.gif) no-repeat; position:relative; } .box-top { width:235px; height:7px; background:url(/images/sidebar_bg.gif) no-repeat; clear:both; } #sidebar.blank, #sermons #sidebar { background:none; } #sidebar .side-section { padding:0 0 0 12px; clear:both; } #subnav { margin-top:7px; padding:10px 17px 0 17px; background:url(/images/box_bg.gif) repeat-y left top; } #subnav .box-btm { margin-left:-17px; } #snav, #snav * { margin:0; padding:0; list-style:none; } #snav li { display:none; } #snav li li li a { color: #fff !important; font-size: 11px !important; } #articles li#snav_resources, #articles li#snav_resources li, #sermons li#snav_resources, #sermons li#snav_resources li, #snav li.current, #snav li.current li { display:block; } #snav li.current li li { display:none; } #snav li li.current li { display:block; } #articles li#snav_resources a, #sermons li#snav_resources a, #snav li.current a { display:block; font-size:14px; font-weight:bold; text-decoration:none; color:#fbd473; padding:0 7px 9px; border-bottom:1px solid #32291e; margin-bottom:7px; } #articles li#snav_resources li a, #sermons li#snav_resources li a, #snav li.current li a { font-size:13px; font-weight:normal; color:#f7f1e5; padding:0 7px; margin:0; border:0; height:32px; line-height:28px; overflow:hidden; } #snav li.current li a:hover { text-decoration:underline; color:#fff; } #articles li#snav_resources li#snav_resources_articles a, #sermons li#snav_resources li#snav_resources_sermons a, #snav li li.current a:hover, #snav li li.current a { background:url(/images/current_arrow.gif) no-repeat; position:relative; left:-17px; padding:0 0 0 24px; height:31px; color:#fff; margin:0; line-height:28px; width:189px; text-decoration:none; } #sermons li#snav_resources li a:hover, #articles li#snav_resources li a:hover, #snav li li a:hover { color:#292927; } /* 3RD LEVELS - initially hide 3rd levels */ #snav li li.active a, #snav li li.current.active a { background:url(/images/right_arrow.gif) no-repeat right center; display:inline; padding-right:10px; color:#2d2d2d; } #snav li li.current.active a:hover { text-decoration:underline; color:#525252; } #snav li.current li li a { margin-left:15px; } #snav li li.active li a, #snav li li.current li a:hover, #snav li li.current li a { background:none; color:#2d2d2d; text-decoration:none; margin-left:15px; } #snav li li.current li a:hover { text-decoration:underline; } #snav li li.active li.current a:hover, #snav li li.active li.current a { left:-32px; padding-left:38px; width:175px; background:url(/images/current_arrow.gif) no-repeat; color:#fff; text-decoration:none; display:block; } /* SERMON AND ARTICLE PAGE CORRECTIONS */ #events li#snav_home, #articles li#snav_home, #sermons li#snav_home { display:none; } /* @end */ /* @end */ /* @group SECONDARY CONTENT */ #secondaryContent { position:relative; } #secondaryContent .column { width:267px; margin-right:30px; background:url(/images/stripe_bg.gif) repeat-x left 26px;} /* @end */ /* @group FOOTER */ #footer { position:relative; margin-top:-1em; background:#201911; height:190px;} #footer-inner { margin:0 auto; width:830px; text-align:center; height:150px; padding-top:22px; background:url(/images/logo-footer.png) no-repeat center 104px; } #footer p { font-size:1.1em; color:#b9ab9a; margin:0 0 1px; line-height:1.6em; } #footer a { color:#dc5d10; } #footer a:hover { text-decoration: none; } #footer-buttons { margin-top:11px; } #footer img { border:0; } /* @end */ /* @group SERMONS */ #filter { margin:0 0 1em; } #filter select { width:100px; margin-left:10px; } #filter a { margin-left:20px; } .sermonlist { } #content .sermonlist h4 { margin:0; padding:10px 0; } .sermonbox { position:relative; padding:10px 0 14px; border-top:1px solid #201911; } .sermonbox a { text-decoration:underline; } .sermonbox a:hover { text-decoration:none; } #content .sermonbox h5 { margin:0;padding-bottom: 5px; padding-top: 4px;} #content .sermonbox h5 span { font-size:10px; margin-left:10px; } .sermonbox h5 a { font-weight:bold; color:#183a6c; } .sermonbox h5 a:hover { color:#556c6b } #content .sermonbox p { margin:0; font-size:12px; line-height: 1.6em;} .sermonbox ul { position:absolute; top:30px; 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.png) no-repeat; padding-right: 6px;} .sermonbox li.sl_download a { background:url(/images/download_icon.png) no-repeat; padding-right: 7px;} .sermonbox li.sl_notes a { background:url(/images/notes_icon.png) no-repeat;margin-right: -13px; } .sermonbox li.sl_video a { background:url(/images/video_icon.png) no-repeat;padding-right: 5px; } .sermonbox li a:focus { outline:none; } /* @group MEDIA BOX */ #text { } #byline { margin:10px 0 0; padding:0; list-style:none; } #mediabox { float:right; width:125px; padding:10px; margin:5px 0 0 10px; list-style:none; border:1px solid #dfdaca; background:#f2ede3; } #mediabox li { padding:2px 0 2px 20px; } #mediabox li a { color:#d54f0d; } #mediabox li a:hover { text-decoration:none; } #mediabox li#mb_links { background:#d3cebd; color:#656560; margin:-10px -10px 10px; padding:10px; font-weight:bold; border-bottom:1px solid #d3cebd; } #mediabox li#mb_jukebox { background:url(/images/play_icon.png) no-repeat left 2px; } #mediabox li#mb_download { background:url(/images/download_icon.png) no-repeat left 2px; } #mediabox li#mb_notes { background:url(/images/notes_icon.png) no-repeat left 2px; } #mediabox li#mb_video { background:url(/images/video_icon.png) no-repeat left 2px; } #mediabox li#mb_podcast { background:url(/images/feed_icon.png) no-repeat left 2px; } /* @end */ /* @group HOW IT WORKS */ #sorting, #how-it-works { padding:17px; margin:0; } #sorting h3, #how-it-works h3 { background:url(/images/sidebar_bg.gif) no-repeat left top; margin:-17px -17px 1em; padding:17px 17px 0; font-size:1.5em; } #how-it-works ul { margin:1.5em 0 0; padding:0; list-style:none; } #how-it-works li { padding-left:20px; margin-bottom:1.5em; font-size:1.2em; } #how-it-works li span { font-weight:bold; } #how-it-works li#play { background:url(/images/play_icon.png) no-repeat; } #how-it-works li#notes { background:url(/images/notes_icon.png) no-repeat; } #how-it-works li#video { background:url(/images/video_icon.png) no-repeat; } #how-it-works li#save { background:url(/images/download_icon.png) no-repeat; } .box .box-btm { margin:0 -17px -17px; } /* @end */ /* @group SORTING */ #sorting select, #sorting label { display:block; } #sorting select { width:100%; margin-bottom:1.5em; } #sorting label { font-size:1.3em; margin-bottom:.5em; color: #f7f1e5;} #sorting a { font-size:1.2em; color:#d54f0d; } #sorting li a:hover { text-decoration: none; } /* @end */ /* @end */ /* @group CALENDAR */ #content table.calendar { margin-bottom: 25px; border-collapse: collapse; width:100%; } #content table.calendar caption { color: #d54f0d; font-size: 1.4em; padding:0 0 20px; } #content table.calendar caption span{ font-size:1.5em; margin:0 0px; text-decoration: none;} #content table.calendar caption span a{ font-size:1.2em; margin:0 20px; text-decoration: none;} #content table.calendar th { padding: 6px 0; background:#5b4c3d; color:#afa191; font-size: 1.3em; font-weight: normal; } #content table.calendar td { width: 68px; height: 68px; padding: 2px; border: 1px solid #2f261d; border-left: 0; border-top: 0; background:#201911; color:#afa191; font-size: 1em; vertical-align: top; } #content table.calendar td a { text-decoration: none; color: #fbd473; } #content table.calendar td ul { margin: .5em 0 0 .5em; padding:0; font-size: 100%; list-style: none; } #content table.calendar td li { margin-bottom: .75em; font-size: 1.1em; line-height: 1.2; } #content table.calendar td li a { text-decoration: underline; } #content table.calendar td li a:hover{ text-decoration: none; } td.today span { display:none; } #content table.calendar td.today { background:#201911; } /* @end */ /* @group BLOG */ #blog .box { margin-top:0; margin-bottom:45px;} #blog .box h3 { padding-left:17px; margin:0 0 10px; padding-top:15px; font-size:14px; } #blog .box ul { margin:0; padding:0 17px; list-style:none; } #blog .box li a { color:#fbd473; } #blog .box li a:hover { text-decoration:none; } #latest-posts li span { display:inline-block; width:55px; vertical-align:top; } #blog .box-btm { margin-left:0; } #post-comment-form { margin:5em 0; } #post-comment-form label, #post-comment-form input { display:block; margin-bottom:15px;} #post-comment-form label { font-size:1.4em; color:#fff; font-weight:bold; margin-bottom:5px; } #post-comment-form input { padding:4px; border:0; width:50%; } #post-comment-form input.hidden { padding:0; } #post-comment-form textarea { padding:4px; border:0; width:80%; height:150px; margin-bottom:15px; } #post-comment-form #comment-submit { width:auto; border:1px solid #000; padding:6px;} /* @end */ #content img { padding: 0 20px 20px 20px; } p#blog-feed { margin: 0 0 1em; } p#blog-feed a { font-size: 1.3em; color: #e0d6c3; padding-left: 20px; background: url(/images/media/feed_icon.png) no-repeat 0 1px; display: block; padding: 2px 2px 2px 20px; text-decoration: none; } p#blog-feed a:hover { text-decoration: underline; } #blog #sidebar { background: none; }