fix broken index page heading, update variables and less pages

9 files changed, 480 insertions, 385 deletions

diff --git a/bootstrap.css b/bootstrap.css
index fb3a3f2ab..a33bd7312 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Tue Jan 24 13:58:10 PST 2012
+ * Date: Tue Jan 24 16:01:37 PST 2012
  */
 article,
 aside,
@@ -411,15 +411,18 @@ address {
 code, pre {
   padding: 0 3px 2px;
   font-family: Menlo, Monaco, "Courier New", monospace;
-  font-size: 12px;
+  font-size: 11px;
   color: #333333;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
 code {
-  padding: 1px 3px;
+  padding: 3px 4px;
   background-color: #fee9cc;
+  color: #d14;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
 }
 pre {
   display: block;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index f0412c724..bf98b8c57 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -82,8 +82,8 @@ blockquote small{display:block;line-height:18px;color:#999999;}blockquote small:
 blockquote.pull-right{float:right;padding-left:0;padding-right:15px;border-left:0;border-right:5px solid #eeeeee;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
 q:before,q:after,blockquote:before,blockquote:after{content:"";}
 address{display:block;margin-bottom:18px;line-height:18px;font-style:normal;}
-code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
-code{padding:1px 3px;background-color:#fee9cc;}
+code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:11px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+code{padding:3px 4px;background-color:#fee9cc;color:#d14;background-color:#f7f7f9;border:1px solid #e1e1e8;}
 pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;}
 pre code{padding:0;background-color:transparent;}
 small{font-size:100%;}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index b8d5bfcdc..d78cea2b1 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -126,7 +126,6 @@ section {
 
 /* Subnav */
 .subhead .nav {
-  padding: 0 10px;
   background-color: #eeeeee; /* Old browsers */
   background-repeat: repeat-x; /* Repeat the gradient */
   background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
@@ -136,7 +135,7 @@ section {
   background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
   background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
-  border: 1px solid #eee;
+  border: 1px solid #e5e5e5;
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
           border-radius: 4px;
@@ -145,6 +144,9 @@ section {
   margin: 0;
   padding-top: 11px;
   padding-bottom: 11px;
+  font-size: 13px;
+  border-left: 1px solid #f5f5f5;
+  border-right: 1px solid #e5e5e5;
   -webkit-border-radius: 0;
      -moz-border-radius: 0;
           border-radius: 0;
@@ -153,6 +155,15 @@ section {
   background-color: #fff;
   color: #333;
 }
+.subhead .nav li:first-child a {
+  border-left: 0;
+  -webkit-border-radius: 4px 0 0 4px;
+     -moz-border-radius: 4px 0 0 4px;
+          border-radius: 4px 0 0 4px;
+}
+.subhead .nav li:last-child a {
+  border-right: 0;
+}
 
 
 /* Quick links
@@ -247,16 +258,19 @@ section {
   height: auto;
   margin-left: auto;
   margin-right: auto;
-  line-height: 21px;
+  font-family: Menlo, Monaco, "Courier New", monospace;
+  font-size: 12px;
+  line-height: 20px;
   white-space: nowrap;
   overflow: hidden;
+  background-color: #f5f5f5;
   /* Makes inputs behave like true block-level elements */
   -webkit-box-sizing: border-box; /* Older Webkit */
      -moz-box-sizing: border-box; /* Older FF */
       -ms-box-sizing: border-box; /* IE8 */
           box-sizing: border-box; /* CSS3 spec*/
   /* Hacks for IE7 to make this work just okay enough to function */
-  *width: 270px;
+  *width: 80%;
   *height: 24px;
 }
 
diff --git a/docs/index.html b/docs/index.html
index 0beff1e7e..1e4b4a270 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -136,7 +136,7 @@
             </li>
           </ul>
 
-          <h1Designed for everyone, everywhere.</h1>
+          <h1>Designed for everyone, everywhere.</h1>
           <p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p>
           <div class="row">
             <div class="span4">
diff --git a/docs/less.html b/docs/less.html
index cd486ac98..735bd0dc6 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -63,207 +63,244 @@
       <header class="jumbotron subhead" id="overview">
         <h1>Using LESS with Bootstrap</h1>
         <p class="lead">Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
+        <ul class="nav pills">
+          <li><a href="./less.html#builtWith">Built with Less</a></li>
+          <li><a href="./less.html#variables">Variables</a></li>
+          <li><a href="./less.html#mixins">Mixins</a></li>
+          <li><a href="./less.html#compiling">Compiling Bootstrap</a></li>
+        </ul>
       </header>
 
 
 
       <!-- BUILT WITH LESS
       ================================================== -->
-      <div class="page-header">
-        <h1>Built with LESS</h1>
-      </div>
-      <div class="row">
-        <div class="span4">
-          <h3>Why LESS?</h3>
-          <p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
-        </div>
-        <div class="span4">
-          <h3>What's included?</h3>
-          <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
-        </div>
-        <div class="span4">
-          <h3>Learn more</h3>
-          <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
-          <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
-        </div>
-      </div>
-      <div class="row">
-        <div class="span4">
-          <h3>Variables</h3>
-          <p>Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.</p>
+      <section id="builtWith">
+        <div class="page-header">
+          <h1>Built with LESS</h1>
         </div>
-        <div class="span4">
-          <h3>Mixins</h3>
-          <p>Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.</p>
+        <div class="row">
+          <div class="span4">
+            <h3>Why LESS?</h3>
+            <p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
+          </div>
+          <div class="span4">
+            <h3>What's included?</h3>
+            <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
+          </div>
+          <div class="span4">
+            <h3>Learn more</h3>
+            <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
+            <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
+          </div>
         </div>
-        <div class="span4">
-          <h3>Operations</h3>
-          <p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.</p>
+        <div class="row">
+          <div class="span4">
+            <h3>Variables</h3>
+            <p>Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.</p>
+          </div>
+          <div class="span4">
+            <h3>Mixins</h3>
+            <p>Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.</p>
+          </div>
+          <div class="span4">
+            <h3>Operations</h3>
+            <p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.</p>
+          </div>
         </div>
-      </div>
+      </section>
 
 
 
       <!-- VARIABLES
       ================================================== -->
-      <div class="page-header" id="variables">
-        <h1>Variables <small>from variables.less</small></h1>
-      </div>
-
-          <h3>Hyperlinks</h3>
-          <table class="table table-bordered table-striped">
-            <thead>
-              <tr>
-                <th>Variable</th>
-                <th>Value</th>
-                <th>Usage</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td><code>@linkColor</code></td>
-                <td>#0069d6</td>
-                <td>Default link text color</td>
-              </tr>
-              <tr>
-                <td><code>@linkColorHover</code></td>
-                <td><code>darken(@linkColor, 15)</code></td>
-                <td>Default link text hover color</td>
-              </tr>
-            </tbody>
-          </table>
-
-      <div class="row">
-        <div class="span6">
-          <h3>Grayscale colors</h3>
-          <table class="table table-bordered table-striped">
-            <tbody>
-              <tr>
-                <td><code>@black</code></td>
-                <td>#000</td>
-              </tr>
-              <tr>
-                <td><code>@grayDark</code></td>
-                <td><code>lighten(@black, 25%)</code></td>
-              </tr>
-              <tr>
-                <td><code>@gray</code></td>
-                <td><code>lighten(@black, 50%)</code></td>
-              </tr>
-              <tr>
-                <td><code>@grayLight</code></td>
-                <td><code>lighten(@black, 75%)</code></td>
-              </tr>
-              <tr>
-                <td><code>@grayLighter</code></td>
-                <td><code>lighten(@black, 90%)</code></td>
-              </tr>
-              <tr>
-                <td><code>@white</code></td>
-                <td>#fff</td>
-              </tr>
-            </tbody>
-          </table>
+      <section id="variables">
+        <div class="page-header">
+          <h1>Variables <small>from variables.less</small></h1>
         </div>
-        <div class="span6">
-          <h3>Accent colors</h3>
-          <table class="table table-bordered table-striped">
-            <tbody>
-              <tr>
-                <td><code>@blue</code></td>
-                <td>#049CDB</td>
-              </tr>
-              <tr>
-                <td><code>@green</code></td>
-                <td>#46a546</td>
-              </tr>
-              <tr>
-                <td><code>@red</code></td>
-                <td>#9d261d</td>
-              </tr>
-              <tr>
-                <td><code>@yellow</code></td>
-                <td>#ffc40d</td>
-              </tr>
-              <tr>
-                <td><code>@orange</code></td>
-                <td>#f89406</td>
-              </tr>
-              <tr>
-                <td><code>@pink</code></td>
-                <td>#c3325f</td>
-              </tr>
-              <tr>
-                <td><code>@purple</code></td>
-                <td>#7a43b6</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
 
-      <div class="row">
-        <div class="span6">
-          <h3>Grid system</h3>
-          <table class="table table-bordered table-striped">
-            <tbody>
-              <tr>
-                <td><code>@gridColumns</code></td>
-                <td>12</td>
-              </tr>
-              <tr>
-                <td><code>@gridColumnWidth</code></td>
-                <td>60px</td>
-              </tr>
-              <tr>
-                <td><code>@gridGutterWidth</code></td>
-                <td>20px</td>
-              </tr>
-              <tr>
-                <td><code>@siteWidth</code></td>
-                <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div class="span6">
-          <h3>Typography</h3>
-          <table class="table table-bordered table-striped">
-            <tbody>
-              <tr>
-                <td><code>@baseFontSize</code></td>
-                <td>13px</td>
-              </tr>
-              <tr>
-                <td><code>@baseFontFamily</code></td>
-                <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
-                <td></td>
-              </tr>
-              <tr>
-                <td><code>@baseLineHeight</code></td>
-                <td>18px</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
+        <h3>Hyperlinks</h3>
+        <table class="table table-bordered table-striped">
+          <thead>
+            <tr>
+              <th class="span2">Variable</th>
+              <th>Value</th>
+              <th>Usage</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>@linkColor</code></td>
+              <td>#08c</td>
+              <td>Default link text color</td>
+            </tr>
+            <tr>
+              <td><code>@linkColorHover</code></td>
+              <td><code>darken(@linkColor, 15%)</code></td>
+              <td>Default link text hover color</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div class="row">
+          <div class="span6">
+            <h3>Grayscale colors</h3>
+            <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">Variable</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>@black</code></td>
+                  <td>#000</td>
+                </tr>
+                <tr>
+                  <td><code>@grayDarker</code></td>
+                  <td><code>#222</code></td>
+                </tr>
+                <tr>
+                  <td><code>@grayDark</code></td>
+                  <td><code>#333</code></td>
+                </tr>
+                <tr>
+                  <td><code>@gray</code></td>
+                  <td><code>#555</code></td>
+                </tr>
+                <tr>
+                  <td><code>@grayLight</code></td>
+                  <td><code>#999</code></td>
+                </tr>
+                <tr>
+                  <td><code>@grayLighter</code></td>
+                  <td><code>#eee</code></td>
+                </tr>
+                <tr>
+                  <td><code>@white</code></td>
+                  <td>#fff</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="span6">
+            <h3>Accent colors</h3>
+            <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">Variable</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>@blue</code></td>
+                  <td>#049cdb</td>
+                </tr>
+                <tr>
+                  <td><code>@green</code></td>
+                  <td>#46a546</td>
+                </tr>
+                <tr>
+                  <td><code>@red</code></td>
+                  <td>#9d261d</td>
+                </tr>
+                <tr>
+                  <td><code>@yellow</code></td>
+                  <td>#ffc40d</td>
+                </tr>
+                <tr>
+                  <td><code>@orange</code></td>
+                  <td>#f89406</td>
+                </tr>
+                <tr>
+                  <td><code>@pink</code></td>
+                  <td>#c3325f</td>
+                </tr>
+                <tr>
+                  <td><code>@purple</code></td>
+                  <td>#7a43b6</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div> <!-- /row -->
+        <div class="row">
+          <div class="span6">
+            <h3>Grid system</h3>
+            <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">Variable</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>@gridColumns</code></td>
+                  <td>12</td>
+                </tr>
+                <tr>
+                  <td><code>@gridColumnWidth</code></td>
+                  <td>60px</td>
+                </tr>
+                <tr>
+                  <td><code>@gridGutterWidth</code></td>
+                  <td>20px</td>
+                </tr>
+                <tr>
+                  <td><code>@siteWidth</code></td>
+                  <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="span6">
+            <h3>Typography</h3>
+            <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">Variable</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>@baseFontSize</code></td>
+                  <td>13px</td>
+                </tr>
+                <tr>
+                  <td><code>@baseFontFamily</code></td>
+                  <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
+                  <td></td>
+                </tr>
+                <tr>
+                  <td><code>@baseLineHeight</code></td>
+                  <td>18px</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div> <!-- /row -->
+        <div class="row">
+          <div class="span3">
+            <h3>Visuals</h3>
+          </div>
+          <div class="span9">
+            <table class="table table-bordered table-striped">
+              <tbody>
+                <tr>
+                  <td><code>@primaryButtonColor</code></td>
+                  <td><code>@blue</code></td>
+                  <td></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div> <!-- /row -->
+      </section>
 
-      <div class="row">
-        <div class="span3">
-          <h3>Visuals</h3>
-        </div>
-        <div class="span9">
-          <table class="table table-bordered table-striped">
-            <tbody>
-              <tr>
-                <td><code>@primaryButtonColor</code></td>
-                <td><code>@blue</code></td>
-                <td></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
 
 
       <!-- MIXINS
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index 7616de4f1..899d721b0 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -76,7 +76,7 @@
             </li>
           </ul>
 
-          <h1{{_i}}Designed for everyone, everywhere.{{/i}}</h1>
+          <h1>{{_i}}Designed for everyone, everywhere.{{/i}}</h1>
           <p class="marketing-byline">{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}</p>
           <div class="row">
             <div class="span4">
diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index d6376ae2f..8adc7874f 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -3,207 +3,244 @@
       <header class="jumbotron subhead" id="overview">
         <h1>{{_i}}Using LESS with Bootstrap{{/i}}</h1>
         <p class="lead">{{_i}}Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}</p>
+        <ul class="nav pills">
+          <li><a href="./less.html#builtWith">{{_i}}Built with Less{{/i}}</a></li>
+          <li><a href="./less.html#variables">{{_i}}Variables{{/i}}</a></li>
+          <li><a href="./less.html#mixins">{{_i}}Mixins{{/i}}</a></li>
+          <li><a href="./less.html#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li>
+        </ul>
       </header>
 
 
 
       <!-- BUILT WITH LESS
       ================================================== -->
-      <div class="page-header">
-        <h1>{{_i}}Built with LESS{{/i}}</h1>
-      </div>
-      <div class="row">
-        <div class="span4">
-          <h3>{{_i}}Why LESS?{{/i}}</h3>
-          <p>{{_i}}Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}</p>
-        </div>
-        <div class="span4">
-          <h3>{{_i}}What's included?{{/i}}</h3>
-          <p>{{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}</p>
-        </div>
-        <div class="span4">
-          <h3>{{_i}}Learn more{{/i}}</h3>
-          <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
-          <p>{{_i}}Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.{{/i}}</p>
-        </div>
-      </div>
-      <div class="row">
-        <div class="span4">
-          <h3>{{_i}}Variables{{/i}}</h3>
-          <p>{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.{{/i}}</p>
+      <section id="builtWith">
+        <div class="page-header">
+          <h1>{{_i}}Built with LESS{{/i}}</h1>
         </div>
-        <div class="span4">
-          <h3>{{_i}}Mixins{{/i}}</h3>
-          <p>{{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}</p>
+        <div class="row">
+          <div class="span4">
+            <h3>{{_i}}Why LESS?{{/i}}</h3>
+            <p>{{_i}}Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}</p>
+          </div>
+          <div class="span4">
+            <h3>{{_i}}What's included?{{/i}}</h3>
+            <p>{{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}</p>
+          </div>
+          <div class="span4">
+            <h3>{{_i}}Learn more{{/i}}</h3>
+            <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
+            <p>{{_i}}Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.{{/i}}</p>
+          </div>
         </div>
-        <div class="span4">
-          <h3>{{_i}}Operations{{/i}}</h3>
-          <p>{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.{{/i}}</p>
+        <div class="row">
+          <div class="span4">
+            <h3>{{_i}}Variables{{/i}}</h3>
+            <p>{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.{{/i}}</p>
+          </div>
+          <div class="span4">
+            <h3>{{_i}}Mixins{{/i}}</h3>
+            <p>{{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}</p>
+          </div>
+          <div class="span4">
+            <h3>{{_i}}Operations{{/i}}</h3>
+            <p>{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.{{/i}}</p>
+          </div>
         </div>
-      </div>
+      </section>
 
 
 
       <!-- VARIABLES
       ================================================== -->
-      <div class="page-header" id="variables">
-        <h1>{{_i}}Variables <small>from variables.less</small>{{/i}}</h1>
-      </div>
-
-          <h3>{{_i}}Hyperlinks{{/i}}</h3>
-          <table class="table table-bordered table-striped">
-            <thead>
-              <tr>
-                <th>{{_i}}Variable{{/i}}</th>
-                <th>{{_i}}Value{{/i}}</th>
-                <th>{{_i}}Usage{{/i}}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td><code>@linkColor</code></td>
-                <td>#0069d6</td>
-                <td>{{_i}}Default link text color{{/i}}</td>
-              </tr>
-              <tr>
-                <td><code>@linkColorHover</code></td>
-                <td><code>darken(@linkColor, 15)</code></td>
-                <td>{{_i}}Default link text hover color{{/i}}</td>
-              </tr>
-            </tbody>
-          </table>
-
-      <div class="row">
-        <div class="span6">
-          <h3>{{_i}}Grayscale colors{{/i}}</h3>
-          <table class="table table-bordered table-striped">
-            <tbody>
-              <tr>
-                <td><code>@black</code></td>
-                <td>#000</td>
-              </tr>
-              <tr>
-                <td><code>@grayDark</code></td>
-                <td><code>lighten(@black, 25%)</code></td>
-              </tr>
-              <tr>
-                <td><code>@gray</code></td>
-                <td><code>lighten(@black, 50%)</code></td>
-              </tr>
-              <tr>
-                <td><code>@grayLight</code></td>
-                <td><code>lighten(@black, 75%)</code></td>
-              </tr>
-              <tr>
-                <td><code>@grayLighter</code></td>
-                <td><code>lighten(@black, 90%)</code></td>
-              </tr>
-              <tr>
-                <td><code>@white</code></td>
-                <td>#fff</td>
-              </tr>
-            </tbody>
-          </table>
+      <section id="variables">
+        <div class="page-header">
+          <h1>{{_i}}Variables <small>from variables.less</small>{{/i}}</h1>
         </div>
-        <div class="span6">
-          <h3>{{_i}}Accent colors{{/i}}</h3>
-          <table class="table table-bordered table-striped">
-            <tbody>
-              <tr>
-                <td><code>@blue</code></td>
-                <td>#049CDB</td>
-              </tr>
-              <tr>
-                <td><code>@green</code></td>
-                <td>#46a546</td>
-              </tr>
-              <tr>
-                <td><code>@red</code></td>
-                <td>#9d261d</td>
-              </tr>
-              <tr>
-                <td><code>@yellow</code></td>
-                <td>#ffc40d</td>
-              </tr>
-              <tr>
-                <td><code>@orange</code></td>
-                <td>#f89406</td>
-              </tr>
-              <tr>
-                <td><code>@pink</code></td>
-                <td>#c3325f</td>
-              </tr>
-              <tr>
-                <td><code>@purple</code></td>
-                <td>#7a43b6</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
 
-      <div class="row">
-        <div class="span6">
-          <h3>{{_i}}Grid system{{/i}}</h3>
-          <table class="table table-bordered table-striped">
-            <tbody>
-              <tr>
-                <td><code>@gridColumns</code></td>
-                <td>12</td>
-              </tr>
-              <tr>
-                <td><code>@gridColumnWidth</code></td>
-                <td>60px</td>
-              </tr>
-              <tr>
-                <td><code>@gridGutterWidth</code></td>
-                <td>20px</td>
-              </tr>
-              <tr>
-                <td><code>@siteWidth</code></td>
-                <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div class="span6">
-          <h3>{{_i}}Typography{{/i}}</h3>
-          <table class="table table-bordered table-striped">
-            <tbody>
-              <tr>
-                <td><code>@baseFontSize</code></td>
-                <td>13px</td>
-              </tr>
-              <tr>
-                <td><code>@baseFontFamily</code></td>
-                <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
-                <td></td>
-              </tr>
-              <tr>
-                <td><code>@baseLineHeight</code></td>
-                <td>18px</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
+        <h3>{{_i}}Hyperlinks{{/i}}</h3>
+        <table class="table table-bordered table-striped">
+          <thead>
+            <tr>
+              <th class="span2">{{_i}}Variable{{/i}}</th>
+              <th>{{_i}}Value{{/i}}</th>
+              <th>{{_i}}Usage{{/i}}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>@linkColor</code></td>
+              <td>#08c</td>
+              <td>{{_i}}Default link text color{{/i}}</td>
+            </tr>
+            <tr>
+              <td><code>@linkColorHover</code></td>
+              <td><code>darken(@linkColor, 15%)</code></td>
+              <td>{{_i}}Default link text hover color{{/i}}</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div class="row">
+          <div class="span6">
+            <h3>{{_i}}Grayscale colors{{/i}}</h3>
+            <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">{{_i}}Variable{{/i}}</th>
+                  <th>{{_i}}Value{{/i}}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>@black</code></td>
+                  <td>#000</td>
+                </tr>
+                <tr>
+                  <td><code>@grayDarker</code></td>
+                  <td><code>#222</code></td>
+                </tr>
+                <tr>
+                  <td><code>@grayDark</code></td>
+                  <td><code>#333</code></td>
+                </tr>
+                <tr>
+                  <td><code>@gray</code></td>
+                  <td><code>#555</code></td>
+                </tr>
+                <tr>
+                  <td><code>@grayLight</code></td>
+                  <td><code>#999</code></td>
+                </tr>
+                <tr>
+                  <td><code>@grayLighter</code></td>
+                  <td><code>#eee</code></td>
+                </tr>
+                <tr>
+                  <td><code>@white</code></td>
+                  <td>#fff</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="span6">
+            <h3>{{_i}}Accent colors{{/i}}</h3>
+            <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">{{_i}}Variable{{/i}}</th>
+                  <th>{{_i}}Value{{/i}}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>@blue</code></td>
+                  <td>#049cdb</td>
+                </tr>
+                <tr>
+                  <td><code>@green</code></td>
+                  <td>#46a546</td>
+                </tr>
+                <tr>
+                  <td><code>@red</code></td>
+                  <td>#9d261d</td>
+                </tr>
+                <tr>
+                  <td><code>@yellow</code></td>
+                  <td>#ffc40d</td>
+                </tr>
+                <tr>
+                  <td><code>@orange</code></td>
+                  <td>#f89406</td>
+                </tr>
+                <tr>
+                  <td><code>@pink</code></td>
+                  <td>#c3325f</td>
+                </tr>
+                <tr>
+                  <td><code>@purple</code></td>
+                  <td>#7a43b6</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div> <!-- /row -->
+        <div class="row">
+          <div class="span6">
+            <h3>{{_i}}Grid system{{/i}}</h3>
+            <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">{{_i}}Variable{{/i}}</th>
+                  <th>{{_i}}Value{{/i}}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>@gridColumns</code></td>
+                  <td>12</td>
+                </tr>
+                <tr>
+                  <td><code>@gridColumnWidth</code></td>
+                  <td>60px</td>
+                </tr>
+                <tr>
+                  <td><code>@gridGutterWidth</code></td>
+                  <td>20px</td>
+                </tr>
+                <tr>
+                  <td><code>@siteWidth</code></td>
+                  <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="span6">
+            <h3>{{_i}}Typography{{/i}}</h3>
+            <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">{{_i}}Variable{{/i}}</th>
+                  <th>{{_i}}Value{{/i}}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>@baseFontSize</code></td>
+                  <td>13px</td>
+                </tr>
+                <tr>
+                  <td><code>@baseFontFamily</code></td>
+                  <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
+                  <td></td>
+                </tr>
+                <tr>
+                  <td><code>@baseLineHeight</code></td>
+                  <td>18px</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div> <!-- /row -->
+        <div class="row">
+          <div class="span3">
+            <h3>{{_i}}Visuals{{/i}}</h3>
+          </div>
+          <div class="span9">
+            <table class="table table-bordered table-striped">
+              <tbody>
+                <tr>
+                  <td><code>@primaryButtonColor</code></td>
+                  <td><code>@blue</code></td>
+                  <td></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div> <!-- /row -->
+      </section>
 
-      <div class="row">
-        <div class="span3">
-          <h3>{{_i}}Visuals{{/i}}</h3>
-        </div>
-        <div class="span9">
-          <table class="table table-bordered table-striped">
-            <tbody>
-              <tr>
-                <td><code>@primaryButtonColor</code></td>
-                <td><code>@blue</code></td>
-                <td></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
 
 
       <!-- MIXINS
diff --git a/lib/type.less b/lib/type.less
index 2c6e7db6a..d828ab6c9 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -175,6 +175,7 @@ blockquote {
   }
 }
 
+// Quotes
 q:before,
 q:after,
 blockquote:before, 
@@ -195,13 +196,16 @@ code,
 pre {
   padding: 0 3px 2px;
   #font > #family > .monospace;
-  font-size: 12px;
+  font-size: @baseFontSize - 2;
   color: @grayDark;
   .border-radius(3px);
 }
 code {
-  padding: 1px 3px;
+  padding: 3px 4px;
   background-color: lighten(@orange, 40%);
+  color: #d14;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
 }
 pre {
   display: block;
@@ -210,7 +214,7 @@ pre {
   font-size: 12px;
   line-height: @baseLineHeight;
   background-color: #f5f5f5;
-  border: 1px solid #ccc;
+  border: 1px solid #ccc; // fallback for IE7-8
   border: 1px solid rgba(0,0,0,.15);
   .border-radius(4px);
   white-space: pre;
diff --git a/lib/variables.less b/lib/variables.less
index 0a67521df..674a358bf 100644
--- a/lib/variables.less
+++ b/lib/variables.less
@@ -9,7 +9,7 @@
 
 // Links
 @linkColor:             #08c;
-@linkColorHover:        darken(@linkColor, 15);
+@linkColorHover:        darken(@linkColor, 15%);
 
 // Grays
 @black:                 #000;
@@ -21,8 +21,8 @@
 @white:                 #fff;
 
 // Accent colors
-@blue:                  #049CDB;
-@blueDark:              #0064CD;
+@blue:                  #049cdb;
+@blueDark:              #0064cd;
 @green:                 #46a546;
 @red:                   #9d261d;
 @yellow:                #ffc40d;