/*===========================================================================
	Reset
===========================================================================*/
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; outline: 0;
	font-size: 100%; vertical-align: baseline; background: transparent;
}
p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset { margin-bottom: 1em; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }

/*===========================================================================
	General Elements
===========================================================================*/

body {
	font-family: Helvetica, Arial, Verdana, Tahoma, "Bitstream Vera Sans", sans-serif;
	font-size: 75%; /* 12px relative to 16px */
	line-height: 1.5em; /* 18px relative to 12px */	
	background-color: #66a4c8;
}

a {
	color: #00aeda;
	text-decoration: none;
}

a.selected,
li.selected a {
	color: #0f4c8c;
	font-weight: bold;
}

#contentWrapper .content div#stain-engine-wrapper ul {
	margin: 0 15px 0 0;
}

#contentWrapper .content div#stain-engine-wrapper ul li {
	list-style-type: none;
}

/*===========================================================================
	Common Classes
===========================================================================*/

*.accessibility { position: absolute; left: -1000em; }

/*
	Easy Clearing - Tony Aslett, Position is Everything, and Alex Robinson
	http://www.tanfa.co.uk/archives/show.asp?var=300
*/

*.clear:after {
	content: ".";
	display: block;
	visibility: hidden;	
	clear: both;	
	height: 0;
	font-size: 1px;
	line-height: 0;
}

*.clear { display: inline-block; }

/* 1st for IE 5-6, hidden from IE 5 Mac */ /*\*/
* html *.clear { height: 1%; }
*.clear { display: block; }
/**/ /* end hidden from IE 5 Mac */

/*===========================================================================
	Stain Engine
===========================================================================*/

/* From Structure
===========================================================================*/

div#stain-engine-wrapper {
	position: relative;
}

form#stain-engine {
	position: relative;
	z-index: 1;
	width: 432px;
	height: 430px;
	background: #fff url(/fileadmin/tmpl/img/stain-engine/stain-engine-bg.jpg) top left no-repeat;
}

/* Fabric Type
===========================================================================*/

fieldset#step-1 {
	position: absolute;
	z-index: 1;
	top: 12px;
	left: 19px;
	width: 161px;
	height: 95px;
}

#step-1 select {
	margin-top: 10px;
}

/* Fabric Color
===========================================================================*/

fieldset#step-2 {
	position: absolute;
	z-index: 1;
	top: 12px;
	left: 205px;
	width: 210px;
	height: 95px;
}

#step-2 a {
	display: block;
	position: relative;
	float: left;
	width: 81px;
	height: 39px;
	padding: 5px 12px;
	margin-top: 5px;
}

#step-2 a img, #step-2 a span {
	float: left;
}

#step-2 a span {
	display: block;
	padding-top: 11px;
	padding-left: 5px;
}

#step-2 a.selected {
	background: transparent url(/fileadmin/tmpl/img/stain-engine/fabric-type-bg.png) bottom center no-repeat;
}

/* Stain Categories & Types
===========================================================================*/

fieldset#step-3 {
	position: absolute;
	z-index: 1;
	top: 130px;
	left: 19px;
	width: 390px;
}

#step-3 ul.categories,
#step-3 ul.types {
	display: none;
}

#step-3 ul.categories {
	position: relative;
	height: 28px;
	
}

#step-3 ul.categories li {
	float: left;
	margin: 0 4px 0 4px;
	padding: 0 5px;

}

#step-3 ul.categories li.first-child {
	margin-left: 0;
}

#step-3 ul.categories li.last-child {
	margin-right: 0;
}

#step-3 ul.categories li.selected {
	background: transparent url(/fileadmin/tmpl/img/stain-engine/category-bg.png) top left repeat-x;
}



ul.categories li a span {
	display: none;
	position: relative;
	width: 15px;
	height: 6px;
	background: transparent url(/fileadmin/tmpl/img/stain-engine/category-btm-bg.png) top center no-repeat;
	margin: 2px auto;
}

ul.categories li.selected a span {
	display: block;
}

#step-3 ul.types {
	float: left;
	margin-right: 5px;
}

/* Stain Solutions
===========================================================================*/

div#results-wrapper {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 352px;
	padding: 35px 40px 0 40px;
	background: transparent url(/fileadmin/tmpl/img/rightcol_bg.png) top left no-repeat;
}

#results h2 {
	margin: 1em 0;
	color: #8dc63f;
	font-size: 1.3333em; /* 16px relative to 12px */
	font-weight: bold;
}

#results {
	color: #0f4c8c;
}