body{
	background-color: #111;
	/*background-image:url(images/stone-back-tile.jpg); background-repeat:repeat; background-position: top left;*/
}
#StartText{ display:none;}
#helpbutton{position: absolute; top: 10px; right:10px; z-index:7; padding: 5px 5px 5px 5px;}
#helpbox{position: absolute; top: 0px; right:0px; width:220px; height: 270px; z-index:6; padding: 5px 5px 5px 5px; background-color:#FFF; }
#StartButton{
	clear: both;
	width: 700px;
	height: 380px;
	text-align:center;
	position:absolute;
	top: 50px;
	left: 100px;
	float:right;
	padding:20px 0px 0px 0px;
	z-index:11;
}
#StartWhiteBack{
	clear: both;
	width: 100%;
	height: 100%;
	text-align:center;
	position:absolute;
	top: 0px;
	left: 0px;
	float:right;
	padding:0px 0px 0px 0px;
	z-index:10;
	background-color: #000;
	opacity:0.7;
	border-radius:10px;
}
#GameBackground{
	position: relative;
transform-origin: 0 0;
width:300%;
height:2000px;
}
#StartBackground{
	position: absolute;
	top: 0px;
	left: 0px;
transform-origin: 0 0;
z-index:7;
width:100%;
height:100%;
background-image:url(images/mayan_title-back.png); background-repeat:no-repeat; background-position: top left;
}
#GameContent{
	clear: both;
	text-align:center;
	position:relative;
	/*height:500px;width:900px;
	max-width: 680px;*/
	width: 100%;
	height: 100%;
	color:#000;
	padding: 0px 0px 0px 0px;

	
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size:16px;
}
#GameFrameBack{
	width: 900px;
	height: 510px;
	position:absolute;
	top: 0px;
	left: 0px;
z-index:4;
pointer-events: none;
/*background-image:url(images/stone-back-tile.jpg); background-repeat:no-repeat; background-position: top left;*/
}
#Game{
clear: both;
	width: 100%; height:100%;
	text-align:center;
	position:relative;	
	
	z-index:9;background-image:url(images/game-frame.png);background-repeat:no-repeat; background-position: top left;	
}
#GameFrame{
clear: both;
	width: 100%; height:100%;
	top: 0px;
	left: 0px;
	text-align:center;
	position:relative;	
	pointer-events: none;
	z-index:6;background-image:url(images/game-frame.png);background-repeat:no-repeat; background-position: top left;	
}

/*#StartBackground{
	clear: both;
	text-align:center;
	position:relative;
	background-image:url(images/mayan_title-back.png);
	min-height:370px;
	max-width: 650px;
	background-position:bottom;
	background-repeat:no-repeat;
	background-color: #B05CB1;
	border:#360 4px solid;
	border-radius: 15px;
	color:#FFF;
	padding: 0px 0px 0px 0px;
	overflow:hidden;
	min-width:280px;
}
#StartBackground a{color:#FFF;font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size:14px;}
#StartBackground p{font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size:14px; color:#FFF;}
*/

#gameresults{
	text-align:center;
	padding: 20px 20px 20px 20px;
	position:absolute;
width: 660px;
	height: 360px;
	text-align:center;
	position:absolute;
	top: 50px;
	left: 100px;
	 z-index:50;
	 display:none;
	 /*background-image:url(images/mayan_title-back.png);*/
}

.letterholder{border:#666 1px solid; width: 20px; height: 25px; float: left; color:#FFF; margin:2px; font-size:22px; padding:5px 0px 0px 0px; background-color:#FFF; z-index:10;}

@media screen and (max-width: 600px) and (orientation:portrait)
{
.keyboard{width:23px; height:26px;}
.letterholder{width: 15px; height: 20px; font-size:18px; padding:4px 0px 0px 0px;}
#StartButton{width:90%;}
#witchstart{ display:none;}
}

@keyframes moveup {
	0%  { transform: translateY(0px);}
    100%  {transform: translateY(-40px);}	
}
@keyframes movedown {
	0%  { transform: translateY(0px);}
    100%  {transform: translateY(40px);}	
}

.flash {
	filter: brightness(100%);
  /*animation: flash 15s ease-out;*/
}
@keyframes flash {
    0% { filter: brightness(100%); }
	50% { filter: brightness(100%); }
    100% { filter: brightness(70%); }
}
.codebutton {
 
}
a:hover .codebutton {
  transform: rotate(45deg);
}
a:active .codebutton {
  transform: rotate(180deg);
}
h3{color:#fff;}