Rewrote all sass and reconfigured HTML to use more microformats and

clearer class names

43 files changed, 3220 insertions, 194 deletions

diff --git a/app/blog/models.py b/app/blog/models.py
index f01eeae..12b5b28 100644
--- a/app/blog/models.py
+++ b/app/blog/models.py
@@ -79,7 +79,7 @@ class Entry(models.Model):
         return self.title
 
     def get_absolute_url(self):
-        return "/%s/%s/" % (self.pub_date.strftime("%Y/%b/%d").lower(), self.slug)
+        return "/%s/%s" % (self.pub_date.strftime("%Y/%m").lower(), self.slug)
 
     def comment_period_open(self):
         return self.enable_comments and datetime.datetime.today() - datetime.timedelta(30) <= self.pub_date
diff --git a/app/blog/urls.py b/app/blog/urls.py
index d0a5224..0ac8870 100644
--- a/app/blog/urls.py
+++ b/app/blog/urls.py
@@ -1,10 +1,21 @@
 from django.conf.urls import *
 from django.views.generic.base import RedirectView
 
-
+"""
 urlpatterns = patterns('',
     (r'(?P<slug>[-\w]+)/(?P<page>\d+)/$', 'blog.views.entry_list_by_area'),
     (r'(?P<page>\d+)/$', 'blog.views.entry_list'),
     (r'(?P<slug>[-\w]+)/$', RedirectView.as_view(url="/writing/%(slug)s/1/")),
     (r'', RedirectView.as_view(url="/writing/1/")),
 )
+"""
+
+urlpatterns = patterns('',
+    url(r'(?P<year>\d{4})/(?P<month>\d{2})/(?P<slug>[-\w]+)$', 'blog.views.entry_detail'),
+    #url(r'(?P<year>\d{4})/(?P<month>\d{2})/$', 'blog.views.date_list', name="blog_by_month"),
+    #url(r'(?P<year>\d{4})/$', 'blog.views.date_list', name="blog_by_year"),
+    (r'(?P<slug>[-\w]+)/(?P<page>\d+)/$', 'blog.views.entry_list_by_area'),
+    (r'(?P<page>\d+)/$', 'blog.views.entry_list'),
+    url(r'(?P<slug>[-\w]+)/$', RedirectView.as_view(url="/writing/%(slug)s/1/")),
+    #url(r'', RedirectView.as_view(url="/writing/1/")),
+)
diff --git a/app/blog/views.py b/app/blog/views.py
index 1d552eb..b82a2ab 100644
--- a/app/blog/views.py
+++ b/app/blog/views.py
@@ -16,7 +16,7 @@ def home(request):
     return render_to_response('archives/homepage.html', context, context_instance=RequestContext(request))
 
 
-def entry_detail(request, year, month, day, slug):
+def entry_detail(request, year, month, slug):
     obj = get_object_or_404(Entry, slug__exact=slug)
     photos = {}
     # if obj.photo_gallery:
diff --git a/app/lib/pagination/templates/pagination/pagination.html b/app/lib/pagination/templates/pagination/pagination.html
index 1afb3d7..0b99346 100644
--- a/app/lib/pagination/templates/pagination/pagination.html
+++ b/app/lib/pagination/templates/pagination/pagination.html
@@ -1,10 +1,9 @@
 {% load pagination_tags %}{% if is_paginated %}
         <ul class="pages">{% if page_obj.has_previous %}
-            <li><a href="{% page_path prev_page %}" class="prev">&lsaquo;&lsaquo; previous</a></li>{% else %}
-            <li class="disabled prev"></li>{% endif %}{% for page in pages %}{% if page %}{% if page == page_obj.number %}
+            <li><a href="{% page_path prev_page %}" class="prev"> Newer</a></li>{% endif %}{% for page in pages %}{% if page %}{% if page == page_obj.number %}
             <li class="current page">{{ page }}</li>{% else %}
             <li><a href="{% page_path page %}" class="page">{{ page }}</a></li>{% endif %}{% else %}
             <li>...</li>{% endif %}{% endfor %}{% if page_obj.has_next %}
-            <li><a href="{% if use_page_path %}{% page_path next_page %}{% else %}?page={{ page_obj.next_page_number }}{{ getvars }}{% endif %}" class="next">next &rsaquo;&rsaquo;</a></li>{% else %}
-            <li class="disabled next">next &rsaquo;&rsaquo;</li>{% endif %}
-        </ul>{% endif %}
\ No newline at end of file
+            <li><a href="{% if use_page_path %}{% page_path next_page %}{% else %}?page={{ page_obj.next_page_number }}{{ getvars }}{% endif %}" class="next">Older</a></li>
+            {% endif %}
+        </ul>{% endif %}
diff --git a/app/notes/models.py b/app/notes/models.py
index dc158d2..6d139f0 100644
--- a/app/notes/models.py
+++ b/app/notes/models.py
@@ -42,7 +42,7 @@ class Note(models.Model):
     twitter_id = models.CharField('twitter_id', max_length=450)
     twitter_send = models.BooleanField("send to twitter?", default=False)
     twitter_sent = models.BooleanField(default=False, blank=True)
-    in_reply_to = models.CharField('in reply to url', max_length=450)
+    #in_reply_to = models.CharField('in reply to url', max_length=450)
 
     def __str__(self):
         return self.slug
diff --git a/config/base_urls.py b/config/base_urls.py
index dd3ca2e..dbf7727 100644
--- a/config/base_urls.py
+++ b/config/base_urls.py
@@ -48,7 +48,8 @@ urlpatterns += patterns('',
     (r'^writing/', include('blog.urls')),
     (r'^projects/', include('projects.urls')),
     #Entry detail i.e. /year/month/day/my-title/
-    (r'(?P<year>\d{4})/(?P<month>[a-z]{3})/(?P<day>\w{1,2})/(?P<slug>[-\w]+)/$', 'blog.views.entry_detail'),
+    #old: (r'(?P<year>\d{4})/(?P<month>[a-z]{3})/(?P<day>\w{1,2})/(?P<slug>[-\w]+)/$', 'blog.views.entry_detail'),
+    (r'(?P<year>\d{4})/(?P<month>\d{2})/(?P<slug>[-\w]+)$', 'blog.views.entry_detail'),
     # locations
     (r'^locations/', include('locations.urls')),
     (r'^photos/', include('photos.urls')),
diff --git a/design/sass/_fonts.scss b/design/sass/_fonts.scss
new file mode 100644
index 0000000..5f96654
--- /dev/null
+++ b/design/sass/_fonts.scss
@@ -0,0 +1,20 @@
+@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;
+
+}
+
+@font-face {
+  font-family: "trumpgoteasmed";
+  src: url("trumpgoteasmed-webfont.eot");
+  src: url("trumpgoteasmed-webfont.eot?#iefix") format("embedded-opentype"), url("trumpgoteasmed-webfont.woff") format("woff"), url("trumpgoteasmed-webfont.ttf") format("truetype"), url("trumpgoteasmed-webfont.svg#trumpgoteasmed") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+
diff --git a/design/sass/_footer.scss b/design/sass/_footer.scss
new file mode 100644
index 0000000..84def82
--- /dev/null
+++ b/design/sass/_footer.scss
@@ -0,0 +1,40 @@
+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 .125em;
+        a {
+            color: $brown;
+            text-decoration: none;
+        }
+    }
+    p {
+        @include fontsize(10);
+    }
+}
+.dark footer[role="contentinfo"] {
+    &:before {
+        @include light_faded_line_after;
+    }
+    a {
+    color: $body_font_light;
+}
+}
+
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
new file mode 100644
index 0000000..346f44b
--- /dev/null
+++ b/design/sass/_global.scss
@@ -0,0 +1,116 @@
+html {
+    border-top: 0.25em solid $brown;
+}
+
+body {
+    border-top: 1px solid #fbf9f7;
+    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
+}
+
+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;
+    }
+}
+
+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);
+    }
+}
+
+object, embed {
+    max-width: 100%;
+    height: auto;
+}
+
+img {
+    max-width: 100%;
+    max-width:98%;
+    padding:1%; /* A percentage that, when doubled and added to the above, makes 100%. */
+    background: $brown;
+}
+
+h1 {
+    font-family:  Georgia, 'Times New Roman', serif;
+    @include fontsize(36);
+    font-weight: normal;
+}
+
+//**************  Universals ************************
+.hide {
+    display: none;
+}
+
+.yes {
+    background: green !important;
+    color: white;
+}
+
+.no {
+    background: red !important;
+    color: white;
+}
+
+//**************  other global classes ************************
+
+.bl {
+    @include smcaps;
+    @include fontsize(11);
+}
+
+
+//****************  Page Breadcrumbs  ************************
+
+#breadcrumbs {
+    @include constrain_wide();
+    text-align: center;
+    li {
+        display: inline;
+    }
+    a { color: $brown;}
+    @include breakpoint(gamma) {
+        text-align: left;
+    }
+}
+
+.dark #breadcrumbs a, .black #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/sass/_header.scss b/design/sass/_header.scss
new file mode 100644
index 0000000..a89636c
--- /dev/null
+++ b/design/sass/_header.scss
@@ -0,0 +1,151 @@
+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: 90px;
+    }
+    @include breakpoint(beta) {
+        &:before {
+            background: url("logo-new-@2x-treeonly.png") center -65px no-repeat;
+            background-size: 92px;
+        }
+    }
+}
+
+
+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: left;
+        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: 960px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    @include breakpoint(delta) {
+        margin-top: 1.5em; 
+        max-width: 1170px;
+    }
+}
+
+.black .header-wrapper, .dark .header-wrapper {
+    @include breakpoint(beta) {
+        border-bottom: 1px $body_font_light solid;
+    }
+}
+
diff --git a/design/sass/_inbox.scss b/design/sass/_inbox.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/design/sass/_inbox.scss
diff --git a/design/sass/_mailing-list.scss b/design/sass/_mailing-list.scss
new file mode 100644
index 0000000..71df3e4
--- /dev/null
+++ b/design/sass/_mailing-list.scss
@@ -0,0 +1,11 @@
+//Flexbox mixins rely on https://github.com/timhettler/compass-flexbox
+
+.b-form {}
+.b-form__object--flex { @include display-flex; }
+.b-form__object--fillspace {
+    /* This element will receive priority of size. 
+    /* All other elements will be sized at the size dictated by their display type */
+    @include flex-grow(1);
+    & + .b-form__object--fillspace-gap { margin-left: .5em; }
+}
+.b-form__label { display: block;}
diff --git a/design/sass/_map.scss b/design/sass/_map.scss
new file mode 100644
index 0000000..f7d958b
--- /dev/null
+++ b/design/sass/_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/sass/_mixins.scss b/design/sass/_mixins.scss
new file mode 100644
index 0000000..737f157
--- /dev/null
+++ b/design/sass/_mixins.scss
@@ -0,0 +1,94 @@
+$brown: #201a11;
+$light: #ccc;
+$orange: #b53a04;
+$body_font: $brown;
+$body_font_light: #b3aeae;
+//$light;
+
+
+@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;
+}
+
+%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));
+} 
+
+//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: 960px;
+    }
+    @include breakpoint(delta) {
+        max-width: 1170px;
+    }
+}
diff --git a/design/sass/_normalize.scss b/design/sass/_normalize.scss
new file mode 100644
index 0000000..c451141
--- /dev/null
+++ b/design/sass/_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/sass/_notes.scss b/design/sass/_notes.scss
new file mode 100644
index 0000000..8add4e5
--- /dev/null
+++ b/design/sass/_notes.scss
@@ -0,0 +1,167 @@
+//****************  Notes Structure ************************
+
+.notes main {
+    @include constrain_narrow();
+    margin-top: 1em;
+    h1 {
+        margin-bottom: 0;
+        @include fontsize(28);
+        @include breakpoint(beta) {
+            @include fontsize(36);
+            text-align: left;
+        }
+    }
+}
+
+.notes .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--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--location {
+    text-align: center;
+    margin-top: 0;
+    @include breakpoint(beta) {
+        float: left;
+    }
+}
+.note--actions {
+    font-size: 0.75em;
+    text-align: center;
+    @include breakpoint(beta) {
+        float: right;
+        clear: both;
+        margin-top: .5em;
+    }
+    li {
+        display: inline-block;
+    }
+    li:after {
+        content: "\2219";
+        margin-left: 0.25em;
+        padding-right: 0.35em;
+        padding-left: 0.35em;
+    }
+    li:last-child:after {
+        content: "";
+        padding-right: 0;
+        padding-left: 0;
+        margin-left: 0;
+    }
+    a {
+        color: $brown;
+    }
+}
+.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;    
+        }
+    }
+    &: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/sass/_photos.scss b/design/sass/_photos.scss
new file mode 100644
index 0000000..664b892
--- /dev/null
+++ b/design/sass/_photos.scss
@@ -0,0 +1,203 @@
+// ##############################################
+// 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: 4px;
+}
+.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;
+    }
+}
+
+
+//.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;
+//  }
+//}
diff --git a/design/sass/_projects.scss b/design/sass/_projects.scss
new file mode 100644
index 0000000..fb3f530
--- /dev/null
+++ b/design/sass/_projects.scss
@@ -0,0 +1,206 @@
+.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;
+        }
+        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;
+      }
+    }
+  }
+}
diff --git a/design/sass/_queries.scss b/design/sass/_queries.scss
new file mode 100644
index 0000000..4adf0b0
--- /dev/null
+++ b/design/sass/_queries.scss
@@ -0,0 +1,23 @@
+$breakpoint-alpha: 38em;
+$breakpoint-beta: 49em;
+$breakpoint-gamma: 56em;
+$breakpoint-delta: 73.125em;
+$breakpoint-epsilon: 60em;
+
+@mixin breakpoint($point) {
+    @if $point == "alpha" {
+        @media screen and (min-width:$breakpoint-alpha ){ @content; }
+    }
+    @else if $point == "beta" {
+        @media screen and  (min-width: $breakpoint-beta) { @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/sass/_writing_archive.scss b/design/sass/_writing_archive.scss
new file mode 100644
index 0000000..b398e26
--- /dev/null
+++ b/design/sass/_writing_archive.scss
@@ -0,0 +1,111 @@
+.archive {
+    @extends %clearfix;
+    @include constrain_wide();
+    margin-top: 3em;
+    .post--title { 
+        text-align: left;
+        margin: .25rem 4px;
+        @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 {
+        margin: 0;
+        display: inline-block;
+        margin-bottom: 2em;
+        vertical-align: top;
+    }
+    p {
+        margin-top: 0;
+        margin-left: 4px;
+        margin-right: 4px;
+    }
+    @include breakpoint(beta) {
+        article {
+            width: 48.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: 374px;}
+    }
+}
+
+.pagination {
+    font-family: "carrois_gothicregular" sans-serif;
+    text-transform: uppercase;
+    font-weight: 600;
+    line-height: 2.3;
+    li {
+        display: inline;
+    }
+    a {
+        text-decoration: none;
+        border: 1px solid #c99984;
+        padding: 4px 8px;
+    }
+    .prev {
+        &:before {
+            content: "\21E0";
+        }
+    }
+    .next {
+        &:after {
+            content: "\21E2";
+        }
+    }
+    @include breakpoint(beta) {
+        @include fontsize(22);
+        .prev {
+            margin-right: 2em;
+        }
+        .next {
+            margin-left: 2em;
+        }
+    }
+}
diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss
new file mode 100644
index 0000000..ce44693
--- /dev/null
+++ b/design/sass/_writing_details.scss
@@ -0,0 +1,230 @@
+// ##############################################
+// 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
+// ##############################################
+.post--header {
+    @include constrain_narrow();
+    @include breakpoint(beta) {
+        text-align: left;
+        margin-top: 3em;
+        margin-bottom: .75em;
+    }
+    @include breakpoint(delta) {
+        margin-top: 4em;
+    }
+}
+.post--location {
+    @include smcaps;
+    @include fontsize(11);
+}
+.post--article {
+    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;}
+    }
+}
+
+//### FOOTNOTES ###
+.footnote {
+    @include constrain_narrow();
+    margin: 1em auto 0 auto;
+    padding:0;
+    list-style-position:inside;
+    list-style-type: none;
+    &:before {
+        @include breakpoint(beta) {
+            @include faded_line_after;
+            margin-bottom: 2em;
+        }
+    }
+    p {
+        font-size: 0.875em;
+        line-height: 1.4
+    }
+}
+.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;
+}
+.picwide {
+    clear: both;
+    margin: 1em 0;
+    @include breakpoint(gamma) {
+    margin-left: -140px;
+    width: 960px;
+    max-width: 960px;
+    }
+    @include breakpoint(delta) {
+        margin-left: -220px;
+        width: 1170px;
+        max-width: 1170px;
+    }
+}
+
+
+.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: 0;
+    font-size: 13px;
+    padding: 8px 0 8px 2%;
+    width: 98%;
+    background: $brown;
+    color: #999999;
+  }
+}
+
+
+//### 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;
+    }
+}
+
+// ##############################################
+// 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;
+        .post--title, .post--date, .post--location {
+            text-align: right;
+        }
+        .post--title {
+            line-height: 1.1;
+            margin-top: 4px;
+        }
+    }
+    .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;
+}
+
+
diff --git a/design/sass/screenv8.scss b/design/sass/screenv8.scss
new file mode 100644
index 0000000..4c3657d
--- /dev/null
+++ b/design/sass/screenv8.scss
@@ -0,0 +1,20 @@
+@import 'flexbox'; //Flexbox relies on https://github.com/timhettler/compass-flexbox
+@import "_normalize.scss";
+@import "_fonts.scss";
+@import "_mixins.scss";
+@import "_queries.scss";
+@import "_global.scss";
+@import "_header.scss";
+@import "_footer.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 "_tablet.sass";
+//@import "_inbox.scss";
+
+//@import _large.sass
+//@import _desktop_lg.sass
diff --git a/design/sass/v6/_480.sass b/design/sass/v6/_480.sass
new file mode 100644
index 0000000..3d426ca
--- /dev/null
+++ b/design/sass/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/sass/v6/_768.sass b/design/sass/v6/_768.sass
new file mode 100644
index 0000000..9c4f8b8
--- /dev/null
+++ b/design/sass/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/sass/v6/_992.sass b/design/sass/v6/_992.sass
new file mode 100644
index 0000000..9cb47a3
--- /dev/null
+++ b/design/sass/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/sass/v6/_leaflet.scss b/design/sass/v6/_leaflet.scss
new file mode 100644
index 0000000..b65ffb8
--- /dev/null
+++ b/design/sass/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/sass/v6/_mixins.sass b/design/sass/v6/_mixins.sass
new file mode 100644
index 0000000..cbc8bdc
--- /dev/null
+++ b/design/sass/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/sass/v6/_typography.sass b/design/sass/v6/_typography.sass
new file mode 100644
index 0000000..64f25fc
--- /dev/null
+++ b/design/sass/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/sass/v6/ie.sass b/design/sass/v6/ie.sass
new file mode 100644
index 0000000..8ba7172
--- /dev/null
+++ b/design/sass/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/sass/v6/stylesv6.sass b/design/sass/v6/stylesv6.sass
new file mode 100644
index 0000000..41ed20f
--- /dev/null
+++ b/design/sass/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/templates/archives/map.html b/design/templates/archives/map.html
index 493fefd..92fdc15 100644
--- a/design/templates/archives/map.html
+++ b/design/templates/archives/map.html
@@ -20,7 +20,7 @@ Google Maps code
         <li><a href="/" itemprop="url" title="luxagraf homepage"><span itemprop="title">Home</span></a> &rarr;</li>
         <li>Map</li>
     </ul>
-    <section>
+    <main role="main" class="map--wrapper">
         <h1 class="hide">Browse luxagraf by map</h1>
         <div id="map-canvas">
             <div id="map-inner-canvas" style="width: 100%; height: 100%; border: none !important;"></div>
diff --git a/design/templates/archives/notes.html b/design/templates/archives/notes.html
index cd4029c..b73e722 100644
--- a/design/templates/archives/notes.html
+++ b/design/templates/archives/notes.html
@@ -14,7 +14,8 @@
         <h1>Notes</h1>
         {% for object in object_list %}
         <article class="h-entry">
-            <div class="p-name e-content">
+            <h2 class="p-name note--title hide">{{object.title|safe|amp|smartypants}}</h2>
+            <div class="e-content">
             {{object.render|safe|amp|smartypants|urlizetrunc:45 }}
             </div>
             <span class="p-author h-card">
@@ -23,7 +24,7 @@
             </span>
             <footer>
                 <p class="note--date">
-                    <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M y"}}</time></a>
+                    <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"F j, Y"}}</time></a>
                 </p>{% if object.location %}
                 <p class="p-location h-adr note--location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
                     <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, 
@@ -32,18 +33,22 @@
                     <data class="p-latitude" value="{{object.latitude}}"></data>
                     <data class="p-longitude" value="{{object.longitude}}"></data>
                     </p>{% endif %}{% if object.twitter_id %}
-                <p class="note--twitter">
-                    <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a>
-                <action do="reply" with="{{SITE_URL}}{{object.get_absolute_url}}">
-                    <a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a>
-                </action>
-                <action do="post" with="{{SITE_URL}}{{object.get_absolute_url}}">
+                <ul class="note--actions">
+                    <li><a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a></li>
+                    <li>
+                        <action do="reply" with="{{SITE_URL}}{{object.get_absolute_url}}"><a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a></action>
+                    </li>
+                    <li>
+                        <action do="post" with="{{SITE_URL}}{{object.get_absolute_url}}">
                     <a href="https://twitter.com/intent/retweet?tweet_id={{object.twitter_id}}">Retweet</a>
-                </action>
-                <action do="bookmark" with="{{SITE_URL}}{{object.get_absolute_url}}">
-                    <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a>
-                </action>
-                    </p>{% endif %}
+                        </action>
+                    </li>
+                    <li>
+                    <action do="bookmark" with="{{SITE_URL}}{{object.get_absolute_url}}">
+                        <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a>
+                    </action>
+                    </li>
+                </ul>{% endif %}
             </footer>
 
         </article>
diff --git a/design/templates/archives/notes_date.html b/design/templates/archives/notes_date.html
index d150792..8794da3 100644
--- a/design/templates/archives/notes_date.html
+++ b/design/templates/archives/notes_date.html
@@ -13,16 +13,17 @@
     <main role="main">
         <h1>Notes Published in {% if month %}{{month|month_number_to_name}}{%endif%} {{year}}</h1>{% if month %}{% for object in object_list %}
         <article class="h-entry">
-            <div class="p-name e-content">
+            <h2 class="p-name note--title hide">{{object.title|safe|amp|smartypants}}</h2>
+            <div class="e-content">
             {{object.render|safe|amp|smartypants|urlizetrunc:45 }}
             </div>
             <span class="p-author h-card">
                 <data class="p-name" value="Scott Gilbertson"></data>
                 <data class="u-url" value="https://luxagraf.net/"></data>
             </span>
-            <footer>
+            <footer class="note--footer">
                 <p class="note--date">
-                    <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M y"}}</time></a>
+                    <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"F j, Y"}}</time></a>
                 </p>{% if object.location %}
                 <p class="p-location h-adr note--location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
                     <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, 
@@ -31,18 +32,22 @@
                     <data class="p-latitude" value="{{object.latitude}}"></data>
                     <data class="p-longitude" value="{{object.longitude}}"></data>
                     </p>{% endif %}{% if object.twitter_id %}
-                <p class="note--twitter">
-                    <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a>
-                <action do="reply" with="{{SITE_URL}}{{object.get_absolute_url}}">
-                    <a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a>
-                </action>
-                <action do="post" with="{{SITE_URL}}{{object.get_absolute_url}}">
+                <ul class="note--actions">
+                    <li><a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a></li>
+                    <li>
+                        <action do="reply" with="{{SITE_URL}}{{object.get_absolute_url}}"><a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a></action>
+                    </li>
+                    <li>
+                        <action do="post" with="{{SITE_URL}}{{object.get_absolute_url}}">
                     <a href="https://twitter.com/intent/retweet?tweet_id={{object.twitter_id}}">Retweet</a>
-                </action>
-                <action do="bookmark" with="{{SITE_URL}}{{object.get_absolute_url}}">
-                    <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a>
-                </action>
-                    </p>{% endif %}
+                        </action>
+                    </li>
+                    <li>
+                    <action do="bookmark" with="{{SITE_URL}}{{object.get_absolute_url}}">
+                        <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a>
+                    </action>
+                    </li>
+                </ul>{% endif %}
             </footer>
         </article>
         {% endfor %}
@@ -51,26 +56,37 @@
     <section class="month--divider">
         <h2 class="month--header">{{ month.list.0.date_created|date:"F Y" }}</h2>{% for object in month.list|dictsortreversed:"date_created" %}
         <article class="h-entry">
-            <div class="p-name e-content">
+            <h2 class="p-name note--title hide">{{object.title|safe|amp|smartypants}}</h2>
+            <div class="e-content">
             {{object.render|safe|amp|smartypants|urlizetrunc:45 }}
             </div>
-            <footer>
-                <p class="meta">
-                    <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M Y"}}</time></a>
+            <footer class="note--footer">
+                <p class="note--date">
+                    <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"F j, Y"}}</time></a>
                 </p>{% if object.location %}
-                <p class="p-location h-adr meta location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
+                <p class="p-location h-adr note--location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
                     <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, 
                     <span class="p-region">{{object.state_name}}</span>,
                     <span class="p-country-name">{{object.location.state.country.name}}</span>
                     <data class="p-latitude" value="{{object.latitude}}"></data>
                     <data class="p-longitude" value="{{object.longitude}}"></data>
                 </p>{% endif %}{% if object.twitter_id %}
-                <p class="meta twitter">
-                    <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a>
-                    <a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a>
+                <ul class="note--actions">
+                    <li><a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a></li>
+                    <li>
+                        <action do="reply" with="{{SITE_URL}}{{object.get_absolute_url}}"><a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a></action>
+                    </li>
+                    <li>
+                        <action do="post" with="{{SITE_URL}}{{object.get_absolute_url}}">
                     <a href="https://twitter.com/intent/retweet?tweet_id={{object.twitter_id}}">Retweet</a>
-                    <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a>
-                    </p>{% endif %}
+                        </action>
+                    </li>
+                    <li>
+                    <action do="bookmark" with="{{SITE_URL}}{{object.get_absolute_url}}">
+                        <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a>
+                    </action>
+                    </li>
+                </ul>{% endif %}
             </footer>
         </article>
                  {% endfor %}
diff --git a/design/templates/archives/photos.html b/design/templates/archives/photos.html
index e8d5ea6..c8d3db5 100644
--- a/design/templates/archives/photos.html
+++ b/design/templates/archives/photos.html
@@ -13,20 +13,20 @@
        {% if region %}{%if region.name == 'United States'%} <li><a href="/photos/" title="See all Photos" itemprop="url"><span itemprop="title">Photos</span></a> &rarr;</li>
        <li>the United States</li>{%else%}<li><a href="/photos/" title="See all Photos" itemprop="url"><span itemprop="title">Photos</span></a> &rarr;</li> <li>{{region.name|title|smartypants|safe}}{%endif%}{%else%}<li>Photos </li>{%endif%}
     </ul>
-    <section>
+    <main role="main">
     <h1 class="hide">{% if region %}Photographs from {{region.name|title|smartypants|safe}}{%else%}Photographs from Around the World {%endif%}</h1>
-    <ul id="photo-galleries">{% autopaginate object_list 18 %} {% for object in object_list %}
-        <li>
-            <div class="figure">
-                <a href="{{object.get_absolute_url}}" title="view images from {{ object.set_title }}"><img src="{{object.get_main_image}}" alt="{{ object.set_title }}" width="291" height="350" /></a>                    
-                <div class="legend">
+    <ul id="photo-galleries" class="image-gallery--list">{% autopaginate object_list 24 %} {% for object in object_list %}
+        <li class="{% cycle 'first' 'second' 'third' 'fourth'%} {% cycle 'one' 'two' 'three'%}">
+            <figure class="image-gallery--figure">
+                <a href="{{object.get_absolute_url}}" title="view images from {{ object.set_title }}"><img src="{{object.get_main_image}}" alt="{{ object.set_title }}" /></a>                    
+                <figcaption class="image-gallery--legend">
                     <h1>{{object.set_title}}</h1>
                     <p>{{object.set_desc|truncatewords:30|smartypants|safe}}</p>
-                </div>
-            </div>
+                </figcaption>
+            </figure>
         </li>{% endfor %}
     </ul>
-    </section>
-    <div id="pagination">{% paginate %}
-    </div>
+    </main>
+    <nav class="pagination">{% paginate %}
+    </nav>
 {% endblock %}
diff --git a/design/templates/archives/projects.html b/design/templates/archives/projects.html
index 29aa160..cd0543a 100644
--- a/design/templates/archives/projects.html
+++ b/design/templates/archives/projects.html
@@ -9,21 +9,23 @@
         <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
         <li>Projects</li>
     </ul>
-    <div class="top">
-        <p class="col hyphenate">These are a few of the things that I use to inspire myself to do more. The truth is, just about <a href="http://www.youtube.com/watch?v=8r1CZTLk-Gk" title="Louis CK talking about how everything is amazing">everything is amazing</a> when viewed from the proper perspective.         </p>
-        <p class="col two hyphenate">The projects on luxagraf are more or less goals I've created in effort to get my body in motion, because the difference between the mundane and the amazing is often simply motion. To move is to do, and to do is to live.</p>
+    <main role="main" class="projects">
+    <div class="projects--intro">
+        <p>These projects are all designed to get my body and mind moving. Theories are interesting, goals are good, but ultimately talk is just talk. Your life &ndash; that thing you get maybe 76 or so years of, if you're lucky &ndash; is made up of what you do, not what you say.</p>
+        
+        <p>Some people, including me some days, think these sorts of goals, lists and self-experiments are silly and contrived. They are. But they also help me <em>do</em> more and remind me that <a href="http://www.youtube.com/watch?v=8r1CZTLk-Gk" title="Louis CK talking about how everything is amazing">everything is amazing</a> provided you remember that everything is amazing.</p>
     </div>
-    <section id="projects-archive" class="archive">
-        <h1 class="hide">Projects</h1>{%for object in object_list %}
-        <article>
+    <ul id="projects-archive" class="projects--list">{%for object in object_list %}
+        <li>
             <h1><a href="{{object.get_absolute_url}}" title="{{object.title}}">{{object.title|safe}} {{object.subtitle|safe}}</a></h1>
             <div class="img">
                 <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_project_image}}" alt="{{ object.title }}" class="post-image" /></a>
             </div>
             <div class="hyphenate">{{object.lede|safe|smartypants}}</div>
-            <!--<span class="button"><a href="{{project.get_absolute_url}}">More&nbsp;&raquo;</a></span>-->
-        </article> {% endfor %}
-    </section>
+            <p class="projects--button"><a href="{{project.get_absolute_url}}">View&nbsp;Project&nbsp;&#8674;</a></p>
+        </li> {% endfor %}
+    </ul>
+    </main>
 {% endblock %}
 
 {% block js %}<script src="/media/js/hyphenate.min.js" type="text/javascript"></script>{% endblock%}
diff --git a/design/templates/archives/writing.html b/design/templates/archives/writing.html
index 33a2b69..b752160 100644
--- a/design/templates/archives/writing.html
+++ b/design/templates/archives/writing.html
@@ -13,24 +13,30 @@
         <li itemprop="title">the United States</li>{%else%}<li><a href="/writing/" title="See all Writing" itemprop="url"><span>Writing</span></a> &rarr;</li> 
         <li>{{region.name|title|smartypants|safe}}</li>{%endif%}{%else%}<li>Writing </li>{%endif%}
     </ul>
-    <section id="writing-archive" class="archive">
-        <h1 class="hide">{% if region %}Writing from {%if region.name == 'United States'%}the United States{%else%}{{region.name|title|smartypants|safe}}{%endif%}{%else%}Writing Archive {%endif%}</h1>{% autopaginate object_list 10 %} {% for object in object_list %}
-        <article class="h-entry">
-            <h1 class="p-name"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|smartypants|widont|safe}}</a></h1>
-            <div class="img">
-                <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_url}}" alt="{{ object.title }}" width="{{object.image_width}}" height="{{object.image_height}}" class="u-photo post-image" /></a>
+    <main role="main" id="writing-archive" class="archive">
+        <h1 class="hide">{% if region %}Writing from {%if region.name == 'United States'%}the United States{%else%}{{region.name|title|smartypants|safe}}{%endif%}{%else%}Writing Archive {%endif%}</h1>{% autopaginate object_list 24 %} {% for object in object_list %}
+        <article class="h-entry hentry {% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}">
+            <div class="post--image">
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" /></a>
             </div>
-            <div class="dateline">
-                <p class="h-adr location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">{% if object.country_name == "United States" %}<span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name" href="/writing/united-states/" title="travel writing from the United States">{{object.location.state.name}}</a>{%else%}<span class="p-locality">{{object.location.name|smartypants|safe}}</span></a>, <a class="p-country-name" href="/writing/{{object.location.state.country.slug}}/" title="travel writing from {{object.location.state.country.name}}">{{object.location.state.country.name}}</a>{%endif%}
-                <data class="p-latitude" value="{{object.latitude}}"></data>
-                <data class="p-longitude" value="{{object.longitude}}"></data></p>
-                <time class="dt-published published updated" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"m/d/y"}}</time>
-            </div>
-            <p class="p-summary hyphenate">{{object.dek|safe}}</p>
+            <h1 class="p-name entry-title post--title"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants|widont}}</a></h1>
+            <p class="p-author author hide">Scott Gilbertson</p>
+            <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+            <p>
+                <span class="p-location h-adr adr post--location">
+                    {% if object.country.name == "United States" %}<span class="p-locality locality" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/writing/united-states/" title="travel writing from the United States">{{object.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/writing/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name}}</a>{%endif%}
+                    <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}"></data>
+                    <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}"></data>
+                </span> &ndash;
+                <span class="p-summary hyphenate">
+                    {{object.dek|safe}}
+                </span>
+            </p>
         </article> {% endfor %}
-    </section>
-    <div id="pagination">{% paginate %}
-    </div>
+    </main>
+    <nav class="pagination">
+    {% paginate %}
+    </nav>
 {% endblock %}
 
 
diff --git a/design/templates/base.html b/design/templates/base.html
index c3d0b72..5c9ca21 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -15,7 +15,7 @@
           title="Luxagraf RSS feed"
           href="https://luxagraf.net/rss/">
     {%block stylesheet%}<link rel="stylesheet" 
-          href="/media/stylesv6.css" 
+          href="/media/screenv8.css" 
           media="screen">{%endblock%}
     <!--[if IE]>
     <link rel="stylesheet" 
@@ -25,22 +25,24 @@
     {%block extrahead%}{%endblock%}
 </head>
 <body {%block bodyid%}{%endblock%}{%block bodyevents%}{%endblock%}>
-    <header role="banner">
-        <a id="logo" href="/" title="home">
-                <h1>Luxagraf</h1>
-                <h2>{Walk Slowly}</h2>
-        </a>
+    <div class="wrapper">
+    <div class="header-wrapper">
+        <header role="banner">
+            <h1><a id="logo" href="/" title="home">Luxagraf</a></h1>
+            <h2>Walk Slowly</h2>
+        </header>
         <nav role="navigation" class="bl">
             <ul>
-                <li id="stories"><a href="/writing/" title="An archive of writings from around the world">Writing</a>,</li>
-                <li id="photos"><a href="/photos/" title="Photos from travels around the world">Photos</a>,</li>
+                <li id="stories"><a href="/writing/" title="An archive of writings from around the world">Writing</a></li>
+                <li id="photos"><a href="/photos/" title="Photos from travels around the world">Photos</a></li>
                 <!--<li id="guides"><a href="/travel-guide/1/" title="Travel Guides, Tips, Tricks and Recommendations">Guides</a>,</li>-->
-                <li id="maps"><a href="/map/" title="Maps and miscellanea">Map</a>,</li>
-                <li id="projects" ><a href="/projects/" title="Luxagraf: Projects">Projects</a>,</li>
-                <li id="etc"><a href="/about/" title="About Luxagraf">Etc</a></li>
+                <li id="notes"><a href="/notes/" title="Short thoughts, sometimes syndicated to twitter">Notes</a></li>
+                <li id="maps"><a href="/map/" title="Maps and miscellanea">Map</a></li>
+                <li id="projects" ><a href="/projects/" title="Luxagraf: Projects">Projects</a></li>
+                <li id="etc" class="last"><a href="/about/" title="About Luxagraf">Etc</a></li>
             </ul>
         </nav>
-    </header>
+    </div>
     {% block primary %}{% endblock %}
     {% block extrabody %}{% endblock %}
     <footer role="contentinfo">
diff --git a/design/templates/details/entry.html b/design/templates/details/entry.html
index 393f233..bfbae23 100644
--- a/design/templates/details/entry.html
+++ b/design/templates/details/entry.html
@@ -16,37 +16,31 @@ class="{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%en
 								
 				
 {% block primary %}		
-    <article role="main" class="h-entry hentry">
-        <header>
-            <h1 class="p-name entry-title">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|widont|safe}}{%endif%}</h1>
-            <time class="dt-published published updated" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
-            <p class="p-author author hide">Scott Gilbertson</p>
-            <aside class="h-adr adr geo bl">
-                {% if object.country.name == "United States" %}<span class="p-locality locality" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/writing/united-states/" title="travel writing from the United States">{{object.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/writing/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name}}</a>{%endif%}
-                <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}"></data>
-                <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}"></data>
-                {%comment%} &nbsp;&nbsp;(<a href="" title="">Map</a>, <a href="" title="">Photos</a>){%endcomment%}
-            </aside>
-        </header>
-        <div class="e-content entry-content post-body{% with object.template_name as t %}{%if t == 0 or t == 2 %}-single{%endif%}{%if t == 1 or t == 3 %}-double{%endif%}{%endwith%}">
+    <main role="main">
+    <article class="h-entry hentry post--article{% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}">
+            <header class="post--header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}">
+                <h1 class="p-name entry-title post--title">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|widont|safe}}{%endif%}</h1>
+                <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+                <p class="p-author author hide">Scott Gilbertson</p>
+                <aside class="p-location h-adr adr post--location">
+                    {% if object.country.name == "United States" %}<span class="p-locality locality" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/writing/united-states/" title="travel writing from the United States">{{object.state.name|safe}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/writing/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name|safe}}</a>{%endif%}
+                    <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}"></data>
+                    <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}"></data>
+                    {%comment%} &nbsp;&nbsp;(<a href="" title="">Map</a>, <a href="" title="">Photos</a>){%endcomment%}
+                </aside>
+            </header>
+        <div class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}">
             {{object.body_html|safe|smartypants|widont}}
-        </div>{%if object.template_name == 1 %}
-        <div class="clearfix"></div>{%endif%}{%if object.template_name == 3 %}<div class="clearfix"></div>{%endif%}
-        {%comment%}
-        <footer id="post-metadata">
-            <h4 class="hide">About {{object.title|smartypants|safe}}</h4>
-            <p>Posted <time datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F j, Y"}}</time>, from {% if object.country_name == "United States" %}{{object.location_name|smartypants|safe}}, <a href="/writing/united-states/1/" title="travel writing from the United States">{{object.state_name}}</a>{%else%}{{object.location_name|smartypants|safe}}, <a href="/writing/{{object.country_name|slugify}}/1/" title="travel writing from {{object.country_name}}">{{object.country_name}}</a>{%endif%}.
-            Follow along on <a href="http://twitter.com/luxagraf" title="twitter" rel="me">Twitter</a> or by subscribing to the <a href="http://feeds.feedburner.com/luxagraf/blog" title="writing RSS 2.0 feed">RSS Feed</a>. For more about me, see the <a href="/about/" title="about luxagraf">about page</a>. To get in touch please use the <a href="/contact/" title="contact me">contact form</a> or leave a comment below.</p>
-        </footer>
-        {% endcomment %}
+        </div>
+        </article>
         {% with object.get_next_published as next %}
         {% with object.get_previous_published as prev %}
         <nav id="page-navigation">
             <ul>{% if prev%}
-                <li id="next"><span class="bl">Previous:</span> 
+                <li id="prev"><span class="bl">Previous:</span> 
                     <a href="{{ prev.get_absolute_url }}" rel="prev" title=" {{prev.title}}">{{prev.title|safe}}</a>
                 </li>{%endif%}{% if next%}
-                <li id="prev"><span class="bl">Next:</span> 
+                <li id="next"><span class="bl">Next:</span> 
                     <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a>
                 </li>{%endif%}
             </ul>
@@ -67,7 +61,7 @@ class="{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%en
             <div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/luxagraf/embed.js"></script><noscript><a href="http://luxagraf.disqus.com/?url=ref">View the discussion thread.</a></noscript><a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
         </section>
         {%endcomment%}
-    </article>
+    </main>
 {% endblock %}
 {% block js %}
 {% with object.template_name as t %}{%if t == 1 or t == 3 %}
diff --git a/design/templates/details/national-parks.html b/design/templates/details/national-parks.html
index e05bd12..baa2b08 100644
--- a/design/templates/details/national-parks.html
+++ b/design/templates/details/national-parks.html
@@ -18,36 +18,36 @@
         <li><a href="/projects/" title="luxagraf projects page" itemprop="url"><span itemprop="title">Projects</span></a> &rarr;</li>
         <li>National Parks</li>
     </ul>
-    <section>
+    <main role="main" class="main--full">
         <h1 class="hide">The National Parks Project</h1>{% for object in object_list %}    
         <article id="park-{{forloop.counter}}" class="park">
-            <h1>{{object.name}}</h1>
-            <div class="figure">
-                <img src="{{object.get_image_url}}" alt="{{object.name}}" width="{{object.image_width}}" height="{{object.image_height}}" />
-            </div>
-            <div class="legend">
-                <h2>{{object.tag_line}}</h2>
-                <ul class="buttons">
-                    <li><a href="{{object.post.get_absolute_url}}" title="{{object.post.title}}">Read Journal</a></li>
-                    {%if object.gallery%}<li><a href="{{object.gallery.get_absolute_url}}" title="Photos of {{object.unit_name}}">View Photos</a></li>{%endif%}
-                    <li><a href="#" class="map-link" data-latitude="{{object.mpoly.centroid.y}}" data-longitude="{{object.mpoly.centroid.x}}" data-zoom="{{object.zoom}}" data-id="{{object.id}}">Map</a></li>
-                    <li><a href="#" id="more-{{forloop.counter}}" class="more-link" title="More about {{object.unit_name}}">More</a></li>
-                </ul>
-                <dl class="meta" style="visibility: hidden;">
-                    <dt>Visited:</dt>
-                    <dd>{{object.date_visited_begin|date:"m/d/y"}} - {{object.date_visited_end|date:"m/d/y"}}</dd>
-                    <dt>State:</dt>
-                    <dd>{{object.state}}</dd>
-                    <dt>Size:</dt>
-                    <dd>{{object.size}} sq miles</dd>
-                    <dt>Cost:</dt>
-                    <dd>${{object.fee}} / ${{object.camping_fee}} (entry/camping)</dd>
-                    <dt>Link:</dt>
-                    <dd>{{object.url|urlize}}</dd>
-                </dl>
-            </div>
+            <h1 class="park--title">{{object.name}}</h1>
+            <figure class="fig">
+                <img src="{{object.get_image_url}}" alt="{{object.name}}" />
+                <figcaption class="park--legend">
+                    <h2 class="park--subtitle">{{object.tag_line}}</h2>
+                    <ul class="buttons">
+                        <li><a href="{{object.post.get_absolute_url}}" title="{{object.post.title}}">Read Journal</a></li>
+                        {%if object.gallery%}<li><a href="{{object.gallery.get_absolute_url}}" title="Photos of {{object.unit_name}}">View Photos</a></li>{%endif%}
+                        <li><a href="#" class="map-link" data-latitude="{{object.mpoly.centroid.y}}" data-longitude="{{object.mpoly.centroid.x}}" data-zoom="{{object.zoom}}" data-id="{{object.id}}">Map</a></li>
+                        <li><a href="#" id="more-{{forloop.counter}}" class="more-link" title="More about {{object.unit_name}}">More</a></li>
+                    </ul>
+                    <dl class="meta" style="visibility: hidden;">
+                        <dt>Visited:</dt>
+                        <dd>{{object.date_visited_begin|date:"m/d/y"}} - {{object.date_visited_end|date:"m/d/y"}}</dd>
+                        <dt>State:</dt>
+                        <dd>{{object.state}}</dd>
+                        <dt>Size:</dt>
+                        <dd>{{object.size}} sq miles</dd>
+                        <dt>Cost:</dt>
+                        <dd>${{object.fee}} / ${{object.camping_fee}} (entry/camping)</dd>
+                        <dt>Link:</dt>
+                        <dd>{{object.url|urlize}}</dd>
+                    </dl>
+                </figcaption>
+            </figure>
         </article>{% endfor %}
-    </section>
+    </main>
 {% endblock %}
 {% block js %}
     <script type="text/javascript" src="/media/js/jquery.js"></script>
diff --git a/design/templates/details/note.html b/design/templates/details/note.html
index 66dff36..87a1e25 100644
--- a/design/templates/details/note.html
+++ b/design/templates/details/note.html
@@ -12,22 +12,23 @@
      <meta name="geo.placename" content="{% if object.location.country.name == "United States" %}{{object.location.name|smartypants|safe}}, {{object.state.name}}{%else%}{{object.location.name|smartypants|safe}}, {{object.country.name}}{%endif%}"> 
      <meta name="geo.region" content="{{object.country.iso2}}{%if object.state.code != '' %}-{{object.state.code}}{%endif%}">
 {%endblock%}
-{% block bodyid %}class="notes permalink" id="archive-{% if month %}{{month|month_number_to_name}}{%endif%}{{year}}"{%endblock%}
+{% block bodyid %}class="notes--permalink" id="archive-{% if month %}{{month|month_number_to_name}}{%endif%}{{year}}"{%endblock%}
 
 				
 {% block primary %}		
     <main role="main">
         <article class="h-entry">
-            <div class="p-name e-content">
+            <h1 class="p-name note--title hide">{{object.title|safe|amp|smartypants}}</h1>
+            <div class="e-content">
             {{object.render|safe|amp|smartypants|urlizetrunc:45 }}
             </div>
             <span class="p-author h-card">
                 <data class="p-name" value="Scott Gilbertson"></data>
                 <data class="u-url" value="https://luxagraf.net/"></data>
             </span>
-            <footer>
+            <footer class="note--footer">
                 <p class="note--date">
-                    <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M y"}}</time></a>
+                    <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"F j, Y"}}</time></a>
                 </p>{% if object.location %}
                 <p class="p-location h-adr note--location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
                     <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, 
@@ -35,19 +36,23 @@
                     <span class="p-country-name">{{object.location.state.country.name}}</span>
                     <data class="p-latitude" value="{{object.latitude}}"></data>
                     <data class="p-longitude" value="{{object.longitude}}"></data>
-                    </p>{% endif %}{% if object.twitter_id %}
-                <p class="note--twitter">
-                    <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a>
-                <action do="reply" with="{{SITE_URL}}{{object.get_absolute_url}}">
-                    <a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a>
-                </action>
-                <action do="post" with="{{SITE_URL}}{{object.get_absolute_url}}">
+                </p>{% endif %}{% if object.twitter_id %}
+                <ul class="note--actions">
+                    <li><a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a></li>
+                    <li>
+                        <action do="reply" with="{{SITE_URL}}{{object.get_absolute_url}}"><a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a></action>
+                    </li>
+                    <li>
+                        <action do="post" with="{{SITE_URL}}{{object.get_absolute_url}}">
                     <a href="https://twitter.com/intent/retweet?tweet_id={{object.twitter_id}}">Retweet</a>
-                </action>
-                <action do="bookmark" with="{{SITE_URL}}{{object.get_absolute_url}}">
-                    <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a>
-                </action>
-                    </p>{% endif %}
+                        </action>
+                    </li>
+                    <li>
+                    <action do="bookmark" with="{{SITE_URL}}{{object.get_absolute_url}}">
+                        <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a>
+                    </action>
+                    </li>
+                </ul>{% endif %}
             </footer>
 
         {% with object.get_next_published as next %}
diff --git a/design/templates/details/photo_galleries.html b/design/templates/details/photo_galleries.html
index f508bb4..5275f2d 100644
--- a/design/templates/details/photo_galleries.html
+++ b/design/templates/details/photo_galleries.html
@@ -22,45 +22,26 @@
         <li>{{object.set_title}}</li>
     </ul>
     <p class="directions">Use left/right arrow keys to navigate through photos</p>
-    <section id="slides">
+    <main id="slides" class="image-gallery--wrapper">
         <h1 class="hide">Photos from {{object.set_title}}</h1>{%for photo in object.photos.all reversed %}
         <article id="image-{{forloop.counter}}"> 
             <h6><a href="#image-{{forloop.counter}}" class="permalink" title="link to this image">&#8734; {{forloop.counter|number_to_word}} &#8734;</a></h6>
-            <div class="fig"><img src="{{photo.get_local_slideshow_url}}" {% if photo.has_retina %}srcset="{{photo.get_retina_slideshow_url}} 2x"{% endif %} alt="{{photo.title}}" title="{{photo.title}}" {%if photo.is_portait %}class="v"{%endif%} height="{{photo.slideshowimage_height}}" width="{{photo.slideshowimage_width}}" style="max-width: {{photo.slideshowimage_width}}px" /></div>
-            <div class="figcaption">
+            <figure class="fig"><img src="{{photo.get_local_slideshow_url}}" {% if photo.has_retina %}srcset="{{photo.get_retina_slideshow_url}} 2x"{% endif %} alt="{{photo.title}}" {%if photo.is_portait %}class="v"{%endif%}  />
+            <figcaption class="figcaption">
                 <div class="caption" id="id-{{photo.id}}">
-                    <h3>{{photo.title}} &nbsp;&nbsp;<time datetime="{{photo.exif_date|date:'c'}}" pubdate>{{photo.exif_date|date:"M j, Y"}}</time></h3>
+                    <h3 class="figcaption--title">{{photo.title}}</h3>
+                    <time class="figcaption--date" datetime="{{photo.exif_date|date:'c'}}">{{photo.exif_date|date:"M j, Y"}}</time>
                     <a class="map-link" href="#" data-latitude="{{photo.lat}}" data-longitude="{{photo.lon}}" data-imgid="id-{{photo.id}}">Map</a>
-                    {%if photo.description %}<p>{{photo.description|safe}}</p> {%endif%}  
+                    {%if photo.description %}<p class="figcaption--desc">{{photo.description|safe}}</p> {%endif%}  
                 </div>
                 <div class="photo-options">
-                    <p>{% if photo.exif_make == 'Canon'%}{{photo.exif_model}}{%endif%}{% if photo.exif_model == 'DMC-LX2'%}{{photo.exif_make}} {{photo.exif_model}}{%endif%}{%if photo.exif_model == 'DMC-GF1' %}Panasonic GF1 w/{%endif%} {%if photo.exif_lens == 'LUMIX G VARIO 14-45/F3.5-5.6' %}<a href="http://amzn.to/azIr5w" title="buy the {{photo.exif_lens}} on Amazon">Lumix 14-45mm lens</a>{%endif%}{%if photo.exif_lens == 'LUMIX G 20/F1.7' %}<a href="http://amzn.to/daMYOm" title="buy the {{photo.exif_lens}} on Amazon">Lumix 20mm prime lens</a>{%endif%}{%if photo.exif_lens == 'LUMIX G VARIO 45-200/F4.0-5.6' %}<a href="http://amzn.to/a9DfV7" title="buy the {{photo.exif_lens}} on Amazon">Lumix 45-200mm lens</a>{%endif%}{%if photo.exif_lens == 'OLYMPUS M.9-18mm F4.0-5.6' %}<a href="http://amzn.to/mGNVkl" title="buy the {{photo.exif_lens}} on Amazon">Olympus 9-18mm lens</a>{%endif%}{%if photo.exif_lens == None %}{%endif%}</p>
-                    <p>{{photo.exif_exposure}} sec @ {{photo.exif_aperture}}, ISO {{photo.exif_iso}} </p>
+                    <p>{% if photo.exif_make == 'Canon'%}{{photo.exif_model}}{%endif%}{% if photo.exif_model == 'DMC-LX2'%}{{photo.exif_make}} {{photo.exif_model}}{%endif%}{%if photo.exif_model == 'DMC-GF1' %}Panasonic GF1 with {%endif%} {%if photo.exif_lens == 'LUMIX G VARIO 14-45/F3.5-5.6' %}<a href="http://amzn.to/azIr5w" title="buy the {{photo.exif_lens}} on Amazon">Lumix 14-45mm lens</a>{%endif%}{%if photo.exif_lens == 'LUMIX G 20/F1.7' %}<a href="http://amzn.to/daMYOm" title="buy the {{photo.exif_lens}} on Amazon">Lumix 20mm prime lens</a>{%endif%}{%if photo.exif_lens == 'LUMIX G VARIO 45-200/F4.0-5.6' %}<a href="http://amzn.to/a9DfV7" title="buy the {{photo.exif_lens}} on Amazon">Lumix 45-200mm lens</a>{%endif%}{%if photo.exif_lens == 'OLYMPUS M.9-18mm F4.0-5.6' %}<a href="http://amzn.to/mGNVkl" title="buy the {{photo.exif_lens}} on Amazon">Olympus 9-18mm lens</a>{%endif%}{%if photo.exif_lens == None %}{%endif%}</p>
+                    <p>{{photo.exif_exposure}} sec at f/{{photo.exif_aperture}}, ISO {{photo.exif_iso}} </p>
                     <!--<p><a href="{{photo.flickr_link}}" title="View this Photo on Flickr.com">View on Flickr</a></p>-->
                     <!--<a href="#" class="exif-link" title="{{photo.id}}">Camera</a>-->
                 </div>
-                
-                {%comment%}
-                <div class="meta" style="display: none;">
-                        <dl>
-                            <dt>Camera:</dt>
-                            <dd>{% if photo.exif_make == 'Canon'%}{{photo.exif_model}}{%endif%}{% if photo.exif_model == 'DMC-LX2'%}{{photo.exif_make}} {{photo.exif_model}}{%endif%}{%if photo.exif_model == 'DMC-GF1' %}<a href="http://amzn.to/cLQozJ" title="Buy on Amazon">{{photo.exif_make}} {{photo.exif_model}}</a>{%endif%}</dd>
-                            <dt>Lens: </dt>
-                            <dd>{%if photo.exif_lens == 'LUMIX G VARIO 14-45/F3.5-5.6' %}<a href="http://amzn.to/azIr5w" title="buy the {{photo.exif_lens}} on Amazon">{{photo.exif_lens}}</a>{%endif%}{%if photo.exif_lens == 'LUMIX G 20/F1.7' %}<a href="http://amzn.to/daMYOm" title="buy the {{photo.exif_lens}} on Amazon">{{photo.exif_lens}}</a>{%endif%}{%if photo.exif_lens == 'LUMIX G VARIO 45-200/F4.0-5.6' %}<a href="http://amzn.to/a9DfV7" title="buy the {{photo.exif_lens}} on Amazon">{{photo.exif_lens}}</a>{%endif%}{%if photo.exif_lens == None %}Built-in{%endif%}</dd>
-                            <dt>Exposure</dt>
-                            <dd>{{photo.exif_exposure}}</dd>
-                            <dt>Aperture</dt>
-                            <dd>{{photo.exif_aperture}}</dd>
-                            <dt>Focal Length: </dt>
-                            <dd>{{photo.exif_focal_length}}</dd>
-                            <dt>ISO: </dt>
-                            <dd>{{photo.exif_iso}}</dd>
-                            <dt>Comments: </dt>
-                            <dd><a href="{{photo.flickr_link}}" title="View this Photo on Flickr.com">View on Flickr</a></dd>
-                        </dl>
-                 </div>
-                {%endcomment%}
-            </div>
+            </figcaption>
+        </figure>
         </article>
         {% endfor %}
     </section>
diff --git a/design/templates/fluent_comments/templatetags/flat_list.html b/design/templates/fluent_comments/templatetags/flat_list.html
new file mode 100644
index 0000000..28c74ab
--- /dev/null
+++ b/design/templates/fluent_comments/templatetags/flat_list.html
@@ -0,0 +1,17 @@
+{% comment %}
+
+  The normal list, spiced up.
+  This is included via comments/list.html
+
+  The id="comments" is required for JavaScript,
+  the 'comments/comment.html template is also used by the Ajax view.
+
+{% endcomment %}
+{% if comment_list %}
+<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}fluent_comments/css/ajaxcomments.css" />
+<script src="/media/js/jquery-1.8.3.min.js" type="text/javascript"></script>
+<script type="text/javascript" src="{{ STATIC_URL }}fluent_comments/js/ajaxcomments.js"></script>
+<div id="comments" class="comment--container">
+    <h4>Comments</h4>
+  {% for comment in comment_list %}{% include "comments/comment.html" %}{% endfor %}
+</div>{% endif %}
diff --git a/site/media/js/natparks.min.js b/site/media/js/natparks.min.js
index 3890b16..7340602 100644
--- a/site/media/js/natparks.min.js
+++ b/site/media/js/natparks.min.js
@@ -1 +1,23 @@
-b'(function () {\n\t\'use strict\';\n\n\tL.TileLayer.Provider = L.TileLayer.extend({\n\t\tinitialize: function (arg, options) {\n\t\t\tvar providers = L.TileLayer.Provider.providers;\n\n\t\t\tvar parts = arg.split(\'.\');\n\n\t\t\tvar providerName = parts[0];\n\t\t\tvar variantName = parts[1];\n\n\t\t\tif (!providers[providerName]) {\n\t\t\t\tthrow \'No such provider (\' + providerName + \')\';\n\t\t\t}\n\n\t\t\tvar provider = {\n\t\t\t\turl: providers[providerName].url,\n\t\t\t\toptions: providers[providerName].options\n\t\t\t};\n\n\t\t\t// overwrite values in provider from variant.\n\t\t\tif (variantName && \'variants\' in providers[providerName]) {\n\t\t\t\tif (!(variantName in providers[providerName].variants)) {\n\t\t\t\t\tthrow \'No such variant of \' + providerName + \' (\' + variantName + \')\';\n\t\t\t\t}\n\t\t\t\tvar variant = providers[providerName].variants[variantName];\n\t\t\t\tvar variantOptions;\n\t\t\t\tif (typeof variant === \'string\') {\n\t\t\t\t\tvariantOptions = {\n\t\t\t\t\t\tvariant: variant\n\t\t\t\t\t};\n\t\t\t\t} else {\n\t\t\t\t\tvariantOptions = variant.options;\n\t\t\t\t}\n\t\t\t\tprovider = {\n\t\t\t\t\turl: variant.url || provider.url,\n\t\t\t\t\toptions: L.Util.extend({}, provider.options, variantOptions)\n\t\t\t\t};\n\t\t\t} else if (typeof provider.url === \'function\') {\n\t\t\t\tprovider.url = provider.url(parts.splice(1, parts.length - 1).join(\'.\'));\n\t\t\t}\n\n\t\t\t// replace attribution placeholders with their values from toplevel provider attribution,\n\t\t\t// recursively\n\t\t\tvar attributionReplacer = function (attr) {\n\t\t\t\tif (attr.indexOf(\'{attribution.\') === -1) {\n\t\t\t\t\treturn attr;\n\t\t\t\t}\n\t\t\t\treturn attr.replace(/\\{attribution.(\\w*)\\}/,\n\t\t\t\t\tfunction (match, attributionName) {\n\t\t\t\t\t\treturn attributionReplacer(providers[attributionName].options.attribution);\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t};\n\t\t\tprovider.options.attribution = attributionReplacer(provider.options.attribution);\n\n\t\t\t// Compute final options combining provider options with any user overrides\n\t\t\tvar layerOpts = L.Util.extend({}, provider.options, options);\n\t\t\tL.TileLayer.prototype.initialize.call(this, provider.url, layerOpts);\n\t\t}\n\t});\n\n\t/**\n\t * Definition of providers.\n\t * see http://leafletjs.com/reference.html#tilelayer for options in the options map.\n\t */\n\n\t//jshint maxlen:220\n\tL.TileLayer.Provider.providers = {\n\t\tOpenStreetMap: {\n\t\t\turl: \'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\',\n\t\t\toptions: {\n\t\t\t\tattribution:\n\t\t\t\t\t\'&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, \' +\n\t\t\t\t\t\'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>\'\n\t\t\t},\n\t\t\tvariants: {\n\t\t\t\tMapnik: {},\n\t\t\t\tBlackAndWhite: {\n\t\t\t\t\turl: \'http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png\'\n\t\t\t\t},\n\t\t\t\tDE: {\n\t\t\t\t\turl: \'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png\'\n\t\t\t\t},\n\t\t\t\tHOT: {\n\t\t\t\t\turl: \'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png\',\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tattribution: \'{attribution.OpenStreetMap}, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>\'\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tOpenSeaMap: {\n\t\t\turl: \'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png\',\n\t\t\toptions: {\n\t\t\t\tattribution: \'Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors\'\n\t\t\t}\n\t\t},\n\t\tThunderforest: {\n\t\t\turl: \'http://{s}.tile.thunderforest.com/{variant}/{z}/{x}/{y}.png\',\n\t\t\toptions: {\n\t\t\t\tattribution:\n\t\t\t\t\t\'&copy; <a href="http://www.opencyclemap.org">OpenCycleMap</a>, {attribution.OpenStreetMap}\',\n\t\t\t\tvariant: \'cycle\'\n\t\t\t},\n\t\t\tvariants: {\n\t\t\t\tOpenCycleMap: \'cycle\',\n\t\t\t\tTransport: \'transport\',\n\t\t\t\tLandscape: \'landscape\',\n\t\t\t\tOutdoors: \'outdoors\'\n\t\t\t}\n\t\t},\n\t\tOpenMapSurfer: {\n\t\t\turl: \'http://openmapsurfer.uni-hd.de/tiles/{variant}/x={x}&y={y}&z={z}\',\n\t\t\toptions: {\n\t\t\t\tminZoom: 0,\n\t\t\t\tmaxZoom: 20,\n\t\t\t\tvariant: \'roads\',\n\t\t\t\tattribution: \'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> &mdash; Map data {attribution.OpenStreetMap}\'\n\t\t\t},\n\t\t\tvariants: {\n\t\t\t\tRoads: \'roads\',\n\t\t\t\tAdminBounds: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tvariant: \'adminb\',\n\t\t\t\t\t\tmaxZoom: 19\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tGrayscale: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tvariant: \'roadsg\',\n\t\t\t\t\t\tmaxZoom: 19\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tMapQuestOpen: {\n\t\t\turl: \'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg\',\n\t\t\toptions: {\n\t\t\t\tattribution:\n\t\t\t\t\t\'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; \' +\n\t\t\t\t\t\'Map data {attribution.OpenStreetMap}\',\n\t\t\t\tsubdomains: \'1234\'\n\t\t\t},\n\t\t\tvariants: {\n\t\t\t\tOSM: {},\n\t\t\t\tAerial: {\n\t\t\t\t\turl: \'http://oatile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg\',\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tattribution:\n\t\t\t\t\t\t\t\'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; \' +\n\t\t\t\t\t\t\t\'Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency\'\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tMapBox: {\n\t\t\turl: function (id) {\n\t\t\t\treturn \'http://{s}.tiles.mapbox.com/v3/\' + id + \'/{z}/{x}/{y}.png\';\n\t\t\t},\n\t\t\toptions: {\n\t\t\t\tattribution:\n\t\t\t\t\t\'Imagery from <a href="http://mapbox.com/about/maps/">MapBox</a> &mdash; \' +\n\t\t\t\t\t\'Map data {attribution.OpenStreetMap}\',\n\t\t\t\tsubdomains: \'abcd\'\n\t\t\t}\n\t\t},\n\t\tStamen: {\n\t\t\turl: \'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png\',\n\t\t\toptions: {\n\t\t\t\tattribution:\n\t\t\t\t\t\'Map tiles by <a href="http://stamen.com">Stamen Design</a>, \' +\n\t\t\t\t\t\'<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; \' +\n\t\t\t\t\t\'Map data {attribution.OpenStreetMap}\',\n\t\t\t\tsubdomains: \'abcd\',\n\t\t\t\tminZoom: 0,\n\t\t\t\tmaxZoom: 20,\n\t\t\t\tvariant: \'toner\'\n\t\t\t},\n\t\t\tvariants: {\n\t\t\t\tToner: \'toner\',\n\t\t\t\tTonerBackground: \'toner-background\',\n\t\t\t\tTonerHybrid: \'toner-hybrid\',\n\t\t\t\tTonerLines: \'toner-lines\',\n\t\t\t\tTonerLabels: \'toner-labels\',\n\t\t\t\tTonerLite: \'toner-lite\',\n\t\t\t\tTerrain: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tvariant: \'terrain\',\n\t\t\t\t\t\tminZoom: 4,\n\t\t\t\t\t\tmaxZoom: 18\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tTerrainBackground: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tvariant: \'terrain-background\',\n\t\t\t\t\t\tminZoom: 4,\n\t\t\t\t\t\tmaxZoom: 18\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tWatercolor: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tvariant: \'watercolor\',\n\t\t\t\t\t\tminZoom: 3,\n\t\t\t\t\t\tmaxZoom: 16\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tEsri: {\n\t\t\turl: \'https://server.arcgisonline.com/ArcGIS/rest/services/{variant}/MapServer/tile/{z}/{y}/{x}\',\n\t\t\toptions: {\n\t\t\t\tvariant: \'World_Street_Map\',\n\t\t\t\tattribution: \'Tiles &copy; Esri\'\n\t\t\t},\n\t\t\tvariants: {\n\t\t\t\tWorldStreetMap: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tattribution:\n\t\t\t\t\t\t\t\'{attribution.Esri} &mdash; \' +\n\t\t\t\t\t\t\t\'Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012\'\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tDeLorme: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tvariant: \'Specialty/DeLorme_World_Base_Map\',\n\t\t\t\t\t\tminZoom: 1,\n\t\t\t\t\t\tmaxZoom: 11,\n\t\t\t\t\t\tattribution: \'{attribution.Esri} &mdash; Copyright: &copy;2012 DeLorme\'\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tWorldTopoMap: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tvariant: \'World_Topo_Map\',\n\t\t\t\t\t\tattribution:\n\t\t\t\t\t\t\t\'{attribution.Esri} &mdash; \' +\n\t\t\t\t\t\t\t\'Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community\'\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tWorldImagery: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tvariant: \'World_Imagery\',\n\t\t\t\t\t\tattribution:\n\t\t\t\t\t\t\t\'{attribution.Esri} &mdash; \' +\n\t\t\t\t\t\t\t\'Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community\'\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tWorldTerrain: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tvariant: \'World_Terrain_Base\',\n\t\t\t\t\t\tmaxZoom: 13,\n\t\t\t\t\t\tattribution:\n\t\t\t\t\t\t\t\'{attribution.Esri} &mdash; \' +\n\t\t\t\t\t\t\t\'Source: USGS, Esri, TANA, DeLorme, and NPS\'\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tWorldShadedRelief: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tvariant: \'World_Shaded_Relief\',\n\t\t\t\t\t\tmaxZoom: 13,\n\t\t\t\t\t\tattribution: \'{attribution.Esri} &mdash; Source: Esri\'\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tWorldPhysical: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tvariant: \'World_Physical_Map\',\n\t\t\t\t\t\tmaxZoom: 8,\n\t\t\t\t\t\tattribution: \'{attribution.Esri} &mdash; Source: US National Park Service\'\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tOceanBasemap: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tvariant: \'Ocean_Basemap\',\n\t\t\t\t\t\tmaxZoom: 13,\n\t\t\t\t\t\tattribution: \'{attribution.Esri} &mdash; Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri\'\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tNatGeoWorldMap: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tvariant: \'NatGeo_World_Map\',\n\t\t\t\t\t\tmaxZoom: 16,\n\t\t\t\t\t\tattribution: \'{attribution.Esri} &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC\'\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tWorldGrayCanvas: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tvariant: \'Canvas/World_Light_Gray_Base\',\n\t\t\t\t\t\tmaxZoom: 16,\n\t\t\t\t\t\tattribution: \'{attribution.Esri} &mdash; Esri, DeLorme, NAVTEQ\'\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tOpenWeatherMap: {\n\t\t\turl: \'http://{s}.tile.openweathermap.org/map/{variant}/{z}/{x}/{y}.png\',\n\t\t\toptions: {\n\t\t\t\tattribution: \'Map data &copy; <a href="http://openweathermap.org">OpenWeatherMap</a>\',\n\t\t\t\topacity: 0.5\n\t\t\t},\n\t\t\tvariants: {\n\t\t\t\tClouds: \'clouds\',\n\t\t\t\tCloudsClassic: \'clouds_cls\',\n\t\t\t\tPrecipitation: \'precipitation\',\n\t\t\t\tPrecipitationClassic: \'precipitation_cls\',\n\t\t\t\tRain: \'rain\',\n\t\t\t\tRainClassic: \'rain_cls\',\n\t\t\t\tPressure: \'pressure\',\n\t\t\t\tPressureContour: \'pressure_cntr\',\n\t\t\t\tWind: \'wind\',\n\t\t\t\tTemperature: \'temp\',\n\t\t\t\tSnow: \'snow\'\n\t\t\t}\n\t\t},\n\t\tHERE: {\n\t\t\t/*\n\t\t\t * HERE maps, formerly Nokia maps.\n\t\t\t * These basemaps are free, but you need an API key. Please sign up at\n\t\t\t * http://developer.here.com/getting-started\n\t\t\t *\n\t\t\t * Note that the base urls contain \'.cit\' whichs is HERE\'s\n\t\t\t * \'Customer Integration Testing\' environment. Please remove for production\n\t\t\t * envirionments.\n\t\t\t */\n\t\t\turl:\n\t\t\t\t\'http://{s}.{base}.maps.cit.api.here.com/maptile/2.1/\' +\n\t\t\t\t\'maptile/{mapID}/{variant}/{z}/{x}/{y}/256/png8?\' +\n\t\t\t\t\'app_id={app_id}&app_code={app_code}\',\n\t\t\toptions: {\n\t\t\t\tattribution:\n\t\t\t\t\t\'Map &copy; 1987-2014 <a href="http://developer.here.com">HERE</a>\',\n\t\t\t\tsubdomains: \'1234\',\n\t\t\t\tmapID: \'newest\',\n\t\t\t\t\'app_id\': \'<insert your app_id here>\',\n\t\t\t\t\'app_code\': \'<insert your app_code here>\',\n\t\t\t\tbase: \'base\',\n\t\t\t\tvariant: \'normal.day\',\n\t\t\t\tminZoom: 0,\n\t\t\t\tmaxZoom: 20\n\t\t\t},\n\t\t\tvariants: {\n\t\t\t\tnormalDay: \'normal.day\',\n\t\t\t\tnormalDayCustom: \'normal.day.custom\',\n\t\t\t\tnormalDayGrey: \'normal.day.grey\',\n\t\t\t\tnormalDayMobile: \'normal.day.mobile\',\n\t\t\t\tnormalDayGreyMobile: \'normal.day.grey.mobile\',\n\t\t\t\tnormalDayTransit: \'normal.day.transit\',\n\t\t\t\tnormalDayTransitMobile: \'normal.day.transit.mobile\',\n\t\t\t\tnormalNight: \'normal.night\',\n\t\t\t\tnormalNightMobile: \'normal.night.mobile\',\n\t\t\t\tnormalNightGrey: \'normal.night.grey\',\n\t\t\t\tnormalNightGreyMobile: \'normal.night.grey.mobile\',\n\n\t\t\t\tcarnavDayGrey: \'carnav.day.grey\',\n\t\t\t\thybridDay: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tbase: \'aerial\',\n\t\t\t\t\t\tvariant: \'hybrid.day\'\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\thybridDayMobile: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tbase: \'aerial\',\n\t\t\t\t\t\tvariant: \'hybrid.day.mobile\'\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tpedestrianDay: \'pedestrian.day\',\n\t\t\t\tpedestrianNight: \'pedestrian.night\',\n\t\t\t\tsatelliteDay: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tbase: \'aerial\',\n\t\t\t\t\t\tvariant: \'satellite.day\'\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tterrainDay: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tbase: \'aerial\',\n\t\t\t\t\t\tvariant: \'terrain.day\'\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tterrainDayMobile: {\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tbase: \'aerial\',\n\t\t\t\t\t\tvariant: \'terrain.day.mobile\'\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tAcetate: {\n\t\t\turl: \'http://a{s}.acetate.geoiq.com/tiles/{variant}/{z}/{x}/{y}.png\',\n\t\t\toptions: {\n\t\t\t\tattribution:\n\t\t\t\t\t\'&copy;2012 Esri & Stamen, Data from OSM and Natural Earth\',\n\t\t\t\tsubdomains: \'0123\',\n\t\t\t\tminZoom: 2,\n\t\t\t\tmaxZoom: 18,\n\t\t\t\tvariant: \'acetate-base\'\n\t\t\t},\n\t\t\tvariants: {\n\t\t\t\tbasemap: \'acetate-base\',\n\t\t\t\tterrain: \'terrain\',\n\t\t\t\tall: \'acetate-hillshading\',\n\t\t\t\tforeground: \'acetate-fg\',\n\t\t\t\troads: \'acetate-roads\',\n\t\t\t\tlabels: \'acetate-labels\',\n\t\t\t\thillshading: \'hillshading\'\n\t\t\t}\n\t\t}\n\t};\n\n\tL.tileLayer.provider = function (provider, options) {\n\t\treturn new L.TileLayer.Provider(provider, options);\n\t};\n\n\tL.Control.Layers.Provided = L.Control.Layers.extend({\n\t\tinitialize: function (base, overlay, options) {\n\t\t\tvar first;\n\n\t\t\tvar labelFormatter = function (label) {\n\t\t\t\treturn label.replace(/\\./g, \': \').replace(/([a-z])([A-Z])/g, \'$1 $2\');\n\t\t\t};\n\n\t\t\tif (base.length) {\n\t\t\t\t(function () {\n\t\t\t\t\tvar out = {},\n\t\t\t\t\t    len = base.length,\n\t\t\t\t\t    i = 0;\n\n\t\t\t\t\twhile (i < len) {\n\t\t\t\t\t\tif (typeof base[i] === \'string\') {\n\t\t\t\t\t\t\tif (i === 0) {\n\t\t\t\t\t\t\t\tfirst = L.tileLayer.provider(base[0]);\n\t\t\t\t\t\t\t\tout[labelFormatter(base[i])] = first;\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tout[labelFormatter(base[i])] = L.tileLayer.provider(base[i]);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\ti++;\n\t\t\t\t\t}\n\t\t\t\t\tbase = out;\n\t\t\t\t}());\n\t\t\t\tthis._first = first;\n\t\t\t}\n\n\t\t\tif (overlay && overlay.length) {\n\t\t\t\t(function () {\n\t\t\t\t\tvar out = {},\n\t\t\t\t\t    len = overlay.length,\n\t\t\t\t\t    i = 0;\n\n\t\t\t\t\twhile (i < len) {\n\t\t\t\t\t\tif (typeof overlay[i] === \'string\') {\n\t\t\t\t\t\t\tout[labelFormatter(overlay[i])] = L.tileLayer.provider(overlay[i]);\n\t\t\t\t\t\t}\n\t\t\t\t\t\ti++;\n\t\t\t\t\t}\n\t\t\t\t\toverlay = out;\n\t\t\t\t}());\n\t\t\t}\n\t\t\tL.Control.Layers.prototype.initialize.call(this, base, overlay, options);\n\t\t},\n\t\tonAdd: function (map) {\n\t\t\tthis._first.addTo(map);\n\t\t\treturn L.Control.Layers.prototype.onAdd.call(this, map);\n\t\t}\n\t});\n\n\tL.control.layers.provided = function (baseLayers, overlays, options) {\n\t\treturn new L.Control.Layers.Provided(baseLayers, overlays, options);\n\t};\n}());\n\n//Utility functions for map info window\nfunction mapit(lat,lon,zoom,id) {\n    map = L.map(document.getElementById("map-wrapper-"+id));\n    centerCoord = new L.LatLng(lat, lon);\n    zoom = zoom;\n    L.tileLayer.provider(\'Esri.WorldTopoMap\', {maxZoom: 18, attribution: \'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Tiles &copy; Esri and the GIS User Community\'}).addTo(map);\n    map.setView(centerCoord, zoom);\n    ////get the geojson for this map\n    $.ajax({\n        url: "/projects/data/natparks/"+id+".json",\n        dataType: "json",\n        success: function(data, text, request) { draw_poly(data, map); } \n        //complete: function(xhr, status) {console.log(status); return false; },\n    });\n    //draw the polygon\n    function draw_poly(data, map) {\n        var myStyle = {\n            "color": "#201a11",\n            "weight": 2,\n            "opacity": 0.65\n        };\n        L.geoJson(data, {\n            style: myStyle\n        }).addTo(map);\n    }\n}  \n\n// utility functions to create/remove map container\nfunction create_map(obj) {\n    var lat = parseFloat(obj.attr(\'data-latitude\'));\n\tvar lon = parseFloat(obj.attr(\'data-longitude\'));\n\tvar zoom= parseInt(obj.attr(\'data-zoom\'));\n\tvar id= obj.attr(\'data-id\');\n\n    //create container divs\n    $(obj).parents().eq(3).append(\'<div class="map-container" id="map-container-\'+id+\'">\');\n    $(\'#map-container-\'+id).append(\'<div class="map-wrapper" id="map-wrapper-\'+id+\'">\');\n    mapit(lat,lon,zoom,id);\n}\nfunction remove_map(id) {\n    $(id).remove();\n}\n\n//functions to handle the "more" link\n// utility functions to create/remove camera info container\nfunction get_exif(obj,id) {\n    //$(obj).parents().eq(2).append(\'<div id="exif-container">\');\n    $(obj).parents().eq(3).append(\'<div class="more-container" id="\'+id+\'">\');    $(obj).parents().eq(2).children(\'.meta\').clone().appendTo(\'#\'+id).css(\'visibility\', \'visible\');\n    \n    \n        \n    //deal with the variable height of div.legend\n    $(\'#exif-container\').css({\n        bottom: function(index, value) {\n            return parseFloat($(obj).parent().parent().css("height"))-14;\n        }\n     });\n}\nfunction remove_exif(id) {\n    $(\'#\'+id).remove();\n}\n$(document).ready(function(){  \n//set up click events for map button\n    $(\'.map-link\').click( function() {\n        var more_id = \'more-container-\'+$(this).parent().next().children(\'.more-link\').attr(\'id\').split(\'-\')[1];\n        var id = \'#map-container-\'+$(this).attr(\'data-id\');\n        if ($(\'#\'+more_id).is(":visible")){\n                remove_exif(more_id);\n        }\n        if ($(id).is(":visible")) {\n            remove_map(id);  \n        } else {\n            create_map($(this));\n        }\n        return false;\n    \n    }); \n    \n    //set up click events for more info button\n    $(\'.more-link\').click( function() {\n        var map_id = \'#map-container-\'+$(this).parent().prev().children(\'.map-link\').attr(\'data-id\');\n        var id = \'more-container-\'+this.id.split(\'-\')[1];\n        if ($(map_id).is(":visible")){\n            remove_map(map_id);\n        }\n        if ($(\'#\'+id).is(":visible")) {\n            remove_exif(id);\n        } else {\n            get_exif(this, id);\n        }\n        return false;\n    });\n\n});\n'
\ No newline at end of file
+(function(){'use strict';L.TileLayer.Provider=L.TileLayer.extend({initialize:function(arg,options){var providers=L.TileLayer.Provider.providers;var parts=arg.split('.');var providerName=parts[0];var variantName=parts[1];if(!providers[providerName]){throw'No such provider ('+providerName+')';}
+var provider={url:providers[providerName].url,options:providers[providerName].options};if(variantName&&'variants'in providers[providerName]){if(!(variantName in providers[providerName].variants)){throw'No such variant of '+providerName+' ('+variantName+')';}
+var variant=providers[providerName].variants[variantName];var variantOptions;if(typeof variant==='string'){variantOptions={variant:variant};}else{variantOptions=variant.options;}
+provider={url:variant.url||provider.url,options:L.Util.extend({},provider.options,variantOptions)};}else if(typeof provider.url==='function'){provider.url=provider.url(parts.splice(1,parts.length-1).join('.'));} 
+var attributionReplacer=function(attr){if(attr.indexOf('{attribution.')===-1){return attr;}
+return attr.replace(/\{attribution.(\w*)\}/,function(match,attributionName){return attributionReplacer(providers[attributionName].options.attribution);});};provider.options.attribution=attributionReplacer(provider.options.attribution); var layerOpts=L.Util.extend({},provider.options,options);L.TileLayer.prototype.initialize.call(this,provider.url,layerOpts);}}); L.TileLayer.Provider.providers={OpenStreetMap:{url:'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',options:{attribution:'&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '+'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'},variants:{Mapnik:{},BlackAndWhite:{url:'http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png'},DE:{url:'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png'},HOT:{url:'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',options:{attribution:'{attribution.OpenStreetMap}, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'}}}},OpenSeaMap:{url:'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',options:{attribution:'Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors'}},Thunderforest:{url:'http://{s}.tile.thunderforest.com/{variant}/{z}/{x}/{y}.png',options:{attribution:'&copy; <a href="http://www.opencyclemap.org">OpenCycleMap</a>, {attribution.OpenStreetMap}',variant:'cycle'},variants:{OpenCycleMap:'cycle',Transport:'transport',Landscape:'landscape',Outdoors:'outdoors'}},OpenMapSurfer:{url:'http://openmapsurfer.uni-hd.de/tiles/{variant}/x={x}&y={y}&z={z}',options:{minZoom:0,maxZoom:20,variant:'roads',attribution:'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> &mdash; Map data {attribution.OpenStreetMap}'},variants:{Roads:'roads',AdminBounds:{options:{variant:'adminb',maxZoom:19}},Grayscale:{options:{variant:'roadsg',maxZoom:19}}}},MapQuestOpen:{url:'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg',options:{attribution:'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; '+'Map data {attribution.OpenStreetMap}',subdomains:'1234'},variants:{OSM:{},Aerial:{url:'http://oatile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg',options:{attribution:'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; '+'Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency'}}}},MapBox:{url:function(id){return'http://{s}.tiles.mapbox.com/v3/'+id+'/{z}/{x}/{y}.png';},options:{attribution:'Imagery from <a href="http://mapbox.com/about/maps/">MapBox</a> &mdash; '+'Map data {attribution.OpenStreetMap}',subdomains:'abcd'}},Stamen:{url:'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',options:{attribution:'Map tiles by <a href="http://stamen.com">Stamen Design</a>, '+'<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; '+'Map data {attribution.OpenStreetMap}',subdomains:'abcd',minZoom:0,maxZoom:20,variant:'toner'},variants:{Toner:'toner',TonerBackground:'toner-background',TonerHybrid:'toner-hybrid',TonerLines:'toner-lines',TonerLabels:'toner-labels',TonerLite:'toner-lite',Terrain:{options:{variant:'terrain',minZoom:4,maxZoom:18}},TerrainBackground:{options:{variant:'terrain-background',minZoom:4,maxZoom:18}},Watercolor:{options:{variant:'watercolor',minZoom:3,maxZoom:16}}}},Esri:{url:'https://server.arcgisonline.com/ArcGIS/rest/services/{variant}/MapServer/tile/{z}/{y}/{x}',options:{variant:'World_Street_Map',attribution:'Tiles &copy; Esri'},variants:{WorldStreetMap:{options:{attribution:'{attribution.Esri} &mdash; '+'Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'}},DeLorme:{options:{variant:'Specialty/DeLorme_World_Base_Map',minZoom:1,maxZoom:11,attribution:'{attribution.Esri} &mdash; Copyright: &copy;2012 DeLorme'}},WorldTopoMap:{options:{variant:'World_Topo_Map',attribution:'{attribution.Esri} &mdash; '+'Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'}},WorldImagery:{options:{variant:'World_Imagery',attribution:'{attribution.Esri} &mdash; '+'Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'}},WorldTerrain:{options:{variant:'World_Terrain_Base',maxZoom:13,attribution:'{attribution.Esri} &mdash; '+'Source: USGS, Esri, TANA, DeLorme, and NPS'}},WorldShadedRelief:{options:{variant:'World_Shaded_Relief',maxZoom:13,attribution:'{attribution.Esri} &mdash; Source: Esri'}},WorldPhysical:{options:{variant:'World_Physical_Map',maxZoom:8,attribution:'{attribution.Esri} &mdash; Source: US National Park Service'}},OceanBasemap:{options:{variant:'Ocean_Basemap',maxZoom:13,attribution:'{attribution.Esri} &mdash; Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri'}},NatGeoWorldMap:{options:{variant:'NatGeo_World_Map',maxZoom:16,attribution:'{attribution.Esri} &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC'}},WorldGrayCanvas:{options:{variant:'Canvas/World_Light_Gray_Base',maxZoom:16,attribution:'{attribution.Esri} &mdash; Esri, DeLorme, NAVTEQ'}}}},OpenWeatherMap:{url:'http://{s}.tile.openweathermap.org/map/{variant}/{z}/{x}/{y}.png',options:{attribution:'Map data &copy; <a href="http://openweathermap.org">OpenWeatherMap</a>',opacity:0.5},variants:{Clouds:'clouds',CloudsClassic:'clouds_cls',Precipitation:'precipitation',PrecipitationClassic:'precipitation_cls',Rain:'rain',RainClassic:'rain_cls',Pressure:'pressure',PressureContour:'pressure_cntr',Wind:'wind',Temperature:'temp',Snow:'snow'}},HERE:{url:'http://{s}.{base}.maps.cit.api.here.com/maptile/2.1/'+'maptile/{mapID}/{variant}/{z}/{x}/{y}/256/png8?'+'app_id={app_id}&app_code={app_code}',options:{attribution:'Map &copy; 1987-2014 <a href="http://developer.here.com">HERE</a>',subdomains:'1234',mapID:'newest','app_id':'<insert your app_id here>','app_code':'<insert your app_code here>',base:'base',variant:'normal.day',minZoom:0,maxZoom:20},variants:{normalDay:'normal.day',normalDayCustom:'normal.day.custom',normalDayGrey:'normal.day.grey',normalDayMobile:'normal.day.mobile',normalDayGreyMobile:'normal.day.grey.mobile',normalDayTransit:'normal.day.transit',normalDayTransitMobile:'normal.day.transit.mobile',normalNight:'normal.night',normalNightMobile:'normal.night.mobile',normalNightGrey:'normal.night.grey',normalNightGreyMobile:'normal.night.grey.mobile',carnavDayGrey:'carnav.day.grey',hybridDay:{options:{base:'aerial',variant:'hybrid.day'}},hybridDayMobile:{options:{base:'aerial',variant:'hybrid.day.mobile'}},pedestrianDay:'pedestrian.day',pedestrianNight:'pedestrian.night',satelliteDay:{options:{base:'aerial',variant:'satellite.day'}},terrainDay:{options:{base:'aerial',variant:'terrain.day'}},terrainDayMobile:{options:{base:'aerial',variant:'terrain.day.mobile'}}}},Acetate:{url:'http://a{s}.acetate.geoiq.com/tiles/{variant}/{z}/{x}/{y}.png',options:{attribution:'&copy;2012 Esri & Stamen, Data from OSM and Natural Earth',subdomains:'0123',minZoom:2,maxZoom:18,variant:'acetate-base'},variants:{basemap:'acetate-base',terrain:'terrain',all:'acetate-hillshading',foreground:'acetate-fg',roads:'acetate-roads',labels:'acetate-labels',hillshading:'hillshading'}}};L.tileLayer.provider=function(provider,options){return new L.TileLayer.Provider(provider,options);};L.Control.Layers.Provided=L.Control.Layers.extend({initialize:function(base,overlay,options){var first;var labelFormatter=function(label){return label.replace(/\./g,': ').replace(/([a-z])([A-Z])/g,'$1 $2');};if(base.length){(function(){var out={},len=base.length,i=0;while(i<len){if(typeof base[i]==='string'){if(i===0){first=L.tileLayer.provider(base[0]);out[labelFormatter(base[i])]=first;}else{out[labelFormatter(base[i])]=L.tileLayer.provider(base[i]);}}
+i++;}
+base=out;}());this._first=first;}
+if(overlay&&overlay.length){(function(){var out={},len=overlay.length,i=0;while(i<len){if(typeof overlay[i]==='string'){out[labelFormatter(overlay[i])]=L.tileLayer.provider(overlay[i]);}
+i++;}
+overlay=out;}());}
+L.Control.Layers.prototype.initialize.call(this,base,overlay,options);},onAdd:function(map){this._first.addTo(map);return L.Control.Layers.prototype.onAdd.call(this,map);}});L.control.layers.provided=function(baseLayers,overlays,options){return new L.Control.Layers.Provided(baseLayers,overlays,options);};}());function mapit(lat,lon,zoom,id){map=L.map(document.getElementById("map-wrapper-"+id));centerCoord=new L.LatLng(lat,lon);zoom=zoom;L.tileLayer.provider('Esri.WorldTopoMap',{maxZoom:18,attribution:'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Tiles &copy; Esri and the GIS User Community'}).addTo(map);map.setView(centerCoord,zoom); $.ajax({url:"/projects/data/natparks/"+id+".json",dataType:"json",success:function(data,text,request){draw_poly(data,map);}
+}); function draw_poly(data,map){var myStyle={"color":"#201a11","weight":2,"opacity":0.65};L.geoJson(data,{style:myStyle}).addTo(map);}}
+function create_map(obj){var lat=parseFloat(obj.attr('data-latitude'));var lon=parseFloat(obj.attr('data-longitude'));var zoom=parseInt(obj.attr('data-zoom'));var id=obj.attr('data-id'); $(obj).parents().eq(3).append('<div class="map-container" id="map-container-'+id+'">');$('#map-container-'+id).append('<div class="map-wrapper" id="map-wrapper-'+id+'">');mapit(lat,lon,zoom,id);}
+function remove_map(id){$(id).remove();}
+
+function get_exif(obj,id){$(obj).parents().eq(3).append('<div class="more-container" id="'+id+'">');$(obj).parents().eq(2).children('.meta').clone().appendTo('#'+id).css('visibility','visible'); $('#exif-container').css({bottom:function(index,value){return parseFloat($(obj).parent().parent().css("height"))-14;}});}
+function remove_exif(id){$('#'+id).remove();}
+$(document).ready(function(){ $('.map-link').click(function(){var more_id='more-container-'+$(this).parent().next().children('.more-link').attr('id').split('-')[1];var id='#map-container-'+$(this).attr('data-id');if($('#'+more_id).is(":visible")){remove_exif(more_id);}
+if($(id).is(":visible")){remove_map(id);}else{create_map($(this));}
+return false;}); $('.more-link').click(function(){var map_id='#map-container-'+$(this).parent().prev().children('.map-link').attr('data-id');var id='more-container-'+this.id.split('-')[1];if($(map_id).is(":visible")){remove_map(map_id);}
+if($('#'+id).is(":visible")){remove_exif(id);}else{get_exif(this,id);}
+return false;});});
\ No newline at end of file