Add ToC to long pages

* A compact, fixed box in the right screen
* Only for big screens, > 1200 px wide

1 files changed, 42 insertions, 8 deletions

diff --git a/docs/static/css/style.css b/docs/static/css/style.css
index 478134a89..66bb45b7e 100755
--- a/docs/static/css/style.css
+++ b/docs/static/css/style.css
@@ -101,7 +101,7 @@ body {
     font-family: 'Lato', sans-serif;
     padding: 0px !important;
     margin: 0px !important;
-    font-size:16px !important;    
+    font-size:16px !important;
     font-weight: 300;
 }
 
@@ -266,13 +266,13 @@ ul.sidebar-menu li.active a, ul.sidebar-menu li a:hover, ul.sidebar-menu li a:fo
     -moz-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
     -ms-transition: all 0.3s ease;
-    transition: all 0.3s ease;        
+    transition: all 0.3s ease;
 }
 ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus {
     border-bottom: 1px solid #ff4088;
 }
 /*ul.sidebar-menu li.active a,*/ ul.sidebar-menu .sub-menu li.active a{
-    border-bottom: 1px solid #ff4088;   
+    border-bottom: 1px solid #ff4088;
 }
 
 ul.sidebar-menu li a i {
@@ -290,10 +290,10 @@ ul.sidebar-menu li.active a i {
 }
 
 
-#sidebar ul > li > a .menu-arrow { 
-    float: right;    
+#sidebar ul > li > a .menu-arrow {
+    float: right;
     margin-right: 8px;
-    margin-top: 6px;    
+    margin-top: 6px;
 }
 
 #main-content {
@@ -541,7 +541,7 @@ i.freebsd-19px:before {
     overflow: hidden;
     margin: 20px 0;
 }
- 
+
 .video-container iframe,
 .video-container object,
 .video-container embed {
@@ -549,5 +549,39 @@ i.freebsd-19px:before {
     top: 0;
     left: 0;
     width: 100%;
-    height: 100%;    
+    height: 100%;
 }
+
+/* Google custom search */
+.cse {
+    margin-top: 20px;
+    padding-right: 20px;
+}
+
+
+/* Table of contents */
+
+.toc ul { list-style: none; margin: 0; padding: 0 5px;  }
+.toc ul li { display: inline; }
+#TableOfContents > ul > li > ul > li > ul li { margin-right: 8px; }
+#TableOfContents > ul > li > ul > li > a, #TableOfContents > ul > li > a   { font-weight: bold; background-color: #eeeeee; padding: 0 10px; margin: 0 2px; }
+#TableOfContents > ul > li > ul > li > a { font-style: italic; }
+.toc.compact ul > li > ul > li > ul  { display: none; }
+
+#toc {
+    position:fixed;
+    background-color: rgba(0, 0, 0, 0.1);
+    padding: 10px 50px 10px 20px;
+}
+
+
+@media(max-width:1200px) {
+    .toc {
+        display: none;
+    }
+}
+
+
+
+
+