* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

div#changeStatus {
  position: fixed;
  top: 2%;
  left: 2%;
  z-index: 10000;
}

div#changeStatus h1 {
  color: #fff;
  font-size: 108%;
}

div#changeStatus h1 a {
  color: #fff;
  font-size: 86%;
}

div#changeStatus h1 a:hover {
  text-decoration: none;
}

div#changeStatus span {
  color: #fff;
  font-size: 77%;
}

ul#nav {
  list-style: none;
  margin-top: -250px;
  margin-left: -250px;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 500px;
  z-index: 10000;
}

ul#nav li {
  float: left;
  width: 100px;
}

ul#nav li a {
  border: solid transparent 4px;
  display: block;
  height: 92px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  line-height: 92px;
}

ul#nav li a:hover {
  border: solid #fff 4px;
}

div.section {
  width: 100%;
  height: 100%;
  position: absolute;
}

li#na1,
li#nb5,
li#nc4,
li#nd3,
li#ne2,
div#a1,
div#b5,
div#c4,
div#d3,
div#e2 {
  background: #36362c;
}

li#na2,
li#nb1,
li#nc5,
li#nd4,
li#ne3,
div#a2,
div#b1,
div#c5,
div#d4,
div#e3 {
  background: #5d917d;
}

li#na3,
li#nb2,
li#nc1,
li#nd5,
li#ne4,
div#a3,
div#b2,
div#c1,
div#d5,
div#e4 {
  background: #a8ad80;
}

li#na4,
li#nb3,
li#nc2,
li#nd1,
li#ne5,
div#a4,
div#b3,
div#c2,
div#d1,
div#e5 {
  background: #e6d4a7;
}

li#na5,
li#nb4,
li#nc3,
li#nd2,
li#ne1,
div#a5,
div#b4,
div#c3,
div#d2,
div#e1 {
  background: #825534;
}

div#a2,
div#b2,
div#c2,
div#d2,
div#e2 {
  left: 100%;
}

div#a3,
div#b3,
div#c3,
div#d3,
div#e3 {
  left: 200%;
}

div#a4,
div#b4,
div#c4,
div#d4,
div#e4 {
  left: 300%;
}

div#a5,
div#b5,
div#c5,
div#d5,
div#e5 {
  left: 400%;
}

div#b1,
div#b2,
div#b3,
div#b4,
div#b5 {
  top: 100%;
}

div#c1,
div#c2,
div#c3,
div#c4,
div#c5 {
  top: 200%;
}

div#d1,
div#d2,
div#d3,
div#d4,
div#d5 {
  top: 300%;
}

div#e1,
div#e2,
div#e3,
div#e4,
div#e5 {
  top: 400%;
}

.none {
  display: none;
}