@import "inc/vars.less";


.main_menu
{
	position: relative;
	
	background-color: #fff;
	width: @container_width;
	height: @menu-height;
	
	font-size: 12px;
	
	ul 
	{
		margin: 0;
		padding: 0 @container_padding;
		height: @menu-height;
		overflow: visible;
		
		li
		{
			list-style: none;
			margin: 0;
			margin-right: 15px;
			padding: 0;
			float: left;
			display: block;
			height: @menu-height;
			position: relative;
			
			//background: #262626;
			
			//_width: 100px;
			_display: inline;
			
			height: 29px;
			color: #fff !important;
			
			a
			{
				display: block;
				text-decoration: none;
				text-align: center;
				
				position: absolute;
				top: 0;
				z-index: 2;
				color: #fff;
				
				margin: 0;
				padding: 0;
				
				padding-top: 5px;
				height: 29px - 5px;
				
			}
			a:hover { background-color: transparent !important; }
			.hover 	{ z-index: 1; width: 100%; height: 100%; display: none; }
		}
		
		li.home {
			
			width: 78px; background-image: url(../img/layout/buttons/button-home-n-78.gif);
			
			a 		{ width: 78px; }
			.hover 	{ background-image: url(../img/layout/buttons/button-home-h-78.gif); }
			.active { background-image: url(../img/layout/buttons/button-home-a-78.gif); }
		}
		li.tour {
			width: 73px; background-image: url(../img/layout/buttons/button-tour-n-73.gif);
		
			a 		{ width: 73px; }
			.hover 	{ background-image: url(../img/layout/buttons/button-tour-h-73.gif); }
			.active { background-image: url(../img/layout/buttons/button-tour-a-73.gif); }
		}
		li.documentation {
			width: 137px; background-image: url(../img/layout/buttons/button-documentation-n-137.png);
		
			a 		{ width: 137px; }
			.hover 	{ background-image: url(../img/layout/buttons/button-documentation-h-137.png); }
			.active { background-image: url(../img/layout/buttons/button-documentation-a-137.png); }
		}
		li.downloads {
			width: 111px; background-image: url(../img/layout/buttons/button-downloads-n-111.gif);
		
			a 		{ width: 111px;}
			.hover 	{ background-image: url(../img/layout/buttons/button-downloads-h-111.gif); }
			.active { background-image: url(../img/layout/buttons/button-downloads-a-111.gif); }
		}
		li.about {
			width: 99px; background-image: url(../img/layout/buttons/button-aboutus-n-99.gif);
		
			a 		{ width: 99px; }
			.hover 	{ background-image: url(../img/layout/buttons/button-aboutus-h-99.gif); }
			.active { background-image: url(../img/layout/buttons/button-aboutus-a-99.gif); }
		}
		li.faq {
			width: 69px; background-image: url(../img/layout/buttons/button-faq-n-69.gif);
		
			a 		{ width: 69px; }
			.hover 	{ background-image: url(../img/layout/buttons/button-faq-h-69.gif); }
			.active { background-image: url(../img/layout/buttons/button-faq-a-69.gif); }
		}
		li.buzz {
			width: 72px; background-image: url(../img/layout/buttons/button-buzz-n-72.gif);
		
			a 		{ width: 72px; }
			.hover 	{ background-image: url(../img/layout/buttons/button-buzz-h-72.gif); }
			.active { background-image: url(../img/layout/buttons/button-buzz-a-72.gif); }
		}
		li.game {
			width: 78px; background-image: url(../img/layout/buttons/button-game-n-78.gif);
		
			a 		{ width: 78px; }
			.hover 	{ background-image: url(../img/layout/buttons/button-game-h-78.gif); }
			.active { background-image: url(../img/layout/buttons/button-game-a-78.gif); }
		}
					
		li.active {
			//background: #262626 !important;
			color: #fff;
			cursor: default;
		}
		li.active a:hover {
			//background-color: #262626;
			color: #fff;
		}
		
	}
	
}

#menu_top
{
	border-bottom: 3px solid #c3c3c3;
	height: @menu-height - 10px;
	//_height: @menu-height - 20px;
	
	.active .arrow {
		display: block !important;
		width: auto;
		position: relative;
		top: 39px;
		margin-bottom: -11px;
		height: 11px;
		background-image: url(../img/layout/menu-arrow.gif);
		background-position: center;
		background-repeat: no-repeat;
						
		// for internet explorer
	//	_top: @menu-height;
	//	_position: absolute;
		_display: none;
	}
}

#menu_bottom
{
	border-top: 3px solid #c3c3c3;
	position: relative;	
	
	ul {
		padding-top: 10px;
	}
	
	.active .arrow {
		display: block !important;
		position: relative;
		top: -10px;
		width: auto;
		margin-top: -11px;
		height: 11px;
		background-image: url(../img/layout/menu-arrow-up.gif);
		background-position: center;
		background-repeat: no-repeat;
		
		_display: none;
	}
	
	iframe{
		position: absolute;
		right: @margin;
		top: 14px;
	}
	
}