Game UI

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimal-ui">
 <title>OverWorld ∅</title>
 
 <link href="reset.css" rel="stylesheet" type="text/css">
 <link href="design.css" rel="stylesheet" type="text/css">
 <link href="overworld.css" rel="stylesheet" type="text/css">
 <link href="owscreen.css" rel="stylesheet" type="text/css">
</head>
<body class="game-bg">
 
 <div class="game-frame"></div>
 
 <script src="animframe.js"></script>
 <script src="input.js"></script>
 <script src="owstring.js" type="text/javascript"></script>
 <script src="overworld.js" type="text/javascript"></script>
 <script type="text/javascript">
   var game = OWInit(11, 17, document.querySelector(".game-frame"), InputManager);
 </script>
</body>
overworld.css
.ow-container div{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
.ow-container :focus{outline:0;}
 
.ow-show { display:block !important; }
.ow-container {
  position: relative;
  margin:0;
  padding:0;
  border:0;
  z-index: 0;
  cursor: default;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-touch-action: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font: normal bold 100% monospace;
}
.ow-grid,.ow-status,.ow-status-log {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  /*background: #070707;*/
  background: #006444;
  /*color: #23a788;*/
  color: #00ebbe;
  border: 1px solid #3c887a;
  /*border-color: #2a5a42 #3c887a #3c887a #2a5a42;*/
  border-radius: 6px;
}
.ow-status,.ow-status-log {
  font-family: sans-serif;
  font-weight: normal;
}
.ow-status-log {
  z-index: 2;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  display: none;
}
 
.ow-status .ow-player-stats {
  border-bottom: 1px solid #23a788;
}
.ow-status > .ow-player-stats > .ow-playstat-health,
.ow-status > .ow-player-stats > .ow-playstat-loot,
.ow-status > .ow-player-stats > .ow-playstat-level,
.ow-status > .ow-player-stats > .ow-playstat-exp
{
  float:left;
  width:40%;
}
.ow-status > .ow-player-stats > .ow-playstat-potion,
.ow-status > .ow-player-stats > .ow-playstat-look
{
  float:right;
  width:12%;
}
.ow-status > .ow-player-stats > .ow-playstat-health
{}
.ow-status > .ow-player-stats > .ow-playstat-health:before
{content: "Hp:";padding-left:0.25em;}
.ow-status > .ow-player-stats > .ow-playstat-loot
{}
.ow-status > .ow-player-stats > .ow-playstat-loot:before
{content: "GP:";padding-left:0.25em;}
.ow-status > .ow-player-stats > .ow-playstat-exp
{}
.ow-status > .ow-player-stats > .ow-playstat-exp:before
{content: "Xp:";padding-left:0.4em;}
.ow-status > .ow-player-stats > .ow-playstat-level
{}
.ow-status > .ow-player-stats > .ow-playstat-level:before
{content: "Level:";padding-left:0.5em;}
.ow-status > .ow-player-stats > .ow-playstat-potion
{
  float:right;
  width:12%;
}
.ow-status > .ow-player-stats > .ow-playstat-potion:after
{
  content: "☌";
  padding-left: 0.63em;
  font-weight: bold;
}
.ow-status > .ow-player-stats > .ow-playstat-look:after
{
  content: "☉";
  padding-left: 0.63em;
  font-weight: bold;
}
 
.ow-grid {
  cursor: move;
}
.ow-grid.look {
  cursor: help;
}
 
.ow-tile, .ow-tile-inner {
  display: block;
  overflow: hidden;
  text-align: center;
  line-height: 1;
}
.ow-tile {
  position: absolute;
  background: #c5c5c5;
  color: #141414;
}
.ow-tile-inner {
  z-index: 10;
}
.ow-tile-terr-p,
.ow-tile-terr-f,
.ow-tile-terr-m,
.ow-tile-terr-w,
.ow-tile-terr-v,
.ow-tile-terr-c,
.ow-tile-terr-r,
.ow-tile-terr-s,
.ow-tile-terr-b,
.ow-tile-terr-t
{
  background: #4bc54e;
  color: #161e11;
}
.ow-tile-terr-f{background:#108614}
.ow-tile-terr-m{background:#4c724d}
.ow-tile-terr-w{background:#1486b6}
.ow-tile-terr-v{}
.ow-tile-terr-c{background:#800d0d}
.ow-tile-terr-r{background:#800d0d}
.ow-tile-terr-s{}
.ow-tile-terr-b{}
.ow-tile-terr-t{background:#217d24}
.ow-tile-terr-f:after{content:"+"}
.ow-tile-terr-m:after{content:"^"}
.ow-tile-terr-w:after{content:"~"}
.ow-tile-terr-v:after{content:"*"}
.ow-tile-terr-c:after{content:"$"}
.ow-tile-terr-r:after{content:"#"}
.ow-tile-terr-s:after{content:"T"}
.ow-tile-terr-b:after{content:"w"}
.ow-tile-terr-t:after{content:"&"}
 
.ow-tile-monster,
.ow-tile-monster-gb,
.ow-tile-monster-hd,
.ow-tile-monster-bt,
.ow-tile-monster-pg,
.ow-tile-monster-tr,
.ow-tile-monster-gh,
.ow-tile-monster-sq,
.ow-tile-monster-dm,
.ow-tile-monster-dg,
.ow-tile-monster-gz,
.ow-tile-monster-rp,
.ow-tile-monster-mm,
.ow-tile-monster-lk,
.ow-tile-monster-sl,
.ow-tile-monster-mb,
.ow-tile-monster-wp,
.ow-tile-monster-sn,
.ow-tile-monster-lb,
.ow-tile-monster-mc,
.ow-tile-monster-player{
  z-index: 12;
}
.ow-tile-monster-player:after{content:"@"}
.ow-tile-monster-gb:after{content:"g"}
.ow-tile-monster-hd:after{content:"h"}
.ow-tile-monster-bt:after{content:"b"}
.ow-tile-monster-pg:after{content:"s"}
.ow-tile-monster-tr:after{content:"t"}
.ow-tile-monster-gh:after{content:"o"}
.ow-tile-monster-sq:after{content:"q"}
.ow-tile-monster-dm:after{content:"d"}
.ow-tile-monster-dg:after{content:"D"}
.ow-tile-monster-gz:after{content:"G"}
.ow-tile-monster-rp:after{content:"R"}
.ow-tile-monster-mm:after{content:"M"}
.ow-tile-monster-lk:after{content:"L"}
.ow-tile-monster-sl:after{content:"l"}
.ow-tile-monster-mb:after{content:"B"}
.ow-tile-monster-wp:after{content:"I"}
.ow-tile-monster-sn:after{content:"N"}
.ow-tile-monster-lb:after{content:"Z"}
.ow-tile-monster-mc:after{content:"C"}
 
.ow-tile-loot-g,
.ow-tile-loot-l,
.ow-tile-loot-t,
.ow-tile-loot-e,
.ow-tile-loot-d,
.ow-tile-loot-s,
.ow-tile-loot-m,
.ow-tile-loot-p
{
  z-index: 11;
}
.ow-tile-loot-g:after{content:"."}
.ow-tile-loot-l:after{content:"_"}
.ow-tile-loot-t:after{content:"="}
.ow-tile-loot-e:after{content:"3"}
.ow-tile-loot-d:after{content:"4"}
.ow-tile-loot-s:after{content:"5"}
.ow-tile-loot-m:after{content:"6"}
.ow-tile-loot-p:after{content:"p"}
 
.ow-tile-action
{
  z-index: 13;
}
owscreen.css
@viewport {
  width: device-width;
  height: device-height;
  zoom: 1;
  user-zoom: fixed;
}
 
@media (min-height: 480px){
 
.ow-container{width:220px;height:420px;}
.ow-status{
  top:348px;
  height:66px;
  width:210px;
  padding: 2px 5px;
}
.ow-status .ow-player-stats {height:24px;}
.ow-status .ow-messages {height:40px;}
.ow-status-log{width:210px;height:416px;padding:2px 5px;}
.ow-status > .ow-player-stats > .ow-playstat-potion:after,
.ow-status > .ow-player-stats > .ow-playstat-look:after{
  padding-right:5px;
  float:right;
}
.ow-grid{
  top:0px;
  width:220px;
  height:340px;
  font-size:20px;
}
 
}
 
.ow-tile,.ow-tile-inner{
  width:20px;
  height:20px;
  background-image:url("/doku/_media/overworld/iface.png");
  animation: 400ms steps(1,end) infinite alternate;
}
 
.ow-tile-terr-p{background-position:80px 40px}
.ow-tile-terr-f{background-position:60px 40px}
.ow-tile-terr-m{background-position:40px 40px}
.ow-tile-terr-w{background-position:20px 40px}
.ow-tile-terr-v{background-position:160px 20px}
.ow-tile-terr-c{background-position:140px 20px}
.ow-tile-terr-r{background-position:120px 20px}
.ow-tile-terr-s{background-position:100px 20px}
.ow-tile-terr-b{background-position:80px 20px}
.ow-tile-terr-t{background-position:60px 20px}
.ow-tile-terr-p:after,
.ow-tile-terr-f:after,
.ow-tile-terr-m:after,
.ow-tile-terr-w:after,
.ow-tile-terr-v:after,
.ow-tile-terr-c:after,
.ow-tile-terr-r:after,
.ow-tile-terr-s:after,
.ow-tile-terr-b:after,
.ow-tile-terr-t:after
{content:none !important;}
 
.ow-tile-monster-player{background-position:80px 140px;animation-name:anim-player}
@keyframes anim-player{50%{background-position:60px 140px}}
.ow-tile-monster-gb{background-position:40px 140px;animation-name:anim-monster-gb}
@keyframes anim-monster-gb{50%{background-position:20px 140px}}
.ow-tile-monster-hd{background-position:160px 120px;animation-name:anim-monster-hd}
@keyframes anim-monster-hd{50%{background-position:140px 120px}}
.ow-tile-monster-bt{background-position:120px 120px;animation-name:anim-monster-bt}
@keyframes anim-monster-bt{50%{background-position:100px 120px}}
.ow-tile-monster-pg{background-position:80px 120px;animation-name:anim-monster-pg}
@keyframes anim-monster-pg{50%{background-position:60px 120px}}
.ow-tile-monster-tr{background-position:40px 120px;animation-name:anim-monster-tr}
@keyframes anim-monster-tr{50%{background-position:20px 120px}}
.ow-tile-monster-gh{background-position:160px 100px;animation-name:anim-monster-gh}
@keyframes anim-monster-gh{50%{background-position:140px 100px}}
.ow-tile-monster-sq{background-position:120px 100px;animation-name:anim-monster-sq}
@keyframes anim-monster-sq{50%{background-position:100px 100px}}
.ow-tile-monster-dm{background-position:80px 100px;animation-name:anim-monster-dm}
@keyframes anim-monster-dm{50%{background-position:60px 100px}}
.ow-tile-monster-dg{background-position:40px 100px;animation-name:anim-monster-dg}
@keyframes anim-monster-dg{50%{background-position:20px 100px}}
.ow-tile-monster-sn{background-position:160px 80px;animation-name:anim-monster-sn}
@keyframes anim-monster-sn{50%{background-position:140px 80px}}
.ow-tile-monster-gz{background-position:120px 80px;animation-name:anim-monster-gz}
@keyframes anim-monster-gz{50%{background-position:100px 80px}}
.ow-tile-monster-rp{background-position:80px 80px;animation-name:anim-monster-rp}
@keyframes anim-monster-rp{50%{background-position:60px 80px}}
.ow-tile-monster-mm{background-position:40px 80px;animation-name:anim-monster-mm}
@keyframes anim-monster-mm{50%{background-position:20px 80px}}
.ow-tile-monster-lk{background-position:160px 60px;animation-name:anim-monster-lk}
@keyframes anim-monster-lk{50%{background-position:140px 60px}}
.ow-tile-monster-sl{background-position:120px 60px;animation-name:anim-monster-sl}
@keyframes anim-monster-sl{50%{background-position:100px 60px}}
.ow-tile-monster-mb{background-position:80px 60px;animation-name:anim-monster-mb}
@keyframes anim-monster-mb{50%{background-position:60px 60px}}
.ow-tile-monster-wp{background-position:40px 60px;animation-name:anim-monster-wp}
@keyframes anim-monster-wp{50%{background-position:20px 60px}}
.ow-tile-monster-lb{background-position:160px 40px;animation-name:anim-monster-lb}
@keyframes anim-monster-lb{50%{background-position:140px 40px}}
.ow-tile-monster-mc{background-position:120px 40px;animation-name:anim-monster-mc}
@keyframes anim-monster-mc{50%{background-position:100px 40px}}
.ow-tile-monster-player:after,
.ow-tile-monster-gb:after,
.ow-tile-monster-hd:after,
.ow-tile-monster-bt:after,
.ow-tile-monster-pg:after,
.ow-tile-monster-tr:after,
.ow-tile-monster-gh:after,
.ow-tile-monster-sq:after,
.ow-tile-monster-dm:after,
.ow-tile-monster-dg:after,
.ow-tile-monster-gz:after,
.ow-tile-monster-rp:after,
.ow-tile-monster-mm:after,
.ow-tile-monster-lk:after,
.ow-tile-monster-sl:after,
.ow-tile-monster-mb:after,
.ow-tile-monster-wp:after,
.ow-tile-monster-sn:after,
.ow-tile-monster-lb:after,
.ow-tile-monster-mc:after
{content:none !important;}
 
.ow-tile-loot-g{background-position:80px 160px;}
.ow-tile-loot-l{background-position:60px 160px;}
.ow-tile-loot-t{background-position:40px 160px;}
.ow-tile-loot-e{background-position:20px 160px;}
.ow-tile-loot-d{background-position:160px 140px;}
.ow-tile-loot-s{background-position:140px 140px;}
.ow-tile-loot-m{background-position:120px 140px;}
.ow-tile-loot-p{background-position:100px 140px;}
.ow-tile-loot-g:after,
.ow-tile-loot-l:after,
.ow-tile-loot-t:after,
.ow-tile-loot-e:after,
.ow-tile-loot-d:after,
.ow-tile-loot-s:after,
.ow-tile-loot-m:after,
.ow-tile-loot-p:after
{content:none !important}
 
.ow-tile-position-0-0  {left:  0px;top:  0px;}
.ow-tile-position-0-1  {left:  0px;top: 20px;}
.ow-tile-position-0-2  {left:  0px;top: 40px;}
.ow-tile-position-0-3  {left:  0px;top: 60px;}
.ow-tile-position-0-4  {left:  0px;top: 80px;}
.ow-tile-position-0-5  {left:  0px;top:100px;}
.ow-tile-position-0-6  {left:  0px;top:120px;}
.ow-tile-position-0-7  {left:  0px;top:140px;}
.ow-tile-position-0-8  {left:  0px;top:160px;}
.ow-tile-position-0-9  {left:  0px;top:180px;}
.ow-tile-position-0-10 {left:  0px;top:200px;}
.ow-tile-position-0-11 {left:  0px;top:220px;}
.ow-tile-position-0-12 {left:  0px;top:240px;}
.ow-tile-position-0-13 {left:  0px;top:260px;}
.ow-tile-position-0-14 {left:  0px;top:280px;}
.ow-tile-position-0-15 {left:  0px;top:300px;}
.ow-tile-position-0-16 {left:  0px;top:320px;}
.ow-tile-position-1-0  {left: 20px;top:  0px;}
.ow-tile-position-1-1  {left: 20px;top: 20px;}
.ow-tile-position-1-2  {left: 20px;top: 40px;}
.ow-tile-position-1-3  {left: 20px;top: 60px;}
.ow-tile-position-1-4  {left: 20px;top: 80px;}
.ow-tile-position-1-5  {left: 20px;top:100px;}
.ow-tile-position-1-6  {left: 20px;top:120px;}
.ow-tile-position-1-7  {left: 20px;top:140px;}
.ow-tile-position-1-8  {left: 20px;top:160px;}
.ow-tile-position-1-9  {left: 20px;top:180px;}
.ow-tile-position-1-10 {left: 20px;top:200px;}
.ow-tile-position-1-11 {left: 20px;top:220px;}
.ow-tile-position-1-12 {left: 20px;top:240px;}
.ow-tile-position-1-13 {left: 20px;top:260px;}
.ow-tile-position-1-14 {left: 20px;top:280px;}
.ow-tile-position-1-15 {left: 20px;top:300px;}
.ow-tile-position-1-16 {left: 20px;top:320px;}
.ow-tile-position-2-0  {left: 40px;top:  0px;}
.ow-tile-position-2-1  {left: 40px;top: 20px;}
.ow-tile-position-2-2  {left: 40px;top: 40px;}
.ow-tile-position-2-3  {left: 40px;top: 60px;}
.ow-tile-position-2-4  {left: 40px;top: 80px;}
.ow-tile-position-2-5  {left: 40px;top:100px;}
.ow-tile-position-2-6  {left: 40px;top:120px;}
.ow-tile-position-2-7  {left: 40px;top:140px;}
.ow-tile-position-2-8  {left: 40px;top:160px;}
.ow-tile-position-2-9  {left: 40px;top:180px;}
.ow-tile-position-2-10 {left: 40px;top:200px;}
.ow-tile-position-2-11 {left: 40px;top:220px;}
.ow-tile-position-2-12 {left: 40px;top:240px;}
.ow-tile-position-2-13 {left: 40px;top:260px;}
.ow-tile-position-2-14 {left: 40px;top:280px;}
.ow-tile-position-2-15 {left: 40px;top:300px;}
.ow-tile-position-2-16 {left: 40px;top:320px;}
.ow-tile-position-3-0  {left: 60px;top:  0px;}
.ow-tile-position-3-1  {left: 60px;top: 20px;}
.ow-tile-position-3-2  {left: 60px;top: 40px;}
.ow-tile-position-3-3  {left: 60px;top: 60px;}
.ow-tile-position-3-4  {left: 60px;top: 80px;}
.ow-tile-position-3-5  {left: 60px;top:100px;}
.ow-tile-position-3-6  {left: 60px;top:120px;}
.ow-tile-position-3-7  {left: 60px;top:140px;}
.ow-tile-position-3-8  {left: 60px;top:160px;}
.ow-tile-position-3-9  {left: 60px;top:180px;}
.ow-tile-position-3-10 {left: 60px;top:200px;}
.ow-tile-position-3-11 {left: 60px;top:220px;}
.ow-tile-position-3-12 {left: 60px;top:240px;}
.ow-tile-position-3-13 {left: 60px;top:260px;}
.ow-tile-position-3-14 {left: 60px;top:280px;}
.ow-tile-position-3-15 {left: 60px;top:300px;}
.ow-tile-position-3-16 {left: 60px;top:320px;}
.ow-tile-position-4-0  {left: 80px;top:  0px;}
.ow-tile-position-4-1  {left: 80px;top: 20px;}
.ow-tile-position-4-2  {left: 80px;top: 40px;}
.ow-tile-position-4-3  {left: 80px;top: 60px;}
.ow-tile-position-4-4  {left: 80px;top: 80px;}
.ow-tile-position-4-5  {left: 80px;top:100px;}
.ow-tile-position-4-6  {left: 80px;top:120px;}
.ow-tile-position-4-7  {left: 80px;top:140px;}
.ow-tile-position-4-8  {left: 80px;top:160px;}
.ow-tile-position-4-9  {left: 80px;top:180px;}
.ow-tile-position-4-10 {left: 80px;top:200px;}
.ow-tile-position-4-11 {left: 80px;top:220px;}
.ow-tile-position-4-12 {left: 80px;top:240px;}
.ow-tile-position-4-13 {left: 80px;top:260px;}
.ow-tile-position-4-14 {left: 80px;top:280px;}
.ow-tile-position-4-15 {left: 80px;top:300px;}
.ow-tile-position-4-16 {left: 80px;top:320px;}
.ow-tile-position-5-0  {left:100px;top:  0px;}
.ow-tile-position-5-1  {left:100px;top: 20px;}
.ow-tile-position-5-2  {left:100px;top: 40px;}
.ow-tile-position-5-3  {left:100px;top: 60px;}
.ow-tile-position-5-4  {left:100px;top: 80px;}
.ow-tile-position-5-5  {left:100px;top:100px;}
.ow-tile-position-5-6  {left:100px;top:120px;}
.ow-tile-position-5-7  {left:100px;top:140px;}
.ow-tile-position-5-8  {left:100px;top:160px;}
.ow-tile-position-5-9  {left:100px;top:180px;}
.ow-tile-position-5-10 {left:100px;top:200px;}
.ow-tile-position-5-11 {left:100px;top:220px;}
.ow-tile-position-5-12 {left:100px;top:240px;}
.ow-tile-position-5-13 {left:100px;top:260px;}
.ow-tile-position-5-14 {left:100px;top:280px;}
.ow-tile-position-5-15 {left:100px;top:300px;}
.ow-tile-position-5-16 {left:100px;top:320px;}
.ow-tile-position-6-0  {left:120px;top:  0px;}
.ow-tile-position-6-1  {left:120px;top: 20px;}
.ow-tile-position-6-2  {left:120px;top: 40px;}
.ow-tile-position-6-3  {left:120px;top: 60px;}
.ow-tile-position-6-4  {left:120px;top: 80px;}
.ow-tile-position-6-5  {left:120px;top:100px;}
.ow-tile-position-6-6  {left:120px;top:120px;}
.ow-tile-position-6-7  {left:120px;top:140px;}
.ow-tile-position-6-8  {left:120px;top:160px;}
.ow-tile-position-6-9  {left:120px;top:180px;}
.ow-tile-position-6-10 {left:120px;top:200px;}
.ow-tile-position-6-11 {left:120px;top:220px;}
.ow-tile-position-6-12 {left:120px;top:240px;}
.ow-tile-position-6-13 {left:120px;top:260px;}
.ow-tile-position-6-14 {left:120px;top:280px;}
.ow-tile-position-6-15 {left:120px;top:300px;}
.ow-tile-position-6-16 {left:120px;top:320px;}
.ow-tile-position-7-0  {left:140px;top:  0px;}
.ow-tile-position-7-1  {left:140px;top: 20px;}
.ow-tile-position-7-2  {left:140px;top: 40px;}
.ow-tile-position-7-3  {left:140px;top: 60px;}
.ow-tile-position-7-4  {left:140px;top: 80px;}
.ow-tile-position-7-5  {left:140px;top:100px;}
.ow-tile-position-7-6  {left:140px;top:120px;}
.ow-tile-position-7-7  {left:140px;top:140px;}
.ow-tile-position-7-8  {left:140px;top:160px;}
.ow-tile-position-7-9  {left:140px;top:180px;}
.ow-tile-position-7-10 {left:140px;top:200px;}
.ow-tile-position-7-11 {left:140px;top:220px;}
.ow-tile-position-7-12 {left:140px;top:240px;}
.ow-tile-position-7-13 {left:140px;top:260px;}
.ow-tile-position-7-14 {left:140px;top:280px;}
.ow-tile-position-7-15 {left:140px;top:300px;}
.ow-tile-position-7-16 {left:140px;top:320px;}
.ow-tile-position-8-0  {left: 160px;top:  0px;}
.ow-tile-position-8-1  {left: 160px;top: 20px;}
.ow-tile-position-8-2  {left: 160px;top: 40px;}
.ow-tile-position-8-3  {left: 160px;top: 60px;}
.ow-tile-position-8-4  {left: 160px;top: 80px;}
.ow-tile-position-8-5  {left: 160px;top:100px;}
.ow-tile-position-8-6  {left: 160px;top:120px;}
.ow-tile-position-8-7  {left: 160px;top:140px;}
.ow-tile-position-8-8  {left: 160px;top:160px;}
.ow-tile-position-8-9  {left: 160px;top:180px;}
.ow-tile-position-8-10 {left: 160px;top:200px;}
.ow-tile-position-8-11 {left: 160px;top:220px;}
.ow-tile-position-8-12 {left: 160px;top:240px;}
.ow-tile-position-8-13 {left: 160px;top:260px;}
.ow-tile-position-8-14 {left: 160px;top:280px;}
.ow-tile-position-8-15 {left: 160px;top:300px;}
.ow-tile-position-8-16 {left: 160px;top:320px;}
.ow-tile-position-9-0  {left:180px;top:  0px;}
.ow-tile-position-9-1  {left:180px;top: 20px;}
.ow-tile-position-9-2  {left:180px;top: 40px;}
.ow-tile-position-9-3  {left:180px;top: 60px;}
.ow-tile-position-9-4  {left:180px;top: 80px;}
.ow-tile-position-9-5  {left:180px;top:100px;}
.ow-tile-position-9-6  {left:180px;top:120px;}
.ow-tile-position-9-7  {left:180px;top:140px;}
.ow-tile-position-9-8  {left:180px;top:160px;}
.ow-tile-position-9-9  {left:180px;top:180px;}
.ow-tile-position-9-10 {left:180px;top:200px;}
.ow-tile-position-9-11 {left:180px;top:220px;}
.ow-tile-position-9-12 {left:180px;top:240px;}
.ow-tile-position-9-13 {left:180px;top:260px;}
.ow-tile-position-9-14 {left:180px;top:280px;}
.ow-tile-position-9-15 {left:180px;top:300px;}
.ow-tile-position-9-16 {left:180px;top:320px;}
.ow-tile-position-10-0  {left:200px;top:  0px;}
.ow-tile-position-10-1  {left:200px;top: 20px;}
.ow-tile-position-10-2  {left:200px;top: 40px;}
.ow-tile-position-10-3  {left:200px;top: 60px;}
.ow-tile-position-10-4  {left:200px;top: 80px;}
.ow-tile-position-10-5  {left:200px;top:100px;}
.ow-tile-position-10-6  {left:200px;top:120px;}
.ow-tile-position-10-7  {left:200px;top:140px;}
.ow-tile-position-10-8  {left:200px;top:160px;}
.ow-tile-position-10-9  {left:200px;top:180px;}
.ow-tile-position-10-10 {left:200px;top:200px;}
.ow-tile-position-10-11 {left:200px;top:220px;}
.ow-tile-position-10-12 {left:200px;top:240px;}
.ow-tile-position-10-13 {left:200px;top:260px;}
.ow-tile-position-10-14 {left:200px;top:280px;}
.ow-tile-position-10-15 {left:200px;top:300px;}
.ow-tile-position-10-16 {left:200px;top:320px;}
design.css
.content p {
  margin: 0 0 0.63em;
  line-height: 1.65;
}
 
.game-bg {
  background: #020617;
  color: #777777;
}
 
.game-frame {
  margin: 0 auto;
  padding: 15px;
  /*background: #bbada0;*/
  /*background: #99b3d9;*/
  background: #6eaab6;
  position: relative;
  border: 1px solid #b8b8b8;
  /*border-color: #b8b8b8 #121f23 #121f23 #b8b8b8;*/
  border-radius: 6px;
}
 
@media (min-height: 480px){
 
.game-frame{
  width:224px;
  height:420px;
  margin-top: 15px;
  padding: 14px;
  border-radius: 10px;
  font-size:10px
}
 
}
reset.css
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
:focus{outline:0;}
body{line-height:1;color:black;background:white;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
 



CC Attribution-Share Alike 4.0 International Driven by DokuWiki
simpleClean dokuwiki template |  Old revisions ·  Sitemap ·  Back to top ·