@import _reset.sass
@import _mixins.sass

// grid = 988 with 9 cols at 92px plus 20px gutters (via http://gridulator.com/)
// font-sizes:
// base: 16px = 1em
// 10px = .625em
// 12px = .75em
// 14px = .875em
// 16px = 1em
// 17px = 1.0625em (body text in articles)
// 18px = 1.125em
// 24px = 1.5em
// 30px = 1.875em
// 32px = 2em


html
    height: 100%

body
    font: normal 100% unquote("Hoefler Text"), Georgia, unquote("Times New Roman"), Times, serif 
    color: $brown
    margin: 0 1.125em
    min-height: 100%
    position: relative
    padding: 0
    //max-width: 61.75em      /* 988px / 16px = 61.75em */
    max-width = 20.9375em /* 3 cols @ 92px + 20px gutter  -- 335px / 16px = */
    background: white /* url('../img/988px-9col-92w-20gut.png') 217px 0 repeat-y */
    

/* ###################Typography############# */    
p
    font-size: 1.0625em /* 17px / 16px */
    line-height: 1.5em /* 24px / 16px */
footer p
    font-size: .625em
    text-align: center
a
    text-decoration: none
    color: $brown
    &:hover
        color: $orange
        
ul li 
    display: inline
    margin: 0 .125em

.dateline, nav li, .breadcrumbs li, .meta p
    text-transform: uppercase
    font-size: .75em
    letter-spacing: .0625em
.meta p
    text-align: center
img 
    border: 10px $brown solid


#featured-image img
    width = 95% /* 315 /  520 */
    
h1
    font: normal 1.875em Helvetica, Verdana, sans-serif
    letter-spacing: 0.5px
    text-align: center
#archive article h1
    font: normal 1.5em Helvetica, Verdana, sans-serif
    letter-spacing: 0.5px
    text-align: center
    text-transform: none
    margin: 1.875em 0 .875em 0
#archive h1
    font-weight: 700
    font-size: .75em
    text-transform: uppercase
    text-align: left
.footnote
    font-size: .875em
#post-metadata 
    margin-top: 0
    border-top: 1px $brown dotted
    p
        font-size: .875em
        text-align: left
/* ######### layout small  ################*/

header
    margin: 0 auto 1em auto
    text-align: center
    #logo h1
        background: url('../img/tree.png') 0 0 no-repeat
        text-indent: -9999px
        width: 151px
        height: 84px
        margin: 0 auto
    #logo h2
        background: url('../img/text.png') 0 0 no-repeat
        text-indent: -9999px
        width: 184px
        height: 54px
        margin: 0 auto
nav
    margin: 1em auto 2em auto
    text-align: center
    border-top: 1px $brown dotted
    border-bottom: 1px $brown dotted
    width: 100%
    padding: .25em 0
nav:after, footer:before
    content: "."
    display: block
    height: 0
    clear: both
    visibility: hidden

footer
    margin-top: 2em
    

.dateline
    text-align: center
    time
        display: block

.postpic, .post-image
    float: left
    margin: 0 .625em .625em 0
    
.postpic, .postpicright
    width: auto
article img
    width: 95%
article object, article embed
    width: 100%
/* misc classes */
.hide
    display: none
    
//.formatted
//    column-count: 3
//    column-gap: 1.125em
//    -moz-column-count: 3
//    -moz-column-gap: 18px
//    -webkit-column-count: 3
//    -webkit-column-gap: 1.125em