diff --git a/dev/demo/css/kwic.css b/dev/demo/css/kwic.css
deleted file mode 100644
index 3942b54..0000000
--- a/dev/demo/css/kwic.css
+++ /dev/null
@@ -1,53 +0,0 @@
-ol {
-  overflow-x: hidden;
-  overflow-y: visible;
-  width: auto;
-  border: 1px solid black;
-  text-indent: 0;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-ol li {
-  display: table-row;
-}
-
-ol li div.left-col {
-  position: relative;
-  display: table-cell;
-  table-layout: fixed;
-  z-index: 5;
-  overflow-y: visible;
-  background-color: green;
-}
-
-div.main-col {
-  position: relative;
-  z-index: 4;
-  display: table-cell;
-}
-
-div.main-col div.snippet div.flag {
-  height: 100%;
-  margin-left: 50%;
-  position: absolute;
-  width: 11px;
-  background-color: red;
-}
-
-ol li div.main-col > div {
-  margin-left: -49999.5%;
-  width: 99999%;
-  overflow-x: hidden;
-  overflow-y: visible;
-  position: relative;
-  box-sizing: border-box;
-}
-
-div.snippet span.first {
-  display: inline-block;
-  width: 50.01%;
-  text-align: right;
-}
-
diff --git a/dev/demo/kwic.html b/dev/demo/kwic.html
index b7f87d2..a120055 100644
--- a/dev/demo/kwic.html
+++ b/dev/demo/kwic.html
@@ -2,31 +2,66 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <link rel="stylesheet" href="css/kwic.css" />
+    <link rel="stylesheet" href="../css/kwic.css" />
   </head>
   <body>
-    <ol>
-      <li>
-        <div class="left-col">GOE/AAA/444</div>
-        <div class="main-col">
-          <div>
-            <div class="snippet">
-              <div class="flag"></div>
-              <span class="first">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span><mark>Hey</mark><span class="second">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span>
+    <div id="search">
+      <ol>
+        <li class="match">
+          <div class="meta">GOE/AAA/444</div>
+          <div class="meta">Goethe</div>
+          <div class="match-main">
+            <div class="match-wrap">
+              <div class="snippet">
+                <div class="flag"></div>
+                <span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span><span class="match">Hey</span><span class="context-right">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span>
+              </div>
+              <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
             </div>
           </div>
-        </div>
-      </li>
-      <li>
-        <div class="left-col">III/AAA/111</div>
-        <div class="main-col">
-          <div>
-            <div class="snippet">
-              <span class="first">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span><mark>Hey</mark><span class="second">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span>
+        </li>
+        <li class="match active">
+          <div class="meta">III/AAA/111</div>
+          <div class="meta">Schiller</div>
+          <div class="match-main">
+            <div class="match-wrap">
+              <div class="snippet">
+                <div class="flag"></div>
+                <span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span><span class="match"><mark>Hey</mark></span><span class="context-right">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span>
+              </div>
+              <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
             </div>
           </div>
-        </div>
-      </li>
-    </ol>
+        </li>
+        <li class="match">
+          <div class="meta">III/AAA/111</div>
+          <div class="meta">Schiller</div>
+          <div class="match-main">
+            <div class="match-wrap">
+              <div class="snippet">
+                <span class="context-left">Der</span><mark>alte</mark><span class="context-right">Baum</span>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ol>
+
+      <ol class="align-right">
+        <li class="match">
+          <div class="meta">GOE/AAA/444</div>
+          <div class="meta">Goethe</div>
+          <div class="match-main">
+            <div class="match-wrap">
+              <div class="snippet">
+                <div class="flag"></div>
+                <span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span><span class="match">Hey</span><span class="context-right">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span>
+              </div>
+              <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
+            </div>
+          </div>
+        </li>
+      </ol>
+
+    </div>
   </body>
 </html>
diff --git a/dev/scss/main/kwic-new.scss b/dev/scss/main/kwic-new.scss
new file mode 100644
index 0000000..6b31a95
--- /dev/null
+++ b/dev/scss/main/kwic-new.scss
@@ -0,0 +1,304 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 2px;
+
+#search {
+  position: relative;
+  margin-bottom: 30px;
+  overflow: visible;
+  &.match {
+    marg-top: 14pt;
+  }
+}
+
+#search > ol {
+  overflow-x: hidden;
+  overflow-y: visible;
+  width: auto;
+  border: 1px solid black;
+  text-indent: 0;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  border: 1px solid $kwic-border;
+  font-size: 10pt;
+
+  > li {
+    display: table-row;
+    table-layout: auto;
+    div.meta {
+      position: relative;
+      display: table-cell;
+      width: init;
+      z-index: 5;
+      overflow-y: visible;
+      background-color: green;
+    }
+  }
+}
+
+#search > ol > li {
+  border: {
+    style: solid;
+    color: $dark-orange;
+    width: 0;
+  }
+}
+
+#search {
+  div.meta, div.match-main {
+    position: relative;
+  }
+  /*
+	    &:not(.active):not(:target) {
+        &:nth-of-type(even) div.main-col {
+ */
+  div.match-main {
+    display: table-cell;
+    z-index: 4;
+    > div.match-wrap {
+      width: 99999%;
+	    margin-left: -49999.5%;
+	    background-color: $kwic-line-noneven;
+	    overflow-x: hidden;
+	    overflow-y: visible;
+	    white-space: no-wrap;
+	    cursor: pointer;
+    }
+  }
+}
+
+#search ol li:nth-of-type(even) div.match-main div.match-wrap {
+  background-color: $kwic-line-even;
+}
+
+
+div.snippet {
+	text-overflow: ellipsis;
+	text-indent: 0;
+	text-shadow: $light-shadow;
+  > span, mark {
+	  padding: 5pt 0 6pt 0;
+    white-space: no-wrap !important;
+    > span {
+      white-space: no-wrap !important;
+    }
+  }
+  > mark, > span.match {
+    font-weight: bold;
+    padding-left: 4pt;
+    padding-right: 2pt;
+  }
+}
+
+
+
+#search div.matchinfo {
+  display: none;
+}
+
+/*
+#search ol > li:focus:not(.active) {
+	      background-color: $dark-orange !important;
+	      &:not(:target) div.flag {
+	        border-right-color: $nearly-white;
+	      }
+	      div.snippet {
+	        color: $nearly-white;
+	        text-shadow: none !important;
+	        .class-3 {
+	          border-color: $nearly-white;
+	        }
+	      }
+      }
+*/
+
+#search div.match-main {
+  position: relative;
+  z-index: 4;
+  > div.match-wrap {
+    margin-left: -49999.5%;
+    width: 99999%;
+    overflow-x: hidden;
+    overflow-y: visible;
+    position: relative;
+    box-sizing: border-box;
+  }
+}
+
+div.snippet.startMore:before,
+div.snippet.endMore:after {
+  content: "…";
+  padding-left: 2pt;
+  padding-right: 2pt;
+}
+
+/**
+ * flag
+ */
+div.snippet div.flag {
+  position: absolute;
+  height: 100%;
+  margin-left: 50%;
+  width: 11px;
+  background-color: $dark-orange;
+  border-right-color: $nearly-white;
+  border-right: 1px solid $darkest-orange;
+}
+
+/**
+ * References
+ */
+#search > ol > li p.ref {
+  display: none;
+}
+
+/**
+ * Active
+ */
+#search > ol {
+  > li.active,
+  > li:target {
+    text-align: left;
+    cursor: normal;
+    position: relative;
+    border-width: 2px;
+    white-space: wrap;
+    height: auto;
+    width: auto;
+  }
+}
+
+#search > ol > li.active {
+  div.match-wrap {
+    min-height: 20pt;
+    div.snippet {
+	    background-color: $light-orange;
+	    > * {
+	      background-color: transparent;
+	    }
+      div.flag {
+        display: none;
+      }
+	    padding: 2pt 0 5pt 5pt;
+	    margin: {
+	      top: 0;
+	      right: $right-match-distance; // 3em;
+	      bottom: 0;
+	      left: 0; // 5pt margin-top
+	    }
+	    > span {
+        color: black;
+        line-height: 1.4em;
+        width: auto;
+        &.context-left {
+          margin-left: 0;
+          display: inline;
+          overflow: visible;
+          text-align: left;
+          width: auto;
+        }
+	    }
+    }
+  }
+}
+
+#search > ol > li.active {
+  overflow: hidden;
+  div.meta {
+    overflow: none;
+  }
+  div.match-main {
+    div.match-wrap {
+      width: auto;
+      margin-left: 0;
+      overflow-x: visible;
+      white-space: wrap;
+    }
+  }
+  p.ref {
+    display: block;
+	  color: white;
+	  padding: 3pt 10pt 3pt 3pt;
+	  padding-right: $right-match-distance;
+	  margin: 0pt;
+	  width: 100%;
+	  bottom: 0;
+	  z-index: 30;
+	  > span.sigle {
+	    font-size: 75%;
+	    vertical-align: top;
+	    color: $light-orange;
+	    float: right;
+	  }
+  }
+}
+    
+
+
+/**
+ * Right aligned
+ */
+
+#search ol span.context-left {
+  display: inline-block;
+  width: 50.01%;
+  text-align: right;
+}
+
+#search ol.align-right {
+  text-align: right;
+  div.match-main span.context-right {
+    display: inline-block;
+    width: 49.915%;
+    text-align: left;
+  }
+}
+
+
+/**
+ * Highlights
+ */
+mark {
+  background-color: inherit;
+  color: inherit;
+}
+
+mark > mark,
+em,
+.level-0 {
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+  padding-bottom: 0px;
+  font-style: normal;
+}
+
+mark > mark > mark,
+em > em,
+.level-1 {
+  padding-bottom: 3px;
+}
+
+mark > mark > mark > mark,
+em > em > em,
+.level-2 {
+  padding-bottom: 6px;
+}
+
+
+#search > ol > li {
+  &:not(.active) mark > mark > mark > mark,
+  &:not(.active) em > em > em {
+    line-height: 180%;
+  }
+  &.active mark > mark > mark > mark,
+  &.active em > em > em {
+    line-height: 250%;
+  }
+}
+
+.class-1 { border-color: $kwic-highlight-1; }
+.class-2 { border-color: $kwic-highlight-2; }
+.class-3 { border-color: $kwic-highlight-3; }
+.class-4 { border-color: $kwic-highlight-4; }