diff --git a/Changes b/Changes
index 6bfcd63..46d7fa3 100755
--- a/Changes
+++ b/Changes
@@ -1,10 +1,11 @@
-0.39 2020-08-24
+0.39 2020-08-25
         - Add information on secret file to Readme.
         - Change default API endpoint to korap.ids-mannheim.de.
         - Fix label for toggle plugins.
         - Activate plugin registry.
         - Forward 'pipe' parameter to backend.
         - Introduce base css file for plugins.
+        - Refactoring of sass files.
 
         WARNING: If you relied on the former default API endpoint
           being http://localhost:9999/, this will break your
diff --git a/Gruntfile.js b/Gruntfile.js
index 114014a..d30b19e 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -79,10 +79,10 @@
         },
         files: {
           'public/css/kalamar-<%= pkg.version %>.css' : 'dev/scss/kalamar.scss',
-          'public/css/kalamar-plugin-<%= pkg.pluginVersion %>.css' : 'dev/scss/base.scss',
+          'public/css/kalamar-plugin-<%= pkg.pluginVersion %>.css' : 'dev/scss/plugin.scss',
           'dev/css/kalamar.css' : 'dev/scss/kalamar.scss',
           'dev/css/kwic.css' : 'dev/scss/main/kwic.scss',
-          'dev/css/kalamar-plugin.css' : 'dev/scss/base.scss'
+          'dev/css/kalamar-plugin.css' : 'dev/scss/plugin.scss'
         }
       }
     },
diff --git a/dev/demo/all.html b/dev/demo/all.html
index 79130e6..4ca3c6b 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -143,6 +143,10 @@
               "type": "type:string"
             },
             {
+              "@type":"koral:docGroupRef",
+              "ref":"@admin/derekosub"
+            },
+            {
               "@type": "koral:doc",
               "key": "subTitle",
               "match": "match:eq",
diff --git a/dev/demo/alldemo.js b/dev/demo/alldemo.js
index 108bfe6..ab252ee 100644
--- a/dev/demo/alldemo.js
+++ b/dev/demo/alldemo.js
@@ -315,6 +315,10 @@
               "match":"match:eq"
             },
             {
+              "@type":"koral:docGroupRef",
+              "ref":"@admin/derekosub"
+            },
+            {
               "@type":"koral:doc",
               "key":"subTitle",
               "value":"Gedichte",
diff --git a/dev/img/noise.png b/dev/img/noise.png
deleted file mode 100644
index 12ca37d..0000000
--- a/dev/img/noise.png
+++ /dev/null
Binary files differ
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
deleted file mode 100644
index fe16021..0000000
--- a/dev/scss/base.scss
+++ /dev/null
@@ -1,128 +0,0 @@
-@charset "utf-8";
-@import "util";
-@import "base/fonts";
-@import "base/flextable";
-@import "base/fragment";
-@import "base/load";
-@import "base/form";
-@import "base/view";
-
-/**
- * Basic global CSS rules for Kalamar
- */
-
-body,
-html,
-select,
-g > text {
-  color: $dark-grey;
-  font-family: verdana, tahoma, arial, Helvetica, sans-serif;
-  margin: 0;
-}
-
-* {
-  @include box-sizing-box;
-}
-
-g > text {
-  fill: $dark-grey;
-}
-
-html {
-  height: 100%;
-}
-
-body {
-  position: relative;
-  min-height: 100%;
-  font-size: 12pt;
-  margin: 0;
-  padding: 0;
-}
-
-
-a {
-  &:link {
-    color: $dark-orange;
-    text-decoration: none;
-    &:hover {
-      color: $darkest-orange;
-      @include color-transition;
-    }
-  }
-
-  // External links
-  &[href^="http://"]::after,
-  &[href^="https://"]::after {
-    font-family: FontAwesome;
-    white-space: nowrap;
-    content: " " + $fa-extlink;
-    font-size: 75%;
-  }
-}
-
-// Styles for Mojolicious::Plugin::TagHelpers::MailToChiffre
-a[onclick$='return PArok(this,false)'] {
-  direction:rtl;
-  unicode-bidi:bidi-override;
-  text-align:left;
-  & > span {
-    &:nth-child(1n+2){
-      display:none
-    }
-    &:nth-child(1)::after{
-      content:'@'
-    }
-  }
-}
-
-button {
-  cursor: pointer;
-}
-
-button[type=submit] {
-  font-weight: normal;
-  @include choose-item;
-  padding: 0;
-  height: 100%;
-  top: 0;
-  width: $button-width;
-  cursor:pointer;
-  > span:nth-of-type(1) {
-    @include blind;
-  }
-  &::after {
-    font-family: "FontAwesome";
-  }
-  border: {
-    width: $border-size;
-    style: solid;
-    color: $nearly-white;
-  }
-  &:hover, &:focus {
-    @include choose-hover;
-  }
-  &::-moz-focus-inner {
-    border: none;
-  }
-  &: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;
-}
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
new file mode 100644
index 0000000..022c590
--- /dev/null
+++ b/dev/scss/base/base.scss
@@ -0,0 +1,128 @@
+@charset "utf-8";
+@import "../util";
+@import "fonts";
+@import "flextable";
+@import "fragment";
+@import "load";
+@import "form";
+@import "view";
+@import "menu";
+
+/**
+ * Basic global CSS rules for Kalamar
+ */
+
+
+* {
+  @include box-sizing-box;
+}
+
+body,
+html,
+select,
+g > text {
+  font-family: verdana, tahoma, arial, Helvetica, sans-serif;
+  color:       $dark-grey;
+  margin:      0;
+}
+
+g > text {
+  fill: $dark-grey;
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  position:   relative;
+  min-height: 100%;
+  font-size:  12pt;
+  margin:     0;
+  padding:    0;
+}
+
+a {
+  &:link {
+    text-decoration: none;
+    color:           $dark-orange;
+    &:hover {
+      color:      $darkest-orange;
+      transition: color 0.3s ease 0s;
+    }
+  }
+
+  // External links
+  &[href^="http://"]::after,
+  &[href^="https://"]::after {
+    @include icon-font;
+    content:   " " + $fa-extlink;
+    font-size: 75%;
+  }
+}
+
+// Styles for Mojolicious::Plugin::TagHelpers::MailToChiffre
+a[onclick$='return PArok(this,false)'] {
+  unicode-bidi: bidi-override;
+  direction:    rtl;
+  text-align:   left;
+  & > span {
+    &:nth-child(1n+2){
+      display: none
+    }
+    &:nth-child(1)::after{
+      content: '@'
+    }
+  }
+}
+
+.clear {
+  clear: both;
+}
+
+blockquote {
+  border-radius:    $standard-border-radius;
+  padding:          2pt 5pt 2pt 20pt;
+  margin:           0;
+  border-left:      5px solid $ids-blue-1;
+  background-color: $ids-blue-2;
+  color:            $ids-blue-1;
+
+  &.bug,
+  &.missing {
+    border-left-color: $dark-red;
+    background-color:  $middle-red;
+    color:             $nearly-white;
+  }
+}
+
+dl {
+  margin:         0;
+  padding-bottom: .5em;
+
+  dt {
+    font-weight: bold;
+
+    abbr {
+      border-width: 0;
+
+      &[data-type=token]::after {
+	      color: $ids-blue-1;
+      }
+
+      &[data-type=span]::after {
+	      color: $ids-pink-1;
+      }
+
+      &::after {
+	      content:        ' (' attr(title) ')';
+	      vertical-align: bottom;
+	      font: {
+          style:  italic;
+	        weight: normal;
+	        size:   80%;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/dev/scss/base/choose.scss b/dev/scss/base/choose.scss
new file mode 100644
index 0000000..fc3d250
--- /dev/null
+++ b/dev/scss/base/choose.scss
@@ -0,0 +1,66 @@
+@import "colors";
+
+/**
+ * Some color definitions and mixins for
+ * buttons and menus.
+ */
+$choose-bg:           $light-grey;
+$choose-color:        $dark-grey;
+$choose-blind-color:  $middle-grey;
+$choose-border-color: $middle-grey;
+$choose-border:       2px solid $choose-border-color;
+$choose-box-shadow:   2px 2px 2px  rgba(0,0,0,0.2);
+
+
+/**
+ * Chooseable items (default)
+ */
+@mixin choose-item {
+  color:            $choose-color;
+  background-color: $choose-bg;
+  border-color:     $choose-border-color;
+  text-shadow:      $light-shadow;
+}
+
+
+/**
+ * Chooseable items (mouse over)
+ */
+@mixin choose-hover {
+  color:            $nearly-white;
+  background-color: $dark-orange;
+  border-color:     $darker-orange;
+  text-shadow:      none;
+}
+
+
+/**
+ * Chooseable items (not available)
+ */
+@mixin choose-inactive {
+  color:            lighten($choose-color, 20%);
+  background-color: lighten($choose-bg, 20%);
+  border-color:     transparent;
+  text-shadow:      none;
+}
+
+/**
+ * Chooseable items (active)
+ */
+@mixin choose-active {
+  color:            $dark-green;
+  background-color: $light-green;
+  border-color:     $dark-green;
+  text-shadow:      none;
+}
+
+
+/**
+ * Chooseable items (action: remove something)
+ */
+@mixin choose-remove {
+  color:            $nearly-white;
+  background-color: $middle-red;
+  border-color:     $dark-red;
+  text-shadow:      none;
+}
diff --git a/dev/scss/base/colors.scss b/dev/scss/base/colors.scss
new file mode 100644
index 0000000..244d1fe
--- /dev/null
+++ b/dev/scss/base/colors.scss
@@ -0,0 +1,87 @@
+/**
+ * Some colors and shadow definitions
+ * for Kalamar,
+ */
+
+/**
+ * Official IDS colors
+ */
+$ids-orange-1: rgb(246, 168,   0);
+$ids-orange-2: rgb(242, 148,   0);
+$ids-grey-1:   rgb(135, 136, 138);
+$ids-grey-2:   rgb(217, 218, 219);
+$ids-blue-1:   rgb(  0, 158, 224); // Pragmatik
+$ids-blue-2:   rgb(188, 228, 247); // Pragmatik
+$ids-green-1:  rgb( 99, 111,   7); // Grammatik
+$ids-green-2:  rgb(227, 232, 163); // Grammatik
+$ids-pink-1:   rgb(193,   0,  43); // Lexik
+$ids-pink-2:   rgb(250, 243, 222); // Lexik
+
+$black:        #333;
+
+
+/**
+ * Orange Colors
+ */
+$light-orange:   #f4eebb;
+$middle-orange:  #ffd080;
+$dark-orange:    $ids-orange-1;
+$darker-orange:  #ff8000;
+$darkest-orange: #e55d00;
+
+
+/**
+ * Green Colors
+ */
+$dark-green:     $ids-green-1; // #496000;
+$middle-green:   lighten($ids-green-1, 9%);
+$light-green:    lighten($ids-green-1, 13%); // #7ba400;
+$lightest-green: desaturate(lighten($light-green, 35%), 20%); // #d8e38c;
+$grey-green:     darken(desaturate($lightest-green, 25%), 12%); // #bcc387;
+
+
+/**
+ * Blue Colors
+ */
+$light-blue:     $ids-blue-2;
+$dark-blue:      $ids-blue-1;
+$darkest-blue:   darken($dark-blue, 40%);
+
+
+/**
+ * Grey Colors
+ */
+$middle-grey:  $ids-grey-1; // #999;
+$light-grey:   $ids-grey-2; // #ddd;
+$dark-grey:    darken($middle-grey, 15%);
+$nearly-white: #fefefe;
+
+
+/**
+ * Red Colors (no IDS relation)
+ */
+$middle-red: #c1002b;
+$light-red:  lighten($middle-red, 40%);
+$dark-red:   darken($middle-red, 40%);
+$alert-red:  rgb(254,26,0);
+
+/**
+ * Basic shadows
+ */
+$dark-shadow:  1px 1px 1px rgba(0,0,0,0.3);
+$light-shadow: 1px 1px     rgba(255,255,255,0.5);
+
+
+/**
+ * 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:  $middle-red;
+$kwic-highlight-2:  $dark-blue;
+$kwic-highlight-3:  $dark-orange;
+$kwic-highlight-4:  $light-green;
diff --git a/dev/scss/base/flextable.scss b/dev/scss/base/flextable.scss
index 910d275..dc5ffd9 100644
--- a/dev/scss/base/flextable.scss
+++ b/dev/scss/base/flextable.scss
@@ -1,6 +1,9 @@
+@import "lengths";
+@import "mixins";
+
 /**
  * This defines flexible table cells
- * for views.
+ * for views (including media queries).
  */
 
 dl.flex {
diff --git a/dev/scss/base/fonts.scss b/dev/scss/base/fonts.scss
index 81726ad..febfa57 100644
--- a/dev/scss/base/fonts.scss
+++ b/dev/scss/base/fonts.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import "../util";
+@import "paths";
 
 /**
  * Load web fonts for Kalamar
@@ -10,5 +10,5 @@
   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;
+  font-style:  normal;
 }
\ No newline at end of file
diff --git a/dev/scss/base/form.scss b/dev/scss/base/form.scss
index d5c9aba..6fc75dc 100644
--- a/dev/scss/base/form.scss
+++ b/dev/scss/base/form.scss
@@ -1,4 +1,9 @@
-// This class defines form views
+@import "lengths";
+@import "colors";
+
+/**
+ * Definition of form elements for Kalamar.
+ */
 
 .form-table {
   display: block;
@@ -8,11 +13,9 @@
     border-width: 0;
     padding: 0;
     margin: 0;
-    // margin-left: 5em;
-  }
-
-  fieldset > div {
-    white-space: nowrap;
+    > div {
+      white-space: nowrap;
+    }
   }
 
   legend {
@@ -22,7 +25,8 @@
     border-radius: $standard-border-radius;
   }
 
-  label, input[type=radio] {
+  label,
+  input[type=radio] {
     font-size: 80%;
   }
   
@@ -31,63 +35,65 @@
     text-align: left;
   }
   
-  label[for], input[type=submit], a.form-button {
+  label[for],
+  input[type=submit],
+  a.form-button {
     margin-top: 2em;
   }
 
-  input, textarea, button, a.form-button {
+  input,
+  textarea,
+  button,
+  a.form-button {
     border-radius: $standard-border-radius;
   }
   
-  input, textarea {
-    border-color: $ids-grey-2;
+  input,
+  textarea {
+    border-color:     $ids-grey-2;
     background-color: $nearly-white;
-    border-style: solid;
+    border-style:     solid;
   }
   
-  input, textarea, select, a.form-button {
+  input,
+  textarea,
+  select,
+  a.form-button {
     border-style: solid;
-    display: inline-block;
-    width: 20%;
-    min-width: 20em;
-    padding: $base-padding;
+    display:      inline-block;
+    width:        20%;
+    min-width:    20em;
+    padding:      $base-padding;
   }
 
   input[type=radio] {
-    display: inline;
-    text-aline: right;
+    display:          inline;
+    text-aline:       right;
     background-color: red;
-    width: auto;
-    min-width: auto;
+    width:            auto;
+    min-width:        auto;
   }
   
-  input[readonly=readonly],textarea[readonly] {
-    background-color: $light-orange; // rgba(0,0,0,0.5);
+  input[readonly=readonly],
+  textarea[readonly] {
+    background-color: $light-orange;
   }
   
   .field-with-error {
     border-color: $ids-pink-1;
   }
 
-  /*
-  input:not([type=radio]),
-  button,
-  a.form-button {
-     height: 3em;
-  }
-*/
-
   input[type=submit],
   button,
   a.form-button {
-    display: inline-block;
-    cursor: pointer;
-    border-width: thin;
-    text-align: center;
+    display:          inline-block;
+    cursor:           pointer;
+    border-width:     thin;
+    text-align:       center;
     background-color: $middle-green;
-    border-color: $dark-green;
-    font-size: 8pt;
-    color: $dark-green;
+    border-color:     $dark-green;
+    font-size:        8pt;
+    color:            $dark-green;
   }
 
   a.form-button:hover {
@@ -95,13 +101,98 @@
   }
   
   label.field-required::after {
-    color: $ids-blue-1;
-    content:'*';
+    color:   $ids-blue-1;
+    content: '*';
   }
 }
 
 .button-abort {
   background-color: $middle-orange !important;
-  color: $darkest-orange !important;
-  border-color: $darkest-orange !important;
+  color:            $darkest-orange !important;
+  border-color:     $darkest-orange !important;
+}
+
+button {
+  cursor: pointer;
+
+  + button {
+    right: 0;
+  }
+  
+  &[type=submit] {
+    @include choose-item;
+    font-weight: normal;
+    padding:     0;
+    height:      100%;
+    top:         0;
+    width:       $button-width;
+
+    > span:nth-of-type(1) {
+      @include blind;
+    }
+
+    &::after {
+      font-family: "FontAwesome";
+    }
+    
+    border: $border-size solid $nearly-white;
+
+    &:hover,
+    &:focus {
+      @include choose-hover;
+    }
+
+    &::-moz-focus-inner {
+      border: none;
+    }
+
+    &:active {
+      @include choose-active;
+    }
+
+    /*
+     * This is just for styling the last button,
+     * in case there are more than one buttons.
+     */
+    &:last-of-type {
+      border: {
+        right-width:         $border-size;
+        right-style:         solid;
+        top-right-radius:    $standard-border-radius;
+        bottom-right-radius: $standard-border-radius;
+      }
+    }
+  }
+}
+
+/**
+ * Checkbox styling
+ * http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css
+ */
+.checkbox {
+  display: none;
+
+  + label {
+    cursor: pointer;
+
+    span {
+      display:        inline-block;
+      border-radius:  4px;
+      width:          1em;
+      height:         1em;
+      line-height:    1em;
+      vertical-align: middle;
+      padding:        0;
+      margin-right:   .2em;
+
+      &::after {
+	      @include icon-font; 
+	      content: $fa-check;
+      }
+    }
+  }
+
+  &:checked + label span::after {
+    content: $fa-checked;
+  }
 }
diff --git a/dev/scss/base/fragment.scss b/dev/scss/base/fragment.scss
index 0a986d5..f68e7db 100644
--- a/dev/scss/base/fragment.scss
+++ b/dev/scss/base/fragment.scss
@@ -1,31 +1,40 @@
 @charset "utf-8";
-@import "../util";
+@import "choose";
+@import "lengths";
+@import "icons";
 
-.vc.fragment, p.query.fragment {
-  position:relative;
+/**
+ * Definitions of fragments for vc and query
+ * builder.
+ */
+
+.vc.fragment,
+p.query.fragment {
   @include choose-item;
+  position: relative;
+  padding:  4pt 6pt !important;
   
   border : {
-    width: $border-size;
-    style: solid;
+    width:  $border-size;
+    style:  solid;
     radius: $standard-border-radius;
   }
-  padding: 4pt 6pt !important;
+
   margin: {
-    // left: $border-size;
-    left: $left-distance;
-    top: .5em;
+    left:   $left-distance;
+    top:    .5em;
     bottom: .5em;
-    right: $right-view-distance;
+    right:  $right-view-distance;
   }
+
   &:hover {
-    cursor:pointer;
     @include choose-hover;
+    cursor: pointer;
   }
 
   // This is the description
   > span:first-of-type {
-    font-weight: bold;
+    font-weight:   bold;
     padding-right: 4pt;
   }
 
@@ -36,9 +45,9 @@
   
   &::after {
 	  font-family: 'FontAwesome';
-	  content: $fa-to-query;
-    position: absolute;
-    right: 4pt;
-    top: $border-size;
+	  content:     $fa-to-query;
+    position:    absolute;
+    right:       4pt;
+    top:         $border-size;
   }
 }
diff --git a/dev/scss/base/icons.scss b/dev/scss/base/icons.scss
new file mode 100644
index 0000000..64b9a60
--- /dev/null
+++ b/dev/scss/base/icons.scss
@@ -0,0 +1,35 @@
+/**
+ * Font Awesome symbol table.
+ */
+
+$fa-bars:         "\f0c9";
+$fa-extlink:      "\f08e";
+$fa-up:           "\f0d8";
+$fa-down:         "\f0d7";
+$fa-minimize:     "\f0d8";
+$fa-close:        "\f00d";
+$fa-download:     "\f019";
+$fa-info:         "\f05a";
+$fa-elipsis:      "\f141";
+$fa-previous:     "\f0d9";
+$fa-next:         "\f0da";
+$fa-search:       "\f002";
+$fa-rewrite:      "\f040";
+$fa-login:        "\f090";
+$fa-logout:       "\f08b";
+$fa-tutorial:     "\f19d";
+$fa-left-align:   "\f036";
+$fa-right-align:  "\f038";
+$fa-center-align: "\f037";
+$fa-question:     "\f128";
+$fa-checked:      "\f046";
+$fa-check:        "\f096";
+$fa-code:         "\f121";
+$fa-marked:       "\f005";
+// $fa-metadata:    "\f067";
+$fa-metadata:     "\f055";
+$fa-to-query:     "\f102";
+$fa-cut:          "\f0c4";
+$fa-plugin:       "\f1e6";
+$fa-referto:      "\f0c5";
+$fa-redo:         "\f01e";
diff --git a/dev/scss/base/lengths.scss b/dev/scss/base/lengths.scss
new file mode 100644
index 0000000..d0aafd5
--- /dev/null
+++ b/dev/scss/base/lengths.scss
@@ -0,0 +1,21 @@
+/*
+ * Defined lengths and sizes for the
+ * Kalamar layout.
+ */
+$standard-border-radius: 6px;
+$item-padding:           3pt 6pt;
+$button-width:           30px;
+$base-padding:           8px;
+$border-size:            2px;
+$result-border-size:     1px;
+$left-width:             176px;
+$border-size:            2px;
+$left-distance:          $left-width + ($border-size * 2);
+
+/**
+ * Margins
+ */
+$standard-margin:     40px;
+$right-distance:      $standard-margin;
+$right-view-distance: $standard-margin / 2;
+$logo-left-distance:  230px;
diff --git a/dev/scss/base/load.scss b/dev/scss/base/load.scss
index 1917a54..c634fa9 100644
--- a/dev/scss/base/load.scss
+++ b/dev/scss/base/load.scss
@@ -1,14 +1,18 @@
+/**
+ * Load indicator.
+ */
+
 div.loading {
   background-color: transparent !important;
-  height: 16px !important;
-  width: 16px !important;
-  margin: 0 auto !important;
+  height:           16px !important;
+  width:            16px !important;
+  margin:           0 auto !important;
 }
 
 .loading {
   background: {
     position: center;
-    repeat: no-repeat;
-    image: url('data:image/gif;base64,R0lGODlhEAAQAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48Hzh2UngyGvet6OpmKWmBb5TI+LlTOlAAACH5BAkEAAEALAAAAAAQABAAAAIohA+hu3gMnXyBqnkNw1XDnHThZ32bd6LUg0SOOIJsCaPmtOJvrctHAQAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48nxZKGLkxqGiungmyCXh9nRUleSZrO10AACH5BAkEAAEALAAAAAAQABAAAAIohA8RyKwN04pSWdumufp0niHghnkPyaWmqZLsKL3QWXUrJdpo66RKAQAh+QQJBAABACwAAAAAEAAQAAACJoQPEcisDdOKUlnbrp4IH989n1iBJUhK47itxkbGsEvRtXq/8B4UACH5BAkEAAEALAAAAAAQABAAAAIphA8RyKwN04pSWdvuNPto1HEX6G1YOYrain5im0pQ/GSnTIFr7eyhUQAAIfkECQQAAQAsAAAAABAAEAAAAiqMf6ALwWoelJFS5CbESTdeNUu3jWP4IWe2qS0TsmC8cuZFsrAkWrgtKQAAIfkECQQAAQAsAAAAABAAEAAAAiiMf6AL6LwMnDFQVG9SkrveWN6XjR82Mmi4cdMTvWsjnyIV4rIOgUwBACH5BAkEAAEALAAAAAAQABAAAAImjH+gC8HrXpNTxoeuzkltrkFg6BnMiJxpaYpWV76jDFKujV14LBUAIfkEAR4AAQAsAAAAABAAEAAAAiSEDxHIrA3TilJZ266eaN/8HJixdd4nailXgafrwSUVUqltQgUAOw==');
+    repeat:   no-repeat;
+    image:    url('data:image/gif;base64,R0lGODlhEAAQAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48Hzh2UngyGvet6OpmKWmBb5TI+LlTOlAAACH5BAkEAAEALAAAAAAQABAAAAIohA+hu3gMnXyBqnkNw1XDnHThZ32bd6LUg0SOOIJsCaPmtOJvrctHAQAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48nxZKGLkxqGiungmyCXh9nRUleSZrO10AACH5BAkEAAEALAAAAAAQABAAAAIohA8RyKwN04pSWdumufp0niHghnkPyaWmqZLsKL3QWXUrJdpo66RKAQAh+QQJBAABACwAAAAAEAAQAAACJoQPEcisDdOKUlnbrp4IH989n1iBJUhK47itxkbGsEvRtXq/8B4UACH5BAkEAAEALAAAAAAQABAAAAIphA8RyKwN04pSWdvuNPto1HEX6G1YOYrain5im0pQ/GSnTIFr7eyhUQAAIfkECQQAAQAsAAAAABAAEAAAAiqMf6ALwWoelJFS5CbESTdeNUu3jWP4IWe2qS0TsmC8cuZFsrAkWrgtKQAAIfkECQQAAQAsAAAAABAAEAAAAiiMf6AL6LwMnDFQVG9SkrveWN6XjR82Mmi4cdMTvWsjnyIV4rIOgUwBACH5BAkEAAEALAAAAAAQABAAAAImjH+gC8HrXpNTxoeuzkltrkFg6BnMiJxpaYpWV76jDFKujV14LBUAIfkEAR4AAQAsAAAAABAAEAAAAiSEDxHIrA3TilJZ266eaN/8HJixdd4nailXgafrwSUVUqltQgUAOw==');
   }
 }
diff --git a/dev/scss/base/menu.scss b/dev/scss/base/menu.scss
new file mode 100644
index 0000000..054dabd
--- /dev/null
+++ b/dev/scss/base/menu.scss
@@ -0,0 +1,248 @@
+@charset "utf-8";
+@import "choose";
+@import "lengths";
+@import "icons";
+
+/**
+ * Definitions for menu design.
+ */
+
+ul.menu {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  text-indent: 0;
+
+  opacity: 0;
+  &.visible {
+    opacity: 1;
+  }
+
+  list-style: {
+    type:     none;
+    position: outside;
+  }
+
+  &,
+  > span.pref:not(:empty) {
+    box-sizing:  border-box;
+    text-shadow: none;
+    font-weight: normal;
+    z-index:     120;
+  }
+  
+  > li,
+  > span.pref:not(.active) {
+    @include choose-item;
+  }
+
+  > li,
+  > span.pref:not(:empty) {
+    @include choose-item;
+    box-shadow:  $choose-box-shadow;
+    cursor:      pointer;
+    padding:     $item-padding;
+    white-space: normal;
+    border: {
+      width:        $border-size;
+      bottom-width: 0px;
+      top-width:    0px;
+      style:        solid;
+    }
+  }
+  span.desc {
+    display:   block;
+    font-size: 75%;
+  }
+
+  div.lengthField {
+    border: {
+      color: transparent;
+      width: $border-size;
+    }
+    padding: $item-padding;
+    padding-top: 0;
+    padding-bottom: 0;
+    span {
+      display:     block !important;
+      line-height: 0;
+      color:       transparent;
+    }
+  }
+
+  /**
+   * Ruler
+   */
+  > div.ruler {
+    position:         absolute;
+    right:            0px;
+    margin-right:     -14px;
+    background-color: transparent;
+    width:            14px;
+    height:           100%;
+    opacity:          0;
+    cursor:           pointer;
+    transition:       opacity .5s ease 1s;
+
+    > span {
+      @include choose-active;
+      position: absolute;
+      display:  block;
+      right:    0;
+      width:    10px;
+      z-index:  115;
+      border: {
+	      radius: 4px;
+	      width:  2px;
+	      style:  solid;
+      }
+    }
+
+    &.active > span {
+      @include choose-hover;
+    }
+
+    > div {
+      @include choose-item;
+      box-shadow: $choose-box-shadow;
+      position:   absolute;
+      right:      0;
+      width:      10px;
+      height:     100%;
+      border: {
+        radius: 4px;
+	      width:  2px;
+	      style:  solid;
+      }
+    }
+  }
+
+  &:active > div.ruler,
+  &:hover > div.ruler,
+  > div.ruler.active {
+    transition: opacity .1s ease;
+    opacity:    1;
+  }
+
+
+  /**
+   * List items
+   */
+  > li,
+  div.lengthField {
+    padding-right: 1.6em;
+  }
+
+  > li {
+    &:first-of-type {
+      border-top: {
+	      width:        $border-size;
+	      left-radius:  $standard-border-radius;
+	      right-radius: $standard-border-radius;
+      }
+    }
+
+    &:last-of-type {
+      border-bottom: {
+	      width:        $border-size;
+	      left-radius:  $standard-border-radius;
+	      right-radius: $standard-border-radius;
+      }
+    }
+    mark {
+      text-decoration:  underline;
+      background-color: transparent;
+      color:            inherit;
+      font-weight:      bold;
+    }
+  }
+
+  > li.active,
+  > span.pref.active {
+    @include choose-active;
+  }
+
+  > li:hover,
+  > span.pref:hover {
+    @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;
+    }
+  }
+}
+
+
+/**
+ * Rolling menu
+ */
+ul.menu.roll {
+  > li:first-of-type {
+    &:not(.no-more):before {
+      position:    absolute;
+      font-family: "FontAwesome";
+      content:     $fa-up;
+      right:       .5em;
+      top:         .4em;
+    }
+  }
+  > li:last-of-type {
+    &:not(.no-more):before {
+      position:    absolute;
+      font-family: "FontAwesome";
+      content:     $fa-down;
+      right:       .5em;
+      bottom:      .4em;
+    }
+  }
+  &:not(.visible) {
+    height: 0;
+  }
+}
+
+
+/**
+ * Sorting menu
+ */
+ul.menu.sort {
+  position: relative;
+  display:  inline-block;
+  > li::before {
+    content: '';
+  }
+  > li.active:hover {
+    @include choose-remove;
+  }
+}
+
+
+/**
+ * select menu
+ */
+span.menu.select {
+  > span {
+    z-index: 105;
+  }
+  > ul.menu.roll {
+    display: none;
+    z-index: -100;
+    &.visible {
+      display: block;
+      z-index: 110;
+    }
+  }
+}
diff --git a/dev/scss/base/mixins.scss b/dev/scss/base/mixins.scss
new file mode 100644
index 0000000..765ea76
--- /dev/null
+++ b/dev/scss/base/mixins.scss
@@ -0,0 +1,67 @@
+@import "colors";
+
+/**
+ * Mixin for blind elements
+ * (e.g., spans in elements with an icon background)
+ */
+@mixin blind {
+  position:    absolute;
+  margin-left: -3000px;
+}
+
+
+@mixin cell-info {
+  text-overflow: ellipsis;
+  white-space:   nowrap;
+  max-width:     25em;
+  overflow:      hidden;
+  padding:       1px 6px;
+  margin:        0px;
+}
+
+
+/**
+ * Mixin for basic color transition
+ */
+@mixin input-field {
+  outline:   none;
+  font-size: 11pt;
+  border:    $border-size solid $nearly-white;
+  padding:   2px;
+  margin:    0;
+}
+
+
+/**
+ * Mixing for basic text padding
+ */
+@mixin standard-text-padding {
+  padding-left:  .4em;
+  padding-right: .4em;
+}
+
+
+/**
+ * Mixing for icon fonts
+ */
+@mixin icon-font {
+  font-family: 'FontAwesome';
+  white-space: nowrap;
+}
+
+
+/**
+ * Mixing for correct box sizing (probably not necessary)
+ * DEPRECATED
+ */
+@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+ */
+}
+
+
+@mixin matchinfo-head {
+  border-top: $border-size solid $darker-orange; // #ff8000;
+  width:      $left-width / 2;
+}
\ No newline at end of file
diff --git a/dev/scss/base/paths.scss b/dev/scss/base/paths.scss
new file mode 100644
index 0000000..7ff9527
--- /dev/null
+++ b/dev/scss/base/paths.scss
@@ -0,0 +1,5 @@
+/**
+ * Path information - relative to css!
+ */
+$img-path:  '../img';
+$font-path: '../font';
diff --git a/dev/scss/base/view.scss b/dev/scss/base/view.scss
index 96162cf..5aa4b6e 100644
--- a/dev/scss/base/view.scss
+++ b/dev/scss/base/view.scss
@@ -1,4 +1,4 @@
-@import "../util.scss";
+@import "colors";
 
 .result-view {
   background-color: $nearly-white;
diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
index 0581985..8c2675c 100644
--- a/dev/scss/footer/footer.scss
+++ b/dev/scss/footer/footer.scss
@@ -5,23 +5,24 @@
  * Rules for the footer section of Kalamar
  */
 footer {
-  position: absolute;
   background-color: $dark-grey;
-  bottom: 0;
-  padding-bottom: 2px;
-  font-size: 70%;
-  width: 100%;
-  text-align: right;
+  position:         absolute;
+  bottom:           0;
+  padding-bottom:   2px;
+  font-size:        70%;
+  width:            100%;
+  text-align:       right;
+
   a {
     &:link {
       margin: 0 .5em;
-      color: $light-grey;
+      color:  $light-grey;
     }
     &:visited {
-      color: $light-grey;
+      color:  $light-grey;
     }
     &:hover {
-      color: $nearly-white;
+      color:  $nearly-white;
     }
     &[href^="http://"]::after,
     &[href^="https://"]::after {
@@ -31,7 +32,7 @@
   span.separator {
     &:after {
       content: "-";
-      color: $light-grey;
+      color:   $light-grey;
     }
   }
 }
diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
index faf8336..ecc509d 100644
--- a/dev/scss/header/datepicker.scss
+++ b/dev/scss/header/datepicker.scss
@@ -7,112 +7,125 @@
  * in Kalamar.
  */
 
-$border-size: 2px;
-
 div.datepicker {
-  display: inline-block;
-  position: absolute;
-  z-index: 90;
-
-  font-size: 80%;
-  padding: 4pt;
   @include choose-item;
+  position:   absolute;
+  display:    inline-block;
+  z-index:    90;
+  font-size:  80%;
+  padding:    4pt;
   box-shadow: $choose-box-shadow;
 
   border: {
-    width: $border-size;
-    style: solid;
+    width:  $border-size;
+    style:  solid;
     radius: $standard-border-radius;
   }
+
   > div {
     font-size: 120%;
-    width: 45%;
+    width:     45%;
+
     &.month {
       float: right;
     }
 
     > span {
-      display: inline-block;
+      display:     inline-block;
+      overflow:    hidden;
+      white-space: nowrap;
+
       &:first-child,
       &:last-child {
-	width: 15%;
-	&::before {
-	  display: inline-block;
-	  text-align: center;
-	  cursor: pointer;
-	  font-family: 'FontAwesome';
-	  min-width: 14px;
-	}
+	      width: 15%;
+	      &::before {
+          @include icon-font;
+	        display:    inline-block;
+	        text-align: center;
+	        cursor:     pointer;
+	        min-width:  14px;
+	      }
       }
+
       &:first-child::before {
-	content: $fa-previous;
+	      content: $fa-previous;
       }
+
       &:last-child::before {
-	content: $fa-next;
+	      content: $fa-next;
       }
-      overflow: hidden;
-      white-space: nowrap;
+
       &:nth-child(2) {
-	cursor: pointer;
-	display: inline-block;
-	width: 70%;
-	text-align: center;
-	text-overflow: ellipsis;
-	border: {
-	  radius: $standard-border-radius;
-	  style: solid;
-	  width: $border-size;
-	  color: transparent;
-	}
-	&:hover {
-	  @include choose-hover;
-	}
-	&.selected {
-	  @include choose-active;
-	}
+	      display:       inline-block;
+	      cursor:        pointer;
+	      width:         70%;
+	      text-align:    center;
+	      text-overflow: ellipsis;
+
+	      border: {
+	        radius: $standard-border-radius;
+	        style:  solid;
+	        width:  $border-size;
+	        color:  transparent;
+	      }
+
+	      &:hover {
+	        @include choose-hover;
+	      }
+
+	      &.selected {
+	        @include choose-active;
+	      }
       }
     }
   }
   
   table {
     border-collapse: separate;
-    border-spacing: 1px;
+    border-spacing:  1px;
   }
 
   input {
+    @include choose-item;
     @include standard-text-padding;
+    background-color: $nearly-white;
+    width:            100%;
+
     border: {
       style: solid;
       width: 1px;
     }
-    @include choose-item;
-    background-color: $nearly-white;
-    width: 100%;
   }
 
   td {
     @include standard-text-padding;
     text-align: center;
+
     border: {
       style: solid;
       width: 1px;
     }
+
     &:not(.out) {
-      cursor: pointer;
       @include choose-item;
+      cursor: pointer;
       background-color: $nearly-white;
+
       &.today {
-	background-color: $light-blue;
-	color: $dark-blue;
-	text-shadow: none;
+	      background-color: $light-blue;
+	      color: $dark-blue;
+	      text-shadow: none;
       }
+
       &.selected {
-	@include choose-active;
+	      @include choose-active;
       }
+
       &:hover {
-	@include choose-hover;
+	      @include choose-hover;
       }
     }
+
     &.out {
       border-color: transparent;
     }
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 65e2483..763c20e 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -1,167 +1,131 @@
 @charset "utf-8";
 @import "../util";
 @import "hint";          // Hint specific menu list
-@import "menu";          // Menu list
 @import "searchbar";     // The search bar
 @import "vc";            // Virtual corpus builder
 @import "statistics";    // Statistics for VCs
 @import "datepicker";    // Datepicker
+@import "querylanguage"; // Query language
+@import "pipe";          // Pipe
 
 header {
-  position: relative;
-  background-color: $light-green;
-//  @include light-noise;
   @include box-sizing-box();
-  padding: $base-padding 0 0 $base-padding;
-  // 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 { /* , #vc-choose, Formally vc.location */
-    cursor: pointer;
+  position:         relative;
+  background-color: $light-green;
+  padding:          $base-padding 0 0 $base-padding;
+  font-size:        10pt;
+  color:            $nearly-white;
+  
+  span.select {
+    display:     inline-block;
+    cursor:      pointer;
     line-height: 1.8em;
+
     > span {
       font-weight: bold;
     }
+
     border: {
-      width: 0;
+      width:        0;
       bottom-width: 3px;
-      style: solid;
-      color: transparent;
+      style:        solid;
+      color:        transparent;
     }
-    display: inline-block;
+
     &:hover {
-      color: $dark-green;
+      color:        $dark-green;
       border-color: $dark-green;
     }
-    &.active {
-      border-color: $dark-orange;
-    }
+
     &::after {
+      @include icon-font;
       pointer-events: none;
-      font-family: FontAwesome;
-      text-align: center;
-    }
-  }
-  span.select {
-    &::after {
-      content: $fa-down;
+      text-align:     center;
+      content:        $fa-down;
+
       padding: {
-	      left: 4pt;
+	      left:  4pt;
 	      right: 4pt;
       }
     }
-    &.active::after {
-      content: $fa-up;
+
+    &.active {
+      border-color: $dark-orange;
+      &::after {
+        content: $fa-up;
+      }
     }
   }
 
   form {
+    position:     relative;
+    display:      block;
     padding-left: $logo-left-distance;
-    min-height: 2.7em;
-    display: block;
-    margin: 0px;
-    position: relative;
+    min-height:   2.7em;
+    margin:       0px;
   }
-  .clear {
-    clear: both;
+
+  input {
+    @include input-field;
   }
 
   .button {
+    color:        $nearly-white;
+    line-height:  2em;
+    margin-right: $right-distance;
+
     &.right {
-      float: right;
+      float:   right;
       display: inline-block;
     }
+
     &.top {
-      position: absolute;
-      display: block;
-      top: 0;
-      right: 0;
-      margin-right: 0;
-      width: ($standard-margin / 2);
+      position:         absolute;
+      display:          block;
+      top:              0;
+      right:            0;
+      margin-right:     0;
+      width:            ($standard-margin / 2);
       background-color: $dark-green;
-      text-align: center;
-      height: 100%;
-      z-index: 20;
+      text-align:       center;
+      height:           100%;
+      z-index:          20;
+
       > a:hover {
-	color: $nearly-white
+	      color: $nearly-white
       }
     }
-    color: $nearly-white;
-    line-height: 2em;
-    margin-right: $right-distance;
+
     > a {
-      color: $nearly-white;
-      cursor:pointer;
-      position: relative;
+      color:     $nearly-white;
+      cursor:    pointer;
+      position:  relative;
       font-size: 120%;
+
       > span {
-	@include blind;
+	      @include blind;
       }
     }
+
     > a::after {
-      font-family: 'FontAwesome';
+      @include icon-font;
     }
+
+    // Icons for buttons
     > a.tutorial::after {
       content: $fa-tutorial;
     }
+
     > a.question::after {
       content: $fa-question;
     }
+
     > a.login::after {
       content: $fa-login;
     }
+
     > a.logout::after {
       content: $fa-logout;
     }
   }
-}
-
-
-/**
- * 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;
-}
-
-
-// Hide pipe
-input.pipe {
-  display: none;
 }
\ No newline at end of file
diff --git a/dev/scss/header/hint.scss b/dev/scss/header/hint.scss
index b2e9bee..ae763b2 100644
--- a/dev/scss/header/hint.scss
+++ b/dev/scss/header/hint.scss
@@ -4,91 +4,94 @@
 /**
  * Rules for the Kalamar hint helper.
  */
-
-$border-size: 2px;
-
 ul.menu.hint {
-  display: inline-block;
+  display:     inline-block;
   white-space: normal;
-  text-align:left;
-  top: 0;
-  max-width: 23em !important;
+  text-align:  left;
+  max-width:   23em !important;
+  top:         0;
 
   > li:first-of-type {
     border-top: {
-      width: 1px;
-      left-radius: 0;
+      width:        1px;
+      left-radius:  0;
       right-radius: 0;
     }
   }
 }
 
+// Alert bubble
 div.alert.hint {
-  position: absolute;
-//  background-color: rgba(254,26,0,.9); // from alertify
-  background-color: rgb(254,26,0); // from alertify
-  color: $nearly-white;
-  padding: $item-padding;
-  margin-top: 8px;
-  box-shadow: $choose-box-shadow;
+  position:         absolute;
+  background-color: $alert-red;
+  color:            $nearly-white;
+  padding:          $item-padding;
+  margin-top:       8px;
+  box-shadow:       $choose-box-shadow;
+  width:            auto;
+  min-width:        10em;
+  max-width:        23em !important;
+  transition:       opacity 0.2s ease 0s;
+
   border: {
-    radius: $standard-border-radius;
+    radius:          $standard-border-radius;
     top-left-radius: 0;
   }
-  width: auto;
-  min-width: 10em;
-  max-width: 23em !important;
-  transition: opacity 0.2s ease 0s;
-}
 
-div.hint.alert::before {
-  position: absolute;
-  content: "";
-  display: block;
-  top: -12px;
-  left: 0;
-  width: 0;
-  white-space: normal; 
-  border: {
-    width: 0 8px 12px 0;
-    style: solid;
-    color: rgb(254,26,0) transparent; // from alertify
+  &::before {
+    position:    absolute;
+    content:     "";
+    display:     block;
+    top:         -12px;
+    left:        0;
+    width:       0;
+    white-space: normal; 
+    border: {
+      width: 0 8px 12px 0;
+      style: solid;
+      color: $alert-red transparent;
+    }
   }
 }
 
+// Mirror element for the hint helper
 .hint.mirror {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 90;
+  position:    absolute;
+  display:     block;
+  left:        0;
+  top:         0;
+  z-index:     90;
   white-space: pre-wrap;
-  height: 0;
-  display: block;
+  height:      0;
+
   > span {
-    opacity: 0;
+    opacity:     0;
     white-space: pre-wrap;
-    overflow: hidden;
+    overflow:    hidden;
   }
+
   // TODO: Only in focus
   > div {
-    position: absolute;
-    display: block;
-    cursor: pointer;
+    position:   absolute;
+    display:    block;
+    cursor:     pointer;
     transition: left 0.2s ease 0s;
-    top: 0;
-    left: 0;
+    top:        0;
+    left:       0;
     text-align: left;
-    padding: 0;
+    padding:    0;
     border-top: 5px solid $dark-orange;
-    height: 10px;
-    width: 1.2em;
+    height:     10px;
+    width:      1.2em;
+
     &:hover:not(.active) {
       border-top: 10px solid $dark-orange;
     }
+
     &.active {
       border-top-width: 0;
-      height: 0;
-      width: 23em;
+      height:           0;
+      width:            23em;
     }
   }
 }
\ No newline at end of file
diff --git a/dev/scss/header/menu.scss b/dev/scss/header/menu.scss
deleted file mode 100644
index 7d76f4e..0000000
--- a/dev/scss/header/menu.scss
+++ /dev/null
@@ -1,239 +0,0 @@
-@charset "utf-8";
-@import "../util";
-
-$border-size: 2px;
-
-/**
- * Menu list - used nearly everywhere
- */
-ul.menu,
-ul.menu > span.pref:not(:empty) {
-  box-sizing: border-box;
-  text-shadow: none;
-  font-weight: normal;
-  // Pagination border?
-
-  z-index: 120;
-}
-
-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: $item-padding;
-  white-space: normal;
-}
-
-ul.menu span.desc {
-  display: block;
-  font-size: 75%;
-}
-
-ul.menu div.lengthField {
-  border: {
-    color: transparent;
-    width: $border-size;
-  }
-  padding: $item-padding;
-  padding-top: 0;
-  padding-bottom: 0;
-  span {
-    display: block !important;
-    line-height: 0;
-    color: transparent;
-  }
-}
-
-ul.menu > li,
-ul.menu > span.pref:not(.active) {
-  @include choose-item;
-}
-
-ul.menu:active > div.ruler,
-ul.menu:hover > div.ruler,
-ul.menu > div.ruler.active {
-  transition: opacity .1s ease;
-  opacity: 1;
-}
-
-ul.menu {
-  position: absolute;
-  padding: 0;
-  margin: 0;
-  text-indent: 0;
-  list-style-type: none;
-  list-style-position: outside;
-
-  > div.ruler {
-    position: absolute;
-    right: 0px;
-    margin-right: -14px;
-    background-color: transparent;
-    width: 14px;
-    height: 100%;
-    opacity: 0;
-    cursor: pointer;
-    transition: opacity .5s ease 1s;
-
-    > span {
-      position: absolute;
-      @include choose-active;
-      display: block;
-      right: 0;
-      width: 10px;
-      z-index: 115;
-      border: {
-	radius: 4px;
-	width: 2px;
-	style: solid;
-      }
-    }
-    &.active > span {
-      @include choose-hover;
-    }
-    > div {
-      box-shadow: $choose-box-shadow;
-      position: absolute;
-      right: 0;
-      border: {
-	width: 2px;
-	style: solid;
-      }
-      width: 10px;
-      @include choose-item;
-      // background-color: -grey;
-      height: 100%;
-      border-radius: 4px;
-    }
-  }
-
-  /**
-   * List items
-   */
-  > li, div.lengthField {
-    padding-right: 1.6em;
-  }
-  > li {
-
-    &:first-of-type {
-      border-top: {
-	width: $border-size;
-	left-radius: $standard-border-radius;
-	right-radius: $standard-border-radius;
-      }
-    }
-    &:last-of-type {
-      border-bottom: {
-	width: $border-size;
-	left-radius: $standard-border-radius;
-	right-radius: $standard-border-radius;
-      }
-    }
-    mark {
-      text-decoration: underline;
-      background-color: transparent;
-      color: inherit;
-      font-weight: bold;
-    }
-  }
-  > li.active,
-  > span.pref.active {
-    @include choose-active;
-  }
-  > li:hover,
-  > span.pref:hover {
-    @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;
-    }
-  }
-}
-
-ul.menu {
-  opacity: 0;
-}
-ul.menu.visible {
-  opacity: 1;
-}
-
-/**
- * Rolling menu
- */
-ul.menu.roll {
-  > li:first-of-type {
-    &:not(.no-more):before {
-      position: absolute;
-      font-family: "FontAwesome";
-      content: $fa-up;
-      right: .5em;
-      top: .4em;
-    }
-  }
-  > li:last-of-type {
-    &:not(.no-more):before {
-      position: absolute;
-      font-family: "FontAwesome";
-      content: $fa-down;
-      right: .5em;
-      bottom: .4em;
-    }
-  }
-}
-
-ul.menu.roll:not(.visible) {
-  height: 0;
-}
-
-
-/**
- * Sorting menu
- */
-ul.menu.sort {
-  position: relative;
-  display: inline-block;
-  > li::before {
-    content: '';
-  }
-  > li.active:hover {
-    @include choose-remove;
-  }
-}
-
-/**
- * select menu
- */
-span.menu.select {
-  > span {
-    z-index: 105;
-  }
-  > ul.menu.roll {
-    display: none;
-    z-index: -100;
-    &.visible {
-      display: block;
-      z-index: 110;
-    }
-  }
-}
diff --git a/dev/scss/header/pipe.scss b/dev/scss/header/pipe.scss
new file mode 100644
index 0000000..f0c0807
--- /dev/null
+++ b/dev/scss/header/pipe.scss
@@ -0,0 +1,8 @@
+/**
+ * The pipe input field
+ */
+
+// Hide pipe
+input.pipe {
+  display: none;
+}
\ No newline at end of file
diff --git a/dev/scss/header/querylanguage.scss b/dev/scss/header/querylanguage.scss
new file mode 100644
index 0000000..44978bb
--- /dev/null
+++ b/dev/scss/header/querylanguage.scss
@@ -0,0 +1,40 @@
+@import "../util";
+
+/**
+ * Temporary hack for language chooser
+ * http://cssdeck.com/labs/styling-select-box-with-css3
+ * This is only active in no-js environment and before the
+ * javascript is loaded.
+ */
+#ql-field {
+  position:         relative;
+  background-color: $light-green;
+  cursor:           pointer;
+  margin:           0;
+  outline:          none;
+  border:           none;
+  display:          inline-block;
+  color:            white;
+  border-width:     0;
+  border-radius:    0;
+
+  // https://css-tricks.com/almanac/properties/a/appearance/
+  -webkit-appearance: none;
+  -moz-appearance:    none;
+  appearance:         none;
+
+  &:checked {
+    outline: none;
+  }
+
+  > option {
+    padding: 0pt 2pt;
+    outline: none;
+  }
+
+   // funny hack for firefox
+  &:-moz-focusring {
+    color:       transparent;
+    text-shadow: 0 0 0 white;
+  }
+}
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index 7e34b27..45bc4ec 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -1,87 +1,46 @@
 @charset "utf-8";
 @import "../util";
 
-$border-size: 2px;
-$qmargin: 3px;
-// $right-padding: 60px;
-
-
 
 /**
- * Input field
+ * Search field
  */
 #q-field {
-  width: 100%;
-  margin: 0;
-  margin-bottom: $qmargin;
-  display: block;
+  display:       block;
+  margin-bottom: 3px;
+  width:         100%;
+  margin:        0;
 
   &::-webkit-search-cancel-button {
     display: none;
   }
 
   &.loading {
-    background-color: $light-orange;
-    background-image: none;
+    background: {
+      color: $light-orange;
+      image: none;
+    }
   }
 }
 
-header input {
-  @include input-field;
-}
 
 #searchbar {
-  position: relative;
-  width: 100%;
-  padding: 0;
+  position:      relative;
+  width:         100%;
+  padding:       0;
   padding-right: $right-distance + $button-width;
+
   button[type=submit] {
     position: absolute;
-    padding: 0;
-    right: $right-distance;
+    padding:  0;
+    right:    $right-distance;
+
     &:not(.loading)::after {
       content: $fa-search;
     }
   }
 }
 
-/**
- * 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: $fa-check;
-      }
-    }
-  }
-  &:checked + label span { 
-    &:after {
-      content: $fa-checked;
-    }
-  }
-}
-
-
 .query.panel {
   padding-right: $right-distance + $button-width;
 }
@@ -89,11 +48,12 @@
 // Specify result button group layout
 
 .query.button-group.button-panel {
-  width: auto;
-  text-align: right;
+  display:        block;
+  width:          auto;
+  text-align:     right;
   vertical-align: top;
-  display: block;
-  line-height: 1.3em;
+  line-height:    1.3em;
+
   > span {
     box-shadow: none;
   }
diff --git a/dev/scss/header/statistics.scss b/dev/scss/header/statistics.scss
index 234e81b..500fc70 100644
--- a/dev/scss/header/statistics.scss
+++ b/dev/scss/header/statistics.scss
@@ -2,37 +2,45 @@
 @import "../util";
 
 
-/* 
-Corpus statistic  
-Graying corpus statistic 
-*/
+/**
+ * Corpus statistic  
+ * Graying corpus statistic 
+ */
 div.stattable {
-    display: flex;
-    flex-direction: row;
-    margin-right: $right-view-distance;
+  display: flex;
+  flex-direction: row;
+  margin-right: $right-view-distance;
 }
+
 div.stattable {
   > dl {
     margin-bottom:4px;
+
     > div {
       border-color: $dark-green;
+
       > dt {
         background-color: $middle-green;
-        width: 15em;
-        margin: 0;
-        &:after {
+        width:            15em;
+        margin:           0;
+
+        &::after {
           content: ":";
         }
       }   
       > dd {
         background-color: $lightest-green;
-        color: $dark-grey;
+        color:            $dark-grey;
       }
     }
   }
+
   &.stdisabled {
-    dt, dd {
-      @include vcinfo-inactive;
+    dt,
+    dd {
+      background-color: $grey-green;
+      color:            $dark-green;
+      text-shadow:      none;
     }
   }
 }
@@ -45,7 +53,7 @@
 
 span.refresh::after{
   vertical-align: sub;
-  content : $fa-redo;
+  content :       $fa-redo;
 }
 
 // Default value 20% doesn't work with < 5 items,
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 2a4a3b8..cdc700b 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -1,14 +1,14 @@
 @charset "utf-8";
 @import "../util";
 
-$left-padding: 4em; // 32pt; // 2.8em;
-$border-size: 2px;
-$bracket-size: .4em; // 4pt;
-
 /**
  * Virtual Collection Builder
  */
 
+$left-padding: 4em;
+$bracket-size: .4em;
+
+// Rules for VC view (including fragments)
 .vc {
   margin-top: 4pt;
 
@@ -17,35 +17,39 @@
   }
 
   .docGroup {
-    position: relative;
+    position:    relative;
+    display:     inline-block;
+    margin-left: $left-padding;
+    padding:     4pt 2pt 4pt 0pt;
 
-    display: inline-block;
-    margin-left: $left-padding; // 28pt
+    .docGroup {
+      display: block;
+    }
 
-    .docGroup { display: block; }
-
-    padding: 4pt 2pt 4pt 0pt;
     border: {
       radius: $standard-border-radius * 2;
-      style: solid;
-      width: 0 $bracket-size; // .6em .5em
+      style:  solid;
+      width:  0 $bracket-size;
     }
 
     &[data-operation] {
+
       > .doc:first-child::before,
       > .docGroup:first-child::before {
         content: none;
       }
+
       > .doc::before,
       > .docGroup::before {
-        display: inline-block;
-        position: absolute;
-        text-align: right;
-        width: $left-padding;
-        margin-left: -1 * ($left-padding + .5em); // -28pt
+        position:    absolute;
+        display:     inline-block;
+        text-align:  right;
+        width:       $left-padding;
+        margin-left: -1 * ($left-padding + .5em);
         line-height: 1.5em;
-        border-top: $border-size solid transparent;
+        border-top:  $border-size solid transparent;
       }
+
       > .docGroup::before {
         margin-left: -1 * ($left-padding + .5em) + (-1 * $bracket-size);
       }
@@ -74,19 +78,20 @@
      * All operators on groups
      */
     > .operators {
-      position: absolute;
-      display: block;
-      top: 10px;
+      position:       absolute;
+      display:        block;
       vertical-align: middle;
-      left: 3px;
+      top:            10px;
+      left:           3px;
+      margin-left:    100%;
+      padding:        0;
+
       > span:first-child {
         border: {
-        top-left-radius: 0;
-        bottom-left-radius: 0;
+          top-left-radius:    0;
+          bottom-left-radius: 0;
+        }
       }
-      }
-      margin-left: 100%;
-      padding: 0;
     }
   }
 
@@ -97,78 +102,78 @@
   .doc {
     line-height: 170%;
     padding-left: $left-padding;
-    > span + span,
-    > span + div + span,
-    > span + ul + span {
-      margin-left: 5pt;
-    }
 
-    > span.key,
-    > span.value {
-      font-weight: bold;
-    }
-    > span.value {
-      &[data-type=regex] {
+    > span {
+
+      + span,
+      + div + span,
+      + ul + span {
+        margin-left: 5pt;
+      }
+
+      &.key,
+      &.value {
+        font-weight: bold;
+      }
+
+      &.value[data-type=regex] {
         font-style: italic;
+
         &::after,
         &::before {
           content: '/';
         }
       }
+
+      &.key {
+        position: relative;
+
+        > ul {
+          margin:      0;
+          margin-left: 3.3em;
+        }
+
+        &.fixed {
+          color: $light-green;
+        }
+      }
     }
 
     // Unspecified value
-    &.unspecified > span, span.unspecified {
-      padding: 0 4px;
+    &.unspecified > span,
+    span.unspecified {
+      @include choose-item;
+      padding:    0 4px;
       box-shadow: $choose-box-shadow;
+
       border: {
-        style: solid;
-        width: $border-size;
+        style:  solid;
+        width:  $border-size;
         radius: $standard-border-radius;
       }
-      @include choose-item;
-      &:hover {
-	      @include choose-hover;
-      }
     }
 
-    > span.key.fixed {
-      color: $light-green;
-    }
-
-    /**
-     * All operators on docs
-     */
+    // All operators on docs
     > .operators {
-      display: inline-block;
+      display:     inline-block;
       margin-left: 10px;
     }
-    > span.key {
-      position: relative;
-      > ul {
-        margin: 0;
-        margin-left: 3.3em;
-      }
-    }
   }
 
-  .rewritten {
-    .rewrite {
-      margin-left: 4pt;
-      display: inline-block;
-      color: $dark-orange;
-      &::after {
-        font: {
-          family: FontAwesome;
-          style: normal;
-          weight: normal;
-        }
-        content: $fa-rewrite;
-        text-decoration: underline;
-      }
-      > span {
-        display: none;
-      }
+  .rewritten .rewrite {
+    display:     inline-block;
+    margin-left: 4pt;
+    color:       $dark-orange;
+    &::after {
+      @include icon-font;
+      font-style:      normal;
+      font-weight:     normal;
+      content:         $fa-rewrite;
+      text-decoration: underline;
+    }
+
+    > span {
+      display: none;
     }
   }
 
@@ -176,12 +181,12 @@
    * All operators
    */
   .operators {
-    opacity: 0;
+    opacity:     0;
     white-space: nowrap;
-    padding: 0;
-    font-size: 0;
+    padding:     0;
+    font-size:   0;
     line-height: 0;
-    text-align: center;
+    text-align:  center;
   }
 
   > .docGroup {
@@ -192,48 +197,50 @@
     display: inline-block;
   }
 
-  .menu li[data-type=ref]:before,
-  span.key.ref:before {
-    content: $fa-referto;
-    font-family: 'FontAwesome';
+  // referTo entries
+  .menu li[data-type=ref]::before,
+  span.key.ref::before {
+    @include icon-font;
+    content:       $fa-referto;
     padding-right: 4pt;
-    style: normal;
-    weight: normal;
+    style:         normal;
+    weight:        normal;
   }  
 
   div.value {
-    position: absolute;
-    display: inline-block;
-    z-index: 8000;
-    padding: 4pt;
+    position:   absolute;
+    display:    inline-block;
+    z-index:    8000;
+    padding:    4pt;
     margin-top: -6pt;
+
     border: {
-      width: $border-size;
-      style: solid;
       radius: $standard-border-radius;
+      width:  $border-size;
+      style:  solid;
     }
+
     input {
       border-width: 0;
     }
+
     > div {
+      @include choose-item;
+      display: inline-block;
       padding: 2pt;
-      cursor: pointer;
+
       font: {
-        size: 80%;
+        size:  80%;
         style: italic;
       }
-      display: inline-block;
-      @include choose-item;
+
       border: {
-        width: $border-size;
-        style: solid;
+        width:  $border-size;
+        style:  solid;
         radius: $standard-border-radius;
       }
-
-      &:hover {
-        @include choose-hover;
-      }
     }
+
     &.regex {
       > input {
         font-style: italic;
@@ -246,12 +253,14 @@
   }
 }
 
+/* Rules for vcs excluding fragments,
+ * i.e. includingy dynamic changes.
+ */
 .vc:not(.fragment) {
-  .docGroup, .doc {
-    // color: $nearly-white;
-    // color: $dark-green;
+
+  .docGroup,
+  .doc {
     color: $dark-grey;
-    // text-shadow: $light-shadow;
   }
   
   /**
@@ -259,26 +268,24 @@
    */
   // Whiten on hover 
   .docGroup:hover {
-    // background-color: rgba(255,255,255,.06);
     background-color: rgba(255,255,255,.3);
   }
 
-  .doc > span.key.fixed {
-    color: $light-green;
-  }  
-
   .doc > span:not(.fixed) {
     cursor: pointer;
     &:hover {
-      // color: $dark-green;
       color: $dark-orange;
     }
   }
 
-  .rewritten .rewrite {
-    color: $dark-orange;
+    // Unspecified value
+  .doc.unspecified > span,
+  span.unspecified {
+    &:hover {
+	    @include choose-hover;
+    }
   }
-
+  
   .doc, .docGroup {
     &:hover > .operators {
       opacity: 1;
@@ -289,7 +296,6 @@
     &[data-operation] {
       > .doc::before,
       > .docGroup::before {
-        // color: $dark-green;
         color: $dark-orange;
       }
     }
@@ -301,6 +307,13 @@
   div.value {
     @include choose-item;
     box-shadow: $choose-box-shadow;
+
+    > div {
+      cursor:  pointer;
+      &:hover {
+        @include choose-hover;
+      }
+    }
   }
 }
 
@@ -359,47 +372,40 @@
   border-radius: $standard-border-radius;
 }
 
-/*
-header #vc-view > div {
-  margin: 1.3em 0 .5em 0;
-}
-*/
-
-#vc-choose > span.rewritten {
-  &::after {
-    color: $dark-orange;
-    padding: 0;
-    padding-left: 4px;
-    font: {
-      family: FontAwesome;
-      style: normal;
-      weight: normal;
-    }
-    content: $fa-rewrite;
-    text-decoration: underline;
-  }
+#vc-choose > span.rewritten::after {
+  @include icon-font;
+  color:           $dark-orange;
+  padding:         0;
+  padding-left:    4px;
+  content:         $fa-rewrite;
+  text-decoration: underline;
+  font-style:      normal;
+  font-weight:     normal;
 }
 
 div#vc-view {
   position:relative;
+
   > div.vc {
-    display: none;
+    display:          none;
+    margin:           1.3em 0 .5em 0;
+    border:           2px solid $dark-green;
+    background-color: $nearly-white;
+
     &.active {
       display: block;
     }
-    margin: 1.3em 0 .5em 0;
-    border: 2px solid $dark-green;
-    background-color: $nearly-white;
+
     > div:first-child {
-      // margin: 1.3em;
       padding: 1.3em;
     }
   }
 }
 
 div.panel.vcinfo {
-  padding: 3pt 0pt 3pt 3pt;
+  padding:          3pt 0pt 3pt 3pt;
   background-color: $dark-green;
+
   div.button-group > span {
     box-shadow: none;
   }
diff --git a/dev/scss/kalamar.scss b/dev/scss/kalamar.scss
index 084b443..b38fe31 100644
--- a/dev/scss/kalamar.scss
+++ b/dev/scss/kalamar.scss
@@ -5,7 +5,7 @@
  */
 
 // Global variables and mixins
-@import "base";            // Base styles
+@import "base/base";            // Base styles
 @import "main/main";       // Main frame styles
 @import "header/header";   // Top frame styles
 @import "footer/footer";   // Bottom frame styles
diff --git a/dev/scss/main/alertify.scss b/dev/scss/main/alertify.scss
index 55f6c59..be2f656 100644
--- a/dev/scss/main/alertify.scss
+++ b/dev/scss/main/alertify.scss
@@ -2,11 +2,9 @@
 @import "alertify/alertify-core";
 @import "alertify/alertify-default";
 
-/*
-article.alertify-log {
-  text-shadow:none;
-}
-*/
+/**
+ * Alertify styles.
+ */
 
 article.alertify-log-warn {
   background-color: $dark-orange;
@@ -19,4 +17,8 @@
   display: block;
   color: $dark-red;
   font-size: 70%;
+}
+
+.alertify-log-error {
+  background-color: $alert-red;
 }
\ No newline at end of file
diff --git a/dev/scss/main/alertify/alertify-default.scss b/dev/scss/main/alertify/alertify-default.scss
index 97a1232..82637d4 100644
--- a/dev/scss/main/alertify/alertify-default.scss
+++ b/dev/scss/main/alertify/alertify-default.scss
@@ -72,11 +72,13 @@
   color: #FFF;
   // text-shadow: -1px -1px 0 rgba(0,0,0,.5);
 }
+/*
 .alertify-log-error {
   background: #FE1A00;
   //  background: rgba(254,26,0,.9);
     background: rgb(254,26,0);
 }
+*/
 .alertify-log-success {
   background: #5CB811;
 //  background: rgba(92,184,17,.9);
diff --git a/dev/scss/main/buttongroup.scss b/dev/scss/main/buttongroup.scss
index 55bd6b9..49df159 100644
--- a/dev/scss/main/buttongroup.scss
+++ b/dev/scss/main/buttongroup.scss
@@ -8,58 +8,61 @@
   > span {
     cursor: pointer;
   }
-
-  span.button-icon {
-    font-family: 'FontAwesome';
-    > span {
-      @include blind;
-    }
-  }
   
-  &.button-panel, &.operators {
-    > span, a {
-      box-shadow: $choose-box-shadow;
-      font-size: 9pt;
-      font-weight: normal;
-      line-height: 1.5em;
-      padding: 0 4px;
-      display: inline-block;
+  &.button-panel,
+  &.operators {
+    > span,
+    a {
       @include choose-item;
+      box-shadow:   $choose-box-shadow;
+      font-size:    9pt;
+      font-weight:  normal;
+      line-height:  1.5em;
+      padding:      0 4px;
+      display:      inline-block;
       border-style: solid;
       border-width: $border-size 0;
+
       &:hover {
 	      @include choose-hover;
       }
+
       &:first-child {
 	      border: {
-	      left-width: $border-size;
-	      top-left-radius: $standard-border-radius;
-	      bottom-left-radius: $standard-border-radius;
-	    }
+	        left-width:          $border-size;
+	        top-left-radius:     $standard-border-radius;
+	        bottom-left-radius:  $standard-border-radius;
+	      }
       }
+
       &:last-child {
 	      border: {
-	      right-width: $border-size;
-	      top-right-radius: $standard-border-radius;
-	      bottom-right-radius: $standard-border-radius;
-      }
+	        right-width:         $border-size;
+	        top-right-radius:    $standard-border-radius;
+	        bottom-right-radius: $standard-border-radius;
+        }
       }
     }
   }
 
   &.button-panel {
-    > span, a {
+    > span,
+    a {
+
       > span.check {
-        font-family: 'FontAwesome';
-        width: 1.2em;
-        display: inline-block;
+        @include icon-font;
+        width:      1.2em;
+        display:    inline-block;
         text-align: left;
+
         &:not(.checked)::after {
           content: $fa-check;
         }
+
         &.checked::after {
           content: $fa-checked;
         }
+
         > span {
           @include blind;
         }
@@ -68,23 +71,27 @@
   }
 
   &.button-view {
-    display: block;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 20;
-    margin: 0;
-    padding: 0;
-    width: $right-view-distance;
+    position:  absolute;
+    display:   block;
+    right:     0;
+    top:       0;
+    z-index:   20;
+    margin:    0;
+    padding:   0;
+    width:     $right-view-distance;
+    font-size: 10pt;
+    color:     $nearly-white;
+
     > span:first-child {
       margin-top: $border-size
     }
+
     > span {
-      display: block !important;
-      border-width: 0;
-      text-decoration:none;
-      text-align: center;
-      font-style: normal;
+      display:         block !important;
+      border-width:    0;
+      text-decoration: none;
+      text-align:      center;
+      font-style:      normal;
       
       &.download::after {
 	      content: $fa-download;
@@ -105,22 +112,24 @@
   }
 }
 
-.button-group.button-view {
-  font-size: 10pt;
-  color: $nearly-white;
-}
-
 
 ul.menu.button-group-list {
   border-top-right-radius: 8px;
-  font-size: 10pt;
-  position: fixed;
-  left: 0;
+  position:   fixed;
+  font-size:  10pt;
+  left:       0;
   text-align: left;
-  margin: -1 * $border-size;
+  margin:     -1 * $border-size;
   margin-top: 0;
+
   > li:first-of-type {
 	  border-top-right-radius: 5px;
   }
 }
 
+.button-icon {
+  @include icon-font;
+  > span {
+    @include blind;
+  }
+}
diff --git a/dev/scss/main/helper.scss b/dev/scss/main/helper.scss
index ec33901..31b07fa 100644
--- a/dev/scss/main/helper.scss
+++ b/dev/scss/main/helper.scss
@@ -1,5 +1,8 @@
+@import "../util"
+
 // Make cursor helper
-body.helper, body.helper a {
+body.helper,
+body.helper a {
   cursor: help !important;
 }
 
diff --git a/dev/scss/main/intro.scss b/dev/scss/main/intro.scss
index 7c71e1b..8f83175 100644
--- a/dev/scss/main/intro.scss
+++ b/dev/scss/main/intro.scss
@@ -1,4 +1,10 @@
+@import "../util";
+
+/**
+ * Styles for the intro page
+ */
 div.intro {
+
   // Visited links
   a:visited {
     color: $darkest-orange
@@ -6,11 +12,11 @@
 
   div.announcement {
     background-color: $light-orange;
-    padding: $base-padding;
-    border: 5px dashed $dark-orange;
-    border-radius: 1em;
-    width: 90%;
-    margin: auto;
+    padding:          $base-padding;
+    border:           5px dashed $dark-orange;
+    border-radius:    1em;
+    width:            90%;
+    margin:           auto;
   }
 }
 
diff --git a/dev/scss/main/introjs-ids.scss b/dev/scss/main/introjs-ids.scss
index 01c751e..d97013a 100644
--- a/dev/scss/main/introjs-ids.scss
+++ b/dev/scss/main/introjs-ids.scss
@@ -1,28 +1,32 @@
 @import "../util";
 
+/**
+ * Styles overriding introJS styles
+ */
+
 .introjs-helperLayer {
-    background-color:transparent;
-    }
+  background-color: transparent;
+}
  
-.introjs-tooltip.gTstartSearch{
-    max-width: 500px;
-    }
+.introjs-tooltip.gTstartSearch {
+  max-width: 500px;
+}
 
 
 .tgreeting {
-    font-weight: bold;
-    color: $darkest-orange;
-    }
+  font-weight: bold;
+  color:       $darkest-orange;
+}
 
-.pfirstStep{
-    width: 500px;
-    }
+.pfirstStep {
+  width: 500px;
+}
 
 .introjs-donebutton {
-    float: right;
-    margin-left: 5px;
-    }
+  float:       right;
+  margin-left: 5px;
+}
  
-.introjs-skipbutton{
-    color: $black;
-    }
+.introjs-skipbutton {
+  color: $black;
+}
diff --git a/dev/scss/main/koralquery.scss b/dev/scss/main/koralquery.scss
index d6d4818..53dd64d 100644
--- a/dev/scss/main/koralquery.scss
+++ b/dev/scss/main/koralquery.scss
@@ -1,7 +1,9 @@
 @charset "utf-8";
 @import "../util";
 
-$border-size: 2px;
+/**
+ * Styles for the KoralQuery view.
+ */
 
 #koralquery {
   white-space: pre;
@@ -9,13 +11,14 @@
     // TODO:
     //   Mark this with result-view
     background-color: $nearly-white;
-    overflow-x: auto;
-    font-size: 85%;
+    overflow-x:       auto;
+    font-size:        85%;
+
     margin: {
-      top: 2pt;
-      right: $right-view-distance; // 3em;
+      top:    2pt;
+      right:  $right-view-distance;
       bottom: 2pt;
-      left: 2pt;
+      left:  2pt;
     }
   }
 }
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index 4a3ecce..f207045 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -1,389 +1,373 @@
 @charset "utf-8";
 @import "../util";
 
-$border-size: 2px;
+/**
+ * Styles for the KWIC view.
+ */
+
 $font-size: 10pt;
 
 #search {
-  position: relative;
+  position:      relative;
   margin-bottom: 30px;
-  overflow: visible;
-//  margin-top: 14pt;
-}
+  overflow:      visible;
 
-#search > ol {
-  overflow-x: hidden;
-  overflow-y: visible;
-  width: auto;
-  text-indent: 0;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  border: $result-border-size solid $kwic-border;
-  font-size: $font-size;
+  div.matchinfo {
+    display: none;
+  }
 
-  > li {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: stretch;
-    align-content: stretch;
+  > ol {
+    overflow-x:      hidden;
+    overflow-y:      visible;
+    width:           auto;
+    text-indent:     0;
+    list-style-type: none;
+    margin:          0;
+    padding:         0;
+    border:          $result-border-size solid $kwic-border;
+    font-size:       $font-size;
 
-    div.meta {
-      position: relative;
-      flex: 1 0;
-      min-width: 12em;
-      max-width: 15em;
+    > li {
+      display:        flex;
+      flex-direction: row;
+      flex-wrap:      nowrap;
+      align-items:    stretch;
+      align-content:  stretch;
+      
+      border: {
+        style: solid;
+        color: $dark-orange;
+        width: 0;
+      }
 
-      // Tiny hack
-      &:before {
-        content:" ";
-        display:inline-block;
-        height:100%;
-        vertical-align:middle;
+      // Actions
+      .button-group.button-view {
+        display: none;
+      }
+
+      // Zebra style
+      &:nth-of-type(even) div.match-main div.match-wrap {
+        background-color: $kwic-line-even;
+      }
+
+      // References
+      p.ref {
+        display: none;
       }
       
-      text-align: left;
-      // cursor: initial;
-      width: 2px;
-      z-index: 5;
-      overflow-y: hidden;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      background-color: lighten($middle-grey, 5%);
-      // @include light-noise;
-      border: {
-        color: $dark-grey;
-        style: solid;
-        width: 2px 1px 0 0;
+      div.meta,
+      div.match-main {
+        position: relative;
+	      cursor:   pointer;
       }
-      &:empty {
-        border-width: 0 1px 0 0;
+
+      div.match-main {
+        display:  block;
+        flex:     7 0;
+        z-index:  4;
+        overflow: hidden;
+
+        > div.match-wrap {
+          width:            99999%;
+	        margin-left:      -49999.5%;
+	        background-color: $kwic-line-noneven;
+	        overflow-x:       hidden;
+	        overflow-y:       visible;
+	        white-space:      normal;
+        }
       }
-      &.flip {
-        background-color: lighten($middle-grey, 17%);
+
+      div.meta {
+        flex:             1 0;
+        min-width:        12em;
+        max-width:        15em;
+        text-align:       left;
+        width:            2px;
+        z-index:          5;
+        overflow-y:       hidden;
+        overflow-x:       hidden;
+        text-overflow:    ellipsis;
+        white-space:      nowrap;
+        background-color: lighten($middle-grey, 5%);
+        color:            $nearly-white;
+        font-size:        75%;
+        padding:          0 5pt;
+
+        border: {
+          color: $dark-grey;
+          style: solid;
+          width: 2px 1px 0 0;
+        }
+
+        // Tiny hack
+        &:before {
+          content:        " ";
+          display:        inline-block;
+          height:         100%;
+          vertical-align: middle;
+        }
+        
+        &:empty {
+          border-width: 0 1px 0 0;
+        }
+
+        &.flip {
+          background-color: lighten($middle-grey, 17%);
+        }
       }
-      color: $nearly-white;
-      font-size: 75%;
-      padding: 0 5pt;
-    }
-    &:first-of-type div.meta {
-      border-top-width: 0;
-    }
-    &:last-of-type div.meta {
-      border-bottom-width: 0;
+
+      &:first-of-type div.meta {
+        border-top-width: 0;
+      }
+
+      &:last-of-type div.meta {
+        border-bottom-width: 0;
+      }
     }
   }
 }
 
-#search > ol > li {
-  border: {
-    style: solid;
-    color: $dark-orange;
-    width: 0;
-  }
-}
 
-#search {
-  div.meta, div.match-main {
-    position: relative;
-	  cursor: pointer;
-  }
-  /*
-	    &:not(.active):not(:target) {
-        &:nth-of-type(even) div.main-col {
+/**
+ * Snippet rules
  */
-  div.match-main {
-    display: block;
-    flex: 7 0;
-    z-index: 4;
-    overflow: hidden;
-
-    > div.match-wrap {
-      width: 99999%;
-	    margin-left: -49999.5%;
-	    background-color: $kwic-line-noneven;
-	    overflow-x: hidden;
-	    overflow-y: visible;
-	    white-space: normal;
-    }
-  }
-}
-
-#search ol li:nth-of-type(even) div.match-main div.match-wrap {
-  background-color: $kwic-line-even;
-}
-
-
 div.snippet {
 	text-overflow: ellipsis;
-	text-indent: 0;
-	text-shadow: $light-shadow;
-  font-size: 0;
-  white-space: nowrap !important;
+	text-indent:   0;
+	text-shadow:   $light-shadow;
+  font-size:     0;
+  white-space:   nowrap !important;
 
   > span, mark {
-	  padding: 5pt 0 6pt 0;
+	  padding:   5pt 0 6pt 0;
     font-size: $font-size;
-    // white-space: nowrap;
-    // > span {
-      // white-space: nowrap;
-    // }
   }
-  > mark, > span.match {
+
+  > mark,
+  > span.match {
     font-weight: bold;
     color: $black;
     text-shadow: none;
     padding-left: 4pt;
     padding-right: 2pt;
   }
+
   > span.match > span.cutted::after {
+    @include icon-font;
     content: $fa-cut;
-    font-family: FontAwesome;
+    color:   $light-green;
+
     padding: {
-      left: 4pt;
+      left:  4pt;
       right: 4pt;
     }
-    color: $light-green;
-  }
-}
-
-
-
-#search div.matchinfo {
-  display: none;
-}
-
-#search {
-  li.active div.matchinfo {
-    display: block;
   }
 
-  li.active + li.active {
-    border-top: $border-size solid $light-grey;
-    padding-top: 3 * $border-size;
-    // > ul.action.right {
-    .button-group.button-view {
-      padding-top: 3 * $border-size;
-    }
+  &.startMore:before,
+  &.endMore:after {
+    content:       "…";
+    padding-left:  2pt;
+    padding-right: 2pt;
   }
-}
 
-
-
-/*
-#search div.match-main {
-  position: relative;
-  z-index: 4;
-  > div.match-wrap {
-    margin-left: -49999.5%;
-    width: 99999%;
-    overflow-x: hidden;
-    overflow-y: visible;
-    position: relative;
-    box-sizing: border-box;
+  // Flags
+  div.flag {
+    position:           absolute;
+    height:             100%;
+    top:                0;
+    left:               0;
+    width:              11px;
+    background-color:   $dark-orange;
+    border-right:       1px solid $darkest-orange;
   }
 }
-*/
-
-div.snippet.startMore:before,
-div.snippet.endMore:after {
-  content: "…";
-  padding-left: 2pt;
-  padding-right: 2pt;
-}
-
-/**
- * flag
- */
-div.snippet div.flag {
-  position: absolute;
-  height: 100%;
-  top: 0;
-  left: 0;
-  width: 11px;
-  background-color: $dark-orange;
-  border-right-color: $nearly-white;
-  border-right: 1px solid $darkest-orange;
-}
-
-/**
- * References
- */
-
-#search > ol > li p.ref {
-  display: none;
-}
 
 
 /**
- * Active
+ * Active rules
  */
 body.no-js #search > ol > li:active,
 #search > ol > li.active,
 #search > ol > li:target {
+  position:         relative;
+  display:          block;
   background-color: $dark-orange;
-  display: block;
-  text-align: left;
-  position: relative;
-  border-width: 2px;
-  white-space: wrap;
-  height: auto;
-  width: auto;
+  text-align:       left;
+  border-width:     2px;
+  white-space:      wrap;
+  height:           auto;
+  width:            auto;
+  overflow:         hidden;
 
-  div.match-main > div.match-wrap {
-    cursor: default;
+  div.matchinfo {
+    display: block;
   }
-  .snippet {
-    white-space: normal !important;
+
+  + li.active {
+    border-top:  $border-size solid $light-grey;
+    padding-top: 3 * $border-size;
+
+    .button-group.button-view {
+      padding-top: 3 * $border-size;
+    }
   }
   
-  .snippet span {
-    display: inline !important;
+  .snippet {
+    white-space:      normal !important;
+	  padding:          2pt 0 5pt 5pt;
+    background-color: $light-orange;
+
+    span {
+      display: inline !important;
+    }
+
+	  > * {
+	    background-color: transparent;
+	  }
+
+    div.flag {
+      display: none;
+    }
+
+	  margin: {
+	    top:    0;
+	    right:  $right-view-distance;
+	    bottom: 0;
+	    left:   0;
+	  }
+
+	  > span {
+      line-height: 1.4em;
+      width:       auto;
+
+      &.context-left {
+        margin-left: 0;
+        display:     inline;
+        overflow:    visible;
+        text-align:  left;
+        width:       auto;
+      }
+	  }
   }
+  
   .button-group.button-view {
     display: block;
   }
-  div.match-wrap {
-    min-height: 20pt;
-    div.snippet {
-      
-	    background-color: $light-orange;
-	    > * {
-	      background-color: transparent;
-	    }
-      div.flag {
-        display: none;
-      }
-	    padding: 2pt 0 5pt 5pt;
-	    margin: {
-	      top: 0;
-	      right: $right-view-distance;
-	      bottom: 0;
-	      left: 0; // 5pt margin-top
-	    }
-	    > span {
-        line-height: 1.4em;
-        width: auto;
-        &.context-left {
-          margin-left: 0;
-          display: inline;
-          overflow: visible;
-          text-align: left;
-          width: auto;
-        }
-	    }
+
+  div.match-main {
+    display: block;
+    width:   100%;  
+
+    div.match-wrap {
+      cursor:           default;
+      min-height:       20pt;
+      background-color: $dark-orange;
+      width:            100%;
+      margin-left:      0;
+      overflow-x:       visible;
+      white-space:      wrap;
     }
   }
 
-  overflow: hidden;
-
   div.meta {
     display: none;
-    // visibility: hidden;
   }
-  div.match-main {
-    display: block;
-    width: 100%;
-  
-    div.match-wrap {
-      background-color: $dark-orange;
-      width: 100%;
-      margin-left: 0;
-      overflow-x: visible;
-      white-space: wrap;
-    }
-  }
+
   p.ref {
-    display: block;
-	  color: $nearly-white;
-	  padding: 3pt 10pt 3pt 3pt;
+    display:       block;
+	  color:         $nearly-white;
+	  padding:       3pt 10pt 3pt 3pt;
 	  padding-right: $right-view-distance;
-	  margin: 0pt;
-	  width: 100%;
-	  bottom: 0;
-	  z-index: 30;
+	  margin:        0pt;
+	  width:         100%;
+	  bottom:        0;
+	  z-index:       30;
+
 	  > span.sigle {
-	    font-size: 75%;
+	    font-size:      75%;
 	    vertical-align: top;
-	    color: $light-orange;
-	    float: right;
+	    color:          $light-orange;
+	    float:          right;
 	  }
   }
 }
-    
-#search ol span.context-left {
-  display: inline-block;
-  width: 50.01%;
-  text-align: right;
-}
 
 
 /**
- * Right aligned
+ * Alignment rules
  */
-
-#search ol.align-right {
-  text-align: right;
-
-  div.match-main span.context-right {
-    display: inline-block;
-    width: 49.915%;
-    text-align: left;
-  }
-}
-
-/**
- * Center aligned
- */
-#search ol.align-center {
-  div.match-main {
-    width: 100% !important;
-
-    > .match-wrap {
-      margin-left: 0;
-      position: relative;
-    }
+#search ol {
+  span.context-left {
+    display:    inline-block;
+    width:      50.01%;
+    text-align: right;
   }
 
-  li:not(.active) div.snippet {
-    white-space: normal;
-    text-align: center;
-    width: 100000pt;
-    margin-left: -50000pt;
+  // Right aligned
+  &.align-right {
+    text-align: right;
 
-    span.context-left {
-      display: inline-block;
-      text-align: right;
-      width: 40000pt;
-      margin-left: 70vw;
-    }
-
-    span.context-right {
-      display: inline-block;
+    div.match-main span.context-right {
+      display:    inline-block;
+      width:      49.915%;
       text-align: left;
-      width: 40000pt;
+    }
+  }
+
+  // Center aligned
+  &.align-center {
+    div.match-main {
+      width: 100% !important;
+
+      > .match-wrap {
+        position:    relative;
+        margin-left: 0;
+      }
+    }
+
+    li:not(.active) div.snippet {
+      white-space: normal;
+      text-align:  center;
+      width:       100000pt;
+      margin-left: -50000pt;
+
+      span.context-left {
+        display:     inline-block;
+        text-align:  right;
+        width:       40000pt;
+        margin-left: 70vw;
+      }
+
+      span.context-right {
+        display:     inline-block;
+        text-align:  left;
+        width:       40000pt;
+      }
     }
   }
 }
 
 
-// fix empty contexts
-#search ol span.context-left,
-#search ol span.context-right {
-  &:empty::after {
-    content: " ";
-    display: inline-block;
+/**
+ * Fix empty contexts
+ */
+#search ol span {
+  &.context-left,
+  &.context-right {
+    &:empty::after {
+      content: " ";
+      display: inline-block;
+    }
   }
 }
 
+
 /**
- * Highlights
+ * Highlight rules
  */
 mark {
   background-color: inherit;
-  color: inherit;
+  color:            inherit;
 }
 
 mark > mark,
@@ -391,8 +375,8 @@
 .level-0 {
   border-bottom-width: 2px;
   border-bottom-style: solid;
-  padding-bottom: 0px !important;
-  font-style: normal;
+  padding-bottom:      0px !important;
+  font-style:          normal;
 }
 
 mark > mark > mark,
@@ -423,11 +407,3 @@
 .class-2 { border-color: $kwic-highlight-2; }
 .class-3 { border-color: $kwic-highlight-3; }
 .class-4 { border-color: $kwic-highlight-4; }
-
-
-/**
- * Actions
- */
-#search > ol > li .button-group.button-view {
-  display: none;
-}
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index 705ea43..3b87e96 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -1,59 +1,66 @@
 @charset "utf-8";
 @import "../util";
 
+/**
+ * Rules for logos.
+ */
 .logo {
   &::after {
     content: "" !important;
   }
+
   > * {
     background: {
-      repeat: no-repeat;
-      size: 90%;
+      repeat:   no-repeat;
+      size:     90%;
       position: 50% 50%;
     }
+
     > span {
-      margin-left: -30000px;
+      @include blind;
     }
   }
 }
 
+
 /**
  * Background image for the front page
  */
 #kalamar-bg {
   position: fixed;
-  height: 110%;
-  width: 175%;
-  top: 0;
-  z-index: -5000;
-  opacity: .1;
+  height:   110%;
+  width:    175%;
+  top:      0;
+  z-index:  -5000;
+  opacity:  .1;
   background: {
-    image:url('#{$img-path}/korap-bg-kalamar.svg');
-    size: 50%;
-    repeat: no-repeat;
+    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%;
+  position:    relative;
+  text-align:  right;
+  font-size:   85%;
+  right:       0;
+  width:       100%;
   margin-left: ($standard-margin / 2);
-
   padding-left: 60%;
+
   > div {
-    border-top: 26px solid $dark-orange;
+    border-top:    26px solid $dark-orange;
     padding-right: 2em;
   }
   p {
     text-align: left;
-    display: inline-block;
+    display:    inline-block;
   }
 }
 
@@ -62,12 +69,10 @@
  * Logo: Institute for German Language
  */
 #ids-logo {
-  display: block;
-  width: (631 / 30) + em;
-  height: (200 / 30) + em;
-  background: {
-    image:url('#{$img-path}/ids-leibniz-institute-for-the-german-language.svg');
-  }
+  display:          block;
+  width:            (631 / 30) + em;
+  height:           (200 / 30) + em;
+  background-image: url('#{$img-path}/ids-leibniz-institute-for-the-german-language.svg');
 }
 
 
@@ -75,21 +80,21 @@
  * Logo: KorAP
  */
 h1 {
-  position: absolute;
-  margin: 0;
-  margin-left:15px;
-  left: 0;
-  top: 0;
-  width: 7.8em;
-  height: 2.4em;
-  z-index: 105;
+  position:    absolute;
+  margin:      0;
+  margin-left: 15px;
+  left:        0;
+  top:         0;
+  width:       7.8em;
+  height:      2.4em;
+  z-index:     105;
   background: {
-    size: 72%;
+    size:  72%;
     image: url('#{$img-path}/korap-logo-kalamar.svg');
   }
 }
 
 #overview {
   text-align: center;
-  width: 100%;
+  width:      100%;
 }
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 67b48fa..c49ceb1 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -2,74 +2,65 @@
 @import "kwic";        // Kwic view information
 @import "logos";       // Logo images
 @import "matchinfo";   // Match table
-@import "tree";        // Tree view
 @import "pagination";  // Pagination
 @import "query";       // View query
 @import "resultinfo";  // Information on results
 @import "tutorial";    // Embedded and non-embedded tutorial
 @import "koralquery";  // KoralQuery
-@import "tagger";      // Tagger
 @import "alertify";    // Styling alerts
 @import "intro";       // Intro page
 @import "buttongroup"; // Button groups
 @import "panel";       // Base panel system
-@import "plugin";      // Plugin mechanism
 @import "introjs";     // Guided Tour
 @import "introjs-ids"; // Guided Tour: IDS specific 
 @import "oauth";       // OAuth Management styles
+// @import "tagger";   // Tagger
+
+@import "../util";
 
 
 main {
+  padding-bottom: 20pt;
+
   margin: {
-    left: $standard-margin; 
+    left:  $standard-margin; 
     right: ($standard-margin / 2);
   }
-  padding-bottom: 20pt;
+
   &.embedded {
     margin: {
-      left: 14px;
+      left:  14px;
       right: 14px;
     }
   }
+
   p {
     text-align: justify;
-    hyphens: auto;
+    hyphens:    auto;
   }
 
   h2#page-top {
-    margin-top: 0;
+    margin-top:  0;
     padding-top: 1em;
   }
 
   &.page {
     margin-left: $logo-left-distance + 15px;
-    p,li, dd, dt {
+    p,
+    li,
+    dd,
+    dt {
       code {
         background-color: $ids-grey-2;
-        color: $ids-grey-1;
-        padding: 0 .5em;
-        border-radius: $standard-border-radius;
+        color:            $ids-grey-1;
+        padding:          0 .5em;
+        border-radius:    $standard-border-radius;
       }
     }
   }
 
   p.hint {
-    margin: 0 auto;
+    margin:     0 auto;
     text-align: center;
   }
 }
-
-blockquote {
-  border-radius: $standard-border-radius;
-  padding: 2pt 5pt 2pt 20pt;
-  margin: 0;
-  border-left: 5px solid $ids-blue-1;
-  background-color: $ids-blue-2;
-  color: $ids-blue-1;
-
-  &.bug, &.missing {
-    border-left-color: $dark-red;
-    background-color: $middle-red;
-    color: $nearly-white;
-  }
-}
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index 3039d03..a0f98c4 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -1,286 +1,47 @@
 @charset "utf-8";
 @import "../util";
+@import "view/matchtable";
+@import "view/matchtree";
+@import "view/metatable";
 
-$left-width: 176px;
-$border-size: 2px;
-$left-distance: $left-width + ($border-size * 2);
 
 /**
- * Table view
- *
- * The table view is complicated, as the
- * first column has to be static.
+ * General matchinfo styles.
  */
-@mixin matchinfo-head {
-  // border-width: 0px;
-  border-top: $border-size solid $darker-orange; // #ff8000;
-  width: $left-width / 2;
-}
 
-div.matchinfo:empty {
-  display: none !important;
-}
+// TODO: This should be moved to panel/match
 
 div.matchinfo {
-  position: relative;
-  width: 100%;
+  position:    relative;
+  width:       100%;
   padding-top: $border-size;
-  //  background-color: $dark-orange;
-  height: auto;
-  font-size: 10pt;
-  text-align: left;
-}
+  height:      auto;
+  font-size:   10pt;
+  text-align:  left;
 
-  
-div.matchtable > div {
-  z-index: 20;
-  margin-left: $left-distance - ($border-size / 2);
-  margin-right: $right-view-distance;
-  padding: 0;
-  overflow-x: auto;
-  overflow-y: visible;
-  width: auto;
-  
-  table {
-    display: table;
-    border-collapse: separate;
-    border-spacing: 0px;
-  }
-  th {
-    color: $nearly-white;
+  &:empty {
+    display: none !important;
   }
 
-  // Use matchinfo cells for query creation
-  td,
-  tbody th,
-  thead th:not(:nth-child(1)):not(:nth-child(2)):not(.cutted) {
-    cursor: pointer;
-  }
-  td:empty {
-    cursor: default;
-    // Fix for empty annotation lines:
-    &::after {
-      content: " ";
-      white-space: pre;
-    }
-  }
-  tr {
-    outline: none;
-    // equal to dd.chosen
-    td.chosen,
-    th.chosen,
-    div.chosen {
-      background-color: $light-green !important;
-      color: $nearly-white;
-      // transition: color 0.1s, background-color 0.15s ease-out;
-    }
-  }
-
-  thead {
-    tr th {
-      background-color: $darker-orange;
-      border-top-width: 0px !important;
-      text-align: center;
-      &:nth-of-type(1), &:nth-of-type(2) {
-	                        text-align: left;
-                        }
-      &.mark {
-        background-color: $darkest-orange; // #f6a800;
-      }
-
-      &.cutted {
-        background-color: $light-orange;
-        &::after {
-          content: $fa-cut;
-          font-family: FontAwesome;
-          padding: {
-            left: 4pt;
-            right: 4pt;
-          }
-          color: $light-green;
-        }
-      }
-    }
-  }
-  
-  tbody {
-    > tr:nth-of-type(1) > th {
-      border-top-color: transparent;
-    }
-  }
-  tr {
-    /**
-     * The first two columns.
-     */
-    > th:nth-of-type(1),
-    > th:nth-of-type(2) {
-      position: absolute;
-      z-index: 80;
-      vertical-align: middle;
-      left: 0px;
-      @include matchinfo-head;
-    }
-    > th:nth-of-type(2) {
-      left: ($left-width / 2) + $border-size;
-    }
-
-    // Includes header line as well
-    > * {
-      @include cell-info;
-      border: ($border-size / 2) solid $dark-orange;
-    }
-  }
-  tr > td {
-    background-color: $middle-orange; // $nearly-white;
-    white-space: nowrap;
-    vertical-align: top;
-    text-align: center;
-    &.mark {
-      background-color: $light-orange;
-    }
-  }
-  tr:nth-child(even) > td {
-    background-color: $light-orange;
-    &.mark {
-      background-color: $middle-orange;
-    }
-  }
-
-  // table for key-value pairs
-  td.matchkeyvalues {
-    padding: 0;
-    > div {
-      @include cell-info;
-      > span {
-        color: $darkest-orange;
-        text-align: right;
-        &::after {
-          content: ":"
-        }
-        padding-right: .5em;
-      }
-    }
+  .view + .view {
+    margin-top: 4 * $border-size !important;
   }
 }
 
 
-div.metatable, div.matchtable {    
-    background-color: $dark-orange;
-    position: relative;
-}
-
-/**
- * Label
- */
-// The metatable branch was experimental
+div.metatable,
+div.matchtable,
 div.matchtree {
-  h6 {
-    display: inline;
-    font-size: inherit;
-    color: $nearly-white;
-    margin: 0;
-    padding: 0 !important;
-    float: left;
-    > span { // , > div {
-      @include matchinfo-head;
-      @include cell-info;
-      display: inline-block !important;
-      margin: 0;
-      &:nth-of-type(2) {
-	      margin-left: $border-size;
-      }
-    }
-  }
-}
-
-/**
-  * Tree view
-  */
-div.matchtree {
-  position: relative;
-  overflow-x: hidden;
-  overflow-y: visible;
-  padding: 0;
-  margin-top: 1pt;
+  position:         relative;
   background-color: $dark-orange;
-
-  > div {
-    position: unset;
-    z-index: 4;
-    overflow-x: auto;
-    margin: $border-size;
-    margin-left: $left-distance;
-    margin-right: $right-view-distance;
-
-    background-color: $light-orange;
-  }
 }
 
 div.button-group.button-panel.button-matchinfo {
-  display: inline-block;
+  display:      inline-block;
   margin-right: .5em;
+
   > span {
-    position: relative;
+    position:   relative;
     box-shadow: none;
   }
 }
-
-div.matchinfo .view + .view {
-  margin-top: 4 * $border-size !important;
-}
-
-
-// Metatable
-div.metatable > dl {
-  margin-right: $right-view-distance;
-  margin-top: $border-size;
-
-  > div {
-    border-color: $dark-orange;
-    > * {
-      padding: .2em;
-    }
-    > dt {
-      background: $darker-orange;
-      color: $nearly-white;
-      width: 12.5em;
-    }
-    > dd {
-      background-color: $light-orange;
-      cursor: pointer;
-    }
-    > dd[data-type="type:store"],
-    > dd[data-type="type:attachement"]{
-      background-color: $middle-orange;
-      cursor: default;
-
-      a {
-        color: inherit;
-      }
-    }
-    
-    > dd.metakeyvalues {
-      padding:0;
-      > div {
-        padding: .2em;
-        &::before {
-          content: "\2022\00A0";
-          color: $dark-orange
-        }
-      }
-    }
-
-    // equal to td.chosen
-    > dd.chosen, > dd > div.chosen {
-      background-color: $light-green !important;
-      color: $nearly-white;
-    }
-  }
-}
-
-// This is a temporary feature to disable
-// corpusByMatch assistant. See corpusByMatch.js
-// for reasons.
-div.metatable > dl.cbm-disabled > div > dd {
-  cursor: default !important;
-}
diff --git a/dev/scss/main/oauth.scss b/dev/scss/main/oauth.scss
index 0b37285..9dca691 100644
--- a/dev/scss/main/oauth.scss
+++ b/dev/scss/main/oauth.scss
@@ -1,28 +1,35 @@
+@import "../util";
+
+/**
+ * Styles for OAuth management form.
+ */
+
 ul.client-list {
   padding-left: 1.5em;
+
   li.client {
     list-style-type: none;
-    span.client-name {
-      &::before {
-        margin-left: -1.5em;
-      }
-      font-weight: bold;
+
+    span.client-name::before {
+      margin-left: -1.5em;
     }
+
     span.client-desc {
       font-size: 70%;
-      display: block;
+      display:   block;
     }
   }
 }
 
 span.client-name {
+  font-weight: bold;
+
   &::before {
-    display: inline-block;
-    width: 1.5em;
-    content: $fa-plugin;
-    font-family: 'FontAwesome';
-    color: $ids-blue-1;
+    @include icon-font;
+    display:   inline-block;
+    width:     1.5em;
+    content:   $fa-plugin;
+    color:     $ids-blue-1;
     font-size: 100%;
   }
-  font-weight: bold;
 }
\ No newline at end of file
diff --git a/dev/scss/main/pagination.scss b/dev/scss/main/pagination.scss
index 9704638..daa9bd9 100644
--- a/dev/scss/main/pagination.scss
+++ b/dev/scss/main/pagination.scss
@@ -1,54 +1,52 @@
 @charset "utf-8";
 @import "../util";
 
-$border-size : 2px;
-
 /**
  * The pagination view
+ *
+ * <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="#p=2"><span>2</span></a>
+ *   <a href="#3"><span>3</span></a>
+ *   <span><i class="fa fa-ellipsis-h"></i></span>
+ *   <a href="#67"><span>67</span></a>
+ *   <a rel="next" href="#2"><span><i class="fa fa-caret-right"></i></span></a>
+ * </div>
  */
-/*
-<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="#p=2"><span>2</span></a>
-  <a href="#3"><span>3</span></a>
-  <span><i class="fa fa-ellipsis-h"></i></span>
-  <a href="#67"><span>67</span></a>
-  <a rel="next" href="#2"><span><i class="fa fa-caret-right"></i></span></a>
-</div>
-*/
 #pagination {
-  /**
+  /*
    * Always in fixed position.
    * This may need to be overwritten in case multiple
    * paginations have to be activated.
    */
-  font-size: 0;
-  position: fixed;
-  right: ($standard-margin / 4);
-  bottom: ($standard-margin / 2);
-  z-index: 35;
-  padding: 0;
-  height: auto;
+  position:    fixed;
+  font-size:   0;
+  right:       ($standard-margin / 4);
+  bottom:      ($standard-margin / 2);
+  z-index:     35;
+  padding:     0;
+  height:      auto;
   line-height: 0;
 
   > a {
-    margin: 0;
+    margin:    0;
     font-size: 10pt;
-    padding: 0;
+    padding:   0;
 
     > span {
-      box-shadow: $choose-box-shadow;
       @include standard-text-padding;
       @include choose-item;
-      display: inline-block;
+      box-shadow:  $choose-box-shadow;
+      display:     inline-block;
       line-height: 2em;
-      text-align: center;
+      text-align:  center;
+
       border: {
-	top-width: $border-size;
-	bottom-width:  $border-size;
-	top-style: solid;
-	bottom-style: solid;
+	      top-width:    $border-size;
+	      bottom-width: $border-size;
+	      top-style:    solid;
+	      bottom-style: solid;
       }
     }
 
@@ -58,63 +56,70 @@
 
     &.ellipsis > span {
       > span {
-	@include blind;
+	      @include blind;
       }
+
       &::after {
-	font-family: 'FontAwesome';
-	content: $fa-elipsis;
-	line-height: 1em;
+	      @include icon-font;
+	      content:     $fa-elipsis;
+	      line-height: 1em;
       }
     }
 
     &[rel=self] > span {
       @include choose-active;
+
       border {
-	left-width: $border-size;
-	right-width: $border-size;
-	left-style: solid;
-	right-style: solid;
+	      left-width:  $border-size;
+	      right-width: $border-size;
+	      left-style:  solid;
+	      right-style: solid;
       }
     }
 
     &[rel=prev] > span {
       border: {
-	top-left-radius: $standard-border-radius;
-	bottom-left-radius: $standard-border-radius;
-	left-width: $border-size;
-	left-style: solid;
+	      top-left-radius:    $standard-border-radius;
+	      bottom-left-radius: $standard-border-radius;
+	      left-width:         $border-size;
+	      left-style:         solid;
       }
+
       > span {
-	@include blind;
+	      @include blind;
       }
+
       &::after {
-	font-family: 'FontAwesome';
-	content: $fa-previous;
-	line-height: 1em;
+        @include icon-font;
+	      content:     $fa-previous;
+	      line-height: 1em;
       }
     }
 
     &[rel=next] > span {
       border: {
-	top-right-radius: $standard-border-radius;
-	bottom-right-radius: $standard-border-radius;
-	right-width: $border-size;
-	right-style: solid;
+	      top-right-radius:    $standard-border-radius;
+	      bottom-right-radius: $standard-border-radius;
+	      right-width:         $border-size;
+	      right-style:         solid;
       }
+
       > span {
-	@include blind;
+	      @include blind;
       }
+
       &::after {
-	font-family: 'FontAwesome';
-	content: $fa-next;
-	line-height: 1em;
+        @include icon-font;
+	      content:     $fa-next;
+	      line-height: 1em;
       }
     }
+
     &:link:hover,
     &:link:focus {
       outline: none;
       span {
-	@include choose-hover;
+	      @include choose-hover;
       }
     }
   }
diff --git a/dev/scss/main/panel.scss b/dev/scss/main/panel.scss
index 55d0c9c..adddf71 100644
--- a/dev/scss/main/panel.scss
+++ b/dev/scss/main/panel.scss
@@ -1,14 +1,18 @@
 @import "../util";
 
+/**
+ * Base styles for all panels and views
+ */
+
 div.panel {
   position: relative;
-  width: 100%;
-  display: block;
+  width:    100%;
+  display:  block;
 }
 
 div.view {
-  position: relative;
+  position:    relative;
   padding-top: $border-size;
-  display: block;
-  width: 100%;
+  display:     block;
+  width:       100%;
 }
diff --git a/dev/scss/main/plugin.scss b/dev/scss/main/plugin.scss
deleted file mode 100644
index 42867f6..0000000
--- a/dev/scss/main/plugin.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import "../util";
-
-div.view.widget {
-  padding-right: $right-view-distance;
-  > iframe {
-    margin: 0;
-    box-sizing: border-box;
-    padding: 0;
-    width: 100%;
-    overflow-x: auto;
-  }
-}
\ No newline at end of file
diff --git a/dev/scss/main/resultinfo.scss b/dev/scss/main/resultinfo.scss
index d767d19..67b4157 100644
--- a/dev/scss/main/resultinfo.scss
+++ b/dev/scss/main/resultinfo.scss
@@ -1,102 +1,113 @@
 @charset "utf-8";
 @import "../util";
 
+/**
+ * Rules applicable for the result panel
+ */
+
+// TODO: This should be moved to panel/result
 
 #resultinfo {
-  clear: both;
-  text-align: right;
+  clear:       both;
+  text-align:  right;
   line-height: 1.5em;
-  min-height: 1.5em;
-  margin-top:.4em;
-  font-size: 10pt;
+  min-height:  1.5em;
+  margin-top:  .4em;
+  font-size:   10pt;
+
   p.found {
-    display: inline;
-    padding: 0;
-    margin: 0;
+    display:    inline;
+    padding:    0;
+    margin:     0;
     text-align: right;
   }
+
+  /*
+   * TODO:
+   *   This rule should not be dependent on
+   *   whether something is found or not,
+   *   but whether #search contains a result,
+   *   e.g. when a result view is open in the
+   *   result panel. This should probably be
+   *   indicated by a class on the button group
+   *   rather than a class on the resultinfo.
+   */
+  &.found {
+    position:      relative;
+    margin-bottom: 0px;
+
+    .button-group > span {
+      margin-bottom:       0;
+      border-bottom-width: 0;
+      box-shadow:          none;
+
+      &:first-child {
+        border-bottom-left-radius: 0;
+      }
+
+      &:last-child {
+        border-bottom-right-radius: 0;
+      }   
+    }
+  }
 }
 
+
 div.result.panel .view {
-  border: 1px solid $kwic-border;
+  border:           1px solid $kwic-border;
   background-color: $dark-orange;
 }
 
+
 // Specify result button group layout
 .result.button-group.button-panel {
-  width: auto;
+  display:        inline-block;
+  width:          auto;
   vertical-align: bottom;
-  display: inline-block;
-  line-height: 1.3em;
+  line-height:    1.3em;
 
   > span {
-    line-height: 1.3em;
+    line-height:  1.3em;
     border-width: $result-border-size 0;
+
     &:first-child {
       border-left-width: $result-border-size;
     }
+
     &:last-child {
       border-right-width: $result-border-size;
     }
   }
-
-  // Define icons for result buttons
-  .button-icon {
-    &.align.left::after {
-      content: $fa-left-align;
-    }
-    &.align.right::after {
-      content: $fa-right-align;
-    }
-    &.align.center::after {
-      content: $fa-center-align;
-    }
-    &.show-kq::after {
-      content: $fa-code;
-    }
-  }
 }
 
-/*
- * TODO:
- *   This rule should not be dependent on
- *   whether something is found or not,
- *   but whether #search contains a result,
- *   e.g. when a result view is open in the
- *   result panel. This should probably be
- *   indicated by a class on the button group
- *   rather than a class on the resultinfo.
- */
-#resultinfo.found {
-  position: relative;
-  // z-index: 20;
-  margin-bottom: 0px;
-
-  .button-group > span {
-    margin-bottom: 0;
-    border-bottom-width: 0;
-    box-shadow: none;
-    &:first-child {
-      border-bottom-left-radius: 0;
-    }
-    &:last-child {
-      border-bottom-right-radius: 0;
-    }   
-  }
-}
-
-
 
 #total-results {
-  color: $total-results;
+  color:       $light-green;
   font-weight: bold;
 }
 
+
 .no-results {
-  margin: 0 auto;
+  margin:     0 auto;
   text-align: center;
   code {
     font-weight: bold;
   }
 }
 
+
+// Define icons for result buttons
+.button-icon {
+  &.align.left::after {
+    content: $fa-left-align;
+  }
+  &.align.right::after {
+    content: $fa-right-align;
+  }
+  &.align.center::after {
+    content: $fa-center-align;
+  }
+  &.show-kq::after {
+    content: $fa-code;
+  }
+}
diff --git a/dev/scss/main/tagger.scss b/dev/scss/main/tagger.scss
index c3a08be..d7ba90f 100644
--- a/dev/scss/main/tagger.scss
+++ b/dev/scss/main/tagger.scss
@@ -1,62 +1,70 @@
 @charset "utf-8";
 @import "../util";
 
-$border-size: 1px;
+/**
+ * Styles for tags.
+ */
+
+// Currently not used
+
 $tagcolor: rgba(0,0,0,0.5);
 
 .tagger {
-  display: table;
+  display:         table;
   border-collapse: collapse;
-  width: 100%;
-  font-size: 100%;
+  width:           100%;
+  font-size:       100%;
 
   // The tag list
   > div  {
-    display: table-cell;
-    font-size: inherit;
+    display:     table-cell;
+    font-size:   inherit;
     white-space: nowrap;
-    width: 0;
+    width:       0;
 
     // The tag
     > span {
-      font-size: 80%;
-      display: inline-block;
-      white-space: nowrap;
+      display:          inline-block;
+      font-size:        80%;
+      white-space:      nowrap;
       background-color: $dark-orange;
-      padding: 2px 6px;
-      color: $tagcolor;
-      text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
-      margin-right: 2px;
-      box-shadow: $choose-box-shadow;
-      cursor: pointer;
+      padding:          2px 6px;
+      color:            $tagcolor;
+      text-shadow:      $light-shadow;
+      margin-right:     2px;
+      box-shadow:       $choose-box-shadow;
+      cursor:           pointer;
+
       border: {
-	width: $border-size;
-	style:solid;
-	color: rgba(0,0,0,0.3);
-	radius: $standard-border-radius;
+	      width:  $border-size;
+	      style:  solid;
+	      color:  rgba(0,0,0,0.3);
+	      radius: $standard-border-radius;
       }
+
       > span {
-	cursor: crosshair;
-	&::after {
-	  font-size: 70%;
-	  vertical-align: top;
-	  padding-left: 3px;
-	  color: $tagcolor;
-	  text-shadow: none;
-	  font-family: 'FontAwesome';
-	  content: $fa-close;
-	}
+	      cursor: crosshair;
+
+        &::after {
+          @include icon-font;
+	        font-size:      70%;
+	        vertical-align: top;
+	        padding-left:   3px;
+	        color:          $tagcolor;
+	        text-shadow:    none;
+	        content:        $fa-close;
+	      }
       }
     }
   }
 
   // The tag input field
   input[type=text] {
-    display: table-cell;
-    width: 100%;
-    border: none;
+    display:          table-cell;
+    width:            100%;
+    border:           none;
     background-color: $light-grey;
-    font-size: inherit;
+    font-size:        inherit;
   }
 }
 
diff --git a/dev/scss/main/tutorial.scss b/dev/scss/main/tutorial.scss
index 526a190..6ccc32e 100644
--- a/dev/scss/main/tutorial.scss
+++ b/dev/scss/main/tutorial.scss
@@ -1,45 +1,45 @@
 @charset "utf-8";
 @import "../util";
 
-$border-size: 2px;
+/**
+ * Rules for the embedded documentation.
+ */
 
 #tutorial {
-  position: fixed;
-  z-index: 9999;
-  top:    5%;
-  bottom: 5%;
-  left:   2%;
-  right:  2%;
-  padding-right: $right-view-distance;
-/*
-  padding: 0;
-  margin: 0;
-*/
+  position:         fixed;
+  z-index:          9999;
+  top:              5%;
+  bottom:           5%;
+  left:             2%;
+  right:            2%;
+  padding-right:    $right-view-distance;
   background-color: $nearly-white;
+  box-shadow:       $choose-box-shadow;
 
   .button-group.button-view {
     background-color: $middle-grey;
-    display: block;
-    height: 100%;
+    display:          block;
+    height:           100%;
   }
+
   border: {
-    width: 2 * $border-size;
-//    color: $dark-orange;
-    color: $dark-grey;
-    style: solid;
+    width:  2 * $border-size;
+    color:  $dark-grey;
+    style:  solid;
     radius: $standard-border-radius;
   }
-  box-shadow: $choose-box-shadow;
+
   iframe {
     border-width: 0;
     width: 100%;
+
     // Hack for a Firefox bug
     min-height: 100.1%;
     background: {
-      image:url('#{$img-path}/korap-bg-kalamar.svg');
-      repeat: no-repeat;
+      image:    url('#{$img-path}/korap-bg-kalamar.svg');
+      repeat:   no-repeat;
       position: center center;
-      size: 20%;
+      size:     20%;
     }
   }
 }
@@ -47,59 +47,23 @@
 body.embedded {
   background-color: $nearly-white;
   aside {
-/*
-    border-right: {
-      width: $border-size;
-      style: solid;
-    }
-*/
-    padding-top: 0;
     @include choose-item;
+    padding-top: 0;
     background-color: $middle-grey;
+
     > div {
-      position: relative;
-      top: 50%;
+      position:         relative;
+      top:               50%;
       -webkit-transform: translateY(-50%);
-      -ms-transform: translateY(-50%);
-      transform: translateY(-50%);
-      // margin-right: -1 * $border-size;
+      -ms-transform:     translateY(-50%);
+      transform:         translateY(-50%);
     }
   }
 }
 
-main.tutorial {
-  // Link to documentation
-  a.embedded-link::after {
-    font-family: FontAwesome;
-    white-space: nowrap;
-    content: " " + $fa-tutorial;
-    font-size: 75%;
-  }
-}
-
-dl {
-  margin: 0;
-  padding-bottom: .5em;
-  dt {
-    font-weight: bold;
-    abbr {
-      border-width: 0;
-      &[data-type=token]::after {
-	      color: $ids-blue-1;
-      }
-      &[data-type=span]::after {
-	      color: $ids-pink-1;
-      }
-      &::after {
-	      content: ' (' attr(title) ')';
-	      vertical-align: bottom;
-	      font-style: italic;
-	      font-weight: normal;
-	      font-size: 80%;
-      }
-    }
-  }
-}
-
-
-
+// Link to documentation
+main.tutorial a.embedded-link::after {
+  @include icon-font;
+  content:   " " + $fa-tutorial;
+  font-size: 75%;
+}
\ No newline at end of file
diff --git a/dev/scss/main/view/matchtable.scss b/dev/scss/main/view/matchtable.scss
new file mode 100644
index 0000000..6239c61
--- /dev/null
+++ b/dev/scss/main/view/matchtable.scss
@@ -0,0 +1,148 @@
+@import "../../util";
+
+/**
+ * Table view
+ *
+ * The table view is complicated, as the
+ * first column has to be static.
+ */
+div.matchtable {
+
+  > div {
+    z-index:      20;
+    margin-left:  $left-distance - ($border-size / 2);
+    margin-right: $right-view-distance;
+    padding:      0;
+    overflow-x:   auto;
+    overflow-y:   visible;
+    width:        auto;
+  }
+
+  table {
+    display:         table;
+    border-collapse: separate;
+    border-spacing:  0px;
+  }
+
+  th {
+    color: $nearly-white;
+  }
+
+  // Use matchinfo cells for query creation
+  td,
+  tbody th,
+  thead th:not(:nth-child(1)):not(:nth-child(2)):not(.cutted) {
+    cursor: pointer;
+  }
+
+  td {
+    &:empty {
+      cursor: default;
+      // Fix for empty annotation lines:
+      &::after {
+        content:     " ";
+        white-space: pre;
+      }
+    }
+
+    // table for key-value pairs
+    &.matchkeyvalues {
+      padding: 0;
+      > div {
+        @include cell-info;
+        > span {
+          color:         $darkest-orange;
+          text-align:    right;
+          padding-right: .5em;
+          &::after {
+            content: ":"
+          }
+        }
+      }
+    }
+  }
+
+  tr {
+    outline: none;
+
+    // equal to dd.chosen
+    td.chosen,
+    th.chosen,
+    div.chosen {
+      background-color: $light-green !important;
+      color:            $nearly-white;
+    }
+
+    /**
+     * The first two columns.
+     */
+    > th:nth-of-type(1),
+    > th:nth-of-type(2) {
+      @include matchinfo-head;
+      position:       absolute;
+      z-index:        80;
+      vertical-align: middle;
+      left:           0px;
+    }
+
+    > th:nth-of-type(2) {
+      left: ($left-width / 2) + $border-size;
+    }
+
+    // Includes header line as well
+    > * {
+      @include cell-info;
+      border: ($border-size / 2) solid $dark-orange;
+    }
+
+    > td {
+      background-color: $middle-orange;
+      white-space:      nowrap;
+      vertical-align:   top;
+      text-align:       center;
+      &.mark {
+        background-color: $light-orange;
+      }
+    }
+
+    &:nth-child(even) > td {
+      background-color: $light-orange;
+      &.mark {
+        background-color: $middle-orange;
+      }
+    }
+  }
+
+  thead th {
+    background-color: $darker-orange;
+    border-top-width: 0px !important;
+    text-align:       center;
+
+    &:nth-of-type(1),
+    &:nth-of-type(2) {
+	    text-align: left;
+    }
+
+    &.mark {
+      background-color: $darkest-orange;
+    }
+
+    &.cutted {
+      background-color: $light-orange;
+
+      &::after {
+        @include icon-font;
+        content: $fa-cut;
+        color:   $light-green;
+        padding: {
+          left:  4pt;
+          right: 4pt;
+        }
+      }
+    }
+  }
+  
+  tbody > tr:nth-of-type(1) > th {
+    border-top-color: transparent;
+  }
+}
diff --git a/dev/scss/main/view/matchtree.scss b/dev/scss/main/view/matchtree.scss
new file mode 100644
index 0000000..96fb86a
--- /dev/null
+++ b/dev/scss/main/view/matchtree.scss
@@ -0,0 +1,44 @@
+@import "../../util";
+@import "tree";
+
+/**
+ * Matchtree view
+ */
+
+div.matchtree {
+  overflow-x:       hidden;
+  overflow-y:       visible;
+  padding:          0;
+  margin-top:       1pt;
+
+  // Label
+  h6 {
+    display:   inline;
+    font-size: inherit;
+    color:     $nearly-white;
+    margin:    0;
+    padding:   0 !important;
+    float:     left;
+
+    > span {
+      @include matchinfo-head;
+      @include cell-info;
+      display: inline-block !important;
+      margin: 0;
+
+      &:nth-of-type(2) {
+	      margin-left: $border-size;
+      }
+    }
+  }
+  
+  > div {
+    position:         unset;
+    z-index:          4;
+    overflow-x:       auto;
+    margin:           $border-size;
+    margin-left:      $left-distance;
+    margin-right:     $right-view-distance;
+    background-color: $light-orange;
+  }
+}
diff --git a/dev/scss/main/view/metatable.scss b/dev/scss/main/view/metatable.scss
new file mode 100644
index 0000000..8be5679
--- /dev/null
+++ b/dev/scss/main/view/metatable.scss
@@ -0,0 +1,64 @@
+@charset "utf-8";
+@import "../../util";
+
+// Metatable
+div.metatable > dl {
+  margin-right: $right-view-distance;
+  margin-top:   $border-size;
+
+  > div {
+    border-color: $dark-orange;
+
+    > * {
+      padding: .2em;
+    }
+
+    > dt {
+      background: $darker-orange;
+      color:      $nearly-white;
+      width:      12.5em;
+    }
+
+    > dd {
+      background-color: $light-orange;
+      cursor: pointer;
+
+      &.metakeyvalues {
+        padding: 0;
+
+        > div {
+          padding: .2em;
+
+          &::before {
+            content: "\2022\00A0";
+            color:   $dark-orange
+          }
+        }
+      }
+
+      // equal to td.chosen
+      &.chosen,
+      > div.chosen {
+        background-color: $light-green !important;
+        color:            $nearly-white;
+      }
+
+      &[data-type="type:store"],
+      &[data-type="type:attachement"] {
+        background-color: $middle-orange;
+        cursor:           default;
+
+        a {
+          color: inherit;
+        }
+      }
+    }
+  }
+
+  // This is a temporary feature to disable
+  // corpusByMatch assistant. See corpusByMatch.js
+  // for reasons.
+  &.cbm-disabled > div > dd {
+    cursor: default !important;
+  }
+}
\ No newline at end of file
diff --git a/dev/scss/main/tree.scss b/dev/scss/main/view/tree.scss
similarity index 60%
rename from dev/scss/main/tree.scss
rename to dev/scss/main/view/tree.scss
index 088690f..c7e064b 100644
--- a/dev/scss/main/tree.scss
+++ b/dev/scss/main/view/tree.scss
@@ -1,13 +1,13 @@
 @charset "utf-8";
-@import "../util";
+@import "../../util";
 
 /**
  * SVG tree
  */
 path.edge {
-  stroke: $darker-orange;
+  stroke:       $darker-orange;
   stroke-width: 2px;
-  fill: none;
+  fill:         none;
 }
 
 g.arc.infocus > path.edge {
@@ -17,37 +17,38 @@
 marker#arr {
   overflow: visible;
   path {
-    stroke: $darkest-orange;
-    fill: $darkest-orange;
-    fill-opacity:1;
+    stroke:       $darkest-orange;
+    fill:         $darkest-orange;
+    fill-opacity: 1;
     stroke-width: 2; 
   }
 }
 
 path.anchor {
-  stroke: $darkest-orange;
-  stroke-width: 3;
+  stroke:         $darkest-orange;
+  stroke-width:   3;
   stroke-linecap: round;
-  z-index: 20;
+  z-index:        20;
 }
 
 g.root rect.empty {
-  stroke: $darker-orange;
-  fill: $darker-orange;
+  stroke:       $darker-orange;
+  fill:         $darker-orange;
   stroke-width: 2px;
 }
 
-g.middle, g.label {
+g.middle,
+g.label {
   rect {
-    stroke: $darker-orange;
+    stroke:       $darker-orange;
     stroke-width: 2px;
-    fill: $middle-orange;
+    fill:         $middle-orange;
   }
 }
 
 g.label.infocus rect {
   stroke: $dark-green;
-  fill: $lightest-green;
+  fill:   $lightest-green;
 }
 
 g.middle.mark {
@@ -56,6 +57,7 @@
   }
   > text {
     fill: $light-orange;
+
     > tspan {
       stroke: $light-orange;
     }
@@ -72,13 +74,13 @@
 
 g > text > tspan {
   text-anchor: middle;
-  font-size: 9pt;
+  font-size:   9pt;
 }
 
 g.leaf > text,
 text.leaf {
   > tspan {
     font-size: 10pt;
-    overflow: visible;
+    overflow:  visible;
   }
 }
diff --git a/dev/scss/no-js.scss b/dev/scss/no-js.scss
index f948e44..c5f6410 100644
--- a/dev/scss/no-js.scss
+++ b/dev/scss/no-js.scss
@@ -1,50 +1,57 @@
 @import "util";
 
-// Aside in noscript mode
-body.no-js aside {
-  > * {
-    opacity: 1 !important;
-    transition: none;
-  }
-  transition: none;
-  position: relative;
-  margin-left: 0 !important;
-  display: block;
-  padding-top:0;
-  width: 100%;
-  top: 0;
-  form.login {
-    > input, > div {
-      width: auto;
-      margin-top: 0;
-      &:first-of-type {
-        float: left;
-        margin-right: 1em;
+/**
+ * Optimization for no-js behaviour
+ */
+body.no-js {
+
+  // Aside in noscript mode
+  aside {
+    position:    relative;
+    display:     block;
+    transition:  none;
+    margin-left: 0 !important;
+    padding-top: 0;
+    width:       100%;
+    top:         0;
+
+    > * {
+      opacity:    1 !important;
+      transition: none;
+    }
+
+    form.login {
+      > input,
+      > div {
+        width:      auto;
+        margin-top: 0;
+        &:first-of-type {
+          float:        left;
+          margin-right: 1em;
+        }
+      }
+      button {
+        height: 100%
       }
     }
-    button {
-      height: 100%
+
+    p,
+    &::after {
+      display: none;
     }
   }
-  &::after {
-    display: none;
-  }
-  p {
-    display: none;
+
+  main div.intro {
+    margin-left: $base-padding !important;
   }
 }
 
-body.no-js main div.intro {
-  margin-left: $base-padding !important;
-}
-
-
 #activate {
-  text-align: right;
+  text-align:       right;
   background-color: $dark-orange;
-  margin-top: 0;
-  padding: $base-padding;
-  padding-right: $standard-margin;
-  color: $nearly-white;
-  font-size: 80%;
+  margin-top:       0;
+  padding:          $base-padding;
+  padding-right:    $standard-margin;
+  color:            $nearly-white;
+  font-size:        80%;
 }
\ No newline at end of file
diff --git a/dev/scss/plugin.scss b/dev/scss/plugin.scss
new file mode 100644
index 0000000..5203758
--- /dev/null
+++ b/dev/scss/plugin.scss
@@ -0,0 +1,18 @@
+@import "base/base";
+
+/**
+ * Base rules for all plugin related styles,
+ * like widgets.
+ */
+
+div.view.widget {
+  padding-right: $right-view-distance;
+
+  > iframe {
+    margin:     0;
+    box-sizing: border-box;
+    padding:    0;
+    width:      100%;
+    overflow-x: auto;
+  }
+}
\ No newline at end of file
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
index 2a99589..f9cb33d 100644
--- a/dev/scss/sidebar/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -1,67 +1,71 @@
 @charset "utf-8";
 @import "../util";
 
-$border-size: 2px;
-$right-padding: 60px;
-
 aside {
-  outline: none;
-  font-size: 10pt;
-  display: block;
   background-color: $dark-green;
-  position: fixed;
-  z-index: 100; // Needs to be behind alerts
-  color: $nearly-white;
-  width: $logo-left-distance;
-  top: 0;
-  left: 0;
-  height: 100%;
+  color:       $nearly-white;
+  width:       $logo-left-distance;
+  position:    fixed;
+  display:     block;
+  transition:  all .3s ease-in-out;
+  outline:     none;
+  font-size:   10pt;
+  z-index:     100; // Needs to be behind alerts
+  top:         0;
+  left:        0;
+  height:      100%;
   padding-top: 65px;
+
   > div {
     overflow-y: auto;
     overflow-x: visible;
     max-height: 100%;
   }
+
   > * {
     opacity: 1;
   }
+
   &::after {
-    position: absolute;
-    display: block;
-    opacity: 0;
-    cursor: pointer;
-    right: 0;
-    bottom: 0;
-    margin-right: -1 * ($standard-margin / 2);
-    background-color: $dark-green;
-    font-family: FontAwesome;
-    content: $fa-login; // $fa-bars
+    @include icon-font;
+    position:  absolute;
+    display:   block;
+    opacity:   0;
+    cursor:    pointer;
+    right:     0;
+    bottom:    0;
+    content:   $fa-login;
     font-size: 16pt;
-    width: 16pt;  
-    height: 17pt;
-    padding: 6pt;
+    width:     16pt;  
+    height:    17pt;
+    padding:   6pt;
+    background-color: $dark-green;
     border-top-right-radius: $standard-border-radius;
-  }
-  h2, legend {
-    font: {
-      size: 100%;
-      weight: bold;
-    }
-    line-height: 2em;
-    text-align: center;
-    padding: 0;
-    margin: 0;
+    margin-right: -1 * ($standard-margin / 2);
   }
 
+  h2,
+  legend {
+    line-height: 2em;
+    text-align:  center;
+    padding:     0;
+    margin:      0;
+    font: {
+      size:   100%;
+      weight: bold;
+    }
+  }
+
+  /**
+   * Navigation menu
+   */
   ul.nav {
     list-style-type: none;
-/*
-    background-color: $light-green;
-*/
-    margin: 0;
-    font-size: 10pt;
-    text-indent: 0;
-    padding: 0;
+    margin:          0;
+    font-size:       10pt;
+    text-indent:     0;
+    padding:         0;
+
     li {
       padding: 0;
       > a {
@@ -86,171 +90,127 @@
 
       > a:link {
         @include choose-item;
+        display: block;
+
         border-right: {
           width: $border-size;
           style: solid;
         }
 
-        display: block;
         &:hover {
-          // color: inherit;
-          transition: none;
           @include choose-hover;
+          transition: none;
         }
       }
+
       h3 {
-        font: {
-        weight: bold;
-        size: 100%;
-      }    
         padding: 0;
         margin: 0;
+        font: {
+          weight: bold;
+          size:   100%;
+        }
       }
-/*
-      &.active {
-  text-shadow: none;
-  h3 {
-    margin-bottom: 2pt;
-    padding-bottom: 2pt;
-    border-bottom: 1px solid black;
-  }
-      }
-*/
+
       > a {
         padding-left: 6pt;
       }
+
       li > a {
         padding-left: 18pt;
       }
+
       li li > a {
         padding-left: 36pt;
       }
     }
   }
+
   nav > ul > li > a {
     font-weight: bold;
   }
   
   fieldset {
-    position: relative;
+    position:     relative;
     border-width: 0;
+
     legend {
       display: none;
     }
     
-    input[type=text], input[type=password] {
+    input[type=text],
+    input[type=password] {
       @include input-field;
       width: 100%;
     }
     
     > form > div {
-      position: relative;
-      width: 100%;
-      margin-top: 4px;
+      position:      relative;
+      width:         100%;
+      margin-top:    4px;
       padding-right: $button-width
     }
 
     > p {
       color: $light-green;
     }
+
     > p.announcement {
       color: $nearly-white;
       > time {
-        display: block;
+        display:   block;
         font-size: 70%;
       }
     }
+
     hr {
       border: none;
       border-top: 2px solid $ids-grey-2;
     }
+
     ul {
-      display: block;
-      font-size: 80%;
+      display:    block;
+      font-size:  80%;
       text-align: right;
-      > li {
-  display: inline;
-  &:first-child::after {
-    content: ' | ';
-  }
-      }
-      padding: 0;
+      padding:    0;
       margin-top: 0;
+
+      > li {
+        display: inline;
+        &:first-child::after {
+          content: ' | ';
+        }
+      }
     }
 
     button {
       position: absolute;
-      // height: 100%;
-      top: 0;
-      right: 0;
+      top:      0;
+      right:    0;
       &::after {
         content: $fa-login;
       }
     }
   }
-}
 
-aside {
-  transition: all .3s ease-in-out;
-}
-
-aside.off, aside:not(:focus):not(.active) {
-  margin-left: -1 * ($logo-left-distance - ($standard-margin / 2));
-  &::after {
-    opacity: 1;
-  }
+  // Off aside
+  &.off,
+  &:not(:focus):not(.active) {
+    margin-left: -1 * ($logo-left-distance - ($standard-margin / 2));
+    &::after {
+      opacity: 1;
+    }
  
-  > * {
-    opacity: 0;
-    transition: {
-      property: opacity;
-      duration: .3s;
+    > * {
+      opacity: 0;
+      transition: {
+        property: opacity;
+        duration: .3s;
+      }
     }
   }
-}
 
-aside.off::after {
-  display:none;
-}
-
-
-/*
-#sidebar {
-  text-shadow: none;
-  height: 105%;
-  margin-top: -10px;
-  background-color: #496000;
-  left: 0;
-  top: 0;
-  &.active {
-    box-shadow: 2px 2px 5px darken($dark-green, 15%);
-    margin-left: 0px;
-    left: 0;
-    top: 0;
-  }
-  &: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;
-  }
-  dl.info {
-    font-size: 9pt;
-    padding: 0 10pt;
-    > dt {
-      font-weight: bold;
-      float: left;
-    }
-    > dd {
-      text-align: right;
-    }
+  &.off::after {
+    display:none;
   }
 }
-*/
\ No newline at end of file
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index 6edd3e7..12fb54b 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -1,281 +1,6 @@
-/**
- * Some variables and mixins for Kalamar,
- * other Sass styles will use.
- */
-
-/**
- * Official IDS colors
- */
-$ids-orange-1: rgb(246, 168,   0);
-$ids-orange-2: rgb(242, 148,   0);
-$ids-grey-1:   rgb(135, 136, 138);
-$ids-grey-2:   rgb(217, 218, 219);
-$ids-blue-1:   rgb(  0, 158, 224); // Pragmatik
-$ids-blue-2:   rgb(188, 228, 247); // Pragmatik
-$ids-green-1:  rgb( 99, 111,   7); // Grammatik
-$ids-green-2:  rgb(227, 232, 163); // Grammatik
-$ids-pink-1:   rgb(193,   0,  43); // Lexik
-$ids-pink-2:   rgb(250, 243, 222); // Lexik
-
-$black: #333;
-
-/**
- * Orange Colors
- */
-$light-orange:   #f4eebb; // #ffe56a;
-$middle-orange:  #ffd080;
-$dark-orange:    $ids-orange-1; // #ffa500;
-$darker-orange:  #ff8000;
-$darkest-orange: #e55d00;
-// $light-orange-2: #f4eebb;, #ffd080;
-// Yellow: #fff48d
-
-/**
- * Green Colors
- */
-$dark-green:     $ids-green-1; // #496000;
-// $middle-green:   lighten($ids-green-1, 5%);
-$middle-green:   lighten($ids-green-1, 9%);
-$light-green:    lighten($ids-green-1, 13%); // #7ba400;
-$lightest-green: desaturate(lighten($light-green, 35%), 20%); // #d8e38c;
-$grey-green:     darken(desaturate($lightest-green, 25%), 12%); // #bcc387;
-
-/**
- * Blue Colors
- */
-$light-blue:     $ids-blue-2;
-$dark-blue:      $ids-blue-1;
-$darkest-blue:   darken($dark-blue, 40%);
-
-/**
- * Grey Colors
- */
-$middle-grey:  $ids-grey-1; // #999;
-// $semilight-grey: #8d8d8d;
-$light-grey:   $ids-grey-2; // #ddd;
-$dark-grey:    darken($middle-grey, 15%);
-$nearly-white: #fefefe;
-
-/**
- * Red Colors (no IDS relation)
- */
-$middle-red: #c1002b;
-$light-red: lighten($middle-red, 40%);
-$dark-red: darken($middle-red, 40%);
-
-
-/**
- * Basic shadows
- */
-$dark-shadow: 1px 1px 1px rgba(0,0,0,0.3);
-$light-shadow: 1px 1px rgba(255,255,255,0.5);
-
-/**
- * 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:  $middle-red;
-$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;
-$item-padding: 3pt 6pt;
-$button-width: 30px;
-$base-padding: 8px;
-$border-size: 2px;
-$result-border-size: 1px;
-$total-results: $light-green;
-
-$left-width: 176px;
-$border-size: 2px;
-$left-distance: $left-width + ($border-size * 2);
-
-/**
- * Path information - relative to css!
- */
-$img-path:  '../img';
-$font-path: '../font';
-
-/**
- * Margins
- */
-$standard-margin: 40px;
-$right-distance: $standard-margin;
-$right-view-distance: $standard-margin / 2;
-$logo-left-distance: 230px;
-
-/**
- * Mixin for blind elements
- * (e.g., spans in elements with an icon background)
- */
-@mixin blind {
-  position: absolute;
-  margin-left: -3000px;
-}
-
-
-/**
- * Chooseable items (default)
- */
-@mixin choose-item {
-  color: $choose-color;
-  background-color: $choose-bg;
-  border-color: $choose-border-color;
-  text-shadow: $light-shadow;
-}
-
-/**
- * Chooseable items (mouse over)
- */
-@mixin choose-hover {
-  color: $nearly-white;
-  text-shadow: none;
-  background-color: $dark-orange;
-  border-color: $darker-orange;
-}
-
-/**
- * Chooseable items (not available)
- */
-@mixin choose-inactive {
-  color: lighten($choose-color, 20%);
-  background-color: lighten($choose-bg, 20%);
-  border-color: transparent;
-  text-shadow: none;
-}
-
-/**
- * Chooseable items (active)
- */
-@mixin choose-active {
-  color: $dark-green;
-  text-shadow: none;
-  background-color: $light-green;
-  border-color: $dark-green;
-}
-
-/**
- * Chooseable items (action: remove something)
- */
-@mixin choose-remove {
-  color: $nearly-white;
-  text-shadow: none;
-  background-color: $middle-red;
-  border-color: $dark-red;
-}
-
-@mixin cell-info {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 25em;
-  overflow: hidden;
-  padding: 1px 6px;
-  margin: 0px;
-}
-
-/**
- * Mixin for basic color transition
- */
-@mixin color-transition {
-  transition: color 0.3s ease 0s;
-}
-
-@mixin input-field {
-  outline: none;
-  font-size: 11pt;
-  border: $border-size solid $nearly-white;
-  padding: 2px;
-  margin: 0;
-}
-
-/**
- * Mixing for basic text padding
- */
-@mixin standard-text-padding {
-  padding-left: .4em;
-  padding-right: .4em;
-}
-
-
-/**
- * Mixing for correct box sizing (probably not necessary)
- * DEPRECATED
- */
-@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+ */
-}
-
-/**
- * Noisy background
- */
-@mixin light-noise {
-  background-image:url('#{$img-path}/noise.png');
-}
-
-/**
- * Mixin for no-appearance rules
- */
-// https://css-tricks.com/almanac/properties/a/appearance/
-@mixin no-appearance {
-  -webkit-appearance:none;
-  -moz-appearance:none;
-  appearance:none;
-}
-
-/** 
-* Mixin for the appearance of inactive elements in the vcinfo panel
-*/
-@mixin vcinfo-inactive{
-    background-color: $grey-green;
-    color: $dark-green; // $semilight-grey;
-    // border-color:   $semilight-grey; 
-    text-shadow: none;
-}
-/**
- * Font Awesome symbol table
- */
-$fa-bars:         "\f0c9";
-$fa-extlink:      "\f08e";
-$fa-up:           "\f0d8";
-$fa-down:         "\f0d7";
-$fa-minimize:     "\f0d8";
-$fa-close:        "\f00d";
-$fa-download:     "\f019";
-$fa-info:         "\f05a";
-$fa-elipsis:      "\f141";
-$fa-previous:     "\f0d9";
-$fa-next:         "\f0da";
-$fa-search:       "\f002";
-$fa-rewrite:      "\f040";
-$fa-login:        "\f090";
-$fa-logout:       "\f08b";
-$fa-tutorial:     "\f19d";
-$fa-left-align:   "\f036";
-$fa-right-align:  "\f038";
-$fa-center-align: "\f037";
-$fa-question:     "\f128";
-$fa-checked:      "\f046";
-$fa-check:        "\f096";
-$fa-code:         "\f121";
-$fa-marked:       "\f005";
-// $fa-metadata:    "\f067";
-$fa-metadata:     "\f055";
-$fa-to-query:     "\f102";
-$fa-cut:          "\f0c4";
-$fa-plugin:       "\f1e6";
-$fa-referto:      "\f0c5";
-$fa-redo:         "\f01e";
+@import "base/colors";
+@import "base/icons";
+@import "base/mixins";
+@import "base/choose";
+@import "base/lengths";
+@import "base/paths";