commit 1b62523f9f6dff7fee5a8207f338744f7e80212d
Author: Hans P. Schlaepfer <hanspeter.schlaepfer@revamp-it.ch>
Date:   Thu Aug 8 11:33:38 2019 +0200

    css/less -> Geaenderte & Neue Less-Dateien

diff --git a/css/less/OBSOLETE.less b/css/less/OBSOLETE.less
new file mode 100644
index 000000000..8b4b7f3a4
--- /dev/null
+++ b/css/less/OBSOLETE.less
@@ -0,0 +1,87 @@
+// This file is not effacious. It is intended to delete it in the end.
+// Nicht gefundene CSS-Klassen und IDs
+
+
+
+// --------------------------------------
+// FORMER MAIN.LESS
+// --------------------------------------
+
+
+// OBSOLETE: gibt es nicht
+body.admin > h1{
+  top: 21px;
+}
+
+//  PENDENT: obsolete?
+body.menu {
+  color: #000000;
+}
+
+
+
+//  PENDENT: welche Selektoren???
+.accountlistheading {
+  padding: 0.3em;
+  color: #006400;
+  font-weight: bold;
+  text-align: left;
+  background-color: #EBEBEB;
+}
+
+
+.link_separator {
+  margin-left: 6px;
+  margin-right: 6px;
+}
+
+span.toggle_selected {
+  font-weight: bold;
+}
+
+
+//  Infos ueber Suchergebnissen
+div.info{
+    padding: 1.0em;
+    span.info-detail{
+        margin: 0 5.0em 0 0;
+    }
+}
+
+
+
+// --------------------------------------
+// FORMER COMMON.CSS
+// --------------------------------------
+// This file is not effacious. It is intended to delete it in the end.
+
+
+
+input.grow_on_focus {
+    width: 20px;
+    transition:         width 0.1s;
+    -moz-transition:    width 0.1s;
+    -webkit-transition: width 0.1s;
+    -o-transition:      width 0.1s;
+
+    &:focus { width: 150px }
+
+}
+
+/* quirk to force certain constructs to block context  */
+.block-context { overflow: hidden }
+
+
+/* various oneshot decoration for legacy purpose. dont use  */
+.small-text { font-size: @font-size-small; }
+.bold       { font-weight: bold ;}
+
+.float-left  { float: left;  }
+.float-right { float: right; }
+
+
+/* position  */
+.position-relative { position: relative; }
+.position-absolute { position: absolute; }
+
+
diff --git a/css/less/READ_ME.md b/css/less/READ_ME.md
index 2522a46c8..3cb2c57e2 100644
--- a/css/less/READ_ME.md
+++ b/css/less/READ_ME.md
@@ -11,11 +11,11 @@ pure and valid css code with your LESS and CSS code.
 First set the cursor of your terminal to <code>/css/less/</code> (<code>cd /css/less</code>)<br>
 Use following command: <code>lessc style.less ../style.css</code><br>
 For minifiying the output css:  <code>lessc -x style.less ../style.css</code><br>
-Then a new <code>/css/style.css</code> is created except when errors occurs.
+Then a new <code>/css/style.css</code> is created except if errors occur.
 
 ## Developing kivitendo CSS (not customizing)
 Read style.less.<br>
-This is the comand center for the whole less stuff.<br>
+This is the control center for the whole less stuff.<br>
 Variables can be set or changed in variables.less.<br>
 Variables are efficacious in the other less files.
 
@@ -23,7 +23,7 @@ Variables are efficacious in the other less files.
 There are several overriding LESS files. Some of the files are for
 customizing the original kivitendo LESS stuff.
 
- * <b>jquery-ui-overrides.less</b> (overrides original jquery css)
+ * <b>jquery-ui-overrides.less</b> (overrides original jquery css in jquery.less)
  * <b>main-overrides</b> (overrides a lot of kivitendo less/css stuff)
  * <b>custom-variables.less</b> (overrides variables in variable.less)
  * <b>custom.less</b> (overrides all the original kivitendo LESS stuff)
@@ -47,7 +47,7 @@ For customisation do not touch the original (developers) LESS files.<br>
 Therefore it is recommended to edit only these two files:
 
  * <b>custom-variables.less</b> (overrides variables in variable.less)
- * <b>custom.less</b> (overrides all the original kivitendo LESS stuff)
+ * <b>custom.less</b> (overrides in the end all the original kivitendo LESS stuff)
 
 These files can be empty if you do not want to customize the kivitendo CSS
 stuff. The original custom files contains only comments and deactivated example
diff --git a/css/less/_developing_styles.less b/css/less/_developing_styles.less
new file mode 100644
index 000000000..b7378824f
--- /dev/null
+++ b/css/less/_developing_styles.less
@@ -0,0 +1,174 @@
+
+
+
+
+
+
+
+
+
+
+@import 'variables_color_style';
+
+
+
+
+// --------------------------------------
+// CLASSES FOR DESIGNERS
+// --------------------------------------
+
+// Output in designer/developer CSS File (just for developer)
+// don't hesitage to deactivate the following code
+// these classed are not used in kivitendo
+
+h1::after { content: " @{colorstyle}"; } // display style name 
+
+
+:root {
+
+
+  --gray-standard:      @gray-standard;
+  --gray-superdark:     @gray-superdark; // Black
+  --gray-verydark:      @gray-verydark;
+  --gray-darker:        @gray-darker;
+  --gray-dark:          @gray-dark;
+  --gray-light:         @gray-light;
+  --gray-lighter:       @gray-lighter;
+  --gray-verylight:     @gray-verylight;
+  --gray-superlight:    @gray-superlight; // White
+
+  --color-standard:     @brand-standard;
+  --color-superlight:   @brand-superlight;
+  --color-verylight:    @brand-verylight;
+  --color-lighter:      @brand-lighter;
+  --color-light:        @brand-light;
+  --color-dark:         @brand-dark;
+  --color-darker:       @brand-darker;
+  --color-verydark:     @brand-verydark;
+  --color-superdark:    @brand-superdark;
+
+//  --msg-ok-strong:        @color-green-strong; 
+//  --msg-ok-light:         @color-green-light; 
+//  --msg-error-strong:     @color-red-strong; 
+//  --msg-error-light:      @color-red-light; 
+//  --msg-hint-strong:      @color-blue-strong; 
+//  --msg-hint-light:       @color-blue-light; 
+//  --msg-warning-strong:   @color-orange-strong; 
+//  --msg-warning-light:    @color-orange-light; 
+  --msg-ok-strong:        @msg-green-strong; 
+  --msg-ok-light:         @msg-green-light; 
+  --msg-error-strong:     @msg-red-strong; 
+  --msg-error-light:      @msg-red-light; 
+  --msg-hint-strong:      @msg-blue-strong; 
+  --msg-hint-light:       @msg-blue-light; 
+  --msg-warning-strong:   @msg-orange-strong; 
+  --msg-warning-light:    @msg-orange-light; 
+  
+  --color-green-strong:   @color-green-strong;
+  --color-green-light:    @color-green-light;
+  --color-red-strong:     @color-red-strong;
+  --color-red-light:      @color-red-light;
+  --color-blue-strong:    @color-blue-strong;
+  --color-blue-light:     @color-blue-light;
+  --color-orange-strong:  @color-orange-strong;
+  --color-orange-light:   @color-orange-light;  
+  
+  
+  
+  --spin_60 : spin(@brand-standard,  60);
+  --spin_120: spin(@brand-standard, 120);
+  --spin_180: spin(@brand-standard, 180);
+  --spin_240: spin(@brand-standard, 240);
+  
+  --style-ocean:            @style_ocean;
+  --style-light_blue:       @style_light_blue;
+  --style-aqua:             @style_aqua;
+  --style-turquoise:        @style_turquoise;
+  --style-pine:             @style_pine;
+  --style-asparagus:        @style_asparagus;
+  --style-petrol:           @style_petrol;
+  --style-salmona:          @style_salmona;  
+  --style-salmon:           @style_salmon; 
+  --style-tangerine:        @style_tangerine; 
+  --style-marascino:        @style_marascino;
+  --style-maroon:           @style_maroon;
+  --style-strawberry:       @style_strawberry;
+  --style-pure_red:         @style_pure_red;
+  --style-old_lemon:        @style_old_lemon; 
+  --style-yellow_to_green:  @style_yellow_to_green;
+  --style-eggplant:         @style_eggplant;
+  --style-plum:             @style_plum;
+  --style-grape:            @style_grape;
+  --style-magenta:          @style_magenta;
+  --style-lavender:         @style_lavender;
+  --style-cayenne:          @style_cayenne;
+  --style-mocha:            @style_mocha;
+  --style-cantaloupe:       @style_cantaloupe; 
+  --style-dark_brown:       @style_dark_brown;
+  --style-orange_brown:     @style_orange_brown;
+  --style-smack_brown:      @style_smack_brown;
+  --style-green_brown:      @style_green_brown; 
+
+
+}
+
+.color-standard   { color: var(--color-standard); }
+.color-superlight { color: var(--color-superlight); }
+.color-verylight  { color: var(--color-verylight); }
+.color-lighter    { color: var(--color-lighter); }
+.color-light      { color: var(--color-light); }
+.color-dark       { color: var(--color-dark); }
+.color-darker     { color: var(--color-darker); }
+.color-verydark   { color: var(--color-verydark); }
+.color-superdark  { color: var(--color-superdark); }
+
+.bg-standard      { background-color: var(--color-standard); }
+.bg-superlight    { background-color: var(--color-superlight); }
+.bg-verylight     { background-color: var(--color-verylight); }
+.bg-lighter       { background-color: var(--color-lighter); }
+.bg-light         { background-color: var(--color-light); }
+.bg-dark          { background-color: var(--color-dark); }
+.bg-darker        { background-color: var(--color-darker); }
+.bg-verydark      { background-color: var(--color-verydark); }
+.bg-superdark     { background-color: var(--color-superdark); }
+
+
+// Messages
+.msg-ok                 { background-color: var(--msg-ok-light);       color: var(--msg-ok-strong);       border-color: var(--msg-ok-strong); }
+.msg-error              { background-color: var(--msg-error-light);    color: var(--msg-error-strong);    border-color: var(--msg-error-strong); }
+.msg-hint               { background-color: var(--msg-hint-light);     color: var(--msg-hint-strong);     border-color: var(--msg-hint-strong); }
+.msg-warning            { background-color: var(--msg-warning-light);  color: var(--msg-warning-strong);  border-color: var(--msg-warning-strong); }
+// Message Original Colors
+.color-ok               { background-color: var(--color-green-light);  color: var(--color-green-strong);  border-color: var(--color-green-strong); }
+.color-error            { background-color: var(--color-red-light);    color: var(--color-red-strong);    border-color: var(--color-red-strong); }
+.color-hint             { background-color: var(--color-blue-light);   color: var(--color-blue-strong);   border-color: var(--color-blue-strong); }
+.color-warning          { background-color: var(--color-orange-light); color: var(--color-orange-strong); border-color: var(--color-orange-strong); }
+
+.style-ocean            { background-color: var( --style-ocean ); } 
+.style-light_blue       { background-color: var( --style-light_blue ); } 
+.style-aqua             { background-color: var( --style-aqua ); } 
+.style-turquoise        { background-color: var( --style-turquoise ); } 
+.style-pine             { background-color: var( --style-pine ); } 
+.style-asparagus        { background-color: var( --style-asparagus ); } 
+.style-petrol           { background-color: var( --style-petrol ); } 
+.style-salmona          { background-color: var( --style-salmona ); }   
+.style-salmon           { background-color: var( --style-salmon ); }  
+.style-tangerine        { background-color: var( --style-tangerine ); }  
+.style-marascino        { background-color: var( --style-marascino ); } 
+.style-maroon           { background-color: var( --style-maroon ); } 
+.style-strawberry       { background-color: var( --style-strawberry ); } 
+.style-pure_red         { background-color: var( --style-pure_red ); } 
+.style-old_lemon        { background-color: var( --style-old_lemon ); }  
+.style-yellow_to_green  { background-color: var( --style-yellow_to_green ); } 
+.style-eggplant         { background-color: var( --style-eggplant ); } 
+.style-plum             { background-color: var( --style-plum ); } 
+.style-grape            { background-color: var( --style-grape ); } 
+.style-magenta          { background-color: var( --style-magenta ); } 
+.style-lavender         { background-color: var( --style-lavender ); } 
+.style-cayenne          { background-color: var( --style-cayenne ); } 
+.style-mocha            { background-color: var( --style-mocha ); } 
+.style-cantaloupe       { background-color: var( --style-cantaloupe ); }  
+.style-dark_brown       { background-color: var( --style-dark_brown ); } 
+.style-orange_brown     { background-color: var( --style-orange_brown ); } 
+.style-smack_brown      { background-color: var( --style-smack_brown ); } 
+.style-green_brown      { background-color: var( --style-green_brown ); }  
\ No newline at end of file
diff --git a/css/less/admin.less b/css/less/admin.less
index 3386d2427..1bbca6a8a 100644
--- a/css/less/admin.less
+++ b/css/less/admin.less
@@ -39,54 +39,61 @@ body {
     top: 0 important;
   }
 
-
-
   div.admin {
-    margin: 60px 0 0 0 ;
-    //top: 60px;
+    padding: 60px 0 0 0 ;
+    .bg-content ;
 
     h1 {
       background-color: #fe5f14 !important;
-      color: #ffffff;
-      top: 30px ;
-      position: fixed;
-      width: 100% ;
-      padding: 0.6em 0.5em 0.5em 0.6em;
-      z-index: 1000;
+      color:             #ffffff;
+      top:               30px ;
+      position:         fixed;
+      width:             100% ;
+      padding:           0.6em 0.5em 0.5em 0.6em;
+      z-index:           1000;
 
       & + .wrapper {
         padding-top: 1.2em;
-      //margin-top: 1.0em ;
-      //top: 1.0em;
-      //&:first-child{
-      //padding-top: 2.0em;
-      //}
       }
     }
 
+    // Login-Form with big logo
+
+    .logo {
+      width:     auto;
+      clear:     both;
+      margin:   3.0em auto 1.0em auto;
+      padding:   2.0em 0 0 0;    
+    }
+    
+    .separate-form{
+      background-color: #ddd ;
+      border: 1px @gray-standard solid;
+      border-radius: @controlpanel-radius ;
+      display: block ;
+      width: 24.0em;
+      margin: 0 auto ;
+      padding: 0.7em 0.6em 1.0em 0.6em ;
+    }
+
     .tabwidget {
-      //top: 35px ;
-      padding: 2.4em 0 0 0 !important;
+      padding:         2.4em 0 0 0 !important;
       .ui-tabs-nav{
-        top: 66px;
+        top:           66px;
       }
       .ui-tabs-panel {
-        padding: 2.0em 1.0em 1.0em 1.0em ;
-        overflow: hidden;
-        height: auto;
-        min-height: 300px ;
+        padding:       2.0em 1.0em 1.0em 1.0em ;
+        overflow:     hidden;
+        height:       auto;
+        min-height:   300px ;
       }
     }
+
     & > form{
       display: block ;
       margin-top: 1px ;
       padding-top: 1.2em ;
     }
-    &> form {
-      //padding-top: 3.8em ;
-    }
-
-
 
     .message{
       &_error,
@@ -95,16 +102,11 @@ body {
       &_warning,
       &_ok{
         //margin-top: 70px ;
-
       }
     }
-
-
-
-  }
-
-
-}
+    
+  } // /div.admin
+} // /body
 
 
 
diff --git a/css/less/buttons.less b/css/less/buttons.less
index 3355e1648..ac135ee5c 100644
--- a/css/less/buttons.less
+++ b/css/less/buttons.less
@@ -1,3 +1,7 @@
+/* ------------------------------------------------------------- */
+/* BUTTONS (buttons.less)                                        */
+/* ------------------------------------------------------------- */
+
 // ----------------------------------------------------------------------------
 //
 // BUTTONS (FORM BUTTONS & LINKS AS BUTTONS)
@@ -28,6 +32,8 @@
 // At first we tried to nest the buttons within the form element,
 // but it is not possible because some forms do not have a form element
 // (e.g. print dialog)
+
+// A lot of buttons are outside of a form, so let be this tag deactivated
 //form {
 
   // General
@@ -50,32 +56,31 @@
     &.wi-wider       { width:     @input-wi-wider       ; }
     &.wi-verywide    { width:     @input-wi-verywide    ; }
     &.wi-tiny {
-      width: auto ;
-      padding: 0.16em 0.2em 0.1em 0.2em;
-      margin: -0.3em 0 0 0.2em;
-      //float: right;
-      display: inline-block;
-      font-size: 84% ;
-      min-height: 23px;
-      max-height: 23px;
+      width:        auto ;
+      padding:      0.16em 0.2em 0.1em 0.2em;
+      margin:      -0.3em 0 0 0.2em;
+      //float:      right;
+      display:      inline-block;
+      font-size:    84% ;
+      min-height:   23px;
+      max-height:   23px;
     }
     &.wi-verytiny{
-      font-size: 8pt !important;
-      padding: 0.0em 0.3em 0.1em 0.3em;
-      display: inline-block;
-      min-height: 17px;
-      max-height: 17px;
+      font-size:    8pt !important;
+      padding:      0.0em 0.3em 0.1em 0.3em;
+      display:      inline-block;
+      min-height:   17px;
+      max-height:   17px;
     }
 
-
-  } // /input[type="button etc."] /button
+  } // /input[type="button etc."]
 
   button.icon{
-    padding:    0 ;
-    margin:     0 ;
-    background: none !important;
-    border:     none;
-    display: inline-block;
+    padding:      0 ;
+    margin:       0 ;
+    background:   none !important;
+    border:       0 !important;
+    display:      inline-block;
     img { vertical-align: middle ; }
   }
 
@@ -86,19 +91,19 @@
   input[type="button"].button,
   button[type="submit"],
   button[type="button"] {
-    color:            @btn-default-color ;
-    background-color: @btn-default-bg;
-    border-color:     @btn-default-border ;
+    color:                  @button-strong-color ;
+    background-color:       @button-strong-bg;
+    border:                 @button-strong-border ;
     &:hover{
-      color:            @btn-default-hover-color ;
-      background-color: @btn-default-hover-bg;
-      border-color:     @btn-default-hover-border ;
+      color:                @button-strong-hover-color ;
+      background-color:     @button-strong-hover-bg;
+      border:               @button-strong-hover-border ;
     }
     &:active,
     &:focus{
-      color:            @btn-default-active-color ;
-      background-color: @btn-default-active-bg;
-      border-color:     @btn-default-active-border ;
+      color:                @button-strong-active-color ;
+      background-color:     @button-strong-active-bg;
+      border:               @button-strong-active-border ;
     }
   }
 
@@ -110,28 +115,43 @@
   input[type="reset"].neutral,
   button.neutral,
   button[type="reset"] {
-    color:              @btn-neutral-color ;
-    background-color:   @btn-neutral-bg;
-    border-color:       @btn-neutral-border ;
+    color:              @button-neutral-color ;
+    background-color:   @button-neutral-bg;
+    border:             @button-neutral-border ;
     &:hover {
-      color:            @btn-neutral-hover-color ;
-      background-color: @btn-neutral-hover-bg;
-      border-color:     @btn-neutral-hover-border ;
+      color:            @button-neutral-hover-color ;
+      background-color: @button-neutral-hover-bg;
+      border:           @button-neutral-hover-border ;
     }
     &:active,
     &:focus {
-      color:            @btn-neutral-active-color;
-      background-color: @btn-neutral-active-bg;
-      border-color:     @btn-neutral-active-border ;
+      color:            @button-neutral-active-color;
+      background-color: @button-neutral-active-bg;
+      border:           @button-neutral-active-border ;
     }
-  }
+
+    // Toggle-Button (e.g. for position details in tables)
+    &.positions {
+      padding-right:    1.2em ;
+      // ::after does not work in buttons
+//       input#cb_show_details {
+//         &::after {
+//           content:      "▸" !important ;
+//         }
+//       }
+//       input#cb_hide_details::after {
+//         content:        "▾" !important ;
+//       }
+    } // /.positions
+
+  } // /input[type="*"].neutral
 
   // PENDENT: Neu
   input[type="button"]{
     &.below{
       clear: both !important;
       float: none;
-      margin-top: 0.3em;
+      //margin-top: 0.3em;
       overflow: hidden ;
     }
   }
@@ -140,6 +160,9 @@
 
 
 
+
+
+
 // --------------------------------------
 // LINKS DESIGNED AS BUTTONS
 // They may be placed inside or outside a form
@@ -175,15 +198,17 @@ a {
     &.wi-verywide     { min-width: @input-wi-verywide    ; }
     // Tiny button (one letter button)
     &.wi-tiny {
-      display:            inline-block;
-      width:              auto ;
-      padding:            0.16em 0.2em 0.1em 0.2em;
-      margin:            -0.3em 0 0 0.2em;
-      font-size:          84% ;
+      display:    inline-block;
+      width:      auto ;
+      padding:    0.16em 0.2em 0.1em 0.2em;
+      margin:     -0.3em 0 0 0.2em;
+      font-size:  84% ;
     }
 
     // Toggle (for filters e.g.)
     &.toggle {
+      background-color: @controlpanel-bg-color !important ;
+
       &.off::after{
         content:                    " ▸";
         padding-right:              1.0em;
@@ -197,11 +222,17 @@ a {
         border-bottom: none;
         border-bottom-left-radius:  0px ;
         border-bottom-right-radius: 0px ;
+        &:hover {
+          border-top:               @controlpanel-border !important ;
+          border-right:             @controlpanel-border !important ;
+          border-bottom:            0 !important;
+          border-left:              @controlpanel-border !important ;
+        }
       }
       &:hover{
-        background-color:           @btn-neutral-bg !important;
-        border-color:               @btn-neutral-border  !important ;
-        color:                      @btn-neutral-color;
+        background-color:           @button-neutral-bg !important;
+        border:                     @controlpanel-border !important ;
+        color:                      @button-neutral-color;
         text-decoration:            none;
       }
     } // /.toggle
@@ -238,22 +269,34 @@ a {
 // --------------------------------------
 // Container fuer Buttons
 div.buttons {
-  padding:                1.0em ;
-  clear:                  left ;
-  display:                block;
-  // PENDENT: anschauen, ist fuer Anzeige von Positionsdetails
+  padding:            1.0em ;
+  clear:              left ;
+  display:            block;
+  // PENDENT: anschauen, steht fuer Anzeige von Positionsdetails in Listen-Tabellen
   &.positions {
-    margin:               0 0 -2.0em 26.0em;
-    padding:              0em;
+    margin:           0 0 -1.9em 26.0em;
+    padding:          0em;
+    label.button.neutral,
+    input.positions {
+      border-bottom-left-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+      padding-bottom: 0.6em !important;
+      margin-bottom: -0.8em !important;
+      background: none !important;
+      border-bottom: none !important;
+    }
+    input.positions{
+
+    }
   }
   &.below {
-    padding:              0 ;
-    margin:               0 ;
+    padding:          0 ;
+    margin:           0 ;
   }
 }
 .col > .buttons,
 .wrapper * .buttons {
-  padding:                1.0em 1.0em 1.0em 0 !important;
+  padding:            1.0em 1.0em 1.0em 0 !important;
 }
 
 
@@ -278,13 +321,13 @@ th {
 }
 input[type="button"].button-image{
   &.delete {
-  background-image: url("image/cross.png");
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  color: #fff;
-  background-color:transparent;
-  border-color: none;
-  border-width: 0;
+    background-image:     url("image/cross.png");
+    background-repeat:     no-repeat;
+    background-position:   0 0;
+    color:                 #fff;
+    background-color:      transparent;
+    border-color:         none;
+    border-width:         0;
   }
 }
 
diff --git a/css/less/common.less b/css/less/common.less
index 472d1fc50..ddf2e484c 100755
--- a/css/less/common.less
+++ b/css/less/common.less
@@ -1,3 +1,7 @@
+/* ------------------------------------------------------------- */
+/* COMMON PROPERTIES (common.less)                               */
+/* ------------------------------------------------------------- */
+
 // ----------------------------------------------------------------------------
 //
 // COMMON PROPERTIES
@@ -44,6 +48,7 @@ body {
   //behavior:url("csshover.htc") ;
   padding: 0;
   margin: 0 ;
+  font-size: @font-size-smaller ;
 }
 
 
@@ -56,15 +61,14 @@ body {
 div, 
 p,
 span, 
+table, 
+th,
+td,
 input, 
 textarea,
 select, 
 button,
-a.button,
-table, 
-col,
-th,
-td
+a.button
 {
   box-sizing: border-box;
 }
@@ -72,6 +76,12 @@ td
 
 
 
+
+
+
+
+
+
 // --------------------------------------
 // CLEARFIX
 // --------------------------------------
diff --git a/css/less/control_panels.less b/css/less/control_panels.less
index 4ef82478a..909f96eb5 100644
--- a/css/less/control_panels.less
+++ b/css/less/control_panels.less
@@ -1,3 +1,7 @@
+/* ------------------------------------------------------------- */
+/* CONTROL PANELS (control_panels.less)                          */
+/* ------------------------------------------------------------- */
+
 // ----------------------------------------------------------------------------
 //
 // CONTROL PANELS
@@ -21,35 +25,43 @@
 // --------------------------------------
 // General Class for all control panels
 .control-panel {
-  border:           @controlpanel-border;
-  background-color: @controlpanel-bg;
+  border:           @controlpanel-border !important;
+  background-color: @controlpanel-bg-color;
+  background:        @controlpanel-bg-style ;
   border-radius:    @controlpanel-radius;
-  color:            red ;
+  //color:            red ;
   overflow:         hidden ;
+
+  span.label{
+    padding-right: 0.6em ;
+  }
 }
 
+
+
+
 // --------------------------------------
 // FORM-ADDITION
 // --------------------------------------
 // Settings for including fields in a report
 .form-addition{
-  padding:          @controlpanel-padding-bold ;
+  padding:          @controlpanel-padding-bold !important ;
   margin:           @controlpanel-margin !important ;
   width:            auto !important ;
   display:          inline-block ;
 
   h3{
-    color:          @controlpanel-h3-color  !important;
-    font-size:      @controlpanel-h3-size   !important;
-    font-weight:    @controlpanel-h3-weight !important;
-    margin: 0.3em 0 0.1em 0 !important;
-    padding: 0 ;
+//    color:          @controlpanel-h3-color  !important;
+//    font-size:      @controlpanel-h3-size   !important;
+//    font-weight:    @controlpanel-h3-weight !important;
+    margin:         0.3em 0 0.1em 0 !important;
+    padding:         0 ;
   }
   h4{
-    color:        @controlpanel-h4-color !important;;
-    font-size:    @controlpanel-h4-size;
-    font-weight:  @controlpanel-h4-weight;
-    font-style:   @controlpanel-h4-style;
+   color:          @controlpanel-h4-color !important;;
+   font-size:      @controlpanel-h4-size;
+   font-weight:    @controlpanel-h4-weight;
+   font-style:     @controlpanel-h4-style;
   }
 
   div.list{
@@ -66,18 +78,20 @@
 // --------------------------------------
 // SELECT ITEM
 // --------------------------------------
-// for selecting a hidden Record (e.g. Contacts, Delivery Address etc.)
+// Panel for selecting a hidden Record (e.g. Contacts, Delivery Address etc.)
 .select-item{
   display:          inline-block ;
   width:            auto ;
   height:           auto;
   padding:          @controlpanel-select-item-padding ;
   margin:           @controlpanel-margin ;
-  border:           @controlpanel-border ;
-  border-radius:    @controlpanel-radius ;
-  background-color: @controlpanel-bg ;
   color:            @controlpanel-color ;
   font-size:        @font-size-smaller ;
+  border:           @controlpanel-border ;
+  border-radius:    @controlpanel-radius ;
+  background-color: @controlpanel-bg-color ;
+  background:        @_bg_style_button ; // PENDENT:
+
   input,
   select{
     margin-left:    0.6em ;
@@ -117,10 +131,14 @@
       select { margin: -0.3em 0 0 0; }
     }
   }
+
 } // /.select-item
+
 // Select function within standard wrapper
 .ui-tabs-panel > .select-item {
-  margin:     @contentbox-margin;
+  margin:         @contentbox-margin;
+  vertical-align: top ;
+
 }
 .wrapper > .select-item {
   margin:     0.8em 0 1.0em 0 ;
@@ -128,44 +146,57 @@
 
 
 
+
+
+
+
 // --------------------------------------
 // FILTER-TOGGLE-PANEL
 // --------------------------------------
 // for togglin a filter panel
 // see inlcude file /templates/webpages/common/filter-toggle.html
+.toggle_panel.control-panel{
+  border:         none !important;
+  background:     none !important;
+  border-radius:   0 !important;
+  overflow:       visible !important;
+}
 .toggle_panel{
   & > a.button.toggle {
-    padding: 0.2em 0 0.2em 1.4em;
+    padding:   0.2em 0 0.2em 1.4em;
     &:hover {
-      background-color: @controlpanel-bg !important;
-      text-decoration: underline ;
+      background-color: @controlpanel-bg-color !important;
+      text-decoration:   underline ;
     }
   }
   span.summary {
-    font-size: @font-size-small;
+    font-size:     @font-size-small;
     padding-left: 2.0em;
-    color: @gray-mediumdark;
+    color:         @controlpanel-color;
   }
   .toggle_panel_block {
-    display:  block;
-    overflow: hidden;
+    display:          block;
+    overflow:         hidden;
     padding:          @controlpanel-padding ;
-    margin:           2em 1em 0em 0; ;
+    margin:            2em 1em 0em 0; ;
+    background-color: @controlpanel-bg-color;
 
+    border:                     @controlpanel-border ;
     border-bottom-left-radius:  @controlpanel-radius ;
     border-bottom-right-radius: @controlpanel-radius ;
     border-top-right-radius:    @controlpanel-radius ;
     margin-top: -1px ;
 
     .buttons{
-      clear: left ;
-      padding: 0 !important;
-      margin: 0;
+      clear:     left ;
+      padding:   0 !important;
+      margin:   0;
     }
   }
 
+  // PENDENT: ggf. anpassen an Controlpanel-Farbtoene
   .tbl-horizontal {
-    th{ color: @brand-darkest ; }
+    //th{ color: @brand-superdark ; }
   }
 
 }
@@ -178,65 +209,74 @@
 // --------------------------------------
 // Panel for entering data via jQuery-Scripts etc.
 #content .input-panel {
-  overflow: hidden;
-  padding:                    @controlpanel-padding ;
+  display:                    inline-block;
+  overflow:                   hidden ;
+  padding:                    @controlpanel-padding-narrow ;
   margin:                     @margin-from-wrapper ;
-  background-color:           @controlpanel-bg;
+  background-color:           @controlpanel-bg-color;
   border:                     @controlpanel-border ;
-  border-bottom-left-radius:  @controlpanel-radius ;
-  border-bottom-right-radius: @controlpanel-radius ;
-  border-top-right-radius:    @controlpanel-radius ;
-  border-top-left-radius:     @controlpanel-radius ;
-  width: auto ;
-  min-width: 30% ;
+  border-radius:              @controlpanel-radius ;
+//  border-bottom-left-radius:  @controlpanel-radius ;
+//  border-bottom-right-radius: @controlpanel-radius ;
+//  border-top-right-radius:    @controlpanel-radius ;
+//  border-top-left-radius:     @controlpanel-radius ;
+  width:                       auto ;
+  min-width:                   30% ;
   //max-width: 70% ;
-  display: inline-block;
 
   & > h3 {
     margin-top: 0 ;
   }
   p      {
-    font-size: @font-size-smaller ;
-    margin: 0 0 0.4em 0 ;
+    font-size:   @font-size-smaller ;
+    margin:     0 0 0.4em 0 ;
+  }
+  table.condensed {
+    margin-bottom: 0.1em;
+    caption { padding-top: 0.1em ; }
+    td span.label {
+      padding-right: 0.6em ;
+      &.above{ margin-bottom: 0em ; }
+    }
   }
 }
-
+#content .ui-tabs-panel > .input-panel { margin-left: @margin-left-from-content }
 
 
 // --------------------------------------
 // PAGINATE
 // --------------------------------------
-.paginate{
+.paginate {
   display:          inline-block ;
   width:            auto ;
-  height:           auto;
-  padding:          0;
+  height:           auto ;
+  padding:          0 ;
   margin:           @controlpanel-margin ;
-  border:           @controlpanel-border;
+  border:           @controlpanel-border ;
   border-radius:    @controlpanel-radius ;
-  background-color: @controlpanel-bg;
+  background-color: @controlpanel-bg-color ;
   color:            @controlpanel-color ;
 
   & > a,
   & > span {
-    padding: 0.4em 0.6em !important;
-    margin-top: -1px;
+    padding: 0.4em 0.6em !important ;
+    margin-top: -1px ;
   }
 
   .paginate-prev {
     display:          inline-block ;
-    &::before{ content: "◄"; }
+    &::before{ content: "◄" ; }
     &:hover{
-      border-bottom-left-radius: @controlpanel-radius;
-      border-top-left-radius:    @controlpanel-radius;
+      border-bottom-left-radius: @controlpanel-radius ;
+      border-top-left-radius:    @controlpanel-radius ;
     }
   }
   .paginate-next {
     display:          inline-block ;
     &::after{ content: "►"; }
     &:hover{
-      border-bottom-right-radius: @controlpanel-radius;
-      border-top-right-radius:    @controlpanel-radius;
+      border-bottom-right-radius: @controlpanel-radius ;
+      border-top-right-radius:    @controlpanel-radius ;
     }
   }
   .paginate-page {
@@ -267,8 +307,8 @@ table.jump-to {
   &.right { float: right; }
 
   border: @controlpanel-border;
-  border-radius: 0.2em ;
-  background-color: @controlpanel-bg;
+  border-radius: @controlpanel-radius ;
+  background-color: @controlpanel-bg-color;
   margin: 0.8em 2.0em 0 1.2em !important;
 }
 
@@ -309,3 +349,14 @@ div.float-cells-table{
 
 
 
+
+
+// --------------------------------------
+// DEZIDIERTE ELEMENTE
+// --------------------------------------
+
+.control-panel select#contact_cp_id {
+
+}
+
+
diff --git a/css/less/custom.less b/css/less/custom.less
index d87795107..a98a6d318 100644
--- a/css/less/custom.less
+++ b/css/less/custom.less
@@ -1,3 +1,7 @@
+/* ------------------------------------------------------------- */
+/* CUSTOM LESS STUFF (custom.less)                               */
+/* ------------------------------------------------------------- */
+
 // ----------------------------------------------------------------------------
 //
 // CUSTOM LESS STUFF (ONLY FOR OVERRIDES OF THE STANDARD-KIVITENDO-STUFF)
@@ -31,90 +35,141 @@
 // This is just an exemple
 // Do run "lessc style.less ../style.css" in your terminal session with cursor on the folder /css/less
 
-/* Custom overrides */
-
-/*
-table.tbl-horizontal {
-  display: table ;
-  background-color: #ccc;
-  border-bottom: 12px #ccc solid ;
-  border-top-left-radius:   0 ;
-  border-top-right-radius:  0 ;
-  border-bottom-left-radius:   6px ;
-  border-bottom-right-radius:  6px ;
-
-  & > caption{
-    color:                   #ffffff !important;
-    background-color:        @gray-mediumdark;
-    padding-left:            0.8em;
-    border-top-left-radius:  6px ;
-    border-top-right-radius: 6px ;
-    //margin: -24px -12px 0.6em -12px ;
-    & > a, & > a:link, & > a:visited { decoration: none; color: #fff !important; }
-  }
-  th{ padding-left: 0.3em; }
-  td{ padding-right: 0.3em; }
-  tbody { border-top: 8px #ccc solid; }
-  &.checkered {
-     tbody { border-top: none ; }
-     border-bottom: none;
-  }
-  tbody > tr > td:first-child,
-  tbody > tr > th:first-child,
-  thead > tr > th:first-child{
-    padding-left: 1.0em ;
-  }
-  tbody > tr:first-child {
-    & > th { padding-top: 0.5em ; }
-    & > td { padding-top: 0.5em ; }
-  }
-  th.caption{
-    color:              #fff !important;
-    background-color:   @gray-mediumdark;
-    padding:            0.4em 0 0.3em 0.8em;
-    border-top:         6px solid #ccc;
-    border-bottom:      8px solid #ccc;
-    margin-bottom: 0.6em ;
-    //margin: -24px -12px 0.6em -18px ;
-  }
-}
-
-.col{
-  padding-bottom: 0.4em ;
-
-  & > table.tbl-horizontal {
-    margin-right: 0 !important;
-    //border-top-left-radius:  0 ;
-    //border-top-right-radius: 0 ;
-    border-radius: 0 ;
-    padding-bottom: 0 ;
-
-    caption{
-      border-top-left-radius:  0 ;
-      border-top-right-radius: 0 ;
-    }
-  }
-  & > table.tbl-horizontal:first-child{
-    border-top-left-radius:     0 ;
-    border-top-right-radius:    0 ;
-    border-bottom-left-radius:  0 ;
-    border-bottom-right-radius: 0 ;
-    margin-bottom: 0 ;
-    caption{
-      border-top-left-radius:  6px ;
-      border-top-right-radius: 6px ;
-    }
-  }
-  & > table.tbl-horizontal:last-child{
-    border-bottom-left-radius:  6px  ;
-    border-bottom-right-radius: 6px ;
-    margin-bottom: 0 ;
-  }
-}
-
-.cke_editable{
-  margin-left: 0.0em !important;
-}
- */
+// Custom overrides 
+
+
+// --------------------------------------
+// DISABLE CAPTIONS IN HORIZONTAL TABLES
+// --------------------------------------
+// Captions are good. It is a nice guidance thru Kivitendo and captions also force 
+// programmers 
+
+
+
+//table.tbl-horizontal {
+//  caption,
+//  th.caption,
+//  td.caption{
+//    display: none ; // instead of: table-caption  
+//  }
+//}
+//
+//div.wrapper.bordered {
+//  padding: 0.6em 0 0.2em 0.4em;
+//
+//  &::before{ 
+//    content: "Detail Information"; //instead of caption in toggled wrapper
+//    z-index: 9000 ;   
+//  }
+//  .tbl-horizontal{ display: none ; }
+//  .toggles { margin-top: -3px; }
+//  .toggles.max {
+//    width: 100%;
+//    z-index: 9001 ; 
+//    margin-top: -17px;
+//    text-align: right;
+//    display: block;
+//    margin-right: 10px;
+//    a.toggle.max{
+//      width: 100%;
+//      background-position: right center;
+//    }
+//  }
+//}
+// /DISABLE CAPTIONS IN HORIZONTAL TABLES
+
+
+
+
+//table.tbl-horizontal {
+//  display: table ;
+//  background-color: #ccc;
+//  border-bottom: 12px #ccc solid ;
+//  border-top-left-radius:   0 ;
+//  border-top-right-radius:  0 ;
+//  border-bottom-left-radius:   @controlpanel-radius ;
+//  border-bottom-right-radius:  @controlpanel-radius ;
+//
+//  & > caption{
+//    color:                   #ffffff !important;
+//    background-color:        @gray-dark;
+//    padding-left:            0.8em;
+//    border-top-left-radius:  @controlpanel-radius ;
+//    border-top-right-radius: @controlpanel-radius ;
+//    //margin: -24px -12px 0.6em -12px ;
+//    & > a, & > a:link, & > a:visited { decoration: none; color: #fff !important; }
+//  }
+//  th{ padding-left: 0.3em; }
+//  td{ padding-right: 0.3em; }
+//  tbody { border-top: 8px #ccc solid; }
+//  &.checkered {
+//     tbody { border-top: none ; }
+//     border-bottom: none;
+//  }
+//  tbody > tr > td:first-child,
+//  tbody > tr > th:first-child,
+//  thead > tr > th:first-child{
+//    padding-left: 1.0em ;
+//  }
+//  tbody > tr:first-child {
+//    & > th { padding-top: 0.5em ; }
+//    & > td { padding-top: 0.5em ; }
+//  }
+//  th.caption{
+//    color:              #fff !important;
+//    background-color:   @gray-dark;
+//    padding:            0.4em 0 0.3em 0.8em;
+//    border-top:         6px solid #ccc;
+//    border-bottom:      8px solid #ccc;
+//    margin-bottom: 0.6em ;
+//    //margin: -24px -12px 0.6em -18px ;
+//  }
+//}
+//
+//.col{
+//  padding-bottom: 0.4em ;
+//
+//  & > table.tbl-horizontal {
+//    margin-right: 0 !important;
+//    //border-top-left-radius:  0 ;
+//    //border-top-right-radius: 0 ;
+//    border-radius: 0 ;
+//    padding-bottom: 0 ;
+//
+//    caption{
+//      border-top-left-radius:  0 ;
+//      border-top-right-radius: 0 ;
+//    }
+//  }
+//  & > table.tbl-horizontal:first-child{
+//    border-top-left-radius:     0 ;
+//    border-top-right-radius:    0 ;
+//    border-bottom-left-radius:  0 ;
+//    border-bottom-right-radius: 0 ;
+//    margin-bottom: 0 ;
+//    caption{
+//      border-top-left-radius:  @controlpanel-radius ;
+//      border-top-right-radius: @controlpanel-radius ;
+//    }
+//  }
+//  & > table.tbl-horizontal:last-child{
+//    border-bottom-left-radius:  @controlpanel-radius  ;
+//    border-bottom-right-radius: @controlpanel-radius ;
+//    margin-bottom: 0 ;
+//  }
+//}
+//
+//.cke_editable{
+//  margin-left: 0.0em !important;
+//}
+
+
 
+// --------------------------------------
+// Centered Aligned Tables
+// --------------------------------------
+// Do everybody a favor: do not activate it
 
+//table.tbl-list{
+//  margin: 0 auto 1.0em auto;
+//}
diff --git a/css/less/custom_less_variables.less b/css/less/custom_less_variables.less
new file mode 100644
index 000000000..8cee5f324
--- /dev/null
+++ b/css/less/custom_less_variables.less
@@ -0,0 +1,43 @@
+/* ------------------------------------------------------------- */
+/* CUSTOM VARIABLES (custom_variables.less)                      */
+/* ------------------------------------------------------------- */
+
+
+// ----------------------------------------------------------------------------
+//
+// CUSTOM VARIABLES (ONLY FOR OVERRIDES IN CUSTOM.LESS)
+//
+// ----------------------------------------------------------------------------
+// DESCRIPTION: Place your custom variables here
+// For more information about variables see variables.less
+// Copy variables from variable.less into this files here
+// Do not change variables and less stuff in the original source files
+// then you will be happy with your git work
+//
+// CONTENTS:
+// - SUBJECT
+// - - My override variables
+// - - My own variables
+// ----------------------------------------------------------------------------
+
+
+//
+// **********************************
+// MY OVERRIDE VARIABLES
+// **********************************
+
+
+// -----------------------
+// BORDER-COLORS
+// -----------------------
+// Change (or darken!) the borders colors if they are looking to fancy
+
+
+
+
+//
+// **********************************
+// MY SPECIAL VARIABLES
+// **********************************
+
+//@my-class-padding: 0.2em ; // just an example
diff --git a/css/less/developing.less b/css/less/developing.less
index c75f82905..7e854a4b2 100644
--- a/css/less/developing.less
+++ b/css/less/developing.less
@@ -1,3 +1,7 @@
+/* ------------------------------------------------------------- */
+/* DEVELOPING (developing.less)                                  */
+/* ------------------------------------------------------------- */
+
 // ----------------------------------------------------------------------------
 //
 // Developing-Section
@@ -20,12 +24,12 @@
 body.developing{
 
   &>header{
-     background-color: @h1-bg;
+     background-color: @brand-h1-bg;
      display: block;
      overflow: hidden;
     h1{
       float: left;
-      color: @h1-color ;
+      color: @brand-h1-color ;
       padding: 1.0em;
     }
     nav{
@@ -80,7 +84,7 @@ body.developing{
   p.picture{
     background-color: #fff;
     padding: 0.8em;
-    border: 1px @gray-medium solid;
+    border: 1px @gray-standard solid;
     display: inline-block;
     width: auto;
   }
@@ -111,7 +115,7 @@ body.developing{
           //border: 1px black solid ;
           display: block;
           overflow: visible;
-          border-bottom: 1px @gray-mediumdark solid ;
+          border-bottom: 1px @gray-dark solid ;
         }
         tr:last-child td { border: none ;}
 
@@ -139,4 +143,55 @@ body.developing{
 
   } // /.wrapper
 
+  // Buttons
+  // Action SOFT/NEUTRAL (no submission to server page)
+  input[type="submit"], 
+  input[type="button"], 
+  input[type="button"].button, 
+  button[type="submit"], 
+  button[type="button"],
+  a.button {
+    color: @button-strong-color;
+    background-color: @button-strong-bg;
+    border: @button-strong-border;
+
+    &.hover{
+      color: @button-strong-hover-color;
+      background-color: @button-strong-hover-bg;
+      border: @button-strong-hover-border;  
+    }
+    &.active{
+      color: @button-strong-active-color;
+      background-color: @button-strong-active-bg;
+      border: @button-strong-active-border;  
+    }  
+  }
+  // Action SOFT/NEUTRAL (no submission to server page)
+  input[type="button"].neutral,
+  input[type="submit"].neutral,
+  input[type="reset"],
+  input[type="reset"].neutral,
+  button.neutral,
+  button[type="reset"] {
+    color:              @button-neutral-color ;
+    background-color:   @button-neutral-bg;
+    border:             @button-neutral-border ;
+    &.neutral-hover {
+      color:            @button-neutral-hover-color ;
+      background-color: @button-neutral-hover-bg;
+      border:           @button-neutral-hover-border ;
+    }
+    &.neutral-active,
+    &.neutral-focus {
+      color:            @button-neutral-active-color;
+      background-color: @button-neutral-active-bg;
+      border:           @button-neutral-active-border ;
+    }
+  }
+
+
+
+
+
+
 } // /body.developing
diff --git a/css/less/developing_demo.less b/css/less/developing_demo.less
index 7cd46e667..7e38ea3ec 100644
--- a/css/less/developing_demo.less
+++ b/css/less/developing_demo.less
@@ -1,3 +1,7 @@
+/* ------------------------------------------------------------- */
+/* DEVELOPING DEMO (developing_demo.less)                        */
+/* ------------------------------------------------------------- */
+
 // ----------------------------------------------------------------------------
 //
 // DEVELOPERS DEMO
@@ -13,20 +17,18 @@
 // ----------------------------------------------------------------------------
 
 
-@import 'variables';
+@import 'variables.less';
 
 // --------------
 // Grey shades
-.gray-darker { background-color: @gray-darker }
-.gray-dark { background-color: @gray-dark }
-.gray-mediumdark { background-color: @gray-mediumdark }
-.gray { background-color: @gray }
-.gray-medium { background-color: @gray-medium }
-.gray-light { background-color: @gray-light }
-.gray-lighter { background-color: @gray-lighter }
-.gray-morelighter { background-color: @gray-morelighter }
+.gray-darker     { background-color: @gray-darker }
+.gray-verydark   { background-color: @gray-verydark }
+.gray-dark       { background-color: @gray-dark }
+.gray-standard   { background-color: @gray-standard }
+.gray-light     { background-color: @gray-light }
+.gray-lighter   { background-color: @gray-lighter }
 .gray-verylight { background-color: @gray-verylight }
-.gray-superlight { background-color: @gray-superlight }
+.gray-superlight{ background-color: @gray-superlight }
 // --------------
 // Divers Color Specications
 // for message and other coloured stuff
@@ -102,11 +104,11 @@
 // --------------------------------------
 // SCAFFOLDING
 // --------------------------------------
-.body-bg { background-color: @body-bg } // general
+.body-bg { background-color: @body-bg } // general PENDENT: obsolete
 .content-bg { background-color: @content-bg } // background first tabs
 .tabs-bg { background-color: @tabs-bg } // background tabs panel (data/content)
 .heading-bg { background-color: @heading-bg } // controlpanels & other stuff
-.controlpanel-bg { background-color: @controlpanel-bg } // controlpanels
+.controlpanel-bg { background-color: @controlpanel-bg-color } // controlpanels
 
 .text-color { background-color: @text-color }
 .heading-color { background-color: @heading-color } // labels & table headings
@@ -116,7 +118,7 @@
   h1,
   h2{
     clear: both;
-    color: @gray !important;
+    color: @gray-standard !important;
     padding: 0 ;
     margin:  0 ;
   }
@@ -131,7 +133,7 @@
     padding: 0 ;
 
     h3{
-      color: @gray !important;
+      color: @gray-standard !important;
       font-size: 9pt;
       font-weight: normal;
       height: 2.8em ;
@@ -158,10 +160,67 @@
 
 
 
+/* -------------------------------------- */
+/* Colors for Developers Color Demo       */
+/* -------------------------------------- */
+
+
+// -----------------------
+// GREY SHADES
+// -----------------------
+.gray-superdark:    #000000 ; // Black
+.gray-verydark:      #222222 ;
+.gray-darker:        #555555 ;
+.gray-dark:          #888888 ;
+
+.gray-standard:      #aaaaaa ;
+
+.gray-light:        #cfcfcf ;
+.gray-lighter:      #dedede ;
+.gray-verylight:    #ececec ;
+.gray-superlight:    #ffffff ; // White
+
+
+// -----------------------
+// BRAND COLORS
+// -----------------------
+.brand-superdark:    @gray-superdark ; // Black
+.brand-verydark:    @gray-verydark ;
+.brand-darker:      @gray-darker ;
+.brand-dark:        @gray-dark ;
+
+.brand-standard:    @gray-standard ;
+
+.brand-light:        @gray-light ;
+.brand-lighter:      @gray-lighter ;
+.brand-verylight:    @gray-verylight ;
+.brand-superlight:  @gray-superlight ; // White
+
+
 
+// -----------------------
+// Special Color Specifications for messages
+// -----------------------
 
+// OK (Green)
+.color-green-strong:    #003c18;
+.color-green-light:     #9ccb21;
 
+// Error (Red)
+.color-red-strong:      #ae0014;
+.color-red-light:       #ffd6d6;
 
+// Info/Hint (Blue)
+.color-blue-strong:     #209ec8;
+.color-blue-light:      #b6e6e5;
 
+// Warning (Orange)
+.color-orange-strong:   #8D6A00; // more brown
+.color-orange-light:    #f6d972;
 
+// Divers
+.rainbow-green:         #408000;
+.rainbow-blue:          #0080FF;
+.rainbow-red:           #FF0000;
+.rainbow-yellow:        #FFFF00;
 
diff --git a/css/less/forms.less b/css/less/forms.less
index c92dbcf6c..fd8ce97bf 100755
--- a/css/less/forms.less
+++ b/css/less/forms.less
@@ -1,3 +1,7 @@
+/* ------------------------------------------------------------- */
+/* FORM ELEMENTS (forms.less)                                    */
+/* ------------------------------------------------------------- */
+
 // ----------------------------------------------------------------------------
 //
 // FORMS & FORM-ELEMENTS
@@ -37,18 +41,18 @@
 // but it is not possible because some forms (print dialog etc.) do not have
 // a surrounding form element
 form {
-  display: table;
-  width: 100%;
+  display:     table;
+  width:       100%;
   text-align: left;
-  margin: 0 auto 0 auto;
+  margin:     0 auto 0 auto;
 
 
   // If Form must be a block container
   // PENDENT: anschauen
   &.box {
-    display: block;
+    display:   block;
     overflow: hidden ;
-    padding: 0 0 1.6em 0 ;
+    padding:   0 0 1.6em 0 ;
   }
 
 }
@@ -62,13 +66,13 @@ form {
   input,
   textarea,
   select {
-    font-family: @font-family-sans-serif ;
-    font-size: @font-size-smaller ;
-    padding: 0.2em 0.2em 0.2em 0.2em ;
-    border: 1px;
-    border-color: darkgray lightgray lightgray;
-    border-style: solid;
-    outline: none;
+    font-family:       @font-family-sans-serif ;
+    //font-size:         @font-size-smaller ;
+    padding:           0.2em 0.2em 0.2em @padding-databoxes-left ;
+    border:           1px;
+    border-color:     darkgray lightgray lightgray;
+    border-style:     solid;
+    outline:           none;
     background-color: #fff ;
 
     &[type="text"],
@@ -78,14 +82,23 @@ form {
     // PENDENT: data type
     &[type="text"] {
       &.accent{
-        font-weight: bold ;
-        font-size: 130% !important ;
-        padding: 0.6em auto !important ;
+        font-weight:   bold ;
+        font-size:     130% !important ;
+        padding:       0.6em auto !important ;
       }
     }
   }
   // /input, textarea, select
 
+
+  textarea {
+    resize: vertical;
+  }
+
+
+
+
+
   // --------------
   // Focused Elements
   input[type="text"],
@@ -95,7 +108,8 @@ form {
     &:focus,
     &:active {
       background-color: @formelement-focus-bg ;
-      border: @formelement-focus-border ;
+      border:           @formelement-focus-border ;
+      color:             @formelement-focus-text ;
     }
   }
 
@@ -107,23 +121,32 @@ form {
 
   select {
     // background: white url('../image/select-down.png') no-repeat scroll right center;
-    padding-right: 1.0em;
+    //padding-right:         1.0em;
+    //padding-left:          0.6em ;
     &.helper {
-       background-color: @gray-superlight;
+       background-color:   @gray-superlight;
+    }
+    & > option {
+      padding-left:          0.6em ;
     }
   }
 
 
+
+
+
+
+
   // --------------------------------------
   // SPECIAL INPUT TYPES
   // --------------------------------------
 
   input {
     &[type="file"]{
-      padding: 0.8em;
-      background-color: @gray-lighter;
-      color: @gray-mediumdark ;
-      border: 1px @gray-mediumdark solid ;
+      padding:             0.8em;
+      background-color:   @gray-lighter;
+      color:               @gray-dark ;
+      border:             1px @gray-dark solid ;
       // PENDENT: geht wahrscheinlich nicht, oder muss anders geloest werden
       // Hier handelt es sich um den "Select File"-Button
       button,
@@ -136,31 +159,24 @@ form {
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
   // --------------------------------------
   // LABELS
   // --------------------------------------
 
   label {
-    cursor: text;
-    vertical-align: top;
-    display: inline-block;
-    width: 88% ;
-    color: @brand-data-label-color ;
+    cursor:             pointer;
+    vertical-align:     top;
+    display:             inline-block;
+    width:               88% ;
+    color:               @brand-data-label-color ;
+
+    &:link,
+    &:visited {
+      text-decoration: none ;
+    }
     &:hover {
-      color: #000 ;
-      text-decoration: underline ;
+      //color:             #000 ;
+      text-decoration:   underline ;
     }
   }
 
@@ -172,14 +188,14 @@ form {
   // --------------------------------------
 
   fieldset {
-    margin-top: 15px;
-    color: black;
-    font-weight: normal;
-    font-size: @font-size-large;
-    text-transform: uppercase;
-    border-color: grey;
-    border-width: 1px ;
-    margin: 0.4em 0.6em 1.4em 0.6em;
+    margin-top:       15px;
+    color:             black;
+    font-weight:       normal;
+    font-size:         @font-size-large;
+    text-transform:   uppercase;
+    border-color:     grey;
+    border-width:     1px ;
+    margin:           0.4em 0.6em 1.4em 0.6em;
 
     // Heading within FIELDSET */
     h4 {
@@ -197,6 +213,7 @@ form {
   // DIMENSIONS
   // --------------------------------------
   input{
+
     // 1 Lined input field
     // PENDENT: bei Verwendung von weiteren HTML5-Typen Typ-Deklaration erweitern
     &[type="text"],
@@ -210,20 +227,24 @@ form {
       &.wi-wide         { width:     @input-wi-wide        ; } //  18.0em
       &.wi-wider        { min-width: @input-wi-wider       ; } //  24.0em
       &.wi-verywide     { min-width: @input-wi-verywide    ; } //  36.0em
+
       // data types
       &.wi-date         { width: @input-wi-small       ; } //
       &.wi-number       { width: @input-wi-small       ; } //
       &.wi-tinynumber   { width: @input-wi-verysmall   ; } //
       &.wi-largenumber  { width: @input-wi-mediumsmall ; } //
+
       // combined minus dimensions (take care of the double hyphen -- )
       &.wi-lightwide--verysmall { width: @input-wi-lightwide--verysmall; }
       &.wi-wide--verysmall      { width: @input-wi-wide--verysmall !important; }
       //&.wi-wide--verysmall      { width: 203px; }
+
     }
     // Password (Standard size) // PENDENT: Standardgroesse ??
      &[type="password"]{
       //min-width: @input-wi-normal ;
     }
+
     // OBSOLETE // PENDENT: ggf. entfernen
     .fixed_width {
       width: 250px;
@@ -461,10 +482,10 @@ td.wi-wider     > span.customer_vendor_picker > input { width:     @input-wi-wid
 
 
   input[type=text].emphasized {
-    word-wrap: break-word;
-    word-break: break-all;
-    height: auto;
-    overflow: hidden ;
+    word-wrap:     break-word;
+    word-break:   break-all;
+    height:       auto;
+    overflow:     hidden ;
   }
 
 
@@ -486,20 +507,20 @@ td.wi-wider     > span.customer_vendor_picker > input { width:     @input-wi-wid
 
   td {
     div.rowspan-table{
-      display: table-row ;
-      float: left;
-
+      display:           table-row ;
+      float:             left;
+      margin:             0.8em 2.8em 0.8em 0 ;
       div.label-n-value{
-        display: table-cell ;
+        display:         table-cell ;
         vertical-align: middle;
-        height: 1.6em !important ; // the cell have not the same height if they are made with DIVs
+        height:         1.6em !important ; // the cell have not the same height if they are made with DIVs
 
         float: left;
-        padding: 0 2.0em 0 0 ;
+        padding:         0 2.0em 0 0 ;
         //overflow: hidden ;
         b{
-          font-weight: normal;
-          padding: 0 0 0 0 ;
+          font-weight:   normal;
+          padding:       0 0 0 0 ;
         }
       }
     }
@@ -512,13 +533,15 @@ td.wi-wider     > span.customer_vendor_picker > input { width:     @input-wi-wid
   // Tables with either Form Elements or Text in Cells
   // PENDENT: .data mit anderen Formular-Elementen zusammenfassen
   table td > span.data {
-    display: block;
-    overflow: hidden ;
-    font-size: @font-size-smaller ;
-    border: 1px #dcdcdc solid;
-    margin: 0 ;
-    line-height: 120%;
-    padding: 0.2em 0.28em 0.2em 0.2em !important;
+    display:      block;
+    overflow:     hidden ;
+    height:       (@font-size-smaller * 1.7); // 1.6em
+    font-size:     @font-size-smaller ;
+    color:         @t-cell-databox-text-color ;
+    border:       1px @t-cell-databox-border-color solid;
+    margin:       0 ;
+    line-height:  120%;
+    padding:      0.2em 0.28em 0.2em @padding-databoxes-left !important;
 
     &::before{
       //content: "" ;
@@ -560,31 +583,33 @@ td.wi-wider     > span.customer_vendor_picker > input { width:     @input-wi-wid
     // Additional
     // There are also some Checkboxes for "Select All"
     h3 {
+      padding: 0.2em 0 0.2em 0.0em;
 
       label{
-        float: right;
+        //float: right;
+        float: left;
         width: 88% ;
         font-size: @h3-size ;
-        padding: 0 0 0.6em 0 ;
+        padding: 0 0 0.6em 0.2em ;
         line-height: 1.2em ;
       }
     }
 
 
     &>div{
-      clear: both;
-      margin: 0 0 0.6em 0 ;
-      padding: 0;
-      display: block ;
-      overflow: hidden ;
+      clear:       both;
+      margin:     0 0 0.6em 0 ;
+      padding:     0;
+      display:     block ;
+      overflow:   hidden ;
       label{
-        float: left;
-        width: 88% ;
+        float:     left;
+        width:     88% ;
       }
       input[type="checkbox"],
       input[type="radio"]{
-        float: left;
-        margin-right: 0.6em ;
+        float:           left;
+        margin-right:   0.6em ;
       }
     }
   }
@@ -596,15 +621,15 @@ td.wi-wider     > span.customer_vendor_picker > input { width:     @input-wi-wid
   td.horizontal {
     input[type="radio"],
     input[type="checkbox"]{
-      float: left !important;
-      clear: none !important;
-      width: auto;
+      float:     left !important;
+      clear:     none !important;
+      width:     auto;
     }
     label{
-      width: auto !important;
-      margin-right: 2.0em ;
-      float: left !important;
-      clear: none !important;
+      width:           auto !important;
+      margin-right:   2.0em ;
+      float:           left !important;
+      clear:           none !important;
     }
   }
 
@@ -625,15 +650,15 @@ table.tbl-plain {
     label{
       display: inline-block;
 
-      &:link,
-      &:visited {
-        color: @gray ;
-        text-decoration: none ;
-      }
-      &:hover{
-        color: #777 ;
-        text-decoration: underline;
-      }
+//      &:link,
+//      &:visited {
+//        color: @gray-standard ;
+//        text-decoration: none ;
+//      }
+//      &:hover{
+//        color: #777 ;
+//        text-decoration: underline;
+//      }
     }
   }
   td{
@@ -734,7 +759,7 @@ div.admin{
 // --------------------------------------
 
 .frame-header-quicksearch input::placeholder {
-  color: @gray-mediumdark ;
+  color: @gray-dark ;
 }
 
 #content input::placeholder {
@@ -752,7 +777,10 @@ span.customer_vendor_picker {
 }
 input#vendor_id_name.ui-autocomplete-input,
 input#customer_id_name.ui-autocomplete-input {
-  &.wi-wide{ width: @input-wi-wide  ; }
+  margin: 0 ;
+  &.wi-wide{
+    width: @input-wi-wide  ;
+  }
 }
 
 // --------------------------------------
diff --git a/css/less/icons16.less b/css/less/icons16.less
index 31adc7b4d..8b9a84875 100755
--- a/css/less/icons16.less
+++ b/css/less/icons16.less
@@ -1,3 +1,8 @@
+/* ------------------------------------------------------------- */
+/* ICONS 16 (icons16.less)                                    */
+/* ------------------------------------------------------------- */
+
+
 .icon16 { background: url(../image/maps/icons16.png) 16px 0px no-repeat; padding: 0; width: 16px; height: 16px; }
 .icon16.admin { background-position: -0px 0px; }
 .icon16.ap { background-position: -16px 0px; }
diff --git a/css/less/jquery-ui.less b/css/less/jquery-ui.less
index bdf73b8e4..ec4fd1944 100755
--- a/css/less/jquery-ui.less
+++ b/css/less/jquery-ui.less
@@ -1,3 +1,8 @@
+/* ------------------------------------------------------------- */
+/* JQUERY UI (jquery-ui.less)                                    */
+/* ------------------------------------------------------------- */
+
+
 // ----------------------------------------------------------------------------
 //
 // jQuery UI (Version 1.10.3 / 2014-01-14 / http://jqueryui.com)
@@ -33,7 +38,7 @@
 // - ICONS
 // - MISC VISUALS
 // - RESIZABLE
-// - RESIZABLE
+// - ACCORDION
 // - AUTOCOMPLETE
 // - UI-BUTTON
 // - DATEPICKER
@@ -233,34 +238,38 @@
 // ACCORDION
 // --------------------------------------
 
-.ui-accordion .ui-accordion-header {
-  display: block;
-  cursor: pointer;
-  position: relative;
-  margin-top: 2px;
-  padding: .5em .5em .5em .7em;
-  min-height: 0; //  support: IE7
-}
-.ui-accordion .ui-accordion-icons {
-  padding-left: 2.2em;
-}
-.ui-accordion .ui-accordion-noicons {
-  padding-left: .7em;
-}
-.ui-accordion .ui-accordion-icons .ui-accordion-icons {
-  padding-left: 2.2em;
-}
-.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
-  position: absolute;
-  left: .5em;
-  top: 50%;
-  margin-top: -8px;
-}
-.ui-accordion .ui-accordion-content {
-  padding: 1em 2.2em;
-  border-top: 0;
-  overflow: auto;
-}
+.ui-accordion {
+
+  .ui-accordion-header {
+    display: block;
+    cursor: pointer;
+    position: relative;
+    margin-top: 2px;
+    padding: .5em .5em .5em .7em;
+    min-height: 0; //  support: IE7
+
+    .ui-accordion-header-icon {
+      position: absolute;
+      left: .5em;
+      top: 50%;
+      margin-top: -8px;
+    }
+  } // /.ui-accordion-header
+
+  .ui-accordion-content {
+    padding: 1em 2.2em;
+    border-top: 0;
+    overflow: auto;
+  }
+
+  .ui-accordion-icons {
+    padding-left: 2.2em;
+    .ui-accordion-icons { padding-left: 2.2em; }
+  }
+  .ui-accordion-noicons { padding-left: .7em; }
+
+} // /.ui-accordion
+
 
 
 
@@ -273,10 +282,36 @@
   top: 0;
   left: 0;
   cursor: default;
+  z-index: 9000 ;
+
+  .ui-menu-item {
+    a {
+      &:hover{
+         background-color: @brand-dark;
+         color: #fff ;
+      }
+    }
+  }
+  li{
+    a{
+      display: block ;
+      font-size: 80% ;
+      padding-top: 0.4em !important;
+      padding-bottom: 0.4em !important;
+      &:hover{
+        background-color: #C9C9C9;
+        border: none ;
+        color: #000 ;
+      }
+    }
+  }
 }
 
 
 
+
+
+
 // --------------------------------------
 // UI-BUTTON
 // --------------------------------------
@@ -394,138 +429,219 @@ button.ui-button::-moz-focus-inner {
 // --------------------------------------
 
 .ui-datepicker {
-  width: 17em;
-  padding: .2em .2em 0;
-  display: none;
-}
-.ui-datepicker .ui-datepicker-header {
-  position: relative;
-  padding: .2em 0;
-}
-.ui-datepicker .ui-datepicker-prev,
-.ui-datepicker .ui-datepicker-next {
-  position: absolute;
-  top: 2px;
-  width: 1.8em;
-  height: 1.8em;
-}
-.ui-datepicker .ui-datepicker-prev-hover,
-.ui-datepicker .ui-datepicker-next-hover {
-  top: 1px;
-}
-.ui-datepicker .ui-datepicker-prev {
-  left: 2px;
-}
-.ui-datepicker .ui-datepicker-next {
-  right: 2px;
-}
-.ui-datepicker .ui-datepicker-prev-hover {
-  left: 1px;
-}
-.ui-datepicker .ui-datepicker-next-hover {
-  right: 1px;
-}
-.ui-datepicker .ui-datepicker-prev span,
-.ui-datepicker .ui-datepicker-next span {
-  display: block;
-  position: absolute;
-  left: 50%;
-  margin-left: -8px;
-  top: 50%;
-  margin-top: -8px;
-}
-.ui-datepicker .ui-datepicker-title {
-  margin: 0 2.3em;
-  line-height: 1.8em;
-  text-align: center;
-}
-.ui-datepicker .ui-datepicker-title select {
-  font-size: @font-size-base;
-  margin: 1px 0;
-}
-.ui-datepicker select.ui-datepicker-month-year {
-  width: 100%;
-}
-.ui-datepicker select.ui-datepicker-month,
-.ui-datepicker select.ui-datepicker-year {
-  width: 49%;
-}
-.ui-datepicker table {
-  width: 100%;
-  font-size: @font-size-base;
-  border-collapse: collapse;
-  margin: 0 0 .4em;
-}
-.ui-datepicker th {
-  padding: .7em .3em;
-  text-align: center;
-  font-weight: bold;
-  border: 0;
-}
-.ui-datepicker td {
-  border: 0;
-  padding: 1px;
-}
-.ui-datepicker td span,
-.ui-datepicker td a {
-  display: block;
-  padding: .2em;
-  text-align: right;
-  text-decoration: none;
-}
-.ui-datepicker .ui-datepicker-buttonpane {
-  background-image: none;
-  margin: .7em 0 0 0;
-  padding: 0 .2em;
-  border-left: 0;
-  border-right: 0;
-  border-bottom: 0;
-}
-.ui-datepicker .ui-datepicker-buttonpane button {
-  float: right;
-  margin: .5em .2em .4em;
-  cursor: pointer;
-  padding: .2em .6em .3em .6em;
-  width: auto;
-  overflow: visible;
-}
-.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
-  float: left;
-}
+  width:             17em;
+  padding:           .2em .2em 0;
+  display:           none;
+  &.ui-widget-content{
+    background-color: @jquery_datepicker-bg-color;
+    border: @controlpanel-border ;
+  }
 
-//  with multiple calendars
-.ui-datepicker.ui-datepicker-multi {
-  width: auto;
-}
-.ui-datepicker-multi .ui-datepicker-group {
-  float: left;
-}
-.ui-datepicker-multi .ui-datepicker-group table {
-  width: 95%;
-  margin: 0 auto .4em;
-}
-.ui-datepicker-multi-2 .ui-datepicker-group {
-  width: 50%;
-}
-.ui-datepicker-multi-3 .ui-datepicker-group {
-  width: 33.3%;
-}
-.ui-datepicker-multi-4 .ui-datepicker-group {
-  width: 25%;
-}
-.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
-.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
-  border-left-width: 0;
-}
-.ui-datepicker-multi .ui-datepicker-buttonpane {
-  clear: left;
-}
+
+  // -----------------------
+  // Header with Select-Elements
+  // -----------------------
+  .ui-datepicker-header {
+    position:       relative;
+    padding:         0.2em 0;
+
+    &.ui-datepicker-prev,
+    &.ui-datepicker-next {
+      position:     absolute;
+      top:           2px;
+      width:         1.8em;
+      height:       1.8em;
+
+      &-hover { top: 1px; }
+
+      span {
+        display:       block;
+        position:     absolute;
+        left:         50%;
+        margin-left: -8px;
+        top:           50%;
+        margin-top:  -8px;
+      }
+    }
+    .ui-datepicker-prev {
+      float:           left;
+      left:           2px;
+      &-hover { left: 1px; background-position: 25% 25% ; }
+    }
+    .ui-datepicker-next {
+      float:           right ;
+      right:           2px;
+      &-hover { right: 1px; background-position: 25% 25% ; }
+    }
+
+    .ui-datepicker-title {
+      margin:       0 2.3em;
+      line-height:   1.8em;
+      text-align:   center;
+
+      select {
+        margin:     1px 0;
+        &.ui-datepicker-month{ margin-right: 0.2em ; }
+      }
+    }
+
+    select.ui-datepicker-month-year {
+      width: 100%;
+    }
+    select.ui-datepicker-month,
+    select.ui-datepicker-year {
+      width: 49%;
+    }
+
+    &.ui-corner-all{
+      cursor: pointer ;
+      &.ui-state-hover {
+        border: none !important ;
+        curser: pointer ;
+      }
+    }
+
+    &.ui-widget-header {
+      .ui-icon {
+        background-image: url(ui-lightness/images/ui-icons_222222_256x240.png);
+      }
+      .ui-state-hover{
+        .ui-icon{
+          background-image: url(ui-lightness/images/ui-icons_ef8c08_256x240.png);
+          //background: #ffffff;
+        }
+      }
+    }
+  } // /.ui-datepicker-header
+
+
+  // -----------------------
+  // Table with Calendar
+  // -----------------------
+  table {
+    width:             100%;
+    font-size:         @font-size-smaller;
+    border-collapse:   collapse;
+    margin:           0 0 0.4em;
+
+    th {
+      padding:         0.7em 0.3em;
+      text-align:     center;
+      font-weight:     bold;
+      border:         0;
+    }
+    td {
+      border:         0;
+      padding:         1px;
+
+      span,
+      a {
+        display:           block;
+        padding:           0.2em;
+        text-align:       right;
+        text-decoration:   none;
+      }
+      a.ui-state-hover{
+        color: #ffffff ;
+        background-color: @brand-darker;
+      }
+    }
+
+    &.ui-datepicker-calendar {
+      // current date
+      .ui-state-highlight{
+        color: #ffffff ;
+        background-color: @brand-darker;
+        border: 1px @gray-standard solid
+      }
+      // Days
+      td a {
+        &.ui-state-default { color: @brand-dark; }
+        &.ui-state-hover {
+          color: #ffffff ;
+          background-color: #000000;
+          border: #000000 ;
+        }
+        &.ui-state-active {
+          border: 1px solid @brand-dark;
+          background-color: @brand-dark;
+          color: @brand-verylight;
+        }
+      } // /td
+    }    // /.ui-datepicker-calendar
+  }  // /table
+
+  .ui-datepicker-buttonpane {
+    background-image:   none;
+    margin:             0.7em 0 0 0;
+    padding:             0 0.2em;
+    border-left:         0;
+    border-right:       0;
+    border-bottom:       0;
+
+    button {
+      float:       right;
+      margin:     .5em .2em .4em;
+      cursor:     pointer;
+      padding:     .2em .6em .3em .6em;
+      width:       auto;
+      overflow:   visible;
+
+      &.ui-datepicker-current {
+        float:     left;
+      }
+      &.ui-datepicker-current,
+      &.ui-datepicker-close {
+        .mx-button-neutral ;
+        font-weight: normal ;
+      }
+
+
+
+    }
+  }  // /.ui-datepicker-buttonpane
+
+
+  // -----------------------
+  // Multiple Calendars
+  // -----------------------
+  //  with multiple calendars
+  &.ui-datepicker-multi {
+    width: auto;
+    .ui-datepicker-group {
+      float: left;
+      table {
+        width:   95%;
+        margin: 0 auto .4em;
+      }
+    }
+    .ui-datepicker-group-last,
+    .ui-datepicker-group-middle {
+       .ui-datepicker-header{ border-left-width: 0; }
+    }
+    .ui-datepicker-buttonpane { clear: left; }
+  }  // .&.ui-datepicker-multi
+
+} // /.ui-datepicker
+
+//  Date picker with multiple calendars
+.ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; }
+.ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; }
+.ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; }
+//
 .ui-datepicker-row-break {
   clear: both;
   width: 100%;
   font-size: 0;
 }
 
+// -----------------------
+// Calendar symbol
+// -----------------------
+img.ui-datepicker-trigger{
+  vertical-align: middle;
+  margin-left: 0.2em ;
+}
 
 
 
@@ -535,67 +651,74 @@ button.ui-button::-moz-focus-inner {
 
 
 
+
 // --------------------------------------
 // UI-DIALOG
 // --------------------------------------
 
 .ui-dialog {
-  z-index: 8001 ;
-  position: absolute;
-  top: 0;
-  left: 0;
-  //padding: .2em;
-  outline: 0;
-  border: 1px solid black; // Custom
+  z-index:         8001 ;
+  position:       absolute;
+  top:             0;
+  left:           0;
+  outline:         0;
+  border:         @controlpanel-border ; // Custom
+  border-radius:   @controlpanel-radius;
+  //color:           #333333;
 
   .ui-dialog-titlebar {
-    padding:      0.4em 1.0em;
-    border:       none;
-    background:   @h1-bg ;
-    color:        @h1-color ;
-    font-weight:  normal;
-    position:     relative;
-    text-align:   left;
-    font-size:    @h3-size;
+    padding:          0.4em 1.0em;
+    border:           none;
+    background-color: @brand-h1-bg !important;
+    color:            @brand-h1-color !important;
+    font-weight:      normal;
+    position:         relative;
+    text-align:       left;
+    font-size:        @h3-size;
 
     .ui-dialog-title {
-      float:           left;
-      white-space:     nowrap;
-      overflow:        hidden;
-      text-overflow:   ellipsis;
-      display:         block;
+      float:          left;
+      white-space:    nowrap;
+      overflow:       hidden;
+      text-overflow:  ellipsis;
+      display:        block;
     }
 
     .ui-dialog-titlebar-close {
       position:     absolute;
       right:        0.3em;
-      top:          50%;
+      //top:        50%;
+      top:           0;
       width:        21px;
-      margin:       10px 0 0 0;
+      //margin:     10px 0 0 0;
+      margin:       5px 0 0 0;
       padding:      1px;
       height:       20px;
+//      background: #bbb !important;
     }
-  }
-  // /.ui-dialog-titlebar
+  } // /.ui-dialog-titlebar
 
   .ui-dialog-content {
-    position: relative;
-    border: 0;
-    padding: .5em 1em;
-    background: none;
-    overflow: auto;
-
+    position:         relative;
+    border:           0;
+    padding:           0.5em 1em;
+    background-color: @jquery_ui_dialog-bg-color !important;
+    background:       @jquery_ui_dialog-bg-style !important;
+    overflow:         auto;
+  }
+  .wrapper {
+    margin: 0 ;
   }
 
   .ui-dialog-buttonpane {
-    text-align: left;
-    border-width: 1px 0 0 0;
+    text-align:       left;
+    border-width:     1px 0 0 0;
     background-image: none;
-    margin-top: .5em;
-    padding: .3em 1em .5em .4em;
+    margin-top:       0.5em;
+    padding:           0.3em 1em 0.5em 0.4em;
 
     .ui-dialog-buttonset {
-      float: right;
+      float:           right;
     }
 
     button {
@@ -613,17 +736,20 @@ button.ui-button::-moz-focus-inner {
     background-position: 16px 16px;
   }
 
+//  .ui-widget-header {
+//    button.ui-dialog-titlebar-close {
+//      right: 0.3em;
+//      top: 0;
+//      width: 21px;
+//      margin: 5px 0 0 0;
+//    }
+//  }
+
   &.ui-draggable .ui-dialog-titlebar {
     cursor: move;
   }
 
-}
-// /.ui-dialog
-
-
-
-
-
+} // /.ui-dialog
 
 
 
@@ -632,76 +758,266 @@ button.ui-button::-moz-focus-inner {
 // UI-MENU
 // --------------------------------------
 
-
 .ui-menu {
   list-style: none;
   padding: 2px;
   margin: 0;
   display: block;
   outline: none;
-}
-.ui-menu .ui-menu {
-  margin-top: -3px;
-  position: absolute;
-}
-.ui-menu .ui-menu-item {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  //  support: IE10, see #8844
-  list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
-}
-.ui-menu .ui-menu-divider {
-  margin: 5px -2px 5px -2px;
-  height: 0;
-  font-size: 0;
-  line-height: 0;
-  border-width: 1px 0 0 0;
-}
-.ui-menu .ui-menu-item a {
-  text-decoration: none;
-  display: block;
-  padding: 2px .4em;
-  line-height: 1.5;
-  min-height: 0; //  support: IE7
-  font-weight: normal;
-}
-.ui-menu .ui-menu-item a.ui-state-focus,
-.ui-menu .ui-menu-item a.ui-state-active {
-  font-weight: normal;
-  margin: -1px;
-}
+  display: inline-table ;
+  border-collapse: collapse ;
 
-.ui-menu .ui-state-disabled {
-  font-weight: normal;
-  margin: .4em 0 .2em;
-  line-height: 1.5;
-}
-.ui-menu .ui-state-disabled a {
-  cursor: default;
-}
+  &.ui-widget-content {
+    border: 1px @_menu_border_color solid ;
+  }
 
-//  icon support
-.ui-menu-icons {
-  position: relative;
-}
-.ui-menu-icons .ui-menu-item a {
-  position: relative;
-  padding-left: 2em;
-}
+  .ui-menu-item {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    background-color: @brand-lighter;
+    border-bottom: 1px @_menu_border_color solid ;
+
+    a {
+      text-decoration: none;
+      display: block;
+      padding: 2px .4em;
+      line-height: 1.5;
+      min-height: 0; //  support: IE7
+      font-weight: normal;
+      border: 0 ;
+      background: none ;
+      border: 0 ;
+
+      &.ui-state-focus,
+      &.ui-state-active {
+        font-weight: normal;
+        margin: -1px;
+      }
+    }
+  } // /.ui-menu-item
+
+  .ui-menu-divider {
+    margin: 5px -2px 5px -2px;
+    height: 0;
+    font-size: 0;
+    line-height: 0;
+    border-width: 1px 0 0 0;
+  }
+
+  .ui-state-disabled {
+    font-weight: normal;
+    margin: .4em 0 .2em;
+    line-height: 1.5;
+    a { cursor: default; }
+  }
+
+  // ui-menu within a ui-menu
+  .ui-menu {
+    margin-top: -3px;
+    position: absolute;
+  }
+
+  //  icon support
+  &.ui-menu-icons {
+    position: relative;
+
+    .ui-menu-item a {
+      position: relative;
+      padding-left: 2em;
+    }
+  }
+
+  //  left-aligned
+  .ui-icon {
+    position: absolute;
+    top: .2em;
+    left: .2em;
+  }
+  //  right-aligned
+  .ui-menu-icon {
+    position: static;
+    float: right;
+  }
+
+} // /.ui-menu
+
+
+
+// --------------------------------------
+// CONTEXT MENU
+// --------------------------------------
+
+// -----------------------
+// Context Menu List
+// -----------------------
+ul.context-menu-list{
+  margin:             0;
+  padding:            0;
+  min-width:          120px;
+  max-width:          250px;
+  display:            inline-block;
+  position:           absolute;
+  list-style-type:    none;
+  border:             1px solid #DDD;
+  background:         #EEE;
+
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+     -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+      -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+       -o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+
+  //font-family: Verdana, Arial, Helvetica, sans-serif;
+  //font-size: 11px;
+
+  &.context-menu-root {}
+
+
+	// -----------------------
+	// Context Menu Item
+	// -----------------------
+  li.context-menu-item {
+    padding:              2px 2px 2px 24px;
+    background-color:     #EEE;
+    position:             relative;
+    -webkit-user-select:  none;
+       -moz-user-select:  -moz-none;
+        -ms-user-select:  none;
+            user-select:  none;
+
+    // Header within the menu
+    &.context-menu-heading {
+      text-decoration: underline;
+      font-weight: bold;
+    }
+
+    // States
+    &.hover {
+      cursor: pointer;
+      background-color: #39F;
+
+      & > .context-menu-list {
+        display: block ;
+      }
+    }
+    &.disabled { color: #666; }
+    &.hover,
+    &.disabled.hover {
+        cursor: default ;
+        background-color: #EEE ;
+    }
+
+
+
+    // -----------------------
+    // Icons in Menu Item
+    // -----------------------
+    .icon {
+      // Original code
+      min-height:           18px;
+      background-repeat:    no-repeat;
+      background-position:  4px 2px;
+
+      // Original Code (but now disabled)
+      // &.icon-edit   { background-image: url(../image/jquery.contextMenu/page_white_edit.png)  ; }
+      // &.icon-cut    { background-image: url(../image/jquery.contextMenu/cut.png)              ; }
+      // &.icon-copy   { background-image: url(../image/jquery.contextMenu/page_white_copy.png)  ; }
+      // &.icon-paste  { background-image: url(../image/jquery.contextMenu/page_white_paste.png) ; }
+      // &.icon-delete { background-image: url(../image/jquery.contextMenu/page_white_delete.png); }
+      // &.icon-add    { background-image: url(../image/jquery.contextMenu/page_white_add.png)   ; }
+      // &.icon-quit   { background-image: url(../image/jquery.contextMenu/door.png)             ; }
+
+      // All Icons are listed here
+      &.icon-add      {  }
+      &.icon-edit     {  }
+      &.icon-delete   {  }
+      &.icon-flag     {  }
+      &.icon-copy     {  }
+      &.icon-paste    {  }
+      &.icon-pdf      {  }
+      &.icon-new      {  }
+      &.icon-renumber {  }
+    }
+
+    span {}
+
+    &.context-menu-separator {
+      padding-bottom:0;
+      border-bottom: 1px solid #DDD;
+
+      &.not-selectable {}
+    }
+
+    // Item has submenu
+    &.context-menu-submenu:after {
+      content: ">";
+      color: #666;
+      position: absolute;
+      top: 0;
+      right: 3px;
+      z-index: 1;
+    }
+
+    // Submenu-List
+    & > .context-menu-list {
+      display: none;
+      /* re-positioned by js */
+      right: -5px;
+      top: 5px;
+    }
+
+    .context-menu-accesskey {
+        text-decoration: underline;
+    }
+
+
+    & > label > input,
+    & > label > textarea {
+      -webkit-user-select: text;
+         -moz-user-select: text;
+          -ms-user-select: text;
+              user-select: text;
+    }
+
+
+  } // /li.context-menu-item
+
+
+
+	// -----------------------
+	// Context Menu Input
+	// -----------------------
+
+  .context-menu-input {
+    /* vertically align inside labels */
+    & > label > * { vertical-align: top; }
+
+    /* position checkboxes and radios as icons */
+    & > label > input[type="checkbox"],
+    & > label > input[type="radio"] {  margin-left: -17px; }
+    & > label,
+    & > label > input[type="text"],
+    & > label > textarea,
+    & > label > select {
+      display: block;
+      width: 100%;
+      -webkit-box-sizing: border-box;
+         -moz-box-sizing: border-box;
+          -ms-box-sizing: border-box;
+           -o-box-sizing: border-box;
+              box-sizing: border-box;
+    }
+
+    & > label > span {  margin-left: 5px ; }
+    & > label > textarea { height: 100px; }
+
+  } // /.context-menu-input
+
+
+} // /ul.context-menu-list
 
-//  left-aligned
-.ui-menu .ui-icon {
-  position: absolute;
-  top: .2em;
-  left: .2em;
-}
 
-//  right-aligned
-.ui-menu .ui-menu-icon {
-  position: static;
-  float: right;
-}
 
 
 
@@ -713,20 +1029,22 @@ button.ui-button::-moz-focus-inner {
   height: 2em;
   text-align: left;
   overflow: hidden;
-}
-.ui-progressbar .ui-progressbar-value {
-  margin: -1px;
-  height: 100%;
-}
-.ui-progressbar .ui-progressbar-overlay {
-  background: url("ui-lightness/images/animated-overlay.gif");
-  height: 100%;
-  filter: alpha(opacity=25);
-  opacity: 0.25;
-}
-.ui-progressbar-indeterminate .ui-progressbar-value {
-  background-image: none;
-}
+
+  .ui-progressbar-value {
+    margin: -1px;
+    height: 100%;
+  }
+  .ui-progressbar-overlay {
+    background: url("ui-lightness/images/animated-overlay.gif");
+    height: 100%;
+    filter: alpha(opacity=25);
+    opacity: 0.25;
+  }
+  .ui-progressbar-indeterminate .ui-progressbar-value {
+    background-image: none;
+  }
+} // /.ui-progressbar
+
 
 
 
@@ -738,66 +1056,69 @@ button.ui-button::-moz-focus-inner {
 .ui-slider {
   position: relative;
   text-align: left;
-}
-.ui-slider .ui-slider-handle {
-  position: absolute;
-  z-index: 2;
-  width: 1.2em;
-  height: 1.2em;
-  cursor: default;
-}
-.ui-slider .ui-slider-range {
-  position: absolute;
-  z-index: 1;
-  font-size: @font-size-smaller;
-  display: block;
-  border: 0;
-  background-position: 0 0;
-}
 
-//  For IE8 - See #6727
-.ui-slider.ui-state-disabled .ui-slider-handle,
-.ui-slider.ui-state-disabled .ui-slider-range {
-  filter: inherit;
-}
+  .ui-slider-handle {
+    position: absolute;
+    z-index: 2;
+    width: 1.2em;
+    height: 1.2em;
+    cursor: default;
+  }
+
+  .ui-slider-range {
+    position: absolute;
+    z-index: 1;
+    //font-size: @font-size-smaller;
+    display: block;
+    border: 0;
+    background-position: 0 0;
+  }
+
+  //  For IE8 - See #6727
+  &.ui-state-disabled .ui-slider-handle,
+  &.ui-state-disabled .ui-slider-range {
+    filter: inherit;
+  }
+} // /.ui-slider
 
 .ui-slider-horizontal {
   height: .8em;
-}
-.ui-slider-horizontal .ui-slider-handle {
-  top: -.3em;
-  margin-left: -.6em;
-}
-.ui-slider-horizontal .ui-slider-range {
-  top: 0;
-  height: 100%;
-}
-.ui-slider-horizontal .ui-slider-range-min {
-  left: 0;
-}
-.ui-slider-horizontal .ui-slider-range-max {
-  right: 0;
-}
+
+  .ui-slider-handle {
+    top: -.3em;
+    margin-left: -.6em;
+  }
+  .ui-slider-range {
+    top: 0;
+    height: 100%;
+  }
+  .ui-slider-range-min { left: 0;  }
+  .ui-slider-range-max { right: 0; }
+}// /.ui-slider-horizontal
 
 .ui-slider-vertical {
   width: .8em;
   height: 100px;
-}
-.ui-slider-vertical .ui-slider-handle {
-  left: -.3em;
-  margin-left: 0;
-  margin-bottom: -.6em;
-}
-.ui-slider-vertical .ui-slider-range {
-  left: 0;
-  width: 100%;
-}
-.ui-slider-vertical .ui-slider-range-min {
-  bottom: 0;
-}
-.ui-slider-vertical .ui-slider-range-max {
-  top: 0;
-}
+
+  .ui-slider-handle {
+    left: -.3em;
+    margin-left: 0;
+    margin-bottom: -.6em;
+  }
+  .ui-slider-range {
+    left: 0;
+    width: 100%;
+  }
+  .ui-slider-range-min {
+    bottom: 0;
+  }
+  .ui-slider-range-max {
+    top: 0;
+  }
+
+
+} // /.ui-slider-vertical
+
 
 
 
@@ -811,55 +1132,53 @@ button.ui-button::-moz-focus-inner {
   overflow: hidden;
   padding: 0;
   vertical-align: middle;
-}
-.ui-spinner-input {
-  border: none;
-  background: none;
-  color: inherit;
-  padding: 0;
-  margin: .2em 0;
-  vertical-align: middle;
-  margin-left: .4em;
-  margin-right: 22px;
-}
-.ui-spinner-button {
-  width: 16px;
-  height: 50%;
-  font-size: @font-size-smaller;
-  padding: 0;
-  margin: 0;
-  text-align: center;
-  position: absolute;
-  cursor: default;
-  display: block;
-  overflow: hidden;
-  right: 0;
-}
-//  more specificity required here to overide default borders
-.ui-spinner a.ui-spinner-button {
-  border-top: none;
-  border-bottom: none;
-  border-right: none;
-}
-//  vertical centre icon
-.ui-spinner .ui-icon {
-  position: absolute;
-  margin-top: -8px;
-  top: 50%;
-  left: 0;
-}
-.ui-spinner-up {
-  top: 0;
-}
-.ui-spinner-down {
-  bottom: 0;
-}
 
-//  TR overrides
-.ui-spinner .ui-icon-triangle-1-s {
-  //  need to fix icons sprite
-  background-position: -65px -16px;
-}
+  .ui-spinner-input {
+    border: none;
+    background: none;
+    color: inherit;
+    padding: 0;
+    margin: .2em 0;
+    vertical-align: middle;
+    margin-left: .4em;
+    margin-right: 22px;
+  }
+  .ui-spinner-button {
+    width: 16px;
+    height: 50%;
+    //font-size: @font-size-smaller;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    position: absolute;
+    cursor: default;
+    display: block;
+    overflow: hidden;
+    right: 0;
+  }
+  //  more specificity required here to overide default borders
+  a.ui-spinner-button {
+    border-top: none;
+    border-bottom: none;
+    border-right: none;
+  }
+  //  vertical centre icon
+  .ui-icon {
+    position: absolute;
+    margin-top: -8px;
+    top: 50%;
+    left: 0;
+  }
+  .ui-spinner-up   { top: 0; }
+  .ui-spinner-down { bottom: 0; }
+
+  //  TR overrides
+  .ui-spinner .ui-icon-triangle-1-s {
+    //  need to fix icons sprite
+    background-position: -65px -16px;
+  }
+} // /.ui-spinner
+
 
 
 
@@ -873,36 +1192,54 @@ button.ui-button::-moz-focus-inner {
   // auto appear as "fixed")
   position: relative;
   padding: .2em;
-}
-.ui-tabs .ui-tabs-nav {
-  margin: 0;
-  padding: .2em .2em 0;
-}
-.ui-tabs .ui-tabs-nav li {
-  list-style: none;
-  float: left;
-  position: relative;
-  top: 0;
-  margin: 1px .2em 0 0;
-  border-bottom-width: 0;
-  padding: 0;
-  white-space: nowrap;
-}
-.ui-tabs .ui-tabs-nav li a {
-  float: left;
-  padding: .5em 1em;
-  text-decoration: none;
-}
-.ui-tabs .ui-tabs-nav li.ui-tabs-active {
-  margin-bottom: -1px;
-  padding-bottom: 1px;
-}
-.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
-.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
-.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
-  cursor: text;
-  outline: 0 ; // hps: gepunketen Rahmen nach Klick ausblenden
-}
+
+  .ui-tabs-nav {
+    margin: 0;
+    padding: .2em .2em 0;
+
+    li {
+      list-style: none;
+      float: left;
+      position: relative;
+      top: 0;
+      margin: 1px .2em 0 0;
+      border-bottom-width: 0;
+      padding: 0;
+      white-space: nowrap;
+
+      a {
+        float: left;
+        padding: .5em 1em;
+        text-decoration: none;
+        cursor: pointer;
+      }
+
+      .ui-tabs-active {
+        margin-bottom: -1px;
+        padding-bottom: 1px;
+      }
+      .ui-tabs-active,
+      .ui-state-disabled,
+      .ui-tabs-loading {
+        a {
+          cursor: text;
+          outline: 0 ; // hps: gepunketen Rahmen nach Klick ausblenden
+        }
+      }
+
+    } // /li
+  } // /.ui-tabs-nav
+
+  .ui-tabs-panel {
+    display: block;
+    border-width: 0;
+    padding: 0.4em 0 1.0em 0;
+    //background: none;
+  }
+
+} // /.ui-tabs
+
+
 // first selector in group seems obsolete,
 // but required to overcome bug in Opera applying cursor:
 // text overall if defined elsewhere...
@@ -910,12 +1247,7 @@ button.ui-button::-moz-focus-inner {
 .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
   cursor: pointer;
 }
-.ui-tabs .ui-tabs-panel {
-  display: block;
-  border-width: 0;
-  padding: 0.4em 0 1.0em 0;
-  background: none;
-}
+
 
 
 
@@ -924,162 +1256,212 @@ button.ui-button::-moz-focus-inner {
 // --------------------------------------
 
 .ui-tooltip {
-  padding: 8px;
-  position: absolute;
-  z-index: 9999;
-  max-width: 300px;
-  -webkit-box-shadow: 0 0 5px #aaa;
-  box-shadow: 0 0 5px #aaa;
+  position:           absolute;
+  z-index:            9999;
+  max-width:          300px;
+  padding:            8px;
+  -webkit-box-shadow: 0 0 5px #aaa ;
+  box-shadow:         0 0 5px #aaa;
+  background-color:   @jquery_ui_tooltipster-bg-color !important ;
+
+  .ui-tooltip-content{
+    color:            #ffffff ;
+  }
 }
 body .ui-tooltip {
-  border-width: 2px;
+  border-width: 2px ;
 }
 
-// Component containers
+
+
+
+
+// ----------------------------------
+// Component containers (UI-WIDGET)
 // ----------------------------------
 .ui-widget {
-  font-size: @font-size-smaller;
-}
-.ui-widget .ui-widget {
-  font-size: @font-size-small;
-}
-.ui-widget input,
-.ui-widget select,
-.ui-widget textarea,
-.ui-widget button {
-  font-size: @font-size-smaller ;
-}
-.ui-widget-content {
-  border: 1px solid #dddddd;
-  //background: #eeeeee url(ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;
-  background: none ;
-  color: #333333;
-}
-.ui-widget-content a {
-  color: #333333;
+  //font-size: @font-size-smaller;
+
+  .ui-widget-header {
+    background: none;
+    color: #ffffff;
+    font-weight: bold;
+
+    a { color: #ffffff; }
+  }
+
+  .ui-widget-content {
+    //border: 1px solid #dddddd;
+    border: none;
+    background: none ;
+    //background-color: #ffffff ; // or Transparent
+    //color: #333333;
+
+    a {
+      //color: #333333;
+    }
+  } // .ui-widget-content
+
+  .ui-widget { font-size: @font-size-small; }
+
+  input,
+  select,
+  textarea,
+  button {
+    //font-size: @font-size-smaller ;
+  }
+
+} // /.ui-widget
+
+
+
+
+
+// --------------------------------------
+// CKEditor
+// --------------------------------------
+.cke_editable {
+  background-color: white;
+  padding: 6px;
+  //margin-left: -0.3em ;
+  border-top: 1px #999 solid;
+  border-right: 1px #ddd solid;
+  border-left: 1px #ddd solid;
+  overflow: auto ;
+  font-size: 11pt ;
+  min-width: @textarea-wi-lightwide ;
+  min-height: 4.0em ;
+  &:focus {
+    outline: none ;
+    background-color: @formelement-focus-bg ;
+    border: @formelement-focus-border ;
+  }
+
+  p {
+    font-size: 10pt !important;
+    padding: 0  ;
+    margin: 0 0 0.4em 0 ;
+    font-weight: normal;
+  }
 }
-.ui-widget-header {
-  // border: 1px solid #e78f08; /* hps */
-  background: none;
-  color: #ffffff;
-  font-weight: bold;
+div.cke_editable.wi-small-wide{
+  margin-right: 24px !important ;
 }
-.ui-widget-header a {
-  color: #ffffff;
+body > .ui-dialog > .ui-dialog-content > p > .cke_editable {
+  border: 1px #dcdcdc solid !important;
+  padding: 0.4em;
+  margin: 0;
+  font-size: 100%;
+  width: 100% !important;
 }
 
 
 
+
+
 // ----------------------------------
 // Interaction states
 // ----------------------------------
+
 .ui-state-default,
-.ui-widget-content .ui-state-default,
-.ui-widget-header .ui-state-default {
+.ui-state-hover,
+.ui-state-focus,
+.ui-state-active {
+  .ui-icon {
+    background-image: url(ui-lightness/images/ui-icons_777777_256x240.png) !important;
+  }
+}
+
+.ui-state-default {
   border: 1px solid #cccccc;
   //background: #f6f6f6 url(ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
   background: none ;
   font-weight: bold;
-  color: #1c94c4;
-}
-.ui-state-default a,
-.ui-state-default a:link,
-.ui-state-default a:visited {
-  color: #1c94c4;
-  text-decoration: none;
-}
+  color: @brand-darker;
+  a,
+  a:link,
+  a:visited {
+    color: #1c94c4;
+    text-decoration: none;
+  }
+} // /.ui-state-default
+
 .ui-state-hover,
-.ui-widget-content .ui-state-hover,
-.ui-widget-header .ui-state-hover,
-.ui-state-focus,
-.ui-widget-content .ui-state-focus,
-.ui-widget-header .ui-state-focus {
-  border: 1px solid #fbcb09;
+.ui-state-focus {
+  //border: 1px solid #fbcb09;
   //background: #fdf5ce url(ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x;
   background: none ;
   font-weight: bold;
   color: #c77405;
-}
-.ui-state-hover a,
-.ui-state-hover a:hover,
-.ui-state-hover a:link,
-.ui-state-hover a:visited {
-  color: #000;
-  text-decoration: underline;
-}
-.ui-state-active,
-.ui-widget-content .ui-state-active,
-.ui-widget-header .ui-state-active {
+  a,
+  a:hover,
+  a:link,
+  a:visited {
+    color: #000;
+    text-decoration: underline;
+  }
+} // .ui-state-hover, .ui-state-focus
+
+.ui-state-active {
   border: 1px solid #fbd850;
   //background: #ffffff url(ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
   background: none ;
   font-weight: bold;
   color: #eb8f00;
-}
-.ui-state-active a,
-.ui-state-active a:link,
-.ui-state-active a:visited {
-  color: #eb8f00;
-  text-decoration: none;
-}
+  a,
+  a:link,
+  a:visited {
+    color: #eb8f00;
+    text-decoration: none;
+  }
+} // .ui-state-active
+
 
 
 // ----------------------------------
 // Interaction Cues
 // ----------------------------------
-.ui-state-highlight,
-.ui-widget-content .ui-state-highlight,
-.ui-widget-header .ui-state-highlight {
+.ui-state-highlight {
   border: 1px solid #fed22f;
   //background: #ffe45c url(ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;
   background: none ;
   color: #363636;
+  a { color: #363636; }
 }
-.ui-state-highlight a,
-.ui-widget-content .ui-state-highlight a,
-.ui-widget-header .ui-state-highlight a {
-  color: #363636;
-}
-.ui-state-error,
-.ui-widget-content .ui-state-error,
-.ui-widget-header .ui-state-error {
+
+.ui-state-error {
   border: 1px solid #cd0a0a;
   //background: #b81900 url(ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
   background: none ;
   color: #ffffff;
+  a { color: #ffffff; }
 }
-.ui-state-error a,
-.ui-widget-content .ui-state-error a,
-.ui-widget-header .ui-state-error a {
-  color: #ffffff;
-}
-.ui-state-error-text,
-.ui-widget-content .ui-state-error-text,
-.ui-widget-header .ui-state-error-text {
+
+.ui-state-error-text {
   color: #ffffff;
 }
-.ui-priority-primary,
-.ui-widget-content .ui-priority-primary,
-.ui-widget-header .ui-priority-primary {
+
+.ui-priority-primary {
   font-weight: bold;
 }
-.ui-priority-secondary,
-.ui-widget-content .ui-priority-secondary,
-.ui-widget-header .ui-priority-secondary {
+.ui-priority-secondary {
   opacity: .7;
   filter:Alpha(Opacity=70);
   font-weight: normal;
 }
-.ui-state-disabled,
-.ui-widget-content .ui-state-disabled,
-.ui-widget-header .ui-state-disabled {
+
+.ui-state-disabled {
   opacity: .35;
   filter:Alpha(Opacity=35);
   background-image: none;
+  .ui-icon { filter:Alpha(Opacity=35); } //  For IE8 - See #6059
 }
-.ui-state-disabled .ui-icon {
-  filter:Alpha(Opacity=35); //  For IE8 - See #6059
-}
+
+// Overrides
+
+
+
+
 
 
 
@@ -1306,25 +1688,25 @@ body .ui-tooltip {
 .ui-corner-top,
 .ui-corner-left,
 .ui-corner-tl {
-  //border-top-left-radius: 4px;
+  //border-top-left-radius: @tabs-border-radius;
 }
 .ui-corner-all,
 .ui-corner-top,
 .ui-corner-right,
 .ui-corner-tr {
-  //border-top-right-radius: 4px;
+  //border-top-right-radius: @tabs-border-radius;
 }
 .ui-corner-all,
 .ui-corner-bottom,
 .ui-corner-left,
 .ui-corner-bl {
-  //border-bottom-left-radius: 4px;
+  //border-bottom-left-radius: @tabs-border-radius;
 }
 .ui-corner-all,
 .ui-corner-bottom,
 .ui-corner-right,
 .ui-corner-br {
-  //border-bottom-right-radius: 4px;
+  //border-bottom-right-radius: @tabs-border-radius;
 }
 
 // Overlays */
@@ -1341,32 +1723,96 @@ body .ui-tooltip {
   background: #000000 ;
   opacity: .2;
   filter: Alpha(Opacity=20);
-  border-radius: 5px;
-}
-
-// datepicker
-.ui-datepicker-header .ui-datepicker-prev,
-.ui-datepicker-header .ui-datepicker-next {
-  &.ui-corner-all{
-    cursor: pointer ;
-    &.ui-state-hover {
-      border: none !important ;
-      curser: pointer ;
-    }    
+  border-radius: @controlpanel-radius;
+}
+
+
+
+// --------------------------------------
+// KIVITENDO STUFF
+// --------------------------------------
+
+
+// -----------------------
+// Part, Chart & Customer Vendor Picker
+// -----------------------
+
+//  Chart-Picker
+//  Entnommen aus main.less, gehoert vielleicht zu Autocomplete
+
+.chart_picker,
+.part_picker {
+  display: inline-block;
+
+  &:before{
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
   }
 }
-// current date
-.ui-datepicker-calendar {
-  .ui-state-highlight{
-    color: #ffffff ;
-    background-color: #c77405; 
+
+span.chart_picker,
+span.part_picker {
+  white-space: nowrap ;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  input {
+    //  padding-right: 20px;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
   }
-  td a.ui-state-hover{
-    color: #ffffff ;
-    background-color: #c77405;   
+}
+
+div.part_picker_part,
+div.chart_picker_chart {
+  padding: 5px;
+  margin: 5px;
+  border: 1px;
+  border-color: darkgray;
+  border-style: solid;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  background-color: white;
+  cursor: pointer;
+
+  &:hover {
+    color: #000;
+    text-decoration: underline;
   }
 }
-.ui-datepicker-title select.ui-datepicker-month{
-  margin-right: 0.2em ;
+
+
+
+
+// Part_Picker
+// Select Customer in input-fields
+// PENDENT: Ausrichtung vertikal in Zelle
+span.customer_vendor_picker{
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.customer-vendor-picker-undefined,
+.chartpicker-undefined,
+.projectpicker-undefined,
+.partpicker-undefined {
+  color: red;
+  font-style: italic;
 }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css/less/jquery-ui_overrides.less b/css/less/jquery-ui_overrides.less
index 8a67a3bd6..74d9e189f 100755
--- a/css/less/jquery-ui_overrides.less
+++ b/css/less/jquery-ui_overrides.less
@@ -1,10 +1,15 @@
+/* ------------------------------------------------------------- */
+/* JQUERY-UI OVERRIDES (jquery-ui_overrides.less)                */
+/* ------------------------------------------------------------- */
+
+
 // ----------------------------------------------------------------------------
 //
 // jQuery UI CUSTOM
 //
 // ----------------------------------------------------------------------------
 // DESCRIPTION:
-// Overrides of jQuery UI.less stuff
+// Overrides of jQuery UI LESS or CSS stuff
 //
 // Contents:
 // - UI WIDGETS IN GENERAL
@@ -28,9 +33,7 @@
 // UI WIDGETS IN GENERAL
 // --------------------------------------
 
-.ui-widget-content {
-  background: white;
-}
+
 
 
 
@@ -41,137 +44,119 @@
 // Container with Tabs & Panels (DIV)
 
 .tabwidget {
-  background: white;
-  position: relative;
-  padding: 0 !important; // hps
-  zoom: 1;
-  // -webkit-border-radius: 4px;
-  // border-radius: 4px;
-  border: 0;
-  color: #333333;
-  overflow: hidden;
-  width: 100%;
+  width:       100%;
+  overflow:   hidden;
+  position:   relative;
+  zoom:       1;
+  padding:     0 !important;
+  border:     0;
 
+  color:       @tabs-default-color;
+  //background: @tabs-bg;
+  background: transparent;
 
 
 
-  // --------------------------------------
+  // -----------------------
   // LIST WITH TABS (UL)
-  // --------------------------------------
-
+  // -----------------------
   > ul {
-    margin: 0;
-    padding: 0.2em 0.2em 0 0;
-    outline: 0;
-    line-height: 1.3;
-    text-decoration: none;
-    font-size: @font-size-base; // hps
-    font-weight: bold;
-    list-style: none;
-    display: block;
-    background-color: none;
-    border: 1px #dddddd;
-    color: #fe5f14;
-    margin: 0;
-
-    &::after {
-      content: ".";
-      display: block;
-      height: 0;
-      clear: both;
-      visibility: hidden;
-    }
-
-
-
-    // --------------------------------------
+    display:           block;
+    list-style:       none;
+    outline:           0;
+    margin:           0;
+    padding:           0.2em 0.2em 0 0;
+    margin:           0;
+
+    font-size:         @font-size-base; // hps
+    font-weight:       bold;
+    line-height:       1.3;
+    text-decoration:  none;
+
+    // -----------------------
     // SINGLE TAB (LI)
-    // --------------------------------------
-
+    // -----------------------
     li {
+      position:   relative;
+      top:        1px;
+      float:      left;
       list-style: none;
-      float: left;
-      position: relative;
-      top: 1px;
-      //margin: 0 0.4em 1px 0;
-      margin: 1px 0.2em 0 0;
-      border-bottom: 0 !important;
-      border-top-right-radius: 4px;
-      border-top-left-radius:  4px;
-      padding: 0;
+
+      margin:      1px 0.2em 0 0;
+      padding:     0;
       white-space: nowrap;
-      border: 1px solid #cccccc;
-      background: #f6f6f6 url(ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
-      font-size: @font-size-smaller ;
-      font-weight: bold;
-      color: #1c94c4;
+
+      border-bottom:           0 !important;
+      border-top-right-radius: @tabs-border-radius;
+      border-top-left-radius:  @tabs-border-radius;
+      border:                  1px solid #cccccc;
+
+      background-color:    @tabs-default-bg ;
+      color:               @tabs-default-color;
+      font-size:           @font-size-smaller ;
+      font-weight:         bold;
 
       &.ui-tabs-selected {
-        margin-bottom: 0;
-        padding-bottom: 1px;
+        margin-bottom:    0;
+        padding-bottom:   1px;
 
-        a { cursor: pointer; }
+        a { cursor:       pointer; }
       }
 
-      // --------------
+      // -----------------------
       // LINKS
-      //
+      // -----------------------
       a {
-        float: left;
-        //padding: 0.8em 1.2em;
-        padding: 0.2em 0.7em;
+        float:           left;
+        padding:         0.2em 0.7em;
         text-decoration: none;
-        cursor: pointer;
+        cursor:          pointer;
       }
 
-
-      // --------------
+      // -----------------------
       // STATES (Active, Default, Hover)
+      // -----------------------
       // Outline: 0 ; in anchor to avoid dotted frame after click
 
+      &.ui-state-default{
+        margin:       0 0 0 0.6em;
+        background:   @tabs-default-bg;
+        color:         @tabs-default-color;
+        border:       1px @tabs-border-color solid;
+        font-weight:   normal;
+
+        a,
+        a:link { color: @tabs-default-color; }
+      }
+
       &.ui-state-hover{
+        color:             @tabs-default-hover-color;
+        background-color: @tabs-default-hover-bg;
         a,
-        a:hover {
-          color: @tabs-text-hover;
-          background-color: @tabs-bg-hover;
-        }
+        a:hover {}
       }
 
       &.ui-state-active {
-        color: #000;
-        background-color: @tabs-bg;
+        color:               @tabs-active-color;
+        background-color:   @tabs-active-bg;
 
         a,
         a:link,
         a:visited {
-          color: #000;
-          background-color: @tabs-bg; // PENDENT: NOETIG???
-          outline: 0 ;
+          color:             @tabs-active-color;
+          outline:           0 ;
         }
 
         &.ui-state-hover {
+          color: @tabs-active-hover-color;
           a,
-          a:hover {
-            color: #000;
-            background-color: @brand-light;// PENDENT: NOETIG???
-          }
+          a:hover {}
         }
-      }
-
-      &.ui-state-default{
-        border: 1px solid @brand-darkest;
-        background: #fff;
-        font-weight: normal;
-        color: @brand-darkest;
-        margin: 0 0 0 0.6em;
+      } // /&.ui-state-active
 
-        a,
-        a:link { color: @brand-darkest; }
-      }
-
-      &.ui-state-disabled   a {
-        cursor: text;
-        outline: 0 ;
+      &.ui-state-disabled a {
+        cursor:   text;
+        outline:   0 ;
       }
       &.ui-state-processing a { cursor: text; }
       &.ui-state-loading    a { outline: 0 ;  }
@@ -179,31 +164,6 @@
     }
     // /li
 
-
-    // LI (List Elements)
-    // These statements have been active, probably we can trash them once
-    //.ui-state-default,
-    //.ui-widget-content .ui-state-default,
-    //.ui-widget-header .ui-state-default {
-    //    border: 1px solid @gray-medium;
-    //    background: #fff;
-    //    font-weight: normal;
-    //    color: #1c94c4;
-    //    margin: 0 0 0 0.6em;
-    //}
-    //.ui-state-active,
-    //.ui-widget-content .ui-state-active,
-    //.ui-widget-header .ui-state-active {
-    //    border: 1px solid @gray-medium; // hps
-    //    // background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
-    //    background: none;
-    //    background-color: @gray-verylight; // hps
-    //    font-weight: normal; // hps
-    //    color: #000; // hps
-    //}
-
-
-
     // UL
     &.ui-widget-header {
       //background: transparent;
@@ -213,19 +173,21 @@
 
 
 
-    // --------------------------------------
+    // -----------------------
     // UI-TABS-NAV (Class)
-    // --------------------------------------
+    // -----------------------
     // UL
     &.ui-tabs-nav {
-      margin: 0 0.4em 0.6em 0;
-      padding: 0.4em 0.2em 0 0.7em;
-      background-color: #ffffff;
       position: fixed;
       top: 100px;
       width: 100%;
       z-index: 1029;
-      border-bottom: 1px solid #999 !important;
+
+      margin: 0 0.4em 0.6em 0;
+      padding: 0.4em 0.2em 0 0.7em;
+
+      background-color: @tabs-bg;
+      border-bottom: 1px @tabs-border-color solid !important;
 
       li {
         margin: 1px 0.2em 0 0;
@@ -233,7 +195,7 @@
         a { padding: 0.2em 0.7em; }
 
         &.ui-tabs-active {
-          border-bottom: 1px @tabs-bg solid !important ;
+          border-bottom: 1px @tabs-active-bg solid !important ;
           margin-bottom: -1px;
           padding-bottom: 0;
         }
@@ -244,9 +206,9 @@
   // /ul
 
 
-  // --------------------------------------
+  // -----------------------
   // UI-TABS-COLLAPSIBLE
-  // --------------------------------------
+  // -----------------------
   &.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
      cursor: pointer;
   }
@@ -255,12 +217,15 @@
 
 
 
-  // --------------------------------------
+  // -----------------------
   // DIV (UI-Tabs-Panel)
-  // --------------------------------------
+  // -----------------------
   // Single Panel, selected via Tabs
-  // Some of the Panels do not have a class
+  // Some of the Panels do not have a class PENDENT: loesen!!!
 
+  //--------------------------
+  // UI-Tabs-Panel (DIV WITHOUT CLASS)
+  // --------------------------
   & > div {
     display: none;
     //border-top: 1px solid #999 !important;
@@ -274,253 +239,188 @@
     overflow: hidden ;
 
     //--------------------------
-    // UI-Tabs-Panel (CLASS)
+    // UI-Tabs-Panel (DIV WITH CLASS)
     // --------------------------
-
     &.ui-tabs-panel{
       width: 100%;
       overflow: hidden;
-      // aus Original oben
-      //background: none;
-      background-color: @tabs-bg;
-      //overflow: hidden; // show scrollbar vertical if overflown
+      //background-color: @tabs-panel-bg;
+      //background-color: transparent;
       display: block;
 
       // further tabwidget within a tabwidget (documents tab etc.)
       & > .tabwidget{
-        //background-color: rgb(239, 239, 239) ;
         position: relative ;
 
-        .ui-tabs-panel {
-          //background-color: rgb(239, 239, 239) !important;
+        & > .ui-tabs-nav{
+          position: relative ;
+          top: auto;
+          //background: none;
+          //background-color: @tabs-bg;
+          background-color: transparent;
+        }
+
+        & > .ui-tabs-panel {
           background-color: @tabs-bg ;
+          background-color: transparent ;
           position: relative ;
           top: auto;
           padding-top: 0 !important ;
         }
-        .ui-tabs-nav{ background-color: @tabs-bg; }
+        //.ui-tabs-nav{  }
       }
 
-    }
-    //  .ui-tabs-panel
+      &.ui-widget-content { border: 0 ;}
 
+    } //  .ui-tabs-panel
   } // /div (.ui-tabs-panel)
+} //  /.tabwidget
 
 
 
-}
-//  /.tabwidget
-
-
-#content > form > .tabwidget > .ui-tabs-panel{
-  // further tabwidget within a tabwidget (documents tab etc.)
-  & > .tabwidget{
-    background-color: rgb(239, 239, 239) ;
-    position: relative ;
-    & > .ui-tabs-nav{
-      position: relative ;
-      top: auto;
-      background-color: none;
-    }
-    & > .ui-tabs-panel {
-      background-color: rgb(239, 239, 239);
-      position: relative ;
-      top: auto;
-    }
-  }
-}
-
-
 
 
+// --------------------------------------
+// UI-DIALOG
+// --------------------------------------
 
-//  Dialog
-.ui-dialog {
-
-    .ui-dialog-titlebar {
-
-    }
-
-}
-
+//.ui-dialog {
+//  border: 1px solid #333333;
+//  color: #333333;
+//  border-radius: @controlpanel-radius;
+//
+//  .ui-dialog-titlebar {
+//    button.ui-dialog-titlebar-close {
+//      background: #bbb !important;
+//    }
+//  }
+//  .ui-widget-header {
+//    button.ui-dialog-titlebar-close {
+//      right: 0.3em;
+//      top: 0;
+//      width: 21px;
+//      margin: 5px 0 0 0;
+//    }
+//  }
+//}
 
 
-//  jstree
-.jstree a {
-  border-bottom: none;
-}
 
 
 
-.ui-widget input[type="button"]{
+// --------------------------------------
+// AUTOCOMPLETE
+// --------------------------------------
 
-}
+//.ui-autocomplete {
+//  z-index: 9000 ;
+//
+//  li{
+//    a{
+//      display: block ;
+//      font-size: 80% ;
+//      padding-top: 0.4em !important;
+//      padding-bottom: 0.4em !important;
+//      &:hover{
+//        background-color: #C9C9C9;
+//        border: none ;
+//        color: #000 ;
+//      }
+//    }
+//  }
+//}
 
 
-// -------------------
-// Part_Picker
-// Select Parts in input-fields
 
-span.part_picker,
-span.chart_picker{
-  margin: 0 !important;
-  padding: 0 !important;
-}
 
-// -------------------
-// Part_Picker
-// Select Customer in input-fields
-// PENDENT: Ausrichtung vertikal in Zelle
-span.customer_vendor_picker{
-  margin: 0 !important;
-  padding: 0 !important;
-}
 // -------------------
 // Date_Picker
 // Select Date in Popover
-// PENDENT: Ausrichtung vertikal in Zelle
-input.datepicker{
-  margin: -0.3em 0 0 0 !important;
+// PENDENT: Ausrichtung vertikal in Zelle & wo eingesetzt
+//input.datepicker{
+  //margin: -0.3em 0 0 0 !important;
   //padding: 0 !important;
-}
+//}
 
 
 
 // --------------------------------------
-// AUTOCOMPLETE
+// DATEPICKER
 // --------------------------------------
 
-.ui-autocomplete {
-  z-index: 9000 ;
+// Forward / Backward Arrows
+//.ui-widget-header {
+//  .ui-icon {
+//    background-image: url(ui-lightness/images/ui-icons_222222_256x240.png);
+//  }
+//  .ui-state-hover{
+//    .ui-icon{
+//      background-image: url(ui-lightness/images/ui-icons_ef8c08_256x240.png);
+//      background: #ffffff;
+//    }
+//  }
+////  select.ui-datepicker-month,
+////  select.ui-datepicker-year {
+////    width: 48%;
+////  }
+//}
 
-  li{
 
-    a{
-      display: block ;
-      font-size: 80% ;
-      padding-top: 0.4em !important;
-      padding-bottom: 0.4em !important;
 
-      &:hover{
-        background-color: #C9C9C9;
-        border: none ;
-        color: #000 ;
-      }
-    }
-  }
-}
 
-// --------------------------------------
-// DATEPICKER
-// --------------------------------------
-// Forward / Backward Arrows
-.ui-widget-header {
-  .ui-icon {
-    background-image: url(ui-lightness/images/ui-icons_222222_256x240.png);
+// Calendar symbol
+//img.ui-datepicker-trigger{
+//  vertical-align: middle;
+//  margin-left: 0.2em ;
+//}
+// Calender (Table)
+/*
+.ui-datepicker-calendar  {
+  .ui-state-highlight{
+    color: #ffffff ;
+    background-color: @gray-standard;
+    border: 1px @gray-standard solid
   }
-  .ui-state-hover{
-    .ui-icon{
-      background-image: url(ui-lightness/images/ui-icons_ef8c08_256x240.png);
-      //background: #ffffff !important;
+  // Days
+  td a {
+    &.ui-state-default {
+      color: @brand-dark;
+    }
+    &.ui-state-hover {
+      color: #ffffff ;
+      background-color: #000000;
+      border: #000000 ;
+    }
+    &.ui-state-active {
+      border: 1px solid @brand-dark;
+      background-color: @brand-dark;
+      color: @brand-verylight;
     }
-  }
-}
-// Days
-.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
-  color: @gray-mediumdark;
-}
-// Calendar symbol
-img.ui-datepicker-trigger{
-  vertical-align: middle;
-  margin-left: 0.2em ;
-}
-
-.ui-datepicker-calendar .ui-state-highlight {
-  color: #ffffff ;
-  background-color: @gray-mediumdark;
-  border: #000000 ;
-}
-.ui-datepicker-calendar td a.ui-state-hover {
-  color: #ffffff ;
-  background-color: #000000;
-  border: #000000 ;
-}
-.ui-state-hover,
-.ui-widget-content .ui-state-hover,
-.ui-widget-header .ui-state-hover,
-.ui-state-focus,
-.ui-widget-content .ui-state-focus,
-.ui-widget-header .ui-state-focus {
-  border: 1px solid #000000;
-  background: #ffffff;
-  color: #000000;
-}
-.ui-widget-header .ui-datepicker-header .ui-state-hover .ui-icon {
-  background: #ffffff; ;
-}
-.ui-state-default .ui-icon {
-  background-image: url(ui-lightness/images/ui-icons_777777_256x240.png) !important;
-}
-.ui-state-hover .ui-icon,
-.ui-state-focus .ui-icon {
-  background-image: url(ui-lightness/images/ui-icons_777777_256x240.png) !important;
-}
-.ui-state-active .ui-icon {
-  background-image: url(ui-lightness/images/ui-icons_777777_256x240.png) !important;
-}
-.ui-datepicker select.ui-datepicker-month,
-.ui-datepicker select.ui-datepicker-year {
-  width: 48%;
-}
 
-// --------------------------------------
-// CKEditor
-// --------------------------------------
-.cke_editable {
-  background-color: white;
-  padding: 6px;
-  //margin-left: -0.3em ;
-  border-top: 1px #999 solid;
-  border-right: 1px #ddd solid;
-  border-left: 1px #ddd solid;
-  overflow: auto ;
-  font-size: 11pt ;
-  min-width: @textarea-wi-lightwide ;
-  min-height: 4.0em ;
-  &:focus {
-    outline: none ;
-    background-color: @formelement-focus-bg ;
-    border: @formelement-focus-border ;
   }
 
-  p {
-    font-size: 10pt !important;
-    padding: 0  ;
-    margin: 0 0 0.4em 0 ;
-    font-weight: normal;
-  }
-}
-div.cke_editable.wi-small-wide{
-  margin-right: 24px !important ;
-}
-body > .ui-dialog > .ui-dialog-content > p > .cke_editable {
-  border: 1px #dcdcdc solid !important;
-  padding: 0.4em;
-  margin: 0;
-  font-size: 100%;
-  width: 100% !important;
-}
-// --------------------------------------
-// UI-DIALOG
-// --------------------------------------
-.ui-dialog-titlebar.ui-widget-header {
-  button.ui-dialog-titlebar-close {
-    right: 0.3em;
-    top: 0;
-    width: 21px;
-    margin: 5px 0 0 0;
-  }
-}
+} // /.ui-datepicker-calendar
+*/
+//.ui-state-hover,
+//.ui-widget-content .ui-state-hover,
+//.ui-widget-header .ui-state-hover,
+//.ui-state-focus,
+//.ui-widget-content .ui-state-focus,
+//.ui-widget-header .ui-state-focus {
+//  border: 1px solid #000000;
+//  background: #ffffff;
+//  color: #000000;
+//}
+//
+//.ui-state-default,
+//.ui-state-hover,
+//.ui-state-focus,
+//.ui-state-active {
+//  .ui-icon {
+//    background-image: url(ui-lightness/images/ui-icons_777777_256x240.png) !important;
+//  }
+//}
+
 
 
 
diff --git a/css/less/jquery.autocomplete.less b/css/less/jquery.autocomplete.less
index 59c936327..4fa2b611b 100755
--- a/css/less/jquery.autocomplete.less
+++ b/css/less/jquery.autocomplete.less
@@ -1,87 +1,51 @@
+/* ------------------------------------------------------------- */
+/* Jquery-Autocomplete (jquery.autocomplete.less)                */
+/* ------------------------------------------------------------- */
+
+
 .ac_results {
-	padding: 0px;
-	border: 1px solid black;
-	background-color: white;
-	overflow: hidden;
-	z-index: 99999;
+  padding: 0px;
+  border: 1px solid black;
+  background-color: white;
+  overflow: hidden;
+  z-index: 99999;
 }
 
 .ac_results ul {
-	width: 100%;
-	list-style-position: outside;
-	list-style: none;
-	padding: 0;
-	margin: 0;
+  width: 100%;
+  list-style-position: outside;
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
 .ac_results li {
-	margin: 0px;
-	padding: 2px 5px;
-	cursor: default;
-	display: block;
-	//  if width will be 100% horizontal scrollbar will apear when scroll mode will be used
-	// width: 100%;
-	font: menu;
-	font-size: @font-size-base; /*hps: vorher 12px */
-	//   it is very important, if line-height not setted or setted in relative units scroll will be broken in firefox
-	line-height: 16px;
-	overflow: hidden;
+  margin: 0px;
+  padding: 2px 5px;
+  cursor: default;
+  display: block;
+  //  if width will be 100% horizontal scrollbar will apear when scroll mode will be used
+  // width: 100%;
+  font: menu;
+  font-size: @font-size-base; /*hps: vorher 12px */
+  //   it is very important, if line-height not setted or setted in relative units scroll will be broken in firefox
+  line-height: 16px;
+  overflow: hidden;
 }
 
 .ac_loading {
   // PENDENT: Datei nicht gefunden, auch nicht auf jquery-ui.com
-	//background: white url('indicator.gif') right center no-repeat;
+  //background: white url('indicator.gif') right center no-repeat;
 }
 
 .ac_odd {
-	background-color: #eee;
+  background-color: #eee;
 }
 
 .ac_over {
-	background-color: #0A246A;
-	color: white;
+  background-color: #0A246A;
+  color: white;
 }
 
 
-//
-//  Chart-Picker
-//  Entnommen aus main.less, gehoert aber zu Autocomplete
-//
 
-
-.chart_picker,
-.part_picker {
-  display: inline-block;
-}
-.chart_picker:before,
-.part_picker:before {
-  display: inline-block;
-  vertical-align: middle;
-  height: 100%;
-}
-.customer-vendor-picker-undefined,
-.chartpicker-undefined,
-.projectpicker-undefined,
-.partpicker-undefined {
-  color: red;
-  font-style: italic;
-}
-
-div.part_picker_part,
-div.chart_picker_chart {
-  padding: 5px;
-  margin: 5px;
-  border: 1px;
-  border-color: darkgray;
-  border-style: solid;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  background-color: white;
-  cursor: pointer;
-}
-div.part_picker_part:hover,
-div.chart_picker_chart:hover {
-  color: #000;
-  text-decoration: underline;
-}
diff --git a/css/less/jquery.chartpicker.less b/css/less/jquery.chartpicker.less
index 4175ecbab..39e5561bb 100755
--- a/css/less/jquery.chartpicker.less
+++ b/css/less/jquery.chartpicker.less
@@ -1,64 +1,16 @@
 /* ------------------------------------------------------------- */
-/* Chart-Picker                                                  */
-/*                                                               */
-/* Entnommen aus main.less, gehoert ev. zu Autocomplete          */
+/* JQUERY CHART-PICKER (jquery.chartpicker.less)                 */
 /* ------------------------------------------------------------- */
 
 
-/* ------------------------------------------- */
-/* Picker                                      */
-/* ------------------------------------------- */
-.chart_picker,
-.part_picker {
-  display: inline-block;
-
-  &:before{
-    display: inline-block;
-    vertical-align: middle;
-    height: 100%;
-  }
-
-}
-
-span.chart_picker,
-span.part_picker {
-  white-space: nowrap ;
-
-  input {
-    /* padding-right: 20px; */
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-  }
-
-}
 
-div.part_picker_part,
-div.chart_picker_chart {
-  padding: 5px;
-  margin: 5px;
-  border: 1px;
-  border-color: darkgray;
-  border-style: solid;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  background-color: white;
-  cursor: pointer;
 
-  &:hover {
-    color: #000;
-    text-decoration: underline;
-  }
-
-}
 
 
 
-/* ------------------------------------------- */
-/* Bloecke                                     */
-/* ------------------------------------------- */
-
+//  ------------------------------------------- 
+//  Bloecke                                     
+//  ------------------------------------------- 
 
 div.cpc_block,
 div.ppp_block {
@@ -67,92 +19,75 @@ div.ppp_block {
   width: 350px;
 }
 
-/* --------------------- */
-/* PPP-Block             */
-/* --------------------- */
 
+//  --------------------- 
+//  PPP-Block             
+//  --------------------- 
 div.ppp_block {
 
-  span.ppp_block_number{
-    float:left;
-  }
+  span.ppp_block_number { float: left; }
 
   span.ppp_block_description {
-    float:right;
-    margin-left:1em;
-    font-weight:bold;
+    float:        right;
+    margin-left:  1em;
+    font-weight:  bold;
   }
-
 }
 
-/* --------------------- */
-/* CPC-Block             */
-/* --------------------- */
+
+//  --------------------- 
+//  CPC-Block             
+//  --------------------- 
 
 div.cpc_block {
 
-  span.cpc_block_number  {
-    float:left;
-  }
+  span.cpc_block_number { float: left; }
 
   span.cpc_block_description {
     float:left;
     margin-left:1em;
     font-weight:bold;
   }
-
-  span.cpc_block_balance {
-    float:right;
-  }
-
-  span.cpc_line_balance {
-    display:none;
-  }
-
+  span.cpc_block_balance    { float:   right; }
+  span.cpc_line_balance     { display: none; }
   span.cpc_block_second_row {}
-
-
 }
 
 
 
 
-/* ------------------------------------------- */
-/* Linien                                      */
-/* ------------------------------------------- */
+//  ------------------------------------------- 
+//  Linien                                      
+//  ------------------------------------------- 
 
-/* --------------------- */
-/* PPP-Linie             */
-/* --------------------- */
+//  --------------------- 
+//  PPP-Linie             
+//  --------------------- 
 div.ppp_line{
 
   span.ppp_block_description  {
     margin-left:1em;
     font-weight:bold;
   }
-
 }
 
-/* --------------------- */
-/* CPC-Linie             */
-/* --------------------- */
+//  --------------------- 
+//  CPC-Linie             
+//  --------------------- 
 div.cpc_line {
 
   span.cpc_block_description  {
     margin-left:1em;
     font-weight:bold;
   }
-
-  span.cpc_block_second_row {
-    display:none;
-  }
+  span.cpc_block_second_row { display: none; }
 
 }
 
 
-/* ------------------------------------------------------------- */
-/* Diverses                                                      */
-/* ------------------------------------------------------------- */
+//  ------------------------------------------------------------- 
+//  Diverses                                                      
+//  ------------------------------------------------------------- 
 
 .customer-vendor-picker-undefined,
 .chartpicker-undefined,
@@ -162,7 +97,6 @@ div.cpc_line {
   font-style: italic;
 }
 
-
 span.cpc_popup_button,
 span.ppp_popup_button {
   display: inline-block;
diff --git a/css/less/jquery.multiselect2side.less b/css/less/jquery.multiselect2side.less
index 9d07581f9..5d5e46e9f 100755
--- a/css/less/jquery.multiselect2side.less
+++ b/css/less/jquery.multiselect2side.less
@@ -1,72 +1,77 @@
+/* ------------------------------------------------------------- */
+/* JQUERY MULTISELECT2SIDE (jquery.multiselect2side.less)        */
+/* ------------------------------------------------------------- */
+
+
 //  multiselect2side plugin
 .ms2side__div {
-  clear: left;
-  width: 100%;
-  padding: 1px;
-  float: left;
-  background : url('') repeat-x; //  HACK FOR CHROME
+  clear:         left;
+  width:         100%;
+  padding:       1px;
+  float:         left;
+  background :   url('') repeat-x; //  HACK FOR CHROME
 }
 
 .ms2side__select {
-  float: left;
+  float:         left;
 }
 /* siehe H3 */
 .ms2side__header {
-  color: #666; /* hps */
-  font-size: @font-size-smaller ;
-  line-height: 1.0em;
-  padding: 0 0 0.3em 0;
-  display: block;
+  color:         #666; /* hps */
+  font-size:     @font-size-smaller ;
+  line-height:   1.0em;
+  padding:       0 0 0.3em 0;
+  display:       block;
 }
 
 .ms2side__options,
 .ms2side__updown {
-  float: left;
-  font-size: @font-size-small ;
-  margin: 0;
-  padding: 0 8px;
-  width: 40px;
-  color: black;
-  text-align: center;
-  overflow: hidden;
+  float:         left;
+  font-size:     @font-size-small ;
+  margin:       0;
+  padding:       0 8px;
+  width:         40px;
+  color:         black;
+  text-align:   center;
+  overflow:     hidden;
 }
 .ms2side__options{
-  padding-top: 1.0em !important;
+  padding-top:   1.0em !important;
 }
 .ms2side__updown {
-  font-size: @font-size-small;
+  font-size:     @font-size-small;
 }
 
 .ms2side__options p,
 .ms2side__updown p {
-  margin: 2px 0;
-  padding: 0;
-  cursor: pointer;
-  border: 1px solid black;
-  width: auto !important; /* hps */
-  background-color: @btn-neutral-bg;  /* hps */
-  color: @btn-neutral-color ; /* hps */
-  border-color: @btn-neutral-border ; /* hps */
-  border-radius: 3px; /* hps */
+  margin:           2px 0;
+  padding:           0;
+  cursor:           pointer;
+  border:           1px solid black;
+  width:             auto !important; /* hps */
+  background-color: @button-neutral-bg;  /* hps */
+  color:             @button-neutral-color ; /* hps */
+  border-color:     @button-neutral-border ; /* hps */
+  border-radius:     3px; /* hps */
 }
 
 .ms2side__options p.ms2side_hover,
 .ms2side__updown p.ms2side_hover {
   background-color: #3C3C3B; /* hps */
-  border-color: #000000;
-  color: #ffffff ;
-  cursor: pointer;
+  border-color:     #000000;
+  color:             #ffffff ;
+  cursor:           pointer;
 }
 
-.ms2side__options>p.ms2side__hide,
-.ms2side__updown>p.ms2side__hide {
-  cursor: default;
-  color: #9e9e9e;
-  border: 1px solid grey;
+.ms2side__options > p.ms2side__hide,
+.ms2side__updown > p.ms2side__hide {
+  cursor:           default;
+  color:             #9e9e9e;
+  border:           1px solid grey;
   background-color: #D4D4D4 !important;
 }
 
 .ms2side__div select {
-  width: 12.0em; /*hps:400px*/
-  float: left;
+  width:             12.0em; /*hps:400px*/
+  float:             left;
 }
diff --git a/css/less/jquery.tooltipster.less b/css/less/jquery.tooltipster.less
index bc777ee42..8de3be147 100755
--- a/css/less/jquery.tooltipster.less
+++ b/css/less/jquery.tooltipster.less
@@ -1,26 +1,74 @@
+/* ------------------------------------------------------------- */
+/* JQUERY TOOLTIPSTER (jquery.tooltipster.less)                  */
+/* ------------------------------------------------------------- */
+
+// ----------------------------------------------------------------------------
+//
+// Tooltipster
+//
+// ----------------------------------------------------------------------------
+// DESCRIPTION:
+// Contains:
+// - tooltipster
+// - tooltipster-light
+//
+//
+// CONTENTS:
+// - Tooltipster
+// - Tooltipster Light
+// -
+// -
+// ----------------------------------------------------------------------------
+
+
+
+
+// ----------------------------------------------------------------------------
+//
+// Tooltipster
+//
+// ----------------------------------------------------------------------------
+//
+
+
 /* This is the default Tooltipster theme */
 /* (feel free to modify or duplicate and create multiple themes!): */
 .tooltipster-default {
-  border-radius: 5px;
+  border-radius: @controlpanel-radius;
   border: 2px solid #000;
-  background: #4c4c4c;
+  background-color: @jquery_ui_tooltipster-bg-color;  
   color: #fff;
-}
+  max-width: 400px ;
+  
+  /* Use this next selector to style things like font-size and line-height: */
+  .tooltipster-content {
+    font-size: @font-size-small;
+    line-height: 16px;
+    padding: 1.2em 1.0em 1.2em 1.4em;
+    overflow: hidden;
+    background-color: @jquery_ui_tooltipster-bg-color;  
+  }
 
-/* Use this next selector to style things like font-size and line-height: */
-.tooltipster-default .tooltipster-content {
-  font-size: @font-size-small;
-  line-height: 16px;
-  padding: 1.2em 1.0em 1.2em 1.4em;
-  overflow: hidden;
-}
+  /* These next classes handle the styles for the little arrow attached to the tooltip. */
+  /* By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
+  .tooltipster-arrow {
+    display: block;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  
+    /* This next selector defines the color of the border on the outside of the arrow. */
+    /* This will automatically match the color and size of the border set on the main tooltip styles. */
+    /* Set display: none; if you would like a border around the tooltip but no border around the arrow */
+    .tooltipster-arrow-border { }
+  }
+  
+} // /.tooltipster-default
 
-/* This next selector defines the color of the border on the outside of the arrow. */
-/* This will automatically match the color and size of the border set on the main tooltip styles. */
-/* Set display: none; if you would like a border around the tooltip but no border around the arrow */
-.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
-  /* border-color: ... !important; */
-}
 
 
 /* If you're using the icon option, use this next selector to style them */
@@ -40,25 +88,17 @@
   z-index: 9999999;
   pointer-events: none;
   width: auto;
+  max-width: 400px ;
   overflow: visible;
-}
-.tooltipster-base .tooltipster-content {
-  overflow: hidden;
+  
+  .tooltipster-content {
+    overflow: hidden;
+  }  
 }
 
 
-/* These next classes handle the styles for the little arrow attached to the tooltip. */
-/* By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
-.tooltipster-arrow {
-  display: block;
-  text-align: center;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-}
+
+
 .tooltipster-arrow span,
 .tooltipster-arrow-border {
   display: block;
@@ -287,3 +327,29 @@
   -ms-transform: scale(1.1, 1.1);
   transform: scale(1.1, 1.1);
 }
+
+
+
+
+// ----------------------------------------------------------------------------
+//
+// Tooltipster Light
+//
+// ----------------------------------------------------------------------------
+//
+
+
+.tooltipster-light {
+  border-radius:     @controlpanel-radius;
+  border:           1px solid @jquery_ui_tooltipster-border-color;
+  background-color: @jquery_ui_tooltipster-bg-color;  
+  color:             @jquery_ui_tooltipster-color;
+  
+  .tooltipster-content {
+    font-size:     @font-size-smaller;
+    line-height:   16px;
+    background-color: @jquery_ui_tooltipster-bg-color;  
+    padding:      1.0em 1.4em;
+  }
+}
+
diff --git a/css/less/lists.less b/css/less/lists.less
index 92a02dca7..98c8ff7e3 100644
--- a/css/less/lists.less
+++ b/css/less/lists.less
@@ -1,3 +1,9 @@
+/* ------------------------------------------------------------- */
+/* LISTS (lists.less)                                            */
+/* ------------------------------------------------------------- */
+
+
+
 // ----------------------------------------------------------------------------
 //
 // Lists
@@ -16,28 +22,28 @@
 // UNORDERED LISTS
 // --------------------------------------
 ul {
-  list-style-type: disc;
-  list-style-position: outside;
-  list-style-image: none;
-  padding: 0 0 0 1.4em;
-  margin: 0.4em 0 0.4em 0;
+  list-style-type:       disc;
+  list-style-position:   outside;
+  list-style-image:     none;
+  padding:               0 0 0 1.4em;
+  margin:               0.4em 0 0.4em 0;
 
   // with SUP-items for footnotes
   &.footnotes {
-    list-style-type: none !important ;
-    list-style-position: outside ;
-    margin: 1.0em 0 0 1.8em !important ;
+    list-style-type:       none !important ;
+    list-style-position:   outside ;
+    margin:               1.0em 0 0 1.8em !important ;
     li {
       sup {
-        display: inline-block;
-        margin: 0 0.6em 0 -2.6em;
-        padding: 0;
+        display:   inline-block;
+        margin:   0 0.6em 0 -2.6em;
+        padding:   0;
       }
       & > ul {
-        position: relative;
-        list-style-type: circle ;
-        list-style-position: outside ;
-        margin: 0.3em 0 0.3em 1.4em !important ;
+        position:             relative;
+        list-style-type:       circle ;
+        list-style-position:   outside ;
+        margin:               0.3em 0 0.3em 1.4em !important ;
       }
     }
 
@@ -46,8 +52,8 @@ ul {
   // List inside a list item
   li {
     ul {
-      list-style-type: circle ;
-      list-style-position: outside ;
+      list-style-type:       circle ;
+      list-style-position:   outside ;
       li { }
     }
   }
@@ -60,29 +66,34 @@ ul {
 //  --------------------------------------
 
 div.table {
-  margin-bottom: 1.0em ;
+  margin-bottom:   1.0em ;
   &.col {
-    float: left ;
+    float:         left ;
     margin-right: 1.6em ;
   }
   div.caption {
-    clear: left ;
-    display: block ;
-    font-weight: bold ;
-    color: @table-caption-color ;
+    clear:         left ;
+    display:       block ;
+    font-weight:   bold ;
+    color:         @table-caption-color ;
   }
   div.field {
-    clear: left ;
-    display: block ;
-    overflow: hidden ;
+    clear:         left ;
+    display:       block ;
+    overflow:     hidden ;
+    margin-right:  2.0em ;
     // PENDENT: ueberpruefen wegen cke-Editor-Konflikte
     span.label {
-      display: inline-block ;
-      float: left ;
+      display:     inline-block ;
+      float:       left ;
+      min-width:   12em;
+      width:       auto;
     }
     span.value {
-      display: inline-block ;
-      float: left ;
+      display:     inline-block ;
+      float:       left ;
+      min-width:   12em;
+      width:       auto;
     }
   }
 }
@@ -93,64 +104,63 @@ div.table {
 //  --------------------------------------
 // PENDENT: siehe auch form-additions
 div.list {
-  font-size: 10pt ;
-  color: @t-cell-text-color ;
+  font-size:   @font-size-small ;
+  color:       @t-cell-text-color ;
 
   // A column with a list
   &.col {
     float: left ;
-    margin-right: 1.6em !important ;
-    width: auto ;
-//     min-width: 110px ;
-//     max-width: 180px ;
+    margin-right:  2.6em !important ;
+    width:         auto ;
+    min-width:     110px ;
   }
   // List Title
   h4 {
-    padding: 0.6em 0 0.2em 0.0em !important ;
-    margin: 0.2em 0 0 0 ;
-    font-weight: bold;
-    font-size: 110%;
-    font-family: "Helvetica Neue", Helvetica, Arial; // PENDENT: in Variablen verlegen
-    color: @brand-strong ;
+    padding:       0.6em 0 0.2em 0.0em !important ;
+    margin:       0.2em 0 0 0 ;
+    font-weight:   normal;
+    font-size:     @font-size-medium;
+    font-family:   "Helvetica Neue", Helvetica, Arial; // PENDENT: in Variablen verlegen
+    color:         @brand-dark ;
   }
   // List Elements
   & > p,
   & > div {
-    padding: 0.2em 0 0.2em 0 !important ;
-    margin: 0 !important ;
-    white-space: normal ;
+    padding:       0.2em 0 0.2em 0 !important ;
+    margin:       0 !important ;
+    white-space:   normal ;
 
     &>input[type="checkbox"],
     &>input[type="radio"] {
-      padding: 0 ;
-      margin: 0.3em 0.3em 0 0 ;
-      float: left ;
+      padding:     0 ;
+      margin:     0.3em 0.3em 0 0 ;
+      float:       left ;
     }
     label {
-      width: auto ;
-      float: left ;
+      width:       auto ;
+      float:       left ;
     }
   }
   &>p {
-    //margin: 0 0 1.2em 0 !important ;
-    overflow: hidden ;
+    //margin:     0 0 1.2em 0 !important ;
+    overflow:     hidden ;
   }
   // Special Element but same like above (see Custom Vars)
   &>input[type="checkbox"] {
-    clear: both;
-    float: left;
-    margin-right: 0.4em ;
+    clear:           both;
+    float:           left;
+    margin-right:   0.4em ;
   }
-  &>label { width: 82% ; }
+  &>label { width:   82% ; }
 
-  div { clear: left }
+  div { clear:       left }
 
   & > div.no-rows {
     &>input[type="checkbox"],
     &>input[type="radio"] {
-      padding: 0 ;
-      margin: 0.3em 0.3em 0 0 ;
-      clear: left ;
+      padding:   0 ;
+      margin:    0.3em 0.3em 0 0 ;
+      clear:     left ;
     }
     label {
       width: 82% ;
@@ -163,12 +173,12 @@ div.list {
 
 
 
-// PENDENT: wo eingesetzt
+// PENDENT: wo eingesetzt?
 div.list-table-with-separate-total-table {
 
   div.full-width {
-    padding-bottom: 0 ;
-    margin-bottom: 0 ;
+    padding-bottom:  0 ;
+    margin-bottom:   0 ;
 
     .tbl-list {
       margin-bottom: 0 ;
@@ -179,18 +189,16 @@ div.list-table-with-separate-total-table {
   // Total-Tabelle
   // Separater Block mit Table ohne Body, nur Footer für Totals
   div.list-total {
-    width: 100% ;
-    margin: 0 ;
-    padding: 0 ;
+    width:    100% ;
+    margin:   0 ;
+    padding:  0 ;
     overflow: hidden ;
 
     table.footer-only {
-      &.right { float: right ; }
-      margin: 0 ;
+      margin:  0 ;
       padding: 0 ;
+      &.right { float: right ; }
     }
-
     div.after-item {  }
   }
-
 }
diff --git a/css/less/main.less b/css/less/main.less
index 1a08adf90..cb964acb8 100755
--- a/css/less/main.less
+++ b/css/less/main.less
@@ -1,3 +1,8 @@
+/* ------------------------------------------------------------- */
+/* MAIN PROPERTIES (main.less)                                   */
+/* ------------------------------------------------------------- */
+
+
 // ----------------------------------------------------------------------------
 //
 // MAIN (MAIN PROPERTIES)
@@ -5,27 +10,39 @@
 // ----------------------------------------------------------------------------
 // DESCRIPTION:
 //
-//
-//
 // CONTENTS:
 // - GENERAL FONT SIZES
-// - HEADING
+// - HEADINGS (H1-H3)
 //   - H1
 //   - H2
 //   - H3 & Caption
 // - LINKS
+// - OTHER STANDARD HTML-ELEMENTS (SELECTORS)
+//   - Lists (UL & OL)
+//   - Horizontal Rule
 // - COMPONENTS
-//   - DIVs & SPAN Dimensions
-//   - SPAN: Labels & Values
-//   - Select Functions (DIV)
-//   - Info-Container (DIV)
-//   - Wrapper
-//   - File Content (PRE)
+//   - Dimensions for DIVs & SPANs
+//   - Long Description
+//   - Info-Container (description & instructions)
+//   - Labels & Values (SPAN)
+//   - Centered Elements
+//   - Accent
+//   - File Content
+//   - Expanded
+//   - Hidden Elements
+// - WRAPPER
+//   - Toggled Wrapper
+//   - Toggle buttons
+//   - Columns
+//   - Paragraph within Wrapper
 // - CATEGORIES
 //   - Plus & Minus / Positive & Negative
 //   - Styled Text
 // - SPECIALIZED PROPERTIES (REDUNANT)
-// - OTHER STANDARD HTML-ELEMENTS (SELECTORS)
+//   - Dunned Invoices
+//   - Bank transactions
+//   - Diverse Elements
+// - DEPRACETED STUFF
 // ----------------------------------------------------------------------------
 
 
@@ -41,24 +58,27 @@
   & > div,
   & > td,
   & > th {
-    font-size: @font-size-small ;
+    font-size: @font-size-smaller ;
   }
   input,
   select, option,
   textarea {
     font-size: @font-size-smaller ;
   }
+
 }
 
 
 
 
 // --------------------------------------
-// Headings (H1 - H6)
+// Headings (H1 - H3)
 // --------------------------------------
+
+// -----------------------
 // H1
-//
-h1{
+// -----------------------
+h1 {
   display:       block;
   text-align:    left;
   margin:        0;
@@ -66,39 +86,39 @@ h1{
   font-size:     @h1-size;
   line-height:   1.2em ;
 }
-// PENDENT: mit Child-Kombinator > versehen wenn fertig
 // PENDENT: SIEHE AUCH .LISTTOP
 #content > h1 {
-  position:          fixed;
-  z-index:           @zindex-h1; //hps:12
-  top:               60px;
-  width:             100%;
-  color:             @brand-h1-color ;
-  background-color:  @brand-h1-bg;
-  padding:           @h1-padding;
-
+  position:           fixed;
+  z-index:            @zindex-h1; //hps:12
+  top:                60px;
+  width:              100%;
+  color:              @brand-h1-color ;
+  background-color:   @brand-h1-bg;
+  padding:            @h1-padding;
+  border-top:         @brand-h1-border-top;
 }
 #content .wrapper h1{
-  color:             @headings-color;
-  font-size:         @h2-size;
-  margin:            @margin-from-wrapper ;
+  color:              @headings-color;
+  font-size:          @h2-size;
+  margin:             @margin-from-wrapper ;
 }
 body > h1{
-  color:             @brand-h1-color ;
-  background-color:  @brand-h1-bg ;
-  padding:           @h1-padding;
+  color:              @brand-h1-color ;
+  background-color:   @brand-h1-bg ;
+  padding:            @h1-padding;
 }
 
 
-// --------------
+// -----------------------
 // H2
-//
+// -----------------------
 h2 {
   color:            @headings-color;
   font-size:        @h2-size ;
   border-style:     none;
   letter-spacing:   0.14em;
 }
+
 #content,
 .admin {
   & > h2 {
@@ -107,59 +127,70 @@ h2 {
   }
   ui-tabs-panel {
     .wrapper > h2 {
-      padding: 0 0.2em 0.6em 0.2em;
-      margin: @margin-from-wrapper ;
+      padding: 0 0.2em 0.6em 0.2em ;
+      margin:  @margin-from-wrapper ;
     }
   }
   .wrapper > h2 {
-    padding: 0 0.2em 0.6em 0.2em;
+    padding:      2.0em 0.2em 0.6em 0.2em ;
+    margin:       0 ;
+    font-weight:  normal;
+    clear:        both;
+    &:first-child{ padding-top: 0 ; }
   }
 } // /#content /.admin
+
 h2.confirm { color: @headings-color-confirm ; }
 h2.error   { color: @headings-color-error ; }
-// -------------------
-// H2 RECORD-TITLE (e.g. Customer Name, Article Name)
-// PENDENT: an verschiedenen Orten einfuegen
+
+
+// -----------------------
+// H2 Record-Title
+// -----------------------
+// (e.g. Customer Name, Article Name)
+// PENDENT: in verschiedenen Templates einfuegen
 h2.record-title {
-  padding: 0.6em 0 0 0 !important;
-  font-size: @h2-size ;
-  color: @headings-color-accent ;
+  padding:          0.6em 0 0 0 !important;
+  font-size:        @h2-size ;
+  color:            @headings-color-accent ;
   small{
-    color: @headings-color ;
+    color:          @headings-color ;
     letter-spacing: 0 ;
   }
 }
 .wrapper > h2.record-title{
-  margin: 0em 1em 1em 0.2em !important;
+  margin:   0em 1em 1em 0.2em !important;
 }
 .ui-tabs-panel > h2.record-title{
-  margin: 1em 1em 0.2em @margin-left-from-content !important;
-  padding: 0.8em 0 0 0.1em !important;
+  margin:   1em 1em 0.2em @margin-left-from-content !important;
+  padding:  0.8em 0 0 0.1em !important;
 }
 
 
-// --------------
+// -----------------------
 // H3
-//
-// see also caption in table.less
+// -----------------------
+// see also mixin .mx-h3-caption and caption in table.less
 h3 {
   .mx-h3-caption ; // Mixin
-
   &.caption{
     margin: 0.6em 0 0.4em 0 !important;
   }
 }
 #content h3{
-  color: @headings-color ;
+  color:        @headings-color ;
   padding-left: 0 ;
-  margin: 0.8em 0 0.4em 0 ;
+  margin:       0.8em 0 0.4em 0 ;
 }
 #content .wrapper h3 {
-  margin-top: 1.0em ;
+  margin-top:   1.0em ;
+  &:first-child { margin-top: 0 ; }
 }
 #content table.tbl-horizontal > tbody > tr > th > h3,
 #content table.tbl-horizontal > tbody > tr > td > h3 { margin-top: 0.2em !important; }
 
+// PENDENT: H4
+
 
 
 
@@ -213,12 +244,55 @@ a {
 
 
 
+
+// --------------------------------------
+// OTHER STANDARD HTML-ELEMENTS (SELECTORS)
+// --------------------------------------
+
+// -----------------------
+// Lists (UL & OL)
+// -----------------------
+ul,
+ol {
+  font-size: @font-size-base ;
+
+  li {
+    font-size: @font-size-small ;
+  }
+}
+.wrapper .col{
+  ul {
+    list-style: circle outside;
+    padding: 0 ;
+    margin: 0 ;
+    li{
+      padding: 0 0 0 -0.6em ;
+      margin: 0 0 0 0 ;
+    }
+  }
+}
+
+// -----------------------
+// Horizontal Rule
+// -----------------------
+hr {
+    background-color: @color-green-light; // #006400
+    border: none;
+    height: 1px;
+}
+
+
+
+
+
+
 // --------------------------------------
 // COMPONENTS
 // --------------------------------------
-// --------------
-// DIVs: Dimensions
-//
+
+// -----------------------
+// Dimensions for DIVs & SPANs
+// -----------------------
 div,
 span,
 div.list {
@@ -233,10 +307,10 @@ div.list {
   &.wi-verywide     { width:     @div-wi-verywide    ; } //  36.0em
 }
 
-// --------------
+// -----------------------
 // Long Description
+// -----------------------
 // (see also TD.longdesc etc.)
-
 div.long-description,
 div.long-desc,
 div.longdescription,
@@ -256,27 +330,11 @@ div.longdesc {
   }
 }
 
-// --------------
-// SPAN: Labels & Values
-//
-
-span.label{
-  color: @brand-data-label-color ;
-  font-size: @font-size-smaller ;
-  font-style: normal ;
-  margin: 0 0.3em 0 0 ; // PENDENT: gehoert nicht hierher
-}
-span.value{
-  color: #000 ;
-  margin: 0 2.6em 0 0 ; // PENDENT: anschauen, margin-top seltsam
-}
-
-
-// --------------
-// Info-Container (DIV)
-//
-
-// small info-boxes for the user
+// -----------------------
+// Info-Container (description & instructions)
+// -----------------------
+// Description
+// Small info-boxes for the user
 div.description{
   display: block;
   float: left ;
@@ -294,8 +352,8 @@ div.description{
 
 }
 
-// big info boxes for the user
-// same as cols
+// Instructions
+// Big info boxes for the user, same as cols
 // PENDENT: Mixin fuer Padding, Margin etc. anlegen
 div.instructions {
   background-color: @instructionbox-bg;
@@ -309,110 +367,39 @@ div.instructions {
   p { width: 30.0em }
 }
 
-
-
-// --------------
-// Wrapper
-//
-// Wrapper for padding & columns
-// TEST
-.wrapper {
-  overflow:       hidden ;
-  margin:         @contentbox-margin ;
-  padding:        0 0 1.0em 0 ;
-  clear:          both ;
-  display:        block ;
-  border:         1px transparent solid ; // for nice alignment with folded wrapper
-
-  .wrapper { margin-left: 0 !important ; }
-
-  &.test {        background-color: #FFE67C        ; }
-
-  &.toggled  {    display: inline-block !important ; }
-  &.bordered {    border: 1px @brand-strong solid        ; }
-
-
-  // Toggle buttons
-  // must be placed on the first position in .wrapper
-  // PENDENT: Plazierung
-  & > .toggles {
-    display:      inline-block ;
-    float:        right        ;
-    position:     relative     ;
-    top:          0            ;
-    margin-top:   4px          ;
-    float:        right        ;
-
-    a.toggle {
-      display: inline-block;
-      width:  18px ;
-      height: 18px ;
-      background-repeat: no-repeat;
-      background-position: 50% 50%;
-      &.min { background-image: url(../image/toggle-down.png); }
-      &.max { background-image: url(../image/toggle-left.png); }
-    }
-  }
-
-  .tbl-horizontal,
-  .tbl-plain {
-    float: left ;
-  }
-
-  // --------------
-  // Columns
-  //
-  // DIV or TABLE
-  .col {
-    float: left ;
-    &.test {
-      background-color: #FFD7BA;
-      border: 1px #6CF solid;
-    }
-    &.wi-small       { width: @div-wi-small      ; }
-    &.wi-mediumsmall { width: @div-wi-mediumsmall; }
-    &.wi-normal      { width: @div-wi-normal     ; }
-    &.wi-wide        { width: @div-wi-wide       ; }
-    &.wi-lightwide   { width: @div-wi-lightwide  ; }
-    &.wi-wider       { width: @div-wi-wider      ; }
-    &.wi-verywide    { width: @div-wi-verywide   ; }
-
-    .tbl-horizontal,
-    .tbl-plain {
-      float: none ;
-      clear: left ;
-    }
-  }
-  & > p {
-    max-width:       36.0em ;
-    overflow:        hidden ;
-    font-size:       @font-size-smaller ;
-    line-height:     140%;
-    //color:           @gray-darker ;
-    padding-bottom:  1.0em ;
-  }
+// -----------------------
+// Labels & Values (SPAN)
+// -----------------------
+span.label{
+  //color: @brand-data-label-color ;
+  font-size: @font-size-smaller ;
+  font-style: normal ;
+  //margin: 0 0.3em 0 0 ; // PENDENT: gehoert nicht hierher
+}
+span.value{
+  color: #000 ;
+  //margin: 0 2.6em 0 0 ; // PENDENT: anschauen, margin-top seltsam
 }
 
-// --------------
+// -----------------------
 // Centered Elements
-//
-.center{
-  margin: auto;
-}
+// -----------------------
 // Centered blocks
 .center {
   margin: 0 auto;
   width: auto;
 }
 
-
+// -----------------------
+// Accent
+// -----------------------
 // PENDENT: Neue Loesung
 .accent{
   div.label{
     float: left ;
-    color: @brand-data-label-color ;
+    //color: @brand-data-label-color ;
     font-size: 80% ;
-    &.wi-mediumsmall{ width: 13.6em; } // PENDENT!
+    //&.wi-mediumsmall{ width: 13.6em; } // PENDENT!
     padding-top: 0.8em ;
   }
   div.data{
@@ -421,25 +408,11 @@ div.instructions {
       width: 20em !important ;
     }
   }
-}
+} // /.accent
 
-
-
-
-
-
-
-// --------------
-// Hidden Elements
-//
-.hidden {
-  display: none ;
-}
-
-
-// --------------
+// -----------------------
 // File Content
-//
+// -----------------------
 // PENDENT: wozu? genügt nicht PRE?
 // /templates/webpages/am/edit_templates.html
 pre.filecontent {
@@ -448,11 +421,9 @@ pre.filecontent {
   padding-right: 2px;
 }
 
-
-// --------------
+// -----------------------
 // Expanded
-//
-
+// -----------------------
 // Pendent: wozu einmalig?
 // /templates/webpages/order/tabs/_row.html
 // /templates/webpages/order/tabs/basic_data.html
@@ -465,7 +436,131 @@ pre.filecontent {
     max-height: 16px;
 }
 
+// -----------------------
+// Hidden Elements
+// -----------------------
+.hidden {
+  display: none ;
+}
+
+
+
+
+
+// --------------------------------------
+// Wrapper
+// --------------------------------------
+
+// Wrapper for columns & horizontal tables
+.wrapper {
+  overflow:  hidden ;
+  margin:    @contentbox-margin ;
+  padding:   0 0 1.0em 0 ;
+  clear:     both ;
+  display:   block ;
+  border:    1px transparent solid ; // for nice alignment with folded/toggled wrapper
+  width:     98.6%;
+
+  .wrapper { margin-left: 0 !important ; }
+
+  &.test {   background-color: #FFE67C ; }
+
+  .tbl-horizontal,
+  .tbl-plain { float: left ; }
+
+  & > table.tbl-horizontal:last-child{
+    margin-right: 0 ;
+  }
+
+
+  // -----------------------
+  // Toggled Wrapper
+  // -----------------------
+  &.toggled  {
+    display: inline-block !important ;
+    width: 98.6% ;
+    & > table.tbl-horizontal,
+    & > div.col {
+      margin-top: -1.8em ;
+    }
+
+    // -----------------------
+    // Toggle buttons
+    // -----------------------
+    // must be placed on the first position in .wrapper
+    // PENDENT: Plazierung
+    & > .toggles {
+      display:      block ;
+      float:        right        ;
+      position:     relative     ;
+      top:          0            ;
+      margin-top:   4px          ;
+      float:        right        ;
+      width:        100% ;
+
+      a.toggle {
+        //display:    inline-block;
+        display:      block;
+        //width:      18px ;
+        width:      100% ;
+        height:     18px ;
+        background-repeat:        no-repeat;
+        background-position:      50% 50%;
+        &.min,
+        &.max { background-position-x: 99% ; }
+        &.min { background-image: url(../image/toggle-down.png); }
+        &.max { background-image: url(../image/toggle-left.png); }
+      }
+    } // /.toggles
+
+
+
+  }
+
+  &.bordered {
+    border:        @controlpanel-border ;
+    border-radius: 4px ;
+  }
+
+
+  // -----------------------
+  // Columns
+  // -----------------------
+  // DIV or TABLE
+  .col {
+    float: left ;
+    &.test {
+      background-color: #FFD7BA;
+      border: 1px #6CF solid;
+    }
+    &.wi-small       { width: @div-wi-small      ; }
+    &.wi-mediumsmall { width: @div-wi-mediumsmall; }
+    &.wi-normal      { width: @div-wi-normal     ; }
+    &.wi-wide        { width: @div-wi-wide       ; }
+    &.wi-lightwide   { width: @div-wi-lightwide  ; }
+    &.wi-wider       { width: @div-wi-wider      ; }
+    &.wi-verywide    { width: @div-wi-verywide   ; }
+
+    .tbl-horizontal,
+    .tbl-plain {
+      float: none ;
+      clear: left ;
+    }
+  } // /.col
+
+  // -----------------------
+  // Paragraph within Wrapper
+  // -----------------------
+  & > p {
+    max-width:       36.0em ;
+    overflow:        hidden ;
+    font-size:       @font-size-smaller ;
+    line-height:     140%;
+    //color:           @gray-darker ;
+    padding-bottom:  1.0em ;
+  }
 
+} // /.wrapper
 
 
 
@@ -475,10 +570,9 @@ pre.filecontent {
 // CATEGORIES
 // --------------------------------------
 
-
-// --------------
+// -----------------------
 // Plus & Minus / Positive & negative
-//
+// -----------------------
 // Inline-Elements
 .plus,
 .minus,
@@ -493,6 +587,7 @@ plus0 { color:      @brand-negative; }
 // Positive Values
 .plus ,
 .plus1 { color:     @brand-positive; }
+
 // unbalanced Ledger
 // PENDENT: wo eingesetzt?
 span.unbalanced_ledger {
@@ -500,48 +595,50 @@ span.unbalanced_ledger {
 }
 
 
-// --------------
+// -----------------------
 // Styled Text
-//
-
+// -----------------------
 // Dimmed Text
 // /templates/webpages/requirement_spec_text_block/_text_block.html
 // /templates/webpages/requirement_spec_item/_section_header.html
 div.dimmed-text,
 span.dimmed-text {
-  color:        @gray;
+  color:        @gray-standard;
   font-style:   italic;
 }
 
 
 
 
+
 // --------------------------------------
 // SPECIALIZED PROPERTIES (REDUNANT)
 // --------------------------------------
 
-
-//  gemahnte Rechnung
+// -----------------------
+// Dunned Invoices
+// -----------------------
 //  /templates/webpages/is/form_header.html
 //  /templates/webpages/ar/form_header.html
 .dunned_invoice {
   font-weight: bold;
   color: #f00;
 }
-//  gemahnte Rechnung
 //  /templates/webpages/is/form_header.html
 //  /templates/webpages/ar/form_header.html
 .customer_dunning_level {
   font-weight: bold;
 }
-// dunning
+// dunning invoice list
 // /templates/webpages/dunning/show_invoices.html
 #dunning_invoice_list .direct_debit td,
 #dunning_invoice_list .direct_debit a {
-  color: @gray-medium;
+  color: @gray-standard;
 }
 
+// -----------------------
 // Bank transactions
+// -----------------------
 // /templates/webpages/bank_transactions/tabs/automatic.html
 #bank_transactions_proposals .invoice_number_highlight a,
 #bank_transactions_proposals span.invoice_number_highlight {
@@ -549,39 +646,6 @@ span.dimmed-text {
   color: #FFFFFF;
 }
 
-
-
-// --------------------------------------
-// OTHER STANDARD HTML-ELEMENTS (SELECTORS)
-// --------------------------------------
-
-hr {
-    background-color: @color-green-light; // #006400
-    border: none;
-    //color: #79B61B;
-    height: 1px;
-}
-
-ul,
-ol {
-  font-size: @font-size-base ;
-
-  li {
-    font-size: @font-size-small ;
-  }
-}
-.wrapper .col{
-  ul {
-    list-style: circle outside;
-    padding: 0 ;
-    margin: 0 ;
-    li{
-      padding: 0 0 0 -0.6em ;
-      margin: 0 0 0 0 ;
-    }
-  }
-}
-
 // --------------------------------------
 // Diverse Elements
 // --------------------------------------
@@ -597,8 +661,8 @@ ol {
 // --------------------------------------
 // DEPRACETED STUFF (BUT WILL IT BE AVAILABLE FOR A LONGER TIME?)
 // --------------------------------------
-// PENDENT: Programmmaesig loesen, vor allem primitive Ueberschriften und "Not records Found"-Meldungen
 
+// PENDENT: Programmmaesig loesen, vor allem primitive Ueberschriften und "Not records Found"-Meldungen wandeln
 #content {
   &>p { margin: 0.6em 2.0em 1.0em 0.7em }
   &>p.message_hint {
@@ -606,12 +670,3 @@ ol {
   }
 }
 
-
-
-
-
-
-
-
-
-
diff --git a/css/less/main_login.less b/css/less/main_login.less
index 9c481238f..0a8d46ddb 100755
--- a/css/less/main_login.less
+++ b/css/less/main_login.less
@@ -1,3 +1,8 @@
+/* ------------------------------------------------------------- */
+/* MAIN LOGIN (main_login.less)                                  */
+/* ------------------------------------------------------------- */
+
+
 // ----------------------------------------------------------------------------
 //
 // LOGIN and LOGGED IN PAGE
@@ -39,7 +44,7 @@ div.login {
   }
 
   #login-elements {
-    width: 24.0em ;
+    width: 34.0em ;
     margin: 0 auto ;
     text-align: center ;
     display: block ;
@@ -56,8 +61,8 @@ div.login {
     div.logo{
       width: auto;
       clear: both;
-      margin: 3.0em auto 1.0em auto;
-      padding: 2.0em 0 0 0;
+      margin: 3.0em auto 1.0em auto ;
+      padding: 2.0em 0 0 0 ;
     }
     form{
       margin: 0 auto ;
@@ -66,8 +71,8 @@ div.login {
 
     div.separate-form{
       background-color: #ddd ;
-      border: 1px @gray-medium solid;
-      border-radius: 6px ;
+      border: 1px @gray-standard solid;
+      border-radius: @controlpanel-radius ;
       display: block ;
       margin: 0 auto ;
       width: 100% ;
@@ -75,21 +80,26 @@ div.login {
     }
 
     table.login{
-      width: auto;
-      float: none;
-      clear: both;
+      width: auto ;
+      float: none ;
+      clear: both ;
       input[type="submit"] {
         margin-top: 0.2em ;
       }
       caption {
-        margin: 0.7em 0 0.4em 0;
+        margin: 0.7em 0 0.4em 0 ;
+      }
+      td select {
+        width: @select-wi-lightwide !important ;
       }
     }
 
     .message {
-      width: 100% !important;
-      min-width: auto;
-      max-width: inherit;
+      width: 100% ;
+      word-wrap: normal ;
+      min-width: 0;
+      //min-width: auto ;
+      //max-width: inherit ;
     }
   } // /.login-elements
 } // /.login
diff --git a/css/less/main_overrides.less b/css/less/main_overrides.less
index 745cecb0e..fee22ef64 100644
--- a/css/less/main_overrides.less
+++ b/css/less/main_overrides.less
@@ -1,3 +1,8 @@
+/* ------------------------------------------------------------- */
+/* MAIN OVERRIDES (main_overrides.less)                          */
+/* ------------------------------------------------------------- */
+
+
 // ----------------------------------------------------------------------------
 //
 // MAIN-OVERRIDE
@@ -23,17 +28,12 @@
   &>.buttons {
     padding-left:  0 !important;
   }
-
   .select-item,
   .form-addition,
   .input-panel{
     // PENDENT: noch austesten, falls im .wrapper oder nicht, sonst Ausrichtung noch in anderen containern festlegen
     margin-left:  0 !important;
   }
-  .tbl-list {
-    margin-left: 0.2em;
-    caption { padding-left: 0 ; }
-  }
   & > .col {
     margin-right: 1.6em ;
     & > .tbl-horizontal {
@@ -41,31 +41,50 @@
     }
   }
   & > .tbl-horizontal {
-    float: left;
-    margin-right: 1.6em ;
+//    float: left;
+//    margin-right: 1.6em ;
   }
-}
-#content .ui-tabs-panel div.wrapper:first-child { margin-top: 2.0em ; }
+  .tbl-list {
+    //margin-left: 0.2em;
+    caption { padding-left: 0 ; }
+  }
+} // /.wrapper
 
-.ui-tabs-panel{
 
+
+
+
+// --------------------------------------
+// TABS
+// --------------------------------------
+#content .ui-tabs-panel div.wrapper:first-child { margin-top: 1.5em ; }
+
+
+.ui-tabs-panel{
   & > div.select-item {
-    margin: 1.8em 2.0em 0.8em 1.0em !important;
+    margin: 1.8em 2.0em 0.8em @margin-from-panel-left !important;
   }
   & > div.form-addition {
-    margin-left: 0 !important !important;
+    margin-left: 0 !important ;
   }
-}
+} // /.ui-tabs-panel
+
+
+
+
+// --------------------------------------
+// UI-DIALOG
+// --------------------------------------
+.ui-dialog-content { background: #ffffff; }
+.ui-widget-content {background: transparent;}
+
 
 .ui-dialog-content,
 .ui-widget-content {
-
   .select-item{
     margin: 1em 1em 1.0em 0;
   }
   .buttons{
     padding: 1.0em 1.0em 1.0em 0;
   }
-
-
 }
diff --git a/css/less/menu.less b/css/less/menu.less
index fa805c3b9..505b78336 100755
--- a/css/less/menu.less
+++ b/css/less/menu.less
@@ -1,3 +1,7 @@
+/* ------------------------------------------------------------- */
+/* MENU (V3) and HTML MENU (menu.less)                          */
+/* ------------------------------------------------------------- */
+
 // ----------------------------------------------------------------------------
 //
 // MENU (V3) and HTML MENU
@@ -9,62 +13,72 @@
 //
 // CONTENTS:
 // - MENUV3
-// - - List-Element general
-// - - - Links & Inbound Pseudo Link (DIV)
-// - - Items with Sub Items
-// - - List 1st Level (horizontal)
-// - - - List 2nd and 3rd Level (Vertical)
-// - - - List 2nd Level (Vertical)
-// - - - - List 3rd Level (Vertical)
+//   - List-Element general
+//     - Links & Inbound Pseudo Link (DIV)
+//   - Items with Sub Items
+//   - List 1st Level (horizontal)
+//     - List 2nd and 3rd Level (Vertical)
+//     - List 2nd Level (Vertical)
+//     - List 3rd Level (Vertical)
+//
+// - HTML-MENU (LEFT)
+//   - Layout Web Page (LEFT & RIGHT AREA)
+//   - HTML-JS-MENU
+//     - Menue Items
+//     - Top Menu Item (1st Level)
+//     - Sub Menu Item (2nd Level)
+//     - Sub Sub Menu Item (3rd & last Level)
 //
-// - HTML-MENU
-// - HTML-MENU (Overrides)
+// - DHTML-MENU (TOP WITH ICONS, JUST OVERRIDES)
+//   - Menu Bar on Top
+//   - Menu-Container Sub (Sub Menu 2nd Level)
+//   - Menu-Item Sub (2nd Level)
+//   - Non-Generic Overrides (With Group Ids
+
 // ----------------------------------------------------------------------------
 
 
 
 
+
 // --------------------------------------
 // MENUV3
 // --------------------------------------
 
-
 #menuv3 {
   // Main-Properties of this element in File SCAFFOLDING.LESS
-  background-color: @menu_link_bg_level1 ;
+  background-color: @menu_bg ;
 
 
 
   // --------------
   // List-Element general
-  //
-
+  // --------------
   li {
-    display: block;
-    position: relative;
-    float: none;
-    font-weight: normal !important ;
-    font-size: @font-size-smaller;
-    line-height: 96%;
-    white-space: nowrap;
-    border: 0;
-    padding: 0;
-    margin: 0;
+    display:       block;
+    position:      relative;
+    float:         none;
+    font-weight:   normal !important ;
+    font-size:     @font-size-smaller;
+    line-height:   96%;
+    white-space:   nowrap;
+    border:        0;
+    padding:       0;
+    margin:        0;
 
     &:hover {
-      cursor: pointer;
+      cursor:    pointer;
     }
 
-
     // --------------
     // Links & Inbound Pseudo Link (DIV)
-    //
+    // --------------
     a,
     a:visited,
     div.x,
     div.x:visited {
-      display: block;
-      color: @menu_link;
+      display:         block;
+      color:           @menu_link;
       text-decoration: none;
       //padding-right: 0.6em;
     }
@@ -72,363 +86,507 @@
   } //  /li (List-Element general)
 
 
-
-
   // --------------
   // List 1st Level (horizontal)
-  //
-
+  // --------------
   & > ul {
     list-style: none;
-    margin: 0;
-    padding: 0;
-    float: left;
-
+    margin:     0;
+    padding:    0;
+    float:      left;
 
     & > li{
-      display: block;
-      height: 17px;
-      padding: 9px 0.9em 6px 0.9em;
-      background-color: @menu_link_bg_level1 ;
-      vertical-align: middle;
+      display:          block;
+      height:           17px;
+      padding:          9px 0.9em 6px 0.9em;
+      background-color: @menu_bg ;
+      color:            @menu_link ;
+      vertical-align:   middle;
 
       &:hover {
         background-color: @menu_link_bg_level1_hover;
 
         // Display Menu 2nd level
         > ul {
-          display: block;
+          display:  block;
           position: absolute;
         }
       }
 
 
-
       // --------------
-      // List 2nd and 3rd Level (Vertical)
-      //
-
+      // List 2nd and 3rd Level (vertical)
+      // --------------
       ul {
         position: relative;
-        display: none;
-        padding: 0 2em 2em 2em;
-        margin: 0 -2em -2em -2.8em;
-
+        display:  none;
+        padding:  0 2em 2em 2em;
+        margin:   0 -2em -2em -2.8em;
 
         li{
-          border-bottom: 1px #777777 solid ;
-          padding: 0.45em 0.6em 0.58em 0.8em ;
+          border-bottom: 1px @menu_border_color solid ;
+          padding:       0.45em 0.6em 0.58em 0.8em ;
         }
-      }
+      } // /ul (2nd and 3rd Level)
 
 
       // --------------
       /* List 2nd Level (Vertical) */
-      //
+      // --------------
       & > ul {
         top: 32px;
 
         & > li {
           background-color: @menu_link_bg_level2 ;
+          padding-left:     12px ;
+          margin-left:       1px;
 
-          //
           // Items with Sub Items
-          //
           div.x {
-            background: no-repeat right url("../image/menu-arrow-to-right-5.png");
+            background:    no-repeat right url("../image/menu-arrow-to-right-5.png");
             padding-right: 2.0em ;
+
+            // does not work because text has to be a block
+//            &::after {
+//              content:     "▷" ;
+//              color:       @gray-dark ;
+//              font-size:   120% ;
+//              padding:     0 0 0 1.0em ;
+//              text-align: right ;
+//              display:    inline-box ;
+//            }
           }
 
-          //
           // List-Item Hover
-          //
           &:hover {
-            color: @menu_link_hover;
+            color:            @menu_link_hover;
             background-color: @menu_link_bg_level2_hover;
 
             // Display Menu 3rd level
             > ul {
-              display: block;
+              display:  block;
               position: absolute;
             }
           }
 
-
           // --------------
           // List 3rd Level (Vertical)
-          //
-
+          // --------------
           > ul {
-            top: 0;
-            left: 99%;
-            padding: 2em;
-            margin: -2em;
-            list-style: none;
+            top:              0;
+            left:             99%;
+            padding:          2em;
+            //margin:       -2em;
+            margin-top:       -2.06em;
+            margin-right:     -2em;
+            margin-bottom:    -2em;
+            margin-left:      -2em;
+            list-style:       none;
 
             > li {
-              background-color: @menu_link_bg_level3 ;
-              border-left: 0.2em solid @menu_link_bg;
+              background-color:   @menu_link_bg_level3 ;
+              //border-left:      0.2em solid @menu_border_color;
 
-              &:hover { background-color: @menu_link_bg_level3_hover }
-             }
-          }
+              &:hover {
+                background-color: @menu_link_bg_level3_hover }
 
-        }
+              &:first-child { border-top: 1px #800040 solid ; }
+             }
 
+          } // /ul (3rd level)
 
+        } // />li (2nd level)
 
-      } // /List 2nd Level (Vertical)
+      } // /ul List 2nd Level (Vertical)
 
-    } //  /> li
-  } //  /ul
-}
-//  /#menuv3
+    } //  />li (1st level)
 
+  } //  /ul (1st level)
 
+} //  /#menuv3
 
 
 //  PENDENT: ??? (ggf. entfernen)
 li.sub {
-  position: relative;
-  left: 0.2em;
-  top: 0px;
+  position:         relative;
+  left:             0.2em;
+  top:               0px;
   background-color: #FFFFFF;
 }
 
 
 
 
-// --------------------
+
+// --------------------------------------
 // HTML-MENU (LEFT)
-// --------------------
+// --------------------------------------
 
-// Layout Page
+// --------------------
+// Layout Web Page (LEFT & RIGHT AREA)
+// --------------------
 
-// Left (Menu) area/column
+// LEFT (Menu) area/column
 body > #layout-split-left {
   display: block;
-  //position: relative;
-  position: fixed !important;
-  top: 0 ;
-  left: 0 ;
-  width: 200px;
-  //height: 101%;
-  height: 100%;
-  z-index: 1;
-  //overflow: hidden;
-  overflow: hidden   ;
-  border-right: 1px @gray solid;
-  background-color: @gray-mediumdark;
+  position:         fixed !important;
+  top:               0 ;
+  left:             0 ;
+  width:             200px;
+  height:           100%;
+  z-index:           1;
+  overflow:         hidden   ;
+  border-right:     1px @gray-standard solid;
+  background-color: @gray-dark;
 
 
 }
 
-// Right (Content) area/column
-div#layout-split-right {
-  margin-left: 200px;
-  margin-top: 70px;
-  display: block;
-  z-index: 1;
-  overflow: hidden;
+// RIGHT (Content) area/column
+body > div#layout-split-right {
+  margin-left:   200px;
+  //margin-top:   70px;
+  padding-top: 28px;
+  display:       block;
+  z-index:       1;
+  overflow:     hidden;
   // PENDENT: das muss dringend geloest werden,
   // siehe z.B. /am.pl?action=edit_account&callback=am.pl%3faction%3dlist_account&id=6130
   // Bearbeitung von Konto (wird unten abgeschnitten, falls nicht mit prov. Behelf wie unten)
-  min-height: 800px;
-  height: auto;
+  min-height:   800px;
+  height:       auto;
 
   .layout-actionbar { top: 36px; }
 
   & > #content {
-    top: 70px ;
+    top: 68px;
+    padding-top: 40px;
 
     h1 { top: 28px !important; }
-    & > form > .tabwidget {
-      & > ul.ui-tabs-nav{ top: 69px; }
-      & > ui-tabs-panel {
-        .tabwidget ul.ui-tabs-nav{ position: relative; }
+
+    & > .wrapper{
+      padding-top: 2em ;
+    }
+    & + div.wrapper {
+      padding-top: 4em ; // funzt nicht
+    }
+
+    & > form {
+      margin-top: 0.6em ;
+
+      & + div.wrapper {
+        padding-top: 4em ;
       }
-    } // / > form > .tabwidget
+
+
+      & > .tabwidget {
+        & > ui-tabs-panel {
+          //padding-top: 6.0em ;
+          .wrapper{ margin-top: 2em; }
+          .tabwidget ul.ui-tabs-nav{ position: relative; }
+        }
+        & > ul.ui-tabs-nav{ top: 69px; }
+
+      } // / > .tabwidget
+    } // / > form
     & > #requirement_spec_tabs.tabwidget {
       & > ul.ui-tabs-nav{ top: 69px !important ; }
     }
   }
+
+  // PENDENT: war für Klasse .layout-split-right eingesetzt, wo gebraucht im alten Kivi ?? ggf. entfernen
+  &.folded {
+    margin-left: 40px
+  }
+
+
+
 }
 
-// PENDENT: wo gebraucht im alten Kivi ?? ggf. entfernen
+// PENDENT: wo als Klasse gebraucht im alten Kivi ?? ggf. entfernen
 div.layout-split-right.folded {
   margin-left: 40px
 }
 
-// Menu itself
+// --------------------
+// HTML-JS-MENU
+// --------------------
 
 #layout-split-left #html-menu {
-  display: block;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  width: 100%;
-  height: 100%;
-  margin: 27px 0 0 0;
-  padding: 0 0 50px 0;
-  background-color: @menu_link_bg_level1 ;
-  font-size: @font-size-small;
-
-  // scrollbars could be invisible only on Webkit-Browsers
+  display:            block;
+  overflow-y:         scroll;
+  overflow-x:         hidden;
+  width:              100%;
+  height:             100%;
+  margin:             27px 0 0 0;
+  padding:            0 0 150px 0;
+  background-color:   @menu_left_bg ;
+  font-size:          @font-size-small;
+  border-bottom:      20px @menu_border_color solid ; // PENDENT: Rand unten sollte vorhanden sein
+
+  // scrollbars can be invisible only on Webkit-Browsers
   &::-webkit-scrollbar {
     display: none;
   }
 
-  // -----------------
+  & > div:last-of-type {
+    border-bottom: @menu_border ; // PENDENT: Rand unten sollte vorhanden sein
+  }
+
+  // -----------------------
   // Menue-Items
+  // -----------------------
   .mi {
-    display: block ;
+    display:       block ;
     a {
-      display: block;
-      word-wrap: break-word;
+      display:     block;
+      word-wrap:   break-word;
     }
     &:first-child {
-      border-top: 2px @gray solid ;
+      border-top: 2px @menu_border_color solid ; // PENDENT: 2px ??? sonst @menu_border verwenden
+    }
+    &:last-child {
+      border-bottom: @menu_border ; // PENDENT: 2px ??? sonst @menu_border verwenden
     }
   }
 
-  // Top/1st Level
+
+  // -----------------------
+  // Top Menu Item (1st Level)
+  // -----------------------
   .s0 {
     padding: 0 ;
-    background-color: #cccccc ;
-    color: @gray-darker;
-    border-bottom: 1px @gray solid ;
-    font-size: 90% ;
-    text-transform: uppercase;
+    background-color: @menu_left_level_1_bg ;
+    color:             @menu_left_level_1_color;
+    border-top:       @menu_border ;
+    font-size:         90% ;
+    text-transform:   uppercase;
 
     a {
-      padding: 5px 0 6px 8px ;
+      padding:   5px 0 6px 8px ;
+      cursor:   pointer ;
 
       &:hover,
       &:active{
-        background-color: @gray ;
-        color: #000 ;
+        background-color: @menu_left_level_1_hover_bg ;
+        color:             @menu_left_level_1_hover_color ;
+        //color:             white ;
+        text-decoration:   none;
       }
       &:link,
-      &:visited { color: @gray-mediumdark ; }
+      &:visited { color: @menu_left_level_1_color ; }
     }
 
     &.menu-open{
-      font-weight: bold;
-      background-color: @gray-dark ;
-      color: #fff ;
+      font-weight:       normal;
+      background-color: @menu_open_bg ;
+      color:             @menu_open_color ;
+      border-bottom:     0 ;
 
       a {
-        padding: 5px 0 6px 8px ;
+        padding:         5px 0 6px 8px ;
+        cursor:         auto ;
 
         &:hover,
         &:active{
-          background-color: #000 ;
-          color: #fff ;
+          background-color: @menu_open_bg ;
+          color:             @menu_open_color ;
+          text-decoration:   none;
         }
         &:link,
-        &:visited { color: #fff ; }
+        &:visited { color:   @menu_open_color ; }
       }
     }
-
   } // /.s0
 
-  // 2nd level
+  // -----------------------
+  // Sub Menu Item (2nd Level)
+  // -----------------------
   .s1{
     font-size: 80% ;
-    padding: 2px 0 3px 8px ;
-    background-color: @gray-verylight ;
     padding: 0 ;
-    border-top: 1px #bfbfbf solid ;
+    background-color: @menu_left_level_2_bg ;
+    border-top:       @menu_border ;
 
     a {
-      padding: 4px 0 3px 8px ;
+      padding:         4px 0 3px 8px ;
 
       &:hover,
       &:active{
-        background-color: #D5D5D5 ;
-        color: #000 ;
+        background-color: @menu_left_level_2_hover_bg ;
+        color:             @menu_left_level_2_hover_color ;
+        text-decoration:   none;
       }
       &:link,
-      &:visited { color: @gray-mediumdark ; }
+      &:visited { color:   @menu_left_level_2_color ; }
     }
 
     // has submenu (has 3rd-Level menu)
     &.sm{
       &:after{
-        content: "▼" ;
-        color: @gray ;
-        font-size: 80% ;
+        content:     "▼" ;
+        color:       @gray-standard ;
+        font-size:   80% ;
       }
       a {
-        display: inline-block ;
-        width: 162px; // with scrollbar{ display:none; } 174px is possible, works only with ::-webkit-scrollbar
-        color: @gray ;
+        display:   inline-block ;
+        width:     162px; // with scrollbar{ display:none; } 174px is possible, works only with ::-webkit-scrollbar
+        color:     @menu_left_level_2_color ;
 
         &:hover,
         &:active{
-          background-color: @gray-verylight ;
-          color: #999 ;
-          text-decoration: none ;
+          background-color:   @menu_left_level_2_bg ;
+          color:               @menu_left_level_2_color ;
+          text-decoration:     none ;
         }
         &:link,
-        &:visited { color: @gray-mediumdark ; }
+        &:visited { color:     @menu_left_level_2_color ; }
 
         &.ml:link,
-        &.ml:visited{ color: @gray ; }
+        &.ml:visited{ color:   @menu_left_level_2_color ; }
       }
     }
-    & > .s2:last-child { border-bottom: 1px #bfbfbf solid }
+    & > .s2:last-child {       border-bottom: @menu_border ; }
+
   } // /.s1
 
-  // 3rd & last level
+  // -----------------------
+  // Sub Sub Menu Item (3rd & last Level)
+  // -----------------------
   .s2{
-    padding: 0 ;
-    font-size: 80% ;
-    background-color: @gray-morelighter ;
+    padding:           0 ;
+    font-size:         80% ;
+    background-color: @menu_left_level_3_bg ;
 
     a {
-      padding: 2px 0 3px 20px ;
+      padding:         2px 0 3px 20px ;
 
       &:hover,
       &:active{
-        background-color: #BCBCBC ;
-        color: #000 ;
+        background-color:   @menu_left_level_3_hover_bg ;
+        color:               @menu_left_level_3_hover_color ;
+        text-decoration:     none;
       }
       &:link,
-      &:visited { color: @gray-mediumdark ; }
+      &:visited { color:     @menu_left_level_3_color ; }
     }
 
-
   } // /.s2
-
 } // /#html-menu
 
 
 
-// --------------------
-// DHTML-MENU (TOP WITH ICONS)
-// --------------------
+
+
+// --------------------------------------
+// DHTML-MENU (TOP WITH ICONS, JUST OVERRIDES)
+// --------------------------------------
 
 #main_menu_div {
 
+  // -----------------------
+  // Menu Bar on Top
+  // -----------------------
+
   .DHTMLSuite_menuBar_top {
-    top: 30px;
-  }
+    top:         28px;
+    height:     31px !important;
+    padding:     0;
+    margin:     0 ;
+
+    // -----------------------
+    // Menu Item on Top
+    // -----------------------
+    // Menu Item on Top, generic
+    // same as .DHTMLSuite_menuItem_top_* below
+    & > div {
+      padding: 5px 5px 0 3px ;
+
+      // Container with useless icon
+      div:first-child { }
+      // Text Menu Item top
+      .DHTMLSuite_menuItem_textContent {
+        font-size:   90% ;
+        padding:     0.1em 0.2em 0.2em 0.2em ;
+      }
+      // Arrow down Top
+      .DHTMLSuite_menuItem_top_arrowShowSub {
+          margin:   0 0.2em 0.2em 0.2em ;
+      }
+    } // / > div (Menu Item on Top, generic)
 
-}
-.DHTMLSuite_menuBar_sub {
-  width: auto !important;
-  padding: 0.1em 0 0.4em 0.4em !important;
+    // Menu Item on Top with funny classes
 
-  .DHTMLSuite_menuItem_sub_regular{
-    //display: table-row ;
-    //vertical-align: middle ;
-    a.DHTMLSuite_menuItem_textContent{
-      //display: table-cell;
-      //font-size: @font-size-small ;
+    .DHTMLSuite_menuItem_top_regular,
+    .DHTMLSuite_menuItem_top_over,
+    .DHTMLSuite_menuItem_top_click,
+    .DHTMLSuite_menuItem_top_disabled,
+    .DHTMLSuite_menuItem_top_active {
+      height: 19px;
+    }
+    .DHTMLSuite_menuItem_top_regular { }
+    // Hover
+    .DHTMLSuite_menuItem_top_over,
+    .DHTMLSuite_menuItem_top_click {
+      color:             @color-red-strong ;
+      background-color: @brand-superlight ;
+      .DHTMLSuite_menuItem_top_arrowShowSub{
+        border:         none !important ;
+      }
+    }
+    // Clicked with Submenu
+    .DHTMLSuite_menuItem_top_click { }
+
+  } // /.DHTMLSuite_menuBar_top
 
+} // /#main_menu_div
+
+
+// -----------------------
+// Menu-Container Sub (Sub Menu 2nd Level)
+// -----------------------
+.DHTMLSuite_menuBar_sub {
+  width:           auto !important;
+  padding:         0.1em 0 0.4em 0.4em !important;
+  margin:         11px 0 0 0;
+  border-top:     none;
+  border-right:   1px solid @brand-lighter;
+  border-bottom:   1px solid @brand-lighter;
+  border-left:     1px solid @brand-lighter;
+
+  // -----------------------
+  // Menu-Item Sub (2nd Level)
+  // -----------------------
+  .DHTMLSuite_menuItem_sub_regular,
+  .DHTMLSuite_menuItem_sub_over,
+  .DHTMLSuite_menuItem_sub_click,
+  .DHTMLSuite_menuItem_sub_disabled,
+  .DHTMLSuite_menuItem_sub_active {
+    clear:               both;
+    padding-left:       25px;
+    padding-right:       0.7em;
+    padding-top:         0.2em;
+    padding-bottom:     0.2em;
+    cursor:             pointer;
+    background-repeat:   no-repeat;
+    font-size:           90%;
+
+    .DHTMLSuite_menuItem_sub_arrowShowSub {
+      right:             3px !important;
     }
   }
-}
+  // Regular
+  .DHTMLSuite_menuItem_sub_regular{
+    a.DHTMLSuite_menuItem_textContent{  }
+  }
+  // Hover & Active
+  .DHTMLSuite_menuItem_sub_over,
+  .DHTMLSuite_menuItem_sub_active {
+    color: @color-orange-strong ;
+    background-color: @brand-superlight;
+  }
+
+} // /.DHTMLSuite_menuBar_sub
 
 
 
diff --git a/css/less/menu_actionbar.less b/css/less/menu_actionbar.less
index d77b07298..4e8c36bda 100755
--- a/css/less/menu_actionbar.less
+++ b/css/less/menu_actionbar.less
@@ -1,3 +1,7 @@
+/* ------------------------------------------------------------- */
+/* Menu Actionbar (menu_actionbar.less)                          */
+/* ------------------------------------------------------------- */
+
 // ----------------------------------------------------------------------------
 //
 // ACTIONBAR
@@ -46,10 +50,15 @@
     user-select:           none;
     height: 25px;
     font-size: @font-size-smaller ;
+    
+    &.layout-actionbar-action-disabled{
+      color: @actionbar-font-color-disabled !important;
+      &:hover{ text-decoration: none !important; }
+    }
   }
 
   & > div.layout-actionbar-action{
-    border-radius: 0.3em ;
+    border-radius: @actionbar-border-radius ;
     border: 1px @actionbar-border-color solid;
     background-color: @actionbar-bg ;
     float: left;
@@ -66,17 +75,17 @@
   div.layout-actionbar-submit,
   div.layout-actionbar-scriptbutton {
     display: block;
-    //width: 90px;
-    width: 110px;
+    min-width: 90px;
+    width: auto;
     box-sizing: border-box;
     border-width: 1px;
     border-style: solid;
     text-align: center;
-    padding: 4px 4px;
+    padding: 4px 10px;
     cursor: default;
     &:focus{
-      border-color: darkgray;
-      background-color: whitesmoke;
+      border-color: darkgray; // PENDENT: Button Border
+      background-color: @actionbar-bg-active;
     }
     &:hover {
       border-width: 1px;
@@ -107,10 +116,10 @@
 
       >div {
         //width: 5.4em;
-        width: 90px;
+        min-width: 90px;
         height: 25px;
-        border-top-left-radius: 0.3em ;
-        border-bottom-left-radius: 0.3em ;
+        border-top-left-radius: @actionbar-border-radius ;
+        border-bottom-left-radius: @actionbar-border-radius ;
         border: 1px @actionbar-border-color solid;
         background-color: @actionbar-bg;
         color: @actionbar-font-color;
@@ -126,8 +135,8 @@
         height: 25px !important;
         border: 1px @actionbar-border-color solid;
         border-left: none;
-        border-top-right-radius: 0.3em ;
-        border-bottom-right-radius: 0.3em ;
+        border-top-right-radius: @actionbar-border-radius ;
+        border-bottom-right-radius: @actionbar-border-radius ;
         padding: 4px;
         background-color: @actionbar-bg ;
         //background-image: url("../image/select-down.png") no-repeat;
@@ -144,13 +153,13 @@
       float: right;
       overflow: hidden;
       border: 1px solid @actionbar-border-color ;
-      border-top-left-radius: 0.3em;
-      border-bottom-left-radius: 0.3em;
-      border-bottom-right-radius: 0.3em;
+      border-top-left-radius: @actionbar-border-radius;
+      border-bottom-left-radius: @actionbar-border-radius;
+      border-bottom-right-radius: @actionbar-border-radius;
       z-index: @zindex-actionbar-combobox-list ;
       top: 1px;
-      padding-bottom: 0.6em;
-      background-color: @actionbar-bg !important ;
+      //padding-bottom: 0.6em;
+      background-color: @actionbar-bg ;
 
       div.layout-actionbar-action {
         white-space: nowrap;
@@ -160,12 +169,14 @@
         text-align: left;
         padding: 0.6em 0.6em 0.6em 1.0em;
         border-bottom: none !important;
-        background-color: @actionbar-bg !important ;
+        background-color: @actionbar-bg ;
         color: @actionbar-font-color;
 
+        // PENDENT: *-active ersetzen durch -hover
         &:hover {
-          color: #000;
+          color: @actionbar-font-color-active;
           text-decoration: underline;
+          background-color: @actionbar-bg-active;
         }
       }
     } // /.layout-actionbar-combobox-list
@@ -177,13 +188,13 @@
         border-bottom: none !important ;
 
         div {
-          background-color: @actionbar-bg-active !important ;
+          //background-color: @actionbar-bg-active !important ;
           border-bottom-left-radius: 0 !important;
           border-bottom: none;
           height: 30px ;
         }
         span {
-          background-color: @actionbar-bg-active !important ;
+          //background-color: @actionbar-bg-active !important ;
           border-bottom-right-radius: 0 !important;
           border-bottom: none;
           height: 30px !important ;
diff --git a/css/less/menu_frame_header.less b/css/less/menu_frame_header.less
index fd0a573d1..b296b133a 100755
--- a/css/less/menu_frame_header.less
+++ b/css/less/menu_frame_header.less
@@ -1,3 +1,8 @@
+/* ------------------------------------------------------------- */
+/* MENU FRAME HEADER (menu_frame_header.less)                    */
+/* ------------------------------------------------------------- */
+
+
 // ----------------------------------------------------------------------------
 //
 // FRAME-HEADER (DASHBOARD)
@@ -62,7 +67,7 @@
           text-transform: uppercase ;
           font-size: 130% ;
         }
-    }
+    } // /span.frame-header-element
 
 
     span.frame-header-left,
@@ -103,7 +108,7 @@
     // --------------------------------------
 
     #ajax-spinner {
-        display: none;
+      display: none;
     }
 
 
@@ -113,30 +118,30 @@
     // --------------------------------------
 
     div.frame-header-quicksearch{
-        display: block;
-        overflow: hidden;
-        margin: 0 auto;
-        text-align: center;
-        width: 52%;
-
-        span.frame-header-quicksearch input {
-            font-size: @font-size-smaller;
-            //font-family: @font-family-sans-serif ;
-            margin-top: 0.1em;
-            background-color: @dashbrd_input_bg ;
-            width: 14.0% !important;
-            padding: 0 0.2em ;
-            border-width: 1px ;
-            //border-color: #bcbcbc;
-            border-style: solid;
-            border-top-color: #949494;
-            border-right-color: #BCBCBC;
-            border-bottom-color: #BCBCBC;
-            border-left-color: #949494;
-
-        }
-
-    }
+      display: block;
+      overflow: hidden;
+      margin: 0 auto;
+      text-align: center;
+      width: 70%;
+
+      span.frame-header-quicksearch input {
+        font-size: @font-size-smaller;
+        //font-family: @font-family-sans-serif ;
+        margin-top: 0.1em;
+        background-color: @dashbrd_input_bg ;
+        width: auto !important;
+        min-width: 5em;
+        max-width: 7em;
+        padding: 0 0.2em ;
+        border-width: 1px ;
+        //border-color: #bcbcbc;
+        border-style: solid;
+        border-top-color: #949494;
+        border-right-color: #BCBCBC;
+        border-bottom-color: #BCBCBC;
+        border-left-color: #949494;
+      }
+    } // /div.frame-header-quicksearch
 
 } /* /#frame-header  */
 
diff --git a/css/less/messages.less b/css/less/messages.less
index 0fc94fc19..5cad5d613 100644
--- a/css/less/messages.less
+++ b/css/less/messages.less
@@ -1,3 +1,8 @@
+/* ------------------------------------------------------------- */
+/* MESSAGES (messages.less)                                      */
+/* ------------------------------------------------------------- */
+
+
 // ----------------------------------------------------------------------------
 //
 // MESSAGES
@@ -12,28 +17,44 @@
 //   - Flash Messages
 // ----------------------------------------------------------------------------
 
+
+
+
+
+// --------------------------------------
+// MESSAGE MIXIN
+// --------------------------------------
+
 .mx-message {
-    display:       block;
-    overflow:      hidden;
-    clear:         both ;
-    width:         auto;
-    min-width:     @messages-min-width ;
-    max-width:     @messages-max-width ;
-    padding:       0.6em 0.8em ;
-    font-size:     @font-size-smaller ;
-    font-weight:   normal;
-    line-height:   110% ;
-    text-align:    left;
-    white-space:   normal;
-    border-radius: 0.6em;
-    border-style:  solid;
-    border-width:  1px;
+  display:       block;
+  overflow:      hidden;
+  overflow-x:     auto;
+  clear:         both ;
+
+  width:         auto;
+  min-width:     @messages-min-width ;
+  max-width:     @messages-max-width ;
+
+  padding:       0.6em 0.8em ;
+
+  border-radius: @controlpanel-radius;
+  border-style:  solid;
+  border-width:  1px;
+
+  font-size:     @font-size-smaller ;
+  font-weight:   normal;
+  line-height:   110% ;
+  text-align:    left;
+  white-space:   normal;
 }
 
 
 
+
+
+
 // --------------------------------------
-// Messages & Warnings
+// MESSAGES & FLASH MESSAGES
 // --------------------------------------
 .flash_message,
 .message {
@@ -48,85 +69,117 @@
 } // /.flash_message
 
 
-// --------------
-// Messages (Simple Style)
-//
 
-.message {
-  &_error,
-  &_warning,
-  &_hint,
-  &_info,
-  &_ok {
-    // General
-    //margin: 0.2em 1.0em 1.2em 0 ;
 
-    // PENDENT: wieso wird in einem DIV-Container nochmals ein Paragraf mit der gleichen Klasse ausgegeben?
-    & > .message {
-      &_error,
-      &_warning,
-      &_hint,
-      &_info,
-      &_ok{
-        display: none;
-      }
-    }
+// --------------------------------------
+// MESSAGES (SIMPLE STYLE)
+// --------------------------------------
 
-  }
+.message {
+
+  // -----------------------
+  // ERROR
+  // -----------------------
   &_error {
     color:            @message_error_text;
     background-color: @message_error_bg;
     border-color:     @message_error_border;
     h4{ color:        @message_error_text; }
-    p { color:        @message_error_text; } // PENDENT: andere Message-Typen auch erweitern
+    p { color:        @message_error_text; }
   }
+  // -----------------------
+  // Warning
+  // -----------------------
   &_warning {
     color:            @message_warning_text;
     background-color: @message_warning_bg;
     border-color:     @message_warning_border;
+    h4{ color:        @message_warning_text; }
+    p { color:        @message_warning_text; }
   }
+  // -----------------------
+  // INFO / HINT
+  // -----------------------
   &_hint,
   &_info {
     color:            @message_hint_text;
     background-color: @message_hint_bg;
     border-color:     @message_hint_border;
-
-    h4 { color: @message_hint_text ; }
-    p  { color: @message_hint_text ; }
+    h4 { color:       @message_hint_text ; }
+    p  { color:       @message_hint_text ; }
   }
+  // -----------------------
+  // OK
+  // -----------------------
   &_ok {
     color:            @message_ok_text;
     background-color: @message_ok_bg;
     border-color:     @message_ok_border;
+    h4{ color:        @message_ok_text; }
+    p { color:        @message_ok_text; }
   }
+  // -----------------------
+  // ATTENTION (PENDING)
+  // -----------------------
   // PENDENT: noch aktuell? ggf. durch Hint ersetzen
   &.attention{
-    font-size: @font-size-smaller;
-    border-color: @message_warning_border;
-    background-color: @message_warning_bg;
-
-    h4 { color: @message_warning_text ; }
-    p  { color: @message_warning_text    ; }
+    color:            @message_hint_text;
+    background-color: @message_hint_bg;
+    border-color:     @message_hint_border;
+    h4 { color:       @message_hint_text ; }
+    p  { color:       @message_hint_text ; }
   }
-
+  // -----------------------
+  // TYPOGRAPHY
+  // -----------------------
   h4{
     font-weight: bold;
     font-size: 110%;
-    margin: 0.4em 0 0.2em 0 ;
+    margin: 0.4em 1.0em 0.2em 0 ;
     padding: 0;
   }
   p{
-    margin: 0 0 0.6em 0 ;
+    margin: 0 1.0em 0.6em 0 ;
     padding: 0;
   }
 
+  // PENDENT: GGF. entfernen
+  &_error,
+  &_warning,
+  &_hint,
+  &_info,
+  &_ok {
+    // PENDENT: wieso wird in einem DIV-Container nochmals ein Paragraf mit der gleichen Klasse ausgegeben?
+    // ggf. entfernen
+    & > .message {
+      &_error,
+      &_warning,
+      &_hint,
+      &_info,
+      &_ok{
+        display: none;
+      }
+    }
+  } // /_TYPE of messages
 } // /.message
+p.message{ padding: 0.6em !important ; }
+
 
+// -----------------------
 // Message blocks in different levels in the #content
+// -----------------------
 #content {
   & > form {
-    & > .message {
-      margin-left: @margin-left-from-content ;
+
+	// -----------------------
+	// Message Immediately In Form
+	// -----------------------
+    & > .message,
+    & > .ui-tabs > .ui-tabs-panel > .message {
+      margin-top:     @margin-left-from-content;
+      margin-right:   0;
+      margin-bottom:  @margin-left-from-content;
+      margin-left:    @margin-left-from-content;
 
       &.message_ok,
       &.message_info,
@@ -136,51 +189,39 @@
         margin-left: @margin-left-from-content ;
       }
     } // .message
-  } // /form
-  & > p {
-    &.message_ok,
-    &.message_info,
-    &.message_hint,
-    &.message_error,
-    &.message_warning{
-      margin-left:  @margin-left-from-content ;
-    }
-  }
-  & > .message_ok,
-  & > .message_info,
-  & > .message_hint,
-  & > .message_error,
-  & > .message_warning{
-    margin: @margin-left-from-content ;
-  }
-} // /#content
 
-// Message blocks in different levels in the #content
-.wrapper{
-  & > .message,
-  & > .message_ok,
-  & > .message_info,
-  & > .message_hint,
-  & > .message_error,
-  & > .message_warning{
-    margin: @margin-from-wrapper ;
-  }
-}
 
-p {
-  &.message {
-    &,
-    &_error,
-    &_warning,
-    &_hint,
-    &_info,
-    &_ok {
-      padding-bottom: 0.4em ;
+    & > .message_ok,
+    & > .message_info,
+    & > .message_hint,
+    & > .message_error,
+    & > .message_warning{
+      margin-top:     @margin-left-from-content;
+      margin-right:   0;
+      margin-bottom:  @margin-left-from-content;
+      margin-left:    @margin-left-from-content;
+    }
+
+    // -----------------------
+    // Message Immediately In Wrapper
+    // -----------------------
+    .wrapper{
+      & > .message,
+      & > .message_ok,
+      & > .message_info,
+      & > .message_hint,
+      & > .message_error,
+      & > .message_warning{
+        margin: @margin-from-wrapper ;
+      }
     }
-  }
-}
 
+  } // /form
+} // /#content
+
+// -----------------------
 // Message on the welcome screen
+// -----------------------
 body > div.login .message{
   width: 100% ;
   text-align: center ;
@@ -189,14 +230,21 @@ body > div.login .message{
 
 
 
-// --------------
-// Flash Messages
-//
+
+
+
+
+// --------------------------------------
+// FLASH MESSAGES
+// --------------------------------------
 
 .flash_message {
-  //.mx-message ;
-  // General (apears two times within a .flash:message)
 
+  // General (apears two times within a .flash_message)
+
+  // -----------------------
+  // Error
+  // -----------------------
   &.flash_message_error {
     background-color: @message_error_bg;
     border-color: @message_error_border;
@@ -207,6 +255,9 @@ body > div.login .message{
       color: @message_error_text;
     }
   }
+  // -----------------------
+  // OK
+  // -----------------------
   &.flash_message_ok {
     background-color: @message_ok_bg;
     border: @message_ok_border;
@@ -217,6 +268,9 @@ body > div.login .message{
       color: @message_ok_text;
     }
   }
+  // -----------------------
+  // Warning
+  // -----------------------
   &.flash_message_warning {
     background-color: @message_warning_bg;
     border-color: @message_warning_border;
@@ -227,6 +281,10 @@ body > div.login .message{
       color: @message_warning_text;
     }
   }
+  // -----------------------
+  // Info / Hint
+  // -----------------------
+
   &.flash_message_info {
     background-color: @message_info_bg;
     border: @message_info_border;
@@ -238,6 +296,12 @@ body > div.login .message{
     }
   }
 
+
+
+	// -----------------------
+	// Elements in .flash_message
+	// -----------------------
+
   .flash_title {
     font-weight: bold;
     float: left;
@@ -327,33 +391,64 @@ body > div.login .message{
   } // /div.message-container
 } // /.flash_message
 
-.wrapper {
-  .flash_message {
-    margin: @margin-from-wrapper ;
+
+
+// -----------------------
+// Flash Message blocks in different levels in #content
+// -----------------------
+
+#content {
+
+  & > form {
+
+    // Flash message immediately in form
+    & > .flash_message {
+      &_error,
+      &_ok,
+      &_warning,
+      &_info{
+        margin: 48px 0 0 @margin-left-from-content ;
+      }
+    } // /.flash_message
+
+
+    // Flash message in .ui-tabs
+    .ui-tabs-panel{
+      & > .flash_message {
+        &_error,
+        &_ok,
+        &_warning,
+        &_info{
+          margin: 48px 0 0 @margin-left-from-content ;
+        }
+      } // /.flash_message
+    } // /.ui-tabs
+
+
+    // Flash message within .wrapper
+    .wrapper {
+      .flash_message {
+        margin: @margin-from-wrapper ;
+        &_error,
+        &_ok,
+        &_warning,
+        &_info{
+          margin: @margin-from-wrapper ;
+        }
+      } // /.flash_message
+    } // /.wrapper
+
+  } // /form
+
+  // Flash message immediately in #content
+  & > .flash_message {
     &_error,
     &_ok,
     &_warning,
     &_info{
-      margin: @margin-from-wrapper ;
+      margin: 24px 0 0 @margin-left-from-content ;
     }
-  } // /.flash_message
-} // /.wrapper
-#content > form > .flash_message {
-  &,
-  &_error,
-  &_ok,
-  &_warning,
-  &_info{
-    margin: 48px 0 0 @margin-left-from-content ;
   }
-}
-#content > .flash_message {
-  &,
-  &_error,
-  &_ok,
-  &_warning,
-  &_info{
-    margin: 24px 0 0 @margin-left-from-content ;
-  }
-}
+
+} // /#content
 
diff --git a/css/less/mixins.less b/css/less/mixins.less
index 209b8a5ae..c57de97c6 100644
--- a/css/less/mixins.less
+++ b/css/less/mixins.less
@@ -1,3 +1,7 @@
+/* ------------------------------------------------------------- */
+/* MIXINS (mixins.less)                                          */
+/* ------------------------------------------------------------- */
+
 // ----------------------------------------------------------------------------
 //
 // MIXINS (general sitewide properties)
@@ -28,12 +32,14 @@
 // see also Caption in tables.less
 .mx-h3-caption {
   font-size :  @table-caption-size ;
-  font-style:  @h3-style;
+  //font-style:  @h3-style;
   font-weight: @h3-weight;
   color:       @table-caption-color !important ;
   padding:     0.2em 0 0.2em 0.2em;
-  margin:      0;
+	margin: 0.1em 0 0.4em 0 ;
+  //margin:      0;
   text-align:  left;
+  letter-spacing: 0.12em;
 }
 
 // -------------------
@@ -50,7 +56,7 @@
 //  --------------------------------------
 .mx-thead-th {
   color:            @t-cell-head-text ;
-  background-color: @brand-strong ;
+  background-color: @t-cell-head-bg ;
   border-top:       1px solid @table-border-color;
   border-bottom:    1px solid @table-border-color;
   text-align:       left ;
@@ -61,7 +67,7 @@
 //  --------------------------------------
 .mx-button {
   display:       inline-block ;
-  cursor:        auto ;
+  cursor:        pointer ;
   width:         auto ;
   padding:       0.2em 0.6em;
   font-size:     @font-size-smaller ;
@@ -70,31 +76,31 @@
   text-align:    center;
   border-style:  solid;
   border-width:  1px;
-  border-radius: 3px;
+  border-radius: @button-border-radius;
 }
 // -------------------
 // STRONG
 //
 // for links, labels, buttons (no :link pseudo class)
 .mx-button-standard{
-  border-color:     @btn-default-color ;
-  background-color: @btn-default-bg ;
-  color:            @btn-default-color ;
+  border:     			@button-strong-border ;
+  background-color: @button-strong-bg ;
+  color:            @button-strong-color ;
   text-decoration:  none;
 }
 // for hover, focus, active pseudo classes
 .mx-button-standard-hover-focus{
   &:hover{
-    border-color:     @btn-default-hover-border ;
-    background-color: @btn-default-hover-bg;
-    color:            @btn-default-hover-color;
+    border:     			@button-strong-hover-border ;
+    background-color: @button-strong-hover-bg;
+    color:            @button-strong-hover-color;
     text-decoration:  none;
   }
   &:active,
   &:focus{
-    border-color:     @btn-default-active-border ;
-    background-color: @btn-default-active-bg;
-    color:            @btn-default-active-color;
+    border			:     @button-strong-active-border ;
+    background-color: @button-strong-active-bg;
+    color:            @button-strong-active-color;
     text-decoration:  none;
   }
 }
@@ -103,23 +109,23 @@
 //
 // for links, labels, buttons (no :link pseudo class)
 .mx-button-neutral {
-  border-color:     @btn-neutral-border ;
-  background-color: @btn-neutral-bg;
-  color:            @btn-neutral-color;
+  border:     			@button-neutral-border ;
+  background-color: @button-neutral-bg;
+  color:            @button-neutral-color;
 }
 // for hover, focus, active pseudo classes
 .mx-button-neutral-hover-focus {
   &:hover{
-    border-color:     @btn-neutral-hover-border ;
-    background-color: @btn-neutral-hover-bg;
-    color:            @btn-neutral-hover-color;
-    text-decoration:  none;
+    border:    				 	@button-neutral-hover-border ;
+    background-color: 	@button-neutral-hover-bg;
+    color:            	@button-neutral-hover-color;
+    text-decoration:  	none;
   }
   &:active,
   &:focus{
-    border-color:     @btn-neutral-active-border ;
-    background-color: @btn-neutral-active-bg;
-    color:            @btn-neutral-active-color;
+    border:     			@button-neutral-active-border ;
+    background-color: @button-neutral-active-bg;
+    color:            @button-neutral-active-color;
     text-decoration:  none;
   }
 }
diff --git a/css/less/print.less b/css/less/print.less
index fa4ed3858..749a2c594 100644
--- a/css/less/print.less
+++ b/css/less/print.less
@@ -1,3 +1,8 @@
+/* ------------------------------------------------------------- */
+/* PRINT (print.less)                                            */
+/* ------------------------------------------------------------- */
+
+
 // ----------------------------------------------------------------------------
 //
 // PRINT
@@ -14,20 +19,233 @@
 // MEDIA: Print
 // --------------------------------------
 
-// PENDENT: Druckversion erstellen
-// PENDENT: noch erweitern
+// PENDENT: Druckversion erstellen, noch erweitern
+
+@print-size: 0.8 ;
+@width-size: 0.6 ;
 
 @media print {
+
+  body{ margin-left: 1.4em ; }
+
+  // Do not print following areas
   #menuv3,
   #html-menu,
   #frame-header,
   #main_menu_div,
   #js-header,
-  body>#layout-split-left {
-    display: none;
+  body>#layout-split-left,
+  #tree-column,
+  ul.ui-tabs-nav,
+  div.layout-actionbar,
+  .control-panel,
+  .input-panel,
+  .toggles {
+    display: none !important;
   }
+
+  // Layout adjustments
   body>#layout-split-right{
-    margin-left: 0;
+    margin-left: 0 !important;
   }
   //#content.html-menu { margin-left: 0; }
-}
+
+
+  .wrapper.toggled > table.tbl-horizontal,
+  .wrapper.toggled > div.col {
+    margin-top: 0 !important ;
+  }
+  div.buttons.positions{
+    display: none;
+    margin: 0 0 0 0 !important;
+  }
+
+
+  #content {
+
+    // Typography
+    td, p, div, span, input, textarea, select, option {
+      //font-size: round( ( @font-size-smaller * @print-size ) ) !important ;
+      font-size: round( ( 9pt * @print-size ) , 0 ) !important ;
+    }
+
+//    font-size: 80% !important ;
+    padding:  1.0em 0 0 0 !important ;
+    margin:   0 ;
+
+    & > h1 {
+        color:    @gray-verydark ;
+        padding:  0 0 0 0 ;
+        top:      0 ;
+        position: absolute ;
+    }
+
+    wrapper{
+      margin:   0.4em 1em 1em 1.2em;
+      padding:  0 0 0.4em 0;
+    }
+
+    caption,
+    th.caption,
+    td.caption{
+
+      font-size :   round( (@table-caption-size * @print-size) , 0 ) ;
+      font-weight:  bold;
+      padding:      0.1em 0 0.1em 0.2em;
+      margin:       0.1em 0 0.1em 0 ;
+      display:      table-cell ;
+
+    }
+
+    .tbl-horizontal {
+      tbody {
+        tr {
+          //background-color: @table-bg-accent ;
+          //th { background-color: #fff ; }
+          td, th {
+            border-color:   @table-border-color ;
+            border-width:   0.3pt !important;
+            border-style:   solid ;
+            padding:        0.3em 0.6em ;
+          }
+        th, span.label { font-size: round( ( @font-size-verysmall * @print-size ) )!important }
+        }
+      } // /tbody
+    }
+
+
+    .tbl-list {
+      margin-top: 1.2em ;
+      width: 96% !important ;
+      caption{
+        margin: 0 !important ;
+        padding: 0 !important ;
+      }
+      thead  {
+        //display:  table-header-group ;
+        overflow: hidden ;
+        tr th{
+          font-size: 70% ;
+        }
+      }
+      tbody tr {
+        &:nth-child(odd)  { background-color: none; }
+        &:nth-child(even) { background-color: none; }
+        border-bottom: 1px #000 solid !important;
+        td {
+          border-bottom:  1px #000 solid !important;
+          vertical-align: top !important ;
+        }
+      }
+    }
+
+      // -----------------------
+      //  width of columns (dimensions)
+      // -----------------------
+      col {
+        &.wi-smallest    { width: round( (@tcol-wi-smallest * @width-size ) , 0     )!important ; }
+        &.wi-verysmall   { width: round( (@tcol-wi-verysmall * @width-size ) , 0    )!important ; }
+        &.wi-small       { width: round( (@tcol-wi-small * @width-size ) , 0        )!important ; }
+        &.wi-mediumsmall { width: round( (@tcol-wi-mediumsmall * @width-size ) , 0  )!important ; }
+        &.wi-normal      { width: round( (@tcol-wi-normal * @width-size ) , 0       )!important ; }
+        &.wi-lightwide   { width: round( (@tcol-wi-lightwide * @width-size ) , 0    )!important ; }
+        &.wi-wide        { width: round( (@tcol-wi-wide * @width-size ) , 0         )!important ; }
+        &.wi-wider       { width: round( (@tcol-wi-wider * @width-size ) , 0        )!important ; }
+        &.wi-verywide    { width: round( (@tcol-wi-verywide * @width-size ) , 0     )!important ; }
+      }
+
+
+
+
+
+
+
+
+    input[type="text"],
+    input[type="customer"],
+    input.numeric,
+    textarea,
+    select,
+    span.data,
+    select,
+    textarea {
+      width: auto         !important;
+      appearance:         none !important;
+      -webkit-appearance: none !important;
+      -moz-appearance:    none !important;
+      border:             none;
+      color:              #000 !important ;
+      background-color:   none !important;
+      background:         none !important;
+      /* rest needed for Firefox: */
+      overflow:visible    !important;
+      //width: 120%;/* needed for Firefox???: */
+    }
+
+//    input[type="text"]{
+//      appearance:         none;
+//      -webkit-appearance: none;
+//      -moz-appearance:    none;
+//      border:             none;
+//    }
+
+    textarea{
+      display:      block ;
+      height:       auto !important ;
+      //min-height:   3.6em ;
+      overflow-y:   visible !important;
+      min-width:    16em ;
+      width:        100% !important;
+      padding:      0 ;
+      resize:       vertical;
+    }
+    table.tbl-list td {
+      textarea  { min-height:   4.2em !important; }
+      input     { padding-left: 0 !important; }
+    }
+    span.data{
+      width:  auto;
+      border: none ;
+    }
+    input.wi-date{
+      align: left !important;
+      padding: 0 !important;
+    }
+    select{
+      padding: 0 0 0.4em 0.2em !important;
+    }
+
+    div.cke_editable{
+      min-height: 1.8em  !important;
+      height:     auto !important;
+      border:     none;
+      overflow:   hidden !important;
+    }
+
+
+    a.button-image,
+    a.button,
+    input[type="button"],
+    input.neutral,
+    td img {
+      display: none ;
+    }
+
+    input, select{
+      &.wi-smallest     { width: ( round( ( @input-wi-smallest * @width-size    ) , 0 ) )!important ; } ;
+      &.wi-verysmall    { width: ( round( ( @input-wi-verysmall * @width-size   ) , 0 ) )!important ; } ;
+      &.wi-small        { width: ( round( ( @input-wi-small * @width-size       ) , 0 ) )!important ; } ;
+      &.wi-mediumsmall  { width: ( round( ( @input-wi-mediumsmall * @width-size ) , 0 ) )!important ; } ;
+      &.wi-normal       { width: ( round( ( @input-wi-normal * @width-size      ) , 0 ) )!important ; } ;
+      &.wi-lightwide    { width: ( round( ( @input-wi-lightwide * @width-size   ) , 0 ) )!important ; } ;
+      &.wi-wide         { width: ( round( ( @input-wi-wide * @width-size        ) , 0 ) )!important ; } ; // min-width
+      &.wi-wider        { width: ( round( ( @input-wi-wider * @width-size       ) , 0 ) )!important ; } ; // min-width
+      &.wi-verywide     { width: ( round( ( @input-wi-verywide * @width-size    ) , 0 ) )!important ; } ; // min-width
+    }
+
+
+
+
+  } // /#content
+} // /@media print
+
diff --git a/css/less/requirement_spec.less b/css/less/requirement_spec.less
index d59968082..2105e217f 100644
--- a/css/less/requirement_spec.less
+++ b/css/less/requirement_spec.less
@@ -1,357 +1,493 @@
-/* ------------------------------------------------------------ */
-/* General page layout */
-/* ------------------------------------------------------------ */
+/* ------------------------------------------------------------- */
+/* REQUIREMENT SPEC (requirement_spec.less)                      */
+/* ------------------------------------------------------------- */
 
 
 
+//  ------------------------------------------------------------
+//  General page layout
+//  ------------------------------------------------------------
+
+
+
+
+// -----------------------
+// Requirement Spec Version (Title)
+// -----------------------
+
+#requirement_spec_version{
+  padding:           @contentbox-padding;
+  letter-spacing:   0.16em ;
+  font-size:         110% ;
+}
+
+
+
+// --------------------------------------
+// COLUMN-CONTAINER
+// --------------------------------------
+
+
 #column-container {
   //width: 100%;
-  padding-left: 0;
-  padding-right: 0;
-  margin-left: 0;
-  margin-top: 0.2em ;
-  margin-right: 0;
-  overflow: hidden ;
+  padding-left:   0;
+  padding-right:   0;
+  margin-left:     0;
+  margin-top:     0.2em ;
+  margin-right:   0;
+  overflow:       hidden ;
+
+
+
+  // --------------------------------------
+  // TREE COLUMN (LEFT, JS-TREE)
+  // --------------------------------------
 
   #tree-column {
-    float: left;
-    width: 25%;
-    padding: 0.3em 1.2em 2.0em 0.8em;
-    border-right: 1px #000 solid;
-    background-color: @gray-superlight;
+    float:                 left;
+    width:                 30em;
+    padding:               0.3em 1.2em 2.0em 0.8em;
+    border-right:         1px #000 solid;
+    //background-color:   @gray-superlight;
+    background-color:     none;
 
     .jstree {
+        & > ul {
+          width: 342px;
+          overflow-x: hidden;
+        }
+
       ul li {
-        line-height: 1.8em;
-        font-size: 10pt;
+        line-height:       1.8em;
+        padding:           0 ;
+
+        font-size:         10pt;
+        a {
+          border-bottom:   none;
+          width:           98% ;
+        }
+
       }
+    } // /.jstree
+
+    //  Special things that apply to the tree
+    #tree li.flagged > a > ins {
+      background-image:     url("../image/flag-red.png") !important;
+      background-position:   0;
     }
-  }
+
+  } // /#tree-column
+
+
+
+  // --------------------------------------
+  // CONTENT COLUMN (RIGHT, EDITING)
+  // --------------------------------------
+
   #content-column {
-    float: left;
-    width: 58em;
-    padding-left: 3.0em;
-    background-color: @gray-superlight;
-  }
-}
+    float:               left;
+    width:               58em;
+    padding-left:       3.0em;
+    //background-color: @gray-superlight;
+    background-color:   none;
+
+    // just nice to have this helpful container :-)
+    #column-content {
+
+
+
+      // --------------------------------------
+      // SECTIONS
+      // --------------------------------------
+
+      .section {
+        border-left:       0;
+        margin-left:       0;
+
+        .section-header{
+          display:         block ;
+          overflow:       hidden;
+          width:           90% ;
+
+          h3 {
+            font-size:         140%;
+            letter-spacing:   0.16em;
+            span.label {
+              font-size:       90% ;
+              font-weight:     bold;
+              letter-spacing: 0.1em;
+              color:           @brand-dark;
+            }
+          } // /h3
+
+          .section-description {
+            margin-bottom:   15px;
+            margin-left:     0;
+
+            div{
+              padding:       0.3em 0 0.4em 0;
+
+              .section-description-heading {
+                font-weight:     normal;
+                font-size:       100% ;
+                /* margin:       0 0 1.2em 0; */
+                padding:         0 0 0.0em 0;
+                display:         block;
+
+              }
+              span.label{
+                font-size:       90%;
+              }
+              p {
+                color:           #000;
+                font-size:       106%;
+                line-height:     1.5em;
+                margin:         0 0 0.3em 0;
+              }
+
+            } // /div
+
+          } // /.section-description
+
+          .section-context-menu {
+            h3{
+              background-color: #000;
+              color:             #000 !important ;
+              span.label { font-weight: normal;}
+            }
+            div.section-description {
+              div{
+                span.label section-description-heading {}
+              }
+            }
+            span.label { }
+          }
 
+          #section-list-empty{
+            border:           1px #0C42FF solid ;
+            background-color: #BBCDFF ;
+            padding:           0.6em ;
+          }
 
-#requirement_spec_tabs{
-  #function-blocks-tab{
-    margin-top: 1.4em ;
-  }
-}
+        }
+        // /.section-header
+
+      } // /.section
+
+
+
+      // --------------------------------------
+      // FUNCTION BLOCKS
+      // --------------------------------------
+
+      .function-block {
+        border-top:   1px solid #bbb;
+        margin:       0 ;
+        padding:       0.8em 0 1.8em 0 ;
+        overflow:     hidden;
+        display:       block;
+        clear:         both;
+        float:         none;
+        width:         48em;
+
+        .function-block-content{
+          overflow:   hidden ;
+          padding:     0 0 0 0.6em;
+
+          .function-block-header {
+            clear:     both;
+            overflow: hidden;
+
+            .function-block-number {
+              font-weight:   normal;
+              width:         5.0em ;
+              display:       block;
+              float:         left;
+            }
+
+            .function-block-desc {
+              display:         inline-block;
+              overflow:       hidden;
+              float:           left;
+              width:           80%;
+              padding-bottom: 1.0em ;
+              //font-size:       90% ;
+              font-weight:     normal;
+
+              p {
+                margin: 0 0 0.6em 0;
+                padding: 0 ;
+              }
+              p:first-child {
+                font-weight: bold ;
+              }
+            }
+          } // /.function-block-header
+
+          .function-block-properties {
+            display: block ;
+            margin: 0 0 0 5.0em;
+            padding: 0 ;
+            overflow: hidden;
+            clear: both;
+            font-size: 9pt;
+            span.label,
+            span.value {
+              float: left;
+            }
+             //vertical adjustment
+            span.label { width: 110px ;}
+            span.value {
+              width: 200px;
+              padding: 0 30px 0 0;
+              margin: 0;
+            }
+            // horizontal adjustment
+//            &.list > div {
+//              width: 300px ;
+//              float: left;
+//              display: inline-block ;
+//              span.label { }
+//              span.value {
+//                padding: 0 30px 0 0;
+//                margin: 0;
+//              }
+//            }
+
+          } // /.function-block-properties
+
+        } // /.function-block-content
+
+
+
+        // --------------------------------------
+        // FUNCTION BLOCKS
+        // --------------------------------------
+
+        .sub-function-block-container {
+          margin: 1.8em 0 0 5.1em;
+          display: block;
 
-.section-empty-description { color: #bbb; }
+          .sub-function-block-header{
+            border-top: 1px solid #ccc;
+            padding: 0.4em 0 0.4em 0.6em ;
+            font-size: 86% ;
+            letter-spacing: 0.2em;
+          }
 
-/* ------------------------------------------------------------ */
-/* Special things that apply to the tree */
-/* ------------------------------------------------------------ */
+          .sub-function-block {
+            border-top: 1px solid #ccc;
+            margin: 0.2em 0 0.2em 0;
+            padding: 0.2em 0 0.4em 0 ;
 
-#tree li.flagged > a > ins {
- background-image: url("../image/flag-red.png") !important;
- background-position: 0;
-}
+            .sub-function-block-content {
+              margin: 0.2em 0 0.2em 0;
+              padding: 0.2em 0.6em 0.4em 0.6em;
 
-/* ------------------------------------------------------------ */
-/* Special things that apply to the context menu */
-/* ------------------------------------------------------------ */
-
-.context-menu-item.icon-flag   { background-image: url("../image/flag-red.png"); }
-.context-menu-item.icon-close  { background-image: url("../image/document-close.png"); }
-.context-menu-item.icon-save   { background-image: url("../image/document-save.png"); }
-.context-menu-item.icon-revert { background-image: url("../image/edit-undo.png"); }
-.context-menu-item.icon-pdf    { background-image: url("../image/application-pdf.png"); }
-.context-menu-item.icon-html   { background-image: url("../image/text-html.png"); }
-.context-menu-item.icon-add-picture { background-image: url("../image/add-picture.png"); }
-.context-menu-item.icon-download    { background-image: url("../image/download.png"); }
-.context-menu-item.icon-renumber    { background-image: url("../image/format-list-ordered.png"); }
-
-/* ------------------------------------------------------------ */
-/* Sections & function blocks */
-/* ------------------------------------------------------------ */
-
-.section {
-  border-left: 0;
-  margin-left: 0;
+              .sub-function-block-header {
+                font-weight: normal;
+                font-size: 120% ;
+                color: @gray-dark;
+                margin-top: 1.0em ;
+              }
+            }
+          }// /.sub-function-block
 
-  .section-header{
-    display: block ;
-    overflow: hidden;
-    width: 90% ;
+        } // /.sub-function-block-container
 
-    .section-description-heading { font-weight: normal; }
+      } // /.function-block
 
-    .section-description {
-      color: #000;
-      margin-bottom: 15px;
-      margin-left: 52px;
-      font-size: 90%;
 
-      div{
-        font-size: 90%;
-        span.label{  }
-      }
-    }
-  }
-  // /.section-header
 
+      // --------------------------------------
+      // FUNCTION BLOCK FORM
+      // --------------------------------------
 
-  .function-block {
-    border-top: 1px solid #bbb;
-    margin: 0.6em 0 0.6em 0 ;
-    padding: 0.8em 0 1.0em 0 ;
-    overflow: hidden;
-    display: block;
+      // Form for creating or editing function blocks
+      .function-block-form {
+        &> div { padding: 0.4em; }
 
-    .function-block-content{
-      overflow: hidden ;
+        input.rs_input_field,
+        select.rs_input_field,
+        table.rs_input_field input[type=text],
+        table.rs_input_field input[type=password],
+        table.rs_input_field select { }
 
-      .function-block-header {
-        clear: both;
-        overflow: hidden;
+      } // /.function-block-form
 
-        .function-block-number {
-          font-weight: bold;
-          width: 5.0em ;
-          display: block;
-          float: left;
-        }
 
-        .function-block-desc {
-          font-weight: normal;
-          float: left;
-          width: 80%;
-          padding-bottom: 1.0em ;
-          font-size: 90% ;
-          p {
-            margin: 0 0 0.6em 0;
-            padding: 0 ;
-          }
-        }
-      } // /.function-block-header
-
-
-      .function-block-properties {
-        display: block ;
-        margin: 0 0 0 6.1em;
-        padding: 0 ;
-        overflow: hidden;
-        clear: both;
-        font-size: 9pt;
-        span.label { width: 110px ;}
-        span.value {
-          width: 200px;
-          padding: 0 30px 0 0;
-          margin: 0;
-        }
+
+      // --------------------------------------
+      // FLAGGED SECTIONS & BLOCKS
+      // --------------------------------------
+
+      //  Flagged sections, function blocks, text blocks
+      .section.flagged .section-description,
+      .function-block.flagged,
+      .sub-function-block.flagged {
+        background-color: @color-blue-light;
       }
-    } // /.function-block-content
+      // Flagged headings or numbers
+      .section.flagged .section-description > .section-description-heading,
+      .function-block.flagged > .function-block-content > div > .function-block-number,
+      .sub-function-block.flagged > .sub-function-block-content > div > .function-block-number {
+        //background-color: #fe5f14;
+        color: @color-blue-strong;
+      }
+
+
 
-    .sub-function-block-container {
-      margin: 1.8em 0 0 72px;
+      // --------------------------------------
+      // SELECTION
+      // --------------------------------------
 
-      .sub-function-block-header{
-        border-top: 1px solid #ccc;
-        padding: 0.4em 0 0.4em 0 ;
-        font-size: 86% ;
-        letter-spacing: 0.2em;
+      //  Selected sections, function blocks, text blocks
+      .section.selected,
+      .function-block.selected,
+      .sub-function-block.selected {
+        margin-left: -3px;
+        border-left: 3px solid #24D115; //   PENDENT: GREEN STRONG
       }
 
-      .sub-function-block {
-        border-top: 1px solid #ccc;
-        margin: 0.2em 0 0.2em 0;
-        padding: 0.2em 0 0.4em 0 ;
+    } // /#column-content
 
-        .sub-function-block-content {
-          margin: 0.2em 0 0.2em 0;
-          padding: 0.2em 0.6em 0.4em 0;
+  } // /#content-column
+
+} // /#column-container
+
+
+.section-empty-description { color: #bbb; }
 
-          .sub-function-block-header {
-            font-weight: normal;
-            font-size: 120% ;
-            color: @gray-mediumdark;
-            margin-top: 1.0em ;
-          }
-        }
-      }// /.sub-function-block
-    } // /.sub-function-block-container
-  } // /.function-block
-} // /.section
 
 
+// --------------------------------------
+//  CONTEXT MENU
+// --------------------------------------
 
+// Have a look on jquery-ui.less
+//.context-menu-item.icon-flag        { background-image: url("../image/flag-red.png"); }
+//.context-menu-item.icon-close       { background-image: url("../image/document-close.png"); }
+//.context-menu-item.icon-save        { background-image: url("../image/document-save.png"); }
+//.context-menu-item.icon-revert      { background-image: url("../image/edit-undo.png"); }
+//.context-menu-item.icon-pdf         { background-image: url("../image/application-pdf.png"); }
+//.context-menu-item.icon-html        { background-image: url("../image/text-html.png"); }
+//.context-menu-item.icon-add-picture { background-image: url("../image/add-picture.png"); }
+//.context-menu-item.icon-download    { background-image: url("../image/download.png"); }
+//.context-menu-item.icon-renumber    { background-image: url("../image/format-list-ordered.png"); }
 
 
-.function-block-form {
-  &> div { padding: 0.4em; }
 
-  input.rs_input_field,
-  select.rs_input_field,
-  table.rs_input_field input[type=text],
-  table.rs_input_field input[type=password],
-  table.rs_input_field select { }
+// --------------------------------------
+// TABWIDGET (Tabs)
+// --------------------------------------
+
+#requirement_spec_tabs{
+  #function-blocks-tab{
+    margin-top: 1.4em ;
+  }
 }
 
 
 
 
-/* Flagged sections, function blocks, text blocks */
 
-.section.flagged .section-description,
-.function-block.flagged,
-.sub-function-block.flagged {
-  //background-color: #feece3;
-}
 
-.section.flagged .section-description > .section-description-heading,
-.function-block.flagged > .function-block-content > div > .function-block-number,
-.sub-function-block.flagged > .sub-function-block-content > div > .function-block-number {
-  //background-color: #fe5f14;
-  color: #fff;
-}
 
-/* Selected sections, function blocks, text blocks */
 
-.section.selected,
-.function-block.selected,
-.sub-function-block.selected {
-  margin-left: -3px;
-  border-left: 3px solid #cbb120;
-}
 
-/* ------------------------------------------------------------ */
-/* Text blocks */
-/* ------------------------------------------------------------ */
+
+// --------------------------------------
+//  Text blocks
+// --------------------------------------
 
 .requirement-spec-text-block {
   border-left: 0;
   margin-left: 3px;
   margin-top: 10px;
-}
 
-.requirement-spec-text-block > h2 { margin-top: 0px; }
+  & > h2 { margin-top: 0px; }
 
-.requirement-spec-text-block.flagged {
-  //background-color: #feece3;
-  /* border: 1px solid #fe5f14; */
-}
+  &.flagged {
+    //background-color: #feece3;
+    //  border: 1px solid #fe5f14;
+    &> h2 {
+      //background-color: #fe5f14;
+      color: #fff;
+    }
+  } // /.flagged
 
-.requirement-spec-text-block.flagged > h2 {
-  //background-color: #fe5f14;
-  color: #fff;
-}
+  &.selected {
+    border-left: 3px solid #cbb120;
+    margin-left: 0;
+  }
 
-.requirement-spec-text-block.selected {
-  border-left: 3px solid #cbb120;
-  margin-left: 0;
 }
 
 .requirement-spec-text-block-picture-thumbnail {
   border-radius: 5px;
-  border: 2px solid #ebebeb;
-  float: left;
-  margin-right: 20px;
-  padding: 5px;
-  text-align: center;
-  width: 130px;
+  border:        2px solid #ebebeb;
+  float:         left;
+  margin-right:  20px;
+  padding:       5px;
+  text-align:    center;
+  width:         130px;
 }
-
 .requirement-spec-text-block-picture-thumbnail-img-container {
-  height: 64px;
-  margin: auto;
+  height:  64px;
+  margin:  auto;
   padding: 0;
-  width: 64px;
+  width:   64px;
 }
-
 .requirement-spec-text-block-picture-thumbnail.selected {
   border: 2px solid #cbb120;
 }
 
-/* ------------------------------------------------------------ */
-/* Time/cost estimation */
-/* ------------------------------------------------------------ */
 
-#time_cost_estimate p {
-  margin-top: 0;
-  margin-bottom: 0;
-}
 
 
-.section{
-  .section-header {
-    .section-context-menu {
-      h3{
-        background-color: #000;
-        color: #000 !important ;
-        span.label { font-weight: normal;}
-      }
-      div.section-description {
-        div{
-          span.label section-description-heading {}
-        }
+// ------------------------------------------------------------
+// TIME/COST ESTIMATION (TABLE)
+// ------------------------------------------------------------
+
+#time_cost_estimate  {
+  p {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  table tbody tr  {
+    td {
+      vertical-align: top ;
+    }
+    td:first-child { width: 66% ; }
+
+    // special rows
+    &.section th {
+      line-height: 2.2em ;
+      //background-color: @brand-standard;
+      color: @brand-superdark ;
+      b {
+        font-size: 116% ;
       }
-      span.label { }
     }
-    #section-list-empty{
-      border: 1px #0C42FF solid ;
-      background-color: #BBCDFF ;
-      padding: 0.6em ;
+    &.subtotal {
+      td, th {
+        font-weight:      bold ;
+        background-color: @gray-standard; // PENDENT: ZEBRA
+        border-top:       1px @brand-superdark solid ;
+        border-bottom:    1px @brand-superdark solid ;
+        text-align:       right;
+      }
     }
   }
-} // /.section
-
-
-
-
+}
 
-.function-block{
-  clear: both;
-  float: none;
-  display: block;
-  border-top: 1px #000 solid;
-  overflow: hidden;
-  margin: 0 0 1.8em 0 ;
-  width: 48em;
 
-  .function-block-content{
 
-    .function-block-header{
-      .function-block-number{
-        font-weight: bold;
-        display: inline-block;
-        float: left;
-        width: 8em ;
-      }
-      .function-block-desc{
-        display: inline-block;
-        overflow: hidden;
-        float: left;
-        width: 39.8em;
-      }
-    } // /..function-block-header
-    .function-block-properties{
-      display: block;
-      clear: left;
-      .label{ float: left;}
-      .value{float: left}
-    } // /..function-block-properties
-    .sub-function-block-container{
-      display: block;
-      margin-top: 1.0 em ;
-      .sub-function-block-header{
 
-      }
-    } // /..sub-function-block-container
-  } // /..function-block-content
-} // /.function-block
 
 
 
 
-#requirement_spec_version{
-  padding: @contentbox-padding;
-}
 
 
 //  --------------------------------------
@@ -363,3 +499,12 @@ div.function-block * table.tbl-horizontal td {
 }
 
 
+
+// --------------------------------------
+// OVERRIDES
+// --------------------------------------
+.jstree-requirement-spec .jstree-clicked {
+  background: @gray-lighter !important;
+  border: 0 !important;
+}
+
diff --git a/css/less/responsive.less b/css/less/responsive.less
index cdd47b44e..0d9e473a5 100644
--- a/css/less/responsive.less
+++ b/css/less/responsive.less
@@ -1,3 +1,6 @@
+/* ------------------------------------------------------------- */
+/* RESPONSIVE (responsive.less)                          */
+/* ------------------------------------------------------------- */
 
 //  --------------------------------------
 //  Medienabfragen und Beruecksichtigungen Plattformen
diff --git a/css/less/scaffolding.less b/css/less/scaffolding.less
index b0515d0b6..ecfa24eaa 100755
--- a/css/less/scaffolding.less
+++ b/css/less/scaffolding.less
@@ -1,3 +1,7 @@
+/* ------------------------------------------------------------- */
+/* SCAFFOLDING (scaffolding.less)                                */
+/* ------------------------------------------------------------- */
+
 // ----------------------------------------------------------------------------
 //
 // SCAFFOLDING (PAGE & PAGE COMPONENTS)
@@ -31,11 +35,12 @@
 
 body {
   margin:           0 ;
-  background-color: @body-bg;
   color:            @brand-primary ;
   font-family:      @font-family-sans-serif;
-  font-size:        @font-size-base ;
+  font-size:        @font-size-smaller ;
 
+//  background-color: @body-bg;
+  .bg-body ;
 
 
   // --------------------------------------
@@ -79,10 +84,11 @@ body {
     display: block;
     z-index: @zindex-actionbar;
     position: fixed;
-    float: left !important;
+    //float: left !important;
+    float: right !important;
     width: auto;
     top: 68px ;
-    left: 656px ;
+    //left: 656px ;
     right: 0.2em ;
     margin: 0 0.4em 0 0;
     padding: 0;
@@ -104,13 +110,23 @@ body {
   // --------------------------------------
   // CONTENT
   // --------------------------------------
-  & > #content {
+  //& > #content {
+  & #content {
     overflow:         hidden;
     display:          block;
     padding:          @content-padding;
     margin:           @content-margin;
+    
+    .bg-content ;
 
 
+    // --------------------------------------
+    // UI-TABS-PANEL
+    // --------------------------------------
+    .ui-tabs-panel {
+       //background-color: @tabs-bg;
+    }
+
 
 
     // --------------------------------------
@@ -121,12 +137,14 @@ body {
       clear:       both;
       display:     block;
       overflow:    hidden;
-      width:       auto;
+      width:       99%;
       height:      auto;
 
-      // --------------
-      // Single Column (DIV or HORIZONTAL TABLE)
-      //
+      
+      // -----------------------
+      // Colums (.col)
+      // -----------------------
+      // Single Column (DIV or HORIZONTAL TABLE .tbl-horizontal)
       & > .col {
         display: block;
         overflow: hidden;
@@ -137,13 +155,20 @@ body {
           line-height: 12.6pt;
         }
         p { font-size: @font-size-small }
-      }
+      } // /.col
+      
       & > .col,
       & > .tbl-horizontal{
         float: left;
         margin-right: 1.6em;
-        padding-bottom: 2px ; // needed to avoid crops of buttons
+        padding-bottom: 2px ; // required to avoid crops of buttons
       }
+//      & > .tbl-horizontal:last-child{
+//        margin-right: 0 !important ;
+//      }
+
+
+      
       // Centered Column
       &.center{
         margin: 0 auto;
@@ -154,18 +179,12 @@ body {
       &.width-moderate{
         width: auto;
       }
-    }
-    // /.wrapper
-
-
-
-    // --------------------------------------
-    // UI-TABS-PANEL
-    // --------------------------------------
-    .ui-tabs-panel {
-       background-color: @tabs-bg;
-    }
-
+      
+      & > table.tbl-horizontal:last-child{
+        margin-right: 0 !important ;
+      }
+      
+    } // /.wrapper
 
   } // /#content
 
diff --git a/css/less/specials.less b/css/less/specials.less
index 22ae200c2..337906cb1 100644
--- a/css/less/specials.less
+++ b/css/less/specials.less
@@ -1,3 +1,8 @@
+/* ------------------------------------------------------------- */
+/* SPECIALS (specials.less)                                      */
+/* ------------------------------------------------------------- */
+
+
 // ----------------------------------------------------------------------------
 //
 // SPECIALS
@@ -22,7 +27,7 @@
   border-width: 0;
   thead{
     th{
-      background-color: #E3E3E3 ; 
+      //background-color: #E3E3E3 ; 
     }
 
   }
@@ -65,40 +70,47 @@
 }
 
 
-//
-// **********************************
-// POSITON DETAILS (E.G. SALES ORDER)
-// **********************************
+
+// --------------------------------------
+// ROW POSITON DETAILS (E.G. SALES ORDER)
+// --------------------------------------
 
 td.row-position-detail{
   padding: 0 0 0.2em 0.4em !important;
   
   div.table{
-    display: table;
+    display:             table;
     div.field{
-      display: table-row;
-      padding: 0.1em 0 ;
-      height: 2.0em !important; ;
+      display:           table-row;
+      padding:           0.1em 0 ;
+      height:           2.0em !important; ;
+      
       span.label{ 
-        width: 10.0em;
-        height: 2.0em !important; 
+        width:           10.0em;
+        height:         2.0em !important; 
         vertical-align: middle;
-        display: table-cell ;
-        padding: 0.3em 0 0 0;
+        display:         table-cell ;
+        padding:         0.3em 0 0 0;
       }
+      
       span.value{
-        height: 2.0em ;
+        height:         2.0em ;
         span.data{ 
-          padding: 0.3em 0 0.2em 0.5em !important;
-          display: block;
+          padding:       0.3em 0 0.2em 0.5em !important;
+          display:       block;
         }
       }
-    }
-  
-  }
+      
+    } //div.field
+  } // /div.table
 
+} // /td.row-position-detail
 
-}
+
+
+// --------------------------------------
+// TABLE #DISPLAY ROW
+// --------------------------------------
 
 table#display_row{
   tbody{
@@ -117,9 +129,3 @@ table#display_row{
 
 } 
 
-
-
-
-
-
-
diff --git a/css/less/style.less b/css/less/style.less
index 5ec0139d6..c23ea1d6e 100755
--- a/css/less/style.less
+++ b/css/less/style.less
@@ -16,79 +16,160 @@
 
 
 
-// Variablen
+// --------------------------------------
+// VARIABLES WITH COLOR SCHEMES
+// --------------------------------------
 // fuer die Anpassung des Erscheinungsbildes
 // in dieser Datei koennen z.b. Farbvarianten eines Themes einfach erstellt werden
-
 // Color Schemes
-//@import 'variables_color_scheme.less' ; // Standard-Farbschema
-//@import 'variables_color.less'; // use it for a  special style
-//@import 'variables_color_1.less'; // use it for a  special style
-@import 'variables_color_2.less'; // use it for a  special style
+@import 'variables_color_style.less' ;  // Standard color scheme
+
+
+
 // Standard-Variables
 @import 'variables.less';
 
-// Your custom LESS variables (new or overrides of the previous LESS variable stuff)
-@import 'custom_variables.less';
 
-// Basic Settings
-@import 'common.less';
+// -----------------------
+// Custom LESS variables
+// -----------------------
+// Your custom LESS variables
+// (new or overrides of the previous LESS variable stuff)
+@import 'custom_less_variables.less';
 
 
-// Mixins (general & sitewide properties)
-// IMPORTANT: edit this properties right after variables.less
+
+// --------------------------------------
+// MIXINS
+// --------------------------------------
+// Mixins are unique CSS-templates in shape of CSS-classes
+// Mixins are general & sitewide properties
 @import 'mixins.less' ;
 
+
+
+// --------------------------------------
+// BASIC SETTINGS & MIXINS
+// --------------------------------------
+@import 'common.less';
+
+
+
+// --------------------------------------
+// SCAFFOLDING (IN GERMAN GERUEST)
+// --------------------------------------
 // Main areas and main boxes of the Kivitendo Webpage
+// In general Layout of the page
 @import 'scaffolding.less';
 
-// jQuery Stuff
-@import 'jquery-ui.less'; // jQuery-UI
-// Original Standard jQuery Stuff (no overrides, )
-@import 'jquery.autocomplete.less';
-@import 'jquery.multiselect2side.less';
-@import 'jquery.tooltipster.less';
-@import 'jquery.tooltipster-light.less';
-// Special jQuery Stuff
-@import 'jquery.chartpicker.less';
-// Overrides of all jquery stuff above
-@import 'jquery-ui_overrides.less';
 
-// Standard Kivitendo CSS_Stuff
-@import 'main.less';
-@import 'main_login.less';
-// Menus
-@import 'menu.less';
-@import 'menu_actionbar.less';
+
+
+// FORMER POSITION OF STANDARD HTML-ELEMENTS IN KIVITENDO (SEE BELOW)
+
+
+
+
+// --------------------------------------
+// MENUS
+// --------------------------------------
 @import 'menu_frame_header.less'; // Quick_Search, User/Mandatory, Logout
+@import 'menu.less'; // All kind of menus
+@import 'menu_actionbar.less';
+
 
-// Content
+
+// --------------------------------------
+// CONTENT
+// --------------------------------------
 // Every HTML Stuff within the Element #content
+@import 'forms.less';
 @import 'messages.less';
 @import 'tables.less';
 @import 'lists.less';
-@import 'forms.less';
 @import 'buttons.less';
 @import 'control_panels.less';
 
-@import 'requirement_spec.less'; // Stupid non_generic stuff
+
+
+// --------------------------------------
+// STANDARD HTML-ELEMENTS IN KIVITENDO
+// --------------------------------------
+@import 'main.less';
+@import 'main_login.less';
+
+
+
+
+// -----------------------
+// NON GENERIC STUFF
+// -----------------------
+@import 'requirement_spec.less'; //
 @import 'specials.less';
 
+
+
+
+// --------------------------------------
+// JQUERY STUFF
+// --------------------------------------
+@import 'jquery-ui.less'; // jQuery-UI
+// Original Standard jQuery Stuff (no overrides, )
+@import 'jquery.autocomplete.less';
+@import 'jquery.multiselect2side.less';
+@import 'jquery.tooltipster.less';
+//@import 'jquery.tooltipster-light.less';
+// Special jQuery Stuff
+@import 'jquery.chartpicker.less';
+
+
+
+
+// --------------------------------------
+// OVERRIDES
+// --------------------------------------
 // General overrides from the settings above
 @import 'main_overrides.less';
+// Overrides of all jquery stuff above
+@import 'jquery-ui_overrides.less';
 
-// Admin_Stuff (Overrides)
+// -----------------------
+// Admin (Overrides)
+// -----------------------
 @import 'admin.less';
 
-// div. (necessary???)
-@import 'icons16.less';
 
+
+
+// --------------------------------------
+// Responsive & Print
+// --------------------------------------
 // Responsive & Print Stuff
 @import 'responsive.less';
 @import 'print.less';
 
-// Your personal custom LESS stuff
+
+
+// --------------------------------------
+// CUSTOM LESS STUFF
+// --------------------------------------
+// Place in this file your own LESS or CSS stuff
+// This will override all the stuff above
 @import 'custom.less';
 
-// Developer stuff (don't hesitate to disable this')
+
+
+// --------------------------------------
+// DEVELOPER STUFF
+// --------------------------------------
+// (don't hesitate to disable this')
 @import 'developing.less';
+
+
+
+
+// --------------------------------------
+// DEPRACATED STUFF
+// --------------------------------------
+// PENDENT: (necessary???)
+@import 'icons16.less';
diff --git a/css/less/tables.less b/css/less/tables.less
index 1cfdedd1e..86e30e5e7 100755
--- a/css/less/tables.less
+++ b/css/less/tables.less
@@ -1,66 +1,75 @@
-//  ----------------------------------------------------------------------------
+/* ------------------------------------------------------------- */
+/* tables (tables.less)                                          */
+/* ------------------------------------------------------------- */
+
+//----------------------------------------------------------------------------
 //
-//  TABLES
+//  tables
 //
-//  ----------------------------------------------------------------------------
-//  DESCRIPTION: for all kind of tables in #content
+//----------------------------------------------------------------------------
+//  description: for all kind of tables in #content
 //
-//  CONTENTS:
-//  - MIXINS
+//  contents:
 //  - TABLE
 //  - CELLS (TD & TH)
-//    - Data Format
-//    - Images within Cells
+//    - Data format
+//    - Headings (within TD & TH)
+//    - Links (within TD & TH)
+//    - Images within cells
+//    - Description & labels within cells
 //    - TD
 //    - TH
-//    - TR (Table Row)
-//  - THEAD
-//  - TBODY
-//  - TFOOT
-//  - CAPTION
-//  - HEADINGS (Print Style)
-//  - COLGROUP & COLS
-//    - Dimensions for Table Colums (COL)
-//  - TABLE LIST
-//  - TABLE PLAIN
-//  - TABLE HORIZONTAL
-//  - TABLE DIALOG
-//  - TABLE CLASS TEST
-//  - DIMENSIONS (Classes) FOR TABLES
-//  - LINKS
-//  - HEADINGS
-//  - SUBTOTALS
+//    - TR (Table row)
+//  - thead
+//  - tbody
+//  - tfoot
+//  - caption
+//  - headings (print style)
+//  - colgroup & cols
+//    - dimensions for table colums (col)
+//  - table list
+//  - table plain
+//  - table horizontal
+//  - table dialog
+//  - table class test
+//  - dimensions (classes) for tables
+//  - links
+//  - headings
+//  - subtotals
 //
-//  - TABLES in Requirement Specs
-//  - TABLES with DIVS
-//  - LIST WITH PARAGRAPHS
-//  ----------------------------------------------------------------------------
+//  - tables in requirement specs
+//  - tables with divs
+//  - list with paragraphs
+//----------------------------------------------------------------------------
 
 
-//  --------------------------------------
-//  TABLE
-//  --------------------------------------
 
+// ----------------------------------------------------------------------------
+//
+// TABLE
+//
+// ----------------------------------------------------------------------------
+//
 table {
-  font-size: @font-size-base ;
+  //font-size: @font-size-base ;
   table-layout: auto ;
   border-spacing: 1px ;
 
 
-  //  --------------------------------------
+  //--------------------------------------
   //  CELLS (TD & TH)
-  //  --------------------------------------
+  //--------------------------------------
   td,
   th {
     text-align: left ;
     vertical-align: top ;
-    font-size: @font-size-smaller ;
+    //font-size: @font-size-smaller ;
     font-weight: normal ;
 
 
-    //  --------------
-    //  Data format
-    //
+    // -----------------------
+    //  Data Format
+    // -----------------------
     &.right             { text-align:      right  !important ; }
     &.center            { text-align:      center !important ;
       input             { float:           none   !important ; }
@@ -73,18 +82,36 @@ table {
     &.img               { text-align:      center !important ; }
     &.top               { vertical-align:  top    !important ; }
     // see also div.longdesc in main.css
-    // PENDENT: Mixin und Variablen erstellen
+    // PENDENT: mixin und variablen erstellen
     &.long-desc,
     &.long-description,
     &.longdesc,
-    &.longdescription {
+    &.longdescription,
+    div.description {
       font-size: 80% ;
-      color: @t-cell-head-text ;
+      color: @t-cell-label-text ;
     }
     &.highlight { background-color: @t-row-zebra-bg-highlight ; }
-    //  --------------
-    //  Images within Cells
-    //
+
+
+    // -----------------------
+    //  Headings (within TD & TH)
+    // -----------------------
+    // PENDENT: ueberpruefen
+    h3,
+    h4 {
+      margin: 0 !important ;
+      padding: 0.8em 0 0.2em 0 !important ;
+    }
+
+    // -----------------------
+    //  Links (within TD & TH)
+    // -----------------------
+    &> a { display: block ; }
+
+    // -----------------------
+    //  Images Within Cells
+    // -----------------------
     img {
       display:        inline ;
       vertical-align: top    ;
@@ -94,13 +121,10 @@ table {
     &~a img,
     &~img { float:    right  ; }
 
-
-    //  --------------
-    //  Description & labels within cells
-    //
+    // -----------------------
+    //  Description & Labels Within Cells
+    // -----------------------
     div.description {
-      font-size: 90% ;
-      color:     @t-cell-head-text ;
       float:     none ;
       clear:     both ;
     }
@@ -110,11 +134,11 @@ table {
     }
 
     span {
-      // simulates TH in horizontal tables
+      // simulates th in horizontal tables
       &.label {
         display:              block ;
         padding:              0 0 0.5em 0 ;
-        color:                @brand-data-label-color ;
+        color:                @t-cell-th-text-color ;
       }
       &.below {
         //clear: both ;
@@ -134,11 +158,15 @@ table {
       }
     }
 
+    // -----------------------
+    //  Form Element Within Cells
+    // -----------------------
 
+    // if a .below class follows directly after a td/th
+    & + input.below {
+      margin: 0 !important;
+    }
 
-    //  --------------
-    //  Form Element within Cells
-    //
     input,
     select {
       //float: left ;
@@ -147,9 +175,11 @@ table {
         clear: left ;
         float: none ;
         overflow: hidden ;
-        margin: 0.3em 0 0 0 !important ;
+        // PENDENT: anschauen! vor allem button customer information -> Lieferadresse
+        margin: 0.3em 0 0 0 ;
       }
     }
+
     textarea {
       margin: -0.14em -0.0em ;
     }
@@ -158,31 +188,31 @@ table {
   //  /th, td
 
 
-  //  --------------
-  //  TH (Table Header Cells)
-  //
+  //--------------------------------------
+  //  TH (TABLE HEADER CELLS)
+  //--------------------------------------
   th {
     white-space: normal !important ;
   }
 
-  //  --------------
-  //  TD (Table Data)
-  //
+  //--------------------------------------
+  //  TD (TABLE DATA)
+  //--------------------------------------
   td {
-    color: @gray-mediumdark;
+    color: @t-cell-text-color;
   }
 
 
-  //  --------------
-  //  TR
-  //
+  //--------------------------------------
+  //  TR (TABLE ROW)
+  //--------------------------------------
   tr {
-    //  if header-cell is in the same row as a caption-header-cell (TH.CAPTION)
+    //  if header-cell is in the same row as a caption-header-cell (th.caption)
     &.header-caption th {
       vertical-align: bottom ;
     }
     &.separator {
-      // Standard separator is below
+      // standard separator is below
       th, td {
         padding-bottom: 3.0em ;
       }
@@ -198,15 +228,58 @@ table {
         }
       }
     }
+
+    // -----------------------
+    //  SUB-TOTALS
+    // -----------------------
+    //  PENDENT: ggf. obsolete
+    &.total-sub {
+      height: 2.0em ;
+
+      td {
+        border-top: 1px solid @table-border-color ;
+        border-bottom: 2px solid @table-border-color ;
+        font-weight: bold ;
+        color: @t-cell-text-color ;
+      }
+    }
+
+    // -----------------------
+    //  HEADINGS (alternativ version [print style])
+    // -----------------------
+    // PENDENT: ueberpruefen
+    &.heading th {
+      font-size: 120% ;
+      border-top: 1px @table-border-color solid ;
+    }
+
+
+  } // /tr
+
+
+
+  //--------------------------------------
+  //  CAPTION
+  //--------------------------------------
+
+  //  this must be placed here
+  //  otherwise th.caption will be overridden if placed above
+  caption,
+  th.caption {
+    .mx-h3-caption ; //   mixin
+    white-space:       nowrap ;
+    //  addition with smaller font-size
+    small { font-size : @font-size-small ; }
   }
 
 
-  //  --------------------------------------
+
+  //--------------------------------------
   //  THEAD
-  //  --------------------------------------
+  //--------------------------------------
   thead {
     th {
-      .mx-thead-th ; //  Mixin
+      .mx-thead-th ; //  mixin
 
       a {
         img {
@@ -219,22 +292,22 @@ table {
   }
 
 
-  //  --------------------------------------
+  //--------------------------------------
   //  TBODY
-  //  --------------------------------------
+  //--------------------------------------
 
   tbody {
     tr {
-      //  common cells within TBODY
+      //  common cells within tbody
       td {  }
       th {  }
     }
   }
 
 
-  //  --------------------------------------
+  //--------------------------------------
   //  TFOOT
-  //  --------------------------------------
+  //--------------------------------------
   tfoot {
     tr {
       th,
@@ -242,6 +315,8 @@ table {
         vertical-align: middle ;
         border-bottom: @table-border-color 2px solid ;
         height: 1.8em ;
+        padding-top: 0.6em !important;
+        padding-bottom: 0.6em !important;
       }
       td {
         font-weight: bold ;
@@ -251,7 +326,7 @@ table {
         font-weight: normal ;
         color: @t-cell-foot-text ;
        }
-      //  if more than one row in TFOOT first row has other properties
+      //  if more than one row in tfoot first row has other properties
       &:first {
         td,
         th { border-top: @table-border-color 2px solid ; }
@@ -265,7 +340,7 @@ table {
         }
       }
     } //  /tr
-    // This is just for expecption (eg. form in price-rules)
+    // this is just for expecption (eg. form in price-rules)
     // tfoot.blank
     &.blank {
       tr {
@@ -279,54 +354,27 @@ table {
         }
       }
     } // /tfoot.blank
-  } //  /TFOOT
-
-
-  //  --------------------------------------
-  //  CAPTION
-  //  --------------------------------------
-
-  //  this must be placed here
-  //  otherwise th.caption will be overridden if placed above
-  caption,
-  th.caption {
-    background-color:  @table-caption-bg ;
-    white-space:       nowrap ;
-    .mx-h3-caption ; //   Mixin
-    //  Addition with smaller font-size
-    small { font-size : @font-size-small ; }
-    margin: 0.1em 0 0.4em 0 ;
-  }
+  } //  /tfoot
 
 
-  //  --------------------------------------
-  //  HEADINGS
-  //  --------------------------------------
 
-  //  alternativ Version (Print style)
-  tr.heading th {
-    font-size: 120% ;
-    border-top: 1px @table-border-color solid ;
-  }
-
-
-  //  --------------------------------------
+  //--------------------------------------
   //  COLGROUP & COLS
-  //  --------------------------------------
+  //--------------------------------------
 
   colgroup {
 
-    //  Table Columns
+    //  table columns
     //  only for background-color and width
-    //   PENDENT: funktioniert Text-Ausrichtung?
+    //  PENDENT: funktioniert text-ausrichtung?
     col {
       &.right     { text-align: right  ; }
       &.center    { text-align: center ; }
       &.long-desc { font-size:  70%    ; }
 
-      //  --------------
-      //  Width of Columns (Dimensions)
-      //
+      // -----------------------
+      //  width of columns (dimensions)
+      // -----------------------
       &.wi-smallest    { width: (@tcol-wi-smallest    ) ; }
       &.wi-verysmall   { width: (@tcol-wi-verysmall   ) ; }
       &.wi-small       { width: (@tcol-wi-small       ) ; }
@@ -341,162 +389,36 @@ table {
 
   }
 
-  //  --------------------------------------
-  //  TABLE LIST (vertical)
-  //  --------------------------------------
-  //  Table with Zebra Effect
-  //  This table has at least a THEAD and a TBODY
-  //  Optional a TFOOT for Totals
-  &.tbl-list {
-    border-spacing:       1px ;
-    border-collapse:      collapse ;
-    margin:               0 0 1.0em 0 ;
-
-    & > caption { margin: 0.1em 0 0.0em 0 ; }
-    td,
-    th {
-      padding:            0.2em 0.4em ;
-      white-space:        normal ;
-      vertical-align:     middle ;
-    }
-    th {  }
-    td {  }
-
-    // space left from window border
-    & > thead > tr th:first-child,
-    & > tbody > tr th:first-child,
-    & > tfoot > tr td:first-child {
-        padding-left:     0.8em !important ;
-    }
-    thead {
-      tr {
-        height:           2.2em ;
-        th {
-          .mx-thead-th ; // Mixin
-          &.nowrap { white-space: nowrap  !important ; }
-
-          & > a {
-            display: block ;
-            //margin-top: -2px ;
-            &:link,
-            &:visited {
-              color: @t-cell-head-text-accent ;
-              text-decoration: none ;
-            }
-            &:hover {
-              color: @t-cell-head-text-accent ;
-              text-decoration: underline ;
-            }
-            &:active,
-            &:focus {
-              color: @t-cell-head-text-accent ;
-              text-decoration: underline ;
-            }
-          } // /a
-        } // /th
-      } // tr
-      &.links-condensed {
-        tr th a { display: inline ; }
-      }
-    } // /thead
-
-    tbody {
-      border-bottom:       @table-border-color 1px solid ;
-      // zebra effect
-      tr:nth-child(odd){   background-color:   @t-row-zebra-bg-odd  ; }
-      tr:nth-child(even){  background-color:   @t-row-zebra-bg-even ; }
-      // PENDENT: funktioniert nicht
-      & > tr:last-child > td {
-        border-bottom:   1px @table-border-color solid !important ;
-        //padding-left:    0.8em !important;
-      }
-      tr:hover {            background-color:   @t-row-zebra-bg-hover ; }
-      tr.listrow_error {    background-color:   @brand-error-bg !important          ; }
-      td {
-        color: @brand-darkest ;
-      }
-    } // /tbody
-
-    tfoot {
-      tr {
-        th,
-        td { }
-      }
-    } // /tfoot
-
-  } // /.tbl-list
-
 
 
 
-  //  --------------------------------------
-  //  TABLE PLAIN
-  //  --------------------------------------
-
-  //  Simple Table without Zebra Effect
-
-  &.tbl-list-plain,
-  &.tbl-plain {
-    caption,
-    th.caption { font-size: 80% !important ; }
+  //--------------------------------------
+  //  STANDARD KIVITENDO TABLES
+  //--------------------------------------
 
-    thead,
-    tbody {
-      th,
-      td { padding: 3px 0.3em 4px 0.3em !important ; }
-    }
-    thead {
-      th {
-        .mx-thead-th ; // mixin
-      }
-    }
+  &.tbl-horizontal,
+  &.tbl-plain,
+  &.tbl-list,
+  &.tbl-list-plain {
+    margin-bottom: 0.6em ;
+    border-collapse: collapse ;
+    border: none ;
 
-    tr {
-      th,
-      td { padding: 0.3em inherit 0.3em 0.3em ; }
-      td { }
-      th { }
-    }
-    // kompakt
-    &.condensed {
-      caption { padding-left: 0 ; }
-      td, th {
-        padding-right: 7px ;
-        padding-left:  1px ;
-      }
-    }
-    // liniert
-    &.lined {
-      tr {
-        border-bottom: 1px @table-border-color solid ;
-        & > th,
-        & > th {
-          vertical-align: middle !important ;
-        }
+    tr td {
+      &>span {
+        //padding: 0.3em 0.3em 0.6em 0.3em ;
+        padding: 0.3em 0.3em 0.6em 0 ;
       }
     }
+  }
 
-  } // /.tbl-plain
-
-
-  &.tbl-list-plain {
-    thead th {
-      border-top:    1px @table-border-color solid !important ;
-      border-bottom: 1px @table-border-color solid ;
-      font-weight:   bold ;
-    }
-    tbody {
-      td,
-      th { border-bottom: 1px @table-border-color solid ; }
-    }
-  }// /.tbl-list-plain
 
 
 
 
-  //  --------------------------------------
+  //--------------------------------------
   //  TABLE HORIZONTAL
-  //  --------------------------------------
+  //--------------------------------------
 
   &.tbl-horizontal {
 
@@ -508,7 +430,7 @@ table {
       padding-bottom: 0.2em ;
       padding-left: 0.3em ;
 
-      // Adjust Form Elements in this table type
+      // adjust form elements in this table type
       &>input[type="checkbox"],
       &>input[type="radio"] {
         margin: 0.2em 0.3em 0 0 !important ;
@@ -516,29 +438,36 @@ table {
       &>input,
       &>select {
         margin: -0.3em 1px 0 0 ;
-        // if there are further form elements within a table cell separated with a Linebreak BR
+        // if there are further form elements within a table cell separated with a linebreak br
         &.addition { margin-top: 0.3em !important ; }
       }
 
-      // In some cases labels can be placed within the same cell as the form element
+      // in some cases labels can be placed within the same cell as the form element
       // best is to have it above the element
-      // PENDENT: Plazierung in LESS-Dateien
+      // PENDENT: plazierung in less-dateien, ggf. ueberfluessig
       .label-above {
         display: block ;
         clear: both ;
         overflow: hidden ;
-        margin-top: -0.5em ; // PENDENT: ansehen
-        //height: 1.8em ; // PENDENT: besser loesen, gefaellt mir nicht
+        margin-top: -0.5em ; // pendent: ansehen
+        //height: 1.8em ; // pendent: besser loesen, gefaellt mir nicht
       }
       &.single-col {
         padding-top: 0 ;
         padding-bottom: 0 ;
       }
+
+      // form labels within table cells
+      label {
+        //color: @t-cell-th-text-color ;
+        //cursor: pointer ;
+      }
+
     } // /td /th
 
     th {
-      color: @brand-data-label-color ;
-      vertical-align: top ;
+      color: @t-cell-th-text-color ;
+      //vertical-align: top ;
       & > a {
         &:link,
         &:visited {
@@ -559,9 +488,9 @@ table {
     td {
       // 2nd to x column with plain data
       // no form elements inside the cell
-      color: @t-cell-data-text;
+      //color: @t-cell-data-text;
       &.data {
-        padding: 0.4363em 0.3em 0.4363em 0.3em ;
+        //padding: 0.4363em 0.3em 0.4363em @padding-databoxes-left ;
       }
 
       & > span {
@@ -579,13 +508,14 @@ table {
 
         &.data,
         &.plain-data {
-          padding:        0.1em 0.3em 0.1em 0.2em ;
+          //padding:        0.1em 0.3em 0.1em @padding-databoxes-left ;
           margin-top:    -0.2em ;
           display:        block ;
         }
         &.label {
+          color:          @t-cell-th-text-color ;
           padding:        0 0.3em 0.5em 0 !important ;
-          display:        block ;
+          //display:        block ;
         }
         &.button-inline {
           margin:         0 !important ;
@@ -603,15 +533,16 @@ table {
           }
         }
 
-        // Special Select-Element
+        // special select-element
         &.customer_vendor_picker {
-          padding-left:   0 !important ;
+          padding:         0 !important ;
+          margin:          0 !important ;
           display:        inline-block ;
         }
         &.project_picker {
           margin:        -0.3em 0 0 0 ;
         }
-        // Switch form element
+        // switch form element
         &.switch-form-element {
           padding:        0 !important ;
           margin:        -0.3em 1px 0 0 !important ;
@@ -619,8 +550,8 @@ table {
       } // / > span
 
       &>div.data { padding: 0.1363em 0 ; }
-      // PENDENT: braucht es das?
-      // PENDENT: span nicht td
+      // pendent: braucht es das?
+      // pendent: span nicht td
       .plus1 {
         display: inline-block ;
         padding: 0 ;
@@ -636,26 +567,29 @@ table {
       &>span.wi-small-wide { margin: 0 24px 0 0 ; display: block ; }
     }
 
-    // Exception: Thead in horizontal table
+    // exception: thead in horizontal table
+    // Caption!
     thead th {
-      padding: 0.5em 0.4em 0.5em 0.3em ;
-      font-weight: bold ;
-      color: @t-cell-head-text ;
+//      padding: 0.5em 0.4em 0.5em 0.3em ;
+//      font-weight: normal ;
+//      font-size: @h3-size ;
+//      color: @brand-heading-color ;
+      .mx-h3-caption ;
       border: none ;
     }
 
 
-    // Zebra effect
-    // PENDENT: Klasse .zebra wahrscheinlich kaum eingsetzt
+    // zebra effect
+    // pendent: klasse .zebra hier wahrscheinlich kaum eingsetzt
     &.zebra {
       tbody {
         tr:nth-child(odd){
-          background-color: @gray-lighter ;
-          th { background-color: #fff ; }
+          background-color: @t-row-zebra-bg-odd ;
+          th { background-color: @t-row-zebra-bg-odd  ; }
         }
         tr:nth-child(even){
-          background-color: @gray-verylight ;
-          th { background-color: #fff ; }
+          background-color: @t-row-zebra-bg-even ;
+          th { background-color: @t-row-zebra-bg-even ; }
         }
       }
     } // /.zebra
@@ -665,216 +599,268 @@ table {
       border-collapse: collapse ;
       tbody {
         tr {
-          background-color: #F3F3F3 ;
+          background-color: @table-bg-accent ;
           //th { background-color: #fff ; }
           td, th {
-            border-color: @table-border-color ;
-            border-width: 1px ;
-            border-style: solid ;
-            padding: 0.3em 0.6em ;
+            border-color:   @table-border-color ;
+            border-width:   1px ;
+            border-style:   solid ;
+            padding:         0.3em 0.6em ;
           }
         }
-      }
-    } // /.zebra
-
-  } // /.tbl-horizontal
-
+      } // /tbody
+    } // /.checkered
 
+    //PENDENT: ueberpruefen
+    &.expanded {
+      th.caption { padding-top: 1.2em ; padding-bottom: 0.6em ; }
+    }
 
-  //  --------------------------------------
-  //  STANDARD KIVITENDO TABLES
-  //  --------------------------------------
-  &.tbl-horizontal,
-  &.tbl-plain,
-  &.tbl-list {
-    margin-bottom: 0.6em ;
-    border-collapse: collapse ;
-    border: none ;
+  } // /.tbl-horizontal
 
-    tr td {
-      &>span {
-        padding: 0.3em 0.3em 0.6em 0.3em ;
-      }
-    }
-  }
 
-  &.tbl-horizontal.expanded {
-    th.caption { padding-top: 1.2em ; padding-bottom: 0.6em ; }
-  }
 
 
 
-  //  --------------------------------------
-  //  TABLE DIALOG
-  //  --------------------------------------
+  //--------------------------------------
+  //  LIST TABLES
+  //--------------------------------------
 
-  //  Table within DIV-Dialogs
-  &.tbl-dialog {
-    th,
-    td {
-      background-color: @gray-verylight ;
-    }
-    th {
-      color: @t-cell-head-text ;
-      font-size: @font-size-base ;
-      vertical-align: top ;
+  &.tbl-plain,
+  &.tbl-list,
+  &.tbl-list-plain {
+    tbody td a {
+      display: inline-block !important ;
     }
   }
 
 
-  //  --------------------------------------
-  //  CLEAR-TABLE WITH NO FLOATING
-  //  --------------------------------------
-  &.clear {
-    float: none ;
-    clear: both ;
-  }
 
 
-  //  --------------------------------------
-  //  DIMENSIONS (Classes) FOR TABLES
-  //  --------------------------------------
 
-  &.width-full,
-  &.full-width,
-  &.wi-full { width: 100% ; }
+  //--------------------------------------
+  //  TABLE LIST (VERTICAL)
+  //--------------------------------------
+  //  table with zebra effect
+  //  this table has at least a thead and a tbody
+  //  optional a tfoot for totals
+  &.tbl-list {
+    border-spacing:       1px ;
+    border-collapse:      collapse ;
+    margin:               0 0 1.0em 0 ;
 
-  //  moderate width with padding on the right side
-  &.width-moderate,
-  &.moderate-width,
-  &.wi-moderate {
-    width: auto ;
+    & > caption { margin: 0.1em 0 0.0em 0 ; }
     td,
     th {
-      // PENDENT: vielleicht in Pixeln angeben, statt in EMs (siehe tbl-plain)
-      padding-left: 0.6em ;
-      padding-right: 1.2em ;
+      padding:            0.2em 0.4em ;
+      white-space:        normal ;
+      vertical-align:     middle ;
     }
-  }
+    th {  }
+    td {  }
 
+    // space left from window border
+    & > thead > tr th:first-child,
+    & > tbody > tr th:first-child,
+    & > tfoot > tr td:first-child {
+        padding-left:     0.8em !important ;
+    }
 
-  &.wi-smallest    { width: @tcol-wi-smallest     ; }
-  &.wi-verysmall   { width: @tcol-wi-verysmall    ; }
-  &.wi-small       { width: @tcol-wi-small        ; }
-  &.wi-mediumsmall { width: @tcol-wi-mediumsmall  ; }
-  &.wi-normal      { width: @tcol-wi-normal       ; }
-  &.wi-lightwide   { width: @tcol-wi-lightwide    ; }
-  &.wi-wide        { width: @tcol-wi-wide         ; }
-  &.wi-wider       { width: @tcol-wi-wider        ; }
-  &.wi-verywide    { width: @tcol-wi-verywide     ; }
+    thead {
+      display: table-header-group;
 
+      tr {
+        height:  2.2em ;
+        th {
+          .mx-thead-th ; // mixin
+          &.nowrap { white-space: nowrap !important ; }
 
+          & > a {
+            display: block ;
+            &:link,
+            &:visited {
+              color:              @t-cell-head-text-accent ;
+              text-decoration:    none ;
+            }
+            &:hover {
+              color:              @t-cell-head-text-accent ;
+              text-decoration:    underline ;
+            }
+            &:active,
+            &:focus {
+              color:              @t-cell-head-text-accent ;
+              text-decoration:    underline ;
+            }
+          } // /a
+          label {
+              color:              @t-cell-head-text-accent ;
+              //text-decoration:  none ;
+              &:hover {
+                //color:          @t-cell-head-text-accent ;
+                text-decoration:  underline ;
+              }
+          }
+        } // /th
+      } // tr
+      &.links-condensed {
+        tr th a { display: inline ; }
+      }
+    } // /thead
 
-  &.wi-small-small           { width: @tcol-wi-small + @tcol-wi-small ; }
-  &.wi-small-mediumsmall     { width: @tcol-wi-small + @tcol-wi-mediumsmall ; }
-  &.wi-small-normal          { width: @tcol-wi-small + @tcol-wi-normal ; }
-  &.wi-small-lightwide       { width: @tcol-wi-small + @tcol-wi-lightwide ; }
-  // PENDENT: noch genauer anschauen, sollte eigentlich nur für horizontale Tabellen vorgesehen sein
-  &.wi-small-wide            { width: @tcol-wi-small + @tcol-wi-wide + ( @diff-input-select )  ; }
-  //&.wi-small-wide            { width: 460px ; }
-  &.wi-small-wider           { width: @tcol-wi-small + @tcol-wi-wider ; }
-  &.wi-small-verywide        { width: @tcol-wi-small + @tcol-wi-verywide ; }
+    tbody {
+      border-bottom:        @table-border-color 1px solid ;
+      display:              table-row-group;
 
-  &.wi-mediumsmall-small       { width: @tcol-wi-mediumsmall + @tcol-wi-lightwide ; }
-  &.wi-mediumsmall-mediumsmall { width: @tcol-wi-mediumsmall + @tcol-wi-mediumsmall ; }
-  &.wi-mediumsmall-normal      { width: @tcol-wi-mediumsmall + @tcol-wi-normal ; }
-  &.wi-mediumsmall-lightwide   { width: @tcol-wi-mediumsmall + @tcol-wi-lightwide ; }
-  &.wi-mediumsmall-wide        { width: @tcol-wi-mediumsmall + @tcol-wi-wide ; }
-  &.wi-mediumsmall-wider       { width: @tcol-wi-mediumsmall + @tcol-wi-wider ; }
-  &.wi-mediumsmall-verywide    { width: @tcol-wi-mediumsmall + @tcol-wi-verywide ; }
+      // zebra effect
+      tr:nth-child(odd) {   background-color:   @t-row-zebra-bg-odd  ; }
+      tr:nth-child(even){   background-color:   @t-row-zebra-bg-even ; }
+      // pendent: funktioniert nicht
+      & > tr:last-child > td {
+        border-bottom:      1px @table-border-color solid !important ;
+        //padding-left:     0.8em !important;
+      }
+      tr:hover {            background-color:   @t-row-zebra-bg-hover ; }
+      tr.listrow_error {    background-color:   @brand-error-bg !important ; }
 
-  &.wi-normal-small       { width: @tcol-wi-normal + @tcol-wi-small ; }
-  &.wi-normal-mediumsmall { width: @tcol-wi-normal + @tcol-wi-mediumsmall ; }
-  &.wi-normal-normal      { width: @tcol-wi-normal + @tcol-wi-normal ; }
-  &.wi-normal-lightwide   { width: @tcol-wi-normal + @tcol-wi-lightwide ; }
-  &.wi-normal-wide        { width: @tcol-wi-normal + @tcol-wi-wide ; }
-  &.wi-normal-wider       { width: @tcol-wi-normal + @tcol-wi-wider ; }
-  &.wi-normal-verywide    { width: @tcol-wi-normal + @tcol-wi-verywide ; }
+      td, th {
+        color:              @table-list-zebra-text-color ;
+        a,
+        a:link,
+        a:visited { color:  @table-list-zebra-link-color ;
+        }
+      }
+    } // /tbody
 
-  &.wi-lightwide-small       { width: @tcol-wi-lightwide + @tcol-wi-small ; }
-  &.wi-lightwide-mediumsmall { width: @tcol-wi-lightwide + @tcol-wi-mediumsmall ; }
-  &.wi-lightwide-normal      { width: @tcol-wi-lightwide + @tcol-wi-normal ; }
-  &.wi-lightwide-lightwide   { width: @tcol-wi-lightwide + @tcol-wi-lightwide ; }
-  &.wi-lightwide-wide        { width: @tcol-wi-lightwide + @tcol-wi-wide ; }
-  &.wi-lightwide-wider       { width: @tcol-wi-lightwide + @tcol-wi-wider ; }
-  &.wi-lightwide-verywide    { width: @tcol-wi-lightwide + @tcol-wi-verywide ; }
+    tfoot {
+      display: table-footer-group;
 
+      tr {
+        th,
+        td { }
+      }
+    } // /tfoot
 
+  } // /.tbl-list
 
 
-  //  --------------------------------------
-  //  LINKS (within TD & TH)
-  //  --------------------------------------
 
-  td > a,
-  th > a {
-    display: block ;
-  }
 
 
+  //--------------------------------------
+  //  TABLE PLAIN
+  //--------------------------------------
+  //  simple table without zebra effect
 
-  //  --------------------------------------
-  //  HEADINGS (within TD & TH)
-  //  --------------------------------------
+  &.tbl-list-plain,
+  &.tbl-plain {
+    caption,
+    th.caption {
+      font-size:  120% !important ;
+      margin:     0;
+      padding:    0.6em 0 0.2em 0;
+    }
 
-  td,
-  th {
-    h3,
-    h4 {
-      margin: 0 !important ;
-      padding: 0.8em 0 0.2em 0 !important ;
+    thead,
+    tbody {
+      th,
+      td { padding: 3px 0.3em 4px 0.3em !important ; }
     }
-    h4 {
-        //font-weight: normal ;
+    thead {
+      th {
+        .mx-thead-th ; // mixin
+      }
     }
-  }
 
+    tr {
+      th,
+      td { padding: 0.3em inherit 0.3em 0.3em ; }
+      td { }
+      th { }
+    }
+    // kompakt
+    &.condensed {
+      caption { padding-left: 0 ; }
+      td, th {
+        padding: 0.1em 7px 0.1em 1px ;
+      }
+    }
+    // liniert
+    &.lined {
+      tr {
+        border-bottom: 1px @table-border-color solid ;
+        & > th,
+        & > th {
+          vertical-align: middle !important ;
+        }
+      }
+    }
 
+  } // /.tbl-plain
 
 
-  //  --------------------------------------
-  //  SUB-TOTALS
-  //  --------------------------------------
+  &.tbl-list-plain {
+    thead th {
+      border-top:    1px @table-border-color solid !important ;
+      border-bottom: 1px @table-border-color solid ;
+      font-weight:   bold ;
+    }
+    tbody {
+      td,
+      th { border-bottom: 1px @table-border-color solid ; }
+    }
+  }// /.tbl-list-plain
 
-  tr {
 
-    //  PENDENT: ggf. OBSOLETE
-    &.total-sub {
-      height: 2.0em ;
 
-      td {
-        border-top: 1px solid @table-border-color ;
-        border-bottom: 2px solid @table-border-color ;
-        font-weight: bold ;
-        color: @t-cell-text-color ;
-      }
+
+
+  //--------------------------------------
+  //  TABLE DIALOG
+  //--------------------------------------
+
+  //  table within div-dialogs
+  &.tbl-dialog {
+    th,
+    td {
+      background-color: @gray-verylight ;
     }
+    th {
+      color: @t-cell-head-text ;
+      font-size: @font-size-base ;
+      vertical-align: top ;
+    }
+  }
 
-  } //  /tr
+
+  //--------------------------------------
+  //  CLEAR-TABLE WITH NO FLOATING
+  //--------------------------------------
+  &.clear {
+    float: none ;
+    clear: both ;
+  }
 
 
 
-  //  --------------------------------------
+  //--------------------------------------
   //  TABLE CLASS TEST
-  //  --------------------------------------
-  //  Use this class for reviewing your Table HTML
+  //--------------------------------------
+  //  use this class for reviewing your table html
 
   &.test,
   &.test-plain {
-    //border: 1px @table-border-color solid ;
-    //background-color: #BFD2AD ;
 
     th {
-      background-color: #B3B3B3 ;
+      background-color: #b3b3b3 ;
       color: @t-cell-text-color ;
       font-weight: normal ;
 
       &.caption {
-        background-color: #B3B3B3 ;
+        background-color: #b3b3b3 ;
       }
     }
     td {
-      background-color: #CFCDD2 ;
+      background-color: #cfcdd2 ;
 
       &.longdesc,
       &.longdescription,
@@ -885,11 +871,11 @@ table {
     }
 
     table {
-      border: 1px #0000FF solid ;
+      border: 1px #0000ff solid ;
       border-collapse: collapse ;
 
       td, th {
-        border: 1px #C20D18 dotted !important ;
+        border: 1px #c20d18 dotted !important ;
       }
     }
 
@@ -897,11 +883,11 @@ table {
 
   &.test {
     //border: 1px @table-border-color solid ;
-    //background-color: #BFD2AD ;
+    //background-color: #bfd2ad ;
 
     th {
-      border: 1px @gray-mediumdark solid !important ;
-      background-color: #B3B3B3 ;
+      border: 1px @gray-dark solid !important ;
+      background-color: #b3b3b3 ;
       color: #000 ;
       font-weight: normal ;
 
@@ -912,7 +898,7 @@ table {
     }
     td {
       border: 1px #000 solid ;
-      background-color: #CFCDD2 ;
+      background-color: #cfcdd2 ;
 
       &.longdesc,
       &.longdescription,
@@ -923,26 +909,25 @@ table {
     }
 
     table {
-      border: 2px #0000FF solid ;
+      border: 2px #0000ff solid ;
       border-collapse: collapse ;
 
       td, th {
-        border: 1px #C20D18 dotted !important ;
+        border: 1px #c20d18 dotted !important ;
       }
     }
 
   } // /.test
 
 
-
 }
 //  /table
 
 
-//
-// **********************************
-// TABLE & COLs DIMENSIONS
-// **********************************
+
+//--------------------------------------
+// TABLE & COLS DIMENSIONS
+//--------------------------------------
 
 table,
 table colgroup col {
@@ -957,58 +942,67 @@ table colgroup col {
   &.wi-wider       { width: @tcol-wi-wider        ; }
   &.wi-verywide    { width: @tcol-wi-verywide     ; }
 
-
-
-  &.wi-small-small             { width: @tcol-wi-small-small ; }
-  &.wi-small-mediumsmall       { width: @tcol-wi-small-mediumsmall ; }
-  &.wi-small-normal            { width: @tcol-wi-small-normal ; }
-  &.wi-small-lightwide         { width: @tcol-wi-small-lightwide ; }
-  // PENDENT: noch genauer anschauen, sollte eigentlich nur für horizontale Tabellen vorgesehen sein
-  &.wi-small-wide              { width: ( @tcol-wi-small-wide )  ; }
+  &.wi-small-small           { width: @tcol-wi-small + @tcol-wi-small ; }
+  &.wi-small-mediumsmall     { width: @tcol-wi-small + @tcol-wi-mediumsmall ; }
+  &.wi-small-normal          { width: @tcol-wi-small + @tcol-wi-normal ; }
+  &.wi-small-lightwide       { width: @tcol-wi-small + @tcol-wi-lightwide ; }
+  // pendent: noch genauer anschauen, sollte eigentlich nur für horizontale tabellen vorgesehen sein
+  &.wi-small-wide            { width: @tcol-wi-small + @tcol-wi-wide + ( @diff-input-select )  ; }
   //&.wi-small-wide            { width: 460px ; }
-  &.wi-small-wider             { width: @tcol-wi-small-wider ; }
-  &.wi-small-verywide          { width: @tcol-wi-small-verywide ; }
-
-  &.wi-mediumsmall-small       { width: @tcol-wi-mediumsmall-lightwide ; }
-  &.wi-mediumsmall-mediumsmall { width: @tcol-wi-mediumsmall-mediumsmall ; }
-  &.wi-mediumsmall-normal      { width: @tcol-wi-mediumsmall-normal ; }
-  &.wi-mediumsmall-lightwide   { width: @tcol-wi-mediumsmall-lightwide ; }
-  &.wi-mediumsmall-wide        { width: @tcol-wi-mediumsmall-wide ; }
-  &.wi-mediumsmall-wider       { width: @tcol-wi-mediumsmall-wider ; }
-  &.wi-mediumsmall-verywide    { width: @tcol-wi-mediumsmall-verywide ; }
-
-  &.wi-normal-small            { width: @tcol-wi-normal-small ; }
-  &.wi-normal-mediumsmall      { width: @tcol-wi-normal-mediumsmall ; }
-  &.wi-normal-normal           { width: @tcol-wi-normal-normal ; }
-  &.wi-normal-lightwide        { width: @tcol-wi-normal-lightwide ; }
-  &.wi-normal-wide             { width: @tcol-wi-normal-wide ; }
-  &.wi-normal-wider            { width: @tcol-wi-normal-wider ; }
-  &.wi-normal-verywide         { width: @tcol-wi-normal-verywide ; }
-
-  &.wi-lightwide-small         { width: @tcol-wi-lightwide-small ; }
-  &.wi-lightwide-mediumsmall   { width: @tcol-wi-lightwide-mediumsmall ; }
-  &.wi-lightwide-normal        { width: @tcol-wi-lightwide-normal ; }
-  &.wi-lightwide-lightwide     { width: @tcol-wi-lightwide-lightwide ; }
-  &.wi-lightwide-wide          { width: @tcol-wi-lightwide-wide ; }
-  &.wi-lightwide-wider         { width: @tcol-wi-lightwide-wider ; }
-  &.wi-lightwide-verywide      { width: @tcol-wi-lightwide-verywide ; }
-
-}
-
-
-
+  &.wi-small-wider           { width: @tcol-wi-small + @tcol-wi-wider ; }
+  &.wi-small-verywide        { width: @tcol-wi-small + @tcol-wi-verywide ; }
 
+  &.wi-mediumsmall-small       { width: @tcol-wi-mediumsmall + @tcol-wi-lightwide ; }
+  &.wi-mediumsmall-mediumsmall { width: @tcol-wi-mediumsmall + @tcol-wi-mediumsmall ; }
+  &.wi-mediumsmall-normal      { width: @tcol-wi-mediumsmall + @tcol-wi-normal ; }
+  &.wi-mediumsmall-lightwide   { width: @tcol-wi-mediumsmall + @tcol-wi-lightwide ; }
+  &.wi-mediumsmall-wide        { width: @tcol-wi-mediumsmall + @tcol-wi-wide ; }
+  &.wi-mediumsmall-wider       { width: @tcol-wi-mediumsmall + @tcol-wi-wider ; }
+  &.wi-mediumsmall-verywide    { width: @tcol-wi-mediumsmall + @tcol-wi-verywide ; }
 
+  &.wi-normal-small       { width: @tcol-wi-normal + @tcol-wi-small ; }
+  &.wi-normal-mediumsmall { width: @tcol-wi-normal + @tcol-wi-mediumsmall ; }
+  &.wi-normal-normal      { width: @tcol-wi-normal + @tcol-wi-normal ; }
+  &.wi-normal-lightwide   { width: @tcol-wi-normal + @tcol-wi-lightwide ; }
+  &.wi-normal-wide        { width: @tcol-wi-normal + @tcol-wi-wide ; }
+  &.wi-normal-wider       { width: @tcol-wi-normal + @tcol-wi-wider ; }
+  &.wi-normal-verywide    { width: @tcol-wi-normal + @tcol-wi-verywide ; }
 
+  &.wi-lightwide-small       { width: @tcol-wi-lightwide + @tcol-wi-small ; }
+  &.wi-lightwide-mediumsmall { width: @tcol-wi-lightwide + @tcol-wi-mediumsmall ; }
+  &.wi-lightwide-normal      { width: @tcol-wi-lightwide + @tcol-wi-normal ; }
+  &.wi-lightwide-lightwide   { width: @tcol-wi-lightwide + @tcol-wi-lightwide ; }
+  &.wi-lightwide-wide        { width: @tcol-wi-lightwide + @tcol-wi-wide ; }
+  &.wi-lightwide-wider       { width: @tcol-wi-lightwide + @tcol-wi-wider ; }
+  &.wi-lightwide-verywide    { width: @tcol-wi-lightwide + @tcol-wi-verywide ; }
 
+}
 
+table {
+  &.width-full,
+  &.full-width,
+  &.wi-full { width: 100% ; }
 
+  //  moderate width with padding on the right side
+  &.width-moderate,
+  &.moderate-width,
+  &.wi-moderate {
+    width: auto ;
+    td,
+    th {
+      // PENDENT: vielleicht in pixeln angeben, statt in ems (siehe tbl-plain)
+      padding-left: 0.6em ;
+      padding-right: 1.2em ;
+    }
+  }
+}
 
 
-//  --------------------------------------
-//  LIST-TABLES in Wrappers
-//  --------------------------------------
 
+//--------------------------------------
+//  LIST-TABLES IN WRAPPERS
+//--------------------------------------
+// creates a border on the left & right side of the table
 div.wrapper,
 div.cols {
   table.tbl-list tr {
@@ -1017,21 +1011,41 @@ div.cols {
   }
 }
 
+//--------------------------------------
+//  LIST-TABLES NOT IN WRAPPERS
+//--------------------------------------
+#content .ui-tabs-panel > table.tbl-list caption {
+  //margin-left: @margin-from-panel-left - 0.2em ;
+  margin-left: 0.3em ;
+}
+#content {
+  .ui-tabs-panel > table.tbl-list caption {
+    //margin-left: @margin-from-panel-left - 0.2em ;
+    margin-left: 0.3em ;
+  }
 
+  & > table.tbl-plain,
+  & > table.tbl-list-plain {
+    margin-top: 1.0em ;
+  }
+}
 
 
-
-
+// --------------------------------------
+// SORT SYMBOLS
+// --------------------------------------
 
 span.sort {
   display: inline-block ;
   height: 100% ;
+  vertical-align: top;
+  padding-top: 6px;
 }
 span.sort_symbol {
   display: inline-block ;
   width: 10px ;
   padding: 0 ;
-  margin: 0 ;
+  margin: 0 10px 0 0 ;
   a {
     display: block ;
     width: 8px ;
@@ -1054,9 +1068,13 @@ span.sort_symbol {
       border-left:   1px @table-border-color solid ;
     }
     &.active {
-       background-color: #000000 ;
+       //background-color: #000000 ;
        color: #ffffff ;
     }
+    &:link,
+    &:visited{
+      color: @brand-light ;
+    }
   }
 }
 
@@ -1064,13 +1082,93 @@ span.sort_symbol {
 
 
 
-// --------------------------------------
-// SPECIFIX TABLES
-// --------------------------------------
-
+//--------------------------------------
+// SPECIFIX TABLES (#REPORT_TABLE)
+//--------------------------------------
+// Ueberpruefen
 table#report_table_id.tbl-list {
   & > tbody > tr > td { vertical-align: top ; }
 }
 
 
 
+//  Benutzerdefinierte Tabellen-Angaben
+//  Diese uebersteuern alle Anweisungen aus tables.less
+//  Es dürfen nur Tabellen mit Zusatzklassen oder mit IDs uebersteuert werden.
+//  Uebersteuern Sie nur wenige, bestehende Elemente, um ein einheitliches
+//  Design zu gewaehrleisten
+//  Diese Datei wird am Schluss von tables.less includiert.
+
+table{
+
+    //  Zusatzklasse zur Tabelle (Beispiel)
+    //  Betreff: xyz
+    //  Autor: hanspeter.schlaepfer@revamp-it.ch
+    &.meine-tabellen-klasse {
+
+    }
+
+    //  Tabelle mit spezieller ID (Beispiel)
+    //  Betreff: xyz
+    //  Autor: hanspeter.schlaepfer@revamp-it.ch
+    &#meine-spezielle-tabelle {
+
+    }
+
+
+    //  Tabelle mit Konten-Uebersicht (Kontoplan)
+    //  Betreff: Kontoplan
+    //  Autor: hanspeter.schlaepfer@revamp-it.ch
+    &#konten-plan {
+        tbody tr{
+            td:first-child {
+                text-align: right !important;
+            }
+            &.heading td {
+                font-size: @font-size-large;
+                border-top: 1px #999 solid;
+            }
+        }
+        tr:first-child {
+             &.heading td {
+                border: none;
+            }
+        }
+    }
+
+
+// PENDENT: genauer anschauen
+
+  &#eurtable {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  tr.category {
+    //  background set via jquery
+  }
+
+  tr.chart {
+    border: 0;
+  }
+
+  td.chartname {
+    padding-left: 50px;
+  }
+
+  tr.chartrow {
+    font-size: 75%;
+  }
+
+  .guv_row_background {
+    background:#f0f0f0;
+  }
+
+  .tr_error {
+    background-color: #ffc9c9;
+  }
+
+
+}
+
+
diff --git a/css/less/variables.less b/css/less/variables.less
index 2f4d492bc..05dce168b 100755
--- a/css/less/variables.less
+++ b/css/less/variables.less
@@ -1,3 +1,7 @@
+/* ------------------------------------------------------------- */
+/* VARIABLES (variables.less)                                    */
+/* ------------------------------------------------------------- */
+
 // ----------------------------------------------------------------------------
 //
 // VARIABLES (Less-Style) for general use (most of it is Bootstrap-Stuff)
@@ -18,51 +22,68 @@
 //   - Font family
 //   - Font size
 //   - Line height
-//   - Heading 1 - 6
+//   - Heading 1 - 4
 //   - Heading 1 (H1)
-// - ICONOGRAPHY
+//   - Heading Controlpanels
+//   - Data Types
+// - ICONOGRAPHY (ggf. OBSOLETE)
+// - PAGE COMPONENTS
+//   - Z-Index
+//   - Dashboard (frame-header)
+//   - Menu Top (CSS)
+//   - Menu Left (JS)
+//   - Context Menu (layout-actionbar) -> missing
+//   - Component properties
+//   - Tabs
 // - TABLES
 //   - Table & Caption
 //   - Table Cells
-//   - Dimensions (Table Cells Only)
+//   - Zebra effect in list tables
+//   - Dimensions (Table Cells Only) (OBSOLETE)
 // - BUTTONS
+//   - STANDARD-Button Strong (with Submission / data manipulation)
+//   - NEUTRAL-Button (NO Submission)
+//   - Diverse Button states
+// - DROPDOWNS (OBSOLETE)
 // - FORMS
-//   - Input fields
+//   - Input elements
 //   - Legend, Labels, Fieldsets
 //   - Highlighting (Focus and so on)
-//   - Dimensions (input, select)
-// - DROPDOWNS
-// - COMPONENTS
-//   - Z-Index
-//   - Dashboard (frame-header)
-//   - Menu (menuv3)
-//   - Context-Menu (layout-actionbar) -> missing
-//   - Component properties
+//   - Dimensions (input, select) (OBSOLETE)
 // - MESSAGES
-//   - Messages Old Style
-//   - Flash Messages
 // - DIMENSIONS
-//   - Standard Dimensions
-//   - Dimensions for Table Colums (COL)
+//   - Standard Dimensions (even for TABLE CELLS)
+//   - Dimensions for for DIVs
+//   - Dimensions for Table Colums (TH, TD & Col)
+//   - Dimensions for combined rows with combination Table column widths
+//   - Dimensions for Form input elements
+//   - Dimensions for Form Select elements
+//   - Dimensions for Textarea elements with standard dimensions
+//   -
+//   -
 // ----------------------------------------------------------------------------
 
 
-// --------------------------------------
-// COLORS
-// --------------------------------------
-// Base Colors see variables_color_scheme.less
 
 
+// --------------------------------------
+// COLORS (GREYs, BRAND COLORS & OTHERS)
+// --------------------------------------
+// Base Colors see variables_color[*-9].less
+// Include the preferred color scheme in style.less before including this less file
 
-// -------------------
+// -----------------------
 // General text color (label & data)
-//
+// -----------------------
 // Standard text
 @brand-primary:         @brand-text-color;
 @brand-label:           @brand-data-label-color;
 @brand-label-bg:        @brand-lighter;
 
-// Messages & info types
+// -----------------------
+// MESSAGES & INFO TYPES
+// -----------------------
+// color definitions in variables_color_[*-9].less
 @brand-ok:              @color-green-strong;
 @brand-ok-bg:           @color-green-light;
 
@@ -82,47 +103,30 @@
 @brand-negative-bg:     @color-red-light;
 
 
-// -------------------
-// Messages & info types
-//
-@brand-ok:              @color-green-strong;
-@brand-ok-bg:           @color-green-light;
-
-@brand-error:           @color-red-strong;
-@brand-error-bg:        @color-red-light;
-
-@brand-info:            @color-blue-strong;
-@brand-info-bg:         @color-blue-light;
 
-@brand-warning:         @color-orange-strong;
-@brand-warning-bg:      @color-orange-light;
 
-// Positive & negative colors
-@brand-positive:        @color-green-strong;
-@brand-positive-bg:     @color-green-light;
-@brand-negative:        @color-red-strong;
-@brand-negative-bg:     @color-red-light;
 
-
-
-// --------------
-// Content Boxes
-//
+// --------------------------------------
+// CONTENT CONTAINER
+// --------------------------------------
 
 @text-min-width:            400px ;
 @text-max-width:            600px ;
 
-
 // like Wrappers, Colums Containers, Flash-Messages and Record Selection
-@content-padding:           0 0 0 0; // 0 is OK otherwise there will be a border after the ui-tabs-panels
-@content-margin:            104px 0 1.0em 0; // PENDENT: ueberpruefen
+//@content-padding:           0 0 0 0; // 0 is OK otherwise there will be a border after the ui-tabs-panels
+//@content-margin:            101px 0 1.0em 0; // PENDENT: ueberpruefen
+// working alternative
+@content-padding:           101px 0 0 0; // 0 is OK otherwise there will be a border after the ui-tabs-panels
+@content-margin:            0 0 1.0em 0; // PENDENT: ueberpruefen
 
 
-@margin-left-from-content:  0.6em ; // directly inside #content
+
+@margin-left-from-content:  1.2em ; // directly inside #content
 @margin-left-from-wrapper:  0   ;       // directly inside .wrapper
 
-@margin-from-content:       1em 1em 1em   @margin-left-from-content ; // directly inside #content
-@margin-from-wrapper:       0   0   0.4em @margin-left-from-wrapper ;       // directly inside .wrapper
+@margin-from-content:       1em   1em 1em   @margin-left-from-content ; // directly inside #content
+@margin-from-wrapper:       1.6em 0   0.4em @margin-left-from-wrapper ; // directly inside .wrapper
 
 // Paragraphs, messages
 @text-container-width:      auto ;
@@ -133,41 +137,47 @@
 @messages-min-width:        60.0em;
 @messages-max-width:        40.0em;
 
-
-@contentbox-margin:         1.0em 1.0em 1.0em 0.6em ;
+@contentbox-margin:         1.0em 1.0em 1.0em @margin-from-panel-left ;
 @contentbox-padding:        0.6em 1.0em 1.2em 1.8em ;
 @contentbox-radius:         0.6em ;
 
-// --------------
-// Content Panels
-//
-@controlpanel-margin:       @contentbox-margin      ;
-@controlpanel-padding:      1.2em 1.0em 0.8em 1.2em ;
-@controlpanel-padding-bold: 0.8em 1.0em 1.4em 1.2em ;
-@controlpanel-bg:           @brand-lighter          ;
-@controlpanel-color:        @brand-darkest          ;
-@controlpanel-border:       1px @brand-darkest solid  ;
-@controlpanel-radius:       @contentbox-radius      ;
-@controlpanel-bg-hover:     @brand-darkest          ;
-@controlpanel-bg-hover-text:@brand-light          ;
-@controlpanel-active-bg:    @brand-strong-dimmed          ;
-@controlpanel-active-text:  @brand-lighter          ;
-
-@controlpanel-h3-color:     @brand-heading-color ;
-@controlpanel-h3-size:      110%    ;
-@controlpanel-h3-style:     normal  ;
-@controlpanel-h3-weight:    normal  ;
-
-@controlpanel-h4-color:     @brand-heading-color ;
-@controlpanel-h4-size:      105%    ;
-@controlpanel-h4-weight:    bold    ;
-@controlpanel-h4-style:     normal  ;
+// -----------------------
+// Component properties
+// -----------------------
+// Based on 14px font-size and 1.428 line-height (~20px to start)
+// PENDENT: UI-Tabs und so weiter
+// PENDENT: genauer anschauen, ggf. obsolete da nicht verwendet
+
+@padding-base-vertical:         6px;
+@padding-base-horizontal:       12px;
+
+@padding-large-vertical:        10px;
+@padding-large-horizontal:      16px;
+
+@padding-small-vertical:        5px;
+@padding-small-horizontal:      10px;
+
+@line-height-large:             1.33;
+@line-height-small:             1.5;
+
+@border-radius-base:            4px;
+@border-radius-large:           6px;
+@border-radius-small:           3px;
+
+@component-active-color:        @brand-superlight;
+@component-active-bg:           @brand-primary; // PENDENT: Variable nicht vorgesehen dafuer
+
+@caret-width-base:              4px;
+@caret-width-large:             5px;
+
+@margin-from-panel-left:        1.2em; // for panels and wrappers
+
+@padding-databoxes-left:        0.6em ; // for input, span.data in data tables
+
+
+
 
-// select item control panel
-@controlpanel-select-item-padding:   0.6em 1.0em 0.6em 0.8em ;
 
-@instructionbox-bg:       @controlpanel-bg ;
-@instructionbox-border:   1px @brand-darkest solid ;
 
 
 
@@ -181,22 +191,24 @@
 
 
 
+
+
 // --------------------------------------
 // TYPOGRAPHY
 // --------------------------------------
 
-// --------------
+// -----------------------
 // Font family
-//
+// -----------------------
 @font-family-sans-serif:  Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif ;
 @font-family-serif:       Georgia, "Times New Roman", Times, serif ;
 @font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
 
 @font-family-base:        @font-family-sans-serif;
 
-// --------------
+// -----------------------
 // Font size
-//
+// -----------------------
 @font-size-base:          11pt; // vorh.14px
 @font-size-large:         ceil(@font-size-base * 1.25); //  ~18px
 @font-size-medium:        ceil(@font-size-base * 1.0 ); //  ~18px
@@ -204,16 +216,15 @@
 @font-size-smaller:       ceil(@font-size-base * 0.76); //  ~12px
 @font-size-verysmall:     ceil(@font-size-base * 0.6); //   ~12px
 
-// --------------
+// -----------------------
 // Line height
-//
+// -----------------------
 @line-height-base:        1.428571429; //  20/14
 @line-height-computed:    floor(@font-size-base * @line-height-base); //  ~20px
 
-
-// --------------
-// Heading 1-6
-//
+// -----------------------
+// Heading 1-4
+// -----------------------
 @headings-font-family:    @font-family-base;
 @headings-weight:         500;
 @headings-line-height:    1.3em;
@@ -240,16 +251,18 @@
 @h3-weight:          normal;
 @h4-weight:          normal;
 
-// --------------
+// -----------------------
 // Heading 1 (H1)
+// -----------------------
 // Fixed on top of every page together with the action bar
-@h1-color:    @brand-h1-color;
-@h1-bg:       @brand-h1-bg;
-@h1-padding:  0.7em 0.5em 0.7em 0.7em;
-@h1-margin:   0;
-
+@brand-h1-color:        @_brand-h1-color;
+@brand-h1-bg:           @_brand-h1-bg;
+@h1-padding:            0.7em 0.5em 0.7em 1.3em;
+@h1-margin:             0;
+@brand-h1-border-top:  @_brand-h1-border-top;
+// -----------------------
 // Heading Controlpanels
-
+// -----------------------
 @h3-controlpanel-size:    @h3-size;
 @h4-controlpanel-size:    @h4-size;
 
@@ -257,12 +270,11 @@
 @h4-controlpanel-style:   bold;
 
 @h3-controlpanel-weight:  normal;
-@he-controlpanel-weight:  bold;
-
+@h4-controlpanel-weight:  bold;
 
-// -------------------
+// -----------------------
 // Data types
-//
+// -----------------------
 @heading-and-label-color:   @brand-data-label-color  ;
 @heading-and-label-bg:      @brand-data-label-color  ;
 @data-color:                @brand-data-color ;
@@ -273,7 +285,7 @@
 
 
 // --------------------------------------
-// Iconography
+// Iconography (ggf. OBSOLETE)
 // --------------------------------------
 //@icon-font-path:          "../bootstrap/fonts/";
 //@icon-font-name:          "glyphicons-halflings-regular";
@@ -281,116 +293,150 @@
 
 
 
+
 // --------------------------------------
-// TABLES
+// PAGE COMPONENTS
 // --------------------------------------
 
-// --------------
-// Table & Caption
-//
-@table-bg:                       transparent; //  overall background-color
-@table-bg-accent:                @brand-lighter; //  for striping
-@table-bg-hover:                 #ffffff;
-@table-bg-active:                @table-bg-hover;
-@table-border-color:             @brand-darkest; //  table and cell border
-
-@table-caption-bg:               transparent ;
-@table-caption-color:            @brand-darkest;
-@table-caption-size:             @h3-size - 1pt ;
-@table-caption-style:            @h3-style ;
-@table-caption-weight:           @h3-weight ;
+// -----------------------
+// Z-index
+// -----------------------
+// Stack-/Layer Positions of components
+// only for specialists
 
+// General
+@zindex-dropdown:          1000;
+@zindex-popover:           1010;
+@zindex-tooltip:           1030;
+@zindex-navbar-fixed:      1030;
+@zindex-modal-background:  1040;
+@zindex-modal:             1050;
 
-// --------------
-// Table Cells
-//
-@t-cell-padding:                 8px;
-@t-cell-padding-condensed:       5px;
+// Components
+@zindex-dashboard:         1040; // frame-header
+@zindex-navbar:            1999; // menuv3 must be on top
+@zindex-h1:                1020; // h1 inside content
 
-@t-cell-text-color:              @brand-darkest;
+@zindex-actionbar:               1030; // action-bar (Workflow)
+@zindex-actionbar-action:        1031;
+@zindex-actionbar-combobox:      1031;
+@zindex-actionbar-combobox-head: 1033;
+@zindex-actionbar-combobox-list: 1032;
 
-@t-cell-head-bg:                 @brand-strong;
-@t-cell-head-bg-accent:          @gray-light;
-@t-cell-head-text:               @brand-light;
-@t-cell-head-text-accent:        @brand-lighter;
+// -----------------------
+// DASHBOARD (FRAME HEADER)
+// -----------------------
+@dashbrd_bg:            @_dashbrd_bg ;
+@dashbrd_text:          @_dashbrd_text ;
+@dashbrd_link:          @_dashbrd_link ;
+@dashbrd_link_hover:    @_dashbrd_link_hover ;
+@dashbrd_link_deco:     underline ;
+@dashbrd_input_bg:      @_dashbrd_input_bg;
+@dashbrd_input_text:    @_dashbrd_input_text ;
 
-@t-cell-label-text:              @brand-strong-dimmed;
-@t-cell-label-text-accent:       @brand-strong-dimmed-hover;
-@t-cell-data-text:               @brand-darkest;
-@t-cell-data-text-accent:        @brand-darkest;
+// -----------------------
+// Menue (menuv3)
+// -----------------------
+@menu_bg:               @_menu_bg ;
+@menu_link:             @_menu_link ;
 
+@menu_link_bg:          @_menu_link_bg ; // display:block
+@menu_link_hover:       @_menu_link_hover ;
+@menu_link_hover_bg:    @_menu_link_hover_bg ;
+@menu_link_hover_deco:  underline ;
+@menu_border_color:     @_menu_border_color ;
+@menu_border:           1px @menu_border_color solid ;
+
+@menu_link_bg_level1:         @_menu_link_bg_level1 ;
+@menu_link_bg_level1_hover:   @_menu_link_bg_level1_hover ;
+@menu_link_bg_level2:         @_menu_link_bg_level2 ;
+@menu_link_bg_level2_hover:   @_menu_link_bg_level2_hover ;
+@menu_link_bg_level3:         @_menu_link_bg_level3 ;
+@menu_link_bg_level3_hover:   @_menu_link_bg_level3_hover ;
+
+
+// -----------------------
+// Menu Left (JS & HTML)
+// -----------------------
+@menu_left_bg:                    @_menu_left_bg ;
+@menu_left_level_1_color:         @_menu_left_level_1_color ;
+@menu_left_level_1_bg:            @_menu_left_level_1_bg ;
+@menu_left_level_1_hover_color:   @_menu_left_level_1_hover_color ;
+@menu_left_level_1_hover_bg:      @_menu_left_level_1_hover_bg ;
+@menu_left_level_2_color:         @_menu_left_level_2_color ;
+@menu_left_level_2_bg:            @_menu_left_level_2_bg ;
+@menu_left_level_2_hover_color:   @_menu_left_level_2_hover_color ;
+@menu_left_level_2_hover_bg:      @_menu_left_level_2_hover_bg ;
+@menu_left_level_3_color:         @_menu_left_level_3_color ;
+@menu_left_level_3_bg:            @_menu_left_level_3_bg ;
+@menu_left_level_3_hover_color:   @_menu_left_level_3_hover_color ;
+@menu_left_level_3_hover_bg:      @_menu_left_level_3_hover_bg ;
+
+// Additional Variables for Menu Left (JS)
+@menu_open_color: @_menu_open_color;
+@menu_open_bg:    @_menu_open_bg;
+
+// -----------------------
+// CONTEXT-MENU (LAYOUT-ACTIONBAR)
+// -----------------------
+@actionbar-bg:                  @_actionbar-bg;
+@actionbar-bg-active:           @_actionbar-bg-active;
+//@actionbar-bg-hover:          @_actionbar-bg-hover;
+@actionbar-font-color:          @_actionbar-font-color;
+@actionbar-font-color-active:   @_actionbar-font-color-active;
+@actionbar-border-color:        @_actionbar-border-color;
+@actionbar-border-color-active: @_actionbar-border-color-active;
+@actionbar-hover-bg:            @_actionbar-hover-bg;
+@actionbar-hover-color:         @_actionbar-hover-color;
+@actionbar-border-radius:       4px ;
+@actionbar-font-color-disabled: @_actionbar-font-color-disabled;
+
+// -----------------------
+// Tabs
+// -----------------------
+// background tabs panel (data/content)
+
+@tabs-bg:                   @_tabs-bg ;
+@tabs-panel-bg:             @_tabs-panel-bg ;
+@tabs-border-color:         @_tabs-border-color ;
+@tabs-border-radius:        4px ;
+
+@tabs-default-bg:           @_tabs-default-bg;
+@tabs-default-color:        @_tabs-default-color;
+@tabs-default-hover-bg:     @_tabs-default-hover-bg;
+@tabs-default-hover-color:  @_tabs-default-hover-color;
+
+@tabs-active-bg:            @_tabs-active-bg;
+@tabs-active-color:         @_tabs-active-color;
+@tabs-active-hover-bg:      @_tabs-active-hover-bg;
+@tabs-active-hover-color:   @_tabs-active-hover-color;
 
-@t-cell-foot-text:               @brand-darkest;
 
-// Zebra effect in list tables
-@t-row-zebra-bg-odd:             @brand-lighter;
-@t-row-zebra-bg-even:            @brand-light;
-@t-row-zebra-bg-hover:           #ffffff;
 
-@t-row-zebra-bg-error:           @brand-error-bg;
-@t-row-zebra-bg-special:         #FEF2C5; // PENDENT: ANSCHAUEN
-@t-row-zebra-bg-highlight:       #B4F4FE; // PENDENT: ANSCHAUEN
 
 
 // --------------------------------------
-// BUTTONS
+// Dropdowns (OBSOLETE?)
 // --------------------------------------
 
-@btn-font-weight:                normal;
-// -------------------
-// STANDARD-Button Strong (with Submission / data manipulation)
-//
-// Standard
-@btn-default-color:               @brand-verylight;
-@btn-default-bg:                  @brand-strong;
-@btn-default-border:              @brand-darkest;
-// Hover
-@btn-default-hover-color:         #ffffff;
-@btn-default-hover-bg:            @brand-strong-dimmed;
-@btn-default-hover-border:        @brand-darkest;
-// Active
-@btn-default-active-color:        #ffffff;
-@btn-default-active-bg:           @brand-strong-dimmed;
-@btn-default-active-border:       @brand-darkest;
-
-// -------------------
-// NEUTRAL-Button (NO Submission)
-//
-// Standard
-@btn-neutral-color:               @brand-strong;
-@btn-neutral-bg:                  @brand-lighter;
-@btn-neutral-border:              @brand-darkest;
-// Hover
-@btn-neutral-hover-color:         @brand-strong;
-@btn-neutral-hover-bg:            @brand-light;
-@btn-neutral-hover-border:        @brand-darkest;
-// Active
-@btn-neutral-active-color:        #ffffff;
-@btn-neutral-active-bg:           @brand-light;
-@btn-neutral-active-border:       @brand-darkest;
-
+@dropdown-bg:                    #fff;
+@dropdown-border:                rgba(0,0,0,.15);
+@dropdown-fallback-border:       #ccc;
+@dropdown-divider-bg:            #e5e5e5;
 
-// -------------------
-// Diverse Button states
-//
+@dropdown-link-color:            @gray-dark;
+@dropdown-link-hover-color:      darken(@gray-dark, 5%);
+@dropdown-link-hover-bg:         #f5f5f5;
 
-@btn-primary-color:              #ffffff;
-@btn-primary-bg:                 @brand-primary;
-@btn-primary-border:             darken(@btn-primary-bg, 5%);
+@dropdown-link-active-color:     @component-active-color;
+@dropdown-link-active-bg:        @component-active-bg;
 
-@btn-success-color:              #ffffff;
-@btn-success-bg:                 @color-green-strong;
-@btn-success-border:             darken(@color-green-light, 5%);
+@dropdown-link-disabled-color:   @gray-light;
 
-@btn-warning-color:              #ffffff;
-@btn-warning-bg:                 @brand-warning;
-@btn-warning-border:             darken(@btn-warning-bg, 5%);
+@dropdown-header-color:          @gray-light;
 
-@btn-info-color:                 #ffffff;
-@btn-info-bg:                    @brand-info;
-@btn-info-border:                darken(@btn-info-bg, 5%);
+@dropdown-caret-color:           #000;
 
-@btn-link-disabled-color:        @gray-light;
 
 
 
@@ -399,15 +445,13 @@
 // FORMS
 // --------------------------------------
 
-
-// --------------
+// -------------------
 // Input elements
-//
-
+// -------------------
 @input-bg:                       #fff;
 @input-bg-disabled:              @gray-lighter;
 
-@input-color:                    @gray;
+@input-color:                    @gray-standard;
 @input-border:                   #ccc;
 @input-border-radius:            @border-radius-base;
 @input-border-focus:             #66afe9;
@@ -421,167 +465,196 @@
 @input-group-addon-bg:           @gray-lighter;
 @input-group-addon-border-color: @input-border;
 
-
-
-// --------------
+// -------------------
 // Legend, Labels, Fieldsets
-//
-
+// -------------------
 @legend-color:                   @gray-dark;
 @legend-border-color:            #e5e5e5;
 
-
-// --------------
+// -------------------
 //  Highlighting (Focused, Activated)
-//
-
-@formelement-focus-bg:     #E7FFCE ;
-@formelement-focus-border: 1px solid #9ccb21 ;
-
-
+// -------------------
+@formelement-focus-bg:             @_formelement-focus-bg ;
+@formelement-focus-text:           @_formelement-focus-text ;
+@formelement-focus-border:         @_formelement-focus-border ;
 
 
 
 
 
 // --------------------------------------
-// Dropdowns
+// BUTTONS
 // --------------------------------------
+@button-font-weight:                normal;
+@button-border-radius:              6px ;
+// -------------------
+// STANDARD-Button Strong (with Submission / data manipulation)
+// -------------------
+// Standard
+@button-strong-color:               @_button-strong-color;
+@button-strong-bg:                  @_button-strong-bg;
+@button-strong-border:              1px @_button-strong-border-color solid;
 
-@dropdown-bg:                    #fff;
-@dropdown-border:                rgba(0,0,0,.15);
-@dropdown-fallback-border:       #ccc;
-@dropdown-divider-bg:            #e5e5e5;
+// Hover
+@button-strong-hover-color:         @_button-strong-hover-color;
+@button-strong-hover-bg:            @_button-strong-hover-bg;
+@button-strong-hover-border:        1px @_button-strong-hover-border-color solid;
 
-@dropdown-link-color:            @gray-dark;
-@dropdown-link-hover-color:      darken(@gray-dark, 5%);
-@dropdown-link-hover-bg:         #f5f5f5;
+// Active
+@button-strong-active-color:        @_button-strong-active-color;
+@button-strong-active-bg:           @_button-strong-active-bg;
+@button-strong-active-border:       1px @_button-strong-active-border-color solid;
 
-@dropdown-link-active-color:     @component-active-color;
-@dropdown-link-active-bg:        @component-active-bg;
+// -------------------
+// NEUTRAL-Button (NO Submission)
+// -------------------
+// Standard
+@button-neutral-color:               @_button-neutral-color;
+@button-neutral-bg:                  @_button-neutral-bg;
+@button-neutral-border:              1px @_button-neutral-border-color solid;
 
-@dropdown-link-disabled-color:   @gray-light;
+// Hover
+@button-neutral-hover-color:         @_button-neutral-hover-color;
+@button-neutral-hover-bg:            @_button-neutral-hover-bg;
+@button-neutral-hover-border:        1px @_button-neutral-hover-border-color solid;
 
-@dropdown-header-color:          @gray-light;
+// Active
+@button-neutral-active-color:        @_button-neutral-active-color;
+@button-neutral-active-bg:           @_button-neutral-active-bg;
+@button-neutral-active-border:       1px @_button-neutral-active-border-color solid;
 
-@dropdown-caret-color:           #000;
+// -------------------
+// Diverse Button states
+// -------------------
+//@button-primary-color:              @_button-primary-color;
+//@button-primary-bg:                 @_button-primary-bg;
+//@button-primary-border:             1px darken(@button-primary-bg, 5%) solid;
 
+@button-success-color:              @_button-success-color;
+@button-success-bg:                 @_button-success-bg;
+@button-success-border:             1px darken(@color-green-light, 5%) solid;
 
+@button-warning-color:              @_button-warning-color;
+@button-warning-bg:                 @_button-warning-bg;
+@button-warning-border:             1px darken(@button-warning-bg, 5%) solid;
 
+@button-info-color:                 @_button-info-color;
+@button-info-bg:                    @_button-info-bg;
+@button-info-border:                1px darken(@button-info-bg, 5%) solid;
 
-// --------------------------------------
-// COMPONENTS
-// --------------------------------------
+@button-link-disabled-color:        @_button-link-disabled-color;
 
 
-// --------------
-// Z-index
-// Stack-/Layer Positions of components
-// only for specialists
 
-// General
-@zindex-dropdown:          1000;
-@zindex-popover:           1010;
-@zindex-tooltip:           1030;
-@zindex-navbar-fixed:      1030;
-@zindex-modal-background:  1040;
-@zindex-modal:             1050;
 
-// Components
-@zindex-dashboard:         1040; // frame-header
-@zindex-navbar:            1999; // menuv3 muss zuoberst sein
-@zindex-h1:                1020; // h1 innerhalb content
 
-@zindex-actionbar:         1030; // action-bar (Workflow)
-@zindex-actionbar-action:  1031;
-@zindex-actionbar-combobox: 1031;
-@zindex-actionbar-combobox-head: 1033;
-@zindex-actionbar-combobox-list: 1032;
+// --------------------------------------
+// CONTROL PANELS
+// --------------------------------------
 
+@controlpanel-margin:         @contentbox-margin      ;
+@controlpanel-padding:        1.2em 1.0em 0.8em 0.9em ;
+@controlpanel-padding-narrow: 0.4em 1.0em 0.6em 0.9em ; // e.g. for input-panels
+@controlpanel-padding-bold:   0.8em 1.0em 1.4em 1.2em ; // PENDENT: wozu?
+@controlpanel-bg-color:       @_controlpanel-bg-color ;
+@controlpanel-bg-style:        @_bg_style_controlpanel ;
+@controlpanel-color:          @_controlpanel-color    ;
+@controlpanel-border:         1px @_controlpanel-border-color solid  ;
+@controlpanel-radius:         @contentbox-radius      ;
+
+// PENDENT: noetig?
+@controlpanel-bg-hover:       @brand-superdark        ;
+@controlpanel-bg-hover-text:  @brand-light            ;
+@controlpanel-active-bg:      @brand-darker            ;
+@controlpanel-active-text:    @brand-lighter          ;
+
+@controlpanel-h3-color:       @h3-size ;
+@controlpanel-h3-size:        110%    ;
+@controlpanel-h3-style:       normal  ;
+@controlpanel-h3-weight:      normal  ;
+
+@controlpanel-h4-color:       @_controlpanel-header-color ;
+@controlpanel-h4-size:        @h4-size    ;
+@controlpanel-h4-weight:      normal ;
+@controlpanel-h4-style:       normal  ;
 
+// select item control panel
+@controlpanel-select-item-padding:   0.6em 1.0em 0.6em 0.8em ;
 
-// --------------
-// Dashboard (frame-header)
-//
-@dashbrd_bg:            @brand-darkest ;
-@dashbrd_text:          @brand-light ;
-@dashbrd_link:          @brand-light ;
-@dashbrd_link_hover:    #ffffff ;
-@dashbrd_link_deco:     underline ;
-@dashbrd_input_bg:      @brand-light;
-@dashbrd_input_text:    #000000 ;
+@instructionbox-bg:           @controlpanel-bg-color ;
+@instructionbox-border:       1px @_controlpanel-border-color solid ;
 
 
-// --------------
-// Menue (menuv3)
-//
 
-@menu_bg:               #fff ;
-@menu_link:             #000 ;
-@menu_link_bg:          #ebebeb ; // display:block
-@menu_link_hover:       #000 ;
-@menu_link_hover_bg:    #ebebeb ;
-@menu_link_hover_deco:  underline ;
 
 
-@menu_link_bg_level1:         #dcdcdc ;
-@menu_link_bg_level1_hover:   #cdcdcd ;
-@menu_link_bg_level2:         #cdcdcd ;
-@menu_link_bg_level2_hover:   #dcdcdc ;
-@menu_link_bg_level3:         #dcdcdc ;
-@menu_link_bg_level3_hover:   #cdcdcd ;
+// --------------------------------------
+// TABLES
+// --------------------------------------
+
+@table-border-color:             @_table-border-color; //  table and cell border
+
+@table-bg:                       @_table-bg; // overall background-color
+@table-bg-accent:                @_table-bg-accent; // for striping
+@table-bg-hover:                 @_table-bg-hover;
+@table-bg-active:                @_table-bg-active;
 
+@table-caption-bg:               @_table-caption-bg;
+@table-caption-color:            @_table-caption-color;
+@table-caption-size:             @h3-size - 2pt ;
+@table-caption-style:            @h3-style ;
+@table-caption-weight:           @h3-weight ;
 
 
 // --------------
-// Context-Menu (layout-actionbar)
-//
-@actionbar-bg:                  @brand-light;
-@actionbar-bg-active:           @brand-light;
-@actionbar-font-color:          #ffffff;
-@actionbar-font-color-active:   #ffffff;
-@actionbar-border-color:        @brand-strong;
-@actionbar-border-color-active: @brand-strong;
+// Table Cells
+// --------------
+@t-cell-text-color:              @_t-cell-text-color;
+@t-cell-th-text-color:           @_t-cell-th-text-color; // even for label/.label in tables
 
+@t-cell-head-bg:                 @_t-cell-head-bg;
+@t-cell-head-bg-accent:          @_t-cell-head-bg-accent;
+@t-cell-head-text:               @_t-cell-head-text;
+@t-cell-head-text-accent:        @_t-cell-head-text-accent;
 
+@t-cell-label-text:              @_t-cell-label-text;
+@t-cell-label-text-accent:       @_t-cell-label-text-accent;
+@t-cell-data-text:               @_t-cell-data-text;
+@t-cell-data-text-accent:        @_t-cell-data-text-accent;
 
-// --------------
-// Component properties
-//
-// Based on 14px font-size and 1.428 line-height (~20px to start)
-// PENDENT: UI-Tabs und so weiter
+@t-cell-databox-text-color:       @_t-cell-databox-text-color ;
+@t-cell-databox-border-color:     @_t-cell-databox-border-color ;
 
 
-@padding-base-vertical:          6px;
-@padding-base-horizontal:        12px;
+@t-cell-foot-text:               @_t-cell-foot-text;
 
-@padding-large-vertical:         10px;
-@padding-large-horizontal:       16px;
+// -----------------------
+// Zebra effect in list tables
+// -----------------------
+@t-row-zebra-bg-odd:             @_t-row-zebra-bg-odd;
+@t-row-zebra-bg-even:            @_t-row-zebra-bg-even;
 
-@padding-small-vertical:         5px;
-@padding-small-horizontal:       10px;
+@t-row-zebra-bg-hover:           @_t-row-zebra-bg-hover;
 
-@line-height-large:              1.33;
-@line-height-small:              1.5;
+@t-row-zebra-bg-error:           @msg-error-light;
 
-@border-radius-base:             4px;
-@border-radius-large:            6px;
-@border-radius-small:            3px;
+@table-list-zebra-text-color:     @_table-list-zebra-text-color ;
+@table-list-zebra-link-color:     @_table-list-zebra-link-color ;
 
-@component-active-color:         #fff;
-@component-active-bg:            @brand-primary;
+@t-row-zebra-bg-special:         #FEF2C5; // PENDENT: ANSCHAUEN
+@t-row-zebra-bg-highlight:       #B4F4FE; // PENDENT: ANSCHAUEN
 
-@caret-width-base:               4px;
-@caret-width-large:              5px;
 
+// PENDENT: Footer
 
 
 
 // --------------------------------------
-// Messages
+// MESSAGES
 // --------------------------------------
-@message-margin:          3.6em 2.0em 0.6em 1.0em ;
-@message-padding:         0.6em 0.6em 0.5em 0.6em ;
+
+@message-margin:         3.6em 2.0em 0.6em 1.0em ;
+@message-padding:        0.6em 0.6em 0.5em 0.6em ;
 
 // Error
 @message_error_bg:       @brand-error-bg ;
@@ -606,17 +679,55 @@
 
 
 
+
+
 // --------------------------------------
-// DIMENSIONS (width)
+// JQUERY-UI STUFF
 // --------------------------------------
 
 
-// --------------
-// Standard Dimensions
+// -----------------------
+// Date picker
+// -----------------------
+@jquery_datepicker-bg-color: @brand-superlight ;
+
+// -----------------------
+// UI-Dialog
+// -----------------------
+@jquery_ui_dialog-bg-color:   @brand-verylight ;
+@jquery_ui_dialog-bg-style:   @_bg_style_body ;
+
+// -----------------------
+// TOOLTIPSTER
+// -----------------------
+@jquery_ui_tooltipster-bg-color:       @brand-standard ;
+@jquery_ui_tooltipster-border-color:   @brand-lighter ;
+@jquery_ui_tooltipster-color:         @brand-verylight ;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// --------------------------------------
+// DIMENSIONS (width)
+// --------------------------------------
 // Only for Containers like DIV, TABLE, TH, TD, COL, P
-//
+
+// -----------------------
+// Standard Dimensions (even for table cells)
+// -----------------------
 // Table cells:   COL, TD, TH, DIV
-//
 @wi-smallest:       42px ;  //   2.6em ; // one or two ciphers
 @wi-verysmall:      80px ;  //   5.0em ;
 @wi-small:         128px ;   //   8.0em ; // also date e.g. 2018/06/06
@@ -627,9 +738,9 @@
 @wi-wider:         384px ;   //  24.0em ;
 @wi-verywide:      576px ;   //  36.0em ;
 
-// --------------
-// Dimensions for DIVs
-//
+// -----------------------
+// Standard Dimensions for for DIVs
+// -----------------------
 @div-wi-smallest:     (@wi-smallest    ) ;
 @div-wi-verysmall:    (@wi-verysmall   ) ;
 @div-wi-small:        (@wi-small       ) ;
@@ -640,9 +751,9 @@
 @div-wi-wider:        (@wi-wider       ) ; // min-width
 @div-wi-verywide:     (@wi-verywide    ) ; // min-width
 
-// --------------
+// -----------------------
 // Dimensions for Table Colums (TH, TD & Col)
-//
+// -----------------------
 @tcol-wi-smallest:     (@wi-smallest    ) ;
 @tcol-wi-verysmall:    (@wi-verysmall   ) ;
 @tcol-wi-small:        (@wi-small       ) ;
@@ -653,9 +764,9 @@
 @tcol-wi-wider:        (@wi-wider       ) ; // min-width
 @tcol-wi-verywide:     (@wi-verywide    ) ; // min-width
 
-// --------------
+// -----------------------
 // Dimensions for combined rows with combination Table column widths
-//
+// -----------------------
 @tcol-wi-small-small:            (@tcol-wi-small       + @tcol-wi-small        ) ;
 @tcol-wi-small-mediumsmall:      (@tcol-wi-small       + @tcol-wi-mediumsmall  ) ;
 @tcol-wi-small-normal:           (@tcol-wi-small       + @tcol-wi-normal       ) ;
@@ -688,9 +799,9 @@
 @tcol-wi-lightwide-wider:        (@tcol-wi-lightwide   + @tcol-wi-wider        ) ;
 @tcol-wi-lightwide-verywide:     (@tcol-wi-lightwide   + @tcol-wi-verywide     ) ;
 
-// --------------
-// Dimensions for Form elements
-//
+// -----------------------
+// Dimensions for Form input elements
+// -----------------------
 @diff-input-select: 36px ; //1.6em ;
 
 // Input elements
@@ -712,7 +823,9 @@
 @input-wi-lightwide--verysmall: ( @input-wi-lightwide - @input-wi-verysmall ) - 1 ;
 @input-wi-wide--verysmall:      ( @input-wi-wide      - @input-wi-verysmall ) - ( @form-element-margin-right  ) + 4px ;
 
-// Select elements
+// -----------------------
+// Dimensions for Form Select elements
+// -----------------------
 @select-wi-smallest:    (@wi-smallest    ) ;
 @select-wi-verysmall:   (@wi-verysmall   ) ;
 @select-wi-small:       (@wi-small       - @diff-input-select ) ;
@@ -752,7 +865,10 @@
 @select-wi-wide-wider:            ((@wi-wide + (@wi-wider - @diff-input-select))      - @diff-select-combined ) ;
 @select-wi-wide-verywide:         ((@wi-wide + (@wi-verywide - @diff-input-select))   - @diff-select-combined ) ;
 
-// Textarea elements with standard dimensions
+// -----------------------
+// Dimensions for Textarea elements with standard dimensions
+// -----------------------
+
 @textarea-wi-normal:      (@wi-normal      - @diff-input-select ) ;
 @textarea-wi-lightwide:   (@wi-lightwide   - @diff-input-select ) ;
 @textarea-wi-wide:        (@wi-wide        - @diff-input-select ) ; // min-width
@@ -802,3 +918,41 @@
 @textarea-wi-wide-wide:         ((@tcol-wi-wide + @input-wi-wide)          - @diff-input-textarea-combined) ;
 @textarea-wi-wide-wider:        ((@tcol-wi-wide + @input-wi-wider)         - @diff-input-textarea-combined) ;
 @textarea-wi-wide-verywide:     ((@tcol-wi-wide + @input-wi-verywide)      - @diff-input-textarea-combined) ;
+
+
+/* ------------------------------------------------------------- */
+/* This CSS-Vars are just for testing                            */
+/* ------------------------------------------------------------- */
+
+:root {
+  --gray-standard:      @gray-standard;
+  --gray-superdark:     @gray-superdark; // Black
+  --gray-verydark:      @gray-verydark;
+  --gray-darker:        @gray-darker;
+  --gray-dark:          @gray-dark;
+  --gray-light:         @gray-light;
+  --gray-lighter:       @gray-lighter;
+  --gray-verylight:     @gray-verylight;
+  --gray-superlight:    @gray-superlight; // White
+
+  --color-standard:     @brand-standard;
+  --color-superlight:   @brand-superlight;
+  --color-verylight:    @brand-verylight;
+  --color-lighter:      @brand-lighter;
+  --color-light:        @brand-light;
+  --color-dark:         @brand-dark;
+  --color-darker:       @brand-darker;
+  --color-verydark:     @brand-verydark;
+  --color-superdark:    @brand-superdark;
+
+  --msg-ok-strong:        @msg-green-strong;
+  --msg-ok-light:         @msg-green-light;
+  --msg-error-strong:     @msg-red-strong;
+  --msg-error-light:      @msg-red-light;
+  --msg-hint-strong:      @msg-blue-strong;
+  --msg-hint-light:       @msg-blue-light;
+  --msg-warning-strong:   @msg-orange-strong;
+  --msg-warning-light:    @msg-orange-light;
+
+}
+
diff --git a/css/less/variables_color_style.less b/css/less/variables_color_style.less
new file mode 100644
index 000000000..93648e781
--- /dev/null
+++ b/css/less/variables_color_style.less
@@ -0,0 +1,608 @@
+/* ------------------------------------------------------------- */
+/* VARIABLES COLOR (variables_color_gray_standard.less) Standard Grey */
+/* ------------------------------------------------------------- */
+
+// ----------------------------------------------------------------------------
+//
+// VARIABLES COLOR STANDARD
+// Standard is GREY
+//
+// ----------------------------------------------------------------------------
+// DESCRIPTION:
+//
+// CONTENTS:
+// - BASE COLORS
+//   - Grey Shades
+//   - BRAND COLORS
+// - MAIN PROPERTIES (STANDARD TEXT COLORS)
+// - SCAFFOLDING (PAGE)
+// - FRAME HEADER
+// - MENU TOP (CSS)
+// - MENU LEFT (HTML & JS)
+// - HEADER H1
+// - ACTIONBAR
+// - TABS
+// - TABLES
+//    - Table Cells
+//   - Zebra effect in list tables
+// - CONTROL PANELS
+// - MESSAGES
+// - BUTTONS
+//   - With Manipulation
+//   - NEUTRAL
+//   - Diverse Button states
+
+// ----------------------------------------------------------------------------
+
+// --------------------------------------
+// YOUR CUSTOM COLOR STYLE
+// --------------------------------------
+// CUSTOMIZE: Define your style here (get names from the following «list»)
+
+
+
+
+// --------------------------------------
+// BASE COLORS
+// --------------------------------------
+
+// -----------------------
+// COLORS STYLES
+// -----------------------
+// CUSTOMIZE: Do not change, just add a new style
+// Use for colorstyle above just the part of variable name after the prefix «style_»
+// Use a strong color, not a light one
+
+// BLUE Standard Colors
+@style_ocean:         #2E6FFD ;
+@style_light_blue:    #336699 ;
+@style_aqua:          #0F80FF ;
+@style_turquoise:     #21FFFF ;
+
+// GREEN Standard Colors
+@style_pine:          #118040 ;
+@style_asparagus:     #808004 ;
+@style_petrol:        #108080 ;
+@style_spring:        #21FF06 ; // New
+
+// RED Standard Colors
+@style_salmona:       #990033 ;
+@style_salmon:        #FC6666 ;
+@style_tangerine:     #FD8008 ;
+@style_marascino:     #FB0207 ;
+@style_maroon:        #800040 ;
+@style_strawberry:    #FB0280 ;
+@style_pure_red:      #FC7D86 ;
+
+// YELLOW Standard Colors
+@style_old_lemon:       #E0E00A ;
+@style_yellow_to_green: #CAD008 ;
+
+// PURPLE & VIOLETS
+@style_eggplant:      #400080 ;
+@style_plum:          #800080 ;
+@style_grape:         #8000FF ;
+@style_magenta:       #FB02FF ;
+@style_lavender:      #CC66FF ;
+
+// BROWN & ORANGE
+@style_cayenne:       #800002 ;
+@style_mocha:         #804003 ;
+@style_cantaloupe:    #FECC66 ;
+@style_dark_brown:    #6D3702 ;
+@style_orange_brown:  #CC6600 ;
+@style_brown:         #996600 ;
+@style_green_brown:   #666633 ;
+
+
+// -----------------------
+// GREY SHADES
+// -----------------------
+// CUSTOMIZE: If necessary change graduation of the Greys with grey colors
+
+@gray-superdark:      #000000 ; // Black
+@gray-verydark:       #222222 ;
+@gray-darker:         #444444 ;
+@gray-dark:           #666666 ;
+
+@gray-standard:       #888888 ;
+
+@gray-light:          #aaaaaa ;
+@gray-lighter:        #cccccc ;
+@gray-verylight:      #eeeeee ;
+@gray-superlight:     #ffffff ; // White
+
+
+// -----------------------
+// MESSAGE TYPE COLORS
+// -----------------------
+// for messages and other coloured stuff
+// CUSTOMIZE: If necessary change the colors, but only if necessary
+// for backgrounds see
+
+// Error (Red)
+@color-red-strong:      #ae0014;
+// OK (Green)
+@color-green-strong:    #003c18;
+// Info/Hint (Blue)
+@color-blue-strong:     #209ec8;
+// Warning (Orange)
+@color-orange-strong:   #8D6A00; // brown, orange calculated as background below
+
+// light background colors (calculated)
+@color-red-light:       lighten( @color-red-strong ,     50%  );
+@color-green-light:     lighten( @color-green-strong ,   50%  );
+@color-blue-light:       lighten( @color-blue-strong ,   50%  );
+@color-orange-light:    lighten( @color-orange-strong , 50%  );
+
+
+// -----------------------
+// DIVERSE COLOR (NOT USED AT THIS TIME)
+// -----------------------
+// Divers
+@rainbow-green:         #408000;
+@rainbow-blue:          #0080FF;
+@rainbow-red:           #FF0000;
+@rainbow-yellow:        #FFFF00;
+
+
+
+
+
+
+
+// --------------------------------------
+// BRAND COLORS (CALCULATED)
+// --------------------------------------
+// Calculation of the variations of the brand colors
+// It is generally not necessary to touch the following code,
+// change therefore the gray colors above
+
+@colorstyle: "green_brown" ; // not style_*, only * like "plum"
+@brandstyle: "style_@{colorstyle}" ; // DO NOT TOUCH
+
+
+@brand-standard:    @@brandstyle ; // DO NOT TOUCH
+
+@brand-superdark:   multiply( @brand-standard , @gray-superdark) ; //  almost Black
+@brand-verydark:    multiply( @brand-standard , @gray-verydark) ;
+@brand-darker:      multiply( @brand-standard , @gray-darker) ;
+@brand-dark:        multiply( @brand-standard , @gray-dark) ;
+
+@brand-light:       screen( @brand-standard , @gray-light) ;
+@brand-lighter:     screen( @brand-standard , @gray-lighter) ;
+@brand-verylight:   screen( @brand-standard , @gray-verylight) ;
+@brand-superlight:  @gray-superlight ; // White
+
+
+
+// --------------------------------------
+// Backgrounds with Gradient function
+// --------------------------------------
+
+// -----------------------
+// Background specifications
+// -----------------------
+
+// Body
+@_bg_style_body:             linear-gradient(to bottom,   @brand-verylight,  @brand-light);
+// Control panels
+@_bg_style_controlpanel:    linear-gradient(to top,      @brand-light,     @brand-verylight);
+// Buttons
+@_bg_style_button:           linear-gradient(to top,     @brand-light,     @brand-verylight);
+@_bg_style_button_neutral:   linear-gradient(to top,      @gray-light,      @gray-verylight);
+
+
+// -----------------------
+// Body Background
+// -----------------------
+// a mixin for the body background
+// CUSTOMIZE:
+.bg-body {
+  //background-image:     linear-gradient(to bottom, @brand-verylight, @brand-light); // GRADIENT
+  background-color:     @brand-light ;  // same as bottom stop-color bottom in background-image below
+  // background-image:  none; // NO GRADIENT
+}
+.bg-content {
+  background-image:     linear-gradient(to bottom, @brand-verylight, @brand-light); // GRADIENT
+  //background-color:     @brand-light ;  // same as bottom stop-color bottom in background-image below
+  // background-image:  none; // NO GRADIENT
+}
+
+
+
+
+// --------------------------------------
+// COLOR SPECICATIONS FOR MESSAGES
+// --------------------------------------
+// strong is for text and borders
+// light  is for background-colors
+
+// Error (Red)
+@msg-red-strong:      mix(@brand-darker,     @color-red-strong, 20);
+@msg-red-light:       mix(@brand-verylight,  @color-red-light,  60);
+// OK (Green)
+@msg-green-strong:    mix(@brand-darker,     @color-green-strong, 20);
+@msg-green-light:     mix(@brand-verylight,  @color-green-light,  60);
+// Info/Hint (Blue)
+@msg-blue-strong:     mix(@brand-darker,     @color-blue-strong, 20);
+@msg-blue-light:      mix(@brand-verylight,  @color-blue-light,  20);
+// Warning (Orange)
+@msg-orange-strong:   mix(@brand-darker,     @color-orange-strong, 20); // more brown
+@msg-orange-light:    mix(@brand-lighter,    @color-orange-light,  50);
+@msg-orange-strong:   multiply(@brand-darker,     @color-orange-strong); // more brown
+@msg-orange-light:    multiply(@brand-lighter,    @color-orange-light);
+
+//@msg-red-light:       screen( @msg-red-strong , @gray-verylight) ;
+//@msg-red-light:       screen( @msg-red-strong , @brand-light) ;
+//@msg-green-light:     screen( @msg-green-strong , @gray-verylight) ;
+//@msg-green-light:     screen( @msg-green-strong , @brand-light) ;
+//@msg-blue-light:      screen( @msg-blue-strong , @gray-verylight) ;
+//@msg-orange-light:    screen( @msg-orange-strong , @gray-verylight) ;
+
+
+
+
+
+
+// --------------------------------------
+// MAIN PROPERTIES (STANDARD TEXT COLORS)
+// --------------------------------------
+// PENDENT: genauer anschauen
+@brand-text-color:          @gray-dark ; //
+@brand-text-color-accent:   @brand-standard ; //
+
+@brand-link-color:          @brand-dark ; //
+@brand-link-color-hover:    @brand-darker ; //
+
+@brand-table-text-color:    @brand-superdark ; //
+
+@brand-heading-color:       @brand-superdark ; // Standard heading color
+@brand-heading-bg:          @brand-dark ; //
+
+@brand-data-color:          @brand-standard ; //
+@brand-data-label-color:    @brand-darker ; // Standard-Label color
+
+// Text (Label & data)
+@brand-primary:         @brand-text-color;
+@brand-label:           @brand-data-label-color; // PENDENT: wozu?
+@brand-label-bg:        @brand-lighter; // PENDENT: wozu?
+
+
+
+
+
+// --------------------------------------
+// SCAFFOLDING (PAGE)
+// --------------------------------------
+
+@body-bg:               @brand-verylight; // general OBSOLETE
+@content-bg:            @brand-superlight; // background first tabs PENDENT: obsolete!
+@heading-bg:            @brand-lighter ; // controlpanels & other stuff PENDENT: obsolete!
+
+@text-color:            @brand-primary; // PENDENT: obsolete!
+@heading-color:         @brand-heading-color ; // labels & table headings // PENDENT: obsolete!
+@caption-color:         @brand-heading-color ; // caption // PENDENT: obsolete!
+
+
+
+// --------------------------------------
+// FRAME HEADER (DASHBOARD)
+// --------------------------------------
+
+@_dashbrd_bg:            @brand-darker ;
+@_dashbrd_text:          @brand-verylight ;
+@_dashbrd_link:          @brand-light ;
+@_dashbrd_link_hover:    @brand-superlight ;
+@_dashbrd_input_bg:      @brand-light;
+@_dashbrd_input_text:    @brand-superdark ;
+
+
+
+
+// --------------------------------------
+// MENU TOP (CSS)
+// --------------------------------------
+
+@_menu_bg:               @brand-lighter ;
+@_menu_border_color:     @brand-standard ;
+
+
+@_menu_link:             @brand-darker ;
+@_menu_link_bg:          @brand-lighter ;
+@_menu_link_hover:       @brand-verydark ;
+@_menu_link_hover_bg:    @brand-light ;
+
+@_menu_link_bg_level1:         @brand-light ;
+@_menu_link_bg_level1_hover:   @brand-light ;
+@_menu_link_bg_level2:         @brand-light ;
+@_menu_link_bg_level2_hover:   @brand-lighter ;
+@_menu_link_bg_level3:         @brand-lighter ;
+@_menu_link_bg_level3_hover:   @brand-light ;
+
+
+
+
+// --------------------------------------
+// MENU LEFT (JS)
+// --------------------------------------
+@_menu_left_bg:                   @brand-standard ;
+
+@_menu_left_level_1_color:        @brand-darker ;
+@_menu_left_level_1_bg:           @brand-light ;
+@_menu_left_level_1_hover_color:  @brand-verylight ;
+@_menu_left_level_1_hover_bg:     @brand-dark ;
+
+@_menu_left_level_2_color:        @brand-darker ;
+@_menu_left_level_2_bg:           @brand-lighter ;
+@_menu_left_level_2_hover_color:  @brand-superdark ;
+@_menu_left_level_2_hover_bg:     @brand-light ;
+
+@_menu_left_level_3_color:        @brand-darker ;
+@_menu_left_level_3_bg:           @brand-lighter ;
+@_menu_left_level_3_hover_color:  @brand-superdark ;
+@_menu_left_level_3_hover_bg:     @brand-light ;
+
+
+// Just additional stuff
+@_menu_open_color: @brand-lighter ;
+@_menu_open_bg:    @brand-darker ;
+
+
+
+
+
+
+// --------------------------------------
+// HEADER H1
+// --------------------------------------
+// Header right on top of #content (h1 only once per page)
+@_brand-h1-color:       @brand-lighter ;
+@_brand-h1-bg:          @brand-dark ;
+@_brand-h1-border-top:  1px @brand-standard solid ;
+
+
+
+
+
+// --------------------------------------
+// ACTIONBAR
+// --------------------------------------
+// PENDENT: Button-Parameter anwenden
+@_actionbar-bg:                   @brand-light;
+@_actionbar-bg-active:            @brand-lighter;
+
+@_actionbar-font-color:           @brand-dark;
+@_actionbar-font-color-active:    @brand-dark;
+
+@_actionbar-border-color:         @brand-dark;
+@_actionbar-border-color-active:  @brand-dark ;
+
+@_actionbar-hover-bg:             @brand-lighter;
+@_actionbar-hover-color:          @brand-verydark;
+
+@_actionbar-font-color-disabled:  @brand-standard;
+
+
+
+// --------------------------------------
+// TABS
+// --------------------------------------
+// background tabs panel (data/content)
+@_tabs-bg:                    @brand-superlight ;
+@_tabs-panel-bg:              @brand-verylight ; // like active
+@_tabs-border-color:          @brand-standard ;
+
+@_tabs-default-bg:            @brand-superlight;
+@_tabs-default-color:         @brand-darker;
+@_tabs-default-hover-bg:      @brand-lighter;
+@_tabs-default-hover-color:   @brand-darker;
+
+@_tabs-active-bg:             darken( @brand-verylight, 3% );
+@_tabs-active-color:          @brand-darker;
+@_tabs-active-hover-bg:       @brand-verylight;
+@_tabs-active-hover-color:    @brand-darker;
+
+
+
+
+
+// --------------------------------------
+// MESSAGES
+// --------------------------------------
+// OK (green)
+@msg-ok-strong:       @msg-green-strong;
+@cmsg-ok-light:       @msg-green-light;
+
+// Error (Red)
+@msg-error-strong:    @msg-red-strong;
+@msg-error-light:     @msg-red-light;
+
+// Info/Hint (Blue)
+@msg-hint-strong:     @msg-blue-strong;
+@msg-hint-light:      @msg-blue-light;
+
+// Warning (Orange)
+@msg-warning-strong:  @msg-orange-strong; // more brown
+@msg-warning-light:   @msg-orange-light;
+
+
+
+
+
+// --------------------------------------
+// TABLES
+// --------------------------------------
+
+@_table-border-color:             @brand-standard; //  table and cell border
+
+@_table-bg:                       transparent; //  overall background-color
+@_table-bg-accent:                @brand-lighter; //  for striping
+@_table-bg-hover:                 @brand-superlight;
+@_table-bg-active:                @_table-bg-hover;
+
+@_table-caption-bg:               transparent ;
+@_table-caption-color:            @brand-dark;
+
+// --------------
+// Table Cells
+// --------------
+@_t-cell-text-color:              @brand-verydark;
+@_t-cell-th-text-color:            @brand-dark; // even for label/.label in tables
+
+@_t-cell-head-bg:                 @brand-dark;
+@_t-cell-head-bg-accent:          @gray-light; // PENDENT: wo eingesetzt
+@_t-cell-head-text:               @brand-superlight;
+@_t-cell-head-text-accent:        @brand-lighter; // Links
+
+@_t-cell-label-text:              @brand-darker;
+@_t-cell-label-text-accent:       @brand-superdark;
+@_t-cell-data-text:               @brand-verydark;
+@_t-cell-data-text-accent:        @brand-superdark;
+
+@_t-cell-databox-text-color:      @brand-darker ;
+@_t-cell-databox-border-color:    @brand-light ;
+
+@_t-cell-foot-text:               @brand-superdark;
+
+// -----------------------
+// Zebra effect in list tables
+// -----------------------
+@_t-row-zebra-bg-odd:             @brand-verylight;
+@_t-row-zebra-bg-even:            @brand-lighter;
+
+@_table-list-zebra-text-color:    @brand-dark ;
+@_table-list-zebra-link-color:    @brand-standard ;
+
+@_t-row-zebra-bg-hover:           @brand-superlight;
+
+
+
+
+
+
+// --------------------------------------
+// TABLE HORIZONTAL (tbl.horizontal)
+// --------------------------------------
+//@_table-horiz-th-color:  @brand-darker ;
+//@_table-horiz-td-color:  @brand-verydark ;
+
+// -----------------------
+// CAPTION (caption & th.caption)
+// -----------------------
+//@_table-horiz-caption-color:  @brand-darker ;
+//@_table-horiz-caption-bg:     @brand-verylight ;
+
+// -----------------------
+// SPAN DATA
+// -----------------------
+
+
+
+
+
+// --------------------------------------
+// TABLE LIST (tbl.list)
+// --------------------------------------
+// Table list with zebra effect, header and footer
+// Zebra effect in list tables
+
+// -----------------------
+// HEADER (thead)
+// -----------------------
+
+// -----------------------
+// FOOTER (tfoot)
+// -----------------------
+
+
+
+
+
+// --------------------------------------
+// CONTROL PANELS
+// --------------------------------------
+
+@_controlpanel-bg-color:      @brand-verylight ;
+@_controlpanel-bg:            @_bg_style_controlpanel ;
+@_controlpanel-color:         @brand-dark  ;
+@_controlpanel-header-color:  @brand-dark  ;
+@_controlpanel-border-color:  @brand-standard  ;
+
+
+
+
+
+// --------------------------------------
+// FORM ELEMENTS
+// --------------------------------------
+@_formelement-focus-bg:     @brand-light ;
+@_formelement-focus-text:   @brand-darker ;
+@_formelement-focus-border: 1px @brand-verydark solid ;
+
+
+
+
+
+// --------------------------------------
+// BUTTONS
+// --------------------------------------
+
+// -----------------------
+// With Manipulation
+// -----------------------
+// Button with manipulation (submit etc.)
+@_button-strong-color:                @brand-verylight;
+@_button-strong-bg:                   @brand-dark;
+@_button-strong-border-color:         @brand-darker;
+
+@_button-strong-hover-color:          @brand-lighter;
+@_button-strong-hover-bg:             @brand-darker;
+@_button-strong-hover-border-color:   @brand-superdark;
+
+@_button-strong-active-color:         @brand-lighter;
+@_button-strong-active-bg:            @brand-superdark;
+@_button-strong-active-border-color:  @brand-superdark;
+
+// -----------------------
+// NEUTRAL
+// -----------------------
+// Button without data manipulation (reset, cancel, open, show etc.)
+@_button-neutral-color:                 @brand-darker;
+@_button-neutral-bg:                    @brand-lighter;
+@_button-neutral-border-color:          @brand-dark;
+
+@_button-neutral-hover-color:           @brand-darker;
+@_button-neutral-hover-bg:              @brand-verylight;
+@_button-neutral-hover-border-color:    @brand-dark;
+
+@_button-neutral-active-color:          @brand-superdark;
+@_button-neutral-active-bg:             @brand-standard;
+@_button-neutral-active-border-color:   @brand-verydark;
+
+
+// -------------------
+// Diverse Button states
+// -------------------
+//@_button-primary-color:               @button-primary-color;
+//@_button-primary-bg:                  @button-primary-bg;
+//@_button-primary-border-color:        darken(@button-primary-bg, 5%) ;
+
+@_button-success-color:                 @color-green-strong;
+@_button-success-bg:                    @color-green-light;
+@_button-success-border-color:          darken(@color-green-strong, 5%) ;
+
+@_button-warning-color:                 @color-orange-strong;
+@_button-warning-bg:                    @color-orange-light;
+@_button-warning-border-color:          darken(@color-orange-strong, 5%) ;
+
+@_button-info-color:                    @color-blue-strong;
+@_button-info-bg:                       @color-blue-light;
+@_button-info-border-color:             darken(@color-blue-strong, 5%) ;
+
+@_button-link-disabled-color:           @brand-light ;
+
+
+
+
+
