@charset "utf-8";

/*These are the general styles that apply site wide*/
 
a {
	font-weight: bold;
	color: #000066;
	text-decoration: none;
}

a:hover {
	font-weight: bold;
	color: #0099CC;
}

body {
	margin: 0;
	padding: 0;
	font: 90% Arial, Helvetica, sans-serif;
	background: url(../images/general/bk.jpg) repeat;
}

p, h1, h2, ol, ul {
	margin: 0px;
	padding: 0px;
}

/*This is where the page width is set*/

#wrapper {
	width: 924px;
	background: #FFFFFF;
	border: 4px double #000000;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
}

/*these style the horizontal menu buttons*/

#wrapper #navigation {
}

#wrapper #navigation li {
	list-style-type: none;
	padding: 0px;
	margin: 0;
	float: left;
}

#wrapper #navigation a {
	display: block;
	font-size: 80%;
	color: #666666;
	text-decoration: none;
	width: 152px;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	background: #CCCCCC;
	border-top: 1px solid #333333;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	border-left: 1px solid #333333;
}

#wrapper #navigation a:hover {
	color: #FFFFFF;
	background: #006699;
	font-size: 80%;
	font-weight: bold;
	border: 1px solid #333333;
}

/* These style the contact strip with phone number and email address*/

#wrapper #contactStrip {
	background: #030268;
}

#wrapper #contactStrip p {
	font-size: 135%;
	color: #FFFFFF;
	font-weight: bold;
	font-style: normal;
	margin-right: 30px;
	margin-left: 30px;
	line-height: 160%;
}

#wrapper #contactStrip a {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}

#wrapper #contactStrip a:hover {
	color: #0099CC;
	text-decoration: none;
}

/* These style the side bar, including the vertical menu buttons*/

#wrapper #sideBar {
	float: left;
	width: 182px;
	background: #000066;
}

#wrapper #sideBar .navigation {
	font-size: 75%;
	font-weight: bold;
	list-style: none;
}

#wrapper #sideBar .navigation a {
	color: #666666;
	background: #CCCCCC;
	width: 150px;
	display: block;
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: bold;
	text-align: left;
	padding-left: 30px;
	border-top: 1px solid #333333;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	border-left: 1px solid #333333;
}

#wrapper #sideBar .navigation a:hover {
	color: #FFFFFF;
	text-decoration: none;
	background: #006699;
	border: 1px solid #666666;
}

#wrapper #sideBar img {
	margin-top: 20px;
	border: 3px double #333333;
	margin-left: 30px;
	margin-bottom: 20px;
}

#wrapper #sideBar img.validcode {
	border-style: none;
	margin-top: 5px;
	margin-bottom: 5px;
}

/* The main content on each page sits in the columnRight div */

#wrapper #columnRight {
	margin-left: 190px;
	margin-right: 10px;
	padding-bottom: 15px;
	margin-bottom: 10px;
}

#wrapper #columnRight h1 {
	font-size: 140%;
	color: #000066;
	margin-left: 10px;
	margin-top: 10px;
}

#wrapper #columnRight h2 {
	font-size: 110%;
	color: #000066;
	margin-top: 25px;
	margin-bottom: 20px;
	margin-left: 10px;
}

/* Use h3 for the Images | Prices | Colour Options | Contact menu on the product pages */

#wrapper #columnRight h3 {
	font-size: 95%;
	font-weight: bold;
	color: #666666;
	background: #CCCCCC;
	margin: 15px 150px 20px 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
}

#wrapper #columnRight p {
	font-size: 85%;
	text-align: justify;
	line-height: 120%;
	color: #666666;
	margin: 15px 10px;
}

/*The three abreast images on the main page and the products page use class productPage and sit in the productRange div*/

#wrapper #columnRight #productRange .productPage {
	height: 200px;
	width: 200px;
	float: left;
	border: 1px solid #333333;
	background: #030268;
	margin-top: 15px;
	margin-right: 28px;
	margin-bottom: 15px;
	margin-left: 10px;
}

#wrapper #columnRight #productRange .productPage h2 {
	font-size: 80%;
	color: #999999;
	margin-top: 10px;
	margin-left: 10px;
}

#wrapper #columnRight #productRange .productPage a {
	color: #FFFFFF;
}

#wrapper #columnRight #productRange .productPage a:hover {
	color: #336699;
}

#wrapper #columnRight #productRange .productPage img {
	border-bottom: 1px solid #333333;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}

/* The image galleries on the individual product pages sit in the #gallery div - use blank images as spacers to force images to next line where needed*/

#wrapper #columnRight #gallery img.mainSlide {
	float: right;
	border: 1px solid #333333;
	margin: 10px 3px 10px 5px;
}

#wrapper #columnRight #gallery img.thumb {
	border: 1px solid #333333;
	margin-top: 10px;
	margin-right: 2px;
	margin-left: 10px;
}

/* Below each image gallery there are product specifications. These go into the #specifications div to align them correctly beneath the images */

#wrapper #columnRight #specifications {
	clear: right;
}

#wrapper #columnRight #specifications p.underlined {
	font-weight: bold;
	text-decoration: underline;
}

#wrapper #columnRight #specifications img.lattice {
	float: left;
	margin: 10px;
	border: 1px solid #666666;
}

/* These styles are for the table of product types in the enquiry form on the Contact page */

#wrapper #columnRight #enquiries label {
	font-weight: bold;
	width: 125px;
	float: left;
}

#wrapper #columnRight #enquiries #products {
	margin-left: 5px;
	border: 3px double #000000;
}

#wrapper #columnRight #enquiries #products td.type {
	background: #000066;
	font-size: 90%;
	font-weight: bold;
	color: #FFFFFF;
	margin-top: 2px;
	margin-bottom: 2px;
	padding-left: 10px;
}

#wrapper #columnRight #enquiries #products td.checkbox {
	background: #999999;
	text-align: center;
}

/* Use these two styles for the manuals covers on the installation guides page - use filler images to force text onto new line */

#wrapper #columnRight .manuals {
	border: 1px solid #333333;
	margin: 10px 31px 10px 11px;
	float: left;
}

#wrapper #columnRight .manualsFiller {
	border-style: none;
	margin: 10px 31px 10px 11px;
}

/* These are the styles for the price list tables. Set up the table with a table header cell and 11 columns. Table width 710 px. 1st column is 125 px wide, next 9 are 40 px wide. */

#wrapper #columnRight #pricelist {
	border: 1px solid #999999;
}

#wrapper #columnRight #pricelist th {
	font-weight: bold;
	color: #FFFFFF;
	background: #000066;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}

#wrapper #columnRight #pricelist td.width {
	color: #333333;
	font-size: 80%;
	text-align: center;
	font-weight: bold;
	background: #BFC0DD;
	width: 360px;
}

#wrapper #columnRight #pricelist td.height {
	font-size: 80%;
	font-weight: bold;
	color: #000000;
	background: #BFC0DD;
	text-align: center;
	width: 125px;
}

#wrapper #columnRight #pricelist td.blue {
	background: #BFC0DD;
	font-size: 80%;
	text-align: center;
	width: 40px;
}

#wrapper #columnRight #pricelist td.oddMM {
	font-weight: bold;
	color: #000000;
	background: #BFC0DD;
	font-size: 80%;
	text-align: center;
}

#wrapper #columnRight #pricelist td.cream {
	color: #000000;
	background: #FFFFCC;
	text-align: center;
	width: 40px;
	font-size: 80%;
	font-weight: normal;
}

#wrapper #columnRight #pricelist img {
	margin: 15px 50px;
}

/* These are the styles for the links on the site map page. The list of links sits in the siteMap div*/

#wrapper #columnRight #siteMap li {
	background: url(../images/general/sitemap.gif) no-repeat;
	margin-left: 20px;
	list-style: none;
	padding-left: 40px;
	font-size: 90%;
	margin-bottom: 10px;
	margin-top: 15px;
}

#wrapper #columnRight #siteMap li.indent {
	padding-left: 40px;
	margin-left: 70px;
	font-size: 90%;
	margin-top: 5px;
	margin-bottom: 10px;
}

/* This centres the slide show on the about us page - the slide show appears in an empty div with id "about_slides"*/

#wrapper #columnRight #about_slides {
	border: 1px solid #333333;
	margin: 15px;
}

/* These style the customer quotes on the testimonials page */

#wrapper #columnRight .quote {
	font-style: italic;
	color: #666666;
	font-size: 90%;
	margin-right: 60px;
	margin-left: 60px;
}

#wrapper #columnRight .name {
	font-size: 90%;
	color: #CC6600;
	text-align: right;
	font-weight: bold;
	padding-bottom: 10px;
	margin-right: 60px;
}

/*These styles control the footer section of the page*/

#wrapper #footer {
	clear: both;
	background: #000066;
}

#wrapper #footer p {
	font-size: 70%;
	color: #FFFFFF;
	margin-left: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
}

#wrapper #footer a {
	color: #FFFFFF;
	text-decoration: none;
}

#wrapper #footer a:hover {
	color: #006699;
	text-decoration: none;
}

/*These styles control the text menu at the foot of each page*/

#bottomNavigation {
	margin: 10px auto;
	color: #FFFFFF;
}

#bottomNavigation p {
	font-size: 70%;
	color: #FFFFFF;
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: center;
}

#bottomNavigation a {
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	margin-bottom: 20px;
}

#bottomNavigation a:hover {
	text-decoration: underline;
	color: #FFFFFF;
}

img.border {
	border: 1px solid #666666;
}

img.borderCentred {
	margin: 10px 60px;
	border: 1px solid #333333;
}

/*These are general styles that can be used throughout the site*/

.stressed {
	font-style: italic;
	font-weight: bold;
	color: #CC0000;
}

.clearFloat {
	clear: both;
}

.logo {
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
}