/*

	-- -- -- -- -- -- --
	Machine Advisors
	default.css
	main site foundation layout
	-- -- -- -- -- -- --
	
*/

@import url("reset.css");

/* -- basic HTML elements -- */
	html {
		height: 100%;
	}

	body {
		font: 73% "Trebuchet MS", Arial, Helvetica, sans-serif;
		color: #fff;
		background: #333 url(../images/ui/bg-tile.jpg) top center repeat;
	}

	
/* -- Content Styling -- */
	a:link, a:visited {
		color: #999;
		text-decoration: underline;
	}
	a:hover {
		color: #333;
	}
	h1 {
		width: 657px;
		height: 85px;
		display: block;
		margin: 10px 0 0 39px;
	}
	h1 a:link, h1 a:visited {
		width: 657px;
		height: 85px;
		display: block;
		text-indent: -9000px;
		background: url(../images/ui/gears-off.gif) no-repeat;
	}
	h1 a:hover {
		background: url(../images/ui/gears-on.gif) no-repeat;
	}
	h2 {
		font-size: 2.1em;
		margin: 0 0 10px 5px;
		color: #333;
	}
	h3 {
		font-size: 1.5em;
		margin: 0 0 10px 10px;
		color: #555;
		font-weight: bold;
	}
	h4 {
		font-size: 1.3em;
		margin: 0 0 5px 10px;
		color: #333;
		font-weight: bold;
	}
	input, textarea {
		font: 1.3em "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
		color: #291e18;
	}
	ul {
		margin-bottom: 0.5em;
	}
	ul li {
		font-size: 1.2em;
		line-height: 1.5833;
		margin-left: 1.5em;
		color: #222;
		list-style: disc;
	}
	ol li {
		font-size: 1.3em;
		line-height: 1.6923;
		margin-left: 24px;
		list-style: lower-roman;
	}
	ul li h4, ol li h4,
	ul li p, ol li p {
		font-size: 1em;
	}
	p {
		font-size: 1.2em;
		color: #444;
		margin: 5px 10px 10px 10px;
		text-indent: 0;
		line-height: 1.3em;
		text-align: justify;
	}
	p img {
		float: right;
		margin: 0 0 0 10px;
	}
	
	#stage .column-1 h3, #stage .column-3 h3 {
		font-size: 1.6em;
		margin: 5px 0 5px 5px;
		padding: 0;
		color: #666;
		font-weight: bold;
	}
	
	hr {
		width: 95%;
		height: 1px;
		margin: 20px auto;
		color: #999;
		background: #999;
		border: 0;
		clear: both;
	}
	
	#stage .column-1 hr, #stage .column-3 hr  {
		margin: 10px auto;
		color: #bbb;
		background: #bbb;
	}
	
/* -- Containers -- */
	#container {
		width: 934px;
		height: auto;
		display: block;
		margin: 0 auto 20px auto;
	}
	
	#header {
		width: 934px;
		height: 120px;
		display: block;
		margin: 0;
		background: url(../images/ui/bg-header.png) no-repeat;
	}
	
	#stage {
		width: 934px;
		height: auto;
		display: block;
		background: url(../images/ui/bg-stage.png) repeat-y;
		position: relative;
	}
	
	#footer {
		width: 934px;
		height: 50px;
		display: block;
		background: url(../images/ui/bg-footer.png) no-repeat;
	}
	
/* -- Stage -- */	

	.border {
		width: 854px;
		height: auto;
		display: block;
		margin: 0 40px;
		padding: 10px 0 10px 0;
		border-top: 1px solid #bbb;
		border-bottom: 1px solid #bbb;
	}
	
	#stage .column-1, #stage .column-2, #stage .column-3 {
		height: auto;
		display: block;
		float: left;
		margin: 0;
	}
	
	#stage .column-1 {
		width: 210px;
	}
	
	#stage .column-2 {
		width: 414px;
		padding: 10px;
		min-height: 500px;
	}
	
	#stage .large {
		width: 622px;
	}
	
	#stage .column-3 {
		width: 210px;
		padding: 10px 0 0 0;
	}
	
	#stage .column-3 .listing {
		width: 197px;
		height: 45px;
		color: #555;
		padding: 5px 1px 0px 10px;
		margin: 0;
		font-size: 0.9em;
	}
	
	#stage .column-3 .listing span {
		font-weight: bold;
	}
	
	#stage .column-3 .listing:hover {
		background: url(../images/ui/bg-listing.jpg) top right no-repeat;
		cursor: pointer;
		color: #222;
		z-index: 2000;
	}
	
	#stage .column-3 .listing:hover span {
		color: #900;
	}
	
	#stage .column-3 .thumb {
	width: 169px;
	height: 129px;
	display: none;
	margin: 0 15px 0 0;
	background: url(../images/ui/noimage.jpg) 1px 1px no-repeat;
	position: relative;
	top: -45px;
	left: -172px;
	}
	
	#stage .column-3 .listing:hover div.thumb {
		display: block;
	}
	
		#stage .column-3 .v {
	width: 129px;
	height: 169px;
	top: -45px;
	left: -132px;
}

#stage .column-3 .h {
	width: 169px;
	height: 129px;
}

.column-2 form {
	margin: 5px 10px 10px 10px;
}

.column-2 form label {
	font-size: 1.2em;
	color: #444;
	line-height: 1.3em;
}

#stage .phone {
	position: absolute;
	top: 0;
	right: 40px;
	color: #900;
	font-size: 1.8em;
	font-weight: bold;
	letter-spacing: -0.05em;
}

a.makeofferButton:link, a.makeofferButton:visited {
	width: 123px;
	height: 30px;
	display: inline-block;
	background: url(../images/ui/makeoffer.gif) no-repeat;
	text-indent: -9000px;
}

a.makeofferButton:hover {
	background: url(../images/ui/makeoffer.gif) 0px -30px no-repeat;
}

/* -- Header -- */

	#header .account {
		width: 270px;
		height: 10px;
		display: block;
		font-size: 1em;
		color: #aaa;
		margin: 0 50px 0 0;
		padding: 0;
		float: right;
		position: relative;
		text-align: right;
	}
	#header .account a:link, #header .account a:visited {
		font-size: 1em;
		color: #ccc;
		text-decoration: none;
	}
	#header .account a:hover {
		color: #fff;
		text-decoration: underline;
	}

/* -- Menu -- */

	#menu ul {
		width: 433px;
		height: 30px;
		display: block;
		margin: 0 0 0 45px;
		top: 19px;
		position: relative;
		background: url(../images/ui/menu.png) no-repeat;
	}
	
	#menu ul:hover {
		background: url(../images/ui/menu.png) 0px -30px no-repeat;
	}
	
	#menu ul li {
		height: 30px;
		width: auto;
		margin: 0 10px 0 0;
		display: block;
		list-style-type: none;
		float: left;
		position: relative;
		left: -42px;
	}
	
	#menu ul li a:link, #menu ul li a:visited {
		height: 30px;
		display: block;
		text-indent: -9000px;
	}
	
	li.products a {
		width: 84px;
	}
	
	li.products a:hover {
		background: url(../images/ui/menu.png) 2px -60px no-repeat;
	}
	
	li.about a {
		width: 78px;
	}
	
	li.about a:hover {
		background: url(../images/ui/menu.png) -92px -60px no-repeat;
	}
	
	li.support a {
		width: 71px;
	}
	
	li.support a:hover {
		background: url(../images/ui/menu.png) -180px -60px no-repeat;
	}
	
	li.links a {
		width: 47px;
	}
	
	li.links a:hover {
		background: url(../images/ui/menu.png) -261px -60px no-repeat;
	}
	
	li.contact a {
		width: 101px;
	}
	
	li.contact a:hover {
		background: url(../images/ui/menu.png) -318px -60px no-repeat;
	}

/* -- Footer -- */

	#footer .copyright, #footer .terran {
		width: 427px;
		height: 10px;
		display: block;
		font-size: 1em;
		color: #aaa;
		padding: 0;
		float: left;
		position: relative;
	}
	#footer .copyright {
		width: 437px;
		margin: 30px 0 0 35px;
	}
	#footer .terran {
		width: 427px;
		text-align: right;
		margin: 30px 0 0 0;
	}
	#footer .terran a:link, #footer .terran a:visited {
		font-size: 1em;
		color: #ccc;
		text-decoration: none;
	}
	#footer .terran a:hover {
		color: #fff;
		text-decoration: underline;
	}

/* -- Side Boxes -- */

	#stage .box .search-box {
		width: 188px;
		height: auto;
		padding: 0 10px;
		margin: 0;
		color: #333;
	}
	
	#stage .box .search-box input {
		width: 188px;
		height: 18px;
		padding: 2px 0 0 0;
		margin: 0 0 2px 0;
		border: 1px solid #333;
		font: 0.9em "Trebuchet MS", Arial, Helvetica, sans-serif;
	}
	
	input#searchKeywords {
		background: #fff url(../images/ui/keywords.gif) 3px center no-repeat;
	}
	
	input#searchKeywords:hover {
		background: #eee;
	}
	
	#stage .box .search-box input.formButton {
		width: 190px;
		height: 24px;
		padding: 1px 3px 3px 3px;
		margin: 5px 0 0 0;
		border: 1px solid #333;
		font: 0.9em "Trebuchet MS", Arial, Helvetica, sans-serif;
		background: url(../images/ui/search-button-off.jpg) no-repeat;
	}
	
	#stage .box .search-box input.formButton:hover {
		background: #bbb;
		color: #000;
		border: 1px solid #000;
		cursor: pointer;
		background: url(../images/ui/search-button-on.jpg) no-repeat;
	}
	
	#stage .box .search-box select {
		width: 190px;
		height: 20px;
		margin: 2px 0;
		border: 1px solid #333;
		font: 0.9em "Trebuchet MS", Arial, Helvetica, sans-serif;
	}
	
	#stage .box .search-box select:hover {
		background: #eee;
	}

	#stage .box ul.tools {
		width: 208px;
		height: auto;
		display: block;
		padding: 0;
		margin: 0;
	}
	
	#stage .box ul.tools li {
		width: 208px;
		height: 22px;
		display: block;
		padding: 0;
		margin: 0;
		list-style-type: none;
	}
	
	#stage .box ul.tools li a:link, #stage .box ul.tools li a:visited {
		width: 196px;
		height: 22px;
		display: block;
		line-height: 22px;
		vertical-align: middle;
		padding: 0 0 0 10px;
		font-size: 1em;
		color: #666;
		text-decoration: none;
		margin: 0 1px;
	}
	
	#stage .box ul.tools li a:hover {
		height: 22px;
		background: #E4E4E4;
		color: #000;
	}

	#stage .spot-box {
		width: 293px;
		height: 155px;
		display: block;
		float: left;
		padding: 5px;
		margin: 0 5px 10px 5px;
		background: #eee url(../images/ui/rank-off.gif) top right no-repeat;
		border: 1px dotted #aaa;
		color: #666;
		line-height: 1.3em;
		position: relative;
	}
	
	#stage .spot-box:hover {
		border: 1px dotted #000;
		color: #000;
		background: #fff url(../images/ui/rank-on.gif) top right no-repeat;
	}
	
	#stage .spot-box .rank {
		width: 28px;
		height: 30px;
		display: block;
		padding: 0 7px 0 0;
		position: absolute;
		top: 0;
		right: 0;
		line-height: 30px;
		text-align: right;
		vertical-align: middle;
		font-size: 1.6em;
		font-weight: bold;
		color: #bbb;
		letter-spacing: -0.1em;
	}
	
	#stage .spot-box .rank span {
		font-size: 0.7em;
		vertical-align: top;
	}
	
	#stage .spot-box:hover .rank, #stage .spot-box:hover .rank span {
		color: #fff;
		text-shadow: #000 1px 1px 1px;
	}
	
	#stage .spot-box .left {
		width: 120px;
		height: auto;
		display: block;
		float: left;
	}
	
	#stage .spot-box .right {
		width: 163px;
		height: auto;
		display: block;
		padding: 0 0 0 10px;
		float: left;
	}
	
	#stage .spot-box .spacer-box {
		width: 120px;
		height: 90px;
		display: block;
		float: left;
		margin: 0 10px 6px 0;
	}
	
	#stage .spot-box .featured-image {
		width: 120px;
		height: 90px;
		border: 1px solid #666;
	}
	
	#stage .spot-box .featured-image:hover {
		cursor: pointer;
	}
	
	#stage .spot-box .noimage {
		cursor: default;
	}
	
	#stage .spot-box .thumbs {
		width: 123px;
		height: 60px;
		display: block;
		margin: 5px 0 0 0;
		position: relative;
	}
	
	#stage .spot-box .thumbs img {
		width: 56px;
		height: 56px;
		display: block;
		float: left;
		border: 1px solid #666;
		margin: 0 6px 0 0;
	}
	
	#stage .spot-box a:link, #stage .spot-box a:visited {
		color: #999;
		text-decoration: none;
	}
	
	#stage .spot-box:hover a:link, #stage .spot-box:hover a:visited {
		color: #666;
	}
	
	#stage .spot-box:hover a:hover {
		color: #900;
		text-decoration: underline;
	}
	
	#stage .spot-box h3 {
		font-size: 1.1em;
		margin: 0 35px 10px 0;
		float: left;
		width: 125px;
	}
	
	#stage .spot-box h3.name a {
		color: #333;
		font-weight: bold;
	}
	
	#stage .spot-box:hover h3.name a {
		color: #900;
		text-decoration: underline;
	}
	
	#stage .spot-box .offer {
		display: block;
		font-size: 1.1em;
		color: #900;
		margin: 5px 0;
		font-weight: bold;

	}
	
	#stage .scroll-box {
		width: 208px;
		height: 160px;
		padding: 2px 0 0 2px;
		margin: 0;
		background: url(../images/ui/bg-scrollbox.jpg) no-repeat;
	}
	
	#stage .scroll-box div {
		width: 196px;
		height: 148px;
		overflow: auto;
	}
	
	#stage .scroll-box div a:link, #stage .scroll-box div a:visited {
		width: 169px;
		height: 19px;
		display: block;
		padding: 1px 5px 0 5px;
		margin: 0;
		color: #333;
		text-decoration: none;
	}
	
	#stage .scroll-box div a.cat-main {
		font-weight: bold;
	}
	
	#stage .scroll-box div a.cat-sec {
		width: 159px;
		padding: 1px 5px 0 15px;
		color: #555;
	}
	
	#stage .scroll-box div a:hover {
		color: #fff;
		background: #333;
	}
	
	#stage .quicksearch {
		width: 622px;
		height: auto;
		display: block;
		text-align: center;
		font-size: 1.1em;
		color: #333;
		margin: 10px 0 10px 210px;
		padding: 35px 0 15px 0;
		border-top: 1px dotted #bbb;
		clear: both;
		font-weight: bold;
		white-space: normal;
	}
	
	#stage .quicksearch a:link, #stage .quicksearch a:visited {
		line-height: 1.8em;
		vertical-align: middle;
		color: #333;
		text-decoration: none;
		padding: 0 0 1px 0;
		font-weight: bold;
	}
	
	#stage .quicksearch a:hover {
		color: #900;
		border-bottom: 1px dotted #000;
		padding: 0;
	}
	
	#stage .quicksearch a span {
		font-size: 0.9em;
		font-weight: normal;
		padding: 0 0 0 5px;
	}
	
	#stage .industry {
		background: url(../images/ui/quicklinksbg/industries.jpg) center top no-repeat;
		border-top: none;
	}
	
	#stage .manufacturer {
		background: url(../images/ui/quicklinksbg/manufacturers.jpg) center top no-repeat;
	}
	
	#stage .model {
		background: url(../images/ui/quicklinksbg/models.jpg) center top no-repeat;
	}
	

#stage .links, #stage .breadcrumb {
	width: 854px;
	height: 25px;
	display: block;
	margin: 0 40px;
	line-height: 25px;
	vertical-align: middle;
	text-transform: uppercase;
	color: #666;
	font-size: 0.9em;
}
	
#stage .box {
	width: 208px;
	height: auto;
	display: block;
	background: #CBCBCB;
	margin: 0 0 10px 0;
	background: url(../images/ui/box-fill.jpg) repeat-y;
}

#stage .box .top, #stage .box .bottom {
	width: 208px;
	height: 10px;
	display: block;
}

#stage .box .top {
	background: url(../images/ui/box-top.jpg) no-repeat;
}

#stage .box .bottom {
	background: url(../images/ui/box-bottom.jpg) no-repeat;
}

#stage .box .search {
	height: 30px;
	background: url(../images/ui/box-top-search.jpg) no-repeat;
	text-indent: -9000px;
}

#stage .column-2 a.makeanoffer {
	width: 122px;
	height: 35px;
	display: block;
	margin: 0;
	border: none;
	text-indent: -9000px;
	background: url(../images/ui/makeoffer.gif) no-repeat;
}

#stage .column-2 .spot-box a.makeanoffer {
	width: 122px;
	height: 35px;
	display: block;
	margin: 8px auto 0 auto;
	border: none;
	text-indent: -9000px;
	position: absolute;
	right: 4px;
	bottom: 5px;
	background: url(../images/ui/makeoffer.gif) no-repeat;
	display: none;
}

#stage .spot-box:hover a.makeanoffer {
	display: block;
}

#stage .column-2 form .error label {
	color: #900;
}

#stage .column-2 img.photo {
	margin: 20px auto 0 auto;
	display: block;
}

#stage .column-2 .records {
	width: 100%;
	height: 31px;
	display: block;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	text-align: center;
}

#stage .column-2 .records .text {
	width: auto;
	height: 11px;
	display: block;
	font-size: 1.2em;
	color: #444;
	margin: 10px;
	line-height: 11px;
	float: left;
}

#stage .column-2 .records a.first, #stage .column-2 .records a.last {
	width: 19px;
	height: 11px;
	display: block;
	margin: 10px 2px;
	text-indent: -9000px;
	float: left;
}

#stage .column-2 .records a.first {
	background: url(../images/ui/search/first-off.gif) no-repeat;
}

#stage .column-2 .records a.last {
	background: url(../images/ui/search/last-off.gif) no-repeat;
}

#stage .column-2 .records a.next, #stage .column-2 .records a.previous {
	width: 11px;
	height: 11px;
	display: block;
	margin: 10px 2px;
	text-indent: -9000px;
	float: left;
}

#stage .column-2 .records a.next {
	background: url(../images/ui/search/next-off.gif) no-repeat;
}

#stage .column-2 .records a.previous {
	background: url(../images/ui/search/previous-off.gif) no-repeat;
}

#stage .column-2 .records a.first:hover {
	background: url(../images/ui/search/first-on.gif) no-repeat;
}

#stage .column-2 .records a.last:hover {
	background: url(../images/ui/search/last-on.gif) no-repeat;
}
#stage .column-2 .records a.next:hover {
	background: url(../images/ui/search/next-on.gif) no-repeat;
}

#stage .column-2 .records a.previous:hover {
	background: url(../images/ui/search/previous-on.gif) no-repeat;
}

.twitter {
	width: 146px;
	height: 40px;
	display: block;
	margin: 20px auto;
	text-indent: -9000px;
	background: url(/images/ui/twitter-off.jpg) no-repeat;
}

.twitter:hover {
	background: url(/images/ui/twitter-on.jpg) no-repeat;
}

#stage .column-1 h3.events {
	width: 169px;
	height: 108px;
	display: block;
	margin: 0 auto 10px auto;
	background: url(../images/ui/events.jpg) no-repeat;
	text-indent: -9000px;
}

#stage .column-1 a.warehouse, #stage .column-1 a.auctions {
	width: 166px;
	height: 40px;
	display: block;
	margin: 0 auto;
	text-indent: -9000px;
	background: url(../images/ui/warehouse.jpg) no-repeat;
}

#stage .column-1 a.auctions {
	background: url(../images/ui/auctions.jpg) no-repeat;
}
	
