body, html {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

#mars {
  width: 100%;
  height: 100%;
}

#sattelite {
  position: absolute;
  top: 0px; left: 0px;
  width: 100%;
  height: 100%;
  overflow: auto;
}
#terrain {
  height: 100px;
  width: 100px;
  background-image: url('http://planetary-science.org/wp-content/uploads/2014/12/Ladon-basin-in-full-color.jpg');
}

#comms {
  width: 200px;
  position: fixed;
  top: 32px;
  right: 32px;
  background-color: #eee;
  box-shadow: 5px 5px 15px #333;
}

.terrainRow {
  float: left;
  clear: both;
}
.terrainCell {
  width: 44px; height: 44px;
  border-left: 1px dashed rgba(255, 0, 0, .4);
  border-bottom: 1px dashed rgba(255, 0, 0, .4);
  padding: 3px;
  float: left;
}

.rover {
  max-width: 100%;
  max-height: 100%;
}

.rover.facingN { border-top: 2px solid blue;}
.rover.facingS { border-bottom: 2px solid blue;}
.rover.facingE { border-right: 2px solid blue;}
.rover.facingW { border-left: 2px solid blue;}

.terrainCell.obstacle {
  background-image: url('https://img.icons8.com/emoji/256/rock-emoji.png');
  background-size: cover;
}