@import 'compass/css3'

body
  font-family: 'pt sans', sans-serif
  font-size: 14px
  line-height: 1.5

html
  background: #505060

body
  width: 800px
  margin: 20px auto
  padding: 20px
  +border-radius(2px)
  +box-shadow(0 2px 3px rgba(black, 0.2))
  background: #fafafa
  color: #333

p, ul, ol, pre
  margin: 15px 0

h1, h2, h3, h4, h5, h6
  margin: 40px 0 15px 0

h1
  font-family: georgia, serif
  text-align: center
  font-size: 24pt
  color: #aaa
  font-style: italic
  font-weight: normal
  margin: 10px 0
  padding: 10px 0
  border-bottom: dotted 1px #ddd
  border-top: dotted 1px #ddd

h2, h3
  color: #88a
  font-size: 1.5em
  border-bottom: solid 1px #ddd
  padding-bottom: 3px

h3
  font-size: 1.3em

pre, code
  font-family: monaco, monospace
  font-size: 12px
  color: #444

pre
  line-height: 1.6
  background: #f7f7f2
  padding: 10px 35px
  +box-shadow(inset 0 0 5px rgba(black, 0.1))
  overflow-x: auto

  margin-left: -20px
  margin-right: -20px

h2+pre, h3+pre
  border-top: solid 2px #c0c0dd
  margin-top: -16px

ul.pages
  &, li
    margin: 0
    padding: 0
    list-style-type: none

  &
    overflow: hidden
    margin: 40px 0

  li
    width: 20%
    float: left

  a
    display: block
    text-decoration: none
    padding: 2px 5px
    +border-radius(3px)

  a:hover
    background: #eee

  li:first-letter
    text-transform: uppercase


@import '_prettify'