diff --git a/Gruntfile.js b/Gruntfile.js
index 510bb44..737ecc7 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,16 +1,19 @@
+/**
+ * Grunt build file for Kalamar.
+ * Create assets (based on files in /dev) running
+ *   $ grunt
+ * in the current folder.
+ *
+ * @author Nils Diewald
+ */
 /*
- * http://gruntjs.com/getting-started
- *
- * Todo: Move all source files outside the public folder!
- *
  * TODO: Use https://www.npmjs.com/package/grunt-contrib-compress
- * for assets.
- * http://yui.github.io/yuidoc/
- * use it with https://www.npmjs.com/package/grunt-contrib-yuidoc
- *
- * RequireJS
- * http://addyosmani.com/writing-modular-js/
- * http://qnundrum.com/question/393866
+ *   for assets.
+ *   http://yui.github.io/yuidoc/
+ * TODO: Use https://www.npmjs.com/package/grunt-contrib-yuidoc
+ * TODO: Use RequireJS
+ *   http://addyosmani.com/writing-modular-js/
+ *   http://qnundrum.com/question/393866
  */
 module.exports = function(grunt) {
   grunt.initConfig({
@@ -26,7 +29,7 @@
 	  'dev/js/src/api.js',
 	  'dev/js/src/session.js',
 	  'dev/js/src/tutorial.js',
-	  'dev/js/src/util.js'
+	  'dev/js/src/init.js'
 	],
 	dest: 'dev/js/build/kalamar.js'
       }
@@ -72,6 +75,7 @@
       }
     },
     // see https://github.com/gruntjs/grunt-contrib-copy/issues/64
+    // for copying binary files
     copy : {
       options: {
 	process:false
@@ -99,18 +103,6 @@
       }
     },
     watch: {
-/*
-      options: {
-	livereload: true
-      },
-      scripts: {
-        files: ['js/*.js'],
-        tasks: ['concat', 'uglify'],
-        options: {
-          spawn: false
-        },
-      },
-*/
       css: {
 	files: ['dev/scss/{util,fonts,base,header,searchbar,matchinfo,resultinfo,kwic,menu,hint,pagination,logos,alertify,vc,media,kalamar,tutorial,query,sidebar}.scss'],
 	tasks: ['sass'],
@@ -118,7 +110,7 @@
 	  spawn: false
 	}
       }
-    }    
+    }
   });
 
   grunt.loadNpmTasks('grunt-contrib-concat');
diff --git a/dev/demo/all.html b/dev/demo/all.html
index c1e10d5..c46dd69 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -147,7 +147,7 @@
     <script src="../js/src/vc.js"></script>
     <script src="../js/src/session.js"></script>
     <script src="../js/src/tutorial.js"></script>
-    <script src="../js/src/util.js"></script>
+    <script src="../js/src/init.js"></script>
     <script>
       KorAP.URL = 'http://localhost:3000';
     </script>
diff --git a/dev/demo/all.js b/dev/demo/all.js
index b29b0b5..5ce1266 100644
--- a/dev/demo/all.js
+++ b/dev/demo/all.js
@@ -437,19 +437,24 @@
   // Decorate actions
   var init = KorAP.init();
 
-  var menu = KorAP.MatchTreeMenu.create(
-    undefined,
-    menuContent
-  );
-
   // document.getElementById('vc-choose').click();
 
   // init.tutorial.show();
 
-  // Don't hide!!!
+/*
+
+  KorAP.HintMenu.hide = function () {};
+  init.hint.show();
+
+
+  var menu = KorAP.MatchTreeMenu.create(
+    undefined,
+    menuContent
+  );
   menu.hide = function () {};
   document.getElementById('menu').appendChild(menu.element());
   menu.limit(3);
   menu.show();
   menu.focus();
+*/
 });
diff --git a/dev/demo/match.html b/dev/demo/match.html
index 19014ba..cb2e7ef 100644
--- a/dev/demo/match.html
+++ b/dev/demo/match.html
@@ -4,7 +4,7 @@
     <title>Match demo</title>
     <meta charset="utf-8" />
     <script src="../js/lib/dagre/dagre.min.js"></script>
-    <script src="../js/src/util.js"></script>
+    <script src="../js/src/init.js"></script>
     <script src="../js/src/menu.js"></script>
     <script src="../js/src/match.js"></script>
     <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
diff --git a/dev/js/src/hint.js b/dev/js/src/hint.js
index 80631ec..474948a 100644
--- a/dev/js/src/hint.js
+++ b/dev/js/src/hint.js
@@ -31,254 +31,6 @@
   // Initialize hint array
   KorAP.hintArray = KorAP.hintArray || {};
 
-  // Input field for queries
-  KorAP.InputField = {
-    create : function (element) {
-      return Object.create(KorAP.InputField)._init(element);
-    },
-
-    _init : function (element) {
-      this._element = element;
-
-      // Create mirror for searchField
-      if ((this._mirror = document.getElementById("searchMirror")) === null) {
-	this._mirror = document.createElement("div");
-	this._mirror.setAttribute("id", "searchMirror");
-	this._mirror.appendChild(document.createElement("span"));
-	this._container = this._mirror.appendChild(document.createElement("div"));
-	this._mirror.style.height = "1px";
-	document.getElementsByTagName("body")[0].appendChild(this._mirror);
-      };
-
-      // Update position of the mirror
-      var that = this;
-      window.onresize = function () {
-	that.reposition();
-      };
-
-      that.reposition();
-
-      return this;
-    },
-
-    rightPos : function () {
-      var box = this._mirror.getBoundingClientRect();
-      return box.right - box.left;
-    },
-
-    mirror : function () {
-      return this._mirror;
-    },
-
-    container : function () {
-      return this._container;
-    },
-
-    element : function () {
-      return this._element;
-    },
-
-    value : function () {
-      return this._element.value;
-    },
-
-    update : function () {
-      this._mirror.firstChild.textContent = this.split()[0];
-    },
-
-    insert : function (text) {
-      var splittedText = this.split();
-      var s = this._element;
-      s.value = splittedText[0] + text + splittedText[1];
-      s.selectionStart = (splittedText[0] + text).length;
-      s.selectionEnd = s.selectionStart;
-      this._mirror.firstChild.textContent = splittedText[0] + text;
-    },
-
-    // Return two substrings, splitted at current cursor position
-    split : function () {
-      var s = this._element;
-      var value = s.value;
-      var start = s.selectionStart;
-      return new Array(
-	value.substring(0, start),
-	value.substring(start, value.length)
-      );
-    },
-
-    // Position the input mirror directly below the input box
-    reposition : function () {
-      var inputClientRect = this._element.getBoundingClientRect();
-      var inputStyle = window.getComputedStyle(this._element, null);
-
-      // Reset position
-      var mirrorStyle = this._mirror.style;
-      mirrorStyle.left = inputClientRect.left + "px";
-      mirrorStyle.top  = inputClientRect.bottom + "px";
-
-      // These may be relevant in case of media depending css
-      mirrorStyle.paddingLeft     = inputStyle.getPropertyValue("padding-left");
-      mirrorStyle.marginLeft      = inputStyle.getPropertyValue("margin-left");
-      mirrorStyle.borderLeftWidth = inputStyle.getPropertyValue("border-left-width");
-      mirrorStyle.borderLeftStyle = inputStyle.getPropertyValue("border-left-style");
-      mirrorStyle.fontSize        = inputStyle.getPropertyValue("font-size");
-      mirrorStyle.fontFamily      = inputStyle.getPropertyValue("font-family");
-    },
-    context : function () {
-      return this.split()[0];
-    }
-  };
-
-
-  /**
-   * Regex object for checking the context of the hint
-   */
-  KorAP.ContextAnalyzer = {
-    create : function (regex) {
-      return Object.create(KorAP.ContextAnalyzer)._init(regex);
-    },
-    _init : function (regex) {
-      try {
-	this._regex = new RegExp(regex);
-      }
-      catch (e) {
-	KorAP.log("error", e);
-	return;
-      };
-      return this;
-    },
-    test : function (text) {
-      if (!this._regex.exec(text))
-	return;
-      return RegExp.$1;
-    }
-  };
-
-
-  /**
-   * Hint menu item based on MenuItem
-   */
-  KorAP.HintMenuItem = {
-    create : function (params) {
-      return Object.create(KorAP.MenuItem)
-	.upgradeTo(KorAP.HintMenuItem)
-	._init(params);
-    },
-    content : function (content) {
-      if (arguments.length === 1) {
-	this._content = content;
-      };
-      return this._content;
-    },
-    _init : function (params) {
-      if (params[0] === undefined ||
-	  params[1] === undefined)
-	throw new Error("Missing parameters");
-      
-      this._name   = params[0];
-      this._action = params[1];
-      this._lcField = ' ' + this._name.toLowerCase();
-      
-      if (params.length > 2) {
-	this._desc = params[2];
-	this._lcField += " " + this._desc.toLowerCase();
-      };
-
-      return this;
-    },
-    onclick : function () {
-      var m = this.menu();
-      var h = m.hint();
-      m.hide();
-
-      h.inputField().insert(this._action);
-      h.active = false;
-
-      h.show(true);
-    },
-    name : function () {
-      return this._name;
-    },
-    action : function () {
-      return this._action;
-    },
-    desc : function () {
-      return this._desc;
-    },
-    element : function () {
-      // already defined
-      if (this._element !== undefined)
-	return this._element;
-
-      // Create list item
-      var li = document.createElement("li");
-
-      if (this.onclick !== undefined) {
-	li["onclick"] = this.onclick.bind(this);
-      };
-
-      // Create title
-      var name =  document.createElement("span");
-      name.appendChild(document.createTextNode(this._name));
-      
-      li.appendChild(name);
-
-      // Create description
-      if (this._desc !== undefined) {
-	var desc = document.createElement("span");
-	desc.classList.add('desc');
-	desc.appendChild(document.createTextNode(this._desc));
-	li.appendChild(desc);
-      };
-      return this._element = li;
-    }
-  };
-
-  KorAP.HintMenuPrefix = {
-    create : function (params) {
-      return Object.create(KorAP.MenuPrefix).upgradeTo(KorAP.HintMenuPrefix)._init(params);
-    },
-    onclick : function () {
-      var m = this.menu();
-      var h = m.hint();
-      m.hide();
-
-      h.inputField().insert(this.value());
-      h.active = false;
-    }
-  };
-
-  KorAP.HintMenu = {
-    create : function (hint, context, params) {
-      var obj = Object.create(KorAP.Menu)
-	.upgradeTo(KorAP.HintMenu)
-	._init(KorAP.HintMenuItem, KorAP.HintMenuPrefix, params);
-      obj._context = context;
-      obj._element.classList.add('hint');
-      obj._hint = hint;
-
-      // This is only domspecific
-      obj.element().addEventListener('blur', function (e) {
-	this.menu.hide();
-      });
-
-      // Focus on input field on hide
-      obj.onHide = function () {
-	var input = this._hint.inputField();
-	input.element().focus();
-      };
-
-      return obj;
-    },
-    // Todo: Is this necessary?
-    context : function () {
-      return this._context;
-    },
-    hint : function () {
-      return this._hint;
-    }
-  };
-
 
   /**
    * KorAP.Hint.create({
@@ -311,7 +63,6 @@
 
       var that = this;
 
-
       // Add event listener for key pressed down
       inputFieldElement.addEventListener(
 	"keypress", function (e) {
@@ -328,7 +79,6 @@
 	"keyup", function (e) {
 	  var input = that._inputField;
 	  input.update();
-	  input.container().style.left = input.rightPos() + 'px';
 	}
       );
 
@@ -422,7 +172,9 @@
       // Get the menu
       var menu;
       if (menu = this.contextMenu(ifContext)) {
-	this._inputField.container().appendChild(menu.element());
+	var c = this._inputField.container();
+	c.classList.add('active');
+	c.appendChild(menu.element());
 	menu.show('');
 	menu.focus();
 // Update bounding box
@@ -439,6 +191,269 @@
   };
 
 
+  // Input field for queries
+  KorAP.InputField = {
+    create : function (element) {
+      return Object.create(KorAP.InputField)._init(element);
+    },
+
+    _init : function (element) {
+      this._element = element;
+
+      // Create mirror for searchField
+      if ((this._mirror = document.getElementById("searchMirror")) === null) {
+	this._mirror = document.createElement("div");
+	this._mirror.setAttribute("id", "searchMirror");
+	this._mirror.appendChild(document.createElement("span"));
+	this._container = this._mirror.appendChild(document.createElement("div"));
+	this._mirror.style.height = "0px";
+	document.getElementsByTagName("body")[0].appendChild(this._mirror);
+      };
+
+      // Update position of the mirror
+      var that = this;
+      var repos = function () {
+	that.reposition();
+      };
+      window.addEventListener('resize', repos);
+      this._element.addEventListener('onfocus', repos);
+      that.reposition();
+
+      return this;
+    },
+
+    rightPos : function () {
+      var box = this._mirror.firstChild.getBoundingClientRect();
+      return box.right - box.left;
+    },
+
+    mirror : function () {
+      return this._mirror;
+    },
+
+    container : function () {
+      return this._container;
+    },
+
+    element : function () {
+      return this._element;
+    },
+
+    value : function () {
+      return this._element.value;
+    },
+
+    update : function () {
+      this._mirror.firstChild.textContent = this.split()[0];
+      this._container.style.left = this.rightPos() + 'px';
+    },
+
+    insert : function (text) {
+      var splittedText = this.split();
+      var s = this._element;
+      s.value = splittedText[0] + text + splittedText[1];
+      s.selectionStart = (splittedText[0] + text).length;
+      s.selectionEnd = s.selectionStart;
+      this._mirror.firstChild.textContent = splittedText[0] + text;
+    },
+
+    // Return two substrings, splitted at current cursor position
+    split : function () {
+      var s = this._element;
+      var value = s.value;
+      var start = s.selectionStart;
+      return new Array(
+	value.substring(0, start),
+	value.substring(start, value.length)
+      );
+    },
+
+    // Position the input mirror directly below the input box
+    reposition : function () {
+      var inputClientRect = this._element.getBoundingClientRect();
+      var inputStyle = window.getComputedStyle(this._element, null);
+
+      var bodyClientRect = 
+	document.getElementsByTagName('body')[0].getBoundingClientRect();
+
+      // Reset position
+      var mirrorStyle = this._mirror.style;
+      mirrorStyle.left = inputClientRect.left + "px";
+      mirrorStyle.top  = (inputClientRect.bottom - bodyClientRect.top) + "px";
+      mirrorStyle.width = inputStyle.getPropertyValue("width");
+
+      // These may be relevant in case of media depending css
+      mirrorStyle.paddingLeft     = inputStyle.getPropertyValue("padding-left");
+      mirrorStyle.marginLeft      = inputStyle.getPropertyValue("margin-left");
+      mirrorStyle.borderLeftWidth = inputStyle.getPropertyValue("border-left-width");
+      mirrorStyle.borderLeftStyle = inputStyle.getPropertyValue("border-left-style");
+      mirrorStyle.fontSize        = inputStyle.getPropertyValue("font-size");
+      mirrorStyle.fontFamily      = inputStyle.getPropertyValue("font-family");
+    },
+    context : function () {
+      return this.split()[0];
+    }
+  };
+
+
+  /**
+   * Regex object for checking the context of the hint
+   */
+  KorAP.ContextAnalyzer = {
+    create : function (regex) {
+      return Object.create(KorAP.ContextAnalyzer)._init(regex);
+    },
+    _init : function (regex) {
+      try {
+	this._regex = new RegExp(regex);
+      }
+      catch (e) {
+	KorAP.log(0, e);
+	return;
+      };
+      return this;
+    },
+    test : function (text) {
+      if (!this._regex.exec(text))
+	return;
+      return RegExp.$1;
+    }
+  };
+
+
+  /**
+   * Hint menu
+   */
+  KorAP.HintMenu = {
+    create : function (hint, context, params) {
+      var obj = Object.create(KorAP.Menu)
+	.upgradeTo(KorAP.HintMenu)
+	._init(KorAP.HintMenuItem, KorAP.HintMenuPrefix, params);
+      obj._context = context;
+      obj._element.classList.add('hint');
+      obj._hint = hint;
+
+      // This is only domspecific
+      obj.element().addEventListener('blur', function (e) {
+	this.menu.hide();
+      });
+
+      // Focus on input field on hide
+      obj.onHide = function () {
+	var input = this._hint.inputField();
+	input.container().classList.remove('active');
+	input.element().focus();
+      };
+
+      return obj;
+    },
+    // Todo: Is this necessary?
+    context : function () {
+      return this._context;
+    },
+    hint : function () {
+      return this._hint;
+    }
+  };
+
+
+  /**
+   * Hint menu item based on MenuItem
+   */
+  KorAP.HintMenuItem = {
+    create : function (params) {
+      return Object.create(KorAP.MenuItem)
+	.upgradeTo(KorAP.HintMenuItem)
+	._init(params);
+    },
+    content : function (content) {
+      if (arguments.length === 1) {
+	this._content = content;
+      };
+      return this._content;
+    },
+    _init : function (params) {
+      if (params[0] === undefined ||
+	  params[1] === undefined)
+	throw new Error("Missing parameters");
+      
+      this._name   = params[0];
+      this._action = params[1];
+      this._lcField = ' ' + this._name.toLowerCase();
+      
+      if (params.length > 2) {
+	this._desc = params[2];
+	this._lcField += " " + this._desc.toLowerCase();
+      };
+
+      return this;
+    },
+    onclick : function () {
+      var m = this.menu();
+      var h = m.hint();
+      m.hide();
+
+      // Update input field
+      var input = h.inputField();
+      input.insert(this._action);
+      input.update();
+
+      h.active = false;
+      h.show(true);
+    },
+    name : function () {
+      return this._name;
+    },
+    action : function () {
+      return this._action;
+    },
+    desc : function () {
+      return this._desc;
+    },
+    element : function () {
+      // already defined
+      if (this._element !== undefined)
+	return this._element;
+
+      // Create list item
+      var li = document.createElement("li");
+
+      if (this.onclick !== undefined) {
+	li["onclick"] = this.onclick.bind(this);
+      };
+
+      // Create title
+      var name =  document.createElement("span");
+      name.appendChild(document.createTextNode(this._name));
+      
+      li.appendChild(name);
+
+      // Create description
+      if (this._desc !== undefined) {
+	var desc = document.createElement("span");
+	desc.classList.add('desc');
+	desc.appendChild(document.createTextNode(this._desc));
+	li.appendChild(desc);
+      };
+      return this._element = li;
+    }
+  };
+
+  KorAP.HintMenuPrefix = {
+    create : function (params) {
+      return Object.create(KorAP.MenuPrefix).upgradeTo(KorAP.HintMenuPrefix)._init(params);
+    },
+    onclick : function () {
+      var m = this.menu();
+      var h = m.hint();
+      m.hide();
+
+      h.inputField().insert(this.value());
+      h.active = false;
+    }
+  };
+
+
   /**
    * Return keycode based on event
    */
diff --git a/dev/js/src/util.js b/dev/js/src/init.js
similarity index 100%
rename from dev/js/src/util.js
rename to dev/js/src/init.js
diff --git a/dev/js/src/menu.js b/dev/js/src/menu.js
index 1cf3455..78f9ea7 100644
--- a/dev/js/src/menu.js
+++ b/dev/js/src/menu.js
@@ -6,6 +6,9 @@
  * @author Nils Diewald
  */
 
+/*
+  * TODO: space is not a valid prefix!
+ */
 (function (KorAP) {
   "use strict";
 
@@ -306,7 +309,7 @@
 	  this._list.push(i);
 	while (this._items[++i] !== undefined) {
 	  this._items[i].lowlight();
-	  console.log(this._item);
+	  // console.log(this._item);
 	};
 	return true;
       };
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 {