.tabs {
  clear: both;
}
.tribe-tab {
  background: rgba(143, 0, 199, 0.7);
  height: 14px;
  width: 20%;
  float: left;
  margin-bottom: 12px;
}
.kin-tab {
  background: rgba(143, 0, 199, 0.7);
  height: 14px;
  width: 20%;
  float: left;
  margin-bottom: 12px;
}
.food-tab {
  background: rgba(255, 13, 5, 0.7);
  height: 14px;
  width: 20%;
  float: left;
  margin-bottom: 12px;
}
.shelter-tab {
  background: rgba(12, 191, 207, 0.7);
  height: 14px;
  width: 20%;
  float: left;
  margin-bottom: 12px;
}
.magic-tab {
  background: rgba(250, 196, 0, 0.7);
  height: 14px;
  width: 20%;
  float: left;
  margin-bottom: 12px;
}
.blank-tab {
  background: white;
  height: 14px;
  width: 20%;
  float: left;
  margin-bottom: 12px;
}
.tribe-item {
  background: rgba(143, 0, 199, 0.7);
  height: 14px;
  width: 20%;
  margin-left: 8px;
  margin-left: 0;
  float: left;
}
.kin-item {
  background: rgba(143, 0, 199, 0.7);
  height: 14px;
  width: 20%;
  margin-left: 8px;
  margin-left: 0;
  float: left;
}
.food-item {
  background: rgba(255, 13, 5, 0.7);
  height: 14px;
  width: 20%;
  margin-left: 8px;
  margin-left: 0;
  float: left;
}
.shelter-item {
  background: rgba(12, 191, 207, 0.7);
  height: 14px;
  width: 20%;
  margin-left: 8px;
  margin-left: 0;
  float: left;
}
.magic-item {
  background: rgba(250, 196, 0, 0.7);
  height: 14px;
  width: 20%;
  margin-left: 8px;
  margin-left: 0;
  float: left;
}
.tribe nav a {
  color: green;
}
.category-nav.tribe li {
  color: #FF0D05;
  padding: 2px 4px;
}
.category-nav.kin li {
  color: #FF0D05;
  padding: 2px 4px;
}
#tribe a,
#tribe a:visited {
  color: #8F00C7;
  padding: 2px 4px;
}
#kin a,
#kin a:visited {
  color: #8F00C7;
  padding: 2px 4px;
}
.tribe a.active {
  color: white;
  background-color: #8F00C7;
  padding: 2px 4px;
}
.kin a.active {
  color: white;
  background-color: #8F00C7;
  padding: 2px 4px;
}
#food a,
#food a:visited,
#food.active a {
  color: #FF0D05;
  padding: 2px 4px;
}
.food a.active {
  color: white;
  background-color: #FF0D05;
  padding: 2px 4px;
}
#shelter a,
#shelter a:visited,
#shelter.active a {
  color: #0cbfcf;
  padding: 2px 4px;
}
.shelter a.active {
  color: white;
  background-color: rgb(12, 191, 207);
  padding: 2px 4px;
}
#magic a,
#magic a:visited,
#magic.active a {
  color: #FAC400;
  padding: 2px 4px;
}
.magic a.active {
  color: white;
  background-color: #FAC400;
  padding: 2px 4px;
}
.tribeButton {
  background-color: #8F00C7;
  padding: 2px 4px;
  color: white;
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  float: left;
}
.kinButton {
  background-color: #8F00C7;
  padding: 2px 4px;
  color: white;
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  float: left;
}
.foodButton {
  background-color: #FF0D05;
  padding: 2px 4px;
  color: white;
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  float: left;
}
.shelterButton {
  background-color: #0cbfcf;
  padding: 2px 4px;
  color: white;
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  float: left;
}
.magicButton {
  background-color: #FAC400;
  padding: 2px 4px;
  color: white;
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  float: left;
}