body
  padding: 50px
  font: 16px / 1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif
  color: #000
  font-weight: 500

h1, h2, h3, h4, h5, h6
  color: #222
  margin: 0 0 20px

p, ul, ol, table, pre, dl
  margin: 0 0 20px

h1, h2, h3
  line-height: 1.4em

h1
  font-size: 28px

h2
  color: #393939
  margin-top: 1.4em

h3
  color: #393939
  margin-bottom: 0.6em

h4, h5, h6
  color: #494949
  margin-bottom: 10px

a
  color: #0011cf
  font-weight: 600
  text-decoration: none
  &:hover
    color: #069
  small
    font-size: 11px
    color: #777
    margin-top: -0.6em
    display: block
  &:hover small
    color: #777

.wrapper
  width: 860px
  margin: 0 auto

blockquote
  border-left: 1px solid #e5e5e5
  margin: 0
  padding: 0 0 0 20px
  font-style: italic

code
  font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal
  color: #333
  font-size: 12px

pre
  font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal
  color: #333
  font-size: 12px
  padding: 8px 15px
  background: #f8f8f8
  border-radius: 5px
  border: 1px solid #e5e5e5
  overflow-x: auto

table
  width: 100%
  border-collapse: collapse

th, td
  text-align: left
  padding: 5px 10px
  border-bottom: 1px solid #e5e5e5

dt
  color: #444
  font-weight: 700

th
  color: #444

img
  max-width: 100%

header
  width: 270px
  float: left
  position: fixed
  ul
    list-style: none
    height: 40px
    padding: 0
    background: #eee
    background: -moz-linear-gradient(to bottom, #f8f8f8 0%, #dddddd 100%)
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f8f8), color-stop(100%, #dddddd))
    background: -webkit-linear-gradient(to bottom, #f8f8f8 0%, #dddddd 100%)
    background: -o-linear-gradient(to bottom, #f8f8f8 0%, #dddddd 100%)
    background: -ms-linear-gradient(to bottom, #f8f8f8 0%, #dddddd 100%)
    background: linear-gradient(to bottom, #f8f8f8 0%, #dddddd 100%)
    border-radius: 5px
    border: 1px solid #d2d2d2
    box-shadow: inset white 0 1px 0, inset rgba(0, 0, 0, 0.03) 0 -1px 0
    width: 270px
  li
    width: 89px
    float: left
    border-right: 1px solid #d2d2d2
    height: 40px
    &:first-child a
      border-radius: 5px 0 0 5px
    &:last-child a
      border-radius: 0 5px 5px 0
  ul a
    line-height: 1
    font-size: 11px
    color: #999
    display: block
    text-align: center
    padding-top: 6px
    height: 34px
    &:hover
      color: #999
      background: -moz-linear-gradient(to bottom, white 0%, #dddddd 100%)
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #dddddd))
      background: -webkit-linear-gradient(to bottom, white 0%, #dddddd 100%)
      background: -o-linear-gradient(to bottom, white 0%, #dddddd 100%)
      background: -ms-linear-gradient(to bottom, white 0%, #dddddd 100%)
      background: linear-gradient(to bottom, white 0%, #dddddd 100%)
    &:active
      -webkit-box-shadow: inset 0px 2px 2px 0px #ddd
      -moz-box-shadow: inset 0px 2px 2px 0px #ddd
      box-shadow: inset 0px 2px 2px 0px #ddd

strong
  color: #222
  font-weight: 700

header ul
  li + li
    width: 88px
    border-left: 1px solid #fff
    + li
      border-right: none
      width: 89px
  a strong
    font-size: 14px
    display: block
    color: #222

section
  width: 500px
  float: right
  padding-bottom: 50px

small
  font-size: 11px

hr
  border: 0
  background: #e5e5e5
  height: 1px
  margin: 0 0 20px

footer
  width: 270px
  float: left
  position: fixed
  bottom: 50px

@media print, screen and (max-width: 960px)
  div.wrapper
    width: auto
    margin: 0
  header, section, footer
    float: none
    position: static
    width: auto
  header
    padding-right: 320px
  section
    border: 1px solid #e5e5e5
    border-width: 1px 0
    padding: 20px 0
    margin: 0 0 20px
  header
    a small
      display: inline
    ul
      position: absolute
      right: 50px
      top: 52px

@media print, screen and (max-width: 720px)
  body
    word-wrap: break-word
  header
    padding: 0
    ul, p.view
      position: static
  pre, code
    word-wrap: normal

@media print, screen and (max-width: 480px)
  body
    padding: 15px
  header ul
    display: none

@media print
  body
    padding: 0.4in
    font-size: 12pt
    color: #444
