adding actual images to carousel to ensure you can see things are animating; updated styles of carousel controls to work on light and dark backgrounds and use opacity for effects

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: Tue Jan 24 20:30:11 PST 2012
+ * Date: Tue Jan 24 20:44:12 PST 2012
  */
 article,
 aside,
@@ -2953,13 +2953,21 @@ a.thumbnail:hover {
   font-size: 60px;
   font-weight: 100;
   line-height: 30px;
-  color: #ccc;
+  color: #fff;
   text-align: center;
-  background: #999999;
-  background: rgba(0, 0, 0, 0.5);
-  -webkit-border-radius: 20px;
-  -moz-border-radius: 20px;
-  border-radius: 20px;
+  background: #222222;
+  border: 3px solid #fff;
+  -webkit-border-radius: 23px;
+  -moz-border-radius: 23px;
+  border-radius: 23px;
+  filter: alpha(opacity=50);
+  -moz-opacity: 0.5;
+  opacity: 0.5;
+  -webkit-transition: all 0.2s linear;
+  -moz-transition: all 0.2s linear;
+  -ms-transition: all 0.2s linear;
+  -o-transition: all 0.2s linear;
+  transition: all 0.2s linear;
 }
 .carousel-control.right {
   left: auto;
@@ -2968,8 +2976,9 @@ a.thumbnail:hover {
 .carousel-control:hover {
   color: #ffffff;
   text-decoration: none;
-  background: #333333;
-  background: rgba(0, 0, 0, 0.75);
+  filter: alpha(opacity=90);
+  -moz-opacity: 0.9;
+  opacity: 0.9;
 }
 .carousel-caption {
   position: absolute;

bootstrap.min.css

@@ -530,8 +530,8 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
 .carousel .next.left,.carousel .prev.right{left:0;}
 .carousel .active.left{left:-100%;}
 .carousel .active.right{left:100%;}
-.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#ccc;text-align:center;background:#999999;background:rgba(0, 0, 0, 0.5);-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}.carousel-control.right{left:auto;right:15px;}
-.carousel-control:hover{color:#ffffff;text-decoration:none;background:#333333;background:rgba(0, 0, 0, 0.75);}
+.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-align:center;background:#222222;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}.carousel-control.right{left:auto;right:15px;}
+.carousel-control:hover{color:#ffffff;text-decoration:none;filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;}
 .carousel-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 15px 5px;background:#333333;background:rgba(0, 0, 0, 0.75);}
 .carousel-caption h4,.carousel-caption p{color:#ffffff;}
 .pull-right{float:right;}

docs/base-css.html

@@ -368,7 +368,7 @@
       <tr>
         <td><code>&lt;pre class="prettyprint"&gt;</code></td>
         <td>
-          <p>Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
+          <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
 <pre class="prettyprint">&lt;div&gt;
   &lt;h1&gt;Heading&lt;/h1&gt;
   &lt;p&gt;Something right here…&lt;/p&gt;

docs/javascript.html

@@ -1215,21 +1215,21 @@ $('#myCollapsible').on('hidden', function () {
           <div id="myCarousel" class="carousel slide">
             <div class="carousel-inner">
               <div class="item active">
-                <img src="http://placehold.it/1000x500" alt="">
+                <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
                 <div class="carousel-caption">
                   <h4>First Thumbnail label</h4>
                   <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                 </div>
               </div>
               <div class="item">
-                <img src="http://placehold.it/1000x500" alt="">
+                <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
                 <div class="carousel-caption">
                   <h4>Second Thumbnail label</h4>
                   <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                 </div>
               </div>
               <div class="item">
-                <img src="http://placehold.it/1000x500" alt="">
+                <img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
                 <div class="carousel-caption">
                   <h4>Third Thumbnail label</h4>
                   <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

docs/templates/pages/javascript.mustache

@@ -1155,21 +1155,21 @@ $('#myCollapsible').on('hidden', function () {
           <div id="myCarousel" class="carousel slide">
             <div class="carousel-inner">
               <div class="item active">
-                <img src="http://placehold.it/1000x500" alt="">
+                <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
                 <div class="carousel-caption">
                   <h4>{{_i}}First Thumbnail label{{/i}}</h4>
                   <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                 </div>
               </div>
               <div class="item">
-                <img src="http://placehold.it/1000x500" alt="">
+                <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
                 <div class="carousel-caption">
                   <h4>{{_i}}Second Thumbnail label{{/i}}</h4>
                   <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                 </div>
               </div>
               <div class="item">
-                <img src="http://placehold.it/1000x500" alt="">
+                <img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
                 <div class="carousel-caption">
                   <h4>{{_i}}Third Thumbnail label{{/i}}</h4>
                   <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

lib/carousel.less

@@ -68,11 +68,13 @@
   font-size: 60px;
   font-weight: 100;
   line-height: 30px;
-  color: #ccc;
+  color: #fff;
   text-align: center;
-  background: @grayLight;
-  background: rgba(0,0,0,.5);
-  .border-radius(20px);
+  background: @grayDarker;
+  border: 3px solid #fff;
+  .border-radius(23px);
+  .opacity(50);
+  .transition(all .2s linear);
 
   // Reposition the right one
   &.right {
@@ -84,8 +86,7 @@
   &:hover {
     color: @white;
     text-decoration: none;
-    background: @grayDark;
-    background: rgba(0,0,0,.75);
+    .opacity(90);
   }
 }