commit 7588922105dbc92b887b7cdc18653c6b10680dad
Author: Hans Peter Schlaepfer <hanspeter.schlaepfer@revamp-it.ch>
Date:   Fri Jan 4 05:47:08 2019 +0100

    Neues kivitendo Design Aenderungen in templates/webpages/amcvar/.. ap/.. ar/..

diff --git a/templates/webpages/amcvar/render_checkboxes.html b/templates/webpages/amcvar/render_checkboxes.html
index 4633dbad9..a5d259de2 100644
--- a/templates/webpages/amcvar/render_checkboxes.html
+++ b/templates/webpages/amcvar/render_checkboxes.html
@@ -1,7 +1,7 @@
-[%- USE HTML %]
-[%- SET var_valid = HTML.escape(name_prefix) _ "cvar_" _ HTML.escape(var.name) _ HTML.escape(name_postfix) _ '_valid' -%]
-[%- IF var.partsgroup_filtered %]
-<input type="hidden" name="[% var_valid %]" value="[% HTML.escape(var.valid) %]">
-[%- ELSE %]
-<input type=checkbox name='[% var_valid %]'[% IF var.valid %] checked[% END %]>
-[%- END %]
+[% USE HTML %]
+[% SET var_valid = HTML.escape(name_prefix) _ "cvar_" _ HTML.escape(var.name) _ HTML.escape(name_postfix) _ '_valid' %]
+[% IF var.partsgroup_filtered %]
+  <input type="hidden" name="[% var_valid %]" value="[% HTML.escape(var.valid) %]">
+[% ELSE %]
+  <input type=checkbox name="[% var_valid %]"[% IF var.valid %] checked[% END %]>
+[% END %]
diff --git a/templates/webpages/amcvar/render_inputs.html b/templates/webpages/amcvar/render_inputs.html
index 880106a99..bf7896b6f 100644
--- a/templates/webpages/amcvar/render_inputs.html
+++ b/templates/webpages/amcvar/render_inputs.html
@@ -1,47 +1,47 @@
-[%- USE T8 %]
-[%- USE HTML %]
-[%- USE L %]
-[%- USE P %]
+[% USE T8 %]
+[% USE HTML %]
+[% USE L %]
+[% USE P %]
 
-[%- SET var_name = HTML.escape(name_prefix) _ "cvar_" _ HTML.escape(var.name) _ HTML.escape(name_postfix) -%]
+[% SET var_name = HTML.escape(name_prefix) _ "cvar_" _ HTML.escape(var.name) _ HTML.escape(name_postfix) %]
 
-[%- IF (hide_non_editable && !var.flag_editable) || var.partsgroup_filtered %]
-<input type="hidden" name="[% var_name %]" value="[% HTML.escape(var.value) %]">
+[% IF (hide_non_editable && !var.flag_editable) || var.partsgroup_filtered %]
+  <input type="hidden" name="[% var_name %]" value="[% HTML.escape(var.value) %]">
 
-[%- ELSIF !var.valid %]
-  [%- IF show_disabled_message %]
-<i>[% 'Element disabled' | $T8 %]</i>
-  [%- END %]
+[% ELSIF !var.valid %]
+  [% IF show_disabled_message %]
+    <i>[% 'Element disabled' | $T8 %]</i>
+  [% END %]
 
-[%- ELSIF var.type == 'bool' %]
-<input type="checkbox" name="[% var_name %]" value="1"[% IF var.value %] checked[% END %]>
+[% ELSIF var.type == 'bool' %]
+  <input type="checkbox" name="[% var_name %]" value="1"[% IF var.value %] checked[% END %]>
 
-[%- ELSIF var.type == 'textfield' %]
-<textarea name="[% var_name %]" cols="[% HTML.escape(var.width) %]" rows="[% HTML.escape(var.height) %]">[% HTML.escape(var.value) %]</textarea>
+[% ELSIF var.type == 'textfield' %]
+  <textarea name="[% var_name %]" cols="[% HTML.escape(var.width) %]" rows="[% HTML.escape(var.height) %]">[% HTML.escape(var.value) %]</textarea>
 
-[%- ELSIF var.type == 'date' %]
-[% L.date_tag(var_name, var.value) %]
+[% ELSIF var.type == 'date' %]
+  [% L.date_tag(var_name, var.value) %]
 
-[%- ELSIF var.type == 'timestamp' %]
-<input name="[% var_name %]" value="[% HTML.escape(var.value) %]">
+[% ELSIF var.type == 'timestamp' %]
+  <input type="text" name="[% var_name %]" value="[% HTML.escape(var.value) %]">
 
-[%- ELSIF var.type == 'customer' %]
-[% P.customer_vendor.picker(var_name, var.value, type='customer') %]
+[% ELSIF var.type == 'customer' %]
+  [% P.customer_vendor.picker(var_name, var.value, type='customer') %]
 
-[%- ELSIF var.type == 'vendor' %]
-[% P.customer_vendor.picker(var_name, var.value, type='vendor') %]
+[% ELSIF var.type == 'vendor' %]
+  [% P.customer_vendor.picker(var_name, var.value, type='vendor') %]
 
-[%- ELSIF var.type == 'part' %]
-[% P.part.picker(var_name, var.value) %]
+[% ELSIF var.type == 'part' %]
+  [% P.part.picker(var_name, var.value) %]
 
-[%- ELSIF var.type == 'select' %]
+[% ELSIF var.type == 'select' %]
+  <select name="[% var_name %]">
+    [% FOREACH option = var.OPTIONS %]
+      <option value="[% option.value | html %]"[% IF option.value == var.value %] selected[% END %]>[% HTML.escape(option.value) %]</option>
+    [% END %]
+  </select>
 
-<select name="[% var_name %]">
- [%- FOREACH option = var.OPTIONS %]
- <option value="[% option.value | html %]"[% IF option.value == var.value %] selected[% END %]>[% HTML.escape(option.value) %]</option>
- [%- END %]
-</select>
+[% ELSE %]
+  <input type="text" name="[% var_name %]" value="[% HTML.escape(var.value) %]"[% IF var.maxlength %] maxlength="[% HTML.escape(var.maxlength) %]"[% END %]>
 
-[%- ELSE %]
-<input name="[% var_name %]" value="[% HTML.escape(var.value) %]" [%- IF var.maxlength %] maxlength="[% HTML.escape(var.maxlength) %]"[% END -%]>
-[%- END %]
+[% END %]
diff --git a/templates/webpages/amcvar/render_inputs_block.html b/templates/webpages/amcvar/render_inputs_block.html
index 73731625a..e97f200fb 100644
--- a/templates/webpages/amcvar/render_inputs_block.html
+++ b/templates/webpages/amcvar/render_inputs_block.html
@@ -1,79 +1,80 @@
-[%- USE T8 %]
-[%- USE HTML %]
-[%- USE L %]
-[%- USE P %]
-[%- USE LxERP %][%- USE P -%]
-[%- BLOCK cvar_inputs %]
-[%- SET render_cvar_tag_options = {};
-    render_cvar_tag_options.import(cvar_tag_options) IF cvar_tag_options;
-    SET cvar_tag_name = HTML.escape(cvar.name_prefix) _ "cvar_" _ HTML.escape(cvar.var.name) _ HTML.escape(cvar.name_postfix);
-    IF !render_cvar_tag_options.id && (cvar.var.type != 'select');
-      SET render_cvar_tag_options.no_id = 1;
-    END;
-%]
+[% USE T8 %]
+[% USE HTML %]
+[% USE L %]
+[% USE P %]
+[% USE LxERP %]
+[% USE P %]
 
-[%- IF (!cvar.hide_non_editable || cvar.var.flag_editable) && !cvar.partsgroup_filtered %]
+[% BLOCK cvar_inputs %]
+  [% SET render_cvar_tag_options = {};
+      render_cvar_tag_options.import(cvar_tag_options) IF cvar_tag_options;
+      SET cvar_tag_name = HTML.escape(cvar.name_prefix) _ "cvar_" _ HTML.escape(cvar.var.name) _ HTML.escape(cvar.name_postfix);
+      IF !render_cvar_tag_options.id && (cvar.var.type != 'select');
+        SET render_cvar_tag_options.no_id = 1;
+      END;
+  %]
 
-[%- IF !cvar.valid %]
-  [%- IF show_disabled_message %]
-<i>[% 'Element disabled' | $T8 %]</i>
-  [%- END %]
+  [% IF (!cvar.hide_non_editable || cvar.var.flag_editable) && !cvar.partsgroup_filtered %]
 
-[%- ELSIF cvar.var.type == 'bool' %]
-[%- render_cvar_tag_options.import(checked=cvar.value, value=1);
-    L.checkbox_tag(cvar_tag_name, render_cvar_tag_options) %]
+    [% IF !cvar.valid %]
+      [% IF show_disabled_message %]
+        <i>[% 'Element disabled' | $T8 %]</i>
+      [% END %]
 
-[%- ELSIF cvar.var.type == 'textfield' %]
-[% render_cvar_tag_options.import(cols=cvar.var.width, rows=cvar.var.height);
-   L.textarea_tag(cvar_tag_name, cvar.value, render_cvar_tag_options) %]
+    [% ELSIF cvar.var.type == 'bool' %]
+      [% render_cvar_tag_options.import(checked=cvar.value, value=1); L.checkbox_tag(cvar_tag_name, render_cvar_tag_options) %]
 
-[%- ELSIF cvar.var.type == 'date' %]
-[%- L.date_tag(cvar_tag_name, cvar.value, render_cvar_tag_options) %]
+    [% ELSIF cvar.var.type == 'textfield' %]
+      [% render_cvar_tag_options.import(cols=cvar.var.width, rows=cvar.var.height); L.textarea_tag(cvar_tag_name, cvar.value, render_cvar_tag_options) %]
 
-[%- ELSIF cvar.var.type == 'timestamp' %]
-[%- L.input_tag(cvar_tag_name, cvar.value, render_cvar_tag_options) %]
+    [% ELSIF cvar.var.type == 'date' %]
+      [% L.date_tag(cvar_tag_name, cvar.value, render_cvar_tag_options) %]
 
-[%- ELSIF cvar.var.type == 'select' %]
-[%- render_cvar_tag_options.name=cvar_tag_name %]
-<select [% P.stringify_attributes(render_cvar_tag_options) %]>
- [%- IF LxERP.is_rdbo(cvar.var, 'CustomVariableConfig') %]
-  [%- FOREACH option = cvar.var.processed_options %]
-   [%- SET render_cvar_opts = {
-        value = option
-       };
-       render_cvar_opts.selected = 'selected' IF option == cvar.value;
-       L.html_tag('option', option, render_cvar_opts) %]
-  [%- END %]
- [%- ELSE %]
-  [%- FOREACH option = cvar.var.OPTIONS %]
-   [%- SET render_cvar_opts = {
-        value = option.value
-       };
-       render_cvar_opts.selected = 'selected' IF option.value == cvar.value;
-       L.html_tag('option', option.value, render_cvar_opts) %]
-  [%- END %]
- [%- END %]
-</select>
+    [% ELSIF cvar.var.type == 'timestamp' %]
+      [% L.input_tag(cvar_tag_name, cvar.value, render_cvar_tag_options) %]
 
-[%- ELSIF cvar.var.type == 'customer' %]
-[%- render_cvar_tag_options.type = 'customer' %]
-[%- P.customer_vendor.picker(cvar_tag_name, cvar.value, render_cvar_tag_options) %]
+    [% ELSIF cvar.var.type == 'select' %]
+      [% render_cvar_tag_options.name=cvar_tag_name %]
+    
+      <select [% P.stringify_attributes(render_cvar_tag_options) %]>
+        [% IF LxERP.is_rdbo(cvar.var, 'CustomVariableConfig') %]
+          [% FOREACH option = cvar.var.processed_options %]
+            [% SET render_cvar_opts = {
+              value = option
+             };
+             render_cvar_opts.selected = 'selected' IF option == cvar.value;
+             L.html_tag('option', option, render_cvar_opts) %]
+          [% END %]
+        [% ELSE %]
+          [% FOREACH option = cvar.var.OPTIONS %]
+            [% SET render_cvar_opts = {
+                value = option.value
+               };
+               render_cvar_opts.selected = 'selected' IF option.value == cvar.value;
+               L.html_tag('option', option.value, render_cvar_opts) %]
+          [% END %]
+        [% END %]
+      </select>
 
-[%- ELSIF cvar.var.type == 'vendor' %]
-[%- render_cvar_tag_options.type = 'vendor' %]
-[%- P.customer_vendor.picker(cvar_tag_name, cvar.value, render_cvar_tag_options) %]
+    [% ELSIF cvar.var.type == 'customer' %]
+      [% render_cvar_tag_options.type = 'customer' %]
+      [% P.customer_vendor.picker(cvar_tag_name, cvar.value, render_cvar_tag_options) %]
 
-[%- ELSIF cvar.var.type == 'part' %]
-[% P.part.picker(cvar_tag_name, cvar.value, render_cvar_tag_options) %]
+    [% ELSIF cvar.var.type == 'vendor' %]
+      [% render_cvar_tag_options.type = 'vendor' %]
+      [% P.customer_vendor.picker(cvar_tag_name, cvar.value, render_cvar_tag_options) %]
 
-[%- ELSIF cvar.var.type == 'number' %]
-[%- L.input_tag(cvar_tag_name, LxERP.format_amount(cvar.value, -2), render_cvar_tag_options) %]
+    [% ELSIF cvar.var.type == 'part' %]
+      [% P.part.picker(cvar_tag_name, cvar.value, render_cvar_tag_options) %]
 
-[%- ELSE %]
-[% render_cvar_tag_options.maxlength=cvar.var.maxlength IF cvar.var.maxlength;
-   L.input_tag(cvar_tag_name, cvar.value, render_cvar_tag_options) %]
-[%- END %]
+    [% ELSIF cvar.var.type == 'number' %]
+      [% L.input_tag(cvar_tag_name, LxERP.format_amount(cvar.value, -2), render_cvar_tag_options) %]
 
-[%- END %]
+    [% ELSE %]
+      [% render_cvar_tag_options.maxlength=cvar.var.maxlength IF cvar.var.maxlength;
+         L.input_tag(cvar_tag_name, cvar.value, render_cvar_tag_options) %]
+    [% END %]
 
-[%- END %]
+  [% END %]
+
+[% END # BLOCK cvar_inputs %]
diff --git a/templates/webpages/amcvar/search_filter.html b/templates/webpages/amcvar/search_filter.html
index 96b774418..04a72cbff 100644
--- a/templates/webpages/amcvar/search_filter.html
+++ b/templates/webpages/amcvar/search_filter.html
@@ -1,61 +1,61 @@
-[%- USE T8 %]
-[%- USE L %]
+[% USE T8 %]
+[% USE L %]
 [% USE HTML %]
 
-   [%- FOREACH var = variables %]
-   [%- IF var.searchable %]
-   <tr id='cvar_filter_[% var.name %]'>
-    <td align="right" valign="top">[% HTML.escape(var.description) %]</td>
-    <td valign="top">
+[% FOREACH var = variables %]
+  [% IF var.searchable %]
+    <tr id='cvar_filter_[% var.name %]'>
+     <th>[% HTML.escape(var.description) %]</th>
+     <td>
 
-     [%- IF var.type == 'bool' %]
-     <select name="[% filter_prefix %]cvar_[% HTML.escape(var.name) %]">
-      <option value="">---</option>
-      <option value="yes">[% 'Yes' | $T8 %]</option>
-      <option value="no">[% 'No' | $T8 %]</option>
-     </select>
+      [% IF var.type == 'bool' %]
+      <select name="[% filter_prefix %]cvar_[% HTML.escape(var.name) %]">
+       <option value="">---</option>
+       <option value="yes">[% 'Yes' | $T8 %]</option>
+       <option value="no">[% 'No' | $T8 %]</option>
+      </select>
 
-     [%- ELSIF var.type == 'date' %]
-     [% L.date_tag(filter_prefix _'cvar_'_ HTML.escape(var.name) _'_from') %]
+      [% ELSIF var.type == 'date' %]
+      [% L.date_tag(filter_prefix _'cvar_'_ HTML.escape(var.name) _'_from') %]
 
-     [% 'to (time)' | $T8 %]
-     [% L.date_tag(filter_prefix _'cvar_'_ HTML.escape(var.name) _'_to') %]
+      [% 'to (time)' | $T8 %]
+      [% L.date_tag(filter_prefix _'cvar_'_ HTML.escape(var.name) _'_to') %]
 
-     [%- ELSIF var.type == 'number' %]
-     <select name="[% filter_prefix %]cvar_[% HTML.escape(var.name) %]_qtyop">
-      <option selected>==</option>
-      <option>=/=</option>
-      <option>&gt;</option>
-      <option>&gt;=</option>
-      <option>&lt;</option>
-      <option>&lt;=</option>
-     </select>
-     <input name="[% filter_prefix %]cvar_[% HTML.escape(var.name) %]"[% IF var.maxlength %]maxlength="[% HTML.escape(var.maxlength) %]"[% END %]>
+      [% ELSIF var.type == 'number' %]
+      <select name="[% filter_prefix %]cvar_[% HTML.escape(var.name) %]_qtyop">
+       <option selected>==</option>
+       <option>=/=</option>
+       <option>&gt;</option>
+       <option>&gt;=</option>
+       <option>&lt;</option>
+       <option>&lt;=</option>
+      </select>
+      <input type="text" name="[% filter_prefix %]cvar_[% HTML.escape(var.name) %]"[% IF var.maxlength %] maxlength="[% HTML.escape(var.maxlength) %]"[% END %]>
 
-     [%- ELSIF var.type == 'customer' %]
-     <input name="[% filter_prefix %]cvar_[% var.name | html %]">
+      [% ELSIF var.type == 'customer' %]
+      <input type="text" name="[% filter_prefix %]cvar_[% var.name | html %]">
 
-     [% ELSIF var.type == 'select' %]
-     <select name="[% filter_prefix %]cvar_[% HTML.escape(var.name) %]">
-      <option value="" selected>---</option>
-      [%- FOREACH option = var.OPTIONS %]
-      <option>[% HTML.escape(option.value) %]</option>
-      [%- END %]
-     </select>
+      [% ELSIF var.type == 'select' %]
+      <select name="[% filter_prefix %]cvar_[% HTML.escape(var.name) %]">
+       <option value="" selected>---</option>
+       [% FOREACH option = var.OPTIONS %]
+       <option>[% HTML.escape(option.value) %]</option>
+       [% END %]
+      </select>
 
-     [%- ELSE %]
-     <input name="[% filter_prefix %]cvar_[% HTML.escape(var.name) %]"[% IF var.maxlength %]maxlength="[% HTML.escape(var.maxlength) %]"[% END %]>
+      [% ELSE %]
+      <input type="text" name="[% filter_prefix %]cvar_[% HTML.escape(var.name) %]"[% IF var.maxlength %] maxlength="[% HTML.escape(var.maxlength) %]"[% END %]>
 
-     [%- END %]
-    </td>
-   </tr>
-   [%- END %]
-   [%- END %]
+      [% END %]
+     </td>
+    </tr>
+  [% END %]
+[% END %]
 [% IF hidden_cvar_filters %]
   <tr class="cvar_filter-toggle-wrapper">
     <td></td>
-    <td colspan="3">
-      <a href="javascript:void(0);" class="cvar_filter-toggle"><i>[% 'click here to edit cvars' | $T8 %]</i></a>
+    <td>
+      <a href="javascript:void(0);" class="cvar_filter-toggle" class="button "><i>[% 'click here to edit cvars' | $T8 %]</i></a>
     </td>
   </tr>
   <script type='text/javascript'>
diff --git a/templates/webpages/amcvar/search_include.html b/templates/webpages/amcvar/search_include.html
index 3fd967fb0..50f188ee6 100644
--- a/templates/webpages/amcvar/search_include.html
+++ b/templates/webpages/amcvar/search_include.html
@@ -1,25 +1,23 @@
 [% USE HTML %]
 
-   [%- SET start_new_row = '1' %]
+[% SET start_new_row = '1' %]
 
-   [%- FOREACH var = variables %]
-   [%- IF var.includeable %]
-   [%- IF start_new_row %]
-   <tr>
-    [%- SET start_new_row = '0' %]
-    [%- END %]
+[% FOREACH var = variables %]
+  [% IF var.includeable %]
+    [% IF start_new_row %]
+      <tr>
+      [% SET start_new_row = '0' %]
+    [% END %]
     <td id="[% HTML.escape(include_prefix) %]cvartd_[% HTML.escape(var.name) %]">
-     <input type="checkbox"
-            name="[% HTML.escape(include_prefix) %]cvar_[% HTML.escape(var.name) %]"
-            id="[% HTML.escape(include_prefix) %]cvar_[% HTML.escape(var.name) %]"
-            value="[% HTML.escape(include_value) %]"
-            [% IF var.included_by_default %] checked[% END %]>
-     <label for="[% HTML.escape(include_prefix) %]cvar_[% HTML.escape(var.name) %]">[% HTML.escape(var.description) %]</label>
+      <input type="checkbox" name="[% HTML.escape(include_prefix) %]cvar_[% HTML.escape(var.name) %]" id="[% HTML.escape(include_prefix) %]cvar_[% HTML.escape(var.name) %]" value="[% HTML.escape(include_value) %]"[% IF var.included_by_default %] checked[% END %]>
+      <label for="[% HTML.escape(include_prefix) %]cvar_[% HTML.escape(var.name) %]">[% HTML.escape(var.description) %]</label>
     </td>
 
-    [%- UNLESS loop.count % 4 %][%- SET start_new_row = '1' %][%- END %]
-    [%- IF start_new_row || loop.last %]
-   </tr>
-   [%- END %]
-   [%- END %]
-   [%- END %]
+    [% UNLESS loop.count % 4 %][% SET start_new_row = '1' %]
+  [% END %]
+  [% IF start_new_row || loop.last %]
+    </tr>
+  [% END %]
+[% END %]
+
+[% END %]
diff --git a/templates/webpages/ap/form_footer.html b/templates/webpages/ap/form_footer.html
index 8f02e0c2d..255bac178 100644
--- a/templates/webpages/ap/form_footer.html
+++ b/templates/webpages/ap/form_footer.html
@@ -1,11 +1,12 @@
-[%- USE T8 %]
-[%- USE HTML %]
-[%- USE L %]
-[%- USE LxERP %][%- USE P -%]
+[% USE T8 %]
+[% USE HTML %]
+[% USE L %]
+[% USE LxERP %]
+[% USE P %]
 
-[%- IF (num_follow_ups && num_due) %]
+[% IF (num_follow_ups && num_due) %]
   <p>[% LxERP.t8('There are #1 unfinished follow-ups of which #2 are due.', num_follow_ups, num_due) %]</p>
-[%- END %]
+[% END %]
 
 <input name=callback type=hidden value="[% callback | html %]">
 <input name=gldate type=hidden value="[% gldate | html %]">
@@ -13,16 +14,14 @@
 [% P.hidden_tag('draft_description', draft_description) %]
 </form>
 
-<script type="text/javascript">
- <!--
+<script type="text/javascript"><!--
 $(document).ready(function() {
-  [%- SET row=0 %]
-  [%- WHILE row < rowcount %]
-   [%- SET row=row + 1 %]
+  [% SET row=0 %]
+  [% WHILE row < rowcount %]
+   [% SET row=row + 1 %]
    $('#AP_amount_chart_id_[% row %]').on('set_item:ChartPicker', function(e, item) {
      kivi.GL.update_taxes(this);
    });
-  [%- END %]
+  [% END %]
 });
--->
-</script>
+--></script>
diff --git a/templates/webpages/ap/form_header.html b/templates/webpages/ap/form_header.html
index fd8c91e54..a9e36506e 100644
--- a/templates/webpages/ap/form_header.html
+++ b/templates/webpages/ap/form_header.html
@@ -1,386 +1,322 @@
-[%- USE L %]
-[%- USE P %]
-[%- USE HTML %]
-[%- USE T8 %]
-[%- USE LxERP %][%- USE P -%]
+[% USE L %]
+[% USE P %]
+[% USE HTML %]
+[% USE T8 %]
+[% USE LxERP %]
 
 <h1>[% title | html %]</h1>
 
-[%- INCLUDE 'common/flash.html' %]
+[% INCLUDE 'common/flash.html' %]
 
 <form method="post" action="[% script | html %]" id="form">
 
 <input type="hidden" name="terms" value="[% terms | html %]">
-
 <input type="hidden" name="creditlimit" value="[% creditlimit | html %]">
 <input type="hidden" name="creditremaining" value="[% creditremaining | html %]">
-
 <input type="hidden" name="forex" value="[% forex | html %]">
 <input type="hidden" name="lastmtime" value="[% HTML.escape(lastmtime) %]">
-
 <input type="hidden" name="id" value="[% id | html %]">
 <input type="hidden" name="sort" value="[% sort | html %]">
 <input type="hidden" name="closedto" value="[% closedto | html %]">
 <input type="hidden" name="locked" value="[% locked | html %]">
 <input type="hidden" name="title" value="[% title_ | html %]">
-
 <input type="hidden" name="follow_up_trans_id_1" value="[% id | html %]">
 <input type="hidden" name="follow_up_trans_type_1" value="ap_transaction">
 <input type="hidden" name="follow_up_trans_info_1" value="[% follow_up_trans_info | html %]">
 <input type="hidden" name="follow_up_rowcount" value="1">
-
 <input type="hidden" name="defaultcurrency" value="[% defaultcurrency | html %]">
 <input type="hidden" name="fxgain_accno" value="[% fxgain_accno | html %]">
 <input type="hidden" name="fxloss_accno" value="[% fxloss_accno | html %]">
-
 <input type="hidden" name="oldinvtotal" value="[% oldinvtotal | html %]">
 <input type="hidden" name="oldtotalpaid" value="[% oldtotalpaid | html %]">
-
 <input type="hidden" name="taxaccounts" value="[% taxaccounts | html %]">
-
 <input type="hidden" name="rowcount" value="[% rowcount | html %]">
-
 <input type="hidden" name="paidaccounts" value="[% paidaccounts | html %]">
 
 [% FOREACH i IN [1..paidaccounts] %]
   [% temp = "acc_trans_id_"_ i %]
   <input type="hidden" name="[% temp %]" value="[% $temp | html %]">
-
   [% temp = "gldate_"_ i %]
   <input type="hidden" name="[% temp %]" value="[% $temp | html %]">
 [% END %]
 
+
 [% IF ( saved_message ) %]
   <p>[% saved_message | html %]</p>
 [% END %]
 
 <div id="ap_tabs" class="tabwidget">
- <ul>
+
+<ul>
   <li><a href="#ui-tabs-basic-data">[% 'Basic Data' | $T8 %]</a></li>
-[%- IF INSTANCE_CONF.get_webdav %]
-  <li><a href="#ui-tabs-webdav">[% 'WebDAV' | $T8 %]</a></li>
-[%- END %]
-[%- IF id AND INSTANCE_CONF.get_doc_storage %]
-      <li><a href="controller.pl?action=File/list&file_type=document&object_type=purchase_invoice&object_id=[% HTML.url(id) %]">[% 'Documents' | $T8 %]</a></li>
-      <li><a href="controller.pl?action=File/list&file_type=attachment&object_type=purchase_invoice&object_id=[% HTML.url(id) %]">[% 'Attachments' | $T8 %]</a></li>
-[%- END %]
-[%- IF id %]
-  [%- IF AUTH.assert('record_links', 1) %]
+  [% IF INSTANCE_CONF.get_webdav %]
+    <li><a href="#ui-tabs-webdav">[% 'WebDAV' | $T8 %]</a></li>
+  [% END %]
+  [% IF id AND INSTANCE_CONF.get_doc_storage %]
+    <li><a href="controller.pl?action=File/list&file_type=document&object_type=purchase_invoice&object_id=[% HTML.url(id) %]">[% 'Documents' | $T8 %]</a></li>
+    <li><a href="controller.pl?action=File/list&file_type=attachment&object_type=purchase_invoice&object_id=[% HTML.url(id) %]">[% 'Attachments' | $T8 %]</a></li>
+  [% END %]
+  [% IF id %]
+    [% IF AUTH.assert('record_links', 1) %]
   <li><a href="controller.pl?action=RecordLinks/ajax_list&object_model=PurchaseInvoice&object_id=[% HTML.url(id) %]">[% 'Linked Records' | $T8 %]</a></li>
-  [%- END %]
+    [% END %]
   <li><a href="[% 'controller.pl?action=AccTrans/list_transactions&trans_id=' _ HTML.url(id) | html %]">[% LxERP.t8('Transactions') %]</a></li>
-[%- END %]
- </ul>
+  [% END %]
+</ul>
 
 <div id="ui-tabs-basic-data">
-<table width="100%">
-  <tr valign="top">
-    <td>
-      <table width="100%">
-        <tr valign="top">
-          <td>
-            <table>
-              <tr>
-                <th align="right" nowrap>[% 'Vendor' | $T8 %]</th>
-                <td colspan="3">
-                 [% P.customer_vendor.picker("vendor_id", vendor_id, type="vendor", style="width: 300px", onchange="\$('#update_button').click()") %]
-                 [% L.button_tag("show_vc_details('vendor')", LxERP.t8('Details (one letter abbreviation)')) %]
-                 [% L.hidden_tag("previous_vendor_id", vendor_id) %]
-                </td>
-              </tr>
-
-              <tr>
-                <th align="right" valign="top">[% LxERP.t8("Credit Limit") %]</th>
-                <td>
-                 [% creditlimit | html %];
-                 [% LxERP.t8("Remaining") %]
-                 <span class="plus[% creditremaining_plus %]">[% creditremaining | html %]</span>
-                </td>
-              </tr>
 
-[%- IF invoice_obj.sepa_exports.as_list.size %]
-              <tr>
-                <th align="right">[% LxERP.t8("SEPA exports") %]</th>
-                <td>
-                 [% FOREACH export = invoice_obj.sepa_exports.as_list %]
-                  <a href="sepa.pl?action=bank_transfer_edit&vc=vendor&id=[% HTML.url(export.id) %]">[% HTML.escape(export.id) %]</a>
-                  [% UNLESS loop.last %], [% END %]
-                 [% END %]
-                </td>
-              </tr>
-[%- END %]
+<div class="wrapper">
 
-              <tr>
-                <th align="right" nowrap>[% 'Currency' | $T8 %]</th>
-                <td>[% L.select_tag("currency", currencies, default=currency, value_key="name", title_key="name") %]</td>
-
-                [% IF ( defaultcurrency && (currency != defaultcurrency) ) %]
-                  <th align=right>[% 'Exchangerate' | $T8 %]</th>
-                  [% IF ( forex ) %]
-                    <td><input type="hidden" name="exchangerate" value="[% exchangerate | html %]">[% exchangerate | html %]</td>
-                  [% ELSE %]
-                    <td><input type="text" name="exchangerate" size="10" value="[% exchangerate | html %]"></td>
-                  [% END %]
-                [% END %]
+<table class="tbl-horizontal">
+  <caption>[% 'Vendor & Order' | $T8 %]</caption>
+  <colgroup> <col class="wi-mediumsmall"><col class="wi-lightwide"> </colgroup>
+  <tbody>
+    <tr>
+      <th>[% 'Vendor' | $T8 %]</th>
+      <td class="wi-lightwide">[% P.customer_vendor.picker("vendor_id", vendor_id, type="vendor", onchange="\$('#update_button').click()") %][% L.button_tag("show_vc_details('vendor')", LxERP.t8('Details (one letter abbreviation)'), class='wi-tiny neutral') %] [% L.hidden_tag("previous_vendor_id", vendor_id) %] </td>
+    </tr>
+    <tr>
+      <th>[% LxERP.t8("Credit Limit") %]</th>
+      <td><span class="data wi-lightwide">[% creditlimit | html %], [% LxERP.t8("Remaining") %] <span class="plus[% creditremaining_plus %]">[% creditremaining | html %]</span></span> </td>
+    </tr>
+    [% IF invoice_obj.sepa_exports.as_list.size %]
+      <tr>
+        <th>[% LxERP.t8("SEPA exports") %]</th>
+        <td> [% FOREACH export = invoice_obj.sepa_exports.as_list %] <a href="sepa.pl?action=bank_transfer_edit&vc=vendor&id=[% HTML.url(export.id) %]">[% HTML.escape(export.id) %]</a> [% UNLESS loop.last %], [% END %] [% END %] </td>
+      </tr>
+    [% END %]
+    <tr>
+      <th>[% 'Currency' | $T8 %]</th>
+      <th>
+        [% L.select_tag("currency", currencies, default=currency, value_key="name", title_key="name", class="wi-small") %]
+        [% IF ( defaultcurrency && (currency != defaultcurrency) ) %]
+          [% 'Exchangerate' | $T8 %]
+          [% IF ( forex ) %]
+            <input type="hidden" name="exchangerate" value="[% exchangerate | html %]">
+            [% exchangerate | html %]
+          [% ELSE %]
+            <input type="text" name="exchangerate" size="10" value="[% exchangerate | html %]">
+          [% END %]
+        [% END %]
+      </th>
+    </tr>
+    [% IF ALL_DEPARTMENTS %]
+    <tr>
+      <th>[% 'Department' | $T8 %]</th>
+      <td>[% L.select_tag('department_id', ALL_DEPARTMENTS, default = department_id, title_key = 'description', with_empty = 1, class='wi-lightwide') %]</td>
+    </tr>
+    [% END %]
+    <tr>
+      <th>[% 'Tax Included' | $T8 %]</th>
+      <th><input name="taxincluded" type="checkbox" value="1" [% if ( taxincluded ) %]checked[% end %]></th>
+    </tr>
+    <tr>
+      <th>[% 'direct debit' | $T8 %]</th>
+      <th><input name="direct_debit" type="checkbox" value="1" [% if (direct_debit) %]checked[% end %]> </th>
+    </tr>
+  </tbody>
+</table>
 
-              </tr>
+<table class="tbl-horizontal">
+  <caption>[% 'Notes' | $T8 %]</caption>
+  <colgroup> <col class="wi-small"><col class="wi-wide"> </colgroup>
+  <tbody>
+    <tr>
+      <td> <textarea name="notes" rows="[% textarea_rows %]" cols="30" class="wi-wide" [% readonly %]>[% notes | html %]</textarea>
+      </td>
+    </tr>
+    <tr>
+      <td><span class="label above">[% 'Notes for vendor' | $T8 %]</span><textarea name="intnotes" rows="[% textarea_rows %]" cols="30" readonly class="wi-wide">[% intnotes | html %]</textarea>
+      </td>
+    </tr>
+  </tbody>
+</table>
 
-              [% IF ALL_DEPARTMENTS %]
-                <tr>
-                  <th align="right" nowrap>[% 'Department' | $T8 %]</th>
-                  <td colspan=3>[% L.select_tag('department_id', ALL_DEPARTMENTS, default = department_id, title_key = 'description', with_empty = 1) %]</td>
-                </tr>
-              [% END %]
+<table class="tbl-horizontal">
+  <caption>[% 'Number & Dates' | $T8 %]</caption>
+  <tbody>
+    <tr>
+      <th>[% 'Invoice Number' | $T8 %]</th>
+      <td>[% L.input_tag("invnumber", invnumber, size="11", readonly=readonly) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Order Number' | $T8 %]</th>
+      <td>[% L.input_tag("ordnumber", ordnumber, size="11", readonly=readonly) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Invoice Date' | $T8 %]</th>
+      <td>[% L.date_tag('transdate', transdate) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Due Date' | $T8 %]</th>
+      <td>[% L.date_tag('duedate', duedate) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Project Number' | $T8 %]</th>
+      <td> [% L.select_tag('globalproject_id', ALL_PROJECTS, with_empty = 1, default = globalproject_id, value_key = 'id', title_key = 'projectnumber', onChange = "document.getElementById('update_button').click();") %] </td>
+    </tr>
+  </tbody>
+</table>
 
-              <tr>
-                <td align="right"><input name="taxincluded" class="checkbox" type="checkbox" value="1" [% IF ( taxincluded ) %]checked[% END %]></td>
-                <th align=left nowrap>[% 'Tax Included' | $T8 %]</th>
-              </tr>
-              <tr>
-                <td align="right"><input name="direct_debit" class="checkbox" type="checkbox" value="1" [% IF direct_debit %]checked[% END %]></td>
-                <th align="left" nowrap>[% 'direct debit' | $T8 %]</th>
-              </tr>
-            </table>
-          </td>
+</div><!-- /.wrapper -->
 
-          <td align="right">
-            <table>
-              <tr>
-                <th align="right" nowrap>[% 'Invoice Number' | $T8 %]</th>
-                <td>[% L.input_tag("invnumber", invnumber, size="11", readonly=readonly) %]</td>
-              </tr>
-              <tr>
-                <th align="right" nowrap>[% 'Order Number' | $T8 %]</th>
-                <td>[% L.input_tag("ordnumber", ordnumber, size="11", readonly=readonly) %]</td>
-              </tr>
-              <tr>
-                <th align="right" nowrap>[% 'Invoice Date' | $T8 %]</th>
-                <td>[% L.date_tag('transdate', transdate) %]</td>
-              </tr>
-              <tr>
-                <th align="right" nowrap>[% 'Due Date' | $T8 %]</th>
-                <td>[% L.date_tag('duedate', duedate) %]</td>
-              </tr>
-              <tr>
-                <th align="right" nowrap>[% 'Project Number' | $T8 %]</th>
-                <td>
-                  [% L.select_tag('globalproject_id', ALL_PROJECTS, with_empty = 1, default = globalproject_id, value_key = 'id', title_key = 'projectnumber', onChange = "document.getElementById('update_button').click();") %]
-                </td>
-              </tr>
-            </table>
-          </td>
-        </tr>
-      </table>
-    </td>
-  </tr>
+<div class="wrapper">
 
-  <tr>
-    <td>
-      <table width=100%>
-        <tr class=listheading>
-          <th class=listheading style="width:15%">[% 'Account' | $T8 %]</th>
-          <th class=listheading style="width:10%">[% 'Amount' | $T8 %]</th>
-          <th class=listheading style="width:10%">[% 'Tax' | $T8 %]</th>
-          <th class=listheading style="width:10%">[% 'Taxkey' | $T8 %]</th>
-          <th class=listheading style="width:10%">[% 'Project' | $T8 %]</th>
-        </tr>
+<table class="tbl-list">
+  <caption>[% 'Transactions' | $T8 %]</caption>
+  <thead>
+    <tr>
+      <th>[% 'Account' | $T8 %]</th>
+      <th class="right">[% 'Amount' | $T8 %]</th>
+      <th class="right">[% 'Tax' | $T8 %]</th>
+      <th>[% 'Taxkey' | $T8 %]</th>
+      <th>[% 'Project' | $T8 %]</th>
+    </tr>
+  </thead>
+  <tbody>
+    [% FOREACH i IN [1..rowcount] %]
+    <tr>
+      <td class="wi-wide">
+        [% SET selected_chart_id = "AP_amount_chart_id_"_ i %]
+        [% P.chart.picker("AP_amount_chart_id_" _ i, $selected_chart_id, type="AP_amount", class=(initial_focus == 'row_' _ i ? "initial_focus wi-wide" : "wi-wide") ) %]
+        [% L.hidden_tag("previous_AP_amount_chart_id_" _ i, $selected_chart_id) %]
+        <input type="hidden" name="tax_[% i %]" value="[% temp = " tax"_ i %][% $temp | html %]">
+      </td>
+      <td class="numeric">
+        <input type="text" name="amount_[% i %]" size="10" value="[% temp = " amount_"_ i %][% $temp | html %]" class="numeric wi-small">
+      </td>
+      <td class="numeric">[% temp = "tax_"_ i %][% $temp | html %]</td>
+      <td>
+        [% temp = 'selected_taxchart_'_ i %] [% taxcharts = 'taxcharts_' _ i %]
+        [% L.select_tag('taxchart_'_ i, $taxcharts, value_title_sub = \taxchart_value_title_sub, default = $temp, class='wi-lightwide') %]
+      </td>
+      <td>
+        [% temp = "project_id_"_ i %]
+        [% L.select_tag(temp, ALL_PROJECTS, with_empty = 1, default = loop.last ? globalproject_id : $temp, value_key = 'id', title_key = 'projectnumber') %]
+      </td>
+    </tr>
+    [% END %]
+  </tbody>
+  <tfoot>
+    <tr>
+      <td class="wi-wide">[% P.chart.picker('AP_chart_id', AP_chart_id, class="wi-wide", type="AP") %] </td>
+      <td class="numeric">[% invtotal | html %]</td>
+      <td colspan="3"></td>
+    </tr>
+  </tfoot>
+</table>
 
-        [% FOREACH i IN [1..rowcount] %]
-          <tr>
-            <td>
-              [% SET selected_chart_id = "AP_amount_chart_id_"_ i %]
-              [% P.chart.picker("AP_amount_chart_id_" _ i, $selected_chart_id, style="width: 400px", type="AP_amount", class=(initial_focus == 'row_' _ i ? "initial_focus" : "")) %]
-              [% L.hidden_tag("previous_AP_amount_chart_id_" _ i, $selected_chart_id) %]
-              <input type="hidden" name="tax_[% i %]" value="[% temp = "tax"_ i %][% $temp | html %]">
-            </td>
-            <td>
-              <input name="amount_[% i %]" size="10" value="[% temp = "amount_"_ i %][% $temp | html %]">
-            </td>
-            <td>
-              [% temp = "tax_"_ i %][% $temp | html %]
-            </td>
-            <td>
-              [% temp = 'selected_taxchart_'_ i %]
-              [% taxcharts = 'taxcharts_' _ i %]
-              [% L.select_tag('taxchart_'_ i, $taxcharts, value_title_sub = \taxchart_value_title_sub, default = $temp, style="width: 250px") %]
-            </td>
-            <td>
-              [% temp = "project_id_"_ i %]
-              [% L.select_tag(temp, ALL_PROJECTS, with_empty = 1, default = loop.last ? globalproject_id : $temp, value_key = 'id', title_key = 'projectnumber') %]
-            </td>
-          </tr>
+[% UNLESS no_payment_bookings %]
+  <table class="tbl-list">
+    <caption>[% 'Payments' | $T8 %]</caption>
+    <thead>
+      <tr>
+        <th>[% 'Date' | $T8 %]</th>
+        <th>[% 'Source' | $T8 %]</th>
+        <th>[% 'Memo' | $T8 %]</th>
+        <th>[% 'Amount' | $T8 %]</th>
+        <th></th>
+        [% IF ( !defaultcurrency || (currency != defaultcurrency) ) %]
+          <th>[% 'Exch' | $T8 %]</th>
         [% END %]
-
-        <tr>
-          <td colspan="6">
-            <hr noshade>
-          </td>
-        </tr>
-        <tr>
+        <th>[% 'Account' | $T8 %]</th>
+        <th>[% 'Project Number' | $T8 %]</th>
+      </tr>
+    </thead>
+    <tbody>
+      [% FOREACH i IN [1..paidaccounts] %] [% temp = "paidaccount_changeable_"_ i %] [% changeable = $temp %]
+      <tr>
+        [% temp = "datepaid_"_ i %]
+        <td>
+          [% IF( changeable ) %] [% L.date_tag(temp, $temp ? $temp : today) %]
+          [% ELSE %] [% $temp | html %] <input type="hidden" name="[% temp %]" value="[% $temp | html %]"> [% END %]
+        </td>
+        <td>
+          [% temp = "source_"_ i %]
+          [% IF( changeable ) %]  <input type="text" name="[% temp %]" size="11" value="[% $temp | html %]">
+          [% ELSE %] [% $temp | html %]  <input type="hidden" name="[% temp %]" value="[% $temp | html %]">[% END %]
+        </td>
+        <td>
+          [% temp = "memo_"_ i %]
+          [% IF( changeable ) %] <input type="text" name="[% temp %]" size="11" value="[% $temp | html %]">
+          [% ELSE %] [% $temp | html %] <input type="hidden" name="[% temp %]" value="[% $temp | html %]"> [% END %]
+        </td>
+        <td>
+          [% temp = "paid_"_ i %]
+          [% IF( changeable ) %]
+            <input name="[% temp %]" data-validate="number" value="[% $temp | html %]" size="11" class="numeric">
+          [% ELSE %]
+            [% $temp | html %]
+            <input type="hidden" name="[% temp %]" value="[% $temp | html %]">
+          [% END %]
+        </td>
+        <td>
+          [% IF changeable && loop.last && paid_missing > 0 %] <input type="button" id="ap_set_to_paid_missing" value="[% " set to paid missing" | $t8 %]"> [% END %]
+        </td>
+        [% IF ( !defaultcurrency || (currency != defaultcurrency) ) %]
           <td>
-            [% P.chart.picker('AP_chart_id', AP_chart_id, style="width: 400px", type="AP") %]
+            [% temp = "exchangerate_"_ i %]
+            [% temp_forex = "forex_"_ i %]
+            [% IF( $temp_forex || !changeable ) %] [% $temp | html %] <input type="hidden" name="[% temp %]" value="[% $temp | html %]">
+            [% ELSE %]  <input type="text" name="[% temp %]" size="11" value="[% $temp | html %]"> [% END %]
+            <input type="hidden" name="[% temp_forex %]" value="[% $temp_forex | html %]">
           </td>
-          <th align="left">[% invtotal | html %]</th>
-          <td colspan="4"></td>
-        </tr>
-      </table>
-     </td>
+        [% END %]
+        <td>
+          [% temp = "AP_paid_"_ i %]
+          [% IF( changeable ) %] [% L.select_tag(temp, ALL_CHARTS_AP_paid, value_title_sub = \AP_paid_value_title_sub, default = ($temp || accno_arap)) %]
+          [% ELSE %] [% $temp | html %]  <input type="hidden" name="[% temp %]" value="[% $temp | html %]"> [% END %]
+        </td>
+        <td>
+          [% temp = "paid_project_id_"_ i %]
+          [% IF( changeable ) %] [% L.select_tag(temp, ALL_PROJECTS, with_empty = 1, default = $temp, value_key = 'id', title_key = 'projectnumber') %]
+          [% ELSE %] <input type="hidden" name="[% temp %]" value="[% $temp | html %]"> [% temp = "label"_ temp %] [% $temp | html %] [% END %]
+        </td>
+      </tr>
+      [% END %]
+    </tbody>
+    <tfoot>
+    <tr>
+      <td></td>
+      <td></td>
+      <th class="right">[% 'Total' | $T8 %]</th>
+      <td class="numeric">[% LxERP.format_amount(totalpaid, 2) | html %]</td>
+      <td></td>
+      [% IF ( !defaultcurrency || (currency != defaultcurrency) ) %]
+        <th></th>
+      [% END %]
+      <td></td>
+      <td></td>
     </tr>
     <tr>
-      <td>
-        <table width="100%">
-        <tr>
-          <th align="left" width="1%">[% 'Notes' | $T8 %]</th>
-          <td align="left">
-            <textarea name="notes" rows="[% textarea_rows %]" cols="50" wrap="soft" [% readonly %]>[% notes | html %]</textarea>
-          </td>
-
-          <th align="left" width=1%>[% 'Notes for vendor' | $T8 %]</th>
-          <td align="left">
-            <textarea name="intnotes" rows="[% textarea_rows %]" cols="50" wrap="soft" readonly>[% intnotes | html %]</textarea>
-          </td>
-        </tr>
-      </table>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      [% UNLESS no_payment_bookings %]
-      <table width="100%">
-        <tr class="listheading">
-          <th class="listheading" colspan="7">[% 'Payments' | $T8 %]</th>
-        </tr>
-
-        <tr>
-          <th>[% 'Date' | $T8 %]</th>
-          <th>[% 'Source' | $T8 %]</th>
-          <th>[% 'Memo' | $T8 %]</th>
-          <th>[% 'Amount' | $T8 %]</th>
-          <th></th>
-          [% IF ( !defaultcurrency || (currency != defaultcurrency) ) %]
-            <th>[% 'Exch' | $T8 %]</th>
-          [% END %]
-          <th>[% 'Account' | $T8 %]</th>
-          <th>[% 'Project Number' | $T8 %]</th>
-        </tr>
-
-        [% FOREACH i IN [1..paidaccounts] %]
-          [% temp = "paidaccount_changeable_"_ i %]
-          [% changeable = $temp %]
-
-          <tr>
-            [% temp = "datepaid_"_ i %]
-            <td align="center">
-              [% IF( changeable ) %]
-                [% L.date_tag(temp, $temp ? $temp : today) %]
-              [% ELSE %]
-                [% $temp | html %]
-                <input type="hidden" name="[% temp %]" value="[% $temp | html %]">
-              [% END %]
-            </td>
-
-            [% temp = "source_"_ i %]
-            <td align="center">
-              [% IF( changeable ) %]
-                <input name="[% temp %]" size="11" value="[% $temp | html %]">
-              [% ELSE %]
-                [% $temp | html %]
-                <input type="hidden" name="[% temp %]" value="[% $temp | html %]">
-              [% END %]
-            </td>
-
-            [% temp = "memo_"_ i %]
-            <td align="center">
-              [% IF( changeable ) %]
-                <input name="[% temp %]" size="11" value="[% $temp | html %]">
-              [% ELSE %]
-                [% $temp | html %]
-                <input type="hidden" name="[% temp %]" value="[% $temp | html %]">
-              [% END %]
-            </td>
-
-            [% temp = "paid_"_ i %]
-            <td align="center">
-              [% IF( changeable ) %]
-                <input name="[% temp %]" size="11" data-validate="number" class="numeric" value="[% $temp | html %]">
-              [% ELSE %]
-                [% $temp | html %]
-                <input type="hidden" name="[% temp %]" value="[% $temp | html %]">
-              [% END %]
-            </td>
-
-            <td>
-              [% IF changeable && loop.last && paid_missing > 0 %]
-                <input type="button" id="ap_set_to_paid_missing" value="[% "Set to paid missing" | $T8 %]">
-              [% END %]
-            </td>
-
-            [% IF ( !defaultcurrency || (currency != defaultcurrency) ) %]
-              <td align="center">
-                [% temp = "exchangerate_"_ i %]
-                [% temp_forex = "forex_"_ i %]
-
-                [% IF( $temp_forex || !changeable ) %]
-                  [% $temp | html %]
-                  <input type="hidden" name="[% temp %]" value="[% $temp | html %]">
-                [% ELSE %]
-                  <input name="[% temp %]" size="11" value="[% $temp | html %]">
-                [% END %]
-
-                <input type=hidden name="[% temp_forex %]" value="[% $temp_forex | html %]">
-              </td>
-            [% END %]
+      <td></td>
+      <td></td>
+      <th class="right">[% 'Missing amount' | $T8 %]</th>
+      <td class="numeric">[% LxERP.format_amount(paid_missing, 2) | html %]</td>
+      <td></td>
+      [% IF ( !defaultcurrency || (currency != defaultcurrency) ) %]
+        <th></th>
+      [% END %]
+      <td></td>
+      <td></td>
+    </tr>
+    </tfoot>
+  </table>
+[% END %]
 
-            [% temp     = "AP_paid_"_ i %]
-            [% readonly = "AP_paid_readonly_desc_"_ i %]
-            <td align="center">
-              [% IF( changeable ) %]
-                [% L.select_tag(temp, ALL_CHARTS_AP_paid, value_title_sub = \AP_paid_value_title_sub, default = ($temp || accno_arap))  %]
-              [% ELSE %]
-                [% $readonly | html %]
-                <input type="hidden" name="[% temp %]" value="[% $temp | html %]">
-              [% END %]
-            </td>
+</div><!-- /.wrapper -->
 
-            <td align="center">
-              [% temp = "paid_project_id_"_ i %]
-              [% IF( changeable ) %]
-                [% L.select_tag(temp, ALL_PROJECTS, with_empty = 1, default = $temp, value_key = 'id', title_key = 'projectnumber') %]
-              [% ELSE %]
-                <input type="hidden" name="[% temp %]" value="[% $temp | html %]">
-                [% temp = "label"_ temp %]
-                [% $temp | html %]
-              [% END %]
-            </td>
-          </tr>
-        [% END %]
+</div><!-- /#ui-tabs-basic-data -->
 
-        <tr>
-          <td></td>
-          <td></td>
-          <td align="center">[% 'Total' | $T8 %]</td>
-          <td align="center">[% LxERP.format_amount(totalpaid, 2) | html %]</td>
-        </tr>
-        <tr>
-          <td></td>
-          <td></td>
-          <td align="center">[% 'Missing amount' | $T8 %]</td>
-          <td align="center">[% LxERP.format_amount(paid_missing, 2) | html %]</td>
-        </tr>
-      </table>
-      [% END %]
-    </td>
-  </tr>
-</table>
-</div>
 [% PROCESS 'webdav/_list.html' %]
 <div id="ui-tabs-1">
  [% LxERP.t8('Loading...') %]
 </div>
+
 </div>
 
-<hr size="3" noshade>
 
-<script type='text/javascript'>
+<script type="text/javascript">
  $('#ap_set_to_paid_missing').click(function(){ $('input[name^="paid_"]:last').val('[% LxERP.format_amount(paid_missing, 2) %]') });
 </script>
diff --git a/templates/webpages/ap/search.html b/templates/webpages/ap/search.html
index 3ee796ff7..62f10990a 100644
--- a/templates/webpages/ap/search.html
+++ b/templates/webpages/ap/search.html
@@ -1,141 +1,178 @@
-[%- USE T8 %]
-[%- USE L %][%- USE P -%]
-[% SET style="width: 250px" %]
+[% USE T8 %]
+[% USE L %]
+[% USE P %]
+
 <h1>[% title %]</h1>
 
- <form method="post" name="search" action="ap.pl" id="form">
+<form method="post" name="search" action="ap.pl" id="form">
+
+<div class="wrapper">
 
-  <table width=100%>
-  <tr>
-   <td>
-    <table>
-     <tr>
-      <th align=right>[% 'Vendor' | $T8 %]</th>
-      <td>[% L.input_tag("vendor", vendor, style=style, class="initial_focus") %]</td>
-     </tr>
+<table class="tbl-horizontal">
+  <caption>[% 'Vendor & Order' | $T8 %]</caption>
+  <colgroup> <col class="wi-small"><col class="wi-wide"> </colgroup>
+  <tbody>
+    <tr>
+      <th>[% 'Vendor' | $T8 %]</th>
+      <td>[% L.input_tag("vendor", vendor, style=style, class="initial_focus wi-normal") %]</td>
+    </tr>
     <tr>
-     <th align="right" nowrap>[% 'Contact Person' | $T8 %]</th>
-     <td>[% L.input_tag("cp_name", '', style=style) %]</td>
+      <th>[% 'Contact Person' | $T8 %]</th>
+      <td>[% L.input_tag("cp_name", '', class="wi-normal") %]</td>
     </tr>
-     <tr>
-      <th align=right nowrap>[% 'Department' | $T8 %]</th>
-      <td>[% L.select_tag('department_id', ALL_DEPARTMENTS, title_key = 'description', with_empty = 1, style=style) %]</td>
-     </tr>
-     <tr>
-      <th align=right nowrap>[% 'Invoice Number' | $T8 %]</th>
-      <td>[% L.input_tag("invnumber", "", style=style) %]</td>
-     </tr>
-     <tr>
-      <th align=right nowrap>[% 'Order Number' | $T8 %]</th>
-      <td>[% L.input_tag("ordnumber", "", style=style) %]</td>
-     </tr>
-     <tr>
-      <th align=right nowrap>[% 'Notes' | $T8 %]</th>
-      <td>[% L.input_tag("notes", "", style=style) %]</td>
-      <th align="right">[% 'Part Description' | $T8 %]</th>
-      <td>[% L.input_tag("parts_description", "", style=style) %]</td>
-     </tr>
-     <tr>
-      <th align="right">[% 'Project Number' | $T8 %]</th>
-      <td>[% P.project.picker("project_id", project_id, style=style) %]</td>
-      <th align="right">[% 'Part Number' | $T8 %]</th>
-      <td>[% L.input_tag("parts_partnumber", "", style=style) %]</td>
-     </tr>
-     <tr>
-      <th align=right nowrap>[% 'Invoice Date' | $T8 %]</th>
-      <td>
-       [% L.date_tag('transdatefrom') %]
-       [% 'Bis' | $T8 %]
-       [% L.date_tag('transdateto') %]
-     </td>
+    <tr>
+      <th>[% 'Department' | $T8 %]</th>
+      <td>[% L.select_tag('department_id', ALL_DEPARTMENTS, title_key = 'description', with_empty = 1, class="wi-normal") %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Part Description' | $T8 %]</th>
+      <td>[% L.input_tag("parts_description", "", class="wi-normal") %]</td>
     </tr>
-   <input type=hidden name=sort value=transdate>
-   </table>
-    </td>
+    <tr>
+      <th>[% 'Notes' | $T8 %]</th>
+      <td>[% L.input_tag("notes", "", class="wi-normal") %]</td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="tbl-horizontal">
+  <caption>[% 'Dates & Numbers' | $T8 %]</caption>
+  <colgroup> <col class="wi-small"><col class="wi-wide"> </colgroup>
+  <tbody>
+    <tr>
+      <th>[% 'Invoice Date' | $T8 %]</th>
+      <td><span class="wi-date">[% L.date_tag('transdatefrom') %] [% 'Bis' | $T8 %] [% L.date_tag('transdateto') %] </span></td>
+    </tr>
+    <tr>
+      <th>[% 'Invoice Number' | $T8 %]</th>
+      <td>[% L.input_tag("invnumber", "", class="wi-small") %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Order Number' | $T8 %]</th>
+      <td>[% L.input_tag("ordnumber", "", class="wi-small") %]</td>
     </tr>
     <tr>
-     <td>
-      <table>
-       <tr>
-        <th align=right nowrap>[% 'Include in Report' | $T8 %]</th>
-        <td>
-         <table width=100%>
-          <tr>
-           <td align=right><input name=open class=checkbox type=checkbox value=Y checked></td>
-           <td nowrap>[% 'Open' | $T8 %]</td>
-           <td align=right><input name=closed class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Closed' | $T8 %]</td>
-          </tr>
-          <tr>
-           <td align=right><input name="l_id" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'ID' | $T8 %]</td>
-           <td align=right><input name="l_invnumber" class=checkbox type=checkbox value=Y checked></td>
-           <td nowrap>[% 'Invoice Number' | $T8 %]</td>
-           <td align=right><input name="l_ordnumber" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Order Number' | $T8 %]</td>
-          </tr>
-          <tr>
-           <td align=right><input name="l_name" class=checkbox type=checkbox value=Y checked></td>
-           <td nowrap>[% 'Vendor' | $T8 %]</td>
-           <td align=right><input name="l_transdate" class=checkbox type=checkbox value=Y checked></td>
-           <td nowrap>[% 'Invoice Date' | $T8 %]</td>
-           <td align=right><input name="l_netamount" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Amount' | $T8 %]</td>
-          </tr>
-          <tr>
-           <td align=right><input name="l_tax" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Tax' | $T8 %]</td>
-           <td align=right><input name="l_amount" class=checkbox type=checkbox value=Y checked></td>
-           <td nowrap>[% 'Total' | $T8 %]</td>
-           <td align=right><input name="l_datepaid" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Date Paid' | $T8 %]</td>
-          </tr>
-          <tr>
-           <td align=right><input name="l_paid" class=checkbox type=checkbox value=Y checked></td>
-           <td nowrap>[% 'Paid' | $T8 %]</td>
-           <td align=right><input name="l_duedate" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Due Date' | $T8 %]</td>
-           <td align=right><input name="l_due" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Amount Due' | $T8 %]</td>
-          </tr>
-          <tr>
-           <td align=right><input name="l_notes" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Notes' | $T8 %]</td>
-           <td align=right><input name="l_employee" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Employee' | $T8 %]</td>
-          </tr>
-          <tr>
-           <td align=right><input name="l_subtotal" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Subtotal' | $T8 %]</td>
-           <td align=right><input name="l_globalprojectnumber" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Document Project Number' | $T8 %]</td>
-         </tr>
-          <tr>
-           <td align=right><input name="l_taxzone" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Steuersatz' | $T8 %]</td>
-           <td align=right><input name="l_payment_terms" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Payment Terms' | $T8 %]</td>
-           <td align=right><input name="l_charts" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Chart' | $T8 %]</td>
-           <td align=right><input name="l_direct_debit" id="l_direct_debit" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'direct debit' | $T8 %]</td>
-          </tr>
-         <tr>
-          <td colspan=4 align=left><b>[% 'Vendor' | $T8 %] </td>
-         </tr>
-         <tr>
-           <td align=right><input name="l_vendornumber" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Vendor Number' | $T8 %]</td>
-           <td align=right><input name="l_country" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Country' | $T8 %]</td>
-           <td align=right><input name="l_ustid" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'USt-IdNr.' | $T8 %]</td>
-          </tr>
-         </table>
-        </td>
-       </tr>
-      </table>
-     </td>
+      <th>[% 'Part Number' | $T8 %]</th>
+      <td>[% L.input_tag("parts_partnumber", "", class="wi-small") %]</td>
     </tr>
-   </table>
-  </form>
+    <tr>
+      <th>[% 'Project Number' | $T8 %]</th>
+      <td>[% P.project.picker("project_id", project_id, class="wi-small") %]</td>
+    </tr>
+  </tbody>
+</table>
+
+<input type="hidden" name="sort" value="transdate">
+
+</div><!-- /.wrapper -->
+<div class="form-addition control-panel">
+
+  <h3>[% 'Include in Report' | $T8 %]</h3>
+
+  <div class="list col">
+    <h4>[% 'Status' | $T8 %]</h4>
+    <div>
+      <input name="open" id="open" type="checkbox" value="Y" checked>
+      <label for="open">[% 'Open' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="closed" id="closed" type="checkbox" value="Y"><label for="closed">[% 'Closed' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_paid" id="l_paid" type="checkbox" value="Y" checked><label for="l_paid">[% 'Paid' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_due" id="l_due" type="checkbox" value="Y"><label for="l_due">[% 'Amount Due' | $T8 %]</label>
+    </div>
+  </div>
+
+  <div class="list col">
+    <h4>[% 'Dates' | $T8 %]</h4>
+    <div>
+      <input name="l_transdate" id="l_transdate" type="checkbox" value="Y" checked><label for="l_transdate">[% 'Invoice Date' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_datepaid" id="l_datepaid" type="checkbox" value="Y"><label for="l_datepaid">[% 'Date Paid' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_duedate" id="l_duedate" type="checkbox" value="Y"><label for="l_duedate">[% 'Due Date' | $T8 %]</label>
+    </div>
+  </div>
+
+  <div class="list col">
+    <h4>[% 'ID\'s & Numbers' | $T8 %]</h4>
+    <div>
+      <input name="l_id" id="l_id" type="checkbox" value="Y"><label for="l_id">[% 'ID' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_invnumber" id="l_invnumber" type="checkbox" value="Y" checked><label for="l_invnumber">[% 'Invoice Number' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_ordnumber" id="l_ordnumber" type="checkbox" value="Y"><label for="l_ordnumber">[% 'Order Number' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_vendornumber" id="l_vendornumber" type="checkbox" value="Y"><label for="l_vendornumber">[% 'Vendor Number' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_globalprojectnumber" id="l_globalprojectnumber" type="checkbox" value="Y"><label for="l_globalprojectnumber">[% 'Document Project Number' | $T8 %]</label>
+    </div>
+  </div>
+
+  <div class="list col">
+    <h4>[% 'Amounts' | $T8 %]</h4>
+    <div>
+      <input name="l_netamount" id="l_netamount" type="checkbox" value="Y"><label for="l_netamount">[% 'Amount' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_tax" id="l_tax" type="checkbox" value="Y"><label for="l_tax">[% 'Tax' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_amount" id="l_amount" type="checkbox" value="Y" checked><label for="l_amount">[% 'Total' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_subtotal" id="l_subtotal" type="checkbox" value="Y"><label for="l_subtotal">[% 'Subtotal' | $T8 %]</label>
+    </div>
+  </div>
+
+  <div class="list col">
+    <h4>[% 'Handling' | $T8 %]</h4>
+    <div>
+      <input name="l_employee" id="l_employee" type="checkbox" value="Y"><label for="l_employee">[% 'Employee' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_charts" id="l_charts" type="checkbox" value="Y"><label for="l_charts">[% 'Chart' | $T8 %]</label>
+    </div>
+  </div>
+
+  <div class="list col">
+    <h4>[% 'Order' | $T8 %]</h4>
+    <div>
+      <input name="l_notes" id="l_notes" type="checkbox" value="Y"><label for="l_notes">[% 'Notes' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_taxzone" id="l_taxzone" type="checkbox" value="Y"><label for="l_taxzone">[% 'Steuersatz' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_payment_terms" id="l_payment_terms" type="checkbox" value="Y"><label for="l_payment_terms">[% 'Payment Terms' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_direct_debit" id="l_direct_debit" id="l_direct_debit" type="checkbox" value="Y"><label for="l_direct_debit">[% 'direct debit' | $T8 %]</label>
+    </div>
+  </div>
+
+  <div class="list col">
+  <h4>[% 'Vendor' | $T8 %]</h4>
+  <div>
+    <input name="l_name" id="l_name" type="checkbox" value="Y" checked><label for="l_name">[% 'Vendor' | $T8 %]</label>
+  </div>
+  <div>
+    <input name="l_country" id="l_country" type="checkbox" value="Y"><label for="l_country">[% 'Country' | $T8 %]</label>
+  </div>
+  <div>
+    <input name="l_ustid" id="l_ustid" type="checkbox" value="Y"><label for="l_ustid">[% 'USt-IdNr.' | $T8 %]</label>
+  </div>
+</div>
+
+</div><!-- /.form-addition -->
+
+</form>
diff --git a/templates/webpages/ar/ar_transactions_bottom.html b/templates/webpages/ar/ar_transactions_bottom.html
index bb939a569..f0a037ee1 100644
--- a/templates/webpages/ar/ar_transactions_bottom.html
+++ b/templates/webpages/ar/ar_transactions_bottom.html
@@ -1,24 +1,25 @@
-[% USE T8 %][% USE HTML %][%- USE LxERP -%][%- USE L -%]
+[% USE T8 %]
+[% USE HTML %]
+[% USE LxERP %]
+[% USE L %]
 
-  [% L.hidden_tag("action", "MassInvoiceCreatePrint/dispatch") %]
-  [% L.hidden_tag("printer_id") %]
- </form>
+[% L.hidden_tag("action", "MassInvoiceCreatePrint/dispatch") %]
+[% L.hidden_tag("printer_id") %]
+</form>
 
- <form method="post" action="ar.pl" id="create_new_form">
+<form method="post" action="ar.pl" id="create_new_form">
   [% L.hidden_tag("callback", callback) %]
- </form>
+</form>
 
 [% IF ALL_PRINTERS.size %]
- <div id="print_options" class="hidden">
-  <p>
-  [% LxERP.t8("Print destination") %]:
-  [% SET  printers = [ { description=LxERP.t8("Download PDF, do not print") } ] ;
-     CALL printers.import(ALL_PRINTERS);
-     L.select_tag("", printers, id="print_options_printer_id", title_key="description", default=printer_id) %]
-  </p>
+<div id="print_options" class="hidden">
+<p>
+[% LxERP.t8("Print destination") %]:
+[% SET  printers = [ { description=LxERP.t8("Download PDF, do not print") } ] ;
+   CALL printers.import(ALL_PRINTERS);
+   L.select_tag("", printers, id="print_options_printer_id", title_key="description", default=printer_id) %]
+</p>
 
-  <p>
-   [% L.button_tag("kivi.MassInvoiceCreatePrint.massPrint()", LxERP.t8('Print')) %]
-  </p>
- </div>
+<p>[% L.button_tag("kivi.MassInvoiceCreatePrint.massPrint()", LxERP.t8('Print')) %]</p>
+</div>
 [% END %]
diff --git a/templates/webpages/ar/form_footer.html b/templates/webpages/ar/form_footer.html
index 3fedfe185..6b41e5fe0 100644
--- a/templates/webpages/ar/form_footer.html
+++ b/templates/webpages/ar/form_footer.html
@@ -1,27 +1,27 @@
 [% USE LxERP %]
 [% USE T8 %]
-[% USE L %][%- USE P -%]
+[% USE L %]
+[% USE P %]
 
-  [% IF ( follow_up_length && follow_up_due_length ) %]
-    [% LxERP.t8('There are #1 unfinished follow-ups of which #2 are due.', follow_up_length , follow_up_due_length) %]
-  [% END %]
+[% IF ( follow_up_length && follow_up_due_length ) %]
+  [% LxERP.t8('There are #1 unfinished follow-ups of which #2 are due.', follow_up_length , follow_up_due_length) %]
+[% END %]
+
+<input type="hidden" name="gldate" value="[% gldate | html %]">
+<input type="hidden" name="callback" value="[% callback | html %]">
+[% P.hidden_tag('draft_id', draft_id) %]
+[% P.hidden_tag('draft_description', draft_description) %]
 
-  <input type="hidden" name="gldate" value="[% gldate | html %]">
-  <input type="hidden" name="callback" value="[% callback | html %]">
-  [% P.hidden_tag('draft_id', draft_id) %]
-  [% P.hidden_tag('draft_description', draft_description) %]
 </form>
 
-<script type="text/javascript">
- <!--
+<script type="text/javascript"><!--
 $(document).ready(function() {
-  [%- SET row=0 %]
-  [%- WHILE row < rowcount %]
-   [%- SET row=row + 1 %]
+  [% SET row=0 %]
+  [% WHILE row < rowcount %]
+   [% SET row=row + 1 %]
    $('#AR_amount_chart_id_[% row %]').on('set_item:ChartPicker', function(e, item) {
      kivi.GL.update_taxes(this);
    });
-  [%- END %]
+  [% END %]
 });
--->
-</script>
+--></script>
diff --git a/templates/webpages/ar/form_header.html b/templates/webpages/ar/form_header.html
index 75bc22eb4..e3496fdfa 100644
--- a/templates/webpages/ar/form_header.html
+++ b/templates/webpages/ar/form_header.html
@@ -1,13 +1,14 @@
-[%- USE HTML %]
-[%- USE L %]
-[%- USE T8 %]
-[%- USE LxERP %][%- USE P -%]
+[% USE HTML %]
+[% USE L %]
+[% USE T8 %]
+[% USE LxERP %]
+[% USE P %]
 
 <h1>[% title | html %]</h1>
 
-[%- INCLUDE 'common/flash.html' %]
+[% INCLUDE 'common/flash.html' %]
 
-<form method=post name="arledger" action="[% script %]" id="form">
+<form method="post" name="arledger" action="[% script %]" id="form">
 
 [% L.hidden_tag('id', id) %]
 [% L.hidden_tag('sort', sort) %]
@@ -20,301 +21,313 @@
 [% L.hidden_tag('follow_up_rowcount', 1) %]
 <input type="hidden" name="lastmtime" value="[% HTML.escape(lastmtime) %]">
 
-[%- IF saved_message %]<p>[% saved_message | html  %]</p>[% END %]
+[% IF saved_message %]<p class="message message_info">[% saved_message | html  %]</p>[% END %]
 
 <div class="tabwidget">
- <ul>
-  <li><a href="#ui-tabs-basic-data">[% 'Basic Data' | $T8 %]</a></li>
-[%- IF id %]
-  [%- IF INSTANCE_CONF.get_doc_storage %]
-  <li><a href="controller.pl?action=File/list&file_type=attachment&object_type=invoice&object_id=[% HTML.url(id) %]">[% 'Attachments' | $T8 %]</a></li>
-  [%- END %]
-  [% IF AUTH.assert('record_links', 1) %]
-  <li><a href="controller.pl?action=RecordLinks/ajax_list&object_model=Invoice&object_id=[% HTML.url(id) %]">[% 'Linked Records' | $T8 %]</a></li>
-  [%- END %]
-  <li><a href="[% 'controller.pl?action=AccTrans/list_transactions&trans_id=' _ HTML.url(id) | html %]">[% LxERP.t8('Transactions') %]</a></li>
-[%- END %]
- </ul>
-
-<div id="ui-tabs-basic-data">
-<table width=100%>
-  <tr valign=top>
-    <td>
-      <table width=100%>
-        <tr valign=top>
-          <td>
-            <table>
-              <tr>
-                <th align="right" nowrap>[% 'Customer' | $T8 %]</th>
-                <td colspan=3>
-                 [% P.customer_vendor.picker("customer_id", customer_id, type="customer", style="width: 300px", class=(initial_focus == 'customer_id' ? "initial_focus" : ""), onchange="\$('#update_button').click()") %]
-                 [% L.button_tag("show_vc_details('customer')", LxERP.t8('Details (one letter abbreviation)')) %]
-                 [% L.hidden_tag("previous_customer_id", customer_id) %]
-                 [% L.hidden_tag('terms', terms) %]
-               </td>
-              </tr>
-[%- IF max_dunning_level || invoice_obj.dunning_config_id  %]
-              <tr>
-                <th align="right" valign="top">[% LxERP.t8("Dunning status") %]</th>
-                <td valign="top">
-                 [% IF invoice_obj.dunning_config_id %]
-                  <span class="dunned_invoice">[% LxERP.t8("This invoice's dunning level: #1", invoice_obj.dunning_config.dunning_description) %]</span>
-                  [% IF max_dunning_level %]<br>[% END %]
-                 [% END %]
-                 [% IF max_dunning_level %]
-                  <span class="customer_dunning_level">
-                   [% LxERP.t8("Customer's current maximum dunning level: #1", max_dunning_level) %]
-                   <br>
-                   [% LxERP.t8("Dunned open amount: #1", LxERP.format_amount(dunning_amount, 2)) %]
-                  </span>
-                 [% END %]
-                </td>
-              </tr>
-[%- END %]
-              <tr>
-                <th align="right" valign="top">[% LxERP.t8("Credit Limit") %]</th>
-                <td>
-                 [% LxERP.format_amount(creditlimit, 0) %][% L.hidden_tag('creditlimit', LxERP.format_amount(creditlimit, 0)) %];
-                 [% LxERP.t8("Remaining") %]
-                 <span class="plus[% creditremaining < 0 ? 0 : 1 %]">[% LxERP.format_amount(creditremaining, 0) %][% L.hidden_tag('creditremaining', LxERP.format_amount(creditremaining, 0)) %]</span>
-                </td>
-              </tr>
-[%- IF invoice_obj.sepa_exports.as_list.size %]
-              <tr>
-                <th align="right">[% LxERP.t8("SEPA exports") %]</th>
-                <td>
-                 [% FOREACH export = invoice_obj.sepa_exports.as_list %]
-                  <a href="sepa.pl?action=bank_transfer_edit&vc=customer&id=[% HTML.url(export.id) %]">[% HTML.escape(export.id) %]</a>
-                  [% UNLESS loop.last %], [% END %]
-                 [% END %]
-                </td>
-              </tr>
-[%- END %]
-              <tr>
-                <th align=right>[% 'Currency' | $T8 %]</th>
-                <td>[% L.select_tag("currency", currencies, default=currency, value_key="name", title_key="name") %]</td>
-                [% L.hidden_tag('defaultcurrency', defaultcurrency) %]
-                [% L.hidden_tag('fxgain_accno', fxgain_accno) %]
-                [% L.hidden_tag('fxloss_accno', fxloss_accno) %]
 
-                [% L.hidden_tag('forex', forex) %]
-                [% IF show_exch %]
-                   <th align=right>[% 'Exchangerate' | $T8 %]</th>
-                   <td>[%- IF forex %][% L.hidden_tag('exchangerate', LxERP.format_amount(exchangerate, 5)) %][% LxERP.format_amount(exchangerate, 5) %][%- ELSE %][% L.input_tag('exchangerate', LxERP.format_amount(exchangerate, 5), size=10) %][%- END %]</td>
-                [% END %]
-              </tr>
-              [% IF ALL_DEPARTMENTS %]
-                <tr>
-                  <th align="right" nowrap>[% 'Department' | $T8 %]</th>
-                  <td colspan=3>[% L.select_tag('department_id', ALL_DEPARTMENTS, default = department_id, title_key = 'description', with_empty = 1) %]</td>
-                </tr>
-              [% END %]
-              <tr>
-                <td align=right>[% L.checkbox_tag('taxincluded', checked=taxincluded) %]</td>
-                <th align="left" nowrap><label for="taxincluded">[% 'Tax Included' | $T8 %]</label></th>
-              </tr>
-              <tr>
-                <td align="right">[% L.checkbox_tag('direct_debit', checked=direct_debit) %]</td>
-                <th align="left" nowrap><label for="direct_debit">[% 'direct debit' | $T8 %]</label></th>
-              </tr>
-            </table>
-          </td>
-          <td align=right>
-            <table>
-              <tr>
-                <th align=right nowrap>[% 'Salesperson' | $T8 %]</th>
-                <td  colspan=2>[% P.select_tag("employee_id", employees, default=employee_id, title_key='safe_name') %]</td>
-              </tr>
-              <tr>
-                <th align=right nowrap>[% 'Invoice Number' | $T8 %]</th>
-                <td><input name=invnumber size=11 value="[% invnumber | html %]"></td>
-              </tr>
-              <tr>
-                <th align=right nowrap>[% 'Order Number' | $T8 %]</th>
-                <td><input name=ordnumber size=11 value="[% ordnumber | html %]"></td>
-              </tr>
-              <tr>
-                <th align=right nowrap>[% 'Invoice Date' | $T8 %]</th>
-                <td>[% L.date_tag('transdate', transdate) %]</td>
-              </tr>
-              <tr>
-                <th align=right nowrap>[% 'Due Date' | $T8 %]</th>
-                <td>[% L.date_tag('duedate', duedate) %]</td>
-              </tr>
-              <tr>
-                <th align=right nowrap>[% 'Project Number' | $T8 %]</th>
-                <td>[% L.select_tag('globalproject_id', ALL_PROJECTS, title_key = 'projectnumber', default = globalproject_id, with_empty = 1, onChange = "document.getElementById('update_button').click();") %]</td>
-              </tr>
-     </table>
-          </td>
-        </tr>
-      </table>
-    </td>
-  </tr>
+<ul>
+  <li><a href="#ui-tabs-basic-data">[% 'Basic Data' | $T8 %]</a></li>
+  [% IF id %]
+    [% IF INSTANCE_CONF.get_doc_storage %]
+      <li><a href="controller.pl?action=File/list&file_type=attachment&object_type=invoice&object_id=[% HTML.url(id) %]">[% 'Attachments' | $T8 %]</a></li>
+    [% END %]
+    [% IF AUTH.assert('record_links', 1) %]
+      <li><a href="controller.pl?action=RecordLinks/ajax_list&object_model=Invoice&object_id=[% HTML.url(id) %]">[% 'Linked Records' | $T8 %]</a></li>
+    [% END %]
+      <li><a href="[% 'controller.pl?action=AccTrans/list_transactions&trans_id=' _ HTML.url(id) | html %]">[% LxERP.t8('Transactions') %]</a></li>
+  [% END %]
+</ul>
 
-                [% L.hidden_tag('rowcount', rowcount) %]
-  <tr>
-      <td>
-          <table width=100%>
-           <tr class=listheading>
-          <th class=listheading style="width:15%">[% 'Account' | $T8 %]</th>
-          <th class=listheading style="width:10%">[% 'Amount' | $T8 %]</th>
-          <th class=listheading style="width:10%">[% 'Tax' | $T8 %]</th>
-          <th class=listheading style="width:5%">[% 'Taxkey' | $T8 %]</th>
-          <th class=listheading style="width:10%">[% 'Project' | $T8 %]</th>
-        </tr>
 
+<div id="ui-tabs-basic-data">
 
-[%- FOREACH row IN transactions %]
-        <tr>
-          <td>[% row.selectAR_amount %]</td>
-          <td>[% L.input_tag('amount_' _ loop.count, LxERP.format_amount(row.amount, 2)) %]</td>
-          <td>[% L.hidden_tag('tax_' _ loop.count, LxERP.format_tax(row.tax, 2)) %][% LxERP.format_amount(row.tax, 2) | html %]</td>
-          <td>[% row.taxchart %]</td>
-          <td>[% L.select_tag('project_id_' _ loop.count, ALL_PROJECTS, title_key = 'projectnumber', default = row.project_id, with_empty = 1) %]</td>
-        </tr>
-[%- END %]
+<div class="wrapper">
 
+  <table class="tbl-horizontal">
+    <caption>[% 'Customer &amp; Order' | $T8 %]</caption>
+    <tbody>
+      <tr>
+        <th>[% 'Customer' | $T8 %]</th>
+        <td>
+         [% P.customer_vendor.picker("customer_id", customer_id, type="customer", style="width: 300px", class=(initial_focus == 'customer_id' ? "initial_focus" : ""), onchange="\$('#update_button').click()") %]
+         [% L.button_tag("show_vc_details('customer')", LxERP.t8('Details (one letter abbreviation)')) %]
+         [% L.hidden_tag("previous_customer_id", customer_id) %]
+         [% L.hidden_tag('terms', terms) %]
+       </td>
+      </tr>
+      [% IF max_dunning_level || invoice_obj.dunning_config_id  %]
+      <tr>
+        <th>[% LxERP.t8("Dunning status") %]</th>
+        <td>
+          [% IF invoice_obj.dunning_config_id %]
+          <span class="dunned_invoice">[% LxERP.t8("This invoice's dunning level: #1", invoice_obj.dunning_config.dunning_description) %]</span>
+            [% IF max_dunning_level %]<br>[% END %]
+          [% END %]
+          [% IF max_dunning_level %]
+          <span class="customer_dunning_level">
+            [% LxERP.t8("Customer's current maximum dunning level: #1", max_dunning_level) %] <br>
+            [% LxERP.t8("Dunned open amount: #1", LxERP.format_amount(dunning_amount, 2)) %]
+          </span>
+         [% END %]
+        </td>
+      </tr>
+      [% END %]
+      <tr>
+        <th>[% LxERP.t8("Credit Limit") %]</th>
+        <td>
+         [% LxERP.format_amount(creditlimit, 0) %][% L.hidden_tag('creditlimit', LxERP.format_amount(creditlimit, 0)) %];
+         [% LxERP.t8("Remaining") %]
+         <span class="plus[% creditremaining < 0 ? 0 : 1 %]">[% LxERP.format_amount(creditremaining, 0) %][% L.hidden_tag('creditremaining', LxERP.format_amount(creditremaining, 0)) %]</span>
+        </td>
+      </tr>
+      [% IF invoice_obj.sepa_exports.as_list.size %]
+      <tr>
+        <th>[% LxERP.t8("SEPA exports") %]</th>
+        <td>
+         [% FOREACH export = invoice_obj.sepa_exports.as_list %]
+          <a href="sepa.pl?action=bank_transfer_edit&vc=customer&id=[% HTML.url(export.id) %]">[% HTML.escape(export.id) %]</a>
+          [% UNLESS loop.last %], [% END %]
+         [% END %]
+        </td>
+      </tr>
+      [% END %]
+      <tr>
+        <th>[% 'Currency' | $T8 %]</th>
+        <td>[% L.select_tag("currency", currencies, default=currency, value_key="name", title_key="name") %]</td>
+        [% L.hidden_tag('defaultcurrency', defaultcurrency) %]
+        [% L.hidden_tag('fxgain_accno', fxgain_accno) %]
+        [% L.hidden_tag('fxloss_accno', fxloss_accno) %]
+        [% L.hidden_tag('forex', forex) %]
+        [% IF show_exch %]
+          <!-- PENDENT: Testen und Design ggf. anpassen -->
+          &nbsp; [% 'Exchangerate' | $T8 %]:
+          [% IF forex %]
+            [% L.hidden_tag('exchangerate', LxERP.format_amount(exchangerate, 5)) %][% LxERP.format_amount(exchangerate, 5) %]
+          [% ELSE %]
+            [% L.input_tag('exchangerate', LxERP.format_amount(exchangerate, 5), size=10) %]
+          [% END %]
+        [% END %]
+      </tr>
+      [% IF ALL_DEPARTMENTS %]
         <tr>
-          <td colspan=6>
-            <hr noshade>
-          </td>
+          <th>[% 'Department' | $T8 %]</th>
+          <td>[% L.select_tag('department_id', ALL_DEPARTMENTS, default = department_id, title_key = 'description', with_empty = 1) %]</td>
         </tr>
-        <tr>
-          <td>[% P.chart.picker("AR_chart_id", AR_chart_id, style="width: 400px", type="AR") %]</td>
-          <th align=left>[% LxERP.format_amount(invtotal, 2) | html %]</th>
+      [% END %]
+      <tr>
+        <th></th>
+        <td>[% L.checkbox_tag('taxincluded', checked=taxincluded) %] <label for="taxincluded">[% 'Tax Included' | $T8 %]</label></td>
+      </tr>
+      <tr>
+        <th></th>
+        <td>[% L.checkbox_tag('direct_debit', checked=direct_debit) %] <label for="direct_debit">[% 'direct debit' | $T8 %]</label></td>
+      </tr>
+    </tbody>
+  </table>
 
-          <input type=hidden name=oldinvtotal value='[% oldinvtotal %]'>
-          <input type=hidden name=oldtotalpaid value='[% oldtotalpaid %]'>
+  <table class="tbl-horizontal">
+    <caption>[% 'Notes' | $T8 %]</caption>
+    <tbody>
+      <tr>
+        <td>
+          <textarea name="notes" rows="[% rows %]" cols="30" wrap="soft">[% notes | html %]</textarea>
+        </td>
+      </tr>
+      <tr>
+        <th>
+          [% 'Notes for customer' | $T8 %]<br>
+          <textarea name="intnotes" rows="[% rows %]" cols="30" wrap="soft" readonly>[% intnotes | html %]</textarea>
+        </th>
+      </tr>
+    </tbody>
+  </table>
 
-          <input type=hidden name=taxaccounts value="[% taxaccounts | html %]">
+  <table class="tbl-horizontal">
+    <caption>[% 'Dates &amp; Numbers' | $T8 %]</caption>
+    <tbody>
+      <tr>
+        <th>[% 'Salesperson' | $T8 %]</th>
+        <td>[% P.select_tag("employee_id", employees, default=employee_id, title_key='safe_name') %]</td>
+      </tr>
+      <tr>
+        <th>[% 'Invoice Number' | $T8 %]</th>
+        <td><input type="text" name="invnumber" size="11" value="[% invnumber | html %]"></td>
+      </tr>
+      <tr>
+        <th>[% 'Order Number' | $T8 %]</th>
+        <td><input type="text" name="ordnumber" size="11" value="[% ordnumber | html %]"></td>
+      </tr>
+      <tr>
+        <th>[% 'Invoice Date' | $T8 %]</th>
+        <td>[% L.date_tag('transdate', transdate) %]</td>
+      </tr>
+      <tr>
+        <th>[% 'Due Date' | $T8 %]</th>
+        <td>[% L.date_tag('duedate', duedate) %]</td>
+      </tr>
+      <tr>
+        <th>[% 'Project Number' | $T8 %]</th>
+        <td>[% L.select_tag('globalproject_id', ALL_PROJECTS, title_key = 'projectnumber', default = globalproject_id, with_empty = 1, onChange = "document.getElementById('update_button').click();") %]</td>
+      </tr>
+    </tbody>
+  </table>
 
-          <td colspan=4></td>
+</div><!-- /.wrapper -->
 
+[% L.hidden_tag('rowcount', rowcount) %]
 
-        </tr>
-        </table>
-        </td>
+<table class="tbl-list" style="width:90%;">
+  <caption>[% 'Transaction' | $T8 %]</caption>
+  <thead>
+    <tr>
+      <th>[% 'Account' | $T8 %]</th>
+      <th class="right">[% 'Amount' | $T8 %]</th>
+      <th class="right">[% 'Tax' | $T8 %]</th>
+      <th>[% 'Taxkey' | $T8 %]</th>
+      <th>[% 'Project' | $T8 %]</th>
     </tr>
+  </thead>
+  <tbody>
+    [% FOREACH row IN transactions %]
     <tr>
-      <td>
-        <table width=100%>
-        <tr>
-          <th align=left width=1%>[% 'Notes' | $T8 %]</th>
-          <td align=left><textarea name=notes rows="[% rows %]" cols=50 wrap=soft>[% notes | html %]</textarea></td>
-
-          <th align=left width=1%>[% 'Notes for customer' | $T8 %]</th>
-          <td align=left><textarea name=intnotes rows="[% rows %]" cols=50 wrap=soft readonly>[% intnotes | html %]</textarea></td>
-        </tr>
-      </table>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <table width=100%>
-        <tr class=listheading>
-          <th colspan=7 class=listheading>[% 'Incoming Payments' | $T8 %]</th>
-        </tr>
+      <td>[% row.selectAR_amount %]</td>
+      <td class="numeric">[% L.input_tag('amount_' _ loop.count, LxERP.format_amount(row.amount, 2), class='wi-small numeric') %]</td>
+      <td class="numeric">[% L.hidden_tag('tax_' _ loop.count, LxERP.format_tax(row.tax, 2)) %][% LxERP.format_amount(row.tax, 2) | html %]</td>
+      <td>[% row.taxchart %]</td>
+      <td>[% L.select_tag('project_id_' _ loop.count, ALL_PROJECTS, title_key='projectnumber', default=row.project_id, with_empty=1, class="wi-small") %]</td>
+    </tr>
+    [% END %]
+  </tbody>
+  <tfoot>
+    <tr>
+      <td>[% P.chart.picker("AR_chart_id", AR_chart_id, style="width: 400px", type="AR") %]</td>
+      <th class="numeric">[% LxERP.format_amount(invtotal, 2) | html %]</th>
+        <input type="hidden" name="oldinvtotal" value="[% oldinvtotal %]">
+        <input type="hidden" name="oldtotalpaid" value="[% oldtotalpaid %]">
+        <input type="hidden" name="taxaccounts" value="[% taxaccounts | html %]">
+      <td colspan="3"></td>
+    </tr>
+  </tfoot>
+</table>
 
-        <tr>
-         <th>[% 'Date' | $T8 %]</th>
-         <th>[% 'Source' | $T8 %]</th>
-         <th>[% 'Memo' | $T8 %]</th>
-         <th>[% 'Amount' | $T8 %]</th>
-         <th></th>
-[%- IF show_exch %]
-         <th>[% 'Exch' | $T8 %]</th>
-[%- END %]
-         <th>[% 'Account' | $T8 %]</th>
-         <th>[% 'Project Number' | $T8 %]</th>
-        </tr>
 
-[%- FOREACH row IN payments %]
-        <tr>
-         <td align=center>
-  [%- IF row.changeable %]
+<table class="tbl-list" style="width:90%;">
+  <caption>[% 'Incoming Payments' | $T8 %]</caption>
+  <thead>
+    <tr>
+      <th>[% 'Date' | $T8 %]</th>
+      <th>[% 'Source' | $T8 %]</th>
+      <th>[% 'Memo' | $T8 %]</th>
+      <th class="right">[% 'Amount' | $T8 %]</th>
+      <th></th>
+      [% IF show_exch %]
+        <th>[% 'Exch' | $T8 %]</th>
+      [% END %]
+      <th>[% 'Account' | $T8 %]</th>
+      <th>[% 'Project Number' | $T8 %]</th>
+    </tr>
+  </thead>
+  <tbody>
+    [% FOREACH row IN payments %]
+    <tr>
+      <td>
+        [% IF row.changeable %]
           [% L.date_tag('datepaid_' _ loop.count, row.datepaid ? row.datepaid : today) %]
-  [%- ELSE %]
-         [% row.datepaid | html %][% L.hidden_tag('datepaid_' _ loop.count, row.datepaid) %]
-  [%- END %]
-         </td>
-         <td align=center>
-  [%- IF row.changeable %]
-          <input name="source_[% loop.count %]" size=11 value="[% row.source | html %]">
-  [%- ELSE %]
-         [% row.source | html %]<input type=hidden name="source_[% loop.count %]" value="[% row.source | html %]">
-  [%- END %]
-         </td>
-         <td align=center>
-  [%- IF row.changeable %]
-          <input name="memo_[% loop.count %]" size=11 value="[% row.memo | html %]">
-  [%- ELSE %]
-         [% row.memo | html %]<input type=hidden name="memo_[% loop.count %]" value="[% row.memo | html %]">
-  [%- END %]
-         </td>
-         <td align=center>
-  [%- IF row.changeable %]
-          <input name="paid_[% loop.count %]" size=11 data-validate="number" class="numeric" value="[% row.paid ? LxERP.format_amount(row.paid, 2) : '' | html %]">
-  [%- ELSE %]
-         [% row.paid | html %]<input type=hidden name="paid_[% loop.count %]" value="[% row.paid ? LxERP.format_amount(row.paid, 2) : '' | html %]">
-  [%- END %]
-         </td>
-         <td>
-           [% IF row.changeable && loop.last && paid_missing > 0 %]
-             <input type="button" id="ar_set_to_paid_missing" value="[% "Set to paid missing" | $T8 %]">
-           [% END %]
-         </td>
-[%- IF show_exch %]
-         <td align=center>
-    [%- IF row.forex || !row.changeable%]
-          <input type=hidden name="exchangerate_[% loop.count %]" value='[% row.exchangerate | html %]'>[% row.exchangerate | html %]
-    [%- ELSE %]
-          <input name="exchangerate_[% loop.count %]" size=10 value='[% row.exchangerate | html %]'>
-    [%- END %]
-          <input type=hidden name="forex_[% loop.count %]" value='[% row.forex | html %]'>
-         </td>
-[%- END %]
-         <td align=center>
-  [%- IF row.changeable %]
+        [% ELSE %]
+          [% row.datepaid | html %][% L.hidden_tag('datepaid_' _ loop.count, row.datepaid) %]
+        [% END %]
+      </td>
+      <td>
+      [% IF row.changeable %]
+        <input type="text" name="source_[% loop.count %]" size="11" value="[% row.source | html %]">
+      [% ELSE %]
+        [% row.source | html %]<input type="hidden" name="source_[% loop.count %]" value="[% row.source | html %]">
+      [% END %]
+      </td>
+      <td>
+        [% IF row.changeable %]
+          <input type="text" name="memo_[% loop.count %]" size="11" value="[% row.memo | html %]">
+        [% ELSE %]
+          [% row.memo | html %]<input type="hidden" name="memo_[% loop.count %]" value="[% row.memo | html %]">
+        [% END %]
+      </td>
+      <td class="numeric">
+        [% IF row.changeable %]
+          <input name="paid_[% loop.count %]" value="[% row.paid ? LxERP.format_amount(row.paid, 2) : '' | html %]" type="text" data-validate="number" class="numeric">
+        [% ELSE %]
+          [% row.paid | html %]<input type="hidden" name="paid_[% loop.count %]" value="[% row.paid ? LxERP.format_amount(row.paid, 2) : '' | html %]">
+        [% END %]
+      </td>
+      <td>
+        [% IF row.changeable && loop.last && paid_missing > 0 %]
+          <input type="button" id="ar_set_to_paid_missing" value="[% 'Set to paid missing' | $T8 %]">
+        [% END %]
+      </td>
+      [% IF show_exch %]
+        <td>
+          [% IF row.forex || !row.changeable%]
+            <input type="hidden" name="exchangerate_[% loop.count %]" value="[% row.exchangerate | html %]">[% row.exchangerate | html %]
+          [% ELSE %]
+            <input type="text" name="exchangerate_[% loop.count %]" size="10" value="[% row.exchangerate | html %]">
+          [% END %]
+            <input type="hidden" name="forex_[% loop.count %]" value="[% row.forex | html %]">
+        </td>
+      [% END %]
+      <td>
+        [% IF row.changeable %]
           [% row.selectAR_paid %]
-  [%- ELSE %]
-         [% row.AR_paid | html %]<input type=hidden name="AR_paid_[% loop.count %]" value='[% row.AR_paid | html %]'>
-  [%- END %]
-         </td>
-         <td>
-  [%- IF row.changeable %]
-          [% L.select_tag('paid_project_id_' _ loop.count, ALL_PROJECTS, title_key = 'projectnumber', default = row.paid_project_id, with_empty=1) %]
-  [%- ELSE %]
+        [% ELSE %]
+          [% row.AR_paid | html %]<input type="hidden" name="AR_paid_[% loop.count %]" value="[% row.AR_paid | html %]">
+        [% END %]
+      </td>
+      <td>
+        [% IF row.changeable %]
+          [% L.select_tag('paid_project_id_' _ loop.count, ALL_PROJECTS, title_key='projectnumber', default=row.paid_project_id, with_empty=1, class='wi-small') %]
+        [% ELSE %]
           [% project_labels.${row.paid_project_id} | html %]
-          <input type=hidden name="paid_project_id_[% loop.count %]" value='[% row.paid_project_id %]'>
-  [%- END %]
-         </td>
+          <input type="hidden" name="paid_project_id_[% loop.count %]" value="[% row.paid_project_id %]">
+        [% END %]
+        <input type="hidden" name="acc_trans_id_[% loop.count %]" value="[% row.acc_trans_id | html %]">
+        <input type="hidden" name="gldate_[% loop.count %]" value="[% row.gldate | html %]">
+       </td>
+    </tr>
+    [% END %]
+  </tbody>
+  <tfoot>
+    <tr>
+      <td></td>
+      <td></td>
+      <th class="right">[% 'Total' | $T8 %]</th>
+      <td class="numeric">[% LxERP.format_amount(totalpaid, 2) | html %]</td>
+      <td></td>
+      [% IF show_exch %]
+        <td></td>
+      [% END %]
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td></td>
+      <td></td>
+      <th class="right">[% 'Missing amount' | $T8 %]</th>
+      <td class="numeric">
+        [% LxERP.format_amount(paid_missing, 2) | html %]
+        <input type="hidden" name="paidaccounts" value="[% paidaccounts %]">
+      </td>
+      <td></td>
+      [% IF show_exch %]
+        <td></td>
+      [% END %]
+      <td></td>
+      <td></td>
+    </tr>
+  </tfoot>
+</table>
 
-         <input type=hidden name="acc_trans_id_[% loop.count %]" value='[% row.acc_trans_id | html %]'>
-         <input type=hidden name="gldate_[% loop.count %]" value='[% row.gldate | html %]'>
-        </tr>
-[%- END %]
-        <tr>
-          <td></td>
-          <td></td>
-          <td align="center">[% 'Total' | $T8 %]</td>
-          <td align="center">[% LxERP.format_amount(totalpaid, 2) | html %]</td>
-        </tr>
-        <tr>
-          <td></td>
-          <td></td>
-          <td align="center">[% 'Missing amount' | $T8 %]</td>
-          <td align="center">[% LxERP.format_amount(paid_missing, 2) | html %]</td>
-        </tr>
-        <input type=hidden name=paidaccounts value='[% paidaccounts %]'>
 
-      </table>
-    </td>
-  </tr>
-</table>
-</div>
-</div>
+</div><!-- /#ui-tabs-basic-data -->
+</div><!-- ./tabwidget -->
 
-<script type='text/javascript'>
+<script type="text/javascript">
  $('#ar_set_to_paid_missing').click(function(){ $('input[name^="paid_"]:last').val('[% LxERP.format_amount(paid_missing, 2) %]') });
 </script>
diff --git a/templates/webpages/ar/search.html b/templates/webpages/ar/search.html
index 2000b8ca4..0657b1517 100644
--- a/templates/webpages/ar/search.html
+++ b/templates/webpages/ar/search.html
@@ -1,221 +1,253 @@
-[%- USE T8 %]
-[%- USE L %][%- USE P -%]
-[%- SET style="width: 250px" %]
+[% USE T8 %]
+[% USE L %]
+[% USE P %]
+[% SET style="width: 250px" %]
 <h1>[% title %]</h1>
 
- <form method=post name="search" id="form" action=[% script %]>
-  [% L.hidden_tag("action", nextsub) %]
+<form method=post name="search" id="form" action=[% script %]>
+[% L.hidden_tag("action", nextsub) %]
 
-  <table width=100% border="0">
-  <tr>
-   <td>
-    <table>
-     <tr>
-      <th align=right>[% 'Customer' | $T8 %]</th>
-      <td>[% L.input_tag("customer", customer, style=style, class="initial_focus") %]</td>
-     </tr>
-    <tr>
-     <th align="right" nowrap>[% 'Contact Person' | $T8 %]</th>
-     <td>[% L.input_tag("cp_name", '', style=style) %]</td>
-    </tr>
-     <tr>
-      <th align=right nowrap>[% 'Department' | $T8 %]</th>
-      <td>[% L.select_tag('department_id', ALL_DEPARTMENTS, title_key = 'description', with_empty = 1, style=style) %]</td>
-     </tr>
-     <tr>
-      <th align=right nowrap>[% 'Invoice Number' | $T8 %]</th>
-      <td>[% L.input_tag("invnumber", "", style=style) %]</td>
-     </tr>
-     <tr>
-      <th align=right nowrap>[% 'Order Number' | $T8 %]</th>
-      <td>[% L.input_tag("ordnumber", "", style=style) %]</td>
-     </tr>
-     <tr>
-      <th align="right" nowrap>[% 'Customer Order Number' | $T8 %]</th>
-      <td>[% L.input_tag("cusordnumber", "", style=style) %]</td>
-     </tr>
-     <tr>
-      <th align="right">[% 'Employee' | $T8 %]</th>
-      <td>[% L.select_tag('employee_id', ALL_EMPLOYEES, title_key = 'safe_name', with_empty = 1, style=style) %]</td>
-     </tr>
-    <tr>
-     <th align="right">[% 'Salesman' | $T8 %]</th>
-     <td>[% L.select_tag('salesman_id', ALL_EMPLOYEES, title_key = 'safe_name', with_empty = 1, style=style) %]</td>
-     </tr>
-     <tr>
-      <th align=right nowrap>[% 'Transaction description' | $T8 %]</th>
-      <td>[% L.input_tag("transaction_description", "", style=style) %]</td>
-      <th align="right">[% 'Part Description' | $T8 %]</th>
-      <td>[% L.input_tag("parts_description", "", style=style) %]</td>
-     </tr>
-     <tr>
-      <th align=right nowrap>[% 'Notes' | $T8 %]</th>
-      <td>[% L.input_tag("notes", "", style=style) %]</td>
-      <th align="right">[% 'Part Number' | $T8 %]</th>
-      <td>[% L.input_tag("parts_partnumber", "", style=style) %]</td>
-     </tr>
-     <tr>
-      <th align="right">[% 'Project Number' | $T8 %]</th>
-      <td>[% P.project.picker("project_id", project_id, style=style) %]</td>
-     </tr>
-    [% IF ALL_BUSINESS_TYPES.as_list.size > 0 %]
-     <tr>
-      <th align="right" nowrap>[% 'Customer type' | $T8 %]</th>
-      <td>[% L.select_tag("business_id", ALL_BUSINESS_TYPES, with_empty=1, title_key="description", style=style) %]</td>
-     </tr>
-    [% END %]
-     <tr>
-      <th>[% 'Show only marked as paid invoices' | $T8 %]</th>
-      <td>[% L.checkbox_tag('show_marked_as_closed') %]</td>
-     </tr>
+<div class="wrapper">
+
+  <div class="col">
+    <table class="tbl-horizontal">
+      <caption>[% 'Customer' | $T8 %]</caption>
+      <tbody>
+        <tr>
+          <th>[% 'Customer' | $T8 %]</th>
+          <td>[% L.input_tag("customer", customer, style=style, class="initial_focus") %]</td>
+        </tr>
+        <tr>
+          <th>[% 'Contact Person' | $T8 %]</th>
+          <td>[% L.input_tag("cp_name", '', style=style) %]</td>
+        </tr>
+        <tr>
+          <th>[% 'Department' | $T8 %]</th>
+          <td>[% L.select_tag('department_id', ALL_DEPARTMENTS, title_key = 'description', with_empty = 1, style=style) %]</td>
+        </tr>
+        <tr>
+          <th class="caption" colspan="2">[% 'Employee' | $T8 %]</th>
+        </tr>
+        <tr>
+          <th>[% 'Employee' | $T8 %]</th>
+          <td>[% L.select_tag('employee_id', ALL_EMPLOYEES, title_key = 'safe_name', with_empty = 1, style=style) %]</td>
+        </tr>
+        <tr>
+          <th>[% 'Salesman' | $T8 %]</th>
+          <td>[% L.select_tag('salesman_id', ALL_EMPLOYEES, title_key = 'safe_name', with_empty = 1, style=style) %]</td>
+        </tr>
+        <tr>
+          <th class="caption" colspan="2">[% 'Order' | $T8 %]</th>
+        </tr>
+        <tr>
+          <th>[% 'Transaction description' | $T8 %]</th>
+          <td>[% L.input_tag("transaction_description", "", style=style) %]</td>
+        </tr>
+        <tr>
+          <th>[% 'Notes' | $T8 %]</th>
+          <td>[% L.input_tag("notes", "", style=style) %]</td>
+        </tr>
+        <tr>
+          <th>[% 'Part Description' | $T8 %]</th>
+          <td>[% L.input_tag("parts_description", "", style=style) %]</td>
+        </tr>
+        <tr>
+          <th>[% 'Part Number' | $T8 %]</th>
+          <td>[% L.input_tag("parts_partnumber", "", style=style) %]</td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!-- /.col -->
+
+  <div class="col">
+    <table class="tbl-horizontal">
+      <caption>[% 'Record numbers and dates' | $T8 %]</caption>
+      <tbody>
+        <tr>
+          <th>[% 'Invoice Number' | $T8 %]</th>
+          <td>[% L.input_tag("invnumber", "", style=style) %]</td>
+        </tr>
+        <tr>
+          <th>[% 'Order Number' | $T8 %]</th>
+          <td>[% L.input_tag("ordnumber", "", style=style) %]</td>
+        </tr>
+        <tr>
+          <th>[% 'Customer Order Number' | $T8 %]</th>
+          <td>[% L.input_tag("cusordnumber", "", style=style) %]</td>
+        </tr>
+        <tr>
+          <th>[% 'Project Number' | $T8 %]</th>
+          <td>[% P.project_picker("project_id", project_id, style=style) %]</td>
+        </tr>
+        [% IF ALL_BUSINESS_TYPES.as_list.size > 0 %]
+          <tr>
+            <th>[% 'Customer type' | $T8 %]</th>
+            <td>[% L.select_tag("business_id", ALL_BUSINESS_TYPES, with_empty=1, title_key="description", style=style) %]</td>
+          </tr>
+        [% END %]
+        <tr>
+          <th>[% 'Show only marked as paid invoices' | $T8 %]</th>
+          <td>[% L.checkbox_tag('show_marked_as_closed') %]</td>
+        </tr>
     [% IF INSTANCE_CONF.get_email_journal %]
      <tr>
       <th>[% 'Show only not mailed invoices' | $T8 %]</th>
       <td>[% L.checkbox_tag('show_not_mailed') %]</td>
      </tr>
     [% END %]
-     <tr>
-      <th align=right nowrap>[% 'Invoice Date' | $T8 %]</th>
-      <td>
-       [% L.date_tag('transdatefrom') %]
-       [% 'Bis' | $T8 %]
-       [% L.date_tag('transdateto') %]
-     </td>
-    </tr>
-     <tr>
-      <th align=right nowrap>[% 'Due Date' | $T8 %]</th>
-      <td>
-       [% L.date_tag('duedatefrom') %]
-       [% 'Bis' | $T8 %]
-       [% L.date_tag('duedateto') %]
-     </td>
-    </tr>
-
-[%- IF CT_CUSTOM_VARIABLES.size %]
-    <tr>
-      <td></td>
-      <td colspan=4 align=left><b>[% 'Custom variables for module' | $T8 %]: [%'Customers and vendors' | $T8 %]</td>
-    </tr>
-    [% CT_CUSTOM_VARIABLES_FILTER_CODE %]
-[%- END %]
-
-   <input type=hidden name=sort value=transdate>
-   </table>
-    </td>
-    </tr>
-    <tr>
-     <td>
-      <table>
-       <tr>
-        <th align=right nowrap>[% 'Include in Report' | $T8 %]</th>
-        <td>
-         <table width=100%>
+        <tr>
+          <th>[% 'Invoice Date' | $T8 %]</th>
+          <td> [% L.date_tag('transdatefrom') %] [% 'Bis' | $T8 %] [% L.date_tag('transdateto') %] </td>
+        </tr>
+        <tr>
+          <th>[% 'Due Date' | $T8 %]</th>
+          <td> [% L.date_tag('duedatefrom') %] [% 'Bis' | $T8 %] [% L.date_tag('duedateto') %] </td>
+        </tr>
+        [% IF CT_CUSTOM_VARIABLES.size %]
           <tr>
-           <td align=right><input name=open id=open class=checkbox type=checkbox value=Y checked></td>
-           <td nowrap>[% 'Open' | $T8 %]</td>
-           <td align=right><input name=closed id=closed class=checkbox type=checkbox value=Y [% IF closed %] checked[% END %]></td>
-           <td nowrap>[% 'Closed' | $T8 %]</td>
+            <th class="caption" colspan="2">[% 'Custom variables for module' | $T8 %]: [%'Customers and vendors' | $T8 %]</th>
           </tr>
-          <tr>
-           <td align=right><input name="l_id" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'ID' | $T8 %]</td>
-           <td align=right><input name="l_invnumber" id="l_invnumber" class=checkbox type=checkbox value=Y checked></td>
-           <td nowrap>[% 'Invoice Number' | $T8 %]</td>
-           <td align=right><input name="l_ordnumber" id="l_ordnumber" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Order Number' | $T8 %]</td>
-           <td align=right><input name="l_cusordnumber" id="l_cusordnumber" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Customer Order Number' | $T8 %]</td>
-          </tr>
-          <tr>
-           <td align=right><input name="l_transdate" id="l_transdate" class=checkbox type=checkbox value=Y checked></td>
-           <td nowrap>[% 'Invoice Date' | $T8 %]</td>
-           <td align=right><input name="l_name" id="l_name" class=checkbox type=checkbox value=Y checked></td>
-           <td nowrap>[% 'Customer' | $T8 %]</td>
-           <td align=right><input name="l_customernumber" id="l_customernumber" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Customer Number' | $T8 %]</td>
-           <td align=right><input name="l_department" id="l_department" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Department' | $T8 %]</td>
+          [% CT_CUSTOM_VARIABLES_FILTER_CODE %]
+        [% END %]
+      </tbody>
+    </table>
+    <input type=hidden name=sort value=transdate>
+  </div><!-- /.col -->
 
-          </tr>
-          <tr>
-           <td align=right><input name="l_netamount" id="l_netamount" class=checkbox type=checkbox value="Y" checked></td>
-           <td nowrap>[% 'Amount' | $T8 %]</td>
-           <td align=right><input name="l_tax" id="l_tax" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Tax' | $T8 %]</td>
-           <td align=right><input name="l_amount" id="l_amount" class=checkbox type=checkbox value="Y" checked></td>
-           <td nowrap>[% 'Total' | $T8 %]</td>
-          </tr>
-          <tr>
-           <td align=right><input name="l_datepaid" id="l_datepaid" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Date Paid' | $T8 %]</td>
-           <td align=right><input name="l_paid" id="l_paid" class=checkbox type=checkbox value=Y checked></td>
-           <td nowrap>[% 'Paid' | $T8 %]</td>
-           <td align=right><input name="l_duedate" id="l_duedate" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Due Date' | $T8 %]</td>
-           <td align=right><input name="l_due" id="l_due" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Amount Due' | $T8 %]</td>
-          </tr>
-          <tr>
-           <td align=right><input name="l_notes" id="l_notes" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Notes' | $T8 %]</td>
-           <td align=right><input name="l_salesman" id="l_salesman" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Salesperson' | $T8 %]</td>
-           <td align=right><input name="l_shippingpoint" id="l_shippingpoint" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Shipping Point' | $T8 %]</td>
-           <td align=right><input name="l_shipvia" id="l_shipvia" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Ship via' | $T8 %]</td>
-          </tr>
-          <tr>
-           <td align=right><input name="l_marge_total" id="l_marge_total" class=checkbox type=checkbox value=Y></td>
-           <td nowrap> [% 'Ertrag' | $T8 %]</td>
-           <td align=right><input name="l_marge_percent" id="l_marge_percent" class=checkbox type=checkbox value=Y></td>
-           <td nowrap> [% 'Ertrag prozentual' | $T8 %]</td>
-           <td align=right><input name="l_employee" id="l_employee" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Employee' | $T8 %]</td>
-          </tr>
-          <tr>
-           <td align=right><input name="l_subtotal" id="l_subtotal" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Subtotal' | $T8 %]</td>
-           <td align=right><input name="l_globalprojectnumber" id="l_globalprojectnumber" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Document Project Number' | $T8 %]</td>
-           <td align=right><input name="l_transaction_description" id="l_transaction_description" class=checkbox type=checkbox value=Y[% IF INSTANCE_CONF.get_require_transaction_description_ps %] checked[% END %]></td>
-           <td nowrap>[% 'Transaction description' | $T8 %]</td>
-           <td align=right><input name="l_dunning_description" id="l_dunning_description" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Dunning level' | $T8 %]</td>
-          </tr>
-          <tr>
-           <td align=right><input name="l_taxzone" id="l_taxzone" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Steuersatz' | $T8 %]</td>
-           <td align=right><input name="l_payment_terms" id="l_payment_terms" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Payment Terms' | $T8 %]</td>
-           <td align=right><input name="l_charts" id="l_charts" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Chart' | $T8 %]</td>
-           <td align=right><input name="l_direct_debit" id="l_direct_debit" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'direct debit' | $T8 %]</td>
-          </tr>
-          <tr>
-           <td colspan=4 align=left><b>[% 'Customer' | $T8 %] </td>
-          </tr>
-          <tr>
-           <td align=right><input name="l_customernumber" id="l_customernumber" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Customer Number' | $T8 %]</td>
-           <td align=right><input name="l_country" id="l_country" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'Country' | $T8 %]</td>
-           <td align=right><input name="l_ustid" id="l_ustid" class=checkbox type=checkbox value=Y></td>
-           <td nowrap>[% 'USt-IdNr.' | $T8 %]</td>
-          </tr>
+</div><!-- /.wrapper -->
 
-          <table>
-            <tr><td align="right">
-            [% CT_CUSTOM_VARIABLES_INCLUSION_CODE %]
-            </td></tr>
-          </table>
+<div class="wrapper form-addition control-panel">
+  <h3>[% 'Include in Report' | $T8 %]</h3>
+  <div class="list col">
+    <h4>[% 'Status' | $T8 %]</h4>
+    <div>
+      <input name="open" id="open" type="checkbox" checked><label for="open">[% 'Open' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="closed" id="closed" type="checkbox" [% IF closed %] checked[% END %]><label for="closed">[% 'Closed' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_paid" id="l_paid" type="checkbox" checked><label for="l_paid">[% 'Paid' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_dunning_description" id="l_dunning_description" type="checkbox"><label for="l_dunning_description">[% 'Dunning level' | $T8 %]</label>
+    </div>
+  </div>
+  <div class="list col">
+    <h4>[% 'Numbers' | $T8 %]</h4>
+    <div>
+      <input name="l_id" id="l_id" type="checkbox"><label for="l_id">[% 'ID' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_invnumber" id="l_invnumber" type="checkbox" checked><label for="l_invnumber">[% 'Invoice Number' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_ordnumber" id="l_ordnumber" type="checkbox"><label for="l_ordnumber">[% 'Order Number' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_globalprojectnumber" id="l_globalprojectnumber" type="checkbox"><label for="l_globalprojectnumber">[% 'Document Project Number' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_cusordnumber" id="l_cusordnumber" type="checkbox"><label for="l_cusordnumber">[% 'Customer Order Number' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_ustid" id="l_ustid" type="checkbox"><label for="l_ustid">[% 'USt-IdNr.' | $T8 %]</label>
+    </div>
+  </div>
+  <div class="list col">
+    <h4>[% 'Date' | $T8 %]</h4>
+    <div>
+      <input name="l_transdate" id="l_transdate" type="checkbox" checked><label for="l_transdate">[% 'Invoice Date' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_datepaid" id="l_datepaid" type="checkbox"><label for="l_datepaid">[% 'Date Paid' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_duedate" id="l_duedate" type="checkbox"><label for="l_duedate">[% 'Due Date' | $T8 %]</label>
+    </div>
+  </div>
+  <div class="list col">
+    <h4>[% 'Customer' | $T8 %]</h4>
+    <div>
+      <input name="l_name" id="l_name" type="checkbox" checked><label for="l_name">[% 'Customer' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_customernumber" id="l_customernumber" type="checkbox"><label for="l_customernumber">[% 'Customer Number' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_department" id="l_department" type="checkbox"><label for="l_department">[% 'Department' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_country" id="l_country" type="checkbox"><label for="l_country">[% 'Country' | $T8 %]</label>
+    </div>
+  </div>
+  <div class="list col">
+    <h4>[% 'Amounts' | $T8 %]</h4>
+    <div>
+      <input name="l_netamount" id="l_netamount" type="checkbox" value="Y" checked><label for="l_netamount">[% 'Amount' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_amount" id="l_amount" type="checkbox" value="Y" checked><label for="l_amount">[% 'Total' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_subtotal" id="l_subtotal" type="checkbox"><label for="l_subtotal">[% 'Subtotal' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_due" id="l_due" type="checkbox"><label for="l_due">[% 'Amount Due' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_marge_total" id="l_marge_total" type="checkbox"><label for="l_marge_total">[% 'Ertrag' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_marge_percent" id="l_marge_percent" type="checkbox"><label for="l_marge_percent">[% 'Ertrag prozentual' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_tax" id="l_tax" type="checkbox"><label for="l_tax">[% 'Tax' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_taxzone" id="l_taxzone" type="checkbox"><label for="l_taxzone">[% 'Steuersatz' | $T8 %]</label>
+    </div>
+  </div>
+  <div class="list col">
+    <h4>[% 'Order' | $T8 %]</h4>
+    <div>
+      <input name="l_notes" id="l_notes" type="checkbox"><label for="l_notes">[% 'Notes' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_shippingpoint" id="l_shippingpoint" type="checkbox"><label for="l_shippingpoint">[% 'Shipping Point' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_shipvia" id="l_shipvia" type="checkbox"><label for="l_shipvia">[% 'Ship via' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_transaction_description" id="l_transaction_description" type="checkbox" [% IF INSTANCE_CONF.get_require_transaction_description_ps %] checked[% END %]><label for="l_transaction_description">[% 'Transaction description' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_payment_terms" id="l_payment_terms" type="checkbox"><label for="l_payment_terms">[% 'Payment Terms' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_charts" id="l_charts" type="checkbox"><label for="l_charts">[% 'Chart' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_direct_debit" id="l_direct_debit" type="checkbox"><label for="l_direct_debit">[% 'direct debit' | $T8 %]</label>
+    </div>
+  </div>
+  <div class="list col">
+    <h4>[% 'Employee' | $T8 %]</h4>
+    <div>
+      <input name="l_salesman" id="l_salesman" type="checkbox"><label for="l_salesman">[% 'Salesperson' | $T8 %]</label>
+    </div>
+    <div>
+      <input name="l_employee" id="l_employee" type="checkbox"><label for="l_employee">[% 'Employee' | $T8 %]</label>
+    </div>
+  </div>
+  <div class="list col">
+    <h4>[% 'Custom Variables' | $T8 %]</h4>
+    <div class="no-rows">
+      [% CT_CUSTOM_VARIABLES_INCLUSION_CODE %]
+    </div>
+  </div>
+</div>
+<!-- /.wrapper.form-addition -->
 
-         </table>
-        </td>
-       </tr>
-      </table>
-     </td>
-    </tr>
-   </table>
-  </form>
+</form>
