diff --git a/dev/demo/vc.html b/dev/demo/vc.html
index 9eb7648..bc8c340 100644
--- a/dev/demo/vc.html
+++ b/dev/demo/vc.html
@@ -21,6 +21,8 @@
   padding: 1em;
   font-family: mono;
 }
+
+
     </style>
   </head>
   <body>
diff --git a/dev/js/src/util.js b/dev/js/src/util.js
index b3bb423..f3df4fc 100644
--- a/dev/js/src/util.js
+++ b/dev/js/src/util.js
@@ -41,6 +41,21 @@
   KorAP.API = KorAP.API || {};
   KorAP.Locale = KorAP.Locale || {};
 
+  var loc = KorAP.Locale;
+  loc.OR  = loc.OR  || 'or';
+  loc.AND = loc.AND || 'and';
+
+  // Add new stylesheet object lazily to document
+  KorAP.newStyleSheet = function () {
+    if (KorAP._sheet === undefined) {
+      var sElem = document.createElement('style');
+      document.head.appendChild(sElem);
+      KorAP._sheet = sElem.sheet;
+    };
+    return KorAP._sheet;
+  };
+
+
   // Default log message
   KorAP.log = KorAP.log || function (type, msg) {
     console.log(type + ": " + msg);
diff --git a/dev/js/src/vc.js b/dev/js/src/vc.js
index 65ac5ca..4598275 100644
--- a/dev/js/src/vc.js
+++ b/dev/js/src/vc.js
@@ -38,13 +38,13 @@
 ], function (unspecDocClass, docClass, docGroupClass) {
   "use strict";
 
+  // ???
   KorAP._validStringMatchRE = new RegExp("^(?:eq|ne|contains|excludes)$");
-  // KorAP._validRegexMatchRE  = new RegExp("^(?:eq|ne)$");
   KorAP._validDateMatchRE   = new RegExp("^[lg]?eq$");
   KorAP._validDateRE        = new RegExp("^(?:\\d{4})(?:-\\d\\d(?:-\\d\\d)?)?$");
-  // KorAP._validGroupOpRE     = new RegExp("^(?:and|or)$");
-  // KorAP._quote              = new RegExp("([\"\\\\])", 'g');
+  KorAP._overrideStyles     = false;
 
+  var loc = KorAP.Locale;
 
   /**
    * Virtual Collection
@@ -54,8 +54,36 @@
       return null;
     },
 
+    _init : function () {
+      if (!KorAP._overrideStyles) {
+	var sheet = KorAP.newStyleSheet();
+
+	// Add css rule for OR operations
+	sheet.insertRule(
+	  '.vc .docGroup[data-operation=or] > .doc::before,' +
+	  '.vc .docGroup[data-operation=or] > .docGroup::before ' +
+	    '{ content: "' + loc.OR + '" }',
+	  0
+	);
+
+	// Add css rule for AND operations
+	sheet.insertRule(
+	  '.vc .docGroup[data-operation=and] > .doc::before,' +
+	  '.vc .docGroup[data-operation=and] > .docGroup::before ' +
+	    '{ content: "' + loc.AND + '" }',
+	  1
+	);
+
+	console.log(sheet);
+
+	KorAP._overrideStyles = true;
+      };
+
+      return this;
+    },
+
     create : function () {
-      return Object.create(this);
+      return Object.create(this)._init();
     },
 
     clean : function () {
@@ -67,7 +95,7 @@
     },
 
     render : function (json) {
-      var obj = Object.create(this);
+      var obj = Object.create(this)._init();
 
       if (json !== undefined) {
 	// Root object
diff --git a/dev/js/src/vc/docgroup.js b/dev/js/src/vc/docgroup.js
index 5e5f010..0db4b4c 100644
--- a/dev/js/src/vc/docgroup.js
+++ b/dev/js/src/vc/docgroup.js
@@ -12,6 +12,8 @@
 
   var _validGroupOpRE = new RegExp("^(?:and|or)$");
 
+  var loc = KorAP.Locale;
+
   var docGroupClass = {
     _ldType : "docGroup",
 
diff --git a/dev/js/src/vc/operators.js b/dev/js/src/vc/operators.js
index 9b0ebd1..91f009f 100644
--- a/dev/js/src/vc/operators.js
+++ b/dev/js/src/vc/operators.js
@@ -4,8 +4,6 @@
 define(['util'], function () {
 
   var loc = KorAP.Locale;
-  loc.AND   = loc.AND   || 'and';
-  loc.OR    = loc.OR    || 'or';
   loc.DEL   = loc.DEL   || '×';
 
 
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 992fac0..c5d7e7e 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -1,99 +1,104 @@
 @charset "utf-8";
 @import "../util";
 
-$left-padding: 28pt; // 2.8em;
+$left-padding: 4em; // 32pt; // 2.8em;
 $border-size: 2px;
+$bracket-size: .4em; // 4pt;
 
+/**
+ * Virtual Collection Builder
+ */
 .vc {
-  background-color: $light-green;
-  margin-top: 10px;
+  margin-top: 4pt;
+
+  /**
+   * Rules for all docGroups
+   */
   .docGroup {
     position: relative;
     display: inline-block;
+    margin-left: $left-padding; // 28pt
+
+    .docGroup { display: 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;
-    }
-
+    padding: 4pt 2pt 4pt 0pt;
     border: {
       radius: $standard-border-radius * 2;
       style: solid;
+      width: 0 $bracket-size; // .6em .5em
     }
 
-    .docGroup {
-      display: block;
+    // Whiten on hover 
+    &:hover {
+      background-color: rgba(255,255,255,.06);
     }
 
+    &[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
+	color: $dark-green;
+      }
+      > .docGroup::before {
+	margin-left: -1 * ($left-padding + .5em) + (-1 * $bracket-size);
+      }
+    }
+
+    // Or operation
+    &[data-operation=or] {
+      border-color: $dark-orange;
+      > .doc::before,
+      > .docGroup::before {
+	// This will be overruled by JS!
+	content: "or";
+      }
+    }
+
+    // And operation
+    &[data-operation=and] {
+      > .doc::before,
+      > .docGroup::before {
+	// This will be overruled by JS!
+	content: "and";
+      }
+    }
+
+
+    /**
+     * All operators on groups
+     */
     > .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;
+      > span:first-child {
+	border: {
+	  top-left-radius: 0;
+	  bottom-left-radius: 0;
+	}
+      }
       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;
-      }
-    }
   }
 
+
+  /**
+   * All document rules
+   */
   .doc {
+    padding-left: $left-padding;
     > span + span {
       margin-left: 5pt;
     }
@@ -101,28 +106,13 @@
     > span.value {
       font-weight: bold;
     }
+
+    /**
+     * All operators on docs
+     */
     > .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;
@@ -139,9 +129,11 @@
       display: inline-block;
       color: $dark-orange;
       &::after {
-	font-family: FontAwesome;
-	font-style: normal;
-	font-weight: normal;
+	font: {
+	  family: FontAwesome;
+	  style: normal;
+	  weight: normal;
+	}
 	content: $fa-rewrite;
 	text-decoration: underline;
       }
@@ -151,36 +143,43 @@
     }
   }
 
+  /**
+   * All operators
+   */
   .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 {
+      box-shadow: $choose-box-shadow;
       cursor: pointer;
       font-size: 9pt;
-      line-height: 1.3em;
+      line-height: 1.5em;
       padding: 0 4px;
       display: inline-block;
-      &.and {
-	background-color: $nearly-white;
-	color: $light-green;
+      @include choose-item;
+      border-style: solid;
+      border-width: $border-size 0;
+      &:hover {
+	@include choose-hover;
       }
-      &.or {
-	background-color: $dark-orange;
-	color: $nearly-white;
+      &:first-child {
+	border: {
+	  left-width: $border-size;
+	  top-left-radius: $standard-border-radius;
+	  bottom-left-radius: $standard-border-radius;
+	}
       }
-      &.delete {
-	background-color: red;
-	border-radius: inherit;
-	color: $nearly-white;
+      &:last-child {
+	border: {
+	  right-width: $border-size;
+	  top-right-radius: $standard-border-radius;
+	  bottom-right-radius: $standard-border-radius;
+	}
       }
     }
   }
@@ -189,12 +188,6 @@
     margin-left: 0;
   }
 
-
-  .docGroup > .docGroup::before {
-    background-color: red;
-    margin-left: -1 * $left-padding; // -3.4em;
-  }
-
   .doc, .docGroup {
     &:hover > .operators {
       opacity: 1;
@@ -204,15 +197,10 @@
 }
 
 
-/*
-.vc .docGroup[data-operation=and]::before,
-.vc .docGroup[data-operation=and] .operators {
-  background-color: white;
-}
-*/
-
+/**
+ * The z-index cascade for groups.
+ */
 $dg-index : 30;
-
 .docGroup {
   > .operators {
     z-index: $dg-index;