overhauled dropdowns now require use of .caret for dropdown arrow, redid the button group docs section, added the split button dropdown docs section

9 files changed, 359 insertions, 171 deletions

diff --git a/bootstrap.css b/bootstrap.css
index 2f57e5f95..98aec3f27 100644
--- a/bootstrap.css
+++ b/bootstrap.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: Sat Jan  7 01:58:07 PST 2012
+ * Date: Sat Jan  7 03:37:53 PST 2012
  */
 html, body {
   margin: 0;
@@ -441,7 +441,7 @@ dl dd {
   margin-left: 9px;
 }
 hr {
-  margin: 27px 0;
+  margin: 18px 0;
   border: 0;
   border-top: 1px solid #e5e5e5;
   border-bottom: 1px solid #fff;
@@ -1446,23 +1446,25 @@ i {
 .dropdown {
   position: relative;
 }
-.dropdown-toggle:after {
+.caret {
   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 #ffffff;
+  border-top: 4px solid #000;
   filter: alpha(opacity=30);
   -moz-opacity: 0.3;
   opacity: 0.3;
   content: "\2193";
 }
-.dropdown:hover .dropdown-toggle:after {
+.dropdown .caret {
+  margin-top: 8px;
+  margin-left: 2px;
+}
+.dropdown:hover .caret {
   filter: alpha(opacity=100);
   -moz-opacity: 1;
   opacity: 1;
@@ -1476,62 +1478,57 @@ i {
   min-width: 160px;
   max-width: 220px;
   _width: 160px;
-  padding: 6px 0;
-  margin-left: 0;
-  margin-right: 0;
+  padding: 5px 0;
+  margin: 0;
+  list-style: none;
   background-color: #ffffff;
   border-color: #999;
-  border-color: rgba(0, 0, 0, 0.2);
+  border-color: rgba(0, 0, 0, 0.1);
   border-style: solid;
-  border-width: 0 1px 1px;
-  -webkit-border-radius: 0 0 6px 6px;
-  -moz-border-radius: 0 0 6px 6px;
-  border-radius: 0 0 6px 6px;
-  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  border-width: 1px;
+  -webkit-border-radius: 0 0 5px 5px;
+  -moz-border-radius: 0 0 5px 5px;
+  border-radius: 0 0 5px 5px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   -webkit-background-clip: padding-box;
-  -moz-background-clip: padding-box;
+  -moz-background-clip: padding;
   background-clip: padding-box;
   zoom: 1;
 }
-.dropdown-menu li {
-  float: none;
-  display: block;
-  background-color: none;
-}
 .dropdown-menu .divider {
   height: 1px;
-  margin: 5px 0;
+  margin: 5px 1px;
   overflow: hidden;
-  background-color: #eee;
+  background-color: #e5e5e5;
   border-bottom: 1px solid #ffffff;
 }
-.topbar .dropdown-menu a, .dropdown-menu a {
+.dropdown-menu a {
   display: block;
-  padding: 4px 15px;
+  padding: 2px 15px;
   clear: both;
   font-weight: normal;
   line-height: 18px;
   color: #555555;
-  text-shadow: 0 1px 0 #ffffff;
 }
-.topbar .dropdown-menu a:hover, .dropdown-menu a:hover {
-  color: #333333;
+.dropdown-menu a:hover {
+  color: #fff;
   text-decoration: none;
-  background-color: #dddddd;
-  background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
-  background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
-  background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
-  background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
-  background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
-  background-image: linear-gradient(top, #eeeeee, #dddddd);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #0064cd;
+  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
+  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
+  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
+  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
+  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
+  background-image: linear-gradient(top, #049cdb, #0064cd);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
-  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
-  -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
-  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
+  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
+  -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
 }
 .dropdown.open .dropdown-toggle {
   color: #ffffff;
@@ -2638,23 +2635,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
-.btn-toolbar {
-  zoom: 1;
-}
-.btn-toolbar:before, .btn-toolbar:after {
-  display: table;
-  *display: inline;
-  content: "";
-  zoom: 1;
-}
-.btn-toolbar:after {
-  clear: both;
-}
-.btn-toolbar .btn-group {
-  float: left;
-  margin-right: 10px;
-}
 .btn-group {
+  position: relative;
   zoom: 1;
 }
 .btn-group:before, .btn-group:after {
@@ -2666,6 +2648,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .btn-group:after {
   clear: both;
 }
+.btn-group + .btn-group {
+  margin-left: 5px;
+}
+.btn-toolbar .btn-group {
+  display: inline-block;
+}
 .btn-group .btn {
   position: relative;
   float: left;
@@ -2683,7 +2671,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   -moz-border-radius-bottomleft: 4px;
   border-bottom-left-radius: 4px;
 }
-.btn-group .btn:last-child {
+.btn-group .btn:last-child, .btn-group .dropdown-toggle {
   -webkit-border-top-right-radius: 4px;
   -moz-border-radius-topright: 4px;
   border-top-right-radius: 4px;
@@ -2700,7 +2688,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   -moz-border-radius-bottomleft: 6px;
   border-bottom-left-radius: 6px;
 }
-.btn-group .btn.large:last-child {
+.btn-group .btn.large:last-child, .btn-group .large.dropdown-toggle {
   -webkit-border-top-right-radius: 6px;
   -moz-border-radius-topright: 6px;
   border-top-right-radius: 6px;
@@ -2711,6 +2699,39 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active {
   z-index: 2;
 }
+.btn-group .dropdown-toggle {
+  padding-left: 8px;
+  padding-right: 8px;
+  -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), 0 1px 2px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.btn-group.open .dropdown-menu {
+  display: block;
+  top: 30px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+.btn-group.open .dropdown-toggle {
+  background-image: none;
+  -webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.btn .caret {
+  margin-top: 6px;
+  margin-left: 0;
+}
+.primary .caret,
+.danger .caret,
+.info .caret,
+.success .caret {
+  border-top-color: #fff;
+  filter: alpha(opacity=75);
+  -moz-opacity: 0.75;
+  opacity: 0.75;
+}
 .alert-message {
   position: relative;
   padding: 7px 15px;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 9996dc318..57dd13d55 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -80,7 +80,7 @@ ul.unstyled{margin-left:0;list-style:none;}
 dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;}
 dl dt{font-weight:bold;}
 dl dd{margin-left:9px;}
-hr{margin:27px 0;border:0;border-top:1px solid #e5e5e5;border-bottom:1px solid #fff;}
+hr{margin:18px 0;border:0;border-top:1px solid #e5e5e5;border-bottom:1px solid #fff;}
 strong{font-style:inherit;font-weight:bold;}
 em{font-style:italic;font-weight:inherit;line-height:inherit;}
 .muted{color:#999999;}
@@ -282,11 +282,11 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .minus{background-position:-432px -96px;}
 .asterisk{background-position:-456px -96px;}
 .dropdown{position:relative;}
-.dropdown-toggle: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 #ffffff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"\2193";}
-.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
-.dropdown-menu{position:absolute;top:40px;z-index:900;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:6px 0;margin-left:0;margin-right:0;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;zoom:1;}.dropdown-menu li{float:none;display:block;background-color:none;}
-.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
-.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{color:#333333;text-decoration:none;background-color:#dddddd;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
+.caret{display:inline-block;width:0;height:0;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"\2193";}
+.dropdown .caret{margin-top:8px;margin-left:2px;}
+.dropdown:hover .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
+.dropdown-menu{position:absolute;top:40px;z-index:900;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:5px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.1);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;}
+.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;}.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);}
 .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
 .dropdown.open .dropdown-menu{display:block;}
 .well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
@@ -421,16 +421,21 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .btn.small{padding:7px 9px 7px;font-size:11px;}
 :root .alert-message,:root .btn{border-radius:0 \0;}
 button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
-.btn-toolbar{zoom:1;}.btn-toolbar:before,.btn-toolbar:after{display:table;*display:inline;content:"";zoom:1;}
-.btn-toolbar:after{clear:both;}
-.btn-toolbar .btn-group{float:left;margin-right:10px;}
-.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;*display:inline;content:"";zoom:1;}
+.btn-group{position:relative;zoom:1;}.btn-group:before,.btn-group:after{display:table;*display:inline;content:"";zoom:1;}
 .btn-group:after{clear:both;}
-.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;}
-.btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;}
+.btn-group+.btn-group{margin-left:5px;}
+.btn-toolbar .btn-group{display:inline-block;}
+.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
+.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;}
+.btn-group .btn:last-child,.btn-group .dropdown-toggle{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;}
 .btn-group .btn.large:first-child{margin-left:0;-webkit-border-top-left-radius:6px;-moz-border-radius-topleft:6px;border-top-left-radius:6px;-webkit-border-bottom-left-radius:6px;-moz-border-radius-bottomleft:6px;border-bottom-left-radius:6px;}
-.btn-group .btn.large:last-child{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;}
+.btn-group .btn.large:last-child,.btn-group .large.dropdown-toggle{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;}
 .btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;}
+.btn-group .dropdown-toggle{padding-left:8px;padding-right:8px;-webkit-box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);}
+.btn-group.open .dropdown-menu{display:block;top:30px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
+.btn-group.open .dropdown-toggle{background-image:none;-webkit-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);}
+.btn .caret{margin-top:6px;margin-left:0;}
+.primary .caret,.danger .caret,.info .caret,.success .caret{border-top-color:#fff;filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}
 .alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#333333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);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);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 .close{*margin-top:3px;}
 .alert-message h5{line-height:18px;}
 .alert-message p{margin-bottom:0;}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 1180effd1..c359cf73b 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -402,7 +402,8 @@ pre.prettyprint {
 }
 
 /* Make tables spaced out a bit more */
-h2 + table {
+h2 + table,
+h2 + .row {
   margin-top: 5px;
 }
 
diff --git a/docs/base-css.html b/docs/base-css.html
index 910ea10bb..5a8b0b267 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1203,17 +1203,12 @@
 
   <br>
 
+  <h2>Button groups <small>Join buttons for more toolbar-like functionality</small></h2>
   <div class="row">
     <div class="span4">
-      <h2>Button groups</h2>
-      <p>Use button groups to join multiple buttons together as one composite component. Just build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. Button groups can also function as radios and checkboxes (see <a href="./javascript.html#buttons">the Javascript docs</a> for that).</p>
-      <p>You can also combine sets of button groups into a toolbar for more complex projects.</p>
-      <p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript &raquo;</a></p>
-      <p class="muted">Heads up: CSS for button groups is in a separate file, button-groups.less.</p>
-    </div>
-    <div class="span8">
-      <h3>Linked button group</h3>
-      <p>Using the standard <code>&lt;a class="btn" href="#"&gt;...&lt;/a&gt;</code> markup, simply add all the buttons you need.</p>
+      <h3>Button groups</h3>
+      <p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.</p>
+      <p>You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.</p>
       <div class="well" style="padding: 10px; margin-bottom: 9px;">
         <div class="btn-group">
           <a class="btn" href="#">Left</a>
@@ -1221,7 +1216,6 @@
           <a class="btn" href="#">Right</a>
         </div>
       </div>
-      <p>Level up one more time by wrapping multiple instances of <code>&lt;div class="btn-group"&gt;</code> with <code>&lt;div class="btn-toolbar"&gt;</code>.</p>
       <div class="well" style="padding: 10px;">
         <div class="btn-toolbar">
           <div class="btn-group">
@@ -1229,24 +1223,132 @@
             <a class="btn" href="#">2</a>
             <a class="btn" href="#">3</a>
             <a class="btn" href="#">4</a>
-            <a class="btn" href="#">5</a>
           </div>
           <div class="btn-group">
+            <a class="btn" href="#">5</a>
             <a class="btn" href="#">6</a>
             <a class="btn" href="#">7</a>
-            <a class="btn" href="#">8</a>
-          </div>
-          <div class="btn-group">
-            <a class="btn" href="#">9</a>
           </div>
           <div class="btn-group">
-            <a class="btn" href="#">10</a>
+            <a class="btn" href="#">8</a>
           </div>
         </div>
       </div>
+
+    </div>
+    <div class="span4">
+      <h3>Example markup</h3>
+      <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
+<pre class="prettyprint linenums">
+&lt;div class="btn-group"&gt;
+  &lt;a class="btn" href="#"&gt;1&lt;/a&gt;
+  &lt;a class="btn" href="#"&gt;2&lt;/a&gt;
+  &lt;a class="btn" href="#"&gt;3&lt;/a&gt;
+&lt;/div&gt;
+</pre>
+      <p>And with a toolbar for multiple groups:</p>
+<pre class="prettyprint linenums">
+&lt;div class="btn-toolbar"&gt;
+  &lt;div class="btn-group"&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+    <div class="span4">
+      <h3>Checkbox and radio flavors</h3>
+      <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.</p>
+      <p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript &raquo;</a></p>
+      <hr>
+      <h4 class="muted">Heads up</h4>
+      <p class="muted">CSS for button groups is in a separate file, button-groups.less.</p>
+    </div>
+  </div>
+  
+  <br>
+  <h2>Button dropdowns <small>Built on button groups to provide contextual menus</small></h2>
+  <div class="row">
+    <div class="span4">
+      <h3>Split button dropdowns</h3>
+      <p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
+      <div class="well" style="padding: 10px; margin-bottom: 9px;">
+        <div class="btn-toolbar" style="margin-bottom: 9px;">
+          <div class="btn-group">
+            <a class="btn" href="#">Action</a>
+            <a class="btn 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 class="btn-group">
+            <a class="btn primary" href="#">Action</a>
+            <a class="btn primary 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 class="btn-group">
+            <a class="btn danger" href="#">Danger</a>
+            <a class="btn danger 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 class="btn-toolbar">
+          <div class="btn-group">
+            <a class="btn success" href="#">Success</a>
+            <a class="btn success 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 class="btn-group">
+            <a class="btn info" href="#">Info</a>
+            <a class="btn info 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> <!-- /well -->
+    </div>
+    <div class="span8">
+      <h3>Example markup</h3>
+      <p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
+<pre class="prettyprint linenums">
+&lt;div class="btn-group"&gt;
+  &lt;a class="btn" href="#"&gt;Action&lt;/a&gt;
+  &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
+    &lt;span class="caret"&gt;&lt;/span&gt;
+  &lt;/a&gt;
+  &lt;ul class="dropdown-menu"&gt;
+    &lt;!-- dropdown menu links --&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
     </div>
   </div>
-    
 </section>
 
 
@@ -1454,5 +1556,11 @@
     <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
     <script src="assets/js/google-code-prettify/prettify.js"></script>
     <script src="assets/js/application.js"></script>
+    <script src="../js/bootstrap-dropdown.js"></script>
+    <script>
+      $(function () {
+        $('.dropdown-toggle').dropdown();
+      })
+    </script>
   </body>
 </html>
diff --git a/docs/javascript.html b/docs/javascript.html
index 1cba7766f..4671dd6eb 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -274,7 +274,7 @@ $('#myModal').on('hidden', function () {
 &lt;ul class="tabs"&gt;
   &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li id="secondary" class="dropdown"&gt;
-    &lt;a href="#secondary" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown&lt;/a&gt;
+    &lt;a href="#secondary" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
     &lt;ul class="dropdown-menu"&gt;
       &lt;li&gt;&lt;a href="#"&gt;Secondary link&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
@@ -302,7 +302,7 @@ $('#myModal').on('hidden', function () {
                 </form>
                 <ul class="nav secondary-nav">
                   <li id="fat-menu" class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a>
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1 <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                       <li><a href="#">Secondary link</a></li>
                       <li><a href="#">Something else here</a></li>
@@ -311,7 +311,7 @@ $('#myModal').on('hidden', function () {
                     </ul>
                   </li>
                   <li id="mdo-menu" class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a>
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                       <li><a href="#">Secondary link</a></li>
                       <li><a href="#">Something else here</a></li>
diff --git a/docs/upgrading.html b/docs/upgrading.html
index d22fa8c27..3e7e2c768 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -107,6 +107,12 @@
       <li>Fluid examples redone. <code>.fluid-container</code> now requires a <code>.sidebar-left</code> or <code>.sidebar-right</code> as well. Fluid sidebar element has a new class, <code>.fluid-sidebar</code>.</li>
     </ul>
   </li>
+  <li>Dropdown menus
+    <ul>
+      <li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li>
+      <li>Now requires you to add a <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> to show the dropdown arrow</li>
+    </ul>
+  </li>
 </ul>
 <!--
   <li>
diff --git a/lib/button-groups.less b/lib/button-groups.less
index 3024ecd65..d2307018e 100644
--- a/lib/button-groups.less
+++ b/lib/button-groups.less
@@ -1,65 +1,116 @@
 // BUTTON GROUPS
 // -------------
 
-// Group multiple button groups together for a toolbar
+
+// Make the div behave like a button
+.btn-group {
+  position: relative;
+  .clearfix(); // clears the floated buttons
+}
+
+// Space out series of button groups
+.btn-group + .btn-group {
+  margin-left: 5px;
+}
+
+// Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
-  .clearfix();
   .btn-group {
-    float: left;
-    margin-right: 10px;
+    display: inline-block;
   }
 }
 
-// Clear the float
-.btn-group {
-  .clearfix();
-}
 // Float them, remove border radius, then re-add to first and last elements
 .btn-group .btn {
   position: relative;
   float: left;
   margin-left: -1px;
   .border-radius(0);
-  // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
-  &:first-child {
-    margin-left: 0;
-       -webkit-border-top-left-radius: 4px;
-           -moz-border-radius-topleft: 4px;
-               border-top-left-radius: 4px;
-    -webkit-border-bottom-left-radius: 4px;
-        -moz-border-radius-bottomleft: 4px;
-            border-bottom-left-radius: 4px;
-  }
-  &:last-child {
-       -webkit-border-top-right-radius: 4px;
-           -moz-border-radius-topright: 4px;
-               border-top-right-radius: 4px;
-    -webkit-border-bottom-right-radius: 4px;
-        -moz-border-radius-bottomright: 4px;
-            border-bottom-right-radius: 4px;
-  }
-  // Reset corners for large buttons
-  &.large:first-child {
-    margin-left: 0;
-       -webkit-border-top-left-radius: 6px;
-           -moz-border-radius-topleft: 6px;
-               border-top-left-radius: 6px;
-    -webkit-border-bottom-left-radius: 6px;
-        -moz-border-radius-bottomleft: 6px;
-            border-bottom-left-radius: 6px;
-  }
-  &.large:last-child {
-       -webkit-border-top-right-radius: 6px;
-           -moz-border-radius-topright: 6px;
-               border-top-right-radius: 6px;
-    -webkit-border-bottom-right-radius: 6px;
-        -moz-border-radius-bottomright: 6px;
-            border-bottom-right-radius: 6px;
-  }
 }
+// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
+.btn-group .btn:first-child {
+  margin-left: 0;
+     -webkit-border-top-left-radius: 4px;
+         -moz-border-radius-topleft: 4px;
+             border-top-left-radius: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+      -moz-border-radius-bottomleft: 4px;
+          border-bottom-left-radius: 4px;
+}
+.btn-group .btn:last-child,
+.btn-group .dropdown-toggle {
+     -webkit-border-top-right-radius: 4px;
+         -moz-border-radius-topright: 4px;
+             border-top-right-radius: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+      -moz-border-radius-bottomright: 4px;
+          border-bottom-right-radius: 4px;
+}
+// Reset corners for large buttons
+.btn-group .btn.large:first-child {
+  margin-left: 0;
+     -webkit-border-top-left-radius: 6px;
+         -moz-border-radius-topleft: 6px;
+             border-top-left-radius: 6px;
+  -webkit-border-bottom-left-radius: 6px;
+      -moz-border-radius-bottomleft: 6px;
+          border-bottom-left-radius: 6px;
+}
+.btn-group .btn.large:last-child,
+.btn-group .large.dropdown-toggle {
+     -webkit-border-top-right-radius: 6px;
+         -moz-border-radius-topright: 6px;
+             border-top-right-radius: 6px;
+  -webkit-border-bottom-right-radius: 6px;
+      -moz-border-radius-bottomright: 6px;
+          border-bottom-right-radius: 6px;
+}
+
 // On hover/focus/active, bring the proper btn to front
 .btn-group .btn:hover,
 .btn-group .btn:focus,
 .btn-group .btn:active {
   z-index: 2;
 }
+
+
+// Split button dropdowns
+// ----------------------
+
+// Give the line between buttons some depth
+.btn-group .dropdown-toggle {
+  padding-left: 8px;
+  padding-right: 8px;
+  @shadow: inset 1px 0 0 rgba(255,255,255,.125), 0 1px 2px rgba(0,0,0,.05);
+  .box-shadow(@shadow);
+}
+
+// Reposition menu on open and round all corners
+.btn-group.open .dropdown-menu {
+  display: block;
+  top: 30px;
+  .border-radius(5px);
+}
+.btn-group.open .dropdown-toggle {
+  background-image: none;
+  @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+  .box-shadow(@shadow);
+}
+
+// Reposition the caret
+.btn .caret {
+  margin-top: 6px;
+  margin-left: 0;
+}
+
+// Account for other colors
+.primary,
+.danger,
+.info,
+.success {
+  .caret {
+    border-top-color: #fff;
+    .opacity(75);
+  }
+}
+
diff --git a/lib/dropdowns.less b/lib/dropdowns.less
index 18856cf05..e2bca04ac 100644
--- a/lib/dropdowns.less
+++ b/lib/dropdowns.less
@@ -3,22 +3,24 @@
 .dropdown {
   position: relative;
 }
-// The link that is clicked to toggle the dropdown
-.dropdown-toggle:after {
+// Dropdown arrow/caret
+.caret {
   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-left:  4px solid transparent;
   border-right: 4px solid transparent;
-  border-top: 4px solid @white;
+  border-top:   4px solid #000;
   .opacity(30);
   content: "\2193";
 }
-.dropdown:hover .dropdown-toggle:after {
+.dropdown .caret {
+  margin-top: 8px;
+  margin-left: 2px;
+}
+.dropdown:hover .caret {
   .opacity(100);
 }
 // The dropdown menu (ul)
@@ -27,55 +29,49 @@
   top: 40px;
   z-index: 900;
   float: left;
-  display: none; // None by default, but block on "open" of the menu
+  display: none; // none by default, but block on "open" of the menu
   min-width: 160px;
   max-width: 220px;
   _width: 160px;
-  padding: 6px 0;
-  margin-left: 0; // override default ul styles
-  margin-right: 0;
+  padding: 5px 0;
+  margin: 0; // override default ul
+  list-style: none;
   background-color: @white;
   border-color: #999;
-  border-color: rgba(0,0,0,.2);
+  border-color: rgba(0,0,0,.1);
   border-style: solid;
-  border-width: 0 1px 1px;
-  .border-radius(0 0 6px 6px);
-  .box-shadow(0 2px 4px rgba(0,0,0,.2));
-  .background-clip(padding-box);
+  border-width: 1px;
+  .border-radius(0 0 5px 5px);
+  .box-shadow(0 5px 10px rgba(0,0,0,.2));
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box;
   zoom: 1; // do we need this?
 
-  // Unfloat any li's to make them stack
-  li {
-    float: none;
-    display: block;
-    background-color: none;
-  }
   // Dividers (basically an hr) within the dropdown
   .divider {
     height: 1px;
-    margin: 5px 0;
+    margin: 5px 1px;
     overflow: hidden;
-    background-color: #eee;
+    background-color: #e5e5e5;
     border-bottom: 1px solid @white;
   }
-}
 
-.topbar .dropdown-menu, .dropdown-menu {
   // Links within the dropdown menu
   a {
     display: block;
-    padding: 4px 15px;
+    padding: 2px 15px;
     clear: both;
     font-weight: normal;
     line-height: 18px;
     color: @gray;
-    text-shadow: 0 1px 0 @white;
     // Hover state
     &:hover {
-      color: @grayDark;
+      color: #fff;
       text-decoration: none;
-      #gradient > .vertical(#eeeeee, #dddddd);
-      @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
+      text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+      #gradient > .vertical(@blue, @blueDark);
+      @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075);
       .box-shadow(@shadow);
     }
   }
diff --git a/lib/type.less b/lib/type.less
index 4aa642358..32cb09431 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -116,7 +116,7 @@ dl {
 
 // Horizontal rules
 hr {
-  margin: @baseLineHeight * 1.5 0;
+  margin: @baseLineHeight 0;
   border: 0;
   border-top: 1px solid #e5e5e5;
   border-bottom: 1px solid #fff;