*{ padding:0; margin:0; border-spacing:0; }
body { font:62.5%/1.2 Helvetica, Arial, sans-serif; }
a { color:black; text-decoration:none; }
#breakhere {page-break-before:always; margin-top:0; margin-bottom:0; font-size:1pt;}

/* ------------------------- CATEGORY PAGES -------------------------- */

.cat_body { 
  margin:0 auto; /* center it on big screens */ 
  min-width:400px; /* minimum width for phones = 1pic(120+)+2data(132ea) and borders */ 
}

.cat_top_background {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index:-1;
  width:100%;
  height:90px;
  min-width:400px; /* have to put this here !? */
}
.cat_logo {
  position:relative; 
  float:left;
  z-index:2;
  height:80px;
  border:0;
}
.cat_top {
  text-align:center;
  height:90px;
  width:100%;
}
.cat_top_heading {
  font-size:3em;
  font-weight:bold;
}
.cat_top_detail {
  padding:5px 5px 5px 5px;
  border-spacing:5px;
  text-align:left;
}
.cat_top_phone { font-size:1.8em; font-weight:bold; }
.cat_top_contact a { font-size:1.2em; color:black; font-weight:bold; text-decoration:none; }
.cat_top_contact a:hover { font-size:1.2em; color:grey; font-weight:bold; text-decoration:none; }



/* For breadcrumb ribbon see bottom of file */

/* ----------------------- CAT HEADER ---------------------- */

.cat_description {
  font-size:1.3em; 
  margin:10px 0px 0px 15px;
/*  width:100%; causes the screen to scroll */
  float:left;
}
.cat_description img {
  width:80px;
  margin:-25px 25px 7px 3px; /* move the image back up over the navigation bar */
  border:1px solid lightgrey;
  padding:3px;
  z-index:2;
  background-color:white;
  position:relative; 
  float:right; 
}
.cat_description_line {
  border-bottom:1px solid darkgrey;
  margin:10px 0px 5px -5px; 
  padding:0px;
  width:100%;
}


/* ------------------------ DIV CAT DATA SURROUND ----------------- */
.dcat {
  display:table;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  margin:0 auto; 
  width:100%;
  font-size:1.2em;
  line-height:1.6em;
  border:3px solid #d4d4d4;  
  padding:2px 2px 0px 2px;             
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-bottom:0px;  /* was 12px before imagelist */
}
.dleft {
  position:relative;
  float:left;
}
.dleft_fixedwidth { width:260px; } /* used when the ul is beside the img, otherwise is underneath (decking, flooring), modified in css_print */
.dleft img {
  display:inline-block; 
  vertical-align:top; 
  float:left;  
  z-index:-1; 
  width:120px;
  height:120px;
  margin:0px 3px 3px 3px; 
}
.dleft_smallimage img { width:70px; height:70px; margin:0px 5px 0px 2px; }  /* small images eg: ply */
.dleft p {
  position:absolute; /* relative to dleft - over base of image */
  top:101px; /* have to have both or will not appear! */
  left:3px;
  text-align:center;
  background-color: rgba(0,0,0,0.65); /* so opacity doesnt affect the text - css3 only */
	font-size:1.1em;
  font-weight:bold;
  line-height:1.5em; 
	color:white;
  width:120px;
	height: auto;	
}
/* .dleft li { padding-top:0px; } */          *
.dleft a { color:black; } 

.dblock {
  display:inline-block;
  vertical-align:top;
  float:left;  
  width:123px;
  min-width:120px; 
  margin:2px;
  text-align:center;
} 
.dblock img {  /* smaller info images */
  height:70px;
  width:auto;
  display:block; margin-left:auto; margin-right:auto; /* center the image */
  float:none; /* dont forget to clear the above float */
}
.dblock ul { 
  width:115px;
  margin-left:3px; 
  text-indent:-5px; /* move text closer to bullet */  
  text-align:left;
  padding-left:10px; 
  list-style:disc outside;
}

/* the pricing table */
.dright {
  display:table-cell; /* changed to table-row on small screen */
  vertical-align:top;
  margin:3px;
  width:100%;
}

.dbottom_img { /* see wtex */
  max-height:170px;
  max-width:300px;
}

.dcat_spacer { margin-bottom:12px;  /* put as a spacer after every category */ }


/* ------------------------ CAT DATA SURROUND ----------------- */
/* Multi Multi Multi Multi Multi Multi Multi Multi Multi Multi  */
.cat_multi {
  font-size:1.2em;
  line-height:1.6em;
  border:3px solid #d4d4d4;
  padding:2px 2px 0px 2px;             
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;  
  width:100%;
}
.cat_multi td { vertical-align:top; }
.cat_multi img {
  z-index:-1; 
  width:120px;
  height:120px;
  margin:0px 3px 0px 3px;
}
.cat_multi p {
  margin:-25px 3px 0px 3px;
  text-align:center;
  background-color: rgba(0,0,0,0.65); /* so opacity doesnt affect the text - css3 only */
	font-size:1.1em;
  font-weight:bold;
  line-height:1.5em; 
	color:white;
  width:120px;
  position:absolute; /* definitely required */
	height: auto;	
}
.cat_multi ul { 
  width:120px;
  text-indent:-5px; /* move text closer to bullet */  
  text-align:left; 
  padding-left:15px;
  list-style:disc outside;
}
.cat_multi li { padding-top:3px; }
.cat_multi a { color:black; }

/* finishes */
.cat_multi_noborder {
  font-size:1.2em;
  line-height:1.4em;
  padding:2px;
  width:100%;
}


/* ------------------------ CAT DATA SURROUND -------------------- */
/* Same as above but when there are many small pics eg: ply        */
/* also can have heading, and short description eg: panels         */
.cat_multi_smallimg img { width:70px; height:70px; margin:0px 5px 0px 2px;}
.many_heading { font-size:1.6em; padding:2px 2px 0px 10px; color:#1A1A1A; margin:3px 3px 0px 0px; } 
.many_description { font-size:1.2em; padding:2px 10px 2px 10px; color:#1A1A1A; } 


/* ------------------------ CAT DATA SURROUND -------------------- */
/* Single Single Single Single Single Single Single Single Single  */
.cat_single {
  font-size:1em;
  border-collapse:collapse;  
  width:100%; 
}

.cat_single td {
  border-bottom: 1px solid darkgrey;
	padding: 2px 7px 2px 2px; 
}
.cat_single td.catheading {
  font-size:1.1em;
  font-weight:bold;
}
.cat_single td.subheading {
  background-color: #444444;
  padding: 2px 7px 2px 2px; 
  font-size:1em;
  font-weight:bold;
  color: white;
}
.cat_single td.catsmall { font-style:italic; font-size:0.8em; } 
.cat_single img.plus { visibility:hidden; height:13px; text-align:center; }


/* Common to ALL */

/* side info pics eg: LVL - has to be id= so we override the above styles !? */
#cat_info_pic { width:auto; height:70px; margin:0 5px 0 5px; }

/* these pics often have a shaddow */
.small_shaddow {
  -webkit-box-shadow: 2px 2px 2px 0px rgba(100, 100, 100, 1);
  -moz-box-shadow:    2px 2px 2px 0px rgba(100, 100, 100, 1);
  box-shadow:            2px 2px 2px 0px rgba(100, 100, 100, 1);
}

.grey_gradient {
  background-color:#f4f4f4; 
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#d4d4d4));
  background-image: -webkit-linear-gradient(top, #f4f4f4, #d4d4d4);
  background-image: -moz-linear-gradient(top, #f4f4f4, #d4d4d4);
  background-image: -ms-linear-gradient(top, #f4f4f4, #d4d4d4);
  background-image: -o-linear-gradient(top, #f4f4f4, #d4d4d4);
  background-image: linear-gradient(top, #f4f4f4, #d4d4d4); 
}

/* Thick bottom line to sep items in a list - has to id to override */
#thickbottom {
	border-style: inset;
	border-color: darkgrey;
	border-width: 0px 0px 2px 0px;
}


/* ----------------------- Some Cats have Subcats Table at top ---------------------- */
/* plywood, verandah, fencing */

.dcat_submenu_container { 
  text-align:center; /* align the blocs to center */
}
.dcat_submenu {
  display:inline-block;
  vertical-align:top; 
  width:92px;
  height:92px;
  margin:7px 12px 7px 12px;
}
.dcat_submenu img {
  z-index:-1;
  width:90px;
  height:90px;
  border:1px solid white;
}
.dcat_submenu img:hover { border:1px solid grey; }
.dcat_submenu p {
  margin:-21px 1px 1px 1px;
  text-align:center;
  background-color: rgba(0,0,0,0.65); /* so opacity doesnt affect the text - css3 only */
	font-size:1.2em;
  font-weight:bold;
  line-height:1.5em; 
	color:white;
  width:90px;
  position:relative;
}


/********* do we need this any more ???? *************/
.cat_subcat { width:100%; }
.cat_subcat img {
  z-index:-1;
  width:90px;
  height:90px;
  margin:5px 5px 0px 5px;
  border:1px solid white;
}
.cat_subcat img:hover { border:1px solid grey; }
.cat_subcat p {
  margin:-21px 5px 5px 5px;
  text-align:center;
  background-color: rgba(0,0,0,0.65); /* so opacity doesnt affect the text - css3 only */
	font-size:1.2em;
  font-weight:bold;
  line-height:1.5em; 
	color:white;
  width:90px;
  position:relative;
}


/* ----------------------- IMAGE LIST ---------------------- */

.il_container {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  width:100%;
  font-size:1.2em;
  border:3px solid #d4d4d4; 
  background-color:#d4d4d4;   
  padding:2px 2px 0px 2px;             
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-align:center; /* must use to put images in center */
  height:82px; overflow:auto; /* scrollbars not the nicest, but ok for now */
}
.il_container img {
  width:auto; height:70px; 
  margin:0 15px 0 5px; 
  -webkit-box-shadow: 2px 2px 2px 0px rgba(100, 100, 100, 1);
  -moz-box-shadow:    2px 2px 2px 0px rgba(100, 100, 100, 1);
  box-shadow:         2px 2px 2px 0px rgba(100, 100, 100, 1);
}

/* overlay image */
.popup_black_overlay{
  display:none; position:fixed;
  top:0%; left:0%; width:100%; height:100%;
  background-color:black; -moz-opacity:0.8; opacity:.80; filter:alpha(opacity=80);
  z-index:9; 
}

.popup_content {
  display:none;   
  position:fixed;
  top:2%; left:0; bottom:0; right:0;
  text-align:center;
  z-index:10;
}

.popup_content img {  
  max-width:95%;
  max-height:95%;    
  border:5px solid #d4d4d4;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.popup_text {  
  position:absolute;
  margin-top:-33px;
  width:100%;  
	font-size:1.3em; line-height:1.5em; color:white;
  text-shadow: 1px 1px 2px black, 0 0 1em darkgreen, 0 0 0.2em darkgreen;
  z-index:12;
}
.popup_text a { text-decoration:underline; font-weight:bold; color:white; }
.popup_text_higher  { margin-top:-60px; } /* sometimes we need to be a little higher up */ 
.popup_text_tradie, .popup_text_tradie a { color:darkorange; } /* link to tradies page */ 

.popup_close {
  position:absolute; top:-10px; margin-left:-25px;
  transition: all 200ms;
  border-radius: 50%;
  border:5px solid #d4d4d4;
  overflow:hidden;
  background-color:white;
  font-size:2em; font-weight:bold; text-decoration:none; color:#333;
}
.popup_close:hover { color:black; }


/* ----------------------- ADDITIONAL ---------------------- */
.cat_footer_container {
  text-align:center; /* aligns the contained div inline-blocks to the center */
}
.cat_footer_div {
  display:inline-block;
  vertical-align:top; 
  text-align:left; /* cancel the above text-align so the xbuttons and uls align left */
  margin:10px; /* no need for 0 auto; here */
  font-size:1.2em;
  line-height:1.4em;
}
.cat_footer_div ul { 
  padding-left:10px;
  list-style:disc inside;
}
.cat_footer_div li:hover {
  background-color:lightgrey;
  font-weight:bold;
}
.cat_footer_div a { text-align:left; color:black; text-decoration:none; }
.cat_footer_div a:hover { color:#2e3311; }

.cat_footer_infotable {
  width:100%;
  font-size:1.2em;
  line-height:1.6em;
  border:1px solid black;  
  margin-bottom:12px;
}
.cat_footer_infotable th {
 padding:0px;
 font-weight:bold;
 background-color:#d4d4d4;
}
.cat_footer_infotable td {
 padding:2px;
 border-top:1px solid black;
}

/* ----------------------------- Bottom of Page ---------------------------- */
.cat_footer_copyright {
  margin: 0 auto; /* center on page */
  border-top:1px solid darkgrey;
  width:95%;
  text-align:center;
  font-size:0.9em;
  line-height:1.2em;
  clear:left;
}

/* ----------------------- WIDE BUTTONS WITH IMAGE ---------------------- */

/* FROM : red-team-design.com/wp-content/uploads/2011/09/awesome-css3-buttons.html */
.xbutton {        
 /* width:100px;  leave this out - will resize to text width */
        display: inline-block;
        white-space: nowrap;
        background-color: #ddd;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
        background-image: -webkit-linear-gradient(top, #eee, #ccc);
        background-image: -moz-linear-gradient(top, #eee, #ccc);
        background-image: -ms-linear-gradient(top, #eee, #ccc);
        background-image: -o-linear-gradient(top, #eee, #ccc);
        background-image: linear-gradient(top, #eee, #ccc);
        border: 1px solid #777;
        padding: 0 0.8em 0 0.8em; /* padding left & right on text */ 
        margin-bottom: 0.5em;
        font: bold 1em/2em Arial, Helvetica; 
        text-decoration: none;
        color: #333;
        text-shadow: 0 1px 0 rgba(255,255,255,.8);
        -moz-border-radius: .2em;
        -webkit-border-radius: .2em;
        border-radius: .2em;
        -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
        -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
        box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
.xbutton:hover {
        background-color: #eee;        
        background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
        background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
        background-image: -moz-linear-gradient(top, #fafafa, #ddd);
        background-image: -ms-linear-gradient(top, #fafafa, #ddd);
        background-image: -o-linear-gradient(top, #fafafa, #ddd);
        background-image: linear-gradient(top, #fafafa, #ddd);
    }

.xbutton:before {
        background: #ccc;
        background: rgba(0,0,0,.1);
        float: left;        
        width: 2em;
        text-align: center;
/*        font-size: 1.5em; causes probs in ie print preview */
        margin: 0 0.5em 0 -0.65em;
        /*padding: 0 0.4em; */ 
        -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
        -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
        box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
        -moz-border-radius: .15em 0 0 .15em;
        -webkit-border-radius: .15em 0 0 .15em;
        border-radius: .15em 0 0 .15em;     
        pointer-events: none;		
}
.fixedwidth { width:95px; }
/* see template_publish for the images */



/* ----------------------- BREADCRUMBS ---------------------- */

/*!
  xBreadcrumbs 2.0.1 jQuery Plugin
  (c) 2010-2013 w3Blender.com
  For any questions and support please visit www.w3blender.com.
*/

.breadcrumb {
  position:relative;
  margin-top:-18px; /* move it up under the pic */
	z-index:1; /* under bottom of logo, above info box divs */
	width:100%;
}

.xbreadcrumbs {
  position: relative;
  z-index: 10;
  clear: both;
  background-color: #f5f5f5; 
  width: 100%; 
  font-size:1.3em;
	border-bottom: 1px solid lightgrey;
}
.xbreadcrumbs li.current {
  border-right: none;
  background:none;
  color: #333;
  font-weight: bold;
}
.xbreadcrumbs li a {
  color:black;
  text-decoration: none;
}
.xbreadcrumbs li a:hover,
.xbreadcrumbs li.hover a {
  color: #0a8ecc;
}
.xbreadcrumbs li ul {
  position: absolute;
  float: left;
  padding: 3px;
  background-color: #333;
  width: 280px;
  top: 23px;
  display: none;
}
.xbreadcrumbs li ul li {
  float: left;
  width: 100%;
  border-right: none;
  height: auto;
  background: none;
}
.xbreadcrumbs li ul li a {
  text-decoration: none;
  color: #ccc !important;
  display: block;
  padding: 7px;
  border-bottom: 1px dotted #676767;
}
.xbreadcrumbs li ul li a:hover {
  background-color: #444;
}
.xbreadcrumbs li ul li:last-child a {
  border-bottom: none;
}
.xbreadcrumbs,
.xbreadcrumbs li,
.xbreadcrumbs ul,
.xbreadcrumbs ul li {
  list-style: none;
  margin: 0;  /* required */
  padding: 0;  /* required */
}
.xbreadcrumbs,
.xbreadcrumbs li {
  float: left;
}
.xbreadcrumbs ul {
  display: block;
}
.xbreadcrumbs li {
  padding: 5px;
  line-height: 100%;
  border-right: none;
  background: url("separator.gif") no-repeat right center;
  padding-right: 15px;
  padding-left: 10px;
}


/* ----------------------------- Cards ---------------------------- */

#cat_cards {
  width:97%;
  position:relative;
  float:left;
  padding-left:10px;
}
#cat_card_tn {
  margin:7px;
  width:125px;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(128, 128, 128, 1); /* mid grey */
  -moz-box-shadow:    5px 5px 5px 0px rgba(128, 128, 128, 1);
  box-shadow:         5px 5px 5px 0px rgba(128, 128, 128, 1);
}
#preview{ /* dont change the name of this */
	position:absolute;
	border:1px solid #ccc;
	background:#666;
	padding:3px;
	display:none;
	color:#fff;
}


/* ---------------------------- used by reports ---------------------*/

p.catheader {font-family: Helvetica,Arial; font-size:9pt; margin-top:2; margin-bottom:4;}
p.breakhere {page-break-before:always; margin-top:0; margin-bottom:0; font-size:1pt;}
/*h1.front {font-family: Helvetica,Arial; font-size:24pt;}
h1 {font-family: Helvetica,Arial; font-size:13pt; margin-bottom:5;}
h2 {font-family: Helvetica,Arial; font-size:12pt; margin-bottom:0;}
td {font-family: Helvetica,Arial; font-size:9pt;}
td.smaller {font-family: Helvetica,Arial; font-size:8pt;}
.smaller {font-family: Helvetica,Arial; font-size:8pt; font-weight:normal}
li {font-family: Helvetica,Arial; font-size:10pt; margin-bottom:5;}
*/
font.dnfont {font-family: Helvetica,Arial; font-size:11pt; font-weight:bold}
table.sample {
  font-family: Helvetica,Arial; font-size:9pt;
	border-width: 1px 1px 1px 1px;
	border-spacing: 0px;
	border-style: outset outset outset outset;
	border-color: black black black black;
	border-collapse: collapse;
	background-color: white;
}
table.sample th {
 	font-family: Helvetica,Arial;
	font-size:11pt;
	border-width: 1px 1px 1px 1px;
	padding: 2px 2px 2px 2px;
	border-style: inset inset inset inset;
	border-color: black black black black;
	background-color: white;
	-moz-border-radius: 0px 0px 0px 0px;
}
table.sample td {
  font-family: Helvetica,Arial; font-size:9pt;
	border-width: 1px 1px 1px 1px;
	padding: 2px 2px 2px 2px;
	border-style: inset inset inset inset;
	border-color: black black black black;
	background-color: white;
	-moz-border-radius: 0px 0px 0px 0px;
}
table.sample td.subheading {
  background-color: #444444;
  padding: 2px 2px 2px 2px;
  font-family: Helvetica,Arial;
  font-size:10pt;
  font-weight:bold;
  color: white;
}

table.botline td {
	border-width: 0px 0px 1px 0px;
	border-spacing: 0px;
	border-style: outset outset outset outset;
	border-color: black black black black;
	border-collapse: collapse;
	background-color: white;
}