//layout small


//****************  Masthead  ************************
header[role="banner"]
    margin: 0 auto
    text-align: center
    h1
        background: url('/media/img/tree.png') 0 0 no-repeat
        text-indent: -9999px
        width: 151px
        height: 84px
        margin: 0 auto
    h2
        background: url('/media/img/text-centered.png') 0 0 no-repeat
        text-indent: -9999px
        width: 184px
        height: 54px
        margin: 0 auto
nav[role="navigation"], footer[role="contentinfo"] nav
    margin: 1em auto
    border-top: 1px $brown dotted
    border-bottom: 1px $brown dotted
    padding: .5em
    text-align: center
    ul
        margin: .25em 0 .25em -30px
    li
        display: inline
        margin: 0 .125em



//****************  Page Breadcrumbs  ************************

#breadcrumbs
    text-align: center
    li
        display: inline
        
    
      
//****************  Images  ************************

img
    width: 95%
    height: auto

.postpic, .postpicright
    display: block
    width: auto
object, embed
    width: 100%
.postpic
    float: left
    margin: 0.3em 10px 10px 0

.postpicright
    float: right
    margin: 0.3em 0 10px 10px

.postpicleft
    float: left
    margin: 5px

.picfull
    margin-top: 20px

.picwide 
    clear: both
    margin: 1em 0

.figure
    position: relative
    .legend
        display: block
        +transparent_class
        position: absolute
        bottom: 10px
        left: 0
        font-size: 13px
        padding: 8px 0 8px 12px
        width: 95%
        background: $brown
        color: #999999


//****************  Writing Archive Structure ************************
    
.dateline
    text-align: center
.archive
    h1
        font-size: 1.5em
        text-align: center
    article
        padding-bottom: 1em
        border-bottom: 1px #ececec solid
.home
    article
        border: none
        margin-bottom: 2em
    h1
        font-size: 1.2em
        margin: 0
        text-align: center
    img
        float: left
        width: auto
        margin: 20px 8px 0 0
    .sh
        text-transform: uppercase
        font-weight: bold
        font-size: .75em
        margin: 2em 0
//****************  Photo Archive Structure ************************

#photo-galleries
    margin-top: 2em
    h1
        font: 13px bold unquote("Hoefler Text"), Georgia, unquote("Times New Roman"), Times, serif 
        color: white
    li
        margin: 10px 0 0 0


//****************  Entry Structure ************************
.geo, article[role="main"] time
    margin: .5em 0
    display: block
    text-align: center
article[role="main"] 
    margin-top: 3em
    h1
        text-align: center
        font-size: 1.5em
    p > a
        color: $orange
        &:hover
            text-decoration: underline
.footnote
    border-top: 1px $brown dotted
    margin: 1.5em 0 0 0
    padding: 1em 0 0 0
    p
        font-size: .875em !important
        line-height: 20px !important

    
#page-navigation
    margin: 2em auto
    text-align: center
    display: table
    ul
        margin: 0 auto
        width: 100%
        text-align: center
        padding: 0
    li
        margin: 6px auto
        clear: both
        line-height: 24px
        text-align: center
    span
        min-width: 70px
        display: block
        text-align: right
        margin-right: 10px
        margin-top: 2px
        float: left
    a
        display: block
        float: left
        text-align: left
        font-style: italic


//****************  Map Structure ************************

#map-canvas
    border: 10px $brown solid
    width: 95%
    height: 300px
.map-legend 
    h4
        font-size: 1em
        font-weight: bold
        margin: 1em 0 .25em
    li
        display: inline
        &:after
            content: ","
.infowin
    h4
        margin: 0 0 5px 0
        font-weight: normal
    .date
        text-transform: uppercase
        font-size: 11px
        letter-spacing: 1px
    p
        font-size: 1em


//****************  Notes Structure ************************

.notes main 
    margin-top: 3em
.notes .h-entry
    border: none
    padding: 0
    margin-top: 3em
    &:after
        display: block
        content: ""
        margin-top: 3em
        height: 1px
        width: 100%
        background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0))
        background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0))
    //&:last-child:after
    //    background: none

.notes .e-content
    a
        color: $orange
.notes time 
    font-family: sans-serif
.notes .note--twitter
    font-size: .75em
    action a:after, a:first-child:after
        content: "\2219"
        margin-left: .25em
        padding-right: .35em
        padding-left: .35em
    action:last-child a:after
        content: ""
        padding-right: 0
        padding-left: 0
        margin-left: 0
        
.notes--location
    text-align: left
.month--divider
    margin-top: 2em
.month--header
    font-size: .75em
    margin: 0
    letter-spacing: 1px
    text-transform: uppercase
    border-bottom: 1px dotted rgba(0,0,0,0.2)
.permalink .h-entry:after
    background: none 
//*******************  Footer **********************


footer[role="contentinfo"]
    margin-top: 2em
        
nav:after, footer:before,
footer:after, .archive article:after, #archive:after, article[role="main"] header:after, #map-canvas:after
    content: "."
    display: block
    height: 0
    clear: both
    visibility: hidden


//******************************************************
//******************************************************
//**********       DARK BROWN PAGES       **************
//******************************************************
//******************************************************


.dark    
    background: $brown
    body
        color: #ccc
    *:focus
        outline: $orange dotted thin
    a
        color: $orange
        &:visited 
            color: white
            text-decoration: none
        &:hover
            color: white
            text-decoration: none
        &:visited > :hover
            color: $orange
    img
        border: none
    header[role="banner"], footer[role='contentinfo']
        margin-bottom: .5em
        nav
            margin-bottom: 0
        a
            color: white
            &:hover
                color: $orange
            &:visited
                color: white
        h1
            background: url('/media/img/tree.png') left -84px no-repeat
        h2
            background: url('/media/img/text-centered.png') 0 -60px no-repeat
    header[role="banner"]
        border-bottom: #cccccc 1px solid
    article[role="main"]
        .legend
            bottom: 0
    // National parks page
    .park
        text-align: center
        position: relative
        h1
            font-size: 1.5em
            margin-bottom: 5px
            
        h2
            font-size: 1.125em
            margin: 0
        img
            width: 100%
        .legend
            position: relative
        .meta
            height: 0
        .buttons li
            margin: 5px
            display: inline
            text-transform: uppercase
            font: normal .5em unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif
        .map-container
            width: 469px
            height: 392px
            position: absolute
            right: 20px
            bottom: 60px
            z-index: 2000
            margin: 0
            padding: 0
            background: url("/media/img/mapbg-dark.png") no-repeat top left
        .map-wrapper
            width: 400px
            height: 328px
            margin: 37px 0 0 44px
        .more-container
            width: 405px
            height: 260px
            position: absolute
            right: -30px
            bottom: 40px
            z-index: 2000
            background: url("/media/img/parkbg.png") no-repeat top left
            font: normal .9em/25px unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif
            dl
                margin-top: 45px
                margin-left: 45px
                text-align: left
                dt,dd
                    
                    margin: 4px 0
                   
                    color: white
                dt
                    clear: left
                    float: left
                    width: 65px
                    //border-bottom: 1px solid #999
                    font-weight: bold
                    line-height: 25px
                    font-size: 0.7em
                    text-transform: uppercase
                    text-align: right
                    margin-right: 8px
                dd
                    float: left
                    width: 250px
                    overflow: hidden
                    //border-bottom: 1px solid #999
                    a:hover
                        color: $orange


//******************************************************
//******************************************************
//**********         BLACK PAGES           **************
//******************************************************
//******************************************************
.black
    background: #14100b
    color: #ccc
    *:focus
        outline: $orange dotted thin
    a
        text-decoration: none
        color: $orange
        &:visited
            color: white
            text-decoration: none
        &:hover
            color: white
            text-decoration: none
    #breadcrumbs
        color: #ccc
    header[role="banner"]
        h1
            background: url('/media/img/tree.png') left -168px no-repeat
        h2
            background: url('/media/img/text-centered.png') 0 -121px no-repeat
    nav[role="navigation"]
        border-top: 1px #ccc dotted
        border-bottom: 1px #ccc dotted
    .directions
        display: none
    #slides
        width: 100%
    h3
        font-size: 1em
        margin: 0 .5em
    h6
        display: none
    #slides
        article
            clear: both
            margin: 20px 0
        img
            width: 100%
            border: none
    .photo-options, .map-link
        display: none
    .figcaption
        clear: both
        background: #1a1713
        -moz-border-radius: 0 0 .5em .5em
        -webkit-border-radius: 0 0 .5em .5em
        border-radius: 0 0 .5em .5em
        color: white
        margin: -.25em 0 0 0
        padding: 1em 0 1em 0
        z-index: 100
    .caption
        width: 100%
        float: none
        p
            font: normal .75em Helvetica, Verdana, sans-serif
            margin: .5em 0 0 .75em
            padding-bottom: .25em
    footer[role='contentinfo']
        nav
            border-top: #ccc 1px dotted
            border-bottom: #ccc 1px dotted
        p
            color: #ccc