diff --git a/docs/static/css/drf-styles.css b/docs/static/css/drf-styles.css
new file mode 100644
index 000000000..25b6f8d2a
--- /dev/null
+++ b/docs/static/css/drf-styles.css
@@ -0,0 +1,46 @@
+body {
+  padding-top: 60px;
+  padding-bottom: 40px;
+}
+
+/* Set the table of contents to static so it flows back into the content when
+   viewed on tablets and smaller. */
+@media (max-width: 767px) {
+  #table-of-contents {
+    position: static;
+  }
+}
+
+.nav-list li.main {
+  font-weight: bold;
+}
+
+blockquote {
+  font-family: Georgia, serif;
+  font-size: 18px;
+  font-style: italic;
+  margin: 0.25em 0;
+  padding: 0.25em 40px;
+  line-height: 1.45;
+  position: relative;
+  color: #383838;
+  border-left: none;
+}
+
+  blockquote:before {
+  display: block;
+  content: "\201C";
+  font-size: 80px;
+  position: absolute;
+  left: -10px;
+  top: -20px;
+  color: #7a7a7a;
+}
+
+  blockquote p:last-child {
+  color: #999999;
+  font-size: 14px;
+  display: block;
+  margin-top: 5px;
+}
+
diff --git a/docs/template.html b/docs/template.html
index 5e755f835..1b4113d1a 100644
--- a/docs/template.html
+++ b/docs/template.html
@@ -8,47 +8,8 @@
 
     <!-- Le styles -->
     <link href="{{ base_url }}/css/bootstrap.css" rel="stylesheet">
-    <style type="text/css">
-      body {
-        padding-top: 60px;
-        padding-bottom: 40px;
-      }
-      .sidebar-nav {
-        padding: 9px 0;
-      }
-      .nav-list li.main {
-        font-weight: bold;
-      }
-      blockquote {
-font-family: Georgia, serif;
-font-size: 18px;
-font-style: italic;
-margin: 0.25em 0;
-padding: 0.25em 40px;
-line-height: 1.45;
-position: relative;
-color: #383838;
-border-left: none;
-}
-
-blockquote:before {
-display: block;
-content: "\201C";
-font-size: 80px;
-position: absolute;
-left: -10px;
-top: -20px;
-color: #7a7a7a;
-}
-
-blockquote p:last-child {
-color: #999999;
-font-size: 14px;
-display: block;
-margin-top: 5px;
-}
-    </style>
     <link href="{{ base_url }}/css/bootstrap-responsive.css" rel="stylesheet">
+    <link href="{{ base_url }}/css/drf-styles.css" rel="stylesheet">
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
@@ -108,14 +69,14 @@ margin-top: 5px;
               </li>
             </ul>
             <ul class="nav pull-right">
-                      <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Version: 2.0.0 <b class="caret"></b></a>
-                        <ul class="dropdown-menu">
-                          <li><a href="#">Trunk</a></li>
-                          <li><a href="#">2.0.0</a></li>
-                        </ul>
-                      </li>
-                    </ul>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Version: 2.0.0 <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">Trunk</a></li>
+                  <li><a href="#">2.0.0</a></li>
+                </ul>
+              </li>
+            </ul>
           </div><!--/.nav-collapse -->
         </div>
       </div>
@@ -123,16 +84,16 @@ margin-top: 5px;
 
     <div class="container-fluid">
       <div class="row-fluid">
-          <div class="span3">
-            <div class="well affix span3">
-              <ul class="nav nav-list side-nav">
-{{ toc }}
-              </ul>
-            </div>
+        <div class="span3">
+          <div id="table-of-contents" class="well affix span3">
+            <ul class="nav nav-list side-nav">
+              {{ toc }}
+            </ul>
+          </div>
         </div>
 
         <div class="span9">
-{{ content }}
+          {{ content }}
         </div><!--/span-->
       </div><!--/row-->
     </div><!--/.fluid-container-->