/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/ 
/* -----------------------------------*/

/* -->>> MASTER COLOURS 

Red - #EE2B29
Blue - #314B8A

*/


body, dd, dl, dt, fieldset, legend, blockquote, form, h1, h2, h3, h4, h5, h6, li, ol, ul {
	margin: 0;
	border: 0 none #FFFFFF;
	padding: 0;
	}

h1, h2, h3, h4, h5, h6 {	color:#314B8A;	font-weight:normal;	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;}

h1 {	font-size:2.2em;	line-height:1.7em;	color:#FFF}
h2 {	font-size:1.9em;	background:url(../images/icon-bg-large.gif) top left no-repeat;	padding-left:33px;	padding-bottom:10px;	line-height:1.4em}
h3 {	font-size:1.6em}
h4 {	font-size:1.4em;	font-weight:800}
h5 {	font-size:1.3em;	font-weight:800}

h2 span {font-size:0.7em;	line-height:1.5em;	padding-left:5px;	padding-bottom:25px}

ul {	list-style:none}

html, body {height:100%}
	
body {
	font: 0.8em Verdana, Arial, Helvetica, sans-serif;
	line-height:1.8em;
	color:#314B8A;
	padding:0;
	margin:0;
	}

a {			color:#314B8A;	text-decoration:underline;	background-color:transparant}
a:hover {	text-decoration:none}
a:visited {	color:#EE2B29}
a.white {color:#FFF}

img {border: 0}

.pageClear {	clear: both;	height: 1px;	font-size: 1px;	line-height: 1px;	margin-top:30px}
.hidden {	position: absolute;	left: -9999px;	top: -9999px;	height: 1px;	width: 1px;	overflow: hidden}

/* -----------------------------------*/
/* ------>>> GLOBAL STYLING <<<-------*/ 
/* -----------------------------------*/

/* ------>>> HEADER <<<-------*/ 

#header p span {display:none}
#header p {padding:20px;	padding-bottom:40px;	float:left;	width:400px}

#header {
    width:100%;
    font-size:0.95em;
    line-height:normal;
	display:block;
	padding:0;
    }

#header ul {
    position:absolute;	
	top:0;	
	right:20px;
	margin:0;
    padding:0;
    list-style:none;
	height:34px;
    }

#header li {
    float:left;
    background:url(../images/topright.gif) no-repeat bottom right;
    margin:0;
    padding:0;
	text-align:center;
	font-size:0.9em;
	margin-right:5px;
	}

#header li a {
    display:block;
	background:url(../images/topleft.gif) no-repeat bottom left;
    padding:7px 15px;
	color:#000;
	text-decoration:none;
	}

#header li.current {    background-image:url(../images/topright-on.gif)}	
#header li.current span {
    display:block;
	background:url(../images/topleft-on.gif) no-repeat bottom left;
    padding:7px 15px;
	color:#FFF;
	text-decoration:none;
	}


/* ------>>> MAIN NAVIGATION <<<-------*/ 

#navigation {clear:left;	width:100%}

#navigation ul {
    margin:0;
    padding:0;
    list-style:none;
	height:37px;
	padding-left:10px;
    }

#navigation ul li {
    float:left;
    background:url(../images/right.gif) no-repeat top right;
    margin:0;
    padding:0;
	text-align:center;
	font-size:0.9em;
	margin-right:5px;
	}

#navigation ul li a {
	background:url(../images/left.gif) no-repeat top left;
    padding:7px 15px;
	color:#000;
	text-decoration:none;
	display:block;
	white-space: nowrap;
	}
* html #navigation ul li a { width: 1%}

#navigation li.current {    background-image:url(../images/right-on.gif)}	
#navigation li.current span {
    display:block;
	background:url(../images/left-on.gif) no-repeat top left;
    padding:7px 15px;
	color:#FFF;
	text-decoration:none;
	}

/* ------>>> SUMMARY <<<-------*/ 

#summary {background: #314B8A url(../images/summary-bg.gif) top right repeat-x;	height:120px;	padding:20px}
#summary h1.home {	width:500px}
#summary div.link {	float:right;	width:170px;	margin-right:10px}


/* ------>>> CONTENT <<<-------*/ 

#content {margin:30px 0;	margin-left:20px}
#content a {font-weight:800}
#content ul {margin:10px 0}
#content ul li {background: url(../images/bullet.gif) 0.7em 0.4em no-repeat;	padding-left:30px;	padding-bottom:1px;	position:relative}

#product, #applications {float:left;	width:30%}

#product img {padding-left:20%}

#actions {float:right;	width:30%;	margin:0;	padding:0;	margin-right:10px;	margin-bottom:20px}

div.topleft {background: #EAEDF3 url(../images/bg-tl.gif) top left no-repeat}
div.topright {background: transparent url(../images/bg-tr.gif) top right no-repeat}
div.bottomleft {background: transparent url(../images/bg-bl.gif) bottom left no-repeat}
div.bottomright {background: transparent url(../images/bg-br.gif) bottom right no-repeat;	display:block}

div.topleft, div.topright, div.bottomleft, div.bottomright {padding:0;	margin:0}

div.bottomright div span {font-size:1.8em;	padding:10px 0}

div#timberdecking {
	position:relative;
}

div#timberdecking li {
	float:left;
	width:50%;
}


/* ------>>> PRICING <<<-------*/ 
#pricing {margin:0;	clear:both}
#packaginginfo {width:100%;	color:#000}

#packaginginfo div {width:17%;	padding-left:15px;	margin:20px 0;	padding-bottom:20px;	float:left;	font-size:0.8em}

/* NO LONGER REQUIRED

#pavepad45 {background: transparent url(../images/pavepad-45-box.jpg) bottom left no-repeat}
#pavepad15 {background: transparent url(../images/pavepad-15-box.jpg) bottom left no-repeat}
#pavepad7 {background: transparent url(../images/pavepad-7-box.jpg) bottom left no-repeat}
#shim1 {background: transparent url(../images/shim-1-box.jpg) bottom left no-repeat}

*/

strong {padding-top:5px}

#packagingtable, #pricingtable {clear:left;	font-size:0.8em;	margin:20px 0}
#packagingtable table {width:95%;	margin:5px auto;	padding:0}
#packagingtable thead th {width:12%}
#packagingtable th, #packagingtable td, #pricingtable td {text-align:left;	border-right:1px solid #FFF;	padding-left:5px}
#packagingtable thead th {background-color:#314B8A;	color:#FFF}
#packagingtable tbody tr.dark, #pricingtable tbody tr.dark td {background-color:#CBD2E2}
#packagingtable tbody tr.light, #pricingtable tbody tr.light td {background-color:#EAEDF3}

#pricing table tr {color:#000}
table td {vertical-align:text-top}
#pricingtable td {line-height:1.7em;	padding:10px;	border-bottom:1px solid #FFF}
#pricingtable td strong {font-size:1.6em;	color:#314B8A}
#pricingtable thead th {padding-bottom:10px}


/* ------>>> FOOTER <<<-------*/

#footer {background: #314B8A url(../images/summary-bg.gif) top right repeat-x;	padding:0;	clear:both;	color:#FFF;	font-size:0.85em}
#footer #companyinfo, #footer #sitelinks {width:42%;	padding:10px 20px}
#footer #companyinfo {float:left}
#footer #sitelinks {float:right;	background: transparent url(../images/footer-bg.gif) bottom right no-repeat}
#footer .group {float:left;	width:45%}

#footer h3 {	border-bottom:1px dotted #FFF;	padding:5px 0;	color:#FFF;	margin:15px 0}
#footer a {color:#FFF;	text-decoration:none}
#footer a:hover {text-decoration:underline}
#footer li a {	background: transparent url(../images/small-arrow.gif) 0.2em 0.4em no-repeat;	padding-left:15px}
p.comment a {text-decoration:none}
p.comment a:hover {text-decoration:underline}
p.comment {clear:both;	text-align:right;	padding:0px 10px;	font-size:0.85em;	color:#666;	padding-bottom:20px}

div.clear {clear:both;	height:1px;	padding-bottom:0;	margin:0}

div.promo {float:left;	width:30%;	margin-right:2%}
div.bottomright div {padding:20px}

#banners {width:100%;	margin:0px auto;	padding-bottom:30px}
#banners p, #actions p {color:#000}

p.jump {clear:both;	text-align:right;	margin:20px;	padding-top:20px}


/* ------>>> SPECS <<<-------*/

#products {width:75%}
div.productsizes {text-align:center}
table.features {	border:1px solid #7E8EB6;	margin-right:40%}
table.features td, table.features th {padding:5px}
#specs {float:left;	width:60%}
#system {float:left;	width:70%}


#content #system ul li {background:none}
tr.summary {background-color:#314B8A;	color:#FFF}
tr.summary td {text-align:center;	font-size:1.2em}

#relatedlinks {float:right;	width:25%;	margin-right:20px;	display:block}

#packagingtable ul {margin:0;	padding:0}
#packagingtable ul li {padding:0}
#packagingtable thead th.detail {width:30%}


#standard {padding-right:10px;	width:65%}

/* ------>>> ONLINE ORDERING <<<-------*/

fieldset {	float:left;	background-color:#ECEFF4;	margin:10px;padding:10px;	width:90%}
fieldset.support {background-color:#D3D9E6}
fieldset.support ol {color:#000}
legend {font-size:1.4em;	padding-top:10px;	padding-bottom:5px;	margin-bottom:5px}

dt, dd, textarea {margin:0;	padding:0}
textarea {padding-bottom:10px; 	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size:0.95em;	width:150px}
dt {float:left;	width:150px;	clear:left;	padding-bottom:7px;	text-align:right;	padding-right:15px}
dd {clear:none;	padding-bottom:7px}
dl {float:left;	width:55%}

div.information {float:right;	width:35%;	margin:5px 10px;	padding:10px;	background-color:#F6F7FA}
div.information p {color:#000}

fieldset p.header {	padding:5px;	clear:both;	background-color:#F9FAFC;	border-top:1px dotted #314B8A;	border-bottom:1px dotted #314B8A;	margin:0;	margin-bottom:15px}

table.ordering input {width:30px}
table.ordering th {text-align:left;	padding-right:10px}
#formdata table {float:left;	width:55%;	margin-left:15px}
#formdata table td {padding-bottom:5px}
table.ordering tbody th {font-weight:normal}

ol {margin-left:20px}


/* ------>>> CONTACT FORM <<<-------*/

#contactdetails {width:100%}

fieldset.contactform {	width:43%}
dl.contact {width:100%}
fieldset.contactform p {text-align:center;	clear:both;	position:relative}

#contactdetails legend {font-size:1.4em;	padding-bottom:15px}
#contactdetails p.instruction {padding:5px;	margin-bottom:15px;	background-color:#F9FAFC;	font-size:0.9em;	color:#666}

/* ------>>> PROD <<<-------*/

#images, #images-t {float:right;	margin-left:30px;	width:240px}
#images-t {width:450px}
#products-t {padding:30px 0}

#typicalapplications {clear:both;	text-align:left}
div.productsizes p {color:#666;	font-size:1.1em;	margin:5px;	padding:5px;	line-height:1.5em}

#timberdecking {clear:both;	float:left;	width:55%}
#timberdecking img {float:left;	padding-right:15px}
#systemadvantages {float:right;	clear:none;	width:40%}

/* ------>>> FORM PROCESSING <<<-------

div.error {display:none}*/

dd.errormessage{
	font-size:0.8em;
 	color: #EE2B29;
	margin-left:165px;
	line-height:1.3em;
	padding-bottom:5px;
	text-align:right;
	display:none;	
	}