#plot_area
  display: inline-block
  position: relative
  width: 100%
  // let's occupy 50% of the screen. Remember to keep up to date with network's ratio!
  padding-bottom: 50%
  vertical-align: top
  overflow: hidden
  margin-bottom: 20px

.tooltip
  background: rgba(80, 80, 80, 0.9)
  color: #fff
  padding: 5px 9px
  border: 1px black
  border-radius: 3px

.site rect
  stroke: #555

  &.phosphorylation
    fill: rgb(67, 162, 202)

  &.acetylation
    fill: rgb(186, 228, 188)

  &.ubiquitination
    fill: rgb(123, 204, 196)

  &.methylation
    fill: rgb(240, 249, 232)

  &.multi_ptm
    fill: rgb(8, 104, 172)

.axis
  shape-rendering: crispEdges

  line
    stroke: #fff

  .minor
    stroke-opacity: .5

  line, path
    fill: none
    stroke: #000

.needle
  line
    stroke: black

#plot_area
  display: inline-block
  position: relative
  width: 100%
  // let's occupy 50% of the screen. Remember to keep up to date with network's ratio!
  padding-bottom: 50%
  vertical-align: top
  overflow: hidden
  margin-bottom: 20px

.tooltip
  background: rgba(80, 80, 80, 0.9)
  color: #fff
  padding: 5px 9px
  border: 1px black
  border-radius: 3px

  ul
    margin-bottom: 0
    padding-left: 20px

.site rect
  stroke: #555

  &.phosphorylation
    fill: rgb(67, 162, 202)

  &.acetylation
    fill: rgb(186, 228, 188)

  &.ubiquitination
    fill: rgb(123, 204, 196)

  &.methylation
    fill: rgb(240, 249, 232)

  &.multi_ptm
    fill: rgb(8, 104, 172)

.axis
  shape-rendering: crispEdges

  line
    stroke: #fff

  .minor
    stroke-opacity: .5

  line, path
    fill: none
    stroke: #000

.needle
  line
    stroke: black

  circle
    &:hover
      cursor: pointer

Change cursor over circles and improve ul styling
Change cursor over circles and improve ul styling
