@font-face {
	font-family: 'Legion';
	src: url('../Legionv3.ttf') format('truetype');
}

.login, .phaseMap, .stage {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}	

.login {
	visibility: hidden;
	background-color: black;
	z-index: 10;
}

.loginText, .pinText, .usernameInputText, .emailInputText {
	font-family: Tahoma;
	font-size: 30px;
	text-align: left;
}

.pinText {
	font-size: 54px !important;
}

.pinInputText {
	font-family: Tahoma;
	font-size: 54px;
	text-align: left;
}

.welcomeText, .usernameText, .emailText, .pinText {
	color: white;
	letter-spacing: 2px;
}

.welcomeText {
	margin: 175px 0 0 50px;	
}

.usernameText {
	margin: 25px 0 10px 150px;
}

.emailText {
	margin: 0 0 0 218px;
}

.usernameInputText, .emailInputText, .pinInputText {
	color: #333333;
}

.usernameInputText {
	width: 300px;
}
.emailInputText {
	width: 450px;
}

.pinInputText {
	font-family: Legion;
	width: 485px;
	font-size: 110px;
	text-align: center;
	background-color: white;
}

.redFlash {
	animation: flashAnimation 1.5s !important;
}

.progressBarRedFlash {
	animation: progressBarFlashAnimation 1.5s !important;
}

@keyframes flashAnimation {
	0% {
		background-color: white;
	}
	25% {
		background-color: #FF6666;
	}
	50% {
		background-color: white;
	}
	75% {
		background-color: #FF6666;
	}
	100% {
		background-color: white;
	}
}

@keyframes progressBarFlashAnimation {
	0% {
		background-color: #666666;
	}
	25% {
		background-color: #FF6666;
	}
	50% {
		background-color: #666666;
	}
	75% {
		background-color: #FF6666;
	}
	100% {
		background-color: #666666;
	}
}

.loginArrow, .pinArrow, .backArrow, .passwordBarArrow {
	position: absolute;
	color: #999;
	font-family: Tahoma;
	font-size: 62px;
	cursor: pointer;
}

.loginArrow {
	top: 284px;
	left: 800px;
}

.pinArrow {
	top: 63px;
	left: 500px;
}

#pinForm {
	position: absolute;
	visibility: hidden;
	top: 235px;
	left: 237px;
}

.forgotPINText {
	visibility: hidden;
	position: absolute;
	left: 583px;
	font-family: Tahoma;
	font-size: 20px;
	color: #999;
}

.fade-in {
	opacity: 0;
	transition: opacity 0.5s;
}

.fade-out {
	opacity: 1;
	transition: opacity 0.5s;
}

.fade-in-slow {
	opacity: 0;
	transition: opacity 3s;
}

.fade-out-slow {
	opacity: 1;
	transition: opacity 3s;
}

.fade-in.show, .fade-in-slow.show {
	opacity: 1;
}

.fade-out.hide, .fade-out-slow.hide {
	opacity: 0;
}

.phaseIntro {
	visibility: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 21;
	background-color: black;
}

.phaseIntroText {
	visibility: hidden;
	z-index: 3;
	position: absolute;
	top: 233px;
	left: 205px;
}

.waveGIF {
	z-index: 2;
	position: absolute;
	top: 0px;
	left: 0px;
}

.flatlineGIF {
	/*visibility: hidden;*/
	z-index: 1;
	position: absolute;
	top: 0px;
	left: 0px;
}

.phaseMap {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 15;
	background-color: black;
}

.phaseGroup {
	position: absolute;
}

.phase1Group {
	top: 10px;
	left: 50px;
}

.phase2Group {
	top: 170px;
	left: 100px;
}

.phase3Group {
	top: 330px;
	left: 150px;
}

.phase4Group {
	top: 50px;
	left: 300px;
}

.phase5Group {
	top: 210px;
	left: 350px;
}

.phase6Group {
	visibility: hidden;
	top: 50px;
	left: 600px;
}

.phase7Group {
	visibility: hidden;
	top: 210px;
	left: 650px;
}

.phaseMapHeader {
	font-family: Legion;
	font-size: 44px;
	text-align: left;
	color: #666;
	margin: 25px 0 0 0;
}

.stageName {
	font-family: Tahoma;
	text-size: 32px;
	text-align: left;
	color: #666;
	margin: 3px 0 0 30px;
	cursor: default;
}

.stage {
	/* visibility: hidden; */
	position: absolute;
	top: 541px;
	left: 0;
	background-color: black;
	z-index: 20;
}

.stageHide {
	display: none;
}

.stageNum {
	position: absolute;
	top: -32px;
	right: -4px;
	color: #333;
	font-family: Legion;
	font-size: 144px;
	text-align: right;
}

.stageText {
	position: absolute;
	top: 85px;
	right: 0px;
	color: #333;
	font-family: Tahoma;
	font-size: 32px;
	text-align: right;
}
	

#progressBarBG {
	position: absolute;
	top: 300px;
	left: 180px;
	width: 600px;
	height: 3px;
	background-color: #666666;
}

.progressBar {
	z-index: 4;
	position: absolute;
	top: 300px;
	left: 180px;
	width: 0px;
	height: 3px;
	background-color: #CCCCCC;
}

.stagePlayButton, .stageDownloadButton, .stagePauseButton, .stageHintButton {
	position: absolute;
	cursor: pointer;
}
.stagePlayButton, .stageDownloadButton, .stagePauseButton {
	width: 50px;
	height: 50px;
}

.stageHintButton {
	width: 30px;
	height: 30px;
}

.stagePlayButton img, .stageDownloadButton img, .stagePauseButton img {
	width: 50px;
	height: 50px;
}

.stageHintButton img {
	width: 30px;
	height: 30px;
}

.stageHintButtonHovered {
	content: url('../images/button_play_active.png');
}

.stagePlayButton {
	z-index: 22;
	top: 245px;
	left: 675px;
}

.stagePauseButton {
	z-index: 23;
	visibility: hidden;
	top: 245px;
	left: 675px;
}

.stageDownloadButton {
	top: 245px;
	left: 730px;
}

.stageHintButton {
	top: 308px;
	left: 180px;
}

.stagePlayButton img, .stageDownloadButton img {
	width: 50px;
	height: 50px;
}

.backArrow {
	top: -5px;
	left: 15px;
}

.passwordBarArrow {
    top: 460px;
	left: 900px;
}

.stage62Warning {
	visibility: hidden;
	position: absolute;
	z-index: 50;
	top: 220px;
	left: 165px;
	width: 600px;
	height: auto;	
	font-family: Tahoma;
	color: #ccc;
	background-color: #333;
	text-align: left;
	padding: 10px 15px 15px 15px;
}

.stage62WarningCloseButton {
	font-weight: bold;
	color: #777;
	float: right;
	cursor: pointer;
}