/* ----------------------------------------------- Crackerjacks - Application - - - - - - - - - - - - - - - - - - - - - - - - Description: Appliation Base Setup Styles Filename: crj.base.css Author: Kent Humphrey & Hamish Stevenson / Catch Design Limited (www.catchdesign.co.nz) Date: 4 December 2007 Updated: 15 July 2008 (KAH) Version: v.2.131 ----------------------------------------------- */ /* =Global Styles ----------------------------------------------- */ * { padding: 0; margin: 0; } body { background: #fff url(../img/bg_body.png) center top repeat; margin: 0; padding: 0; font: 63.7%/1.4 Helvetica, Arial, sans-serif; color: #333; text-align:center; } /* =GENERIC STYLES */ img { border: 0; padding: 0; } a { outline:none; color: #2eb7b7; text-decoration: underline; } a:hover { text-decoration: none; } a img, a:hover img { border: none; } .hide { text-indent: -5000em; outline:none; } p { font: 1.2em/1.4 Helvetica, Arial, sans-serif; margin: 0 0 0.8em 0; color: #333; } small { font-size: 1.1em; } strong { font-weight: bold; } ul, ol { font: 1.2em/1.4 Helvetica, Arial, sans-serif; margin: 0 0 0.8em 0; } img.right { float:right; } .alignleft { float:left; } .alignright { float:right; } /* 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 */ /* =HEADERS ----------------------------------------------- */ h1 a { display: block; width: 280px; height: 90px; background: url(../img/logo_crj.png) no-repeat 0 0; float: left; margin: 30px 0 0 37px; } * html h1 a { margin-left: 18px; } h2 { font-size: 3.5em; color: #000; letter-spacing:-0.01em; font-weight:bold; float:left } h2 em {font-weight:bold; color:#666;} h3 { font: bold 2.4em/1.4 Helvetica, Arial, sans-serif; color: #171717; margin-bottom:.6em; } h3 a { color:#000; } h4 { font: normal 1.8em/1.4 Helvetica, Arial, sans-serif; color: #333; margin-bottom:.4em; } .teal h4 {color:#fff;} h5 { font: 1.4em/1.4 Helvetica, Arial, sans-serif;} /* =STRUCTURE ----------------------------------------------- */ .wrap { width: 980px; margin: 0 auto; text-align: left; } /* masthead */ #masthead { width: 100%; background-color:#1d1d1d; } #masthead .wrap { height: 140px; background: url(../img/bg_logo.png) no-repeat 24px 0; position: relative; } #content {width: 980px; margin: 0 auto; text-align:left; background-color:#fff;} /* columns */ #col1 {width: 692px; float: left;margin:0 0 29px 19px;display:inline /* fixes IE double margin */ } #col1 div.wide {width: 942px;} #col2 {width: 235px; float: left;margin-left:14px; } #col1_inner { width:150px; float:left; } #col2_inner { width:495px; float:right; } /* footer */ #footer {color: #999;background:#1d1d1d; border-top: 1px solid #a5a5a5; width: 980px;} #footer a {color: #ccc;} #footer #copyright {padding: 1px 0 1px 1px; font-size: 1.1em; } ul.no_footer {margin:30px; font-size: 1.1em;} ul.no_footer li {display:inline; margin-right:10px;} ul.no_footer a {color: #999 !important;} /* footer left */ #footer .left {background:url(../img/bg_footer_left.png) no-repeat top left; width: 383px; height: 182px; margin: 29px 0 51px 61px; float:left; display:inline /* fixes IE double margin */} #footer .left h4 {padding: 20px 10px 10px 23px; color:#ccc;} #footer .left ul {float:left; font-size:1.1em; margin:0 30px 0 23px;display:inline /* fixes IE double margin */} #footer .left li {padding-bottom:.2em} #footer .left li.major {padding-bottom:.7em} #footer .left li.last {padding-bottom:1em} #footer .left li a { color:#999;} #footer .left li.major a {color:#ccc;} /* footer right */ #footer .right {width: 453px; float:right; margin:49px 35px 0 0;display:inline /* fixes IE double margin */} #footer .right h4 {color:#ccc;} #footer .right p {font-size:1.5em; color:#999;} /* =FORMS ----------------------------------------------- */ form {/*margin-top:15px;*/} fieldset { border: 0; margin: 0; padding: 0; } legend { color: #333; font-size:1.2em; padding-top:10px; } label {font-size:1.4em;} select {font-size: 1.4em; margin-left: 15px; float: left;} option { padding-right:10px; } textarea { margin-left:15px; font-size:1.4em; width: 221px; padding: 3px; font-weight: bold; float: left; font-family:Helvetica, Arial, sans-serif; height: 4em; } textarea.large {height:10em; width: 221px;} input.textbox {margin-left: 15px; font-size:1.4em; width: 221px; padding: 3px; font-weight: bold; float: left;} input.short {width: 4em; } /* formline */ .formline {clear:both; margin:10px 0 20px;} .formline label {text-align: right; width: 205px; float:left; display: block;line-height:1.7;} .inline label {float:left; margin-left:1em;} .inline select {font-size:1.2em; margin-left:1em;} /* form col */ .form_col {float:left; width: 187px;} .form_col.last {float: right;} .form_col label {} .form_col input.textbox {margin-left:0; width:175px;} /* poll */ fieldset.poll ul {/*padding-bottom:1em;*/} fieldset.poll li {margin-bottom:0.2em; color:#666;} fieldset.poll label {margin-left:8px; vertical-align:middle; font-size:1.1em;} fieldset.poll li input { vertical-align:middle; } div.note {display: block; width: 198px; float: right;color:#666; font-size:1.1em; } /* radio buttons */ fieldset.radio .formline {margin-bottom: 10px;} fieldset.radio ul { float: left; margin: 0 0 0 10px !important; font-size:1em; } fieldset.radio li {float: left; list-style:none !important; } fieldset.radio li input {font-size: 1.2em; margin: 4px 5px 0 0; } fieldset.radio li input, fieldset.radio li label { float: left; } fieldset.radio ul label {font-size:1.4em; margin: 0 20px 0 0; width: auto; font-weight: bold;} /* checkboxes */ fieldset.checkbox .formline {margin-bottom: 10px;} fieldset.checkbox ul {float: left; margin: 0 0 0 10px !important; font-size:1em; } fieldset.checkbox li {float: left; list-style:none !important; } fieldset.checkbox li input {font-size: 1.2em; margin: 4px 5px 0 0; } fieldset.checkbox li input, fieldset.checkbox li label { float: left; } fieldset.checkbox ul label {font-size:1.4em; margin: 0 20px 0 0; width: auto; font-weight:bold} /* terms and conditions */ #terms {height: 200px; overflow:scroll; border: 1px solid #ccc; padding: 5px; margin:20px 0; background-color:#fff; } ul.terms {margin-left:220px !important;} ul.terms li label {font-weight: bold; font-size:1.4em; text-align: left} /* checklists */ .location_checklist, .role_checklist { width:27em; margin-left: 15px;} .location_checklist label, .role_checklist label {display:block; padding:0 0.2em 0 0; text-align: left; width:18em;} .location_checklist li, .role_checklist li {float:left; width:14em; margin: 0 !important;} .location_checklist, .role_checklist {border:1px solid #ccc; height:30em; list-style:none; overflow:auto;padding:0.5em; background-color:#fff; float:left; font-size:1em; } .role_checklist {height: 21em;} /* search */ .search .textbox {margin: 0 10px 0 0; width: 290px; float: none;} .search a {color: #fff;display:block; margin:10px 0; font-size:1.1em; float:left;} input#btn_search {float:right;} .search_inner { width:100%; background:url(../img/icon_search_charcoal.png) 222px 0 no-repeat; } .search_inner p { color:#999; width:200px; } .search_inner h4 { margin-bottom:0; } /* BUTTONS */ .btn { text-transform: uppercase; text-decoration:none; -moz-border-radius-bottomleft:0.3em; -moz-border-radius-bottomright:0.3em; -moz-border-radius-topleft:0.3em; -moz-border-radius-topright:0.3em; color:#fff; cursor:pointer; font-size:12px; margin:10px; padding:7px 15px 5px !important; vertical-align:middle; white-space:nowrap; } input.btn { padding:5px 10px 3px !important; /* need this to make button elements same size as above*/ } /* orange */ .btn_orange { background:#DF9C27 url(../img/btn_bg_orange.gif) left top repeat-x; border:1px solid #C56611; } .btn_orange:hover { background: #e09200; } /* black */ .btn_black { background: #5a80ab url(../img/btn_bg_black.png) center top repeat-x; border:solid 1px #000; } .btn_black:hover { background:#000; } /* teal */ .btn_teal { background: #03787e url(../img/btn_bg_teal.png) center top repeat-x; border:solid 1px #03787e; } .btn_teal:hover { background:#3bbac1; } /* red */ .btn_red { background: #480107 url(../img/btn_bg_red.png) center top repeat-x; border:solid 1px #480107; } .btn_red:hover { background:#a90b19; } td .btn { margin:10px 8px 10px 5px; } td.right ul.buttons li { margin-bottom: 20px !important; list-style:none !important; } /* links */ .links {margin-top: 20px;} .links p {float:left; font-size:1.3em; line-height:3;} /* =NAVIGATION ----------------------------------------------- */ /* user nav */ #user_nav { float: right; margin-right: 20px; display: inline;/* fixes IE double margin bug */ font-size: 1.1em; } #user_nav li { float: left; color: #e0e0e0; padding: 6px 0 6px 3px; } #user_nav li a { color: #e0e0e0; } /* primary nav */ #prim_nav { position: absolute; display: block; right: 20px; top: 77px; height: 43px; } #prim_nav li {float: left;} #prim_nav a { display: block; height: 43px; background: url(../img/primary_nav.png) no-repeat 0 0; text-indent:-5000em; outline: none;} /* public nav */ #prim_nav a#pn_join, #prim-nav-2 a {width: 81px; } #prim_nav a#pn_join:hover, #prim-nav-2 a:hover, #prim_nav a#pn_join.current_page_item, #prim-nav-2 a.current_page_item {background-position: 0 -43px; } #prim_nav a#pn_about, #prim-nav-3 a {width: 96px; background-position: -81px 0; } #prim_nav a#pn_about:hover, #prim-nav-3 a:hover, #prim_nav a#pn_about.current_page_item, #prim-nav-3 a.current_page_item {background-position: -81px -43px; } #prim_nav a#pn_news, #prim-nav-4 a {width: 87px; background-position: -177px 0; } #prim_nav a#pn_news:hover, #prim-nav-4 a:hover, #prim_nav a#pn_news.current_page_item, #prim-nav-4 a.current_page_item {background-position: -177px -43px; } #prim_nav a#pn_resources, #prim-nav-5 a {width: 130px; background-position: -264px 0; } #prim_nav a#pn_resources:hover, #prim-nav-5 a:hover, #prim_nav a#pn_resources.current_page_item, #prim-nav-5 a.current_page_item {background-position: -264px -43px; } #prim_nav a#pn_login, #prim-nav-6 a {width: 92px; background-position: -408px 0; margin-left:15px } #prim_nav a#pn_login:hover, #prim-nav-6 a:hover, #prim_nav a#pn_login.current_page_item, #prim-nav-6 a.current_page_item {background-position: -408px -43px; } /* inside nav */ #prim_nav a#pn_dashboard {width: 135px; background-position:-500px 0;} #prim_nav a#pn_dashboard:hover, #prim_nav a#pn_dashboard.current_page_item {background-position: -500px -43px; } #prim_nav a#pn_jobs {width: 82px; background-position: -635px 0; } #prim_nav a#pn_jobs:hover, #prim_nav a#pn_jobs.current_page_item {background-position: -635px -43px; } #prim_nav a#pn_search {width: 101px; background-position: -717px 0; } #prim_nav a#pn_search:hover, #prim_nav a#pn_search.current_page_item {background-position: -717px -43px; } #prim_nav a#pn_logout {width: 97px; background-position: -1079px 0; margin-left:15px } #prim_nav a#pn_logout:hover, #prim_nav a#pn_logout.current_page_item {background-position: -1079px -43px; } /* contractor nav */ #prim_nav a#pn_your_profile {width: 132px; background-position: -934px 0; } #prim_nav a#pn_your_profile:hover, #prim_nav a#pn_your_profile.current_page_item {background-position: -934px -43px; } /* business nav */ #prim_nav a#pn_account {width: 114px; background-position: -818px 0; } #prim_nav a#pn_account:hover, #prim_nav a#pn_account.current_page_item {background-position: -818px -43px; } /* secondary nav */ #sec_nav {float:right; margin:20px 25px 0 0;} #sec_nav li { float: left; margin: 0 0 0 15px; } #sec_nav li a {text-decoration: none; background: none; } #sec_nav li a:hover, #sec_nav li a.current_page_item {text-decoration: underline; } /* =HOMEPAGE SPECIFIC ----------------------------------------------- */ #home_top { padding: 35px 37px 15px; } #home_top img { margin: 15px 20px 15px 80px; } #home_top p { font-size:1.4em; } #home_top p.large { font-size:2.2em; } #strip.wrap { background-color:#810b16; } #home_bot { padding: 16px 5px 0; } p.date {color:#999; text-transform:uppercase; margin:0;} p.no_padding {margin:0; padding: 0;} #icon_latest_news {margin: 4px 4px 0 0} #icon_clock {margin: 27px 20px 0 0} #home_bot .stretchy.left {width: 241px; float:left;} #home_bot .center {float:left; width:205px; margin:24px 0 10px;} #home_bot div.right {float:right; width:476px;} #home_bot .center p {color:#666;} #home_bot .stretchy.right p {font-size:1.3em; color:#666;} /* =GRAPHICAL HEADERS ----------------------------------------------- */ h2#hdr_life_yours_to_own { background:url(../img/hdr_life_yours_to_own.png) no-repeat 0 0; width: 360px; height:37px; margin-bottom: 15px; } h2#hdr_enjoy_your_freedom { background:url(../img/hdr_enjoy_your_freedom.png) no-repeat 0 0; width: 508px; height:26px; margin: 26px 15px 15px 37px; float:left;} h4#hdr_business_need_contractor {background: url(../img/hdr_business_need_contractor.png) no-repeat 0 0; width:260px; height:70px; margin: 6px 0 14px;} h4#hdr_it_only_takes_minute {background: url(../img/hdr_it_only_takes_minute.png) no-repeat 0 0; width:287px; height:30px; margin-bottom:5px;} h4#hdr_join_contractor {background: url(../img/hdr_join_contractor.png) no-repeat 0 0; width:198px; height:59px; margin-bottom:14px;} h4#hdr_join_business {background: url(../img/hdr_join_business.png) no-repeat 0 0; width:194px; height:59px; margin-bottom:14px;} h4#hdr_contractor_registration_small {background: url(../img/hdr_contractor_registration_small.png) no-repeat 0 0; width:150px; height:46px; margin-bottom:14px;} h4#hdr_business_registration_small {background: url(../img/hdr_business_registration_small.png) no-repeat 0 0; width:150px; height:46px; margin-bottom:14px;} h4#hdr_it_only_takes_minute_w_icon {background: url(../img/hdr_it_only_takes_minute_w_icon.png) no-repeat center 0; height:131px; margin-top:-55px;} h4#hdr_login_contractor {background: url(../img/hdr_login_contractor.png) no-repeat 0 0; width:225px; height:63px; margin-bottom:56px;} h4#hdr_login_business {background: url(../img/hdr_login_business.png) no-repeat 0 0; width:224px; height:63px; margin-bottom:56px;} img#icon_login {margin-top: -7px;} /* =GRAPHICAL BUTTONS ----------------------------------------------- */ a#btn_register_contractor { background: url(../img/btn_register_as_contractor.png) no-repeat 0 0; width:303px; height:55px; display:block; margin:13px 97px 11px 0; float:right; } a#btn_register_contractor:hover {background-position: 0 -55px;} a#btn_vote {background: url(../img/btn_vote.png) no-repeat 0 0; width:113px; margin-bottom:10px; height:33px; display:block;} a#btn_vote:hover {background-position: 0 -33px;} a#btn_continue {background: url(../img/btn_continue.png) no-repeat 0 0;display: block; height:43px; width:153px;} a#btn_continue:hover {background-position: 0 -43px;} a#btn_finish {background: url(../img/btn_finish.png) no-repeat 0 0;display: block; height:43px; width:153px;} a#btn_finish:hover {background-position: 0 -43px;} a#btn_help {display: block; width: 235px; height: 40px; background:url(../img/btn_need_help.png) no-repeat 0 0; margin-bottom:20px; } a#btn_help:hover {background-position: 0 -40px;} a#btn_print_profile {display: block; width: 235px; height: 40px; background:url(../img/btn_print_profile.png) no-repeat 0 0; margin-bottom:20px; } a#btn_print_profile:hover {background-position: 0 -40px;} a#btn_invite_friends {display: block; width: 235px; height: 71px; text-indent: -5000px; background:url(../img/btn_invite_friends.png) no-repeat 0 0; margin-bottom: 20px; } a#btn_invite_friends:hover {background-position: 0 -71px;} a#btn_invite_contractor {display: block; width: 235px; height: 71px; text-indent: -5000px; background:url(../img/btn_invite_contractor.png) no-repeat 0 0; margin-bottom: 20px; } a#btn_invite_contractor:hover {background-position: 0 -71px;} a#btn_join_as_contractor {display: block; width: 183px; height: 43px; background:url(../img/btn_join_as_contractor.png) no-repeat 0 0; } a#btn_join_as_contractor:hover {background-position: 0 -43px;} a#btn_join_as_business {display: block; width: 183px; height: 43px; background:url(../img/btn_join_as_business.png) no-repeat 0 0; } a#btn_join_as_business:hover {background-position: 0 -43px;} a#btn_login_red {display: block; width: 143px; height: 43px; background:url(../img/btn_login_red.png) no-repeat 0 0; float:right; margin-top: 5px; } a#btn_login_red:hover {background-position: 0 -43px;} a#btn_login_orange {display: block; width: 143px; height: 43px; background:url(../img/btn_login_orange.png) no-repeat 0 0; float:right; margin-top: 5px;} a#btn_login_orange:hover {background-position: 0 -43px;} a#btn_login_red_2 {display: block; width: 143px; height: 43px; background:url(../img/btn_login_red.png) no-repeat 0 0; } a#btn_login_red_2:hover {background-position: 0 -43px;} img#icon_credit_cards {margin-left:10px;} /* =STRETCHY BOX - http://www.schillmania.com/content/projects/even-more-rounded-corners/ ----------------------------------------------- */ .stretchy {position:relative; margin:0 auto 35px; z-index:1; margin-left:24px; /* default, width of left corner */ _margin-left: 12px; } /* on white - default */ .stretchy .content, .stretchy .t, .stretchy .b, .stretchy .b div {background:transparent url(../img/bg_stretchy_box.png) no-repeat top right;} /* on pale */ .on_pale .content, .on_pale .t, .on_pale .b, .on_pale .b div {background:transparent url(../img/bg_stretchy_box_pale.png) no-repeat top right;} /* teal */ .teal .content, .teal .t, .teal .b, .teal .b div {background:transparent url(../img/bg_stretchy_box_teal.png) no-repeat top right;} /* charcoal */ .charcoal .content, .charcoal .t, .charcoal .b, .charcoal .b div {background:transparent url(../img/bg_stretchy_box_charcoal.png) no-repeat top right;} /* red */ .red .content, .red .t, .red .b, .red .b div {background:transparent url(../img/bg_stretchy_box_red.png) no-repeat top right;} .stretchy .content {position:relative; zoom:1; padding:25px 24px 1px 5px;_overflow-y:hidden; } .stretchy .t { /* top+left vertical slice */position:absolute; left:0px; top:0px; width:24px; /* top slice width */ margin-left:-24px; background-position:top left; height:100%;_height:1600px; /* arbitrary long height, IE 6 */ } .stretchy .b { /* bottom */ position:relative; width:100%; } .stretchy .b, .stretchy .b div { height:24px; /* height of bottom cap/shade */ font-size:1px; } .stretchy .b { background-position:bottom right; } .stretchy .b div { position:relative; width:24px; /* bottom corner width */ margin-left:-24px; background-position:bottom left; } .stretchy .hd, .stretchy .bd, .stretchy .ft { position:relative; } .stretchy .wrapper { /* extra content protector - preventing vertical overflow (past background) */ position:static; max-height:1000px; overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */ } /* =STRETCHY BOX SIZES ----------------------------------------------- */ .registration div.left {width: 322px; float:left; margin-left: 9px;} .registration div.right {width: 322px; float:right; margin:0 -15px 35px 5px;} .registration .content {padding:35px 34px 13px 5px;} .login div.left {width: 447px; float:left; margin-left: 9px;} .login div.right {width: 447px; float:right; margin:0 -15px 35px 5px;} .login .content {padding:40px 40px 14px 12px;} #search {width: 325px; float: left;} #search.stretchy {margin:0 auto 10px; margin-left:10px;} #search.stretchy .content {padding:15px 10px 6px 5px;} #search.stretchy .t {width:10px; margin-left:-10px;} #search.stretchy .b { height:10px; } #search.stretchy .b div {width:10px; margin-left:-10px;height:10px; } /* job/applicant spinner */ #item_spinner {float:right; width: 325px; margin:0 0 15px 0; border:8px solid #ccc; -moz-border-radius-bottomleft:0.6em; -moz-border-radius-bottomright:0.6em; -moz-border-radius-topleft:0.6em; -moz-border-radius-topright:0.6em;} #item_spinner .content {padding: 0 10px 20px 10px;} #item_spinner .t {margin-left: -15px; width: 15px;} #item_spinner .b {height: 10px;} #item_spinner .b div {margin-left: -15px; width: 15px;height: 10px;} .spinner p { color:#333; padding-right:25px} .spinner p.spinner_teaser { padding-bottom:5px; margin-bottom:2px; border-bottom:0px solid #ccc; } .spinner .counter {color:#333; margin-top:5px; display:inline; font-size:1.2em; float:left;} .spinner ul.buttons {display:inline; margin-left:130px; float:right;} .spinner ul.buttons li {margin-right: 10px; display: inline;} .spinner ul.buttons li a { text-transform:uppercase; text-decoration:underline; } .spinner ul.buttons li a:hover { text-decoration: none;} /* INSIDE PAGES ----------------------------------------------- */ div.header {height:42px; padding:38px 0 8px 35px; width:945px; background-color:#f3f3f3; border-bottom:1px solid #c5cbcb; display:block; margin-bottom:15px;} div.header img {margin:-5px 0 0 10px;} #bct {padding: 0 35px 12px; color:#999;} .buttons {margin: 15px 0 15px 210px; } p.large {font-size: 1.4em !important; line-height:1.4;} .inline p.large {float:left; margin: 0;} ul.blocks {margin-bottom: 2em;} ul.blocks li {font-size:1.2em; list-style-position:inside; list-style-type:square; margin-bottom:6px;} #col1 ul, #col1 ol { margin: 0.4em 0 0.8em 15px; } #col1 ul li { list-style-type:square; margin-bottom:6px; } #col1 li ul { font-size:1.0em; } /* panels */ .panel {width: 692px; padding: 0; margin:0 0 15px 0; } .wide .panel {width: 942px;} .minipanel {width: 235px; margin-bottom: 20px; } .midpanel {width: 335px;} .top {height: 8px; } .mid {padding: 12px 15px;} .bottom { height: 8px;} .panel.pale .top {background:url(../img/bg_panel_pale_top.png) no-repeat bottom left; } .panel.pale .mid {background-color:#f8f8f8; border: 1px solid #e3e3e3; border-top:none; border-bottom:none; color: #333;} .panel.pale .bottom {background:url(../img/bg_panel_pale_bot.png) no-repeat top left; } .minipanel.teal .top {background:url(../img/bg_minipanel_teal_top.png) no-repeat bottom left; } .minipanel.teal .mid {background-color:#3fc1c8; color:#fff;} .minipanel.teal .bottom {background:url(../img/bg_minipanel_teal_bot.png) no-repeat top left; } .minipanel.charcoal .top {background:url(../img/bg_minipanel_charcoal_top.png) no-repeat bottom left; } .minipanel.charcoal .mid {background-color:#1d1d1d; color:#fff;} .minipanel.charcoal .bottom {background: url(../img/bg_minipanel_charcoal_bot.png) no-repeat top left; } .charcoal h4 {color:#fff;} .minipanel.keyline .top {background:url(../img/bg_minipanel_keyline_top.png) no-repeat bottom left; } .minipanel.keyline .mid {background-color:#fff; border: 1px solid #d3d3d3; border-top:none; border-bottom:none; padding: 12px 13px;} .minipanel.keyline .bottom {background:url(../img/bg_minipanel_keyline_bot.png) no-repeat top left; } .midpanel.keyline .top {background:url(../img/bg_midpanel_keyline_top.png) no-repeat bottom left; height:6px; } .midpanel.keyline .mid {background-color:#fff; border: 1px solid #d3d3d3; border-top:none; border-bottom:none; padding: 1px 13px 25px;} .midpanel.keyline .bottom {background:url(../img/bg_midpanel_keyline_bot.png) no-repeat top left; } .wide .panel.pale .top {background:url(../img/bg_panel_pale_top_wide.png) no-repeat bottom left; } .wide .panel.pale .bottom {background:url(../img/bg_panel_pale_bot_wide.png) no-repeat top left; } #subcol1 {float: left; width: 280px; border-right: 1px solid #e4e4e4;padding-right:13px;width:315px;} #news {margin:0 !important; font-size:1em;} #news li {list-style: none !important;} #subcol2 {float: right; width: 315px; } #news_footer {border-top: 1px solid #e4e4e4; padding-top: .5em;} #news_footer a {font-size:1.2em; } #news_footer a#btn_rss {text-indent: -5000em; display: block; float: right; height: 15px; width: 15px; } #news_footer a.pale {background: url(../img/btn_rss_feed_pale.png) no-repeat top left; } /* Error and Success panel */ fieldset .error {border:1px solid #CC0000; margin:0 0 10px 220px;} fieldset .error p {padding: 5px; margin: 0;} /* FEEDBACK ICONS */ .icon {display: block; width:48px; height:48px; margin-left:10px; float:right} #icon_feedback_new {background:url(../img/icon_feedback_new_white.png) no-repeat 0 0;} #icon_feedback_0 { background:url(../img/icon_feedback_0_white.png) no-repeat 0 0;} #icon_feedback_1 {background:url(../img/icon_feedback_1_white.png) no-repeat 0 0;} #icon_feedback_2 { background:url(../img/icon_feedback_2_white.png) no-repeat 0 0;} #icon_feedback_3 {background:url(../img/icon_feedback_3_white.png) no-repeat 0 0;} .alt #icon_feedback_new, .pale #icon_feedback_new {background:url(../img/icon_feedback_new_pale.png) no-repeat 0 0;} .alt #icon_feedback_0, .pale #icon_feedback_0 { background:url(../img/icon_feedback_0_pale.png) no-repeat 0 0;} .alt #icon_feedback_1 , .pale #icon_feedback_1{background:url(../img/icon_feedback_1_pale.png) no-repeat 0 0;} .alt #icon_feedback_2, .pale #icon_feedback_2 { background:url(../img/icon_feedback_2_pale.png) no-repeat 0 0;} .alt #icon_feedback_3, .pale #icon_feedback_3 {background:url(../img/icon_feedback_3_pale.png) no-repeat 0 0;} .feedback_holder {margin: 10px; width: 420px;} .feedback_holder img { float: left; margin: 10px; } .feedback_holder p { padding: 10px;} /* quicklinks */ ul.quicklinks {margin: 0 0 20px 0; font-size: 1.4em; background-color:#dad3a9;} ul.quicklinks a {color: #333; display: block; height:23px; padding: 5px 0 0 15px; text-decoration:none; border-bottom:1px solid #fff;} ul.quicklinks a.current_page_item, ul.quicklinks a:hover {color: #fff; background-color:#898466;} ul.quicklinks li.first a {background:url(../img/bg_ql_top.png) no-repeat top left;} ul.quicklinks li.first a.current_page_item, ul.quicklinks li.first a:hover {background-position: top right;background-color:#898466;} ul.quicklinks li.last a {background: #dad3a9 url(../img/bg_ql_bot.png) no-repeat bottom left;} ul.quicklinks li.last a.current_page_item, ul.quicklinks li.last a:hover {background-position: bottom right;background-color:#898466;} /* Faqs */ ul.ui-accordion-container { font-weight:bold; font-size:1.5em; line-height:1.4; margin:0 0 20px 16px; padding:0; } ul.ui-accordion-container .answer { font-weight:normal; font-size:12px; line-height:1.4; margin:0pt 0pt 20px 0; } ul.ui-accordion-container li { list-style-type:square; margin-bottom:6px; } ul.ui-accordion-container ul { margin:15px 0 0 15px; } ul.ui-accordion-container ul li { list-style-type:disc; } /* news */ .articleTeaser { margin-bottom:30px; } .articleTeaser h3, .articleStory h3 { margin-bottom:0; } /* progress bar */ .progress .progress_wrap {font-size: 1.4em; font-weight: bold; margin: 10px 0; } .progress .bar { border:1px solid #cfc382; float:left; margin-right: 0; width: 100%; _width: 202px;} .progress .bar div {background-color:#cfc382; display: block; height: 1.4em; color: #000; text-align:center; } /* global notes */ .notice { margin:0 20px 15px; padding:5px 0 1px; background:#f3f3f3; border:4px solid #c5cbcb; } .notice p { color:#000; margin:1px 50px 3px 0; font-size:1.3em; line-height:1.3; padding:3px 15px 0; } .notice img { float:right; margin:1px 8px 2px 0; } .success { background:#f0ffe8; border-color: #339900;} .system {background:#eeece0; border-color:#dad3ab; } .error { background:#FFEBE8; border-color:#CC0000; } .error p { color:#333; } /* TABLES */ table {width: 100%; margin-bottom:20px;} table thead td {background-color:#810B16; color:#FFF;font-size:1.2em;padding:6px 15px; text-align:center;} table td.left { text-align:left; } table td.right { text-align:right; } table td.center {text-align: center;} table tbody th {padding:5px; width:20%;} table tbody td, table tbody th {border-bottom:1px solid #ccc; } table tr.alt th, table tr.alt td {background-color:#f5f5f5;} table tbody td p.large, table tbody th p.large { margin:0; color:#000; font-weight:bold;} .grey {color:#666;} p.box {border:1px solid #C5CBCB; background:#fff; padding:4px 5px 2px; font-weight:bold; float:left; font-size:1.3em; color:#333;} table tfoot td { padding-top:20px; text-align:right; } /* detail table - used for job detail pages etc */ table.detail_table thead td { color:#fff; background-color: #e09200; padding: 10px 15px; text-align: left; } table.detail_table tbody th { width:30%; } table.detail_table tbody th p { font-weight:bold; } table.detail_table tbody th p, table.detail_table tbody td p { margin:0; } table.detail_table tbody tr.alt th, table.detail_table tbody tr.alt td { background-color:#e2e2e2; } /* block table */ table.block_table tbody td {vertical-align: top; padding: 15px; border-bottom:1px solid #ccc; width:25%} table.block_table th {width: 50%; border-bottom:1px solid #ccc; padding: 15px; vertical-align: top;} .block_table thead td {color:#fff; background-color: #e09200; padding: 10px 15px; text-align: left;} .block_table tbody td p {font-size:1.1em; color:#4a4a4a;} .block_table thead td p {color:#fff;} table.block_table tr.alt th, table.block_table tr.alt td {background-color:#f5f5f5;} span.job_status {text-indent: -5000em; display:block; width: 16px; height: 16px; background:url(../img/btn_job_status.png) top left no-repeat;margin:0 auto; } span.ticked {background-position:top right; } .pagination {font-size:1.4em;margin:10px 0 0; text-align:center; } /* =AVAILABILITY CALENDAR ----------------------------------------------- */ table.calendar {border-collapse: collapse; text-align: center; font-size: 1.0em; background-color: #48c2cb; color: #333; } table.calendar thead th.first {text-align:center;background-color: #810b16; font-weight: bold; padding: .5em .5em .2em; color:#fff; font-size:1.2em; border: none; } table.calendar thead a {color:#fff; } table.calendar thead a:hover {color:#fff !important; } table.calendar tr.dayName th {background: #810b16 url(../img/bg_table.png) repeat-x bottom left; font-weight: bold; padding: 0 .5em .5em; color:#fff; text-align:center; width: 2em;} table.calendar td {border: 1px solid #f0f0f0; height: 3em; width: auto; padding: 10px 0; } table.calendar td.otherMonth {color:#ddd; background-color:#f8f8f8;cursor:not-allowed} table.calendar td.pastDay {color:#999; background: none; background-color: #eae6cf;cursor:not-allowed;} table.calendar td.weekendDay {color:#aaa; background: none; background-color: #ddd;cursor:not-allowed;} .day {cursor:pointer;background:#48c2cb url(../img/bg_available.png) no-repeat right bottom;} .unavailableDay {background:#898466 url(../img/bg_unavailable.png) no-repeat right bottom; color: #333; } img.calendar {cursor:pointer; margin: 3px 0 0 10px; } .calendar img {cursor:pointer; margin: 3px 0 0 10px; } #information_message {font: 1.4em/1.4 Helvetica, Arial, sans-serif;} /* large calendar */ table.calendar.large tbody {font-size:1.6em; font-weight:bold;} table.calendar.large thead th.first { padding: .8em .5em .9em;font-size:1.3em; } table.calendar.large td { padding: 20px 0;border:1px solid #999; } table.calendar.large .dayName th {font-size:1.4em; } /* Twitter */ ul.twitter{margin-bottom:0px;} ul.twitter li{margin-bottom:0px;padding:5px 10px 5px 5px;} ul.twitter li a{font-size:1.2em;} ul.twitter li.twitteritem{} p.twitter a{color:#584453;} p.twitter {text-align:right;margin-bottom:20px;} #bubble_top {background-image:url(/_r/img/twitter_top.png);height:8px;width:235px;} #bubble_inside {background:transparent url(/_r/img/twitter_middle.png) repeat-y scroll 0 0;color:#4B4B4B;padding:0 10px;width:235px;} #bubble_bottom {background-image:url(/_r/img/twitter_bottom.png);height:72px;width:235px;margin-bottom:10px;} /* Professions Listings */ .list_professions {margin:0px;border-bottom:solid 1px #e3e3e3;} .list_professions li {width:100%;height:28px;display:block;background:#ffffff;background-position:center top;background-repeat:repeat-y;border-top:solid 1px #e3e3e3;margin:0px;padding:7px 0px 0px 0px;cursor:pointer;position:relative;} .list_professions li:hover {background:#f7f7f7;} .list_professions a {display:block;width:100%;height:28px;outline-style:none;outline-color:none;outline-width:none;color:#2eb7b7;text-decoration:underline;} .list_professions li .snippet {position: absolute; text-align: right; height: 25px; top: 8px; right: 120px;} .list_professions li .snippet h5 {color: #2eb7b7; font-weight: normal;} /* Volume widget */ .volumeindicator {width:110px;height:24px;position:absolute;top:4px;right:0px;} .volumeindicator .full {float:left;background:#ea9900;width:10px;height:26px;margin-left:1px;} .volumeindicator .empty {float:left;background:#e3e3e3;width:10px;height:26px;margin-left:1px;} /* NZ pinup locations */ .pinup_nz {width:226px;height:215px;float:right;background:url(/images/pinup_nz.png);position:relative;} .pinup_nz .pin {width:18px;height:24px;background:url(/images/pin.png);position:absolute;} .pinup_nz .auckland {left:163px;top:25px;} .pinup_nz .wellington {left:163px;top:95px;} .pinup_nz .christchurch {left:136px;top:131px;} .pinup_nz .waikato {left:167px;top:38px;} .pinup_nz .bayofplenty {left:188px;top:47px;} .pinup_nz .hawkesbay {left:191px;top:68px;} .pinup_nz .taranaki {left:156px;top:63px;} .pinup_nz .manawatu {left:172px;top:85px;} .pinup_nz .nelson {left:144px;top:97px;} .pinup_nz .marlborough {left:147px;top:104px;} .pinup_nz .southland {left:78px;top:169px;} .pinup_nz .northland {left:149px;top:0px;} .pinup_nz .westcoast {left:105px;top:131px;} .pinup_nz .otago {left:107px;top:168px;} .pinup_nz .canterbury {left:127px;top:132px;} /* Note the new images in the css folder "bt_more_on_this_contractor.png" */ a#bt_more_on_this_contractor {width:237px;height:43px;cursor:pointer;background:url(/images/bt_more_on_this_contractor.png);background-position:0px 0px;position:relative;top:-20px;display:block;float:left;} a#bt_more_on_this_contractor:hover {background-position:0px -43px;} .red-text { color: red;}