/* @override http://crosspointechurch.cpmpreview1.com/css/styles.css http://www.insidecrosspointe.com/css/styles.css */ /*===== CLIENT: CrossPoint Church FILE: styles.css - main CSS styles for staging site CREATED: 2/23/2009 MODIFIED: 2/28/2009 AUTHOR: Ben Otero (ben@churchplantmedia.com) =====*/ /* @group GLOBAL */ body { background:#faf8f2 url(/images/sub_body_bg2.jpg) repeat-x center top; margin:0; padding:0; font-size:62.5%; font-family:helvetica, "Lucida Grande", "Trebuchet MS", "Lucida Sans Unicode", verdana, arial, sans-serif; height:100%; } * html, html { height:100%; } hr { display: none; } #skip { position: absolute; text-indent: -9999px; list-style: none; overflow-x:hidden; } #outer-container { background:url(/images/sub_outer_container_bg.jpg) no-repeat top center; position:relative; } #container { margin:0 auto; width:960px; position:relative; } a { overflow: hidden; } hr { 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; height:177px; z-index:1000; } #header-inner { width:960px; height:177px; margin:0 auto; position:relative; } #header h1, #header h1 a { display:block; width:384px; height:78px; margin:0; } #header h1 { background:url(/images/logo2.png) no-repeat; text-indent:-999em; position:absolute; left:13px; top:28px; } /* @end */ /* @group TOPBAR */ #topbar { position:absolute; top:0; right:0; height:33px; background:url(/images/topbar_bg.gif) repeat-x; padding-left:5px; } #topbar fieldset, #topbar form { margin:0; padding:0; border:0; } #topbar form { width:245px; float:left; background:url(/images/search_bg.gif) no-repeat; height:27px; margin:4px 0 0 6px;} #search_term { font-family: helvetica, arial; background:none; border:0; width:154px; padding:5px; height:15px; float:left; } #topbar form a { display:block; width:76px; height:27px; background:url(/images/search_btn.gif) no-repeat; text-indent:-999em; margin:0 0 0 2px; float:left; } #topbar p { float:left; font-size:1.2em; color:#fff; margin-left:8px; margin-right: 8px; margin-top:10px;} /* @end */ /* @group NAVIGATION */ #nav, #nav * { margin:0; padding:0; list-style:none; } #nav { position:absolute; top:130px; left:17px; z-index:1000; height:47px; } #nav li { float:left; } #nav li a { display:block; padding:0 22px; font-size:1.4em; color:#beb79e; line-height:47px; text-decoration:none; font-weight:normal; } #nav li a:hover { color:#fff; } #nav li.current a { color:#fff; font-weight:bold;background:#10191f;} #nav li ul { position:absolute; left:-999em; width:160px; background:#10191f; margin-top: -1px; } #nav li:hover ul { left:auto } #nav li:hover li a { font-size: 12px;background:none; width:120px; line-height:22px; padding:5px 20px; } #nav li li a:hover { background:#46505b; } /* @end */ /* @group CONTENT WRAPPERS */ #content, #second-inner, #banner { width:960px; margin:0 auto; } #content { background:url(/images/sub_content_bg.gif) no-repeat 681px top; padding-bottom:150px; margin-top:25px;} #content.wide { background:none; } #content.wide h2 { background-repeat:repeat-x; } /* @end */ /* @group BANNER */ #banner { width:100%; height:304px; background:url(/images/banner_outer_bg.jpg) repeat-x; position:relative; margin-bottom:-25px; } #image { display:block; width:985px; height:304px; margin:0 auto; position:relative; background:url(/images/sub_banner_bg.jpg) no-repeat center top; } #image img { position:absolute; top:27px; left:27px;} /* @end */ /* @group PRIMARY CONTENT */ #primaryContent { float:left; padding:12px 30px 0 16px; width:625px; position:relative; } #home #primaryContent { float:none; margin-bottom:14px; padding:0; } .wide #primaryContent { width:915px; float:none; } #primaryContent li, #primaryContent td, #primaryContent p { font-size:1.3em; color:#4e4939; line-height:1.5em; } #primaryContent p *, #primaryContent li *, #primaryContent td * { font-size:1em; line-height:1; } #primaryContent a { color:#2f465b; } #primaryContent a:hover { text-decoration:none; } #subscribe { position:absolute; top:27px; right:30px; padding:2px 0 2px 20px; background:url(/images/feed_icon.gif) no-repeat; font-size:1.2em; z-index:500 } #primaryContent img { border:none; } img.left-align { float:left; position:relative; left:-10px; } img.right-align { float:right; position:relative; right:-10px; } #primaryContent h2 { background:url(/images/h2_bg.gif) no-repeat left bottom; } h3, h4, h5, h6 { color:#2f465b; } #primaryContent h3 { font-size:1.6em; font-weight:normal; text-transform:uppercase; margin-bottom:0;} #primaryContent h4 { font-size:1.6em; } #primaryContent h5 { font:normal 1.6em georgia, times, serif; color:#8f3928; margin-top:0;} #primaryContent .article h4 { margin:0; } #primaryContent h6 { font:normal 1.4em georgia, times, serif; margin:0;} /* @end */ /* @group SECONDARY CONTENT */ #secondaryContent { float:left; padding:15px 0 0; width:243px; margin:0 0 0 13px; position:relative; } /* @end */ /* @group LATEST MESSAGE */ #secondaryContent #latest-message { background:#f6f0e2 url(/images/sub_lm_bg.gif) no-repeat 25px 18px; border:3px solid #f2e8d2; border-left:0; padding:18px 22px 10px 24px; position:relative; margin-left: 4px; } #latest-message h4 { font:normal 1.8em georgia, times, serif; margin-top:15px; margin-bottom:7px; } #latest-message h4 a { color:#a57c0e; text-decoration:none; } #latest-message h4 a:hover { text-decoration:underline; } #latest-message p { font-size:1.1em; color:#988655; margin:-2px 0 0; } #latest-message ul { margin:1em 0 0; padding:0; list-style:none; background:url(/images/sidebar_audio_btn.gif) no-repeat; height:29px; width:173px; } #latest-message li a { display:block; float:left; line-height:29px; text-indent:-999em; } #latest-message li a:focus { outline:none } #latest-message li.sl_listen a { width:73px; } #latest-message li.sl_download a { width:100px; } /* @end */ /* @group EVENTS */ #secondaryContent #events, #secondaryContent #news, #secondaryContent #freeform { background:url(/images/sub_events_bg.gif) no-repeat left 20px; padding-left:20px; margin-top:30px;} #events .event { padding:6px 0 12px; margin-bottom:3px;} #events .date { display:block; width:37px; height:39px; float:left; background:url(/images/event_bg.gif) no-repeat; margin:-4px 13px 0 3px } #events .date .month { font-size:11px; color:#5a5955; display:block; text-align:center; padding-top:3px;} #events .date .day { font-size:17px; color:#795a07; text-align:center; display:block; margin-top: -1px; } #events h4 { font-size:13px; margin:0 0 2px; } #events h4 a { color:#5e5d57; text-decoration:none; } #events h4 a:hover { text-decoration:underline; } #events .event p { font-size:1.1em; color:#908e87; margin:0; } /* @end */ /* @group NEWS */ #secondaryContent #news h3 { margin-bottom:0; } #news .article { background:url(/images/article_bg.gif) no-repeat left bottom; padding:12px 0; } #news .last { background:none; } #news h4 { font-size:14px; margin:0 0 6px; } #news h4 a { color:#913b29; text-decoration:none; } #news h4 a:hover { text-decoration:underline; } #news p { font-size:1.2em; color:#4b4a47; line-height:17px; margin:0 0 0.2em } #news p a { color:#b29f6e; } #news p a:hover { text-decoration:none; } /* @end */ /* @group FREEFORM */ #secondaryContent #freeform { background:none; } #freeform h3 { background:url(/images/sub_events_bg.gif) no-repeat left bottom; padding-bottom:8px; padding-left:20px; margin-left:-20px; } #freeform ul { margin:0 0 2.5em; list-style:none; padding:0 0 0 1em; } #freeform p, #freeform td, #freeform li { font-size:1.3em; color:#4e4939} #freeform li { margin:1em 0; } #freeform a { color:#2f465b; } #freeform a:hover { text-decoration:none; } /* @end */ /* @group SECOND LEVEL */ #second-level { background:#4e4939 url(/images/second_level_bg.gif) repeat-x left top; } #second-level .column { width:270px; padding:0 15px; margin-right:24px; float:left; } #service-times.column { margin-right:0; } #second-inner { padding-top:14px; padding-bottom:50px; margin-top: 10px;} #second-level h3 { background:#443f2f; } /* @end */ /* @group VERSE */ #verse li, #verse p { font-size:13px; color:#edeade; } #verse p { margin-top:8px; margin-left: 3px; line-height: 1.4em; } #verse p *, #verse li * { font-size:1em; } #verse a { color:#fff; } #verse a:hover { text-decoration:none; } #verse p.reference { font:italic 11px georgia, times, serif; color:#cdcdbd; text-transform:uppercase; } /* @end */ /* @group FAQS */ #faqs ul { margin:0; padding:0 0 0 5px; list-style:none; } #faqs li { margin-bottom:3px; margin-top: 10px; } #faqs li a { font-size:1.3em; color:#fcde93; line-height:1.3em; } #faqs li a:hover { text-decoration:none; } /* @end */ /* @group SERVICE TIMES */ #service-times { background:#5c5642; border:1px solid #625c4a; padding:16px 18px 22px; margin-top:12px;} #service-times h3 { margin-left:-22px; } #service-times h4 { font-size:1.5em; color:#e4d8b5; margin:0 0 10px; } #service-times .address { float:left; width:130px; padding-bottom:10px;} #service-times .second { border-left:1px solid #4e4939; padding:0 0 0 15px; width:115px; } #service-times .address p { font-size:1.1em; color:#faf8f2; margin:0 0 4px; } #service-times .address strong, #service-times .address b { color:#fff; } #service-times img { border:0; margin-top: 3px; } /* @end */ /* @group FOOTER */ #footer { padding:10px 0 5px 3px; position:relative; margin-top:0; height:115px; background:#353020 url(/images/footer_bg.gif) repeat-x center top; clear:both; } #footer-inner { width:924px; padding:5px 18px 3px; margin:0 auto; position:relative; } #footer p, #content .brad-social p { margin-top:13px; font-size:1.1em; color:#948c71; padding-bottom: 3px; margin:0; width:80%;} #content .brad-social{ margin-left: 200px; margin-bottom: 50px; } #content .brad-social h5{ float: left; margin: 0 5px 0 0; padding-top: 5px; } #content .brad-social p{ float: left; width: auto; } #footer a, #content .brad-social a { color:#cec3a1; font-family:arial, verdana,sans-serif; text-decoration:none; background-color:#4e4939; line-height:25px; padding:0 14px 0 24px; display:block; float:left; margin-right:3px; background-repeat:no-repeat; background-position:7px center; } #footer a.sitemap { background:none; padding:0; float:none; display:inline; text-decoration:underline; } #footer a:hover, #content .brad-social a:hover { text-decoration:underline; } #footer .sitemap:hover { text-decoration:none; } #footer #footer-rss-feeds { background-image:url(/images/footer_feed_icon.gif); } #footer #footer-twitter, #content a#brad-twitter { background-image:url(/images/twitter_icon.gif); } #footer #footer-facebook, #content a#brad-facebook { background-image:url(/images/facebook_icon.gif); } #footer #footer-signup-for-e-news { background-image:url(/images/enews_icon.gif); } #footer #footer-podcast { background-image:url(/images/podcast_icon.gif); } #footer #cpm-logo { display:block; width:141px; height:21px; background:url(/images/cpm_logo.gif) no-repeat left top; text-indent:-999em; position:absolute; right:-20px; top:10px; } #footer #cpm-logo:hover { background-position:left bottom; } @media screen and (-webkit-min-device-pixel-ratio:0){ #footer #ea { top:-3px; } } #footer #ea:focus { outline:none; } #footer #signup { position:relative; top:-7px;margin-left:4px; } /* @end */