lame-copy-paste files because Pages doesn't support custom source yet

2026-05-27 14:46:01 +03:00 · 2014-02-13 09:36:49 -08:00
parent 8c5c80058d
commit c17e4c7f94
103 changed files with 10992 additions and 11844 deletions
@@ -13,10 +13,10 @@ h3, .h3,
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
+  margin-top: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #333;
-  margin-top: 0;
 }


@@ -41,9 +41,6 @@ h6, .h6 {
 }

 /* Nav links */
-.blog-nav {
-
-}
 .blog-nav-item {
  position: relative;
  display: inline-block;
@@ -65,15 +62,14 @@ h6, .h6 {
  position: absolute;
  bottom: 0;
  left: 50%;
-  display: block;
-  content: " ";
  width: 0;
  height: 0;
  margin-left: -5px;
  vertical-align: middle;
+  content: " ";
  border-right:  5px solid transparent;
-  border-left:   5px solid transparent;
  border-bottom: 5px solid;
+  border-left:   5px solid transparent;
 }


@@ -165,4 +161,3 @@ h6, .h6 {
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
 }
-
@@ -164,7 +164,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <script src="../../assets/js/docs.min.js"></script>
  </body>
@@ -16,19 +16,19 @@ body {
 .navbar-wrapper {
  position: absolute;
  top: 0;
-  left: 0;
  right: 0;
+  left: 0;
  z-index: 20;
 }

 /* Flip around the padding for proper display in narrow viewports */
 .navbar-wrapper .container {
-  padding-left: 0;
  padding-right: 0;
+  padding-left: 0;
 }
 .navbar-wrapper .navbar {
-  padding-left: 15px;
  padding-right: 15px;
+  padding-left: 15px;
 }


@@ -65,21 +65,21 @@ body {

 /* Pad the edges of the mobile views a bit */
 .marketing {
-  padding-left: 15px;
  padding-right: 15px;
+  padding-left: 15px;
 }

 /* Center align the text within the three columns below the carousel */
 .marketing .col-lg-4 {
-  text-align: center;
  margin-bottom: 20px;
+  text-align: center;
 }
 .marketing h2 {
  font-weight: normal;
 }
 .marketing .col-lg-4 p {
-  margin-left: 10px;
  margin-right: 10px;
+  margin-left: 10px;
 }


@@ -106,8 +106,8 @@ body {

  /* Remove the edge padding needed for mobile */
  .marketing {
-    padding-left: 0;
    padding-right: 0;
+    padding-left: 0;
  }

  /* Navbar positioning foo */
@@ -115,12 +115,12 @@ body {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
-    padding-left:  15px;
    padding-right: 15px;
+    padding-left:  15px;
  }
  .navbar-wrapper .navbar {
-    padding-left:  0;
    padding-right: 0;
+    padding-left:  0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
@@ -138,7 +138,6 @@ body {
  .featurette-heading {
    font-size: 50px;
  }
-
 }

@media (min-width: 992px) {
@@ -199,7 +199,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <script src="../../assets/js/docs.min.js"></script>
  </body>
@@ -48,8 +48,8 @@ body {
  vertical-align: top;
 }
 .cover-container {
-  margin-left: auto;
  margin-right: auto;
+  margin-left: auto;
 }

 /* Padding for spacing */
@@ -73,8 +73,8 @@ body {
  margin-left: 20px;
 }
 .masthead-nav > li > a {
-  padding-left: 0;
  padding-right: 0;
+  padding-left: 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff; /* IE8 proofing */
@@ -68,7 +68,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <script src="../../assets/js/docs.min.js"></script>
  </body>
@@ -29,12 +29,14 @@ body {
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
-    top: 0;
-    left: 0;
+    top: 51px;
    bottom: 0;
+    left: 0;
    z-index: 1000;
    display: block;
-    padding: 70px 20px 20px;
+    padding: 20px;
+    overflow-x: hidden;
+    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
@@ -42,13 +44,13 @@ body {

 /* Sidebar navigation */
 .nav-sidebar {
-  margin-left: -20px;
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
+  margin-left: -20px;
 }
 .nav-sidebar > li > a {
-  padding-left: 20px;
  padding-right: 20px;
+  padding-left: 20px;
 }
 .nav-sidebar > .active > a {
  color: #fff;
@@ -65,8 +67,8 @@ body {
 }
@media (min-width: 768px) {
  .main {
-    padding-left: 40px;
    padding-right: 40px;
+    padding-left: 40px;
  }
 }
 .main .page-header {
@@ -89,5 +91,6 @@ body {
  margin-bottom: 20px;
 }
 .placeholder img {
+  display: inline-block;
  border-radius: 50%;
 }
@@ -236,7 +236,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <script src="../../assets/js/docs.min.js"></script>
  </body>
@@ -1,6 +1,6 @@
 .container {
-  padding-left: 15px;
  padding-right: 15px;
+  padding-left: 15px;
 }

 h4 {
@@ -17,12 +17,12 @@ h4 {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
-  border: 1px solid #ddd;
  background-color: rgba(86,61,124,.15);
+  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
 }

 hr {
  margin-top: 40px;
  margin-bottom: 40px;
-}
+}
@@ -8,8 +8,8 @@ body {
 .header,
 .marketing,
 .footer {
-  padding-left: 15px;
  padding-right: 15px;
+  padding-left: 15px;
 }

 /* Custom page header */
@@ -18,10 +18,10 @@ body {
 }
 /* Make the masthead heading the same height as the navigation */
 .header h3 {
+  padding-bottom: 19px;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
-  padding-bottom: 19px;
 }

 /* Custom page footer */
@@ -47,8 +47,8 @@ body {
  border-bottom: 1px solid #e5e5e5;
 }
 .jumbotron .btn {
-  font-size: 21px;
  padding: 14px 24px;
+  font-size: 21px;
 }

 /* Supporting marketing content */
@@ -65,8 +65,8 @@ body {
  .header,
  .marketing,
  .footer {
-    padding-left: 0;
    padding-right: 0;
+    padding-left: 0;
  }
  /* Space out the masthead */
  .header {
@@ -93,7 +93,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
 </html>
@@ -53,7 +53,7 @@
      <div class="row">
        <div class="col-lg-4">
          <h2>Safari bug warning!</h2>
-          <p class="text-danger">Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
+          <p class="text-danger">As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
@@ -3,10 +3,10 @@ body {
 }

 .footer {
-  border-top: 1px solid #eee;
-  margin-top: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
+  margin-top: 40px;
+  border-top: 1px solid #eee;
 }

 /* Main marketing message and sign up button */
@@ -15,33 +15,33 @@ body {
  background-color: transparent;
 }
 .jumbotron .btn {
-  font-size: 21px;
  padding: 14px 24px;
+  font-size: 21px;
 }

 /* Customize the nav-justified links to be fill the entire space of the .navbar */

 .nav-justified {
  background-color: #eee;
-  border-radius: 5px;
  border: 1px solid #ccc;
+  border-radius: 5px;
 }
 .nav-justified > li > a {
-  margin-bottom: 0;
  padding-top: 15px;
  padding-bottom: 15px;
-  color: #777;
+  margin-bottom: 0;
  font-weight: bold;
+  color: #777;
  text-align: center;
-  border-bottom: 1px solid #d5d5d5;
  background-color: #e5e5e5; /* Old browsers */
-  background-repeat: repeat-x; /* Repeat the gradient */
-  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
+  background-image:    -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
-  background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */
+  background-image:      -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
-  background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
+  background-repeat: repeat-x; /* Repeat the gradient */
+  border-bottom: 1px solid #d5d5d5;
 }
 .nav-justified > .active > a,
 .nav-justified > .active > a:hover,
@@ -63,16 +63,16 @@ body {
    max-height: 52px;
  }
  .nav-justified > li > a {
-    border-left: 1px solid #fff;
    border-right: 1px solid #d5d5d5;
+    border-left: 1px solid #fff;
  }
  .nav-justified > li:first-child > a {
    border-left: 0;
    border-radius: 5px 0 0 5px;
  }
  .nav-justified > li:last-child > a {
-    border-radius: 0 5px 5px 0;
    border-right: 0;
+    border-radius: 0 5px 5px 0;
  }
 }

@@ -82,7 +82,7 @@ body {
  .masthead,
  .marketing,
  .footer {
-    padding-left: 0;
    padding-right: 0;
+    padding-left: 0;
  }
 }
@@ -85,7 +85,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
 </html>
@@ -86,7 +86,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
 </html>
@@ -4,4 +4,4 @@ body {

 .navbar-static-top {
  margin-bottom: 19px;
-}
+}
@@ -84,7 +84,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
 </html>
@@ -99,7 +99,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
 </html>
@@ -6,9 +6,9 @@

 /* Account for fixed navbar */
 body {
+  min-width: 970px;
  padding-top: 70px;
  padding-bottom: 30px;
-  min-width: 970px;
 }

 /* Finesse the page header spacing */
@@ -28,8 +28,8 @@ body {

 /* Reset the container */
 .container {
-  max-width: none !important;
  width: 970px;
+  max-width: none !important;
 }

 /* Demonstrate the grids */
@@ -37,8 +37,8 @@ body {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
-  border: 1px solid #ddd;
  background-color: rgba(86,61,124,.15);
+  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
 }

@@ -94,12 +94,12 @@ body {
  position: absolute;
  float: left;
  background-color: #fff;
-  border: 1px solid #cccccc;
-  border: 1px solid rgba(0, 0, 0, 0.15);
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, .15);
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
-  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 }
 .navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #333;
@@ -123,7 +123,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <script src="offcanvas.js"></script>
  </body>
@@ -20,9 +20,17 @@ footer {
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
-    -webkit-transition: all 0.25s ease-out;
-    -moz-transition: all 0.25s ease-out;
-    transition: all 0.25s ease-out;
+    -webkit-transition: all .25s ease-out;
+       -moz-transition: all .25s ease-out;
+            transition: all .25s ease-out;
+  }
+
+  .row-offcanvas-right {
+    right: 0;
+  }
+
+  .row-offcanvas-left {
+    left: 0;
  }

  .row-offcanvas-right
@@ -1,5 +1,5 @@
-$(document).ready(function() {
-  $('[data-toggle=offcanvas]').click(function() {
-    $('.row-offcanvas').toggleClass('active');
+$(document).ready(function () {
+  $('[data-toggle=offcanvas]').click(function () {
+    $('.row-offcanvas').toggleClass('active')
  });
 });
@@ -18,20 +18,20 @@ body {
 }
 .form-signin .form-control {
  position: relative;
-  font-size: 16px;
  height: auto;
-  padding: 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
+  padding: 10px;
+  font-size: 16px;
 }
 .form-signin .form-control:focus {
  z-index: 2;
 }
 .form-signin input[type="email"] {
  margin-bottom: -1px;
-  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
 }
 .form-signin input[type="password"] {
  margin-bottom: 10px;
@@ -62,7 +62,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
 </html>
@@ -28,53 +28,49 @@

  <body>

-    <!-- Wrap all page content here -->
-    <div id="wrap">
-
-      <!-- Fixed navbar -->
-      <div class="navbar navbar-default navbar-fixed-top" role="navigation">
-        <div class="container">
-          <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-              <span class="sr-only">Toggle navigation</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="#">Project name</a>
-          </div>
-          <div class="collapse navbar-collapse">
-            <ul class="nav navbar-nav">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#about">About</a></li>
-              <li><a href="#contact">Contact</a></li>
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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 class="dropdown-header">Nav header</li>
-                  <li><a href="#">Separated link</a></li>
-                  <li><a href="#">One more separated link</a></li>
-                </ul>
-              </li>
-            </ul>
-          </div><!--/.nav-collapse -->
-        </div>
-      </div>
-
-      <!-- Begin page content -->
+    <!-- Fixed navbar -->
+    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
-        <div class="page-header">
-          <h1>Sticky footer with fixed navbar</h1>
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">Project name</a>
        </div>
-        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
-        <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
+        <div class="collapse navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#contact">Contact</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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 class="dropdown-header">Nav header</li>
+                <li><a href="#">Separated link</a></li>
+                <li><a href="#">One more separated link</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div><!--/.nav-collapse -->
      </div>
    </div>

+    <!-- Begin page content -->
+    <div class="container">
+      <div class="page-header">
+        <h1>Sticky footer with fixed navbar</h1>
+      </div>
+      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
+      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
+    </div>
+
    <div id="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
@@ -85,7 +81,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
 </html>
@@ -1,24 +1,18 @@
 /* Sticky footer styles
 -------------------------------------------------- */
-
-html,
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-}
-
-/* Wrapper for page content to push down footer */
-#wrap {
+html {
+  position: relative;
  min-height: 100%;
-  height: auto;
-  /* Negative indent footer by its height */
-  margin: 0 auto -60px;
-  /* Pad bottom by footer height */
-  padding: 0 0 60px;
 }
-
-/* Set the fixed height of the footer here */
+body {
+  /* Margin bottom by footer height */
+  margin-bottom: 60px;
+}
 #footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
 }
@@ -28,7 +22,7 @@ body {
 -------------------------------------------------- */
 /* Not required for template or sticky footer method. */

-#wrap > .container {
+body > .container {
  padding: 60px 15px 0;
 }
 .container .text-muted {
@@ -36,8 +30,8 @@ body {
 }

 #footer > .container {
-  padding-left: 15px;
  padding-right: 15px;
+  padding-left: 15px;
 }

 code {
@@ -28,17 +28,13 @@

  <body>

-    <!-- Wrap all page content here -->
-    <div id="wrap">
-
-      <!-- Begin page content -->
-      <div class="container">
-        <div class="page-header">
-          <h1>Sticky footer</h1>
-        </div>
-        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
-        <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
+    <!-- Begin page content -->
+    <div class="container">
+      <div class="page-header">
+        <h1>Sticky footer</h1>
      </div>
+      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
+      <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
    </div>

    <div id="footer">
@@ -1,24 +1,18 @@
 /* Sticky footer styles
 -------------------------------------------------- */
-
-html,
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-}
-
-/* Wrapper for page content to push down footer */
-#wrap {
+html {
+  position: relative;
  min-height: 100%;
-  height: auto;
-  /* Negative indent footer by its height */
-  margin: 0 auto -60px;
-  /* Pad bottom by footer height */
-  padding: 0 0 60px;
 }
-
-/* Set the fixed height of the footer here */
+body {
+  /* Margin bottom by footer height */
+  margin-bottom: 60px;
+}
 #footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
 }
@@ -377,7 +377,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <script src="../../assets/js/docs.min.js"></script>
  </body>
@@ -4,11 +4,11 @@ body {
 }

 .theme-dropdown .dropdown-menu {
-  display: block;
  position: static;
+  display: block;
  margin-bottom: 20px;
 }

 .theme-showcase > p > .btn {
  margin: 5px 0;
-}
+}