updated to include sub nav and pip nav, new docs updates, topbar nav refinements for media queried settings

lib/responsive.less

@@ -3,26 +3,21 @@
 // -------------------------------------------------------------
 
 
+// RESPONSIVE CLASSES
+// ------------------
+
+// Hide from screenreaders and browsers
+// Credit: HTML5BP
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+
 // UP TO LANDSCAPE PHONE
 // ---------------------
 
 @media (max-width: 480px) {
-  // Remove width from containers
-  .container {
-    width: auto;
-    padding: 0 15px;
-  }
-  // Undo negative margin on rows
-  .row {
-    margin-left: 0;
-  }
-  // Make all columns even
-  [class*="span"] {
-    float: none;
-    display: block;
-    width: auto;
-    margin: 0;
-  }
   // Resize modals
   .modal {
     width: auto;
@@ -30,36 +25,35 @@
   }
 
   // Remove the horizontal form styles
-  .form-horizontal .control-group > label {
+  .horizontal-form .control-group > label {
     float: none;
     width: auto;
     padding-top: 0;
     text-align: left;
   }
   // Move over all input controls and content
-  .form-horizontal .controls {
+  .horizontal-form .controls {
     margin-left: 0;
   }
   // Move the options list down to align with labels
-  .form-horizontal .control-list {
+  .horizontal-form .control-list {
     padding-top: 0; // has to be padding because margin collaspes
   }
   // Move over buttons in .form-actions to align with .controls
-  .form-horizontal .form-actions {
+  .horizontal-form .form-actions {
     padding-left: 0;
   }
-
 }
 
 
 // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
 // --------------------------------------------------
 
-@media (min-width: 480px) and (max-width: 768px) {
+@media (max-width: 768px) {
   // Remove width from containers
   .container {
     width: auto;
-    padding: 0 10px;
+    padding: 0 20px;
   }
   // Undo negative margin on rows
   .row {
@@ -72,6 +66,54 @@
     width: auto;
     margin: 0;
   }
+
+  // Make the nav work for small devices
+  .nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 180px;
+    padding-top: 40px;
+    list-style: none;
+  }
+  .nav,
+  .nav > li:last-child a {
+    .border-radius(0 0 4px 0);
+  }
+  .nav > li {
+    float: none;
+    display: none;
+  }
+  .nav > li > a {
+    float: none;
+    background-color: #222;
+  }
+  .nav > .active {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .navbar ul .active > a {
+    background-color: transparent;
+  }
+  .nav > .active a:after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-top: 8px;
+    margin-left: 6px;
+    text-indent: -99999px;
+    vertical-align: top;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 4px solid @white;
+    .opacity(100);
+    content: "↓";
+  }
+  .nav > .active a:hover {
+    background-color: rgba(255,255,255,.05);
+  }
 }
 
 
@@ -129,7 +171,6 @@
 
 }
 
-/*
 // LARGE DESKTOP & UP
 // ------------------
 
@@ -185,4 +226,3 @@
   .offset12  { .offset(12); }
 
 }
-*/