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";