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