diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index f952acf..bf7c206 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -135,6 +135,9 @@
     if (obj.tutorial)
       obj.tutorial.initQueries(document);
 
+    // Initialize documentation links
+    obj.tutorial.initDocLinks(document);
+
     /**
      * Init hint helper
      * has to be final because of
diff --git a/dev/js/src/tutorial.js b/dev/js/src/tutorial.js
index a028b8e..55c2415 100644
--- a/dev/js/src/tutorial.js
+++ b/dev/js/src/tutorial.js
@@ -78,7 +78,6 @@
       this.hide();
     },
 
-
     /**
      * Decorate a page with query event handler.
      */
@@ -92,6 +91,20 @@
       };
     },
 
+    /**
+     * Decorate a page with documentation links
+     */
+    initDocLinks : function (d) {
+      var dl = d.getElementsByClassName('doc-link');
+      var that = this;
+      for (var i = 0; i < dl.length; i++) {
+	dl[i].onclick = function (e) {
+	  that.setPage(this.getAttribute('href'));
+	  return true;
+	};
+      };      
+    },
+
 
     /**
      * Show the tutorial page embedded.
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index a1702f6..2bef848 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -27,12 +27,17 @@
 
 
 a {
-  &[href^="http://"]:after,
-  &[href^="https://"]:after {
+  &[href^="http://"]::after,
+  &[href^="https://"]::after {
     font-family: FontAwesome;
     content: " " + $fa-extlink;
     font-size: 75%;
   }
+  &.doc-link::after {
+    font-family: FontAwesome;
+    content: " " + $fa-tutorial;
+    font-size: 75%;
+  }
   &:link {
     color: $dark-orange;
     text-decoration: none;
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index 8327a9b..53e5ed8 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -207,10 +207,12 @@
 }
 
 div.loading {
+  background-color: transparent !important;
   height: 16px !important;
   width: 16px !important;
   margin: 0 auto !important;
   background-image: url('data:image/gif;base64,R0lGODlhEAAQAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48Hzh2UngyGvet6OpmKWmBb5TI+LlTOlAAACH5BAkEAAEALAAAAAAQABAAAAIohA+hu3gMnXyBqnkNw1XDnHThZ32bd6LUg0SOOIJsCaPmtOJvrctHAQAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48nxZKGLkxqGiungmyCXh9nRUleSZrO10AACH5BAkEAAEALAAAAAAQABAAAAIohA8RyKwN04pSWdumufp0niHghnkPyaWmqZLsKL3QWXUrJdpo66RKAQAh+QQJBAABACwAAAAAEAAQAAACJoQPEcisDdOKUlnbrp4IH989n1iBJUhK47itxkbGsEvRtXq/8B4UACH5BAkEAAEALAAAAAAQABAAAAIphA8RyKwN04pSWdvuNPto1HEX6G1YOYrain5im0pQ/GSnTIFr7eyhUQAAIfkECQQAAQAsAAAAABAAEAAAAiqMf6ALwWoelJFS5CbESTdeNUu3jWP4IWe2qS0TsmC8cuZFsrAkWrgtKQAAIfkECQQAAQAsAAAAABAAEAAAAiiMf6AL6LwMnDFQVG9SkrveWN6XjR82Mmi4cdMTvWsjnyIV4rIOgUwBACH5BAkEAAEALAAAAAAQABAAAAImjH+gC8HrXpNTxoeuzkltrkFg6BnMiJxpaYpWV76jDFKujV14LBUAIfkEAR4AAQAsAAAAABAAEAAAAiSEDxHIrA3TilJZ266eaN/8HJixdd4nailXgafrwSUVUqltQgUAOw==');
+
 }
 
 
diff --git a/dev/scss/main/sidebar.scss b/dev/scss/main/sidebar.scss
index 5fe57d0..c77fbc7 100644
--- a/dev/scss/main/sidebar.scss
+++ b/dev/scss/main/sidebar.scss
@@ -14,7 +14,7 @@
   top: 0;
   left: 0;
   height: 100%;
-  padding-top: 80px;
+  padding-top: 65px;
   > div {
     overflow-y: auto;
     overflow-x: visible;