/*@font-face {
    font-family: 'FSAlbertProLight';
    src: url('fonts/fs_albert_pro-light.eot');
    src: url('fonts/fs_albert_pro-light.eot?#iefix') format('embedded-opentype'),
         url('fonts/fs_albert_pro-light.woff') format('woff'),
         url('fonts/fs_albert_pro-light.ttf') format('truetype'),
         url('fonts/fs_albert_pro-light.svg#FSAlbertProLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FSAlbertProThin';
    src: url('fonts/fs_albert_pro-thin.eot');
    src: url('fonts/fs_albert_pro-thin.eot?#iefix') format('embedded-opentype'),
         url('fonts/fs_albert_pro-thin.woff') format('woff'),
         url('fonts/fs_albert_pro-thin.ttf') format('truetype'),
         url('fonts/fs_albert_pro-thin.svg#FSAlbertProThin') format('svg');
    font-weight: normal;
    font-style: normal;
}*/


.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

/* ie mac fix */
.clearfix {
	display: inline-table;
}
* html .clearfix {
	/* nomac \*/height: 1%;/* nomac */
}
.clearfix {
	display: block;
}

#hub {
	position: relative;
	width: 820px;
	font-family: 'FSAlbertProLight', Arial, Helvetica, sans-serif;
	background: #000;
	border: 1px #555555 solid;
	color: #333333;
	font-size: 14px;
}
	
	#hub a {
		cursor: pointer;
		outline: none;
		text-decoration: none;
	}

		#hub a img {
			border: 0;	
		}
	
	#hub h1,
	#hub h2,
	#hub h3,
	#hub h4 {
		margin: 10px 0;
		padding: 0;
		line-height: normal;
		font-weight: normal !important;
	}	

	#hub h1 {
		font-size: 30px;
	}
	
	#hub h2 {
		font-size: 22px;
	}
	
	#hub h3 {
		font-size: 18px;
	}
	
	#hub p {
		font-size: 14px;
		margin: 5px 0;
		padding: 0;
	}
	
	#hub .red {
		color: #C00;
	}
	
	#hub a.red:hover {
		color: #900;
	}
	
	#hub .animate-nav-btn {
		font-weight: bold;
	}
		
	#hub .white {
		color: #FFF;
	}
	
	#hub a.white:hover {
		color: #CCC;
	}
		
	#hub object {
		outline: none;
	}
	
	#hub > .playBtn {
		background: url(/images/discover/play_btn.png) no-repeat;
		left: 50%;
		position: absolute;
		top: 50%;
		height: 41px;
		width: 333px;
		margin-left: -165px;
		margin-top: -20px;
		z-index: 200;
	}
	
			
#hub > .sections {
	height: 460px;
	overflow: hidden;
	position: relative;
	overflow: hidden;
}

	#hub > .sections .section {
		position: absolute;
		width: 100%;
		height: 100%;
		display: none;
		top: 0;
		left: 0;
	}
	
	#hub > .sections .section.intro {
		background: #000000 url(/images/discover/navigation_bg.jpg) no-repeat -9999px -9999px;
		display: block;
	}
		
	#hub > .sections .section.video {
		z-index: 100;
	}
	
		#hub > .sections .section video,
		#hub > .sections .section .flash {
			width: 820px;
			height: 460px;
			position: absolute;
			top: 0;
			left: 0;
		}
		
		#hub > .sections .section > .preloader {
			left: 50%;
			position: absolute;
			top: 50%;
			width: 50px;
			margin-left: -25px;
			margin-top: -25px;
			z-index: 100;
			display: none;
		}
		
			#hub > .sections .section > .preloader .loader-text {
				display: none;
				text-align: center;
				margin: 10px 0 0 0;
				color: #CC0000;	
			}
		
	#hub > .sections .section.navigation {
		background: url(/images/discover/navigation_bg.jpg) no-repeat left top;
		z-index: 0;
		display: block;
	}
	
		#hub > .sections .section.navigation .navigation-text {
			position: absolute;
			top: 20px;
			left: 50px;
			width: 300px ;
		}
			
			#hub > .sections .section.navigation .navigation-text .content {
				font-family: 'FSAlbertProThin', Arial, Helvetica, sans-serif;		
				background:none;
			}
			
		#hub > .sections .section.navigation .replay-btn {
			width: 38px;
			height: 33px;
			display: block;
			position: absolute;
			top: 30px;
			right: 30px;
			background: url(/images/discover/replay_btn.png) no-repeat left top;
		}
		
		#hub > .sections .section.navigation .replay-btn:hover {
			background-position: left bottom;
		} 
		
		#hub .sections-navigation {
			list-style: none;
			width: 100%;
			margin: 0;
			padding: 0;
		}
		
		
		#hub .sections-navigation li {
			list-style: none;
			position: absolute;
		}
			
			#hub .sections-navigation li a {
				display: block;
				position: relative;
				height: 100%;
				width: 100%;
				z-index: 10;
				cursor: pointer;
			}
			
				#hub .sections-navigation li.hover a,
				#hub .sections-navigation li.current a {
					
				}
				
				#hub .sections-navigation li a .out,
				#hub .sections-navigation li a .over {
					position: absolute;
					top: 0;
					width: 100%;
					height: 100%;
				}
				
				#hub .sections-navigation li a .over {
					display: none;
				}
				
			#hub .sections-navigation li .ring {
				position: absolute;
				bottom: 0;
				left: 50%;
				display: none;
				width: 10%;
				z-index: 0;
			}
			
			#hub .sections-navigation li .tooltip {
				position: absolute;
				top: -40px;
				z-index: 0;
				display: none;
			}
			
	#hub > .sections .section.info {
		z-index: 200;
		background:none;
		border:none;
		color:inherit;		
	}
		
		#hub > .sections .section.info .info-box {
			position: absolute;
			background: #FFF;
			background: rgba(255, 255, 255, 0.9);
			width: 325px;
			height: 95px;
			top: 50%;
			left: 50%;
			margin: -48px 0 0 -162px;
			z-index: 100;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			-moz-box-shadow: 0 0 8px 0px #999;
			-webkit-box-shadow: 0 0 8px 0px #999;
			box-shadow: 0 0 8px 0px #999;
		}
		
			#hub > .sections .section.info .info-box .close-btn {
				background:url(/images/discover/close_btn.png) no-repeat left top;
				width: 29px;
				height: 29px;
				display: block;
				position: absolute;
				top: -10px;
				right: -10px;
			}
				
				#hub > .sections .section.info .info-box .close-btn:hover {
					background-position: left bottom;
				}
				
				#hub > .sections .section.info .info-box .inner {
					padding: 2px 10px ;
					margin: 0;
					background: none !important;
				}
				
				#hub > .sections .section.info .info-box h1,
				#hub > .sections .section.info .info-box h2,
				#hub > .sections .section.info .info-box h3,
				#hub > .sections .section.info .info-box h4,
				#hub > .sections .section.info .info-box p {
					margin: 6px 0;
				}
				
				#hub > .sections .section.info .info-box .content {
					color: #666666;
					font-size: 12px;
				}
		
		#hub > .sections .section.info .underlay {
			width: 100%;
			height: 100%;
			position: absolute;
			cursor: default;
			background: rgba(255, 255, 255, 0.2);
		}
		
	
	#hub > .footer {
		color: #FFFFFF;
	}
		
		#hub > .footer h1,
		#hub > .footer h2,
		#hub > .footer h3,	
		#hub > .footer p {
			margin: 1px 0;
		}
		
		#hub > .footer .inner {
			padding: 10px 30px 8px 50px !important;
			margin: 0 !important;
			background: #000 !important;
		}
		
		#hub > .footer .left {
			width: 580px;
			float: left;
		}
		
		#hub > .footer .right {
			width: 140px;
			text-align: right;
			float: right;
		}
		
		#hub > .footer .navigation-btn {
			vertical-align: text-bottom;
			width: 25px;
			height: 40px;
			background: url(/images/discover/navigation_btn.png) no-repeat left top;
			display: block;
			float: left;
			margin: 3px 0 0 0;
		}
			#hub > .footer .navigation-btn:hover {
				background-position: left bottom;
			}
		
		#hub > .footer .content {
			float: left;
			display: block;
			margin: 0 0 0 10px;
			padding:0;
			background:none;
		}
		
		#hub > .footer .info-btn {
			width: 36px;
			height: 38px;
			background: url(/images/discover/info_btn.png) no-repeat left top;
			display: inline-block;
			margin: 8px 0 0 0;
		}
			#hub > .footer .info-btn:hover {
				background-position: left bottom;
			}