/****************************************************************
 * The following CSS classes are applied to the body tag
 * by the database/script. This allows differing descendent selectors
  * to be applied:
 *
 * home = home page
 * about = about page
 * news = news page
 * sales = sales page
 * contact = contact page
 * products = product catalogue
 *
 * c1 = Stairpairts Collection
 * c2 = Warwick Collection
 * c3 = Contemporary Collection
 * c4 = Axys Collection
 * c5 = Decking Collection
 * c6 = Quays Collection
 * c7 = Mouldings Collection
 *
 * col-stairparts - Stairparts Collection Intro Page
 * col-warwick - Warwick Collection Intro Page
 * col-quays - Quays Collection Intro Page
 * col-contemporary - Contemporary Collection Intro Page
 * col-axxys - Axxys Intro Collection Page
 * col-decking - Decking Collection Intro Page
 * col-mouldings - Mouldings Collection Intro Page
 *
 * r1 - stairparts/pine range Intro Page
 * r2 - stairparts/oak range Intro Page
 * r3 - stairparts/hemlock range Intro Page
 * r4 - stairparts/ash range Intro Page
 * r5 - stairparts/hardwood range Intro Page
 * r6 - wawrwick/pine range Intro Page
 * r7 - wawrwick/oak range Intro Page
 * r8 - quays/pine range Intro Page
 * r9 - quays/oak range Intro Page
 * r10 - contemporary/pine range Intro Page
 * r11 - contemporary/oak range Intro Page
 * r12 - axxys/stairparts range
 * r13 - axxys/rails range
 * r14 - decking/traditional range
 * r15 - decking/axxys dek range
*****************************************************************/
img { border:0; }
img.close-up {border:1px solid #887766;}
img.right {display:block; margin:0 0 10px 10px;}
img.top-right {display:block; margin:10px 0 10px 10px;}
img.bottom {margin:10px 10px 0 0;}

div.content { height:100%; }

* html #page { width:780px; } /* IE hack */
html, body { height:100%; }
html>body { font-size:12px; }/* Sort out font size on Mac */

body {
	font:62.5% Arial, Helvetica, Verdana, sans-serif;
	font-size/* */:/**/62.5%;
	font-size:/**/62.5%;
	color:#333;
	background:#f4edd0;
	line-height:1.1em;
	width:800px;
	margin: 0 auto;
}

p {
	font-family:Arial, Helvetica, Verdana, sans-serif;
	font-size:12px;
	font-weight:normal;
	text-decoration:none;
	color:#333;
	line-height:16px;
}

h1 {
	font-family:"Century Gothic", "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:normal;
	text-transform:uppercase;
	text-decoration:none;
	color:#654;
}

h2 {
	font-family:"Century Gothic", "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:normal;
	text-decoration:none;
	text-transform:uppercase;
	text-decoration:none;
	color:#654;
}

a:link, a:visited, a:active, a:hover {color:#654;}
a[href$=".pdf"] { background: url(../images/pdf.gif) no-repeat right top; padding-right:42px;}

/* Provide min-height to match background image (below) as the div height will
 * be governed by the contained content, not this image.
 * ie6.css uses height attribute, as min-height not supported
 */
#page {
	min-height:600px;
	padding:0;
	border:10px solid #fff;	
}

/* background images for each static page 
 * AWAITING MORE IMAGES
 */
body.about #page,
body.news #page,
body.contact #page {
	background: #f4edd0;
}
body.home #page,
body.about #page,
body.news #page,
body.contact #page {
	background: #f4edd0 url(/images/backgrounds/h_home.jpg) no-repeat top right; }
body.sales #page { background: #f4edd0 url(/images/backgrounds/h_sales.jpg) no-repeat top right; }


/* background images for each collection intro page
 */
/* products.jpg = stairparts */
body.c1 #page { background: #f4edd0 url(/images/backgrounds/h_products.jpg) no-repeat top right; }
body.c2 #page { background: #f4edd0 url(/images/backgrounds/h_warwick.jpg) no-repeat top right; }
body.c3 #page { background: #f4edd0 url(/images/backgrounds/h_contemporary.jpg) no-repeat top right; }
body.c5 #page { background: #f4edd0 url(/images/backgrounds/h_decking.jpg) no-repeat top right; }
body.c6 #page { background: #f4edd0 url(/images/backgrounds/h_quays.jpg) no-repeat top right; }
body.c7 #page { background: #f4edd0 url(/images/backgrounds/h_mouldings.jpg) no-repeat top right; }

body.stairparts-pine #page { background: #f4edd0 url(/images/backgrounds/h_pine.jpg) no-repeat top right; }
body.stairparts-oak #page { background: #f4edd0 url(/images/backgrounds/h_oak.jpg) no-repeat top right; }
body.stairparts-ash #page { background: #f4edd0 url(/images/backgrounds/h_ash.jpg) no-repeat top right; }
body.stairparts-hemlock #page { background: #f4edd0 url(/images/backgrounds/h_hemlock.jpg) no-repeat top right; }
body.stairparts-hardwood #page { background: #f4edd0 url(/images/backgrounds/h_red_hardwood.jpg) no-repeat top right; }

body.contemporary-pine #page { background: #f4edd0 url(/images/backgrounds/h_contemporary_pine.jpg) no-repeat top right; }
body.contemporary-oak #page { background: #f4edd0 url(/images/backgrounds/h_contemporary_oak.jpg) no-repeat top right; }

body.axxys-stairparts #page { background: #f4edd0 url(/images/backgrounds/h_axxys_stairparts.jpg) no-repeat top right; }
body.axxys-rails #page { background: #f4edd0 url(/images/backgrounds/h_axxys_rail.jpg) no-repeat top right; }

body.decking-traditional #page { background: #f4edd0 url(/images/backgrounds/h_traditional_decking.jpg) no-repeat top right; }

/* products page -
 * no background image, white background
 */
body.products,
body.products #page {
	background: #fff;
}

/* top company banner -
 * inherits background colour so as not to overlay background image
 */
#company-banner {background:inherit; margin:0; padding:0 0 0 0px; height:100px;}

/* for products pages add background colour - no background image */
body.products #company-banner {background: #f4edd0;}

/* for axxys & dek collection use different background colour */
body.c4 #company-banner,
body.c5 #company-banner { background:#887766; width:430px; }


/* we need to provide a right-hand margin so that the content text does
 * not overlap the right-hand image background
 * Also need border to give height/layout to div
 */
#content {
	font-size:0.9em;
	margin:0 370px 0 0;
	padding:5px 0 0 10px;
	border: 1px solid #f4edd0;
}

/* different layout for products and collection pages
 * no right margin, as no background image
 */
body.products #content { margin:0; padding:0px 0 0 0; border: 1px solid #fff;}

body.c1 #content,
body.c2 #content,
body.c3 #content,
body.c4 #content,
body.c5 #content,
body.c6 #content,
body.c7 #content	 {
	padding:0px 0 0 0;
}

/******************************************
 * top-menu
 * use unordered lists <ul>
 * change the list items from block to inline elements to remove line breaks
 * height matches that of the white stripe in background images
 * width fixed to fit edge of background graphic
 * border-bottom - purely styling, but also used to show current page selection
 ******************************************/
#top-menu { 
	text-transform:capitalize;
	font-size:.8em;
	text-align: left;
	background:#fff;
	margin:0;
	width:430px;
	padding:0;
	height:30px;
	font-weight:bold;
	border-bottom:4px solid #887766;	
}

/* increase width of top menu for products, where there is no background image */
body.products #top-menu {
	width:780px;
}

/* top menu anchors */
#top-menu ul { list-style: none; padding: 0; margin: 0; text-align: left; display:inline; }
#top-menu li { display: inline;}
#top-menu a:link,
#top-menu a:visited,
#top-menu a:active {
	background:#fff; text-decoration: none; color: #654; margin: 0;
	padding: 8px 5px;
	height:14px;
	display:block;
	float:left;
}

#top-menu a:hover {	color: #333; border-bottom:4px solid #ddddbb;}

/* define menu style for selected page
 * works off css class in body tag and ccs class of link
 */
body.home #top-menu a#home,
body.about #top-menu a#about,
body.news #top-menu a#news,
body.sales #top-menu a#sales,
body.contact #top-menu a#contact,
body.products #top-menu a#products,
body.c1 #top-menu a#products,
body.c2 #top-menu a#products,
body.c3 #top-menu a#products,
body.c4 #top-menu a#products,
body.c5 #top-menu a#products,
body.c6 #top-menu a#products,
body.c7 #top-menu a#products {
	border-bottom:4px solid #584E30;	
}

/******************************************
 * menu (left)
 * use unordered lists
 * menus nested, hence nested unordered lists
 * height fixed to fit in with background image
 ******************************************/
#menu {
	text-align: left;
	background:#887766;
	color:#fff;
	margin:10px 10px 0 0;
	padding:5px 0 10px 10px;
	width:135px;
	float:left;
	text-transform:capitalize;
	height:440px;
}

/* collections */
#menu ul { list-style: none; padding: 0; margin: 0 0 10px 0; text-align: left; background:inherit;}
#menu ul li {margin:0px; }

/* ranges within collections */
#menu ul ul { margin: 0 0 0 10px;}

/* third-level menus within ranges */
#menu ul ul ul { margin: 0 0 0 10px; }
#menu ul ul ul li { margin:0; padding:0;}

/* 
 * this border is a hack for IE6 that does not render the <li> height
 * correctly otherwise
 */
#menu ul li,
#menu ul ul li, 

#menu ul ul li { margin:0;}

/* anchors */
#menu a { display:block; padding:0px 0px; line-height:1.2em;}
#menu a:link, #menu a:visited { text-decoration: none; color: #fff; border-bottom:1px solid #887766; }
#menu a:hover { text-decoration: none; 	background:#fff; color:#887766;}

#menu ul ul li a {font-size:.9em; border:1px solid #887766; font-style:italic;}
#menu ul ul ul li a {font-size:.8em; border:1px solid #887766; font-style:normal;}

/* anchors for selected collection and/or range
 * combination of body css class and css class for menu anchor
 */
body.c1 #menu a.c1,
body.c2 #menu a.c2,
body.c3 #menu a.c3,
body.c4 #menu a.c4,
body.c5 #menu a.c5,
body.c6 #menu a.c6,
body.c7 #menu a.c7 {
	border-bottom:1px solid #fff;
}

body.r1 #menu a.r1, body.r2 #menu a.r2, body.r3 #menu a.r3, body.r4 #menu a.r4, body.r5 #menu a.r5,
body.r6 #menu a.r6, body.r7 #menu a.r7, body.r8 #menu a.r8, body.r9 #menu a.r9, body.r10 #menu a.r10,
body.r11 #menu a.r11, body.r12 #menu a.r12, body.r13 #menu a.r13, body.r14 #menu a.r14, body.r15 #menu a.r15 {
	font-weight:bold;
}

/******************************************
 * sub-menu (top)
 * use for product groups within a range - only visible on products page
 ******************************************/
#sub-menu {
	float:left;
	width:608px;
	background:#fff;
	margin:0px 0 0px 15px;
	padding:0;
	text-align:center;
	text-transform:capitalize;
}

#sub-menu ul { list-style: none; margin:0; padding:0;}
#sub-menu li {display:inline;}

/* anchors */
#sub-menu a:link,
#sub-menu a:visited,
#sub-menu a:active {
	font-size:.85em;	
	text-decoration: none;
	color: #584E30;
	background:#fff;
	padding: 0px 10px 2px 10px;
	height:14px;
	display:block;
	float:left;
	font-weight:normal;
	margin-bottom:10px;
}

/* anchors for selected product group
 * 7 collectins split over 15 ranges, further split into numerous product
 * groups, totals 54 product groups
 * i.e. 54 product pages
 */
body.pg1 #sub-menu a.pg1, body.pg2 #sub-menu a.pg2, body.pg3 #sub-menu a.pg3, body.pg4 #sub-menu a.pg4, body.pg5 #sub-menu a.pg5,
body.pg6 #sub-menu a.pg6, body.pg7 #sub-menu a.pg7, body.pg8 #sub-menu a.pg8, body.pg9 #sub-menu a.pg9, body.pg10 #sub-menu a.pg10,

body.pg11 #sub-menu a.pg11, body.pg12 #sub-menu a.pg12, body.pg13 #sub-menu a.pg13, body.pg14 #sub-menu a.pg14, body.pg15 #sub-menu a.pg15,
body.pg16 #sub-menu a.pg16, body.pg17 #sub-menu a.pg17, body.pg18 #sub-menu a.pg18, body.pg19 #sub-menu a.pg19, body.pg20 #sub-menu a.pg10,

body.pg21 #sub-menu a.pg21, body.pg22 #sub-menu a.pg22, body.pg23 #sub-menu a.pg23, body.pg24 #sub-menu a.pg24, body.pg25 #sub-menu a.pg25,
body.pg26 #sub-menu a.pg26, body.pg27 #sub-menu a.pg27, body.pg28 #sub-menu a.pg28, body.pg29 #sub-menu a.pg29, body.pg30 #sub-menu a.pg10,

body.pg31 #sub-menu a.pg31, body.pg32 #sub-menu a.pg32, body.pg33 #sub-menu a.pg33, body.pg34 #sub-menu a.pg34, body.pg35 #sub-menu a.pg35,
body.pg36 #sub-menu a.pg36, body.pg37 #sub-menu a.pg37, body.pg38 #sub-menu a.pg38, body.pg39 #sub-menu a.pg39, body.pg40 #sub-menu a.pg10,

body.pg41 #sub-menu a.pg41, body.pg42 #sub-menu a.pg42, body.pg43 #sub-menu a.pg43, body.pg44 #sub-menu a.pg44, body.pg45 #sub-menu a.pg45,
body.pg46 #sub-menu a.pg46, body.pg47 #sub-menu a.pg47, body.pg48 #sub-menu a.pg48, body.pg49 #sub-menu a.pg49, body.pg50 #sub-menu a.pg50,

body.pg51 #sub-menu a.pg51, body.pg52 #sub-menu a.pg52, body.pg53 #sub-menu a.pg53, body.pg54 #sub-menu a.pg54
{
	font-weight:bold;
}

#sub-menu a:hover {text-decoration: underline;}

/******************************************
 * product catalogue/ gallery
 ******************************************/
#catalogue {padding-top:0px;}

#gallery {margin:0 0 0 170px;}

.product {
	float:left;
	margin-right:35px;
	margin-bottom:20px;
	text-align:center;
}

/******************************************
 * product - images
 * utilised by JavaScript library
 ******************************************/
* {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}
.highslide {
	cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide img {
	border: 1px solid #ddddbb;
}
.highslide:hover img {
	border: 1px solid #887766;
}

.highslide-image {
	border: 1px solid #ddddbb;
}
.highslide-image-blur {
}
.highslide-caption {

    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: #fff;
}
.highslide-loading {
    display: block;
	color: white;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
    text-decoration: none;
	padding: 3px;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
	font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}

/* hide non-visual links off screen */
.off-screen {
    position:absolute;
 	left:0px;
 	top:-500px;
 	width:1px;
 	height:1px;
 	overflow:hidden;
}

/****************************************
 * Custom layouts
****************************************/
/* home page */
.home-content {float:left; width:275px; height:300px;}

/* axxys-dek page */
body.decking-axxys #page { background: #f4edd0; }
body.decking-axxys #company-banner { background:#887766; width:780px; }
body.decking-axxys #top-menu { width:780px; }

.axxys-dek-content{  position:relative;}

.content-left {position:absolute; top:0px; left:160px; width:290px; margin-top:10px; }
.content-right {position:absolute; top:0px; left:480px; width:290px; margin-top:10px; }

.content-left h2, .content-right h2 {background:#ddddbb; padding:6px; margin-top:10px;}

/* axxys clearview + dek pages */
body.clearview,
body.axxys_dek,
body.axxys_stairparts_products,
body.trad_decking_products { background:#fff; }
body.clearview #page,
body.axxys_dek #page,
body.axxys_stairparts_products #page,
body.trad_decking_products #page { background:#fff; width:780px; }
body.clearview #company-banner,
body.axxys_dek #company-banner,
body.axxys_stairparts_products #company-banner,
body.trad_decking_products #company-banner,
body.axxys_stairparts_products #company-banner { background:#887766; width:780px; }
body.clearview #content,
body.axxys_dek #content,
body.axxys_stairparts_products #content,
body.trad_decking_products #content { border: 1px solid #fff;}
body.clearview #top-menu,
body.axxys_dek #top-menu,
body.axxys_stairparts_products #top-menu,
body.trad_decking_products #top-menu { width:780px; }
body.axxys_stairparts_products #top-menu { width:780px; }

table { float:left; padding:0; margin:0; border:1px solid #ddddbb;}
tr {padding:0; margin:0;}
th, td {font-size:.8em; padding:0; margin:0; }
th {text-align:left;}
td { color:#333; background:#f4edd0; padding:2px 4px;}
td.subhead {background:#ddddbb;}

#axxys-dek-table {position:absolute; top:300px;left:200px; padding-bottom:20px; width:550px;}
#axxys-clearview-table { position:absolute; top:260px; left:180px; padding-bottom:20px; width:550px;}
#trad-decking-table { position:absolute; top:600px; left:0px; padding-bottom:20px; width:550px;}

div#trad-products {width:700px; position:absolute; left:170px}

div.trad-product img {float:left;}
div.trad-product img {float:left; }

/* axxys stairparts components */
div.stairpart-component {display:inline; float:left;}
div.stairpart-component img {display:block}
div.stairpart-component p {text-align:center; font-size:10px;}

/* contact form */
.form-error { border:1px solid #ff0000; }
.mandatory-flag {
	color:#ff000;
	padding-left:10px;
}

.mandatory {
	background-color:inherit;
	color:#ff0000;
}

.warning-message {
	border: 1px solid #ff0000;
	background-color:#fff;
	color:#ff0000;
	padding:10px;
	margin:10px 0;
}
.warning-message p {color:#ff0000;}
.info-message {
	border: 1px solid #584E30;
	background-color:#fff;
	color:#584E30;
	padding:10px;
	margin:10px 0;
}

textarea, .textbox {
	border:1px solid #584E30;
	padding-left:5px;
	width:180px;
}

fieldset { padding: 0px; margin:0; border: none; }
legend { font-size:1.4em; font-weight:bold; margin:0; padding:0 0 15px 0; }
.button {color:#fff; background:#584E30; border:1px outset #333}

/* over-ride h4 used for some form labels */
.label {
	font: 1em Verdana, sans-serif;
	color:#584E30;
	text-transform:capitalize;
	display:inline;
	vertical-align:middle;
}

label {
	float:left;
	width:10em;
	padding-bottom:4px;
	color:#584E30;
	text-transform:capitalize;
}

.call-to-action {
	clear:both;
	margin:0;
	padding-top:10px;
}

.call-to-action p {
	padding:5px;
	margin:0;
	text-align:center;
	background:#ddddbb;
}

.footer-text,
.footer-text a:link,
.footer-text a:visited,
.footer-text a:hover,
.footer-text a:active {
	font-size:10px;
	color:#333;
	text-align:right;
	padding:10px 2px 0 0;
	clear:both;
	text-decoration:none;
}
.footer-text a:link {font-weight:bold;}