@charset "ISO-8859-1";

*{
	padding: 0;
	margin: 0;
	border: 0;
	//cursor:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
@font-face {
    //font-family: Gotham;
    //src:url(../../../fonts/Gotham-Medium.otf);
}
html, body{
	background-color:#333;
	//cursor:pointer;
	overflow:hidden;
	width:100%;
	height:100%;
	//font-family:Gotham, Arial, sans-serif;
	font-family:Arial, sans-serif;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	position:fixed;
	top:0px;
	left:0px;
}
::selection {
	background: transparent;
}
::-moz-selection {
	background: transparent;	
}
#mainContainer{
	position:absolute;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	background-color:#EEE;
	overflow:scroll;
	//-webkit-overflow-scrolling: touch;// /*<-- momentum based... non standard*/
}
#imageContainer{
	position:absolute;
	top:0px;
	left:0px;
	//top:50%;
	//left:50%;
	height:500px;
	//margin-top:-250px;
	//margin:10px 0px 0px 10px;
	background-image:url(eye_front.png);
	background-repeat:no-repeat;
	background-size:contain;
	//background-position:center;
	//background-color:#555;
	background-color:#FFF;
}
#log{
	position:absolute;
	bottom:0px;
	left:0px;
	width:200px;
	height:100px;
	padding:10px;
	box-sizing:border-box;
	color:#FFF;
	background-color:#000;
	//opacity:0.5;
	display:none;
	z-index:10000;
}
.bt{
	border:2px #666 solid;
	box-sizing:border-box;
	z-index:2002;
	height:44px;
	width:44px;
	bottom:40px;
}
#zoomIn{
	position:fixed;
	right:40px;
	text-align:center;
	font-size:36px;
	background-color:#FFF;
	border-radius:7px;
	cursor:pointer;
}
#zoomOut{
	position:fixed;
	right:90px;
	text-align:center;
	font-size:36px;
	background-color:#FFF;
	border-radius:7px;
	cursor:pointer;
}
#zoomNum{
	position:fixed;
	right:140px;
	width:80px;
	text-align:center;
	font-size:20px;
	padding-top:9px;
	box-sizing:border-box;
	border:none;
	background-color:#EEE;
	border-radius:7px;
	cursor:pointer;
}
#markerToggle{
	position:fixed;
	left:90px;
	text-align:center;
	font-size:36px;
	background-color:#FFF;
	padding:7px;
	box-sizing:border-box;
	border-radius:7px;
	cursor:pointer;
	//display:none;
}
#markerToggleIcon{
	width:24px;
	height:24px;
	background-image:url(pin.svg);
	background-repeat:no-repeat;
	background-size:contain;
}
#homeButton{
	position:fixed;
	left:40px;
	text-align:center;
	font-size:36px;
	background-color:#FFF;
	padding:7px;
	box-sizing:border-box;
	border-radius:7px;
	cursor:pointer;
	//display:none;
}
#homeButtonIcon{
	width:24px;
	height:24px;
	background-image:url(home.svg);
	background-repeat:no-repeat;
	background-size:contain;
}
.marker{
	position:absolute;
	top:0px;
	left:0px;
	width:25px;
	height:25px;
	border:4px solid #000;
	box-sizing:border-box;
	border-radius:25px;
	background-color:#FFF;
	//background-image:url(marker.svg);
	//background-repeat:no-repeat;
	//background-size:contain;
	//cursor:pointer;
	z-index:2001;
}

/*
.label{
	position:absolute;
	left:28px;
	top:-2px;
	//width:200px;
	font-size:24px;
	padding:5px 10px 5px 10px;
	background-color:#FFF;
	border-radius:5px;
	//opacity:0.8;
	z-index:1000;
	border:1px solid #CCC;
}
*/

.label{
	position:absolute;
	top:-4px;
	left:23px;
	width:280px;
	text-align:center;
	font-size:20px;
	line-height:20px;
	font-weight:bold;
	padding-top:6px;
	padding-bottom:9px;
	box-sizing:border-box;
	border:3px solid #000;
	background-color:#FFF;
	border-radius:7px;
	transform-origin:0% 0%;
	-moz-transform-origin:0% 0%;
	-webkit-transform-origin:0% 0%;
	-o-transform-origin:0% 0%;
}


/*
// better label
.label{
	position:absolute;
	left:-5px;
	//width:200px;
	padding:5px 10px 5px 30px;
	background-color:#FFF;
	border-radius:20px;
	opacity:0.8;
	z-index:1000;
}
*/
#lineContainer{
	width:100%;
	height:100%;
	//background-color:#FC0;
}
.line{
	position:absolute;
	height:4px;
	width:200px;
	background-color:#000;
	transform-origin:0% 0%;
	-moz-transform-origin:0% 0%;
	-webkit-transform-origin:0% 0%;
	-o-transform-origin:0% 0%;
}
.arrow{
	position:absolute;
	left:-8px;
	top:70px;
	width:20px;
	height:20px;
	background-image:url(arrow.svg);
	background-repeat:no-repeat;
	background-size:contain;
	display:none;
}
.shape{
	position:absolute;
	//background-image:url(shape1.svg);
	background-repeat:no-repeat;
	background-size:contain;
	z-index:500;
	display:none;
}
#term{
	position:absolute;
	top:30px;
	left:40px;
	//height:40px;
	width:280px;
	text-align:center;
	font-size:20px;
	line-height:20px;
	font-weight:bold;
	padding-top:6px;
	padding-bottom:9px;
	box-sizing:border-box;
	//border:3px solid #FC0;
	border:3px solid #000;
	background-color:#FF0;
	border-radius:7px;
	cursor:pointer;
}
#termBG{
	position:absolute;
	top:30px;
	left:40px;
	height:40px;
	width:280px;
	background-color:#DDD;
	border-radius:7px;
}
#termPointer{
	position:absolute;
	top:-12px;
	left:-11px;
	height:25px;
	width:25px;
	//background-color:#FC0;
	background-image:url(termPoint.svg);
	background-repeat:no-repeat;
	background-size:contain;
	//display:none;
}
#score{
	position:fixed;
	top:33px;
	right:120px;
	width:70px;
	text-align:center;
	font-size:45px;
	font-weight:bold;
	//background-color:#0F0;
	z-index:7000;
	display:none;
}
#timer{
	position:fixed;
	top:20px;
	right:35px;
	height:70px;
	width:70px;
	background-image:url(timerBG.svg);
	background-repeat:no-repeat;
	background-size:contain;
	//background-color:#0FF;
	z-index:7000;
	display:none;
}
.slice{
	position:absolute;
	top:6.5px;
	left:35px;
	width:9px;
	height:30px;
	background-image:url(sliver.svg);
	background-repeat:no-repeat;
	background-size:contain;
	//background-color:#00F;
}
.btTitle{
	position:fixed;
	top:11px;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	cursor:pointer;
}
#termContainer{
	position:fixed;
	top:0px;
	left:0px;
	z-index:3000;
	display:none;
}
#termTitle{
	left:40px;
}
#scoreTitle{
	position:fixed;
	top:20px;
	right:133px;
	font-size:12px;
	font-weight:bold;
	cursor:pointer;
	display:none;
}
#timerTitle{
	right:63px;
}
#testPoint{
	position:absolute;
	width:20px;
	height:20px;
	background-color:#F00;
	display:none;
}
#coverAll{
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background-color:#00F;
	z-index:5000;
	opacity:0.0;
	display:none;
}
#scoreAnimation{
	position:absolute;
	display:none;
}
#star{
	position:absolute;
	height:140px;
	width:140px;
	background-image:url(termStarCorrect.svg);
	background-repeat:no-repeat;
	background-size:contain;
	z-index:4000;
}
#starNum{
	position:absolute;
	top:40px;
	left:34px;
	height:70px;
	width:70px;
	text-align:center;
	font-size:50px;
	font-weight:bold;
	color:#FFF;
	//background-color:#000;
	z-index:4001;
}
#coverAllComplete{
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background-color:#EEE;
	z-index:5000;
	opacity:1;
	display:none;
}
#endScreen{
	position:absolute;
	top:50%;
	left:50%;
	width:500px;
	height:520px;
	margin:-300px 0px 0px -250px;
	padding-top:30px;
	z-index:5002;
	//background-color:#FFF;
	border-radius:40px;
	display:none;
}
.endColumn{
	float:left;
	width:250px;
	height:240px;
}
#endColumnZ{
	width:20px;
}
#endColumn0{
	
}
#endColumn05{
	width:35px;
}
#endColumn1{
	width:160px;
}
.endBlock{
	width:100%;
}
#endBlock0{
	height:240px;
}
#endBlock1{
	text-align:center;
	font-size:175px;
	font-weight:bold;
	height:210px;
	//display:none;
}
.endRow{
	height:80px;
	width:100%;
}
.endLabel{
	float:left;
	width:150px;
	height:100%;
	font-size:24px;
	font-weight:bold;
	color:#000;
	text-align:right;
	padding-top:22px;
	box-sizing:border-box;
	//display:none;
}
.endLabelScore{
	float:right;
	width:80px;
	height:100%;
	font-size:60px;
	font-weight:bold;
	color:#000;
	text-align:right;
	box-sizing:border-box;
	//display:none;
}
.fraction{
	padding:0px 0px 10px 0px;
	height:105px;
	font-weight:bold;
	font-size:100px;
	text-align:center;
	//display:none;
}
#fractionTop{
	margin-top:-9px;
	
}
#fractionBottom{
	
}
.fractionLine{
	height:15px;
	width:100%;
	background-color:#000;
	//display:none;
}
.bc{
	//background-color:#F60;
	//border:1px solid #000;
	//box-sizing:border-box;
}
.gameEndBT{
	position:absolute;
	bottom:0px;
	left:50%;
	height:70px;
	width:230px;
	text-align:center;
	font-size:30px;
	padding-top:12px;
	//margin-left:-115px;
	box-sizing:border-box;
	border:2px #666 solid;
	background-color:#CCC;
	border-radius:15px;
	cursor:pointer;
	//display:none;
}
.gameEndBT:hover{
	background-color:#FFF;
	//zoom: 1.05;
    //-moz-transform: scale(1.05);
}
#tryAgain{
	margin-left:10px;
	display:none;
}
#seeAnswers{
	margin-left:-240px;
	display:none;
}
#winStar{
	position:absolute;
	bottom:50%;
	left:50%;
	width:210px;
	height:200px;
	margin:0px 0px -150px -105px;
	background-image:url(winStar.svg);
	background-repeat:no-repeat;
	background-size:contain;
	z-index:5001;
	zoom: 0.5;
    -moz-transform: scale(0.5);
	display:none;
}
#instructionsBG{
	position:absolute;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	background-color:#EEE;
	z-index:10000;
	opacity:1;
}
#instructionsContainer{
	position:absolute;
	top:50%;
	left:50%;
	width:500px;
	height:500px;
	margin:-270px 0px 0px -250px;
	//background-color:#FFF;
	//border:1px solid #777;
	border-radius:5px;
	z-index:10001;
}
#modeMenuThumb{
	position:absolute;
	top:100px;
	left:50%;
	height:294px;
	width:470px;
	margin-left:-235px;
	border:2px solid #666;
	//background-image:url(images/thumb1.png);
	background-repeat:no-repeat;
	background-size:contain;
	border-radius:10px;
}
#modeMenuTitle{
	position:absolute;
	bottom:430px;
	left:50%;
	min-height:30px;
	width:470px;
	margin-left:-235px;
	font-size:36px;
	text-align:center;
	font-weight:bold;
	//background-color:#FFF;
}
.instructionText{
	float:left;
	height:70px;
	width:385px;
	margin-left:10px;
	margin-top:15px;
	padding-top:5px;
	box-sizing:border-box;
	font-size:18px;
	//background-color:#FF0;
}
.instructionImgContainer{
	float:left;
	height:70px;
	width:70px;
	margin-top:15px;
	margin-left:15px;
	//background-color:#FF0;
}
.instructionImgContainer2{
	float:left;
	height:50px;
	width:230px;
	margin-top:15px;
	margin-left:150px;
	background-image:url(../../instructionsIcon_termPointer.svg);
	background-repeat:no-repeat;
	background-size:contain;
	//background-color:#F00;
}
.instructionImg{
	height:40px;
	width:40px;
	margin:10px 0px 0px 15px;
	background-repeat:no-repeat;
	background-size:contain;
}
#instructionImg1{
	background-image:url(../../instructionsIcon_termPointer.svg);
}
#instructionText1{
	padding-left:15px;
	width:470px;
}
#instructionImg2{
	background-image:url(../../instructionsIcon_zoom.svg);
	width:55px;
	margin-left:7px;
}
#instructionImg3{
	//background-image:url(../../instructionsIcon_markerToggle.svg);
}
#studyButton{
	margin-left:-236px;
}
#gameButton{
	margin-left:8px;
}