4 files changed, 75 insertions, 11 deletions
diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 6dedf1435..b385a1b2e 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 65aaa7c85..25a9f2fef 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1962,16 +1962,16 @@ table .span12 {
   background-color: #24748c \9;
 }
 .btn-inverse {
-  background-color: #393939;
-  background-image: -moz-linear-gradient(top, #454545, #262626);
-  background-image: -ms-linear-gradient(top, #454545, #262626);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#454545), to(#262626));
-  background-image: -webkit-linear-gradient(top, #454545, #262626);
-  background-image: -o-linear-gradient(top, #454545, #262626);
-  background-image: linear-gradient(top, #454545, #262626);
+  background-color: #414141;
+  background-image: -moz-linear-gradient(top, #555555, #222222);
+  background-image: -ms-linear-gradient(top, #555555, #222222);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222));
+  background-image: -webkit-linear-gradient(top, #555555, #222222);
+  background-image: -o-linear-gradient(top, #555555, #222222);
+  background-image: linear-gradient(top, #555555, #222222);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#262626', GradientType=0);
-  border-color: #262626 #262626 #000000;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0);
+  border-color: #222222 #222222 #000000;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
@@ -1980,10 +1980,10 @@ table .span12 {
 .btn-inverse.active,
 .btn-inverse.disabled,
 .btn-inverse[disabled] {
-  background-color: #262626;
+  background-color: #222222;
 }
 .btn-inverse:active, .btn-inverse.active {
-  background-color: #0c0c0c \9;
+  background-color: #080808 \9;
 }
 button.btn, input[type="submit"].btn {
   *padding-top: 2px;
@@ -3190,6 +3190,12 @@ a.thumbnail:hover {
 .label-info:hover {
   background-color: #2d6987;
 }
+.label-inverse {
+  background-color: #333333;
+}
+.label-inverse:hover {
+  background-color: #1a1a1a;
+}
 @-webkit-keyframes progress-bar-stripes {
   from {
     background-position: 0 0;
diff --git a/docs/components.html b/docs/components.html
index b7e60df87..895d62f75 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -248,6 +248,16 @@
             <li><a href="#">Separated link</a></li>
           </ul>
         </div><!-- /btn-group -->
+        <div class="btn-group">
+          <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">Inverse <span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
       </div><!-- /btn-toolbar -->
       <hr>
       <p><span class="label label-info">Heads up!</span> Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
@@ -331,6 +341,17 @@
             <li><a href="#">Separated link</a></li>
           </ul>
         </div><!-- /btn-group -->
+        <div class="btn-group">
+          <a class="btn btn-inverse" href="#">Inverse</a>
+          <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
       </div>
     </div>
     <div class="span8">
@@ -1153,6 +1174,14 @@
           <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
         </td>
       </tr>
+      <tr>
+        <td>
+          <span class="label label-inverse">Inverse</span>
+        </td>
+        <td>
+          <code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
+        </td>
+      </tr>
     </tbody>
   </table>
 </section>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 39c9020d2..dcf5212a8 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -172,6 +172,16 @@
             <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
           </ul>
         </div><!-- /btn-group -->
+        <div class="btn-group">
+          <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Inverse{{/i}} <span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
       </div><!-- /btn-toolbar -->
       <hr>
       <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
@@ -255,6 +265,17 @@
             <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
           </ul>
         </div><!-- /btn-group -->
+        <div class="btn-group">
+          <a class="btn btn-inverse" href="#">{{_i}}Inverse{{/i}}</a>
+          <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
       </div>
     </div>
     <div class="span8">
@@ -1077,6 +1098,14 @@
           <code>&lt;span class="label label-info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
         </td>
       </tr>
+      <tr>
+        <td>
+          <span class="label label-inverse">{{_i}}Inverse{{/i}}</span>
+        </td>
+        <td>
+          <code>&lt;span class="label label-inverse"&gt;{{_i}}Inverse{{/i}}&lt;/span&gt;</code>
+        </td>
+      </tr>
     </tbody>
   </table>
 </section>