/* @override http://www.graceevfree.org/css/styles.css */ /*===== CLIENT: Grace Free Evangelical Church FILE: styles.css - main CSS styles for staging site CREATED: 8/5/2008 MODIFIED: 3/3/2009 AUTHOR: Ben Otero (ben@churchplantmedia.com) =====*/ /* @group GLOBAL */ body { background:#917b35 url(/images/body_bg.jpg) repeat-x; margin:0; padding:0; font-size:62.5%; font-family:arial, geneva, sans-serif; color:#221c02; } hr { display: none; } #skip { position: absolute; text-indent: -9999px; list-style: none; overflow-x:hidden; } #container { margin:0 auto; width:706px; position:relative; } * html #container { } a { overflow: hidden; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block;} .hidden { display:none; } /* 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; width:706px; height:160px; background:url(/images/header_bg.jpg) no-repeat right top; margin:35px 0 0; } #header h1, #header h1 a { display:block; width:175px; height:103px; } #header h1 { background:url(/images/logo.gif) no-repeat; width:175px; height:103px; text-indent:-999em; margin:0; padding:0; position:absolute; top:15px; left:21px; } #header h1 a:focus { outline:none; } #header img.login-button {position:absolute;top:0px;left:580px;border-width:0px;} /* @end */ /* @group NAVIGATION */ #nav, #nav * { list-style:none; margin:0; padding:0} #nav { position:absolute; top:100px; left:212px; z-index:2000; height:30px; } #nav li { float:left; display:inline; } #nav li a { display:block; padding:0 10px; text-indent:-999em; line-height:30px;} #nav li a:focus { outline:none; } #nav_home a { width:50px; } #nav_about-us a { width:65px; } #nav_ministries a { width:75px } #nav_missions a { width:70px } #nav_tools-for-growth a { width:110px } #nav li li { float:left; display:inline; } #nav li li a { float:left; text-indent:0; width:auto; font-size:14px; color:#fff; text-decoration:none; padding:0 8px; line-height:30px; } #nav li li a:hover { text-decoration:underline; } #nav li ul { position:absolute; left:-5000px; z-index:1001; padding-top:0; } #nav li li ul { display:none; } #nav li ul ul { display:none; } /* @end */ /* @group BANNER */ #banner { display:block; width:706px; height:251px; } #banner { height:251px; background:url(/images/sub_banner_bg.jpg) no-repeat right top; } #banner p { display:block; margin:0 0 0 4px; padding:0; width:702px; height:243px; background:url(/mediafiles/banner-image.jpg) no-repeat } #rotator { display:block; margin-left:4px; position:relative; width:702px; height:251px; background:url(/images/sub_banner_bg.jpg) no-repeat right top; z-index: 2; overflow: hidden;} #rotator img { border:0; } /* @end */ /* @group MAIN CONTENT */ #mainContent { background:url(/images/maincontent_bg.gif) repeat-y 4px top; padding-bottom:25px; } #mainContent.wide { background:url(/images/wide_content_bg.gif) repeat-y left top; } #content-wrap, #wrapper { background:url(/images/wrapper_bg.gif) no-repeat; } #intro { padding-top:15px; padding-left:10px; margin-bottom:7px;} #intro h2 { margin:0; } #intro p { margin-bottom:0; } #services { display:block; height:28px; background:url(/images/services_bg_alt.gif) no-repeat; position:relative; left:-13px; margin-right:-12px; padding:12px 15px 0 20px; } #services p { margin:0; line-height:40px; font-size:1.45em; color:#6a8c1c; text-indent:-999em; } #services a { color:#6a8c1c; font-size:11px; text-decoration:none; display:block; width:175px; height:20px; text-indent:-999em; position:absolute; top:8px; right:11px; } #services a:hover { text-decoration:underline; } .vid_box { float:right; text-align:center; width:200px; height:180px; padding:5px; margin-right:5px; margin-bottom:5px; } a .vid_box { text-decoration:none; border-width:0px; background-color:#d2d6a9; } a:hover .vid_box { background-color:#6a8c1c; color:#d2d6a9; } /* @end */ /* @group PRIMARY CONTENT */ #primaryContent { float:right; width:440px; padding:0 15px 50px 0; position:relative; } .wide #primaryContent { float:none; width:674px; padding-top:20px; padding-left:15px; } .wide #primaryContent h2{ margin-top:0;} #home #primaryContent { width:465px; padding:0; } #primaryContent li, #primaryContent p, #primaryContent td { font-size:1.25em; color:#221c02; line-height:1.4em; } #primaryContent li *, #primaryContent p *, #primaryContent td * { font-size:1em; line-height:1; } #primaryContent h1 { font-size:2.5em; color:#587e04; font-family:arial, geneva, sans-serif; font-weight:normal; } #primaryContent h2 { font:normal 1.875em "palatino linotype", "Book Antiqua", palatino, "Times New Roman", serif; } #primaryContent h3 { font:normal 1.67em arial, geneva, sans-serif; color:#7e6004; } #primaryContent h4 { font-size:1.25em; color:#587e04; } #primaryContent h5 { font-size:1.45em; font-weight:normal; color:#d16200; } #primaryContent h6 { font-size:1.25em; color:#221c02; } #primaryContent .article h4 { font-weight:normal; } #primaryContent .article h4 a { font-weight:normal; } #primaryContent a { color:#587e04; font-weight:bold; } #primaryContent a:hover { text-decoration:none; } #primaryContent img { border:0; } img.left-align { float:left;position:relative; left:-10px; } img.right-align { float:right; position:relative; right:-10px; } .column { float:left; width:208px; padding:0 10px; } .column h2 { margin:0; } #newtograce { width:203px; padding:0 15px 0 10px; } #newtograce p { font-size:12.5px; margin-bottom:5px; } #newtograce ul { margin:20px 0 0; padding:0; list-style:none; } #newtograce li { background:url(/images/bullet.gif) no-repeat left center; padding-left:17px; font-weight:bold; margin-bottom:1.1em;} #newtograce li a { color:#587e04; font-size:1.2em; text-decoration:none; } #newtograce li a:hover { text-decoration:underline; } /* @group BLOG */ #blog p.subscribe { position:absolute; top:14px; right:15px; padding-left:20px; background:url(/images/feed_icon.gif) no-repeat; margin:0;} #blog #secondaryContent { padding-left:15px; padding-right:10px; width:210px; } #blog #ad1,#blog #ad2,#blog #ad3, #blog #ad4 { margin-left:-15px; margin-right:-10px; } #blog #secondaryContent h3 { font-size:1.3em; } #blog #secondaryContent ul { margin:0; padding:0; list-style:none; } #blog #secondaryContent li a { font-size:1.25em; color:#587e04; } #blog #secondaryContent li a:hover { text-decoration:none; } .post h4 { margin-bottom:0; } .post p.byline { margin-top:0; font-style:italic; } /* @end */ /* @group RECENT-SERMONS */ #recent-articles, #recent-sermons { position:relative; top:-7px; width:235px; margin-left:-8px; background:#eaedc1; } #recent-articles h3, #recent-sermons h3 { display:block; margin:0; background:#000; border-top:3px solid #710000; color:#fff; line-height:31px; padding-left:9px; width:226px; } #recent-articles a.subscribe, #recent-sermons a.subscribe { position:absolute; top:9px; right:7px; display:block; width:80px; height:16px; background:url(/images/subscribe_btn.gif) no-repeat; text-indent:-999em; } #recent-sermons #current { border-bottom:2px solid #000; padding:0; } #recent-sermons #current p { margin:0; padding:0; line-height:1 } #recent-sermons #current img{ border:0; display:block; margin:0; padding:0;} #recent-sermons h4 { font-size:1.25em; color:#817439; font-weight:normal; text-transform:uppercase; padding:0 0 8px 9px; background:url(/images/dotted_bg.gif) repeat-x left bottom; margin:12px 0 8px; } #recent-sermons #last-sunday h4 { border-top:1px dotted #817439; padding-top:7px; } .sermon { margin-bottom:1.5em;} #recent-sermons h5, #recent-articles h4 { margin:0; padding-left:9px; font-size:1.1em; } #recent-sermons h5 a, #recent-articles h4 a { color:#710000; text-decoration:none; } #recent-sermons h5 a:hover { text-decoration:underline; } #recent-sermons p { padding-left:9px; margin:0} #recent-sermons p.summary { font-style:italic; font-size:1.1em; color:#221c02; margin-bottom:22px; } .sunday { position:relative; padding-right:15px; } .sunday ul { list-style:none; padding:0 0 20px 5px; } .sunday li a { float:left; padding:4px 0 4px 20px; display:block; margin-right:5px; } #last-sunday a.play, .sunday li a.play { background:url(/images/play_icon.gif) no-repeat left center; } #last-sunday a.video, #last-sunday .vimeo_video a, .sunday .vimeo_video { background:url(/images/video_icon.gif) no-repeat left center;} #last-sunday a.notes, .sunday li a.notes { background:url(/images/notes_icon.gif) no-repeat left center;} #last-sunday { border-bottom:1px dotted #817439; padding-bottom:10px; padding-right:20px; margin-top:27px; } #last-sunday h4 { margin-right:-20px; } #last-sunday p { font-size:11px; margin-left:15px } #last-sunday a { color:#6a5c20; text-decoration:none; padding:4px 0 4px 20px; display:block; } #last-sunday a.download { float:left; margin-right:25px; background:url(/images/download_icon.gif) no-repeat; } #last-sunday a.video { float:left; } #last-sunday a:hover { text-decoration:underline; } #last-sunday p a { width:30%; float:left; } /* @end */ /* @group RECENT ARTICLES */ #recent-articles h3 { border-color:#b97e00; } #recent-articles { } .article { padding:10px 9px 16px; border-top:1px dotted #817439; } #primaryContent .article { border:0; } #articles .article { padding:10px 0 16px; } #articles .article { border:0; } .article.first { border:0; } .article h4 { margin:0; } .article h4 a { color:#710000; text-decoration:none; } #articles .article h4 a:hover { text-decoration:underline; } #recent-articles .article h4 { padding-left:0; font-size:12px; font-weight:bold; } #recent-articles .article h4 a { font-weight:bold; } #recent-articles h4 a:hover { text-decoration:underline; } #recent-articles .article p { margin:0; color:#6a5c20; font-size:12px; } #recent-articles .article p span{ float:right; } /* @end */ /* @end */ /* @group SECONDARY CONTENT */ #secondaryContent { float:left; width:235px; margin-left:4px; padding-top:6px; padding-bottom:25px; } #secondaryContent h3 { font:normal 1.67em arial, geneva, sans-serif; color:#221c02; } #ad1, #ad2, #ad3, #ad4 { display:block; width:229px; height:62px; margin-bottom:9px; } #ad1 img, #ad2 img, #ad3 img, #ad4 img { border-width:0px; } #ad1 { background:url(/images/sidebar-ad1.gif) no-repeat; } #ad2 { background:url(/images/sidebar-ad2.gif) no-repeat; } #ad3 { background:url(/images/sidebar-ad3.gif) no-repeat; } #ad4 { background:url(/images/sidebar-ad4.gif) no-repeat; } #home #grace-wire input.text { width:150px; } #gracecast { padding:0; } #gracecast p { margin: 0; } #gracecast img { border:none; margin:0; padding:0; position:relative; left:-10px;} /* @group SUBNAV */ #subnav, #subnav * { margin:0; padding:0; list-style:none; } #second, #third { padding:16px 0 0 18px; margin-bottom:50px; } #subnav li a { display:block; font-size:1.6em; color:#221c02; text-decoration:none; line-height:25px; } #subnav li a:hover { text-decoration:underline; } #subnav li.current a { font-size:1.8em; color:#587e04; } #third li, #second li li { display:none; } #third li.current, #third li.current li { display:block; } #third li.current a { font-weight:bold; padding-right:20px; color:#224e0c; background:url(/images/down_arrow.gif) no-repeat right center; display:inline; } #third li.current li a { font-size:16px; color:#221c02; font-weight:normal; background:none; display:block; } #third li.current li.current a { color:#224e0c; } /* @end */ /* @group UPCOMING EVENTS */ #upcoming-events { padding:15px 25px; background:url(/images/events_bg.gif) repeat-y; margin-bottom:35px; } #upcoming-events .event { padding:10px 0; border-bottom:1px dashed #d3be5f; } #upcoming-events .last { border:0; } #upcoming-events h3 { color:#d3be5f; margin:0; } #upcoming-events h4 { margin:3px 0 0; font-size:1.3em;} #upcoming-events h4 a { color:#d3be5f; } #upcoming-events h4 a:hover { text-decoration:none; } #upcoming-events p { color:#d3be5f; font-size:1.1em; margin-top:4px;} /* @end */ /* @group GRACE WIRE */ #grace-wire { background:url(/images/gracewire_bg.gif) repeat-y; padding:13px 0 13px 27px; } /* @end */ /* @end */ /* @group FOOTER */ #footer { margin-top:-10px; padding-bottom:50px; } #footer-inner { width:706px; margin:0 auto; background:url(/images/footer_bg.png) no-repeat; height:22px; position:relative; } #footer p { text-indent:-999em; } #footer #relationship { display:block; width:200px; height:25px; position:absolute; top:7px; left:25px; text-indent:-999em; } #footer #relationsip:focus { outline:none; } .address-area {text-align:center; color:#d3be5f; margin-top:12px; } .address-area a {color:#d3be5f;} /* @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 #baae79; } .sermonbox a { text-decoration:underline; } .sermonbox a:hover { text-decoration:none; } #primaryContent .sermonbox h5 { margin:0 0 3px; font-size:1.2em; } #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;} #primaryContent .sermonbox p a { font-weight:normal; } .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, .sermonbox li.vimeo_video a { background:url(/images/video_icon.gif) no-repeat; } .sermonbox li a:focus { outline:none; } /* @group MEDIA BOX */ #text { } #byline { margin:10px 0 0; padding:0; list-style:none; } #mediabox { float:right; padding:10px; margin:-15px 0 0 10px; list-style:none; } #mediabox li { padding:2px 0 2px 20px; } #mediabox li#mb_links { background:#221c02; color:#fff; margin:-10px -10px 10px; padding:10px; } #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, #mediabox li.vimeo_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 { float:left; } #how-it-works h3 { } #how-it-works ul { margin:2.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.gif) no-repeat; } #how-it-works li#notes { background:url(/images/notes_icon.gif) no-repeat; } #how-it-works li#video { background:url(/images/video_icon.gif) no-repeat; } #how-it-works li#save { background:url(/images/download_icon.gif) no-repeat; } /* @end */ /* @group SORTING */ #sorting { padding-left:18px; } #sorting label, #sorting select { display:block; } #sorting select { width:90%; margin-bottom:1.5em;} #sorting label { margin-bottom:0.5em; font-size:1.25em; font-weight:bold; } #sorting a { font-size:1.25em; color:#587e04; font-weight:bold; } #sorting a:hover { text-decoration:none; } #sorting ul { margin:0; padding:0; list-style:none; } #sorting li { margin-bottom:.5em; } /* @end */ /* @end */ /* @group CALENDAR */ #primaryContent table.calendar { margin-bottom: 25px; border-collapse: collapse; } #primaryContent table.calendar caption { padding-bottom: 10px; color: #221c02; font-size: 1.4em; } #primaryContent table.calendar th { padding: 6px 0; background:#224e0c; color:#fff; font-size: 1.3em; font-weight: normal; } #primaryContent table.calendar td { width: 68px; height: 68px; padding: 2px; border: 1px solid #e2e6b6; border-left: 0; border-top: 0; background:#dad2ae; color:#221c02; 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: none; font-weight:normal;} #primaryContent table.calendar td li a:hover{ text-decoration: underline; color:#000000;} /* @end */ #secondaryContent table.calendar { border: 1px solid #e2e6b6; border-right: 0; border-bottom: 0; border-collapse: collapse; background: #224e0c; font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; margin:0 auto; } #secondaryContent table.calendar caption { color: #221c02; font-size: 1.2em; } #secondaryContent table.calendar th { background: #221c02; padding: 3px 0; color: #fff; font-size: 1.1em; font-weight: normal; text-align: center; } #secondaryContent table.calendar td { width: 28px; height: 28px; border: 1px solid #fff; border-top: 0; border-left: 0; color: #FEFEFB; font-size: 1.1em; font-weight: normal; text-align: center; } #secondaryContent table.calendar a { display: block; padding: 7px; background: #221c02; color: #BFBB65; text-decoration: none; } /* TRAILDIVS */ #traildiv { position: absolute; top: 0px; left: 0px; z-index: 999; visibility: hidden; width: 100px; height: 100px; color: #FFF;} #traildiv ul { padding: .75em; padding: 5px 0 0; border: 3px solid #221c02; background: #fff; font-size: 1.1em; list-style:none; } #traildiv li { color: #221c02; margin-left: 1em; margin-bottom: .75em; } #traildiv a { color: #221c02; text-decoration: none; } /* @group MESSAGE BOARDS */ #boards h2 a { font-size:11px; color:#7e6004; margin-left:15px; position:relative; top:-2px; font-family:arial, verdana, sans-serif; } .category, .board { position:relative; padding:0 15px; } #primaryContent #feed { background:url(/images/feed_icon.gif) no-repeat left center; padding-left:22px; position:absolute; top:10px; right:10px; } #primaryContent { position:relative; } .category h5, .board h3 { margin-bottom:.2em; } #primaryContent .board h3, #primaryContent .category h5 { line-height:36px; background:#587e04; color:#fff; padding:0 12px; margin-left:-15px; margin-right:-15px; } #primaryContent .category h5 a, #primaryContent .board h3 a { color:#fff; } #boards .category p { margin-top:5px; } #boards table { width:100%; margin:25px auto 0; } #boards table th { padding:5px; background:#587e04; color:#fefefd; font-size:1.1em; text-align:left; } #boards th.title { padding-left:5px; } #boards table td { padding:10px 5px; font-size:1.2em; color:#221cj02; border:1px solid #fdfdfc; border-width:0 1px 1px 0; } #boards table td.title { width:120px; padding-left:5px;} #boards .pagination { background:none; color:#587e04; } #boards table.pagination td { border:0; color:#587e04; } .comment { padding:10px; margin:25px 0 15px; border-bottom:1px solid #2d3541; } #primaryContent .comment h5 { margin:-10px -10px 1.5em; padding:10px; background:#587e04; color:#fff; } #primaryContent .comment h5 a { color:#fff; margin-left:25px; } #boards fieldset { margin:0; padding:0; border:0; } #boards label { display:block; font-size:1.3em; margin-bottom:.5em; font-weight:bold; } #boards input, #boards textarea { margin-bottom:1.5em; } /* @end */ #event .events { padding-bottom:20px; } /* @group ROTATOR CONTROLS */ #rotator-inner{ width: 702px; height: 243px; overflow: hidden; } #rotator .item{ background: #000; width: 702px; height: 243px; overflow: hidden; display: none; } #rotator .item.current{ display: none; } #rotator .item.video-link img { width:702px; } #rotator .video-wrapper { display:block; width:702px; height:243px; background:#000; background-image:url(/images/video_bg.jpg);position:absolute; top:0; left:0; z-index:2000; } #rotator .video-wrapper object{ margin-left:135px; } #controls { height:27px; background:url(/images/controls_container_bg.png) no-repeat left top; padding-left:2px; position:absolute; top:5px; right: 20px;z-index:2000; } #controller { background:url(/images/controls_bg.png) no-repeat right top; padding-right:3px; margin-right: -13px; height: 27px;} #controls ul { margin:0; padding:7px 13px 0; list-style:none; height:20px; position:relative; } #controls li { display:inline; } #controls li a { float:left; display:block; width: 13px; height: 16px; text-indent: -9999px; background: url(/images/controls_li_a.png) no-repeat 3px 3px;} #controls li a.current { background:url(/images/controls_current_li_a.png) no-repeat 0 1px; } #controls li#controls-previous { position:absolute; left:-34px; top:0 } #controls li#controls-previous a{ display: none; } #controls li#controls-next { position:absolute; right:-35px; top:0;} #controls li#controls-next a { display: none; } #controls li a:focus { outline:none; } /* @end */