css.styl

.guides
.example
  box-sizing: border-box

.intro
.guides
  font-family: "proxima-nova-1","proxima-nova-2",sans-serif

.guides
  float: left
  position: relative

  code
    background-color: #F8F8F8
    border-radius: 3px
    border: 1px solid #DDD
    margin: 0
    padding: 0
    white-space: nowrap

  .guide
    left: 0
    position: absolute
    top: 100px

  .hidden
    display: none

  a
    color: #4183C4
    text-decoration: none
    word-break: break-word

    &:hover
      text-decoration: underline

.intro
  a
    color: #4183C4
    text-decoration: none

    &:hover
      text-decoration: underline

  h1
    font-size: 24px

    small
      color: #888
      display: block
      font-size: 14px
      font-weight: normal
      text-transform: uppercase

.example
  background: #fff
  border: 1px solid #ddd
  float: left
  margin-right: 3.8%
  padding: 12px
  position: relative

  .key
    color: navy

  .value
    color: #DD1144

  .boolean
    color: purple
    font-weight: 600

  a
  a:hover
    color: #444
    display: inline-block
    text-decoration: none
    font-weight: normal

  a:hover
    background: #F1F1F1

  a.trigger
    background: #444
    border-radius: 20px
    color: #FFF
    font-size: 10px
    opacity: .5
    padding: 5px 10px
    position: absolute
    right: 12px
    top: 12px
    transition: opacity 0.5s ease-in-out

    &:hover
      background: #444
      color: #FFF
      opacity: 1