application.sass

@import "whitespace-reset", "github", "toggle"
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300,400italic)
@import url(http://fonts.googleapis.com/css?family=Maven+Pro)

html
  position: relative
  min-height: 100%

$app_width: 88%

body
  font-size: 16px
  color: #222
  font-family: Roboto
  margin: 0 0 65px

a, a:visited, a:active
  color: #236FFF
  text-decoration: none
  &:hover
    text-decoration: underline

p
  margin: 0 0 20px 0
  line-height: 1.7
  color: #333

h1, h2
  font-family: "Roboto"

h1
  font-size: 26px
  font-weight: bold
  padding: 0 0 20px 0

h2
  font-size: 21px
  color: #222
  padding: 0 0 12px 0
  font-weight: bold

header
  background: #F57011
  height: 47px
  article
    width: $app_width
    margin: 0 auto
    .logo
      padding: 6px 0 0 0
    nav
      padding: 12px 0 0 0
      float: right
      font-family: "Maven Pro"
      font-weight: medium
      a, a:hover, a:visited, a:active
        margin-right: 30px
        color: white

section
  margin: 0 auto
  width: 650px

section#chapter
  padding: 27px 0 0 0
  line-height: 1.7
  color: #333
  ul
    padding-left: 20px
    padding-bottom: 20px
    li
      list-style-type: disc
  article#markdown
    padding-bottom: 40px
  nav
    padding: 0 0 35px 0
    text-align: center
    position: relative
    height: 20px
    .back, .next, .toc
      display: inline-block
    .back
      float: left
    .next
      float: right
    .toc
      position: absolute
      margin-left: -63px
      left: 50%
      top: 0
      a
        color: #FF7F00

section#marketing
  padding: 38px 0 0 0
  article
    background: white
    width: 580px
    margin: 0 auto
    .logo
      padding: 0 0 25px
    .logo + img
      padding-bottom: 20px
    h1
      padding-bottom: 25px
  article#chapters
    padding-top: 15px
    li
      display: block
      padding-bottom: 15px

.footer_spacing
  height: 60px

footer
  background: #DDDDDD
  height: 65px
  position: absolute
  left: 0
  bottom: 0
  width: 100%
  article#copyright
    float: right
    padding: 20px 15% 0 0
    font-size: 12px
    color: #777
  a, a:active, a:visited, a:hover
    color: #333

code, pre
  font-family: Monaco
  font-size: 14px

code
  background: #E8E8E8
  padding: 2px 5px
  color: black

pre
  padding: 10px 14px 11px
  margin: 0 0 20px
  border-radius: 4px
  overflow-x: auto

article#social_buttons
  img
    padding-right: 25px

.gray_line
  background: #ddd
  height: 1px
  margin: 30px 0 15px
  width: 100%

.comment_info
  margin: 0 0 15px 0