diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
new file mode 100644
index 0000000..60a3bf4
--- /dev/null
+++ b/dev/scss/header/header.scss
@@ -0,0 +1,141 @@
+@charset "utf-8";
+@import "../util";
+@import "hint";       // Hint specific menu list
+@import "menu";       // Menu list
+@import "searchbar";  // The search bar
+@import "vc";         // Virtual collection builder
+
+header {
+  position: relative;
+  background-color: $light-green;
+//  @include light-noise;
+  @include box-sizing-box();
+  padding: 8px;
+  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;
+    line-height: 1.8em;
+    border: {
+      width: 0;
+      bottom-width: 3px;
+      style: solid;
+      color: transparent;
+    }
+    display: inline-block;
+    &:hover {
+      color: $dark-green;
+      border-color: $dark-green;
+    }
+    &::after {
+      pointer-events: none;
+      font-family: FontAwesome;
+      text-align: center;
+      background-color: $light-green;
+    }
+  }
+  span.select::after {
+    content: $fa-down;
+  }
+
+  form {
+    padding-left: $logo-left-distance;
+    min-height: 2.7em;
+    display: block;
+    margin: 0px;
+    position: relative;
+  }
+
+  .button {
+    &.right {
+      float: right;
+      display: inline-block;
+    }
+    &.top {
+      position: absolute;
+      display: block;
+      top: 0;
+      right: 0;
+      margin-right: 0;
+      width: 22px;
+      background-color: $dark-green;
+      text-align: center;
+      height: 100%;
+    }
+    color: $nearly-white;
+    line-height: 2em;
+    margin-right: $right-distance;
+    > a {
+      color: $nearly-white;
+      cursor:pointer;
+      position: relative;
+      font-size: 120%;
+      > span {
+	@include blind;
+      }
+    }
+    > a::after {
+      font-family: 'FontAwesome';
+    }
+    > a.tutorial::after {
+      content: $fa-tutorial;
+    }
+    > a.align.left::after {
+      content: $fa-left-align;
+    }
+    > a.align.right::after {
+      content: $fa-right-align;
+    }
+    > a.question::after {
+      content: $fa-question;
+    }
+    > a.login::after {
+      content: $fa-login;
+    }
+  }
+}
+
+
+/**
+ * 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;
+}
diff --git a/dev/scss/header/hint.scss b/dev/scss/header/hint.scss
new file mode 100644
index 0000000..a373abc
--- /dev/null
+++ b/dev/scss/header/hint.scss
@@ -0,0 +1,61 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 2px;
+
+ul.menu.hint {
+  display: inline-block;
+  white-space: normal;
+  text-align:left;
+  top: 0;
+  max-width: 23em !important;
+
+  > li:first-of-type {
+    border-top: {
+      width: 1px;
+      left-radius: 0;
+      right-radius: 0;
+    }
+  }
+  span.desc {
+    display: block;
+    font-size: 75%;
+  }
+}
+
+#searchMirror {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 900;
+  white-space: pre-wrap;
+  height: 0;
+  display: block;
+  > span {
+    opacity: 0;
+    white-space: pre-wrap;
+    overflow: hidden;
+  }
+  // Todo: Besser nur, wenn im Focus
+  > div {
+    position: absolute;
+    display: block;
+    cursor: pointer;
+    transition: left 0.2s ease 0s;
+    top: 0;
+    left: 0;
+    text-align: left;
+    padding: 0;
+    border-top: 5px solid $dark-orange;
+    height: 10px;
+    width: 1.2em;
+    &:hover:not(.active) {
+      border-top: 10px solid $dark-orange;
+    }
+    &.active {
+      border-top-width: 0;
+      height: 0;
+      width: 23em;
+    }
+  }
+}
\ No newline at end of file
diff --git a/dev/scss/header/menu.scss b/dev/scss/header/menu.scss
new file mode 100644
index 0000000..46529bd
--- /dev/null
+++ b/dev/scss/header/menu.scss
@@ -0,0 +1,140 @@
+@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: 7000;
+}
+
+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 > li,
+ul.menu > span.pref:not(.active) {
+  @include choose-item;
+}
+
+ul.menu {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  text-indent: 0;
+  list-style-type: none;
+  list-style-position: outside;
+
+  /**
+   * List items
+   */
+  > li {
+    padding-right: 1.6em;
+
+    &: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;
+    }
+  }
+}
+
+
+/**
+ * Sorting menu
+ */
+ul.menu.sort {
+  position: relative;
+  display: inline-block;
+  > li::before {
+    content: '';
+  }
+  > li.active:hover {
+    @include choose-remove;
+  }
+
+}
\ No newline at end of file
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
new file mode 100644
index 0000000..883f003
--- /dev/null
+++ b/dev/scss/header/searchbar.scss
@@ -0,0 +1,109 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 2px;
+
+/**
+ * Input field
+ */
+#q-field {
+  width: 100%;
+  margin: 0;
+  margin-bottom: 3px;
+  display: block;
+}
+
+header input {
+  outline: none;
+  font-size: 11pt;
+  border: $border-size solid $nearly-white;
+  padding: 2px;
+}
+
+#searchbar {
+  position: relative;
+  width: 100%;
+  padding-right: 60px;
+  button[type=submit] {
+    position: absolute;
+    font-weight: normal;
+    @include choose-item;
+    padding: 0;
+    height: 100%;
+    top: 0;
+    right: $right-distance;
+    width: 30px;
+    cursor:pointer;
+    > span:nth-of-type(1) {
+      @include blind;
+    }
+    &::after {
+      font-family: "FontAwesome";
+      content: $fa-search;
+    }
+    border: {
+      width: $border-size;
+      style: solid;
+      color: $nearly-white;
+    }
+    &:hover {
+      @include choose-hover;
+    }
+    &: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;
+  }
+}
+
+/**
+ * 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: '\f096';
+      }
+    }
+  }
+  &:checked + label span { 
+    &:after {
+      content:"\f046";
+    }
+  }
+}
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
new file mode 100644
index 0000000..992fac0
--- /dev/null
+++ b/dev/scss/header/vc.scss
@@ -0,0 +1,250 @@
+@charset "utf-8";
+@import "../util";
+
+$left-padding: 28pt; // 2.8em;
+$border-size: 2px;
+
+.vc {
+  background-color: $light-green;
+  margin-top: 10px;
+  .docGroup {
+    position: relative;
+    display: inline-block;
+    color: $nearly-white;
+
+    margin-left: $left-padding; // 2.8em
+
+    // .6em .5em
+    border-width: 0 (2 * $border-size);
+
+    padding: {
+      top: 10pt;
+      bottom: 2pt;
+      left: 0pt;
+      right: 6pt;
+    }
+
+    border: {
+      radius: $standard-border-radius * 2;
+      style: solid;
+    }
+
+    .docGroup {
+      display: block;
+    }
+
+    > .operators {
+      position: absolute;
+      display: block;
+      top: 10px;
+      vertical-align: middle;
+      left: 3px;
+      border-width: 2px 2px 2px 0;
+      border-top-right-radius: 7px;
+      border-bottom-right-radius: 7px;
+      margin-left: 100%;
+      padding: 0;
+    }
+
+    &:hover {
+      background-color: rgba(255,255,255,.05);
+    }
+
+    &[data-operation=or] {
+      border-color: $dark-orange;
+      > .doc::before,
+      > .docGroup::before {
+	content: "or";
+      }
+      > .operators {
+	border-color: $dark-orange;
+	background-color: $dark-orange;
+	color: $nearly-white;
+      }
+    }
+
+    &[data-operation=and] {
+      > .doc::before,
+      > .docGroup::before {
+	content: "and";
+      }
+    }
+
+    &[data-operation] {
+      > .doc:first-child::before,
+      > .docGroup:first-child::before {
+	content: '';
+      }
+      > .doc::before,
+      > .docGroup::before {
+	display: inline-block;
+	text-align: right;
+//	width: 2.2em;
+	width: $left-padding;
+	color: $dark-green;
+      }
+      > .doc::before {
+	padding-right: 1.2em;
+	margin-right: .1em;
+      }
+      > .docGroup::before {
+	position: absolute;
+      }
+    }
+  }
+
+  .doc {
+    > span + span {
+      margin-left: 5pt;
+    }
+    > span.key,
+    > span.value {
+      font-weight: bold;
+    }
+    > .operators {
+      display: inline-block;
+      border-color: $dark-orange;
+      border-width: 2px 2px 2px 2px;
+      border-radius: 7px;
+
+      margin-left: 10px;
+      > span {
+	&.and {
+	  border: {
+	    radius: inherit;
+	    top-right-radius: 0;
+	    bottom-right-radius: 0;
+	  }
+	  &.delete {
+	    border: {
+	      top-left-radius: 0;
+	      bottom-left-radius: 0;
+	    }
+	  }
+	}
+      }
+    }
+    > 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;
+	font-style: normal;
+	font-weight: normal;
+	content: $fa-rewrite;
+	text-decoration: underline;
+      }
+      span {
+	display: none;
+      }
+    }
+  }
+
+  .operators {
+    opacity: 0;
+    white-space: nowrap;
+    padding: 0;
+    font-size: 0;
+    line-height: 0;
+    color: $light-green;
+    border-color: $nearly-white;
+    text-align: center;
+    font-weight: bold;
+    border-style: solid;
+
+    > span {
+      cursor: pointer;
+      font-size: 9pt;
+      line-height: 1.3em;
+      padding: 0 4px;
+      display: inline-block;
+      &.and {
+	background-color: $nearly-white;
+	color: $light-green;
+      }
+      &.or {
+	background-color: $dark-orange;
+	color: $nearly-white;
+      }
+      &.delete {
+	background-color: red;
+	border-radius: inherit;
+	color: $nearly-white;
+      }
+    }
+  }
+
+  > .docGroup {
+    margin-left: 0;
+  }
+
+
+  .docGroup > .docGroup::before {
+    background-color: red;
+    margin-left: -1 * $left-padding; // -3.4em;
+  }
+
+  .doc, .docGroup {
+    &:hover > .operators {
+      opacity: 1;
+    }
+  }
+
+}
+
+
+/*
+.vc .docGroup[data-operation=and]::before,
+.vc .docGroup[data-operation=and] .operators {
+  background-color: white;
+}
+*/
+
+$dg-index : 30;
+
+.docGroup {
+  > .operators {
+    z-index: $dg-index;
+  }
+  .docGroup {
+    > .operators {
+      z-index: $dg-index + 1;
+    }
+    .docGroup {
+      > .operators {
+	z-index: $dg-index + 2;
+      }
+      .docGroup {
+	> .operators {
+	  z-index: $dg-index + 3;
+	}
+	.docGroup {
+	  > .operators {
+	    z-index: $dg-index + 4;
+	  }
+	  .docGroup {
+	    > .operators {
+	      z-index: $dg-index + 5;
+	    }
+	    .docGroup {
+	      > .operators {
+		z-index: $dg-index + 6;
+	      }
+	    }
+	  }
+	}
+      }
+    }
+  }
+}