body {
  margin: 0px;
  padding: 0px;
  text-align: center;
  background: #333;
  font-family: sans-serif;
  font-size: 2em;
  overflow: hidden;
  }
  
  
 .frame {
 background:#FFF;
 padding:20px;
 position: absolute;
 border: solid 5px #000;
 border-radius: 20px;
 opacity: .6;
 }
 
 #helptext {
 right:-50%;
 max-width:25%;
 display: block;
 font-size: 60%;
 transition: right 1s;
 -webkit-transition: right 1s;
  }
 
 #helptext.showhelp
 {
    right:0;
 }

 #levelindicator {
 left:-45%;
 max-width:25%;
 display: block;
 transition: left 1s;
 -webkit-transition: left 1s; 
 }

 body.inplay #levelindicator {
 left: 0;
 }
 
 
 #startboard {
 margin:auto;
 left:0;
 right: 0;
 top:20%;
 width: 10em;
 max-width:80%;
 max-height: 40%;
 transition: top 1s;
 -webkit-transition: top 1s; 
 }
 
 body.inplay #startboard
 {
   top: -60%
 }
 
 body.gameover #startboard
 {
   top: -60%
 }
 
 #endboard {
 margin:auto;
 left:0;
 right: 0;
 top:-70%;
 width: 10em;
 max-width:80%;
 max-height: 40%;
 transition: top 1s;
 -webkit-transition: top 1s; 
 
 }
 
 body.gameover #endboard
 {
 top:20%;
 }
 
 .frame a {
   border: solid 3px #000;
   text-decoration: none;
   color: #000;
   display: block;
   margin: 1em;
 }
 
 #controlbar {
   padding: 5px;
   height: 110px;
   bottom: -300px;
   width:100%;
   left: 0;
   position: absolute;
   transition: bottom 1s;
   -webkit-transition: bottom 1s; 
 }
 
 body.inplay #controlbar
 {
   bottom: 2%;
 }
 
 canvas.main {
  background: #DDD;
  width:100%;
  height:100%;
  margin-left: auto;
  }
  
  

  canvas.texture {
  display:none;
  }
  
  canvas.texture.control {
    max-width: 20%;
	max-height:100px;
	width:100px;
	height:100px;
	border: solid 5px #000;
    border-radius:20px;		
	display: inline;
 }