/* common.css - common styles across the HB site

copyright 2007 Future Medium Pty Ltd.

@author: matt watts

*/

body {
  margin: 0;
  padding: 0;
  font-size: 70%;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #e6e6e6;
}

a { color: #333333; }

img {
  display: block;
}

p {
  margin: 0 0 1em 0;
}

ul { 
  list-style-type: square; 
  padding: 0;
  margin: 1em 0 0 2em;
  color: #666;
}
ul li {
  padding: 0;
  margin: 0;
}

#ap-tb {
  position: absolute;
  top: 0;
  left: 0; 
  z-index: 100;
}
#ap-tb img { display: inline; }

.highlighted { font-weight: bold; }

.wrapper:after,
#home ul#panel:after,
#home .contentCol:after,
#home .newsPanel ul#news li:after,
#contentWrapper:after,
ul#sectionPreview li:after,
ul#people li:after,
.thumbs:after,
#subsection #article .article-holder:after,
#subsection ul#quickLinks li:after,
#subsection ul#quickLinks li.on:after,
.news #article .article-holder:after,
#buttons:after,
#downloadPDF:after,
#footer:after,
ul#quickLinks li:after,
.awardsPanel:after,
.article-holder:after,
.clear-nested-floats:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#printBanner { display: none; }

.wrapper {
  width: 768px;
  margin: 40px auto;
  border: 1px solid #d5d5d5;
  overflow: hidden;
  background-color: #fff;
}

#banner {
  position: relative;
  background: url("../images/banner_hazell_bros.gif?r=1") no-repeat top left;
  width: 768px;
  height: 85px;
}

.homeLink {
  position: absolute;
  bottom: 1px;
  left: 0;
}

.headerImage {
  position: relative;
}

.headerText {
  position: absolute;
  top: 55px;
  left: 10px;
}

#home .headerText {
  position: absolute;
  top: 70px;
  left: 30px;
}

#contentWrapper {
  background: #fff;
}

.navCol {
  float: left;
  width: 177px;
}

.contentCol {
  float: right;
  width: 576px;
  margin-left: -15px;
  padding-left: 15px;
}

#home .contentCol {
  width: 591px;
  margin: 0;
  padding: 0;
}

#footer {
  background: url("../images/gradient_footer.gif") repeat-x top left;
  border-top: 1px solid #d5d5d5;
  height: 30px;
  display: block;
        margin: 0;
        padding: 0;
}

#footer .copyright {
  float: left;
}

#footer .copyright img {
  padding-left: 10px;
        border: 0;
}

#footer .credits {
  float: right;
}

#footer .credits p {
  padding: 10px 16px 0 35px;
  margin: 0;
  text-transform: uppercase;
  font-size: 0.8em;
  color: #a3a2a2;
}

#footer .credits p a {
  color: #d4d4d4;
  text-decoration: none;
}

#footer .credits p a:hover {
  color: #a3a2a2;
  text-decoration: underline;
}

#textNav {
  background: #e4e4e4;
  width: 768px;
  color: #636363;
  padding: 8px 5px;
  clear: both;
        margin-top: 10px; 
}

#textNav a {
  color: #636363;
}

#textNav a:hover {
  color: #898989;
}

a.readMore {
  float: right;
  color: #666;
  background: url("../images/icon_arrow_off_state_generic.gif") no-repeat 0 2px;
  padding: 0 17px 0 13px;
}

a.enquire {
  float: right;
  height: 22px;
  width: 45px; 
  background: #eee url("../images/icon_arrow_off_state_generic.gif") no-repeat 5px 7px;
  padding: 5px 0 0 20px;
  border: 3px solid #fff;
  border-left: 2px solid #fff;
}

a.enquire:hover {
  background: #333 url("../images/icon_arrow_on_state_generic.gif") no-repeat 5px 7px;
  color: #fff;
}

a.enlarge {
  background: url("../images/icon_enlarge_off_state_generic.gif") no-repeat 0 2px;
  color: #000;
  display: block;
  padding: 0 0 5px 15px;
}

a.backTop {
  background: url("../images/icon_back_top_off_state_generic.gif") no-repeat 0 5px;
  color: #8c8c8c;
  float: right;
  padding: 0 15px 0 10px;
}
.imageBox img {
  border: 2px solid #fff; /*helps to pad out the image so it doesnt render weird on hover*/
}

#subsection .sectionImage .imageBox {
  padding-top: 1px;
}

#subsection .sectionImage .imageBox img {
  border: 0 none;
}

#subsection .sectionImage .imageBox:hover img,
#subsection .sectionImage .imageBox.hover img {
  border: 0 none;
}

.articleImage img {
  border: 2px solid #fff; /*helps to pad out the image so it doesnt render weird on hover*/
}

/*home specific CSS*/

#home ul#panel {
  margin: 0;
  padding: 0 0 0 1px;
  list-style-type: none;
}

#home ul#panel li {
  float: left;
  margin: 0;
  padding: 0;
}

#home ul#panel li.middle {
  float: left;
  margin: 0 1px;
  padding: 0;
}

#home ul#panel li a {
  width: 196px;
  height: 87px;
  display: block;
}

#home ul#panel li.our_products_and_services a {
  background: url("../images/panel_products_and_services.jpg") no-repeat top left;
}

#home ul#panel li.our_projects a {
  background: url("../images/panel_our_projects.jpg") no-repeat top left;
}

#home ul#panel li.our_careers a {
  background: url("../images/panel_our_careers.jpg") no-repeat top left;
}

#home ul#panel li a:hover {
  background-position: bottom left;
}


#home ul#panel li a span {
  display: none;
}

#home .contentCol {
  background: url("../images/gradient_news_panel.jpg") no-repeat right 87px;
}
#home .contentCol .contentPanel {
  float: left;
  background: url("../images/gradient_panel_split.gif") #fff no-repeat top right;
  width: 395px;
  padding-top: 2px;
  min-height: 212px;
}

#home .contentCol .contentPanel #homeContentPanel {
  height: 110px;
  padding: 0 15px;
}

#home .contentCol .newsPanel {
  float: right;
  width: 196px;  
}

#home .newsPanel {
  padding: 0;
}

#home .newsPanel ul#news {
  margin: 0;
  padding: 7px 0 0 7px;
  list-style-type: none;        
}

#home .newsPanel ul#news li {
  margin: 0 0 1px 0;
  padding: 7px 0 0 0;
  min-height: 100px;
  clear: both;
}

#home .newsPanel ul#news li h3 {
  margin: 0;
  padding: 10px 15px 3px 15px;
  font-size: 1.1em;
  color: #868586;
}

#home .newsPanel ul#news li p {
  margin: 0;
  padding: 0 15px;
  color: #8c8c8c;
}

#home .newsPanel ul#news li a { 
  display: block;
  float: right;
  padding: 10px 15px 15px 13px;
  color: #373737;
  background: url("../images/icon_arrow_off_state_generic.gif") no-repeat 0 12px;
  margin: 0;
}

#home .newsPanel ul#news li.border {
  border-bottom: 1px solid #fff;
}

#home .newsPanel ul#news li:hover h3,
#home .newsPanel ul#news li:hover p {
  color: #4d4d4d;
}

#home .newsPanel ul#news li:hover a {
  color: #d9212f;
  background: url("../images/icon_arrow_on_state_generic.gif") no-repeat 0 12px;
}

#home .contentPanel h2 {
  color: #e60f1f;
  font-size: 1.2em;
  margin: 0;
  padding: 20px 17px 3px 17px;
}

#home .contentPanel p {
  color: #8c8c8c;
  padding: 0 17px;
}

#home .contentPanel a {
  float: right;
  padding: 0 17px 10px 13px;
  color: #373737;
  background: url("../images/icon_arrow_off_state_generic.gif") no-repeat 0 2px;
}

#home .contentPanel a:hover {
  color: #d9212f;
  background: url("../images/icon_arrow_on_state_generic.gif") no-repeat 0 2px;
}

#home .contentPanel .family {
  padding: 0 0 0 5px;
}

#home .contentPanel .employer-of-choice {
  padding: 10px 0 20px 30px;
}
#home .contentPanel .employer-of-choice a {
  background: none;
  padding: 0;
  float: none;
}

#home .contentPanel .family h2 {
  color: #989898;
  padding-left: 27px;
}

#home .contentPanel .family img {
  margin-left: 17px;
}

.awardsPanel {
  margin: 0;
  clear: both;
  background: #fff;
  padding: 13px 16px;
}

.awardsPanel .employer-of-choice {
  float: left;
  width: 309px;
}

.private-business {
  float: right;
  width: 172px;
}

.private-business a {
  display: block;
  width: 172px;
  height: 82px;
  background: url("../images/image_business_award.jpg") no-repeat top left;
}

.private-business a:hover {
  background-position: bottom left;
}

.private-business a span {
  display: none;
}

/* section specific CSS */

.header {
  /*width: 598px;*/
        margin: 0;
  margin-top: 1px;
        margin-left: -15px;
}

.header h1 {
  padding: 11px 25px;
  margin: 0;
  color: #fff;
  font-size: 1.3em;
        width: 320px;
}


.sectionImage {
  float: right;
  margin-top: 1px;
        margin-bottom: 5px;
        border-left: 10px solid white;
        background: #fff;
}

.subsectionPages {
  margin-top: 1px;
}

.subsectionPages .title {
  background: #e60f1f;
  padding: 6px 8px;
}

.subsectionPages .pages {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-left: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}

.subsectionPages .pages li {
  margin: 0;
  padding: 0 10px;
  background: #f7f7f7;
}

.subsectionPages .pages .alt {
  background: #fff;
}

.subsectionPages .pages a {
  display: block;
  background: url("../images/icon_subsection_arrow.gif") no-repeat 0px 8px;
  padding: 4px 10px;
  text-decoration: none;
}

.subsectionPages .pages .current {
  color: #e60f1f;
}

.subsectionPages .title h3 {
  color: #fff;
  padding: 0;
  margin: 0;
  font-size: 1.2em;
}

.groupHeading {
  background: #666;
  padding: 6px 10px;
  margin-bottom: 25px;
}

.groupHeading h4 {
  color: #fff;
  padding: 0;
  padding-left: 10px;
  margin: 0;
  font-size: 1.2em;
  background: url("../images/icon_group_heading.gif") no-repeat 0 5px;
}

#section .contentCol #intro p {
  color: #666;
  padding: 10px 10px 0 0;
  margin: 0;
}

ul#sectionPreview {
  margin: 15px 15px 0 0;
  padding: 0;
  list-style-type: none;
}

ul#sectionPreview li {
  margin: 0;
  padding: 0 0 20px 0;
}

ul#sectionPreview li h2,
#section #intro h2 {
  color: #e60f1f;
  font-size: 1.3em;
  margin: 0;
  padding: 0 0 3px 0;
  border-bottom: 1px solid #d6d6d6;
}
#section #intro h2 {
  padding-top: 10px;
}

ul#sectionPreview li .imageBox,
#subsection .imageBox {
  float: left;
  width: 114px;
  padding: 10px 10px 0 0;
}

ul#sectionPreview li .contentBox {
  float: right;
  width: 450px;
}

ul#sectionPreview li p {
  color: #666;
  padding: 10px 10px 0 0;
  margin: 0;
}


/* subsection specific CSS */

#subsection .contentCol {
  color: #666;  
}

#subsection .contentCol #intro p {
  color: #666;
  padding: 10px 10px 0 0;
  margin: 0;
}

#section #intro h1,
#subsection #intro h1 {
        color: #e60f1f;
        font-size: 1.3em;
        padding: 10px 0 2px 0;
        margin: 0 15px 0 0;
        border-bottom: 1px solid #d6d6d6;
        background: none;
}

/*#section #intro h2,*/
#subsection #intro h2 {
        font-size: 1.1em;
        padding: 5px 0 0 0;
        margin: 0;
}

.articleHeading {
  padding: 15px 15px 5px 0;
  clear: right;
}

#subsection #article {
  margin: 0;
  padding: 15px 15px 0 0;
  list-style-type: none;
  clear: right;
}
#subsection.news #article { 
  padding-top: 0;
}

#subsection #article li,
#subsection #article .article-holder {
  margin: 0;
  padding: 0 0 20px 0;
        /*display: inline;*/
}

#subsection #article ul {
  margin: 1em 0 0 0;
  padding-left: 2em;
  list-style-type: square;
}

#subsection #article li {
  padding: 0;
  margin: 0;
}

#subsection ul#article li h2,
#subsection #article .article-holder h2 {
  color: #e60f1f;
  font-size: 1.3em;
  margin: 0;
  padding: 0 0 3px 0;
  border-bottom: 1px solid #d6d6d6;
}

#subsection ul#article li .imageBox,
#subsection #article .article-holder .imageBox {
  float: left;
  width: 114px;
  padding: 10px 10px 0 0;
}

#subsection ul#article li p,
#subsection #article .article-holder p {
  color: #666;
  padding: 10px 10px 0 0;
  margin: 0;
}

.QLHeading {
  
  width: 201px;
  display: block;
}

.QLHeading h3 {
  font-size: 1.1em;
  padding: 5px;
  color: #fff;
  margin: 0;
        background: #e60f1f;
}

ul#quickLinks {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 200px;
  border: 1px solid #f2f2f2;
  border-right: none;
}

ul#quickLinks li,
ul#quickLinks li.on {
  margin: 0;
  padding: 0;
  background: #fff;
}

ul#quickLinks li.on {
  background: #f7f7f7;
}

ul#quickLinks .productLabel {
  float: left;
  width: 130px;
  padding: 3px 0;
}

ul#quickLinks .productAction {
  float: right;
  width: 70px;
  padding: 3px 0;
}

ul#quickLinks li span.product,
ul#quickLinks li.on span.product {
        color: #000;
  padding: 0 5px;
}

ul#quickLinks li.on p.msg {
  color: #000;
  padding: 2px 5px;
}

ul#quickLinks li:hover span.product,
ul#quickLinks li.on:hover span.product {
  color: #e60f1f;
}

ul#quickLinks li a.view,
ul#quickLinks li.on a.view,
a.view {
  background: url("../images/icon_arrow_view_off_state_generic.gif") no-repeat 0 5px;
  color: #000;
  padding: 0 10px 0 10px;
        margin: 0;
}


/* projects section specific CSS*/

table.project,
table.used_equipment,
table.news {
  margin: 20px 0;
  border-collapse: collapse;
}

table.project th,
table.used_equipment th,
table.news th {
  background: #125b91;
  color: #fff;
  text-align: left;
  padding: 5px;
}

table.used_equipment th,
table.news th {
  background: #333;
}

table.project td,
table.used_equipment td,
table.news td {
  background: #fff;
  color: #666;
  text-align: left;
  padding: 5px;
}

table.project td.off,
table.used_equipment td.off,
table.news td.off {
  background: #f7f7f7;
}

table.project tr:hover td,
table.used_equipment tr:hover td,
table.news tr:hover td {
  background: #e7ecf1;
  color: #125b91;
}

table.news tr:hover td {
  color: #e60f1f;
}

table.project tr a,
table.used_equipment tr a,
table.news tr a {
  color: #666;
  text-decoration: none;
}

table.project tr:hover a {
  color: #125b91;
}

table.news tr:hover a {
  color: #e60f1f;
}

table.project td a.readMore,
table.used_equipment td a.readMore,
table.news td a.readMore {
  color: #666;
  float: left;
  text-decoration: none;
  background: url("../images/icon_arrow_off_state_generic.gif") no-repeat 0 2px;
  padding: 0 0 0 13px;
}

table.project td a.readMore:hover,
table.used_equipment td a.readMore:hover,
table.news td a.readMore:hover,
.news a.readMore:hover {
  background: url("../images/icon_arrow_on_state_services.gif") no-repeat 0 2px;
  color: #e60f1f;
}

/* generic section specific CSS */

#people,
#family {
  margin: 15px 15px 0 0;
  padding: 0;
  list-style-type: none;
}

#people .article-holder,
#family .article-holder {
  margin: 0;
  padding: 0 0 20px 0;
}

#people .article-holder h2,
#family .article-holder h2 {
  color: #e60f1f;
  font-size: 1.3em;
  margin: 0;
  padding: 0 0 1px 0;
}

#family .article-holder h2 {
        padding: 0 0 3px 0;
        border-bottom: 1px solid #d6d6d6;
}

#people .article-holder h3 {
        color: #666;
        font-size: 1em;
        margin: 0;
        padding: 0 0 3px 0;
        border-bottom: 1px solid #d6d6d6;
}

#people .article-holder .imageBox,
#family .article-holder .imageBox {
  float: left;
  width: 114px;
  padding-top: 10px;
}

#people .article-holder .contentBox,
#family .article-holder .contentBox {
  float: right;
  width: 430px;
}

/*
#people .article-holder, 
#family .article-holder {
  clear: both;
}*/

#people .article-holder p,
#family .article-holder p {
  color: #666;
  padding: 10px 10px 0 0;
  margin: 0;
}

.articleImage {
  background: #fff;
  padding: 5px 15px 5px 0;
}

.thumbsLeft .articleImage {
  padding: 0;
}

/*careers section specific CSS*/

#downloadPDF {
  background: url("../images/background_download_PDF.gif") no-repeat top left;
  width: 566px;
  margin-top: 15px;
}

a.download {
  background: url("../images/icon_off_download_pdf.gif") no-repeat 0 5px;
  color: #8c8c8c;
  padding: 3px 10px 5px 15px;
  float: right;
}

table.position {
  background: #9d937a;
  color: #fff;
  border-collapse: collapse;
  margin: 15px 0 0 0; 
}
table.position a {
  color: #fff;
  text-decoration: none;
}
table.position a:hover {
  text-decoration: underline;
  color: #fff;
}

table.position th {
  font-weight: bold;
  text-align: left;
  padding: 5px 0 0 5px;
}

table.position td {
  text-align: left;
  padding: 0 0 5px 5px;
}

/*news section specific CSS*/

.news #article {
  margin: 0px 15px 0 0;
  padding: 0;
  list-style-type: none;
}

.news #article li {
  margin: 0;
  padding: 0;
}

.news #intro #article li h2,
.news #intro #article .article-holder h2 {
  color: #e60f1f;
  font-size: 1.3em;
  margin: 0;
  padding: 15px 0 5px 0;
  border-bottom: none;
}

.news #article li h3,
.news #article .article-holder h3 {
        color: #666;
        font-size: 1.1em;
        margin: 0;
        padding: 0 0 5px 0;
        border-bottom: 1px solid #d6d6d6;
}

.news #article li .imageBox,
.news #article .article-holder .imageBox {
  float: left;
  width: 114px;
  padding: 10px 10px 0 0;
        clear: left;
}

.news #article li p,
.news #article .article-holder p {
  color: #666;
  padding: 10px 10px 0 0;
  margin: 0;
}

/*contact section specific CSS*/

.contact_us h2 {
        color: #e60f1f;
  font-size: 1.3em;
  margin: 0 15px 10px 0;
  padding: 10px 0 3px 0;
  border-bottom: 1px solid #d6d6d6;
clear: left;
}

table.locations {
  background: #f7f7f7;
  color: #666;
  border-collapse: collapse;
  margin: 0 0 10px 0;
}

table.locations col.colWidth {
  width: 85px;
}

table.locations th {
  text-align: left;
  padding: 5px 0 0 15px;
}

table.locations td {
  vertical-align: top;
}

table.locations td.label {
  text-align: left;
  padding: 0 0 0 15px;
}

/*concrete calculator specific CSS*/

.wrapperCC {
  width: 598px;
  margin: 40px auto;
  border: 1px solid #d5d5d5;
  background-color: #fff;
}

#bannerCC {
  position: relative;
  background: url("../images/banner_hazell_bros_pop.gif?1") no-repeat top left;
  width: 598px;
  height: 73px;
  display: block;
}

.CCForm {
  background: url("../images/gradient_main_background.gif") repeat-x top left;
  padding-top: 21px;
}

table.calc {
  margin: 0 20px 21px 20px;
}

table.calc td {
  text-align: right;
}

table.calc td .l {
  float: left;
  width: 10px;
}

table.calc td .r {
  float: right;
}

table.calc td.radio {
  text-align: center;
}

table.calc td span.l {
  color: #000;
  font-weight: bold;
}

table.calc td .lt {
  width: 70px;
  float: left;
}

table.calc td .ltb {
  color: #ed1c26;
  width: 10px;
  float: left;
}

table.calc td span.lt {
  color: #ed1c26;
  font-weight: bold;
}

table.calc td label {
  color: #5d5e5e;
  font-weight: bold;
}

table.calc td input,
table.calc th select {
  border: 1px solid #cfcfcf;
}

table.calc td.radio input { border: none; }

table.calc td input.measurements {
  width: 40px;
}

table.calc td input.subtotal {
  width: 100px;
}

table.calc td input.total {
  width: 100px;
  border: 1px solid #cfcfcf;
  background: #ed1c26;
  color: #fff;
}

#buttons {
  margin-bottom: 10px;
}

.calcButton {
  float: right;
  margin-right: 30px;
}

.resButton {
  float: right;
  margin-right: 10px;
}

.thumbsLeft {
  float: left;
}

.thumbsRight {
  float: right;
}

#subsection #article .thumbsRight { 
  min-height: 144px; min-width: 372px;
}

#subsection #article .thumbsRight .thumbs {
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: left;
  width: 93px; 
}

#subsection #article .thumbsRight .thumbs div {
  margin: 0;
  padding: 0;
  list-style-type: none;
  /*float: left;*/
  width: 93px;  /* 83 + 6 + 2 + 2 = 93 */
  height: 77px; /* 63 + 2 + 2 = 77 */
}

.thumbsLeft a:hover img,
.thumbsRight .thumbs div a:hover img {
  border: 2px solid #e60f1f;
}

.thumbsRight .thumbs div a img {
  border: 2px solid white;
}

.thumbsRight .thumbs div img {
  display: block;
  margin: 0 0 0 6px;
}