/**************************************************   Eco Trade CSS Styles     */

span, b, li, ul, ol, form, input, p, a, h1, h2, img { margin: 0px; padding:0px;}
img, .border			{ border-style: none;}
p 						{ font: 11px Verdana; color: #999; line-height: 18px;}
a  						{ text-decoration: none; font: bold 11px Verdana; color: #598ca5;}
b						{ font: bold 11px Verdana; color: #666; line-height: 18px;}
h1 						{ font: bold 14px Verdana; color: #598ca5; clear: both;}
h2 						{ font: bold 12px Verdana; color: #8fb500;}
li						{ font: bold 11px Verdana; color: #70abc8; line-height: 22px;}
ul 						{ margin-left: 30px;}
input, textarea			{ padding: 2px; color: #999; font: 11px monospace; border: 1px solid #70abc8;}
#viewing a				{ font: 10px Verdana; color: #b6b6b6;}
p#viewing 				{ font: 10px Verdana; color: #999;}
#viewing a:hover		{ text-decoration: underline;}

/**************************************************   Layout  */

body { 
	background: url(images/bg.gif);
	width: 965px;
	margin: 10px auto;}

#main {	
	width: 965px;
	position: absolute;
	margin-top: 134px;
	float: left;}
	
#content-wrapper {
	background: url(images/wrapper-bg.gif);
	float: left;
	width: 947px;
	padding: 0px 9px 10px;}
	
#leftbar {
	float: left;
	background: url(images/extras-bg.gif);
	width: 130px;
	height: auto;}
	
#content { float: right; width: 813px;}

/**************************************************   Content  */

#viewing		{ margin-bottom: 5px;}
		
.block          { width: 772px; float: left; padding: 5px 20px 20px 20px;}
.blockLeft      { width: 424px; float: left; padding: 5px 20px 20px 20px;}
.blockRight     { width: 306px; float: left; padding: 20px;}
.blockRightCats { width: 346px; float: right; padding-bottom: 10px;}
.block50Left    { width: 371px; float: left; padding: 10px 15px 10px 20px;}
.block50Right   { width: 371px; float: left; padding: 10px 20px 10px 15px;}

/**************************************************   Content  Catagories*/	

.cat 	{ float: left;}
.one	{ width: 346px; height: 28px; background: url(images/Cats/all.gif); margin-bottom: 5px;}

.two, .three, .four, .five, .six, .seven, .eight, .nine, .ten { width: 112px; height: 112px;}
.two, .three, .five, .six, .eight, .nine { margin: 10px 5px 5px 0px;}
.four, .seven, .ten { margin: 10px 0px 5px 0px;}

.two	{ background: url(images/Cats/bags.jpg);}
.three	{ background: url(images/Cats/plants.jpg);}
.four	{ background: url(images/Cats/pens.jpg);}
.five	{ background: url(images/Cats/desktop.jpg);}
.six	{ background: url(images/Cats/paper.jpg);}
.seven	{ background: url(images/Cats/keyrings.jpg);}
.eight	{ background: url(images/Cats/flashdrives.jpg);}
.nine	{ background: url(images/Cats/clothing.jpg);}
.ten	{ background: url(images/Cats/bamboo.jpg);}

/************************************************************* Artwork Pages */

.blockPrint { width: 772px; float: left; padding: 20px; margin-bottom: 10px;}
.blockPrint p, .blockPrint h2 { margin-left: 170px;}

.whiteText { font: 9px Verdana; color: #FFF; padding: 3px 0px 3px 3px;}
.blackText { font: 9px Verdana; color: #000; padding: 3px 0px 3px 3px;}

.printImg 		{ float: left;}
.file_type 		{ float: right; width: 550px;}	
.artImage 		{ width: 111px; height: 191px; float: left; margin-right: 5px;}

.print 		{ background: url(images/artwork_dept/print.jpg);}
.file 		{ background: url(images/artwork_dept/file.jpg);}
.fonts 		{ background: url(images/artwork_dept/fonts.jpg);}
.pantone 	{ background: url(images/artwork_dept/pantone.jpg);}

/************************************************************* Metal Page */

.recyc-metal	{ width: 780px; float: left; padding-bottom: 20px;}

.blockPrint { width: 772px; float: left; padding: 10px 20px 10px 20px; margin-bottom: 10px;}
.blockPrint p, .blockPrint h2 { margin-left: 170px;}

.metalImage 		{ width: 145px; height: 145px; float: left; margin-right: 5px;}

.bottle 		{ background: url(images/recycled_metal/bottle.jpg);}
.trolley 		{ background: url(images/recycled_metal/trolley.jpg);}
.keyring		{ background: url(images/recycled_metal/keyring.jpg);}

/************************************************************* Products Page */

.prodColumns { width: 20%;  float: left;}	
.prodColumns a { font: 11px Verdana; width: 100%; margin: 3px 0px; float: left;}
.prodColumns a:hover { text-decoration: underline;}

/************************************************************* Skinsite Page */

#skinSites { margin-left: 20px;  float: right;}	

/******************************************************************* Search Results ****************************************************/
	
.resultsItem {
	width: 21%; 
	float: left; 
	margin: 5px 0px 5px 3%; 
	height: 160px;
	text-align: center;}
	
.resultsInfo {
	width: 98%; 
	text-align: center; 
	padding: 5% 0%; 
	margin-bottom: 5px; 
	border: 1px dotted #999;}
	
.showing {
	width: 100%;
	text-align: center;
	margin-bottom: 10px;}

.info { float: left;}

/********************************************************************************************** ITEM PAGE */

#itemImage { float: left; clear: both; margin: 0px 0px 10px 40px;}
.itemThumb { margin: 3px; float: left;}
#downloadbtn { position: relative; top: -2px;}

.altProducts {
	width: 42%;
	margin: 1%;
	padding: 1%;
	float: left;
	border: 1px dotted #CCC;
	text-align: center;
	height: 150px;}

/*********************************************************************************************** CONTACT */

#contactBox 		{ width: 65%; float: left; padding: 2%; border: 1px dotted #CCC;}
#contactBox div		{ float: left; width: 42%; padding: 15px 4%;}	
#contactBox input 	{ margin: 0px 5px 10px 0px;}

#submit { float: right; margin-left: 180px; border: 0px;}

#address { float: right; width: 25%; padding-right: 1%;}

.popCalendar {
	visibility: visible;
	z-index: 999;
	position: absolute;
	left: -500px;
	top: 0px;
	width: 174px;
	height: 189px;
	border-style: none;}

/**************************************************   Maskhead  */
	
#maskhead {
	background: url(images/maskhead-bg.gif);
	height: 134px;
	width: 965px;
	position: absolute;
	margin-top: 0px;
	float: left;}
	
#maskheadRight 			{ width: 355px; float: right;}	
#maskheadRight a 		{ color: #FFF; font: bold 14px Verdana;}
#maskheadRight a:hover 	{ color: #ffea01;}	
	
#maskheadContact {
	width: 235px;
	float: right;
	height: 66px;
	text-align: right;
	padding: 15px 20px 0px 0px;}
		
/**************************************************   Search  */
	
#search {
	float: left;
	width: 253px;
	height: 29px;
	padding: 12px 0px 0px 14px;}
		
#search input { 
	background: #FFF url(images/input-bg.gif) repeat-x; 
	margin-right: 18px; 
	border: 1px solid #88ab03;}
		
/************************************************************* Quick Quote ****************************************************/
	
#QQ            	{ width: 316px; height: 177px; background: url(images/QQ-bg.gif) no-repeat; float: left; padding: 40px 10px 10px 20px; margin-bottom: 20px;}	
#QQ p		    { color: #FFF;}
#QQleft			{ float: left; width: 150px;}
#QQright		{ float: right; width: 150px;}			 
#QQsubmit 		{ margin-left: 80px; border-style: none;}
#QQ input 		{ margin-bottom: 3px;}

/************************************************************* Reqister for Skinsite ****************************************************/
	
#RS { 
	width: 213px; 
	height: 146px; 
	background: url(images/RS-bg.gif) no-repeat; 
	float: left; 
	padding: 45px 20px 10px 20px; 
	margin: 10px 0px 0px 0px; 
	text-align: right;}	
	
#RS p		{ color: #FFF; margin-bottom: 8px;}		 
#RS input 	{ }

/******************************************************************* Price Matrix Styles ****************************************************/

.price_matrix 	    { width: 100%; float:left; margin: 12px 0px;}
.matrix_box         { float: left; width: 70px; margin: 1px;}
.matrix_quantity	{ text-align: center; background: #F2F3F4; width: 64px; margin-bottom: 1px; padding: 3px;}
.matrix_price 		{ text-align: center; background: #F2F3F4; width: 64px; padding: 3px;}
.matrix_header 		{ width: 100%; float: left; padding: 3px;}

/**************************************************   Login  */
		
#login {
	float: right;
	width: 79px;
	height: 30px;
	padding: 18px 9px 0px 0px;
	text-align: center;}
	
#loginBox {
	width: 216px; 
	height: 97px; 
	background: url(images/login-bg.gif) no-repeat; 
	padding: 26px 10px 10px; 
	margin: 20px 0px 20px 30px;}
	
#loginBox input { margin: 0px 0px 6px 0px;}
	
#reminderBox {
	width: 216px; 
	height: 26px; 
	background: url(images/reminder-bg.gif) no-repeat; 
	padding: 37px 10px 10px; 
	text-align: right;
	margin: 20px 0px 20px 30px;}	

#reminderBox a, #loginBox a { color: #70abc8; font: bold 16px Verdana; margin-left:10px;}
	
/**************************************************   Nav  */

#nav-wrapper {
	background: url(images/nav-wrapper-bg.gif);
	width: 124px;
	float: right;}
		
#nav {
	background: url(images/nav-bg.jpg) no-repeat;
	width: 124px;
	float: right;
	text-align: right;}
	
#nav a {
	width: 114px;
	display: block;
	color: #cef;
	font: bold 11px Verdana;
	background: url(images/nav-border.gif) no-repeat;
	padding: 5px 10px 5px 0px;}
	
#nav a:hover,
.sectionIndex #index,
.sectionAbout #about,
.sectionProducts #products,
.sectionDownloads #downloads,
.sectionArtwork #artwork,
.sectionSkin #skin,
.sectionContact #contact,
.sectionTerms #terms,
.sectionUsers #users,
.sectionAccount #account { color: #FFF; text-decoration: none;}
	
a#index { background: none;}
	
#nav-foot {
	width: 124px;
	height: 19px;
	float: right;}
		
/**************************************************   Extras  */
	
#extras { float: left;}
	
#extras-foot {
	width: 130px;
	height: 9px;
	float: left;}
			
/**************************************************   Footer  */
	
#foot {
	background: url(images/foot-bg.gif);
	height: 43px;
	width: 945px;
	clear: both;
	float: left;
	padding: 14px 0px 0px 20px;}
	
#foot p, #foot a, #smlPrint p { color: #FFF;}
#foot a:hover { text-decoration: underline; color: #FFF;}
#foot span { color: #ffea01; margin-left: 20px;}

#smlPrint { text-align: center;}
	
/**************************************************   Images  */
	
#logo           { margin: 4px 0px 0px 12px; float: left;}
#carbon_btn 	{ margin: 5px 0px 0px 0px;}
#carbonLogo		{ float: left; clear: left; margin: 20px 0px 0px 0px;}
#SMBanner 		{ margin: 20px 0px 0px 60px; border-style: none;}