diff --git a/public/scss/alertify.scss b/public/scss/alertify.scss
new file mode 100644
index 0000000..ee83a5d
--- /dev/null
+++ b/public/scss/alertify.scss
@@ -0,0 +1,11 @@
+@import "util";
+
+/*
+article.alertify-log {
+  text-shadow:none;
+}
+*/
+
+article.alertify-log-warn {
+  background-color: $dark-orange;
+}
diff --git a/public/scss/base.scss b/public/scss/base.scss
index 8337b78..da95c81 100644
--- a/public/scss/base.scss
+++ b/public/scss/base.scss
@@ -1,8 +1,101 @@
 @charset "utf-8";
-@import "colors";
+@import "util";
 
-body, html, select {
+body, html, select, g > text {
   color: $dark-grey;
   font-family: verdana, tahoma, arial;
   margin: 0;
 }
+
+g > text {
+  fill: $dark-grey;
+}
+
+* {
+  @include box-sizing-box;
+}
+
+body {
+  font-size: 12pt;
+}
+
+.intro p {
+  text-shadow: $light-shadow
+}
+
+a {
+  &[href^="http://"]:after {
+    font-family: "FontAwesome";
+    content: " \f08e";
+    font-size: 75%;
+  }
+  &:link {
+    color: $dark-orange;
+    text-decoration: none;
+  }
+  &:link:hover:hover {
+    color: $light-green; // $darkest-orange;
+    @include color-transition;
+  }
+  &:active, &:visited {
+    color: $darkest-orange;
+  }
+}
+
+main {
+  margin: {
+    left: $standard-margin; 
+    right: $standard-margin; // Todo: -16px
+  }
+  &.embedded {
+    margin: {
+      left: 14px;
+      right: 14px;
+    }
+  }
+  p {
+    text-align: justify;
+    hyphens: auto;
+  }
+/*
+  > section > p, > p {
+    a {
+      border-radius: 6px;
+      padding: 0 .3em;
+      background-color: $choose-bg;
+      text-shadow: light-shadow;
+      color: $light-green;
+      &:hover {
+        color: $dark-green;
+	text-shadow: none;
+	background-color: $light-green;
+      }
+    }
+  }
+*/
+}
+/*
+blockquote {
+  border-radius: 12px;
+  margin: 0;
+  text-indent: 0;
+  padding: 1em;
+  border-left: {
+    color: $dark-grey;
+    style: solid;
+    width: 1em;
+  }
+  background-color: $light-grey;
+  &.warning {
+    border-left-color: $dark-orange;
+  }
+  &.exception {
+    border-left-color: red;
+  }
+}
+*/
+
+div.intro {
+  width: 70%;
+  min-width: 600px;
+}
\ No newline at end of file
diff --git a/public/scss/colors.scss b/public/scss/colors.scss
deleted file mode 100644
index 40082e1..0000000
--- a/public/scss/colors.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Orange
- */
-// $light-orange-2: #f4eebb;
-$light-orange:   #ffe56a;
-// #ffd080;
-$dark-orange:    #ffa500;
-$darker-orange:  #ff8000;
-$darkest-orange: darken($dark-orange, 20%);
-
-// Yellow: #fff48d
-
-/*
- * Blue
- */
-$light-blue:     #cfe6f4;
-$dark-blue:      #73b2f4;
-$darkest-blue:   darken($dark-blue, 40%);
-
-/*
- * Green
- */
-$dark-green:    #496000;
-$middle-green:  #688704;
-$light-green:   #7ba400;
-
-/*
- * Grey
- */
-$light-grey:   #ddd;
-$middle-grey:  #999;
-$dark-grey:    #333;
-// $nearly-white: #f5f5f5;
-$nearly-white: #fff;
-
-$light-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-
-/**
- * KWIC colors
- */
-$kwic-border:       $middle-grey;
-$kwic-line-noneven: $nearly-white;
-$kwic-line-even:    $light-grey;
-$kwic-match-color:  $dark-grey;
-$kwic-match-shadow: $light-shadow;
-
-$kwic-highlight-1:  #c1002b;
-$kwic-highlight-2:  $dark-blue;   // #009ee0;
-$kwic-highlight-3:  $dark-orange; // #f29400;
-$kwic-highlight-4:  $light-green;
-
-$pagination-bg:     $light-grey;
-$pagination-border: $middle-grey;
-$pagination-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
-
-$standard-border-radius: 6px;
-
-@mixin standard-text-padding {
-  padding-left: .4em;
-  padding-right: .4em;
-}
\ No newline at end of file
diff --git a/public/scss/fonts.scss b/public/scss/fonts.scss
new file mode 100644
index 0000000..be46ba2
--- /dev/null
+++ b/public/scss/fonts.scss
@@ -0,0 +1,10 @@
+@charset "utf-8";
+@import "util";
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('#{$font-path}/fontawesome-webfont.eot?v=4.3.0');
+  src: url('#{$font-path}/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('#{$font-path}/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('#{$font-path}/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('#{$font-path}/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('#{$font-path}/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
\ No newline at end of file
diff --git a/public/scss/header.scss b/public/scss/header.scss
new file mode 100644
index 0000000..522be5e
--- /dev/null
+++ b/public/scss/header.scss
@@ -0,0 +1,85 @@
+@charset "utf-8";
+@import "util";
+
+header {
+  position: relative;
+  background-color: $light-green;
+  @include box-sizing-box();
+  padding: 8px;
+  padding-bottom: 0;
+  font-size: 10pt;
+  color: $nearly-white;
+  // text-shadow: none;
+  button {
+    color: $light-green;
+    background-color: transparent;
+    border-width: 0;
+    font-weight: normal;
+    margin: 0;
+    padding: 0;
+    outline: none;
+  }
+  span.select, span.location {
+    cursor: pointer;
+    font-weight: bold;
+    line-height: 1.8em;
+    border: {
+      width: 0;
+      bottom-width: 3px;
+      style: solid;
+      color: transparent;
+    }
+    display: inline-block;
+    &:hover {
+      color: $dark-green;
+      border-color: $dark-green;
+    }
+    &::after {
+      content: "\f0dd";
+      pointer-events: none;
+      font-family: FontAwesome;
+      text-align: center;
+      background-color: $light-green;
+    }
+  }
+  form {
+    display: block;
+    padding-left: 230px;
+    margin: 0px;
+    position: relative;
+  }
+}
+
+
+/**
+ * Temporary hack for language chooser
+ * http://cssdeck.com/labs/styling-select-box-with-css3
+ */
+#ql-field {
+  cursor: pointer;
+  margin: 0;
+  outline: none;
+  border: none;
+  display: inline-block;
+  position: relative;
+  color: white;
+  background-color: $light-green;
+  border-width: 0;
+  border-radius: 0;
+  @include no-appearance;
+  &:checked {
+    outline: none;
+  }
+  > option {
+    padding: 0pt 2pt;
+    outline: none;
+  }
+}
+
+/**
+ * funny hack for firefox
+ */
+#ql-field:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 white;
+}
diff --git a/public/scss/kalamar.scss b/public/scss/kalamar.scss
index 7526d92..be2cf6f 100644
--- a/public/scss/kalamar.scss
+++ b/public/scss/kalamar.scss
@@ -1,8 +1,14 @@
 @charset "utf-8";
 
-@import "colors";    // Color varia
+// Global variables and mixins
+@import "fonts";      // Font families
 
-@import "base";       // Base values
+@import "base";       // Base styles
+@import "logos";      // Logo images
+@import "header";     // Top
+@import "searchbar";  // The search bar
 @import "menu";       // Menu list
-@import "matchinfo";  // Match table and tree
 @import "pagination"; // Pagination
+@import "resultinfo"; // Information on results
+@import "matchinfo";  // Match table and tree
+@import "kwic";       // Kwic view information
diff --git a/public/scss/kwic.scss b/public/scss/kwic.scss
new file mode 100644
index 0000000..88a7da3
--- /dev/null
+++ b/public/scss/kwic.scss
@@ -0,0 +1,268 @@
+@charset "utf-8";
+@import "util";
+
+$border-size: 2px;
+
+#search {
+  position: relative;
+  margin-bottom: 44px;
+  overflow: visible;
+
+  &.match {
+    margin-top: 14pt;
+  }
+
+  ol {
+    width: auto;
+    overflow-x: hidden;
+    overflow-y: visible;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    text-indent: 0;
+    border: 1px solid $kwic-border;
+    font-size: 10pt;
+    > li {
+      border: {
+	style: solid;
+	color: $dark-orange;
+	width: 0;
+      }
+      &:not(.active):not(:target) {
+	width: 99999%;
+	margin-left: -49999.5%;
+	background-color: $kwic-line-noneven;
+	overflow-x: hidden;
+	overflow-y: visible;
+	white-space: no-wrap;
+	cursor: pointer;
+	padding: 5pt 0 6pt 0;
+	&:nth-of-type(even) {
+          background-color: $kwic-line-even;
+	}
+      }
+      > div {
+	> div.snippet {
+	  text-overflow: ellipsis;
+	  text-indent: 0;
+	  text-shadow: $light-shadow;
+
+          > span,
+          > mark {
+            white-space: no-wrap !important;
+            > span {
+              white-space: no-wrap !important;
+            }
+            color: #666;
+          }
+          > mark,
+	  > span.match {
+            font-weight: bold;
+            /* text-shadow: $kwic-match-shadow; */
+            color: $kwic-match-color;
+            padding-left: 4pt;
+            padding-right: 2pt;
+          }
+	}
+      }
+    }
+
+    /* active view */
+    > li.active,
+    > li:target {
+      text-align: left;
+      width: auto;
+      cursor: normal;
+      white-space: wrap;
+      height: auto;
+      border-width: 2px;
+      background-color: $light-orange;
+      position: relative;
+      > div {
+	min-height: 42pt;
+	> div.snippet {
+	  margin: 5pt 10pt;
+	  margin-right: 3em;
+	  > span {
+            line-height: 1.4em;
+            width: auto;
+            &.context-left {
+              margin-left: 0;
+              display: inline;
+              overflow: visible;
+              text-align: left;
+              width: auto;
+            }
+	  }
+	}
+      }
+    }
+
+    /* Actions */
+    > li {
+      ul.action {
+	display: none;
+	> li {
+	  cursor: pointer;
+	  color: white;
+	  text-decoration: none;
+	}
+      }
+
+      
+      /* active actions */
+      &.active, &:target {
+	ul.action {
+	  background-color: $dark-orange;
+	  font-size: 12pt;
+	  color: white;
+	  text: {
+	    shadow: none;
+	    indent: 0;
+	  }
+	  margin: 0;
+	  padding: 0;
+	  z-index: 5;
+
+	  display: block;
+	  list-style: {
+            type: none;
+            position: inline;
+	  }
+	  &.right {
+            position: absolute;
+	    width: $right-match-distance;
+            float: right;
+            text-align: center;
+            padding: 0pt 3pt;
+            height: 100%;
+            right: 0;
+            top: 0;
+	    li {
+	      > span {
+		@include blind;
+	      }
+	      &.close::after {
+		font-family: "FontAwesome";
+		content: "\f00d";
+	      }
+	      &.info::after {
+		font-family: "FontAwesome";
+		content: "\f05a";
+	      }
+	    }
+	  }
+	}
+      }
+      &:not(.active):not(:target) p.ref {
+	display: none;
+      }
+      &.active p.ref,
+      &:target p.ref {
+	background-color: $dark-orange;
+	color: white;
+	padding: 3pt 10pt;
+	padding-right: $right-match-distance;
+	margin: 0pt;
+	width: 100%;
+	bottom: 0;
+	z-index: 30;
+      }
+    }
+  }
+}
+
+/*
+ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.left {
+  display: inline-block;
+  text-align: right;
+  width: 50.046%;
+}
+
+ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.separator {
+  width: 0px;
+  height: 1em;
+  margin-bottom: -2px;
+  display: inline-block;
+  line-height: 100%;
+  border: 1px solid #009EE0;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+ol.align-free > li > div > div.snippet > span.right {
+  text-align: left;
+}
+*/
+
+ol.align-left > li > div > div.snippet > span.context-left {
+  display: inline-block;
+  text-align: right;
+  width: 50.01%;
+}
+
+ol.align-right {
+  text-align: right;
+  > li:not(.active):not(:target) > div > div.snippet > span.context-right {
+    display: inline-block;
+    text-align: left;
+    width: 49.915%;
+  }
+}
+
+/**
+ * Highlights
+ */
+mark > mark,
+em,
+.level-0 {
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+  padding-bottom: 0px;
+  font-style: normal;
+}
+
+mark > mark > mark,
+em > em,
+.level-1 {
+  padding-bottom: 3px;
+}
+
+mark > mark > mark > mark,
+em > em > em,
+.level-2 {
+  padding-bottom: 6px;
+}
+
+li {
+  &:not(.active) mark > mark > mark > mark,
+  &:not(.active) em > em > em {
+    line-height: 180%;
+  }
+  &.active mark > mark > mark > mark,
+  &.active em > em > em {
+    line-height: 250%;
+  }
+}
+
+.class-1 { border-color: $kwic-highlight-1; }
+.class-2 { border-color: $kwic-highlight-2; }
+.class-3 { border-color: $kwic-highlight-3; }
+.class-4 { border-color: $kwic-highlight-4; }
+
+/*
+span.more:before {
+  content: "…";
+  padding-left: 2pt;
+  padding-right: 2pt;
+}
+*/
+
+div.snippet.startMore:before,
+div.snippet.endMore:after {
+  content: "…";
+  padding-left: 2pt;
+  padding-right: 2pt;
+}
+
+
diff --git a/public/scss/logos.scss b/public/scss/logos.scss
new file mode 100644
index 0000000..0141bf6
--- /dev/null
+++ b/public/scss/logos.scss
@@ -0,0 +1,106 @@
+@charset "utf-8";
+@import "util";
+
+.logo {
+  &::after {
+    content: "" !important;
+  }
+  > * {
+    background: {
+      repeat: no-repeat;
+      size: 90%;
+      position: 50% 50%;
+    }
+    > span {
+      margin-left: -3000px;
+    }
+  }
+}
+
+/**
+ * Background image for the front page
+ */
+#kalamar-bg {
+  position: fixed;
+  height: 110%;
+  width: 175%;
+  top: 0;
+  z-index: -5000;
+  background: {
+    image:url('#{$img-path}/korap-bg-kalamar.svg');
+    size: 50%;
+    repeat: no-repeat;
+    position: 50% 50%;
+  }
+}
+
+/**
+ * Logo table of the front page
+ */
+#logos {
+  position: relative;
+  text-align: right;
+  font-size: 85%;
+  right: 0;
+  width: 100%;
+  margin-left: $standard-margin;
+  padding-left: 60%;
+  > div {
+    border-top: 26px solid $dark-orange;
+    padding-right: 2em;
+  }
+  p {
+    text-align: left;
+    display: inline-block;
+  }
+}
+
+
+/**
+ * Logo: Institute for German Language
+ */
+#ids-logo {
+  display: block;
+  width: (910 / 60) + em;
+  height: (176 / 60) + em;
+  background: {
+    image:url('#{$img-path}/ids-institute-for-german-language.svg');
+  }
+}
+
+/**
+ * Logo: Member of the Leibniz Association
+ */
+#leibniz-logo {
+  display: block;
+  width: (199 / 20) + em;
+  height: (130 / 20) + em;
+  background: {
+    image:url('#{$img-path}/member-of-the-leibniz-association.svg');
+  }
+}
+
+/**
+ * Logo: KorAP
+ */
+h1 {
+  position: absolute;
+  margin-left:15px;
+  margin: 0;
+  left: 0;
+  top: 0;
+  width: 7.8em;
+  height: 2.4em;
+  z-index: 999;
+  background: {
+    size: 72%;
+    image: url('#{$img-path}/korap-logo-kalamar.svg');
+  }
+}
+
+/*
+#leibniz-logo, #ids-logo {
+  height: (130 / 20) + em;
+}
+
+*/
\ No newline at end of file
diff --git a/public/scss/matchinfo.scss b/public/scss/matchinfo.scss
index 0ddea47..d26c6e5 100644
--- a/public/scss/matchinfo.scss
+++ b/public/scss/matchinfo.scss
@@ -1,10 +1,17 @@
 @charset "utf-8";
-@import "colors";
+@import "util";
 
 $left-width: 176px;
 $border-size: 2px;
 $left-distance: $left-width + ($border-size * 2);
 
+@mixin cell-info {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 1px 6px;
+  margin: 0px;
+}
+
 /**
  * Table view
  *
@@ -20,39 +27,52 @@
 div.matchinfo {
   position: relative;
   width: 100%;
+  padding-top: $border-size;
+  background-color: $dark-orange;
   height: auto;
   font-size: 10pt;
-  > p {
+  text-align: left;
+  > p.addtree {
     position: relative;
-    background-color: $darker-orange;
-    box-sizing: border-box;
-    color: $nearly-white;
+    @include choose-item;
+    border: {
+      width: $border-size;
+      style: solid;
+      radius: $standard-border-radius;
+    }
+
     font-size: inherit;
-    margin: $border-size 0 0 0 !important;
-    font-weight: bold;
+    margin: $border-size $border-size 0 $border-size !important;
     width: $left-width;
-    text-align: left !important;
+    text-align: center;
     cursor: pointer;
-    padding-left: $border-size * 2 !important;
+    padding: 0 !important;
+
+    &:hover {
+      cursor:pointer;
+      @include choose-hover;
+    }
+
     *.menu {
       border-top-right-radius: 8px;
       position: absolute;
-      top: 0;
-      left: $left-distance;
+      width: $left-width;
+      left: 0;
+      bottom: 0;
+      text-align: left;
+      margin: -1* $border-size;
       margin-top: 0;
       > li:first-of-type {
 	border-top-right-radius: 5px;
       }
     }
-    &:before {
-      content: '+ '; // FontAwesome
-    }
   }
 }
 
 div.matchtable {
   z-index: 20;
   margin-left: $left-distance - ($border-size / 2);
+  margin-right: $right-match-distance;
   padding: 0;
   overflow-x: auto;
   overflow-y: visible;
@@ -72,9 +92,6 @@
     }
   }
   tbody {
-    th {
-      text-overflow: ellipsis;
-    }
     > tr:nth-of-type(1) > th {
       border-top-color: transparent;
     }
@@ -113,14 +130,12 @@
       left: ($left-width / 2) + $border-size;
     }
     > * {
-      box-sizing: border-box;
-      padding: 1px 6px;
-      margin: 0px;
+      @include cell-info;
       border: ($border-size / 2) solid $dark-orange;
     }
   }
   tr > td {
-    background-color: $nearly-white;
+    background-color: $middle-orange; // $nearly-white;
     white-space: nowrap;
     vertical-align: top;
     text-align: center;
@@ -147,12 +162,12 @@
     display: inline;
     font-size: inherit;
     color: $nearly-white;
-    text-align: center;
     margin: 0;
     padding: 0 !important;
     float: left;
     > span {
       @include matchinfo-head;
+      @include cell-info;
       display: inline-block;
       margin: 0;
       &:nth-of-type(2) {
@@ -163,28 +178,28 @@
   > div {
     overflow-x: auto;
     margin: $border-size;
-    box-sizing: border-box;
     margin-left: $left-distance;
-    background-color: $nearly-white; // $light-orange;
+    margin-right: $right-match-distance;
+
+    background-color: $light-orange; // $nearly-white; // $light-orange;
     > em {
-      background-color: $dark-orange;
-      display: block;
-      width: 1.5em;
-      height: 1.5em;
-      line-height: 1.2em;
-      position: absolute;
-      right: 10px;
-      top: 10px;
-      border-radius: 5px;
-      border: $border-size solid $darker-orange;
-      cursor: pointer;
-      text-align: center;
       color: $nearly-white;
+      cursor: pointer;
+      display: block;
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      width: $right-match-distance;
+      border-width: 0;
+      z-index: 8;
+      text-decoration:none;
+      text-align: center;
       font-weight: bold;
       font-style: normal;
-      &:after {
-	// FontAwesome
-	content: 'x';
+
+      &::after {
+	font-family: 'FontAwesome';
+	content: '\f00d';
       }
     }
   }
@@ -203,7 +218,7 @@
 g.middle > rect {
   stroke: $darker-orange;
   stroke-width: 2px;
-  fill: $light-orange; // $nearly-white;
+  fill: $middle-orange;
 }
 
 g.leaf > rect {
diff --git a/public/scss/menu.scss b/public/scss/menu.scss
index 43fab57..e8b9f41 100644
--- a/public/scss/menu.scss
+++ b/public/scss/menu.scss
@@ -1,35 +1,31 @@
 @charset "utf-8";
-@import "colors";
+@import "util";
 
+$border-size: 2px;
 
 /**
  * Menu list - used nearly everywhere
  */
-ul.menu {
-  position: absolute;
-  margin: 0;
-  text-indent: 0;
-  list-style-type: none;
-  list-style-position: outside;
-  padding-left: 0;
-  padding-bottom: 3px;
-  background-color: $pagination-bg;
-}
-
 ul.menu,
 ul.menu > span.pref:not(:empty) {
   box-sizing: border-box;
   text-shadow: none;
   font-weight: normal;
   // Pagination border?
-  border: 2px solid $middle-green;
-  box-shadow: $pagination-box-shadow;
-  z-index: 16;
-  border-radius: $standard-border-radius;
+
+  z-index: 7000;
 }
 
 ul.menu > li,
 ul.menu > span.pref:not(:empty) {
+  box-shadow: $choose-box-shadow;
+  border: {
+    width: $border-size;
+    bottom-width: 0px;
+    top-width: 0px;
+    style: solid;
+  }
+  @include choose-item;
   cursor: pointer;
   padding: 3px 10px;
   white-space: normal;
@@ -37,25 +33,50 @@
 
 ul.menu > li,
 ul.menu > span.pref:not(.active) {
-  background-color: $pagination-bg;
-  color: $light-green
+  @include choose-item;
 }
 
-/**
- * List items
- */
 ul.menu {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  text-indent: 0;
+  list-style-type: none;
+  list-style-position: outside;
+
+  /**
+   * List items
+   */
   > li {
+    padding-right: 1.6em;
+
     &:first-of-type {
-      border-top: 3px solid transparent;
-      &:not(.no-more) {
-	border-top-color: $dark-orange;
+      border-top: {
+	width: $border-size;
+	left-radius: $standard-border-radius;
+	right-radius: $standard-border-radius;
+      }
+      &:not(.no-more):before {
+	position: absolute;
+	font-family: "FontAwesome";
+	content: '\f0de';
+	right: .5em;
+	top: .4em;
       }
     }
     &:last-of-type {
-      border-bottom: 3px solid transparent;
-      &:not(.no-more) {
-	border-bottom-color: $dark-orange;
+      border-bottom: {
+	width: $border-size;
+	left-radius: $standard-border-radius;
+	right-radius: $standard-border-radius;
+      }
+
+      &:not(.no-more):before {
+	position: absolute;
+	font-family: "FontAwesome";
+	content: '\f0dd';
+	right: .5em;
+	bottom: .4em;
       }
     }
     mark {
@@ -65,33 +86,32 @@
       font-weight: bold;
     }
   }
-  > *.active {
-    background-color: $light-green;
-    color: $dark-green;
+  > li.active,
+  > span.pref.active {
+    @include choose-active;
   }
   > li:hover,
   > span.pref:hover {
-    background-color: $dark-orange;
-    color: $nearly-white;
+    @include choose-hover;
+  }
+
+  /**
+   * Default prefix view
+   */
+  > span.pref:not(:empty) {
+    position: absolute;
+    min-width: 5px;
+    font-size: 80%;
+    left: 0;
+    bottom: 0;
+    display: block;
+    margin-bottom: -2.1em;
+    padding: 2px 6px;
+    border: {
+      radius: $standard-border-radius;
+      width: $border-size;
+    }
   }
 }
 
 
-/**
- * Default prefix view
- */
-ul.menu > span.pref:not(:empty) {
-  position: absolute;
-  min-width: 5px;
-/*
-  border-bottom-right-radius: 10px;
-*/
-  font-size: 80%;
-  left: 0;
-  bottom: 0;
-  display: block;
-  margin-bottom: -2.1em;
-  padding: 2px 6px;
-  margin-left: -2px;
-  border-radius: $standard-border-radius;
-}
diff --git a/public/scss/pagination.scss b/public/scss/pagination.scss
index c0cfdd1..0e099ac 100644
--- a/public/scss/pagination.scss
+++ b/public/scss/pagination.scss
@@ -1,5 +1,7 @@
 @charset "utf-8";
-@import "colors";
+@import "util";
+
+$border-size : 2px;
 
 /**
  * The pagination view
@@ -8,11 +10,11 @@
 <div id="pagination">
   <a rel="prev"><span><i class="fa fa-caret-left"></i></span></a>
   <a rel="self"><span>1</span></a>
-  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=2"><span>2</span></a>
-  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=3"><span>3</span></a>
+  <a href="#p=2"><span>2</span></a>
+  <a href="#3"><span>3</span></a>
   <span><i class="fa fa-ellipsis-h"></i></span>
-  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=67"><span>67</span></a>
-  <a rel="next" href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=2"><span><i class="fa fa-caret-right"></i></span></a>
+  <a href="#67"><span>67</span></a>
+  <a rel="next" href="#2"><span><i class="fa fa-caret-right"></i></span></a>
 </div>
 */
 #pagination {
@@ -21,65 +23,92 @@
    * This may need to be overwritten in case multiple
    * paginations have to be activated.
    */
+  font-size: 0;
   position: fixed;
   right: 20px;
-
   bottom: 10px;
   z-index: 400;
+  padding: 0;
+  height: auto;
+  line-height: 0;
 
-  span {
-    display: inline-block;
-    background-color: $pagination-bg;
-    height: 1.5em;
-    line-height: 1.5em;
-    @include standard-text-padding;
-    text-align: center;
-    border: {
-      top-width: 2px;
-      top-style: solid;
-      bottom-width:  2px;
-      bottom-style: solid;
-      color: $pagination-border;
-    }
-    box-shadow: $pagination-box-shadow;
-  }
-  a {
-    text-shadow: $light-shadow;
-    &[rel=self] span {
+  > a {
+    margin: 0;
+    font-size: 10pt;
+    padding: 0;
+
+    > span {
+      box-shadow: $choose-box-shadow;
+      @include standard-text-padding;
+      @include choose-item;
+      display: inline-block;
+      line-height: 2em;
+      text-align: center;
       border: {
-	color: $dark-orange;
+	top-width: $border-size;
+	bottom-width:  $border-size;
+	top-style: solid;
+	bottom-style: solid;
+      }
+    }
+
+    &:not(:link):not([rel=self]) span {
+      color: $choose-blind-color;
+    }
+
+    &.ellipsis > span {
+      > span {
+	@include blind;
+      }
+      &::after {
+	font-family: 'FontAwesome';
+	content: '\f141';
+      }
+    }
+
+    &[rel=self] > span {
+      @include choose-active;
+      border {
+	left-width: $border-size;
+	right-width: $border-size;
 	left-style: solid;
 	right-style: solid;
-	left-width: 2px;
-	right-width: 2px;
-      }
-      background-color: $light-orange;
-      color: $darkest-orange;
-    }
-    &[rel=next] span {
-      border: {
-	right-width: 2px;
-	right-style: solid;
-	top-right-radius: 12px;
-	bottom-right-radius: 12px;
       }
     }
-    &[rel=prev] span {
+
+    &[rel=prev] > span {
       border: {
-	left-width: 2px;
+	top-left-radius: $standard-border-radius;
+	bottom-left-radius: $standard-border-radius;
+	left-width: $border-size;
 	left-style: solid;
-	top-left-radius: 12px;
-	bottom-left-radius: 12px;
-      }      
-    }
-    &[href] {
-      color: $light-green;
-      span:hover {
-        background-color: $light-green;
-        border-color: $dark-green;
-        color: $dark-green;
-        text-shadow: none;
       }
+      > span {
+	@include blind;
+      }
+      &::after {
+	font-family: 'FontAwesome';
+	content: '\f0d9';
+      }
+    }
+
+    &[rel=next] > span {
+      border: {
+	top-right-radius: $standard-border-radius;
+	bottom-right-radius: $standard-border-radius;
+	right-width: $border-size;
+	right-style: solid;
+      }
+      > span {
+	@include blind;
+      }
+      &::after {
+	font-family: 'FontAwesome';
+	content: '\f0da';
+      }
+    }
+    &:link:hover span {
+      @include choose-hover;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/public/scss/resultinfo.scss b/public/scss/resultinfo.scss
new file mode 100644
index 0000000..1f1097f
--- /dev/null
+++ b/public/scss/resultinfo.scss
@@ -0,0 +1,19 @@
+@charset "utf-8";
+@import "util";
+
+div.resultinfo {
+  clear: both;
+
+  p.found {
+    font-size: 10pt;
+    padding: 0;
+    margin: 0;
+    text-align: right;
+  }
+}
+
+#total-results {
+  color: $total-results;
+  font-weight: bold;
+}
+
diff --git a/public/scss/searchbar.scss b/public/scss/searchbar.scss
new file mode 100644
index 0000000..5ac8c0c
--- /dev/null
+++ b/public/scss/searchbar.scss
@@ -0,0 +1,134 @@
+@charset "utf-8";
+@import "util";
+
+$border-size: 2px;
+$right-distance: 30px;
+
+#q-field {
+  @include box-sizing-box();
+  outline: none;
+  font-size: 11pt;
+  border: $border-size solid $nearly-white;
+  padding: 2px;
+  width: 100%;
+  margin: 0;
+  display: block;
+}
+
+#searchbar {
+  position: relative;
+  @include box-sizing-box();
+  width: 100%;
+  padding-right: 60px;
+  button[type=submit] {
+    position: absolute;
+    font-weight: normal;
+    @include choose-item;
+    padding: 0;
+    height: 100%;
+    top: 0;
+    right: $right-distance;
+    width: 30px;
+    cursor:pointer;
+    > span:nth-of-type(1) {
+      @include blind;
+    }
+    &::after {
+      font-family: "FontAwesome";
+      content: "\f002";
+    }
+    border: {
+      width: $border-size;
+      style: solid;
+      color: $nearly-white;
+    }
+    &:hover {
+      @include choose-hover;
+    }
+    &:active {
+      @include choose-active;
+    }
+
+    /**
+     * This is just for styling the last button,
+     * in case there are more than one buttons.
+     */
+    &:last-of-type {
+      @include box-sizing-box();
+      border: {
+	right-width: $border-size;
+	right-style: solid;
+	top-right-radius: $standard-border-radius;
+	bottom-right-radius: $standard-border-radius;
+      }
+    }
+  }
+  button + button {
+    right: 0;
+  }
+}
+
+/**
+ * Checkbox styling
+ * http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css
+*/
+.checkbox {
+  display: none;
+  + label {
+    cursor: pointer;
+    span { 
+      border-radius: 4px;
+      display: inline-block;
+      width: 1em; // 12px
+      height: 1em;
+      line-height: 1em; // 12px;
+      vertical-align: middle;
+      padding: 0;
+      margin-right: .2em;
+/*
+    background-color: $nearly-white;
+    &:hover {
+      border-color: $nearly-white;
+    }
+*/
+      &:after {
+	font-family: "FontAwesome"; 
+	content: '\f096';
+      }
+    }
+  }
+  &:checked + label span { 
+    &:after {
+      content:"\f046";
+    }
+  }
+}
+
+#button-right {
+  display: inline-block;
+  float: right;
+  color: $nearly-white;
+  line-height: 2em;
+  margin-right: $right-distance;
+  > a {
+    color: $nearly-white;
+    cursor:pointer;
+    position: relative;
+    font-size: 120%;
+    > span {
+      @include blind;
+    }
+  }
+  > a::after {
+    font-family: 'FontAwesome';
+  }
+  > a.tutorial::after {
+    content: '\f19d';
+  }
+  > a.align.left::after {
+    content: '\f036';
+  }
+  > a.align.right::after {
+    content: '\f038';
+  }
+}
diff --git a/public/scss/util.scss b/public/scss/util.scss
new file mode 100644
index 0000000..7c3f056
--- /dev/null
+++ b/public/scss/util.scss
@@ -0,0 +1,122 @@
+/**
+ * Orange Colors
+ */
+$light-orange:   #f4eebb; // #ffe56a;
+$middle-orange:  #ffd080;
+$dark-orange:    #ffa500;
+$darker-orange:  #ff8000;
+$darkest-orange: darken($dark-orange, 20%);
+// $light-orange-2: #f4eebb;, #ffd080;
+// Yellow: #fff48d
+
+/**
+ * Green Colors
+ */
+$dark-green:    #496000;
+$middle-green:  #688704;
+$light-green:   #7ba400;
+
+/**
+ * Blue Colors
+ */
+$light-blue:     #cfe6f4;
+$dark-blue:      #73b2f4;
+$darkest-blue:   darken($dark-blue, 40%);
+
+
+/*
+ * Grey
+ */
+$light-grey:   #ddd;
+$dark-grey:    #555;
+$middle-grey:  #999;
+// $nearly-white: #f5f5f5;
+$nearly-white: #fff;
+
+$dark-shadow: 1px 1px 1px rgba(0,0,0,0.3);
+$light-shadow: 1px 1px rgba(255,255,255,0.5);
+
+$total-results: $light-green;
+
+/**
+ * KWIC colors
+ */
+$kwic-border:       $middle-grey;
+$kwic-line-noneven: $light-grey;
+$kwic-line-even:    $nearly-white;
+$kwic-match-color:  $dark-grey;
+$kwic-match-shadow: $light-shadow;
+
+$kwic-highlight-1:  #c1002b;
+$kwic-highlight-2:  $dark-blue;   // #009ee0;
+$kwic-highlight-3:  $dark-orange; // #f29400;
+$kwic-highlight-4:  $light-green;
+
+$choose-bg:     $light-grey;
+$choose-border-color: $middle-grey;
+$choose-border: 2px solid $choose-border-color;
+$choose-color:  $dark-grey;
+$choose-blind-color:  $middle-grey;
+$choose-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+$standard-border-radius: 6px;
+
+/**
+ * Path information
+ */
+$img-path: '../../img/build';
+$font-path: '../../font';
+
+/**
+ * Margins
+ */
+$standard-margin: 30px;
+$right-match-distance: 20px;
+
+@mixin blind {
+  position: absolute;
+  margin-left: -3000px;
+}
+
+@mixin choose-item {
+  color: $choose-color;
+  background-color: $choose-bg;
+  border-color: $choose-border-color;
+  text-shadow: $light-shadow;
+}
+
+@mixin choose-hover {
+  color: $nearly-white;
+  text-shadow: none;
+  background-color: $dark-orange;
+  border-color: $darker-orange;
+}
+
+@mixin choose-active {
+  color: $dark-green;
+  text-shadow: none;
+  background-color: $light-green;
+  border-color: $dark-green;
+}
+
+@mixin color-transition {
+  transition: color 0.3s ease 0s;
+}
+
+@mixin standard-text-padding {
+  padding-left: .4em;
+  padding-right: .4em;
+}
+
+@mixin box-sizing-box() {
+  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+  box-sizing: border-box;         /* Opera/IE 8+ */
+}
+
+
+// https://css-tricks.com/almanac/properties/a/appearance/
+@mixin no-appearance {
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  appearance:none;
+}