merged in my pending changes from 1.2-wip branch, resolve diffs as best as i could, update docs and alerts to use original classes, updated docs to include smaller section for layouts

bootstrap-1.1.0.css

@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Thu Aug 25 13:52:00 PDT 2011
+ * Date: Thu Aug 25 22:35:30 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here	that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -122,27 +122,27 @@ aside {
   clear: both;
 }
 .btn.danger,
-.alert.danger,
+.alert-message.danger,
 .btn.danger:hover,
-.alert.danger:hover,
+.alert-message.danger:hover,
 .btn.error,
-.alert.error,
+.alert-message.error,
 .btn.error:hover,
-.alert.error:hover,
+.alert-message.error:hover,
 .btn.success,
-.alert.success,
+.alert-message.success,
 .btn.success:hover,
-.alert.success:hover,
+.alert-message.success:hover,
 .btn.info,
-.alert.info,
+.alert-message.info,
 .btn.info:hover,
-.alert.info:hover {
+.alert-message.info:hover {
   color: #ffffff;
 }
 .btn.danger,
-.alert.danger,
+.alert-message.danger,
 .btn.error,
-.alert.error {
+.alert-message.error {
   background-color: #d6463e;
   background-repeat: repeat-x;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));
@@ -156,7 +156,7 @@ aside {
   border-color: #d6463e #d6463e #a52a23;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 }
-.btn.success, .alert.success {
+.btn.success, .alert-message.success {
   background-color: #57a957;
   background-repeat: repeat-x;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
@@ -170,7 +170,7 @@ aside {
   border-color: #57a957 #57a957 #3d773d;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 }
-.btn.info, .alert.info {
+.btn.info, .alert-message.info {
   background-color: #36b3d9;
   background-repeat: repeat-x;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));
@@ -1368,7 +1368,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
-.alert {
+.alert-message {
   background-color: #eedc94;
   background-repeat: repeat-x;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
@@ -1394,23 +1394,23 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
 }
-.alert h5 {
+.alert-message h5 {
   line-height: 18px;
 }
-.alert p {
+.alert-message p {
   margin-bottom: 0;
 }
-.alert div {
+.alert-message div {
   margin-top: 5px;
   margin-bottom: 2px;
   line-height: 28px;
 }
-.alert .btn {
+.alert-message .btn {
   -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
   -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
 }
-.alert .close {
+.alert-message .close {
   float: right;
   margin-top: -2px;
   color: #000000;
@@ -1422,7 +1422,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   -moz-opacity: 0.2;
   opacity: 0.2;
 }
-.alert .close:hover {
+.alert-message .close:hover {
   color: #000000;
   text-decoration: none;
   filter: alpha(opacity=40);
@@ -1430,7 +1430,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   -moz-opacity: 0.4;
   opacity: 0.4;
 }
-.alert.alert-block, .alert.alert-block:hover {
+.alert-message.block-message {
   background-image: none;
   background-color: #fdf5d9;
   padding: 14px;
@@ -1439,30 +1439,25 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   -moz-box-shadow: none;
   box-shadow: none;
 }
-.alert.alert-block p, .alert.alert-block:hover p {
+.alert-message.block-message p {
   margin-right: 30px;
 }
-.alert.alert-block .alert-actions, .alert.alert-block:hover .alert-actions {
+.alert-message.block-message .alert-actions {
   margin-top: 5px;
 }
-.alert.alert-block.error,
+.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
-.alert.alert-block:hover.error,
-.alert.alert-block.success,
-.alert.alert-block:hover.success,
-.alert.alert-block.info,
-.alert.alert-block:hover.info {
   color: #404040;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
-.alert.alert-block.error, .alert.alert-block:hover.error {
+.alert-message.block-message.error {
   background-color: #fddfde;
   border-color: #fbc7c6;
 }
-.alert.alert-block.success, .alert.alert-block:hover.success {
+.alert-message.block-message.success {
   background-color: #d1eed1;
   border-color: #bfe7bf;
 }
-.alert.alert-block.info, .alert.alert-block:hover.info {
+.alert-message.block-message.info {
   background-color: #ddf4fb;
   border-color: #c6edf9;
 }

bootstrap-1.1.0.min.css

@@ -9,10 +9,10 @@ header,section,footer,article,aside{display:block;}
 .center-block{display:block;margin:0 auto;}
 .container{width:940px;margin:0 auto;zoom:1;}.container:before,.container:after{display:table;content:"";}
 .container:after{clear:both;}
-.btn.danger,.alert.danger,.btn.danger:hover,.alert.danger:hover,.btn.error,.alert.error,.btn.error:hover,.alert.error:hover,.btn.success,.alert.success,.btn.success:hover,.alert.success:hover,.btn.info,.alert.info,.btn.info:hover,.alert.info:hover{color:#ffffff;}
+.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
-.btn.danger,.alert.danger,.btn.error,.alert.error{background-color:#d6463e;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));background-image:-moz-linear-gradient(#f56a66, #d6463e);background-image:-ms-linear-gradient(#f56a66, #d6463e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));background-image:-webkit-linear-gradient(#f56a66, #d6463e);background-image:-o-linear-gradient(#f56a66, #d6463e);background-image:linear-gradient(#f56a66, #d6463e);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#d6463e #d6463e #a52a23;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#d6463e;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));background-image:-moz-linear-gradient(#f56a66, #d6463e);background-image:-ms-linear-gradient(#f56a66, #d6463e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));background-image:-webkit-linear-gradient(#f56a66, #d6463e);background-image:-o-linear-gradient(#f56a66, #d6463e);background-image:linear-gradient(#f56a66, #d6463e);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#d6463e #d6463e #a52a23;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.btn.success,.alert.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(#62c462, #57a957);background-image:-ms-linear-gradient(#62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(#62c462, #57a957);background-image:-o-linear-gradient(#62c462, #57a957);background-image:linear-gradient(#62c462, #57a957);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.success,.alert-message.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(#62c462, #57a957);background-image:-ms-linear-gradient(#62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(#62c462, #57a957);background-image:-o-linear-gradient(#62c462, #57a957);background-image:linear-gradient(#62c462, #57a957);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.btn.info,.alert.info{background-color:#36b3d9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));background-image:-moz-linear-gradient(#6bd0ee, #36b3d9);background-image:-ms-linear-gradient(#6bd0ee, #36b3d9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));background-image:-webkit-linear-gradient(#6bd0ee, #36b3d9);background-image:-o-linear-gradient(#6bd0ee, #36b3d9);background-image:linear-gradient(#6bd0ee, #36b3d9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#36b3d9 #36b3d9 #1f85a4;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.info,.alert-message.info{background-color:#36b3d9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));background-image:-moz-linear-gradient(#6bd0ee, #36b3d9);background-image:-ms-linear-gradient(#6bd0ee, #36b3d9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));background-image:-webkit-linear-gradient(#6bd0ee, #36b3d9);background-image:-o-linear-gradient(#6bd0ee, #36b3d9);background-image:linear-gradient(#6bd0ee, #36b3d9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#36b3d9 #36b3d9 #1f85a4;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
 .row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";}
 .row:after{clear:both;}
 .row .span1,.row .span2,.row .span3,.row .span4,.row .span5,.row .span6,.row .span7,.row .span8,.row .span9,.row .span10,.row .span11,.row .span12,.row .span13,.row .span14,.row .span15,.row .span16{display:inline;float:left;margin-left:20px;}
@@ -184,17 +184,17 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
 .btn.large{font-size:16px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
 .btn.small{padding:7px 9px 7px;font-size:11px;}
 button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
-.alert{background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(#fceec1, #eedc94);background-image:-ms-linear-gradient(#fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(#fceec1, #eedc94);background-image:-o-linear-gradient(#fceec1, #eedc94);background-image:linear-gradient(#fceec1, #eedc94);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);margin-bottom:18px;padding:7px 14px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert h5{line-height:18px;}
+.alert-message{background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(#fceec1, #eedc94);background-image:-ms-linear-gradient(#fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(#fceec1, #eedc94);background-image:-o-linear-gradient(#fceec1, #eedc94);background-image:linear-gradient(#fceec1, #eedc94);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);margin-bottom:18px;padding:7px 14px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message h5{line-height:18px;}
-.alert p{margin-bottom:0;}
+.alert-message p{margin-bottom:0;}
-.alert div{margin-top:5px;margin-bottom:2px;line-height:28px;}
+.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;}
-.alert .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);}
+.alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);}
-.alert .close{float:right;margin-top:-2px;color:#000000;font-size:20px;font-weight:bold;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.alert .close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
+.alert-message .close{float:right;margin-top:-2px;color:#000000;font-size:20px;font-weight:bold;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.alert-message .close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
-.alert.alert-block,.alert.alert-block:hover{background-image:none;background-color:#fdf5d9;padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert.alert-block p,.alert.alert-block:hover p{margin-right:30px;}
+.alert-message.block-message{background-image:none;background-color:#fdf5d9;padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message p{margin-right:30px;}
-.alert.alert-block .alert-actions,.alert.alert-block:hover .alert-actions{margin-top:5px;}
+.alert-message.block-message .alert-actions{margin-top:5px;}
-.alert.alert-block.error,.alert.alert-block:hover.error,.alert.alert-block.success,.alert.alert-block:hover.success,.alert.alert-block.info,.alert.alert-block:hover.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
+.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
-.alert.alert-block.error,.alert.alert-block:hover.error{background-color:#fddfde;border-color:#fbc7c6;}
+.alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;}
-.alert.alert-block.success,.alert.alert-block:hover.success{background-color:#d1eed1;border-color:#bfe7bf;}
+.alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;}
-.alert.alert-block.info,.alert.alert-block:hover.info{background-color:#ddf4fb;border-color:#c6edf9;}
+.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;}
 .tabs,.pills{margin:0 0 20px;padding:0;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";}
 .tabs:after,.pills:after{clear:both;}
 .tabs li,.pills li{display:inline;}.tabs li a,.pills li a{float:left;width:auto;}

docs/assets/css/docs.css

@@ -171,7 +171,7 @@ div.mini-layout div {
 div.mini-layout div.mini-layout-body {
   background-color: #dceaf4;
   margin: 0 auto;
-  width: 450px;
+  width: 340px;
   height: 340px;
 }
 div.mini-layout.fluid div.mini-layout-sidebar,
@@ -185,7 +185,7 @@ div.mini-layout.fluid div.mini-layout-sidebar {
   height: 340px;
 }
 div.mini-layout.fluid div.mini-layout-body {
-  width: 400px;
+  width: 300px;
   margin-left: 10px;
 }
 /* Topbar special styles

docs/index.html

@@ -253,13 +253,10 @@
     <h1>Layouts <small>Basic templates to create webpages</small></h1>
   </div>
 
-  <!-- Fixed layout -->
   <div class="row">
-    <div class="span4 columns">
+    <div class="span8 columns">
       <h2>Fixed layout</h2>
-      <p>A basic 940px wide, centered container layout for just about any site or page.</p>
+      <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div.container&gt;</code>.</p>
-    </div>
-    <div class="span12 columns">
       <div class="mini-layout">
         <div class="mini-layout-body"></div>
       </div>
@@ -270,16 +267,10 @@
   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
-    </div>
+    </div><!-- /col -->
-  </div> <!-- /row -->
+    <div class="span8 columns">
-
-  <!-- Fluid layout -->
-  <div class="row">
-    <div class="span4 columns">
       <h2>Fluid layout</h2>
-      <p>A flexible fluid or liquid page structure with min- and max-widths and a left-hand sidebar. Great for apps.</p>
+      <p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p>
-    </div>
-    <div class="span12 columns">
       <div class="mini-layout fluid">
         <div class="mini-layout-sidebar"></div>
         <div class="mini-layout-body"></div>
@@ -296,7 +287,7 @@
   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
-    </div>
+    </div><!-- /col -->
   </div><!-- /row -->
 </section>
 
@@ -616,15 +607,15 @@
         <fieldset>
           <legend>Example form legend</legend>
           <div class="clearfix">
-            <label for="">X-Large Input</label>
+            <label for="xlInput">X-Large Input</label>
             <div class="input">
               <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
             </div>
           </div> <!-- /clearfix -->
           <div class="clearfix">
-            <label for="">Select</label>
+            <label for="normalSelect">Select</label>
             <div class="input">
-              <select>
+              <select name="normalSelect" id="normalSelect">
                 <option>1</option>
                 <option>2</option>
                 <option>3</option>
@@ -634,9 +625,9 @@
             </div>
           </div> <!-- /clearfix -->
           <div class="clearfix">
-            <label for="">Select</label>
+            <label for="mediumSelect">Select</label>
             <div class="input">
-              <select class="medium">
+              <select class="medium" name="mediumSelect" id="mediumSelect">
                 <option>1</option>
                 <option>2</option>
                 <option>3</option>
@@ -798,15 +789,15 @@
         <fieldset>
           <legend>Example form legend</legend>
           <div class="clearfix">
-            <label for="">X-Large Input</label>
+            <label for="xlInput">X-Large Input</label>
             <div class="input">
               <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
             </div>
           </div> <!-- /clearfix -->
           <div class="clearfix">
-            <label for="">Select</label>
+            <label for="stackedSelect">Select</label>
             <div class="input">
-              <select>
+              <select name="stackedSelect" id="stackedSelect">
                 <option>1</option>
                 <option>2</option>
                 <option>3</option>
@@ -1077,19 +1068,19 @@
       <p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
     </div>
     <div class="span12 columns">
-      <div class="alert">
+      <div class="alert-message warning">
-        <a class="close" href="#">&times;</a>
-        <p><strong>Oh snap!</strong> Change this and that and try again.</p>
-      </div>
-      <div class="alert error">
         <a class="close" href="#">&times;</a>
         <p><strong>Holy gaucamole!</strong> Best check yo self, you’re not looking too good.</p>
       </div>
-      <div class="alert success">
+      <div class="alert-message error">
+        <a class="close" href="#">&times;</a>
+        <p><strong>Oh snap!</strong> Change this and that and try again.</p>
+      </div>
+      <div class="alert-message success">
         <a class="close" href="#">&times;</a>
         <p><strong>Well done!</strong> You successfully read this alert message.</p>
       </div>
-      <div class="alert info">
+      <div class="alert-message info">
         <a class="close" href="#">&times;</a>
         <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
       </div>
@@ -1103,28 +1094,28 @@
       <p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
     </div>
     <div class="span12 columns">
-      <div class="alert alert-block">
+      <div class="alert-message block-message warning">
-        <a class="close" href="#">&times;</a>
-        <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
-        <div class="alert-actions">
-          <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
-        </div>
-      </div>
-      <div class="alert alert-block error">
         <a class="close" href="#">&times;</a>
         <p><strong>Holy gaucamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
         <div class="alert-actions">
           <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
         </div>
       </div>
-      <div class="alert alert-block success">
+      <div class="alert-message block-message error">
+        <a class="close" href="#">&times;</a>
+        <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
+        <div class="alert-actions">
+          <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+        </div>
+      </div>
+      <div class="alert-message block-message success">
         <a class="close" href="#">&times;</a>
         <p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p>
         <div class="alert-actions">
           <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
         </div>
       </div>
-      <div class="alert alert-block info">
+      <div class="alert-message block-message info">
         <a class="close" href="#">&times;</a>
         <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
         <div class="alert-actions">

lib/patterns.less

@@ -374,7 +374,7 @@ input[type=submit].btn {
 // ------------
 
 // Base alert styles
-.alert {
+.alert-message {
   .gradientBar(#fceec1, #eedc94); // warning by default
   margin-bottom: @baseline;
   padding: 7px 14px;
@@ -416,8 +416,7 @@ input[type=submit].btn {
     }
   }
 
-  &.alert-block,
+  &.block-message {
-  &.alert-block:hover {
     background-image: none;
     background-color: lighten(#fceec1, 5%);
     padding: 14px;

lib/preboot.less

@@ -192,8 +192,7 @@
 // Shared colors for buttons and alerts
 
 .btn,
-.alert {
+.alert-message {
-
   &.danger,
   &.danger:hover,
   &.error,
@@ -217,7 +216,6 @@
   &.info {
     .gradientBar(#6bd0ee, #36b3d9);
   }
-
 }
 
 // Gradients