@font-face {
	font-family: 'Mathlete';
	src: url('../../css/Mathlete-Skinny.otf');
}

body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
    
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */

    /* No support for these yet, use at own risk */
    -o-user-select: none;
    user-select: none;    

}

#DEBUG_STATS{
	display: none;
}

#canvas{
	-webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.ui_button{
	width: 30px;
	height: 30px;
	position: absolute;
	bottom:5px;

	cursor: pointer;

	opacity: 0.5;
	-webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;

}
.ui_button > div{
	
	position: absolute;
	top:-15px;

	color: #fff;
	font-family: sans-serif;
	font-size: 10px;
	text-align: center;

	width: 100%;
	display: none;

}
.ui_button:hover{
	opacity: 1;
}
.ui_button:hover > div{
	display: block;
}

#modal{
	position: absolute;
	top:0; left:0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
}
#modal > div{
	position: absolute;
	margin:auto;
	top:0; left:0; bottom:0; right:0;

	width:600px;
	height:130px;
	color: #fff;
	font-size: 44px;
	font-family: Mathlete;
}
#modal > div > input{
	width: 100%;
	border: none;
	padding: 5px;
	margin: 5px 0;
}
#modal > div > div{
	width: 80px;
	height: 42px;
	border-radius: 10px;
	background: #333;
	font-size: 35px;
	text-align: center;
	color: #888;
	line-height: 35px;
	margin-top: 5px;
	float: right;
	cursor: pointer;
}
#modal > div > div:hover{
	background: #555;
	color:#aaa;
}