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;