commit 5c40e64ab94ee958f4bd337d78f48f1359725880
Author: Hans Peter Schlaepfer <hanspeter.schlaepfer@revamp-it.ch>
Date:   Fri Jan 4 05:53:23 2019 +0100

    Neues kivitendo Design Aenderungen in templates/webpages/common/..

diff --git a/templates/webpages/common/_print_dialog.html b/templates/webpages/common/_print_dialog.html
index ffad49023..cee998e30 100644
--- a/templates/webpages/common/_print_dialog.html
+++ b/templates/webpages/common/_print_dialog.html
@@ -1,7 +1,9 @@
-[%- USE LxERP -%][%- USE L -%]
+[% USE LxERP %]
+[% USE L %]
+
 <div id="print_dialog_print_options"></div>
 
-<p>
+<div class="buttons">
  [% L.button_tag("kivi.SalesPurchase.print_record()", LxERP.t8("Print"), id="print_dialog_print_button") %]
- [% L.button_tag("\$('#print_dialog').dialog('close');", LxERP.t8("Abort"), id="print_dialog_abort_button") %]
-</p>
+ [% L.button_tag("\$('#print_dialog').dialog('close');", LxERP.t8("Abort"), id="print_dialog_abort_button", class="neutral") %]
+</div>
diff --git a/templates/webpages/common/_send_email_dialog.html b/templates/webpages/common/_send_email_dialog.html
index 7b5e8bdba..8b0043106 100644
--- a/templates/webpages/common/_send_email_dialog.html
+++ b/templates/webpages/common/_send_email_dialog.html
@@ -1,104 +1,79 @@
-[%- USE HTML %][%- USE LxERP -%][%- USE L -%][%- USE P -%]
-[%- SET have_files = 0 %]
+[% USE HTML %]
+[% USE LxERP %]
+[% USE L %]
+[% USE P %]
+[% SET have_files = 0 %]
 
 [% BLOCK attach_file_list %]
   [% IF files.as_list.size %]
-   [% SET have_files = 1 ;
-      FOREACH file = files.as_list %]
-    <tr>
-     <th align="right" nowrap>
-      [% IF loop.first %]
-       [% label %]
+    <table class="tbl-horizontal">
+      <tbody>
+      [% SET have_files = 1 ;
+        FOREACH file = files.as_list %]
+        <tr>
+         <th>[% IF loop.first %][% label %][% END %]</th>
+         <td>[% P.checkbox_tag("email_form.attach_file_ids[]", label=file.db_file.file_name, value=file.db_file.id, checked="1") %]</td>
+        </tr>
       [% END %]
-     </th>
-     <td>
-      [% P.checkbox_tag("email_form.attach_file_ids[]", label=file.db_file.file_name, value=file.db_file.id, checked="1") %]
-     </td>
-    </tr>
-   [% END %]
+      </tbody>
+    </table>
   [% END %]
 [% END %]
 
-<table>
- <tbody>
-  <tr>
-   <th align="right" nowrap>
-    [% LxERP.t8("Recipients") %]
-   </th>
-   <td>
-    [% L.input_tag("email_form.to", email_form.to, size="80") %]
-    <span class="interactive cursor-pointer"        onclick="$('[data-toggle-recipients=1]').toggle()" data-toggle-recipients="1">[+]</span>
-    <span class="interactive cursor-pointer hidden" onclick="$('[data-toggle-recipients=1]').toggle()" data-toggle-recipients="1">[-]</span>
-   </td>
-  </tr>
-
-  <tr class="hidden" data-toggle-recipients="1">
-   <th align="right" nowrap>[% LxERP.t8("Cc") %]</th>
-   <td>[% L.input_tag("email_form.cc", email_form.cc, size="80") %]</td>
-  </tr>
-
- [%- IF show_bcc %]
-  <tr class="hidden" data-toggle-recipients="1">
-   <th align="right" nowrap>[% LxERP.t8("Bcc") %]</th>
-   <td>[% L.input_tag("email_form.bcc", email_form.bcc, size="80") %]</td>
-  </tr>
- [%- END %]
 
-  <tr>
-   <th align="right" nowrap>[% LxERP.t8("Subject") %]</th>
-   <td>[% L.input_tag("email_form.subject", email_form.subject, size="80") %]</td>
-  </tr>
-
-  <tr valign="top">
-   <th align="right" nowrap>[% LxERP.t8("Message") %]
-    <sup> [% L.link("generictranslations.pl?action=edit_email_strings", "1)", title=LxERP.t8('Tired of copying always nice phrases for this message? Click here to use the new preset message option!'), target="_blank") %]</sup>
-  </th>
-   <td>[% L.textarea_tag("email_form.message", email_form.message, rows="15" cols="80" wrap="soft") %]</td>
-  </tr>
-
-[% IF INSTANCE_CONF.get_doc_storage %]
-  <tr>
-   <th align="right" nowrap>[% LxERP.t8("Send printout of record") %]</th>
-   <td>
-    [% SET no_file_label = have_files ? LxERP.t8("Don't include a printout of the record with the email, only selected files") : LxERP.t8("Don't include a printout of the record with the email") ;
-           options       = [
-             [ "normal",   LxERP.t8("Create and send a new printout for this record") ],
-             [ "old_file", LxERP.t8("Send the last printout created for this record") ],
-             [ "no_file",  no_file_label ],
-           ] ;
-       L.select_tag("email_form.attachment_policy", options, onchange="kivi.SalesPurchase.activate_send_email_actions_regarding_printout()") %]
-   </td>
-  </tr>
-[% END %]
-
-  <tr>
-   <th align="right" nowrap>
-[% IF !INSTANCE_CONF.get_doc_storage %]
-    [% LxERP.t8("Attachment name") %]
-[% END %]
-   </th>
-   <td>[% L.input_tag("email_form.attachment_filename", email_form.attachment_filename, size="80") %]</td>
-  </tr>
-
-[% IF INSTANCE_CONF.get_doc_storage %]
-  [% PROCESS attach_file_list
-             files = FILES.files
-             label = LxERP.t8("Record's files") %]
-
-  [% PROCESS attach_file_list
-             files = FILES.vc_files
-             label = is_customer ? LxERP.t8("Files from customer") : LxERP.t8("Files from vendor") %]
-
-  [% PROCESS attach_file_list
-             files = FILES.part_files
-             label = LxERP.t8("Files from parts") %]
-[% END %]
- </tbody>
+<table class="tbl-horizontal">
+  <tbody>
+    <tr>
+      <th>
+        [% LxERP.t8("Recipients") %]
+        <span class="interactive cursor-pointer" onclick="$('[data-toggle-recipients=1]').toggle()" data-toggle-recipients="1">[+]</span>
+        <span class="interactive cursor-pointer hidden" onclick="$('[data-toggle-recipients=1]').toggle()" data-toggle-recipients="1">[-]</span>
+      </th>
+      <td>
+        [% L.input_tag("email_form.to", email_form.to, class="wi-wide", size="50") %]
+      </td>
+    </tr>
+    <tr class="hidden" data-toggle-recipients="1">
+      <th>[% LxERP.t8("Cc") %]</th>
+      <td>[% L.input_tag("email_form.cc", email_form.cc, class="wi-wide", size="50") %]</td>
+    </tr>
+    [% IF show_bcc %]
+      <tr class="hidden" data-toggle-recipients="1">
+      <th>[% LxERP.t8("Bcc") %]</th>
+      <td>[% L.input_tag("email_form.bcc", email_form.bcc, class="wi-wide", size="50") %]</td>
+    </tr>
+    [% END %]
+    <tr>
+      <th>[% LxERP.t8("Subject") %]</th>
+      <td>[% L.input_tag("email_form.subject", email_form.subject, class="wi-wide", size="50") %]</td>
+    </tr>
+    <tr>
+      <th>[% LxERP.t8("Message") %] <sup> [% L.link("generictranslations.pl?action=edit_email_strings", "1)", title=LxERP.t8('Tired of copying always nice phrases for this message? Click here to use the new preset message option!'), target="_blank") %]</sup> </th>
+      <td>[% L.textarea_tag("email_form.message", email_form.message, rows="12" cols="50" wrap="soft", class="wi-wide") %]</td>
+    </tr>
+    [% IF INSTANCE_CONF.get_doc_storage %]
+      <tr>
+      <th>[% LxERP.t8("Send printout of record") %]</th>
+      <td>
+        [% SET no_file_label = have_files ? LxERP.t8("Don't include a printout of the record with the email, only selected files") : LxERP.t8("Don't include a printout of the record with the email") ; options = [ [ "normal", LxERP.t8("Create and send a new printout for this record") ], [ "old_file", LxERP.t8("Send the last printout created for this record") ], [ "no_file", no_file_label ], ] ; L.select_tag("email_form.attachment_policy", options, onchange="kivi.SalesPurchase.activate_send_email_actions_regarding_printout()",class="wi-wide",size="50") %] </td>
+    </tr>
+    [% END %]
+    <tr>
+      <th>[% IF !INSTANCE_CONF.get_doc_storage %] [% LxERP.t8("Attachment name") %] [% END %] </th>
+      <td>[% L.input_tag("email_form.attachment_filename", email_form.attachment_filename, size="50") %]</td>
+    </tr>
+    [% IF INSTANCE_CONF.get_doc_storage %]
+      [% PROCESS attach_file_list files = FILES.files label = LxERP.t8("Record's files") %]
+      [% PROCESS attach_file_list files = FILES.vc_files label = is_customer ? LxERP.t8("Files from customer") : LxERP.t8("Files from vendor") %]
+      [% PROCESS attach_file_list files = FILES.part_files label = LxERP.t8("Files from parts") %]
+    [% END %]
+  </tbody>
 </table>
 
+
 <div id="email_form_print_options"></div>
 
-<p>
- [% L.button_tag(email_form.js_send_function, LxERP.t8("Send email")) %]
- [% L.button_tag("\$('#send_email_dialog').dialog('close');", LxERP.t8("Abort")) %]
-</p>
+<div class="buttons">
+  [% L.button_tag(email_form.js_send_function, LxERP.t8("Send email")) %]
+  [% L.button_tag("\$('#send_email_dialog').dialog('close');", LxERP.t8("Abort"), class="button neutral") %]
+</div>
diff --git a/templates/webpages/common/_ship_to_dialog.html b/templates/webpages/common/_ship_to_dialog.html
index c49aef743..fb377f895 100644
--- a/templates/webpages/common/_ship_to_dialog.html
+++ b/templates/webpages/common/_ship_to_dialog.html
@@ -1,4 +1,7 @@
-[% USE HTML %][% USE L %][% USE LxERP %][%- USE JavaScript -%]
+[% USE HTML %]
+[% USE L %]
+[% USE LxERP %]
+[% USE JavaScript %]
 
 <script type="text/javascript">
   $(function() {
@@ -44,109 +47,116 @@
 </script>
 
 [% select_options = [ [ 0, LxERP.t8("Billing Address") ] ] ;
-   FOREACH shipto = vc_obj.shipto ;
-     tmpcity  = shipto.shiptozipcode _ ' ' _ shipto.shiptocity ;
-     tmptitle = [ shipto.shiptoname, shipto.shiptostreet, tmpcity ] ;
-     CALL select_options.import([ [ loop.count, tmptitle.grep('\S').join("; ") ] ]) ;
-   END ;
-   '' %]
+    FOREACH shipto = vc_obj.shipto ;
+      tmpcity  = shipto.shiptozipcode _ ' ' _ shipto.shiptocity ;
+      tmptitle = [ shipto.shiptoname, shipto.shiptostreet, tmpcity ] ;
+      CALL select_options.import([ [ loop.count, tmptitle.grep('\S').join("; ") ] ]) ;
+    END ;
+   ''
+%]
+<form action="#" name="fake-shipto-dialog" id="fake-shipto-dialog">
 
-<p>
- [% LxERP.t8("Copy address from master data") %]:
- [% L.select_tag("", select_options, id="shipto_to_copy", style="width: 300px") %]
- [% L.button_tag("kivi.SalesPurchase.copy_shipto_address()", LxERP.t8("Copy")) %]
-</p>
+<div class="select-item control-panel">
+  [% LxERP.t8("Copy address from master data") %]:
+  [% L.select_tag("", select_options, id="shipto_to_copy", class="wi-normal") %]
+  [% L.button_tag("kivi.SalesPurchase.copy_shipto_address()", LxERP.t8("Copy"), type="button", class="button neutral") %]
+</div>
 
-<table>
- <tr class="listheading">
-  <th></th>
-  <th>[% LxERP.t8('Billing Address') %]</th>
-  <th>[% LxERP.t8('Shipping Address') %]</th>
- </tr>
- <tr height="5"></tr>
- <tr>
-  <th align="right" nowrap>[%- IF vc == "customer" %][%- LxERP.t8('Customer Number') %][%- ELSE %][%- LxERP.t8('Vendor Number') %][%- END %]</th>
-  <td>[%- IF vc == "customer" %][%- HTML.escape(vc_obj.customernumber) %][%- ELSE %][%- HTML.escape(vc_obj.vendornumber) %][%- END %]</td>
- </tr>
- <tr>
-  <th align="right" nowrap>[% LxERP.t8('Company Name') %]</th>
-  <td>[% HTML.escape(vc_obj.name) %]</td>
-  <td>[% L.input_tag("shiptoname", shiptoname, "size", "35") %]</td>
- </tr>
- <tr>
-  <th align="right" nowrap>[% LxERP.t8('Department') %]</th>
-  <td>[% HTML.escape(vc_obj.department_1) %]</td>
-  <td>[% L.input_tag("shiptodepartment_1", shiptodepartment_1, "size", "35") %]</td>
- </tr>
- <tr>
-  <th align="right" nowrap>&nbsp;</th>
-  <td>[% HTML.escape(vc_obj.department_2) %]</td>
-  <td>[% L.input_tag("shiptodepartment_2", shiptodepartment_2, "size", "35") %]</td>
- </tr>
- <tr>
-  <th align="right" nowrap>[% LxERP.t8('Street') %]</th>
-  <td>[% HTML.escape(vc_obj.street) %]</td>
-  <td>[% L.input_tag("shiptostreet", shiptostreet, "size", "35") %]</td>
- </tr>
- <tr>
-  <th align="right" nowrap>[% LxERP.t8('Zipcode') %]</th>
-  <td>[% HTML.escape(vc_obj.zipcode) %]</td>
-  <td>[% L.input_tag("shiptozipcode", shiptozipcode, "size", "35") %]</td>
- </tr>
- <tr>
-  <th align="right" nowrap>[% LxERP.t8('City') %]</th>
-  <td>[% HTML.escape(vc_obj.city) %]</td>
-  <td>[% L.input_tag("shiptocity", shiptocity, "size", "35") %]</td>
- </tr>
- <tr>
-  <th align="right" nowrap>[% LxERP.t8('Country') %]</th>
-  <td>[% HTML.escape(vc_obj.country) %]</td>
-  <td>[% L.input_tag("shiptocountry", shiptocountry, "size", "35") %]</td>
- </tr>
- <tr>
-  <th align="right" nowrap>[% LxERP.t8('GLN') %]</th>
-  <td>[% HTML.escape(vc_obj.gln) %]</td>
-  <td>[% L.input_tag("shiptogln", shiptogln, "size", "35") %]</td>
- </tr>
- <tr>
-  <th align="right" nowrap>[% LxERP.t8('Contact') %]</th>
-  <td>[% HTML.escape(vc_obj.contact) %]</td>
-  <td>[% L.input_tag("shiptocontact", shiptocontact, "size", "35") %]</td>
- </tr>
- <tr>
-  <th align="right" nowrap>[% LxERP.t8('Gender') %]</th>
-  <td></td>
-  <td>
-   [% L.select_tag('shiptocp_gender', [ [ 'm', LxERP.t8('male') ], [ 'f', LxERP.t8('female') ] ], 'default' = shiptocp_gender) %]
-  </td>
- </tr>
- <tr>
-  <th align="right" nowrap>[% LxERP.t8('Phone') %]</th>
-  <td>[% HTML.escape(vc_obj.phone) %]</td>
-  <td>[% L.input_tag("shiptophone", shiptophone, "size", "35") %]</td>
- </tr>
- <tr>
-  <th align="right" nowrap>[% LxERP.t8('Fax') %]</th>
-  <td>[% HTML.escape(vc_obj.fax) %]</td>
-  <td>[% L.input_tag("shiptofax", shiptofax, "size", "35") %]</td>
- </tr>
- <tr>
-  <th align="right" nowrap>[% LxERP.t8('E-mail') %]</th>
-  <td>[% HTML.escape(vc_obj.email) %]</td>
-  <td>[% L.input_tag("shiptoemail", shiptoemail, "size", "35") %]</td>
- </tr>
-[% FOREACH var = cvars %]
- <tr valign="top">
-  <th align="right" nowrap>[% HTML.escape(var.config.description) %]</th>
-  <td></td>
-  <td>[% INCLUDE 'common/render_cvar_input.html' cvar_name_prefix='shiptocvar_' %]</td>
- </tr>
-[% END %]
+<table class="tbl-horizontal checkered wi-moderate">
+  <thead>
+    <tr>
+      <td></td>
+      <th>[% LxERP.t8('Billing Address') %]</th>
+      <th>[% LxERP.t8('Shipping Address') %]</th>
+    </tr>
+  </thead>
+   <tbody>
+   <tr>
+    <th>[% IF vc == "customer" %][% LxERP.t8('Customer Number') %][% ELSE %][% LxERP.t8('Vendor Number') %][% END %]</th>
+    <td>[% IF vc == "customer" %][% HTML.escape(vc_obj.customernumber) %][% ELSE %][% HTML.escape(vc_obj.vendornumber) %][% END %]</td>
+    <td></td>
+   </tr>
+   <tr>
+    <th>[% LxERP.t8('Company Name') %]</th>
+    <td>[% HTML.escape(vc_obj.name) %]</td>
+    <td>[% L.input_tag("shiptoname", shiptoname, "size", "35", class="wi-normal") %]</td>
+   </tr>
+   <tr>
+    <th>[% LxERP.t8('Department') %]</th>
+    <td>[% HTML.escape(vc_obj.department_1) %]</td>
+    <td>[% L.input_tag("shiptodepartment_1", shiptodepartment_1, "size", "35") %]</td>
+   </tr>
+   <tr>
+    <th>[% LxERP.t8('Department') %] 2</th>
+    <td>[% HTML.escape(vc_obj.department_2) %]</td>
+    <td>[% L.input_tag("shiptodepartment_2", shiptodepartment_2, "size", "35") %]</td>
+   </tr>
+   <tr>
+    <th>[% LxERP.t8('Street') %]</th>
+    <td>[% HTML.escape(vc_obj.street) %]</td>
+    <td>[% L.input_tag("shiptostreet", shiptostreet, "size", "35") %]</td>
+   </tr>
+   <tr>
+    <th>[% LxERP.t8('Zipcode') %]</th>
+    <td>[% HTML.escape(vc_obj.zipcode) %]</td>
+    <td>[% L.input_tag("shiptozipcode", shiptozipcode, "size", "35") %]</td>
+   </tr>
+   <tr>
+    <th>[% LxERP.t8('City') %]</th>
+    <td>[% HTML.escape(vc_obj.city) %]</td>
+    <td>[% L.input_tag("shiptocity", shiptocity, "size", "35") %]</td>
+   </tr>
+   <tr>
+    <th>[% LxERP.t8('Country') %]</th>
+    <td>[% HTML.escape(vc_obj.country) %]</td>
+    <td>[% L.input_tag("shiptocountry", shiptocountry, "size", "35") %]</td>
+   </tr>
+   <tr>
+    <th>[% LxERP.t8('GLN') %]</th>
+    <td>[% HTML.escape(vc_obj.gln) %]</td>
+    <td>[% L.input_tag("shiptogln", shiptogln, "size", "35") %]</td>
+   </tr>
+   <tr>
+    <th>[% LxERP.t8('Contact') %]</th>
+    <td>[% HTML.escape(vc_obj.contact) %]</td>
+    <td>[% L.input_tag("shiptocontact", shiptocontact, "size", "35") %]</td>
+   </tr>
+   <tr>
+    <th>[% LxERP.t8('Gender') %]</th>
+    <td></td>
+    <td>
+     [% L.select_tag('shiptocp_gender', [ [ 'm', LxERP.t8('male') ], [ 'f', LxERP.t8('female') ] ], 'default' = shiptocp_gender) %]
+    </td>
+   </tr>
+   <tr>
+    <th>[% LxERP.t8('Phone') %]</th>
+    <td>[% HTML.escape(vc_obj.phone) %]</td>
+    <td>[% L.input_tag("shiptophone", shiptophone, "size", "35") %]</td>
+   </tr>
+   <tr>
+    <th>[% LxERP.t8('Fax') %]</th>
+    <td>[% HTML.escape(vc_obj.fax) %]</td>
+    <td>[% L.input_tag("shiptofax", shiptofax, "size", "35") %]</td>
+   </tr>
+   <tr>
+    <th>[% LxERP.t8('E-mail') %]</th>
+    <td>[% HTML.escape(vc_obj.email) %]</td>
+    <td>[% L.input_tag("shiptoemail", shiptoemail, "size", "35") %]</td>
+   </tr>
+  [% FOREACH var = cvars %]
+   <tr>
+    <th>[% HTML.escape(var.config.description) %]</th>
+    <td></td>
+    <td>[% INCLUDE 'common/render_cvar_input.html' cvar_name_prefix='shiptocvar_' %]</td>
+   </tr>
+  [% END %]
+  </tbody>
 </table>
 
-<p>
+<div class="buttons">
  [% L.button_tag("kivi.SalesPurchase.submit_custom_shipto()", LxERP.t8("Apply")) %]
- [% L.button_tag("kivi.SalesPurchase.reset_shipto_fields()", LxERP.t8("Reset")) %]
- [% L.button_tag("kivi.SalesPurchase.clear_shipto_fields()", LxERP.t8("Clear fields")) %]
- [% L.button_tag("\$('#shipto_dialog').dialog('close');", LxERP.t8("Abort")) %]
-</p>
+ [% L.button_tag("kivi.SalesPurchase.reset_shipto_fields()", LxERP.t8("Reset"), class="neutral") %]
+ [% L.button_tag("kivi.SalesPurchase.clear_shipto_fields()", LxERP.t8("Clear fields"), class="neutral") %]
+ [% L.button_tag("\$('#shipto_dialog').dialog('close');", LxERP.t8("Abort"), class="neutral") %]
+</div>
+</form>
diff --git a/templates/webpages/common/flash.html b/templates/webpages/common/flash.html
index 9ff22adeb..7f18d3b91 100644
--- a/templates/webpages/common/flash.html
+++ b/templates/webpages/common/flash.html
@@ -1,29 +1,31 @@
-[%- USE HTML -%][%- USE LxERP %][%- USE T8 %]
-[%- BLOCK output %]
- <div id="flash_[% type %]" class="flash_message_[% type %]"[% IF !messages || !messages.size %] style="display: none"[% END %]>
-  <a href='#' style='float:right'
-     onclick='$("#flash_[% type %]_content").empty();$("#flash_[% type %]_detail").empty();$("#flash_[% type %]").hide()'>
-     <img src='image/close.png' border='0' alt='[% 'Close Flash' | $T8 %]'></a>
-  <span class="flash_title">[%- title %]:</span>
-  <span id="flash_[% type %]_content">
-   [% FOREACH message = messages %]
-    [%- HTML.escape(message) %]
-    [%- UNLESS loop.last %]<br>[% END %]
-   [%- END %]
+[% USE HTML %]
+[% USE LxERP %]
+[% USE T8 %]
+
+[% BLOCK output %]
+<div id="flash_[% type %]" class="flash_message flash_message_[% type %]" [% IF !messages || !messages.size %] style="display: none" [% END %]>
+<div class="icon-container">
+  <a href="#" onclick='$("#flash_[% type %]_content").empty();$("#flash_[% type %]_detail").empty();$("#flash_[% type %]").hide()' class="icon-close"> &#10005;</a>
+  <span id="flash_[% type %]_disp" class="display" style="display: none">
+    <a href="#" onclick='$("#flash_detail_[% type %]").toggle();' class="button"> [% 'Details' | $T8 %] </a>
   </span>
-  <span id="flash_[% type %]_disp" style="display: none">
-  <a href='#' style='float:left' onclick='$("#flash_detail_[% type %]").toggle();'>
-     [[% 'Details' | $T8 %]]</a>&nbsp;&nbsp;</span>
-  <div id="flash_detail_[% type %]" style="display: none">
-    <br>
-    <span id="flash_[% type %]_detail"></span><br>
-    <a href='#' style='float:left'
-      onclick='$("#flash_detail_[% type %]").hide()'>
-      <img src='image/close.png' border='0' alt='[% 'Close Details' | $T8 %]'></a><br>
-  </div>
- </div>
-[%- END %]
-[%- PROCESS output title=LxERP.t8('Error')       type='error'   messages = FLASH.error %]
-[%- PROCESS output title=LxERP.t8('Warning')     type='warning' messages = FLASH.warning %]
-[%- PROCESS output title=LxERP.t8('Information') type='info'    messages = FLASH.info %]
-[%- PROCESS output title=LxERP.t8('Ok')          type='ok'      messages = FLASH.ok %]
+</div>
+<div class="message-container">
+  <span class="flash_title">[% title %]:</span>
+  <div class="flash_notification">
+    <span id="flash_[% type %]_content" class="content">
+      [% FOREACH message = messages %] [% HTML.escape(message) %] [% UNLESS loop.last %]<br>[% END %] [% END %]
+    </span>
+    <div id="flash_detail_[% type %]" class="detail" style="display: none">
+      <span id="flash_[% type %]_detail"></span>
+      <a href="#" style="float:left" onclick='$("#flash_detail_[% type %]").hide()' class="icon-close">&#10005;</a>
+    </div>
+  </div><!-- /.flash_notification -->
+</div>
+</div>
+[% END #BLOCK output %]
+
+[% PROCESS output title=LxERP.t8('Error') type='error' messages = FLASH.error %]
+[% PROCESS output title=LxERP.t8('Warning') type='warning' messages = FLASH.warning %]
+[% PROCESS output title=LxERP.t8('Information') type='info' messages = FLASH.info %]
+[% PROCESS output title=LxERP.t8('Ok') type='ok' messages = FLASH.ok %]
diff --git a/templates/webpages/common/paginate.html b/templates/webpages/common/paginate.html
index 28cd8ca2a..cf03585e8 100644
--- a/templates/webpages/common/paginate.html
+++ b/templates/webpages/common/paginate.html
@@ -1,23 +1,34 @@
-[%- USE T8 %]
-[%- MACRO build_url BLOCK %]
- [%- IF base_url %]
-  [%- base_url %]&page=[% page %]
- [%- ELSE %]
+[% USE T8 %]
+[% MACRO build_url BLOCK %]
+ [% IF base_url %]
+  [% base_url %]&page=[% page %]
+ [% ELSE %]
   [% url_maker('page' => page) %]
- [%- END %]
-[%- END %]
-[%- IF pages.max > 1 %]
-<div class='paginate'>
-[%- IF pages.page > 1 %]<a class='paginate-link paginate-prev' href='[% build_url(page=pages.page - 1) %]'>&laquo; [% 'prev' | $T8 %]</a> [% ELSE %]<b>&laquo;</b> [% END %]
-[%- FOR p = pages.common %]
-  [%- NEXT UNLESS p.visible %]
-  [%- IF p.active %]<a class='paginate-link paginate-page' href="[% build_url(page=p.page) %]">[% p.page %]</a> [% ELSE %]<b>[% p.page %]</b> [%- END %]
-[%- END %]
-[%- IF pages.page < pages.max %]<a class='paginate-link paginate-next' href='[% build_url(page=pages.page + 1) %]'>[% 'next' | $T8 %] &raquo;</a>[% ELSE %]<b>&raquo;</b>[%- END %]
+ [% END %]
+[% END %]
+
+[% IF pages.max > 1 %]
+<div class="paginate control-panel">
+[% IF pages.page > 1 %]
+  <a class="paginate-link paginate-prev" href="[% build_url(page=pages.page - 1) %]" title="[% 'prev' | $T8 %]"></a> [% ELSE %]<span class="paginate-prev"></span> [% END %]
+  [% FOR p = pages.common %]
+    [% NEXT UNLESS p.visible %]
+    [% IF p.active %]
+      <a class="paginate-link paginate-page" href="[% build_url(page=p.page) %]">[% p.page %]</a>
+    [% ELSE %]
+      <span class="paginate-page">[% p.page %]</span>
+    [% END %]
+  [% END %]
+  [% IF pages.page < pages.max %]
+    <a class="paginate-link paginate-next" href="[% build_url(page=pages.page + 1) %]" title="[% 'next' | $T8 %]"></a>
+  [% ELSE %]
+    <span class="paginate-next"></span>
+  [% END %]
 </div>
-[%- END %]
-[%- IF target %]
-<script type='text/javascript'>
+[% END %]
+
+[% IF target %]
+<script type="text/javascript">
   var target   = '[% target %]';
   $(function(){
     $('.paginate-link').click(function(event){
@@ -33,4 +44,4 @@
     });
   });
 </script>
-[%- END %]
+[% END %]
diff --git a/templates/webpages/common/render_cvar_filter_input.html b/templates/webpages/common/render_cvar_filter_input.html
index 8654854f6..864f0ad19 100644
--- a/templates/webpages/common/render_cvar_filter_input.html
+++ b/templates/webpages/common/render_cvar_filter_input.html
@@ -1,15 +1,20 @@
-[%- USE HTML -%][%- USE L -%][%- USE LxERP -%][%- USE T8 -%][%- USE P -%]
-[%- SET id__    = cvar_cfg.id
+[% USE HTML %]
+[% USE L %]
+[% USE LxERP %]
+[% USE T8 %]
+[% USE P %]
+
+[% SET id__    = cvar_cfg.id
         name__  = 'filter.cvar.' _ id__
         value__ = filter.cvar.$id__ %]
-[%- IF cvar_cfg.type == 'bool' %]
- [%- L.select_tag(name__, [ '', [ 1, LxERP.t8('Yes') ], [ 0, LxERP.t8('No') ] ], default=value__, class=cvar_class) %]
+[% IF cvar_cfg.type == 'bool' %]
+ [% L.select_tag(name__, [ '', [ 1, LxERP.t8('Yes') ], [ 0, LxERP.t8('No') ] ], default=value__, class=cvar_class) %]
 
-[%- ELSIF cvar_cfg.type == 'number' %]
+[% ELSIF cvar_cfg.type == 'number' %]
  [% L.select_tag(name__ _ '::', [ [ 'eq', '==' ], [ 'ne', '=/=' ], [ 'gt', '>' ], [ 'ge', '>=' ], [ 'lt', '<' ], [ 'le', '<=' ] ], default=filter.cvar.item(cvar_cfg.id _ '__')) %]
  [% L.input_tag(name__, value__, class=cvar_class) %]
 
-[%- ELSIF cvar_cfg.type == 'date' %]
+[% ELSIF cvar_cfg.type == 'date' %]
  [% L.select_tag(name__ _ '::', [ [ 'eq', '==' ], [ 'ne', '=/=' ], [ 'gt', '>' ], [ 'ge', '>=' ], [ 'lt', '<' ], [ 'le', '<=' ] ], default=filter.cvar.item(cvar_cfg.id _ '__')) %]
  [% L.date_tag(name__, value__, class=cvar_class) %]
 
@@ -19,17 +24,17 @@
     L.select_tag(name__, options__, default=value__, class=cvar_class) %]
 
 [% ELSIF cvar_cfg.type == 'customer' %]
- [%- P.customer_vendor.picker(name__, value__, type='customer', class=cvar_class) %]
+ [% P.customer_vendor.picker(name__, value__, type='customer', class=cvar_class) %]
 
 [% ELSIF cvar_cfg.type == 'vendor' %]
- [%- P.customer_vendor.picker(name__, value__, type='vendor', class=cvar_class) %]
+ [% P.customer_vendor.picker(name__, value__, type='vendor', class=cvar_class) %]
 
 [% ELSIF cvar_cfg.type == 'part' %]
- [%- P.part.picker(name__, value__, class=cvar_class) %]
+ [% P.part.picker(name__, value__, class=cvar_class) %]
 
-[%- ELSE %]
+[% ELSE %]
  [% SET value_name__ = id__ _ '_substr__ilike'
         value__      = filter.cvar.$value_name__ %]
- [%- L.input_tag(name__ _ ':substr::ilike', value__, maxlength=cvar_cfg.maxlength, class=cvar_class) %]
+ [% L.input_tag(name__ _ ':substr::ilike', value__, maxlength=cvar_cfg.maxlength, class=cvar_class) %]
 
-[%- END %]
+[% END %]
diff --git a/templates/webpages/common/render_cvar_input.html b/templates/webpages/common/render_cvar_input.html
index 96b69c627..39769ace6 100644
--- a/templates/webpages/common/render_cvar_input.html
+++ b/templates/webpages/common/render_cvar_input.html
@@ -1,35 +1,35 @@
-[%- USE T8 %]
-[%- USE HTML %]
-[%- USE L %]
-[%- USE P %]
-[%- USE LxERP %]
+[% USE T8 %]
+[% USE HTML %]
+[% USE L %]
+[% USE P %]
+[% USE LxERP %]
 
-[%- DEFAULT var_name = HTML.escape(cvar_name_prefix) _ HTML.escape(var.config.name) _ HTML.escape(cvar_name_postfix) %]
+[% DEFAULT var_name = HTML.escape(cvar_name_prefix) _ HTML.escape(var.config.name) _ HTML.escape(cvar_name_postfix) %]
 
-[%- IF ( hide_non_editable && !var.config.is_flag('editable') ) %]
+[% IF ( hide_non_editable && !var.config.is_flag('editable') ) %]
   [% L.hidden_tag(var_name, var.value) %]
-[%- ELSIF ( !var.is_valid ) %]
-  [%- IF ( show_disabled_message ) %]
+[% ELSIF ( !var.is_valid ) %]
+  [% IF ( show_disabled_message ) %]
     [% 'Element disabled' | $T8 %]
-  [%- END %]
-[%- ELSIF ( var.config .type == 'bool' ) %]
+  [% END %]
+[% ELSIF ( var.config .type == 'bool' ) %]
   [% L.checkbox_tag(var_name, checked = var.value) %]
-[%- ELSIF ( var.config .type == 'textfield' ) %]
+[% ELSIF ( var.config .type == 'textfield' ) %]
   [% L.textarea_tag(var_name, var.value, cols = var.config.processed_options.WIDTH, rows = var.config.processed_options.HEIGHT) %]
-[%- ELSIF ( var.config.type == 'date' ) %]
-  [% L.date_tag(var_name, var.value) %]
-[%- ELSIF ( var.config.type == 'timestamp' ) %]
+[% ELSIF ( var.config.type == 'date' ) %]
+  [% L.date_tag(var_name, var.value, class='wi-date') %]
+[% ELSIF ( var.config.type == 'timestamp' ) %]
   [% L.input_tag(var_name, var.value) %]
-[%- ELSIF ( var.config.type == 'customer' ) %]
+[% ELSIF ( var.config.type == 'customer' ) %]
   [% P.customer_vendor.picker(var_name, var.value, type='customer') %]
-[%- ELSIF ( var.config.type == 'vendor' ) %]
+[% ELSIF ( var.config.type == 'vendor' ) %]
   [% P.customer_vendor.picker(var_name, var.value, type='vendor') %]
-[%- ELSIF ( var.config.type == 'part' ) %]
-  [% P.part.picker(var_name, var.value) %]
-[%- ELSIF ( var.config.type == 'select' ) %]
-  [% L.select_tag(var_name, var.config.processed_options, default = var.value) %]
-[%- ELSIF ( var.config.type == 'number' ) %]
-  [%- L.input_tag(var_name, LxERP.format_amount(var.value, -2)) %]
-[%- ELSE %]
-  [% L.input_tag(var_name, var.value, maxlength = var.config.processed_options.MAXLENGTH) %]
-[%- END %]
+[% ELSIF ( var.config.type == 'part' ) %]
+  [% P.part.picker(var_name, var.value, class='wi-wide') %]
+[% ELSIF ( var.config.type == 'select' ) %]
+  [% L.select_tag(var_name, var.config.processed_options, default = var.value, class='wi-wide') %]
+[% ELSIF ( var.config.type == 'number' ) %]
+  [% L.input_tag(var_name, LxERP.format_amount(var.value, -2), class='wi-small numeric') %]
+[% ELSE %]
+  [% L.input_tag(var_name, var.value, maxlength = var.config.processed_options.MAXLENGTH, class='wi-wide') %]
+[% END %]
diff --git a/templates/webpages/common/show_history.html b/templates/webpages/common/show_history.html
index 46496b199..5f215e9e4 100644
--- a/templates/webpages/common/show_history.html
+++ b/templates/webpages/common/show_history.html
@@ -1,129 +1,61 @@
-[%- USE T8 %]
+[% USE T8 %]
 [% USE HTML %]
+
 [% IF SUCCESS %]
 
-[% BLOCK column_header %]
-            <table height="0" width="0" cellpadding="0" cellspacing="0" marginheight="0" marginwidth="0" valign="top" border="0">
-             [% IF THIS_COLUMN && !THIS_COLUMN_DOWN %]
-               <tr><td><a title="[% 'order' | $T8 %]" style="background: #ccccff; border: solid 1px #aaaade;">&and;</a></td></tr>
-             [% ELSE %]
-               <tr><td><a href="[% callback %]&order=[% column %]--0" title="[% 'order' | $T8 %]" style="border: solid 1px #aaaade;">&and;</a></td></tr>
-             [% END %]
-             [% IF THIS_COLUMN &&  THIS_COLUMN_DOWN %]
-               <tr><td><a title="[% 'order' | $T8 %]" style="background: #ccccff; border: solid 1px #aaaade;">&or;</a></td></tr>
-             [% ELSE %]
-               <tr><td><a href="[% callback %]&order=[% column %]--1" title="[% 'order' | $T8 %]" style="border: solid 1px #aaaade;">&or;</a></td></tr>
-             [% END %]
-            </table>
-[% END %]
+  [% BLOCK column_header %]
+    <span class="sort_symbol">
+      [% IF THIS_COLUMN && !THIS_COLUMN_DOWN %]
+       <a title="[% 'order' | $T8 %]" class="ascending active">&and;</a>
+      [% ELSE %]
+       <a href="[% callback %]&order=[% column %]--0" title="[% 'order' | $T8 %]" class="ascending">&and;</a>
+      [% END %]
+      [% IF THIS_COLUMN &&  THIS_COLUMN_DOWN %]
+       <a title="[% 'order' | $T8 %]" class="descending active">&or;</a>
+      [% ELSE %]
+       <a href="[% callback %]&order=[% column %]--1" title="[% 'order' | $T8 %]" class="descending">&or;</a>
+      [% END %]
+    </span>
+  [% END %]
 
-<table>
-  <tr class='listheading'>
-    <th>
-      <table height="0" width="0" cellpadding="0" cellspacing="0" marginheight="0" marginwidth="0" border="0">
-        <tr>
-          <td align="center" valign="middle">
-           &nbsp;[% 'Time' | $T8 %]&nbsp;
-          </td>
-          <td valign="top">
-           [% PROCESS column_header THIS_COLUMN=ITIME THIS_COLUMN_DOWN=ITIMEBY column='h.itime' %]
-          </td>
-        </tr>
-      </table>
-    </th>
-    <th>
-      <table height="0" width="0" cellpadding="0" cellspacing="0" marginheight="0" marginwidth="0" border="0">
-        <tr>
-          <td align="center" valign="middle">
-            &nbsp;[% 'Employee' | $T8 %]&nbsp;
-          </td>
-          <td valign="top">
-           [% PROCESS column_header THIS_COLUMN=NAME THIS_COLUMN_DOWN=NAMEBY column='emp.name' %]
-          </td>
-        </tr>
-      </table>
-    </th>
-    <th>
-      <table>
+  <table class="tbl-list">
+    <thead>
+      <tr>
+        <th><span class="sort">[% 'Time' | $T8 %]</span>[% PROCESS column_header THIS_COLUMN=ITIME THIS_COLUMN_DOWN=ITIMEBY column='h.itime' %]</th>
+        <th><span class="sort">[% 'Employee' | $T8 %]</span>[% PROCESS column_header THIS_COLUMN=NAME THIS_COLUMN_DOWN=NAMEBY column='emp.name' %]</th>
+        <th><span class="sort">[% 'Action' | $T8 %]</span></th>
+        <th><span class="sort">[% 'Addition' | $T8 %]</span></th>
+        <th><span class="sort">[% 'ID number' | $T8 %]</span>[% PROCESS column_header THIS_COLUMN=TRANS_ID THIS_COLUMN_DOWN=TRANS_IDBY column='h.trans_id' %]</th>
+        <th><span class="sort">[% 'Record number' | $T8 %]</span>[% PROCESS column_header THIS_COLUMN=SNUMBERS THIS_COLUMN_DOWN=SNUMBERSBY column='h.snumbers' %]</th>
+      </tr>
+    </thead>
+    <tbody>
+      [% FOREACH row = DATEN %]
         <tr>
+          <td>[% HTML.escape(row.itime) %] </td>
+          <td> [% HTML.escape(row.name) %] </td>
+          <td> [% HTML.escape(row.addition) %] </td>
+          <td> [% HTML.escape(row.what_done) %] </td>
+          <td> [% HTML.escape(row.id) %] </td>
           <td>
-            &nbsp;[% 'Action' | $T8 %]&nbsp;
+            [% IF row.haslink %]
+              <a href="[% row.haslink %]" target="_blank">[% HTML.escape(row.snumbers) %]</a>
+            [% ELSE %]
+              [% HTML.escape(row.snumbers) %]
+            [% END %]
           </td>
         </tr>
-      </table>
-    </th>
-    <th>
-      <table>
-        <tr>
-          <td>
-            &nbsp;[% 'Addition' | $T8 %]&nbsp;
-          </td>
-        </tr>
-      </table>
-    </th>
-    <th>
-      <table height="0" width="0" cellpadding="0" cellspacing="0" marginheight="0" marginwidth="0" border="0">
-        <tr>
-          <td align="center" valign="middle">
-           &nbsp;[% 'ID number' | $T8 %]&nbsp;
-          </td>
-          <td valign="top">
-            [% PROCESS column_header THIS_COLUMN=TRANS_ID THIS_COLUMN_DOWN=TRANS_IDBY column='h.trans_id' %]
-          </td>
-        </tr>
-      </table>
-    </th>
-    <th>
-      <table height="0" width="0" cellpadding="0" cellspacing="0" marginheight="0" marginwidth="0" border="0">
-        <tr>
-          <td align="center" valign="middle">
-           &nbsp;[% 'Record number' | $T8 %]&nbsp;
-          </td>
-          <td valign="top">
-            [% PROCESS column_header THIS_COLUMN=SNUMBERS THIS_COLUMN_DOWN=SNUMBERSBY column='h.snumbers' %]
-          </td>
-        </tr>
-      </table>
-    </th>
-  </tr>
-  <tbody>
-[% FOREACH row = DATEN %]
-  <tr class="listrow[% loop.count % 2 %]">
-    <td nowrap>
-      &nbsp;[% HTML.escape(row.itime) %]&nbsp;
-    </td>
-    <td nowrap>
-      &nbsp;[% HTML.escape(row.name) %]&nbsp;
-    </td>
-    <td>
-      &nbsp;[% HTML.escape(row.addition) %]&nbsp;
-    </td>
-    <td>
-      &nbsp;[% HTML.escape(row.what_done) %]&nbsp;
-    </td>
-    <td>
-      &nbsp;[% HTML.escape(row.id) %]&nbsp;
-    </td>
-    <td>
-      &nbsp;
-      [% IF row.haslink %]
-      <a href="[% row.haslink %]" target="_blank">[% HTML.escape(row.snumbers) %]</a>
-      [% ELSE %]
-      [% HTML.escape(row.snumbers) %]
       [% END %]
-      &nbsp;
-    </td>
-  </tr>
-[% END %]
-</tbody>
-</table>
+    </tbody>
+  </table>
 [% ELSE %]
-<b>[% 'No search results found!' | $T8 %]</b><br>
+  <b>[% 'No search results found!' | $T8 %]</b><br>
 [% END %]
-<p>
-[% IF NONEWWINDOW %]
-<input type="button" onclick="javascript:history.back(-1);" value="[% 'back' | $T8 %]">
-[% ELSE %]
-<input type="button" onclick="javascript:window.close();" value="[% 'close' | $T8 %]">
-[% END %]
-</p>
+
+<div class="buttons">
+  [% IF NONEWWINDOW %]
+    <input type="button" onclick="javascript:history.back(-1);" value="[% 'back' | $T8 %]">
+  [% ELSE %]
+    <input type="button" onclick="javascript:window.close();" value="[% 'close' | $T8 %]">
+  [% END %]
+</div>
diff --git a/templates/webpages/common/show_vc_details.html b/templates/webpages/common/show_vc_details.html
index f37498033..6949747f5 100644
--- a/templates/webpages/common/show_vc_details.html
+++ b/templates/webpages/common/show_vc_details.html
@@ -1,354 +1,316 @@
-[%- USE T8 %]
+[% USE T8 %]
 [% USE HTML %]
-<h1>[% IF is_customer %][% 'Customer details' | $T8 %][% ELSE %][% 'Vendor details' | $T8 %][% END %] &quot;[% HTML.escape(name) %]&quot;</h1>
 
-[% BLOCK jump_block %]
-[%- IF SHIPTO.size || CONTACTS.size %]
- <p>
-  [% 'Jump to' | $T8 %] <a href="#billing">[% 'Billing Address' | $T8 %]</a>
-  [%- FOREACH shipto = SHIPTO %]
-   ,
-   <a href="#shipping[% loop.count %]">
-    [% 'Shipping Address' | $T8 %]
-    &quot;[% HTML.escape(shipto.shiptoname) %]&quot;
-   </a>
-  [%- END %]
-  [%- FOREACH contact = CONTACTS %]
-   ,
-   <a href="#contact[% loop.count %]">
-    [% 'Contact Person' | $T8 %]
-    &quot;[% HTML.escape(contact.cp_name) %]&quot;
-   </a>
-  [%- END %]
- </p>
-
- <hr>
-[%- END %]
+<h1>
+[% IF is_customer %][% 'Customer details' | $T8 %]
+[% ELSE           %][% 'Vendor details'   | $T8 %]
+[% END %] &quot;[% HTML.escape(name) %]&quot;
+</h1>
+
+[% IF SHIPTO.size || CONTACTS.size %]
+  [% BLOCK jump_block %]
+      <table class="select-item control-panel float-cells-table jump-to right">
+        <caption>[% 'Jump to' | $T8 %]</caption>
+        <tbody>
+          <tr><td colspan="2"><a href="#billing">[% 'Billing Address' | $T8 %]</a></td></tr>
+          [% FOREACH shipto = SHIPTO %]
+            <tr>
+              <td class="cell"><a href="#shipping[% loop.count %]"> [% 'Shipping Address' | $T8 %]</a></td>
+              <td><a href="#shipping[% loop.count %]">&quot;[% HTML.escape(shipto.shiptoname) %]&quot;</a></td>
+            </tr>
+          [% END %]
+          [% FOREACH contact = CONTACTS %]
+            <tr>
+              <td><a href="#contact[% loop.count %]">[% 'Contact Person' | $T8 %] </a></td>
+              <td><a href="#contact[% loop.count %]">&quot;[% HTML.escape(contact.cp_name) %]&quot;</a></td>
+            </tr>
+          [% END %]
+        </tbody>
+      </table>
+  [% END # BLOCK jump_block %]
 [% END %]
 
- [%- INCLUDE jump_block CONTACTS = CONTACTS, SHIPTO = SHIPTO %]
-
- <a name="billing"><h1>[% 'Billing Address' | $T8 %]</h1></a>
-
- <table>
-  <tr>
-  [% IF is_customer %]
-   <td align="right">[% 'Customer Number' | $T8 %]</td>
-   <td>[% HTML.escape(customernumber) %]</td>
-  [% ELSE %]
-   <td align="right">[% 'Vendor Number' | $T8 %]</td>
-   <td>[% HTML.escape(vendornumber) %]</td>
-  [% END %]
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Company Name' | $T8 %]</td>
-   <td>[% HTML.escape(name) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Department' | $T8 %]</td>
-   <td>[% HTML.escape(department_1) %][% IF department_2 %][% IF department_1 %]; [% END %][% HTML.escape(department_2) %][% END %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Street' | $T8 %]</td>
-   <td>[% HTML.escape(street) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Zip, City' | $T8 %]</td>
-   <td>[% HTML.escape(zipcode) %] [% HTML.escape(city) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Country' | $T8 %]</td>
-   <td>[% HTML.escape(country) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'GLN' | $T8 %]</td>
-   <td>[% HTML.escape(gln) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Contact Person' | $T8 %]</td>
-   <td>[% IF greeting %][% HTML.escape(greeting) %] [% END %][% HTML.escape(contact) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Phone' | $T8 %]</td>
-   <td>[% HTML.escape(phone) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Fax' | $T8 %]</td>
-   <td>[% HTML.escape(fax) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'E-mail' | $T8 %]</td>
-   <td>[% HTML.escape(email) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Homepage' | $T8 %]</td>
-   <td>[% HTML.escape(homepage) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Credit Limit' | $T8 %]</td>
-   <td>[% HTML.escape(creditlimit) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Discount' | $T8 %]</td>
-   <td>[% HTML.escape(discount_as_percent) %]%</td>
-  </tr>
-
-  [% IF is_customer %]
-  <tr>
-   <td align="right">[% 'Pricegroup' | $T8 %]</td>
-   <td>[% HTML.escape(pricegroup) %]</td>
-  </tr>
-  [% END %]
-
-  <tr>
-   <td align="right">[% 'Payment Terms' | $T8 %]</td>
-   <td>[% HTML.escape(payment_terms) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Delivery Terms' | $T8 %]</td>
-   <td>[% HTML.escape(delivery_terms) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Tax Number' | $T8 %]</td>
-   <td>[% HTML.escape(taxnumber) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'USt-IdNr.' | $T8 %]</td>
-   <td>[% HTML.escape(ustid) %]</td>
-  </tr>
-
-  [% IF is_customer %]
-   <tr>
-    <td align="right">[% 'KNr. beim Kunden' | $T8 %]</td>
-    <td>[% HTML.escape(c_vendor_id) %]</td>
-   </tr>
-  [% END %]
-
-  <tr>
-   <td align="right">[% 'Account Number' | $T8 %]</td>
-   <td>[% HTML.escape(account_number) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Bank Code' | $T8 %]</td>
-   <td>[% HTML.escape(bank_code) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Bank' | $T8 %]</td>
-   <td>[% HTML.escape(bank) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'IBAN' | $T8 %]</td>
-   <td>[% HTML.escape(iban) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'BIC' | $T8 %]</td>
-   <td>[% HTML.escape(bic) %]</td>
-  </tr>
-  <tr>
-   <td align="right">[% IF is_customer %][% 'Customer type' | $T8 %][% ELSE %][% 'Vendor type' | $T8 %][% END %]</td>
-   <td>[% HTML.escape(business) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right">[% 'Language' | $T8 %]</td>
-   <td>[% HTML.escape(language) %]</td>
-  </tr>
-
-  <tr>
-   <td align="right" valign="top">[% 'Notes' | $T8 %]</td>
-   <td valign="top">[% HTML.escape(notes) %]</td>
-  </tr>
-
- </table>
-
-
-
-
- [% FOREACH row = SHIPTO %]
-
-  <hr>
-
-  [%- INCLUDE jump_block CONTACTS = CONTACTS, SHIPTO = SHIPTO %]
-
-  <a name="shipping[% loop.count %]"><h1>[% 'Shipping Address' | $T8 %] &quot;[% HTML.escape(row.shiptoname) %]&quot;</h1></a>
 
-  <table>
-   <tr>
-    <td align="right">[% 'Company Name' | $T8 %]</td>
-    <td>[% HTML.escape(row.shiptoname) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Department' | $T8 %]</td>
-    <td>[% HTML.escape(row.shiptodepartment_1) %][% IF row.shiptodepartment_2 %][% IF row.shiptodepartment_1 %]; [% END %][% HTML.escape(row.shiptodepartment_2) %][% END %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Street' | $T8 %]</td>
-    <td>[% HTML.escape(row.shiptostreet) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Zip, City' | $T8 %]</td>
-    <td>[% HTML.escape(row.shiptozipcode) %] [% HTML.escape(row.shiptocity) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Country' | $T8 %]</td>
-    <td>[% HTML.escape(row.shiptocountry) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'GLN' | $T8 %]</td>
-    <td>[% HTML.escape(row.shiptogln) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Contact Person' | $T8 %]</td>
-    <td>[% HTML.escape(row.shiptocontact) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Phone' | $T8 %]</td>
-    <td>[% HTML.escape(row.shiptophone) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Fax' | $T8 %]</td>
-    <td>[% HTML.escape(row.shiptofax) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'E-mail' | $T8 %]</td>
-    <td>[% HTML.escape(row.shiptoemail) %]</td>
-   </tr>
-
-  </table>
- [% END %]
-
-
-
-
-
-
-
-
-
-
- [% FOREACH row = CONTACTS %]
-
-  <hr>
-
-  [%- INCLUDE jump_block CONTACTS = CONTACTS, SHIPTO = SHIPTO %]
-
-  <a name="contact[% loop.count %]"><h1>[% 'Contact Person' | $T8 %] &quot;[% HTML.escape(row.cp_name) %]&quot;</h1></a>
-
-  <table>
-   <tr>
-    <td align="right">[% 'Greeting' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_greeting) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Title' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_title) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Given Name' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_givenname) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Name' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_name) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Department' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_abteilung) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Phone1' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_phone1) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Phone2' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_phone2) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Fax' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_fax) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Mobile1' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_mobile1) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Mobile2' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_mobile2) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Sat. Phone' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_satphone) %]</td>
-   </tr>
-
-   <tr>
-    <td align="right">[% 'Sat. Fax' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_satfax) %]</td>
-   </tr>
+<div class="wrapper">
+
+[% INCLUDE jump_block CONTACTS = CONTACTS, SHIPTO = SHIPTO %]
+
+<table class="tbl-horizontal checkered">
+  <caption><a name="billing">[% 'Billing Address' | $T8 %]</a></caption>
+  <colgroup><col class="wi-small"><col class="wi-lightwide"></colgroup>
+  <tbody>
+    <tr>
+      [% IF is_customer %]
+      <th>[% 'Customer Number' | $T8 %]</th>
+      <td>[% HTML.escape(customernumber) %]</td>
+      [% ELSE %]
+      <th>[% 'Vendor Number' | $T8 %]</th>
+      <td>[% HTML.escape(vendornumber) %]</td>
+      [% END %]
+    </tr>
+    <tr>
+      <th>[% 'Company Name' | $T8 %]</th>
+      <td>[% HTML.escape(name) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Department' | $T8 %]</th>
+      <td>[% HTML.escape(department_1) %][% IF department_2 %][% IF department_1 %]; [% END %][% HTML.escape(department_2) %][% END %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Street' | $T8 %]</th>
+      <td>[% HTML.escape(street) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Zip, City' | $T8 %]</th>
+      <td>[% HTML.escape(zipcode) %] [% HTML.escape(city) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Country' | $T8 %]</th>
+      <td>[% HTML.escape(country) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'GLN' | $T8 %]</th>
+      <td>[% HTML.escape(gln) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Contact Person' | $T8 %]</th>
+      <td>[% IF greeting %][% HTML.escape(greeting) %] [% END %][% HTML.escape(contact) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Phone' | $T8 %]</th>
+      <td>[% HTML.escape(phone) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Fax' | $T8 %]</th>
+      <td>[% HTML.escape(fax) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'E-mail' | $T8 %]</th>
+      <td>[% HTML.escape(email) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Homepage' | $T8 %]</th>
+      <td>[% HTML.escape(homepage) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Credit Limit' | $T8 %]</th>
+      <td>[% HTML.escape(creditlimit) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Discount' | $T8 %]</th>
+      <td>[% HTML.escape(discount_as_percent) %]%</td>
+    </tr>
+    [% IF is_customer %]
+    <tr>
+      <th>[% 'Pricegroup' | $T8 %]</th>
+      <td>[% HTML.escape(pricegroup) %]</td>
+    </tr>
+    [% END %]
+    <tr>
+      <th>[% 'Payment Terms' | $T8 %]</th>
+      <td>[% HTML.escape(payment_terms) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Delivery Terms' | $T8 %]</th>
+      <td>[% HTML.escape(delivery_terms) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Tax Number' | $T8 %]</th>
+      <td>[% HTML.escape(taxnumber) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'USt-IdNr.' | $T8 %]</th>
+      <td>[% HTML.escape(ustid) %]</td>
+    </tr>
+    [% IF is_customer %]
+    <tr>
+      <th>[% 'KNr. beim Kunden' | $T8 %]</th>
+      <td>[% HTML.escape(c_vendor_id) %]</td>
+    </tr>
+    [% END %]
+    <tr>
+      <th>[% 'Account Number' | $T8 %]</th>
+      <td>[% HTML.escape(account_number) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Bank Code' | $T8 %]</th>
+      <td>[% HTML.escape(bank_code) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Bank' | $T8 %]</th>
+      <td>[% HTML.escape(bank) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'IBAN' | $T8 %]</th>
+      <td>[% HTML.escape(iban) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'BIC' | $T8 %]</th>
+      <td>[% HTML.escape(bic) %]</td>
+    </tr>
+    <tr>
+      <th>[% IF is_customer %][% 'Customer type' | $T8 %][% ELSE %][% 'Vendor type' | $T8 %][% END %]</th>
+      <td>[% HTML.escape(business) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Language' | $T8 %]</th>
+      <td>[% HTML.escape(language) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Notes' | $T8 %]</th>
+      <td>[% HTML.escape(notes) %]</td>
+    </tr>
+  </tbody>
+</table>
+
+</div><!-- /.wrapper -->
+
+
+
+[% FOREACH row = SHIPTO %]
+<div class="wrapper">
+
+[% INCLUDE jump_block CONTACTS = CONTACTS, SHIPTO = SHIPTO %]
+
+<table class="tbl-horizontal checkered">
+  <caption><a id="shipping[% loop.count %]">[% 'Shipping Address' | $T8 %] &quot;[% HTML.escape(row.shiptoname) %]&quot;</a></caption>
+  <tbody>
+    <tr>
+      <th>[% 'Company Name' | $T8 %]</th>
+      <td>[% HTML.escape(row.shiptoname) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Department' | $T8 %]</th>
+      <td>
+        [% HTML.escape(row.shiptodepartment_1) %]
+        [% IF row.shiptodepartment_2 %]
+          [% IF row.shiptodepartment_1 %]; [% END %]
+          [% HTML.escape(row.shiptodepartment_2) %]
+        [% END %]
+      </td>
+    </tr>
+    <tr>
+      <th>[% 'Street' | $T8 %]</th>
+      <td>[% HTML.escape(row.shiptostreet) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Zip, City' | $T8 %]</th>
+      <td>[% HTML.escape(row.shiptozipcode) %] [% HTML.escape(row.shiptocity) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Country' | $T8 %]</th>
+      <td>[% HTML.escape(row.shiptocountry) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'GLN' | $T8 %]</th>
+      <td>[% HTML.escape(row.shiptogln) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Contact Person' | $T8 %]</th>
+      <td>[% HTML.escape(row.shiptocontact) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Phone' | $T8 %]</th>
+      <td>[% HTML.escape(row.shiptophone) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Fax' | $T8 %]</th>
+      <td>[% HTML.escape(row.shiptofax) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'E-mail' | $T8 %]</th>
+      <td>[% HTML.escape(row.shiptoemail) %]</td>
+    </tr>
+  </tbody>
+</table>
+
+</div><!-- /.wrapper -->
+[% END %]
 
-   <tr>
-    <td align="right">[% 'Project' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_project) %]</td>
-   </tr>
 
-   <tr>
-    <td align="right">[% 'E-mail' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_email) %]</td>
-   </tr>
 
-   <tr>
-    <td align="right">[% 'Private Phone' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_privatphone) %]</td>
-   </tr>
 
-   <tr>
-    <td align="right">[% 'Private E-mail' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_privatemail) %]</td>
-   </tr>
 
-   <tr>
-    <td align="right">[% 'Birthday' | $T8 %]</td>
-    <td>[% HTML.escape(row.cp_birthday) %]</td>
-   </tr>
+[% FOREACH row = CONTACTS %]
+<div class="wrapper">
+
+[% INCLUDE jump_block CONTACTS = CONTACTS, SHIPTO = SHIPTO %]
+
+<table class="tbl-horizontal checkered">
+  <caption><a id="contact[% loop.count %]">[% 'Contact Person' | $T8 %] &quot;[% HTML.escape(row.cp_name) %]&quot;</a></caption>
+  <tbody>
+    <tr>
+      <th>[% 'Greeting' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_greeting) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Title' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_title) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Given Name' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_givenname) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Name' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_name) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Department' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_abteilung) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Phone1' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_phone1) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Phone2' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_phone2) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Fax' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_fax) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Mobile1' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_mobile1) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Mobile2' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_mobile2) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Sat. Phone' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_satphone) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Sat. Fax' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_satfax) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Project' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_project) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'E-mail' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_email) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Private Phone' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_privatphone) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Private E-mail' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_privatemail) %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Birthday' | $T8 %]</th>
+      <td>[% HTML.escape(row.cp_birthday) %]</td>
+    </tr>
+  </tbody>
+</table>
+
+</div><!-- /.wrapper -->
+[% END %]
 
-  </table>
 
- [% END %]
diff --git a/templates/webpages/common/toggle-buttons-for-wrapper.html b/templates/webpages/common/toggle-buttons-for-wrapper.html
new file mode 100644
index 000000000..200f22a7a
--- /dev/null
+++ b/templates/webpages/common/toggle-buttons-for-wrapper.html
@@ -0,0 +1,39 @@
+<!-- 
+  Include this JS and the HTML toggle buttons right first into a .wrapper container 
+  for minimizing / maximizing the surrounded .wrapper-container 
+  First Symbols: &or; & &lt;
+-->
+<div class="toggles" id="toggles">
+  <script type="text/javascript">
+    var toggles_id = "#toggles" ; // container of the toggle buttons
+    var wrapper = new Object() ;
+    $(document).ready(function(){
+      if( $(toggles_id).parent().attr('class') == "wrapper" ) {
+        wrapper = $(toggles_id).parent() ; // closest surrounding wrapper to toggle
+        $(wrapper).addClass("toggled");
+      }
+      if( wrapper != "") {
+        var hi = -1; //height of the wrapper
+        $(wrapper).ready(function(){
+          if( hi <= -1 ) hi = $(wrapper).height(); // height of the wrapper
+          
+        }); 
+        // Toggle to minimum
+        $("#toggler-1").click(function(){
+          $(wrapper).animate({height:"30px"},200).addClass("bordered"); 
+          $(this).toggle(); 
+          $("#toggler-2").toggle();
+        });
+        // Toggle back to maximum
+        $("#toggler-2").click(function(){
+          $(wrapper).animate({height:hi},200).removeClass("bordered"); 
+          $(this).toggle();    
+          $("#toggler-1").toggle(); 
+        });
+      }
+    });  
+  </script>
+  <a class="symbol toggle min" id="toggler-1" href="#" style="display:visible;"></a>
+  <a class="symbol toggle max" id="toggler-2" href="#" style="display:none;"></a>
+
+</div><!-- /.toggles /#toggles -->
diff --git a/templates/webpages/common/toggle_panel.html b/templates/webpages/common/toggle_panel.html
new file mode 100644
index 000000000..14047edba
--- /dev/null
+++ b/templates/webpages/common/toggle_panel.html
@@ -0,0 +1,81 @@
+[% USE T8 %]
+[%
+  # Use this include for flip open or shut a filter controlpanel/block.
+  # The source file must contain the BLOCK "filter_toggle_panel"
+
+  # CUSTOM BLOCK NAME
+  # If you want to use MORE THAN ONE filter controlpanel/block
+  # use the variable "block_name" with one of the block names
+  # before the include statement
+
+  # OPEN / CLOSED STATUS
+  # If you want to have the filter block flipped out (open)
+  # then use the optional statement ( SET display_status = 'open' )
+  # before the include statement
+
+  # MINIMAL STATEMENT
+  # At least a BLOCK like the default 'filter_toggle_panel'
+  # and the INCLUDE-Statement are required
+
+  # BLOCK filter_toggle_panel ;          # mandatory, with variable block_name another block name is possible
+  #   <myhtml></myhtml>
+  # END ;                                # END of block filter_toggle_panel
+  # INCLUDE 'common/toggle_panel.html'   #
+  # block_name     = 'this_is_block_2'   # optional / one of all the filter panels, default is 'filter_toggle_panel'
+  # toggle_class   = 'panel_2'           # optional / one of all the button/panel classes, default is 'toggle_panel'
+  # display_status = 'open'              # optional / default/empty is 'closed'
+  # button_closed  = 'Show Filter'       # optional / Term in closed button / default/empty is 'Show Filter' (historical)
+  # button_open    = 'Hide Filter'       # optional / Term in opened button / default/empty is 'Hide Filter' (historical)
+%]
+
+[%
+  IF display_status && display_status == 'open' ;
+    SET display_off = 'style="display:none;"' ;
+    SET display_on  = 'style="display:block;"' ;
+  ELSIF ( display_status && ( display_status == 'closed' || display_status == '' ) ) || !display_status  ;
+    SET display_off = 'style="display:block;"' ;
+    SET display_on  = 'style="display:none;"' ;
+  END ;
+  IF !button_closed || button_closed == '' ;
+    SET button_closed = LxERP.t8('Show Filter') ; # Default Term Filter is historical
+  END ;
+  IF !button_open || button_open == '' ;
+    SET button_open   = LxERP.t8('Hide Filter') ; # Default Term Filter is historical
+  END ;
+  IF !toggle_class || toggle_class == '';
+    toggle_class = 'toggle_panel' ; # this is default for one toggle panel per page
+  END ;
+%]
+
+<div class="toggle_panel control-panel [% toggle_class %]" [% display_off %]>
+  <a href="#" onClick='javascript:$(".[% toggle_class %]").toggle()' class="button toggle off neutral">[% button_closed %]</a>
+  [% IF SELF.filter_summary %]([% LxERP.t8("Current filter") %]: [% SELF.filter_summary | html %])[% END %]
+</div>
+
+<div class="toggle_panel control-panel [% toggle_class %]" [% display_on %]>
+  <a href="#" onClick='javascript:$(".[% toggle_class %]").toggle()' class="button toggle on neutral with-panel">[% button_open %]</a>
+  <div class="toggle_panel_block">
+     [% IF block_name && block_name != ''   %]
+      [%
+        #Dumper.dump_html(block_name) ;
+        IF block_name == 'panel_1' ;
+          PROCESS panel_1 ;
+        ELSIF block_name == 'panel_2' ;
+          PROCESS panel_2 ;
+        ELSIF block_name == 'panel_3' ;
+          PROCESS panel_3 ;
+        END
+      %]
+    [% ELSE %]
+      [% PROCESS filter_toggle_panel %]
+    [% END %]
+
+  </div>
+</div><!-- /.filter_toggle -->
+[%
+  # Reset in case of more than one toggle object
+  SET display_status = '' ; SET display_off = '' ; SET display_on = '' ;
+  SET block_name     = '' ;
+  SET button_closed  = '' ;
+  SET button_open    = '' ;
+%]
