body{
	margin: 0; 
	font-family: Arial, Helvetica; color: #6D6F71; font-size: 0.8em;
}
a img{
	border: 0;
}


/* 	
-----------------------------------------------
Layout
-----------------------------------------------
*/

#wrapper{
	width: 980px; border-left: 20px solid #C4151C; background: url(../_images/shadow.jpg) repeat-y top right; border-bottom: 1px solid #ccc;
}
#innerwrapper{
	background: url(../_images/shadow.jpg) repeat-y top left;
}
#header, #title, #content, #news, #subfooter, #footer{
	clear: both; padding-left: 40px; width: 900px; margin-bottom: 10px; padding-top: 20px; overflow: hidden;
}
#content{
	padding-top: 0;
}
#footer{
	background: #DCDCED url(../_images/shadow-on-blue.jpg) repeat-y; width: 926px; margin-bottom: 0; padding-bottom: 20px;
}

.column{
	float: left; margin-right: 20px;
}
.span1-5{
	width: 160px;
}
.span2-5{
	width: 340px;
}
.span3-5{
	width: 520px;
}
.span4-5{
	width: 680px;
}
.span5-5{
	width: 880px;
}
.span1-3{
	width: 280px;
}
.span2-3{
	width: 580px;
}
.span3-3{
	width: 780px;
}

#content .banner{
	margin: 5px; border: 1px solid #B0AFAF; text-align: center; width: 870px;
}

#content .category{
	margin-bottom: 10px; padding: 4px; width: 152px;
}
#content .category:hover{
	background-color: #C4151C; cursor: pointer; 
}
#content .category img{
	border: 1px solid #B0AFAF; background-color: #fff; display: block; margin-bottom: 4px;
}
#content .category .label{
	text-align: center; text-transform: uppercase; font-size: 0.9em; height: 28px;
	border: 1px solid #B0AFAF; background: url(../_images/grad-blue.jpg); padding: 5px 1px;	
}
#content .category .label a, #content .category .label a:hover{
	color: #fff; text-decoration: none;
}
#news .span2-5{
	margin-top: -20px; text-align: right
}
#subfooter .span3-5{
	margin-top: 20px;
}
#subfooter .span2-5{
	text-align: right;
}
#footer .span5-5{
	margin: 20px 0;
}

/* 	
-----------------------------------------------
Typography
-----------------------------------------------
*/

h1{
	margin: 0; padding: 0; text-transform: capitalize;
}
h2{
	color: #C4151C; margin: 0; padding: 0;
}
h3{
	color: #000; margin: 0; padding: 5px 0 0 0; font-size: 1.2em;
}
p{
	line-height: 1.4em; padding: 5px 0 10px 0; margin: 0;
}
a{
	color: #C4151C; text-decoration: none;
}
a:hover{
	color: #000; text-decoration: underline;
}

.home h1{
	color: #C4151C; 
}
#content h2{
	color: #000; margin-bottom: 20px;
}
#subfooter h2{
	color: #000;
}
#footer a, #footer h3{
	color: #68696E; font-size: 1em;	
}
.back a{
    background-color: #e5e5e5; padding: 5px; overflow: hidden; margin: 20px 0 40px 0; display: block;
}
.back a:hover{
    background-color: #C4151C; text-decoration: none; color: #fff;
}


/* 	
-----------------------------------------------
Product
-----------------------------------------------
*/
.product{
	overflow: hidden
}
.product .right img{
	cursor: url(../_images/magnify.cur), pointer;
}
.product h2 img{
    vertical-align: middle; float: right; margin-right: 50px;
}
.product .left{
	width: 380px; margin-left: 0; float: left; 
}
.product .right{
	float: right; 
}
.product .nav{
	width: 100%; margin: 0 0 10px 0; clear: both; overflow: hidden
}
.product .materials li{
	width: 190px; text-align: center; font-size: 0.8em;
}
.product .materials li span{
    text-transform: uppercase; display: block; padding: 5px; border: 1px solid #333; margin: 3px;
}
.product h4{
    margin: 20px 0 10px 0; padding: 0; color: #333;
}
hr{
    color: #ccc; background-color: #ccc; height: 3px; margin: 20px 0;
}
#detail{
    position: absolute; border: 1px solid #ccc; padding: 5px; background-color: #f5f5f5; display: none;
}


/* 	
-----------------------------------------------
Fixed header scrollable parts table
-----------------------------------------------
*/
.scrollable{
    height: 178px; width: 370px; overflow: auto; margin: 15px 0 0 0; position: relative; border: 1px solid #ccc;
}
.scrollable table {
    width: 352px; border: 0px; margin: 0;
}
html>/**/body .scrollable table {
    width: 370px;
}
html>/**/body .scrollable table>tbody {
    overflow: auto; height: 150px; overflow-x: hidden;
}
.scrollable thead tr {
    position:relative; top: expression(offsetParent.scrollTop); /*IE5+ only*/ left: 0px;
}
.scrollable td, .scrollable th{
    display: block; float: left; width: 166px;
}
.scrollable td:last-child {
    padding-right: 20px;
}

/* 	
-----------------------------------------------
Range
-----------------------------------------------
*/
.range{
	width: 100%; overflow: hidden;
}
.range p, .range h3{
	color: #fff;
}
.range .top, .range .bottom{
	border: 1px solid #999; overflow: hidden; margin-top: 5px; padding: 5px;
}
.range .top{
	height: auto !important; height: 110px;
}
.range .top img{
	float: left; margin-right: 20px; margin-bottom: 20px;
}
.range .bottom p{
	text-align: center; padding: 0; font-size: 0.9em; margin: 0 200px;
}

.star-3 div{
	background-color: #FFDD00; 
}
.star-3 p, .star-3 h3{
	color: #000
}
.star-4 div{
	background-color: #5E6E66; 
}
.star-5 div{
	background-color: #21358B; 
}
.star-6 div{
	background-color: #F6891F; 
}

/* 	
-----------------------------------------------
Forms
-----------------------------------------------
*/

input, select, textarea{
    font-size: 1em; font-family: Arial, Helvetica;
}
label{
    width: 100px; margin: 5px 0; float: left;
}
fieldset{
    border: 1px solid #ccc; margin: 5px 0;
}
legend{
    font-weight: bold;
}
input, textarea{
    width: 450px; margin: 5px; float: left; border: 1px solid #333; background-color: #fff;
}
select{
    margin: 5px; float: left; width: 450px; background-color: #fff;
} 
input.button{
    width: auto; padding: 2px 10px; background-color: #7F80B8; color: #fff; cursor: pointer;
}
input.button:hover{
    background-color: #C4151C;
}
.error{
    border-color: #C4151C; background-color: #F9E7E8;
}

/* 	
-----------------------------------------------
Tables
-----------------------------------------------
*/
table{
	width: 370px; border-collapse: collapse; border: 1px solid #ccc; margin: 10px 0; background-color: #fff;
}
td, th{
	text-align: left; padding: 5px; background-color: #fff; font-size: 0.9em;
}
td{
	border-top: 1px solid #333;
}

/* 	
-----------------------------------------------
Navigation bars
-----------------------------------------------
*/

.nav{
	list-style: none; margin: 0; padding: 0;
}
.nav li{
	padding: 0; margin: 5px 0;
}

#header .nav{
	float: right; margin-top: 80px;
}
#header .nav li{
	float: left; margin-left: 20px;
}
#header .nav li a{
	color: #000; text-decoration: none; font-size: 1.3em; font-weight: bold;
}
#header .nav li a:hover{
	color: #C4151C; 
}
#header .nav li.on a, #header .nav li.on a:hover{
	color: #7F80B8; cursor: default;
}
#footer .nav li.on a, #footer .nav li.on a:hover{
    color: #000; cursor: default; text-decoration: none; font-weight: bold;
}

#categories li{
	margin: 0; width: 280px; overflow: hidden; font-size: 0.9em;
}
#categories li a{
	text-transform: uppercase; display: block; padding: 5px; border: 1px solid #B0AFAF; margin: 3px;
	background: url(../_images/grad-blue.jpg); color: #fff;
}
#categories li a:hover{
	border: 4px solid #000; margin: 0; text-decoration: none;
}
#categories li.on a, #categories li.on a:hover{
	border: 4px solid #C4151C; margin: 0; cursor: default; background-position: bottom
}

.materials li{
	width: 290px; float: left; margin: 0;
}
.materials li a{
	text-transform: uppercase; display: block; padding: 5px; border: 1px solid #333; margin: 3px;
}
.materials li a:hover{
	background: url(../_images/grad-beige.jpg) repeat-y; border: 4px solid #C4151C; margin: 0;
	color: #000; text-decoration: none;
}

li.asphalt a, li.asphalt span{
	background: #231F20; color: #fff;
}
li.building a, li.building span{
	background: #C4151C; color: #fff;
}
li.concrete a, li.concrete span{
	background: #5E6E66; color: #fff;
}
li.marble a, li.stone a, li.marble span, li.stone span{
	background: #006C67; color: #fff;
}
li.steel a, li.steel span{
	background: #EAE2DC; color: #000;
}
li.abrasive a, li.abrasive span{
	background: #D4D10F; color: #fff;
}
li.hard a, li.hard span{
	background: #79BDE8; color: #fff;
}
li.mortar a, li.mortar span{
	background: #E0C398; color: #000;
}
li.ceramic-tiles a, li.ceramic-tiles span{
	background: url(../_images/grad-ceramic-tiles.jpg); color: #000;
}
li.porcelain-tiles a, li.porcelain-tiles span{
	background: url(../_images/grad-porcelain-tiles.jpg); color: #000;
}
li.multi a, li.multi span{
    background: #7F81B8; color: #fff;
}
li.dual a, li.dual span{
    background: #8CC63F; color: #fff;
}
li.timber a, li.timber span{
    background: #603812; color: #fff;
}

/* 	
-----------------------------------------------
Other graphics
-----------------------------------------------
*/     

a.pdf{
    padding-left: 20px; background: url(../_images/pdf.gif) no-repeat;
}

.photo img{
    padding: 4px; border: 1px solid #ccc; margin-bottom: 5px;
}

.nolist{
    list-style: none; margin: 0; padding: 0;
}
.nolist li{
    list-style: none; margin: 5px 0; padding: 0;
}
.do{
    color: Green; font-weight: bold;
}
.dont{
    color: red; font-weight: bold;
}

#gMap{
    height: 250px; border: 1px solid #ccc; width: 578px;
}