/* ===============================================
PROJECT TITLE

--------------------------------------------------
AUTHOR(S): 
	wes@topspotims.com


==================================================
COLOR TABLE
--------------------------------------------------
BACKGROUND      #fff;

=================================================*/

img, div, ul, li { 
	border: 0; 
	margin: 0; 
	padding: 0; 
}

body{
	margin: 0;
	padding: 0;
	font-family: Arial, "Lucida Grande", Verdana, sans-serif;
	font-size: 62.5%;
}

.clearBoth {
	clear: both;
}

.floatright {
	float: right;
}

.floatleft {
	float: left;
}

img.floatleft { margin: 0 10px 10px 0; }
img.floatright { margin: 0 0 10px 10px; }

a {
	color: #353535;
	text-decoration: underline;
}
a:hover {
	color: #f9981e;
	text-decoration: none;
}
a:focus { 
	border: none; 
	outline: none; 
}
h1 {
	font-size: 1.8em;
	color: #f09624;
	text-transform: uppercase;
}
h2 {
	font-size: 1.6em;
	margin-bottom: 0;
}
ul h2 {
	font-size: 1.4em;
}
h3 {
	font-size: 1.4em;
	margin-bottom: 0;
}

form {
	padding: 0 0 20px 0;
}
label {
	font-size: 1.2em;
	color: #fff;
	margin: 0 0 2px;
	display: block;
}
#content p, #content ul {
	font-size: 1.2em;
	line-height: 1.5;
	color: #454545;
}

#metaButtonWrapper { 
	position: absolute;
	right: 0;
	top: 0;
}

/* WRAPPER   ---------------------------------------*/
#outer {
	background: #000 url(../images/bg.jpg) repeat-x left top;
}
#wrapper {
	width: 1020px;
	margin: 0 auto;
	padding: 0;
	background: transparent url(../images/bg-white.png) repeat-y left top;
	background-position: left 50px;
}

/* HEADER   ---------------------------------------*/
#header {
	height: 244px;
	background: transparent url(../images/banner.jpg) no-repeat left top;
	position: relative;
}
#logo {
	display: block;
	width: 223px;
	height: 205px;
	text-indent: -9999px;
	position: absolute;
	top: 40px;
	left: 18px;
	z-index: 2;
}
#phoneNumber {
	position: absolute;
	top: 9px;
	right: 60px;
	color: #fff;
	font-size: 1.8em;
	margin: 0;
	display: block;
	height: 19px;
	padding-left: 30px;
	background: transparent url(../images/phone.gif) no-repeat left 0px;
}
#tagline {
	color: #fff;
	font-size: 1.2em;
	line-height: 1.5;
	margin: 0 0 0 40px;
	width: 200px;
	position: absolute;
	top: 190px;
}
#tagline-2 { 
	font-size: 1.75em; 
	color: #fff; 
	float: right; 
	margin-top: 180px; 
	margin-right: 50px; 
	width: 200px; 
}

/* PRIMARY NAV   ---------------------------------------*/
div#navWrapper {
	background: transparent url(../images/nav.jpg) repeat-x left top;
	margin: 2px 20px 0 20px;
	height: 46px;
}
ul#primaryNav {
	margin: 0;
	padding: 0;
	list-style: none;
	background: transparent url(../images/nav.jpg) repeat-x left top;
	height: 46px;
	width: 900px;
	float: left;
}
#primaryNav ul {
	position: absolute;
	display: none; 
	/*left: -9999px;*/
	overflow: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}
#primaryNav ul li {
	float: left;
}
#primaryNav ul li.first {
	background: none;
	width: auto;
}
#primaryNav ul li.first a {
	padding-left: 0;
	text-indent: 0;
/*	background: transparent url(../images/nav-separater.gif) no-repeat right center;*/
}
#primaryNav ul a {
	font-size: 1.2em;
	padding: 3px 15px;
	color: #666;
/*	background: transparent url(../images/nav-separater.gif) no-repeat right center; */
	outline: none;
	overflow: hidden;
	text-transform: none;
}
#primaryNav ul li.last a {
	background: none;
}
#primaryNav li {
	float: left;
	position: relative;
	background-position: 0 0;
}
#primaryNav li:hover ul, #primaryNav li.sfhover ul {
	left: 0;
}
#primaryNav li.first {
/*	background: transparent url(../images/nav-left.jpg) no-repeat left top; */
}
#primaryNav li.first a {
	text-indent: -9999px;
	background: none;
}
#primaryNav a {
	display: block;
	font-size: 1.4em;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	padding: 15px 30px 15px 30px;
	background: transparent url(../images/separater.jpg) no-repeat right top;
	text-decoration: none;
}
#primaryNav a:hover {
	color: #f9981e;
	text-decoration: none;
}
#primaryNav li ul li, #primaryNav li ul li.first {  
	clear: both; 
	border-bottom: 1px solid #c0c0c0; 
}
#primaryNav li ul li.first { 
	border-left: 1px solid #c0c0c0; 
}
#primaryNav li ul li.last { 
	border-right: 1px solid #c0c0c0; 
}
#primaryNav li ul li a, #primaryNav li ul li.first a { 
	font-weight: normal;
	width: 13em; 
	padding: 6px 10px; 
	color: #e8e8e8; 
	background: #202020; 
	border-right: 1px solid #c0c0c0; 
}
#primaryNav li ul li.first a:hover { 
	color: #f9981e; 
}

/* SEARCH   ---------------------------------------*/
#navWrapper form {
	width: 320px;
	float: left;
	padding: 0;
	margin: 10px 0 0;
}
#navWrapper form fieldset {
	padding: 0;
	margin: 0;
	border: 0;
}
#navWrapper form label {
	display: inline;
}	
#navWrapper form #ajaxSearch_input {
	width: 230px;
}
	
/* CONTENT   ---------------------------------------*/
#contentWrapper {
	margin: 3px 20px 0 20px;
	background: #f5f5f5 url(../images/bg-content.jpg) repeat-x left top;
	padding: 10px 10px 0;
	overflow: auto;
}
#content {
	width: 662px;
	float: left;
	background: #f8f8f8 url(../images/content.jpg) no-repeat left top;
	padding: 15px 10px;
	margin-right: 8px;
}
a#cuttingFiber {
	display: block;
	width: 229px;
	height: 268px;
	text-indent: -9999px;
	background: transparent url(../images/cutting-fiber.jpg) no-repeat left top;
	float: right;
}
hr { 
	clear: both; 
	border: 1px solid #d0d0d0; 
	width: 400px; 
	text-align: center; 
	margin: 3em auto; 
}
iframe { 
	margin-right: 2em; 
}

/* TABS   ---------------------------------------*/
#tabs ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}
#tabs ul li {
	float: left;
}
.ui-tabs-hide {
	position: absolute;
	left: -9999px;
}
#tabs ul a {
	display: block;
	background: transparent url(../images/tabs-left.jpg) no-repeat left top;
	color: #999;
	text-decoration: none;
	margin-right: 1px;
}
#tabs ul a span {
	display: block;
	height: 20px;
	padding: 5px 10px;
	background: transparent url(../images/tabs-right.jpg) no-repeat right top;
	cursor: pointer;
}
#tabs li.ui-tabs-selected a {
	background-image: url(../images/tabs-left-selected.jpg);
	color: #fff;
}
#tabs li.ui-tabs-selected span {
	background-image: url(../images/tabs-right-selected.jpg);
}
#tabs div {
	background: #f0f0f0 url(../images/tab-box.jpg) repeat-x left top;
	border-top: 3px solid #ec8405;
	padding: 10px;
}

/* BUCKETS       -----------------------------------*/

div.buckets { 
	float: left; 
	border: 1px solid #c0c0c0; 
	padding: 2px; 
	background: #ffffff; 
	margin: 0 10px 2em 4px; 
	width: 145px; 
}
div.buckets.last { 
	margin-right: 0; 
}
div.buckets h2 { 
	background: URL(../images/nav.jpg) repeat-x bottom #808080; 
	color: #ffffff; 
	padding: 3px; 
	margin: 2px 0 0 0; 
	font-size: 1.15em; 
	text-align: center; 
}
	div.buckets h2 a { 
		color: #ffffff; 
	}
div.buckets p { 
	margin: 5px; 
}
div.buckets a { 
	text-decoration: none; 
}
div.buckets a.more { 
	color: #ff8000; 
	float: right; 
	font-weight: bold; 
}
	div.buckets a:hover { 
		text-decoration: underline; 
	}

/* PRODUCT LANDING PAGE ----------------------------*/
ul.products { 
	list-style: none; 
	float: left; 
	width: 315px; 
	margin: 0; 
	padding: 0; 
}
#specialty-items ul.products, #specialty-items ul.products li { 
	width: 600px; 
}
ul.products.first { 
	margin-right: 30px; 
}
ul.products img { 
	float: left; 
	padding: 3px; 
	border: 1px solid #d8d8d8; 
	margin-right: 10px; 
	margin-bottom: 10px; 
}
ul.products li { 
	clear: both; 
	float: left; 
	width: 315px; 
	padding-bottom: 0.5em; 
}
#products ul.products li p, #specialty-items ul.products li p { 
	font-size: 1em;  
}
#products ul.products a, #specialty-items ul.products a { 
	text-decoration: none; 
}

/* PRODUCT PAGES -----------------------------------*/
ul.productList { 
	list-style: none; 
	margin-left: 0; 
	padding-left: 0; 
}
	#content ul.productList li { 
		width: 95%;
		clear: both;  
		height: auto; 
		overflow: auto; 
		float: left; 
		margin-left: 0; 
		padding-left: 0; 
		margin-bottom: 1.5em; 
	}
	#content ul.productList li img { 
		float: left; 
		margin-top: 0.4em; 
	}
	#content ul.productList li p { 
		width: 500px; 
		font-size: 1em; 
		line-height: 1.3em; 
		margin-top: 0; 
		padding-top: 0; 
		float: right; 
	}
	#content ul.productList li h2 { 
		margin-top: 0; 
		padding-top: 0; 
		font-size: 1.25em; 
		width: 500px; 
		float: right; 
	}
	#content ul.productList ul { 
		width: 500px; 
		float: right; 
		font-size: 1em; 
	}
	#content ul.productList ul h3 { 
		font-size: 1.15em; 
	}
	#content ul.productList ul li { 
		margin: 0.25em 0; 
		padding: 0 0 0 12px; 
		background: URL(/images/list-bg.gif) top left no-repeat transparent; 
		line-height: 1.2; 
	}
	.productIndent { 
		float: right; 
		width: 500px; 
	}
	div.list ul li { 
		margin: 0; 
		padding: 0; 
		line-height: 1.2em; 
	}
	div.list ul { 
		margin: 0 0 1.5em 1.5em; 
		padding: 0; 
		list-style: circle; 
	}
	#content ol, #surfox #content p ol, #spatter-block #content ol p { 
		font-size: 12px;
		color: #404040; 
	}
	div.list { 
		float: left; 
		width: 47%; 
		padding-left: 4%; 
		font-size: 1em; 
	}
	#content div.list p { 
		line-height: 1em;
	}
	div.list.first { 
		padding-left: 0; 
	}
	#content div.list h2 { 
		font-size: 1.35em; 
		color: #404040; 
	}
	#sitemap #content ul { 
		font-size: 12px; 
		margin-left: 2em; 
	}
	#quote { 
		width: 325px; 
	}
	#quote fieldset { 
		border: none; 
	}
	#quote label { 
		color: #404040; 
		margin-top: 0.5em; 
	}
	#quote textarea { 
		width: 300px; 
		height: 125px; 
	}
	#quote p { 
		width: 300px; 
	}
	span.required { 
		color: #ff0000; 
	}

/* SIDEBAR   ---------------------------------------*/
div#sidebar {
	width: 270px;
	float: left;
}
#rfq {
	display: block;
	width: 251px;
	height: 59px;
	text-indent: -9999px;
	background: transparent url(../images/rfq.jpg) no-repeat left top;
	margin: 0 0 10px 5px;
	cursor: pointer; 
}
#contact {
	width: 267px;
	height: 97px;
	background: transparent url(../images/bg-map.gif) no-repeat left top;
	position: relative;
	margin: 10px 0;
}
#contact p {
	font-size: 1.2em;
	line-height: 1.5;
	margin: 0;
	color: #454545;
	position: absolute;
	left: 15px;
	top: 10px;
}
#contact h2 {
	display: none;
}
#contact #map {
	display: block;
	width: 74px;
	height: 71px;
	background: transparent url(../images/map.jpg) no-repeat left top;
	text-indent: -9999px;
	position: absolute;
	top: 11px;
	right: 11px;
}
#index h1 {
	/*float: left;
	margin-right: 150px;*/
}
a.button-surfox, a.button-biocircle { 
	display: block; 
	width: 254px; 
	height: 80px; 
	text-indent: -9999px; 
	margin: 2px 0; 
}
a.button-surfox { 
	background: URL(../images/button-surfox.gif) top left no-repeat transparent; 
}
a.button-biocircle { 
	background: URL(../images/button-biocircle.gif) top left no-repeat transparent; 
}
#sidebar h3 { 
	color: #404040; 
	margin-left: 0.5em; 
	font-size: 1.5em; 
}

/* QUICKFORM   ---------------------------------------*/
div#quickformWrapper {
	background: transparent url(../images/quickform-top.jpg) no-repeat left top;
	padding: 16px 0 0;
}
#quickformWrapper h2 {
	margin: 0;
	text-align: center;
	color: #fff;
}
#quickformWrapper form {
	margin: 14px 0 0;
	padding: 20px 20px 20px;
	background: transparent url(../images/quickform-middle.jpg) no-repeat left bottom;
}
#quickformWrapper form input {
	margin-bottom: 07px;
}
#quickformWrapper form ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
#quickformWrapper form li {
	clear: left;
	
}
#quickformWrapper #nameBox {
	width: 100px;
	margin-right: 6px;
}
#quickformWrapper #nameBox input {
	width: 95px;
}
#quickformWrapper #phoneBox {
	width: 75px;
	clear: none;
}
#quickformWrapper #phoneBox input {
	width: 100px;
}
#quickformWrapper #nameBox, #quickformWrapper #phoneBox {
	float: left;
}
#quickformWrapper form input, #quickformWrapper form textarea {
	width: 206px;
}
#quickformWrapper form #submitButton {
	width: 75px;
}
#quickformWrapper form textarea {
	margin-bottom: 7px;
}


#form-error ul { 
	margin-left: 2em; 
}

/* FOOTER   ---------------------------------------*/
#footerWrapper {
	width: 1020px;
	height: 109px;
	margin: 0 auto;
	background: transparent url(../images/bg-white-bottom.png) no-repeat left top;
}
#footer {
	clear: left;
	background: transparent url(../images/footer.jpg) repeat-x left bottom;
	height: 37px;
	padding: 30px 20px 0;
	margin: 0 20px;
}
#footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: right;
}
#footer ul li {
	float: left;
}
#footer li.last a {
	background: none;
	padding-right: 0;
}
#footer ul a {
	color: #d27a06;
	text-decoration: none;
	padding: 0 7px;
	background: transparent url(../images/footer-separater.gif) no-repeat right center;
}
#footer ul a:hover {
	text-decoration: underline;
}
#footer p {
	color: #858585;
	float: left;
	margin: 0;
}

/* TOPSPOT LINK   ---------------------------------------*/
#tsLink {
	height: 31px;
	width: 1020px;
	margin: 0 auto;
	background: transparent url(../images/bg-white-bottom.png) no-repeat left bottom;
}