1 files changed, 40 insertions, 38 deletions

diff --git a/lib/patterns.less b/lib/patterns.less
index 02aeaf559..ef22e71b8 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -7,7 +7,8 @@
 // ------
 
 // Topbar for Branding and Nav
-div.topbar {
+.topbar {
+  #gradient > .vertical(#333, #222);
   height: 40px;
   position: fixed;
   top: 0;
@@ -81,11 +82,13 @@ div.topbar {
       &::-webkit-input-placeholder {
         color: @grayLighter;
       }
+      // Hover states
       &:hover {
         background-color: @grayLight;
         background-color: rgba(255,255,255,.5);
         color: #fff;
       }
+      // Focus states (we use .focused since IE8 and down doesn't support :focus)
       &:focus,
       &.focused {
         outline: none;
@@ -270,7 +273,7 @@ div.topbar {
 // PAGE HEADERS
 // ------------
 
-div.page-header {
+.page-header {
   margin-bottom: @baseline - 1;
   border-bottom: 1px solid #ddd;
   .box-shadow(0 1px 0 rgba(255,255,255,.5));
@@ -284,8 +287,7 @@ div.page-header {
 // ------------
 
 // One-liner alert bars
-div.alert-message {
-
+.alert-message {
   // TODO: Ask cloudhead how to do this fancy filter elegantly. Less eval is returning strings with quotes ;_;
   #gradient > .vertical(transparent, rgba(0,0,0,0.15));
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#15000000')";
@@ -294,8 +296,8 @@ div.alert-message {
   margin-bottom: @baseline;
   padding: 8px 15px;
   color: #fff;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  border-bottom: 1px solid rgba(0,0,0,.25);
+  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
+  border-bottom: 1px solid rgba(0,0,0,.3);
   .border-radius(4px);
   p {
     color: #fff;
@@ -305,35 +307,38 @@ div.alert-message {
     }
   }
   &.error {
-    background-color: lighten(@red, 25%);
+    #gradient > .vertical(lighten(@red, 30%), lighten(@red, 15%));
+    border-bottom-color: lighten(@red, 5%);
   }
   &.warning {
-    background-color: lighten(@yellow, 15%);
+    #gradient > .vertical(lighten(@yellow, 25%), lighten(@yellow, 10%));
+    border-bottom-color: @yellow;
   }
   &.success {
-    background-color: lighten(@green, 15%);
+    #gradient > .vertical(lighten(@green, 25%), lighten(@green, 10%));
+    border-bottom-color: @green;
   }
   &.info {
-    background-color: lighten(@blue, 15%);
+    #gradient > .vertical(lighten(@blue, 25%), lighten(@blue, 5%));
+    border-bottom-color: @blue;
   }
-  a.close {
+  .close {
     float: right;
     margin-top: -2px;
-    color: #fff;
+    color: #000;
     font-size: 20px;
     font-weight: bold;
-    text-shadow: 0 1px 0 rgba(0,0,0,.5);
-    .opacity(50);
-    .border-radius(3px);
+    text-shadow: 0 1px 0 rgba(255,255,255,1);
+    .opacity(20);
     &:hover {
       text-decoration: none;
-      .opacity(50);
+      .opacity(40);
     }
   }
 }
 
 // Block-level Alerts
-div.block-message {
+.block-message {
   margin-bottom: @baseline;
   padding: 14px;
   color: @grayDark;
@@ -354,12 +359,6 @@ div.block-message {
   strong {
     display: block;
   }
-  a.close {
-    display: block;
-    color: @grayDark;
-    color: rgba(0,0,0,.5);
-    text-shadow: 0 1px 1px rgba(255,255,255,.75);
-  }
   &.error {
     background: lighten(@red, 55%);
     border: 1px solid lighten(@red, 50%);
@@ -383,8 +382,8 @@ div.block-message {
 // ----------
 
 // Common tab and pill styles
-ul.tabs,
-ul.pills {
+.tabs,
+.pills {
   margin: 0 0 20px;
   padding: 0;
   .clearfix();
@@ -398,7 +397,7 @@ ul.pills {
 }
 
 // Basic Tabs
-ul.tabs {
+.tabs {
   width: 100%;
   border-bottom: 1px solid @grayLight;
   li {
@@ -424,7 +423,7 @@ ul.tabs {
 }
 
 // Basic pill nav
-ul.pills {
+.pills {
   li {
     a {
       margin: 5px 3px 5px 0;
@@ -451,16 +450,17 @@ ul.pills {
 // PAGINATION
 // ----------
 
-div.pagination {
+.pagination {
   height: @baseline * 2;
   margin: @baseline 0;
   ul {
     float: left;
     margin: 0;
     border: 1px solid #ddd;
-    border-right: 0\9; /* IE8 and below don't support last child */
+    border: 1px solid rgba(0,0,0,.15);
+    border-right: 0\9; /* IE8 and below don't support last child. TODO: clean this up;  */
     .border-radius(3px);
-    .box-shadow(0 1px 2px rgba(0,0,0,.075);
+    .box-shadow(0 1px 2px rgba(0,0,0,.05);
     li {
       display: inline;
       a {
@@ -508,7 +508,7 @@ div.pagination {
 // MODALS
 // ------
 
-div.modal-backdrop {
+.modal-backdrop {
   background-color: rgba(0,0,0,.5);
   position: fixed;
   top: 0;
@@ -517,7 +517,7 @@ div.modal-backdrop {
   bottom: 0;
   z-index: 1000;
 }
-div.modal {
+.modal {
   position: fixed;
   top: 50%;
   left: 50%;
@@ -525,10 +525,11 @@ div.modal {
   width: 560px;
   margin: -280px 0 0 -250px;
   background-color: @white;
-  border: 1px solid #555;
+  border: 1px solid #999;
+  border: 1px solid rgba(0,0,0,.3);
   .border-radius(6px);
   .box-shadow(0 3px 7px rgba(0,0,0,0.3));
-  .background-clip(padding);
+  .background-clip(padding-box);
   .modal-header {
     border-bottom: 1px solid #eee;
     padding: 5px 20px;
@@ -600,7 +601,7 @@ div.modal {
 // TWIPSY
 // ------
 
-div.twipsy {
+.twipsy {
   display: block;
   position: absolute;
   visibility: visible;
@@ -649,7 +650,8 @@ div.twipsy {
     height: 0;
   }
   .inner {
-    background: #333;
+    background-color: #333;
+    background-color: rgba(0,0,0,.8);
     padding: 3px;
     overflow: hidden;
     width: 280px;
@@ -657,7 +659,7 @@ div.twipsy {
     .box-shadow(0 3px 7px rgba(0,0,0,0.3));
   }
   .title {
-    background: #f5f5f5;
+    background-color: #f5f5f5;
     padding: 9px 15px;
     line-height: 1;
     .border-radius(3px 3px 0 0);
@@ -667,7 +669,7 @@ div.twipsy {
     background-color: @white;
     padding: 14px;
     .border-radius(0 0 3px 3px);
-    .background-clip(padding);
+    .background-clip(padding-box);
     p, ul, ol {
       margin-bottom: 0;
     }