cyberweb 0.4.174 → 0.5.225

data/examples/html/colour_wheel.html

@@ -6,6 +6,12 @@
 <link rel="stylesheet" type="text/css" href="../../lib/cyberweb/cascading_style_sheets/fonts.css" />
 <link rel="stylesheet" type="text/css" href="../../lib/cyberweb/cascading_style_sheets/colours.css" />
 
+<style>
+td {
+  padding: 4px;
+}
+</style>
+
 <script>
 
 /* w3color.js ver.1.18 by w3schools.com (Do not remove this line)*/
@@ -18,28 +24,28 @@ function w3color(color, elmnt) {
 }
 w3color.prototype = {
   toRgbString : function () {
-    return "rgb(" + this.red + ", " + this.green + ", " + this.blue + ")";
+  return "rgb(" + this.red + ", " + this.green + ", " + this.blue + ")";
   },
   toRgbaString : function () {
-    return "rgba(" + this.red + ", " + this.green + ", " + this.blue + ", " + this.opacity + ")";
+  return "rgba(" + this.red + ", " + this.green + ", " + this.blue + ", " + this.opacity + ")";
   },
   toHwbString : function () {
-    return "hwb(" + this.hue + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%)";
+  return "hwb(" + this.hue + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%)";
   },
   toHwbStringDecimal : function () {
-    return "hwb(" + this.hue + ", " + this.whiteness + ", " + this.blackness + ")";
+  return "hwb(" + this.hue + ", " + this.whiteness + ", " + this.blackness + ")";
   },
   toHwbaString : function () {
-    return "hwba(" + this.hue + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%, " + this.opacity + ")";
+  return "hwba(" + this.hue + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%, " + this.opacity + ")";
   },
   toHslString : function () {
-    return "hsl(" + this.hue + ", " + Math.round(this.sat * 100) + "%, " + Math.round(this.lightness * 100) + "%)";
+  return "hsl(" + this.hue + ", " + Math.round(this.sat * 100) + "%, " + Math.round(this.lightness * 100) + "%)";
   },
   toHslStringDecimal : function () {
-    return "hsl(" + this.hue + ", " + this.sat + ", " + this.lightness + ")";
+  return "hsl(" + this.hue + ", " + this.sat + ", " + this.lightness + ")";
   },
   toHslaString : function () {
-    return "hsla(" + this.hue + ", " + Math.round(this.sat * 100) + "%, " + Math.round(this.lightness * 100) + "%, " + this.opacity + ")";
+  return "hsla(" + this.hue + ", " + Math.round(this.sat * 100) + "%, " + Math.round(this.lightness * 100) + "%, " + this.opacity + ")";
   },
   toCmykString : function () {
     return "cmyk(" + Math.round(this.cyan * 100) + "%, " + Math.round(this.magenta * 100) + "%, " + Math.round(this.yellow * 100) + "%, " + Math.round(this.black * 100) + "%)";
@@ -48,103 +54,103 @@ w3color.prototype = {
     return "cmyk(" + this.cyan + ", " + this.magenta + ", " + this.yellow + ", " + this.black + ")";
   },
   toNcolString : function () {
-    return this.ncol + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%";
+  return this.ncol + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%";
   },
   toNcolStringDecimal : function () {
-    return this.ncol + ", " + this.whiteness + ", " + this.blackness;
+  return this.ncol + ", " + this.whiteness + ", " + this.blackness;
   },
   toNcolaString : function () {
-    return this.ncol + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%, " + this.opacity;
+  return this.ncol + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%, " + this.opacity;
   },
   toName : function () {
-    var r, g, b, colorhexs = getColorArr('hexs');
-    for (i = 0; i < colorhexs.length; i++) {
-      r = parseInt(colorhexs[i].substr(0,2), 16);
-      g = parseInt(colorhexs[i].substr(2,2), 16);
-      b = parseInt(colorhexs[i].substr(4,2), 16);
-      if (this.red == r && this.green == g && this.blue == b) {
-        return getColorArr('names')[i];
-      }
+  var r, g, b, colorhexs = getColorArr('hexs');
+  for (i = 0; i < colorhexs.length; i++) {
+    r = parseInt(colorhexs[i].substr(0,2), 16);
+    g = parseInt(colorhexs[i].substr(2,2), 16);
+    b = parseInt(colorhexs[i].substr(4,2), 16);
+    if (this.red == r && this.green == g && this.blue == b) {
+    return getColorArr('names')[i];
     }
-    return "";
+  }
+  return "";
   },
   toHexString : function () {
-    var r = toHex(this.red);
-    var g = toHex(this.green);
-    var b = toHex(this.blue);
-    return "#" +  r + g + b;
+  var r = toHex(this.red);
+  var g = toHex(this.green);
+  var b = toHex(this.blue);
+  return "#" +  r + g + b;
   },
   toRgb : function () {
-    return {r : this.red, g : this.green, b : this.blue, a : this.opacity};
+  return {r : this.red, g : this.green, b : this.blue, a : this.opacity};
   },
   toHsl : function () {
-    return {h : this.hue, s : this.sat, l : this.lightness, a : this.opacity};
+  return {h : this.hue, s : this.sat, l : this.lightness, a : this.opacity};
   },
   toHwb : function () {
-    return {h : this.hue, w : this.whiteness, b : this.blackness, a : this.opacity};
+  return {h : this.hue, w : this.whiteness, b : this.blackness, a : this.opacity};
   },
   toCmyk : function () {
-    return {c : this.cyan, m : this.magenta, y : this.yellow, k : this.black, a : this.opacity};
+  return {c : this.cyan, m : this.magenta, y : this.yellow, k : this.black, a : this.opacity};
   },
   toNcol : function () {
-    return {ncol : this.ncol, w : this.whiteness, b : this.blackness, a : this.opacity};
+  return {ncol : this.ncol, w : this.whiteness, b : this.blackness, a : this.opacity};
   },
   isDark : function (n) {
-    var m = (n || 128);
-    return (((this.red * 299 + this.green * 587 + this.blue * 114) / 1000) < m);
+  var m = (n || 128);
+  return (((this.red * 299 + this.green * 587 + this.blue * 114) / 1000) < m);
   },
   saturate : function (n) {
-    var x, rgb, color;
-    x = (n / 100 || 0.1);
-    this.sat += x;
-    if (this.sat > 1) {this.sat = 1;}
-    rgb = hslToRgb(this.hue, this.sat, this.lightness);
-    color = colorObject(rgb, this.opacity, this.hue, this.sat);
-    this.attachValues(color);
+  var x, rgb, color;
+  x = (n / 100 || 0.1);
+  this.sat += x;
+  if (this.sat > 1) {this.sat = 1;}
+  rgb = hslToRgb(this.hue, this.sat, this.lightness);
+  color = colorObject(rgb, this.opacity, this.hue, this.sat);
+  this.attachValues(color);
   },
   desaturate : function (n) {
-    var x, rgb, color;
-    x = (n / 100 || 0.1);
-    this.sat -= x;
-    if (this.sat < 0) {this.sat = 0;}
-    rgb = hslToRgb(this.hue, this.sat, this.lightness);
-    color = colorObject(rgb, this.opacity, this.hue, this.sat);
-    this.attachValues(color);
+  var x, rgb, color;
+  x = (n / 100 || 0.1);
+  this.sat -= x;
+  if (this.sat < 0) {this.sat = 0;}
+  rgb = hslToRgb(this.hue, this.sat, this.lightness);
+  color = colorObject(rgb, this.opacity, this.hue, this.sat);
+  this.attachValues(color);
   },
   lighter : function (n) {
-    var x, rgb, color;
-    x = (n / 100 || 0.1);
-    this.lightness += x;
-    if (this.lightness > 1) {this.lightness = 1;}
-    rgb = hslToRgb(this.hue, this.sat, this.lightness);
-    color = colorObject(rgb, this.opacity, this.hue, this.sat);
-    this.attachValues(color);
+  var x, rgb, color;
+  x = (n / 100 || 0.1);
+  this.lightness += x;
+  if (this.lightness > 1) {this.lightness = 1;}
+  rgb = hslToRgb(this.hue, this.sat, this.lightness);
+  color = colorObject(rgb, this.opacity, this.hue, this.sat);
+  this.attachValues(color);
   },
   darker : function (n) {
-    var x, rgb, color;
-    x = (n / 100 || 0.1);
-    this.lightness -= x;
-    if (this.lightness < 0) {this.lightness = 0;}
-    rgb = hslToRgb(this.hue, this.sat, this.lightness);
-    color = colorObject(rgb, this.opacity, this.hue, this.sat);
-    this.attachValues(color);
+  var x, rgb, color;
+  x = (n / 100 || 0.1);
+  this.lightness -= x;
+  if (this.lightness < 0) {this.lightness = 0;}
+  rgb = hslToRgb(this.hue, this.sat, this.lightness);
+  color = colorObject(rgb, this.opacity, this.hue, this.sat);
+  this.attachValues(color);
   },
   attachValues : function(color) {
-    this.red = color.red;
-    this.green = color.green;
-    this.blue = color.blue;
-    this.hue = color.hue;
-    this.sat = color.sat;
-    this.lightness = color.lightness;
-    this.whiteness = color.whiteness;
-    this.blackness = color.blackness;
-    this.cyan = color.cyan;
-    this.magenta = color.magenta;
-    this.yellow = color.yellow;
-    this.black = color.black;
-    this.ncol = color.ncol;
-    this.opacity = color.opacity;
-    this.valid = color.valid;
+  this.red = color.red;
+  this.green = color.green;
+  this.blue = color.blue;
+  this.hue = color.hue;
+  this.sat = color.sat;
+  this.lightness = color.lightness;
+  this.whiteness = color.whiteness;
+  this.blackness = color.blackness;
+  this.cyan = color.cyan;
+  this.magenta = color.magenta;
+  this.yellow = color.yellow;
+  this.black = color.black;
+  this.ncol = color.ncol;
+  this.opacity = color.opacity;
+  this.valid = color.valid;
   }
 };
 function toColorObject(c) {
@@ -154,136 +160,136 @@ function toColorObject(c) {
   y = c.substr(1);
   a = 1;
   if ((x == "R" || x == "Y" || x == "G" || x == "C" || x == "B" || x == "M" || x == "W") && !isNaN(y)) {
-    if (c.length == 6 && c.indexOf(",") == -1) {
-    } else {
-      c = "ncol(" + c + ")";
-    }
+  if (c.length == 6 && c.indexOf(",") == -1) {
+  } else {
+    c = "ncol(" + c + ")";
+  }
   }
   if (c.length != 3 && c.length != 6 && !isNaN(c)) {c = "ncol(" + c + ")";}
   if (c.indexOf(",") > 0 && c.indexOf("(") == -1) {c = "ncol(" + c + ")";}  
   if (c.substr(0, 3) == "rgb" || c.substr(0, 3) == "hsl" || c.substr(0, 3) == "hwb" || c.substr(0, 4) == "ncol" || c.substr(0, 4) == "cmyk") {
-    if (c.substr(0, 4) == "ncol") {
-      if (c.split(",").length == 4 && c.indexOf("ncola") == -1) {
-        c = c.replace("ncol", "ncola");
-      }
-      typ = "ncol";
-      c = c.substr(4);
-    } else if (c.substr(0, 4) == "cmyk") {
-      typ = "cmyk";
-      c = c.substr(4);
-    } else {
-      typ = c.substr(0, 3);
-      c = c.substr(3);
+  if (c.substr(0, 4) == "ncol") {
+    if (c.split(",").length == 4 && c.indexOf("ncola") == -1) {
+    c = c.replace("ncol", "ncola");
     }
-    arrlength = 3;
-    opacity = false;
-    if (c.substr(0, 1).toLowerCase() == "a") {
-      arrlength = 4;
-      opacity = true;
-      c = c.substr(1);
-    } else if (typ == "cmyk") {
-      arrlength = 4;
-      if (c.split(",").length == 5) {
-        arrlength = 5;
-        opacity = true;
-      }
+    typ = "ncol";
+    c = c.substr(4);
+  } else if (c.substr(0, 4) == "cmyk") {
+    typ = "cmyk";
+    c = c.substr(4);
+  } else {
+    typ = c.substr(0, 3);
+    c = c.substr(3);
+  }
+  arrlength = 3;
+  opacity = false;
+  if (c.substr(0, 1).toLowerCase() == "a") {
+    arrlength = 4;
+    opacity = true;
+    c = c.substr(1);
+  } else if (typ == "cmyk") {
+    arrlength = 4;
+    if (c.split(",").length == 5) {
+    arrlength = 5;
+    opacity = true;
+    }
+  }
+  c = c.replace("(", "");
+  c = c.replace(")", "");
+  arr = c.split(",");
+  if (typ == "rgb") {
+    if (arr.length != arrlength) {
+    return emptyObject();
+    }
+    for (i = 0; i < arrlength; i++) {
+    if (arr[i] == "" || arr[i] == " ") {arr[i] = "0"; }
+    if (arr[i].indexOf("%") > -1) {
+      arr[i] = arr[i].replace("%", "");
+      arr[i] = Number(arr[i] / 100);
+      if (i < 3 ) {arr[i] = Math.round(arr[i] * 255);}
     }
-    c = c.replace("(", "");
-    c = c.replace(")", "");
-    arr = c.split(",");
-    if (typ == "rgb") {
-      if (arr.length != arrlength) {
-        return emptyObject();
-      }
-      for (i = 0; i < arrlength; i++) {
-        if (arr[i] == "" || arr[i] == " ") {arr[i] = "0"; }
-        if (arr[i].indexOf("%") > -1) {
-          arr[i] = arr[i].replace("%", "");
-          arr[i] = Number(arr[i] / 100);
-          if (i < 3 ) {arr[i] = Math.round(arr[i] * 255);}
-        }
-        if (isNaN(arr[i])) {return emptyObject(); }
-        if (parseInt(arr[i]) > 255) {arr[i] = 255; }
-        if (i < 3) {arr[i] = parseInt(arr[i]);}
-        if (i == 3 && Number(arr[i]) > 1) {arr[i] = 1;}
-      }
-      rgb = {r : arr[0], g : arr[1], b : arr[2]};
-      if (opacity == true) {a = Number(arr[3]);}
+    if (isNaN(arr[i])) {return emptyObject(); }
+    if (parseInt(arr[i]) > 255) {arr[i] = 255; }
+    if (i < 3) {arr[i] = parseInt(arr[i]);}
+    if (i == 3 && Number(arr[i]) > 1) {arr[i] = 1;}
     }
-    if (typ == "hsl" || typ == "hwb" || typ == "ncol") {
-      while (arr.length < arrlength) {arr.push("0"); }
-      if (typ == "hsl" || typ == "hwb") {
-        if (parseInt(arr[0]) >= 360) {arr[0] = 0; }
-      }
-      for (i = 1; i < arrlength; i++) {
-        if (arr[i].indexOf("%") > -1) {
-          arr[i] = arr[i].replace("%", "");
-          arr[i] = Number(arr[i]);
-          if (isNaN(arr[i])) {return emptyObject(); }
-          arr[i] = arr[i] / 100;
-        } else {
-          arr[i] = Number(arr[i]);
-        }
-        if (Number(arr[i]) > 1) {arr[i] = 1;}
-        if (Number(arr[i]) < 0) {arr[i] = 0;}
-      }
-      if (typ == "hsl") {rgb = hslToRgb(arr[0], arr[1], arr[2]); hue = Number(arr[0]); sat = Number(arr[1]);}
-      if (typ == "hwb") {rgb = hwbToRgb(arr[0], arr[1], arr[2]);}
-      if (typ == "ncol") {rgb = ncolToRgb(arr[0], arr[1], arr[2]);}
-      if (opacity == true) {a = Number(arr[3]);}
+    rgb = {r : arr[0], g : arr[1], b : arr[2]};
+    if (opacity == true) {a = Number(arr[3]);}
+  }
+  if (typ == "hsl" || typ == "hwb" || typ == "ncol") {
+    while (arr.length < arrlength) {arr.push("0"); }
+    if (typ == "hsl" || typ == "hwb") {
+    if (parseInt(arr[0]) >= 360) {arr[0] = 0; }
+    }
+    for (i = 1; i < arrlength; i++) {
+    if (arr[i].indexOf("%") > -1) {
+      arr[i] = arr[i].replace("%", "");
+      arr[i] = Number(arr[i]);
+      if (isNaN(arr[i])) {return emptyObject(); }
+      arr[i] = arr[i] / 100;
+    } else {
+      arr[i] = Number(arr[i]);
     }
-    if (typ == "cmyk") {
-      while (arr.length < arrlength) {arr.push("0"); }
-      for (i = 0; i < arrlength; i++) {
-        if (arr[i].indexOf("%") > -1) {
-          arr[i] = arr[i].replace("%", "");
-          arr[i] = Number(arr[i]);
-          if (isNaN(arr[i])) {return emptyObject(); }
-          arr[i] = arr[i] / 100;
-        } else {
-          arr[i] = Number(arr[i]);
-        }
-        if (Number(arr[i]) > 1) {arr[i] = 1;}
-        if (Number(arr[i]) < 0) {arr[i] = 0;}
-      }
-      rgb = cmykToRgb(arr[0], arr[1], arr[2], arr[3]);
-      if (opacity == true) {a = Number(arr[4]);}
+    if (Number(arr[i]) > 1) {arr[i] = 1;}
+    if (Number(arr[i]) < 0) {arr[i] = 0;}
     }
+    if (typ == "hsl") {rgb = hslToRgb(arr[0], arr[1], arr[2]); hue = Number(arr[0]); sat = Number(arr[1]);}
+    if (typ == "hwb") {rgb = hwbToRgb(arr[0], arr[1], arr[2]);}
+    if (typ == "ncol") {rgb = ncolToRgb(arr[0], arr[1], arr[2]);}
+    if (opacity == true) {a = Number(arr[3]);}
+  }
+  if (typ == "cmyk") {
+    while (arr.length < arrlength) {arr.push("0"); }
+    for (i = 0; i < arrlength; i++) {
+    if (arr[i].indexOf("%") > -1) {
+      arr[i] = arr[i].replace("%", "");
+      arr[i] = Number(arr[i]);
+      if (isNaN(arr[i])) {return emptyObject(); }
+      arr[i] = arr[i] / 100;
+    } else {
+      arr[i] = Number(arr[i]);
+    }
+    if (Number(arr[i]) > 1) {arr[i] = 1;}
+    if (Number(arr[i]) < 0) {arr[i] = 0;}
+    }
+    rgb = cmykToRgb(arr[0], arr[1], arr[2], arr[3]);
+    if (opacity == true) {a = Number(arr[4]);}
+  }
   } else if (c.substr(0, 3) == "ncs") {
-    rgb = ncsToRgb(c);
+  rgb = ncsToRgb(c);
   } else {
-    match = false;
-    colornames = getColorArr('names');
-    for (i = 0; i < colornames.length; i++) {
-      if (c.toLowerCase() == colornames[i].toLowerCase()) {
-        colorhexs = getColorArr('hexs');
-        match = true;
-        rgb = {
-          r : parseInt(colorhexs[i].substr(0,2), 16),
-          g : parseInt(colorhexs[i].substr(2,2), 16),
-          b : parseInt(colorhexs[i].substr(4,2), 16)
-        };
-        break;
-      }
+  match = false;
+  colornames = getColorArr('names');
+  for (i = 0; i < colornames.length; i++) {
+    if (c.toLowerCase() == colornames[i].toLowerCase()) {
+    colorhexs = getColorArr('hexs');
+    match = true;
+    rgb = {
+      r : parseInt(colorhexs[i].substr(0,2), 16),
+      g : parseInt(colorhexs[i].substr(2,2), 16),
+      b : parseInt(colorhexs[i].substr(4,2), 16)
+    };
+    break;
     }
-    if (match == false) {
-      c = c.replace("#", "");
-      if (c.length == 3) {c = c.substr(0,1) + c.substr(0,1) + c.substr(1,1) + c.substr(1,1) + c.substr(2,1) + c.substr(2,1);}
-      for (i = 0; i < c.length; i++) {
-        if (!isHex(c.substr(i, 1))) {return emptyObject(); }
-      }
-      arr[0] = parseInt(c.substr(0,2), 16);
-      arr[1] = parseInt(c.substr(2,2), 16);
-      arr[2] = parseInt(c.substr(4,2), 16);
-      for (i = 0; i < 3; i++) {
-        if (isNaN(arr[i])) {return emptyObject(); }
-      }
-      rgb = {
-        r : arr[0],
-        g : arr[1],
-        b : arr[2]
-      };
+  }
+  if (match == false) {
+    c = c.replace("#", "");
+    if (c.length == 3) {c = c.substr(0,1) + c.substr(0,1) + c.substr(1,1) + c.substr(1,1) + c.substr(2,1) + c.substr(2,1);}
+    for (i = 0; i < c.length; i++) {
+    if (!isHex(c.substr(i, 1))) {return emptyObject(); }
+    }
+    arr[0] = parseInt(c.substr(0,2), 16);
+    arr[1] = parseInt(c.substr(2,2), 16);
+    arr[2] = parseInt(c.substr(4,2), 16);
+    for (i = 0; i < 3; i++) {
+    if (isNaN(arr[i])) {return emptyObject(); }
     }
+    rgb = {
+    r : arr[0],
+    g : arr[1],
+    b : arr[2]
+    };
+  }
   }
   return colorObject(rgb, a, hue, sat);
 }
@@ -298,42 +304,42 @@ function colorObject(rgb, a, h, s) {
   sat = (s || hsl.s);   
   ncol = hueToNcol(hue);
   color = {
-    red : rgb.r,
-    green : rgb.g,
-    blue : rgb.b,
-    hue : hue,
-    sat : sat,
-    lightness : hsl.l,
-    whiteness : hwb.w,
-    blackness : hwb.b,
-    cyan : cmyk.c,
-    magenta : cmyk.m,
-    yellow : cmyk.y,
-    black : cmyk.k,
-    ncol : ncol,
-    opacity : a,
-    valid : true
+  red : rgb.r,
+  green : rgb.g,
+  blue : rgb.b,
+  hue : hue,
+  sat : sat,
+  lightness : hsl.l,
+  whiteness : hwb.w,
+  blackness : hwb.b,
+  cyan : cmyk.c,
+  magenta : cmyk.m,
+  yellow : cmyk.y,
+  black : cmyk.k,
+  ncol : ncol,
+  opacity : a,
+  valid : true
   };
   color = roundDecimals(color);
   return color;
 }
 function emptyObject() {
   return {
-    red : 0,
-    green : 0,
-    blue : 0,
-    hue : 0,
-    sat : 0,
-    lightness : 0,
-    whiteness : 0,
-    blackness : 0,
-    cyan : 0,
-    magenta : 0,
-    yellow : 0,
-    black : 0,
-    ncol : "R",
-    opacity : 1,
-    valid : false
+  red : 0,
+  green : 0,
+  blue : 0,
+  hue : 0,
+  sat : 0,
+  lightness : 0,
+  whiteness : 0,
+  blackness : 0,
+  cyan : 0,
+  magenta : 0,
+  yellow : 0,
+  black : 0,
+  ncol : "R",
+  opacity : 1,
+  valid : false
   };
 }
 function getColorArr(x) {
@@ -361,9 +367,9 @@ function hslToRgb(hue, sat, light) {
   var t1, t2, r, g, b;
   hue = hue / 60;
   if ( light <= 0.5 ) {
-    t2 = light * (sat + 1);
+  t2 = light * (sat + 1);
   } else {
-    t2 = light + sat - (light * sat);
+  t2 = light + sat - (light * sat);
   }
   t1 = light * 2 - t2;
   r = hueToRgb(t1, t2, hue + 2) * 255;
@@ -387,13 +393,13 @@ function hwbToRgb(hue, white, black) {
   rgbArr[2] = rgb.b / 255;
   tot = white + black;
   if (tot > 1) {
-    white = Number((white / tot).toFixed(2));
-    black = Number((black / tot).toFixed(2));
+  white = Number((white / tot).toFixed(2));
+  black = Number((black / tot).toFixed(2));
   }
   for (i = 0; i < 3; i++) {
-    rgbArr[i] *= (1 - (white) - (black));
-    rgbArr[i] += (white);
-    rgbArr[i] = Number(rgbArr[i] * 255);
+  rgbArr[i] *= (1 - (white) - (black));
+  rgbArr[i] += (white);
+  rgbArr[i] = Number(rgbArr[i] * 255);
   }
   return {r : rgbArr[0], g : rgbArr[1], b : rgbArr[2] };
 }
@@ -408,28 +414,28 @@ function ncolToRgb(ncol, white, black) {
   var letter, percent, h, w, b;
   h = ncol;
   if (isNaN(ncol.substr(0,1))) {
-    letter = ncol.substr(0,1).toUpperCase();
-    percent = ncol.substr(1);
-    if (percent == "") {percent = 0;}
-    percent = Number(percent);
-    if (isNaN(percent)) {return false;}
-    if (letter == "R") {h = 0 + (percent * 0.6);}
-    if (letter == "Y") {h = 60 + (percent * 0.6);}
-    if (letter == "G") {h = 120 + (percent * 0.6);}
-    if (letter == "C") {h = 180 + (percent * 0.6);}
-    if (letter == "B") {h = 240 + (percent * 0.6);}
-    if (letter == "M") {h = 300 + (percent * 0.6);}
-    if (letter == "W") {
-      h = 0;
-      white = 1 - (percent / 100);
-      black = (percent / 100);
-    }
+  letter = ncol.substr(0,1).toUpperCase();
+  percent = ncol.substr(1);
+  if (percent == "") {percent = 0;}
+  percent = Number(percent);
+  if (isNaN(percent)) {return false;}
+  if (letter == "R") {h = 0 + (percent * 0.6);}
+  if (letter == "Y") {h = 60 + (percent * 0.6);}
+  if (letter == "G") {h = 120 + (percent * 0.6);}
+  if (letter == "C") {h = 180 + (percent * 0.6);}
+  if (letter == "B") {h = 240 + (percent * 0.6);}
+  if (letter == "M") {h = 300 + (percent * 0.6);}
+  if (letter == "W") {
+    h = 0;
+    white = 1 - (percent / 100);
+    black = (percent / 100);
+  }
   }
   return hwbToRgb(h, white, black);
 }
 function hueToNcol(hue) {
   while (hue >= 360) {
-    hue = hue - 360;
+  hue = hue - 360;
   }
   if (hue < 60) {return "R" + (hue / 0.6); }
   if (hue < 120) {return "Y" + ((hue - 60) / 0.6); }
@@ -454,100 +460,100 @@ function ncsToRgb(ncs){
   if (bc != "N" && bc != "Y" && bc != "R" && bc != "B" && bc != "G") {return false;}
   percent = parseInt(ncs[4], 10) || 0;
   if (bc !== 'N') {
-    black1 = (1.05 * black - 5.25);
-    chroma1 = chroma;
-    if (bc === 'Y' && percent <= 60) {
-      red1 = 1;
-    } else if (( bc === 'Y' && percent > 60) || ( bc === 'R' && percent <= 80)) {
-      if (bc === 'Y') {
-        factor1 = percent - 60;
-      } else {
-        factor1 = percent + 40;
-      }
-      red1 = ((Math.sqrt(14884 - Math.pow(factor1, 2))) - 22) / 100;
-    } else if ((bc === 'R' && percent > 80) || (bc === 'B')) {
-      red1 = 0;
-    } else if (bc === 'G') {
-      factor1 = (percent - 170);
-      red1 = ((Math.sqrt(33800 - Math.pow(factor1, 2))) - 70) / 100;
+  black1 = (1.05 * black - 5.25);
+  chroma1 = chroma;
+  if (bc === 'Y' && percent <= 60) {
+    red1 = 1;
+  } else if (( bc === 'Y' && percent > 60) || ( bc === 'R' && percent <= 80)) {
+    if (bc === 'Y') {
+    factor1 = percent - 60;
+    } else {
+    factor1 = percent + 40;
     }
-    if (bc === 'Y' && percent <= 80) {
-      blue1 = 0;
-    } else if (( bc === 'Y' && percent > 80) || ( bc === 'R' && percent <= 60)) {
-      if (bc ==='Y') {
-        factor1 = (percent - 80) + 20.5;
-      } else {
-        factor1 = (percent + 20) + 20.5;
-      }
-      blue1 = (104 - (Math.sqrt(11236 - Math.pow(factor1, 2)))) / 100;
-    } else if ((bc === 'R' && percent > 60) || ( bc === 'B' && percent <= 80)) {
-      if (bc ==='R') {
-        factor1 = (percent - 60) - 60;
-      } else {
-        factor1 = (percent + 40) - 60;
-      }
-      blue1 = ((Math.sqrt(10000 - Math.pow(factor1, 2))) - 10) / 100;
-    } else if (( bc === 'B' && percent > 80) || ( bc === 'G' && percent <= 40)) {
-      if (bc === 'B') {
-        factor1 = (percent - 80) - 131;
-      } else {
-        factor1 = (percent + 20) - 131;
-      }
-      blue1 = (122 - (Math.sqrt(19881 - Math.pow(factor1, 2)))) / 100;
-    } else if (bc === 'G' && percent > 40) {
-      blue1 = 0;
+    red1 = ((Math.sqrt(14884 - Math.pow(factor1, 2))) - 22) / 100;
+  } else if ((bc === 'R' && percent > 80) || (bc === 'B')) {
+    red1 = 0;
+  } else if (bc === 'G') {
+    factor1 = (percent - 170);
+    red1 = ((Math.sqrt(33800 - Math.pow(factor1, 2))) - 70) / 100;
+  }
+  if (bc === 'Y' && percent <= 80) {
+    blue1 = 0;
+  } else if (( bc === 'Y' && percent > 80) || ( bc === 'R' && percent <= 60)) {
+    if (bc ==='Y') {
+    factor1 = (percent - 80) + 20.5;
+    } else {
+    factor1 = (percent + 20) + 20.5;
     }
-    if (bc === 'Y') {
-      green1 = (85 - 17/20 * percent) / 100;
-    } else if (bc === 'R' && percent <= 60) {
-      green1 = 0;
-    } else if (bc === 'R' && percent > 60) {
-      factor1 = (percent - 60) + 35;
-      green1 = (67.5 - (Math.sqrt(5776 - Math.pow(factor1, 2)))) / 100;
-    } else if (bc === 'B' && percent <= 60) {
-      factor1 = (1*percent - 68.5);
-      green1 = (6.5 + (Math.sqrt(7044.5 - Math.pow(factor1, 2)))) / 100;
-    } else if ((bc === 'B' && percent > 60) || ( bc === 'G' && percent <= 60)) {
-      green1 = 0.9;
-    } else if (bc === 'G' && percent > 60) {
-      factor1 = (percent - 60);
-      green1 = (90 - (1/8 * factor1)) / 100;
+    blue1 = (104 - (Math.sqrt(11236 - Math.pow(factor1, 2)))) / 100;
+  } else if ((bc === 'R' && percent > 60) || ( bc === 'B' && percent <= 80)) {
+    if (bc ==='R') {
+    factor1 = (percent - 60) - 60;
+    } else {
+    factor1 = (percent + 40) - 60;
     }
-    factor1 = (red1 + green1 + blue1)/3;
-    red2 = ((factor1 - red1) * (100 - chroma1) / 100) + red1;
-    green2 = ((factor1 - green1) * (100 - chroma1) / 100) + green1;
-    blue2 = ((factor1 - blue1) * (100 - chroma1) / 100) + blue1;
-    if (red2 > green2 && red2 > blue2) {
-      max = red2;
-    } else if (green2 > red2 && green2 > blue2) {
-      max = green2;
-    } else if (blue2 > red2 && blue2 > green2) {
-      max = blue2;
+    blue1 = ((Math.sqrt(10000 - Math.pow(factor1, 2))) - 10) / 100;
+  } else if (( bc === 'B' && percent > 80) || ( bc === 'G' && percent <= 40)) {
+    if (bc === 'B') {
+    factor1 = (percent - 80) - 131;
     } else {
-      max = (red2 + green2 + blue2) / 3;
+    factor1 = (percent + 20) - 131;
     }
-    factor2 = 1 / max;
-    r = parseInt((red2 * factor2 * (100 - black1) / 100) * 255, 10);
-    g = parseInt((green2 * factor2 * (100 - black1) / 100) * 255, 10);
-    b = parseInt((blue2 * factor2 * (100 - black1) / 100) * 255, 10);
-    if (r > 255) {r = 255;}
-    if (g > 255) {g = 255;}
-    if (b > 255) {b = 255;}
-    if (r < 0) {r = 0;}
-    if (g < 0) {g = 0;}
-    if (b < 0) {b = 0;}
+    blue1 = (122 - (Math.sqrt(19881 - Math.pow(factor1, 2)))) / 100;
+  } else if (bc === 'G' && percent > 40) {
+    blue1 = 0;
+  }
+  if (bc === 'Y') {
+    green1 = (85 - 17/20 * percent) / 100;
+  } else if (bc === 'R' && percent <= 60) {
+    green1 = 0;
+  } else if (bc === 'R' && percent > 60) {
+    factor1 = (percent - 60) + 35;
+    green1 = (67.5 - (Math.sqrt(5776 - Math.pow(factor1, 2)))) / 100;
+  } else if (bc === 'B' && percent <= 60) {
+    factor1 = (1*percent - 68.5);
+    green1 = (6.5 + (Math.sqrt(7044.5 - Math.pow(factor1, 2)))) / 100;
+  } else if ((bc === 'B' && percent > 60) || ( bc === 'G' && percent <= 60)) {
+    green1 = 0.9;
+  } else if (bc === 'G' && percent > 60) {
+    factor1 = (percent - 60);
+    green1 = (90 - (1/8 * factor1)) / 100;
+  }
+  factor1 = (red1 + green1 + blue1)/3;
+  red2 = ((factor1 - red1) * (100 - chroma1) / 100) + red1;
+  green2 = ((factor1 - green1) * (100 - chroma1) / 100) + green1;
+  blue2 = ((factor1 - blue1) * (100 - chroma1) / 100) + blue1;
+  if (red2 > green2 && red2 > blue2) {
+    max = red2;
+  } else if (green2 > red2 && green2 > blue2) {
+    max = green2;
+  } else if (blue2 > red2 && blue2 > green2) {
+    max = blue2;
   } else {
-    grey = parseInt((1 - black / 100) * 255, 10);
-    if (grey > 255) {grey = 255;}
-    if (grey < 0) {grey = 0;}
-    r = grey;
-    g = grey;
-    b = grey;
+    max = (red2 + green2 + blue2) / 3;
+  }
+  factor2 = 1 / max;
+  r = parseInt((red2 * factor2 * (100 - black1) / 100) * 255, 10);
+  g = parseInt((green2 * factor2 * (100 - black1) / 100) * 255, 10);
+  b = parseInt((blue2 * factor2 * (100 - black1) / 100) * 255, 10);
+  if (r > 255) {r = 255;}
+  if (g > 255) {g = 255;}
+  if (b > 255) {b = 255;}
+  if (r < 0) {r = 0;}
+  if (g < 0) {g = 0;}
+  if (b < 0) {b = 0;}
+  } else {
+  grey = parseInt((1 - black / 100) * 255, 10);
+  if (grey > 255) {grey = 255;}
+  if (grey < 0) {grey = 0;}
+  r = grey;
+  g = grey;
+  b = grey;
   }
   return {
-    r : r,
-    g : g,
-    b : b
+  r : r,
+  g : g,
+  b : b
   };
 }
 function rgbToHsl(r, g, b) {
@@ -559,30 +565,30 @@ function rgbToHsl(r, g, b) {
   max = rgb[0];
   maxcolor = 0;
   for (i = 0; i < rgb.length - 1; i++) {
-    if (rgb[i + 1] <= min) {min = rgb[i + 1];}
-    if (rgb[i + 1] >= max) {max = rgb[i + 1];maxcolor = i + 1;}
+  if (rgb[i + 1] <= min) {min = rgb[i + 1];}
+  if (rgb[i + 1] >= max) {max = rgb[i + 1];maxcolor = i + 1;}
   }
   if (maxcolor == 0) {
-    h = (rgb[1] - rgb[2]) / (max - min);
+  h = (rgb[1] - rgb[2]) / (max - min);
   }
   if (maxcolor == 1) {
-    h = 2 + (rgb[2] - rgb[0]) / (max - min);
+  h = 2 + (rgb[2] - rgb[0]) / (max - min);
   }
   if (maxcolor == 2) {
-    h = 4 + (rgb[0] - rgb[1]) / (max - min);
+  h = 4 + (rgb[0] - rgb[1]) / (max - min);
   }
   if (isNaN(h)) {h = 0;}
   h = h * 60;
   if (h < 0) {h = h + 360; }
   l = (min + max) / 2;
   if (min == max) {
-    s = 0;
+  s = 0;
   } else {
-    if (l < 0.5) {
-      s = (max - min) / (max + min);
-    } else {
-      s = (max - min) / (2 - max - min);
-    }
+  if (l < 0.5) {
+    s = (max - min) / (max + min);
+  } else {
+    s = (max - min) / (2 - max - min);
+  }
   }
   s = s;
   return {h : h, s : s, l : l};
@@ -596,13 +602,13 @@ function rgbToHwb(r, g, b) {
   min = Math.min(r, g, b);
   chroma = max - min;
   if (chroma == 0) {
-    h = 0;
+  h = 0;
   } else if (r == max) {
-    h = (((g - b) / chroma) % 6) * 360;
+  h = (((g - b) / chroma) % 6) * 360;
   } else if (g == max) {
-    h = ((((b - r) / chroma) + 2) % 6) * 360;
+  h = ((((b - r) / chroma) + 2) % 6) * 360;
   } else {
-    h = ((((r - g) / chroma) + 4) % 6) * 360;
+  h = ((((r - g) / chroma) + 4) % 6) * 360;
   }
   w = min;
   bl = 1 - max;
@@ -616,13 +622,13 @@ function rgbToCmyk(r, g, b) {
   max = Math.max(r, g, b);
   k = 1 - max;
   if (k == 1) {
-    c = 0;
-    m = 0;
-    y = 0;
+  c = 0;
+  m = 0;
+  y = 0;
   } else {
-    c = (1 - r - k) / (1 - k);
-    m = (1 - g - k) / (1 - k);
-    y = (1 - b - k) / (1 - k);
+  c = (1 - r - k) / (1 - k);
+  m = (1 - g - k) / (1 - k);
+  y = (1 - b - k) / (1 - k);
   }
   return {c : c, m : m, y : y, k : k};
 }
@@ -648,10 +654,10 @@ function w3SetColorsByAttribute() {
   var z, i, att;
   z = document.getElementsByTagName("*");
   for (i = 0; i < z.length; i++) {
-    att = z[i].getAttribute("data-w3-color");
-    if (att) {
-      z[i].style.backgroundColor = w3color(att).toRgbString();      
-    }
+  att = z[i].getAttribute("data-w3-color");
+  if (att) {
+    z[i].style.backgroundColor = w3color(att).toRgbString();    
+  }
   }
 }
 </script>
@@ -659,8 +665,9 @@ function w3SetColorsByAttribute() {
 
 <body style="margin: 0px; paddding: 0px">
 
-<div class="BG_Black" style="background-color:black">
-<table class="pad1em" style="border:1px solid grey">
+
+<div class="BG_Black" style="background-color:black; padding:0.5em;">
+<table class="pad1em" style="border:1px solid grey; padding: 0.8em;">
 <tr><td>
 <span style="color:#F0F8FF">
 aliceblue - color: #F0F8FF
@@ -1237,12 +1244,14 @@ yellowgreen - color: #9ACD32
 </td></tr></table></div>
 
 
-<div class="w3-container w3-padding-large" style="background-color:#f1f1f1;border:1px solid #d3d3d3;">
+<div class="w3-container w3-padding-large" style="background-color:#f1f1f1;border:1px solid #d3d3d3; padding: 15px;">
  <div class="w3-row">
  <div class="w3-col l6">
  <h2>Enter a colour next</h2>
- <label><span class="w3-text-grey"><i>Enter the rgb() value here:</i></span></label>
- <input id="color01" type="text" class="bblack1" style="border: 1px solid black; padding: 8px; background-color: gold; text-align: center" value="rgb(0, 191, 255)" class="w3-input w3-border" oninput="convertColor()" onchange="validate_the_colour()" onkeydown="submitOnEnter(event)">
+ <label>
+   <span class="w3-text-grey"><i>Enter the rgb() value here:</i></span>
+ </label>
+ <input id="color01" type="text" class="bblack1" style="font-size: 2em; border: 1px solid black; padding: 8px; background-color: gold; text-align: center" value="rgb(0, 191, 255)" class="w3-input w3-border" oninput="convertColor()" onchange="validate_the_colour()" onkeydown="submitOnEnter(event)">
  <br>
  <div class="resultStrings">
  <div id="error01"></div>
@@ -1252,7 +1261,7 @@ yellowgreen - color: #9ACD32
  <tr><td id="helphex01"></td><td id="hex01"></td></tr>
  <tr><td id="helphsl01"></td><td id="hsl01"></td></tr>
  <tr><td id="helphwb01"></td><td id="hwb01"></td></tr>
- <tr><td id="helpcmyk01"></td><td id="cmyk01"></td></tr>        
+ <tr><td id="helpcmyk01"></td><td id="cmyk01"></td></tr>    
  <tr><td id="helpncol01"></td><td id="ncol01"></td></tr>
  </table>
  </div>
@@ -1277,59 +1286,57 @@ yellowgreen - color: #9ACD32
 
 
 
-
-
 <script>
 function convertColor() {
-    color = document.getElementById("color01").value;
-    if (color == "") {
-        validate_the_colour();
-        return;
+  color = document.getElementById("color01").value;
+  if (color == "") {
+    validate_the_colour();
+    return;
+  }
+  color = color.toLowerCase();
+  //document.getElementsByTagName("h1")[0].style.color = w3color(color).toRgbString();
+  c = w3color(color);
+  if (c.valid) {
+    document.getElementById("resultTable").style.display = "table";
+    document.getElementById("error01").innerHTML = "";
+    document.getElementById("result01").style.backgroundColor = c.toRgbaString();
+    if (c.toName() == "") {
+      document.getElementById("name01").style.fontStyle = "italic";
+      document.getElementById("name01").style.color = "#757575";
+      document.getElementById("name01").innerHTML = "no name";
+    } else {
+      document.getElementById("name01").style.fontStyle = "normal";
+      document.getElementById("name01").style.color = "#000000";
+      document.getElementById("name01").innerHTML = c.toName();
     }
-    color = color.toLowerCase();
-    //document.getElementsByTagName("h1")[0].style.color = w3color(color).toRgbString();
-    c = w3color(color);
-    if (c.valid) {
-        document.getElementById("resultTable").style.display = "table";
-        document.getElementById("error01").innerHTML = "";
-        document.getElementById("result01").style.backgroundColor = c.toRgbaString();
-        if (c.toName() == "") {
-            document.getElementById("name01").style.fontStyle = "italic";
-            document.getElementById("name01").style.color = "#757575";
-            document.getElementById("name01").innerHTML = "no name";
-        } else {
-            document.getElementById("name01").style.fontStyle = "normal";
-            document.getElementById("name01").style.color = "#000000";
-            document.getElementById("name01").innerHTML = c.toName();
-        }
-        document.getElementById("helpname01").innerHTML = "Name";
-        document.getElementById("hex01").innerHTML = c.toHexString();
-        document.getElementById("helphex01").innerHTML = "<a href='colors_hexadecimal.asp?color=" + c.toHexString().substr(1) + "'>Hex</a>";
-        document.getElementById("cmyk01").innerHTML = c.toCmykString();
-        document.getElementById("helpcmyk01").innerHTML = "<a href='colors_cmyk.asp?color=" + c.toCmykStringDecimal() + "'>Cmyk</a>";
-        document.getElementById("helpncol01").innerHTML = "<a href='colors_ncol.asp?color=" + c.toNcolStringDecimal() + "'>Ncol</a>";
-        if ((color.indexOf("rgba") > -1 || color.indexOf("hsla") > -1 || color.indexOf("hwba") > -1 || color.indexOf("ncola")) > -1
-            || (color.indexOf("cmyk") == -1 && color.split(",").length == 4)
-            || (color.indexOf("cmyk") > -1 && color.split(",").length == 5)) {
-            document.getElementById("rgb01").innerHTML = c.toRgbaString();
-            document.getElementById("hsl01").innerHTML = c.toHslaString();
-            document.getElementById("hwb01").innerHTML = c.toHwbaString();
-            document.getElementById("ncol01").innerHTML = c.toNcolaString();
-            document.getElementById("helprgb01").innerHTML = "Rgba";
-            document.getElementById("helphsl01").innerHTML = "Hsla";
-            document.getElementById("helphwb01").innerHTML = "Hwba";
-        } else {
-            document.getElementById("rgb01").innerHTML = c.toRgbString();
-            document.getElementById("hsl01").innerHTML = c.toHslString();
-            document.getElementById("hwb01").innerHTML = c.toHwbString();
-            document.getElementById("ncol01").innerHTML = c.toNcolString();
-            document.getElementById("helprgb01").innerHTML = "<a href='colors_rgb.asp?color=" + c.toRgbString() + "'>Rgb</a>";
-            document.getElementById("helphsl01").innerHTML = "<a href='colors_hsl.asp?color=" + c.toHslStringDecimal() + "'>Hsl</a>";
-            document.getElementById("helphwb01").innerHTML = "<a href='colors_hwb.asp?color=" + c.toHwbStringDecimal() + "'>Hwb</a>";
-        }
+    document.getElementById("helpname01").innerHTML = "Name";
+    document.getElementById("hex01").innerHTML = c.toHexString();
+    document.getElementById("helphex01").innerHTML = "<a href='colors_hexadecimal.asp?color=" + c.toHexString().substr(1) + "'>Hex</a>";
+    document.getElementById("cmyk01").innerHTML = c.toCmykString();
+    document.getElementById("helpcmyk01").innerHTML = "<a href='colors_cmyk.asp?color=" + c.toCmykStringDecimal() + "'>Cmyk</a>";
+    document.getElementById("helpncol01").innerHTML = "<a href='colors_ncol.asp?color=" + c.toNcolStringDecimal() + "'>Ncol</a>";
+    if ((color.indexOf("rgba") > -1 || color.indexOf("hsla") > -1 || color.indexOf("hwba") > -1 || color.indexOf("ncola")) > -1
+      || (color.indexOf("cmyk") == -1 && color.split(",").length == 4)
+      || (color.indexOf("cmyk") > -1 && color.split(",").length == 5)) {
+      document.getElementById("rgb01").innerHTML = c.toRgbaString();
+      document.getElementById("hsl01").innerHTML = c.toHslaString();
+      document.getElementById("hwb01").innerHTML = c.toHwbaString();
+      document.getElementById("ncol01").innerHTML = c.toNcolaString();
+      document.getElementById("helprgb01").innerHTML = "Rgba";
+      document.getElementById("helphsl01").innerHTML = "Hsla";
+      document.getElementById("helphwb01").innerHTML = "Hwba";
     } else {
-      validate_the_colour();
+      document.getElementById("rgb01").innerHTML = c.toRgbString();
+      document.getElementById("hsl01").innerHTML = c.toHslString();
+      document.getElementById("hwb01").innerHTML = c.toHwbString();
+      document.getElementById("ncol01").innerHTML = c.toNcolString();
+      document.getElementById("helprgb01").innerHTML = "<a href='colors_rgb.asp?color=" + c.toRgbString() + "'>Rgb</a>";
+      document.getElementById("helphsl01").innerHTML = "<a href='colors_hsl.asp?color=" + c.toHslStringDecimal() + "'>Hsl</a>";
+      document.getElementById("helphwb01").innerHTML = "<a href='colors_hwb.asp?color=" + c.toHwbStringDecimal() + "'>Hwb</a>";
     }
+  } else {
+    validate_the_colour();
+  }
 }
 
 function validate_the_colour() {
@@ -1337,31 +1344,31 @@ function validate_the_colour() {
   color = document.getElementById("color01").value;
   c = w3color(color);
   if (color == "" || !c.valid) {
-    document.getElementById("result01").style.backgroundColor = "#f1f1f1";
-    document.getElementById("resultTable").style.display = "none";
-    document.getElementById("error01").innerHTML = "Not a legal color value";
-    document.getElementById("hex01").innerHTML = "";
-    document.getElementById("rgb01").innerHTML = "";
-    document.getElementById("hsl01").innerHTML = "";
-    document.getElementById("hwb01").innerHTML = "";
-    document.getElementById("ncol01").innerHTML = "";
-    document.getElementById("helpname01").innerHTML = "";
-    document.getElementById("helphex01").innerHTML = "";
-    document.getElementById("helprgb01").innerHTML = "";
-    document.getElementById("helphsl01").innerHTML = "";
-    document.getElementById("helphwb01").innerHTML = "";
-    document.getElementById("helpncol01").innerHTML = "";
+  document.getElementById("result01").style.backgroundColor = "#f1f1f1";
+  document.getElementById("resultTable").style.display = "none";
+  document.getElementById("error01").innerHTML = "Not a legal color value";
+  document.getElementById("hex01").innerHTML = "";
+  document.getElementById("rgb01").innerHTML = "";
+  document.getElementById("hsl01").innerHTML = "";
+  document.getElementById("hwb01").innerHTML = "";
+  document.getElementById("ncol01").innerHTML = "";
+  document.getElementById("helpname01").innerHTML = "";
+  document.getElementById("helphex01").innerHTML = "";
+  document.getElementById("helprgb01").innerHTML = "";
+  document.getElementById("helphsl01").innerHTML = "";
+  document.getElementById("helphwb01").innerHTML = "";
+  document.getElementById("helpncol01").innerHTML = "";
   } else {
-    document.getElementById("resultTable").style.display = "table";
-    document.getElementById("error01").innerHTML = "";
-    convertColor();
+  document.getElementById("resultTable").style.display = "table";
+  document.getElementById("error01").innerHTML = "";
+  convertColor();
   }
 }
 function submitOnEnter(e) {
-    keyboardKey = e.which || e.keyCode;
-    if (keyboardKey == 13) {
-        validate_the_colour();
-    }
+  keyboardKey = e.which || e.keyCode;
+  if (keyboardKey == 13) {
+    validate_the_colour();
+  }
 }
 
 convertColor();
@@ -1372,18 +1379,10 @@ convertColor();
 
 </div>
 <div class="w3-col l2 m12" id="right">
-
 <div class="sidesection">
- <div id="skyscraper">
-  
- <!--<pre>wide_skyscraper, all: [160,600][300,600][320,50][120,600][300,1050]</pre>-->
- <div id="snhb-wide_skyscraper-0"></div>
- <!-- adspace wide-->
-  
- </div>
-</div>
-
-
+<div id="skyscraper">
 
+</div>
+</div>
 </body>
 </html>