diff --git a/site/_includes/docs_contents.html b/site/_includes/docs_contents.html
index 7e7637f3..aa4890a9 100644
--- a/site/_includes/docs_contents.html
+++ b/site/_includes/docs_contents.html
@@ -1,4 +1,4 @@
-<div class="grid2">
+<div class="unit one-fifth hide-on-mobiles">
   <aside>
     <h4>Getting Started</h4>
     <ul>
diff --git a/site/_layouts/docs.html b/site/_layouts/docs.html
index b88f7a58..a0a8a5c1 100644
--- a/site/_layouts/docs.html
+++ b/site/_layouts/docs.html
@@ -3,9 +3,11 @@ layout: default
 ---
 
   <section class="docs">
-    <div class="content">
+    <div class="grid">
 
-      <div class="grid10 first">
+      {% include docs_contents_mobile.html %}
+
+      <div class="unit four-fifths">
         <article>
           <h1>{{ page.title }}</h1>
           {{ content }}
diff --git a/site/css/style.css b/site/css/style.css
index e9295ef5..6770ef87 100644
--- a/site/css/style.css
+++ b/site/css/style.css
@@ -377,6 +377,127 @@ p {
 .align-left { text-align: left; }
 .align-center { text-align: center; }
 
+/* Documentation */
+
+.docs .content {
+  padding: 0;
+}
+
+.docs article {
+  background: #444;
+  border-radius: 10px;
+  padding: 40px 40px 30px;
+  box-shadow: 0 3px 10px rgba(0,0,0,.1);
+  min-height: 800px;
+}
+
+.docs aside {
+  padding-top: 30px;
+}
+
+.docs aside h4 {
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 0 0 10px 30px;
+  margin-left: -30px;
+  display: inline-block;
+  border-bottom: 1px solid #c00;
+}
+
+.docs aside ul {
+  padding-left: 0;
+}
+
+.docs aside li {
+  list-style-type: none;
+}
+
+.docs aside li a {
+  font-size: 16px;
+  position: relative
+}
+
+.docs aside li.current a:before {
+  content: "";
+  border-color: transparent transparent transparent #444;
+  border-style: solid;
+  border-width: 10px;
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: 0;
+  left: -30px;
+}
+
+.section-nav {
+  text-align: center;
+  padding-top: 40px;
+  position: relative;
+  background: url(../img/article-footer.png) top center no-repeat;
+}
+
+.section-nav > div {
+  width: 49.5%;
+}
+
+.section-nav a, .section-nav span {
+  color: #fff;
+  font-size: 16px;
+  text-transform: uppercase;
+  font-weight: 700;
+  padding: 8px 12px 10px;
+  border-radius: 5px;
+  /*border: 1px solid #333;*/
+  background: #999;
+  box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5);
+  background: #777;
+}
+
+.section-nav a:hover {
+  color: #fff;
+  background: #888;
+}
+
+.section-nav .next, .section-nav .prev {
+  position: relative;
+}
+
+.section-nav .next:after, .section-nav .prev:before {
+  font-size: 36px;
+  color: #222;
+  font-weight: 800;
+  text-shadow: 0 1px 0 rgba(255,255,255,.4);
+  position: absolute;
+  top: -7px;
+}
+
+.section-nav .next:after {
+  content: "›";
+  right: 10px;
+}
+
+.section-nav .prev:before {
+  content: "‹";
+  left: 10px;
+}
+
+.section-nav .prev, .section-nav .prev:hover {
+  /*float: left;*/
+  padding-left: 30px;
+}
+
+.section-nav .next, .section-nav .next:hover {
+  /*float: right;*/
+  padding-right: 30px;
+}
+
+.section-nav .disabled {
+  opacity: .5;
+  /*filter: alpha*/
+  cursor: default;
+}
+
 /* Article HTML */
 
 article h2,