.harvey {
  display: inline-block;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  border: solid 1px #939598;
  overflow: hidden;
}
.harvey:hover {
  opacity: .5;
}
.harvey.hover:after {
  border-color: #f7931d;
  background-color: #f7931d;
}
.harvey.quarters:before {
  content: ' ';
  display: block;
  border: solid 1px transparent; 
  background: #0000ee;
  width: 18px;
  height: 18px;
}
.harvey.half:before, .harvey.three-quarters:before {
  height: 38px;
}
.harvey.three-quarters:after {
  content: ' ';
  display: block;
  border: solid 1px transparent; 
  background-color: #0000ee;
  margin-top: -21px;
  width:38px;
  height: 19px;
}
.harvey.quarters.full:before {
  height: 38px;
  width: 38px;
}
.harvey.reverse.quarters:before {
  margin: 0 0 0 19px;
}
.harvey.disabled {
  border-color: #e0e0e0;
}
.harvey.disabled:before, .harvey.disabled:after {
  background-color: #e0e0e0;
}
.harvey.active {
  border-color: #f7931d;
}
.harvey.active:before, .harvey.active:after {
  background-color: #f7931d;
}