site reorg

7 files changed, 1415 insertions, 0 deletions

diff --git a/design/sass/_480.sass b/design/sass/_480.sass
new file mode 100644
index 0000000..bcc6890
--- /dev/null
+++ b/design/sass/_480.sass
@@ -0,0 +1,405 @@
+//layout small
+
+
+//****************  Masthead  ************************
+header[role="banner"]
+    margin: 0 auto
+    text-align: center
+    h1
+        background: url('../img/tree.png') 0 0 no-repeat
+        text-indent: -9999px
+        width: 151px
+        height: 84px
+        margin: 0 auto
+    h2
+        background: url('../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
+//*******************  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('../img/tree.png') left -84px no-repeat
+        h2
+            background: url('../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("../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("../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('../img/tree.png') left -168px no-repeat
+        h2
+            background: url('../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
\ No newline at end of file
diff --git a/design/sass/_768.sass b/design/sass/_768.sass
new file mode 100644
index 0000000..2b89230
--- /dev/null
+++ b/design/sass/_768.sass
@@ -0,0 +1,409 @@
+//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('../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
+    //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('../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('../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("../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/sass/_992.sass b/design/sass/_992.sass
new file mode 100644
index 0000000..9cb47a3
--- /dev/null
+++ b/design/sass/_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/sass/_mixins.sass b/design/sass/_mixins.sass
new file mode 100644
index 0000000..cbc8bdc
--- /dev/null
+++ b/design/sass/_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/sass/_typography.sass b/design/sass/_typography.sass
new file mode 100644
index 0000000..64f25fc
--- /dev/null
+++ b/design/sass/_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/sass/ie.sass b/design/sass/ie.sass
new file mode 100644
index 0000000..8ba7172
--- /dev/null
+++ b/design/sass/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/sass/stylesv6.sass b/design/sass/stylesv6.sass
new file mode 100644
index 0000000..77e5e06
--- /dev/null
+++ b/design/sass/stylesv6.sass
@@ -0,0 +1,49 @@
+//basic stuff
+@import _mixins.sass
+@import _typography.sass
+@import _480.sass
+@import _768.sass
+@import _992.sass
+
+
+
+//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*/