diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index da95c81..1ba3213 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -25,8 +25,8 @@
 
 a {
   &[href^="http://"]:after {
-    font-family: "FontAwesome";
-    content: " \f08e";
+    font-family: FontAwesome;
+    content: " " + $fa-extlink;
     font-size: 75%;
   }
   &:link {
diff --git a/dev/scss/header.scss b/dev/scss/header.scss
index f3f995a..4189b6a 100644
--- a/dev/scss/header.scss
+++ b/dev/scss/header.scss
@@ -42,7 +42,7 @@
     }
   }
   span.select::after {
-    content: "\f0dd";
+    content: $fa-down;
   }
 
   form {
diff --git a/dev/scss/highlight.scss b/dev/scss/highlight.scss
new file mode 100644
index 0000000..1c3cb99
--- /dev/null
+++ b/dev/scss/highlight.scss
@@ -0,0 +1,121 @@
+/*
+ * Based on github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+ */
+.hljs {
+  display: block;
+  padding: 0.5em;
+}
+
+.hljs-comment,
+.hljs-template_comment,
+.diff .hljs-header,
+.hljs-javadoc {
+  color: #998;
+  font-style: italic
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.javascript .hljs-title,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+  color: #333;
+  font-weight: bold
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+  color: #099;
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.tex .hljs-formula {
+  color: #d14
+}
+
+.hljs-title,
+.hljs-id,
+.coffeescript .hljs-params,
+.scss .hljs-preprocessor {
+  color: #900;
+  font-weight: bold
+}
+
+.javascript .hljs-title,
+.lisp .hljs-title,
+.clojure .hljs-title,
+.hljs-subst {
+  font-weight: normal
+}
+
+.hljs-class .hljs-title,
+.haskell .hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+  color: #458;
+  font-weight: bold
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rules .hljs-property,
+.django .hljs-tag .hljs-keyword {
+  color: #000080;
+  font-weight: normal
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body {
+  color: #008080
+}
+
+.hljs-regexp {
+  color: #009926
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+  color: #990073
+}
+
+.hljs-built_in,
+.lisp .hljs-title,
+.clojure .hljs-built_in {
+  color: #0086b3
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: #999;
+  font-weight: bold
+}
+
+.hljs-deletion {
+  background: #fdd
+}
+
+.hljs-addition {
+  background: #dfd
+}
+
+.diff .hljs-change {
+  background: #0086b3
+}
+
+.hljs-chunk {
+  color: #aaa
+}
diff --git a/dev/scss/hint.scss b/dev/scss/hint.scss
index 470cd17..18000a1 100644
--- a/dev/scss/hint.scss
+++ b/dev/scss/hint.scss
@@ -4,10 +4,11 @@
 $border-size: 2px;
 
 ul.menu.hint {
+  display: inline-block;
+  white-space: normal;
   text-align:left;
-//  margin-left: -1 * $border-size;
+  top: 0;
   max-width: 23em !important;
-  min-width: 7em;
 
   > li:first-of-type {
     border-top: {
@@ -26,44 +27,35 @@
   position: absolute;
   left: 0;
   top: 0;
+  z-index: 900;
   white-space: pre-wrap;
-  overflow: show;
   height: 0;
+  display: block;
   > span {
-    display: block;
     opacity: 0;
     white-space: pre-wrap;
     overflow: hidden;
   }
   // Todo: Besser nur, wenn im Focus
   > div {
-    cursor: pointer;
-    transition: left 0.3s ease 0s;
     position: absolute;
+    display: block;
+    cursor: pointer;
+    transition: left 0.2s ease 0s;
     top: 0;
     left: 0;
-    text-align: center;
+    text-align: left;
     padding: 0;
     border-top: 5px solid $dark-orange;
-
     height: 10px;
     width: 1.2em;
-
-    &:hover {
-/*
-      border: {
-	width: $border-size;
-	style: solid;
-	radius: $standard-border-radius;
-	top: {
-	  left-radius: 0;
-	  right-radius: 0;
-	  width: 0px;
-	}
-      }
-      @include choose-hover;
-*/
+    &:hover:not(.active) {
       border-top: 10px solid $dark-orange;
     }
+    &.active {
+      border-top-width: 0;
+      height: 0;
+      width: 23em;
+    }
   }
 }
\ No newline at end of file
diff --git a/dev/scss/kalamar.scss b/dev/scss/kalamar.scss
index 582fe9b..f09f0f0 100644
--- a/dev/scss/kalamar.scss
+++ b/dev/scss/kalamar.scss
@@ -17,5 +17,6 @@
 @import "tutorial";   // Embedded and non-embedded tutorial
 @import "query";      // View query
 @import "sidebar";    // Navigation on the left side
+@import "highlight";  // Navigation on the left side
 
 @import "media";      // Media queries
diff --git a/dev/scss/kwic.scss b/dev/scss/kwic.scss
index c55c00a..8108f98 100644
--- a/dev/scss/kwic.scss
+++ b/dev/scss/kwic.scss
@@ -167,11 +167,11 @@
       }
       &.close::after {
 	font-family: "FontAwesome";
-	content: "\f00d";
+	content: $fa-close;
       }
       &.info::after {
 	font-family: "FontAwesome";
-	content: "\f05a";
+	content: $fa-info;
       }
     }
   }
diff --git a/dev/scss/matchinfo.scss b/dev/scss/matchinfo.scss
index 4341f23..0bcb50d 100644
--- a/dev/scss/matchinfo.scss
+++ b/dev/scss/matchinfo.scss
@@ -199,7 +199,7 @@
 
       &::after {
 	font-family: 'FontAwesome';
-	content: '\f00d';
+	content: $fa-close;
       }
     }
   }
diff --git a/dev/scss/menu.scss b/dev/scss/menu.scss
index 5e2d084..a8e0306 100644
--- a/dev/scss/menu.scss
+++ b/dev/scss/menu.scss
@@ -107,7 +107,7 @@
     &:not(.no-more):before {
       position: absolute;
       font-family: "FontAwesome";
-      content: '\f0de';
+      content: $fa-up;
       right: .5em;
       top: .4em;
     }
@@ -116,7 +116,7 @@
     &:not(.no-more):before {
       position: absolute;
       font-family: "FontAwesome";
-      content: '\f0dd';
+      content: $fa-down;
       right: .5em;
       bottom: .4em;
     }
diff --git a/dev/scss/pagination.scss b/dev/scss/pagination.scss
index 0e099ac..fc3ff4a 100644
--- a/dev/scss/pagination.scss
+++ b/dev/scss/pagination.scss
@@ -62,7 +62,7 @@
       }
       &::after {
 	font-family: 'FontAwesome';
-	content: '\f141';
+	content: $fa-elipsis;
       }
     }
 
@@ -88,7 +88,7 @@
       }
       &::after {
 	font-family: 'FontAwesome';
-	content: '\f0d9';
+	content: $fa-previous;
       }
     }
 
@@ -104,7 +104,7 @@
       }
       &::after {
 	font-family: 'FontAwesome';
-	content: '\f0da';
+	content: $fa-next;
       }
     }
     &:link:hover span {
diff --git a/dev/scss/searchbar.scss b/dev/scss/searchbar.scss
index 098eacd..ac9927d 100644
--- a/dev/scss/searchbar.scss
+++ b/dev/scss/searchbar.scss
@@ -40,7 +40,7 @@
     }
     &::after {
       font-family: "FontAwesome";
-      content: "\f002";
+      content: $fa-search;
     }
     border: {
       width: $border-size;
diff --git a/dev/scss/sidebar.scss b/dev/scss/sidebar.scss
index 5829600..a94c1d8 100644
--- a/dev/scss/sidebar.scss
+++ b/dev/scss/sidebar.scss
@@ -35,7 +35,8 @@
     bottom: 0;
     margin-right: -30px;
     background-color: $dark-green;
-    content: '#';
+    font-family: FontAwesome;
+    content: $fa-bars;
     font-size: 16pt;
     width: 16pt;  
     height: 17pt;
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index ee2eec5..b132519 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -148,3 +148,19 @@
   -moz-appearance:none;
   appearance:none;
 }
+
+
+/**
+ * Font Awesome symbols
+ */
+$fa-bars:     "\f0c9";
+$fa-extlink:  "\f08e";
+$fa-up:       "\f0d8";
+$fa-down:     "\f0d7";
+$fa-close:    "\f00d";
+$fa-info:     "\f05a";
+$fa-elipsis:  "\f141";
+$fa-previous: "\f0d9";
+$fa-next:     "\f0da";
+$fa-search:   "\f002";
+$fa-rewrite:  "\f040"; // "\f14b"
\ No newline at end of file
diff --git a/dev/scss/vc.scss b/dev/scss/vc.scss
index 1ed7959..3a989ec 100644
--- a/dev/scss/vc.scss
+++ b/dev/scss/vc.scss
@@ -54,7 +54,7 @@
       border-color: $dark-orange;
       > .doc::before,
       > .docGroup::before {
-	content: "oder";
+	content: "or";
       }
       > .operators {
 	border-color: $dark-orange;
@@ -66,7 +66,7 @@
     &[data-operation=and] {
       > .doc::before,
       > .docGroup::before {
-	content: "und";
+	content: "and";
       }
     }
 
@@ -142,7 +142,7 @@
 	font-family: FontAwesome;
 	font-style: normal;
 	font-weight: normal;
-	content: "\f040"; // "\f14b";
+	content: $fa-rewrite;
 	text-decoration: underline;
       }
       span {