- all new approach which allows the main text to be on the top

5 files changed, 207 insertions, 134 deletions

diff --git a/doc/build/index.rst b/doc/build/index.rst
index ab5a9d696..1b790026f 100644
--- a/doc/build/index.rst
+++ b/doc/build/index.rst
@@ -11,7 +11,7 @@ Getting Started
 
 A high level view and getting set up.
 
-:ref:`Overview <overview>` |
+:doc:`Overview <intro>` |
 :ref:`Installation Guide <installation>` |
 :doc:`Frequently Asked Questions <faq>` |
 :doc:`Migration from 0.7 <changelog/migration_08>` |
diff --git a/doc/build/intro.rst b/doc/build/intro.rst
index b16e360ae..5a270e0a5 100644
--- a/doc/build/intro.rst
+++ b/doc/build/intro.rst
@@ -1,11 +1,7 @@
 .. _overview_toplevel:
-
-========
-Overview
-========
-
 .. _overview:
 
+========
 Overview
 ========
 
diff --git a/doc/build/static/docs.css b/doc/build/static/docs.css
index 8e3ea1d6a..b24e9dcdb 100644
--- a/doc/build/static/docs.css
+++ b/doc/build/static/docs.css
@@ -86,21 +86,34 @@ a.headerlink:hover {
   position: relative;
 }
 
-#docs-top-navigation,
-#docs-bottom-navigation {
+#docs-sidebar-popout,
+#docs-bottom-navigation,
+#index-nav {
   font-family: Verdana, sans-serif;
   background-color: #FBFBEE;
   border: solid 1px #CCC;
-  padding:10px;
   font-size:.8em;
 }
 
-#docs-top-navigation {
-  margin:10px 0px;
-  line-height:1.2em;
-  position: relative;
+#docs-bottom-navigation,
+#index-nav {
+  padding:10px;
+}
+
+#docs-sidebar-popout {
+  font-size:.75em;
+}
+
+#docs-sidebar-popout p,
+#docs-sidebar-popout form {
+  margin:5px 0 5px 0px;
+}
+
+#docs-sidebar-popout h3 {
+  margin:0 0 10px 0;
 }
 
+
 #docs-version-header {
   position: absolute;
   right: 0;
@@ -162,7 +175,8 @@ a.headerlink:hover {
 }
 
 #docs-body,
-#docs-sidebar
+#docs-sidebar,
+#index-nav
  {
   /*font-family: helvetica, arial, sans-serif;
   font-size:.9em;*/
@@ -181,64 +195,98 @@ a.headerlink:hover {
   font-size:.85em;
 }
 
-#docs-sidebar {
+#fixed-sidebar {
+  position: relative;
+}
+
+#fixed-sidebar.withsidebar {
+  float: left;
+  width:224px;
+}
+
+#fixed-sidebar.preautomated {
+    position: fixed;
+    float: none;
+    top:0;
+    bottom: 0;
+}
+
+#fixed-sidebar.automated {
+    position: fixed;
+    float: none;
+    top: 120px;
+    min-height: 0;
+}
+
 
-  width:210px;
-  padding: 0px 0 0 15px;
+#docs-sidebar {
   font-size:.85em;
 
   border: solid 1px #CCC;
 
   z-index: 3;
   background-color: #EFEFEF;
+}
 
-  float: left;
-  top: 120px;
-  bottom: 0;
-  min-height: 0;
-  overflow-y: auto;
+#index-nav {
+  position: relative;
+  margin-top:10px;
+  padding:0 10px;
 }
 
+#index-nav form {
+  padding-top:10px;
+  float:right;
+}
 
-#docs-top-navigation-container {
+#sidebar-paginate {
+  position: absolute;
+  bottom: 4.5em;
+  left: 10px;
 }
 
-#docs-top-navigation-container.automated {
-    position:fixed;
-    top:0;
-    z-index:100;
-    width:100%;
+#sidebar-topnav {
+  position: absolute;
+  bottom: 3em;
+  left: 10px;
 }
 
-/* http://css-tricks.com/hash-tag-links-padding/ */
-#docs-container.preautomated div.section:before {
-    content: " ";
-    display: block;
-    height:120px;
-    margin-top: -120px;
-    visibility: hidden;
+#sidebar-search {
+  position: absolute;
+  bottom: 1em;
+  left: 10px;
 }
 
+#docs-sidebar {
+  top: 132px;
+  bottom: 0;
+  min-height: 0;
+  overflow-y: auto;
+  margin-top:5px;
+  width:212px;
+  padding-left:10px;
+}
 
-#docs-sidebar.preautomated:after {
-  content: " ";
-  display:block;
-  height: 150px;
+#docs-sidebar-popout {
+  height:120px;
+  max-height: 120px;
+  width:212px;
+  padding-left:10px;
+  padding-top:10px;
 }
 
 
-#docs-sidebar.preautomated {
-  position: fixed;
+#fixed-sidebar.preautomated #docs-sidebar,
+#fixed-sidebar.preautomated #docs-sidebar-popout {
+  position:absolute;
 }
 
-#docs-sidebar.automated {
-    position: fixed;
-    float: none;
-    top: 120px;
-    min-height: 0;
+#fixed-sidebar.preautomated #docs-sidebar:after {
+  content: " ";
+  display:block;
+  height: 150px;
 }
 
-
 #docs-sidebar h3, #docs-sidebar h4 {
     background-color: #DDDDDD;
     color: #222222;
@@ -246,11 +294,15 @@ a.headerlink:hover {
     font-size: 1.1em;
     font-weight: normal;
     margin: 10px 0 0 -15px;
-    padding: 5px 10px 5px 10px;
+    padding: 5px 10px 5px 15px;
     text-shadow: 1px 1px 0 white;
     /*width:210px;*/
 }
 
+#docs-sidebar h3:first-child {
+  margin-top: 0px;
+}
+
 #docs-sidebar h3 a, #docs-sidebar h4 a {
   color: #222222;
 }
@@ -268,18 +320,22 @@ a.headerlink:hover {
     margin-left: 20px;
 }
 
+
+
+
 #docs-body {
   background-color:#FFFFFF;
   padding:1px 10px 10px 10px;
 
   border: solid 1px #CCC;
-
+  margin-top:10px;
 }
 
 #docs-body.withsidebar {
-  margin: 0 0 0 230px;
+  margin-left: 230px;
 }
 
+
 #docs-body h1,
 #docs-body h2,
 #docs-body h3,
@@ -287,12 +343,13 @@ a.headerlink:hover {
   font-family:Helvetica, Arial, sans-serif;
 }
 
-#docs-body h1 {
+#docs-body #sqlalchemy-documentation h1 {
   /* hide the <h1> for each content section. */
   display:none;
   font-size:2.0em;
 }
 
+
 #docs-body h2 {
   font-size:1.8em;
   border-top:1px solid;
@@ -404,6 +461,20 @@ div.admonition, div.topic, .deprecated, .versionadded, .versionchanged {
     box-shadow: 2px 2px 3px #DFDFDF;
 }
 
+div.sidebar {
+    background-color: #FFFFEE;
+    border: 1px solid #DDDDBB;
+    float: right;
+    margin: 10px 0 10px 1em;
+    padding: 7px 7px 0;
+    width: 40%;
+    font-size:.9em;
+}
+
+p.sidebar-title {
+    font-weight: bold;
+}
+
 /* grrr sphinx changing your document structures, removing classes.... */
 
 .versionadded .versionmodified,
@@ -445,11 +516,12 @@ dl.method > dt,
 dl.class > dt,
 dl.exception > dt
 {
-    background-color:#F0F0F0;
+    background-color: #EFEFEF;
     margin:25px -10px 10px 10px;
     padding: 0px 10px;
 }
 
+
 dl.glossary > dt {
   font-weight:bold;
   font-size:1.1em;
diff --git a/doc/build/static/init.js b/doc/build/static/init.js
index 2be395a1f..4bcb4411d 100644
--- a/doc/build/static/init.js
+++ b/doc/build/static/init.js
@@ -11,58 +11,33 @@ var automatedBreakpoint = -1;
 
 function initFloatyThings() {
 
-    automatedBreakpoint = $("#docs-container").position().top;
+    automatedBreakpoint = $("#docs-container").position().top + $("#docs-top-navigation-container").height();
 
-    parentOffset = $("#docs-container").parent().position().top - $("#docs-container").position().top;
+    $("#fixed-sidebar.withsidebar").addClass("preautomated");
 
-    // safari doesn't give us 120px for this CSS even though
-    // it's in docs.css as that
-    sidebarTop = "120px"; //$("#docs-sidebar").css("top");
-
-    $("#docs-top-navigation-container").addClass("preautomated");
-    $("#docs-sidebar").addClass("preautomated");
-    $("#docs-container").addClass("preautomated");
-
-    function setNavSize() {
-        $("#docs-top-navigation-container").css("width", $("#docs-container").width());
-    }
 
     function setScroll() {
 
         var scrolltop = $(window).scrollTop();
         if (scrolltop >= automatedBreakpoint) {
-            setNavSize();
-            $("#docs-top-navigation-container").addClass("automated");
-            $("#docs-sidebar").addClass("automated");
-
-            // note this height is dependent on docs-top-navigation-container
-            // being position:fixed or absolute, otherwise it might get
-            // a little squashed
-            containerHeight = $("#docs-top-navigation-container").height();
-            $("#docs-body").css("margin-top", containerHeight - parentOffset + 1);
-            $("#docs-sidebar").css("top", sidebarTop);
+            $("#fixed-sidebar.withsidebar").css("top", 5);
         }
         else {
-            $("#docs-sidebar").removeClass("automated");
-            $("#docs-top-navigation-container").removeClass("automated");
-            $("#docs-body").css("margin-top", "");
-            // safari/chrome allow negative scroll positions
-            $("#docs-sidebar").css("top", $("#docs-body").offset().top - Math.max(scrolltop, 0));
+            $("#fixed-sidebar.withsidebar").css(
+                "top", $("#docs-body").offset().top - Math.max(scrolltop, 0));
         }
 
 
     }
     $(window).scroll(setScroll)
 
-    $(window).resize(setNavSize());
     setScroll();
 }
 
 
 $(document).ready(function() {
     initSQLPopups();
-    // disable for now, still can't get anchors to work in all cases
-    if (0) { //!$.browser.mobile) {
+    if (!$.browser.mobile) {
         initFloatyThings();
     }
 });
diff --git a/doc/build/templates/layout.mako b/doc/build/templates/layout.mako
index b4659ce98..db4da8399 100644
--- a/doc/build/templates/layout.mako
+++ b/doc/build/templates/layout.mako
@@ -42,6 +42,7 @@ withsidebar = bool(toc) and current_page_name != 'index'
     ${docstitle|h}
 </%block>
 
+
 <div id="docs-container">
 
 
@@ -100,30 +101,91 @@ withsidebar = bool(toc) and current_page_name != 'index'
     <h1>${docstitle|h}</h1>
 
 </div>
-<div id="docs-top-navigation">
-    <div id="docs-top-page-control" class="docs-navigation-links">
-        % if prevtopic:
-            <a href="${prevtopic['link']|h}" title="${prevtopic['title']}">Prev</a> |
-        % endif
-        % if nexttopic:
-            <a href="${nexttopic['link']|h}" title="${nexttopic['title']}">Next</a> |
-        % endif
+</div>
+
+<div id="docs-body-container">
+
+    <div id="fixed-sidebar" class="${'withsidebar' if withsidebar else ''}">
+
+    % if not withsidebar:
+        <div id="index-nav">
+            <form class="search" action="${pathto('search')}" method="get">
+              <input type="text" name="q" size="12" /> <input type="submit" value="${_('Search')}" />
+              <input type="hidden" name="check_keywords" value="yes" />
+              <input type="hidden" name="area" value="default" />
+            </form>
+
+            <p>
+            <a href="${pathto('index')}">Contents</a> |
+            <a href="${pathto('genindex')}">Index</a>
+            % if pdf_url:
+            | <a href="${pdf_url}">Download as PDF</a>
+            % endif
+            </p>
+
+        </div>
+    % endif
 
-        <a href="${pathto('index')}">Contents</a> |
-        <a href="${pathto('genindex')}">Index</a>
-        % if pdf_url:
-        | <a href="${pdf_url}">PDF</a>
+    % if withsidebar:
+        <div id="docs-sidebar-popout">
+            <h3><a href="${pathto('index')}">${docstitle|h}</a></h3>
+
+            <p id="sidebar-paginate">
+                % if parents:
+                    <a href="${parents[-1]['link']|h}" title="${parents[-1]['title']}">Up</a> |
+                % else:
+                    <a href="${pathto('index')}" title="${docstitle|h}">Up</a> |
+                % endif
+
+                % if prevtopic:
+                    <a href="${prevtopic['link']|h}" title="${prevtopic['title']}">Prev</a> |
+                % endif
+                % if nexttopic:
+                    <a href="${nexttopic['link']|h}" title="${nexttopic['title']}">Next</a>
+                % endif
+            </p>
+
+            <p id="sidebar-topnav">
+                <a href="${pathto('index')}">Contents</a> |
+                <a href="${pathto('genindex')}">Index</a>
+                % if pdf_url:
+                | <a href="${pdf_url}">PDF</a>
+                % endif
+            </p>
+
+            <div id="sidebar-search">
+                <form class="search" action="${pathto('search')}" method="get">
+                  <input type="text" name="q" size="12" /> <input type="submit" value="${_('Search')}" />
+                  <input type="hidden" name="check_keywords" value="yes" />
+                  <input type="hidden" name="area" value="default" />
+                </form>
+            </div>
+
+        </div>
+
+        <div id="docs-sidebar">
+
+        <h3><a href="#">\
+            <%block name="show_title">
+                ${title}
+            </%block>
+        </a></h3>
+        ${toc}
+
+        % if rtd:
+        <h4>Project Versions</h4>
+        <ul class="version-listing">
+        </ul>
         % endif
 
-        | <form class="search" action="${pathto('search')}" method="get">
-          <input type="text" name="q" size="12" /> <input type="submit" value="${_('Search')}" />
-          <input type="hidden" name="check_keywords" value="yes" />
-          <input type="hidden" name="area" value="default" />
-        </form>
+
+        </div>
+    % endif
 
     </div>
 
-    <div id="docs-navigation-banner">
+    <%doc>
+    <div id="docs-top-navigation">
         <a href="${pathto('index')}">${docstitle|h}</a>
         % if parents:
             % for parent in parents:
@@ -139,41 +201,9 @@ withsidebar = bool(toc) and current_page_name != 'index'
                 ${title}
             </%block>
         </h2>
-    </div>
-
-</div>
-</div>
-
-<div id="docs-body-container">
-
-% if withsidebar:
-    <div id="docs-sidebar">
-
-    <h3><a href="${pathto('index')}">Table of Contents</a></h3>
-    ${toc}
-
-    % if prevtopic:
-    <h4>Previous Topic</h4>
-    <p>
-    <a href="${prevtopic['link']|h}" title="${_('previous chapter')}">${prevtopic['title']}</a>
-    </p>
-    % endif
-    % if nexttopic:
-    <h4>Next Topic</h4>
-    <p>
-    <a href="${nexttopic['link']|h}" title="${_('next chapter')}">${nexttopic['title']}</a>
-    </p>
-    % endif
-
-    % if rtd:
-    <h4>Project Versions</h4>
-    <ul class="version-listing">
-    </ul>
-    % endif
-
 
     </div>
-% endif
+    </%doc>
 
     <div id="docs-body" class="${'withsidebar' if withsidebar else ''}" >
         ${next.body()}