@import base.sass


$brown: #201a11
$orange: #b53a04

*:focus
    outline: $orange dotted thin

body
    background: $brown

a
    text-decoration: none
    color: $orange
    &:visited
        color: white
        text-decoration: none
    &:hover
        color: white
        text-decoration: none

header[role="banner"]
    border-bottom: #cccccc 1px solid
    margin-bottom: 1em
    a
        color: white !important
        &:hover
            color: $orange unquote("!important")
    h1
        background: url('../img/tree-dark.png') left bottom no-repeat !important
    h2
        background: url('../img/text-dark.png') left bottom no-repeat !important

            
#breadcrumbs
    color: white
    a
        color: white
        &:hover
            color: $orange
article[role="main"] .geo a
    color: white
article[role="main"] .geo a:hover
    color: $orange
footer
    color: #cccccc
    a
        color: #cccccc !important
        &:hover
            color: $orange !important

img
    &.postpic, &.postpicright
        border: none
    &.picfull
        border: none

#post-body
    color: #cccccc

aside, header
    color: #cccccc

aside section
    a
        color: #cccccc !important
        &:hover
            color: $orange !important

#post-metadata
    border-top: #555555 1px dotted
    border-bottom: #555555 1px dotted
    p
        color: #cccccc

.addendum dt
    margin-left: -30px !important

h4 a.disqus-link-count
    color: #cccccc !important

#writing-detail
    img
        border: none
    .legend
        padding: 8px


#parks article
    position: relative
    display: block
    margin: 0 0 2em 0
    h1
        display: block
        background: $brown
        +transparent_class
        color: white
        margin: 0 0 0 10px
        width: 100%
        text-align: left
        
    .figure
        position: relative
        border: none
    .legend 
        position: relative
        width: 100%
        padding: 0
        margin: 0
        h2
            font: normal .875em Helvetica, Verdana, sans-serif
            color: white
            margin: 0 0 1.3em 1em

    .buttons
        display: block
        padding: 0
        background: $brown
        font-size: 10px
        line-height: 1em
        color: white
        text-align: center
        text-transform: uppercase
        margin: 0 auto
        li
            display: inline
            margin: 0 .25em
            font: normal 1em Helvetica, Verdana, sans-serif
        a
            font-weight: bold
        

    .map-container
        width: 469px
        height: 392px
        position: absolute
        right: 20px
        bottom: 60px
        z-index: 2000
        margin: 0
        padding: 0
        background: url("../img/mapbg-dark.png") no-repeat top left
    .map-wrapper
        width: 400px
        height: 328px
        margin: 37px 0 0 44px

    .meta
        height: 0
    .more-container
        width: 405px
        height: 260px
        position: absolute
        right: -30px
        bottom: 40px
        z-index: 2000
        background: url("../img/parkbg.png") no-repeat top left
        dl
            margin-top: 45px
            margin-left: 45px
            dt,dd
                font-size: 0.9em
                line-height: 25px
                margin: 4px 0
                font-family: Helvetica, Verdana, sans-serif
                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
            dd
                float: left
                width: 250px
                overflow: hidden
                //border-bottom: 1px solid #999
                a:hover
                    color: $orange



//############# Photo Pages #################
body.image_gallery
    background: #14100b !important
    .directions
        font: normal .675em Helvetica, Verdana, sans-serif
        color: #414144
        text-align: center
        margin-bottom: 1.75em
    article
        clear: both
        margin-bottom: 5em
    h6
        text-align: center
        text-transform: uppercase
        font-size: .625em
        margin: 0 0 1.25em 0
        a
            color: #b5b5b5
        a:hover
            color: $orange
    #slides
        width: 62.5em
        img
            border: none
            margin: 0 auto
            text-align: center
            padding: 0
            float: left
    .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
        h3
            float: left
            margin: 0 0 1em 1em
            padding: 0
            font-weight: normal
        .caption
            border-right: 1px solid #1f1f21
            width: 70%
            float: left
            padding-right: 1em
            p
                clear: both
        .map-link
            float: right
            background: #211d19
            line-height: 1em
            color: white
            text-align: center
            text-transform: uppercase
            margin: 0 .25em
            font: normal .75em Helvetica, Verdana, sans-serif
            padding: .5em 1em
            -moz-border-radius: 1em
            -webkit-border-radius: 1em
            border-radius: 1em
        .map-link:hover
            background: $orange
        .photo-options
            float: left
            margin-left: 1em
        li
            display: inline
            margin: 0 .25em
            font: normal 1em Helvetica, Verdana, sans-serif
        a
            font-weight: bold
        p   
            margin: 0 1em
            color: #74757A
            font-size: 1em
        .details, .camera
            font: normal .75em Helvetica, Verdana, sans-serif
            color: #414144
            a
                color: #414144
                font-weight: normal
            a:hover
                color: $orange
    .figcaption:after
        content: "."
        display: block
        height: 0
        clear: both
        visibility: hidden
        
    .meta
        margin: 43px 0 0 37px
        color: black
        dl
            font-size: 13px
        dt
            clear: left
            float: left
            line-height: 16px
            margin: 4px 0
            width: 100px
            //border-bottom: 1px solid #999
        dd
            float: left
            width: 125px
            margin: 4px 0 4px 4px
            line-height: 16px
            a
                color: black !important
            a:hover
                color: $orange !important


    .map-container
        //clear: left
        width: 469px
        height: 392px
        position: relative
        bottom: -180px
        left: 280px
        z-index: 2000
        margin: 0
        padding: 0
        background: url("../img/mapbg.png") no-repeat top left

    .map-wrapper
        width: 400px
        height: 328px
        margin: 37px 0 0 44px
        position: relative
        top: -525px

@media only screen and (max-width: 480px)
    body.image_gallery
        #slides
            width: 100%
        h3
            margin-left: .5em !important
            margin-bottom: .5em !important
        h6
            display: none
        #slides
            img
                width: 100%
        .photo-options, .map-link
            display: none
        .figcaption
            padding: 1em 0 .5em 0
        .caption
            width: 100% !important
            float: none !important
            p
                font: normal .75em Helvetica, Verdana, sans-serif
                margin: 0 0 0 .75em
                padding-bottom: .25em
            

@media only screen and (min-width: 800px)
    #parks article
        h1
            margin: 0
            font-size: 2em
            padding-left: .25em
            position: absolute
            top: 10px
            left: 10px
            line-height: 2em
            z-index: 1000
        .legend 
            position: absolute  
            padding: .25em 1em
            height: 4em
            h2
                float: left
                font-size: 1.2em
                margin: 0
                line-height: 2.6em
        .buttons
            +transparent_class
            float: right
            margin: 2em 2em 0 0
            a
                padding: .875em 1.75em .75em
                background: #463215
                color: #fff
                -moz-border-radius: 25px
                -webkit-border-radius: 25px
                border-radius: 25px
            a:hover
                background: $orange
                color: white     
    
        
    #post-body
        .legend
            width: 100% !important
    
    
    
.ie :focus
    outline: 0
.ie header[role="banner"]
    border-bottom: #cccccc 1px solid !important
    h2
        background: url('../img/text-dark.png') left bottom no-repeat !important
.ie #parks .buttons 
    a
        padding: 10px
        line-height: 2em