/* ------------------------------------------------------------------------------
 * LAYOUT - (IE7+ FF3+ Opera9+)
 * 
 * 	project: 	StockFuel
 * 	version: 	1.0 - 17.03.2010
 * 	author:		Hugo Larcher (hl@void.pt)
 *
 * 	[Table of Contents]
 *
 * 	1. Page (html, body)
 * 		1.1. Wrapper (#wrapper)
 *			1.1.1. Layout (#layout)
 * 				1.1.1.1. Header (#header)
 *					1.1.1.1.1. Signup (#signup)
 *					1.1.1.1.2. Signed (#signed)
 *					1.1.1.1.3. Stats (#stats)
 *				1.1.1.2. Main Bar (#mainbar)
 *					1.1.1.2.1. Search (#search)
 *					1.1.1.2.2. Login (#login)
 *				1.1.1.3. Content (#content)
 *					1.1.1.3.1. Left Column (#leftColumn)
 *						1.1.1.3.1.1. Navigation (.navlist)
 *						1.1.1.3.1.2. Featured (#featured)
 *					1.1.1.3.2. Right Column (#rightColumn)
 *			1.1.2. Push (#push)
 *		1.2. Bottom (#bottom)
 *			1.2.1. Footer (#footer)
 * ------------------------------------------------------------------------------
 */

/* [1. Page] */
html, body {
	height: 					100%;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#ffffff;
	text-align:					center;
	background: 				#000000 url(../../images/layout-body-bg.gif) repeat-x left top;
}

/* [1.1. Wrapper] */
#wrapper { 
	position: 					relative;
	min-height: 				100%;
	height: 					auto !important;
	height: 					100%;
	margin: 					0px auto -45px;
	background:					transparent url(../../images/layout-bg.gif) no-repeat center top;
}

* html #wrapper {
	height: 					100%; /* :BUG: IE */
}

/* [1.1.1. Layout] */
#layout {
	position:					relative;
	width: 						960px;
	margin: 					0px auto;
}

/* [1.1.1.1. Header] */
#header {
	position:					relative;
	width:						950px;
	height:						150px;
	overflow:					hidden;
	margin:						0px auto;
	padding:                	0px;
	background:					transparent url(../../images/layout-header-logo.gif) no-repeat left top;
}

#logo {
	position:					absolute;
	width:						250px;
	height:						150px;
	overflow:					hidden;
	top:						0px;
	left:                		0px;
	margin:						0px;
	padding:					0px;
}

/* [1.1.1.1.1. Signup] */
#signup {
	position:					absolute;
	width:						202px;
	height:						34px;
	overflow:					hidden;
	top:						0px;
	right:                		0px;
	margin:						0px;
	padding:					6px 0px;
	background:					transparent url(../../images/layout-header-signup-bg.gif) no-repeat right top;
}

#signup a {
	text-decoration:			none;
	font:						18px 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
	color:						#febf53;
}

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

/* [1.1.1.1.2. Signed] */
#signed {
	position:					absolute;
	width:						auto;
	height:						40px;
	overflow:					hidden;
	top:						0px;
	right:                		0px;
	margin:						0px;
	padding:					0px;
	background:					url(../../images/layout-header-bg.gif) repeat-x left top;
}

#signed .leftside {
	position:					absolute;
	top:						0;
	left:						0;
	width:						10px;
	height:						40px;
	background:					url(../../images/layout-header-left.gif) no-repeat left top;
}

#signed .rightside {
	position:					absolute;
	top:						0;
	right:						0;
	width:						10px;
	height:						40px;
	background:					url(../../images/layout-header-right.gif) no-repeat left top;
}

#signed ul {
	position:					relative;
	width:						auto;
	height:						33px;
	margin:						0px;
	padding:                	2px 5px 5px 5px;
}

#signed ul li {
	position:					relative;
	float:						left;
	width:						110px;
	height:						33px;
	margin:						0px 0px 0px 1px;
	padding:                	0px;
	background:					transparent url(../../images/layout-header-button.gif) no-repeat left top;
}

#signed ul li a {
	display:					block;
	width:						110px;
	height:						24px;
	margin:						0px;
	padding:                	9px 0px;
	text-decoration:			none;
	font:						bold 11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#8e8e8e;
}

#signed ul li a:hover {
	color:						#ffffff;
}

#signed ul li a span {
	padding:                    2px 0px 3px 18px;
}

/* [1.1.1.1.3. Stats] */
#stats {
	position:					absolute;
	width:						auto;
	height:						80px;
	overflow:					hidden;
	top:						68px;
	right:						0px;
	margin:						0px;
	padding:                	0px 15px 0px 0px;
	text-align:					right;
}

#stats h1 {
	margin-bottom:				11px;
	font:						bold 12px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#ffffff;
}

#stats h1 a, 
#stats h1 a:hover, 
#stats h1 a:active {
	text-decoration:			underline;
	color:						#9cbddd;
}

/* [1.1.1.2. Main Bar] */
#mainbar {
	position:					relative;
	width:						950px;
	height:						45px;
	margin:						0px auto;
	padding:                	0px;
	z-index:					300; /* IE BUG FIX MULTI SELECT SEARCH */
}

/* [1.1.1.2.1. Search] */
#search {
	position:					relative;
	float:						left;
	width:						550px;
	height:						45px;
	margin:						0px;
	padding:                	0px;
	background:					transparent url(../../images/layout-mainbar-search-bg.gif) no-repeat left top;
}

#search .searchForm {
	position:					relative;
	float:						left;
	width:						370px;
	height:						36px;
	margin:						5px 0px 4px 22px;
	padding:                	0px;
}

#search .searchForm div.field {
	float:						left;
	width: 						150px;
	height: 					36px;
	margin:						0px;
	padding:	 				0px;
	background:					url(../../images/layout-mainbar-search.gif) no-repeat;
	background-position:		-22px -5px;
}

#search .searchForm input#lookfor {
	width: 						128px;
	margin:						12px 10px 8px 12px;
	padding:	 				0px;
	border: 					none;
	background:					none;
	line-height:				16px;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#1b1b1b;
}

#search .searchForm div.cbox {
	position:					relative;
	display:					block;
	float:						left;
	margin:						0px;
	padding:	 				0px;
}

#search .searchForm .multiSelect {
	display: 					inline;
	width: 						88px;
	margin:						0px;
	padding:					12px 30px 8px 12px;
	border: 					none;
	line-height:				16px;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#1b1b1b;	
	background:					url(../../images/layout-mainbar-search.gif) no-repeat;
	background-position:		-172px -5px;
}

#search .searchForm .multiSelect.hover {
	background-position:		-302px -5px;
}

#search .searchForm .multiSelect.active {
	background-position:		-432px -5px;
}

#search .searchForm .multiSelectOptions {
	width: 						115px;
	max-height: 				200px;
	margin:						0px;
	padding:                    5px 1px 5px 1px;
	overflow: 					auto;
	text-align:					left;
	border: 					solid 3px #4d4d4d;
	background: 				#ffffff;
}

#search .searchForm .multiSelectOptions label {
	display: 					block;
	height:						20px;
	margin:                     0px;
	padding:                    0px;
}

#search .searchForm .multiSelectOptions label.checked {
	background: 				#e0e0e0;
}

#search .searchForm .multiSelectOptions label.selectAll {
	border-bottom: 				dotted 1px #e0e0e0;
}

#search .searchForm .multiSelectOptions label.hover {
	background: 				#e0e0e0;
}

#search .searchForm .multiSelectOptions label input {
	position:					relative;
	float:						left;
}

#search .searchForm .multiSelectOptions label span {
	display:					block;
	position:					relative;
	float:						left;
	width:						93px;
	margin:						0px;
	padding:                    0px;
	text-indent:                5px;
	font:						11px/18px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#000000;
}

#search .searchForm input.searchButton {
	float:						left;
	width: 						89px;
    height: 					36px;
	margin:						0px;
	padding:	 				0px;
    border: 					none;
	background:					url(../../images/layout-mainbar-search.gif) no-repeat;
	background-position:		-582px -5px;
	text-indent:				-5555px;
	cursor: 					pointer;
}

#search .searchForm input.searchButton:hover, 
#search .searchForm input.searchButton:active {
	background-position:		-671px -5px;
}

#search a.advSearch {
	display:					block;
	float:						left;
	width:						141px;
	height:						36px;
	margin:						5px 0px 4px 0px;
	padding:                	0px;
	background:					url(../../images/layout-mainbar-search.gif) no-repeat;
	background-position:		-760px -5px;
	text-indent:				-5555px;
}

#search a.advSearch:hover, 
#search a.advSearch:active {
	background-position:		-901px -5px;
}

/* [1.1.1.2.2. Login] */
#login {
	position:					relative;
	float:						right;
	width:						400px;
	height:						45px;
	overflow:					hidden;
	margin:						0px;
	padding:                	0px;
	background:					transparent url(../../images/layout-mainbar-login-bg.gif) no-repeat left top;
}

#login .loginForm {
	position:					relative;
	float:						left;
	width:						320px;
	height:						36px;
	margin:						5px 0px 4px 10px;
	padding:                	0px;
}

#login .loginForm label {
	float:						left;
	width:						auto;
	margin:						12px 0px 0px 0px;
	text-align:					left;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#ffffff;
}

#login .loginForm div.field {
	float:						left;
	width: 						85px;
	height: 					36px;
	margin:						0px;
	padding:	 				0px;
	background:					url(../../images/layout-mainbar-login.gif) no-repeat;
	background-position:		-14px -5px;
}

#login .loginForm input {
	width: 						63px;
	margin:						12px 10px 8px 12px;
	padding:	 				0px;
	border: 					none;
	background:					none;
	line-height:				16px;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#1b1b1b;
}

#login .loginForm .checkbox {
	float:						left;
	width:						auto;
	margin:						11px 5px 9px 2px;
	border:						none;
	background:					none;
}

#login .loginForm input.loginButton {
	float:						left;
	width: 						53px;
    height: 					36px;
	margin:						0px;
	padding:	 				0px;
    border: 					none;
	background:					url(../../images/layout-mainbar-login.gif) no-repeat;
	background-position:		-99px -5px;
	text-indent:				-5555px;	
	cursor: 					pointer;
}

#login .loginForm input.loginButton:hover, 
#login .loginForm input.loginButton:active {
	background-position:		-152px -5px;
}

#login a.lostPass {
	display:					block;
	float:						left;
	width:						auto;
	height:						16px;
	margin:						17px 0px 4px 10px;
	padding:                	0px;
	text-decoration:			underline;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#b8ced9;
}

#login a.lostPass:hover {
	color:						#FFFFFF;
}

#login a.lostPass:active {
	color:						#b8ced9;
}

#login ul {
	position:					relative;
	width:						390px;
	height:						36px;
	margin:						5px 7px 4px 3px;
	padding:                	0px;
}

#login ul li {
	position:					relative;
	float:						left;
	width:						110px;
	height:						36px;
	margin:						0px;
	padding:                	0px;
}

#login ul li.infotext {
	width:						160px;
	height:						36px;
	margin:						0px;
	padding:                	0px 10px 0px 0px;
	text-align:					right;
	font: 						bold 11px/36px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#94b4d2;
}

#login ul li a.credits {
	display:					block;
	width: 						110px;
	height:						24px;
	margin:						0px;
	padding:                	12px 0px;
	text-align:					center;
	text-decoration:			none;
	font: 						bold 11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#ffffff;
	background: 				transparent url(../../images/layout-mainbar-login.gif) no-repeat -205px -5px;
}

#login ul li a.credits:hover {
	color:						#9cbddd;
}

#login ul li a.buycredits {
	display:					block;
	width: 						110px;
	height:						36px;
	margin:						0px;
	padding:                	0px;
	background: 				transparent url(../../images/layout-mainbar-login.gif) no-repeat -316px -5px;
	text-indent:            	-5555px;
}

#login ul li a.buycredits:hover, 
#login ul li a.buycredits:focus { 
	background-position: 		-425px -5px;
}

/* [1.1.1.3. Content] */
#content {
	position:					relative;
	width:						950px;
	margin:						0px auto;
	padding:                	16px 0px 20px 0px;
}

/* [1.1.1.3.1. Left Column] */
#leftColumn {
	position:					relative;
	float:						left;
	width:						251px;
	margin:						0px;
	padding:                	0px;
	z-index:					200;
}

/* [1.1.1.3.1.1. Navigation] */
#prodNav {
	position:					relative;
	width:						251px;
	height:						auto;
	margin:						0px;
	padding:                	0px;
	text-align:					left;
	background-color:			#232323;
	z-index:					210;
}

#mainNav {
	position:					relative;
	width:						251px;
	height:						auto;
	margin:						15px 0px 0px 0px;
	padding:                	0px;
	text-align:					left;
	background-color:			#232323;
	z-index:					205;
}

ul.navlist {
	position:					relative;
	width:						241px;
	height:						auto;
	margin:					    0px;
	padding:                	7px 5px 5px 5px;
	font:						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	z-index:					211;
}

ul.navlist li.top {
	display:					block;
}

ul.navlist li a.top_link {
	display:					block;
	position:					relative;
	width:						231px;
	height:						41px;
	margin:						0px;
	padding:	 				5px;
	text-decoration:			none;
	background: 				none;
	line-height:				4px;
	vertical-align: 			bottom;
	cursor:						pointer;
	background: 				transparent url(../../images/layout-nav-button.gif) no-repeat left top;
}

ul.navlist li a.top_link:hover {
	background-position:		0px -51px;
}

ul.navlist li a.top_link img {
	display: 					inline;
	float:						left;
	max-width: 					100%;
	margin-left:				4px;
	margin-right:				2px;
}

ul.navlist li a.top_link span.title {
	font:						15px/24px 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
	font-weight:				bold;
	color:						#ffffff;
}

ul.navlist li a.top_link span.description {
	font:						10px/8px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#4d4d4d;
}

ul.navlist table {
	position:					absolute;
	left:						0px;
	top:						0px;
	margin:						0px;
	padding:                	0px;
	border-collapse:			collapse;
}

ul.navlist li:hover {
	position:					relative;
	z-index:					211;
}

ul.navlist a:hover {
	position:					relative;
	white-space:				normal;
	z-index:					211;
}

ul.navlist :hover ul.sub {
	left:						241px;
	top:						3px;
	width:						150px;
	height:						auto;
	padding:	            	0px;
	white-space:				nowrap;
	border:						3px solid #4d4d4d;
	background: 				#ffffff;
	z-index:					212;
}

ul.navlist :hover ul.onecol { width: 150px; }
ul.navlist :hover ul.twocol { width: 300px; }
ul.navlist :hover ul.threecol { width: 450px; }
ul.navlist :hover ul.fourcol { width: 600px; }

ul.navlist :hover ul.sub li {
	display:					block;
	position:					relative;
	float:						left;
	width:						149px;
	height:						18px;
	border-right:				1px solid #e0e0e0;
	background: 				#ffffff;
	vertical-align: 			bottom;
	color:						#000000;
}

ul.navlist :hover ul.sub li a {
	display:					block;
	width:						149px;
	height:						18px;
	line-height:				18px;
	text-indent:	        	5px;
	text-decoration:			none;
	color:						#000000;
}

ul.navlist :hover ul.sub li a:hover {
	background:					#e0e0e0;
}

ul.navlist li ul.sub li a.par {
	background:					transparent url(../../images/layout-nav-arrow.gif) 142px 6px no-repeat;
}

ul.navlist li ul.sub li a.par:hover {
	background:					#e0e0e0 url(../../images/layout-nav-arrow.gif) 142px 6px no-repeat;
}

ul.navlist a:hover a:hover ul, 
ul.navlist a:hover a:hover a:hover ul, 
ul.navlist a:hover a:hover a:hover a:hover ul, 
ul.navlist a:hover a:hover a:hover a:hover a:hover ul {
	left:						150px;
	top:						-3px;
	height:						auto;
	padding:	            	0px;
	white-space:				nowrap;
	border:						3px solid #4d4d4d;
	background: 				#ffffff;
	z-index:					213;
}

ul.navlist ul, 
ul.navlist a:hover ul ul, 
ul.navlist a:hover a:hover ul ul, 
ul.navlist a:hover a:hover a:hover ul ul, 
ul.navlist a:hover a:hover a:hover a:hover ul ul {
	position:					absolute;
	left:						-9999px;
	top:						-9999px;
	width:						0px;
	height:						0px;
	margin:						0px;
	padding:	            	0px;
}

ul.navlist li:hover li:hover > ul {
	left:						150px;
	top:						-3px;
	width: 						150px;
	height:						auto;
	padding:	            	0px;
	white-space:				nowrap;
	border:						3px solid #4d4d4d;
	background: 				#ffffff;
	z-index:					213;
}

ul.navlist li:hover li:hover > ul.onecol { width: 150px; }
ul.navlist li:hover li:hover > ul.twocol { width: 300px; }
ul.navlist li:hover li:hover > ul.threecol { width: 450px; }
ul.navlist li:hover li:hover > ul.fourcol { width: 600px; }

ul.navlist li:hover > ul ul {
	position:					absolute;
	left:						-9999px;
	top:						-9999px;
	width:						0px;
	height:						0px;
	margin:						0px;
	padding:                	0px;
}

ul.navlist li:hover li:hover > a.par {
	background:					transparent url(../../images/layout-nav-arrow.gif) 142px 6px no-repeat;
}

ul.navlist li:hover li:hover > li a.par {
	background:					transparent url(../../images/layout-nav-arrow.gif) 142px 6px no-repeat;
}

/* [1.1.1.3.1.2. Featured] */
#featured {
	position:					relative;
	width:						221px;
	height:						198px;
	margin:						15px 0px 0px 0px;
	padding:                	1px 15px 1px 15px;
	background-color:			#232323;
}

#featuredTitle {
	position:					relative;
	width:						196px;
	height:						30px;
	margin:						0px;
	padding:                	0px 0px 0px 25px;
	background:					transparent url(../../images/layout-featured-icon.gif) no-repeat left top;
	text-align:					left;
	font:						bold 12px/30px 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
	color:						#ffffff;
}

#featuredThumb {
	position:					relative;
	width:						207px;
	height:						110px;
	margin:						1px 0px 0px 0px;
	padding:                	7px;
	overflow:					hidden;
	text-align:					left;
	background:					transparent url(../../images/layout-featured-thumb-bg.gif) no-repeat left top;
}

#featuredThumb p {
	position:					relative;
	float:						right;
	width:						90px;
	margin-top:					5px;
	overflow:					hidden;
}

#featuredThumb p a {
	text-decoration:			underline;
	color:						#ffffff;
}

#featuredThumb p a:hover,
#featuredThumb p a:active {
	color:						#9cbddd;
}

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

#featured a.featuredButton {
	display:					block;
	width: 						141px;
	height:						24px;
	margin:						2px auto;
	padding:                	12px 0px;
	text-align:					center;
	text-decoration:			none;
	font: 						bold 11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#ffffff;
	background: 				transparent url(../../images/layout-featured-button.gif) no-repeat left top;
}

#featured a.featuredButton:hover, 
#featured a.featuredButton:active {
	color:						#9cbddd;
}

/* [1.1.1.3.2. Right Column] */
#rightColumn {
	position:					relative;
	float:						right;
	width:						684px;
	margin:						0px 0px 0px 15px;
	padding:                	0px;
}

/* [1.1.2. Push] */
#push {
	clear:						both;
	height:						45px;
}

/* [1.2. Bottom] */
#bottom {
	clear:						both;
	position:					relative;
	height:						45px;
	overflow:					hidden;
	margin:						0px;
	padding:                	0px;
	background: 				transparent url(../../images/layout-footer-bg.gif) repeat-x left top;
}

/* [1.2.1. Footer] */
#footer {
	position:					relative;
	width:						950px;
	height:						45px;
	margin:						0px auto;
	padding:                	0px;
	color:						#4d4d4d;
}

#footer div.imprint {
	float:						right;
	width:						auto;
	height:						20px;
	margin:						15px 0px 15px 15px;
	padding:                	0px;
	text-align:					left;
}

#footer ul {
	float:						left;
	width:						auto;
	height:						20px;
	margin:						0px;
	padding:                	15px 15px 15px 0px;
}

#footer ul li {
	float:						left;
	width:						auto;
	height:						15px;
	margin:						0px;
	padding:                	0px;
	text-align:					left;
}

#footer ul li a {
	text-decoration:			none;
}

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