/* @override http://thewellpaulgoeke.cpmpreview1.com/css/styles.css */ /*===== FILE: styles.css - main CSS styles for staging site CREATED: 8/11/2008 MODIFIED: 10/2/2008 AUTHOR: Ben Otero (ben@churchplantmedia.com) =====*/ /* @group GLOBAL */ body { background:url(/images/body_bg.gif) repeat; margin:0; padding:0; font-size:62.5%; font-family:"Lucida Grande", "Lucida Sans Unicode", arial, helvetica, sans-serif; color:#979795 } hr { display: none; } #skip { position: absolute; text-indent: -9999px; list-style: none; overflow-x:hidden; } #container { margin:0 auto; width:770px; } #mainContent { width:770px; background:url(/images/maincontent_bg.gif) repeat-x; } #home #mainContent { background:#1a1c1d; padding-top:4px; } a { overflow: hidden; } .col { float:left; width:150px; margin-right:15px; } .col.wide { width:420px; } .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 { width:770px; height:105px; background:url(/images/header_bg.gif) no-repeat left bottom; } #header h1, #header h1 a { display:block; width:250px; height:63px; } #header h1 { text-indent:-999em; margin:10px auto 8px; padding:0; margin-bottom: -2px; background:url(/images/logo2.gif) no-repeat; position:relative; left:-3px;} #header h1 a:focus { outline:none; } /* @end */ /* @group NAVIGATION */ #nav, #nav * { list-style:none; margin:0; padding:0} #nav { height:29px; width:650px; margin:15px auto 0; } #nav li { float:left; margin:0 2px; } #nav li a { display:block; font-size:1.2em; padding:0 23px; line-height:29px; color:#dcdcc0; text-decoration:none; } #nav li:hover a, #nav li.current a { background:url(/images/nav_hover.gif) repeat-x; color:#fefefe; } #nav li li { border:none; float:none; margin:0; } #nav li:hover li a, #nav li li a { background:#304956; color:#feffff; width:140px; margin:0; line-height:22px; padding-top:2px; } #nav li.current li a:hover, #nav li:hover li a:hover{ background:#223843; } #nav li ul { position:absolute; left:-5000px; z-index:1001; padding:4px 0 6px; background:#304956; } #nav li:hover ul { left:auto;} #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;} #articles #nav_home.current a { color:#fff; text-decoration:none; text-transform:uppercase; background:none; } #articles #nav_media a { background:#fff; color:#029dc7; } /* @end */ /* @group BANNER */ #banner { display:block; width:750px; height:178px; background:url(/images/sub_banner_bg.gif) no-repeat; padding:17px 10px; } #banner img { margin-left:7px; } #home #banner { background:url(/images/banner_bg.gif) no-repeat left -4px; padding:12px 10px; width:750px; height:340px; } #home #banner p { margin:0; } /* @end */ /* @group PRIMARY CONTENT */ #content-wrap { background:#1a1c1d; width:770px; padding-bottom:20px; } #primaryContent { width:520px; padding:12px 20px 0; float:left; } #home #primaryContent { width:744px; padding:10px 13px 0; background:url(/images/home_content_bg.gif) no-repeat left top; float:none; } h2 { margin:0; } h3 { font-size:1.5em; margin-bottom:0; } h4 { font-size:1.4em; } h5 { font-size:1.3em; margin-top:0; } h6 { font-size:1.2em; } .article h4 { margin-bottom:0; } .article p { margin-top:0; } #primaryContent a { color:#dcdcc0; } #primaryContent a:hover { text-decoration:none; } #primaryContent p, #primaryContent td, #primaryContent li { font-size:1.2em; color:#fff; } #primaryContent p { line-height:1.5em; } #primaryContent li p, #primaryContent li * { font-size:1em; line-height:1; } #primaryContent td * { font-size:1; line-height:1; } #primaryContent img { border:none; } #primaryContent img.left-align { float:left; position:relative; left:-10px; } #primaryContent img.right-align { float:right; position:relative; right:-10px; } /* @group QUICKLINKS */ #quicklinks { padding:0; margin-left:10px;} #quicklinks p { display:block; width:120px; height:131px; float:left; background:url(/images/ql_bg.gif) no-repeat left bottom; margin:4px 9px 0 0; padding:7px; color:#fff; font-size:1.1em; } #quicklinks p:hover { background-position:right bottom; } #quicklinks p span { padding:0 3px 3px 3px; display:block; text-transform:uppercase; } #quicklinks p:first-child { margin:0 } /* @end */ /* @group RECENT SERMONS */ #home #recent-sermons { margin-right:-30px; } #recent-sermons div { border-top:1px solid #31312f; padding-top:12px;} #recent-sermons div.first { border:none; padding-top:0; margin-top:-2px;} #home #recent-sermons .first{ padding-top:10px; margin:0; } #recent-sermons h4 { font-size:1.2em; font-weight:normal; margin:0; } #recent-sermons h4 a { color:#fff; text-decoration:none; } #recent-sermons p { color:#a1a19f; font-size:1.1em; margin-top:3px; line-height:1.5em; } #secondaryContent #recent-sermons p { margin-top:1px; } #recent-sermons .play { display:block; width:64px; height:20px; background:url(/images/listen_btn.gif) no-repeat; text-indent:-999em; } #recent-sermons .play { position:relative; top:-4px; } #recent-sermons div { padding-bottom:6px; } /* @end */ /* @end */ /* @group SECONDARY CONTENT */ #secondaryContent { float:left; width:165px; padding-left:22px; padding-top:40px;} #secondaryContent h3 { border-bottom:1px solid #31312f; } /* @group UPCOMING */ #upcoming-events { margin-top:20px; } #upcoming-events .event { padding-bottom:13px; } #upcoming-events .date { display:block; width:25px; height:28px; background:#fff; float:left; margin-right:11px; font-family:arial, sans-serif; } #upcoming-events .month { display:block; padding:1px 0 0; height:9px; background:#4c6879; font-size:9px; color:#fff; text-transform:uppercase; text-align:center; } #upcoming-events .day { display:block; font-size:15px; color:#383732; text-align:center; } #article h4, #upcoming-events h4 { margin:0; padding:0; font-size:1.1em; font-weight:normal; } #article h4 a, #upcoming-events h4 a { color:#fffefe; text-decoration:none; } #article h4 a:hover, #upcoming-events h4 a:hover { text-decoration:underline; } #article p, #upcoming-events p { color:#a4a3a3; font-size:1em; margin:3px 0 0; } /* @end */ /* @group BUTTONS */ #buttons img { border:none; } /* @end */ /* @end */ /* @group FOOTER */ #footer { background:url(/images/footer_bg.gif) no-repeat left top; margin:0; padding:11px 10px; } #footer p { font-size:1.1em; color:#71777a; margin:8px 0 0; padding:0; width:40%; float:left; } #footer p#powered { float:right; width:auto; } #footer a { color:#fff; } #footer a:hover { text-decoration:none; } /* @end */ /* @group SERMONS */ #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 #2f2f2d; } .sermonbox a { text-decoration:underline; } .sermonbox a:hover { text-decoration:none; } #primaryContent .sermonbox h5 { margin:0;} #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:10px; 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; margin-left:2px; text-indent:-999em; } .sermonbox li.sl_listen a { background:url(/images/play_icon_app.gif) no-repeat; } .sermonbox li.sl_download a { background:url(/images/download_icon_app.gif) no-repeat; } .sermonbox li.sl_notes a { background:url(/images/notes_icon_app.gif) no-repeat; } .sermonbox li.sl_video a { background:url(/images/video_icon_app.gif) no-repeat; } .sermonbox li a:focus { outline:none; } /* @group MEDIA BOX */ #text { } #byline { margin:10px 0 0; padding:0; list-style:none; } #mediabox { margin:0; } #mediabox ul { margin:0; padding:0; list-style:none; } #mediabox li { padding:2px 0 2px 20px; } #mediabox li a { color:#fff; font-size:1.2em; text-decoration:none} #mediabox li a:hover { text-decoration:underline; } #mediabox li#mb_links { background:#f4f4f4; color:#19140d; 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_app.gif) no-repeat left 2px; } #mediabox li#mb_notes { background:url(/images/notes_icon_app.gif) no-repeat left 2px; } #mediabox li#mb_video { background:url(/images/video_icon_app.gif) no-repeat left 2px; } #mediabox li#mb_podcast { background:url(/images/feed_icon_app.gif) no-repeat left 2px; } /* @end */ /* @group HOW IT WORKS */ #how-it-works { background:#101112; } #how-it-works { margin:2.5em 0 0; padding:0; list-style:none; height:30px; } #how-it-works li { padding:0 20px; font-size:1.2em; float:left; display:inline; line-height:30px; } #how-it-works li#works { padding-left:10px; } #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#save { background:url(/images/download_icon.gif) no-repeat left center; } /* @end */ /* @group SORTING */ #sorting { margin-bottom:2.5em; } #sorting label, #sorting select { display:block; } #sorting label { font-size:1.2em; margin-bottom:.5em; font-weight:bold; } #sorting select { width:100%; margin-bottom:1.5em; } #sorting ul { margin-top:2.5em; padding:0; list-style:none; } #sorting a { font-size:1.2em; color:#dcdcc0;} #sorting a:hover { text-decoration: none; } /* @end */ /* @end */ /* @group CALENDAR */ #primaryContent table.calendar { margin-bottom: 25px; border-collapse: collapse; margin-top:15px;} #primaryContent table.calendar caption { padding-bottom: 10px; color: #fff; font-size: 1.4em; text-transform:uppercase; } #primaryContent table.calendar th { padding: 10px 0; background:#223843; color:#fff; font-size: 1.1em; font-weight: normal; text-transform:uppercase; } #primaryContent table.calendar td { width: 68px; height: 68px; padding: 2px; border: 1px solid #1a1c1d; border-left: 0; border-top: 0; background:#333638; color:#969695; font-size: 1em; vertical-align: top; } #primaryContent table.calendar td a { text-decoration: none; color:#fff; } #primaryContent table.calendar td ul { margin: .5em 0 0 .5em; font-size: 100%; list-style: none; padding:0; } #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; color:#fff; } #primaryContent table.calendar td li a:hover{ text-decoration: none; } /* @end */ /* @group SERVICE */ #service { padding-left:0px; } #service table.calendar { display:block; width:161px; border-collapse: collapse; background:url(/images/cal_bg.gif) no-repeat left 2px; margin:2px 0 0; padding-bottom:25px;position:relative; left:-4px; } #service table.calendar caption { color: #c7c7a0; font-size: 1.1em; text-transform:none; padding:3px 0 1px; margin-bottom:1px;} #service table.calendar th { padding: 5px 0; color:#e5d8b6; font-size: 1em; font-weight:bold; text-align: center; background:none; } #service table.calendar td { width: 22px; height: 12px; color:#fff; font-size: 11px; font-weight: normal; text-align:center; border:none; background:none; padding:2px 4px; } #service table.calendar a { display: block; color: #BFBB65; text-decoration: none; background:#212425; padding: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 #212425; background: #2e3335; font-size: 1.1em; } #traildiv li { color:#e5d8b6; margin-left: 1em; margin-bottom: .75em; } #traildiv a { color:#e5d8b6; text-decoration: none; } /* @end */