html { font-size: 1em; line-height: 1.4; font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; }
* { margin: 0; padding: 0; box-sizing: inherit; }
*:before, *:after { box-sizing: inherit; }
html, body { height: 100%; width: 100%; color: #fff; background-color: #103d54; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }
body { -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-user-select: none; -webkit-highlight: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
#main { display:table; position: fixed; height: 100%; width: 100%; top: 0; left: 0; overflow: hidden; background-color: #103d54; }
#display { display: table-cell; vertical-align: middle; text-align: center; padding-bottom: 20px; font-size: 6vw; }
#header { position: absolute; top: 30px; left: 0; right: 0; text-align:center; }
#header h2 { font-size: 3vw; }
.gamesbutton { position: absolute; top: 0; left: 15px; font-size: 12px; color: #222; background:white; width: 56px; height: 56px; line-height: 56px; -moz-border-radius: 28px; -webkit-border-radius: 28px; border-radius: 28px;  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=11, Direction=135, Color=#000000)"; -moz-box-shadow: 1px 1px 11px 1px rgba(0,0,0,0.5) inset; -webkit-box-shadow: 1px 1px 11px 1px rgba(0,0,0,0.5) inset; box-shadow: 1px 1px 11px 1px rgba(0,0,0,0.5) inset; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=11, Direction=135, Color=#000000); cursor: pointer; }
#footer { position: absolute; bottom: 15px; left: 15px; right: 15px; text-align:center; }
#countdown { font-size: 4vw; color: orange; }
#t1 {  display: inline-block; position: absolute; bottom: 0; left: 0; font-size: 4vw; color: orange; }
#t2 { display: inline-block; position: absolute; bottom: 0; right: 0; font-size: 4vw; color: orange;}
.addcursor { cursor: pointer; }
.countin { font-size: 35vw !important; }
@keyframes blink { to { color: red; } }
.winner { color: blue; animation: blink 1s steps(2, start) infinite; }
#plpanel { position: absolute; top: 30px; left: 0; right: 0; bottom: 0; background-color: #103d54; text-align:center; display: none; }
#storedgames { margin: 0 20px 10px 130px; height: 40%; overflow:hidden; }
#storedgames div { position: relative; float: left; height: 100%; text-align:center; cursor:pointer; }
#storedgames span { position:absolute; top:35%; left:10%; right: 10%; font-size: 120%; font-weight: bolder; color: #000; }
#storedgames a { position:absolute; top:-20px; right:10%; font-size: 250%; color:#000; text-decoration:none; }
#plgames { margin: 0 20px 20px 20px; padding: 10px; height: 45%; background:#fff; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color=#000000)"; -moz-box-shadow: 1px 1px 10px 4px rgba(0,0,0,0.5) inset; -webkit-box-shadow: 1px 1px 10px 4px rgba(0,0,0,0.5) inset; box-shadow: 1px 1px 10px 4px rgba(0,0,0,0.5) inset; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color=#000000); }
#plgames div { position: relative; float:left; height: 100%; cursor:pointer; }
#plgames span { position:absolute; top:35%; left:10%; right: 10%; font-size: 120%; font-weight: bolder; color: #000; }
#branding{ position:absolute; right:8px; bottom:8px; color:orange; font-size: 3.2vh; }
.crntgame { border:3px solid orange !important; }
#wrapper { position: fixed; height: 100%; width: 100%; top: 0; left: 0; overflow: hidden;  background-color: #103d54; text-align:center; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d;}
.loader { margin:auto; margin-top:-60px; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border: 16px solid #f3f3f3; border-top: 16px solid orange; border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@media only screen and (max-width: 568px) {
  #display { padding: 2px; font-size: 5vw; }
  .crntgame { border:2px solid orange !important; }
  #storedgames span { font-size: 1.5vw; font-weight: lighter;}
  #plgames span { font-size: 1.5vw; font-weight: lighter;}
  #branding{ right:3px; bottom:3px; font-size: 5vh; }
}
@media only screen and (max-width: 320px) {
  #display { padding: 2px; font-size: 6vw; }
  .crntgame { border:2px solid orange !important; }
  #storedgames span { font-size: 6vw; font-weight: lighter;}
  #plgames span { font-size: 6vw; font-weight: lighter;}
  #branding{ right:2px; bottom:2px; font-size: 3.5vh; }
}