commit 9935f385214ee2e4d599497be2fba5ead2bb18e0
Author: Hans Peter Schlaepfer <hanspeter.schlaepfer@revamp-it.ch>
Date:   Fri Jan 4 05:33:30 2019 +0100

    Neues kivitendo Design neues Verzeichnis css/developement

diff --git a/css/developement/anleitung.html b/css/developement/anleitung.html
new file mode 100644
index 000000000..7a92a0574
--- /dev/null
+++ b/css/developement/anleitung.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <link href="../style.css" rel="stylesheet">
+  <title>Kivitendo-Design: Anleitung &amp; Grundsätze</title>
+</head>
+<body class="developing">
+<header>
+  <h1>Anleitung und Grunsätze</h1>
+	<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
+</header>
+<div class="wrapper">
+  <h2>Grundregeln</h2>
+
+<h3>INPUT-Tag:</h3>
+	<p>Da das INPUT-Element sehr vielseitig ist und via CSS das TYPE-Attribut abgefangen werden kann, muss dieses <b>TYPE-Attribut zwingend</b> mit den reservierten Begriffen gesetzt sein, da Webbrowser mitsamt ihrer CSS-Fähigkeiten das Fehlen missinterpretieren können. Standard ist TEXT, im weiteren dürfen vorerst SUBMIT, RESET, CHECKBOX und RADIO verwendet werden. Fehlt dieses Attribut oder wird ein ungehöriges gesetzt, wird das Feld vom Browser nicht korrekt dargestellt.</p>
+	<p>Korrekt: <code>&lt;input type="text" name="name" id="name"&gt;</code><br>Falsch:&nbsp; <code>&lt;input name="name" id="name"&gt;</code> (häufig aufgetreten)<p>
+	<h3>H1 (Header 1):</h3><p>Dieses Element sollte nur <b>einmal pro Seite</b> eingesetzt werden, und zwar einzig für den Seitentitel. Zudem sollte dieses Attribut <b>gleich zu Beginn der Template-Datei</b> gesetzt werden, und nicht innerhalb eines Formular- oder Wrapper-Elements. Das unkorrekte Setzen dieses Elements ist zwar durch den CSS-Code abgefangen, die Darstellung könnte aber in solchen Fällen nicht den Vorstellungen entsprechen.</p>
+
+
+</div>
+</body>
+</html>
diff --git a/css/developement/farben-demo.css b/css/developement/farben-demo.css
new file mode 100644
index 000000000..ec76f5f29
--- /dev/null
+++ b/css/developement/farben-demo.css
@@ -0,0 +1,234 @@
+.gray-darker {
+  background-color: #222222;
+}
+.gray-dark {
+  background-color: #555555;
+}
+.gray-mediumdark {
+  background-color: #666666;
+}
+.gray {
+  background-color: #888888;
+}
+.gray-medium {
+  background-color: #aaaaaa;
+}
+.gray-light {
+  background-color: #cfcfcf;
+}
+.gray-lighter {
+  background-color: #dedede;
+}
+.gray-morelighter {
+  background-color: #e0e0e0;
+}
+.gray-verylight {
+  background-color: #ececec;
+}
+.gray-superlight {
+  background-color: #efefef;
+}
+.color-red-strong {
+  background-color: #ae0014;
+}
+.color-red-light {
+  background-color: #ffd6d6;
+}
+.color-green-strong {
+  background-color: #088604;
+}
+.color-green-light {
+  background-color: #c9ee8e;
+}
+.color-blue-strong {
+  background-color: #209ec8;
+}
+.color-blue-light {
+  background-color: #b6e6e5;
+}
+.color-orange-strong {
+  background-color: #6d613e;
+}
+.color-orange-light {
+  background-color: #f6d972;
+}
+.rainbow-green {
+  background-color: #408000;
+}
+.rainbow-blue {
+  background-color: #0080ff;
+}
+.rainbow-red {
+  background-color: #ff0000;
+}
+.rainbow-yellow {
+  background-color: #ffff00;
+}
+.brand-primary {
+  background-color: #000000;
+}
+.brand-label {
+  background-color: #888888;
+}
+.brand-label-bg {
+  background-color: #dedede;
+}
+.brand-info {
+  background-color: #209ec8;
+}
+.brand-info-bg {
+  background-color: #b6e6e5;
+}
+.brand-ok {
+  background-color: #088604;
+}
+.brand-ok-bg {
+  background-color: #c9ee8e;
+}
+.brand-warning {
+  background-color: #6d613e;
+}
+.brand-warning-bg {
+  background-color: #f6d972;
+}
+.brand-error {
+  background-color: #ae0014;
+}
+.brand-error-bg {
+  background-color: #ffd6d6;
+}
+.brand-positive {
+  background-color: #088604;
+}
+.brand-positive-bg {
+  background-color: #c9ee8e;
+}
+.brand-negative {
+  background-color: #ae0014;
+}
+.brand-negative-bg {
+  background-color: #ffd6d6;
+}
+.button-strong {
+  background-color: #000000;
+}
+.button-strong-bg {
+  background-color: #cfcfcf;
+}
+.button-strong-border {
+  background-color: #cfcfcf;
+}
+.button-strong-hover {
+  background-color: #000000;
+}
+.button-strong-hover-bg {
+  background-color: #cfcfcf;
+}
+.button-strong-hover-border {
+  background-color: #cfcfcf;
+}
+.button-strong-active {
+  background-color: #000000;
+}
+.button-strong-active-bg {
+  background-color: #cfcfcf;
+}
+.button-strong-active-border {
+  background-color: #cfcfcf;
+}
+.button-soft {
+  background-color: #555555;
+}
+.button-soft-bg {
+  background-color: #ececec;
+}
+.button-soft-border {
+  background-color: #ececec;
+}
+.button-soft-hover {
+  background-color: #555555;
+}
+.button-soft-hover-bg {
+  background-color: #ececec;
+}
+.button-soft-hover-border {
+  background-color: #ececec;
+}
+.button-soft-active {
+  background-color: #555555;
+}
+.button-soft-active-bg {
+  background-color: #ececec;
+}
+.button-soft-active-border {
+  background-color: #ececec;
+}
+.body-bg {
+  background-color: #efefef;
+}
+.content-bg {
+  background-color: #ffffff;
+}
+.tabs-bg {
+  background-color: #efefef;
+}
+.heading-bg {
+  background-color: #cfcfcf;
+}
+.controlpanel-bg {
+  background-color: #e0e0e0;
+}
+.text-color {
+  background-color: #000000;
+}
+.heading-color {
+  background-color: #888888;
+}
+.caption-color {
+  background-color: #888888;
+}
+#demo h1,
+#demo h2 {
+  clear: both;
+  color: #888888 !important;
+  padding: 0 ;
+  margin: 0 ;
+}
+#demo h1 {
+  font-size: 14pt;
+  padding-top: 1.0em ;
+}
+#demo h2 {
+  font-size: 12pt;
+  margin-top: 0.2em ;
+}
+#demo div.selector {
+  display: block ;
+  width: 8.0em ;
+  float: left ;
+  margin: 0 1.0em 0 0 ;
+  overflow: hidden ;
+  padding: 0 ;
+}
+#demo div.selector h3 {
+  color: #888888 !important;
+  font-size: 9pt;
+  font-weight: normal;
+  height: 2.8em ;
+  display: table-cell;
+  vertical-align: bottom ;
+}
+#demo div.selector div.color {
+  width: 8.0em ;
+  height: 8.0em ;
+  display: block;
+  overflow: hidden ;
+  padding: 0 ;
+  margin: 0;
+  border: 1px #000 solid ;
+}
+#demo .group {
+  display: inline-block;
+  float: left;
+  overflow: hidden ;
+}
diff --git a/css/developement/farben-demo.html b/css/developement/farben-demo.html
new file mode 100644
index 000000000..65619f731
--- /dev/null
+++ b/css/developement/farben-demo.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <link href="../style.css" rel="stylesheet">
+  <link href="farben-demo.css" rel="stylesheet">
+  <title>Kommunikation mit Farben in Kivitendo</title>
+
+  <script type="text/javascript" src="../../js/jquery.js"></script>
+  <script type="text/javascript" src="../../js/common.js"></script>
+  <script type="text/javascript" src="../../js/namespace.js"></script>
+  <script type="text/javascript" src="../../js/kivi.js"></script>
+  <script type="text/javascript" src="../../js/locale/de.js"></script>
+  <script type="text/javascript" src="../../js/jquery-ui.js"></script>
+  <script type="text/javascript" src="../../js/kivi.QuickSearch.js"></script>
+  <script type="text/javascript" src="../../js/kivi.ActionBar.js"></script>
+  <script type="text/javascript" src="../../js/kivi.Draft.js"></script>
+  <script type="text/javascript" src="../../js/kivi.File.js"></script>
+  <script type="text/javascript" src="../../js/kivi.SalesPurchase.js"></script>
+  <script type="text/javascript" src="../../js/kivi.Part.js"></script>
+  <script type="text/javascript" src="../../js/ckeditor/ckeditor.js"></script>
+  <script type="text/javascript" src="../../js/ckeditor/adapters/jquery.js"></script>
+  <script type="text/javascript" src="../../js/kivi.io.js"></script>
+  <script type="text/javascript" src="../../js/client_js.js"></script>
+  <script type="text/javascript" src="../../js/jquery.cookie.js"></script>
+  <script type="text/javascript" src="../../js/jquery.checkall.js"></script>
+  <script type="text/javascript" src="../../js/jquery.download.js"></script>
+  <script type="text/javascript" src="../../js/jquery/jquery.form.js"></script>
+  <script type="text/javascript" src="../../js/jquery/fixes.js"></script>
+  <script type="text/javascript" src="../../js/jquery/jquery.tooltipster.min.js"></script>
+  <script type="text/javascript" src="../../js/jquery/ui/i18n/jquery.ui.datepicker-de.js"></script>
+</head>
+<body class="developing">
+<header>
+	<h1>Anzeige aller Farben in Kivitendo</h1>
+	<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
+</header>
+<div class="wrapper" id="demo">
+<!--
+For creating the blocks from the less-code use following grep:
+\.([a-z-]+)[ ]*\{[^\n]+      replace with
+<div class="selector"><h3>\1</h3><div class="color \1"></div></div>     or
+<div class="selector"><h3>$1</h3><div class="color $1"></div></div>
+-->
+
+<h1>more brown</h1>
+<div class="selector"><h3>.gray-darker</h3><div class="color gray-darker"></div></div>
+<div class="selector"><h3>.gray-dark</h3><div class="color gray-dark"></div></div>
+<div class="selector"><h3>.gray-mediumdark</h3><div class="color gray-mediumdark"></div></div>
+<div class="selector"><h3>.gray</h3><div class="color gray"></div></div>
+<div class="selector"><h3>.gray-medium</h3><div class="color gray-medium"></div></div>
+<div class="selector"><h3>.gray-light</h3><div class="color gray-light"></div></div>
+<div class="selector"><h3>.gray-lighter</h3><div class="color gray-lighter"></div></div>
+<div class="selector"><h3>.gray-morelighter</h3><div class="color gray-morelighter"></div></div>
+<div class="selector"><h3>.gray-verylight</h3><div class="color gray-verylight"></div></div>
+<div class="selector"><h3>.gray-superlight</h3><div class="color gray-superlight"></div></div>
+
+<h1>Divers Color Specications</h1>
+<div class="group">
+<h2>ok</h2>
+<div class="selector"><h3>.color-green-strong</h3><div class="color color-green-strong"></div></div>
+<div class="selector"><h3>.color-green-light</h3><div class="color color-green-light"></div></div>
+</div>
+<div class="group">
+<h2>error</h2>
+<div class="selector"><h3>.color-red-strong</h3><div class="color color-red-strong"></div></div>
+<div class="selector"><h3>.color-red-light</h3><div class="color color-red-light"></div></div>
+</div>
+<div class="group">
+<h2>info/hint</h2>
+<div class="selector"><h3>.color-blue-strong</h3><div class="color color-blue-strong"></div></div>
+<div class="selector"><h3>.color-blue-light</h3><div class="color color-blue-light"></div></div>
+</div>
+<div class="group">
+<h2>warning</h2>
+<div class="selector"><h3>.color-orange-strong</h3><div class="color color-orange-strong"></div></div>
+<div class="selector"><h3>.color-orange-light</h3><div class="color color-orange-light"></div></div>
+</div>
+
+
+<h2>divers</h2>
+<div class="selector"><h3>.rainbow-green</h3><div class="color rainbow-green"></div></div>
+<div class="selector"><h3>.rainbow-blue</h3><div class="color rainbow-blue"></div></div>
+<div class="selector"><h3>.rainbow-red</h3><div class="color rainbow-red"></div></div>
+<div class="selector"><h3>.rainbow-yellow</h3><div class="color rainbow-yellow"></div></div>
+
+<h1>Brand colors</h1>
+
+<h2>Text (Label & data)</h2>
+<div class="selector"><h3>.brand-primary</h3><div class="color brand-primary"></div></div>
+<div class="selector"><h3>.brand-label</h3><div class="color brand-label"></div></div>
+<div class="selector"><h3>.brand-label-bg</h3><div class="color brand-label-bg"></div></div>
+
+<h1>Messages & info types</h1>
+<div class="selector"><h3>.brand-ok</h3><div class="color brand-ok"></div></div>
+<div class="selector"><h3>.brand-ok-bg</h3><div class="color brand-ok-bg"></div></div>
+
+<div class="selector"><h3>.brand-error</h3><div class="color brand-error"></div></div>
+<div class="selector"><h3>.brand-error-bg</h3><div class="color brand-error-bg"></div></div>
+
+<div class="selector"><h3>.brand-info</h3><div class="color brand-info"></div></div>
+<div class="selector"><h3>.brand-info-bg</h3><div class="color brand-info-bg"></div></div>
+
+<div class="selector"><h3>.brand-warning</h3><div class="color brand-warning"></div></div>
+<div class="selector"><h3>.brand-warning-bg</h3><div class="color brand-warning-bg"></div></div>
+
+<h1>Positive & negative colors</h1>
+<div class="selector"><h3>.brand-positive</h3><div class="color brand-positive"></div></div>
+<div class="selector"><h3>.brand-positive-bg</h3><div class="color brand-positive-bg"></div></div>
+<div class="selector"><h3>.brand-negative</h3><div class="color brand-negative"></div></div>
+<div class="selector"><h3>.brand-negative-bg</h3><div class="color brand-negative-bg"></div></div>
+
+
+<h1>Buttons</h1>
+<h2>Button with manipulation (submit etc.)</h2>
+<div class="selector"><h3>.button-strong</h3><div class="color button-strong"></div></div>
+<div class="selector"><h3>.button-strong-bg</h3><div class="color button-strong-bg"></div></div>
+<div class="selector"><h3>.button-strong-border</h3><div class="color button-strong-border"></div></div>
+<div class="selector"><h3>.button-strong-hover</h3><div class="color button-strong-hover"></div></div>
+<div class="selector"><h3>.button-strong-hover-bg</h3><div class="color button-strong-hover-bg"></div></div>
+<div class="selector"><h3>.button-strong-hover-border</h3><div class="color button-strong-hover-border"></div></div>
+<div class="selector"><h3>.button-strong-active</h3><div class="color button-strong-active"></div></div>
+<div class="selector"><h3>.button-strong-active-bg</h3><div class="color button-strong-active-bg"></div></div>
+<div class="selector"><h3>.button-strong-active-border</h3><div class="color button-strong-active-border"></div></div>
+<h2>button withoud data manipulation (reset, cancel, open, show etc.)</h2>
+<div class="selector"><h3>.button-soft</h3><div class="color button-soft"></div></div>
+<div class="selector"><h3>.button-soft-bg</h3><div class="color button-soft-bg"></div></div>
+<div class="selector"><h3>.button-soft-border</h3><div class="color button-soft-border"></div></div>
+<div class="selector"><h3>.button-soft-hover</h3><div class="color button-soft-hover"></div></div>
+<div class="selector"><h3>.button-soft-hover-bg</h3><div class="color button-soft-hover-bg"></div></div>
+<div class="selector"><h3>.button-soft-hover-border</h3><div class="color button-soft-hover-border"></div></div>
+<div class="selector"><h3>.button-soft-active</h3><div class="color button-soft-active"></div></div>
+<div class="selector"><h3>.button-soft-active-bg</h3><div class="color button-soft-active-bg"></div></div>
+<div class="selector"><h3>.button-soft-active-border</h3><div class="color button-soft-active-border"></div></div>
+
+
+<h1>SCAFFOLDING</h1>
+<div class="selector"><h3>.body-bg</h3><div class="color body-bg"></div></div>
+<div class="selector"><h3>.content-bg</h3><div class="color content-bg"></div></div>
+<div class="selector"><h3>.tabs-bg</h3><div class="color tabs-bg"></div></div>
+<div class="selector"><h3>.heading-bg</h3><div class="color heading-bg"></div></div>
+<div class="selector"><h3>.controlpanel-bg</h3><div class="color controlpanel-bg"></div></div>
+
+<div class="selector"><h3>.text-color</h3><div class="color text-color"></div></div>
+<div class="selector"><h3>.heading-color</h3><div class="color heading-color"></div></div>
+<div class="selector"><h3>.caption-color</h3><div class="color caption-color"></div></div>
+
+
+
+
+</div>
+</body>
+</html>
diff --git a/css/developement/farben.html b/css/developement/farben.html
new file mode 100644
index 000000000..2a5de7664
--- /dev/null
+++ b/css/developement/farben.html
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <link href="../style.css" rel="stylesheet">
+  <title>Kommunikation mit Farben in Kivitendo</title>
+
+  <script type="text/javascript" src="../../js/jquery.js"></script>
+  <script type="text/javascript" src="../../js/common.js"></script>
+  <script type="text/javascript" src="../../js/namespace.js"></script>
+  <script type="text/javascript" src="../../js/kivi.js"></script>
+  <script type="text/javascript" src="../../js/locale/de.js"></script>
+  <script type="text/javascript" src="../../js/jquery-ui.js"></script>
+  <script type="text/javascript" src="../../js/kivi.QuickSearch.js"></script>
+  <script type="text/javascript" src="../../js/kivi.ActionBar.js"></script>
+  <script type="text/javascript" src="../../js/kivi.Draft.js"></script>
+  <script type="text/javascript" src="../../js/kivi.File.js"></script>
+  <script type="text/javascript" src="../../js/kivi.SalesPurchase.js"></script>
+  <script type="text/javascript" src="../../js/kivi.Part.js"></script>
+  <script type="text/javascript" src="../../js/ckeditor/ckeditor.js"></script>
+  <script type="text/javascript" src="../../js/ckeditor/adapters/jquery.js"></script>
+  <script type="text/javascript" src="../../js/kivi.io.js"></script>
+  <script type="text/javascript" src="../../js/autocomplete_customer.js"></script>
+  <script type="text/javascript" src="../../js/client_js.js"></script>
+  <script type="text/javascript" src="../../js/jquery.cookie.js"></script>
+  <script type="text/javascript" src="../../js/jquery.checkall.js"></script>
+  <script type="text/javascript" src="../../js/jquery.download.js"></script>
+  <script type="text/javascript" src="../../js/jquery/jquery.form.js"></script>
+  <script type="text/javascript" src="../../js/jquery/fixes.js"></script>
+  <script type="text/javascript" src="../../js/jquery/jquery.tooltipster.min.js"></script>
+  <script type="text/javascript" src="../../js/jquery/ui/i18n/jquery.ui.datepicker-de.js"></script>
+
+</head>
+<body class="developing">
+<header>
+	<h1>Bedeutung &amp; Anwendung von Farben in Kivitendo</h1>
+	<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
+</header>
+<div class="wrapper">
+<h2>Buttons</h2>
+<form action="#">
+<h3>Formular absenden (Datenmanipulation, unwiderrufbar)</h3>
+<p>Diese Buttons starten den Versand der Formulardaten an den Server (Submit). Aus diesem Grunde sind diese entsprechend prominent eingefärbt.</p>
+<div class="buttons">
+<table>
+  <tbody>
+    <tr>
+      <td><input type="submit" value="Absenden" class="wi-small"></td>
+      <td><input type="submit" value="Absenden" class="hover wi-small"></td>
+      <td><input type="submit" value="Absenden" class="active wi-small"></td>
+      <td>(INPUT[type=submit])</td>
+    </tr>
+    <tr>
+      <td><input type="button" value="Absenden" class="wi-small"></td>
+      <td><input type="button" value="Absenden" class="hover wi-small"></td>
+      <td><input type="button" value="Absenden" class="active wi-small"></td>
+      <td>(INPUT[type=button])</td>
+    </tr>
+    <tr>
+      <td><button type="button" class=" wi-small">Speichern</button></td>
+      <td><button type="button" class="hover wi-small">Speichern</button></td>
+      <td><button type="button" class="active wi-small">Speichern</button></td>
+      <td>(BUTTON)</td>
+    </tr>
+    <tr>
+      <td><a href="#" class="button wi-small">Absenden</a></td>
+      <td><a href="#" class="button hover wi-small">Absenden</a></td>
+      <td><a href="#" class="button active wi-small">Absenden</a></td>
+      <td>(A.button-Tag)</td>
+    </tr>
+  </tbody>
+</table>
+</div><!-- ./buttons -->
+
+<h3>Navigation &amp; User Interface</h3>
+<p>Diese Buttons dienen zur Bedienung der grafischen Benutzer-Schnittstelle im Client und verursachen KEINE unwiderrufliche Datenmanipulationen auf Seiten des Servers.<br>Aus diesem Grunde wird die Klasse <b>«.neutral»</b> bereitgestellt.</p>
+<div class="buttons">
+<table>
+  <tbody>
+    <tr>
+      <td><input type="reset" value="Zurücksetzen" class="neutral wi-normal"></td>
+      <td><input type="reset" value="Zurücksetzen" class="neutral-hover wi-normal"></td>
+      <td><input type="reset" value="Zurücksetzen" class="neutral-active wi-normal"></td>
+      <td>(INPUT[submit].neutral-Tag)</td>
+    </tr>
+    <tr>
+      <td><button class="neutral wi-normal">Details anzeigen</button></td>
+      <td><button class="neutral-hover wi-normal">Details anzeigen</button></td>
+      <td><button class="neutral-active wi-normal">Details anzeigen</button></td>
+      <td>(BUTTON.neutral-Tag)</td>
+    </tr>
+    <tr>
+      <td><a href="#" class="button neutral wi-normal">Filter anzeigen</a></td>
+      <td><a href="#" class="button neutral-hover wi-normal">Filter anzeigen</a></td>
+      <td><a href="#" class="button neutral-active wi-normal">Filter anzeigen</a></td>
+      <td>(A.button.neutral-Tag)</td>
+    </tr>
+  </tbody>
+</table>
+</div><!-- ./buttons -->
+</form>
+
+<h2>Nachrichten (Messages)</h2>
+<p>Es gibt zwei ggf. sogar drei Message-<b>Container-Varianten</b> in Kivitendo:</p>
+<ul>
+	<li>Flash_Messages</li>
+	<li>Old_Style</li>
+</ul>
+<p>Dann gibt es mind. 4 <b>Message-Arten</b>:</p>
+<ul>
+	<li>Error</li>
+	<li>Warning</li>
+	<li>Info oder Hint</li>
+	<li>OK</li>
+</ul>
+<p>Nachfolgend werden jeweils zuerst die komplexen Flash-Messages, dann die einfachen Old Style-Messages in P- & DIV-Containern aufgeführt.</p>
+
+
+<h3>Error</h3>
+
+<p>Fehlermeldung, die ein Grund zur Sorge sein sollten. Diese Nachrichten-Art nur in schwerwiegenden Fällen einsetzen, damit der Benutzer sofort erkennt, dass was schiefgelaufen ist.</p>
+<div id="flash_error" class="flash_message flash_message_error">
+<div class="button-container">
+	<a href="#flash_error" style="float:right" class="icon-close button wi-tiny">✕</a>
+  <span id="flash_error_disp" class="display" style="float:left;">
+    <a href="#flash_error" style="float:left;" onclick="$('#flash_detail_error').toggle();" class="button wi-tiny">Details</a>
+  </span>
+</div>
+<div class="message-container">
+	<span class="flash_title" style="float:left;">Fehler:</span>
+	<div class="flash_notification" style="float:left;">
+		<span id="flash_error_content" class="content">Es ist ein schwerwiegender Fehler aufgetreten!</span>
+		<div id="flash_detail_error" class="detail" style="display:none;">
+			<span id="flash_error_detail">Details zum aufgetretenen, schwerwiegenden Fehler. Hierbei handelt es sich aber nicht um einen Rechtschreibefehler.</span>
+			<a href="#flash_error" style="float:left" onclick="$('#flash_detail_error').hide()" class="icon-close button wi-tiny">✕</a>
+    </div>
+	</div>
+</div>
+</div>
+<p class="message message_error">Es ist ein Fehler aufgetreten! (P.message_error)</p>
+<div class="message message_error">Es ist ein Fehler aufgetreten! (DIV.message_error)</div>
+
+
+<h3>Warning</h3>
+
+<p>Wichtige Mitteilung, die aber kein Grund zur Sorge geben sollte. Diese Nachricht unterstützt den Benutzer bei kritischen Prozessen, sollte ihn aber bei täglichem Einsatz nicht von der Arbeit abhalten.</p>
+<div id="flash_warning" class="flash_message flash_message_warning">
+<div class="button-container">
+	<a href="#flash_warning" style="float:right" class="icon-close button wi-tiny">✕</a>
+  <span id="flash_warning_disp" class="display" style="float:left;">
+    <a href="#flash_warning" style="float:left;" onclick="$('#flash_detail_warning').toggle();" class="button wi-tiny">Details</a>
+  </span>
+</div>
+<div class="message-container">
+	<span class="flash_title" style="float:left;">Warnung:</span>
+	<div class="flash_notification" style="float:left;">
+		<span id="flash_warning_content" class="content">Diesen Hinweis sollten Sie ernst nehmen, aber es besteht beim Lesen noch kein Grund zur Beunruhigung.</span>
+		<div id="flash_detail_warning" class="detail" style="display:none;">
+			<span id="flash_warning_detail">Sie sollten diesen Hinweis ernst nehmen, und vielleicht kommt er Ihnen auch hinlänglich bekannt vor, sodass Sie wissen, wie Sie damit umzugehen haben. Sie sollten sich darüber im Klaren sein, was diese Warnung bedeutet.</span>
+			<a href="#flash_warning" style="float:left" onclick="$('#flash_detail_warning').hide()" class="icon-close button wi-tiny">✕</a>
+    </div>
+	</div>
+</div>
+</div>
+<p class="message message_warning">Achtung, wichtiger Hinweis! (P.message_warning)</p>
+<div class="message message_warning">Achtung, wichtiger Hinweis! (DIV.message_warning)</div>
+
+
+<h3>Info / Hint</h3>
+
+<p>Hier handelt es sich eher um neutrale, ggf. zu ignorierende Routine-Nachrichten, die den Benutzer auch eine gewisse Sicherheit geben sollten. Nicht im Übermass einsetzen, da die Benutzer das Kivitendo-System u.U. täglich bedienen müssen.</p>
+<div id="flash_info" class="flash_message flash_message_info">
+<div class="button-container">
+	<a href="#flash_info" style="float:right" class="icon-close button wi-tiny">✕</a>
+  <span id="flash_info_disp" class="display" style="float:left;">
+    <a href="#flash_info" style="float:left;" onclick="$('#flash_detail_info').toggle();" class="button wi-tiny"> Details </a>
+  </span>
+</div>
+<div class="message-container">
+	<span class="flash_title" style="float:left;">Information:</span>
+	<div class="flash_notification" style="float:left;">
+		<span id="flash_info_content" class="content">Absolut kein Grund zur Beunruhigung, aber lesen sollten Sie die Nachricht vielleicht einmal in Ihrem Leben.</span>
+		<div id="flash_detail_info" class="detail" style="display:none;">
+			<span id="flash_info_detail">Manchmal ist es einfacher, solche Nachrichten zu lesen als gleich das Manual durchrackern zu müssen, was sowieso nur wenige Prozent der Kivitendo-Nutzer machen, ausser eben die karrierebewussten Anwender oder die innerbetrieblich Verantwortlichen.</span>
+			<a href="#flash_info" style="float:left" onclick="$('#flash_detail_info').hide()" class="icon-close button wi-tiny">✕</a>
+    </div>
+	</div>
+</div>
+</div>
+<p class="message message_hint">Es wurden keine Dokumente gefunden, was durchaus korrekt sein kann! (P.message_<b>hint</b>)</p>
+<div class="message message_hint">Die Buchungen sind noch nicht abgespeichert worden! (DIV.message_<b>hint</b>)</div>
+
+
+<h3>OK</h3>
+
+<p>Reine Info, die man getrost ignorieren könnte oder dürfte, aber dem Benutzer die Gewissheit gibt, dass der ausgeführte Prozess erfolgreich abgelaufen ist.</p>
+<div id="flash_ok" class="flash_message flash_message_ok">
+<div class="button-container">
+	<a href="#flash_ok" style="float:right" class="icon-close button wi-tiny">✕</a>
+  <span id="flash_ok_disp" class="display" style="float:left;">
+    <a href="#flash_ok" style="float:left;" onclick="$('#flash_detail_ok').toggle();" class="button wi-tiny">Details</a>
+  </span>
+</div>
+<div class="message-container">
+	<span class="flash_title" style="float:left;">OK:</span>
+	<div class="flash_notification" style="float:left;">
+		<span id="flash_ok_content" class="content">Sie haben erfolgreich einen Prozess ausführen lassen, gratuliere.</span>
+		<div id="flash_detail_ok" class="detail" style="display:none;">
+			<span id="flash_ok_detail">Das ist aber noch kein Grund zur Freude. Lesen Sie doch bitte hier, was es im weiteren zu beachten gibt.</span>
+			<a href="#flash_ok" style="float:left" onclick="$('#flash_detail_ok').hide()" class="icon-close button wi-tiny">✕</a>
+    </div>
+	</div>
+</div>
+</div>
+<p class="message message_ok">Achtung, wichtiger Hinweis! (P.message_ok)</p>
+<div class="message message_ok">Achtung, wichtiger Hinweis! (DIV.message_ok)</div>
+
+
+</div>
+</body>
+</html>
diff --git a/css/developement/form-elements-special.html b/css/developement/form-elements-special.html
new file mode 100644
index 000000000..c4d79e737
--- /dev/null
+++ b/css/developement/form-elements-special.html
@@ -0,0 +1,406 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <link href="../style.css" rel="stylesheet">
+
+  <script type="text/javascript" src="../../js/jquery.js"></script>
+  <script type="text/javascript" src="../../js/common.js"></script>
+  <script type="text/javascript" src="../../js/namespace.js"></script>
+  <script type="text/javascript" src="../../js/kivi.js"></script>
+  <script type="text/javascript" src="../../js/locale/de.js"></script>
+  <script type="text/javascript" src="../../js/jquery-ui.js"></script>
+  <script type="text/javascript" src="../../js/kivi.QuickSearch.js"></script>
+  <script type="text/javascript" src="../../js/kivi.ActionBar.js"></script>
+  <script type="text/javascript" src="../../js/kivi.Draft.js"></script>
+  <script type="text/javascript" src="../../js/kivi.File.js"></script>
+  <script type="text/javascript" src="../../js/kivi.SalesPurchase.js"></script>
+  <script type="text/javascript" src="../../js/kivi.Part.js"></script>
+  <script type="text/javascript" src="../../js/ckeditor/ckeditor.js"></script>
+  <script type="text/javascript" src="../../js/ckeditor/adapters/jquery.js"></script>
+  <script type="text/javascript" src="../../js/kivi.io.js"></script>
+  <script type="text/javascript" src="../../js/autocomplete_customer.js"></script>
+  <script type="text/javascript" src="../../js/client_js.js"></script>
+  <script type="text/javascript" src="../../js/jquery.cookie.js"></script>
+  <script type="text/javascript" src="../../js/jquery.checkall.js"></script>
+  <script type="text/javascript" src="../../js/jquery.download.js"></script>
+  <script type="text/javascript" src="../../js/jquery/jquery.form.js"></script>
+  <script type="text/javascript" src="../../js/jquery/fixes.js"></script>
+  <script type="text/javascript" src="../../js/jquery/jquery.tooltipster.min.js"></script>
+  <script type="text/javascript" src="../../js/jquery/ui/i18n/jquery.ui.datepicker-de.js"></script>
+  <script type="text/javascript" src="../../js/jquery.multiselect2side.js"></script>
+  <script type="text/javascript" src="../../js/jquery.selectboxes.js"></script>
+ 
+  <title>Spezielle Formular-Elemente</title>
+</head>
+<body class="developing">
+<header>
+  <h1>Spezielle Formular-Elemente</h1>
+	<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
+</header>
+<form action="#">
+
+<div class="wrapper">
+
+
+<div class="col">
+<h2>ms2side (.ms2side / MultiSelect2Side)</h2>
+
+<div class="ms2side">
+  <p>Folgende Elemente können einer Gruppe zugeordnet werden:</p>
+  <!-- vormals:.clearfix -->
+  <select name="group_usersms2side__orig" multiple="" id="group_users" style="display: none;">
+    <option value="2">Element 2</option>
+    <option value="1">Element 1</option>
+  </select>
+  <script type="text/javascript">
+    $().ready(function() {
+      $('#group_users').multiselect2side({ moveOptions: false, labeldx: "Gruppenmitglieder", labelsx: "Alle BenutzerInnen" });
+    });
+  </script>
+  <div class="ms2side__div">
+    <div class="ms2side__select">
+      <div class="ms2side__header">
+        Alle verfügbaren Elemente
+      </div>
+      <select title="Alle BenutzerInnen" name="group_usersms2side__sx" id="group_usersms2side__sx" size="undefined" multiple="multiple">
+        <option value="2">Element 2</option>
+        <option value="1">Element 1</option>
+      </select>
+    </div>
+    <div class="ms2side__options" style="padding-top: 7.333333492279053px;">
+      <p class="AddOne ms2side__hide" title="Add Selected">›</p>
+      <p class="AddAll" title="Add All">»</p>
+      <p class="RemoveOne ms2side__hide" title="Remove Selected">‹</p>
+      <p class="RemoveAll ms2side__hide" title="Remove All">«</p>
+    </div>
+    <div class="ms2side__select">
+      <div class="ms2side__header">
+        Zugeordnete Elemente
+      </div>
+      <select title="Gruppenmitglieder" name="group_usersms2side__dx" id="group_usersms2side__dx" size="undefined" multiple="multiple">
+      </select>
+    </div>
+    <span id="group_usersms2side_hidden" style="display: none;"></span>
+  </div>
+  <script type="text/javascript">
+    $().ready(function() {
+      $('#group_clients').multiselect2side({ moveOptions: false, labeldx: "Mandanten, für die diese Gruppe gültig ist", labelsx: "Alle Mandanten" });
+    });
+  </script>
+
+</div>
+
+<div class="buttons">
+  <a class="button neutral" href="#">Zurück</a>
+  <input value="Speichern" type="button">
+</div>
+
+</div>
+
+
+
+<div class="col wi-wide">
+<h2>Boxes (.boxes)</h2>
+<div class="boxes">
+	<h3 title="Select/Deselect all"><input title="Select/Deselect" value="1" name="dummy1" type="checkbox" id="dummy1">
+		<label for="dummy1">Überschrift (Select all)</label>
+		<script type="text/javascript">$('#dummy1').checkall('.checkallgroup1');</script>
+	</h3>
+	<div>
+		<input value="1" class="checkallgroup1" id="group_rights_map_customer_vendor_edit" name="group.rights_map.customer_vendor_edit" type="checkbox">
+		<label for="group_rights_map_customer_vendor_edit">Option 1</label>
+	</div>
+	<div>
+		<input value="1" id="group_rights_map_customer_vendor_all_edit" class="checkallgroup1" name="group.rights_map.customer_vendor_all_edit" type="checkbox">
+		<label for="group_rights_map_customer_vendor_all_edit">Option 2</label>
+	</div>
+	<div>
+		<input value="1" name="group.rights_map.part_service_assembly_edit" id="group_rights_map_part_service_assembly_edit" type="checkbox" class="checkallgroup1">
+		<label for="group_rights_map_part_service_assembly_edit">Option 3</label>
+	</div>
+	<div>
+		<input value="1" name="group.rights_map.part_service_assembly_details" id="group_rights_map_part_service_assembly_details" class="checkallgroup1" type="checkbox">
+		<label for="group_rights_map_part_service_assembly_details">Option 4</label>
+	</div>
+	<div>
+		<input value="1" id="group_rights_map_project_edit" type="checkbox" name="group.rights_map.project_edit" class="checkallgroup1">
+		<label for="group_rights_map_project_edit">Option 4</label>
+	</div>
+</div>
+</div>
+
+
+</div><!-- /.wrapper -->
+
+
+
+<div class="form-addition">
+	<h3 class="h4">In Bericht aufnehmen</h3>
+	<div class="list col">
+		<h4> Numbers &amp; IDs </h4>
+		<div>
+			<input name="l_id" id="l_id" type="checkbox" value="Y">
+			<label for="l_id"> Buchungsnummer </label>
+		</div>
+		<div>
+			<input name="l_customernumber" id="l_customernumber" type="checkbox" value="Y" checked="">
+			<label for="l_customernumber"> Kundennummer </label>
+		</div>
+		<div>
+			<input name="l_taxnumber" id="l_taxnumber" type="checkbox" value="Y">
+			<label for="l_taxnumber"> Steuernummer </label>
+		</div>
+		<div>
+			<input name="l_invnumber" id="l_invnumber" type="checkbox" value="Y">
+			<label for="l_invnumber"> Rechnungen </label>
+		</div>
+	</div>
+	<div class="list col">
+		<h4> Kunde </h4>
+		<div>
+			<input name="l_name" id="l_name" type="checkbox" value="Y" checked="">
+			<label for="l_name"> Kundenname </label>
+		</div>
+		<div>
+			<input name="l_contact" id="l_contact" type="checkbox" value="Y" checked="">
+			<label for="l_contact"> Kontakt </label>
+		</div>
+	</div>
+	<div class="list col">
+		<h4> Adresse </h4>
+		<div>
+			<input name="l_street" id="l_street" type="checkbox" value="Y" checked="">
+			<label for="l_street"> Straße </label>
+		</div>
+		<div>
+			<input name="l_zipcode" id="l_zipcode" type="checkbox" value="Y" checked="">
+			<label for="l_zipcode"> PLZ </label>
+		</div>
+		<div>
+			<input name="l_city" id="l_city" type="checkbox" value="Y" checked="">
+			<label for="l_city"> Stadt </label>
+		</div>
+		<div>
+			<input name="l_country" id="l_country" type="checkbox" value="Y" checked="">
+			<label for="l_country"> Land </label>
+		</div>
+		<div>
+			<input name="l_gln" id="l_gln" type="checkbox" value="Y" checked="">
+			<label for="l_gln"> GLN </label>
+		</div>
+	</div>
+	<div class="list col">
+		<h4> Benutzerdefinierte Variablen </h4>
+<!-- PENDENT: bessere Loesung suchen -->
+		<input type="checkbox" name="l_cvar_Geburtsdatum" id="l_cvar_Geburtsdatum" value="Y">
+		<label for="l_cvar_Geburtsdatum">Geburtsdatum</label>
+	</div>
+</div>
+
+
+<div class="wrapper">
+	<div class="filter_toggle" style="display: block;">
+		<a href="#" onclick="javascript:$('.filter_toggle').toggle()" class="button toggle off neutral">Filter zeigen</a> 
+	</div>
+	<div class="filter_toggle" style="display: none;">
+		<a href="#" onclick="javascript:$('.filter_toggle').toggle()" class="button toggle on neutral with-panel">Filter verbergen</a> 
+<!-- PENDENT: Panel einbauen -->
+		<div class="filter-toggle-panel">
+			<table id="filter_table" class="tbl-horizontal">
+				<caption>Ware</caption>
+				<tbody>
+					<tr>
+						<th>Beschreibung</th>
+						<td><input value="" name="filter.name:substr::ilike" type="text" id="filter_name_substr_ilike" class="wi-normal" size="20">
+						</td>
+					</tr>
+					<tr>
+						<th>Typ</th>
+						<td>
+						<select name="filter.type" id="price_rule_filter_type" class="wi-normal">
+							<option value=""></option>
+							<option value="customer">Preisregeln (Verkauf)</option>
+							<option value="vendor">Preisregeln (Einkauf)</option>
+						</select>
+						</td>
+					</tr>
+					<tr>
+						<th>Ware</th>
+						<td><span class="part_picker"><input data-part-picker-data="{'class':'wi-normal'}" value="" name="filter.item_type_matches[].part" id="filter_item_type_matches5719277_part" type="hidden" class="wi-normal part_autocomplete">
+						<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input value="" name="" type="text" class="wi-normal ui-autocomplete-input" id="filter_item_type_matches5719277_part_name" autocomplete="off">
+						<span class="ppp_popup_button"></span></span></td>
+					</tr>
+					<tr>
+						<th>Warengruppe</th>
+						<td>
+						<select name="filter.item_type_matches[].partsgroup" id="filter_item_type_matches5719278_partsgroup" class="wi-normal">
+							<option value=""></option>
+							<option value="447">Computer Occasion</option>
+							<option value="448">Hardwareteile Occasion</option>
+							<option value="449">Computer neu</option>
+							<option value="450">Hardwareteile neu</option>
+							<option value="451">Peripheriegeräte neu</option>
+							<option value="452">Peripheriegeräte Occasion</option>
+							<option value="528">Dienstleistung</option>
+							<option value="594">Lizenzgebühren</option>
+							<option value="635">Zubehör</option>
+							<option value="681">Verbrauchsmaterial</option>
+							<option value="920">Geldbetraege</option>
+							<option value="13376">0Kundengerät</option>
+							<option value="27265">Dienstleistung (Stunden)</option>
+						</select>
+						</td>
+					</tr>
+					<tr>
+						<th>Menge</th>
+						<td><input value="" name="filter.item_type_matches[].qty" type="text" id="filter_item_type_matches5719279_qty" class="wi-normal">
+						</td>
+					</tr>
+					<tr id="price_rule_filter_customer_tr" style="display:none">
+						<th>Kunde</th>
+						<td><span class="customer_vendor_picker"><input value="" name="filter.item_type_matches[].customer" id="price_rule_filter_customer" type="hidden" class="wi-normal customer_vendor_autocomplete" data-customer-vendor-picker-data="{'type':'customer','class':'wi-normal'}">
+						<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input value="" name="" class="wi-normal ui-autocomplete-input" type="customer" id="price_rule_filter_customer_name" autocomplete="off">
+						</span></td>
+					</tr>
+					<tr id="price_rule_filter_vendor_tr" style="display:none">
+<!-- PENDENT: Korrekt mit customer? -->
+						<th>Lieferant</th>
+						<td><span class="customer_vendor_picker"><input value="" name="filter.item_type_matches[].vendor" id="price_rule_filter_vendor" type="hidden" class="wi-normal customer_vendor_autocomplete" data-customer-vendor-picker-data="{'type':'vendor','class':'wi-normal'}">
+						<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input value="" name="" class="wi-normal ui-autocomplete-input" type="vendor" id="price_rule_filter_vendor_name" autocomplete="off">
+						</span></td>
+					</tr>
+					<tr>
+						<th>Kunden-/Lieferantentyp</th>
+						<td>
+						<select name="filter.item_type_matches[].business" id="filter_item_type_matches5719280_business" class="wi-normal">
+							<option value=""></option>
+							<option value="23353">LehrerInnen</option>
+							<option value="23347">IT-Firma</option>
+							<option value="41723">Behörde</option>
+							<option value="158">Firma</option>
+							<option value="157">Privatperson</option>
+						</select>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+			<table id="filter_table" class="tbl-horizontal">
+				<caption>Dates</caption>
+				<tbody>
+					<tr>
+						<th>Liefertermin</th>
+						<td><input value="" name="filter.item_type_matches[].reqdate" type="text" class="datepicker wi-date hasDatepicker" id="filter_item_type_matches5719281_reqdate" data-validate="date" size="11">
+						<img class="ui-datepicker-trigger" src="image/calendar.png" alt="..." title="..."></td>
+					</tr>
+					<tr>
+						<th>Buchungsdatum Beleg</th>
+						<td><input value="" name="filter.item_type_matches[].transdate" type="text" class="datepicker wi-date hasDatepicker" id="filter_item_type_matches5719282_transdate" data-validate="date" size="11">
+						<img class="ui-datepicker-trigger" src="image/calendar.png" alt="..." title="..."></td>
+					</tr>
+					<tr>
+						<th class="caption" colspan="2">Prices &amp; Discounts</th>
+					</tr>
+					<tr>
+						<th>Preisgruppe</th>
+						<td>
+						<select name="filter.item_type_matches[].pricegroup" id="filter_item_type_matches5719283_pricegroup" class="wi-normal">
+							<option value=""></option>
+							<option value="0">keine Preisgruppe</option>
+							<option value="27267">50 CHF pro Stunde</option>
+							<option value="27268">100 CHF pro Stunde</option>
+						</select>
+						<br>
+						</td>
+					</tr>
+					<tr>
+						<th>Preis</th>
+						<td><input value="" name="filter.price:number" type="text" id="filter_price_number" class="wi-normal" size="20">
+						</td>
+					</tr>
+					<tr>
+						<th>Abschlag</th>
+						<td><input value="" name="filter.reduction:number" type="text" id="filter_reduction_number" class="wi-normal" size="20">
+						</td>
+					</tr>
+					<tr>
+						<th>Rabatt</th>
+						<td><input value="" name="filter.discount:number" type="text" id="filter_discount_number" class="wi-normal" size="20">
+						</td>
+					</tr>
+					<tr>
+						<th class="caption" colspan="2">Status</th>
+					</tr>
+					<tr>
+						<th>Priorität</th>
+						<td>
+						<select name="filter.priority" id="filter_priority" class="wi-normal">
+							<option value="" selected="">Alle</option>
+							<option value="3">Normal</option>
+							<option value="4">Override</option>
+						</select>
+						</td>
+					</tr>
+					<tr>
+						<th>Ungültig</th>
+						<td>
+						<select name="filter.obsolete" id="filter_obsolete" class="wi-normal">
+							<option value="">Beide</option>
+							<option value="0" selected="">Gültig</option>
+							<option value="1">Ungültig</option>
+						</select>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+			<div class="col list">
+				<h3 class="caption">Hat Regeltypen</h3>
+				<div>
+					<input value="part" name="filter.has_item_type[]" id="filter_has_item_type5719284" type="checkbox">
+					<label for="filter_has_item_type5719284">Ware</label>
+					<br>
+					<input value="customer" name="filter.has_item_type[]" id="filter_has_item_type5719285" type="checkbox">
+					<label for="filter_has_item_type5719285">Kunde</label>
+					<br>
+					<input value="vendor" name="filter.has_item_type[]" id="filter_has_item_type5719286" type="checkbox">
+					<label for="filter_has_item_type5719286">Lieferant</label>
+					<br>
+					<input value="business" name="filter.has_item_type[]" id="filter_has_item_type5719287" type="checkbox">
+					<label for="filter_has_item_type5719287">Kunden-/Lieferantentyp</label>
+					<br>
+					<input value="partsgroup" name="filter.has_item_type[]" id="filter_has_item_type5719288" type="checkbox">
+					<label for="filter_has_item_type5719288">Warengruppe</label>
+					<br>
+					<input value="qty" name="filter.has_item_type[]" id="filter_has_item_type5719289" type="checkbox">
+					<label for="filter_has_item_type5719289">Menge</label>
+					<br>
+					<input value="reqdate" name="filter.has_item_type[]" id="filter_has_item_type5719290" type="checkbox">
+					<label for="filter_has_item_type5719290">Liefertermin</label>
+					<br>
+					<input value="transdate" name="filter.has_item_type[]" id="filter_has_item_type5719291" type="checkbox">
+					<label for="filter_has_item_type5719291">Buchungsdatum</label>
+					<br>
+					<input value="pricegroup" name="filter.has_item_type[]" id="filter_has_item_type5719292" type="checkbox">
+					<label for="filter_has_item_type5719292">Preisgruppe</label>
+					<br>
+				</div>
+			</div>
+			<input value="name" name="sort_by" id="sort_by" type="hidden">
+			<input value="0" name="sort_dir" id="sort_dir" type="hidden">
+			<input value="1" name="page" id="page" type="hidden">
+			<div class="buttons">
+				<input value="Reset Filter" class="neutral" type="reset" onclick="$('#search_form').resetForm()">
+			</div>
+		</div>
+<!-- /.filter-toggle-panel -->
+	</div>
+<!-- /.filter_toggle -->
+</div>
+
+
+
+
+
+</form>
+</body>
+</html>
\ No newline at end of file
diff --git a/css/developement/form-elements.html b/css/developement/form-elements.html
new file mode 100644
index 000000000..d9d72e4c3
--- /dev/null
+++ b/css/developement/form-elements.html
@@ -0,0 +1,699 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <link href="../style.css" rel="stylesheet">
+  <title>Test und Entwicklung des Kivitendo-CSS</title>
+</head>
+<body class="developing">
+<header>
+	<h1>Kivitendo-Formular-Elemente</h1>
+	<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
+</header>
+
+<form action="#">
+
+
+
+
+<div class="wrapper">
+
+
+<h2>Formular-Elemente mit Standard-Einstellungen</h2>
+
+
+<table class="tbl-horizontal">
+	<caption>Klassische Input-Elemente</caption>
+	<colgroup> <col class="wi-small"><col class="wi-mediumsmall"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Text</th>
+			<td><input type="text" name="input-type-text"></td>
+		</tr>
+		<tr>
+			<th>Password</th>
+			<td><input type="password" name="input-type-password"></td>
+		</tr>
+		<tr>
+			<th>Checkbox</th>
+			<td>
+			  <input type="checkbox" name="input-type-checkbox" value="cb1" id="cb1-1"><label for="cb1-1">1</label> &nbsp; 
+        <input type="checkbox" name="input-type-checkbox" value="cb2" id="cb1-2"><label for="cb1-2">2</label>
+			</td>
+		</tr>
+		<tr>
+			<th>Radio</th>
+			<td>
+        <input type="radio" name="input-type-radio" value="Yes" id="rd1-1"><label for="rd1-1">Yes</label> &nbsp; 
+        <input type="radio" name="input-type-radio" value="No" id="rd1-2"><label for="rd1-2">No</label>			
+			</td>
+		</tr>
+		<tr>
+			<th>Submit</th>
+			<td><input type="submit" name="sbmt1"></td>
+		</tr>
+		<tr>
+			<th>Reset</th>
+			<td><input type="reset" name="rst1"></td>
+		</tr>
+		<tr>
+			<th>Button</th>
+			<td><input type="button" name="btn1" value="Anzeigen"></td>
+		</tr>
+		<tr>
+			<th>Image</th>
+			<td><input type="image" name="input-type-image"></td>
+		</tr>
+		<tr>
+			<th>File</th>
+			<td><input type="file" name="input-type-file"></td>
+		</tr>
+	</tbody>
+</table>
+
+
+<table class="tbl-horizontal">
+	<caption>Andere Formular-Elemente</caption>
+	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Select</th>
+			<td>
+			  <select id="slct1" name="slct1">
+			    <option value=""></option>
+			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+			    <option value="Timothy Leary">Timothy Leary</option>
+			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			  </select>
+			</td>
+		</tr>
+		<tr>
+			<th>Textarea</th>
+			<td><textarea name="txtarea1">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
+		</tr>
+		<tr>
+			<th>Button</th>
+			<td>
+			  <button name="bttn1-1" type="button">Type Button</button><br>
+			  <button name="bttn1-2" type="submit">Type Submit</button><br>
+			  <button name="bttn1-3" type="reset">Type Reset</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal">
+	<caption>Neue Input-Elemente in HTML5</caption>
+	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Search</th>
+			<td><input type="search" name="input-type-search"></td>
+		</tr>
+		<tr>
+			<th>Tel</th>
+			<td><input type="tel" name="input-type-tel"></td>
+		</tr>
+		<tr>
+			<th>URL</th>
+			<td><input type="url" name="input-type-url"></td>
+		</tr>
+		<tr>
+			<th>Email</th>
+			<td><input type="email" name="input-type-email"></td>
+		</tr>
+		<tr>
+			<th>Datetime</th>
+			<td><input type="datetime" name="input-type-datetime"></td>
+		</tr>
+		<tr>
+			<th>Date</th>
+			<td><input type="date" name="input-type-date"></td>
+		</tr>
+		<tr>
+			<th>Time</th>
+			<td><input type="time" name="input-type-time"></td>
+		</tr>
+		<tr>
+			<th>Month</th>
+			<td><input type="month" name="input-type-month"></td>
+		</tr>
+		<tr>
+			<th>Week</th>
+			<td><input type="week" name="input-type-week"></td>
+		</tr>
+		<tr>
+			<th>Datetime-Local</th>
+			<td><input type="datetime-local" name="input-type-datetime-local"></td>
+		</tr>
+		<tr>
+			<th>Number</th>
+			<td><input type="number" name="input-type-number"></td>
+		</tr>
+		<tr>
+			<th>Range</th>
+			<td><input type="range" name="input-type-range"></td>
+		</tr>
+		<tr>
+			<th>Color</th>
+			<td><input type="color" name="input-type-color"></td>
+		</tr>
+	</tbody>
+</table>
+
+
+<table class="tbl-horizontal">
+	<caption>Abmessungen (Beispiel Input[type=text])</caption>
+	<colgroup> <col class="wi-mediumsmall"><col class="wi-verysmall"><col class="wi-lightwide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>wi-smallest</th>
+			<th>44px</th>
+			<td><input type="text" name="input-type-text" class="wi-smallest"></td>
+		</tr>
+		<tr>
+			<th>wi-verysmall</th>
+			<th>63px</th>
+			<td><input type="text" name="input-type-text" class="wi-verysmall"></td>
+		</tr>
+		<tr>
+			<th>wi-small</th>
+			<th>95px</th>
+			<td><input type="text" name="input-type-text" class="wi-small"></td>
+		</tr>
+		<tr>
+			<th>wi-mediumsmall</th>
+			<th>121px</th>
+			<td><input type="text" name="input-type-text" class="wi-mediumsmall"></td>
+		</tr>
+		<tr>
+			<th>wi-normal</th>
+			<th>161px</th>
+			<td><input type="text" name="input-type-text" class="wi-normal"></td>
+		</tr>
+		<tr>
+			<th>wi-lightwide</th>
+			<th>188px</th>
+			<td><input type="text" name="input-type-text" class="wi-lightwide"></td>
+		</tr>
+		<tr>
+			<th>wi-wide</th>
+			<th>249px</th>
+			<td><input type="text" name="input-type-text" class="wi-wide"></td>
+		</tr>
+		<tr>
+			<th>wi-wider</th>
+			<th>329px</th>
+			<td><input type="text" name="input-type-text" class="wi-wider"></td>
+		</tr>
+		<tr>
+			<th>wi-verywide</th>
+			<th>489px</th>
+			<td><input type="text" name="input-type-text" class="wi-verywide"></td>
+		</tr>
+	</tbody>
+</table>
+
+</div><!-- /.wrapper -->
+
+
+<div class="wrapper">
+
+
+<h2>Abmessungen mit assoziativen Klassennamen</h2>
+
+
+<table class="tbl-horizontal col">
+	<caption>Klasse wi-normal</caption>
+	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Text</th>
+			<td><input type="text" name="input-type-text-2" class="wi-normal"></td>
+		</tr>
+		<tr>
+			<th>Password</th>
+			<td><input type="password" name="input-type-password-2" class="wi-normal"></td>
+		</tr>
+		<tr>
+			<th>Submit</th>
+			<td><input type="submit" name="sbmt2" class="wi-normal"></td>
+		</tr>
+		<tr>
+			<th>Reset</th>
+			<td><input type="reset" name="rst2" class="wi-normal"></td>
+		</tr>
+		<tr>
+			<th>Button</th>
+			<td><input type="button" name="btn2" value="Anzeigen" class="wi-normal"></td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			  <select id="slct1" name="slct2" class="wi-normal">
+			    <option value=""></option>
+			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+			    <option value="Timothy Leary">Timothy Leary</option>
+			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			  </select>
+			</td>
+		</tr>
+		<tr>
+			<th>Textarea</th>
+			<td><textarea name="txtarea2" class="wi-normal">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
+		</tr>
+		<tr>
+			<th>Button (Tag)</th>
+			<td>
+			  <button name="bttn1-1" type="button" class="wi-normal">Type Button</button><br>
+			  <button name="bttn1-2" type="submit" class="wi-normal">Type Submit</button><br>
+			  <button name="bttn1-3" type="reset" class="wi-normal">Type Reset</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal col">
+	<caption>Klasse wi-smallest</caption>
+	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Text</th>
+			<td><input type="text" name="input-type-text-2" class="wi-smallest"></td>
+		</tr>
+		<tr>
+			<th>Password</th>
+			<td><input type="password" name="input-type-password-2" class="wi-smallest"></td>
+		</tr>
+		<tr>
+			<th>Submit</th>
+			<td><input type="submit" name="sbmt2" class="wi-smallest"></td>
+		</tr>
+		<tr>
+			<th>Reset</th>
+			<td><input type="reset" name="rst2" class="wi-smallest"></td>
+		</tr>
+		<tr>
+			<th>Button</th>
+			<td><input type="button" name="btn2" value="Anzeigen" class="wi-smallest"></td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			  <select id="slct1" name="slct2" class="wi-smallest">
+			    <option value=""></option>
+			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+			    <option value="Timothy Leary">Timothy Leary</option>
+			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			  </select>
+			</td>
+		</tr>
+		<tr>
+			<th>Textarea</th>
+			<td><textarea name="txtarea2" class="wi-smallest">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
+		</tr>
+		<tr>
+			<th>Button (Tag)</th>
+			<td>
+			  <button name="bttn1-1" type="button" class="wi-smallest">Type Button</button><br>
+			  <button name="bttn1-2" type="submit" class="wi-smallest">Type Submit</button><br>
+			  <button name="bttn1-3" type="reset" class="wi-smallest">Type Reset</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal col">
+	<caption>Klasse wi-verysmall</caption>
+	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Text</th>
+			<td><input type="text" name="input-type-text-2" class="wi-verysmall"></td>
+		</tr>
+		<tr>
+			<th>Password</th>
+			<td><input type="password" name="input-type-password-2" class="wi-verysmall"></td>
+		</tr>
+		<tr>
+			<th>Submit</th>
+			<td><input type="submit" name="sbmt2" class="wi-verysmall"></td>
+		</tr>
+		<tr>
+			<th>Reset</th>
+			<td><input type="reset" name="rst2" class="wi-verysmall"></td>
+		</tr>
+		<tr>
+			<th>Button</th>
+			<td><input type="button" name="btn2" value="Anzeigen" class="wi-verysmall"></td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			  <select id="slct1" name="slct2" class="wi-verysmall">
+			    <option value=""></option>
+			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+			    <option value="Timothy Leary">Timothy Leary</option>
+			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			  </select>
+			</td>
+		</tr>
+		<tr>
+			<th>Textarea</th>
+			<td><textarea name="txtarea2" class="wi-verysmall">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
+		</tr>
+		<tr>
+			<th>Button (Tag)</th>
+			<td>
+			  <button name="bttn1-1" type="button" class="wi-verysmall">Type Button</button><br>
+			  <button name="bttn1-2" type="submit" class="wi-verysmall">Type Submit</button><br>
+			  <button name="bttn1-3" type="reset" class="wi-verysmall">Type Reset</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal col">
+	<caption>Klasse wi-small</caption>
+	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Text</th>
+			<td><input type="text" name="input-type-text-2" class="wi-small"></td>
+		</tr>
+		<tr>
+			<th>Password</th>
+			<td><input type="password" name="input-type-password-2" class="wi-small"></td>
+		</tr>
+		<tr>
+			<th>Submit</th>
+			<td><input type="submit" name="sbmt2" class="wi-small"></td>
+		</tr>
+		<tr>
+			<th>Reset</th>
+			<td><input type="reset" name="rst2" class="wi-small"></td>
+		</tr>
+		<tr>
+			<th>Button</th>
+			<td><input type="button" name="btn2" value="Anzeigen" class="wi-small"></td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			  <select id="slct1" name="slct2" class="wi-small">
+			    <option value=""></option>
+			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+			    <option value="Timothy Leary">Timothy Leary</option>
+			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			  </select>
+			</td>
+		</tr>
+		<tr>
+			<th>Textarea</th>
+			<td><textarea name="txtarea2" class="wi-small">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
+		</tr>
+		<tr>
+			<th>Button (Tag)</th>
+			<td>
+			  <button name="bttn1-1" type="button" class="wi-small">Type Button</button><br>
+			  <button name="bttn1-2" type="submit" class="wi-small">Type Submit</button><br>
+			  <button name="bttn1-3" type="reset" class="wi-small">Type Reset</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal col">
+	<caption>Klasse wi-mediumsmall</caption>
+	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Text</th>
+			<td><input type="text" name="input-type-text-2" class="wi-mediumsmall"></td>
+		</tr>
+		<tr>
+			<th>Password</th>
+			<td><input type="password" name="input-type-password-2" class="wi-mediumsmall"></td>
+		</tr>
+		<tr>
+			<th>Submit</th>
+			<td><input type="submit" name="sbmt2" class="wi-mediumsmall"></td>
+		</tr>
+		<tr>
+			<th>Reset</th>
+			<td><input type="reset" name="rst2" class="wi-mediumsmall"></td>
+		</tr>
+		<tr>
+			<th>Button</th>
+			<td><input type="button" name="btn2" value="Anzeigen" class="wi-mediumsmall"></td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			  <select id="slct1" name="slct2" class="wi-mediumsmall">
+			    <option value=""></option>
+			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+			    <option value="Timothy Leary">Timothy Leary</option>
+			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			  </select>
+			</td>
+		</tr>
+		<tr>
+			<th>Textarea</th>
+			<td><textarea name="txtarea2" class="wi-mediumsmall">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
+		</tr>
+		<tr>
+			<th>Button (Tag)</th>
+			<td>
+			  <button name="bttn1-1" type="button" class="wi-mediumsmall">Type Button</button><br>
+			  <button name="bttn1-2" type="submit" class="wi-mediumsmall">Type Submit</button><br>
+			  <button name="bttn1-3" type="reset" class="wi-mediumsmall">Type Reset</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal col">
+	<caption>Klasse wi-lightwide</caption>
+	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Text</th>
+			<td><input type="text" name="input-type-text-2" class="wi-lightwide"></td>
+		</tr>
+		<tr>
+			<th>Password</th>
+			<td><input type="password" name="input-type-password-2" class="wi-lightwide"></td>
+		</tr>
+		<tr>
+			<th>Submit</th>
+			<td><input type="submit" name="sbmt2" class="wi-lightwide"></td>
+		</tr>
+		<tr>
+			<th>Reset</th>
+			<td><input type="reset" name="rst2" class="wi-lightwide"></td>
+		</tr>
+		<tr>
+			<th>Button</th>
+			<td><input type="button" name="btn2" value="Anzeigen" class="wi-lightwide"></td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			  <select id="slct1" name="slct2" class="wi-lightwide">
+			    <option value=""></option>
+			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+			    <option value="Timothy Leary">Timothy Leary</option>
+			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			  </select>
+			</td>
+		</tr>
+		<tr>
+			<th>Textarea</th>
+			<td><textarea name="txtarea2" class="wi-lightwide">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
+		</tr>
+		<tr>
+			<th>Button (Tag)</th>
+			<td>
+			  <button name="bttn1-1" type="button" class="wi-lightwide">Type Button</button><br>
+			  <button name="bttn1-2" type="submit" class="wi-lightwide">Type Submit</button><br>
+			  <button name="bttn1-3" type="reset" class="wi-lightwide">Type Reset</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal col">
+	<caption>Klasse wi-wide</caption>
+	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Text</th>
+			<td><input type="text" name="input-type-text-2" class="wi-wide"></td>
+		</tr>
+		<tr>
+			<th>Password</th>
+			<td><input type="password" name="input-type-password-2" class="wi-wide"></td>
+		</tr>
+		<tr>
+			<th>Submit</th>
+			<td><input type="submit" name="sbmt2" class="wi-wide"></td>
+		</tr>
+		<tr>
+			<th>Reset</th>
+			<td><input type="reset" name="rst2" class="wi-wide"></td>
+		</tr>
+		<tr>
+			<th>Button</th>
+			<td><input type="button" name="btn2" value="Anzeigen" class="wi-wide"></td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			  <select id="slct1" name="slct2" class="wi-wide">
+			    <option value=""></option>
+			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+			    <option value="Timothy Leary">Timothy Leary</option>
+			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			  </select>
+			</td>
+		</tr>
+		<tr>
+			<th>Textarea</th>
+			<td><textarea name="txtarea2" class="wi-wide">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
+		</tr>
+		<tr>
+			<th>Button (Tag)</th>
+			<td>
+			  <button name="bttn1-1" type="button" class="wi-wide">Type Button</button><br>
+			  <button name="bttn1-2" type="submit" class="wi-wide">Type Submit</button><br>
+			  <button name="bttn1-3" type="reset" class="wi-wide">Type Reset</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal col">
+	<caption>Klasse wi-wider</caption>
+	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Text</th>
+			<td><input type="text" name="input-type-text-2" class="wi-wider"></td>
+		</tr>
+		<tr>
+			<th>Password</th>
+			<td><input type="password" name="input-type-password-2" class="wi-wider"></td>
+		</tr>
+		<tr>
+			<th>Submit</th>
+			<td><input type="submit" name="sbmt2" class="wi-wider"></td>
+		</tr>
+		<tr>
+			<th>Reset</th>
+			<td><input type="reset" name="rst2" class="wi-wider"></td>
+		</tr>
+		<tr>
+			<th>Button</th>
+			<td><input type="button" name="btn2" value="Anzeigen" class="wi-wider"></td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			  <select id="slct1" name="slct2" class="wi-wider">
+			    <option value=""></option>
+			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+			    <option value="Timothy Leary">Timothy Leary</option>
+			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			  </select>
+			</td>
+		</tr>
+		<tr>
+			<th>Textarea</th>
+			<td><textarea name="txtarea2" class="wi-wider">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
+		</tr>
+		<tr>
+			<th>Button (Tag)</th>
+			<td>
+			  <button name="bttn1-1" type="button" class="wi-wider">Type Button</button><br>
+			  <button name="bttn1-2" type="submit" class="wi-wider">Type Submit</button><br>
+			  <button name="bttn1-3" type="reset" class="wi-wider">Type Reset</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal col">
+	<caption>Klasse wi-verywide</caption>
+	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Text</th>
+			<td><input type="text" name="input-type-text-2" class="wi-verywide"></td>
+		</tr>
+		<tr>
+			<th>Password</th>
+			<td><input type="password" name="input-type-password-2" class="wi-verywide"></td>
+		</tr>
+		<tr>
+			<th>Submit</th>
+			<td><input type="submit" name="sbmt2" class="wi-verywide"></td>
+		</tr>
+		<tr>
+			<th>Reset</th>
+			<td><input type="reset" name="rst2" class="wi-verywide"></td>
+		</tr>
+		<tr>
+			<th>Button</th>
+			<td><input type="button" name="btn2" value="Anzeigen" class="wi-verywide"></td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			  <select id="slct1" name="slct2" class="wi-verywide">
+			    <option value=""></option>
+			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+			    <option value="Timothy Leary">Timothy Leary</option>
+			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			  </select>
+			</td>
+		</tr>
+		<tr>
+			<th>Textarea</th>
+			<td><textarea name="txtarea2" class="wi-verywide">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
+		</tr>
+		<tr>
+			<th>Button (Tag)</th>
+			<td>
+			  <button name="bttn1-1" type="button" class="wi-verywide">Type Button</button><br>
+			  <button name="bttn1-2" type="submit" class="wi-verywide">Type Submit</button><br>
+			  <button name="bttn1-3" type="reset" class="wi-verywide">Type Reset</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+
+
+
+
+</div>
+
+
+
+
+
+</form>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/css/developement/images/Tabelle_Horizontal_mit_Elementen.png b/css/developement/images/Tabelle_Horizontal_mit_Elementen.png
new file mode 100644
index 000000000..a322f5ff3
Binary files /dev/null and b/css/developement/images/Tabelle_Horizontal_mit_Elementen.png differ
diff --git a/css/developement/images/Tabelle_Horizontal_mit_Elementen.svg b/css/developement/images/Tabelle_Horizontal_mit_Elementen.svg
new file mode 100644
index 000000000..482204f53
--- /dev/null
+++ b/css/developement/images/Tabelle_Horizontal_mit_Elementen.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1280 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><rect id="ArtBoard2" x="0" y="0" width="1280" height="800" style="fill:none;"/><rect x="177.358" y="278.872" width="604.6" height="363.666" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="177.358" y="229.138" width="604.6" height="35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="177.358" y="642.538" width="604.6" height="35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="177.358" y="166.404" width="178.355" height="42.678" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="177.358" y="113.003" width="601.004" height="42.678" style="fill:#ccc;stroke:#000;stroke-width:1px;"/><rect x="359.965" y="166.404" width="421.993" height="42.678" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M357.341,278.872l0,166.862" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M357.341,229.318l0,35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M361.341,642.538l0,35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><text x="19.296px" y="197.27px" style="font-family:'Monaco';font-size:24px;">colgroup</text><text x="19.296px" y="144.004px" style="font-family:'Monaco';font-size:24px;">caption</text><text x="179.975px" y="197.27px" style="font-family:'Monaco';font-size:24px;">col.wi-small</text><text x="179.975px" y="100.695px" style="font-family:'Monaco';font-size:24px;">table.tbl-horizontal</text><text x="370.063px" y="197.27px" style="font-family:'Monaco';font-size:24px;">col.wi-wide</text><text x="431.249px" y="318.757px" style="font-family:'Monaco';font-size:24px;">input.wi-wide</text><text x="369.05px" y="318.757px" style="font-family:'Monaco';font-size:24px;">td</text><g transform="matrix(1,0,0,0.901023,144.122,-629.664)"><text x="36.526px" y="1050.26px" style="font-family:'Monaco';font-size:26.636px;">th</text><g transform="matrix(0.901023,0,0,1,8.36148,0)"><text x="84.479px" y="1050.26px" style="font-family:'Monaco';font-size:26.636px;">(label)</text></g></g><text x="180.771px" y="254.497px" style="font-family:'Monaco';font-size:24px;">th</text><text x="368.09px" y="256.314px" style="font-family:'Monaco';font-size:24px;">th</text><text x="369.05px" y="377.757px" style="font-family:'Monaco';font-size:24px;">td</text><text x="737.061px" y="377.757px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:29.791px;">kg</text><text x="180.771px" y="377.757px" style="font-family:'Monaco';font-size:24px;">th</text><text x="369.05px" y="429.757px" style="font-family:'Monaco';font-size:24px;">td</text><text x="180.771px" y="429.757px" style="font-family:'Monaco';font-size:24px;">th</text><text x="369.05px" y="670.269px" style="font-family:'Monaco';font-size:24px;">td</text><text x="180.771px" y="479.757px" style="font-family:'Monaco';font-size:24px;">th colspan=2</text><text x="200.612px" y="514.757px" style="font-family:'Monaco';font-size:24px;">span.label.above</text><text x="180.771px" y="670.269px" style="font-family:'Monaco';font-size:24px;">th</text><text x="431.249px" y="376.17px" style="font-family:'Monaco';font-size:24px;">input.wi-wide</text><text x="201.005px" y="549.325px" style="font-family:'Monaco';font-size:24px;">textarea.wi-small-wide</text><text x="431.249px" y="428.992px" style="font-family:'Monaco';font-size:24px;">select.wi-wide</text><text x="19.936px" y="256.308px" style="font-family:'Monaco';font-size:24px;">thead</text><text x="19.936px" y="314.02px" style="font-family:'Monaco';font-size:24px;">tbody</text><text x="19.936px" y="668.734px" style="font-family:'Monaco';font-size:24px;">tfoot</text><rect x="422.469" y="292.493" width="304.914" height="33.685" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="422.469" y="349.906" width="304.914" height="33.685" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="194.529" y="523.549" width="532.855" height="109.878" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M727.383,411.149c0,-4.648 -3.773,-8.421 -8.421,-8.421l-288.072,0c-4.647,0 -8.421,3.773 -8.421,8.421l0,16.842c0,4.648 3.774,8.422 8.421,8.422l288.072,0c4.648,0 8.421,-3.774 8.421,-8.422l0,-16.842Z" style="fill:none;stroke:#000;stroke-width:1px;"/><path id="New" d="M736.65,298.411l21.921,0l-1.461,1.462l-18.998,0l0,24.843l24.843,0l0,-18.998l1.461,-1.461l0,21.92l-27.766,0l0,-27.766Zm28.059,-1.9l-14.176,14.249l1.535,1.534l14.175,-14.248l1.096,1.023l-14.467,14.467l-4.823,1.169l1.169,-4.749l14.468,-14.468l1.023,1.023Zm5.407,-1.242l-2.558,-2.557c-0.292,-0.292 -0.73,-0.292 -1.023,0l-1.68,1.68l3.58,3.581l1.681,-1.681c0.219,-0.292 0.219,-0.731 0,-1.023Z"/><path d="M781.958,340.287l-604.6,0" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M781.958,393.864l-604.6,0" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M781.958,444.61l-604.6,0" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M709.844,431.465l-12.133,-8.712l24.265,0l-12.132,8.712Z" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M709.844,407.753l12.132,8.712l-24.265,0l12.133,-8.712Z" style="fill:none;stroke:#000;stroke-width:1px;"/><text x="819.651px" y="426.445px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">P<tspan x="834.456px 839.387px 851.732px 857.899px 868.998px 875.165px 881.332px 893.677px 901.069px 907.236px 913.403px 924.501px 936.846px 949.191px 960.29px 966.457px 981.262px 987.429px 1002.23px 1014.58px 1021.97px 1033.07px 1045.41px 1056.51px 1062.68px 1068.85px 1081.19px 1092.29px " y="426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px ">latz für Icons &amp; Kürzesttext</tspan></text><text x="819.651px" y="197.27px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">B<tspan x="834.456px 841.848px 854.193px 859.124px 865.291px 877.636px 889.981px 902.326px 914.671px 927.016px 939.361px 951.706px 964.05px 976.395px 982.562px 988.729px 1001.07px 1008.47px 1014.63px 1029.44px 1041.78px 1054.13px 1059.06px 1065.23px 1077.57px " y="197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px ">reitenangaben für Spalten</tspan></text><g transform="matrix(1,0,0,1,-22.9286,-995.21)"><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1238.41px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Spalten-Überschriften</text></g><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1259.07px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">(seltene <tspan x="918.294px 931.634px " y="1259.07px 1259.07px ">Au</tspan>snahme)</text></g></g><text x="819.651px" y="667.418px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">S<tspan x="834.456px 846.801px 865.291px 883.781px 896.126px 908.471px 914.638px 922.03px 934.375px 939.306px 951.651px 959.043px 964.107px 978.912px 991.257px 1002.36px 1014.7px 1027.05px 1039.39px 1057.88px 1070.22px " y="667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px ">ummen (hier Ausnahme)</tspan></text><text x="819.651px" y="143.414px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Ü<tspan x="835.681px 848.026px 860.371px 867.762px 878.861px 889.959px 902.304px 909.696px 914.627px 920.794px 926.962px 933.129px 945.473px 957.818px 965.21px 971.016px 982.358px 994.703px 1007.05px 1019.39px 1024.32px 1029.26px 1041.6px 1047.77px 1055.16px 1067.5px 1079.85px " y="143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px ">berschrift der Tabelle (h3)</tspan></text><g transform="matrix(1,0,0,1,-23.8305,-689.091)"><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1238.41px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Kombinierte Breitenangabe für</text></g><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1259.07px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">rechtsbündige <tspan x="972.786px 986.126px " y="1259.07px 1259.07px ">Au</tspan>srichtung</text></g></g><path d="M802.645,419.465l-48.47,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M812.223,542.153l-256.03,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M812.223,508.789l-346.362,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><rect x="163.002" y="73.72" width="631.009" height="617.19" style="fill:none;stroke:#000;stroke-width:1px;"/><text x="368.075px" y="732.995px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Datenspalte(n)</text><g transform="matrix(1,0,0,1,-184.427,-829.442)"><text x="372.075px" y="1562.44px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Feldbeschriftungen</text><text x="372.075px" y="1583.09px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">(Label)</text></g><g transform="matrix(1,0,0,1,-52.1965,-1027.53)"><text x="870.902px" y="1522.05px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Feldbeschriftung (Block) oberhalb für</text><text x="870.902px" y="1542.7px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">kombinierte <tspan x="978.734px 992.074px " y="1542.7px 1542.7px ">An</tspan>lage in einem Feld</text></g><text x="17.823px" y="51.016px" style="font-family:'Arial-BoldMT', 'Arial', sans-serif;font-weight:700;font-size:30px;">Horizontale T<tspan x="205.601px 222.286px " y="51.016px 51.016px ">ab</tspan>elle mit <tspan x="351.207px 372.872px " y="51.016px 51.016px ">Ab</tspan>messungen und Formular-Elementen</text><path d="M272.619,710.829l0,-32.491" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M430.023,710.829l0,-32.491" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M812.223,542.153l-256.03,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/></svg>
\ No newline at end of file
diff --git a/css/developement/images/Tabellen_in_Wrapper-Bloecken.png b/css/developement/images/Tabellen_in_Wrapper-Bloecken.png
new file mode 100644
index 000000000..6fa3a3756
Binary files /dev/null and b/css/developement/images/Tabellen_in_Wrapper-Bloecken.png differ
diff --git a/css/developement/images/Tabellen_in_Wrapper-Bloecken.svg b/css/developement/images/Tabellen_in_Wrapper-Bloecken.svg
new file mode 100644
index 000000000..51429d11e
--- /dev/null
+++ b/css/developement/images/Tabellen_in_Wrapper-Bloecken.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1127 729" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><rect id="ArtBoard2" x="-20.02" y="-29.541" width="1280" height="800" style="fill:none;"/><rect x="157.338" y="249.331" width="604.6" height="363.666" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="157.338" y="199.597" width="604.6" height="35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="157.338" y="612.997" width="604.6" height="35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="157.338" y="136.863" width="178.355" height="42.678" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="157.338" y="83.462" width="601.004" height="42.678" style="fill:#ccc;stroke:#000;stroke-width:1px;"/><rect x="339.945" y="136.863" width="421.993" height="42.678" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M337.321,249.331l0,166.862" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M337.321,199.777l0,35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M341.321,612.997l0,35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><text x="-0.724px" y="167.729px" style="font-family:'Monaco';font-size:24px;">colgroup</text><text x="-0.724px" y="114.463px" style="font-family:'Monaco';font-size:24px;">caption</text><text x="159.954px" y="167.729px" style="font-family:'Monaco';font-size:24px;">col.wi-small</text><text x="159.954px" y="71.154px" style="font-family:'Monaco';font-size:24px;">table.tbl-horizontal</text><text x="350.043px" y="167.729px" style="font-family:'Monaco';font-size:24px;">col.wi-wide</text><text x="411.228px" y="289.216px" style="font-family:'Monaco';font-size:24px;">input.wi-wide</text><text x="349.03px" y="289.216px" style="font-family:'Monaco';font-size:24px;">td</text><g transform="matrix(1,0,0,0.901023,124.102,-659.206)"><text x="36.526px" y="1050.26px" style="font-family:'Monaco';font-size:26.636px;">th</text><g transform="matrix(0.901023,0,0,1,8.36148,0)"><text x="84.479px" y="1050.26px" style="font-family:'Monaco';font-size:26.636px;">(label)</text></g></g><text x="160.751px" y="224.956px" style="font-family:'Monaco';font-size:24px;">th</text><text x="348.07px" y="226.773px" style="font-family:'Monaco';font-size:24px;">th</text><text x="349.03px" y="348.216px" style="font-family:'Monaco';font-size:24px;">td</text><text x="717.04px" y="348.216px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:29.791px;">kg</text><text x="160.751px" y="348.216px" style="font-family:'Monaco';font-size:24px;">th</text><text x="349.03px" y="400.216px" style="font-family:'Monaco';font-size:24px;">td</text><text x="160.751px" y="400.216px" style="font-family:'Monaco';font-size:24px;">th</text><text x="349.03px" y="640.728px" style="font-family:'Monaco';font-size:24px;">td</text><text x="160.751px" y="450.216px" style="font-family:'Monaco';font-size:24px;">th colspan=2</text><text x="180.592px" y="485.216px" style="font-family:'Monaco';font-size:24px;">span.label.above</text><text x="160.751px" y="640.728px" style="font-family:'Monaco';font-size:24px;">th</text><text x="411.228px" y="346.629px" style="font-family:'Monaco';font-size:24px;">input.wi-wide</text><text x="180.985px" y="519.784px" style="font-family:'Monaco';font-size:24px;">textarea.wi-small-wide</text><text x="411.228px" y="399.451px" style="font-family:'Monaco';font-size:24px;">select.wi-wide</text><text x="-0.084px" y="226.767px" style="font-family:'Monaco';font-size:24px;">thead</text><text x="-0.084px" y="284.479px" style="font-family:'Monaco';font-size:24px;">tbody</text><text x="-0.084px" y="639.193px" style="font-family:'Monaco';font-size:24px;">tfoot</text><rect x="402.449" y="262.952" width="304.914" height="33.685" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="402.449" y="320.365" width="304.914" height="33.685" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="174.508" y="494.008" width="532.855" height="109.878" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M707.363,381.608c0,-4.648 -3.774,-8.421 -8.421,-8.421l-288.072,0c-4.648,0 -8.421,3.773 -8.421,8.421l0,16.842c0,4.648 3.773,8.422 8.421,8.422l288.072,0c4.647,0 8.421,-3.774 8.421,-8.422l0,-16.842Z" style="fill:none;stroke:#000;stroke-width:1px;"/><path id="New" d="M716.63,268.87l21.921,0l-1.462,1.462l-18.998,0l0,24.843l24.844,0l0,-18.998l1.461,-1.461l0,21.92l-27.766,0l0,-27.766Zm28.058,-1.9l-14.175,14.249l1.535,1.534l14.175,-14.248l1.096,1.023l-14.468,14.467l-4.822,1.169l1.169,-4.749l14.467,-14.468l1.023,1.023Zm5.407,-1.242l-2.557,-2.557c-0.292,-0.292 -0.731,-0.292 -1.023,0l-1.68,1.68l3.58,3.581l1.68,-1.681c0.22,-0.292 0.22,-0.731 0,-1.023Z"/><path d="M761.938,310.746l-604.6,0" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M761.938,364.323l-604.6,0" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M761.938,415.069l-604.6,0" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M689.823,401.924l-12.133,-8.712l24.266,0l-12.133,8.712Z" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M689.823,378.212l12.133,8.712l-24.266,0l12.133,-8.712Z" style="fill:none;stroke:#000;stroke-width:1px;"/><text x="799.631px" y="396.904px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">P<tspan x="814.436px 819.367px 831.712px 837.879px 848.978px 855.145px 861.312px 873.657px 881.048px 887.215px 893.383px 904.481px 916.826px 929.171px 940.269px 946.436px 961.242px 967.409px 982.214px 994.559px 1001.95px 1013.05px 1025.39px 1036.49px 1042.66px 1048.83px 1061.17px 1072.27px " y="396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px ">latz für Icons &amp; Kürzesttext</tspan></text><text x="799.631px" y="167.729px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">B<tspan x="814.436px 821.828px 834.172px 839.104px 845.271px 857.616px 869.961px 882.306px 894.651px 906.995px 919.34px 931.685px 944.03px 956.375px 962.542px 968.709px 981.054px 988.446px 994.613px 1009.42px 1021.76px 1034.11px 1039.04px 1045.21px 1057.55px " y="167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px ">reitenangaben für Spalten</tspan></text><g transform="matrix(1,0,0,1,-42.9489,-1024.75)"><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1238.41px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Spalten-Überschriften</text></g><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1259.07px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">(seltene <tspan x="918.294px 931.634px " y="1259.07px 1259.07px ">Au</tspan>snahme)</text></g></g><text x="799.631px" y="637.877px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">S<tspan x="814.436px 826.781px 845.271px 863.761px 876.106px 888.451px 894.618px 902.01px 914.355px 919.286px 931.631px 939.023px 944.086px 958.892px 971.237px 982.335px 994.68px 1007.02px 1019.37px 1037.86px 1050.2px " y="637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px ">ummen (hier Ausnahme)</tspan></text><text x="799.631px" y="113.873px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Ü<tspan x="815.661px 828.005px 840.35px 847.742px 858.841px 869.939px 882.284px 889.676px 894.607px 900.774px 906.941px 913.108px 925.453px 937.798px 945.19px 950.996px 962.338px 974.683px 987.027px 999.372px 1004.3px 1009.24px 1021.58px 1027.75px 1035.14px 1047.48px 1059.83px " y="113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px ">berschrift der Tabelle (h3)</tspan></text><g transform="matrix(1,0,0,1,-43.8507,-718.632)"><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1238.41px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Kombinierte Breitenangabe für</text></g><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1259.07px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">rechtsbündige <tspan x="972.786px 986.126px " y="1259.07px 1259.07px ">Au</tspan>srichtung</text></g></g><path d="M782.625,389.924l-48.47,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M792.203,512.612l-256.03,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M792.203,479.248l-346.362,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><rect x="142.982" y="44.179" width="631.009" height="617.19" style="fill:none;stroke:#000;stroke-width:1px;"/><text x="348.055px" y="703.454px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Datenspalte(n)</text><g transform="matrix(1,0,0,1,-204.447,-858.983)"><text x="372.075px" y="1562.44px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Feldbeschriftungen</text><text x="372.075px" y="1583.09px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">(Label)</text></g><g transform="matrix(1,0,0,1,-72.2167,-1057.07)"><text x="870.902px" y="1522.05px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Feldbeschriftung (Block) oberhalb für</text><text x="870.902px" y="1542.7px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">kombinierte <tspan x="978.734px 992.074px " y="1542.7px 1542.7px ">An</tspan>lage in einem Feld</text></g><text x="-2.197px" y="21.475px" style="font-family:'Arial-BoldMT', 'Arial', sans-serif;font-weight:700;font-size:30px;">Horizontale T<tspan x="185.581px 202.266px " y="21.475px 21.475px ">ab</tspan>elle mit <tspan x="331.187px 352.852px " y="21.475px 21.475px ">Ab</tspan>messungen und Formular-Elementen</text><path d="M252.599,681.288l0,-32.491" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M410.002,681.288l0,-32.491" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M792.203,512.612l-256.03,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/></svg>
\ No newline at end of file
diff --git a/css/developement/index.html b/css/developement/index.html
new file mode 100644
index 000000000..9cb456737
--- /dev/null
+++ b/css/developement/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <link href="../style.css" rel="stylesheet">
+  <title>Test und Entwicklung des Kivitendo-CSS</title>
+</head>
+<body class="developing">
+<div class="wrapper">
+<header>
+  <h1>Entwicklung &amp; Dokumentation des Kivitendo-CSS</h1>
+	<nav></nav>
+</header>
+
+<p>Diese Mini-Site dient zur Entwicklung und Dokumentation des neuen Designs von Kivitendo. Das bedeutet auch, dass die neuen, aktuellen Kivitendo-Stylesheets hier ebenfalls angewendet werden.</p>
+<ul>
+	<li><a href="form-elements.html" title="Formular-Elemente">Formular-Elemente</a></li>
+	<li><a href="form-elements-special.html" title="Formular-Elemente">Spezielle Formular-Elemente</a></li>
+	<li><a href="tables.html" title="Tabellen in Kivitendo">Tabellen</a></li>
+	<li><a href="table-dimensions.html" title="Tabellen-Abmessungen in Kivitendo">Tabellen-Abmessungen</a></li>
+	<li><a href="farben.html" title="Details zum Einsatz von Farben in Kivitendo">Einsatz von Farben</a></li>
+	<li><a href="farben-demo.html" title="Anzeige aller Farben in Kivitendo">Alle Farben in Kivitendo</a></li>
+	<li><a href="anleitung.html" title="Anzeige aller Farben in Kivitendo">Anleitung & Grundregeln</a></li>
+</ul>
+
+</div>
+</body>
+</html>
diff --git a/css/developement/table-dimensions.html b/css/developement/table-dimensions.html
new file mode 100644
index 000000000..0494750ca
--- /dev/null
+++ b/css/developement/table-dimensions.html
@@ -0,0 +1,699 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <link href="../style.css" rel="stylesheet">
+  <title>Tabellen in Kivitendo</title>
+  
+  <script type="text/javascript" src="/js/jquery.js"></script>
+  <script type="text/javascript" src="/js/common.js"></script>
+  <script type="text/javascript" src="/js/namespace.js"></script>
+  <script type="text/javascript" src="/js/kivi.js"></script>
+  <script type="text/javascript" src="/js/locale/de.js"></script>
+  <script type="text/javascript" src="/js/jquery-ui.js"></script>
+  <script type="text/javascript" src="/js/kivi.QuickSearch.js"></script>
+  <script type="text/javascript" src="/js/kivi.ActionBar.js"></script>
+  <script type="text/javascript" src="/js/kivi.Draft.js"></script>
+  <script type="text/javascript" src="/js/kivi.File.js"></script>
+  <script type="text/javascript" src="/js/kivi.SalesPurchase.js"></script>
+  <script type="text/javascript" src="/js/kivi.Part.js"></script>
+  <script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
+  <script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
+  <script type="text/javascript" src="/js/kivi.io.js"></script>
+  <script type="text/javascript" src="/js/autocomplete_customer.js"></script>
+  <script type="text/javascript" src="/js/client_js.js"></script>
+  <script type="text/javascript" src="/js/jquery.cookie.js"></script>
+  <script type="text/javascript" src="/js/jquery.checkall.js"></script>
+  <script type="text/javascript" src="/js/jquery.download.js"></script>
+  <script type="text/javascript" src="/js/jquery/jquery.form.js"></script>
+  <script type="text/javascript" src="/js/jquery/fixes.js"></script>
+  <script type="text/javascript" src="/js/jquery/jquery.tooltipster.min.js"></script>
+  <script type="text/javascript" src="/js/jquery/ui/i18n/jquery.ui.datepicker-de.js"></script>
+  
+</head>
+<body class="developing">
+<header>
+  <h1>Abmessungen der horizontalen Tabellen in Kivitendo</h1>
+	<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
+</header>
+
+<form action="#">
+
+<div class="wrapper">
+
+<p></p>
+</div><!-- /.wrapper -->
+
+
+
+<div class="wrapper clear">
+<div class="col">
+
+
+<h2>Small</h2>
+
+<table class="tbl-horizontal test-plain">
+	<caption>Colums Small &amp; Small</caption>
+	<colgroup> <col class="wi-small"><col class="wi-small"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Label</th>
+			<td><div class="data">div.data</div></td>
+		</tr>
+		<tr>
+			<th>Label</th>
+			<td class="data">td.data</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal wi-small-small test-plain">
+	<caption>Table Small-Small</caption>
+	<tbody>
+		<tr>
+			<td><div class="data">div.data</div></td>
+		</tr>
+		<tr>
+			<td class="data">td.data</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal test-plain">
+	<caption>Small Formelemente</caption>
+	<colgroup><col class="wi-small"><col class="wi-small"></colgroup>
+	<tbody>
+		<tr>
+			<th>Textfeld</th>
+			<td><input type="text" name="input-type-text-small-small-1-1" class="wi-small"><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button></td>
+		</tr>
+		<tr>
+			<th>Textfeld</th>
+			<td><input type="text" name="input-type-text-small-small-1-2" class="wi-small">mm</td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			<select id="slct-small-1" name="slct-small-1" class="wi-small">
+				<option value=""></option>
+				<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+				<option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+				<option value="Timothy Leary">Timothy Leary</option>
+				<option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			</select><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button></td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal test-plain wi-small-small">
+	<caption>Small-Small Textarea</caption>
+	<colgroup> <col class="wi-small-small"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>KEIN Texteditor</th>
+		</tr>
+		<tr>
+			<td><span class="label">Nur Textarea</span>
+			  <textarea name="texteditor-small-small" id="texteditor-small-small" class="wi-small-small">Diese Abmessung sollte nicht für den CKEditor verwendet werden.</textarea>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+
+<div class="test-box wi-small">Div .small</div>
+<div class="test-box wi-small">Div .small</div>
+
+
+
+</div><!-- /.col -->
+<div class="col">
+
+
+<h2>Mediumsmall</h2>
+
+<table class="tbl-horizontal test-plain">
+	<caption>Colums Small &amp; Mediumsmall</caption>
+	<colgroup> <col class="wi-small"><col class="wi-mediumsmall"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Label</th>
+			<td><div class="data">div.data</div></td>
+		</tr>
+		<tr>
+			<th>Label</th>
+			<td class="data">td.data</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal wi-small-mediumsmall test-plain">
+	<caption>Table Small-Mediumsmall</caption>
+	<tbody>
+		<tr>
+			<td><div class="data">div.data</div></td>
+		</tr>
+		<tr>
+			<td class="data">td.data</td>
+		</tr>
+	</tbody>
+
+</table>
+
+<table class="tbl-horizontal test-plain">
+	<caption>Mediumsmall Formelemente</caption>
+	<colgroup><col class="wi-small"><col class="wi-mediumsmall"></colgroup>
+	<tbody>
+		<tr>
+			<th>Textfeld</th>
+			<td><input type="text" name="input-type-text-small-mediumsmall-2-1" class="wi-mediumsmall"><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button></td>
+		</tr>
+		<tr>
+			<th>Textfeld</th>
+			<td><input type="text" name="input-type-text-small-mediumsmall-2-2" class="wi-mediumsmall">mm</td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			<select id="slct-small-mediumsmall" name="slct-small-mediumsmall" class="wi-mediumsmall">
+				<option value=""></option>
+				<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+				<option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+				<option value="Timothy Leary">Timothy Leary</option>
+				<option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			</select><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button></td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal test-plain wi-small-mediumsmall">
+	<caption>Small-Mediumsmall Textarea</caption>
+	<colgroup> <col class="wi-small-mediumsmall"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>KEIN Texteditor</th>
+		</tr>
+		<tr>
+			<td>
+        <span class="label">Nur Textarea</span>
+			  <textarea name="texteditor-small-mediumsmall" id="texteditor-small-mediumsmall" class="wi-small-mediumsmall">Diese Abmessung sollte nicht für den CKEditor verwendet werden.</textarea>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<div class="test-box wi-small">Div .small</div>
+<div class="test-box wi-mediumsmall">Div .mediumsmall</div>
+
+
+</div><!-- /.col -->
+<div class="col">
+
+
+<h2>Normal</h2>
+
+<table class="tbl-horizontal test-plain">
+	<caption>Colums Small &amp; Normal</caption>
+	<colgroup> <col class="wi-small"><col class="wi-normal"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Label</th>
+			<td><div class="data">div.data</div></td>
+		</tr>
+		<tr>
+			<th>Label</th>
+			<td class="data">td.data</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal wi-small-normal test-plain">
+	<caption>Table Small-Normal</caption>
+	<tbody>
+		<tr>
+			<td><div class="data">div.data</div></td>
+		</tr>
+		<tr>
+			<td class="data">td.data</td>
+		</tr>
+	</tbody>
+
+</table>
+
+
+<table class="tbl-horizontal test-plain">
+	<caption>Normal Formelemente</caption>
+	<colgroup> <col class="wi-small"><col class="wi-normal"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Textfeld</th>
+			<td>
+			  <input type="text" name="input-type-text-5" class="wi-normal"><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
+			</td>
+		</tr>
+		<tr>
+			<th>Textfeld</th>
+			<td>
+			  <input type="text" name="input-type-text-5" class="wi-normal">mm
+			</td>
+		</tr>
+		<tr>
+			<th>Textarea</th>
+			<td>
+			  <textarea name="txtarea1" class="wi-normal">Dies ist ein ganz langer Text</textarea>
+			</td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			  <select id="slct-5" name="slct-5" class="wi-normal">
+			    <option value=""></option>
+			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+			    <option value="Timothy Leary">Timothy Leary</option>
+			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			  </select><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal test-plain wi-small-normal">
+	<caption>Small-Normal Textarea</caption>
+	<colgroup> <col class="wi-small"><col class="wi-normal"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Texteditor</th>
+		</tr>
+		<tr>
+			<td>
+			  <textarea name="texteditor-1" id="texteditor-1" class="texteditor wi-small-normal">Dies ist ein ganz langer Text</textarea>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<div class="test-box wi-small">Div .small</div>
+<div class="test-box wi-normal">Div .normal</div>
+
+
+
+</div><!-- /.col -->
+</div><!-- /.wrapper -->
+<div class="wrapper clear">
+<div class="col">
+
+
+
+<h2>Lightwide</h2>
+
+<table class="tbl-horizontal test-plain">
+	<caption>Colums Small &amp; Lightwide</caption>
+	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Label</th>
+			<td><div class="data">div.data</div></td>
+		</tr>
+		<tr>
+			<th>Label</th>
+			<td class="data">td.data</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal wi-small-lightwide test-plain">
+	<caption>Table Small-Lightwide</caption>
+	<tbody>
+		<tr>
+			<td><div class="data">div.data</div></td>
+		</tr>
+		<tr>
+			<td class="data">td.data</td>
+		</tr>
+	</tbody>
+
+</table>
+
+
+<table class="tbl-horizontal test-plain">
+	<caption>Lightwide Formelemente</caption>
+	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Textfeld</th>
+			<td>
+			  <input type="text" name="input-type-text-1" class="wi-lightwide"><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
+			</td>
+		</tr>
+		<tr>
+			<th>Textfeld</th>
+			<td>
+			  <input type="text" name="input-type-text-1" class="wi-lightwide">mm
+			</td>
+		</tr>
+		<tr>
+			<th>Textarea</th>
+			<td>
+			  <textarea name="txtarea1" class="wi-lightwide">Dies ist ein ganz langer Text</textarea>
+			</td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			  <select id="slct-1" name="slct-1" class="wi-lightwide">
+			    <option value=""></option>
+			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+			    <option value="Timothy Leary">Timothy Leary</option>
+			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			  </select><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal test-plain wi-small-lightwide">
+	<caption>Small-Lightwide Textarea</caption>
+	<colgroup> <col class="wi-small-lightwide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Texteditor</th>
+		</tr>
+		<tr>
+			<td><textarea name="texteditor-1" id="texteditor-1" class="texteditor wi-small-lightwide">Dies ist ein ganz langer text</textarea></td>
+		</tr>
+	</tbody>
+</table>
+
+<div class="test-box wi-small">Div .small</div>
+<div class="test-box wi-lightwide">Div .lightwide</div>
+
+
+</div><!-- /.col -->
+<div class="col">
+
+
+
+<h2>Wide</h2>
+
+<table class="tbl-horizontal test-plain">
+	<caption>Colums Small &amp; Wide</caption>
+	<colgroup> <col class="wi-small"><col class="wi-wide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Label</th>
+			<td><div class="data">div.data</div></td>
+		</tr>
+		<tr>
+			<th>Label</th>
+			<td class="data">td.data</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal wi-small-wide test-plain">
+	<caption>Table Small-Wide</caption>
+	<tbody>
+		<tr>
+			<td><div class="data">div.data</div></td>
+		</tr>
+		<tr>
+			<td class="data">td.data</td>
+		</tr>
+	</tbody>
+
+</table>
+
+
+<table class="tbl-horizontal test-plain">
+	<caption>Wide Formelemente</caption>
+	<colgroup> <col class="wi-small"><col class="wi-wide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Textfeld</th>
+			<td>
+			  <input type="text" name="input-type-text-9" class="wi-wide"><button name="bttn9" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
+			</td>
+		</tr>
+		<tr>
+			<th>Textfeld</th>
+			<td>
+			  <input type="text" name="input-type-text-9" class="wi-wide">mm
+			</td>
+		</tr>
+		<tr>
+			<th>Textarea</th>
+			<td>
+			  <textarea name="txtarea1" class="wi-wide">Dies ist ein ganz langer Text</textarea>
+			</td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			  <select id="slct9" name="slct-9" class="wi-wide">
+			    <option value=""></option>
+			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+			    <option value="Timothy Leary">Timothy Leary</option>
+			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			  </select><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal test-plain wi-small-wide">
+	<caption>Small-Wide Textarea</caption>
+	<colgroup> <col class="wi-small-wide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Texteditor</th>
+		</tr>
+		<tr>
+			<td>
+			  <textarea name="texteditor-1" id="texteditor-1" class="texteditor wi-small-wide">Dies ist ein ganz langer text</textarea>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+
+<div class="test-box wi-small">Div .small</div>
+<div class="test-box wi-wide">Div .wide</div>
+
+
+
+</div><!-- /.col -->
+<div class="col">
+
+
+
+<h2>Wider</h2>
+
+<table class="tbl-horizontal test-plain">
+	<caption>Colums Small &amp; Wider</caption>
+	<colgroup> <col class="wi-small"><col class="wi-wider"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Label</th>
+			<td><div class="data">div.data</div></td>
+		</tr>
+		<tr>
+			<th>Label</th>
+			<td class="data">td.data</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal wi-small-wider test-plain">
+	<caption>Table Small-Wider</caption>
+	<tbody>
+		<tr>
+			<td><div class="data">div.data</div></td>
+		</tr>
+		<tr>
+			<td class="data">td.data</td>
+		</tr>
+	</tbody>
+
+</table>
+
+
+<table class="tbl-horizontal test-plain">
+	<caption>Wider Formelemente</caption>
+	<colgroup> <col class="wi-small"><col class="wi-wider"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Textfeld</th>
+			<td>
+			  <input type="text" name="input-type-text-3" class="wi-wider"><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
+			</td>
+		</tr>
+		<tr>
+			<th>Textfeld</th>
+			<td>
+			  <input type="text" name="input-type-text-3" class="wi-wider">mm
+			</td>
+		</tr>
+		<tr>
+			<th>Textarea</th>
+			<td>
+			  <textarea name="txtarea1" class="wi-wider">Dies ist ein ganz langer Text</textarea>
+			</td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			  <select id="slct-3" name="slct-3" class="wi-wider">
+			    <option value=""></option>
+			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+			    <option value="Timothy Leary">Timothy Leary</option>
+			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			  </select><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal test-plain wi-small-wider">
+	<caption>Small-Wider Textarea</caption>
+	<colgroup> <col class="wi-small-wider"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Texteditor</th>
+		</tr>
+		<tr>
+			<td>
+			  <textarea name="texteditor-1" id="texteditor-1" class="texteditor wi-small-wider">Dies ist ein ganz langer text</textarea>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+
+<div class="test-box wi-small">Div .small</div>
+<div class="test-box wi-wider">Div .wider</div>
+
+
+
+</div><!-- /.col -->
+<div class="col">
+
+
+
+<h2>Verywide</h2>
+
+<table class="tbl-horizontal test-plain">
+	<caption>Colums Small &amp; Verywide</caption>
+	<colgroup> <col class="wi-small"><col class="wi-verywide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Label</th>
+			<td><div class="data">div.data</div></td>
+		</tr>
+		<tr>
+			<th>Label</th>
+			<td class="data">td.data</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal wi-small-verywide test-plain">
+	<caption>Table Small-Verywide</caption>
+	<tbody>
+		<tr>
+			<td><div class="data">Value 2</div></td>
+		</tr>
+	</tbody>
+</table>
+
+
+<table class="tbl-horizontal test-plain">
+	<caption>Verywide Formelemente</caption>
+	<colgroup> <col class="wi-small"><col class="wi-verywide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Textfeld</th>
+			<td>
+			  <input type="text" name="input-type-text-4" class="wi-verywide"><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
+			</td>
+		</tr>
+		<tr>
+			<th>Textfeld</th>
+			<td>
+			  <input type="text" name="input-type-text-4" class="wi-verywide">mm
+			</td>
+		</tr>
+		<tr>
+			<th>Textarea</th>
+			<td>
+			  <textarea name="txtarea1" class="wi-verywide">Dies ist ein ganz langer Text</textarea>
+			</td>
+		</tr>
+		<tr>
+			<th>Select</th>
+			<td>
+			  <select id="slct-4" name="slct-4" class="wi-verywide">
+			    <option value=""></option>
+			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
+			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
+			    <option value="Timothy Leary">Timothy Leary</option>
+			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
+			  </select><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal test-plain wi-small-verywide">
+	<caption>Small-Verywide Textarea</caption>
+	<colgroup> <col class="wi-small-verywide"> </colgroup> 
+	<tbody>
+		<tr>
+			<th>Texteditor</th>
+		</tr>
+		<tr>
+			<td>
+			  <textarea name="texteditor-1" id="texteditor-1" class="texteditor wi-small-verywide">Dies ist ein ganz langer text</textarea>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+
+
+<div class="test-box wi-small">Div .small</div>
+<div class="test-box wi-verywide">Div .verywide</div>
+
+
+
+</div><!-- /.col -->
+<div class="col">
+
+<h2>Verysmall &amp; Smallest (nur DIVs)</h2>
+
+<div style="clear:left;margin:0 0 1.0em 0;overflow:hidden;">
+<h3 class="caption">Div Verysmall</h3>
+<div class="test-box wi-small">Div .small</div>
+<div class="test-box wi-verysmall">Div .verysmall</div>
+</div>
+<div style="clear:left;margin-bottom:1.0em">
+<h3 class="caption">Div Verysmall</h3>
+<div class="test-box wi-small">Div .small</div>
+<div class="test-box wi-smallest">Div .smallest</div>
+</div>
+</div>
+
+
+
+
+
+
+</div><!-- /.wrapper -->
+
+</form>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/css/developement/tables.html b/css/developement/tables.html
new file mode 100644
index 000000000..b00f88038
--- /dev/null
+++ b/css/developement/tables.html
@@ -0,0 +1,440 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <link href="../style.css" rel="stylesheet">
+  <title>Tabellen in Kivitendo</title>
+  <style type="text/css">
+    p.p1 {padding:0;margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px monospace; color: #d02226; -webkit-text-stroke: #d02226;font-family: monospace;}
+    p.p2 {padding:0;margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Times; color: #374ef5; -webkit-text-stroke: #374ef5;font-family: monospace;}
+    p.p3 {padding:0;margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Times; color: #141414; -webkit-text-stroke: #141414;font-family: monospace;}
+    p.p4 {padding:0;margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Times; color: #c83a82; -webkit-text-stroke: #c83a82;font-family: monospace;}
+    p.p5 {padding:0;margin: 0.0px 0.0px 12.0px 0.0px; font: 19.0px Times; color: #374ef5; -webkit-text-stroke: #374ef5;font-family: monospace;}
+    span.s1 {font-kerning: none}
+    span.s2 {font-kerning: none; color: #000000; -webkit-text-stroke: 0px #000000}
+    span.s3 {font-kerning: none; color: #bb5f0a; -webkit-text-stroke: 0px #bb5f0a}
+    span.s4 {font-kerning: none; color: #c83a82; -webkit-text-stroke: 0px #c83a82}
+    span.s5 {font-kerning: none; color: #374ef5; -webkit-text-stroke: 0px #374ef5}
+    span.s6 {font-kerning: none; color: #141414; -webkit-text-stroke: 0px #141414}
+    p.p1 , p.p2 , p.p3 , p.p4 , p.p5 , span.s1 , span.s2 , span.s3 , span.s4 , span.s5 , span.s6 {font-size: 90% ;}
+    .picture{ background-color: #fff; padding: 0.8em ; border: 1px #aaa solid ; }
+  </style>
+
+
+</head>
+<body class="developing">
+<header>
+  <h1>Tabellen in Kivitendo</h1>
+	<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
+</header>
+<div class="wrapper">
+<h2>Horizontale Tabelle (Klasse «tbl-horizontal»)</h2>
+<h3>Einleitung & grundlegender Code</h3>
+<p>
+Die horizontalen Tabellen dienen als Standard-Container für die Plazierung und Anzeige von Daten und Eingabe-Elementen. Die Struktur dieser Tabellen-Klasse ist ziemlich starr, was darin begründet wird, dass diese dynamisch rechts umfliesst, Gruppierung ermöglicht und sich einfach erweitern lässt, indem man eine einfache Zeile einfügt. Die erste Spalte enthält ausschliesslich Titel-Tabellen-Zellen (TH), die weiteren bestehen aus Daten-Tabellen-Zellen (TD). Weitere Klassen und Style in den enthaltenen Elementen sind nur in Ausnahmefällen nötig. Die grundlegende Aufbau dieser Tabellenklasse sieht wie folgt aus.
+</p>
+<pre><code>&lt;table class="tbl-horizontal"&gt;
+  &lt;caption&gt;Tabllentitel (Caption)&lt;/caption&gt;
+  &lt;colgroup&gt;
+    &lt;col class="wi-small"&gt;
+    &lt;col class="wi-lightwide"&gt;
+  &lt;/colgroup&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Feldbezeichnung&lt;/th&gt;
+      &lt;td&gt;Wert oder Formular-Element&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</code></pre>
+
+<table class="tbl-horizontal" style="float: none;">
+  <caption>Elemente Horizontale Tabelle</caption>
+  <colgroup>
+    <col class="wi-normal">
+    <col class="wi-verywide">
+  </colgroup>
+  <tbody>
+    <tr>
+      <th>CAPTION</th>
+      <td>Überschrift der Tabelle, die in die Tabelle selber eingekapselt wird. Das erleichtert nicht nur das Verschieben der Tabelle.</td>
+    </tr>
+    <tr>
+      <th>COLGROUP &gt; COL</th>
+      <td>Spaltendefinitionen mit begrenzter Funktionalität, wobei hier im wesentlichen Spaltenbreiten-Angaben zur Geltung kommen, leider keine Ausrichtung also kein rechtsbündiges Ausrichten. Beachten Sie, dass COL ein leeres Element ist, das kein abschliessendes Tag benötigt. Zudem muss es in der COLGROUP untergebracht sein.</td>
+    </tr>
+    <tr>
+      <th>TBODY</th>
+      <td>Datenkörper der Tabelle, zwingend anzuwenden, auch wenn optional einsetzbar. Ermöglicht auch ein effizientes Code-Falten der Tabelle, sodass der Titel (Caption) im Text-Editor sichtbar bleibt.</td>
+    </tr>
+    <tr>
+      <th>TH</th>
+      <td>Label bzw. Feldbezeichnung</td>
+    </tr>
+    <tr>
+      <th>TD</th>
+      <td>Feldwerte oder Eingabe-Felder aller Art inkl. nebenstehendem Icon oder Kurztext.</td>
+    </tr>
+    <tr>
+      <th>Feldbezeichnung</th>
+      <td>Wert</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<h3>Plazierung horizontaler Tabellen in einem .WRAPPER-Block</h3>
+<p>Befinden sich Horizontale Tabellen in einem <b>.WRAPPER-Block</b>, werden diese links ausgerichtet (float:left;) bzw. rechts angefügt. Soll zwingend ein Zeilen-Umbruch (clear) stattfinden, nächste Tabelle einfach in eine weitere, anschliessende .WRAPPER-Box setzen. Der Wrapper erzeugt einen Abstand zum Fensterrand und einen abschliessenden Zeilenumbruch. Standardmässig sind maximal drei Tabellen in einer .WRAPPER-Zeile vorgesehen (Standard-Bildschirmauflösung)</p>
+</div><!-- /.wrapper -->
+<p class="picture"><img src="images/Tabellen_in_Wrapper-Bloecken.png" width="800" height="556" alt="Tabellen_in_Wrapper-Bloecken"></p>
+<h4>Beispiel:</h4>
+<div class="wrapper">
+
+<table class="tbl-horizontal">
+	<caption>Caption horizontale Tabelle</caption>
+	<colgroup> <col class="wi-verysmall"><col class="wi-normal"> </colgroup>
+	<tbody>
+		<tr>
+			<th>Label 1</th>
+			<td>Wert 1</td>
+		</tr>
+		<tr>
+			<th>Label 2</th>
+			<td>Wert 2</td>
+		</tr>
+		<tr>
+			<th>Label 3</th>
+			<td>Wert 3</td>
+		</tr>
+		<tr>
+			<th>Label 4</th>
+			<td>Wert 4</td>
+		</tr>
+		<tr>
+			<th>Label 5</th>
+			<td>Wert 6</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal">
+	<caption>Tabelle mit COL .wi-verysmall & .wi-wide</caption>
+	<colgroup> <col class="wi-verysmall"><col class="wi-wide"> </colgroup>
+	<tbody>
+		<tr>
+			<th>Label 1</th>
+			<td>Wert 1</td>
+		</tr>
+		<tr>
+			<th>Label 2</th>
+			<td>Wert 2</td>
+		</tr>
+		<tr>
+		  <th class="caption" colspan="2">Caption Zeile</th>
+		</tr>
+		<tr>
+			<th>Label 3</th>
+			<td>Wert 3</td>
+		</tr>
+		<tr>
+			<th>Label 4</th>
+			<td>Wert 4</td>
+		</tr>
+	</tbody>
+</table>
+
+<div class="col" style="background-color:#FFC0D6;padding: 0 0.2em 1.2em 0.2em">
+  <table class="tbl-horizontal">
+    <caption>Tabelle 1 IN SPALTE</caption>
+    <colgroup> <col class="wi-verysmall"><col class="wi-normal"> </colgroup>
+    <tbody>
+      <tr>
+        <th>Label 1</th>
+        <td>Wert 1</td>
+      </tr>
+      <tr>
+        <th>Label 2</th>
+        <td>Wert 2</td>
+      </tr>
+    </tbody>
+  </table>
+  <table class="tbl-horizontal">
+    <caption>Tabelle 2 IN SPALTE</caption>
+    <colgroup> <col class="wi-verysmall"><col class="wi-normal"> </colgroup>
+    <tbody>
+      <tr>
+        <th>Label 1</th>
+        <td>Wert 1</td>
+      </tr>
+      <tr>
+        <th>Label 2</th>
+        <td>Wert 2</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+</div><!-- /.wrapper -->
+<div class="wrapper">
+
+<table class="tbl-horizontal">
+	<caption>Caption horizontale Tabelle</caption>
+	<colgroup>
+	  <col class="wi-verysmall"><col class="wi-normal">
+	</colgroup>
+	<tbody>
+		<tr>
+			<th>Label 1</th>
+			<td>Wert 1</td>
+		</tr>
+		<tr>
+			<th>Label 2</th>
+			<td>Wert 2</td>
+		</tr>
+		<tr>
+		  <th class="caption" colspan="2">Caption Zeile</th>
+		</tr>
+		<tr>
+			<th>Label 3</th>
+			<td>Wert 3</td>
+		</tr>
+		<tr>
+			<th>Label 4</th>
+			<td>Wert 4</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="tbl-horizontal">
+	<caption>Tabelle mit COL .wi-verysmall & .wi-wide</caption>
+	<colgroup>
+	  <col class="wi-verysmall"><col class="wi-wide">
+	</colgroup>
+	<tbody>
+		<tr>
+			<th>Label 1</th>
+			<td>Wert 1</td>
+		</tr>
+		<tr>
+			<th>Label 2</th>
+			<td>Wert 2</td>
+		</tr>
+		<tr>
+		  <th class="caption" colspan="2">Caption Zeile</th>
+		</tr>
+		<tr>
+			<th>Label 3</th>
+			<td>Wert 3</td>
+		</tr>
+		<tr>
+			<th>Label 4</th>
+			<td>Wert 4</td>
+		</tr>
+	</tbody>
+</table>
+
+
+</div><!-- /.wrapper -->
+
+<div class="wrapper">
+<p><b>Mehrere horizontale Tabellen</b> können in einem Spalten-Block (<code>DIV.COL</code>) untergebracht werden (siehe Beispiel oben <span style="background-color:#FFC0D6;">Block mit roter Hintergrundfarbe</span>). Das könnte vor allem bei kleinen Tabellen Sinn machen.<br>Ein <b>Caption</b> kann auch <b>innerhalb eines TBODY</b> angebracht werden<br>&LT;TR&GT;&LT;TH.CAPTION COLSPAN="2"&GT;caption&lt;CAPTION&GT;&LT;TR&GT;<br>Siehe letzte Tabelle im vorherigen Beispiel.</p>
+
+<h3>Ausrichtung und Breite der Spalten</h3>
+<p>Um ein ausgewogenes, ruhiges Erscheinungsbild der Benutzeroberfläche zu erhalten, ist es nicht unwichtig, dass die Tabellen-Spalten und Formular-Elemente vertikal bündig ausgerichtet sind. Auch wenn es manche Programmierer nicht als nötig erachten, muss doch der tägliche Einsatz durch den einfachen Benutzer dabei im Vordergrund stehen. Aber diese Angelegenheit ist einfacher zu bewältigen, als es zuerst klingt, denn es gibt da den bereits erwähnte Zauber-Code COLGROUP > COL und die zur Verfügung gestellten assoziativen Abmessungsklassen.</p>
+<p class="picture"><img src="images/Tabelle_Horizontal_mit_Elementen.svg" width="800" height="532" alt="Tabelle_Horizontal_mit_Elementen"></p>
+<h4>Beispiel:</h4>
+<form action="#">
+  <table class="tbl-horizontal">
+    <caption>Tabelle mit Elementen</caption>
+    <colgroup>
+      <col class="wi-small">
+      <col class="wi-lightwide">
+    </colgroup>
+    <tbody>
+      <tr>
+        <th>Feldbezeichnung</th>
+        <td><input type="text" value="" size="10" class="wi-lightwide" name="npt1"></td>
+      </tr>
+      <tr>
+        <th>Feldbezeichnung</th>
+        <td><input type="text" value="" size="10" class="wi-lightwide" name="npt2">kg</td>
+      </tr>
+      <tr>
+        <th>Feldbezeichnung</th>
+        <td><select id="slct1" name="slct1" class="wi-lightwide"><option value="Halli">Halli</option><option value="Hallo">Hallo</option></select></td>
+      </tr>
+      <tr>
+        <th colspan="2"><span class="label above">Feldbezeichnung</span><textarea name="txtarea1" class="wi-small-lightwide" cols="10" rows="4"></textarea></th>
+      </tr>
+    </tbody>
+  </table>
+</form>
+
+
+
+
+
+
+
+
+
+<h2>Listen-Tabelle mit Kopfzeile (tbl-list)</h2>
+<p>Diese komplexen Tabellen benötigen ein zwingend korrektes Konstrukt, um eine optimale Darstellungsqualität zu erreichen, die genug Freiraum für nachträgliche Gestaltung via CSS erlaubt. THEAD- und TBODY-Container müssen zwingend gesetzt sein, optional auch der TFOOT-Container für Summenangaben. Listen-Tabellen, die sich über die ganze Seite erstrecken, müssen nicht zwingend in einem .WRAPPER-Block liegen. Schmale Listen-Tabellen in einem .WRAPPER-Block erhalten automatisch links und rechts einen abschliessenden Rand. Grundlegendes Code-Beispiel:</p>
+
+<!--
+<pre><code>&lt;table class="tbl-list"&gt;
+  &lt;caption&gt;Caption der Listen-Tabelle&lt;/caption&gt;
+  &lt;colgroup&gt;
+    &lt;col class="wi-mediumsmall"&gt;&lt;col class="wi-small"&gt;&lt;col class="wi-small"&gt;
+  &lt;/colgroup&gt;
+  &lt;thead&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Column Header 1&lt;/th&gt;
+    &lt;th&gt;Column Header 2&lt;/th&gt;
+    &lt;th class="right"&gt;Total Header 3&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+  &lt;tr&gt;
+    &lt;th&gt;R1C1&lt;/th&gt;
+    &lt;td&gt;R1C2&lt;/td&gt;
+    &lt;td class="numeric"&gt;100&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;R2C1&lt;/td&gt;
+    &lt;td&gt;R2C2&lt;/td&gt;
+    &lt;td class="numeric"&gt;200&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tfoot&gt;
+    &lt;th colspan="2"&gt;Summe&lt;/th&gt;
+    &lt;th class="numeric"&gt;300&lt;/th&gt;
+  &lt;/tfoot&gt;
+&lt;/table&gt;
+</code></pre>
+ -->
+
+<div class="code-highlighted">
+<p class="p4"><span class="s5"><span class="indent"> &nbsp;&nbsp; </span>&lt;table </span><span class="s3"> class=</span><span class="s1">"tbl-list"</span><span class="s5">&gt;</span></p><p class="p3"><span class="s5"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;caption&gt;</span><span class="s1">Caption der Listen-Tabelle</span><span class="s5">&lt;/caption&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;colgroup&gt;</span></p><p class="p4"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;col </span><span class="s3"> class=</span><span class="s1">"wi-mediumsmall"</span><span class="s5">&gt;</span></p><p class="p4"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;col </span><span class="s3"> class=</span><span class="s1">"wi-mediumsmall"</span><span class="s5">&gt;</span></p><p class="p4"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;col </span><span class="s3"> class=</span><span class="s1">"wi-small"</span><span class="s5">&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;/colgroup&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;thead&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;tr&gt;</span></p><p class="p3"><span class="s5"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;th&gt;</span><span class="s1">Column Header 1</span><span class="s5">&lt;/th&gt;</span></p><p class="p3"><span class="s5"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;th&gt;</span><span class="s1">Column Header 2</span><span class="s5">&lt;/th&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;th </span><span class="s3"> class=</span><span class="s4">"right"</span><span class="s1">&gt;</span><span class="s6">Total Header 3</span><span class="s1">&lt;/th&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;/tr&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;/thead&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;tbody&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;tr&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;th&gt;</span><span class="s6">R1C1</span><span class="s1">&lt;/th&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;td&gt;</span><span class="s6">R1C2</span><span class="s1">&lt;/td&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;td </span><span class="s3"> class=</span><span class="s4">"numeric"</span><span class="s1">&gt;</span><span class="s6">100</span><span class="s1">&lt;/td&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;/tr&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;tr&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;td&gt;</span><span class="s6">R2C1</span><span class="s1">&lt;/td&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;td&gt;</span><span class="s6">R2C2</span><span class="s1">&lt;/td&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;td </span><span class="s3"> class=</span><span class="s4">"numeric"</span><span class="s1">&gt;</span><span class="s6">200</span><span class="s1">&lt;/td&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;/tr&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;/tbody&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;tfoot&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;th </span><span class="s3"> colspan=</span><span class="s4">"2"</span><span class="s1">&gt;</span><span class="s6">Summe</span><span class="s1">&lt;/th&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;th </span><span class="s3"> class=</span><span class="s4">"numeric"</span><span class="s1">&gt;</span><span class="s6">300</span><span class="s1">&lt;/th&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;/tfoot&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp; </span>&lt;/table&gt;</span></p></div>
+
+
+<table class="tbl-list">
+  <caption>Caption der Listen-Tabelle</caption>
+  <colgroup>
+    <col class="wi-mediumsmall"><col class="wi-small"><col class="wi-small">
+  </colgroup>
+	<thead>
+	<tr>
+		<th>Column Header 1</th>
+		<th>Column Header 2</th>
+		<th class="right">Total Header 3</th>
+	</tr>
+	</thead>
+	<tbody>
+	<tr>
+		<th>R1C1</th>
+		<td>R1C2</td>
+		<td class="numeric">100</td>
+	</tr>
+	<tr>
+		<td>R2C1</td>
+		<td>R2C2</td>
+		<td class="numeric">200</td>
+	</tr>
+	</tbody>
+	<tfoot>
+		<th colspan="2">Summe</th>
+		<th class="numeric">300</th>
+	</tfoot>
+</table>
+
+<p>
+Die durchaus optionalen «<code>COLGROUP > COL</code>»-Angaben können nur in Bezug auf Spaltenbreiten angewendet werden, nicht aber auf Ausrichtung oder Schriftgrösse innerhalb der Zellen der Spalte. Vielleicht ändert sich das mit zukünftigen Browser-Versionen.
+</p>
+<p>
+<b>Empfehlung:</b> Vermeiden Sie bitte bei Tabellen mit begrenzter Kardinalität die Stil-Anweisung <b><code>WIDTH="100%"</code></b>. Bei breiten Bildschirmen erschwert diese Ausbreitung die Übersicht über die Daten in den Zeilen. Mit der Klasse <code>.WI-MODERATE</code> werden niedrig-kardinale Tabellen ein wenig verbreitert.
+</p>
+
+</div>
+
+<table class="tbl-list">
+  <caption>Listen-Tabelle nicht im .WRAPPER-Block und mit 100% Breite</caption>
+  <colgroup>
+    <col class="wi-normal"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal">
+    <col class="wi-wide"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal right">
+  </colgroup>
+	<thead>
+	<tr>
+		<th></th>
+		<th>Column 1</th>
+		<th>Column 2</th>
+		<th>Column 3</th>
+		<th>Column 4</th>
+		<th>Column 5</th>
+		<th>Column 6</th>
+		<th class="right">Column 7</th>
+		<th class="right">Column 8</th>
+		<th class="right">Column 9</th>
+	</tr>
+	</thead>
+	<tbody>
+	<tr>
+		<th>Row 1</th>
+		<td>R1C1</td>
+		<td>R1C2R1C2R1C2R1C2</td>
+		<td>R1C3</td>
+		<td>R1C4</td>
+		<td>R1C5</td>
+		<td>R1C6</td>
+		<td class="right">R1C7</td>
+		<td class="right">R1C8</td>
+		<td class="right">R1C9</td>
+	</tr>
+	<tr>
+		<th>Row 2</th>
+		<td>R2C1</td>
+		<td>R2C2</td>
+		<td>R2C3</td>
+		<td>R2C4R2C4R2C4R2C4R2C4</td>
+		<td>R2C5</td>
+		<td>R2C6</td>
+		<td class="right">R2C7</td>
+		<td class="right">R2C8</td>
+		<td class="right">R2C9</td>
+	</tr>
+	<tr>
+		<th>Row 3</th>
+		<td>R3C1</td>
+		<td>R3C2</td>
+		<td>R3C3</td>
+		<td>R3C4</td>
+		<td>R3C5R3C5R3</td>
+		<td>R3C6</td>
+		<td class="right">R3C7</td>
+		<td class="right">R3C8</td>
+		<td class="right">R3C9</td>
+	</tr>
+	<tr>
+		<th>Row 4</th>
+		<td>R4C1</td>
+		<td>R4C2</td>
+		<td>R4C3</td>
+		<td>R4C4</td>
+		<td>R4C5</td>
+		<td>R4C6</td>
+		<td class="right">R4C7</td>
+		<td class="right">R4C8</td>
+		<td class="right">R4C9</td>
+	</tr>
+	</tbody>
+	<tfoot>
+		<th colspan="7">Summen</th>
+		<th class="numeric">Summe C7</th>
+		<th class="numeric">Summe C8</th>
+		<th class="numeric">Summe C9</th>
+	</tfoot>
+</table>
+
+
+</body>
+</html>
diff --git a/css/developement/todo.html b/css/developement/todo.html
new file mode 100644
index 000000000..0951223f4
--- /dev/null
+++ b/css/developement/todo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <link href="../style.css" rel="stylesheet">
+  <title>Kivitendo-Design: To Do's 2018</title>
+</head>
+<body class="developing">
+<header>
+  <h1>Pendenzen betreffend Kivitendo-Design 4.0</h1>
+	<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
+</header>
+<div class="wrapper">
+  <h2>Feldbeschriftungen kürzen</h2>
+  <p>Um eine ruhige, gleichmässige horizontale Tabelle mit Feldbezeichnungsspalte und Datenspalte zu erhalten, ist es notwenig, speziell für die Standard-Bildschirmauflösung bestimmte Feldbezeichnungen zu kürzen. Somit kann die Bezeichnungspalte relativ schmal gehalten werden. Manchmal reicht es, wenn nur drei Buchstaben eingespart werden können.</p>
+  <ul>
+    <li>Einzelbegriffe mit Abschluss «…nummer» kürzen, Beispiel: Bestellnummer ➔ <i>Bestellnr.</i></li>
+    <li>Datum <b>«Von» … «bis»</b> ➔ <i>Generell Begriff <b>«Von»</b> entfernen, sofern unnötig</i></li>
+    <li>Bestellnummer des Kunden ➔ <i>Bestellnr.d.Kunden</i></li>
+    <li>Bestellnummer beim Lieferanten ➔ <i>Bestellnr.b.Lieferantne</i></li>
+    <li>Vorgangsbezeichnung ➔ <i>Vorgangsbezeichn.</i></li>
+  </ul>
+<h2>Tag-Funktionen verbessern oder erweitern</h2>
+<p>Einige Funktionen könnten wirklich mal verbessert werden, indem z.B. die Übergabe einer Klasse möglich wird. Damit lassen sich Elemente deutlich besser mit CSS designen.</p>
+<ul>
+	<li><b>L.date_tag:</b> Übergabe einer Klasse, die dann wirksam als Attribut-/Werte-Paar angezeigt wird, z.B. class="wi-date".<br>Alternativ könnte </li>
+	<li><b>L.input_tag:</b> Standardgrösse anwenden, falls Attribut SIZE nicht übergeben wurde. Beim Übermitteln von Formulardaten gab es häufig Probleme, wenn das Attribut nicht gesetzt werden. Als Standard schlage ich <i>«size=10»</i> vor</li>
+</ul>
+
+</div>
+</body>
+</html>
