#gameCon{
  display:none;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  box-sizing:border-box;
}
#ctrl{
  width:100%;
  height:100%;
  position:relative;
  text-align:center;
}
#ctrl>div{
  margin:0 auto;
}
#resDis{
  width:100%;
  height:20%;
  position:relative;
  max-width:250px;
}
#base{
  position:absolute;
  height:100%;
  width:100%;
  top:0;
  left:0;
  background:brown;
  border:1px solid black;
  box-sizing:border-box;
  float:left;
}

#can{
  position:absolute;
  top:0;
  left:0;
  display:none;
}

#resDis div{
  float:left;
  width:100px;
  height:20px;
  line-height:20px;
  font-size:20px;
  border-radius:5px;
  border:1px solid #999;
  text-align:right;
  box-sizing:border-box;
}
#aDis{
  background:#eee;
}

#eDis{
  background:#520;
}

#wDis{
  background:#7af;
}

#fDis{
  background:#f11;
}

#build{
  position:relative;
  width:100%;
  height:20%;
  max-width:250px;
}
#cost{
  width:100%;
  text-align:center;
  position:relative;
  font-size:15px;
  line-height:15px;
  font-family:Arial;
  font-weight:bold;
  color:green;
  
}

.buildIcon{
  width:25%;
  height:50%;
  border:1px solid grey;
  box-sizing:border-box;
  float:left;
}
.atbg{
  background:center no-repeat url('Atower.svg');
  background-size: contain;
}
.etbg{
  background:center no-repeat url('Etower.svg');
  background-size: contain;
}
.ftbg{
  background:center no-repeat url('Ftower.svg');
  background-size: contain;
}
.wtbg{
  background:center no-repeat url('Wtower.svg');
  background-size: contain;
}
.acbg{
  background:center no-repeat;
  background-size: contain;
}
.ecbg{
  background:center no-repeat;
  background-size: contain;
}
.fcbg{
  background:center no-repeat;
  background-size: contain;
}
.wcbg{
  background:center no-repeat;
  background-size: contain;
}



/* #fort{
  position:absolute;
  top:40%;
  right:-19%;
  width:20%;
  height:20%;
  background-color:blue;
}
#options{
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
#options div{
  position:absolute;
  width:40%;
  height:40%;
}
#build{
  bottom:-39%;
  left:0;
  background:tan;
} */
.cell{
  width:10%;
  height:10%;
  float:left;
  border:1px solid black;
  box-sizing:border-box;
  position:relative;
}
.alert:before{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  text-align:center;
  color:red;
  line-height:100%;
  font-size:2em;
  content:"!";
}
#lost{
  display:none;
  position:absolute;
  width:100%;
  text-align:center;
  background:white;
  height:20%;
  top:40%;
  left:0;
  line-height:100%;
  z-index:5;
}
#message{
  width:40%;
}
#start{
  color:green;
  cursor:pointer;
}