/* @override http://www.j10church.com/css/styles.css */ /*===== SITE: j10 FILE: styles.css CREATED: 9/3/2008 MODIFIED:11/24/2008 AUTHOR: Ben Otero (ben@churchplantmedia.com) =====*/ /* @group GLOBALS */ * { margin:0; padding:0; line-height:1; } body { background:#313133 url(/images/body_bg.jpg) repeat-x center top; font-size:62.5%; margin:0; padding:0; font-family:"Lucida Grande", arial, verdana, sans-serif; } #outer-container { background:url(/images/outer_container_bg.jpg) no-repeat center top; padding-bottom:150px; } #container { padding-top:46px; margin:0 auto; width:853px; } #mainContent { background:url(/images/maincontent_bg.gif) repeat-y 6px; width:860px; } img { border-color:#de851a } .show { display:block; } .hidden, hr { display:none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block;} /* @end */ /* @group HEADER */ #header { position:relative; z-index:1000; width:860px; height:82px; background:url(/images/header_bg.jpg) no-repeat left top; } #header h1, #header h1 a { display:block; width:135px; height:123px; } #header h1 { margin:0; padding:0; background:url(/images/logo.gif) no-repeat; text-indent:-999em; position:absolute; left:48px; top:-8px; } #header h1 a:focus { outline:none; } #skip { position:absolute; top:-999em; } /* @group FORM */ #header form { position:absolute; top:33px; right:31px; margin:0; padding:0;} #header fieldset{ border:0; margin:0; position:relative; width:226px; height:28px; background:url(/images/search_bg.gif) no-repeat; } #header input { background:none; border:0; font-size:1.2em; color:#a4a4a4; position:relative; top:7px; left:15px; } #header form a { position:absolute; top:3px; right:4px; display:block; width:27px; height:20px; background:url(/images/search_btn.gif) no-repeat; text-indent:-999em; } #header form a:focus { outline:none } /* @end */ /* @group SERVICE TIMES */ #service-times { position:absolute; top:39px; left:222px; width:350px;} #service-times h3 { float:left; margin:0; padding:0; font-size:1.2em; color:#df7a1c; } #service-times p { font:italic 1.3em Georgia, "Times New Roman", serif; color:#b1b5b9; position:relative; top:-1px; left:5px; } /* @end */ /* @end */ /* @group NAVIGATION */ #navigation { width:217px; float:right; margin-bottom:13px; } #nav, #nav * { list-style:none; margin:0; padding:0;} #nav li { cursor:pointer; } #nav li a { display:block; padding:8px 0 12px 18px; height:11px; font-size:1.4em; color:#fff; text-decoration:none; text-transform:lowercase; border-bottom:1px solid #4d4f51; } #nav li#nav_home a { border-top:1px solid #4d4f51; } #nav li:hover a { background:#4d4f51; } #home li#nav_home, #nav li.current { position:relative; left:-6px; background:url(/images/nav_tab.gif) no-repeat left bottom; height:38px; margin-bottom:-5px;} #home #nav li#nav_home a, #nav li.current a:hover, #nav li.current a { border:0; padding:8px 0 10px 25px; height:15px; line-height:1; background:url(/images/current_nav.gif) no-repeat; width:198px; color:#df7a1c; } #nav li.current li a, #nav li li a, #nav li:hover li a { background:#e48a39; color:#fff; text-transform:capitalize; font-size:12px; padding-left:16px; width:148px; position:relative; left:0; border:0; height:9px; padding:8px 0 12px 16px; } #nav li.current li { left:0; margin-bottom:0; background: 0; height:auto; } #nav li.current li a:hover, #nav li li a:hover { background:#e5bd9a; width:148px; padding:8px 0 12px 16px; color:#000; height:9px; } #nav li ul { position:absolute;left:-5000px;z-index:1001; width:164px; background: #e48a39; } #nav li:hover ul { left:auto; margin:-45px 0 0 216px; } #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;} #nav li:hover ul li:hover ul { margin:-30px 0 0 164px;} /* @end */ /* @group PRIMARY CONTENT */ #primaryContent { float:right; position:relative; padding:0 30px 100px 11px; width:571px; margin-right:16px;; z-index:10; } #home #primaryContent { padding:0; width:612px; } #primaryContent a { text-decoration:underline; color:#de851a; } #primaryContent a:hover { text-decoration: none; } #primaryContent p, #primaryContent li, #primaryContent td { font-size:1.2em; line-height:1.5em; margin-bottom:1em; color:#2a2b28; } #primaryContent li p, #primaryContent td * { font-size:1em; line-height:1; } #primaryContent td { vertical-align: top; } #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; } #primaryContent img.no-border, #primaryContent img.mcms_stats { border:0; } #primaryContent img { border:2px solid #de851a; } /* @group BANNER */ #banner { display:block; position:relative; left:-11px; width: 608px; height: auto;} #home #banner { width:612px; height:349px; background:#fff; left:0; } #home #primaryContent img { border:0; } /* @end */ /* @group HEADINGS */ h2, h3, h4, h5, h6 { margin-bottom:1em; color:#de851a; } h2 { font-size:1.6em; margin-top:22px; background:url(/images/h2_bg.gif) repeat-x left 7px; } h2 span { background:#fff; padding-right:12px; } #primaryContent h3 { font-size:1.5em; } #primaryContent h4 { font-size:1.4em; } #primaryContent h5 { font-size:1.3em; } #primaryContent h6 { font-size:1.2em; } /* @end */ /* @group ARTICLES */ .article { border-bottom:1px solid #e4e5dd; padding:19px 0; } .article h4 { margin-bottom:0; margin-top:0; } #primaryContent .article h4 a { text-decoration:none; } #primaryContent .article h4 a:hover { text-decoration: underline; } #primaryContent .article p.by { font-size:1.1em; color:#7b7b76; margin-top:3px; } /* @end */ /* @group QUICKLINKS */ #quicklinks { width:642px; margin:7px -30px -13px -1px; } #quicklinks div { float:left; display:block; width:184px; text-decoration:none; padding:0 7px; margin-right:9px; color:#222; } #quicklinks img { border:0; margin-left:-7px; } #quicklinks h4 { font-size:1.6em; font-weight:normal; margin:6px 0 5px; color:#df7a1c; } #quicklinks p { font-size:1.1em; margin-bottom:0; } #quicklinks p a { color:#515151; text-decoration:none; } #quicklinks a:hover {text-decoration:underline; } /* @end */ /* @end */ /* @group SECONDARY CONTENT */ #secondaryContent { float:left; position:relative; width:223px; padding-top:24px;} #secondaryContent h3 { font-size:1.7em; height:44px; } #secondaryContent img { border:2px solid #de851a; } /* @group MAP DIRECTIONS */ #map-directions { width:216px; margin-left:7px; margin-bottom:3px; padding-top:10px; height:49px; } #map-directions img { position:relative; left:-7px; border:0; } /* @end */ /* @group MODULES */ #modules { width:199px; height:44px; background:url(/images/modules_bg.gif) no-repeat left bottom; margin:1em 0 0; padding:0; list-style:none; clear:both; float:right; padding-left:18px; } #modules li { display:inline; } #modules li a { display:block; float:left; height:44px; background:url(/images/modules_bg.gif) no-repeat left bottom; text-indent:-999em; } #modules li#messages a { width:68px; height:44px; background-position:-18px bottom; } #modules li#messages a:hover { background-position:-18px top; } #modules li#blog a { width:51px; background-position:-86px bottom; } #modules li#blog a:hover{ background-position:-86px top; } #modules li#video a { width:53px; background-position:-137px bottom; } #modules li#video a:hover { background-position:-137px top; } #modules li a:focus { outline:none; } /* @end */ /* @group UPCOMING EVENTS */ #upcoming-events { width:178px; clear:both; padding:10px 0 0 6px; position:relative; margin:0 auto 35px;} #upcoming-events h3 { text-transform:lowercase; margin:0; padding:0; letter-spacing:-.06em; height:auto; background:url(/images/events_dotted_bg.gif) repeat-x left bottom; } #upcoming-events h4 { font-size:1.3em; margin:10px 0 5px; font-weight:normal; } #upcoming-events h4 a { color:#fff; text-decoration:none; } #upcoming-events h4 a:hover { text-decoration:underline; } #upcoming-events p { font-size:1.1em; color:#a2a3a5; } /* @end */ /* @end */ /* @group FOOTER */ #footer { position:relative; width:853px; padding-top:35px; height:30px; z-index:1; background:url(/images/footer_bg.png) no-repeat right top; top:-1px; } #footer , x:-moz-any-link { top:-10px; } #footer p { width:40%; float:left; margin:0 0 0 230px; font-size:1.1em; color:#747474; } #footer p#powered { float:right; width:auto; margin:0 14px 0 0; } #footer a { color:#747474;} #footer a:hover { text-decoration:none; } #powered a:focus { outline:none; } /* @end */ /* @group SERMONS */ #series-description{ width: 571px; overflow: hidden; } #series-description img{ width: 567px; height: auto; } #filter { margin-bottom:53px; } #filter select { width:300px; margin-left:10px; } #filter a { margin-left:45px; } #primaryContent h4 { clear:both; } #primaryContent .sermonlist h4 { margin:0; padding:10px 0; } .sermonbox { position:relative; padding:10px 0; border-top:1px solid #e4e5dd; } .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; color:#2a2b28; } #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 */ #text { padding-top:2em; clear:both;} #primaryContent #byline { margin:10px 0 0; padding:0; list-style:none; clear:both;} #byline li { float:left; display:inline; margin-right:10px; } #primaryContent #mediabox { padding:10px; margin:5px 0 0 0; list-style:none; border:1px solid #5c5e60; height:18px; clear:both; } #mediabox li { padding:2px 5px 0px 20px; float:left; display:inline; font-size:1.1em; line-height:20px; } #mediabox li#mb_links { background:#5c5e60; color:#fff; margin:-10px 10px -10px -10px; padding:10px; font-size:1.2em;} #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; } #text { margin-right:10px;} /* @end */ /* @group HOW IT WORKS */ ul#how-it-works { margin:1em 0 2em; padding:5px 0; list-style:none; height:25px; border:3px solid #e4e5dd; } #how-it-works li { padding-left:20px; margin:0 1em 1.5em; font-size:1.1em; display:block; float:left; line-height:25px;} #how-it-works li#how { font-weight:bold; margin-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#save { background:url(/images/download_icon.gif) no-repeat left center; } /* @end */ /* @group SORTING */ #sorting { clear:both; padding-left:6px; margin:0 auto; width:180px; } #sorting h3 { } #sorting label, #sorting select, #sorting a { display:block; width:100%; margin:0; } #sorting label { font-size:1.3em; font-weight:bold; margin-bottom:.5em; color:#fff} #sorting select { margin-bottom:1.5em; } #sorting a { font-size:1.2em; color:#de851a; } #sorting a:hover { text-decoration:none; } /* @end */ /* @end */ /* @group CALENDAR e4e5dd be531d */ #primaryContent table.calendar { width:98%; margin-bottom: 25px; border: 1px solid #e4e5dd; border-right: 0; border-bottom: 0; border-collapse: collapse; } #primaryContent table.calendar caption { padding-bottom: 10px; color: #e48a39; font-size: 1.4em; } #primaryContent table.calendar caption span { color: #8A4700; } #primaryContent table.calendar th { padding: 6px 0; background: #e48a39; color: #fff; font-size: 1.3em; font-weight: normal; } #primaryContent table.calendar td { width: 68px; height: 68px; padding: 2px; border: 1px solid #e4e5dd; border-left: 0; border-top: 0; background: #fff; color: #2a2b28; 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 */