/* @override http://findinglifechurch.cpmpreview1.com/css/styles.css http://www.findinglifechurch.com/css/styles.css */ /*===== CLIENT: Finding Life FILE: styles.css - main CSS styles for staging site CREATED: 12/9/2008 MODIFIED: 12/18/2008 AUTHOR: Ben Otero (ben@churchplantmedia.com) =====*/ /* @group GLOBAL */ body { background:url(/images/body_bg.jpg) repeat; margin:0; padding:0; font-size:62.5%; font-family:helvetica, arial, verdana, sans-serif; color:#c2c2bf; } hr { display: none; } #skip { position: absolute; text-indent:-9999px; list-style: none; overflow-x:hidden; } a { overflow: hidden; } a:hover { } .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 CONTAINERS */ #outer-container { background:url(/images/outer_container_bg.jpg) repeat-x center top; } #container { margin:0 auto; width:800px; position:relative; } #content-wrap { background:url(/images/content_bg.gif) repeat-y; padding:0; margin-top:-3px;} #mainContent { padding:0 27px; background:url(/images/maincontent_bg.gif) no-repeat left top; min-height:500px; height:auto !important; height:500px; padding-top:4px; } #left-ornament, #right-ornament { display:block; position:absolute; margin:0; padding:0; } #left-ornament { width:49px; height:401px; background:url(/images/left_ornament.png) no-repeat; top:5px; left:-44px; } #right-ornament { width:31px; height:495px; background:url(/images/right_ornament.png) no-repeat; top:10px; right:-19px; } /* @end */ /* @group HEADER */ #header { position:relative; z-index:1000; background:url(/images/header_bg.jpg) no-repeat center top; } #header-inner { position:relative; height:114px; width:790px; margin:0 auto;} #header h1, #header h1 a { display:block; width:229px; height:105px; } #header h1 { background:url(/images/logo.png) no-repeat; margin:0 0 0 19px; padding:0; text-indent:-999em; } #header h1 a:focus { outline:none; } /* @end */ /* @group SERVICES */ #services { position:absolute; top:3px; right:32px; } #services p { margin:0; font-size:12px; color:#3b3b3b; } #services img { border:0; position:relative; top:6px; margin-left:7px; } /* @end */ /* @group NAVIGATION */ #nav, #nav * { margin:0; padding:0; list-style:none; } #nav { position:absolute; top:51px; right:23px; height:30px; } #nav li { float:left; } #nav li a { display:block; padding:0 13px; font:15px georgia, times, serif;color:#262626; text-decoration:none; text-transform:lowercase; line-height:30px; } #nav li.current, #nav li:hover { padding-left:5px; background:url(/images/nav_li.gif) no-repeat left top; } #nav li:hover a, #nav li.current a { padding:0 13px 2px 8px; background:url(/images/nav_li_a.gif) no-repeat right top; color:#fffdfd; line-height:28px; } #nav li ul { position:absolute; left:-5000px; z-index:1001; width:160px; background:#262626 } #nav li li, #nav li:hover li { float:none; display:block; background:none; padding:0; width:160px; } #nav li:hover li a { background:#262626; padding:5px 10px; width:140px; line-height:20px; } #nav li li a:hover { background:#151515; padding:5px 10px; } #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 { margin-left:-3px; } #nav li:hover ul li:hover ul{ margin:-30px 0 0 160px;} /* @end */ /* @group BANNER */ #banner { display:block; width:744px; height:205px; margin:3px 0 13px -13px; padding:13px 12px; background:url(/images/banner_bg.gif) no-repeat; position:relative; top:3px; } #home #banner { height:348px; background:url(/images/home_banner_bg.gif) no-repeat; margin:3px 0 20px -13px; padding:10px 13px; } /* @end */ /* @group PRIMARY CONTENT */ #primaryContent { float:left; width:530px; padding-top:10px; padding-bottom:20px; } #home #primaryContent { float:none; width:735px; padding:0; } #primaryContent p { font-size:1.3em; color:#c2c2bf; line-height:1.5em; } #home #primaryContent p { margin-top:8px; margin-bottom: 2px; } #primaryContent li, #primaryContent td { font-size:1.2em; color:#c2c2bf; } #primaryContent p *, #primaryContent li *, #primaryContent td * { font-size:1em; line-height:1; } #primaryContent a { color:#fe4d4d; } #primaryContent a:hover { text-decoration:none; } #primaryContent h2 { width:85%; } #home #primaryContent h2 { padding-bottom:11px; background:url(/images/heading_bg.gif) no-repeat left bottom; width:100%; margin-bottom:0; font:normal 1.5em georgia, times, serif; color:#fff; } #home #primaryContent h2 span { color:#fb4545; font-size:23px;} #primaryContent h3 { font-size:1.8em; color:#fb4545; font-family:georgia, times, serif; } #primaryContent h4 { font-size:1.6em; color:#fff; font-family:georgia, times, serif; margin-bottom: 12px;} #primaryContent h5 { font-size:1.6em; color:#fb4545; } #primaryContent h6 { font-size:1.5em; color:#fff; } #primaryContent img { border:0; } img.left-align { float:left; position:relative; left:-10px; margin:0 10px 10px 0; } img.right-align { float:right; position:relative; right:-10px; margin:0 0 10px 10px; } #subscribe { float:right; font-size:13px; position:relative; top:10px; padding:2px 0 2px 20px; background:url(/images/feed_icon.gif) no-repeat left center; } #primaryContent fieldset { border:0; } /* @end */ /* @group SECONDARY CONTENT */ #secondaryContent { float:right; width:205px; padding-top:13px; background:url(/images/subnav_bg.gif) no-repeat left 10px; min-height:50px; height:350px !important; height:350px; } #subnav, #subnav *, #mediabox { margin:0; padding:0; list-style:none; } #subnav, #mediabox { width:159px; padding:7px 23px 20px; } #subnav li.current a, #mediabox li#mb_links { font-size:15px; color:#fff; text-decoration:none; font-weight:bold; font-family:georgia, times, serif; line-height:38px; margin-bottom:15px; display:block; } #subnav li.current li a { display:block; line-height:27px; font:normal 13px helvetica, arial, verdana, sans-serif; color:#a5a5a3; } #subnav li.current li a:hover { text-decoration:underline } #subnav li.current li.current a { background:url(/images/subnav_current.gif) no-repeat; font-weight:bold; color:#fff; width:171px; margin-left:-13px; padding-left:13px; line-height:27px; } #subnav li.current li.current a:hover { text-decoration:none; } #subnav li.current li.current li a { background:none; color:#a5a5a3; font-weight:normal; padding-left:15px; line-height:20px; margin-bottom:0; } #subnav li li.current ul { margin-top:-10px; margin-left:10px; } #subnav li li li.current a, #subnav li.current li.current li a:hover{ text-decoration:underline; } /* @end */ /* @group QUICKLINKS */ #quicklinks { margin-bottom:30px; } .quicklink { float:left; padding:7px; width:225px; height:88px; background:url(/images/ql_bg.gif) no-repeat -239px bottom; margin:0 11px 0 0; } .quicklink:hover { background-position:left bottom } .quicklink img { border:none; } /* @end */ /* @group FOOTER */ #footer { padding:28px 0 50px 23px; background:url(/images/footer_bg.png) no-repeat left top; } #footer p { margin-top:0px; font-size:1.1em; color:#262626; float:left; width:50%; padding-left: 5px; } #footer a { color:#262626 } #footer a:hover { text-decoration:none; } #footer p#designed { float:right; width:auto; text-align:right; padding-right:47px; } /* @end */ /* @group SERMONS */ #filter { margin:0 0 1em; } #filter select { width:100px; margin-left:10px; } #filter a { margin-left:20px; } #primaryContent .sermonlist h4 { margin:0; padding:0 0 10px; font-family:helvetica, arial, verdana, sans-serif; } .sermonbox { position:relative; padding:10px 0; border-top:1px solid #1f1f1f; } .sermonbox a { text-decoration:underline; } .sermonbox a:hover { text-decoration:none; } .sermonbox h5 a { font-weight:bold; color:#027cc9;} .sermonbox h5 a:hover { color:#556c6b } #primaryContent .sermonbox p { margin:0; } #primaryContent .sermonbox h4 { padding:0; } #primaryContent p.date { font-size:11px; } .sermonbox ul { position:absolute; top:30px; right:10px; margin:0; padding:0; list-style: none;} .sermonbox li { float:left; display:inline; margin-right:10px; } .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 li { padding:2px 0 2px 20px; margin-bottom:1em;} #mediabox li a { font-size:1.2em; color:#fe4d4d } #mediabox li a:hover { text-decoration:none; } #mediabox li#mb_links { padding:0; } #mediabox li#mb_jukebox { background:url(/images/play_icon.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 */ #how-it-works { height: 30px; margin:1.5em 0; padding:0; list-style:none; background:#434343; } #how-it-works li { padding-left:20px; font-size:1.2em; display:block; line-height:30px; margin-right:20px; float:left; color:#fff; } #how-it-works li#how { font-weight:bold; padding-left:10px; } #how-it-works li#play { background:url(/images/play_icon_app.gif) no-repeat left center; } #how-it-works li#notes { background:url(/images/notes_icon_app.gif) no-repeat left center; } #how-it-works li#video { background:url(/images/video_icon_app.gif) no-repeat left center; } #how-it-works li#save { background:url(/images/download_icon_app.gif) no-repeat left center; } /* @end */ /* @group SORTING */ #sorting { padding:20px 23px; width:189px; } #sorting label { font-size:1.2em; display:block; margin-bottom: .5em; font-weight:bold; } #sorting select { width:85%; display:block; margin-bottom: 1.5em; } #sorting a { font-size:1.2em; color:#fff; } #sorting a:hover { text-decoration: none; } /* @end */ /* @end */ /* @group CALENDAR */ #events #primaryContent { width:100%; } #primaryContent table.calendar { margin-bottom: 25px; border-collapse: collapse; width:100%; border:1px solid #111; } #primaryContent table.calendar caption { padding-bottom: 10px; color: #fff; font-size: 1.4em; } #primaryContent table.calendar th { padding: 6px 0; background:#111111; color:#fff; font-size: 1.3em; font-weight: normal; } #primaryContent table.calendar td { width: 68px; height: 68px; padding: 2px; border: 1px solid #111; border-left: 0; border-top: 0; background:#212121; color:#55636b; font-size: 1em; vertical-align: top; } #primaryContent table.calendar td a { text-decoration: none; } #primaryContent table.calendar td ul { margin: .5em 0 0 .5em; padding:0;font-size: 100%; list-style: none; } #primaryContent table.calendar td li { margin-bottom: .75em; padding:0; font-size: 1.1em; line-height: 1.2; } #primaryContent table.calendar td li a { text-decoration: underline; } #primaryContent table.calendar td li a:hover{ text-decoration: none; } /* @end */ /* @group Rotator */ #rotator{ width:744px; height:348px; overflow: hidden; position:relative; } #controls{ position: absolute; z-index: 3; bottom: 16px; right: 44px; padding: 0 5px; background: url(/images/bg_controls_li.png); height: 38px; } #controls li{ float: left; font-size: 1em; padding: 0 3px; } #controls li.first, #controls li.last{ background: none; } #controls li a{ font-size: 1.3em; color: #fff; text-decoration: none; padding-top: 8px; display: block; font-weight: bold; height: 30px; padding: 12px 8px 0; } #controls li a:focus{ outline:none; } #controls li a#controls-prev{ width: 29px; height: 40px; padding: 0; text-indent: -9999px; background: url(/images/bg_controls_prev.png) no-repeat; } #controls li a#controls-nxt{ width: 29px; height: 40px; padding: 0; text-indent: -9999px; background: url(/images/bg_controls_next.png) no-repeat; } #controls li a.current{ background: url(/images/bg_controls_current.gif) no-repeat 0 8px; } /* @end */