@import 'compass/css3'

= scrollbar
  &::-webkit-scrollbar
    width: 10px
    height: 10px

  &::-webkit-scrollbar-thumb
    background: rgba(0, 0, 0, 0.1)
    border-radius: 5px
    border: solid 2px (#f7f7f2 * 1.04)

  &:hover::-webkit-scrollbar-thumb
    background: rgba(0, 0, 0, 0.2)

body, input, td, textarea
  font-family: Muli, Helvetica Neue, helvetica, sans-serif
  font-size: 14px
  line-height: 1.5

html
  background: #505060 * 0.8
  padding: 60px 20px

@media screen and (max-width: 800px)
  html
    padding: 20px
@media screen and (max-width: 500px)
  html
    padding: 0

.background
  position: fixed
  top: 0
  left: 0
  height: 100%
  width: 100%
  z-index: -2
  background: url(bg.jpg)
  background-size: 200% 200%
  opacity: 1

.all
  position: relative
  z-index: 1

  max-width: 700px
  min-width: 400px
  margin: 0 auto
  padding: 40px
  +box-shadow(1px 0 0 rgba(black, 0.05), -1px 0 0 rgba(black, 0.05), 0 0 4px rgba(black, 0.1), 0 0 0 5px rgba(black, 0.05))
  +border-radius(2px)
  background: #fff
  color: #333

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

p
  margin: 25px 100px 25px 0

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

h1
  text-align: left
  font-size: 26pt
  line-height: 30pt
  color: #ccc

  margin: -40px -40px 40px -40px
  padding: 40px 40px
  border-bottom: solid 1px #f5f5f5

  font-weight: 100

  overflow: hidden

// Back button!
h1 .back
  float: right

  display: inline-block
  padding: 0 20px
  height: 32px
  line-height: 32px

  font-size: 9pt

  +transition(all 100ms linear)
  background-color: white
  +box-shadow(inset 0 0 0 1px rgba(black, 0.1), inset 0 2px 0 rgba(white, 0.5))
  +border-radius(3px)

  color: #aaa
  text-shadow: 0 1px 0 rgba(white, 0.9)
  text-decoration: none

  &:hover
    background-color: #fafafa
    +background(linear-gradient(top, #fafafa, #fafafa * 0.98))
    +box-shadow(inset 0 0 0 1px rgba(black, 0.2), inset 0 2px 0 rgba(white, 0.5), 0 1px 3px rgba(black, 0.05))

  &:active
    +box-shadow(inset 0 0 0 1px rgba(black, 0.1), inset 2px 2px 4px rgba(black, 0.1))

  &:before
    content: '\238b'
    margin-right: 5px
    color: #888

// Individual headings
h2, h3
  color: #38d
  font-size: 1.2em
  padding-bottom: 10px
  font-weight: normal

h3
  font-size: 1.3em

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

// Blocks!
pre, ul
  line-height: 1.6
  background: (#f7f7f2 * 1.04)
  padding: 20px
  +box-shadow(inset 0 3px 2px -2px rgba(black, 0.1))

  text-shadow: 0 1px 0 rgba(white, 0.9)

  border-top: solid 1px #eee
  border-bottom: solid 1px #eee

  overflow-x: auto
  +scrollbar

  margin-left: -40px
  margin-right: -40px
  padding: 20px 40px
  // border: solid 1px #eee
  // +border-radius(2px)

ul
  padding-left: 60px
  list-style-type: circle

// Code block
h2+pre, h3+pre
  margin-top: -16px

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

  li
    width: 20%
    min-width: 100px
    float: left

  a
    display: block
    text-decoration: none
    padding: 7px 8px
    +border-radius(4px)

    color: #558
    font-weight: normal
    font-size: 9pt

  a:before
    content: '\203a'
    color: #999
    margin-right: 7px

  a:visited
    opacity: 0.8

  a:hover
    background: #eef
    +box-shadow(inset 0 -1px 0 rgba(black, 0.05), inset 0 0 0 3px rgba(black, 0.03))

  li:first-letter
    text-transform: uppercase

@import '_prettify'