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

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

diff --git a/templates/webpages/wh/journal_filter.html b/templates/webpages/wh/journal_filter.html
index b9d125e2c..271479860 100644
--- a/templates/webpages/wh/journal_filter.html
+++ b/templates/webpages/wh/journal_filter.html
@@ -1,206 +1,233 @@
-[%- USE T8 %]
-[%- USE L %]
-[%- USE P %]
-[%- USE HTML %][%- USE JavaScript %]
+[% USE T8 %]
+[% USE L %]
+[% USE P %]
+[% USE HTML %]
+[% USE JavaScript %]
+
 <h1>[% 'Report about warehouse transactions' | $T8 %]</h1>
 
- <script type="text/javascript">
-   <!--
-      warehouses = new Array();
-      warehouses[0] = new Array();
-      warehouses[0]['id'] = "0";
-      warehouses[0]['bins'] = new Array();
-      warehouses[0]['bins'][0] = new Array();
-      warehouses[0]['bins'][0]['description'] = "---";
-      warehouses[0]['bins'][0]['id'] = "";
-      [%- USE WAREHOUSES_it = Iterator(WAREHOUSES) %][%- FOREACH warehouse = WAREHOUSES_it %]
+<script type="text/javascript"><!--
+    warehouses = new Array();
+    warehouses[0] = new Array();
+    warehouses[0]['id'] = "0";
+    warehouses[0]['bins'] = new Array();
+    warehouses[0]['bins'][0] = new Array();
+    warehouses[0]['bins'][0]['description'] = "---";
+    warehouses[0]['bins'][0]['id'] = "";
+    [% USE WAREHOUSES_it = Iterator(WAREHOUSES) %]
+    [% FOREACH warehouse = WAREHOUSES_it %]
       warehouses[[% WAREHOUSES_it.count %]] = new Array();
       warehouses[[% WAREHOUSES_it.count %]]['id'] = [% warehouse.id %];
       warehouses[[% WAREHOUSES_it.count %]]['bins'] = new Array();
       warehouses[[% WAREHOUSES_it.count %]]['bins'][0] = new Array();
       warehouses[[% WAREHOUSES_it.count %]]['bins'][0]['description'] = "---";
       warehouses[[% WAREHOUSES_it.count %]]['bins'][0]['id'] = "";
-      [% USE BINS_it = Iterator(warehouse.BINS) %][% FOREACH bin = BINS_it %]
-      warehouses[[% WAREHOUSES_it.count %]]['bins'][[% BINS_it.count %]] = new Array();
-      warehouses[[% WAREHOUSES_it.count %]]['bins'][[% BINS_it.count %]]['description'] = "[% JavaScript.escape(bin.description) %]";
-      warehouses[[% WAREHOUSES_it.count %]]['bins'][[% BINS_it.count %]]['id'] = [% bin.id %];
-      [% END %]
+      [% USE BINS_it = Iterator(warehouse.BINS) %]
+      [% FOREACH bin = BINS_it %]
+        warehouses[[% WAREHOUSES_it.count %]]['bins'][[% BINS_it.count %]] = new Array();
+        warehouses[[% WAREHOUSES_it.count %]]['bins'][[% BINS_it.count %]]['description'] = "[% JavaScript.escape(bin.description) %]";
+        warehouses[[% WAREHOUSES_it.count %]]['bins'][[% BINS_it.count %]]['id'] = [% bin.id %];
       [% END %]
+    [% END %]
 
-      function warehouse_selected(warehouse_id, bin_id) {
-        var control = document.getElementById("bin_id");
-
-        for (var i = control.options.length - 1; i >= 0; i--) {
-          control.options[i] = null;
-        }
+    function warehouse_selected(warehouse_id, bin_id) {
+      var control = document.getElementById("bin_id");
 
-        var warehouse_index = 0;
+      for (var i = control.options.length - 1; i >= 0; i--) {
+        control.options[i] = null;
+      }
 
-        for (i = 0; i < warehouses.length; i++)
-          if (warehouses[i]['id'] == warehouse_id) {
-            warehouse_index = i;
-            break;
-          }
+      var warehouse_index = 0;
 
-        var warehouse = warehouses[warehouse_index];
-        var bin_index = 0;
+      for (i = 0; i < warehouses.length; i++)
+        if (warehouses[i]['id'] == warehouse_id) {
+          warehouse_index = i;
+          break;
+        }
 
-        for (i = 0; i < warehouse['bins'].length; i++)
-          if (warehouse['bins'][i]['id'] == bin_id) {
-            bin_index = i;
-            break;
-          }
+      var warehouse = warehouses[warehouse_index];
+      var bin_index = 0;
 
-        for (i = 0; i < warehouse['bins'].length; i++) {
-          control.options[i] = new Option(warehouse['bins'][i]['description'], warehouse['bins'][i]['id']);
+      for (i = 0; i < warehouse['bins'].length; i++)
+        if (warehouse['bins'][i]['id'] == bin_id) {
+          bin_index = i;
+          break;
         }
 
-
-        control.options[bin_index].selected = true;
+      for (i = 0; i < warehouse['bins'].length; i++) {
+        control.options[i] = new Option(warehouse['bins'][i]['description'], warehouse['bins'][i]['id']);
       }
 
-      $(function() {
-        warehouse_selected(0, 0);
-        document.Form.partnumber.focus();
-      })
-     -->
- </script>
 
- <form method="post" name="Form" action="wh.pl" id="form">
+      control.options[bin_index].selected = true;
+    }
 
-   <table>
-    <tr>
-     <th class="listheading" align="left" valign="top" colspan="6" nowrap>[% 'Filter' | $T8 %]</th>
-    </tr>
+    $(function() {
+      warehouse_selected(0, 0);
+      document.Form.partnumber.focus();
+    })
+   --></script>
 
+<form method="post" name="Form" action="wh.pl" id="form">
+<div class="wrapper">
+
+<table class="tbl-horizontal">
+  <tbody>
     <tr>
-     <td>
-      <table>
-       <tr>
-        <th align="right" nowrap>[% 'Warehouse' | $T8 %]:</th>
-        <td>
-         <select name="warehouse_id" id="warehouse_id" onchange="warehouse_selected(warehouses[this.selectedIndex]['id'], 0)">
-          <option value="">---</option>
-          [%- FOREACH warehouse = WAREHOUSES %]
+      <th>[% 'Warehouse' | $T8 %]:</th>
+      <td>
+      <select name="warehouse_id" id="warehouse_id" onchange="warehouse_selected(warehouses[this.selectedIndex]['id'], 0)" class="wi-normal">
+        <option value="">---</option>
+        [% FOREACH warehouse = WAREHOUSES %]
           <option value="[% HTML.escape(warehouse.id) %]">[% warehouse.description %]</option>
-          [%- END %]
-         </select>
-        </td>
-       </tr>
-       <tr>
-        <th align="right" nowrap>[% 'Bin' | $T8 %]:</th>
-        <td><select name="bin_id" id="bin_id"></select></td>
-       </tr>
-       <tr>
-        <th align="right" nowrap>[% 'Part Number' | $T8 %]:</th>
-        <td><input name="partnumber" id="partnumber" size=20></td>
-       </tr>
-       <tr>
-        <th align="right" nowrap>[% 'Parts Classification' | $T8 %]:</th>
-        <td>[% P.part.select_classification('classification_id') %]</td>
-       </tr>
-       <tr>
-        <th align="right" nowrap>[% 'Part Description' | $T8 %]:</th>
-        <td><input name="description" size=40></td>
-       </tr>
-       <tr>
-        <th align="right" nowrap>[% 'Charge Number' | $T8 %]:</th>
-        <td><input name="chargenumber" size=40></td>
-       </tr>
-       [% IF INSTANCE_CONF.get_show_bestbefore %]
-       <tr>
-        <th align="right" nowrap>[% 'Best Before' | $T8 %]:</th>
-        <td>
-          [% L.date_tag('bestbefore') %]
-        </td>
-       </tr>
-       [% END %]
-       <tr>
-        <th align="right" nowrap>[% 'Transfer Quantity' | $T8 %]:</th>
-        <td>
-         <select name="qty_op">
+        [% END %]
+      </select>
+      </td>
+    </tr>
+    <tr>
+      <th>[% 'Bin' | $T8 %]:</th>
+      <td>
+        <select name="bin_id" id="bin_id" class="wi-normal">
+      </select>
+      </td>
+    </tr>
+    <tr>
+      <th>[% 'Part Number' | $T8 %]:</th>
+      <td><input type="text" name="partnumber" id="partnumber" class="wi-normal">
+      </td>
+    </tr>
+    <tr>
+      <th>[% 'Parts Classification' | $T8 %]:</th>
+      <td>[% P.part.select_classification('classification_id', class='wi-normal') %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Part Description' | $T8 %]:</th>
+      <td><input type="text" name="description" class="wi-normal">
+      </td>
+    </tr>
+    <tr>
+      <th>[% 'Charge Number' | $T8 %]:</th>
+      <td><input type="text" name="chargenumber" class="wi-normal">
+      </td>
+    </tr>
+    [% IF INSTANCE_CONF.get_show_bestbefore %]
+      <tr>
+        <th>[% 'Best Before' | $T8 %]:</th>
+        <td> [% L.date_tag('bestbefore') %] </td>
+      </tr>
+    [% END %]
+    <tr>
+      <th>[% 'Transfer Quantity' | $T8 %]:</th>
+      <td>
+        <select name="qty_op" class="wi-normal">
           <option value="dontcare">---</option>
           <option value="atleast">[% 'At least' | $T8 %]</option>
           <option value="atmost">[% 'At most' | $T8 %]</option>
           <option value="exact">[% 'Exact' | $T8 %]</option>
-         </select>
-         <input name="qty">
-         <select name="qty_unit">
-          [%- FOREACH unit = UNITS %]<option>[% unit.name %]</option>[% END %]
-         </select>
-        </td>
-       </tr>
-       <tr>
-        <th align="right" nowrap>[% 'From Date' | $T8 %]</th>
-        <td>
-          [% L.date_tag('fromdate') %]
-        </td>
-       </tr>
-       <tr>
-        <th align="right">[% 'To Date' | $T8 %]</th>
-        <td>
-          [% L.date_tag('todate') %]
-        </td>
-       </tr>
-      </table>
-     </td>
+        </select>
+        <input name="qty" type="text" class="wi-verysmall">
+        <select name="qty_unit" class="wi-small">
+          [% FOREACH unit = UNITS %]
+            <option>[% unit.name %]</option>
+          [% END %]
+        </select>
+      </td>
     </tr>
-
-    <tr height="5"><td>&nbsp;</td></tr>
-
     <tr>
-     <th class="listheading" align="left" valign="top" colspan="6" nowrap>[% 'Include in Report' | $T8 %]</th>
+      <th>[% 'From Date' | $T8 %]</th>
+      <td> <span class="wi-date">[% L.date_tag('fromdate') %]</span> </td>
     </tr>
-
     <tr>
-     <td>
-      <table>
-       <tr>
-        <td><input name="l_partdescription" id="l_partdescription" class="checkbox" type="hidden" value="Y" checked></td>
-        <td nowrap><label for="l_partdescription">[% 'Part Description' | $T8 %]</label></td>
-        <td><input name="l_qty" id="l_qty" class="checkbox" type="hidden" value="Y" checked></td>
-        <td nowrap><label for="l_qty">[% 'Quantity' | $T8 %]</label></td>
-       </tr>
-       <tr>
-        <td align="right"><input name="l_date" id="l_date" class="checkbox" type="checkbox" value="Y" checked></td>
-        <td nowrap><label for="l_date">[% 'Date' | $T8 %]</label></td>
-        <td align="right"><input name="l_partnumber" id="l_partnumber" class="checkbox" type="checkbox" value="Y" checked></td>
-        <td nowrap><label for="l_partnumber">[% 'Part Number' | $T8 %]</label></td>
-        <td align="right"><input name="l_chargenumber" id="l_chargenumber" class="checkbox" type="checkbox" value="Y" checked></td>
-        <td nowrap><label for="l_chargenumber">[% 'Charge Number' | $T8 %]</label></td>
-        [% IF INSTANCE_CONF.get_show_bestbefore %]
-        <td align="right"><input name="l_bestbefore" id="l_bestbefore" class="checkbox" type="checkbox" value="Y" checked></td>
-        <td nowrap><label for="l_bestbefore">[% 'Best Before' | $T8 %]</label></td>
-        [% END %]
-       </tr>
-       <tr>
-        <td align="right"><input name="l_trans_id" id="l_trans_id" class="checkbox" type="checkbox" value="Y"></td>
-        <td nowrap><label for="l_trans_id">[% 'Trans Id' | $T8 %]</label></td>
-        <td align="right"><input name="l_trans_type" id="l_trans_type" class="checkbox" type="checkbox" value="Y" checked></td>
-        <td nowrap><label for="l_trans_type">[% 'Trans Type' | $T8 %]</label></td>
-        <td align="right"><input name="l_comment" id="l_comment" class="checkbox" type="checkbox" value="Y"></td>
-        <td nowrap><label for="l_comment">[% 'Comment' | $T8 %]</label></td>
-       </tr>
-       <tr>
-        <td align="right"><input name="l_warehouse_from" id="l_warehouse_from" class="checkbox" type="checkbox" value="Y" checked></td>
-        <td nowrap><label for="l_warehouse_from">[% 'Warehouse From' | $T8 %]</label></td>
-        <td align="right"><input name="l_bin_from" id="l_bin_from" class="checkbox" type="checkbox" value="Y" checked></td>
-        <td nowrap><label for="l_bin_from">[% 'Bin From' | $T8 %]</label></td>
-        <td align="right"><input name="l_warehouse_to" id="l_warehouse_to" class="checkbox" type="checkbox" value="Y" checked></td>
-        <td nowrap><label for="l_warehouse_to">[% 'Warehouse To' | $T8 %]</label></td>
-        <td align="right"><input name="l_bin_to" id="l_bin_to" class="checkbox" type="checkbox" value="Y" checked></td>
-        <td nowrap><label for="l_bin_to">[% 'Bin To' | $T8 %]</label></td>
-       </tr>
-       <tr>
-        <td align="right"><input name="l_employee" id="l_employee" class="checkbox" type="checkbox" value="Y"></td>
-        <td nowrap><label for="l_employee">[% 'Employee' | $T8 %]</label></td>
-        <td align="right"><input name="l_oe_id" id="l_oe_id" class="checkbox" type="checkbox" value="Y"></td>
-        <td nowrap><label for="l_oe_id">[% 'Document' | $T8 %]</label></td>
-        <td align="right"><input name="l_projectnumber" id="l_projectnumber" class="checkbox" type="checkbox" value="Y" checked></td>
-        <td nowrap><label for="l_projectnumber">[% 'Project Number' | $T8 %]</label></td>
-       </tr>
-      </table>
-     </td>
+      <th>[% 'To Date' | $T8 %]</th>
+      <td> <span class="wi-date">[% L.date_tag('todate') %]</span> </td>
     </tr>
-   </table>
- </form>
+  </tbody>
+</table>
+
+</div><!-- /.wrapper -->
+
+<div class="form-addition control-panel">
+<h3>[% 'Include in Report' | $T8 %]</h3>
+
+<div class="col list">
+<h4>[% 'Article data' | $T8 %]</h4>
+  <div>
+    <input name="l_partdescription" id="l_partdescription" type="checkbox" value="Y" checked>
+    <label for="l_partdescription">[% 'Part Description' | $T8 %]</label>
+  </div>
+  <div>
+    <input name="l_partnumber" id="l_partnumber" type="checkbox" value="Y" checked>
+    <label for="l_partnumber">[% 'Part Number' | $T8 %]</label>
+  </div>
+  <div>
+    <input name="l_chargenumber" id="l_chargenumber" type="checkbox" value="Y" checked>
+    <label for="l_chargenumber">[% 'Charge Number' | $T8 %]</label>
+  </div>
+  <div>
+    <input name="l_qty" id="l_qty" type="checkbox" value="Y" checked>
+    <label for="l_qty">[% 'Quantity' | $T8 %]</label>
+  </div>
+</div>
+
+<div class="col list">
+<h4>[% 'Storage' | $T8 %]</h4>
+  <div>
+    <input name="l_warehouse_from" id="l_warehouse_from" type="checkbox" value="Y" checked>
+    <label for="l_warehouse_from">[% 'Warehouse From' | $T8 %]</label>
+  </div>
+  <div>
+    <input name="l_bin_from" id="l_bin_from" type="checkbox" value="Y" checked>
+    <label for="l_bin_from">[% 'Bin From' | $T8 %]</label>
+  </div>
+  <div>
+    <input name="l_warehouse_to" id="l_warehouse_to" type="checkbox" value="Y" checked>
+    <label for="l_warehouse_to">[% 'Warehouse To' | $T8 %]</label>
+  </div>
+  <div>
+    <input name="l_bin_to" id="l_bin_to" type="checkbox" value="Y" checked>
+    <label for="l_bin_to">[% 'Bin To' | $T8 %]</label>
+  </div>
+</div>
+
+<div class="col list">
+<h4>[% 'Miscellaneous' | $T8 %]</h4>
+  <div>
+    <input name="l_date" id="l_date" type="checkbox" value="Y" checked>
+    <label for="l_date">[% 'Date' | $T8 %]</label>
+  </div>
+  [% IF INSTANCE_CONF.get_show_bestbefore %]
+    <div>
+      <input name="l_bestbefore" id="l_bestbefore" type="checkbox" value="Y" checked>
+      <label for="l_bestbefore">[% 'Best Before' | $T8 %]</label>
+    </div>
+  [% END %]
+  <div>
+    <input name="l_trans_id" id="l_trans_id" type="checkbox" value="Y">
+    <label for="l_trans_id">[% 'Trans Id' | $T8 %]</label>
+  </div>
+  <div>
+    <input name="l_trans_type" id="l_trans_type" type="checkbox" value="Y" checked>
+    <label for="l_trans_type">[% 'Trans Type' | $T8 %]</label>
+  </div>
+  <div>
+    <input name="l_comment" id="l_comment" type="checkbox" value="Y">
+    <label for="l_comment">[% 'Comment' | $T8 %]</label>
+  </div>
+  <div>
+    <input name="l_employee" id="l_employee" type="checkbox" value="Y">
+    <label for="l_employee">[% 'Employee' | $T8 %]</label>
+  </div>
+  <div>
+    <input name="l_oe_id" id="l_oe_id" type="checkbox" value="Y">
+    <label for="l_oe_id">[% 'Document' | $T8 %]</label>
+  </div>
+  <div>
+    <input name="l_projectnumber" id="l_projectnumber" type="checkbox" value="Y" checked>
+    <label for="l_projectnumber">[% 'Project Number' | $T8 %]</label>
+  </div>
+</div>
+
+</div><!-- /.form-addition -->
+
+
+</form>
diff --git a/templates/webpages/wh/removal_parts_selection.html b/templates/webpages/wh/removal_parts_selection.html
index edc45d369..7baec1be9 100644
--- a/templates/webpages/wh/removal_parts_selection.html
+++ b/templates/webpages/wh/removal_parts_selection.html
@@ -1,5 +1,7 @@
-[%- USE T8 %]
-[%- USE HTML %][%- USE JavaScript %]
+[% USE T8 %]
+[% USE HTML %]
+[% USE JavaScript %]
+
 <h1>[% title %]</h1>
 
  <form method="post" action="wh.pl" id="form">
@@ -8,39 +10,34 @@
 
   <p>[% 'Removal from warehouse' | $T8 %]: [% warehouse_description %]</p>
 
-  <p>
    <table>
     <tr>
      <td>[% 'Select type of removal' | $T8 %]:</td>
      <td>
       <select name="transfer_type_id">
-       [%- FOREACH type = TRANSFER_TYPES %]<option value="[% HTML.escape(type.id) %]">[% HTML.escape(type.description) %]</option>[% END %]
+       [% FOREACH type = TRANSFER_TYPES %]<option value="[% HTML.escape(type.id) %]">[% HTML.escape(type.description) %]</option>[% END %]
       </select>
      </td>
     </tr>
-
     <tr>
      <td>[% 'Optional comment' | $T8 %]:</td>
-     <td><input name="comment" size="60"></td>
+     <td><input type="text" name="comment" size="60"></td>
     </tr>
    </table>
-  </p>
 
-  <p>
    <table>
     <tr>
-     <th class="listheading">[% 'Bin' | $T8 %]</th>
-     <th class="listheading">[% 'Part Number' | $T8 %]</th>
-     <th class="listheading">[% 'Part Description' | $T8 %]</th>
-     <th class="listheading">[% 'Charge Number' | $T8 %]</th>
+     <th>[% 'Bin' | $T8 %]</th>
+     <th>[% 'Part Number' | $T8 %]</th>
+     <th>[% 'Part Description' | $T8 %]</th>
+     <th>[% 'Charge Number' | $T8 %]</th>
      [% IF INSTANCE_CONF.get_show_bestbefore %]
-     <th class="listheading">[% 'Best Before' | $T8 %]</th>
+     <th>[% 'Best Before' | $T8 %]</th>
      [% END %]
-     <th class="listheading">[% 'EAN' | $T8 %]</th>
-     <th class="listheading">[% 'Available qty' | $T8 %]</th>
-     <th class="listheading">[% 'Removal qty' | $T8 %]</th>
+     <th>[% 'EAN' | $T8 %]</th>
+     <th>[% 'Available qty' | $T8 %]</th>
+     <th>[% 'Removal qty' | $T8 %]</th>
     </tr>
-
     [% FOREACH row = CONTENTS %]
     <tr class="listrow[% loop.count % 2 %]">
      <input type="hidden" name="src_bin_id_[% loop.count %]" value="[% HTML.escape(row.binid) %]">
@@ -62,19 +59,14 @@
      <td>[% HTML.escape(row.ean) %]</td>
      <td>[% HTML.escape(row.qty) %]</td>
      <td>
-      <input name="qty_[% loop.count %]">
+      <input type="text" name="qty_[% loop.count %]">
       <select name="unit_[% loop.count %]">
        [% FOREACH unit = row.UNITS %]<option[% IF unit.selected %] selected[% END %]>[% HTML.escape(unit.name) %]</option>[% END %]
       </select>
      </td>
     </tr>
-
     [% END %]
-
     <input type="hidden" name="rowcount" value="[% CONTENTS.size %]">
-
     <tr><td colspan="7"><hr size="3" noshade></td></tr>
-
    </table>
-  </p>
  </form>
diff --git a/templates/webpages/wh/report_filter.html b/templates/webpages/wh/report_filter.html
index ada16af64..401ded2eb 100644
--- a/templates/webpages/wh/report_filter.html
+++ b/templates/webpages/wh/report_filter.html
@@ -1,195 +1,185 @@
-[%- USE T8 %]
-[%- USE L %]
-[%- USE P %]
-[%- USE HTML %][%- USE JavaScript %]
+[% USE T8 %]
+[% USE L %]
+[% USE P %]
+[% USE HTML %]
+[% USE JavaScript %]
+
 <h1>[% 'Report about warehouse contents' | $T8 %]</h1>
 
- <script type="text/javascript">
-   <!--
-      warehouses = new Array();
-      warehouses[0] = new Array();
-      warehouses[0]['id'] = "0";
-      warehouses[0]['bins'] = new Array();
-      warehouses[0]['bins'][0] = new Array();
-      warehouses[0]['bins'][0]['description'] = "---";
-      warehouses[0]['bins'][0]['id'] = "";
-      [%- USE WAREHOUSES_it = Iterator(WAREHOUSES) %][%- FOREACH warehouse = WAREHOUSES_it %]
-      warehouses[[% WAREHOUSES_it.count %]] = new Array();
-      warehouses[[% WAREHOUSES_it.count %]]['id'] = [% warehouse.id %];
-      warehouses[[% WAREHOUSES_it.count %]]['bins'] = new Array();
-      warehouses[[% WAREHOUSES_it.count %]]['bins'][0] = new Array();
-      warehouses[[% WAREHOUSES_it.count %]]['bins'][0]['description'] = "---";
-      warehouses[[% WAREHOUSES_it.count %]]['bins'][0]['id'] = "";
-      [% USE BINS_it = Iterator(warehouse.BINS) %][% FOREACH bin = BINS_it %]
+<script type="text/javascript"><!--
+  warehouses = new Array();
+  warehouses[0] = new Array();
+  warehouses[0]['id'] = "0";
+  warehouses[0]['bins'] = new Array();
+  warehouses[0]['bins'][0] = new Array();
+  warehouses[0]['bins'][0]['description'] = "---";
+  warehouses[0]['bins'][0]['id'] = "";
+  [%- USE WAREHOUSES_it = Iterator(WAREHOUSES) %]
+  [%- FOREACH warehouse = WAREHOUSES_it %]
+    warehouses[[% WAREHOUSES_it.count %]] = new Array();
+    warehouses[[% WAREHOUSES_it.count %]]['id'] = [% warehouse.id %];
+    warehouses[[% WAREHOUSES_it.count %]]['bins'] = new Array();
+    warehouses[[% WAREHOUSES_it.count %]]['bins'][0] = new Array();
+    warehouses[[% WAREHOUSES_it.count %]]['bins'][0]['description'] = "---";
+    warehouses[[% WAREHOUSES_it.count %]]['bins'][0]['id'] = "";
+    [% USE BINS_it = Iterator(warehouse.BINS) %]
+    [% FOREACH bin = BINS_it %]
       warehouses[[% WAREHOUSES_it.count %]]['bins'][[% BINS_it.count %]] = new Array();
       warehouses[[% WAREHOUSES_it.count %]]['bins'][[% BINS_it.count %]]['description'] = "[% JavaScript.escape(bin.description) %]";
       warehouses[[% WAREHOUSES_it.count %]]['bins'][[% BINS_it.count %]]['id'] = [% bin.id %];
-      [% END %]
-      [% END %]
+    [% END %]
+  [% END %]
 
-      function warehouse_selected(warehouse_id, bin_id) {
-        var control = document.getElementById("bin_id");
+  function warehouse_selected(warehouse_id, bin_id) {
+    var control = document.getElementById("bin_id");
 
-        for (var i = control.options.length - 1; i >= 0; i--) {
-          control.options[i] = null;
-        }
+    for (var i = control.options.length - 1; i >= 0; i--) {
+      control.options[i] = null;
+    }
 
-        var warehouse_index = 0;
+    var warehouse_index = 0;
 
-        for (i = 0; i < warehouses.length; i++)
-          if (warehouses[i]['id'] == warehouse_id) {
-            warehouse_index = i;
-            break;
-          }
+    for (i = 0; i < warehouses.length; i++)
+      if (warehouses[i]['id'] == warehouse_id) {
+        warehouse_index = i;
+        break;
+      }
 
-        var warehouse = warehouses[warehouse_index];
-        var bin_index = 0;
+    var warehouse = warehouses[warehouse_index];
+    var bin_index = 0;
 
-        for (i = 0; i < warehouse['bins'].length; i++)
-          if (warehouse['bins'][i]['id'] == bin_id) {
-            bin_index = i;
-            break;
-          }
+    for (i = 0; i < warehouse['bins'].length; i++)
+      if (warehouse['bins'][i]['id'] == bin_id) {
+        bin_index = i;
+        break;
+      }
 
-        for (i = 0; i < warehouse['bins'].length; i++) {
-          control.options[i] = new Option(warehouse['bins'][i]['description'], warehouse['bins'][i]['id']);
-        }
+    for (i = 0; i < warehouse['bins'].length; i++) {
+      control.options[i] = new Option(warehouse['bins'][i]['description'], warehouse['bins'][i]['id']);
+    }
 
 
-        control.options[bin_index].selected = true;
-      }
+    control.options[bin_index].selected = true;
+  }
+
+  $(function () {
+    warehouse_selected(0, 0);
+    document.Form.partnumber.focus();
+  });
 
-      $(function () {
-        warehouse_selected(0, 0);
-        document.Form.partnumber.focus();
-      });
-     -->
- </script>
+--></script>
 
- <form method="post" name="Form" action="wh.pl" id="form">
+<form method="post" name="Form" action="wh.pl" id="form">
+<div class="wrapper">
 
-  <input type="hidden" name="nextsub" value="generate_report">
+<input type="hidden" name="nextsub" value="generate_report">
 
-   <table>
+<table class="tbl-horizontal">
+  <tbody>
     <tr>
-     <th class="listheading" align="left" valign="top" colspan="6" nowrap>[% 'Filter' | $T8 %]</th>
+      <th>[% 'Warehouse' | $T8 %]:</th>
+      <td>
+      <select name="warehouse_id" id="warehouse_id" onchange="warehouse_selected(warehouses[this.selectedIndex]['id'], 0)" class="wi-normal">
+        <option value="">---</option>
+        [% FOREACH warehouse = WAREHOUSES %]
+        <option value="[% HTML.escape(warehouse.id) %]">[% warehouse.description %]</option>
+        [% END %]
+      </select>
+      </td>
     </tr>
-
     <tr>
-     <td>
-      <table>
-       <tr>
-        <th align="right" nowrap>[% 'Warehouse' | $T8 %]:</th>
-        <td>
-         <select name="warehouse_id" id="warehouse_id" onchange="warehouse_selected(warehouses[this.selectedIndex]['id'], 0)">
-          <option value="">---</option>
-          [%- FOREACH warehouse = WAREHOUSES %]
-          <option value="[% HTML.escape(warehouse.id) %]">[% warehouse.description %]</option>
-          [%- END %]
-         </select>
-        </td>
-       </tr>
-       <tr>
-        <th align="right" nowrap>[% 'Bin' | $T8 %]:</th>
-        <td><select name="bin_id" id="bin_id"></select></td>
-       </tr>
-       <tr>
-        <th align="right" nowrap>[% 'Part Number' | $T8 %]:</th>
-        <td><input name="partnumber" size=20></td>
-       </tr>
-       <tr>
-        <th align="right" nowrap>[% 'Parts Classification' | $T8 %]:</th>
-        <td>[% P.part.select_classification('classification_id') %]</td>
-       </tr>
-       <tr>
-        <th align="right" nowrap>[% 'Part Description' | $T8 %]:</th>
-        <td><input name="description" size=40></td>
-       </tr>
-       <tr>
-        <th align="right" nowrap>[% 'Charge Number' | $T8 %]:</th>
-        <td><input name="chargenumber" size=40></td>
-       </tr>
-       [% IF INSTANCE_CONF.get_show_bestbefore %]
-       <tr>
-        <th align="right" nowrap>[% 'Best Before' | $T8 %]:</th>
-        <td>
-          [% L.date_tag('bestbefore') %]
-        </td>
-       </tr>
-       [% END %]
-       <tr>
-        <th align="right" nowrap>[% 'Qty in stock' | $T8 %]:</th>
-        <td>
-         <select name="qty_op">
-          <option value="dontcare">---</option>
-          <option value="atleast">[% 'At least' | $T8 %]</option>
-          <option value="atmost">[% 'At most' | $T8 %]</option>
-          <option value="exact">[% 'Exact' | $T8 %]</option>
-         </select>
-         <input name="qty">
-         <select name="qty_unit">
-          [%- FOREACH unit = UNITS %]<option>[% unit.name %]</option>[% END %]
-         </select>
-        </td>
-       </tr>
-       <tr>
-        <th align="right" nowrap>[% 'Stock Qty for Date' | $T8 %]:</th>
-        <td>[% L.date_tag('date') %]</td>
-       </tr>
-      </table>
-     </td>
+      <th>[% 'Bin' | $T8 %]:</th>
+      <td>
+      <select name="bin_id" id="bin_id" class="wi-normal">
+      </select>
+      </td>
     </tr>
-
-    <tr height="5"><td>&nbsp;</td></tr>
-
     <tr>
-     <th class="listheading" align="left" valign="top" colspan="6" nowrap>[% 'Include in Report' | $T8 %]</th>
+      <th>[% 'Part Number' | $T8 %]:</th>
+      <td><input type="text" name="partnumber" class="wi-normal">
+      </td>
     </tr>
-
     <tr>
-     <td>
-      <input name="l_partdescription" type="hidden" value="Y">
-      <input name="l_qty" type="hidden" value="Y">
-
-      <table>
-       <tr>
-        <td align="right"><input name="l_warehousedescription" id="l_warehousedescription" class="checkbox" type="checkbox" value="Y" checked></td>
-        <td nowrap><label for="l_warehousedescription">[% 'Warehouse' | $T8 %]</label></td>
-        <td align="right"><input name="l_bindescription" id="l_bindescription" class="checkbox" type="checkbox" value="Y" checked></td>
-        <td nowrap><label for="l_bindescription">[% 'Bin' | $T8 %]</label></td>
-       </tr>
-
-       <tr>
-        <td align="right"><input name="l_partnumber" id="l_partnumber" class="checkbox" type="checkbox" value="Y" checked></td>
-        <td nowrap><label for="l_partnumber">[% 'Part Number' | $T8 %]</label></td>
-        <td align="right"><input name="l_chargenumber" id="l_chargenumber" class="checkbox" type="checkbox" value="Y" checked></td>
-        <td nowrap><label for="l_chargenumber">[% 'Charge Number' | $T8 %]</label></td>
-        [% IF INSTANCE_CONF.get_show_bestbefore %]
-        <td align="right"><input name="l_bestbefore" id="l_bestbefore" class="checkbox" type="checkbox" value="Y" checked></td>
-        <td nowrap><label for="l_bestbefore">[% 'Best Before' | $T8 %]</label></td>
+      <th>[% 'Parts Classification' | $T8 %]:</th>
+      <td>[% P.part.select_classification('classification_id', class='wi-normal') %]</td>
+    </tr>
+    <tr>
+      <th>[% 'Part Description' | $T8 %]:</th>
+      <td><input type="text" name="description" class="wi-normal">
+      </td>
+    </tr>
+    <tr>
+      <th>[% 'Charge Number' | $T8 %]:</th>
+      <td><input type="text" name="chargenumber" class="wi-normal">
+      </td>
+    </tr>
+    [% IF INSTANCE_CONF.get_show_bestbefore %]
+    <tr>
+      <th>[% 'Best Before' | $T8 %]:</th>
+      <td><span class="wi-date">[% L.date_tag('bestbefore') %]</span></td>
+    </tr>
+    [% END %]
+    <tr>
+      <th>[% 'Qty in stock' | $T8 %]:</th>
+      <td>
+      <select name="qty_op" class="wi-normal">
+        <option value="dontcare">---</option>
+        <option value="atleast">[% 'At least' | $T8 %]</option>
+        <option value="atmost">[% 'At most' | $T8 %]</option>
+        <option value="exact">[% 'Exact' | $T8 %]</option>
+      </select>
+      <input type="text" name="qty" class="wi-verysmall">
+      <select name="qty_unit" class="wi-small">
+        [% FOREACH unit = UNITS %]
+          <option>[% unit.name %]</option>
         [% END %]
-       </tr>
-
-       <tr><td colspan="4"><hr noshade height="1"></td></tr>
-
-       <tr>
-        <td align="right"><input name="subtotal" id="subtotal" class="checkbox" type="checkbox" value="Y"></td>
-        <td nowrap><label for="subtotal">[% 'Subtotal' | $T8 %]</label></td>
-        <td align="right"><input name="include_empty_bins" id="include_empty_bins" class="checkbox" type="checkbox" value="Y"></td>
-        <td nowrap><label for="include_empty_bins">[% 'Include empty bins' | $T8 %]</label></td>
-        <td align="right"><input name="include_invalid_warehouses" id="include_invalid_warehouses" class="checkbox" type="checkbox" value="Y"></td>
-        <td nowrap><label for="include_invalid_warehouses">[% 'Include invalid warehouses ' | $T8 %]</label></td>
-       </tr>
-
-       <tr>
-        <td align="right"><input name="l_stock_value" id="l_stock_value" class="checkbox" type="checkbox" value="Y"></td>
-        <td nowrap><label for="l_stock_value">[% 'Stock value' | $T8 %]</label></td>
-        <td align="right"><input name="l_purchase_price" id="l_purchase_price" class="checkbox" type="checkbox" value="Y"></td>
-        <td nowrap><label for="l_purchase_price">[% 'Purchase price' | $T8 %]</label></td>
-       </tr>
-
-      </table>
-     </td>
+      </select>
+      </td>
+    </tr>
+    <tr>
+      <th>[% 'Stock Qty for Date' | $T8 %]:</th>
+      <td><span class="wi-date">[% L.date_tag('date') %]</span></td>
     </tr>
-   </table>
- </form>
+  </tbody>
+</table>
+
+</div><!-- /.wrapper -->
+
+<div class="form-addition control-panel">
+  <h3>[% 'Include in Report' | $T8 %]</h3>
+  <input name="l_partdescription" type="hidden" value="Y">
+  <input name="l_qty" type="hidden" value="Y">
+
+  <div class="list col">
+    <h4>[% 'Store & Articles' | $T8 %]</h4>
+    <input name="l_warehousedescription" id="l_warehousedescription" type="checkbox" value="Y" checked>
+    <label for="l_warehousedescription">[% 'Warehouse' | $T8 %]</label>
+    <input name="l_bindescription" id="l_bindescription" type="checkbox" value="Y" checked>
+    <label for="l_bindescription">[% 'Bin' | $T8 %]</label>
+    <input name="l_partnumber" id="l_partnumber" type="checkbox" value="Y" checked>
+    <label for="l_partnumber">[% 'Part Number' | $T8 %]</label>
+    <input name="l_chargenumber" id="l_chargenumber" type="checkbox" value="Y" checked>
+    <label for="l_chargenumber">[% 'Charge Number' | $T8 %]</label>
+  </div>
+  <div class="list col">
+    <h4>[% 'Options' | $T8 %]</h4>
+    [% IF INSTANCE_CONF.get_show_bestbefore %] <input name="l_bestbefore" id="l_bestbefore" type="checkbox" value="Y" checked>
+    <label for="l_bestbefore">[% 'Best Before' | $T8 %]</label>
+    [% END %] <input name="subtotal" id="subtotal" type="checkbox" value="Y">
+    <label for="subtotal">[% 'Subtotal' | $T8 %]</label>
+    <input name="include_empty_bins" id="include_empty_bins" type="checkbox" value="Y">
+    <label for="include_empty_bins">[% 'Include empty bins' | $T8 %]</label>
+    <input name="include_invalid_warehouses" id="include_invalid_warehouses" type="checkbox" value="Y">
+    <label for="include_invalid_warehouses">[% 'Include invalid warehouses ' | $T8 %]</label>
+  </div>
+  <div class="list col">
+    <h4>[% 'Values & Prices' | $T8 %]</h4>
+    <input name="l_stock_value" id="l_stock_value" type="checkbox" value="Y">
+    <label for="l_stock_value">[% 'Stock value' | $T8 %]</label>
+    <input name="l_purchase_price" id="l_purchase_price" type="checkbox" value="Y">
+    <label for="l_purchase_price">[% 'Purchase price' | $T8 %]</label>
+  </div>
+</div>
+<!-- /.form-addition -->
+
+</form>
diff --git a/templates/webpages/wh/transfer_parts_selection.html b/templates/webpages/wh/transfer_parts_selection.html
index 245da8b05..dd65c86e9 100644
--- a/templates/webpages/wh/transfer_parts_selection.html
+++ b/templates/webpages/wh/transfer_parts_selection.html
@@ -1,122 +1,133 @@
-[%- USE T8 %]
-[%- USE HTML %][%- USE JavaScript %]
+[% USE T8 %]
+[% USE HTML %]
+[% USE JavaScript %]
+
 <h1>[% title %]</h1>
 
- <script type="text/javascript">
-  <!--
-      warehouses = new Array();
-      [% USE WAREHOUSES_it = Iterator(WAREHOUSES) %][% FOREACH wh = WAREHOUSES_it %]
-      warehouses[[% WAREHOUSES_it.count - 1 %]] = new Array();
-      [% USE BINS_it = Iterator(wh.BINS) %][% FOREACH bin = BINS_it %]warehouses[[% WAREHOUSES_it.count - 1 %]][[% BINS_it.count - 1 %]] = ["[% JavaScript.escape(bin.description) %]", "[% JavaScript.escape(bin.id) %]"];
-      [% END %]
-      [% END %]
+<script type="text/javascript"><!--
+  warehouses = new Array();
+  [% USE WAREHOUSES_it = Iterator(WAREHOUSES) %]
+  [% FOREACH wh = WAREHOUSES_it %]
+    warehouses[[% WAREHOUSES_it.count - 1 %]] = new Array();
+    [% USE BINS_it = Iterator(wh.BINS) %]
+    [% FOREACH bin = BINS_it %]
+      warehouses[[% WAREHOUSES_it.count - 1 %]][[% BINS_it.count - 1 %]] = ["[% JavaScript.escape(bin.description) %]", "[% JavaScript.escape(bin.id) %]"];
+    [% END %]
+  [% END %]
 
-      function warehouse_selected(row, index) {
-        var cname = "dst_bin_id_" + row;
-        var control = document.getElementById(cname);
+  function warehouse_selected(row, index) {
+    var cname = "dst_bin_id_" + row;
+    var control = document.getElementById(cname);
 
-        for (var i = control.options.length - 1; i >= 0; i--) {
-          control.options[i] = null;
-        }
+    for (var i = control.options.length - 1; i >= 0; i--) {
+      control.options[i] = null;
+    }
 
-        for (i = 0; i < warehouses[index].length; i++) {
-          control.options[i] = new Option(warehouses[index][i][0], warehouses[index][i][1]);
-        }
+    for (i = 0; i < warehouses[index].length; i++) {
+      control.options[i] = new Option(warehouses[index][i][0], warehouses[index][i][1]);
+    }
 
-        control.options[0].selected = true;
-      }
+    control.options[0].selected = true;
+  }
 
-      $(function() {
-        [% FOREACH row = CONTENTS %]
-        warehouse_selected([% loop.count %], [% initial_warehouse_idx %]);
-        [% END %]
-      });
-    -->
- </script>
+  $(function() {
+    [% FOREACH row = CONTENTS %]
+    warehouse_selected([% loop.count %], [% initial_warehouse_idx %]);
+    [% END %]
+  });
+--></script>
 
- <form method="post" action="wh.pl" id="form">
+<form method="post" action="wh.pl" id="form">
 
-  <input type="hidden" name="warehouse_id" value="[% HTML.escape(warehouse_id) %]">
+<input type="hidden" name="warehouse_id" value="[% HTML.escape(warehouse_id) %]">
 
-  <p>[% 'Transfer from warehouse' | $T8 %]: [% warehouse_description %]</p>
+<p>[% 'Transfer from warehouse' | $T8 %]: [% warehouse_description %]</p>
 
-  <p>
-   <table>
+<table class="tbl-horizontal">
+  <tbody>
     <tr>
-     <td>[% 'Select type of transfer' | $T8 %]:</td>
-     <td>
-      <select name="transfer_type_id">
-       [%- FOREACH type = TRANSFER_TYPES %]<option value="[% HTML.escape(type.id) %]">[% type.description %]</option>[% END %]
-      </select>
-     </td>
+      <th>[% 'Select type of transfer' | $T8 %]:</th>
+      <td>
+        <select name="transfer_type_id">
+          [% FOREACH type = TRANSFER_TYPES %]
+           <option value="[% HTML.escape(type.id) %]">[% type.description %]</option>
+          [% END %]
+        </select>
+      </td>
     </tr>
-
     <tr>
-     <td>[% 'Optional comment' | $T8 %]:</td>
-     <td><input name="comment" size="20"></td>
+      <th>[% 'Optional comment' | $T8 %]:</th>
+      <td><input type="text" name="comment" size="20"></td>
     </tr>
     <tr>
-     <td>[% 'Change default bin for this parts' | $T8 %]:</td>
-    <td><input type="checkbox" name="change_default_bin"<td>
+      <td>[% 'Change default bin for this parts' | $T8 %]:</th>
+      <td><input type="checkbox" name="change_default_bin"><td>
     </tr>
-   </table>
-  </p>
+  </tbody>
+</table>
 
-  <p>
-   <table>
+<table class="tbl-list">
+  <thead>
     <tr>
-     <th class="listheading">[% 'Source bin' | $T8 %]</th>
-     <th class="listheading">[% 'Part Number' | $T8 %]</th>
-     <th class="listheading">[% 'Part Description' | $T8 %]</th>
-     <th class="listheading">[% 'Charge Number' | $T8 %]</th>
-     [% IF INSTANCE_CONF.get_show_bestbefore %]
-     <th class="listheading">[% 'Best Before' | $T8 %]</th>
-     [% END %]
-     <th class="listheading">[% 'EAN' | $T8 %]</th>
-     <th class="listheading">[% 'Available qty' | $T8 %]</th>
-     <th class="listheading" colspan="2">[% 'Transfer qty' | $T8 %]</th>
-     <th class="listheading" colspan="2">[% 'Destination warehouse and bin' | $T8 %]</th>
+      <th>[% 'Source bin' | $T8 %]</th>
+      <th>[% 'Part Number' | $T8 %]</th>
+      <th>[% 'Part Description' | $T8 %]</th>
+      <th>[% 'Charge Number' | $T8 %]</th>
+      [% IF INSTANCE_CONF.get_show_bestbefore %]
+      <th>[% 'Best Before' | $T8 %]</th>
+      [% END %]
+      <th>[% 'EAN' | $T8 %]</th>
+      <th>[% 'Available qty' | $T8 %]</th>
+      <th colspan="2">[% 'Transfer qty' | $T8 %]</th>
+      <th colspan="2">[% 'Destination warehouse and bin' | $T8 %]</th>
     </tr>
-
+  </thead>
+  <tbody>
     [% FOREACH row = CONTENTS %]
-    <tr class="listrow[% loop.count % 2 %]">
-     <input type="hidden" name="src_bin_id_[% loop.count %]" value="[% HTML.escape(row.binid) %]">
-     <input type="hidden" name="parts_id_[% loop.count %]" value="[% HTML.escape(row.parts_id) %]">
-     <input type="hidden" name="partnumber_[% loop.count %]" value="[% HTML.escape(row.partnumber) %]">
-     <input type="hidden" name="partdescription_[% loop.count %]" value="[% HTML.escape(row.partdescription) %]">
-     <input type="hidden" name="chargenumber_[% loop.count %]" value="[% HTML.escape(row.chargenumber) %]">
-     [% IF INSTANCE_CONF.get_show_bestbefore %]
-     <input type="hidden" name="bestbefore_[% loop.count %]" value="[% HTML.escape(row.bestbefore) %]">
-     [% END %]
-     <input type="hidden" name="ean_[% loop.count %]" value="[% HTML.escape(row.ean) %]">
-     <td>[% HTML.escape(row.bindescription) %]</td>
-     <td>[% HTML.escape(row.partnumber) %]</td>
-     <td>[% HTML.escape(row.partdescription) %]</td>
-     <td>[% HTML.escape(row.chargenumber) %]</td>
-     [% IF INSTANCE_CONF.get_show_bestbefore %]
-     <td>[% HTML.escape(row.bestbefore) %]</td>
-     [% END %]
-     <td>[% HTML.escape(row.ean) %]</td>
-     <td>[% HTML.escape(row.qty) %]</td>
-     <td><input name="qty_[% loop.count %]" size="8" style="text-align: right"></td>
-     <td>
-      <select name="unit_[% loop.count %]">
-       [% FOREACH unit = row.UNITS %]<option[% IF unit.selected %] selected[% END %]>[% HTML.escape(unit.name) %]</option>[% END %]
-      </select>
-     </td>
-
-     <td>
-      <select name="dst_warehouse_id_[% loop.count %]" onchange="warehouse_selected([% loop.count %], this.selectedIndex)">
-       [% FOREACH wh = WAREHOUSES %]<option value="[% HTML.escape(wh.id) %]"[% IF wh.selected %] selected[% END %]>[% HTML.escape(wh.description) %]</option>[% END %]
-      </select>
-     </td>
-     <td><select id="dst_bin_id_[% loop.count %]" name="dst_bin_id_[% loop.count %]"></select></td>
-    </tr>
-
+      <tr>
+        <td>
+          <input type="hidden" name="src_bin_id_[% loop.count %]" value="[% HTML.escape(row.binid) %]">
+          <input type="hidden" name="parts_id_[% loop.count %]" value="[% HTML.escape(row.parts_id) %]">
+          <input type="hidden" name="partnumber_[% loop.count %]" value="[% HTML.escape(row.partnumber) %]">
+          <input type="hidden" name="partdescription_[% loop.count %]" value="[% HTML.escape(row.partdescription) %]">
+          <input type="hidden" name="chargenumber_[% loop.count %]" value="[% HTML.escape(row.chargenumber) %]">
+          [% IF INSTANCE_CONF.get_show_bestbefore %]
+            <input type="hidden" name="bestbefore_[% loop.count %]" value="[% HTML.escape(row.bestbefore) %]">
+          [% END %]
+          <input type="hidden" name="ean_[% loop.count %]" value="[% HTML.escape(row.ean) %]">
+          [% HTML.escape(row.bindescription) %]
+        </td>
+        <td>[% HTML.escape(row.partnumber) %]</td>
+        <td>[% HTML.escape(row.partdescription) %]</td>
+        <td>[% HTML.escape(row.chargenumber) %]</td>
+        [% IF INSTANCE_CONF.get_show_bestbefore %]
+          <td>[% HTML.escape(row.bestbefore) %]</td>
+        [% END %]
+        <td>[% HTML.escape(row.ean) %]</td>
+        <td>[% HTML.escape(row.qty) %]</td>
+        <td><input type="text" name="qty_[% loop.count %]" size="8" style="text-align: right"></td>
+        <td>
+          <select name="unit_[% loop.count %]">
+            [% FOREACH unit = row.UNITS %]
+              <option[% IF unit.selected %] selected[% END %]>[% HTML.escape(unit.name) %]</option>
+            [% END %]
+          </select>
+        </td>
+        <td>
+          <select name="dst_warehouse_id_[% loop.count %]" onchange="warehouse_selected([% loop.count %], this.selectedIndex)">
+            [% FOREACH wh = WAREHOUSES %]
+              <option value="[% HTML.escape(wh.id) %]" [% if wh.selected %] selected[% end %]>[% HTML.escape(wh.description) %]</option>
+            [% END %]
+          </select>
+        </td>
+        <td>
+          <select id="dst_bin_id_[% loop.count %]" name="dst_bin_id_[% loop.count %]"></select>
+        </td>
+      </tr>
     [% END %]
+  </tbody>
+</table>
 
-    <input type="hidden" name="rowcount" value="[% CONTENTS.size %]">
+<input type="hidden" name="rowcount" value="[% CONTENTS.size %]">
 
-   </table>
-  </p>
- </form>
+</form>
diff --git a/templates/webpages/wh/warehouse_selection.html b/templates/webpages/wh/warehouse_selection.html
index 5bfdad940..994cb3340 100644
--- a/templates/webpages/wh/warehouse_selection.html
+++ b/templates/webpages/wh/warehouse_selection.html
@@ -1,123 +1,118 @@
-[%- USE T8 %]
-[%- USE HTML %]
-[%- USE L %]
-[%- USE JavaScript %][%- USE P -%]
+[% USE T8 %]
+[% USE HTML %]
+[% USE L %]
+[% USE JavaScript %]
+[% USE P %]
+
 <h1>[% title %]</h1>
 
- <script type="text/javascript">
-   <!--
-      warehouses = new Array();
-      [%- USE WAREHOUSES_it = Iterator(WAREHOUSES) %][%- FOREACH warehouse = WAREHOUSES_it %]
-      warehouses[[% WAREHOUSES_it.count - 1 %]] = new Array();
-      warehouses[[% WAREHOUSES_it.count - 1 %]]['id'] = [% warehouse.id %];
-      warehouses[[% WAREHOUSES_it.count - 1 %]]['bins'] = new Array();
-      warehouses[[% WAREHOUSES_it.count - 1 %]]['bins'][0] = new Array();
-      warehouses[[% WAREHOUSES_it.count - 1 %]]['bins'][0]['description'] = "---";
-      warehouses[[% WAREHOUSES_it.count - 1 %]]['bins'][0]['id'] = "";
-      [% USE BINS_it = Iterator(warehouse.BINS) %][% FOREACH bin = BINS_it %]
+<script type="text/javascript"><!--
+  warehouses = new Array();
+  [% USE WAREHOUSES_it = Iterator(WAREHOUSES) %]
+  [% FOREACH warehouse = WAREHOUSES_it %]
+    warehouses[[% WAREHOUSES_it.count - 1 %]] = new Array();
+    warehouses[[% WAREHOUSES_it.count - 1 %]]['id'] = [% warehouse.id %];
+    warehouses[[% WAREHOUSES_it.count - 1 %]]['bins'] = new Array();
+    warehouses[[% WAREHOUSES_it.count - 1 %]]['bins'][0] = new Array();
+    warehouses[[% WAREHOUSES_it.count - 1 %]]['bins'][0]['description'] = "---";
+    warehouses[[% WAREHOUSES_it.count - 1 %]]['bins'][0]['id'] = "";
+    [% USE BINS_it = Iterator(warehouse.BINS) %]
+    [% FOREACH bin = BINS_it %]
       warehouses[[% WAREHOUSES_it.count - 1 %]]['bins'][[% BINS_it.count %]] = new Array();
       warehouses[[% WAREHOUSES_it.count - 1 %]]['bins'][[% BINS_it.count %]]['description'] = "[% JavaScript.escape(bin.description) %]";
       warehouses[[% WAREHOUSES_it.count - 1 %]]['bins'][[% BINS_it.count %]]['id'] = [% bin.id %];
-      [% END %]
-      [% END %]
+    [% END %]
+  [% END %]
 
-      function warehouse_selected(warehouse_id, bin_id) {
-        var control = document.getElementById("bin_id");
+  function warehouse_selected(warehouse_id, bin_id) {
+    var control = document.getElementById("bin_id");
 
-        for (var i = control.options.length - 1; i >= 0; i--) {
-          control.options[i] = null;
-        }
+    for (var i = control.options.length - 1; i >= 0; i--) {
+      control.options[i] = null;
+    }
 
-        var warehouse_index = 0;
+    var warehouse_index = 0;
 
-        for (i = 0; i < warehouses.length; i++)
-          if (warehouses[i]['id'] == warehouse_id) {
-            warehouse_index = i;
-            break;
-          }
+    for (i = 0; i < warehouses.length; i++)
+      if (warehouses[i]['id'] == warehouse_id) {
+        warehouse_index = i;
+        break;
+      }
 
-        var warehouse = warehouses[warehouse_index];
-        var bin_index = 0;
+    var warehouse = warehouses[warehouse_index];
+    var bin_index = 0;
 
-        for (i = 0; i < warehouse['bins'].length; i++)
-          if (warehouse['bins'][i]['id'] == bin_id) {
-            bin_index = i;
-            break;
-          }
+    for (i = 0; i < warehouse['bins'].length; i++)
+      if (warehouse['bins'][i]['id'] == bin_id) {
+        bin_index = i;
+        break;
+      }
 
-        for (i = 0; i < warehouse['bins'].length; i++) {
-          control.options[i] = new Option(warehouse['bins'][i]['description'], warehouse['bins'][i]['id']);
-        }
+    for (i = 0; i < warehouse['bins'].length; i++) {
+      control.options[i] = new Option(warehouse['bins'][i]['description'], warehouse['bins'][i]['id']);
+    }
 
 
-        control.options[bin_index].selected = true;
-      }
+    control.options[bin_index].selected = true;
+  }
 
-      $(function() {
-        warehouse_selected(0, 0);
-        document.Form.partnumber.focus();
-      });
-     -->
- </script>
+  $(function() {
+    warehouse_selected(0, 0);
+    document.Form.partnumber.focus();
+  });
+--></script>
 
- <form name="Form" method="post" action="wh.pl" id="form">
+<form name="Form" method="post" action="wh.pl" id="form">
+<div class="wrapper">
 
-  [% IF saved_message %]
+[% IF saved_message %]
   <p>[% saved_message %]</p>
-  [% END %]
+[% END %]
 
-  <p>
-   [% 'If you enter values for the part number and / or part description then only those bins containing parts whose part number or part description match your input will be shown.' | $T8 %]
-  </p>
+<p>[% 'If you enter values for the part number and / or part description then only those bins containing parts whose part number or part description match your input will be shown.' | $T8 %]</p>
 
-  <p>
-   <table>
+<table class="tbl-horizontal">
+  <tbody>
     <tr>
-     <th align="right" nowrap>[% 'Transfer from warehouse' | $T8 %]:</th>
-     <td>
-      <select name="warehouse_id" id="warehouse_id" onchange="warehouse_selected(warehouses[this.selectedIndex]['id'], 0)">
-       [%- FOREACH warehouse = WAREHOUSES %]
-       <option value="[% HTML.escape(warehouse.id) %]">[% warehouse.description %]</option>
-       [%- END %]
-      </select>
-     </td>
+      <th>[% 'Transfer from warehouse' | $T8 %]</th>
+      <td>
+        <select name="warehouse_id" id="warehouse_id" onchange="warehouse_selected(warehouses[this.selectedIndex]['id'], 0)" class="wi-lightwide">
+          [% FOREACH warehouse = WAREHOUSES %]
+          <option value="[% HTML.escape(warehouse.id) %]">[% warehouse.description %]</option>
+          [% END %]
+        </select>
+      </td>
     </tr>
-
     <tr>
-     <th align="right" nowrap>[% 'Bin' | $T8 %]:</th>
-     <td><select id="bin_id" name="bin_id"></select></td>
+      <th>[% 'Bin' | $T8 %]</th>
+      <td>
+        <select id="bin_id" name="bin_id" class="wi-lightwide"></select>
+      </td>
     </tr>
-
     <tr>
-     <th align="right" nowrap>[% 'Limit part selection' | $T8 %]:</th>
-     <td></td>
+      <th>[% 'Limit part selection' | $T8 %]</th>
+      <td><span class="plain-data">&nbsp;</span></td>
     </tr>
-
     <tr>
-     <th align="right" nowrap>[% 'Part' | $T8 %]</th>
-     <td>
-      [% P.part.picker("part_id", '', size="30", part_type="part,assembly") %]
-     </td>
+      <th>[% 'Part' | $T8 %]</th>
+      <td>[% P.part.picker("part_id", '', part_type="part,assembly", class="wi-lightwide") %]</td>
     </tr>
-
     <tr>
-     <th align="right" nowrap>[% 'Charge number' | $T8 %]</th>
-     <td><input name="chargenumber" size="30"></td>
+      <th>[% 'Charge number' | $T8 %]</th>
+      <td><input type="text" name="chargenumber" class="wi-lightwide"></td>
     </tr>
-
     [% IF INSTANCE_CONF.get_show_bestbefore %]
-    <tr>
-     <th align="right" nowrap>[% 'Best Before' | $T8 %]</th>
-     <td>
-       [% L.date_tag('bestbefore') %]
-     </td>
-    </tr>
+      <tr>
+        <th>[% 'Best Before' | $T8 %]</th>
+        <td><span class="wi-date">[% L.date_tag('bestbefore') %]</span></td>
+      </tr>
     [% END %]
-
     <tr>
-     <th align="right" nowrap>[% 'EAN' | $T8 %]</th>
-     <td><input name="ean" size="30"></td>
+      <th>[% 'EAN' | $T8 %]</th>
+      <td><input type="text" name="ean" class="wi-lightwide"></td>
     </tr>
-   </table>
-  </p>
- </form>
+  </tbody>
+</table>
+
+</div><!-- /.wrapper -->
+</form>
diff --git a/templates/webpages/wh/warehouse_selection_assembly.html b/templates/webpages/wh/warehouse_selection_assembly.html
index fba6b7103..9f1930909 100644
--- a/templates/webpages/wh/warehouse_selection_assembly.html
+++ b/templates/webpages/wh/warehouse_selection_assembly.html
@@ -1,132 +1,132 @@
-[%- USE T8 %]
-[%- USE L %]
-[%- USE HTML %][%- USE JavaScript %][%- USE LxERP %][%- USE P -%]
+[% USE T8 %]
+[% USE L %]
+[% USE HTML %]
+[% USE JavaScript %]
+[% USE LxERP %]
+[% USE P %]
+
 <h1>[% title %]</h1>
 
- <script type="text/javascript">
-  <!--
-      warehouses = new Array();
-      [%- USE WAREHOUSES_it = Iterator(WAREHOUSES) %][%- FOREACH warehouse = WAREHOUSES_it %]
-      warehouses[[% WAREHOUSES_it.count - 1 %]] = new Array();
-      warehouses[[% WAREHOUSES_it.count - 1 %]]['id'] = [% warehouse.id %];
-      warehouses[[% WAREHOUSES_it.count - 1 %]]['bins'] = new Array();
-      [% USE BINS_it = Iterator(warehouse.BINS) %][% FOREACH bin = BINS_it %]
+<script type="text/javascript"><!--
+  warehouses = new Array();
+  [% USE WAREHOUSES_it = Iterator(WAREHOUSES) %]
+  [% FOREACH warehouse = WAREHOUSES_it %]
+    warehouses[[% WAREHOUSES_it.count - 1 %]] = new Array();
+    warehouses[[% WAREHOUSES_it.count - 1 %]]['id'] = [% warehouse.id %];
+    warehouses[[% WAREHOUSES_it.count - 1 %]]['bins'] = new Array();
+    [% USE BINS_it = Iterator(warehouse.BINS) %]
+    [% FOREACH bin = BINS_it %]
       warehouses[[% WAREHOUSES_it.count - 1%]]['bins'][[% BINS_it.count - 1 %]] = new Array();
       warehouses[[% WAREHOUSES_it.count - 1%]]['bins'][[% BINS_it.count - 1 %]]['description'] = "[% JavaScript.escape(bin.description) %]";
       warehouses[[% WAREHOUSES_it.count - 1%]]['bins'][[% BINS_it.count - 1 %]]['id'] = [% bin.id %];
-      [% END %]
-      [% END %]
+    [% END %]
+  [% END %]
 
-      function warehouse_selected(warehouse_id, bin_id) {
-        var control = document.getElementById("bin_id");
+  function warehouse_selected(warehouse_id, bin_id) {
+    var control = document.getElementById("bin_id");
 
-        for (var i = control.options.length - 1; i >= 0; i--) {
-          control.options[i] = null;
-        }
+    for (var i = control.options.length - 1; i >= 0; i--) {
+      control.options[i] = null;
+    }
 
-        var warehouse_index = 0;
+    var warehouse_index = 0;
 
-        for (i = 0; i < warehouses.length; i++)
-          if (warehouses[i]['id'] == warehouse_id) {
-            warehouse_index = i;
-            break;
-          }
+    for (i = 0; i < warehouses.length; i++)
+      if (warehouses[i]['id'] == warehouse_id) {
+        warehouse_index = i;
+        break;
+      }
 
-        var warehouse = warehouses[warehouse_index];
-        var bin_index = 0;
+    var warehouse = warehouses[warehouse_index];
+    var bin_index = 0;
 
-        for (i = 0; i < warehouse['bins'].length; i++)
-          if (warehouse['bins'][i]['id'] == bin_id) {
-            bin_index = i;
-            break;
-          }
+    for (i = 0; i < warehouse['bins'].length; i++)
+      if (warehouse['bins'][i]['id'] == bin_id) {
+        bin_index = i;
+        break;
+      }
 
-        for (i = 0; i < warehouse['bins'].length; i++) {
-          control.options[i] = new Option(warehouse['bins'][i]['description'], warehouse['bins'][i]['id']);
-        }
+    for (i = 0; i < warehouse['bins'].length; i++) {
+      control.options[i] = new Option(warehouse['bins'][i]['description'], warehouse['bins'][i]['id']);
+    }
 
 
-        control.options[bin_index].selected = true;
-      }
+    control.options[bin_index].selected = true;
+  }
 
-      $(function() {
-        warehouse_selected([% warehouse_id %], [% bin_id %]);
-      })
-    -->
- </script>
+  $(function() {
+    warehouse_selected([% warehouse_id %], [% bin_id %]);
+  })
+--></script>
 
- <form name="Form" method="post" action="wh.pl" id="form">
+<form name="Form" method="post" action="wh.pl" id="form">
+<div class="wrapper">
 
-  [% IF saved_message %]
+[% IF saved_message %]
   <p>[% saved_message %]</p>
-  [% END %]
+[% END %]
 
-  <p>
-   <table>
-    <tr>
-     <th align="right" nowrap>[% 'Assembly' | $T8 %]</th>
-     <td>
-      [% P.part.picker("parts_id", parts_id, part_type="assembly", class="initial_focus", fat_set_item="1") %]
-     </td>
-    </tr>
 
+<table class="tbl-horizontal">
+  <tbody>
     <tr>
-     <th align="right" nowrap>[% 'Destination warehouse' | $T8 %]</th>
-     <td>
-      <select name="warehouse_id" id="warehouse_id" onchange="warehouse_selected(warehouses[this.selectedIndex]['id'], 0)">
-       [%- FOREACH warehouse = WAREHOUSES %]
-       <option value="[% HTML.escape(warehouse.id) %]"[% IF warehouse_id == warehouse.id %] selected[% END %]>[% warehouse.description %]</option>
-       [%- END %]
-      </select>
-     </td>
+      <th>[% 'Assembly' | $T8 %]</th>
+      <td>[% P.part.picker("parts_id", parts_id, part_type="assembly", class="initial_focus", fat_set_item="1", class="wi-lightwide") %] </td>
     </tr>
-
     <tr>
-     <th align="right" nowrap>[% 'Destination bin' | $T8 %]:</th>
-     <td><select id="bin_id" name="bin_id"></select></td>
+      <th>[% 'Destination warehouse' | $T8 %]</th>
+      <td>
+        <select name="warehouse_id" id="warehouse_id" onchange="warehouse_selected(warehouses[this.selectedIndex]['id'], 0)" class="wi-lightwide">
+          [% FOREACH warehouse = WAREHOUSES %]
+            <option value="[% HTML.escape(warehouse.id) %]"[% IF warehouse_id == warehouse.id %] selected[% END %]>[% warehouse.description %]</option>
+          [% END %]
+        </select>
+      </td>
     </tr>
-
     <tr>
-     <th align="right" nowrap>[% 'Charge number' | $T8 %]</th>
-     <td><input name="chargenumber" size="30" value="[% HTML.escape(chargenumber) %]"></td>
+      <th>[% 'Destination bin' | $T8 %]</th>
+      <td><select id="bin_id" name="bin_id" class="wi-lightwide"></select></td>
     </tr>
-
-    [% IF INSTANCE_CONF.get_show_bestbefore %]
     <tr>
-     <th align="right" nowrap>[% 'Best Before' | $T8 %]</th>
-     <td>
-      [% L.date_tag('bestbefore', bestbefore) %]
-     </td>
+      <th>[% 'Charge number' | $T8 %]</th>
+      <td><input type="text" name="chargenumber" class="wi-lightwide" value="[% HTML.escape(chargenumber) %]"></td>
     </tr>
+    [% IF INSTANCE_CONF.get_show_bestbefore %]
+      <tr>
+        <th>[% 'Best Before' | $T8 %]</th>
+        <td><span class="wi-date">[% L.date_tag('bestbefore', bestbefore) %]</span> </td>
+      </tr>
     [% END %]
-
     <tr>
-     <th align="right" nowrap>[% 'Quantity' | $T8 %]</th>
-     <td>
-      <input name="qty" size="10" value="[% HTML.escape(LxERP.format_amount(qty)) %]">
-      <select name="unit">
-       [%- FOREACH unit = UNITS %]<option[% IF unit.selected %] selected[% END %]>[% HTML.escape(unit.name) %]</option>[% END %]
-      </select>
-     </td>
+      <th>[% 'Quantity' | $T8 %]</th>
+      <td>
+        <input type="text" name="qty" class="wi-verysmall" value="[% HTML.escape(LxERP.format_amount(qty)) %]">
+        <select name="unit" class="wi-small">
+          [% FOREACH unit = UNITS %]
+            <option[% IF unit.selected %] selected[% END %]>[% HTML.escape(unit.name) %]</option>
+          [% END %]
+        </select>
+      </td>
     </tr>
-
     <tr>
-     <th align="right" nowrap>[% 'Optional comment' | $T8 %]</th>
-     <td><input name="comment" size="30" value="[% HTML.escape(comment) %]"></td>
+      <th>[% 'Optional comment' | $T8 %]</th>
+      <td><input type="text" name="comment" class="wi-lightwide" value="[% HTML.escape(comment) %]">
+      </td>
     </tr>
+  </tbody>
+</table>
 
-   </table>
-  </p>
- </form>
+</div>
+</form>
 
 <script type='text/javascript'>
-$(function(){
-  $('#parts_id').on('set_item:PartPicker', function(event, item) {
-    if (!item.warehouse_id)
-      return;
-
-    $('#warehouse_id').val(item.warehouse_id);
-    warehouse_selected(item.warehouse_id, item.bin_id);
-  });
-})
+  $(function(){
+    $('#parts_id').on('set_item:PartPicker', function(event, item) {
+      if (!item.warehouse_id)
+        return;
+
+      $('#warehouse_id').val(item.warehouse_id);
+      warehouse_selected(item.warehouse_id, item.bin_id);
+    });
+  })
 </script>
