/* @override http://vineyardwestphilly.org/css/styles.css http://www.vineyardwestphilly.org/css/styles.css */ /*===== SITE: Vineyard West Philly FILE: styles.css CREATED: 9/5/2008 MODIFIED: 2/26/2009 AUTHOR: Ben Otero (ben@churchplantmedia.com) =====*/ /* @group GLOBALS */ * { margin:0; padding:0; line-height:1; } body { background:url(/images/body_bg.jpg) repeat center top; font-size:62.5%; margin:0; padding:0; font-family:"Lucida Grande", "Lucida Sans Unicode", arial, verdana, sans-serif; color:#262626; } #outer-container { background:url(/images/outer_container_bg.jpg) repeat-x center 109px; } #container { margin:0 auto; width:900px; } #top-content { height:266px; } #mainContent { width:900px; clear:both; padding-bottom:25px; } #mainContent.wide { background:none; } .show { display:block; } .hidden, hr { display:none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block;} .column { float:left; } /* @end */ /* @group HEADER */ #header { position:relative; z-index:1000; height:109px; background:url(/images/header_bg.jpg) no-repeat center top; } #header-inner { width:900px; margin:0 auto; position:relative; } #header h1, #header h1 a { display:block; width:254px; height:78px; } #header h1 { margin:0; padding:0; background:url(/images/logo.gif) no-repeat; text-indent:-999em; position:absolute; top:19px;} #header h1 a:focus { outline:none; } #address { position:absolute; top:11px; right:6px; padding-bottom:3px; } #address p { margin:0; font-size:1.2em; color:#272723; } #address a { color:#944825 } #address a:hover { text-decoration:none; } #skip { position:absolute; top:-999em; } /* @end */ /* @group NAVIGATION */ #nav, #nav * { list-style:none;margin:0;padding:0;} #nav { height:43px; position:absolute; top:66px; right:0; } #nav li { cursor:pointer;float:left; display:inline; margin-left:2px; } #nav li a { display:block; padding:0 18px; line-height:43px; font-size:15px; font-weight:bold; color:#251110; text-decoration:none; text-transform:lowercase; } #home #nav_home a, #nav li.current a, #nav li:hover a { color:#fdfad2; background:url(/images/nav_bg.gif) repeat-x; } #nav li ul { display:block; position:absolute;left:-5000px;z-index:1001; width:140px; background:#3c2017; } /* @end */ /* @group PRIMARY CONTENT */ #primaryContent { float:left; position:relative; width:478px; padding-top:30px; margin-left:30px; margin-right:-30px; display:inline; } #primaryContent.wide { width:625px; margin-left:10px; } #primaryContent a { text-decoration:underline; color:#230f0e; } #primaryContent a:hover { text-decoration: none; } #primaryContent p, #primaryContent li, #primaryContent td { font-size:1.2em; line-height:1.5em; margin-bottom:1em; color: #33332b; } #primaryContent td { vertical-align: top; } #primaryContent p *, #primaryContent li *, #primaryContent td * { font-size:1em; } #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 { font-size:2em; color:#230f0e; } #primaryContent h3 { font-size:1.8em; color:#230f0e; } #primaryContent h4 { font-size:1.6em; color:#262626; clear:both } #primaryContent h4 b{ color:#b41014; } #home #primaryContent h4 { font-size:18px; color:#321810; margin:5px 0 1em; } #primaryContent h5 { font-size:1.5em; color:#262626} #primaryContent h6 { font-size:1.4em; color:#262626; } .article h4 { margin-bottom:0; } /* @end */ /* @end */ /* @group INTRO */ #intro { padding-right:20px; width:430px; position:relative; margin-top:32px; } #intro p { font-size:1.7em; color:#dcdeae; line-height:26px; font-weight:normal; margin-top:0; margin-bottom:1em; } #intro b { color:#fff; } #intro a.map { display:block; width:232px; height:36px; background:url(/images/map_btn.gif) no-repeat; text-indent:-999em; } a.map:focus { outline:none; } /* @end */ /* @group BANNER */ #banner { display:block; float:left; margin:11px -30px 0 1px; position:relative; background:url(/images/banner_bg.jpg) no-repeat; width:461px; height:246px; } #banner.wide{ background:none; width:900px; float:none; margin:11px 0 0;} #banner p { background:url(/mediafiles/subpage-header.jpg) no-repeat; display:block; width:436px; height:222px; padding:0; text-indent:-999em; position:relative; top:12px; left:12px; z-index:1; } #banner.wide p { width:900px; left:0; } #home #banner p { background:url(/mediafiles/home-header.jpg) no-repeat; } /* @end */ /* @group SECONDARY CONTENT */ #secondaryContent { float:right; position:relative; width:206px; } /* @group SUBNAV */ #subnav { width:170px; min-height:350px; position:relative; margin-left:-30px; background:url(/images/subnav_bg.jpg) no-repeat right top; } #subnav ul { margin:0; padding:13px 0 0; list-style:none; width:159px; } #home #subnav ul { padding-top:24px; } #subnav li { text-align:right; } #subnav li a { padding:8px 0; height:17px; line-height:38px; font-size:1.1em; text-decoration:none; color:#2b2b24; } #home #subnav li a { font-size:1.4em; } #subnav li a:hover { color:#230f0e; } #subnav li.active a { color:#230f0e; height:20px; background:url(/images/subnav_arrow.gif) no-repeat right center; position:relative; left:19px; padding-right:20px; font-weight:bold; } #subnav ul ul { padding:0; background:none; } #articles #snav_resources a, #sermons #snav_resources a, #subnav li.current a { background:#a9be54; padding:5px 15px; text-transform:uppercase; color:#fefefd; } #articles #snav_resources li a, #sermons #snav_resources li a, #subnav li.current li a { background:none; padding:5px 10px 15px; color:#2b2b24; line-height:13px; display:block; } #articles #snav_resources li#snav_resources_articles a, #sermons li#snav_resources_sermons a, #subnav li li.current a { color:#230f0e; font-weight:bold; background:url(/images/subnav_arrow.gif) no-repeat right center; position:relative; left:19px; padding-right:30px; } /* @end */ /* @group EVENTLIST */ #sorting, #eventlist { margin-top:25px; padding:0 0 30px; min-height:260px; height:auto !important; height:290px; background:url(/images/upcoming_events_bg.gif) no-repeat left 35px;; } #sorting h3, #eventlist h3 a { display:block; width:207px; height:35px; background:url(/images/upcoming_events_h3.gif) no-repeat; text-indent:-999em; margin-bottom:0; } #eventlist h3 a:focus {outline:none; } .event { padding:12px 12px 12px 14px; border-top:2px solid #e5dda9; } .event.first { border:0; } .event h4 { font-size:1.2em; margin-bottom:8px; margin-top:0; display:block; } .event h4 a { color:#3e1c19; text-decoration:none; padding:4px; margin:-4px; float:left; } .event h4 a:hover { text-decoration:underline; } .event h4 span { float:right; font:10px arial, verdana; text-transform:uppercase; color:#5f5e3e; } .event p { font-size:1.1em; color:#33332b; margin-bottom:5px; } .event:hover { background:#f3eecb; } .event:hover h4 a { background:#c46929; color:#fff; text-decoration:underline; } /* @end */ /* @end */ /* @group FOOTER */ #footer { position:relative; padding-bottom:25px;} #footer-inner { padding:0 18px; width:864px; height:42px; background:url(/images/footer_bg.jpg) no-repeat; margin:0 auto; } #footer p { width:40%; float:left; font-size:1.1em; color:#454539; margin:0; padding:0; line-height:42px; } #footer p#designed { float:right; width:auto;} #footer a { color:#ab5519; text-decoration:none; } #footer a:hover { text-decoration:underline; } /* @end */ /* @group SERMONS */ #filter { margin-top:2em; } #filter select { width:200px; 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 #ccc591; } .sermonbox a { text-decoration:underline; } .sermonbox a:hover { text-decoration:none; } #primaryContent .sermonbox h5 { margin:0 0 4px; width:75%; } #primaryContent .sermonbox h5 span { font-size:10px; margin-left:10px; } #primaryContent .sermonbox p { margin:0;} .sermonbox ul { position:absolute; top:10px; right:0; 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 */ #text { margin-top:2em; } #primaryContent #byline { margin:10px 0 0; padding:0; list-style:none; } #primaryContent #mediabox li, #primaryContent #byline li { margin:0; } #primaryContent #mediabox { padding:10px; margin:5px 0 1em 0; list-style:none; height:30px; background:#f2edc6; } #primaryContent #mediabox li{ padding:0 10px 0 18px; margin:0 2px 0 0; float:left; display:block; line-height:30px; margin-bottom:0; } #mediabox li#mb_links { margin-right:10px; padding-left:0; } #mediabox li#mb_jukebox { background:url(/images/play_icon.gif) no-repeat left center; } #mediabox li#mb_download { background:url(/images/download_icon.gif) no-repeat left center; } #mediabox li#mb_notes { background:url(/images/notes_icon.gif) no-repeat left center; } #mediabox li#mb_video { background:url(/images/video_icon.gif) no-repeat left center; } #mediabox li#mb_podcast { background:url(/images/feed_icon.gif) no-repeat left center; } /* @end */ /* @group HOW IT WORKS */ #primaryContent #how-it-works { list-style:none; height:30px; margin:0 -10px 1.5em; padding:0 10px; background:#f2edc6; } #how-it-works li { padding-left:20px; font-size:1.2em; float:left; display:block; line-height:30px; margin:0 15px 0 0; } #how-it-works li#how { font-weight:bold; padding-left:0; } #how-it-works li#play { background:url(/images/play_icon.gif) no-repeat left center; } #how-it-works li#notes { background:url(/images/notes_icon.gif) no-repeat left center; } #how-it-works li#video { background:url(/images/video_icon.gif) no-repeat left center; } #how-it-works li#download { background:url(/images/download_icon.gif) no-repeat left center; } /* @end */ /* @group SORTING */ #sorting { padding:0 12px 30px 14px; } #sorting h3 { background:url(/images/sorting_h3_bg.gif) no-repeat; margin-left:-14px; margin-bottom:1.5em;} #sorting label, #sorting select { display:block; } #sorting label { margin-bottom:.5em; } #sorting select { margin-bottom:1.5em; width:98%; } #sorting a { font-size:1.2em; color:#ab5519; } /* @end */ /* @end */ /* @group CALENDAR */ #primaryContent table.calendar { margin-bottom: 25px; border-collapse: collapse; border-left:1px solid #fdfbe5; width:95%;} #primaryContent table.calendar caption { padding-bottom: 10px; color:#33332b; font-size: 1.4em; } #primaryContent table.calendar th { padding: 6px 0; background: #9fb946; color: #fdfbe5; font-size: 1.3em; font-weight: normal; } #primaryContent table.calendar td { width: 68px; height: 68px; padding: 2px; border: 1px solid #fdfbe5; border-left: 0; border-top: 0; color: #262626; font-size: 1em; vertical-align: top; background:#f2edc6; } #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 */