style.css

body {
   font-family: Corbel, Arial, Helvetica, sans-serif;
}

#footer {
   margin-top: 2em;
   color: gray;
}

#container {
   position: relative;
   border: solid 1px yellow;
   background-color: #A3D6DE;
   z-index: 5;
}

#container div {
   position: absolute;	
   font-size: 8px;
   z-index: 16;
}
#container div:hover { border: dashed 1px gray;}


#hiro {
   position: absolute;
   width: 30px;
   height: 30px;
   background-color: yellow;
   z-index: 100;
}

#enemy{
   position: absolute;
   left: 40px;
   width: 30px;
   height: 30px;
   background-color: green;
   z-index: 100;
}

.menu {display: block; clear: both; position: relative; height: 3.5em;}
.button {
   position: relative;
   border: dotted 2px black;
   padding: 0.5em;
   text-align: center;
   font-weight: bold;
   color: gray;
   display:block;
   font-size: larger;
   float: left;
}
.button:hover {cursor: pointer; background-color: #efafaf;}

#findBtn {
   position: relative;
   border: dotted 2px black;
   padding: 0.5em;
   width: 100px;	
}

#resetBtn {
   position: relative;
   border: dotted 2px black;
   padding: 0.5em;
   width: 100px;	
}

#agentContainer {
   display: block;
   position: relative;
   height: 40px;
   width: 80px;
}

.movePossible {
   border: solid 1px green;
}

.pth {background-color: gray;}
.dn {display: none;}