diff --git a/fhem/www/pgm2/ios6.js b/fhem/www/pgm2/ios6.js
index eab2425de..aca2c5114 100644
--- a/fhem/www/pgm2/ios6.js
+++ b/fhem/www/pgm2/ios6.js
@@ -1,139 +1,8 @@
-/* iOS 6 Theme for FHEM */
-/* by Sandra Ohmayer */
-/* http://www.animeschatten.net */
-/* jQuery is required*/
-$(document).ready(function() {
-	/* 
-	/* Style Config
-	*/
-	var menuwidth = 200;
-	var paddingwidth = 60;
-	var mobilepaddingwidth = 20;
-	var logowidth = 28;
-	var switchtomobilemode = 415;
-	var hdrheight = 44;
-	var inputpadding = 251;
-	/* 
-	/* Functions
-	*/
-	// Set style height and width
-	var recalculateStyleHeight = function() {
-		var height = window.innerHeight;
-		$("#menu").height(height - hdrheight);
-		$("#content").height(height - hdrheight);
-		$("#right").height(height - hdrheight);
-	};
-	var recalculateStyleWithMenu = function() {
-		var width = $("body").width();
-		$("body").removeClass("hideMenu");
-		if (switchtomobilemode > width) {
-			$("#menu").width(width);
-			$("#content").width(0);
-			$("#right").width(0);
-			$("#content").hide()
-			$("#right").hide();
-			$("#hdr input").width(width - inputpadding + menuwidth - logowidth);
-		} else {
-			$("#menu").width(menuwidth);
-			$("#content").width(width - menuwidth - paddingwidth - 1);
-			$("#right").width(width - menuwidth - paddingwidth - 1);
-			$("#hdr input").width(width - inputpadding);
-			$("#content").show()
-			$("#right").show();
-		}
-	};
-	var recalculateStyleWithoutMenu = function() {
-		var width = $("body").width();
-		$("body").addClass("hideMenu");
-		if (switchtomobilemode > width) {
-			$("#hdr input").width(width - inputpadding + menuwidth - logowidth);
-			$("#content").width(width - mobilepaddingwidth);
-			$("#right").width(width - mobilepaddingwidth);
-		} else {
-			$("#hdr input").width(width - inputpadding);
-			$("#content").width(width - paddingwidth);
-			$("#right").width(width - paddingwidth);
-		}
-		$("#menu").width(0);
-		$("#content").show()
-		$("#right").show();
-	};
-	// Show / Hide menu
-	var toggleMenuOnFHEMIcon = function() {
-		if ($("body").hasClass("hideMenu")) {
-			recalculateStyleWithMenu();
-		} else {
-			recalculateStyleWithoutMenu();
-		}
-	};
-	/* 
-	/* DOM manipulation
-	*/
-	// init viewport
-	$('meta[name="viewport"]').remove();
-	$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />');
-
-	var ismobile = (/iphone|ipod|android|blackberry|opera|mini|windows\sce|palm|smartphone|iemobile/i.test(navigator.userAgent.toLowerCase()));
-	var istablet = (/ipad|android|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase()));
-	
-	var isAndroid = function() {
-			return navigator.userAgent.match(/Android/i);
-	};
-	
-	
-	if (ismobile) {
-		$("body").addClass("isMobile");
-		if (isAndroid()) {
-			$("body").addClass("isAndroidPhone");
-		}
-	} else if(istablet) {
-		if (isAndroid()) {
-			$("body").addClass("isAndroidTablet");
-		}
-	}
-	// init height and width
-	recalculateStyleHeight();
-	// hide menu
-	if ($("body").width() < window.innerHeight) {
-		recalculateStyleWithoutMenu();
-	} else {
-		recalculateStyleWithMenu();
-	}
-	// Logo - add toggle link
-	var parentLink = $("#logo").parent("a");
-	$(parentLink).unbind("click");
-	if (typeof(parentLink.attr("href")) == "undefined") {
-		parentLink.attr("onclick", "#");
-	} else {
-		parentLink.attr("href", "#");
-	}
-	$("#logo").click(toggleMenuOnFHEMIcon);
-	/* 
-	/* Event Handlers
-	*/
-	// Resize
-	$(window).resize(function() {
-		recalculateStyleHeight();
-		if ($("body").width() < window.innerHeight) {
-			recalculateStyleWithoutMenu();
-		} else {
-			recalculateStyleWithMenu();
-		}
-	});
-	$(window).bind('orientationchange', function(event) {
-		$(window).trigger('resize');
-		//alert("orientationchange width: "+window.innerWidth+" height: "+window.innerHeight);
-	});
-	// Touch - Color picker
-	$(document).on('touchstart', function(e) {
-		var container = $("#colorpicker");
-		if (!container.is(e.target) // if the target of the click isn't the container...
-			&& container.has(e.target).length === 0 // ... nor a descendant of the container
-			&& !$("input").is(e.target) && container.length > 0) // ... is not an input
-		{
-			container.remove();
-		}
-	});
-	
-
-});
+/* iOS 6 Theme for FHEM */
+/* by Sandra Ohmayer */
+/* http://www.foodcat.de */
+/* jQuery is required*/
+
+var imported = document.createElement('script');
+imported.src = '/fhem/pgm2/ios6touchpad.js';
+document.head.appendChild(imported);
diff --git a/fhem/www/pgm2/ios6touchpad.js b/fhem/www/pgm2/ios6touchpad.js
new file mode 100644
index 000000000..f935353f7
--- /dev/null
+++ b/fhem/www/pgm2/ios6touchpad.js
@@ -0,0 +1,299 @@
+/* iOS 6 Theme for FHEM */
+/* by Sandra Ohmayer */
+/* http://www.foodcat.de */
+/* jQuery is required*/
+
+
+$(document).ready(function() {
+	/* 
+	/* Style Config
+	*/
+	var spaltensumme = 200;
+	var menuwidth = 200;
+	var paddingwidth = 60;
+	var mobilepaddingwidth = 20;
+	var logowidth = 28;
+	var switchtomobilemode = 415;
+	var hdrheight = 44;
+	var inputpadding = 251;
+	/* 
+	/* Functions
+	*/
+	// Set style height and width
+	var recalculateStyleHeight = function() {
+		var height = window.innerHeight;
+		$("#menu").height(height - hdrheight);
+		$("#content").height(height - hdrheight);
+		$("#right").height(height - hdrheight);
+	};
+	var recalculateStyleWithMenu = function() {
+		var width = $("body").width();
+		$("body").removeClass("hideMenu");
+		if (switchtomobilemode > width) {
+			$("#menu").width(width);
+			$("#content").width(0);
+			$("#right").width(0);
+			$("#content").hide()
+			$("#right").hide();
+			$("#hdr input").width(width - inputpadding + menuwidth - logowidth);
+		} else {
+			$("#menu").width(menuwidth);
+			$("#content").width(width - menuwidth - paddingwidth - 1);
+			$("#right").width(width - menuwidth - paddingwidth - 1);
+			$("#hdr input").width(width - inputpadding);
+			$("#content").show()
+			$("#right").show();
+		}
+	};
+	var recalculateStyleWithoutMenu = function() {
+		var width = $("body").width();
+		$("body").addClass("hideMenu");
+		if (switchtomobilemode > width) {
+			$("#hdr input").width(width - inputpadding + menuwidth - logowidth);
+			$("#content").width(width - mobilepaddingwidth);
+			$("#right").width(width - mobilepaddingwidth);
+		} else {
+			$("#hdr input").width(width - inputpadding);
+			$("#content").width(width - paddingwidth);
+			$("#right").width(width - paddingwidth);
+		}
+		$("#menu").width(0);
+		$("#content").show()
+		$("#right").show();
+	};
+	// Show / Hide menu
+	var toggleMenuOnFHEMIcon = function() {
+		if ($("body").hasClass("hideMenu")) {
+			recalculateStyleWithMenu();
+		} else {
+			recalculateStyleWithoutMenu();
+		}
+	};
+	
+	//Berechnung Spaltenbreite
+	var calccolumns = function() {
+		$("table.block.wide").find("table.block.wide").addClass("notrelevantcount");
+		var tables = $("table.block.wide").not('.notrelevantcount');
+		// Ermitteln der maximalen Spaltenanzahl im Layout
+		var maxlength = 0;
+		var maxtr;
+		tables.each(function() {
+			var td = $(this).children("tbody").children("tr").first().children("td");
+			var trlength = 0;
+			td.each(function() {
+				trlength = trlength+$(this).prop("colSpan");
+			});
+			if (trlength > maxlength) {
+				maxlength = trlength;
+				maxtr=$(this).children("tbody").children("tr").children('td:eq('+(maxlength-1)+')').parent().first();
+			}
+		});
+
+		// Setzen aller hinteren Spalten auf ein Minimum an Platzbedarf
+		tables.children("tbody").children("tr").each(function() {
+			var trlength = $(this).children("td").length;
+			var diff = 0;
+			if (trlength < maxlength) {
+				diff = maxlength - trlength;
+			}
+			diff++;
+
+			$(this).children("td").css("width", "1%");
+			$(this).children("td").css("white-space", "nowrap");
+			$(this).children("td").first().css("width", "");
+			$(this).children("td").first().css("white-space", "");
+			
+		});
+
+		// Ermitteln der maxwidth abhängig vom größten Spaltenelement beginnend bei Spalte 2 
+		var i;
+		var maxwidthtd = new Array();
+		for (i = 1; i < maxlength; i++) { 
+			maxwidthtd.push(0);
+			var counttr = tables.children("tbody").children('tr').length;
+			for (j=0; j < counttr; j++) {
+				tables.children("tbody").children('tr:eq('+j+')').children('td:eq('+i+')').each(function() {
+					var tdwidth = $(this).innerWidth()/$(this).prop("colSpan")+($(this).prop("colSpan")-1)*14;
+					if (tdwidth > maxwidthtd[i-1]) {
+						maxwidthtd[i-1] = tdwidth;
+					}
+				});
+			}
+		}
+
+		// Anpassen der width der Spalten auf das maxwidth beginnend bei Spalte 2 
+		for (i = 1; i < maxlength; i++) { 
+			tables.children("tbody").children("tr").children('td:eq('+i+')').css("width",maxwidthtd[i-1]+"px");
+		}
+
+		// Berechnung der gesamten Tabellen width
+		var innertablewidth = -20;
+		if(maxtr) {
+			maxtr.children('td').each(function() {
+				innertablewidth=innertablewidth+$(this).innerWidth();
+			});
+			// Berechnung der hinteren Spalten
+			maxwidthtd.forEach(function(column, index){
+				if(column > 260) {
+					column = 260;
+				}
+				innertablewidth=innertablewidth-column-10;
+			});
+			if (innertablewidth > 750) {
+				innertablewidth = 750;
+			} else if (innertablewidth < 110){
+				innertablewidth = 110;
+			}
+			spaltensumme = innertablewidth;
+			tables.children("tbody").children("tr").each(function() {
+				var trlength = $(this).children("td").length;
+				var diff = 0;
+				if (trlength < maxlength) {
+					diff = maxlength - trlength;
+				}
+				diff++;
+				$(this).children("td").last().attr('colspan',diff);
+				$(this).children("td").css("white-space", "");
+				$(this).children("td").css("width", "");
+				$(this).children("td").first().css("width", innertablewidth);
+				$(this).children("td").first().next().css("width", maxwidthtd[0]);
+			});
+		}
+		$(".fbcalllist-container").find("tr").each(function() {
+			$(this).find("td").last().attr('colspan',1);
+			$(this).find("td").css("width", "");
+			$(this).find("td").css("white-space", "");
+		});
+		
+	};
+
+	//Neuberechnung Spaltenbreite
+	var resetcolumns = function() {
+		$("table.block.wide").not('.notrelevantcount').children("tbody").children("tr").each(function() {
+			$(this).children("td").last().attr('colspan',1);
+			$(this).children("td").css("width", "");
+			$(this).children("td").css("white-space", "");
+		});
+	};
+	
+
+	var mobiletoggle = function () {
+		if($('body').hasClass("colortoggle")){}else{
+			var counter=0;
+			$( ".colorpicker_widget, .slider_widget" ).each(function(){
+				$( '<div id="toggle_colorpicker'+counter+'" onclick="togglecolorpicker('+counter+')" style="display: table-cell;vertical-align: middle;"><svg class="icon control_plus" data-txt="control_plus" id="colorplus'+counter+'" version="1.0" xmlns="http://www.w3.org/2000/svg" width="468pt" height="474pt" viewBox="0 0 468 474" preserveAspectRatio="xMidYMid meet"> <metadata> Created by potrace 1.8, written by Peter Selinger 2001-2007 </metadata> <g transform="translate(0,474) scale(0.200000,-0.200000)" stroke="none"> <path d="M1002 2354 c-18 -9 -43 -31 -55 -48 -22 -31 -22 -35 -25 -458 l-3 -428 -397 0 c-444 0 -443 0 -490 -70 -22 -33 -23 -42 -20 -177 l3 -143 38 -37 37 -38 415 -3 415 -3 0 -422 c0 -403 1 -423 20 -455 37 -61 70 -72 210 -72 150 0 182 12 218 80 22 44 22 49 22 457 l0 413 424 0 c422 0 423 0 456 23 57 39 70 76 70 206 0 143 -19 192 -84 222 -38 17 -73 19 -453 19 l-413 0 0 418 c0 459 0 460 -63 506 -25 18 -45 21 -160 24 -107 2 -138 -1 -165 -14z m258 -599 l0 -475 470 0 470 0 0 -100 0 -100 -475 0 -475 0 0 -475 0 -476 -97 3 -98 3 0 473 0 472 -457 0 -458 0 0 100 0 100 457 2 458 3 -4 473 -3 472 106 0 106 0 0 -475z"></path> </g> </svg><svg class="icon control_minus" id="colorminus'+counter+'" data-txt="control_minus" version="1.0" xmlns="http://www.w3.org/2000/svg" width="468pt" height="95pt" viewBox="0 0 468 95" preserveAspectRatio="xMidYMid meet"> <metadata> Created by potrace 1.8, written by Peter Selinger 2001-2007 </metadata> <g transform="translate(0,95) scale(0.196639,-0.196639)" stroke="none"> <path d="M85 460 c-11 -4 -33 -22 -50 -40 -30 -31 -30 -31 -33 -168 -3 -163 7 -193 79 -230 l44 -22 1077 2 1077 3 28 21 c57 43 68 76 68 214 0 141 -11 176 -68 210 -31 19 -58 20 -1117 19 -597 0 -1094 -4 -1105 -9z m2155 -220 l0 -100 -1055 0 -1055 0 0 93 c0 52 3 97 7 100 3 4 478 7 1055 7 l1048 0 0 -100z"></path> </g> </svg></div>' ).insertBefore( $(this) );
+				$(this).parent().css("white-space", "nowrap");
+				$(this).parent().css("display", "table");
+				$(this).attr('id', 'colorpicker'+counter);
+				$(this).hide();
+				$('#colorminus'+counter).hide();
+				counter++;
+			});
+			$('body').addClass("colortoggle");
+		}
+	};
+
+
+
+	
+	
+	/* 
+	/* DOM manipulation
+	*/
+	// init viewport
+	$('meta[name="viewport"]').remove();
+	$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />');
+
+	var ismobile = (/iphone|ipod|android|blackberry|opera|mini|windows\sce|palm|smartphone|iemobile/i.test(navigator.userAgent.toLowerCase()));
+	var istablet = (/ipad|android|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase()));
+	
+	var isAndroid = function() {
+			return navigator.userAgent.match(/Android/i);
+	};
+	
+	
+	if (ismobile) {
+		$("body").addClass("isMobile");
+		if (isAndroid()) {
+			$("body").addClass("isAndroidPhone");
+		}
+	} else if(istablet) {
+		if (isAndroid()) {
+			$("body").addClass("isAndroidTablet");
+		}
+	}
+	// init height and width
+	recalculateStyleHeight();
+
+	// hide menu
+	if ($("body").width() < window.innerHeight) {
+		recalculateStyleWithoutMenu();
+	} else {
+		recalculateStyleWithMenu();
+	}
+
+	// Logo - add toggle link
+	var parentLink = $("#logo").parent("a");
+	$(parentLink).unbind("click");
+	if (typeof(parentLink.attr("href")) == "undefined") {
+		parentLink.attr("onclick", "#");
+	} else {
+		parentLink.attr("href", "#");
+	}
+	$("#logo").closest("a").removeAttr("onclick");
+	
+	$("#logo").click(toggleMenuOnFHEMIcon);
+	
+	/* 
+	/* Event Handlers
+	*/
+	// Resize
+	$(window).resize(function() {
+		recalculateStyleHeight();
+		if ($("body").width() < window.innerHeight) {
+			recalculateStyleWithoutMenu();
+			resetcolumns();
+			calccolumns();
+		} else {
+			recalculateStyleWithMenu();
+			resetcolumns();
+			calccolumns();
+		}
+		if (spaltensumme < 200) {
+			mobiletoggle();
+			resetcolumns();
+			calccolumns();
+		}
+	});
+	$(window).bind('orientationchange', function(event) {
+		$(window).trigger('resize');
+		//alert("orientationchange width: "+window.innerWidth+" height: "+window.innerHeight);
+	});
+	// Touch - Color picker
+	$(document).on('touchstart', function(e) {
+		var container = $("#colorpicker");
+		if (!container.is(e.target) // if the target of the click isn't the container...
+			&& container.has(e.target).length === 0 // ... nor a descendant of the container
+			&& !$("input").is(e.target) && container.length > 0) // ... is not an input
+		{
+			container.remove();
+		}
+	});
+});
+
+function triggerResize() {
+	window.dispatchEvent(new Event('resize'));
+}
+
+function togglecolorpicker(counter) {
+	$('#colorpicker'+counter).toggle('fast');
+	$('#colorminus'+counter).toggle();
+	$('#colorplus'+counter).toggle();
+}
+function togglecolorpickerct(counter) {
+	$('#colorpicker_ct_mired'+counter).toggle('fast');
+	$('#colorctminus'+counter).toggle();
+	$('#colorctplus'+counter).toggle();
+}
+
+window.addEventListener("load",triggerResize,false);
\ No newline at end of file
diff --git a/fhem/www/pgm2/ios6touchpadstyle.css b/fhem/www/pgm2/ios6touchpadstyle.css
index 4c9027bad..bea7c00b2 100644
--- a/fhem/www/pgm2/ios6touchpadstyle.css
+++ b/fhem/www/pgm2/ios6touchpadstyle.css
@@ -3,7 +3,7 @@
 
 /* iOS 6 Theme for FHEM */
 /* by Sandra Ohmayer */
-/* http://www.animeschatten.net */
+/* http://www.foodcat.de */
 body {
 	width:100%
 }
@@ -72,9 +72,7 @@ and (orientation : portrait) {
 body {
 	width:320px
 }
-.colorpicker_widget {
-	display: none !important;
-}
+
 .SVGplot {
     width: 265px;
     overflow: scroll;
@@ -102,9 +100,7 @@ and (orientation : portrait) {
 body {
 	width:320px
 }
-.colorpicker_widget {
-	display: none !important;
-}
+
 .SVGplot {
     width: 265px;
     overflow: scroll;
@@ -131,9 +127,7 @@ and (orientation : portrait) {
 body {
 	width:375px
 }
-.colorpicker_widget {
-	display: none !important;
-}
+
 .SVGplot {
     width: 320px;
     overflow: scroll;
@@ -163,9 +157,6 @@ body {
     width: 359px;
     overflow: scroll;
 }
-.colorpicker_widget {
-display: none;
-}
 }
 
 /* iPhone 6+(landscape) ----------- */
@@ -195,9 +186,6 @@ and (orientation : portrait) {
 .isAndroidPhone {
 	width:360px;
 }
-.colorpicker_widget {
-display: none;
-}
 .isAndroidTablet {
 }
 }
@@ -606,7 +594,8 @@ table.block td {
 
 table.block td {
 	border-top:1px solid #fdfdfd;
-	border-bottom:1px solid #cbcbcb
+	border-bottom:1px solid #cbcbcb;
+	padding-right: 9px;
 }
 
 table.block tr:first-child td {
@@ -620,7 +609,6 @@ table.block tr:last-child td {
 .block td:first-child {
 	padding-left:10px;
 	font-weight:700;
-    	word-break: break-word;
 }
 
 .block > tbody > tr > td:last-child {
@@ -742,9 +730,13 @@ table.room tr.sel a:hover svg {
 	box-shadow:0 1px #fefefe,inset 0 1px #d7d7d7;
 	background:#f7f7f7
 }
+.colorpicker {
+	display: inline-block;
+}
 
 .slider {
-	margin-top:0px;
+	margin-top: 4px;
+    margin-bottom: 4px;
 	display:inline-block;
 	-webkit-box-sizing:border-box;
 	-moz-box-sizing:padding-box;