/* @override http://newcreation.cpmpreview1.com/css/styles.css */ /*===== SITE: New Creation FILE: styles.css - main CSS styles for staging site CREATED: 4/18/2008 MODIFIED: 4/28/2008 AUTHOR: Ben Otero (ben@churchplantmedia.com) =====*/ /* @group GLOBAL */ html { height:100%; } body { background:url(/images/body_bg.gif) repeat top center; margin:0; padding:0; font-size:62.5%; font-family:"Lucida Grande", arial, helvetica, sans-serif; color:#e4dcd0; height:100%; } hr { display: none; } #outer-container { background:url(/images/outer_container_bg.jpg) repeat-x top center; min-height:100%; } * html #container { height:100%;} #container { background:url(/images/container_bg.jpg) repeat-y; position:relative; padding-bottom:7em; } #home #container { padding-bottom:0; } #container-top { display:block; height:221px; width:24px; background:url(/images/container_top.jpg) no-repeat; position:absolute; left:308px; z-index:2002; } #content { margin-left:345px; width:600px; z-index:10; } #mainContent { position:relative; } a { overflow: hidden; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix { display: block;} /* End hide from IE-mac */ /* @end */ /* @group HEADER */ #header { position:relative; padding-top:15px; } #home #header { padding-top:47px; } #header h1 { position:absolute; left:-999em; } #intro { margin-bottom:22px; } #intro p { font:bold 1.6em Georgia, "Times New Roman", serif; color:#e9e2d6; line-height:1.6em; margin:0; padding:0; } #intro a { color:#d3b36e; padding-right:22px; background:url(/images/intro_arrow.gif) no-repeat right 3px; margin-left:30px;} #intro a:hover { text-decoration:none; } #skip { position:absolute; text-indent: -9999px; list-style: none; overflow-x:hidden; } /* @end */ /* @group HEADINGS */ h2, h3, h4, h5, h6 { color:#e4dcd0; } h2 { background:url(/images/lower_h3_bg.gif) repeat-x; padding:8px 15px 0; height:38px; margin:0; font:bold 1.6em Georgia, "Times New Roman", serif; } h3 { font-size:1.5em; } h4 { font-size:1.4em; } h4.title { margin-bottom:0; } .article p { margin-top:0; } h5 { font-size:1.3em; } h6 { font-size:1.2em; } /* @end */ /* @group BANNER */ #banner, #overlay, #banner-inner { position:relative; display:block; width:645px; height:227px; } #home #banner, #home #overlay, #home #banner-inner { height:279px; } #banner { left:-18px; margin-bottom:7px;} #overlay { position:absolute; top:0; left:0; z-index:500; background:url(/images/sub-banner-overlay.png) no-repeat; } #home #overlay { background:url(/images/banner-overlay.png) no-repeat; } #banner-inner { position:absolute; width:609px; height:200px; background:url(/mediafiles/subpage-header.jpg) no-repeat; top:11px; left:18px; z-index:1; } #home #banner-inner { background:url(/mediafiles/home-header.jpg) no-repeat; height:252px; top:9px; left:19px;} /* @end */ /* @group SERVICE-PODCAST */ #service-podcast { background:url(/images/service_podcast_bg.jpg) repeat-y; padding:10px 15px 6px; width:578px; position:relative; margin-top:-3px; } #service-podcast h3 { font-size:1.5em; font-weight:normal; color:#adc2bb; margin:0; padding:0; text-transform:uppercase; } #service-podcast p { font-size:1.2em; color:#f7f4f0; line-height:1.4em; margin:0 0 2px; } #service-podcast b { background:#826e49; padding:0 2px } #service-podcast a { color:#f2ce7f; } #service-podcast a:hover { text-decoration:none; } .box-top, .box-btm { float:left; display:block; width:608px; height:3px; margin-left:-15px; margin-right:-15px; } .box-top { background:url(/images/service_podcast_top.jpg) no-repeat; margin-top:-10px; } .box-btm { height:7px; background:url(/images/service_podcast_btm.jpg) no-repeat; position:relative; top:6px; clear:both;} #service-times { float:left; width:272px; } #podcast { float:left; width:272px; margin-left:30px; } /* @end */ /* @group LOWER CONTENT */ #lower-content { width:608px; margin-top:19px;} #featured-events, #get-involved { background:#42382a; width:295px; float:left; padding:0; } #featured-events { margin-left:18px; } #lower-content h3 { background:url(/images/lower_h3_bg.gif) no-repeat; padding:10px 15px 0; height:36px; margin:0; font:bold 1.4em Georgia, "Times New Roman", serif; color:#e4dcd0; } /* @group get-involved*/ #get-involved h3 { margin-bottom:-7px; } .quicklink { padding:10px 14px; height:65px; border-bottom:1px solid #4f4436;} .quicklink img { float:left; margin-right:12px; border:0; } .quicklink h4 { font-size:1.2em; margin:8px 0 2px; padding:0; } .quicklink h4 a { color:#fefefd; text-decoration:none; } .quicklink a:hover { text-decoration:underline; } .quicklink p { margin:0; font-size:1.1em; color:#b2a591; line-height: 1.5em; } /* @end */ /* @group featured-events */ #featured-events { position:relative; min-height:297px; } #view-all { position:absolute; top:13px; right:10px; padding-right:20px; font:bold 1.1em Georgia, times, serif; color:#e4dcd0; text-decoration:none; background:url(/images/cal_icon.gif) no-repeat right center; } #view-all:hover { text-decoration:underline; } #featured-events table { background:#342c21 url(/images/mini_cal_bg.gif) repeat-x; border:3px solid #342c21; width:259px; margin:0 auto 14px; } #featured-events caption { font-size:1.3em; color:#adc2bb; font-weight:bold; padding-bottom:10px;} #featured-events th { background:url(/images/th_bg.gif) repeat-x left bottom; padding:0 0 8px; font:bold 11px arial, verdana, sans-serif; color:#889a94; height:19px; } #featured-events td { text-align:center; font:1.2em arial, verdana, sans-serif; color:#928776; width:24px; height:17px;} #featured-events td a { display:block; width:24px; height:17px;background:url(/images/mini_cal_link.gif) no-repeat center top; color:#fffffe; text-decoration:none; padding-top:2px } #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 #15130D; background: #2B271B; font-size: 1.1em; } #traildiv li { color: #FFF; margin-left: 1em; margin-bottom: .75em; } #traildiv a { color: #FFF; text-decoration: none; } #more-events { border-top:1px solid #4f4436; } #more-events ul { margin:0; padding:11px 14px; list-style:none; } #more-events li { } #more-events li a { float:left; width:80%; font-size:1.1em; color:#fefefd; text-decoration:none; line-height:24px; } #more-events li a:hover { text-decoration:underline; } #more-events li span { float:right; text-transform:uppercase; color:#b2a591; font-size:1.1em; } /* @end */ /* @end */ /* @group TEXT */ #text { background:#42382a; padding:5px 15px 15px; margin-top:-12px} #text li, #text td, #text p { font-size:1.2em; color:#efebe0; line-height:1.5em; } #text a { color:#f2ce7f; } #text a:hover { text-decoration:none; } #text img.noborder { border:0; } #text img.left-align { float:left; margin:10px 10px 10px 0 } #text img.right-align { float:right; margin:10px 0 10px 10px; } #text img.thick-border { border:4px solid #fff; } #text img.thin-border { border:1px solid #fff; } /* @end */ /* @group SECONDARY CONTENT */ #secondaryContent { background:url(/images/sidebar_bg.gif) repeat-y; float:left; width:329px; padding-bottom:600px; z-index:1000; } #container > #secondaryContent { position:fixed; padding-bottom:600px; z-index:2000; } #secondaryContent h1, #secondaryContent h1 a { display:block; width:213px; height:140px; } #secondaryContent h1 { background:url(/images/logo.gif) no-repeat; text-indent:-999em; margin:20px 0 0 46px; padding:0; } #secondaryContent h1 a:focus{ outline:none; } #secondaryContent h3 { margin:0 0 5px; padding:0; color:#6f6759; border-bottom:1px solid; font-size:1.3em;} #secondaryContent a { color:#675e4f; } #secondaryContent a:hover { text-decoration:none; } #secondaryContent div { width:240px; } /* @end */ /* @group NAVIGATION */ #nav, #nav * { list-style:none; margin:0; padding:0} #nav { margin:57px 0 0 34px; } #nav li { float:left; } #nav li a { display:block; line-height:44px; background:url(/images/nav_a_bg.gif) no-repeat left top; width:202px; text-decoration:none; font-size:1.5em; color:#675e4f; padding:0 20px; } #nav li.current a, #nav li.current:hover a, #nav li:hover a { background-position:left bottom; font-weight:bold; color:#38342e; } #nav li.current:hover li a, #nav li li a, #nav li:hover li a { background:none; width:146px; padding:0 11px; font-size:12px; line-height:28px; color:#fff; font-weight:normal; } #nav li.current li a:hover, #nav li li a:hover { background:#443d34; } #nav li ul { position:absolute; left:-5000px; z-index:1001; background:#79887e; opacity:.95; padding:7px; width:168px; } #nav li:hover ul { left:auto; margin-left:200px; margin-top:-64px; } #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; display:block;} #nav li:hover ul li:hover ul{ margin:-28px 0 0 140px;} /* @end */ /* @group ADDRESS */ #address { clear:both; margin:0 0 0 38px; padding-top:25px;} #address p { font-size:1.2em; color:#6f6759; line-height:1.8em; margin:0; } /* @end */ /* @group FOOTER */ #footer { height:109px; background:url(/images/footer_bg.jpg) repeat-x; margin:-4em 0 0 308px; padding:32px 0 0 37px; position:relative; z-index:2001; } #home #footer { margin-top:42px; } #footer-grunge { position:absolute; width:21px; height:141px; background:url(/images/footer_grunge.jpg) no-repeat; top:0; left:0;} #footer p { font-size:1.2em; color:#a3967f; margin:0; padding:0; } #footer a { color:#a3967f; } #footer a:hover { text-decoration:none; } /* @end */ /* @group SERMONS */ #filter select { width:100px; margin-left:10px; } #filter a { margin-left:20px; } .sermonlist h4 { margin:0; padding:10px 0; } .sermonbox { position:relative; padding:10px 0; border-top:1px solid #4f4436; } .sermonbox a { text-decoration:underline; } .sermonbox a:hover { text-decoration:none; } .sermonbox h5 { margin:0;} .sermonbox h5 span { font-size:10px; margin-left:10px; } .sermonbox h5 a { font-weight:bold; color:#027cc9;} .sermonbox h5 a:hover { color:#556c6b } .sermonbox p { margin:0;} .sermonbox ul { position:absolute; top:15px; 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.gif) no-repeat; } .sermonbox li.sl_download a { background:url(/images/download_icon.gif) no-repeat; } .sermonbox li.sl_notes a { background:url(/images/notes_icon.gif) no-repeat; } .sermonbox li.sl_video a { background:url(/images/video_icon.gif) no-repeat; } .sermonbox li a:focus { outline:none; } /* @group MEDIA BOX */ #byline { margin:10px 0 0; padding:0; list-style:none; } #mediabox { float:right; padding:10px; margin:-25px 0 0 10px; list-style:none; background:#342c21; border:1px solid #342c21; } #mediabox li { padding:2px 0 2px 20px; } #mediabox li#mb_links { background:#342c21; color:#fff; margin:-10px -10px 10px; padding:10px; } #mediabox li#mb_jukebox { background:url(/images/play_icon_app.gif) no-repeat left 2px; } #mediabox li#mb_download { background:url(/images/download_icon.gif) no-repeat left 2px; } #mediabox li#mb_notes { background:url(/images/notes_icon.gif) no-repeat left 2px; } #mediabox li#mb_video { background:url(/images/video_icon.gif) no-repeat left 2px; } #mediabox li#mb_podcast { background:url(/images/feed_icon.gif) no-repeat left 2px; } /* @end */ /* @group HOW IT WORKS */ .box { margin:2.5em 0 0; background:#342c21; height:30px;} .box ul { margin:0; padding:6px 0 0; list-style:none; } .box li { float:left; padding-left:20px; margin-right:10px; font-size:1.2em; line-height:30px;} #sorter li { padding:0; } .box li select { width:80px; position:relative; top:-2px} .box li#works, .box li#sort, #how-it-works li#works { font-weight:bold; } #sorter li#sort { padding-left:20px; } #sorter li#all a { font-size:10px; } .box li#play, #how-it-works li#play { background:url(/images/play_icon_app.gif) no-repeat left 1px; } .box li#notes, #how-it-works li#notes { background:url(/images/notes_icon_app.gif) no-repeat left 1px; } .box li#video, #how-it-works li#video { background:url(/images/video_icon_app.gif) no-repeat left 1px; } .box li#save, #how-it-works li#save { background:url(/images/download_icon_app.gif) no-repeat left top; } /* @end */ /* @group SORTING */ #sorting { padding-top:25px; clear:both; margin-left:38px; width:240px;} #sorting h3 { font-size:1.5em; color:#38342e; border:0; } #sorting ul { margin-top:2.5em; padding:0; list-style:none; } #sorting li a { font-size:1.2em; color:#38342e; } #sorting li a:hover { text-decoration: none; } /* @end */ /* @group SORTING */ #sorting { padding-top:25px; clear:both; margin-left:38px; width:240px;} #sorting h3 { font-size:1.5em; color:#38342e; border:0; } #sorting ul { margin-top:2.5em; padding:0; list-style:none; } #sorting li a { font-size:1.2em; color:#38342e; } #sorting li a:hover { text-decoration: none; } /* @end */ /* @end */ /* @group CALENDAR */ #text table.calendar { margin:25px auto; border-collapse: collapse; } #text table.calendar caption{ padding-bottom: 10px; color: #fff; font-size: 1.4em; } #text table.calendar th { padding: 6px 0; background:#825336; color:#fff; font-size: 1.3em; font-weight: normal; } #text table.calendar td { width: 68px; height: 68px; padding: 2px; border: 1px solid #211c15; border-left: 0; border-top: 0; background:#342c21; color:#fff; font-size: 1em; vertical-align: top; } #text table.calendar td a { text-decoration: none; } #text table.calendar td ul { padding:0; margin: .5em 0 0 .5em; font-size: 100%; list-style: none; } #text table.calendar td li { margin-bottom: .75em; font-size: 1.1em; line-height: 1.2; } #text table.calendar td li a{ text-decoration: underline; } #text table.calendar td li a:hover { text-decoration: none; } /* @end */