#panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 86px;
  background: #fff9ec;
  border-top: 4px solid #e4d7bd;
}

.navItem {
  position: absolute;
  top: 11px;
  height: 50px;
  border: 3px solid #d6c7a7;
  background: #fffdf6;
  color: #25302b;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  line-height: 50px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}

#navClock { left: 1%; width: 23.5%; }
#navNew { left: 25.5%; width: 23.5%; }
#navTimer { left: 50%; width: 23.5%; }
#navAnimation { left: 74.5%; width: 24%; }

.navItem.focused {
  border-color: #286a5a;
  outline: 6px solid #286a5a;
  outline-offset: -12px;
}

.navRed {
  border-color: #9e3b35;
  background: #bf3f37;
  color: #fffdf6;
}

.navGreen {
  border-color: #35723e;
  background: #438b4c;
  color: #fffdf6;
}

.navYellow {
  border-color: #a47a22;
  background: #d4a437;
  color: #25302b;
}

.navBlue {
  border-color: #2d5689;
  background: #386aa9;
  color: #fffdf6;
}

.navNeutral {
  border-color: #6b5b7d;
  background: #7a6a8d;
  color: #fffdf6;
}