.game {
height: 480px;
width: 800px;
}
.menu {
height: 120px;
width: 800px;
}
.menu {
height: 120px;
width: 800px;
}
.menu {
background-color: #333;
...
}
.opponent {
height: 300px;
}
.player {
height: 180px;
}
.opponent .pokemon {
position: absolute;
}
.player .pokemon {
position: absolute;
}
.opponent {
position: relative;
}
.player {
position: relative;
}
.player .pokemon {
position: absolute;
left: 100px;
bottom: 10px;
width: 160px;
}
.opponent .pokemon {
position: absolute;
bottom: 0;
right: 140px;
width: 100px;
}
.stats {
background: #111;
border: 2px solid black;
border-radius: 8px;
color: white;
padding: 12px;
}
.opponent .stats {
position: absolute;
top: 96px;
left: 40px;
width: 320px;
}
.player .stats {
position: absolute;
top: 48px;
right: 40px;
width: 320px;
}
.stats .hp-count:before {
content: 'HP: '
}
.stats .level:before {
content: 'LVL '
}
.stats .pokeballs {
display: inline-block;
}
.stats .pokeballs .pokeball {
float: left;
background-image: url('http://bit.ly/pokeballimg');
background-size: 100% 100%;
width: 25px;
height: 25px;
}
...
.menu .message {
float: left;
font-size: 24px;
width: 50%;
}
.menu .actions {
float: left;
width: 50%;
}
.menu .actions button {
position: relative;
float: left;
background: #666;
border: 3px solid #888;
border-radius: 4px;
color: #fff;
font-family: monospace;
font-size: 20px;
line-height: 14px;
margin: 4px;
padding: 16px;
width: calc(50% - 8px);
height: calc(50% - 8px);
}
.menu .actions button,
.menu .actions button:hover,
.menu .actions button:active {
outline: none;
}
.menu .actions button:hover {
background: #777;
border-color: #999;
}
.menu .actions button:active {
background: #555;
border-color: #666;
}