Update to API v0.1
diff --git a/public/sass/kwic-4.0.scss b/public/sass/kwic-4.0.scss
new file mode 100644
index 0000000..8a16289
--- /dev/null
+++ b/public/sass/kwic-4.0.scss
@@ -0,0 +1,220 @@
+@charset "utf-8";
+
+$fonts: verdana, tahoma, arial;
+
+@import "colors";
+
+@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+ */
+}
+
+
+/*
+ Search for: [orth=erstens]
+*/
+
+ol {
+ width: auto;
+ overflow: hidden;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ text-indent: 0;
+ border: 1px solid $kwic-border;
+ font: {
+ family: $fonts;
+ size: 10pt;
+ }
+ text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
+ > li {
+ border: {
+ style: solid;
+ color: #ffa500;
+ width: 0;
+ }
+ &:not(.active):not(:target) {
+ width: 99999%;
+ margin-left: -49999.5%;
+ background-color: $kwic-line-noneven;
+ overflow: hidden;
+ white-space: no-wrap;
+ cursor: pointer;
+ padding: 5pt 0 6pt 0;
+ text-indent: 0;
+ &:nth-of-type(even) {
+ background-color: $kwic-line-even;
+ }
+ }
+ > div {
+ > div.snippet > span {
+ white-space: no-wrap !important;
+ > span {
+ white-space: no-wrap !important;
+ }
+ color: #666;
+ &.match {
+ font-weight: bold;
+ text-shadow: $kwic-match-shadow;
+ color: $kwic-match-color;
+ padding-left: 4pt;
+ padding-right: 2pt;
+ }
+ }
+ }
+ }
+}
+
+ol.free-aligned > li:not(.active):not(:target) > div > div.snippet > span.left {
+ display: inline-block;
+ text-align: right;
+ width: 50.046%;
+}
+
+ol.free-aligned > li:not(.active):not(:target) > div > div.snippet > span.separator {
+ width: 0px;
+ height: 1em;
+ margin-bottom: -2px;
+ display: inline-block;
+ line-height: 100%;
+ border: 1px solid #009EE0;
+ margin-left: 2px;
+ margin-right: 2px;
+}
+
+ol.free-aligned > li > div > div.snippet > span.right {
+ text-align: left;
+}
+
+ol.left-aligned > li > div > div.snippet > span.context-left {
+ display: inline-block;
+ text-align: right;
+ width: 50.01%;
+}
+
+ol.right-aligned {
+ text-align: right;
+ > li:not(.active):not(:target) > div > div.snippet > span.context-right {
+ display: inline-block;
+ text-align: left;
+ width: 49.915%;
+ }
+}
+
+/* Highlights */
+em, em.level-0 {
+ border-bottom-width: 2px;
+ border-bottom-style: solid;
+ padding-bottom: 0px;
+ font-style: normal;
+}
+
+em > em, em.level-1 {
+ padding-bottom: 3px;
+}
+
+em > em > em, em.level-2 {
+ padding-bottom: 6px;
+}
+
+.class-0 { border-color: $kwic-highlight-0; }
+.class-1 { border-color: $kwic-highlight-1; }
+.class-2 { border-color: $kwic-highlight-2; }
+
+
+span.more:before {
+ content: "…";
+ padding-left: 2pt;
+ padding-right: 2pt;
+}
+
+/* active view */
+ol > li.active,
+ol > li:target {
+ text-align: left;
+ width: auto;
+ cursor: normal;
+ white-space: wrap;
+ height: auto;
+ border-width: 2px;
+ background-color: $light-orange;
+ position: relative;
+ > div {
+ min-height: 42pt;
+ > div.snippet {
+ margin: 5pt 10pt;
+ margin-right: 3em;
+ > span {
+ line-height: 1.4em;
+ width: auto;
+ &.context-left {
+ margin-left: 0;
+ display: inline;
+ overflow: visible;
+ text-align: left;
+ width: auto;
+ }
+ }
+ }
+ }
+}
+
+/* Actions */
+ol > li {
+ ul.action {
+ display: none;
+ > li {
+ cursor: pointer;
+ color: white;
+ text-decoration: none;
+ }
+ }
+ /* active actions */
+ &.active, &:target {
+ ul.action {
+ background-color: $dark-orange;
+ font-size: 12pt;
+ color: white;
+ text: {
+ shadow: none;
+ indent: 0;
+ }
+ display: block;
+ margin: 0;
+ padding: 0;
+ z-index: 4;
+ list-style: {
+ type: none;
+ position: inline;
+ }
+ &.right {
+ position: absolute;
+ float: right;
+ text-align: center;
+ padding: 0pt 3pt;
+ height: 100%;
+ width: 1.2em;;
+ right: 0;
+ top: 0;
+ }
+ }
+ }
+ &:not(.active):not(:target) p {
+ display: none;
+ }
+ &.active p, &:target p {
+ @include box-sizing-box();
+ padding-right: 2em;
+ background-color: $dark-orange;
+ color: white;
+ text-shadow: none;
+ padding: 3pt 10pt;
+ margin: 0pt;
+ width: 100%;
+ bottom: 0;
+ z-index: 300;
+ }
+}
+
+