update to use latest version of bootstrap, docs cleanup, etc

8 files changed, 298 insertions, 256 deletions

diff --git a/lib/baseline.less b/lib/baseline.less
deleted file mode 100644
index cfcfe9ed9..000000000
--- a/lib/baseline.less
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
-  Master Stylesheet
-  This file is only for importing all required stylesheets for LESS to include and then compile.
-*/
-
-// CSS Reset
-@import "reset.less";
-
-// Core
-@import "bootstrap.less";
-@import "scaffolding.less";
-
-// Styled patterns and elements
-@import "type.less";
-@import "forms.less";
-@import "tables.less";
-@import "patterns.less";
\ No newline at end of file
diff --git a/lib/bootstrap.less b/lib/bootstrap.less
index bd9dbcf46..ddf5582d5 100644
--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -1,211 +1,17 @@
 /*
-  Bootstrap v1.1
-  Variables and mixins to bootstrap any new web development project. Modified from original version for Twitter.
+  Master Stylesheet
+  This file is only for importing all required stylesheets for LESS to include and then compile.
 */
 
+// CSS Reset
+@import "reset.less";
 
-/* Variables
--------------------------------------------------- */
+// Core
+@import "preboot.less";
+@import "scaffolding.less";
 
-// Links
-@link-color:        #0069d6;
-@link-hover-color:  darken(@link-color, 10);
-
-// Grays
-@white:             #fff;
-@gray-lighter:      #ccc;
-@gray-light:        #777;
-@gray:              #555;
-@gray-dark:         #333;
-@black:             #000;
-
-// Accent Colors
-@blue:              #08b5fb;
-@blue-dark:         #0069d6;
-@green:             #46a546;
-@red:               #9d261d;
-@yellow:            #ffc40d;
-@orange:            #f89406;
-@pink:              #c3325f;
-@purple:            #7a43b6;
-
-// Baseline grid
-@baseline:          20px;
-
-// Griditude
-@grid_columns:        16;
-@grid_column_width:   40px;
-@grid_gutter_width:   20px;
-@site_width:          (@grid_columns * @grid_column_width) + (@grid_gutter_width * (@grid_columns - 1));
-
-
-/* Mixins
--------------------------------------------------- */
-
-// Clearfix for clearing floats like a boss
-.clearfix {
-  zoom: 1;
-	&:after {
-    display: block;
-    visibility: hidden;
-    height: 0;
-    clear: both;
-    content: ".";
-	}
-}
-
-// Floats
-.right {
-  float: right;
-}
-.left {
-  float: left;
-}
-
-// Input placeholder text
-.placeholder(@color: @gray-light) {
-  :-moz-placeholder {
-    color: @color;
-  }
-  ::-webkit-input-placeholder {
-    color: @color;
-  }
-}
-
-// Font Stacks
-.font(@weight: normal, @size: 14px, @lineheight: 20px) {
-  font-size: @size;
-  font-weight: @weight;
-  line-height: @lineheight;
-}
-.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: @size;
-  font-weight: @weight;
-  line-height: @lineheight;
-}
-.serif(@weight: normal, @size: 14px, @lineheight: 20px) {
-  font-family: "Georgia", Times New Roman, Times, sans-serif;
-  font-size: @size;
-  font-weight: @weight;
-  line-height: @lineheight;
-}
-.monospace(@weight: normal, @size: 12px, @lineheight: 20px) {
-  font-family: "Monaco", Courier New, monospace;
-  font-size: @size;
-  font-weight: @weight;
-  line-height: @lineheight;
-}
-
-// Grid System
-.container {
-  width: @site_width;
-  margin: 0 auto;
-}
-.columns(@column_span: 1) {
-  display: inline;
-  float: left;
-  width: (@grid_column_width * @column_span) + (@grid_gutter_width * (@column_span - 1));
-  margin-left: @grid_gutter_width;
-  &:first-child {
-    margin-left: 0;
-  }
-}
-.offset(@column_offset: 1) {
-  margin-left: (@grid_column_width * @column_offset) + (@grid_gutter_width * (@column_offset - 1)) !important;
-}
-
-// Border Radius
-.border-radius(@radius: 5px) {
-  -moz-border-radius: @radius;
-  border-radius: @radius;
-}
-
-// Drop shadows
-.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-  -webkit-box-shadow: @shadow;
-  -moz-box-shadow: @shadow;
-  box-shadow: @shadow;
-}
-
-// Transitions
-.transition(@transition) {
-	-webkit-transition: @transition;
-	-moz-transition: @transition;
-	transition: @transition;
-}
-
-// CSS3 Content Columns
-.content-columns(@column_count, @column_gap: 20px) {
-	-webkit-column-count: @count;
-	-webkit-column-gap: @gap;
-	-moz-column-count: @count;
-	-moz-column-gap: @gap;
-	column-count: @count;
-	column-gap: @gap;
-}
-
-// Buttons
-.button(@color: #f9f9f9, @padding: 4px 14px, @text_color: #555, @text_shadow: 0 1px 0 rgba(255,255,255,.75), @font_size: 13px, @border_color: rgba(0,0,0,.1), @rounded: 4px) {
-  display: inline-block;
-  #gradient > .vertical-three-colors(@color, @color, 0.25, darken(@color, 10%));
-  padding: @padding;
-  text-shadow: @text_shadow;
-  color: @text_color;
-  line-height: @baseline;
-  border: 1px solid @border_color;
-  border-bottom-color: fadein(@border_color, 15%);
-  .border-radius(@rounded);
-  @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.1);
-  .box-shadow(@shadow);
-  cursor: pointer;
-  &:hover {
-    background-position: 0 -15px;
-    color: darken(@text_color, 10%);
-    text-decoration: none;
-  }
-}
-
-// Add an alphatransparency value to any background or border color (via Elyse Holladay)
-#translucent {
-  .background(@color: @white, @alpha: 1) {
-    background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
-	}
-	.border(@color: @white, @alpha: 1) {
-		border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
-		background-clip: padding-box;
-	}
-}
-
-// Gradients
-#gradient {
-  .horizontal(@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background-repeat: no-repeat;
-    background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
-    background-image: -webkit-linear-gradient(right center, @startColor, @endColor);
-    background-image: -moz-linear-gradient(right center, @startColor, @endColor);
-    background-image: -o-linear-gradient(left,  @startColor,  @endColor);
-    background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor));
-    filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=1)",@startColor,@endColor));
-    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=1))",@startColor,@endColor);
-  }
-  .vertical(@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background-repeat: no-repeat;
-    background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
-    background-image: -webkit-linear-gradient(@startColor, @endColor);
-    background-image: -moz-linear-gradient(@startColor, @endColor);
-    background-image: -o-linear-gradient(top,  @startColor,  @endColor);
-    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
-    filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=0)",@startColor,@endColor));
-    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=0))",@startColor,@endColor);
-  }
-  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
-    background-color: @endColor;
-    background-repeat: no-repeat;
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
-    background-image: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor);
-    background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
-  }
-}
+// Styled patterns and elements
+@import "type.less";
+@import "forms.less";
+@import "tables.less";
+@import "patterns.less";
\ No newline at end of file
diff --git a/lib/forms.less b/lib/forms.less
index 59dae9241..3718b2f73 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -18,7 +18,7 @@ form {
       margin-left: 150px;
       font-size: 20px;
       line-height: 1;
-      color: @gray-dark;
+      color: @grayDark;
     }
   }
   // Parent element that clears floats and wraps labels and fields together
@@ -27,7 +27,7 @@ form {
   }
   // Set font for forms
   label, input, select, textarea {
-    .sans-serif(normal,13px,normal);
+    #font > .sans-serif(normal,13px,normal);
   }
   // Float labels left
   label {
@@ -177,7 +177,7 @@ div.actions {
 .help-block {
   font-size: 12px;
   line-height: @baseline;
-  color: @gray-light;
+  color: @grayLight;
 }
 .help-inline {
   padding-left: 5px;
@@ -196,7 +196,7 @@ div.actions {
     margin-bottom: 0;
     font-size: 12px;
     line-height: @baseline;
-    color: @gray-light;
+    color: @grayLight;
   }
   ol {
     margin-bottom: 10px;
@@ -234,7 +234,7 @@ div.input-append {
     width: auto;
     min-width: 16px;
     padding: 5px 4px 5px 5px;
-    color: @gray-light;
+    color: @grayLight;
     font-weight: normal;
     line-height: 18px;
     height: 18px;
diff --git a/lib/patterns.less b/lib/patterns.less
index ddad5271d..e02fbd0b4 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -36,7 +36,7 @@ div.topbar {
   a.logo {
     margin-left: -10px;
     margin-right: 10px;
-    color: @gray-light;
+    color: @grayLight;
     font-size: 20px;
     font-weight: 200;
     img {
@@ -77,7 +77,7 @@ div.topbar {
   .box-shadow(@shadow);
   // Links get text shadow
   a {
-    color: @gray-light;
+    color: @grayLight;
     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
     .transition(all linear .1s);
   }
@@ -113,9 +113,9 @@ div.topbar {
     opacity: 1;
     position: relative;
     input {
-      background-color: @gray-light;
+      background-color: @grayLight;
       background-color: rgba(255,255,255,.3);
-      .sans-serif(13px, normal, 1);
+      #font > .sans-serif(13px, normal, 1);
       width: 220px;
       padding: 4px 9px;
       color: #fff;
@@ -127,10 +127,10 @@ div.topbar {
       .transition(none);
       // Placeholder text gets special styles; can't be bundled together though for some reason
       &:-moz-placeholder {
-        color: @gray-lighter;
+        color: @grayLighter;
       }
       &::-webkit-input-placeholder {
-        color: @gray-lighter;
+        color: @grayLighter;
       }
       &:hover {
         background-color: #444;
@@ -141,7 +141,7 @@ div.topbar {
       &.focused {
         outline: none;
         background-color: #fff;
-        color: @gray-dark;
+        color: @grayDark;
         text-shadow: 0 1px 0 #fff;
         border: 0;
         padding: 5px 10px;
@@ -315,7 +315,7 @@ div.page-header {
 // One-liner alert bars
 div.alert-message {
   #gradient > .vertical(transparent, rgba(0,0,0,0.15));
-  background-color: @gray-lighter;
+  background-color: @grayLighter;
   margin-bottom: @baseline;
   padding: 10px 15px 9px;
   .border-radius(6px);
@@ -457,14 +457,14 @@ ul.pills {
       line-height: 30px;
       .border-radius(15px);
       &:hover {
-        background: @link-hover-color;
+        background: @linkColorHover;
         color: #fff;
         text-decoration: none;
         text-shadow: 0 1px 1px rgba(0,0,0,.25);
       }
     }
     &.active a {
-      background: @link-color;
+      background: @linkColor;
       color: #fff;
       text-shadow: 0 1px 1px rgba(0,0,0,.25);
     }
@@ -501,7 +501,7 @@ div.pagination {
       &.disabled a,
       &.disabled a:hover {
         background-color: none;
-        color: @gray-light;
+        color: @grayLight;
       }
       &.next a,
       &:last-child a {
diff --git a/lib/preboot.less b/lib/preboot.less
new file mode 100644
index 000000000..70ac9265c
--- /dev/null
+++ b/lib/preboot.less
@@ -0,0 +1,255 @@
+/*
+  Preboot
+  Variables and mixins to pre-ignite any new web development project
+*/
+
+
+/* Variables
+-------------------------------------------------- */
+
+// Links
+@linkColor:         #08b5fb;
+@linkColorHover:    darken(@linkColor, 10);
+
+// Grays
+@black:             #000;
+@grayDark:          lighten(@black, 25%);
+@gray:              lighten(@black, 50%);
+@grayLight:         lighten(@black, 70%);
+@grayLighter:       lighten(@black, 90%);
+@white:             #fff;
+
+// Accent Colors
+@blue:              #08b5fb;
+@green:             #46a546;
+@red:               #9d261d;
+@yellow:            #ffc40d;
+@orange:            #f89406;
+@pink:              #c3325f;
+@purple:            #7a43b6;
+
+// Baseline grid
+@baseline:          20px;
+
+// Griditude
+@gridColumns:       16;
+@gridColumnWidth:   40px;
+@gridGutterWidth:   20px;
+@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+
+/* Color Scheme
+-------------------------------------------------- */
+
+@baseColor:        @blue;                  // Set a base color
+@complement:       spin(@baseColor, 180);  // Determine a complementary color
+@split1:           spin(@baseColor, 158);  // Split complements
+@split2:           spin(@baseColor, -158);
+@triad1:           spin(@baseColor, 135);  // Triads colors
+@triad2:           spin(@baseColor, -135);
+@tetra1:           spin(@baseColor, 90);   // Tetra colors
+@tetra2:           spin(@baseColor, -90);
+@analog1:          spin(@baseColor, 22);   // Analogs colors
+@analog2:          spin(@baseColor, -22);
+
+
+/* Mixins
+-------------------------------------------------- */
+
+// Clearfix for clearing floats like a boss
+.clearfix {
+  zoom: 1;
+	&:after {
+    display: block;
+    visibility: hidden;
+    height: 0;
+    clear: both;
+    content: ".";
+	}
+}
+
+// Center-align a block level element
+.center-block { 
+	display: block;
+  margin: 0 auto;
+}
+
+// Sizing shortcuts
+.size(@height: 5px, @width: 5px) {
+	height: @height;
+	width: @width;
+}
+.square(@size: 5px) {
+	.size(@size, @size);
+}
+
+// Input placeholder text
+.placeholder(@color: @grayLight) {
+  :-moz-placeholder {
+    color: @color;
+  }
+  ::-webkit-input-placeholder {
+    color: @color;
+  }
+}
+
+// Font Stacks
+#font {
+  .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
+    font-size: @size;
+    font-weight: @weight;
+    line-height: @lineHeight;
+  }
+  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: @size;
+    font-weight: @weight;
+    line-height: @lineHeight;
+  }
+  .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+    font-family: "Georgia", Times New Roman, Times, sans-serif;
+    font-size: @size;
+    font-weight: @weight;
+    line-height: @lineHeight;
+  }
+  .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
+    font-family: "Monaco", Courier New, monospace;
+    font-size: @size;
+    font-weight: @weight;
+    line-height: @lineHeight;
+  }
+}
+
+// Grid System
+.container {
+  width: @siteWidth;
+  margin: 0 auto;
+  .clearfix();
+}
+.columns(@columnSpan: 1) {
+  display: inline;
+  float: left;
+  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+  margin-left: @gridGutterWidth;
+  &:first-child {
+    margin-left: 0;
+  }
+}
+.offset(@columnOffset: 1) {
+  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important;
+}
+
+// Border Radius
+.border-radius(@radius: 5px) {
+  -webkit-border-radius: @radius;
+  -moz-border-radius: @radius;
+  border-radius: @radius;
+}
+
+// Drop shadows
+.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
+  -webkit-box-shadow: @shadow;
+  -moz-box-shadow: @shadow;
+  box-shadow: @shadow;
+}
+
+// Transitions
+.transition(@transition) {
+	-webkit-transition: @transition;
+	-moz-transition: @transition;
+	transition: @transition;
+}
+
+// CSS3 Content Columns
+.content-columns(@columnCount, @columnGap: 20px) {
+	-webkit-column-count: @columnCount;
+	-webkit-column-gap: @columnGap;
+	-moz-column-count: @columnCount;
+	-moz-column-gap: @columnGap;
+	column-count: @columnCount;
+	column-gap: @columnGap;
+}
+
+// Buttons
+.button(@color: #f5f5f5, @textColor: #333, @textShadow: 0 1px 1px rgba(255,255,255,.75), @fontSize: 13px, @padding: 9px 15px 10px, @borderRadius: 6px) {
+  display: inline-block;
+  #gradient > .vertical(@color,darken(saturate(@color,10),10));
+  padding: @padding;
+  text-shadow: @textShadow;
+  color: @textColor;
+  font-size: @fontSize;
+  line-height: 20px;
+  .border-radius(@borderRadius);
+  @shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.25);
+  .box-shadow(@shadow);
+  &:hover {
+    background-position: 0 -15px;
+    color: @textColor;
+    text-decoration: none;
+  }
+}
+
+// Add an alphatransparency value to any background or border color (via Elyse Holladay)
+#translucent {
+  .background(@color: @white, @alpha: 1) {
+    background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+	}
+	.border(@color: @white, @alpha: 1) {
+		border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+		background-clip: padding-box;
+	}
+}
+
+// Gradients
+#gradient {
+  .horizontal (@startColor: #555, @endColor: #333) {
+    background-color: @endColor;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
+    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
+    background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
+    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); /* IE6 & IE7 */
+    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); /* IE8+ */
+    background-image: linear-gradient(left, @startColor, @endColor); // Le standard
+  }
+  .vertical (@startColor: #555, @endColor: #333) {
+    background-color: @endColor;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); /* Konqueror */
+    background-image: -moz-linear-gradient(@startColor, @endColor); /* FF 3.6+ */
+    background-image: -ms-linear-gradient(@startColor, @endColor); /* IE10 */
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); /* Safari 4+, Chrome 2+ */
+    background-image: -webkit-linear-gradient(@startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
+    background-image: -o-linear-gradient(@startColor, @endColor); /* Opera 11.10 */
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); /* IE6 & IE7 */
+    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); /* IE8+ */
+    background-image: linear-gradient(@startColor, @endColor); /* the standard */
+  }
+  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
+    background-color: @endColor;
+    background-repeat: repeat-x;
+    background-image: -moz-linear-gradient(@deg, @startColor, @endColor); /* FF 3.6+ */
+    background-image: -ms-linear-gradient(@deg, @startColor, @endColor); /* IE10 */
+    background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
+    background-image: -o-linear-gradient(@deg, @startColor, @endColor); /* Opera 11.10 */
+    background-image: linear-gradient(@deg, @startColor, @endColor); /* the standard */
+  }
+  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
+    background-color: @endColor;
+    background-repeat: no-repeat;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
+    background-image: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor);
+    background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
+  }
+}
+
+// Opacity
+.opacity(@opacity: 100) {
+	filter: e(%("alpha(opacity=%d)", @opacity));
+	-khtml-opacity: @opacity / 100;
+	-moz-opacity: @opacity / 100;
+	opacity: @opacity / 100;
+}
\ No newline at end of file
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index fc920ab3a..eb787fe59 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -35,10 +35,9 @@ html, body {
 }
 body {
   margin: 0;
-  .sans-serif(normal,14px,20px);
+  #font > .sans-serif(normal,14px,20px);
   color: @gray;
   text-rendering: optimizeLegibility;
-  .box-shadow(inset 0 1px 0 #fff);
 }
 
 // Container (centered, fixed-width layouts)
@@ -68,11 +67,11 @@ div.container-fluid {
 
 // Links
 a {
-  color: @link-color;
+  color: @linkColor;
   text-decoration: none;
   line-height: inherit;
   &:hover {
-    color: @link-hover-color;
+    color: @linkColorHover;
     text-decoration: underline;
   }
 }
@@ -81,7 +80,7 @@ a {
 .btn {
   .button();
   &.primary {
-    #gradient > .vertical(@blue, @blue-dark);
+    #gradient > .vertical(@blue, darken(@blue, 15));
     color: #fff;
     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
     &:hover {
diff --git a/lib/tables.less b/lib/tables.less
index 4f9098ce5..d0b68db9c 100644
--- a/lib/tables.less
+++ b/lib/tables.less
@@ -13,7 +13,6 @@ table {
   text-align: left;
   border-collapse: separate;
   th, td {
-    // #translucent > .background(@green, .15);
     padding: 10px 10px 9px;
     line-height: @baseline;
     vertical-align: middle;
@@ -51,8 +50,8 @@ table.zebra-striped {
     background-position: right -23px;
     background-repeat: no-repeat;
     background-color: rgba(141,192,219,.25);
-    .border-radius(3px 3px 0 0);
     text-shadow: 0 1px 1px rgba(255,255,255,.75);
+    .border-radius(3px 3px 0 0);
   }
   th.header:hover { // Style the ascending (reverse alphabetical) column header
     background-image: url(assets/img/tablesorter-indicators.png);
diff --git a/lib/type.less b/lib/type.less
index cc1f0826a..9be433ade 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -8,11 +8,11 @@
 -------------------------------------------------- */
 
 p {
-  .font(normal,14px,@baseline);
+  #font > .shorthand(normal,14px,@baseline);
   margin-bottom: @baseline;
   small {
     font-size: 12px;
-    color: @gray-light;
+    color: @grayLight;
   }
 }
 
@@ -22,9 +22,9 @@ p {
 
 h1, h2, h3, h4, h5, h6 {
   font-weight: 500;
-  color: @gray-dark;
+  color: @grayDark;
   small {
-    color: @gray-light;
+    color: @grayLight;
   }
 }
 h1 {
@@ -62,7 +62,7 @@ h5 {
 }
 h6 {
   font-size: 13px;
-  color: @gray-light;
+  color: @grayLight;
   text-transform: uppercase;
 }
 
@@ -167,7 +167,7 @@ em {
   line-height: inherit;
 }
 .muted {
-  color: @gray-lighter;
+  color: @grayLighter;
 }
 
 // Blockquotes
@@ -176,13 +176,13 @@ blockquote {
   border-left: 5px solid #eee;
   padding-left: 15px;
   p {
-    .font(300,14px,@baseline);
+    #font > .shorthand(300,14px,@baseline);
     margin-bottom: 0;
   }
   cite {
     display: block;
-    .font(300,12px,@baseline);
-    color: @gray-light;
+    #font > .shorthand(300,12px,@baseline);
+    color: @grayLight;
     &:before {
       content: '\2014 \00A0';
     }
@@ -236,7 +236,7 @@ pre ol {
     border-left-color: lighten(@orange, 35%);
     font-size: 11px;
     line-height: @baseline;
-    color: @gray-light;
+    color: @grayLight;
     text-shadow: 0 1px 1px rgba(255,255,255,.5);
     word-wrap: break-word;
     &:hover {