commit c66e4f154ab889d28ac97462d070db3005e608a1
Author: Hans Peter Schlaepfer <hanspeter.schlaepfer@revamp-it.ch>
Date:   Fri Jan 4 06:05:03 2019 +0100

    Neues kivitendo Design Aenderungen in templates/webpages/generic*
    
    Dateien in generic/* und generictranslations/*

diff --git a/templates/webpages/generic/calculate_qty.html b/templates/webpages/generic/calculate_qty.html
index bd347aa81..4ca63fc9a 100644
--- a/templates/webpages/generic/calculate_qty.html
+++ b/templates/webpages/generic/calculate_qty.html
@@ -1,86 +1,95 @@
-[%- USE T8 %]
-[%- USE HTML %]
- <form name="CalcQtyForm" id="calc_qty_form_id">
+[% USE T8 %]
+[% USE HTML %]
 
-  <input type="hidden" name="input_name" value="[% HTML.escape(input_name) %]">
-  <input type="hidden" name="input_id"   value="[% HTML.escape(input_id) %]">
+<form name="CalcQtyForm" id="calc_qty_form_id">
 
-  <table width="100%">
-   <tr><td>[% 'Please insert object dimensions below.' | $T8 %]</td></tr>
+<!-- <h1>[% #title %]</h1> --><!-- PENDENT: wieso wurde das entfernt? Braucht es hier keinen Titel? -->
 
-   <tr>
-    <td>
+<input type="hidden" name="input_name" value="[% HTML.escape(input_name) %]">
+<input type="hidden" name="input_id" value="[% HTML.escape(input_id) %]">
 
-     <table>
-      <tr class="listheading">
+<table class="tbl-list">
+  <caption>[% 'Please insert object dimensions below.' | $T8 %]</caption>
+  <thead>
+     <tr>
        [% FOREACH col = HEADER %]
-        <th nowrap class="listheading">[% col.column_title %]</a></th>
+         <th>[% col.column_title %]</a></th>
        [% END %]
+     </tr>
+  </thead>
+  <tbody>
+    [% FOREACH row = VARIABLES %]
+      <tr class="listrow[% loop.count % 2 %]">
+        <td>[% HTML.escape(row.description) %]:</td><td><input type="text" id="[% row.name %]" name="[% row.name %]" value=""></td>
+        <td>[% HTML.escape(row.unit) %]</td>
       </tr>
+    [% END %]
+  </tbody>
+</table>
 
-      [% FOREACH row = VARIABLES %]
-       <tr class="listrow[% loop.count % 2 %]">
-        <td>[% HTML.escape(row.description) %]:</td><td><input id="[% row.name %]" name="[% row.name %]" value=""></td>
-        <td>[% HTML.escape(row.unit) %]</td>
-       </tr>
-      [% END %]
-     </table>
+<div class="buttons">
+  <button type="button" onclick="calculate_qty()">[% 'Calculate' | $T8 %]</button>
+</div>
+
+</form>
+
+<script type="text/javascript">
 
-    </td>
-   </tr>
-  </table>
- <button type="button" onclick="calculate_qty()">[% 'Calculate' | $T8 %]</button>
- </form>
+  function calculate_qty() {
 
- <script type="text/javascript">
-   function calculate_qty() {
-[%- FOREACH row = VARIABLES %]
-     var [% row.name %] = parse_amount('[% MYCONFIG.numberformat %]', $('#calc_qty_form_id #[% row.name %]').val());
-[%- END %]
+    [% FOREACH row = VARIABLES %]
+      var [% row.name %] = parse_amount('[% MYCONFIG.numberformat %]', $('#calc_qty_form_id #[% row.name %]').val());
+    [% END %]
      var result = [% formel %];
      result = number_format(result, 2, '[% MYCONFIG.numberformat %]');
+     /* Every Element should be assigned by ID and not with NAME, modern Browsers handle that since 2006 or a bit later */
      if (document.CalcQtyForm.input_id.value) {
        document.getElementById(document.CalcQtyForm.input_id.value).value = result;
      } else {
        document.getElementsByName(document.CalcQtyForm.input_name.value)[0].value = result;
      }
      $('#calc_qty_dialog').dialog('close');
-   }
 
-   function parse_amount(numberformat, amount) {
-     if (numberformat == '1.000,00' || numberformat == '1000,00')
-       amount = amount.replace(/\./g, "").replace(/,/, ".");
-     if (numberformat == "1'000.00")
-       amount = amount.replace(/\'/g, '');
-     return amount.replace(/,/g, '');
-   }
+  }
 
-   function number_format(number, precision, numberformat) {
-     number = Math.round( number * Math.pow(10, precision) ) / Math.pow(10, precision);
-     var nf     = numberformat.replace(/\d/g, '').split('').reverse();
-     var sep    = nf[0];
-     var th_sep = nf[1];
+  function parse_amount(numberformat, amount) {
+  
+    if (numberformat == '1.000,00' || numberformat == '1000,00')
+      amount = amount.replace(/\./g, "").replace(/,/, ".");
+    if (numberformat == "1'000.00")
+      amount = amount.replace(/\'/g, '');
+    return amount.replace(/,/g, '');
 
-     str_number = number+"";
-     arr_int = str_number.split(".");
-     if(!arr_int[0]) arr_int[0] = "0";
-     if(!arr_int[1]) arr_int[1] = "";
-     if(arr_int[1].length < precision) {
-       nachkomma = arr_int[1];
-       for(i=arr_int[1].length+1; i <= precision; i++) {
-         nachkomma += "0";
-       }
-       arr_int[1] = nachkomma;
-     }
-     if(th_sep != "" && arr_int[0].length > 3) {
-       raw_arr_int = arr_int[0];
-       arr_int[0] = "";
-       for(j = 3; j < raw_arr_int.length ; j+=3) {
-         arr_int[0] = th_sep + raw_arr_int.slice(raw_arr_int.length - j, raw_arr_int.length - j + 3) +  arr_int[0] + "";
-       }
-       str_first = raw_arr_int.substr(0, (raw_arr_int.length % 3 == 0) ? 3 : (raw_arr_int.length % 3));
-       arr_int[0] = str_first + arr_int[0];
-     }
-     return arr_int[0] + sep + arr_int[1];
-   }
- </script>
+  }
+
+  function number_format(number, precision, numberformat) {
+  
+    number = Math.round( number * Math.pow(10, precision) ) / Math.pow(10, precision);
+    var nf     = numberformat.replace(/\d/g, '').split('').reverse();
+    var sep    = nf[0];
+    var th_sep = nf[1];
+
+    str_number = number+"";
+    arr_int = str_number.split(".");
+    if(!arr_int[0]) arr_int[0] = "0";
+    if(!arr_int[1]) arr_int[1] = "";
+    if(arr_int[1].length < precision) {
+      nachkomma = arr_int[1];
+      for(i=arr_int[1].length+1; i <= precision; i++) {
+        nachkomma += "0";
+      }
+      arr_int[1] = nachkomma;
+    }
+    if(th_sep != "" && arr_int[0].length > 3) {
+      raw_arr_int = arr_int[0];
+      arr_int[0] = "";
+      for(j = 3; j < raw_arr_int.length ; j+=3) {
+        arr_int[0] = th_sep + raw_arr_int.slice(raw_arr_int.length - j, raw_arr_int.length - j + 3) +  arr_int[0] + "";
+      }
+      str_first = raw_arr_int.substr(0, (raw_arr_int.length % 3 == 0) ? 3 : (raw_arr_int.length % 3));
+      arr_int[0] = str_first + arr_int[0];
+    }
+    return arr_int[0] + sep + arr_int[1];
+    
+  }
+</script>
diff --git a/templates/webpages/generic/error.html b/templates/webpages/generic/error.html
index 1e23f73c2..9cf6000e4 100644
--- a/templates/webpages/generic/error.html
+++ b/templates/webpages/generic/error.html
@@ -1,6 +1,7 @@
-[%- USE T8 %]
-[%- USE HTML %]
+[% USE T8 %]
+[% USE HTML %]
 
- <div class="message_error">[% IF title_error %][% title_error %][% ELSE %][% 'Error!' | $T8 %][% END %]
- <p class="message_error_label">[% label_error %]</p>
- </div>
+<div class="message message_error">
+  <h4>[% IF title_error %][% title_error %][% ELSE %][% 'Error!' | $T8 %][% END %]</h4>
+  <p>[% label_error %]</p>
+</div>
diff --git a/templates/webpages/generic/exception.html b/templates/webpages/generic/exception.html
index 47b10606c..4519c9058 100644
--- a/templates/webpages/generic/exception.html
+++ b/templates/webpages/generic/exception.html
@@ -1,22 +1,22 @@
-[%- USE LxERP %]
-[%- USE HTML %]
+[% USE LxERP %]
+[% USE HTML %]
 
- <h1 class="message_error">[%- LxERP.t8('Error!') %]</h1>
+<div class="message message_error">[% LxERP.t8('Error!') %]</div>
 
- <p>
-  [%- LxERP.t8('An exception occurred during execution.') %]
- </p>
+<div class="wrapper">
 
- <div>
-  <table>
-   <tr>
-    <td valign="top">[%- LxERP.t8('Type') %]:</td>
-    <td valign="top">[%- HTML.escape(error.type) %]</td>
-   </tr>
+<p>[% LxERP.t8('An exception occurred during execution.') %]</p>
+
+<table class="tbl-horizontal">
+  <tr>
+    <td>[% LxERP.t8('Type') %]:</td>
+    <td>[% HTML.escape(error.type) %]</td>
+  </tr>
+  <tr>
+    <td>[% LxERP.t8('Information') %]:</td>
+    <td><code>[% HTML.escape(error.info) %]</code></td>
+  </tr>
+</table>
+
+</div><!-- /.wrapper -->
 
-   <tr>
-    <td valign="top">[%- LxERP.t8('Information') %]:</td>
-    <td valign="top"><pre>[%- HTML.escape(error.info) %]</pre></td>
-   </tr>
-  </table>
- </div>
diff --git a/templates/webpages/generic/form_info.html b/templates/webpages/generic/form_info.html
index d56e1fcb0..db54975f7 100644
--- a/templates/webpages/generic/form_info.html
+++ b/templates/webpages/generic/form_info.html
@@ -1,13 +1,10 @@
-[%- USE P -%]
-<div class="message_ok">
- <b>[% P.simple_format(message) %]</b>
-</div>
+[% USE P %]
 
-<script type="text/javascript">
-<!--
+<div class="message message_ok">[% P.simple_format(message) %]</div>
+
+<script type="text/javascript"><!--
  // If JavaScript is enabled, the whole thing will be reloaded.
  // The reason is: When one changes his menu setup (HTML / CSS ...)
  // it now loads the correct code into the browser instead of do nothing.
  setTimeout("top.frames.location.href='login.pl?action=company_logo'",500);
--->
-</script>
+--></script>
diff --git a/templates/webpages/generic/information.html b/templates/webpages/generic/information.html
index c0f70a0cd..ace8ba814 100644
--- a/templates/webpages/generic/information.html
+++ b/templates/webpages/generic/information.html
@@ -1,4 +1,6 @@
-[%- USE T8 %]
-<div class="message_ok">[% IF title_information %][% title_information %][% ELSE %][% 'Information' | $T8 %][% END %]</div>
-<p>[% label_information %]</p>
+[% USE T8 %]
 
+<div class="message message_info">
+  <h4>[% IF title_information %][% title_information %][% ELSE %][% 'Information' | $T8 %][% END %]</h4>
+  <p>[% label_information %]</p>
+</div>
diff --git a/templates/webpages/generic/new_item.html b/templates/webpages/generic/new_item.html
index 0a37257d7..3fdd4cc02 100644
--- a/templates/webpages/generic/new_item.html
+++ b/templates/webpages/generic/new_item.html
@@ -1,40 +1,38 @@
-[%- USE T8 %]
-[%- USE HTML %]
-[%- IF is_wrong_pclass == NOTFORSALE %]
-<h4 class="error">[% 'searched part not for sale' | $T8 %]</h4>
-[%- ELSE %]
-[%- IF is_wrong_pclass == NOTFORPURCHASE %]
-<h4 class="error">[% 'searched part not for purchase' | $T8 %]</h4>
-[%- ELSE %]
-<h4 class="error">[% 'Item does not exists in the database' | $T8 %]
-[% IF INSTANCE_CONF.get_create_part_if_not_found %]
-    <p>[% 'What type of item is this?' | $T8 %]</h4>
+[% USE T8 %]
+[% USE HTML %]
 
-    <form method="post" action="controller.pl">
+<form method="post" action="controller.pl">
+<div class="wrapper">
+  [% IF is_wrong_pclass == NOTFORSALE %]
+    <p class="message message_error">[% 'searched part not for sale' | $T8 %]</p>
+  [% ELSE %]
+    [% IF is_wrong_pclass == NOTFORPURCHASE %]
+      <p class="message message_error">[% 'searched part not for purchase' | $T8 %]</p>
+    [% ELSE %]
+      <p class="message message_error">[% 'Item does not exists in the database' | $T8 %]</p>
+      [% IF INSTANCE_CONF.get_create_part_if_not_found %]
+        <p>[% 'What type of item is this?' | $T8 %]</p>
+        <p>
+          <input type="radio" name="part.part_type" value="part" checked> [% 'Part' | $T8 %]<br>
+          <input type="radio" name="part.part_type" value="assembly"> [% 'Assembly' | $T8 %]<br>
+          <input type="radio" name="part.part_type" value="service"> [% 'Service' | $T8 %]<br>
+          <input type="radio" name="part.part_type" value="assortment"> [% 'Assortment' | $T8 %]
+        </p>
+        [% FOREACH var = HIDDENS %]
+          <input type="hidden" name="[% HTML.escape(var.name) %]" value="[% HTML.escape(var.value) %]">
+        [% END %]
+        <input type="hidden" name="action" value="Part/dispatch">
+        <div class="buttons">
+          <input type="submit" name="action_add_from_record" value="[% 'Continue' | $T8 %]">
+        </div>
+      [% END %]<!-- /IF INSTANCE_CONF.get_create_part_if_not_found -->
+    [% END %]<!-- /ELSE -> IF is_wrong_pclass == NOTFORPURCHASE -->
+  [% END %]<!-- /ELSE -> IF is_wrong_pclass == NOTFORSALE -->
+  <div class="buttons"><input id='back_button' type='button' class="neutral" value="[% 'Back' | $T8 %]"></div>
+</div><!-- /.wrapper -->
+</form>
 
-      <p>
 
-      <input class="radio" type="radio" name="part.part_type" value="part" checked>&nbsp;[% 'Part'       | $T8 %]<br>
-      <input class="radio" type="radio" name="part.part_type" value="assembly">    &nbsp;[% 'Assembly'   | $T8 %]<br>
-      <input class="radio" type="radio" name="part.part_type" value="service">     &nbsp;[% 'Service'    | $T8 %]<br>
-      <input class="radio" type="radio" name="part.part_type" value="assortment">  &nbsp;[% 'Assortment' | $T8 %]
-      <p>
-
-      [%- FOREACH var = HIDDENS %]
-      <input type="hidden" name="[% HTML.escape(var.name) %]" value="[% HTML.escape(var.value) %]">
-      [%- END %]
-    </p>
-
-      <input type="hidden" name="action" value="Part/dispatch">
-      <input class="submit" type="submit" name="action_add_from_record" value="[% 'Continue' | $T8 %]">
-[%- ELSE %]
-</h4>
-[%- END %]
-[%- END %]
-[%- END %]
-      <input id='back_button' type='button' class="submit" value="[% 'Back' | $T8 %]">
-    </p>
-  </form>
 <script type='text/javascript'>
   $(function(){ $('#back_button').click(function(){ window.history.back(-1) }) })
 </script>
diff --git a/templates/webpages/generic/print_options.BACKUP.html b/templates/webpages/generic/print_options.BACKUP.html
new file mode 100644
index 000000000..cde067e5c
--- /dev/null
+++ b/templates/webpages/generic/print_options.BACKUP.html
@@ -0,0 +1,75 @@
+[% USE T8 %]
+[% USE HTML %]
+<!-- 
+  PENDENT: Was soll diese Form des Dialogs? 
+           Show_Headers sollte hier sowieso auf TRUE gestellt sein, 
+           und der Dialog könnte vertikal statt horizontal ausgerichtet sein. 
+-->
+<table class="tbl-plain condensed">
+  [% IF show_headers %]
+    <thead>
+      <tr>
+       [% FOREACH row = SELECTS %]
+         [% IF row.show %]
+           <th id="print_options_header_[% row.sname %]">[% row.hname %]</th>
+         [% END %]
+       [% END %]
+       [% IF display_copies %]
+         <th id="print_options_header_copies">[% 'Copies' | $T8 %]</th>
+       [% END %]
+       [% IF display_groupitems %]
+         <th id="print_options_header_groupitems">[% 'Group Items' | $T8 %]</th>
+       [% END %]
+       [% IF display_bothsided %]
+         <th id="print_options_header_bothsided">[% 'Both-sided' | $T8 %]</th>
+       [% END %]
+       [% IF display_remove_draft %]
+         <th id="print_options_header_remove_draft">[% 'Remove Draft' | $T8 %]</th>
+       [% END %]
+      </tr>
+    </thead>
+  [% END %]
+  <tbody>
+    <tr>
+      [% FOREACH row = SELECTS %]
+        [% IF row.show %]
+          <td id="print_options_input_[% row.sname %]">
+            <select name="[% name_prefix %][% row.sname %]" id="[% id_prefix %][% row.sname %]">
+              [% FOREACH data = row.DATA %]
+                <option value="[% data.value %]" [% data.selected %]>[% data.oname %]</option>
+              [% END %]
+            </select>
+          </td>
+        [% END %]
+      [% END %]
+      [% IF display_copies %]
+        <td id="print_options_input_copies">
+          [% IF !show_headers %][% 'Copies' | $T8 %][% END %]
+          <input type="text" name="[% name_prefix %]copies" id="[% id_prefix %]copies" size="2" value="[% HTML.escape(copies) %]">
+        </td>
+      [% END %]
+      [% IF display_groupitems %]
+        <td id="print_options_input_groupitems">
+          [% IF !show_headers %][% 'Group Items' | $T8 %][% END %]
+          <input name="[% name_prefix %]groupitems" id="[% id_prefix %]groupitems" type="checkbox" [% groupitems_checked %]>
+        </td>
+      [% END %]
+      [% IF display_bothsided %]
+        <td id="print_options_input_bothsided">
+          [% IF !show_headers %][% 'Both-sided' | $T8 %][% END %]
+          <input name="[% name_prefix %]bothsided" id="[% id_prefix %]bothsided" type="checkbox" [% bothsided_checked %]>
+        </td>
+      [% END %]
+      [% IF display_remove_draft %]
+        <td id="print_options_input_remove_draft">
+          [% IF !show_headers %][% 'Remove Draft' | $T8 %][% END %]
+          <input name="[% name_prefix %]remove_draft" id="[% id_prefix %]remove_draft" type="checkbox" [% remove_draft_checked %]>
+        </td>
+     [% END %]
+    </tr>
+    </tbody>
+</table>
+
+[% IF status_msg %] 
+  <div class="message message_hint">[% status_msg %]</div>
+[% END %] 
\ No newline at end of file
diff --git a/templates/webpages/generic/print_options.html b/templates/webpages/generic/print_options.html
index be8343f11..f130ba93a 100644
--- a/templates/webpages/generic/print_options.html
+++ b/templates/webpages/generic/print_options.html
@@ -1,66 +1,65 @@
-[%- USE T8 %]
+[% USE T8 %]
 [% USE HTML %]
+<!--
+  PENDENT: Was soll diese Form des Dialogs?
+           Show_Headers sollte hier sowieso auf TRUE gestellt sein,
+           und der Dialog könnte vertikal statt horizontal ausgerichtet sein.
+-->
 
-<table width="100%" cellspacing="0" cellpadding="0">
- <tr>
-  <td>
-   <table>
-    [%- IF show_headers %]
-    <tr>
-     [%- FOREACH row = SELECTS %]
-     [%- IF row.show %]
-     <th align="left" id="print_options_header_[% row.sname %]">[%- row.hname %]</th>
-     [%- END %]
-     [%- END %]
-     [%- IF display_copies %]
-     <th align="left" id="print_options_header_copies">[% 'Copies' | $T8 %]</th>
-     [%- END %]
-     [%- IF display_groupitems %]
-     <th align="left" id="print_options_header_groupitems">[% 'Group Items' | $T8 %]</th>
-     [%- END %]
-     [%- IF display_bothsided %]
-     <th align="left" id="print_options_header_bothsided">[% 'Both-sided' | $T8 %]</th>
-     [%- END %]
-     [%- IF display_remove_draft %]
-     <th align="left" id="print_options_header_remove_draft">[% 'Remove Draft' | $T8 %]</th>
-     [%- END %]
-    </tr>
-    [%- END %]
-    <tr>
-     [%- FOREACH row = SELECTS %]
-     [%- IF row.show %]
-     <td id="print_options_input_[% row.sname %]">
-      <select name="[%- name_prefix %][%- row.sname %]" id="[%- id_prefix %][%- row.sname %]">
-       [%- FOREACH data = row.DATA %]
-        <option value="[% data.value %]" [% data.selected %]>[% data.oname %]</option>
-       [%- END %]
-      </select>
-     </td>
-     [%- END %]
-     [%- END %]
-     [%- IF display_copies %]
-     <td id="print_options_input_copies">[%- IF !show_headers %][%- 'Copies' | $T8 %][%- END %]<input name="[%- name_prefix %]copies" id="[% id_prefix %]copies" size="2" value="[% HTML.escape(copies) %]"></td>
-     [%- END %]
-     [%- IF display_groupitems %]
-     <td id="print_options_input_groupitems">[%- IF !show_headers %][% 'Group Items' | $T8 %][%- END %]
-      <input name="[%- name_prefix %]groupitems" id="[% id_prefix %]groupitems" type="checkbox" class="checkbox" [% groupitems_checked %]>
-     </td>
-     [%- END %]
-     [%- IF display_bothsided %]
-     <td id="print_options_input_bothsided">[%- IF !show_headers %][% 'Both-sided' | $T8 %][%- END %]
-      <input name="[%- name_prefix %]bothsided" id="[% id_prefix %]bothsided" type="checkbox" class="checkbox" [% bothsided_checked %]>
-     </td>
-     [%- END %]
-     [%- IF display_remove_draft %]
-     <td id="print_options_input_remove_draft">[%- IF !show_headers %][% 'Remove Draft' | $T8 %][%- END %]
-      <input name="[%- name_prefix %]remove_draft" id="[% id_prefix %]remove_draft" type="checkbox" class="checkbox" [% remove_draft_checked %]>
-     </td>
-     [%- END %]
-    </tr>
-   </table>
-  </td>
-  <td align=right>
-   <table><tr><th>[% status_msg %]</th></tr></table>
-  </td>
- </tr>
+<table class="tbl-horizontal">
+  <colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup>
+  [% # IF show_headers %]
+    <body>
+       [% FOREACH row = SELECTS %]
+         [% IF row.show %]
+           <tr>
+             <th id="print_options_header_[% row.sname %]">[% row.hname %]</th>
+             <td id="print_options_input_[% row.sname %]">
+               <select name="[% name_prefix %][% row.sname %]" id="[% id_prefix %][% row.sname %]" class="wi-lightwide">
+                 [% FOREACH data = row.DATA %]
+                   <option value="[% data.value %]" [% data.selected %]>[% data.oname %]</option>
+                 [% END %]
+               </select>
+             </td>
+           </tr>
+         [% END %]
+       [% END %]
+       [% IF display_copies %]
+         <tr>
+           <th id="print_options_header_copies">[% 'Copies' | $T8 %]</th>
+           <td id="print_options_input_copies">
+             <input type="text" name="[% name_prefix %]copies" id="[% id_prefix %]copies" size="2" value="[% HTML.escape(copies) %]" class="wi-small">
+           </td>
+         </tr>
+       [% END %]
+       [% IF display_groupitems %]
+         <tr>
+           <th id="print_options_header_groupitems">[% 'Group Items' | $T8 %]</th>
+           <td id="print_options_input_groupitems">
+             <input name="[% name_prefix %]groupitems" id="[% id_prefix %]groupitems" type="checkbox" [% groupitems_checked %]>
+           </td>
+         </tr>
+       [% END %]
+       [% IF display_bothsided %]
+         <tr>
+           <th id="print_options_header_bothsided">[% 'Both-sided' | $T8 %]</th>
+           <td id="print_options_input_bothsided">
+             <input name="[% name_prefix %]bothsided" id="[% id_prefix %]bothsided" type="checkbox" [% bothsided_checked %]>
+           </td>
+         </tr>
+       [% END %]
+       [% IF display_remove_draft %]
+         <tr>
+           <th id="print_options_header_remove_draft">[% 'Remove Draft' | $T8 %]</th>
+           <td id="print_options_input_remove_draft">
+             <input name="[% name_prefix %]remove_draft" id="[% id_prefix %]remove_draft" type="checkbox" [% remove_draft_checked %]>
+           </td>
+         </tr>
+       [% END %]
+    </body>
+  [% # END %]
 </table>
+
+[% IF status_msg %]
+  <div class="message message_hint">[% status_msg %]</div>
+[% END %]
diff --git a/templates/webpages/generic/select_delivery_customer.html b/templates/webpages/generic/select_delivery_customer.html
index 8c8f48ae2..a773ab0d8 100644
--- a/templates/webpages/generic/select_delivery_customer.html
+++ b/templates/webpages/generic/select_delivery_customer.html
@@ -1,51 +1,48 @@
-[%- USE T8 %]
-[%- USE HTML %]
-<h1>[% title %]</h1>
-
- <form name="Form">
-
-  <input type="hidden" name="input_name" value="[% HTML.escape(input_name) %]">
-  <input type="hidden" name="input_id" value="[% HTML.escape(input_id) %]">
-
-  <table width="100%">
-   <tr><td>[% 'Please select a customer from the list below.' | $T8 %]</td></tr>
-
-   <tr>
-    <td>
+[% USE T8 %]
+[% USE HTML %]
 
-     <table>
-      <tr class="listheading">
-       <th class="listheading">&nbsp;</th>
-       [%- FOREACH col = HEADER %]
-       <th nowrap class="listheading"><a href="[% HTML.escape(col.callback) %]">[% col.column_title %]</a></th>
-       [%- END %]
-      </tr>
+<h1>[% title %]</h1>
 
-      [%- FOREACH row = DELIVERY %]
-      <tr class="listrow[% loop.count % 2 %]">
-       <td><button type="button" onclick="customer_selected('[% loop.count %]')">Auswahl</button></td>
+<form name="Form">
+
+<input type="hidden" name="input_name" value="[% HTML.escape(input_name) %]">
+<input type="hidden" name="input_id" value="[% HTML.escape(input_id) %]">
+
+<p>[% 'Please select a customer from the list below.' | $T8 %]</p>
+
+
+<table class="tbl-list">
+  <thead>
+    <tr>
+      <th>&nbsp;</th>
+      [% FOREACH col = HEADER %]
+        <th><a href="[% HTML.escape(col.callback) %]">[% col.column_title %]</a></th>
+      [% END %]
+    </tr>
+  </thead>
+  <tbody>
+    [% FOREACH row = DELIVERY %]
+    <tr class="listrow[% loop.count % 2 %]">
+      <td><button type="button" onclick="customer_selected('[% loop.count %]')" class="neutral">Auswahl</button></td>
+      <td> <input type="hidden" id="id_[% loop.count %]" name="id_[% loop.count %]" value="[% HTML.escape(row.id) %]">
+      <input type="hidden" id="name_[% loop.count %]" name="name_[% loop.count %]" value="[% HTML.escape(row.name) %]">
+      [% HTML.escape(row.name) %] </td>
+      <td>[% HTML.escape(row.customernumber) %]</td>
+      <td>[% HTML.escape(row.address) %]</td>
+<!--
        <td>
-        <input type="hidden" id="id_[% loop.count %]" name="id_[% loop.count %]" value="[% HTML.escape(row.id) %]">
-        <input type="hidden" id="name_[% loop.count %]" name="name_[% loop.count %]" value="[% HTML.escape(row.name) %]">
-        [% HTML.escape(row.name) %]
+        <input type="hidden" id="description_[% loop.count %]" name="description_[% loop.count %]" value="[% HTML.escape(row.description) %]">
+        [% HTML.escape(row.description) %]
        </td>
-       <td>[% HTML.escape(row.customernumber) %]</td>
-       <td>[% HTML.escape(row.address) %]</td>
-<!--        <td> -->
-<!--         <input type="hidden" id="description_[% loop.count %]" name="description_[% loop.count %]" value="[% HTML.escape(row.description) %]"> -->
-<!--         [% HTML.escape(row.description) %] -->
-<!--        </td> -->
-      </tr>
-      [%- END %]
-     </table>
-
-    </td>
-   </tr>
-  </table>
-
- </form>
-
- <script type="text/javascript">
+ -->
+    </tr>
+    [% END %]
+  </tbody>
+</table>
+
+</form>
+
+<script type="text/javascript">
   <!--
       function customer_selected(selected) {
         var name = document.getElementsByName("name_" + selected)[0].value
@@ -57,5 +54,4 @@
         self.close();
       }
       //-->
- </script>
-
+</script>
diff --git a/templates/webpages/generic/select_vendor.html b/templates/webpages/generic/select_vendor.html
index 71e5d57fd..99c4cb911 100644
--- a/templates/webpages/generic/select_vendor.html
+++ b/templates/webpages/generic/select_vendor.html
@@ -1,61 +1,53 @@
-[%- USE T8 %]
-[%- USE HTML %]
+[% USE T8 %]
+[% USE HTML %]
 <h1>[% title %]</h1>
 
- <form name="Form">
+<form name="Form">
 
-  <input type="hidden" name="input_name" value="[% HTML.escape(input_name) %]">
-  <input type="hidden" name="input_id" value="[% HTML.escape(input_id) %]">
+<input type="hidden" name="input_name" value="[% HTML.escape(input_name) %]">
+<input type="hidden" name="input_id" value="[% HTML.escape(input_id) %]">
 
-  <table width="100%">
-   <tr><td>[% 'Please select a vendor from the list below.' | $T8 %]</td></tr>
+<p>[% 'Please select a vendor from the list below.' | $T8 %]</p>
 
-   <tr>
-    <td>
-
-     <table>
-      <tr class="listheading">
-       <th class="listheading">&nbsp;</th>
-       [%- FOREACH col = HEADER %]
-       <th nowrap class="listheading"><a href="[% HTML.escape(col.callback) %]">[% col.column_title %]</a></th>
-       [%- END %]
-      </tr>
-
-      [%- FOREACH row = VENDOR %]
+<table class="tbl-list">
+  <thead>
+    <tr>
+      <th>&nbsp;</th>
+      [% FOREACH col = HEADER %]
+        <th><a href="[% HTML.escape(col.callback) %]">[% col.column_title %]</a></th>
+      [% END %]
+    </tr>
+  </thead>
+  <tbody>
+    [% FOREACH row = VENDOR %]
       <tr class="listrow[% loop.count % 2 %]">
-       <td><button type="button" onclick="vendor_selected('[% loop.count %]')">Auswahl</button></td>
-       <td>
-        <input type="hidden" id="id_[% loop.count %]" name="id_[% loop.count %]" value="[% HTML.escape(row.id) %]">
-        <input type="hidden" id="name_[% loop.count %]" name="name_[% loop.count %]" value="[% HTML.escape(row.name) %]">
-        [% HTML.escape(name) %]
-       </td>
-       <td>[% HTML.escape(row.customernumber) %]</td>
-       <td>[% HTML.escape(row.address) %]</td>
-<!--        <td> -->
-<!--         <input type="hidden" id="description_[% loop.count %]" name="description_[% loop.count %]" value="[% HTML.escape(row.description) %]"> -->
-<!--         [% HTML.escape(row.description) %] -->
-<!--        </td> -->
+        <td><button type="button" onclick="vendor_selected('[% loop.count %]')">Auswahl</button></td>
+        <td>[% HTML.escape(name) %]
+          <input type="hidden" id="id_[% loop.count %]" name="id_[% loop.count %]" value="[% HTML.escape(row.id) %]">
+          <input type="hidden" id="name_[% loop.count %]" name="name_[% loop.count %]" value="[% HTML.escape(row.name) %]">
+        </td>
+        <td>[% HTML.escape(row.customernumber) %]</td>
+        <td>[% HTML.escape(row.address) %]</td>
+  <!--        <td> -->
+  <!--         <input type="hidden" id="description_[% loop.count %]" name="description_[% loop.count %]" value="[% HTML.escape(row.description) %]"> -->
+  <!--         [% HTML.escape(row.description) %] -->
+  <!--        </td> -->
       </tr>
-      [%- END %]
-     </table>
-
-    </td>
-   </tr>
-  </table>
-
- </form>
-
- <script type="text/javascript">
-  <!--
-      function vendor_selected(selected) {
-        var name = document.getElementsByName("name_" + selected)[0].value
-        var id = document.getElementsByName("id_" + selected)[0].value
-        window.opener.document.getElementsByName(document.Form.input_name.value)[0].value = name;
-        if (document.Form.input_id.value != "") {
-          window.opener.document.getElementsByName(document.Form.input_id.value)[0].value = id;
-        }
-        self.close();
+    [% END %]
+  </tbody>
+</table>
+
+</form>
+
+<script type="text/javascript"><!--
+    function vendor_selected(selected) {
+      var name = document.getElementsByName("name_" + selected)[0].value
+      var id = document.getElementsByName("id_" + selected)[0].value
+      window.opener.document.getElementsByName(document.Form.input_name.value)[0].value = name;
+      if (document.Form.input_id.value != "") {
+        window.opener.document.getElementsByName(document.Form.input_id.value)[0].value = id;
       }
-      //-->
- </script>
+      self.close();
+    }
+--></script>
 
diff --git a/templates/webpages/generic/set_longdescription.html b/templates/webpages/generic/set_longdescription.html
index 113a04d44..3e0ef6102 100644
--- a/templates/webpages/generic/set_longdescription.html
+++ b/templates/webpages/generic/set_longdescription.html
@@ -1,29 +1,39 @@
-[%- USE L -%][%- USE LxERP -%]
+[% USE L %]
+[% USE LxERP %]
 
-<div id="edit_longdescription_dialog" style="display: none">
- <p>
-  <table>
-   <tr>
-    <th align="right">[% LxERP.t8("Row") %]:</th>
-    <td id="popup_edit_longdescription_runningnumber"></td>
-   </tr>
+<div id="edit_longdescription_dialog" class="wrapper" style="display: none">
+<!--
+  PENDENT:
+  Eigentlich gibt es hier kein Formular, sollte es aber,
+  damit wir nicht zuletzt das ganze im CSS-Namensraum FORM
+  designen können. Es werden sonst nur die Standard-Elemente angezeigt.
+-->
 
-   <tr>
-    <th align="right">[% LxERP.t8("Part Number") %]:</th>
-    <td id="popup_edit_longdescription_partnumber"></td>
-   </tr>
+<table class="tbl-horizontal checkered" style="clear:left;">
+  <colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup>
+  <tbody>
+    <tr>
+      <th>[% LxERP.t8("Row") %]:</th>
+      <td id="popup_edit_longdescription_runningnumber"></td>
+    </tr>
+    <tr>
+      <th>[% LxERP.t8("Part Number") %]:</th>
+      <td id="popup_edit_longdescription_partnumber"></td>
+    </tr>
+    <tr>
+      <th>[% LxERP.t8("Description") %]:</th>
+      <td id="popup_edit_longdescription_description"></td>
+    </tr>
+  </tbody>
+</table>
 
-   <tr>
-    <th align="right">[% LxERP.t8("Description") %]:</th>
-    <td id="popup_edit_longdescription_description"></td>
-   </tr>
-  </table>
- </p>
+<p class="spacer">&nbsp;</p>
 
- <p id="popup_edit_longdescription_input_container"></p>
+<p id="popup_edit_longdescription_input_container" style="clear:left;"></p>
 
- <p>
-  [% L.button_tag("kivi.SalesPurchase.set_longdescription()", LxERP.t8("Assign")) %]
-  <a onclick="$('#edit_longdescription_dialog').dialog('close');" href="#">[% LxERP.t8("Abort") %]</a>
- </p>
+<div class="buttons">
+  [% L.button_tag("kivi.SalesPurchase.set_longdescription()", LxERP.t8("Assign"), class="button neutral") %]
+  <a onclick="$('#edit_longdescription_dialog').dialog('close');" href="#" class="button neutral">[% LxERP.t8("Abort") %]</a>
 </div>
+
+</div><!-- /#edit_longdescription_dialog -->
diff --git a/templates/webpages/generic/toggle_wrapper.html b/templates/webpages/generic/toggle_wrapper.html
new file mode 100644
index 000000000..38eb95405
--- /dev/null
+++ b/templates/webpages/generic/toggle_wrapper.html
@@ -0,0 +1,43 @@
+[% USE T8 %]
+[%
+  # Include this JS and these HTML toggle buttons right on the first position of a .wrapper container
+  # for minimizing / maximizing the surrounding .wrapper container
+  # First Symbols: former &or; & &lt; but now with icons
+  # It seems advantageous to give an id to the .wrapper-block e.g. #wrapper-1 or #wrapper-basic-data
+
+  # PENDENT: vielleicht noch generischer programmieren.
+%]
+
+<div class="toggles" id="toggles">
+  <script type="text/javascript">
+    var toggles_id = "#toggles" ; // surrounding container of the toggle buttons
+    var wrapper = new Object() ;
+    $(document).ready(function(){
+      if( $(toggles_id).parent().attr('class') == "wrapper" ) {
+        wrapper = $(toggles_id).parent() ; // closest surrounding wrapper to toggle, must have the class .wrapper
+        $(wrapper).addClass("toggled") ; // change the wrapper into a inline-block instead of a 100%-width-block
+      }
+      if( wrapper != "") {
+        var hi = -1; //height of the wrapper
+        $(wrapper).ready(function(){
+          if( hi <= -1 ) hi = $(wrapper).height(); // height of the wrapper
+        });
+        // Toggle to minimum
+        $("#toggler-1").click(function(){
+          $(wrapper).animate({height:"30px"},200).addClass("bordered");
+          $(this).toggle();
+          $("#toggler-2").toggle();
+        });
+        // Toggle back to maximum
+        $("#toggler-2").click(function(){
+          $(wrapper).animate({height:hi},200).removeClass("bordered");
+          $(this).toggle();
+          $("#toggler-1").toggle();
+        });
+      }
+    });
+  </script>
+  <a class="toggle min" id="toggler-1" href="#" style="display:visible;" title="[% 'Minimize Panel' | $T8 %]"></a>
+  <a class="toggle max" id="toggler-2" href="#" style="display:none;" title="[% 'Open Panel' | $T8 %]"></a>
+
+</div><!-- /.toggles /#toggles -->
diff --git a/templates/webpages/generictranslations/edit_email_strings.html b/templates/webpages/generictranslations/edit_email_strings.html
index 2db858dad..040b9ee07 100644
--- a/templates/webpages/generictranslations/edit_email_strings.html
+++ b/templates/webpages/generictranslations/edit_email_strings.html
@@ -1,41 +1,48 @@
-[%- USE T8 %]
-[%- USE HTML %]
+[% USE T8 %]
+[% USE HTML %]
+
 <h1>[% HTML.escape(title) %]</h1>
-[%- IF message %]
- <p>
- [% HTML.escape(message) %]
- </p>
-[%- END %]
- <form method="post" action="generictranslations.pl" id="form">
-  <table>
-   [%- FOREACH mail_string IN MAIL_STRINGS.keys.sort %]
-    <tr>
-      <th class="listheading">&nbsp;</th>
-      <th class="listheading">[% MAIL_STRINGS.$mail_string %]</th>
-     </tr>
-
-     [%- FOREACH language = LANGUAGES %]
-     <tr>
-      <td>
-       [%- IF language.id == 'default' %]
-       [% 'Default (no language selected)' | $T8 %]
-       [%- ELSE %]
-       [%- HTML.escape(language.description) %]
-       [%- END %]
-       [%- IF mail_string.search('preset_text_periodic_invoices') %]
-        <br />
-        <a href="doc/html/ch03.html#features.periodic-invoices.variables" target="_blank">?</a>
-       [%- END %]
-      </td>
-      <td>
-       [%- IF mail_string.search('preset') %]
-        <textarea name="translation__[% language.id %]__[% mail_string %]" rows="4" cols="60">[% HTML.escape(language.$mail_string) %]</textarea>
-       [%- ELSE %]
-        <input name="translation__[% language.id %]__[% mail_string %]" size="40" value="[% HTML.escape(language.$mail_string) %]">
-       [%- END %]
-      </td>
-     </tr>
-     [%- END %]
-   [%- END %]
-  </table>
- </form>
+
+<div class="wrapper">
+
+[% IF message %]<p>[% HTML.escape(message) %]</p>[% END %]
+
+<form method="post" action="generictranslations.pl" id="form">
+
+<div class="long-description">[% 'Default means "if no language selected then..."' | $T8 %]</div>
+
+<table class="tbl-horizontal">
+  <colgroup><col class="wi-small"><col class="wi-wider"></colgroup>
+  <tbody>
+    [% FOREACH mail_string IN MAIL_STRINGS.keys.sort %]
+      <tr>
+        <th class="caption" colspan="2">[% MAIL_STRINGS.$mail_string %]</th>
+      </tr>
+       [% FOREACH language = LANGUAGES %]
+       <tr>
+        <td>
+         [% IF language.id == 'default' %]
+           [% 'Default (no language selected)' | $T8 %]
+         [% ELSE %]
+           [% HTML.escape(language.description) %]
+         [% END %]
+        </td>
+        <td>
+          [% IF mail_string.search('preset') %]
+            <textarea name="translation__[% language.id %]__[% mail_string %]" rows="4" cols="50" class="wi-wide" style="float:left;">[% HTML.escape(language.$mail_string) %]</textarea>
+          [% ELSE %]
+            <input name="translation__[% language.id %]__[% mail_string %]" value="[% HTML.escape(language.$mail_string) %]" type="text" class="wi-wide" style="float:left;">
+          [% END %]
+           [% IF mail_string.search('preset_text_periodic_invoices') %]
+             <a href="doc/html/ch03.html#features.periodic-invoices.variables" target="_blank" class="button wi-tiny neutral tooltipster-html" style="float:left;" title="[% 'Documentation about Variables in a new window/tab' | $T8 %]">?</a>
+           [% END %]
+        </td>
+      </tr>
+      [% END %]
+    [% END %]
+  </tbody>
+</table>
+
+</form>
+
+</div><!-- /.wrapper -->
diff --git a/templates/webpages/generictranslations/edit_greetings.html b/templates/webpages/generictranslations/edit_greetings.html
index 8072d3766..8984ac57f 100644
--- a/templates/webpages/generictranslations/edit_greetings.html
+++ b/templates/webpages/generictranslations/edit_greetings.html
@@ -1,36 +1,36 @@
-[%- USE T8 %]
-[%- USE HTML %]
+[% USE T8 %]
+[% USE HTML %]
 <h1>[% HTML.escape(title) %]</h1>
 
- [%- IF message %]
- <p>
-  [% HTML.escape(message) %]
- </p>
- [%- END %]
+<div class="wrapper">
 
- <form method="post" action="generictranslations.pl" id="form">
+<!-- UPDATE: Message -->
+[% IF message %]
+  <p>[% HTML.escape(message) %]</p>
+[% END %]
 
-  <table>
+<form method="post" action="generictranslations.pl" id="form">
 
-   <tr>
-    <th class="listheading">&nbsp;</th>
-    <th class="listheading">[% 'male' | $T8 %]</th>
-    <th class="listheading">[% 'female' | $T8 %]</th>
-   </tr>
 
-   [%- FOREACH language = LANGUAGES %]
-   <tr>
-    <td>
-     [%- IF language.id == 'default' %]
-     [% 'Default (no language selected)' | $T8 %]
-     [%- ELSE %]
-     [%- HTML.escape(language.description) %]
-     [%- END %]
-    </td>
-    <td><input name="translation__[% language.id %]__male" size="40" value="[% HTML.escape(language.male) %]"></td>
-    <td><input name="translation__[% language.id %]__female" size="40" value="[% HTML.escape(language.female) %]"></td>
-   </tr>
-   [%- END %]
+<table class="tbl-list">
+  <thead>
+    <tr>
+      <th>&nbsp;</th>
+      <th>[% 'male' | $T8 %]</th>
+      <th>[% 'female' | $T8 %]</th>
+    </tr>
+  </thead>
+  <tbody>
+    [% FOREACH language = LANGUAGES %]
+    <tr>
+      <td>[% IF language.id == 'default' %] [% 'Default (no language selected)' | $T8 %] [% ELSE %] [% HTML.escape(language.description) %] [% END %]</td>
+      <td><input name="translation__[% language.id %]__male" value="[% HTML.escape(language.male) %]" class="wi-wide" type="text"></td>
+      <td><input name="translation__[% language.id %]__female" value="[% HTML.escape(language.female) %]" class="wi-wide" type="text"> </td>
+    </tr>
+    [% END %]
+  </tbody>
+</table>
 
-  </table>
- </form>
+</form>
+
+</div><!-- /.wrapper -->
diff --git a/templates/webpages/generictranslations/edit_sepa_strings.html b/templates/webpages/generictranslations/edit_sepa_strings.html
index e4eb9d0dd..1a652aebb 100644
--- a/templates/webpages/generictranslations/edit_sepa_strings.html
+++ b/templates/webpages/generictranslations/edit_sepa_strings.html
@@ -1,51 +1,34 @@
-[%- USE T8 %]
-[%- USE HTML %]
+[% USE T8 %]
+[% USE HTML %]
 <h1>[% HTML.escape(title) %]</h1>
 
- [%- IF message %]
- <p>
-  [% HTML.escape(message) %]
- </p>
- [%- END %]
+<div class="wrapper">
 
- <form method="post" action="generictranslations.pl" id="form">
+[% IF message %]
+  <p>[% HTML.escape(message) %]</p>
+[% END %]
 
-  <table>
+<form method="post" action="generictranslations.pl" id="form">
 
-   <tr>
-    <th class="listheading">&nbsp;</th>
-    <th class="listheading">[% 'Remittance information prefix' | $T8 %]</th>
-   </tr>
+<table class="tbl-list width-moderate">
+  <thead>
+    <tr>
+      <th>&nbsp;</th>
+      <th>[% 'Remittance information prefix' | $T8 %]</th>
+      <th>[% 'Remittance information optional Vendor/Customer No postfix' | $T8 %]</th>
+    </tr>
+  </thead>
+  <tbody>
+    [% FOREACH language = LANGUAGES %]
+    <tr>
+      <th>[% IF language.id == 'default' %] [% 'Default (no language selected)' | $T8 %] [% ELSE %] [% HTML.escape(language.description) %] [% END %]</th>
+      <td><input name="translation__[% language.id %]" value="[% HTML.escape(language.translation) %]" type="text" class="wi-wide"></td>
+      <td><input name="translation__[% language.id %]__vc" value="[% HTML.escape(language.translation_vc) %]" type="text" class="wi-wide"></td>
+    </tr>
+    [% END %]
+  </tbody>
+</table>
 
-   [%- FOREACH language = LANGUAGES %]
-   <tr>
-    <td>
-     [%- IF language.id == 'default' %]
-     [% 'Default (no language selected)' | $T8 %]
-     [%- ELSE %]
-     [%- HTML.escape(language.description) %]
-     [%- END %]
-    </td>
-    <td><input name="translation__[% language.id %]" size="40" value="[% HTML.escape(language.translation) %]"></td>
-   </tr>
-   [%- END %]
-   <tr>
-    <th class="listheading">&nbsp;</th>
-    <th class="listheading">[% 'Remittance information optional Vendor/Customer No postfix' | $T8 %]</th>
-   </tr>
+</form>
 
-   [%- FOREACH language = LANGUAGES %]
-   <tr>
-    <td>
-     [%- IF language.id == 'default' %]
-     [% 'Default (no language selected)' | $T8 %]
-     [%- ELSE %]
-     [%- HTML.escape(language.description) %]
-     [%- END %]
-    </td>
-    <td><input name="translation__[% language.id %]__vc" size="40" value="[% HTML.escape(language.translation_vc) %]"></td>
-   </tr>
-   [%- END %]
-
-  </table>
- </form>
+</div>
