/* @override http://santanbiblechurch.cpmpreview1.com/css/styles.css http://santanbiblechurch.cpmpreview1.com/css/styles.css http://www.santanbible.org/css/styles.css */ /*===== CLIENT: San Tan Bible Church FILE: styles.css - main CSS styles for staging site CREATED: 4/10/2008 MODIFIED: 4/11/2008 AUTHOR: Ben Otero (ben@churchplantmedia.com) =====*/ /* @group GLOBAL */ body { background:#eae9e8 url(/images/sub_body_bg2.gif) repeat-x; margin:0; padding:0; font-size:62.5%;; font-family:helvetica, arial, helvetica, sans-serif; color:#2c394b; } body#home { background:#eae9e8 url(/images/home_body_bg2.jpg) repeat-x; } hr { display: none; } /*#outer-container { background:url(/images/sub_outer_container_bg2.jpg) no-repeat center top; } #home #outer-container { background:url(/images/outer_container_bg2.jpg) no-repeat center top; }*/ #container { margin:0 auto; width:743px; } #mainContent { position:relative; padding-bottom:20px; } a { overflow: hidden; } .show { display:block; } .hidden { display:none; } .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:10001; height:174px; width:743px; margin-bottom:25px; background:url(/images/header_bg.gif) repeat-x left bottom; } #header h1, #header h1 a { display:block; width:138px; height:110px; } #header h1 { background:url(/images/logo.png) no-repeat; position:absolute; top:15px; text-indent:-999em; margin:0; padding:0; } h1 a:focus { outline:none; } #skip { position: absolute; text-indent: -9999px; list-style: none; overflow-x:hidden; } #search { width:155px; position:absolute; bottom:8px; right:3px; } #search form, #search fieldset { margin:0; padding:0; border:0; } #search input { float:left; padding:5px; width:110px; border:0; height:13px; position:relative; top:-1px; } #search a { display:block; float:left; width:25px; height:23px; background:url(/images/search_btn2.gif) no-repeat; text-indent:-999em; margin-left:4px; } #search a:focus { outline:none; } /* @group SERVICE TIMES */ #service-times { float:right; width:199px; padding:16px 21px 15px 18px; background:#f9f2e0 url(/images/service_times_bg.gif) repeat-x left bottom; height:190px; overflow:hidden; } #service-times h3 { background:url(/images/sv_h3_bg.gif) repeat-x left bottom; font:normal 2.2em Georgia, "Times New Roman", serif; color:#6e3335; padding-bottom:7px; margin:0 0 5px; } #service-times p { font-size:1.3em; color:#54585d; margin-top:0px; line-height:21px; } #service-times a { display:block; width:205px; height:32px; background:url(/images/map_btn.gif) no-repeat; text-indent:-999em; margin:0 auto; } #service-times a:focus { outline:none; } /* @end */ /* @group NAVIGATION */ #nav, #nav * { list-style:none; margin:0; padding:0} #nav { height:35px; width:600px; position:absolute; bottom:2px; padding:4px 7px 0; } #nav li { float:left; } #nav li a { display:block; font-size:1.2em; font-weight:bold; padding:0 12px; line-height:36px; color:#fff; text-decoration:none; } #nav li.current a, #nav li:hover a { background:url(/images/nav_a_bg.gif) repeat-x; color:#1d1e20; margin-top:1px; line-height:35px; padding-bottom:1px; } #nav li li { border:none; } #nav li:hover li a { background:#575d62; color:#fff; line-height:20px; padding:5px 10px 5px 13px; width:137px; margin:0; } #nav li.current li a:hover, #nav li li a:hover { background:#26292c; } #nav li ul { position:absolute; left:-5000px; z-index:1001; width:160px;margin-top:-1px; } #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:-30px 0 0 160px;} /* @end */ /* @end */ /* @group PRIMARY CONTENT */ #topContent { height:240px; margin-bottom:19px;} #primaryContent { float:left; padding:0 17px; width:466px; } #primaryContent li, #primaryContent p, #primaryContent td { font-size:1.2em; color:#252525; line-height:20px; } #primaryContent li p, #primaryContent li td { font-size:1em; } #primaryContent img { border:4px solid #fff; } img.left-align { float:left; margin:10px 10px 10px 0; } img.right-align { float:right; margin:10px 0 10px 10px; } #primaryContent img.no-border, #primaryContent img.mcms_stats { border:0; } #primaryContent a { color:#71492D; } #primaryContent a:hover { color:#55636B; text-decoration:none; } /* @group TABS / SWITCHER */ #tabs { margin:0; padding:0 0 0 20px; list-style:none; margin-top: -3px;position:relative; height:39px; background:url(/images/tabs_bg.gif) no-repeat left bottom; left:-37px; width:505px; } #tabs li { float:left; display:inline; padding-left:9px; background:url(/images/tab_left.gif) no-repeat left top; } #tabs li a { display:block; padding:0 20px 0 11px; margin:0 10px 0 0; line-height:39px; font-size:11px; text-transform:uppercase; text-decoration:none; font-weight:bold; color:#918e8a; background:url(/images/tab_right.gif) no-repeat right top; } #tabs li.active { background:url(/images/active_tab_left.gif) no-repeat left top; padding-left:8px; } #tabs li.active a { background:url(/images/active_tab_right.gif) no-repeat right top; padding-left:12px; color:#6e3335; } /* @end */ /* @group BANNER */ #banner { display:block; width:743px; height:172px; float:left; background:url(/mediafiles/subpage-header.jpg) no-repeat left 4px; position:relative; margin-bottom:25px; overflow: hidden;} #home #banner { width:497px; height:221px; background:url(/mediafiles/home-header.jpg) no-repeat left 2px; margin:0; } #banner-overlay { background:url(/images/sub_banner_overlay.png) no-repeat; display:block; width:743px; height:172px; position:absolute; top:0; left:0; z-index:5; } #home #banner-overlay { background:url(/images/banner_overlay.png) no-repeat; display:block; width:497px; height:221px; position:absolute; top:0; left:0; } #home #banner { background:#fff; } /* @end */ /* @group HEADINGS */ #primaryContent h2 { font-size:1.9em; color:#7F5233; margin-top:0; } #primaryContent h3 { font:normal italic 1.9em Georgia, "Times New Roman", times, serif; color:#9b643e; margin-bottom:0; } h4 { font-size:1.4em; color:#9b643e; font-weight:normal; } h5 { font-size:1.2em; } /* @end */ /* @group ARTICLES */ .article { padding-bottom:25px; } .article h4 { margin:0; } .article p.date { margin-top:3px; } /* @end */ /* @end */ /* @group SECONDARY CONTENT */ #secondaryContent { float:right; width:230px; position:relative; right:-10px; } #secondaryContent h3 { margin:0; padding:0; color:#8e8b88; border-bottom:1px solid #d2d1d0; font-size:1.1em; padding-bottom:8px; text-transform:uppercase; } #secondaryContent p { font-size:1.1em; color:#404448; margin-top:8px; } /* @group PODCAST */ #podcast { padding:10px 0 0 47px; width:176px; height:63px; background:url(/images/podcast_bg.gif) no-repeat; margin-bottom:27px; position:relative; margin-left: -7px; margin-top: -2px; } #podcast h3 { font-size:1.6em; color:#6e3335; text-transform:capitalize; border:0; margin:0; } #podcast p { text-transform:lowercase; margin:0; font-size: 1.2em; margin-top: -3px; } #podcast a { color:#404448 } #podcast a:hover { text-decoration:none; } /* @end */ /* @group RECENT SERMON */ #recent-sermon { position:relative; } #recent-sermon h4, #series h4 { font-size:1.4em; font-weight:bold; margin:10px 0 0; } #recent-sermon h4 a, #series h4 a { color:#7F5233; text-decoration:none; } #recent-sermon h4 a:hover, #series h4 a:hover { text-decoration:underline; } #recent-sermon p { } #recent-sermon a.listen { display:block; float:left; width:64px; height:20px; background:url(/images/listen_btn.gif) no-repeat; text-indent:-999em; } #recent-sermon a.download { display:block; float:left; width:88px; height:20px; background:url(/images/download_btn.gif) no-repeat; text-indent:-999em; margin-left:4px; } /* @end */ /* @group SERIES */ #series { clear:both; padding-top:40px; } #series h4 { font-size:1.3em; color:#414549; font-weight:bold; margin:10px 0 5px; } #series .sermon { padding:3px 0; } /* @end */ /* @end */ /* @group FOOTER */ #footer { background:url(/images/footer_bg.gif) repeat-x left top; margin:0; padding:10px; height:290px; } #footer-inner { width:743px; margin:0 auto; padding:34px 0;} #footer p#powered { text-align: right; clear:both; padding-top:30px; font:11px arial, verdana, sans-serif; color:#5a5f65; } #footer p#powered a { color:#5a5f65; } #footer p#powered a:hover { text-decoration:none; } /* @group QUICKLINKS */ #quicklinks { float:left; width:500px; } .quicklink { float:left; width:220px; height:68px; margin-bottom:14px;margin-left:17px; } #quicklinks .quicklink img { float:left; border:3px solid #383c41; } .quicklink h4 { margin:18px 0 5px 76px; font-size:1.6em; color:#fff; } .quicklink p { float:left; margin:0; padding:0; font-size:1.2em; color:#a6a8ab; } .quicklink p img { margin-right:10px; } .quicklink a { color:#a6a8ab; } .quicklink a:hover { text-decoration:none; } /* @end */ /* @group CONTACT */ #contact { background:url(/images/contact_bg.gif) no-repeat left top; float:right; padding:0 20px; width:194px; position:relative; top:-10px; } #contact h3 { color:#fff; font-size:1.7em; font-weight:normal; margin-top:15px; } #contact p { font-size:1.2em; color:#b2b7bc; line-height:1.2em; } #contact a { color:#9b643e; } #contact a:hover { text-decoration:none; } /* @end */ /* @end */ /* @group SERMONS */ #filter { margin-top:2em; } #filter select { width:100px; margin-left:10px; } #filter a { margin-left:20px; } .sermonlist { border-top:4px solid; } #primaryContent .sermonlist h4 { margin:0; padding:10px 0; } .sermonbox { position:relative; padding:10px 0; border-bottom:1px solid #ccc; } .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:#9b643e;} .sermonbox h5 a:hover { color:#556c6b } #primaryContent .sermonbox p { margin:0;} .sermonbox ul { position:absolute; top:15px; 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 */ #text { } #byline { margin:10px 0 0; padding:0; list-style:none; } #mediabox { float:right; padding:10px; margin:-55px 0 0 10px; width:140px; list-style:none; border:1px solid #d2d1d0; } #mediabox li { padding:2px 0 2px 20px; font-size:1.2em;} #mediabox li#mb_links { background:#d2d1d0; color:#404448; 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 { 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 { margin-bottom:2.7em; } #sorting ul { margin:1.5em 0; padding:0; list-style:none; } #sorting li a { font-size:1.2em; color:#9b643e; } #sorting li a:hover { text-decoration: none; } /* @end */ /* @end */ /* @group CALENDAR */ #primaryContent table.calendar { margin-bottom: 25px; border-collapse: collapse; } #primaryContent table.calendar caption { padding-bottom: 10px; color: #666; font-size: 1.4em; } #primaryContent table.calendar th { padding: 6px 0; background:#55636b; color:#fff; font-size: 1.3em; font-weight: normal; } #primaryContent table.calendar td { width: 68px; height: 68px; padding: 2px; border: 1px solid #eae9e8; border-left: 0; border-top: 0; background:#f4f4f4; 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; 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 */