//768px 
@media only screen and (min-width: 768px)

    //****************  Masthead  ************************
    
    header[role="banner"]
        margin-top: 2em
        height: 60px
        padding-bottom: 12px
        border-bottom: 1px solid $brown
        margin-bottom: 2em
        h1
            float: left
            width: 160px
            margin-top: -12px
        h2
            background: url('/media/img/text.png') 0 0 no-repeat
            margin-top: 5px
            float: left
        nav[role="navigation"]
            border: none
            float: left
            margin-left: 2em
            ul
                margin-top: 14px
    
    #breadcrumbs
        text-align: left


    //writing archives
    .archive
        article
            margin-bottom: 2em
            padding-bottom: 2em
            border: none
        h1, p
            float: left
            text-align: left
            margin: 0
        p
            line-height: 1.25em
        h1
            line-height: 2.4em
            margin-top: .15em
            width: 100%
        .dateline
            clear: left
            width: 38%
            
        .hyphenate
            text-align: justify
            width: 38%
            margin-top: .5em
            font-size: 1em
        time
            display: inline
            float: right
        img
            float: right
            width: 56%
    .home
        article
            clear: both
            min-height: 300px
            h1
                margin-top: 2em
                text-align: left
            .dateline
                text-align: left
            img
                margin-bottom: 2em
                margin-left: 2em 
                float: right
    //Photos
    #photo-galleries
        margin: 0 auto
        padding-left: 12px
        width: 100%
        img
            width: auto
        .legend
            width: 291px
        li
            float: left
            margin-right: 16px
    #photo-galleries:after
        content: "."
        display: block
        height: 0
        clear: both
        visibility: hidden
    
    //individual posts
    .single
        article
            width: 35.625em
            margin: 4em auto
            header
                width: 35.625em
                h1
                    font-size: 2em
                    text-align: left
                    margin: 0 0 .675em 0
                aside, time
                    text-align: left
    #code article h1, #contact article h1
        font-size: 2em
        text-align: left
        margin: 0 0 .675em 0
    .drop
        font-size: 4.8em
        padding: 35px 10px 5px 0
    
    // generic two col layout
    .col
        float: left
        width: 38%
        margin-right: 2em
    .two
        width: 53%
    .top
        margin-bottom: 2em
        font-size: .875em
        padding-bottom: 2em
        border-bottom: #e3e3e3 1px solid

    .top:after
        content: "."
        display: block
        height: 0
        clear: both
        visibility: hidden
        
    //#page-navigation
    //    margin-left: 10%
    // specifics for two column posts
    .double article[role="main"]
        header
            width: 9em
            float: left
            margin-left: 0
            h1, aside
                text-align: right
                line-height: 1.1em
                margin-top: 16px
            h1
                font-size: 1.875em
            time
                display: block
                text-align: right
        .col
            margin-left: 1.25em
            width: 34%
        .sec
            margin-right: 0
            margin-left: 1em
        .narrow
            width: 35.625em
            margin: 0 auto
        //#page-navigation
        //    margin-left: 10%
    
    .post-body-single .legend
        width: 98%
    .post-body-single
        p:first-of-type
            font-size: 1.25em
            line-height: 28px
    #about .post-body-single
        p:nth-of-type(1)
            font-size: 1.063em
    .addendum 
        line-height: 25px
        dt
            margin-left: -30px
            font-style: italic
            padding-left: 30px
            text-indent: -30px
            margin-bottom: .5em
        dd
            margin-left: 0
    h4.notes
        text-transform: uppercase
        font-size: 1em
    .pullquote
        width: 10em
        margin: 0 1em 1em -2em
        font-style: italic
        font-size: 1.3em
        float: left
        line-height: 1.6em
    //#page-navigation
      //  margin-left: 15%
    .numeral
        display: block
        font: bold 1.2em Helvetica, Verdana, sans-serif
        margin-bottom: 0
        margin-top: 60px
    
    .post-body-single h3
        font-size: 1.6em 
        line-height: 1.2em
        font-weight: normal


    .notes
        main h1
            float: none
            margin-bottom: 1em
            width: 100%
        main
            max-width: 600px
            margin-left: auto
            margin-right: auto
            margin-bottom: 5em
        article footer
            margin-top: 1em
        article p
            float: none
        .note--location
            float: left
        .note--date
            float: right 
        .note--twitter
            clear: both
            float: right
            padding-top: 1em
        time
            display: inline
            float: right
    .permalink
        main
            margin-top: 5em
            
    //map
    #map-canvas
        height: 400px
        
    //about
    #about img
        width: auto
        clear: both
    
    footer[role="contentinfo"]
        font-size: 110%
        nav
            border: none
            li
                margin: 0 .5em
    
    //******************************************************
    //******************************************************
    //**********         DARK PAGES           **************
    //******************************************************
    //******************************************************
    .dark
        header[role="banner"]
            h2
                background: url('/media/img/text.png') 0 -61px no-repeat 
    
        .park
            position: relative
            display: block
            margin: 2em 0 2em 0
            h1
                display: block
                position: absolute
                top: 0px
                background: $brown
                z-index: 1000
                +transparent_class
                color: white
                margin: 0
                width: 100%
                text-align: left
                line-height: 2em
                font-size: 2em
                padding-left: .25em
                
            .figure
                position: relative
                border: none
            .legend 
                position: absolute
                bottom: 0
                width: 100%
                margin: 0
                background: $brown
                +transparent_class
                h2
                    font: normal 1.2em/2.6 Helvetica, Verdana, sans-serif
                    color: white
                    margin: 0 0 0 1em
                    float: left
                    padding: .3em 0
            .legend:after
                content: "."
                display: block
                height: 0
                clear: both
                visibility: hidden
            .buttons

                margin: .5em 10px 0 0
                line-height: 2.6em
                float: right
                li
                    margin: 0 .25em
                    font-size: 10px
                a
                    font-weight: bold
                    padding: 0.875em 1.75em 0.75em
                    background: #463215
                    color: white
                    -moz-border-radius: 25px
                    -webkit-border-radius: 25px
                    border-radius: 25px
                    &:hover
                        background: $orange

            


    
    
    
    //******************************************************
    //******************************************************
    //**********         BLACK PAGES           **************
    //******************************************************
    //******************************************************

    .black
        header[role="banner"]
            border-bottom: 1px #ccc solid
            h2
                background: url('/media/img/text.png') 0 -121px no-repeat
        h6
            display: block
            text-align: center
            text-transform: uppercase
            font-size: .625em
            margin: 0 0 1.25em 0
            a
                color: #b5b5b5
            a:hover
                color: $orange
        #slides
            article
                position: relative
            img
                display: block
                margin: 0 auto
            .v
                width: auto
        .photo-options, .map-link
            display: block
        .figcaption
            margin: 0
            padding: 1em 0 1em 0
            h3
                float: left
                padding: 0
                font-weight: normal
            .caption
                border-right: 1px solid #1f1f21
                width: 58%
                float: left
                padding-right: 1em
                p
                    margin-left: .5em
                    font-size: .875em
                    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
                p
                    font: normal .75em Helvetica, Verdana, sans-serif
                    color: #414144
                    line-height: 1.5em
                    a
                        color: #414144
                        font-weight: normal
                    a:hover
                        color: $orange
            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
        .figcaption:after
            content: "."
            display: block
            height: 0
            clear: both
            visibility: hidden
    
    
        .map-container
            //clear: left
            width: 469px
            height: 392px
            position: absolute
            bottom: 100px
            left: 20px
            z-index: 2000
            margin: 0
            padding: 0
            background: url("/media/img/mapbg.png") no-repeat top left
    
        .map-wrapper
            width: 400px
            height: 328px
            position: absolute
            bottom: 27px
            margin: 0px 0 0 44px
        footer[role='contentinfo']
            nav
                border: none