body { background-color: #003;}
:-moz-full-screen {background: #003;}
:-webkit-full-screen {background: #003;}
:fullscreen {background: #003;}
@keyframes slideUpAnimation
{
      0%  {margin-top: 0px;}
     20%  {margin-top: -10px;}
     50%  {margin-top: -20px;}
     80%  {margin-top: -30px;}
    100%  {margin-top: -30px;}
}
@-webkit-keyframes slideUpAnimation
{
      0%  {margin-top: 0px}
     20%  {margin-top: -10px;}
     50%  {margin-top: -20px;}
     80%  {margin-top: -30px;}
    100%  {margin-top: -30px;}
}
@keyframes rotateAnimation
{
      0%  {transform: rotate(0deg);opacity:0;}
     20%  {opacity:1;}
     90%  {transform: rotate(-89deg);}
    100%  {transform: rotate(-90deg);}
}
@-webkit-keyframes rotateAnimation
{
      0%  {-webkit-transform: rotate(0deg);opacity:0;}
     20%  {opacity:1;}
     90%  {-webkit-transform: rotate(-89deg);}
    100%  {-webkit-transform: rotate(-90deg);}
}
.slideUpAnim
{
	animation: slideUpAnimation ease-in 2s infinite;
	-webkit-animation: slideUpAnimation ease-in 2s infinite;
}
.rotateAnim
{
	animation: rotateAnimation ease-in 2s infinite;
	-webkit-animation: rotateAnimation ease-in 2s infinite;
}
#gameArea 
{
	position: fixed;
	left:     50%;
	top:      50%;
	-ms-touch-action: none;
}
#slideUpOverlay
{
	position: fixed;
	left:     0px;
	top:      0px;
	width: 100%;
	height: 1000px;
	background-color: rgba(0,0,0,0.5);
	display: none;
}
#slideUp
{
	position: fixed;
	left:     20%;
	top:      20%;
	width: 60%;
	height: 60%;
	background-image: url('../basic/images/800_600/slideup.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	
}
#rotateOverlay
{
	position: fixed;
	left:     0px;
	top:      0px;
	width: 100%;
	height: 1000px;
	background-color: rgb(0,0,0);
	display: none;
}
#rotatePanel
{
	position: fixed;
	left:     50%;
	top:      50%;
	width: 500px;
	height: 700px;
	margin-left: -250px;
	margin-top: -350px;
}
#rotate
{
	position: relative;
	left:     10%;
	top:      10%;
	width: 80%;
	height: 80%;
	background-image: url('../basic/images/800_600/rotatedevice.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;	
}
#rotateInfo
{
	position: relative;
	width: 100%;
	height: 30px;
	color: #fff;
	font: bold 24px verdana;
	text-align: center;
	margin-top: 25%;
}
canvas { position: absolute;}