body {
  margin: 0;
  font-family: sans-serif;
  background-color: #141414;
}

a:link, a:visited {
  color: #ccc;
  text-decoration: none;
}

.nav {
  width: 759px;
  margin: 0 auto;
  padding-top: 150px;

}

ul {
  margin: auto;
  padding: 0;
  letter-spacing: 1px;
  background-color: #f9f9f9;
  border-radius: 5px;
  float: left;
}

li {
  margin: 0;
  padding: 29px;
  border-top: 5px solid #f9f9f9;
  display: block;
  float: left;
}

li:nth-child(2) {
  border-top: 5px solid #fb5052;
}

li:nth-child(3) {
  border-top: 5px solid #fc8c8d;
}

li:nth-child(4) {
  border-top: 5px solid #fdbebe;
}

li:nth-child(5) {
  border-top: 5px solid #fdbebe;
}

li:last-child {
  border-top: 5px solid #fdbebe;
}

li:hover {
  cursor: pointer;
  border-top: 5px solid #049ee0;
  
  -webkit-transition: .5s ease-in-out;
      -moz-transition: .5s ease-in-out;
       -o-transition: .5s ease-in-out;
          transition: .5s ease-in-out; 
}

li:active {
  background-color: #f4f4f4;
}

.active {
  border-top: 5px solid #fa3234;
  color: #333333;
}

.active a:link, .active a:visited {
  color: #333333;
}