body {
  background: lightcyan;
  padding: 30px 0; }

h1 {
  margin-bottom: 20px; }

.note {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  background: black;
  border-radius: 100% 70% 100% 70%; }
  .note:after {
    display: block;
    content: "";
    border-right: 1px solid #000;
    position: absolute;
    right: 0;
    bottom: 7px;
    width: 1px;
    height: 38px; }
  .note.d1 {
    top: 8px; }
  .note.d2 {
    top: 16px; }
  .note.d3 {
    top: 24px; }
  .note.d4 {
    top: 32px; }
  .note.d5 {
    top: 40px; }
  .note.d6 {
    top: 48px; }
  .note.d0:after, .note.d1:after, .note.d2:after {
    bottom: -29px;
    right: 14px; }

.staff {
  border: 1px solid #7a7874;
  position: relative;
  width: 960px;
  margin: 20px auto; }
  .staff .notes {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 40px; }
    .staff .notes .note {
      margin: 0 10px; }
      .staff .notes .note:nth-child(4n+1) {
        margin-left: 50px; }
      .staff .notes .note:first-child {
        margin-left: 10px; }
  .staff .row {
    border-top: 1px solid #7a7874;
    height: 15px; }
    .staff .row:first-child {
      border-top: 0; }