---
---
$font: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace
$maincolor: #678b22

body
    margin: 0
    padding: 0
    background: #eaeaea url("../images/bkg-white.png") 0 0
    color: #151515
    font:
        size: 16px
        family: $font
    line-height: 1.5


// General & 'Reset' Stuff

.container
    width: 90%
    max-width: 900px
    margin: 0 auto

section
    display: block
    margin: 0 0 20px 0

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

li
    line-height: 1.4


// Header, <header>
   header   - container
   h1       - project name
   h2       - project description

header
    background: rgba(black, 0.1)
    width: 100%
    border-bottom: 1px dashed $maincolor
    padding: 20px 0
    margin: 0 0 40px 0

header h1, #pagetitle
    font:
        size: 30px
        weight: bold
        family: $font
    line-height: 1.5
    color: $maincolor
    text-shadow: 0 1px 1px rgba(black, 0.1), 0 0 5px rgba(lighten($maincolor, 33%), 0.1), 0 0 10px rgba(lighten($maincolor, 33%), 0.1)
    -webkit-font-smoothing: antialiased

// Site name
header h1
    letter-spacing: -1px
    margin: 0 0 0 -40px

    &:before
        content: "./ "
        font-size: 24px

// Site description
header h2
    font:
        size: 18px
        weight: 300
    color: #666

#downloads .btn
    display: inline-block
    text-align: center
    margin: 0


// Main Content

#main_content
    width: 100%
    -webkit-font-smoothing: antialiased

    h1
        font-size: 28px

    h2
        font-size: 24px

    h3
        font-size: 18px

    h4
        font-size: 14px

    h5
        font-size: 12px
        text-transform: uppercase
        margin: 0 0 5px 0

    h6
        font-size: 12px
        text-transform: uppercase
        color: #999
        margin: 0 0 5px 0

    table
        margin: 0 0 20px 0
//        width: 100%;

    th
        text-align: left
        border-bottom: 1px dashed $maincolor
        padding: 5px 10px

    td
        padding: 5px 10px


section img
    max-width: 100%

h1, h2, h3, h4, h5, h6
    font:
        weight: normal
        family: $font
    color: $maincolor
    letter-spacing: -0.03em
    text-shadow: 0 1px 1px rgba(black, 0.1), 0 0 5px rgba(lighten($maincolor, 33%), 0.1), 0 0 10px rgba(lighten($maincolor, 33%), 0.1)

dt
    font:
        style: italic
        weight: bold

ul li
    list-style: none

    &:before
        content: ">>"
        font:
            family: $font
            size: 13px
        color: $maincolor
        margin:
            left: -37px
            right: 21px
        line-height: 16px

blockquote
    color: #aaa
    padding-left: 10px
    border-left: 1px dotted #666

code
    padding: 3px
    white-space: nowrap

pre
    padding: 10px

pre, code
    background: rgba(black, 0.1)
    border: 1px solid rgba(white, 0.85)
    font-size: 14px
    color: $maincolor
    border-radius: 2px
    -moz-border-radius: 2px
    -webkit-border-radius: 2px
    text-wrap: normal
    overflow: auto
    overflow-y: hidden


// Reset styles if code is inside pre
   (This is what you get from re-using CSS!)

pre > code
    background: none
    border: 0 none
    white-space: pre
    padding: 0

hr
    height: 0
    border: 0
    border-bottom: 1px dashed $maincolor
    color: $maincolor


// Buttons

.btn
    display: inline-block
    background: -webkit-linear-gradient(top, rgba(215, 215, 215, 0.3), rgba(220, 220, 220, 0.3) 50%, rgba(245, 245, 245, 0.3) 50%, rgba(255, 255, 255, 0.3))
    padding: 8px 18px
    border-radius: 50px
    border: 2px solid rgba(white, 0.7)
    border-bottom: 2px solid rgba(white, 0.7)
    border-top: 2px solid rgba(white, 1)
    color: rgba(40, 40, 40, 0.8)
    font:
        family: Helvetica, Arial, sans-serif
        weight: bold
        size: 13px
    text-decoration: none
    text-shadow: 0 -1px 0 rgba(black, 0.75)
    box-shadow: inset 0 1px 0 rgba(black, 0.05)

    &:hover
        background: -webkit-linear-gradient(top, rgba(215, 215, 215, 0.6), rgba(220, 220, 220, 0.6) 50%, rgba(245, 245, 245, 0.8) 50%, rgba(255, 255, 255, 0.8))

    .icon
        display: inline-block
        width: 16px
        height: 16px
        margin: 1px 8px 0 0
        float: left

.btn-github .icon
    opacity: 0.6
    background: url("../images/blacktocat.png") 0 0 no-repeat

// Links
   a, a:hover, a:visited

a
    color: #41a0d3
    text-shadow: 0 0 5px rgba(104, 182, 255, 0.5)

    &:visited
        color: #949

// Clearfix

.cf:before, .cf:after
    content: ""
    display: table

.cf:after
    clear: both

.cf
    zoom: 1