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

6 files changed, 7 insertions, 7 deletions

diff --git a/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg b/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg
new file mode 100644
index 000000000..a5c7bb900
--- /dev/null
+++ b/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg
diff --git a/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg b/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg
new file mode 100644
index 000000000..2f795e18f
--- /dev/null
+++ b/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg
diff --git a/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg b/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg
new file mode 100644
index 000000000..911e64f89
--- /dev/null
+++ b/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg
diff --git a/docs/base-css.html b/docs/base-css.html
index 6847c0616..27251d824 100644
--- a/docs/base-css.html
+++ b/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;
diff --git a/docs/javascript.html b/docs/javascript.html
index cc9c0d9eb..425d347cb 100644
--- a/docs/javascript.html
+++ b/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>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 401e86cbe..2ac950251 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/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>