fan.css

text {
  font-family: sans-serif;
}

.printable .arc.person {
  fill: white;
  stroke: lightGrey;
  stroke-width: 2px;
}

.printable .radial {
  stroke-width: 2px;
  stroke: #999;
}

.printable text {
  text-anchor: middle;
  pointer-events: none;
}

.fan-tip {
  pointer-events: none;
}

.fan-tip .tip-inner {
  text-align: left;
}

.fan-tip .tip-arrow {
  display: none;
}

.person {
  cursor: pointer;
}

.circle.person {
  stroke: #999;
  stroke-width: 2px;
}

.rect.person {
  stroke: white;
  stroke-width: 4px;
}

.arc.person {
  stroke: white;
  stroke-width: 4px;
}

.fan-borders path {
  stroke: white;
  stroke-width: 4px;
  fill: transparent;
  pointer-events: none;
}

.indicator {
  pointer-events: none;
}

.radial {
  stroke: #ccc;
  fill: transparent;
  stroke-width: 2px;
  stroke-linecap: square;
}

.person, .person.inactive {
  fill: #eee;
  background-color: #eee;
}

.person.active {
  fill: #fbe;
  background-color: #fbe;
}

.person.clean {
  fill: rgb(150, 230, 255);
  background-color: rgb(150, 230, 255);
}

.person.complete {
  fill: rgb(115, 255, 176);
  background-color: rgb(115, 255, 176);
}

.person.hard {
  fill: #f00;
  background-color: #f00;
}

.person-photo {
  cursor: pointer;
}

.hovertext text {
  display: none;
}

.hovertext .background {
  stroke: black;
  stroke-width: 8px;
  fill: black;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.hovertext .foreground {
  stroke: none;
  fill: white;
}

.hovertext path {
  fill: transparent;
}

.hovertext:hover text {
  display: block;
}
/*
.person-photo:hover {
  mask: url("#circle");
}
*/