/* ------------------------------------------------------------

	Title: 		TRAF-tech
	Author: 	neal at abramarketing dot com

------------------------------------------------------------ */

body {
	font: small "Lucida Grande", Arial, sans-serif;
	background: url(../images/bg_body.jpg) top left;
	color: #FFF;
	}

body, h1, h2, h3, h4, h5, h6, p, ul, li, dl, dt, dd, input, form, fieldset, label {padding: 0;margin: 0}

p {margin: 0 0 1.5em 0;line-height: 1.2em}

ul, li, dl, dt, dd {list-style: none}

a:link, a:visited {color: #FFF; text-decoration: none;}
a:hover {color: #FFF;}
img {border: none;}
/* ------------------------------------------------------------

	Header Levels

------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	font-family: Verdana, "Lucida Grande", Arial, sans-serif;
	}
	
/* ------------------------------------------------------------

	Page Structure

------------------------------------------------------------ */
#topTile {
	background: url(../images/bg_wide_top_body.jpg) top left repeat-x;
	width: 100%;
}

#container {
	width: 871px;
	margin: 0 auto;
	overflow: hidden;
	_height: 1%;
	}
	
/* ------------------------------------------------------------

	 Logo

------------------------------------------------------------ */
h1 a {
	background: url(../images/logo.jpg) top left no-repeat;
	width: 312px;
	height: 107px;
	margin: 0;
	padding: 0;
	display: block;
	text-indent: -9999px;
	float: left;
}

/* ------------------------------------------------------------

	 Navigation

------------------------------------------------------------ */
#nav {
	padding: 75px 0 80px 20px;
}

#nav ul {
	overflow: hidden;
	_height: 1%;
}

#nav li {
	float: left;
}

#nav li a {
	color: #000;
	padding: 16px 13px;
	background: url(../images/nav_split.jpg) top right no-repeat;
	text-decoration: none;
	font-weight: bold;
}

#nav li a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------

	 Image Callout

------------------------------------------------------------ */
#homeCallout,
#aboutCallout {
	text-indent: -9999px;	
	width: 863px;
	border: 3px solid #FFF;
	clear: both;
	margin: 0 0 32px 3px;
}
	
#homeCallout {
	background: url(../images/home_callout.jpg) top left no-repeat;
	height: 296px;
}

#aboutCallout {
	background: url(../images/about_callout.jpg) top left no-repeat;
	height: 123px;
}

/* ------------------------------------------------------------

	 Left Column

------------------------------------------------------------ */
#leftColOuter {
	background: url(../images/left_Col_tile.jpg) top left repeat-y;
	width: 583px;
	float: left;
}

#leftCol {
	background: url(../images/left_Col_bg_top.jpg) top left no-repeat;
	padding: 10px 10px 3px 10px;
	border: 3px solid #000;
}

#leftCol a {
	color: #E7F41C;
}

#leftCol a:hover {
	text-decoration: underline;
}

#secondaryPage #leftCol {
	padding: 20px;
}

#leftCol h3 {
	text-align: center;
	font-size: 180%;
	margin: 4px 0 15px 0;
	border-bottom: 1px solid #434343;
	padding: 0 0 4px 0;
}

#secondaryPage #leftCol h3 {
	text-align: left;
}

#leftCol h4 {
	font-size: 140%;
	margin: 0 0 8px 0;
	padding: 15px 0 0 0;
	color: #CD1E23;
}

#leftCol h4 {
	font-size: 140%;
	margin: 0 0 8px 0;
	padding: 15px 0 0 0;
	color: #CD1E23;
}

#leftCol h5 {
	font-size: 120%;
	margin: 0 0 8px 0;
	padding: 15px 0 4px 0;
	border-bottom: 1px dotted #434343;
}

#leftCol ul {
	margin: 0 0 0 15px;
}

#leftCol ul li {
	list-style: square;
	padding: 5px 0;
}

#leftCol .productCallout {
	background: #EB2229 url(../images/bg_product_callout.jpg) bottom left repeat-x;
	padding: 14px;
	margin: 0 0 10px 0;
	overflow: hidden;
	_height: 1%;
}

#leftCol .productCallout img {
	float: left;
	border: 3px solid #1B1B1B;
	margin: 0 0 15px 0;
}

#leftCol .productCalloutText {
	width: 235px;
	float: left;
	margin: 0 0 0 10px;
}

#secondaryPage #leftCol .productCalloutText {
	width: 225px;
	float: left;
	margin: 0 0 0 10px;
}

#leftCol .productCalloutText h5 {
	font-size: 120%;
	margin: 0 0 6px 0;
	padding: 0 0 3px 0;
}

#leftCol .productCalloutText p {
	font-size: 90%;
}

#leftCol .productCallout .learnMore a {
	background: url(../images/learn_more_arrow.jpg) center left no-repeat;
	padding: 6px 0 5px 20px;
	color: #000;
	font-weight: bold;
	font-size: 95%;
}

#leftCol .productCallout .learnMore a:hover {
	text-decoration: underline;
}

#leftCol #photoBox {
	margin: 0 0 10px 0;
}

#leftCol #photoBox img {
	border: 2px solid #393939;	
}

#leftCol #vidBoxOuter {
	overflow: hidden;
	_height: 1%;
}

#leftCol .vidBox {
	margin: 0 10px 20px 0;
	text-align: center;
	overflow: hidden;
	_height: 1%;
	float: left;
	font-size: 95%;
	width: 165px;
}

#leftCol .vidBox img {
	margin: 0 0 8px 0;
	width: 146px;
	height: 122px;
	padding: 2px;
	background: #FFF;	
}

/* ------------------------------------------------------------

	 Right Column

------------------------------------------------------------ */
#rightColOuter {
	width: 269px;
	float: right;
}

.contactTraf {
	margin: 0 0 15px 0;
}

#coneWasher {
	background: url(../images/rightCol_bg_cone_wash.jpg) top left no-repeat;
	color: #000;
}

#coneWasher p, #coneWasher h4 {
	width: 181px;
}

#coneWasher h4 {
	padding: 18px 0 0 16px;
	font-size: 120%;
	margin: 0 0 15px 0;
}

#coneWasher p {
	font-size: 95%;
	padding: 0 0 10px 16px;
}

#coneWasher .dirtyCones {
	padding: 0 0 30px 16px;
}

#coneWasher .dirtyCones a {
	padding: 6px 0 5px 25px;
	color: #000;
	font-weight: bold;
	font-size: 105%;
	background: url(../images/btn_dirty_cones.jpg) center left no-repeat;
	margin: 0 0 15px 0;
}

/* ------------------------------------------------------------

	 Footer

------------------------------------------------------------ */
#footerOuter {
	background: #1B2122 url(../images/bg_footer.jpg) top left repeat-x;
	width: 100%;
	margin: 32px 0 0 0;
	padding: 0;
	clear: both;
}

#footer {
	width: 871px;
	padding: 10px;
	margin: 0 auto;
	overflow: hidden;
	_height: 1%;
	font-size: 95%;
}

#footer img {
	float: left;
}

#footer ul {
	float: left;
	margin: 10px 50px 10px 25px;
}

#footer ul li {
	float: left;
	padding: 0 20px 0 0;
}

#footer p {
	float: left;
	margin: 0 0 0 25px;
}

#footer a:hover {
	text-decoration: underline;
}


/* ------------------------------------------------------------

	 Form Fields

------------------------------------------------------------ */
label, input, select, textarea {
	border: 1px solid #999;
	padding: 2px;
	}
	
#contacttable td {
	padding: 6px 0;
}
/* ------------------------------------------------------------

	Misc

------------------------------------------------------------ */
.rightPhotoBorder {
	float: right;
	margin: 0 0 15px 10px;
	border: 3px solid #FFF;
}

#videoHolder {
	overflow: hidden;
	_height: 1%;
}