#rulers > div {
  position: absolute;
  background: #2f2f2c;
  z-index: 1;
  overflow: hidden;
  -webkit-font-smoothing: none;
}

#rulers #ruler_corner {
  top: 30px;
  left: 50px;
  width: 15px;
  height: 15px;
  border: solid #444 1px;
  z-index: 2;
}

#ruler_x {
  height: 15px;
  top: 30px;
  left: 66px;
  right: 175px;
  border-top: solid #444 1px;
  border-right: solid #444 1px;
}

#ruler_x_cursor {
  height: 15px;
  border-right: dotted #999 1px;
  position: absolute;
  background: #2f2f2c;
}

#ruler_y_cursor {
  width: 15px;
  border-top: dotted #999 1px;
  position: absolute;
  background: #2f2f2c;
}

#rulers.moved #ruler_corner,
#rulers.moved #ruler_x {
  top: 101px;
}

#ruler_y {
  width: 15px;
  top: 46px;
  left: 50px;
  bottom: 40px;
  border-left: solid #444 1px;
  border-bottom: solid #444 1px;
}

#rulers.moved #ruler_y {
  top: 116px;
}


#ruler_x canvas:first-child {
  margin-left: -16px;
}

#ruler_x canvas {
  float: left;
}

#ruler_y canvas {
  margin-top: -16px;
}

#ruler_x > div, 
#ruler_y > div {
  overflow: hidden;
}