@font-face {
font-family:pixelmix;
src:url(/resources/fonts/pixelmix.ttf);
}

body {
image-rendering:pixelated;
font-family:pixelmix,sans-serif;
font-size:12pt;
background:url(http://i.imgur.com/xk9uoMc.png);
background-size:30%;
margin:10px;
overflow:hidden;
} 

#footer {
display:block;
font-size:8pt;
margin-top: 20px;
position:fixed;
bottom:0;
left:0;
padding:10px;
color:#87BEBF;
width:100%;
background:rgba(22,29,68,0.8);
}

a, a:visited,a:active {
color:#9B6CB7;
}

#map {
position:Relative;
background:#161D44;
display:none;
}

h1 {
margin: 10px 0;
}

#choice {
position:relative;
padding:10px;
box-sizing:border-box;
}

#charsprite {
position:absolute;
transition:0.3s all linear;
z-index:100;
}

.tile {
position:absolute;
box-sizing:border-box;
}

.path {
background:url(http://i.imgur.com/7DcxZgG.png) #aaa;
}

.wall {
background-image: url(http://i.imgur.com/mES2Iq5.png);
}

.treasure {
background-image:url(http://i.imgur.com/ZU0hPsg.png),url(http://i.imgur.com/7DcxZgG.png);
}

#effect,#effect2 {
position:absolute;
background-color:rgba(0,0,0,0.7);
opacity:0;transition:0.2s all ease-out;
}

#tips {
position:relative;
padding:10px;
box-sizing:border-box;
}

#recharge {
background:maroon;
border-radius:1000px;
border:1px solid rgba(255,255,255,0.5);
position:absolute;
box-sizing:border-box;
opacity:0;
z-index:101;
}

button {
border-top:2px solid #F0E0D1;
border-left:2px solid #F0E0D1;
font-size:12pt;
font-family:pixelmix;
padding:10px;
margin:5px;
background-color:#E7B6F2;
}

#gameEndBox {
position:absolute;
display:none;
top: 10px;
left: 10px; 
background:rgba(0,0,0,0.5);
color:white;
box-sizing:border-box;
padding:10px;
z-index:102;
}

#hiscoreform {
display:none;
}

#profiles {
margin:20px;
}

#timer {
position:absolute;
color:white;
top:13px;
left:13px;
z-index:101;
}

#restart {
opacity:0;
position:absolute;
font-size:8pt;
color:white;
z-index:101;
}

#restart, #music {
cursor:pointer;
}

#scoreboard {
position:absolute;
top:10px;
width:250px;
height:90%;
}

iframe {
border:2px solid grey;
}

#powerBar {
position:absolute;
height:10px;
width:200px;
opacity:0;
z-index:101;
background-color:rgba(0,0,0,0.7);
overflow:hidden;
}

#powerMeter {
height:100%;
width:1px;
background-color:red;
}

#hpBar {
position:absolute;
height:10px;
width:200px;
background-color:rgba(0,0,0,0.7);
overflow:hidden;
z-index:101;
}

#hpMeter {
height:100%;
width:1px;
background-color:maroon;
}

#choice, #tips, #profiles{
background-color:#C6B0AB;
}

.magic {
position:absolute;
transition: 0.2s all ease-in-out;
opacity:0.8;
z-index:99;
}

.vert {
background-image:linear-gradient(to right,transparent,cyan,transparent);
}
.hor {
background-image:linear-gradient(to bottom,transparent,cyan,transparent);
}
.topleft {
background-image:linear-gradient(to top left,transparent 50%,cyan,transparent);
}
.bottomleft {
background-image:linear-gradient(to bottom left,transparent 50%,cyan,transparent);
}
.topright {
background-image:linear-gradient(to top right,transparent 50%,cyan,transparent);
}
.bottomright {
background-image:linear-gradient(to bottom right,transparent 50%,cyan,transparent);
}

.monster {
position:absolute;
z-index:50;
transition:0.2s all ease-in-out;
}

#music {
position:Absolute;
background-image: url(http://i.imgur.com/yEXJ7AR.png);
background-size:100%;
z-index:101;
}

input {
font-family:pixelmix,sans-serif;
}