/* @override http://www.soteriachurch.org/css/styles.css http://soteriachurch.org/css/styles.css */ /*===== CLIENT: Soteria Church FILE: styles.css - main CSS styles for staging site CREATED: 12/13/2008 UPDATED: 12/17/2008 AUTHOR: Ben Otero (ben@churchplantmedia.com) =====*/ /* @group GLOBAL */ body { background:url(/images/body_bg.jpg) repeat center top; margin:0; padding:0; font-size:62.5%; font-family: Arial, Helvetica, Geneva, sans-serif; color:#fffffe; } hr { display: none; } #skip { position: absolute; text-indent: -9999px; list-style: none; overflow-x:hidden; } #outer-container { background:url(/images/outer_container_bg.jpg) no-repeat center top; } #container { margin:0 auto; width:780px; } #mainContent { position:relative; background:url(/images/content_bg2.gif) repeat-y; padding:0 13px; z-index:20} #home #mainContent { padding:14px 19px 0; } 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; z-index:1000; height:128px; width:780px; background:url(/images/header_bg.jpg) no-repeat; } #header h1, #header h1 a { display:block; width:206px; height:58px; } #header h1 { margin:0; padding:0; background:url(/images/logo.png) no-repeat; text-indent:-999em; position:absolute; top:20px; left:18px; } #header h1 a:focus { outline:none; } #tagline { display:block; width:286px; height:15px; background:url(/images/tagline.png) no-repeat; text-indent:-999em; margin:0; position:absolute; top:59px; right:12px; } #services { position:absolute; top:4px; right:12px } #services p { font:12px helvetica, arial, verdana, sans-serif; color:#ddd5ba; margin:0;} #services b, #services strong { color:#fff; } #services img { border:0; position:relative; top:4px; margin-left:7px;} /* @end */ /* @group NAVIGATION */ #nav, #nav * { list-style:none; margin:0; padding:0} #nav { height:27px; position:absolute; top:97px; left:115px;} #nav li { float:left; } #nav li:hover, #nav li.current { background:url(/images/nav_bg.gif) no-repeat center top; } #nav li a { display:block; font-size:1.3em; padding:0 19px 0 24px; line-height:27px; color:#d2cdbd; text-decoration:none; text-transform:lowercase; background:url(/images/nav_li_bg.gif) no-repeat left center; } #nav li#nav_home a { background:none; } #nav li.current a, #nav li a:hover { color:#fff; } #nav li ul { position:absolute; left:-5000px; z-index:1001; width:170px; padding-top: 2px; margin-left: 10px; } #nav li li:hover, #nav li li { border:none; background:#1c1a19; display:block; padding:5px 0 0; } #nav li:hover li a, #nav li li a { background:#1c1a19; display:block; padding:0 0 0 12px; width:158px; color: #fff; } #nav li li a:hover { background:#322f2d; } #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 BANNER */ #banner { display:block; width:765px; height:176px; background:url(/images/banner_bg.gif) no-repeat; margin:0 -3px; padding:12px 0 0 12px; } #rotator, #home #banner { padding:10px 0 0 12px; height:353px; width:765px; background:url(/images/home_banner_bg.gif) no-repeat; margin:-10px -8px -1px; } #rotator { position:relative; } #rotator img { border:0; position:absolute; top:10px; left:12px; display:none; } /* @end */ /* @group HOME */ #home .clearfix { background:url(/images/home_content_bg.gif) no-repeat left 2px; margin:5px -14px; padding:0 14px; } #home #quicklinks.clearfix { background:none; } #home .clearfix h3 { margin:5px 0 7px 3px; text-transform:lowercase; font-weight:normal; font-size:14px; } /* @group FEATURED EVENTS */ #upcoming-events { float:left; width:162px; margin-right:11px; margin-left:-4px;} #upcoming-events h3 { margin-bottom:10px; } .event { clear:both; padding:7px 0; border-bottom:1px solid #4d3a2b; } #upcoming-events .date { display:block; width:33px; height:35px; background:url(/images/date_bg.gif) no-repeat; float:left; margin-right:7px; } .date span { display:block; text-align:center; font-weight:bold; } .date .month { font:9px helvetica, arial, verdana, sans-serif; color:#211f1e; text-transform:uppercase; margin:1px 0 0; position:relative; } .date .day { font-size:15px; color:#211f1e; } .event h4 { font-size:12px; margin:3px 0; } .event h4 a { color:#fffffe; text-decoration:none; } .event h4 a:hover { text-decoration:underline; } .event p { margin:0; font:11px helvetica, arial, verdana, sans-serif; color:#d2cdbd; } /* @end */ /* @group QUICKLINKS */ #quicklinks { float:left; width:432px; } #home #quicklinks h3 { margin-left:6px; margin-top: 0px; } .ql { float:left; padding:11px 7px 0; height:138px; width:120px; margin-right:8px; background:url(/images/ql_bg.gif) no-repeat right bottom; } .ql:hover { background-position:left bottom; } .ql img { border:none; display:block; margin-bottom:5px;} .ql a { font-size:11px; color:#fff; text-transform:uppercase; text-decoration:none; } /* @end */ /* @group FEATURED SERMONS */ #featured-sermons { float:left; width:150px; margin-right:-14px; } #featured-sermons h3 { position:relative; } #featured-sermons h3 a { display:block; width:11px; height:10px; background:url(/images/rss_icon.gif) no-repeat; text-indent:-999em; position:absolute; top:2px; right:3px; } #featured-sermons .sermon { padding-bottom:10px; } #featured-sermons .first { border-bottom:1px solid #4d3a2b; width:140px; } #featured-sermons h4 { font-size:13px; margin:1em 0 0; font-weight:normal; } #featured-sermons h4 a { color:#fff; text-decoration:none; } #featured-sermons p { font:11px helvetica, arial, verdana, sans-serif; color:#cbc5b5; margin:0 0 8px } #featured-sermons .play { display:block; width:63px; height:19px; background:url(/images/listen_btn.gif) no-repeat; text-indent:-999em; margin-left:2px; } /* @end */ /* @end */ /* @group PRIMARY CONTENT */ #primaryContent { float:left; padding:0 12px; width:526px; position:relative; } #primaryContent.wide { width:725px; } #primaryContent h2 { display:block; line-height:33px; color:#fff; font-size:1.8em; font-weight:normal; background:#392a1f; margin:7px -12px 1em; padding:0 12px; } #primaryContent h3 { font-size:1.6em; } #primaryContent h4 { font-size:1.5em; color:#d8a80c; } #primaryContent h5 { font-size:1.4em; color:#fff; background:#392a1f; font-family:arial, verdana, sans-serif; padding:0 12px; line-height:24px; } #primaryContent h6 { font-size:1.3em; } #primaryContent p, #primaryContent li, #primaryContent td { font-size:1.3em; color:#fff; line-height:17px; } #primaryContent p *, #primaryContent li *, #primaryContent td * { font-size:1em; line-height:1} #primaryContent a { color:#d8a80c; } #primaryContent a:hover { text-decoration:none; } #primaryContent #subscribe { background:url(/images/feed_icon_app.gif) no-repeat; position:absolute; top:16px; right:10px; font-size:1.3em; padding-left:20px; } /*#primaryContent img { border:5px solid #765c48; }*/ #primaryContent img.left-align { float:left; margin:0 10px 10px 0; position:relative; left:-10px; } #primaryContent img.right-align { float:right; margin:0 0 10px 10px; position:relative; right:-10px; } #primaryContent img.no-border, #primaryContent img.mcms_stats { border:0; } /* @end */ /* @group SECONDARY CONTENT */ #secondaryContent { float:right; padding:0 10px; width:180px; background:url(/images/sidebar_bg.gif) repeat-y; margin-top:7px;} #secondaryContent h3 { font-size:14px; color:#d2cdbd; font-weight:normal; text-transform:lowercase; margin-top: 40px; } #secondaryContent p.bottom { display:block; width:199px; padding-top:20px; height:38px; margin:0 -10px; background:url(/images/box_btm.gif) no-repeat left bottom; } /* @group SIDEBAR EVENTS */ #secondaryContent #upcoming-events { float:none; padding:10px; width:160px; } #secondaryContent #upcoming-events h3{ padding-left:3px; } /* @end */ /* @end */ /* @group SUBNAV */ #subnav, #subnav * { margin:0; padding:0; list-style:none; } #subnav { margin:0 -10px; padding:13px 25px 0; list-style:none; background:url(/images/subnav_bg.gif) no-repeat;} #subnav li.current a { display:block; line-height:35px; padding:0; font-weight:bold; color:#fff; text-decoration:none; font-size:15px; margin-bottom:12px; } #subnav li.current li a { line-height:27px; font-size:13px; font-weight:normal; color:#ad9c85; margin-bottom:10px; } #subnav li li a:hover { color:#fff; } #subnav li li.current a { background:url(/images/subnav_current.gif) no-repeat left top; color:#fff; display:block; line-height:27px; position:relative;left:-10px; padding:0 10px; width:149px; } /* @end */ /* @group FOOTER */ #footer { background:url(/images/footer_bg.gif) no-repeat center top; margin:0; padding:40px 10px; position:relative; top:-10px; } #home #footer { top:-20px; } #footer p { font-family:helvetica, arial, verdana, sans-serif; font-size:1.1em; color:#7a746f; margin:0; padding:0; } #foot-info{ float: left; } #foot-info p{ margin-bottom: 5px; } #footer a { color:#fff; } p#foot-twitter{ float: right; width: 213px; height: 25px; } p#foot-twitter a{ display: block; height: 25px; background: url(/images/bg_twitter.png); text-indent: -9999px; } p#foot-cobble{ float: right; width: 151px; height: 25px; margin-right: 10px; } p#foot-cobble a{ display: block; height: 25px; background: url(/images/cobblestone-icon.gif); text-indent: -9999px; } /* @end */ /* @group SERMONS */ #filter { margin-top:2em; } #filter select { width:100px; margin-left:10px; } #filter a { margin-left:20px; } #primaryContent .sermonlist h4 { margin:0; padding:10px 0; } .sermonbox { position:relative; padding:10px 0; border-top:1px solid #4a3628; } .sermonbox a { text-decoration:underline; } .sermonbox a:hover { text-decoration:none; } #primaryContent .sermonbox h5 { margin:0; padding:0; background:none; } #primaryContent .sermonbox h5 span { font-size:10px; margin-left:10px; } .sermonbox h5 a { font-weight:bold; color:#027cc9;} .sermonbox h5 a:hover { color:#556c6b } #primaryContent .sermonbox p { margin:0;} .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.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 { padding:20px 10px; margin:0; list-style:none; background:url(/images/box_top.gif) no-repeat; } #mediabox li { padding:2px 0 2px 20px; font-size:12px;line-height: 20px; } #mediabox li a { color:#fff; text-decoration:none; } #mediabox li a:hover { text-decoration:underline; } #mediabox li#mb_links { color:#d2cdbd; margin:-10px -10px 0px; padding:10px; font-size:13px; text-transform:lowercase; } #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:2.5em 0; padding:0; list-style:none; background:#392a1f; } #how-it-works li { padding-left:20px; font-size:1.2em; display:block; line-height:30px; margin-right:20px; float:left; } #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:0 15px 25px; } #sorting label { font-size:1.2em; display:block; margin-bottom: .5em; color:#d2cdbd; text-transform:lowercase; } #sorting select { width:100%; display:block; margin-bottom: 1.5em; } #sorting a { color:#fff; font-size:1.2em; } #sorting a:hover { text-decoration: none; } /* @end */ /* @end */ /* @group CALENDAR */ #primaryContent table.calendar { margin-bottom: 25px; border-collapse: collapse; width:100%;} #primaryContent table.calendar caption { padding-bottom: 10px; color: #fff; font-size: 1.4em; } #primaryContent table.calendar th { padding: 6px 0; background:#392a1f; color:#fff; font-size: 1.3em; font-weight: normal; } #primaryContent table.calendar td { width: 68px; height: 68px; padding: 2px; border: 1px solid #5e4736; border-left: 0; border-top: 0; background:#765c48; color:#fff; 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; 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 FORMS */ #mainContent fieldset { margin:0; padding:0; border:0; } /* @end */