/* @override http://livermorealive.cpmpreview1.com/css/styles.css */ /*===== CLIENT: Livermore ALIVE, Livermore, CA DESIGN FRAME: FILE: styles.css - main CSS styles for staging site CREATED: 11/20/2008 MODIFIED: 11/25/2008 AUTHOR: Ben Otero (ben@churchplantmedia.com) =====*/ /* @group GLOBAL */ body { background:#ddeef3 url(/images/body_bg.jpg) repeat-x; margin:0; padding:0; font-size:62.5%; font-family:"Lucida Grande", arial, helvetica, sans-serif; color:#2A3135; } hr { display: none; } #skip { position: absolute; text-indent: -9999px; list-style: none; overflow-x:hidden; } a { overflow: hidden; } .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 CONTAINERS */ #outer-container { background:url(/images/outer_container_bg.jpg) no-repeat center top; background:none; } #container { width:930px; margin:0 auto; position:relative; z-index:1; } #mainContent { margin-top:50px; padding:0 40px 20px 33px; background:url(/images/content_bg.gif) repeat-y; } /* @end */ /* @group HEADER */ #header-wrap { height:331px; background:url(/images/header_wrap_bg.jpg) no-repeat center top; margin-bottom:-62px; } #header { width:878px; height:260px; margin:0 auto; position:relative; z-index:1; top:50px; background:url(/images/header_bg.gif) no-repeat; padding:9px 0 0 15px; } #header h1, #header h1 a { display:block; width:244px; height:167px; } #header h1 { background:url(/images/logo.png) no-repeat; text-indent:-999em; position:absolute; top:4px; left:31px; z-index:10; } #header h1 a:focus { outline:none; } #skip { position:absolute; left:-999em; } #left-ornament { display:block; width:149px; height:427px; z-index:1; background:url(/images/left_ornament.png) no-repeat; position:absolute; left:-132px; top:-319px; } #top-ornament { display:block; width:267px; height:48px; background:url(/images/top_ornament.png) no-repeat; position:absolute; top:-50px; left:0; } #right-ornament { display:block; width:111px; height:558px; background:url(/images/right_ornament.png) no-repeat; position:absolute; right:-94px; top:-295px; } /* @end */ /* @group SERVICES */ #times { display:block; padding-right:13px; width:843px; height:54px; background:url(/images/services_bg.png) no-repeat; position:absolute; left:15px; bottom:20px; } #times p { font:14px "Lucida Grande", verdana, arial; color:#fff; text-align:right; margin:0; padding:0; line-height:54px; width:310px; } #services { float:right; margin-right:70px; position:relative; } #services img { position:absolute; top:12px; right:-70px; } #times img { border:0; } /* @end */ /* @group BANNER */ #banner { display:block; width:856px; height:240px; background:url(/mediafiles/subpage-header.jpg) no-repeat; } #home #banner { height:240px; background:url(/mediafiles/home-header.jpg) no-repeat; } /* @end */ /* @group NAVIGATION */ #nav, #nav * { list-style:none; margin:0; padding:0} #nav { width:263px; background:#1b2d3c; position:relative; left:-19px; padding:15px 0;} #nav li { width:263px;} #nav li a { font-size:1.2em; display:block; line-height:35px; padding-left:45px; color:#dad9c5; text-transform:uppercase; text-decoration:none; margin-bottom:1px; } #nav li.current a, #nav li:hover a { background:#1b4966; border-left:6px solid #ff8703; padding-left:39px; color:#f1f8fa } #nav li li a { display:block; } #nav li.current li a, #nav li:hover li a { background:#1b2d3c; border:0; padding:0 10px; width:160px; } #nav li li a:hover { background:#1b4966; } #nav li ul { position:absolute; left:-5000px; z-index:1001; width:180px; background:#1b2d3c; } #nav li:hover ul { left:auto; margin-top:-35px; margin-left:262px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { left:-5000px;} #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:-35px 0 0 180px;} /* @end */ /* @group CONTENT */ #primaryContent { width:580px; float:right; padding-right:12px; position:relative; } #primaryContent p, #primaryContent li, #primaryContent td { font-size:1.3em; color:#444340; line-height:1.5em; } #primaryContent li *, #primaryContent p *, #primaryContent td * { font-size:1em; margin-bottom:1em; } #sorting a, #primaryContent a { color:#b76001; text-decoration:none; border-bottom:1px dotted; } #sorting a:hover, #primaryContent a:hover { border:0; } #primaryContent h3 { font-size:1.6em; color:#b76001; } #primaryContent h4 { font-size:1.5em; color:#b76001; } #primaryContent h5 { font-size:1.4em; color:#444340; } #primaryContent h6 { font-size:1.4em; color:#444340; } #primaryContent img { border:0; } #primaryContent img.left-align { float:left; position:relative; left:-10px; margin-right:10px; } #primaryContent img.right-align { float:right; position:relative; right:-10px; margin-left:10px; } /* @end */ /* @group QUICKLINKS */ #quicklinks { margin:0 -30px 0 -4px; padding:0; list-style:none; } #quicklinks li { display:inline; } #quicklinks li a { float:left; text-decoration:none; border:0; color:#fff; position:relative; } #quicklinks li img { display:block; border:0; } #quicklinks li span { display:block; position:absolute; left:0; bottom:0; width:137px; background:url(/images/ql_overlay.png) no-repeat; padding-left:10px; line-height:25px; } #quicklinks li a:hover { text-decoration:underline; } /* @end */ /* @group SIDEBAR */ #sidebar { width:263px; float:left; margin-top:-97px; z-index:5; position:relative; } #freeform p { font-size:11px; color:#444340; line-height:1.5em; } #freeform a { color:b76001; } #freeform a:hover { text-decoration:none; } /* @end */ /* @group EVENTS */ #events { margin-top:4px; width:244px; background:url(/images/events_bg.gif) no-repeat; } #sorting h3, #events h3 { font-size:13px; padding-left:9px; color:#9e4b01; font-weight:normal; line-height:23px; background:#d5d4c2; margin-bottom:0; } .event { padding:13px 8px 12px; border-bottom:1px solid #e0dbce;} .last { border:0; } .event p, .event h4 { margin:0; } .event p { font-size:11px; color:#444340; } .event h4 { font-size:12px; margin-top:3px; } .event h4 a { color:#444340; text-decoration:none; } .event h4 a:hover { text-decoration:underline; } #events p.all { margin-left:8px; font-size:11px; } #events p.all a { color:#b76001; } #events p.all a:hover { text-decoration:none; } /* @end */ /* @group FOOTER */ #footer { background:url(/images/footer_bg.png) no-repeat center top; width:890px; padding:50px 20px; } #footer p { margin:0; font-size:1.1em; color:#444340; width:40%; float:left } #footer a { color:#444340; } #footer a:hover { text-decoration:none; } #footer p#powered { float:right; text-align:right; } /* @end */ /* @group SERMONS */ #filter { margin-top:1em; } #filter select { width:100px; margin-left:10px; } #filter a { margin-left:20px; } #primaryContent .sermonlist h4 { margin:0; padding:10px 0; } #primaryContent .sermonbox p { margin:0; line-height:16px; } .sermonbox { position:relative; padding:10px 0; border-top:1px solid #efefef; } .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:3px 0 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; } #primaryContent .sermonbox li a { display:block; width:16px; height:16px; text-indent:-999em; border:0; margin:0 2px;} .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 */ #byline { margin:10px 0 0; padding:0; list-style:none; } #mediabox { list-style:none; margin:0; padding:0;} #mediabox li { padding:2px 0 2px 20px; display:inline; margin-right:10px;} #mediabox li#mb_links { padding:0; } #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 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:4px 10px; width:224px; background:url(/images/events_bg.gif) no-repeat; } #sorting label, #sorting select { display:block; } #sorting label { font-size:1.3em; margin-bottom:.5em; position:relative; zoom:1; } #sorting select { width:100%; margin-bottom:1.5em; } #sorting a { font-size:11px; } /* @end */ /* @end */ /* @group CALENDAR */ #primaryContent table.calendar { margin-bottom: 25px; border-collapse: collapse; width:100%; } #primaryContent table.calendar caption { padding-bottom: 10px; color: #1b2d3c; font-size: 1.4em; } #primaryContent table.calendar th { padding: 6px 0; background:#1b2d3c; color:#fff; font-size: 1.3em; font-weight: normal; } #primaryContent table.calendar td { width: 68px; height: 68px; padding: 2px; border: 1px solid #fff; border-left: 0; border-top: 0; background:#efefef; color:#55636b; font-size: 1em; vertical-align: top; } #primaryContent table.calendar td.current { background:#ff8703; color:#fff; } #primaryContent table.calendar td.current a { color:#fff; } #primaryContent table.calendar td a { text-decoration: none; border: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; border-bottom:1px dotted} #primaryContent table.calendar td li a:hover{ text-decoration: none; border:0; } /* @end */ #home #primaryContent td p { margin:0; }