body {
  font-family: 'Roboto', sans-serif;
}

.button {
  border-radius: 100px 100px 100px 100px;
  color: #FFFFFF;
  margin-right: 40px;
  padding: 10px 10px 10px 10px;
  display: inline-block;
  width: 50px;
  font-size: 14px;
}

a.button {
  color: #FFFFFF;
}

.button.active {
  color: #1C0932;
  background-color: #FFFFFF;
}

/* basic positioning */
.legend { list-style: none; }
.legend li { float: left; margin-right: 10px; }
.legend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; }
/* your colors */
.legend .north { background-color: #34F060; }
.legend .north-west { background-color: #2CCDEF; }
.legend .north-east { background-color: #348FFF; }
.legend .west { background-color: #7AEB2F; }
.legend .south-west { background-color: #FAC93B; }
.legend .east { background-color: #F88248; }
.legend .new-delhi { background-color: #E6F046; }
.legend .south { background-color: #EE3838; }
.legend .central { background-color: #F5593B; }