/* ----------------------------------------------- Northpoint - - - - - - - - - - - - - - - - - - - - - - - - Description: Base Setup Styles Filename: northpoint.base.css Author: Hamish Stevenson / Catch Design Limited (www.catchdesign.co.nz) Date: 18 February 2007 Updated: 18 February 2007 ----------------------------------------------- */ /* =Global Styles ----------------------------------------------- */ body { background: #695f55; margin:0; padding:0; font: 63.7%/1.5em "Lucida Grande" Geneva, Arial, Helvetica, sans-serif; color: #333;} *html body { text-align: center; } /* =Generic styles */ img { border:0; padding:0; margin-bottom:0 } a, a:visited { color:#4b7ec0; text-decoration:underline;} a:hover { text-decoration:none;} a img { border:none;} .hide { position:absolute; left:-2000px; width:999px;} .alignleft { float:left;} .alignright { float:right;} img.alignleft { float:left; margin: 0 5px 5px 0;} .margin-none { margin:0;} .blue { color: #4C6A86; } .morelink { background: url(../img/icon-arrow.gif) left no-repeat; font-size: 1.1em; margin: 10px 0; padding: 0 0 0 18px; } .large { font-size: 130%; } blockquote { color: #999; padding: 3px 0; margin: 10px 20px; font: 1.7em/1.3 Georgia, "Times New Roman", Times, serif; border-bottom: 1px solid #eee; } p, address { font: 1.2em/1.3 "Lucida Grande" Geneva, arial,sans-serif; margin:0.2em 0 0.8em 0; } small { font: 1.0em/1.2 "Lucida Grande", Geneva, Arial, sans-serif; color:#f60; margin:0 0 0.5em 0; } ul, ol, td { font: 1.2em/1.3 "Lucida Grande", Geneva, Arial, sans-serif; margin: 10px 0 10px 3px; } label, input, textarea { font: 1.2em/1.4 "Lucida Grande", Geneva, Arial, sans-serif; margin:0 0 0.5em 0; } input.textbox { padding: 3px; color: #999; } select { font: 1.2em "Lucida Grande", Geneva, Arial, sans-serif; color: #000; padding: 1px; } dl, dt, dd { font: 1.1em/1 "Lucida Grande", Geneva, Arial, sans-serif; margin:0 0 0.5em 0; } fieldset { border: 0; margin: 0; } legend { display: none; } h2 { font: 2.0em/1.2 "Trebuchet MS", Geneva, Arial, sans-serif; color: #000; margin: 0; padding: 0; } h3 { font: bold 1.5em/1 "Lucida Grande", Geneva, Arial, sans-serif; color:#000; margin:0.9em 0 0.2em 0; } h4 { font: bold 1.3em/1.2 normal "Lucida Grande", Geneva, Arial, sans-serif; color: #695F55; margin: 0;} /* Hacks that can't be avoided in this file */ /* =Clearfix */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-table;} /* Hides from IE-mac \*/ .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* =collapse lists */ ul.nav, ul.nav li { display:inline; margin:0; padding:0; list-style:none;} /* =Structure ----------------------------------------------- */ #container { margin-bottom: 10px; margin-left: 0; } *html #container { text-align: left; } /* Masthead */ #masthead { width: 100%; height: 137px; background: #ebeaea; } #masthead-wrap { width: 826px; height: 100%; margin: 0 auto; background: url(../img/bg-masthead-wrap.gif) repeat-y; } #masthead-content { position: relative; width: 750px; height: 107px; border-top: 5px solid #695f55; margin: 0 auto; background: #f4f3f4 url(../img/img-swirl.jpg) 12px bottom no-repeat; } body#landing #masthead-content { height:137px; } body#business #masthead-content { height:131px; } #masthead h1 { position: absolute; top: 64px; left: 15px; display: block; margin: 0; } #masthead h1 span { display: none; } body#business #masthead h1 { top:82px; } body#landing #masthead h1 { height: 40px; width: 228px; background: url(../img/logo-northpoint.gif) no-repeat; } body#church #masthead h1 { height: 40px; width: 352px; background: url(../img/logo-northpoint_church.gif) no-repeat; } body#church #masthead h1 a { display: block; height: 40px; width: 352px; } body#community #masthead h1 { height: 40px; width: 426px; background: url(../img/logo-northpoint_community.gif) no-repeat; } body#community #masthead h1 a { display: block; height: 40px; width: 426px; } body#lifecare #masthead h1 { height: 40px; width: 357px; background: url(../img/logo-northpoint_lifecare.gif) no-repeat; } body#lifecare #masthead h1 a { display: block; height: 40px; width: 357px; } body#business #masthead h1 { height: 40px; width: 392px; background: url(../img/logo-northpoint_business.gif) no-repeat; } body#business #masthead h1 a { display: block; height: 40px; width: 392px; } #masthead #searchBox { z-index: 1; background: #695f55 url(../img/bg-nav_item.gif) left repeat-y; width: 320px; position: absolute; top: 50px; right: 5px; padding: 10px; border: 1px solid #ccc;} #masthead #searchBox .searchField { color: #000; float: left; height: 18px; width: 250px; font-size: 13px; padding: 3px 5px 0px 5px; margin: 0px 4px 0px 0px;} #masthead #searchBox .searchButton { float: right;} /* Global Links */ #global-links { position: absolute; top: 0px; text-align: center; height: 20px; width: 260px; right: 20px; background: url(../img/bg-global_nav.gif) top no-repeat; } #global-links ul { font-size: 1.1em; margin: 0; padding: 0; } #global-links li { margin: 0 2px; } #global-links li a { margin: 0 font-size: 9px; color: #ccc; text-decoration: none; } #global-links li a:hover, #masthead #global-links li a.current { color: #fff; } /* Masthead Links */ #masthead-links { position: absolute; top: 10px; right: 20px; text-align: right; } #masthead-links ul { margin: 0; padding: 0; } #masthead-links li { margin: 0; color: #666667; } #masthead-links li a { color: #666667; text-transform: lowercase; text-decoration: none; } #masthead-links li a:hover { text-decoration: underline; } /* Primary Nav */ #nav { width: 750px; height: 25px; margin: 0 auto; } ul#primary-nav { padding: 0; margin: 0; background: #695f55; } #primary-nav li { float: left; margin: 0; background: #695f55 url(../img/bg-nav_item.gif) left; } #primary-nav li a { float: left; font: normal 1.1em/1.6 "Lucida Grande" Arial, Helvetica, sans-serif; display: block; height: 20px; padding: 4px 10px 1px 10px; height: 100%; text-decoration: none; color: #fff; } #primary-nav li a:hover, #primary-nav li a.current { background: #ccc url(../img/bg-nav_item-over.gif) left; color: #333; } #primary-nav-6 a { background: none; } /* Secondary Nav */ #secondary-nav { margin: 0; padding: 0; } #secondary-nav li { width: 207px; height: 32px; line-height: 2.5; font-size: 1.2em; } #secondary-nav li a { padding: 0 0 0 10px; color: #4b7ec0; display: block; width: 197px; height: 32px; border-bottom: 1px solid #ccc; text-decoration: none; } #secondary-nav li a:hover, #secondary-nav li a.current { color: #666667; background: url(../img/bg-sec_nav.gif) no-repeat; } /* Content */ #content-outter { width: 100%; background: #f2f2f2; } #content-wrap { width: 826px; margin: 0 auto; background: url(../img/bg-content-wrap.gif) repeat-y; } #content { width: 750px; height: 100%; margin: 0 auto; background: #fff; } *html #content { text-align: left; } body#landing #content-image { width: 750px; height: 194px; background: url(../img/img-landing-01.jpg) no-repeat; } body#church #home-image, body#church .header-image { width: 750px; height: 194px; border-bottom: 6px solid #bab9ba; } #content #col-inside-1 ul { list-style-type: none; padding: 0 0 0 15px; margin: 10px 5px; } #content #col-inside-1 ul li { padding: 0 0 1px 13px; margin: 0 0 4px 0; background: url(../img/bullet-green.gif) left no-repeat; } /* Header images */ body#church #header-church-about { background: url(../img/img-header-church-about.jpg) no-repeat; } body#church #header-church-groups { background: url(../img/img-header-church-groups.jpg) no-repeat; } body#church #header-church-families { background: url(../img/img-header-church-families.jpg) no-repeat; } body#church #header-church-families-kids { background: url(../img/img-header-church-kids.jpg) no-repeat; } body#church #header-church-resources { background: url(../img/img-header-church-resources.jpg) no-repeat; } body#church #header-church-connect { background: url(../img/img-header-church-connect.jpg) no-repeat; } body#church #header-church-news { background: url(../img/img-header-church-connect.jpg) no-repeat; } /* 3 columns on home pages */ #content-home { background: url(../img/bg-3-col.png) repeat-y; } #col-home-1, #col-home-2, #col-home-3 { width: 210px; float: left; padding: 30px 20px 10px 20px; } /* 2 columns on home pages */ #content-inside { background: url(../img/bg-2-col.png) repeat-y; } #col-inside-1 { width: 460px; float: left; padding: 30px 20px 10px 20px; } #col-inside-2 { width: 210px; float: left; padding: 30px 20px 10px 20px; } /* Lates News */ .article { padding: 5px 0; border-bottom: 1px dotted #ccc; } li.latest-news a { margin: 10px 0 0 0; display: block; width: 136px; height: 29px; background: url(../img/btn-latest_news.gif) 0 0 no-repeat; } li.latest-news a:hover { background-position: 0 -29px; } /* Quicklinks */ ul#quicklinks ul { margin: 0; } ul#quicklinks li a { display: block; width: 207px; height: 44px; padding: 0; margin: 13px 0 0 0; } ul#quicklinks li a:hover { background-position: 0px 0px !important; } ul#quicklinks #men a { background: url(../img/img-ministry-men.jpg) -207px 0px no-repeat; } ul#quicklinks #women a { background: url(../img/img-ministry-women.jpg) -207px 0px no-repeat; } ul#quicklinks #youth a { background: url(../img/img-ministry-youth.jpg) -207px 0px no-repeat; } ul#quicklinks #children a { background: url(../img/img-ministry-children.jpg) -207px 0px no-repeat; } ul#quicklinks #mission a { background: url(../img/img-ministry-mission.jpg) -207px 0px no-repeat; } ul#quicklinks #ql_services a { background: url(../img/img-ministry-services.jpg) -207px 0px no-repeat; } ul#quicklinks #ql_news a { background: url(../img/img-ministry-news.jpg) -207px 0px no-repeat; } ul#quicklinks #ql_sermons a { background: url(../img/img-ministry-sermons.jpg) -207px 0px no-repeat; } ul#quicklinks #ql_connect a { background: url(../img/img-ministry-connect.jpg) -207px 0px no-repeat; } ul#quicklinks #ql_aboutus a { background: url(../img/img-ministry-about_us.jpg) -207px 0px no-repeat; } ul#quicklinks #ql_programmes a { background: url(../img/img-ministry-programmes.jpg) -207px 0px no-repeat; } ul#quicklinks #ql_services_comm a { background: url(../img/img-ministry-services_2.jpg) -207px 0px no-repeat; } ul#quicklinks #ql_comingup a { background: url(../img/img-ministry-coming_up.jpg) -207px 0px no-repeat; } ul#quicklinks #ql_contactus a { background: url(../img/img-ministry-contact.jpg) -207px 0px no-repeat; } /* Upcoming Events */ .event { padding: 5px 0; border-bottom: 1px dotted #ccc; } /* Landing Page Styles only */ #landing-1, #landing-2, #landing-3, #landing-4 { float: left; padding: 0 0 10px 0; height: 260px; } #landing-1 { width: 188px; } #landing-2 { width: 187px; background: #fdfefb url(../img/bg-landing-divs.gif) left repeat-y; } #landing-3 { width: 187px; background: #fdfefb url(../img/bg-landing-divs.gif) left repeat-y; } #landing-4 { width: 188px; background: #fdfefb url(../img/bg-landing-divs.gif) left repeat-y; } body#landing #content p { margin: 5px 13px; color: #666; } body#landing #content h2 { margin: 0 0 20px 0; } body#landing #content h2 span { display: none; line-height: 1; } body#landing #content h2 a { display: block; height: 42px; } body#landing #content h2 a:hover { background-position: 0px -42px !important; } body#landing #content h2#church a { width: 188px; background: url(../img/nav-church.gif) 0px 0px no-repeat; } body#landing #content h2#trust a { width: 187px; background: url(../img/nav-trust.gif) 0px 0px no-repeat; } body#landing #content h2#lifecare a { width: 187px; background: url(../img/nav-lifecare.gif) 0px 0px no-repeat; } body#landing #content h2#future a { width: 188px; background: url(../img/nav-future.gif) 0px 0px no-repeat; } /* Sitemap */ ul#sitemap { background: none; } ul#sitemap li { font-size: 1.4em; background: none !important; } ul#sitemap li ul { margin: 0 0 10px 10px; padding: 0; } ul#sitemap li li { font-size: 80% !important; } /* Footer */ #footer { width: 100%; background: #695f55 url(../img/bg-footer-wrap.gif) top repeat-x; padding: 0; } *html #footer-content { text-align: left; } #footer-content { width: 770px; height: 100%; margin: 0 auto; background: url(../img/bg-footer.gif) top no-repeat; padding: 70px 0 30px 50px; } body#church #footer-content { padding-top: 20px; } #footer-content p { color: #fff; font-size: 1.1em; } #footer-content ul { padding: 0; margin: 10px 0; } #footer-content li { color: #fff; font-size: 1.0em; } #footer-content a { color: #fff; } #footer-content p#service-times { font-size: 1.3em; background: url(../img/img-service_times.gif) left no-repeat; padding: 5px 0 0 120px; } #footer-content #contact-info { float: right; width: 215px; text-align: right; margin: 5px 50px 0 0; } #footer-content #contact-info address { color: #fff; font-style: normal; font-size: 1.2em; } /* Podcasts */ .article_meta li {}