body {background: #07171b;font-family: arial,san-serif }
#game {margin:25px;}
#board {margin-right:25px;min-width: 660px}
#right {max-width: 300px}
#entities {padding:10px;margin-bottom:20px;}
#message {padding:10px;color:#ccc;}
#selected {padding:10px;color:#ccc;}
#debug {padding:10px;color:#d41;}

/* general */
.clr {clear:left;}

/* cell stack */
div {box-sizing: border-box;}
.cell,#board,#right {float: left;}
.cell {margin:4px;}
.cell, .cell div {height:60px;width:60px;}

.cell div div {border:1px solid #3b481e;}
.cell.emp div div {border:1px solid #08282f;}
.cell.player div div {border:1px solid #0e3f4a;}

.cell.emp div div:hover {border-color:#56ada9;background-color:rgb(200, 200, 200,0.1);}

/* entities */
#entities > div {margin-right: 6px}
#entities div div div {border-width: 3px;border-color: transparent;}
#entities .selected div div {border-color: #56ada9;}

/* level 1 bg */
.cell {}
.cell.hp1,.cell.hp2,.cell.hp3,.cell.hp4,.cell.hp5 {background-color:#101223}
.cell.player {background-color:#0e2429}
.cell {/*background-image:url(bg.png);*/}
/*.emp {background-image:url(bg.png);}*/

/* level 2 bg*/
.bom > div,.mil > div,.fac > div,.for > div {background-position: 3px 3px;background-repeat: no-repeat;}
.bom > div {background-image:url(bom.png);}
.mil > div {background-image:url(mil.png);}
.fac > div {background-image:url(fac.png);}
.for > div {background-image:url(for.png);}

/* level 3 bg */
.cell > div > div {background-repeat: no-repeat;background-position: 2px 51px;}

.cell.hp5 > div > div {background-image: url(red5.png);}
.cell.hp4 > div > div {background-image: url(red4.png);}
.cell.hp3 > div > div {background-image: url(red3.png);}
.cell.hp2 > div > div {background-image: url(red2.png);}
.cell.hp1 > div > div {background-image: url(red1.png);}

.cell.hp5.player > div > div {background-image: url(green5.png);}
.cell.hp4.player > div > div {background-image: url(green4.png);}
.cell.hp3.player > div > div {background-image: url(green3.png);}
.cell.hp2.player > div > div {background-image: url(green2.png);}
.cell.hp1.player > div > div {background-image: url(green1.png);}

/* level 4 bg */
.cell.pow1 div div div {background-repeat: no-repeat;background-image: none;}
.cell.pow2 div div div {background-image: url(power2.png);}
.cell.pow3 div div div {background-image: url(power3.png);}


/* selected */
.entity-name {text-transform: uppercase;font-weight: bold;color: #56ada9;margin-bottom: 6px}

.tbtn {color:#ccc;margin-top: 10px;background:#08282f;width: 300px;padding:10px;cursor: pointer;}

#newgame {color:#e00}
#newgameai {color:#171}
#nextRound {color:#171}
#nextRound10 {color:#1a1}

.clr {clear:both;}