diff -r 0ea9dfb3fce9 -r 124af734af68 www/js/rec_edit.js
--- a/www/js/rec_edit.js	Sat Feb 23 22:56:35 2019 +0100
+++ b/www/js/rec_edit.js	Sun Feb 24 17:23:52 2019 +0100
@@ -1734,11 +1734,10 @@
 		var fermentableAdapter = new $.jqx.dataAdapter(fermentableSource);
 		$("#fermentableGrid").jqxGrid({
 			width: 1240,
-			height: 450,
+			height: 500,
 			source: fermentableAdapter,
 			theme: theme,
 			selectionmode: 'singlerow',
-			localization: getLocalization(),
 			showtoolbar: true,
 			rendertoolbar: function (toolbar) {
 				var me = this;
@@ -1861,28 +1860,35 @@
 			},
 			columns: [
 				{ text: 'Vergistbaar ingrediënt', datafield: 'f_name',
-				  cellsrenderer:  function (row, columnfield, value, defaulthtml, columnproperties) {
-					var rowData = $("#fermentableGrid").jqxGrid('getrowdata', row);
-					return "<span style='margin: 3px; margin-top: 6px; float: "+
-						columnproperties.cellsalign+"'>" +rowData.f_supplier+" / "+rowData.f_name+" ("+rowData.f_color+" EBC)</span>";
+				  cellsrenderer:  function (index, datafield, value, defaulvalue, column, rowdata) {
+					return "<span style='margin: 3px; margin-top: 6px; float: left;'>" +
+						rowdata.f_supplier+" / "+rowdata.f_name+" ("+rowdata.f_color+" EBC)</span>";
 				  }
 			       	},
 				{ text: 'Type', width: 100, datafield: 'f_type',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					return "<div style='margin: 4px;'>" + FermentableTypeData[value].nl + "</div>";
+					return "<span style='margin: 3px; margin-top: 6px; float: left;'>" + FermentableTypeData[value].nl + "</span>";
 				  }
 				},
 				{ text: 'Moment', width: 110, datafield: 'f_added',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					return "<div style='margin: 4px;'>" + AddedData[value].nl + "</div>";
+					return "<span style='margin: 3px; margin-top: 6px; float: left;'>" + AddedData[value].nl + "</span>";
 				  }
 				},
 				{ text: 'Opbrengst', editable: false, datafield: 'f_yield', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'p1' },
 				{ text: 'Gewicht Kg', datafield: 'f_amount', width: 120, align: 'right', cellsalign: 'right', cellsformat: 'f3' },
-				{ text: 'Voorr. Kg', datafield: 'f_inventory', width: 120, align: 'right', cellsalign: 'right', cellsformat: 'f3' },
-				{ text: 'Percent', datafield: 'f_percentage', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'p1' },
+				{ text: 'Voorr. Kg', datafield: 'f_inventory', width: 120, align: 'right',
+				  cellsrenderer:  function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
+					var color = '#ffffff';
+					if (value < rowdata.f_amount)
+						color = '#ff4040';
+					return  '<span style="margin: 4px; margin-top: 6px; float: right; color: ' +
+						color + ';">' +fermentableAdapter.formatNumber(value, "f3") + '</span>';
+				  }
+				},
+				{ text: 'Procent', datafield: 'f_percentage', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'p1' },
 				{ text: '100%', align: 'center', datafield: 'f_adjust_to_total_100', columntype: 'checkbox', width: 70 },
-				{ text: 'Wijzig', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () {
+				{ text: '', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () {
 					return "Wijzig";
 				        }, buttonclick: function (row) {
 						fermentableRow = row;
@@ -1937,11 +1943,10 @@
                 var hopAdapter = new $.jqx.dataAdapter(hopSource);
                 $("#hopGrid").jqxGrid({
                         width: 1240,
-                        height: 510,
+                        height: 560,
                         source: hopAdapter,
                         theme: theme,
                         selectionmode: 'singlerow',
-                        localization: getLocalization(),
                         showtoolbar: true,
                         rendertoolbar: function (toolbar) {
                                 var me = this;
@@ -2018,69 +2023,64 @@
 			},
                         columns: [
                                 { text: 'Hop', datafield: 'h_name',
-				  cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
-					var rowData = $("#hopGrid").jqxGrid('getrowdata', row);
-					return "<span style='margin: 3px; margin-top: 6px; float: "+
-						columnproperties.cellsalign+"'>" +rowData.h_origin+" / "+rowData.h_name+"</span>";
+				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
+					return "<span style='margin: 3px; margin-top: 6px; float: left;'>" +rowdata.h_origin+" / "+rowdata.h_name+"</span>";
 				  },
 			       	},
                                 { text: 'Type', width: 90, datafield: 'h_type',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					return "<div style='margin: 4px;'>" + HopTypeData[value].nl + "</div>";
+					return  '<span style="margin: 4px; margin-top: 6px; float: left;">' + HopTypeData[value].nl + '</span>';
 				  }
 			       	},
 				{ text: 'Vorm', width: 90, datafield: 'h_form',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					return "<div style='margin: 4px;'>" + HopFormData[value].nl + "</div>";
+					return  '<span style="margin: 4px; margin-top: 6px; float: left;">' + HopFormData[value].nl + '</span>';
 				  }
 			       	},
                                 { text: 'Alpha', datafield: 'h_alpha', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'p1' },
 				{ text: 'Gebruik', width: 110, datafield: 'h_useat',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					return "<div style='margin: 4px;'>" + HopUseData[value].nl + "</div>";
+					return  '<span style="margin: 4px; margin-top: 6px; float: left;">' + HopUseData[value].nl + '</span>';
 				  }
 				},
 				{ text: 'Tijdsduur', datafield: 'h_time', width: 90, align: 'right',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					if ((rowdata.h_useat == 2) || (rowdata.h_useat == 4))	// Boil, Whirlpool
-					       	return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value, "f0")+" min.</div>";
-					if (rowdata.h_useat == 5)	// Dry hop
-						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value/1440, "f0")+" dagen</div>";
-					else
-						return "<div style='margin: 4px;'></div>";
+					var duration = '';
+					if ((rowdata.h_useat == 2) || (rowdata.h_useat == 4))   // Boil, Whirlpool
+						duration = dataAdapter.formatNumber(value, "f0")+" min.";
+					else if (rowdata.h_useat == 5)       // Dry hop
+						duration = dataAdapter.formatNumber(value/1440, "f0")+" dagen";
+					return  '<span style="margin: 4px; margin-top: 6px; float: right;">' + duration + '</span>';
 				  }
 				},
 				{ text: 'IBU', datafield: 'ibu', width: 80, align: 'right',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					var ibu = toIBU(rowdata.h_useat,
-							  rowdata.h_form,
-							  preboil_sg,
-							  parseFloat($("#batch_size").jqxNumberInput('decimal')),
-							  parseFloat(rowdata.h_amount),
-							  parseFloat(rowdata.h_time),
-							  parseFloat(rowdata.h_alpha),
-							  $("#ibu_method").val()
-							 );
-					return "<div style='margin: 4px;' class='jqx-right-align'>" + dataAdapter.formatNumber(ibu, "f1") + "</div>";
+					var ibu = toIBU(rowdata.h_useat, rowdata.h_form, preboil_sg, parseFloat($("#batch_size").jqxNumberInput('decimal')),
+							  parseFloat(rowdata.h_amount), parseFloat(rowdata.h_time),
+							  parseFloat(rowdata.h_alpha), $("#ibu_method").val());
+					return  '<span style="margin: 4px; margin-top: 6px; float: right;">' + dataAdapter.formatNumber(ibu, "f1") + '</span>';
 				  }
 				},
-				{ text: 'Gewicht', datafield: 'h_amount', width: 110, align: 'right', cellsalign: 'right',
+				{ text: 'Gewicht', datafield: 'h_amount', width: 110, align: 'right',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
+					var amount = dataAdapter.formatNumber(value, "f1") + ' kg';
 					if (value < 1)
-						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value * 1000, "f1")+" gr</div>";
-					else
-						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value, "f1")+" kg</div>";
+						amount = dataAdapter.formatNumber(value * 1000, "f1") + ' gr';
+					return  '<span style="margin: 4px; margin-top: 6px; float: right;">' + amount + '</span>';
 				  }
 				},
-				{ text: 'Voorraad', datafield: 'h_inventory', width: 110, align: 'right', cellsalign: 'right',
+				{ text: 'Voorraad', datafield: 'h_inventory', width: 110, align: 'right',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
+					var color = '#ffffff';
+					if (value < rowdata.h_amount)
+						color = '#ff4040';
+					var amount = dataAdapter.formatNumber(value, "f1") + ' kg';
 					if (value < 1)
-						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value * 1000, "f1")+" gr</div>";
-					else
-						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value, "f1")+" kg</div>";
+						amount = dataAdapter.formatNumber(value * 1000, "f1") + ' gr';
+					return  '<span style="margin: 4px; margin-top: 6px; float: right; color: ' + color + ';">' + amount + '</span>';
 				  }
 				},
-				{ text: 'Wijzig', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () {
+				{ text: '', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () {
 					return "Wijzig";
 					}, buttonclick: function (row) {
 						hopRow = row;
@@ -2193,11 +2193,10 @@
 		});
                 $("#miscGrid").jqxGrid({
                         width: 1240,
-                        height: 525,
+                        height: 575,
                         source: miscAdapter,
                         theme: theme,
                         selectionmode: 'singlerow',
-                        localization: getLocalization(),
                         showtoolbar: true,
                         rendertoolbar: function (toolbar) {
                                 var me = this;
@@ -2259,39 +2258,42 @@
                                 { text: 'Ingredient', datafield: 'm_name' },
                                 { text: 'Type', width: 140, datafield: 'm_type',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					return "<div style='margin: 4px;'>" + MiscTypeData[value].nl + "</div>";
+					return "<span style='margin: 3px; margin-top: 6px; float: left;'>" + MiscTypeData[value].nl + "</span>";
 				  }
 			       	},
                                 { text: 'Gebruik', width: 140, datafield: 'm_use_use',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					return "<div style='margin: 4px;'>" + MiscUseData[value].nl + "</div>";
+					return "<span style='margin: 3px; margin-top: 6px; float: left;'>" + MiscUseData[value].nl + "</span>";
 				  }
 			       	},
                                 { text: 'Tijd', datafield: 'm_time', width: 90, align: 'right',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					if (rowdata.m_use_use == 2) {	// Boil
-						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value, "f0")+" min.</div>";
-					} else if ((rowdata.m_use_use == 3) || (rowdata.m_use_use == 4)) {	// Primary or Secondary
-						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value/1440, "f0")+" dagen</div>";
-					} else {
-						var tijd = 0;
-						return "<div style='margin: 4px;'> </div>";
-					}
+					var duration = '';
+					if (rowdata.m_use_use == 2)     // Boil
+						duration = dataAdapter.formatNumber(value, "f0")+" min.";
+					else if ((rowdata.m_use_use == 3) || (rowdata.m_use_use == 4))  // Primary or Secondary
+						duration = dataAdapter.formatNumber(value/1440, "f0")+" dagen";
+					return  '<span style="margin: 4px; margin-top: 6px; float: right;">' + duration + '</span>';
 				  },
                                 },
 				{ text: 'Hoeveel', datafield: 'm_amount', width: 110, align: 'right',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
 					var vstr = rowdata.m_amount_is_weight ? "gr":"ml";
-					return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value * 1000,"f2")+" "+vstr+"</div>";
+					return  '<span style="margin: 4px; margin-top: 6px; float: right;">' +
+						dataAdapter.formatNumber(value * 1000,"f2")+" "+vstr + '</span>';
 				  },
 				},
 				{ text: 'Voorraad', datafield: 'm_inventory', width: 110, align: 'right',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
 					var vstr = rowdata.m_amount_is_weight ? "gr":"ml";
-					return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value * 1000,"f2")+" "+vstr+"</div>";
+					var color = '#ffffff';
+					if (value < rowdata.m_amount)
+						color = '#ff4040';
+					var amount = dataAdapter.formatNumber(value * 1000,"f2")+" "+vstr;
+					return  '<span style="margin: 4px; margin-top: 6px; float: right; color: ' + color + ';">' + amount + '</span>';
 				  },
 				},
-				{ text: 'Wijzig', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () {
+				{ text: '', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () {
 					return "Wijzig";
 					}, buttonclick: function (row) {
 						miscRow = row;
@@ -2350,11 +2352,10 @@
                 var yeastAdapter = new $.jqx.dataAdapter(yeastSource);
                 $("#yeastGrid").jqxGrid({
                         width: 1240,
-                        height: 400,
+                        height: 350,
                         source: yeastAdapter,
                         theme: theme,
                         selectionmode: 'singlerow',
-                        localization: getLocalization(),
                         showtoolbar: true,
                         rendertoolbar: function (toolbar) {
                                 var me = this;
@@ -2429,7 +2430,7 @@
 				{ text: 'Code', width: 90, datafield: 'y_product_id' },
                                 { text: 'Soort', width: 100, datafield: 'y_form',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					return "<div style='margin: 4px;'>" + YeastFormData[value].nl + "</div>";
+					return  '<span style="margin: 4px; margin-top: 6px; float: left;">' + YeastFormData[value].nl + '</span>';
 				  }
 				},
 				{ text: 'Min. &deg;C', width: 70, align: 'right', cellsalign: 'right', datafield: 'y_min_temperature' },
@@ -2437,32 +2438,33 @@
 				{ text: 'Attn. %', width: 70, align: 'right', cellsalign: 'right', datafield: 'y_attenuation', cellsformat: 'f1' },
 				{ text: 'Voor', width: 120, datafield: 'y_use',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					return "<div style='margin: 4px;'>" + YeastUseData[value].nl + "</div>";
+					return  '<span style="margin: 4px; margin-top: 6px; float: left;">' + YeastUseData[value].nl + '</span>';
 				  }
 				},
 				{ text: 'Hoeveel', datafield: 'y_amount', width: 100, align: 'right',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					if (rowdata.y_form == 0) {	// Liquid
-						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value, "f0")+" pk</div>";
-					} else if (rowdata.y_form == 1) {	// Dry
-						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value*1000, "f1")+" gr</div>";
-					} else {
-						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value*1000, "f0")+" ml</div>";
-					}
+					var amount = dataAdapter.formatNumber(value*1000, "f0")+" ml";
+					if (rowdata.y_form == 0)        // Liquid
+						amount = dataAdapter.formatNumber(value, "f0")+" pk";
+					else if (rowdata.y_form == 1)   // Dry
+						amount = dataAdapter.formatNumber(value*1000, "f1")+" gr";
+					return  '<span style="margin: 4px; margin-top: 6px; float: right;">' + amount + '</span>';
                                   }
                                 },
 				{ text: 'Voorraad', datafield: 'y_inventory', width: 100, align: 'right',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					if (rowdata.y_form == 0) {      // Liquid
-						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value, "f0")+" pk</div>";
-					} else if (rowdata.y_form == 1) {       // Dry
-						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value*1000, "f1")+" gr</div>";
-					} else {
-						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value*1000, "f0")+" ml</div>";
-					}
+					var color = '#ffffff';
+					if (value < rowdata.y_amount)
+						color = '#ff4040';
+					var amount = dataAdapter.formatNumber(value*1000, "f0")+" ml";
+					if (rowdata.y_form == 0)        // Liquid
+						amount = dataAdapter.formatNumber(value, "f0")+" pk";
+					else if (rowdata.y_form == 1)   // Dry
+						amount = dataAdapter.formatNumber(value*1000, "f1")+" gr";
+					return  '<span style="margin: 4px; margin-top: 6px; float: right; color: ' + color + ';">' + amount + '</span>';
 				  }
 				},
-				{ text: 'Wijzig', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () {
+				{ text: '', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () {
 					return "Wijzig";
 					}, buttonclick: function (row) {
 						yeastRow = row;
@@ -2543,7 +2545,6 @@
                         source: mashAdapter,
                         theme: theme,
                         selectionmode: 'singlerow',
-                        localization: getLocalization(),
                         showtoolbar: true,
                         rendertoolbar: function (toolbar) {
                                 var me = this;
@@ -2583,10 +2584,10 @@
 				},
 				{ text: 'Start &deg;C', datafield: 'step_temp', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
 				{ text: 'Eind &deg;C', datafield: 'end_temp', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
-				{ text: 'Tijd', datafield: 'step_time', width: 90, align: 'right', cellsalign: 'right' },
-				{ text: 'Stap', datafield: 'ramp_time', width: 90, align: 'right', cellsalign: 'right' },
-				{ text: 'Infuse', datafield: 'step_infuse_amount', width: 90, align: 'right', cellsalign: 'right' },
-				{ text: 'Wijzig', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () {
+				{ text: 'Rust min.', datafield: 'step_time', width: 90, align: 'right', cellsalign: 'right' },
+				{ text: 'Stap min.', datafield: 'ramp_time', width: 90, align: 'right', cellsalign: 'right' },
+				{ text: 'Infuse L.', datafield: 'step_infuse_amount', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
+				{ text: '', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () {
 					return "Wijzig";
 					}, buttonclick: function (row) {
 						mashRow = row;