Add less css

6 files changed, 1054 insertions, 0 deletions

diff --git a/assets/less/960-responsive.less b/assets/less/960-responsive.less
new file mode 100644
index 0000000..b92eb5f
--- /dev/null
+++ b/assets/less/960-responsive.less
@@ -0,0 +1,392 @@
+/*
+* 960 Responsive Grid
+* Copyright 2012, Tyler Wolff
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/10/2012
+*/
+
+/* Tablet Portrait width to 960px */
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+
+  body {
+    min-width: 768px;
+  }
+
+  .container_12,
+  .container_16 {
+    width: 768px;
+  }
+
+  .container_12 .grid_1  { width: 44px; }
+  .container_12 .grid_2  { width: 108px; }
+  .container_12 .grid_3  { width: 172px; }
+  .container_12 .grid_4  { width: 236px; }
+  .container_12 .grid_5  { width: 300px; }
+  .container_12 .grid_6  { width: 364px; }
+  .container_12 .grid_7  { width: 428px; }
+  .container_12 .grid_8  { width: 492px; }
+  .container_12 .grid_9  { width: 556px; }
+  .container_12 .grid_10 { width: 620px; }
+  .container_12 .grid_11 { width: 684px; }
+  .container_12 .grid_12 { width: 748px; }
+
+  .container_16 .grid_1  { width: 28px; }
+  .container_16 .grid_2  { width: 76px; }
+  .container_16 .grid_3  { width: 124px; }
+  .container_16 .grid_4  { width: 172px; }
+  .container_16 .grid_5  { width: 220px; }
+  .container_16 .grid_6  { width: 268px; }
+  .container_16 .grid_7  { width: 316px; }
+  .container_16 .grid_8  { width: 364px; }
+  .container_16 .grid_9  { width: 412px; }
+  .container_16 .grid_10 { width: 460px; }
+  .container_16 .grid_11 { width: 508px; }
+  .container_16 .grid_12 { width: 556px; }
+  .container_16 .grid_13 { width: 604px; }
+  .container_16 .grid_14 { width: 652px; }
+  .container_16 .grid_15 { width: 700px; }
+  .container_16 .grid_16 { width: 748px; }
+
+  .container_12 .prefix_1  { padding-left: 64px; }
+  .container_12 .prefix_2  { padding-left: 128px; }
+  .container_12 .prefix_3  { padding-left: 192px; }
+  .container_12 .prefix_4  { padding-left: 256px; }
+  .container_12 .prefix_5  { padding-left: 320px; }
+  .container_12 .prefix_6  { padding-left: 384px; }
+  .container_12 .prefix_7  { padding-left: 448px; }
+  .container_12 .prefix_8  { padding-left: 512px; }
+  .container_12 .prefix_9  { padding-left: 576px; }
+  .container_12 .prefix_10 { padding-left: 640px; }
+  .container_12 .prefix_11 { padding-left: 704px; }
+
+  .container_16 .prefix_1  { padding-left: 48px; }
+  .container_16 .prefix_2  { padding-left: 96px; }
+  .container_16 .prefix_3  { padding-left: 144px; }
+  .container_16 .prefix_4  { padding-left: 192px; }
+  .container_16 .prefix_5  { padding-left: 240px; }
+  .container_16 .prefix_6  { padding-left: 288px; }
+  .container_16 .prefix_7  { padding-left: 336px; }
+  .container_16 .prefix_8  { padding-left: 384px; }
+  .container_16 .prefix_9  { padding-left: 432px; }
+  .container_16 .prefix_10 { padding-left: 480px; }
+  .container_16 .prefix_11 { padding-left: 528px; }
+  .container_16 .prefix_12 { padding-left: 576px; }
+  .container_16 .prefix_13 { padding-left: 624px; }
+  .container_16 .prefix_14 { padding-left: 672px; }
+  .container_16 .prefix_15 { padding-left: 720px; }
+
+  .container_12 .suffix_1  { padding-right: 64px; }
+  .container_12 .suffix_2  { padding-right: 128px; }
+  .container_12 .suffix_3  { padding-right: 192px; }
+  .container_12 .suffix_4  { padding-right: 256px; }
+  .container_12 .suffix_5  { padding-right: 320px; }
+  .container_12 .suffix_6  { padding-right: 384px; }
+  .container_12 .suffix_7  { padding-right: 448px; }
+  .container_12 .suffix_8  { padding-right: 512px; }
+  .container_12 .suffix_9  { padding-right: 576px; }
+  .container_12 .suffix_10 { padding-right: 640px; }
+  .container_12 .suffix_11 { padding-right: 704px; }
+
+  .container_16 .suffix_1  { padding-right: 48px; }
+  .container_16 .suffix_2  { padding-right: 96px; }
+  .container_16 .suffix_3  { padding-right: 144px; }
+  .container_16 .suffix_4  { padding-right: 192px; }
+  .container_16 .suffix_5  { padding-right: 240px; }
+  .container_16 .suffix_6  { padding-right: 288px; }
+  .container_16 .suffix_7  { padding-right: 336px; }
+  .container_16 .suffix_8  { padding-right: 384px; }
+  .container_16 .suffix_9  { padding-right: 432px; }
+  .container_16 .suffix_10 { padding-right: 480px; }
+  .container_16 .suffix_11 { padding-right: 528px; }
+  .container_16 .suffix_12 { padding-right: 576px; }
+  .container_16 .suffix_13 { padding-right: 624px; }
+  .container_16 .suffix_14 { padding-right: 672px; }
+  .container_16 .suffix_15 { padding-right: 720px; }
+
+  .container_12 .push_1  { left: 64px; }
+  .container_12 .push_2  { left: 128px; }
+  .container_12 .push_3  { left: 192px; }
+  .container_12 .push_4  { left: 256px; }
+  .container_12 .push_5  { left: 320px; }
+  .container_12 .push_6  { left: 384px; }
+  .container_12 .push_7  { left: 448px; }
+  .container_12 .push_8  { left: 512px; }
+  .container_12 .push_9  { left: 576px; }
+  .container_12 .push_10 { left: 640px; }
+  .container_12 .push_11 { left: 704px; }
+
+  .container_16 .push_1  { left: 48px; }
+  .container_16 .push_2  { left: 96px; }
+  .container_16 .push_3  { left: 144px; }
+  .container_16 .push_4  { left: 192px; }
+  .container_16 .push_5  { left: 240px; }
+  .container_16 .push_6  { left: 288px; }
+  .container_16 .push_7  { left: 336px; }
+  .container_16 .push_8  { left: 384px; }
+  .container_16 .push_9  { left: 432px; }
+  .container_16 .push_10 { left: 480px; }
+  .container_16 .push_11 { left: 528px; }
+  .container_16 .push_12 { left: 576px; }
+  .container_16 .push_13 { left: 624px; }
+  .container_16 .push_14 { left: 672px; }
+  .container_16 .push_15 { left: 720px; }
+
+  .container_12 .pull_1  { left: -64px; }
+  .container_12 .pull_2  { left: -128px; }
+  .container_12 .pull_3  { left: -192px; }
+  .container_12 .pull_4  { left: -256px; }
+  .container_12 .pull_5  { left: -320px; }
+  .container_12 .pull_6  { left: -384px; }
+  .container_12 .pull_7  { left: -448px; }
+  .container_12 .pull_8  { left: -512px; }
+  .container_12 .pull_9  { left: -576px; }
+  .container_12 .pull_10 { left: -640px; }
+  .container_12 .pull_11 { left: -704px; }
+
+  .container_16 .pull_1  { left: -48px; }
+  .container_16 .pull_2  { left: -96px; }
+  .container_16 .pull_3  { left: -144px; }
+  .container_16 .pull_4  { left: -192px; }
+  .container_16 .pull_5  { left: -240px; }
+  .container_16 .pull_6  { left: -288px; }
+  .container_16 .pull_7  { left: -336px; }
+  .container_16 .pull_8  { left: -384px; }
+  .container_16 .pull_9  { left: -432px; }
+  .container_16 .pull_10 { left: -480px; }
+  .container_16 .pull_11 { left: -528px; }
+  .container_16 .pull_12 { left: -576px; }
+  .container_16 .pull_13 { left: -624px; }
+  .container_16 .pull_14 { left: -672px; }
+  .container_16 .pull_15 { left: -720px; }
+
+}
+
+/* All Mobile Widths */
+@media only screen and (max-width: 767px) {
+
+  body {
+    min-width: 300px;
+  }
+
+  .container_12,
+  .container_16 {
+    width: 300px;
+  }
+
+  .container_12 .grid_1,
+  .container_16 .grid_1,
+  .container_12 .grid_2,
+  .container_16 .grid_2,
+  .container_12 .grid_3,
+  .container_16 .grid_3,
+  .container_12 .grid_4,
+  .container_16 .grid_4,
+  .container_12 .grid_5,
+  .container_16 .grid_5,
+  .container_12 .grid_6,
+  .container_16 .grid_6,
+  .container_12 .grid_7,
+  .container_16 .grid_7,
+  .container_12 .grid_8,
+  .container_16 .grid_8,
+  .container_12 .grid_9,
+  .container_16 .grid_9,
+  .container_12 .grid_10,
+  .container_16 .grid_10,
+  .container_12 .grid_11,
+  .container_16 .grid_11,
+  .container_12 .grid_12,
+  .container_16 .grid_12,
+  .container_12 .grid_13,
+  .container_16 .grid_13,
+  .container_12 .grid_14,
+  .container_16 .grid_14,
+  .container_12 .grid_15,
+  .container_16 .grid_15,
+  .container_12 .grid_16,
+  .container_16 .grid_16 {
+    margin: 0;
+    width: 300px;
+  }
+
+  .container_12 .prefix_1,
+  .container_16 .prefix_1,
+  .container_12 .prefix_2,
+  .container_16 .prefix_2,
+  .container_12 .prefix_3,
+  .container_16 .prefix_3,
+  .container_12 .prefix_4,
+  .container_16 .prefix_4,
+  .container_12 .prefix_5,
+  .container_16 .prefix_5,
+  .container_12 .prefix_6,
+  .container_16 .prefix_6,
+  .container_12 .prefix_7,
+  .container_16 .prefix_7,
+  .container_12 .prefix_8,
+  .container_16 .prefix_8,
+  .container_12 .prefix_9,
+  .container_16 .prefix_9,
+  .container_12 .prefix_10,
+  .container_16 .prefix_10,
+  .container_12 .prefix_11,
+  .container_16 .prefix_11,
+  .container_12 .prefix_12,
+  .container_16 .prefix_12,
+  .container_12 .prefix_13,
+  .container_16 .prefix_13,
+  .container_12 .prefix_14,
+  .container_16 .prefix_14,
+  .container_12 .prefix_15,
+  .container_16 .prefix_15 {
+    padding-left: 0;
+  }
+
+  .container_12 .suffix_1,
+  .container_16 .suffix_1,
+  .container_12 .suffix_2,
+  .container_16 .suffix_2,
+  .container_12 .suffix_3,
+  .container_16 .suffix_3,
+  .container_12 .suffix_4,
+  .container_16 .suffix_4,
+  .container_12 .suffix_5,
+  .container_16 .suffix_5,
+  .container_12 .suffix_6,
+  .container_16 .suffix_6,
+  .container_12 .suffix_7,
+  .container_16 .suffix_7,
+  .container_12 .suffix_8,
+  .container_16 .suffix_8,
+  .container_12 .suffix_9,
+  .container_16 .suffix_9,
+  .container_12 .suffix_10,
+  .container_16 .suffix_10,
+  .container_12 .suffix_11,
+  .container_16 .suffix_11,
+  .container_12 .suffix_12,
+  .container_16 .suffix_12,
+  .container_12 .suffix_13,
+  .container_16 .suffix_13,
+  .container_12 .suffix_14,
+  .container_16 .suffix_14,
+  .container_12 .suffix_15,
+  .container_16 .suffix_15 {
+    padding-right: 0;
+  }
+
+  .container_12 .push_1,
+  .container_16 .push_1,
+  .container_12 .push_2,
+  .container_16 .push_2,
+  .container_12 .push_3,
+  .container_16 .push_3,
+  .container_12 .push_4,
+  .container_16 .push_4,
+  .container_12 .push_5,
+  .container_16 .push_5,
+  .container_12 .push_6,
+  .container_16 .push_6,
+  .container_12 .push_7,
+  .container_16 .push_7,
+  .container_12 .push_8,
+  .container_16 .push_8,
+  .container_12 .push_9,
+  .container_16 .push_9,
+  .container_12 .push_10,
+  .container_16 .push_10,
+  .container_12 .push_11,
+  .container_16 .push_11,
+  .container_12 .push_12,
+  .container_16 .push_12,
+  .container_12 .push_13,
+  .container_16 .push_13,
+  .container_12 .push_14,
+  .container_16 .push_14,
+  .container_12 .push_15,
+  .container_16 .push_15,
+  .container_12 .pull_1,
+  .container_16 .pull_1,
+  .container_12 .pull_2,
+  .container_16 .pull_2,
+  .container_12 .pull_3,
+  .container_16 .pull_3,
+  .container_12 .pull_4,
+  .container_16 .pull_4,
+  .container_12 .pull_5,
+  .container_16 .pull_5,
+  .container_12 .pull_6,
+  .container_16 .pull_6,
+  .container_12 .pull_7,
+  .container_16 .pull_7,
+  .container_12 .pull_8,
+  .container_16 .pull_8,
+  .container_12 .pull_9,
+  .container_16 .pull_9,
+  .container_12 .pull_10,
+  .container_16 .pull_10,
+  .container_12 .pull_11,
+  .container_16 .pull_11,
+  .container_12 .pull_12,
+  .container_16 .pull_12,
+  .container_12 .pull_13,
+  .container_16 .pull_13,
+  .container_12 .pull_14,
+  .container_16 .pull_14,
+  .container_12 .pull_15,
+  .container_16 .pull_15 {
+    left: 0;
+  }
+
+}
+
+/* Mobile Landscape Width to Tablet Portrait Width */
+@media only screen and (min-width: 480px) and (max-width: 767px) {
+
+  body {
+    min-width: 480px;
+  }
+
+  .container_12,
+  .container_16 {
+    width: 420px;
+  }
+
+  .container_12 .grid_1,
+  .container_16 .grid_1,
+  .container_12 .grid_2,
+  .container_16 .grid_2,
+  .container_12 .grid_3,
+  .container_16 .grid_3,
+  .container_12 .grid_4,
+  .container_16 .grid_4,
+  .container_12 .grid_5,
+  .container_16 .grid_5,
+  .container_12 .grid_6,
+  .container_16 .grid_6,
+  .container_12 .grid_7,
+  .container_16 .grid_7,
+  .container_12 .grid_8,
+  .container_16 .grid_8,
+  .container_12 .grid_9,
+  .container_16 .grid_9,
+  .container_12 .grid_10,
+  .container_16 .grid_10,
+  .container_12 .grid_11,
+  .container_16 .grid_11,
+  .container_12 .grid_12,
+  .container_16 .grid_12,
+  .container_12 .grid_13,
+  .container_16 .grid_13,
+  .container_12 .grid_14,
+  .container_16 .grid_14,
+  .container_12 .grid_15,
+  .container_16 .grid_15,
+  .container_12 .grid_16,
+  .container_16 .grid_16 {
+    margin: 0;
+    width: 420px;
+  }
+
+}
diff --git a/assets/less/960_12_col.less b/assets/less/960_12_col.less
new file mode 100755
index 0000000..7dc6fe6
--- /dev/null
+++ b/assets/less/960_12_col.less
@@ -0,0 +1 @@
+body{min-width:960px}.container_12{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;margin-left:10px;margin-right:10px}.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11{position:relative}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_3{width:220px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_6{width:460px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_9{width:700px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_12 .grid_12{width:940px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_3{padding-left:240px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_6{padding-left:480px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_9{padding-left:720px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_3{padding-right:240px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_6{padding-right:480px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_9{padding-right:720px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_3{left:240px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_6{left:480px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_9{left:720px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_3{left:-240px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_6{left:-480px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_9{left:-720px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:before,.clearfix:after,.container_12:before,.container_12:after{content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0}.clearfix:after,.container_12:after{clear:both}.clearfix,.container_12{zoom:1}
\ No newline at end of file
diff --git a/assets/less/global.less b/assets/less/global.less
new file mode 100644
index 0000000..c7b2aab
--- /dev/null
+++ b/assets/less/global.less
@@ -0,0 +1,53 @@
+@base03  :  #002b36;
+@base02  :  #073642;
+@base01  :  #586e75;
+@base00  :  #657b83;
+@base0   :  #839496;
+@base1   :  #93a1a1;
+@base2   :  #eee8d5;
+@base3   :  #fdf6e3;
+@yellow  :  #b58900;
+@orange  :  #cb4b16;
+@red     :  #dc322f;
+@magenta :  #d33682;
+@violet  :  #6c71c4;
+@blue    :  #268bd2;
+@cyan    :  #2aa198;
+@green   :  #859900;
+
+// Mixin to deal with cross-browser transitions
+.transition (@param, @time, @type) {
+    -webkit-transition: @param @time @type;
+    -moz-transition: @param @time @type;
+    -o-transition: @param @time @type;
+    -ms-transition: @param @time @type;
+    transition: @param @time @type;
+}
+
+.nav_button(@c) {
+    background-color: @c;
+    border-color: @c;
+    .transition(all, 0.25s, linear);
+    &:hover {
+        background-color: darken(@c, 15%);
+        border-color: darken(@c, 15%);
+    }
+}
+
+// Sprites
+.sprite-email{ background-position: 0 0; width: 64px; height: 64px; } 
+.sprite-email_grey{ background-position: 0 -114px; width: 64px; height: 64px; } 
+.sprite-facebook{ background-position: 0 -228px; width: 64px; height: 64px; } 
+.sprite-facebook_grey{ background-position: 0 -342px; width: 64px; height: 64px; } 
+.sprite-googleplus{ background-position: 0 -456px; width: 64px; height: 64px; } 
+.sprite-googleplus_grey{ background-position: 0 -570px; width: 64px; height: 64px; } 
+.sprite-pinterest{ background-position: 0 -684px; width: 64px; height: 64px; } 
+.sprite-pinterest_grey{ background-position: 0 -798px; width: 64px; height: 64px; } 
+.sprite-reddit{ background-position: 0 -912px; width: 64px; height: 64px; } 
+.sprite-reddit_grey{ background-position: 0 -1026px; width: 64px; height: 64px; } 
+.sprite-rss{ background-position: 0 -1140px; width: 64px; height: 64px; } 
+.sprite-rss_grey{ background-position: 0 -1254px; width: 64px; height: 64px; } 
+.sprite-stumbleupon{ background-position: 0 -1368px; width: 64px; height: 64px; } 
+.sprite-stumbleupon_grey{ background-position: 0 -1482px; width: 64px; height: 64px; } 
+.sprite-twitter{ background-position: 0 -1596px; width: 64px; height: 64px; } 
+.sprite-twitter_grey{ background-position: 0 -1710px; width: 64px; height: 64px; } 
diff --git a/assets/less/normalize.less b/assets/less/normalize.less
new file mode 100644
index 0000000..3179e49
--- /dev/null
+++ b/assets/less/normalize.less
@@ -0,0 +1,406 @@
+/* normalize.css v2.1.3 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9.
+ * Hide the `template` element in IE, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+    background: transparent;
+}
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+
+img {
+    border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
diff --git a/assets/less/style.less b/assets/less/style.less
new file mode 100644
index 0000000..0500bfd
--- /dev/null
+++ b/assets/less/style.less
@@ -0,0 +1,142 @@
+@import "normalize";
+@import "global";
+@import "960_12_col";
+@import "960-responsive";
+@import "syntax";
+
+* {
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    font-family: 'minion-pro', serif;
+    font-size: 22px;
+    color: @base03;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'myriad-pro', sans-serif;
+    font-weight: 600;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+a {
+    color: @red;
+    text-decoration: none;
+    .transition(color, 0.25s, linear);
+
+    &:hover {
+        color: darken(@red, 15%);
+    }
+}
+
+footer {
+    font-family: 'myriad-pro', sans-serif;
+    text-align: center;
+    padding-top: 2em;
+    padding-bottom: 2em;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-weight: 600;
+    font-size: 0.8em;
+    color: @base1;
+}
+
+header {
+
+    font-family: 'myriad-pro', sans-serif;
+
+    a {
+        font-size: 1em;
+        font-weight: 600;
+        color: rgb(255, 255, 255);
+        display: block;
+        text-align: center;
+        padding-top: 0.5em;
+        padding-bottom: 0.5em;
+
+        &:hover {
+            color: rgb(255, 255, 255);
+        }
+    }
+
+    .projects {
+        .nav_button(@green);
+    }
+
+    .writing {
+        .nav_button(@orange);
+    }
+
+    .github {
+        .nav_button(@blue);
+    }
+
+    .resume {
+        .nav_button(@magenta);
+    }
+}
+
+.about {
+    text-align: center;
+}
+
+.portrait {
+    border-radius: 220px;
+    width: 220px;
+    height: 220px;
+    margin-top: 2em;
+    margin-left: auto;
+    margin-right: auto;
+    background-image: url('/assets/images/ben_circle.png');
+    background-repeat: no-repeat;
+}
+
+.project h1 a {
+    color: @green;
+    &:hover {
+        color: darken(@green, 15%);
+    }
+}
+
+.writing h1 a {
+    color: @orange;
+    &:hover {
+        color: darken(@orange, 15%);
+    }
+}
+
+.doc_detail {
+
+    .date {
+        color: @base1;
+        margin-bottom: 1em;
+    }
+
+    img {
+        max-width: 100%;
+    }
+
+    p {
+        line-height: 1.5em;
+        margin-bottom: 1.5em;
+    }
+
+    ul {
+        margin-left: 2em;
+        list-style-type: square;
+        margin-bottom: 1em;
+    }
+
+    code {
+        font-family: 'source-code-pro';
+        font-size: 0.7em;
+        color: @base01;
+        background-color: @base3;
+        border: 1px solid @base2;
+        border-radius: 2px;
+        padding: 0 3px;
+    }
+}
diff --git a/assets/less/syntax.less b/assets/less/syntax.less
new file mode 100644
index 0000000..2774b76
--- /dev/null
+++ b/assets/less/syntax.less
@@ -0,0 +1,60 @@
+.highlight  { background: #ffffff; }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { font-weight: bold } /* Keyword */
+.highlight .o { font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d14 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d14 } /* Literal.String.Backtick */
+.highlight .sc { color: #d14 } /* Literal.String.Char */
+.highlight .sd { color: #d14 } /* Literal.String.Doc */
+.highlight .s2 { color: #d14 } /* Literal.String.Double */
+.highlight .se { color: #d14 } /* Literal.String.Escape */
+.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
+.highlight .si { color: #d14 } /* Literal.String.Interpol */
+.highlight .sx { color: #d14 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d14 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */