moved old sass files, redid comment form styles

34 files changed, 5279 insertions, 0 deletions

diff --git a/design/old/v6/_480.sass b/design/old/v6/_480.sass
new file mode 100644
index 0000000..3d426ca
--- /dev/null
+++ b/design/old/v6/_480.sass
@@ -0,0 +1,456 @@
+//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
diff --git a/design/old/v6/_768.sass b/design/old/v6/_768.sass
new file mode 100644
index 0000000..9c4f8b8
--- /dev/null
+++ b/design/old/v6/_768.sass
@@ -0,0 +1,440 @@
+//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
diff --git a/design/old/v6/_992.sass b/design/old/v6/_992.sass
new file mode 100644
index 0000000..9cb47a3
--- /dev/null
+++ b/design/old/v6/_992.sass
@@ -0,0 +1,169 @@
+///mediaquery
+
+//992px __________________________________________________________________________________________________________
+@media only screen and (min-width: 992px)
+    body
+        width: 61.75em
+    img
+        width: auto !important
+    header[role="banner"]
+        margin-top: 5.5em
+        h1
+            width: 190px
+        nav[role="navigation"]
+            margin-left: 8%
+    .archive
+        padding-top: 2em
+        article
+            margin-bottom: 2em
+            padding-bottom: 2em
+            border: none
+        h1
+            width: 42%
+            font-size: 1.5em
+            line-height: 1.3em
+            margin-top: .15em
+            margin-bottom: .25em
+            letter-spacing: .5px
+        p
+            line-height: 1.5em
+        img
+            float: right
+        .hyphenate, .dateline
+            width: 41%
+        .hyphenate
+            font-size: 1em
+            
+    //individual posts
+    .single
+        article
+            margin-left: 20%
+    .picwide 
+        clear: both
+        margin: 30px 0 30px -200px
+    .pullquote
+        margin-left: -6em
+    #page-navigation
+        margin-left: auto
+        margin-right: auto
+    
+    .home 
+        .sh
+            text-align: left
+        article
+            width: 19em
+            float: left
+            margin-right: 2em
+            clear: none
+        .last
+            margin-right: 0
+        .post-image
+            float: left 
+            margin: 20px 8px 8px 0
+        .hyphenate, .dateline
+            width: auto
+            text-align: left
+        .hyphenate
+            text-align: justify
+    // specifics for two column posts
+    .double article[role="main"]
+        header
+            width: 10em
+            float: left
+            margin-left: 0
+            margin-top: 1em
+            h1, aside
+                text-align: right
+                line-height: 1.2em
+            h1
+                font-size: 1.875em
+        .col
+            width: 47%
+            margin-left: .875em
+        .sec
+            margin-left: 0
+        .post-body-double
+            margin: 2em 0 0 1.25em
+            float: left
+            width: 48.75em
+            p
+                margin: 0 0 1em 0
+            .narrow
+                width: 35.625em
+                margin-bottom: 1em
+                clear: both
+                margin-left: 1em
+            .hyphenate
+                margin-top: 0
+        //#page-navigation
+        //    margin-left: 12em
+    //maps
+    #map-canvas
+        width: 48.5em
+        height: 31.25em
+        float: right
+        margin-bottom: 3em
+    .map-legend
+        ul
+            margin-bottom: 1em
+        h4
+            margin-bottom: .3em
+            letter-spacing: 1px
+            font-size: .75em
+            text-transform: uppercase
+        li
+            display: block
+            font-size: .875em
+            margin: 2px 0
+        li:after
+            content: ""
+    .two
+        margin-left: 3em
+        width: 51%
+    .black
+        #slides
+            width: 62.5em 
+            img
+                width: auto
+        .directions
+            display: block
+            font: normal .675em Helvetica, Verdana, sans-serif
+            color: #414144
+            text-align: center
+            margin-bottom: 1.75em
+        .caption
+            width: 70% !important
+        .map-container
+            margin-left: 17em
+
+    //The new guide section
+    .guide
+        .intro
+            margin-bottom: 2.5em
+        .formatted
+            column-count: 3
+            column-gap: 1.5em
+            -moz-column-count: 3
+            -moz-column-gap: 24px
+            -webkit-column-count: 3
+            -webkit-column-gap: 1.5em
+        img
+            border: 8px $brown solid
+        .date, .meta
+            float: left
+        .meta
+            line-height: 18px
+        .tags
+            margin: 20px 0 10px 0
+        .guide-dek
+            padding: 0
+            width: 610px
+            float: right
+            h1
+                margin: 0 !important
+        article:after, .intro:after
+            content: "."
+            display: block
+            height: 0
+            clear: both
+            visibility: hidden
diff --git a/design/old/v6/_leaflet.scss b/design/old/v6/_leaflet.scss
new file mode 100644
index 0000000..b65ffb8
--- /dev/null
+++ b/design/old/v6/_leaflet.scss
@@ -0,0 +1 @@
+.leaflet-map-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-pane,.leaflet-tile-container,.leaflet-overlay-pane,.leaflet-shadow-pane,.leaflet-marker-pane,.leaflet-popup-pane,.leaflet-overlay-pane svg,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden;-ms-touch-action:none}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container img{max-width:none !important}.leaflet-container img.leaflet-image-layer{max-width:15000px !important}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-tile-pane{z-index:2}.leaflet-objects-pane{z-index:3}.leaflet-overlay-pane{z-index:4}.leaflet-shadow-pane{z-index:5}.leaflet-marker-pane{z-index:6}.leaflet-popup-pane{z-index:7}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:7;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-tile,.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;-o-transition:opacity .2s linear;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-tile-loaded,.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);-o-transition:-o-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile,.leaflet-touching .leaflet-zoom-animated{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-clickable{cursor:pointer}.leaflet-container{cursor:-webkit-grab;cursor:-moz-grab}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-container,.leaflet-dragging .leaflet-clickable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing}.leaflet-container{background:#ddd;outline:0}.leaflet-container a{color:#0078A8}.leaflet-container a.leaflet-active{outline:2px solid orange}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,.5)}.leaflet-container{font:12px/1.5 "Helvetica Neue",Arial,Helvetica,sans-serif}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,.65);border-radius:4px}.leaflet-bar a,.leaflet-bar a:hover{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console',Monaco,monospace;text-indent:1px}.leaflet-control-zoom-out{font-size:20px}.leaflet-touch .leaflet-control-zoom-in{font-size:22px}.leaflet-touch .leaflet-control-zoom-out{font-size:24px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255,255,255,.7);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover{text-decoration:underline}.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-scale{font-size:11px}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;font-size:11px;white-space:nowrap;overflow:hidden;-moz-box-sizing:content-box;box-sizing:content-box;background:#fff;background:rgba(255,255,255,.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 19px;line-height:1.4}.leaflet-popup-content p{margin:18px 0}.leaflet-popup-tip-container{margin:0 auto;width:40px;height:20px;position:relative;overflow:hidden}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;box-shadow:0 3px 14px rgba(0,0,0,.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;padding:4px 4px 0 0;text-align:center;width:18px;height:14px;font:16px/14px Tahoma,Verdana,sans-serif;color:#c3c3c3;text-decoration:none;font-weight:700;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover{color:#999}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)}.leaflet-oldie .leaflet-popup-tip-container{margin-top:-1px}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}
diff --git a/design/old/v6/_mixins.sass b/design/old/v6/_mixins.sass
new file mode 100644
index 0000000..cbc8bdc
--- /dev/null
+++ b/design/old/v6/_mixins.sass
@@ -0,0 +1,16 @@
+$brown: #201a11
+$orange: #b53a04
+
+=transparent_class
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"
+  filter: alpha(opacity = 90)
+  -moz-opacity: 0.9
+  -khtml-opacity: 0.9
+  opacity: 0.9
+
+=photo_overlays
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"
+  filter: alpha(opacity = 70)
+  -moz-opacity: 0.7
+  -khtml-opacity: 0.7
+  opacity: 0.7
\ No newline at end of file
diff --git a/design/old/v6/_typography.sass b/design/old/v6/_typography.sass
new file mode 100644
index 0000000..64f25fc
--- /dev/null
+++ b/design/old/v6/_typography.sass
@@ -0,0 +1,318 @@
+// 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
+
+ol, ul, li, dl
+    list-style: none
+    margin: 0
+    padding: 0
+    border: 0
+    outline: 0
+    background: transparent
+
+blockquote, q
+    quotes: none
+hr
+    display: none
+\:focus
+    outline: 0
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
+    display: block
+    margin: 0
+    padding: 0
+
+// 1.ROOT
+
+html
+    overflow-y: scroll
+    background: rgb(255, 255, 255) /*url(../img/grid.jpg) 50% 0 repeat-y*/
+    border-top: 3px $brown solid
+
+body
+    margin: 0 auto
+    padding: 0
+    width: 90%
+    font: normal 100% ff-meta-serif-web-pro, unquote("Hoefler Text"), Georgia, unquote("Times New Roman"), Times, serif 
+    color: $brown
+    background-color: transparent
+    
+
+// 2.HEADINGS
+
+h1, h2, h3, h4, h5, h6
+    font-family: unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif
+
+h1
+    font-size: 1.875em
+    line-height: 1.3em
+    font-weight: normal
+
+h2
+    margin-bottom: .75em
+    font-size: 1.5em /* 36 / 16 = 2 */
+    line-height: 1.5
+    font-weight: normal
+
+h3
+    margin-bottom: 1em
+    font-size: 1.6em
+    line-height: 1.5
+
+h4
+    margin-bottom: 1.25em
+    font-size: 1.25em /* 20 / 16 = 1.25 */
+    line-height: 1.25
+
+h5
+    margin-bottom: 1.5em
+    font-size: 1em /* 16 / 16 = 1 */
+
+h6
+    font-size: 1em /* 16 / 16 = 1 */
+
+// 3.TYPOGRAPHY 
+
+p
+    font-size: 1.0625em /* 17px / 16px */
+    line-height: 1.5em /* 24px / 16px */
+    margin: 1em 0 0
+
+ul, ol
+    margin: 0 0 1.5em -24px
+    padding-left: 24px
+
+ul
+    list-style-type: disc
+
+ol
+    list-style-type: decimal
+
+li
+    ul, ol
+        margin: 0
+        font-size: 1em /* 16 / 16 = 1 */
+
+dl, dd
+    margin-bottom: 1.5em
+
+dt
+    font-weight: normal
+
+
+b, strong
+    font-weight: bold
+
+i, em
+    font-style: italic
+
+footer p
+    font-size: .625em
+    text-align: center
+a
+    text-decoration: none
+    color: $brown
+    -webkit-transition: color 0.3s ease-out
+    -moz-transition: color 0.3s ease-out
+    -o-transition: color 0.3s ease-out
+    -ms-transition: color 0.3s ease-out
+    transition: color 0.3s ease-out
+    &:hover
+        color: $orange
+sup
+    font: normal .625em Helvetica, Verdana, sans-serif
+small
+    font: normal .75em Helvetica, Verdana, sans-serif
+
+blockquote
+    font-style: italic
+    font-size: 1em
+    line-height: 1.625em
+    p
+        font-size: 1em
+    cite
+        font-style: normal
+img 
+    border: 10px $brown solid
+
+pre
+    margin-bottom: 1.5em
+    white-space: pre
+    white-space: pre-wrap
+    word-wrap: break-word
+    
+pre, code
+    font: .875em 'andale mono', 'lucida console', monospace
+    line-height: 1.5
+    
+//Classes
+
+//.dateline, .breadcrumbs li, .geo, .legend h3, time
+
+.bl, time, #photo-galleries h1
+    text-transform: uppercase
+    font-size: 11px
+    letter-spacing: 1px
+
+.drop
+    font-size: 3em
+    float: left
+    display: block
+    padding: 18px 10px 5px 0
+    overflow: visible
+.double .drop, .drop-small
+    font-size: 3.1em
+    display: block
+    float: left
+    padding: 16px 8px 5px 0
+    overflow: visible
+.button 
+    display: block
+    margin-top: 8px
+    a    
+        padding: 9px 14px 7px 14px
+        font-weight: bold
+        line-height: 25px
+        text-transform: uppercase
+        background: #d7d7d7
+        color: #666 !important
+        -moz-border-radius: 25px
+        -webkit-border-radius: 25px
+        border-radius: 25px
+        font: bold 10px Helvetica, Verdana, sans-serif
+        width: auto
+    a:hover
+        background: $orange
+        color: white !important
+.alert
+    color: #ff3530
+//Pagination
+//next previous table
+#page-navigation
+    margin: 24px auto
+    strong
+        display: block
+        text-align: right
+        margin-top: 1px
+        text-transform: uppercase
+        font-size: .75em
+        letter-spacing: .1625em
+        font-weight: normal
+        font-style: normal
+
+//pagination in archives
+#pagination
+    margin-top: 1em
+    border-top: 1px $brown dotted
+    border-bottom: 1px $brown dotted
+    text-align: center
+    font-family: unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif
+    padding: .25em 0
+    ul
+        margin-bottom: 0
+    li
+        display: inline
+        text-align: center
+
+// 4.LINKS 
+
+a
+    outline: none
+    color: #111
+    text-decoration: none
+    &:visited
+        outline: none
+        color: #111
+        text-decoration: none
+    &:hover
+        outline: none
+        color: $orange
+        text-decoration: none
+    &:active, &:focus
+        outline: none
+        color: rgb(0, 0, 0)
+
+/* 5.FIGURES & IMAGES
+
+figure
+    margin-bottom: 1.5em
+    img, object, embed
+        margin-bottom: .75em
+        max-width: 100%
+
+figcaption
+    display: block
+    font-weight: normal
+
+// 6.TABLES
+
+table
+    border-collapse: collapse
+    border-spacing: 0
+    margin-bottom: 1.4em
+    width: 100%
+    font-size: .875em
+    /* 14 / 16 = .875
+
+th
+    font-weight: bold
+    padding: .25em 10px .25em 5px
+
+td, caption
+    padding: .25em 10px .25em 5px
+
+tfoot
+    font-style: italic
+
+caption
+    background-color: transparent
+
+// 14.GLOBAL OBJECTS 
+
+.clearfix
+    zoom: 1
+    &:before, &:after
+        content: "\0020"
+        display: block
+        height: 0
+        overflow: hidden
+    &:after
+        clear: both
+
+.hide
+    display: none
+    
+///* 15.VENDOR-SPECIFIC
+
+body
+    -webkit-text-size-adjust: 100%
+    -ms-text-size-adjust: 100%
+
+a:link
+    -webkit-tap-highlight-color: rgb(52, 158, 219)
+
+::-webkit-selection
+    background: rgb(23, 119, 175)
+    color: rgb(250, 250, 250)
+    text-shadow: none
+::-moz-selection
+    background: rgb(23, 119, 175)
+    color: rgb(250, 250, 250)
+    text-shadow: none
+::selection
+    background: rgb(23, 119, 175)
+    color: rgb(250, 250, 250)
+    text-shadow: none
+
+
+.ie7 img, .iem7 img
+    -ms-interpolation-mode: bicubic
+
diff --git a/design/old/v6/ie.sass b/design/old/v6/ie.sass
new file mode 100644
index 0000000..8ba7172
--- /dev/null
+++ b/design/old/v6/ie.sass
@@ -0,0 +1,49 @@
+.archive 
+    clear: both
+    article
+        *clear: both
+#pagination
+    clear: both
+.figcaption
+    *clear: both
+    *display: inline-block
+.top
+    clear: both
+    display: inline-block
+#projects-archive
+    clear: both
+    display: inline-block
+.black, .dark
+    nav
+        a, a:visited
+            color: white !important
+        a:hover
+            color: #b53a04 !important
+#map-canvas img
+    border: none
+.park
+    h1, .legend
+        *margin-left: -490px !important
+    .legend 
+        height: 60px !important
+    .buttons
+        margin-top: 15px !important
+        a
+            display: block
+            float: left
+            margin-left: 8px
+            padding: 7px !important
+    .map-wrapper
+        *margin-left: 22px !important
+.drop
+    font-size: 5em !important
+    padding: 24px 10px 20px 0 !important
+.double .drop, .drop-small
+    padding: 14px 8px 5px 0 
+.picfull
+    display: block !important
+    float: none !important
+    clear: both !important
+    display: inline-block !important
+.dark body:focus, .black body:focus
+    outline: none\9
diff --git a/design/old/v6/stylesv6.sass b/design/old/v6/stylesv6.sass
new file mode 100644
index 0000000..41ed20f
--- /dev/null
+++ b/design/old/v6/stylesv6.sass
@@ -0,0 +1,50 @@
+//basic stuff
+@import _mixins.sass
+@import _typography.sass
+@import _480.sass
+@import _768.sass
+@import _992.sass
+@import _leaflet.scss
+
+
+
+//Print __________________________________________________________________________________________________________
+
+@media print
+    *
+        background: transparent !important
+        color: black !important
+        text-shadow: none !important
+        filter: none !important
+        -ms-filter: none !important
+    a
+        color: #444 !important
+        text-decoration: underline
+        &:visited
+            color: #444 !important
+            text-decoration: underline
+        &[href]:after
+            content: " (" attr(href) ")"
+    abbr[title]:after
+        content: " (" attr(title) ")"
+    a
+        &[href^="javascript:"]:after, &[href^="#"]:after
+            content: ""
+    pre, blockquote
+        border: 1px solid #999
+        page-break-inside: avoid
+    thead
+        display: table-header-group
+    tr, img
+        page-break-inside: avoid
+    @page
+        margin: .5cm
+    
+    p, h2, h3
+        orphans: 3
+        widows: 3
+    h2, h3
+        page-break-after: avoid
+
+
+///mediaquery*/
diff --git a/design/old/v8/_birds.scss b/design/old/v8/_birds.scss
new file mode 100644
index 0000000..c50b22e
--- /dev/null
+++ b/design/old/v8/_birds.scss
@@ -0,0 +1,162 @@
+.iframe-wrapper {
+    @include constrain_wide()
+}
+
+.taxon {
+    display: none !important;
+}
+
+#birds, .birds {
+    .post--title {
+        @include fontsize(18);
+        a {
+            font-style: normal;
+            @include fontsize(22);
+        }
+    }
+    .audio-figure {
+        audio {
+            display: block;
+            width: 100%;
+        }
+        small { display: block;}
+    }
+    .post--image {
+        position: relative;
+        width: 100%;
+        figcaption {
+            opacity: 0;
+            @include fancy-sans;
+            @include fontsize(13);
+            position: absolute;
+            bottom: 0;
+            text-align: left;
+            width: 99%;
+            background: rgba(0, 0, 0, 0.75);
+            padding: .5em 0 .5em .5em;
+            margin-bottom: .5em;
+            color: #ccc;
+
+            a {
+                color: #ccc;
+            }
+        }
+        img {
+            max-width: 100%;
+            width: 100%;
+            padding: 0;
+            background: none;
+        }
+        .picfull {
+            margin: 0;
+        }
+    }
+    .post--image:hover figcaption {
+        -webkit-transition: opacity .25s ease-in;
+        -moz-transition: opacity .25s ease-in;
+        transition: opacity .25s ease-in;
+        opacity: 1;
+    }
+}
+
+.sci {
+    font-style: italic;
+}
+.birds {
+    article {
+        @include constrain_narrow;
+    }
+    audio { width: 100%;}
+    .audio-figure { 
+        margin-top: 2em;
+        margin-bottom: 2em;
+    }
+    article h2, h3 { font-weight: 400;}
+    article h2 { margin-bottom: 0;}
+    h3 {
+        margin-top: 0;
+    }
+    .map { 
+        margin: 0 auto;
+        width: 99%; 
+        height: 400px; 
+        @include breakpoint(beta) {
+            @include constrain_narrow;
+        }
+    }
+    #endnode {
+        @include breakpoint(beta) {
+            text-align: left;
+        }
+        @include fancy-sans;
+        @include fontsize(14);
+        margin-top: 4rem;
+        h5 {
+            @include fontsize(14);
+            @include smcaps;
+            @include fancy_sans;
+            margin-bottom: 1rem;
+            margin-top: 2rem;
+        }
+        ul {
+            margin-bottom: 2em;
+            li {
+            color: lighten($body_font, 30);
+            &:before {
+              content: "\2022";
+              color: lighten($body_font, 30);
+              margin-right: .35rem;
+          }
+        }
+        }
+        a {
+            text-decoration: none;
+            color: lighten($body_font, 10);
+        }
+        &:before {
+            @include faded_line_after;
+        }
+    }
+    #detail-map-canvas {
+        width: 100vw;
+        @include constrain_wide;
+        position: relative;
+        @include breakpoint(gamma) {
+            left: calc(-20%);
+        }
+        @include breakpoint(delta) {
+            left: calc(-38%);
+        }
+        @include breakpoint(epsilon) {
+            left: calc(-45%);
+        }
+    }
+}
+.life-list {
+    @include constrain_wide;
+    text-align: left;
+    h4 { @include fancy_sans;}
+    ul {
+        @include breakpoint(beta){
+            height: 1200px;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+        }
+        @include breakpoint(gamma){
+            height: 1000px;
+        }
+        @include breakpoint(epsilon){
+            height: 800px;
+        }
+    }
+    li {
+      margin-bottom: .35rem;
+    }
+    a {
+        color: $body_font;
+        text-decoration: none;
+
+    }
+}
+
diff --git a/design/old/v8/_books.scss b/design/old/v8/_books.scss
new file mode 100644
index 0000000..db38624
--- /dev/null
+++ b/design/old/v8/_books.scss
@@ -0,0 +1,125 @@
+.book-list {
+    @extend %clearfix;
+    @include constrain_wide;
+}
+
+.book-list-item {
+    margin: 2em 0;
+    h2 {
+        text-align: left;
+        margin: .25rem 4px;
+        font-weight: normal;
+        @include fontsize(24);
+        line-height: 1.2;
+        a {
+            color: $body_font;
+            text-decoration: none;
+            font-style: italic;
+        }
+        @include breakpoint(gamma) {
+            @include fontsize(22);
+            margin: .1rem 4px;
+        }
+    }
+    img { max-width: 100%;}
+    h4, {
+        @include fontsize(12);
+        @include smcaps;
+        font-weight: normal;
+        margin-top: 0;
+        margin-bottom: 0;
+        &:before {
+            content: "by "
+        }
+    }
+    @include breakpoint(alpha-2) {
+        text-align: left;
+        width: 45%;
+        float: left;
+        margin-right: 30px;
+        margin-top: 1em;
+        min-height: 500px;
+        .img-wrapper {
+            min-height: 350px;
+        }
+    }
+    @include breakpoint(gamma) {
+        width: 31%;
+        height: 650px;
+        float: left;
+        margin-right: 30px;
+        .img-wrapper {
+            min-height: 400px;
+        }
+    }
+    @include breakpoint(delta) {
+        width: 23%;
+        margin-right: 25px;
+        height: 550px;
+    }
+}
+.book-list .even {
+    @include breakpoint(alpha-2) {
+        margin-right: 0;
+    }
+    @include breakpoint(gamma) {
+        margin-right: 25px;
+    }
+}
+.book-list .tres {
+    @include breakpoint(gamma) {
+        margin-right: 0;
+    }
+    @include breakpoint(delta) {
+        margin-right: 25px;
+    }
+}
+.book-stars {
+    display: block;
+}
+.book {
+    margin-top: 2em;    
+    @include breakpoint(gamma) {
+        margin-top: 3em;    
+    }
+}
+.book:after {
+    @include constrain_narrow;
+    color: white;
+    @include faded_line_after;
+    margin-top: 2em;
+    @include breakpoint(gamma) {
+        margin-top: 3em;    
+    }
+}
+.book-title {
+    @include constrain_wide;
+    line-height: 1.3;
+    @include breakpoint(gamma) {
+        max-width: 660px;
+        text-align: left;
+        position: relative;
+        left: 150px;
+    }
+    @include breakpoint(delta) {
+        left: 165px;
+        max-width: 850px;
+    }
+}
+.book-cover-wrapper {
+    @include breakpoint(gamma) {
+        display: block;
+        @include constrain_wide;
+        img {
+            float: left;
+            width: 250px; 
+            margin-right: 32px;
+        }
+    }
+    @include breakpoint(delta) {
+        img {
+            max-width: 250px; 
+        }
+    }
+}
+
diff --git a/design/old/v8/_figments.scss b/design/old/v8/_figments.scss
new file mode 100644
index 0000000..e834469
--- /dev/null
+++ b/design/old/v8/_figments.scss
@@ -0,0 +1,47 @@
+.kindle, .epub {
+    display: inline;
+    @include smcaps;
+    @include fontsize(11);
+}
+.kindle:after {
+    content: "·";
+    color: #999;
+    padding-left: 0.75em;
+}
+.fig-archive {
+    @include constrain_narrow;
+    @include breakpoint(beta) {
+        text-align: left;
+
+    }
+    h1 {
+        margin-top: 2.5em;
+        @include smcaps;
+        @include fontsize(16);
+    }
+    p.intro {
+        @include breakpoint(beta) {
+            text-align: left;
+            @include fontsize(18);
+            font-style: italic
+        }
+    }
+    p.intro:last-of-type {
+        margin-bottom: 4em;
+    }
+    h2 {
+        @include smcaps;
+        @include fontsize(18);
+    }
+}
+.figments hr, .resume hr {
+    @include constrain_narrow;
+    border: 0;
+    margin-top: 2em;
+    margin-bottom: 2em;
+    height: 1px;
+    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));
+    background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+}
diff --git a/design/old/v8/_fonts.scss b/design/old/v8/_fonts.scss
new file mode 100644
index 0000000..dfe632a
--- /dev/null
+++ b/design/old/v8/_fonts.scss
@@ -0,0 +1,10 @@
+@font-face {
+    font-family: 'carrois_gothicregular';
+    src: url('carroisgothic-regular-webfont.eot');
+    src: url('carroisgothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('carroisgothic-regular-webfont.woff') format('woff'),
+         url('carroisgothic-regular-webfont.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+
+}
diff --git a/design/old/v8/_footer.scss b/design/old/v8/_footer.scss
new file mode 100644
index 0000000..9bfe4b7
--- /dev/null
+++ b/design/old/v8/_footer.scss
@@ -0,0 +1,55 @@
+footer[role="contentinfo"] {
+    margin-top: 5em;
+    @include breakpoint(gamma) {
+        max-width: 960;
+    }
+    &:before {
+        @include breakpoint(beta) {
+            @include faded_line_after;
+            margin-bottom: 1.2em;
+        }
+    }
+    ul {
+        border-top: 1px $brown dotted;
+        border-bottom: 1px $brown dotted;
+        padding: .5rem 0;
+        @include breakpoint(beta) {
+            border: none;
+        }
+    }
+    li {
+        display: inline;
+        margin: 0 .25em;
+        &:after {
+            content: "\00b7";
+            color: #999999;
+            padding-left: 0.75em;
+        }
+        a {
+            color: $brown;
+            text-decoration: none;
+        }
+        ul { display:inline;}
+    }
+    li:last-of-type {
+        margin-right: 0;
+        &:after {
+            content: " ";
+        }
+    }
+    p {
+        @include fontsize(10);
+        text-align: center;
+        margin-top: 1.5em;
+        margin-bottom: 1.5em;
+    }
+}
+.black footer[role="contentinfo"], .dark footer[role="contentinfo"] {
+    &:before {
+        @include light_faded_line_after;
+    }
+    a {
+    color: $body_font_light;
+}
+}
+
diff --git a/design/old/v8/_global.scss b/design/old/v8/_global.scss
new file mode 100644
index 0000000..c5b7ca2
--- /dev/null
+++ b/design/old/v8/_global.scss
@@ -0,0 +1,186 @@
+html {
+    border-top: 0.25em solid $brown;
+}
+
+body {
+    margin: 0 auto;
+    padding: 0;
+    overflow-x: hidden;
+    font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif;
+    color: $body_font;
+    text-align: center;
+    background-color: transparent
+}
+
+// eliminate touch delay on mobile safari
+a, button, input, select, textarea, label, summary {
+    touch-action: manipulation;
+}
+a {
+    color: $orange;
+    -webkit-transition: all 0.1s ease;
+    -moz-transition: all 0.1s ease;
+    -ms-transition: all 0.1s ease;
+    transition: all 0.1s ease;
+    &:hover {
+        text-decoration: none;
+    }
+    &:visited {
+        color: $orange;
+    }
+}
+
+p {
+    @include constrain_narrow();
+    text-align: left;
+    @include breakpoint(alpha){
+        @include fontsize(18);
+        line-height: 1.5;
+    }
+    @include breakpoint(gamma){
+        @include fontsize(20);
+        line-height: 1.6;
+    }
+}
+time {
+    @include smcaps;
+    @include fontsize(11);
+    display: block;
+    span {
+        @include fontsize(13);
+    }
+}
+abbr {
+    cursor: help;
+}
+pre {
+    @include constrain_narrow();
+    text-align: left;
+    @include breakpoint(alpha){
+        @include fontsize(18);
+        line-height: 1.5;
+        margin-top: 2em;
+        margin-bottom: 2em;
+    }
+}
+object, embed, video {
+    max-width: 100%;
+    height: auto;
+}
+
+img {
+    max-width: 100%;
+}
+
+h1 {
+    font-family:  Georgia, 'Times New Roman', serif;
+    @include fontsize(36);
+    font-weight: normal;
+}
+//**************  Universals ************************
+.hide {
+    display: none;
+}
+
+.strike {
+    text-decoration: line-through;
+}
+
+.yes {
+    background: green !important;
+    color: white;
+}
+
+.no {
+    background: red !important;
+    color: white;
+}
+
+.alert {
+    color: red !important;
+}
+//**************  other global classes ************************
+.sans {
+    @include generic_sans;
+}
+.bl {
+    @include smcaps;
+    @include fontsize(11);
+}
+.italic {
+    font-style: italic;
+}
+.small {
+    font-size: 90%;
+}
+.hed {
+    @include fancy_sans;
+    @include fontsize(24);
+    font-weight: 500;
+    @include breakpoint(beta) {
+        text-align: left;
+        @include fontsize(32);
+    }
+}
+
+.subhead {
+    font-style: italic;
+    font-weight: 400;
+    margin-top: 0;
+    @include constrain_narrow;
+    @include breakpoint(beta) {
+        text-align: left;
+    }
+}
+.mailing-list--wrapper {
+    @include constrain_narrow;
+    @include breakpoint(gamma) {
+        margin-top: 3em;
+        max-width: 580px;
+        h5 {
+            margin-bottom: .5em;
+            margin-top: 2em;
+        }
+    }
+    h5 { 
+        font-weight: normal;
+        text-align: left;
+        @include fontsize(18);
+    }
+    &:before {
+        @include faded_line_after;
+        margin-top: 5em;
+    }
+}
+.divide-after:after {
+    margin-bottom: 3em;
+    @include faded_line_after;
+}
+//****************  Page Breadcrumbs  ************************
+
+#breadcrumbs {
+    @include constrain_wide();
+    text-align: center;
+    li {
+        display: inline;
+    }
+    a { color: $brown;}
+    @include breakpoint(gamma) {
+        text-align: left;
+    }
+}
+
+.black #breadcrumbs a, .dark #breadcrumbs a {
+    color: $body_font_light;
+}
+//************* Dark Pages *********************
+
+.dark body {
+    background: $brown;
+    color: $body_font_light
+}
+
+.black body {
+    background: #000;
+    color: $body_font_light
+}
diff --git a/design/old/v8/_header.scss b/design/old/v8/_header.scss
new file mode 100644
index 0000000..10174e3
--- /dev/null
+++ b/design/old/v8/_header.scss
@@ -0,0 +1,154 @@
+header[role="banner"] {
+    margin: 0 auto;
+    @include smcaps;
+    a {
+        text-decoration: none;
+    }
+    h1 {
+        margin: -10px 0 0 0;
+        padding: 0;
+    }
+    h1 a {
+        display: block;
+        margin: 0.25em auto 0 auto;
+        font-size: 0.875em;
+        font-weight: 300;
+        font-family: 'carrois_gothicregular', Helvetica, sans-serif;
+        line-height: 0.75em;
+        color: $brown;
+    }
+    h1 a:before {
+        content: "home-icon";
+        text-indent: -9999em;
+        width: 95px;
+        height: 75px;
+        background: url("logo-new-@2x-treeonly.png") center top no-repeat;
+        background-size: 95px;
+        background-size: 85px;
+        display: block;
+        margin: 0.75em auto 0;
+    }
+    h2 {
+        margin-top: 0.25em;
+        font-size: 0.675em;
+        font-style: italic;
+        font-weight: 300;
+    }
+    @include breakpoint(beta) {
+        float: left;
+        position: relative;
+        bottom: 0;
+        h1, h2 {
+            text-align: left;
+        }
+        h1 {
+            width: 360px;
+        }
+        h1 a { line-height: 2.5em;}
+        h1 a:before {
+            display: inline-block;
+            background-size: 102px;
+            height: 85px;
+            width: 105px;
+            margin-right: 10px;
+        }
+        h2 { margin-left: 116px;
+             margin-top: -30px;
+        }
+    }
+}
+.black header h1 a, .dark header h1 a {
+    color: $body_font_light;
+    &:before {
+        background: url("logo-new-@2x-treeonly.png") center -75px no-repeat;
+        background-size: 92px;
+    }
+    @include breakpoint(gamma) {
+        &:before {
+            background-position-y: -65px;
+        }
+    }
+}
+
+
+nav[role="navigation"] {
+    border-top: 1px #444444 dotted;
+    border-bottom: 1px #444444 dotted;
+    //box-shadow: 0 3px 8px 0 #e6e6e6
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-right: -20px;
+    margin-left: -20px;
+    margin-top: 1em;
+    padding: 0.25em 0.5em;
+    a {
+        text-decoration: none;
+        color: #505050;
+    }
+    ul {
+        @include smcaps;
+        max-width: 100%;
+        font-weight: 300;
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+        padding: 0;
+        @include constrain(85%);
+    }
+    li {
+        display: inline;
+        margin: 0 0.25em;
+        &:after {
+            content: "\00b7";
+            color: #999999;
+            padding-left: 0.75em;
+        }
+    }
+    li.last {
+        margin-right: 0;
+        &:after {
+            content: " ";
+        }
+    }
+    @include breakpoint(beta) {
+        float: right;
+        border: none;
+        margin: 52px 0 0 0;
+        padding: 0;
+        ul {
+            max-width: 50em;
+        }
+    }
+}
+.black nav[role="navigation"] a, .dark nav[role="navigation"] a {
+    color: $body_font_light;
+}
+
+
+.header-wrapper {
+    @extend %clearfix;
+    margin-bottom: 1em;
+    @include breakpoint(beta) {
+        border-bottom: 1px $brown solid;
+        position: relative;
+    }
+    @include breakpoint(gamma) {
+        max-width: $breakpoint-gamma;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    @include breakpoint(delta) {
+        margin-top: 1.5em; 
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        margin-top: 1.5em; 
+        max-width: $max_width;
+    }
+}
+
+.black .header-wrapper, .dark .header-wrapper {
+    @include breakpoint(beta) {
+        border-bottom: 1px $body_font_light solid;
+    }
+}
+
diff --git a/design/old/v8/_homepage.scss b/design/old/v8/_homepage.scss
new file mode 100644
index 0000000..db375ed
--- /dev/null
+++ b/design/old/v8/_homepage.scss
@@ -0,0 +1,265 @@
+.homepage--section {
+    @include constrain_wide;
+    @extend %clearfix;
+    &:before {
+        margin-top: 3em;
+    }
+}
+.homepage--arc-header {
+    @include fontsize(14);
+    font-family: sans-serif;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 2em;
+    @include breakpoint(beta) {
+        text-align: left;
+    }
+}
+.homepage--archives {
+    max-width: 100%;
+    margin-top: 0;
+    @include breakpoint(beta) {
+        article {
+            display: block;
+            width: 100%;
+            text-align: left;
+        }
+    }
+    @include breakpoint(gamma) {
+        float: left;
+        margin-top: 0;
+        margin-right: 3em;
+        article {
+            width: 620px;
+            margin-left: 0;
+        }
+    }
+    @include breakpoint(delta) {
+        article {
+            width: 780px;
+            margin-left: 0;
+        }
+    }
+}
+
+.homepage--bright {
+    max-width: 100%;
+    article { 
+        margin-top: 0;
+        margin-bottom: 20px;
+        max-width: 100%;
+    }
+    .odd, .even { margin-left: 0; margin-right: 0; padding-left: 0; min-height: 270px;}
+    @include breakpoint(delta) {
+        margin-left: 0;
+        float: right;
+        max-width: 33%;
+        article {
+            float: left;
+            width: 45%;
+            margin-left: 1em;
+        }
+        .odd { margin-right: 10px;}
+    }
+    @include breakpoint(gamma) {
+        float: right;
+        max-width: 33%;
+        margin-top: 0;
+        article {
+            max-width: 100%;
+        }
+    }
+    @include breakpoint(beta) {
+        margin-top: 0;
+        article {
+            max-width: 50%;
+        }
+    }
+    @include breakpoint(beta-2) {
+        margin-top: 0;
+        article {
+            max-width: 47%;
+        }
+        .odd { margin-right: 10px;}
+    }
+    .post--image {
+        margin-left: 0 !important;
+        margin-bottom: .5em;
+        max-height: 130px;
+        overflow: hidden;
+        img {
+            max-width: 100%;
+            width: 100%;
+            display: block; 
+            /* just in case, to force correct aspect ratio */
+            height: auto !important;
+            width: auto\9; /* ie8+9 */
+            /* lt ie8 */
+            -ms-interpolation-mode: bicubic; 
+        }
+        @include breakpoint(epsilon){
+            max-height: 160px;
+        }
+    }
+}
+.homepage--arc-big {
+    max-width: 100%;
+    @include breakpoint(gamma) {
+        float: left;
+        max-width: 63%;
+        article {
+            max-width: 47%;
+            width: 47%;
+        }
+    }
+    @include breakpoint(delta) {
+        float: left;
+        max-width: 63%;
+        article {
+            max-width: 49%;
+            
+        }
+    }
+}
+.popular {
+    @include breakpoint(gamma) {
+        article {
+            width: 100%;
+            max-width: 100%;
+        }
+    }
+    @include breakpoint(epsilon) {
+        float: right;
+        max-width: 33%;
+    }
+}
+.homepage--next {
+    @extend %clearfix;
+    text-align: center;
+    clear: left;
+    padding-top: 3em;
+    a {
+        @include fontsize(14);
+        font-family: sans-serif;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        text-decoration: none;
+        padding: 9px 10px 8px;
+        border: $link_color 1px solid;
+    }
+    a:after {
+        content: "\21E2";
+        margin-left: 4px;
+    }
+    a:hover {
+        background: $link_color;
+        color: white;
+    }
+}
+.has-hero {
+    .header-wrapper {
+        margin-bottom: 0;
+    }
+    .homepage--hero {
+        border: 0;
+        padding: 0;
+        max-width: 100%;
+        position: relative;
+        z-index: 1;
+        width: 100vw;
+    }
+    .hero--wrapper {
+        @include constrain_wide;
+        position: relative;
+        z-index: 100;
+        background: rgb(0, 0, 0);
+        background: rgba(0, 0, 0, 0.6);
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+        filter: alpha(opacity = 70);
+        color: $body_font_light;
+        font-weight: 400;
+        padding-bottom: 30px;
+        p { max-width: 100%; }
+        a { color: $body_font_light;}
+        time {display: none;}
+        .btn {text-decoration: none; color: white; }
+        @include breakpoint(gamma) {
+            margin-top: -218px;
+            max-width: 100%;
+            padding-left: 5px;
+            .btn { margin-top: -15px}
+        }
+    }
+    .main--header {
+        margin-bottom: 12px;
+        margin-top: .67em; 
+        font-family: 'robotoslab', Georgia, Times;
+        font-weight: normal;
+        @include fontsize(36);
+        padding-top: .25em;
+        a {
+            color: white;
+            text-decoration: none;
+        }
+    }
+    .main--location {
+        @include fontsize(9);
+        text-align: center;
+        margin-top: -12px; 
+        margin-bottom: 22px; 
+    }
+    .main--tag {
+        color: white;
+        text-align: center;
+        @include breakpoint(gamma) {
+            margin-top: -10px;
+        }
+    }
+}
+.homepage--about {
+    &:after, &:before {
+        @include faded_line_after;
+    }
+    &:before { margin-bottom: 50px;}
+    @include breakpoint(gamma) {
+    p { 
+        @include fontsize(18);
+    }
+}
+}
+.black {
+    .post--title a {
+        color: white;
+    }
+    .homepage--archives {
+        .post--location a {
+            color: $body_font_light;
+        }
+        img { @include img_plain; }
+    }
+}
+.black .homepage--about {
+    &:after, &:before {
+        @include lighter_faded_line_after;
+    }
+}
+.v082016 {
+    .header-wrapper {
+        @include breakpoint(beta) {
+            border-bottom: none;
+        }
+    }
+    .banner .post--image {
+        @include breakpoint(gamma) {
+            max-height: 800px;
+            overflow: hidden;
+        }
+    }
+    .hero--wrapper {
+        @include breakpoint(gamma) {
+            margin-top: -225px;
+        }
+    }
+}
diff --git a/design/old/v8/_house.scss b/design/old/v8/_house.scss
new file mode 100644
index 0000000..a0604b6
--- /dev/null
+++ b/design/old/v8/_house.scss
@@ -0,0 +1,125 @@
+$blue: #39deea;
+
+.house .map img { background: none !important;}
+.house .map { 
+    height:234px;
+    width:100%;
+    margin-bottom: 8px;
+    @include breakpoint(gamma){
+        float: left; 
+        max-width: 33%;
+    }
+    @include breakpoint(delta){
+        max-width: 44%;
+    }
+    @include breakpoint(epsilon){
+        max-width: 50.5%;
+    }
+}
+.house #gmap_canvas { 
+    height:234px;
+    max-width:100%;
+}
+.house main { @include constrain_wide;}
+.house .picwide {
+    background: none;
+    max-width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    @include breakpoint(epsilon){
+        width: 1280px;
+    }
+}
+.flist {
+    @extend %clearfix;
+    @include constrain(900px);
+    @include fancy_sans;
+    @include fontsize(18);
+    margin-top: 4em;
+    text-align: left;
+    list-style-position: inside;
+    color: #393939;
+    li { 
+        margin: 1.5em 0;
+        min-height: 140px;
+    
+    }
+    li:first-of-type { margin-top: 0 ;}
+    
+    h3 {
+        @include fontsize(24);
+        max-width: 100%;
+        font-weight: 400;
+        margin: .25em 0 0 0;
+        padding-top: .15em;
+    }
+    .inner{
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+        border-radius: 30em;
+        position: absolute;
+        top: 19px;
+        left: 19px;
+        background: white url("/media/img/check.png") 50% 50% no-repeat;
+        background-size: 15px;
+    }
+    .outer {
+        display: inline-block;
+        float: left;
+        width: 60px;
+        height: 60px;
+        margin: 10px 40px 90px 0;
+        background: $blue;
+        border-radius: 30em;
+        position: relative;
+    }
+}
+.fsubhed {
+    @extend %clearfix;
+    @include constrain(1140px);
+    clear: both;
+    margin-top: 6em;
+    margin-bottom: 6em;
+    h2 {
+        margin-top: 0;
+        float: left;
+        position: relative;
+        font-weight: 400;
+        @include fontsize(32);
+        //&:after {
+        //    content: "";
+        //    position: absolute;
+        //    top: 50%;
+        //    height: 2px;
+        //    width: 200px;
+        //    display: block;
+        //    margin-top: -3px;
+        //    margin-left: 3em;
+        //    background-color: #e5e5e5;
+        //}
+    }
+    p { 
+        @include constrain(800px);
+        float: right;
+    }
+    a, a:visited, a:hover {
+        color: $blue;
+    }
+}
+.house {
+    a, a:visited, a:hover {
+        color: $blue;
+    }
+    b { 
+        @include fancy_sans;
+    }
+}
+.house .image-cluster {
+    margin-bottom: 3em;
+}
+.house .post--article h1 {
+    @include fancy_sans;
+    margin-top: 2.2em;
+    margin-bottom: 1em;
+}
diff --git a/design/old/v8/_inbox.scss b/design/old/v8/_inbox.scss
new file mode 100644
index 0000000..c1801d9
--- /dev/null
+++ b/design/old/v8/_inbox.scss
@@ -0,0 +1,77 @@
+.links main {
+    @include constrain_narrow;
+    .link-title a {
+        color: $body_font;
+        font-weight: 400;
+        text-decoration: none;
+    }
+    @include breakpoint(beta) {
+        text-align: left;
+    }
+}
+.videos {
+    margin-top: 3em;
+    @include constrain_wide;
+}
+
+.photo-gallery {
+    margin: 0 auto;
+    margin-top: 1.5em;
+    position: relative; 
+    width: 100%; /* for IE 6 */
+    img {
+        width: 100%;
+        max-width: 100%;
+        padding: 0;
+    }
+    h4 {
+        font-weight: 500;
+        margin: .5em 0;
+        letter-spacing: 1px;
+        font-size: 2em;
+    }
+    time { display: inline; }
+    a { color: inherit;}
+    @include breakpoint(alpha) {
+        div {
+            position: absolute; 
+            bottom: 28%; 
+            left: .35em; 
+            text-align: left;
+        }
+        time {
+            margin-left: .5em; 
+        }
+        h4 {
+            font-size: 2.75em;
+            margin-bottom: 0;
+        }
+        p {
+            line-height: 1.3;
+            max-width: 80%;
+            margin-left: .25em;
+            @include fontsize(18);
+        }
+    }
+    @include breakpoint(beta) {
+        div {
+            bottom: 22%; 
+        }
+    }
+    @include breakpoint(gamma) {
+        div {
+            bottom: 20%; 
+        }
+        @include constrain_wide;
+    }
+}
+.tags {
+    .tag-list {
+        li {
+            display: inline-block;
+            a {
+                padding: 3px;
+            }
+        }
+    }
+}
diff --git a/design/old/v8/_leaflet.scss b/design/old/v8/_leaflet.scss
new file mode 100644
index 0000000..b65ffb8
--- /dev/null
+++ b/design/old/v8/_leaflet.scss
@@ -0,0 +1 @@
+.leaflet-map-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-pane,.leaflet-tile-container,.leaflet-overlay-pane,.leaflet-shadow-pane,.leaflet-marker-pane,.leaflet-popup-pane,.leaflet-overlay-pane svg,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden;-ms-touch-action:none}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container img{max-width:none !important}.leaflet-container img.leaflet-image-layer{max-width:15000px !important}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-tile-pane{z-index:2}.leaflet-objects-pane{z-index:3}.leaflet-overlay-pane{z-index:4}.leaflet-shadow-pane{z-index:5}.leaflet-marker-pane{z-index:6}.leaflet-popup-pane{z-index:7}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:7;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-tile,.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;-o-transition:opacity .2s linear;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-tile-loaded,.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);-o-transition:-o-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile,.leaflet-touching .leaflet-zoom-animated{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-clickable{cursor:pointer}.leaflet-container{cursor:-webkit-grab;cursor:-moz-grab}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-container,.leaflet-dragging .leaflet-clickable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing}.leaflet-container{background:#ddd;outline:0}.leaflet-container a{color:#0078A8}.leaflet-container a.leaflet-active{outline:2px solid orange}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,.5)}.leaflet-container{font:12px/1.5 "Helvetica Neue",Arial,Helvetica,sans-serif}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,.65);border-radius:4px}.leaflet-bar a,.leaflet-bar a:hover{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console',Monaco,monospace;text-indent:1px}.leaflet-control-zoom-out{font-size:20px}.leaflet-touch .leaflet-control-zoom-in{font-size:22px}.leaflet-touch .leaflet-control-zoom-out{font-size:24px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255,255,255,.7);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover{text-decoration:underline}.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-scale{font-size:11px}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;font-size:11px;white-space:nowrap;overflow:hidden;-moz-box-sizing:content-box;box-sizing:content-box;background:#fff;background:rgba(255,255,255,.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 19px;line-height:1.4}.leaflet-popup-content p{margin:18px 0}.leaflet-popup-tip-container{margin:0 auto;width:40px;height:20px;position:relative;overflow:hidden}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;box-shadow:0 3px 14px rgba(0,0,0,.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;padding:4px 4px 0 0;text-align:center;width:18px;height:14px;font:16px/14px Tahoma,Verdana,sans-serif;color:#c3c3c3;text-decoration:none;font-weight:700;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover{color:#999}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)}.leaflet-oldie .leaflet-popup-tip-container{margin-top:-1px}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}
diff --git a/design/old/v8/_mailing-list.scss b/design/old/v8/_mailing-list.scss
new file mode 100644
index 0000000..561c059
--- /dev/null
+++ b/design/old/v8/_mailing-list.scss
@@ -0,0 +1,35 @@
+//Flexbox mixins rely on https://github.com/timhettler/compass-flexbox
+.mailing-list {
+    text-align: left;
+    @extend %clearfix;
+    .form--flex-container {
+        @include display-flex;
+    }
+}
+.form--label {
+    display: block;
+    font-weight: 600;
+    letter-spacing: 1px;
+    font-family: "Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+    @include fontsize(12);
+    margin-bottom: 6px;
+}
+.form--input {
+    @include flex-grow(1);
+    padding: .25em;
+    border: #c5c5c5 1px solid;
+    border-radius: .125em;
+    color: darken($body_font_light, 20);
+}
+.btn {
+    display: inline-block;
+    margin-left: 5px;
+    border-radius: .25em;
+    border: none;
+    padding: 8px 12px 7px;
+    max-width: 8.75em;
+    background: $orange;
+    color: white;
+    font: bold .75em Verdana,sans-serif;
+    text-transform: uppercase;
+}
diff --git a/design/old/v8/_map.scss b/design/old/v8/_map.scss
new file mode 100644
index 0000000..f7d958b
--- /dev/null
+++ b/design/old/v8/_map.scss
@@ -0,0 +1,73 @@
+.map--wrapper {
+    @include constrain_wide;
+    max-width: 99%;
+    margin-top: 2em;
+}
+#map-canvas {
+    height: 300px;
+    img { max-width: 100%; padding: 0; margin: 0; background: none;}
+    @include breakpoint(alpha) {
+        height: 400px;
+    }
+    @include breakpoint(beta) {
+        height: 500px;
+    }
+    @include breakpoint(gamma) {
+        border: 10px $brown solid;
+        width: 80%;
+        float: right;
+    }
+    @include breakpoint(delta) {
+        height: 600px;
+        width: 84%;
+    }
+}
+
+.map-legend {
+    @include constrain_wide;
+    text-align: left;
+    &:after {
+        content: " ";
+        display: table;
+        clear: both;
+    }
+    h4 {
+        font-family: sans-serif;
+        @include fontsize(14);
+        @include smcaps;
+        font-weight: bold;
+        margin: 1em 0 0.25em;
+        @include breakpoint(gamma) {
+            @include fontsize(13);
+        }
+    }
+    a { color: $body_font;}
+    li {
+        display: inline;
+        &:after {
+            content: ",";
+        }
+        @include breakpoint(gamma) {
+            display: block;
+            @include fontsize(13);
+            &: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;
+  }
+}
diff --git a/design/old/v8/_mixins.scss b/design/old/v8/_mixins.scss
new file mode 100644
index 0000000..0e29edf
--- /dev/null
+++ b/design/old/v8/_mixins.scss
@@ -0,0 +1,126 @@
+$brown: #201a11;
+$brown: #222;
+$light: #ccc;
+$orange: #b53a04;
+$link_color: #b53a04;
+$body_font: $brown;
+$body_font_light: #b3aeae;
+//$light;
+
+$max_width: 1280px;
+
+@mixin smcaps {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+@function calc-em($target-px, $context) {
+  @return $target-px / $context * 1em;
+}
+
+@mixin fontsize($size: 24, $base: 16) {
+    font-size: $size + px;
+    font-size: ($size / $base) * 1rem;
+}
+
+@mixin img_plain {
+    padding: 0;
+    max-width: 100%;
+    background: none;
+}
+
+@mixin generic-sans {
+    font-family: sans-serif;
+}
+
+@mixin fancy-sans {
+    font-family: Helvetica, sans-serif;
+}
+
+@mixin fancy-sans-bold {
+    font-family: Helvetica, sans-serif;
+    font-weight: 600;
+}
+
+%clearfix {
+    *zoom: 1;
+    &:before {
+        content: " ";
+        display: table;
+    }
+    &:after {
+        content: " ";
+        display: table;
+        clear: both;
+    }
+}
+
+@mixin transparent_class {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+  filter: alpha(opacity = 90);
+  opacity: 0.9;
+}
+
+@mixin faded_line_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));
+    background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+} 
+
+//for overriding the above on dark pages:
+@mixin light_faded_line_after {
+    background: -webkit-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+} 
+
+@mixin lighter_faded_line_after {
+    background: -webkit-linear-gradient(left, rgba(243,237,219,.1),rgba(243,237,219,0.3),rgba(243,237,219,.1));
+    background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+} 
+
+//generic constrain function
+@mixin constrain($size) {
+    max-width: $size;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+//set an element to centered, narrowish column width
+//used mostly on columns of text
+@mixin constrain_narrow() {
+    max-width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(beta) {
+        max-width: 640px;
+    }
+    @include breakpoint(gamma) {
+        max-width: 680px;
+    }
+}
+
+//set an element to centered, wideish column width
+@mixin constrain_wide() {
+    max-width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(gamma) {
+        max-width: $breakpoint-gamma;
+    }
+    @include breakpoint(delta) {
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        max-width: $max_width;
+    }
+}
diff --git a/design/old/v8/_normalize.scss b/design/old/v8/_normalize.scss
new file mode 100644
index 0000000..c451141
--- /dev/null
+++ b/design/old/v8/_normalize.scss
@@ -0,0 +1 @@
+/*! normalize.css v2.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}ul{list-style-type: none;margin:0;padding:0}
\ No newline at end of file
diff --git a/design/old/v8/_notes.scss b/design/old/v8/_notes.scss
new file mode 100644
index 0000000..ef49655
--- /dev/null
+++ b/design/old/v8/_notes.scss
@@ -0,0 +1,160 @@
+//****************  Notes Structure ************************
+
+.notes main, .notes--permalink main {
+    @include constrain_narrow();
+    margin-top: 1em;
+    h1 {
+        margin-bottom: 0;
+        @include fontsize(28);
+        @include breakpoint(beta) {
+            @include fontsize(28);
+            text-align: left;
+        }
+    }
+}
+.notes .h-entry, .notes--permalink .h-entry {
+    @extend %clearfix;
+    border: none;
+    padding: 0;
+    margin-top: 3em;
+    @include breakpoint(beta) {
+        margin-top: 2em;
+    }
+    &:first-of-type {
+        margin-top: 1em;
+    }
+    &:after {
+        @include faded_line_after;
+        @include breakpoint(beta) {
+            margin-top: 8.5em;
+        }
+    }
+}
+.note--title {
+    @include constrain_narrow;
+    text-align: left;
+    font-weight: 400;
+    font-size: 1.5em;
+    letter-spacing: 0px;
+    margin-bottom: .5rem !important;
+    a {
+        text-decoration: none;
+        color: $body_font !important;
+    }
+}
+
+.note--date {
+    @include smcaps;
+    @include fontsize(11);
+    text-align: center;
+    margin-bottom: 4px;
+    @include breakpoint(beta) {
+        float: right;
+        margin-top: 0;
+    }
+    a {
+        color: $brown;
+        text-decoration: none;
+    }
+}
+.note--date-container{
+    @extend %clearfix;
+    
+}
+.e-content {
+    @extend %clearfix;
+}
+.note--location {
+    text-align: center;
+    margin-top: 0;
+    @include breakpoint(beta) {
+        float: left;
+    }
+}
+.note--footer {
+    margin-top: 1.7em;
+    @include breakpoint(beta) {
+        margin-top: 0;
+    }
+}
+.month--divider {
+    margin-top: 2em;
+}
+.month--header {
+    @include constrain_narrow();
+    @include smcaps;
+    @include fontsize(12);
+    font-weight: normal;
+    font-family: sans-serif;
+    text-align: left;
+    margin-bottom: 3em;
+    border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
+}
+.notes--permalink {
+    .h-entry {
+        margin-top: 3em;    
+        @include breakpoint(gamma) {
+            margin-top: 5em;    
+        }
+    }
+    .e-content figure.picwide { margin-left: -300px !important}
+    &:after {
+        background: none;
+    }
+    .note--title {
+        // @include fontsize(24);
+    }
+    .note--footer {
+        margin-top: 2em;
+        @include constrain_narrow();
+        @include breakpoint(beta) {
+            margin-top: 1em;
+        }
+    }
+    #page-navigation {
+        clear: both;
+        margin-top: 10em;
+    }
+}
+/*
+@include breakpoint(beta) {
+    .notes {
+      main h1 {
+        float: none;
+        margin-bottom: 1em;
+        width: 100%;
+      }
+      main {
+          @include constrain(680px);
+          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;
+      }
+    }
+}
+*/
diff --git a/design/old/v8/_pagination.scss b/design/old/v8/_pagination.scss
new file mode 100644
index 0000000..404aeb7
--- /dev/null
+++ b/design/old/v8/_pagination.scss
@@ -0,0 +1,44 @@
+.pagination {
+    @include generic_sans;
+    margin-top: 2em;
+    margin-bottom: 2em;
+    font-weight: 400;
+    line-height: 2.3;
+    li {
+        display: inline;
+    }
+    a {
+        text-decoration: none;
+        border: 1px solid lighten($body_font, 30);
+        color: lighten($body_font, 20);
+        padding: 9px 6px 6px 6px;
+        margin-left: .25em;
+        margin-right: .25em;
+    }
+    .prev {
+        border: none;
+        &:before {
+            content: "\2190";
+        }
+    }
+    .next {
+        border: none;
+        &:after {
+            content: "\2192";
+            margin-left: .35em;
+        }
+    }
+    @include breakpoint(beta) {
+        .prev {
+            margin-right: 2em;
+        }
+        .next {
+            margin-left: 2em;
+        }
+        .current {
+            color: $link_color;
+            margin-right: .5em;
+            margin-left: .5em;
+        }
+    }
+}
diff --git a/design/old/v8/_photos.scss b/design/old/v8/_photos.scss
new file mode 100644
index 0000000..d152bf4
--- /dev/null
+++ b/design/old/v8/_photos.scss
@@ -0,0 +1,506 @@
+// ##############################################
+// Photo Gallery pages
+// ##############################################
+
+// Add padding and create grid layout at various widths:
+.image-gallery--list {
+    @include constrain_wide;
+    margin-top: 3em;
+    li {
+        display: inline-block;
+        margin-bottom: 10px;
+    }
+}
+@include breakpoint(alpha) {
+    .first, .third {
+        padding-right: 10px;
+    }
+}
+@include breakpoint(gamma) {
+    .first, .third {
+        padding-right: 0;
+    }
+    .one {
+        padding-right: 6px;
+    }
+    .two {
+        padding-left: 6px;
+        padding-right: 6px;
+    }
+    .three {
+        padding-left: 6px;
+    }
+}
+@include breakpoint(delta) {
+    .one, .two, .three {
+        padding: 0;
+    }
+    .first {
+        padding-right: 6px;
+    }
+    .second, .third {
+        padding-left: 6px;
+        padding-right: 6px;
+    }
+    .fourth {
+        padding-left: 6px;
+    }
+}
+
+//########### GALLERY FIGURES AND CAPTIONS ################
+.image-gallery--figure {
+    position: relative;
+    margin: 0;
+    width: 280px;
+    .image-gallery--legend {
+        display: block;
+        @include transparent_class;
+        position: absolute;
+        left: 0;
+        bottom: 8px;
+        width: 100%;
+        background: $brown;
+        color: #999999;
+    }
+    h1 {
+        @include smcaps;
+        @include fontsize(13);
+        margin: 8px 0 4px 8px;
+        text-align: left;
+        color: white;
+    }
+    p {
+        @include fontsize(12);
+        margin: 8px 0 4px 8px;
+        padding-bottom: 6px;
+    }
+}
+
+.image-gallery--wrapper {
+    @include constrain_wide;
+    .figcaption {
+        background: lighten(#000, 12);
+        margin: -6px 0 0 0;
+        padding: 1em 1em .5em 1em;
+        border-radius: 0 0 0.5em 0.5em;
+        &:after {
+            content: " ";
+            display: table;
+            clear: both;
+        }
+    }
+    h6 a {
+        color: darken($body_font_light, 20); 
+        text-decoration: none;
+        font-family: sans-serif;
+    }
+    img { background: none; max-width: 100%; padding: 0;}
+}
+.directions {
+    color: darken($body_font_light, 35);
+    text-align: center;
+    @include fontsize(13);
+    margin-top: 3em;
+    display: none;
+}
+.caption { 
+    float: left;
+    font-family: sans-serif;
+    min-height: 32px;
+    padding-right: 1.5em;
+    @include breakpoint(beta) {
+        width: 50%;
+        border-right: darken($body_font_light, 45) 1px solid;
+        min-height: 55px;
+    }
+    @include breakpoint(gamma) {
+        width: 65%;
+        padding-right: 2.5em;
+    }
+    @include breakpoint(delta) {
+        width: 70%;
+    }
+}
+.figcaption--title, .figcaption--date {
+    float: left;
+    font-weight: normal;
+    line-height: 24px;
+    vertical-align: bottom;
+    margin: 0;
+    display: block;
+}
+.figcaption--title {
+    margin-right: 1em;
+}
+.figcaption--date {
+    margin-top: 2px;
+}
+.caption .map-link { 
+    @include smcaps;
+    @include fontsize(13);
+    float: right;
+    text-decoration: none;
+    padding: 7px 14px 5px;
+    background: lighten(#000, 18);
+    color: $body_font_light;
+    border-radius: 25px;
+    &:hover {
+        background: $orange;
+    }
+}
+.figcaption--desc {
+    @include fontsize(13);
+    padding-top: .5em;
+    margin-bottom: 0;
+    clear: left;
+    margin-left: 0;
+    text-align: left;
+}
+.photo-options {
+    float: right;
+    font-family: sans-serif;
+    p{
+        @include fontsize(13);
+        margin-top: 12px;
+        margin-bottom: 2px;
+        color: darken($body_font_light, 35);
+        &:first-of-type {
+            margin-top: 4px;
+        }
+    }
+    a { color: darken($body_font_light, 35);}
+}
+.photo-options, .caption .map-link {
+  display: none;
+}
+@include breakpoint(beta) {
+    .photo-options, .caption .map-link, .directions {
+        display: block;
+    }
+}
+.fig { position: relative;}
+.image-gallery--wrapper .map-container {
+    left: -3%;
+    background: url("/media/img/mapbg-black.png") no-repeat top left !important;
+    @include breakpoint(beta) {
+        left: 4%;
+    }
+    @include breakpoint(gamma) {
+        left: 22%;
+    }
+    @include breakpoint(delta) {
+        left: 34%;
+    }
+}
+
+.map-wrapper {
+    width: 400px;
+    height: 328px;
+    position: absolute;
+    bottom: 27px;
+    margin: 0px 0 0 44px;
+}
+
+//.figcaption {
+//  clear: both;
+//  background: #1a1713;
+//  -moz-border-radius: 0 0 0.5em 0.5em;
+//  -webkit-border-radius: 0 0 0.5em 0.5em;
+//  border-radius: 0 0 0.5em 0.5em;
+//  color: white;
+//  margin: -0.25em 0 0 0;
+//  padding: 1em 0 1em 0;
+//  z-index: 100;
+//}
+//
+//.caption {
+//  width: 100%;
+//  float: none;
+//  p {
+//    font: normal 0.75em Helvetica, Verdana, sans-serif;
+//    margin: 0.5em 0 0 0.75em;
+//    padding-bottom: 0.25em;
+//  }
+//}
+
+//lightbox stuff from https://github.com/felixhagspiel/jsOnlyLightbox/blob/master/css/lightbox.scss
+
+/**
+*   VARS
+**/
+
+// font-sizes
+$font-size-huge: 2.8em;
+$font-size-big: 2em;
+$font-size-medium: 1.4em;
+
+$def-color-1: #FFFFFF;
+$def-color-2: #B9CED2;
+
+$border-color-1: #9C9FA5;
+
+$def-font-color: #6c7176;
+$font-color-highlight: #A99929;
+$font-color-hover-1: #C3B919;
+
+$darkblue: #3F658B;
+@mixin prefixr($var, $val) {
+  -webkit-#{$var}: $val;
+  -moz-#{$var}: $val;
+  -o-#{$var}: $val;
+  -ms-#{$var}: $val;
+  $var: $val;
+}
+
+/* IE8 Stuff */
+.jslghtbx-ie8.jslghtbx {
+  background-image: url('../img/trans-bck.png');
+  display: none;
+  &.jslghtbx-active {
+    display: block;
+  }
+  .jslghtbx-contentwrapper > img {
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    display: block;
+  }
+  .jslghtbx-contentwrapper.jslghtbx-wrapper-active > img {
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+  }
+}
+
+/* Main wrapper */
+.jslghtbx {
+  font-family: sans-serif;
+  overflow: auto;
+  visibility: hidden;
+  position: fixed;
+  z-index: 2;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  &.jslghtbx-active {
+    visibility: visible;
+    background-color: rgba(0, 0, 0, 0.85);
+  }
+}
+
+/* loading-animation */
+.jslghtbx-loading-animation {
+  margin-top: -60px;
+  margin-left: -60px;
+  width: 120px;
+  height: 120px;
+  top: 50%;
+  left: 50%;
+  display: none;
+  position: absolute;
+  z-index: -1;
+  & > span {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: 20px;
+    margin: 5px;
+    background-color: #fff;
+    @include prefixr(transition, all .3s ease-in-out);
+    &.jslghtbx-active {
+      margin-bottom: 60px;
+    }
+  }
+}
+
+.jslghtbx.jslghtbx-loading .jslghtbx-loading-animation {
+  display: block;
+}
+
+.jslghtbx-nooverflow {
+  overflow: hidden !important; // prevent showing of scrollbars on prev/next
+}
+
+.jslghtbx-contentwrapper {
+  margin: auto;
+  visibility: hidden;
+  & > img {
+    background: #fff;
+    padding: .5em;
+    display: none;
+    height: auto;
+    margin-left: auto;
+    margin-right: auto;
+    opacity: 0;
+  }
+}
+
+.jslghtbx-contentwrapper.jslghtbx-wrapper-active {
+  visibility: visible;
+  & > img {
+    display: block;
+    opacity: 1;
+  }
+}
+
+/* Caption */
+.jslghtbx-caption {
+  display: none;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  max-width: 450px;
+  color: #fff;
+  text-align: center;
+  font-size: .9em;
+}
+
+.jslghtbx-active .jslghtbx-caption {
+  display: inline;
+  margin-right: 1em;
+}
+
+/* Animation Stuff */
+.jslghtbx-contentwrapper.jslghtbx-animate > img {
+  opacity: 0;
+}
+
+.jslghtbx-contentwrapper > img.jslghtbx-animate-transition {
+  @include prefixr(transition, opacity .2s ease-in-out);
+}
+
+.jslghtbx-contentwrapper > img.jslghtbx-animating-next {
+  opacity: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+}
+
+.jslghtbx-contentwrapper > img.jslghtbx-animating-prev {
+  opacity: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+}
+
+.jslghtbx-contentwrapper > img.jslghtbx-animate-init {
+  opacity: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+}
+
+.jslghtbx-contentwrapper > img.jslghtbx-animate-transition {
+  cursor: pointer;
+}
+
+/* Controls */
+.jslghtbx-close {
+  position: fixed;
+  right: 23px;
+  top: 23px;
+  margin-top: -4px;
+  font-size: 2em;
+  color: $def-color-1;
+  cursor: pointer;
+  @include prefixr(transition, all .3s ease-in-out);
+  &:hover {
+    text-shadow: 0 0 10px #fff;
+  }
+  @media screen and(max-width: 1060px) {
+    font-size: 1.5em;
+  }
+}
+
+.jslghtbx-next,
+.jslghtbx-prev {
+  display: none;
+  position: fixed;
+  top: 50%;
+  max-width: 6%;
+  max-height: 250px;
+  cursor: pointer;
+  @include prefixr(transition, all .2s ease-in-out);
+  &.jslghtbx-active {
+    display: block;
+  }
+  & > img {
+    width: 100%;
+  }
+
+}
+
+.jslghtbx-next {
+  right: .6em;
+  &.jslghtbx-no-img:hover {
+    border-left-color: #787878;
+  }
+  @media screen and(min-width: 451px) {
+    right: .6em;
+    &.jslghtbx-no-img {
+      border-top: 20px solid transparent;
+      border-bottom: 20px solid transparent;
+      border-left: 20px solid #FFF;
+    }
+  }
+  @media screen and(max-width: 600px) {
+    &.jslghtbx-no-img {
+      right: 5px;
+      padding-left: 0;
+      border-top: 60px solid transparent;
+      border-bottom: 60px solid transparent;
+      border-left: 15px solid #FFF;
+    }
+  }
+  @media screen and(max-width: 450px) {
+    right: .2em;
+    padding-left: 20px;
+  }
+}
+
+.jslghtbx-prev {
+  left: .6em;
+  &.jslghtbx-no-img:hover {
+    border-right-color: #787878;
+  }
+  @media screen and(min-width: 451px) {
+    left: .6em;
+    &.jslghtbx-no-img {
+      border-top: 20px solid transparent;
+      border-bottom: 20px solid transparent;
+      border-right: 20px solid #FFF;
+    }
+  }
+  @media screen and(max-width: 600px) {
+    &.jslghtbx-no-img {
+      left: 5px;
+      padding-right: 0;
+      border-top: 60px solid transparent;
+      border-bottom: 60px solid transparent;
+      border-right: 15px solid #FFF;
+    }
+  }
+  @media screen and(max-width: 450px) {
+    left: .2em;
+    padding-right: 20px;
+  }
+}
+
+.jslghtbx-thmb {
+  @media screen and(min-width: 451px) {
+    margin: 1em;
+  }
+  @media screen and(max-width: 450px) {
+    margin: 1em 0;
+  }
+  padding: 2px;
+  max-width: 100%;
+  max-height: 140px;
+  cursor: pointer;
+  box-shadow: 0px 0px 3px 0px #000;
+  @include prefixr(transition, all .3s ease-in-out);
+  &:hover {
+    box-shadow: 0px 0px 14px 0px #000;
+  }
+}
+
+.p-link {
+    color: white !important;
+    @include fontsize(14);
+    &:after {
+        content: "\2197";
+    }
+}
diff --git a/design/old/v8/_projects.scss b/design/old/v8/_projects.scss
new file mode 100644
index 0000000..0bf4db2
--- /dev/null
+++ b/design/old/v8/_projects.scss
@@ -0,0 +1,257 @@
+.projects, .projects--intro p {
+    @include constrain_wide;
+}
+@include breakpoint(gamma) {
+    .projects--intro {
+        margin-top: 3rem;
+        -moz-column-count: 2;
+        -moz-column-gap: 30px;
+        -webkit-column-count: 2;
+        -webkit-column-gap: 30px;
+        column-count: 2;
+        column-gap: 30px;
+    }
+    p {
+        margin-top: 0;
+    }
+}
+.projects--list {
+    margin-top: 2em;
+    li { @extend %clearfix; margin-bottom: 2em; }
+    h1 {
+        @include fontsize(32);
+        a {
+            color: $body_font;
+            text-decoration: none;
+        }
+    }
+    @include breakpoint(gamma) {
+        h1 {
+            @include fontsize(24);
+            text-align: left;
+            font-weight: bold;
+            width: 40%;
+            float: left;
+            margin-top: -4px;
+            }
+        img { 
+            float: right; 
+            margin-left: 30px;
+            max-width: 640px;
+        }
+        li { margin-bottom: 4em }
+        p { 
+            @include constrain_wide; 
+            @include fontsize(17);
+            margin-right: 1em;
+            clear: left;
+        }
+    }
+    .projects--button { text-align: left; margin-left: 0}
+}
+
+//################# NATIONAL PARKS PROJECT #######################
+
+.main--full {
+    @include constrain_wide;
+    margin-top: 3em;
+    article { max-width: 100%; position: relative; margin-bottom: 3em;}
+    img { max-width: 100%; padding: 0;}
+    .buttons li {
+        display: inline;
+        @include fontsize(11);
+        text-transform: uppercase;
+        font-family: Helvetica Neue, Helvetica, sans-serif;
+        font-weight: 500;
+        margin: 5px;
+        line-height: 2.6em;
+        a {
+            color: $body_font_light;
+        }
+    }
+    @include breakpoint(beta) {
+        h2  { 
+            text-align: left;
+            @include fontsize(14);
+        }
+        .buttons {
+            margin: 2px 10px .5em 0;
+            line-height: 2.6em;
+            float: right;
+            li {
+                a { 
+                    text-decoration: none; 
+                    padding: 0.75em 1.5em 0.65em;
+                    background: #463215;
+                    -moz-border-radius: 25px;
+                    -webkit-border-radius: 25px;
+                    border-radius: 25px;
+                }
+            }
+        }
+    @include breakpoint(gamma) {
+        h2 {         @include fontsize(20);
+        }
+        .buttons {
+            margin: 0.5em 10px 0 0;
+            li a {
+                padding: 0.875em 1.75em 0.75em;
+            }
+        }
+    }
+
+}
+    .meta {height: 0;}
+}
+
+.park--title {
+    @include fontsize(18);
+    font-family: Helvetica Neue, Helvetica, sans-serif;
+    color: white;
+    @include breakpoint(beta) {
+        @include transparent_class;
+        @include fontsize(32);
+        position: absolute;
+        top: 0px;
+        background: #201a11;
+        z-index: 1000;
+        margin: 0;
+        width: 100%;
+        text-align: left;
+        line-height: 2em;
+        font-size: 2em;
+        padding-left: 0.25em;
+}
+}
+.park--subtitle {
+    @include fontsize(16);
+    @include breakpoint(beta) {
+        @include fontsize(20);
+        font-family: Helvetica Neue, Helvetica, sans-serif;
+        font-weight: normal;
+        line-height: 2.5;
+        color: white;
+        margin: 0 0 0 1em;
+        float: left;
+        padding: 0.3em 0;
+    }
+}
+.park--legend {
+    font-family: Helvetica Neue, Helvetica, sans-serif;
+    line-height: .6;
+    @include breakpoint(beta) {
+        @include transparent_class;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        margin: 0;
+        background: #201a11;
+    }
+}
+.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 0.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;
+      }
+    }
+  }
+}
+
+//################# EXPENSE TRACKER TABLES #######################
+
+.expense-wrapper {
+    @include constrain_narrow();
+}
+.expense {
+    min-width: 90%;
+    margin-bottom: 3em;
+    caption { 
+        text-align: left;
+        padding: 1em 0;
+        @include fontsize(18);
+    }
+    thead tr {
+        border-bottom: 1px solid darken(#eff7ff, 10);
+        padding: 0;
+        font-weight: bold;
+        @include smcaps;
+        font-family: sans-serif;
+        @include fontsize(12);
+    }
+    text-align: left;
+    td {
+        width: 80%;
+    }
+    tr td {
+        padding: .5em .25em;
+        color: lighten($body_font, 10);
+    }
+    .odd, .total {
+        background-color: #eff7ff;
+    }
+    .total {
+        border-top: 1px solid darken(#eff7ff, 10);
+    }
+    tfoot:after {
+        @include faded_line_after;
+    }
+}
+
+.end:after {
+    @include faded_line_after;
+}
+.upfront tfoot:after {
+        margin: 0;
+        height: 0;
+        background: none;
+    }
diff --git a/design/old/v8/_queries.scss b/design/old/v8/_queries.scss
new file mode 100644
index 0000000..db165ae
--- /dev/null
+++ b/design/old/v8/_queries.scss
@@ -0,0 +1,31 @@
+$breakpoint-alpha: 38em; //608
+$breakpoint-alpha-2: 450px;
+$breakpoint-beta: 49em; //784
+$breakpoint-beta-2: 620px;
+$breakpoint-gamma: 960px;
+$breakpoint-delta: 1170px;
+$breakpoint-epsilon: $max_width;
+
+@mixin breakpoint($point) {
+    @if $point == "alpha" {
+        @media screen and (min-width:$breakpoint-alpha ){ @content; }
+    }
+    @if $point == "alpha-2" {
+        @media screen and (min-width:$breakpoint-alpha-2 ){ @content; }
+    }
+    @else if $point == "beta" {
+        @media screen and  (min-width: $breakpoint-beta) { @content; }
+    }
+    @else if $point == "beta-2" {
+        @media screen and  (min-width: $breakpoint-beta-2) { @content; }
+    }
+    @else if $point == "gamma" {
+        @media screen and (min-width: $breakpoint-gamma)  { @content; }
+    }
+    @else if $point == "delta" {
+        @media screen and (min-width: $breakpoint-delta)  { @content; }
+    }
+    @else if $point == "epsilon" {
+        @media screen and (min-width: $breakpoint-epsilon)  { @content; }
+    }
+}
diff --git a/design/old/v8/_resume.scss b/design/old/v8/_resume.scss
new file mode 100644
index 0000000..37cc20e
--- /dev/null
+++ b/design/old/v8/_resume.scss
@@ -0,0 +1,149 @@
+.head {
+    @extend %clearfix;
+    @include constrain(780px);
+    margin-top: 4em;
+}
+.resume main header {
+    width: 100%;
+    h1 {
+        @include fontsize(36);
+        text-transform: uppercase;
+        letter-spacing: 3px;
+        font-weight: 600;
+        line-height: 1;
+        margin-bottom: 0;
+        color: #444;
+    }
+    h2 {
+        margin-top: .5em !important;
+        @include fontsize(14);
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-style: italic;
+        color: #333;
+    }
+    @include breakpoint(gamma) {
+        width: 60%;
+        float: left;
+        text-align: left;
+        margin-top: .5em;
+    }
+}
+.h-resume {
+    h3,h2 {
+        @include constrain_narrow;
+        text-align: left;
+    }
+    h3 {
+        font-family: sans-serif;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-size: 0.75rem;
+        margin-top: 4em;
+        margin-bottom: 3em;
+        border-bottom: 1px dotted #333;
+    }
+    h2 {
+        margin-top: 2.5em;
+        margin-bottom: .25em;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-size: 1rem;
+    }
+    h2 a, h2 a:visited {
+        text-decoration: none;
+        color: #444;
+    }
+}
+.meta {
+    @include constrain_narrow;
+    text-align: left;
+    margin-bottom: 1em;
+    time{
+        display: inline;
+    }
+}
+.contact {
+    margin: 2em 0 1.5em;
+    @include constrain_narrow;
+    li {
+        display: block;
+        @extend %clearfix;
+    }
+    @include breakpoint(gamma) {
+        width: 160px;
+        float: right;
+        margin: 1.9em 0 1.5em;
+        li {
+            display: block;
+        }
+    }
+  h6, a {
+    font-size: 13px;
+    font-size: 0.8125rem;
+    line-height: 1.8;
+    margin: 0;
+    display: block;
+    float: left;
+  }
+  h6 {
+    font-size: 11px;
+    font-size: 0.6875rem;
+    line-height: 2.1;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    &:after {
+      content: ":";
+      margin-right: 5px;
+    }
+  }
+  a {
+    font-family: sans-serif;
+  }
+}
+.publications-list  {
+    text-align: left;
+    @include constrain_narrow;
+    h2 {
+        @include smcaps;
+        @include fontsize(12);
+        font-weight: 400;
+        text-align: left;
+        border-bottom: 1px dotted #333;
+        margin-bottom: 2em;
+        &:first-of-type {
+            margin-top: 3em;
+        }
+    }
+    h3, time {
+        display: inline;
+    }
+    time:before {
+        content: "\00a0 \00a0"
+    }
+}
+.publisher {
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+.pub-title {
+    margin-bottom: 1.75em;
+    a {
+        color: $brown;
+        text-decoration: none;
+        font-weight: 400;
+    }
+}
+.resume h6 {
+    @include constrain_narrow;
+    text-align: left;
+    font-weight: 400;
+    @include fontsize(12);
+}
+.toc {
+    @include constrain_narrow;
+    text-align: left;
+    a {
+        color: $brown;
+    }
+}
diff --git a/design/old/v8/_src.scss b/design/old/v8/_src.scss
new file mode 100644
index 0000000..2be4ef3
--- /dev/null
+++ b/design/old/v8/_src.scss
@@ -0,0 +1,160 @@
+.latest {
+    @include constrain_narrow;
+    @include fontsize(12);
+    @include smcaps;        
+    font-weight: 400;
+}
+.src-archive {
+    .topic-hed {
+        @include fontsize(20);
+        @include constrain_narrow;
+        margin-top: 1.5em;
+        margin-bottom: 1.5em;
+        @include breakpoint(beta) {
+            @include fontsize(28);
+            margin-top: 1em;
+        }
+    }
+    article {
+        margin-bottom: 3em;
+        p { 
+            color: lighten($body_font_color, 15);
+        }
+    }
+    h2 {
+        @include constrain_narrow;
+        @include fontsize(22);
+        font-weight: 400;
+        margin-bottom: .25em;
+        a {
+            color: $body_font;
+            color: lighten($body_font, 15);
+            text-decoration: none;
+        }
+    }
+
+    p {
+        text-align: left;
+        @include fontsize(16);
+    }
+
+    @include breakpoint(beta) {
+        text-align: left;
+    }
+}
+.src-topics {
+    @include smcaps;
+    @include fontsize(11);
+}
+.src article {
+    ul { 
+        @include constrain_narrow;
+        margin-top: 2em;
+        margin-bottom: 2em;
+    }
+    ul li {
+        text-align: left;
+        list-style-type: disc;
+        margin-left: 1em;
+        padding-left: .5em;
+    }
+    ol {
+        text-align: left;
+        @include constrain_narrow;
+        padding-left: 1em;
+        @include fontsize(18);
+        @include breakpoint(beta) {
+            max-width: 580px;
+            @include fontsize(17);
+        }
+        li {
+            margin-top: .75em;
+        }
+    }
+    .footnote ol {
+        list-style-position: outside;
+        @include breakpoint(beta) {
+            max-width: 680px;
+        }
+    }
+}
+.post--body pre {
+    margin: 1em auto !important;
+}
+.highlight {
+    padding: .5em;
+    margin-bottom: 1em;
+}
+.go:before {
+    content: "$ ";
+}
+code > .comment::after {
+    display:none;
+}
+#book-page .book-list {
+    @include constrain_narrow;
+    @include breakpoint(beta) {
+        .book-list-item {
+            width: 45%; 
+        }
+    }
+}
+#book-page section {
+    @include constrain_narrow;
+    max-width: 100%;
+    @include breakpoint(gamma) {
+        margin-left: 80px;
+        p {
+            margin-left: 0;
+        }
+    }
+}
+.paypal-form-wrapper {
+    @include constrain_narrow;
+    text-align: left;
+        @include breakpoint(gamma) {
+        form {
+            margin: 2em 5em;
+        }
+    }
+}
+
+@include breakpoint(beta) {
+    .btn-top {
+        margin-left: 1.2em
+    }
+    .btn-bottom {
+        margin-left: 5em;
+    }
+}
+
+.smcaps{
+    font-weight: 500;
+    letter-spacing: 1px;
+    margin: 3em 0 .5em 0;
+    @include generic_sans;
+    @include smcaps;
+    @include fontsize(14);
+    @include breakpoint(gamma) {
+        margin-left: 80px;
+    }
+}
+.dotted {
+    list-style-type: disc;
+    li {
+        margin-top: .5em;
+        margin-bottom: .5em;
+    }
+    @include breakpoint(gamma) {
+        font-size: 1.25rem;
+        line-height: 1.6;
+    }
+}
+
+#essay-archive h1 {
+    @include constrain_narrow;
+}
+#essay-archive h4 {
+    margin-bottom: 3em;
+    margin-top: -.85em;
+}
diff --git a/design/old/v8/_writing_archive.scss b/design/old/v8/_writing_archive.scss
new file mode 100644
index 0000000..69397b1
--- /dev/null
+++ b/design/old/v8/_writing_archive.scss
@@ -0,0 +1,150 @@
+.archive {
+    @extends %clearfix;
+    @include constrain_wide();
+    margin-top: 3em;
+    .post--title { 
+        text-align: left;
+        margin: .25rem 4px;
+        font-weight: normal;
+        @include fontsize(24);
+        a {
+            color: $body_font;
+            text-decoration: none;
+            font-style: italic;
+        }
+        @include breakpoint(gamma) {
+            @include fontsize(22);
+            margin: .1rem 4px;
+        }
+    }
+    .post--location {
+        @include fontsize(11);
+    }
+    .post--date{
+        margin: 0 4px;
+        text-align: left;
+    }
+    .post--image img { background: none; max-width: 100%; padding: 0}
+    article {
+        width: 100%;
+        margin: 0;
+        display: inline-block;
+        margin-bottom: 2em;
+        vertical-align: top;
+    }
+    p {
+        margin-top: 0;
+        margin-left: 4px;
+        margin-right: 4px;
+    }
+    @include breakpoint(alpha) {
+        article {
+            width: 45.25%;
+        }
+        p {
+            @include fontsize(16);
+        }
+        .odd {
+            padding-right: 10px;
+        }
+        .even {
+            padding-left: 10px;
+        }
+    }
+    @include breakpoint(gamma) {
+        article {
+            width: 31%;
+        }
+        .odd, .even { padding: 0;}
+        .first {
+            padding-right: 10px;
+        }
+        .second {
+            padding-right: 10px;
+            padding-left: 10px;
+        }
+        .third {
+            padding-left: 10px;
+        }
+        p {
+            @include fontsize(14);
+            margin-top: 0;
+            margin-left: 4px;
+            margin-right: 4px;
+        }
+    }
+    @include breakpoint(delta) {
+        article { width: 354px;}
+    }
+    @include breakpoint(epsilon) {
+        article, article img { width: 410px;}
+    }
+}
+
+.date-archive {
+    @extends %clearfix;
+    @include constrain_wide();
+    margin: 0 auto;
+    margin-bottom: 9em;
+    max-width: 460px !important;
+    text-align: left;
+}
+.dater {
+    @extends %clearfix;
+    margin-top: 3em;
+    margin-bottom: 3em;
+    span {
+        @include smcaps;
+        @include fontsize(11);
+        font-family: sans-serif;
+    }
+    ul {
+        margin-top: .5em;
+        margin-bottom: 1.5em;
+        li {
+            @extends %clearfix;
+            clear: both;
+        }
+    }
+    
+}
+.arc-item {
+    clear: both;
+    margin: 0 auto;
+    a {
+        display: block;
+        float: left;
+    }
+    time {
+        float: right;
+        line-height: 36px;
+    }
+}
+.homepage--about .homepage--arc-header:after{
+    @extend %clearfix;
+    display: block;
+    width: 100%;
+    margin: 2em auto 1em;
+    height: 150px;
+    background: url("/media/img/usa-resize.svg") 50% no-repeat;
+    background-size: 230px;
+    @include breakpoint(gamma) {
+        display: inline;
+        width: 0;
+        height: 0;
+        background: none;
+    }
+}
+
+.homepage--about {
+    @include breakpoint(gamma) {
+        background: url("/media/img/usa-resize.svg") 0 60% no-repeat;
+        background-size: 120px;
+    }
+    @include breakpoint(delta) {
+        background-size: 170px;
+    }
+    @include breakpoint(epsilon) {
+        background-size: 250px;
+    }
+}
diff --git a/design/old/v8/_writing_details.scss b/design/old/v8/_writing_details.scss
new file mode 100644
index 0000000..9ba4015
--- /dev/null
+++ b/design/old/v8/_writing_details.scss
@@ -0,0 +1,829 @@
+// ##############################################
+// Most of the basic formatting for paragraphs is
+// handled in _global.scss. This just handles the 
+// bits specific to article detail pages
+// e.g. header, footnotes, images, page nav, two
+// col and dark page
+// ##############################################
+
+figcaption, figcaption a {
+    line-height: 1.9;
+    padding-left: .5em;
+    text-align: left !important;
+    @include fancy_sans;
+    @include fontsize(12);
+    color: #666;
+}
+figcaption a:visited {
+    color: #666;
+}
+.post--header {
+    @include constrain_narrow();
+    @include breakpoint(beta) {
+        text-align: left;
+        margin-top: 3em;
+        margin-bottom: .75em;
+    }
+    @include breakpoint(delta) {
+        margin-top: 4em;
+    }
+}
+.page--title {     
+    @include constrain_narrow();
+    @include breakpoint(beta) {
+        text-align: left;
+        margin-top: 2em;
+    }
+}
+.post--location {
+    @include smcaps;
+    @include fontsize(11);
+}
+.post--article, .notes .h-entry,  {
+    h2, h3 {
+        @include constrain_narrow;
+        font-family: Helvetica Neue, Helvetica, sans-serif;
+        text-align: left;
+    }
+    blockquote {
+        @include constrain_narrow;
+        text-align: left;
+        padding: 20px;
+        font-style: italic;
+        p {
+            margin-left: 1em;
+            margin-right: 1em;
+        }
+    }
+    .notes {
+        @include smcaps;
+        @include constrain_narrow;
+        font-weight: normal;
+        text-align: left;
+        &:before {
+            @include faded_line_after;
+            margin-bottom: 3em;
+        }
+    }
+    .addendum {
+        @include constrain_narrow;
+        text-align: left;
+        dt { 
+            margin-left: -30px;
+            font-style: italic;
+            padding-left: 30px;
+            text-indent: -30px;    
+            margin-bottom: .5em;
+        }
+        dd { margin-left: 0; margin-bottom: 1.5em;}
+    }
+    .numeral {
+        display: block;
+        font: bold 1.2em sans-serif;
+        margin-bottom: 0;
+        margin-top: 1em;
+    }
+    .vid {
+        margin: 4em 0;
+    }
+    .small {
+        font-size: 96%;
+    }
+    figure {
+        @include constrain_wide;
+        margin-bottom: 2em;
+    }
+    figure.picfull {
+        max-width: 680px;
+        margin-bottom: 2em;
+        border-bottom: 1px solid #eae6e6;
+        padding-bottom: .5em;
+    }
+    cite {
+        font-style: italic;
+    }
+}
+.footnote-ref {
+    padding: 0 2px;
+    @include fontsize(16);
+}
+.dark, .black  {
+    .footnote-ref {
+        padding: 0px 3px 0 4px;
+    }
+    figure.picfull {
+        border-color: #424040;
+    }
+    figcaption {
+        color: #8F8B8B;
+    }
+}
+.black {
+    .post--article {
+        color: #9C9292;
+    }
+    .post--article img {
+        padding: none;
+        background: none;
+    }
+    #page-navigation a {
+        color: $body_font_light;
+    }
+}
+
+
+//### Inline Maps ###
+#detail-map-canvas {
+    width: 100%;
+    height: 0;
+    margin: 0 auto;
+    float: none;
+    border: none !important;
+}
+#detail-map-canvas .detail-map-inner-canvas {
+    width: 100%; 
+    height: 100%; 
+    border: none !important;
+}
+#detail-map-canvas img {
+    max-width: 100%;
+    padding: 0;
+    margin: 0;
+    background: none;
+}
+
+/* special case for debi's master list*/
+.list-debi {
+    @include constrain_narrow();
+    text-align: left;
+    > li {
+        font-weight: bold;
+        margin: .25em 0 .25em 0;
+    }
+    li ul li {
+        font-weight: normal;
+        margin: .25em 0 .25em .5em;
+        &:before {
+            content: "\2022";
+            display: inline-block;
+            margin-right: 10px;
+            margin-top: 2px;
+        }
+    }
+}
+
+/* occassionally I have section breaks */
+.break {
+    display: block;
+    margin: 3em auto; 
+    content: "";
+    height: 1px;
+    width: 100%;
+    background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0));
+    background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0));
+    background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0));
+    background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0));
+} 
+
+//### FOOTNOTES ###
+.footnote {
+    @include constrain_narrow();
+    margin: 1em auto 0 auto;
+    padding: 0;
+    list-style-type: none;
+    &:before, &:after {
+        @include faded_line_after;
+        @include breakpoint(beta) {
+            margin-bottom: 2em;
+        }
+    }
+    p {
+        font-size: 0.875em;
+        line-height: 1.4;
+    }
+    hr {display: none;}
+    ol {
+        padding-left: 1em;
+        @include breakpoint(alpha) {
+            margin-left: 1em;
+        }
+    }
+}
+.dark .footnote:before {
+    @include light_faded_line_after;
+}
+
+//### IMAGES AND FIGURES ###
+.postpic, .postpicright {
+  display: block;
+  width: auto;
+}
+.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;
+}
+.picfullv {
+  margin-top: 20px;
+margin-left: auto;
+margin-right: auto;
+display: block;
+}
+img.picwide {
+    background: none;
+    max-width: 100%;
+    clear: both;
+    margin: 1em 0;
+    @include breakpoint(gamma) {
+        margin-left: -140px;
+        max-width: $breakpoint-gamma;
+    }
+    @include breakpoint(delta) {
+        margin-left: -245px;
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        margin-left: -300px;
+        max-width: $max_width *.99;
+    }
+}
+.picwide figcaption {
+    margin-bottom: 2em;
+    border-bottom: 1px solid #eae6e6;
+    padding-bottom: .5em;
+    @include generic_sans;
+    @include breakpoint(gamma) {
+        text-align: right;
+        width: $breakpoint-gamma;
+        max-width: $breakpoint-gamma;
+    }
+    @include breakpoint(delta) {
+        width: $breakpoint-delta;
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        width: $max_width;
+        max-width: $max_width;
+    }
+}
+figure.picwide img.picwide {
+    margin: auto !important;
+    padding: 0 !important;
+    @include breakpoint(epsilon) {
+        margin-left: 0;
+    }
+}
+.notes figure.picwide, .h-entry figure.picwide, .birds figure.picwide  {
+    @include breakpoint(gamma) {
+        margin-left: -140px;
+    }
+    @include breakpoint(delta) {
+        margin-left: -245px;
+    }
+    @include breakpoint(epsilon) {
+        margin-left: -300px;
+        max-width: 100% !important;
+    }
+}
+.src .picwide, .h-entry figure.picwide {
+    margin-left: auto !important;
+}
+.picwide960 {
+    clear: both;
+    margin: 1em 0;
+    @include breakpoint(gamma) {
+    margin-left: -140px;
+    width: 960px;
+    max-width: 960px;
+    }
+}
+.sans-caption {
+    @include generic_sans;
+    small, a {     
+        display: block;
+        font-size: 64%;
+    }
+    & > .picwide960 {
+        margin-bottom: 0;
+    }
+}
+
+.figure {
+  position: relative;
+  max-width: 90%;
+  margin: 0 auto;
+    @include breakpoint(gamma) {
+        max-width: 640px;
+    }
+    @include breakpoint(delta) {
+        max-width: 680px;
+    }
+  .legend {
+    display: block;
+    @include transparent_class;
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    font-size: 13px;
+    padding: 8px 0 8px 2%;
+    width: 96%;
+    background: $brown;
+    color: #999999;
+  }
+}
+.picgroup {
+    margin: 0 auto 1.5em;
+    max-width: 90%;
+    .picgroup-cap {
+        font-size: 88%;
+        max-width: 550px;
+        margin: -8px auto 0;
+        text-align: left;
+        background: $brown;
+        color: #999999;
+        padding: 8px 1.4%;
+    }
+    @include breakpoint(gamma) {
+        img {
+            max-width: 555px;
+            padding: 8px;
+        }
+    }
+    @include breakpoint(delta) {
+        .picgroup-cap {
+            padding: 8px 1%;
+        }
+    }
+    @include breakpoint(epsilon) {
+        .picgroup-cap {
+            max-width: 1128px;
+            margin: -14px auto 0;
+            padding: 9px;
+        }
+    }
+}
+.image-cluster, .cluster {
+    .row-2, .row-3, .row-4, .stack-2, .stack-3 {
+        display: block;
+    }
+    @include constrain_wide;
+    @extend %clearfix;
+    margin-bottom: 2em;
+    margin-top: 2em;
+    max-width: 100%;
+    p {
+        max-width: 100%;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    img {
+        width: 100%;
+        padding: 0;
+        margin-top: 0;
+        max-width: 100%;
+    }
+    img.picwide { 
+        margin: 0;
+    }
+    figcaption, figure {
+        margin-bottom: 0;
+        border: none;
+    }
+    .stack-2 {
+        float: left;
+    }
+    @include breakpoint(beta-2) {
+        figure {
+            max-width: 99%;
+        }
+        img.picwide {
+            padding: 0;
+            margin-bottom: 0;
+            max-width: 100%;
+            width: 100%;
+            background: none;
+        }
+        .row-2 {
+            a:last-of-type img, figure:last-of-type {
+                float: right;
+                margin-right: 0;
+            }
+            figure:first-child {
+                float:left;
+            }
+        }
+        .pic66 {
+            max-width: 63.9%;
+        }
+        figure.pic66 { float: left; max-width: 65.9%;}
+        .row-right .pic25 {
+            max-width: 49%;
+        }
+        .pic25 {
+            max-width: 24.5%;
+        }
+        .stack-2 {
+            max-width: 32.95%;
+            float: left;
+        }
+        .stack-2 + a img {
+            max-width: 66.6%;
+            float: right
+        }
+        .extra-2 {
+            max-width: 65.9%;
+        }
+        .right { float: right;}
+        .right + a img {
+            float:left 
+        }
+    }
+    @include breakpoint(beta) {
+        img.picwide {
+            max-width: 100%;
+        }
+        div img {
+            width: 100%;
+            padding: 0;
+            margin: 0 6px 0 0;
+        }
+        div a:last-of-type {
+            img { 
+                margin-right: 0;
+            }
+        }
+        .pic5 {
+            max-width: 49.5%;
+            margin: 0;
+            float: left;
+            figcaption {
+                padding-bottom: .5em;
+            }
+        }
+        img.pic5 {
+            margin: 0 6px 6px 0;
+        }
+        .pic25 {
+            max-width: 50%;
+        }
+        .row-3  .pic33 {
+            float: left;
+            max-width: 32.3%;
+            margin: 0 0 6px 0;
+            padding-right: 6px;
+            background: transparent;
+        }
+    }
+    @include breakpoint(gamma) {
+        figure {
+            max-width: 100%;
+        }
+        .row-right {
+            float: right;
+        }
+        .row-3  .pic33 {
+            max-width: 32.6%;
+        }
+    }
+    @include breakpoint(epsilon) {
+        .row-3  .pic33 {
+            max-width: 32.8%;
+        }
+        .pic5 {
+            max-width: 49.7%;
+        }
+    }
+
+}
+
+.embed-wrapper {
+    @include constrain_wide;
+    @include breakpoint(gamma) {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+.embed-container { 
+    position: relative; 
+    padding-bottom: 56.25%; 
+    height: 0; 
+    overflow: hidden; 
+    max-width: 100%; 
+    height: auto; 
+} 
+.embed-container iframe, .embed-container object, .embed-container embed { 
+    position: absolute; 
+    top: 0; 
+    left: 0; 
+    width: 100%; 
+    height: 100%; 
+}
+
+.post--body--single ul {
+    @include constrain_narrow();
+    margin: 1em auto;
+    text-align: left;
+    list-style-type: disc;
+}
+
+//### PAGE NAVIGATION ###
+#page-navigation {
+    margin: 2em auto;
+    @include constrain_narrow();
+    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;
+        color: $brown;
+        text-decoration: none;
+    }
+}
+
+//### COMMENTS AND FORMS ###
+.comments--header {
+    font-family: Helvetica Neue, Helvetica, sans-serif;
+    line-height: 6em;
+    @include fontsize(16);
+    font-style: italic;
+    &:before {
+        @include faded_line_after;
+        margin-top: 2em;
+    }
+}
+.comments--wrapper {
+    @include constrain_narrow();
+    text-align: left;
+    margin-top: -2em;
+}
+.comment {
+    margin-top: 2.5em;
+    margin-bottom: 2.5em;
+    &:first-child {
+        margin-top: none;
+    }
+    &:after {
+        @include faded_line_after;
+    }
+    &:last-child:after {
+        display: none;
+    }
+}
+.comment--head, .comment--body {
+    margin-left: 80px;
+}
+.comment--head {
+    margin-bottom: 1em;
+}
+.comment--body {
+    margin-bottom: 3em;
+}
+.who {
+    font-family: Helvetica Neue, Helvetica, sans-serif;
+    @include fontsize(18);
+}
+.when {
+    @include fontsize(13);
+    margin-left: 1em;
+    font-style: italic;
+}
+
+.gravatar {
+    border: 2px $brown solid;
+    background: transparent;
+    max-width: 100%;
+    padding: 0;
+    float: left;
+    margin-top: 5px;
+}
+
+
+.comment--form--wrapper {
+    @include constrain_narrow();
+    &:before {
+        @include faded_line_after;
+    }
+}
+.comment--form--header {
+    margin-top: 2em;
+}
+.comment--form {
+    margin: 0 auto;
+    @include breakpoint(delta) {
+        margin-left: 20%
+    }
+    label {
+        display: block;
+        font-weight: 500;
+        letter-spacing: 1px;
+        font-family: "Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+        @include fontsize(13);
+    }
+    input, textarea {
+        padding: .25em;
+        border: #c5c5c5 1px solid;
+        border-radius: .125em;
+        color: darken($body_font_light, 20);
+        width: 100%;
+        @include breakpoint(gamma) {
+            width: 70%;
+        }
+    }
+    input[type="submit"] {
+        width: auto;
+        color: white;
+        letter-spacing: 1px;
+        background: $orange;
+        font: bold .65em Verdana,sans-serif;
+        text-transform: uppercase;
+        border: none;
+        border-radius: .25em;
+        padding: 8px 12px 7px;
+    }
+    blockquote {
+        margin: 3em 0;
+        p {
+            @include fontsize(18);
+        }
+    }
+    h2, h3 { text-align: left}
+}
+.comment--form--header-h1 {
+    @include breakpoint(delta) {
+        text-align: left;
+        margin-left: 30%;
+        @include fontsize(24);
+    }
+}
+.cform-arc { 
+    @include breakpoint(delta) {
+        margin-left: 30%;
+    }
+}
+
+// ##############################################
+// On double and double-dark make the top wide
+// with two columns of text (nothing for ie9-
+// ##############################################
+@include breakpoint(gamma) {
+    .post--header--double {
+        float: left;
+        max-width: 200px;
+        margin-right: 2em;
+        margin-top: 5px;
+        .post--title, .post--date, .post--location {
+            text-align: right;
+        }
+        .post--title {
+            line-height: 1.1;
+            margin-top: 1.2em;
+        }
+    }
+    .col {
+        margin-top: 3rem;
+        -moz-column-count: 2;
+        -moz-column-gap: 30px;
+        -webkit-column-count: 2;
+        -webkit-column-gap: 30px;
+        column-count: 2;
+        column-gap: 30px;
+        p { margin-top: 0; margin-bottom: 2em;}
+        p:first-of-type:first-letter {
+                @include fontsize(60);
+                line-height: 42px;
+                display: block;
+                float: left;
+                padding: 11px 8px 5px 0;
+        }
+    }
+}
+.post--article--double {
+    @include constrain_wide();
+}
+
+// ##############################################
+// On dark and double-dark pages we invert the 
+// colors, most of which happens in _global but
+// the page nav links need to be done here
+// ##############################################
+.dark #page-navigation a {
+    color: $body_font_light;
+}
+
+.map--icon {
+    @include constrain_wide;
+    display: block;
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    border: 2px solid $brown;
+    margin: -38px 3em 0;
+    float: right;
+    @include breakpoint(gamma) {
+        margin: 0 auto;
+        float: none;
+    }
+}
+.entry-footer {
+    @extend %clearfix;
+    @include constrain_narrow;
+    margin-top: 2em;
+    text-align: left;
+    li {
+        margin: .25em 0;
+    }
+    li ul {
+        columns: 2 auto;
+    }
+    li ul li:before {
+      content: "\2022";
+      margin-right: .35rem;
+      color: lighten($body_font, 40);
+    }
+    .grouper {
+        margin-top: 1em;
+    }
+    a {
+        text-decoration: none;
+        color: lighten($body_font, 20);
+    }
+    #wildlife li ul li {  
+        color: lighten($body_font, 40);
+        a {
+            color: lighten($body_font, 10);
+        }
+    }
+    @include breakpoint(beta) {
+        margin-bottom: 4em;
+        #wildlife {  
+            max-width: 55%;
+            float: left;
+            margin-right: 1.2rem;
+        }
+        #recommended-reading{
+            img {
+                max-width: 180px;
+            }
+        }
+    }
+    aside {
+        @extend %clearfix;
+        margin-bottom: 3em;
+    }
+    &:after, &:before {
+        @include faded_line_after;
+        @include breakpoint(beta) {
+            display: block;
+            margin-bottom: 2em;
+        }
+    }
+}
+#field_notes {
+    @include breakpoint(beta) {
+        max-width: 33%;
+        float: left;
+        margin-top: .15em;
+        margin-left: 7em;
+    }
+    li:before {
+      content: "\2022";
+      margin-right: .35rem;
+      color: $body_font_light;
+    }
+}
+.rr-clear {
+    clear: left;
+}
diff --git a/design/old/v8/iev8.scss b/design/old/v8/iev8.scss
new file mode 100644
index 0000000..574ab55
--- /dev/null
+++ b/design/old/v8/iev8.scss
@@ -0,0 +1,23 @@
+h1 a:before {
+    background: url("/media/logo-new-treeonly.png") center top no-repeat !important;
+}
+.logo {
+    zoom: expression(
+    this.runtimeStyle.zoom="1",
+    /* ::before polyfill - creates <i class="ie-before"></i> */
+    this.insertBefore( document.createElement("i"), this.firstChild ).className="ie-before",
+    /* ::after polyfill - creates <i class="ie-after"></i> */
+    this.appendChild( document.createElement("i") ).className="ie-after"
+    );
+}
+
+.ie-before {
+    background: url("/media/logo-new-treeonly.png") center top no-repeat !important;
+    content: "home-icon";
+    text-indent: -9999em;
+    width: 95px;
+    height: 85px;
+    display: block;
+    float: left;
+    margin-right: 20px;
+}
diff --git a/design/old/v8/screenv8.scss b/design/old/v8/screenv8.scss
new file mode 100644
index 0000000..71988d2
--- /dev/null
+++ b/design/old/v8/screenv8.scss
@@ -0,0 +1,29 @@
+//@import 'flexbox'; //Flexbox relies on https://github.com/timhettler/compass-flexbox
+@import "compass/css3/flexbox";
+@import "_normalize.scss";
+@import "_fonts.scss";
+@import "_mixins.scss";
+@import "_queries.scss";
+@import "_global.scss";
+@import "_header.scss";
+@import "_footer.scss";
+@import "_pagination.scss";
+@import "_writing_details.scss";
+@import "_notes.scss";
+@import "_writing_archive.scss";
+@import "_photos.scss";
+@import "_leaflet.scss";
+@import "_map.scss";
+@import "_projects.scss";
+@import "_homepage.scss";
+@import "_mailing-list.scss";
+@import "_birds.scss";
+@import "_books.scss";
+@import "_src.scss";
+@import "_figments.scss";
+@import "_resume.scss";
+@import "_inbox.scss";
+@import "_house.scss";
+
+//@import _large.sass
+//@import _desktop_lg.sass