diff --git a/public/css/menu.css b/public/css/menu.css
index 5b4a5d3..1ab5162 100644
--- a/public/css/menu.css
+++ b/public/css/menu.css
@@ -2,23 +2,49 @@
 
 ul.menu {
   position: absolute;
-  background-color: #7ba400;
-  font-weight: normal;
-  border: 2px solid white;
+  text-indent: 0;
   list-style-type: none;
   list-style-position: outside;
   padding-left: 0;
+  padding-bottom: 3px;
+  background-color: #ddd; /* $pagination-bg */
+}
+
+ul.menu,
+ul.menu > span.pref:not(:empty) {
+  text-shadow: none;
+/*
+  background-color: #7ba400;
+*/
+  font-weight: normal;
+  border: 2px solid #688704; /* $middle-green */
+  box-shadow: 2px 2px 2px rgba(0,0,0,0.2); /* $pagination-box-shadow */
   z-index: 16;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
 }
 
-ul.menu > li {
-  padding: 2px 5px;
+/*
+  .hint {
+    max-width: 23em;
+    margin-top: -1px;
+    display: inline-block;
+    opacity: 0;
+    border-top-width: 0px;
+  }
+*/
+
+ul.menu > li,
+ul.menu > span.pref:not(:empty) {
+  cursor: pointer;
+  padding: 3px 8pt;
+  white-space: normal;
 }
 
-ul.menu > *.active,
-ul.menu > *:hover {
-  background-color: rgba(255,255,255,.25);
-  color: #496000;
+ul.menu > li,
+ul.menu > span.pref:not(.active) {
+  background-color: #ddd; /* $pagination-bg */
+  color: #7ba400; /* $light-green */
 }
 
 ul.menu > li:first-of-type {
@@ -30,11 +56,11 @@
 }
 
 ul.menu > li:first-of-type:not(.no-more) {
-  border-top-color: #ffa500;
+  border-top-color: #ffa500; /* $dark-orange */
 }
 
 ul.menu > li:last-of-type:not(.no-more) {
-  border-bottom-color: #ffa500;
+  border-bottom-color: #ffa500; /* $dark-orange */
 }
 
 ul.menu > li mark {
@@ -47,14 +73,39 @@
 ul.menu > span.pref:not(:empty) {
   position: absolute;
   min-width: 2px;
+  border-bottom-right-radius: 10px;
+  left: 0;
+  bottom: 0;
+  display: block;
+  margin-bottom: -2.1em;
+  padding: .1em .3em;
+  margin-left: -2px;
+  border-radius: 6px;
+}
+
+/*
   border: 2px solid white;
   height: -1.5em;
-  display: block;
-  right: 0;
-  bottom: 0;
   border-top-width: 0;
-  padding: .1em .3em;
-  margin-bottom: -1.7em;
-  margin-right: -2px;
   background-color: #7ba400;
-}
\ No newline at end of file
+*/
+
+/*
+  .hint > li {
+    border-bottom: 5px solid transparent;
+  }
+*/
+ul.menu > *.active {
+  background-color: #7ba400; /* $light-green; */
+  color: #496000; /* $dark-green; */
+}
+
+ul.menu > li:hover,
+ul.menu > span.pref:hover {
+/*
+  background-color: rgba(255,255,255,.25);
+  color: #496000;
+*/
+  background-color: #ffa500; /* $dark-orange; */
+  color: white;
+}
diff --git a/public/js/demo/vc.html b/public/js/demo/vc.html
index 048c168..0a7efa9 100644
--- a/public/js/demo/vc.html
+++ b/public/js/demo/vc.html
@@ -32,13 +32,13 @@
             {
               "@type":"koral:doc",
               "key":"Titel",
-              "value":"Baum",
+              "value":"Der Birnbaum",
               "match":"match:eq"
             },
             {
               "@type":"koral:doc",
               "key":"Veröffentlichungsort",
-              "value":"hihi",
+              "value":"Mannheim",
               "match":"match:eq"
             },
             {
@@ -47,14 +47,14 @@
               "operands":[
                 {
                   "@type":"koral:doc",
-                  "key":"Titel",
-                  "value":"Baum",
+                  "key":"Untertitel",
+                  "value":"Aufzucht und Pflege",
                   "match":"match:eq"
                 },
                 {
                   "@type":"koral:doc",
-                  "key":"Veröffentlichungsort",
-                  "value":"hihi",
+                  "key":"Untertitel",
+                  "value":"Gedichte",
                   "match":"match:eq",
                   "rewrites" : [
                     {
@@ -70,9 +70,10 @@
         },
         {
           "@type":"koral:doc",
-          "key":"Untertitel",
-          "value":"huhu",
-          "match":"match:eq"
+          "key":"Veröffentlichungsdatum",
+          "type":"type:date",
+          "value":"2015-03-05",
+          "match":"match:geq"
         }
       ]
     };
diff --git a/public/kwic-4.0.css b/public/kwic-4.0.css
deleted file mode 100644
index e69de29..0000000
--- a/public/kwic-4.0.css
+++ /dev/null
diff --git a/public/sass/colors.scss b/public/sass/colors.scss
index 1aaf6d7..86e5fa4 100644
--- a/public/sass/colors.scss
+++ b/public/sass/colors.scss
@@ -10,6 +10,7 @@
 $darkest-blue:   darken($dark-blue, 40%);
 
 $dark-green:    #496000;
+$middle-green:  #688704;
 $light-green:   #7ba400;
 
 $total-results: $light-green; // #c1002b;
diff --git a/public/style.css b/public/style.css
deleted file mode 100644
index 4a7743d..0000000
--- a/public/style.css
+++ /dev/null
@@ -1,330 +0,0 @@
-@charset "utf-8";
-
-body, html {
-  color: #666;
-  font-family: verdana, tahoma, arial;
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
-  margin: 0;
-}
-
-a {
-  color: inherit;
-}
-
-#top {
-  background-color: #7ba400;
-  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
-  box-sizing: border-box;         /* Opera/IE 8+ */
-  padding: 0pt;
-  padding-top: 5px;
-  position: relative;
-  height: 70px;
-  padding-left: 30px;
-}
-
-#q-field {
-  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
-  box-sizing: border-box;         /* Opera/IE 8+ */
-}
-
-#button-right {
-  position: absolute;
-  right: 15px;
-  top: 15px;
-}
-
-input, button {
-  border: 2px solid white;
-  padding: 3px;
-  font-size: 11pt;
-}
-
-form {
-  margin-left: 235px;
-  margin-top:0px
-}
-
-form input[type=search] {
-  width: 50%;
-}
-
-a {
-  text-decoration: none;
-}
-
-p.found {
-  font-size: 10pt;
-  padding: 0;
-  margin: 0;
-}
-
-p.found {
-  text-align: right;
-}
-
-#pagination {
-  position: fixed;
-  right: 20px;
-  bottom: 10px;
-  z-index: 800;
-}
-
-#pagination span {
-  display: inline-block;
-  background-color: #ddd;
-  margin: 2pt;
-  height: 1.5em;
-  padding-left: .5em;
-  padding-right: .5em;
-  line-height: 1.5em;
-  text-align: center;
-  border-width: 2px;
-  border-style: solid;
-  border-color: #999;
-  box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-}
-
-#pagination a {
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
-}
-
-#pagination a[rel=self] span {
-  border-color: #ffa500;
-  background-color: #f4eebb;
-  color: #ff8000;
-}
-
-#pagination a[href] {
-  color: #7ba400;
-}
-
-#pagination a[href] span:hover {
-  background-color: #7ba400;
-  border-color: #496000;
-  color: #496000;
-  text-shadow: none;
-}
-
-#total-results {
-  color: #c1002b;
-}
-
-code.query {
-  background-color: #f4eebb;
-  display: block;
-  border-style: solid;
-  border-color: #ffa500;
-  font-size: 12pt;
-  padding: 2pt;
-  color: #bb6000;
-  font-weight: bold;
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
-  border-width: 2px;
-  margin: 0;
-  margin-bottom: 5pt;
-  cursor: pointer;
-}
-
-code.query.serial:not(.active) span {
-  padding: 2pt;
-}
-
-code.query pre {
-  display: block;
-  padding: 2px 5px;
-  margin: 0;
-}
-
-code.query.serial:not(.active) pre {
-  display: none;
-}
-
-code.query.serial.active span {
-  display: none;
-}
-
-#sidebar.active {
-  margin-left: 0px;
-  left: 0;
-  top: 0;
-}
-
-#sidebar {
-  color: #fff;
-  text-shadow: none;
-  transition: all .3s ease-in-out;
-  position: fixed;
-  z-index: 500;
-  height: 100%;
-  background-color: #496000;
-  width: 260px;
-  margin-left: -245px;
-  left: 0;
-  top: 0;
-}
-
-#sidebar > * {
-  opacity: 0;
-  transition-property: opacity;
-  transition-duration: .3s;
-}
-
-#sidebar:not(.active) > i.fa-bars {
-  opacity: 1;
-  cursor: pointer;
-  background-color: #496000;
-  position: fixed;
-  font-size: 16pt;
-  width: 16pt;  
-  height: 17pt;
-  padding: 6pt;
-  bottom: 0;
-  left: 0;
-  border-top-right-radius: 5pt;
-}
-
-#sidebar.active > * {
-  opacity: 1;
-}
-
-#sidebar.active > i.fa-bars {
-  opacity: 0;
-}
-
-#sidebar h2 {
-  font-size: 100%;
-  font-weight: bold;
-  text-align: center;
-  padding: 0;
-  margin: 0 0 5pt 0;
-}
-
-#sidebar ul {
-  list-style-type: none;
-  margin: 0;
-  font-size: 10pt;
-  text-indent: 0;
-  padding: 0;
-}
-
-#sidebar ul li {
-  padding: 4pt 10pt;
-}
-
-#sidebar ul li h3 {
-  font-weight: bold;
-  font-size: 100%;
-  padding: 0;
-  margin: 0;
-}
-
-#sidebar ul li.active h3 {
-  margin-bottom: 2pt;
-  padding-bottom: 2pt;
-  border-bottom: 1px solid black;
-}
-
-#sidebar ul li.active {
-  background-color: #7ba400;
-  text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
-}
-
-dl.info {
-  font-size: 9pt;
-  padding: 0 10pt;
-}
-
-dl.info dt {
-  font-weight: bold;
-  float: left;
-}
-
-dl.info dd {
-  text-align: right;
-}
-
-#tutorial {
-  position: fixed;
-  display: block;
-  z-index: 9999;
-  background-color: #496000;
-  border-radius: 15px;
-  padding: 5px;
-  top: 2%;
-  bottom: 2%;
-  left: 5%;
-  right: 5%;
-}
-
-#tutorial:not(.active) {
-  display: none;
-}
-
-#tutorial.active {
-  display: block;
-}
-
-#tutorial > i,
-#tutorial > a > i {
-  font-size: 20pt;
-  color: #496000;
-  position: absolute;
-  z-index: 100;
-  top: 10pt;
-  right: 20pt;
-  cursor: pointer;
-}
-
-#tutorial > a > i {
-  right: 40pt;
-}
-
-#tutorial iframe {
-  width: 100%;
-  min-height: 100%;
-  border-width: 0;
-  border-radius: 10px;
-  background-image: url('img/crab.svg');
-  background-size: 10%;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-color: white;
-}
-
-h1 {
-    margin: 0;
-    left: 0;
-    top: 0;
-    background-image: url('/img/korap-logo-solo.svg');
-    position: absolute;
-    width: 260px; /* like sidebars*/
-    height: 68px; /* like #top */
-    z-index: 999;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 65%;
-}
-
-h1 span {
-  margin-left: -3000px;
-}
-
-#search {
-  margin-bottom: 44px;
-}
-
-#search.match {
-  margin-top: 14pt;
-}
-
-main {
-  margin-left: 30px;
-  margin-right: 14px;
-}
-
-main.embedded {
-  margin-left: 14px;
-  margin-right: 14px;
-}
\ No newline at end of file