@charset "UTF-8";
/* CSS Document */


	
/* --- Body --- */
	body {
		background: url(../images/body-bg.png); /* used to make sure the bg grad continues below the page */
		background-position: center 0px;
		font-family: tahoma, Verdana, Arial, Helvetica, sans-serif;
		font-size: 16px;
		color: #000;
		margin: 0;
		padding: 0;
		}
		
	img {
		border: 0px;
	}
	h1 {
		margin: 0;
		padding: 0;
		font-size: 1.4em;
	}
	a {
		color: inherit;
	}
	form {
		padding: 0;
		margin: 0;
	}
	p {
		margin: 0;
		padding: 0;
		font-size: 0.9em;
	}
	li {
		font-size: 0.9em;
	}
	td, th {
		background: white;
		font-size: .9em;
	}
	td.blackback {
		background: black;
	}
	label {
		margin: 10px 0 3px 0;
		font-size: 0.8em;
		display: block;
	}
	label.error {
		color: red;
	}
	input {
		font-size: 0.8em;
	}
	input.submitbutton {
		display: block;
		margin: 5px 0 20px 0;
	}
	textarea {
		font-size: 0.8em;
		font-family: tahoma, Verdana, Arial, Helvetica, sans-serif;
	}

/* construction */
	/* min height hack - the page will always be at least as high as the strut but is able to grow if needed */
	#stagestrut {
		height: 500px;
		width: 1px;
		float: left;
	}
	.clearleft {
		clear: left;
	}
	.clearboth {
		clear: both;
	}

	/* panel wide */

	#panelHeaderWide {
		width: 860px;
		height: 5px;
		background: url(../images/panel-header-wide.png);
		border: 0px solid black;
	}

	#panelFooterWide {
		width: 860px;
		height: 5px;
		background: url(../images/panel-footer-wide.png);
	}

	#panelBodyWide {
		background: #fff;
		padding: 10px;
	}

/* outer wrapper and container. the outer wrapper is used purely for the drop shadow effect and graduated bg, did have this on the body element but it means you get a white block at the bottom if the browser is bigger than the page */
	#outerwrapper {
		width: 100%;
		border: 0px solid red;
		background: url(../images/main-bg.png);
		background-position: center 0px;
	}
	#container {
		border: 0px solid black;
		width: 900px;
		margin:0 auto;
		background: url(../images/stage-bg.gif) #fff repeat-x top left; /* the background is applied here because if it's applied to the stage margin-top on elements on the stage will push the bg down. */
		}

/* header */
	#header {
		height: 244px;
		width: 100%;
		background: url(../images/topheader-bg.gif) #45693D;
		position: relative;
		border: 0px solid red;
	}

	#themenu {
		position: absolute;
		bottom: 0px;
		border: 0px solid red;
	}

	img.logo {
		/*margin-top: 10px;
		margin-left: 10px;*/
	}

	#logo {
	float: left;
	border: 0px solid red;
	}

	#topnav {
		border: 0px solid blue;
		width: 699px;
		height: 30px;
		float: right;
		background: url(../images/topnav-bg.png) no-repeat;
	}
	#topnav ul {
		padding: 0;
		margin: 0 0 0 550px;
	}
	#topnav li {
		display: inline;
		text-decoration: none;
		font-size: 10px;
		color: white;
		margin-left: 5px;
	}
	#topnav li a {
		text-decoration: none;
	}
	#menuwrapper {
		margin: 69px 0 0 20px;
		float: left;
		border: 0px solid blue;
	}
	#menu {
		float: left;
		border: 0px solid blue;
	}
	#searchbar {
		border: 0px solid blue;
		float: left;
		margin-top: 13px;
		width: 260px;
	}

	div.inputWrapper {
		float: left;
		width: 217px;
		background: #a99787 url(../images/searchinput-bg.gif) left top no-repeat;
		color: #302721;
		border: 0px solid red;
	}

	div.inputWrapper input {
		border: 0;
		padding: 3px;
		height: 18px;
		width: 210px;
		background-color: transparent;
	}

	.searchInput {
		color: #c2c2c2;
	}

	.inputButton {
		vertical-align: middle;
		float: left;
		border: 0px solid blue;
	}

	/* categories rollover colours */
		/* category class based on category id in the database with 'c' prefixed */
		/* each  */
			.sf-menu li.c1 li.c1:hover, .sf-menu li.c1 li.c1.sfHover,
			.sf-menu li.c1 a:focus, .sf-menu li.c1 a:hover, .sf-menu li.c1 a:active {
				background: #EF3A32;
			}
			.sf-menu li.c2 li.c2:hover, .sf-menu li.c2 li.c2.sfHover,
			.sf-menu li.c2 a:focus, .sf-menu li.c2 a:hover, .sf-menu li.c2 a:active {
				background: #F79238;
			}
			.sf-menu li.c3 li.c4:hover, .sf-menu li.c3 li.c3.sfHover,
			.sf-menu li.c3 a:focus, .sf-menu li.c3 a:hover, .sf-menu li.c3 a:active {
				background: #FBB913;
			}
			.sf-menu li.c4 li.c4:hover, .sf-menu li.c4 li.c4.sfHover,
			.sf-menu li.c4 a:focus, .sf-menu li.c4 a:hover, .sf-menu li.c4 a:active {
				background: #00A786;
			}
			.sf-menu li.c5 li.c5:hover, .sf-menu li.c5 li.c5.sfHover,
			.sf-menu li.c5 a:focus, .sf-menu li.c5 a:hover, .sf-menu li.c5 a:active {
				background: #008457;
			}
			.sf-menu li.c6 li.c6:hover, .sf-menu li.c6 li.c6.sfHover,
			.sf-menu li.c6 a:focus, .sf-menu li.c6 a:hover, .sf-menu li.c6 a:active {
				background: #5D88A2;
			}
			.sf-menu li.c7 li.c7:hover, .sf-menu li.c7 li.c7.sfHover,
			.sf-menu li.c7 a:focus, .sf-menu li.c7 a:hover, .sf-menu li.c7 a:active {
				background: #9C3C96;
			}
			.sf-menu li.c8 li.c8:hover, .sf-menu li.c8 li.c8.sfHover,
			.sf-menu li.c8 a:focus, .sf-menu li.c8 a:hover, .sf-menu li.c8 a:active {
				background: #008CC8;
			}
			.sf-menu li.c9 li.c9:hover, .sf-menu li.c9 li.c9.sfHover,
			.sf-menu li.c9 a:focus, .sf-menu li.c9 a:hover, .sf-menu li.c9 a:active {
				background: #E0068C;
			}
			.sf-menu li.c10 li.c10:hover, .sf-menu li.c10 li.c10.sfHover,
			.sf-menu li.c10 a:focus, .sf-menu li.c10 a:hover, .sf-menu li.c10 a:active {
				background: #EB6D1F;
			}
			.sf-menu li.c11 li.c11:hover, .sf-menu li.c11 li.c11.sfHover,
			.sf-menu li.c11 a:focus, .sf-menu li.c11 a:hover, .sf-menu li.c11 a:active {
				background: #353E99;
			}
			.sf-menu li.c12 li.c12:hover, .sf-menu li.c12 li.c12.sfHover,
			.sf-menu li.c12 a:focus, .sf-menu li.c12 a:hover, .sf-menu li.c12 a:active {
				background: #958900;
			}
			.sf-menu li.c13 li.c13:hover, .sf-menu li.c13 li.c13.sfHover,
			.sf-menu li.c13 a:focus, .sf-menu li.c13 a:hover, .sf-menu li.c13 a:active {
				background: #094FA3;
			}
			.sf-menu li.c14 li.c14:hover, .sf-menu li.c14 li.c14.sfHover,
			.sf-menu li.c14 a:focus, .sf-menu li.c14 a:hover, .sf-menu li.c14 a:active {
				background: #806F58;
			}
			.sf-menu li.c15 li.c15:hover, .sf-menu li.c15 li.c15.sfHover,
			.sf-menu li.c15 a:focus, .sf-menu li.c15 a:hover, .sf-menu li.c15 a:active {
				background: #AD650D;
			}


	#signpost {
		clear: left;
		color: white;
		border: 0px solid red;
		position: absolute;
		bottom: 4px;
		margin-left: 20px;
	}

	#signpost img.brandLogo {
		margin-bottom: 20px;
	}

/* main stage - the container area below the header div */
	#stage {
		border: 0px solid red;
	}


/* product grid */
	#productGrid {
		margin-left: 20px;
		width: 600px;
		border: 0px solid red;
	}

	#productGrid img.navImg {
		border: 0;
	}

	.productList {
		height: 50px;
		padding: 5px;
		border-bottom: 1px solid #000;
	}

	.productDetail {
		width: 400px;
		float: left;
		border: 0px solid red;
		height: 50px;
	}

	.productImage {
		float: left;
		width: 100px;
		border: 0px solid blue;
	}

	.productImage img {
		border: 0px solid black;
	}

	#gridHeader {
		width: 100%;
		height: 5px;
		background: url(../images/grid-header.png);
		border: 0px solid black;
	}

	#gridFooter {
		width: 100%;
		height: 5px;
		background: url(../images/grid-footer.png);
	}

	#gridBody {
		background: #fff;
		padding: 10px;
	}
/* search results */
	#searchHeader {
		border: 0px red solid;
	}

	#searchHeader h1 {
		padding: 5px;
		margin: 0px 0 2px 0px;
		font-family: arial, helvetica;
		font-size: 1.0em;
		color: black;
		display: block;
		width: 400px;
		height: 50px;
		text-decoration: none;
	}

	#searchHeader h1.c1 {
		background-color: #EF3A32;
	}
	#brandfilter-wrapper {
		width: 600px;
		margin: 10px 0 20px 20px;
		border: 0px solid red;
	}
	#brandfilter-head {
		height: 5px;
		background: url(../images/grid-header.png);
		border: 0px solid black;
	}

	#brandfilter-foot  {
		height: 5px;
		background: url(../images/grid-footer.png);
	}

	#brandfilter {
		background: #fff;
		padding: 0 5px;
		border: 0px solid red;
	}

	#brandfilter p {
		font-size: 0.8em;
		padding-bottom: 3px;
	}

	#brandfilter a {
		padding: 3px 10px 3px 0;
		font-size: 0.8em;
	}

	#rangefilter {
		background: #fff;
		padding: 0 5px;
	}

	#rangefilter p {
		font-size: 0.8em;
		padding-bottom: 3px;
	}

	#rangefilter a {
		font-size: 0.8em;
		margin-right: 10px;
	}

	#stylefilter {
		background: #fff;
		padding: 0 5px;
	}

	#stylefilter p {
		font-size: 0.8em;
		padding-bottom: 3px;
	}

	#stylefilter a {
		font-size: 0.8em;
		margin-right: 10px;
	}

	#panel-wrapper {
		width: 600px;
		margin: 10px 0 20px 20px;
		border: 0px solid red;
	}
	#panel-head {
		height: 5px;
		background: url(../images/grid-header.png);
		border: 0px solid black;
	}

	#panel-foot  {
		height: 5px;
		background: url(../images/grid-footer.png);
	}

	#filteringByPanel {
		background: #fff;
		padding: 0 5px;
	}

	#filteringByPanel p {
		font-size: 0.8em;
		padding-bottom: 3px;
		margin-right: 20px;
		display: block;
	}

	#filteringByPanel a {
		padding: 3px 10px;
		font-size: 0.8em;
	}

	#searchterms {
		margin: 10px 20px;

	}

/* home page */
	#home {
		width: 860px;
		margin: 20px;
	}

	#intro {
		float: left;
		height: 500px;
		padding: 90px 0 0 30px;
		width: 450px;
		margin-top: 10px;
		margin-right: 20px;
		background: url(../images/bg-homepage.png) 10px 10px no-repeat;
		border: 0px blue solid;
	}
	#catalogue {
		margin-top: 10px;
		width: 300px;
		float: left;
		border: 0px red solid;
	}


/* about */
	#about {
		width: 860px;
		margin: 20px;
	}

	#about p {
		margin: 3px 0 10px 0;
	}

	#about_images {
		text-align: center;
	}
	#about_images img {
		padding: 5px;
	}
/* heavy equipment */
	#heavy {
		width: 840px
		border: 0px solid blue;
	}

/* contact page */
	#contact {
		width: 860px;
		margin: 20px;
	}
	#contact p {
		margin: 3px 0 10px 0;
	}
	#contactForm {
		width: 400px;
		padding-right: 20px;
		float: left;
	}
	#contactForm textarea.addressField {
		width: 180px;
		height: 90px;
	}
	#contactForm textarea.commentField {
		width: 250px;
		height: 150px;
	}
	#contactDetails {
		width: 420px;
		float: left;
	}
	#feedback p {
		color: red;
	}
	img.address {
		margin: 0 10px 50px 0;
		padding-top: 5px;
	}
	img.telephone {
		margin: 0 10px 0 0;
	}
	img.fax {
		margin: 0 10px 0 0;
	}
	img.email {
		margin: 0 10px 0 0;
	}
/* FAQ */
	#faq {
		width: 860px;
		border: 0px solid red;
		margin: 20px;
	}
	#faq h1 {
		font-size: 1.2em;
	}
	#faq h3 {
		font-size: 1em;
		margin: 10px 0 5px 0;
	}
	#faq p {
		margin: 3px 0 10px 0;
	}

/* ts and cs */
	#tc {
		width: 860px;
		border: 0px solid red;
		margin: 20px;
		padding-right: 50px;
	}
	#tc h1 {
		font-size: 1.2em;
	}
	#tc h3 {
		font-size: 1em;
		margin: 10px 0 5px 0;
	}
	#tc p {
		margin: 3px 0 10px 0;
	}
	#tc li {
		font-size: 0.9em;
		margin: 8px 0;
	}

/* product page */
	#product img.product {
		margin: 10px 10px 3px 10px;
		border: none;
		}
	#product a {
		text-decoration: none;
		}

/* footer */
	#footer {
		height: 30px;
		width: 100%;
		text-align: center;
		background: #60BB46;
	}
	#footer p {
		font-size: 1em;
		color: white;
		padding-top: 5px;
		font-weight: bold;
	}