copy edits and tweaks to utility classes to ensure they always are specific enough

docs/assets/css/bootstrap.css

@@ -5408,11 +5408,11 @@ a.badge:hover {
 }
 
 .hide {
-  display: none;
+  display: none !important;
 }
 
 .show {
-  display: block;
+  display: block !important;
 }
 
 .invisible {

docs/assets/css/docs.css

@@ -57,6 +57,10 @@ body > .navbar-fixed-top .brand:hover {
 section {
   padding-top: 60px;
 }
+section > .page-header,
+section > .lead {
+  color: #5a5a5a;
+}
 
 /* Separators (hr) */
 .bs-docs-separator {

docs/extend.html

@@ -60,7 +60,7 @@
               <li class="">
                 <a href="./javascript.html">Javascript</a>
               </li>
-              <li class="">
+              <li class="active">
                 <a href="./extend.html">Extend</a>
               </li>
             </ul>

docs/templates/layout.mustache

@@ -72,7 +72,7 @@
               <li class="{{javascript}}">
                 <a href="./javascript.html">{{_i}}Javascript{{/i}}</a>
               </li>
-              <li class="{{less}}">
+              <li class="{{extend}}">
                 <a href="./extend.html">{{_i}}Extend{{/i}}</a>
               </li>
             </ul>

less/utilities.less

@@ -12,11 +12,12 @@
 }
 
 // Toggling content
+// Uses `!important` for proper specifity over things like form controls
 .hide {
-  display: none;
+  display: none !important;
 }
 .show {
-  display: block;
+  display: block !important;
 }
 
 // Visibility