/* ------------------------------------------------------------------------------
 * PRODUCTS - (IE7+ FF3+ Opera9+)
 * 
 * 	project: 	StockFuel
 * 	version: 	1.0 - 17.03.2010
 * 	author:		Hugo Larcher (hl@void.pt)
 *	assets:		products.gif
 *
 * 	[Table of Contents]
 *
 * 	1. Content Area (#products)
 *		1.1. Top Bar (#topBar)
 *			1.1.1. Search (#prodSearch)
 *			1.1.2. Sort (#prodSort)
 *			1.1.3. Top Paging (#prodPaging)
 *		1.2. List (#thumbList)
 *		1.3. Bottom Bar (#bottomBar)
 * ------------------------------------------------------------------------------
 */

/* [1. Content Area] */
#products {
	position:					relative;
	width:						684px;
	min-height:					897px;
	margin:						0px;
	padding:                	10px 0px 10px 0px;
	text-align:					left;
	background-color:			#232323;
}

.hrBevel {
	width:						672px;
}

#titleBox {
	margin:						0px 10px 5px 10px;
}

/* [1.1. Top Bar] */
#topBar {
	position:					relative;
	width:						672px;
	height:						37px;
	margin:						0px 6px 0px 6px;
	padding:                	2px 0px 2px 0px;
	background:					#232323 url(../../images/products.gif) no-repeat -5px -4px;
	z-index:					100;
}

/* [1.1.1. Search] */
#prodSearch {
	position:					relative;
	float:						left;
	width:						204px;
	height:						30px;
	margin:						0px;
	padding:                	4px 5px 3px 5px;
}

#prodSearch form {
	position:					relative;
	width:						204px;
	height:						30px;
	margin:						0px;
	padding:                	0px;
}

#prodSearch form div.field {
	position:					relative;
	float:						left;
	width:						136px;
	height: 					30px;
	margin:						0px;
	padding:	 				0px;
	background:					transparent url(../../images/products.gif) no-repeat 0px -50px;
}

#prodSearch form input {
	width:						116px;
	margin:						8px 10px 4px 10px;
	padding:	 				0px;
	border: 					none;
	background:					none;
	line-height:				16px;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#1b1b1b;
}

#prodSearch form input.submitButton {
	float:						left;
	width: 						68px;
    height: 					30px;
	margin:						0px;
	padding:	 				0px;
    border: 					none;
	background:					url(../../images/products.gif) no-repeat;
	background-position:		0px -110px;
	text-indent:				-5555px;	
	cursor: 					pointer;
}

#prodSearch form input.submitButton:hover, 
#prodSearch form input.submitButton:active {
	background-position:		-68px -110px;
}

/* [1.1.2. Sort] */
#prodSort {
	position:					relative;
	float:						left;
	width:						126px;
	height:						30px;
	margin:						0px 0px 0px 6px;
	padding:                	4px 3px 3px 5px;
	z-index:					100;
}

#prodSort form {
	position:					relative;
	width:						126px;
	height:						30px;
	margin:						0px;
	padding:                	0px;
}

#prodSort form div.field {
	position:					relative;
	display:					block;
	float:						left;
	height: 					30px;
	margin:						0px;
	padding:	 				0px;
}

#prodSort form .smallSelect {
	display: 					inline;
	width: 						86px;
	margin:						0px;
	padding:					8px 30px 4px 10px;
	border: 					none;
	line-height:				16px;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#000000;	
	background:					transparent url(../../images/products.gif) no-repeat 0px -80px;
}

#prodSort form .smallSelect.hover {
	background-position:		-126px -80px;
}

#prodSort form .smallSelect.active {
	background-position:		-252px -80px;
}

#prodSort form .selectOptions {
	max-height: 				200px;
	padding:                    5px 1px 5px 1px;
	overflow: 					auto;
	text-align:					left;
	border: 					solid 3px #4d4d4d;
	background: 				#ffffff;
}

#prodSort form .selectOptions li {
	display: 					block;
	padding:                    3px 5px 3px 5px;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#1b1b1b;
}

#prodSort form .selectOptions li.hover {
	background: 				#e0e0e0;
}

#prodSort form .selectOptions li.sel {
	background: 				#e0e0e0;
}

/* [1.1.3. Top Paging] */
#prodPaging {
	position:					relative;
	float:						right;
	width:						297px;
	height:						28px;
	margin:						0px;
	padding:                	4px 4px 5px 3px;
}

/* [1.2. List] */
ul#thumbList {
	position:					relative;
	width:						672px;
	height:						780px;
	margin:						0px;
	padding:                	3px 6px 0px 6px;
}

ul#thumbList li {
	position:					relative;
	float:						left;
	width:						206px;
	height:						110px;
	margin:						0px 6px 6px 0px;
	overflow:					hidden;
	padding:                	7px;
	text-align:					left;
	background:					transparent url(../../images/thumb-bg.gif) no-repeat left top;
}

ul#thumbList li.last {
	margin:						0px 0px 6px 0px;
	clear:						right;
}

ul#thumbList li p {
	position:					relative;
	float:						right;
	width:						89px;
	margin-top:					5px;
	overflow:					hidden;
}

ul#thumbList li p.tt {
	margin-top:					0px;
}

ul#thumbList li p a {
	text-decoration:			underline;
	color:						#ffffff;
}

ul#thumbList li p a:hover,
ul#thumbList li p a:active {
	color:						#9cbddd;
}

ul#thumbList li img {
	position:					relative;
	float:						left;
	width:						110px;
	height:						110px;
	overflow:					hidden;
	margin-right:				7px;
}

ul#thumbList li div.fthumb {
	position:					relative;
	float:						left;
	width:						110px;
	height:						110px;
	overflow:					hidden;
	margin-right:				7px;
}

/* [1.3. Bottom Bar] */
#bottomBar {
	position:					relative;
	clear:						both;
	width:						659px;
	height:						28px;
	margin:						0px 6px 0px 6px;
	padding:                	4px 5px 5px 8px;
	background:					#232323 url(../../images/products.gif) no-repeat -5px -147px;
}