overhaul docs CSS since it was scalable, converted docs mastheads and footers to classes and HTML5 elements, add masthead to js docs page but make it slate so it looks cool and stands out

lib/forms.less

@@ -343,31 +343,34 @@ textarea[readonly] {
     display: block;
     padding: 0;
     width: 100%;
-    label {
-      display: block;
-      float: none;
-      width: auto;
-      padding: 0;
-      line-height: @baseline;
-      text-align: left;
-      white-space: normal;
-      strong {
-        color: @gray;
-      }
-      small {
-        font-size: @basefont - 2;
-        font-weight: normal;
-      }
+  }
+  label {
+    display: block;
+    float: none;
+    width: auto;
+    padding: 0;
+    line-height: @baseline;
+    text-align: left;
+    white-space: normal;
+    strong {
+      color: @gray;
     }
-    ul.inputs-list {
-      margin-left: 25px;
-      margin-bottom: 10px;
-      padding-top: 0;
-    }
-    &:first-child {
-      padding-top: 5px;
+    small {
+      font-size: @basefont - 2;
+      font-weight: normal;
     }
   }
+  .inputs-list {
+    margin-left: 25px;
+    margin-bottom: 10px;
+    padding-top: 0;
+  }
+  &:first-child {
+    padding-top: 6px;
+  }
+  li + li {
+    padding-top: 2px;
+  }
   input[type=radio],
   input[type=checkbox] {
     margin-bottom: 0;

lib/scaffolding.less

@@ -4,6 +4,75 @@
  * ------------------------------------------------------------------------------------------- */
 
 
+// STRUCTURAL LAYOUT
+// -----------------
+
+html, body {
+  background-color: #fff;
+}
+body {
+  margin: 0;
+  #font > .sans-serif(normal,@basefont,@baseline);
+  color: @grayDark;
+}
+
+// Container (centered, fixed-width layouts)
+.container {
+  .fixed-container();
+}
+
+// Fluid layouts (left aligned, with sidebar, min- & max-width content)
+.container-fluid {
+  position: relative;
+  padding-left: 20px;
+  padding-right: 20px;
+  .clearfix();
+  > .sidebar {
+    float: left;
+    width: 220px;
+  }
+  // TODO in v2: rename this and .popover .content to be more specific
+  > .content {
+    min-width: 700px;
+    max-width: 1180px;
+    margin-left: 240px;
+    .clearfix();
+  }
+}
+
+.hide {
+  display: none;
+}
+
+.show {
+  display: block;
+}
+
+
+// BASE STYLES
+// -----------
+
+// Links
+a {
+  color: @linkColor;
+  text-decoration: none;
+  line-height: inherit;
+  font-weight: inherit;
+  &:hover {
+    color: @linkColorHover;
+    text-decoration: underline;
+  }
+}
+
+// Quick floats
+.pull-right {
+  float: right;
+}
+.pull-left {
+  float: left;
+}
+
+
 // GRID SYSTEM
 // -----------
 
@@ -64,73 +133,4 @@
   .span-two-thirds    { width: 620px; }
   .offset-one-third   { margin-left: 340px; }
   .offset-two-thirds  { margin-left: 660px; }
-}
-
-
-// STRUCTURAL LAYOUT
-// -----------------
-
-html, body {
-  background-color: #fff;
-}
-body {
-  margin: 0;
-  #font > .sans-serif(normal,@basefont,@baseline);
-  color: @gray;
-}
-
-// Container (centered, fixed-width layouts)
-.container {
-  .fixed-container();
-}
-
-// Fluid layouts (left aligned, with sidebar, min- & max-width content)
-.container-fluid {
-  position: relative;
-  padding-left: 20px;
-  padding-right: 20px;
-  .clearfix();
-  > .sidebar {
-    float: left;
-    width: 220px;
-  }
-  // TODO in v2: rename this and .popover .content to be more specific
-  > .content {
-    min-width: 700px;
-    max-width: 1180px;
-    margin-left: 240px;
-    .clearfix();
-  }
-}
-
-.hide {
-  display: none;
-}
-
-.show {
-  display: block;
-}
-
-
-// BASE STYLES
-// -----------
-
-// Links
-a {
-  color: @linkColor;
-  text-decoration: none;
-  line-height: inherit;
-  font-weight: inherit;
-  &:hover {
-    color: @linkColorHover;
-    text-decoration: underline;
-  }
-}
-
-// Quick floats
-.pull-right {
-  float: right;
-}
-.pull-left {
-  float: left;
-}
+}

lib/type.less

@@ -113,7 +113,7 @@ dl {
 
 // Horizontal rules
 hr {
-  margin: 0 0 19px;
+  margin: 20px 0 19px;
   border: 0;
   border-bottom: 1px solid #eee;
 }