resolving deltas between that epic css selector specifity pull request and latest changes here

docs/index.html

@@ -34,7 +34,7 @@
     <!-- Topbar
     ================================================== -->
     <div class="topbar">
-      <div class="wrapper">
+      <div class="fill">
         <div class="container">
           <h3><a href="#">Bootstrap</a></h3>
           <ul class="nav">
@@ -906,7 +906,7 @@
   <h2>Fixed topbar</h2>
   <div class="topbar-wrapper" style="z-index: 5;">
     <div class="topbar">
-      <div class="wrapper">
+      <div class="fill">
         <div class="container">
           <h3><a href="#">Project Name</a></h3>
           <ul class="nav">

lib/patterns.less

@@ -17,7 +17,7 @@
   overflow: visible;
 
   // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
-  .wrapper {
+  .fill {
     background-color: #222;
     #gradient > .vertical(#333, #222);
     @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
@@ -32,7 +32,7 @@
 
   // Hover and active states
   a:hover,
-  ul li.active a {
+  ul .active a {
     background-color: #333;
     background-color: rgba(255,255,255,.05);
     color: @white;
@@ -60,6 +60,7 @@
     margin: 5px 0 0 0;
     position: relative;
     .opacity(100);
+  }
   input {
     background-color: #444;
     background-color: rgba(255,255,255,.3);
@@ -99,7 +100,6 @@
       .box-shadow(0 0 3px rgba(0,0,0,.15));
     }
   }
-  }
 }
 
 
@@ -118,6 +118,7 @@
     display: block;
     float: left;
     font-size: 13px;
+  }
   a {
     display: block;
     float: none;
@@ -129,18 +130,17 @@
       text-decoration: none;
     }
   }
-    &.active a {
+  .active a {
     background-color: #222;
     background-color: rgba(0,0,0,.5);
   }
-  }
 
   // Secondary (floated right) nav in topbar
   &.secondary-nav {
     float: right;
     margin-left: 10px;
     margin-right: 0;
-    .dropdown .dropdown-menu {
+    .dropdown-menu {
       right: 0;
     }
   }
@@ -221,6 +221,7 @@
     float: none;
     display: block;
     background-color: none;
+  }
   // Links within the dropdown menu
   a {
     display: block;
@@ -240,14 +241,13 @@
     }
   }
   // Dividers (basically an hr) within the dropdown
-    &.divider {
+  .divider {
     height: 1px;
     margin: 5px 0;
     overflow: hidden;
     background-color: #eee;
     border-bottom: 1px solid #fff;
   }
-  }
 }
 // Open state for the dropdown
 .dropdown.open {
@@ -320,7 +320,6 @@
 
 // Basic pill nav
 .pills {
-  li {
   a {
       margin: 5px 3px 5px 0;
     padding: 0 15px;
@@ -334,12 +333,11 @@
       text-shadow: 0 1px 1px rgba(0,0,0,.25);
     }
   }
-    &.active a {
+  .active a {
     background: @linkColor;
     color: #fff;
     text-shadow: 0 1px 1px rgba(0,0,0,.25);
   }
-  }
 }
 
 
@@ -370,6 +368,7 @@ footer {
   border-top: 1px solid #eee;
 }
 
+
 // PAGE HEADERS
 // ------------
 
@@ -382,10 +381,10 @@ footer {
   }
 }
 
+
 // BUTTON STYLES
 // -------------
 
-
 // Base .btn styles
 .btn {
   // Button Base
@@ -424,7 +423,6 @@ footer {
     background-image: none;
     .opacity(65);
   }
-
   &:disabled {
     // disabled pseudo can't be included with .disabled
     // def because IE8 and below will drop it ;_;
@@ -432,7 +430,6 @@ footer {
     background-image: none;
     .opacity(65);
   }
-
   &:active {
     @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
     .box-shadow(@shadow);
@@ -445,12 +442,10 @@ footer {
     padding: 9px 14px 9px;
     .border-radius(6px);
   }
-
   &.small {
     padding: 7px 9px 7px;
     font-size: 11px;
   }
-
 }
 
 // Help Firefox not be a jerk about adding extra padding to buttons
@@ -463,7 +458,6 @@ input[type=submit].btn {
 }
 
 
-
 // ERROR STYLES
 // ------------
 
@@ -558,8 +552,10 @@ input[type=submit].btn {
     border: 1px solid rgba(0,0,0,.15);
     .border-radius(3px);
     .box-shadow(0 1px 2px rgba(0,0,0,.05));
+  }
   li {
     display: inline;
+  }
   a {
     float: left;
     padding: 0 14px;
@@ -571,19 +567,17 @@ input[type=submit].btn {
     text-decoration: none;
   }
   a:hover,
-      &.active a {
+  .active a {
     background-color: lighten(@blue, 45%);
   }
-      &.disabled a,
+  .disabled a,
-      &.disabled a:hover {
+  .disabled a:hover {
     background-color: transparent;
     color: @grayLight;
   }
-      &.next a {
+  .next a {
     border: 0;
   }
-    }
-  }
 }
 
 
@@ -628,7 +622,8 @@ input[type=submit].btn {
   .border-radius(6px);
   .box-shadow(0 3px 7px rgba(0,0,0,0.3));
   .background-clip(padding-box);
-  .modal-header {
+}
+.modal-header {
   border-bottom: 1px solid #eee;
   padding: 5px 20px;
   .close {
@@ -639,11 +634,11 @@ input[type=submit].btn {
     line-height:10px;
     font-size: 18px;
   }
-  }
+}
-  .modal-body {
+.modal-body {
   padding: 20px;
-  }
+}
-  .modal-footer {
+.modal-footer {
   background-color: #f5f5f5;
   padding: 14px 20px 15px;
   border-top: 1px solid #ddd;
@@ -655,7 +650,6 @@ input[type=submit].btn {
     float: right;
     margin-left: 10px;
   }
-  }
 }
 
 
@@ -712,7 +706,8 @@ input[type=submit].btn {
   &.left .twipsy-arrow    { #popoverArrow > .left(); }
   &.below .twipsy-arrow   { #popoverArrow > .below(); }
   &.right .twipsy-arrow   { #popoverArrow > .right(); }
-  .twipsy-inner {
+}
+.twipsy-inner {
   padding: 3px 8px;
   background-color: #000;
   color: white;
@@ -720,12 +715,11 @@ input[type=submit].btn {
   max-width: 200px;
   text-decoration: none;
   .border-radius(4px);
-  }
+}
-  .twipsy-arrow {
+.twipsy-arrow {
   position: absolute;
   width: 0;
   height: 0;
-  }
 }