/* ----------------------------------------------- Beacon - - - - - - - - - - - - - - - - - - - - - - - - Description: Base Setup Styles Filename: beacon.base.css Author: Catch Design Limited (www.catchdesign.co.nz) Date: 4 December 2008 Updated: 2 March 2009 (KAH) Version: v.0.03 ----------------------------------------------- */ /* GLOBAL - Clearfix - Generic - Typography - Forms - Lists - Tables STRUCTURE - Header - Content - Footer - Primary Nav - Secondary Nav DETAIL - Articles - **GUYS, this is where anything from Graphical headers, to section specific styles can go** PLUGINS - **Plugin specific styles here** */ /* =GLOBAL ----------------------------------------------- */ body { background:#73705A url(/_r/img/bg_body.png) repeat-y top center; font: 63.7%/1.4 Arial, sans-serif; color:#000; } /* =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 */ /* =Generic */ a { text-decoration:underline; color:#000; } a:hover { text-decoration: none; } a img, a:hover img { border: none; } a:visited { color:#44D; } .hide { text-indent:-9999em; outline: none; } .alignright { float:right; } .alignleft { float:left; } img.alignright { padding:0; margin:0; } img.alignleft { padding:0; margin:0; } img.right { border:1px solid #CCCCCC; clear:both; float:right; margin:0 0 5px 5px !important; padding:2px; } img.left { border:1px solid #CCCCCC; float:left; margin:0 10px 5px 0 !important; padding:2px; } /* =Typography */ p { font-size:1.2em; line-height:1.43; margin-bottom:.5em; /*clear:left*/} p.intro {font-size:1.6em;} small {} strong {font-weight: bold;} em {font-style:italic;} h1 a { display: block; width:237px; height:85px; background: url(/_r/img/logo_beacon.png) no-repeat left bottom; margin: 0 0 0 -22px;} h2 { font-family: "FS Lola", arial, sans-serif; font-size:2.8em; color:#BDC245; font-weight:bold;} h3 { font-size:1.8em; color:#73705A; font-weight:bold; margin-bottom:8px;} h4 {font-size:1.6em; color:#D75032; font-weight:bold;margin-bottom:9px;} h5 { color:#BDC245; font-size:1.4em; font-weight:bold;margin:20px 0 7px;} #continued_reading h5 {margin: 5px 0 0 0;} #in_this_section h5, #news_archive h5, #refine_your_search h5 {margin: 20px 0 0 0;} h6 { font-size:1.2em; font-weight:bold; text-transform:uppercase; margin:2px 7px 6px;} #L2_heading { text-transform: uppercase; font-size:1.1em; color:#73705A; font-weight: bold; line-height: 1; margin-bottom:5px; display: block;} /* =Forms */ fieldset {padding-bottom:15px;width: 305px;} fieldset.wide {width: auto;} legend { font-size:1.2em; font-weight:bold; margin: 0!important; color:#000; padding: 0 !important;} label {font-size:1.2em; line-height:1.5; display: block; width:90px; float:left; clear:left;margin-bottom:7px;} label.wide {width: 100% !important;} .radio_list label { clear:none;line-height:1;margin-bottom:10px;width:auto !important;} input {} input.textbox { font-size:12px; height:14px;padding:3px 3px; border: none; background: url(/_r/img/bg_input_wide.png) no-repeat 0 0; width: 206px; float:left;margin-bottom:5px;} .radio_list .textbox {margin-left:41px;} input.short {background: url(/_r/img/bg_input_short.png) no-repeat 0 0; width: 153px;} input.radio { float:left;clear:left; margin:0 5px 10px 0;} input.checkbox {} input.submit {} textarea { font-size:1.2em; padding: 2px; width: 296px; height:75px;margin-bottom:7px;} textarea.wide {width: 406px;} select { float:left; margin: 0 5px 10px 0; font-size:1.2em; } #search {float:right;} #search fieldset {margin-bottom:0; width: auto;} #search label {margin-right:8px; font-size:1.2em; width: auto; display: inline; margin-bottom: 0; color:#73705A;} #search input {width:137px; background: url(/_r/img/bg_input_search.png) no-repeat 0 0;} .btn_go {display: block; width:27px; height:19px; background: url(/_r/img/btn_go.png) no-repeat 0 0; float:left;} .btn_go:hover {background-position:bottom left;} a.search_knowledge_base{float:left; color:#73705A;} .new_search {color:#73705A; font-size:1.2em; margin-left:10px;} #subscribe {margin-top: 10px;} .btn_subscribe {display: block; width:76px; height:19px; background: url(/_r/img/btn_subscribe.png) no-repeat 0 0; float:left;margin-bottom:20px;} .btn_subscribe:hover {background-position:bottom left;} #sign_up {} #sign_up fieldset {margin-bottom:0; width: auto;} #sign_up label {font-size:1.1em; width:65px;} #sign_up .textbox {background: url(/_r/img/bg_input.png) no-repeat 0 0; width: 169px;} #sign_up #btn_submit {margin-top: 0;} #form_contact_us {} #register_L1 form {} #register_L1 form fieldset { width: 470px;} #register_L1 form label { width: 200px;} #register_L1 form.radio_list {margin-left: 200px;} #search_form {} fieldset.inline {width:auto; padding: 10px 0 0;} fieldset.inline p {float:left;margin-right:10px; clear:none; font-weight:bold;} fieldset.inline label {clear:none;margin-right:10px;width:auto; line-height:1.4} fieldset.inline .radio {clear:none;margin-top:3px;} #log_in_holder {position: relative;} #log_in {position: absolute; background: url(/_r/img/bg_login.png) no-repeat 0 0; width: 247px; padding-top: 10px; top: -7px; left:-10px;} #log_in_form { background: #fff; padding: 5px; border: 1px solid #999; border-top: none;} #log_in_form fieldset { width: 235px; padding-bottom:0;} #log_in_form label { font-size:1.1em; width: 60px;} #log_in_form .textbox {background: url(/_r/img/bg_input.png) no-repeat 0 0; width: 169px;} #forgot_password {margin-left: 60px; font-size:1.1em; display: block;} #log_in_form #btn_submit {margin-top: 10px;} #sign_up_holder {position: relative;} #sign_up_newsletter {position: absolute; top: 20px; left:-10px; background: url(/_r/img/hdr_whitebox.png) no-repeat 0 0; padding-top:14px; display: none} #sign_up_holder #sign_up_newsletter .wrap {padding:5px 10px; background: #fff url(/_r/img/ftr_whitebox.png) no-repeat bottom left;} #sign_up_newsletter fieldset {width:240px;} /* =Lists */ ul { font-size:1.2em; margin:10px 0 15px 15px;} ul li {list-style:disc;} ul li ul {font-size:1.0em;} ul li ul li {padding-left:5px;} ol { padding-left: 20px;font-size:1.2em;} ol li {list-style:decimal;} li { padding-left:3px;} li p {font-size:1em;} #content li {margin-bottom:4px;} .no_bullets {margin-left: 0;} .no_bullets li{ list-style: none; padding-left: 0;} .radio_list {font-size:1em;} li.list_links { list-style:none; margin-left: -20px; } li.list_links a { padding-left: 20px !important; display:block;background: url(/_r/img/icon_arrow.png) no-repeat 8px 4px !important; } a.list_links { background:none; padding-left:0; } .rss_icon{background:transparent url(/_r/img/icon_rss.png) no-repeat scroll left center;width:16px;height:16px;display:block;text-indent:-999em;float:left;margin-left:10px;outline:none;} .greybox p {margin-bottom:5px;} .greybox ul {margin:0 0 7px 0;} .greybox a {text-decoration: none;} .greybox a:hover {text-decoration: underline;} #news_archive.greybox a {text-decoration: underline;} #news_archive.greybox a:hover {text-decoration: none;} #news_archive.greybox a.selected {text-decoration: none; font-weight:bold;} .greybox p a { padding: 2px 8px; display:block;} .greybox p a.selected {background: #fff; color:#D75032; text-decoration:underline;} .greybox li {} .arrows li a { text-decoration: none; padding-left: 20px; display:block;background: url(/_r/img/icon_arrow.png) no-repeat 8px 4px;} .arrows li a:hover {text-decoration: underline; background-position: 8px -58px;} .arrows li a.selected {color:#D75032; background: #fff url(/_r/img/icon_arrow_selected.png) no-repeat 8px 4px;font-weight:bold;} .arrows li a.selected:hover {color:#D75032; background: #fff url(/_r/img/icon_arrow_selected.png) no-repeat 8px 4px;} .arrows ul li a { text-decoration: none; margin-left: 10px; padding-left: 20px; display:block;background: url(/_r/img/icon_arrow.png) no-repeat 8px 4px;} .arrows ul li a:hover {text-decoration: underline; background-position: 8px -58px;} .arrows ul li a.selected {color:#D75032; background: #fff url(/_r/img/icon_arrow_selected.png) no-repeat 8px 4px;font-weight:bold;} .arrows ul li a.selected:hover {color:#D75032; background: #fff url(/_r/img/icon_arrow_selected.png) no-repeat 8px 4px;} .no_padding a {background-position: 0 4px !important; padding-left:15px !important;} .no_padding a:hover {background-position: 0 -58px !important; padding-left:15px !important;} .no_padding a.selected:hover {color:#D75032; background: #fff url(/_r/img/icon_arrow_selected.png) no-repeat 0 4px !important; padding-left:15px !important;} /* =Tables */ table { margin:10px 0; border:1px solid #ccc; } td { padding:10px; vertical-align:top; } td ul { margin-top:0; } hr {border: none; height:1px; border-top:1px dashed #C4C4C4;margin:20px 0 10px;} /* =STRUCTURE ----------------------------------------------- */ #container {width: 960px; margin: 0 auto;} /* Header */ #header { height:213px; width:960px; background: url(/_r/img/bg_header.png) no-repeat 0 0;} #header .wrap {padding: 11px 50px;} #header .documents{float:left;font-size:1.2em;margin-left:8px;} #header .documents a{font-weight:bold;color:#73705A; border-left:1px solid black; margin-right:5px; padding-left:8px;} /* Content */ #content {background:url(/_r/img/bg_content.png) repeat-y 0 0;} #content .wrap {padding: 24px 50px 10px; background-position:857px 15px; background-repeat: no-repeat;} #content .sec_level {padding: 21px 50px 10px 83px !important;} #content .top_level {padding: 21px 50px 10px 83px;} .columns {margin-top: 20px;} .col_left {width: 645px;} .top_level .col_left {width:483px;} .wide .outline .col_left {width: 470px;} .outline .narrow .col_left {width: 400px;} #in_this_section {width:235px; background: #F5F5F5 url(/_r/img/hdr_continued_reading.png) no-repeat 0 0;margin:0 0 10px 10px;} #in_this_section .wrap {padding: 0 11px 2px;background: url(/_r/img/ftr_in_this_section.png) no-repeat bottom left;} #news_archive {width:317px; background: #F5F5F5 url(/_r/img/hdr_news_archive.png) no-repeat 0 0;margin:0 0 20px ;} #news_archive .wrap {padding:5px 19px 10px;background: url(/_r/img/ftr_greybox_wide.png) no-repeat bottom left;} #continued_reading { background: #F5F5F5 url(/_r/img/hdr_section_index.png) no-repeat 0 0; margin-top:10px; } #continued_reading .wrap {padding:23px 18px 20px; background: url(/_r/img/ftr_continued_reading.png) no-repeat bottom left;} .sub_col_left {width: 200px; margin-right:5px;} .sub_col_mid {width: 200px;} .sub_col_right {width: 200px;} .col_right {width: 191px;} .top_level .col_right {width:317px;} .wide .outline .col_right {width: 270px;} .outline .narrow .col_right {width: 382px;} /* Footer */ #footer { background: #f5f5f5 url(/_r/img/bg_footer.png) no-repeat 0 0; padding:42px 0 150px; color:#73705A;} #footer .wrap {padding: 15px 50px;} /* Primary Nav */ #primary_nav {margin: 32px 0 0 0;} #primary_nav li {display: inline; border-left:1px solid #73705A;padding:0 7px 0 10px;} #primary_nav .first {border-left:none; padding-left:0;} #primary_nav a {color:#73705A; text-decoration: none;font-weight:bold;} #primary_nav a:hover, #primary_nav a.selected {color:#ABB03F;} /* Secondary Nav */ /* User Nav */ #top_holder {height: 48px;} #user_nav {} #user_nav p {color:#73705A; font-weight: bold;} #user_nav a {color:#73705A;} span.selected {color:#AAAE3E;} /* Footer nav */ #footer_nav { margin:0 0 .5em 0;} #footer_nav li {display: inline; border-left:1px solid #73705A;padding:0 7px 0 10px;} #footer_nav .first {border-left:none; padding-left:0;} #footer_nav a {color:#73705A; text-decoration: none;} #footer_nav a:hover {text-decoration: underline;} /* =DETAIL ----------------------------------------------- */ /* Page icons */ #about_us_L1 {background: url(/_r/img/icon_about_us_sub.png) no-repeat 26px 5px !important;} #further_research { background-image: url(/_r/img/icon_further_research_grey.png);} #further_research_L1 {background: url(/_r/img/icon_further_research_sub.png) no-repeat 26px 5px !important;} #new_homes { background-image: url(/_r/img/icon_new_homes_grey.png);} #neighbourhoods { background-image: url(/_r/img/icon_neighbourhoods_grey.png);} #neighbourhoods_L1 { background: url(/_r/img/icon_neighbourhoods_sub.png) no-repeat 26px 5px !important;} #existing_homes { background-image: url(/_r/img/icon_existing_homes_grey.png);} #existing_homes_L1 { background: url(/_r/img/icon_existing_homes_sub.png) no-repeat 26px 5px !important;} #contact_us_b_L1 { background: url(/_r/img/icon_contact_us_b_sub.png) no-repeat 26px 5px !important;} #new_homes { background-image: url(/_r/img/icon_new_homes_grey.png);} #new_homes_L1 { background: url(/_r/img/icon_new_homes_sub.png) no-repeat 26px 5px !important;} #sustainable_homes { background-image: url(/_r/img/Pale_homesmart.jpg);} #sustainable_homes_L1 { background: url(/_r/img/Dark_homesmart.jpg) no-repeat 26px 5px !important;} #register_L1 { background: url(/_r/img/icon_register_sub.png) no-repeat 26px 5px !important;} #news { background-image: url(/_r/img/icon_news_grey.png);} #news_L1 { background: url(/_r/img/icon_news_sub.png) no-repeat 26px 5px !important;} /* Articles */ .bct, .bct a {color:#73705A;} ul.bct { margin-left: 0;} ul.bct li { display: inline;margin-right:0.1em; padding-left:0;} .item {margin-bottom:15px;} /* .columns .col p img {border: 10px solid #F3F3F3; margin-bottom: 10px;} */ .columns .col p img {margin: 10px;} /* Photos */ .bordered {background: url(/_r/img/bg_photo.png) no-repeat 0 0; padding: 10px; margin-bottom: 10px;} .imagecaption {font-size:11px !important; line-height:1.3;margin:0 5px;} /* Blockquote */ .blockquote { background: #FFF url(/_r/img/bg_pull_quote_top.png) no-repeat top center; padding-top: 26px; margin-top:20px;} blockquote {background: url(/_r/img/bg_pull_quote_bottom.png) no-repeat center bottom; padding: 24px 12px 50px; font-size:1.6em; color:#73705A; text-align:center;} /* Buttons */ .btn {display: block; height:30px;background: url(/_r/img/buttons.png) no-repeat 0 0;} #btn_contact_new_homes_team {width:221px; margin-right: 26px; background-position: 0 0;} #btn_contact_new_homes_team:hover {background-position: -248px 0;} #btn_contact_beacon {width:141px; margin-right: 177px; background-position: 0 -120px;} #btn_contact_beacon:hover {background-position: -248px -120px;} #btn_contact_existing_homes_team {width:244px; margin-right: 20px; background-position: 0 -30px;} #btn_contact_existing_homes_team:hover {background-position: -248px -30px;} #btn_contact_neighbourhoods_team {width:248px; margin-right: 0; background-position: -1px -262px;} #btn_contact_neighbourhoods_team:hover {background-position: -249px -262px;} #btn_contact_water_team {width:189px; margin-right: 76px; background-position: 0 -60px;} #btn_contact_water_team:hover {background-position: -248px -60px;} #btn_contact_energy_team {width:195px; margin-right: 76px; background-position: 0 -90px;} #btn_contact_energy_team:hover {background-position: -249px -90px;} #btn_contact_ieq_team {width:175px; margin-right: 96px; background-position: 0 -202px;} #btn_contact_ieq_team:hover {background-position: -249px -202px;} #btn_contact_systems_team {width:204px; margin-right: 67px; background-position: 0 -232px;} #btn_contact_systems_team:hover {background-position: -249px -232px;} #btn_submit {width:68px; background-position: -166px -176px; height:26px; margin-top:20px;} #btn_submit:hover {background-position: -234px -176px;} .greybox #btn_submit { background-position: -160px -150px;} .greybox #btn_submit:hover {background-position: -228px -150px;} #btn_accept {width: 78px; background-position: 0 -150px; height:26px; margin-top:20px;} #btn_accept:hover {background-position: -82px -150px;} .btn_back_to_top {background: url(/_r/img/btn_back_to_top.png) no-repeat 0 2px; padding-left: 19px;} .btn_find_out_more { background: url(/_r/img/btn_find_out_more.png) no-repeat 0 2px; padding-left: 19px; margin-top:5px;} .btn_find_out_more:hover {background-position: 0 -24px;} #btn_sign_up {color:#D75032; text-decoration: none;} #btn_sign_up:hover {text-decoration: underline;} .prev {width:33px; margin-right: 0; background-position: -404px -120px;} .prev:hover {background-position: -404px -150px;} .next {width:33px; margin-right: 0; background-position: -437px -120px;} .next:hover {background-position: -437px -150px;} /* Outline box */ .outline { background: url(/_r/img/bg_hdr_outline.png) no-repeat 0 0;padding-top:20px;} .outline .wrap { background: url(/_r/img/bg_ftr_outline.png) no-repeat bottom left !important;padding:0 20px 34px !important;} .wide .outline { background: url(/_r/img/bg_hdr_outline_wide.png) no-repeat 0 0;padding-top:20px;} .wide .outline .wrap { background: url(/_r/img/bg_ftr_outline_wide.png) no-repeat bottom left !important;padding:0 48px 34px 34px !important;} .wide .outline .narrow {padding:0 28px 34px 34px !important} .wide .skinny {background: url(/_r/img/hdr_outline_skinny.png) no-repeat 0 0 !important; width: 182px; padding-top:15px;} .wide .skinny .wrap {padding:0 12px 3px !important; background: url(/_r/img/ftr_outline_skinny.png) no-repeat bottom left !important;} .wide .skinny .wrap p {text-align: center;} .wide .skinny .wrap img {margin:0 0 5px -11px;} /* News Archive */ #news_archive ul {margin-right: 20px;} /* Homepage specific */ #home #content .wrap {padding-top: 1px;} #home .col_left {width: 540px;} #home .col_right {width: 284px;} #home h2 {color: #D75032; font-size:2.8em;} #home #latest_news {width:274px; background: #F5F5F5 url(/_r/img/hdr_latest_news.png) no-repeat 0 0;margin:0 0 10px 10px;} #home #latest_news .wrap {padding: 0 19px 10px;background: url(/_r/img/ftr_greybox_wide.png) no-repeat bottom left;} #home .greybox a {padding: 0; text-decoration: underline;} #home .greybox a:hover {text-decoration: none;} #home .tri_col_left, #home .tri_col_right {width: 277px; background: url(/_r/img/hdr_outline_narrow.png) no-repeat 0 0;padding-top:16px;} #home .tri_col_left {margin-right: 14px;} #home .outline {background: url(/_r/img/ftr_outline_narrow.png) no-repeat bottom left;padding:0 20px 15px 15px;min-height:210px;} /* for Internet Explorer */ /*\*/ * html div.outline {height: 210px !important;} /**/ #home h3 {font-size:2.2em;} #home h4 {font-size:1.8em; color:#BDC245; margin-bottom: 0;} #home .wide .col_left {width: 575px;} #home .holder {width: 150px;} #home #sign_up_newsletter {width:274px; background: #F5F5F5 url(/_r/img/hdr_sign_up_newsletter.png) no-repeat 0 0;margin:0 0 10px 10px;} #home #sign_up_newsletter .wrap {padding: 0 14px 12px 20px;background: url(/_r/img/ftr_greybox_wide.png) no-repeat bottom left;} /* About Us */ #about_us .col_left {width: 217px} #about_us .col_right {width: 600px;} #about_us hr{margin:10px 0 10px 0;} .about_us_nav ul li a:hover, .about_us_nav ul li a.selected {background:#fff url(/_r/img/icon_arrow_selected.png) no-repeat 8px 5px;} .about_us_nav ul li a{text-decoration:none;display:block;padding-left:22px} .about_us_nav ul li{list-style-type:none; font-weight:bold; text-transform:capitalize;padding-left:0;} .about_us_nav {background:#f5f5f5 url(/_r/img/about_nav_top.png) no-repeat top left;margin:0;width:190px;padding:15px 0 0 0;} .about_us_nav ul{margin:0;} .about_us_bottom{background:#f5f5f5 url(/_r/img/about_nav_bottom.png) no-repeat bottom left;height:20px;display:block;} table.staff_list td { vertical-align:top; } table.staff_list td img { margin:4px 10px 0 0; } /* Search results */ #search_page ul li a {padding-left: 0 !important;} #search_page .col_left {width: 235px} #search_page .col_right {width: 600px;} #search_page #refine_your_search {width:235px; background: #F5F5F5 url(/_r/img/hdr_refine_your_search.png) no-repeat 0 0;margin:0 0 10px 0;} #search_page #refine_your_search .wrap {padding: 6px 19px 2px;background: url(/_r/img/ftr_in_this_section.png) no-repeat bottom left;} #search_page .greybox a {text-decoration: underline;} a.icon { background: url(/_r/img/icons.png) no-repeat 0 0; padding-left: 18px; margin-right: 10px;} a.ascending {background-position: 0 -28px} a.ascending.selected, a.ascending:hover {background-position: 0 2px;} a.descending {background-position: 0 -88px;} a.descending.selected, a.descending:hover {background-position: 0 -58px;} #icon_remove {background-position: 0 -118px; margin-left: 5px; width: 12px; height:12px;} /* News */ .next_prev .alignright, .next_prev .alignleft{clear:none;} .next_prev {margin-top:10px;} /* =PLUGINS ----------------------------------------------- */