Refactor some common classes from docs css and examples, then prevent examples from using docs.css

docs/_includes/colophon.html

@@ -1,6 +1,6 @@
 <!-- Footer
 ================================================== -->
-<footer class="footer">
+<footer class="bs-docs-footer">
   <div class="container">
 
     <div class="bs-docs-social">

docs/_includes/header.html

@@ -14,9 +14,11 @@
 <!-- Bootstrap core CSS -->
 <link href="/assets/css/bootstrap.css" rel="stylesheet">
 
+{% if layout == "default" %}
 <!-- Documentation extras -->
 <link href="/assets/css/docs.css" rel="stylesheet">
 <link href="/assets/css/pygments-manni.css" rel="stylesheet">
+{% endif %}
 
 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>

docs/assets/css/docs.css

@@ -15,7 +15,7 @@ body {
 
 /*  */
 .bs-docs-body > .container,
-.bs-docs-body .footer .container {
+.bs-docs-footer .container {
   padding-left:  15px;
   padding-right: 15px;
 }
@@ -106,23 +106,23 @@ section > ul li {
 /* Marketing section of Overview
 -------------------------------------------------- */
 
-.marketing {
+.bs-docs-marketing {
   text-align: center;
   color: #5a5a5a;
 }
-.marketing h1 {
+.bs-docs-marketing h1 {
   margin: 60px 0 10px;
   font-size: 50px;
   line-height: 1;
 }
-.marketing h2 {
+.bs-docs-marketing h2 {
   margin-bottom: 5px;
 }
-.marketing p {
+.bs-docs-marketing p {
   font-size: 16px;
   line-height: 1.4;
 }
-.marketing .marketing-byline {
+.bs-docs-marketing .marketing-byline {
   margin-bottom: 40px;
   font-size: 21px;
   font-weight: 300;
@@ -436,13 +436,13 @@ section > ul li {
 /* Footer
 -------------------------------------------------- */
 
-.footer {
+.bs-docs-footer {
   text-align: center;
   padding: 30px 0;
   margin-top: 100px;
   border-top: 1px solid #e5e5e5;
 }
-.footer p {
+.bs-docs-footer p {
   margin-bottom: 0;
   color: #777;
 }

docs/examples/jumbotron-narrow.html

@@ -31,6 +31,13 @@ title: Narrow page template
     padding-bottom: 19px;
   }
 
+  /* Custom page footer */
+  .footer {
+    padding-top: 19px;
+    color: #777;
+    border-top: 1px solid #e5e5e5;
+  }
+
   /* Custom container */
   .container-narrow {
     margin: 0 auto;
@@ -119,8 +126,6 @@ title: Narrow page template
     </div>
   </div>
 
-  <hr>
-
   <div class="footer">
     <p>&copy; Company 2013</p>
   </div>