/**** Innovative Stainless Steel Designs Template File *****/
/*                   KND Web Consultants                   */
/************** Andrew Mee - September 2007 ****************/
/************* Welcome to Andrew's Chop-Shop ***************/

/* Globals */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}

html {
	background:#D1CCE4 url(../images/bg.jpg) repeat-x left top;
	font-family: 'Trebuchet MS', Arial, 'Lucida Sans', sans-serif;
	font-size: 62.5%;
}

body {
	background:#EAE8F3 url(../images/bg-body.gif) repeat-y top left; /* Fake columns */
	color:#333;
	font-size:1em; /* base font-size is 10px */
	margin:30px auto;
	width:900px;
}

body#products {background-image:url(../images/bg-body-wide.gif);} /* wide version */

/* Text formatting */

h1, h2, h3, h4, h5, h6 {color:#2D3187;font-weight:normal;margin-bottom:1em;}
h1 {line-height:0;margin:0;}
h2 {font-size:1.4em;}
h3 {font-size:1.2em;}
h4 {font-size:1.1em;}
h5 {font-size:1em;}

a {
	color:#2D3187;
}

a:hover {text-decoration:underline!important;}

p {line-height:1.6;margin-bottom:1em;}

dl {font-size:0.9em;} /* this is NOT a kind text-size! */

dt {color:#2D3187;float:left;font-weight:bold;width:4em;}
dd {margin:0 0 1em 4.5em;}

.hr {
	background:url(../images/bg-dotts.gif) repeat-x top left;
	clear:both;
	height:3px;
	margin:1em  0;
}

#content img {margin-bottom:1em;}
img.left {float:left;margin:0px 1em 1em 0;}
p img {float:left;margin:0px 1em 1em 0;}
img.right {float:right;margin:0 0 1em 1em;}

/* Layout */

#header {
	background:#D1CCE4 url(../images/header-1.jpg) no-repeat top right;
	border-bottom:10px solid #EAE8F3;
}

body#products #header {background-image:url(../images/header-2.jpg);} /* Add more header images thus */

body#anotherPage #header,
body#aDifferentPageAgain #header {background-image:url(../../images/header-3.jpg);} /* Assign a sigle header image to multiple pages thus */

form#headerSearch {
	float:right;
	padding:7px 1em 0;
}

form#headerSearch label {
	color:#2D3187;
	font-weight:bold;
}

form#headerSearch input#search {
	border:1px solid #5F5BA8;
	font-size:1em;
	margin:0 0.25em;
	padding:2px;
	width:10em;
}

form#headerSearch input.button {vertical-align:top;}

#menu {padding:10px 0;}

#menu li {
	display:inline;
}

#menu li a {
	border-right:1px solid #5F5BA8;
	color:#5F5BA8;
	padding:3px 20px;
	text-decoration:none;
}

#menu li:last-child a {border:0;}

#menu li a:hover {background:#DBD7EA;}

/* Here's your .active class - though better to keep the menu the same on all pages and drive it by body id in my opinion */
#menu li a.active,
body#index #menu .home,
body#products #menu .products, #menu .active {color:#2D3187;font-weight:bold;}

#leftCol, #rightCol {
	background:#DBD7EA;
	display:inline; /* try and double the margins NOW ie6! */
	float:left;
	margin:0 10px;
	overflow:hidden;
	padding:10px;
	width:153px;
}

.sidebar div {
	background:#D1CCE4;
	margin-bottom:1em;
	padding:0 10px 10px;
}

.sidebar div h3 {
	background:#2D3187;
	color:white;
	font-size:1em;
	margin:0px -10px 10px; /* because ie6 bleeds if you give it a negative top-margin */
	padding:5px 10px;
}

ul#products {line-height:1.6;list-style:none;}

ul#products li a {
	color:#5F5BA8;
	font-weight:bold;
	text-decoration:none;
}

ul#products ul {list-style:none;padding-left:1em;}

ul#products ul li a {font-weight:normal;}

/* Active states, this time derived from body class (to cater for multiples/heirachy) */
ul#products .active, ul#products li.active a{color:#333;}
#inactiveUL {display:none;}

.catalogueDownload {
	background:#2D3187 url(../images/download-catalogue.jpg) no-repeat bottom left;
	color:white;
	display:block;
	font-size:1em;
	height:115px;
	padding:5px 10px;
	text-decoration:none;
}

.catalogueDownloadHandrail {
	background:#2D3187 url(../images/download-catalogue-handrail.jpg) no-repeat bottom left;
	color:white;
	display:block;
	font-size:1em;
	height:115px;
	padding:5px 10px;
	text-decoration:none;
}
.steelIndustry {
	background:#2D3187 url(../images/steelIndustry.jpg) no-repeat bottom left;
	color:white;
	display:block;
	font-size:1em;
	height:115px;
	padding:5px 10px;
	text-decoration:none;
}

#content {
	background:white;
	float:left;
	margin:0;
	padding:10px;
	width:494px;
}

body#products #content {width:674px;} /* wide version */

ul#productDetails {list-style:none;}
ul#productDetails li {
	background:url(../images/bg-dotts.gif) repeat-x top left;
	padding-top:1.4em;
}

#footer {
	background:#EAE8F3;
	clear:left;
	_float:left;
	line-height:1.5;
	padding:10px;
	_width:880px;
}

#footer li {display:inline;}

#footer li a {
	border-right:1px solid #5F5BA8;
	color:#5F5BA8;
	padding:0 10px;
	text-decoration:none;
}

#footer li:last-child a {border:0;}

/*  ----------------fancyRule---------------------- */ 
div.line hr{ /* take out the troublemaking HR */
display:none; 
}
div.line { /* DIV that wraps and replaces the HR */
background:url(../images/bg-dotts.gif) repeat-x top left;
width:494px;
padding-top:1.4em;
}