diff --git a/4X/4X.Max.Export.js b/4X/4X.Max.Export.js
index d0592d58..f9ba1de8 100644
--- a/4X/4X.Max.Export.js
+++ b/4X/4X.Max.Export.js
@@ -1194,8 +1194,8 @@ error: function(error, promise){}
                     (isCSS
                       ? s
                       : s.slice(-3).toLowerCase() === ".js"
-                      ? s
-                      : s + ".js");
+                        ? s
+                        : s + ".js");
                 if (!nC && isCSS && $A._cssCache[u]) {
                   if (!$A.get($A._cssCache[u].id))
                     (context || document.head || document.body).appendChild(
@@ -2364,8 +2364,8 @@ error: function(error, promise){}
                     $A.isBool(value)
                       ? value
                       : o[x].getAttribute(name)
-                      ? false
-                      : true,
+                        ? false
+                        : true,
                   );
               } else if (typeof name === "object") {
                 for (var n in name) {
@@ -2378,8 +2378,8 @@ error: function(error, promise){}
                       $A.isBool(name[n])
                         ? name[n]
                         : o[x].getAttribute(n)
-                        ? false
-                        : true,
+                          ? false
+                          : true,
                     );
                 }
               }
@@ -5264,8 +5264,8 @@ error: function(error, promise){}
             typeof exports === "object" && typeof module !== "undefined"
               ? factory()
               : typeof define === "function" && define.amd
-              ? define(factory)
-              : factory();
+                ? define(factory)
+                : factory();
           })(this, function () {
             "use strict";
 
@@ -6279,20 +6279,21 @@ error: function(error, promise){}
                           );
                         }
                       : "contains" in root
-                      ? function (element, container) {
-                          container =
-                            container.nodeType === 9 || container === window
-                              ? root
-                              : container;
-                          return (
-                            container !== element && container.contains(element)
-                          );
-                        }
-                      : function (element, container) {
-                          while ((element = element.parentNode))
-                            if (element === container) return 1;
-                          return 0;
-                        },
+                        ? function (element, container) {
+                            container =
+                              container.nodeType === 9 || container === window
+                                ? root
+                                : container;
+                            return (
+                              container !== element &&
+                              container.contains(element)
+                            );
+                          }
+                        : function (element, container) {
+                            while ((element = element.parentNode))
+                              if (element === container) return 1;
+                            return 0;
+                          },
                   check = function (event) {
                     var related = event.relatedTarget;
                     return !related
diff --git a/4X/4X.Max.js b/4X/4X.Max.js
index d7f176d6..dbec5610 100644
--- a/4X/4X.Max.js
+++ b/4X/4X.Max.js
@@ -1176,8 +1176,8 @@ error: function(error, promise){}
                   (isCSS
                     ? s
                     : s.slice(-3).toLowerCase() === ".js"
-                    ? s
-                    : s + ".js");
+                      ? s
+                      : s + ".js");
               if (!nC && isCSS && $A._cssCache[u]) {
                 if (!$A.get($A._cssCache[u].id))
                   (context || document.head || document.body).appendChild(
@@ -2323,8 +2323,8 @@ error: function(error, promise){}
                   $A.isBool(value)
                     ? value
                     : o[x].getAttribute(name)
-                    ? false
-                    : true,
+                      ? false
+                      : true,
                 );
             } else if (typeof name === "object") {
               for (var n in name) {
@@ -2337,8 +2337,8 @@ error: function(error, promise){}
                     $A.isBool(name[n])
                       ? name[n]
                       : o[x].getAttribute(n)
-                      ? false
-                      : true,
+                        ? false
+                        : true,
                   );
               }
             }
@@ -5180,8 +5180,8 @@ error: function(error, promise){}
           typeof exports === "object" && typeof module !== "undefined"
             ? factory()
             : typeof define === "function" && define.amd
-            ? define(factory)
-            : factory();
+              ? define(factory)
+              : factory();
         })(this, function () {
           "use strict";
 
@@ -6184,20 +6184,20 @@ error: function(error, promise){}
                         );
                       }
                     : "contains" in root
-                    ? function (element, container) {
-                        container =
-                          container.nodeType === 9 || container === window
-                            ? root
-                            : container;
-                        return (
-                          container !== element && container.contains(element)
-                        );
-                      }
-                    : function (element, container) {
-                        while ((element = element.parentNode))
-                          if (element === container) return 1;
-                        return 0;
-                      },
+                      ? function (element, container) {
+                          container =
+                            container.nodeType === 9 || container === window
+                              ? root
+                              : container;
+                          return (
+                            container !== element && container.contains(element)
+                          );
+                        }
+                      : function (element, container) {
+                          while ((element = element.parentNode))
+                            if (element === container) return 1;
+                          return 0;
+                        },
                 check = function (event) {
                   var related = event.relatedTarget;
                   return !related
diff --git a/4X/4X.js b/4X/4X.js
index 894630f0..fdbd7a7f 100644
--- a/4X/4X.js
+++ b/4X/4X.js
@@ -4,4 +4,4 @@ Author: Bryan Garaventa (https://www.linkedin.com/in/bgaraventa)
 Home: WhatSock.com  :  Download: https://github.com/whatsock/apex
 License: MIT (https://opensource.org/licenses/MIT)
 */
-!function(){var e,t,n,a,s,r={};t=function(){"use strict";function e(t){var n=this.constructor;return this.then(function(e){return n.resolve(t()).then(function(){return e})},function(e){return n.resolve(t()).then(function(){return n.reject(e)})})}var t=setTimeout;function l(e){return Boolean(e&&void 0!==e.length)}function r(){}function o(e){if(!(this instanceof o))throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=0,this._handled=!1,this._value=void 0,this._deferreds=[],u(e,this)}function i(n,r){for(;3===n._state;)n=n._value;0===n._state?n._deferreds.push(r):(n._handled=!0,o._immediateFn(function(){var e,t=1===n._state?r.onFulfilled:r.onRejected;if(null===t)(1===n._state?a:s)(r.promise,n._value);else{try{e=t(n._value)}catch(e){return void s(r.promise,e)}a(r.promise,e)}}))}function a(t,e){try{if(e===t)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var n=e.then;if(e instanceof o)return t._state=3,t._value=e,void c(t);if("function"==typeof n)return void u((r=n,i=e,function(){r.apply(i,arguments)}),t)}t._state=1,t._value=e,c(t)}catch(e){s(t,e)}var r,i}function s(e,t){e._state=2,e._value=t,c(e)}function c(e){2===e._state&&0===e._deferreds.length&&o._immediateFn(function(){e._handled||o._unhandledRejectionFn(e._value)});for(var t=0,n=e._deferreds.length;t<n;t++)i(e,e._deferreds[t]);e._deferreds=null}function d(e,t,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.promise=n}function u(e,t){var n=!1;try{e(function(e){n||(n=!0,a(t,e))},function(e){n||(n=!0,s(t,e))})}catch(e){n||(n=!0,s(t,e))}}o.prototype.catch=function(e){return this.then(null,e)},o.prototype.then=function(e,t){var n=new this.constructor(r);return i(this,new d(e,t,n)),n},o.prototype.finally=e,o.all=function(t){return new o(function(i,o){if(!l(t))return o(new TypeError("Promise.all accepts an array"));var a=Array.prototype.slice.call(t);if(0===a.length)return i([]);var s=a.length;for(var e=0;e<a.length;e++)!function t(n,e){try{if(e&&("object"==typeof e||"function"==typeof e)){var r=e.then;if("function"==typeof r)return void r.call(e,function(e){t(n,e)},o)}a[n]=e,0==--s&&i(a)}catch(e){o(e)}}(e,a[e])})},o.resolve=function(t){return t&&"object"==typeof t&&t.constructor===o?t:new o(function(e){e(t)})},o.reject=function(n){return new o(function(e,t){t(n)})},o.race=function(i){return new o(function(e,t){if(!l(i))return t(new TypeError("Promise.race accepts an array"));for(var n=0,r=i.length;n<r;n++)o.resolve(i[n]).then(e,t)})},o._immediateFn="function"==typeof setImmediate?function(e){setImmediate(e)}:function(e){t(e,0)},o._unhandledRejectionFn=function(e){"undefined"!=typeof console&&console&&console.warn("Possible Unhandled Promise Rejection:",e)};var n=function(){if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if("undefined"!=typeof global)return global;throw new Error("unable to locate global object")}();"function"!=typeof n.Promise?n.Promise=o:n.Promise.prototype.finally||(n.Promise.prototype.finally=e)},("object"!=typeof exports||"undefined"==typeof module)&&"function"==typeof define&&define.amd?define(t):t();var i,o,l="URLSearchParams"in self,c="Symbol"in self&&"iterator"in Symbol,d="FileReader"in self&&"Blob"in self&&function(){try{return new Blob,!0}catch(e){return!1}}(),u="FormData"in self,f="ArrayBuffer"in self;function h(e){if("string"!=typeof e&&(e=String(e)),/[^a-z0-9\-#$%&'*+.^_`|~!]/i.test(e)||""===e)throw new TypeError("Invalid character in header field name");return e.toLowerCase()}function p(e){return e="string"!=typeof e?String(e):e}function g(t){var e={next:function(){var e=t.shift();return{done:void 0===e,value:e}}};return c&&(e[Symbol.iterator]=function(){return e}),e}function m(t){this.map={},t instanceof m?t.forEach(function(e,t){this.append(t,e)},this):Array.isArray(t)?t.forEach(function(e){this.append(e[0],e[1])},this):t&&Object.getOwnPropertyNames(t).forEach(function(e){this.append(e,t[e])},this)}function y(e){if(e.bodyUsed)return Promise.reject(new TypeError("Already read"));e.bodyUsed=!0}function _(n){return new Promise(function(e,t){n.onload=function(){e(n.result)},n.onerror=function(){t(n.error)}})}function b(e){var t=new FileReader,n=_(t);return t.readAsArrayBuffer(e),n}function v(e){var t;return e.slice?e.slice(0):((t=new Uint8Array(e.byteLength)).set(new Uint8Array(e)),t.buffer)}function w(){return this.bodyUsed=!1,this._initBody=function(e){var t;this.bodyUsed=this.bodyUsed,(this._bodyInit=e)?"string"==typeof e?this._bodyText=e:d&&Blob.prototype.isPrototypeOf(e)?this._bodyBlob=e:u&&FormData.prototype.isPrototypeOf(e)?this._bodyFormData=e:l&&URLSearchParams.prototype.isPrototypeOf(e)?this._bodyText=e.toString():f&&d&&(t=e)&&DataView.prototype.isPrototypeOf(t)?(this._bodyArrayBuffer=v(e.buffer),this._bodyInit=new Blob([this._bodyArrayBuffer])):f&&(ArrayBuffer.prototype.isPrototypeOf(e)||o(e))?this._bodyArrayBuffer=v(e):this._bodyText=e=Object.prototype.toString.call(e):this._bodyText="",this.headers.get("content-type")||("string"==typeof e?this.headers.set("content-type","text/plain;charset=UTF-8"):this._bodyBlob&&this._bodyBlob.type?this.headers.set("content-type",this._bodyBlob.type):l&&URLSearchParams.prototype.isPrototypeOf(e)&&this.headers.set("content-type","application/x-www-form-urlencoded;charset=UTF-8"))},d&&(this.blob=function(){var e=y(this);if(e)return e;if(this._bodyBlob)return Promise.resolve(this._bodyBlob);if(this._bodyArrayBuffer)return Promise.resolve(new Blob([this._bodyArrayBuffer]));if(this._bodyFormData)throw new Error("could not read FormData body as blob");return Promise.resolve(new Blob([this._bodyText]))},this.arrayBuffer=function(){return this._bodyArrayBuffer?y(this)||Promise.resolve(this._bodyArrayBuffer):this.blob().then(b)}),this.text=function(){var e,t,n=y(this);if(n)return n;if(this._bodyBlob)return n=this._bodyBlob,e=new FileReader,t=_(e),e.readAsText(n),t;if(this._bodyArrayBuffer)return Promise.resolve(function(e){for(var t=new Uint8Array(e),n=new Array(t.length),r=0;r<t.length;r++)n[r]=String.fromCharCode(t[r]);return n.join("")}(this._bodyArrayBuffer));if(this._bodyFormData)throw new Error("could not read FormData body as text");return Promise.resolve(this._bodyText)},u&&(this.formData=function(){return this.text().then(X)}),this.json=function(){return this.text().then(JSON.parse)},this}f&&(i=["[object Int8Array]","[object Uint8Array]","[object Uint8ClampedArray]","[object Int16Array]","[object Uint16Array]","[object Int32Array]","[object Uint32Array]","[object Float32Array]","[object Float64Array]"],o=ArrayBuffer.isView||function(e){return e&&-1<i.indexOf(Object.prototype.toString.call(e))}),m.prototype.append=function(e,t){e=h(e),t=p(t);var n=this.map[e];this.map[e]=n?n+", "+t:t},m.prototype.delete=function(e){delete this.map[h(e)]},m.prototype.get=function(e){return e=h(e),this.has(e)?this.map[e]:null},m.prototype.has=function(e){return this.map.hasOwnProperty(h(e))},m.prototype.set=function(e,t){this.map[h(e)]=p(t)},m.prototype.forEach=function(e,t){for(var n in this.map)this.map.hasOwnProperty(n)&&e.call(t,this.map[n],n,this)},m.prototype.keys=function(){var n=[];return this.forEach(function(e,t){n.push(t)}),g(n)},m.prototype.values=function(){var t=[];return this.forEach(function(e){t.push(e)}),g(t)},m.prototype.entries=function(){var n=[];return this.forEach(function(e,t){n.push([t,e])}),g(n)},c&&(m.prototype[Symbol.iterator]=m.prototype.entries);var C=["DELETE","GET","HEAD","OPTIONS","POST","PUT"];function N(e,t){var n,r=(t=t||{}).body;if(e instanceof N){if(e.bodyUsed)throw new TypeError("Already read");this.url=e.url,this.credentials=e.credentials,t.headers||(this.headers=new m(e.headers)),this.method=e.method,this.mode=e.mode,this.signal=e.signal,r||null===e._bodyInit||(r=e._bodyInit,e.bodyUsed=!0)}else this.url=String(e);if(this.credentials=t.credentials||this.credentials||"same-origin",!t.headers&&this.headers||(this.headers=new m(t.headers)),this.method=(e=t.method||this.method||"GET",n=e.toUpperCase(),-1<C.indexOf(n)?n:e),this.mode=t.mode||this.mode||null,this.signal=t.signal||this.signal,this.referrer=null,("GET"===this.method||"HEAD"===this.method)&&r)throw new TypeError("Body not allowed for GET or HEAD requests");this._initBody(r)}function X(e){var n=new FormData;return e.trim().split("&").forEach(function(e){var t;e&&(t=(e=e.split("=")).shift().replace(/\+/g," "),e=e.join("=").replace(/\+/g," "),n.append(decodeURIComponent(t),decodeURIComponent(e)))}),n}function A(e,t){t=t||{},this.type="default",this.status=void 0===t.status?200:t.status,this.ok=200<=this.status&&this.status<300,this.statusText="statusText"in t?t.statusText:"",this.headers=new m(t.headers),this.url=t.url||"",this._initBody(e)}N.prototype.clone=function(){return new N(this,{body:this._bodyInit})},w.call(N.prototype),w.call(A.prototype),A.prototype.clone=function(){return new A(this._bodyInit,{status:this.status,statusText:this.statusText,headers:new m(this.headers),url:this.url})},A.error=function(){var e=new A(null,{status:0,statusText:""});return e.type="error",e};var T=[301,302,303,307,308],D=(A.redirect=function(e,t){if(-1===T.indexOf(t))throw new RangeError("Invalid status code");return new A(null,{status:t,headers:{location:e}})},self.DOMException);try{new D}catch(e){(D=function(e,t){this.message=e,this.name=t;t=Error(e);this.stack=t.stack}).prototype=Object.create(Error.prototype),D.prototype.constructor=D}function S(r,a){return new Promise(function(i,e){var t=new N(r,a);if(t.signal&&t.signal.aborted)return e(new D("Aborted","AbortError"));var o=new XMLHttpRequest;function n(){o.abort()}o.onload=function(){var e,n,t={status:o.status,statusText:o.statusText,headers:(e=o.getAllResponseHeaders()||"",n=new m,e.replace(/\r?\n[\t ]+/g," ").split(/\r?\n/).forEach(function(e){var e=e.split(":"),t=e.shift().trim();t&&(e=e.join(":").trim(),n.append(t,e))}),n)},r=(t.url="responseURL"in o?o.responseURL:t.headers.get("X-Request-URL"),"response"in o?o.response:o.responseText);setTimeout(function(){i(new A(r,t))},0)},o.onerror=function(){setTimeout(function(){e(new TypeError("Network request failed"))},0)},o.ontimeout=function(){setTimeout(function(){e(new TypeError("Network request failed"))},0)},o.onabort=function(){setTimeout(function(){e(new D("Aborted","AbortError"))},0)},o.open(t.method,function(t){try{return""===t&&self.location.href?self.location.href:t}catch(e){return t}}(t.url),!0),"include"===t.credentials?o.withCredentials=!0:"omit"===t.credentials&&(o.withCredentials=!1),"responseType"in o&&(d?o.responseType="blob":f&&-1!==t.headers.get("Content-Type").indexOf("application/octet-stream")&&(o.responseType="arraybuffer")),t.headers.forEach(function(e,t){o.setRequestHeader(t,e)}),t.signal&&(t.signal.addEventListener("abort",n),o.onreadystatechange=function(){4===o.readyState&&t.signal.removeEventListener("abort",n)}),o.send(void 0===t._bodyInit?null:t._bodyInit)})}function x(e,t,n,r,i){if(!arguments.length&&this===x)return x;if(x.isChain(e)&&1===arguments.length)return e;if(x.isFn(e)&&1===arguments.length)return x.isDocLoaded?e():x.on("load",function(){e()}),x;if(e&&x.isArray(e)&&e.length&&e[0]&&"object"==typeof e[0]&&e[0].id&&!e[0].nodeType)i=r,r=n,n=t,t=e,e=null;else if((e&&x.isDC(e)||x.reg.has(e))&&t&&x.isArray(t)&&t.length&&t[0]&&"object"==typeof t[0]&&t[0].id&&!x.isNode(t,window,document,11))x.reg.has(e)&&(e=x.reg.get(e));else if(e||this&&this!==x)return this&&x.isStr(this)&&(n=t,t=e,e=this),e&&x.reg.has(e)?x.reg.get(e):(x.isStr(e)&&(e=x.morph(e)),x._clone(e));function o(e,t,n){var r=x._GenDC(e,t,n);x._lastCreatedCallback&&x.isFn(x._lastCreatedCallback)&&x._lastCreatedCallback.call(x,r),x._lastCreatedCallback=!1;for(var i=0;i<r.length;i++)(n=r[i]).preloadImages&&!n.preload&&(n.preload=!0),!n.preload||n.loading||n.loaded||(1===n.mode&&n.fetch.url?(n.content=x.toNode(),n.isLoading=!0,x.load(n.fetch.url,n.content,n.fetch.data,function(e){n.isLoading=!1,n.preloadImages&&x.preload(e),x.getModule(n,"afterFetch",e),x.isFn(n.fn.afterLoaded)&&(n.fn.afterLoaded(n),n.fn.afterLoaded=null)},function(e){n.isLoading=!1,x.parseDebug(e)}),n.mode=0):n.preloadImages&&!n.mode&&n.content&&x.preload(n.content)),n.preloadCSS&&n.importCSS&&!n.loading&&!n.loaded&&(n.fn.style=x.toNode(),x.import(n.importCSS,{},n.fn.style));return r}return x.lastCreated=[],r&&!x.isDocLoaded?x.on("load",function(){o.call(window,t,n,e)}):o.call(window,t,n,e),x.lastCreated}S.polyfill=!0,self.fetch||(self.fetch=S,self.Headers=m,self.Request=N,self.Response=A),t=window,e=function(e,t){e=e||"listener",t=t||window;function l(e,t){return A||t||e!==N&&e!==b?e:X}function n(e){a=arguments.length?e:N.querySelectorAll?function(e,t){return t.querySelectorAll(e)}:function(){throw new Error("Bean: No selector engine installed")}}function o(e,t){if(A||!t||!e||e.propertyName==="_on"+t){var n=F.get(this,t||e.type,null,!1),r=n.length,i=0;for(e=new V(e,this,!0),t&&(e.type=t);i<r&&!e.isImmediatePropagationStopped();i++)n[i].removed||n[i].handler.call(this,e)}}function E(i,n){function r(e,t){for(var n,r=x(i)?a(i,t):i;e&&e!==t;e=e.parentNode)for(n=r.length;n--;)if(r[n]===e)return e}function e(e){var t=r(e.target,this);t&&n.apply(t,arguments)}return e.__beanDel={ft:r,selector:i},e}function u(e,t,n,r){var i,o,a,s,l,c,d;if(void 0!==n||"object"!=typeof t){for(r=W(n)?(l=D.call(arguments,3),i=n):(i=r,l=D.call(arguments,4),E(n,i)),a=S(t),this===H&&(r=Y(L,e,t,r,i)),s=a.length;s--;)d=F.put(c=new U(e,a[s].replace(w,""),r,i,S(a[s].replace(v,""),"."),l,!1)),c[T]&&d&&G(e,c.eventType,!0,c.customType);return e}for(o in t)t.hasOwnProperty(o)&&u.call(this,e,o,t[o])}var a,f,h,r,i,s,c,d,p,g,m,M,y,_,j,P,b=window,B=t[e],v=/[^\.]*(?=\..*)\.|.*/,w=/\..*/,C="addEventListener",N=document||{},X=N.documentElement||{},A=X[C],T=A?C:"attachEvent",H={},D=Array.prototype.slice,S=function(e,t){return e.split(t||" ")},x=function(e){return"string"==typeof e},W=function(e){return"function"==typeof e},q=function(e,t,n){for(n=0;n<t.length;n++)t[n]&&(e[t[n]]=1);return e}({},S("click dblclick mouseup mousedown contextmenu mouseWL mousemultiWL DOMMouseScroll mouseover mouseout mousemove selectstart selectend keydown keypress keyup orientationchange focus blur change reset select submit load unload beforeunload resize move DOMContentLoaded readystatechange message error abort scroll "+(A?"show input invalid touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend textinput readystatechange pageshow pagehide popstate hashchange offline online afterprint beforeprint dragstart dragenter dragover dragleave drag drop dragend loadstart progress suspend emptied stalled loadmetadata loadeddata canplay canplaythrough playing waiting seeking seeked ended durationchange timeupdate play pause ratechange volumechange cuechange checking noupdate downloading cached updateready obsolete ":""))),O=(j="compareDocumentPosition"in X?function(e,t){return t.compareDocumentPosition&&16==(16&t.compareDocumentPosition(e))}:"contains"in X?function(e,t){return(t=9===t.nodeType||t===window?X:t)!==e&&t.contains(e)}:function(e,t){for(;e=e.parentNode;)if(e===t)return 1;return 0},{mouseenter:{base:"mouseover",condition:J},mouseleave:{base:"mouseout",condition:J},mouseWL:{base:/Firefox/.test(navigator.userAgent)?"DOMMouseScroll":"mouseWL"}}),V=(r=S("altKey attrChange attrName bubbles cancelable ctrlKey currentTarget detail eventPhase getModifierState isTrusted metaKey relatedNode relatedTarget shiftKey srcElement target timeStamp type view which propertyName"),i=r.concat(S("button buttons clientX clientY dataTransfer fromElement offsetX offsetY pageX pageY screenX screenY toElement")),s=i.concat(S("WLDelta WLDeltaX WLDeltaY WLDeltaZ axis")),c=r.concat(S("char charCode key keyCode keyIdentifier keyLocation location")),d=r.concat(S("data")),p=r.concat(S("touches targetTouches changedTouches scale rotation")),g=r.concat(S("data origin source")),m=r.concat(S("state")),M=/over|out/,y=[{reg:/key/i,fix:function(e,t){return t.keyCode=e.keyCode||e.which,c}},{reg:/click|mouse(?!(.*WL|scroll))|menu|drag|drop/i,fix:function(e,t,n){return t.rightClick=3===e.which||2===e.button,t.pos={x:0,y:0},e.pageX||e.pageY?(t.clientX=e.pageX,t.clientY=e.pageY):(e.clientX||e.clientY)&&(t.clientX=e.clientX+N.body.scrollLeft+X.scrollLeft,t.clientY=e.clientY+N.body.scrollTop+X.scrollTop),M.test(n)&&(t.relatedTarget=e.relatedTarget||e[("mouseover"===n?"from":"to")+"Element"]),i}},{reg:/mouse.*(WL|scroll)/i,fix:function(){return s}},{reg:/^text/i,fix:function(){return d}},{reg:/^touch|^gesture/i,fix:function(){return p}},{reg:/^message$/i,fix:function(){return g}},{reg:/^popstate$/i,fix:function(){return m}},{reg:/.*/,fix:function(){return r}}],_={},I.prototype.preventDefault=function(){this.originalEvent.preventDefault?this.originalEvent.preventDefault():this.originalEvent.returnValue=!1},I.prototype.stopPropagation=function(){this.originalEvent.stopPropagation?this.originalEvent.stopPropagation():this.originalEvent.cancelBubble=!0},I.prototype.stop=function(){this.preventDefault(),this.stopPropagation(),this.stopped=!0},I.prototype.stopImmediatePropagation=function(){this.originalEvent.stopImmediatePropagation&&this.originalEvent.stopImmediatePropagation(),this.isImmediatePropagationStopped=function(){return!0}},I.prototype.isImmediatePropagationStopped=function(){return this.originalEvent.isImmediatePropagationStopped&&this.originalEvent.isImmediatePropagationStopped()},I.prototype.clone=function(e){var t=new I(this,this.element,this.isNative);return t.currentTarget=e,t},I),U=(k.prototype.inNamespaces=function(e){var t,n,r=0;if(!e)return!0;if(!this.namespaces)return!1;for(t=e.length;t--;)for(n=this.namespaces.length;n--;)e[t]===this.namespaces[n]&&r++;return e.length===r},k.prototype.matches=function(e,t,n){return!(this.element!==e||t&&this.original!==t||n&&this.handler!==n)},k),F=(f={},h=function(e,t,n,r,i,o){var a=i?"r":"$";if(t&&"*"!==t){var s,l=0,c=f[a+t],d="*"===e;if(c)for(s=c.length;l<s;l++)if((d||c[l].matches(e,n,r))&&!o(c[l],c,l,t))return}else for(var u in f)u.charAt(0)===a&&h(e,u.substr(1),n,r,i,o)},{has:function(e,t,n,r){var i,o=f[(r?"r":"$")+t];if(o)for(i=o.length;i--;)if(!o[i].root&&o[i].matches(e,n,null))return!0;return!1},get:function(e,t,n,r){var i=[];return h(e,t,n,null,r,function(e){return i.push(e)}),i},put:function(e){var t=!e.root&&!this.has(e.element,e.type,null,!1),n=(e.root?"r":"$")+e.type;return(f[n]||(f[n]=[])).push(e),t},del:function(e){h(e.element,e.type,null,e.handler,e.root,function(e,t,n){return t.splice(n,1),e.removed=!0,0===t.length&&delete f[(e.root?"r":"$")+e.type],!1})},entries:function(){var e,t=[];for(e in f)"$"===e.charAt(0)&&(t=t.concat(f[e]));return t}}),G=A?function(e,t,n){e[n?C:"removeEventListener"](t,o,!1)}:function(t,e,n,r){var i;n?(F.put(i=new U(t,r||e,function(e){o.call(t,e,r)},o,null,null,!0)),r&&null===t["_on"+r]&&(t["_on"+r]=0),i.target.attachEvent("on"+i.eventType,i.handler)):(i=F.get(t,r||e,o,!0)[0])&&(i.target.detachEvent("on"+i.eventType,i.handler),F.del(i))},Y=function(e,t,n,r,i){return function(){r.apply(this,arguments),e(t,n,i)}},R=function(e,t,n,r){for(var t=t&&t.replace(w,""),i=F.get(e,t,null,!1),o={},a=0,s=i.length;a<s;a++)n&&i[a].original!==n||!i[a].inNamespaces(r)||(F.del(i[a]),!o[i[a].eventType]&&i[a][T]&&(o[i[a].eventType]={t:i[a].eventType,c:i[a].type}));for(a in o)F.has(e,o[a].t,null,!1)||G(e,o[a].t,!1,o[a].c)},K=A?function(e,t,n){var r=N.createEvent(e?"HTMLEvents":"UIEvents");r[e?"initEvent":"initUIEvent"](t,!0,!0,b,1),n.dispatchEvent(r)}:function(e,t,n){n=l(n,e),e?n.fireEvent("on"+t,N.createEventObject()):n["_on"+t]++},L=function(e,t,n){var r,i,o,a=x(t);if(a&&0<t.indexOf(" "))for(o=(t=S(t)).length;o--;)L(e,t[o],n);else if((i=a&&t.replace(w,""))&&O[i]&&(i=O[i].base),!t||a)a=(a=a&&t.replace(v,""))&&S(a,"."),R(e,i,n,a);else if(W(t))R(e,null,t);else for(r in t)t.hasOwnProperty(r)&&L(e,r,t[r]);return e},$={on:u,add:function(e,t,n,r){return u.apply(null,x(n)?[e,n,t,r].concat(3<arguments.length?D.call(arguments,5):[]):D.call(arguments))},one:function(){return u.apply(H,arguments)},off:L,remove:L,clone:function(e,t,n){for(var r,i,o=F.get(t,n,null,!1),a=o.length,s=0;s<a;s++)o[s].original&&(r=[e,o[s].type],(i=o[s].handler.__beanDel)&&r.push(i.selector),r.push(o[s].original),u.apply(null,r));return e},fire:function(e,t,n){for(var r,i,o,a,s=S(t),l=s.length;l--;)if(t=s[l].replace(w,""),(o=(o=s[l].replace(v,""))&&S(o,"."))||n||!e[T])for(a=F.get(e,t,null,!1),n=[!1].concat(n),r=0,i=a.length;r<i;r++)a[r].inNamespaces(o)&&a[r].handler.apply(e,n);else K(q[t],t,e);return e},Event:V,setSelectorEngine:n,noConflict:function(){return t[e]=B,this}};function z(n,r,i,o){function a(e,t){return r.apply(n,o?D.call(t,e?0:1).concat(o):t)}function s(e,t){return r.__beanDel?r.__beanDel.ft(e.target,n):t}var e=i?function(e){var t=s(e,this);if(i.apply(t,arguments))return e&&(e.currentTarget=t),a(e,arguments)}:function(e){return r.__beanDel&&(e=e.clone(s(e))),a(e,arguments)};return e.__beanDel=r.__beanDel,e}function k(e,t,n,r,i,o,a){var s=O[t];"unload"===t&&(n=Y(R,e,t,n,r)),s&&(s.condition&&(n=z(e,n,s.condition,o)),t=s.base||t),this.isNative=s=q[t]&&!!e[T],this.customType=!A&&!s&&t,this.element=e,this.type=t,this.original=r,this.namespaces=i,this.eventType=A||s?t:"propertychange",this.target=l(e,s),this[T]=!!this.target[T],this.root=a,this.handler=z(e,n,null,o)}function I(e,t,n){if(arguments.length&&(e=e||((t.ownerDocument||t.document||t).parentWindow||b).event,this.originalEvent=e,this.isNative=n,this.isBean=!0,e)){var r,i,o,a,s,l=e.type,c=e.target||e.srcElement;if(this.target=c&&3===c.nodeType?c.parentNode:c,n){if(!(s=_[l]))for(r=0,i=y.length;r<i;r++)if(y[r].reg.test(l)){_[l]=s=y[r].fix;break}for(r=(a=s(e,this,l)).length;r--;)!((o=a[r])in this)&&o in e&&(this[o]=e[o])}}}function J(e){return(e=e.relatedTarget)?e!==this&&"xul"!==e.prefix&&!/document/.test(this.toString())&&!j(e,this):null===e}return b.attachEvent&&b.attachEvent("onunload",P=function(){var e,t=F.entries();for(e in t)t[e].type&&"unload"!==t[e].type&&L(t[e].element,t[e].type);b.detachEvent("onunload",P),b.CollectGarbage&&b.CollectGarbage()}),n(),$},"undefined"!=typeof module&&module.exports?module.exports=e():"function"==typeof define&&define.amd?define(e):t.bean=r=e(),n=0,x.isArray=function(e){return-1!==["[object Array]","[object NodeList]","[object HTMLCollection]"].indexOf(Object.prototype.toString.call(e))&&!(e instanceof Element||e instanceof HTMLDocument)},x.extend=function(){var e,t,n,r,i,o=arguments[0]||{},a=1,s=arguments.length,l=!1;for("boolean"==typeof o&&(l=o,o=arguments[1]||{},a=2),"object"!=typeof o&&"function"!=typeof o&&(o={}),s===a&&(o=x,--a);a<s;a++)if(null!==(e=arguments[a]))for(t in e)i=o[t],o!==(n=e[t])&&(l&&n&&(x.isPlainObject(n)||(r=x.isArray(n)))?(i=r?(r=!1,i&&x.isArray(i)?i:[]):i&&x.isPlainObject(i)?i:{},o[t]=x.extend(l,i,n)):void 0!==n&&(o[t]=n));return o},x.isPlainObject=function(e){var t,n=Object.prototype.hasOwnProperty;if(!e||"object"!=typeof e||e instanceof Element||e instanceof HTMLDocument||e.nodeType||"setInterval"in e||e.constructor&&!n.call(e,"constructor")&&!n.call(e.constructor.prototype,"isPrototypeOf"))return!1;for(t in e)break;return void 0===t||n.call(e,t)},x.extend({debug:!1,parseDebug:function(e){if(x.debug)throw e},_XR:function(e){return this._4X?(this._X=e,this):e},setGlobal:function(e,t){e&&"object"==typeof e&&(x.extend(!0,{},x.fn.globalDC,e),t)&&x.mergeGlobal()},mergeGlobal:function(){x.queryDC(function(e){x.extend(!0,{},x.fn.globalDC,e)})},reg:new Map,fn:{globalDC:{}},_version:"2023.8.12",lastCreated:[],_lastCreatedCallback:!1,lastCreatedCallback:function(e){x.isFn(e)&&(x._lastCreatedCallback=e)},props:{},isDocLoaded:!1,isDOMContentLoaded:!1,_boundRefO:new Map,_boundObjectIds:new Map,setIdFor:function(e){this._4X&&(e=this._X);var t=x.hasIdFor(e)?x.getIdFor(e):null;return t||(t=x.genId(),x._boundObjectIds.set(e,t),x._boundRefO.set(t,e)),t},remIdFor:function(e){this._4X&&(e=this._X);var t=x.hasIdFor(e)?x.getIdFor(e):null;return!!t&&(x._boundRefO.delete(t),x._boundObjectIds.delete(e),!0)},getIdFor:function(e){return this._4X&&(e=this._X),x._boundObjectIds.has(e)?x._boundObjectIds.get(e):null},hasIdFor:function(e){return this._4X&&(e=this._X),x._boundObjectIds.has(e)},getFromId:function(e){return this._4X&&(e=this._X),x._boundRefO.has(e)?x._boundRefO.get(e):null},_boundObjects:new Map,bindObjects:function(e,t){return this._4X&&(t=e,e=this._X),x._boundObjects.set(e,t),x._boundObjects.set(t,e),x._XR.call(this,e)},unbindObjects:function(e){return this._4X&&(e=this._X),x._boundObjects.delete(x._boundObjects.get(e)),x._boundObjects.delete(e),x._XR.call(this,e)},boundTo:function(e){return this._4X&&(e=this._X),x._boundObjects.get(e)},hasBound:function(e){return this._4X&&(e=this._X),x._boundObjects.has(e)},toFetch:function(e){var t=e.indexOf("#");return x.isPath(e)&&-1!==t?{url:x.trim(e.slice(0,t)),data:{selector:x.trim(e.slice(t))}}:{data:{}}},getSelectorFromURI:function(e){return x.isStr(e)?x.toFetch(e).data.selector:""},isPath:function(e){return!(!x.isStr(e)||x.isMarkup(e)||x.isSelector(e)||-1===e.indexOf("/"))},map:function(e){e&&(x.isArray(e.siblings)&&x.isDC(e.siblings[0])||x.isDC(e.parent))&&e.siblings[0].map(e)},_parseDCScripts:function(n,e,t){function r(o){x.loop(l,function(e,t){var n,r,i;n=-1!==(t=t).toLowerCase().indexOf("once"),i=t+"Ran",!(x.isFn((r=o)[t])||x.isStr(r[t])||x.isArray(r[t]))||n&&r[i]||(n&&!r[i]&&(r[i]=!0),x.isFn(r[t])?s.push(r[t]):x.isStr(r[t])?a.push(r[t]):x.isArray(r[t])&&Array.prototype.push.apply(a,r[t]))},"array")}function i(){x.loop(s,function(e,t){t(n,n.container)},"array")}var a=[],s=[],l=["jsOnce"+e,"once"+e,"js"+e,e[0].toLowerCase()+e.slice(1)];n.reverseJSOrder&&(l=l.reverse()),r(n),n.allowCascade&&(r(n.fn.proto),r(x.fn.globalDC)),x.isFn(t)&&s.push(t);return a.length?x.import(a,{props:{DC:n},call:function(){i()}}):i(),n},setPage:function(e,t){e&&(t&&(document.title=t),window.history.pushState({html:document.html,pageTitle:e},"","./#"+e))},getHash:function(e){var t;return e&&x.isStr(e)?-1!==(t=e.indexOf("#"))?x.trim(e.slice(t+1)):"":x.trim(location.hash.replace("#",""))},isHash:function(e){e=e||x.getHash();return x.hasDC(e)},hasHash:function(e,t){t=t||x.getHash();if(x.isHash(t)){if(!x.isArray(e))return!0;for(var n=0;n<e.length;n++)if((x.isDC(e[n])?e[n].id:e[n])===t)return!0}return!1},toDC:function(e,t){this._4X&&(t=e,e=this._X),x.isPlainObject(e)&&(t=e,e=null),x.isPlainObject(t)||(t={}),x.isPath(e)&&(t=x.extend({fetch:x.toFetch(e),autoRender:!0},t),e=null),e=e&&x.morph(e);var n=x.isNode(e)&&x.getAttr(e,"data-controls"),n=(t.fetch&&t.fetch.url&&(t.toggleHide=!1,t.mode=1),n&&x.isPath(n)?(t.toggleHide=!1,t.fetch=x.toFetch(n),t.content=null,t.trigger=e,t.mode=1,!t.id&&x.isNode(e)&&e.id&&(t.id=e.id)):n&&x.isSelector("#"+n)&&document.querySelector("#"+n)?(t.content=document.querySelector("#"+n),t.trigger=e,!t.id&&x.isNode(e)&&e.id&&(t.id=e.id)):x.isNode(e)&&(t.content||t.fetch)?(t.trigger=e,!t.id&&e.id&&(t.id=e.id)):x.isNode(e)&&(!t.id&&e.id&&(t.id=e.id),t.content=e),x.isBool(t.isRendered)?t.isRendered:!x.isHidden(t.content)),e=(n&&!t.root&&(x.isNode(x.next(t.content))?(t.root=x.next(t.content),t.before=!0):x.isNode(x.previous(t.content))?(t.root=x.previous(t.content),t.after=!0):x.isNode(t.content.parentNode)&&(t.root=t.content.parentNode,t.append=!0),t.loaded=!0),t.isRendered=n,t.widgetType=t.widgetType||x.getAttr(e,"data-widget-type")||null,x([x.extend(!0,{id:t.id||x.genId(),fn:{isMorphedDC:!0},on:"click"},t)])[0]);return n&&e.loaded&&x.isNode(e.content)&&(e.content.id||(e.content.id=x.genId()),e.wrapper=e.container=e.content,e.wrapperId=e.containerId=e.content.id),e},_store:function(e,t){if(e&&11===e.nodeType){for(var n=[],r=0;r<e.childNodes.length;r++){var i=e.childNodes[r];x.isNode(i)&&n.push(i)}if(x.data(n,"StoredFrag",e),x.data(e,"StoredNodeList",n),t)return n}return e},_check:function(e,t){var n,r=x.isArray(e);return x.isChain(e)?x._check(e.return(),t):r?t?x.data(e,"StoredFrag")||x.toNode(e,!0):e:e&&11===e.nodeType?(n=x.data(e,"StoredNodeList")||[]).length?t?e:n:e.childNodes.length?x._store(e,!t):t?null:[]:t||r?e:[e]},toNode:function(t,e,n){if(this._4X&&(e=t,t=this._X),!t)return document.createDocumentFragment();var r;if(x.isStr(t))try{t=x._store(document.createRange().createContextualFragment(t),n)}catch(e){var i=document.createDocumentFragment();x.insertMarkup(t,i),t=x._store(i,n)}else e&&x.isArray(t)&&(i=document.createDocumentFragment(),(r=function(e){e&&11===e.nodeType&&(e=x._store(e,!0)),x.loop(e,function(e,t){t&&11===t.nodeType?r(t):x.isNode(t)&&i.appendChild(t)},"array")})(t),t=x._store(i));return!n&&!x.isArray(t)&&t&&11===t.nodeType&&t.childNodes&&1===t.childNodes.length&&(t=t.childNodes[0]),n&&!x.isArray(t)&&(t=[t]),x._XR.call(this,t)},_clone:function(e){var t;return x.isChain(e)?e:((t=function(e){this._4X=!0,this._X=e}).prototype=x,new t(e))},return:function(e){return e=this._4X?this._X:e},getNode:function(e){return e=this._4X?this._X:e},getDC:function(e,t){return this._4X&&(t=e,e=this._X),x.isDC(e)?e:x.reg.has(e)?x.reg.get(e):t&&x.hasDC(e,t)?x.data(e,"DC"):null},isChain:function(e){return!(!e||"object"!=typeof e||!e._4X)},isDC:function(e){return!!(e&&"object"==typeof e&&e.fn&&e.fn.isDCI)},hasDC:function(e,t){return!!(e&&(x.isDC(e)||x.reg.has(e)||t&&x.isDC(x.data(e,"DC"))))},preload:function(e){this._4X&&(e=this._X);var t=x.morph(e);return x.isNode(t)&&x.on("load",function(){x._imageMap||(x._imageMap={});var n=[];x.query("img[src]",t,function(e,t){x._imageMap[t.src]&&x._imageMap[t.src].parentNode||n.push(t.src)}),n.length&&x("<div hidden></div>").import(n,{tag:"img",callOnAll:!0,call:function(e){x._imageMap[e.src]=e}}).appendTo(document.body)}),x._XR.call(this,e)},isMarkup:function(e){return!(!(e=this._4X?this._X:e)||!x.isStr(e))&&1<s.iterate(e,/</g)&&1<s.iterate(e,/>/g)},morph:function(e,t,n){return x.isArray(e)?e:x.isNode(e,null,null,11)?t&&!x.isArray(e)?[e]:e:x.isStr(e)?x.isMarkup(e)?x.toNode(e,!1,t):window.document.getElementById(e)?window.document.getElementById(e):x.isSelector(e)?(n=(n=x.isNode(n,null,document,11)?n:document).querySelectorAll(e),t||1!==n.length?t||n.length||(n=null):n=n[0],n):x.toText(e):x.isNum(e)?(e=x.toText(e.toString()),t?[e]:e):t&&!x.isArray(e)?[e]:e},isMap:function(e){try{return Map.prototype.has.call(e),!0}catch(e){return!1}},loop:function(e,n,t){if(this._4X&&(t=n,n=e,e=this._X),x.isFn(n))if(x.isArray(e)||"array"!==t||(e=[e]),t&&"map"!==t||!x.isMap(e)||!x.isFn(e.forEach))if(t&&"array"!==t||!x.isArray(e))if(t&&"object"!==t||!e||"object"!=typeof e)if(t&&"string"!==t||!x.isStr(e))(x.isNode(e)||e&&"other"===t)&&n.call(e,0,e);else for(i=0;i<e.length;i++)n.call(e.charAt(i),i,e.charAt(i));else for(var r in e)n.call(e[r],r,e[r]);else for(var i=0;i<e.length;i++)n.call(e[i],i,e[i]);else e.forEach(function(e,t){n.call(e,t,e)});return x._XR.call(this,e)},isSelector:function(e){if(e&&x.isStr(e))try{return!!document.querySelectorAll(e)}catch(e){}return!1},isNode:function(n,e,t){return!(!n||x.isArray(n)||!(n instanceof Element||t&&t instanceof HTMLDocument&&n instanceof HTMLDocument||e&&n===e||function(e){for(var t=3;e[t];){if(n.nodeType===e[t])return!0;t++}return!1}(arguments)))},isArray:function(e){return this._4X&&(e=this._X),-1!==["[object Array]","[object NodeList]","[object HTMLCollection]"].indexOf(Object.prototype.toString.call(e))&&!(e instanceof Element||e instanceof HTMLDocument)},inArray:function(e,t){if(this._4X&&(t=e,e=this._X),t.indexOf)return t.indexOf(e);for(var n=0;n<t.length;n++)if(t[n]===e)return n;return-1},isFn:function(e){return"function"==typeof e},isStr:function(e){return"string"==typeof e},isNum:function(e){return"number"==typeof e},isBool:function(e){return"boolean"==typeof e},isTouch:!1,isIE:function(){return!window.ActiveXObject&&"ActiveXObject"in window},trim:function(e){return this._4X&&(e=this._X),e=x.isStr(e)?e.replace(/^\s+|\s+$/g,""):e},query:function(e,t,n){this._4X&&(n=t,t=this._X),x.isFn(t)&&(n=t,t=null),x.isNode(t,null,document,11)||(t=document);var r=[],i=!0,o=!1;if(!e)return x._XR.call(this,r);x.isMarkup(e)?r=x.toNode(e,!1,!0):x.isSelector(e)&&x.isFn(t.querySelectorAll)?r=t.querySelectorAll(e):x.isNode(e)?r.push(e):(i=x.isArray(e),o=x.isPlainObject(e),(i||o)&&(r=e));var a=[];if(n&&x.isFn(n))if(i)for(var s=0;s<r.length;s++)!1!==n.apply(r[s],[s,r[s]])&&a.push(r[s]);else if(o)for(var l in r)!1!==n.apply(r[l],[l,r[l]])&&a.push(r[l]);else Array.prototype.push.apply(a,r);else Array.prototype.push.apply(a,r);return x._XR.call(this,a)},getText:function(e){return(e=this._4X?this._X:e)?x.isNode(e)?e.innerText||e.textContent||"":e&&3===e.nodeType?e.data:"":""},queryDC:function(e,n){x.isFn(e)&&(n=e,e=null);var r=[];return x.isFn(n)&&(e?x.loop(e,function(e,t){x.hasDC(t)&&(t=x.getDC(t),!1!==n.call(t,t))&&r.push(t)},"array"):x.loop(x.reg,function(e,t){!x.isDC(t)||n.call(t,t)||r.push(t)},"map")),r},Get:function(o){var a,s,l;o&&null!==o.url&&(a={returnType:"html",selector:"",method:"GET",headers:{},body:null,cache:x.noCache?"no-cache":"default",redirect:"follow",keepalive:!1,mode:"cors"},s=0,l=function(e,t,n,r){var i=x.extend({},a,t||{});window.fetch(e,i).then(function(t){200<=t.status&&t.status<300?0<=["html","text","xml"].indexOf(i.returnType.toLowerCase())?t.text().then(function(e){x.isStr(e)&&"xml"===i.returnType.toLowerCase()?e=x.toXML(e):x.isStr(e)&&"html"===i.returnType.toLowerCase()&&(e=x.toNode(e)),x.isNode(e,null,document,11)&&x.isSelector(i.selector)&&(e=e.querySelector(i.selector)),x.isFn(n)&&n.call(this,e,t),o[++s]&&l(o[s].url,o[s].data,o[s].success,o[s].error)}):"json"===i.returnType.toLowerCase()&&t.json().then(function(e){x.isFn(n)&&n.call(this,e,t),o[++s]&&l(o[s].url,o[s].data,o[s].success,o[s].error)}):x.isFn(r)&&r.call(this,t.statusText,t)}).catch(function(e){x.isFn(r)&&r.call(this,e,this)})},x.isArray(o)||(o=[o]),l(o[s].url,o[s].data,o[s].success,o[s].error))},toXML:function(e){var t;return e=e||"",window.DOMParser?t=(new DOMParser).parseFromString(e,"text/xml"):((t=new window.ActiveXObject("Microsoft.XMLDOM")).async="false",t.loadXML(e)),t},moduleFolder:"/4X/Min/",noCache:!1,_ICB:[],_ICBD:[],_cssCache:{},_jsCache:{},_cacheName:{},clearCache:function(){x._cssCache={},x._jsCache={},x._cacheName={}},import:function(e,s,l){this._4X&&(l=this._X),x.isFn(s)?s={call:s}:x.isNode(s,null,null,11)&&(l=s,s={}),s=s||{};function c(e,t,n){e.length&&(e[e.length-1].call(window,e[e.length-1]._props,n),t===h)&&e.splice(e.length-1,1)}var d=(x.isBool(s.noCache)?s:x).noCache,u=(x.isFn(l)&&(s.call=l,l=null),x.isNode(s.context,null,null,11)&&(l=s.context),x.isNode(l,null,null,11)||(l=null),s.props||(s.props={}),!!s.props._Defer),f=(u&&(s.defer=!0),s.defer&&(s.props._Defer=!0),s.props._ImpId||x.genId()),n=(s.props._ImpId=f,x.isFn(s.call)||(s.call=function(){}),[]),h=x.isArray(e)?e.length-1:0;return!e||x.isArray(e)&&!e.length||!d&&s.name&&x._cacheName[s.name]?x.isFn(x._cacheName[s.name])&&(u||!s.defer||x.isDocLoaded?x._cacheName[s.name].call(window,s.props):x.on("load",function(){x._cacheName[s.name].call(window,s.props)})):"img"===s.tag&&x.isNode(l,null,null,11)?x.loop(e,function(e,t){t=x.create("img",{src:t,alt:""});l.appendChild(t),(s.callOnAll||e===h)&&x.isFn(s.call)&&s.call.call(l,s.props,t)},"array"):(x.isFn(s.call)&&(s.call._props=s.props||{},x[s.defer?"_ICBD":"_ICB"].push(s.call)),x.loop(e,function(i,e){var t,o=".css"===e.slice(-4).toLowerCase(),a=(x.isPath(e)?"":x.moduleFolder)+(o||".js"===e.slice(-3).toLowerCase()?e:e+".js");if(!d&&o&&x._cssCache[a])x.get(x._cssCache[a].id)||(l||document.head||document.body).appendChild(x._cssCache[a].cloneNode(!0)),x.isFn(s.call)&&(s.callOnAll||i===h)&&s.call.call(window,s.call._props);else if(d||o||!x._jsCache[a]||x._jsCache[a]._ImpId===f)n.push(x.extend(!0,{url:a,data:{returnType:"text"},success:function(e,t){var n=!1;if(e){if(o)(n=x.create("style",{type:"text/css",id:x.genId()})).innerHTML=e,d||(x._cssCache[a]=n),(l||document.head||document.body).appendChild(n.cloneNode(!0));else try{var r=x._jsCache[a]||new Function("window,document,$A,props,DC",e),n=x._jsCache[a]&&x._jsCache[a].once?null:r.call(window,window,document,x,s.props,s.props.DC);!d&&s.once&&(r.once=!0),r._ImpId=f,d||x._jsCache[a]||(x._jsCache[a]=r)}catch(e){x.parseDebug(e)}!d&&s.name&&(x._cacheName[s.name]=s.call)}(s.callOnAll||i===h)&&x.isFn(s.call)&&(u||!s.defer||x.isDocLoaded?c(x[s.defer?"_ICBD":"_ICB"],i,n):x.on("load",function(){c(x._ICBD,i,n)}))}},s.override||{}));else{if(!x._jsCache[a].once)try{t=x._jsCache[a].call(window,window,document,x,s.props,s.props.DC)}catch(e){x.parseDebug(e)}(s.callOnAll||i===h)&&x.isFn(s.call)&&(u||!s.defer||x.isDocLoaded?c(x[s.defer?"_ICBD":"_ICB"],i,t):x.on("load",function(){c(x._ICBD,i,t)}))}},"array"),x.Get(n)),x._XR.call(this,l)},getScript:function(e,n,r){n=(n=x.isFn(n)?{callback:n}:n)||{};var i=x.isArray(e)?0:e.length-1;x.loop(e,function(e,t){t=x.create("script",{src:(x.isPath(t)?"":x.moduleFolder)+(".js"===t.slice(-3).toLowerCase()?t:t+".js"),async:!n.disableAsync,defer:!!n.defer});(n.callbackOnAll||e===i)&&x.isFn(n.callback)&&t.addEventListener("load",function(e){n.callback.call(window,n.props||e)}),(r||document.head||document.body).appendChild(t)},"array")},_parseURLWithSelector:function(e){var t=e.split(/\s+/);return{url:t[0],selector:e.substring(t[0].length)}},load:function(e,n,t,r,i){this._4X&&(i=r,r=t,t=n,n=this._X),x.isFn(t)&&(i=r,r=t,t=null);var o={returnType:"html"};return x.extend(o,t||{}),x.Get({url:e,data:o,success:function(e,t){x.insert(e,n),x.isFn(r)&&r.call(this,e,t)},error:function(e,t){x.isFn(i)&&i.call(this,e,t)}}),x._XR.call(this,n)},detachObserver:function(e,t){var n=x.data(e,"_MutationObserver")||!1;if(!n||!t||!n[t])return!1;if(t&&n[t])n[t].disconnect();else for(t in n)n[t].disconnect();return!0},isObserverConfig:function(e){return!(!x.isPlainObject(e)||!(e.context||e.subtree||e.childList||e.attributes||e.attributeFilter||e.attributeOldValue||e.characterData||e.characterDataOldValue))},observer:function(i,o,a,e,t){if(o=o.toLowerCase(),-1===",remove,add,attributechange,subtreechange,contentchange,".indexOf(","+o+","))return!1;var n=i,r={};if("remove"===o||"add"===o)r={childList:!0,subtree:!0},t.context?(n=t.context,delete t.context):"remove"===o&&(n=document);else if("attributechange"===o)r={attributes:!0,attributeOldValue:!0},x.isArray(e)&&e.length&&(r.attributeFilter=e);else if("subtreechange"===o)r={childList:!0,subtree:!0};else{if("contentchange"!==o)return!1;r={characterData:!0,childList:!0,subtree:!0,characterDataOldValue:!0},x.data(i,"_CurrentText",x.getText(i))}x.extend(r,t||{}),x.data(i,"_MutationObserver")||x.data(i,"_MutationObserver",{});e=x.data(i,"_MutationObserver");return e[o]||(e[o]=new MutationObserver(function(e){e.forEach(function(e){var t=e.target,n=x.boundTo(t)||x.getDC(x.data(t,"SavedEventParameters"))||x.data(t,"DC"),r=x.data(t,"SavedEventParameters");"childList"===e.type?"remove"===o&&x.isArray(e.removedNodes)&&e.removedNodes.length&&-1!==(x.isFn(Array.from)?Array.from(e.removedNodes):[].slice(e.removedNodes)).indexOf(i)?a.call(t,e,t,e.removedNodes,n,r):"add"===o&&x.isArray(e.addedNodes)&&e.addedNodes.length?a.call(t,e,t,e.addedNodes,n,r):"subtreechange"===o&&(x.isArray(e.addedNodes)&&e.addedNodes.length||x.isArray(e.removedNodes)&&e.removedNodes.length)?a.call(t,e,t,e.addedNodes,e.removedNodes,n,r):"contentchange"===o&&(x.data(t,"_OldText",x.data(t,"_CurrentText")),x.data(t,"_CurrentText",x.getText(t)),a.call(t,e,t,x.data(t,"_CurrentText"),x.data(t,"_OldText"),n,r)):"attributes"===e.type?"attributechange"===o&&a.call(t,e,t,e.attributeName,x.getAttr(t,e.attributeName),e.oldValue,n,r):"characterData"===e.type&&"contentchange"===o&&(x.data(t,"_OldText",x.data(t,"_CurrentText")),x.data(t,"_CurrentText",x.getText(t)),a.call(t,e,t,x.data(t,"_CurrentText"),x.data(t,"_OldText"),n,r))})})),e[o].observe(n,r),x.data(i,"_MutationObserver",e),!0},keyEvent:function(e){return e.which||e.keyCode},event:{on:r.on,add:r.add,one:r.one,off:r.off,remove:r.off,fire:r.fire,Event:r.Event},on:function(e,t,n,r,o,a,s){function l(e){return x.isDOMContentLoaded&&"DOMContentLoaded"===e||x.isDocLoaded&&"load"===e}if(this._4X&&(s=a,a=o,o=r,r=n,n=t,t=e,e=this._X),x.isFn(x.isObserverConfig)&&x.isObserverConfig(n)?(s=n,n=null):x.isFn(x.isObserverConfig)&&x.isObserverConfig(r)?(s=r,r=null):x.isFn(x.isObserverConfig)&&x.isObserverConfig(o)?(s=o,o=null):s={},a=s.attributeFilter||!1,"DOMContentLoaded"!==e&&"load"!==e&&"touchchange"!==e||!x.isFn(t)||(o=r,r=n,n=t,t=e,e=window),x.isStr(n)&&"."===n[0]?(o=n,n=null):x.isStr(r)&&"."===r[0]&&(o=r,r=null),n&&!x.isFn(n)&&(o=r,r=n,n=null),!e||!t)return this._4X?this:e;x.isStr(e)&&(e=x.morph(e));var i=x._check(e);return x.isStr(t)&&(t=t.split(/\s+/)),x.isStr(o)||(o=""),x.loop(i,function(e,i){x.isNode(i,window,document,11)&&(r&&x.data(i,"SavedEventParameters",r),x.loop(t,function(e,r){var t;x.isStr(e)&&x.isFn(r)?(e=e.split(/\s+/),x.loop(e,function(e,t){var n=x.getDC(x.data(i,"SavedEventParameters"))||x.data(i,"DC");x.isDC(n)&&x.isMap(x.data(i,"DC-ON"))&&(n.triggerNode=i),l(t)?r.call(i,null,n,x.data(i,"SavedEventParameters")):x.observer(i,t,r,a,s)||x.event.on(i,t+o,function(e){r.call(i,e,n,x.data(i,"SavedEventParameters"))})},"array")):x.isStr(r)&&x.isFn(n)&&(t=x.getDC(x.data(i,"SavedEventParameters"))||x.data(i,"DC"),x.isDC(t)&&x.isMap(x.data(i,"DC-ON"))&&(t.triggerNode=i),l(r)?n.call(i,null,t,x.data(i,"SavedEventParameters")):x.observer(i,r,n,a,s)||x.event.on(i,r+o,function(e){n.call(i,e,t,x.data(i,"SavedEventParameters"))}))},x.isArray(t)?"array":"object"))},"array"),x._XR.call(this,e)},off:function(e,t){var r,n;return this._4X&&(t=e,e=this._X),e?(r=t,x.isStr(e)&&(e=x.morph(e)),n=x._check(e),x.isArray(n)||(n=[n]),x.isStr(r)&&(r=r.split(/\s+/)),x.loop(n,function(e,n){x.isNode(n,window,document,11)&&(x.removeData(n,"SavedEventParameters"),t?x.loop(r,function(e,t){x.isStr(t)&&(x.detachObserver(n,t),x.event.off(n,t))},x.isArray(r)?"array":"object"):(x.detachObserver(n),x.event.off(n)))},"array"),x._XR.call(this,e)):this._4X?this:e},trigger:function(e,t){var r;return this._4X&&(t=e,e=this._X),e&&t?(r=t,x.isStr(e)&&(e=x.morph(e)),t=x._check(e),x.isStr(r)&&(r=r.split(/\s+/)),x.loop(t,function(e,n){x.isNode(n,window,document)&&x.loop(r,function(e,t){x.isStr(t)&&x.event.fire(n,t)},"array")},"array"),x._XR.call(this,e)):this._4X?this:e},isNative:function(e){var t;return this._4X&&(e=this._X),!!x.isNode(e)&&(t=e.nodeName.toLowerCase(),e=x.hasAttr(e,"href"),!!("a"===t&&e||-1!==["button","input","select","textarea","details"].indexOf(t)))},getActive:function(e,n){e=x.isNode(e)?e:document;return x.query("a[href], button, input, textarea, select, details, *[tabindex]",e,function(e,t){if(n)return x.isFocusable(t)})},setCircular:function(e,t){var n,r;return this._4X&&(t=e,e=this._X),x.isArray(e)&&(t=e,e=null),x.isArray(t)||x.isNode(e,null,null,11)?((t=!x.isArray(t)&&x.isNode(e,null,null,11)?x.getActive(e,!0):t).length&&(n=t[0],r=t[t.length-1],x.on(n,"keydown",function(e){9!==x.keyEvent(e)||!e.shiftKey||e.altKey||e.ctrlKey||(x.focus(r),e.preventDefault())},".circularTabbing"),x.on(r,"keydown",function(e){9!==x.keyEvent(e)||e.shiftKey||e.altKey||e.ctrlKey||(x.focus(n),e.preventDefault())},".circularTabbing")),x._XR.call(this,t)):[]},addWidgetProfile:function(e,t){x.module[e]||(x.module[e]={}),x.extend(x.module[e],t)},module:{},getModule:function(e,t,n){if(x.module[e.widgetType]&&x.isFn(x.module[e.widgetType][t]))return x.module[e.widgetType][t](e,n)},_widgetTypes:[],_regWidgets:new Map,_dataMap:new Map,data:function(e,t,n){var r;return this._4X&&(n=t,t=e,e=this._X),e?e&&t&&void 0===n?x._dataMap.has(e)&&x._dataMap.get(e).has(t)?(r=x._dataMap.get(e).get(t),x._XR.call(this,r)):x._XR.call(this,null):(e&&t&&void 0!==n&&(x._dataMap.has(e)||x._dataMap.set(e,new Map),x._dataMap.get(e).set(t,n)),x._XR.call(this,e)):this._4X?this:e},removeData:function(e,t){return this._4X&&(t=e,e=this._X),e&&t?x._dataMap.has(e)&&x._dataMap.get(e).has(t)&&x._dataMap.get(e).delete(t):e&&x._dataMap.has(e)&&x._dataMap.delete(e),x._XR.call(this,e)},insert:function(e,t,n,r){return this._4X&&(n=t,t=this._X),e=x.morph(e),t=x.morph(t),x.isNode(t,null,null,11)&&x.isNode(e,null,null,11,3)?(x.empty(t),t.appendChild(e),n&&x.isFn(n)&&n.apply(e,[e]),x.straylight&&!r&&x.straylight(t),x._XR.call(this,e)):this._4X?this:e},insertWithin:function(e,t,n){return this._4X&&(n=t,t=this._X),t=x.insert(t,e,n),x._XR.call(this,t)},before:function(e,t,n){return this._4X&&(n=t,t=e,e=this._X),e=x._insertBefore(e,t,n),x._XR.call(this,e)},_insertBefore:function(e,t,n){return this._4X&&(n=t,t=e,e=this._X),e=x.morph(e),t=x.morph(t),x.isNode(t)&&x.isNode(e,null,null,11)?(t.parentNode.insertBefore(e,t),n&&x.isFn(n)&&n.apply(e,[e]),x._XR.call(this,e)):this._4X?this:e},replace:function(e,t,n){return this._4X&&(n=t,t=e,e=this._X),e=x._replaceChild(e,t,n),x._XR.call(this,e)},_replaceChild:function(e,t,n){return e=x.morph(e),t=x.morph(t),x.isNode(t)&&x.isNode(e,null,null,11)&&(t.parentNode.replaceChild(e,t),n)&&x.isFn(n)&&n.apply(e,[e]),e},after:function(e,t,n){return this._4X&&(n=t,t=e,e=this._X),e=x._insertAfter(e,t,n),x._XR.call(this,e)},_insertAfter:function(e,t,n){var r;return e=x.morph(e),t=x.morph(t),x.isNode(t)&&x.isNode(e,null,null,11)&&((r=x.nextSibling(t))?r.parentNode.insertBefore(e,r):t.parentNode.appendChild(e),n)&&x.isFn(n)&&n.apply(e,[e]),e},prepend:function(e,t,n){var r;return this._4X&&(n=t,t=this._X),e=x.morph(e),t=x.morph(t),x.isNode(t,null,null,11)&&x.isNode(e,null,null,11)&&((r=x.firstChild(t))?x._insertBefore(e,r):t.appendChild(e)),n&&x.isFn(n)&&n.apply(e,[e]),x._XR.call(this,e)},prependTo:function(e,t,n){return this._4X&&(n=t,t=this._X),t=x.prepend(t,e,n),x._XR.call(this,t)},append:function(e,t,n){return this._4X&&(n=t,t=this._X),e=x.morph(e),t=x.morph(t),x.isNode(t,null,null,11)&&x.isNode(e,null,null,11)&&(x.isStr(e)&&(e=x.morph(e)),t.appendChild(e)),n&&x.isFn(n)&&n.apply(e,[e]),x._XR.call(this,e)},appendTo:function(e,t,n){return this._4X&&(n=t,t=this._X),t=x.append(t,e,n),x._XR.call(this,t)},insertMarkup:function(e,t,n,r){var i;return this._4X&&(r=n,n=t,t=this._X),x.isFn(n)&&(r=n,n=null),t=x.morph(t),x.isNode(t)&&(x.isNum(e)&&(e=e.toString()),x.isStr(e))&&((i={prepend:"afterbegin",append:"beforeend",before:"beforebegin",after:"afterend"})[n]?t.insertAdjacentHTML(i[n],e):(x.empty(t),t.innerHTML=e)),r&&x.isFn(r)&&r.apply(t,[t]),x._XR.call(this,t)},_deleteNode:function(t){try{var e=document.createRange();e.selectNode(t),e.deleteContents()}catch(e){t&&t.parentNode&&t.parentNode.removeChild(t)}},cloneNodes:function(t,e){var n;this._4X&&(t=this._X);try{var r=document.createRange();r.selectNodeContents(t),n=r.cloneContents()}catch(e){if(n=x.toNode(),x.isNode(t)&&t.firstChild)for(var i=t.firstChild;i;)i.cloneNode&&n.appendChild(i.cloneNode(!0)),i=t.nextSibling}return n=x._store(n),x._XR.call(this,n)},extractNodes:function(t,e){var n;this._4X&&(t=this._X);try{var r=document.createRange();r.selectNodeContents(t),n=r.extractContents()}catch(e){if(n=x.toNode(),x.isNode(t)&&t.firstChild)for(var i=t.firstChild;i;)n.appendChild(t.removeChild(i)),i=t.firstChild}return 11===n.nodeType&&1===n.childNodes.length&&(n=n.childNodes[0]),n=x._store(n),x._XR.call(this,n)},empty:function(e,t){if(this._4X&&(t=e,e=this._X),e&&e.getElementsByTagName){var n=e.getElementsByTagName("*");if(n.length)for(var r=n.length;r--;)x.remove(n[r],!0);e.innerHTML=""}return t&&(x.remove(e),e=null),x._XR.call(this,e)},_cleanAll:function(e,t,n){if(e&&e.getElementsByTagName){for(var r=e.getElementsByTagName("*"),i=r.length;i--;)x._clean(r[i],n);t&&x._clean(e,n)}},_clean:function(e,t){var n=x.data(e,"DC-ON");x.isMap(n)&&x.loop(n,function(e,t){t.bypass()},"map"),x.detachObserver(e),x.removeData(e),x.event.off(e)},remove:function(e,t){if(this._4X&&(t=e,e=this._X),e&&11===e.nodeType){var n=x._check(e);if(n&&n.length)for(var r=n.length;r--;)x.remove(n[r],t);x._clean(e,t),e=null}else e&&e.nodeType&&(x._clean(e,t),t||(x._deleteNode(e),e=null));return x._XR.call(this,e)},destroy:function(s,n,e){var l,c,d;if(!e)return l=null,l=x.isDC(s)?s:x.reg.get(s),!!x.isDC(s)&&(c=l.wrapper,d=l.container,n&&l.loaded&&(l.contentOnly?(x.before(d,c),d=null):x.before(x.extractNodes(d),c)),l.bypass(function(){var e,t=l.afterDestroy,n=(x.isFn(l.beforeDestroy)&&l.beforeDestroy(l),x.removeData(l.id),l.id=l.wrapper=l.container=c=d=null,l.widgetType&&l.autoCloseWidget&&-1!==(n=x._widgetTypes.indexOf(l.id))&&x._widgetTypes.splice(n,1),l.widgetType&&l.autoCloseSameWidget&&-1!==(n=(e=x._regWidgets.get(l.widgetType)).indexOf(l.id))&&(e.splice(n,1),x._regWidgets.set(l.widgetType,e)),l.indexVal),r=l.siblings;r.splice(n,1);for(var i=0;i<r.length;i++)r[i].indexVal=i,r[i].siblings=r;if(l.parent&&l.parent.children&&l.parent.children.length){for(var o=-1,a=l.parent.children,i=0;i<a.length;i++)a[i].id===s&&(o=i);0<=o&&l.parent.children.splice(o,1)}x.reg.delete(s),x.isFn(t)&&t()}),!0);x.query(s,function(e,t){x.isMap(x.data(t,"DC-ON"))&&x.loop(x.data(t,"DC-ON"),function(e,t){x.destroy(t,n)},"map")})},get:function(e,t,n){var r;return this._4X&&(n=t,t=this._X),x.isFn(t)&&(n=t,t=null),t=x.isNode(t,null,document)?t:document,e&&x.isStr(e)?(r=null,t.getElementById&&(r=t.getElementById(e)),!x.isNode(r)&&t.querySelector&&(r=t.querySelector(e)),x.isNode(r)&&x.isFn(n)&&n.call(r,r),x._XR.call(this,r)):null},create:function(e){var t=x.isMarkup(e)?x.morph(e):document.createElement(e);return 1!==arguments.length&&x.isNode(t)&&(arguments[1]&&x.setAttr(t,arguments[1]),arguments[2]&&x.css(t,arguments[2]),arguments[3]&&x.addClass(t,arguments[3]),arguments[4])&&x.insert(arguments[4],t),t},toText:function(e){return x.isNode(e,null,null,3)?e:(x.isStr(e)||(e=""),document.createTextNode(e))},getAttr:function(e,t){this._4X&&(t=e,e=this._X),e=x.morph(e);e=x._check(e,!0);return x.isNode(e)&&t?e.getAttribute(t):null},hasAttr:function(e,t){this._4X&&(t=e,e=this._X),e=x.morph(e);e=x._check(e,!0);return x.isNode(e)&&t?e.hasAttribute(t):null},remAttr:function(e,t){this._4X&&(t=e,e=this._X),e=x.morph(e);for(var n=x._check(e),r=x.isArray(n)?n:[n],i=0;i<r.length;i++)if(x.isNode(r[i]))for(var o=x.isArray(t)?t:[t],a=0;a<o.length;a++)r[i].removeAttribute(o[a]);return x._XR.call(this,e)},setAttr:function(e,t,n){this._4X&&(n=t,t=e,e=this._X),e=x.morph(e);for(var r=x._check(e),i=x.isArray(r)?r:[r],o=0;o<i.length;o++)if(x.isNode(i[o]))if(x.isStr(t))null==n?i[o].removeAttribute(t):i[o].setAttribute(t,n);else if("object"==typeof t)for(var a in t)null===t[a]||void 0===t[a]?i[o].removeAttribute(a):i[o].setAttribute(a,t[a]);return x._XR.call(this,e)},toggleAttr:function(e,t,n){this._4X&&(n=t,t=e,e=this._X),e=x.morph(e);for(var r=x._check(e),i=x.isArray(r)?r:[r],o=x.isIE(),a=0;a<i.length;a++)if(x.isNode(i[a]))if(x.isStr(t))o?i[a].setAttribute(t,x.isBool(n)?n:!i[a].getAttribute(t)):x.isBool(n)?i[a].toggleAttribute(t,n):i[a].toggleAttribute(t);else if("object"==typeof t)for(var s in t)o?i[a].setAttribute(s,x.isBool(t[s])?t[s]:!i[a].getAttribute(s)):x.isBool(t[s])?i[a].toggleAttribute(s,t[s]):i[a].toggleAttribute(s);return x._XR.call(this,e)},prevSibling:function(e,t){if(this._4X&&(t=e,e=this._X),e=x.morph(e),e=x._check(e,!0),!x.isNode(e,null,null,11))return this._4X?this:e;for(e=e.previousSibling;e&&(!x.isNode(e)||x.isFn(t)&&(!x.isFn(t)||!0!==t(e)));)e=e.previousSibling;return x._XR.call(this,e)},nextSibling:function(e,t){if(this._4X&&(t=e,e=this._X),e=x.morph(e),e=x._check(e,!0),!x.isNode(e,null,null,11))return this._4X?this:e;for(e=e.nextSibling;e&&(!x.isNode(e)||x.isFn(t)&&(!x.isFn(t)||!0!==t(e)));)e=e.nextSibling;return x._XR.call(this,e)},firstChild:function(e,t){if(this._4X&&(t=e,e=this._X),e=x.morph(e),e=x._check(e,!0),!x.isNode(e,null,null,11))return this._4X?this:e;for(e=e.firstChild;e&&(!x.isNode(e)||x.isFn(t)&&(!x.isFn(t)||!0!==t(e)));)e=e.nextSibling;return x._XR.call(this,e)},lastChild:function(e,t){if(this._4X&&(t=e,e=this._X),e=x.morph(e),e=x._check(e,!0),!x.isNode(e,null,null,11))return this._4X?this:e;for(e=e.lastChild;e&&(!x.isNode(e)||x.isFn(t)&&(!x.isFn(t)||!0!==t(e)));)e=e.previousSibling;return x._XR.call(this,e)},nearestHL:function(n,e){if(!x.isNode(n))return 0;n.id||(n.id=x.genId());var t,r=(e||document).querySelectorAll('h1, h2, h3, h4, h5, h6, *[role="heading"], #'+n.id),i=null;return x.loop(r,function(e,t){n===t&&(i=r[e-1]||null)},"array"),x.isNode(i)?(e=0,2===(t=i.nodeName.toLowerCase()).length&&"h"===t[0]&&(e=parseInt(i.getAttribute("aria-level"))||parseInt(t[1])||0),"heading"===i.getAttribute("role")?parseInt(i.getAttribute("aria-level"))||e||2:e):0},closest:function(e,t){for(this._4X&&(t=e,e=this._X),e=x.morph(e);x.isNode(e)&&(e=e.parentNode,x.isFn(t))&&(!x.isFn(t)||!0!==t(e)););return x._XR.call(this,e)},_getStyleObject:function(e){var t={};return document.defaultView&&document.defaultView.getComputedStyle?t=document.defaultView.getComputedStyle(e,""):e.currentStyle&&(t=e.currentStyle),t},css:function(e,t,n){this._4X&&(n=t,t=e,e=this._X),e=x.morph(e);var r=x._check(e);if(!r||!t)return this._4X?this:e;if(1===(r=x.isArray(r)?r:[r]).length&&x.isNode(r[0])&&x.isStr(t)&&!x.isStr(n)&&!x.isNum(n)&&!n)return x._getStyleObject(r[0])[t];function i(e,t,n){n=o(t)&&x.isNum(n)?n+"px":n;try{n||x.isNum(n)||!e.style.removeProperty?(t=x._camelize(t),e.style[t]=n):e.style.removeProperty(t)}catch(e){}}for(var o=function(e){if(e)for(var t=["top","left","bottom","right","width","height"],n=0;n<t.length;n++)if(t[n].substr(t[n].length-e.length)===e)return!0;return!1},a=0;a<r.length;a++)if(x.isNode(r[a]))if(x.isStr(t))i(r[a],t,n);else if("object"==typeof t)for(var s in t){n=t[s];i(r[a],s,n)}return x._XR.call(this,e)},hasClass:function(t,e){this._4X&&(e=t,t=this._X);t=x.morph(t),t=x._check(t,!0);if(!(x.isNode(t)&&t.className&&e&&x.isStr(e)))return!1;var n=e.split(/\s+/),r=0,i=0;try{var o=t.classList;for(i=0;i<n.length;i++)o.contains(n[i])&&(r+=1)}catch(e){for(var a=t.className?t.className.split(/\s+/):[],i=0;i<n.length;i++)-1!==a.indexOf(n[i])&&(r+=1)}return r===n.length},addClass:function(e,t){this._4X&&(t=e,e=this._X),e=x.morph(e);var n=x._check(e);if(!n||!t||!x.isStr(t))return this._4X?this:e;x.isArray(n)||(n=[n]);for(var r=t.split(/\s+/),i=0;i<n.length;i++){var o=0;try{var a=n[i].classList;for(o=0;o<r.length;o++)a.add(r[o])}catch(e){if(x.isNode(n[i])&&!x.hasClass(n[i],t)){for(var s=n[i].className?n[i].className.split(/\s+/):[],o=0;o<r.length;o++)-1===s.indexOf(r[o])&&s.push(r[o]);n[i].className=s.join(" ")}}}return x._XR.call(this,e)},remClass:function(e,t){this._4X&&(t=e,e=this._X),e=x.morph(e);var n=x._check(e);if(!n||!t||!x.isStr(t))return this._4X?this:e;x.isArray(n)||(n=[n]);for(var r=t.split(/\s+/),i=0;i<n.length;i++){var o=0;try{var a=n[i].classList;for(o=0;o<r.length;o++)a.remove(r[o])}catch(e){if(x.isNode(n[i])&&x.hasClass(n[i],t)){for(var s=n[i].className?n[i].className.split(/\s+/):[],l=[],o=0;o<s.length;o++)-1===r.indexOf(s[o])&&l.push(s[o]);n[i].className=l.join(" ")}}}return x._XR.call(this,e)},toggleClass:function(e,t,n,r){this._4X&&(r=n,n=t,t=e,e=this._X),x.isFn(n)&&(r=n,n=null),e=x.morph(e);var i=x._check(e);if(!i||!t||!x.isStr(t))return this._4X?this:e;x.isArray(i)||(i=[i]);for(var o=0;o<i.length;o++){var a=i[o];x.isBool(n)||(n=!x.hasClass(a,t)),x[n?"addClass":"remClass"](a,t),x.isFn(r)&&r.apply(a,[n])}return x._XR.call(this,e)},setOffScreen:function(e){return this._4X&&(e=this._X),x.css(e,x.sraCSS),x._XR.call(this,e)},clearOffScreen:function(e){return this._4X&&(e=this._X),x.css(e,x.sraCSSClear),x._XR.call(this,e)},sraCSS:{position:"absolute",clip:"rect(1px, 1px, 1px, 1px)",clipPath:"inset(50%)",padding:0,border:0,height:"1px",width:"1px",overflow:"hidden",whiteSpace:"nowrap"},sraCSSClear:{position:"",clip:"auto",clipPath:"none",padding:"",height:"",width:"",overflow:"",whiteSpace:"normal"},_calcPosition:function(e,t,n){var r,i,o,a,t=(t=t||e.posAnchor)&&x.isStr(t)?x.query(t)[0]:t||e.triggerNode;t&&(n=n||e.autoPosition,r={},i=x.elementHeight(e.wrapper),o=x.elementWidth(e.wrapper),a=x.offset(t),"absolute"===x.css(e.wrapper,"position")&&"fixed"!==x.css(t,"position")&&(a=x.offset(t,!0)),1===n?(r.left=a.left,r.top=a.top-i):2===n?(r.left=a.right,r.top=a.top-i):3===n?(r.left=a.right,r.top=a.top):4===n?(r.left=a.right,r.top=a.bottom):5===n?(r.left=a.left,r.top=a.bottom):6===n?(r.left=a.left-o,r.top=a.bottom):7===n?(r.left=a.left-o,r.top=a.top):8===n?(r.left=a.left-o,r.top=a.top-i):9===n?(r.left=a.left,r.top=a.top):10===n?(r.left=a.right-o,r.top=a.top-i):11===n?(r.left=a.right-o,r.top=a.top):12===n&&(r.left=a.right-o,r.top=a.bottom),x.isNum(e.offsetTop)&&(e.offsetTop<0||0<e.offsetTop)&&(r.top+=e.offsetTop),x.isNum(e.offsetLeft)&&(e.offsetLeft<0||0<e.offsetLeft)&&(r.left+=e.offsetLeft),x.css(e.wrapper,r))},getWindow:function(e){return{width:(e=x.isNode(e,window)?e:window).document.documentElement.clientWidth||e.document.body.clientWidth,height:e.document.documentElement.clientHeight||e.document.body.clientHeight}},_getAbsolutePos:function(e){if(!e)return e;for(var t=0,n=0;t+=e.offsetLeft,n+=e.offsetTop,e=e.offsetParent;);return{left:t,top:n}},offset:function(e,t,n,r){var i,o;return this._4X&&(r=n,n=t,t=e,e=this._X),x.isNode(e,window)?(o={},i=x.css(e,"position"),t||"absolute"===i?o=x._getAbsolutePos(e):n||"relative"===i?(o.top=e.offsetTop,o.left=e.offsetLeft,o.height=x.elementHeight(e),o.width=x.elementWidth(e),o.right=o.left+o.width,o.bottom=o.top+o.height):o={top:(t=e.getBoundingClientRect()).top,left:t.left,right:t.right,bottom:t.bottom,height:t.height,width:t.width},r?{top:o.top,left:o.left}:o):e},_camelize:function(e){for(var t,n,r=(n=(e=x.isStr(e)?e:"").split("-"))[0],i=1;i<n.length;i++)t=n[i].charAt(0),r+=n[i].replace(t,t.toUpperCase());return r},_getComputedStyle:function(e,t,n){if(!e)return e;var r="undefined",i=document.defaultView;if(i&&i.getComputedStyle)e===document&&(e=document.body),(i=i.getComputedStyle(e,""))&&(r=i.getPropertyValue(t));else{if(!e.currentStyle)return null;r=e.currentStyle[x._camelize(t)]}return n?parseInt(r,10)||0:r},_num:function(){for(var e=0;e<arguments.length;e++)if(isNaN(arguments[e])||!x.isNum(arguments[e]))return!1;return!0},_def:function(){for(var e=0;e<arguments.length;e++)if(void 0===arguments[e])return!1;return!0},_str:function(){for(var e=0;e<arguments.length;e++)if(!x.isStr(arguments[e]))return!1;return!0},elementHeight:function(e,t){var n,r=0,i=0,o=0,a=0;if(!e)return 0;if(t=x._num(t)?t<0?0:Math.round(t):-1,(n=x._def(e.style))&&x._def(e.offsetHeight)&&x._str(e.style.height)){if(0<=t){if("CSS1Compat"===document.compatMode&&(null!==(r=x._getComputedStyle(e,"padding-top",1))?(i=x._getComputedStyle(e,"padding-bottom",1),o=x._getComputedStyle(e,"border-top-width",1),a=x._getComputedStyle(e,"border-bottom-width",1)):x._def(e.offsetHeight,e.style.height)&&(e.style.height=t+"px",r=e.offsetHeight-t)),t-=r+i+o+a,isNaN(t)||t<0)return;e.style.height=t+"px"}t=e.offsetHeight}else n&&x._def(e.style.pixelHeight)&&(0<=t&&(e.style.pixelHeight=t),t=e.style.pixelHeight);return t},elementWidth:function(e,t){var n,r=0,i=0,o=0,a=0;if(!e)return 0;if(t=x._num(t)?t<0?0:Math.round(t):-1,(n=x._def(e.style))&&x._def(e.offsetWidth)&&x._str(e.style.width)){if(0<=t){if("CSS1Compat"===document.compatMode&&(null!==(r=x._getComputedStyle(e,"padding-left",1))?(i=x._getComputedStyle(e,"padding-right",1),o=x._getComputedStyle(e,"border-left-width",1),a=x._getComputedStyle(e,"border-right-width",1)):x._def(e.offsetWidth,e.style.width)&&(e.style.width=t+"px",r=e.offsetWidth-t)),t-=r+i+o+a,isNaN(t)||t<0)return;e.style.width=t+"px"}t=e.offsetWidth}else n&&x._def(e.style.pixelWidth)&&(0<=t&&(e.style.pixelWidth=t),t=e.style.pixelWidth);return t},_top:function(e,t){var n=x._def(e.style);return n&&x._str(e.style.top)?x._num(t)?e.style.top=t+"px":(t=parseInt(e.style.top,10),isNaN(t)&&(t=x._getComputedStyle(e,"top",1)),isNaN(t)&&(t=0)):n&&x._def(e.style.pixelTop)&&(x._num(t)?e.style.pixelTop=t:t=e.style.pixelTop),t},_left:function(e,t){var n=x._def(e.style);return n&&x._str(e.style.left)?x._num(t)?e.style.left=t+"px":(t=parseInt(e.style.left,10),isNaN(t)&&(t=x._getComputedStyle(e,"left",1)),isNaN(t)&&(t=0)):n&&x._def(e.style.pixelLeft)&&(x._num(t)?e.style.pixelLeft=t:t=e.style.pixelLeft),t},isPointerWithin:function(e){return!!(x.isNode(e)&&x.event.pointer&&x.isNode(x.event.pointer.target))&&x.isWithin(x.event.pointer.target,e)},owns:function(n,e){this._4X&&(e=n,n=this._X);var r=[],n=x.morph(n);return x.isNode(n)&&(x.query(e,function(e,t){x.isNode(t)&&r.push(t)}),r=r.reverse(),x.loop(r,function(e,t){t.id||(t.id=x.genId());t=t.id;-1===["input","img","progress","iframe","hr"].indexOf(n.nodeName.toLowerCase())&&x.addIdRef(n,"aria-owns",t)},"array")),x._XR.call(this,n)},controls:function(r,e,i){return this._4X&&(e=r,r=this._X),i=i||"aria-controls",x.query(e,function(e,t){var n;x.isNode(t)&&(t.id||(t.id=x.genId()),n=t.id,x.query(r,function(e,t){x.addIdRef(t,i,n)}))}),x._XR.call(this,r)},labelledBy:function(e,t){return this._4X&&(t=e,e=this._X),e=x.controls(e,t,"aria-labelledby"),x._XR.call(this,e)},describedBy:function(e,t){return this._4X&&(t=e,e=this._X),e=x.controls(e,t,"aria-describedby"),x._XR.call(this,e)},flowsTo:function(e,t){return this._4X&&(t=e,e=this._X),e=x.controls(e,t,["aria-controls","aria-flowto"]),x._XR.call(this,e)},addIdRef:function(e,t,n){this._4X&&(n=t,t=e,e=this._X),e=x.morph(e);var r=x._check(e),a=(n||"").split(/\s+/);return x.loop(r,function(e,o){x.loop(t,function(e,t){for(var n=(x.getAttr(o,t)||"").split(/\s+/),r=0;r<a.length;r++){var i=a[r];-1===n.indexOf(i)&&n.push(i)}x.setAttr(o,t,n.join(" "))},"array")},"array"),x._XR.call(this,e)},remIdRef:function(e,t,n){this._4X&&(n=t,t=e,e=this._X),e=x.morph(e);var r=x._check(e),s=(n||"").split(/\s+/);return x.loop(r,function(e,a){x.loop(t,function(e,t){for(var n=[],r=(x.getAttr(a,t)||"").split(/\s+/),i=0;i<r.length;i++){var o=r[i];-1===s.indexOf(o)&&n.push(o)}x.setAttr(a,t,n.join(" "))},"array")},"array"),x._XR.call(this,e)},genId:function(e){this._4X&&(e=this._X);var t="DC4X"+((new Date).getTime()+n++);return e&&x.isStr(e)&&(e=x.morph(e),e=x._check(e,!0)),x.isNode(e)?(e.id=t,x._XR.call(this,e)):t},announce:function(e,t,n){return this._4X&&(n=t,t=e,e=this._X),e&&a(e,t,n),x._XR.call(this,e)},alert:function(e,t){return this._4X&&(t=e,e=this._X),e&&a(e,t,!0),x._XR.call(this,e)},isOutOfView:function(e){var e=e.getBoundingClientRect(),t={bounding:e};return t.top=e.top<0,t.left=e.left<0,t.bottom=e.bottom>(window.innerHeight||document.documentElement.clientHeight),t.right=e.right>(window.innerWidth||document.documentElement.clientWidth),t.any=t.top||t.left||t.bottom||t.right,t.all=t.top&&t.left&&t.bottom&&t.right,t},getOrientation:function(n){this._4X&&(n=this._X),x.isArray(n)||(n=x.morph(n),n=x._check(n));var r,i,o,a,e,t,s,l,c={};return n&&x.isArray(n)&&!(n.length<2)&&x.isNode(n[0])&&(r=[],i=[],x.loop(n,function(e,t){t=x.offset(t);0===e?o=t:e===n.length-1&&(a=t),r.push(t.top),i.push(t.left)},"array"),l=function(e,t){return Math.min(e,t)},e=r.reduce(s=function(e,t){return Math.max(e,t)}),t=r.reduce(l),s=i.reduce(s),l=i.reduce(l),c.orientation=e-t<s-l?"horizontal":"vertical",c.lineWrap="horizontal"===c.orientation&&.8*(a.bottom-o.top)>o.height),c},focus:function(e,t){return this._4X&&(t=e,e=this._X),e=x.morph(e),x.isNode(e)?(x._setFocus(e),x.isFn(t)&&t.call(e,e),x._XR.call(this,e)):this._4X?this:e},isFocusWithin:function(e){return this._4X&&(e=this._X),!(!x.isNode(e,null,document)||!e.querySelectorAll)&&0<e.querySelectorAll("*:focus").length},isHidden:function(e){return this._4X&&(e=this._X),!x.isNode(e)||e.offsetHeight+e.offsetWidth<1||"hidden"===x.css(e,"visibility")},isWithin:function(e,t){this._4X&&(t=e,e=this._X);for(var n=e,r=x.isNode(t,null,null,11)?t:document.body;x.isNode(n,null,null,11,3);){if(n===r)return!0;n=n.parentNode}return!1},hide:function(e){return this._4X&&(e=this._X),e=x.morph(e),x.isNode(e)&&(e.hidden=!0),x._XR.call(this,e)},show:function(e){return this._4X&&(e=this._X),e=x.morph(e),x.isNode(e)&&(e.hidden=!1),x._XR.call(this,e)},hideBackground:function(e){var r=(e=this._4X?this._X:e)?x.morph(e):null;return x.isNode(r)?(r&&r.parentNode&&r.parentNode.nodeName&&"body"===r.parentNode.nodeName.toLowerCase()||document.body.appendChild(r),x.loop(document.body.children,function(e,t){var n;x.isNode(t)&&(t.inert=!(n=t===r),x.setAttr(t,"aria-hidden",n?"false":"true"),n)&&x.remAttr(t,"aria-hidden")},"array")):x.showBackground(),x._XR.call(this,r)},showBackground:function(e){e=(e=this._4X?this._X:e)?x.morph(e):null;return x.isNode(e)?x.hideBackground(e):x.loop(document.body.children,function(e,t){x.isNode(t)&&(t.inert=!1,x.remAttr(t,"aria-hidden"))},"array"),x._XR.call(this,e)},svgFix:function(e){return this._4X&&(e=this._X),e=x.morph(e),x.isNode(e,null,document,11)&&x.isIE()&&x.query("svg",e,function(e,t){x.setAttr(t,"focusable","false")}),x._XR.call(this,e)},setKBA11Y:function(e,t,r,i,o){this._4X&&(o=i,i=r,r=t,t=e,e=this._X),x.isFn(t)&&(o=t,t=null),x.isFn(r)&&(o=r,r=null),x.isFn(i)&&(o=i,i=null),x.isBool(t)&&(i=t,t=null),x.isBool(r)&&(i=r,r=null),t=t||"button";var n=x.query(e,function(e,n){return!(!x.isNode(n)||x.isNative(n)||(x.setAttr(n,{tabindex:0,role:t}),r&&x.setAttr(n,"aria-label",r),x.isFn(o)&&x.on(n,"click.kba11y",o),x.on(n,{keydown:function(e){var t=x.keyEvent(e);13!==t&&(i||32!==t)||(x.trigger(n,"click"),e.preventDefault())}},".kba11y"),0))});return e=n.length?1===n.length?n[0]:n:null,x._XR.call(this,e)},setDisabled:function(e,i){this._4X&&(i=e,e=this._X);var t=e,o=!1;return!x.isDC(e)&&x.hasDC(e)&&(e=x.getDC(e)),x.isDC(e)&&(t=e.triggerNode||e.trigger,o=!0),x.query(t,function(e,t){var n=x.isNative(t),r=n&&"a"===t.nodeName.toLowerCase();n&&!r?t.disabled=!!i:(x.setAttr(t,"aria-disabled",i?"true":"false"),r&&(i?x.on(t,"click.disable",function(e){e.preventDefault()}):x.off(t,"click.disable"))),x.data(t,"disabled",!!i),o&&(t.disabled=!0)}),x._XR.call(this,e)},isDisabled:function(e){var t=e=this._4X?this._X:e;return!x.isDC(e)&&x.hasDC(e)&&(e=x.getDC(e)),x.isDC(e)&&(t=e.triggerNode||x.query(e.trigger)[0]),!!(x.isDC(e)&&e.disabled||x.data(t,"disabled")||x.isNode(t)&&"true"===x.getAttr(t,"aria-disabled"))},updateDisabled:function(e){var t=e=this._4X?this._X:e,t=(t=x.isDC(e)?e.siblings:t)||document.querySelectorAll('*[aria-disabled="true"]');return x.loop(t,function(e,t){var n=t;!x.isDC(t)&&x.hasDC(t)&&(t=x.getDC(t)),x.isDC(t)&&(n=t.triggerNode||t.trigger),x.query(n,function(e,t){!(x.isNative(t)&&t.disabled||"true"===x.getAttr(t,"aria-disabled"))||x.data(t,"disabled",!0)})},"array"),x._XR.call(this,e)},isFocusable:function(e,t){var n;return this._4X&&(t=e,e=this._X),!(!x.isNode(e)||x.isHidden(e)||!x.isWithin(e)||(n=parseInt(x.getAttr(e,"tabindex")),!(t&&x.isNum(n)||!t&&x.isNum(n)&&0<=n||x.isNative(e)&&!e.disabled)))},_setFocus:function(e){return x.isNode(e)&&(x.isFocusable(e)||x.setAttr(e,"tabindex",-1),e.focus()),e},_GenDC:function(e,t,n){function a(e){var n=l[e.indexVal];if(n.cancel)n.cancel=n.loading=!1;else if(n.loading=!0,n.mode&&n.toggleHide&&(n.toggleHide=!1),n.toggleHide)n.isLoading?n.fn.afterLoaded=d:d(n);else switch(n.mode){case 1:n.content=x.toNode(),n.isLoading=!0,x.load(n.fetch.url,n.content,n.fetch.data,function(e,t){n.isLoading=!1,n.preloadImages&&x.preload(e),x.getModule(n,"afterFetch",e),n.fetch.success(e,t,n),d(n)},function(e,t){n.isLoading=!1,n.fetch.error(e,t,n),x.parseDebug(e)});break;case 2:n.content=x.toNode(),n.isLoading=!0,x.Get({url:n.fetch.url,data:n.fetch.data,success:function(e,t){n.isLoading=!0,n.preloadImages&&x.preload(e),x.getModule(n,"afterFetch",e),n.fetch.success(e,t,n),d(n)},error:function(e,t){n.isLoading=!1,n.fetch.error(e,t,n)}});break;default:n.isLoading?n.fn.afterLoaded=d:d(n)}return n}function r(e){var r=l[e.indexVal];if(r.cancel)r.cancel=r.loading=!1;else{for(var t=0;t<r.siblings.length;t++){var n=r.siblings[t];n.loaded&&!n.allowMultiple&&n.bypass()}if(r.toggleHide)r.container.hidden=!1,r.storeData=!0;else if(!r.isRendered)if(r.root)if(x.isChain(r.root)&&(r.root=r.root.return()),r.before)x.isFn(r.before)?r.before.apply(r,[r.wrapper,r.root]):x.before(r.wrapper,r.root);else if(r.prepend)if(x.isFn(r.prepend))r.prepend.apply(r,[r.wrapper,r.root]);else try{x.prepend(r.wrapper,r.root)}catch(e){x.before(r.wrapper,r.root)}else if(r.append)if(x.isFn(r.append))r.append.apply(r,[r.wrapper,r.root]);else try{x.append(r.wrapper,r.root)}catch(e){x.after(r.wrapper,r.root)}else r.after?x.isFn(r.after)?r.after.apply(r,[r.wrapper,r.root]):x.after(r.wrapper,r.root):x.insert(r.wrapper,r.root,null,!0);else r.targetNode?x._insertAfter(r.wrapper,r.targetNode):r.triggerNode&&x._insertAfter(r.wrapper,r.triggerNode);r.fn.wasRendered=r.isRendered,r.isRendered=!0,r.storeData||(r.contentOnly?r.content=r.container.cloneNode(!0):r.content=x.cloneNodes(r.container));function i(){x.isAnimating=r.isAnimating=!1,r.isFocusable&&r.setAttr({tabindex:"0","aria-describedby":r.containerId}),0<r.autoPosition&&!r.root&&!r.autoFix&&x._calcPosition(r),r.autoFix&&(f(r),u(r)),r.exposeHiddenClose&&(r.closeId=r.fn.baseId+"CL",r.fn.closeLink=x.create("a",{id:r.closeId,href:"#close"},x.sraCSS,r.closeClassName),r.fn.closeLink.innerHTML=r.hiddenCloseName,x.append(r.fn.closeLink,r.wrapper),x.on(r.fn.closeLink,{click:function(e){r.remove(),e.preventDefault()}}),r.displayHiddenClose?x.on(r.fn.closeLink,{focus:function(e){(!x.isFn(r.tabOut)||!r.tabOut(e,r))&&x.clearOffScreen(this)},blur:function(e){x.setOffScreen(this)}}):x.setAttr(r.fn.closeLink,"tabindex","-1")),x.query("."+r.closeClassName,r.container,function(e,t){r.toggleHide&&x.off(t,"click.closeDC"),x.on(t,"click.closeDC",function(e){r.remove(),e.preventDefault()})}),x.data(r.wrapper,"DC-O",r),r.escToClose&&(r.toggleHide&&x.off(r.wrapper,"keydown.esctoclose"),x.on(r.wrapper,"keydown.esctoclose",function(e){27===x.keyEvent(e)&&(r.remove(),e.stopPropagation())})),r.activeElements=x.getActive(r.container,!0),r.activeElements.length&&(r.first=r.activeElements[0],r.last=r.activeElements[r.activeElements.length-1],r.circularTabbing)&&x.setCircular(r.activeElements);var n={};x.data(r.id,"DC",r),x.loop(r.events,function(e,t){x.isFn(r[t])&&(n[t.toLowerCase().replace(/^on/,"")]=function(e){r[t].apply(r.wrapper,[e,r])})},"array"),r.toggleHide&&x.off(r.wrapper,".extradchandlers4x"),x.on(r.wrapper,n,r.id,".extradchandlers4x"),r.loading=!1,r.loaded=!0,r.abortLoad||r.autoCloseSameWidget&&x._regWidgets.has(r.widgetType)&&!r.currentWT?(r.abortLoad=!1,r.fn.timer&&clearTimeout(r.fn.timer),r.fn.timer=setTimeout(function(){r.remove()},1)):(r.toggleClassName&&x.toggleClass(r.triggerNode,r.toggleClassName,!0),x.isArray(r.embeddedJS)&&r.embeddedJS.length&&x.loop(r.embeddedJS,function(e,t){t.call(r.container,window,document,x,r,r)},"array"),x.getModule(r,"afterRender",r.container),x._parseDCScripts(r,"AfterRender",function(){r.scrollIntoView&&(x.isFn(r.scrollIntoView)?r.scrollIntoView.call(r.container,r,r.container):r.container.scrollIntoView({behavior:"smooth"})),(x.lastLoaded=r).forceFocus&&r.focus(r),x.isFn(r.fn.renderCallback)&&(r.fn.renderCallback.call(r,r),r.fn.renderCallback=null),r.announce&&x.announce(r.container,r.noRepeat,r.isAlert),x.straylight&&x.straylight(r.container),x.isNum(r.delayTimeout)&&0<r.delayTimeout&&(r.fn.timer&&clearTimeout(r.fn.timer),r.fn.timer=setTimeout(function(){r.timeout(r)},r.delayTimeout))}))}!r.fn.wasRendered&&r.animate&&x.isFn(r.animate.onRender)?(x.isAnimating=r.isAnimating=!0,r.animate.onRender.call(r.wrapper,r,r.wrapper,i)):i()}return r}function s(e){var t=l[e.indexVal];!t.loaded||t.lock||t.closing||(t.closing=!0,t.cancel=!1,x.getModule(t,"beforeRemove",t.container),x._parseDCScripts(t,"BeforeRemove",function(){if(!t.loaded||t.lock||t.cancel)return t.closing=t.cancel=!1,t;t.loaded=!1;function e(){x.isAnimating=t.isAnimating=!1,t.storeData||x._cleanAll(t.container,!0),t.fn.style&&x.remove(t.fn.style),t.fn.closeLink&&x.remove(t.fn.closeLink),t.toggleHide?(t.content=t.container,t.content.hidden=!0,t.wrapper=t.container=null):(t.contentOnly?(t.container.parentNode&&(t.content=t.container.parentNode.removeChild(t.container)),t.wrapper=t.container=null):t.content=x.extractNodes(t.container),x.isNode(t.wrapper)&&x.empty(t.wrapper,!0)),t.isRendered=!1,t.loaded=!1,t.toggleClassName&&x.toggleClass(t.triggerNode,t.toggleClassName,!1),t.closing=!1,x.getModule(t,"afterRemove",t.container),x._parseDCScripts(t,"AfterRemove",function(){t.fn.bypass||(t.returnFocus&&t.triggerNode&&!t.rerouteFocus?x.focus(t.triggerNode):t.rerouteFocus&&(x.focus(t.rerouteFocus),t.rerouteFocus=null)),x.isFn(t.fn.removeCallback)&&(t.fn.removeCallback.call(t,t),t.fn.removeCallback=null)})}t.animate&&x.isFn(t.animate.onRemove)?(x.isAnimating=t.isAnimating=!0,t.animate.onRemove.call(t.wrapper,t,t.wrapper,e)):e()}))}function i(e){var n;return(e=l[e.indexVal]).trigger&&e.on&&(n=[],x.isPlainObject(e.on)?x.loop(e.on,function(e,t){n.push(e)},"object"):x.isStr(e.on)&&(n=e.on.split(/\s+/)),x.query(e.trigger,function(e,t){x.off(t,n)})),e}function o(n){(n=l[w.indexVal]).fn.internalEventsId=x.getIdFor(n.id)||x.setIdFor(n.id),n.trigger&&x.query(n.trigger,function(e,t){n.toggleHide&&x.off(t,"."+n.fn.internalEventsId),n.triggerNode||(n.triggerNode=t),x.isMap(x.data(t,"DC-ON"))||x.data(t,"DC-ON",new Map),x.data(t,"DC-ON").set(n.id,n),x.data(t,"DC",n),n.on&&(x.isStr(n.on)?x.on(t,n.on,function(e){c(n),e.preventDefault()},n.id,"."+n.fn.internalEventsId):x.isPlainObject(n.on)&&x.on(t,n.on,n.id,"."+n.fn.internalEventsId)),n.escToClose&&x.on(t,"keydown",function(e){27===x.keyEvent(e)&&(n.remove(),e.stopPropagation())},"."+n.fn.internalEventsId)})}var l=[],c=function(e){var t=l[e.indexVal],e=t.isDisabled();if(!((e||t.loading||t.loaded||t.allowRerender||t.lock||t.closing)&&(t.loaded&&t.isToggle?s(t):t.loaded&&t.allowRerender&&t.bypass(function(){c(t)}),!t.allowRerender||e||t.loading||t.loaded||t.lock||t.closing))){var n,r=void 0,i=0,o=null;if((r=l[w.indexVal]).top.widgetType&&x._widgetTypes.length)for(i=0;i<x._widgetTypes.length;i++)(o=x.reg.get(x._widgetTypes[i]))&&o.top.autoCloseWidget&&o.top.loaded&&o.top.widgetType!==r.top.widgetType&&o.top.bypass();if(r.top.autoCloseSameWidget&&x._regWidgets.has(r.top.widgetType))for(n=x._regWidgets.get(r.top.widgetType),i=0;i<n.length;i++)(o=x.reg.get(n[i])).top.currentWT=o.top===r.top,o&&o.top.loaded&&!o.top.currentWT&&o.top.bypass(),o&&o.top.isAnimating&&o.top.loading&&!o.top.currentWT&&window.Velocity&&(window.Velocity.animate(o.top.wrapper,"finish"),o.top.css(o.top.style));t.cancel=!1,t.fn.baseId=x.genId(),t.wrapperId=t.fn.baseId+"ON",t.containerId=t.fn.baseId+"IN",x.getModule(t,"beforeRender",t.container),x._parseDCScripts(t,"BeforeRender",a)}return t},d=function(e){var n=l[e.indexVal];return n.cancel?n.cancel=n.loading=!1:(n.toggleHide?n.contentOnly=!0:(n.importCSS&&(n.fn.style=x.toNode(),x.import(n.importCSS,{},n.fn.style)),n.exposeBounds&&(n.contentOnly=!1)),n.contentOnly?(n.content=x.morph(n.content),n.toggleHide||(n.content=x._check(n.content,!0)),n.wrapper=n.container=n.content,n.content.id||(n.content.id=n.fn.baseId),n.wrapperId=n.containerId=n.content.id,!n.toggleHide&&n.content.hidden&&(n.content.hidden=!1)):(n.wrapper=x.create("div",{id:n.wrapperId}),n.container=x.create("div",{id:n.containerId}),n.wrapper.appendChild(n.container),x.isStr(n.content)&&x.isMarkup(n.content)?x.insertMarkup(n.content,n.container):x.insert(n.content,n.container,null,!0),(e=x.firstChild(n.container))&&e.hidden&&(e.hidden=!1)),n.toggleHide||((e=n.container.querySelectorAll("script")).length&&x.loop(e,function(e,t){t.src?(x.isArray(n.jsAfter)||(n.jsAfter=[]),n.jsAfter.push(t.src)):(x.isArray(n.embeddedJS)||(n.embeddedJS=[]),n.embeddedJS.push(new Function("window,document,$A,DC,dc",t.innerHTML))),t.parentNode.removeChild(t)},"array"),n.fn.style&&x.prepend(n.fn.style,n.wrapper),n.className&&n.addClass(n.className),n.displayInline&&x.css([n.wrapper,n.container],"display","inline")),n.style&&n.css(n.style),n.exposeBounds&&n.setAttr("role","region"),x.module[n.widgetType]&&x.isFn(x.module[n.widgetType].role)&&n.setAttr(x.module[n.widgetType].role.call(n,n)),x.module[n.widgetType]&&x.isFn(x.module[n.widgetType].innerRole)&&x.setAttr(n.container,x.module[n.widgetType].innerRole.call(n,n)),n.ariaLabelledby&&n.triggerNode?(n.triggerNode.id||(n.triggerNode.id=x.genId()),x.addIdRef(n.wrapper,"aria-labelledby",n.triggerNode.id)):n.role&&n.setAttr("aria-label",n.role),n.ariaControls&&n.triggerNode&&x.setAttr(n.triggerNode,"aria-controls",n.wrapperId),x.getModule(n,"duringRender",n.container),x._parseDCScripts(n,"DuringRender",r)),n},u=function(e){var t=l[e.indexVal];if(t.loading||t.loaded){var n={position:"fixed",right:"",bottom:"",top:"",left:""};switch(t.autoFix){case 1:n.top=0,n.left="40%";break;case 2:n.top=0,n.right=0;break;case 3:n.top="40%",n.right=0;break;case 4:n.bottom=0,n.right=0;break;case 5:n.bottom=0,n.left="40%";break;case 6:n.bottom=0,n.left=0;break;case 7:n.top="40%",n.left=0;break;case 8:n.top=0,n.left=0;break;case 9:n.top="40%",n.left="40%";break;default:n=t.style}x.css(t.wrapper,n)}return t},f=function(e){var t=l[e.indexVal];if(t.loading||t.loaded){var e=x.getWindow(),n=e.width,e=e.height,r=x.elementWidth(t.wrapper),i=x.elementHeight(t.wrapper),o=50,a=(r<n&&(o=parseInt(r/n*100/2,10)),50);switch(i<e&&(a=parseInt(i/e*100/2,10)),t.autoFix){case 1:case 5:x.css(t.wrapper,"left",50-o+"%");break;case 3:case 7:x.css(t.wrapper,"top",50-a+"%");break;case 9:x.css(t.wrapper,{left:50-o+"%",top:50-a+"%"})}(t.offsetTop<0||0<t.offsetTop||t.offsetLeft<0||0<t.offsetLeft)&&((r=x.offset(t.wrapper)).top+=t.offsetTop,r.left+=t.offsetLeft,x.css(t.wrapper,r))}return t},h=[],p=["jsOnceBeforeRender","onceBeforeRender","jsBeforeRender","beforeRender","jsOnceDuringRender","onceDuringRender","jsDuringRender","duringRender","jsOnceAfterRender","onceAfterRender","jsAfterRender","afterRender","jsOnceBeforeRemove","onceBeforeRemove","jsBeforeRemove","beforeRemove","jsOnceAfterRemove","onceAfterRemove","jsAfterRemove","afterRemove"],g=0,m=0,y={fn:{isDCI:!0},props:{},setOffScreen:function(){return x.setOffScreen(this.wrapper),this},clearOffScreen:function(){return x.clearOffScreen(this.wrapper),this},hasDC:function(){return!0},getDC:function(){return this},offset:function(e,t,n){return x.offset(this.wrapper,e,t,n)},setTrigger:function(e){var t;return(e=e||this).trigger&&e.on?(t=l[(t=e).indexVal],i(t),o(t),t):e},unsetTrigger:function(e){return(e=e||this).trigger&&e.on?i(e):e},hiddenCloseName:"Close",displayHiddenClose:!0,query:function(e,t,n){return n=t,t=this.container,x.query(e,t,n)},contentOnly:!0,allowCascade:!0,destroy:function(e){var t=this;return setTimeout(function(){x.destroy(t,e)},1),!0},getAttr:function(e){return x.getAttr(this.wrapper,e)},hasAttr:function(e){return x.hasAttr(this.wrapper,e)},remAttr:function(e){return x.remAttr(this.wrapper,e),this},setAttr:function(e,t){return x.setAttr(this.wrapper,e,t),this},toggleAttr:function(e,t){return x.toggleAttr(this.wrapper,e,t),this},hasClass:function(e){return x.hasClass(this.wrapper,e)},addClass:function(e){return x.addClass(this.wrapper,e),this},nearestHL:function(e){return x.nearestHL(this.wrapper,e)},remClass:function(e){return x.remClass(this.wrapper,e),this},toggleClass:function(e,t,n){return x.toggleClass(this.wrapper,e,t,n),this},activeElements:[],forceFocusWithin:!0,focus:function(e){return(e=e||this).loaded&&x.focus(e.forceFocusWithin&&e.activeElements.length&&x.isNode(e.first)?e.first:e.container),e},speak:function(e){return x.announce(this.container,e),this},alert:function(e){return x.alert(this.container,e),this},load:function(e,t,n){var r=this;return x.isFn(t)&&(n=t,t=null),r.isLoading=!0,x.load(e,r.container,t,function(e){r.isLoading=!1,x.isFn(n)&&n.call(this,e)},function(e){r.isLoading=!1,x.parseDebug(e)}),r},fetch:{url:"",data:{returnType:"html"},success:function(e,t,n){return n.content=e,n},error:function(e,t,n){return n.error=e,n}},isFocusWithin:function(e){e=e||this;return x.isFocusWithin(e.container)},setProps:function(e){return x.extend(!0,this.props,e||{}),this.props.DC=this},getText:function(){return x.getText(this.container)},insert:function(e){var t=this;return t.loaded&&x.isNode(t.container)?(x.insert(e,t.container),x.isNum(t.delayTimeout)&&0<t.delayTimeout&&(t.fn.timer&&clearTimeout(t.fn.timer),t.fn.timer=setTimeout(function(){t.timeout(t)},t.delayTimeout))):(t.content=e,t.mode=0,c(t)),t},prependWithin:function(e){return x.prepend(e,this.container),this},appendWithin:function(e){return x.append(e,this.container),this},renderWithin:function(e,t){var n=this;return n.before=n.prepend=n.append=n.after=!1,x.extend(n,{root:e},t||{}),n.bypass(function(){c(n)})},insertBefore:function(e,t){var n=this;return n.before=n.prepend=n.append=n.after=!1,x.extend(n,{root:e,before:!0},t||{}),n.bypass(function(){c(n)})},prependTo:function(e,t){var n=this;return n.before=n.prepend=n.append=n.after=!1,x.extend(n,{root:e,prepend:!0},t||{}),n.bypass(function(){c(n)})},appendTo:function(e,t){var n=this;return n.before=n.prepend=n.append=n.after=!1,x.extend(n,{root:e,append:!0},t||{}),n.bypass(function(){c(n)})},insertAfter:function(e,t){var n=this;return n.before=n.prepend=n.append=n.after=!1,x.extend(n,{root:e,after:!0},t||{}),n.bypass(function(){c(n)})},bypass:function(e){var t=this;return t.loaded?(t.fn.removeCallback=function(){t.fn.bypass=!1,x.isFn(e)&&e.call(t,t)},t.fn.bypass=!0,s(t)):x.isFn(e)&&e.call(t,t),t},setDisabled:function(e){return x.setDisabled(this,e),this},isDisabled:function(e){e=e||this;return x.isDisabled(e)},updateDisabled:function(e){e=e||this;return x.updateDisabled(e),e},render:function(e){var t,n=this;return n.isDisabled()||(t=function(){n.loaded?x.isFn(e)&&e.call(n,n):(n.fn.renderCallback=e,c(n))},x.isNum(n.delay)&&0<n.delay?(n.fn.Delay&&clearTimeout(n.fn.Delay),n.fn.Delay=setTimeout(function(){t()},n.delay)):t()),n},rerender:function(e){var t=this,n=t.allowRerender;return t.allowRerender=!0,t.remove(function(){t.render(e)}),t.allowRerender=n,t},remove:function(e){var t=this;return t.isDisabled()||(t.loaded?(t.fn.removeCallback=e,s(t)):x.isFn(e)&&e.call(t,t)),t},toggle:function(e){return this.loaded?this.remove(e):this.render(e),this},events:["click","dblClick","touchStart","touchEnd","touchMove","mouseOver","mouseOut","mouseDown","mouseUp","mouseMove","mouseEnter","mouseLeave","keyDown","keyPress","keyUp","error","focus","focusIn","focusOut","blur","change","resize","scroll","contextmenu","mouseWL","mousemultiWL","DOMMouseScroll","selectstart","selectend","orientationchange","reset","select","submit","load","unload","beforeunload","move","DOMContentLoaded","abort","onRemove"],timeout:function(e){return e.remove(),e},closeClassName:"CloseDC",style:{},css:function(e,t,n){var r=this;return x.isBool(t)&&(n=t,t=null),!x.isStr(e)||x.isStr(t)||x.isNum(t)?(e&&x.isStr(e)&&n?r.style[e]=t:e&&"object"==typeof e&&n&&x.extend(r.style,e),x.css(r.wrapper,e,t),r):x.css(r.wrapper,e)},map:function(e,t){function n(e,t){for(var n=0;n<t.length;n++)if(t[n].id===e.id)return 1}var i=this;if(x.isDC((e=e||{}).parent)&&(i.parent=e.parent),x.isArray(e.children)){t||(i.children=[]);for(var r=0;r<e.children.length;r++)x.isDC(e.children[r])&&(e.children[r].parent=i,n(e.children[r],i.children)||i.children.push(e.children[r]))}if(x.isArray(e.siblings)){t||(i.siblings=[i]);for(r=0;r<e.siblings.length;r++)!x.isDC(e.siblings[r])||n(e.siblings[r],i.siblings)||i.siblings.push(e.siblings[r])}for(var o=(i.top=i).parent;x.isDC(o)&&(!i.widgetType||i.widgetType===o.widgetType);)o=(i.top=o).parent;i.parent&&!t&&(i.parent.children=[]);for(var a=0;a<i.siblings.length;a++){var s=i.siblings[a];x.isDC(s)&&(s.parent=i.parent,s.siblings=i.siblings,i.parent)&&!n(s,i.parent.children)&&i.parent.children.push(s)}var l=function(e){for(var t=0;t<e.length;t++){if(x.isDC(e[t])&&e[t].children.length)for(var n=0;n<e[t].children.length;n++){var r=e[t].children[n];x.isDC(r)&&l(r.siblings)}x.isDC(e[t])&&(e[t].top=i.top)}};return l(i.siblings),i},children:[],siblings:[],setPosition:function(e,t,n){var r=this;return x.isNum(e)&&(n=t,t=e,e=null),n&&(r.posAnchor=e||r.posAnchor,r.autoPosition=t||r.autoPosition),x._calcPosition(r,e,t),r},setFix:function(e,t){var n=this;return t&&(n.autoFix=e||n.autoFix),u(n),0<e&&f(n),n}};for(x.extend(y,{text:y.getText,getAttribute:y.getAttr,hasAttribute:y.hasAttr,removeAttribute:y.remAttr,setAttribute:y.setAttr,toggleAttribute:y.toggleAttr,removeClass:y.remClass,nearestHeadingLevel:y.nearestHL}),t=t||{},g=0;g<e.length;g++){var _=e[g],b={},v={};if(x.isBool(_.allowCascade)||(x.isBool(t.allowCascade)?_.allowCascade=t.allowCascade:x.isBool(x.fn.globalDC.allowCascade)?_.allowCascade=x.fn.globalDC.allowCascade:_.allowCascade=y.allowCascade),_.allowCascade)for(m=0;m<p.length;m++)b[p[m]]=x.fn.globalDC[p[m]],v[p[m]]=t[p[m]];y.indexVal=l.length,l[y.indexVal]=function(e){function t(){}t.prototype=e;e=new t;return e.props.DC=e.DC=e,x.lastCreated.push(e),e}(y);var w=l[y.indexVal];if(x.module[_.widgetType]&&x.isFn(x.module[_.widgetType].configure)&&x.extend(!0,w,x.module[_.widgetType].configure.call(w,w)||{}),x.extend(!0,w,x.fn.globalDC),x.extend(!0,w,t),x.extend(!0,w,_),w.allowCascade){for(m=0;m<p.length;m++)x.fn.globalDC[p[m]]=b[p[m]];w.fn.proto=v}x.query(w.trigger,function(e,t){x.isMap(x.data(t,"DC-ON"))&&x.data(t,"DC-ON").has(w.id)&&x.data(t,"DC-ON").get(w.id).unsetTrigger()});_=_=void 0;if(_=l[w.indexVal],x.reg.set(_.id,_),_.widgetType&&_.autoCloseWidget&&x._widgetTypes.push(_.id),_.widgetType&&_.autoCloseSameWidget&&(x._regWidgets.has(_.widgetType)||x._regWidgets.set(_.widgetType,[]),x._regWidgets.get(_.widgetType).push(_.id)),x.isDC(w)){if(o(w),w.autoRender&&h.push(w),x.isDC(n)){for(var C=-1,N=n,X=w,A=0;A<N.children.length;A++)X.id===N.children[A].id&&(C=A);0<=C?N.children.slice(C,1,X):N.children.push(X),X.parent=N;for(var T=X;T.parent;)T=T.parent;X.top=T}else w.top=w;w.onCreate&&x.isFn(w.onCreate)&&w.onCreate.apply(w,[w]),x.updateDisabled(w),w.trackPage&&x.getHash()===w.id&&h.push(w)}}for(g=0;g<l.length;g++)l[g].siblings=l;if(h.length)for(m=0;m<h.length;m++)c(h[m]);return l}}),x.extend({isFunction:x.isFn,isString:x.isStr,isNumber:x.isNum,isBoolean:x.isBool,getElement:x.get,createElement:x.create,getAttribute:x.getAttr,hasAttribute:x.hasAttr,removeAttribute:x.remAttr,setAttribute:x.setAttr,toggleAttribute:x.toggleAttr,previousSibling:x.prevSibling,previous:x.prevSibling,next:x.nextSibling,first:x.firstChild,last:x.lastChild,parent:x.closest,removeClass:x.remClass,height:x.elementHeight,width:x.elementWidth,top:x._top,left:x._left,addIdReference:x.addIdRef,removeIdReference:x.remIdRef,preloadImages:x.preload,setCircularTabbing:x.setCircular,isNativeActiveElement:x.isNative,getActiveElements:x.getActive,nearestHeadingLevel:x.nearestHL,setKeyboardA11Y:x.setKBA11Y,generateId:x.genId,toTextNode:x.toText,text:x.getText}),s={alertMsgs:[],clear:function(){this.alertTO&&clearTimeout(this.alertTO),this.alertMsgs=[]},baseDelay:500,charMultiplier:1,lastMsg:"",iterate:function(e,t){var n=0;return e.replace(t,function(){n++}),n},loaded:!(a=function(e,t,n,r){var i,o=e;return arguments.length&&!x.isBool(o)||(r=n,n=t,t=o,o=e=this),x.isNum(o)?o=o.toString():o&&o.nodeType&&(o=x.getText(o)),o&&x.isStr(o)&&(i=function(){var e;s.loaded&&(s.liveRendered||n||!s.placeHolder||(s.liveRendered=!0,document.body.appendChild(s.placeHolder)),!s.alertRendered)&&n&&s.placeHolder2&&(s.alertRendered=!0,document.body.appendChild(s.placeHolder2)),r||-1!==x.inArray(o,s.alertMsgs)||s.alertMsgs.push(o),1!==s.alertMsgs.length&&!r||(e=s.baseDelay+s.iterate(s.alertMsgs[0],/\s|,|\.|:|;|!|\(|\)|\/|\?|@|#|\$|%|\^|&|\*|\\|-|_|\+|=/g)*s.charMultiplier,t&&s.lastMsg===s.alertMsgs[0]||(s.lastMsg=s.alertMsgs[0],x.insertMarkup(s.alertMsgs[0],n?s.placeHolder2:s.placeHolder)),s.alertTO=setTimeout(function(){x.insertMarkup("",s.placeHolder),x.insertMarkup("",s.placeHolder2),s.alertMsgs.shift(),1<=s.alertMsgs.length&&a(s.alertMsgs[0],t,n,!0)},e))},x.isDocLoaded?i():x.on("load",function(){i()})),e}),liveRendered:!1,alertRendered:!1},String.prototype.announce=function(e){return x.announce(this,e)},String.prototype.alert=function(e){return x.alert(this,e)},x.announce.clear=x.alert.clear=String.prototype.announce.clear=String.prototype.alert.clear=a.clear=s.clear,x.on(document,{touchstart:function(){x.isTouch||(x.isTouch=!0,x.event.fire(document,"touchchange"))},keyup:function(){x.isTouch&&(x.isTouch=!1,x.event.fire(document,"touchchange"))}}),x.on(window,{DOMContentLoaded:function(){x.isDOMContentLoaded=!0},load:function(){x.isDocLoaded=!0,s.placeHolder||(s.placeHolder=x.create("div",{"aria-live":"polite"},x.sraCSS),s.placeHolder2=x.create("div",{role:"alert"},x.sraCSS)),s.loaded=!0,x.on(document.body,"mouseover.MouseCoordTracker",function(e){x.event.pointer=e})}}),"Import4X"in window&&window.Import4X.length&&x.import(window.Import4X),t=(t=document.querySelectorAll("script[src]"))[t.length-1].src.replace(/\/|\\|<|>/g,"")||"",(t=(t=x.getHash(t))?t.split(","):[]).length&&x.import(t),window[window.Namespace4X||"$A"]=x}();
\ No newline at end of file
+!function(){var e,t,n,a,s,r={};t=function(){function e(t){var n=this.constructor;return this.then(function(e){return n.resolve(t()).then(function(){return e})},function(e){return n.resolve(t()).then(function(){return n.reject(e)})})}var t=setTimeout;function l(e){return Boolean(e&&void 0!==e.length)}function r(){}function o(e){if(!(this instanceof o))throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=0,this._handled=!1,this._value=void 0,this._deferreds=[],u(e,this)}function i(n,r){for(;3===n._state;)n=n._value;0===n._state?n._deferreds.push(r):(n._handled=!0,o._immediateFn(function(){var e,t=1===n._state?r.onFulfilled:r.onRejected;if(null===t)(1===n._state?a:s)(r.promise,n._value);else{try{e=t(n._value)}catch(e){return void s(r.promise,e)}a(r.promise,e)}}))}function a(t,e){try{if(e===t)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var n=e.then;if(e instanceof o)return t._state=3,t._value=e,void c(t);if("function"==typeof n)return void u((r=n,i=e,function(){r.apply(i,arguments)}),t)}t._state=1,t._value=e,c(t)}catch(e){s(t,e)}var r,i}function s(e,t){e._state=2,e._value=t,c(e)}function c(e){2===e._state&&0===e._deferreds.length&&o._immediateFn(function(){e._handled||o._unhandledRejectionFn(e._value)});for(var t=0,n=e._deferreds.length;t<n;t++)i(e,e._deferreds[t]);e._deferreds=null}function d(e,t,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.promise=n}function u(e,t){var n=!1;try{e(function(e){n||(n=!0,a(t,e))},function(e){n||(n=!0,s(t,e))})}catch(e){n||(n=!0,s(t,e))}}o.prototype.catch=function(e){return this.then(null,e)},o.prototype.then=function(e,t){var n=new this.constructor(r);return i(this,new d(e,t,n)),n},o.prototype.finally=e,o.all=function(t){return new o(function(i,o){if(!l(t))return o(new TypeError("Promise.all accepts an array"));var a=Array.prototype.slice.call(t);if(0===a.length)return i([]);var s=a.length;for(var e=0;e<a.length;e++)!function t(n,e){try{if(e&&("object"==typeof e||"function"==typeof e)){var r=e.then;if("function"==typeof r)return void r.call(e,function(e){t(n,e)},o)}a[n]=e,0==--s&&i(a)}catch(e){o(e)}}(e,a[e])})},o.resolve=function(t){return t&&"object"==typeof t&&t.constructor===o?t:new o(function(e){e(t)})},o.reject=function(n){return new o(function(e,t){t(n)})},o.race=function(i){return new o(function(e,t){if(!l(i))return t(new TypeError("Promise.race accepts an array"));for(var n=0,r=i.length;n<r;n++)o.resolve(i[n]).then(e,t)})},o._immediateFn="function"==typeof setImmediate?function(e){setImmediate(e)}:function(e){t(e,0)},o._unhandledRejectionFn=function(e){"undefined"!=typeof console&&console&&console.warn("Possible Unhandled Promise Rejection:",e)};var n=function(){if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if("undefined"!=typeof global)return global;throw new Error("unable to locate global object")}();"function"!=typeof n.Promise?n.Promise=o:n.Promise.prototype.finally||(n.Promise.prototype.finally=e)},("object"!=typeof exports||"undefined"==typeof module)&&"function"==typeof define&&define.amd?define(t):t();var i,o,l="URLSearchParams"in self,c="Symbol"in self&&"iterator"in Symbol,d="FileReader"in self&&"Blob"in self&&function(){try{return new Blob,!0}catch(e){return!1}}(),u="FormData"in self,f="ArrayBuffer"in self;function h(e){if("string"!=typeof e&&(e=String(e)),/[^a-z0-9\-#$%&'*+.^_`|~!]/i.test(e)||""===e)throw new TypeError("Invalid character in header field name");return e.toLowerCase()}function p(e){return e="string"!=typeof e?String(e):e}function g(t){var e={next:function(){var e=t.shift();return{done:void 0===e,value:e}}};return c&&(e[Symbol.iterator]=function(){return e}),e}function m(t){this.map={},t instanceof m?t.forEach(function(e,t){this.append(t,e)},this):Array.isArray(t)?t.forEach(function(e){this.append(e[0],e[1])},this):t&&Object.getOwnPropertyNames(t).forEach(function(e){this.append(e,t[e])},this)}function y(e){if(e.bodyUsed)return Promise.reject(new TypeError("Already read"));e.bodyUsed=!0}function _(n){return new Promise(function(e,t){n.onload=function(){e(n.result)},n.onerror=function(){t(n.error)}})}function b(e){var t=new FileReader,n=_(t);return t.readAsArrayBuffer(e),n}function v(e){var t;return e.slice?e.slice(0):((t=new Uint8Array(e.byteLength)).set(new Uint8Array(e)),t.buffer)}function w(){return this.bodyUsed=!1,this._initBody=function(e){var t;this.bodyUsed=this.bodyUsed,(this._bodyInit=e)?"string"==typeof e?this._bodyText=e:d&&Blob.prototype.isPrototypeOf(e)?this._bodyBlob=e:u&&FormData.prototype.isPrototypeOf(e)?this._bodyFormData=e:l&&URLSearchParams.prototype.isPrototypeOf(e)?this._bodyText=e.toString():f&&d&&(t=e)&&DataView.prototype.isPrototypeOf(t)?(this._bodyArrayBuffer=v(e.buffer),this._bodyInit=new Blob([this._bodyArrayBuffer])):f&&(ArrayBuffer.prototype.isPrototypeOf(e)||o(e))?this._bodyArrayBuffer=v(e):this._bodyText=e=Object.prototype.toString.call(e):this._bodyText="",this.headers.get("content-type")||("string"==typeof e?this.headers.set("content-type","text/plain;charset=UTF-8"):this._bodyBlob&&this._bodyBlob.type?this.headers.set("content-type",this._bodyBlob.type):l&&URLSearchParams.prototype.isPrototypeOf(e)&&this.headers.set("content-type","application/x-www-form-urlencoded;charset=UTF-8"))},d&&(this.blob=function(){var e=y(this);if(e)return e;if(this._bodyBlob)return Promise.resolve(this._bodyBlob);if(this._bodyArrayBuffer)return Promise.resolve(new Blob([this._bodyArrayBuffer]));if(this._bodyFormData)throw new Error("could not read FormData body as blob");return Promise.resolve(new Blob([this._bodyText]))},this.arrayBuffer=function(){return this._bodyArrayBuffer?y(this)||Promise.resolve(this._bodyArrayBuffer):this.blob().then(b)}),this.text=function(){var e,t,n=y(this);if(n)return n;if(this._bodyBlob)return n=this._bodyBlob,e=new FileReader,t=_(e),e.readAsText(n),t;if(this._bodyArrayBuffer)return Promise.resolve(function(e){for(var t=new Uint8Array(e),n=new Array(t.length),r=0;r<t.length;r++)n[r]=String.fromCharCode(t[r]);return n.join("")}(this._bodyArrayBuffer));if(this._bodyFormData)throw new Error("could not read FormData body as text");return Promise.resolve(this._bodyText)},u&&(this.formData=function(){return this.text().then(X)}),this.json=function(){return this.text().then(JSON.parse)},this}f&&(i=["[object Int8Array]","[object Uint8Array]","[object Uint8ClampedArray]","[object Int16Array]","[object Uint16Array]","[object Int32Array]","[object Uint32Array]","[object Float32Array]","[object Float64Array]"],o=ArrayBuffer.isView||function(e){return e&&-1<i.indexOf(Object.prototype.toString.call(e))}),m.prototype.append=function(e,t){e=h(e),t=p(t);var n=this.map[e];this.map[e]=n?n+", "+t:t},m.prototype.delete=function(e){delete this.map[h(e)]},m.prototype.get=function(e){return e=h(e),this.has(e)?this.map[e]:null},m.prototype.has=function(e){return this.map.hasOwnProperty(h(e))},m.prototype.set=function(e,t){this.map[h(e)]=p(t)},m.prototype.forEach=function(e,t){for(var n in this.map)this.map.hasOwnProperty(n)&&e.call(t,this.map[n],n,this)},m.prototype.keys=function(){var n=[];return this.forEach(function(e,t){n.push(t)}),g(n)},m.prototype.values=function(){var t=[];return this.forEach(function(e){t.push(e)}),g(t)},m.prototype.entries=function(){var n=[];return this.forEach(function(e,t){n.push([t,e])}),g(n)},c&&(m.prototype[Symbol.iterator]=m.prototype.entries);var C=["DELETE","GET","HEAD","OPTIONS","POST","PUT"];function N(e,t){var n,r=(t=t||{}).body;if(e instanceof N){if(e.bodyUsed)throw new TypeError("Already read");this.url=e.url,this.credentials=e.credentials,t.headers||(this.headers=new m(e.headers)),this.method=e.method,this.mode=e.mode,this.signal=e.signal,r||null===e._bodyInit||(r=e._bodyInit,e.bodyUsed=!0)}else this.url=String(e);if(this.credentials=t.credentials||this.credentials||"same-origin",!t.headers&&this.headers||(this.headers=new m(t.headers)),this.method=(e=t.method||this.method||"GET",n=e.toUpperCase(),-1<C.indexOf(n)?n:e),this.mode=t.mode||this.mode||null,this.signal=t.signal||this.signal,this.referrer=null,("GET"===this.method||"HEAD"===this.method)&&r)throw new TypeError("Body not allowed for GET or HEAD requests");this._initBody(r)}function X(e){var n=new FormData;return e.trim().split("&").forEach(function(e){var t;e&&(t=(e=e.split("=")).shift().replace(/\+/g," "),e=e.join("=").replace(/\+/g," "),n.append(decodeURIComponent(t),decodeURIComponent(e)))}),n}function A(e,t){t=t||{},this.type="default",this.status=void 0===t.status?200:t.status,this.ok=200<=this.status&&this.status<300,this.statusText="statusText"in t?t.statusText:"",this.headers=new m(t.headers),this.url=t.url||"",this._initBody(e)}N.prototype.clone=function(){return new N(this,{body:this._bodyInit})},w.call(N.prototype),w.call(A.prototype),A.prototype.clone=function(){return new A(this._bodyInit,{status:this.status,statusText:this.statusText,headers:new m(this.headers),url:this.url})},A.error=function(){var e=new A(null,{status:0,statusText:""});return e.type="error",e};var T=[301,302,303,307,308],D=(A.redirect=function(e,t){if(-1===T.indexOf(t))throw new RangeError("Invalid status code");return new A(null,{status:t,headers:{location:e}})},self.DOMException);try{new D}catch(e){(D=function(e,t){this.message=e,this.name=t;t=Error(e);this.stack=t.stack}).prototype=Object.create(Error.prototype),D.prototype.constructor=D}function x(r,a){return new Promise(function(i,e){var t=new N(r,a);if(t.signal&&t.signal.aborted)return e(new D("Aborted","AbortError"));var o=new XMLHttpRequest;function n(){o.abort()}o.onload=function(){var e,n,t={status:o.status,statusText:o.statusText,headers:(e=o.getAllResponseHeaders()||"",n=new m,e.replace(/\r?\n[\t ]+/g," ").split(/\r?\n/).forEach(function(e){var e=e.split(":"),t=e.shift().trim();t&&(e=e.join(":").trim(),n.append(t,e))}),n)},r=(t.url="responseURL"in o?o.responseURL:t.headers.get("X-Request-URL"),"response"in o?o.response:o.responseText);setTimeout(function(){i(new A(r,t))},0)},o.onerror=function(){setTimeout(function(){e(new TypeError("Network request failed"))},0)},o.ontimeout=function(){setTimeout(function(){e(new TypeError("Network request failed"))},0)},o.onabort=function(){setTimeout(function(){e(new D("Aborted","AbortError"))},0)},o.open(t.method,function(t){try{return""===t&&self.location.href?self.location.href:t}catch(e){return t}}(t.url),!0),"include"===t.credentials?o.withCredentials=!0:"omit"===t.credentials&&(o.withCredentials=!1),"responseType"in o&&(d?o.responseType="blob":f&&-1!==t.headers.get("Content-Type").indexOf("application/octet-stream")&&(o.responseType="arraybuffer")),t.headers.forEach(function(e,t){o.setRequestHeader(t,e)}),t.signal&&(t.signal.addEventListener("abort",n),o.onreadystatechange=function(){4===o.readyState&&t.signal.removeEventListener("abort",n)}),o.send(void 0===t._bodyInit?null:t._bodyInit)})}function S(e,t,n,r,i){if(!arguments.length&&this===S)return S;if(S.isChain(e)&&1===arguments.length)return e;if(S.isFn(e)&&1===arguments.length)return S.isDocLoaded?e():S.on("load",function(){e()}),S;if(e&&S.isArray(e)&&e.length&&e[0]&&"object"==typeof e[0]&&e[0].id&&!e[0].nodeType)r=n,n=t,t=e,e=null;else if((e&&S.isDC(e)||S.reg.has(e))&&t&&S.isArray(t)&&t.length&&t[0]&&"object"==typeof t[0]&&t[0].id&&!S.isNode(t,window,document,11))S.reg.has(e)&&(e=S.reg.get(e));else if(e||this&&this!==S)return this&&S.isStr(this)&&(n=t,t=e,e=this),e&&S.reg.has(e)?S.reg.get(e):(S.isStr(e)&&(e=S.morph(e)),S._clone(e));function o(e,t,n){var r=S._GenDC(e,t,n);S._lastCreatedCallback&&S.isFn(S._lastCreatedCallback)&&S._lastCreatedCallback.call(S,r),S._lastCreatedCallback=!1;for(var i=0;i<r.length;i++)(n=r[i]).preloadImages&&!n.preload&&(n.preload=!0),!n.preload||n.loading||n.loaded||(1===n.mode&&n.fetch.url?(n.content=S.toNode(),n.isLoading=!0,S.load(n.fetch.url,n.content,n.fetch.data,function(e){n.isLoading=!1,n.preloadImages&&S.preload(e),S.getModule(n,"afterFetch",e),S.isFn(n.fn.afterLoaded)&&(n.fn.afterLoaded(n),n.fn.afterLoaded=null)},function(e){n.isLoading=!1,S.parseDebug(e)}),n.mode=0):n.preloadImages&&!n.mode&&n.content&&S.preload(n.content)),n.preloadCSS&&n.importCSS&&!n.loading&&!n.loaded&&(n.fn.style=S.toNode(),S.import(n.importCSS,{},n.fn.style));return r}return S.lastCreated=[],r&&!S.isDocLoaded?S.on("load",function(){o.call(window,t,n,e)}):o.call(window,t,n,e),S.lastCreated}x.polyfill=!0,self.fetch||(self.fetch=x,self.Headers=m,self.Request=N,self.Response=A),t=window,e=function(e,t){e=e||"listener",t=t||window;function l(e,t){return A||t||e!==N&&e!==b?e:X}function n(e){a=arguments.length?e:N.querySelectorAll?function(e,t){return t.querySelectorAll(e)}:function(){throw new Error("Bean: No selector engine installed")}}function o(e,t){if(A||!t||!e||e.propertyName==="_on"+t){var n=F.get(this,t||e.type,null,!1),r=n.length,i=0;for(e=new V(e,this,!0),t&&(e.type=t);i<r&&!e.isImmediatePropagationStopped();i++)n[i].removed||n[i].handler.call(this,e)}}function E(i,t){function n(e,t){for(var n,r=S(i)?a(i,t):i;e&&e!==t;e=e.parentNode)for(n=r.length;n--;)if(r[n]===e)return e}function e(e){(e=n(e.target,this))&&t.apply(e,arguments)}return e.__beanDel={ft:n,selector:i},e}function u(e,t,n,r){var i,o,a,s,l,c,d;if(void 0!==n||"object"!=typeof t){for(r=W(n)?(l=D.call(arguments,3),i=n):(i=r,l=D.call(arguments,4),E(n,i)),a=x(t),this===H&&(r=Y(L,e,t,r,i)),s=a.length;s--;)d=F.put(c=new U(e,a[s].replace(w,""),r,i,x(a[s].replace(v,""),"."),l,!1)),c[T]&&d&&G(e,c.eventType,!0,c.customType);return e}for(o in t)t.hasOwnProperty(o)&&u.call(this,e,o,t[o])}var a,f,h,r,i,s,c,d,p,g,m,M,y,_,j,P,b=window,B=t[e],v=/[^\.]*(?=\..*)\.|.*/,w=/\..*/,C="addEventListener",N=document||{},X=N.documentElement||{},A=X[C],T=A?C:"attachEvent",H={},D=Array.prototype.slice,x=function(e,t){return e.split(t||" ")},S=function(e){return"string"==typeof e},W=function(e){return"function"==typeof e},q=function(e,t,n){for(n=0;n<t.length;n++)t[n]&&(e[t[n]]=1);return e}({},x("click dblclick mouseup mousedown contextmenu mouseWL mousemultiWL DOMMouseScroll mouseover mouseout mousemove selectstart selectend keydown keypress keyup orientationchange focus blur change reset select submit load unload beforeunload resize move DOMContentLoaded readystatechange message error abort scroll "+(A?"show input invalid touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend textinput readystatechange pageshow pagehide popstate hashchange offline online afterprint beforeprint dragstart dragenter dragover dragleave drag drop dragend loadstart progress suspend emptied stalled loadmetadata loadeddata canplay canplaythrough playing waiting seeking seeked ended durationchange timeupdate play pause ratechange volumechange cuechange checking noupdate downloading cached updateready obsolete ":""))),O=(j="compareDocumentPosition"in X?function(e,t){return t.compareDocumentPosition&&16==(16&t.compareDocumentPosition(e))}:"contains"in X?function(e,t){return(t=9===t.nodeType||t===window?X:t)!==e&&t.contains(e)}:function(e,t){for(;e=e.parentNode;)if(e===t)return 1;return 0},{mouseenter:{base:"mouseover",condition:J},mouseleave:{base:"mouseout",condition:J},mouseWL:{base:/Firefox/.test(navigator.userAgent)?"DOMMouseScroll":"mouseWL"}}),V=(r=x("altKey attrChange attrName bubbles cancelable ctrlKey currentTarget detail eventPhase getModifierState isTrusted metaKey relatedNode relatedTarget shiftKey srcElement target timeStamp type view which propertyName"),i=r.concat(x("button buttons clientX clientY dataTransfer fromElement offsetX offsetY pageX pageY screenX screenY toElement")),s=i.concat(x("WLDelta WLDeltaX WLDeltaY WLDeltaZ axis")),c=r.concat(x("char charCode key keyCode keyIdentifier keyLocation location")),d=r.concat(x("data")),p=r.concat(x("touches targetTouches changedTouches scale rotation")),g=r.concat(x("data origin source")),m=r.concat(x("state")),M=/over|out/,y=[{reg:/key/i,fix:function(e,t){return t.keyCode=e.keyCode||e.which,c}},{reg:/click|mouse(?!(.*WL|scroll))|menu|drag|drop/i,fix:function(e,t,n){return t.rightClick=3===e.which||2===e.button,t.pos={x:0,y:0},e.pageX||e.pageY?(t.clientX=e.pageX,t.clientY=e.pageY):(e.clientX||e.clientY)&&(t.clientX=e.clientX+N.body.scrollLeft+X.scrollLeft,t.clientY=e.clientY+N.body.scrollTop+X.scrollTop),M.test(n)&&(t.relatedTarget=e.relatedTarget||e[("mouseover"===n?"from":"to")+"Element"]),i}},{reg:/mouse.*(WL|scroll)/i,fix:function(){return s}},{reg:/^text/i,fix:function(){return d}},{reg:/^touch|^gesture/i,fix:function(){return p}},{reg:/^message$/i,fix:function(){return g}},{reg:/^popstate$/i,fix:function(){return m}},{reg:/.*/,fix:function(){return r}}],_={},I.prototype.preventDefault=function(){this.originalEvent.preventDefault?this.originalEvent.preventDefault():this.originalEvent.returnValue=!1},I.prototype.stopPropagation=function(){this.originalEvent.stopPropagation?this.originalEvent.stopPropagation():this.originalEvent.cancelBubble=!0},I.prototype.stop=function(){this.preventDefault(),this.stopPropagation(),this.stopped=!0},I.prototype.stopImmediatePropagation=function(){this.originalEvent.stopImmediatePropagation&&this.originalEvent.stopImmediatePropagation(),this.isImmediatePropagationStopped=function(){return!0}},I.prototype.isImmediatePropagationStopped=function(){return this.originalEvent.isImmediatePropagationStopped&&this.originalEvent.isImmediatePropagationStopped()},I.prototype.clone=function(e){var t=new I(this,this.element,this.isNative);return t.currentTarget=e,t},I),U=(k.prototype.inNamespaces=function(e){var t,n,r=0;if(!e)return!0;if(!this.namespaces)return!1;for(t=e.length;t--;)for(n=this.namespaces.length;n--;)e[t]===this.namespaces[n]&&r++;return e.length===r},k.prototype.matches=function(e,t,n){return!(this.element!==e||t&&this.original!==t||n&&this.handler!==n)},k),F=(f={},h=function(e,t,n,r,i,o){var a=i?"r":"$";if(t&&"*"!==t){var s,l=0,c=f[a+t],d="*"===e;if(c)for(s=c.length;l<s;l++)if((d||c[l].matches(e,n,r))&&!o(c[l],c,l,t))return}else for(var u in f)u.charAt(0)===a&&h(e,u.substr(1),n,r,i,o)},{has:function(e,t,n,r){var i,o=f[(r?"r":"$")+t];if(o)for(i=o.length;i--;)if(!o[i].root&&o[i].matches(e,n,null))return!0;return!1},get:function(e,t,n,r){var i=[];return h(e,t,n,null,r,function(e){return i.push(e)}),i},put:function(e){var t=!e.root&&!this.has(e.element,e.type,null,!1),n=(e.root?"r":"$")+e.type;return(f[n]||(f[n]=[])).push(e),t},del:function(e){h(e.element,e.type,null,e.handler,e.root,function(e,t,n){return t.splice(n,1),e.removed=!0,0===t.length&&delete f[(e.root?"r":"$")+e.type],!1})},entries:function(){var e,t=[];for(e in f)"$"===e.charAt(0)&&(t=t.concat(f[e]));return t}}),G=A?function(e,t,n){e[n?C:"removeEventListener"](t,o,!1)}:function(t,e,n,r){var i;n?(F.put(i=new U(t,r||e,function(e){o.call(t,e,r)},o,null,null,!0)),r&&null===t["_on"+r]&&(t["_on"+r]=0),i.target.attachEvent("on"+i.eventType,i.handler)):(i=F.get(t,r||e,o,!0)[0])&&(i.target.detachEvent("on"+i.eventType,i.handler),F.del(i))},Y=function(e,t,n,r,i){return function(){r.apply(this,arguments),e(t,n,i)}},R=function(e,t,n,r){for(var t=t&&t.replace(w,""),i=F.get(e,t,null,!1),o={},a=0,s=i.length;a<s;a++)n&&i[a].original!==n||!i[a].inNamespaces(r)||(F.del(i[a]),!o[i[a].eventType]&&i[a][T]&&(o[i[a].eventType]={t:i[a].eventType,c:i[a].type}));for(a in o)F.has(e,o[a].t,null,!1)||G(e,o[a].t,!1,o[a].c)},K=A?function(e,t,n){var r=N.createEvent(e?"HTMLEvents":"UIEvents");r[e?"initEvent":"initUIEvent"](t,!0,!0,b,1),n.dispatchEvent(r)}:function(e,t,n){n=l(n,e),e?n.fireEvent("on"+t,N.createEventObject()):n["_on"+t]++},L=function(e,t,n){var r,i,o,a=S(t);if(a&&0<t.indexOf(" "))for(o=(t=x(t)).length;o--;)L(e,t[o],n);else if((i=a&&t.replace(w,""))&&O[i]&&(i=O[i].base),!t||a)a=(a=a&&t.replace(v,""))&&x(a,"."),R(e,i,n,a);else if(W(t))R(e,null,t);else for(r in t)t.hasOwnProperty(r)&&L(e,r,t[r]);return e},$={on:u,add:function(e,t,n,r){return u.apply(null,S(n)?[e,n,t,r].concat(3<arguments.length?D.call(arguments,5):[]):D.call(arguments))},one:function(){return u.apply(H,arguments)},off:L,remove:L,clone:function(e,t,n){for(var r,i,o=F.get(t,n,null,!1),a=o.length,s=0;s<a;s++)o[s].original&&(r=[e,o[s].type],(i=o[s].handler.__beanDel)&&r.push(i.selector),r.push(o[s].original),u.apply(null,r));return e},fire:function(e,t,n){for(var r,i,o,a,s=x(t),l=s.length;l--;)if(t=s[l].replace(w,""),(o=(o=s[l].replace(v,""))&&x(o,"."))||n||!e[T])for(a=F.get(e,t,null,!1),n=[!1].concat(n),r=0,i=a.length;r<i;r++)a[r].inNamespaces(o)&&a[r].handler.apply(e,n);else K(q[t],t,e);return e},Event:V,setSelectorEngine:n,noConflict:function(){return t[e]=B,this}};function z(n,r,i,o){function a(e,t){return r.apply(n,o?D.call(t,e?0:1).concat(o):t)}function s(e,t){return r.__beanDel?r.__beanDel.ft(e.target,n):t}var e=i?function(e){var t=s(e,this);if(i.apply(t,arguments))return e&&(e.currentTarget=t),a(e,arguments)}:function(e){return r.__beanDel&&(e=e.clone(s(e))),a(e,arguments)};return e.__beanDel=r.__beanDel,e}function k(e,t,n,r,i,o,a){var s=O[t];"unload"===t&&(n=Y(R,e,t,n,r)),s&&(s.condition&&(n=z(e,n,s.condition,o)),t=s.base||t),this.isNative=s=q[t]&&!!e[T],this.customType=!A&&!s&&t,this.element=e,this.type=t,this.original=r,this.namespaces=i,this.eventType=A||s?t:"propertychange",this.target=l(e,s),this[T]=!!this.target[T],this.root=a,this.handler=z(e,n,null,o)}function I(e,t,n){if(arguments.length&&(e=e||((t.ownerDocument||t.document||t).parentWindow||b).event,this.originalEvent=e,this.isNative=n,this.isBean=!0,e)){var r,i,o,a,s,l=e.type,t=e.target||e.srcElement;if(this.target=t&&3===t.nodeType?t.parentNode:t,n){if(!(s=_[l]))for(r=0,i=y.length;r<i;r++)if(y[r].reg.test(l)){_[l]=s=y[r].fix;break}for(r=(a=s(e,this,l)).length;r--;)!((o=a[r])in this)&&o in e&&(this[o]=e[o])}}}function J(e){return(e=e.relatedTarget)?e!==this&&"xul"!==e.prefix&&!/document/.test(this.toString())&&!j(e,this):null===e}return b.attachEvent&&b.attachEvent("onunload",P=function(){var e,t=F.entries();for(e in t)t[e].type&&"unload"!==t[e].type&&L(t[e].element,t[e].type);b.detachEvent("onunload",P),b.CollectGarbage&&b.CollectGarbage()}),n(),$},"undefined"!=typeof module&&module.exports?module.exports=e():"function"==typeof define&&define.amd?define(e):t.bean=r=e(),n=0,S.isArray=function(e){return-1!==["[object Array]","[object NodeList]","[object HTMLCollection]"].indexOf(Object.prototype.toString.call(e))&&!(e instanceof Element||e instanceof HTMLDocument)},S.extend=function(){var e,t,n,r,i,o=arguments[0]||{},a=1,s=arguments.length,l=!1;for("boolean"==typeof o&&(l=o,o=arguments[1]||{},a=2),"object"!=typeof o&&"function"!=typeof o&&(o={}),s===a&&(o=S,--a);a<s;a++)if(null!==(e=arguments[a]))for(t in e)i=o[t],o!==(n=e[t])&&(l&&n&&(S.isPlainObject(n)||(r=S.isArray(n)))?(i=r?(r=!1,i&&S.isArray(i)?i:[]):i&&S.isPlainObject(i)?i:{},o[t]=S.extend(l,i,n)):void 0!==n&&(o[t]=n));return o},S.isPlainObject=function(e){var t,n=Object.prototype.hasOwnProperty;if(!e||"object"!=typeof e||e instanceof Element||e instanceof HTMLDocument||e.nodeType||"setInterval"in e||e.constructor&&!n.call(e,"constructor")&&!n.call(e.constructor.prototype,"isPrototypeOf"))return!1;for(t in e)break;return void 0===t||n.call(e,t)},S.extend({debug:!1,parseDebug:function(e){if(S.debug)throw e},_XR:function(e){return this._4X?(this._X=e,this):e},setGlobal:function(e,t){e&&"object"==typeof e&&(S.extend(!0,{},S.fn.globalDC,e),t)&&S.mergeGlobal()},mergeGlobal:function(){S.queryDC(function(e){S.extend(!0,{},S.fn.globalDC,e)})},reg:new Map,fn:{globalDC:{}},_version:"2023.8.12",lastCreated:[],_lastCreatedCallback:!1,lastCreatedCallback:function(e){S.isFn(e)&&(S._lastCreatedCallback=e)},props:{},isDocLoaded:!1,isDOMContentLoaded:!1,_boundRefO:new Map,_boundObjectIds:new Map,setIdFor:function(e){this._4X&&(e=this._X);var t=S.hasIdFor(e)?S.getIdFor(e):null;return t||(t=S.genId(),S._boundObjectIds.set(e,t),S._boundRefO.set(t,e)),t},remIdFor:function(e){this._4X&&(e=this._X);var t=S.hasIdFor(e)?S.getIdFor(e):null;return!!t&&(S._boundRefO.delete(t),S._boundObjectIds.delete(e),!0)},getIdFor:function(e){return this._4X&&(e=this._X),S._boundObjectIds.has(e)?S._boundObjectIds.get(e):null},hasIdFor:function(e){return this._4X&&(e=this._X),S._boundObjectIds.has(e)},getFromId:function(e){return this._4X&&(e=this._X),S._boundRefO.has(e)?S._boundRefO.get(e):null},_boundObjects:new Map,bindObjects:function(e,t){return this._4X&&(t=e,e=this._X),S._boundObjects.set(e,t),S._boundObjects.set(t,e),S._XR.call(this,e)},unbindObjects:function(e){return this._4X&&(e=this._X),S._boundObjects.delete(S._boundObjects.get(e)),S._boundObjects.delete(e),S._XR.call(this,e)},boundTo:function(e){return this._4X&&(e=this._X),S._boundObjects.get(e)},hasBound:function(e){return this._4X&&(e=this._X),S._boundObjects.has(e)},toFetch:function(e){var t=e.indexOf("#");return S.isPath(e)&&-1!==t?{url:S.trim(e.slice(0,t)),data:{selector:S.trim(e.slice(t))}}:{data:{}}},getSelectorFromURI:function(e){return S.isStr(e)?S.toFetch(e).data.selector:""},isPath:function(e){return!(!S.isStr(e)||S.isMarkup(e)||S.isSelector(e)||-1===e.indexOf("/"))},map:function(e){e&&(S.isArray(e.siblings)&&S.isDC(e.siblings[0])||S.isDC(e.parent))&&e.siblings[0].map(e)},_parseDCScripts:function(n,e,t){function r(o){S.loop(l,function(e,t){var n,r,i;n=-1!==(t=t).toLowerCase().indexOf("once"),i=t+"Ran",!(S.isFn((r=o)[t])||S.isStr(r[t])||S.isArray(r[t]))||n&&r[i]||(n&&!r[i]&&(r[i]=!0),S.isFn(r[t])?s.push(r[t]):S.isStr(r[t])?a.push(r[t]):S.isArray(r[t])&&Array.prototype.push.apply(a,r[t]))},"array")}function i(){S.loop(s,function(e,t){t(n,n.container)},"array")}var a=[],s=[],l=["jsOnce"+e,"once"+e,"js"+e,e[0].toLowerCase()+e.slice(1)];n.reverseJSOrder&&(l=l.reverse()),r(n),n.allowCascade&&(r(n.fn.proto),r(S.fn.globalDC)),S.isFn(t)&&s.push(t);return a.length?S.import(a,{props:{DC:n},call:function(){i()}}):i(),n},setPage:function(e,t){e&&(t&&(document.title=t),window.history.pushState({html:document.html,pageTitle:e},"","./#"+e))},getHash:function(e){var t;return e&&S.isStr(e)?-1!==(t=e.indexOf("#"))?S.trim(e.slice(t+1)):"":S.trim(location.hash.replace("#",""))},isHash:function(e){e=e||S.getHash();return S.hasDC(e)},hasHash:function(e,t){t=t||S.getHash();if(S.isHash(t)){if(!S.isArray(e))return!0;for(var n=0;n<e.length;n++)if((S.isDC(e[n])?e[n].id:e[n])===t)return!0}return!1},toDC:function(e,t){this._4X&&(t=e,e=this._X),S.isPlainObject(e)&&(t=e,e=null),S.isPlainObject(t)||(t={}),S.isPath(e)&&(t=S.extend({fetch:S.toFetch(e),autoRender:!0},t),e=null),e=e&&S.morph(e);var n=S.isNode(e)&&S.getAttr(e,"data-controls"),n=(t.fetch&&t.fetch.url&&(t.toggleHide=!1,t.mode=1),n&&S.isPath(n)?(t.toggleHide=!1,t.fetch=S.toFetch(n),t.content=null,t.trigger=e,t.mode=1,!t.id&&S.isNode(e)&&e.id&&(t.id=e.id)):n&&S.isSelector("#"+n)&&document.querySelector("#"+n)?(t.content=document.querySelector("#"+n),t.trigger=e,!t.id&&S.isNode(e)&&e.id&&(t.id=e.id)):S.isNode(e)&&(t.content||t.fetch)?(t.trigger=e,!t.id&&e.id&&(t.id=e.id)):S.isNode(e)&&(!t.id&&e.id&&(t.id=e.id),t.content=e),S.isBool(t.isRendered)?t.isRendered:!S.isHidden(t.content)),e=(n&&!t.root&&(S.isNode(S.next(t.content))?(t.root=S.next(t.content),t.before=!0):S.isNode(S.previous(t.content))?(t.root=S.previous(t.content),t.after=!0):S.isNode(t.content.parentNode)&&(t.root=t.content.parentNode,t.append=!0),t.loaded=!0),t.isRendered=n,t.widgetType=t.widgetType||S.getAttr(e,"data-widget-type")||null,S([S.extend(!0,{id:t.id||S.genId(),fn:{isMorphedDC:!0},on:"click"},t)])[0]);return n&&e.loaded&&S.isNode(e.content)&&(e.content.id||(e.content.id=S.genId()),e.wrapper=e.container=e.content,e.wrapperId=e.containerId=e.content.id),e},_store:function(e,t){if(e&&11===e.nodeType){for(var n=[],r=0;r<e.childNodes.length;r++){var i=e.childNodes[r];S.isNode(i)&&n.push(i)}if(S.data(n,"StoredFrag",e),S.data(e,"StoredNodeList",n),t)return n}return e},_check:function(e,t){var n,r=S.isArray(e);return S.isChain(e)?S._check(e.return(),t):r?t?S.data(e,"StoredFrag")||S.toNode(e,!0):e:e&&11===e.nodeType?(n=S.data(e,"StoredNodeList")||[]).length?t?e:n:e.childNodes.length?S._store(e,!t):t?null:[]:t||r?e:[e]},toNode:function(t,e,n){if(this._4X&&(e=t,t=this._X),!t)return document.createDocumentFragment();var r;if(S.isStr(t))try{t=S._store(document.createRange().createContextualFragment(t),n)}catch(e){var i=document.createDocumentFragment();S.insertMarkup(t,i),t=S._store(i,n)}else e&&S.isArray(t)&&(i=document.createDocumentFragment(),(r=function(e){e&&11===e.nodeType&&(e=S._store(e,!0)),S.loop(e,function(e,t){t&&11===t.nodeType?r(t):S.isNode(t)&&i.appendChild(t)},"array")})(t),t=S._store(i));return!n&&!S.isArray(t)&&t&&11===t.nodeType&&t.childNodes&&1===t.childNodes.length&&(t=t.childNodes[0]),n&&!S.isArray(t)&&(t=[t]),S._XR.call(this,t)},_clone:function(e){var t;return S.isChain(e)?e:((t=function(e){this._4X=!0,this._X=e}).prototype=S,new t(e))},return:function(e){return e=this._4X?this._X:e},getNode:function(e){return e=this._4X?this._X:e},getDC:function(e,t){return this._4X&&(t=e,e=this._X),S.isDC(e)?e:S.reg.has(e)?S.reg.get(e):t&&S.hasDC(e,t)?S.data(e,"DC"):null},isChain:function(e){return!(!e||"object"!=typeof e||!e._4X)},isDC:function(e){return!!(e&&"object"==typeof e&&e.fn&&e.fn.isDCI)},hasDC:function(e,t){return!!(e&&(S.isDC(e)||S.reg.has(e)||t&&S.isDC(S.data(e,"DC"))))},preload:function(e){this._4X&&(e=this._X);var t=S.morph(e);return S.isNode(t)&&S.on("load",function(){S._imageMap||(S._imageMap={});var n=[];S.query("img[src]",t,function(e,t){S._imageMap[t.src]&&S._imageMap[t.src].parentNode||n.push(t.src)}),n.length&&S("<div hidden></div>").import(n,{tag:"img",callOnAll:!0,call:function(e){S._imageMap[e.src]=e}}).appendTo(document.body)}),S._XR.call(this,e)},isMarkup:function(e){return!(!(e=this._4X?this._X:e)||!S.isStr(e))&&1<s.iterate(e,/</g)&&1<s.iterate(e,/>/g)},morph:function(e,t,n){return S.isArray(e)?e:S.isNode(e,null,null,11)?t&&!S.isArray(e)?[e]:e:S.isStr(e)?S.isMarkup(e)?S.toNode(e,!1,t):window.document.getElementById(e)?window.document.getElementById(e):S.isSelector(e)?(n=(n=S.isNode(n,null,document,11)?n:document).querySelectorAll(e),t||1!==n.length?t||n.length||(n=null):n=n[0],n):S.toText(e):S.isNum(e)?(e=S.toText(e.toString()),t?[e]:e):t&&!S.isArray(e)?[e]:e},isMap:function(e){try{return Map.prototype.has.call(e),!0}catch(e){return!1}},loop:function(e,n,t){if(this._4X&&(t=n,n=e,e=this._X),S.isFn(n))if(S.isArray(e)||"array"!==t||(e=[e]),t&&"map"!==t||!S.isMap(e)||!S.isFn(e.forEach))if(t&&"array"!==t||!S.isArray(e))if(t&&"object"!==t||!e||"object"!=typeof e)if(t&&"string"!==t||!S.isStr(e))(S.isNode(e)||e&&"other"===t)&&n.call(e,0,e);else for(i=0;i<e.length;i++)n.call(e.charAt(i),i,e.charAt(i));else for(var r in e)n.call(e[r],r,e[r]);else for(var i=0;i<e.length;i++)n.call(e[i],i,e[i]);else e.forEach(function(e,t){n.call(e,t,e)});return S._XR.call(this,e)},isSelector:function(e){if(e&&S.isStr(e))try{return!!document.querySelectorAll(e)}catch(e){}return!1},isNode:function(n,e,t){return!(!n||S.isArray(n)||!(n instanceof Element||t&&t instanceof HTMLDocument&&n instanceof HTMLDocument||e&&n===e||function(e){for(var t=3;e[t];){if(n.nodeType===e[t])return!0;t++}return!1}(arguments)))},isArray:function(e){return this._4X&&(e=this._X),-1!==["[object Array]","[object NodeList]","[object HTMLCollection]"].indexOf(Object.prototype.toString.call(e))&&!(e instanceof Element||e instanceof HTMLDocument)},inArray:function(e,t){if(this._4X&&(t=e,e=this._X),t.indexOf)return t.indexOf(e);for(var n=0;n<t.length;n++)if(t[n]===e)return n;return-1},isFn:function(e){return"function"==typeof e},isStr:function(e){return"string"==typeof e},isNum:function(e){return"number"==typeof e},isBool:function(e){return"boolean"==typeof e},isTouch:!1,isIE:function(){return!window.ActiveXObject&&"ActiveXObject"in window},trim:function(e){return this._4X&&(e=this._X),e=S.isStr(e)?e.replace(/^\s+|\s+$/g,""):e},query:function(e,t,n){this._4X&&(n=t,t=this._X),S.isFn(t)&&(n=t,t=null),S.isNode(t,null,document,11)||(t=document);var r=[],i=!0,o=!1;if(!e)return S._XR.call(this,r);S.isMarkup(e)?r=S.toNode(e,!1,!0):S.isSelector(e)&&S.isFn(t.querySelectorAll)?r=t.querySelectorAll(e):S.isNode(e)?r.push(e):(i=S.isArray(e),o=S.isPlainObject(e),(i||o)&&(r=e));var a=[];if(n&&S.isFn(n))if(i)for(var s=0;s<r.length;s++)!1!==n.apply(r[s],[s,r[s]])&&a.push(r[s]);else if(o)for(var l in r)!1!==n.apply(r[l],[l,r[l]])&&a.push(r[l]);else Array.prototype.push.apply(a,r);else Array.prototype.push.apply(a,r);return S._XR.call(this,a)},getText:function(e){return(e=this._4X?this._X:e)?S.isNode(e)?e.innerText||e.textContent||"":e&&3===e.nodeType?e.data:"":""},queryDC:function(e,n){S.isFn(e)&&(n=e,e=null);var r=[];return S.isFn(n)&&(e?S.loop(e,function(e,t){S.hasDC(t)&&(t=S.getDC(t),!1!==n.call(t,t))&&r.push(t)},"array"):S.loop(S.reg,function(e,t){!S.isDC(t)||n.call(t,t)||r.push(t)},"map")),r},Get:function(o){var a,s,l;o&&null!==o.url&&(a={returnType:"html",selector:"",method:"GET",headers:{},body:null,cache:S.noCache?"no-cache":"default",redirect:"follow",keepalive:!1,mode:"cors"},s=0,l=function(e,t,n,r){var i=S.extend({},a,t||{});window.fetch(e,i).then(function(t){200<=t.status&&t.status<300?0<=["html","text","xml"].indexOf(i.returnType.toLowerCase())?t.text().then(function(e){S.isStr(e)&&"xml"===i.returnType.toLowerCase()?e=S.toXML(e):S.isStr(e)&&"html"===i.returnType.toLowerCase()&&(e=S.toNode(e)),S.isNode(e,null,document,11)&&S.isSelector(i.selector)&&(e=e.querySelector(i.selector)),S.isFn(n)&&n.call(this,e,t),o[++s]&&l(o[s].url,o[s].data,o[s].success,o[s].error)}):"json"===i.returnType.toLowerCase()&&t.json().then(function(e){S.isFn(n)&&n.call(this,e,t),o[++s]&&l(o[s].url,o[s].data,o[s].success,o[s].error)}):S.isFn(r)&&r.call(this,t.statusText,t)}).catch(function(e){S.isFn(r)&&r.call(this,e,this)})},S.isArray(o)||(o=[o]),l(o[s].url,o[s].data,o[s].success,o[s].error))},toXML:function(e){var t;return e=e||"",window.DOMParser?t=(new DOMParser).parseFromString(e,"text/xml"):((t=new window.ActiveXObject("Microsoft.XMLDOM")).async="false",t.loadXML(e)),t},moduleFolder:"/4X/Min/",noCache:!1,_ICB:[],_ICBD:[],_cssCache:{},_jsCache:{},_cacheName:{},clearCache:function(){S._cssCache={},S._jsCache={},S._cacheName={}},import:function(e,s,l){this._4X&&(l=this._X),S.isFn(s)?s={call:s}:S.isNode(s,null,null,11)&&(l=s,s={}),s=s||{};function c(e,t,n){e.length&&(e[e.length-1].call(window,e[e.length-1]._props,n),t===h)&&e.splice(e.length-1,1)}var d=(S.isBool(s.noCache)?s:S).noCache,u=(S.isFn(l)&&(s.call=l,l=null),S.isNode(s.context,null,null,11)&&(l=s.context),S.isNode(l,null,null,11)||(l=null),s.props||(s.props={}),!!s.props._Defer),f=(u&&(s.defer=!0),s.defer&&(s.props._Defer=!0),s.props._ImpId||S.genId()),n=(s.props._ImpId=f,S.isFn(s.call)||(s.call=function(){}),[]),h=S.isArray(e)?e.length-1:0;return!e||S.isArray(e)&&!e.length||!d&&s.name&&S._cacheName[s.name]?S.isFn(S._cacheName[s.name])&&(u||!s.defer||S.isDocLoaded?S._cacheName[s.name].call(window,s.props):S.on("load",function(){S._cacheName[s.name].call(window,s.props)})):"img"===s.tag&&S.isNode(l,null,null,11)?S.loop(e,function(e,t){t=S.create("img",{src:t,alt:""});l.appendChild(t),(s.callOnAll||e===h)&&S.isFn(s.call)&&s.call.call(l,s.props,t)},"array"):(S.isFn(s.call)&&(s.call._props=s.props||{},S[s.defer?"_ICBD":"_ICB"].push(s.call)),S.loop(e,function(i,e){var t,o=".css"===e.slice(-4).toLowerCase(),a=(S.isPath(e)?"":S.moduleFolder)+(o||".js"===e.slice(-3).toLowerCase()?e:e+".js");if(!d&&o&&S._cssCache[a])S.get(S._cssCache[a].id)||(l||document.head||document.body).appendChild(S._cssCache[a].cloneNode(!0)),S.isFn(s.call)&&(s.callOnAll||i===h)&&s.call.call(window,s.call._props);else if(d||o||!S._jsCache[a]||S._jsCache[a]._ImpId===f)n.push(S.extend(!0,{url:a,data:{returnType:"text"},success:function(e,t){var n=!1;if(e){if(o)(n=S.create("style",{type:"text/css",id:S.genId()})).innerHTML=e,d||(S._cssCache[a]=n),(l||document.head||document.body).appendChild(n.cloneNode(!0));else try{var r=S._jsCache[a]||new Function("window,document,$A,props,DC",e),n=S._jsCache[a]&&S._jsCache[a].once?null:r.call(window,window,document,S,s.props,s.props.DC);!d&&s.once&&(r.once=!0),r._ImpId=f,d||S._jsCache[a]||(S._jsCache[a]=r)}catch(e){S.parseDebug(e)}!d&&s.name&&(S._cacheName[s.name]=s.call)}(s.callOnAll||i===h)&&S.isFn(s.call)&&(u||!s.defer||S.isDocLoaded?c(S[s.defer?"_ICBD":"_ICB"],i,n):S.on("load",function(){c(S._ICBD,i,n)}))}},s.override||{}));else{if(!S._jsCache[a].once)try{t=S._jsCache[a].call(window,window,document,S,s.props,s.props.DC)}catch(e){S.parseDebug(e)}(s.callOnAll||i===h)&&S.isFn(s.call)&&(u||!s.defer||S.isDocLoaded?c(S[s.defer?"_ICBD":"_ICB"],i,t):S.on("load",function(){c(S._ICBD,i,t)}))}},"array"),S.Get(n)),S._XR.call(this,l)},getScript:function(e,n,r){n=(n=S.isFn(n)?{callback:n}:n)||{};var i=S.isArray(e)?0:e.length-1;S.loop(e,function(e,t){t=S.create("script",{src:(S.isPath(t)?"":S.moduleFolder)+(".js"===t.slice(-3).toLowerCase()?t:t+".js"),async:!n.disableAsync,defer:!!n.defer});(n.callbackOnAll||e===i)&&S.isFn(n.callback)&&t.addEventListener("load",function(e){n.callback.call(window,n.props||e)}),(r||document.head||document.body).appendChild(t)},"array")},_parseURLWithSelector:function(e){var t=e.split(/\s+/);return{url:t[0],selector:e.substring(t[0].length)}},load:function(e,n,t,r,i){this._4X&&(i=r,r=t,t=n,n=this._X),S.isFn(t)&&(i=r,r=t,t=null);var o={returnType:"html"};return S.extend(o,t||{}),S.Get({url:e,data:o,success:function(e,t){S.insert(e,n),S.isFn(r)&&r.call(this,e,t)},error:function(e,t){S.isFn(i)&&i.call(this,e,t)}}),S._XR.call(this,n)},detachObserver:function(e,t){var n=S.data(e,"_MutationObserver")||!1;if(!n||!t||!n[t])return!1;if(t&&n[t])n[t].disconnect();else for(t in n)n[t].disconnect();return!0},isObserverConfig:function(e){return!(!S.isPlainObject(e)||!(e.context||e.subtree||e.childList||e.attributes||e.attributeFilter||e.attributeOldValue||e.characterData||e.characterDataOldValue))},observer:function(i,o,a,e,t){if(o=o.toLowerCase(),-1===",remove,add,attributechange,subtreechange,contentchange,".indexOf(","+o+","))return!1;var n=i,r={};if("remove"===o||"add"===o)r={childList:!0,subtree:!0},t.context?(n=t.context,delete t.context):"remove"===o&&(n=document);else if("attributechange"===o)r={attributes:!0,attributeOldValue:!0},S.isArray(e)&&e.length&&(r.attributeFilter=e);else if("subtreechange"===o)r={childList:!0,subtree:!0};else{if("contentchange"!==o)return!1;r={characterData:!0,childList:!0,subtree:!0,characterDataOldValue:!0},S.data(i,"_CurrentText",S.getText(i))}S.extend(r,t||{}),S.data(i,"_MutationObserver")||S.data(i,"_MutationObserver",{});e=S.data(i,"_MutationObserver");return e[o]||(e[o]=new MutationObserver(function(e){e.forEach(function(e){var t=e.target,n=S.boundTo(t)||S.getDC(S.data(t,"SavedEventParameters"))||S.data(t,"DC"),r=S.data(t,"SavedEventParameters");"childList"===e.type?"remove"===o&&S.isArray(e.removedNodes)&&e.removedNodes.length&&-1!==(S.isFn(Array.from)?Array.from(e.removedNodes):[].slice(e.removedNodes)).indexOf(i)?a.call(t,e,t,e.removedNodes,n,r):"add"===o&&S.isArray(e.addedNodes)&&e.addedNodes.length?a.call(t,e,t,e.addedNodes,n,r):"subtreechange"===o&&(S.isArray(e.addedNodes)&&e.addedNodes.length||S.isArray(e.removedNodes)&&e.removedNodes.length)?a.call(t,e,t,e.addedNodes,e.removedNodes,n,r):"contentchange"===o&&(S.data(t,"_OldText",S.data(t,"_CurrentText")),S.data(t,"_CurrentText",S.getText(t)),a.call(t,e,t,S.data(t,"_CurrentText"),S.data(t,"_OldText"),n,r)):"attributes"===e.type?"attributechange"===o&&a.call(t,e,t,e.attributeName,S.getAttr(t,e.attributeName),e.oldValue,n,r):"characterData"===e.type&&"contentchange"===o&&(S.data(t,"_OldText",S.data(t,"_CurrentText")),S.data(t,"_CurrentText",S.getText(t)),a.call(t,e,t,S.data(t,"_CurrentText"),S.data(t,"_OldText"),n,r))})})),e[o].observe(n,r),S.data(i,"_MutationObserver",e),!0},keyEvent:function(e){return e.which||e.keyCode},event:{on:r.on,add:r.add,one:r.one,off:r.off,remove:r.off,fire:r.fire,Event:r.Event},on:function(e,t,n,r,o,a,s){function l(e){return S.isDOMContentLoaded&&"DOMContentLoaded"===e||S.isDocLoaded&&"load"===e}if(this._4X&&(s=a,a=o,o=r,r=n,n=t,t=e,e=this._X),S.isFn(S.isObserverConfig)&&S.isObserverConfig(n)?(s=n,n=null):S.isFn(S.isObserverConfig)&&S.isObserverConfig(r)?(s=r,r=null):S.isFn(S.isObserverConfig)&&S.isObserverConfig(o)?(s=o,o=null):s={},a=s.attributeFilter||!1,"DOMContentLoaded"!==e&&"load"!==e&&"touchchange"!==e||!S.isFn(t)||(o=r,r=n,n=t,t=e,e=window),S.isStr(n)&&"."===n[0]?(o=n,n=null):S.isStr(r)&&"."===r[0]&&(o=r,r=null),n&&!S.isFn(n)&&(o=r,r=n,n=null),!e||!t)return this._4X?this:e;S.isStr(e)&&(e=S.morph(e));var i=S._check(e);return S.isStr(t)&&(t=t.split(/\s+/)),S.isStr(o)||(o=""),S.loop(i,function(e,i){S.isNode(i,window,document,11)&&(r&&S.data(i,"SavedEventParameters",r),S.loop(t,function(e,r){var t;S.isStr(e)&&S.isFn(r)?(e=e.split(/\s+/),S.loop(e,function(e,t){var n=S.getDC(S.data(i,"SavedEventParameters"))||S.data(i,"DC");S.isDC(n)&&S.isMap(S.data(i,"DC-ON"))&&(n.triggerNode=i),l(t)?r.call(i,null,n,S.data(i,"SavedEventParameters")):S.observer(i,t,r,a,s)||S.event.on(i,t+o,function(e){r.call(i,e,n,S.data(i,"SavedEventParameters"))})},"array")):S.isStr(r)&&S.isFn(n)&&(t=S.getDC(S.data(i,"SavedEventParameters"))||S.data(i,"DC"),S.isDC(t)&&S.isMap(S.data(i,"DC-ON"))&&(t.triggerNode=i),l(r)?n.call(i,null,t,S.data(i,"SavedEventParameters")):S.observer(i,r,n,a,s)||S.event.on(i,r+o,function(e){n.call(i,e,t,S.data(i,"SavedEventParameters"))}))},S.isArray(t)?"array":"object"))},"array"),S._XR.call(this,e)},off:function(e,t){var r,n;return this._4X&&(t=e,e=this._X),e?(r=t,S.isStr(e)&&(e=S.morph(e)),n=S._check(e),S.isArray(n)||(n=[n]),S.isStr(r)&&(r=r.split(/\s+/)),S.loop(n,function(e,n){S.isNode(n,window,document,11)&&(S.removeData(n,"SavedEventParameters"),t?S.loop(r,function(e,t){S.isStr(t)&&(S.detachObserver(n,t),S.event.off(n,t))},S.isArray(r)?"array":"object"):(S.detachObserver(n),S.event.off(n)))},"array"),S._XR.call(this,e)):this._4X?this:e},trigger:function(e,t){var r;return this._4X&&(t=e,e=this._X),e&&t?(r=t,S.isStr(e)&&(e=S.morph(e)),t=S._check(e),S.isStr(r)&&(r=r.split(/\s+/)),S.loop(t,function(e,n){S.isNode(n,window,document)&&S.loop(r,function(e,t){S.isStr(t)&&S.event.fire(n,t)},"array")},"array"),S._XR.call(this,e)):this._4X?this:e},isNative:function(e){var t;return this._4X&&(e=this._X),!!S.isNode(e)&&(t=e.nodeName.toLowerCase(),e=S.hasAttr(e,"href"),!!("a"===t&&e||-1!==["button","input","select","textarea","details"].indexOf(t)))},getActive:function(e,n){e=S.isNode(e)?e:document;return S.query("a[href], button, input, textarea, select, details, *[tabindex]",e,function(e,t){if(n)return S.isFocusable(t)})},setCircular:function(e,t){var n,r;return this._4X&&(t=e,e=this._X),S.isArray(e)&&(t=e,e=null),S.isArray(t)||S.isNode(e,null,null,11)?((t=!S.isArray(t)&&S.isNode(e,null,null,11)?S.getActive(e,!0):t).length&&(n=t[0],r=t[t.length-1],S.on(n,"keydown",function(e){9!==S.keyEvent(e)||!e.shiftKey||e.altKey||e.ctrlKey||(S.focus(r),e.preventDefault())},".circularTabbing"),S.on(r,"keydown",function(e){9!==S.keyEvent(e)||e.shiftKey||e.altKey||e.ctrlKey||(S.focus(n),e.preventDefault())},".circularTabbing")),S._XR.call(this,t)):[]},addWidgetProfile:function(e,t){S.module[e]||(S.module[e]={}),S.extend(S.module[e],t)},module:{},getModule:function(e,t,n){if(S.module[e.widgetType]&&S.isFn(S.module[e.widgetType][t]))return S.module[e.widgetType][t](e,n)},_widgetTypes:[],_regWidgets:new Map,_dataMap:new Map,data:function(e,t,n){var r;return this._4X&&(n=t,t=e,e=this._X),e?e&&t&&void 0===n?S._dataMap.has(e)&&S._dataMap.get(e).has(t)?(r=S._dataMap.get(e).get(t),S._XR.call(this,r)):S._XR.call(this,null):(e&&t&&void 0!==n&&(S._dataMap.has(e)||S._dataMap.set(e,new Map),S._dataMap.get(e).set(t,n)),S._XR.call(this,e)):this._4X?this:e},removeData:function(e,t){return this._4X&&(t=e,e=this._X),e&&t?S._dataMap.has(e)&&S._dataMap.get(e).has(t)&&S._dataMap.get(e).delete(t):e&&S._dataMap.has(e)&&S._dataMap.delete(e),S._XR.call(this,e)},insert:function(e,t,n,r){return this._4X&&(n=t,t=this._X),e=S.morph(e),t=S.morph(t),S.isNode(t,null,null,11)&&S.isNode(e,null,null,11,3)?(S.empty(t),t.appendChild(e),n&&S.isFn(n)&&n.apply(e,[e]),S.straylight&&!r&&S.straylight(t),S._XR.call(this,e)):this._4X?this:e},insertWithin:function(e,t,n){return this._4X&&(n=t,t=this._X),t=S.insert(t,e,n),S._XR.call(this,t)},before:function(e,t,n){return this._4X&&(n=t,t=e,e=this._X),e=S._insertBefore(e,t,n),S._XR.call(this,e)},_insertBefore:function(e,t,n){return this._4X&&(n=t,t=e,e=this._X),e=S.morph(e),t=S.morph(t),S.isNode(t)&&S.isNode(e,null,null,11)?(t.parentNode.insertBefore(e,t),n&&S.isFn(n)&&n.apply(e,[e]),S._XR.call(this,e)):this._4X?this:e},replace:function(e,t,n){return this._4X&&(n=t,t=e,e=this._X),e=S._replaceChild(e,t,n),S._XR.call(this,e)},_replaceChild:function(e,t,n){return e=S.morph(e),t=S.morph(t),S.isNode(t)&&S.isNode(e,null,null,11)&&(t.parentNode.replaceChild(e,t),n)&&S.isFn(n)&&n.apply(e,[e]),e},after:function(e,t,n){return this._4X&&(n=t,t=e,e=this._X),e=S._insertAfter(e,t,n),S._XR.call(this,e)},_insertAfter:function(e,t,n){var r;return e=S.morph(e),t=S.morph(t),S.isNode(t)&&S.isNode(e,null,null,11)&&((r=S.nextSibling(t))?r.parentNode.insertBefore(e,r):t.parentNode.appendChild(e),n)&&S.isFn(n)&&n.apply(e,[e]),e},prepend:function(e,t,n){var r;return this._4X&&(n=t,t=this._X),e=S.morph(e),t=S.morph(t),S.isNode(t,null,null,11)&&S.isNode(e,null,null,11)&&((r=S.firstChild(t))?S._insertBefore(e,r):t.appendChild(e)),n&&S.isFn(n)&&n.apply(e,[e]),S._XR.call(this,e)},prependTo:function(e,t,n){return this._4X&&(n=t,t=this._X),t=S.prepend(t,e,n),S._XR.call(this,t)},append:function(e,t,n){return this._4X&&(n=t,t=this._X),e=S.morph(e),t=S.morph(t),S.isNode(t,null,null,11)&&S.isNode(e,null,null,11)&&(S.isStr(e)&&(e=S.morph(e)),t.appendChild(e)),n&&S.isFn(n)&&n.apply(e,[e]),S._XR.call(this,e)},appendTo:function(e,t,n){return this._4X&&(n=t,t=this._X),t=S.append(t,e,n),S._XR.call(this,t)},insertMarkup:function(e,t,n,r){var i;return this._4X&&(r=n,n=t,t=this._X),S.isFn(n)&&(r=n,n=null),t=S.morph(t),S.isNode(t)&&(S.isNum(e)&&(e=e.toString()),S.isStr(e))&&((i={prepend:"afterbegin",append:"beforeend",before:"beforebegin",after:"afterend"})[n]?t.insertAdjacentHTML(i[n],e):(S.empty(t),t.innerHTML=e)),r&&S.isFn(r)&&r.apply(t,[t]),S._XR.call(this,t)},_deleteNode:function(t){try{var e=document.createRange();e.selectNode(t),e.deleteContents()}catch(e){t&&t.parentNode&&t.parentNode.removeChild(t)}},cloneNodes:function(t,e){var n;this._4X&&(t=this._X);try{var r=document.createRange();r.selectNodeContents(t),n=r.cloneContents()}catch(e){if(n=S.toNode(),S.isNode(t)&&t.firstChild)for(var i=t.firstChild;i;)i.cloneNode&&n.appendChild(i.cloneNode(!0)),i=t.nextSibling}return n=S._store(n),S._XR.call(this,n)},extractNodes:function(t,e){var n;this._4X&&(t=this._X);try{var r=document.createRange();r.selectNodeContents(t),n=r.extractContents()}catch(e){if(n=S.toNode(),S.isNode(t)&&t.firstChild)for(var i=t.firstChild;i;)n.appendChild(t.removeChild(i)),i=t.firstChild}return 11===n.nodeType&&1===n.childNodes.length&&(n=n.childNodes[0]),n=S._store(n),S._XR.call(this,n)},empty:function(e,t){if(this._4X&&(t=e,e=this._X),e&&e.getElementsByTagName){var n=e.getElementsByTagName("*");if(n.length)for(var r=n.length;r--;)S.remove(n[r],!0);e.innerHTML=""}return t&&(S.remove(e),e=null),S._XR.call(this,e)},_cleanAll:function(e,t,n){if(e&&e.getElementsByTagName){for(var r=e.getElementsByTagName("*"),i=r.length;i--;)S._clean(r[i],n);t&&S._clean(e,n)}},_clean:function(e,t){var n=S.data(e,"DC-ON");S.isMap(n)&&S.loop(n,function(e,t){t.bypass()},"map"),S.detachObserver(e),S.removeData(e),S.event.off(e)},remove:function(e,t){if(this._4X&&(t=e,e=this._X),e&&11===e.nodeType){var n=S._check(e);if(n&&n.length)for(var r=n.length;r--;)S.remove(n[r],t);S._clean(e,t),e=null}else e&&e.nodeType&&(S._clean(e,t),t||(S._deleteNode(e),e=null));return S._XR.call(this,e)},destroy:function(s,n,e){var l,c,d;if(!e)return l=null,l=S.isDC(s)?s:S.reg.get(s),!!S.isDC(s)&&(c=l.wrapper,d=l.container,n&&l.loaded&&(l.contentOnly?(S.before(d,c),d=null):S.before(S.extractNodes(d),c)),l.bypass(function(){var e,t=l.afterDestroy,n=(S.isFn(l.beforeDestroy)&&l.beforeDestroy(l),S.removeData(l.id),l.id=l.wrapper=l.container=c=d=null,l.widgetType&&l.autoCloseWidget&&-1!==(n=S._widgetTypes.indexOf(l.id))&&S._widgetTypes.splice(n,1),l.widgetType&&l.autoCloseSameWidget&&-1!==(n=(e=S._regWidgets.get(l.widgetType)).indexOf(l.id))&&(e.splice(n,1),S._regWidgets.set(l.widgetType,e)),l.indexVal),r=l.siblings;r.splice(n,1);for(var i=0;i<r.length;i++)r[i].indexVal=i,r[i].siblings=r;if(l.parent&&l.parent.children&&l.parent.children.length){for(var o=-1,a=l.parent.children,i=0;i<a.length;i++)a[i].id===s&&(o=i);0<=o&&l.parent.children.splice(o,1)}S.reg.delete(s),S.isFn(t)&&t()}),!0);S.query(s,function(e,t){S.isMap(S.data(t,"DC-ON"))&&S.loop(S.data(t,"DC-ON"),function(e,t){S.destroy(t,n)},"map")})},get:function(e,t,n){var r;return this._4X&&(n=t,t=this._X),S.isFn(t)&&(n=t,t=null),t=S.isNode(t,null,document)?t:document,e&&S.isStr(e)?(r=null,t.getElementById&&(r=t.getElementById(e)),!S.isNode(r)&&t.querySelector&&(r=t.querySelector(e)),S.isNode(r)&&S.isFn(n)&&n.call(r,r),S._XR.call(this,r)):null},create:function(e){e=S.isMarkup(e)?S.morph(e):document.createElement(e);return 1!==arguments.length&&S.isNode(e)&&(arguments[1]&&S.setAttr(e,arguments[1]),arguments[2]&&S.css(e,arguments[2]),arguments[3]&&S.addClass(e,arguments[3]),arguments[4])&&S.insert(arguments[4],e),e},toText:function(e){return S.isNode(e,null,null,3)?e:(S.isStr(e)||(e=""),document.createTextNode(e))},getAttr:function(e,t){this._4X&&(t=e,e=this._X),e=S.morph(e);e=S._check(e,!0);return S.isNode(e)&&t?e.getAttribute(t):null},hasAttr:function(e,t){this._4X&&(t=e,e=this._X),e=S.morph(e);e=S._check(e,!0);return S.isNode(e)&&t?e.hasAttribute(t):null},remAttr:function(e,t){this._4X&&(t=e,e=this._X),e=S.morph(e);for(var n=S._check(e),r=S.isArray(n)?n:[n],i=0;i<r.length;i++)if(S.isNode(r[i]))for(var o=S.isArray(t)?t:[t],a=0;a<o.length;a++)r[i].removeAttribute(o[a]);return S._XR.call(this,e)},setAttr:function(e,t,n){this._4X&&(n=t,t=e,e=this._X),e=S.morph(e);for(var r=S._check(e),i=S.isArray(r)?r:[r],o=0;o<i.length;o++)if(S.isNode(i[o]))if(S.isStr(t))null==n?i[o].removeAttribute(t):i[o].setAttribute(t,n);else if("object"==typeof t)for(var a in t)null===t[a]||void 0===t[a]?i[o].removeAttribute(a):i[o].setAttribute(a,t[a]);return S._XR.call(this,e)},toggleAttr:function(e,t,n){this._4X&&(n=t,t=e,e=this._X),e=S.morph(e);for(var r=S._check(e),i=S.isArray(r)?r:[r],o=S.isIE(),a=0;a<i.length;a++)if(S.isNode(i[a]))if(S.isStr(t))o?i[a].setAttribute(t,S.isBool(n)?n:!i[a].getAttribute(t)):S.isBool(n)?i[a].toggleAttribute(t,n):i[a].toggleAttribute(t);else if("object"==typeof t)for(var s in t)o?i[a].setAttribute(s,S.isBool(t[s])?t[s]:!i[a].getAttribute(s)):S.isBool(t[s])?i[a].toggleAttribute(s,t[s]):i[a].toggleAttribute(s);return S._XR.call(this,e)},prevSibling:function(e,t){if(this._4X&&(t=e,e=this._X),e=S.morph(e),e=S._check(e,!0),!S.isNode(e,null,null,11))return this._4X?this:e;for(e=e.previousSibling;e&&(!S.isNode(e)||S.isFn(t)&&(!S.isFn(t)||!0!==t(e)));)e=e.previousSibling;return S._XR.call(this,e)},nextSibling:function(e,t){if(this._4X&&(t=e,e=this._X),e=S.morph(e),e=S._check(e,!0),!S.isNode(e,null,null,11))return this._4X?this:e;for(e=e.nextSibling;e&&(!S.isNode(e)||S.isFn(t)&&(!S.isFn(t)||!0!==t(e)));)e=e.nextSibling;return S._XR.call(this,e)},firstChild:function(e,t){if(this._4X&&(t=e,e=this._X),e=S.morph(e),e=S._check(e,!0),!S.isNode(e,null,null,11))return this._4X?this:e;for(e=e.firstChild;e&&(!S.isNode(e)||S.isFn(t)&&(!S.isFn(t)||!0!==t(e)));)e=e.nextSibling;return S._XR.call(this,e)},lastChild:function(e,t){if(this._4X&&(t=e,e=this._X),e=S.morph(e),e=S._check(e,!0),!S.isNode(e,null,null,11))return this._4X?this:e;for(e=e.lastChild;e&&(!S.isNode(e)||S.isFn(t)&&(!S.isFn(t)||!0!==t(e)));)e=e.previousSibling;return S._XR.call(this,e)},nearestHL:function(n,e){if(!S.isNode(n))return 0;n.id||(n.id=S.genId());var t,r=(e||document).querySelectorAll('h1, h2, h3, h4, h5, h6, *[role="heading"], #'+n.id),i=null;return S.loop(r,function(e,t){n===t&&(i=r[e-1]||null)},"array"),S.isNode(i)?(e=0,2===(t=i.nodeName.toLowerCase()).length&&"h"===t[0]&&(e=parseInt(i.getAttribute("aria-level"))||parseInt(t[1])||0),"heading"===i.getAttribute("role")?parseInt(i.getAttribute("aria-level"))||e||2:e):0},closest:function(e,t){for(this._4X&&(t=e,e=this._X),e=S.morph(e);S.isNode(e)&&(e=e.parentNode,S.isFn(t))&&(!S.isFn(t)||!0!==t(e)););return S._XR.call(this,e)},_getStyleObject:function(e){var t={};return document.defaultView&&document.defaultView.getComputedStyle?t=document.defaultView.getComputedStyle(e,""):e.currentStyle&&(t=e.currentStyle),t},css:function(e,t,n){this._4X&&(n=t,t=e,e=this._X),e=S.morph(e);var r=S._check(e);if(!r||!t)return this._4X?this:e;if(1===(r=S.isArray(r)?r:[r]).length&&S.isNode(r[0])&&S.isStr(t)&&!S.isStr(n)&&!S.isNum(n)&&!n)return S._getStyleObject(r[0])[t];for(var i=function(e){if(e)for(var t=["top","left","bottom","right","width","height"],n=0;n<t.length;n++)if(t[n].substr(t[n].length-e.length)===e)return!0;return!1},o=function(e,t,n){n=i(t)&&S.isNum(n)?n+"px":n;try{n||S.isNum(n)||!e.style.removeProperty?(t=S._camelize(t),e.style[t]=n):e.style.removeProperty(t)}catch(e){}},a=0;a<r.length;a++)if(S.isNode(r[a]))if(S.isStr(t))o(r[a],t,n);else if("object"==typeof t)for(var s in t){n=t[s];o(r[a],s,n)}return S._XR.call(this,e)},hasClass:function(t,e){this._4X&&(e=t,t=this._X);t=S.morph(t),t=S._check(t,!0);if(!(S.isNode(t)&&t.className&&e&&S.isStr(e)))return!1;var n=e.split(/\s+/),r=0,i=0;try{var o=t.classList;for(i=0;i<n.length;i++)o.contains(n[i])&&(r+=1)}catch(e){for(var a=t.className?t.className.split(/\s+/):[],i=0;i<n.length;i++)-1!==a.indexOf(n[i])&&(r+=1)}return r===n.length},addClass:function(e,t){this._4X&&(t=e,e=this._X),e=S.morph(e);var n=S._check(e);if(!n||!t||!S.isStr(t))return this._4X?this:e;S.isArray(n)||(n=[n]);for(var r=t.split(/\s+/),i=0;i<n.length;i++){var o=0;try{var a=n[i].classList;for(o=0;o<r.length;o++)a.add(r[o])}catch(e){if(S.isNode(n[i])&&!S.hasClass(n[i],t)){for(var s=n[i].className?n[i].className.split(/\s+/):[],o=0;o<r.length;o++)-1===s.indexOf(r[o])&&s.push(r[o]);n[i].className=s.join(" ")}}}return S._XR.call(this,e)},remClass:function(e,t){this._4X&&(t=e,e=this._X),e=S.morph(e);var n=S._check(e);if(!n||!t||!S.isStr(t))return this._4X?this:e;S.isArray(n)||(n=[n]);for(var r=t.split(/\s+/),i=0;i<n.length;i++){var o=0;try{var a=n[i].classList;for(o=0;o<r.length;o++)a.remove(r[o])}catch(e){if(S.isNode(n[i])&&S.hasClass(n[i],t)){for(var s=n[i].className?n[i].className.split(/\s+/):[],l=[],o=0;o<s.length;o++)-1===r.indexOf(s[o])&&l.push(s[o]);n[i].className=l.join(" ")}}}return S._XR.call(this,e)},toggleClass:function(e,t,n,r){this._4X&&(r=n,n=t,t=e,e=this._X),S.isFn(n)&&(r=n,n=null),e=S.morph(e);var i=S._check(e);if(!i||!t||!S.isStr(t))return this._4X?this:e;S.isArray(i)||(i=[i]);for(var o=0;o<i.length;o++){var a=i[o];S.isBool(n)||(n=!S.hasClass(a,t)),S[n?"addClass":"remClass"](a,t),S.isFn(r)&&r.apply(a,[n])}return S._XR.call(this,e)},setOffScreen:function(e){return this._4X&&(e=this._X),S.css(e,S.sraCSS),S._XR.call(this,e)},clearOffScreen:function(e){return this._4X&&(e=this._X),S.css(e,S.sraCSSClear),S._XR.call(this,e)},sraCSS:{position:"absolute",clip:"rect(1px 1px 1px 1px)",clip:"rect(1px, 1px, 1px, 1px)",clipPath:"inset(50%)",padding:0,border:0,height:"1px",width:"1px",overflow:"hidden",whiteSpace:"nowrap"},sraCSSClear:{position:"",clip:"auto",clipPath:"none",padding:"",height:"",width:"",overflow:"",whiteSpace:"normal"},_calcPosition:function(e,t,n){var r,i,o,a,t=(t=t||e.posAnchor)&&S.isStr(t)?S.query(t)[0]:t||e.triggerNode;t&&(n=n||e.autoPosition,r={},i=S.elementHeight(e.wrapper),o=S.elementWidth(e.wrapper),a=S.offset(t),"absolute"===S.css(e.wrapper,"position")&&"fixed"!==S.css(t,"position")&&(a=S.offset(t,!0)),1===n?(r.left=a.left,r.top=a.top-i):2===n?(r.left=a.right,r.top=a.top-i):3===n?(r.left=a.right,r.top=a.top):4===n?(r.left=a.right,r.top=a.bottom):5===n?(r.left=a.left,r.top=a.bottom):6===n?(r.left=a.left-o,r.top=a.bottom):7===n?(r.left=a.left-o,r.top=a.top):8===n?(r.left=a.left-o,r.top=a.top-i):9===n?(r.left=a.left,r.top=a.top):10===n?(r.left=a.right-o,r.top=a.top-i):11===n?(r.left=a.right-o,r.top=a.top):12===n&&(r.left=a.right-o,r.top=a.bottom),S.isNum(e.offsetTop)&&(e.offsetTop<0||0<e.offsetTop)&&(r.top+=e.offsetTop),S.isNum(e.offsetLeft)&&(e.offsetLeft<0||0<e.offsetLeft)&&(r.left+=e.offsetLeft),S.css(e.wrapper,r))},getWindow:function(e){return{width:(e=S.isNode(e,window)?e:window).document.documentElement.clientWidth||e.document.body.clientWidth,height:e.document.documentElement.clientHeight||e.document.body.clientHeight}},_getAbsolutePos:function(e){if(!e)return e;for(var t=0,n=0;t+=e.offsetLeft,n+=e.offsetTop,e=e.offsetParent;);return{left:t,top:n}},offset:function(e,t,n,r){var i,o;return this._4X&&(r=n,n=t,t=e,e=this._X),S.isNode(e,window)?(o={},i=S.css(e,"position"),t||"absolute"===i?o=S._getAbsolutePos(e):n||"relative"===i?(o.top=e.offsetTop,o.left=e.offsetLeft,o.height=S.elementHeight(e),o.width=S.elementWidth(e),o.right=o.left+o.width,o.bottom=o.top+o.height):o={top:(t=e.getBoundingClientRect()).top,left:t.left,right:t.right,bottom:t.bottom,height:t.height,width:t.width},r?{top:o.top,left:o.left}:o):e},_camelize:function(e){for(var t,n,r=(n=(e=S.isStr(e)?e:"").split("-"))[0],i=1;i<n.length;i++)t=n[i].charAt(0),r+=n[i].replace(t,t.toUpperCase());return r},_getComputedStyle:function(e,t,n){if(!e)return e;var r="undefined",i=document.defaultView;if(i&&i.getComputedStyle)e===document&&(e=document.body),(i=i.getComputedStyle(e,""))&&(r=i.getPropertyValue(t));else{if(!e.currentStyle)return null;r=e.currentStyle[S._camelize(t)]}return n?parseInt(r,10)||0:r},_num:function(){for(var e=0;e<arguments.length;e++)if(isNaN(arguments[e])||!S.isNum(arguments[e]))return!1;return!0},_def:function(){for(var e=0;e<arguments.length;e++)if(void 0===arguments[e])return!1;return!0},_str:function(){for(var e=0;e<arguments.length;e++)if(!S.isStr(arguments[e]))return!1;return!0},elementHeight:function(e,t){var n,r=0,i=0,o=0,a=0;if(!e)return 0;if(t=S._num(t)?t<0?0:Math.round(t):-1,(n=S._def(e.style))&&S._def(e.offsetHeight)&&S._str(e.style.height)){if(0<=t){if("CSS1Compat"===document.compatMode&&(null!==(r=S._getComputedStyle(e,"padding-top",1))?(i=S._getComputedStyle(e,"padding-bottom",1),o=S._getComputedStyle(e,"border-top-width",1),a=S._getComputedStyle(e,"border-bottom-width",1)):S._def(e.offsetHeight,e.style.height)&&(e.style.height=t+"px",r=e.offsetHeight-t)),t-=r+i+o+a,isNaN(t)||t<0)return;e.style.height=t+"px"}t=e.offsetHeight}else n&&S._def(e.style.pixelHeight)&&(0<=t&&(e.style.pixelHeight=t),t=e.style.pixelHeight);return t},elementWidth:function(e,t){var n,r=0,i=0,o=0,a=0;if(!e)return 0;if(t=S._num(t)?t<0?0:Math.round(t):-1,(n=S._def(e.style))&&S._def(e.offsetWidth)&&S._str(e.style.width)){if(0<=t){if("CSS1Compat"===document.compatMode&&(null!==(r=S._getComputedStyle(e,"padding-left",1))?(i=S._getComputedStyle(e,"padding-right",1),o=S._getComputedStyle(e,"border-left-width",1),a=S._getComputedStyle(e,"border-right-width",1)):S._def(e.offsetWidth,e.style.width)&&(e.style.width=t+"px",r=e.offsetWidth-t)),t-=r+i+o+a,isNaN(t)||t<0)return;e.style.width=t+"px"}t=e.offsetWidth}else n&&S._def(e.style.pixelWidth)&&(0<=t&&(e.style.pixelWidth=t),t=e.style.pixelWidth);return t},_top:function(e,t){var n=S._def(e.style);return n&&S._str(e.style.top)?S._num(t)?e.style.top=t+"px":(t=parseInt(e.style.top,10),isNaN(t)&&(t=S._getComputedStyle(e,"top",1)),isNaN(t)&&(t=0)):n&&S._def(e.style.pixelTop)&&(S._num(t)?e.style.pixelTop=t:t=e.style.pixelTop),t},_left:function(e,t){var n=S._def(e.style);return n&&S._str(e.style.left)?S._num(t)?e.style.left=t+"px":(t=parseInt(e.style.left,10),isNaN(t)&&(t=S._getComputedStyle(e,"left",1)),isNaN(t)&&(t=0)):n&&S._def(e.style.pixelLeft)&&(S._num(t)?e.style.pixelLeft=t:t=e.style.pixelLeft),t},isPointerWithin:function(e){return!!(S.isNode(e)&&S.event.pointer&&S.isNode(S.event.pointer.target))&&S.isWithin(S.event.pointer.target,e)},owns:function(n,e){this._4X&&(e=n,n=this._X);var r=[],n=S.morph(n);return S.isNode(n)&&(S.query(e,function(e,t){S.isNode(t)&&r.push(t)}),r=r.reverse(),S.loop(r,function(e,t){t.id||(t.id=S.genId());t=t.id;-1===["input","img","progress","iframe","hr"].indexOf(n.nodeName.toLowerCase())&&S.addIdRef(n,"aria-owns",t)},"array")),S._XR.call(this,n)},controls:function(r,e,i){return this._4X&&(e=r,r=this._X),i=i||"aria-controls",S.query(e,function(e,t){var n;S.isNode(t)&&(t.id||(t.id=S.genId()),n=t.id,S.query(r,function(e,t){S.addIdRef(t,i,n)}))}),S._XR.call(this,r)},labelledBy:function(e,t){return this._4X&&(t=e,e=this._X),e=S.controls(e,t,"aria-labelledby"),S._XR.call(this,e)},describedBy:function(e,t){return this._4X&&(t=e,e=this._X),e=S.controls(e,t,"aria-describedby"),S._XR.call(this,e)},flowsTo:function(e,t){return this._4X&&(t=e,e=this._X),e=S.controls(e,t,["aria-controls","aria-flowto"]),S._XR.call(this,e)},addIdRef:function(e,t,n){this._4X&&(n=t,t=e,e=this._X),e=S.morph(e);var r=S._check(e),a=(n||"").split(/\s+/);return S.loop(r,function(e,o){S.loop(t,function(e,t){for(var n=(S.getAttr(o,t)||"").split(/\s+/),r=0;r<a.length;r++){var i=a[r];-1===n.indexOf(i)&&n.push(i)}S.setAttr(o,t,n.join(" "))},"array")},"array"),S._XR.call(this,e)},remIdRef:function(e,t,n){this._4X&&(n=t,t=e,e=this._X),e=S.morph(e);var r=S._check(e),s=(n||"").split(/\s+/);return S.loop(r,function(e,a){S.loop(t,function(e,t){for(var n=[],r=(S.getAttr(a,t)||"").split(/\s+/),i=0;i<r.length;i++){var o=r[i];-1===s.indexOf(o)&&n.push(o)}S.setAttr(a,t,n.join(" "))},"array")},"array"),S._XR.call(this,e)},genId:function(e){this._4X&&(e=this._X);var t="DC4X"+((new Date).getTime()+n++);return e&&S.isStr(e)&&(e=S.morph(e),e=S._check(e,!0)),S.isNode(e)?(e.id=t,S._XR.call(this,e)):t},announce:function(e,t,n){return this._4X&&(n=t,t=e,e=this._X),e&&a(e,t,n),S._XR.call(this,e)},alert:function(e,t){return this._4X&&(t=e,e=this._X),e&&a(e,t,!0),S._XR.call(this,e)},isOutOfView:function(e){var e=e.getBoundingClientRect(),t={bounding:e};return t.top=e.top<0,t.left=e.left<0,t.bottom=e.bottom>(window.innerHeight||document.documentElement.clientHeight),t.right=e.right>(window.innerWidth||document.documentElement.clientWidth),t.any=t.top||t.left||t.bottom||t.right,t.all=t.top&&t.left&&t.bottom&&t.right,t},getOrientation:function(n){this._4X&&(n=this._X),S.isArray(n)||(n=S.morph(n),n=S._check(n));var r,i,o,a,e,t,s,l,c={};return n&&S.isArray(n)&&!(n.length<2)&&S.isNode(n[0])&&(r=[],i=[],S.loop(n,function(e,t){t=S.offset(t);0===e?o=t:e===n.length-1&&(a=t),r.push(t.top),i.push(t.left)},"array"),l=function(e,t){return Math.min(e,t)},e=r.reduce(s=function(e,t){return Math.max(e,t)}),t=r.reduce(l),s=i.reduce(s),l=i.reduce(l),c.orientation=e-t<s-l?"horizontal":"vertical",c.lineWrap="horizontal"===c.orientation&&.8*(a.bottom-o.top)>o.height),c},focus:function(e,t){return this._4X&&(t=e,e=this._X),e=S.morph(e),S.isNode(e)?(S._setFocus(e),S.isFn(t)&&t.call(e,e),S._XR.call(this,e)):this._4X?this:e},isFocusWithin:function(e){return this._4X&&(e=this._X),!(!S.isNode(e,null,document)||!e.querySelectorAll)&&0<e.querySelectorAll("*:focus").length},isHidden:function(e){return this._4X&&(e=this._X),!S.isNode(e)||e.offsetHeight+e.offsetWidth<1||"hidden"===S.css(e,"visibility")},isWithin:function(e,t){this._4X&&(t=e,e=this._X);for(var n=e,r=S.isNode(t,null,null,11)?t:document.body;S.isNode(n,null,null,11,3);){if(n===r)return!0;n=n.parentNode}return!1},hide:function(e){return this._4X&&(e=this._X),e=S.morph(e),S.isNode(e)&&(e.hidden=!0),S._XR.call(this,e)},show:function(e){return this._4X&&(e=this._X),e=S.morph(e),S.isNode(e)&&(e.hidden=!1),S._XR.call(this,e)},hideBackground:function(e){var r=(e=this._4X?this._X:e)?S.morph(e):null;return S.isNode(r)?(r&&r.parentNode&&r.parentNode.nodeName&&"body"===r.parentNode.nodeName.toLowerCase()||document.body.appendChild(r),S.loop(document.body.children,function(e,t){var n;S.isNode(t)&&(t.inert=!(n=t===r),S.setAttr(t,"aria-hidden",n?"false":"true"),n)&&S.remAttr(t,"aria-hidden")},"array")):S.showBackground(),S._XR.call(this,r)},showBackground:function(e){e=(e=this._4X?this._X:e)?S.morph(e):null;return S.isNode(e)?S.hideBackground(e):S.loop(document.body.children,function(e,t){S.isNode(t)&&(t.inert=!1,S.remAttr(t,"aria-hidden"))},"array"),S._XR.call(this,e)},svgFix:function(e){return this._4X&&(e=this._X),e=S.morph(e),S.isNode(e,null,document,11)&&S.isIE()&&S.query("svg",e,function(e,t){S.setAttr(t,"focusable","false")}),S._XR.call(this,e)},setKBA11Y:function(e,t,r,i,o){this._4X&&(o=i,i=r,r=t,t=e,e=this._X),S.isFn(t)&&(o=t,t=null),S.isFn(r)&&(o=r,r=null),S.isFn(i)&&(o=i,i=null),S.isBool(t)&&(i=t,t=null),S.isBool(r)&&(i=r,r=null),t=t||"button";var n=S.query(e,function(e,n){return!(!S.isNode(n)||S.isNative(n)||(S.setAttr(n,{tabindex:0,role:t}),r&&S.setAttr(n,"aria-label",r),S.isFn(o)&&S.on(n,"click.kba11y",o),S.on(n,{keydown:function(e){var t=S.keyEvent(e);13!==t&&(i||32!==t)||(S.trigger(n,"click"),e.preventDefault())}},".kba11y"),0))});return e=n.length?1===n.length?n[0]:n:null,S._XR.call(this,e)},setDisabled:function(e,i){this._4X&&(i=e,e=this._X);var t=e,o=!1;return!S.isDC(e)&&S.hasDC(e)&&(e=S.getDC(e)),S.isDC(e)&&(t=e.triggerNode||e.trigger,o=!0),S.query(t,function(e,t){var n=S.isNative(t),r=n&&"a"===t.nodeName.toLowerCase();n&&!r?t.disabled=!!i:(S.setAttr(t,"aria-disabled",i?"true":"false"),r&&(i?S.on(t,"click.disable",function(e){e.preventDefault()}):S.off(t,"click.disable"))),S.data(t,"disabled",!!i),o&&(t.disabled=!0)}),S._XR.call(this,e)},isDisabled:function(e){var t=e=this._4X?this._X:e;return!S.isDC(e)&&S.hasDC(e)&&(e=S.getDC(e)),S.isDC(e)&&(t=e.triggerNode||S.query(e.trigger)[0]),!!(S.isDC(e)&&e.disabled||S.data(t,"disabled")||S.isNode(t)&&"true"===S.getAttr(t,"aria-disabled"))},updateDisabled:function(e){var t=e=this._4X?this._X:e,t=(t=S.isDC(e)?e.siblings:t)||document.querySelectorAll('*[aria-disabled="true"]');return S.loop(t,function(e,t){var n=t;!S.isDC(t)&&S.hasDC(t)&&(t=S.getDC(t)),S.isDC(t)&&(n=t.triggerNode||t.trigger),S.query(n,function(e,t){!(S.isNative(t)&&t.disabled||"true"===S.getAttr(t,"aria-disabled"))||S.data(t,"disabled",!0)})},"array"),S._XR.call(this,e)},isFocusable:function(e,t){var n;return this._4X&&(t=e,e=this._X),!(!S.isNode(e)||S.isHidden(e)||!S.isWithin(e)||(n=parseInt(S.getAttr(e,"tabindex")),!(t&&S.isNum(n)||!t&&S.isNum(n)&&0<=n||S.isNative(e)&&!e.disabled)))},_setFocus:function(e){return S.isNode(e)&&(S.isFocusable(e)||S.setAttr(e,"tabindex",-1),e.focus()),e},_GenDC:function(e,t,n){function r(e){var t,n=0,r=null;if((e=l[C.indexVal]).top.widgetType&&S._widgetTypes.length)for(n=0;n<S._widgetTypes.length;n++)(r=S.reg.get(S._widgetTypes[n]))&&r.top.autoCloseWidget&&r.top.loaded&&r.top.widgetType!==e.top.widgetType&&r.top.bypass();if(e.top.autoCloseSameWidget&&S._regWidgets.has(e.top.widgetType))for(t=S._regWidgets.get(e.top.widgetType),n=0;n<t.length;n++)(r=S.reg.get(t[n])).top.currentWT=r.top===e.top,r&&r.top.loaded&&!r.top.currentWT&&r.top.bypass(),r&&r.top.isAnimating&&r.top.loading&&!r.top.currentWT&&window.Velocity&&(window.Velocity.animate(r.top.wrapper,"finish"),r.top.css(r.top.style))}function i(e){var n=l[e.indexVal];if(n.cancel)n.cancel=n.loading=!1;else if(n.loading=!0,n.mode&&n.toggleHide&&(n.toggleHide=!1),n.toggleHide)n.isLoading?n.fn.afterLoaded=d:d(n);else switch(n.mode){case 1:n.content=S.toNode(),n.isLoading=!0,S.load(n.fetch.url,n.content,n.fetch.data,function(e,t){n.isLoading=!1,n.preloadImages&&S.preload(e),S.getModule(n,"afterFetch",e),n.fetch.success(e,t,n),d(n)},function(e,t){n.isLoading=!1,n.fetch.error(e,t,n),S.parseDebug(e)});break;case 2:n.content=S.toNode(),n.isLoading=!0,S.Get({url:n.fetch.url,data:n.fetch.data,success:function(e,t){n.isLoading=!0,n.preloadImages&&S.preload(e),S.getModule(n,"afterFetch",e),n.fetch.success(e,t,n),d(n)},error:function(e,t){n.isLoading=!1,n.fetch.error(e,t,n)}});break;default:n.isLoading?n.fn.afterLoaded=d:d(n)}return n}function o(e){var t=l[e.indexVal];!t.loaded||t.lock||t.closing||(t.closing=!0,t.cancel=!1,S.getModule(t,"beforeRemove",t.container),S._parseDCScripts(t,"BeforeRemove",function(){if(!t.loaded||t.lock||t.cancel)return t.closing=t.cancel=!1,t;t.loaded=!1;function e(){S.isAnimating=t.isAnimating=!1,t.storeData||S._cleanAll(t.container,!0),t.fn.style&&S.remove(t.fn.style),t.fn.closeLink&&S.remove(t.fn.closeLink),t.toggleHide?(t.content=t.container,t.content.hidden=!0,t.wrapper=t.container=null):(t.contentOnly?(t.container.parentNode&&(t.content=t.container.parentNode.removeChild(t.container)),t.wrapper=t.container=null):t.content=S.extractNodes(t.container),S.isNode(t.wrapper)&&S.empty(t.wrapper,!0)),t.isRendered=!1,t.loaded=!1,t.toggleClassName&&S.toggleClass(t.triggerNode,t.toggleClassName,!1),t.closing=!1,S.getModule(t,"afterRemove",t.container),S._parseDCScripts(t,"AfterRemove",function(){t.fn.bypass||(t.returnFocus&&t.triggerNode&&!t.rerouteFocus?S.focus(t.triggerNode):t.rerouteFocus&&(S.focus(t.rerouteFocus),t.rerouteFocus=null)),S.isFn(t.fn.removeCallback)&&(t.fn.removeCallback.call(t,t),t.fn.removeCallback=null)})}t.animate&&S.isFn(t.animate.onRemove)?(S.isAnimating=t.isAnimating=!0,t.animate.onRemove.call(t.wrapper,t,t.wrapper,e)):e()}))}function a(e){var n;return(e=l[e.indexVal]).trigger&&e.on&&(n=[],S.isPlainObject(e.on)?S.loop(e.on,function(e,t){n.push(e)},"object"):S.isStr(e.on)&&(n=e.on.split(/\s+/)),S.query(e.trigger,function(e,t){S.off(t,n)})),e}function s(n){(n=l[C.indexVal]).fn.internalEventsId=S.getIdFor(n.id)||S.setIdFor(n.id),n.trigger&&S.query(n.trigger,function(e,t){n.toggleHide&&S.off(t,"."+n.fn.internalEventsId),n.triggerNode||(n.triggerNode=t),S.isMap(S.data(t,"DC-ON"))||S.data(t,"DC-ON",new Map),S.data(t,"DC-ON").set(n.id,n),S.data(t,"DC",n),n.on&&(S.isStr(n.on)?S.on(t,n.on,function(e){c(n),e.preventDefault()},n.id,"."+n.fn.internalEventsId):S.isPlainObject(n.on)&&S.on(t,n.on,n.id,"."+n.fn.internalEventsId)),n.escToClose&&S.on(t,"keydown",function(e){27===S.keyEvent(e)&&(n.remove(),e.stopPropagation())},"."+n.fn.internalEventsId)})}var l=[],c=function(e){var t=l[e.indexVal],e=t.isDisabled();return(e||t.loading||t.loaded||t.allowRerender||t.lock||t.closing)&&(t.loaded&&t.isToggle?o(t):t.loaded&&t.allowRerender&&t.bypass(function(){c(t)}),!t.allowRerender||e||t.loading||t.loaded||t.lock||t.closing)||(r(),t.cancel=!1,t.fn.baseId=S.genId(),t.wrapperId=t.fn.baseId+"ON",t.containerId=t.fn.baseId+"IN",S.getModule(t,"beforeRender",t.container),S._parseDCScripts(t,"BeforeRender",i)),t},d=function(e){var n=l[e.indexVal];return n.cancel?n.cancel=n.loading=!1:(n.toggleHide?n.contentOnly=!0:(n.importCSS&&(n.fn.style=S.toNode(),S.import(n.importCSS,{},n.fn.style)),n.exposeBounds&&(n.contentOnly=!1)),n.contentOnly?(n.content=S.morph(n.content),n.toggleHide||(n.content=S._check(n.content,!0)),n.wrapper=n.container=n.content,n.content.id||(n.content.id=n.fn.baseId),n.wrapperId=n.containerId=n.content.id,!n.toggleHide&&n.content.hidden&&(n.content.hidden=!1)):(n.wrapper=S.create("div",{id:n.wrapperId}),n.container=S.create("div",{id:n.containerId}),n.wrapper.appendChild(n.container),S.isStr(n.content)&&S.isMarkup(n.content)?S.insertMarkup(n.content,n.container):S.insert(n.content,n.container,null,!0),(e=S.firstChild(n.container))&&e.hidden&&(e.hidden=!1)),n.toggleHide||((e=n.container.querySelectorAll("script")).length&&S.loop(e,function(e,t){t.src?(S.isArray(n.jsAfter)||(n.jsAfter=[]),n.jsAfter.push(t.src)):(S.isArray(n.embeddedJS)||(n.embeddedJS=[]),n.embeddedJS.push(new Function("window,document,$A,DC,dc",t.innerHTML))),t.parentNode.removeChild(t)},"array"),n.fn.style&&S.prepend(n.fn.style,n.wrapper),n.className&&n.addClass(n.className),n.displayInline&&S.css([n.wrapper,n.container],"display","inline")),n.style&&n.css(n.style),n.exposeBounds&&n.setAttr("role","region"),S.module[n.widgetType]&&S.isFn(S.module[n.widgetType].role)&&n.setAttr(S.module[n.widgetType].role.call(n,n)),S.module[n.widgetType]&&S.isFn(S.module[n.widgetType].innerRole)&&S.setAttr(n.container,S.module[n.widgetType].innerRole.call(n,n)),n.ariaLabelledby&&n.triggerNode?(n.triggerNode.id||(n.triggerNode.id=S.genId()),S.addIdRef(n.wrapper,"aria-labelledby",n.triggerNode.id)):n.role&&n.setAttr("aria-label",n.role),n.ariaControls&&n.triggerNode&&S.setAttr(n.triggerNode,"aria-controls",n.wrapperId),S.getModule(n,"duringRender",n.container),S._parseDCScripts(n,"DuringRender",u)),n},u=function(e){var r=l[e.indexVal];if(r.cancel)r.cancel=r.loading=!1;else{for(var t=0;t<r.siblings.length;t++){var n=r.siblings[t];n.loaded&&!n.allowMultiple&&n.bypass()}if(r.toggleHide)r.container.hidden=!1,r.storeData=!0;else if(!r.isRendered)if(r.root)if(S.isChain(r.root)&&(r.root=r.root.return()),r.before)S.isFn(r.before)?r.before.apply(r,[r.wrapper,r.root]):S.before(r.wrapper,r.root);else if(r.prepend)if(S.isFn(r.prepend))r.prepend.apply(r,[r.wrapper,r.root]);else try{S.prepend(r.wrapper,r.root)}catch(e){S.before(r.wrapper,r.root)}else if(r.append)if(S.isFn(r.append))r.append.apply(r,[r.wrapper,r.root]);else try{S.append(r.wrapper,r.root)}catch(e){S.after(r.wrapper,r.root)}else r.after?S.isFn(r.after)?r.after.apply(r,[r.wrapper,r.root]):S.after(r.wrapper,r.root):S.insert(r.wrapper,r.root,null,!0);else r.targetNode?S._insertAfter(r.wrapper,r.targetNode):r.triggerNode&&S._insertAfter(r.wrapper,r.triggerNode);r.fn.wasRendered=r.isRendered,r.isRendered=!0,r.storeData||(r.contentOnly?r.content=r.container.cloneNode(!0):r.content=S.cloneNodes(r.container));e=function(){S.isAnimating=r.isAnimating=!1,r.isFocusable&&r.setAttr({tabindex:"0","aria-describedby":r.containerId}),0<r.autoPosition&&!r.root&&!r.autoFix&&S._calcPosition(r),r.autoFix&&(h(r),f(r)),r.exposeHiddenClose&&(r.closeId=r.fn.baseId+"CL",r.fn.closeLink=S.create("a",{id:r.closeId,href:"#close"},S.sraCSS,r.closeClassName),r.fn.closeLink.innerHTML=r.hiddenCloseName,S.append(r.fn.closeLink,r.wrapper),S.on(r.fn.closeLink,{click:function(e){r.remove(),e.preventDefault()}}),r.displayHiddenClose?S.on(r.fn.closeLink,{focus:function(e){(!S.isFn(r.tabOut)||!r.tabOut(e,r))&&S.clearOffScreen(this)},blur:function(e){S.setOffScreen(this)}}):S.setAttr(r.fn.closeLink,"tabindex","-1")),S.query("."+r.closeClassName,r.container,function(e,t){r.toggleHide&&S.off(t,"click.closeDC"),S.on(t,"click.closeDC",function(e){r.remove(),e.preventDefault()})}),S.data(r.wrapper,"DC-O",r),r.escToClose&&(r.toggleHide&&S.off(r.wrapper,"keydown.esctoclose"),S.on(r.wrapper,"keydown.esctoclose",function(e){27===S.keyEvent(e)&&(r.remove(),e.stopPropagation())})),r.activeElements=S.getActive(r.container,!0),r.activeElements.length&&(r.first=r.activeElements[0],r.last=r.activeElements[r.activeElements.length-1],r.circularTabbing)&&S.setCircular(r.activeElements);var n={};S.data(r.id,"DC",r),S.loop(r.events,function(e,t){S.isFn(r[t])&&(n[t.toLowerCase().replace(/^on/,"")]=function(e){r[t].apply(r.wrapper,[e,r])})},"array"),r.toggleHide&&S.off(r.wrapper,".extradchandlers4x"),S.on(r.wrapper,n,r.id,".extradchandlers4x"),r.loading=!1,r.loaded=!0,r.abortLoad||r.autoCloseSameWidget&&S._regWidgets.has(r.widgetType)&&!r.currentWT?(r.abortLoad=!1,r.fn.timer&&clearTimeout(r.fn.timer),r.fn.timer=setTimeout(function(){r.remove()},1)):(r.toggleClassName&&S.toggleClass(r.triggerNode,r.toggleClassName,!0),S.isArray(r.embeddedJS)&&r.embeddedJS.length&&S.loop(r.embeddedJS,function(e,t){t.call(r.container,window,document,S,r,r)},"array"),S.getModule(r,"afterRender",r.container),S._parseDCScripts(r,"AfterRender",function(){r.scrollIntoView&&(S.isFn(r.scrollIntoView)?r.scrollIntoView.call(r.container,r,r.container):r.container.scrollIntoView({behavior:"smooth"})),(S.lastLoaded=r).forceFocus&&r.focus(r),S.isFn(r.fn.renderCallback)&&(r.fn.renderCallback.call(r,r),r.fn.renderCallback=null),r.announce&&S.announce(r.container,r.noRepeat,r.isAlert),S.straylight&&S.straylight(r.container),S.isNum(r.delayTimeout)&&0<r.delayTimeout&&(r.fn.timer&&clearTimeout(r.fn.timer),r.fn.timer=setTimeout(function(){r.timeout(r)},r.delayTimeout))}))};!r.fn.wasRendered&&r.animate&&S.isFn(r.animate.onRender)?(S.isAnimating=r.isAnimating=!0,r.animate.onRender.call(r.wrapper,r,r.wrapper,e)):e()}return r},f=function(e){var t=l[e.indexVal];if(t.loading||t.loaded){var n={position:"fixed",right:"",bottom:"",top:"",left:""};switch(t.autoFix){case 1:n.top=0,n.left="40%";break;case 2:n.top=0,n.right=0;break;case 3:n.top="40%",n.right=0;break;case 4:n.bottom=0,n.right=0;break;case 5:n.bottom=0,n.left="40%";break;case 6:n.bottom=0,n.left=0;break;case 7:n.top="40%",n.left=0;break;case 8:n.top=0,n.left=0;break;case 9:n.top="40%",n.left="40%";break;default:n=t.style}S.css(t.wrapper,n)}return t},h=function(e){var t=l[e.indexVal];if(t.loading||t.loaded){var e=S.getWindow(),n=e.width,e=e.height,r=S.elementWidth(t.wrapper),i=S.elementHeight(t.wrapper),o=50,a=(r<n&&(o=parseInt(r/n*100/2,10)),50);switch(i<e&&(a=parseInt(i/e*100/2,10)),t.autoFix){case 1:case 5:S.css(t.wrapper,"left",50-o+"%");break;case 3:case 7:S.css(t.wrapper,"top",50-a+"%");break;case 9:S.css(t.wrapper,{left:50-o+"%",top:50-a+"%"})}(t.offsetTop<0||0<t.offsetTop||t.offsetLeft<0||0<t.offsetLeft)&&((r=S.offset(t.wrapper)).top+=t.offsetTop,r.left+=t.offsetLeft,S.css(t.wrapper,r))}return t},p=[],g=["jsOnceBeforeRender","onceBeforeRender","jsBeforeRender","beforeRender","jsOnceDuringRender","onceDuringRender","jsDuringRender","duringRender","jsOnceAfterRender","onceAfterRender","jsAfterRender","afterRender","jsOnceBeforeRemove","onceBeforeRemove","jsBeforeRemove","beforeRemove","jsOnceAfterRemove","onceAfterRemove","jsAfterRemove","afterRemove"],m=0,y=0,_={fn:{isDCI:!0},props:{},setOffScreen:function(){return S.setOffScreen(this.wrapper),this},clearOffScreen:function(){return S.clearOffScreen(this.wrapper),this},hasDC:function(){return!0},getDC:function(){return this},offset:function(e,t,n){return S.offset(this.wrapper,e,t,n)},setTrigger:function(e){var t;return(e=e||this).trigger&&e.on?(t=l[(t=e).indexVal],a(t),s(t),t):e},unsetTrigger:function(e){return(e=e||this).trigger&&e.on?a(e):e},hiddenCloseName:"Close",displayHiddenClose:!0,query:function(e,t,n){return n=t,t=this.container,S.query(e,t,n)},contentOnly:!0,allowCascade:!0,destroy:function(e){var t=this;return setTimeout(function(){S.destroy(t,e)},1),!0},getAttr:function(e){return S.getAttr(this.wrapper,e)},hasAttr:function(e){return S.hasAttr(this.wrapper,e)},remAttr:function(e){return S.remAttr(this.wrapper,e),this},setAttr:function(e,t){return S.setAttr(this.wrapper,e,t),this},toggleAttr:function(e,t){return S.toggleAttr(this.wrapper,e,t),this},hasClass:function(e){return S.hasClass(this.wrapper,e)},addClass:function(e){return S.addClass(this.wrapper,e),this},nearestHL:function(e){return S.nearestHL(this.wrapper,e)},remClass:function(e){return S.remClass(this.wrapper,e),this},toggleClass:function(e,t,n){return S.toggleClass(this.wrapper,e,t,n),this},activeElements:[],forceFocusWithin:!0,focus:function(e){return(e=e||this).loaded&&S.focus(e.forceFocusWithin&&e.activeElements.length&&S.isNode(e.first)?e.first:e.container),e},speak:function(e){return S.announce(this.container,e),this},alert:function(e){return S.alert(this.container,e),this},load:function(e,t,n){var r=this;return S.isFn(t)&&(n=t,t=null),r.isLoading=!0,S.load(e,r.container,t,function(e){r.isLoading=!1,S.isFn(n)&&n.call(this,e)},function(e){r.isLoading=!1,S.parseDebug(e)}),r},fetch:{url:"",data:{returnType:"html"},success:function(e,t,n){return n.content=e,n},error:function(e,t,n){return n.error=e,n}},isFocusWithin:function(e){e=e||this;return S.isFocusWithin(e.container)},setProps:function(e){return S.extend(!0,this.props,e||{}),this.props.DC=this},getText:function(){return S.getText(this.container)},insert:function(e){var t=this;return t.loaded&&S.isNode(t.container)?(S.insert(e,t.container),S.isNum(t.delayTimeout)&&0<t.delayTimeout&&(t.fn.timer&&clearTimeout(t.fn.timer),t.fn.timer=setTimeout(function(){t.timeout(t)},t.delayTimeout))):(t.content=e,t.mode=0,c(t)),t},prependWithin:function(e){return S.prepend(e,this.container),this},appendWithin:function(e){return S.append(e,this.container),this},renderWithin:function(e,t){var n=this;return n.before=n.prepend=n.append=n.after=!1,S.extend(n,{root:e},t||{}),n.bypass(function(){c(n)})},insertBefore:function(e,t){var n=this;return n.before=n.prepend=n.append=n.after=!1,S.extend(n,{root:e,before:!0},t||{}),n.bypass(function(){c(n)})},prependTo:function(e,t){var n=this;return n.before=n.prepend=n.append=n.after=!1,S.extend(n,{root:e,prepend:!0},t||{}),n.bypass(function(){c(n)})},appendTo:function(e,t){var n=this;return n.before=n.prepend=n.append=n.after=!1,S.extend(n,{root:e,append:!0},t||{}),n.bypass(function(){c(n)})},insertAfter:function(e,t){var n=this;return n.before=n.prepend=n.append=n.after=!1,S.extend(n,{root:e,after:!0},t||{}),n.bypass(function(){c(n)})},bypass:function(e){var t=this;return t.loaded?(t.fn.removeCallback=function(){t.fn.bypass=!1,S.isFn(e)&&e.call(t,t)},t.fn.bypass=!0,o(t)):S.isFn(e)&&e.call(t,t),t},setDisabled:function(e){return S.setDisabled(this,e),this},isDisabled:function(e){e=e||this;return S.isDisabled(e)},updateDisabled:function(e){e=e||this;return S.updateDisabled(e),e},render:function(e){var t,n=this;return n.isDisabled()||(t=function(){n.loaded?S.isFn(e)&&e.call(n,n):(n.fn.renderCallback=e,c(n))},S.isNum(n.delay)&&0<n.delay?(n.fn.Delay&&clearTimeout(n.fn.Delay),n.fn.Delay=setTimeout(function(){t()},n.delay)):t()),n},rerender:function(e){var t=this,n=t.allowRerender;return t.allowRerender=!0,t.remove(function(){t.render(e)}),t.allowRerender=n,t},remove:function(e){var t=this;return t.isDisabled()||(t.loaded?(t.fn.removeCallback=e,o(t)):S.isFn(e)&&e.call(t,t)),t},toggle:function(e){return this.loaded?this.remove(e):this.render(e),this},events:["click","dblClick","touchStart","touchEnd","touchMove","mouseOver","mouseOut","mouseDown","mouseUp","mouseMove","mouseEnter","mouseLeave","keyDown","keyPress","keyUp","error","focus","focusIn","focusOut","blur","change","resize","scroll","contextmenu","mouseWL","mousemultiWL","DOMMouseScroll","selectstart","selectend","orientationchange","reset","select","submit","load","unload","beforeunload","move","DOMContentLoaded","abort","onRemove"],timeout:function(e){return e.remove(),e},closeClassName:"CloseDC",style:{},css:function(e,t,n){var r=this;return S.isBool(t)&&(n=t,t=null),!S.isStr(e)||S.isStr(t)||S.isNum(t)?(e&&S.isStr(e)&&n?r.style[e]=t:e&&"object"==typeof e&&n&&S.extend(r.style,e),S.css(r.wrapper,e,t),r):S.css(r.wrapper,e)},map:function(e,t){function n(e,t){for(var n=0;n<t.length;n++)if(t[n].id===e.id)return 1}var i=this;if(S.isDC((e=e||{}).parent)&&(i.parent=e.parent),S.isArray(e.children)){t||(i.children=[]);for(var r=0;r<e.children.length;r++)S.isDC(e.children[r])&&(e.children[r].parent=i,n(e.children[r],i.children)||i.children.push(e.children[r]))}if(S.isArray(e.siblings)){t||(i.siblings=[i]);for(r=0;r<e.siblings.length;r++)!S.isDC(e.siblings[r])||n(e.siblings[r],i.siblings)||i.siblings.push(e.siblings[r])}for(var o=(i.top=i).parent;S.isDC(o)&&(!i.widgetType||i.widgetType===o.widgetType);)o=(i.top=o).parent;i.parent&&!t&&(i.parent.children=[]);for(var a=0;a<i.siblings.length;a++){var s=i.siblings[a];S.isDC(s)&&(s.parent=i.parent,s.siblings=i.siblings,i.parent)&&!n(s,i.parent.children)&&i.parent.children.push(s)}var l=function(e){for(var t=0;t<e.length;t++){if(S.isDC(e[t])&&e[t].children.length)for(var n=0;n<e[t].children.length;n++){var r=e[t].children[n];S.isDC(r)&&l(r.siblings)}S.isDC(e[t])&&(e[t].top=i.top)}};return l(i.siblings),i},children:[],siblings:[],setPosition:function(e,t,n){var r=this;return S.isNum(e)&&(n=t,t=e,e=null),n&&(r.posAnchor=e||r.posAnchor,r.autoPosition=t||r.autoPosition),S._calcPosition(r,e,t),r},setFix:function(e,t){var n=this;return t&&(n.autoFix=e||n.autoFix),f(n),0<e&&h(n),n}};for(S.extend(_,{text:_.getText,getAttribute:_.getAttr,hasAttribute:_.hasAttr,removeAttribute:_.remAttr,setAttribute:_.setAttr,toggleAttribute:_.toggleAttr,removeClass:_.remClass,nearestHeadingLevel:_.nearestHL}),t=t||{},m=0;m<e.length;m++){var b=e[m],v={},w={};if(S.isBool(b.allowCascade)||(S.isBool(t.allowCascade)?b.allowCascade=t.allowCascade:S.isBool(S.fn.globalDC.allowCascade)?b.allowCascade=S.fn.globalDC.allowCascade:b.allowCascade=_.allowCascade),b.allowCascade)for(y=0;y<g.length;y++)v[g[y]]=S.fn.globalDC[g[y]],w[g[y]]=t[g[y]];_.indexVal=l.length,l[_.indexVal]=function(e){function t(){}t.prototype=e;e=new t;return e.props.DC=e.DC=e,S.lastCreated.push(e),e}(_);var C=l[_.indexVal];if(S.module[b.widgetType]&&S.isFn(S.module[b.widgetType].configure)&&S.extend(!0,C,S.module[b.widgetType].configure.call(C,C)||{}),S.extend(!0,C,S.fn.globalDC),S.extend(!0,C,t),S.extend(!0,C,b),C.allowCascade){for(y=0;y<g.length;y++)S.fn.globalDC[g[y]]=v[g[y]];C.fn.proto=w}S.query(C.trigger,function(e,t){S.isMap(S.data(t,"DC-ON"))&&S.data(t,"DC-ON").has(C.id)&&S.data(t,"DC-ON").get(C.id).unsetTrigger()});b=b=void 0;if(b=l[C.indexVal],S.reg.set(b.id,b),b.widgetType&&b.autoCloseWidget&&S._widgetTypes.push(b.id),b.widgetType&&b.autoCloseSameWidget&&(S._regWidgets.has(b.widgetType)||S._regWidgets.set(b.widgetType,[]),S._regWidgets.get(b.widgetType).push(b.id)),S.isDC(C)){if(s(C),C.autoRender&&p.push(C),S.isDC(n)){for(var N=-1,X=n,A=C,T=0;T<X.children.length;T++)A.id===X.children[T].id&&(N=T);0<=N?X.children.slice(N,1,A):X.children.push(A),A.parent=X;for(var D=A;D.parent;)D=D.parent;A.top=D}else C.top=C;C.onCreate&&S.isFn(C.onCreate)&&C.onCreate.apply(C,[C]),S.updateDisabled(C),C.trackPage&&S.getHash()===C.id&&p.push(C)}}for(m=0;m<l.length;m++)l[m].siblings=l;if(p.length)for(y=0;y<p.length;y++)c(p[y]);return l}}),S.extend({isFunction:S.isFn,isString:S.isStr,isNumber:S.isNum,isBoolean:S.isBool,getElement:S.get,createElement:S.create,getAttribute:S.getAttr,hasAttribute:S.hasAttr,removeAttribute:S.remAttr,setAttribute:S.setAttr,toggleAttribute:S.toggleAttr,previousSibling:S.prevSibling,previous:S.prevSibling,next:S.nextSibling,first:S.firstChild,last:S.lastChild,parent:S.closest,removeClass:S.remClass,height:S.elementHeight,width:S.elementWidth,top:S._top,left:S._left,addIdReference:S.addIdRef,removeIdReference:S.remIdRef,preloadImages:S.preload,setCircularTabbing:S.setCircular,isNativeActiveElement:S.isNative,getActiveElements:S.getActive,nearestHeadingLevel:S.nearestHL,setKeyboardA11Y:S.setKBA11Y,generateId:S.genId,toTextNode:S.toText,text:S.getText}),s={alertMsgs:[],clear:function(){this.alertTO&&clearTimeout(this.alertTO),this.alertMsgs=[]},baseDelay:500,charMultiplier:1,lastMsg:"",iterate:function(e,t){var n=0;return e.replace(t,function(){n++}),n},loaded:!(a=function(e,t,n,r){var i,o=e;return arguments.length&&!S.isBool(o)||(r=n,n=t,t=o,o=e=this),S.isNum(o)?o=o.toString():o&&o.nodeType&&(o=S.getText(o)),o&&S.isStr(o)&&(i=function(){var e;s.loaded&&(s.liveRendered||n||!s.placeHolder||(s.liveRendered=!0,document.body.appendChild(s.placeHolder)),!s.alertRendered)&&n&&s.placeHolder2&&(s.alertRendered=!0,document.body.appendChild(s.placeHolder2)),r||-1!==S.inArray(o,s.alertMsgs)||s.alertMsgs.push(o),1!==s.alertMsgs.length&&!r||(e=s.baseDelay+s.iterate(s.alertMsgs[0],/\s|,|\.|:|;|!|\(|\)|\/|\?|@|#|\$|%|\^|&|\*|\\|-|_|\+|=/g)*s.charMultiplier,t&&s.lastMsg===s.alertMsgs[0]||(s.lastMsg=s.alertMsgs[0],S.insertMarkup(s.alertMsgs[0],n?s.placeHolder2:s.placeHolder)),s.alertTO=setTimeout(function(){S.insertMarkup("",s.placeHolder),S.insertMarkup("",s.placeHolder2),s.alertMsgs.shift(),1<=s.alertMsgs.length&&a(s.alertMsgs[0],t,n,!0)},e))},S.isDocLoaded?i():S.on("load",function(){i()})),e}),liveRendered:!1,alertRendered:!1},String.prototype.announce=function(e){return S.announce(this,e)},String.prototype.alert=function(e){return S.alert(this,e)},S.announce.clear=S.alert.clear=String.prototype.announce.clear=String.prototype.alert.clear=a.clear=s.clear,S.on(document,{touchstart:function(){S.isTouch||(S.isTouch=!0,S.event.fire(document,"touchchange"))},keyup:function(){S.isTouch&&(S.isTouch=!1,S.event.fire(document,"touchchange"))}}),S.on(window,{DOMContentLoaded:function(){S.isDOMContentLoaded=!0},load:function(){S.isDocLoaded=!0,s.placeHolder||(s.placeHolder=S.create("div",{"aria-live":"polite"},S.sraCSS),s.placeHolder2=S.create("div",{role:"alert"},S.sraCSS)),s.loaded=!0,S.on(document.body,"mouseover.MouseCoordTracker",function(e){S.event.pointer=e})}}),"Import4X"in window&&window.Import4X.length&&S.import(window.Import4X),t=(t=document.querySelectorAll("script[src]"))[t.length-1].src.replace(/\/|\\|<|>/g,"")||"",(t=(t=S.getHash(t))?t.split(","):[]).length&&S.import(t),window[window.Namespace4X||"$A"]=S}();
\ No newline at end of file
diff --git a/4X/Min/AccName.js b/4X/Min/AccName.js
index 04be1c31..bf3e7f6b 100644
--- a/4X/Min/AccName.js
+++ b/4X/Min/AccName.js
@@ -7,4 +7,4 @@ Author: Bryan Garaventa
 https://github.com/whatsock/w3c-alternative-text-computation
 Distributed under the terms of the Open Source Initiative OSI - MIT License
 */
-!function(){var r=window.AccNamePrototypeNameSpace||window,fe=(r&&"string"==typeof r&&r.length&&(window[r]={},r=window[r]),r.getAccNameVersion="2.60",r.getAccName=r.calcNames=function(e,t,W,r){var G=(r=r||{}).document||document,n={name:"",desc:"",error:""},p=!1,Q=!1;try{if(!e||1!==e.nodeType)return n;function U(e,t,r,n){for(e=e?e.firstChild:null;e;){var o=ee(e)||!1;if(1===e.nodeType&&(!t&&!r||o&&r&&-1!==r.indexOf(o)||!o&&t&&-1!==t.indexOf(e.nodeName.toLowerCase())))return e;if(!n&&1===e.nodeType&&(t||r))return null;e=e.nextSibling}return e}function z(e){var t=e.nodeName.toLowerCase();return!!e.getAttribute("tabindex")||!("a"!==t||!e.getAttribute("href"))||-1!==["button","input","select","textarea"].indexOf(t)&&"hidden"!==(e.getAttribute("type")||"").toLowerCase()}function F(e,t,r,n){for(;e&&e!==t;){if(!n&&1===e.nodeType&&ie(e,t))return!0;n=!1,e=e.parentNode}return!1}function o(e,t){if(-1!==(i=t).indexOf("attr("))for(var r=i.match(/attr\((.|\n|\r\n)*?\)/g),n=0;n<r.length;n++)var o=r[n].slice(5,-1),o=e.getAttribute(o)||"",i=i.replace(r[n],o);return i=i.replace(/url\((.*?)\)\s+\/|url\((.*?)\)/g,"").replace(/^\s+|\s+$/g,"").replace(/\"/g,"")}function m(e,t){var r,n=t||l(e);for(r in d)for(var o=d[r],i=0;i<o.length;i++)if(n[r]&&(0===o[i].indexOf("!")&&-1===[o[i].slice(1),"inherit","initial","unset"].indexOf(n[r])||0===n[r].indexOf(o[i])))return!0;return!t&&e.nodeName&&-1!==f.indexOf(e.nodeName.toLowerCase())&&!(n.display&&0===n.display.indexOf("inline")&&"br"!==e.nodeName.toLowerCase())}function J(e,t,r,n,o,i){var a,l="",d=!1;return r&&!i?l=t.getAttribute("aria-valuetext")||t.getAttribute("aria-valuenow")||"":n&&!i?l=s(t)||"":o&&!i&&(a=[],"grid"===e||"treegrid"===e?a=["gridcell","rowheader","columnheader"]:"listbox"===e?a=["option"]:"tablist"===e?a=["tab"]:"tree"===e&&(a=["treeitem"]),l=u(t,t.querySelectorAll('*[aria-selected="true"]'),!1,a),d=!0),!(l=fe(l))&&(r||n)&&t.value&&(l=t.value),l=d||l||!i?l:o?u(t,t.querySelectorAll("option[selected]"),!0):t.value}function K(e){return fe(e).length?" "+e+" ":" "}var X=e,i=fe(e.getAttribute("role")||""),Y={name:[],desc:[]},Z=[],_=function(I,P,R,E,B,H,$){($=$||{}).tag=$.tag||!1,$.role=$.role||!1,$.go=$.go||!1;function f(e,t,r){var n={name:"",title:""};if(e){var o,i,a,l,d,u=!(!e||1!==e.nodeType||!m(e)),s=e,c=t(e)||{};if(c.name&&c.name.length&&(n.name+=c.name),!c.skip&&(o=e,!(i=H.top)||!o||1!==i.nodeType||1!==o.nodeType||(a=ee(o),l=o.nodeName.toLowerCase(),(d=function(e,t){return a&&0<=t.roles.indexOf(a)||!a&&0<=t.tags.indexOf(l)})(0,x)?o!==i||o.id&&H[o.id]&&H[o.id].node?g(o,H.top)&&"select"!==o.nodeName.toLowerCase()||d(0,b):z(o):!d(0,h)&&(o!==X||d(0,b))||!(a||-1===["section"].indexOf(l)||o.getAttribute("aria-labelledby")||o.getAttribute("aria-label"))||$.go)))for($.go&&($.go=!1),e=e.firstChild;e;)n.name+=f(e,t,r).name,e=e.nextSibling;n.name+=c.owns||"",X===s&&r===s&&!fe(n.name)&&fe(c.title)?n.name=K(c.title):X===s&&r===s&&fe(c.title)&&(n.title=K(c.title)),X===s&&r===s&&fe(c.desc)&&(n.title=K(c.desc)),X===s&&r===s&&fe(c.placeholder)&&!fe(n.name)?(n.name=K(c.placeholder),p=!0):X===s&&r===s&&fe(c.placeholder)&&!fe(n.title)&&(n.title=K(c.placeholder)),(u||c.isWidget)&&(n.name=K(n.name))}return n}var e={name:"",title:""},M=!1,g=function(e,t){for(var r=[];e;){if((e=e.id&&H[e.id]&&H[e.id].node&&-1===r.indexOf(e)?(r.push(e),H[e.id].node):e.parentNode)&&e===t)return!0;if(!e||e===H.top||e===G.body)return!1}return!1},t={before:"",after:""},e=($.tag||$.role||-1!==Y[H.computingDesc?"desc":"name"].indexOf(I)||(t=ae(I,null),W&&(-1===t.before.indexOf(" [ARIA] ")&&-1===t.before.indexOf(" aria-")&&-1===t.before.indexOf(" accName: ")||(t.before=""),-1===t.after.indexOf(" [ARIA] ")&&-1===t.after.indexOf(" aria-")&&-1===t.after.indexOf(" accDescription: ")||(t.after=""))),f(I,function(e){var t=0,r=null,n=[],o=[],i={name:"",title:"",owns:"",skip:!1},a=!!(e&&1===e.nodeType&&E&&E.length&&-1!==E.indexOf(e)&&e===X&&e!==I),l=!1;if((!R&&e&&!ie(e,H.top)||B||a)&&!$.tag&&!$.role&&-1===Y[H.computingDesc?"desc":"name"].indexOf(e)){Y[H.computingDesc?"desc":"name"].push(e);var d="",u="",s={before:"",after:""},c=I===e?e:e.parentNode;if($.tag||$.role||-1!==Y[H.computingDesc?"desc":"name"].indexOf(c)||(Y[H.computingDesc?"desc":"name"].push(c),s=ae(c,I),W&&(-1===s.before.indexOf(" [ARIA] ")&&-1===s.before.indexOf(" aria-")&&-1===s.before.indexOf(" accName: ")||(s.before=""),-1===s.after.indexOf(" [ARIA] ")&&-1===s.after.indexOf(" aria-")&&-1===s.after.indexOf(" accDescription: ")||(s.after=""))),1===e.nodeType){var c=e.nodeName.toLowerCase(),f=ee(e),g=!$.tag&&!$.role&&e.getAttribute("aria-labelledby")||"",p=!$.tag&&!$.role&&e.getAttribute("aria-describedby")||"",m=!$.tag&&!$.role&&e.getAttribute("aria-description"),b=!$.tag&&!$.role&&e.getAttribute("aria-label")||"",h=!$.tag&&!$.role&&e.getAttribute("title")||"";if(e===X&&!f&&-1!==te.indexOf(c))return i;if(e===X&&(-1!==re.indexOf(f)||!f&&-1!==ne.indexOf(c)))return i;var x=-1!==le.indexOf(c),y=-1!==["input"].indexOf(c),v=-1!==de.indexOf(f),A=-1!==ue.indexOf(f),O=-1!==se.indexOf(f),w=v||A||O||"combobox"===f,N=(w||-1!==ce.indexOf(f))&&"link"!==f,C=(i.isWidget=x||N,!1),k=!1,S=e.getAttribute("aria-owns")||"",a=!($.tag||$.role||a||!(e!==I&&(x||w)||e.id&&H[e.id]&&H[e.id].target&&H[e.id].target===e));if(!P&&!$.tag&&!$.role&&g){for(n=g.split(/\s+/),o=[],t=0;t<n.length;t++)r=G.getElementById(n[t]),o.push(_(r,!0,R,[e],r===I,{ref:H,top:r}).name);d=fe(o.join(" ")),fe(d)&&(M=l=C=!0,i.skip=!0)}if(!P&&e===I&&!$.tag&&!$.role&&(p||m)){if(p){for(n=p.split(/\s+/),o=[],t=0;t<n.length;t++)r=G.getElementById(n[t]),o.push(_(r,!0,!1,[e],!1,{ref:H,top:r,computingDesc:!0}).name);D=fe(o.join(" "))}else D=fe(m);fe(D)&&(i.desc=D,k=!0)}$.tag||$.role||C||!fe(b)||a||fe(d=b)&&(l=C=!0,e===I)&&(M=R=!0);w=!$.tag&&!$.role&&!C&&"iframe"!==c&&f&&-1!==oe.indexOf(f)&&!z(e)&&!function(e){for(var t=["labelledby","label","describedby","busy","controls","current","details","disabled","dropeffect","errormessage","flowto","grabbed","haspopup","invalid","keyshortcuts","live","owns","roledescription"],r=0;r<t.length;r++){var n=fe(e.getAttribute("aria-"+t[r]));if(n)return true}return false}(e);if(!a){if(!$.tag&&!$.role&&!C&&e===I&&x){var L=G.querySelectorAll("label"),T="",V=function(e,t,r,n){n=!!n;while(e){e=e.parentNode;if(e&&(r&&ee(e)===r||t&&e.nodeName&&e.nodeName.toLowerCase()===t&&(!n||ee(e).length<1)))return e}return{}}(e,"label")||!1;for(t=0;t<L.length;t++)(L[t]!==V||"string"==typeof V.getAttribute("for"))&&L[t].getAttribute("for")!==e.id||F(L[t],G.body)||(T+=K(_(L[t],!0,R,[e],!1,{ref:H,top:L[t]}).name));fe(d=T)&&(C=!0)}var g=!$.tag&&!$.role&&y&&(e.getAttribute("type")||"").toLowerCase()||!1,p=!$.tag&&!$.role&&g&&fe(e.getAttribute("value"))||!1,D=w&&"img"===c?"":fe(e.alt||e.getAttribute("alt"));if($.tag||$.role||C||w||"img"!==f&&"img"!==c&&"image"!==g||!D&&!fe(h)||(d=fe(D)||fe(h),fe(d)&&(C=!0)),$.tag||$.role||C||w||"area"!==c||!D||(d=fe(D),fe(d)&&(C=!0)),"optgroup"===c&&($.tag||$.role||C||w||!e.getAttribute("label")||(d=fe(e.getAttribute("label")),fe(d)&&(C=!0)),i.skip=!0),!$.tag&&!$.role&&!C&&e===I&&g&&-1!==["button","submit","reset"].indexOf(g)){if(p)d=p;else switch(g){case"submit":d="submit";break;case"reset":d="reset";break;default:d=""}fe(d)&&(C=!0)}!$.tag&&!$.role&&C&&e===I&&g&&-1!==["button","submit","reset"].indexOf(g)&&p&&p!==d&&!i.desc&&(i.desc=p,k=!0),$.tag||$.role||C||e!==I||!g||"image"!==g||(d="Submit Query",Q=C=!0),!($.tag||$.role||C||e!==X||"group"!==f&&"radiogroup"!==f&&(f||"fieldset"!==c))&&((q=U(e,["legend"],["legend"])||!1)&&(d=fe(_(q,P,!1,[],!1,{ref:H,top:q}).name)),fe(d)&&(C=!0),R=!0),!($.tag||$.role||C||e!==X||"table"!==f&&(f||"table"!==c))&&((q=U(e,["caption"],["caption"])||!1)&&(d=fe(_(q,P,!1,[],!1,{ref:H,top:q}).name)),fe(d)&&(C=!0),R=!0),$.tag||$.role||"svg"!==c||(b=e.querySelector("title")||!1,y=e===X&&e.querySelector("desc")||!1,!C&&b&&(d=fe(_(b,!0,!1,[],!1,{ref:H,top:b}).name)),!k&&y&&(D=fe(_(y,!0,!1,[],!1,{ref:H,top:y}).name),fe(D))&&(i.desc=D),i.skip=!0)}$.tag||$.role||!a||E&&E.length&&-1!==E.indexOf(e)||(v?d=J(f,e,!0):A||"combobox"===f&&x?d=J(f,e,!1,!0):O?d=J(f,e,!1,!1,!0):!x||-1===["input","textarea"].indexOf(c)||N&&!A?!x||"select"!==c||N&&"combobox"!==f||(d=J(f,e,!1,!1,!0,!0)):d=J(f,e,!1,!1,!1,!0),d=fe(d)),$.tag||$.role||w||!fe(h)||d&&" "===m||(i.title=fe(h));var j,p=(p=x&&fe(e.getAttribute("type")||"").toLowerCase())||"text",g=!$.tag&&!$.role&&e===X&&e===I&&(A||x&&("textarea"===c||"input"===c&&-1!==["password","search","tel","text","url","email"].indexOf(p)))&&fe(e.getAttribute("placeholder")||e.getAttribute("aria-placeholder")),q=(g&&(i.placeholder=g),$.role&&$.role===f||!f&&$.tag&&$.tag===c);if(q&&(d=fe(_(e,P,!1,[],!1,{ref:H,top:e}).name),fe(d))&&(R=!0),!q&&S&&-1===["input","img","progress"].indexOf(c)){for(n=S.split(/\s+/),o=[],t=0;t<n.length;t++)(r=G.getElementById(n[t]))&&-1===Z.indexOf(n[t])&&(Z.push(n[t]),(j={ref:H,top:H.top})[n[t]]={refNode:I,node:e,target:r},F(r,G.body)||o.push(_(r,!0,R,[],!1,j).name));u=o.join("")}}else $.tag||$.role||3!==e.nodeType||(d=e.data);(d=l?d:s.before+d.replace(/\s+/g," ")+s.after).length&&!function(e,t,r,n){var o=[];while(e&&e!==t){if(e.id&&r&&r[e.id]&&r[e.id].node&&o.indexOf(e)===-1){o.push(e);e=r[e.id].node}else e=e.parentNode;if(e&&e.getAttribute)if(fe(e.getAttribute("aria-label"))||!n&&ie(e,t))return true}return false}(e,H.top,H)&&(i.name=d),i.owns=u}return i},I));return M||(e.name=t.before+e.name.replace(/\s+/g," ")+t.after),e},ee=function(e){var t=e&&e.getAttribute?(e.getAttribute("role")||"").toLowerCase():"";if(fe(t)){function r(e){return 0<fe(t).length&&0<=e.roles.indexOf(t)}for(var n=t.split(/\s+/),o=0;o<n.length;o++)if(t=n[o],r(b)||r(h)||r(x)||r(a)||-1!==oe.indexOf(t))return t}return""},b={roles:["button","checkbox","link","option","radio","switch","tab","treeitem","menuitem","menuitemcheckbox","menuitemradio","row","cell","gridcell","columnheader","rowheader","tooltip","heading"],tags:["a","button","summary","input","h1","h2","h3","h4","h5","h6","menuitem","option","tr","td","th"]},h={roles:["application","alert","log","marquee","timer","alertdialog","dialog","banner","complementary","form","main","navigation","region","search","article","document","feed","figure","img","math","toolbar","menu","menubar","grid","listbox","radiogroup","textbox","searchbox","spinbutton","scrollbar","slider","tablist","tabpanel","tree","treegrid","separator","rowgroup","group"],tags:["article","aside","body","select","datalist","optgroup","dialog","figure","footer","form","header","hr","iframe","img","textarea","input","main","math","menu","nav","section","thead","tbody","tfoot","fieldset"]},x={roles:["term","definition","directory","list","note","status","table","contentinfo"],tags:["dl","ul","ol","dd","details","output","table"]},a={roles:["legend","caption","code","deletion","emphasis","generic","insertion","paragraph","strong","subscript","superscript"],tags:["legend","caption","figcaption","code","del","em","div","span","ins","p","strong","sub","sup"]},te=["div","span"],re=["caption","code","deletion","emphasis","generic","insertion","none","paragraph","presentation","strong","subscript","superscript"],ne=["caption","figcaption","code","del","em","div","span","ins","p","strong","sub","sup"],le=["button","input","select","textarea"],de=["scrollbar","slider","spinbutton"],ue=["searchbox","textbox"],se=["grid","listbox","tablist","tree","treegrid"],ce=["button","checkbox","link","switch","option","menu","menubar","menuitem","menuitemcheckbox","menuitemradio","radio","tab","treeitem","gridcell"],oe=["presentation","none"],ie=r.isHidden||function(e,t){return!(!(e=e)||1!==e.nodeType||e===t||"true"!==e.getAttribute("aria-hidden")&&!e.getAttribute("hidden")&&"none"!==(e=l(e)).display&&"hidden"!==e.visibility)},l=r.getStyleObject||function(e){var t={};return G.defaultView&&G.defaultView.getComputedStyle?t=G.defaultView.getComputedStyle(e,""):e.currentStyle&&(t=e.currentStyle),t},d={display:["block","grid","table","flow-root","flex"],position:["absolute","fixed"],float:["left","right","inline"],clear:["left","right","both","inline"],overflow:["hidden","scroll","auto"],"column-count":["!auto"],"column-width":["!auto"],"column-span":["all"],contain:["layout","content","strict"]},f=["address","article","aside","blockquote","br","canvas","dd","div","dl","dt","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","legend","li","main","nav","noscript","ol","output","p","pre","section","table","td","tfoot","th","tr","ul","video"],u=function(e,t,r,n){if(!t||!t.length)return"";for(var o=[],i=0;i<t.length;i++){var a=ee(t[i]);(!n||-1!==n.indexOf(a))&&o.push(r?s(t[i]):_(t[i],!0,!1,[],!1,{top:t[i]}).name)}return o.join(" ")},g=r.getPseudoElStyleObj||function(e,t){var r,n={};for(r in d)n[r]=G.defaultView.getComputedStyle(e,t).getPropertyValue(r);return n.content=G.defaultView.getComputedStyle(e,t).getPropertyValue("content").replace(/^"|\\|"$/g,""),n},s=function(e,t){var r,n;return t||1!==e.nodeType?(n=(r=g(e,t)).content)&&"none"!==n?(m({},r)&&(":before"===t?n+=" ":":after"===t&&(n=" "+n)),n):"":e.innerText||e.textContent||""},ae=r.getCSSText||function(e,t){return e&&1!==e.nodeType||e===t||-1!==["input","select","textarea","img","iframe","optgroup"].indexOf(e.nodeName.toLowerCase())?{before:"",after:""}:{before:o(e,s(e,":before")),after:o(e,s(e,":after"))}};if(F(e,G.body,0,!(!e||!e.nodeName||"area"!==e.nodeName.toLowerCase())))return n;var c=_(e,!1,!1,[],!1,{top:e}),y=fe(c.name.replace(/\s+/g," ")),v=fe(c.title.replace(/\s+/g," "));n.hasUpperCase=!(!i||i===i.toLowerCase()),n.name=y,n.desc=v,Y={name:[],desc:[]},Z=[]}catch(e){n.error=e}return n.placeholder=p,n.userAgent=Q,t&&"function"==typeof t?t.apply(e,[n,e]):n},function(e){return"string"!=typeof e?"":e.replace(/^\s+|\s+$/g,"")});r.getAccNameMsg=r.getNames=function(e,t){e=r.getAccName(e,null,!1,t);return e.error?e.error+"\n\nAn error has been thrown in AccName Prototype version "+r.getAccNameVersion+". Please copy this error message and the HTML markup that caused it, and submit both as a new GitHub issue at\nhttps://github.com/whatsock/w3c-alternative-text-computation":(t='accName: "'+e.name+'"\n\naccDesc: "'+e.desc+'"\n\n',e.placeholder&&(t+="Name from placeholder: true\n\n"),e.userAgent&&(t+="Name from user agent: true\n\n"),t+("(Running AccName Computation Prototype version: "+r.getAccNameVersion)+")")},"object"==typeof module&&module.exports&&(module.exports={getNames:r.getNames,calcNames:r.calcNames})}();
\ No newline at end of file
+!function(){var r=window.AccNamePrototypeNameSpace||window,me=(r&&"string"==typeof r&&r.length&&(window[r]={},r=window[r]),r.getAccNameVersion="2.60",r.getAccName=r.calcNames=function(e,t,W,r){var G=(r=r||{}).document||document,n={name:"",desc:"",error:""},p=!1,Q=!1;try{if(!e||1!==e.nodeType)return n;var U=e,o=me(e.getAttribute("role")||""),z={name:[],desc:[]},F=[],J=function(I,P,R,E,B,H,$){($=$||{}).tag=$.tag||!1,$.role=$.role||!1,$.go=$.go||!1;function f(e,t,r){var n={name:"",title:""};if(e){var o,i,a,l,d,u=!(!e||1!==e.nodeType||!x(e)),s=e,c=t(e)||{};if(c.name&&c.name.length&&(n.name+=c.name),!c.skip&&(o=e,!(i=H.top)||!o||1!==i.nodeType||1!==o.nodeType||(a=X(o),l=o.nodeName.toLowerCase(),(d=function(e,t){return a&&0<=t.roles.indexOf(a)||!a&&0<=t.tags.indexOf(l)})(0,h)?o!==i||o.id&&H[o.id]&&H[o.id].node?g(o,H.top)&&"select"!==o.nodeName.toLowerCase()||d(0,m):Y(o):!d(0,b)&&(o!==U||d(0,m))||!(a||-1===["section"].indexOf(l)||o.getAttribute("aria-labelledby")||o.getAttribute("aria-label"))||$.go)))for($.go&&($.go=!1),e=e.firstChild;e;)n.name+=f(e,t,r).name,e=e.nextSibling;n.name+=c.owns||"",U===s&&r===s&&!me(n.name)&&me(c.title)?n.name=ie(c.title):U===s&&r===s&&me(c.title)&&(n.title=ie(c.title)),U===s&&r===s&&me(c.desc)&&(n.title=ie(c.desc)),U===s&&r===s&&me(c.placeholder)&&!me(n.name)?(n.name=ie(c.placeholder),p=!0):U===s&&r===s&&me(c.placeholder)&&!me(n.title)&&(n.title=ie(c.placeholder)),(u||c.isWidget)&&(n.name=ie(n.name))}return n}var e={name:"",title:""},M=!1,g=function(e,t){for(var r=[];e;){if((e=e.id&&H[e.id]&&H[e.id].node&&-1===r.indexOf(e)?(r.push(e),H[e.id].node):e.parentNode)&&e===t)return!0;if(!e||e===H.top||e===G.body)return!1}return!1},t={before:"",after:""},e=($.tag||$.role||-1!==z[H.computingDesc?"desc":"name"].indexOf(I)||(t=ae(I,null),W&&(-1===t.before.indexOf(" [ARIA] ")&&-1===t.before.indexOf(" aria-")&&-1===t.before.indexOf(" accName: ")||(t.before=""),-1===t.after.indexOf(" [ARIA] ")&&-1===t.after.indexOf(" aria-")&&-1===t.after.indexOf(" accDescription: ")||(t.after=""))),f(I,function(e){var t=0,r=null,n=[],o=[],i={name:"",title:"",owns:"",skip:!1},a=!!(e&&1===e.nodeType&&E&&E.length&&-1!==E.indexOf(e)&&e===U&&e!==I),l=!1;if((!R&&e&&!re(e,H.top)||B||a)&&!$.tag&&!$.role&&-1===z[H.computingDesc?"desc":"name"].indexOf(e)){z[H.computingDesc?"desc":"name"].push(e);var d="",u="",s={before:"",after:""},c=I===e?e:e.parentNode;if($.tag||$.role||-1!==z[H.computingDesc?"desc":"name"].indexOf(c)||(z[H.computingDesc?"desc":"name"].push(c),s=ae(c,I),W&&(-1===s.before.indexOf(" [ARIA] ")&&-1===s.before.indexOf(" aria-")&&-1===s.before.indexOf(" accName: ")||(s.before=""),-1===s.after.indexOf(" [ARIA] ")&&-1===s.after.indexOf(" aria-")&&-1===s.after.indexOf(" accDescription: ")||(s.after=""))),1===e.nodeType){var c=e.nodeName.toLowerCase(),f=X(e),g=!$.tag&&!$.role&&e.getAttribute("aria-labelledby")||"",p=!$.tag&&!$.role&&e.getAttribute("aria-describedby")||"",m=!$.tag&&!$.role&&e.getAttribute("aria-description"),b=!$.tag&&!$.role&&e.getAttribute("aria-label")||"",h=!$.tag&&!$.role&&e.getAttribute("title")||"";if(e===U&&!f&&-1!==Z.indexOf(c))return i;if(e===U&&(-1!==_.indexOf(f)||!f&&-1!==ee.indexOf(c)))return i;var x=-1!==le.indexOf(c),y=-1!==["input"].indexOf(c),A=-1!==de.indexOf(f),v=-1!==ue.indexOf(f),O=-1!==se.indexOf(f),w=A||v||O||"combobox"===f,N=(w||-1!==ce.indexOf(f))&&"link"!==f,C=(i.isWidget=x||N,!1),k=!1,S=e.getAttribute("aria-owns")||"",a=!($.tag||$.role||a||!(e!==I&&(x||w)||e.id&&H[e.id]&&H[e.id].target&&H[e.id].target===e));if(!P&&!$.tag&&!$.role&&g){for(n=g.split(/\s+/),o=[],t=0;t<n.length;t++)r=G.getElementById(n[t]),o.push(J(r,!0,R,[e],r===I,{ref:H,top:r}).name);d=me(o.join(" ")),me(d)&&(M=l=C=!0,i.skip=!0)}if(!P&&e===I&&!$.tag&&!$.role&&(p||m)){if(p){for(n=p.split(/\s+/),o=[],t=0;t<n.length;t++)r=G.getElementById(n[t]),o.push(J(r,!0,!1,[e],!1,{ref:H,top:r,computingDesc:!0}).name);D=me(o.join(" "))}else D=me(m);me(D)&&(i.desc=D,k=!0)}$.tag||$.role||C||!me(b)||a||me(d=b)&&(l=C=!0,e===I)&&(M=R=!0);w=!$.tag&&!$.role&&!C&&"iframe"!==c&&f&&-1!==te.indexOf(f)&&!Y(e)&&!fe(e);if(!a){if(!$.tag&&!$.role&&!C&&e===I&&x){var L=G.querySelectorAll("label"),T="",V=ge(e,"label")||!1;for(t=0;t<L.length;t++)(L[t]!==V||"string"==typeof V.getAttribute("for"))&&L[t].getAttribute("for")!==e.id||ne(L[t],G.body)||(T+=ie(J(L[t],!0,R,[e],!1,{ref:H,top:L[t]}).name));me(d=T)&&(C=!0)}var g=!$.tag&&!$.role&&y&&(e.getAttribute("type")||"").toLowerCase()||!1,p=!$.tag&&!$.role&&g&&me(e.getAttribute("value"))||!1,D=w&&"img"===c?"":me(e.alt||e.getAttribute("alt"));if($.tag||$.role||C||w||"img"!==f&&"img"!==c&&"image"!==g||!D&&!me(h)||(d=me(D)||me(h),me(d)&&(C=!0)),$.tag||$.role||C||w||"area"!==c||!D||(d=me(D),me(d)&&(C=!0)),"optgroup"===c&&($.tag||$.role||C||w||!e.getAttribute("label")||(d=me(e.getAttribute("label")),me(d)&&(C=!0)),i.skip=!0),!$.tag&&!$.role&&!C&&e===I&&g&&-1!==["button","submit","reset"].indexOf(g)){if(p)d=p;else switch(g){case"submit":d="submit";break;case"reset":d="reset";break;default:d=""}me(d)&&(C=!0)}!$.tag&&!$.role&&C&&e===I&&g&&-1!==["button","submit","reset"].indexOf(g)&&p&&p!==d&&!i.desc&&(i.desc=p,k=!0),$.tag||$.role||C||e!==I||!g||"image"!==g||(d="Submit Query",Q=C=!0),!($.tag||$.role||C||e!==U||"group"!==f&&"radiogroup"!==f&&(f||"fieldset"!==c))&&((q=K(e,["legend"],["legend"])||!1)&&(d=me(J(q,P,!1,[],!1,{ref:H,top:q}).name)),me(d)&&(C=!0),R=!0),!($.tag||$.role||C||e!==U||"table"!==f&&(f||"table"!==c))&&((q=K(e,["caption"],["caption"])||!1)&&(d=me(J(q,P,!1,[],!1,{ref:H,top:q}).name)),me(d)&&(C=!0),R=!0),$.tag||$.role||"svg"!==c||(b=e.querySelector("title")||!1,y=e===U&&e.querySelector("desc")||!1,!C&&b&&(d=me(J(b,!0,!1,[],!1,{ref:H,top:b}).name)),!k&&y&&(D=me(J(y,!0,!1,[],!1,{ref:H,top:y}).name),me(D))&&(i.desc=D),i.skip=!0)}$.tag||$.role||!a||E&&E.length&&-1!==E.indexOf(e)||(A?d=oe(f,e,!0):v||"combobox"===f&&x?d=oe(f,e,!1,!0):O?d=oe(f,e,!1,!1,!0):!x||-1===["input","textarea"].indexOf(c)||N&&!v?!x||"select"!==c||N&&"combobox"!==f||(d=oe(f,e,!1,!1,!0,!0)):d=oe(f,e,!1,!1,!1,!0),d=me(d)),$.tag||$.role||w||!me(h)||d&&" "===m||(i.title=me(h));var j,p=(p=x&&me(e.getAttribute("type")||"").toLowerCase())||"text",g=!$.tag&&!$.role&&e===U&&e===I&&(v||x&&("textarea"===c||"input"===c&&-1!==["password","search","tel","text","url","email"].indexOf(p)))&&me(e.getAttribute("placeholder")||e.getAttribute("aria-placeholder")),q=(g&&(i.placeholder=g),$.role&&$.role===f||!f&&$.tag&&$.tag===c);if(q&&(d=me(J(e,P,!1,[],!1,{ref:H,top:e}).name),me(d))&&(R=!0),!q&&S&&-1===["input","img","progress"].indexOf(c)){for(n=S.split(/\s+/),o=[],t=0;t<n.length;t++)(r=G.getElementById(n[t]))&&-1===F.indexOf(n[t])&&(F.push(n[t]),(j={ref:H,top:H.top})[n[t]]={refNode:I,node:e,target:r},ne(r,G.body)||o.push(J(r,!0,R,[],!1,j).name));u=o.join("")}}else $.tag||$.role||3!==e.nodeType||(d=e.data);(d=l?d:s.before+d.replace(/\s+/g," ")+s.after).length&&!pe(e,H.top,H)&&(i.name=d),i.owns=u}return i},I));return M||(e.name=t.before+e.name.replace(/\s+/g," ")+t.after),e},K=function(e,t,r,n){for(e=e?e.firstChild:null;e;){var o=X(e)||!1;if(1===e.nodeType&&(!t&&!r||o&&r&&-1!==r.indexOf(o)||!o&&t&&-1!==t.indexOf(e.nodeName.toLowerCase())))return e;if(!n&&1===e.nodeType&&(t||r))return null;e=e.nextSibling}return e},X=function(e){var t=e&&e.getAttribute?(e.getAttribute("role")||"").toLowerCase():"";if(me(t))for(var r=function(e){return 0<me(t).length&&0<=e.roles.indexOf(t)},n=t.split(/\s+/),o=0;o<n.length;o++)if(t=n[o],r(m)||r(b)||r(h)||r(i)||-1!==te.indexOf(t))return t;return""},Y=function(e){var t=e.nodeName.toLowerCase();return!!e.getAttribute("tabindex")||!("a"!==t||!e.getAttribute("href"))||-1!==["button","input","select","textarea"].indexOf(t)&&"hidden"!==(e.getAttribute("type")||"").toLowerCase()},m={roles:["button","checkbox","link","option","radio","switch","tab","treeitem","menuitem","menuitemcheckbox","menuitemradio","row","cell","gridcell","columnheader","rowheader","tooltip","heading"],tags:["a","button","summary","input","h1","h2","h3","h4","h5","h6","menuitem","option","tr","td","th"]},b={roles:["application","alert","log","marquee","timer","alertdialog","dialog","banner","complementary","form","main","navigation","region","search","article","document","feed","figure","img","math","toolbar","menu","menubar","grid","listbox","radiogroup","textbox","searchbox","spinbutton","scrollbar","slider","tablist","tabpanel","tree","treegrid","separator","rowgroup","group"],tags:["article","aside","body","select","datalist","optgroup","dialog","figure","footer","form","header","hr","iframe","img","textarea","input","main","math","menu","nav","section","thead","tbody","tfoot","fieldset"]},h={roles:["term","definition","directory","list","note","status","table","contentinfo"],tags:["dl","ul","ol","dd","details","output","table"]},i={roles:["legend","caption","code","deletion","emphasis","generic","insertion","paragraph","strong","subscript","superscript"],tags:["legend","caption","figcaption","code","del","em","div","span","ins","p","strong","sub","sup"]},Z=["div","span"],_=["caption","code","deletion","emphasis","generic","insertion","none","paragraph","presentation","strong","subscript","superscript"],ee=["caption","figcaption","code","del","em","div","span","ins","p","strong","sub","sup"],le=["button","input","select","textarea"],de=["scrollbar","slider","spinbutton"],ue=["searchbox","textbox"],se=["grid","listbox","tablist","tree","treegrid"],ce=["button","checkbox","link","switch","option","menu","menubar","menuitem","menuitemcheckbox","menuitemradio","radio","tab","treeitem","gridcell"],te=["presentation","none"],fe=function(e){for(var t=["labelledby","label","describedby","busy","controls","current","details","disabled","dropeffect","errormessage","flowto","grabbed","haspopup","invalid","keyshortcuts","live","owns","roledescription"],r=0;r<t.length;r++)if(me(e.getAttribute("aria-"+t[r])))return!0;return!1},re=r.isHidden||function(e,t){return!(!(e=e)||1!==e.nodeType||e===t||"true"!==e.getAttribute("aria-hidden")&&!e.getAttribute("hidden")&&"none"!==(e=a(e)).display&&"hidden"!==e.visibility)},ne=function(e,t,r,n){for(;e&&e!==t;){if(!n&&1===e.nodeType&&re(e,t))return!0;n=!1,e=e.parentNode}return!1},a=r.getStyleObject||function(e){var t={};return G.defaultView&&G.defaultView.getComputedStyle?t=G.defaultView.getComputedStyle(e,""):e.currentStyle&&(t=e.currentStyle),t},l=function(e,t){if(-1!==(i=t).indexOf("attr("))for(var r=i.match(/attr\((.|\n|\r\n)*?\)/g),n=0;n<r.length;n++)var o=r[n].slice(5,-1),o=e.getAttribute(o)||"",i=i.replace(r[n],o);return i=i.replace(/url\((.*?)\)\s+\/|url\((.*?)\)/g,"").replace(/^\s+|\s+$/g,"").replace(/\"/g,"")},x=function(e,t){var r,n=t||a(e);for(r in d)for(var o=d[r],i=0;i<o.length;i++)if(n[r]&&(0===o[i].indexOf("!")&&-1===[o[i].slice(1),"inherit","initial","unset"].indexOf(n[r])||0===n[r].indexOf(o[i])))return!0;return!t&&e.nodeName&&-1!==f.indexOf(e.nodeName.toLowerCase())&&!(n.display&&0===n.display.indexOf("inline")&&"br"!==e.nodeName.toLowerCase())},d={display:["block","grid","table","flow-root","flex"],position:["absolute","fixed"],float:["left","right","inline"],clear:["left","right","both","inline"],overflow:["hidden","scroll","auto"],"column-count":["!auto"],"column-width":["!auto"],"column-span":["all"],contain:["layout","content","strict"]},f=["address","article","aside","blockquote","br","canvas","dd","div","dl","dt","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","legend","li","main","nav","noscript","ol","output","p","pre","section","table","td","tfoot","th","tr","ul","video"],oe=function(e,t,r,n,o,i){var a,l="",d=!1;return r&&!i?l=t.getAttribute("aria-valuetext")||t.getAttribute("aria-valuenow")||"":n&&!i?l=s(t)||"":o&&!i&&(a=[],"grid"===e||"treegrid"===e?a=["gridcell","rowheader","columnheader"]:"listbox"===e?a=["option"]:"tablist"===e?a=["tab"]:"tree"===e&&(a=["treeitem"]),l=u(t,t.querySelectorAll('*[aria-selected="true"]'),!1,a),d=!0),!(l=me(l))&&(r||n)&&t.value&&(l=t.value),l=d||l||!i?l:o?u(t,t.querySelectorAll("option[selected]"),!0):t.value},ie=function(e){return me(e).length?" "+e+" ":" "},u=function(e,t,r,n){if(!t||!t.length)return"";for(var o=[],i=0;i<t.length;i++){var a=X(t[i]);(!n||-1!==n.indexOf(a))&&o.push(r?s(t[i]):J(t[i],!0,!1,[],!1,{top:t[i]}).name)}return o.join(" ")},g=r.getPseudoElStyleObj||function(e,t){var r,n={};for(r in d)n[r]=G.defaultView.getComputedStyle(e,t).getPropertyValue(r);return n.content=G.defaultView.getComputedStyle(e,t).getPropertyValue("content").replace(/^"|\\|"$/g,""),n},s=function(e,t){var r,n;return t||1!==e.nodeType?(n=(r=g(e,t)).content)&&"none"!==n?(x({},r)&&(":before"===t?n+=" ":":after"===t&&(n=" "+n)),n):"":e.innerText||e.textContent||""},ae=r.getCSSText||function(e,t){return e&&1!==e.nodeType||e===t||-1!==["input","select","textarea","img","iframe","optgroup"].indexOf(e.nodeName.toLowerCase())?{before:"",after:""}:{before:l(e,s(e,":before")),after:l(e,s(e,":after"))}},ge=function(e,t,r,n){for(n=!!n;e;)if((e=e.parentNode)&&(r&&X(e)===r||t&&e.nodeName&&e.nodeName.toLowerCase()===t&&(!n||X(e).length<1)))return e;return{}},pe=function(e,t,r,n){for(var o=[];e&&e!==t;)if((e=e.id&&r&&r[e.id]&&r[e.id].node&&-1===o.indexOf(e)?(o.push(e),r[e.id].node):e.parentNode)&&e.getAttribute&&(me(e.getAttribute("aria-label"))||!n&&re(e,t)))return!0;return!1};if(ne(e,G.body,0,!(!e||!e.nodeName||"area"!==e.nodeName.toLowerCase())))return n;var c=J(e,!1,!1,[],!1,{top:e}),y=me(c.name.replace(/\s+/g," ")),A=me(c.title.replace(/\s+/g," "));n.hasUpperCase=!(!o||o===o.toLowerCase()),n.name=y,n.desc=A,z={name:[],desc:[]},F=[]}catch(e){n.error=e}return n.placeholder=p,n.userAgent=Q,t&&"function"==typeof t?t.apply(e,[n,e]):n},function(e){return"string"!=typeof e?"":e.replace(/^\s+|\s+$/g,"")});r.getAccNameMsg=r.getNames=function(e,t){e=r.getAccName(e,null,!1,t);return e.error?e.error+"\n\nAn error has been thrown in AccName Prototype version "+r.getAccNameVersion+". Please copy this error message and the HTML markup that caused it, and submit both as a new GitHub issue at\nhttps://github.com/whatsock/w3c-alternative-text-computation":(t='accName: "'+e.name+'"\n\naccDesc: "'+e.desc+'"\n\n',e.placeholder&&(t+="Name from placeholder: true\n\n"),e.userAgent&&(t+="Name from user agent: true\n\n"),t+("(Running AccName Computation Prototype version: "+r.getAccNameVersion)+")")},"object"==typeof module&&module.exports&&(module.exports={getNames:r.getNames,calcNames:r.calcNames})}();
\ No newline at end of file
diff --git a/4X/Min/CurrentDevice.js b/4X/Min/CurrentDevice.js
index 4c254357..c7c94512 100644
--- a/4X/Min/CurrentDevice.js
+++ b/4X/Min/CurrentDevice.js
@@ -2,4 +2,4 @@
  * current-device v0.10.1 - https://github.com/matthewhudson/current-device
  * MIT Licensed
  */
-!function(n,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.device=o():n.device=o()}(window,function(){return e=[function(n,o,e){n.exports=e(1)},function(n,o,e){"use strict";e.r(o);var t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},r=window.device,i={},a=[],c=(window.device=i,window.document.documentElement),d=window.navigator.userAgent.toLowerCase(),l=["googletv","viera","smarttv","internet.tv","netcast","nettv","appletv","boxee","kylo","roku","dlnadoc","pov_tv","hbbtv","ce-html"];function u(n,o){return-1!==n.indexOf(o)}function s(n){return u(d,n)}function f(n){return c.className.match(new RegExp(n,"i"))}function b(n){var o;f(n)||(o=c.className.replace(/^\s+|\s+$/g,""),c.className=o+" "+n)}function p(n){f(n)&&(c.className=c.className.replace(" "+n,""))}function w(){i.landscape()?(p("portrait"),b("landscape"),y("landscape")):(p("landscape"),b("portrait"),y("portrait")),h()}function y(n){for(var o=0;o<a.length;o++)a[o](n)}i.macos=function(){return s("mac")},i.ios=function(){return i.iphone()||i.ipod()||i.ipad()},i.iphone=function(){return!i.windows()&&s("iphone")},i.ipod=function(){return s("ipod")},i.ipad=function(){var n="MacIntel"===navigator.platform&&1<navigator.maxTouchPoints;return s("ipad")||n},i.android=function(){return!i.windows()&&s("android")},i.androidPhone=function(){return i.android()&&s("mobile")},i.androidTablet=function(){return i.android()&&!s("mobile")},i.blackberry=function(){return s("blackberry")||s("bb10")},i.blackberryPhone=function(){return i.blackberry()&&!s("tablet")},i.blackberryTablet=function(){return i.blackberry()&&s("tablet")},i.windows=function(){return s("windows")},i.windowsPhone=function(){return i.windows()&&s("phone")},i.windowsTablet=function(){return i.windows()&&s("touch")&&!i.windowsPhone()},i.fxos=function(){return(s("(mobile")||s("(tablet"))&&s(" rv:")},i.fxosPhone=function(){return i.fxos()&&s("mobile")},i.fxosTablet=function(){return i.fxos()&&s("tablet")},i.meego=function(){return s("meego")},i.cordova=function(){return window.cordova&&"file:"===location.protocol},i.nodeWebkit=function(){return"object"===t(window.process)},i.mobile=function(){return i.androidPhone()||i.iphone()||i.ipod()||i.windowsPhone()||i.blackberryPhone()||i.fxosPhone()||i.meego()},i.tablet=function(){return i.ipad()||i.androidTablet()||i.blackberryTablet()||i.windowsTablet()||i.fxosTablet()},i.desktop=function(){return!i.tablet()&&!i.mobile()},i.television=function(){for(var n=0;n<l.length;){if(s(l[n]))return!0;n++}return!1},i.portrait=function(){return screen.orientation&&Object.prototype.hasOwnProperty.call(window,"onorientationchange")?u(screen.orientation.type,"portrait"):i.ios()&&Object.prototype.hasOwnProperty.call(window,"orientation")?90!==Math.abs(window.orientation):1<window.innerHeight/window.innerWidth},i.landscape=function(){return screen.orientation&&Object.prototype.hasOwnProperty.call(window,"onorientationchange")?u(screen.orientation.type,"landscape"):i.ios()&&Object.prototype.hasOwnProperty.call(window,"orientation")?90===Math.abs(window.orientation):window.innerHeight/window.innerWidth<1},i.noConflict=function(){return window.device=r,this},i.ios()?i.ipad()?b("ios ipad tablet"):i.iphone()?b("ios iphone mobile"):i.ipod()&&b("ios ipod mobile"):i.macos()?b("macos desktop"):i.android()?i.androidTablet()?b("android tablet"):b("android mobile"):i.blackberry()?i.blackberryTablet()?b("blackberry tablet"):b("blackberry mobile"):i.windows()?i.windowsTablet()?b("windows tablet"):i.windowsPhone()?b("windows mobile"):b("windows desktop"):i.fxos()?i.fxosTablet()?b("fxos tablet"):b("fxos mobile"):i.meego()?b("meego mobile"):i.nodeWebkit()?b("node-webkit"):i.television()?b("television"):i.desktop()&&b("desktop"),i.cordova()&&b("cordova"),i.onChangeOrientation=function(n){"function"==typeof n&&a.push(n)};e="resize";function m(n){for(var o=0;o<n.length;o++)if(i[n[o]]())return n[o];return"unknown"}function h(){i.orientation=m(["portrait","landscape"])}Object.prototype.hasOwnProperty.call(window,"onorientationchange")&&(e="orientationchange"),window.addEventListener?window.addEventListener(e,w,!1):window.attachEvent?window.attachEvent(e,w):window[e]=w,w(),i.type=m(["mobile","tablet","desktop"]),i.os=m(["ios","iphone","ipad","ipod","android","blackberry","macos","windows","fxos","meego","television"]),h(),o.default=i}],t={},r.m=e,r.c=t,r.d=function(n,o,e){r.o(n,o)||Object.defineProperty(n,o,{enumerable:!0,get:e})},r.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},r.t=function(o,n){if(1&n&&(o=r(o)),8&n)return o;if(4&n&&"object"==typeof o&&o&&o.__esModule)return o;var e=Object.create(null);if(r.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:o}),2&n&&"string"!=typeof o)for(var t in o)r.d(e,t,function(n){return o[n]}.bind(null,t));return e},r.n=function(n){var o=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(o,"a",o),o},r.o=function(n,o){return Object.prototype.hasOwnProperty.call(n,o)},r.p="",r(r.s=0).default;function r(n){var o;return(t[n]||(o=t[n]={i:n,l:!1,exports:{}},e[n].call(o.exports,o,o.exports,r),o.l=!0,o)).exports}var e,t});
\ No newline at end of file
+!function(n,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.device=o():n.device=o()}(window,function(){return e=[function(n,o,e){n.exports=e(1)},function(n,o,e){e.r(o);var t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},r=window.device,i={},a=[],c=(window.device=i,window.document.documentElement),d=window.navigator.userAgent.toLowerCase(),l=["googletv","viera","smarttv","internet.tv","netcast","nettv","appletv","boxee","kylo","roku","dlnadoc","pov_tv","hbbtv","ce-html"];function u(n,o){return-1!==n.indexOf(o)}function s(n){return u(d,n)}function f(n){return c.className.match(new RegExp(n,"i"))}function b(n){var o;f(n)||(o=c.className.replace(/^\s+|\s+$/g,""),c.className=o+" "+n)}function p(n){f(n)&&(c.className=c.className.replace(" "+n,""))}function w(){i.landscape()?(p("portrait"),b("landscape"),y("landscape")):(p("landscape"),b("portrait"),y("portrait")),h()}function y(n){for(var o=0;o<a.length;o++)a[o](n)}i.macos=function(){return s("mac")},i.ios=function(){return i.iphone()||i.ipod()||i.ipad()},i.iphone=function(){return!i.windows()&&s("iphone")},i.ipod=function(){return s("ipod")},i.ipad=function(){var n="MacIntel"===navigator.platform&&1<navigator.maxTouchPoints;return s("ipad")||n},i.android=function(){return!i.windows()&&s("android")},i.androidPhone=function(){return i.android()&&s("mobile")},i.androidTablet=function(){return i.android()&&!s("mobile")},i.blackberry=function(){return s("blackberry")||s("bb10")},i.blackberryPhone=function(){return i.blackberry()&&!s("tablet")},i.blackberryTablet=function(){return i.blackberry()&&s("tablet")},i.windows=function(){return s("windows")},i.windowsPhone=function(){return i.windows()&&s("phone")},i.windowsTablet=function(){return i.windows()&&s("touch")&&!i.windowsPhone()},i.fxos=function(){return(s("(mobile")||s("(tablet"))&&s(" rv:")},i.fxosPhone=function(){return i.fxos()&&s("mobile")},i.fxosTablet=function(){return i.fxos()&&s("tablet")},i.meego=function(){return s("meego")},i.cordova=function(){return window.cordova&&"file:"===location.protocol},i.nodeWebkit=function(){return"object"===t(window.process)},i.mobile=function(){return i.androidPhone()||i.iphone()||i.ipod()||i.windowsPhone()||i.blackberryPhone()||i.fxosPhone()||i.meego()},i.tablet=function(){return i.ipad()||i.androidTablet()||i.blackberryTablet()||i.windowsTablet()||i.fxosTablet()},i.desktop=function(){return!i.tablet()&&!i.mobile()},i.television=function(){for(var n=0;n<l.length;){if(s(l[n]))return!0;n++}return!1},i.portrait=function(){return screen.orientation&&Object.prototype.hasOwnProperty.call(window,"onorientationchange")?u(screen.orientation.type,"portrait"):i.ios()&&Object.prototype.hasOwnProperty.call(window,"orientation")?90!==Math.abs(window.orientation):1<window.innerHeight/window.innerWidth},i.landscape=function(){return screen.orientation&&Object.prototype.hasOwnProperty.call(window,"onorientationchange")?u(screen.orientation.type,"landscape"):i.ios()&&Object.prototype.hasOwnProperty.call(window,"orientation")?90===Math.abs(window.orientation):window.innerHeight/window.innerWidth<1},i.noConflict=function(){return window.device=r,this},i.ios()?i.ipad()?b("ios ipad tablet"):i.iphone()?b("ios iphone mobile"):i.ipod()&&b("ios ipod mobile"):i.macos()?b("macos desktop"):i.android()?i.androidTablet()?b("android tablet"):b("android mobile"):i.blackberry()?i.blackberryTablet()?b("blackberry tablet"):b("blackberry mobile"):i.windows()?i.windowsTablet()?b("windows tablet"):i.windowsPhone()?b("windows mobile"):b("windows desktop"):i.fxos()?i.fxosTablet()?b("fxos tablet"):b("fxos mobile"):i.meego()?b("meego mobile"):i.nodeWebkit()?b("node-webkit"):i.television()?b("television"):i.desktop()&&b("desktop"),i.cordova()&&b("cordova"),i.onChangeOrientation=function(n){"function"==typeof n&&a.push(n)};e="resize";function m(n){for(var o=0;o<n.length;o++)if(i[n[o]]())return n[o];return"unknown"}function h(){i.orientation=m(["portrait","landscape"])}Object.prototype.hasOwnProperty.call(window,"onorientationchange")&&(e="orientationchange"),window.addEventListener?window.addEventListener(e,w,!1):window.attachEvent?window.attachEvent(e,w):window[e]=w,w(),i.type=m(["mobile","tablet","desktop"]),i.os=m(["ios","iphone","ipad","ipod","android","blackberry","macos","windows","fxos","meego","television"]),h(),o.default=i}],t={},r.m=e,r.c=t,r.d=function(n,o,e){r.o(n,o)||Object.defineProperty(n,o,{enumerable:!0,get:e})},r.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},r.t=function(o,n){if(1&n&&(o=r(o)),8&n)return o;if(4&n&&"object"==typeof o&&o&&o.__esModule)return o;var e=Object.create(null);if(r.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:o}),2&n&&"string"!=typeof o)for(var t in o)r.d(e,t,function(n){return o[n]}.bind(null,t));return e},r.n=function(n){var o=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(o,"a",o),o},r.o=function(n,o){return Object.prototype.hasOwnProperty.call(n,o)},r.p="",r(r.s=0).default;function r(n){var o;return(t[n]||(o=t[n]={i:n,l:!1,exports:{}},e[n].call(o.exports,o,o.exports,r),o.l=!0,o)).exports}var e,t});
\ No newline at end of file
diff --git a/4X/Min/Dragula.js b/4X/Min/Dragula.js
index d3d918ea..f38bd6a8 100644
--- a/4X/Min/Dragula.js
+++ b/4X/Min/Dragula.js
@@ -4,4 +4,4 @@ Author: Nicolas Bevacqua
 License: MIT (https://opensource.org/licenses/MIT)
 Includes modifications by Bryan Garaventa (WhatSock.com) for use within the Apex 4X ARIA Drag module.
 */
-!function(e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).dragula=e()}(function(){return function o(r,i,u){function c(t,e){if(!i[t]){if(!r[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(a)return a(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}n=i[t]={exports:{}},r[t][0].call(n.exports,function(e){return c(r[t][1][e]||e)},n,n.exports,o,r,i,u)}return i[t].exports}for(var a="function"==typeof require&&require,e=0;e<u.length;e++)c(u[e]);return c}({1:[function(e,t,n){"use strict";var o={},r="(?:^|\\s)",i="(?:\\s|$)";function u(e){var t=o[e];return t?t.lastIndex=0:o[e]=t=new RegExp(r+e+i,"g"),t}t.exports={add:function(e,t){var n=e.className;n.length?u(t).test(n)||(e.className+=" "+t):e.className=t},rm:function(e,t){e.className=e.className.replace(u(t)," ").trim()}}},{}],2:[function(n,o,e){!function(r){"use strict";var M=n("contra/emitter"),k=n("crossvent"),R=n("./classes"),j=document,q=j.documentElement,e=!1;try{var t={get passive(){return!(e=!0)}};window.addEventListener("test",null,t),window.removeEventListener("test",null,t)}catch(e){}var U=!0;function K(e,t,n,o){r.navigator.pointerEnabled?k[t](e,{mouseup:"pointerup",mousedown:"pointerdown",mousemove:"pointermove"}[n],o):r.navigator.msPointerEnabled?k[t](e,{mouseup:"MSPointerUp",mousedown:"MSPointerDown",mousemove:"MSPointerMove"}[n],o):(k[t](e,{mouseup:"touchend",mousedown:"touchstart",mousemove:"touchmove"}[n],o),k[t](e,n,o))}function z(e){return void 0!==e.touches?e.touches.length:void 0!==e.which&&0!==e.which?e.which:void 0!==e.buttons?e.buttons:void 0!==(e=e.button)?1&e?1:2&e?3:4&e?2:0:void 0}function H(e,t){return void 0!==r[t]?r[t]:(q.clientHeight?q:j.body)[e]}function V(e,t,n){var o=(e=e||{}).className||"";return e.className+=" gu-hide",t=j.elementFromPoint(t,n),e.className=o,t}function $(){return!1}function G(){return!0}function J(e){return e.width||e.right-e.left}function Q(e){return e.height||e.bottom-e.top}function W(e){return e.parentNode===j?null:e.parentNode}function Z(e){return"INPUT"===e.tagName||"TEXTAREA"===e.tagName||"SELECT"===e.tagName||function e(t){if(!t)return!1;if("false"===t.contentEditable)return!1;if("true"===t.contentEditable)return!0;return e(W(t))}(e)}function ee(t){return t.nextElementSibling||function(){var e=t;for(;e=e.nextSibling,e&&1!==e.nodeType;);return e}()}function te(e,t){var t=(t=t).targetTouches&&t.targetTouches.length?t.targetTouches[0]:t.changedTouches&&t.changedTouches.length?t.changedTouches[0]:t,n={pageX:"clientX",pageY:"clientY"};return t[e=e in n&&!(e in t)&&n[e]in t?n[e]:e]}j.addEventListener("touchmove",function(e){U||e.preventDefault()},!!e&&{passive:!1}),o.exports=function(e,t){1===arguments.length&&!1===Array.isArray(e)&&(t=e,e=[]);var l,f,s,d,m,o,r,p,v,h,n,i,g=null,y=t||{},w=(void 0===y.moves&&(y.moves=G),void 0===y.accepts&&(y.accepts=G),void 0===y.invalid&&(y.invalid=function(){return!1}),void 0===y.containers&&(y.containers=e||[]),void 0===y.isContainer&&(y.isContainer=$),void 0===y.copy&&(y.copy=!1),void 0===y.copySortSource&&(y.copySortSource=!1),void 0===y.revertOnSpill&&(y.revertOnSpill=!1),void 0===y.removeOnSpill&&(y.removeOnSpill=!1),void 0===y.direction&&(y.direction="vertical"),void 0===y.ignoreInputTextSelection&&(y.ignoreInputTextSelection=!0),void 0===y.mirrorContainer&&(y.mirrorContainer=j.body),M({containers:y.containers,start:function(e){e=E(e);e&&x(e)},end:C,cancel:_,remove:N,destroy:function(){c(!0),O({})},canMove:function(e){return!!E(e)},dragging:!1}));return!0===y.removeOnSpill&&w.on("over",function(e){R.rm(e,"gu-hide")}).on("out",function(e){w.dragging&&R.add(e,"gu-hide")}),c(),w.on("drag",function(e,t){U=!1}).on("dragend",function(e){U=!0}),w;function u(e){return-1!==w.containers.indexOf(e)||y.isContainer(e)}function c(e){e=e?"remove":"add";K(q,e,"mousedown",P),K(q,e,"mouseup",O)}function a(e){K(q,e?"remove":"add","mousemove",F)}function b(e){e=e?"remove":"add";k[e](q,"selectstart",T),k[e](q,"click",T)}function T(e){i&&e.preventDefault()}function P(e){var t,n;o=e.clientX,r=e.clientY,1!==z(e)||e.metaKey||e.ctrlKey||(n=E(t=e.target))&&(i=n,a(),"mousedown"===e.type)&&(Z(t)?t.focus():e.preventDefault())}function F(e){if(i)if(0===z(e))O({});else if(!(void 0!==e.clientX&&Math.abs(e.clientX-o)<=(y.slideFactorX||0)&&void 0!==e.clientY&&Math.abs(e.clientY-r)<=(y.slideFactorY||0))){if(y.ignoreInputTextSelection){var t=te("clientX",e)||0,n=te("clientY",e)||0;if(Z(j.elementFromPoint(t,n)))return}var t=i,n=(a(!0),b(),C(),x(t),function(e){e=e.getBoundingClientRect();return{left:e.left+H("scrollLeft","pageXOffset"),top:e.top+H("scrollTop","pageYOffset")}}(s));d=te("pageX",e)-n.left,m=te("pageY",e)-n.top,R.add(h||s,"gu-transit"),l||(t=s.getBoundingClientRect(),w.emit("beforeClone",s),(l=s.cloneNode(!0)).style.width=J(t)+"px",l.style.height=Q(t)+"px",R.rm(l,"gu-transit"),R.add(l,"gu-mirror"),y.mirrorContainer.appendChild(l),K(q,"add","mousemove",B),R.add(y.mirrorContainer,"gu-unselectable"),w.emit("cloned",l,s,"mirror")),B(e)}}function E(e){if(!(w.dragging&&l||u(e))){for(var t=e;W(e)&&!1===u(W(e));){if(y.invalid(e,t))return;if(!(e=W(e)))return}var n=W(e);if(n)if(!y.invalid(e,t))if(y.moves(e,n,t,ee(e)))return{item:e,source:n}}}function x(e){var t,n;t=e.item,n=e.source,("boolean"==typeof y.copy?y.copy:y.copy(t,n))&&(w.emit("beforeClone",e.item),h=e.item.cloneNode(!0),w.emit("cloned",h,e.item,"copy")),f=e.source,s=e.item,p=v=ee(e.item),w.dragging=!0,w.emit("drag",s,f)}function C(){var e;w.dragging&&I(e=h||s,W(e))}function S(){a(!(i=!1)),b(!0)}function O(e){var t,n;S(),w.dragging&&(t=h||s,n=te("clientX",e)||0,e=te("clientY",e)||0,(n=Y(V(l,n,e),n,e))&&(h&&y.copySortSource||!h||n!==f)?I(t,n):(y.removeOnSpill?N:_)())}function I(e,t){var n=W(e);h&&y.copySortSource&&t===f&&n.removeChild(s),X(t)?w.emit("cancel",e,f,f):w.emit("drop",e,t,f,v),L()}function N(){var e,t;w.dragging&&((t=W(e=h||s))&&t.removeChild(e),w.emit(h?"cancel":"remove",e,t,f),L())}function _(e){var t,n,o;w.dragging&&(e=0<arguments.length?e:y.revertOnSpill,!1===(o=X(n=W(t=h||s)))&&e&&(h?n&&n.removeChild(h):f.insertBefore(t,p)),o||e?w.emit("cancel",t,f,f):w.emit("drop",t,n,f,v),L())}function L(){var e=h||s;S(),l&&(R.rm(y.mirrorContainer,"gu-unselectable"),K(q,"remove","mousemove",B),W(l).removeChild(l),l=null),e&&R.rm(e,"gu-transit"),n&&clearTimeout(n),w.dragging=!1,g&&w.emit("out",e,g,f),w.emit("dragend",e),f=s=h=p=v=n=g=null}function X(e,t){t=void 0!==t?t:l?v:ee(h||s);return e===f&&t===p}function Y(t,n,o){for(var r=t;r&&!function(){if(!1===u(r))return;var e=A(r,t),e=D(r,e,n,o);if(X(r,e))return 1;return y.accepts(s,r,f,e)}();)r=W(r);return r}function B(e){if(l){e.preventDefault();var t=te("clientX",e)||0,e=te("clientY",e)||0,n=t-d,o=e-m,r=(l.style.left=n+"px",l.style.top=o+"px",l.getBoundingClientRect()),i=((r.y<o-2||r.y>2+o||r.x<n-2||r.x>2+n)&&(n+=n-r.x,o+=o-r.y,l.style.left=n+"px",l.style.top=o+"px"),h||s),r=V(l,t,e),n=Y(r,t,e),o=null!==n&&n!==g,u=((o||null===n)&&(g&&a("out"),g=n,o)&&a("over"),W(i));if(n===f&&h&&!y.copySortSource)u&&u.removeChild(i);else{var c,r=A(n,r);if(null!==r)c=D(n,r,t,e);else{if(!0!==y.revertOnSpill||h)return void(h&&u&&u.removeChild(i));c=p,n=f}(null===c&&o||c!==i&&c!==ee(i))&&(v=c,n.insertBefore(i,c),w.emit("shadow",i,n,f))}}function a(e){w.emit(e,i,g,f)}}function A(e,t){for(var n=t;n!==e&&W(n)!==e;)n=W(n);return n===q?null:n}function D(r,t,i,u){var c="horizontal"===y.direction;return(t!==r?function(){var e=t.getBoundingClientRect();if(c)return n(i>e.left+J(e)/2);return n(u>e.top+Q(e)/2)}:function(){var e,t,n,o=r.children.length;for(e=0;e<o;e++){if(t=r.children[e],n=t.getBoundingClientRect(),c&&n.left+n.width/2>i)return t;if(!c&&n.top+n.height/2>u)return t}return null})();function n(e){return e?ee(t):t}}}}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./classes":1,"contra/emitter":5,crossvent:6}],3:[function(e,t,n){t.exports=function(e,t){return Array.prototype.slice.call(e,t)}},{}],4:[function(e,t,n){"use strict";var o=e("ticky");t.exports=function(e,t,n){e&&o(function(){e.apply(n||null,t||[])})}},{ticky:10}],5:[function(e,t,n){"use strict";var c=e("atoa"),a=e("./debounce");t.exports=function(r,e){var i=e||{},u={};return(r=void 0===r?{}:r).on=function(e,t){return u[e]?u[e].push(t):u[e]=[t],r},r.once=function(e,t){return t._once=!0,r.on(e,t),r},r.off=function(e,t){var n=arguments.length;if(1===n)delete u[e];else if(0===n)u={};else{n=u[e];if(!n)return r;n.splice(n.indexOf(t),1)}return r},r.emit=function(){var e=c(arguments);return r.emitterSnapshot(e.shift()).apply(this,e)},r.emitterSnapshot=function(o){var e=(u[o]||[]).slice(0);return function(){var t=c(arguments),n=this||r;if("error"!==o||!1===i.throws||e.length)return e.forEach(function(e){i.async?a(e,t,n):e.apply(n,t),e._once&&r.off(o,e)}),r;throw 1===t.length?t[0]:t}},r}},{"./debounce":4,atoa:3}],6:[function(n,l,e){!function(r){"use strict";var o=n("custom-event"),i=n("./eventmap"),u=r.document,e=function(e,t,n,o){return e.addEventListener(t,n,o)},t=function(e,t,n,o){return e.removeEventListener(t,n,o)},c=[];function a(e,t,n){e=function(e,t,n){var o,r;for(o=0;o<c.length;o++)if((r=c[o]).element===e&&r.type===t&&r.fn===n)return o}(e,t,n);if(e)return t=c[e].wrapper,c.splice(e,1),t}r.addEventListener||(e=function(e,t,n){return e.attachEvent("on"+t,function(e,t,n){var o=a(e,t,n)||function(n,o){return function(e){var t=e||r.event;t.target=t.target||t.srcElement,t.preventDefault=t.preventDefault||function(){t.returnValue=!1},t.stopPropagation=t.stopPropagation||function(){t.cancelBubble=!0},t.which=t.which||t.keyCode,o.call(n,t)}}(e,n);return c.push({wrapper:o,element:e,type:t,fn:n}),o}(e,t,n))},t=function(e,t,n){n=a(e,t,n);if(n)return e.detachEvent("on"+t,n)}),l.exports={add:e,remove:t,fabricate:function(e,t,n){n=-1===i.indexOf(t)?new o(t,{detail:n}):function(){var e;u.createEvent?(e=u.createEvent("Event")).initEvent(t,!0,!0):u.createEventObject&&(e=u.createEventObject());return e}();e.dispatchEvent?e.dispatchEvent(n):e.fireEvent("on"+t,n)}}}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./eventmap":7,"custom-event":8}],7:[function(e,r,t){!function(e){"use strict";var t=[],n="",o=/^on/;for(n in e)o.test(n)&&t.push(n.slice(2));r.exports=t}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],8:[function(e,n,t){!function(e){var t=e.CustomEvent;n.exports=function(){try{var e=new t("cat",{detail:{foo:"bar"}});return"cat"===e.type&&"bar"===e.detail.foo}catch(e){}}()?t:"undefined"!=typeof document&&"function"==typeof document.createEvent?function(e,t){var n=document.createEvent("CustomEvent");return t?n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail):n.initCustomEvent(e,!1,!1,void 0),n}:function(e,t){var n=document.createEventObject();return n.type=e,t?(n.bubbles=Boolean(t.bubbles),n.cancelable=Boolean(t.cancelable),n.detail=t.detail):(n.bubbles=!1,n.cancelable=!1,n.detail=void 0),n}}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],9:[function(e,t,n){var o,r,t=t.exports={};function i(){throw new Error("setTimeout has not been defined")}function u(){throw new Error("clearTimeout has not been defined")}try{o="function"==typeof setTimeout?setTimeout:i}catch(e){o=i}try{r="function"==typeof clearTimeout?clearTimeout:u}catch(e){r=u}function c(t){if(o===setTimeout)return setTimeout(t,0);if((o===i||!o)&&setTimeout)return(o=setTimeout)(t,0);try{return o(t,0)}catch(e){try{return o.call(null,t,0)}catch(e){return o.call(this,t,0)}}}var a,l=[],f=!1,s=-1;function d(){f&&a&&(f=!1,a.length?l=a.concat(l):s=-1,l.length)&&m()}function m(){if(!f){for(var e=c(d),t=(f=!0,l.length);t;){for(a=l,l=[];++s<t;)a&&a[s].run();s=-1,t=l.length}a=null,f=!1,!function(t){if(r===clearTimeout)return clearTimeout(t);if((r===u||!r)&&clearTimeout)return(r=clearTimeout)(t);try{r(t)}catch(e){try{return r.call(null,t)}catch(e){return r.call(this,t)}}}(e)}}function p(e,t){this.fun=e,this.array=t}function v(){}t.nextTick=function(e){var t=new Array(arguments.length-1);if(1<arguments.length)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];l.push(new p(e,t)),1!==l.length||f||c(m)},p.prototype.run=function(){this.fun.apply(null,this.array)},t.title="browser",t.browser=!0,t.env={},t.argv=[],t.version="",t.versions={},t.on=v,t.addListener=v,t.once=v,t.off=v,t.removeListener=v,t.removeAllListeners=v,t.emit=v,t.prependListener=v,t.prependOnceListener=v,t.listeners=function(e){return[]},t.binding=function(e){throw new Error("process.binding is not supported")},t.cwd=function(){return"/"},t.chdir=function(e){throw new Error("process.chdir is not supported")},t.umask=function(){return 0}},{}],10:[function(e,n,t){!function(t){var e="function"==typeof t?function(e){t(e)}:function(e){setTimeout(e,0)};n.exports=e}.call(this,e("timers").setImmediate)},{timers:11}],11:[function(a,e,l){!function(e,t){var o=a("process/browser.js").nextTick,n=Function.prototype.apply,r=Array.prototype.slice,i={},u=0;function c(e,t){this._id=e,this._clearFn=t}l.setTimeout=function(){return new c(n.call(setTimeout,window,arguments),clearTimeout)},l.setInterval=function(){return new c(n.call(setInterval,window,arguments),clearInterval)},l.clearTimeout=l.clearInterval=function(e){e.close()},c.prototype.unref=c.prototype.ref=function(){},c.prototype.close=function(){this._clearFn.call(window,this._id)},l.enroll=function(e,t){clearTimeout(e._idleTimeoutId),e._idleTimeout=t},l.unenroll=function(e){clearTimeout(e._idleTimeoutId),e._idleTimeout=-1},l._unrefActive=l.active=function(e){clearTimeout(e._idleTimeoutId);var t=e._idleTimeout;0<=t&&(e._idleTimeoutId=setTimeout(function(){e._onTimeout&&e._onTimeout()},t))},l.setImmediate="function"==typeof e?e:function(e){var t=u++,n=!(arguments.length<2)&&r.call(arguments,1);return i[t]=!0,o(function(){i[t]&&(n?e.apply(null,n):e.call(null),l.clearImmediate(t))}),t},l.clearImmediate="function"==typeof t?t:function(e){delete i[e]}}.call(this,a("timers").setImmediate,a("timers").clearImmediate)},{"process/browser.js":9,timers:11}]},{},[2])(2)});
\ No newline at end of file
+!function(e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).dragula=e()}(function(){return function o(r,i,u){function c(n,e){if(!i[n]){if(!r[n]){var t="function"==typeof require&&require;if(!e&&t)return t(n,!0);if(a)return a(n,!0);throw(e=new Error("Cannot find module '"+n+"'")).code="MODULE_NOT_FOUND",e}t=i[n]={exports:{}},r[n][0].call(t.exports,function(e){return c(r[n][1][e]||e)},t,t.exports,o,r,i,u)}return i[n].exports}for(var a="function"==typeof require&&require,e=0;e<u.length;e++)c(u[e]);return c}({1:[function(e,n,t){var o={},r="(?:^|\\s)",i="(?:\\s|$)";function u(e){var n=o[e];return n?n.lastIndex=0:o[e]=n=new RegExp(r+e+i,"g"),n}n.exports={add:function(e,n){var t=e.className;t.length?u(n).test(t)||(e.className+=" "+n):e.className=n},rm:function(e,n){e.className=e.className.replace(u(n)," ").trim()}}},{}],2:[function(t,o,e){!function(r){var M=t("contra/emitter"),k=t("crossvent"),R=t("./classes"),j=document,q=j.documentElement,e=!1;try{var n={get passive(){return!(e=!0)}};window.addEventListener("test",null,n),window.removeEventListener("test",null,n)}catch(e){}var U=!0;function K(e,n,t,o){r.navigator.pointerEnabled?k[n](e,{mouseup:"pointerup",mousedown:"pointerdown",mousemove:"pointermove"}[t],o):r.navigator.msPointerEnabled?k[n](e,{mouseup:"MSPointerUp",mousedown:"MSPointerDown",mousemove:"MSPointerMove"}[t],o):(k[n](e,{mouseup:"touchend",mousedown:"touchstart",mousemove:"touchmove"}[t],o),k[n](e,t,o))}function z(e){return void 0!==e.touches?e.touches.length:void 0!==e.which&&0!==e.which?e.which:void 0!==e.buttons?e.buttons:void 0!==(e=e.button)?1&e?1:2&e?3:4&e?2:0:void 0}function H(e,n){return void 0!==r[n]?r[n]:(q.clientHeight?q:j.body)[e]}function V(e,n,t){var o=(e=e||{}).className||"";return e.className+=" gu-hide",n=j.elementFromPoint(n,t),e.className=o,n}function $(){return!1}function G(){return!0}function J(e){return e.width||e.right-e.left}function Q(e){return e.height||e.bottom-e.top}function W(e){return e.parentNode===j?null:e.parentNode}function Z(e){return"INPUT"===e.tagName||"TEXTAREA"===e.tagName||"SELECT"===e.tagName||function e(n){if(!n)return!1;if("false"===n.contentEditable)return!1;if("true"===n.contentEditable)return!0;return e(W(n))}(e)}function ee(n){return n.nextElementSibling||function(){var e=n;for(;e=e.nextSibling,e&&1!==e.nodeType;);return e}()}function ne(e,n){var n=(n=n).targetTouches&&n.targetTouches.length?n.targetTouches[0]:n.changedTouches&&n.changedTouches.length?n.changedTouches[0]:n,t={pageX:"clientX",pageY:"clientY"};return n[e=e in t&&!(e in n)&&t[e]in n?t[e]:e]}j.addEventListener("touchmove",function(e){U||e.preventDefault()},!!e&&{passive:!1}),o.exports=function(e,n){1===arguments.length&&!1===Array.isArray(e)&&(n=e,e=[]);var l,f,s,d,m,o,r,p,v,h,t,i,g=null,y=n||{},w=(void 0===y.moves&&(y.moves=G),void 0===y.accepts&&(y.accepts=G),void 0===y.invalid&&(y.invalid=function(){return!1}),void 0===y.containers&&(y.containers=e||[]),void 0===y.isContainer&&(y.isContainer=$),void 0===y.copy&&(y.copy=!1),void 0===y.copySortSource&&(y.copySortSource=!1),void 0===y.revertOnSpill&&(y.revertOnSpill=!1),void 0===y.removeOnSpill&&(y.removeOnSpill=!1),void 0===y.direction&&(y.direction="vertical"),void 0===y.ignoreInputTextSelection&&(y.ignoreInputTextSelection=!0),void 0===y.mirrorContainer&&(y.mirrorContainer=j.body),M({containers:y.containers,start:function(e){e=E(e);e&&x(e)},end:C,cancel:_,remove:N,destroy:function(){c(!0),O({})},canMove:function(e){return!!E(e)},dragging:!1}));return!0===y.removeOnSpill&&w.on("over",function(e){R.rm(e,"gu-hide")}).on("out",function(e){w.dragging&&R.add(e,"gu-hide")}),c(),w.on("drag",function(e,n){U=!1}).on("dragend",function(e){U=!0}),w;function u(e){return-1!==w.containers.indexOf(e)||y.isContainer(e)}function c(e){e=e?"remove":"add";K(q,e,"mousedown",P),K(q,e,"mouseup",O)}function a(e){K(q,e?"remove":"add","mousemove",F)}function b(e){e=e?"remove":"add";k[e](q,"selectstart",T),k[e](q,"click",T)}function T(e){i&&e.preventDefault()}function P(e){var n,t;o=e.clientX,r=e.clientY,1!==z(e)||e.metaKey||e.ctrlKey||(t=E(n=e.target))&&(i=t,a(),"mousedown"===e.type)&&(Z(n)?n.focus():e.preventDefault())}function F(e){if(i)if(0===z(e))O({});else if(!(void 0!==e.clientX&&Math.abs(e.clientX-o)<=(y.slideFactorX||0)&&void 0!==e.clientY&&Math.abs(e.clientY-r)<=(y.slideFactorY||0))){if(y.ignoreInputTextSelection){var n=ne("clientX",e)||0,t=ne("clientY",e)||0;if(Z(j.elementFromPoint(n,t)))return}var n=i,t=(a(!0),b(),C(),x(n),function(e){e=e.getBoundingClientRect();return{left:e.left+H("scrollLeft","pageXOffset"),top:e.top+H("scrollTop","pageYOffset")}}(s));d=ne("pageX",e)-t.left,m=ne("pageY",e)-t.top,R.add(h||s,"gu-transit"),l||(n=s.getBoundingClientRect(),w.emit("beforeClone",s),(l=s.cloneNode(!0)).style.width=J(n)+"px",l.style.height=Q(n)+"px",R.rm(l,"gu-transit"),R.add(l,"gu-mirror"),y.mirrorContainer.appendChild(l),K(q,"add","mousemove",B),R.add(y.mirrorContainer,"gu-unselectable"),w.emit("cloned",l,s,"mirror")),B(e)}}function E(e){if(!(w.dragging&&l||u(e))){for(var n=e;W(e)&&!1===u(W(e));){if(y.invalid(e,n))return;if(!(e=W(e)))return}var t=W(e);if(t)if(!y.invalid(e,n))if(y.moves(e,t,n,ee(e)))return{item:e,source:t}}}function x(e){var n,t;n=e.item,t=e.source,("boolean"==typeof y.copy?y.copy:y.copy(n,t))&&(w.emit("beforeClone",e.item),h=e.item.cloneNode(!0),w.emit("cloned",h,e.item,"copy")),f=e.source,s=e.item,p=v=ee(e.item),w.dragging=!0,w.emit("drag",s,f)}function C(){var e;w.dragging&&I(e=h||s,W(e))}function S(){a(!(i=!1)),b(!0)}function O(e){var n,t;S(),w.dragging&&(n=h||s,t=ne("clientX",e)||0,e=ne("clientY",e)||0,(t=Y(V(l,t,e),t,e))&&(h&&y.copySortSource||!h||t!==f)?I(n,t):(y.removeOnSpill?N:_)())}function I(e,n){var t=W(e);h&&y.copySortSource&&n===f&&t.removeChild(s),X(n)?w.emit("cancel",e,f,f):w.emit("drop",e,n,f,v),L()}function N(){var e,n;w.dragging&&((n=W(e=h||s))&&n.removeChild(e),w.emit(h?"cancel":"remove",e,n,f),L())}function _(e){var n,t,o;w.dragging&&(e=0<arguments.length?e:y.revertOnSpill,!1===(o=X(t=W(n=h||s)))&&e&&(h?t&&t.removeChild(h):f.insertBefore(n,p)),o||e?w.emit("cancel",n,f,f):w.emit("drop",n,t,f,v),L())}function L(){var e=h||s;S(),l&&(R.rm(y.mirrorContainer,"gu-unselectable"),K(q,"remove","mousemove",B),W(l).removeChild(l),l=null),e&&R.rm(e,"gu-transit"),t&&clearTimeout(t),w.dragging=!1,g&&w.emit("out",e,g,f),w.emit("dragend",e),f=s=h=p=v=t=g=null}function X(e,n){n=void 0!==n?n:l?v:ee(h||s);return e===f&&n===p}function Y(n,t,o){for(var r=n;r&&!function(){if(!1===u(r))return;var e=A(r,n),e=D(r,e,t,o);if(X(r,e))return 1;return y.accepts(s,r,f,e)}();)r=W(r);return r}function B(e){if(l){e.preventDefault();var n=ne("clientX",e)||0,e=ne("clientY",e)||0,t=n-d,o=e-m,r=(l.style.left=t+"px",l.style.top=o+"px",l.getBoundingClientRect()),i=((r.y<o-2||r.y>2+o||r.x<t-2||r.x>2+t)&&(t+=t-r.x,o+=o-r.y,l.style.left=t+"px",l.style.top=o+"px"),h||s),r=V(l,n,e),t=Y(r,n,e),o=null!==t&&t!==g,u=((o||null===t)&&(g&&a("out"),g=t,o)&&a("over"),W(i));if(t===f&&h&&!y.copySortSource)u&&u.removeChild(i);else{var c,r=A(t,r);if(null!==r)c=D(t,r,n,e);else{if(!0!==y.revertOnSpill||h)return void(h&&u&&u.removeChild(i));c=p,t=f}(null===c&&o||c!==i&&c!==ee(i))&&(v=c,t.insertBefore(i,c),w.emit("shadow",i,t,f))}}function a(e){w.emit(e,i,g,f)}}function A(e,n){for(var t=n;t!==e&&W(t)!==e;)t=W(t);return t===q?null:t}function D(r,n,i,u){var c="horizontal"===y.direction;return(n!==r?function(){var e=n.getBoundingClientRect();if(c)return t(i>e.left+J(e)/2);return t(u>e.top+Q(e)/2)}:function(){var e,n,t,o=r.children.length;for(e=0;e<o;e++){if(n=r.children[e],t=n.getBoundingClientRect(),c&&t.left+t.width/2>i)return n;if(!c&&t.top+t.height/2>u)return n}return null})();function t(e){return e?ee(n):n}}}}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./classes":1,"contra/emitter":5,crossvent:6}],3:[function(e,n,t){n.exports=function(e,n){return Array.prototype.slice.call(e,n)}},{}],4:[function(e,n,t){var o=e("ticky");n.exports=function(e,n,t){e&&o(function(){e.apply(t||null,n||[])})}},{ticky:10}],5:[function(e,n,t){var c=e("atoa"),a=e("./debounce");n.exports=function(r,e){var i=e||{},u={};return(r=void 0===r?{}:r).on=function(e,n){return u[e]?u[e].push(n):u[e]=[n],r},r.once=function(e,n){return n._once=!0,r.on(e,n),r},r.off=function(e,n){var t=arguments.length;if(1===t)delete u[e];else if(0===t)u={};else{t=u[e];if(!t)return r;t.splice(t.indexOf(n),1)}return r},r.emit=function(){var e=c(arguments);return r.emitterSnapshot(e.shift()).apply(this,e)},r.emitterSnapshot=function(o){var e=(u[o]||[]).slice(0);return function(){var n=c(arguments),t=this||r;if("error"!==o||!1===i.throws||e.length)return e.forEach(function(e){i.async?a(e,n,t):e.apply(t,n),e._once&&r.off(o,e)}),r;throw 1===n.length?n[0]:n}},r}},{"./debounce":4,atoa:3}],6:[function(t,l,e){!function(r){var o=t("custom-event"),i=t("./eventmap"),u=r.document,e=function(e,n,t,o){return e.addEventListener(n,t,o)},n=function(e,n,t,o){return e.removeEventListener(n,t,o)},c=[];function a(e,n,t){e=function(e,n,t){var o,r;for(o=0;o<c.length;o++)if((r=c[o]).element===e&&r.type===n&&r.fn===t)return o}(e,n,t);if(e)return n=c[e].wrapper,c.splice(e,1),n}r.addEventListener||(e=function(e,n,t){return e.attachEvent("on"+n,function(e,n,t){var o=a(e,n,t)||function(t,o){return function(e){var n=e||r.event;n.target=n.target||n.srcElement,n.preventDefault=n.preventDefault||function(){n.returnValue=!1},n.stopPropagation=n.stopPropagation||function(){n.cancelBubble=!0},n.which=n.which||n.keyCode,o.call(t,n)}}(e,t);return c.push({wrapper:o,element:e,type:n,fn:t}),o}(e,n,t))},n=function(e,n,t){t=a(e,n,t);if(t)return e.detachEvent("on"+n,t)}),l.exports={add:e,remove:n,fabricate:function(e,n,t){t=-1===i.indexOf(n)?new o(n,{detail:t}):function(){var e;u.createEvent?(e=u.createEvent("Event")).initEvent(n,!0,!0):u.createEventObject&&(e=u.createEventObject());return e}();e.dispatchEvent?e.dispatchEvent(t):e.fireEvent("on"+n,t)}}}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./eventmap":7,"custom-event":8}],7:[function(e,r,n){!function(e){var n=[],t="",o=/^on/;for(t in e)o.test(t)&&n.push(t.slice(2));r.exports=n}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],8:[function(e,t,n){!function(e){var n=e.CustomEvent;t.exports=function(){try{var e=new n("cat",{detail:{foo:"bar"}});return"cat"===e.type&&"bar"===e.detail.foo}catch(e){}}()?n:"undefined"!=typeof document&&"function"==typeof document.createEvent?function(e,n){var t=document.createEvent("CustomEvent");return n?t.initCustomEvent(e,n.bubbles,n.cancelable,n.detail):t.initCustomEvent(e,!1,!1,void 0),t}:function(e,n){var t=document.createEventObject();return t.type=e,n?(t.bubbles=Boolean(n.bubbles),t.cancelable=Boolean(n.cancelable),t.detail=n.detail):(t.bubbles=!1,t.cancelable=!1,t.detail=void 0),t}}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],9:[function(e,n,t){var o,r,n=n.exports={};function i(){throw new Error("setTimeout has not been defined")}function u(){throw new Error("clearTimeout has not been defined")}try{o="function"==typeof setTimeout?setTimeout:i}catch(e){o=i}try{r="function"==typeof clearTimeout?clearTimeout:u}catch(e){r=u}function c(n){if(o===setTimeout)return setTimeout(n,0);if((o===i||!o)&&setTimeout)return(o=setTimeout)(n,0);try{return o(n,0)}catch(e){try{return o.call(null,n,0)}catch(e){return o.call(this,n,0)}}}var a,l=[],f=!1,s=-1;function d(){f&&a&&(f=!1,a.length?l=a.concat(l):s=-1,l.length)&&m()}function m(){if(!f){for(var e=c(d),n=(f=!0,l.length);n;){for(a=l,l=[];++s<n;)a&&a[s].run();s=-1,n=l.length}a=null,f=!1,!function(n){if(r===clearTimeout)return clearTimeout(n);if((r===u||!r)&&clearTimeout)return(r=clearTimeout)(n);try{r(n)}catch(e){try{return r.call(null,n)}catch(e){return r.call(this,n)}}}(e)}}function p(e,n){this.fun=e,this.array=n}function v(){}n.nextTick=function(e){var n=new Array(arguments.length-1);if(1<arguments.length)for(var t=1;t<arguments.length;t++)n[t-1]=arguments[t];l.push(new p(e,n)),1!==l.length||f||c(m)},p.prototype.run=function(){this.fun.apply(null,this.array)},n.title="browser",n.browser=!0,n.env={},n.argv=[],n.version="",n.versions={},n.on=v,n.addListener=v,n.once=v,n.off=v,n.removeListener=v,n.removeAllListeners=v,n.emit=v,n.prependListener=v,n.prependOnceListener=v,n.listeners=function(e){return[]},n.binding=function(e){throw new Error("process.binding is not supported")},n.cwd=function(){return"/"},n.chdir=function(e){throw new Error("process.chdir is not supported")},n.umask=function(){return 0}},{}],10:[function(e,t,n){!function(n){var e="function"==typeof n?function(e){n(e)}:function(e){setTimeout(e,0)};t.exports=e}.call(this,e("timers").setImmediate)},{timers:11}],11:[function(a,e,l){!function(e,n){var o=a("process/browser.js").nextTick,t=Function.prototype.apply,r=Array.prototype.slice,i={},u=0;function c(e,n){this._id=e,this._clearFn=n}l.setTimeout=function(){return new c(t.call(setTimeout,window,arguments),clearTimeout)},l.setInterval=function(){return new c(t.call(setInterval,window,arguments),clearInterval)},l.clearTimeout=l.clearInterval=function(e){e.close()},c.prototype.unref=c.prototype.ref=function(){},c.prototype.close=function(){this._clearFn.call(window,this._id)},l.enroll=function(e,n){clearTimeout(e._idleTimeoutId),e._idleTimeout=n},l.unenroll=function(e){clearTimeout(e._idleTimeoutId),e._idleTimeout=-1},l._unrefActive=l.active=function(e){clearTimeout(e._idleTimeoutId);var n=e._idleTimeout;0<=n&&(e._idleTimeoutId=setTimeout(function(){e._onTimeout&&e._onTimeout()},n))},l.setImmediate="function"==typeof e?e:function(e){var n=u++,t=!(arguments.length<2)&&r.call(arguments,1);return i[n]=!0,o(function(){i[n]&&(t?e.apply(null,t):e.call(null),l.clearImmediate(n))}),n},l.clearImmediate="function"==typeof n?n:function(e){delete i[e]}}.call(this,a("timers").setImmediate,a("timers").clearImmediate)},{"process/browser.js":9,timers:11}]},{},[2])(2)});
\ No newline at end of file
diff --git a/4X/Min/TinySlider.js b/4X/Min/TinySlider.js
index ad6d65cb..0c2fe00d 100644
--- a/4X/Min/TinySlider.js
+++ b/4X/Min/TinySlider.js
@@ -4,4 +4,4 @@ Author: William Lin
 License: MIT (https://opensource.org/licenses/MIT)
 Includes modifications by Bryan Garaventa to improve screen reader accessibility for use within the Apex 4X ARIA Carousel module. Changes are prefaced with the comment "4X MOD" within the source code.
 */
-"use strict";var win$1=window,raf=win$1.requestAnimationFrame||win$1.webkitRequestAnimationFrame||win$1.mozRequestAnimationFrame||win$1.msRequestAnimationFrame||function(e){return setTimeout(e,16)},win=window,caf=win.cancelAnimationFrame||win.mozCancelAnimationFrame||function(e){clearTimeout(e)};function extend(){for(var e,t,n,a=arguments[0]||{},r=1,o=arguments.length;r<o;r++)if(null!==(e=arguments[r]))for(t in e)a!==(n=e[t])&&void 0!==n&&(a[t]=n);return a}function checkStorageValue(e){return 0<=["true","false"].indexOf(e)?JSON.parse(e):e}function setLocalStorage(e,t,n,a){if(a)try{e.setItem(t,n)}catch(e){}return n}function getSlideId(){var e=window.tnsId;return window.tnsId=e?e+1:1,"tns"+window.tnsId}function getBody(){var e=document,t=e.body;return t||((t=e.createElement("body")).fake=!0),t}var docElement=document.documentElement;function setFakeBody(e){var t="";return e.fake&&(t=docElement.style.overflow,e.style.background="",e.style.overflow=docElement.style.overflow="hidden",docElement.appendChild(e)),t}function resetFakeBody(e,t){e.fake&&(e.remove(),docElement.style.overflow=t,docElement.offsetHeight)}function calc(){var e=document,t=getBody(),n=setFakeBody(t),a=e.createElement("div"),r=!1;t.appendChild(a);try{for(var o,i="(10px * 10)",s=["calc"+i,"-moz-calc"+i,"-webkit-calc"+i],l=0;l<3;l++)if(o=s[l],a.style.width=o,100===a.offsetWidth){r=o.replace(i,"");break}}catch(e){}return t.fake?resetFakeBody(t,n):a.remove(),r}function percentageLayout(){var e=document,t=getBody(),n=setFakeBody(t),a=e.createElement("div"),e=e.createElement("div"),r="";a.className="tns-t-subp2",e.className="tns-t-ct";for(var o=0;o<70;o++)r+="<div></div>";return e.innerHTML=r,a.appendChild(e),t.appendChild(a),e=Math.abs(a.getBoundingClientRect().left-e.children[67].getBoundingClientRect().left)<2,t.fake?resetFakeBody(t,n):a.remove(),e}function mediaquerySupport(){var e,t,n,a,r,o;return!(!window.matchMedia&&!window.msMatchMedia)||(e=document,n=setFakeBody(t=getBody()),a=e.createElement("div"),r="@media all and (min-width:1px){.tns-mq-test{position:absolute}}",(o=e.createElement("style")).type="text/css",a.className="tns-mq-test",t.appendChild(o),t.appendChild(a),o.styleSheet?o.styleSheet.cssText=r:o.appendChild(e.createTextNode(r)),o=(window.getComputedStyle?window.getComputedStyle(a):a.currentStyle).position,t.fake?resetFakeBody(t,n):a.remove(),"absolute"===o)}function createStyleSheet(e,t){var n=document.createElement("style");return e&&n.setAttribute("media",e),t&&n.setAttribute("nonce",t),document.querySelector("head").appendChild(n),n.sheet||n.styleSheet}function addCSSRule(e,t,n,a){"insertRule"in e?e.insertRule(t+"{"+n+"}",a):e.addRule(t,n,a)}function removeCSSRule(e,t){"deleteRule"in e?e.deleteRule(t):e.removeRule(t)}function getCssRulesLength(e){return("insertRule"in e?e.cssRules:e.rules).length}function toDegree(e,t){return Math.atan2(e,t)*(180/Math.PI)}function getTouchDirection(e,t){var n=!1,e=Math.abs(90-Math.abs(e));return 90-t<=e?n="horizontal":e<=t&&(n="vertical"),n}function forEach(e,t,n){for(var a=0,r=e.length;a<r;a++)t.call(n,e[a],a)}var classListSupport="classList"in document.createElement("_"),hasClass=classListSupport?function(e,t){return e.classList.contains(t)}:function(e,t){return 0<=e.className.indexOf(t)},addClass=classListSupport?function(e,t){hasClass(e,t)||e.classList.add(t)}:function(e,t){hasClass(e,t)||(e.className+=" "+t)},removeClass=classListSupport?function(e,t){hasClass(e,t)&&e.classList.remove(t)}:function(e,t){hasClass(e,t)&&(e.className=e.className.replace(t,""))};function hasAttr(e,t){return e.hasAttribute(t)}function getAttr(e,t){return e.getAttribute(t)}function isNodeList(e){return void 0!==e.item}function setAttrs(e,t){if(e=isNodeList(e)||e instanceof Array?e:[e],"[object Object]"===Object.prototype.toString.call(t))for(var n=e.length;n--;)for(var a in t)e[n].setAttribute(a,t[a])}function removeAttrs(e,t){e=isNodeList(e)||e instanceof Array?e:[e];for(var n=(t=t instanceof Array?t:[t]).length,a=e.length;a--;)for(var r=n;r--;)e[a].removeAttribute(t[r])}function arrayFromNodeList(e){for(var t=[],n=0,a=e.length;n<a;n++)t.push(e[n]);return t}function hideElement(e,t){"none"!==e.style.display&&(e.style.display="none")}function showElement(e,t){"none"===e.style.display&&(e.style.display="")}function isVisible(e){return"none"!==window.getComputedStyle(e).display}function whichProperty(t){"string"==typeof t&&(n=[t],a=t.charAt(0).toUpperCase()+t.substr(1),["Webkit","Moz","ms","O"].forEach(function(e){"ms"===e&&"transform"!==t||n.push(e+a)}),t=n);var n,a,e=document.createElement("fakeelement");t.length;for(var r=0;r<t.length;r++){var o=t[r];if(void 0!==e.style[o])return o}return!1}function has3DTransforms(e){var t,n,a,r;return!!e&&!!window.getComputedStyle&&(a=document,n=setFakeBody(t=getBody()),a=a.createElement("p"),r=9<e.length?"-"+e.slice(0,-9).toLowerCase()+"-":"",r+="transform",t.insertBefore(a,null),a.style[e]="translate3d(1px,1px,1px)",e=window.getComputedStyle(a).getPropertyValue(r),t.fake?resetFakeBody(t,n):a.remove(),void 0!==e)&&0<e.length&&"none"!==e}function getEndProperty(e,t){var n=!1;return/^Webkit/.test(e)?n="webkit"+t+"End":/^O/.test(e)?n="o"+t+"End":e&&(n=t.toLowerCase()+"end"),n}var supportsPassive=!1;try{var opts=Object.defineProperty({},"passive",{get:function(){supportsPassive=!0}});window.addEventListener("test",null,opts)}catch(e){}var passiveOption=!!supportsPassive&&{passive:!0};function addEvents(e,t,n){for(var a in t){var r=0<=["touchstart","touchmove"].indexOf(a)&&!n&&passiveOption;e.addEventListener(a,t[a],r)}}function removeEvents(e,t){for(var n in t){var a=0<=["touchstart","touchmove"].indexOf(n)&&passiveOption;e.removeEventListener(n,t[n],a)}}function Events(){return{topics:{},on:function(e,t){this.topics[e]=this.topics[e]||[],this.topics[e].push(t)},off:function(e,t){if(this.topics[e])for(var n=0;n<this.topics[e].length;n++)if(this.topics[e][n]===t){this.topics[e].splice(n,1);break}},emit:function(t,n){n.type=t,this.topics[t]&&this.topics[t].forEach(function(e){e(n,t)})}}}function jsTransform(t,n,a,r,e,o,i){var s=Math.min(o,10),l=0<=e.indexOf("%")?"%":"px",e=e.replace(l,""),u=Number(t.style[n].replace(a,"").replace(r,"").replace(l,"")),c=(e-u)/o*s;setTimeout(function e(){o-=s;u+=c;t.style[n]=a+u+l+r;0<o?setTimeout(e,s):i()},s)}Object.keys||(Object.keys=function(e){var t,n=[];for(t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.push(t);return n}),"remove"in Element.prototype||(Element.prototype.remove=function(){this.parentNode&&this.parentNode.removeChild(this)});var tns=function(D){D=extend({container:".slider",mode:"carousel",axis:"horizontal",items:1,gutter:0,edgePadding:0,fixedWidth:!1,autoWidth:!1,viewportMax:!1,slideBy:1,center:!1,controls:!0,controlsPosition:"top",controlsText:["prev","next"],controlsContainer:!1,prevButton:!1,nextButton:!1,nav:!0,navPosition:"top",navContainer:!1,navAsThumbnails:!1,arrowKeys:!1,speed:300,autoplay:!1,autoplayPosition:"top",autoplayTimeout:5e3,autoplayDirection:"forward",autoplayText:["start","stop"],autoplayHoverPause:!0,autoplayButton:!1,autoplayButtonOutput:!0,autoplayResetOnVisibility:!0,animateIn:"tns-fadeIn",animateOut:"tns-fadeOut",animateNormal:"tns-normal",animateDelay:!1,loop:!0,rewind:!1,autoHeight:!1,responsive:!1,lazyload:!1,lazyloadSelector:".tns-lazy-img",touch:!0,mouseDrag:!1,swipeAngle:15,nested:!1,preventActionWhenRunning:!1,preventScrollOnTouch:!1,freezable:!0,onInit:!1,useLocalStorage:!0,nonce:!1},D||{});var ce=document,a=window,r={ENTER:13,SPACE:32,LEFT:37,RIGHT:39},t={},n=D.useLocalStorage;if(n){var o=navigator.userAgent,l=new Date;try{(t=a.localStorage)?(t.setItem(l,l),n=t.getItem(l)==l,t.removeItem(l)):n=!1,n||(t={})}catch(e){n=!1}n&&(t.tnsApp&&t.tnsApp!==o&&["tC","tPL","tMQ","tTf","t3D","tTDu","tTDe","tADu","tADe","tTE","tAE"].forEach(function(e){t.removeItem(e)}),localStorage.tnsApp=o)}var u=t.tC?checkStorageValue(t.tC):setLocalStorage(t,"tC",calc(),n),l=t.tPL?checkStorageValue(t.tPL):setLocalStorage(t,"tPL",percentageLayout(),n),de=t.tMQ?checkStorageValue(t.tMQ):setLocalStorage(t,"tMQ",mediaquerySupport(),n),c=t.tTf?checkStorageValue(t.tTf):setLocalStorage(t,"tTf",whichProperty("transform"),n),o=t.t3D?checkStorageValue(t.t3D):setLocalStorage(t,"t3D",has3DTransforms(c),n),s=t.tTDu?checkStorageValue(t.tTDu):setLocalStorage(t,"tTDu",whichProperty("transitionDuration"),n),d=t.tTDe?checkStorageValue(t.tTDe):setLocalStorage(t,"tTDe",whichProperty("transitionDelay"),n),f=t.tADu?checkStorageValue(t.tADu):setLocalStorage(t,"tADu",whichProperty("animationDuration"),n),v=t.tADe?checkStorageValue(t.tADe):setLocalStorage(t,"tADe",whichProperty("animationDelay"),n),h=t.tTE?checkStorageValue(t.tTE):setLocalStorage(t,"tTE",getEndProperty(s,"Transition"),n),m=t.tAE?checkStorageValue(t.tAE):setLocalStorage(t,"tAE",getEndProperty(f,"Animation"),n),p=a.console&&"function"==typeof a.console.warn,g=["container","controlsContainer","prevButton","nextButton","navContainer","autoplayButton"],y={};if(g.forEach(function(e){var t,n;"string"==typeof D[e]&&(t=D[e],n=ce.querySelector(t),y[e]=t,n&&n.nodeName?D[e]=n:p&&console.warn("Can't find",D[e]))}),!(D.container.children.length<1)){var fe,ve,E,he,P=D.responsive,me=D.nested,O="carousel"===D.mode;if(P){0 in P&&(D=extend(D,P[0]),delete P[0]);var C,x={};for(C in P){var b=P[C];x[C]="number"==typeof b?{items:b}:b}P=x,x=null}O||!function e(t){for(var n in t)O||("slideBy"===n&&(t[n]="page"),"edgePadding"===n&&(t[n]=!1),"autoHeight"===n&&(t[n]=!1)),"responsive"===n&&e(t[n])}(D),O||(D.axis="horizontal",D.slideBy="page",D.edgePadding=!1,fe=D.animateIn,ve=D.animateOut,E=D.animateDelay,he=D.animateNormal);var w,pe,i,S,A,M,H,L,I,F,T,B,N,k,z,R,ge,ye,Ee,Ce,xe,be,we,Se,Ae,W,Me,Le,Te,V,Be,Ne,ke,Re,De,Pe,Oe,He,Ie,Fe,q="horizontal"===D.axis,j=ce.createElement("div"),ze=ce.createElement("div"),$=D.container,We=$.parentNode,Ve=$.outerHTML,G=$.children,Q=G.length,qe=xn(),je=!1,X=($A.loop(G,function(e,t){$A.setAttr(t,{role:"region","aria-roledescription":""+(e+1),"aria-label":"Slide"})},"array"),P&&Wn(),O&&($.className+=" tns-vpfix"),D.autoWidth),Y=le("fixedWidth"),K=le("edgePadding"),J=le("gutter"),U=wn(),_=le("center"),Z=X?1:Math.floor(le("items")),$e=le("slideBy"),Ge=D.viewportMax||D.fixedWidthViewportWidth,Qe=le("arrowKeys"),Xe=le("speed"),Ye=D.rewind,ee=!Ye&&D.loop,Ke=le("autoHeight"),Je=le("controls"),Ue=le("controlsText"),_e=le("nav"),Ze=le("touch"),et=le("mouseDrag"),te=le("autoplay"),tt=le("autoplayTimeout"),nt=le("autoplayText"),at=le("autoplayHoverPause"),rt=le("autoplayResetOnVisibility"),ne=createStyleSheet(null,le("nonce")),ot=D.lazyload,it=D.lazyloadSelector,st=[],ae=ee?(n=function(){{if(X||Y&&!Ge)return Q-1;var e=Y?"fixedWidth":"items",t=[];if((Y||D[e]<Q)&&t.push(D[e]),P)for(var n in P){n=P[n][e];n&&(Y||n<Q)&&t.push(n)}return t.length||t.push(0),Math.ceil(Y?Ge/Math.min.apply(null,t):Math.max.apply(null,t))}}(),S=O?Math.ceil((5*n-Q)/2):4*n-Q,S=Math.max(n,S),Sn("edgePadding")?S+1:S):0,re=O?Q+2*ae:Q+ae,lt=!(!Y&&!X||ee),ut=Y?fa():null,ct=!O||!ee,dt=q?"left":"top",ft="",vt="",ht=Y?function(){return _&&!ee?Q-1:Math.ceil(-ut/(Y+J))}:X?function(){for(var e=0;e<re;e++)if(i[e]>=-ut)return e}:function(){return _&&O&&!ee?Q-1:ee||O?Math.max(0,re-Math.ceil(Z)):re-1},oe=yn(le("startIndex")),mt=oe,pt=(gn(),0),gt=X?null:ht(),yt=D.preventActionWhenRunning,Et=D.swipeAngle,Ct=!Et||"?",xt=!1,bt=D.onInit,ie=new Events,wt=" tns-slider tns-"+D.mode,se=$.id||getSlideId(),St=le("disable"),At=!1,Mt=D.freezable,Lt=!(!Mt||X)&&zn(),Tt=!1,Bt={click:xa,keydown:function(e){e=Ba(e);var t=[r.LEFT,r.RIGHT].indexOf(e.keyCode);0<=t&&(0===t?I.disabled||xa(e,-1):F.disabled||xa(e,1))}},Nt={click:function(e){if(xt){if(yt)return;Ea()}var t=Na(e=Ba(e));for(;t!==z&&!hasAttr(t,"data-nav");)t=t.parentNode;{var n,a;hasAttr(t,"data-nav")&&(n=Ce=Number(getAttr(t,"data-nav")),a=Y||X?n*Q/ye:n*Z,Ca(zt?n:Math.min(Math.ceil(a),Q-1),e),xe===n)&&(V&&Ma(),Ce=-1)}},keydown:function(e){e=Ba(e);var t,n=ce.activeElement;hasAttr(n,"data-nav")&&(t=[r.LEFT,r.RIGHT,r.ENTER,r.SPACE].indexOf(e.keyCode),n=Number(getAttr(n,"data-nav")),0<=t)&&(0===t?0<n&&Ta(ge[n-1]):1===t?n<ye-1&&Ta(ge[n+1]):Ca(Ce=n,e))}},kt={mouseenter:function(){V&&(wa(),Be=!0)},mouseleave:function(){Be&&(ba(),Be=!1)}},Rt={focusin:function(){V&&(Ma(),ke=!0)}},Dt={visibilitychange:function(){ce.hidden?V&&(wa(),Re=!0):Re&&(ba(),Re=!1)}},Pt={keydown:function(e){e=Ba(e);var t=[r.LEFT,r.RIGHT].indexOf(e.keyCode);0<=t&&xa(e,0===t?-1:1)}},Ot={touchstart:Pa,touchmove:Oa,touchend:Ha,touchcancel:Ha},Ht={mousedown:Pa,mousemove:Oa,mouseup:Ha,mouseleave:Ha},It=Sn("controls"),Ft=Sn("nav"),zt=!!X||D.navAsThumbnails,Wt=Sn("autoplay"),n=Sn("touch"),Vt=Sn("mouseDrag"),qt="tns-slide-active",jt="tns-slide-cloned",$t="tns-complete",Gt={load:function(e){Kn(Na(e))},error:function(e){!function(e){addClass(e,"failed"),Jn(e)}(Na(e))}},Qt="force"===D.preventScrollOnTouch;if(It&&(H=D.controlsContainer,L=D.controlsContainer?D.controlsContainer.outerHTML:"",I=D.prevButton,F=D.nextButton,T=D.prevButton?D.prevButton.outerHTML:"",B=D.nextButton?D.nextButton.outerHTML:""),Ft&&(z=D.navContainer,R=D.navContainer?D.navContainer.outerHTML:"",ye=X?Q:Fa(),Ee=0,Ce=-1,xe=Cn(),be=xe,we="tns-nav-active",Se="Page "),Wt&&(Ae="forward"===D.autoplayDirection?1:-1,W=D.autoplayButton,Me=D.autoplayButton?D.autoplayButton.outerHTML:"",Le=["<span class='tns-visually-hidden'>"," animation</span>"]),(n||Vt)&&(De={},He=!(Pe={}),Fe=q?function(e,t){return e.x-t.x}:function(e,t){return e.y-t.y}),X||pn(St||Lt),c&&(dt=c,ft="translate",vt=o?(ft+=q?"3d(":"3d(0px, ",q?", 0px, 0px)":", 0px)"):(ft+=q?"X(":"Y(",")")),O&&($.className=$.className.replace("tns-vpfix","")),Sn("gutter"),j.className="tns-outer",ze.className="tns-inner",j.id=se+"-ow",ze.id=se+"-iw",""===$.id&&($.id=se),wt=wt+(l||X?" tns-subpixel":" tns-no-subpixel")+(u?" tns-calc":" tns-no-calc"),X&&(wt+=" tns-autowidth"),wt+=" tns-"+D.axis,$.className+=wt,(O?((w=ce.createElement("div")).id=se+"-mw",w.className="tns-ovh",j.appendChild(w),w):j).appendChild(ze),Ke&&((w||ze).className+=" tns-ah"),We.insertBefore(j,$),ze.appendChild($),forEach(G,function(e,t){addClass(e,"tns-item"),e.id||(e.id=se+"-item"+t),!O&&he&&addClass(e,he),setAttrs(e,{"aria-hidden":"true",tabindex:"-1"})}),ae){for(var Xt=ce.createDocumentFragment(),Yt=ce.createDocumentFragment(),Kt=ae;Kt--;){var Jt=Kt%Q,Ut=G[Jt].cloneNode(!0);addClass(Ut,jt),removeAttrs(Ut,"id"),Yt.insertBefore(Ut,Yt.firstChild),O&&(Ut=G[Q-1-Jt].cloneNode(!0),addClass(Ut,jt),removeAttrs(Ut,"id"),Xt.appendChild(Ut))}$.insertBefore(Xt,$.firstChild),$.appendChild(Yt),G=$.children}if(!O)for(var _t=oe,Zt=oe+Math.min(Q,Z);_t<Zt;_t++){var en=G[_t];en.style.left=100*(_t-oe)/Z+"%",addClass(en,fe),removeClass(en,he)}if(q&&(l||X?(addCSSRule(ne,"#"+se+" > .tns-item","font-size:"+a.getComputedStyle(G[0]).fontSize+";",getCssRulesLength(ne)),addCSSRule(ne,"#"+se,"font-size:0;",getCssRulesLength(ne))):O&&forEach(G,function(e,t){e.style.marginLeft=(e=t,u?u+"("+100*e+"% / "+re+")":100*e/re+"%")})),de?(s&&(e=w&&D.autoHeight?Nn(D.speed):"",addCSSRule(ne,"#"+se+"-mw",e,getCssRulesLength(ne))),e=An(D.edgePadding,D.gutter,D.fixedWidth,D.speed,D.autoHeight),addCSSRule(ne,"#"+se+"-iw",e,getCssRulesLength(ne)),O&&(e=q&&!X?"width:"+Mn(D.fixedWidth,D.gutter,D.items)+";":"",s&&(e+=Nn(Xe)),addCSSRule(ne,"#"+se,e,getCssRulesLength(ne))),e=q&&!X?Ln(D.fixedWidth,D.gutter,D.items):"",D.gutter&&(e+=Tn(D.gutter)),O||(s&&(e+=Nn(Xe)),f&&(e+=kn(Xe)))):(O&&Ke&&(w.style[s]=Xe/1e3+"s"),ze.style.cssText=An(K,J,Y,Ke),O&&q&&!X&&($.style.width=Mn(Y,J,Z)),e=q&&!X?Ln(Y,J,Z):"",J&&(e+=Tn(J))),e&&addCSSRule(ne,"#"+se+" > .tns-item",e,getCssRulesLength(ne)),P&&de)for(var tn in P){tn=parseInt(tn);var nn=P[tn],e="",an="",rn="",on="",sn="",ln=X?null:le("items",tn),un=le("fixedWidth",tn),cn=le("speed",tn),dn=le("edgePadding",tn),fn=le("autoHeight",tn),vn=le("gutter",tn);s&&w&&le("autoHeight",tn)&&"speed"in nn&&(an="#"+se+"-mw{"+Nn(cn)+"}"),("edgePadding"in nn||"gutter"in nn)&&(rn="#"+se+"-iw{"+An(dn,vn,un,cn,fn)+"}"),O&&q&&!X&&("fixedWidth"in nn||"items"in nn||Y&&"gutter"in nn)&&(on="width:"+Mn(un,vn,ln)+";"),s&&"speed"in nn&&(on+=Nn(cn)),on=on&&"#"+se+"{"+on+"}",("fixedWidth"in nn||Y&&"gutter"in nn||!O&&"items"in nn)&&(sn+=Ln(un,vn,ln)),"gutter"in nn&&(sn+=Tn(vn)),!O&&"speed"in nn&&(s&&(sn+=Nn(cn)),f)&&(sn+=kn(cn)),(e=an+rn+on+(sn=sn&&"#"+se+" > .tns-item{"+sn+"}"))&&ne.insertRule("@media (min-width: "+tn/16+"em) {"+e+"}",ne.cssRules.length)}Rn();var hn=ee?O?function(){var e=pt,t=gt;e+=$e,t-=$e,K?(e+=1,--t):Y&&(U+J)%(Y+J)&&--t,ae&&(t<oe?oe-=Q:oe<e&&(oe+=Q))}:function(){if(gt<oe)for(;pt+Q<=oe;)oe-=Q;else if(oe<pt)for(;oe<=gt-Q;)oe+=Q}:function(){oe=Math.max(pt,Math.min(gt,oe))},mn=O?function(){ca($,""),s||!Xe?(ma(),Xe&&isVisible($)||Ea()):jsTransform($,dt,ft,vt,va(),Xe,Ea),q||Ia()}:function(){st=[];var e={};e[h]=e[m]=Ea,removeEvents(G[mt],e),addEvents(G[oe],e),pa(mt,fe,ve,!0),pa(oe,he,fe),h&&m&&Xe&&isVisible($)||Ea()};return{version:"2.9.4",getInfo:ue,events:ie,goTo:Ca,play:function(){te&&!V&&(Aa(),Ne=!1)},pause:function(){V&&(Ma(),Ne=!0)},isOn:je,updateSliderHeight:na,refresh:Rn,destroy:function(){ne.disabled=!0,ne.ownerNode&&ne.ownerNode.remove(),removeEvents(a,{resize:In}),Qe&&removeEvents(ce,Pt),H&&removeEvents(H,Bt),z&&removeEvents(z,Nt),removeEvents(j.parentNode,kt),removeEvents($,Dt),W&&removeEvents(W,{click:La}),te&&clearInterval(Te),O&&h&&((e={})[h]=Ea,removeEvents($,e)),Ze&&removeEvents($,Ot),et&&removeEvents($,Ht);var e,t,o=[Ve,L,T,B,R,Me];for(t in g.forEach(function(e,t){var n,a,r="container"===e?j:D[e];"object"==typeof r&&r&&(n=r.previousElementSibling||!1,a=r.parentNode,r.outerHTML=o[t],D[e]=n?n.nextElementSibling:a.firstElementChild)}),g=fe=ve=E=he=q=j=ze=$=We=Ve=G=Q=pe=qe=X=Y=K=J=U=Z=$e=Ge=Qe=Xe=Ye=ee=Ke=ne=ot=i=st=ae=re=lt=ut=ct=dt=ft=vt=ht=oe=mt=pt=gt=Et=Ct=xt=bt=ie=wt=se=St=At=Mt=Lt=Tt=Bt=Nt=kt=Dt=Pt=Ot=Ht=It=Ft=zt=Wt=Vt=qt=$t=Gt=A=Je=Ue=H=L=I=F=N=k=_e=z=R=ge=ye=Ee=Ce=xe=be=we=Se=te=tt=Ae=nt=at=W=Me=rt=Le=Te=V=Be=Ne=ke=Re=De=Pe=Oe=He=Ie=Fe=Ze=et=null,this)"rebuild"!==t&&(this[t]=null);je=!1},rebuild:function(){return tns(extend(D,y))}}}function pn(e){e&&(Je=_e=Ze=et=Qe=te=at=rt=!1)}function gn(){for(var e=O?oe-ae:oe;e<0;)e+=Q;return e%Q+1}function yn(e){return e=e?Math.max(0,Math.min(ee?Q-1:Q-Z,e)):0,O?e+ae:e}function En(e){for(null==e&&(e=oe),O&&(e-=ae);e<0;)e+=Q;return Math.floor(e%Q)}function Cn(){var e=En(),e=zt?e:Y||X?Math.ceil((e+1)*ye/Q-1):Math.floor(e/Z);return e=!ee&&O&&oe===gt?ye-1:e}function xn(){return a.innerWidth||ce.documentElement.clientWidth||ce.body.clientWidth}function bn(e){return"top"===e?"afterbegin":"beforeend"}function wn(){var e=K?2*K-J:0;return function e(t){var n,a;if(null!=t)return n=ce.createElement("div"),t.appendChild(n),a=(a=n.getBoundingClientRect()).right-a.left,n.remove(),a||e(t.parentNode)}(We)-e}function Sn(e){if(D[e])return!0;if(P)for(var t in P)if(P[t][e])return!0;return!1}function le(e,t){if(null==t&&(t=qe),"items"===e&&Y)return Math.floor((U+J)/(Y+J))||1;var n=D[e];if(P)for(var a in P)t>=parseInt(a)&&e in P[a]&&(n=P[a][e]);return"slideBy"===e&&"page"===n&&(n=le("items")),n=O||"slideBy"!==e&&"items"!==e?n:Math.floor(n)}function An(e,t,n,a,r){var o,i="";return void 0!==e?(o=e,t&&(o-=t),i=q?"margin: 0 "+o+"px 0 "+e+"px;":"margin: "+e+"px 0 "+o+"px 0;"):t&&!n&&(e="-"+t+"px",i="margin: 0 "+(q?e+" 0 0":"0 "+e+" 0")+";"),!O&&r&&s&&a&&(i+=Nn(a)),i}function Mn(e,t,n){return e?(e+t)*re+"px":u?u+"("+100*re+"% / "+n+")":100*re/n+"%"}function Ln(e,t,n){return t="width:"+(t=e?e+t+"px":(O||(n=Math.floor(n)),e=O?re:n,u?u+"(100% / "+e+")":100/e+"%")),"inner"!==me?t+";":t+" !important;"}function Tn(e){return!1!==e?(q?"padding-":"margin-")+(q?"right":"bottom")+": "+e+"px;":""}function Bn(e,t){e=e.substring(0,e.length-t).toLowerCase();return e=e&&"-"+e+"-"}function Nn(e){return Bn(s,18)+"transition-duration:"+e/1e3+"s;"}function kn(e){return Bn(f,17)+"animation-duration:"+e/1e3+"s;"}function Rn(){var e;Sn("autoHeight")||X||!q?(forEach(e=$.querySelectorAll("img"),function(e){var t=e.src;ot||(t&&t.indexOf("data:image")<0?(e.src="",addEvents(e,Gt),addClass(e,"loading"),e.src=t):Kn(e))}),raf(function(){Zn(arrayFromNodeList(e),function(){A=!0})}),Sn("autoHeight")&&(e=Un(oe,Math.min(oe+Z-1,re-1))),ot?Dn():raf(function(){Zn(arrayFromNodeList(e),Dn)})):(O&&ha(),On(),Hn())}function Dn(){var a;(X&&1<Q?(a=ee?oe:Q-1,function e(){var t=G[a].getBoundingClientRect().left,n=G[a-1].getBoundingClientRect().right;Math.abs(t-n)<=1?Pn():setTimeout(function(){e()},16)}):Pn)()}function Pn(){q&&!X||(aa(),X?(ut=fa(),Mt&&(Lt=zn()),gt=ht(),pn(St||Lt)):Ia()),O&&ha(),On(),Hn()}function On(){var e,t;if(ra(),j.parentNode.setAttribute("role","region"),j.parentNode.setAttribute("aria-label","Carousel"),j.insertAdjacentHTML("afterbegin",'<div aria-hidden="true" style="position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; white-space: nowrap;" class="tns-liveregion tns-visually-hidden">Slide <span class="current">'+Qn()+"</span> of "+Q+"</div>"),M=j.querySelector(".tns-liveregion .current"),Wt&&(e=te?"stop":"start",W?setAttrs(W,{"data-action":e}):D.autoplayButtonOutput&&(j.insertAdjacentHTML(bn(D.autoplayPosition),'<button type="button" data-action="'+e+'">'+Le[0]+e+Le[1]+nt[0]+"</button>"),W=j.querySelector("[data-action]")),W&&addEvents(W,{click:La}),te)&&(Aa(),at&&(addEvents(j.parentNode,Rt),addEvents(j.parentNode,kt)),rt)&&addEvents($,Dt),Ft){if(z)setAttrs(z,{role:"toolbar","aria-label":"Pagination"}),forEach(ge=z.children,function(e,t){setAttrs(e,{"data-nav":t,tabindex:"-1","aria-label":Se+(t+1),"aria-controls":se})});else{for(var n="",a=zt?"":'style="display:none"',r=0;r<Q;r++)n+='<button type="button" data-nav="'+r+'" tabindex="-1" aria-controls="'+se+'" '+a+' aria-label="'+Se+(r+1)+'"></button>';j.insertAdjacentHTML(bn(D.navPosition),n='<div class="tns-nav" role="toolbar" aria-label="Pagination">'+n+"</div>"),z=j.querySelector(".tns-nav"),ge=z.children}za(),s&&(e=s.substring(0,s.length-18).toLowerCase(),t="transition: all "+Xe/1e3+"s",addCSSRule(ne,"[aria-controls^="+se+"-item]",t=e?"-"+e+"-"+t:t,getCssRulesLength(ne))),setAttrs(ge[xe],{"aria-label":Se+(xe+1),"aria-current":"true"}),removeAttrs(ge[xe],"tabindex"),addClass(ge[xe],we),addEvents(z,Nt)}It&&(H||I&&F||(j.insertAdjacentHTML(bn(D.controlsPosition),'<div class="tns-controls"><button type="button" data-controls="prev" aria-controls="'+se+'">'+Ue[0]+'</button><button type="button" data-controls="next" aria-controls="'+se+'">'+Ue[1]+"</button></div>"),H=j.querySelector(".tns-controls")),I&&F||(I=H.children[0],F=H.children[1]),(D.controlsContainer||D.prevButton&&D.nextButton)&&setAttrs([I,F],{"aria-controls":se}),(D.controlsContainer||D.prevButton&&D.nextButton)&&(setAttrs(I,{"data-controls":"prev"}),setAttrs(F,{"data-controls":"next"})),N=ia(I),k=ia(F),ua(),H?addEvents(H,Bt):(addEvents(I,Bt),addEvents(F,Bt))),Vn()}function Hn(){var e;O&&h&&((e={})[h]=Ea,addEvents($,e)),Ze&&addEvents($,Ot,D.preventScrollOnTouch),et&&addEvents($,Ht),Qe&&addEvents(ce,Pt),"inner"===me?ie.on("outerResized",function(){Fn(),ie.emit("innerLoaded",ue())}):(P||Y||X||Ke||!q)&&addEvents(a,{resize:In}),Ke&&("outer"===me?ie.on("innerLoaded",_n):St||_n()),Yn(),St?$n():Lt&&jn(),ie.on("indexChanged",ea),"inner"===me&&ie.emit("innerLoaded",ue()),"function"==typeof bt&&bt(ue()),je=!0}function In(e){raf(function(){Fn(Ba(e))})}function Fn(e){if(je){"outer"===me&&ie.emit("outerResized",ue(e)),qe=xn();var t,n=pe,a=!1;P&&(Wn(),t=n!==pe)&&ie.emit("newBreakpointStart",ue(e));var r,o,i,s,l,u,c,d,n=Z,f=St,v=Lt,h=Qe,m=Je,p=_e,g=Ze,y=et,E=te,C=at,x=rt,b=oe;if(t&&(o=Y,i=Ke,s=Ue,l=_,u=nt,de||(c=J,d=K)),Qe=le("arrowKeys"),Je=le("controls"),_e=le("nav"),Ze=le("touch"),_=le("center"),et=le("mouseDrag"),te=le("autoplay"),at=le("autoplayHoverPause"),rt=le("autoplayResetOnVisibility"),t&&(St=le("disable"),Y=le("fixedWidth"),Xe=le("speed"),Ke=le("autoHeight"),Ue=le("controlsText"),nt=le("autoplayText"),tt=le("autoplayTimeout"),de||(K=le("edgePadding"),J=le("gutter"))),pn(St),U=wn(),q&&!X||St||(aa(),q)||(Ia(),a=!0),(Y||X)&&(ut=fa(),gt=ht()),(t||Y)&&(Z=le("items"),$e=le("slideBy"),r=Z!==n)&&(Y||X||(gt=ht()),hn()),t&&St!==f)if(St)$n();else if(At){if(ne.disabled=!1,$.className+=wt,ha(),ee)for(var w=ae;w--;)O&&showElement(G[w]),showElement(G[re-w-1]);if(!O)for(var S=oe,A=oe+Q;S<A;S++){var M=G[S],L=S<oe+Z?fe:he;M.style.left=100*(S-oe)/Z+"%",addClass(M,L)}qn(),At=!1}if(Mt&&(t||Y||X)&&(Lt=zn())!==v)if(Lt)ma(va(yn(0))),jn();else{if(Tt){if(K&&de&&(ze.style.margin=""),ae)for(var T="tns-transparent",B=ae;B--;)O&&removeClass(G[B],T),removeClass(G[re-B-1],T);qn(),Tt=!1}a=!0}if(pn(St||Lt),te||(at=rt=!1),Qe!==h&&(Qe?addEvents:removeEvents)(ce,Pt),Je!==m&&(Je?H?showElement(H):(I&&showElement(I),F&&showElement(F)):H?hideElement(H):(I&&hideElement(I),F&&hideElement(F))),_e!==p&&(_e?(showElement(z),za()):hideElement(z)),Ze!==g&&(Ze?addEvents($,Ot,D.preventScrollOnTouch):removeEvents($,Ot)),et!==y&&(et?addEvents:removeEvents)($,Ht),te!==E&&(te?(W&&showElement(W),V||Ne||Aa()):(W&&hideElement(W),V&&Ma())),at!==C&&(at?addEvents:removeEvents)(j.parentNode,kt),rt!==x&&(rt?addEvents:removeEvents)(ce,Dt),t?(Y===o&&_===l||(a=!0),Ke===i||Ke||(ze.style.height=""),Je&&Ue!==s&&(I.innerHTML=Ue[0],F.innerHTML=Ue[1]),W&&nt!==u&&(n=te?1:0,v=(f=W.innerHTML).length-u[n].length,f.substring(v)===u[n])&&(W.innerHTML=f.substring(0,v)+nt[n])):_&&(Y||X)&&(a=!0),(r||Y&&!X)&&(ye=Fa(),za()),(h=oe!==b)?(ie.emit("indexChanged",ue()),a=!0):r?h||ea():(Y||X)&&(Yn(),ra(),Gn()),r&&!O){for(var N=oe+Math.min(Q,Z),k=re;k--;){var R=G[k];oe<=k&&k<N?(addClass(R,"tns-moving"),R.style.left=100*(k-oe)/Z+"%",addClass(R,fe),removeClass(R,he)):R.style.left&&(R.style.left="",addClass(R,he),removeClass(R,fe)),removeClass(R,ve)}setTimeout(function(){forEach(G,function(e){removeClass(e,"tns-moving")})},300)}St||Lt||(t&&!de&&(K===d&&J===c||(ze.style.cssText=An(K,J,Y,Xe,Ke)),q)&&(O&&($.style.width=Mn(Y,J,Z)),m=Ln(Y,J,Z)+Tn(J),removeCSSRule(ne,getCssRulesLength(ne)-1),addCSSRule(ne,"#"+se+" > .tns-item",m,getCssRulesLength(ne))),Ke&&_n(),a&&(ha(),mt=oe)),t&&ie.emit("newBreakpointEnd",ue(e))}}function zn(){var e,t;return Y||X?(e=Y?(Y+J)*Q:i[Q],t=K?U+2*K:U+J,_&&(t-=Y?(U-Y)/2:(U-(i[oe+1]-i[oe]-J))/2),e<=t):Q<=(_?Z-(Z-1)/2:Z)}function Wn(){for(var e in pe=0,P)(e=parseInt(e))<=qe&&(pe=e)}function Vn(){!te&&W&&hideElement(W),!_e&&z&&hideElement(z),Je||(H?hideElement(H):(I&&hideElement(I),F&&hideElement(F)))}function qn(){te&&W&&showElement(W),_e&&z&&showElement(z),Je&&(H?showElement(H):(I&&showElement(I),F&&showElement(F)))}function jn(){if(!Tt){if(K&&(ze.style.margin="0px"),ae)for(var e="tns-transparent",t=ae;t--;)O&&addClass(G[t],e),addClass(G[re-t-1],e);Vn(),Tt=!0}}function $n(){if(!At){if(ne.disabled=!0,$.className=$.className.replace(wt.substring(1),""),removeAttrs($,["style"]),ee)for(var e=ae;e--;)O&&hideElement(G[e]),hideElement(G[re-e-1]);if(q&&O||removeAttrs(ze,["style"]),!O)for(var t=oe,n=oe+Q;t<n;t++){var a=G[t];removeAttrs(a,["style"]),removeClass(a,fe),removeClass(a,he)}Vn(),At=!0}}function Gn(){var e=Qn();e&&M.innerHTML!==e&&(M.innerHTML=e)}function Qn(){var e=Xn(),t=e[0]+1-(Fa()===Q?0:e[0]===Q+ae?Q+ae:ae),e=e[1]+1-(Fa()===Q?0:e[1]===Q+ae?Q+ae:ae);return t==e&&Q<e?"1":t<1||Q<e?"":t==e?t+"":t+" to "+e}function Xn(e){null==e&&(e=va());var n,a,r,o=oe;return _||K?(X||Y)&&(n=-(parseFloat(e)+K),a=n+U+2*K):X&&(n=i[oe],a=n+U),X?i.forEach(function(e,t){t<re&&((_||K)&&e<=n+.5&&(o=t),.5<=a-e)&&(r=t)}):(r=Y?(e=Y+J,_||K?(o=Math.floor(n/e),Math.ceil(a/e-1)):o+Math.ceil(U/e)-1):_||K?(e=Z-1,r=_?(o-=e/2,oe+e/2):oe+e,K&&(o-=e=K*Z/U,r+=e),o=Math.floor(o),Math.ceil(r)):o+Z-1,o=Math.max(o,0),r=Math.min(r,re-1)),[o,r]}function Yn(){var e;ot&&!St&&((e=Xn()).push(it),Un.apply(null,e).forEach(function(e){var t;hasClass(e,$t)||((t={})[h]=function(e){e.stopPropagation()},addEvents(e,t),addEvents(e,Gt),e.src=getAttr(e,"data-src"),(t=getAttr(e,"data-srcset"))&&(e.srcset=t),addClass(e,"loading"))}))}function Kn(e){addClass(e,"loaded"),Jn(e)}function Jn(e){addClass(e,$t),removeClass(e,"loading"),removeEvents(e,Gt)}function Un(e,t,n){var a=[];for(n=n||"img";e<=t;)forEach(G[e].querySelectorAll(n),function(e){a.push(e)}),e++;return a}function _n(){var e=Un.apply(null,Xn());raf(function(){Zn(e,na)})}function Zn(n,e){return!A&&(n.forEach(function(e,t){!ot&&e.complete&&Jn(e),hasClass(e,$t)&&n.splice(t,1)}),n.length)?void raf(function(){Zn(n,e)}):e()}function ea(){var e,t;Yn(),ra(),Gn(),ua(),_e&&(xe=0<=Ce?Ce:Cn(),Ce=-1,xe!==be)&&(e=ge[be],t=ge[xe],setAttrs(e,{tabindex:"-1","aria-label":Se+(be+1),"aria-current":"false"}),removeClass(e,we),setAttrs(t,{"aria-label":Se+(xe+1),"aria-current":"true"}),removeAttrs(t,"tabindex"),addClass(t,we),be=xe)}function ta(e,t){for(var n=[],a=e,r=Math.min(e+t,re);a<r;a++)n.push(G[a].offsetHeight);return Math.max.apply(null,n)}function na(){var e=Ke?ta(oe,Z):ta(ae,Q),t=w||ze;t.style.height!==e&&(t.style.height=e+"px")}function aa(){i=[0];var n=q?"left":"top",a=q?"right":"bottom",r=G[0].getBoundingClientRect()[n];forEach(G,function(e,t){t&&i.push(e.getBoundingClientRect()[n]-r),t===re-1&&i.push(e.getBoundingClientRect()[a]-r)})}function ra(){var e=Xn(),n=e[0],a=e[1];forEach(G,function(e,t){n<=t&&t<=a?hasAttr(e,"aria-hidden")&&(removeAttrs(e,["aria-hidden","tabindex"]),addClass(e,qt),!te||Ne&&ke&&!V)&&$A.announce(e):hasAttr(e,"aria-hidden")||(setAttrs(e,{"aria-hidden":"true",tabindex:"-1"}),removeClass(e,qt))})}function oa(e){return e.nodeName.toLowerCase()}function ia(e){return"button"===oa(e)}function sa(e){return"true"===e.getAttribute("aria-disabled")}function la(e,t,n){e?t.disabled=n:t.setAttribute("aria-disabled",n.toString())}function ua(){var e,t,n,a;!Je||Ye||ee||(e=N?I.disabled:sa(I),t=k?F.disabled:sa(F),a=!Ye&&gt<=oe,(n=oe<=pt)&&!e&&la(N,I,!0),!n&&e&&la(N,I,!1),a&&!t&&la(k,F,!0),!a&&t&&la(k,F,!1))}function ca(e,t){s&&(e.style[s]=t)}function da(e){return null==e&&(e=oe),X?(U-(K?J:0)-(i[e+1]-i[e]-J))/2:Y?(U-Y)/2:(Z-1)/2}function fa(){var e=U+(K?J:0)-(Y?(Y+J)*re:i[re]);return e=0<(e=_&&!ee?Y?-(Y+J)*(re-1)-da():da(re-1)-i[re-1]:e)?0:e}function va(e){var t,n;return null==e&&(e=oe),q&&!X?Y?(t=-(Y+J)*e,_&&(t+=da())):(n=c?re:Z,_&&(e-=da()),t=100*-e/n):(t=-i[e],_&&X&&(t+=da())),lt&&(t=Math.max(t,ut)),t+=!q||X||Y?"px":"%"}function ha(e){ca($,"0s"),ma(e)}function ma(e){null==e&&(e=va()),$.style[dt]=ft+e+vt}function pa(e,t,n,a){var r=e+Z;ee||(r=Math.min(r,re));for(var o=e;o<r;o++){var i=G[o];a||(i.style.left=100*(o-oe)/Z+"%"),E&&d&&(i.style[d]=i.style[v]=E*(o-e)/1e3+"s"),removeClass(i,t),addClass(i,n),a&&st.push(i)}}function ga(e,t){ct&&hn(),oe===mt&&!t||(ie.emit("indexChanged",ue()),ie.emit("transitionStart",ue()),Ke&&_n(),V&&e&&0<=["click","keydown"].indexOf(e.type)&&Ma(),xt=!0,mn())}function ya(e){return e.toLowerCase().replace(/-/g,"")}function Ea(e){if(O||xt){if(ie.emit("transitionEnd",ue(e)),!O&&0<st.length)for(var t=0;t<st.length;t++){var n=st[t];n.style.left="",v&&d&&(n.style[v]="",n.style[d]=""),removeClass(n,ve),addClass(n,he)}(!e||!O&&e.target.parentNode===$||e.target===$&&ya(e.propertyName)===ya(dt))&&(ct||(e=oe,hn(),oe!==e&&(ie.emit("indexChanged",ue()),ha())),"inner"===me&&ie.emit("innerLoaded",ue()),xt=!1,mt=oe)}}function Ca(e,t){if(!Lt)if("prev"===e)xa(t,-1);else if("next"===e)xa(t,1);else{if(xt){if(yt)return;Ea()}var n=En(),a=0;"first"===e?a=-n:"last"===e?a=O?Q-Z-n:Q-1-n:("number"!=typeof e&&(e=parseInt(e)),isNaN(e)||(a=(e=t?e:Math.max(0,Math.min(Q-1,e)))-n)),!O&&a&&Math.abs(a)<Z&&(e=0<a?1:-1,a+=pt<=oe+a-Q?Q*e:2*Q*e*-1),oe+=a,O&&ee&&(oe<pt&&(oe+=Q),gt<oe)&&(oe-=Q),En(oe)!==En(mt)&&ga(t)}}function xa(e,t){if(xt){if(yt)return;Ea()}var n;if(!t){for(var a=Na(e=Ba(e));a!==H&&[I,F].indexOf(a)<0;)a=a.parentNode;var r=[I,F].indexOf(a);0<=r&&(n=!0,t=0===r?-1:1)}if(Ye){if(oe===pt&&-1===t)return void Ca("last",e);if(oe===gt&&1===t)return void Ca("first",e)}t&&(oe+=$e*t,X&&(oe=Math.floor(oe)),ga(n||e&&"keydown"===e.type?e:null))}function ba(){Te=setInterval(function(){xa(null,Ae)},tt),V=!0}function wa(){clearInterval(Te),V=!1}function Sa(e,t){setAttrs(W,{"data-action":e}),W.innerHTML=Le[0]+e+Le[1]+t}function Aa(){ba(),W&&Sa("stop",nt[1]),Ne=ke=!1}function Ma(){wa(),W&&Sa("start",nt[0]),Ne=ke=!0}function La(){Ne=V?(Ma(),!0):(Aa(),!1)}function Ta(e){e.focus()}function Ba(e){return ka(e=e||a.event)?e.changedTouches[0]:e}function Na(e){return e.target||a.event.srcElement}function ka(e){return 0<=e.type.indexOf("touch")}function Ra(e){e.preventDefault?e.preventDefault():e.returnValue=!1}function Da(){return getTouchDirection(toDegree(Pe.y-De.y,Pe.x-De.x),Et)===D.axis}function Pa(e){if(xt){if(yt)return;Ea()}te&&V&&wa(),He=!0,Ie&&(caf(Ie),Ie=null);var t=Ba(e);ie.emit(ka(e)?"touchStart":"dragStart",ue(e)),!ka(e)&&0<=["img","a"].indexOf(oa(Na(e)))&&Ra(e),Pe.x=De.x=t.clientX,Pe.y=De.y=t.clientY,O&&(Oe=parseFloat($.style[dt].replace(ft,"")),ca($,"0s"))}function Oa(e){var t;He&&(t=Ba(e),Pe.x=t.clientX,Pe.y=t.clientY,O?Ie=Ie||raf(function(){!function e(t){if(!Ct)return void(He=!1);caf(Ie);He&&(Ie=raf(function(){e(t)}));"?"===Ct&&(Ct=Da());if(Ct){!Qt&&ka(t)&&(Qt=!0);try{t.type&&ie.emit(ka(t)?"touchMove":"dragMove",ue(t))}catch(e){}var n=Oe,a=Fe(Pe,De);n=!q||Y||X?n+a+"px":n+(c?a*Z*100/((U+J)*re):100*a/(U+J))+"%",$.style[dt]=ft+n+vt}}(e)}):(Ct="?"===Ct?Da():Ct)&&(Qt=!0),"boolean"!=typeof e.cancelable||e.cancelable)&&Qt&&e.preventDefault()}function Ha(a){var e,r,n;He&&(Ie&&(caf(Ie),Ie=null),O&&ca($,""),He=!1,e=Ba(a),Pe.x=e.clientX,Pe.y=e.clientY,r=Fe(Pe,De),Math.abs(r))&&(ka(a)||addEvents(n=Na(a),{click:function e(t){Ra(t),removeEvents(n,{click:e})}}),O?Ie=raf(function(){if(q&&!X){var e=-r*Z/(U+J),e=0<r?Math.floor(e):Math.ceil(e);oe+=e}else{var t=-(Oe+r);if(t<=0)oe=pt;else if(t>=i[re-1])oe=gt;else for(var n=0;n<re&&t>=i[n];)t>i[oe=n]&&r<0&&(oe+=1),n++}ga(a,r),ie.emit(ka(a)?"touchEnd":"dragEnd",ue(a))}):Ct&&xa(a,0<r?-1:1)),"auto"===D.preventScrollOnTouch&&(Qt=!1),Et&&(Ct="?"),te&&!V&&ba()}function Ia(){(w||ze).style.height=i[oe+Z]-i[oe]+"px"}function Fa(){var e=Y?(Y+J)*Q/U:Q/Z;return Math.min(Math.ceil(e),Q)}function za(){if(_e&&!zt&&ye!==Ee){var e=Ee,t=ye,n=showElement;for(ye<Ee&&(e=ye,t=Ee,n=hideElement);e<t;)n(ge[e]),e++;Ee=ye}}function ue(e){return{container:$,slideItems:G,navContainer:z,navItems:ge,controlsContainer:H,hasControls:It,prevButton:I,nextButton:F,items:Z,slideBy:$e,cloneCount:ae,slideCount:Q,slideCountNew:re,index:oe,indexCached:mt,displayIndex:gn(),navCurrentIndex:xe,navCurrentIndexCached:be,pages:ye,pagesCached:Ee,sheet:ne,isOn:je,event:e||{}}}p&&console.warn("No slides found in",D.container)};$A.tns=tns;
\ No newline at end of file
+var win$1=window,raf=win$1.requestAnimationFrame||win$1.webkitRequestAnimationFrame||win$1.mozRequestAnimationFrame||win$1.msRequestAnimationFrame||function(e){return setTimeout(e,16)},win=window,caf=win.cancelAnimationFrame||win.mozCancelAnimationFrame||function(e){clearTimeout(e)};function extend(){for(var e,t,n,a=arguments[0]||{},r=1,o=arguments.length;r<o;r++)if(null!==(e=arguments[r]))for(t in e)a!==(n=e[t])&&void 0!==n&&(a[t]=n);return a}function checkStorageValue(e){return 0<=["true","false"].indexOf(e)?JSON.parse(e):e}function setLocalStorage(e,t,n,a){if(a)try{e.setItem(t,n)}catch(e){}return n}function getSlideId(){var e=window.tnsId;return window.tnsId=e?e+1:1,"tns"+window.tnsId}function getBody(){var e=document,t=e.body;return t||((t=e.createElement("body")).fake=!0),t}var docElement=document.documentElement;function setFakeBody(e){var t="";return e.fake&&(t=docElement.style.overflow,e.style.background="",e.style.overflow=docElement.style.overflow="hidden",docElement.appendChild(e)),t}function resetFakeBody(e,t){e.fake&&(e.remove(),docElement.style.overflow=t,docElement.offsetHeight)}function calc(){var e=document,t=getBody(),n=setFakeBody(t),a=e.createElement("div"),r=!1;t.appendChild(a);try{for(var o,i="(10px * 10)",s=["calc"+i,"-moz-calc"+i,"-webkit-calc"+i],l=0;l<3;l++)if(o=s[l],a.style.width=o,100===a.offsetWidth){r=o.replace(i,"");break}}catch(e){}return t.fake?resetFakeBody(t,n):a.remove(),r}function percentageLayout(){var e=document,t=getBody(),n=setFakeBody(t),a=e.createElement("div"),e=e.createElement("div"),r="";a.className="tns-t-subp2",e.className="tns-t-ct";for(var o=0;o<70;o++)r+="<div></div>";return e.innerHTML=r,a.appendChild(e),t.appendChild(a),e=Math.abs(a.getBoundingClientRect().left-e.children[67].getBoundingClientRect().left)<2,t.fake?resetFakeBody(t,n):a.remove(),e}function mediaquerySupport(){var e,t,n,a,r,o;return!(!window.matchMedia&&!window.msMatchMedia)||(e=document,n=setFakeBody(t=getBody()),a=e.createElement("div"),r="@media all and (min-width:1px){.tns-mq-test{position:absolute}}",(o=e.createElement("style")).type="text/css",a.className="tns-mq-test",t.appendChild(o),t.appendChild(a),o.styleSheet?o.styleSheet.cssText=r:o.appendChild(e.createTextNode(r)),o=(window.getComputedStyle?window.getComputedStyle(a):a.currentStyle).position,t.fake?resetFakeBody(t,n):a.remove(),"absolute"===o)}function createStyleSheet(e,t){var n=document.createElement("style");return e&&n.setAttribute("media",e),t&&n.setAttribute("nonce",t),document.querySelector("head").appendChild(n),n.sheet||n.styleSheet}function addCSSRule(e,t,n,a){"insertRule"in e?e.insertRule(t+"{"+n+"}",a):e.addRule(t,n,a)}function removeCSSRule(e,t){"deleteRule"in e?e.deleteRule(t):e.removeRule(t)}function getCssRulesLength(e){return("insertRule"in e?e.cssRules:e.rules).length}function toDegree(e,t){return Math.atan2(e,t)*(180/Math.PI)}function getTouchDirection(e,t){var n=!1,e=Math.abs(90-Math.abs(e));return 90-t<=e?n="horizontal":e<=t&&(n="vertical"),n}function forEach(e,t,n){for(var a=0,r=e.length;a<r;a++)t.call(n,e[a],a)}var classListSupport="classList"in document.createElement("_"),hasClass=classListSupport?function(e,t){return e.classList.contains(t)}:function(e,t){return 0<=e.className.indexOf(t)},addClass=classListSupport?function(e,t){hasClass(e,t)||e.classList.add(t)}:function(e,t){hasClass(e,t)||(e.className+=" "+t)},removeClass=classListSupport?function(e,t){hasClass(e,t)&&e.classList.remove(t)}:function(e,t){hasClass(e,t)&&(e.className=e.className.replace(t,""))};function hasAttr(e,t){return e.hasAttribute(t)}function getAttr(e,t){return e.getAttribute(t)}function isNodeList(e){return void 0!==e.item}function setAttrs(e,t){if(e=isNodeList(e)||e instanceof Array?e:[e],"[object Object]"===Object.prototype.toString.call(t))for(var n=e.length;n--;)for(var a in t)e[n].setAttribute(a,t[a])}function removeAttrs(e,t){e=isNodeList(e)||e instanceof Array?e:[e];for(var n=(t=t instanceof Array?t:[t]).length,a=e.length;a--;)for(var r=n;r--;)e[a].removeAttribute(t[r])}function arrayFromNodeList(e){for(var t=[],n=0,a=e.length;n<a;n++)t.push(e[n]);return t}function hideElement(e,t){"none"!==e.style.display&&(e.style.display="none")}function showElement(e,t){"none"===e.style.display&&(e.style.display="")}function isVisible(e){return"none"!==window.getComputedStyle(e).display}function whichProperty(t){"string"==typeof t&&(n=[t],a=t.charAt(0).toUpperCase()+t.substr(1),["Webkit","Moz","ms","O"].forEach(function(e){"ms"===e&&"transform"!==t||n.push(e+a)}),t=n);var n,a,e=document.createElement("fakeelement");t.length;for(var r=0;r<t.length;r++){var o=t[r];if(void 0!==e.style[o])return o}return!1}function has3DTransforms(e){var t,n,a,r;return!!e&&!!window.getComputedStyle&&(a=document,n=setFakeBody(t=getBody()),a=a.createElement("p"),r=9<e.length?"-"+e.slice(0,-9).toLowerCase()+"-":"",r+="transform",t.insertBefore(a,null),a.style[e]="translate3d(1px,1px,1px)",e=window.getComputedStyle(a).getPropertyValue(r),t.fake?resetFakeBody(t,n):a.remove(),void 0!==e)&&0<e.length&&"none"!==e}function getEndProperty(e,t){var n=!1;return/^Webkit/.test(e)?n="webkit"+t+"End":/^O/.test(e)?n="o"+t+"End":e&&(n=t.toLowerCase()+"end"),n}var supportsPassive=!1;try{var opts=Object.defineProperty({},"passive",{get:function(){supportsPassive=!0}});window.addEventListener("test",null,opts)}catch(e){}var passiveOption=!!supportsPassive&&{passive:!0};function addEvents(e,t,n){for(var a in t){var r=0<=["touchstart","touchmove"].indexOf(a)&&!n&&passiveOption;e.addEventListener(a,t[a],r)}}function removeEvents(e,t){for(var n in t){var a=0<=["touchstart","touchmove"].indexOf(n)&&passiveOption;e.removeEventListener(n,t[n],a)}}function Events(){return{topics:{},on:function(e,t){this.topics[e]=this.topics[e]||[],this.topics[e].push(t)},off:function(e,t){if(this.topics[e])for(var n=0;n<this.topics[e].length;n++)if(this.topics[e][n]===t){this.topics[e].splice(n,1);break}},emit:function(t,n){n.type=t,this.topics[t]&&this.topics[t].forEach(function(e){e(n,t)})}}}function jsTransform(t,n,a,r,e,o,i){var s=Math.min(o,10),l=0<=e.indexOf("%")?"%":"px",e=e.replace(l,""),u=Number(t.style[n].replace(a,"").replace(r,"").replace(l,"")),c=(e-u)/o*s;setTimeout(function e(){o-=s;u+=c;t.style[n]=a+u+l+r;0<o?setTimeout(e,s):i()},s)}Object.keys||(Object.keys=function(e){var t,n=[];for(t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.push(t);return n}),"remove"in Element.prototype||(Element.prototype.remove=function(){this.parentNode&&this.parentNode.removeChild(this)});var tns=function(D){D=extend({container:".slider",mode:"carousel",axis:"horizontal",items:1,gutter:0,edgePadding:0,fixedWidth:!1,autoWidth:!1,viewportMax:!1,slideBy:1,center:!1,controls:!0,controlsPosition:"top",controlsText:["prev","next"],controlsContainer:!1,prevButton:!1,nextButton:!1,nav:!0,navPosition:"top",navContainer:!1,navAsThumbnails:!1,arrowKeys:!1,speed:300,autoplay:!1,autoplayPosition:"top",autoplayTimeout:5e3,autoplayDirection:"forward",autoplayText:["start","stop"],autoplayHoverPause:!0,autoplayButton:!1,autoplayButtonOutput:!0,autoplayResetOnVisibility:!0,animateIn:"tns-fadeIn",animateOut:"tns-fadeOut",animateNormal:"tns-normal",animateDelay:!1,loop:!0,rewind:!1,autoHeight:!1,responsive:!1,lazyload:!1,lazyloadSelector:".tns-lazy-img",touch:!0,mouseDrag:!1,swipeAngle:15,nested:!1,preventActionWhenRunning:!1,preventScrollOnTouch:!1,freezable:!0,onInit:!1,useLocalStorage:!0,nonce:!1},D||{});var ce=document,a=window,r={ENTER:13,SPACE:32,LEFT:37,RIGHT:39},t={},n=D.useLocalStorage;if(n){var o=navigator.userAgent,l=new Date;try{(t=a.localStorage)?(t.setItem(l,l),n=t.getItem(l)==l,t.removeItem(l)):n=!1,n||(t={})}catch(e){n=!1}n&&(t.tnsApp&&t.tnsApp!==o&&["tC","tPL","tMQ","tTf","t3D","tTDu","tTDe","tADu","tADe","tTE","tAE"].forEach(function(e){t.removeItem(e)}),localStorage.tnsApp=o)}var u=t.tC?checkStorageValue(t.tC):setLocalStorage(t,"tC",calc(),n),l=t.tPL?checkStorageValue(t.tPL):setLocalStorage(t,"tPL",percentageLayout(),n),de=t.tMQ?checkStorageValue(t.tMQ):setLocalStorage(t,"tMQ",mediaquerySupport(),n),c=t.tTf?checkStorageValue(t.tTf):setLocalStorage(t,"tTf",whichProperty("transform"),n),o=t.t3D?checkStorageValue(t.t3D):setLocalStorage(t,"t3D",has3DTransforms(c),n),s=t.tTDu?checkStorageValue(t.tTDu):setLocalStorage(t,"tTDu",whichProperty("transitionDuration"),n),d=t.tTDe?checkStorageValue(t.tTDe):setLocalStorage(t,"tTDe",whichProperty("transitionDelay"),n),f=t.tADu?checkStorageValue(t.tADu):setLocalStorage(t,"tADu",whichProperty("animationDuration"),n),v=t.tADe?checkStorageValue(t.tADe):setLocalStorage(t,"tADe",whichProperty("animationDelay"),n),h=t.tTE?checkStorageValue(t.tTE):setLocalStorage(t,"tTE",getEndProperty(s,"Transition"),n),m=t.tAE?checkStorageValue(t.tAE):setLocalStorage(t,"tAE",getEndProperty(f,"Animation"),n),p=a.console&&"function"==typeof a.console.warn,g=["container","controlsContainer","prevButton","nextButton","navContainer","autoplayButton"],y={};if(g.forEach(function(e){var t,n;"string"==typeof D[e]&&(t=D[e],n=ce.querySelector(t),y[e]=t,n&&n.nodeName?D[e]=n:p&&console.warn("Can't find",D[e]))}),!(D.container.children.length<1)){var fe,ve,E,he,P=D.responsive,me=D.nested,O="carousel"===D.mode;if(P){0 in P&&(D=extend(D,P[0]),delete P[0]);var C,x={};for(C in P){var b=P[C];x[C]="number"==typeof b?{items:b}:b}P=x,x=null}O||!function e(t){for(var n in t)O||("slideBy"===n&&(t[n]="page"),"edgePadding"===n&&(t[n]=!1),"autoHeight"===n&&(t[n]=!1)),"responsive"===n&&e(t[n])}(D),O||(D.axis="horizontal",D.slideBy="page",D.edgePadding=!1,fe=D.animateIn,ve=D.animateOut,E=D.animateDelay,he=D.animateNormal);var w,pe,i,S,A,M,H,L,I,F,T,B,N,k,z,R,ge,ye,Ee,Ce,xe,be,we,Se,Ae,W,Me,Le,Te,V,Be,Ne,ke,Re,De,Pe,Oe,He,Ie,Fe,q="horizontal"===D.axis,j=ce.createElement("div"),ze=ce.createElement("div"),$=D.container,We=$.parentNode,Ve=$.outerHTML,G=$.children,Q=G.length,qe=xn(),je=!1,X=($A.loop(G,function(e,t){$A.setAttr(t,{role:"region","aria-roledescription":""+(e+1),"aria-label":"Slide"})},"array"),P&&Wn(),O&&($.className+=" tns-vpfix"),D.autoWidth),Y=le("fixedWidth"),K=le("edgePadding"),J=le("gutter"),U=wn(),_=le("center"),Z=X?1:Math.floor(le("items")),$e=le("slideBy"),Ge=D.viewportMax||D.fixedWidthViewportWidth,Qe=le("arrowKeys"),Xe=le("speed"),Ye=D.rewind,ee=!Ye&&D.loop,Ke=le("autoHeight"),Je=le("controls"),Ue=le("controlsText"),_e=le("nav"),Ze=le("touch"),et=le("mouseDrag"),te=le("autoplay"),tt=le("autoplayTimeout"),nt=le("autoplayText"),at=le("autoplayHoverPause"),rt=le("autoplayResetOnVisibility"),ne=createStyleSheet(null,le("nonce")),ot=D.lazyload,it=D.lazyloadSelector,st=[],ae=ee?(n=function(){{if(X||Y&&!Ge)return Q-1;var e=Y?"fixedWidth":"items",t=[];if((Y||D[e]<Q)&&t.push(D[e]),P)for(var n in P){n=P[n][e];n&&(Y||n<Q)&&t.push(n)}return t.length||t.push(0),Math.ceil(Y?Ge/Math.min.apply(null,t):Math.max.apply(null,t))}}(),S=O?Math.ceil((5*n-Q)/2):4*n-Q,S=Math.max(n,S),Sn("edgePadding")?S+1:S):0,re=O?Q+2*ae:Q+ae,lt=!(!Y&&!X||ee),ut=Y?fa():null,ct=!O||!ee,dt=q?"left":"top",ft="",vt="",ht=Y?function(){return _&&!ee?Q-1:Math.ceil(-ut/(Y+J))}:X?function(){for(var e=0;e<re;e++)if(i[e]>=-ut)return e}:function(){return _&&O&&!ee?Q-1:ee||O?Math.max(0,re-Math.ceil(Z)):re-1},oe=yn(le("startIndex")),mt=oe,pt=(gn(),0),gt=X?null:ht(),yt=D.preventActionWhenRunning,Et=D.swipeAngle,Ct=!Et||"?",xt=!1,bt=D.onInit,ie=new Events,wt=" tns-slider tns-"+D.mode,se=$.id||getSlideId(),St=le("disable"),At=!1,Mt=D.freezable,Lt=!(!Mt||X)&&zn(),Tt=!1,Bt={click:xa,keydown:function(e){e=Ba(e);var t=[r.LEFT,r.RIGHT].indexOf(e.keyCode);0<=t&&(0===t?I.disabled||xa(e,-1):F.disabled||xa(e,1))}},Nt={click:function(e){if(xt){if(yt)return;Ea()}var t=Na(e=Ba(e));for(;t!==z&&!hasAttr(t,"data-nav");)t=t.parentNode;{var n,a;hasAttr(t,"data-nav")&&(n=Ce=Number(getAttr(t,"data-nav")),a=Y||X?n*Q/ye:n*Z,Ca(zt?n:Math.min(Math.ceil(a),Q-1),e),xe===n)&&(V&&Ma(),Ce=-1)}},keydown:function(e){e=Ba(e);var t,n=ce.activeElement;hasAttr(n,"data-nav")&&(t=[r.LEFT,r.RIGHT,r.ENTER,r.SPACE].indexOf(e.keyCode),n=Number(getAttr(n,"data-nav")),0<=t)&&(0===t?0<n&&Ta(ge[n-1]):1===t?n<ye-1&&Ta(ge[n+1]):Ca(Ce=n,e))}},kt={mouseenter:function(){V&&(wa(),Be=!0)},mouseleave:function(){Be&&(ba(),Be=!1)}},Rt={focusin:function(){V&&(Ma(),ke=!0)}},Dt={visibilitychange:function(){ce.hidden?V&&(wa(),Re=!0):Re&&(ba(),Re=!1)}},Pt={keydown:function(e){e=Ba(e);var t=[r.LEFT,r.RIGHT].indexOf(e.keyCode);0<=t&&xa(e,0===t?-1:1)}},Ot={touchstart:Pa,touchmove:Oa,touchend:Ha,touchcancel:Ha},Ht={mousedown:Pa,mousemove:Oa,mouseup:Ha,mouseleave:Ha},It=Sn("controls"),Ft=Sn("nav"),zt=!!X||D.navAsThumbnails,Wt=Sn("autoplay"),n=Sn("touch"),Vt=Sn("mouseDrag"),qt="tns-slide-active",jt="tns-slide-cloned",$t="tns-complete",Gt={load:function(e){Kn(Na(e))},error:function(e){!function(e){addClass(e,"failed"),Jn(e)}(Na(e))}},Qt="force"===D.preventScrollOnTouch;if(It&&(H=D.controlsContainer,L=D.controlsContainer?D.controlsContainer.outerHTML:"",I=D.prevButton,F=D.nextButton,T=D.prevButton?D.prevButton.outerHTML:"",B=D.nextButton?D.nextButton.outerHTML:""),Ft&&(z=D.navContainer,R=D.navContainer?D.navContainer.outerHTML:"",ye=X?Q:Fa(),Ee=0,Ce=-1,xe=Cn(),be=xe,we="tns-nav-active",Se="Page "),Wt&&(Ae="forward"===D.autoplayDirection?1:-1,W=D.autoplayButton,Me=D.autoplayButton?D.autoplayButton.outerHTML:"",Le=["<span class='tns-visually-hidden'>"," animation</span>"]),(n||Vt)&&(De={},He=!(Pe={}),Fe=q?function(e,t){return e.x-t.x}:function(e,t){return e.y-t.y}),X||pn(St||Lt),c&&(dt=c,ft="translate",vt=o?(ft+=q?"3d(":"3d(0px, ",q?", 0px, 0px)":", 0px)"):(ft+=q?"X(":"Y(",")")),O&&($.className=$.className.replace("tns-vpfix","")),Sn("gutter"),j.className="tns-outer",ze.className="tns-inner",j.id=se+"-ow",ze.id=se+"-iw",""===$.id&&($.id=se),wt=wt+(l||X?" tns-subpixel":" tns-no-subpixel")+(u?" tns-calc":" tns-no-calc"),X&&(wt+=" tns-autowidth"),wt+=" tns-"+D.axis,$.className+=wt,(O?((w=ce.createElement("div")).id=se+"-mw",w.className="tns-ovh",j.appendChild(w),w):j).appendChild(ze),Ke&&((w||ze).className+=" tns-ah"),We.insertBefore(j,$),ze.appendChild($),forEach(G,function(e,t){addClass(e,"tns-item"),e.id||(e.id=se+"-item"+t),!O&&he&&addClass(e,he),setAttrs(e,{"aria-hidden":"true",tabindex:"-1"})}),ae){for(var Xt=ce.createDocumentFragment(),Yt=ce.createDocumentFragment(),Kt=ae;Kt--;){var Jt=Kt%Q,Ut=G[Jt].cloneNode(!0);addClass(Ut,jt),removeAttrs(Ut,"id"),Yt.insertBefore(Ut,Yt.firstChild),O&&(Ut=G[Q-1-Jt].cloneNode(!0),addClass(Ut,jt),removeAttrs(Ut,"id"),Xt.appendChild(Ut))}$.insertBefore(Xt,$.firstChild),$.appendChild(Yt),G=$.children}if(!O)for(var _t=oe,Zt=oe+Math.min(Q,Z);_t<Zt;_t++){var en=G[_t];en.style.left=100*(_t-oe)/Z+"%",addClass(en,fe),removeClass(en,he)}if(q&&(l||X?(addCSSRule(ne,"#"+se+" > .tns-item","font-size:"+a.getComputedStyle(G[0]).fontSize+";",getCssRulesLength(ne)),addCSSRule(ne,"#"+se,"font-size:0;",getCssRulesLength(ne))):O&&forEach(G,function(e,t){e.style.marginLeft=(e=t,u?u+"("+100*e+"% / "+re+")":100*e/re+"%")})),de?(s&&(e=w&&D.autoHeight?Nn(D.speed):"",addCSSRule(ne,"#"+se+"-mw",e,getCssRulesLength(ne))),e=An(D.edgePadding,D.gutter,D.fixedWidth,D.speed,D.autoHeight),addCSSRule(ne,"#"+se+"-iw",e,getCssRulesLength(ne)),O&&(e=q&&!X?"width:"+Mn(D.fixedWidth,D.gutter,D.items)+";":"",s&&(e+=Nn(Xe)),addCSSRule(ne,"#"+se,e,getCssRulesLength(ne))),e=q&&!X?Ln(D.fixedWidth,D.gutter,D.items):"",D.gutter&&(e+=Tn(D.gutter)),O||(s&&(e+=Nn(Xe)),f&&(e+=kn(Xe)))):(O&&Ke&&(w.style[s]=Xe/1e3+"s"),ze.style.cssText=An(K,J,Y,Ke),O&&q&&!X&&($.style.width=Mn(Y,J,Z)),e=q&&!X?Ln(Y,J,Z):"",J&&(e+=Tn(J))),e&&addCSSRule(ne,"#"+se+" > .tns-item",e,getCssRulesLength(ne)),P&&de)for(var tn in P){tn=parseInt(tn);var nn=P[tn],e="",an="",rn="",on="",sn="",ln=X?null:le("items",tn),un=le("fixedWidth",tn),cn=le("speed",tn),dn=le("edgePadding",tn),fn=le("autoHeight",tn),vn=le("gutter",tn);s&&w&&le("autoHeight",tn)&&"speed"in nn&&(an="#"+se+"-mw{"+Nn(cn)+"}"),("edgePadding"in nn||"gutter"in nn)&&(rn="#"+se+"-iw{"+An(dn,vn,un,cn,fn)+"}"),O&&q&&!X&&("fixedWidth"in nn||"items"in nn||Y&&"gutter"in nn)&&(on="width:"+Mn(un,vn,ln)+";"),s&&"speed"in nn&&(on+=Nn(cn)),on=on&&"#"+se+"{"+on+"}",("fixedWidth"in nn||Y&&"gutter"in nn||!O&&"items"in nn)&&(sn+=Ln(un,vn,ln)),"gutter"in nn&&(sn+=Tn(vn)),!O&&"speed"in nn&&(s&&(sn+=Nn(cn)),f)&&(sn+=kn(cn)),(e=an+rn+on+(sn=sn&&"#"+se+" > .tns-item{"+sn+"}"))&&ne.insertRule("@media (min-width: "+tn/16+"em) {"+e+"}",ne.cssRules.length)}Rn();var hn=ee?O?function(){var e=pt,t=gt;e+=$e,t-=$e,K?(e+=1,--t):Y&&(U+J)%(Y+J)&&--t,ae&&(t<oe?oe-=Q:oe<e&&(oe+=Q))}:function(){if(gt<oe)for(;pt+Q<=oe;)oe-=Q;else if(oe<pt)for(;oe<=gt-Q;)oe+=Q}:function(){oe=Math.max(pt,Math.min(gt,oe))},mn=O?function(){ca($,""),s||!Xe?(ma(),Xe&&isVisible($)||Ea()):jsTransform($,dt,ft,vt,va(),Xe,Ea),q||Ia()}:function(){st=[];var e={};e[h]=e[m]=Ea,removeEvents(G[mt],e),addEvents(G[oe],e),pa(mt,fe,ve,!0),pa(oe,he,fe),h&&m&&Xe&&isVisible($)||Ea()};return{version:"2.9.4",getInfo:ue,events:ie,goTo:Ca,play:function(){te&&!V&&(Aa(),Ne=!1)},pause:function(){V&&(Ma(),Ne=!0)},isOn:je,updateSliderHeight:na,refresh:Rn,destroy:function(){ne.disabled=!0,ne.ownerNode&&ne.ownerNode.remove(),removeEvents(a,{resize:In}),Qe&&removeEvents(ce,Pt),H&&removeEvents(H,Bt),z&&removeEvents(z,Nt),removeEvents(j.parentNode,kt),removeEvents($,Dt),W&&removeEvents(W,{click:La}),te&&clearInterval(Te),O&&h&&((e={})[h]=Ea,removeEvents($,e)),Ze&&removeEvents($,Ot),et&&removeEvents($,Ht);var e,t,o=[Ve,L,T,B,R,Me];for(t in g.forEach(function(e,t){var n,a,r="container"===e?j:D[e];"object"==typeof r&&r&&(n=r.previousElementSibling||!1,a=r.parentNode,r.outerHTML=o[t],D[e]=n?n.nextElementSibling:a.firstElementChild)}),g=fe=ve=E=he=q=j=ze=$=We=Ve=G=Q=pe=qe=X=Y=K=J=U=Z=$e=Ge=Qe=Xe=Ye=ee=Ke=ne=ot=i=st=ae=re=lt=ut=ct=dt=ft=vt=ht=oe=mt=pt=gt=Et=Ct=xt=bt=ie=wt=se=St=At=Mt=Lt=Tt=Bt=Nt=kt=Dt=Pt=Ot=Ht=It=Ft=zt=Wt=Vt=qt=$t=Gt=A=Je=Ue=H=L=I=F=N=k=_e=z=R=ge=ye=Ee=Ce=xe=be=we=Se=te=tt=Ae=nt=at=W=Me=rt=Le=Te=V=Be=Ne=ke=Re=De=Pe=Oe=He=Ie=Fe=Ze=et=null,this)"rebuild"!==t&&(this[t]=null);je=!1},rebuild:function(){return tns(extend(D,y))}}}function pn(e){e&&(Je=_e=Ze=et=Qe=te=at=rt=!1)}function gn(){for(var e=O?oe-ae:oe;e<0;)e+=Q;return e%Q+1}function yn(e){return e=e?Math.max(0,Math.min(ee?Q-1:Q-Z,e)):0,O?e+ae:e}function En(e){for(null==e&&(e=oe),O&&(e-=ae);e<0;)e+=Q;return Math.floor(e%Q)}function Cn(){var e=En(),e=zt?e:Y||X?Math.ceil((e+1)*ye/Q-1):Math.floor(e/Z);return e=!ee&&O&&oe===gt?ye-1:e}function xn(){return a.innerWidth||ce.documentElement.clientWidth||ce.body.clientWidth}function bn(e){return"top"===e?"afterbegin":"beforeend"}function wn(){var e=K?2*K-J:0;return function e(t){var n,a;if(null!=t)return n=ce.createElement("div"),t.appendChild(n),a=(a=n.getBoundingClientRect()).right-a.left,n.remove(),a||e(t.parentNode)}(We)-e}function Sn(e){if(D[e])return!0;if(P)for(var t in P)if(P[t][e])return!0;return!1}function le(e,t){if(null==t&&(t=qe),"items"===e&&Y)return Math.floor((U+J)/(Y+J))||1;var n=D[e];if(P)for(var a in P)t>=parseInt(a)&&e in P[a]&&(n=P[a][e]);return"slideBy"===e&&"page"===n&&(n=le("items")),n=O||"slideBy"!==e&&"items"!==e?n:Math.floor(n)}function An(e,t,n,a,r){var o,i="";return void 0!==e?(o=e,t&&(o-=t),i=q?"margin: 0 "+o+"px 0 "+e+"px;":"margin: "+e+"px 0 "+o+"px 0;"):t&&!n&&(e="-"+t+"px",i="margin: 0 "+(q?e+" 0 0":"0 "+e+" 0")+";"),!O&&r&&s&&a&&(i+=Nn(a)),i}function Mn(e,t,n){return e?(e+t)*re+"px":u?u+"("+100*re+"% / "+n+")":100*re/n+"%"}function Ln(e,t,n){return t="width:"+(t=e?e+t+"px":(O||(n=Math.floor(n)),e=O?re:n,u?u+"(100% / "+e+")":100/e+"%")),"inner"!==me?t+";":t+" !important;"}function Tn(e){return!1!==e?(q?"padding-":"margin-")+(q?"right":"bottom")+": "+e+"px;":""}function Bn(e,t){e=e.substring(0,e.length-t).toLowerCase();return e=e&&"-"+e+"-"}function Nn(e){return Bn(s,18)+"transition-duration:"+e/1e3+"s;"}function kn(e){return Bn(f,17)+"animation-duration:"+e/1e3+"s;"}function Rn(){var e;Sn("autoHeight")||X||!q?(forEach(e=$.querySelectorAll("img"),function(e){var t=e.src;ot||(t&&t.indexOf("data:image")<0?(e.src="",addEvents(e,Gt),addClass(e,"loading"),e.src=t):Kn(e))}),raf(function(){Zn(arrayFromNodeList(e),function(){A=!0})}),Sn("autoHeight")&&(e=Un(oe,Math.min(oe+Z-1,re-1))),ot?Dn():raf(function(){Zn(arrayFromNodeList(e),Dn)})):(O&&ha(),On(),Hn())}function Dn(){var a;(X&&1<Q?(a=ee?oe:Q-1,function e(){var t=G[a].getBoundingClientRect().left,n=G[a-1].getBoundingClientRect().right;Math.abs(t-n)<=1?Pn():setTimeout(function(){e()},16)}):Pn)()}function Pn(){q&&!X||(aa(),X?(ut=fa(),Mt&&(Lt=zn()),gt=ht(),pn(St||Lt)):Ia()),O&&ha(),On(),Hn()}function On(){var e,t;if(ra(),j.parentNode.setAttribute("role","region"),j.parentNode.setAttribute("aria-label","Carousel"),j.insertAdjacentHTML("afterbegin",'<div aria-hidden="true" style="position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; white-space: nowrap;" class="tns-liveregion tns-visually-hidden">Slide <span class="current">'+Qn()+"</span> of "+Q+"</div>"),M=j.querySelector(".tns-liveregion .current"),Wt&&(e=te?"stop":"start",W?setAttrs(W,{"data-action":e}):D.autoplayButtonOutput&&(j.insertAdjacentHTML(bn(D.autoplayPosition),'<button type="button" data-action="'+e+'">'+Le[0]+e+Le[1]+nt[0]+"</button>"),W=j.querySelector("[data-action]")),W&&addEvents(W,{click:La}),te)&&(Aa(),at&&(addEvents(j.parentNode,Rt),addEvents(j.parentNode,kt)),rt)&&addEvents($,Dt),Ft){if(z)setAttrs(z,{role:"toolbar","aria-label":"Pagination"}),forEach(ge=z.children,function(e,t){setAttrs(e,{"data-nav":t,tabindex:"-1","aria-label":Se+(t+1),"aria-controls":se})});else{for(var n="",a=zt?"":'style="display:none"',r=0;r<Q;r++)n+='<button type="button" data-nav="'+r+'" tabindex="-1" aria-controls="'+se+'" '+a+' aria-label="'+Se+(r+1)+'"></button>';j.insertAdjacentHTML(bn(D.navPosition),n='<div class="tns-nav" role="toolbar" aria-label="Pagination">'+n+"</div>"),z=j.querySelector(".tns-nav"),ge=z.children}za(),s&&(e=s.substring(0,s.length-18).toLowerCase(),t="transition: all "+Xe/1e3+"s",addCSSRule(ne,"[aria-controls^="+se+"-item]",t=e?"-"+e+"-"+t:t,getCssRulesLength(ne))),setAttrs(ge[xe],{"aria-label":Se+(xe+1),"aria-current":"true"}),removeAttrs(ge[xe],"tabindex"),addClass(ge[xe],we),addEvents(z,Nt)}It&&(H||I&&F||(j.insertAdjacentHTML(bn(D.controlsPosition),'<div class="tns-controls"><button type="button" data-controls="prev" aria-controls="'+se+'">'+Ue[0]+'</button><button type="button" data-controls="next" aria-controls="'+se+'">'+Ue[1]+"</button></div>"),H=j.querySelector(".tns-controls")),I&&F||(I=H.children[0],F=H.children[1]),(D.controlsContainer||D.prevButton&&D.nextButton)&&setAttrs([I,F],{"aria-controls":se}),(D.controlsContainer||D.prevButton&&D.nextButton)&&(setAttrs(I,{"data-controls":"prev"}),setAttrs(F,{"data-controls":"next"})),N=ia(I),k=ia(F),ua(),H?addEvents(H,Bt):(addEvents(I,Bt),addEvents(F,Bt))),Vn()}function Hn(){var e;O&&h&&((e={})[h]=Ea,addEvents($,e)),Ze&&addEvents($,Ot,D.preventScrollOnTouch),et&&addEvents($,Ht),Qe&&addEvents(ce,Pt),"inner"===me?ie.on("outerResized",function(){Fn(),ie.emit("innerLoaded",ue())}):(P||Y||X||Ke||!q)&&addEvents(a,{resize:In}),Ke&&("outer"===me?ie.on("innerLoaded",_n):St||_n()),Yn(),St?$n():Lt&&jn(),ie.on("indexChanged",ea),"inner"===me&&ie.emit("innerLoaded",ue()),"function"==typeof bt&&bt(ue()),je=!0}function In(e){raf(function(){Fn(Ba(e))})}function Fn(e){if(je){"outer"===me&&ie.emit("outerResized",ue(e)),qe=xn();var t,n=pe,a=!1;P&&(Wn(),t=n!==pe)&&ie.emit("newBreakpointStart",ue(e));var r,o,i,s,l,u,c,d,n=Z,f=St,v=Lt,h=Qe,m=Je,p=_e,g=Ze,y=et,E=te,C=at,x=rt,b=oe;if(t&&(o=Y,i=Ke,s=Ue,l=_,u=nt,de||(c=J,d=K)),Qe=le("arrowKeys"),Je=le("controls"),_e=le("nav"),Ze=le("touch"),_=le("center"),et=le("mouseDrag"),te=le("autoplay"),at=le("autoplayHoverPause"),rt=le("autoplayResetOnVisibility"),t&&(St=le("disable"),Y=le("fixedWidth"),Xe=le("speed"),Ke=le("autoHeight"),Ue=le("controlsText"),nt=le("autoplayText"),tt=le("autoplayTimeout"),de||(K=le("edgePadding"),J=le("gutter"))),pn(St),U=wn(),q&&!X||St||(aa(),q)||(Ia(),a=!0),(Y||X)&&(ut=fa(),gt=ht()),(t||Y)&&(Z=le("items"),$e=le("slideBy"),r=Z!==n)&&(Y||X||(gt=ht()),hn()),t&&St!==f)if(St)$n();else if(At){if(ne.disabled=!1,$.className+=wt,ha(),ee)for(var w=ae;w--;)O&&showElement(G[w]),showElement(G[re-w-1]);if(!O)for(var S=oe,A=oe+Q;S<A;S++){var M=G[S],L=S<oe+Z?fe:he;M.style.left=100*(S-oe)/Z+"%",addClass(M,L)}qn(),At=!1}if(Mt&&(t||Y||X)&&(Lt=zn())!==v)if(Lt)ma(va(yn(0))),jn();else{if(Tt){if(K&&de&&(ze.style.margin=""),ae)for(var T="tns-transparent",B=ae;B--;)O&&removeClass(G[B],T),removeClass(G[re-B-1],T);qn(),Tt=!1}a=!0}if(pn(St||Lt),te||(at=rt=!1),Qe!==h&&(Qe?addEvents:removeEvents)(ce,Pt),Je!==m&&(Je?H?showElement(H):(I&&showElement(I),F&&showElement(F)):H?hideElement(H):(I&&hideElement(I),F&&hideElement(F))),_e!==p&&(_e?(showElement(z),za()):hideElement(z)),Ze!==g&&(Ze?addEvents($,Ot,D.preventScrollOnTouch):removeEvents($,Ot)),et!==y&&(et?addEvents:removeEvents)($,Ht),te!==E&&(te?(W&&showElement(W),V||Ne||Aa()):(W&&hideElement(W),V&&Ma())),at!==C&&(at?addEvents:removeEvents)(j.parentNode,kt),rt!==x&&(rt?addEvents:removeEvents)(ce,Dt),t?(Y===o&&_===l||(a=!0),Ke===i||Ke||(ze.style.height=""),Je&&Ue!==s&&(I.innerHTML=Ue[0],F.innerHTML=Ue[1]),W&&nt!==u&&(n=te?1:0,v=(f=W.innerHTML).length-u[n].length,f.substring(v)===u[n])&&(W.innerHTML=f.substring(0,v)+nt[n])):_&&(Y||X)&&(a=!0),(r||Y&&!X)&&(ye=Fa(),za()),(h=oe!==b)?(ie.emit("indexChanged",ue()),a=!0):r?h||ea():(Y||X)&&(Yn(),ra(),Gn()),r&&!O){for(var N=oe+Math.min(Q,Z),k=re;k--;){var R=G[k];oe<=k&&k<N?(addClass(R,"tns-moving"),R.style.left=100*(k-oe)/Z+"%",addClass(R,fe),removeClass(R,he)):R.style.left&&(R.style.left="",addClass(R,he),removeClass(R,fe)),removeClass(R,ve)}setTimeout(function(){forEach(G,function(e){removeClass(e,"tns-moving")})},300)}St||Lt||(t&&!de&&(K===d&&J===c||(ze.style.cssText=An(K,J,Y,Xe,Ke)),q)&&(O&&($.style.width=Mn(Y,J,Z)),m=Ln(Y,J,Z)+Tn(J),removeCSSRule(ne,getCssRulesLength(ne)-1),addCSSRule(ne,"#"+se+" > .tns-item",m,getCssRulesLength(ne))),Ke&&_n(),a&&(ha(),mt=oe)),t&&ie.emit("newBreakpointEnd",ue(e))}}function zn(){var e,t;return Y||X?(e=Y?(Y+J)*Q:i[Q],t=K?U+2*K:U+J,_&&(t-=Y?(U-Y)/2:(U-(i[oe+1]-i[oe]-J))/2),e<=t):Q<=(_?Z-(Z-1)/2:Z)}function Wn(){for(var e in pe=0,P)(e=parseInt(e))<=qe&&(pe=e)}function Vn(){!te&&W&&hideElement(W),!_e&&z&&hideElement(z),Je||(H?hideElement(H):(I&&hideElement(I),F&&hideElement(F)))}function qn(){te&&W&&showElement(W),_e&&z&&showElement(z),Je&&(H?showElement(H):(I&&showElement(I),F&&showElement(F)))}function jn(){if(!Tt){if(K&&(ze.style.margin="0px"),ae)for(var e="tns-transparent",t=ae;t--;)O&&addClass(G[t],e),addClass(G[re-t-1],e);Vn(),Tt=!0}}function $n(){if(!At){if(ne.disabled=!0,$.className=$.className.replace(wt.substring(1),""),removeAttrs($,["style"]),ee)for(var e=ae;e--;)O&&hideElement(G[e]),hideElement(G[re-e-1]);if(q&&O||removeAttrs(ze,["style"]),!O)for(var t=oe,n=oe+Q;t<n;t++){var a=G[t];removeAttrs(a,["style"]),removeClass(a,fe),removeClass(a,he)}Vn(),At=!0}}function Gn(){var e=Qn();e&&M.innerHTML!==e&&(M.innerHTML=e)}function Qn(){var e=Xn(),t=e[0]+1-(Fa()===Q?0:e[0]===Q+ae?Q+ae:ae),e=e[1]+1-(Fa()===Q?0:e[1]===Q+ae?Q+ae:ae);return t==e&&Q<e?"1":t<1||Q<e?"":t==e?t+"":t+" to "+e}function Xn(e){null==e&&(e=va());var n,a,r,o=oe;return _||K?(X||Y)&&(n=-(parseFloat(e)+K),a=n+U+2*K):X&&(n=i[oe],a=n+U),X?i.forEach(function(e,t){t<re&&((_||K)&&e<=n+.5&&(o=t),.5<=a-e)&&(r=t)}):(r=Y?(e=Y+J,_||K?(o=Math.floor(n/e),Math.ceil(a/e-1)):o+Math.ceil(U/e)-1):_||K?(e=Z-1,r=_?(o-=e/2,oe+e/2):oe+e,K&&(o-=e=K*Z/U,r+=e),o=Math.floor(o),Math.ceil(r)):o+Z-1,o=Math.max(o,0),r=Math.min(r,re-1)),[o,r]}function Yn(){var e;ot&&!St&&((e=Xn()).push(it),Un.apply(null,e).forEach(function(e){var t;hasClass(e,$t)||((t={})[h]=function(e){e.stopPropagation()},addEvents(e,t),addEvents(e,Gt),e.src=getAttr(e,"data-src"),(t=getAttr(e,"data-srcset"))&&(e.srcset=t),addClass(e,"loading"))}))}function Kn(e){addClass(e,"loaded"),Jn(e)}function Jn(e){addClass(e,$t),removeClass(e,"loading"),removeEvents(e,Gt)}function Un(e,t,n){var a=[];for(n=n||"img";e<=t;)forEach(G[e].querySelectorAll(n),function(e){a.push(e)}),e++;return a}function _n(){var e=Un.apply(null,Xn());raf(function(){Zn(e,na)})}function Zn(n,e){return!A&&(n.forEach(function(e,t){!ot&&e.complete&&Jn(e),hasClass(e,$t)&&n.splice(t,1)}),n.length)?void raf(function(){Zn(n,e)}):e()}function ea(){var e,t;Yn(),ra(),Gn(),ua(),_e&&(xe=0<=Ce?Ce:Cn(),Ce=-1,xe!==be)&&(e=ge[be],t=ge[xe],setAttrs(e,{tabindex:"-1","aria-label":Se+(be+1),"aria-current":"false"}),removeClass(e,we),setAttrs(t,{"aria-label":Se+(xe+1),"aria-current":"true"}),removeAttrs(t,"tabindex"),addClass(t,we),be=xe)}function ta(e,t){for(var n=[],a=e,r=Math.min(e+t,re);a<r;a++)n.push(G[a].offsetHeight);return Math.max.apply(null,n)}function na(){var e=Ke?ta(oe,Z):ta(ae,Q),t=w||ze;t.style.height!==e&&(t.style.height=e+"px")}function aa(){i=[0];var n=q?"left":"top",a=q?"right":"bottom",r=G[0].getBoundingClientRect()[n];forEach(G,function(e,t){t&&i.push(e.getBoundingClientRect()[n]-r),t===re-1&&i.push(e.getBoundingClientRect()[a]-r)})}function ra(){var e=Xn(),n=e[0],a=e[1];forEach(G,function(e,t){n<=t&&t<=a?hasAttr(e,"aria-hidden")&&(removeAttrs(e,["aria-hidden","tabindex"]),addClass(e,qt),!te||Ne&&ke&&!V)&&$A.announce(e):hasAttr(e,"aria-hidden")||(setAttrs(e,{"aria-hidden":"true",tabindex:"-1"}),removeClass(e,qt))})}function oa(e){return e.nodeName.toLowerCase()}function ia(e){return"button"===oa(e)}function sa(e){return"true"===e.getAttribute("aria-disabled")}function la(e,t,n){e?t.disabled=n:t.setAttribute("aria-disabled",n.toString())}function ua(){var e,t,n,a;!Je||Ye||ee||(e=N?I.disabled:sa(I),t=k?F.disabled:sa(F),a=!Ye&&gt<=oe,(n=oe<=pt)&&!e&&la(N,I,!0),!n&&e&&la(N,I,!1),a&&!t&&la(k,F,!0),!a&&t&&la(k,F,!1))}function ca(e,t){s&&(e.style[s]=t)}function da(e){return null==e&&(e=oe),X?(U-(K?J:0)-(i[e+1]-i[e]-J))/2:Y?(U-Y)/2:(Z-1)/2}function fa(){var e=U+(K?J:0)-(Y?(Y+J)*re:i[re]);return e=0<(e=_&&!ee?Y?-(Y+J)*(re-1)-da():da(re-1)-i[re-1]:e)?0:e}function va(e){var t,n;return null==e&&(e=oe),q&&!X?Y?(t=-(Y+J)*e,_&&(t+=da())):(n=c?re:Z,_&&(e-=da()),t=100*-e/n):(t=-i[e],_&&X&&(t+=da())),lt&&(t=Math.max(t,ut)),t+=!q||X||Y?"px":"%"}function ha(e){ca($,"0s"),ma(e)}function ma(e){null==e&&(e=va()),$.style[dt]=ft+e+vt}function pa(e,t,n,a){var r=e+Z;ee||(r=Math.min(r,re));for(var o=e;o<r;o++){var i=G[o];a||(i.style.left=100*(o-oe)/Z+"%"),E&&d&&(i.style[d]=i.style[v]=E*(o-e)/1e3+"s"),removeClass(i,t),addClass(i,n),a&&st.push(i)}}function ga(e,t){ct&&hn(),oe===mt&&!t||(ie.emit("indexChanged",ue()),ie.emit("transitionStart",ue()),Ke&&_n(),V&&e&&0<=["click","keydown"].indexOf(e.type)&&Ma(),xt=!0,mn())}function ya(e){return e.toLowerCase().replace(/-/g,"")}function Ea(e){if(O||xt){if(ie.emit("transitionEnd",ue(e)),!O&&0<st.length)for(var t=0;t<st.length;t++){var n=st[t];n.style.left="",v&&d&&(n.style[v]="",n.style[d]=""),removeClass(n,ve),addClass(n,he)}(!e||!O&&e.target.parentNode===$||e.target===$&&ya(e.propertyName)===ya(dt))&&(ct||(e=oe,hn(),oe!==e&&(ie.emit("indexChanged",ue()),ha())),"inner"===me&&ie.emit("innerLoaded",ue()),xt=!1,mt=oe)}}function Ca(e,t){if(!Lt)if("prev"===e)xa(t,-1);else if("next"===e)xa(t,1);else{if(xt){if(yt)return;Ea()}var n=En(),a=0;"first"===e?a=-n:"last"===e?a=O?Q-Z-n:Q-1-n:("number"!=typeof e&&(e=parseInt(e)),isNaN(e)||(a=(e=t?e:Math.max(0,Math.min(Q-1,e)))-n)),!O&&a&&Math.abs(a)<Z&&(e=0<a?1:-1,a+=pt<=oe+a-Q?Q*e:2*Q*e*-1),oe+=a,O&&ee&&(oe<pt&&(oe+=Q),gt<oe)&&(oe-=Q),En(oe)!==En(mt)&&ga(t)}}function xa(e,t){if(xt){if(yt)return;Ea()}var n;if(!t){for(var a=Na(e=Ba(e));a!==H&&[I,F].indexOf(a)<0;)a=a.parentNode;var r=[I,F].indexOf(a);0<=r&&(n=!0,t=0===r?-1:1)}if(Ye){if(oe===pt&&-1===t)return void Ca("last",e);if(oe===gt&&1===t)return void Ca("first",e)}t&&(oe+=$e*t,X&&(oe=Math.floor(oe)),ga(n||e&&"keydown"===e.type?e:null))}function ba(){Te=setInterval(function(){xa(null,Ae)},tt),V=!0}function wa(){clearInterval(Te),V=!1}function Sa(e,t){setAttrs(W,{"data-action":e}),W.innerHTML=Le[0]+e+Le[1]+t}function Aa(){ba(),W&&Sa("stop",nt[1]),Ne=ke=!1}function Ma(){wa(),W&&Sa("start",nt[0]),Ne=ke=!0}function La(){Ne=V?(Ma(),!0):(Aa(),!1)}function Ta(e){e.focus()}function Ba(e){return ka(e=e||a.event)?e.changedTouches[0]:e}function Na(e){return e.target||a.event.srcElement}function ka(e){return 0<=e.type.indexOf("touch")}function Ra(e){e.preventDefault?e.preventDefault():e.returnValue=!1}function Da(){return getTouchDirection(toDegree(Pe.y-De.y,Pe.x-De.x),Et)===D.axis}function Pa(e){if(xt){if(yt)return;Ea()}te&&V&&wa(),He=!0,Ie&&(caf(Ie),Ie=null);var t=Ba(e);ie.emit(ka(e)?"touchStart":"dragStart",ue(e)),!ka(e)&&0<=["img","a"].indexOf(oa(Na(e)))&&Ra(e),Pe.x=De.x=t.clientX,Pe.y=De.y=t.clientY,O&&(Oe=parseFloat($.style[dt].replace(ft,"")),ca($,"0s"))}function Oa(e){var t;He&&(t=Ba(e),Pe.x=t.clientX,Pe.y=t.clientY,O?Ie=Ie||raf(function(){!function e(t){if(!Ct)return void(He=!1);caf(Ie);He&&(Ie=raf(function(){e(t)}));"?"===Ct&&(Ct=Da());if(Ct){!Qt&&ka(t)&&(Qt=!0);try{t.type&&ie.emit(ka(t)?"touchMove":"dragMove",ue(t))}catch(e){}var n=Oe,a=Fe(Pe,De);n=!q||Y||X?n+a+"px":n+(c?a*Z*100/((U+J)*re):100*a/(U+J))+"%",$.style[dt]=ft+n+vt}}(e)}):(Ct="?"===Ct?Da():Ct)&&(Qt=!0),"boolean"!=typeof e.cancelable||e.cancelable)&&Qt&&e.preventDefault()}function Ha(a){var e,r,n;He&&(Ie&&(caf(Ie),Ie=null),O&&ca($,""),He=!1,e=Ba(a),Pe.x=e.clientX,Pe.y=e.clientY,r=Fe(Pe,De),Math.abs(r))&&(ka(a)||addEvents(n=Na(a),{click:function e(t){Ra(t),removeEvents(n,{click:e})}}),O?Ie=raf(function(){if(q&&!X){var e=-r*Z/(U+J),e=0<r?Math.floor(e):Math.ceil(e);oe+=e}else{var t=-(Oe+r);if(t<=0)oe=pt;else if(t>=i[re-1])oe=gt;else for(var n=0;n<re&&t>=i[n];)t>i[oe=n]&&r<0&&(oe+=1),n++}ga(a,r),ie.emit(ka(a)?"touchEnd":"dragEnd",ue(a))}):Ct&&xa(a,0<r?-1:1)),"auto"===D.preventScrollOnTouch&&(Qt=!1),Et&&(Ct="?"),te&&!V&&ba()}function Ia(){(w||ze).style.height=i[oe+Z]-i[oe]+"px"}function Fa(){var e=Y?(Y+J)*Q/U:Q/Z;return Math.min(Math.ceil(e),Q)}function za(){if(_e&&!zt&&ye!==Ee){var e=Ee,t=ye,n=showElement;for(ye<Ee&&(e=ye,t=Ee,n=hideElement);e<t;)n(ge[e]),e++;Ee=ye}}function ue(e){return{container:$,slideItems:G,navContainer:z,navItems:ge,controlsContainer:H,hasControls:It,prevButton:I,nextButton:F,items:Z,slideBy:$e,cloneCount:ae,slideCount:Q,slideCountNew:re,index:oe,indexCached:mt,displayIndex:gn(),navCurrentIndex:xe,navCurrentIndexCached:be,pages:ye,pagesCached:Ee,sheet:ne,isOn:je,event:e||{}}}p&&console.warn("No slides found in",D.container)};$A.tns=tns;
\ No newline at end of file
diff --git a/4X/Min/Velocity.js b/4X/Min/Velocity.js
index 9116e404..49789558 100644
--- a/4X/Min/Velocity.js
+++ b/4X/Min/Velocity.js
@@ -1,4 +1,4 @@
 /*@license
  VelocityJS.org (1.5.2). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License */
 /*! VelocityJS.org jQuery Shim (1.0.1). (C) 2014 The jQuery Foundation. MIT @license: en.wikipedia.org/wiki/MIT_License. */
-!function(t){"use strict";if(!t.jQuery){for(var u=function(e,t){return new u.fn.init(e,t)},n=(u.isWindow=function(e){return e&&e===e.window},u.type=function(e){return e?"object"==typeof e||"function"==typeof e?r[i.call(e)]||"object":typeof e:e+""},u.isArray=Array.isArray||function(e){return"array"===u.type(e)},u.isPlainObject=function(e){if(!e||"object"!==u.type(e)||e.nodeType||u.isWindow(e))return!1;try{if(e.constructor&&!a.call(e,"constructor")&&!a.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(e){return!1}for(var t in e);return void 0===t||a.call(e,t)},u.each=function(e,t,r){var a=0,n=e.length,i=s(e);if(r){if(i)for(;a<n&&!1!==t.apply(e[a],r);a++);else for(a in e)if(e.hasOwnProperty(a)&&!1===t.apply(e[a],r))break}else if(i)for(;a<n&&!1!==t.call(e[a],a,e[a]);a++);else for(a in e)if(e.hasOwnProperty(a)&&!1===t.call(e[a],a,e[a]))break;return e},u.data=function(e,t,r){var a;return void 0===r?(a=(a=e[u.expando])&&n[a],void 0===t?a:a&&t in a?a[t]:void 0):void 0!==t?(a=e[u.expando]||(e[u.expando]=++u.uuid),n[a]=n[a]||{},n[a][t]=r):void 0},u.removeData=function(e,t){var e=e[u.expando],r=e&&n[e];r&&(t?u.each(t,function(e,t){delete r[t]}):delete n[e])},u.extend=function(){var e,t,r,a,n,i=arguments[0]||{},o=1,s=arguments.length,l=!1;for("boolean"==typeof i&&(l=i,i=arguments[o]||{},o++),"object"!=typeof i&&"function"!==u.type(i)&&(i={}),o===s&&(i=this,o--);o<s;o++)if(a=arguments[o])for(r in a)a.hasOwnProperty(r)&&(n=i[r],i!==(t=a[r]))&&(l&&t&&(u.isPlainObject(t)||(e=u.isArray(t)))?(n=e?(e=!1,n&&u.isArray(n)?n:[]):n&&u.isPlainObject(n)?n:{},i[r]=u.extend(l,n,t)):void 0!==t&&(i[r]=t));return i},u.queue=function(e,t,r){var a;if(e)return a=u.data(e,t=(t||"fx")+"queue"),r?(!a||u.isArray(r)?a=u.data(e,t,function(e,t){if(t=t||[],e)if(s(Object(e))){for(var r=t,a="string"==typeof e?[e]:e,n=+a.length,i=0,o=r.length;i<n;)r[o++]=a[i++];if(n!=n)for(;void 0!==a[i];)r[o++]=a[i++];r.length=o}else[].push.call(t,e);return t}(r)):a.push(r),a):a||[]},u.dequeue=function(e,n){u.each(e.nodeType?[e]:e,function(e,t){n=n||"fx";var r=u.queue(t,n),a=r.shift();(a="inprogress"===a?r.shift():a)&&("fx"===n&&r.unshift("inprogress"),a.call(t,function(){u.dequeue(t,n)}))})},u.fn=u.prototype={init:function(e){if(e.nodeType)return this[0]=e,this;throw new Error("Not a DOM node.")},offset:function(){var e=this[0].getBoundingClientRect?this[0].getBoundingClientRect():{top:0,left:0};return{top:e.top+(t.pageYOffset||document.scrollTop||0)-(document.clientTop||0),left:e.left+(t.pageXOffset||document.scrollLeft||0)-(document.clientLeft||0)}},position:function(){var e=this[0],t=function(e){for(var t=e.offsetParent;t&&"html"!==t.nodeName.toLowerCase()&&t.style&&"static"===t.style.position.toLowerCase();)t=t.offsetParent;return t||document}(e),r=this.offset(),a=/^(?:body|html)$/i.test(t.nodeName)?{top:0,left:0}:u(t).offset();return r.top-=parseFloat(e.style.marginTop)||0,r.left-=parseFloat(e.style.marginLeft)||0,t.style&&(a.top+=parseFloat(t.style.borderTopWidth)||0,a.left+=parseFloat(t.style.borderLeftWidth)||0),{top:r.top-a.top,left:r.left-a.left}}},{}),r=(u.expando="velocity"+(new Date).getTime(),u.uuid=0,{}),a=r.hasOwnProperty,i=r.toString,e="Boolean Number String Function Array Date RegExp Object Error".split(" "),o=0;o<e.length;o++)r["[object "+e[o]+"]"]=e[o].toLowerCase();u.fn.init.prototype=u.fn,t.Velocity={Utilities:u}}function s(e){var t=e.length,r=u.type(e);return"function"!==r&&!u.isWindow(e)&&(!(1!==e.nodeType||!t)||"array"===r||0===t||"number"==typeof t&&0<t&&t-1 in e)}}(window),function(e){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e():"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";var a,e,t=window.jQuery||window.Zepto||window,$=window,B=window?window.document:void 0,W=void 0,V=function(){if(B.documentMode)return B.documentMode;for(var e=7;4<e;e--){var t=B.createElement("div");if(t.innerHTML="\x3c!--[if IE "+e+"]><span></span><![endif]--\x3e",t.getElementsByTagName("span").length)return t=null,e}return W}(),r=(a=0,$.webkitRequestAnimationFrame||$.mozRequestAnimationFrame||function(e){var t=(new Date).getTime(),r=Math.max(0,16-(t-a));return a=t+r,setTimeout(function(){e(t+r)},r)}),k=("function"!=typeof(s=$.performance||{}).now&&(e=s.timing&&s.timing.navigationStart?s.timing.navigationStart:(new Date).getTime(),s.now=function(){return(new Date).getTime()-e}),s);function N(){return Array.prototype.includes?function(e,t){return e.includes(t)}:Array.prototype.indexOf?function(e,t){return 0<=e.indexOf(t)}:function(e,t){for(var r=0;r<e.length;r++)if(e[r]===t)return!0;return!1}}var n=function(){var s=Array.prototype.slice;try{return s.call(B.documentElement),s}catch(e){return function(e,t){var r=this.length;if("number"!=typeof e&&(e=0),"number"!=typeof t&&(t=r),this.slice)return s.call(this,e,t);var a,n=[],i=0<=e?e:Math.max(0,r+e),o=(t<0?r+t:Math.min(t,r))-i;if(0<o)if(n=new Array(o),this.charAt)for(a=0;a<o;a++)n[a]=this.charAt(i+a);else for(a=0;a<o;a++)n[a]=this[i+a];return n}}}();function h(e){return Q.isWrapped(e)?e=n.call(e):Q.isNode(e)&&(e=[e]),e}var I,i,o,D,y,G,T,Q={isNumber:function(e){return"number"==typeof e},isString:function(e){return"string"==typeof e},isArray:Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)},isFunction:function(e){return"[object Function]"===Object.prototype.toString.call(e)},isNode:function(e){return e&&e.nodeType},isWrapped:function(e){return e&&e!==$&&Q.isNumber(e.length)&&!Q.isString(e)&&!Q.isFunction(e)&&!Q.isNode(e)&&(0===e.length||Q.isNode(e[0]))},isSVG:function(e){return $.SVGElement&&e instanceof $.SVGElement},isEmptyObject:function(e){for(var t in e)if(e.hasOwnProperty(t))return!1;return!0}},s=!1;if(t.fn&&t.fn.jquery?(I=t,s=!0):I=$.Velocity.Utilities,V<=8&&!s)throw new Error("Velocity: IE8 and below require jQuery to be loaded before Velocity.");if(!(V<=7))return i="swing",G={State:{isMobile:/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test($.navigator.userAgent),isAndroid:/Android/i.test($.navigator.userAgent),isGingerbread:/Android 2\.3\.[3-7]/i.test($.navigator.userAgent),isChrome:$.chrome,isFirefox:/Firefox/i.test($.navigator.userAgent),prefixElement:B.createElement("div"),prefixMatches:{},scrollAnchor:null,scrollPropertyLeft:null,scrollPropertyTop:null,isTicking:!1,calls:[],delayedElements:{count:0}},CSS:{},Utilities:I,Redirects:{},Easings:{},Promise:$.Promise,defaults:{queue:"",duration:400,easing:i,begin:W,complete:W,progress:W,display:W,visibility:W,loop:!1,delay:!1,mobileHA:!0,_cacheValues:!0,promiseRejectEmpty:!0},init:function(e){I.data(e,"velocity",{isSVG:Q.isSVG(e),isAnimating:!1,computedStyle:null,tweensContainer:null,rootPropertyValueCache:{},transformCache:{}})},hook:null,mock:!1,version:{major:1,minor:5,patch:2},debug:!1,timestamp:!0,pauseAll:function(r){var a=(new Date).getTime();I.each(G.State.calls,function(e,t){if(t){if(r!==W&&(t[2].queue!==r||!1===t[2].queue))return!0;t[5]={resume:!1}}}),I.each(G.State.delayedElements,function(e,t){t&&v(t,a)})},resumeAll:function(r){var e=(new Date).getTime();I.each(G.State.calls,function(e,t){if(t){if(r!==W&&(t[2].queue!==r||!1===t[2].queue))return!0;t[5]&&(t[5].resume=!0)}}),I.each(G.State.delayedElements,function(e,t){t&&b(t)})}},$.pageYOffset!==W?(G.State.scrollAnchor=$,G.State.scrollPropertyLeft="pageXOffset",G.State.scrollPropertyTop="pageYOffset"):(G.State.scrollAnchor=B.documentElement||B.body.parentNode||B.body,G.State.scrollPropertyLeft="scrollLeft",G.State.scrollPropertyTop="scrollTop"),o=function e(t,r,a){var n,i,o,s,l,u,c,p,d,f,g={x:-1,v:0,tension:null,friction:null},m=[0],h=0;for(t=parseFloat(t)||500,r=parseFloat(r)||20,a=a||null,g.tension=t,g.friction=r,i=(n=null!==a)?(h=e(t,r))/a*.016:.016;;)if(l=i,u=f=d=p=c=u=void 0,u={dx:(s=o||g).v,dv:x(s)},c=w(s,.5*l,u),p=w(s,.5*l,c),d=w(s,l,p),f=1/6*(u.dx+2*(c.dx+p.dx)+d.dx),u=1/6*(u.dv+2*(c.dv+p.dv)+d.dv),s.x=s.x+f*l,s.v=s.v+u*l,o=s,m.push(1+o.x),h+=16,!(1e-4<Math.abs(o.x)&&1e-4<Math.abs(o.v)))break;return n?function(e){return m[e*(m.length-1)|0]}:h},G.Easings={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},spring:function(e){return 1-Math.cos(4.5*e*Math.PI)*Math.exp(6*-e)}},I.each([["ease",[.25,.1,.25,1]],["ease-in",[.42,0,1,1]],["ease-out",[0,0,.58,1]],["ease-in-out",[.42,0,.58,1]],["easeInSine",[.47,0,.745,.715]],["easeOutSine",[.39,.575,.565,1]],["easeInOutSine",[.445,.05,.55,.95]],["easeInQuad",[.55,.085,.68,.53]],["easeOutQuad",[.25,.46,.45,.94]],["easeInOutQuad",[.455,.03,.515,.955]],["easeInCubic",[.55,.055,.675,.19]],["easeOutCubic",[.215,.61,.355,1]],["easeInOutCubic",[.645,.045,.355,1]],["easeInQuart",[.895,.03,.685,.22]],["easeOutQuart",[.165,.84,.44,1]],["easeInOutQuart",[.77,0,.175,1]],["easeInQuint",[.755,.05,.855,.06]],["easeOutQuint",[.23,1,.32,1]],["easeInOutQuint",[.86,0,.07,1]],["easeInExpo",[.95,.05,.795,.035]],["easeOutExpo",[.19,1,.22,1]],["easeInOutExpo",[1,0,0,1]],["easeInCirc",[.6,.04,.98,.335]],["easeOutCirc",[.075,.82,.165,1]],["easeInOutCirc",[.785,.135,.15,.86]]],function(e,t){G.Easings[t[0]]=l.apply(null,t[1])}),(D=G.CSS={RegEx:{isHex:/^#([A-f\d]{3}){1,2}$/i,valueUnwrap:/^[A-z]+\((.*)\)$/i,wrappedValueAlreadyExtracted:/[0-9.]+ [0-9.]+ [0-9.]+( [0-9.]+)?/,valueSplit:/([A-z]+\(.+\))|(([A-z0-9#-.]+?)(?=\s|$))/gi},Lists:{colors:["fill","stroke","stopColor","color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],transformsBase:["translateX","translateY","scale","scaleX","scaleY","skewX","skewY","rotateZ"],transforms3D:["transformPerspective","translateZ","scaleZ","rotateX","rotateY"],units:["%","em","ex","ch","rem","vw","vh","vmin","vmax","cm","mm","Q","in","pc","pt","px","deg","grad","rad","turn","s","ms"],colorNames:{aliceblue:"240,248,255",antiquewhite:"250,235,215",aquamarine:"127,255,212",aqua:"0,255,255",azure:"240,255,255",beige:"245,245,220",bisque:"255,228,196",black:"0,0,0",blanchedalmond:"255,235,205",blueviolet:"138,43,226",blue:"0,0,255",brown:"165,42,42",burlywood:"222,184,135",cadetblue:"95,158,160",chartreuse:"127,255,0",chocolate:"210,105,30",coral:"255,127,80",cornflowerblue:"100,149,237",cornsilk:"255,248,220",crimson:"220,20,60",cyan:"0,255,255",darkblue:"0,0,139",darkcyan:"0,139,139",darkgoldenrod:"184,134,11",darkgray:"169,169,169",darkgrey:"169,169,169",darkgreen:"0,100,0",darkkhaki:"189,183,107",darkmagenta:"139,0,139",darkolivegreen:"85,107,47",darkorange:"255,140,0",darkorchid:"153,50,204",darkred:"139,0,0",darksalmon:"233,150,122",darkseagreen:"143,188,143",darkslateblue:"72,61,139",darkslategray:"47,79,79",darkturquoise:"0,206,209",darkviolet:"148,0,211",deeppink:"255,20,147",deepskyblue:"0,191,255",dimgray:"105,105,105",dimgrey:"105,105,105",dodgerblue:"30,144,255",firebrick:"178,34,34",floralwhite:"255,250,240",forestgreen:"34,139,34",fuchsia:"255,0,255",gainsboro:"220,220,220",ghostwhite:"248,248,255",gold:"255,215,0",goldenrod:"218,165,32",gray:"128,128,128",grey:"128,128,128",greenyellow:"173,255,47",green:"0,128,0",honeydew:"240,255,240",hotpink:"255,105,180",indianred:"205,92,92",indigo:"75,0,130",ivory:"255,255,240",khaki:"240,230,140",lavenderblush:"255,240,245",lavender:"230,230,250",lawngreen:"124,252,0",lemonchiffon:"255,250,205",lightblue:"173,216,230",lightcoral:"240,128,128",lightcyan:"224,255,255",lightgoldenrodyellow:"250,250,210",lightgray:"211,211,211",lightgrey:"211,211,211",lightgreen:"144,238,144",lightpink:"255,182,193",lightsalmon:"255,160,122",lightseagreen:"32,178,170",lightskyblue:"135,206,250",lightslategray:"119,136,153",lightsteelblue:"176,196,222",lightyellow:"255,255,224",limegreen:"50,205,50",lime:"0,255,0",linen:"250,240,230",magenta:"255,0,255",maroon:"128,0,0",mediumaquamarine:"102,205,170",mediumblue:"0,0,205",mediumorchid:"186,85,211",mediumpurple:"147,112,219",mediumseagreen:"60,179,113",mediumslateblue:"123,104,238",mediumspringgreen:"0,250,154",mediumturquoise:"72,209,204",mediumvioletred:"199,21,133",midnightblue:"25,25,112",mintcream:"245,255,250",mistyrose:"255,228,225",moccasin:"255,228,181",navajowhite:"255,222,173",navy:"0,0,128",oldlace:"253,245,230",olivedrab:"107,142,35",olive:"128,128,0",orangered:"255,69,0",orange:"255,165,0",orchid:"218,112,214",palegoldenrod:"238,232,170",palegreen:"152,251,152",paleturquoise:"175,238,238",palevioletred:"219,112,147",papayawhip:"255,239,213",peachpuff:"255,218,185",peru:"205,133,63",pink:"255,192,203",plum:"221,160,221",powderblue:"176,224,230",purple:"128,0,128",red:"255,0,0",rosybrown:"188,143,143",royalblue:"65,105,225",saddlebrown:"139,69,19",salmon:"250,128,114",sandybrown:"244,164,96",seagreen:"46,139,87",seashell:"255,245,238",sienna:"160,82,45",silver:"192,192,192",skyblue:"135,206,235",slateblue:"106,90,205",slategray:"112,128,144",snow:"255,250,250",springgreen:"0,255,127",steelblue:"70,130,180",tan:"210,180,140",teal:"0,128,128",thistle:"216,191,216",tomato:"255,99,71",turquoise:"64,224,208",violet:"238,130,238",wheat:"245,222,179",whitesmoke:"245,245,245",white:"255,255,255",yellowgreen:"154,205,50",yellow:"255,255,0"}},Hooks:{templates:{textShadow:["Color X Y Blur","black 0px 0px 0px"],boxShadow:["Color X Y Blur Spread","black 0px 0px 0px 0px"],clip:["Top Right Bottom Left","0px 0px 0px 0px"],backgroundPosition:["X Y","0% 0%"],transformOrigin:["X Y Z","50% 50% 0px"],perspectiveOrigin:["X Y","50% 50%"]},registered:{},register:function(){for(var e,t,r,a,n,i=0;i<D.Lists.colors.length;i++){var o="color"===D.Lists.colors[i]?"0 0 0 1":"255 255 255 1";D.Hooks.templates[D.Lists.colors[i]]=["Red Green Blue Alpha",o]}if(V)for(e in D.Hooks.templates)D.Hooks.templates.hasOwnProperty(e)&&(r=(t=D.Hooks.templates[e])[0].split(" "),a=t[1].match(D.RegEx.valueSplit),"Color"===r[0])&&(r.push(r.shift()),a.push(a.shift()),D.Hooks.templates[e]=[r.join(" "),a.join(" ")]);for(e in D.Hooks.templates)if(D.Hooks.templates.hasOwnProperty(e))for(var s in r=(t=D.Hooks.templates[e])[0].split(" "))r.hasOwnProperty(s)&&(n=e+r[s],s=s,D.Hooks.registered[n]=[e,s])},getRoot:function(e){var t=D.Hooks.registered[e];return t?t[0]:e},getUnit:function(e,t){e=(e.substr(t||0,5).match(/^[a-z%]+/)||[])[0]||"";return e&&N(D.Lists.units)?e:""},fixColors:function(e){return e.replace(/(rgba?\(\s*)?(\b[a-z]+\b)/g,function(e,t,r){return D.Lists.colorNames.hasOwnProperty(r)?(t||"rgba(")+D.Lists.colorNames[r]+(t?"":",1)"):t+r})},cleanRootPropertyValue:function(e,t){return D.RegEx.valueUnwrap.test(t)&&(t=t.match(D.RegEx.valueUnwrap)[1]),t=D.Values.isCSSNullValue(t)?D.Hooks.templates[e][1]:t},extractValue:function(e,t){var r,e=D.Hooks.registered[e];return e?(r=e[0],e=e[1],(t=D.Hooks.cleanRootPropertyValue(r,t)).toString().match(D.RegEx.valueSplit)[e]):t},injectValue:function(e,t,r){var a,e=D.Hooks.registered[e];return e?(a=e[0],e=e[1],(a=(r=D.Hooks.cleanRootPropertyValue(a,r)).toString().match(D.RegEx.valueSplit))[e]=t,a.join(" ")):r}},Normalizations:{registered:{clip:function(e,t,r){switch(e){case"name":return"clip";case"extract":var a=!D.RegEx.wrappedValueAlreadyExtracted.test(r)&&(a=r.toString().match(D.RegEx.valueUnwrap))?a[1].replace(/,(\s+)?/g," "):r;return a;case"inject":return"rect("+r+")"}},blur:function(e,t,r){switch(e){case"name":return G.State.isFirefox?"filter":"-webkit-filter";case"extract":var a,n=parseFloat(r);return n=n||0===n?n:(a=r.toString().match(/blur\(([0-9]+[A-z]+)\)/i))?a[1]:0;case"inject":return parseFloat(r)?"blur("+r+")":"none"}},opacity:function(e,t,r){if(V<=8)switch(e){case"name":return"filter";case"extract":var a=r.toString().match(/alpha\(opacity=(.*)\)/i);return r=a?a[1]/100:1;case"inject":return(t.style.zoom=1)<=parseFloat(r)?"":"alpha(opacity="+parseInt(100*parseFloat(r),10)+")"}else switch(e){case"name":return"opacity";case"extract":case"inject":return r}}},register:function(){V&&!(9<V)||G.State.isGingerbread||(D.Lists.transformsBase=D.Lists.transformsBase.concat(D.Lists.transforms3D));for(var e=0;e<D.Lists.transformsBase.length;e++)!function(){var n=D.Lists.transformsBase[e];D.Normalizations.registered[n]=function(e,t,r){switch(e){case"name":return"transform";case"extract":return H(t)===W||H(t).transformCache[n]===W?/^scale/i.test(n)?1:0:H(t).transformCache[n].replace(/[()]/g,"");case"inject":var a=!1;switch(n.substr(0,n.length-1)){case"translate":a=!/(%|px|em|rem|vw|vh|\d)$/i.test(r);break;case"scal":case"scale":G.State.isAndroid&&H(t).transformCache[n]===W&&r<1&&(r=1),a=!/(\d)$/i.test(r);break;case"skew":case"rotate":a=!/(deg|\d)$/i.test(r)}return a||(H(t).transformCache[n]="("+r+")"),H(t).transformCache[n]}}}();for(var t=0;t<D.Lists.colors.length;t++)!function(){var i=D.Lists.colors[t];D.Normalizations.registered[i]=function(e,t,r){switch(e){case"name":return i;case"extract":var a,n=D.RegEx.wrappedValueAlreadyExtracted.test(r)?r:(n={black:"rgb(0, 0, 0)",blue:"rgb(0, 0, 255)",gray:"rgb(128, 128, 128)",green:"rgb(0, 128, 0)",red:"rgb(255, 0, 0)",white:"rgb(255, 255, 255)"},/^[A-z]+$/i.test(r)?a=n[r]!==W?n[r]:n.black:D.RegEx.isHex.test(r)?a="rgb("+D.Values.hexToRgb(r).join(" ")+")":/^rgba?\(/i.test(r)||(a=n.black),(a||r).toString().match(D.RegEx.valueUnwrap)[1].replace(/,(\s+)?/g," "));return(!V||8<V)&&3===n.split(" ").length&&(n+=" 1"),n;case"inject":return/^rgb/.test(r)?r:(V<=8?4===r.split(" ").length&&(r=r.split(/\s+/).slice(0,3).join(" ")):3===r.split(" ").length&&(r+=" 1"),(V<=8?"rgb":"rgba")+"("+r.replace(/\s+/g,",").replace(/\.(\d)+(?=,)/g,"")+")")}}}();function i(e,t,r){if("border-box"===D.getPropertyValue(t,"boxSizing").toString().toLowerCase()!==(r||!1))return 0;for(var a,n=0,e="width"===e?["Left","Right"]:["Top","Bottom"],i=["padding"+e[0],"padding"+e[1],"border"+e[0]+"Width","border"+e[1]+"Width"],o=0;o<i.length;o++)a=parseFloat(D.getPropertyValue(t,i[o])),isNaN(a)||(n+=a);return r?-n:n}function r(a,n){return function(e,t,r){switch(e){case"name":return a;case"extract":return parseFloat(r)+i(a,t,n);case"inject":return parseFloat(r)-i(a,t,n)+"px"}}}D.Normalizations.registered.innerWidth=r("width",!0),D.Normalizations.registered.innerHeight=r("height",!0),D.Normalizations.registered.outerWidth=r("width"),D.Normalizations.registered.outerHeight=r("height")}},Names:{camelCase:function(e){return e.replace(/-(\w)/g,function(e,t){return t.toUpperCase()})},SVGAttribute:function(e){var t="width|height|x|y|cx|cy|r|rx|ry|x1|x2|y1|y2";return(V||G.State.isAndroid&&!G.State.isChrome)&&(t+="|transform"),new RegExp("^("+t+")$","i").test(e)},prefixCheck:function(e){if(G.State.prefixMatches[e])return[G.State.prefixMatches[e],!0];for(var t=["","Webkit","Moz","ms","O"],r=0,a=t.length;r<a;r++){var n=0===r?e:t[r]+e.replace(/^\w/,function(e){return e.toUpperCase()});if(Q.isString(G.State.prefixElement.style[n]))return[G.State.prefixMatches[e]=n,!0]}return[e,!1]}},Values:{hexToRgb:function(e){return e=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(e,t,r,a){return t+t+r+r+a+a}),(e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e))?[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]:[0,0,0]},isCSSNullValue:function(e){return!e||/^(none|auto|transparent|(rgba\(0, ?0, ?0, ?0\)))$/i.test(e)},getUnitType:function(e){return/^(rotate|skew)/i.test(e)?"deg":/(^(scale|scaleX|scaleY|scaleZ|alpha|flexGrow|flexHeight|zIndex|fontWeight)$)|((opacity|red|green|blue|alpha)$)/i.test(e)?"":"px"},getDisplayType:function(e){e=e&&e.tagName.toString().toLowerCase();return/^(b|big|i|small|tt|abbr|acronym|cite|code|dfn|em|kbd|strong|samp|var|a|bdo|br|img|map|object|q|script|span|sub|sup|button|input|label|select|textarea)$/i.test(e)?"inline":/^(li)$/i.test(e)?"list-item":/^(tr)$/i.test(e)?"table-row":/^(table)$/i.test(e)?"table":/^(tbody)$/i.test(e)?"table-row-group":"block"},addClass:function(e,t){var r;e&&(e.classList?e.classList.add(t):Q.isString(e.className)?e.className+=(e.className.length?" ":"")+t:(r=e.getAttribute(V<=7?"className":"class")||"",e.setAttribute("class",r+(r?" ":"")+t)))},removeClass:function(e,t){var r;e&&(e.classList?e.classList.remove(t):Q.isString(e.className)?e.className=e.className.toString().replace(new RegExp("(^|\\s)"+t.split(" ").join("|")+"(\\s|$)","gi")," "):(r=e.getAttribute(V<=7?"className":"class")||"",e.setAttribute("class",r.replace(new RegExp("(^|s)"+t.split(" ").join("|")+"(s|$)","gi")," "))))}},getPropertyValue:function(e,t,r,o){function s(e,t){var r=0;if(V<=8)r=I.css(e,t);else{var a,n=!1,i=(/^(width|height)$/.test(t)&&0===D.getPropertyValue(e,"display")&&(n=!0,D.setPropertyValue(e,"display",D.Values.getDisplayType(e))),function(){n&&D.setPropertyValue(e,"display","none")});if(!o){if("height"===t&&"border-box"!==D.getPropertyValue(e,"boxSizing").toString().toLowerCase())return a=e.offsetHeight-(parseFloat(D.getPropertyValue(e,"borderTopWidth"))||0)-(parseFloat(D.getPropertyValue(e,"borderBottomWidth"))||0)-(parseFloat(D.getPropertyValue(e,"paddingTop"))||0)-(parseFloat(D.getPropertyValue(e,"paddingBottom"))||0),i(),a;if("width"===t&&"border-box"!==D.getPropertyValue(e,"boxSizing").toString().toLowerCase())return a=e.offsetWidth-(parseFloat(D.getPropertyValue(e,"borderLeftWidth"))||0)-(parseFloat(D.getPropertyValue(e,"borderRightWidth"))||0)-(parseFloat(D.getPropertyValue(e,"paddingLeft"))||0)-(parseFloat(D.getPropertyValue(e,"paddingRight"))||0),i(),a}a=H(e)===W?$.getComputedStyle(e,null):H(e).computedStyle?H(e).computedStyle:H(e).computedStyle=$.getComputedStyle(e,null),"borderColor"===t&&(t="borderTopColor"),""!==(r=9===V&&"filter"===t?a.getPropertyValue(t):a[t])&&null!==r||(r=e.style[t]),i()}return r="auto"===r&&/^(top|right|bottom|left)$/i.test(t)&&("fixed"===(a=s(e,"position"))||"absolute"===a&&/top|left/i.test(t))?I(e).position()[t]+"px":r}var a,n,i;if(D.Hooks.registered[t]?(a=D.Hooks.getRoot(i=t),r===W&&(r=D.getPropertyValue(e,D.Names.prefixCheck(a)[0])),D.Normalizations.registered[a]&&(r=D.Normalizations.registered[a]("extract",e,r)),a=D.Hooks.extractValue(i,r)):D.Normalizations.registered[t]&&("transform"!==(i=D.Normalizations.registered[t]("name",e))&&(n=s(e,D.Names.prefixCheck(i)[0]),D.Values.isCSSNullValue(n))&&D.Hooks.templates[t]&&(n=D.Hooks.templates[t][1]),a=D.Normalizations.registered[t]("extract",e,n)),!/^[\d-]/.test(a)){r=H(e);if(r&&r.isSVG&&D.Names.SVGAttribute(t))if(/^(height|width)$/i.test(t))try{a=e.getBBox()[t]}catch(e){a=0}else a=e.getAttribute(t);else a=s(e,D.Names.prefixCheck(t)[0])}return D.Values.isCSSNullValue(a)&&(a=0),2<=G.debug&&console.log("Get "+t+": "+a),a},setPropertyValue:function(e,t,r,a,n){var i,o=t;if("scroll"===t)n.container?n.container["scroll"+n.direction]=r:"Left"===n.direction?$.scrollTo(r,n.alternateValue):$.scrollTo(n.alternateValue,r);else if(D.Normalizations.registered[t]&&"transform"===D.Normalizations.registered[t]("name",e))D.Normalizations.registered[t]("inject",e,r),o="transform",r=H(e).transformCache[t];else{if(D.Hooks.registered[t]&&(n=t,i=D.Hooks.getRoot(t),a=a||D.getPropertyValue(e,i),r=D.Hooks.injectValue(n,r,a),t=i),D.Normalizations.registered[t]&&(r=D.Normalizations.registered[t]("inject",e,r),t=D.Normalizations.registered[t]("name",e)),o=D.Names.prefixCheck(t)[0],V<=8)try{e.style[o]=r}catch(e){G.debug&&console.log("Browser does not support ["+r+"] for ["+o+"]")}else{n=H(e);n&&n.isSVG&&D.Names.SVGAttribute(t)?e.setAttribute(t,r):e.style[o]=r}2<=G.debug&&console.log("Set "+t+" ("+o+"): "+r)}return[o,r]},flushTransformCache:function(t){var r,a,n,i="",e=H(t);(V||G.State.isAndroid&&!G.State.isChrome)&&e&&e.isSVG?(r={translate:[(e=function(e){return parseFloat(D.getPropertyValue(t,e))})("translateX"),e("translateY")],skewX:[e("skewX")],skewY:[e("skewY")],scale:1!==e("scale")?[e("scale"),e("scale")]:[e("scaleX"),e("scaleY")],rotate:[e("rotateZ"),0,0]},I.each(H(t).transformCache,function(e){/^translate/i.test(e)?e="translate":/^scale/i.test(e)?e="scale":/^rotate/i.test(e)&&(e="rotate"),r[e]&&(i+=e+"("+r[e].join(" ")+") ",delete r[e])})):(I.each(H(t).transformCache,function(e){if(a=H(t).transformCache[e],"transformPerspective"===e)return n=a,!0;i+=(e=9===V&&"rotateZ"===e?"rotate":e)+a+" "}),n&&(i="perspective"+n+" "+i)),D.setPropertyValue(t,"transform",i)}}).Hooks.register(),D.Normalizations.register(),G.hook=function(e,a,n){var i;return e=h(e),I.each(e,function(e,t){var r;H(t)===W&&G.init(t),n===W?i===W&&(i=D.getPropertyValue(t,a)):("transform"===(r=D.setPropertyValue(t,a,n))[0]&&G.CSS.flushTransformCache(t),i=r)}),i},(G=I.extend(y=function(){function e(){return t?k.promise||null:r}var t,r,a,P,V,n=arguments[0]&&(arguments[0].p||I.isPlainObject(arguments[0].properties)&&!arguments[0].properties.names||Q.isString(arguments[0].properties)),k=(Q.isWrapped(this)?(t=!1,a=0,r=P=this):(t=!0,a=1,P=n?arguments[0].elements||arguments[0].e:arguments[0]),{promise:null,resolver:null,rejecter:null});if(t&&G.Promise&&(k.promise=new G.Promise(function(e,t){k.resolver=e,k.rejecter=t})),F=n?(V=arguments[0].properties||arguments[0].p,arguments[0].options||arguments[0].o):(V=arguments[a],arguments[a+1]),P=h(P)){var T,i,o,s,l,C=P.length,A=0;if(!/^(stop|finish|finishAll|pause|resume)$/i.test(V)&&!I.isPlainObject(F))for(var F={},u=a+1;u<arguments.length;u++)Q.isArray(arguments[u])||!/^(fast|normal|slow)$/i.test(arguments[u])&&!/^\d/.test(arguments[u])?Q.isString(arguments[u])||Q.isArray(arguments[u])?F.easing=arguments[u]:Q.isFunction(arguments[u])&&(F.complete=arguments[u]):F.duration=arguments[u];switch(V){case"scroll":T="scroll";break;case"reverse":T="reverse";break;case"pause":var c=(new Date).getTime();return I.each(P,function(e,t){v(t,c)}),I.each(G.State.calls,function(e,a){var n=!1;a&&I.each(a[1],function(e,r){var t=F===W?"":F;return!0!==t&&a[2].queue!==t&&(F!==W||!1!==a[2].queue)||(I.each(P,function(e,t){if(t===r)return a[5]={resume:!1},!(n=!0)}),!n&&void 0)})}),e();case"resume":return I.each(P,function(e,t){b(t)}),I.each(G.State.calls,function(e,a){var n=!1;a&&I.each(a[1],function(e,r){var t=F===W?"":F;return!0!==t&&a[2].queue!==t&&(F!==W||!1!==a[2].queue)||!a[5]||(I.each(P,function(e,t){if(t===r)return a[5].resume=!0,!(n=!0)}),!n&&void 0)})}),e();case"finish":case"finishAll":case"stop":I.each(P,function(e,t){H(t)&&H(t).delayTimer&&(clearTimeout(H(t).delayTimer.setTimeout),H(t).delayTimer.next&&H(t).delayTimer.next(),delete H(t).delayTimer),"finishAll"!==V||!0!==F&&!Q.isString(F)||(I.each(I.queue(t,Q.isString(F)?F:""),function(e,t){Q.isFunction(t)&&t()}),I.queue(t,Q.isString(F)?F:"",[]))});var p=[];return I.each(G.State.calls,function(n,i){i&&I.each(i[1],function(e,r){var a=F===W?"":F;if(!0!==a&&i[2].queue!==a&&(F!==W||!1!==i[2].queue))return!0;I.each(P,function(e,t){t===r&&(!0!==F&&!Q.isString(F)||(I.each(I.queue(t,Q.isString(F)?F:""),function(e,t){Q.isFunction(t)&&t(null,!0)}),I.queue(t,Q.isString(F)?F:"",[])),"stop"===V?((t=H(t))&&t.tweensContainer&&(!0===a||""===a)&&I.each(t.tweensContainer,function(e,t){t.endValue=t.currentValue}),p.push(n)):"finish"!==V&&"finishAll"!==V||(i[2].duration=1))})})}),"stop"===V&&(I.each(p,function(e,t){O(t,!0)}),k.promise)&&k.resolver(P),e();default:if(!I.isPlainObject(V)||Q.isEmptyObject(V))return Q.isString(V)&&G.Redirects[V]?(o=(i=I.extend({},F)).duration,s=i.delay||0,!0===i.backwards&&(P=I.extend(!0,[],P).reverse()),I.each(P,function(e,t){parseFloat(i.stagger)?i.delay=s+parseFloat(i.stagger)*e:Q.isFunction(i.stagger)&&(i.delay=s+i.stagger.call(t,e,C)),i.drag&&(i.duration=parseFloat(o)||(/^(callout|transition)/.test(V)?1e3:400),i.duration=Math.max(i.duration*(i.backwards?1-e/C:(e+1)/C),.75*i.duration,200)),G.Redirects[V].call(t,t,i||{},e,C,P,k.promise?k:W)})):(l="Velocity: First argument ("+V+") was not a property map, a known action, or a registered redirect. Aborting.",k.promise?k.rejecter(new Error(l)):$.console&&console.log(l)),e();T="start"}var M={lastParent:null,lastPosition:null,lastFontSize:null,lastPercentToPxWidth:null,lastPercentToPxHeight:null,lastEmToPx:null,remToPx:null,vwToPx:null,vhToPx:null},E=[],d=(I.each(P,function(e,t){Q.isNode(t)&&m(t,e)}),(i=I.extend({},G.defaults,F)).loop=parseInt(i.loop,10),2*i.loop-1);if(i.loop)for(var f=0;f<d;f++){var g={delay:i.delay,progress:i.progress};f===d-1&&(g.display=i.display,g.visibility=i.visibility,g.complete=i.complete),y(P,"reverse",g)}return e()}function m(q,S){var L,e,t,z=I.extend({},G.defaults,F),R={};switch(H(q)===W&&G.init(q),parseFloat(z.delay)&&!1!==z.queue&&I.queue(q,z.queue,function(e,t){if(!0===t)return!0;G.velocityQueueEntryFlag=!0;function r(){G.State.delayedElements[a]=!1,e()}var a,t=G.State.delayedElements.count++;G.State.delayedElements[t]=q,a=t;H(q).delayBegin=(new Date).getTime(),H(q).delay=parseFloat(z.delay),H(q).delayTimer={setTimeout:setTimeout(e,parseFloat(z.delay)),next:r}}),z.duration.toString().toLowerCase()){case"fast":z.duration=200;break;case"normal":z.duration=400;break;case"slow":z.duration=600;break;default:z.duration=parseFloat(z.duration)||1}function r(e){var O,j,t,r,a;if(z.begin&&0===A)try{z.begin.call(P,P)}catch(e){setTimeout(function(){throw e},1)}if("scroll"===T){var n,i,o,s=/^x$/i.test(z.axis)?"Left":"Top",l=parseFloat(z.offset)||0;z.container?Q.isWrapped(z.container)||Q.isNode(z.container)?(z.container=z.container[0]||z.container,o=(n=z.container["scroll"+s])+I(q).position()[s.toLowerCase()]+l):z.container=null:(n=G.State.scrollAnchor[G.State["scrollProperty"+s]],i=G.State.scrollAnchor[G.State["scrollProperty"+("Left"===s?"Top":"Left")]],o=I(q).offset()[s.toLowerCase()]+l),R={scroll:{rootPropertyValue:!1,startValue:n,currentValue:n,endValue:o,unitType:"",easing:z.easing,scrollData:{container:z.container,direction:s,alternateValue:i}},element:q},G.debug&&console.log("tweensContainer (scroll): ",R.scroll,q)}else if("reverse"===T){if(!(O=H(q)))return;if(!O.tweensContainer)return void I.dequeue(q,z.queue);for(var u in"none"===O.opts.display&&(O.opts.display="auto"),"hidden"===O.opts.visibility&&(O.opts.visibility="visible"),O.opts.loop=!1,O.opts.begin=null,O.opts.complete=null,F.easing||delete z.easing,F.duration||delete z.duration,z=I.extend({},O.opts,z),j=I.extend(!0,{},O?O.tweensContainer:null))j.hasOwnProperty(u)&&"element"!==u&&(t=j[u].startValue,j[u].startValue=j[u].currentValue=j[u].endValue,j[u].endValue=t,Q.isEmptyObject(F)||(j[u].easing=z.easing),G.debug)&&console.log("reverse tweensContainer ("+u+"): "+JSON.stringify(j[u]),q);R=j}else if("start"===T){(O=H(q))&&O.tweensContainer&&!0===O.isAnimating&&(j=O.tweensContainer);var c,p=function(e,t){var r=D.Hooks.getRoot(e),a=!1,n=t[0],i=t[1],o=t[2];if(O&&O.isSVG||"tween"===r||!1!==D.Names.prefixCheck(r)[1]||D.Normalizations.registered[r]!==W){(z.display!==W&&null!==z.display&&"none"!==z.display||z.visibility!==W&&"hidden"!==z.visibility)&&/opacity|filter/.test(e)&&!o&&0!==n&&(o=0),z._cacheValues&&j&&j[e]?(o===W&&(o=j[e].endValue+j[e].unitType),a=O.rootPropertyValueCache[r]):D.Hooks.registered[e]?o===W?(a=D.getPropertyValue(q,r),o=D.getPropertyValue(q,e,a)):a=D.Hooks.templates[r][1]:o===W&&(o=D.getPropertyValue(q,e));var s,l,u=!1,t=function(e,t){var t=(t||"0").toString().toLowerCase().replace(/[%A-z]+$/,function(e){return r=e,""}),r=r||D.Values.getUnitType(e);return[t,r]};if(o!==n&&Q.isString(o)&&Q.isString(n)){for(var c="",p=0,d=0,f=[],g=[],m=0,h=0,y=0,o=D.Hooks.fixColors(o),n=D.Hooks.fixColors(n);p<o.length&&d<n.length;){var v=o[p],b=n[d];if(/[\d\.-]/.test(v)&&/[\d\.-]/.test(b)){for(var x=v,w=b,S=".",P=".";++p<o.length;){if((v=o[p])===S)S="..";else if(!/\d/.test(v))break;x+=v}for(;++d<n.length;){if((b=n[d])===P)P="..";else if(!/\d/.test(b))break;w+=b}var V,k,T=D.Hooks.getUnit(o,p),C=D.Hooks.getUnit(n,d);p+=T.length,d+=C.length,T===C?x===w?c+=x+T:(c+="{"+f.length+(h?"!":"")+"}"+T,f.push(parseFloat(x)),g.push(parseFloat(w))):(V=parseFloat(x),k=parseFloat(w),c+=(m<5?"calc":"")+"("+(V?"{"+f.length+(h?"!":"")+"}":"0")+T+" + "+(k?"{"+(f.length+(V?1:0))+(h?"!":"")+"}":"0")+C+")",V&&(f.push(V),g.push(0)),k&&(f.push(0),g.push(k)))}else{if(v!==b){m=0;break}c+=v,p++,d++,0===m&&"c"===v||1===m&&"a"===v||2===m&&"l"===v||3===m&&"c"===v||4<=m&&"("===v?m++:(m&&m<5||4<=m&&")"===v&&--m<5)&&(m=0),0===h&&"r"===v||1===h&&"g"===v||2===h&&"b"===v||3===h&&"a"===v||3<=h&&"("===v?(3===h&&"a"===v&&(y=1),h++):y&&","===v?3<++y&&(h=y=0):(y&&h<(y?5:4)||(y?4:3)<=h&&")"===v&&--h<(y?5:4))&&(h=y=0)}}p===o.length&&d===n.length||(G.debug&&console.error('Trying to pattern match mis-matched strings ["'+n+'", "'+o+'"]'),c=W),c&&(f.length?(G.debug&&console.log('Pattern found "'+c+'" -> ',f,g,"["+o+","+n+"]"),o=f,n=g,s=l=""):c=W)}c||(o=(F=t(e,o))[0],l=F[1],n=(F=t(e,n))[0].replace(/^([+-\/*])=/,function(e,t){return u=t,""}),s=F[1],o=parseFloat(o)||0,n=parseFloat(n)||0,"%"===s&&(/^(fontSize|lineHeight)$/.test(e)?(n/=100,s="em"):/^scale/.test(e)?(n/=100,s=""):/(Red|Green|Blue)$/i.test(e)&&(n=n/100*255,s="")));var A,F,E,N;if(/[\/*]/.test(u))s=l;else if(l!==s&&0!==o)if(0===n)s=l;else{L=L||(t={myParent:q.parentNode||B.body,position:D.getPropertyValue(q,"position"),fontSize:D.getPropertyValue(q,"fontSize")},F=t.position===M.lastPosition&&t.myParent===M.lastParent,E=t.fontSize===M.lastFontSize,M.lastParent=t.myParent,M.lastPosition=t.position,M.lastFontSize=t.fontSize,N={},E&&F?(N.emToPx=M.lastEmToPx,N.percentToPxWidth=M.lastPercentToPxWidth,N.percentToPxHeight=M.lastPercentToPxHeight):(A=O&&O.isSVG?B.createElementNS("http://www.w3.org/2000/svg","rect"):B.createElement("div"),G.init(A),t.myParent.appendChild(A),I.each(["overflow","overflowX","overflowY"],function(e,t){G.CSS.setPropertyValue(A,t,"hidden")}),G.CSS.setPropertyValue(A,"position",t.position),G.CSS.setPropertyValue(A,"fontSize",t.fontSize),G.CSS.setPropertyValue(A,"boxSizing","content-box"),I.each(["minWidth","maxWidth","width","minHeight","maxHeight","height"],function(e,t){G.CSS.setPropertyValue(A,t,"100%")}),G.CSS.setPropertyValue(A,"paddingLeft","100em"),N.percentToPxWidth=M.lastPercentToPxWidth=(parseFloat(D.getPropertyValue(A,"width",null,!0))||1)/100,N.percentToPxHeight=M.lastPercentToPxHeight=(parseFloat(D.getPropertyValue(A,"height",null,!0))||1)/100,N.emToPx=M.lastEmToPx=(parseFloat(D.getPropertyValue(A,"paddingLeft"))||1)/100,t.myParent.removeChild(A)),null===M.remToPx&&(M.remToPx=parseFloat(D.getPropertyValue(B.body,"fontSize"))||16),null===M.vwToPx&&(M.vwToPx=parseFloat($.innerWidth)/100,M.vhToPx=parseFloat($.innerHeight)/100),N.remToPx=M.remToPx,N.vwToPx=M.vwToPx,N.vhToPx=M.vhToPx,1<=G.debug&&console.log("Unit ratios: "+JSON.stringify(N),q),N);var H=/margin|padding|left|right|width|text|word|letter/i.test(e)||/X$/.test(e)||"x"===e?"x":"y";switch(l){case"%":o*="x"==H?L.percentToPxWidth:L.percentToPxHeight;break;case"px":break;default:o*=L[l+"ToPx"]}switch(s){case"%":o*=1/("x"==H?L.percentToPxWidth:L.percentToPxHeight);break;case"px":break;default:o*=1/L[s+"ToPx"]}}switch(u){case"+":n=o+n;break;case"-":n=o-n;break;case"*":n*=o;break;case"/":n=o/n}R[e]={rootPropertyValue:a,startValue:o,currentValue:o,endValue:n,unitType:s,easing:i},c&&(R[e].pattern=c),G.debug&&console.log("tweensContainer ("+e+"): "+JSON.stringify(R[e]),q)}else G.debug&&console.log("Skipping ["+r+"] due to a lack of browser support.")};for(c in V)if(V.hasOwnProperty(c)){var d=D.Names.camelCase(c),f=(f=V[c],a=r=h=g=void 0,Q.isFunction(f)&&(f=f.call(q,S,C)),Q.isArray(f)?(h=f[0],a=!Q.isArray(f[1])&&/^[\d-]/.test(f[1])||Q.isFunction(f[1])||D.RegEx.isHex.test(f[1])?f[1]:Q.isString(f[1])&&!D.RegEx.isHex.test(f[1])&&G.Easings[f[1]]||Q.isArray(f[1])?(r=g?f[1]:X(f[1],z.duration),f[2]):f[1]||f[2]):h=f,g||(r=r||z.easing),[(h=Q.isFunction(h)?h.call(q,S,C):h)||0,r,a=Q.isFunction(a)?a.call(q,S,C):a]);if(N(D.Lists.colors)){var g=f[0],m=f[1],h=f[2];if(D.RegEx.isHex.test(g)){for(var y=["Red","Green","Blue"],v=D.Values.hexToRgb(g),b=h?D.Values.hexToRgb(h):W,x=0;x<y.length;x++){var w=[v[x]];m&&w.push(m),b!==W&&w.push(b[x]),p(d+y[x],w)}continue}}p(d,f)}R.element=q}R.element&&(D.Values.addClass(q,"velocity-animating"),E.push(R),(O=H(q))&&(""===z.queue&&(O.tweensContainer=R,O.opts=z),O.isAnimating=!0),A===C-1?(G.State.calls.push([E,P,z,null,k.resolver,null,0]),!1===G.State.isTicking&&(G.State.isTicking=!0,Y())):A++)}!1!==G.mock&&(!0===G.mock?z.duration=z.delay=1:(z.duration*=parseFloat(G.mock)||1,z.delay*=parseFloat(G.mock)||1)),z.easing=X(z.easing,z.duration),z.begin&&!Q.isFunction(z.begin)&&(z.begin=null),z.progress&&!Q.isFunction(z.progress)&&(z.progress=null),z.complete&&!Q.isFunction(z.complete)&&(z.complete=null),z.display!==W&&null!==z.display&&(z.display=z.display.toString().toLowerCase(),"auto"===z.display)&&(z.display=G.CSS.Values.getDisplayType(q)),z.visibility!==W&&null!==z.visibility&&(z.visibility=z.visibility.toString().toLowerCase()),z.mobileHA=z.mobileHA&&G.State.isMobile&&!G.State.isGingerbread,!1===z.queue?z.delay?(e=G.State.delayedElements.count++,G.State.delayedElements[e]=q,t=e,e=function(){G.State.delayedElements[t]=!1,r()},H(q).delayBegin=(new Date).getTime(),H(q).delay=parseFloat(z.delay),H(q).delayTimer={setTimeout:setTimeout(r,parseFloat(z.delay)),next:e}):r():I.queue(q,z.queue,function(e,t){if(!0===t)return k.promise&&k.resolver(P),!0;G.velocityQueueEntryFlag=!0,r()}),""!==z.queue&&"fx"!==z.queue||"inprogress"===I.queue(q)[0]||I.dequeue(q)}k.promise&&(V&&F&&!1===F.promiseRejectEmpty?k.resolver():k.rejecter())},G)).animate=y,T=$.requestAnimationFrame||r,G.State.isMobile||B.hidden===W||((s=function(){B.hidden?(T=function(e){return setTimeout(function(){e(!0)},16)},Y()):T=$.requestAnimationFrame||r})(),B.addEventListener("visibilitychange",s)),t.Velocity=G,t!==$&&(t.fn.velocity=y,t.fn.velocity.defaults=G.defaults),I.each(["Down","Up"],function(e,c){G.Redirects["slide"+c]=function(r,e,a,t,n,i){var e=I.extend({},e),o=e.begin,s=e.complete,l={},u={height:"",marginTop:"",marginBottom:"",paddingTop:"",paddingBottom:""};e.display===W&&(e.display="Down"===c?"inline"===G.CSS.Values.getDisplayType(r)?"inline-block":"block":"none"),e.begin=function(){for(var e in 0===a&&o&&o.call(n,n),u){var t;u.hasOwnProperty(e)&&(l[e]=r.style[e],t=D.getPropertyValue(r,e),u[e]="Down"===c?[t,0]:[0,t])}l.overflow=r.style.overflow,r.style.overflow="hidden"},e.complete=function(){for(var e in l)l.hasOwnProperty(e)&&(r.style[e]=l[e]);a===t-1&&(s&&s.call(n,n),i)&&i.resolver(n)},G(r,u,e)}}),I.each(["In","Out"],function(e,l){G.Redirects["fade"+l]=function(e,t,r,a,n,i){var t=I.extend({},t),o=t.complete,s={opacity:"In"===l?1:0};0!==r&&(t.begin=null),t.complete=r!==a-1?null:function(){o&&o.call(n,n),i&&i.resolver(n)},t.display===W&&(t.display="In"===l?"auto":"none"),G(this,s,t)}}),G;function H(e){e=I.data(e,"velocity");return null===e?W:e}function v(e,t){e=H(e);e&&e.delayTimer&&!e.delayPaused&&(e.delayRemaining=e.delay-t+e.delayBegin,e.delayPaused=!0,clearTimeout(e.delayTimer.setTimeout))}function b(e){e=H(e);e&&e.delayTimer&&e.delayPaused&&(e.delayPaused=!1,e.delayTimer.setTimeout=setTimeout(e.delayTimer.next,e.delayRemaining))}function l(h,t,y,r){var v=4,b=.001,x=1e-7,w=10,S=11,P=1/(S-1),e="Float32Array"in $;if(4!==arguments.length)return!1;for(var a=0;a<4;++a)if("number"!=typeof arguments[a]||isNaN(arguments[a])||!isFinite(arguments[a]))return!1;h=Math.min(h,1),y=Math.min(y,1),h=Math.max(h,0),y=Math.max(y,0);var V=new(e?Float32Array:Array)(S);function n(e,t){return 1-3*t+3*e}function k(e,t,r){return((n(t,r)*e+(3*r-6*t))*e+3*t)*e}function T(e,t,r){return 3*n(t,r)*e*e+2*(3*r-6*t)*e+3*t}function i(e){for(var t=0,r=1,a=S-1;r!==a&&V[r]<=e;++r)t+=P;var n=t+(e-V[--r])/(V[r+1]-V[r])*P,i=T(n,h,y);if(b<=i){for(var o=e,s=n,l=0;l<v;++l){var u=T(s,h,y);if(0===u)return s;s-=(k(s,h,y)-o)/u}return s}if(0===i)return n;for(var c,p,d=e,f=t,g=t+P,m=0;0<(c=k(p=f+(g-f)/2,h,y)-d)?g=p:f=p,Math.abs(c)>x&&++m<w;);return p}var o=!1;function s(){if(o=!0,h!==t||y!==r)for(var e=0;e<S;++e)V[e]=k(e*P,h,y)}function l(e){return o||s(),h===t&&y===r?e:0===e?0:1===e?1:k(i(e),t,r)}l.getControlPoints=function(){return[{x:h,y:t},{x:y,y:r}]};var u="generateBezier("+[h,t,y,r]+")";return l.toString=function(){return u},l}function x(e){return-e.tension*e.x-e.friction*e.v}function w(e,t,r){r={x:e.x+r.dx*t,v:e.v+r.dv*t,tension:e.tension,friction:e.friction};return{dx:r.v,dv:x(r)}}function X(e,t){var r=e;return Q.isString(e)?G.Easings[e]||(r=!1):r=Q.isArray(e)&&1===e.length?function(t){return function(e){return Math.round(e*t)*(1/t)}}.apply(null,e):Q.isArray(e)&&2===e.length?o.apply(null,e.concat([t])):!(!Q.isArray(e)||4!==e.length)&&l.apply(null,e),r=!1===r?G.Easings[G.defaults.easing]?G.defaults.easing:i:r}function Y(e){if(e){var t=G.timestamp&&!0!==e?e:k.now(),r=G.State.calls.length;1e4<r&&(G.State.calls=function(e){for(var t=-1,r=e?e.length:0,a=[];++t<r;){var n=e[t];n&&a.push(n)}return a}(G.State.calls),r=G.State.calls.length);for(var a=0;a<r;a++)if(G.State.calls[a]){var n=G.State.calls[a],i=n[0],o=n[2],s=!(p=n[3]),l=null,u=n[5],c=n[6],p=p||(G.State.calls[a][3]=t-16);if(u){if(!0!==u.resume)continue;p=n[3]=Math.round(t-c-16),n[5]=null}for(var c=n[6]=t-p,d=Math.min(c/o.duration,1),f=0,g=i.length;f<g;f++){var m=i[f],h=m.element;if(H(h)){var y,v,b,x,w,S,P=!1;for(y in o.display!==W&&null!==o.display&&"none"!==o.display&&("flex"===o.display&&I.each(["-webkit-box","-moz-box","-ms-flexbox","-webkit-flex"],function(e,t){D.setPropertyValue(h,"display",t)}),D.setPropertyValue(h,"display",o.display)),o.visibility!==W&&"hidden"!==o.visibility&&D.setPropertyValue(h,"visibility",o.visibility),m)m.hasOwnProperty(y)&&"element"!==y&&(v=m[y],b=Q.isString(v.easing)?G.Easings[v.easing]:v.easing,x=Q.isString(v.pattern)?v.pattern.replace(/{(\d+)(!)?}/g,1===d?function(e,t,r){t=v.endValue[t];return r?Math.round(t):t}:function(e,t,r){var a=v.startValue[t],t=v.endValue[t]-a,a=a+t*b(d,o,t);return r?Math.round(a):a}):1===d?v.endValue:(x=v.endValue-v.startValue,v.startValue+x*b(d,o,x)),!s&&x===v.currentValue||(v.currentValue=x,"tween"===y?l=x:(D.Hooks.registered[y]&&(w=D.Hooks.getRoot(y),S=H(h).rootPropertyValueCache[w])&&(v.rootPropertyValue=S),S=D.setPropertyValue(h,y,v.currentValue+(V<9&&0===parseFloat(x)?"":v.unitType),v.rootPropertyValue,v.scrollData),D.Hooks.registered[y]&&(D.Normalizations.registered[w]?H(h).rootPropertyValueCache[w]=D.Normalizations.registered[w]("extract",null,S[1]):H(h).rootPropertyValueCache[w]=S[1]),"transform"===S[0]&&(P=!0))));o.mobileHA&&H(h).transformCache.translate3d===W&&(H(h).transformCache.translate3d="(0px, 0px, 0px)",P=!0),P&&D.flushTransformCache(h)}}o.display!==W&&"none"!==o.display&&(G.State.calls[a][2].display=!1),o.visibility!==W&&"hidden"!==o.visibility&&(G.State.calls[a][2].visibility=!1),o.progress&&o.progress.call(n[1],n[1],d,Math.max(0,p+o.duration-t),p,l),1===d&&O(a)}}G.State.isTicking&&T(Y)}function O(e,t){if(G.State.calls[e]){for(var r=G.State.calls[e][0],a=G.State.calls[e][1],n=G.State.calls[e][2],i=G.State.calls[e][4],o=!1,s=0,l=r.length;s<l;s++){var u,c=r[s].element,p=(t||n.loop||("none"===n.display&&D.setPropertyValue(c,"display",n.display),"hidden"===n.visibility&&D.setPropertyValue(c,"visibility",n.visibility)),H(c));if(!0===n.loop||I.queue(c)[1]!==W&&/\.velocityQueueEntryFlag/i.test(I.queue(c)[1])||p&&(p.isAnimating=!1,u=!(p.rootPropertyValueCache={}),I.each(D.Lists.transforms3D,function(e,t){var r=/^scale/.test(t)?1:0,a=p.transformCache[t];p.transformCache[t]!==W&&new RegExp("^\\("+r+"[^.]").test(a)&&(u=!0,delete p.transformCache[t])}),n.mobileHA&&(u=!0,delete p.transformCache.translate3d),u&&D.flushTransformCache(c),D.Values.removeClass(c,"velocity-animating")),!t&&n.complete&&!n.loop&&s===l-1)try{n.complete.call(a,a)}catch(e){setTimeout(function(){throw e},1)}i&&!0!==n.loop&&i(a),p&&!0===n.loop&&!t&&(I.each(p.tweensContainer,function(e,t){var r;/^rotate/.test(e)&&(parseFloat(t.startValue)-parseFloat(t.endValue))%360==0&&(r=t.startValue,t.startValue=t.endValue,t.endValue=r),/^backgroundPosition/.test(e)&&100===parseFloat(t.endValue)&&"%"===t.unitType&&(t.endValue=0,t.startValue=100)}),G(c,"reverse",{loop:!0,delay:n.delay})),!1!==n.queue&&I.dequeue(c,n.queue)}G.State.calls[e]=!1;for(var d=0,f=G.State.calls.length;d<f;d++)if(!1!==G.State.calls[d]){o=!0;break}!1===o&&(G.State.isTicking=!1,delete G.State.calls,G.State.calls=[])}}jQuery.fn.velocity=jQuery.fn.animate});
\ No newline at end of file
+!function(t){if(!t.jQuery){for(var u=function(e,t){return new u.fn.init(e,t)},n=(u.isWindow=function(e){return e&&e===e.window},u.type=function(e){return e?"object"==typeof e||"function"==typeof e?r[i.call(e)]||"object":typeof e:e+""},u.isArray=Array.isArray||function(e){return"array"===u.type(e)},u.isPlainObject=function(e){if(!e||"object"!==u.type(e)||e.nodeType||u.isWindow(e))return!1;try{if(e.constructor&&!a.call(e,"constructor")&&!a.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(e){return!1}for(var t in e);return void 0===t||a.call(e,t)},u.each=function(e,t,r){var a=0,n=e.length,i=s(e);if(r){if(i)for(;a<n&&!1!==t.apply(e[a],r);a++);else for(a in e)if(e.hasOwnProperty(a)&&!1===t.apply(e[a],r))break}else if(i)for(;a<n&&!1!==t.call(e[a],a,e[a]);a++);else for(a in e)if(e.hasOwnProperty(a)&&!1===t.call(e[a],a,e[a]))break;return e},u.data=function(e,t,r){var a;return void 0===r?(a=(a=e[u.expando])&&n[a],void 0===t?a:a&&t in a?a[t]:void 0):void 0!==t?(a=e[u.expando]||(e[u.expando]=++u.uuid),n[a]=n[a]||{},n[a][t]=r):void 0},u.removeData=function(e,t){var e=e[u.expando],r=e&&n[e];r&&(t?u.each(t,function(e,t){delete r[t]}):delete n[e])},u.extend=function(){var e,t,r,a,n,i=arguments[0]||{},o=1,s=arguments.length,l=!1;for("boolean"==typeof i&&(l=i,i=arguments[o]||{},o++),"object"!=typeof i&&"function"!==u.type(i)&&(i={}),o===s&&(i=this,o--);o<s;o++)if(a=arguments[o])for(r in a)a.hasOwnProperty(r)&&(n=i[r],i!==(t=a[r]))&&(l&&t&&(u.isPlainObject(t)||(e=u.isArray(t)))?(n=e?(e=!1,n&&u.isArray(n)?n:[]):n&&u.isPlainObject(n)?n:{},i[r]=u.extend(l,n,t)):void 0!==t&&(i[r]=t));return i},u.queue=function(e,t,r){var a;if(e)return a=u.data(e,t=(t||"fx")+"queue"),r?(!a||u.isArray(r)?a=u.data(e,t,function(e,t){if(t=t||[],e)if(s(Object(e))){for(var r=t,a="string"==typeof e?[e]:e,n=+a.length,i=0,o=r.length;i<n;)r[o++]=a[i++];if(n!=n)for(;void 0!==a[i];)r[o++]=a[i++];r.length=o}else[].push.call(t,e);return t}(r)):a.push(r),a):a||[]},u.dequeue=function(e,n){u.each(e.nodeType?[e]:e,function(e,t){n=n||"fx";var r=u.queue(t,n),a=r.shift();(a="inprogress"===a?r.shift():a)&&("fx"===n&&r.unshift("inprogress"),a.call(t,function(){u.dequeue(t,n)}))})},u.fn=u.prototype={init:function(e){if(e.nodeType)return this[0]=e,this;throw new Error("Not a DOM node.")},offset:function(){var e=this[0].getBoundingClientRect?this[0].getBoundingClientRect():{top:0,left:0};return{top:e.top+(t.pageYOffset||document.scrollTop||0)-(document.clientTop||0),left:e.left+(t.pageXOffset||document.scrollLeft||0)-(document.clientLeft||0)}},position:function(){var e=this[0],t=function(e){for(var t=e.offsetParent;t&&"html"!==t.nodeName.toLowerCase()&&t.style&&"static"===t.style.position.toLowerCase();)t=t.offsetParent;return t||document}(e),r=this.offset(),a=/^(?:body|html)$/i.test(t.nodeName)?{top:0,left:0}:u(t).offset();return r.top-=parseFloat(e.style.marginTop)||0,r.left-=parseFloat(e.style.marginLeft)||0,t.style&&(a.top+=parseFloat(t.style.borderTopWidth)||0,a.left+=parseFloat(t.style.borderLeftWidth)||0),{top:r.top-a.top,left:r.left-a.left}}},{}),r=(u.expando="velocity"+(new Date).getTime(),u.uuid=0,{}),a=r.hasOwnProperty,i=r.toString,e="Boolean Number String Function Array Date RegExp Object Error".split(" "),o=0;o<e.length;o++)r["[object "+e[o]+"]"]=e[o].toLowerCase();u.fn.init.prototype=u.fn,t.Velocity={Utilities:u}}function s(e){var t=e.length,r=u.type(e);return"function"!==r&&!u.isWindow(e)&&(!(1!==e.nodeType||!t)||"array"===r||0===t||"number"==typeof t&&0<t&&t-1 in e)}}(window),function(e){"object"==typeof module&&"object"==typeof module.exports?module.exports=e():"function"==typeof define&&define.amd?define(e):e()}(function(){var a,e,t=window.jQuery||window.Zepto||window,$=window,B=window?window.document:void 0,W=void 0,V=function(){if(B.documentMode)return B.documentMode;for(var e=7;4<e;e--){var t=B.createElement("div");if(t.innerHTML="\x3c!--[if IE "+e+"]><span></span><![endif]--\x3e",t.getElementsByTagName("span").length)return t=null,e}return W}(),r=(a=0,$.webkitRequestAnimationFrame||$.mozRequestAnimationFrame||function(e){var t=(new Date).getTime(),r=Math.max(0,16-(t-a));return a=t+r,setTimeout(function(){e(t+r)},r)}),k=("function"!=typeof(s=$.performance||{}).now&&(e=s.timing&&s.timing.navigationStart?s.timing.navigationStart:(new Date).getTime(),s.now=function(){return(new Date).getTime()-e}),s);function N(){return Array.prototype.includes?function(e,t){return e.includes(t)}:Array.prototype.indexOf?function(e,t){return 0<=e.indexOf(t)}:function(e,t){for(var r=0;r<e.length;r++)if(e[r]===t)return!0;return!1}}var n=function(){var s=Array.prototype.slice;try{return s.call(B.documentElement),s}catch(e){return function(e,t){var r=this.length;if("number"!=typeof e&&(e=0),"number"!=typeof t&&(t=r),this.slice)return s.call(this,e,t);var a,n=[],i=0<=e?e:Math.max(0,r+e),o=(t<0?r+t:Math.min(t,r))-i;if(0<o)if(n=new Array(o),this.charAt)for(a=0;a<o;a++)n[a]=this.charAt(i+a);else for(a=0;a<o;a++)n[a]=this[i+a];return n}}}();function h(e){return Q.isWrapped(e)?e=n.call(e):Q.isNode(e)&&(e=[e]),e}var I,i,o,D,y,G,T,Q={isNumber:function(e){return"number"==typeof e},isString:function(e){return"string"==typeof e},isArray:Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)},isFunction:function(e){return"[object Function]"===Object.prototype.toString.call(e)},isNode:function(e){return e&&e.nodeType},isWrapped:function(e){return e&&e!==$&&Q.isNumber(e.length)&&!Q.isString(e)&&!Q.isFunction(e)&&!Q.isNode(e)&&(0===e.length||Q.isNode(e[0]))},isSVG:function(e){return $.SVGElement&&e instanceof $.SVGElement},isEmptyObject:function(e){for(var t in e)if(e.hasOwnProperty(t))return!1;return!0}},s=!1;if(t.fn&&t.fn.jquery?(I=t,s=!0):I=$.Velocity.Utilities,V<=8&&!s)throw new Error("Velocity: IE8 and below require jQuery to be loaded before Velocity.");if(!(V<=7))return i="swing",G={State:{isMobile:/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test($.navigator.userAgent),isAndroid:/Android/i.test($.navigator.userAgent),isGingerbread:/Android 2\.3\.[3-7]/i.test($.navigator.userAgent),isChrome:$.chrome,isFirefox:/Firefox/i.test($.navigator.userAgent),prefixElement:B.createElement("div"),prefixMatches:{},scrollAnchor:null,scrollPropertyLeft:null,scrollPropertyTop:null,isTicking:!1,calls:[],delayedElements:{count:0}},CSS:{},Utilities:I,Redirects:{},Easings:{},Promise:$.Promise,defaults:{queue:"",duration:400,easing:i,begin:W,complete:W,progress:W,display:W,visibility:W,loop:!1,delay:!1,mobileHA:!0,_cacheValues:!0,promiseRejectEmpty:!0},init:function(e){I.data(e,"velocity",{isSVG:Q.isSVG(e),isAnimating:!1,computedStyle:null,tweensContainer:null,rootPropertyValueCache:{},transformCache:{}})},hook:null,mock:!1,version:{major:1,minor:5,patch:2},debug:!1,timestamp:!0,pauseAll:function(r){var a=(new Date).getTime();I.each(G.State.calls,function(e,t){if(t){if(r!==W&&(t[2].queue!==r||!1===t[2].queue))return!0;t[5]={resume:!1}}}),I.each(G.State.delayedElements,function(e,t){t&&v(t,a)})},resumeAll:function(r){var e=(new Date).getTime();I.each(G.State.calls,function(e,t){if(t){if(r!==W&&(t[2].queue!==r||!1===t[2].queue))return!0;t[5]&&(t[5].resume=!0)}}),I.each(G.State.delayedElements,function(e,t){t&&b(t)})}},$.pageYOffset!==W?(G.State.scrollAnchor=$,G.State.scrollPropertyLeft="pageXOffset",G.State.scrollPropertyTop="pageYOffset"):(G.State.scrollAnchor=B.documentElement||B.body.parentNode||B.body,G.State.scrollPropertyLeft="scrollLeft",G.State.scrollPropertyTop="scrollTop"),o=function e(t,r,a){var n,i,o,s,l,u,c,p,d,f,g={x:-1,v:0,tension:null,friction:null},m=[0],h=0;for(t=parseFloat(t)||500,r=parseFloat(r)||20,a=a||null,g.tension=t,g.friction=r,i=(n=null!==a)?(h=e(t,r))/a*.016:.016;;)if(l=i,u=f=d=p=c=u=void 0,u={dx:(s=o||g).v,dv:x(s)},c=w(s,.5*l,u),p=w(s,.5*l,c),d=w(s,l,p),f=1/6*(u.dx+2*(c.dx+p.dx)+d.dx),u=1/6*(u.dv+2*(c.dv+p.dv)+d.dv),s.x=s.x+f*l,s.v=s.v+u*l,o=s,m.push(1+o.x),h+=16,!(1e-4<Math.abs(o.x)&&1e-4<Math.abs(o.v)))break;return n?function(e){return m[e*(m.length-1)|0]}:h},G.Easings={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},spring:function(e){return 1-Math.cos(4.5*e*Math.PI)*Math.exp(6*-e)}},I.each([["ease",[.25,.1,.25,1]],["ease-in",[.42,0,1,1]],["ease-out",[0,0,.58,1]],["ease-in-out",[.42,0,.58,1]],["easeInSine",[.47,0,.745,.715]],["easeOutSine",[.39,.575,.565,1]],["easeInOutSine",[.445,.05,.55,.95]],["easeInQuad",[.55,.085,.68,.53]],["easeOutQuad",[.25,.46,.45,.94]],["easeInOutQuad",[.455,.03,.515,.955]],["easeInCubic",[.55,.055,.675,.19]],["easeOutCubic",[.215,.61,.355,1]],["easeInOutCubic",[.645,.045,.355,1]],["easeInQuart",[.895,.03,.685,.22]],["easeOutQuart",[.165,.84,.44,1]],["easeInOutQuart",[.77,0,.175,1]],["easeInQuint",[.755,.05,.855,.06]],["easeOutQuint",[.23,1,.32,1]],["easeInOutQuint",[.86,0,.07,1]],["easeInExpo",[.95,.05,.795,.035]],["easeOutExpo",[.19,1,.22,1]],["easeInOutExpo",[1,0,0,1]],["easeInCirc",[.6,.04,.98,.335]],["easeOutCirc",[.075,.82,.165,1]],["easeInOutCirc",[.785,.135,.15,.86]]],function(e,t){G.Easings[t[0]]=l.apply(null,t[1])}),(D=G.CSS={RegEx:{isHex:/^#([A-f\d]{3}){1,2}$/i,valueUnwrap:/^[A-z]+\((.*)\)$/i,wrappedValueAlreadyExtracted:/[0-9.]+ [0-9.]+ [0-9.]+( [0-9.]+)?/,valueSplit:/([A-z]+\(.+\))|(([A-z0-9#-.]+?)(?=\s|$))/gi},Lists:{colors:["fill","stroke","stopColor","color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],transformsBase:["translateX","translateY","scale","scaleX","scaleY","skewX","skewY","rotateZ"],transforms3D:["transformPerspective","translateZ","scaleZ","rotateX","rotateY"],units:["%","em","ex","ch","rem","vw","vh","vmin","vmax","cm","mm","Q","in","pc","pt","px","deg","grad","rad","turn","s","ms"],colorNames:{aliceblue:"240,248,255",antiquewhite:"250,235,215",aquamarine:"127,255,212",aqua:"0,255,255",azure:"240,255,255",beige:"245,245,220",bisque:"255,228,196",black:"0,0,0",blanchedalmond:"255,235,205",blueviolet:"138,43,226",blue:"0,0,255",brown:"165,42,42",burlywood:"222,184,135",cadetblue:"95,158,160",chartreuse:"127,255,0",chocolate:"210,105,30",coral:"255,127,80",cornflowerblue:"100,149,237",cornsilk:"255,248,220",crimson:"220,20,60",cyan:"0,255,255",darkblue:"0,0,139",darkcyan:"0,139,139",darkgoldenrod:"184,134,11",darkgray:"169,169,169",darkgrey:"169,169,169",darkgreen:"0,100,0",darkkhaki:"189,183,107",darkmagenta:"139,0,139",darkolivegreen:"85,107,47",darkorange:"255,140,0",darkorchid:"153,50,204",darkred:"139,0,0",darksalmon:"233,150,122",darkseagreen:"143,188,143",darkslateblue:"72,61,139",darkslategray:"47,79,79",darkturquoise:"0,206,209",darkviolet:"148,0,211",deeppink:"255,20,147",deepskyblue:"0,191,255",dimgray:"105,105,105",dimgrey:"105,105,105",dodgerblue:"30,144,255",firebrick:"178,34,34",floralwhite:"255,250,240",forestgreen:"34,139,34",fuchsia:"255,0,255",gainsboro:"220,220,220",ghostwhite:"248,248,255",gold:"255,215,0",goldenrod:"218,165,32",gray:"128,128,128",grey:"128,128,128",greenyellow:"173,255,47",green:"0,128,0",honeydew:"240,255,240",hotpink:"255,105,180",indianred:"205,92,92",indigo:"75,0,130",ivory:"255,255,240",khaki:"240,230,140",lavenderblush:"255,240,245",lavender:"230,230,250",lawngreen:"124,252,0",lemonchiffon:"255,250,205",lightblue:"173,216,230",lightcoral:"240,128,128",lightcyan:"224,255,255",lightgoldenrodyellow:"250,250,210",lightgray:"211,211,211",lightgrey:"211,211,211",lightgreen:"144,238,144",lightpink:"255,182,193",lightsalmon:"255,160,122",lightseagreen:"32,178,170",lightskyblue:"135,206,250",lightslategray:"119,136,153",lightsteelblue:"176,196,222",lightyellow:"255,255,224",limegreen:"50,205,50",lime:"0,255,0",linen:"250,240,230",magenta:"255,0,255",maroon:"128,0,0",mediumaquamarine:"102,205,170",mediumblue:"0,0,205",mediumorchid:"186,85,211",mediumpurple:"147,112,219",mediumseagreen:"60,179,113",mediumslateblue:"123,104,238",mediumspringgreen:"0,250,154",mediumturquoise:"72,209,204",mediumvioletred:"199,21,133",midnightblue:"25,25,112",mintcream:"245,255,250",mistyrose:"255,228,225",moccasin:"255,228,181",navajowhite:"255,222,173",navy:"0,0,128",oldlace:"253,245,230",olivedrab:"107,142,35",olive:"128,128,0",orangered:"255,69,0",orange:"255,165,0",orchid:"218,112,214",palegoldenrod:"238,232,170",palegreen:"152,251,152",paleturquoise:"175,238,238",palevioletred:"219,112,147",papayawhip:"255,239,213",peachpuff:"255,218,185",peru:"205,133,63",pink:"255,192,203",plum:"221,160,221",powderblue:"176,224,230",purple:"128,0,128",red:"255,0,0",rosybrown:"188,143,143",royalblue:"65,105,225",saddlebrown:"139,69,19",salmon:"250,128,114",sandybrown:"244,164,96",seagreen:"46,139,87",seashell:"255,245,238",sienna:"160,82,45",silver:"192,192,192",skyblue:"135,206,235",slateblue:"106,90,205",slategray:"112,128,144",snow:"255,250,250",springgreen:"0,255,127",steelblue:"70,130,180",tan:"210,180,140",teal:"0,128,128",thistle:"216,191,216",tomato:"255,99,71",turquoise:"64,224,208",violet:"238,130,238",wheat:"245,222,179",whitesmoke:"245,245,245",white:"255,255,255",yellowgreen:"154,205,50",yellow:"255,255,0"}},Hooks:{templates:{textShadow:["Color X Y Blur","black 0px 0px 0px"],boxShadow:["Color X Y Blur Spread","black 0px 0px 0px 0px"],clip:["Top Right Bottom Left","0px 0px 0px 0px"],backgroundPosition:["X Y","0% 0%"],transformOrigin:["X Y Z","50% 50% 0px"],perspectiveOrigin:["X Y","50% 50%"]},registered:{},register:function(){for(var e,t,r,a,n,i=0;i<D.Lists.colors.length;i++){var o="color"===D.Lists.colors[i]?"0 0 0 1":"255 255 255 1";D.Hooks.templates[D.Lists.colors[i]]=["Red Green Blue Alpha",o]}if(V)for(e in D.Hooks.templates)D.Hooks.templates.hasOwnProperty(e)&&(r=(t=D.Hooks.templates[e])[0].split(" "),a=t[1].match(D.RegEx.valueSplit),"Color"===r[0])&&(r.push(r.shift()),a.push(a.shift()),D.Hooks.templates[e]=[r.join(" "),a.join(" ")]);for(e in D.Hooks.templates)if(D.Hooks.templates.hasOwnProperty(e))for(var s in r=(t=D.Hooks.templates[e])[0].split(" "))r.hasOwnProperty(s)&&(n=e+r[s],s=s,D.Hooks.registered[n]=[e,s])},getRoot:function(e){var t=D.Hooks.registered[e];return t?t[0]:e},getUnit:function(e,t){e=(e.substr(t||0,5).match(/^[a-z%]+/)||[])[0]||"";return e&&N(D.Lists.units)?e:""},fixColors:function(e){return e.replace(/(rgba?\(\s*)?(\b[a-z]+\b)/g,function(e,t,r){return D.Lists.colorNames.hasOwnProperty(r)?(t||"rgba(")+D.Lists.colorNames[r]+(t?"":",1)"):t+r})},cleanRootPropertyValue:function(e,t){return D.RegEx.valueUnwrap.test(t)&&(t=t.match(D.RegEx.valueUnwrap)[1]),t=D.Values.isCSSNullValue(t)?D.Hooks.templates[e][1]:t},extractValue:function(e,t){var r,e=D.Hooks.registered[e];return e?(r=e[0],e=e[1],(t=D.Hooks.cleanRootPropertyValue(r,t)).toString().match(D.RegEx.valueSplit)[e]):t},injectValue:function(e,t,r){var a,e=D.Hooks.registered[e];return e?(a=e[0],e=e[1],(a=(r=D.Hooks.cleanRootPropertyValue(a,r)).toString().match(D.RegEx.valueSplit))[e]=t,a.join(" ")):r}},Normalizations:{registered:{clip:function(e,t,r){switch(e){case"name":return"clip";case"extract":var a=!D.RegEx.wrappedValueAlreadyExtracted.test(r)&&(a=r.toString().match(D.RegEx.valueUnwrap))?a[1].replace(/,(\s+)?/g," "):r;return a;case"inject":return"rect("+r+")"}},blur:function(e,t,r){switch(e){case"name":return G.State.isFirefox?"filter":"-webkit-filter";case"extract":var a,n=parseFloat(r);return n=n||0===n?n:(a=r.toString().match(/blur\(([0-9]+[A-z]+)\)/i))?a[1]:0;case"inject":return parseFloat(r)?"blur("+r+")":"none"}},opacity:function(e,t,r){if(V<=8)switch(e){case"name":return"filter";case"extract":var a=r.toString().match(/alpha\(opacity=(.*)\)/i);return r=a?a[1]/100:1;case"inject":return(t.style.zoom=1)<=parseFloat(r)?"":"alpha(opacity="+parseInt(100*parseFloat(r),10)+")"}else switch(e){case"name":return"opacity";case"extract":case"inject":return r}}},register:function(){V&&!(9<V)||G.State.isGingerbread||(D.Lists.transformsBase=D.Lists.transformsBase.concat(D.Lists.transforms3D));for(var e=0;e<D.Lists.transformsBase.length;e++)!function(){var n=D.Lists.transformsBase[e];D.Normalizations.registered[n]=function(e,t,r){switch(e){case"name":return"transform";case"extract":return H(t)===W||H(t).transformCache[n]===W?/^scale/i.test(n)?1:0:H(t).transformCache[n].replace(/[()]/g,"");case"inject":var a=!1;switch(n.substr(0,n.length-1)){case"translate":a=!/(%|px|em|rem|vw|vh|\d)$/i.test(r);break;case"scal":case"scale":G.State.isAndroid&&H(t).transformCache[n]===W&&r<1&&(r=1),a=!/(\d)$/i.test(r);break;case"skew":case"rotate":a=!/(deg|\d)$/i.test(r)}return a||(H(t).transformCache[n]="("+r+")"),H(t).transformCache[n]}}}();for(var t=0;t<D.Lists.colors.length;t++)!function(){var i=D.Lists.colors[t];D.Normalizations.registered[i]=function(e,t,r){switch(e){case"name":return i;case"extract":var a,n=D.RegEx.wrappedValueAlreadyExtracted.test(r)?r:(n={black:"rgb(0, 0, 0)",blue:"rgb(0, 0, 255)",gray:"rgb(128, 128, 128)",green:"rgb(0, 128, 0)",red:"rgb(255, 0, 0)",white:"rgb(255, 255, 255)"},/^[A-z]+$/i.test(r)?a=n[r]!==W?n[r]:n.black:D.RegEx.isHex.test(r)?a="rgb("+D.Values.hexToRgb(r).join(" ")+")":/^rgba?\(/i.test(r)||(a=n.black),(a||r).toString().match(D.RegEx.valueUnwrap)[1].replace(/,(\s+)?/g," "));return(!V||8<V)&&3===n.split(" ").length&&(n+=" 1"),n;case"inject":return/^rgb/.test(r)?r:(V<=8?4===r.split(" ").length&&(r=r.split(/\s+/).slice(0,3).join(" ")):3===r.split(" ").length&&(r+=" 1"),(V<=8?"rgb":"rgba")+"("+r.replace(/\s+/g,",").replace(/\.(\d)+(?=,)/g,"")+")")}}}();function i(e,t,r){if("border-box"===D.getPropertyValue(t,"boxSizing").toString().toLowerCase()!==(r||!1))return 0;for(var a,n=0,e="width"===e?["Left","Right"]:["Top","Bottom"],i=["padding"+e[0],"padding"+e[1],"border"+e[0]+"Width","border"+e[1]+"Width"],o=0;o<i.length;o++)a=parseFloat(D.getPropertyValue(t,i[o])),isNaN(a)||(n+=a);return r?-n:n}function r(a,n){return function(e,t,r){switch(e){case"name":return a;case"extract":return parseFloat(r)+i(a,t,n);case"inject":return parseFloat(r)-i(a,t,n)+"px"}}}D.Normalizations.registered.innerWidth=r("width",!0),D.Normalizations.registered.innerHeight=r("height",!0),D.Normalizations.registered.outerWidth=r("width"),D.Normalizations.registered.outerHeight=r("height")}},Names:{camelCase:function(e){return e.replace(/-(\w)/g,function(e,t){return t.toUpperCase()})},SVGAttribute:function(e){var t="width|height|x|y|cx|cy|r|rx|ry|x1|x2|y1|y2";return(V||G.State.isAndroid&&!G.State.isChrome)&&(t+="|transform"),new RegExp("^("+t+")$","i").test(e)},prefixCheck:function(e){if(G.State.prefixMatches[e])return[G.State.prefixMatches[e],!0];for(var t=["","Webkit","Moz","ms","O"],r=0,a=t.length;r<a;r++){var n=0===r?e:t[r]+e.replace(/^\w/,function(e){return e.toUpperCase()});if(Q.isString(G.State.prefixElement.style[n]))return[G.State.prefixMatches[e]=n,!0]}return[e,!1]}},Values:{hexToRgb:function(e){return e=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(e,t,r,a){return t+t+r+r+a+a}),(e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e))?[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]:[0,0,0]},isCSSNullValue:function(e){return!e||/^(none|auto|transparent|(rgba\(0, ?0, ?0, ?0\)))$/i.test(e)},getUnitType:function(e){return/^(rotate|skew)/i.test(e)?"deg":/(^(scale|scaleX|scaleY|scaleZ|alpha|flexGrow|flexHeight|zIndex|fontWeight)$)|((opacity|red|green|blue|alpha)$)/i.test(e)?"":"px"},getDisplayType:function(e){e=e&&e.tagName.toString().toLowerCase();return/^(b|big|i|small|tt|abbr|acronym|cite|code|dfn|em|kbd|strong|samp|var|a|bdo|br|img|map|object|q|script|span|sub|sup|button|input|label|select|textarea)$/i.test(e)?"inline":/^(li)$/i.test(e)?"list-item":/^(tr)$/i.test(e)?"table-row":/^(table)$/i.test(e)?"table":/^(tbody)$/i.test(e)?"table-row-group":"block"},addClass:function(e,t){var r;e&&(e.classList?e.classList.add(t):Q.isString(e.className)?e.className+=(e.className.length?" ":"")+t:(r=e.getAttribute(V<=7?"className":"class")||"",e.setAttribute("class",r+(r?" ":"")+t)))},removeClass:function(e,t){var r;e&&(e.classList?e.classList.remove(t):Q.isString(e.className)?e.className=e.className.toString().replace(new RegExp("(^|\\s)"+t.split(" ").join("|")+"(\\s|$)","gi")," "):(r=e.getAttribute(V<=7?"className":"class")||"",e.setAttribute("class",r.replace(new RegExp("(^|s)"+t.split(" ").join("|")+"(s|$)","gi")," "))))}},getPropertyValue:function(e,t,r,o){function s(e,t){var r=0;if(V<=8)r=I.css(e,t);else{var a,n=!1,i=(/^(width|height)$/.test(t)&&0===D.getPropertyValue(e,"display")&&(n=!0,D.setPropertyValue(e,"display",D.Values.getDisplayType(e))),function(){n&&D.setPropertyValue(e,"display","none")});if(!o){if("height"===t&&"border-box"!==D.getPropertyValue(e,"boxSizing").toString().toLowerCase())return a=e.offsetHeight-(parseFloat(D.getPropertyValue(e,"borderTopWidth"))||0)-(parseFloat(D.getPropertyValue(e,"borderBottomWidth"))||0)-(parseFloat(D.getPropertyValue(e,"paddingTop"))||0)-(parseFloat(D.getPropertyValue(e,"paddingBottom"))||0),i(),a;if("width"===t&&"border-box"!==D.getPropertyValue(e,"boxSizing").toString().toLowerCase())return a=e.offsetWidth-(parseFloat(D.getPropertyValue(e,"borderLeftWidth"))||0)-(parseFloat(D.getPropertyValue(e,"borderRightWidth"))||0)-(parseFloat(D.getPropertyValue(e,"paddingLeft"))||0)-(parseFloat(D.getPropertyValue(e,"paddingRight"))||0),i(),a}a=H(e)===W?$.getComputedStyle(e,null):H(e).computedStyle?H(e).computedStyle:H(e).computedStyle=$.getComputedStyle(e,null),"borderColor"===t&&(t="borderTopColor"),""!==(r=9===V&&"filter"===t?a.getPropertyValue(t):a[t])&&null!==r||(r=e.style[t]),i()}return r="auto"===r&&/^(top|right|bottom|left)$/i.test(t)&&("fixed"===(a=s(e,"position"))||"absolute"===a&&/top|left/i.test(t))?I(e).position()[t]+"px":r}var a,n,i;if(D.Hooks.registered[t]?(a=D.Hooks.getRoot(i=t),r===W&&(r=D.getPropertyValue(e,D.Names.prefixCheck(a)[0])),D.Normalizations.registered[a]&&(r=D.Normalizations.registered[a]("extract",e,r)),a=D.Hooks.extractValue(i,r)):D.Normalizations.registered[t]&&("transform"!==(i=D.Normalizations.registered[t]("name",e))&&(n=s(e,D.Names.prefixCheck(i)[0]),D.Values.isCSSNullValue(n))&&D.Hooks.templates[t]&&(n=D.Hooks.templates[t][1]),a=D.Normalizations.registered[t]("extract",e,n)),!/^[\d-]/.test(a)){r=H(e);if(r&&r.isSVG&&D.Names.SVGAttribute(t))if(/^(height|width)$/i.test(t))try{a=e.getBBox()[t]}catch(e){a=0}else a=e.getAttribute(t);else a=s(e,D.Names.prefixCheck(t)[0])}return D.Values.isCSSNullValue(a)&&(a=0),2<=G.debug&&console.log("Get "+t+": "+a),a},setPropertyValue:function(e,t,r,a,n){var i,o=t;if("scroll"===t)n.container?n.container["scroll"+n.direction]=r:"Left"===n.direction?$.scrollTo(r,n.alternateValue):$.scrollTo(n.alternateValue,r);else if(D.Normalizations.registered[t]&&"transform"===D.Normalizations.registered[t]("name",e))D.Normalizations.registered[t]("inject",e,r),o="transform",r=H(e).transformCache[t];else{if(D.Hooks.registered[t]&&(n=t,i=D.Hooks.getRoot(t),a=a||D.getPropertyValue(e,i),r=D.Hooks.injectValue(n,r,a),t=i),D.Normalizations.registered[t]&&(r=D.Normalizations.registered[t]("inject",e,r),t=D.Normalizations.registered[t]("name",e)),o=D.Names.prefixCheck(t)[0],V<=8)try{e.style[o]=r}catch(e){G.debug&&console.log("Browser does not support ["+r+"] for ["+o+"]")}else{n=H(e);n&&n.isSVG&&D.Names.SVGAttribute(t)?e.setAttribute(t,r):e.style[o]=r}2<=G.debug&&console.log("Set "+t+" ("+o+"): "+r)}return[o,r]},flushTransformCache:function(t){var r,a,n,i="",e=H(t);(V||G.State.isAndroid&&!G.State.isChrome)&&e&&e.isSVG?(r={translate:[(e=function(e){return parseFloat(D.getPropertyValue(t,e))})("translateX"),e("translateY")],skewX:[e("skewX")],skewY:[e("skewY")],scale:1!==e("scale")?[e("scale"),e("scale")]:[e("scaleX"),e("scaleY")],rotate:[e("rotateZ"),0,0]},I.each(H(t).transformCache,function(e){/^translate/i.test(e)?e="translate":/^scale/i.test(e)?e="scale":/^rotate/i.test(e)&&(e="rotate"),r[e]&&(i+=e+"("+r[e].join(" ")+") ",delete r[e])})):(I.each(H(t).transformCache,function(e){if(a=H(t).transformCache[e],"transformPerspective"===e)return n=a,!0;i+=(e=9===V&&"rotateZ"===e?"rotate":e)+a+" "}),n&&(i="perspective"+n+" "+i)),D.setPropertyValue(t,"transform",i)}}).Hooks.register(),D.Normalizations.register(),G.hook=function(e,a,n){var i;return e=h(e),I.each(e,function(e,t){var r;H(t)===W&&G.init(t),n===W?i===W&&(i=D.getPropertyValue(t,a)):("transform"===(r=D.setPropertyValue(t,a,n))[0]&&G.CSS.flushTransformCache(t),i=r)}),i},(G=I.extend(y=function(){function e(){return t?k.promise||null:r}var t,r,a,P,V,n=arguments[0]&&(arguments[0].p||I.isPlainObject(arguments[0].properties)&&!arguments[0].properties.names||Q.isString(arguments[0].properties)),k=(Q.isWrapped(this)?(t=!1,a=0,r=P=this):(t=!0,a=1,P=n?arguments[0].elements||arguments[0].e:arguments[0]),{promise:null,resolver:null,rejecter:null});if(t&&G.Promise&&(k.promise=new G.Promise(function(e,t){k.resolver=e,k.rejecter=t})),F=n?(V=arguments[0].properties||arguments[0].p,arguments[0].options||arguments[0].o):(V=arguments[a],arguments[a+1]),P=h(P)){var T,i,o,s,l,C=P.length,A=0;if(!/^(stop|finish|finishAll|pause|resume)$/i.test(V)&&!I.isPlainObject(F))for(var F={},u=a+1;u<arguments.length;u++)Q.isArray(arguments[u])||!/^(fast|normal|slow)$/i.test(arguments[u])&&!/^\d/.test(arguments[u])?Q.isString(arguments[u])||Q.isArray(arguments[u])?F.easing=arguments[u]:Q.isFunction(arguments[u])&&(F.complete=arguments[u]):F.duration=arguments[u];switch(V){case"scroll":T="scroll";break;case"reverse":T="reverse";break;case"pause":var c=(new Date).getTime();return I.each(P,function(e,t){v(t,c)}),I.each(G.State.calls,function(e,a){var n=!1;a&&I.each(a[1],function(e,r){var t=F===W?"":F;return!0!==t&&a[2].queue!==t&&(F!==W||!1!==a[2].queue)||(I.each(P,function(e,t){if(t===r)return a[5]={resume:!1},!(n=!0)}),!n&&void 0)})}),e();case"resume":return I.each(P,function(e,t){b(t)}),I.each(G.State.calls,function(e,a){var n=!1;a&&I.each(a[1],function(e,r){var t=F===W?"":F;return!0!==t&&a[2].queue!==t&&(F!==W||!1!==a[2].queue)||!a[5]||(I.each(P,function(e,t){if(t===r)return a[5].resume=!0,!(n=!0)}),!n&&void 0)})}),e();case"finish":case"finishAll":case"stop":I.each(P,function(e,t){H(t)&&H(t).delayTimer&&(clearTimeout(H(t).delayTimer.setTimeout),H(t).delayTimer.next&&H(t).delayTimer.next(),delete H(t).delayTimer),"finishAll"!==V||!0!==F&&!Q.isString(F)||(I.each(I.queue(t,Q.isString(F)?F:""),function(e,t){Q.isFunction(t)&&t()}),I.queue(t,Q.isString(F)?F:"",[]))});var p=[];return I.each(G.State.calls,function(n,i){i&&I.each(i[1],function(e,r){var a=F===W?"":F;if(!0!==a&&i[2].queue!==a&&(F!==W||!1!==i[2].queue))return!0;I.each(P,function(e,t){t===r&&(!0!==F&&!Q.isString(F)||(I.each(I.queue(t,Q.isString(F)?F:""),function(e,t){Q.isFunction(t)&&t(null,!0)}),I.queue(t,Q.isString(F)?F:"",[])),"stop"===V?((t=H(t))&&t.tweensContainer&&(!0===a||""===a)&&I.each(t.tweensContainer,function(e,t){t.endValue=t.currentValue}),p.push(n)):"finish"!==V&&"finishAll"!==V||(i[2].duration=1))})})}),"stop"===V&&(I.each(p,function(e,t){O(t,!0)}),k.promise)&&k.resolver(P),e();default:if(!I.isPlainObject(V)||Q.isEmptyObject(V))return Q.isString(V)&&G.Redirects[V]?(o=(i=I.extend({},F)).duration,s=i.delay||0,!0===i.backwards&&(P=I.extend(!0,[],P).reverse()),I.each(P,function(e,t){parseFloat(i.stagger)?i.delay=s+parseFloat(i.stagger)*e:Q.isFunction(i.stagger)&&(i.delay=s+i.stagger.call(t,e,C)),i.drag&&(i.duration=parseFloat(o)||(/^(callout|transition)/.test(V)?1e3:400),i.duration=Math.max(i.duration*(i.backwards?1-e/C:(e+1)/C),.75*i.duration,200)),G.Redirects[V].call(t,t,i||{},e,C,P,k.promise?k:W)})):(l="Velocity: First argument ("+V+") was not a property map, a known action, or a registered redirect. Aborting.",k.promise?k.rejecter(new Error(l)):$.console&&console.log(l)),e();T="start"}var M={lastParent:null,lastPosition:null,lastFontSize:null,lastPercentToPxWidth:null,lastPercentToPxHeight:null,lastEmToPx:null,remToPx:null,vwToPx:null,vhToPx:null},E=[],d=(I.each(P,function(e,t){Q.isNode(t)&&m(t,e)}),(i=I.extend({},G.defaults,F)).loop=parseInt(i.loop,10),2*i.loop-1);if(i.loop)for(var f=0;f<d;f++){var g={delay:i.delay,progress:i.progress};f===d-1&&(g.display=i.display,g.visibility=i.visibility,g.complete=i.complete),y(P,"reverse",g)}return e()}function m(q,S){var L,e,t,z=I.extend({},G.defaults,F),R={};switch(H(q)===W&&G.init(q),parseFloat(z.delay)&&!1!==z.queue&&I.queue(q,z.queue,function(e,t){if(!0===t)return!0;G.velocityQueueEntryFlag=!0;function r(){G.State.delayedElements[a]=!1,e()}var a,t=G.State.delayedElements.count++;G.State.delayedElements[t]=q,a=t;H(q).delayBegin=(new Date).getTime(),H(q).delay=parseFloat(z.delay),H(q).delayTimer={setTimeout:setTimeout(e,parseFloat(z.delay)),next:r}}),z.duration.toString().toLowerCase()){case"fast":z.duration=200;break;case"normal":z.duration=400;break;case"slow":z.duration=600;break;default:z.duration=parseFloat(z.duration)||1}function r(e){var O,j,t,r,a;if(z.begin&&0===A)try{z.begin.call(P,P)}catch(e){setTimeout(function(){throw e},1)}if("scroll"===T){var n,i,o,s=/^x$/i.test(z.axis)?"Left":"Top",l=parseFloat(z.offset)||0;z.container?Q.isWrapped(z.container)||Q.isNode(z.container)?(z.container=z.container[0]||z.container,o=(n=z.container["scroll"+s])+I(q).position()[s.toLowerCase()]+l):z.container=null:(n=G.State.scrollAnchor[G.State["scrollProperty"+s]],i=G.State.scrollAnchor[G.State["scrollProperty"+("Left"===s?"Top":"Left")]],o=I(q).offset()[s.toLowerCase()]+l),R={scroll:{rootPropertyValue:!1,startValue:n,currentValue:n,endValue:o,unitType:"",easing:z.easing,scrollData:{container:z.container,direction:s,alternateValue:i}},element:q},G.debug&&console.log("tweensContainer (scroll): ",R.scroll,q)}else if("reverse"===T){if(!(O=H(q)))return;if(!O.tweensContainer)return void I.dequeue(q,z.queue);for(var u in"none"===O.opts.display&&(O.opts.display="auto"),"hidden"===O.opts.visibility&&(O.opts.visibility="visible"),O.opts.loop=!1,O.opts.begin=null,O.opts.complete=null,F.easing||delete z.easing,F.duration||delete z.duration,z=I.extend({},O.opts,z),j=I.extend(!0,{},O?O.tweensContainer:null))j.hasOwnProperty(u)&&"element"!==u&&(t=j[u].startValue,j[u].startValue=j[u].currentValue=j[u].endValue,j[u].endValue=t,Q.isEmptyObject(F)||(j[u].easing=z.easing),G.debug)&&console.log("reverse tweensContainer ("+u+"): "+JSON.stringify(j[u]),q);R=j}else if("start"===T){(O=H(q))&&O.tweensContainer&&!0===O.isAnimating&&(j=O.tweensContainer);var c,p=function(e,t){var r=D.Hooks.getRoot(e),a=!1,n=t[0],i=t[1],o=t[2];if(O&&O.isSVG||"tween"===r||!1!==D.Names.prefixCheck(r)[1]||D.Normalizations.registered[r]!==W){(z.display!==W&&null!==z.display&&"none"!==z.display||z.visibility!==W&&"hidden"!==z.visibility)&&/opacity|filter/.test(e)&&!o&&0!==n&&(o=0),z._cacheValues&&j&&j[e]?(o===W&&(o=j[e].endValue+j[e].unitType),a=O.rootPropertyValueCache[r]):D.Hooks.registered[e]?o===W?(a=D.getPropertyValue(q,r),o=D.getPropertyValue(q,e,a)):a=D.Hooks.templates[r][1]:o===W&&(o=D.getPropertyValue(q,e));var s,l,u=!1,t=function(e,t){var t=(t||"0").toString().toLowerCase().replace(/[%A-z]+$/,function(e){return r=e,""}),r=r||D.Values.getUnitType(e);return[t,r]};if(o!==n&&Q.isString(o)&&Q.isString(n)){for(var c="",p=0,d=0,f=[],g=[],m=0,h=0,y=0,o=D.Hooks.fixColors(o),n=D.Hooks.fixColors(n);p<o.length&&d<n.length;){var v=o[p],b=n[d];if(/[\d\.-]/.test(v)&&/[\d\.-]/.test(b)){for(var x=v,w=b,S=".",P=".";++p<o.length;){if((v=o[p])===S)S="..";else if(!/\d/.test(v))break;x+=v}for(;++d<n.length;){if((b=n[d])===P)P="..";else if(!/\d/.test(b))break;w+=b}var V,k,T=D.Hooks.getUnit(o,p),C=D.Hooks.getUnit(n,d);p+=T.length,d+=C.length,T===C?x===w?c+=x+T:(c+="{"+f.length+(h?"!":"")+"}"+T,f.push(parseFloat(x)),g.push(parseFloat(w))):(V=parseFloat(x),k=parseFloat(w),c+=(m<5?"calc":"")+"("+(V?"{"+f.length+(h?"!":"")+"}":"0")+T+" + "+(k?"{"+(f.length+(V?1:0))+(h?"!":"")+"}":"0")+C+")",V&&(f.push(V),g.push(0)),k&&(f.push(0),g.push(k)))}else{if(v!==b){m=0;break}c+=v,p++,d++,0===m&&"c"===v||1===m&&"a"===v||2===m&&"l"===v||3===m&&"c"===v||4<=m&&"("===v?m++:(m&&m<5||4<=m&&")"===v&&--m<5)&&(m=0),0===h&&"r"===v||1===h&&"g"===v||2===h&&"b"===v||3===h&&"a"===v||3<=h&&"("===v?(3===h&&"a"===v&&(y=1),h++):y&&","===v?3<++y&&(h=y=0):(y&&h<(y?5:4)||(y?4:3)<=h&&")"===v&&--h<(y?5:4))&&(h=y=0)}}p===o.length&&d===n.length||(G.debug&&console.error('Trying to pattern match mis-matched strings ["'+n+'", "'+o+'"]'),c=W),c&&(f.length?(G.debug&&console.log('Pattern found "'+c+'" -> ',f,g,"["+o+","+n+"]"),o=f,n=g,s=l=""):c=W)}c||(o=(F=t(e,o))[0],l=F[1],n=(F=t(e,n))[0].replace(/^([+-\/*])=/,function(e,t){return u=t,""}),s=F[1],o=parseFloat(o)||0,n=parseFloat(n)||0,"%"===s&&(/^(fontSize|lineHeight)$/.test(e)?(n/=100,s="em"):/^scale/.test(e)?(n/=100,s=""):/(Red|Green|Blue)$/i.test(e)&&(n=n/100*255,s="")));var A,F,E,N;if(/[\/*]/.test(u))s=l;else if(l!==s&&0!==o)if(0===n)s=l;else{L=L||(t={myParent:q.parentNode||B.body,position:D.getPropertyValue(q,"position"),fontSize:D.getPropertyValue(q,"fontSize")},F=t.position===M.lastPosition&&t.myParent===M.lastParent,E=t.fontSize===M.lastFontSize,M.lastParent=t.myParent,M.lastPosition=t.position,M.lastFontSize=t.fontSize,N={},E&&F?(N.emToPx=M.lastEmToPx,N.percentToPxWidth=M.lastPercentToPxWidth,N.percentToPxHeight=M.lastPercentToPxHeight):(A=O&&O.isSVG?B.createElementNS("http://www.w3.org/2000/svg","rect"):B.createElement("div"),G.init(A),t.myParent.appendChild(A),I.each(["overflow","overflowX","overflowY"],function(e,t){G.CSS.setPropertyValue(A,t,"hidden")}),G.CSS.setPropertyValue(A,"position",t.position),G.CSS.setPropertyValue(A,"fontSize",t.fontSize),G.CSS.setPropertyValue(A,"boxSizing","content-box"),I.each(["minWidth","maxWidth","width","minHeight","maxHeight","height"],function(e,t){G.CSS.setPropertyValue(A,t,"100%")}),G.CSS.setPropertyValue(A,"paddingLeft","100em"),N.percentToPxWidth=M.lastPercentToPxWidth=(parseFloat(D.getPropertyValue(A,"width",null,!0))||1)/100,N.percentToPxHeight=M.lastPercentToPxHeight=(parseFloat(D.getPropertyValue(A,"height",null,!0))||1)/100,N.emToPx=M.lastEmToPx=(parseFloat(D.getPropertyValue(A,"paddingLeft"))||1)/100,t.myParent.removeChild(A)),null===M.remToPx&&(M.remToPx=parseFloat(D.getPropertyValue(B.body,"fontSize"))||16),null===M.vwToPx&&(M.vwToPx=parseFloat($.innerWidth)/100,M.vhToPx=parseFloat($.innerHeight)/100),N.remToPx=M.remToPx,N.vwToPx=M.vwToPx,N.vhToPx=M.vhToPx,1<=G.debug&&console.log("Unit ratios: "+JSON.stringify(N),q),N);var H=/margin|padding|left|right|width|text|word|letter/i.test(e)||/X$/.test(e)||"x"===e?"x":"y";switch(l){case"%":o*="x"==H?L.percentToPxWidth:L.percentToPxHeight;break;case"px":break;default:o*=L[l+"ToPx"]}switch(s){case"%":o*=1/("x"==H?L.percentToPxWidth:L.percentToPxHeight);break;case"px":break;default:o*=1/L[s+"ToPx"]}}switch(u){case"+":n=o+n;break;case"-":n=o-n;break;case"*":n*=o;break;case"/":n=o/n}R[e]={rootPropertyValue:a,startValue:o,currentValue:o,endValue:n,unitType:s,easing:i},c&&(R[e].pattern=c),G.debug&&console.log("tweensContainer ("+e+"): "+JSON.stringify(R[e]),q)}else G.debug&&console.log("Skipping ["+r+"] due to a lack of browser support.")};for(c in V)if(V.hasOwnProperty(c)){var d=D.Names.camelCase(c),f=(f=V[c],a=r=h=g=void 0,Q.isFunction(f)&&(f=f.call(q,S,C)),Q.isArray(f)?(h=f[0],a=!Q.isArray(f[1])&&/^[\d-]/.test(f[1])||Q.isFunction(f[1])||D.RegEx.isHex.test(f[1])?f[1]:Q.isString(f[1])&&!D.RegEx.isHex.test(f[1])&&G.Easings[f[1]]||Q.isArray(f[1])?(r=g?f[1]:X(f[1],z.duration),f[2]):f[1]||f[2]):h=f,g||(r=r||z.easing),[(h=Q.isFunction(h)?h.call(q,S,C):h)||0,r,a=Q.isFunction(a)?a.call(q,S,C):a]);if(N(D.Lists.colors)){var g=f[0],m=f[1],h=f[2];if(D.RegEx.isHex.test(g)){for(var y=["Red","Green","Blue"],v=D.Values.hexToRgb(g),b=h?D.Values.hexToRgb(h):W,x=0;x<y.length;x++){var w=[v[x]];m&&w.push(m),b!==W&&w.push(b[x]),p(d+y[x],w)}continue}}p(d,f)}R.element=q}R.element&&(D.Values.addClass(q,"velocity-animating"),E.push(R),(O=H(q))&&(""===z.queue&&(O.tweensContainer=R,O.opts=z),O.isAnimating=!0),A===C-1?(G.State.calls.push([E,P,z,null,k.resolver,null,0]),!1===G.State.isTicking&&(G.State.isTicking=!0,Y())):A++)}!1!==G.mock&&(!0===G.mock?z.duration=z.delay=1:(z.duration*=parseFloat(G.mock)||1,z.delay*=parseFloat(G.mock)||1)),z.easing=X(z.easing,z.duration),z.begin&&!Q.isFunction(z.begin)&&(z.begin=null),z.progress&&!Q.isFunction(z.progress)&&(z.progress=null),z.complete&&!Q.isFunction(z.complete)&&(z.complete=null),z.display!==W&&null!==z.display&&(z.display=z.display.toString().toLowerCase(),"auto"===z.display)&&(z.display=G.CSS.Values.getDisplayType(q)),z.visibility!==W&&null!==z.visibility&&(z.visibility=z.visibility.toString().toLowerCase()),z.mobileHA=z.mobileHA&&G.State.isMobile&&!G.State.isGingerbread,!1===z.queue?z.delay?(e=G.State.delayedElements.count++,G.State.delayedElements[e]=q,t=e,e=function(){G.State.delayedElements[t]=!1,r()},H(q).delayBegin=(new Date).getTime(),H(q).delay=parseFloat(z.delay),H(q).delayTimer={setTimeout:setTimeout(r,parseFloat(z.delay)),next:e}):r():I.queue(q,z.queue,function(e,t){if(!0===t)return k.promise&&k.resolver(P),!0;G.velocityQueueEntryFlag=!0,r()}),""!==z.queue&&"fx"!==z.queue||"inprogress"===I.queue(q)[0]||I.dequeue(q)}k.promise&&(V&&F&&!1===F.promiseRejectEmpty?k.resolver():k.rejecter())},G)).animate=y,T=$.requestAnimationFrame||r,G.State.isMobile||B.hidden===W||((s=function(){B.hidden?(T=function(e){return setTimeout(function(){e(!0)},16)},Y()):T=$.requestAnimationFrame||r})(),B.addEventListener("visibilitychange",s)),t.Velocity=G,t!==$&&(t.fn.velocity=y,t.fn.velocity.defaults=G.defaults),I.each(["Down","Up"],function(e,c){G.Redirects["slide"+c]=function(r,e,a,t,n,i){var e=I.extend({},e),o=e.begin,s=e.complete,l={},u={height:"",marginTop:"",marginBottom:"",paddingTop:"",paddingBottom:""};e.display===W&&(e.display="Down"===c?"inline"===G.CSS.Values.getDisplayType(r)?"inline-block":"block":"none"),e.begin=function(){for(var e in 0===a&&o&&o.call(n,n),u){var t;u.hasOwnProperty(e)&&(l[e]=r.style[e],t=D.getPropertyValue(r,e),u[e]="Down"===c?[t,0]:[0,t])}l.overflow=r.style.overflow,r.style.overflow="hidden"},e.complete=function(){for(var e in l)l.hasOwnProperty(e)&&(r.style[e]=l[e]);a===t-1&&(s&&s.call(n,n),i)&&i.resolver(n)},G(r,u,e)}}),I.each(["In","Out"],function(e,l){G.Redirects["fade"+l]=function(e,t,r,a,n,i){var t=I.extend({},t),o=t.complete,s={opacity:"In"===l?1:0};0!==r&&(t.begin=null),t.complete=r!==a-1?null:function(){o&&o.call(n,n),i&&i.resolver(n)},t.display===W&&(t.display="In"===l?"auto":"none"),G(this,s,t)}}),G;function H(e){e=I.data(e,"velocity");return null===e?W:e}function v(e,t){e=H(e);e&&e.delayTimer&&!e.delayPaused&&(e.delayRemaining=e.delay-t+e.delayBegin,e.delayPaused=!0,clearTimeout(e.delayTimer.setTimeout))}function b(e){e=H(e);e&&e.delayTimer&&e.delayPaused&&(e.delayPaused=!1,e.delayTimer.setTimeout=setTimeout(e.delayTimer.next,e.delayRemaining))}function l(h,t,y,r){var v=4,b=.001,x=1e-7,w=10,S=11,P=1/(S-1),e="Float32Array"in $;if(4!==arguments.length)return!1;for(var a=0;a<4;++a)if("number"!=typeof arguments[a]||isNaN(arguments[a])||!isFinite(arguments[a]))return!1;h=Math.min(h,1),y=Math.min(y,1),h=Math.max(h,0),y=Math.max(y,0);var V=new(e?Float32Array:Array)(S);function n(e,t){return 1-3*t+3*e}function k(e,t,r){return((n(t,r)*e+(3*r-6*t))*e+3*t)*e}function T(e,t,r){return 3*n(t,r)*e*e+2*(3*r-6*t)*e+3*t}function i(e){for(var t=0,r=1,a=S-1;r!==a&&V[r]<=e;++r)t+=P;var n=t+(e-V[--r])/(V[r+1]-V[r])*P,i=T(n,h,y);if(b<=i){for(var o=e,s=n,l=0;l<v;++l){var u=T(s,h,y);if(0===u)return s;s-=(k(s,h,y)-o)/u}return s}if(0===i)return n;for(var c,p,d=e,f=t,g=t+P,m=0;0<(c=k(p=f+(g-f)/2,h,y)-d)?g=p:f=p,Math.abs(c)>x&&++m<w;);return p}var o=!1;function s(){if(o=!0,h!==t||y!==r)for(var e=0;e<S;++e)V[e]=k(e*P,h,y)}function l(e){return o||s(),h===t&&y===r?e:0===e?0:1===e?1:k(i(e),t,r)}l.getControlPoints=function(){return[{x:h,y:t},{x:y,y:r}]};var u="generateBezier("+[h,t,y,r]+")";return l.toString=function(){return u},l}function x(e){return-e.tension*e.x-e.friction*e.v}function w(e,t,r){r={x:e.x+r.dx*t,v:e.v+r.dv*t,tension:e.tension,friction:e.friction};return{dx:r.v,dv:x(r)}}function X(e,t){var r=e;return Q.isString(e)?G.Easings[e]||(r=!1):r=Q.isArray(e)&&1===e.length?function(t){return function(e){return Math.round(e*t)*(1/t)}}.apply(null,e):Q.isArray(e)&&2===e.length?o.apply(null,e.concat([t])):!(!Q.isArray(e)||4!==e.length)&&l.apply(null,e),r=!1===r?G.Easings[G.defaults.easing]?G.defaults.easing:i:r}function Y(e){if(e){var t=G.timestamp&&!0!==e?e:k.now(),r=G.State.calls.length;1e4<r&&(G.State.calls=function(e){for(var t=-1,r=e?e.length:0,a=[];++t<r;){var n=e[t];n&&a.push(n)}return a}(G.State.calls),r=G.State.calls.length);for(var a=0;a<r;a++)if(G.State.calls[a]){var n=G.State.calls[a],i=n[0],o=n[2],s=!(p=n[3]),l=null,u=n[5],c=n[6],p=p||(G.State.calls[a][3]=t-16);if(u){if(!0!==u.resume)continue;p=n[3]=Math.round(t-c-16),n[5]=null}for(var c=n[6]=t-p,d=Math.min(c/o.duration,1),f=0,g=i.length;f<g;f++){var m=i[f],h=m.element;if(H(h)){var y,v,b,x,w,S,P=!1;for(y in o.display!==W&&null!==o.display&&"none"!==o.display&&("flex"===o.display&&I.each(["-webkit-box","-moz-box","-ms-flexbox","-webkit-flex"],function(e,t){D.setPropertyValue(h,"display",t)}),D.setPropertyValue(h,"display",o.display)),o.visibility!==W&&"hidden"!==o.visibility&&D.setPropertyValue(h,"visibility",o.visibility),m)m.hasOwnProperty(y)&&"element"!==y&&(v=m[y],b=Q.isString(v.easing)?G.Easings[v.easing]:v.easing,x=Q.isString(v.pattern)?v.pattern.replace(/{(\d+)(!)?}/g,1===d?function(e,t,r){t=v.endValue[t];return r?Math.round(t):t}:function(e,t,r){var a=v.startValue[t],t=v.endValue[t]-a,a=a+t*b(d,o,t);return r?Math.round(a):a}):1===d?v.endValue:(x=v.endValue-v.startValue,v.startValue+x*b(d,o,x)),!s&&x===v.currentValue||(v.currentValue=x,"tween"===y?l=x:(D.Hooks.registered[y]&&(w=D.Hooks.getRoot(y),S=H(h).rootPropertyValueCache[w])&&(v.rootPropertyValue=S),S=D.setPropertyValue(h,y,v.currentValue+(V<9&&0===parseFloat(x)?"":v.unitType),v.rootPropertyValue,v.scrollData),D.Hooks.registered[y]&&(D.Normalizations.registered[w]?H(h).rootPropertyValueCache[w]=D.Normalizations.registered[w]("extract",null,S[1]):H(h).rootPropertyValueCache[w]=S[1]),"transform"===S[0]&&(P=!0))));o.mobileHA&&H(h).transformCache.translate3d===W&&(H(h).transformCache.translate3d="(0px, 0px, 0px)",P=!0),P&&D.flushTransformCache(h)}}o.display!==W&&"none"!==o.display&&(G.State.calls[a][2].display=!1),o.visibility!==W&&"hidden"!==o.visibility&&(G.State.calls[a][2].visibility=!1),o.progress&&o.progress.call(n[1],n[1],d,Math.max(0,p+o.duration-t),p,l),1===d&&O(a)}}G.State.isTicking&&T(Y)}function O(e,t){if(G.State.calls[e]){for(var r=G.State.calls[e][0],a=G.State.calls[e][1],n=G.State.calls[e][2],i=G.State.calls[e][4],o=!1,s=0,l=r.length;s<l;s++){var u,c=r[s].element,p=(t||n.loop||("none"===n.display&&D.setPropertyValue(c,"display",n.display),"hidden"===n.visibility&&D.setPropertyValue(c,"visibility",n.visibility)),H(c));if(!0===n.loop||I.queue(c)[1]!==W&&/\.velocityQueueEntryFlag/i.test(I.queue(c)[1])||p&&(p.isAnimating=!1,u=!(p.rootPropertyValueCache={}),I.each(D.Lists.transforms3D,function(e,t){var r=/^scale/.test(t)?1:0,a=p.transformCache[t];p.transformCache[t]!==W&&new RegExp("^\\("+r+"[^.]").test(a)&&(u=!0,delete p.transformCache[t])}),n.mobileHA&&(u=!0,delete p.transformCache.translate3d),u&&D.flushTransformCache(c),D.Values.removeClass(c,"velocity-animating")),!t&&n.complete&&!n.loop&&s===l-1)try{n.complete.call(a,a)}catch(e){setTimeout(function(){throw e},1)}i&&!0!==n.loop&&i(a),p&&!0===n.loop&&!t&&(I.each(p.tweensContainer,function(e,t){var r;/^rotate/.test(e)&&(parseFloat(t.startValue)-parseFloat(t.endValue))%360==0&&(r=t.startValue,t.startValue=t.endValue,t.endValue=r),/^backgroundPosition/.test(e)&&100===parseFloat(t.endValue)&&"%"===t.unitType&&(t.endValue=0,t.startValue=100)}),G(c,"reverse",{loop:!0,delay:n.delay})),!1!==n.queue&&I.dequeue(c,n.queue)}G.State.calls[e]=!1;for(var d=0,f=G.State.calls.length;d<f;d++)if(!1!==G.State.calls[d]){o=!0;break}!1===o&&(G.State.isTicking=!1,delete G.State.calls,G.State.calls=[])}}jQuery.fn.velocity=jQuery.fn.animate});
\ No newline at end of file
diff --git a/4X/Min/VelocityUI.js b/4X/Min/VelocityUI.js
index 7eb14a24..4112d623 100644
--- a/4X/Min/VelocityUI.js
+++ b/4X/Min/VelocityUI.js
@@ -2,4 +2,4 @@
  Velocity UI Pack
  **********************/
 /* VelocityJS.org UI Pack (5.2.0). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License. Portions copyright Daniel Eden, Christian Pucci. */
-!function(t){"use strict";"function"==typeof require&&"object"==typeof exports?module.exports=t():"function"==typeof define&&define.amd?define(["velocity"],t):t()}(function(){"use strict";var t=window.jQuery||window.Zepto||window,a=window,O=void(window&&window.document),v=t.Velocity;if(v&&v.Utilities){var e,r,n,D=v.Utilities,t=v.version;if(t=t,r=[],(e={major:1,minor:1,patch:0})&&t&&(D.each([e,t],function(t,a){var e=[];D.each(a,function(t,a){for(;a.toString().length<5;)a="0"+a;e.push(a)}),r.push(e.join(""))}),parseFloat(r[0])>parseFloat(r[1])))throw e="Velocity UI Pack: You need to update Velocity (velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity.",alert(e),new Error(e);for(n in v.RegisterEffect=v.RegisterUI=function(X,Y){return v.Redirects[X]=function(r,s,n,i,o,l,c){var u=n===i-1,t=0;c=c||Y.loop,"function"==typeof Y.defaultDuration?Y.defaultDuration=Y.defaultDuration.call(o,o):Y.defaultDuration=parseFloat(Y.defaultDuration);for(var a=0;a<Y.calls.length;a++)"number"==typeof(y=Y.calls[a][1])&&(t+=y);for(var e=1<=t?0:Y.calls.length?(1-t)/Y.calls.length:1,a=0;a<Y.calls.length;a++){var f,p=Y.calls[a],d=p[0],g=1e3,y=p[1],p=p[2]||{},m={};s.duration!==O?g=s.duration:Y.defaultDuration!==O&&(g=Y.defaultDuration),m.duration=g*("number"==typeof y?y:e),m.queue=s.queue||"",m.easing=p.easing||"ease",m.delay=parseFloat(p.delay)||0,m.loop=!Y.loop&&p.loop,m._cacheValues=p._cacheValues||!0,0===a&&(m.delay+=parseFloat(s.delay)||0,0===n&&(m.begin=function(){s.begin&&s.begin.call(o,o);var t,a,r,n,i,e=X.match(/(In|Out)$/);e&&"In"===e[0]&&d.opacity!==O&&D.each(o.nodeType?[o]:o,function(t,a){v.CSS.setPropertyValue(a,"opacity",0)}),s.animateParentHeight&&e&&(t=o,e=e[0],a=g+m.delay,r=s.stagger,i=0,D.each(t.nodeType?[t]:t,function(t,e){r&&(a+=t*r),n=e.parentNode;t=["height","paddingTop","paddingBottom","marginTop","marginBottom"];"border-box"===v.CSS.getPropertyValue(e,"boxSizing").toString().toLowerCase()&&(t=["height"]),D.each(t,function(t,a){i+=parseFloat(v.CSS.getPropertyValue(e,a))})}),v.animate(n,{height:("In"===e?"+":"-")+"="+i},{queue:!1,easing:"ease-in-out",duration:a*("In"===e?.6:1)}))}),null!==s.display&&(s.display!==O&&"none"!==s.display?m.display=s.display:/In$/.test(X)&&(p=v.CSS.Values.getDisplayType(r),m.display="inline"===p?"inline-block":p)),s.visibility)&&"hidden"!==s.visibility&&(m.visibility=s.visibility),a===Y.calls.length-1&&(f=function(){s.display!==O&&"none"!==s.display||!/Out$/.test(X)||D.each(o.nodeType?[o]:o,function(t,a){v.CSS.setPropertyValue(a,"display","none")}),s.complete&&s.complete.call(o,o),l&&l.resolver(o||r)},m.complete=function(){if(c&&v.Redirects[X](r,s,n,i,o,l,!0===c||Math.max(0,c-1)),Y.reset){for(var t in Y.reset){var a;Y.reset.hasOwnProperty(t)&&(a=Y.reset[t],v.CSS.Hooks.registered[t]!==O||"string"!=typeof a&&"number"!=typeof a||(Y.reset[t]=[Y.reset[t],Y.reset[t]]))}var e={duration:0,queue:!1};u&&(e.complete=f),v.animate(r,Y.reset,e)}else u&&f()},"hidden"===s.visibility)&&(m.visibility=s.visibility),v.animate(r,d,m)}},v},v.RegisterEffect.packagedEffects={"callout.bounce":{defaultDuration:550,calls:[[{translateY:-30},.25],[{translateY:0},.125],[{translateY:-15},.125],[{translateY:0},.25]]},"callout.shake":{defaultDuration:800,calls:[[{translateX:-11}],[{translateX:11}],[{translateX:-11}],[{translateX:11}],[{translateX:-11}],[{translateX:11}],[{translateX:-11}],[{translateX:0}]]},"callout.flash":{defaultDuration:1100,calls:[[{opacity:[0,"easeInOutQuad",1]}],[{opacity:[1,"easeInOutQuad"]}],[{opacity:[0,"easeInOutQuad"]}],[{opacity:[1,"easeInOutQuad"]}]]},"callout.pulse":{defaultDuration:825,calls:[[{scaleX:1.1,scaleY:1.1},.5,{easing:"easeInExpo"}],[{scaleX:1,scaleY:1},.5]]},"callout.swing":{defaultDuration:950,calls:[[{rotateZ:15}],[{rotateZ:-10}],[{rotateZ:5}],[{rotateZ:-5}],[{rotateZ:0}]]},"callout.tada":{defaultDuration:1e3,calls:[[{scaleX:.9,scaleY:.9,rotateZ:-3},.1],[{scaleX:1.1,scaleY:1.1,rotateZ:3},.1],[{scaleX:1.1,scaleY:1.1,rotateZ:-3},.1],["reverse",.125],["reverse",.125],["reverse",.125],["reverse",.125],["reverse",.125],[{scaleX:1,scaleY:1,rotateZ:0},.2]]},"transition.fadeIn":{defaultDuration:500,calls:[[{opacity:[1,0]}]]},"transition.fadeOut":{defaultDuration:500,calls:[[{opacity:[0,1]}]]},"transition.flipXIn":{defaultDuration:700,calls:[[{opacity:[1,0],transformPerspective:[800,800],rotateY:[0,-55]}]],reset:{transformPerspective:0}},"transition.flipXOut":{defaultDuration:700,calls:[[{opacity:[0,1],transformPerspective:[800,800],rotateY:55}]],reset:{transformPerspective:0,rotateY:0}},"transition.flipYIn":{defaultDuration:800,calls:[[{opacity:[1,0],transformPerspective:[800,800],rotateX:[0,-45]}]],reset:{transformPerspective:0}},"transition.flipYOut":{defaultDuration:800,calls:[[{opacity:[0,1],transformPerspective:[800,800],rotateX:25}]],reset:{transformPerspective:0,rotateX:0}},"transition.flipBounceXIn":{defaultDuration:900,calls:[[{opacity:[.725,0],transformPerspective:[400,400],rotateY:[-10,90]},.5],[{opacity:.8,rotateY:10},.25],[{opacity:1,rotateY:0},.25]],reset:{transformPerspective:0}},"transition.flipBounceXOut":{defaultDuration:800,calls:[[{opacity:[.9,1],transformPerspective:[400,400],rotateY:-10}],[{opacity:0,rotateY:90}]],reset:{transformPerspective:0,rotateY:0}},"transition.flipBounceYIn":{defaultDuration:850,calls:[[{opacity:[.725,0],transformPerspective:[400,400],rotateX:[-10,90]},.5],[{opacity:.8,rotateX:10},.25],[{opacity:1,rotateX:0},.25]],reset:{transformPerspective:0}},"transition.flipBounceYOut":{defaultDuration:800,calls:[[{opacity:[.9,1],transformPerspective:[400,400],rotateX:-15}],[{opacity:0,rotateX:90}]],reset:{transformPerspective:0,rotateX:0}},"transition.swoopIn":{defaultDuration:850,calls:[[{opacity:[1,0],transformOriginX:["100%","50%"],transformOriginY:["100%","100%"],scaleX:[1,0],scaleY:[1,0],translateX:[0,-700],translateZ:0}]],reset:{transformOriginX:"50%",transformOriginY:"50%"}},"transition.swoopOut":{defaultDuration:850,calls:[[{opacity:[0,1],transformOriginX:["50%","100%"],transformOriginY:["100%","100%"],scaleX:0,scaleY:0,translateX:-700,translateZ:0}]],reset:{transformOriginX:"50%",transformOriginY:"50%",scaleX:1,scaleY:1,translateX:0}},"transition.whirlIn":{defaultDuration:850,calls:[[{opacity:[1,0],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:[1,0],scaleY:[1,0],rotateY:[0,160]},1,{easing:"easeInOutSine"}]]},"transition.whirlOut":{defaultDuration:750,calls:[[{opacity:[0,"easeInOutQuint",1],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:0,scaleY:0,rotateY:160},1,{easing:"swing"}]],reset:{scaleX:1,scaleY:1,rotateY:0}},"transition.shrinkIn":{defaultDuration:750,calls:[[{opacity:[1,0],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:[1,1.5],scaleY:[1,1.5],translateZ:0}]]},"transition.shrinkOut":{defaultDuration:600,calls:[[{opacity:[0,1],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:1.3,scaleY:1.3,translateZ:0}]],reset:{scaleX:1,scaleY:1}},"transition.expandIn":{defaultDuration:700,calls:[[{opacity:[1,0],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:[1,.625],scaleY:[1,.625],translateZ:0}]]},"transition.expandOut":{defaultDuration:700,calls:[[{opacity:[0,1],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:.5,scaleY:.5,translateZ:0}]],reset:{scaleX:1,scaleY:1}},"transition.bounceIn":{defaultDuration:800,calls:[[{opacity:[1,0],scaleX:[1.05,.3],scaleY:[1.05,.3]},.35],[{scaleX:.9,scaleY:.9,translateZ:0},.2],[{scaleX:1,scaleY:1},.45]]},"transition.bounceOut":{defaultDuration:800,calls:[[{scaleX:.95,scaleY:.95},.35],[{scaleX:1.1,scaleY:1.1,translateZ:0},.35],[{opacity:[0,1],scaleX:.3,scaleY:.3},.3]],reset:{scaleX:1,scaleY:1}},"transition.bounceUpIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateY:[-30,1e3]},.6,{easing:"easeOutCirc"}],[{translateY:10},.2],[{translateY:0},.2]]},"transition.bounceUpOut":{defaultDuration:1e3,calls:[[{translateY:20},.2],[{opacity:[0,"easeInCirc",1],translateY:-1e3},.8]],reset:{translateY:0}},"transition.bounceDownIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateY:[30,-1e3]},.6,{easing:"easeOutCirc"}],[{translateY:-10},.2],[{translateY:0},.2]]},"transition.bounceDownOut":{defaultDuration:1e3,calls:[[{translateY:-20},.2],[{opacity:[0,"easeInCirc",1],translateY:1e3},.8]],reset:{translateY:0}},"transition.bounceLeftIn":{defaultDuration:750,calls:[[{opacity:[1,0],translateX:[30,-1250]},.6,{easing:"easeOutCirc"}],[{translateX:-10},.2],[{translateX:0},.2]]},"transition.bounceLeftOut":{defaultDuration:750,calls:[[{translateX:30},.2],[{opacity:[0,"easeInCirc",1],translateX:-1250},.8]],reset:{translateX:0}},"transition.bounceRightIn":{defaultDuration:750,calls:[[{opacity:[1,0],translateX:[-30,1250]},.6,{easing:"easeOutCirc"}],[{translateX:10},.2],[{translateX:0},.2]]},"transition.bounceRightOut":{defaultDuration:750,calls:[[{translateX:-30},.2],[{opacity:[0,"easeInCirc",1],translateX:1250},.8]],reset:{translateX:0}},"transition.slideUpIn":{defaultDuration:900,calls:[[{opacity:[1,0],translateY:[0,20],translateZ:0}]]},"transition.slideUpOut":{defaultDuration:900,calls:[[{opacity:[0,1],translateY:-20,translateZ:0}]],reset:{translateY:0}},"transition.slideDownIn":{defaultDuration:900,calls:[[{opacity:[1,0],translateY:[0,-20],translateZ:0}]]},"transition.slideDownOut":{defaultDuration:900,calls:[[{opacity:[0,1],translateY:20,translateZ:0}]],reset:{translateY:0}},"transition.slideLeftIn":{defaultDuration:1e3,calls:[[{opacity:[1,0],translateX:[0,-20],translateZ:0}]]},"transition.slideLeftOut":{defaultDuration:1050,calls:[[{opacity:[0,1],translateX:-20,translateZ:0}]],reset:{translateX:0}},"transition.slideRightIn":{defaultDuration:1e3,calls:[[{opacity:[1,0],translateX:[0,20],translateZ:0}]]},"transition.slideRightOut":{defaultDuration:1050,calls:[[{opacity:[0,1],translateX:20,translateZ:0}]],reset:{translateX:0}},"transition.slideUpBigIn":{defaultDuration:850,calls:[[{opacity:[1,0],translateY:[0,75],translateZ:0}]]},"transition.slideUpBigOut":{defaultDuration:800,calls:[[{opacity:[0,1],translateY:-75,translateZ:0}]],reset:{translateY:0}},"transition.slideDownBigIn":{defaultDuration:850,calls:[[{opacity:[1,0],translateY:[0,-75],translateZ:0}]]},"transition.slideDownBigOut":{defaultDuration:800,calls:[[{opacity:[0,1],translateY:75,translateZ:0}]],reset:{translateY:0}},"transition.slideLeftBigIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateX:[0,-75],translateZ:0}]]},"transition.slideLeftBigOut":{defaultDuration:750,calls:[[{opacity:[0,1],translateX:-75,translateZ:0}]],reset:{translateX:0}},"transition.slideRightBigIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateX:[0,75],translateZ:0}]]},"transition.slideRightBigOut":{defaultDuration:750,calls:[[{opacity:[0,1],translateX:75,translateZ:0}]],reset:{translateX:0}},"transition.perspectiveUpIn":{defaultDuration:800,calls:[[{opacity:[1,0],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:["100%","100%"],rotateX:[0,-180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveUpOut":{defaultDuration:850,calls:[[{opacity:[0,1],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:["100%","100%"],rotateX:-180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateX:0}},"transition.perspectiveDownIn":{defaultDuration:800,calls:[[{opacity:[1,0],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:[0,0],rotateX:[0,180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveDownOut":{defaultDuration:850,calls:[[{opacity:[0,1],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:[0,0],rotateX:180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateX:0}},"transition.perspectiveLeftIn":{defaultDuration:950,calls:[[{opacity:[1,0],transformPerspective:[2e3,2e3],transformOriginX:[0,0],transformOriginY:[0,0],rotateY:[0,-180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveLeftOut":{defaultDuration:950,calls:[[{opacity:[0,1],transformPerspective:[2e3,2e3],transformOriginX:[0,0],transformOriginY:[0,0],rotateY:-180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateY:0}},"transition.perspectiveRightIn":{defaultDuration:950,calls:[[{opacity:[1,0],transformPerspective:[2e3,2e3],transformOriginX:["100%","100%"],transformOriginY:[0,0],rotateY:[0,180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveRightOut":{defaultDuration:950,calls:[[{opacity:[0,1],transformPerspective:[2e3,2e3],transformOriginX:["100%","100%"],transformOriginY:[0,0],rotateY:180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateY:0}}},v.RegisterEffect.packagedEffects)v.RegisterEffect.packagedEffects.hasOwnProperty(n)&&v.RegisterEffect(n,v.RegisterEffect.packagedEffects[n]);v.RunSequence=function(t){var s=D.extend(!0,[],t);1<s.length&&(D.each(s.reverse(),function(t,a){var e,r,n,i=s[t+1];i&&(t=a.o||a.options,e=i.o||i.options,t=t&&!1===t.sequenceQueue?"begin":"complete",r=e&&e[t],(n={})[t]=function(){var t=i.e||i.elements,t=t.nodeType?[t]:t;r&&r.call(t,t),v(a)},i.o?i.o=D.extend({},e,n):i.options=D.extend({},e,n))}),s.reverse()),v(s[0])}}else a.console&&console.log("Velocity UI Pack: Velocity must be loaded first. Aborting.")});
\ No newline at end of file
+!function(t){"function"==typeof require&&"object"==typeof exports?module.exports=t():"function"==typeof define&&define.amd?define(["velocity"],t):t()}(function(){var t=window.jQuery||window.Zepto||window,a=window,O=void(window&&window.document),v=t.Velocity;if(v&&v.Utilities){var e,r,n,D=v.Utilities,t=v.version;if(t=t,r=[],(e={major:1,minor:1,patch:0})&&t&&(D.each([e,t],function(t,a){var e=[];D.each(a,function(t,a){for(;a.toString().length<5;)a="0"+a;e.push(a)}),r.push(e.join(""))}),parseFloat(r[0])>parseFloat(r[1])))throw e="Velocity UI Pack: You need to update Velocity (velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity.",alert(e),new Error(e);for(n in v.RegisterEffect=v.RegisterUI=function(X,Y){return v.Redirects[X]=function(r,s,n,i,o,l,c){var u=n===i-1,t=0;c=c||Y.loop,"function"==typeof Y.defaultDuration?Y.defaultDuration=Y.defaultDuration.call(o,o):Y.defaultDuration=parseFloat(Y.defaultDuration);for(var a=0;a<Y.calls.length;a++)"number"==typeof(y=Y.calls[a][1])&&(t+=y);for(var e=1<=t?0:Y.calls.length?(1-t)/Y.calls.length:1,a=0;a<Y.calls.length;a++){var f,p=Y.calls[a],d=p[0],g=1e3,y=p[1],p=p[2]||{},m={};s.duration!==O?g=s.duration:Y.defaultDuration!==O&&(g=Y.defaultDuration),m.duration=g*("number"==typeof y?y:e),m.queue=s.queue||"",m.easing=p.easing||"ease",m.delay=parseFloat(p.delay)||0,m.loop=!Y.loop&&p.loop,m._cacheValues=p._cacheValues||!0,0===a&&(m.delay+=parseFloat(s.delay)||0,0===n&&(m.begin=function(){s.begin&&s.begin.call(o,o);var t,a,r,n,i,e=X.match(/(In|Out)$/);e&&"In"===e[0]&&d.opacity!==O&&D.each(o.nodeType?[o]:o,function(t,a){v.CSS.setPropertyValue(a,"opacity",0)}),s.animateParentHeight&&e&&(t=o,e=e[0],a=g+m.delay,r=s.stagger,i=0,D.each(t.nodeType?[t]:t,function(t,e){r&&(a+=t*r),n=e.parentNode;t=["height","paddingTop","paddingBottom","marginTop","marginBottom"];"border-box"===v.CSS.getPropertyValue(e,"boxSizing").toString().toLowerCase()&&(t=["height"]),D.each(t,function(t,a){i+=parseFloat(v.CSS.getPropertyValue(e,a))})}),v.animate(n,{height:("In"===e?"+":"-")+"="+i},{queue:!1,easing:"ease-in-out",duration:a*("In"===e?.6:1)}))}),null!==s.display&&(s.display!==O&&"none"!==s.display?m.display=s.display:/In$/.test(X)&&(p=v.CSS.Values.getDisplayType(r),m.display="inline"===p?"inline-block":p)),s.visibility)&&"hidden"!==s.visibility&&(m.visibility=s.visibility),a===Y.calls.length-1&&(f=function(){s.display!==O&&"none"!==s.display||!/Out$/.test(X)||D.each(o.nodeType?[o]:o,function(t,a){v.CSS.setPropertyValue(a,"display","none")}),s.complete&&s.complete.call(o,o),l&&l.resolver(o||r)},m.complete=function(){if(c&&v.Redirects[X](r,s,n,i,o,l,!0===c||Math.max(0,c-1)),Y.reset){for(var t in Y.reset){var a;Y.reset.hasOwnProperty(t)&&(a=Y.reset[t],v.CSS.Hooks.registered[t]!==O||"string"!=typeof a&&"number"!=typeof a||(Y.reset[t]=[Y.reset[t],Y.reset[t]]))}var e={duration:0,queue:!1};u&&(e.complete=f),v.animate(r,Y.reset,e)}else u&&f()},"hidden"===s.visibility)&&(m.visibility=s.visibility),v.animate(r,d,m)}},v},v.RegisterEffect.packagedEffects={"callout.bounce":{defaultDuration:550,calls:[[{translateY:-30},.25],[{translateY:0},.125],[{translateY:-15},.125],[{translateY:0},.25]]},"callout.shake":{defaultDuration:800,calls:[[{translateX:-11}],[{translateX:11}],[{translateX:-11}],[{translateX:11}],[{translateX:-11}],[{translateX:11}],[{translateX:-11}],[{translateX:0}]]},"callout.flash":{defaultDuration:1100,calls:[[{opacity:[0,"easeInOutQuad",1]}],[{opacity:[1,"easeInOutQuad"]}],[{opacity:[0,"easeInOutQuad"]}],[{opacity:[1,"easeInOutQuad"]}]]},"callout.pulse":{defaultDuration:825,calls:[[{scaleX:1.1,scaleY:1.1},.5,{easing:"easeInExpo"}],[{scaleX:1,scaleY:1},.5]]},"callout.swing":{defaultDuration:950,calls:[[{rotateZ:15}],[{rotateZ:-10}],[{rotateZ:5}],[{rotateZ:-5}],[{rotateZ:0}]]},"callout.tada":{defaultDuration:1e3,calls:[[{scaleX:.9,scaleY:.9,rotateZ:-3},.1],[{scaleX:1.1,scaleY:1.1,rotateZ:3},.1],[{scaleX:1.1,scaleY:1.1,rotateZ:-3},.1],["reverse",.125],["reverse",.125],["reverse",.125],["reverse",.125],["reverse",.125],[{scaleX:1,scaleY:1,rotateZ:0},.2]]},"transition.fadeIn":{defaultDuration:500,calls:[[{opacity:[1,0]}]]},"transition.fadeOut":{defaultDuration:500,calls:[[{opacity:[0,1]}]]},"transition.flipXIn":{defaultDuration:700,calls:[[{opacity:[1,0],transformPerspective:[800,800],rotateY:[0,-55]}]],reset:{transformPerspective:0}},"transition.flipXOut":{defaultDuration:700,calls:[[{opacity:[0,1],transformPerspective:[800,800],rotateY:55}]],reset:{transformPerspective:0,rotateY:0}},"transition.flipYIn":{defaultDuration:800,calls:[[{opacity:[1,0],transformPerspective:[800,800],rotateX:[0,-45]}]],reset:{transformPerspective:0}},"transition.flipYOut":{defaultDuration:800,calls:[[{opacity:[0,1],transformPerspective:[800,800],rotateX:25}]],reset:{transformPerspective:0,rotateX:0}},"transition.flipBounceXIn":{defaultDuration:900,calls:[[{opacity:[.725,0],transformPerspective:[400,400],rotateY:[-10,90]},.5],[{opacity:.8,rotateY:10},.25],[{opacity:1,rotateY:0},.25]],reset:{transformPerspective:0}},"transition.flipBounceXOut":{defaultDuration:800,calls:[[{opacity:[.9,1],transformPerspective:[400,400],rotateY:-10}],[{opacity:0,rotateY:90}]],reset:{transformPerspective:0,rotateY:0}},"transition.flipBounceYIn":{defaultDuration:850,calls:[[{opacity:[.725,0],transformPerspective:[400,400],rotateX:[-10,90]},.5],[{opacity:.8,rotateX:10},.25],[{opacity:1,rotateX:0},.25]],reset:{transformPerspective:0}},"transition.flipBounceYOut":{defaultDuration:800,calls:[[{opacity:[.9,1],transformPerspective:[400,400],rotateX:-15}],[{opacity:0,rotateX:90}]],reset:{transformPerspective:0,rotateX:0}},"transition.swoopIn":{defaultDuration:850,calls:[[{opacity:[1,0],transformOriginX:["100%","50%"],transformOriginY:["100%","100%"],scaleX:[1,0],scaleY:[1,0],translateX:[0,-700],translateZ:0}]],reset:{transformOriginX:"50%",transformOriginY:"50%"}},"transition.swoopOut":{defaultDuration:850,calls:[[{opacity:[0,1],transformOriginX:["50%","100%"],transformOriginY:["100%","100%"],scaleX:0,scaleY:0,translateX:-700,translateZ:0}]],reset:{transformOriginX:"50%",transformOriginY:"50%",scaleX:1,scaleY:1,translateX:0}},"transition.whirlIn":{defaultDuration:850,calls:[[{opacity:[1,0],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:[1,0],scaleY:[1,0],rotateY:[0,160]},1,{easing:"easeInOutSine"}]]},"transition.whirlOut":{defaultDuration:750,calls:[[{opacity:[0,"easeInOutQuint",1],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:0,scaleY:0,rotateY:160},1,{easing:"swing"}]],reset:{scaleX:1,scaleY:1,rotateY:0}},"transition.shrinkIn":{defaultDuration:750,calls:[[{opacity:[1,0],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:[1,1.5],scaleY:[1,1.5],translateZ:0}]]},"transition.shrinkOut":{defaultDuration:600,calls:[[{opacity:[0,1],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:1.3,scaleY:1.3,translateZ:0}]],reset:{scaleX:1,scaleY:1}},"transition.expandIn":{defaultDuration:700,calls:[[{opacity:[1,0],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:[1,.625],scaleY:[1,.625],translateZ:0}]]},"transition.expandOut":{defaultDuration:700,calls:[[{opacity:[0,1],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:.5,scaleY:.5,translateZ:0}]],reset:{scaleX:1,scaleY:1}},"transition.bounceIn":{defaultDuration:800,calls:[[{opacity:[1,0],scaleX:[1.05,.3],scaleY:[1.05,.3]},.35],[{scaleX:.9,scaleY:.9,translateZ:0},.2],[{scaleX:1,scaleY:1},.45]]},"transition.bounceOut":{defaultDuration:800,calls:[[{scaleX:.95,scaleY:.95},.35],[{scaleX:1.1,scaleY:1.1,translateZ:0},.35],[{opacity:[0,1],scaleX:.3,scaleY:.3},.3]],reset:{scaleX:1,scaleY:1}},"transition.bounceUpIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateY:[-30,1e3]},.6,{easing:"easeOutCirc"}],[{translateY:10},.2],[{translateY:0},.2]]},"transition.bounceUpOut":{defaultDuration:1e3,calls:[[{translateY:20},.2],[{opacity:[0,"easeInCirc",1],translateY:-1e3},.8]],reset:{translateY:0}},"transition.bounceDownIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateY:[30,-1e3]},.6,{easing:"easeOutCirc"}],[{translateY:-10},.2],[{translateY:0},.2]]},"transition.bounceDownOut":{defaultDuration:1e3,calls:[[{translateY:-20},.2],[{opacity:[0,"easeInCirc",1],translateY:1e3},.8]],reset:{translateY:0}},"transition.bounceLeftIn":{defaultDuration:750,calls:[[{opacity:[1,0],translateX:[30,-1250]},.6,{easing:"easeOutCirc"}],[{translateX:-10},.2],[{translateX:0},.2]]},"transition.bounceLeftOut":{defaultDuration:750,calls:[[{translateX:30},.2],[{opacity:[0,"easeInCirc",1],translateX:-1250},.8]],reset:{translateX:0}},"transition.bounceRightIn":{defaultDuration:750,calls:[[{opacity:[1,0],translateX:[-30,1250]},.6,{easing:"easeOutCirc"}],[{translateX:10},.2],[{translateX:0},.2]]},"transition.bounceRightOut":{defaultDuration:750,calls:[[{translateX:-30},.2],[{opacity:[0,"easeInCirc",1],translateX:1250},.8]],reset:{translateX:0}},"transition.slideUpIn":{defaultDuration:900,calls:[[{opacity:[1,0],translateY:[0,20],translateZ:0}]]},"transition.slideUpOut":{defaultDuration:900,calls:[[{opacity:[0,1],translateY:-20,translateZ:0}]],reset:{translateY:0}},"transition.slideDownIn":{defaultDuration:900,calls:[[{opacity:[1,0],translateY:[0,-20],translateZ:0}]]},"transition.slideDownOut":{defaultDuration:900,calls:[[{opacity:[0,1],translateY:20,translateZ:0}]],reset:{translateY:0}},"transition.slideLeftIn":{defaultDuration:1e3,calls:[[{opacity:[1,0],translateX:[0,-20],translateZ:0}]]},"transition.slideLeftOut":{defaultDuration:1050,calls:[[{opacity:[0,1],translateX:-20,translateZ:0}]],reset:{translateX:0}},"transition.slideRightIn":{defaultDuration:1e3,calls:[[{opacity:[1,0],translateX:[0,20],translateZ:0}]]},"transition.slideRightOut":{defaultDuration:1050,calls:[[{opacity:[0,1],translateX:20,translateZ:0}]],reset:{translateX:0}},"transition.slideUpBigIn":{defaultDuration:850,calls:[[{opacity:[1,0],translateY:[0,75],translateZ:0}]]},"transition.slideUpBigOut":{defaultDuration:800,calls:[[{opacity:[0,1],translateY:-75,translateZ:0}]],reset:{translateY:0}},"transition.slideDownBigIn":{defaultDuration:850,calls:[[{opacity:[1,0],translateY:[0,-75],translateZ:0}]]},"transition.slideDownBigOut":{defaultDuration:800,calls:[[{opacity:[0,1],translateY:75,translateZ:0}]],reset:{translateY:0}},"transition.slideLeftBigIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateX:[0,-75],translateZ:0}]]},"transition.slideLeftBigOut":{defaultDuration:750,calls:[[{opacity:[0,1],translateX:-75,translateZ:0}]],reset:{translateX:0}},"transition.slideRightBigIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateX:[0,75],translateZ:0}]]},"transition.slideRightBigOut":{defaultDuration:750,calls:[[{opacity:[0,1],translateX:75,translateZ:0}]],reset:{translateX:0}},"transition.perspectiveUpIn":{defaultDuration:800,calls:[[{opacity:[1,0],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:["100%","100%"],rotateX:[0,-180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveUpOut":{defaultDuration:850,calls:[[{opacity:[0,1],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:["100%","100%"],rotateX:-180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateX:0}},"transition.perspectiveDownIn":{defaultDuration:800,calls:[[{opacity:[1,0],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:[0,0],rotateX:[0,180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveDownOut":{defaultDuration:850,calls:[[{opacity:[0,1],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:[0,0],rotateX:180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateX:0}},"transition.perspectiveLeftIn":{defaultDuration:950,calls:[[{opacity:[1,0],transformPerspective:[2e3,2e3],transformOriginX:[0,0],transformOriginY:[0,0],rotateY:[0,-180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveLeftOut":{defaultDuration:950,calls:[[{opacity:[0,1],transformPerspective:[2e3,2e3],transformOriginX:[0,0],transformOriginY:[0,0],rotateY:-180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateY:0}},"transition.perspectiveRightIn":{defaultDuration:950,calls:[[{opacity:[1,0],transformPerspective:[2e3,2e3],transformOriginX:["100%","100%"],transformOriginY:[0,0],rotateY:[0,180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveRightOut":{defaultDuration:950,calls:[[{opacity:[0,1],transformPerspective:[2e3,2e3],transformOriginX:["100%","100%"],transformOriginY:[0,0],rotateY:180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateY:0}}},v.RegisterEffect.packagedEffects)v.RegisterEffect.packagedEffects.hasOwnProperty(n)&&v.RegisterEffect(n,v.RegisterEffect.packagedEffects[n]);v.RunSequence=function(t){var s=D.extend(!0,[],t);1<s.length&&(D.each(s.reverse(),function(t,a){var e,r,n,i=s[t+1];i&&(t=a.o||a.options,e=i.o||i.options,t=t&&!1===t.sequenceQueue?"begin":"complete",r=e&&e[t],(n={})[t]=function(){var t=i.e||i.elements,t=t.nodeType?[t]:t;r&&r.call(t,t),v(a)},i.o?i.o=D.extend({},e,n):i.options=D.extend({},e,n))}),s.reverse()),v(s[0])}}else a.console&&console.log("Velocity UI Pack: Velocity must be loaded first. Aborting.")});
\ No newline at end of file
diff --git a/4X/Modules/Button.js b/4X/Modules/Button.js
index 2497cd5a..182ba5d4 100644
--- a/4X/Modules/Button.js
+++ b/4X/Modules/Button.js
@@ -105,8 +105,8 @@ Required dependencies: RovingTabIndex.js
                   $A.isNode(r) && !$A.isNative(r)
                     ? r
                     : !$A.isNative(o)
-                    ? o
-                    : null,
+                      ? o
+                      : null,
                 x = !$A.isNode(n) && $A.isNode(r) && s !== o ? r : null;
               if (x === s) s = o;
               if ($A.isNode(s)) {
diff --git a/4X/Modules/Combobox.js b/4X/Modules/Combobox.js
index ba7d327a..0a98e901 100644
--- a/4X/Modules/Combobox.js
+++ b/4X/Modules/Combobox.js
@@ -143,8 +143,8 @@ Required dependencies: SmoothScroll.js, AccName.js, CurrentDevice.js
                         ? true
                         : false
                       : $A.getAttr(dc.triggerNode, "aria-required") === "true"
-                      ? true
-                      : false;
+                        ? true
+                        : false;
                     dc.cb.multiple = $A.getAttr(dc.cb.sel, "multiple")
                       ? true
                       : false;
@@ -517,9 +517,8 @@ Required dependencies: SmoothScroll.js, AccName.js, CurrentDevice.js
                     var dc = this.dc;
 
                     if (!pass && dc.cb.sel.selectedIndex >= 0)
-                      dc.cb.optionNodes[
-                        dc.cb.sel.selectedIndex
-                      ].selected = false;
+                      dc.cb.optionNodes[dc.cb.sel.selectedIndex].selected =
+                        false;
                     dc.cb.currentOption = null;
 
                     if (dc.cb.isInput) {
diff --git a/4X/Modules/Dragula.js b/4X/Modules/Dragula.js
index 37837a61..37c83b3e 100644
--- a/4X/Modules/Dragula.js
+++ b/4X/Modules/Dragula.js
@@ -923,10 +923,10 @@ Includes modifications by Bryan Garaventa (WhatSock.com) for use within the Apex
             typeof global !== "undefined"
               ? global
               : typeof self !== "undefined"
-              ? self
-              : typeof window !== "undefined"
-              ? window
-              : {},
+                ? self
+                : typeof window !== "undefined"
+                  ? window
+                  : {},
           );
         },
         { "./classes": 1, "contra/emitter": 5, crossvent: 6 },
@@ -1152,10 +1152,10 @@ Includes modifications by Bryan Garaventa (WhatSock.com) for use within the Apex
             typeof global !== "undefined"
               ? global
               : typeof self !== "undefined"
-              ? self
-              : typeof window !== "undefined"
-              ? window
-              : {},
+                ? self
+                : typeof window !== "undefined"
+                  ? window
+                  : {},
           );
         },
         { "./eventmap": 7, "custom-event": 8 },
@@ -1181,10 +1181,10 @@ Includes modifications by Bryan Garaventa (WhatSock.com) for use within the Apex
             typeof global !== "undefined"
               ? global
               : typeof self !== "undefined"
-              ? self
-              : typeof window !== "undefined"
-              ? window
-              : {},
+                ? self
+                : typeof window !== "undefined"
+                  ? window
+                  : {},
           );
         },
         {},
@@ -1215,46 +1215,46 @@ Includes modifications by Bryan Garaventa (WhatSock.com) for use within the Apex
             module.exports = useNative()
               ? NativeCustomEvent
               : // IE >= 9
-              "undefined" !== typeof document &&
-                "function" === typeof document.createEvent
-              ? function CustomEvent(type, params) {
-                  var e = document.createEvent("CustomEvent");
-                  if (params) {
-                    e.initCustomEvent(
-                      type,
-                      params.bubbles,
-                      params.cancelable,
-                      params.detail,
-                    );
-                  } else {
-                    e.initCustomEvent(type, false, false, void 0);
-                  }
-                  return e;
-                }
-              : // IE <= 8
-                function CustomEvent(type, params) {
-                  var e = document.createEventObject();
-                  e.type = type;
-                  if (params) {
-                    e.bubbles = Boolean(params.bubbles);
-                    e.cancelable = Boolean(params.cancelable);
-                    e.detail = params.detail;
-                  } else {
-                    e.bubbles = false;
-                    e.cancelable = false;
-                    e.detail = void 0;
+                "undefined" !== typeof document &&
+                  "function" === typeof document.createEvent
+                ? function CustomEvent(type, params) {
+                    var e = document.createEvent("CustomEvent");
+                    if (params) {
+                      e.initCustomEvent(
+                        type,
+                        params.bubbles,
+                        params.cancelable,
+                        params.detail,
+                      );
+                    } else {
+                      e.initCustomEvent(type, false, false, void 0);
+                    }
+                    return e;
                   }
-                  return e;
-                };
+                : // IE <= 8
+                  function CustomEvent(type, params) {
+                    var e = document.createEventObject();
+                    e.type = type;
+                    if (params) {
+                      e.bubbles = Boolean(params.bubbles);
+                      e.cancelable = Boolean(params.cancelable);
+                      e.detail = params.detail;
+                    } else {
+                      e.bubbles = false;
+                      e.cancelable = false;
+                      e.detail = void 0;
+                    }
+                    return e;
+                  };
           }).call(
             this,
             typeof global !== "undefined"
               ? global
               : typeof self !== "undefined"
-              ? self
-              : typeof window !== "undefined"
-              ? window
-              : {},
+                ? self
+                : typeof window !== "undefined"
+                  ? window
+                  : {},
           );
         },
         {},
diff --git a/4X/Modules/Slider.js b/4X/Modules/Slider.js
index aa92407e..b3b4ef69 100644
--- a/4X/Modules/Slider.js
+++ b/4X/Modules/Slider.js
@@ -54,8 +54,8 @@ Required dependencies: CurrentDevice.js, Dragdealer.js
                   ((config.valueReverse
                     ? getReverseCurrent($A.isNum(i) ? i : config.current)
                     : $A.isNum(i)
-                    ? i
-                    : config.current) -
+                      ? i
+                      : config.current) -
                     1),
               );
             };
diff --git a/4X/Modules/TinySlider.js b/4X/Modules/TinySlider.js
index b05dc136..fcbfe91a 100644
--- a/4X/Modules/TinySlider.js
+++ b/4X/Modules/TinySlider.js
@@ -1167,8 +1167,8 @@ var tns = function (options) {
     result = navAsThumbnails
       ? absIndex
       : fixedWidth || autoWidth
-      ? Math.ceil(((absIndex + 1) * pages) / slideCount - 1)
-      : Math.floor(absIndex / items); // set active nav to the last one when reaches the right edge
+        ? Math.ceil(((absIndex + 1) * pages) / slideCount - 1)
+        : Math.floor(absIndex / items); // set active nav to the last one when reaches the right edge
 
     if (!loop && carousel && index === indexMax) {
       result = pages - 1;
@@ -2951,16 +2951,16 @@ var tns = function (options) {
         (getPages() === slideCount
           ? 0
           : arr[0] === slideCount + cloneCount
-          ? slideCount + cloneCount
-          : cloneCount),
+            ? slideCount + cloneCount
+            : cloneCount),
       end =
         arr[1] +
         1 -
         (getPages() === slideCount
           ? 0
           : arr[1] === slideCount + cloneCount
-          ? slideCount + cloneCount
-          : cloneCount);
+            ? slideCount + cloneCount
+            : cloneCount);
     if (start === end && end > slideCount) return "1";
     if (start < 1 || end > slideCount) return "";
     return start === end ? start + "" : start + " to " + end;
@@ -3370,8 +3370,8 @@ var tns = function (options) {
           (slidePositions[num + 1] - slidePositions[num] - gutter)) /
           2
       : fixedWidth
-      ? (viewport - fixedWidth) / 2
-      : (items - 1) / 2;
+        ? (viewport - fixedWidth) / 2
+        : (items - 1) / 2;
   }
 
   function getRightBoundary() {
diff --git a/4X/Modules/VelocityUI.js b/4X/Modules/VelocityUI.js
index 729dcf5f..cc265a72 100644
--- a/4X/Modules/VelocityUI.js
+++ b/4X/Modules/VelocityUI.js
@@ -172,8 +172,8 @@
           totalDuration >= 1
             ? 0
             : properties.calls.length
-            ? (1 - totalDuration) / properties.calls.length
-            : 1;
+              ? (1 - totalDuration) / properties.calls.length
+              : 1;
 
         /* Iterate through each effect's call array. */
         for (callIndex = 0; callIndex < properties.calls.length; callIndex++) {
diff --git a/4X/Standard/Min/AccName.js b/4X/Standard/Min/AccName.js
index 04be1c31..bf3e7f6b 100644
--- a/4X/Standard/Min/AccName.js
+++ b/4X/Standard/Min/AccName.js
@@ -7,4 +7,4 @@ Author: Bryan Garaventa
 https://github.com/whatsock/w3c-alternative-text-computation
 Distributed under the terms of the Open Source Initiative OSI - MIT License
 */
-!function(){var r=window.AccNamePrototypeNameSpace||window,fe=(r&&"string"==typeof r&&r.length&&(window[r]={},r=window[r]),r.getAccNameVersion="2.60",r.getAccName=r.calcNames=function(e,t,W,r){var G=(r=r||{}).document||document,n={name:"",desc:"",error:""},p=!1,Q=!1;try{if(!e||1!==e.nodeType)return n;function U(e,t,r,n){for(e=e?e.firstChild:null;e;){var o=ee(e)||!1;if(1===e.nodeType&&(!t&&!r||o&&r&&-1!==r.indexOf(o)||!o&&t&&-1!==t.indexOf(e.nodeName.toLowerCase())))return e;if(!n&&1===e.nodeType&&(t||r))return null;e=e.nextSibling}return e}function z(e){var t=e.nodeName.toLowerCase();return!!e.getAttribute("tabindex")||!("a"!==t||!e.getAttribute("href"))||-1!==["button","input","select","textarea"].indexOf(t)&&"hidden"!==(e.getAttribute("type")||"").toLowerCase()}function F(e,t,r,n){for(;e&&e!==t;){if(!n&&1===e.nodeType&&ie(e,t))return!0;n=!1,e=e.parentNode}return!1}function o(e,t){if(-1!==(i=t).indexOf("attr("))for(var r=i.match(/attr\((.|\n|\r\n)*?\)/g),n=0;n<r.length;n++)var o=r[n].slice(5,-1),o=e.getAttribute(o)||"",i=i.replace(r[n],o);return i=i.replace(/url\((.*?)\)\s+\/|url\((.*?)\)/g,"").replace(/^\s+|\s+$/g,"").replace(/\"/g,"")}function m(e,t){var r,n=t||l(e);for(r in d)for(var o=d[r],i=0;i<o.length;i++)if(n[r]&&(0===o[i].indexOf("!")&&-1===[o[i].slice(1),"inherit","initial","unset"].indexOf(n[r])||0===n[r].indexOf(o[i])))return!0;return!t&&e.nodeName&&-1!==f.indexOf(e.nodeName.toLowerCase())&&!(n.display&&0===n.display.indexOf("inline")&&"br"!==e.nodeName.toLowerCase())}function J(e,t,r,n,o,i){var a,l="",d=!1;return r&&!i?l=t.getAttribute("aria-valuetext")||t.getAttribute("aria-valuenow")||"":n&&!i?l=s(t)||"":o&&!i&&(a=[],"grid"===e||"treegrid"===e?a=["gridcell","rowheader","columnheader"]:"listbox"===e?a=["option"]:"tablist"===e?a=["tab"]:"tree"===e&&(a=["treeitem"]),l=u(t,t.querySelectorAll('*[aria-selected="true"]'),!1,a),d=!0),!(l=fe(l))&&(r||n)&&t.value&&(l=t.value),l=d||l||!i?l:o?u(t,t.querySelectorAll("option[selected]"),!0):t.value}function K(e){return fe(e).length?" "+e+" ":" "}var X=e,i=fe(e.getAttribute("role")||""),Y={name:[],desc:[]},Z=[],_=function(I,P,R,E,B,H,$){($=$||{}).tag=$.tag||!1,$.role=$.role||!1,$.go=$.go||!1;function f(e,t,r){var n={name:"",title:""};if(e){var o,i,a,l,d,u=!(!e||1!==e.nodeType||!m(e)),s=e,c=t(e)||{};if(c.name&&c.name.length&&(n.name+=c.name),!c.skip&&(o=e,!(i=H.top)||!o||1!==i.nodeType||1!==o.nodeType||(a=ee(o),l=o.nodeName.toLowerCase(),(d=function(e,t){return a&&0<=t.roles.indexOf(a)||!a&&0<=t.tags.indexOf(l)})(0,x)?o!==i||o.id&&H[o.id]&&H[o.id].node?g(o,H.top)&&"select"!==o.nodeName.toLowerCase()||d(0,b):z(o):!d(0,h)&&(o!==X||d(0,b))||!(a||-1===["section"].indexOf(l)||o.getAttribute("aria-labelledby")||o.getAttribute("aria-label"))||$.go)))for($.go&&($.go=!1),e=e.firstChild;e;)n.name+=f(e,t,r).name,e=e.nextSibling;n.name+=c.owns||"",X===s&&r===s&&!fe(n.name)&&fe(c.title)?n.name=K(c.title):X===s&&r===s&&fe(c.title)&&(n.title=K(c.title)),X===s&&r===s&&fe(c.desc)&&(n.title=K(c.desc)),X===s&&r===s&&fe(c.placeholder)&&!fe(n.name)?(n.name=K(c.placeholder),p=!0):X===s&&r===s&&fe(c.placeholder)&&!fe(n.title)&&(n.title=K(c.placeholder)),(u||c.isWidget)&&(n.name=K(n.name))}return n}var e={name:"",title:""},M=!1,g=function(e,t){for(var r=[];e;){if((e=e.id&&H[e.id]&&H[e.id].node&&-1===r.indexOf(e)?(r.push(e),H[e.id].node):e.parentNode)&&e===t)return!0;if(!e||e===H.top||e===G.body)return!1}return!1},t={before:"",after:""},e=($.tag||$.role||-1!==Y[H.computingDesc?"desc":"name"].indexOf(I)||(t=ae(I,null),W&&(-1===t.before.indexOf(" [ARIA] ")&&-1===t.before.indexOf(" aria-")&&-1===t.before.indexOf(" accName: ")||(t.before=""),-1===t.after.indexOf(" [ARIA] ")&&-1===t.after.indexOf(" aria-")&&-1===t.after.indexOf(" accDescription: ")||(t.after=""))),f(I,function(e){var t=0,r=null,n=[],o=[],i={name:"",title:"",owns:"",skip:!1},a=!!(e&&1===e.nodeType&&E&&E.length&&-1!==E.indexOf(e)&&e===X&&e!==I),l=!1;if((!R&&e&&!ie(e,H.top)||B||a)&&!$.tag&&!$.role&&-1===Y[H.computingDesc?"desc":"name"].indexOf(e)){Y[H.computingDesc?"desc":"name"].push(e);var d="",u="",s={before:"",after:""},c=I===e?e:e.parentNode;if($.tag||$.role||-1!==Y[H.computingDesc?"desc":"name"].indexOf(c)||(Y[H.computingDesc?"desc":"name"].push(c),s=ae(c,I),W&&(-1===s.before.indexOf(" [ARIA] ")&&-1===s.before.indexOf(" aria-")&&-1===s.before.indexOf(" accName: ")||(s.before=""),-1===s.after.indexOf(" [ARIA] ")&&-1===s.after.indexOf(" aria-")&&-1===s.after.indexOf(" accDescription: ")||(s.after=""))),1===e.nodeType){var c=e.nodeName.toLowerCase(),f=ee(e),g=!$.tag&&!$.role&&e.getAttribute("aria-labelledby")||"",p=!$.tag&&!$.role&&e.getAttribute("aria-describedby")||"",m=!$.tag&&!$.role&&e.getAttribute("aria-description"),b=!$.tag&&!$.role&&e.getAttribute("aria-label")||"",h=!$.tag&&!$.role&&e.getAttribute("title")||"";if(e===X&&!f&&-1!==te.indexOf(c))return i;if(e===X&&(-1!==re.indexOf(f)||!f&&-1!==ne.indexOf(c)))return i;var x=-1!==le.indexOf(c),y=-1!==["input"].indexOf(c),v=-1!==de.indexOf(f),A=-1!==ue.indexOf(f),O=-1!==se.indexOf(f),w=v||A||O||"combobox"===f,N=(w||-1!==ce.indexOf(f))&&"link"!==f,C=(i.isWidget=x||N,!1),k=!1,S=e.getAttribute("aria-owns")||"",a=!($.tag||$.role||a||!(e!==I&&(x||w)||e.id&&H[e.id]&&H[e.id].target&&H[e.id].target===e));if(!P&&!$.tag&&!$.role&&g){for(n=g.split(/\s+/),o=[],t=0;t<n.length;t++)r=G.getElementById(n[t]),o.push(_(r,!0,R,[e],r===I,{ref:H,top:r}).name);d=fe(o.join(" ")),fe(d)&&(M=l=C=!0,i.skip=!0)}if(!P&&e===I&&!$.tag&&!$.role&&(p||m)){if(p){for(n=p.split(/\s+/),o=[],t=0;t<n.length;t++)r=G.getElementById(n[t]),o.push(_(r,!0,!1,[e],!1,{ref:H,top:r,computingDesc:!0}).name);D=fe(o.join(" "))}else D=fe(m);fe(D)&&(i.desc=D,k=!0)}$.tag||$.role||C||!fe(b)||a||fe(d=b)&&(l=C=!0,e===I)&&(M=R=!0);w=!$.tag&&!$.role&&!C&&"iframe"!==c&&f&&-1!==oe.indexOf(f)&&!z(e)&&!function(e){for(var t=["labelledby","label","describedby","busy","controls","current","details","disabled","dropeffect","errormessage","flowto","grabbed","haspopup","invalid","keyshortcuts","live","owns","roledescription"],r=0;r<t.length;r++){var n=fe(e.getAttribute("aria-"+t[r]));if(n)return true}return false}(e);if(!a){if(!$.tag&&!$.role&&!C&&e===I&&x){var L=G.querySelectorAll("label"),T="",V=function(e,t,r,n){n=!!n;while(e){e=e.parentNode;if(e&&(r&&ee(e)===r||t&&e.nodeName&&e.nodeName.toLowerCase()===t&&(!n||ee(e).length<1)))return e}return{}}(e,"label")||!1;for(t=0;t<L.length;t++)(L[t]!==V||"string"==typeof V.getAttribute("for"))&&L[t].getAttribute("for")!==e.id||F(L[t],G.body)||(T+=K(_(L[t],!0,R,[e],!1,{ref:H,top:L[t]}).name));fe(d=T)&&(C=!0)}var g=!$.tag&&!$.role&&y&&(e.getAttribute("type")||"").toLowerCase()||!1,p=!$.tag&&!$.role&&g&&fe(e.getAttribute("value"))||!1,D=w&&"img"===c?"":fe(e.alt||e.getAttribute("alt"));if($.tag||$.role||C||w||"img"!==f&&"img"!==c&&"image"!==g||!D&&!fe(h)||(d=fe(D)||fe(h),fe(d)&&(C=!0)),$.tag||$.role||C||w||"area"!==c||!D||(d=fe(D),fe(d)&&(C=!0)),"optgroup"===c&&($.tag||$.role||C||w||!e.getAttribute("label")||(d=fe(e.getAttribute("label")),fe(d)&&(C=!0)),i.skip=!0),!$.tag&&!$.role&&!C&&e===I&&g&&-1!==["button","submit","reset"].indexOf(g)){if(p)d=p;else switch(g){case"submit":d="submit";break;case"reset":d="reset";break;default:d=""}fe(d)&&(C=!0)}!$.tag&&!$.role&&C&&e===I&&g&&-1!==["button","submit","reset"].indexOf(g)&&p&&p!==d&&!i.desc&&(i.desc=p,k=!0),$.tag||$.role||C||e!==I||!g||"image"!==g||(d="Submit Query",Q=C=!0),!($.tag||$.role||C||e!==X||"group"!==f&&"radiogroup"!==f&&(f||"fieldset"!==c))&&((q=U(e,["legend"],["legend"])||!1)&&(d=fe(_(q,P,!1,[],!1,{ref:H,top:q}).name)),fe(d)&&(C=!0),R=!0),!($.tag||$.role||C||e!==X||"table"!==f&&(f||"table"!==c))&&((q=U(e,["caption"],["caption"])||!1)&&(d=fe(_(q,P,!1,[],!1,{ref:H,top:q}).name)),fe(d)&&(C=!0),R=!0),$.tag||$.role||"svg"!==c||(b=e.querySelector("title")||!1,y=e===X&&e.querySelector("desc")||!1,!C&&b&&(d=fe(_(b,!0,!1,[],!1,{ref:H,top:b}).name)),!k&&y&&(D=fe(_(y,!0,!1,[],!1,{ref:H,top:y}).name),fe(D))&&(i.desc=D),i.skip=!0)}$.tag||$.role||!a||E&&E.length&&-1!==E.indexOf(e)||(v?d=J(f,e,!0):A||"combobox"===f&&x?d=J(f,e,!1,!0):O?d=J(f,e,!1,!1,!0):!x||-1===["input","textarea"].indexOf(c)||N&&!A?!x||"select"!==c||N&&"combobox"!==f||(d=J(f,e,!1,!1,!0,!0)):d=J(f,e,!1,!1,!1,!0),d=fe(d)),$.tag||$.role||w||!fe(h)||d&&" "===m||(i.title=fe(h));var j,p=(p=x&&fe(e.getAttribute("type")||"").toLowerCase())||"text",g=!$.tag&&!$.role&&e===X&&e===I&&(A||x&&("textarea"===c||"input"===c&&-1!==["password","search","tel","text","url","email"].indexOf(p)))&&fe(e.getAttribute("placeholder")||e.getAttribute("aria-placeholder")),q=(g&&(i.placeholder=g),$.role&&$.role===f||!f&&$.tag&&$.tag===c);if(q&&(d=fe(_(e,P,!1,[],!1,{ref:H,top:e}).name),fe(d))&&(R=!0),!q&&S&&-1===["input","img","progress"].indexOf(c)){for(n=S.split(/\s+/),o=[],t=0;t<n.length;t++)(r=G.getElementById(n[t]))&&-1===Z.indexOf(n[t])&&(Z.push(n[t]),(j={ref:H,top:H.top})[n[t]]={refNode:I,node:e,target:r},F(r,G.body)||o.push(_(r,!0,R,[],!1,j).name));u=o.join("")}}else $.tag||$.role||3!==e.nodeType||(d=e.data);(d=l?d:s.before+d.replace(/\s+/g," ")+s.after).length&&!function(e,t,r,n){var o=[];while(e&&e!==t){if(e.id&&r&&r[e.id]&&r[e.id].node&&o.indexOf(e)===-1){o.push(e);e=r[e.id].node}else e=e.parentNode;if(e&&e.getAttribute)if(fe(e.getAttribute("aria-label"))||!n&&ie(e,t))return true}return false}(e,H.top,H)&&(i.name=d),i.owns=u}return i},I));return M||(e.name=t.before+e.name.replace(/\s+/g," ")+t.after),e},ee=function(e){var t=e&&e.getAttribute?(e.getAttribute("role")||"").toLowerCase():"";if(fe(t)){function r(e){return 0<fe(t).length&&0<=e.roles.indexOf(t)}for(var n=t.split(/\s+/),o=0;o<n.length;o++)if(t=n[o],r(b)||r(h)||r(x)||r(a)||-1!==oe.indexOf(t))return t}return""},b={roles:["button","checkbox","link","option","radio","switch","tab","treeitem","menuitem","menuitemcheckbox","menuitemradio","row","cell","gridcell","columnheader","rowheader","tooltip","heading"],tags:["a","button","summary","input","h1","h2","h3","h4","h5","h6","menuitem","option","tr","td","th"]},h={roles:["application","alert","log","marquee","timer","alertdialog","dialog","banner","complementary","form","main","navigation","region","search","article","document","feed","figure","img","math","toolbar","menu","menubar","grid","listbox","radiogroup","textbox","searchbox","spinbutton","scrollbar","slider","tablist","tabpanel","tree","treegrid","separator","rowgroup","group"],tags:["article","aside","body","select","datalist","optgroup","dialog","figure","footer","form","header","hr","iframe","img","textarea","input","main","math","menu","nav","section","thead","tbody","tfoot","fieldset"]},x={roles:["term","definition","directory","list","note","status","table","contentinfo"],tags:["dl","ul","ol","dd","details","output","table"]},a={roles:["legend","caption","code","deletion","emphasis","generic","insertion","paragraph","strong","subscript","superscript"],tags:["legend","caption","figcaption","code","del","em","div","span","ins","p","strong","sub","sup"]},te=["div","span"],re=["caption","code","deletion","emphasis","generic","insertion","none","paragraph","presentation","strong","subscript","superscript"],ne=["caption","figcaption","code","del","em","div","span","ins","p","strong","sub","sup"],le=["button","input","select","textarea"],de=["scrollbar","slider","spinbutton"],ue=["searchbox","textbox"],se=["grid","listbox","tablist","tree","treegrid"],ce=["button","checkbox","link","switch","option","menu","menubar","menuitem","menuitemcheckbox","menuitemradio","radio","tab","treeitem","gridcell"],oe=["presentation","none"],ie=r.isHidden||function(e,t){return!(!(e=e)||1!==e.nodeType||e===t||"true"!==e.getAttribute("aria-hidden")&&!e.getAttribute("hidden")&&"none"!==(e=l(e)).display&&"hidden"!==e.visibility)},l=r.getStyleObject||function(e){var t={};return G.defaultView&&G.defaultView.getComputedStyle?t=G.defaultView.getComputedStyle(e,""):e.currentStyle&&(t=e.currentStyle),t},d={display:["block","grid","table","flow-root","flex"],position:["absolute","fixed"],float:["left","right","inline"],clear:["left","right","both","inline"],overflow:["hidden","scroll","auto"],"column-count":["!auto"],"column-width":["!auto"],"column-span":["all"],contain:["layout","content","strict"]},f=["address","article","aside","blockquote","br","canvas","dd","div","dl","dt","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","legend","li","main","nav","noscript","ol","output","p","pre","section","table","td","tfoot","th","tr","ul","video"],u=function(e,t,r,n){if(!t||!t.length)return"";for(var o=[],i=0;i<t.length;i++){var a=ee(t[i]);(!n||-1!==n.indexOf(a))&&o.push(r?s(t[i]):_(t[i],!0,!1,[],!1,{top:t[i]}).name)}return o.join(" ")},g=r.getPseudoElStyleObj||function(e,t){var r,n={};for(r in d)n[r]=G.defaultView.getComputedStyle(e,t).getPropertyValue(r);return n.content=G.defaultView.getComputedStyle(e,t).getPropertyValue("content").replace(/^"|\\|"$/g,""),n},s=function(e,t){var r,n;return t||1!==e.nodeType?(n=(r=g(e,t)).content)&&"none"!==n?(m({},r)&&(":before"===t?n+=" ":":after"===t&&(n=" "+n)),n):"":e.innerText||e.textContent||""},ae=r.getCSSText||function(e,t){return e&&1!==e.nodeType||e===t||-1!==["input","select","textarea","img","iframe","optgroup"].indexOf(e.nodeName.toLowerCase())?{before:"",after:""}:{before:o(e,s(e,":before")),after:o(e,s(e,":after"))}};if(F(e,G.body,0,!(!e||!e.nodeName||"area"!==e.nodeName.toLowerCase())))return n;var c=_(e,!1,!1,[],!1,{top:e}),y=fe(c.name.replace(/\s+/g," ")),v=fe(c.title.replace(/\s+/g," "));n.hasUpperCase=!(!i||i===i.toLowerCase()),n.name=y,n.desc=v,Y={name:[],desc:[]},Z=[]}catch(e){n.error=e}return n.placeholder=p,n.userAgent=Q,t&&"function"==typeof t?t.apply(e,[n,e]):n},function(e){return"string"!=typeof e?"":e.replace(/^\s+|\s+$/g,"")});r.getAccNameMsg=r.getNames=function(e,t){e=r.getAccName(e,null,!1,t);return e.error?e.error+"\n\nAn error has been thrown in AccName Prototype version "+r.getAccNameVersion+". Please copy this error message and the HTML markup that caused it, and submit both as a new GitHub issue at\nhttps://github.com/whatsock/w3c-alternative-text-computation":(t='accName: "'+e.name+'"\n\naccDesc: "'+e.desc+'"\n\n',e.placeholder&&(t+="Name from placeholder: true\n\n"),e.userAgent&&(t+="Name from user agent: true\n\n"),t+("(Running AccName Computation Prototype version: "+r.getAccNameVersion)+")")},"object"==typeof module&&module.exports&&(module.exports={getNames:r.getNames,calcNames:r.calcNames})}();
\ No newline at end of file
+!function(){var r=window.AccNamePrototypeNameSpace||window,me=(r&&"string"==typeof r&&r.length&&(window[r]={},r=window[r]),r.getAccNameVersion="2.60",r.getAccName=r.calcNames=function(e,t,W,r){var G=(r=r||{}).document||document,n={name:"",desc:"",error:""},p=!1,Q=!1;try{if(!e||1!==e.nodeType)return n;var U=e,o=me(e.getAttribute("role")||""),z={name:[],desc:[]},F=[],J=function(I,P,R,E,B,H,$){($=$||{}).tag=$.tag||!1,$.role=$.role||!1,$.go=$.go||!1;function f(e,t,r){var n={name:"",title:""};if(e){var o,i,a,l,d,u=!(!e||1!==e.nodeType||!x(e)),s=e,c=t(e)||{};if(c.name&&c.name.length&&(n.name+=c.name),!c.skip&&(o=e,!(i=H.top)||!o||1!==i.nodeType||1!==o.nodeType||(a=X(o),l=o.nodeName.toLowerCase(),(d=function(e,t){return a&&0<=t.roles.indexOf(a)||!a&&0<=t.tags.indexOf(l)})(0,h)?o!==i||o.id&&H[o.id]&&H[o.id].node?g(o,H.top)&&"select"!==o.nodeName.toLowerCase()||d(0,m):Y(o):!d(0,b)&&(o!==U||d(0,m))||!(a||-1===["section"].indexOf(l)||o.getAttribute("aria-labelledby")||o.getAttribute("aria-label"))||$.go)))for($.go&&($.go=!1),e=e.firstChild;e;)n.name+=f(e,t,r).name,e=e.nextSibling;n.name+=c.owns||"",U===s&&r===s&&!me(n.name)&&me(c.title)?n.name=ie(c.title):U===s&&r===s&&me(c.title)&&(n.title=ie(c.title)),U===s&&r===s&&me(c.desc)&&(n.title=ie(c.desc)),U===s&&r===s&&me(c.placeholder)&&!me(n.name)?(n.name=ie(c.placeholder),p=!0):U===s&&r===s&&me(c.placeholder)&&!me(n.title)&&(n.title=ie(c.placeholder)),(u||c.isWidget)&&(n.name=ie(n.name))}return n}var e={name:"",title:""},M=!1,g=function(e,t){for(var r=[];e;){if((e=e.id&&H[e.id]&&H[e.id].node&&-1===r.indexOf(e)?(r.push(e),H[e.id].node):e.parentNode)&&e===t)return!0;if(!e||e===H.top||e===G.body)return!1}return!1},t={before:"",after:""},e=($.tag||$.role||-1!==z[H.computingDesc?"desc":"name"].indexOf(I)||(t=ae(I,null),W&&(-1===t.before.indexOf(" [ARIA] ")&&-1===t.before.indexOf(" aria-")&&-1===t.before.indexOf(" accName: ")||(t.before=""),-1===t.after.indexOf(" [ARIA] ")&&-1===t.after.indexOf(" aria-")&&-1===t.after.indexOf(" accDescription: ")||(t.after=""))),f(I,function(e){var t=0,r=null,n=[],o=[],i={name:"",title:"",owns:"",skip:!1},a=!!(e&&1===e.nodeType&&E&&E.length&&-1!==E.indexOf(e)&&e===U&&e!==I),l=!1;if((!R&&e&&!re(e,H.top)||B||a)&&!$.tag&&!$.role&&-1===z[H.computingDesc?"desc":"name"].indexOf(e)){z[H.computingDesc?"desc":"name"].push(e);var d="",u="",s={before:"",after:""},c=I===e?e:e.parentNode;if($.tag||$.role||-1!==z[H.computingDesc?"desc":"name"].indexOf(c)||(z[H.computingDesc?"desc":"name"].push(c),s=ae(c,I),W&&(-1===s.before.indexOf(" [ARIA] ")&&-1===s.before.indexOf(" aria-")&&-1===s.before.indexOf(" accName: ")||(s.before=""),-1===s.after.indexOf(" [ARIA] ")&&-1===s.after.indexOf(" aria-")&&-1===s.after.indexOf(" accDescription: ")||(s.after=""))),1===e.nodeType){var c=e.nodeName.toLowerCase(),f=X(e),g=!$.tag&&!$.role&&e.getAttribute("aria-labelledby")||"",p=!$.tag&&!$.role&&e.getAttribute("aria-describedby")||"",m=!$.tag&&!$.role&&e.getAttribute("aria-description"),b=!$.tag&&!$.role&&e.getAttribute("aria-label")||"",h=!$.tag&&!$.role&&e.getAttribute("title")||"";if(e===U&&!f&&-1!==Z.indexOf(c))return i;if(e===U&&(-1!==_.indexOf(f)||!f&&-1!==ee.indexOf(c)))return i;var x=-1!==le.indexOf(c),y=-1!==["input"].indexOf(c),A=-1!==de.indexOf(f),v=-1!==ue.indexOf(f),O=-1!==se.indexOf(f),w=A||v||O||"combobox"===f,N=(w||-1!==ce.indexOf(f))&&"link"!==f,C=(i.isWidget=x||N,!1),k=!1,S=e.getAttribute("aria-owns")||"",a=!($.tag||$.role||a||!(e!==I&&(x||w)||e.id&&H[e.id]&&H[e.id].target&&H[e.id].target===e));if(!P&&!$.tag&&!$.role&&g){for(n=g.split(/\s+/),o=[],t=0;t<n.length;t++)r=G.getElementById(n[t]),o.push(J(r,!0,R,[e],r===I,{ref:H,top:r}).name);d=me(o.join(" ")),me(d)&&(M=l=C=!0,i.skip=!0)}if(!P&&e===I&&!$.tag&&!$.role&&(p||m)){if(p){for(n=p.split(/\s+/),o=[],t=0;t<n.length;t++)r=G.getElementById(n[t]),o.push(J(r,!0,!1,[e],!1,{ref:H,top:r,computingDesc:!0}).name);D=me(o.join(" "))}else D=me(m);me(D)&&(i.desc=D,k=!0)}$.tag||$.role||C||!me(b)||a||me(d=b)&&(l=C=!0,e===I)&&(M=R=!0);w=!$.tag&&!$.role&&!C&&"iframe"!==c&&f&&-1!==te.indexOf(f)&&!Y(e)&&!fe(e);if(!a){if(!$.tag&&!$.role&&!C&&e===I&&x){var L=G.querySelectorAll("label"),T="",V=ge(e,"label")||!1;for(t=0;t<L.length;t++)(L[t]!==V||"string"==typeof V.getAttribute("for"))&&L[t].getAttribute("for")!==e.id||ne(L[t],G.body)||(T+=ie(J(L[t],!0,R,[e],!1,{ref:H,top:L[t]}).name));me(d=T)&&(C=!0)}var g=!$.tag&&!$.role&&y&&(e.getAttribute("type")||"").toLowerCase()||!1,p=!$.tag&&!$.role&&g&&me(e.getAttribute("value"))||!1,D=w&&"img"===c?"":me(e.alt||e.getAttribute("alt"));if($.tag||$.role||C||w||"img"!==f&&"img"!==c&&"image"!==g||!D&&!me(h)||(d=me(D)||me(h),me(d)&&(C=!0)),$.tag||$.role||C||w||"area"!==c||!D||(d=me(D),me(d)&&(C=!0)),"optgroup"===c&&($.tag||$.role||C||w||!e.getAttribute("label")||(d=me(e.getAttribute("label")),me(d)&&(C=!0)),i.skip=!0),!$.tag&&!$.role&&!C&&e===I&&g&&-1!==["button","submit","reset"].indexOf(g)){if(p)d=p;else switch(g){case"submit":d="submit";break;case"reset":d="reset";break;default:d=""}me(d)&&(C=!0)}!$.tag&&!$.role&&C&&e===I&&g&&-1!==["button","submit","reset"].indexOf(g)&&p&&p!==d&&!i.desc&&(i.desc=p,k=!0),$.tag||$.role||C||e!==I||!g||"image"!==g||(d="Submit Query",Q=C=!0),!($.tag||$.role||C||e!==U||"group"!==f&&"radiogroup"!==f&&(f||"fieldset"!==c))&&((q=K(e,["legend"],["legend"])||!1)&&(d=me(J(q,P,!1,[],!1,{ref:H,top:q}).name)),me(d)&&(C=!0),R=!0),!($.tag||$.role||C||e!==U||"table"!==f&&(f||"table"!==c))&&((q=K(e,["caption"],["caption"])||!1)&&(d=me(J(q,P,!1,[],!1,{ref:H,top:q}).name)),me(d)&&(C=!0),R=!0),$.tag||$.role||"svg"!==c||(b=e.querySelector("title")||!1,y=e===U&&e.querySelector("desc")||!1,!C&&b&&(d=me(J(b,!0,!1,[],!1,{ref:H,top:b}).name)),!k&&y&&(D=me(J(y,!0,!1,[],!1,{ref:H,top:y}).name),me(D))&&(i.desc=D),i.skip=!0)}$.tag||$.role||!a||E&&E.length&&-1!==E.indexOf(e)||(A?d=oe(f,e,!0):v||"combobox"===f&&x?d=oe(f,e,!1,!0):O?d=oe(f,e,!1,!1,!0):!x||-1===["input","textarea"].indexOf(c)||N&&!v?!x||"select"!==c||N&&"combobox"!==f||(d=oe(f,e,!1,!1,!0,!0)):d=oe(f,e,!1,!1,!1,!0),d=me(d)),$.tag||$.role||w||!me(h)||d&&" "===m||(i.title=me(h));var j,p=(p=x&&me(e.getAttribute("type")||"").toLowerCase())||"text",g=!$.tag&&!$.role&&e===U&&e===I&&(v||x&&("textarea"===c||"input"===c&&-1!==["password","search","tel","text","url","email"].indexOf(p)))&&me(e.getAttribute("placeholder")||e.getAttribute("aria-placeholder")),q=(g&&(i.placeholder=g),$.role&&$.role===f||!f&&$.tag&&$.tag===c);if(q&&(d=me(J(e,P,!1,[],!1,{ref:H,top:e}).name),me(d))&&(R=!0),!q&&S&&-1===["input","img","progress"].indexOf(c)){for(n=S.split(/\s+/),o=[],t=0;t<n.length;t++)(r=G.getElementById(n[t]))&&-1===F.indexOf(n[t])&&(F.push(n[t]),(j={ref:H,top:H.top})[n[t]]={refNode:I,node:e,target:r},ne(r,G.body)||o.push(J(r,!0,R,[],!1,j).name));u=o.join("")}}else $.tag||$.role||3!==e.nodeType||(d=e.data);(d=l?d:s.before+d.replace(/\s+/g," ")+s.after).length&&!pe(e,H.top,H)&&(i.name=d),i.owns=u}return i},I));return M||(e.name=t.before+e.name.replace(/\s+/g," ")+t.after),e},K=function(e,t,r,n){for(e=e?e.firstChild:null;e;){var o=X(e)||!1;if(1===e.nodeType&&(!t&&!r||o&&r&&-1!==r.indexOf(o)||!o&&t&&-1!==t.indexOf(e.nodeName.toLowerCase())))return e;if(!n&&1===e.nodeType&&(t||r))return null;e=e.nextSibling}return e},X=function(e){var t=e&&e.getAttribute?(e.getAttribute("role")||"").toLowerCase():"";if(me(t))for(var r=function(e){return 0<me(t).length&&0<=e.roles.indexOf(t)},n=t.split(/\s+/),o=0;o<n.length;o++)if(t=n[o],r(m)||r(b)||r(h)||r(i)||-1!==te.indexOf(t))return t;return""},Y=function(e){var t=e.nodeName.toLowerCase();return!!e.getAttribute("tabindex")||!("a"!==t||!e.getAttribute("href"))||-1!==["button","input","select","textarea"].indexOf(t)&&"hidden"!==(e.getAttribute("type")||"").toLowerCase()},m={roles:["button","checkbox","link","option","radio","switch","tab","treeitem","menuitem","menuitemcheckbox","menuitemradio","row","cell","gridcell","columnheader","rowheader","tooltip","heading"],tags:["a","button","summary","input","h1","h2","h3","h4","h5","h6","menuitem","option","tr","td","th"]},b={roles:["application","alert","log","marquee","timer","alertdialog","dialog","banner","complementary","form","main","navigation","region","search","article","document","feed","figure","img","math","toolbar","menu","menubar","grid","listbox","radiogroup","textbox","searchbox","spinbutton","scrollbar","slider","tablist","tabpanel","tree","treegrid","separator","rowgroup","group"],tags:["article","aside","body","select","datalist","optgroup","dialog","figure","footer","form","header","hr","iframe","img","textarea","input","main","math","menu","nav","section","thead","tbody","tfoot","fieldset"]},h={roles:["term","definition","directory","list","note","status","table","contentinfo"],tags:["dl","ul","ol","dd","details","output","table"]},i={roles:["legend","caption","code","deletion","emphasis","generic","insertion","paragraph","strong","subscript","superscript"],tags:["legend","caption","figcaption","code","del","em","div","span","ins","p","strong","sub","sup"]},Z=["div","span"],_=["caption","code","deletion","emphasis","generic","insertion","none","paragraph","presentation","strong","subscript","superscript"],ee=["caption","figcaption","code","del","em","div","span","ins","p","strong","sub","sup"],le=["button","input","select","textarea"],de=["scrollbar","slider","spinbutton"],ue=["searchbox","textbox"],se=["grid","listbox","tablist","tree","treegrid"],ce=["button","checkbox","link","switch","option","menu","menubar","menuitem","menuitemcheckbox","menuitemradio","radio","tab","treeitem","gridcell"],te=["presentation","none"],fe=function(e){for(var t=["labelledby","label","describedby","busy","controls","current","details","disabled","dropeffect","errormessage","flowto","grabbed","haspopup","invalid","keyshortcuts","live","owns","roledescription"],r=0;r<t.length;r++)if(me(e.getAttribute("aria-"+t[r])))return!0;return!1},re=r.isHidden||function(e,t){return!(!(e=e)||1!==e.nodeType||e===t||"true"!==e.getAttribute("aria-hidden")&&!e.getAttribute("hidden")&&"none"!==(e=a(e)).display&&"hidden"!==e.visibility)},ne=function(e,t,r,n){for(;e&&e!==t;){if(!n&&1===e.nodeType&&re(e,t))return!0;n=!1,e=e.parentNode}return!1},a=r.getStyleObject||function(e){var t={};return G.defaultView&&G.defaultView.getComputedStyle?t=G.defaultView.getComputedStyle(e,""):e.currentStyle&&(t=e.currentStyle),t},l=function(e,t){if(-1!==(i=t).indexOf("attr("))for(var r=i.match(/attr\((.|\n|\r\n)*?\)/g),n=0;n<r.length;n++)var o=r[n].slice(5,-1),o=e.getAttribute(o)||"",i=i.replace(r[n],o);return i=i.replace(/url\((.*?)\)\s+\/|url\((.*?)\)/g,"").replace(/^\s+|\s+$/g,"").replace(/\"/g,"")},x=function(e,t){var r,n=t||a(e);for(r in d)for(var o=d[r],i=0;i<o.length;i++)if(n[r]&&(0===o[i].indexOf("!")&&-1===[o[i].slice(1),"inherit","initial","unset"].indexOf(n[r])||0===n[r].indexOf(o[i])))return!0;return!t&&e.nodeName&&-1!==f.indexOf(e.nodeName.toLowerCase())&&!(n.display&&0===n.display.indexOf("inline")&&"br"!==e.nodeName.toLowerCase())},d={display:["block","grid","table","flow-root","flex"],position:["absolute","fixed"],float:["left","right","inline"],clear:["left","right","both","inline"],overflow:["hidden","scroll","auto"],"column-count":["!auto"],"column-width":["!auto"],"column-span":["all"],contain:["layout","content","strict"]},f=["address","article","aside","blockquote","br","canvas","dd","div","dl","dt","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","legend","li","main","nav","noscript","ol","output","p","pre","section","table","td","tfoot","th","tr","ul","video"],oe=function(e,t,r,n,o,i){var a,l="",d=!1;return r&&!i?l=t.getAttribute("aria-valuetext")||t.getAttribute("aria-valuenow")||"":n&&!i?l=s(t)||"":o&&!i&&(a=[],"grid"===e||"treegrid"===e?a=["gridcell","rowheader","columnheader"]:"listbox"===e?a=["option"]:"tablist"===e?a=["tab"]:"tree"===e&&(a=["treeitem"]),l=u(t,t.querySelectorAll('*[aria-selected="true"]'),!1,a),d=!0),!(l=me(l))&&(r||n)&&t.value&&(l=t.value),l=d||l||!i?l:o?u(t,t.querySelectorAll("option[selected]"),!0):t.value},ie=function(e){return me(e).length?" "+e+" ":" "},u=function(e,t,r,n){if(!t||!t.length)return"";for(var o=[],i=0;i<t.length;i++){var a=X(t[i]);(!n||-1!==n.indexOf(a))&&o.push(r?s(t[i]):J(t[i],!0,!1,[],!1,{top:t[i]}).name)}return o.join(" ")},g=r.getPseudoElStyleObj||function(e,t){var r,n={};for(r in d)n[r]=G.defaultView.getComputedStyle(e,t).getPropertyValue(r);return n.content=G.defaultView.getComputedStyle(e,t).getPropertyValue("content").replace(/^"|\\|"$/g,""),n},s=function(e,t){var r,n;return t||1!==e.nodeType?(n=(r=g(e,t)).content)&&"none"!==n?(x({},r)&&(":before"===t?n+=" ":":after"===t&&(n=" "+n)),n):"":e.innerText||e.textContent||""},ae=r.getCSSText||function(e,t){return e&&1!==e.nodeType||e===t||-1!==["input","select","textarea","img","iframe","optgroup"].indexOf(e.nodeName.toLowerCase())?{before:"",after:""}:{before:l(e,s(e,":before")),after:l(e,s(e,":after"))}},ge=function(e,t,r,n){for(n=!!n;e;)if((e=e.parentNode)&&(r&&X(e)===r||t&&e.nodeName&&e.nodeName.toLowerCase()===t&&(!n||X(e).length<1)))return e;return{}},pe=function(e,t,r,n){for(var o=[];e&&e!==t;)if((e=e.id&&r&&r[e.id]&&r[e.id].node&&-1===o.indexOf(e)?(o.push(e),r[e.id].node):e.parentNode)&&e.getAttribute&&(me(e.getAttribute("aria-label"))||!n&&re(e,t)))return!0;return!1};if(ne(e,G.body,0,!(!e||!e.nodeName||"area"!==e.nodeName.toLowerCase())))return n;var c=J(e,!1,!1,[],!1,{top:e}),y=me(c.name.replace(/\s+/g," ")),A=me(c.title.replace(/\s+/g," "));n.hasUpperCase=!(!o||o===o.toLowerCase()),n.name=y,n.desc=A,z={name:[],desc:[]},F=[]}catch(e){n.error=e}return n.placeholder=p,n.userAgent=Q,t&&"function"==typeof t?t.apply(e,[n,e]):n},function(e){return"string"!=typeof e?"":e.replace(/^\s+|\s+$/g,"")});r.getAccNameMsg=r.getNames=function(e,t){e=r.getAccName(e,null,!1,t);return e.error?e.error+"\n\nAn error has been thrown in AccName Prototype version "+r.getAccNameVersion+". Please copy this error message and the HTML markup that caused it, and submit both as a new GitHub issue at\nhttps://github.com/whatsock/w3c-alternative-text-computation":(t='accName: "'+e.name+'"\n\naccDesc: "'+e.desc+'"\n\n',e.placeholder&&(t+="Name from placeholder: true\n\n"),e.userAgent&&(t+="Name from user agent: true\n\n"),t+("(Running AccName Computation Prototype version: "+r.getAccNameVersion)+")")},"object"==typeof module&&module.exports&&(module.exports={getNames:r.getNames,calcNames:r.calcNames})}();
\ No newline at end of file
diff --git a/4X/Standard/Min/CurrentDevice.js b/4X/Standard/Min/CurrentDevice.js
index 4c254357..c7c94512 100644
--- a/4X/Standard/Min/CurrentDevice.js
+++ b/4X/Standard/Min/CurrentDevice.js
@@ -2,4 +2,4 @@
  * current-device v0.10.1 - https://github.com/matthewhudson/current-device
  * MIT Licensed
  */
-!function(n,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.device=o():n.device=o()}(window,function(){return e=[function(n,o,e){n.exports=e(1)},function(n,o,e){"use strict";e.r(o);var t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},r=window.device,i={},a=[],c=(window.device=i,window.document.documentElement),d=window.navigator.userAgent.toLowerCase(),l=["googletv","viera","smarttv","internet.tv","netcast","nettv","appletv","boxee","kylo","roku","dlnadoc","pov_tv","hbbtv","ce-html"];function u(n,o){return-1!==n.indexOf(o)}function s(n){return u(d,n)}function f(n){return c.className.match(new RegExp(n,"i"))}function b(n){var o;f(n)||(o=c.className.replace(/^\s+|\s+$/g,""),c.className=o+" "+n)}function p(n){f(n)&&(c.className=c.className.replace(" "+n,""))}function w(){i.landscape()?(p("portrait"),b("landscape"),y("landscape")):(p("landscape"),b("portrait"),y("portrait")),h()}function y(n){for(var o=0;o<a.length;o++)a[o](n)}i.macos=function(){return s("mac")},i.ios=function(){return i.iphone()||i.ipod()||i.ipad()},i.iphone=function(){return!i.windows()&&s("iphone")},i.ipod=function(){return s("ipod")},i.ipad=function(){var n="MacIntel"===navigator.platform&&1<navigator.maxTouchPoints;return s("ipad")||n},i.android=function(){return!i.windows()&&s("android")},i.androidPhone=function(){return i.android()&&s("mobile")},i.androidTablet=function(){return i.android()&&!s("mobile")},i.blackberry=function(){return s("blackberry")||s("bb10")},i.blackberryPhone=function(){return i.blackberry()&&!s("tablet")},i.blackberryTablet=function(){return i.blackberry()&&s("tablet")},i.windows=function(){return s("windows")},i.windowsPhone=function(){return i.windows()&&s("phone")},i.windowsTablet=function(){return i.windows()&&s("touch")&&!i.windowsPhone()},i.fxos=function(){return(s("(mobile")||s("(tablet"))&&s(" rv:")},i.fxosPhone=function(){return i.fxos()&&s("mobile")},i.fxosTablet=function(){return i.fxos()&&s("tablet")},i.meego=function(){return s("meego")},i.cordova=function(){return window.cordova&&"file:"===location.protocol},i.nodeWebkit=function(){return"object"===t(window.process)},i.mobile=function(){return i.androidPhone()||i.iphone()||i.ipod()||i.windowsPhone()||i.blackberryPhone()||i.fxosPhone()||i.meego()},i.tablet=function(){return i.ipad()||i.androidTablet()||i.blackberryTablet()||i.windowsTablet()||i.fxosTablet()},i.desktop=function(){return!i.tablet()&&!i.mobile()},i.television=function(){for(var n=0;n<l.length;){if(s(l[n]))return!0;n++}return!1},i.portrait=function(){return screen.orientation&&Object.prototype.hasOwnProperty.call(window,"onorientationchange")?u(screen.orientation.type,"portrait"):i.ios()&&Object.prototype.hasOwnProperty.call(window,"orientation")?90!==Math.abs(window.orientation):1<window.innerHeight/window.innerWidth},i.landscape=function(){return screen.orientation&&Object.prototype.hasOwnProperty.call(window,"onorientationchange")?u(screen.orientation.type,"landscape"):i.ios()&&Object.prototype.hasOwnProperty.call(window,"orientation")?90===Math.abs(window.orientation):window.innerHeight/window.innerWidth<1},i.noConflict=function(){return window.device=r,this},i.ios()?i.ipad()?b("ios ipad tablet"):i.iphone()?b("ios iphone mobile"):i.ipod()&&b("ios ipod mobile"):i.macos()?b("macos desktop"):i.android()?i.androidTablet()?b("android tablet"):b("android mobile"):i.blackberry()?i.blackberryTablet()?b("blackberry tablet"):b("blackberry mobile"):i.windows()?i.windowsTablet()?b("windows tablet"):i.windowsPhone()?b("windows mobile"):b("windows desktop"):i.fxos()?i.fxosTablet()?b("fxos tablet"):b("fxos mobile"):i.meego()?b("meego mobile"):i.nodeWebkit()?b("node-webkit"):i.television()?b("television"):i.desktop()&&b("desktop"),i.cordova()&&b("cordova"),i.onChangeOrientation=function(n){"function"==typeof n&&a.push(n)};e="resize";function m(n){for(var o=0;o<n.length;o++)if(i[n[o]]())return n[o];return"unknown"}function h(){i.orientation=m(["portrait","landscape"])}Object.prototype.hasOwnProperty.call(window,"onorientationchange")&&(e="orientationchange"),window.addEventListener?window.addEventListener(e,w,!1):window.attachEvent?window.attachEvent(e,w):window[e]=w,w(),i.type=m(["mobile","tablet","desktop"]),i.os=m(["ios","iphone","ipad","ipod","android","blackberry","macos","windows","fxos","meego","television"]),h(),o.default=i}],t={},r.m=e,r.c=t,r.d=function(n,o,e){r.o(n,o)||Object.defineProperty(n,o,{enumerable:!0,get:e})},r.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},r.t=function(o,n){if(1&n&&(o=r(o)),8&n)return o;if(4&n&&"object"==typeof o&&o&&o.__esModule)return o;var e=Object.create(null);if(r.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:o}),2&n&&"string"!=typeof o)for(var t in o)r.d(e,t,function(n){return o[n]}.bind(null,t));return e},r.n=function(n){var o=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(o,"a",o),o},r.o=function(n,o){return Object.prototype.hasOwnProperty.call(n,o)},r.p="",r(r.s=0).default;function r(n){var o;return(t[n]||(o=t[n]={i:n,l:!1,exports:{}},e[n].call(o.exports,o,o.exports,r),o.l=!0,o)).exports}var e,t});
\ No newline at end of file
+!function(n,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.device=o():n.device=o()}(window,function(){return e=[function(n,o,e){n.exports=e(1)},function(n,o,e){e.r(o);var t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},r=window.device,i={},a=[],c=(window.device=i,window.document.documentElement),d=window.navigator.userAgent.toLowerCase(),l=["googletv","viera","smarttv","internet.tv","netcast","nettv","appletv","boxee","kylo","roku","dlnadoc","pov_tv","hbbtv","ce-html"];function u(n,o){return-1!==n.indexOf(o)}function s(n){return u(d,n)}function f(n){return c.className.match(new RegExp(n,"i"))}function b(n){var o;f(n)||(o=c.className.replace(/^\s+|\s+$/g,""),c.className=o+" "+n)}function p(n){f(n)&&(c.className=c.className.replace(" "+n,""))}function w(){i.landscape()?(p("portrait"),b("landscape"),y("landscape")):(p("landscape"),b("portrait"),y("portrait")),h()}function y(n){for(var o=0;o<a.length;o++)a[o](n)}i.macos=function(){return s("mac")},i.ios=function(){return i.iphone()||i.ipod()||i.ipad()},i.iphone=function(){return!i.windows()&&s("iphone")},i.ipod=function(){return s("ipod")},i.ipad=function(){var n="MacIntel"===navigator.platform&&1<navigator.maxTouchPoints;return s("ipad")||n},i.android=function(){return!i.windows()&&s("android")},i.androidPhone=function(){return i.android()&&s("mobile")},i.androidTablet=function(){return i.android()&&!s("mobile")},i.blackberry=function(){return s("blackberry")||s("bb10")},i.blackberryPhone=function(){return i.blackberry()&&!s("tablet")},i.blackberryTablet=function(){return i.blackberry()&&s("tablet")},i.windows=function(){return s("windows")},i.windowsPhone=function(){return i.windows()&&s("phone")},i.windowsTablet=function(){return i.windows()&&s("touch")&&!i.windowsPhone()},i.fxos=function(){return(s("(mobile")||s("(tablet"))&&s(" rv:")},i.fxosPhone=function(){return i.fxos()&&s("mobile")},i.fxosTablet=function(){return i.fxos()&&s("tablet")},i.meego=function(){return s("meego")},i.cordova=function(){return window.cordova&&"file:"===location.protocol},i.nodeWebkit=function(){return"object"===t(window.process)},i.mobile=function(){return i.androidPhone()||i.iphone()||i.ipod()||i.windowsPhone()||i.blackberryPhone()||i.fxosPhone()||i.meego()},i.tablet=function(){return i.ipad()||i.androidTablet()||i.blackberryTablet()||i.windowsTablet()||i.fxosTablet()},i.desktop=function(){return!i.tablet()&&!i.mobile()},i.television=function(){for(var n=0;n<l.length;){if(s(l[n]))return!0;n++}return!1},i.portrait=function(){return screen.orientation&&Object.prototype.hasOwnProperty.call(window,"onorientationchange")?u(screen.orientation.type,"portrait"):i.ios()&&Object.prototype.hasOwnProperty.call(window,"orientation")?90!==Math.abs(window.orientation):1<window.innerHeight/window.innerWidth},i.landscape=function(){return screen.orientation&&Object.prototype.hasOwnProperty.call(window,"onorientationchange")?u(screen.orientation.type,"landscape"):i.ios()&&Object.prototype.hasOwnProperty.call(window,"orientation")?90===Math.abs(window.orientation):window.innerHeight/window.innerWidth<1},i.noConflict=function(){return window.device=r,this},i.ios()?i.ipad()?b("ios ipad tablet"):i.iphone()?b("ios iphone mobile"):i.ipod()&&b("ios ipod mobile"):i.macos()?b("macos desktop"):i.android()?i.androidTablet()?b("android tablet"):b("android mobile"):i.blackberry()?i.blackberryTablet()?b("blackberry tablet"):b("blackberry mobile"):i.windows()?i.windowsTablet()?b("windows tablet"):i.windowsPhone()?b("windows mobile"):b("windows desktop"):i.fxos()?i.fxosTablet()?b("fxos tablet"):b("fxos mobile"):i.meego()?b("meego mobile"):i.nodeWebkit()?b("node-webkit"):i.television()?b("television"):i.desktop()&&b("desktop"),i.cordova()&&b("cordova"),i.onChangeOrientation=function(n){"function"==typeof n&&a.push(n)};e="resize";function m(n){for(var o=0;o<n.length;o++)if(i[n[o]]())return n[o];return"unknown"}function h(){i.orientation=m(["portrait","landscape"])}Object.prototype.hasOwnProperty.call(window,"onorientationchange")&&(e="orientationchange"),window.addEventListener?window.addEventListener(e,w,!1):window.attachEvent?window.attachEvent(e,w):window[e]=w,w(),i.type=m(["mobile","tablet","desktop"]),i.os=m(["ios","iphone","ipad","ipod","android","blackberry","macos","windows","fxos","meego","television"]),h(),o.default=i}],t={},r.m=e,r.c=t,r.d=function(n,o,e){r.o(n,o)||Object.defineProperty(n,o,{enumerable:!0,get:e})},r.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},r.t=function(o,n){if(1&n&&(o=r(o)),8&n)return o;if(4&n&&"object"==typeof o&&o&&o.__esModule)return o;var e=Object.create(null);if(r.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:o}),2&n&&"string"!=typeof o)for(var t in o)r.d(e,t,function(n){return o[n]}.bind(null,t));return e},r.n=function(n){var o=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(o,"a",o),o},r.o=function(n,o){return Object.prototype.hasOwnProperty.call(n,o)},r.p="",r(r.s=0).default;function r(n){var o;return(t[n]||(o=t[n]={i:n,l:!1,exports:{}},e[n].call(o.exports,o,o.exports,r),o.l=!0,o)).exports}var e,t});
\ No newline at end of file
diff --git a/4X/Standard/Min/Dragula.js b/4X/Standard/Min/Dragula.js
index d3d918ea..f38bd6a8 100644
--- a/4X/Standard/Min/Dragula.js
+++ b/4X/Standard/Min/Dragula.js
@@ -4,4 +4,4 @@ Author: Nicolas Bevacqua
 License: MIT (https://opensource.org/licenses/MIT)
 Includes modifications by Bryan Garaventa (WhatSock.com) for use within the Apex 4X ARIA Drag module.
 */
-!function(e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).dragula=e()}(function(){return function o(r,i,u){function c(t,e){if(!i[t]){if(!r[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(a)return a(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}n=i[t]={exports:{}},r[t][0].call(n.exports,function(e){return c(r[t][1][e]||e)},n,n.exports,o,r,i,u)}return i[t].exports}for(var a="function"==typeof require&&require,e=0;e<u.length;e++)c(u[e]);return c}({1:[function(e,t,n){"use strict";var o={},r="(?:^|\\s)",i="(?:\\s|$)";function u(e){var t=o[e];return t?t.lastIndex=0:o[e]=t=new RegExp(r+e+i,"g"),t}t.exports={add:function(e,t){var n=e.className;n.length?u(t).test(n)||(e.className+=" "+t):e.className=t},rm:function(e,t){e.className=e.className.replace(u(t)," ").trim()}}},{}],2:[function(n,o,e){!function(r){"use strict";var M=n("contra/emitter"),k=n("crossvent"),R=n("./classes"),j=document,q=j.documentElement,e=!1;try{var t={get passive(){return!(e=!0)}};window.addEventListener("test",null,t),window.removeEventListener("test",null,t)}catch(e){}var U=!0;function K(e,t,n,o){r.navigator.pointerEnabled?k[t](e,{mouseup:"pointerup",mousedown:"pointerdown",mousemove:"pointermove"}[n],o):r.navigator.msPointerEnabled?k[t](e,{mouseup:"MSPointerUp",mousedown:"MSPointerDown",mousemove:"MSPointerMove"}[n],o):(k[t](e,{mouseup:"touchend",mousedown:"touchstart",mousemove:"touchmove"}[n],o),k[t](e,n,o))}function z(e){return void 0!==e.touches?e.touches.length:void 0!==e.which&&0!==e.which?e.which:void 0!==e.buttons?e.buttons:void 0!==(e=e.button)?1&e?1:2&e?3:4&e?2:0:void 0}function H(e,t){return void 0!==r[t]?r[t]:(q.clientHeight?q:j.body)[e]}function V(e,t,n){var o=(e=e||{}).className||"";return e.className+=" gu-hide",t=j.elementFromPoint(t,n),e.className=o,t}function $(){return!1}function G(){return!0}function J(e){return e.width||e.right-e.left}function Q(e){return e.height||e.bottom-e.top}function W(e){return e.parentNode===j?null:e.parentNode}function Z(e){return"INPUT"===e.tagName||"TEXTAREA"===e.tagName||"SELECT"===e.tagName||function e(t){if(!t)return!1;if("false"===t.contentEditable)return!1;if("true"===t.contentEditable)return!0;return e(W(t))}(e)}function ee(t){return t.nextElementSibling||function(){var e=t;for(;e=e.nextSibling,e&&1!==e.nodeType;);return e}()}function te(e,t){var t=(t=t).targetTouches&&t.targetTouches.length?t.targetTouches[0]:t.changedTouches&&t.changedTouches.length?t.changedTouches[0]:t,n={pageX:"clientX",pageY:"clientY"};return t[e=e in n&&!(e in t)&&n[e]in t?n[e]:e]}j.addEventListener("touchmove",function(e){U||e.preventDefault()},!!e&&{passive:!1}),o.exports=function(e,t){1===arguments.length&&!1===Array.isArray(e)&&(t=e,e=[]);var l,f,s,d,m,o,r,p,v,h,n,i,g=null,y=t||{},w=(void 0===y.moves&&(y.moves=G),void 0===y.accepts&&(y.accepts=G),void 0===y.invalid&&(y.invalid=function(){return!1}),void 0===y.containers&&(y.containers=e||[]),void 0===y.isContainer&&(y.isContainer=$),void 0===y.copy&&(y.copy=!1),void 0===y.copySortSource&&(y.copySortSource=!1),void 0===y.revertOnSpill&&(y.revertOnSpill=!1),void 0===y.removeOnSpill&&(y.removeOnSpill=!1),void 0===y.direction&&(y.direction="vertical"),void 0===y.ignoreInputTextSelection&&(y.ignoreInputTextSelection=!0),void 0===y.mirrorContainer&&(y.mirrorContainer=j.body),M({containers:y.containers,start:function(e){e=E(e);e&&x(e)},end:C,cancel:_,remove:N,destroy:function(){c(!0),O({})},canMove:function(e){return!!E(e)},dragging:!1}));return!0===y.removeOnSpill&&w.on("over",function(e){R.rm(e,"gu-hide")}).on("out",function(e){w.dragging&&R.add(e,"gu-hide")}),c(),w.on("drag",function(e,t){U=!1}).on("dragend",function(e){U=!0}),w;function u(e){return-1!==w.containers.indexOf(e)||y.isContainer(e)}function c(e){e=e?"remove":"add";K(q,e,"mousedown",P),K(q,e,"mouseup",O)}function a(e){K(q,e?"remove":"add","mousemove",F)}function b(e){e=e?"remove":"add";k[e](q,"selectstart",T),k[e](q,"click",T)}function T(e){i&&e.preventDefault()}function P(e){var t,n;o=e.clientX,r=e.clientY,1!==z(e)||e.metaKey||e.ctrlKey||(n=E(t=e.target))&&(i=n,a(),"mousedown"===e.type)&&(Z(t)?t.focus():e.preventDefault())}function F(e){if(i)if(0===z(e))O({});else if(!(void 0!==e.clientX&&Math.abs(e.clientX-o)<=(y.slideFactorX||0)&&void 0!==e.clientY&&Math.abs(e.clientY-r)<=(y.slideFactorY||0))){if(y.ignoreInputTextSelection){var t=te("clientX",e)||0,n=te("clientY",e)||0;if(Z(j.elementFromPoint(t,n)))return}var t=i,n=(a(!0),b(),C(),x(t),function(e){e=e.getBoundingClientRect();return{left:e.left+H("scrollLeft","pageXOffset"),top:e.top+H("scrollTop","pageYOffset")}}(s));d=te("pageX",e)-n.left,m=te("pageY",e)-n.top,R.add(h||s,"gu-transit"),l||(t=s.getBoundingClientRect(),w.emit("beforeClone",s),(l=s.cloneNode(!0)).style.width=J(t)+"px",l.style.height=Q(t)+"px",R.rm(l,"gu-transit"),R.add(l,"gu-mirror"),y.mirrorContainer.appendChild(l),K(q,"add","mousemove",B),R.add(y.mirrorContainer,"gu-unselectable"),w.emit("cloned",l,s,"mirror")),B(e)}}function E(e){if(!(w.dragging&&l||u(e))){for(var t=e;W(e)&&!1===u(W(e));){if(y.invalid(e,t))return;if(!(e=W(e)))return}var n=W(e);if(n)if(!y.invalid(e,t))if(y.moves(e,n,t,ee(e)))return{item:e,source:n}}}function x(e){var t,n;t=e.item,n=e.source,("boolean"==typeof y.copy?y.copy:y.copy(t,n))&&(w.emit("beforeClone",e.item),h=e.item.cloneNode(!0),w.emit("cloned",h,e.item,"copy")),f=e.source,s=e.item,p=v=ee(e.item),w.dragging=!0,w.emit("drag",s,f)}function C(){var e;w.dragging&&I(e=h||s,W(e))}function S(){a(!(i=!1)),b(!0)}function O(e){var t,n;S(),w.dragging&&(t=h||s,n=te("clientX",e)||0,e=te("clientY",e)||0,(n=Y(V(l,n,e),n,e))&&(h&&y.copySortSource||!h||n!==f)?I(t,n):(y.removeOnSpill?N:_)())}function I(e,t){var n=W(e);h&&y.copySortSource&&t===f&&n.removeChild(s),X(t)?w.emit("cancel",e,f,f):w.emit("drop",e,t,f,v),L()}function N(){var e,t;w.dragging&&((t=W(e=h||s))&&t.removeChild(e),w.emit(h?"cancel":"remove",e,t,f),L())}function _(e){var t,n,o;w.dragging&&(e=0<arguments.length?e:y.revertOnSpill,!1===(o=X(n=W(t=h||s)))&&e&&(h?n&&n.removeChild(h):f.insertBefore(t,p)),o||e?w.emit("cancel",t,f,f):w.emit("drop",t,n,f,v),L())}function L(){var e=h||s;S(),l&&(R.rm(y.mirrorContainer,"gu-unselectable"),K(q,"remove","mousemove",B),W(l).removeChild(l),l=null),e&&R.rm(e,"gu-transit"),n&&clearTimeout(n),w.dragging=!1,g&&w.emit("out",e,g,f),w.emit("dragend",e),f=s=h=p=v=n=g=null}function X(e,t){t=void 0!==t?t:l?v:ee(h||s);return e===f&&t===p}function Y(t,n,o){for(var r=t;r&&!function(){if(!1===u(r))return;var e=A(r,t),e=D(r,e,n,o);if(X(r,e))return 1;return y.accepts(s,r,f,e)}();)r=W(r);return r}function B(e){if(l){e.preventDefault();var t=te("clientX",e)||0,e=te("clientY",e)||0,n=t-d,o=e-m,r=(l.style.left=n+"px",l.style.top=o+"px",l.getBoundingClientRect()),i=((r.y<o-2||r.y>2+o||r.x<n-2||r.x>2+n)&&(n+=n-r.x,o+=o-r.y,l.style.left=n+"px",l.style.top=o+"px"),h||s),r=V(l,t,e),n=Y(r,t,e),o=null!==n&&n!==g,u=((o||null===n)&&(g&&a("out"),g=n,o)&&a("over"),W(i));if(n===f&&h&&!y.copySortSource)u&&u.removeChild(i);else{var c,r=A(n,r);if(null!==r)c=D(n,r,t,e);else{if(!0!==y.revertOnSpill||h)return void(h&&u&&u.removeChild(i));c=p,n=f}(null===c&&o||c!==i&&c!==ee(i))&&(v=c,n.insertBefore(i,c),w.emit("shadow",i,n,f))}}function a(e){w.emit(e,i,g,f)}}function A(e,t){for(var n=t;n!==e&&W(n)!==e;)n=W(n);return n===q?null:n}function D(r,t,i,u){var c="horizontal"===y.direction;return(t!==r?function(){var e=t.getBoundingClientRect();if(c)return n(i>e.left+J(e)/2);return n(u>e.top+Q(e)/2)}:function(){var e,t,n,o=r.children.length;for(e=0;e<o;e++){if(t=r.children[e],n=t.getBoundingClientRect(),c&&n.left+n.width/2>i)return t;if(!c&&n.top+n.height/2>u)return t}return null})();function n(e){return e?ee(t):t}}}}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./classes":1,"contra/emitter":5,crossvent:6}],3:[function(e,t,n){t.exports=function(e,t){return Array.prototype.slice.call(e,t)}},{}],4:[function(e,t,n){"use strict";var o=e("ticky");t.exports=function(e,t,n){e&&o(function(){e.apply(n||null,t||[])})}},{ticky:10}],5:[function(e,t,n){"use strict";var c=e("atoa"),a=e("./debounce");t.exports=function(r,e){var i=e||{},u={};return(r=void 0===r?{}:r).on=function(e,t){return u[e]?u[e].push(t):u[e]=[t],r},r.once=function(e,t){return t._once=!0,r.on(e,t),r},r.off=function(e,t){var n=arguments.length;if(1===n)delete u[e];else if(0===n)u={};else{n=u[e];if(!n)return r;n.splice(n.indexOf(t),1)}return r},r.emit=function(){var e=c(arguments);return r.emitterSnapshot(e.shift()).apply(this,e)},r.emitterSnapshot=function(o){var e=(u[o]||[]).slice(0);return function(){var t=c(arguments),n=this||r;if("error"!==o||!1===i.throws||e.length)return e.forEach(function(e){i.async?a(e,t,n):e.apply(n,t),e._once&&r.off(o,e)}),r;throw 1===t.length?t[0]:t}},r}},{"./debounce":4,atoa:3}],6:[function(n,l,e){!function(r){"use strict";var o=n("custom-event"),i=n("./eventmap"),u=r.document,e=function(e,t,n,o){return e.addEventListener(t,n,o)},t=function(e,t,n,o){return e.removeEventListener(t,n,o)},c=[];function a(e,t,n){e=function(e,t,n){var o,r;for(o=0;o<c.length;o++)if((r=c[o]).element===e&&r.type===t&&r.fn===n)return o}(e,t,n);if(e)return t=c[e].wrapper,c.splice(e,1),t}r.addEventListener||(e=function(e,t,n){return e.attachEvent("on"+t,function(e,t,n){var o=a(e,t,n)||function(n,o){return function(e){var t=e||r.event;t.target=t.target||t.srcElement,t.preventDefault=t.preventDefault||function(){t.returnValue=!1},t.stopPropagation=t.stopPropagation||function(){t.cancelBubble=!0},t.which=t.which||t.keyCode,o.call(n,t)}}(e,n);return c.push({wrapper:o,element:e,type:t,fn:n}),o}(e,t,n))},t=function(e,t,n){n=a(e,t,n);if(n)return e.detachEvent("on"+t,n)}),l.exports={add:e,remove:t,fabricate:function(e,t,n){n=-1===i.indexOf(t)?new o(t,{detail:n}):function(){var e;u.createEvent?(e=u.createEvent("Event")).initEvent(t,!0,!0):u.createEventObject&&(e=u.createEventObject());return e}();e.dispatchEvent?e.dispatchEvent(n):e.fireEvent("on"+t,n)}}}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./eventmap":7,"custom-event":8}],7:[function(e,r,t){!function(e){"use strict";var t=[],n="",o=/^on/;for(n in e)o.test(n)&&t.push(n.slice(2));r.exports=t}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],8:[function(e,n,t){!function(e){var t=e.CustomEvent;n.exports=function(){try{var e=new t("cat",{detail:{foo:"bar"}});return"cat"===e.type&&"bar"===e.detail.foo}catch(e){}}()?t:"undefined"!=typeof document&&"function"==typeof document.createEvent?function(e,t){var n=document.createEvent("CustomEvent");return t?n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail):n.initCustomEvent(e,!1,!1,void 0),n}:function(e,t){var n=document.createEventObject();return n.type=e,t?(n.bubbles=Boolean(t.bubbles),n.cancelable=Boolean(t.cancelable),n.detail=t.detail):(n.bubbles=!1,n.cancelable=!1,n.detail=void 0),n}}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],9:[function(e,t,n){var o,r,t=t.exports={};function i(){throw new Error("setTimeout has not been defined")}function u(){throw new Error("clearTimeout has not been defined")}try{o="function"==typeof setTimeout?setTimeout:i}catch(e){o=i}try{r="function"==typeof clearTimeout?clearTimeout:u}catch(e){r=u}function c(t){if(o===setTimeout)return setTimeout(t,0);if((o===i||!o)&&setTimeout)return(o=setTimeout)(t,0);try{return o(t,0)}catch(e){try{return o.call(null,t,0)}catch(e){return o.call(this,t,0)}}}var a,l=[],f=!1,s=-1;function d(){f&&a&&(f=!1,a.length?l=a.concat(l):s=-1,l.length)&&m()}function m(){if(!f){for(var e=c(d),t=(f=!0,l.length);t;){for(a=l,l=[];++s<t;)a&&a[s].run();s=-1,t=l.length}a=null,f=!1,!function(t){if(r===clearTimeout)return clearTimeout(t);if((r===u||!r)&&clearTimeout)return(r=clearTimeout)(t);try{r(t)}catch(e){try{return r.call(null,t)}catch(e){return r.call(this,t)}}}(e)}}function p(e,t){this.fun=e,this.array=t}function v(){}t.nextTick=function(e){var t=new Array(arguments.length-1);if(1<arguments.length)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];l.push(new p(e,t)),1!==l.length||f||c(m)},p.prototype.run=function(){this.fun.apply(null,this.array)},t.title="browser",t.browser=!0,t.env={},t.argv=[],t.version="",t.versions={},t.on=v,t.addListener=v,t.once=v,t.off=v,t.removeListener=v,t.removeAllListeners=v,t.emit=v,t.prependListener=v,t.prependOnceListener=v,t.listeners=function(e){return[]},t.binding=function(e){throw new Error("process.binding is not supported")},t.cwd=function(){return"/"},t.chdir=function(e){throw new Error("process.chdir is not supported")},t.umask=function(){return 0}},{}],10:[function(e,n,t){!function(t){var e="function"==typeof t?function(e){t(e)}:function(e){setTimeout(e,0)};n.exports=e}.call(this,e("timers").setImmediate)},{timers:11}],11:[function(a,e,l){!function(e,t){var o=a("process/browser.js").nextTick,n=Function.prototype.apply,r=Array.prototype.slice,i={},u=0;function c(e,t){this._id=e,this._clearFn=t}l.setTimeout=function(){return new c(n.call(setTimeout,window,arguments),clearTimeout)},l.setInterval=function(){return new c(n.call(setInterval,window,arguments),clearInterval)},l.clearTimeout=l.clearInterval=function(e){e.close()},c.prototype.unref=c.prototype.ref=function(){},c.prototype.close=function(){this._clearFn.call(window,this._id)},l.enroll=function(e,t){clearTimeout(e._idleTimeoutId),e._idleTimeout=t},l.unenroll=function(e){clearTimeout(e._idleTimeoutId),e._idleTimeout=-1},l._unrefActive=l.active=function(e){clearTimeout(e._idleTimeoutId);var t=e._idleTimeout;0<=t&&(e._idleTimeoutId=setTimeout(function(){e._onTimeout&&e._onTimeout()},t))},l.setImmediate="function"==typeof e?e:function(e){var t=u++,n=!(arguments.length<2)&&r.call(arguments,1);return i[t]=!0,o(function(){i[t]&&(n?e.apply(null,n):e.call(null),l.clearImmediate(t))}),t},l.clearImmediate="function"==typeof t?t:function(e){delete i[e]}}.call(this,a("timers").setImmediate,a("timers").clearImmediate)},{"process/browser.js":9,timers:11}]},{},[2])(2)});
\ No newline at end of file
+!function(e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).dragula=e()}(function(){return function o(r,i,u){function c(n,e){if(!i[n]){if(!r[n]){var t="function"==typeof require&&require;if(!e&&t)return t(n,!0);if(a)return a(n,!0);throw(e=new Error("Cannot find module '"+n+"'")).code="MODULE_NOT_FOUND",e}t=i[n]={exports:{}},r[n][0].call(t.exports,function(e){return c(r[n][1][e]||e)},t,t.exports,o,r,i,u)}return i[n].exports}for(var a="function"==typeof require&&require,e=0;e<u.length;e++)c(u[e]);return c}({1:[function(e,n,t){var o={},r="(?:^|\\s)",i="(?:\\s|$)";function u(e){var n=o[e];return n?n.lastIndex=0:o[e]=n=new RegExp(r+e+i,"g"),n}n.exports={add:function(e,n){var t=e.className;t.length?u(n).test(t)||(e.className+=" "+n):e.className=n},rm:function(e,n){e.className=e.className.replace(u(n)," ").trim()}}},{}],2:[function(t,o,e){!function(r){var M=t("contra/emitter"),k=t("crossvent"),R=t("./classes"),j=document,q=j.documentElement,e=!1;try{var n={get passive(){return!(e=!0)}};window.addEventListener("test",null,n),window.removeEventListener("test",null,n)}catch(e){}var U=!0;function K(e,n,t,o){r.navigator.pointerEnabled?k[n](e,{mouseup:"pointerup",mousedown:"pointerdown",mousemove:"pointermove"}[t],o):r.navigator.msPointerEnabled?k[n](e,{mouseup:"MSPointerUp",mousedown:"MSPointerDown",mousemove:"MSPointerMove"}[t],o):(k[n](e,{mouseup:"touchend",mousedown:"touchstart",mousemove:"touchmove"}[t],o),k[n](e,t,o))}function z(e){return void 0!==e.touches?e.touches.length:void 0!==e.which&&0!==e.which?e.which:void 0!==e.buttons?e.buttons:void 0!==(e=e.button)?1&e?1:2&e?3:4&e?2:0:void 0}function H(e,n){return void 0!==r[n]?r[n]:(q.clientHeight?q:j.body)[e]}function V(e,n,t){var o=(e=e||{}).className||"";return e.className+=" gu-hide",n=j.elementFromPoint(n,t),e.className=o,n}function $(){return!1}function G(){return!0}function J(e){return e.width||e.right-e.left}function Q(e){return e.height||e.bottom-e.top}function W(e){return e.parentNode===j?null:e.parentNode}function Z(e){return"INPUT"===e.tagName||"TEXTAREA"===e.tagName||"SELECT"===e.tagName||function e(n){if(!n)return!1;if("false"===n.contentEditable)return!1;if("true"===n.contentEditable)return!0;return e(W(n))}(e)}function ee(n){return n.nextElementSibling||function(){var e=n;for(;e=e.nextSibling,e&&1!==e.nodeType;);return e}()}function ne(e,n){var n=(n=n).targetTouches&&n.targetTouches.length?n.targetTouches[0]:n.changedTouches&&n.changedTouches.length?n.changedTouches[0]:n,t={pageX:"clientX",pageY:"clientY"};return n[e=e in t&&!(e in n)&&t[e]in n?t[e]:e]}j.addEventListener("touchmove",function(e){U||e.preventDefault()},!!e&&{passive:!1}),o.exports=function(e,n){1===arguments.length&&!1===Array.isArray(e)&&(n=e,e=[]);var l,f,s,d,m,o,r,p,v,h,t,i,g=null,y=n||{},w=(void 0===y.moves&&(y.moves=G),void 0===y.accepts&&(y.accepts=G),void 0===y.invalid&&(y.invalid=function(){return!1}),void 0===y.containers&&(y.containers=e||[]),void 0===y.isContainer&&(y.isContainer=$),void 0===y.copy&&(y.copy=!1),void 0===y.copySortSource&&(y.copySortSource=!1),void 0===y.revertOnSpill&&(y.revertOnSpill=!1),void 0===y.removeOnSpill&&(y.removeOnSpill=!1),void 0===y.direction&&(y.direction="vertical"),void 0===y.ignoreInputTextSelection&&(y.ignoreInputTextSelection=!0),void 0===y.mirrorContainer&&(y.mirrorContainer=j.body),M({containers:y.containers,start:function(e){e=E(e);e&&x(e)},end:C,cancel:_,remove:N,destroy:function(){c(!0),O({})},canMove:function(e){return!!E(e)},dragging:!1}));return!0===y.removeOnSpill&&w.on("over",function(e){R.rm(e,"gu-hide")}).on("out",function(e){w.dragging&&R.add(e,"gu-hide")}),c(),w.on("drag",function(e,n){U=!1}).on("dragend",function(e){U=!0}),w;function u(e){return-1!==w.containers.indexOf(e)||y.isContainer(e)}function c(e){e=e?"remove":"add";K(q,e,"mousedown",P),K(q,e,"mouseup",O)}function a(e){K(q,e?"remove":"add","mousemove",F)}function b(e){e=e?"remove":"add";k[e](q,"selectstart",T),k[e](q,"click",T)}function T(e){i&&e.preventDefault()}function P(e){var n,t;o=e.clientX,r=e.clientY,1!==z(e)||e.metaKey||e.ctrlKey||(t=E(n=e.target))&&(i=t,a(),"mousedown"===e.type)&&(Z(n)?n.focus():e.preventDefault())}function F(e){if(i)if(0===z(e))O({});else if(!(void 0!==e.clientX&&Math.abs(e.clientX-o)<=(y.slideFactorX||0)&&void 0!==e.clientY&&Math.abs(e.clientY-r)<=(y.slideFactorY||0))){if(y.ignoreInputTextSelection){var n=ne("clientX",e)||0,t=ne("clientY",e)||0;if(Z(j.elementFromPoint(n,t)))return}var n=i,t=(a(!0),b(),C(),x(n),function(e){e=e.getBoundingClientRect();return{left:e.left+H("scrollLeft","pageXOffset"),top:e.top+H("scrollTop","pageYOffset")}}(s));d=ne("pageX",e)-t.left,m=ne("pageY",e)-t.top,R.add(h||s,"gu-transit"),l||(n=s.getBoundingClientRect(),w.emit("beforeClone",s),(l=s.cloneNode(!0)).style.width=J(n)+"px",l.style.height=Q(n)+"px",R.rm(l,"gu-transit"),R.add(l,"gu-mirror"),y.mirrorContainer.appendChild(l),K(q,"add","mousemove",B),R.add(y.mirrorContainer,"gu-unselectable"),w.emit("cloned",l,s,"mirror")),B(e)}}function E(e){if(!(w.dragging&&l||u(e))){for(var n=e;W(e)&&!1===u(W(e));){if(y.invalid(e,n))return;if(!(e=W(e)))return}var t=W(e);if(t)if(!y.invalid(e,n))if(y.moves(e,t,n,ee(e)))return{item:e,source:t}}}function x(e){var n,t;n=e.item,t=e.source,("boolean"==typeof y.copy?y.copy:y.copy(n,t))&&(w.emit("beforeClone",e.item),h=e.item.cloneNode(!0),w.emit("cloned",h,e.item,"copy")),f=e.source,s=e.item,p=v=ee(e.item),w.dragging=!0,w.emit("drag",s,f)}function C(){var e;w.dragging&&I(e=h||s,W(e))}function S(){a(!(i=!1)),b(!0)}function O(e){var n,t;S(),w.dragging&&(n=h||s,t=ne("clientX",e)||0,e=ne("clientY",e)||0,(t=Y(V(l,t,e),t,e))&&(h&&y.copySortSource||!h||t!==f)?I(n,t):(y.removeOnSpill?N:_)())}function I(e,n){var t=W(e);h&&y.copySortSource&&n===f&&t.removeChild(s),X(n)?w.emit("cancel",e,f,f):w.emit("drop",e,n,f,v),L()}function N(){var e,n;w.dragging&&((n=W(e=h||s))&&n.removeChild(e),w.emit(h?"cancel":"remove",e,n,f),L())}function _(e){var n,t,o;w.dragging&&(e=0<arguments.length?e:y.revertOnSpill,!1===(o=X(t=W(n=h||s)))&&e&&(h?t&&t.removeChild(h):f.insertBefore(n,p)),o||e?w.emit("cancel",n,f,f):w.emit("drop",n,t,f,v),L())}function L(){var e=h||s;S(),l&&(R.rm(y.mirrorContainer,"gu-unselectable"),K(q,"remove","mousemove",B),W(l).removeChild(l),l=null),e&&R.rm(e,"gu-transit"),t&&clearTimeout(t),w.dragging=!1,g&&w.emit("out",e,g,f),w.emit("dragend",e),f=s=h=p=v=t=g=null}function X(e,n){n=void 0!==n?n:l?v:ee(h||s);return e===f&&n===p}function Y(n,t,o){for(var r=n;r&&!function(){if(!1===u(r))return;var e=A(r,n),e=D(r,e,t,o);if(X(r,e))return 1;return y.accepts(s,r,f,e)}();)r=W(r);return r}function B(e){if(l){e.preventDefault();var n=ne("clientX",e)||0,e=ne("clientY",e)||0,t=n-d,o=e-m,r=(l.style.left=t+"px",l.style.top=o+"px",l.getBoundingClientRect()),i=((r.y<o-2||r.y>2+o||r.x<t-2||r.x>2+t)&&(t+=t-r.x,o+=o-r.y,l.style.left=t+"px",l.style.top=o+"px"),h||s),r=V(l,n,e),t=Y(r,n,e),o=null!==t&&t!==g,u=((o||null===t)&&(g&&a("out"),g=t,o)&&a("over"),W(i));if(t===f&&h&&!y.copySortSource)u&&u.removeChild(i);else{var c,r=A(t,r);if(null!==r)c=D(t,r,n,e);else{if(!0!==y.revertOnSpill||h)return void(h&&u&&u.removeChild(i));c=p,t=f}(null===c&&o||c!==i&&c!==ee(i))&&(v=c,t.insertBefore(i,c),w.emit("shadow",i,t,f))}}function a(e){w.emit(e,i,g,f)}}function A(e,n){for(var t=n;t!==e&&W(t)!==e;)t=W(t);return t===q?null:t}function D(r,n,i,u){var c="horizontal"===y.direction;return(n!==r?function(){var e=n.getBoundingClientRect();if(c)return t(i>e.left+J(e)/2);return t(u>e.top+Q(e)/2)}:function(){var e,n,t,o=r.children.length;for(e=0;e<o;e++){if(n=r.children[e],t=n.getBoundingClientRect(),c&&t.left+t.width/2>i)return n;if(!c&&t.top+t.height/2>u)return n}return null})();function t(e){return e?ee(n):n}}}}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./classes":1,"contra/emitter":5,crossvent:6}],3:[function(e,n,t){n.exports=function(e,n){return Array.prototype.slice.call(e,n)}},{}],4:[function(e,n,t){var o=e("ticky");n.exports=function(e,n,t){e&&o(function(){e.apply(t||null,n||[])})}},{ticky:10}],5:[function(e,n,t){var c=e("atoa"),a=e("./debounce");n.exports=function(r,e){var i=e||{},u={};return(r=void 0===r?{}:r).on=function(e,n){return u[e]?u[e].push(n):u[e]=[n],r},r.once=function(e,n){return n._once=!0,r.on(e,n),r},r.off=function(e,n){var t=arguments.length;if(1===t)delete u[e];else if(0===t)u={};else{t=u[e];if(!t)return r;t.splice(t.indexOf(n),1)}return r},r.emit=function(){var e=c(arguments);return r.emitterSnapshot(e.shift()).apply(this,e)},r.emitterSnapshot=function(o){var e=(u[o]||[]).slice(0);return function(){var n=c(arguments),t=this||r;if("error"!==o||!1===i.throws||e.length)return e.forEach(function(e){i.async?a(e,n,t):e.apply(t,n),e._once&&r.off(o,e)}),r;throw 1===n.length?n[0]:n}},r}},{"./debounce":4,atoa:3}],6:[function(t,l,e){!function(r){var o=t("custom-event"),i=t("./eventmap"),u=r.document,e=function(e,n,t,o){return e.addEventListener(n,t,o)},n=function(e,n,t,o){return e.removeEventListener(n,t,o)},c=[];function a(e,n,t){e=function(e,n,t){var o,r;for(o=0;o<c.length;o++)if((r=c[o]).element===e&&r.type===n&&r.fn===t)return o}(e,n,t);if(e)return n=c[e].wrapper,c.splice(e,1),n}r.addEventListener||(e=function(e,n,t){return e.attachEvent("on"+n,function(e,n,t){var o=a(e,n,t)||function(t,o){return function(e){var n=e||r.event;n.target=n.target||n.srcElement,n.preventDefault=n.preventDefault||function(){n.returnValue=!1},n.stopPropagation=n.stopPropagation||function(){n.cancelBubble=!0},n.which=n.which||n.keyCode,o.call(t,n)}}(e,t);return c.push({wrapper:o,element:e,type:n,fn:t}),o}(e,n,t))},n=function(e,n,t){t=a(e,n,t);if(t)return e.detachEvent("on"+n,t)}),l.exports={add:e,remove:n,fabricate:function(e,n,t){t=-1===i.indexOf(n)?new o(n,{detail:t}):function(){var e;u.createEvent?(e=u.createEvent("Event")).initEvent(n,!0,!0):u.createEventObject&&(e=u.createEventObject());return e}();e.dispatchEvent?e.dispatchEvent(t):e.fireEvent("on"+n,t)}}}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./eventmap":7,"custom-event":8}],7:[function(e,r,n){!function(e){var n=[],t="",o=/^on/;for(t in e)o.test(t)&&n.push(t.slice(2));r.exports=n}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],8:[function(e,t,n){!function(e){var n=e.CustomEvent;t.exports=function(){try{var e=new n("cat",{detail:{foo:"bar"}});return"cat"===e.type&&"bar"===e.detail.foo}catch(e){}}()?n:"undefined"!=typeof document&&"function"==typeof document.createEvent?function(e,n){var t=document.createEvent("CustomEvent");return n?t.initCustomEvent(e,n.bubbles,n.cancelable,n.detail):t.initCustomEvent(e,!1,!1,void 0),t}:function(e,n){var t=document.createEventObject();return t.type=e,n?(t.bubbles=Boolean(n.bubbles),t.cancelable=Boolean(n.cancelable),t.detail=n.detail):(t.bubbles=!1,t.cancelable=!1,t.detail=void 0),t}}.call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],9:[function(e,n,t){var o,r,n=n.exports={};function i(){throw new Error("setTimeout has not been defined")}function u(){throw new Error("clearTimeout has not been defined")}try{o="function"==typeof setTimeout?setTimeout:i}catch(e){o=i}try{r="function"==typeof clearTimeout?clearTimeout:u}catch(e){r=u}function c(n){if(o===setTimeout)return setTimeout(n,0);if((o===i||!o)&&setTimeout)return(o=setTimeout)(n,0);try{return o(n,0)}catch(e){try{return o.call(null,n,0)}catch(e){return o.call(this,n,0)}}}var a,l=[],f=!1,s=-1;function d(){f&&a&&(f=!1,a.length?l=a.concat(l):s=-1,l.length)&&m()}function m(){if(!f){for(var e=c(d),n=(f=!0,l.length);n;){for(a=l,l=[];++s<n;)a&&a[s].run();s=-1,n=l.length}a=null,f=!1,!function(n){if(r===clearTimeout)return clearTimeout(n);if((r===u||!r)&&clearTimeout)return(r=clearTimeout)(n);try{r(n)}catch(e){try{return r.call(null,n)}catch(e){return r.call(this,n)}}}(e)}}function p(e,n){this.fun=e,this.array=n}function v(){}n.nextTick=function(e){var n=new Array(arguments.length-1);if(1<arguments.length)for(var t=1;t<arguments.length;t++)n[t-1]=arguments[t];l.push(new p(e,n)),1!==l.length||f||c(m)},p.prototype.run=function(){this.fun.apply(null,this.array)},n.title="browser",n.browser=!0,n.env={},n.argv=[],n.version="",n.versions={},n.on=v,n.addListener=v,n.once=v,n.off=v,n.removeListener=v,n.removeAllListeners=v,n.emit=v,n.prependListener=v,n.prependOnceListener=v,n.listeners=function(e){return[]},n.binding=function(e){throw new Error("process.binding is not supported")},n.cwd=function(){return"/"},n.chdir=function(e){throw new Error("process.chdir is not supported")},n.umask=function(){return 0}},{}],10:[function(e,t,n){!function(n){var e="function"==typeof n?function(e){n(e)}:function(e){setTimeout(e,0)};t.exports=e}.call(this,e("timers").setImmediate)},{timers:11}],11:[function(a,e,l){!function(e,n){var o=a("process/browser.js").nextTick,t=Function.prototype.apply,r=Array.prototype.slice,i={},u=0;function c(e,n){this._id=e,this._clearFn=n}l.setTimeout=function(){return new c(t.call(setTimeout,window,arguments),clearTimeout)},l.setInterval=function(){return new c(t.call(setInterval,window,arguments),clearInterval)},l.clearTimeout=l.clearInterval=function(e){e.close()},c.prototype.unref=c.prototype.ref=function(){},c.prototype.close=function(){this._clearFn.call(window,this._id)},l.enroll=function(e,n){clearTimeout(e._idleTimeoutId),e._idleTimeout=n},l.unenroll=function(e){clearTimeout(e._idleTimeoutId),e._idleTimeout=-1},l._unrefActive=l.active=function(e){clearTimeout(e._idleTimeoutId);var n=e._idleTimeout;0<=n&&(e._idleTimeoutId=setTimeout(function(){e._onTimeout&&e._onTimeout()},n))},l.setImmediate="function"==typeof e?e:function(e){var n=u++,t=!(arguments.length<2)&&r.call(arguments,1);return i[n]=!0,o(function(){i[n]&&(t?e.apply(null,t):e.call(null),l.clearImmediate(n))}),n},l.clearImmediate="function"==typeof n?n:function(e){delete i[e]}}.call(this,a("timers").setImmediate,a("timers").clearImmediate)},{"process/browser.js":9,timers:11}]},{},[2])(2)});
\ No newline at end of file
diff --git a/4X/Standard/Min/TinySlider.js b/4X/Standard/Min/TinySlider.js
index ad6d65cb..0c2fe00d 100644
--- a/4X/Standard/Min/TinySlider.js
+++ b/4X/Standard/Min/TinySlider.js
@@ -4,4 +4,4 @@ Author: William Lin
 License: MIT (https://opensource.org/licenses/MIT)
 Includes modifications by Bryan Garaventa to improve screen reader accessibility for use within the Apex 4X ARIA Carousel module. Changes are prefaced with the comment "4X MOD" within the source code.
 */
-"use strict";var win$1=window,raf=win$1.requestAnimationFrame||win$1.webkitRequestAnimationFrame||win$1.mozRequestAnimationFrame||win$1.msRequestAnimationFrame||function(e){return setTimeout(e,16)},win=window,caf=win.cancelAnimationFrame||win.mozCancelAnimationFrame||function(e){clearTimeout(e)};function extend(){for(var e,t,n,a=arguments[0]||{},r=1,o=arguments.length;r<o;r++)if(null!==(e=arguments[r]))for(t in e)a!==(n=e[t])&&void 0!==n&&(a[t]=n);return a}function checkStorageValue(e){return 0<=["true","false"].indexOf(e)?JSON.parse(e):e}function setLocalStorage(e,t,n,a){if(a)try{e.setItem(t,n)}catch(e){}return n}function getSlideId(){var e=window.tnsId;return window.tnsId=e?e+1:1,"tns"+window.tnsId}function getBody(){var e=document,t=e.body;return t||((t=e.createElement("body")).fake=!0),t}var docElement=document.documentElement;function setFakeBody(e){var t="";return e.fake&&(t=docElement.style.overflow,e.style.background="",e.style.overflow=docElement.style.overflow="hidden",docElement.appendChild(e)),t}function resetFakeBody(e,t){e.fake&&(e.remove(),docElement.style.overflow=t,docElement.offsetHeight)}function calc(){var e=document,t=getBody(),n=setFakeBody(t),a=e.createElement("div"),r=!1;t.appendChild(a);try{for(var o,i="(10px * 10)",s=["calc"+i,"-moz-calc"+i,"-webkit-calc"+i],l=0;l<3;l++)if(o=s[l],a.style.width=o,100===a.offsetWidth){r=o.replace(i,"");break}}catch(e){}return t.fake?resetFakeBody(t,n):a.remove(),r}function percentageLayout(){var e=document,t=getBody(),n=setFakeBody(t),a=e.createElement("div"),e=e.createElement("div"),r="";a.className="tns-t-subp2",e.className="tns-t-ct";for(var o=0;o<70;o++)r+="<div></div>";return e.innerHTML=r,a.appendChild(e),t.appendChild(a),e=Math.abs(a.getBoundingClientRect().left-e.children[67].getBoundingClientRect().left)<2,t.fake?resetFakeBody(t,n):a.remove(),e}function mediaquerySupport(){var e,t,n,a,r,o;return!(!window.matchMedia&&!window.msMatchMedia)||(e=document,n=setFakeBody(t=getBody()),a=e.createElement("div"),r="@media all and (min-width:1px){.tns-mq-test{position:absolute}}",(o=e.createElement("style")).type="text/css",a.className="tns-mq-test",t.appendChild(o),t.appendChild(a),o.styleSheet?o.styleSheet.cssText=r:o.appendChild(e.createTextNode(r)),o=(window.getComputedStyle?window.getComputedStyle(a):a.currentStyle).position,t.fake?resetFakeBody(t,n):a.remove(),"absolute"===o)}function createStyleSheet(e,t){var n=document.createElement("style");return e&&n.setAttribute("media",e),t&&n.setAttribute("nonce",t),document.querySelector("head").appendChild(n),n.sheet||n.styleSheet}function addCSSRule(e,t,n,a){"insertRule"in e?e.insertRule(t+"{"+n+"}",a):e.addRule(t,n,a)}function removeCSSRule(e,t){"deleteRule"in e?e.deleteRule(t):e.removeRule(t)}function getCssRulesLength(e){return("insertRule"in e?e.cssRules:e.rules).length}function toDegree(e,t){return Math.atan2(e,t)*(180/Math.PI)}function getTouchDirection(e,t){var n=!1,e=Math.abs(90-Math.abs(e));return 90-t<=e?n="horizontal":e<=t&&(n="vertical"),n}function forEach(e,t,n){for(var a=0,r=e.length;a<r;a++)t.call(n,e[a],a)}var classListSupport="classList"in document.createElement("_"),hasClass=classListSupport?function(e,t){return e.classList.contains(t)}:function(e,t){return 0<=e.className.indexOf(t)},addClass=classListSupport?function(e,t){hasClass(e,t)||e.classList.add(t)}:function(e,t){hasClass(e,t)||(e.className+=" "+t)},removeClass=classListSupport?function(e,t){hasClass(e,t)&&e.classList.remove(t)}:function(e,t){hasClass(e,t)&&(e.className=e.className.replace(t,""))};function hasAttr(e,t){return e.hasAttribute(t)}function getAttr(e,t){return e.getAttribute(t)}function isNodeList(e){return void 0!==e.item}function setAttrs(e,t){if(e=isNodeList(e)||e instanceof Array?e:[e],"[object Object]"===Object.prototype.toString.call(t))for(var n=e.length;n--;)for(var a in t)e[n].setAttribute(a,t[a])}function removeAttrs(e,t){e=isNodeList(e)||e instanceof Array?e:[e];for(var n=(t=t instanceof Array?t:[t]).length,a=e.length;a--;)for(var r=n;r--;)e[a].removeAttribute(t[r])}function arrayFromNodeList(e){for(var t=[],n=0,a=e.length;n<a;n++)t.push(e[n]);return t}function hideElement(e,t){"none"!==e.style.display&&(e.style.display="none")}function showElement(e,t){"none"===e.style.display&&(e.style.display="")}function isVisible(e){return"none"!==window.getComputedStyle(e).display}function whichProperty(t){"string"==typeof t&&(n=[t],a=t.charAt(0).toUpperCase()+t.substr(1),["Webkit","Moz","ms","O"].forEach(function(e){"ms"===e&&"transform"!==t||n.push(e+a)}),t=n);var n,a,e=document.createElement("fakeelement");t.length;for(var r=0;r<t.length;r++){var o=t[r];if(void 0!==e.style[o])return o}return!1}function has3DTransforms(e){var t,n,a,r;return!!e&&!!window.getComputedStyle&&(a=document,n=setFakeBody(t=getBody()),a=a.createElement("p"),r=9<e.length?"-"+e.slice(0,-9).toLowerCase()+"-":"",r+="transform",t.insertBefore(a,null),a.style[e]="translate3d(1px,1px,1px)",e=window.getComputedStyle(a).getPropertyValue(r),t.fake?resetFakeBody(t,n):a.remove(),void 0!==e)&&0<e.length&&"none"!==e}function getEndProperty(e,t){var n=!1;return/^Webkit/.test(e)?n="webkit"+t+"End":/^O/.test(e)?n="o"+t+"End":e&&(n=t.toLowerCase()+"end"),n}var supportsPassive=!1;try{var opts=Object.defineProperty({},"passive",{get:function(){supportsPassive=!0}});window.addEventListener("test",null,opts)}catch(e){}var passiveOption=!!supportsPassive&&{passive:!0};function addEvents(e,t,n){for(var a in t){var r=0<=["touchstart","touchmove"].indexOf(a)&&!n&&passiveOption;e.addEventListener(a,t[a],r)}}function removeEvents(e,t){for(var n in t){var a=0<=["touchstart","touchmove"].indexOf(n)&&passiveOption;e.removeEventListener(n,t[n],a)}}function Events(){return{topics:{},on:function(e,t){this.topics[e]=this.topics[e]||[],this.topics[e].push(t)},off:function(e,t){if(this.topics[e])for(var n=0;n<this.topics[e].length;n++)if(this.topics[e][n]===t){this.topics[e].splice(n,1);break}},emit:function(t,n){n.type=t,this.topics[t]&&this.topics[t].forEach(function(e){e(n,t)})}}}function jsTransform(t,n,a,r,e,o,i){var s=Math.min(o,10),l=0<=e.indexOf("%")?"%":"px",e=e.replace(l,""),u=Number(t.style[n].replace(a,"").replace(r,"").replace(l,"")),c=(e-u)/o*s;setTimeout(function e(){o-=s;u+=c;t.style[n]=a+u+l+r;0<o?setTimeout(e,s):i()},s)}Object.keys||(Object.keys=function(e){var t,n=[];for(t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.push(t);return n}),"remove"in Element.prototype||(Element.prototype.remove=function(){this.parentNode&&this.parentNode.removeChild(this)});var tns=function(D){D=extend({container:".slider",mode:"carousel",axis:"horizontal",items:1,gutter:0,edgePadding:0,fixedWidth:!1,autoWidth:!1,viewportMax:!1,slideBy:1,center:!1,controls:!0,controlsPosition:"top",controlsText:["prev","next"],controlsContainer:!1,prevButton:!1,nextButton:!1,nav:!0,navPosition:"top",navContainer:!1,navAsThumbnails:!1,arrowKeys:!1,speed:300,autoplay:!1,autoplayPosition:"top",autoplayTimeout:5e3,autoplayDirection:"forward",autoplayText:["start","stop"],autoplayHoverPause:!0,autoplayButton:!1,autoplayButtonOutput:!0,autoplayResetOnVisibility:!0,animateIn:"tns-fadeIn",animateOut:"tns-fadeOut",animateNormal:"tns-normal",animateDelay:!1,loop:!0,rewind:!1,autoHeight:!1,responsive:!1,lazyload:!1,lazyloadSelector:".tns-lazy-img",touch:!0,mouseDrag:!1,swipeAngle:15,nested:!1,preventActionWhenRunning:!1,preventScrollOnTouch:!1,freezable:!0,onInit:!1,useLocalStorage:!0,nonce:!1},D||{});var ce=document,a=window,r={ENTER:13,SPACE:32,LEFT:37,RIGHT:39},t={},n=D.useLocalStorage;if(n){var o=navigator.userAgent,l=new Date;try{(t=a.localStorage)?(t.setItem(l,l),n=t.getItem(l)==l,t.removeItem(l)):n=!1,n||(t={})}catch(e){n=!1}n&&(t.tnsApp&&t.tnsApp!==o&&["tC","tPL","tMQ","tTf","t3D","tTDu","tTDe","tADu","tADe","tTE","tAE"].forEach(function(e){t.removeItem(e)}),localStorage.tnsApp=o)}var u=t.tC?checkStorageValue(t.tC):setLocalStorage(t,"tC",calc(),n),l=t.tPL?checkStorageValue(t.tPL):setLocalStorage(t,"tPL",percentageLayout(),n),de=t.tMQ?checkStorageValue(t.tMQ):setLocalStorage(t,"tMQ",mediaquerySupport(),n),c=t.tTf?checkStorageValue(t.tTf):setLocalStorage(t,"tTf",whichProperty("transform"),n),o=t.t3D?checkStorageValue(t.t3D):setLocalStorage(t,"t3D",has3DTransforms(c),n),s=t.tTDu?checkStorageValue(t.tTDu):setLocalStorage(t,"tTDu",whichProperty("transitionDuration"),n),d=t.tTDe?checkStorageValue(t.tTDe):setLocalStorage(t,"tTDe",whichProperty("transitionDelay"),n),f=t.tADu?checkStorageValue(t.tADu):setLocalStorage(t,"tADu",whichProperty("animationDuration"),n),v=t.tADe?checkStorageValue(t.tADe):setLocalStorage(t,"tADe",whichProperty("animationDelay"),n),h=t.tTE?checkStorageValue(t.tTE):setLocalStorage(t,"tTE",getEndProperty(s,"Transition"),n),m=t.tAE?checkStorageValue(t.tAE):setLocalStorage(t,"tAE",getEndProperty(f,"Animation"),n),p=a.console&&"function"==typeof a.console.warn,g=["container","controlsContainer","prevButton","nextButton","navContainer","autoplayButton"],y={};if(g.forEach(function(e){var t,n;"string"==typeof D[e]&&(t=D[e],n=ce.querySelector(t),y[e]=t,n&&n.nodeName?D[e]=n:p&&console.warn("Can't find",D[e]))}),!(D.container.children.length<1)){var fe,ve,E,he,P=D.responsive,me=D.nested,O="carousel"===D.mode;if(P){0 in P&&(D=extend(D,P[0]),delete P[0]);var C,x={};for(C in P){var b=P[C];x[C]="number"==typeof b?{items:b}:b}P=x,x=null}O||!function e(t){for(var n in t)O||("slideBy"===n&&(t[n]="page"),"edgePadding"===n&&(t[n]=!1),"autoHeight"===n&&(t[n]=!1)),"responsive"===n&&e(t[n])}(D),O||(D.axis="horizontal",D.slideBy="page",D.edgePadding=!1,fe=D.animateIn,ve=D.animateOut,E=D.animateDelay,he=D.animateNormal);var w,pe,i,S,A,M,H,L,I,F,T,B,N,k,z,R,ge,ye,Ee,Ce,xe,be,we,Se,Ae,W,Me,Le,Te,V,Be,Ne,ke,Re,De,Pe,Oe,He,Ie,Fe,q="horizontal"===D.axis,j=ce.createElement("div"),ze=ce.createElement("div"),$=D.container,We=$.parentNode,Ve=$.outerHTML,G=$.children,Q=G.length,qe=xn(),je=!1,X=($A.loop(G,function(e,t){$A.setAttr(t,{role:"region","aria-roledescription":""+(e+1),"aria-label":"Slide"})},"array"),P&&Wn(),O&&($.className+=" tns-vpfix"),D.autoWidth),Y=le("fixedWidth"),K=le("edgePadding"),J=le("gutter"),U=wn(),_=le("center"),Z=X?1:Math.floor(le("items")),$e=le("slideBy"),Ge=D.viewportMax||D.fixedWidthViewportWidth,Qe=le("arrowKeys"),Xe=le("speed"),Ye=D.rewind,ee=!Ye&&D.loop,Ke=le("autoHeight"),Je=le("controls"),Ue=le("controlsText"),_e=le("nav"),Ze=le("touch"),et=le("mouseDrag"),te=le("autoplay"),tt=le("autoplayTimeout"),nt=le("autoplayText"),at=le("autoplayHoverPause"),rt=le("autoplayResetOnVisibility"),ne=createStyleSheet(null,le("nonce")),ot=D.lazyload,it=D.lazyloadSelector,st=[],ae=ee?(n=function(){{if(X||Y&&!Ge)return Q-1;var e=Y?"fixedWidth":"items",t=[];if((Y||D[e]<Q)&&t.push(D[e]),P)for(var n in P){n=P[n][e];n&&(Y||n<Q)&&t.push(n)}return t.length||t.push(0),Math.ceil(Y?Ge/Math.min.apply(null,t):Math.max.apply(null,t))}}(),S=O?Math.ceil((5*n-Q)/2):4*n-Q,S=Math.max(n,S),Sn("edgePadding")?S+1:S):0,re=O?Q+2*ae:Q+ae,lt=!(!Y&&!X||ee),ut=Y?fa():null,ct=!O||!ee,dt=q?"left":"top",ft="",vt="",ht=Y?function(){return _&&!ee?Q-1:Math.ceil(-ut/(Y+J))}:X?function(){for(var e=0;e<re;e++)if(i[e]>=-ut)return e}:function(){return _&&O&&!ee?Q-1:ee||O?Math.max(0,re-Math.ceil(Z)):re-1},oe=yn(le("startIndex")),mt=oe,pt=(gn(),0),gt=X?null:ht(),yt=D.preventActionWhenRunning,Et=D.swipeAngle,Ct=!Et||"?",xt=!1,bt=D.onInit,ie=new Events,wt=" tns-slider tns-"+D.mode,se=$.id||getSlideId(),St=le("disable"),At=!1,Mt=D.freezable,Lt=!(!Mt||X)&&zn(),Tt=!1,Bt={click:xa,keydown:function(e){e=Ba(e);var t=[r.LEFT,r.RIGHT].indexOf(e.keyCode);0<=t&&(0===t?I.disabled||xa(e,-1):F.disabled||xa(e,1))}},Nt={click:function(e){if(xt){if(yt)return;Ea()}var t=Na(e=Ba(e));for(;t!==z&&!hasAttr(t,"data-nav");)t=t.parentNode;{var n,a;hasAttr(t,"data-nav")&&(n=Ce=Number(getAttr(t,"data-nav")),a=Y||X?n*Q/ye:n*Z,Ca(zt?n:Math.min(Math.ceil(a),Q-1),e),xe===n)&&(V&&Ma(),Ce=-1)}},keydown:function(e){e=Ba(e);var t,n=ce.activeElement;hasAttr(n,"data-nav")&&(t=[r.LEFT,r.RIGHT,r.ENTER,r.SPACE].indexOf(e.keyCode),n=Number(getAttr(n,"data-nav")),0<=t)&&(0===t?0<n&&Ta(ge[n-1]):1===t?n<ye-1&&Ta(ge[n+1]):Ca(Ce=n,e))}},kt={mouseenter:function(){V&&(wa(),Be=!0)},mouseleave:function(){Be&&(ba(),Be=!1)}},Rt={focusin:function(){V&&(Ma(),ke=!0)}},Dt={visibilitychange:function(){ce.hidden?V&&(wa(),Re=!0):Re&&(ba(),Re=!1)}},Pt={keydown:function(e){e=Ba(e);var t=[r.LEFT,r.RIGHT].indexOf(e.keyCode);0<=t&&xa(e,0===t?-1:1)}},Ot={touchstart:Pa,touchmove:Oa,touchend:Ha,touchcancel:Ha},Ht={mousedown:Pa,mousemove:Oa,mouseup:Ha,mouseleave:Ha},It=Sn("controls"),Ft=Sn("nav"),zt=!!X||D.navAsThumbnails,Wt=Sn("autoplay"),n=Sn("touch"),Vt=Sn("mouseDrag"),qt="tns-slide-active",jt="tns-slide-cloned",$t="tns-complete",Gt={load:function(e){Kn(Na(e))},error:function(e){!function(e){addClass(e,"failed"),Jn(e)}(Na(e))}},Qt="force"===D.preventScrollOnTouch;if(It&&(H=D.controlsContainer,L=D.controlsContainer?D.controlsContainer.outerHTML:"",I=D.prevButton,F=D.nextButton,T=D.prevButton?D.prevButton.outerHTML:"",B=D.nextButton?D.nextButton.outerHTML:""),Ft&&(z=D.navContainer,R=D.navContainer?D.navContainer.outerHTML:"",ye=X?Q:Fa(),Ee=0,Ce=-1,xe=Cn(),be=xe,we="tns-nav-active",Se="Page "),Wt&&(Ae="forward"===D.autoplayDirection?1:-1,W=D.autoplayButton,Me=D.autoplayButton?D.autoplayButton.outerHTML:"",Le=["<span class='tns-visually-hidden'>"," animation</span>"]),(n||Vt)&&(De={},He=!(Pe={}),Fe=q?function(e,t){return e.x-t.x}:function(e,t){return e.y-t.y}),X||pn(St||Lt),c&&(dt=c,ft="translate",vt=o?(ft+=q?"3d(":"3d(0px, ",q?", 0px, 0px)":", 0px)"):(ft+=q?"X(":"Y(",")")),O&&($.className=$.className.replace("tns-vpfix","")),Sn("gutter"),j.className="tns-outer",ze.className="tns-inner",j.id=se+"-ow",ze.id=se+"-iw",""===$.id&&($.id=se),wt=wt+(l||X?" tns-subpixel":" tns-no-subpixel")+(u?" tns-calc":" tns-no-calc"),X&&(wt+=" tns-autowidth"),wt+=" tns-"+D.axis,$.className+=wt,(O?((w=ce.createElement("div")).id=se+"-mw",w.className="tns-ovh",j.appendChild(w),w):j).appendChild(ze),Ke&&((w||ze).className+=" tns-ah"),We.insertBefore(j,$),ze.appendChild($),forEach(G,function(e,t){addClass(e,"tns-item"),e.id||(e.id=se+"-item"+t),!O&&he&&addClass(e,he),setAttrs(e,{"aria-hidden":"true",tabindex:"-1"})}),ae){for(var Xt=ce.createDocumentFragment(),Yt=ce.createDocumentFragment(),Kt=ae;Kt--;){var Jt=Kt%Q,Ut=G[Jt].cloneNode(!0);addClass(Ut,jt),removeAttrs(Ut,"id"),Yt.insertBefore(Ut,Yt.firstChild),O&&(Ut=G[Q-1-Jt].cloneNode(!0),addClass(Ut,jt),removeAttrs(Ut,"id"),Xt.appendChild(Ut))}$.insertBefore(Xt,$.firstChild),$.appendChild(Yt),G=$.children}if(!O)for(var _t=oe,Zt=oe+Math.min(Q,Z);_t<Zt;_t++){var en=G[_t];en.style.left=100*(_t-oe)/Z+"%",addClass(en,fe),removeClass(en,he)}if(q&&(l||X?(addCSSRule(ne,"#"+se+" > .tns-item","font-size:"+a.getComputedStyle(G[0]).fontSize+";",getCssRulesLength(ne)),addCSSRule(ne,"#"+se,"font-size:0;",getCssRulesLength(ne))):O&&forEach(G,function(e,t){e.style.marginLeft=(e=t,u?u+"("+100*e+"% / "+re+")":100*e/re+"%")})),de?(s&&(e=w&&D.autoHeight?Nn(D.speed):"",addCSSRule(ne,"#"+se+"-mw",e,getCssRulesLength(ne))),e=An(D.edgePadding,D.gutter,D.fixedWidth,D.speed,D.autoHeight),addCSSRule(ne,"#"+se+"-iw",e,getCssRulesLength(ne)),O&&(e=q&&!X?"width:"+Mn(D.fixedWidth,D.gutter,D.items)+";":"",s&&(e+=Nn(Xe)),addCSSRule(ne,"#"+se,e,getCssRulesLength(ne))),e=q&&!X?Ln(D.fixedWidth,D.gutter,D.items):"",D.gutter&&(e+=Tn(D.gutter)),O||(s&&(e+=Nn(Xe)),f&&(e+=kn(Xe)))):(O&&Ke&&(w.style[s]=Xe/1e3+"s"),ze.style.cssText=An(K,J,Y,Ke),O&&q&&!X&&($.style.width=Mn(Y,J,Z)),e=q&&!X?Ln(Y,J,Z):"",J&&(e+=Tn(J))),e&&addCSSRule(ne,"#"+se+" > .tns-item",e,getCssRulesLength(ne)),P&&de)for(var tn in P){tn=parseInt(tn);var nn=P[tn],e="",an="",rn="",on="",sn="",ln=X?null:le("items",tn),un=le("fixedWidth",tn),cn=le("speed",tn),dn=le("edgePadding",tn),fn=le("autoHeight",tn),vn=le("gutter",tn);s&&w&&le("autoHeight",tn)&&"speed"in nn&&(an="#"+se+"-mw{"+Nn(cn)+"}"),("edgePadding"in nn||"gutter"in nn)&&(rn="#"+se+"-iw{"+An(dn,vn,un,cn,fn)+"}"),O&&q&&!X&&("fixedWidth"in nn||"items"in nn||Y&&"gutter"in nn)&&(on="width:"+Mn(un,vn,ln)+";"),s&&"speed"in nn&&(on+=Nn(cn)),on=on&&"#"+se+"{"+on+"}",("fixedWidth"in nn||Y&&"gutter"in nn||!O&&"items"in nn)&&(sn+=Ln(un,vn,ln)),"gutter"in nn&&(sn+=Tn(vn)),!O&&"speed"in nn&&(s&&(sn+=Nn(cn)),f)&&(sn+=kn(cn)),(e=an+rn+on+(sn=sn&&"#"+se+" > .tns-item{"+sn+"}"))&&ne.insertRule("@media (min-width: "+tn/16+"em) {"+e+"}",ne.cssRules.length)}Rn();var hn=ee?O?function(){var e=pt,t=gt;e+=$e,t-=$e,K?(e+=1,--t):Y&&(U+J)%(Y+J)&&--t,ae&&(t<oe?oe-=Q:oe<e&&(oe+=Q))}:function(){if(gt<oe)for(;pt+Q<=oe;)oe-=Q;else if(oe<pt)for(;oe<=gt-Q;)oe+=Q}:function(){oe=Math.max(pt,Math.min(gt,oe))},mn=O?function(){ca($,""),s||!Xe?(ma(),Xe&&isVisible($)||Ea()):jsTransform($,dt,ft,vt,va(),Xe,Ea),q||Ia()}:function(){st=[];var e={};e[h]=e[m]=Ea,removeEvents(G[mt],e),addEvents(G[oe],e),pa(mt,fe,ve,!0),pa(oe,he,fe),h&&m&&Xe&&isVisible($)||Ea()};return{version:"2.9.4",getInfo:ue,events:ie,goTo:Ca,play:function(){te&&!V&&(Aa(),Ne=!1)},pause:function(){V&&(Ma(),Ne=!0)},isOn:je,updateSliderHeight:na,refresh:Rn,destroy:function(){ne.disabled=!0,ne.ownerNode&&ne.ownerNode.remove(),removeEvents(a,{resize:In}),Qe&&removeEvents(ce,Pt),H&&removeEvents(H,Bt),z&&removeEvents(z,Nt),removeEvents(j.parentNode,kt),removeEvents($,Dt),W&&removeEvents(W,{click:La}),te&&clearInterval(Te),O&&h&&((e={})[h]=Ea,removeEvents($,e)),Ze&&removeEvents($,Ot),et&&removeEvents($,Ht);var e,t,o=[Ve,L,T,B,R,Me];for(t in g.forEach(function(e,t){var n,a,r="container"===e?j:D[e];"object"==typeof r&&r&&(n=r.previousElementSibling||!1,a=r.parentNode,r.outerHTML=o[t],D[e]=n?n.nextElementSibling:a.firstElementChild)}),g=fe=ve=E=he=q=j=ze=$=We=Ve=G=Q=pe=qe=X=Y=K=J=U=Z=$e=Ge=Qe=Xe=Ye=ee=Ke=ne=ot=i=st=ae=re=lt=ut=ct=dt=ft=vt=ht=oe=mt=pt=gt=Et=Ct=xt=bt=ie=wt=se=St=At=Mt=Lt=Tt=Bt=Nt=kt=Dt=Pt=Ot=Ht=It=Ft=zt=Wt=Vt=qt=$t=Gt=A=Je=Ue=H=L=I=F=N=k=_e=z=R=ge=ye=Ee=Ce=xe=be=we=Se=te=tt=Ae=nt=at=W=Me=rt=Le=Te=V=Be=Ne=ke=Re=De=Pe=Oe=He=Ie=Fe=Ze=et=null,this)"rebuild"!==t&&(this[t]=null);je=!1},rebuild:function(){return tns(extend(D,y))}}}function pn(e){e&&(Je=_e=Ze=et=Qe=te=at=rt=!1)}function gn(){for(var e=O?oe-ae:oe;e<0;)e+=Q;return e%Q+1}function yn(e){return e=e?Math.max(0,Math.min(ee?Q-1:Q-Z,e)):0,O?e+ae:e}function En(e){for(null==e&&(e=oe),O&&(e-=ae);e<0;)e+=Q;return Math.floor(e%Q)}function Cn(){var e=En(),e=zt?e:Y||X?Math.ceil((e+1)*ye/Q-1):Math.floor(e/Z);return e=!ee&&O&&oe===gt?ye-1:e}function xn(){return a.innerWidth||ce.documentElement.clientWidth||ce.body.clientWidth}function bn(e){return"top"===e?"afterbegin":"beforeend"}function wn(){var e=K?2*K-J:0;return function e(t){var n,a;if(null!=t)return n=ce.createElement("div"),t.appendChild(n),a=(a=n.getBoundingClientRect()).right-a.left,n.remove(),a||e(t.parentNode)}(We)-e}function Sn(e){if(D[e])return!0;if(P)for(var t in P)if(P[t][e])return!0;return!1}function le(e,t){if(null==t&&(t=qe),"items"===e&&Y)return Math.floor((U+J)/(Y+J))||1;var n=D[e];if(P)for(var a in P)t>=parseInt(a)&&e in P[a]&&(n=P[a][e]);return"slideBy"===e&&"page"===n&&(n=le("items")),n=O||"slideBy"!==e&&"items"!==e?n:Math.floor(n)}function An(e,t,n,a,r){var o,i="";return void 0!==e?(o=e,t&&(o-=t),i=q?"margin: 0 "+o+"px 0 "+e+"px;":"margin: "+e+"px 0 "+o+"px 0;"):t&&!n&&(e="-"+t+"px",i="margin: 0 "+(q?e+" 0 0":"0 "+e+" 0")+";"),!O&&r&&s&&a&&(i+=Nn(a)),i}function Mn(e,t,n){return e?(e+t)*re+"px":u?u+"("+100*re+"% / "+n+")":100*re/n+"%"}function Ln(e,t,n){return t="width:"+(t=e?e+t+"px":(O||(n=Math.floor(n)),e=O?re:n,u?u+"(100% / "+e+")":100/e+"%")),"inner"!==me?t+";":t+" !important;"}function Tn(e){return!1!==e?(q?"padding-":"margin-")+(q?"right":"bottom")+": "+e+"px;":""}function Bn(e,t){e=e.substring(0,e.length-t).toLowerCase();return e=e&&"-"+e+"-"}function Nn(e){return Bn(s,18)+"transition-duration:"+e/1e3+"s;"}function kn(e){return Bn(f,17)+"animation-duration:"+e/1e3+"s;"}function Rn(){var e;Sn("autoHeight")||X||!q?(forEach(e=$.querySelectorAll("img"),function(e){var t=e.src;ot||(t&&t.indexOf("data:image")<0?(e.src="",addEvents(e,Gt),addClass(e,"loading"),e.src=t):Kn(e))}),raf(function(){Zn(arrayFromNodeList(e),function(){A=!0})}),Sn("autoHeight")&&(e=Un(oe,Math.min(oe+Z-1,re-1))),ot?Dn():raf(function(){Zn(arrayFromNodeList(e),Dn)})):(O&&ha(),On(),Hn())}function Dn(){var a;(X&&1<Q?(a=ee?oe:Q-1,function e(){var t=G[a].getBoundingClientRect().left,n=G[a-1].getBoundingClientRect().right;Math.abs(t-n)<=1?Pn():setTimeout(function(){e()},16)}):Pn)()}function Pn(){q&&!X||(aa(),X?(ut=fa(),Mt&&(Lt=zn()),gt=ht(),pn(St||Lt)):Ia()),O&&ha(),On(),Hn()}function On(){var e,t;if(ra(),j.parentNode.setAttribute("role","region"),j.parentNode.setAttribute("aria-label","Carousel"),j.insertAdjacentHTML("afterbegin",'<div aria-hidden="true" style="position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; white-space: nowrap;" class="tns-liveregion tns-visually-hidden">Slide <span class="current">'+Qn()+"</span> of "+Q+"</div>"),M=j.querySelector(".tns-liveregion .current"),Wt&&(e=te?"stop":"start",W?setAttrs(W,{"data-action":e}):D.autoplayButtonOutput&&(j.insertAdjacentHTML(bn(D.autoplayPosition),'<button type="button" data-action="'+e+'">'+Le[0]+e+Le[1]+nt[0]+"</button>"),W=j.querySelector("[data-action]")),W&&addEvents(W,{click:La}),te)&&(Aa(),at&&(addEvents(j.parentNode,Rt),addEvents(j.parentNode,kt)),rt)&&addEvents($,Dt),Ft){if(z)setAttrs(z,{role:"toolbar","aria-label":"Pagination"}),forEach(ge=z.children,function(e,t){setAttrs(e,{"data-nav":t,tabindex:"-1","aria-label":Se+(t+1),"aria-controls":se})});else{for(var n="",a=zt?"":'style="display:none"',r=0;r<Q;r++)n+='<button type="button" data-nav="'+r+'" tabindex="-1" aria-controls="'+se+'" '+a+' aria-label="'+Se+(r+1)+'"></button>';j.insertAdjacentHTML(bn(D.navPosition),n='<div class="tns-nav" role="toolbar" aria-label="Pagination">'+n+"</div>"),z=j.querySelector(".tns-nav"),ge=z.children}za(),s&&(e=s.substring(0,s.length-18).toLowerCase(),t="transition: all "+Xe/1e3+"s",addCSSRule(ne,"[aria-controls^="+se+"-item]",t=e?"-"+e+"-"+t:t,getCssRulesLength(ne))),setAttrs(ge[xe],{"aria-label":Se+(xe+1),"aria-current":"true"}),removeAttrs(ge[xe],"tabindex"),addClass(ge[xe],we),addEvents(z,Nt)}It&&(H||I&&F||(j.insertAdjacentHTML(bn(D.controlsPosition),'<div class="tns-controls"><button type="button" data-controls="prev" aria-controls="'+se+'">'+Ue[0]+'</button><button type="button" data-controls="next" aria-controls="'+se+'">'+Ue[1]+"</button></div>"),H=j.querySelector(".tns-controls")),I&&F||(I=H.children[0],F=H.children[1]),(D.controlsContainer||D.prevButton&&D.nextButton)&&setAttrs([I,F],{"aria-controls":se}),(D.controlsContainer||D.prevButton&&D.nextButton)&&(setAttrs(I,{"data-controls":"prev"}),setAttrs(F,{"data-controls":"next"})),N=ia(I),k=ia(F),ua(),H?addEvents(H,Bt):(addEvents(I,Bt),addEvents(F,Bt))),Vn()}function Hn(){var e;O&&h&&((e={})[h]=Ea,addEvents($,e)),Ze&&addEvents($,Ot,D.preventScrollOnTouch),et&&addEvents($,Ht),Qe&&addEvents(ce,Pt),"inner"===me?ie.on("outerResized",function(){Fn(),ie.emit("innerLoaded",ue())}):(P||Y||X||Ke||!q)&&addEvents(a,{resize:In}),Ke&&("outer"===me?ie.on("innerLoaded",_n):St||_n()),Yn(),St?$n():Lt&&jn(),ie.on("indexChanged",ea),"inner"===me&&ie.emit("innerLoaded",ue()),"function"==typeof bt&&bt(ue()),je=!0}function In(e){raf(function(){Fn(Ba(e))})}function Fn(e){if(je){"outer"===me&&ie.emit("outerResized",ue(e)),qe=xn();var t,n=pe,a=!1;P&&(Wn(),t=n!==pe)&&ie.emit("newBreakpointStart",ue(e));var r,o,i,s,l,u,c,d,n=Z,f=St,v=Lt,h=Qe,m=Je,p=_e,g=Ze,y=et,E=te,C=at,x=rt,b=oe;if(t&&(o=Y,i=Ke,s=Ue,l=_,u=nt,de||(c=J,d=K)),Qe=le("arrowKeys"),Je=le("controls"),_e=le("nav"),Ze=le("touch"),_=le("center"),et=le("mouseDrag"),te=le("autoplay"),at=le("autoplayHoverPause"),rt=le("autoplayResetOnVisibility"),t&&(St=le("disable"),Y=le("fixedWidth"),Xe=le("speed"),Ke=le("autoHeight"),Ue=le("controlsText"),nt=le("autoplayText"),tt=le("autoplayTimeout"),de||(K=le("edgePadding"),J=le("gutter"))),pn(St),U=wn(),q&&!X||St||(aa(),q)||(Ia(),a=!0),(Y||X)&&(ut=fa(),gt=ht()),(t||Y)&&(Z=le("items"),$e=le("slideBy"),r=Z!==n)&&(Y||X||(gt=ht()),hn()),t&&St!==f)if(St)$n();else if(At){if(ne.disabled=!1,$.className+=wt,ha(),ee)for(var w=ae;w--;)O&&showElement(G[w]),showElement(G[re-w-1]);if(!O)for(var S=oe,A=oe+Q;S<A;S++){var M=G[S],L=S<oe+Z?fe:he;M.style.left=100*(S-oe)/Z+"%",addClass(M,L)}qn(),At=!1}if(Mt&&(t||Y||X)&&(Lt=zn())!==v)if(Lt)ma(va(yn(0))),jn();else{if(Tt){if(K&&de&&(ze.style.margin=""),ae)for(var T="tns-transparent",B=ae;B--;)O&&removeClass(G[B],T),removeClass(G[re-B-1],T);qn(),Tt=!1}a=!0}if(pn(St||Lt),te||(at=rt=!1),Qe!==h&&(Qe?addEvents:removeEvents)(ce,Pt),Je!==m&&(Je?H?showElement(H):(I&&showElement(I),F&&showElement(F)):H?hideElement(H):(I&&hideElement(I),F&&hideElement(F))),_e!==p&&(_e?(showElement(z),za()):hideElement(z)),Ze!==g&&(Ze?addEvents($,Ot,D.preventScrollOnTouch):removeEvents($,Ot)),et!==y&&(et?addEvents:removeEvents)($,Ht),te!==E&&(te?(W&&showElement(W),V||Ne||Aa()):(W&&hideElement(W),V&&Ma())),at!==C&&(at?addEvents:removeEvents)(j.parentNode,kt),rt!==x&&(rt?addEvents:removeEvents)(ce,Dt),t?(Y===o&&_===l||(a=!0),Ke===i||Ke||(ze.style.height=""),Je&&Ue!==s&&(I.innerHTML=Ue[0],F.innerHTML=Ue[1]),W&&nt!==u&&(n=te?1:0,v=(f=W.innerHTML).length-u[n].length,f.substring(v)===u[n])&&(W.innerHTML=f.substring(0,v)+nt[n])):_&&(Y||X)&&(a=!0),(r||Y&&!X)&&(ye=Fa(),za()),(h=oe!==b)?(ie.emit("indexChanged",ue()),a=!0):r?h||ea():(Y||X)&&(Yn(),ra(),Gn()),r&&!O){for(var N=oe+Math.min(Q,Z),k=re;k--;){var R=G[k];oe<=k&&k<N?(addClass(R,"tns-moving"),R.style.left=100*(k-oe)/Z+"%",addClass(R,fe),removeClass(R,he)):R.style.left&&(R.style.left="",addClass(R,he),removeClass(R,fe)),removeClass(R,ve)}setTimeout(function(){forEach(G,function(e){removeClass(e,"tns-moving")})},300)}St||Lt||(t&&!de&&(K===d&&J===c||(ze.style.cssText=An(K,J,Y,Xe,Ke)),q)&&(O&&($.style.width=Mn(Y,J,Z)),m=Ln(Y,J,Z)+Tn(J),removeCSSRule(ne,getCssRulesLength(ne)-1),addCSSRule(ne,"#"+se+" > .tns-item",m,getCssRulesLength(ne))),Ke&&_n(),a&&(ha(),mt=oe)),t&&ie.emit("newBreakpointEnd",ue(e))}}function zn(){var e,t;return Y||X?(e=Y?(Y+J)*Q:i[Q],t=K?U+2*K:U+J,_&&(t-=Y?(U-Y)/2:(U-(i[oe+1]-i[oe]-J))/2),e<=t):Q<=(_?Z-(Z-1)/2:Z)}function Wn(){for(var e in pe=0,P)(e=parseInt(e))<=qe&&(pe=e)}function Vn(){!te&&W&&hideElement(W),!_e&&z&&hideElement(z),Je||(H?hideElement(H):(I&&hideElement(I),F&&hideElement(F)))}function qn(){te&&W&&showElement(W),_e&&z&&showElement(z),Je&&(H?showElement(H):(I&&showElement(I),F&&showElement(F)))}function jn(){if(!Tt){if(K&&(ze.style.margin="0px"),ae)for(var e="tns-transparent",t=ae;t--;)O&&addClass(G[t],e),addClass(G[re-t-1],e);Vn(),Tt=!0}}function $n(){if(!At){if(ne.disabled=!0,$.className=$.className.replace(wt.substring(1),""),removeAttrs($,["style"]),ee)for(var e=ae;e--;)O&&hideElement(G[e]),hideElement(G[re-e-1]);if(q&&O||removeAttrs(ze,["style"]),!O)for(var t=oe,n=oe+Q;t<n;t++){var a=G[t];removeAttrs(a,["style"]),removeClass(a,fe),removeClass(a,he)}Vn(),At=!0}}function Gn(){var e=Qn();e&&M.innerHTML!==e&&(M.innerHTML=e)}function Qn(){var e=Xn(),t=e[0]+1-(Fa()===Q?0:e[0]===Q+ae?Q+ae:ae),e=e[1]+1-(Fa()===Q?0:e[1]===Q+ae?Q+ae:ae);return t==e&&Q<e?"1":t<1||Q<e?"":t==e?t+"":t+" to "+e}function Xn(e){null==e&&(e=va());var n,a,r,o=oe;return _||K?(X||Y)&&(n=-(parseFloat(e)+K),a=n+U+2*K):X&&(n=i[oe],a=n+U),X?i.forEach(function(e,t){t<re&&((_||K)&&e<=n+.5&&(o=t),.5<=a-e)&&(r=t)}):(r=Y?(e=Y+J,_||K?(o=Math.floor(n/e),Math.ceil(a/e-1)):o+Math.ceil(U/e)-1):_||K?(e=Z-1,r=_?(o-=e/2,oe+e/2):oe+e,K&&(o-=e=K*Z/U,r+=e),o=Math.floor(o),Math.ceil(r)):o+Z-1,o=Math.max(o,0),r=Math.min(r,re-1)),[o,r]}function Yn(){var e;ot&&!St&&((e=Xn()).push(it),Un.apply(null,e).forEach(function(e){var t;hasClass(e,$t)||((t={})[h]=function(e){e.stopPropagation()},addEvents(e,t),addEvents(e,Gt),e.src=getAttr(e,"data-src"),(t=getAttr(e,"data-srcset"))&&(e.srcset=t),addClass(e,"loading"))}))}function Kn(e){addClass(e,"loaded"),Jn(e)}function Jn(e){addClass(e,$t),removeClass(e,"loading"),removeEvents(e,Gt)}function Un(e,t,n){var a=[];for(n=n||"img";e<=t;)forEach(G[e].querySelectorAll(n),function(e){a.push(e)}),e++;return a}function _n(){var e=Un.apply(null,Xn());raf(function(){Zn(e,na)})}function Zn(n,e){return!A&&(n.forEach(function(e,t){!ot&&e.complete&&Jn(e),hasClass(e,$t)&&n.splice(t,1)}),n.length)?void raf(function(){Zn(n,e)}):e()}function ea(){var e,t;Yn(),ra(),Gn(),ua(),_e&&(xe=0<=Ce?Ce:Cn(),Ce=-1,xe!==be)&&(e=ge[be],t=ge[xe],setAttrs(e,{tabindex:"-1","aria-label":Se+(be+1),"aria-current":"false"}),removeClass(e,we),setAttrs(t,{"aria-label":Se+(xe+1),"aria-current":"true"}),removeAttrs(t,"tabindex"),addClass(t,we),be=xe)}function ta(e,t){for(var n=[],a=e,r=Math.min(e+t,re);a<r;a++)n.push(G[a].offsetHeight);return Math.max.apply(null,n)}function na(){var e=Ke?ta(oe,Z):ta(ae,Q),t=w||ze;t.style.height!==e&&(t.style.height=e+"px")}function aa(){i=[0];var n=q?"left":"top",a=q?"right":"bottom",r=G[0].getBoundingClientRect()[n];forEach(G,function(e,t){t&&i.push(e.getBoundingClientRect()[n]-r),t===re-1&&i.push(e.getBoundingClientRect()[a]-r)})}function ra(){var e=Xn(),n=e[0],a=e[1];forEach(G,function(e,t){n<=t&&t<=a?hasAttr(e,"aria-hidden")&&(removeAttrs(e,["aria-hidden","tabindex"]),addClass(e,qt),!te||Ne&&ke&&!V)&&$A.announce(e):hasAttr(e,"aria-hidden")||(setAttrs(e,{"aria-hidden":"true",tabindex:"-1"}),removeClass(e,qt))})}function oa(e){return e.nodeName.toLowerCase()}function ia(e){return"button"===oa(e)}function sa(e){return"true"===e.getAttribute("aria-disabled")}function la(e,t,n){e?t.disabled=n:t.setAttribute("aria-disabled",n.toString())}function ua(){var e,t,n,a;!Je||Ye||ee||(e=N?I.disabled:sa(I),t=k?F.disabled:sa(F),a=!Ye&&gt<=oe,(n=oe<=pt)&&!e&&la(N,I,!0),!n&&e&&la(N,I,!1),a&&!t&&la(k,F,!0),!a&&t&&la(k,F,!1))}function ca(e,t){s&&(e.style[s]=t)}function da(e){return null==e&&(e=oe),X?(U-(K?J:0)-(i[e+1]-i[e]-J))/2:Y?(U-Y)/2:(Z-1)/2}function fa(){var e=U+(K?J:0)-(Y?(Y+J)*re:i[re]);return e=0<(e=_&&!ee?Y?-(Y+J)*(re-1)-da():da(re-1)-i[re-1]:e)?0:e}function va(e){var t,n;return null==e&&(e=oe),q&&!X?Y?(t=-(Y+J)*e,_&&(t+=da())):(n=c?re:Z,_&&(e-=da()),t=100*-e/n):(t=-i[e],_&&X&&(t+=da())),lt&&(t=Math.max(t,ut)),t+=!q||X||Y?"px":"%"}function ha(e){ca($,"0s"),ma(e)}function ma(e){null==e&&(e=va()),$.style[dt]=ft+e+vt}function pa(e,t,n,a){var r=e+Z;ee||(r=Math.min(r,re));for(var o=e;o<r;o++){var i=G[o];a||(i.style.left=100*(o-oe)/Z+"%"),E&&d&&(i.style[d]=i.style[v]=E*(o-e)/1e3+"s"),removeClass(i,t),addClass(i,n),a&&st.push(i)}}function ga(e,t){ct&&hn(),oe===mt&&!t||(ie.emit("indexChanged",ue()),ie.emit("transitionStart",ue()),Ke&&_n(),V&&e&&0<=["click","keydown"].indexOf(e.type)&&Ma(),xt=!0,mn())}function ya(e){return e.toLowerCase().replace(/-/g,"")}function Ea(e){if(O||xt){if(ie.emit("transitionEnd",ue(e)),!O&&0<st.length)for(var t=0;t<st.length;t++){var n=st[t];n.style.left="",v&&d&&(n.style[v]="",n.style[d]=""),removeClass(n,ve),addClass(n,he)}(!e||!O&&e.target.parentNode===$||e.target===$&&ya(e.propertyName)===ya(dt))&&(ct||(e=oe,hn(),oe!==e&&(ie.emit("indexChanged",ue()),ha())),"inner"===me&&ie.emit("innerLoaded",ue()),xt=!1,mt=oe)}}function Ca(e,t){if(!Lt)if("prev"===e)xa(t,-1);else if("next"===e)xa(t,1);else{if(xt){if(yt)return;Ea()}var n=En(),a=0;"first"===e?a=-n:"last"===e?a=O?Q-Z-n:Q-1-n:("number"!=typeof e&&(e=parseInt(e)),isNaN(e)||(a=(e=t?e:Math.max(0,Math.min(Q-1,e)))-n)),!O&&a&&Math.abs(a)<Z&&(e=0<a?1:-1,a+=pt<=oe+a-Q?Q*e:2*Q*e*-1),oe+=a,O&&ee&&(oe<pt&&(oe+=Q),gt<oe)&&(oe-=Q),En(oe)!==En(mt)&&ga(t)}}function xa(e,t){if(xt){if(yt)return;Ea()}var n;if(!t){for(var a=Na(e=Ba(e));a!==H&&[I,F].indexOf(a)<0;)a=a.parentNode;var r=[I,F].indexOf(a);0<=r&&(n=!0,t=0===r?-1:1)}if(Ye){if(oe===pt&&-1===t)return void Ca("last",e);if(oe===gt&&1===t)return void Ca("first",e)}t&&(oe+=$e*t,X&&(oe=Math.floor(oe)),ga(n||e&&"keydown"===e.type?e:null))}function ba(){Te=setInterval(function(){xa(null,Ae)},tt),V=!0}function wa(){clearInterval(Te),V=!1}function Sa(e,t){setAttrs(W,{"data-action":e}),W.innerHTML=Le[0]+e+Le[1]+t}function Aa(){ba(),W&&Sa("stop",nt[1]),Ne=ke=!1}function Ma(){wa(),W&&Sa("start",nt[0]),Ne=ke=!0}function La(){Ne=V?(Ma(),!0):(Aa(),!1)}function Ta(e){e.focus()}function Ba(e){return ka(e=e||a.event)?e.changedTouches[0]:e}function Na(e){return e.target||a.event.srcElement}function ka(e){return 0<=e.type.indexOf("touch")}function Ra(e){e.preventDefault?e.preventDefault():e.returnValue=!1}function Da(){return getTouchDirection(toDegree(Pe.y-De.y,Pe.x-De.x),Et)===D.axis}function Pa(e){if(xt){if(yt)return;Ea()}te&&V&&wa(),He=!0,Ie&&(caf(Ie),Ie=null);var t=Ba(e);ie.emit(ka(e)?"touchStart":"dragStart",ue(e)),!ka(e)&&0<=["img","a"].indexOf(oa(Na(e)))&&Ra(e),Pe.x=De.x=t.clientX,Pe.y=De.y=t.clientY,O&&(Oe=parseFloat($.style[dt].replace(ft,"")),ca($,"0s"))}function Oa(e){var t;He&&(t=Ba(e),Pe.x=t.clientX,Pe.y=t.clientY,O?Ie=Ie||raf(function(){!function e(t){if(!Ct)return void(He=!1);caf(Ie);He&&(Ie=raf(function(){e(t)}));"?"===Ct&&(Ct=Da());if(Ct){!Qt&&ka(t)&&(Qt=!0);try{t.type&&ie.emit(ka(t)?"touchMove":"dragMove",ue(t))}catch(e){}var n=Oe,a=Fe(Pe,De);n=!q||Y||X?n+a+"px":n+(c?a*Z*100/((U+J)*re):100*a/(U+J))+"%",$.style[dt]=ft+n+vt}}(e)}):(Ct="?"===Ct?Da():Ct)&&(Qt=!0),"boolean"!=typeof e.cancelable||e.cancelable)&&Qt&&e.preventDefault()}function Ha(a){var e,r,n;He&&(Ie&&(caf(Ie),Ie=null),O&&ca($,""),He=!1,e=Ba(a),Pe.x=e.clientX,Pe.y=e.clientY,r=Fe(Pe,De),Math.abs(r))&&(ka(a)||addEvents(n=Na(a),{click:function e(t){Ra(t),removeEvents(n,{click:e})}}),O?Ie=raf(function(){if(q&&!X){var e=-r*Z/(U+J),e=0<r?Math.floor(e):Math.ceil(e);oe+=e}else{var t=-(Oe+r);if(t<=0)oe=pt;else if(t>=i[re-1])oe=gt;else for(var n=0;n<re&&t>=i[n];)t>i[oe=n]&&r<0&&(oe+=1),n++}ga(a,r),ie.emit(ka(a)?"touchEnd":"dragEnd",ue(a))}):Ct&&xa(a,0<r?-1:1)),"auto"===D.preventScrollOnTouch&&(Qt=!1),Et&&(Ct="?"),te&&!V&&ba()}function Ia(){(w||ze).style.height=i[oe+Z]-i[oe]+"px"}function Fa(){var e=Y?(Y+J)*Q/U:Q/Z;return Math.min(Math.ceil(e),Q)}function za(){if(_e&&!zt&&ye!==Ee){var e=Ee,t=ye,n=showElement;for(ye<Ee&&(e=ye,t=Ee,n=hideElement);e<t;)n(ge[e]),e++;Ee=ye}}function ue(e){return{container:$,slideItems:G,navContainer:z,navItems:ge,controlsContainer:H,hasControls:It,prevButton:I,nextButton:F,items:Z,slideBy:$e,cloneCount:ae,slideCount:Q,slideCountNew:re,index:oe,indexCached:mt,displayIndex:gn(),navCurrentIndex:xe,navCurrentIndexCached:be,pages:ye,pagesCached:Ee,sheet:ne,isOn:je,event:e||{}}}p&&console.warn("No slides found in",D.container)};$A.tns=tns;
\ No newline at end of file
+var win$1=window,raf=win$1.requestAnimationFrame||win$1.webkitRequestAnimationFrame||win$1.mozRequestAnimationFrame||win$1.msRequestAnimationFrame||function(e){return setTimeout(e,16)},win=window,caf=win.cancelAnimationFrame||win.mozCancelAnimationFrame||function(e){clearTimeout(e)};function extend(){for(var e,t,n,a=arguments[0]||{},r=1,o=arguments.length;r<o;r++)if(null!==(e=arguments[r]))for(t in e)a!==(n=e[t])&&void 0!==n&&(a[t]=n);return a}function checkStorageValue(e){return 0<=["true","false"].indexOf(e)?JSON.parse(e):e}function setLocalStorage(e,t,n,a){if(a)try{e.setItem(t,n)}catch(e){}return n}function getSlideId(){var e=window.tnsId;return window.tnsId=e?e+1:1,"tns"+window.tnsId}function getBody(){var e=document,t=e.body;return t||((t=e.createElement("body")).fake=!0),t}var docElement=document.documentElement;function setFakeBody(e){var t="";return e.fake&&(t=docElement.style.overflow,e.style.background="",e.style.overflow=docElement.style.overflow="hidden",docElement.appendChild(e)),t}function resetFakeBody(e,t){e.fake&&(e.remove(),docElement.style.overflow=t,docElement.offsetHeight)}function calc(){var e=document,t=getBody(),n=setFakeBody(t),a=e.createElement("div"),r=!1;t.appendChild(a);try{for(var o,i="(10px * 10)",s=["calc"+i,"-moz-calc"+i,"-webkit-calc"+i],l=0;l<3;l++)if(o=s[l],a.style.width=o,100===a.offsetWidth){r=o.replace(i,"");break}}catch(e){}return t.fake?resetFakeBody(t,n):a.remove(),r}function percentageLayout(){var e=document,t=getBody(),n=setFakeBody(t),a=e.createElement("div"),e=e.createElement("div"),r="";a.className="tns-t-subp2",e.className="tns-t-ct";for(var o=0;o<70;o++)r+="<div></div>";return e.innerHTML=r,a.appendChild(e),t.appendChild(a),e=Math.abs(a.getBoundingClientRect().left-e.children[67].getBoundingClientRect().left)<2,t.fake?resetFakeBody(t,n):a.remove(),e}function mediaquerySupport(){var e,t,n,a,r,o;return!(!window.matchMedia&&!window.msMatchMedia)||(e=document,n=setFakeBody(t=getBody()),a=e.createElement("div"),r="@media all and (min-width:1px){.tns-mq-test{position:absolute}}",(o=e.createElement("style")).type="text/css",a.className="tns-mq-test",t.appendChild(o),t.appendChild(a),o.styleSheet?o.styleSheet.cssText=r:o.appendChild(e.createTextNode(r)),o=(window.getComputedStyle?window.getComputedStyle(a):a.currentStyle).position,t.fake?resetFakeBody(t,n):a.remove(),"absolute"===o)}function createStyleSheet(e,t){var n=document.createElement("style");return e&&n.setAttribute("media",e),t&&n.setAttribute("nonce",t),document.querySelector("head").appendChild(n),n.sheet||n.styleSheet}function addCSSRule(e,t,n,a){"insertRule"in e?e.insertRule(t+"{"+n+"}",a):e.addRule(t,n,a)}function removeCSSRule(e,t){"deleteRule"in e?e.deleteRule(t):e.removeRule(t)}function getCssRulesLength(e){return("insertRule"in e?e.cssRules:e.rules).length}function toDegree(e,t){return Math.atan2(e,t)*(180/Math.PI)}function getTouchDirection(e,t){var n=!1,e=Math.abs(90-Math.abs(e));return 90-t<=e?n="horizontal":e<=t&&(n="vertical"),n}function forEach(e,t,n){for(var a=0,r=e.length;a<r;a++)t.call(n,e[a],a)}var classListSupport="classList"in document.createElement("_"),hasClass=classListSupport?function(e,t){return e.classList.contains(t)}:function(e,t){return 0<=e.className.indexOf(t)},addClass=classListSupport?function(e,t){hasClass(e,t)||e.classList.add(t)}:function(e,t){hasClass(e,t)||(e.className+=" "+t)},removeClass=classListSupport?function(e,t){hasClass(e,t)&&e.classList.remove(t)}:function(e,t){hasClass(e,t)&&(e.className=e.className.replace(t,""))};function hasAttr(e,t){return e.hasAttribute(t)}function getAttr(e,t){return e.getAttribute(t)}function isNodeList(e){return void 0!==e.item}function setAttrs(e,t){if(e=isNodeList(e)||e instanceof Array?e:[e],"[object Object]"===Object.prototype.toString.call(t))for(var n=e.length;n--;)for(var a in t)e[n].setAttribute(a,t[a])}function removeAttrs(e,t){e=isNodeList(e)||e instanceof Array?e:[e];for(var n=(t=t instanceof Array?t:[t]).length,a=e.length;a--;)for(var r=n;r--;)e[a].removeAttribute(t[r])}function arrayFromNodeList(e){for(var t=[],n=0,a=e.length;n<a;n++)t.push(e[n]);return t}function hideElement(e,t){"none"!==e.style.display&&(e.style.display="none")}function showElement(e,t){"none"===e.style.display&&(e.style.display="")}function isVisible(e){return"none"!==window.getComputedStyle(e).display}function whichProperty(t){"string"==typeof t&&(n=[t],a=t.charAt(0).toUpperCase()+t.substr(1),["Webkit","Moz","ms","O"].forEach(function(e){"ms"===e&&"transform"!==t||n.push(e+a)}),t=n);var n,a,e=document.createElement("fakeelement");t.length;for(var r=0;r<t.length;r++){var o=t[r];if(void 0!==e.style[o])return o}return!1}function has3DTransforms(e){var t,n,a,r;return!!e&&!!window.getComputedStyle&&(a=document,n=setFakeBody(t=getBody()),a=a.createElement("p"),r=9<e.length?"-"+e.slice(0,-9).toLowerCase()+"-":"",r+="transform",t.insertBefore(a,null),a.style[e]="translate3d(1px,1px,1px)",e=window.getComputedStyle(a).getPropertyValue(r),t.fake?resetFakeBody(t,n):a.remove(),void 0!==e)&&0<e.length&&"none"!==e}function getEndProperty(e,t){var n=!1;return/^Webkit/.test(e)?n="webkit"+t+"End":/^O/.test(e)?n="o"+t+"End":e&&(n=t.toLowerCase()+"end"),n}var supportsPassive=!1;try{var opts=Object.defineProperty({},"passive",{get:function(){supportsPassive=!0}});window.addEventListener("test",null,opts)}catch(e){}var passiveOption=!!supportsPassive&&{passive:!0};function addEvents(e,t,n){for(var a in t){var r=0<=["touchstart","touchmove"].indexOf(a)&&!n&&passiveOption;e.addEventListener(a,t[a],r)}}function removeEvents(e,t){for(var n in t){var a=0<=["touchstart","touchmove"].indexOf(n)&&passiveOption;e.removeEventListener(n,t[n],a)}}function Events(){return{topics:{},on:function(e,t){this.topics[e]=this.topics[e]||[],this.topics[e].push(t)},off:function(e,t){if(this.topics[e])for(var n=0;n<this.topics[e].length;n++)if(this.topics[e][n]===t){this.topics[e].splice(n,1);break}},emit:function(t,n){n.type=t,this.topics[t]&&this.topics[t].forEach(function(e){e(n,t)})}}}function jsTransform(t,n,a,r,e,o,i){var s=Math.min(o,10),l=0<=e.indexOf("%")?"%":"px",e=e.replace(l,""),u=Number(t.style[n].replace(a,"").replace(r,"").replace(l,"")),c=(e-u)/o*s;setTimeout(function e(){o-=s;u+=c;t.style[n]=a+u+l+r;0<o?setTimeout(e,s):i()},s)}Object.keys||(Object.keys=function(e){var t,n=[];for(t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.push(t);return n}),"remove"in Element.prototype||(Element.prototype.remove=function(){this.parentNode&&this.parentNode.removeChild(this)});var tns=function(D){D=extend({container:".slider",mode:"carousel",axis:"horizontal",items:1,gutter:0,edgePadding:0,fixedWidth:!1,autoWidth:!1,viewportMax:!1,slideBy:1,center:!1,controls:!0,controlsPosition:"top",controlsText:["prev","next"],controlsContainer:!1,prevButton:!1,nextButton:!1,nav:!0,navPosition:"top",navContainer:!1,navAsThumbnails:!1,arrowKeys:!1,speed:300,autoplay:!1,autoplayPosition:"top",autoplayTimeout:5e3,autoplayDirection:"forward",autoplayText:["start","stop"],autoplayHoverPause:!0,autoplayButton:!1,autoplayButtonOutput:!0,autoplayResetOnVisibility:!0,animateIn:"tns-fadeIn",animateOut:"tns-fadeOut",animateNormal:"tns-normal",animateDelay:!1,loop:!0,rewind:!1,autoHeight:!1,responsive:!1,lazyload:!1,lazyloadSelector:".tns-lazy-img",touch:!0,mouseDrag:!1,swipeAngle:15,nested:!1,preventActionWhenRunning:!1,preventScrollOnTouch:!1,freezable:!0,onInit:!1,useLocalStorage:!0,nonce:!1},D||{});var ce=document,a=window,r={ENTER:13,SPACE:32,LEFT:37,RIGHT:39},t={},n=D.useLocalStorage;if(n){var o=navigator.userAgent,l=new Date;try{(t=a.localStorage)?(t.setItem(l,l),n=t.getItem(l)==l,t.removeItem(l)):n=!1,n||(t={})}catch(e){n=!1}n&&(t.tnsApp&&t.tnsApp!==o&&["tC","tPL","tMQ","tTf","t3D","tTDu","tTDe","tADu","tADe","tTE","tAE"].forEach(function(e){t.removeItem(e)}),localStorage.tnsApp=o)}var u=t.tC?checkStorageValue(t.tC):setLocalStorage(t,"tC",calc(),n),l=t.tPL?checkStorageValue(t.tPL):setLocalStorage(t,"tPL",percentageLayout(),n),de=t.tMQ?checkStorageValue(t.tMQ):setLocalStorage(t,"tMQ",mediaquerySupport(),n),c=t.tTf?checkStorageValue(t.tTf):setLocalStorage(t,"tTf",whichProperty("transform"),n),o=t.t3D?checkStorageValue(t.t3D):setLocalStorage(t,"t3D",has3DTransforms(c),n),s=t.tTDu?checkStorageValue(t.tTDu):setLocalStorage(t,"tTDu",whichProperty("transitionDuration"),n),d=t.tTDe?checkStorageValue(t.tTDe):setLocalStorage(t,"tTDe",whichProperty("transitionDelay"),n),f=t.tADu?checkStorageValue(t.tADu):setLocalStorage(t,"tADu",whichProperty("animationDuration"),n),v=t.tADe?checkStorageValue(t.tADe):setLocalStorage(t,"tADe",whichProperty("animationDelay"),n),h=t.tTE?checkStorageValue(t.tTE):setLocalStorage(t,"tTE",getEndProperty(s,"Transition"),n),m=t.tAE?checkStorageValue(t.tAE):setLocalStorage(t,"tAE",getEndProperty(f,"Animation"),n),p=a.console&&"function"==typeof a.console.warn,g=["container","controlsContainer","prevButton","nextButton","navContainer","autoplayButton"],y={};if(g.forEach(function(e){var t,n;"string"==typeof D[e]&&(t=D[e],n=ce.querySelector(t),y[e]=t,n&&n.nodeName?D[e]=n:p&&console.warn("Can't find",D[e]))}),!(D.container.children.length<1)){var fe,ve,E,he,P=D.responsive,me=D.nested,O="carousel"===D.mode;if(P){0 in P&&(D=extend(D,P[0]),delete P[0]);var C,x={};for(C in P){var b=P[C];x[C]="number"==typeof b?{items:b}:b}P=x,x=null}O||!function e(t){for(var n in t)O||("slideBy"===n&&(t[n]="page"),"edgePadding"===n&&(t[n]=!1),"autoHeight"===n&&(t[n]=!1)),"responsive"===n&&e(t[n])}(D),O||(D.axis="horizontal",D.slideBy="page",D.edgePadding=!1,fe=D.animateIn,ve=D.animateOut,E=D.animateDelay,he=D.animateNormal);var w,pe,i,S,A,M,H,L,I,F,T,B,N,k,z,R,ge,ye,Ee,Ce,xe,be,we,Se,Ae,W,Me,Le,Te,V,Be,Ne,ke,Re,De,Pe,Oe,He,Ie,Fe,q="horizontal"===D.axis,j=ce.createElement("div"),ze=ce.createElement("div"),$=D.container,We=$.parentNode,Ve=$.outerHTML,G=$.children,Q=G.length,qe=xn(),je=!1,X=($A.loop(G,function(e,t){$A.setAttr(t,{role:"region","aria-roledescription":""+(e+1),"aria-label":"Slide"})},"array"),P&&Wn(),O&&($.className+=" tns-vpfix"),D.autoWidth),Y=le("fixedWidth"),K=le("edgePadding"),J=le("gutter"),U=wn(),_=le("center"),Z=X?1:Math.floor(le("items")),$e=le("slideBy"),Ge=D.viewportMax||D.fixedWidthViewportWidth,Qe=le("arrowKeys"),Xe=le("speed"),Ye=D.rewind,ee=!Ye&&D.loop,Ke=le("autoHeight"),Je=le("controls"),Ue=le("controlsText"),_e=le("nav"),Ze=le("touch"),et=le("mouseDrag"),te=le("autoplay"),tt=le("autoplayTimeout"),nt=le("autoplayText"),at=le("autoplayHoverPause"),rt=le("autoplayResetOnVisibility"),ne=createStyleSheet(null,le("nonce")),ot=D.lazyload,it=D.lazyloadSelector,st=[],ae=ee?(n=function(){{if(X||Y&&!Ge)return Q-1;var e=Y?"fixedWidth":"items",t=[];if((Y||D[e]<Q)&&t.push(D[e]),P)for(var n in P){n=P[n][e];n&&(Y||n<Q)&&t.push(n)}return t.length||t.push(0),Math.ceil(Y?Ge/Math.min.apply(null,t):Math.max.apply(null,t))}}(),S=O?Math.ceil((5*n-Q)/2):4*n-Q,S=Math.max(n,S),Sn("edgePadding")?S+1:S):0,re=O?Q+2*ae:Q+ae,lt=!(!Y&&!X||ee),ut=Y?fa():null,ct=!O||!ee,dt=q?"left":"top",ft="",vt="",ht=Y?function(){return _&&!ee?Q-1:Math.ceil(-ut/(Y+J))}:X?function(){for(var e=0;e<re;e++)if(i[e]>=-ut)return e}:function(){return _&&O&&!ee?Q-1:ee||O?Math.max(0,re-Math.ceil(Z)):re-1},oe=yn(le("startIndex")),mt=oe,pt=(gn(),0),gt=X?null:ht(),yt=D.preventActionWhenRunning,Et=D.swipeAngle,Ct=!Et||"?",xt=!1,bt=D.onInit,ie=new Events,wt=" tns-slider tns-"+D.mode,se=$.id||getSlideId(),St=le("disable"),At=!1,Mt=D.freezable,Lt=!(!Mt||X)&&zn(),Tt=!1,Bt={click:xa,keydown:function(e){e=Ba(e);var t=[r.LEFT,r.RIGHT].indexOf(e.keyCode);0<=t&&(0===t?I.disabled||xa(e,-1):F.disabled||xa(e,1))}},Nt={click:function(e){if(xt){if(yt)return;Ea()}var t=Na(e=Ba(e));for(;t!==z&&!hasAttr(t,"data-nav");)t=t.parentNode;{var n,a;hasAttr(t,"data-nav")&&(n=Ce=Number(getAttr(t,"data-nav")),a=Y||X?n*Q/ye:n*Z,Ca(zt?n:Math.min(Math.ceil(a),Q-1),e),xe===n)&&(V&&Ma(),Ce=-1)}},keydown:function(e){e=Ba(e);var t,n=ce.activeElement;hasAttr(n,"data-nav")&&(t=[r.LEFT,r.RIGHT,r.ENTER,r.SPACE].indexOf(e.keyCode),n=Number(getAttr(n,"data-nav")),0<=t)&&(0===t?0<n&&Ta(ge[n-1]):1===t?n<ye-1&&Ta(ge[n+1]):Ca(Ce=n,e))}},kt={mouseenter:function(){V&&(wa(),Be=!0)},mouseleave:function(){Be&&(ba(),Be=!1)}},Rt={focusin:function(){V&&(Ma(),ke=!0)}},Dt={visibilitychange:function(){ce.hidden?V&&(wa(),Re=!0):Re&&(ba(),Re=!1)}},Pt={keydown:function(e){e=Ba(e);var t=[r.LEFT,r.RIGHT].indexOf(e.keyCode);0<=t&&xa(e,0===t?-1:1)}},Ot={touchstart:Pa,touchmove:Oa,touchend:Ha,touchcancel:Ha},Ht={mousedown:Pa,mousemove:Oa,mouseup:Ha,mouseleave:Ha},It=Sn("controls"),Ft=Sn("nav"),zt=!!X||D.navAsThumbnails,Wt=Sn("autoplay"),n=Sn("touch"),Vt=Sn("mouseDrag"),qt="tns-slide-active",jt="tns-slide-cloned",$t="tns-complete",Gt={load:function(e){Kn(Na(e))},error:function(e){!function(e){addClass(e,"failed"),Jn(e)}(Na(e))}},Qt="force"===D.preventScrollOnTouch;if(It&&(H=D.controlsContainer,L=D.controlsContainer?D.controlsContainer.outerHTML:"",I=D.prevButton,F=D.nextButton,T=D.prevButton?D.prevButton.outerHTML:"",B=D.nextButton?D.nextButton.outerHTML:""),Ft&&(z=D.navContainer,R=D.navContainer?D.navContainer.outerHTML:"",ye=X?Q:Fa(),Ee=0,Ce=-1,xe=Cn(),be=xe,we="tns-nav-active",Se="Page "),Wt&&(Ae="forward"===D.autoplayDirection?1:-1,W=D.autoplayButton,Me=D.autoplayButton?D.autoplayButton.outerHTML:"",Le=["<span class='tns-visually-hidden'>"," animation</span>"]),(n||Vt)&&(De={},He=!(Pe={}),Fe=q?function(e,t){return e.x-t.x}:function(e,t){return e.y-t.y}),X||pn(St||Lt),c&&(dt=c,ft="translate",vt=o?(ft+=q?"3d(":"3d(0px, ",q?", 0px, 0px)":", 0px)"):(ft+=q?"X(":"Y(",")")),O&&($.className=$.className.replace("tns-vpfix","")),Sn("gutter"),j.className="tns-outer",ze.className="tns-inner",j.id=se+"-ow",ze.id=se+"-iw",""===$.id&&($.id=se),wt=wt+(l||X?" tns-subpixel":" tns-no-subpixel")+(u?" tns-calc":" tns-no-calc"),X&&(wt+=" tns-autowidth"),wt+=" tns-"+D.axis,$.className+=wt,(O?((w=ce.createElement("div")).id=se+"-mw",w.className="tns-ovh",j.appendChild(w),w):j).appendChild(ze),Ke&&((w||ze).className+=" tns-ah"),We.insertBefore(j,$),ze.appendChild($),forEach(G,function(e,t){addClass(e,"tns-item"),e.id||(e.id=se+"-item"+t),!O&&he&&addClass(e,he),setAttrs(e,{"aria-hidden":"true",tabindex:"-1"})}),ae){for(var Xt=ce.createDocumentFragment(),Yt=ce.createDocumentFragment(),Kt=ae;Kt--;){var Jt=Kt%Q,Ut=G[Jt].cloneNode(!0);addClass(Ut,jt),removeAttrs(Ut,"id"),Yt.insertBefore(Ut,Yt.firstChild),O&&(Ut=G[Q-1-Jt].cloneNode(!0),addClass(Ut,jt),removeAttrs(Ut,"id"),Xt.appendChild(Ut))}$.insertBefore(Xt,$.firstChild),$.appendChild(Yt),G=$.children}if(!O)for(var _t=oe,Zt=oe+Math.min(Q,Z);_t<Zt;_t++){var en=G[_t];en.style.left=100*(_t-oe)/Z+"%",addClass(en,fe),removeClass(en,he)}if(q&&(l||X?(addCSSRule(ne,"#"+se+" > .tns-item","font-size:"+a.getComputedStyle(G[0]).fontSize+";",getCssRulesLength(ne)),addCSSRule(ne,"#"+se,"font-size:0;",getCssRulesLength(ne))):O&&forEach(G,function(e,t){e.style.marginLeft=(e=t,u?u+"("+100*e+"% / "+re+")":100*e/re+"%")})),de?(s&&(e=w&&D.autoHeight?Nn(D.speed):"",addCSSRule(ne,"#"+se+"-mw",e,getCssRulesLength(ne))),e=An(D.edgePadding,D.gutter,D.fixedWidth,D.speed,D.autoHeight),addCSSRule(ne,"#"+se+"-iw",e,getCssRulesLength(ne)),O&&(e=q&&!X?"width:"+Mn(D.fixedWidth,D.gutter,D.items)+";":"",s&&(e+=Nn(Xe)),addCSSRule(ne,"#"+se,e,getCssRulesLength(ne))),e=q&&!X?Ln(D.fixedWidth,D.gutter,D.items):"",D.gutter&&(e+=Tn(D.gutter)),O||(s&&(e+=Nn(Xe)),f&&(e+=kn(Xe)))):(O&&Ke&&(w.style[s]=Xe/1e3+"s"),ze.style.cssText=An(K,J,Y,Ke),O&&q&&!X&&($.style.width=Mn(Y,J,Z)),e=q&&!X?Ln(Y,J,Z):"",J&&(e+=Tn(J))),e&&addCSSRule(ne,"#"+se+" > .tns-item",e,getCssRulesLength(ne)),P&&de)for(var tn in P){tn=parseInt(tn);var nn=P[tn],e="",an="",rn="",on="",sn="",ln=X?null:le("items",tn),un=le("fixedWidth",tn),cn=le("speed",tn),dn=le("edgePadding",tn),fn=le("autoHeight",tn),vn=le("gutter",tn);s&&w&&le("autoHeight",tn)&&"speed"in nn&&(an="#"+se+"-mw{"+Nn(cn)+"}"),("edgePadding"in nn||"gutter"in nn)&&(rn="#"+se+"-iw{"+An(dn,vn,un,cn,fn)+"}"),O&&q&&!X&&("fixedWidth"in nn||"items"in nn||Y&&"gutter"in nn)&&(on="width:"+Mn(un,vn,ln)+";"),s&&"speed"in nn&&(on+=Nn(cn)),on=on&&"#"+se+"{"+on+"}",("fixedWidth"in nn||Y&&"gutter"in nn||!O&&"items"in nn)&&(sn+=Ln(un,vn,ln)),"gutter"in nn&&(sn+=Tn(vn)),!O&&"speed"in nn&&(s&&(sn+=Nn(cn)),f)&&(sn+=kn(cn)),(e=an+rn+on+(sn=sn&&"#"+se+" > .tns-item{"+sn+"}"))&&ne.insertRule("@media (min-width: "+tn/16+"em) {"+e+"}",ne.cssRules.length)}Rn();var hn=ee?O?function(){var e=pt,t=gt;e+=$e,t-=$e,K?(e+=1,--t):Y&&(U+J)%(Y+J)&&--t,ae&&(t<oe?oe-=Q:oe<e&&(oe+=Q))}:function(){if(gt<oe)for(;pt+Q<=oe;)oe-=Q;else if(oe<pt)for(;oe<=gt-Q;)oe+=Q}:function(){oe=Math.max(pt,Math.min(gt,oe))},mn=O?function(){ca($,""),s||!Xe?(ma(),Xe&&isVisible($)||Ea()):jsTransform($,dt,ft,vt,va(),Xe,Ea),q||Ia()}:function(){st=[];var e={};e[h]=e[m]=Ea,removeEvents(G[mt],e),addEvents(G[oe],e),pa(mt,fe,ve,!0),pa(oe,he,fe),h&&m&&Xe&&isVisible($)||Ea()};return{version:"2.9.4",getInfo:ue,events:ie,goTo:Ca,play:function(){te&&!V&&(Aa(),Ne=!1)},pause:function(){V&&(Ma(),Ne=!0)},isOn:je,updateSliderHeight:na,refresh:Rn,destroy:function(){ne.disabled=!0,ne.ownerNode&&ne.ownerNode.remove(),removeEvents(a,{resize:In}),Qe&&removeEvents(ce,Pt),H&&removeEvents(H,Bt),z&&removeEvents(z,Nt),removeEvents(j.parentNode,kt),removeEvents($,Dt),W&&removeEvents(W,{click:La}),te&&clearInterval(Te),O&&h&&((e={})[h]=Ea,removeEvents($,e)),Ze&&removeEvents($,Ot),et&&removeEvents($,Ht);var e,t,o=[Ve,L,T,B,R,Me];for(t in g.forEach(function(e,t){var n,a,r="container"===e?j:D[e];"object"==typeof r&&r&&(n=r.previousElementSibling||!1,a=r.parentNode,r.outerHTML=o[t],D[e]=n?n.nextElementSibling:a.firstElementChild)}),g=fe=ve=E=he=q=j=ze=$=We=Ve=G=Q=pe=qe=X=Y=K=J=U=Z=$e=Ge=Qe=Xe=Ye=ee=Ke=ne=ot=i=st=ae=re=lt=ut=ct=dt=ft=vt=ht=oe=mt=pt=gt=Et=Ct=xt=bt=ie=wt=se=St=At=Mt=Lt=Tt=Bt=Nt=kt=Dt=Pt=Ot=Ht=It=Ft=zt=Wt=Vt=qt=$t=Gt=A=Je=Ue=H=L=I=F=N=k=_e=z=R=ge=ye=Ee=Ce=xe=be=we=Se=te=tt=Ae=nt=at=W=Me=rt=Le=Te=V=Be=Ne=ke=Re=De=Pe=Oe=He=Ie=Fe=Ze=et=null,this)"rebuild"!==t&&(this[t]=null);je=!1},rebuild:function(){return tns(extend(D,y))}}}function pn(e){e&&(Je=_e=Ze=et=Qe=te=at=rt=!1)}function gn(){for(var e=O?oe-ae:oe;e<0;)e+=Q;return e%Q+1}function yn(e){return e=e?Math.max(0,Math.min(ee?Q-1:Q-Z,e)):0,O?e+ae:e}function En(e){for(null==e&&(e=oe),O&&(e-=ae);e<0;)e+=Q;return Math.floor(e%Q)}function Cn(){var e=En(),e=zt?e:Y||X?Math.ceil((e+1)*ye/Q-1):Math.floor(e/Z);return e=!ee&&O&&oe===gt?ye-1:e}function xn(){return a.innerWidth||ce.documentElement.clientWidth||ce.body.clientWidth}function bn(e){return"top"===e?"afterbegin":"beforeend"}function wn(){var e=K?2*K-J:0;return function e(t){var n,a;if(null!=t)return n=ce.createElement("div"),t.appendChild(n),a=(a=n.getBoundingClientRect()).right-a.left,n.remove(),a||e(t.parentNode)}(We)-e}function Sn(e){if(D[e])return!0;if(P)for(var t in P)if(P[t][e])return!0;return!1}function le(e,t){if(null==t&&(t=qe),"items"===e&&Y)return Math.floor((U+J)/(Y+J))||1;var n=D[e];if(P)for(var a in P)t>=parseInt(a)&&e in P[a]&&(n=P[a][e]);return"slideBy"===e&&"page"===n&&(n=le("items")),n=O||"slideBy"!==e&&"items"!==e?n:Math.floor(n)}function An(e,t,n,a,r){var o,i="";return void 0!==e?(o=e,t&&(o-=t),i=q?"margin: 0 "+o+"px 0 "+e+"px;":"margin: "+e+"px 0 "+o+"px 0;"):t&&!n&&(e="-"+t+"px",i="margin: 0 "+(q?e+" 0 0":"0 "+e+" 0")+";"),!O&&r&&s&&a&&(i+=Nn(a)),i}function Mn(e,t,n){return e?(e+t)*re+"px":u?u+"("+100*re+"% / "+n+")":100*re/n+"%"}function Ln(e,t,n){return t="width:"+(t=e?e+t+"px":(O||(n=Math.floor(n)),e=O?re:n,u?u+"(100% / "+e+")":100/e+"%")),"inner"!==me?t+";":t+" !important;"}function Tn(e){return!1!==e?(q?"padding-":"margin-")+(q?"right":"bottom")+": "+e+"px;":""}function Bn(e,t){e=e.substring(0,e.length-t).toLowerCase();return e=e&&"-"+e+"-"}function Nn(e){return Bn(s,18)+"transition-duration:"+e/1e3+"s;"}function kn(e){return Bn(f,17)+"animation-duration:"+e/1e3+"s;"}function Rn(){var e;Sn("autoHeight")||X||!q?(forEach(e=$.querySelectorAll("img"),function(e){var t=e.src;ot||(t&&t.indexOf("data:image")<0?(e.src="",addEvents(e,Gt),addClass(e,"loading"),e.src=t):Kn(e))}),raf(function(){Zn(arrayFromNodeList(e),function(){A=!0})}),Sn("autoHeight")&&(e=Un(oe,Math.min(oe+Z-1,re-1))),ot?Dn():raf(function(){Zn(arrayFromNodeList(e),Dn)})):(O&&ha(),On(),Hn())}function Dn(){var a;(X&&1<Q?(a=ee?oe:Q-1,function e(){var t=G[a].getBoundingClientRect().left,n=G[a-1].getBoundingClientRect().right;Math.abs(t-n)<=1?Pn():setTimeout(function(){e()},16)}):Pn)()}function Pn(){q&&!X||(aa(),X?(ut=fa(),Mt&&(Lt=zn()),gt=ht(),pn(St||Lt)):Ia()),O&&ha(),On(),Hn()}function On(){var e,t;if(ra(),j.parentNode.setAttribute("role","region"),j.parentNode.setAttribute("aria-label","Carousel"),j.insertAdjacentHTML("afterbegin",'<div aria-hidden="true" style="position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; white-space: nowrap;" class="tns-liveregion tns-visually-hidden">Slide <span class="current">'+Qn()+"</span> of "+Q+"</div>"),M=j.querySelector(".tns-liveregion .current"),Wt&&(e=te?"stop":"start",W?setAttrs(W,{"data-action":e}):D.autoplayButtonOutput&&(j.insertAdjacentHTML(bn(D.autoplayPosition),'<button type="button" data-action="'+e+'">'+Le[0]+e+Le[1]+nt[0]+"</button>"),W=j.querySelector("[data-action]")),W&&addEvents(W,{click:La}),te)&&(Aa(),at&&(addEvents(j.parentNode,Rt),addEvents(j.parentNode,kt)),rt)&&addEvents($,Dt),Ft){if(z)setAttrs(z,{role:"toolbar","aria-label":"Pagination"}),forEach(ge=z.children,function(e,t){setAttrs(e,{"data-nav":t,tabindex:"-1","aria-label":Se+(t+1),"aria-controls":se})});else{for(var n="",a=zt?"":'style="display:none"',r=0;r<Q;r++)n+='<button type="button" data-nav="'+r+'" tabindex="-1" aria-controls="'+se+'" '+a+' aria-label="'+Se+(r+1)+'"></button>';j.insertAdjacentHTML(bn(D.navPosition),n='<div class="tns-nav" role="toolbar" aria-label="Pagination">'+n+"</div>"),z=j.querySelector(".tns-nav"),ge=z.children}za(),s&&(e=s.substring(0,s.length-18).toLowerCase(),t="transition: all "+Xe/1e3+"s",addCSSRule(ne,"[aria-controls^="+se+"-item]",t=e?"-"+e+"-"+t:t,getCssRulesLength(ne))),setAttrs(ge[xe],{"aria-label":Se+(xe+1),"aria-current":"true"}),removeAttrs(ge[xe],"tabindex"),addClass(ge[xe],we),addEvents(z,Nt)}It&&(H||I&&F||(j.insertAdjacentHTML(bn(D.controlsPosition),'<div class="tns-controls"><button type="button" data-controls="prev" aria-controls="'+se+'">'+Ue[0]+'</button><button type="button" data-controls="next" aria-controls="'+se+'">'+Ue[1]+"</button></div>"),H=j.querySelector(".tns-controls")),I&&F||(I=H.children[0],F=H.children[1]),(D.controlsContainer||D.prevButton&&D.nextButton)&&setAttrs([I,F],{"aria-controls":se}),(D.controlsContainer||D.prevButton&&D.nextButton)&&(setAttrs(I,{"data-controls":"prev"}),setAttrs(F,{"data-controls":"next"})),N=ia(I),k=ia(F),ua(),H?addEvents(H,Bt):(addEvents(I,Bt),addEvents(F,Bt))),Vn()}function Hn(){var e;O&&h&&((e={})[h]=Ea,addEvents($,e)),Ze&&addEvents($,Ot,D.preventScrollOnTouch),et&&addEvents($,Ht),Qe&&addEvents(ce,Pt),"inner"===me?ie.on("outerResized",function(){Fn(),ie.emit("innerLoaded",ue())}):(P||Y||X||Ke||!q)&&addEvents(a,{resize:In}),Ke&&("outer"===me?ie.on("innerLoaded",_n):St||_n()),Yn(),St?$n():Lt&&jn(),ie.on("indexChanged",ea),"inner"===me&&ie.emit("innerLoaded",ue()),"function"==typeof bt&&bt(ue()),je=!0}function In(e){raf(function(){Fn(Ba(e))})}function Fn(e){if(je){"outer"===me&&ie.emit("outerResized",ue(e)),qe=xn();var t,n=pe,a=!1;P&&(Wn(),t=n!==pe)&&ie.emit("newBreakpointStart",ue(e));var r,o,i,s,l,u,c,d,n=Z,f=St,v=Lt,h=Qe,m=Je,p=_e,g=Ze,y=et,E=te,C=at,x=rt,b=oe;if(t&&(o=Y,i=Ke,s=Ue,l=_,u=nt,de||(c=J,d=K)),Qe=le("arrowKeys"),Je=le("controls"),_e=le("nav"),Ze=le("touch"),_=le("center"),et=le("mouseDrag"),te=le("autoplay"),at=le("autoplayHoverPause"),rt=le("autoplayResetOnVisibility"),t&&(St=le("disable"),Y=le("fixedWidth"),Xe=le("speed"),Ke=le("autoHeight"),Ue=le("controlsText"),nt=le("autoplayText"),tt=le("autoplayTimeout"),de||(K=le("edgePadding"),J=le("gutter"))),pn(St),U=wn(),q&&!X||St||(aa(),q)||(Ia(),a=!0),(Y||X)&&(ut=fa(),gt=ht()),(t||Y)&&(Z=le("items"),$e=le("slideBy"),r=Z!==n)&&(Y||X||(gt=ht()),hn()),t&&St!==f)if(St)$n();else if(At){if(ne.disabled=!1,$.className+=wt,ha(),ee)for(var w=ae;w--;)O&&showElement(G[w]),showElement(G[re-w-1]);if(!O)for(var S=oe,A=oe+Q;S<A;S++){var M=G[S],L=S<oe+Z?fe:he;M.style.left=100*(S-oe)/Z+"%",addClass(M,L)}qn(),At=!1}if(Mt&&(t||Y||X)&&(Lt=zn())!==v)if(Lt)ma(va(yn(0))),jn();else{if(Tt){if(K&&de&&(ze.style.margin=""),ae)for(var T="tns-transparent",B=ae;B--;)O&&removeClass(G[B],T),removeClass(G[re-B-1],T);qn(),Tt=!1}a=!0}if(pn(St||Lt),te||(at=rt=!1),Qe!==h&&(Qe?addEvents:removeEvents)(ce,Pt),Je!==m&&(Je?H?showElement(H):(I&&showElement(I),F&&showElement(F)):H?hideElement(H):(I&&hideElement(I),F&&hideElement(F))),_e!==p&&(_e?(showElement(z),za()):hideElement(z)),Ze!==g&&(Ze?addEvents($,Ot,D.preventScrollOnTouch):removeEvents($,Ot)),et!==y&&(et?addEvents:removeEvents)($,Ht),te!==E&&(te?(W&&showElement(W),V||Ne||Aa()):(W&&hideElement(W),V&&Ma())),at!==C&&(at?addEvents:removeEvents)(j.parentNode,kt),rt!==x&&(rt?addEvents:removeEvents)(ce,Dt),t?(Y===o&&_===l||(a=!0),Ke===i||Ke||(ze.style.height=""),Je&&Ue!==s&&(I.innerHTML=Ue[0],F.innerHTML=Ue[1]),W&&nt!==u&&(n=te?1:0,v=(f=W.innerHTML).length-u[n].length,f.substring(v)===u[n])&&(W.innerHTML=f.substring(0,v)+nt[n])):_&&(Y||X)&&(a=!0),(r||Y&&!X)&&(ye=Fa(),za()),(h=oe!==b)?(ie.emit("indexChanged",ue()),a=!0):r?h||ea():(Y||X)&&(Yn(),ra(),Gn()),r&&!O){for(var N=oe+Math.min(Q,Z),k=re;k--;){var R=G[k];oe<=k&&k<N?(addClass(R,"tns-moving"),R.style.left=100*(k-oe)/Z+"%",addClass(R,fe),removeClass(R,he)):R.style.left&&(R.style.left="",addClass(R,he),removeClass(R,fe)),removeClass(R,ve)}setTimeout(function(){forEach(G,function(e){removeClass(e,"tns-moving")})},300)}St||Lt||(t&&!de&&(K===d&&J===c||(ze.style.cssText=An(K,J,Y,Xe,Ke)),q)&&(O&&($.style.width=Mn(Y,J,Z)),m=Ln(Y,J,Z)+Tn(J),removeCSSRule(ne,getCssRulesLength(ne)-1),addCSSRule(ne,"#"+se+" > .tns-item",m,getCssRulesLength(ne))),Ke&&_n(),a&&(ha(),mt=oe)),t&&ie.emit("newBreakpointEnd",ue(e))}}function zn(){var e,t;return Y||X?(e=Y?(Y+J)*Q:i[Q],t=K?U+2*K:U+J,_&&(t-=Y?(U-Y)/2:(U-(i[oe+1]-i[oe]-J))/2),e<=t):Q<=(_?Z-(Z-1)/2:Z)}function Wn(){for(var e in pe=0,P)(e=parseInt(e))<=qe&&(pe=e)}function Vn(){!te&&W&&hideElement(W),!_e&&z&&hideElement(z),Je||(H?hideElement(H):(I&&hideElement(I),F&&hideElement(F)))}function qn(){te&&W&&showElement(W),_e&&z&&showElement(z),Je&&(H?showElement(H):(I&&showElement(I),F&&showElement(F)))}function jn(){if(!Tt){if(K&&(ze.style.margin="0px"),ae)for(var e="tns-transparent",t=ae;t--;)O&&addClass(G[t],e),addClass(G[re-t-1],e);Vn(),Tt=!0}}function $n(){if(!At){if(ne.disabled=!0,$.className=$.className.replace(wt.substring(1),""),removeAttrs($,["style"]),ee)for(var e=ae;e--;)O&&hideElement(G[e]),hideElement(G[re-e-1]);if(q&&O||removeAttrs(ze,["style"]),!O)for(var t=oe,n=oe+Q;t<n;t++){var a=G[t];removeAttrs(a,["style"]),removeClass(a,fe),removeClass(a,he)}Vn(),At=!0}}function Gn(){var e=Qn();e&&M.innerHTML!==e&&(M.innerHTML=e)}function Qn(){var e=Xn(),t=e[0]+1-(Fa()===Q?0:e[0]===Q+ae?Q+ae:ae),e=e[1]+1-(Fa()===Q?0:e[1]===Q+ae?Q+ae:ae);return t==e&&Q<e?"1":t<1||Q<e?"":t==e?t+"":t+" to "+e}function Xn(e){null==e&&(e=va());var n,a,r,o=oe;return _||K?(X||Y)&&(n=-(parseFloat(e)+K),a=n+U+2*K):X&&(n=i[oe],a=n+U),X?i.forEach(function(e,t){t<re&&((_||K)&&e<=n+.5&&(o=t),.5<=a-e)&&(r=t)}):(r=Y?(e=Y+J,_||K?(o=Math.floor(n/e),Math.ceil(a/e-1)):o+Math.ceil(U/e)-1):_||K?(e=Z-1,r=_?(o-=e/2,oe+e/2):oe+e,K&&(o-=e=K*Z/U,r+=e),o=Math.floor(o),Math.ceil(r)):o+Z-1,o=Math.max(o,0),r=Math.min(r,re-1)),[o,r]}function Yn(){var e;ot&&!St&&((e=Xn()).push(it),Un.apply(null,e).forEach(function(e){var t;hasClass(e,$t)||((t={})[h]=function(e){e.stopPropagation()},addEvents(e,t),addEvents(e,Gt),e.src=getAttr(e,"data-src"),(t=getAttr(e,"data-srcset"))&&(e.srcset=t),addClass(e,"loading"))}))}function Kn(e){addClass(e,"loaded"),Jn(e)}function Jn(e){addClass(e,$t),removeClass(e,"loading"),removeEvents(e,Gt)}function Un(e,t,n){var a=[];for(n=n||"img";e<=t;)forEach(G[e].querySelectorAll(n),function(e){a.push(e)}),e++;return a}function _n(){var e=Un.apply(null,Xn());raf(function(){Zn(e,na)})}function Zn(n,e){return!A&&(n.forEach(function(e,t){!ot&&e.complete&&Jn(e),hasClass(e,$t)&&n.splice(t,1)}),n.length)?void raf(function(){Zn(n,e)}):e()}function ea(){var e,t;Yn(),ra(),Gn(),ua(),_e&&(xe=0<=Ce?Ce:Cn(),Ce=-1,xe!==be)&&(e=ge[be],t=ge[xe],setAttrs(e,{tabindex:"-1","aria-label":Se+(be+1),"aria-current":"false"}),removeClass(e,we),setAttrs(t,{"aria-label":Se+(xe+1),"aria-current":"true"}),removeAttrs(t,"tabindex"),addClass(t,we),be=xe)}function ta(e,t){for(var n=[],a=e,r=Math.min(e+t,re);a<r;a++)n.push(G[a].offsetHeight);return Math.max.apply(null,n)}function na(){var e=Ke?ta(oe,Z):ta(ae,Q),t=w||ze;t.style.height!==e&&(t.style.height=e+"px")}function aa(){i=[0];var n=q?"left":"top",a=q?"right":"bottom",r=G[0].getBoundingClientRect()[n];forEach(G,function(e,t){t&&i.push(e.getBoundingClientRect()[n]-r),t===re-1&&i.push(e.getBoundingClientRect()[a]-r)})}function ra(){var e=Xn(),n=e[0],a=e[1];forEach(G,function(e,t){n<=t&&t<=a?hasAttr(e,"aria-hidden")&&(removeAttrs(e,["aria-hidden","tabindex"]),addClass(e,qt),!te||Ne&&ke&&!V)&&$A.announce(e):hasAttr(e,"aria-hidden")||(setAttrs(e,{"aria-hidden":"true",tabindex:"-1"}),removeClass(e,qt))})}function oa(e){return e.nodeName.toLowerCase()}function ia(e){return"button"===oa(e)}function sa(e){return"true"===e.getAttribute("aria-disabled")}function la(e,t,n){e?t.disabled=n:t.setAttribute("aria-disabled",n.toString())}function ua(){var e,t,n,a;!Je||Ye||ee||(e=N?I.disabled:sa(I),t=k?F.disabled:sa(F),a=!Ye&&gt<=oe,(n=oe<=pt)&&!e&&la(N,I,!0),!n&&e&&la(N,I,!1),a&&!t&&la(k,F,!0),!a&&t&&la(k,F,!1))}function ca(e,t){s&&(e.style[s]=t)}function da(e){return null==e&&(e=oe),X?(U-(K?J:0)-(i[e+1]-i[e]-J))/2:Y?(U-Y)/2:(Z-1)/2}function fa(){var e=U+(K?J:0)-(Y?(Y+J)*re:i[re]);return e=0<(e=_&&!ee?Y?-(Y+J)*(re-1)-da():da(re-1)-i[re-1]:e)?0:e}function va(e){var t,n;return null==e&&(e=oe),q&&!X?Y?(t=-(Y+J)*e,_&&(t+=da())):(n=c?re:Z,_&&(e-=da()),t=100*-e/n):(t=-i[e],_&&X&&(t+=da())),lt&&(t=Math.max(t,ut)),t+=!q||X||Y?"px":"%"}function ha(e){ca($,"0s"),ma(e)}function ma(e){null==e&&(e=va()),$.style[dt]=ft+e+vt}function pa(e,t,n,a){var r=e+Z;ee||(r=Math.min(r,re));for(var o=e;o<r;o++){var i=G[o];a||(i.style.left=100*(o-oe)/Z+"%"),E&&d&&(i.style[d]=i.style[v]=E*(o-e)/1e3+"s"),removeClass(i,t),addClass(i,n),a&&st.push(i)}}function ga(e,t){ct&&hn(),oe===mt&&!t||(ie.emit("indexChanged",ue()),ie.emit("transitionStart",ue()),Ke&&_n(),V&&e&&0<=["click","keydown"].indexOf(e.type)&&Ma(),xt=!0,mn())}function ya(e){return e.toLowerCase().replace(/-/g,"")}function Ea(e){if(O||xt){if(ie.emit("transitionEnd",ue(e)),!O&&0<st.length)for(var t=0;t<st.length;t++){var n=st[t];n.style.left="",v&&d&&(n.style[v]="",n.style[d]=""),removeClass(n,ve),addClass(n,he)}(!e||!O&&e.target.parentNode===$||e.target===$&&ya(e.propertyName)===ya(dt))&&(ct||(e=oe,hn(),oe!==e&&(ie.emit("indexChanged",ue()),ha())),"inner"===me&&ie.emit("innerLoaded",ue()),xt=!1,mt=oe)}}function Ca(e,t){if(!Lt)if("prev"===e)xa(t,-1);else if("next"===e)xa(t,1);else{if(xt){if(yt)return;Ea()}var n=En(),a=0;"first"===e?a=-n:"last"===e?a=O?Q-Z-n:Q-1-n:("number"!=typeof e&&(e=parseInt(e)),isNaN(e)||(a=(e=t?e:Math.max(0,Math.min(Q-1,e)))-n)),!O&&a&&Math.abs(a)<Z&&(e=0<a?1:-1,a+=pt<=oe+a-Q?Q*e:2*Q*e*-1),oe+=a,O&&ee&&(oe<pt&&(oe+=Q),gt<oe)&&(oe-=Q),En(oe)!==En(mt)&&ga(t)}}function xa(e,t){if(xt){if(yt)return;Ea()}var n;if(!t){for(var a=Na(e=Ba(e));a!==H&&[I,F].indexOf(a)<0;)a=a.parentNode;var r=[I,F].indexOf(a);0<=r&&(n=!0,t=0===r?-1:1)}if(Ye){if(oe===pt&&-1===t)return void Ca("last",e);if(oe===gt&&1===t)return void Ca("first",e)}t&&(oe+=$e*t,X&&(oe=Math.floor(oe)),ga(n||e&&"keydown"===e.type?e:null))}function ba(){Te=setInterval(function(){xa(null,Ae)},tt),V=!0}function wa(){clearInterval(Te),V=!1}function Sa(e,t){setAttrs(W,{"data-action":e}),W.innerHTML=Le[0]+e+Le[1]+t}function Aa(){ba(),W&&Sa("stop",nt[1]),Ne=ke=!1}function Ma(){wa(),W&&Sa("start",nt[0]),Ne=ke=!0}function La(){Ne=V?(Ma(),!0):(Aa(),!1)}function Ta(e){e.focus()}function Ba(e){return ka(e=e||a.event)?e.changedTouches[0]:e}function Na(e){return e.target||a.event.srcElement}function ka(e){return 0<=e.type.indexOf("touch")}function Ra(e){e.preventDefault?e.preventDefault():e.returnValue=!1}function Da(){return getTouchDirection(toDegree(Pe.y-De.y,Pe.x-De.x),Et)===D.axis}function Pa(e){if(xt){if(yt)return;Ea()}te&&V&&wa(),He=!0,Ie&&(caf(Ie),Ie=null);var t=Ba(e);ie.emit(ka(e)?"touchStart":"dragStart",ue(e)),!ka(e)&&0<=["img","a"].indexOf(oa(Na(e)))&&Ra(e),Pe.x=De.x=t.clientX,Pe.y=De.y=t.clientY,O&&(Oe=parseFloat($.style[dt].replace(ft,"")),ca($,"0s"))}function Oa(e){var t;He&&(t=Ba(e),Pe.x=t.clientX,Pe.y=t.clientY,O?Ie=Ie||raf(function(){!function e(t){if(!Ct)return void(He=!1);caf(Ie);He&&(Ie=raf(function(){e(t)}));"?"===Ct&&(Ct=Da());if(Ct){!Qt&&ka(t)&&(Qt=!0);try{t.type&&ie.emit(ka(t)?"touchMove":"dragMove",ue(t))}catch(e){}var n=Oe,a=Fe(Pe,De);n=!q||Y||X?n+a+"px":n+(c?a*Z*100/((U+J)*re):100*a/(U+J))+"%",$.style[dt]=ft+n+vt}}(e)}):(Ct="?"===Ct?Da():Ct)&&(Qt=!0),"boolean"!=typeof e.cancelable||e.cancelable)&&Qt&&e.preventDefault()}function Ha(a){var e,r,n;He&&(Ie&&(caf(Ie),Ie=null),O&&ca($,""),He=!1,e=Ba(a),Pe.x=e.clientX,Pe.y=e.clientY,r=Fe(Pe,De),Math.abs(r))&&(ka(a)||addEvents(n=Na(a),{click:function e(t){Ra(t),removeEvents(n,{click:e})}}),O?Ie=raf(function(){if(q&&!X){var e=-r*Z/(U+J),e=0<r?Math.floor(e):Math.ceil(e);oe+=e}else{var t=-(Oe+r);if(t<=0)oe=pt;else if(t>=i[re-1])oe=gt;else for(var n=0;n<re&&t>=i[n];)t>i[oe=n]&&r<0&&(oe+=1),n++}ga(a,r),ie.emit(ka(a)?"touchEnd":"dragEnd",ue(a))}):Ct&&xa(a,0<r?-1:1)),"auto"===D.preventScrollOnTouch&&(Qt=!1),Et&&(Ct="?"),te&&!V&&ba()}function Ia(){(w||ze).style.height=i[oe+Z]-i[oe]+"px"}function Fa(){var e=Y?(Y+J)*Q/U:Q/Z;return Math.min(Math.ceil(e),Q)}function za(){if(_e&&!zt&&ye!==Ee){var e=Ee,t=ye,n=showElement;for(ye<Ee&&(e=ye,t=Ee,n=hideElement);e<t;)n(ge[e]),e++;Ee=ye}}function ue(e){return{container:$,slideItems:G,navContainer:z,navItems:ge,controlsContainer:H,hasControls:It,prevButton:I,nextButton:F,items:Z,slideBy:$e,cloneCount:ae,slideCount:Q,slideCountNew:re,index:oe,indexCached:mt,displayIndex:gn(),navCurrentIndex:xe,navCurrentIndexCached:be,pages:ye,pagesCached:Ee,sheet:ne,isOn:je,event:e||{}}}p&&console.warn("No slides found in",D.container)};$A.tns=tns;
\ No newline at end of file
diff --git a/4X/Standard/Min/Velocity.js b/4X/Standard/Min/Velocity.js
index 9116e404..49789558 100644
--- a/4X/Standard/Min/Velocity.js
+++ b/4X/Standard/Min/Velocity.js
@@ -1,4 +1,4 @@
 /*@license
  VelocityJS.org (1.5.2). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License */
 /*! VelocityJS.org jQuery Shim (1.0.1). (C) 2014 The jQuery Foundation. MIT @license: en.wikipedia.org/wiki/MIT_License. */
-!function(t){"use strict";if(!t.jQuery){for(var u=function(e,t){return new u.fn.init(e,t)},n=(u.isWindow=function(e){return e&&e===e.window},u.type=function(e){return e?"object"==typeof e||"function"==typeof e?r[i.call(e)]||"object":typeof e:e+""},u.isArray=Array.isArray||function(e){return"array"===u.type(e)},u.isPlainObject=function(e){if(!e||"object"!==u.type(e)||e.nodeType||u.isWindow(e))return!1;try{if(e.constructor&&!a.call(e,"constructor")&&!a.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(e){return!1}for(var t in e);return void 0===t||a.call(e,t)},u.each=function(e,t,r){var a=0,n=e.length,i=s(e);if(r){if(i)for(;a<n&&!1!==t.apply(e[a],r);a++);else for(a in e)if(e.hasOwnProperty(a)&&!1===t.apply(e[a],r))break}else if(i)for(;a<n&&!1!==t.call(e[a],a,e[a]);a++);else for(a in e)if(e.hasOwnProperty(a)&&!1===t.call(e[a],a,e[a]))break;return e},u.data=function(e,t,r){var a;return void 0===r?(a=(a=e[u.expando])&&n[a],void 0===t?a:a&&t in a?a[t]:void 0):void 0!==t?(a=e[u.expando]||(e[u.expando]=++u.uuid),n[a]=n[a]||{},n[a][t]=r):void 0},u.removeData=function(e,t){var e=e[u.expando],r=e&&n[e];r&&(t?u.each(t,function(e,t){delete r[t]}):delete n[e])},u.extend=function(){var e,t,r,a,n,i=arguments[0]||{},o=1,s=arguments.length,l=!1;for("boolean"==typeof i&&(l=i,i=arguments[o]||{},o++),"object"!=typeof i&&"function"!==u.type(i)&&(i={}),o===s&&(i=this,o--);o<s;o++)if(a=arguments[o])for(r in a)a.hasOwnProperty(r)&&(n=i[r],i!==(t=a[r]))&&(l&&t&&(u.isPlainObject(t)||(e=u.isArray(t)))?(n=e?(e=!1,n&&u.isArray(n)?n:[]):n&&u.isPlainObject(n)?n:{},i[r]=u.extend(l,n,t)):void 0!==t&&(i[r]=t));return i},u.queue=function(e,t,r){var a;if(e)return a=u.data(e,t=(t||"fx")+"queue"),r?(!a||u.isArray(r)?a=u.data(e,t,function(e,t){if(t=t||[],e)if(s(Object(e))){for(var r=t,a="string"==typeof e?[e]:e,n=+a.length,i=0,o=r.length;i<n;)r[o++]=a[i++];if(n!=n)for(;void 0!==a[i];)r[o++]=a[i++];r.length=o}else[].push.call(t,e);return t}(r)):a.push(r),a):a||[]},u.dequeue=function(e,n){u.each(e.nodeType?[e]:e,function(e,t){n=n||"fx";var r=u.queue(t,n),a=r.shift();(a="inprogress"===a?r.shift():a)&&("fx"===n&&r.unshift("inprogress"),a.call(t,function(){u.dequeue(t,n)}))})},u.fn=u.prototype={init:function(e){if(e.nodeType)return this[0]=e,this;throw new Error("Not a DOM node.")},offset:function(){var e=this[0].getBoundingClientRect?this[0].getBoundingClientRect():{top:0,left:0};return{top:e.top+(t.pageYOffset||document.scrollTop||0)-(document.clientTop||0),left:e.left+(t.pageXOffset||document.scrollLeft||0)-(document.clientLeft||0)}},position:function(){var e=this[0],t=function(e){for(var t=e.offsetParent;t&&"html"!==t.nodeName.toLowerCase()&&t.style&&"static"===t.style.position.toLowerCase();)t=t.offsetParent;return t||document}(e),r=this.offset(),a=/^(?:body|html)$/i.test(t.nodeName)?{top:0,left:0}:u(t).offset();return r.top-=parseFloat(e.style.marginTop)||0,r.left-=parseFloat(e.style.marginLeft)||0,t.style&&(a.top+=parseFloat(t.style.borderTopWidth)||0,a.left+=parseFloat(t.style.borderLeftWidth)||0),{top:r.top-a.top,left:r.left-a.left}}},{}),r=(u.expando="velocity"+(new Date).getTime(),u.uuid=0,{}),a=r.hasOwnProperty,i=r.toString,e="Boolean Number String Function Array Date RegExp Object Error".split(" "),o=0;o<e.length;o++)r["[object "+e[o]+"]"]=e[o].toLowerCase();u.fn.init.prototype=u.fn,t.Velocity={Utilities:u}}function s(e){var t=e.length,r=u.type(e);return"function"!==r&&!u.isWindow(e)&&(!(1!==e.nodeType||!t)||"array"===r||0===t||"number"==typeof t&&0<t&&t-1 in e)}}(window),function(e){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e():"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";var a,e,t=window.jQuery||window.Zepto||window,$=window,B=window?window.document:void 0,W=void 0,V=function(){if(B.documentMode)return B.documentMode;for(var e=7;4<e;e--){var t=B.createElement("div");if(t.innerHTML="\x3c!--[if IE "+e+"]><span></span><![endif]--\x3e",t.getElementsByTagName("span").length)return t=null,e}return W}(),r=(a=0,$.webkitRequestAnimationFrame||$.mozRequestAnimationFrame||function(e){var t=(new Date).getTime(),r=Math.max(0,16-(t-a));return a=t+r,setTimeout(function(){e(t+r)},r)}),k=("function"!=typeof(s=$.performance||{}).now&&(e=s.timing&&s.timing.navigationStart?s.timing.navigationStart:(new Date).getTime(),s.now=function(){return(new Date).getTime()-e}),s);function N(){return Array.prototype.includes?function(e,t){return e.includes(t)}:Array.prototype.indexOf?function(e,t){return 0<=e.indexOf(t)}:function(e,t){for(var r=0;r<e.length;r++)if(e[r]===t)return!0;return!1}}var n=function(){var s=Array.prototype.slice;try{return s.call(B.documentElement),s}catch(e){return function(e,t){var r=this.length;if("number"!=typeof e&&(e=0),"number"!=typeof t&&(t=r),this.slice)return s.call(this,e,t);var a,n=[],i=0<=e?e:Math.max(0,r+e),o=(t<0?r+t:Math.min(t,r))-i;if(0<o)if(n=new Array(o),this.charAt)for(a=0;a<o;a++)n[a]=this.charAt(i+a);else for(a=0;a<o;a++)n[a]=this[i+a];return n}}}();function h(e){return Q.isWrapped(e)?e=n.call(e):Q.isNode(e)&&(e=[e]),e}var I,i,o,D,y,G,T,Q={isNumber:function(e){return"number"==typeof e},isString:function(e){return"string"==typeof e},isArray:Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)},isFunction:function(e){return"[object Function]"===Object.prototype.toString.call(e)},isNode:function(e){return e&&e.nodeType},isWrapped:function(e){return e&&e!==$&&Q.isNumber(e.length)&&!Q.isString(e)&&!Q.isFunction(e)&&!Q.isNode(e)&&(0===e.length||Q.isNode(e[0]))},isSVG:function(e){return $.SVGElement&&e instanceof $.SVGElement},isEmptyObject:function(e){for(var t in e)if(e.hasOwnProperty(t))return!1;return!0}},s=!1;if(t.fn&&t.fn.jquery?(I=t,s=!0):I=$.Velocity.Utilities,V<=8&&!s)throw new Error("Velocity: IE8 and below require jQuery to be loaded before Velocity.");if(!(V<=7))return i="swing",G={State:{isMobile:/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test($.navigator.userAgent),isAndroid:/Android/i.test($.navigator.userAgent),isGingerbread:/Android 2\.3\.[3-7]/i.test($.navigator.userAgent),isChrome:$.chrome,isFirefox:/Firefox/i.test($.navigator.userAgent),prefixElement:B.createElement("div"),prefixMatches:{},scrollAnchor:null,scrollPropertyLeft:null,scrollPropertyTop:null,isTicking:!1,calls:[],delayedElements:{count:0}},CSS:{},Utilities:I,Redirects:{},Easings:{},Promise:$.Promise,defaults:{queue:"",duration:400,easing:i,begin:W,complete:W,progress:W,display:W,visibility:W,loop:!1,delay:!1,mobileHA:!0,_cacheValues:!0,promiseRejectEmpty:!0},init:function(e){I.data(e,"velocity",{isSVG:Q.isSVG(e),isAnimating:!1,computedStyle:null,tweensContainer:null,rootPropertyValueCache:{},transformCache:{}})},hook:null,mock:!1,version:{major:1,minor:5,patch:2},debug:!1,timestamp:!0,pauseAll:function(r){var a=(new Date).getTime();I.each(G.State.calls,function(e,t){if(t){if(r!==W&&(t[2].queue!==r||!1===t[2].queue))return!0;t[5]={resume:!1}}}),I.each(G.State.delayedElements,function(e,t){t&&v(t,a)})},resumeAll:function(r){var e=(new Date).getTime();I.each(G.State.calls,function(e,t){if(t){if(r!==W&&(t[2].queue!==r||!1===t[2].queue))return!0;t[5]&&(t[5].resume=!0)}}),I.each(G.State.delayedElements,function(e,t){t&&b(t)})}},$.pageYOffset!==W?(G.State.scrollAnchor=$,G.State.scrollPropertyLeft="pageXOffset",G.State.scrollPropertyTop="pageYOffset"):(G.State.scrollAnchor=B.documentElement||B.body.parentNode||B.body,G.State.scrollPropertyLeft="scrollLeft",G.State.scrollPropertyTop="scrollTop"),o=function e(t,r,a){var n,i,o,s,l,u,c,p,d,f,g={x:-1,v:0,tension:null,friction:null},m=[0],h=0;for(t=parseFloat(t)||500,r=parseFloat(r)||20,a=a||null,g.tension=t,g.friction=r,i=(n=null!==a)?(h=e(t,r))/a*.016:.016;;)if(l=i,u=f=d=p=c=u=void 0,u={dx:(s=o||g).v,dv:x(s)},c=w(s,.5*l,u),p=w(s,.5*l,c),d=w(s,l,p),f=1/6*(u.dx+2*(c.dx+p.dx)+d.dx),u=1/6*(u.dv+2*(c.dv+p.dv)+d.dv),s.x=s.x+f*l,s.v=s.v+u*l,o=s,m.push(1+o.x),h+=16,!(1e-4<Math.abs(o.x)&&1e-4<Math.abs(o.v)))break;return n?function(e){return m[e*(m.length-1)|0]}:h},G.Easings={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},spring:function(e){return 1-Math.cos(4.5*e*Math.PI)*Math.exp(6*-e)}},I.each([["ease",[.25,.1,.25,1]],["ease-in",[.42,0,1,1]],["ease-out",[0,0,.58,1]],["ease-in-out",[.42,0,.58,1]],["easeInSine",[.47,0,.745,.715]],["easeOutSine",[.39,.575,.565,1]],["easeInOutSine",[.445,.05,.55,.95]],["easeInQuad",[.55,.085,.68,.53]],["easeOutQuad",[.25,.46,.45,.94]],["easeInOutQuad",[.455,.03,.515,.955]],["easeInCubic",[.55,.055,.675,.19]],["easeOutCubic",[.215,.61,.355,1]],["easeInOutCubic",[.645,.045,.355,1]],["easeInQuart",[.895,.03,.685,.22]],["easeOutQuart",[.165,.84,.44,1]],["easeInOutQuart",[.77,0,.175,1]],["easeInQuint",[.755,.05,.855,.06]],["easeOutQuint",[.23,1,.32,1]],["easeInOutQuint",[.86,0,.07,1]],["easeInExpo",[.95,.05,.795,.035]],["easeOutExpo",[.19,1,.22,1]],["easeInOutExpo",[1,0,0,1]],["easeInCirc",[.6,.04,.98,.335]],["easeOutCirc",[.075,.82,.165,1]],["easeInOutCirc",[.785,.135,.15,.86]]],function(e,t){G.Easings[t[0]]=l.apply(null,t[1])}),(D=G.CSS={RegEx:{isHex:/^#([A-f\d]{3}){1,2}$/i,valueUnwrap:/^[A-z]+\((.*)\)$/i,wrappedValueAlreadyExtracted:/[0-9.]+ [0-9.]+ [0-9.]+( [0-9.]+)?/,valueSplit:/([A-z]+\(.+\))|(([A-z0-9#-.]+?)(?=\s|$))/gi},Lists:{colors:["fill","stroke","stopColor","color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],transformsBase:["translateX","translateY","scale","scaleX","scaleY","skewX","skewY","rotateZ"],transforms3D:["transformPerspective","translateZ","scaleZ","rotateX","rotateY"],units:["%","em","ex","ch","rem","vw","vh","vmin","vmax","cm","mm","Q","in","pc","pt","px","deg","grad","rad","turn","s","ms"],colorNames:{aliceblue:"240,248,255",antiquewhite:"250,235,215",aquamarine:"127,255,212",aqua:"0,255,255",azure:"240,255,255",beige:"245,245,220",bisque:"255,228,196",black:"0,0,0",blanchedalmond:"255,235,205",blueviolet:"138,43,226",blue:"0,0,255",brown:"165,42,42",burlywood:"222,184,135",cadetblue:"95,158,160",chartreuse:"127,255,0",chocolate:"210,105,30",coral:"255,127,80",cornflowerblue:"100,149,237",cornsilk:"255,248,220",crimson:"220,20,60",cyan:"0,255,255",darkblue:"0,0,139",darkcyan:"0,139,139",darkgoldenrod:"184,134,11",darkgray:"169,169,169",darkgrey:"169,169,169",darkgreen:"0,100,0",darkkhaki:"189,183,107",darkmagenta:"139,0,139",darkolivegreen:"85,107,47",darkorange:"255,140,0",darkorchid:"153,50,204",darkred:"139,0,0",darksalmon:"233,150,122",darkseagreen:"143,188,143",darkslateblue:"72,61,139",darkslategray:"47,79,79",darkturquoise:"0,206,209",darkviolet:"148,0,211",deeppink:"255,20,147",deepskyblue:"0,191,255",dimgray:"105,105,105",dimgrey:"105,105,105",dodgerblue:"30,144,255",firebrick:"178,34,34",floralwhite:"255,250,240",forestgreen:"34,139,34",fuchsia:"255,0,255",gainsboro:"220,220,220",ghostwhite:"248,248,255",gold:"255,215,0",goldenrod:"218,165,32",gray:"128,128,128",grey:"128,128,128",greenyellow:"173,255,47",green:"0,128,0",honeydew:"240,255,240",hotpink:"255,105,180",indianred:"205,92,92",indigo:"75,0,130",ivory:"255,255,240",khaki:"240,230,140",lavenderblush:"255,240,245",lavender:"230,230,250",lawngreen:"124,252,0",lemonchiffon:"255,250,205",lightblue:"173,216,230",lightcoral:"240,128,128",lightcyan:"224,255,255",lightgoldenrodyellow:"250,250,210",lightgray:"211,211,211",lightgrey:"211,211,211",lightgreen:"144,238,144",lightpink:"255,182,193",lightsalmon:"255,160,122",lightseagreen:"32,178,170",lightskyblue:"135,206,250",lightslategray:"119,136,153",lightsteelblue:"176,196,222",lightyellow:"255,255,224",limegreen:"50,205,50",lime:"0,255,0",linen:"250,240,230",magenta:"255,0,255",maroon:"128,0,0",mediumaquamarine:"102,205,170",mediumblue:"0,0,205",mediumorchid:"186,85,211",mediumpurple:"147,112,219",mediumseagreen:"60,179,113",mediumslateblue:"123,104,238",mediumspringgreen:"0,250,154",mediumturquoise:"72,209,204",mediumvioletred:"199,21,133",midnightblue:"25,25,112",mintcream:"245,255,250",mistyrose:"255,228,225",moccasin:"255,228,181",navajowhite:"255,222,173",navy:"0,0,128",oldlace:"253,245,230",olivedrab:"107,142,35",olive:"128,128,0",orangered:"255,69,0",orange:"255,165,0",orchid:"218,112,214",palegoldenrod:"238,232,170",palegreen:"152,251,152",paleturquoise:"175,238,238",palevioletred:"219,112,147",papayawhip:"255,239,213",peachpuff:"255,218,185",peru:"205,133,63",pink:"255,192,203",plum:"221,160,221",powderblue:"176,224,230",purple:"128,0,128",red:"255,0,0",rosybrown:"188,143,143",royalblue:"65,105,225",saddlebrown:"139,69,19",salmon:"250,128,114",sandybrown:"244,164,96",seagreen:"46,139,87",seashell:"255,245,238",sienna:"160,82,45",silver:"192,192,192",skyblue:"135,206,235",slateblue:"106,90,205",slategray:"112,128,144",snow:"255,250,250",springgreen:"0,255,127",steelblue:"70,130,180",tan:"210,180,140",teal:"0,128,128",thistle:"216,191,216",tomato:"255,99,71",turquoise:"64,224,208",violet:"238,130,238",wheat:"245,222,179",whitesmoke:"245,245,245",white:"255,255,255",yellowgreen:"154,205,50",yellow:"255,255,0"}},Hooks:{templates:{textShadow:["Color X Y Blur","black 0px 0px 0px"],boxShadow:["Color X Y Blur Spread","black 0px 0px 0px 0px"],clip:["Top Right Bottom Left","0px 0px 0px 0px"],backgroundPosition:["X Y","0% 0%"],transformOrigin:["X Y Z","50% 50% 0px"],perspectiveOrigin:["X Y","50% 50%"]},registered:{},register:function(){for(var e,t,r,a,n,i=0;i<D.Lists.colors.length;i++){var o="color"===D.Lists.colors[i]?"0 0 0 1":"255 255 255 1";D.Hooks.templates[D.Lists.colors[i]]=["Red Green Blue Alpha",o]}if(V)for(e in D.Hooks.templates)D.Hooks.templates.hasOwnProperty(e)&&(r=(t=D.Hooks.templates[e])[0].split(" "),a=t[1].match(D.RegEx.valueSplit),"Color"===r[0])&&(r.push(r.shift()),a.push(a.shift()),D.Hooks.templates[e]=[r.join(" "),a.join(" ")]);for(e in D.Hooks.templates)if(D.Hooks.templates.hasOwnProperty(e))for(var s in r=(t=D.Hooks.templates[e])[0].split(" "))r.hasOwnProperty(s)&&(n=e+r[s],s=s,D.Hooks.registered[n]=[e,s])},getRoot:function(e){var t=D.Hooks.registered[e];return t?t[0]:e},getUnit:function(e,t){e=(e.substr(t||0,5).match(/^[a-z%]+/)||[])[0]||"";return e&&N(D.Lists.units)?e:""},fixColors:function(e){return e.replace(/(rgba?\(\s*)?(\b[a-z]+\b)/g,function(e,t,r){return D.Lists.colorNames.hasOwnProperty(r)?(t||"rgba(")+D.Lists.colorNames[r]+(t?"":",1)"):t+r})},cleanRootPropertyValue:function(e,t){return D.RegEx.valueUnwrap.test(t)&&(t=t.match(D.RegEx.valueUnwrap)[1]),t=D.Values.isCSSNullValue(t)?D.Hooks.templates[e][1]:t},extractValue:function(e,t){var r,e=D.Hooks.registered[e];return e?(r=e[0],e=e[1],(t=D.Hooks.cleanRootPropertyValue(r,t)).toString().match(D.RegEx.valueSplit)[e]):t},injectValue:function(e,t,r){var a,e=D.Hooks.registered[e];return e?(a=e[0],e=e[1],(a=(r=D.Hooks.cleanRootPropertyValue(a,r)).toString().match(D.RegEx.valueSplit))[e]=t,a.join(" ")):r}},Normalizations:{registered:{clip:function(e,t,r){switch(e){case"name":return"clip";case"extract":var a=!D.RegEx.wrappedValueAlreadyExtracted.test(r)&&(a=r.toString().match(D.RegEx.valueUnwrap))?a[1].replace(/,(\s+)?/g," "):r;return a;case"inject":return"rect("+r+")"}},blur:function(e,t,r){switch(e){case"name":return G.State.isFirefox?"filter":"-webkit-filter";case"extract":var a,n=parseFloat(r);return n=n||0===n?n:(a=r.toString().match(/blur\(([0-9]+[A-z]+)\)/i))?a[1]:0;case"inject":return parseFloat(r)?"blur("+r+")":"none"}},opacity:function(e,t,r){if(V<=8)switch(e){case"name":return"filter";case"extract":var a=r.toString().match(/alpha\(opacity=(.*)\)/i);return r=a?a[1]/100:1;case"inject":return(t.style.zoom=1)<=parseFloat(r)?"":"alpha(opacity="+parseInt(100*parseFloat(r),10)+")"}else switch(e){case"name":return"opacity";case"extract":case"inject":return r}}},register:function(){V&&!(9<V)||G.State.isGingerbread||(D.Lists.transformsBase=D.Lists.transformsBase.concat(D.Lists.transforms3D));for(var e=0;e<D.Lists.transformsBase.length;e++)!function(){var n=D.Lists.transformsBase[e];D.Normalizations.registered[n]=function(e,t,r){switch(e){case"name":return"transform";case"extract":return H(t)===W||H(t).transformCache[n]===W?/^scale/i.test(n)?1:0:H(t).transformCache[n].replace(/[()]/g,"");case"inject":var a=!1;switch(n.substr(0,n.length-1)){case"translate":a=!/(%|px|em|rem|vw|vh|\d)$/i.test(r);break;case"scal":case"scale":G.State.isAndroid&&H(t).transformCache[n]===W&&r<1&&(r=1),a=!/(\d)$/i.test(r);break;case"skew":case"rotate":a=!/(deg|\d)$/i.test(r)}return a||(H(t).transformCache[n]="("+r+")"),H(t).transformCache[n]}}}();for(var t=0;t<D.Lists.colors.length;t++)!function(){var i=D.Lists.colors[t];D.Normalizations.registered[i]=function(e,t,r){switch(e){case"name":return i;case"extract":var a,n=D.RegEx.wrappedValueAlreadyExtracted.test(r)?r:(n={black:"rgb(0, 0, 0)",blue:"rgb(0, 0, 255)",gray:"rgb(128, 128, 128)",green:"rgb(0, 128, 0)",red:"rgb(255, 0, 0)",white:"rgb(255, 255, 255)"},/^[A-z]+$/i.test(r)?a=n[r]!==W?n[r]:n.black:D.RegEx.isHex.test(r)?a="rgb("+D.Values.hexToRgb(r).join(" ")+")":/^rgba?\(/i.test(r)||(a=n.black),(a||r).toString().match(D.RegEx.valueUnwrap)[1].replace(/,(\s+)?/g," "));return(!V||8<V)&&3===n.split(" ").length&&(n+=" 1"),n;case"inject":return/^rgb/.test(r)?r:(V<=8?4===r.split(" ").length&&(r=r.split(/\s+/).slice(0,3).join(" ")):3===r.split(" ").length&&(r+=" 1"),(V<=8?"rgb":"rgba")+"("+r.replace(/\s+/g,",").replace(/\.(\d)+(?=,)/g,"")+")")}}}();function i(e,t,r){if("border-box"===D.getPropertyValue(t,"boxSizing").toString().toLowerCase()!==(r||!1))return 0;for(var a,n=0,e="width"===e?["Left","Right"]:["Top","Bottom"],i=["padding"+e[0],"padding"+e[1],"border"+e[0]+"Width","border"+e[1]+"Width"],o=0;o<i.length;o++)a=parseFloat(D.getPropertyValue(t,i[o])),isNaN(a)||(n+=a);return r?-n:n}function r(a,n){return function(e,t,r){switch(e){case"name":return a;case"extract":return parseFloat(r)+i(a,t,n);case"inject":return parseFloat(r)-i(a,t,n)+"px"}}}D.Normalizations.registered.innerWidth=r("width",!0),D.Normalizations.registered.innerHeight=r("height",!0),D.Normalizations.registered.outerWidth=r("width"),D.Normalizations.registered.outerHeight=r("height")}},Names:{camelCase:function(e){return e.replace(/-(\w)/g,function(e,t){return t.toUpperCase()})},SVGAttribute:function(e){var t="width|height|x|y|cx|cy|r|rx|ry|x1|x2|y1|y2";return(V||G.State.isAndroid&&!G.State.isChrome)&&(t+="|transform"),new RegExp("^("+t+")$","i").test(e)},prefixCheck:function(e){if(G.State.prefixMatches[e])return[G.State.prefixMatches[e],!0];for(var t=["","Webkit","Moz","ms","O"],r=0,a=t.length;r<a;r++){var n=0===r?e:t[r]+e.replace(/^\w/,function(e){return e.toUpperCase()});if(Q.isString(G.State.prefixElement.style[n]))return[G.State.prefixMatches[e]=n,!0]}return[e,!1]}},Values:{hexToRgb:function(e){return e=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(e,t,r,a){return t+t+r+r+a+a}),(e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e))?[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]:[0,0,0]},isCSSNullValue:function(e){return!e||/^(none|auto|transparent|(rgba\(0, ?0, ?0, ?0\)))$/i.test(e)},getUnitType:function(e){return/^(rotate|skew)/i.test(e)?"deg":/(^(scale|scaleX|scaleY|scaleZ|alpha|flexGrow|flexHeight|zIndex|fontWeight)$)|((opacity|red|green|blue|alpha)$)/i.test(e)?"":"px"},getDisplayType:function(e){e=e&&e.tagName.toString().toLowerCase();return/^(b|big|i|small|tt|abbr|acronym|cite|code|dfn|em|kbd|strong|samp|var|a|bdo|br|img|map|object|q|script|span|sub|sup|button|input|label|select|textarea)$/i.test(e)?"inline":/^(li)$/i.test(e)?"list-item":/^(tr)$/i.test(e)?"table-row":/^(table)$/i.test(e)?"table":/^(tbody)$/i.test(e)?"table-row-group":"block"},addClass:function(e,t){var r;e&&(e.classList?e.classList.add(t):Q.isString(e.className)?e.className+=(e.className.length?" ":"")+t:(r=e.getAttribute(V<=7?"className":"class")||"",e.setAttribute("class",r+(r?" ":"")+t)))},removeClass:function(e,t){var r;e&&(e.classList?e.classList.remove(t):Q.isString(e.className)?e.className=e.className.toString().replace(new RegExp("(^|\\s)"+t.split(" ").join("|")+"(\\s|$)","gi")," "):(r=e.getAttribute(V<=7?"className":"class")||"",e.setAttribute("class",r.replace(new RegExp("(^|s)"+t.split(" ").join("|")+"(s|$)","gi")," "))))}},getPropertyValue:function(e,t,r,o){function s(e,t){var r=0;if(V<=8)r=I.css(e,t);else{var a,n=!1,i=(/^(width|height)$/.test(t)&&0===D.getPropertyValue(e,"display")&&(n=!0,D.setPropertyValue(e,"display",D.Values.getDisplayType(e))),function(){n&&D.setPropertyValue(e,"display","none")});if(!o){if("height"===t&&"border-box"!==D.getPropertyValue(e,"boxSizing").toString().toLowerCase())return a=e.offsetHeight-(parseFloat(D.getPropertyValue(e,"borderTopWidth"))||0)-(parseFloat(D.getPropertyValue(e,"borderBottomWidth"))||0)-(parseFloat(D.getPropertyValue(e,"paddingTop"))||0)-(parseFloat(D.getPropertyValue(e,"paddingBottom"))||0),i(),a;if("width"===t&&"border-box"!==D.getPropertyValue(e,"boxSizing").toString().toLowerCase())return a=e.offsetWidth-(parseFloat(D.getPropertyValue(e,"borderLeftWidth"))||0)-(parseFloat(D.getPropertyValue(e,"borderRightWidth"))||0)-(parseFloat(D.getPropertyValue(e,"paddingLeft"))||0)-(parseFloat(D.getPropertyValue(e,"paddingRight"))||0),i(),a}a=H(e)===W?$.getComputedStyle(e,null):H(e).computedStyle?H(e).computedStyle:H(e).computedStyle=$.getComputedStyle(e,null),"borderColor"===t&&(t="borderTopColor"),""!==(r=9===V&&"filter"===t?a.getPropertyValue(t):a[t])&&null!==r||(r=e.style[t]),i()}return r="auto"===r&&/^(top|right|bottom|left)$/i.test(t)&&("fixed"===(a=s(e,"position"))||"absolute"===a&&/top|left/i.test(t))?I(e).position()[t]+"px":r}var a,n,i;if(D.Hooks.registered[t]?(a=D.Hooks.getRoot(i=t),r===W&&(r=D.getPropertyValue(e,D.Names.prefixCheck(a)[0])),D.Normalizations.registered[a]&&(r=D.Normalizations.registered[a]("extract",e,r)),a=D.Hooks.extractValue(i,r)):D.Normalizations.registered[t]&&("transform"!==(i=D.Normalizations.registered[t]("name",e))&&(n=s(e,D.Names.prefixCheck(i)[0]),D.Values.isCSSNullValue(n))&&D.Hooks.templates[t]&&(n=D.Hooks.templates[t][1]),a=D.Normalizations.registered[t]("extract",e,n)),!/^[\d-]/.test(a)){r=H(e);if(r&&r.isSVG&&D.Names.SVGAttribute(t))if(/^(height|width)$/i.test(t))try{a=e.getBBox()[t]}catch(e){a=0}else a=e.getAttribute(t);else a=s(e,D.Names.prefixCheck(t)[0])}return D.Values.isCSSNullValue(a)&&(a=0),2<=G.debug&&console.log("Get "+t+": "+a),a},setPropertyValue:function(e,t,r,a,n){var i,o=t;if("scroll"===t)n.container?n.container["scroll"+n.direction]=r:"Left"===n.direction?$.scrollTo(r,n.alternateValue):$.scrollTo(n.alternateValue,r);else if(D.Normalizations.registered[t]&&"transform"===D.Normalizations.registered[t]("name",e))D.Normalizations.registered[t]("inject",e,r),o="transform",r=H(e).transformCache[t];else{if(D.Hooks.registered[t]&&(n=t,i=D.Hooks.getRoot(t),a=a||D.getPropertyValue(e,i),r=D.Hooks.injectValue(n,r,a),t=i),D.Normalizations.registered[t]&&(r=D.Normalizations.registered[t]("inject",e,r),t=D.Normalizations.registered[t]("name",e)),o=D.Names.prefixCheck(t)[0],V<=8)try{e.style[o]=r}catch(e){G.debug&&console.log("Browser does not support ["+r+"] for ["+o+"]")}else{n=H(e);n&&n.isSVG&&D.Names.SVGAttribute(t)?e.setAttribute(t,r):e.style[o]=r}2<=G.debug&&console.log("Set "+t+" ("+o+"): "+r)}return[o,r]},flushTransformCache:function(t){var r,a,n,i="",e=H(t);(V||G.State.isAndroid&&!G.State.isChrome)&&e&&e.isSVG?(r={translate:[(e=function(e){return parseFloat(D.getPropertyValue(t,e))})("translateX"),e("translateY")],skewX:[e("skewX")],skewY:[e("skewY")],scale:1!==e("scale")?[e("scale"),e("scale")]:[e("scaleX"),e("scaleY")],rotate:[e("rotateZ"),0,0]},I.each(H(t).transformCache,function(e){/^translate/i.test(e)?e="translate":/^scale/i.test(e)?e="scale":/^rotate/i.test(e)&&(e="rotate"),r[e]&&(i+=e+"("+r[e].join(" ")+") ",delete r[e])})):(I.each(H(t).transformCache,function(e){if(a=H(t).transformCache[e],"transformPerspective"===e)return n=a,!0;i+=(e=9===V&&"rotateZ"===e?"rotate":e)+a+" "}),n&&(i="perspective"+n+" "+i)),D.setPropertyValue(t,"transform",i)}}).Hooks.register(),D.Normalizations.register(),G.hook=function(e,a,n){var i;return e=h(e),I.each(e,function(e,t){var r;H(t)===W&&G.init(t),n===W?i===W&&(i=D.getPropertyValue(t,a)):("transform"===(r=D.setPropertyValue(t,a,n))[0]&&G.CSS.flushTransformCache(t),i=r)}),i},(G=I.extend(y=function(){function e(){return t?k.promise||null:r}var t,r,a,P,V,n=arguments[0]&&(arguments[0].p||I.isPlainObject(arguments[0].properties)&&!arguments[0].properties.names||Q.isString(arguments[0].properties)),k=(Q.isWrapped(this)?(t=!1,a=0,r=P=this):(t=!0,a=1,P=n?arguments[0].elements||arguments[0].e:arguments[0]),{promise:null,resolver:null,rejecter:null});if(t&&G.Promise&&(k.promise=new G.Promise(function(e,t){k.resolver=e,k.rejecter=t})),F=n?(V=arguments[0].properties||arguments[0].p,arguments[0].options||arguments[0].o):(V=arguments[a],arguments[a+1]),P=h(P)){var T,i,o,s,l,C=P.length,A=0;if(!/^(stop|finish|finishAll|pause|resume)$/i.test(V)&&!I.isPlainObject(F))for(var F={},u=a+1;u<arguments.length;u++)Q.isArray(arguments[u])||!/^(fast|normal|slow)$/i.test(arguments[u])&&!/^\d/.test(arguments[u])?Q.isString(arguments[u])||Q.isArray(arguments[u])?F.easing=arguments[u]:Q.isFunction(arguments[u])&&(F.complete=arguments[u]):F.duration=arguments[u];switch(V){case"scroll":T="scroll";break;case"reverse":T="reverse";break;case"pause":var c=(new Date).getTime();return I.each(P,function(e,t){v(t,c)}),I.each(G.State.calls,function(e,a){var n=!1;a&&I.each(a[1],function(e,r){var t=F===W?"":F;return!0!==t&&a[2].queue!==t&&(F!==W||!1!==a[2].queue)||(I.each(P,function(e,t){if(t===r)return a[5]={resume:!1},!(n=!0)}),!n&&void 0)})}),e();case"resume":return I.each(P,function(e,t){b(t)}),I.each(G.State.calls,function(e,a){var n=!1;a&&I.each(a[1],function(e,r){var t=F===W?"":F;return!0!==t&&a[2].queue!==t&&(F!==W||!1!==a[2].queue)||!a[5]||(I.each(P,function(e,t){if(t===r)return a[5].resume=!0,!(n=!0)}),!n&&void 0)})}),e();case"finish":case"finishAll":case"stop":I.each(P,function(e,t){H(t)&&H(t).delayTimer&&(clearTimeout(H(t).delayTimer.setTimeout),H(t).delayTimer.next&&H(t).delayTimer.next(),delete H(t).delayTimer),"finishAll"!==V||!0!==F&&!Q.isString(F)||(I.each(I.queue(t,Q.isString(F)?F:""),function(e,t){Q.isFunction(t)&&t()}),I.queue(t,Q.isString(F)?F:"",[]))});var p=[];return I.each(G.State.calls,function(n,i){i&&I.each(i[1],function(e,r){var a=F===W?"":F;if(!0!==a&&i[2].queue!==a&&(F!==W||!1!==i[2].queue))return!0;I.each(P,function(e,t){t===r&&(!0!==F&&!Q.isString(F)||(I.each(I.queue(t,Q.isString(F)?F:""),function(e,t){Q.isFunction(t)&&t(null,!0)}),I.queue(t,Q.isString(F)?F:"",[])),"stop"===V?((t=H(t))&&t.tweensContainer&&(!0===a||""===a)&&I.each(t.tweensContainer,function(e,t){t.endValue=t.currentValue}),p.push(n)):"finish"!==V&&"finishAll"!==V||(i[2].duration=1))})})}),"stop"===V&&(I.each(p,function(e,t){O(t,!0)}),k.promise)&&k.resolver(P),e();default:if(!I.isPlainObject(V)||Q.isEmptyObject(V))return Q.isString(V)&&G.Redirects[V]?(o=(i=I.extend({},F)).duration,s=i.delay||0,!0===i.backwards&&(P=I.extend(!0,[],P).reverse()),I.each(P,function(e,t){parseFloat(i.stagger)?i.delay=s+parseFloat(i.stagger)*e:Q.isFunction(i.stagger)&&(i.delay=s+i.stagger.call(t,e,C)),i.drag&&(i.duration=parseFloat(o)||(/^(callout|transition)/.test(V)?1e3:400),i.duration=Math.max(i.duration*(i.backwards?1-e/C:(e+1)/C),.75*i.duration,200)),G.Redirects[V].call(t,t,i||{},e,C,P,k.promise?k:W)})):(l="Velocity: First argument ("+V+") was not a property map, a known action, or a registered redirect. Aborting.",k.promise?k.rejecter(new Error(l)):$.console&&console.log(l)),e();T="start"}var M={lastParent:null,lastPosition:null,lastFontSize:null,lastPercentToPxWidth:null,lastPercentToPxHeight:null,lastEmToPx:null,remToPx:null,vwToPx:null,vhToPx:null},E=[],d=(I.each(P,function(e,t){Q.isNode(t)&&m(t,e)}),(i=I.extend({},G.defaults,F)).loop=parseInt(i.loop,10),2*i.loop-1);if(i.loop)for(var f=0;f<d;f++){var g={delay:i.delay,progress:i.progress};f===d-1&&(g.display=i.display,g.visibility=i.visibility,g.complete=i.complete),y(P,"reverse",g)}return e()}function m(q,S){var L,e,t,z=I.extend({},G.defaults,F),R={};switch(H(q)===W&&G.init(q),parseFloat(z.delay)&&!1!==z.queue&&I.queue(q,z.queue,function(e,t){if(!0===t)return!0;G.velocityQueueEntryFlag=!0;function r(){G.State.delayedElements[a]=!1,e()}var a,t=G.State.delayedElements.count++;G.State.delayedElements[t]=q,a=t;H(q).delayBegin=(new Date).getTime(),H(q).delay=parseFloat(z.delay),H(q).delayTimer={setTimeout:setTimeout(e,parseFloat(z.delay)),next:r}}),z.duration.toString().toLowerCase()){case"fast":z.duration=200;break;case"normal":z.duration=400;break;case"slow":z.duration=600;break;default:z.duration=parseFloat(z.duration)||1}function r(e){var O,j,t,r,a;if(z.begin&&0===A)try{z.begin.call(P,P)}catch(e){setTimeout(function(){throw e},1)}if("scroll"===T){var n,i,o,s=/^x$/i.test(z.axis)?"Left":"Top",l=parseFloat(z.offset)||0;z.container?Q.isWrapped(z.container)||Q.isNode(z.container)?(z.container=z.container[0]||z.container,o=(n=z.container["scroll"+s])+I(q).position()[s.toLowerCase()]+l):z.container=null:(n=G.State.scrollAnchor[G.State["scrollProperty"+s]],i=G.State.scrollAnchor[G.State["scrollProperty"+("Left"===s?"Top":"Left")]],o=I(q).offset()[s.toLowerCase()]+l),R={scroll:{rootPropertyValue:!1,startValue:n,currentValue:n,endValue:o,unitType:"",easing:z.easing,scrollData:{container:z.container,direction:s,alternateValue:i}},element:q},G.debug&&console.log("tweensContainer (scroll): ",R.scroll,q)}else if("reverse"===T){if(!(O=H(q)))return;if(!O.tweensContainer)return void I.dequeue(q,z.queue);for(var u in"none"===O.opts.display&&(O.opts.display="auto"),"hidden"===O.opts.visibility&&(O.opts.visibility="visible"),O.opts.loop=!1,O.opts.begin=null,O.opts.complete=null,F.easing||delete z.easing,F.duration||delete z.duration,z=I.extend({},O.opts,z),j=I.extend(!0,{},O?O.tweensContainer:null))j.hasOwnProperty(u)&&"element"!==u&&(t=j[u].startValue,j[u].startValue=j[u].currentValue=j[u].endValue,j[u].endValue=t,Q.isEmptyObject(F)||(j[u].easing=z.easing),G.debug)&&console.log("reverse tweensContainer ("+u+"): "+JSON.stringify(j[u]),q);R=j}else if("start"===T){(O=H(q))&&O.tweensContainer&&!0===O.isAnimating&&(j=O.tweensContainer);var c,p=function(e,t){var r=D.Hooks.getRoot(e),a=!1,n=t[0],i=t[1],o=t[2];if(O&&O.isSVG||"tween"===r||!1!==D.Names.prefixCheck(r)[1]||D.Normalizations.registered[r]!==W){(z.display!==W&&null!==z.display&&"none"!==z.display||z.visibility!==W&&"hidden"!==z.visibility)&&/opacity|filter/.test(e)&&!o&&0!==n&&(o=0),z._cacheValues&&j&&j[e]?(o===W&&(o=j[e].endValue+j[e].unitType),a=O.rootPropertyValueCache[r]):D.Hooks.registered[e]?o===W?(a=D.getPropertyValue(q,r),o=D.getPropertyValue(q,e,a)):a=D.Hooks.templates[r][1]:o===W&&(o=D.getPropertyValue(q,e));var s,l,u=!1,t=function(e,t){var t=(t||"0").toString().toLowerCase().replace(/[%A-z]+$/,function(e){return r=e,""}),r=r||D.Values.getUnitType(e);return[t,r]};if(o!==n&&Q.isString(o)&&Q.isString(n)){for(var c="",p=0,d=0,f=[],g=[],m=0,h=0,y=0,o=D.Hooks.fixColors(o),n=D.Hooks.fixColors(n);p<o.length&&d<n.length;){var v=o[p],b=n[d];if(/[\d\.-]/.test(v)&&/[\d\.-]/.test(b)){for(var x=v,w=b,S=".",P=".";++p<o.length;){if((v=o[p])===S)S="..";else if(!/\d/.test(v))break;x+=v}for(;++d<n.length;){if((b=n[d])===P)P="..";else if(!/\d/.test(b))break;w+=b}var V,k,T=D.Hooks.getUnit(o,p),C=D.Hooks.getUnit(n,d);p+=T.length,d+=C.length,T===C?x===w?c+=x+T:(c+="{"+f.length+(h?"!":"")+"}"+T,f.push(parseFloat(x)),g.push(parseFloat(w))):(V=parseFloat(x),k=parseFloat(w),c+=(m<5?"calc":"")+"("+(V?"{"+f.length+(h?"!":"")+"}":"0")+T+" + "+(k?"{"+(f.length+(V?1:0))+(h?"!":"")+"}":"0")+C+")",V&&(f.push(V),g.push(0)),k&&(f.push(0),g.push(k)))}else{if(v!==b){m=0;break}c+=v,p++,d++,0===m&&"c"===v||1===m&&"a"===v||2===m&&"l"===v||3===m&&"c"===v||4<=m&&"("===v?m++:(m&&m<5||4<=m&&")"===v&&--m<5)&&(m=0),0===h&&"r"===v||1===h&&"g"===v||2===h&&"b"===v||3===h&&"a"===v||3<=h&&"("===v?(3===h&&"a"===v&&(y=1),h++):y&&","===v?3<++y&&(h=y=0):(y&&h<(y?5:4)||(y?4:3)<=h&&")"===v&&--h<(y?5:4))&&(h=y=0)}}p===o.length&&d===n.length||(G.debug&&console.error('Trying to pattern match mis-matched strings ["'+n+'", "'+o+'"]'),c=W),c&&(f.length?(G.debug&&console.log('Pattern found "'+c+'" -> ',f,g,"["+o+","+n+"]"),o=f,n=g,s=l=""):c=W)}c||(o=(F=t(e,o))[0],l=F[1],n=(F=t(e,n))[0].replace(/^([+-\/*])=/,function(e,t){return u=t,""}),s=F[1],o=parseFloat(o)||0,n=parseFloat(n)||0,"%"===s&&(/^(fontSize|lineHeight)$/.test(e)?(n/=100,s="em"):/^scale/.test(e)?(n/=100,s=""):/(Red|Green|Blue)$/i.test(e)&&(n=n/100*255,s="")));var A,F,E,N;if(/[\/*]/.test(u))s=l;else if(l!==s&&0!==o)if(0===n)s=l;else{L=L||(t={myParent:q.parentNode||B.body,position:D.getPropertyValue(q,"position"),fontSize:D.getPropertyValue(q,"fontSize")},F=t.position===M.lastPosition&&t.myParent===M.lastParent,E=t.fontSize===M.lastFontSize,M.lastParent=t.myParent,M.lastPosition=t.position,M.lastFontSize=t.fontSize,N={},E&&F?(N.emToPx=M.lastEmToPx,N.percentToPxWidth=M.lastPercentToPxWidth,N.percentToPxHeight=M.lastPercentToPxHeight):(A=O&&O.isSVG?B.createElementNS("http://www.w3.org/2000/svg","rect"):B.createElement("div"),G.init(A),t.myParent.appendChild(A),I.each(["overflow","overflowX","overflowY"],function(e,t){G.CSS.setPropertyValue(A,t,"hidden")}),G.CSS.setPropertyValue(A,"position",t.position),G.CSS.setPropertyValue(A,"fontSize",t.fontSize),G.CSS.setPropertyValue(A,"boxSizing","content-box"),I.each(["minWidth","maxWidth","width","minHeight","maxHeight","height"],function(e,t){G.CSS.setPropertyValue(A,t,"100%")}),G.CSS.setPropertyValue(A,"paddingLeft","100em"),N.percentToPxWidth=M.lastPercentToPxWidth=(parseFloat(D.getPropertyValue(A,"width",null,!0))||1)/100,N.percentToPxHeight=M.lastPercentToPxHeight=(parseFloat(D.getPropertyValue(A,"height",null,!0))||1)/100,N.emToPx=M.lastEmToPx=(parseFloat(D.getPropertyValue(A,"paddingLeft"))||1)/100,t.myParent.removeChild(A)),null===M.remToPx&&(M.remToPx=parseFloat(D.getPropertyValue(B.body,"fontSize"))||16),null===M.vwToPx&&(M.vwToPx=parseFloat($.innerWidth)/100,M.vhToPx=parseFloat($.innerHeight)/100),N.remToPx=M.remToPx,N.vwToPx=M.vwToPx,N.vhToPx=M.vhToPx,1<=G.debug&&console.log("Unit ratios: "+JSON.stringify(N),q),N);var H=/margin|padding|left|right|width|text|word|letter/i.test(e)||/X$/.test(e)||"x"===e?"x":"y";switch(l){case"%":o*="x"==H?L.percentToPxWidth:L.percentToPxHeight;break;case"px":break;default:o*=L[l+"ToPx"]}switch(s){case"%":o*=1/("x"==H?L.percentToPxWidth:L.percentToPxHeight);break;case"px":break;default:o*=1/L[s+"ToPx"]}}switch(u){case"+":n=o+n;break;case"-":n=o-n;break;case"*":n*=o;break;case"/":n=o/n}R[e]={rootPropertyValue:a,startValue:o,currentValue:o,endValue:n,unitType:s,easing:i},c&&(R[e].pattern=c),G.debug&&console.log("tweensContainer ("+e+"): "+JSON.stringify(R[e]),q)}else G.debug&&console.log("Skipping ["+r+"] due to a lack of browser support.")};for(c in V)if(V.hasOwnProperty(c)){var d=D.Names.camelCase(c),f=(f=V[c],a=r=h=g=void 0,Q.isFunction(f)&&(f=f.call(q,S,C)),Q.isArray(f)?(h=f[0],a=!Q.isArray(f[1])&&/^[\d-]/.test(f[1])||Q.isFunction(f[1])||D.RegEx.isHex.test(f[1])?f[1]:Q.isString(f[1])&&!D.RegEx.isHex.test(f[1])&&G.Easings[f[1]]||Q.isArray(f[1])?(r=g?f[1]:X(f[1],z.duration),f[2]):f[1]||f[2]):h=f,g||(r=r||z.easing),[(h=Q.isFunction(h)?h.call(q,S,C):h)||0,r,a=Q.isFunction(a)?a.call(q,S,C):a]);if(N(D.Lists.colors)){var g=f[0],m=f[1],h=f[2];if(D.RegEx.isHex.test(g)){for(var y=["Red","Green","Blue"],v=D.Values.hexToRgb(g),b=h?D.Values.hexToRgb(h):W,x=0;x<y.length;x++){var w=[v[x]];m&&w.push(m),b!==W&&w.push(b[x]),p(d+y[x],w)}continue}}p(d,f)}R.element=q}R.element&&(D.Values.addClass(q,"velocity-animating"),E.push(R),(O=H(q))&&(""===z.queue&&(O.tweensContainer=R,O.opts=z),O.isAnimating=!0),A===C-1?(G.State.calls.push([E,P,z,null,k.resolver,null,0]),!1===G.State.isTicking&&(G.State.isTicking=!0,Y())):A++)}!1!==G.mock&&(!0===G.mock?z.duration=z.delay=1:(z.duration*=parseFloat(G.mock)||1,z.delay*=parseFloat(G.mock)||1)),z.easing=X(z.easing,z.duration),z.begin&&!Q.isFunction(z.begin)&&(z.begin=null),z.progress&&!Q.isFunction(z.progress)&&(z.progress=null),z.complete&&!Q.isFunction(z.complete)&&(z.complete=null),z.display!==W&&null!==z.display&&(z.display=z.display.toString().toLowerCase(),"auto"===z.display)&&(z.display=G.CSS.Values.getDisplayType(q)),z.visibility!==W&&null!==z.visibility&&(z.visibility=z.visibility.toString().toLowerCase()),z.mobileHA=z.mobileHA&&G.State.isMobile&&!G.State.isGingerbread,!1===z.queue?z.delay?(e=G.State.delayedElements.count++,G.State.delayedElements[e]=q,t=e,e=function(){G.State.delayedElements[t]=!1,r()},H(q).delayBegin=(new Date).getTime(),H(q).delay=parseFloat(z.delay),H(q).delayTimer={setTimeout:setTimeout(r,parseFloat(z.delay)),next:e}):r():I.queue(q,z.queue,function(e,t){if(!0===t)return k.promise&&k.resolver(P),!0;G.velocityQueueEntryFlag=!0,r()}),""!==z.queue&&"fx"!==z.queue||"inprogress"===I.queue(q)[0]||I.dequeue(q)}k.promise&&(V&&F&&!1===F.promiseRejectEmpty?k.resolver():k.rejecter())},G)).animate=y,T=$.requestAnimationFrame||r,G.State.isMobile||B.hidden===W||((s=function(){B.hidden?(T=function(e){return setTimeout(function(){e(!0)},16)},Y()):T=$.requestAnimationFrame||r})(),B.addEventListener("visibilitychange",s)),t.Velocity=G,t!==$&&(t.fn.velocity=y,t.fn.velocity.defaults=G.defaults),I.each(["Down","Up"],function(e,c){G.Redirects["slide"+c]=function(r,e,a,t,n,i){var e=I.extend({},e),o=e.begin,s=e.complete,l={},u={height:"",marginTop:"",marginBottom:"",paddingTop:"",paddingBottom:""};e.display===W&&(e.display="Down"===c?"inline"===G.CSS.Values.getDisplayType(r)?"inline-block":"block":"none"),e.begin=function(){for(var e in 0===a&&o&&o.call(n,n),u){var t;u.hasOwnProperty(e)&&(l[e]=r.style[e],t=D.getPropertyValue(r,e),u[e]="Down"===c?[t,0]:[0,t])}l.overflow=r.style.overflow,r.style.overflow="hidden"},e.complete=function(){for(var e in l)l.hasOwnProperty(e)&&(r.style[e]=l[e]);a===t-1&&(s&&s.call(n,n),i)&&i.resolver(n)},G(r,u,e)}}),I.each(["In","Out"],function(e,l){G.Redirects["fade"+l]=function(e,t,r,a,n,i){var t=I.extend({},t),o=t.complete,s={opacity:"In"===l?1:0};0!==r&&(t.begin=null),t.complete=r!==a-1?null:function(){o&&o.call(n,n),i&&i.resolver(n)},t.display===W&&(t.display="In"===l?"auto":"none"),G(this,s,t)}}),G;function H(e){e=I.data(e,"velocity");return null===e?W:e}function v(e,t){e=H(e);e&&e.delayTimer&&!e.delayPaused&&(e.delayRemaining=e.delay-t+e.delayBegin,e.delayPaused=!0,clearTimeout(e.delayTimer.setTimeout))}function b(e){e=H(e);e&&e.delayTimer&&e.delayPaused&&(e.delayPaused=!1,e.delayTimer.setTimeout=setTimeout(e.delayTimer.next,e.delayRemaining))}function l(h,t,y,r){var v=4,b=.001,x=1e-7,w=10,S=11,P=1/(S-1),e="Float32Array"in $;if(4!==arguments.length)return!1;for(var a=0;a<4;++a)if("number"!=typeof arguments[a]||isNaN(arguments[a])||!isFinite(arguments[a]))return!1;h=Math.min(h,1),y=Math.min(y,1),h=Math.max(h,0),y=Math.max(y,0);var V=new(e?Float32Array:Array)(S);function n(e,t){return 1-3*t+3*e}function k(e,t,r){return((n(t,r)*e+(3*r-6*t))*e+3*t)*e}function T(e,t,r){return 3*n(t,r)*e*e+2*(3*r-6*t)*e+3*t}function i(e){for(var t=0,r=1,a=S-1;r!==a&&V[r]<=e;++r)t+=P;var n=t+(e-V[--r])/(V[r+1]-V[r])*P,i=T(n,h,y);if(b<=i){for(var o=e,s=n,l=0;l<v;++l){var u=T(s,h,y);if(0===u)return s;s-=(k(s,h,y)-o)/u}return s}if(0===i)return n;for(var c,p,d=e,f=t,g=t+P,m=0;0<(c=k(p=f+(g-f)/2,h,y)-d)?g=p:f=p,Math.abs(c)>x&&++m<w;);return p}var o=!1;function s(){if(o=!0,h!==t||y!==r)for(var e=0;e<S;++e)V[e]=k(e*P,h,y)}function l(e){return o||s(),h===t&&y===r?e:0===e?0:1===e?1:k(i(e),t,r)}l.getControlPoints=function(){return[{x:h,y:t},{x:y,y:r}]};var u="generateBezier("+[h,t,y,r]+")";return l.toString=function(){return u},l}function x(e){return-e.tension*e.x-e.friction*e.v}function w(e,t,r){r={x:e.x+r.dx*t,v:e.v+r.dv*t,tension:e.tension,friction:e.friction};return{dx:r.v,dv:x(r)}}function X(e,t){var r=e;return Q.isString(e)?G.Easings[e]||(r=!1):r=Q.isArray(e)&&1===e.length?function(t){return function(e){return Math.round(e*t)*(1/t)}}.apply(null,e):Q.isArray(e)&&2===e.length?o.apply(null,e.concat([t])):!(!Q.isArray(e)||4!==e.length)&&l.apply(null,e),r=!1===r?G.Easings[G.defaults.easing]?G.defaults.easing:i:r}function Y(e){if(e){var t=G.timestamp&&!0!==e?e:k.now(),r=G.State.calls.length;1e4<r&&(G.State.calls=function(e){for(var t=-1,r=e?e.length:0,a=[];++t<r;){var n=e[t];n&&a.push(n)}return a}(G.State.calls),r=G.State.calls.length);for(var a=0;a<r;a++)if(G.State.calls[a]){var n=G.State.calls[a],i=n[0],o=n[2],s=!(p=n[3]),l=null,u=n[5],c=n[6],p=p||(G.State.calls[a][3]=t-16);if(u){if(!0!==u.resume)continue;p=n[3]=Math.round(t-c-16),n[5]=null}for(var c=n[6]=t-p,d=Math.min(c/o.duration,1),f=0,g=i.length;f<g;f++){var m=i[f],h=m.element;if(H(h)){var y,v,b,x,w,S,P=!1;for(y in o.display!==W&&null!==o.display&&"none"!==o.display&&("flex"===o.display&&I.each(["-webkit-box","-moz-box","-ms-flexbox","-webkit-flex"],function(e,t){D.setPropertyValue(h,"display",t)}),D.setPropertyValue(h,"display",o.display)),o.visibility!==W&&"hidden"!==o.visibility&&D.setPropertyValue(h,"visibility",o.visibility),m)m.hasOwnProperty(y)&&"element"!==y&&(v=m[y],b=Q.isString(v.easing)?G.Easings[v.easing]:v.easing,x=Q.isString(v.pattern)?v.pattern.replace(/{(\d+)(!)?}/g,1===d?function(e,t,r){t=v.endValue[t];return r?Math.round(t):t}:function(e,t,r){var a=v.startValue[t],t=v.endValue[t]-a,a=a+t*b(d,o,t);return r?Math.round(a):a}):1===d?v.endValue:(x=v.endValue-v.startValue,v.startValue+x*b(d,o,x)),!s&&x===v.currentValue||(v.currentValue=x,"tween"===y?l=x:(D.Hooks.registered[y]&&(w=D.Hooks.getRoot(y),S=H(h).rootPropertyValueCache[w])&&(v.rootPropertyValue=S),S=D.setPropertyValue(h,y,v.currentValue+(V<9&&0===parseFloat(x)?"":v.unitType),v.rootPropertyValue,v.scrollData),D.Hooks.registered[y]&&(D.Normalizations.registered[w]?H(h).rootPropertyValueCache[w]=D.Normalizations.registered[w]("extract",null,S[1]):H(h).rootPropertyValueCache[w]=S[1]),"transform"===S[0]&&(P=!0))));o.mobileHA&&H(h).transformCache.translate3d===W&&(H(h).transformCache.translate3d="(0px, 0px, 0px)",P=!0),P&&D.flushTransformCache(h)}}o.display!==W&&"none"!==o.display&&(G.State.calls[a][2].display=!1),o.visibility!==W&&"hidden"!==o.visibility&&(G.State.calls[a][2].visibility=!1),o.progress&&o.progress.call(n[1],n[1],d,Math.max(0,p+o.duration-t),p,l),1===d&&O(a)}}G.State.isTicking&&T(Y)}function O(e,t){if(G.State.calls[e]){for(var r=G.State.calls[e][0],a=G.State.calls[e][1],n=G.State.calls[e][2],i=G.State.calls[e][4],o=!1,s=0,l=r.length;s<l;s++){var u,c=r[s].element,p=(t||n.loop||("none"===n.display&&D.setPropertyValue(c,"display",n.display),"hidden"===n.visibility&&D.setPropertyValue(c,"visibility",n.visibility)),H(c));if(!0===n.loop||I.queue(c)[1]!==W&&/\.velocityQueueEntryFlag/i.test(I.queue(c)[1])||p&&(p.isAnimating=!1,u=!(p.rootPropertyValueCache={}),I.each(D.Lists.transforms3D,function(e,t){var r=/^scale/.test(t)?1:0,a=p.transformCache[t];p.transformCache[t]!==W&&new RegExp("^\\("+r+"[^.]").test(a)&&(u=!0,delete p.transformCache[t])}),n.mobileHA&&(u=!0,delete p.transformCache.translate3d),u&&D.flushTransformCache(c),D.Values.removeClass(c,"velocity-animating")),!t&&n.complete&&!n.loop&&s===l-1)try{n.complete.call(a,a)}catch(e){setTimeout(function(){throw e},1)}i&&!0!==n.loop&&i(a),p&&!0===n.loop&&!t&&(I.each(p.tweensContainer,function(e,t){var r;/^rotate/.test(e)&&(parseFloat(t.startValue)-parseFloat(t.endValue))%360==0&&(r=t.startValue,t.startValue=t.endValue,t.endValue=r),/^backgroundPosition/.test(e)&&100===parseFloat(t.endValue)&&"%"===t.unitType&&(t.endValue=0,t.startValue=100)}),G(c,"reverse",{loop:!0,delay:n.delay})),!1!==n.queue&&I.dequeue(c,n.queue)}G.State.calls[e]=!1;for(var d=0,f=G.State.calls.length;d<f;d++)if(!1!==G.State.calls[d]){o=!0;break}!1===o&&(G.State.isTicking=!1,delete G.State.calls,G.State.calls=[])}}jQuery.fn.velocity=jQuery.fn.animate});
\ No newline at end of file
+!function(t){if(!t.jQuery){for(var u=function(e,t){return new u.fn.init(e,t)},n=(u.isWindow=function(e){return e&&e===e.window},u.type=function(e){return e?"object"==typeof e||"function"==typeof e?r[i.call(e)]||"object":typeof e:e+""},u.isArray=Array.isArray||function(e){return"array"===u.type(e)},u.isPlainObject=function(e){if(!e||"object"!==u.type(e)||e.nodeType||u.isWindow(e))return!1;try{if(e.constructor&&!a.call(e,"constructor")&&!a.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(e){return!1}for(var t in e);return void 0===t||a.call(e,t)},u.each=function(e,t,r){var a=0,n=e.length,i=s(e);if(r){if(i)for(;a<n&&!1!==t.apply(e[a],r);a++);else for(a in e)if(e.hasOwnProperty(a)&&!1===t.apply(e[a],r))break}else if(i)for(;a<n&&!1!==t.call(e[a],a,e[a]);a++);else for(a in e)if(e.hasOwnProperty(a)&&!1===t.call(e[a],a,e[a]))break;return e},u.data=function(e,t,r){var a;return void 0===r?(a=(a=e[u.expando])&&n[a],void 0===t?a:a&&t in a?a[t]:void 0):void 0!==t?(a=e[u.expando]||(e[u.expando]=++u.uuid),n[a]=n[a]||{},n[a][t]=r):void 0},u.removeData=function(e,t){var e=e[u.expando],r=e&&n[e];r&&(t?u.each(t,function(e,t){delete r[t]}):delete n[e])},u.extend=function(){var e,t,r,a,n,i=arguments[0]||{},o=1,s=arguments.length,l=!1;for("boolean"==typeof i&&(l=i,i=arguments[o]||{},o++),"object"!=typeof i&&"function"!==u.type(i)&&(i={}),o===s&&(i=this,o--);o<s;o++)if(a=arguments[o])for(r in a)a.hasOwnProperty(r)&&(n=i[r],i!==(t=a[r]))&&(l&&t&&(u.isPlainObject(t)||(e=u.isArray(t)))?(n=e?(e=!1,n&&u.isArray(n)?n:[]):n&&u.isPlainObject(n)?n:{},i[r]=u.extend(l,n,t)):void 0!==t&&(i[r]=t));return i},u.queue=function(e,t,r){var a;if(e)return a=u.data(e,t=(t||"fx")+"queue"),r?(!a||u.isArray(r)?a=u.data(e,t,function(e,t){if(t=t||[],e)if(s(Object(e))){for(var r=t,a="string"==typeof e?[e]:e,n=+a.length,i=0,o=r.length;i<n;)r[o++]=a[i++];if(n!=n)for(;void 0!==a[i];)r[o++]=a[i++];r.length=o}else[].push.call(t,e);return t}(r)):a.push(r),a):a||[]},u.dequeue=function(e,n){u.each(e.nodeType?[e]:e,function(e,t){n=n||"fx";var r=u.queue(t,n),a=r.shift();(a="inprogress"===a?r.shift():a)&&("fx"===n&&r.unshift("inprogress"),a.call(t,function(){u.dequeue(t,n)}))})},u.fn=u.prototype={init:function(e){if(e.nodeType)return this[0]=e,this;throw new Error("Not a DOM node.")},offset:function(){var e=this[0].getBoundingClientRect?this[0].getBoundingClientRect():{top:0,left:0};return{top:e.top+(t.pageYOffset||document.scrollTop||0)-(document.clientTop||0),left:e.left+(t.pageXOffset||document.scrollLeft||0)-(document.clientLeft||0)}},position:function(){var e=this[0],t=function(e){for(var t=e.offsetParent;t&&"html"!==t.nodeName.toLowerCase()&&t.style&&"static"===t.style.position.toLowerCase();)t=t.offsetParent;return t||document}(e),r=this.offset(),a=/^(?:body|html)$/i.test(t.nodeName)?{top:0,left:0}:u(t).offset();return r.top-=parseFloat(e.style.marginTop)||0,r.left-=parseFloat(e.style.marginLeft)||0,t.style&&(a.top+=parseFloat(t.style.borderTopWidth)||0,a.left+=parseFloat(t.style.borderLeftWidth)||0),{top:r.top-a.top,left:r.left-a.left}}},{}),r=(u.expando="velocity"+(new Date).getTime(),u.uuid=0,{}),a=r.hasOwnProperty,i=r.toString,e="Boolean Number String Function Array Date RegExp Object Error".split(" "),o=0;o<e.length;o++)r["[object "+e[o]+"]"]=e[o].toLowerCase();u.fn.init.prototype=u.fn,t.Velocity={Utilities:u}}function s(e){var t=e.length,r=u.type(e);return"function"!==r&&!u.isWindow(e)&&(!(1!==e.nodeType||!t)||"array"===r||0===t||"number"==typeof t&&0<t&&t-1 in e)}}(window),function(e){"object"==typeof module&&"object"==typeof module.exports?module.exports=e():"function"==typeof define&&define.amd?define(e):e()}(function(){var a,e,t=window.jQuery||window.Zepto||window,$=window,B=window?window.document:void 0,W=void 0,V=function(){if(B.documentMode)return B.documentMode;for(var e=7;4<e;e--){var t=B.createElement("div");if(t.innerHTML="\x3c!--[if IE "+e+"]><span></span><![endif]--\x3e",t.getElementsByTagName("span").length)return t=null,e}return W}(),r=(a=0,$.webkitRequestAnimationFrame||$.mozRequestAnimationFrame||function(e){var t=(new Date).getTime(),r=Math.max(0,16-(t-a));return a=t+r,setTimeout(function(){e(t+r)},r)}),k=("function"!=typeof(s=$.performance||{}).now&&(e=s.timing&&s.timing.navigationStart?s.timing.navigationStart:(new Date).getTime(),s.now=function(){return(new Date).getTime()-e}),s);function N(){return Array.prototype.includes?function(e,t){return e.includes(t)}:Array.prototype.indexOf?function(e,t){return 0<=e.indexOf(t)}:function(e,t){for(var r=0;r<e.length;r++)if(e[r]===t)return!0;return!1}}var n=function(){var s=Array.prototype.slice;try{return s.call(B.documentElement),s}catch(e){return function(e,t){var r=this.length;if("number"!=typeof e&&(e=0),"number"!=typeof t&&(t=r),this.slice)return s.call(this,e,t);var a,n=[],i=0<=e?e:Math.max(0,r+e),o=(t<0?r+t:Math.min(t,r))-i;if(0<o)if(n=new Array(o),this.charAt)for(a=0;a<o;a++)n[a]=this.charAt(i+a);else for(a=0;a<o;a++)n[a]=this[i+a];return n}}}();function h(e){return Q.isWrapped(e)?e=n.call(e):Q.isNode(e)&&(e=[e]),e}var I,i,o,D,y,G,T,Q={isNumber:function(e){return"number"==typeof e},isString:function(e){return"string"==typeof e},isArray:Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)},isFunction:function(e){return"[object Function]"===Object.prototype.toString.call(e)},isNode:function(e){return e&&e.nodeType},isWrapped:function(e){return e&&e!==$&&Q.isNumber(e.length)&&!Q.isString(e)&&!Q.isFunction(e)&&!Q.isNode(e)&&(0===e.length||Q.isNode(e[0]))},isSVG:function(e){return $.SVGElement&&e instanceof $.SVGElement},isEmptyObject:function(e){for(var t in e)if(e.hasOwnProperty(t))return!1;return!0}},s=!1;if(t.fn&&t.fn.jquery?(I=t,s=!0):I=$.Velocity.Utilities,V<=8&&!s)throw new Error("Velocity: IE8 and below require jQuery to be loaded before Velocity.");if(!(V<=7))return i="swing",G={State:{isMobile:/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test($.navigator.userAgent),isAndroid:/Android/i.test($.navigator.userAgent),isGingerbread:/Android 2\.3\.[3-7]/i.test($.navigator.userAgent),isChrome:$.chrome,isFirefox:/Firefox/i.test($.navigator.userAgent),prefixElement:B.createElement("div"),prefixMatches:{},scrollAnchor:null,scrollPropertyLeft:null,scrollPropertyTop:null,isTicking:!1,calls:[],delayedElements:{count:0}},CSS:{},Utilities:I,Redirects:{},Easings:{},Promise:$.Promise,defaults:{queue:"",duration:400,easing:i,begin:W,complete:W,progress:W,display:W,visibility:W,loop:!1,delay:!1,mobileHA:!0,_cacheValues:!0,promiseRejectEmpty:!0},init:function(e){I.data(e,"velocity",{isSVG:Q.isSVG(e),isAnimating:!1,computedStyle:null,tweensContainer:null,rootPropertyValueCache:{},transformCache:{}})},hook:null,mock:!1,version:{major:1,minor:5,patch:2},debug:!1,timestamp:!0,pauseAll:function(r){var a=(new Date).getTime();I.each(G.State.calls,function(e,t){if(t){if(r!==W&&(t[2].queue!==r||!1===t[2].queue))return!0;t[5]={resume:!1}}}),I.each(G.State.delayedElements,function(e,t){t&&v(t,a)})},resumeAll:function(r){var e=(new Date).getTime();I.each(G.State.calls,function(e,t){if(t){if(r!==W&&(t[2].queue!==r||!1===t[2].queue))return!0;t[5]&&(t[5].resume=!0)}}),I.each(G.State.delayedElements,function(e,t){t&&b(t)})}},$.pageYOffset!==W?(G.State.scrollAnchor=$,G.State.scrollPropertyLeft="pageXOffset",G.State.scrollPropertyTop="pageYOffset"):(G.State.scrollAnchor=B.documentElement||B.body.parentNode||B.body,G.State.scrollPropertyLeft="scrollLeft",G.State.scrollPropertyTop="scrollTop"),o=function e(t,r,a){var n,i,o,s,l,u,c,p,d,f,g={x:-1,v:0,tension:null,friction:null},m=[0],h=0;for(t=parseFloat(t)||500,r=parseFloat(r)||20,a=a||null,g.tension=t,g.friction=r,i=(n=null!==a)?(h=e(t,r))/a*.016:.016;;)if(l=i,u=f=d=p=c=u=void 0,u={dx:(s=o||g).v,dv:x(s)},c=w(s,.5*l,u),p=w(s,.5*l,c),d=w(s,l,p),f=1/6*(u.dx+2*(c.dx+p.dx)+d.dx),u=1/6*(u.dv+2*(c.dv+p.dv)+d.dv),s.x=s.x+f*l,s.v=s.v+u*l,o=s,m.push(1+o.x),h+=16,!(1e-4<Math.abs(o.x)&&1e-4<Math.abs(o.v)))break;return n?function(e){return m[e*(m.length-1)|0]}:h},G.Easings={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},spring:function(e){return 1-Math.cos(4.5*e*Math.PI)*Math.exp(6*-e)}},I.each([["ease",[.25,.1,.25,1]],["ease-in",[.42,0,1,1]],["ease-out",[0,0,.58,1]],["ease-in-out",[.42,0,.58,1]],["easeInSine",[.47,0,.745,.715]],["easeOutSine",[.39,.575,.565,1]],["easeInOutSine",[.445,.05,.55,.95]],["easeInQuad",[.55,.085,.68,.53]],["easeOutQuad",[.25,.46,.45,.94]],["easeInOutQuad",[.455,.03,.515,.955]],["easeInCubic",[.55,.055,.675,.19]],["easeOutCubic",[.215,.61,.355,1]],["easeInOutCubic",[.645,.045,.355,1]],["easeInQuart",[.895,.03,.685,.22]],["easeOutQuart",[.165,.84,.44,1]],["easeInOutQuart",[.77,0,.175,1]],["easeInQuint",[.755,.05,.855,.06]],["easeOutQuint",[.23,1,.32,1]],["easeInOutQuint",[.86,0,.07,1]],["easeInExpo",[.95,.05,.795,.035]],["easeOutExpo",[.19,1,.22,1]],["easeInOutExpo",[1,0,0,1]],["easeInCirc",[.6,.04,.98,.335]],["easeOutCirc",[.075,.82,.165,1]],["easeInOutCirc",[.785,.135,.15,.86]]],function(e,t){G.Easings[t[0]]=l.apply(null,t[1])}),(D=G.CSS={RegEx:{isHex:/^#([A-f\d]{3}){1,2}$/i,valueUnwrap:/^[A-z]+\((.*)\)$/i,wrappedValueAlreadyExtracted:/[0-9.]+ [0-9.]+ [0-9.]+( [0-9.]+)?/,valueSplit:/([A-z]+\(.+\))|(([A-z0-9#-.]+?)(?=\s|$))/gi},Lists:{colors:["fill","stroke","stopColor","color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],transformsBase:["translateX","translateY","scale","scaleX","scaleY","skewX","skewY","rotateZ"],transforms3D:["transformPerspective","translateZ","scaleZ","rotateX","rotateY"],units:["%","em","ex","ch","rem","vw","vh","vmin","vmax","cm","mm","Q","in","pc","pt","px","deg","grad","rad","turn","s","ms"],colorNames:{aliceblue:"240,248,255",antiquewhite:"250,235,215",aquamarine:"127,255,212",aqua:"0,255,255",azure:"240,255,255",beige:"245,245,220",bisque:"255,228,196",black:"0,0,0",blanchedalmond:"255,235,205",blueviolet:"138,43,226",blue:"0,0,255",brown:"165,42,42",burlywood:"222,184,135",cadetblue:"95,158,160",chartreuse:"127,255,0",chocolate:"210,105,30",coral:"255,127,80",cornflowerblue:"100,149,237",cornsilk:"255,248,220",crimson:"220,20,60",cyan:"0,255,255",darkblue:"0,0,139",darkcyan:"0,139,139",darkgoldenrod:"184,134,11",darkgray:"169,169,169",darkgrey:"169,169,169",darkgreen:"0,100,0",darkkhaki:"189,183,107",darkmagenta:"139,0,139",darkolivegreen:"85,107,47",darkorange:"255,140,0",darkorchid:"153,50,204",darkred:"139,0,0",darksalmon:"233,150,122",darkseagreen:"143,188,143",darkslateblue:"72,61,139",darkslategray:"47,79,79",darkturquoise:"0,206,209",darkviolet:"148,0,211",deeppink:"255,20,147",deepskyblue:"0,191,255",dimgray:"105,105,105",dimgrey:"105,105,105",dodgerblue:"30,144,255",firebrick:"178,34,34",floralwhite:"255,250,240",forestgreen:"34,139,34",fuchsia:"255,0,255",gainsboro:"220,220,220",ghostwhite:"248,248,255",gold:"255,215,0",goldenrod:"218,165,32",gray:"128,128,128",grey:"128,128,128",greenyellow:"173,255,47",green:"0,128,0",honeydew:"240,255,240",hotpink:"255,105,180",indianred:"205,92,92",indigo:"75,0,130",ivory:"255,255,240",khaki:"240,230,140",lavenderblush:"255,240,245",lavender:"230,230,250",lawngreen:"124,252,0",lemonchiffon:"255,250,205",lightblue:"173,216,230",lightcoral:"240,128,128",lightcyan:"224,255,255",lightgoldenrodyellow:"250,250,210",lightgray:"211,211,211",lightgrey:"211,211,211",lightgreen:"144,238,144",lightpink:"255,182,193",lightsalmon:"255,160,122",lightseagreen:"32,178,170",lightskyblue:"135,206,250",lightslategray:"119,136,153",lightsteelblue:"176,196,222",lightyellow:"255,255,224",limegreen:"50,205,50",lime:"0,255,0",linen:"250,240,230",magenta:"255,0,255",maroon:"128,0,0",mediumaquamarine:"102,205,170",mediumblue:"0,0,205",mediumorchid:"186,85,211",mediumpurple:"147,112,219",mediumseagreen:"60,179,113",mediumslateblue:"123,104,238",mediumspringgreen:"0,250,154",mediumturquoise:"72,209,204",mediumvioletred:"199,21,133",midnightblue:"25,25,112",mintcream:"245,255,250",mistyrose:"255,228,225",moccasin:"255,228,181",navajowhite:"255,222,173",navy:"0,0,128",oldlace:"253,245,230",olivedrab:"107,142,35",olive:"128,128,0",orangered:"255,69,0",orange:"255,165,0",orchid:"218,112,214",palegoldenrod:"238,232,170",palegreen:"152,251,152",paleturquoise:"175,238,238",palevioletred:"219,112,147",papayawhip:"255,239,213",peachpuff:"255,218,185",peru:"205,133,63",pink:"255,192,203",plum:"221,160,221",powderblue:"176,224,230",purple:"128,0,128",red:"255,0,0",rosybrown:"188,143,143",royalblue:"65,105,225",saddlebrown:"139,69,19",salmon:"250,128,114",sandybrown:"244,164,96",seagreen:"46,139,87",seashell:"255,245,238",sienna:"160,82,45",silver:"192,192,192",skyblue:"135,206,235",slateblue:"106,90,205",slategray:"112,128,144",snow:"255,250,250",springgreen:"0,255,127",steelblue:"70,130,180",tan:"210,180,140",teal:"0,128,128",thistle:"216,191,216",tomato:"255,99,71",turquoise:"64,224,208",violet:"238,130,238",wheat:"245,222,179",whitesmoke:"245,245,245",white:"255,255,255",yellowgreen:"154,205,50",yellow:"255,255,0"}},Hooks:{templates:{textShadow:["Color X Y Blur","black 0px 0px 0px"],boxShadow:["Color X Y Blur Spread","black 0px 0px 0px 0px"],clip:["Top Right Bottom Left","0px 0px 0px 0px"],backgroundPosition:["X Y","0% 0%"],transformOrigin:["X Y Z","50% 50% 0px"],perspectiveOrigin:["X Y","50% 50%"]},registered:{},register:function(){for(var e,t,r,a,n,i=0;i<D.Lists.colors.length;i++){var o="color"===D.Lists.colors[i]?"0 0 0 1":"255 255 255 1";D.Hooks.templates[D.Lists.colors[i]]=["Red Green Blue Alpha",o]}if(V)for(e in D.Hooks.templates)D.Hooks.templates.hasOwnProperty(e)&&(r=(t=D.Hooks.templates[e])[0].split(" "),a=t[1].match(D.RegEx.valueSplit),"Color"===r[0])&&(r.push(r.shift()),a.push(a.shift()),D.Hooks.templates[e]=[r.join(" "),a.join(" ")]);for(e in D.Hooks.templates)if(D.Hooks.templates.hasOwnProperty(e))for(var s in r=(t=D.Hooks.templates[e])[0].split(" "))r.hasOwnProperty(s)&&(n=e+r[s],s=s,D.Hooks.registered[n]=[e,s])},getRoot:function(e){var t=D.Hooks.registered[e];return t?t[0]:e},getUnit:function(e,t){e=(e.substr(t||0,5).match(/^[a-z%]+/)||[])[0]||"";return e&&N(D.Lists.units)?e:""},fixColors:function(e){return e.replace(/(rgba?\(\s*)?(\b[a-z]+\b)/g,function(e,t,r){return D.Lists.colorNames.hasOwnProperty(r)?(t||"rgba(")+D.Lists.colorNames[r]+(t?"":",1)"):t+r})},cleanRootPropertyValue:function(e,t){return D.RegEx.valueUnwrap.test(t)&&(t=t.match(D.RegEx.valueUnwrap)[1]),t=D.Values.isCSSNullValue(t)?D.Hooks.templates[e][1]:t},extractValue:function(e,t){var r,e=D.Hooks.registered[e];return e?(r=e[0],e=e[1],(t=D.Hooks.cleanRootPropertyValue(r,t)).toString().match(D.RegEx.valueSplit)[e]):t},injectValue:function(e,t,r){var a,e=D.Hooks.registered[e];return e?(a=e[0],e=e[1],(a=(r=D.Hooks.cleanRootPropertyValue(a,r)).toString().match(D.RegEx.valueSplit))[e]=t,a.join(" ")):r}},Normalizations:{registered:{clip:function(e,t,r){switch(e){case"name":return"clip";case"extract":var a=!D.RegEx.wrappedValueAlreadyExtracted.test(r)&&(a=r.toString().match(D.RegEx.valueUnwrap))?a[1].replace(/,(\s+)?/g," "):r;return a;case"inject":return"rect("+r+")"}},blur:function(e,t,r){switch(e){case"name":return G.State.isFirefox?"filter":"-webkit-filter";case"extract":var a,n=parseFloat(r);return n=n||0===n?n:(a=r.toString().match(/blur\(([0-9]+[A-z]+)\)/i))?a[1]:0;case"inject":return parseFloat(r)?"blur("+r+")":"none"}},opacity:function(e,t,r){if(V<=8)switch(e){case"name":return"filter";case"extract":var a=r.toString().match(/alpha\(opacity=(.*)\)/i);return r=a?a[1]/100:1;case"inject":return(t.style.zoom=1)<=parseFloat(r)?"":"alpha(opacity="+parseInt(100*parseFloat(r),10)+")"}else switch(e){case"name":return"opacity";case"extract":case"inject":return r}}},register:function(){V&&!(9<V)||G.State.isGingerbread||(D.Lists.transformsBase=D.Lists.transformsBase.concat(D.Lists.transforms3D));for(var e=0;e<D.Lists.transformsBase.length;e++)!function(){var n=D.Lists.transformsBase[e];D.Normalizations.registered[n]=function(e,t,r){switch(e){case"name":return"transform";case"extract":return H(t)===W||H(t).transformCache[n]===W?/^scale/i.test(n)?1:0:H(t).transformCache[n].replace(/[()]/g,"");case"inject":var a=!1;switch(n.substr(0,n.length-1)){case"translate":a=!/(%|px|em|rem|vw|vh|\d)$/i.test(r);break;case"scal":case"scale":G.State.isAndroid&&H(t).transformCache[n]===W&&r<1&&(r=1),a=!/(\d)$/i.test(r);break;case"skew":case"rotate":a=!/(deg|\d)$/i.test(r)}return a||(H(t).transformCache[n]="("+r+")"),H(t).transformCache[n]}}}();for(var t=0;t<D.Lists.colors.length;t++)!function(){var i=D.Lists.colors[t];D.Normalizations.registered[i]=function(e,t,r){switch(e){case"name":return i;case"extract":var a,n=D.RegEx.wrappedValueAlreadyExtracted.test(r)?r:(n={black:"rgb(0, 0, 0)",blue:"rgb(0, 0, 255)",gray:"rgb(128, 128, 128)",green:"rgb(0, 128, 0)",red:"rgb(255, 0, 0)",white:"rgb(255, 255, 255)"},/^[A-z]+$/i.test(r)?a=n[r]!==W?n[r]:n.black:D.RegEx.isHex.test(r)?a="rgb("+D.Values.hexToRgb(r).join(" ")+")":/^rgba?\(/i.test(r)||(a=n.black),(a||r).toString().match(D.RegEx.valueUnwrap)[1].replace(/,(\s+)?/g," "));return(!V||8<V)&&3===n.split(" ").length&&(n+=" 1"),n;case"inject":return/^rgb/.test(r)?r:(V<=8?4===r.split(" ").length&&(r=r.split(/\s+/).slice(0,3).join(" ")):3===r.split(" ").length&&(r+=" 1"),(V<=8?"rgb":"rgba")+"("+r.replace(/\s+/g,",").replace(/\.(\d)+(?=,)/g,"")+")")}}}();function i(e,t,r){if("border-box"===D.getPropertyValue(t,"boxSizing").toString().toLowerCase()!==(r||!1))return 0;for(var a,n=0,e="width"===e?["Left","Right"]:["Top","Bottom"],i=["padding"+e[0],"padding"+e[1],"border"+e[0]+"Width","border"+e[1]+"Width"],o=0;o<i.length;o++)a=parseFloat(D.getPropertyValue(t,i[o])),isNaN(a)||(n+=a);return r?-n:n}function r(a,n){return function(e,t,r){switch(e){case"name":return a;case"extract":return parseFloat(r)+i(a,t,n);case"inject":return parseFloat(r)-i(a,t,n)+"px"}}}D.Normalizations.registered.innerWidth=r("width",!0),D.Normalizations.registered.innerHeight=r("height",!0),D.Normalizations.registered.outerWidth=r("width"),D.Normalizations.registered.outerHeight=r("height")}},Names:{camelCase:function(e){return e.replace(/-(\w)/g,function(e,t){return t.toUpperCase()})},SVGAttribute:function(e){var t="width|height|x|y|cx|cy|r|rx|ry|x1|x2|y1|y2";return(V||G.State.isAndroid&&!G.State.isChrome)&&(t+="|transform"),new RegExp("^("+t+")$","i").test(e)},prefixCheck:function(e){if(G.State.prefixMatches[e])return[G.State.prefixMatches[e],!0];for(var t=["","Webkit","Moz","ms","O"],r=0,a=t.length;r<a;r++){var n=0===r?e:t[r]+e.replace(/^\w/,function(e){return e.toUpperCase()});if(Q.isString(G.State.prefixElement.style[n]))return[G.State.prefixMatches[e]=n,!0]}return[e,!1]}},Values:{hexToRgb:function(e){return e=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(e,t,r,a){return t+t+r+r+a+a}),(e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e))?[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]:[0,0,0]},isCSSNullValue:function(e){return!e||/^(none|auto|transparent|(rgba\(0, ?0, ?0, ?0\)))$/i.test(e)},getUnitType:function(e){return/^(rotate|skew)/i.test(e)?"deg":/(^(scale|scaleX|scaleY|scaleZ|alpha|flexGrow|flexHeight|zIndex|fontWeight)$)|((opacity|red|green|blue|alpha)$)/i.test(e)?"":"px"},getDisplayType:function(e){e=e&&e.tagName.toString().toLowerCase();return/^(b|big|i|small|tt|abbr|acronym|cite|code|dfn|em|kbd|strong|samp|var|a|bdo|br|img|map|object|q|script|span|sub|sup|button|input|label|select|textarea)$/i.test(e)?"inline":/^(li)$/i.test(e)?"list-item":/^(tr)$/i.test(e)?"table-row":/^(table)$/i.test(e)?"table":/^(tbody)$/i.test(e)?"table-row-group":"block"},addClass:function(e,t){var r;e&&(e.classList?e.classList.add(t):Q.isString(e.className)?e.className+=(e.className.length?" ":"")+t:(r=e.getAttribute(V<=7?"className":"class")||"",e.setAttribute("class",r+(r?" ":"")+t)))},removeClass:function(e,t){var r;e&&(e.classList?e.classList.remove(t):Q.isString(e.className)?e.className=e.className.toString().replace(new RegExp("(^|\\s)"+t.split(" ").join("|")+"(\\s|$)","gi")," "):(r=e.getAttribute(V<=7?"className":"class")||"",e.setAttribute("class",r.replace(new RegExp("(^|s)"+t.split(" ").join("|")+"(s|$)","gi")," "))))}},getPropertyValue:function(e,t,r,o){function s(e,t){var r=0;if(V<=8)r=I.css(e,t);else{var a,n=!1,i=(/^(width|height)$/.test(t)&&0===D.getPropertyValue(e,"display")&&(n=!0,D.setPropertyValue(e,"display",D.Values.getDisplayType(e))),function(){n&&D.setPropertyValue(e,"display","none")});if(!o){if("height"===t&&"border-box"!==D.getPropertyValue(e,"boxSizing").toString().toLowerCase())return a=e.offsetHeight-(parseFloat(D.getPropertyValue(e,"borderTopWidth"))||0)-(parseFloat(D.getPropertyValue(e,"borderBottomWidth"))||0)-(parseFloat(D.getPropertyValue(e,"paddingTop"))||0)-(parseFloat(D.getPropertyValue(e,"paddingBottom"))||0),i(),a;if("width"===t&&"border-box"!==D.getPropertyValue(e,"boxSizing").toString().toLowerCase())return a=e.offsetWidth-(parseFloat(D.getPropertyValue(e,"borderLeftWidth"))||0)-(parseFloat(D.getPropertyValue(e,"borderRightWidth"))||0)-(parseFloat(D.getPropertyValue(e,"paddingLeft"))||0)-(parseFloat(D.getPropertyValue(e,"paddingRight"))||0),i(),a}a=H(e)===W?$.getComputedStyle(e,null):H(e).computedStyle?H(e).computedStyle:H(e).computedStyle=$.getComputedStyle(e,null),"borderColor"===t&&(t="borderTopColor"),""!==(r=9===V&&"filter"===t?a.getPropertyValue(t):a[t])&&null!==r||(r=e.style[t]),i()}return r="auto"===r&&/^(top|right|bottom|left)$/i.test(t)&&("fixed"===(a=s(e,"position"))||"absolute"===a&&/top|left/i.test(t))?I(e).position()[t]+"px":r}var a,n,i;if(D.Hooks.registered[t]?(a=D.Hooks.getRoot(i=t),r===W&&(r=D.getPropertyValue(e,D.Names.prefixCheck(a)[0])),D.Normalizations.registered[a]&&(r=D.Normalizations.registered[a]("extract",e,r)),a=D.Hooks.extractValue(i,r)):D.Normalizations.registered[t]&&("transform"!==(i=D.Normalizations.registered[t]("name",e))&&(n=s(e,D.Names.prefixCheck(i)[0]),D.Values.isCSSNullValue(n))&&D.Hooks.templates[t]&&(n=D.Hooks.templates[t][1]),a=D.Normalizations.registered[t]("extract",e,n)),!/^[\d-]/.test(a)){r=H(e);if(r&&r.isSVG&&D.Names.SVGAttribute(t))if(/^(height|width)$/i.test(t))try{a=e.getBBox()[t]}catch(e){a=0}else a=e.getAttribute(t);else a=s(e,D.Names.prefixCheck(t)[0])}return D.Values.isCSSNullValue(a)&&(a=0),2<=G.debug&&console.log("Get "+t+": "+a),a},setPropertyValue:function(e,t,r,a,n){var i,o=t;if("scroll"===t)n.container?n.container["scroll"+n.direction]=r:"Left"===n.direction?$.scrollTo(r,n.alternateValue):$.scrollTo(n.alternateValue,r);else if(D.Normalizations.registered[t]&&"transform"===D.Normalizations.registered[t]("name",e))D.Normalizations.registered[t]("inject",e,r),o="transform",r=H(e).transformCache[t];else{if(D.Hooks.registered[t]&&(n=t,i=D.Hooks.getRoot(t),a=a||D.getPropertyValue(e,i),r=D.Hooks.injectValue(n,r,a),t=i),D.Normalizations.registered[t]&&(r=D.Normalizations.registered[t]("inject",e,r),t=D.Normalizations.registered[t]("name",e)),o=D.Names.prefixCheck(t)[0],V<=8)try{e.style[o]=r}catch(e){G.debug&&console.log("Browser does not support ["+r+"] for ["+o+"]")}else{n=H(e);n&&n.isSVG&&D.Names.SVGAttribute(t)?e.setAttribute(t,r):e.style[o]=r}2<=G.debug&&console.log("Set "+t+" ("+o+"): "+r)}return[o,r]},flushTransformCache:function(t){var r,a,n,i="",e=H(t);(V||G.State.isAndroid&&!G.State.isChrome)&&e&&e.isSVG?(r={translate:[(e=function(e){return parseFloat(D.getPropertyValue(t,e))})("translateX"),e("translateY")],skewX:[e("skewX")],skewY:[e("skewY")],scale:1!==e("scale")?[e("scale"),e("scale")]:[e("scaleX"),e("scaleY")],rotate:[e("rotateZ"),0,0]},I.each(H(t).transformCache,function(e){/^translate/i.test(e)?e="translate":/^scale/i.test(e)?e="scale":/^rotate/i.test(e)&&(e="rotate"),r[e]&&(i+=e+"("+r[e].join(" ")+") ",delete r[e])})):(I.each(H(t).transformCache,function(e){if(a=H(t).transformCache[e],"transformPerspective"===e)return n=a,!0;i+=(e=9===V&&"rotateZ"===e?"rotate":e)+a+" "}),n&&(i="perspective"+n+" "+i)),D.setPropertyValue(t,"transform",i)}}).Hooks.register(),D.Normalizations.register(),G.hook=function(e,a,n){var i;return e=h(e),I.each(e,function(e,t){var r;H(t)===W&&G.init(t),n===W?i===W&&(i=D.getPropertyValue(t,a)):("transform"===(r=D.setPropertyValue(t,a,n))[0]&&G.CSS.flushTransformCache(t),i=r)}),i},(G=I.extend(y=function(){function e(){return t?k.promise||null:r}var t,r,a,P,V,n=arguments[0]&&(arguments[0].p||I.isPlainObject(arguments[0].properties)&&!arguments[0].properties.names||Q.isString(arguments[0].properties)),k=(Q.isWrapped(this)?(t=!1,a=0,r=P=this):(t=!0,a=1,P=n?arguments[0].elements||arguments[0].e:arguments[0]),{promise:null,resolver:null,rejecter:null});if(t&&G.Promise&&(k.promise=new G.Promise(function(e,t){k.resolver=e,k.rejecter=t})),F=n?(V=arguments[0].properties||arguments[0].p,arguments[0].options||arguments[0].o):(V=arguments[a],arguments[a+1]),P=h(P)){var T,i,o,s,l,C=P.length,A=0;if(!/^(stop|finish|finishAll|pause|resume)$/i.test(V)&&!I.isPlainObject(F))for(var F={},u=a+1;u<arguments.length;u++)Q.isArray(arguments[u])||!/^(fast|normal|slow)$/i.test(arguments[u])&&!/^\d/.test(arguments[u])?Q.isString(arguments[u])||Q.isArray(arguments[u])?F.easing=arguments[u]:Q.isFunction(arguments[u])&&(F.complete=arguments[u]):F.duration=arguments[u];switch(V){case"scroll":T="scroll";break;case"reverse":T="reverse";break;case"pause":var c=(new Date).getTime();return I.each(P,function(e,t){v(t,c)}),I.each(G.State.calls,function(e,a){var n=!1;a&&I.each(a[1],function(e,r){var t=F===W?"":F;return!0!==t&&a[2].queue!==t&&(F!==W||!1!==a[2].queue)||(I.each(P,function(e,t){if(t===r)return a[5]={resume:!1},!(n=!0)}),!n&&void 0)})}),e();case"resume":return I.each(P,function(e,t){b(t)}),I.each(G.State.calls,function(e,a){var n=!1;a&&I.each(a[1],function(e,r){var t=F===W?"":F;return!0!==t&&a[2].queue!==t&&(F!==W||!1!==a[2].queue)||!a[5]||(I.each(P,function(e,t){if(t===r)return a[5].resume=!0,!(n=!0)}),!n&&void 0)})}),e();case"finish":case"finishAll":case"stop":I.each(P,function(e,t){H(t)&&H(t).delayTimer&&(clearTimeout(H(t).delayTimer.setTimeout),H(t).delayTimer.next&&H(t).delayTimer.next(),delete H(t).delayTimer),"finishAll"!==V||!0!==F&&!Q.isString(F)||(I.each(I.queue(t,Q.isString(F)?F:""),function(e,t){Q.isFunction(t)&&t()}),I.queue(t,Q.isString(F)?F:"",[]))});var p=[];return I.each(G.State.calls,function(n,i){i&&I.each(i[1],function(e,r){var a=F===W?"":F;if(!0!==a&&i[2].queue!==a&&(F!==W||!1!==i[2].queue))return!0;I.each(P,function(e,t){t===r&&(!0!==F&&!Q.isString(F)||(I.each(I.queue(t,Q.isString(F)?F:""),function(e,t){Q.isFunction(t)&&t(null,!0)}),I.queue(t,Q.isString(F)?F:"",[])),"stop"===V?((t=H(t))&&t.tweensContainer&&(!0===a||""===a)&&I.each(t.tweensContainer,function(e,t){t.endValue=t.currentValue}),p.push(n)):"finish"!==V&&"finishAll"!==V||(i[2].duration=1))})})}),"stop"===V&&(I.each(p,function(e,t){O(t,!0)}),k.promise)&&k.resolver(P),e();default:if(!I.isPlainObject(V)||Q.isEmptyObject(V))return Q.isString(V)&&G.Redirects[V]?(o=(i=I.extend({},F)).duration,s=i.delay||0,!0===i.backwards&&(P=I.extend(!0,[],P).reverse()),I.each(P,function(e,t){parseFloat(i.stagger)?i.delay=s+parseFloat(i.stagger)*e:Q.isFunction(i.stagger)&&(i.delay=s+i.stagger.call(t,e,C)),i.drag&&(i.duration=parseFloat(o)||(/^(callout|transition)/.test(V)?1e3:400),i.duration=Math.max(i.duration*(i.backwards?1-e/C:(e+1)/C),.75*i.duration,200)),G.Redirects[V].call(t,t,i||{},e,C,P,k.promise?k:W)})):(l="Velocity: First argument ("+V+") was not a property map, a known action, or a registered redirect. Aborting.",k.promise?k.rejecter(new Error(l)):$.console&&console.log(l)),e();T="start"}var M={lastParent:null,lastPosition:null,lastFontSize:null,lastPercentToPxWidth:null,lastPercentToPxHeight:null,lastEmToPx:null,remToPx:null,vwToPx:null,vhToPx:null},E=[],d=(I.each(P,function(e,t){Q.isNode(t)&&m(t,e)}),(i=I.extend({},G.defaults,F)).loop=parseInt(i.loop,10),2*i.loop-1);if(i.loop)for(var f=0;f<d;f++){var g={delay:i.delay,progress:i.progress};f===d-1&&(g.display=i.display,g.visibility=i.visibility,g.complete=i.complete),y(P,"reverse",g)}return e()}function m(q,S){var L,e,t,z=I.extend({},G.defaults,F),R={};switch(H(q)===W&&G.init(q),parseFloat(z.delay)&&!1!==z.queue&&I.queue(q,z.queue,function(e,t){if(!0===t)return!0;G.velocityQueueEntryFlag=!0;function r(){G.State.delayedElements[a]=!1,e()}var a,t=G.State.delayedElements.count++;G.State.delayedElements[t]=q,a=t;H(q).delayBegin=(new Date).getTime(),H(q).delay=parseFloat(z.delay),H(q).delayTimer={setTimeout:setTimeout(e,parseFloat(z.delay)),next:r}}),z.duration.toString().toLowerCase()){case"fast":z.duration=200;break;case"normal":z.duration=400;break;case"slow":z.duration=600;break;default:z.duration=parseFloat(z.duration)||1}function r(e){var O,j,t,r,a;if(z.begin&&0===A)try{z.begin.call(P,P)}catch(e){setTimeout(function(){throw e},1)}if("scroll"===T){var n,i,o,s=/^x$/i.test(z.axis)?"Left":"Top",l=parseFloat(z.offset)||0;z.container?Q.isWrapped(z.container)||Q.isNode(z.container)?(z.container=z.container[0]||z.container,o=(n=z.container["scroll"+s])+I(q).position()[s.toLowerCase()]+l):z.container=null:(n=G.State.scrollAnchor[G.State["scrollProperty"+s]],i=G.State.scrollAnchor[G.State["scrollProperty"+("Left"===s?"Top":"Left")]],o=I(q).offset()[s.toLowerCase()]+l),R={scroll:{rootPropertyValue:!1,startValue:n,currentValue:n,endValue:o,unitType:"",easing:z.easing,scrollData:{container:z.container,direction:s,alternateValue:i}},element:q},G.debug&&console.log("tweensContainer (scroll): ",R.scroll,q)}else if("reverse"===T){if(!(O=H(q)))return;if(!O.tweensContainer)return void I.dequeue(q,z.queue);for(var u in"none"===O.opts.display&&(O.opts.display="auto"),"hidden"===O.opts.visibility&&(O.opts.visibility="visible"),O.opts.loop=!1,O.opts.begin=null,O.opts.complete=null,F.easing||delete z.easing,F.duration||delete z.duration,z=I.extend({},O.opts,z),j=I.extend(!0,{},O?O.tweensContainer:null))j.hasOwnProperty(u)&&"element"!==u&&(t=j[u].startValue,j[u].startValue=j[u].currentValue=j[u].endValue,j[u].endValue=t,Q.isEmptyObject(F)||(j[u].easing=z.easing),G.debug)&&console.log("reverse tweensContainer ("+u+"): "+JSON.stringify(j[u]),q);R=j}else if("start"===T){(O=H(q))&&O.tweensContainer&&!0===O.isAnimating&&(j=O.tweensContainer);var c,p=function(e,t){var r=D.Hooks.getRoot(e),a=!1,n=t[0],i=t[1],o=t[2];if(O&&O.isSVG||"tween"===r||!1!==D.Names.prefixCheck(r)[1]||D.Normalizations.registered[r]!==W){(z.display!==W&&null!==z.display&&"none"!==z.display||z.visibility!==W&&"hidden"!==z.visibility)&&/opacity|filter/.test(e)&&!o&&0!==n&&(o=0),z._cacheValues&&j&&j[e]?(o===W&&(o=j[e].endValue+j[e].unitType),a=O.rootPropertyValueCache[r]):D.Hooks.registered[e]?o===W?(a=D.getPropertyValue(q,r),o=D.getPropertyValue(q,e,a)):a=D.Hooks.templates[r][1]:o===W&&(o=D.getPropertyValue(q,e));var s,l,u=!1,t=function(e,t){var t=(t||"0").toString().toLowerCase().replace(/[%A-z]+$/,function(e){return r=e,""}),r=r||D.Values.getUnitType(e);return[t,r]};if(o!==n&&Q.isString(o)&&Q.isString(n)){for(var c="",p=0,d=0,f=[],g=[],m=0,h=0,y=0,o=D.Hooks.fixColors(o),n=D.Hooks.fixColors(n);p<o.length&&d<n.length;){var v=o[p],b=n[d];if(/[\d\.-]/.test(v)&&/[\d\.-]/.test(b)){for(var x=v,w=b,S=".",P=".";++p<o.length;){if((v=o[p])===S)S="..";else if(!/\d/.test(v))break;x+=v}for(;++d<n.length;){if((b=n[d])===P)P="..";else if(!/\d/.test(b))break;w+=b}var V,k,T=D.Hooks.getUnit(o,p),C=D.Hooks.getUnit(n,d);p+=T.length,d+=C.length,T===C?x===w?c+=x+T:(c+="{"+f.length+(h?"!":"")+"}"+T,f.push(parseFloat(x)),g.push(parseFloat(w))):(V=parseFloat(x),k=parseFloat(w),c+=(m<5?"calc":"")+"("+(V?"{"+f.length+(h?"!":"")+"}":"0")+T+" + "+(k?"{"+(f.length+(V?1:0))+(h?"!":"")+"}":"0")+C+")",V&&(f.push(V),g.push(0)),k&&(f.push(0),g.push(k)))}else{if(v!==b){m=0;break}c+=v,p++,d++,0===m&&"c"===v||1===m&&"a"===v||2===m&&"l"===v||3===m&&"c"===v||4<=m&&"("===v?m++:(m&&m<5||4<=m&&")"===v&&--m<5)&&(m=0),0===h&&"r"===v||1===h&&"g"===v||2===h&&"b"===v||3===h&&"a"===v||3<=h&&"("===v?(3===h&&"a"===v&&(y=1),h++):y&&","===v?3<++y&&(h=y=0):(y&&h<(y?5:4)||(y?4:3)<=h&&")"===v&&--h<(y?5:4))&&(h=y=0)}}p===o.length&&d===n.length||(G.debug&&console.error('Trying to pattern match mis-matched strings ["'+n+'", "'+o+'"]'),c=W),c&&(f.length?(G.debug&&console.log('Pattern found "'+c+'" -> ',f,g,"["+o+","+n+"]"),o=f,n=g,s=l=""):c=W)}c||(o=(F=t(e,o))[0],l=F[1],n=(F=t(e,n))[0].replace(/^([+-\/*])=/,function(e,t){return u=t,""}),s=F[1],o=parseFloat(o)||0,n=parseFloat(n)||0,"%"===s&&(/^(fontSize|lineHeight)$/.test(e)?(n/=100,s="em"):/^scale/.test(e)?(n/=100,s=""):/(Red|Green|Blue)$/i.test(e)&&(n=n/100*255,s="")));var A,F,E,N;if(/[\/*]/.test(u))s=l;else if(l!==s&&0!==o)if(0===n)s=l;else{L=L||(t={myParent:q.parentNode||B.body,position:D.getPropertyValue(q,"position"),fontSize:D.getPropertyValue(q,"fontSize")},F=t.position===M.lastPosition&&t.myParent===M.lastParent,E=t.fontSize===M.lastFontSize,M.lastParent=t.myParent,M.lastPosition=t.position,M.lastFontSize=t.fontSize,N={},E&&F?(N.emToPx=M.lastEmToPx,N.percentToPxWidth=M.lastPercentToPxWidth,N.percentToPxHeight=M.lastPercentToPxHeight):(A=O&&O.isSVG?B.createElementNS("http://www.w3.org/2000/svg","rect"):B.createElement("div"),G.init(A),t.myParent.appendChild(A),I.each(["overflow","overflowX","overflowY"],function(e,t){G.CSS.setPropertyValue(A,t,"hidden")}),G.CSS.setPropertyValue(A,"position",t.position),G.CSS.setPropertyValue(A,"fontSize",t.fontSize),G.CSS.setPropertyValue(A,"boxSizing","content-box"),I.each(["minWidth","maxWidth","width","minHeight","maxHeight","height"],function(e,t){G.CSS.setPropertyValue(A,t,"100%")}),G.CSS.setPropertyValue(A,"paddingLeft","100em"),N.percentToPxWidth=M.lastPercentToPxWidth=(parseFloat(D.getPropertyValue(A,"width",null,!0))||1)/100,N.percentToPxHeight=M.lastPercentToPxHeight=(parseFloat(D.getPropertyValue(A,"height",null,!0))||1)/100,N.emToPx=M.lastEmToPx=(parseFloat(D.getPropertyValue(A,"paddingLeft"))||1)/100,t.myParent.removeChild(A)),null===M.remToPx&&(M.remToPx=parseFloat(D.getPropertyValue(B.body,"fontSize"))||16),null===M.vwToPx&&(M.vwToPx=parseFloat($.innerWidth)/100,M.vhToPx=parseFloat($.innerHeight)/100),N.remToPx=M.remToPx,N.vwToPx=M.vwToPx,N.vhToPx=M.vhToPx,1<=G.debug&&console.log("Unit ratios: "+JSON.stringify(N),q),N);var H=/margin|padding|left|right|width|text|word|letter/i.test(e)||/X$/.test(e)||"x"===e?"x":"y";switch(l){case"%":o*="x"==H?L.percentToPxWidth:L.percentToPxHeight;break;case"px":break;default:o*=L[l+"ToPx"]}switch(s){case"%":o*=1/("x"==H?L.percentToPxWidth:L.percentToPxHeight);break;case"px":break;default:o*=1/L[s+"ToPx"]}}switch(u){case"+":n=o+n;break;case"-":n=o-n;break;case"*":n*=o;break;case"/":n=o/n}R[e]={rootPropertyValue:a,startValue:o,currentValue:o,endValue:n,unitType:s,easing:i},c&&(R[e].pattern=c),G.debug&&console.log("tweensContainer ("+e+"): "+JSON.stringify(R[e]),q)}else G.debug&&console.log("Skipping ["+r+"] due to a lack of browser support.")};for(c in V)if(V.hasOwnProperty(c)){var d=D.Names.camelCase(c),f=(f=V[c],a=r=h=g=void 0,Q.isFunction(f)&&(f=f.call(q,S,C)),Q.isArray(f)?(h=f[0],a=!Q.isArray(f[1])&&/^[\d-]/.test(f[1])||Q.isFunction(f[1])||D.RegEx.isHex.test(f[1])?f[1]:Q.isString(f[1])&&!D.RegEx.isHex.test(f[1])&&G.Easings[f[1]]||Q.isArray(f[1])?(r=g?f[1]:X(f[1],z.duration),f[2]):f[1]||f[2]):h=f,g||(r=r||z.easing),[(h=Q.isFunction(h)?h.call(q,S,C):h)||0,r,a=Q.isFunction(a)?a.call(q,S,C):a]);if(N(D.Lists.colors)){var g=f[0],m=f[1],h=f[2];if(D.RegEx.isHex.test(g)){for(var y=["Red","Green","Blue"],v=D.Values.hexToRgb(g),b=h?D.Values.hexToRgb(h):W,x=0;x<y.length;x++){var w=[v[x]];m&&w.push(m),b!==W&&w.push(b[x]),p(d+y[x],w)}continue}}p(d,f)}R.element=q}R.element&&(D.Values.addClass(q,"velocity-animating"),E.push(R),(O=H(q))&&(""===z.queue&&(O.tweensContainer=R,O.opts=z),O.isAnimating=!0),A===C-1?(G.State.calls.push([E,P,z,null,k.resolver,null,0]),!1===G.State.isTicking&&(G.State.isTicking=!0,Y())):A++)}!1!==G.mock&&(!0===G.mock?z.duration=z.delay=1:(z.duration*=parseFloat(G.mock)||1,z.delay*=parseFloat(G.mock)||1)),z.easing=X(z.easing,z.duration),z.begin&&!Q.isFunction(z.begin)&&(z.begin=null),z.progress&&!Q.isFunction(z.progress)&&(z.progress=null),z.complete&&!Q.isFunction(z.complete)&&(z.complete=null),z.display!==W&&null!==z.display&&(z.display=z.display.toString().toLowerCase(),"auto"===z.display)&&(z.display=G.CSS.Values.getDisplayType(q)),z.visibility!==W&&null!==z.visibility&&(z.visibility=z.visibility.toString().toLowerCase()),z.mobileHA=z.mobileHA&&G.State.isMobile&&!G.State.isGingerbread,!1===z.queue?z.delay?(e=G.State.delayedElements.count++,G.State.delayedElements[e]=q,t=e,e=function(){G.State.delayedElements[t]=!1,r()},H(q).delayBegin=(new Date).getTime(),H(q).delay=parseFloat(z.delay),H(q).delayTimer={setTimeout:setTimeout(r,parseFloat(z.delay)),next:e}):r():I.queue(q,z.queue,function(e,t){if(!0===t)return k.promise&&k.resolver(P),!0;G.velocityQueueEntryFlag=!0,r()}),""!==z.queue&&"fx"!==z.queue||"inprogress"===I.queue(q)[0]||I.dequeue(q)}k.promise&&(V&&F&&!1===F.promiseRejectEmpty?k.resolver():k.rejecter())},G)).animate=y,T=$.requestAnimationFrame||r,G.State.isMobile||B.hidden===W||((s=function(){B.hidden?(T=function(e){return setTimeout(function(){e(!0)},16)},Y()):T=$.requestAnimationFrame||r})(),B.addEventListener("visibilitychange",s)),t.Velocity=G,t!==$&&(t.fn.velocity=y,t.fn.velocity.defaults=G.defaults),I.each(["Down","Up"],function(e,c){G.Redirects["slide"+c]=function(r,e,a,t,n,i){var e=I.extend({},e),o=e.begin,s=e.complete,l={},u={height:"",marginTop:"",marginBottom:"",paddingTop:"",paddingBottom:""};e.display===W&&(e.display="Down"===c?"inline"===G.CSS.Values.getDisplayType(r)?"inline-block":"block":"none"),e.begin=function(){for(var e in 0===a&&o&&o.call(n,n),u){var t;u.hasOwnProperty(e)&&(l[e]=r.style[e],t=D.getPropertyValue(r,e),u[e]="Down"===c?[t,0]:[0,t])}l.overflow=r.style.overflow,r.style.overflow="hidden"},e.complete=function(){for(var e in l)l.hasOwnProperty(e)&&(r.style[e]=l[e]);a===t-1&&(s&&s.call(n,n),i)&&i.resolver(n)},G(r,u,e)}}),I.each(["In","Out"],function(e,l){G.Redirects["fade"+l]=function(e,t,r,a,n,i){var t=I.extend({},t),o=t.complete,s={opacity:"In"===l?1:0};0!==r&&(t.begin=null),t.complete=r!==a-1?null:function(){o&&o.call(n,n),i&&i.resolver(n)},t.display===W&&(t.display="In"===l?"auto":"none"),G(this,s,t)}}),G;function H(e){e=I.data(e,"velocity");return null===e?W:e}function v(e,t){e=H(e);e&&e.delayTimer&&!e.delayPaused&&(e.delayRemaining=e.delay-t+e.delayBegin,e.delayPaused=!0,clearTimeout(e.delayTimer.setTimeout))}function b(e){e=H(e);e&&e.delayTimer&&e.delayPaused&&(e.delayPaused=!1,e.delayTimer.setTimeout=setTimeout(e.delayTimer.next,e.delayRemaining))}function l(h,t,y,r){var v=4,b=.001,x=1e-7,w=10,S=11,P=1/(S-1),e="Float32Array"in $;if(4!==arguments.length)return!1;for(var a=0;a<4;++a)if("number"!=typeof arguments[a]||isNaN(arguments[a])||!isFinite(arguments[a]))return!1;h=Math.min(h,1),y=Math.min(y,1),h=Math.max(h,0),y=Math.max(y,0);var V=new(e?Float32Array:Array)(S);function n(e,t){return 1-3*t+3*e}function k(e,t,r){return((n(t,r)*e+(3*r-6*t))*e+3*t)*e}function T(e,t,r){return 3*n(t,r)*e*e+2*(3*r-6*t)*e+3*t}function i(e){for(var t=0,r=1,a=S-1;r!==a&&V[r]<=e;++r)t+=P;var n=t+(e-V[--r])/(V[r+1]-V[r])*P,i=T(n,h,y);if(b<=i){for(var o=e,s=n,l=0;l<v;++l){var u=T(s,h,y);if(0===u)return s;s-=(k(s,h,y)-o)/u}return s}if(0===i)return n;for(var c,p,d=e,f=t,g=t+P,m=0;0<(c=k(p=f+(g-f)/2,h,y)-d)?g=p:f=p,Math.abs(c)>x&&++m<w;);return p}var o=!1;function s(){if(o=!0,h!==t||y!==r)for(var e=0;e<S;++e)V[e]=k(e*P,h,y)}function l(e){return o||s(),h===t&&y===r?e:0===e?0:1===e?1:k(i(e),t,r)}l.getControlPoints=function(){return[{x:h,y:t},{x:y,y:r}]};var u="generateBezier("+[h,t,y,r]+")";return l.toString=function(){return u},l}function x(e){return-e.tension*e.x-e.friction*e.v}function w(e,t,r){r={x:e.x+r.dx*t,v:e.v+r.dv*t,tension:e.tension,friction:e.friction};return{dx:r.v,dv:x(r)}}function X(e,t){var r=e;return Q.isString(e)?G.Easings[e]||(r=!1):r=Q.isArray(e)&&1===e.length?function(t){return function(e){return Math.round(e*t)*(1/t)}}.apply(null,e):Q.isArray(e)&&2===e.length?o.apply(null,e.concat([t])):!(!Q.isArray(e)||4!==e.length)&&l.apply(null,e),r=!1===r?G.Easings[G.defaults.easing]?G.defaults.easing:i:r}function Y(e){if(e){var t=G.timestamp&&!0!==e?e:k.now(),r=G.State.calls.length;1e4<r&&(G.State.calls=function(e){for(var t=-1,r=e?e.length:0,a=[];++t<r;){var n=e[t];n&&a.push(n)}return a}(G.State.calls),r=G.State.calls.length);for(var a=0;a<r;a++)if(G.State.calls[a]){var n=G.State.calls[a],i=n[0],o=n[2],s=!(p=n[3]),l=null,u=n[5],c=n[6],p=p||(G.State.calls[a][3]=t-16);if(u){if(!0!==u.resume)continue;p=n[3]=Math.round(t-c-16),n[5]=null}for(var c=n[6]=t-p,d=Math.min(c/o.duration,1),f=0,g=i.length;f<g;f++){var m=i[f],h=m.element;if(H(h)){var y,v,b,x,w,S,P=!1;for(y in o.display!==W&&null!==o.display&&"none"!==o.display&&("flex"===o.display&&I.each(["-webkit-box","-moz-box","-ms-flexbox","-webkit-flex"],function(e,t){D.setPropertyValue(h,"display",t)}),D.setPropertyValue(h,"display",o.display)),o.visibility!==W&&"hidden"!==o.visibility&&D.setPropertyValue(h,"visibility",o.visibility),m)m.hasOwnProperty(y)&&"element"!==y&&(v=m[y],b=Q.isString(v.easing)?G.Easings[v.easing]:v.easing,x=Q.isString(v.pattern)?v.pattern.replace(/{(\d+)(!)?}/g,1===d?function(e,t,r){t=v.endValue[t];return r?Math.round(t):t}:function(e,t,r){var a=v.startValue[t],t=v.endValue[t]-a,a=a+t*b(d,o,t);return r?Math.round(a):a}):1===d?v.endValue:(x=v.endValue-v.startValue,v.startValue+x*b(d,o,x)),!s&&x===v.currentValue||(v.currentValue=x,"tween"===y?l=x:(D.Hooks.registered[y]&&(w=D.Hooks.getRoot(y),S=H(h).rootPropertyValueCache[w])&&(v.rootPropertyValue=S),S=D.setPropertyValue(h,y,v.currentValue+(V<9&&0===parseFloat(x)?"":v.unitType),v.rootPropertyValue,v.scrollData),D.Hooks.registered[y]&&(D.Normalizations.registered[w]?H(h).rootPropertyValueCache[w]=D.Normalizations.registered[w]("extract",null,S[1]):H(h).rootPropertyValueCache[w]=S[1]),"transform"===S[0]&&(P=!0))));o.mobileHA&&H(h).transformCache.translate3d===W&&(H(h).transformCache.translate3d="(0px, 0px, 0px)",P=!0),P&&D.flushTransformCache(h)}}o.display!==W&&"none"!==o.display&&(G.State.calls[a][2].display=!1),o.visibility!==W&&"hidden"!==o.visibility&&(G.State.calls[a][2].visibility=!1),o.progress&&o.progress.call(n[1],n[1],d,Math.max(0,p+o.duration-t),p,l),1===d&&O(a)}}G.State.isTicking&&T(Y)}function O(e,t){if(G.State.calls[e]){for(var r=G.State.calls[e][0],a=G.State.calls[e][1],n=G.State.calls[e][2],i=G.State.calls[e][4],o=!1,s=0,l=r.length;s<l;s++){var u,c=r[s].element,p=(t||n.loop||("none"===n.display&&D.setPropertyValue(c,"display",n.display),"hidden"===n.visibility&&D.setPropertyValue(c,"visibility",n.visibility)),H(c));if(!0===n.loop||I.queue(c)[1]!==W&&/\.velocityQueueEntryFlag/i.test(I.queue(c)[1])||p&&(p.isAnimating=!1,u=!(p.rootPropertyValueCache={}),I.each(D.Lists.transforms3D,function(e,t){var r=/^scale/.test(t)?1:0,a=p.transformCache[t];p.transformCache[t]!==W&&new RegExp("^\\("+r+"[^.]").test(a)&&(u=!0,delete p.transformCache[t])}),n.mobileHA&&(u=!0,delete p.transformCache.translate3d),u&&D.flushTransformCache(c),D.Values.removeClass(c,"velocity-animating")),!t&&n.complete&&!n.loop&&s===l-1)try{n.complete.call(a,a)}catch(e){setTimeout(function(){throw e},1)}i&&!0!==n.loop&&i(a),p&&!0===n.loop&&!t&&(I.each(p.tweensContainer,function(e,t){var r;/^rotate/.test(e)&&(parseFloat(t.startValue)-parseFloat(t.endValue))%360==0&&(r=t.startValue,t.startValue=t.endValue,t.endValue=r),/^backgroundPosition/.test(e)&&100===parseFloat(t.endValue)&&"%"===t.unitType&&(t.endValue=0,t.startValue=100)}),G(c,"reverse",{loop:!0,delay:n.delay})),!1!==n.queue&&I.dequeue(c,n.queue)}G.State.calls[e]=!1;for(var d=0,f=G.State.calls.length;d<f;d++)if(!1!==G.State.calls[d]){o=!0;break}!1===o&&(G.State.isTicking=!1,delete G.State.calls,G.State.calls=[])}}jQuery.fn.velocity=jQuery.fn.animate});
\ No newline at end of file
diff --git a/4X/Standard/Min/VelocityUI.js b/4X/Standard/Min/VelocityUI.js
index 7eb14a24..4112d623 100644
--- a/4X/Standard/Min/VelocityUI.js
+++ b/4X/Standard/Min/VelocityUI.js
@@ -2,4 +2,4 @@
  Velocity UI Pack
  **********************/
 /* VelocityJS.org UI Pack (5.2.0). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License. Portions copyright Daniel Eden, Christian Pucci. */
-!function(t){"use strict";"function"==typeof require&&"object"==typeof exports?module.exports=t():"function"==typeof define&&define.amd?define(["velocity"],t):t()}(function(){"use strict";var t=window.jQuery||window.Zepto||window,a=window,O=void(window&&window.document),v=t.Velocity;if(v&&v.Utilities){var e,r,n,D=v.Utilities,t=v.version;if(t=t,r=[],(e={major:1,minor:1,patch:0})&&t&&(D.each([e,t],function(t,a){var e=[];D.each(a,function(t,a){for(;a.toString().length<5;)a="0"+a;e.push(a)}),r.push(e.join(""))}),parseFloat(r[0])>parseFloat(r[1])))throw e="Velocity UI Pack: You need to update Velocity (velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity.",alert(e),new Error(e);for(n in v.RegisterEffect=v.RegisterUI=function(X,Y){return v.Redirects[X]=function(r,s,n,i,o,l,c){var u=n===i-1,t=0;c=c||Y.loop,"function"==typeof Y.defaultDuration?Y.defaultDuration=Y.defaultDuration.call(o,o):Y.defaultDuration=parseFloat(Y.defaultDuration);for(var a=0;a<Y.calls.length;a++)"number"==typeof(y=Y.calls[a][1])&&(t+=y);for(var e=1<=t?0:Y.calls.length?(1-t)/Y.calls.length:1,a=0;a<Y.calls.length;a++){var f,p=Y.calls[a],d=p[0],g=1e3,y=p[1],p=p[2]||{},m={};s.duration!==O?g=s.duration:Y.defaultDuration!==O&&(g=Y.defaultDuration),m.duration=g*("number"==typeof y?y:e),m.queue=s.queue||"",m.easing=p.easing||"ease",m.delay=parseFloat(p.delay)||0,m.loop=!Y.loop&&p.loop,m._cacheValues=p._cacheValues||!0,0===a&&(m.delay+=parseFloat(s.delay)||0,0===n&&(m.begin=function(){s.begin&&s.begin.call(o,o);var t,a,r,n,i,e=X.match(/(In|Out)$/);e&&"In"===e[0]&&d.opacity!==O&&D.each(o.nodeType?[o]:o,function(t,a){v.CSS.setPropertyValue(a,"opacity",0)}),s.animateParentHeight&&e&&(t=o,e=e[0],a=g+m.delay,r=s.stagger,i=0,D.each(t.nodeType?[t]:t,function(t,e){r&&(a+=t*r),n=e.parentNode;t=["height","paddingTop","paddingBottom","marginTop","marginBottom"];"border-box"===v.CSS.getPropertyValue(e,"boxSizing").toString().toLowerCase()&&(t=["height"]),D.each(t,function(t,a){i+=parseFloat(v.CSS.getPropertyValue(e,a))})}),v.animate(n,{height:("In"===e?"+":"-")+"="+i},{queue:!1,easing:"ease-in-out",duration:a*("In"===e?.6:1)}))}),null!==s.display&&(s.display!==O&&"none"!==s.display?m.display=s.display:/In$/.test(X)&&(p=v.CSS.Values.getDisplayType(r),m.display="inline"===p?"inline-block":p)),s.visibility)&&"hidden"!==s.visibility&&(m.visibility=s.visibility),a===Y.calls.length-1&&(f=function(){s.display!==O&&"none"!==s.display||!/Out$/.test(X)||D.each(o.nodeType?[o]:o,function(t,a){v.CSS.setPropertyValue(a,"display","none")}),s.complete&&s.complete.call(o,o),l&&l.resolver(o||r)},m.complete=function(){if(c&&v.Redirects[X](r,s,n,i,o,l,!0===c||Math.max(0,c-1)),Y.reset){for(var t in Y.reset){var a;Y.reset.hasOwnProperty(t)&&(a=Y.reset[t],v.CSS.Hooks.registered[t]!==O||"string"!=typeof a&&"number"!=typeof a||(Y.reset[t]=[Y.reset[t],Y.reset[t]]))}var e={duration:0,queue:!1};u&&(e.complete=f),v.animate(r,Y.reset,e)}else u&&f()},"hidden"===s.visibility)&&(m.visibility=s.visibility),v.animate(r,d,m)}},v},v.RegisterEffect.packagedEffects={"callout.bounce":{defaultDuration:550,calls:[[{translateY:-30},.25],[{translateY:0},.125],[{translateY:-15},.125],[{translateY:0},.25]]},"callout.shake":{defaultDuration:800,calls:[[{translateX:-11}],[{translateX:11}],[{translateX:-11}],[{translateX:11}],[{translateX:-11}],[{translateX:11}],[{translateX:-11}],[{translateX:0}]]},"callout.flash":{defaultDuration:1100,calls:[[{opacity:[0,"easeInOutQuad",1]}],[{opacity:[1,"easeInOutQuad"]}],[{opacity:[0,"easeInOutQuad"]}],[{opacity:[1,"easeInOutQuad"]}]]},"callout.pulse":{defaultDuration:825,calls:[[{scaleX:1.1,scaleY:1.1},.5,{easing:"easeInExpo"}],[{scaleX:1,scaleY:1},.5]]},"callout.swing":{defaultDuration:950,calls:[[{rotateZ:15}],[{rotateZ:-10}],[{rotateZ:5}],[{rotateZ:-5}],[{rotateZ:0}]]},"callout.tada":{defaultDuration:1e3,calls:[[{scaleX:.9,scaleY:.9,rotateZ:-3},.1],[{scaleX:1.1,scaleY:1.1,rotateZ:3},.1],[{scaleX:1.1,scaleY:1.1,rotateZ:-3},.1],["reverse",.125],["reverse",.125],["reverse",.125],["reverse",.125],["reverse",.125],[{scaleX:1,scaleY:1,rotateZ:0},.2]]},"transition.fadeIn":{defaultDuration:500,calls:[[{opacity:[1,0]}]]},"transition.fadeOut":{defaultDuration:500,calls:[[{opacity:[0,1]}]]},"transition.flipXIn":{defaultDuration:700,calls:[[{opacity:[1,0],transformPerspective:[800,800],rotateY:[0,-55]}]],reset:{transformPerspective:0}},"transition.flipXOut":{defaultDuration:700,calls:[[{opacity:[0,1],transformPerspective:[800,800],rotateY:55}]],reset:{transformPerspective:0,rotateY:0}},"transition.flipYIn":{defaultDuration:800,calls:[[{opacity:[1,0],transformPerspective:[800,800],rotateX:[0,-45]}]],reset:{transformPerspective:0}},"transition.flipYOut":{defaultDuration:800,calls:[[{opacity:[0,1],transformPerspective:[800,800],rotateX:25}]],reset:{transformPerspective:0,rotateX:0}},"transition.flipBounceXIn":{defaultDuration:900,calls:[[{opacity:[.725,0],transformPerspective:[400,400],rotateY:[-10,90]},.5],[{opacity:.8,rotateY:10},.25],[{opacity:1,rotateY:0},.25]],reset:{transformPerspective:0}},"transition.flipBounceXOut":{defaultDuration:800,calls:[[{opacity:[.9,1],transformPerspective:[400,400],rotateY:-10}],[{opacity:0,rotateY:90}]],reset:{transformPerspective:0,rotateY:0}},"transition.flipBounceYIn":{defaultDuration:850,calls:[[{opacity:[.725,0],transformPerspective:[400,400],rotateX:[-10,90]},.5],[{opacity:.8,rotateX:10},.25],[{opacity:1,rotateX:0},.25]],reset:{transformPerspective:0}},"transition.flipBounceYOut":{defaultDuration:800,calls:[[{opacity:[.9,1],transformPerspective:[400,400],rotateX:-15}],[{opacity:0,rotateX:90}]],reset:{transformPerspective:0,rotateX:0}},"transition.swoopIn":{defaultDuration:850,calls:[[{opacity:[1,0],transformOriginX:["100%","50%"],transformOriginY:["100%","100%"],scaleX:[1,0],scaleY:[1,0],translateX:[0,-700],translateZ:0}]],reset:{transformOriginX:"50%",transformOriginY:"50%"}},"transition.swoopOut":{defaultDuration:850,calls:[[{opacity:[0,1],transformOriginX:["50%","100%"],transformOriginY:["100%","100%"],scaleX:0,scaleY:0,translateX:-700,translateZ:0}]],reset:{transformOriginX:"50%",transformOriginY:"50%",scaleX:1,scaleY:1,translateX:0}},"transition.whirlIn":{defaultDuration:850,calls:[[{opacity:[1,0],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:[1,0],scaleY:[1,0],rotateY:[0,160]},1,{easing:"easeInOutSine"}]]},"transition.whirlOut":{defaultDuration:750,calls:[[{opacity:[0,"easeInOutQuint",1],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:0,scaleY:0,rotateY:160},1,{easing:"swing"}]],reset:{scaleX:1,scaleY:1,rotateY:0}},"transition.shrinkIn":{defaultDuration:750,calls:[[{opacity:[1,0],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:[1,1.5],scaleY:[1,1.5],translateZ:0}]]},"transition.shrinkOut":{defaultDuration:600,calls:[[{opacity:[0,1],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:1.3,scaleY:1.3,translateZ:0}]],reset:{scaleX:1,scaleY:1}},"transition.expandIn":{defaultDuration:700,calls:[[{opacity:[1,0],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:[1,.625],scaleY:[1,.625],translateZ:0}]]},"transition.expandOut":{defaultDuration:700,calls:[[{opacity:[0,1],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:.5,scaleY:.5,translateZ:0}]],reset:{scaleX:1,scaleY:1}},"transition.bounceIn":{defaultDuration:800,calls:[[{opacity:[1,0],scaleX:[1.05,.3],scaleY:[1.05,.3]},.35],[{scaleX:.9,scaleY:.9,translateZ:0},.2],[{scaleX:1,scaleY:1},.45]]},"transition.bounceOut":{defaultDuration:800,calls:[[{scaleX:.95,scaleY:.95},.35],[{scaleX:1.1,scaleY:1.1,translateZ:0},.35],[{opacity:[0,1],scaleX:.3,scaleY:.3},.3]],reset:{scaleX:1,scaleY:1}},"transition.bounceUpIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateY:[-30,1e3]},.6,{easing:"easeOutCirc"}],[{translateY:10},.2],[{translateY:0},.2]]},"transition.bounceUpOut":{defaultDuration:1e3,calls:[[{translateY:20},.2],[{opacity:[0,"easeInCirc",1],translateY:-1e3},.8]],reset:{translateY:0}},"transition.bounceDownIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateY:[30,-1e3]},.6,{easing:"easeOutCirc"}],[{translateY:-10},.2],[{translateY:0},.2]]},"transition.bounceDownOut":{defaultDuration:1e3,calls:[[{translateY:-20},.2],[{opacity:[0,"easeInCirc",1],translateY:1e3},.8]],reset:{translateY:0}},"transition.bounceLeftIn":{defaultDuration:750,calls:[[{opacity:[1,0],translateX:[30,-1250]},.6,{easing:"easeOutCirc"}],[{translateX:-10},.2],[{translateX:0},.2]]},"transition.bounceLeftOut":{defaultDuration:750,calls:[[{translateX:30},.2],[{opacity:[0,"easeInCirc",1],translateX:-1250},.8]],reset:{translateX:0}},"transition.bounceRightIn":{defaultDuration:750,calls:[[{opacity:[1,0],translateX:[-30,1250]},.6,{easing:"easeOutCirc"}],[{translateX:10},.2],[{translateX:0},.2]]},"transition.bounceRightOut":{defaultDuration:750,calls:[[{translateX:-30},.2],[{opacity:[0,"easeInCirc",1],translateX:1250},.8]],reset:{translateX:0}},"transition.slideUpIn":{defaultDuration:900,calls:[[{opacity:[1,0],translateY:[0,20],translateZ:0}]]},"transition.slideUpOut":{defaultDuration:900,calls:[[{opacity:[0,1],translateY:-20,translateZ:0}]],reset:{translateY:0}},"transition.slideDownIn":{defaultDuration:900,calls:[[{opacity:[1,0],translateY:[0,-20],translateZ:0}]]},"transition.slideDownOut":{defaultDuration:900,calls:[[{opacity:[0,1],translateY:20,translateZ:0}]],reset:{translateY:0}},"transition.slideLeftIn":{defaultDuration:1e3,calls:[[{opacity:[1,0],translateX:[0,-20],translateZ:0}]]},"transition.slideLeftOut":{defaultDuration:1050,calls:[[{opacity:[0,1],translateX:-20,translateZ:0}]],reset:{translateX:0}},"transition.slideRightIn":{defaultDuration:1e3,calls:[[{opacity:[1,0],translateX:[0,20],translateZ:0}]]},"transition.slideRightOut":{defaultDuration:1050,calls:[[{opacity:[0,1],translateX:20,translateZ:0}]],reset:{translateX:0}},"transition.slideUpBigIn":{defaultDuration:850,calls:[[{opacity:[1,0],translateY:[0,75],translateZ:0}]]},"transition.slideUpBigOut":{defaultDuration:800,calls:[[{opacity:[0,1],translateY:-75,translateZ:0}]],reset:{translateY:0}},"transition.slideDownBigIn":{defaultDuration:850,calls:[[{opacity:[1,0],translateY:[0,-75],translateZ:0}]]},"transition.slideDownBigOut":{defaultDuration:800,calls:[[{opacity:[0,1],translateY:75,translateZ:0}]],reset:{translateY:0}},"transition.slideLeftBigIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateX:[0,-75],translateZ:0}]]},"transition.slideLeftBigOut":{defaultDuration:750,calls:[[{opacity:[0,1],translateX:-75,translateZ:0}]],reset:{translateX:0}},"transition.slideRightBigIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateX:[0,75],translateZ:0}]]},"transition.slideRightBigOut":{defaultDuration:750,calls:[[{opacity:[0,1],translateX:75,translateZ:0}]],reset:{translateX:0}},"transition.perspectiveUpIn":{defaultDuration:800,calls:[[{opacity:[1,0],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:["100%","100%"],rotateX:[0,-180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveUpOut":{defaultDuration:850,calls:[[{opacity:[0,1],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:["100%","100%"],rotateX:-180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateX:0}},"transition.perspectiveDownIn":{defaultDuration:800,calls:[[{opacity:[1,0],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:[0,0],rotateX:[0,180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveDownOut":{defaultDuration:850,calls:[[{opacity:[0,1],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:[0,0],rotateX:180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateX:0}},"transition.perspectiveLeftIn":{defaultDuration:950,calls:[[{opacity:[1,0],transformPerspective:[2e3,2e3],transformOriginX:[0,0],transformOriginY:[0,0],rotateY:[0,-180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveLeftOut":{defaultDuration:950,calls:[[{opacity:[0,1],transformPerspective:[2e3,2e3],transformOriginX:[0,0],transformOriginY:[0,0],rotateY:-180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateY:0}},"transition.perspectiveRightIn":{defaultDuration:950,calls:[[{opacity:[1,0],transformPerspective:[2e3,2e3],transformOriginX:["100%","100%"],transformOriginY:[0,0],rotateY:[0,180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveRightOut":{defaultDuration:950,calls:[[{opacity:[0,1],transformPerspective:[2e3,2e3],transformOriginX:["100%","100%"],transformOriginY:[0,0],rotateY:180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateY:0}}},v.RegisterEffect.packagedEffects)v.RegisterEffect.packagedEffects.hasOwnProperty(n)&&v.RegisterEffect(n,v.RegisterEffect.packagedEffects[n]);v.RunSequence=function(t){var s=D.extend(!0,[],t);1<s.length&&(D.each(s.reverse(),function(t,a){var e,r,n,i=s[t+1];i&&(t=a.o||a.options,e=i.o||i.options,t=t&&!1===t.sequenceQueue?"begin":"complete",r=e&&e[t],(n={})[t]=function(){var t=i.e||i.elements,t=t.nodeType?[t]:t;r&&r.call(t,t),v(a)},i.o?i.o=D.extend({},e,n):i.options=D.extend({},e,n))}),s.reverse()),v(s[0])}}else a.console&&console.log("Velocity UI Pack: Velocity must be loaded first. Aborting.")});
\ No newline at end of file
+!function(t){"function"==typeof require&&"object"==typeof exports?module.exports=t():"function"==typeof define&&define.amd?define(["velocity"],t):t()}(function(){var t=window.jQuery||window.Zepto||window,a=window,O=void(window&&window.document),v=t.Velocity;if(v&&v.Utilities){var e,r,n,D=v.Utilities,t=v.version;if(t=t,r=[],(e={major:1,minor:1,patch:0})&&t&&(D.each([e,t],function(t,a){var e=[];D.each(a,function(t,a){for(;a.toString().length<5;)a="0"+a;e.push(a)}),r.push(e.join(""))}),parseFloat(r[0])>parseFloat(r[1])))throw e="Velocity UI Pack: You need to update Velocity (velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity.",alert(e),new Error(e);for(n in v.RegisterEffect=v.RegisterUI=function(X,Y){return v.Redirects[X]=function(r,s,n,i,o,l,c){var u=n===i-1,t=0;c=c||Y.loop,"function"==typeof Y.defaultDuration?Y.defaultDuration=Y.defaultDuration.call(o,o):Y.defaultDuration=parseFloat(Y.defaultDuration);for(var a=0;a<Y.calls.length;a++)"number"==typeof(y=Y.calls[a][1])&&(t+=y);for(var e=1<=t?0:Y.calls.length?(1-t)/Y.calls.length:1,a=0;a<Y.calls.length;a++){var f,p=Y.calls[a],d=p[0],g=1e3,y=p[1],p=p[2]||{},m={};s.duration!==O?g=s.duration:Y.defaultDuration!==O&&(g=Y.defaultDuration),m.duration=g*("number"==typeof y?y:e),m.queue=s.queue||"",m.easing=p.easing||"ease",m.delay=parseFloat(p.delay)||0,m.loop=!Y.loop&&p.loop,m._cacheValues=p._cacheValues||!0,0===a&&(m.delay+=parseFloat(s.delay)||0,0===n&&(m.begin=function(){s.begin&&s.begin.call(o,o);var t,a,r,n,i,e=X.match(/(In|Out)$/);e&&"In"===e[0]&&d.opacity!==O&&D.each(o.nodeType?[o]:o,function(t,a){v.CSS.setPropertyValue(a,"opacity",0)}),s.animateParentHeight&&e&&(t=o,e=e[0],a=g+m.delay,r=s.stagger,i=0,D.each(t.nodeType?[t]:t,function(t,e){r&&(a+=t*r),n=e.parentNode;t=["height","paddingTop","paddingBottom","marginTop","marginBottom"];"border-box"===v.CSS.getPropertyValue(e,"boxSizing").toString().toLowerCase()&&(t=["height"]),D.each(t,function(t,a){i+=parseFloat(v.CSS.getPropertyValue(e,a))})}),v.animate(n,{height:("In"===e?"+":"-")+"="+i},{queue:!1,easing:"ease-in-out",duration:a*("In"===e?.6:1)}))}),null!==s.display&&(s.display!==O&&"none"!==s.display?m.display=s.display:/In$/.test(X)&&(p=v.CSS.Values.getDisplayType(r),m.display="inline"===p?"inline-block":p)),s.visibility)&&"hidden"!==s.visibility&&(m.visibility=s.visibility),a===Y.calls.length-1&&(f=function(){s.display!==O&&"none"!==s.display||!/Out$/.test(X)||D.each(o.nodeType?[o]:o,function(t,a){v.CSS.setPropertyValue(a,"display","none")}),s.complete&&s.complete.call(o,o),l&&l.resolver(o||r)},m.complete=function(){if(c&&v.Redirects[X](r,s,n,i,o,l,!0===c||Math.max(0,c-1)),Y.reset){for(var t in Y.reset){var a;Y.reset.hasOwnProperty(t)&&(a=Y.reset[t],v.CSS.Hooks.registered[t]!==O||"string"!=typeof a&&"number"!=typeof a||(Y.reset[t]=[Y.reset[t],Y.reset[t]]))}var e={duration:0,queue:!1};u&&(e.complete=f),v.animate(r,Y.reset,e)}else u&&f()},"hidden"===s.visibility)&&(m.visibility=s.visibility),v.animate(r,d,m)}},v},v.RegisterEffect.packagedEffects={"callout.bounce":{defaultDuration:550,calls:[[{translateY:-30},.25],[{translateY:0},.125],[{translateY:-15},.125],[{translateY:0},.25]]},"callout.shake":{defaultDuration:800,calls:[[{translateX:-11}],[{translateX:11}],[{translateX:-11}],[{translateX:11}],[{translateX:-11}],[{translateX:11}],[{translateX:-11}],[{translateX:0}]]},"callout.flash":{defaultDuration:1100,calls:[[{opacity:[0,"easeInOutQuad",1]}],[{opacity:[1,"easeInOutQuad"]}],[{opacity:[0,"easeInOutQuad"]}],[{opacity:[1,"easeInOutQuad"]}]]},"callout.pulse":{defaultDuration:825,calls:[[{scaleX:1.1,scaleY:1.1},.5,{easing:"easeInExpo"}],[{scaleX:1,scaleY:1},.5]]},"callout.swing":{defaultDuration:950,calls:[[{rotateZ:15}],[{rotateZ:-10}],[{rotateZ:5}],[{rotateZ:-5}],[{rotateZ:0}]]},"callout.tada":{defaultDuration:1e3,calls:[[{scaleX:.9,scaleY:.9,rotateZ:-3},.1],[{scaleX:1.1,scaleY:1.1,rotateZ:3},.1],[{scaleX:1.1,scaleY:1.1,rotateZ:-3},.1],["reverse",.125],["reverse",.125],["reverse",.125],["reverse",.125],["reverse",.125],[{scaleX:1,scaleY:1,rotateZ:0},.2]]},"transition.fadeIn":{defaultDuration:500,calls:[[{opacity:[1,0]}]]},"transition.fadeOut":{defaultDuration:500,calls:[[{opacity:[0,1]}]]},"transition.flipXIn":{defaultDuration:700,calls:[[{opacity:[1,0],transformPerspective:[800,800],rotateY:[0,-55]}]],reset:{transformPerspective:0}},"transition.flipXOut":{defaultDuration:700,calls:[[{opacity:[0,1],transformPerspective:[800,800],rotateY:55}]],reset:{transformPerspective:0,rotateY:0}},"transition.flipYIn":{defaultDuration:800,calls:[[{opacity:[1,0],transformPerspective:[800,800],rotateX:[0,-45]}]],reset:{transformPerspective:0}},"transition.flipYOut":{defaultDuration:800,calls:[[{opacity:[0,1],transformPerspective:[800,800],rotateX:25}]],reset:{transformPerspective:0,rotateX:0}},"transition.flipBounceXIn":{defaultDuration:900,calls:[[{opacity:[.725,0],transformPerspective:[400,400],rotateY:[-10,90]},.5],[{opacity:.8,rotateY:10},.25],[{opacity:1,rotateY:0},.25]],reset:{transformPerspective:0}},"transition.flipBounceXOut":{defaultDuration:800,calls:[[{opacity:[.9,1],transformPerspective:[400,400],rotateY:-10}],[{opacity:0,rotateY:90}]],reset:{transformPerspective:0,rotateY:0}},"transition.flipBounceYIn":{defaultDuration:850,calls:[[{opacity:[.725,0],transformPerspective:[400,400],rotateX:[-10,90]},.5],[{opacity:.8,rotateX:10},.25],[{opacity:1,rotateX:0},.25]],reset:{transformPerspective:0}},"transition.flipBounceYOut":{defaultDuration:800,calls:[[{opacity:[.9,1],transformPerspective:[400,400],rotateX:-15}],[{opacity:0,rotateX:90}]],reset:{transformPerspective:0,rotateX:0}},"transition.swoopIn":{defaultDuration:850,calls:[[{opacity:[1,0],transformOriginX:["100%","50%"],transformOriginY:["100%","100%"],scaleX:[1,0],scaleY:[1,0],translateX:[0,-700],translateZ:0}]],reset:{transformOriginX:"50%",transformOriginY:"50%"}},"transition.swoopOut":{defaultDuration:850,calls:[[{opacity:[0,1],transformOriginX:["50%","100%"],transformOriginY:["100%","100%"],scaleX:0,scaleY:0,translateX:-700,translateZ:0}]],reset:{transformOriginX:"50%",transformOriginY:"50%",scaleX:1,scaleY:1,translateX:0}},"transition.whirlIn":{defaultDuration:850,calls:[[{opacity:[1,0],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:[1,0],scaleY:[1,0],rotateY:[0,160]},1,{easing:"easeInOutSine"}]]},"transition.whirlOut":{defaultDuration:750,calls:[[{opacity:[0,"easeInOutQuint",1],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:0,scaleY:0,rotateY:160},1,{easing:"swing"}]],reset:{scaleX:1,scaleY:1,rotateY:0}},"transition.shrinkIn":{defaultDuration:750,calls:[[{opacity:[1,0],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:[1,1.5],scaleY:[1,1.5],translateZ:0}]]},"transition.shrinkOut":{defaultDuration:600,calls:[[{opacity:[0,1],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:1.3,scaleY:1.3,translateZ:0}]],reset:{scaleX:1,scaleY:1}},"transition.expandIn":{defaultDuration:700,calls:[[{opacity:[1,0],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:[1,.625],scaleY:[1,.625],translateZ:0}]]},"transition.expandOut":{defaultDuration:700,calls:[[{opacity:[0,1],transformOriginX:["50%","50%"],transformOriginY:["50%","50%"],scaleX:.5,scaleY:.5,translateZ:0}]],reset:{scaleX:1,scaleY:1}},"transition.bounceIn":{defaultDuration:800,calls:[[{opacity:[1,0],scaleX:[1.05,.3],scaleY:[1.05,.3]},.35],[{scaleX:.9,scaleY:.9,translateZ:0},.2],[{scaleX:1,scaleY:1},.45]]},"transition.bounceOut":{defaultDuration:800,calls:[[{scaleX:.95,scaleY:.95},.35],[{scaleX:1.1,scaleY:1.1,translateZ:0},.35],[{opacity:[0,1],scaleX:.3,scaleY:.3},.3]],reset:{scaleX:1,scaleY:1}},"transition.bounceUpIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateY:[-30,1e3]},.6,{easing:"easeOutCirc"}],[{translateY:10},.2],[{translateY:0},.2]]},"transition.bounceUpOut":{defaultDuration:1e3,calls:[[{translateY:20},.2],[{opacity:[0,"easeInCirc",1],translateY:-1e3},.8]],reset:{translateY:0}},"transition.bounceDownIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateY:[30,-1e3]},.6,{easing:"easeOutCirc"}],[{translateY:-10},.2],[{translateY:0},.2]]},"transition.bounceDownOut":{defaultDuration:1e3,calls:[[{translateY:-20},.2],[{opacity:[0,"easeInCirc",1],translateY:1e3},.8]],reset:{translateY:0}},"transition.bounceLeftIn":{defaultDuration:750,calls:[[{opacity:[1,0],translateX:[30,-1250]},.6,{easing:"easeOutCirc"}],[{translateX:-10},.2],[{translateX:0},.2]]},"transition.bounceLeftOut":{defaultDuration:750,calls:[[{translateX:30},.2],[{opacity:[0,"easeInCirc",1],translateX:-1250},.8]],reset:{translateX:0}},"transition.bounceRightIn":{defaultDuration:750,calls:[[{opacity:[1,0],translateX:[-30,1250]},.6,{easing:"easeOutCirc"}],[{translateX:10},.2],[{translateX:0},.2]]},"transition.bounceRightOut":{defaultDuration:750,calls:[[{translateX:-30},.2],[{opacity:[0,"easeInCirc",1],translateX:1250},.8]],reset:{translateX:0}},"transition.slideUpIn":{defaultDuration:900,calls:[[{opacity:[1,0],translateY:[0,20],translateZ:0}]]},"transition.slideUpOut":{defaultDuration:900,calls:[[{opacity:[0,1],translateY:-20,translateZ:0}]],reset:{translateY:0}},"transition.slideDownIn":{defaultDuration:900,calls:[[{opacity:[1,0],translateY:[0,-20],translateZ:0}]]},"transition.slideDownOut":{defaultDuration:900,calls:[[{opacity:[0,1],translateY:20,translateZ:0}]],reset:{translateY:0}},"transition.slideLeftIn":{defaultDuration:1e3,calls:[[{opacity:[1,0],translateX:[0,-20],translateZ:0}]]},"transition.slideLeftOut":{defaultDuration:1050,calls:[[{opacity:[0,1],translateX:-20,translateZ:0}]],reset:{translateX:0}},"transition.slideRightIn":{defaultDuration:1e3,calls:[[{opacity:[1,0],translateX:[0,20],translateZ:0}]]},"transition.slideRightOut":{defaultDuration:1050,calls:[[{opacity:[0,1],translateX:20,translateZ:0}]],reset:{translateX:0}},"transition.slideUpBigIn":{defaultDuration:850,calls:[[{opacity:[1,0],translateY:[0,75],translateZ:0}]]},"transition.slideUpBigOut":{defaultDuration:800,calls:[[{opacity:[0,1],translateY:-75,translateZ:0}]],reset:{translateY:0}},"transition.slideDownBigIn":{defaultDuration:850,calls:[[{opacity:[1,0],translateY:[0,-75],translateZ:0}]]},"transition.slideDownBigOut":{defaultDuration:800,calls:[[{opacity:[0,1],translateY:75,translateZ:0}]],reset:{translateY:0}},"transition.slideLeftBigIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateX:[0,-75],translateZ:0}]]},"transition.slideLeftBigOut":{defaultDuration:750,calls:[[{opacity:[0,1],translateX:-75,translateZ:0}]],reset:{translateX:0}},"transition.slideRightBigIn":{defaultDuration:800,calls:[[{opacity:[1,0],translateX:[0,75],translateZ:0}]]},"transition.slideRightBigOut":{defaultDuration:750,calls:[[{opacity:[0,1],translateX:75,translateZ:0}]],reset:{translateX:0}},"transition.perspectiveUpIn":{defaultDuration:800,calls:[[{opacity:[1,0],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:["100%","100%"],rotateX:[0,-180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveUpOut":{defaultDuration:850,calls:[[{opacity:[0,1],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:["100%","100%"],rotateX:-180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateX:0}},"transition.perspectiveDownIn":{defaultDuration:800,calls:[[{opacity:[1,0],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:[0,0],rotateX:[0,180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveDownOut":{defaultDuration:850,calls:[[{opacity:[0,1],transformPerspective:[800,800],transformOriginX:[0,0],transformOriginY:[0,0],rotateX:180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateX:0}},"transition.perspectiveLeftIn":{defaultDuration:950,calls:[[{opacity:[1,0],transformPerspective:[2e3,2e3],transformOriginX:[0,0],transformOriginY:[0,0],rotateY:[0,-180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveLeftOut":{defaultDuration:950,calls:[[{opacity:[0,1],transformPerspective:[2e3,2e3],transformOriginX:[0,0],transformOriginY:[0,0],rotateY:-180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateY:0}},"transition.perspectiveRightIn":{defaultDuration:950,calls:[[{opacity:[1,0],transformPerspective:[2e3,2e3],transformOriginX:["100%","100%"],transformOriginY:[0,0],rotateY:[0,180]}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%"}},"transition.perspectiveRightOut":{defaultDuration:950,calls:[[{opacity:[0,1],transformPerspective:[2e3,2e3],transformOriginX:["100%","100%"],transformOriginY:[0,0],rotateY:180}]],reset:{transformPerspective:0,transformOriginX:"50%",transformOriginY:"50%",rotateY:0}}},v.RegisterEffect.packagedEffects)v.RegisterEffect.packagedEffects.hasOwnProperty(n)&&v.RegisterEffect(n,v.RegisterEffect.packagedEffects[n]);v.RunSequence=function(t){var s=D.extend(!0,[],t);1<s.length&&(D.each(s.reverse(),function(t,a){var e,r,n,i=s[t+1];i&&(t=a.o||a.options,e=i.o||i.options,t=t&&!1===t.sequenceQueue?"begin":"complete",r=e&&e[t],(n={})[t]=function(){var t=i.e||i.elements,t=t.nodeType?[t]:t;r&&r.call(t,t),v(a)},i.o?i.o=D.extend({},e,n):i.options=D.extend({},e,n))}),s.reverse()),v(s[0])}}else a.console&&console.log("Velocity UI Pack: Velocity must be loaded first. Aborting.")});
\ No newline at end of file
diff --git a/4X/Standard/Modules/Combobox.js b/4X/Standard/Modules/Combobox.js
index cd30aed9..2c6c6111 100644
--- a/4X/Standard/Modules/Combobox.js
+++ b/4X/Standard/Modules/Combobox.js
@@ -137,8 +137,8 @@ Required dependencies: SmoothScroll.js, AccName.js, CurrentDevice.js
                     ? true
                     : false
                   : $A.getAttr(dc.triggerNode, "aria-required") === "true"
-                  ? true
-                  : false;
+                    ? true
+                    : false;
                 dc.cb.multiple = $A.getAttr(dc.cb.sel, "multiple")
                   ? true
                   : false;
diff --git a/4X/Standard/Modules/Dragula.js b/4X/Standard/Modules/Dragula.js
index 37837a61..37c83b3e 100644
--- a/4X/Standard/Modules/Dragula.js
+++ b/4X/Standard/Modules/Dragula.js
@@ -923,10 +923,10 @@ Includes modifications by Bryan Garaventa (WhatSock.com) for use within the Apex
             typeof global !== "undefined"
               ? global
               : typeof self !== "undefined"
-              ? self
-              : typeof window !== "undefined"
-              ? window
-              : {},
+                ? self
+                : typeof window !== "undefined"
+                  ? window
+                  : {},
           );
         },
         { "./classes": 1, "contra/emitter": 5, crossvent: 6 },
@@ -1152,10 +1152,10 @@ Includes modifications by Bryan Garaventa (WhatSock.com) for use within the Apex
             typeof global !== "undefined"
               ? global
               : typeof self !== "undefined"
-              ? self
-              : typeof window !== "undefined"
-              ? window
-              : {},
+                ? self
+                : typeof window !== "undefined"
+                  ? window
+                  : {},
           );
         },
         { "./eventmap": 7, "custom-event": 8 },
@@ -1181,10 +1181,10 @@ Includes modifications by Bryan Garaventa (WhatSock.com) for use within the Apex
             typeof global !== "undefined"
               ? global
               : typeof self !== "undefined"
-              ? self
-              : typeof window !== "undefined"
-              ? window
-              : {},
+                ? self
+                : typeof window !== "undefined"
+                  ? window
+                  : {},
           );
         },
         {},
@@ -1215,46 +1215,46 @@ Includes modifications by Bryan Garaventa (WhatSock.com) for use within the Apex
             module.exports = useNative()
               ? NativeCustomEvent
               : // IE >= 9
-              "undefined" !== typeof document &&
-                "function" === typeof document.createEvent
-              ? function CustomEvent(type, params) {
-                  var e = document.createEvent("CustomEvent");
-                  if (params) {
-                    e.initCustomEvent(
-                      type,
-                      params.bubbles,
-                      params.cancelable,
-                      params.detail,
-                    );
-                  } else {
-                    e.initCustomEvent(type, false, false, void 0);
-                  }
-                  return e;
-                }
-              : // IE <= 8
-                function CustomEvent(type, params) {
-                  var e = document.createEventObject();
-                  e.type = type;
-                  if (params) {
-                    e.bubbles = Boolean(params.bubbles);
-                    e.cancelable = Boolean(params.cancelable);
-                    e.detail = params.detail;
-                  } else {
-                    e.bubbles = false;
-                    e.cancelable = false;
-                    e.detail = void 0;
+                "undefined" !== typeof document &&
+                  "function" === typeof document.createEvent
+                ? function CustomEvent(type, params) {
+                    var e = document.createEvent("CustomEvent");
+                    if (params) {
+                      e.initCustomEvent(
+                        type,
+                        params.bubbles,
+                        params.cancelable,
+                        params.detail,
+                      );
+                    } else {
+                      e.initCustomEvent(type, false, false, void 0);
+                    }
+                    return e;
                   }
-                  return e;
-                };
+                : // IE <= 8
+                  function CustomEvent(type, params) {
+                    var e = document.createEventObject();
+                    e.type = type;
+                    if (params) {
+                      e.bubbles = Boolean(params.bubbles);
+                      e.cancelable = Boolean(params.cancelable);
+                      e.detail = params.detail;
+                    } else {
+                      e.bubbles = false;
+                      e.cancelable = false;
+                      e.detail = void 0;
+                    }
+                    return e;
+                  };
           }).call(
             this,
             typeof global !== "undefined"
               ? global
               : typeof self !== "undefined"
-              ? self
-              : typeof window !== "undefined"
-              ? window
-              : {},
+                ? self
+                : typeof window !== "undefined"
+                  ? window
+                  : {},
           );
         },
         {},
diff --git a/4X/Standard/Modules/Slider.js b/4X/Standard/Modules/Slider.js
index a1d7f7a8..a8233469 100644
--- a/4X/Standard/Modules/Slider.js
+++ b/4X/Standard/Modules/Slider.js
@@ -47,8 +47,8 @@ Required dependencies: CurrentDevice.js, Dragdealer.js
               ((config.valueReverse
                 ? getReverseCurrent($A.isNum(i) ? i : config.current)
                 : $A.isNum(i)
-                ? i
-                : config.current) -
+                  ? i
+                  : config.current) -
                 1),
           );
         };
diff --git a/4X/Standard/Modules/TinySlider.js b/4X/Standard/Modules/TinySlider.js
index b05dc136..fcbfe91a 100644
--- a/4X/Standard/Modules/TinySlider.js
+++ b/4X/Standard/Modules/TinySlider.js
@@ -1167,8 +1167,8 @@ var tns = function (options) {
     result = navAsThumbnails
       ? absIndex
       : fixedWidth || autoWidth
-      ? Math.ceil(((absIndex + 1) * pages) / slideCount - 1)
-      : Math.floor(absIndex / items); // set active nav to the last one when reaches the right edge
+        ? Math.ceil(((absIndex + 1) * pages) / slideCount - 1)
+        : Math.floor(absIndex / items); // set active nav to the last one when reaches the right edge
 
     if (!loop && carousel && index === indexMax) {
       result = pages - 1;
@@ -2951,16 +2951,16 @@ var tns = function (options) {
         (getPages() === slideCount
           ? 0
           : arr[0] === slideCount + cloneCount
-          ? slideCount + cloneCount
-          : cloneCount),
+            ? slideCount + cloneCount
+            : cloneCount),
       end =
         arr[1] +
         1 -
         (getPages() === slideCount
           ? 0
           : arr[1] === slideCount + cloneCount
-          ? slideCount + cloneCount
-          : cloneCount);
+            ? slideCount + cloneCount
+            : cloneCount);
     if (start === end && end > slideCount) return "1";
     if (start < 1 || end > slideCount) return "";
     return start === end ? start + "" : start + " to " + end;
@@ -3370,8 +3370,8 @@ var tns = function (options) {
           (slidePositions[num + 1] - slidePositions[num] - gutter)) /
           2
       : fixedWidth
-      ? (viewport - fixedWidth) / 2
-      : (items - 1) / 2;
+        ? (viewport - fixedWidth) / 2
+        : (items - 1) / 2;
   }
 
   function getRightBoundary() {
diff --git a/4X/Standard/Modules/VelocityUI.js b/4X/Standard/Modules/VelocityUI.js
index 729dcf5f..cc265a72 100644
--- a/4X/Standard/Modules/VelocityUI.js
+++ b/4X/Standard/Modules/VelocityUI.js
@@ -172,8 +172,8 @@
           totalDuration >= 1
             ? 0
             : properties.calls.length
-            ? (1 - totalDuration) / properties.calls.length
-            : 1;
+              ? (1 - totalDuration) / properties.calls.length
+              : 1;
 
         /* Iterate through each effect's call array. */
         for (callIndex = 0; callIndex < properties.calls.length; callIndex++) {
diff --git a/BuildBundle.js b/BuildBundle.js
index fb82458e..8b5166e1 100644
--- a/BuildBundle.js
+++ b/BuildBundle.js
@@ -1,31 +1,34 @@
-import "./4X/4X.Max.Export.js"; // Core 4X API, REQUIRED.
+import "./4X/4X.Max.Export.js"; // Core 4X API, REQUIRED!
+
 import "./4X/Standard/Modules/CurrentDevice.js"; // Has no dependencies; is common dependency of other modules.
 import "./4X/Standard/Modules/Dragdealer.js"; // Has no dependencies; is common dependency of other modules.
-import "./4X/Standard/Modules/Dragula.js"; // Has no dependencies; is common dependency of other modules.
-import "./4X/Standard/Modules/TinySlider.js"; // Has no dependencies; is common dependency of other modules.
-import "./4X/Standard/Modules/Velocity.js"; // Has no dependencies; is common dependency of other modules.
-import "./4X/Standard/Modules/VelocityUI.js"; // Requires Velocity.js; is common dependency of other modules.
+import "./4X/Standard/Modules/Dragula.js"; // Requires Dragula.css; is common dependency of other modules.
+import "./4X/Standard/Modules/TinySlider.js"; // Requires TinySlider.css; is common dependency of other modules.
+import "./4X/Standard/Modules/Velocity.js"; // Has no dependencies; is common dependency of other modules. (RECOMMENDED ALWAYS INCLUDE)
+import "./4X/Standard/Modules/VelocityUI.js"; // Requires Velocity.js; is common dependency of other modules. (RECOMMENDED ALWAYS INCLUDE)
 import "./4X/Standard/Modules/AccName.js"; // Has no dependencies; is common dependency of other modules.
 import "./4X/Standard/Modules/Animate.js"; // Requires Velocity.js, VelocityUI.js; is common dependency of other modules.
 import "./4X/Standard/Modules/RovingTabIndex.js"; // Requires AccName.js; is common dependency of other modules.
-import "./4X/Standard/Modules/SmoothScroll.js"; // Requires Animate.js; is common dependency of other modules.
-import "./4X/Standard/Modules/Accordion.js"; // Requires RovingTabIndex.js.
+import "./4X/Standard/Modules/SmoothScroll.js"; // Requires Velocity.js, VelocityUI.js, Animate.js; is common dependency of other modules.
 import "./4X/Standard/Modules/Beep.js"; // Has no dependencies.
-import "./4X/Standard/Modules/Button.js"; // Requires RovingTabIndex.js.
+
+import "./4X/Standard/Modules/Accordion.js"; // Requires AccName.js, RovingTabIndex.js.
+import "./4X/Standard/Modules/Button.js"; // Requires AccName.js, RovingTabIndex.js.
 import "./4X/Standard/Modules/Carousel.js"; // Requires TinySlider.css, TinySlider.js.
-import "./4X/Standard/Modules/Combobox.js"; // Requires SmoothScroll.js, AccName.js, CurrentDevice.js.
+import "./4X/Standard/Modules/Combobox.js"; // Requires Velocity.js, VelocityUI.js, Animate.js, SmoothScroll.js, AccName.js, CurrentDevice.js.
 import "./4X/Standard/Modules/Datepicker.js"; // Has no dependencies.
 import "./4X/Standard/Modules/Dialog.js"; // Has no dependencies.
-import "./4X/Standard/Modules/Drag.js"; // Requires Animate.js, Menu.js, Dragula.css, Dragula.js; is common dependency of other modules.
-import "./4X/Standard/Modules/Footnote.js"; // Requires SmoothScroll.js.
+import "./4X/Standard/Modules/Drag.js"; // Requires Dragula.css, Dragula.js, Velocity.js, VelocityUI.js, Animate.js, AccName.js, RovingTabIndex.js, Menu.js; is common dependency of other modules.
+import "./4X/Standard/Modules/Footnote.js"; // Requires Velocity.js, VelocityUI.js, Animate.js, SmoothScroll.js.
 import "./4X/Standard/Modules/Grid.js"; // Has no dependencies.
-import "./4X/Standard/Modules/Listbox.js"; // Requires RovingTabIndex.js.
-import "./4X/Standard/Modules/Menu.js"; // Requires RovingTabIndex.js.
+import "./4X/Standard/Modules/Listbox.js"; // Requires AccName.js, RovingTabIndex.js.
+import "./4X/Standard/Modules/Menu.js"; // Requires AccName.js, RovingTabIndex.js.
 import "./4X/Standard/Modules/Popup.js"; // Has no dependencies.
 import "./4X/Standard/Modules/Slider.js"; // Requires CurrentDevice.js, Dragdealer.js.
-import "./4X/Standard/Modules/Tab.js"; // Requires RovingTabIndex.js.
+import "./4X/Standard/Modules/Tab.js"; // Requires AccName.js, RovingTabIndex.js.
 import "./4X/Standard/Modules/Tooltip.js"; // Has no dependencies.
-import "./4X/Standard/Modules/Tree.js"; // Requires RovingTabIndex.js.
+import "./4X/Standard/Modules/Tree.js"; // Requires AccName.js, RovingTabIndex.js.
+
 import "./4X/Standard/Modules/Straylight.js"; // Requires all other widget modules.
 import "./4X/Standard/Modules/Dragula.css"; // Requires Dragula.js.
 import "./4X/Standard/Modules/TinySlider.css"; // Requires TinySlider.js.
\ No newline at end of file
diff --git a/BuildBundle.sh b/BuildBundle.sh
index 735192ba..db2b8ed7 100644
--- a/BuildBundle.sh
+++ b/BuildBundle.sh
@@ -1,3 +1,3 @@
 #!/bin/bash
 npx update-browserslist-db@latest
-npx rollup -c 2>> BuildErrors.txt
\ No newline at end of file
+npx rollup -c 2> BuildErrors.txt
\ No newline at end of file
diff --git a/Bundle/4X.js b/Bundle/4X.js
index 1327a063..b5ee16c3 100644
--- a/Bundle/4X.js
+++ b/Bundle/4X.js
@@ -43,7 +43,7 @@ https://w3c.github.io/accname/
 Author: Bryan Garaventa
 https://github.com/whatsock/w3c-alternative-text-computation
 Distributed under the terms of the Open Source Initiative OSI - MIT License
-*/function Y(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}!function(e){!function(){var t=window.AccNamePrototypeNameSpace||window;t&&"string"==typeof t&&t.length&&(window[t]={},t=window[t]),t.getAccNameVersion="2.60",t.getAccName=t.calcNames=function(e,t,r,a){var o=(a=a||{}).document||document,i={name:"",desc:"",error:""},s=!1,l=!1;try{if(!e||1!==e.nodeType)return i;var c=e,u=n(e.getAttribute("role")||""),d={name:[],desc:[]},f=[],p=function(e,t,a,i,u,A,M){(M=M||{}).tag=M.tag||!1,M.role=M.role||!1,M.go=M.go||!1;var I={name:"",title:""},E=!1,F=function(e,t){for(var n=[];e;){if(e.id&&A[e.id]&&A[e.id].node&&-1===n.indexOf(e)?(n.push(e),e=A[e.id].node):e=e.parentNode,e&&e===t)return!0;if(!e||e===A.top||e===o.body)return!1}return!1},L={before:"",after:""};M.tag||M.role||-1!==d[A.computingDesc?"desc":"name"].indexOf(e)||(L=j(e,null),r&&(-1===L.before.indexOf(" [ARIA] ")&&-1===L.before.indexOf(" aria-")&&-1===L.before.indexOf(" accName: ")||(L.before=""),-1===L.after.indexOf(" [ARIA] ")&&-1===L.after.indexOf(" aria-")&&-1===L.after.indexOf(" accDescription: ")||(L.after="")));var V=function(e,t,r){var a={name:"",title:""};if(!e)return a;var o=!(!e||1!==e.nodeType||!R(e)),i=e,l=t(e)||{};if(l.name&&l.name.length&&(a.name+=l.name),!l.skip&&!function(e,t){if(!t||!e||1!==t.nodeType||1!==e.nodeType)return!1;var n=h(e),r=e.nodeName.toLowerCase(),a=function(e,t){return n&&t.roles.indexOf(n)>=0||!n&&t.tags.indexOf(r)>=0};return a(0,y)?e!==t||e.id&&A[e.id]&&A[e.id].node?!(F(e,A.top)&&"select"!==e.nodeName.toLowerCase()||a(0,v)):!m(e):!(!a(0,b)&&(e!==c||a(0,v))||!(n||-1===["section"].indexOf(r)||e.getAttribute("aria-labelledby")||e.getAttribute("aria-label"))||M.go)}(e,A.top))for(M.go&&(M.go=!1),e=e.firstChild;e;)a.name+=V(e,t,r).name,e=e.nextSibling;return a.name+=l.owns||"",c===i&&r===i&&!n(a.name)&&n(l.title)?a.name=B(l.title):c===i&&r===i&&n(l.title)&&(a.title=B(l.title)),c===i&&r===i&&n(l.desc)&&(a.title=B(l.desc)),c===i&&r===i&&n(l.placeholder)&&!n(a.name)?(a.name=B(l.placeholder),s=!0):c===i&&r===i&&n(l.placeholder)&&!n(a.title)&&(a.title=B(l.placeholder)),(o||l.isWidget)&&(a.name=B(a.name)),a};return I=V(e,(function(s){var v=0,b=null,y=[],I=[],R={name:"",title:"",owns:"",skip:!1},F=!!(s&&1===s.nodeType&&i&&i.length&&-1!==i.indexOf(s)&&s===c&&s!==e),L=!1;if((a||!s||_(s,A.top))&&!u&&!F)return R;if(M.tag||M.role||-1!==d[A.computingDesc?"desc":"name"].indexOf(s))return R;d[A.computingDesc?"desc":"name"].push(s);var V="",H="",q={before:"",after:""},z=e===s?s:s.parentNode;if(M.tag||M.role||-1!==d[A.computingDesc?"desc":"name"].indexOf(z)||(d[A.computingDesc?"desc":"name"].push(z),q=j(z,e),r&&(-1===q.before.indexOf(" [ARIA] ")&&-1===q.before.indexOf(" aria-")&&-1===q.before.indexOf(" accName: ")||(q.before=""),-1===q.after.indexOf(" [ARIA] ")&&-1===q.after.indexOf(" aria-")&&-1===q.after.indexOf(" accDescription: ")||(q.after=""))),1===s.nodeType){var U=s.nodeName.toLowerCase(),G=h(s),Q=!M.tag&&!M.role&&s.getAttribute("aria-labelledby")||"",Z=!M.tag&&!M.role&&s.getAttribute("aria-describedby")||"",K=!M.tag&&!M.role&&s.getAttribute("aria-description"),J=!M.tag&&!M.role&&s.getAttribute("aria-label")||"",ee=!M.tag&&!M.role&&s.getAttribute("title")||"";if(s===c&&!G&&-1!==w.indexOf(U))return R;if(s===c&&(-1!==x.indexOf(G)||!G&&-1!==C.indexOf(U)))return R;var te=-1!==$.indexOf(U),ne=-1!==["input"].indexOf(U),re=-1!==D.indexOf(G),ae=-1!==T.indexOf(G),oe=-1!==N.indexOf(G),ie=re||ae||oe||"combobox"===G,se=(ie||-1!==S.indexOf(G))&&"link"!==G;R.isWidget=te||se;var le=!1,ce=!1,ue=s.getAttribute("aria-owns")||"",de=!(M.tag||M.role||F||!(s!==e&&(te||ie)||s.id&&A[s.id]&&A[s.id].target&&A[s.id].target===s));if(!t&&!M.tag&&!M.role&&Q){for(y=Q.split(/\s+/),I=[],v=0;v<y.length;v++)b=o.getElementById(y[v]),I.push(p(b,!0,a,[s],b===e,{ref:A,top:b}).name);V=n(I.join(" ")),n(V)&&(le=!0,L=!0,E=!0,R.skip=!0)}if(!t&&s===e&&!M.tag&&!M.role&&(Z||K)){if(Z){var fe;for(y=Z.split(/\s+/),I=[],v=0;v<y.length;v++)b=o.getElementById(y[v]),I.push(p(b,!0,!1,[s],!1,{ref:A,top:b,computingDesc:!0}).name);fe=n(I.join(" "))}else fe=n(K);n(fe)&&(R.desc=fe,ce=!0)}M.tag||M.role||le||!n(J)||de||n(V=J)&&(le=!0,L=!0,s===e&&(a=!0,E=!0));var pe=!M.tag&&!M.role&&!le&&"iframe"!==U&&G&&-1!==k.indexOf(G)&&!m(s)&&!O(s);if(!de){if(!M.tag&&!M.role&&!le&&s===e&&te){var ge=o.querySelectorAll("label"),he="",me=Y(s,"label")||!1;for(v=0;v<ge.length;v++)(ge[v]!==me||"string"==typeof me.getAttribute("for"))&&ge[v].getAttribute("for")!==s.id||P(ge[v],o.body,!0)||(he+=B(p(ge[v],!0,a,[s],!1,{ref:A,top:ge[v]}).name));n(V=he)&&(le=!0)}var ve=!M.tag&&!M.role&&ne&&(s.getAttribute("type")||"").toLowerCase()||!1,be=!M.tag&&!M.role&&ve&&n(s.getAttribute("value"))||!1,ye=pe&&"img"===U?"":n(s.alt||s.getAttribute("alt"));if(M.tag||M.role||le||pe||"img"!==G&&"img"!==U&&"image"!==ve||!ye&&!n(ee)||(V=n(ye)||n(ee),n(V)&&(le=!0)),M.tag||M.role||le||pe||"area"!==U||!ye||(V=n(ye),n(V)&&(le=!0)),"optgroup"===U&&(M.tag||M.role||le||pe||!s.getAttribute("label")||(V=n(s.getAttribute("label")),n(V)&&(le=!0)),R.skip=!0),!M.tag&&!M.role&&!le&&s===e&&ve&&-1!==["button","submit","reset"].indexOf(ve)){if(be)V=be;else switch(ve){case"submit":V="submit";break;case"reset":V="reset";break;default:V=""}n(V)&&(le=!0)}if(!M.tag&&!M.role&&le&&s===e&&ve&&-1!==["button","submit","reset"].indexOf(ve)&&be&&be!==V&&!R.desc&&(R.desc=be,ce=!0),M.tag||M.role||le||s!==e||!ve||"image"!==ve||(V="Submit Query",le=!0,l=!0),!(M.tag||M.role||le||s!==c||"group"!==G&&"radiogroup"!==G&&(G||"fieldset"!==U))){var Ae=g(s,["legend"],["legend"])||!1;Ae&&(V=n(p(Ae,t,!1,[],!1,{ref:A,top:Ae}).name)),n(V)&&(le=!0),a=!0}if(!(M.tag||M.role||le||s!==c||"table"!==G&&(G||"table"!==U))&&((Ae=g(s,["caption"],["caption"])||!1)&&(V=n(p(Ae,t,!1,[],!1,{ref:A,top:Ae}).name)),n(V)&&(le=!0),a=!0),!M.tag&&!M.role&&"svg"===U){var we=s.querySelector("title")||!1,xe=s===c&&s.querySelector("desc")||!1;if(!le&&we&&(V=n(p(we,!0,!1,[],!1,{ref:A,top:we}).name)),!ce&&xe){var Ce=n(p(xe,!0,!1,[],!1,{ref:A,top:xe}).name);n(Ce)&&(R.desc=Ce)}R.skip=!0}}M.tag||M.role||!de||i&&i.length&&-1!==i.indexOf(s)||(re?V=X(G,s,!0):ae||"combobox"===G&&te?V=X(G,s,!1,!0):oe?V=X(G,s,!1,!1,!0):!te||-1===["input","textarea"].indexOf(U)||se&&!ae?!te||"select"!==U||se&&"combobox"!==G||(V=X(G,s,!1,!1,!0,!0)):V=X(G,s,!1,!1,!1,!0),V=n(V)),M.tag||M.role||pe||!n(ee)||V&&" "===K||(R.title=n(ee));var $e=te&&n(s.getAttribute("type")||"").toLowerCase();$e||($e="text");var De=!M.tag&&!M.role&&s===c&&s===e&&(ae||te&&("textarea"===U||"input"===U&&-1!==["password","search","tel","text","url","email"].indexOf($e)))&&n(s.getAttribute("placeholder")||s.getAttribute("aria-placeholder"));De&&(R.placeholder=De);var Te=M.role&&M.role===G||!G&&M.tag&&M.tag===U;if(Te&&(V=n(p(s,t,!1,[],!1,{ref:A,top:s}).name),n(V)&&(a=!0)),!Te&&ue&&-1===["input","img","progress"].indexOf(U)){for(y=ue.split(/\s+/),I=[],v=0;v<y.length;v++)if((b=o.getElementById(y[v]))&&-1===f.indexOf(y[v])){f.push(y[v]);var Ne={ref:A,top:A.top};Ne[y[v]]={refNode:e,node:s,target:b},P(b,o.body,!0)||I.push(p(b,!0,a,[],!1,Ne).name)}H=I.join("")}}else M.tag||M.role||3!==s.nodeType||(V=s.data);return L||(V=q.before+V.replace(/\s+/g," ")+q.after),V.length&&!W(s,A.top,A)&&(R.name=V),R.owns=H,R}),e),E||(I.name=L.before+I.name.replace(/\s+/g," ")+L.after),I},g=function(e,t,n,r){for(e=e?e.firstChild:null;e;){var a=h(e)||!1;if(1===e.nodeType&&(!t&&!n||a&&n&&-1!==n.indexOf(a)||!a&&t&&-1!==t.indexOf(e.nodeName.toLowerCase())))return e;if(!r&&1===e.nodeType&&(t||n))return null;e=e.nextSibling}return e},h=function(e){var t=e&&e.getAttribute?(e.getAttribute("role")||"").toLowerCase():"";if(!n(t))return"";for(var r=function(e){return n(t).length>0&&e.roles.indexOf(t)>=0},a=t.split(/\s+/),o=0;o<a.length;o++)if(t=a[o],r(v)||r(b)||r(y)||r(A)||-1!==k.indexOf(t))return t;return""},m=function(e){var t=e.nodeName.toLowerCase();return!!e.getAttribute("tabindex")||(!("a"!==t||!e.getAttribute("href"))||-1!==["button","input","select","textarea"].indexOf(t)&&"hidden"!==(e.getAttribute("type")||"").toLowerCase())},v={roles:["button","checkbox","link","option","radio","switch","tab","treeitem","menuitem","menuitemcheckbox","menuitemradio","row","cell","gridcell","columnheader","rowheader","tooltip","heading"],tags:["a","button","summary","input","h1","h2","h3","h4","h5","h6","menuitem","option","tr","td","th"]},b={roles:["application","alert","log","marquee","timer","alertdialog","dialog","banner","complementary","form","main","navigation","region","search","article","document","feed","figure","img","math","toolbar","menu","menubar","grid","listbox","radiogroup","textbox","searchbox","spinbutton","scrollbar","slider","tablist","tabpanel","tree","treegrid","separator","rowgroup","group"],tags:["article","aside","body","select","datalist","optgroup","dialog","figure","footer","form","header","hr","iframe","img","textarea","input","main","math","menu","nav","section","thead","tbody","tfoot","fieldset"]},y={roles:["term","definition","directory","list","note","status","table","contentinfo"],tags:["dl","ul","ol","dd","details","output","table"]},A={roles:["legend","caption","code","deletion","emphasis","generic","insertion","paragraph","strong","subscript","superscript"],tags:["legend","caption","figcaption","code","del","em","div","span","ins","p","strong","sub","sup"]},w=["div","span"],x=["caption","code","deletion","emphasis","generic","insertion","none","paragraph","presentation","strong","subscript","superscript"],C=["caption","figcaption","code","del","em","div","span","ins","p","strong","sub","sup"],$=["button","input","select","textarea"],D=["scrollbar","slider","spinbutton"],T=["searchbox","textbox"],N=["grid","listbox","tablist","tree","treegrid"],S=["button","checkbox","link","switch","option","menu","menubar","menuitem","menuitemcheckbox","menuitemradio","radio","tab","treeitem","gridcell"],k=["presentation","none"],O=function(e){for(var t=["labelledby","label","describedby","busy","controls","current","details","disabled","dropeffect","errormessage","flowto","grabbed","haspopup","invalid","keyshortcuts","live","owns","roledescription"],r=0;r<t.length;r++){if(n(e.getAttribute("aria-"+t[r])))return!0}return!1},_=a.isHidden||function(e,t){return function(e){if(!e||1!==e.nodeType||e===t)return!1;if("true"===e.getAttribute("aria-hidden"))return!0;if(e.getAttribute("hidden"))return!0;var n=M(e);return"none"===n.display||"hidden"===n.visibility}(e)},P=function(e,t,n,r){for(;e&&e!==t;){if(!r&&1===e.nodeType&&_(e,t))return!0;r=!1,e=e.parentNode}return!1},M=a.getStyleObject||function(e){var t={};return o.defaultView&&o.defaultView.getComputedStyle?t=o.defaultView.getComputedStyle(e,""):e.currentStyle&&(t=e.currentStyle),t},I=function(e,t){var n=t;if(-1!==n.indexOf("attr("))for(var r=n.match(/attr\((.|\n|\r\n)*?\)/g),a=0;a<r.length;a++){var o=r[a].slice(5,-1);o=e.getAttribute(o)||"",n=n.replace(r[a],o)}return n=n.replace(/url\((.*?)\)\s+\/|url\((.*?)\)/g,"").replace(/^\s+|\s+$/g,"").replace(/\"/g,"")},R=function(e,t){var n=t||M(e);for(var r in E)for(var a=E[r],o=0;o<a.length;o++)if(n[r]&&(0===a[o].indexOf("!")&&-1===[a[o].slice(1),"inherit","initial","unset"].indexOf(n[r])||0===n[r].indexOf(a[o])))return!0;return!t&&e.nodeName&&-1!==F.indexOf(e.nodeName.toLowerCase())&&!(n.display&&0===n.display.indexOf("inline")&&"br"!==e.nodeName.toLowerCase())},E={display:["block","grid","table","flow-root","flex"],position:["absolute","fixed"],float:["left","right","inline"],clear:["left","right","both","inline"],overflow:["hidden","scroll","auto"],"column-count":["!auto"],"column-width":["!auto"],"column-span":["all"],contain:["layout","content","strict"]},F=["address","article","aside","blockquote","br","canvas","dd","div","dl","dt","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","legend","li","main","nav","noscript","ol","output","p","pre","section","table","td","tfoot","th","tr","ul","video"],X=function(e,t,r,a,o,i){var s="",l=!1;if(r&&!i)s=t.getAttribute("aria-valuetext")||t.getAttribute("aria-valuenow")||"";else if(a&&!i)s=H(t)||"";else if(o&&!i){var c=[];"grid"===e||"treegrid"===e?c=["gridcell","rowheader","columnheader"]:"listbox"===e?c=["option"]:"tablist"===e?c=["tab"]:"tree"===e&&(c=["treeitem"]),s=L(t,t.querySelectorAll('*[aria-selected="true"]'),!1,c),l=!0}return!(s=n(s))&&(r||a)&&t.value&&(s=t.value),l||s||!i||(s=o?L(t,t.querySelectorAll("option[selected]"),!0):t.value),s},B=function(e){return n(e).length?" "+e+" ":" "},L=function(e,t,n,r){if(!t||!t.length)return"";for(var a=[],o=0;o<t.length;o++){var i=h(t[o]);(!r||-1!==r.indexOf(i))&&a.push(n?H(t[o]):p(t[o],!0,!1,[],!1,{top:t[o]}).name)}return a.join(" ")},V=a.getPseudoElStyleObj||function(e,t){var n={};for(var r in E)n[r]=o.defaultView.getComputedStyle(e,t).getPropertyValue(r);return n.content=o.defaultView.getComputedStyle(e,t).getPropertyValue("content").replace(/^"|\\|"$/g,""),n},H=function(e,t){if(!t&&1===e.nodeType)return e.innerText||e.textContent||"";var n=V(e,t),r=n.content;return r&&"none"!==r?(R({},n)&&(":before"===t?r+=" ":":after"===t&&(r=" "+r)),r):""},j=a.getCSSText||function(e,t){return e&&1!==e.nodeType||e===t||-1!==["input","select","textarea","img","iframe","optgroup"].indexOf(e.nodeName.toLowerCase())?{before:"",after:""}:{before:I(e,H(e,":before")),after:I(e,H(e,":after"))}},Y=function(e,t,n,r){for(r=!!r;e;)if((e=e.parentNode)&&(n&&h(e)===n||t&&e.nodeName&&e.nodeName.toLowerCase()===t&&(!r||h(e).length<1)))return e;return{}},W=function(e,t,r,a){for(var o=[];e&&e!==t;)if(e.id&&r&&r[e.id]&&r[e.id].node&&-1===o.indexOf(e)?(o.push(e),e=r[e.id].node):e=e.parentNode,e&&e.getAttribute&&(n(e.getAttribute("aria-label"))||!a&&_(e,t)))return!0;return!1};if(P(e,o.body,!0,!(!e||!e.nodeName||"area"!==e.nodeName.toLowerCase())))return i;var q=p(e,!1,!1,[],!1,{top:e}),z=n(q.name.replace(/\s+/g," ")),U=n(q.title.replace(/\s+/g," "));i.hasUpperCase=!(!u||u===u.toLowerCase()),i.name=z,i.desc=U,d={name:[],desc:[]},f=[]}catch(e){i.error=e}return i.placeholder=s,i.userAgent=l,t&&"function"==typeof t?t.apply(e,[i,e]):i};var n=function(e){return"string"!=typeof e?"":e.replace(/^\s+|\s+$/g,"")};t.getAccNameMsg=t.getNames=function(e,n){var r=t.getAccName(e,null,!1,n);if(r.error)return r.error+"\n\nAn error has been thrown in AccName Prototype version "+t.getAccNameVersion+". Please copy this error message and the HTML markup that caused it, and submit both as a new GitHub issue at\nhttps://github.com/whatsock/w3c-alternative-text-computation";var a='accName: "'+r.name+'"\n\naccDesc: "'+r.desc+'"\n\n';return r.placeholder&&(a+="Name from placeholder: true\n\n"),r.userAgent&&(a+="Name from user agent: true\n\n"),a+="(Running AccName Computation Prototype version: "+t.getAccNameVersion+")"},e.exports&&(e.exports={getNames:t.getNames,calcNames:t.calcNames})}()}(j),$A.extend({hide:function(e,t,n,r){return this._4X&&(r=n,n=t,t=e,e=this._X),e=$A.morph(e),$A.isFn(n)&&(r=n,n=null),$A.isFn(t)&&(r=t,t=null,n=null),$A.isNode(e)&&Velocity(e,t||"transition.fadeOut",$A.extend({complete:function(){$A.isFn(r)&&r.call(e,e)}},n||{})),$A._XR.call(this,e)},show:function(e,t,n,r){return this._4X&&(r=n,n=t,t=e,e=this._X),e=$A.morph(e),$A.isFn(n)&&(r=n,n=null),$A.isFn(t)&&(r=t,t=null,n=null),$A.isNode(e)&&Velocity(e,t||"transition.fadeIn",$A.extend({complete:function(){$A.isFn(r)&&r.call(e,e)}},n||{})),$A._XR.call(this,e)}}),"RovingTabIndex"in $A||$A.extend({RovingTabIndex:function(e){var t=this;for(t.typed="",t.lastTyped="",t.nodes=e.nodes,t.container=e.container||!1,t.orientation=e.orientation&&e.orientation>=0&&e.orientation<=2?e.orientation:0,t.autoSwitch=e.autoSwitch||"off",t.index=e.startIndex&&e.startIndex>=0?e.startIndex:0,t.parent=!!(e.parent&&e.parent.nodes&&e.parent.nodes.length)&&e.parent,t.top=t;t.top.parent;)t.top=t.top.parent;if(t.children=new Map,t.trigger=!(!e.trigger||1!==e.trigger.nodeType)&&e.trigger,t.autoLoop=e.autoLoop||!1,$A.loop(e,(function(e,n){"on"===e.slice(0,2)&&$A.isFn(n)&&(t[e]=n)}),"object"),t.isTree=!0===e.isTree,t.parent&&t.trigger&&t.parent.children.set(t.trigger,t),t.dc=t.DC=e.dc||e.DC||null,e.breakPoint&&(e.breakPoint.horizontal>1||e.breakPoint.vertical>1)?t.breakPoint={horizontal:e.breakPoint.horizontal>1?e.breakPoint.horizontal:0,vertical:e.breakPoint.vertical>1?e.breakPoint.vertical:0,horizontalStop:!!e.breakPoint.horizontalStop,verticalStop:!!e.breakPoint.verticalStop}:t.breakPoint=!1,t.activate=function(e){var n=t;return $A.isNum(e)&&(e=t.nodes[e]||null,n=$A.data(e,"RTI")||t),e||(e=n.nodes[0]||null),$A.isNode(e)&&$A.isNum($A.data(e,"RTI-Index"))?(n=$A.data(e,"RTI"),$A.isHidden(e)||(n.index=$A.data(e,"RTI-Index"),$A.loop(n.nodes,(function(t,n){$A.setAttr(n,{tabindex:e===n?0:-1})}),"array")),n):n},t.setFocus=function(e,n,r){return(n=n||t).activate(this),r||this.focus(),n},t.focus=function(e){var n=t;return $A.isNum(e)&&(e=t.nodes[e]||null,n=$A.data(e,"RTI")||t),e||(e=n.nodes[0]||null),$A.isNode(e)&&$A.isNum($A.data(e,"RTI-Index"))?(n=$A.data(e,"RTI"),$A.isHidden(e)||(n.activate(e),e.focus()),n):n},t.off=function(){return $A.off(t.nodes,".RovingTabIndex"),t},t.on=function(){var e=[],n=0,r=0,a=0,o=new Map;t.off(),$A.loop(t.nodes,(function(i,s){$A.data(s,"RTI",t),$A.data(s,"RTI-Index",i),$A.data(s,"AccName",$A.trim($A.isFn(window.getAccName)&&window.getAccName(s).name||$A.getText(s)).toLowerCase()),t.breakPoint&&(e[r]||(e[r]=[]),e[r].push(s),o.set(s,{i:i,x:n,y:r}),a=r,t.breakPoint.horizontal===n?(n=0,r++):n++);var l={},c=function(e){l.alt=e.altKey,l.ctrl=e.ctrlKey,l.shift=e.shiftKey},u=function(e,n,r,a,o){a=a||$A.boundTo(r);var i=!1;return $A.loop(e,(function(e,s){if($A.isFn(t["on"+s]))var l=!1===t["on"+s].call(r,n,r,t,a,o,0===t.index,t.index===t.nodes.length-1);l&&(i=!0)}),"array"),i};$A.on(s,{click:function(e,n){var r=t.children.get(s),a=r&&r.DC||n;if(t.index=i,t.setFocus.apply(t.nodes[t.index],[e,t]),t.DC&&(t.DC.loading||t.DC.closing)||a&&(a.loading||a.closing))return e.preventDefault(),e.stopPropagation(),!1;u(["Click","Open"],e,s,a,0)},touchstart:function(e,n){var r=t.children.get(s),a=r&&r.DC||n;if(t.index=i,t.setFocus.apply(t.nodes[t.index],[e,t]),t.DC&&(t.DC.loading||t.DC.closing)||a&&(a.loading||a.closing))return e.preventDefault(),e.stopPropagation(),!1;u(["TouchStart"],e,s,a,0)},keydown:function(n,r){if(c(n),"semi"===t.autoSwitch||"full"===t.autoSwitch){var i=$A.getOrientation(t.nodes);"vertical"===i.orientation?t.orientation=2:"horizontal"===i.orientation&&(t.orientation="full"===t.autoSwitch&&i.lineWrap?0:1)}var d=$A.keyEvent(n),f=0,p=o.get(s),g=t.children.get(s),h=g&&g.DC||r,m=[],v=!1,b=!1;if(t.DC&&(t.DC.loading||t.DC.closing)||h&&(h.loading||h.closing))return n.preventDefault(),n.stopPropagation(),!1;if(d>=35&&d<=40){f=d>=37&&d<=40?d:0;var y=t.index,A=!1;f&&(t.arrowPressed=!0,m.push("Arrow")),37===d?l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftLeft"):m.push("ShiftLeft"):m.push("CtrlLeft"):m.push("Left"):38===d?l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftUp"):m.push("ShiftUp"):m.push("CtrlUp"):m.push("Up"):39===d?l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftRight"):m.push("ShiftRight"):m.push("CtrlRight"):m.push("Right"):40===d&&(l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftDown"):m.push("ShiftDown"):m.push("CtrlDown"):m.push("Down")),v=u(m,n,s,h,f),m=[],v&&(b=!0),l.alt||l.ctrl||l.shift||!(39===d&&2===t.orientation||40===d&&1===t.orientation)?l.alt||l.ctrl||l.shift||!(37===d&&2===t.orientation||38===d&&1===t.orientation)?37===d&&(0===t.orientation||1===t.orientation)||38===d&&(0===t.orientation||2===t.orientation)?(0===t.index&&(v=u(["Top"],n,s,h,f)),v&&(b=!0),t.breakPoint?!t.breakPoint.horizontal||37!==d||0!==t.orientation&&1!==t.orientation?!t.breakPoint.vertical||38!==d||0!==t.orientation&&2!==t.orientation||(p.y>0?t.index=o[e[p.y-1][p.x]].i:0===p.y&&$A.isFn(t.onBounds)&&t.onBounds.apply(s,[n,s,t,d])):p.x>0||0===p.x&&p.y>0&&!t.breakPoint.horizontalStop?t.index--:0===p.x&&0===p.y&&$A.isFn(t.onBounds)&&t.onBounds.apply(s,[n,s,t,d]):b||(t.index=0===t.index?t.autoLoop?t.nodes.length-1:y:t.index-1)):39===d&&(0===t.orientation||1===t.orientation)||40===d&&(0===t.orientation||2===t.orientation)?(t.index===t.nodes.length-1&&(v=u(["Bottom"],n,s,h,f)),v&&(b=!0),t.breakPoint?!t.breakPoint.horizontal||39!==d||0!==t.orientation&&1!==t.orientation?!t.breakPoint.vertical||40!==d||0!==t.orientation&&2!==t.orientation||(p.y<a?t.index=o[e[p.y+1][p.x]].i:p.y===a&&$A.isFn(t.onBounds)&&t.onBounds.apply(s,[n,s,t,d])):p.x<t.breakPoint.horizontal||p.x===t.breakPoint.horizontal&&p.y<a&&!t.breakPoint.horizontalStop?t.index++:p.x===t.breakPoint.horizontal&&p.y===a&&$A.isFn(t.onBounds)&&t.onBounds.apply(s,[n,s,t,d]):b||(t.index=t.index===t.nodes.length-1?t.autoLoop?0:y:t.index+1)):35===d?(l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftEnd"):m.push("ShiftEnd"):(m.push("CtrlEnd"),A=!0):m.push("End"),v=u(m,n,s,h,f),m=[],v&&(b=!0),!b&&t.breakPoint&&t.breakPoint.horizontal>0&&p.x<t.breakPoint.horizontal?t.index=o[e[p.y][t.breakPoint.horizontal]].i:b||(t.index=t.nodes.length-1)):36===d&&(l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftHome"):m.push("ShiftHome"):(m.push("CtrlHome"),A=!0):m.push("Home"),v=u(m,n,s,h,f),m=[],v&&(b=!0),!b&&t.breakPoint&&t.breakPoint.horizontal>0&&p.x>0?t.index=o[e[p.y][0]].i:b||(t.index=0)):(m.push("Close"),A=!0):(m.push("Open"),A=!0),b||A||t.index===y||t.setFocus.apply(t.nodes[t.index],[n,t]),n.stopPropagation(),n.preventDefault()}else 9!==d||l.alt||l.ctrl?27!==d||l.alt||l.ctrl||l.shift?46===d?l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftDelete"):m.push("ShiftDelete"):m.push("CtrlDelete"):m.push("Delete"):33===d||34===d?l.alt||l.ctrl||l.shift?!l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push(33===d?"CtrlShiftPageUp":"CtrlShiftPageDown"):m.push(33===d?"ShiftPageUp":"ShiftPageDown"):m.push(33===d?"CtrlPageUp":"CtrlPageDown"):m.push(33===d?"AltPageUp":"AltPageDown"):m.push(33===d?"PageUp":"PageDown"):13===d||32===d?13===d?(l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftEnter"):m.push("ShiftEnter"):m.push("CtrlEnter"):m.push("Enter"),m.push("Open")):32===d&&(l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftSpace"):m.push("ShiftSpace"):m.push("CtrlSpace"):m.push("Space")):!(d>=48&&d<=57||d>=65&&d<=90)||l.alt||l.ctrl||l.shift||(t.keyReset&&clearTimeout(t.keyReset),t.keyReset=setTimeout((function(){t.typed=""}),1e3),function(){t.lastTyped===d?t.typed=String.fromCharCode(d):t.typed+=String.fromCharCode(d);for(var e,n,r=t.isTree?t.top.treeNodes:t.nodes,a=0,o=t.isTree?$A.data(s,"RTI-TreeIndex"):t.index,i=o+1,l=r.length-1,c=!1;i<=l;i++)if(e=r[i],n=$A.data(e,"AccName")||"",!$A.isHidden(e)&&0===n.indexOf(t.typed.toLowerCase())){c=!0,t.focus(e);break}if(!c)for(;a<o;a++)if(e=r[a],n=$A.data(e,"AccName")||"",!$A.isHidden(e)&&0===n.indexOf(t.typed.toLowerCase())){t.focus(e);break}}(),t.lastTyped=d,n.stopPropagation(),n.preventDefault()):(m.push("Esc"),m.push("Close")):l.shift?m.push("ShiftTab"):m.push("Tab");u(m,n,s,h,f)},keyup:function(e,n){c(e);var r=[],a=t.children.get(s),o=a&&a.DC||n,i=$A.keyEvent(e),d=i>=37&&i<=40?i:0;if(t.DC&&(t.DC.loading||t.DC.closing)||o&&(o.loading||o.closing))return e.preventDefault(),e.stopPropagation(),!1;"a"!==e.key||l.alt||!l.ctrl||l.shift?"c"!==e.key||l.alt||!l.ctrl||l.shift?"x"!==e.key||l.alt||!l.ctrl||l.shift?"v"!==e.key||l.alt||!l.ctrl||l.shift||r.push("Paste"):r.push("Cut"):r.push("Copy"):r.push("SelectAll"),u(r,e,s,o,d)},focus:function(e,n){var r=t.children.get(s),a=r&&r.DC||n;t.index=i,t.setFocus.apply(t.nodes[t.index],[e,t]),u(["Focus"],e,s,a,0)}},".RovingTabIndex"),$A.setAttr(s,{tabindex:i===t.index?0:-1})}),"array")},t.isTree){t.top.treeNodes=[];var n=function(e,t){e.length&&$A.loop(e,(function(e,r){var a=t.children.get(r),o=t.top.treeNodes.length;$A.data(r,"RTI-TreeIndex",o),t.top.treeNodes[o]=r,a&&$A.isArray(a.nodes)&&n(a.nodes,a)}),"array")};n(t.top.nodes,t.top)}return t.on(),t}}),"scrollTo"in $A||$A.extend({isScrolling:!1,scrollTo:function(e,t,n){return this._4X&&(n=t,t=e,e=this._X),$A.isFn(t)&&(n=t,t=null),$A.isNode(e)||(e=$A.morph(e)),$A.isNode(e)&&($A.isScrolling=!0,window.Velocity(e,"scroll",$A.extend({duration:700,easing:"ease-in",complete:function(){$A.isScrolling=!1,$A.isFn(n)&&n.call(e,e,n.target)}},t||{}))),$A._XR.call(this,e)},moveTo:function(e,t,n){return this._4X&&(n=t,t=e,e=this._X),e=$A.morph(e),$A.isNode(e)&&$A.scrollTo(e,t,n||function(e){$A.focus(e)}),$A._XR.call(this,e)},skipTo:function(e,t,n,r){return this._4X&&(r=n,n=t,t=e,e=this._X),e=$A.morph(e),t=$A.morph(t),$A.isNode(e)&&$A.isNode(t)&&(e=$A.setSkipLink(e,$A.extend({target:t,skipReturn:!0,callback:r},n||{}))),$A._XR.call(this,e)},setSkipLink:function(e,t,n,r){this._4X&&(n=t,t=e,e=this._X),t||(t={});var a=t.callback||null,o=t.isOffScreen||!1,i=t.style||{},s=(n=t.context||n,!(!r&&!t.skipReturn));return $A.isNode(n,null,document)||(n=document),$A.query(e,n,(function(e,r){var l=t.target||$A.getAttr(r,"href");$A.isSelector(l)&&(l=n.querySelector(l)),$A.isNode(l)&&!$A.data(r,"_isBoundFn")&&($A.data(r,"_isBoundFn",!0),$A.bindObjects(r,l),$A.on(r,{click:function(e){$A.bindObjects(r,l),$A.isFn(a)&&(a.target=l),$A.moveTo(l,t.override||{},a),e.preventDefault()}}),o&&($A.setOffScreen(r),$A.on(r,{focus:function(e){$A.css(r,$A.extend({},$A.sraCSSClear,i||{}))},blur:function(e){$A.setOffScreen(r)}})),!s&&$A.isFocusable(l)&&$A.on(l,{click:function(e){$A.isFn(a)&&(a.target=$A.boundTo(l)),$A.moveTo($A.boundTo(l),t.override||{},a),e.preventDefault()}}))})),$A._XR.call(this,e)}}),"setAccordion"in $A||($A.addWidgetProfile("Accordion",{configure:function(e){return{exposeBounds:!0,exposeHiddenClose:!1,ariaControls:!0,ariaLabelledby:!0,isToggle:!1,allowMultiple:!1,escToClose:!1,returnFocus:!1,click:function(e,t){e.stopPropagation()},onCreate:function(e){$A.setAttr(e.trigger,"aria-expanded","false")},afterRender:function(e,t){e.trackPage&&$A.setPage(e.id)}}},role:function(e){return{role:"region"}},duringRender:function(e,t){$A.setAttr(e.triggerNode,"aria-expanded","true"),e.isToggle||$A.setAttr(e.triggerNode,"aria-disabled","true")},beforeRemove:function(e,t){$A.setAttr(e.triggerNode,"aria-expanded","false"),e.isToggle||$A.setAttr(e.triggerNode,"aria-disabled","false")}}),$A.extend({setAccordion:function(e,t){if(this._4X&&(t=e,e=this._X),$A.isPlainObject(e)&&(e=(t=e).trigger||t.content||null),!e)return null;var n=null;$A.isArray(e)?n=e:$A.isStr(e)&&(n=(t.context||document).querySelectorAll(e));var r=[],a=[],o=0;return $A.loop(n,(function(e,n){$A.isNative(n)||-1!==["button","link"].indexOf($A.getAttr(n,"role").toLowerCase()||"false")||$A.setAttr(n,"role","button"),$A.svgFix(n);var i=$A.get($A.getAttr(n,"data-root")),s=$A.toDC(n,$A.extend({widgetType:"Accordion",root:i},t||{}));r.push(s),$A.hasAttr(n,"data-active")&&(a.push(s),o=e)})),$A.map({siblings:r}),$A.updateDisabled(r),t.singleTabStop&&new $A.RovingTabIndex($A.extend({nodes:n,startIndex:o,orientation:2,autoSwitch:t.autoSwitch||"full",autoLoop:!0,onClick:function(e,t,n,r){r.render(),e.preventDefault()},onSpace:function(e,t,n,r){r.render(),e.preventDefault()},onEnter:function(e,t,n,r){r.render(),e.preventDefault()}},t.extendRTI||{})),$A.hasHash(r)||$A.loop(a,(function(e,t){t.render()}),"array"),1===r.length?r[0]:r}})),"beep"in $A||$A.extend({beep:function(){new Audio("data:audio/wav;base64,//uQRAAAAWMSLwUIYAAsYkXgoQwAEaYLWfkWgAI0wWs/ItAAAGDgYtAgAyN+QWaAAihwMWm4G8QQRDiMcCBcH3Cc+CDv/7xA4Tvh9Rz/y8QADBwMWgQAZG/ILNAARQ4GLTcDeIIIhxGOBAuD7hOfBB3/94gcJ3w+o5/5eIAIAAAVwWgQAVQ2ORaIQwEMAJiDg95G4nQL7mQVWI6GwRcfsZAcsKkJvxgxEjzFUgfHoSQ9Qq7KNwqHwuB13MA4a1q/DmBrHgPcmjiGoh//EwC5nGPEmS4RcfkVKOhJf+WOgoxJclFz3kgn//dBA+ya1GhurNn8zb//9NNutNuhz31f////9vt///z+IdAEAAAK4LQIAKobHItEIYCGAExBwe8jcToF9zIKrEdDYIuP2MgOWFSE34wYiR5iqQPj0JIeoVdlG4VD4XA67mAcNa1fhzA1jwHuTRxDUQ//iYBczjHiTJcIuPyKlHQkv/LHQUYkuSi57yQT//uggfZNajQ3Vmz+Zt//+mm3Wm3Q576v////+32///5/EOgAAADVghQAAAAA//uQZAUAB1WI0PZugAAAAAoQwAAAEk3nRd2qAAAAACiDgAAAAAAABCqEEQRLCgwpBGMlJkIz8jKhGvj4k6jzRnqasNKIeoh5gI7BJaC1A1AoNBjJgbyApVS4IDlZgDU5WUAxEKDNmmALHzZp0Fkz1FMTmGFl1FMEyodIavcCAUHDWrKAIA4aa2oCgILEBupZgHvAhEBcZ6joQBxS76AgccrFlczBvKLC0QI2cBoCFvfTDAo7eoOQInqDPBtvrDEZBNYN5xwNwxQRfw8ZQ5wQVLvO8OYU+mHvFLlDh05Mdg7BT6YrRPpCBznMB2r//xKJjyyOh+cImr2/4doscwD6neZjuZR4AgAABYAAAABy1xcdQtxYBYYZdifkUDgzzXaXn98Z0oi9ILU5mBjFANmRwlVJ3/6jYDAmxaiDG3/6xjQQCCKkRb/6kg/wW+kSJ5//rLobkLSiKmqP/0ikJuDaSaSf/6JiLYLEYnW/+kXg1WRVJL/9EmQ1YZIsv/6Qzwy5qk7/+tEU0nkls3/zIUMPKNX/6yZLf+kFgAfgGyLFAUwY//uQZAUABcd5UiNPVXAAAApAAAAAE0VZQKw9ISAAACgAAAAAVQIygIElVrFkBS+Jhi+EAuu+lKAkYUEIsmEAEoMeDmCETMvfSHTGkF5RWH7kz/ESHWPAq/kcCRhqBtMdokPdM7vil7RG98A2sc7zO6ZvTdM7pmOUAZTnJW+NXxqmd41dqJ6mLTXxrPpnV8avaIf5SvL7pndPvPpndJR9Kuu8fePvuiuhorgWjp7Mf/PRjxcFCPDkW31srioCExivv9lcwKEaHsf/7ow2Fl1T/9RkXgEhYElAoCLFtMArxwivDJJ+bR1HTKJdlEoTELCIqgEwVGSQ+hIm0NbK8WXcTEI0UPoa2NbG4y2K00JEWbZavJXkYaqo9CRHS55FcZTjKEk3NKoCYUnSQ0rWxrZbFKbKIhOKPZe1cJKzZSaQrIyULHDZmV5K4xySsDRKWOruanGtjLJXFEmwaIbDLX0hIPBUQPVFVkQkDoUNfSoDgQGKPekoxeGzA4DUvnn4bxzcZrtJyipKfPNy5w+9lnXwgqsiyHNeSVpemw4bWb9psYeq//uQZBoABQt4yMVxYAIAAAkQoAAAHvYpL5m6AAgAACXDAAAAD59jblTirQe9upFsmZbpMudy7Lz1X1DYsxOOSWpfPqNX2WqktK0DMvuGwlbNj44TleLPQ+Gsfb+GOWOKJoIrWb3cIMeeON6lz2umTqMXV8Mj30yWPpjoSa9ujK8SyeJP5y5mOW1D6hvLepeveEAEDo0mgCRClOEgANv3B9a6fikgUSu/DmAMATrGx7nng5p5iimPNZsfQLYB2sDLIkzRKZOHGAaUyDcpFBSLG9MCQALgAIgQs2YunOszLSAyQYPVC2YdGGeHD2dTdJk1pAHGAWDjnkcLKFymS3RQZTInzySoBwMG0QueC3gMsCEYxUqlrcxK6k1LQQcsmyYeQPdC2YfuGPASCBkcVMQQqpVJshui1tkXQJQV0OXGAZMXSOEEBRirXbVRQW7ugq7IM7rPWSZyDlM3IuNEkxzCOJ0ny2ThNkyRai1b6ev//3dzNGzNb//4uAvHT5sURcZCFcuKLhOFs8mLAAEAt4UWAAIABAAAAAB4qbHo0tIjVkUU//uQZAwABfSFz3ZqQAAAAAngwAAAE1HjMp2qAAAAACZDgAAAD5UkTE1UgZEUExqYynN1qZvqIOREEFmBcJQkwdxiFtw0qEOkGYfRDifBui9MQg4QAHAqWtAWHoCxu1Yf4VfWLPIM2mHDFsbQEVGwyqQoQcwnfHeIkNt9YnkiaS1oizycqJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=").play()}}),"setButton"in $A||($A.extend({setButton:function(e,t){this._4X&&(t=e,e=this._X),$A.isPlainObject(e)&&(e=(t=e).trigger||null);var n=function(e,n,r,a,o){if(r){var i=$A.getAttr(e,"role"),s="radio"===i,l="switch"===i,c=$A.hasAttr(e,"aria-pressed"),u=0;return"true"===n?u=1:s||c||l||"mixed"!==n?n="false":u=2,$A.data(e,"check",u),a&&(s&&$A.isArray(o)&&$A.loop(o,(function(t,n){n!==e&&$A.setAttr(n,"aria-checked","false")}),"array"),$A.setAttr(e,c?"aria-pressed":"aria-checked",n),"mixed"===n?($A.remClass(e,t.toggleClassName||"pressed checked"),$A.toggleClass(e,t.partialClassName||"partially-checked",!0)):($A.remClass(e,t.partialClassName||"partially-checked"),$A.toggleClass(e,t.toggleClassName||(c?"pressed":"checked"),"true"===n))),u}return!1},r=[];if($A.query(e,t.context||document,(function(e,a){var o=$A.isNode(a)&&($A.hasAttr(a,"data-controls")&&$A.morph($A.getAttr(a,"data-controls"))||$A.isFn(a.querySelector)&&a.querySelector("input"))||!1,i=$A.isNative(o)?o:$A.isNative(a)?a:null,s=$A.isNode(o)&&!$A.isNative(o)?o:$A.isNative(a)?null:a,l=!$A.isNode(i)&&$A.isNode(o)&&s!==a?o:null;if(l===s&&(s=a),$A.isNode(s)){$A.isNode(i)&&$A.isNode(s)&&$A.bindObjects(i,s);var c=n(s,$A.getAttr(s,"data-radio"),$A.hasAttr(s,"data-radio"),!0),u=n(s,$A.getAttr(s,"data-check"),$A.hasAttr(s,"data-check"),!0),d=n(s,$A.getAttr(s,"data-toggle"),$A.hasAttr(s,"data-toggle"),!0),f=n(s,$A.getAttr(s,"data-switch"),$A.hasAttr(s,"data-switch"),!0),p=$A.hasAttr(s,"data-required"),g=$A.hasAttr(s,"data-disabled");if($A.isNum(c))$A.setAttr(s,{role:"radio","aria-checked":c?"true":"false"}),r.push(s);else if($A.isNum(u)){$A.isNode(i)&&i.checked&&(u=1),$A.isNode(l)&&(l.id||(l.id=$A.genId()),$A.setAttr(s,{"aria-flowto":l.id,"aria-controls":l.id}));var h="false";1===u?h="true":2===u&&(h="mixed"),$A.setKBA11Y(s,"checkbox",(function(e,r){var a=this,o=$A.isDisabled(a),s=n(a,$A.getAttr(a,"aria-checked"),$A.hasAttr(a,"aria-checked"));!o&&$A.isFn(t.onActivate)&&t.onActivate.apply(a,[e,a,r||i,s,function(e){n(a,e,!0,!0)}])})),$A.setAttr(s,{"aria-checked":h})}else $A.isNum(f)?($A.isNode(i)&&i.checked&&(f=1),$A.isNode(l)&&(l.id||(l.id=$A.genId()),$A.setAttr(s,{"aria-flowto":l.id,"aria-controls":l.id})),h="false",1===f&&(h="true"),$A.setKBA11Y(s,"switch",(function(e,r){var a=this,o=$A.isDisabled(a),s=n(a,$A.getAttr(a,"aria-checked"),$A.hasAttr(a,"aria-checked"));!o&&$A.isFn(t.onActivate)&&t.onActivate.apply(a,[e,a,r||i,s,function(e){n(a,e,!0,!0)}])})),$A.setAttr(s,{"aria-checked":h})):(!1!==d&&($A.setAttr(s,"aria-pressed",d?"true":"false"),$A.isNode(l)&&(l.id||(l.id=$A.genId()),$A.setAttr(s,{"aria-flowto":l.id,"aria-controls":l.id}))),$A.setKBA11Y(s,"button",(function(e,r){var a=this,o=$A.isDisabled(a),i=n(a,$A.getAttr(a,"aria-pressed"),$A.hasAttr(a,"aria-pressed")),s=!1!==i?[e,a,r||l,i,function(e){n(a,e,!0,!0)}]:[e,a,r||l];!o&&$A.isFn(t.onActivate)&&t.onActivate.apply(a,s)})));!1===c&&!1===u&&!1===d&&!1===f||$A.on(s,"attributeChange",(function(e,t,r,a,o,s,l){if($A.isNode(i)){var c=n(t,a,!0);i.checked=!!c}}),{attributeFilter:["aria-checked","aria-pressed"]}),$A.svgFix(s),t.label&&$A.setAttr(s,"aria-label",t.label),($A.isNode(i)&&i.required||t.required||p)&&($A.setAttr(s,"aria-required","true"),$A.isNode(i)&&!i.required&&(i.required=!0)),($A.isNode(i)&&i.disabled||t.disabled||g)&&($A.setAttr(s,"aria-disabled","true"),$A.isNode(i)&&!i.disabled&&(i.disabled=!0)),$A.updateDisabled(s)}})),r.length){var a=t.container&&$A.morph(t.container)||$A.closest(r[0],(function(e){if("radiogroup"===$A.getAttr(e,"role"))return!0}));$A.isNode(a)||function(e){var t=[],n=[];$A.closest(e[0],(function(e){if($A.isNode(e)&&t.push(e),e===document.body)return!0})),$A.closest(e[e.length-1],(function(e){if($A.isNode(e)&&n.push(e),e===document.body)return!0})),t=t.reverse(),n=n.reverse();for(var r=null,o=0;o<t.length;o++)if(t[o]===n[o])r=t[o];else if(t[o]!==n[o])break;a=r}(r),$A.setAttr(a,"role","radiogroup"),new $A.RovingTabIndex($A.extend({nodes:r,startIndex:0,orientation:0,autoLoop:!0,onClick:function(e,r,a,o){var i=r,s=$A.isDisabled(i),l=n(i,$A.getAttr(i,"aria-checked"),$A.hasAttr(i,"aria-checked"));!s&&$A.isFn(t.onActivate)&&t.onActivate.apply(i,[e,i,o,l,function(e){n(i,e,!0,!0,a.nodes)}])},onSpace:function(e,t,n,r){n.onClick.apply(t,arguments)},onFocus:function(e,t,n,r){n.arrowPressed&&!$A.isTouch&&n.onClick.apply(t,arguments)}},t.extendRTI||{}))}return $A._XR.call(this,e)}}),$A.extend({setCheckbox:$A.setButton,setRadio:$A.setButton,setSwitch:$A.setButton})),"setCarousel"in $A||$A.extend({setCarousel:function(e){var t=$A.morph(e.container),n=$A.toDC(t.parentNode),r=$A.tns(e);return n.tns=r,n}}),"Combobox"in $A||$A.extend({Combobox:function(e){var t=e.select||!1,n=e.input||!1,r=$A.isFn(window.getAccName)&&window.getAccName(e.input).name||"",a=e.childNode||!1;if(!t||!n)return null;var o=-1!==["input","textarea"].indexOf(n.nodeName.toLowerCase());if(!o&&!a)return null;$A.setAttr(n,{role:"combobox","aria-expanded":"false","aria-autocomplete":"list","aria-haspopup":"listbox"});var i=$A.genId(),s=this,l=!1;n.id||(n.id=i);var c={id:i,role:"List",returnFocus:!1,exposeBounds:!0,exposeHiddenClose:!0,delay:e.delay||1e3,style:e.style,animate:e.animate,hiddenCloseName:"Close Popup",displayHiddenClose:!1,className:"toplevel-div clearfix",middleClass:"middle-div clearfix",listboxClass:"listbox clearfix",optionClass:"option clearfix",activeClass:"active",toggleClassName:"pressed",triggerNode:n,widgetType:"Combobox",autoCloseSameWidget:!0,cb:{selected:[],select:function(e,t,n){if(!$A.isNode(t)||!t.id)return $A.remAttr(e.triggerNode,["aria-activedescendant","aria-controls"]),void(e.cb.activeDescendant=!1);$A.remClass(e.cb.selected,e.activeClass),e.cb.selected=[],n?($A.setAttr(e.triggerNode,"aria-activedescendant",t.id),e.cb.activeDescendant=!0,$A.addClass(t,e.activeClass),e.cb.selected.push(t),s.scrollIntoView(t,e.scrollCallback,e)):($A.remAttr(e.triggerNode,["aria-activedescendant","aria-controls"]),e.cb.activeDescendant=!1)},key:"",charMin:0,baseId:i,baseInc:1,options:{},optionNodes:[],size:0,readonly:!1,multiple:!1,checked:!1,multipleDivider:function(e){return e.join("")},required:!1,parentTag:e.parentTag||"ul",childTag:e.childTag||"li",names:[],values:[],matches:[],value:"",showAll:!1,substringMatch:!1,wordMatch:!1,autoComplete:!1,currentOption:null,activeDescendant:!1,sIndex:-1,clicked:!1,mClicked:!1,isInput:o,setDefault:!0,bound:!1,fn:{update:function(){var e=this.dc;s.close(),e.cb.options={},e.cb.currentOption=null,e.cb.names=[],e.cb.values=[],e.cb.readonly=!e.cb.isInput||!!n.readOnly,e.cb.required=e.cb.isInput?!!n.required:"true"===$A.getAttr(e.triggerNode,"aria-required"),e.cb.multiple=!!$A.getAttr(e.cb.sel,"multiple"),e.cb.optionNodes=$A.query("option",e.cb.sel),e.cb.readonly&&(e.cb.substringMatch=e.cb.wordMatch=!1);for(var t=0;t<e.cb.optionNodes.length;t++){e.cb.baseInc++;var r=$A.trim($A.getText(e.cb.optionNodes[t])).replace(/<|>/g,""),a=e.cb.baseId+e.cb.baseInc,o="<"+e.cb.childTag+' role="option" tabindex="-1" id="'+a+'" data-value="'+e.cb.optionNodes[t].value+'" class="'+e.optionClass+'" ';e.cb.multiple&&(o+='aria-selected="false" '),o+="><a><span>"+r+"</span></a></"+e.cb.childTag+">",e.cb.options[e.cb.optionNodes[t].value]={content:o,id:a,so:e.cb.optionNodes[t],checked:e.cb.optionNodes[t].selected,no:r,v:e.cb.optionNodes[t].value,i:t},e.cb.names.push(r),e.cb.values.push(e.cb.optionNodes[t].value)}e.cb.sel.selectedIndex=e.cb.sel.selectedIndex>=0?e.cb.sel.selectedIndex:0,e.cb.multiple?(e.cb.autoComplete=!0,e.cb.fn.setValue(!1,!0)):e.cb.fn.setValue(e.cb.options[e.cb.optionNodes[e.cb.sel.selectedIndex].value],!0),e.cb.required&&e.cb.isInput&&$A.setAttr(e.triggerNode,{"aria-required":"true"})},render:function(e,t,n){var r=this.dc;if(r.cb.multiple&&!n)for(var a in r.cb.options){var o=r.cb.options[a];$A.setAttr(o.o,"aria-selected",o.checked?"true":"false")}if(r.cb.readonly){var i=r.cb.showAll;r.cb.showAll=!0}if(!r.cb.readonly&&!r.cb.showAll&&!r.cb.value)return r.cb.showAll=i,!0;if(!t&&(r.cb.sIndex=r.cb.sel.selectedIndex,r.cb.matches=[],r.loaded))return s.close((function(){s.open(!0)})),r;if(t&&r.cb.key){var l=r.cb.key.toLowerCase(),c=!1,u=r.cb.sIndex;r.cb.sIndex++;for(var d=r.cb.sIndex;d<r.cb.names.length;d++)if(0===$A.inArray(l,r.cb.names[d].toLowerCase())){c=!0,r.cb.sIndex=d;break}if(!c)for(r.cb.sIndex=0,d=r.cb.sIndex;d<u;d++)if(0===$A.inArray(l,r.cb.names[d].toLowerCase())){c=!0,r.cb.sIndex=d;break}c?(r.cb.multiple?(r.cb.currentOption=[],r.cb.currentOption[0]=r.cb.options[r.cb.values[r.cb.sIndex]],r.cb.value=r.cb.currentOption[0].no):(r.cb.currentOption=r.cb.options[r.cb.values[r.cb.sIndex]],r.cb.value=r.cb.currentOption.no),r.cb.multiple?r.cb.select(r,r.cb.currentOption[0].o,!0):r.cb.select(r,r.cb.currentOption.o,!0)):r.cb.sIndex=u}else{if(e||r.cb.showAll||r.cb.readonly)r.cb.matches=r.cb.values;else for(d=0;d<r.cb.names.length;d++)if(r.cb.wordMatch){for(var f=$A.trim(r.cb.value).toLowerCase().split(" "),p=$A.trim(r.cb.names[d]).toLowerCase().split(" "),g=0,h=0,m=0;m<f.length;m++){for(var v=0;v<p.length;v++)if($A.trim(f[m])&&$A.trim(p[v])&&-1!==$A.inArray($A.trim(f[m]),$A.trim(p[v]))&&$A.trim(f[m]).length===$A.trim(p[v]).length){h++;break}g++}g&&h&&g<=h&&r.cb.matches.push(r.cb.values[d])}else(!r.cb.wordMatch&&!r.cb.substringMatch&&0===$A.inArray(r.cb.value.toLowerCase(),r.cb.names[d].toLowerCase())||!r.cb.wordMatch&&r.cb.substringMatch&&-1!==$A.inArray(r.cb.value.toLowerCase(),r.cb.names[d].toLowerCase()))&&r.cb.matches.push(r.cb.values[d]);if(!r.cb.matches.length)return!0;r.cb.readonly?r.cb.sIndex=r.cb.sel.selectedIndex:r.cb.sIndex=0,r.cb.readonly&&(r.cb.showAll=i,r.cb.currentObject=r.cb.options[r.cb.matches[r.cb.sIndex]])}return!1},setAltTrigger:function(e){if(e&&1===e.nodeType){var t=this.dc;$A.setAttr(e,{role:"button","aria-expanded":"false"}),$A.setAttr(e,{"aria-label":$A.isFn(window.getAccName)&&window.getAccName(t.triggerNode).name||$A.getText(t.triggerNode)}),t.cb.altClicked=!1,$A.off(e,"click"),$A.on(e,"click",(function(e){t.cb.altClicked||(t.cb.altClicked=!0,t.loaded?(t.cb.multiple&&t.cb.mClicked&&(t.cb.fn.setValue(!1,!1,!0),t.cb.mClicked=!1),s.close()):s.open(),t.triggerNode.focus(),setTimeout((function(){t.cb.altClicked=!1}),300)),e.stopPropagation(),e.preventDefault()})),t.cb.altTrigger=e}},setValue:function(e,t,n){var r=this.dc;if(e&&!r.cb.multiple)r.cb.value=e.no,r.cb.currentOption=e,t||(e.so.selected=!0),!t&&r.cb.fn.onSelect&&$A.isFn(r.cb.fn.onSelect)?((i=r.cb.fn.onSelect.apply(r.triggerNode,[e.no,e.v,r.triggerNode,r.cb.sel]))||$A.isStr(i))&&(r.cb.value=i):r.cb.isInput?(n||r.cb.setDefault)&&(r.triggerNode.value=r.cb.value):(n||r.cb.setDefault)&&(r.cb.child.innerHTML=r.cb.value);else if(!e&&r.cb.multiple){var a=[];if(t){a=$A.query("option[selected]",r.cb.sel);for(var o=0;o<a.length;o++)r.cb.options[a[o].value].checked=!0}r.cb.currentOption=[],r.cb.value="";var i,s=[];for(var l in r.cb.options)e=r.cb.options[l],t||(e.checked="true"===$A.getAttr(e.o,"aria-selected"),e.so.selected=e.checked),e.checked&&(r.cb.currentOption.push(e),a.push(e.so),s.push(e.no));r.cb.value=r.cb.multipleDivider(s),!t&&r.cb.fn.onSelect&&$A.isFn(r.cb.fn.onSelect)?((i=r.cb.fn.onSelect.apply(r.triggerNode,[r.cb.value,a,r.triggerNode,r.cb.sel]))||$A.isStr(i))&&(r.cb.value=i):r.cb.isInput?(n||r.cb.setDefault)&&(r.triggerNode.value=r.cb.value):(n||r.cb.setDefault)&&(r.cb.child.innerHTML=r.cb.value)}r.cb.pValue=r.cb.value},checkValue:function(e){var t=this.dc;if(!(e&&e.length>=t.cb.charMin))return-1;for(var n=0;n<t.cb.names.length;n++)if($A.trim(e)&&$A.trim(e.toLowerCase())==$A.trim(t.cb.names[n].toLowerCase()))return n;return-1},unsetValue:function(e){var t=this.dc;!e&&t.cb.sel.selectedIndex>=0&&(t.cb.optionNodes[t.cb.sel.selectedIndex].selected=!1),t.cb.currentOption=null,t.cb.isInput?t.cb.value=t.triggerNode.value:t.cb.value=$A.getText(t.cb.child)},bind:function(){var e=this.dc;if(!e.cb.bound){$A.off(e.triggerNode,".4XCombobox");var t=!1,r=null,a=function(t){e.cb.altTrigger||(e.loaded?e.loaded&&s.close():s.open())};$A.on(e.triggerNode,{touchstart:function(n){t=!0,!r&&e.loaded&&a.call(this,n),r=setTimeout((function(){r=null}),1e3)},mousedown:function(e){e.stopPropagation()},click:function(t){e.cb.isInput||a.call(this,t),t.stopPropagation()},keydown:function(t){var n=$A.keyEvent(t);t.stopPropagation(),9===n?e.loaded&&(e.cb.autoComplete&&e.cb.activeDescendant&&(e.cb.multiple?e.cb.fn.setValue(!1,!1,!0):e.cb.fn.setValue(e.cb.options[e.cb.matches[e.cb.sIndex]],!1,!0)),s.close()):13!==n&&32!==n||e.cb.isInput||e.cb.activeDescendant||e.loaded?e.cb.multiple||13!==n&&32!==n||!e.cb.activeDescendant||!e.loaded?e.cb.multiple&&13===n&&e.cb.activeDescendant&&e.loaded?(e.cb.fn.setValue(!1,!1,!0),s.close(),d(),t.preventDefault()):e.cb.multiple&&32===n&&e.cb.activeDescendant&&e.loaded?($A.setAttr(e.cb.options[e.cb.matches[e.cb.sIndex]].o,"aria-selected","true"===$A.getAttr(e.cb.options[e.cb.matches[e.cb.sIndex]].o,"aria-selected")?"false":"true"),e.cb.autoSaveIfChecked&&e.cb.fn.setValue(!1,!1,!0),t.preventDefault()):e.cb.readonly&&(n>=48&&n<=57||n>=65&&n<=90)&&(e.cb.key+=String.fromCharCode(n),e.cb.fn.render(!1,!0,!0),e.cb.keyReset&&clearTimeout(e.cb.keyReset),e.cb.keyReset=setTimeout((function(){e.cb.key=""}),1500)):(e.cb.fn.setValue(e.cb.options[e.cb.matches[e.cb.sIndex]],!1,!0),s.close(),d(),t.preventDefault()):(s.open(),t.preventDefault()),e.cb.showAllIfEmpty&&this.value&&(e.cb.showAll=e.fn.showAll),e.cb.readonly&&e.loaded&&(37===n||39===n)?t.preventDefault():40!==n||e.cb.activeDescendant||e.loaded||this.value||!e.cb.showAllIfEmpty?40!==n||e.cb.activeDescendant||e.loaded||!e.cb.readonly?40===n&&!e.cb.activeDescendant&&e.loaded?(e.cb.sIndex=e.cb.readonly&&e.cb.showAll&&e.cb.sel.selectedIndex>=0?e.cb.sel.selectedIndex:0,e.cb.select(e,e.cb.options[e.cb.matches[e.cb.sIndex]].o,!0),t.preventDefault()):40===n&&e.cb.activeDescendant&&e.loaded?(e.cb.sIndex<e.cb.matches.length-1?e.cb.sIndex++:e.cb.sIndex=0,e.cb.select(e,e.cb.options[e.cb.matches[e.cb.sIndex]].o,!0),t.preventDefault()):t.altKey&&38===n&&e.cb.activeDescendant&&e.loaded?(e.cb.multiple?e.cb.fn.setValue(!1,!1,!0):e.cb.fn.setValue(e.cb.options[e.cb.matches[e.cb.sIndex]],!1,!0),s.close(),d(),t.preventDefault()):38===n&&e.cb.activeDescendant&&e.loaded?(e.cb.sIndex>0?e.cb.sIndex--:e.cb.sIndex=e.cb.matches.length-1,e.cb.select(e,e.cb.options[e.cb.matches[e.cb.sIndex]].o,!0),t.preventDefault()):27!==n&&37!==n&&39!==n||(e.cb.select(e),27===n&&s.close()):(e.cb.sIndex=(e.cb.readonly||e.cb.showAll)&&e.cb.sel.selectedIndex>=0?e.cb.sel.selectedIndex:0,$A.isNum(e.cb.sIndex)||(e.cb.sIndex=0),s.open(),t.preventDefault()):(e.cb.showAll=!0,e.cb.sIndex=(e.cb.readonly||e.cb.showAll)&&e.cb.sel.selectedIndex>=0?e.cb.sel.selectedIndex:0,$A.isNum(e.cb.sIndex)||(e.cb.sIndex=0),s.open(),t.preventDefault())},keyup:function(t){var r=$A.keyEvent(t);if(!e.cb.readonly&&9!==r){e.cb.isInput&&(e.cb.value=this.value);var a=e.cb.fn.checkValue(e.cb.value);if(e.cb.value&&-1!==a){var o=e.cb.options[e.cb.values[a]];e.cb.multiple?(e.cb.currentOption=[],e.cb.currentOption[0]=o):e.cb.currentOption=o,o.so.selected=!0,s.close()}else if(e.cb.value&&e.cb.value.length>=e.cb.charMin){var i=!(!e.cb.isInput||e.cb.readonly);i&&(e.cb.pValue&&e.cb.pValue===n.value||(e.cb.pValue=n.value,i=!1)),i||(e.cb.fn.render(),s.open(!0))}else e.cb.multiple||38===r||40===r||s.close()}},focus:function(e){},blur:function(n){t||e.cb.multiple||setTimeout((function(){e.cb.altClicked||(e.loaded&&(e.cb.autoComplete&&e.cb.activeDescendant&&!e.cb.clicked&&e.cb.fn.setValue(e.cb.options[e.cb.matches[e.cb.sIndex]],!1,!0),s.close()),e.cb.clicked=!1)}),150)}},null,".4XCombobox"),e.cb.bound=!0}},set:function(){var e=this.dc;e.cb.select(e),$A.setAttr(e.triggerNode,{"aria-expanded":"false"}),e.cb.isInput||(e.cb.baseInc++,e.cb.child.id||$A.setAttr(e.cb.child,{tabindex:"-1",id:e.cb.baseId+e.cb.baseInc}),$A.addIdRef(e.triggerNode,"aria-labelledby",e.cb.child.id))},onSelect:null,onOpen:null,onClose:null,onTriggerChange:null,setSize:function(){var e=this.dc,t=(e.cb.size||5)<=e.cb.matches.length?e.cb.size||5:e.cb.matches.length,n=e.cb.options[e.cb.matches[0]].o,r=$A.elementHeight(n);r=t*(r+=parseInt($A.css(n,"margin-top"),10)+parseInt($A.css(n,"margin-bottom"),10))+(parseInt($A.css(e.content,"padding-top"),10)+parseInt($A.css(e.content,"padding-bottom"),10)),$A.css(e.content,"height",r)}}},click:function(e,t){e.stopPropagation()},beforeRender:function(e){if(!e.cb.matches.length)return e.cancel=!0;e.fn.matches=e.cb.matches,e.cb.baseInc++,e.content=s.listboxNode=$A.create(e.cb.parentTag,{role:"listbox","aria-label":r,id:e.cb.baseId+e.cb.baseInc,"aria-multiselectable":e.cb.multiple?"true":"false"},null,e.listboxClass);for(var t=0;t<e.cb.matches.length;t++)$A.isNode(e.cb.options[e.cb.matches[t]].o)||(e.cb.options[e.cb.matches[t]].o=$A.toNode(e.cb.options[e.cb.matches[t]].content,!0)),e.content.appendChild(e.cb.options[e.cb.matches[t]].o)},duringRender:function(e){$A.addClass(e.container,e.middleClass)},afterRender:function(e){$A.setAttr(s.combobox,"aria-controls",s.listboxNode.id),e.cb.matches!==e.fn.matches&&(e.beforeRender(e),e.insert(e.content)),$A.query(e.cb.matches,(function(t,n){$A.off(e.cb.options[n].o,"click"),$A.on(e.cb.options[n].o,{click:function(t){if(e.cb.multiple){var r=e.cb.options[n].o;r&&$A.setAttr(r,"aria-selected","true"===$A.getAttr(r,"aria-selected")?"false":"true"),e.cb.mClicked=!0}else e.cb.fn.setValue(e.cb.options[n],!1,!0),e.cb.clicked=!0,s.close(),d();t.preventDefault()},focus:function(e){}})})),e.cb.sIndex>=0||(e.cb.sIndex=0),e.cb.readonly&&e.cb.select(e,e.cb.options[e.cb.matches[e.cb.sIndex]].o,!0),e.cb.fn.setSize(),"desktop"!==window.device.type&&setTimeout((function(){$A.announce(e.cb.options[e.cb.matches[e.cb.sIndex]].no,!1)}),1),$A.setAttr(e.triggerNode,"aria-expanded","true"),e.cb.altTrigger&&1===e.cb.altTrigger.nodeType&&($A.addClass(e.cb.altTrigger,e.toggleClassName),$A.setAttr(e.cb.altTrigger,"aria-expanded","true"),e.cb.fn.onTriggerChange&&$A.isFn(e.cb.fn.onTriggerChange)&&e.cb.fn.onTriggerChange.apply(e.cb.altTrigger,[e.cb.altTrigger,e.loaded])),e.cb.fn.onOpen&&$A.isFn(e.cb.fn.onOpen)&&e.cb.fn.onOpen.apply(e.triggerNode,[e])},beforeRemove:function(e){e.loaded&&e.cb.multiple&&e.cb.mClicked&&e.cb.fn.setValue(!1,!1,!0)},afterRemove:function(e){e.cb.mClicked=!1,e.cb.select(e),$A.setAttr(e.triggerNode,{"aria-expanded":"false"}),e.cb.altTrigger&&1===e.cb.altTrigger.nodeType&&($A.remClass(e.cb.altTrigger,e.toggleClassName),$A.setAttr(e.cb.altTrigger,{"aria-expanded":"false"}),e.cb.fn.onTriggerChange&&$A.isFn(e.cb.fn.onTriggerChange)&&e.cb.fn.onTriggerChange.apply(e.cb.altTrigger,[e.cb.altTrigger,e.loaded])),e.cb.fn.onClose&&$A.isFn(e.cb.fn.onClose)&&e.cb.fn.onClose.apply(e.triggerNode,[e])},onCreate:function(e){s.combobox=e.triggerNode,s.select=e.cb.sel},scrollConfig:e.scrollConfig||{}};$A.extend(c,e.override||{});var u=$A([c])[0];u.cb.dc=u.cb.fn.dc=s.dc=u,u.cb.sel=t,u.cb.child=a;var d=function(){u.cb.fn.onSelect&&$A.isFn(u.cb.fn.onSelect)||setTimeout((function(){!u.cb.multiple||u.cb.isInput?$A.announce(u.cb.value.toString(),!1,!0):u.cb.child&&$A.announce(u.cb.child,!1,!0)}),150)};return s.setCharMin=function(e){$A.isNum(e)&&e>=0&&(u.cb.charMin=e)},s.setShowAll=function(e){u.cb.showAll=u.fn.showAll=!!e},s.setShowAllIfEmpty=function(e){u.cb.showAllIfEmpty=!!e},s.setAutoSaveIfChecked=function(e){u.cb.autoSaveIfChecked=!!e},s.setSubstringMatch=function(e){u.cb.substringMatch=!!e},s.setWordMatch=function(e){u.cb.wordMatch=!!e},s.setTags=function(e){e.parentTag&&(u.cb.parentTag=e.parentTag),e.childTag&&(u.cb.childTag=e.childTag)},s.setOffset=function(e){isNaN(e.left)||(u.offsetLeft=e.left),isNaN(e.top)||(u.offsetTop=e.top)},s.setAutoComplete=function(e){u.cb.autoComplete=!!e},s.close=function(e){u.remove(e)},s.open=function(e){u.loaded||l&&(u.cb.fn.render(),u.render((function(){"desktop"===window.device.type&&u.cb.select(u,u.cb.options[u.cb.matches[u.cb.sIndex]].o,!0)})))},s.setAltTrigger=function(e){u.cb.fn.setAltTrigger(e)},s.setAutoPosition=function(e){!isNaN(e)&&e<10&&(u.autoPosition=e)},s.setSize=function(e){!isNaN(e)&&e>0&&(u.cb.size=e)},s.setPosAnchor=function(e){u.posAnchor=e},s.setTargetNode=function(e){u.targetNode=e},s.setClassNames=function(e){e.toplevelClass&&(u.className=e.toplevelClass),e.middleClass&&(u.middleClass=e.middleClass),e.listboxClass&&(u.listboxClass=e.listboxClass),e.optionClass&&(u.optionClass=e.optionClass),e.activeClass&&(u.activeClass=e.activeClass),e.toggleClass&&(u.toggleClassName=e.toggleClass)},s.setDefault=function(e){u.cb.setDefault=!!e},s.setMultipleDivider=function(e){e&&$A.isFn(e)&&(u.cb.multipleDivider=e)},s.clearAll=function(){for(var e in s.close(),u.cb.options){var t=u.cb.options[e];t.so.selected=!1,t.checked=!1,$A.setAttr(t.o,"aria-selected","false")}u.cb.isInput?u.triggerNode.value="":u.cb.child&&(u.cb.multiple?u.cb.fn.setValue(!1,!0):$A.empty(u.cb.child))},s.update=function(){u.cb.fn.update()},s.start=function(){l=!0,u.cb.fn.bind(),u.cb.fn.update(),document.activeElement===n&&(u.cb.readonly||u.cb.value)&&s.open()},s.stop=function(){l=!1,s.close()},s.onSelect=function(e){e&&$A.isFn(e)&&(u.cb.fn.onSelect=e)},s.onOpen=function(e){e&&$A.isFn(e)&&(u.cb.fn.onOpen=e)},s.onClose=function(e){e&&$A.isFn(e)&&(u.cb.fn.onClose=e)},s.onTriggerChange=function(e){e&&$A.isFn(e)&&(u.cb.fn.onTriggerChange=e)},s.setPromptText=function(e){$A.setAttr(n,"aria-description",e)},s.setCloseText=function(e){e?(u.exposeHiddenClose=!0,u.hiddenCloseName=e):u.exposeHiddenClose=!1},s.scrollIntoView=function(e,t,n){$A.scrollTo(e,$A.extend({duration:100,container:s.listboxNode,complete:function(){$A.isFn(t)&&t.call(e,e)}},n.scrollConfig||{}))},s.getValue=function(){if(u.cb.multiple){var e=[];for(var t in u.cb.options){var n=u.cb.options[t];n.checked&&n.so.selected&&e.push(n.so)}return e}return u.cb.sel.value},$A.on(window,"resize."+i,(function(){u&&u.loaded&&(u.setPosition(),u.cb.fn.setSize())})),$A(n).on("remove",(function(e,t){$A.off(window,"."+i)})),u.cb.isInput||$A.getAttr(u.triggerNode,"tabindex")||$A.setAttr(u.triggerNode,"tabindex","0"),u.cb.fn.set(),$A.remAttr(u.triggerNode,["data-controls"]),s}}),"setDatepicker"in $A||($A.addWidgetProfile("Datepicker",{configure:function(e){return{returnFocus:!1,allowRerender:!0,exposeBounds:!0,exposeHiddenClose:!1}},role:function(e){return{role:"dialog","aria-modal":"false","aria-label":e.role}},innerRole:function(e){return{role:"application"}}}),$A.extend({setDatepicker:function(e){var t=(e=e||{}).helpTextShort?e.helpTextShort:"Press F1 for help.",n=e.helpText?e.helpText:"Press the arrow keys to navigate by day, PageUp and PageDown to navigate by month, Alt+PageUp and Alt+PageDown to navigate by year, or Escape to cancel.",r=!0===e.monthOnly,a=r||!0===e.monthSelect,o=r||!0===e.yearSelect,i=r||!0===e.forceSelect,s=e.openOnFocusHelpText?e.openOnFocusHelpText:"Press Down arrow to browse the calendar, or Escape to close.",l=!1,c=!1,u=e.id||$A.genId(),d=$A.morph(e.toggle),f=$A.morph(e.input),p=!r&&!0===e.enableComments,g=$A.isFn(e.onActivate)?e.onActivate:function(t,n){f.value=n.formatDate(n),n.remove(),n.triggerClicked?$A.focus(e.returnFocusTo||d):$A.focus(e.returnFocusTo||f),n.triggerClicked=!1},h={},m=function(e){h.alt=e.altKey,h.ctrl=e.ctrlKey,h.shift=e.shiftKey},v=$A.genId(),b=$A([{id:u,role:e.role||"Calendar",widgetType:"Datepicker",autoCloseSameWidget:!0,trigger:d,target:f,on:"opendatepicker",disabled:!0===e.disabled,returnFocus:!1,openOnFocus:!0===e.openOnFocus,openOnFocusHelpText:s,showEscBtn:!0===e.showEscBtn,escBtnName:e.escBtnName||"Close",escBtnIcon:e.escBtnIcon||"&times;",tooltipTxt:e.tooltipTxt||"Press Escape to cancel",markedTxt:e.markedTxt||"Selected",disabledTxt:e.disabledTxt||"Disabled",commentedTxt:e.commentedTxt||"Has Comment",prevTxt:e.prevTxt||"Previous",nextTxt:e.nextTxt||"Next",monthTxt:e.monthTxt||"Month",yearTxt:e.yearTxt||"Year",leftButtonYearText:e.leftButtonYearText||"&#8656;",rightButtonYearText:e.rightButtonYearText||"&#8658;",leftButtonMonthText:e.leftButtonMonthText||"&#8592;",rightButtonMonthText:e.rightButtonMonthText||"&#8594;",drawFullCalendar:!0===e.drawFullCalendar,highlightToday:!$A.isBool(e.highlightToday)||e.highlightToday,pageUpDownNatural:!0,inputDateFormat:e.inputDateFormat||"MM/DD/YYYY",audibleDateFormat:e.audibleDateFormat||"dddd D MMMM YYYY",initialDate:e.initialDate instanceof Date?e.initialDate:new Date,minDate:void 0!==e.minDate?e.minDate instanceof Date?e.minDate:new Date((new Date).setDate((new Date).getDate()+e.minDate)):void 0,maxDate:void 0!==e.maxDate?e.maxDate instanceof Date?e.maxDate:new Date((new Date).setDate((new Date).getDate()+e.maxDate)):void 0,disableWeekdays:void 0!==e.disableWeekdays&&e.disableWeekdays,disableWeekends:void 0!==e.disableWeekends&&e.disableWeekends,className:e.className||"calendar",range:{disabledWDays:[],0:{name:e.months&&e.months[0]?e.months[0]:"January",max:31,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},1:{name:e.months&&e.months[1]?e.months[1]:"February",max:28,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},2:{name:e.months&&e.months[2]?e.months[2]:"March",max:31,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},3:{name:e.months&&e.months[3]?e.months[3]:"April",max:30,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},4:{name:e.months&&e.months[4]?e.months[4]:"May",max:31,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},5:{name:e.months&&e.months[5]?e.months[5]:"June",max:30,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},6:{name:e.months&&e.months[6]?e.months[6]:"July",max:31,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},7:{name:e.months&&e.months[7]?e.months[7]:"August",max:31,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},8:{name:e.months&&e.months[8]?e.months[8]:"September",max:30,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},9:{name:e.months&&e.months[9]?e.months[9]:"October",max:31,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},10:{name:e.months&&e.months[10]?e.months[10]:"November",max:30,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},11:{name:e.months&&e.months[11]?e.months[11]:"December",max:31,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},wDays:[{shrt:e.days&&e.days[0]?e.days[0].s:"S",lng:e.days&&e.days[0]?e.days[0].l:"Sunday"},{shrt:e.days&&e.days[1]?e.days[1].s:"M",lng:e.days&&e.days[1]?e.days[1].l:"Monday"},{shrt:e.days&&e.days[2]?e.days[2].s:"T",lng:e.days&&e.days[2]?e.days[2].l:"Tuesday"},{shrt:e.days&&e.days[3]?e.days[3].s:"W",lng:e.days&&e.days[3]?e.days[3].l:"Wednesday"},{shrt:e.days&&e.days[4]?e.days[4].s:"T",lng:e.days&&e.days[4]?e.days[4].l:"Thursday"},{shrt:e.days&&e.days[5]?e.days[5].s:"F",lng:e.days&&e.days[5]?e.days[5].l:"Friday"},{shrt:e.days&&e.days[6]?e.days[6].s:"S",lng:e.days&&e.days[6]?e.days[6].l:"Saturday"}],wdOffset:isNaN(e.wdOffset)?0:e.wdOffset},getWDay:function(e,t,n){t=$A.isNum(t)?t:e.range.current.wDay;var r=e.range.wdOffset;return r<0?t=t+r<0?7+r:t+r:r>0&&(t=t+r>6?t+r-6-1:t+r),n&&(t=6-t),t},getDateOrdinalSuffix:function(e){var t=e%10,n=e%100;return 1===t&&11!==n?e+"st":2===t&&12!==n?e+"nd":3===t&&13!==n?e+"rd":e+"th"},formatDate:function(e,t,n){t||(t={YYYY:e.range.current.year,YY:e.range.current.year.toString().slice(-2),MMMM:e.range[e.range.current.month].name,dddd:e.range.wDays[e.range.current.wDay].lng,MM:("00"+(e.range.current.month+1)).slice(-2),DD:("00"+e.range.current.mDay).slice(-2),Do:e.getDateOrdinalSuffix(e.range.current.mDay),M:e.range.current.month+1,D:e.range.current.mDay}),$A.isStr(n)||(n=e.inputDateFormat);var r=new RegExp(Object.keys(t).join("|"),"gi");return n.replace(r,(function(e){return t[e]}))},modifyDateValues:function(e,t){for(var n in t){var r=t[n];"month"===n&&(e.month+=r,r<0?e.month<0&&(e.month=11,e.year&&(e.year-=1)):e.month>11&&(e.month=0,e.year&&(e.year+=1)))}return e},setFocus:function(e,t,n){var a=this;return!!e&&(a.current=e,r||(a.query("td.dayInMonth.selected",(function(e,t){$A.setAttr(t,{tabindex:"-1"}),$A.remClass(t,"selected"),$A.data(t,"_Selected",0)})),$A.addClass(e,"selected"),$A.data(e,"_Selected",!0),$A.setAttr(e,{tabindex:"0"})),n||("PM"===a.navBtn?(a.buttons.pM.focus(),setTimeout((function(){$A.announce(a.range[a.range.current.month].name,!1,!0)}),1),a.navBtnS=!0):"NM"===a.navBtn?(a.buttons.nM.focus(),setTimeout((function(){$A.announce(a.range[a.range.current.month].name,!1,!0)}),1),a.navBtnS=!0):"PY"===a.navBtn?(a.buttons.pY.focus(),setTimeout((function(){$A.announce(a.range.current.year.toString(),!1,!0)}),1),a.navBtnS=!0):"NY"===a.navBtn?(a.buttons.nY.focus(),setTimeout((function(){$A.announce(a.range.current.year.toString(),!1,!0)}),1),a.navBtnS=!0):"CY"===a.navBtn||"CM"===a.navBtn||r&&(!a.openOnFocus||D)?a.buttons.cYS.hidden?a.buttons.cY.hidden||a.buttons.cY.focus():a.buttons.cYS.focus():(!a.openOnFocus||a.openOnFocus&&!l&&c)&&e.focus()),a.fn.navBtn?a.fn.navBtn="":a.navBtn="",!0)},setCurrent:function(e){e.date instanceof Date&&(e.range.current={mDay:e.date.getDate(),month:e.date.getMonth(),year:e.date.getFullYear(),wDay:e.date.getDay()})},setDayMarked:function(e,t,n){var r=t.getFullYear(),a=t.getMonth(),o=t.getDate();if(n)"object"!=typeof e.range[a].marked[r]&&(e.range[a].marked[r]=[]),e.range[a].marked[r].push(o);else if("object"==typeof e.range[a].marked[r]){var i=e.range[a].marked[r].indexOf(o);-1!==i&&delete e.range[a].marked[r][i]}},clearAllMarked:function(e){for(var t in e.range)e.range[t].marked={}},setDayDisabled:function(e,t,n){var r=t.getFullYear(),a=t.getMonth(),o=t.getDate();if(n)"object"!=typeof e.range[a].disabled[r]&&(e.range[a].disabled[r]=[]),e.range[a].disabled[r].push(o);else if("object"==typeof e.range[a].disabled[r]){var i=e.range[a].disabled[r].indexOf(o);-1!==i&&delete e.range[a].disabled[r][i]}},setMonthDisabled:function(e,t,n){var r=t.getFullYear(),a=t.getMonth();if(n){e.range[a].disabled[r]=[];for(var o=1;o<=e.range[a].max;o++)e.range[a].disabled[r].push(o)}else e.range[a].disabled[r]=[]},setDayOfWeekDisabled:function(e,t,n,r){var a=t.getFullYear(),o=t.getMonth();"object"!=typeof e.range[o].disabled[a]&&(e.range[o].disabled[a]=[]);for(var i=new Date(a,o,1),s=1;s<=e.range[o].max;s++)if(i.setDate(s),-1!==n.indexOf(i.getDay()))if(r)e.range[o].disabled[a].push(s);else{var l=e.range[o].marked[a].indexOf(s);-1!==l&&delete e.range[o].marked[a][l]}},setWeekdaysDisabled:function(e,t,n){e.setDayOfWeekDisabled(e,t,[1,2,3,4,5],n)},setWeekendsDisabled:function(e,t,n){e.setDayOfWeekDisabled(e,t,[0,6],n)},clearAllDisabled:function(e){for(var t in e.range)e.range[t].disabled={}},setMonthMessage:function(e,t,n){var r=t.getFullYear(),a=t.getMonth();$A.isStr(n)&&n.length>0?e.range[a].message[r]=n:delete e.range[a].message[r]},clearAllMessage:function(e){for(var t in e.range)e.range[t].message={}},isDisabledYear:function(e,t){for(var n=0;n<=11;n++)if(!e.isDisabledMonth(e,n,t))return!1;return!0},isDisabledMonth:function(e,t,n){for(var r=1;r<=e.range[t].max;r++)if(!e.isDisabledDate(e,r,new Date(n,t,r)))return!1;return!0},isDisabledDate:function(e,t,n,r){r||(r=e.range.current);var a=e.range[r.month].disabled[r.year],o=e.range[r.month].disabled["*"],i=e.range[r.month].disabledWDays,s=e.range.disabledWDays,l=n.getDay();return!!(a&&-1!==$A.inArray(t,a)||o&&-1!==$A.inArray(t,o)||i.length&&-1!==$A.inArray(l,i)||s.length&&-1!==$A.inArray(l,s)||e.isOutsideDateRange(n))},isOutsideDateRange:function(e){var t=this.createDateComparisonValue(e);return this.minDateComparisonValue&&t<this.minDateComparisonValue||this.maxDateComparisonValue&&t>this.maxDateComparisonValue},createDayCell:function(e,t,n,r,a){var o=this,i="<td ",s=o.createDateComparisonValue(new Date),l=o.createDateComparisonValue(t);l===s&&(i+='aria-current="date" '),r&&(i+='aria-disabled="true" '),i+='aria-label="';var c=o.range[o.range.current.month].comments[o.range.current.year],u=o.range[o.range.current.month].comments["*"],d="";c&&c[e]?d=c[e]:u&&u[e]&&(d=u[e]),d&&(i+=o.commentedTxt.replace(/<|>|\"/g,"")+" ");var f=t.getMonth(),p={YYYY:t.getFullYear(),MMMM:o.range[f].name,dddd:o.range.wDays[t.getDay()].lng,MM:("00"+(f+1)).slice(-2),DD:("00"+e).slice(-2),Do:o.getDateOrdinalSuffix(e),M:f+1,D:e},g=new RegExp(Object.keys(p).join("|"),"gi");i+=o.audibleDateFormat.replace(g,(function(e){return p[e]})),d&&(i+=d.replace(/<|>|\n/g," ").replace(/\"/g,'\\"')),i+='" role="button" tabindex="-1" ',i+='class="day '+(n||""),!0===o.highlightToday&&l===s&&(i+=" dayToday");var h=o.range[o.range.current.month].marked[o.range.current.year]&&-1!==o.range[o.range.current.month].marked[o.range.current.year].indexOf(e);return(a&&!r||h)&&(i+=" dayMarked"),r&&(i+=" disabled"),d&&(i+=" comment"),i+='" ',i+='title="',h?i+=o.markedTxt.replace(/<|>|\"/g,""):r&&(i+=o.disabledTxt.replace(/<|>|\"/g,"")),i+='" id="'+o.baseId+e+'"><span aria-hidden="true">'+e+"</span></td>"},createDateComparisonValue:function(e){return parseInt(e.getFullYear()+("00"+e.getMonth()).slice(-2)+("00"+e.getDate()).slice(-2),10)},presetDate:function(e,t,n,r){(e=e||this).initialDate=t||e.initialDate||new Date,e.minDate=n||e.minDate||null,e.maxDate=r||e.maxDate||null,e.setDateComparisons(e),e.date=e.isDisabledDate(e,e.initialDate.getDate(),e.initialDate)?new Date:e.initialDate,e.setCurrent(e),e.fn.current={},$A.extend(!0,e.fn.current,e.range.current)},setDate:function(e,t){void 0===t&&((e.minDate||e.maxDate)&&e.isOutsideDateRange(e.initialDate)?e.initialDate<e.minDate?t=e.minDate:e.initialDate>e.maxDate&&(t=e.maxDate):t=e.initialDate),e.date=t,e.setCurrent(e),e.fn.current={},$A.extend(!0,e.fn.current,e.range.current)},setDateComparisons:function(e){e.minDate instanceof Date&&(e.minDate.setHours(0,0,0,0),e.minDateComparisonValue=e.createDateComparisonValue(e.minDate)),e.maxDate instanceof Date&&(e.maxDate.setHours(0,0,0,0),e.maxDateComparisonValue=e.createDateComparisonValue(e.maxDate)),e.initialDate instanceof Date?e.currentDate=e.initialDate:e.currentDate=new Date,e.currentDateComparisonValue=e.createDateComparisonValue(e.currentDate)},storeCurrentDate:function(e){e.date=new Date(e.range.current.year,e.range.current.month,e.range.current.mDay)},setDisabled:function(e,t){"boolean"==typeof e?(t=e,e=this):e=e||this,e.disabled=!!t,$A.setAttr([f,d],"disabled",e.disabled),e.disabled||$A.remAttr([f,d],"disabled")},onceBeforeRender:function(e){e.date instanceof Date||(e.setDateComparisons(e),e.setDate(e))},rerenderTable:function(e){e.rerendering=!0,e.afterRemove(e),e.beforeRender(e),e.duringRender(e),e.afterRender(e),e.rerendering=!1},beforeRender:function(t){var n=f.value.replace(/\.|\-/g,"/"),s=f.value.split("/");2===s.length?s[1]>12?(2===s[1].length&&(s[1]="20"+s[1]),n=s[0]+"/01/"+s[1]):s[0]>12&&(2===s[0].length&&(s[0]="20"+s[0]),n=s[1]+"/01/"+s[0]):"DD/MM/YYYY"===e.inputDateFormat&&3===s.length?(2===s[2].length&&(s[2]="20"+s[2]),n=s[1]+"/"+s[0]+"/"+s[2]):"MM/DD/YYYY"===e.inputDateFormat&&3===s.length&&(2===s[2].length&&(s[2]="20"+s[2]),n=s[0]+"/"+s[1]+"/"+s[2]);var l,c=/^(0?[1-9]|1[0-2])\/(0?[1-9]|[12][0-9]|3[01])\/\d{4}$/.test(l=n)||/^(0?[1-9]|[12][0-9]|3[01])\/(0?[1-9]|1[0-2])\/\d{4}$/.test(l);c||(n=t.initialDate),!t.rerendering&&c&&n&&!t.isOutsideDateRange(new Date(n))&&t.presetDate(t,new Date(n)),t.disableWeekdays&&t.setWeekdaysDisabled(t,t.date,!0),t.disableWeekends&&t.setWeekendsDisabled(t,t.date,!0),!$A.isFn(e.configure)||t.stopConfigure||t.configureLoading||(t.configureLoading=t.cancel=!0,t.fn.navBtn=t.navBtn,!0===e.configure.apply(t,[t])&&setTimeout((function(){t.render()}),1)),1===t.range.current.month&&(t.range[1].max=1===new Date(t.range.current.year,1,29).getMonth()?29:28),t.baseId=v,t.prevBtnId=t.baseId+"p",t.currentBtnId=t.baseId+"c",t.nextBtnId=t.baseId+"n";var u=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:-1}),d=new Date;d.setMonth(u.month),d.setFullYear(u.year);var p=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:1}),g=new Date;g.setMonth(p.month),g.setFullYear(p.year);var h="";if(!e.condenseYear){var m=!t.isOutsideDateRange(new Date(t.range.current.year-1,0,1)),b=!t.isOutsideDateRange(new Date(t.range.current.year+1,0,1));h='<tr class="yearSelector" role="presentation"><td class="nav prev btn year'+(m?"":" disabled")+'" accesskey="1" title="'+t.prevTxt.replace(/<|>|\"/g,"")+" "+t.yearTxt.replace(/<|>|\"/g,"")+'" aria-label="'+t.prevTxt.replace(/<|>|\"/g,"")+" "+t.yearTxt.replace(/<|>|\"/g,"")+'"'+(m?' tabindex="0"':' aria-disabled="true" tabindex="-1"')+' role="button" id="'+t.prevBtnId+'Y"><span aria-hidden="true">'+t.leftButtonYearText+'</span></td><td colspan="5" class="year" role="presentation" title="'+t.tooltipTxt.replace(/<|>|\"/g,"")+'">'+(o?"<select "+(i?"":"hidden ")+'class="nav current select year" id="'+t.currentBtnId+'Y" title="'+t.yearTxt.replace(/<|>|\"/g,"")+'" aria-label="'+t.yearTxt.replace(/<|>|\"/g,"")+'">'+function(){var n=e.yearSelectMin||t.range.current.year,r=e.yearSelectMax||t.range.current.year,a="";for(t.minDate instanceof Date&&(n=Math.min(n,t.minDate.getFullYear())),t.maxDate instanceof Date&&(r=Math.max(r,t.maxDate.getFullYear()));n<=r;)t.isDisabledYear(t,n)||(a+="<option"+(n===t.range.current.year?' selected="selected"':"")+" value="+n+">"+n+"</option>"),n++;return a}()+"</select><span "+(i?"hidden ":"")+'class="nav current btn year" tabindex="0" role="button" id="'+t.currentBtnId+'YB">'+t.range.current.year+"</span>":"<span>"+t.range.current.year+"</span>")+'</td><td class="nav next btn year'+(b?"":" disabled")+'" accesskey="2" title="'+t.nextTxt.replace(/<|>|\"/g,"")+" "+t.yearTxt.replace(/<|>|\"/g,"")+'" aria-label="'+t.nextTxt.replace(/<|>|\"/g,"")+" "+t.yearTxt.replace(/<|>|\"/g,"")+'"'+(b?' tabindex="0"':' aria-disabled="true" tabindex="-1"')+' role="button" id="'+t.nextBtnId+'Y"><span aria-hidden="true">'+t.rightButtonYearText+"</span></td></tr>"}var y=!t.isOutsideDateRange(new Date(u.year,u.month,t.range[u.month].max)),A=!t.isOutsideDateRange(new Date(p.year,p.month,1)),w='<tr class="monthSelector" role="presentation"><td class="nav prev btn month'+(y?"":" disabled")+'" accesskey="3" title="'+t.prevTxt.replace(/<|>|\"/g,"")+" "+t.monthTxt.replace(/<|>|\"/g,"")+'" aria-label="'+t.prevTxt.replace(/<|>|\"/g,"")+" "+t.monthTxt.replace(/<|>|\"/g,"")+'"'+(y?' tabindex="0"':' aria-disabled="true" tabindex="-1"')+' role="button" id="'+t.prevBtnId+'"><span aria-hidden="true">'+t.leftButtonMonthText+'</span></td><td colspan="5" class="month" role="presentation">'+(a?"<select "+(i?"":"hidden ")+'class="nav current select month" id="'+t.currentBtnId+'M" title="'+t.monthTxt.replace(/<|>|\"/g,"")+'" aria-label="'+t.monthTxt.replace(/<|>|\"/g,"")+'">'+function(){for(var n="",r=0;r<=11;r++)t.isDisabledMonth(t,r,t.range.current.year)||(n+="<option value="+r+(r===t.range.current.month?' selected="selected"':"")+">"+t.range[r].name+(e.condenseYear?" "+t.range.current.year:"")+"</option>");return n}()+"</select><span "+(i?"hidden ":"")+'class="nav current btn month" tabindex="0" role="button" id="'+t.currentBtnId+'MB">'+t.range[t.range.current.month].name+(e.condenseYear?" "+t.range.current.year:"")+"</span>":"<span>"+t.range[t.range.current.month].name+(e.condenseYear?" "+t.range.current.year:"")+"</span>")+'</td><td class="nav next btn month'+(A?"":" disabled")+'" accesskey="4" title="'+t.nextTxt.replace(/<|>|\"/g,"")+" "+t.monthTxt.replace(/<|>|\"/g,"")+'" aria-label="'+t.nextTxt.replace(/<|>|\"/g,"")+" "+t.monthTxt.replace(/<|>|\"/g,"")+'"'+(A?' tabindex="0"':' aria-disabled="true" tabindex="-1"')+' role="button" id="'+t.nextBtnId+'"><span aria-hidden="true">'+t.rightButtonMonthText+"</span></td></tr>";t.content="",t.content+='<table role="presentation" class="calendar">'+h+w+'<tr role="presentation" aria-hidden="true"'+(r?' hidden="hidden">':">"),t.iter=0;for(var x=0;x<7;x++){var C=t.getWDay(t,x),$=t.range.wDays[C];x||(t.iter=t.iterE=C+6>6?-1+C:C+6,t.iterS=C),t.content+='<th scope="col" class="week" title="'+$.lng+'" role="presentation"><span>'+$.shrt+"</span></th>"}t.content+='</tr><tr role="presentation"'+(r?' hidden="hidden">':">");var D=new Date;D.setDate(1),D.setMonth(t.range.current.month),D.setFullYear(t.range.current.year);var N=D.getDay();D.setDate(t.range[t.range.current.month].max);var S=D.getDay(),k=t.iterS;if(!0===t.drawFullCalendar)var O=new Date(u.year,u.month+1,0).getDate()-new Date(t.range.current.year,t.range.current.month,0).getDay()+t.range.wdOffset;for(;k!==N;)k=k+1>6?0:k+1,!0===t.drawFullCalendar?(d.setDate(O),t.content+=t.createDayCell(O,d,"dayInPrevMonth",t.isDisabledDate(t,O,d)),++O):t.content+='<td class="empty" role="presentation"><span>&nbsp;</span></td>';for(t.range.track={},x=1;x<=31;x++)t.range.track[t.baseId+x]=x;for(x=1;x<=t.range[t.range.current.month].max;x++){D.setDate(x);var _=x===t.fn.current.mDay&&t.range.current.month===t.fn.current.month&&t.range.current.year===t.fn.current.year;t.content+=t.createDayCell(x,D,"dayInMonth",t.isDisabledDate(t,x,D),_),(k=D.getDay())===t.iter&&x<t.range[t.range.current.month].max&&(t.content+='</tr><tr role="presentation"'+(r?' hidden="hidden">':">"))}for(!0===t.drawFullCalendar&&(O=1);S!==t.iter;)S=S+1>6?0:S+1,!0===t.drawFullCalendar?(g.setDate(O),t.content+=t.createDayCell(O,g,"dayInNextMonth",t.isDisabledDate(t,O,g)),++O):t.content+='<td class="empty" role="presentation"><span>&nbsp;</span></td>';t.content+="</tr></table>",$A.isNode(t.messageContainer)||(t.messageContainerId=$A.genId(),t.messageContainer=$A.create("div",{id:t.messageContainerId},{},"monthMessage")),t.range[t.range.current.month].message[t.range.current.year]?(t.messageContainer.innerHTML="<p>"+t.range[t.range.current.month].message[t.range.current.year]+"</p>",$A.setAttr(t.container,"aria-labelledby",t.messageContainerId)):(T||(t.messageContainer.innerHTML="<p>"+t.helpTextShort+"</p>"),$A.remAttr(t.container,"aria-labelledby")),t.showEscBtn&&(t.content+='<button id="'+t.baseId+'esc" aria-label="'+t.escBtnName+'" title="'+t.escBtnName+'" class="esc-button">'+t.escBtnIcon+"</button>")},mouseEnter:function(e,t){t.mouseWithin=!0},mouseLeave:function(e,t){t.mouseWithin=!1},click:function(e,t){e.stopPropagation()},keyDown:function(e,t){112===$A.keyEvent(e)&&($A.remAttr(t.container,"aria-labelledby"),t.container.appendChild(t.messageContainer),$A.setAttr(t.messageContainer,{role:"alert"}),T||(t.messageContainer.innerHTML="<p>"+t.helpText+"</p>"),e.preventDefault(),e.stopPropagation())},updateDisabled:function(){this.query('td[aria-disabled="true"]',(function(e,t){$A.data(t,"disabled",!0)}))},updateCommented:function(){this.query("td.comment",(function(e,t){$A.data(t,"_HasComment",!0)}))},duringRender:function(e){e.rerendering?e.container.innerHTML=e.content:(e.datepickerLoaded=!1,e.setAttr({title:T?"":e.helpTextShort})),e.messageContainer.innerHTML&&e.container.appendChild(e.messageContainer)},afterRender:function(t){t.buttons={esc:t.showEscBtn?t.container.querySelector("button.esc-button"):null,pY:e.condenseYear?null:$A.get(t.prevBtnId+"Y"),nY:e.condenseYear?null:$A.get(t.nextBtnId+"Y"),pM:$A.get(t.prevBtnId),nM:$A.get(t.nextBtnId)},!e.condenseYear&&t.disableNavPrevYearBtn&&$A.setAttr(t.buttons.pY,"aria-disabled","true"),!e.condenseYear&&t.disableNavNextYearBtn&&$A.setAttr(t.buttons.nY,"aria-disabled","true"),t.disableNavPrevMonthBtn&&$A.setAttr(t.buttons.pM,"aria-disabled","true"),t.disableNavNextMonthBtn&&$A.setAttr(t.buttons.nM,"aria-disabled","true"),t.prevCurrent||(t.prevCurrent={}),$A.extend(!0,t.prevCurrent,t.range.current),t.updateDisabled(),t.updateCommented();var n,s,u,d=function(){if(!t.disableNavNextMonthBtn||!$A.data(t.buttons.nM,"disabled")){$A.extend(!0,t.prevCurrent,t.range.current);var e=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:1});if(t.isOutsideDateRange(new Date(e.year,e.month,1)))t.date=t.maxDate;else{var n=t.range.current.mDay>t.range[e.month].max?t.range[e.month].max:t.range.current.mDay,r=new Date(e.year,e.month,n);t.isOutsideDateRange(r)?t.date=t.maxDate:t.date=r}t.setCurrent(t),t.rerenderTable(t)}},w=function(){if(!t.disableNavPrevMonthBtn||!$A.data(t.buttons.pM,"disabled")){$A.extend(!0,t.prevCurrent,t.range.current);var e=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:-1});if(t.isOutsideDateRange(new Date(e.year,e.month,t.range[e.month].max)))t.date=t.minDate;else{var n=t.range.current.mDay>t.range[e.month].max?t.range[e.month].max:t.range.current.mDay,r=new Date(e.year,e.month,n);t.isOutsideDateRange(r)?t.date=t.minDate:t.date=r}t.setCurrent(t),t.rerenderTable(t)}},x=function(n){if((n||!(!e.condenseYear&&$A.data(t.buttons.pY,"disabled")||e.condenseYear&&t.disableNavPrevYearBtn))&&(!n||!(!e.condenseYear&&$A.data(t.buttons.nY,"disabled")||e.condenseYear&&t.disableNavNextYearBtn))){$A.extend(!0,t.prevCurrent,t.range.current);var r=t.range.current.month,a=n?t.range.current.year+1:t.range.current.year-1;1===r&&(t.range[1].max=28);var o=t.range.current.mDay>t.range[r].max?t.range[r].max:t.range.current.mDay,i=new Date(a,r,o);t.isOutsideDateRange(i)||(t.date=i,t.setCurrent(t),t.rerenderTable(t))}},C=!1;r||$A.on("#"+t.containerId+" td.day",{focus:function(e){if($A.data(this,"_HasComment")){var n=t.range[t.range.current.month].comments[t.range.current.year],r=t.range[t.range.current.month].comments["*"],a="";n&&n[t.range.current.mDay]?a=n[t.range.current.mDay]:r&&r[t.range.current.mDay]&&(a=r[t.range.current.mDay]),(a=$A.trim(a.replace(/<|>/g,"")))&&(y.content=a,y.rerender((function(){A.openEditor&&(A.openEditor=!1,A.loaded&&A.reset())})))}else y.loaded&&y.remove()},click:function(e){if($A.hasClass(this,"dayInPrevMonth")){var n=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:-1});t.date=new Date(n.year,n.month,t.range.track[this.id])}else if($A.hasClass(this,"dayInNextMonth")){var r=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:1});t.date=new Date(r.year,r.month,t.range.track[this.id])}else t.date.setDate(t.range.track[this.id]);t.setCurrent(t),$A.data(this,"_Selected")||!p&&!$A.data(this,"_HasComment")?$A.data(this,"disabled")?(e.stopPropagation(),e.preventDefault()):($A.extend(!0,t.fn.current,t.range.current),l=!1,c=!0,t.storeCurrentDate(t),g.apply(this,[e,t,f])):t.setFocus(this),e.preventDefault()},keydown:function(n){m(n);var r=$A.keyEvent(n);if(13===r)C=!0,$A.data(this,"disabled")||($A.extend(!0,t.fn.current,t.range.current),l=!1,c=!0,t.storeCurrentDate(t),g.apply(this,[n,t,f])),n.preventDefault();else if(32===r&&p&&e.editor&&e.editor.show&&!A.openEditor)A.openEditor=!0,A.reset(),n.preventDefault();else if(r>=37&&r<=40||27===r||r>=33&&r<=36){var a=t.range.current.wDay;if(37===r){if($A.extend(!0,t.prevCurrent,t.range.current),t.range.current.mDay>1)t.range.current.mDay--,t.range.current.wDay=a?a-1:6,t.setFocus(t.range.index[t.range.current.mDay-1],this);else if(1===t.range.current.mDay&&!$A.data(t.buttons.pM,"disabled")){var o=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:-1}),i=t.range[o.month].max;1===o.month&&(i=1===new Date(o.year,1,29).getMonth()?29:28),t.date=new Date(o.year,o.month,i),t.setCurrent(t),t.rerenderTable(t)}}else if(39===r)$A.extend(!0,t.prevCurrent,t.range.current),t.range.current.mDay<t.range[t.range.current.month].max?(t.range.current.mDay++,t.range.current.wDay=6===a?0:a+1,t.setFocus(t.range.index[t.range.current.mDay-1],this)):t.range.current.mDay!=t.range[t.range.current.month].max||$A.data(t.buttons.nM,"disabled")||(o=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:1}),t.date=new Date(o.year,o.month,1),t.setCurrent(t),t.rerenderTable(t));else if(38===r){if($A.extend(!0,t.prevCurrent,t.range.current),t.range.current.mDay-7>0)t.range.current.mDay-=7,t.setFocus(t.range.index[t.range.current.mDay-1],this);else if(!$A.data(t.buttons.pM,"disabled")){1===(o=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:-1})).month&&1===new Date(o.year,1,29).getMonth()?t.range[o.month].max=29:1===o.month&&(t.range[o.month].max=28),i=t.range[o.month].max+(t.range.current.mDay-7);var s=new Date(o.year,o.month,i);t.isOutsideDateRange(s)||(t.date=s,t.setCurrent(t),t.rerenderTable(t))}}else if(40===r)$A.extend(!0,t.prevCurrent,t.range.current),t.range.current.mDay+7<=t.range[t.range.current.month].max?(t.range.current.mDay+=7,t.setFocus(t.range.index[t.range.current.mDay-1],this)):$A.data(t.buttons.nM,"disabled")||(o=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:1}),i=t.range.current.mDay+7-t.range[t.range.current.month].max,s=new Date(o.year,o.month,i),t.isOutsideDateRange(s)||(t.date=s,t.setCurrent(t),t.rerenderTable(t)));else if(27===r)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f);else if(33===r)$A.extend(!0,t.prevCurrent,t.range.current),t.pageUpDownNatural?h.alt?x(!1):w():h.alt?x(!0):d();else if(34===r)$A.extend(!0,t.prevCurrent,t.range.current),t.pageUpDownNatural?h.alt?x(!0):d():h.alt?x(!1):w();else if(36===r){if($A.extend(!0,t.prevCurrent,t.range.current),a!==t.iterS&&t.range.current.mDay>1){for(;t.range.current.wDay!==t.iterS&&$A.get(t.baseId+(t.range.current.mDay-1));)t.range.current.wDay=t.range.current.wDay-1<0?6:t.range.current.wDay-1,t.range.current.mDay--;t.setFocus(t.range.index[t.range.current.mDay-1],this)}}else if(35===r&&($A.extend(!0,t.prevCurrent,t.range.current),a!==t.iterE&&t.range.current.mDay<t.range[t.range.current.month].max)){for(;t.range.current.wDay!==t.iterE&&$A.get(t.baseId+(t.range.current.mDay+1));)t.range.current.wDay=t.range.current.wDay+1>6?0:t.range.current.wDay+1,t.range.current.mDay++;t.setFocus(t.range.index[t.range.current.mDay-1],this)}n.preventDefault()}else if(9!==r||h.alt||h.ctrl||h.shift)9!==r||h.alt||h.ctrl||!h.shift||($A.extend(!0,t.prevCurrent,t.range.current),t.navUpdate(),u=t.nav[t.nav.length-1],$A.isNode(u)?u.focus():p&&A.loaded&&A.commentBtn.focus(),n.preventDefault());else{if($A.extend(!0,t.prevCurrent,t.range.current),p&&A.loaded)$A.isHidden(A.textarea)?A.commentBtn.focus():A.textarea.focus();else{t.navUpdate();var u=t.nav[0];$A.isNode(u)&&u.focus()}n.preventDefault()}},keyup:function(e){m(e),13!==$A.keyEvent(e)||C||t.isAdd||($A.data(this,"disabled")||($A.extend(!0,t.fn.current,t.range.current),t.setFocus.firstOpen||(l=!1,c=!0,t.storeCurrentDate(t),g.apply(this,[e,t,f]))),e.preventDefault()),C=t.setFocus.firstOpen=t.isAdd=!1}},"."+v),t.showEscBtn&&$A.on(t.buttons.esc,{click:function(n){t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f),n.preventDefault()},keydown:function(n){m(n);var r=$A.keyEvent(n);if(27===r||13===r||32===r)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f);else if(9!==r||h.alt||h.ctrl||h.shift)9!==r||h.alt||h.ctrl||!h.shift||(a=t.navTo(this,0),$A.isNode(a)?a.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else{var a=t.navTo(this,1);$A.isNode(a)?a.focus():b.current.focus(),n.preventDefault()}},keyup:function(e){m(e)}},"."+v),o&&!e.condenseYear&&(n=$A.get("#"+t.currentBtnId+"Y"),s=n.querySelectorAll("option"),t.buttons.cYS=n,t.buttons.cY=$A.get("#"+t.currentBtnId+"YB"),$A.on(n,{keydown:function(n){m(n);var a=$A.keyEvent(n);if(13===a)r&&(l=!1,c=!0,t.storeCurrentDate(t),g.apply(this,[n,t,f]));else if(27===a)i?(t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f)):(t.buttons.cYS.hidden=!0,t.buttons.cY.hidden=!1,t.buttons.cY.focus()),n.stopPropagation(),n.preventDefault();else if(9!==a||h.alt||h.ctrl||h.shift)9===a&&!h.alt&&!h.ctrl&&h.shift&&i&&(o=t.navTo(this,0),$A.isNode(o)?o.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else if(i){var o=t.navTo(this,1);$A.isNode(o)?o.focus():b.current.focus(),n.preventDefault()}},keyup:function(e){m(e)},change:function(e){var n;t.navBtn="CY",n=function(){for(var e=0;e<s.length;e++)if(s[e].selected)return parseInt($A.getAttr(s[e],"value"));return t.range.current.year}(),i||(t.buttons.cYS.hidden=!0,t.buttons.cY.hidden=!1),n!==t.range.current.year?(t.initialDate=new Date(n,t.range.current.month,t.range.current.mDay),t.setDate(t),t.rerenderTable(t)):t.buttons[i?"cYS":"cY"].focus()}},"."+v),$A.on(t.buttons.cY,{click:function(e){i||(t.buttons.cY.hidden=!0,t.buttons.cYS.hidden=!1,t.buttons.cYS.focus()),e.preventDefault()},keydown:function(n){m(n);var r=$A.keyEvent(n);if(13===r||32===r)i||(t.buttons.cY.hidden=!0,t.buttons.cYS.hidden=!1,t.buttons.cYS.focus()),n.preventDefault();else if(27===r)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f);else if(9!==r||h.alt||h.ctrl||h.shift)9!==r||h.alt||h.ctrl||!h.shift||(a=t.navTo(this,0),$A.isNode(a)?a.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else{var a=t.navTo(this,1);$A.isNode(a)?a.focus():b.current.focus(),n.preventDefault()}},keyup:function(e){m(e)}},"."+v)),a&&(function(){var n=$A.get("#"+t.currentBtnId+"M"),a=n.querySelectorAll("option");t.buttons.cMS=n,t.buttons.cM=$A.get("#"+t.currentBtnId+"MB"),$A.on(n,{click:function(e){r&&(l=!1,c=!0,t.storeCurrentDate(t),g.apply(this,[e,t,f]))},keydown:function(n){m(n);var a=$A.keyEvent(n);if(13===a)r&&(l=!1,c=!0,t.storeCurrentDate(t),g.apply(this,[n,t,f]));else if(27===a)i?(t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f)):(t.buttons.cMS.hidden=!0,t.buttons.cM.hidden=!1,t.buttons.cM.focus()),n.stopPropagation(),n.preventDefault();else if(9!==a||h.alt||h.ctrl||h.shift)9===a&&!h.alt&&!h.ctrl&&h.shift&&i&&(o=t.navTo(this,0),$A.isNode(o)?o.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else if(i){var o=t.navTo(this,1);$A.isNode(o)?o.focus():b.current.focus(),n.preventDefault()}},keyup:function(e){m(e)},change:function(e){var n;t.navBtn="cM",n=function(){for(var e=0;e<a.length;e++)if(a[e].selected)return parseInt($A.getAttr(a[e],"value"));return t.range.current.month}(),i||(t.buttons.cMS.hidden=!0,t.buttons.cM.hidden=!1),n!==t.range.current.month?(t.initialDate=new Date(t.range.current.year,n,t.range.current.mDay),t.setDate(t),t.rerenderTable(t)):t.buttons[i?"cMS":"cM"].focus(),r&&(l=!1,c=!0,t.storeCurrentDate(t),g.apply(this,[e,t,f]))}},"."+v)}(),$A.on(t.buttons.cM,{click:function(e){i||(t.buttons.cM.hidden=!0,t.buttons.cMS.hidden=!1,t.buttons.cMS.focus()),e.preventDefault()},keydown:function(n){m(n);var r=$A.keyEvent(n);if(13===r||32===r)i||(t.buttons.cM.hidden=!0,t.buttons.cMS.hidden=!1,t.buttons.cMS.focus()),n.preventDefault();else if(27===r)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f);else if(9!==r||h.alt||h.ctrl||h.shift)9!==r||h.alt||h.ctrl||!h.shift||(a=t.navTo(this,0),$A.isNode(a)?a.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else{var a=t.navTo(this,1);$A.isNode(a)?a.focus():b.current.focus(),n.preventDefault()}},keyup:function(e){m(e)}},"."+v)),$A.on(t.buttons.pM,{click:function(e){t.navBtn="PM",w(),e.preventDefault()},keydown:function(n){m(n);var r=$A.keyEvent(n);if(13===r||32===r)t.navBtn="PM",w(),n.preventDefault();else if(27===r)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f),n.preventDefault();else if(e.condenseYear||38!==r)if(39===r)t.buttons.nM.focus(),n.preventDefault();else if(37===r||40===r)n.preventDefault();else if(9!==r||h.alt||h.ctrl||h.shift)9!==r||h.alt||h.ctrl||!h.shift||(a=t.navTo(this,0),$A.isNode(a)?a.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else{var a=t.navTo(this,1);$A.isNode(a)?a.focus():b.current.focus(),n.preventDefault()}else t.buttons.pY.focus(),n.preventDefault()},keyup:function(e){m(e)}},"."+v),$A.on(t.buttons.nM,{click:function(e){t.navBtn="NM",d(),e.preventDefault()},keydown:function(n){m(n);var a=$A.keyEvent(n);if(13===a||32===a)t.navBtn="NM",d(),n.preventDefault();else if(27===a)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f),n.preventDefault();else if(e.condenseYear||38!==a)if(37===a)t.buttons.pM.focus(),n.preventDefault();else if(39===a||40===a)n.preventDefault();else if(9!==a||h.alt||h.ctrl||h.shift)9!==a||h.alt||h.ctrl||!h.shift||(t.navUpdate(),o=t.navTo(this,0),$A.isNode(o)?o.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else{if(r){t.navUpdate();var o=t.nav[0];$A.isNode(o)&&o.focus()}else b.current.focus();n.preventDefault()}else t.buttons.nY.focus(),n.preventDefault()},keyup:function(e){m(e)}},"."+v),e.condenseYear||$A.on(t.buttons.pY,{click:function(e){t.navBtn="PY",x(),e.preventDefault()},keydown:function(n){m(n);var a=$A.keyEvent(n);if(13===a||32===a)t.navBtn="PY",x(),n.preventDefault();else if(27===a)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f),n.preventDefault();else if(39===a)t.buttons.nY.focus(),n.preventDefault();else if(40===a)t.buttons.pM.focus(),n.preventDefault();else if(37===a||38===a)n.preventDefault();else if(9!==a||h.alt||h.ctrl||h.shift)9!==a||h.alt||h.ctrl||!h.shift||(o=t.navTo(this,0),$A.isNode(o)?o.focus():p&&A.loaded?A.commentBtn.focus():r?t.buttons.nM.focus():b.current.focus(),n.preventDefault());else{var o=t.navTo(this,1);$A.isNode(o)?o.focus():b.current.focus(),n.preventDefault()}},keyup:function(e){m(e)}},"."+v),e.condenseYear||$A.on(t.buttons.nY,{click:function(e){t.navBtn="NY",x(!0),e.preventDefault()},keydown:function(n){m(n);var r=$A.keyEvent(n);if(13===r||32===r)t.navBtn="NY",x(!0),n.preventDefault();else if(27===r)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f),n.preventDefault();else if(37===r)t.buttons.pY.focus(),n.preventDefault();else if(40===r)t.buttons.nM.focus(),n.preventDefault();else if(38===r||39===r)n.preventDefault();else if(9!==r||h.alt||h.ctrl||h.shift)9!==r||h.alt||h.ctrl||!h.shift||(a=t.navTo(this,0),$A.isNode(a)?a.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else{var a=t.navTo(this,1);$A.isNode(a)?a.focus():b.current.focus(),n.preventDefault()}},keyup:function(e){m(e)}},"."+v),u=["esc","pY","cY","cYS","nY","pM","cM","cMS","nM"],t.navUpdate=function(){t.nav=[];for(var e=0;e<u.length;e++){var n=t.buttons[u[e]];n&&!$A.isDisabled(n)&&!$A.isHidden(n)&&$A.isFocusable(n)&&t.nav.push(n)}},t.navUpdate(),t.navTo=function(e,n){return t.navUpdate(),r?e!==t.nav[0]||n?e===t.nav[t.nav.length-1]&&n?t.nav[0]:t.nav[$A.inArray(e,t.nav)+(n?1:-1)]:t.nav[t.nav.length-1]:!t.nav.length||e===t.nav[0]&&!n||e===t.nav[t.nav.length-1]&&n?null:t.nav[$A.inArray(e,t.nav)+(n?1:-1)]||null},t.range.index=t.container.querySelectorAll("td.dayInMonth"),t.setFocus.firstOpen=!0,t.setFocus(t.range.index[t.range.current.mDay-1]),t.rerendering||(p&&e.editor&&e.editor.show&&A.render(),t.openOnFocus&&$A.setAttr(f,"aria-expanded","true"),$A.setAttr(t.triggerNode,"aria-expanded","true"),setTimeout((function(){t.datepickerLoaded=!0}),750)),D=!1},helpTextShort:t,helpText:n,afterRemove:function(t){t.rerendering||(e.resetCurrent&&(t.date=new Date,t.setCurrent(t),$A.extend(!0,t.fn.current,t.range.current)),p&&y.remove(),p&&e.editor&&e.editor.show&&(A.lock=!1,A.remove()),$A.setAttr(t.triggerNode,"aria-expanded","false")),$A.isFn(e.configure)&&(t.lock=t.configureLoading=!1)}}],e)[0],y=$A(b,[{id:u+"commentTooltip",role:e.comments&&e.comments.role||"Comment",widgetType:"Datepicker",returnFocus:!1,className:e.comments&&e.comments.className||"commentTooltip",beforeRender:function(e){e.targetNode=e.parent.wrapper}}],e.comments&&e.comments.config||{})[0],A=$A(b,[{id:u+"commentAdd",role:e.editor&&e.editor.role||"Edit",widgetType:"Datepicker",className:e.editor&&e.editor.className||"commentAdd",openEditor:!1,content:'<textarea style="visibility: hidden; display: none;" class="commentTa" title="'+y.role+'"></textarea><button title="'+(e.editor&&e.editor.role||"Edit")+" "+y.role+'" class="commentBtn">'+(e.editor&&e.editor.role||"Edit")+"</button>",beforeRender:function(e){e.targetNode=e.parent.wrapper},click:function(e,t){e.stopPropagation()},duringRender:function(e){$A.setAttr(e.wrapper,{role:"dialog","aria-modal":"false","aria-label":e.role}),$A.setAttr(e.container,"role","application")},add:function(e){var t=$A.trim(e.textarea.value.replace(/<|>|\n/g," "));e.comments[e.parent.range.current.year]||(e.comments[e.parent.range.current.year]={}),e.comments[e.parent.range.current.year][e.parent.range.current.mDay]=t;var n=e.parent.range.current.mDay+", "+e.parent.range.wDays[e.parent.range.current.wDay].lng+" "+e.parent.range[e.parent.range.current.month].name+" "+e.parent.range.current.year,r="";(e.parent.range[e.parent.range.current.month].disabled[e.parent.range.current.year]&&-1!==$A.inArray(e.parent.range.current.mDay,e.parent.range[e.parent.range.current.month].disabled[e.parent.range.current.year])||e.parent.range[e.parent.range.current.month].disabled["*"]&&-1!==$A.inArray(e.parent.range.current.mDay,e.parent.range[e.parent.range.current.month].disabled["*"]))&&(r+=e.parent.disabledTxt.replace(/<|>|\"/g,"")+" "),t?($A.addClass(e.parent.current,"comment"),$A.data(e.parent.current,"_HasComment",!0),r+=e.parent.commentedTxt.replace(/<|>|\"/g,"")+" "):($A.remClass(e.parent.current,"comment"),$A.data(e.parent.current,"_HasComment",!1)),n=r+n,$A.setAttr(e.parent.current,{title:$A.trim(r),"aria-label":n+" "+t.replace(/\"/g,'"')})},reset:function(){var t=this;if(t.loaded)if(t.openEditor){t.textarea?($A.css(t.textarea,{visibility:"",display:""}),t.css("left",t.parent.wrapper.offsetLeft)):t.textarea=t.query("textarea",(function(){$A.css(this,{visibility:"",display:""}),t.css("left",t.parent.wrapper.offsetLeft),$A.on(this,{focus:function(e){y.loaded&&y.remove()},keydown:function(e){var n=$A.keyEvent(e);this.value.length>800&&(this.value=this.value.substring(0,799)),13===n?(t.parent.isAdd=!0,t.add.apply(this,[t]),t.parent.current.focus(),t.openEditor=!1,t.reset(),e.preventDefault()):27===n&&(t.parent.current.focus(),t.openEditor=!1,t.reset(),e.preventDefault())}},"."+v)}))[0],$A.setAttr(t.textarea,{title:t.parent.range.current.mDay+", "+t.parent.range.wDays[t.parent.range.current.wDay].lng+" "+t.parent.range[t.parent.range.current.month].name+" "+t.parent.range.current.year}).focus(),t.comments=t.parent.range[t.parent.range.current.month].comments;var n=t.comments[t.parent.range.current.year]&&t.comments[t.parent.range.current.year][t.parent.range.current.mDay]||t.comments["*"]&&t.comments["*"][t.parent.range.current.mDay]||"";n&&(t.textarea.value=n),$A.setAttr(t.commentBtn,{title:(e.editor&&e.editor.action1||"Save")+" "+y.role}).innerHTML=e.editor&&e.editor.action1||"Save"}else t.textarea&&(t.textarea.value="",$A.css(t.textarea,{visibility:"hidden",display:"none"})),t.css("left",t.parent.wrapper.offsetLeft+t.parent.wrapper.offsetWidth-t.wrapper.offsetWidth),$A.setAttr(t.commentBtn,{title:(e.editor&&e.editor.role||"Edit")+" "+y.role}).innerHTML=e.editor&&e.editor.role||"Edit"},afterRender:function(e){e.textarea=e.container.querySelector("textarea"),e.commentBtn=e.container.querySelector("button"),$A.on(e.commentBtn,{focus:function(e){y.loaded&&y.remove()},click:function(t){e.openEditor?(e.parent.isAdd=!0,e.add.apply(e.commentBtn,[e]),e.parent.current.focus(),e.openEditor=!1,e.reset()):(e.openEditor=!0,e.reset()),t.preventDefault()},keydown:function(t){var n=$A.keyEvent(t);if(27===n)e.openEditor&&(e.parent.current.focus(),e.openEditor=!1,e.reset()),t.preventDefault();else if(9!==n||t.altKey||t.shiftKey||t.ctrlKey)9!==n||h.alt||h.ctrl||!h.shift||($A.isHidden(A.textarea)?b.current.focus():A.textarea.focus(),t.preventDefault());else{var r=e.parent.nav[0];$A.isNode(r)?r.focus():b.current.focus(),t.preventDefault()}}},"."+v),e.reset(),e.lock=!0,$A.on(e.textarea,"keydown",(function(t){var n=$A.keyEvent(t);27===n?(e.openEditor&&(e.parent.current.focus(),e.openEditor=!1,e.reset()),t.preventDefault()):9!==n||t.altKey||t.ctrlKey||!t.shiftKey?13===n&&(e.commentBtn.click(),t.preventDefault()):(b.current.focus(),t.preventDefault())}),"."+v)},beforeRemove:function(e){e.openEditor=!1,e.textarea=null,e.parent.setFocus.firstOpen=!0},lock:!(p&&e.editor&&e.editor.show)}],e.editor&&e.editor.config||{})[0];$A.on(window,"resize",(function(e){b.setPosition(),y.setPosition(),A.setPosition(),A.reset()}),"."+v),$A.setAttr(d,"aria-expanded","false");var w=b,x=!1,C=function(){x=!1},$=function(){x||w.loaded||w.disabled?!x&&w.loaded&&(x=!0,w.remove(),l=!1,c=!1,setTimeout(C,1e3)):(x=!0,l=!1,c=!0,D=!0,$A.trigger(this,"opendatepicker"),setTimeout(C,1e3))},D=!1;$A.on(d,{click:function(e){$.call(this),e.preventDefault()},keydown:function(e){32===$A.keyEvent(e)&&($.call(this),e.preventDefault(),e.stopPropagation())}},"."+v);var T=!1;return!0===e.openOnFocus?($A.setAttr(f,"aria-expanded","false"),$A.on(f,{touchstart:function(e){T=!0,x||w.loaded||l||c||w.disabled||(x=!0,$A.trigger(d,"opendatepicker"),e.preventDefault(),setTimeout(C,1e3))},focus:function(t){!T||x||w.loaded||l||!c?x||w.loaded||l||c||w.disabled||(x=!0,$A.trigger(d,"opendatepicker"),T||setTimeout((function(){$A.announce(w.openOnFocusHelpText)}),1),setTimeout(C,1e3)):(t.preventDefault(),this.blur(),d&&$A.focus(e.returnFocusTo||d)),l=!0,c=!1},mousedown:function(e){this.blur(),l=c=!1,this.focus()},blur:function(e){w.loaded&&l&&!c&&!w.mouseWithin&&w.remove(),l=!1},keydown:function(e){var t=$A.keyEvent(e);40===t&&l&&!c&&w.loaded?(l=!1,c=!0,r?w.buttons.cMS.hidden?w.buttons.cM.hidden||w.buttons.cM.focus():w.buttons.cMS.focus():w.setFocus(w.range.index[w.range.current.mDay-1]),e.preventDefault(),e.stopPropagation()):40!==t||w.loaded||x||w.disabled?27===t&&l&&!c&&w.loaded?(l=!1,c=!1,w.remove(),e.preventDefault(),e.stopPropagation()):9===t&&l&&!c&&w.loaded&&e.shiftKey?(l=!1,c=!1,w.remove()):9===t&&l&&!c&&w.loaded&&!e.shiftKey&&(l=!1,c=!0,r?w.buttons.cMS.hidden?w.buttons.cM.hidden||w.buttons.cM.focus():w.buttons.cMS.focus():w.setFocus(w.range.index[w.range.current.mDay-1]),setTimeout((function(){$A.announce(w.helpTextShort)}),1),e.preventDefault(),e.stopPropagation()):(x=!0,l=!0,c=!1,$A.trigger(d,"opendatepicker"),setTimeout(C,1e3),l=!1,c=!0,r?w.buttons.cMS.hidden?w.buttons.cM.hidden||w.buttons.cM.focus():w.buttons.cMS.focus():w.setFocus(w.range.index[w.range.current.mDay-1]),e.preventDefault(),e.stopPropagation())}},"."+v)):$A.on(f,{touchstart:function(e){T=!0},focus:function(t){!T||x||w.loaded||l||!c||(t.preventDefault(),this.blur(),d&&$A.focus(e.returnFocusTo||d)),l=!0,c=!1}}),w.setDisabled(w,w.disabled),$A(d).describedBy(f).controls(f),$A.on("body","click",(function(e){b.datepickerLoaded&&b.remove()}),"."+v),b}})),"setDialog"in $A||($A.addWidgetProfile("Dialog",{track:[],configure:function(e){var t=this,n={};if(e.isModal&&t.track.length){var r=t.track[t.track.length-1].css("z-index")||1e3;n["z-index"]=r+2}return{style:n,isModal:!0,isAlert:!1,exposeBounds:!0,forceFocus:!0,forceFocusWithin:!0,returnFocus:!0,exposeHiddenClose:!0,circularTabbing:!0,preload:!0,preloadImages:!0,preloadCSS:!0,className:"modal",root:"body",append:!0,escToClose:!0,on:"click",click:function(e,t){e.stopPropagation()}}},role:function(e){var t={};return t.role=e.isAlert?"alertdialog":"dialog",t["aria-modal"]=e.isModal?"true":"false",t},beforeRender:function(e,t){e.isModal&&(e.backdrop=$A(this.backdrop).on({click:function(t){e.remove(),t.stopPropagation()}}).css($A.isNum(e.style["z-index"])&&e.style["z-index"]>1?{zIndex:e.style["z-index"]-1}:{}).appendTo("body").return())},afterRender:function(e,t){this.track.push(e),$A.hideBackground(e.wrapper),e.announce=!0===e.isAlert},afterRemove:function(e,t){var n=this;n.track.splice(n.track.length-1,1),n.track.length?(e.isModal&&$A.hideBackground(n.track[n.track.length-1].wrapper),e.rerouteFocus=n.track[n.track.length-1]):e.isModal&&$A.showBackground(),e.isModal&&$A.isNode(e.backdrop,null,null,11)&&$A.remove(e.backdrop)},backdrop:'<div class="modalBackdrop"></div>'}),$A.extend({setDialog:function(e,t){this._4X&&(t=e,e=this._X),$A.isPlainObject(e)&&(e=(t=e).trigger||t.content||null);var n=[],r=function(e){n.push($A.toDC(e,$A.extend({widgetType:"Dialog"},t||{})))};return e?$A.query(e,t.context||document,(function(e,t){r(t)})):r(),1===n.length?n[0]:n}})),"setDrag"in $A||$A.extend({setDrag:function(e){var t=(e=$A.extend(!0,{render:"append",sort:!1,dragula:{revertOnSpill:!0,invalid:function(e,t){return!1},accepts:function(e,t,r,a){return!!n||r!==t}},menu:{manualDrop:function(e,t,n,r,a,o){return!1},tag:{render:"append",button:'<a aria-label="Actions" class="aria-action-menu-button">&darr;</a>',menu:'<ul hidden class="drag top menu"></ul>',move:'<li><a data-action="move" class="menu-action move">Move to %DROPNAME%</a></li>',copy:'<li><a data-action="copy" class="menu-action copy">Copy to %DROPNAME%</a></li>',up:'<li><a data-action="up" class="menu-action up">Move Up</a></li>',left:'<li><a data-action="up" class="menu-action left">Move Left</a></li>',down:'<li><a data-action="down" class="menu-action down">Move Down</a></li>',right:'<li><a data-action="down" class="menu-action right">Move Right</a></li>',custom:[],customActivate:null,invalid:function(e,t,n,r){return!1}}}},e)).dragula.copy||!1,n=e.sort||e.dragula.copySortSource||!1,r=function(o,i,s){if($A.isArray(o))$A.loop(o,(function(e,t){r(t,i,s)}),"array");else{var l=$A.data(o,"actions");if(l&&($A.remove(l.button),$A.remove(l.menu),$A.destroy(l.DC)),$A.isArray(s)&&s.length){if(l={button:$A.morph(e.menu.tag.button),menu:$A.morph(e.menu.tag.menu),children:[],dragElement:o,sourceContainer:i},n){var c=$A.getOrientation(i.children),u="horizontal"===c.orientation&&!c.lineWrap;if($A.previous(o)){var d=$A.morph(e.menu.tag[u?"left":"up"]);l.children.push(d),l.menu.appendChild(d)}if($A.next(o)){var f=$A.morph(e.menu.tag[u?"right":"down"]);l.children.push(f),l.menu.appendChild(f)}}$A.loop(s,(function(n,r){var a=($A.getAttr(r,"data-dropname")||"").replace(/<|>/g,"");if(!a)throw"The drop-zone container element is missing a unique and informative data-dropname attribute.";var s=$A.morph(e.menu.tag[t?"copy":"move"].replace("%DROPNAME%",a));e.dragula.accepts(o,r,i)&&r!==i&&($A.data(s,"DropContainer",r),l.children.push(s),l.menu.appendChild(s))}),"array"),$A.loop(e.menu.tag.custom,(function(t,n){var r=$A.morph(n);e.menu.tag.invalid(o,$A.getAttr(r.firstChild,"data-action"),i)||(l.children.push(r),l.menu.appendChild(r))}),"array"),$A[e.menu.tag.render](l.button,o),$A.after(l.menu,l.button),$A(l.button).describedBy(o),$A.setKBA11Y(l.button,"button"),$A(l.button).on("click mousedown mouseup mousemove touchstart touchend touchmove",(function(e){e.stopPropagation()})),l.DC=$A.setMenu(l.button,$A.extend(!0,{toggleHide:!0,onActivate:function(r,o,s,c,u,d,f){var p=$A.data(o.parentNode,"DropContainer");s.DC.top.remove((function(){var s=$A.previous(l.dragElement),c=$A.next(l.dragElement),u=c||i,d=$A.getAttr(o,"data-action");a.emit("beforeClone",l.dragElement),!n||"up"!==d&&"down"!==d?p?a.emit("drop",l.dragElement,p,i,c,(function(){e.menu.manualDrop(l.dragElement,p,i,d,l,u)||$A[e.render](t?l.dragElement.cloneNode(!0):l.dragElement,p),a.emit("dragend",l.dragElement),$A.data(c,"actions")&&(u=$A.data(c,"actions").button),$A.focus(u)})):$A.isFn(e.menu.tag.customActivate)&&(e.menu.manualDrop(l.dragElement,p,i,d,l,c)||e.menu.tag.customActivate(r,l.dragElement,i,d,l,u),a.emit("dragend",l.dragElement),$A.data(c,"actions")&&(u=$A.data(c,"actions").button),$A.focus(u)):a.emit("drop",l.dragElement,p,i,c,(function(){e.menu.manualDrop(l.dragElement,p,i,d,l,u)||("up"===d?($A.before(l.dragElement,s),a.emit("dragend",l.dragElement),$A.data(l.dragElement,"actions")&&(u=$A.data(l.dragElement,"actions").button),$A.focus(u)):"down"===d&&($A.after(l.dragElement,c),a.emit("dragend",l.dragElement),$A.data(l.dragElement,"actions")&&(u=$A.data(l.dragElement,"actions").button),$A.focus(u)))}))}))},animate:{onRender:function(e,t,n){Velocity(t,"transition.slideUpIn",{complete:function(){n()}})},onRemove:function(e,t,n){Velocity(t,"transition.slideUpOut",{complete:function(){n()}})}},click:function(e,t){e.stopPropagation()},mouseDown:function(e,t){e.stopPropagation()},mouseUp:function(e,t){e.stopPropagation()},mouseMove:function(e,t){e.stopPropagation()},touchStart:function(e,t){e.stopPropagation()},touchEnd:function(e,t){e.stopPropagation()},touchMove:function(e,t){e.stopPropagation()}},e.menu)),$A.data(o,"actions",l)}}},a=dragula(e.dragula).on("beforeClone",(function(e){r(e)})).on("drop",(function(e,t,n,r,a){$A.isFn(a)&&a()})).on("dragend",(function(e){o()})),o=function(){$A.loop(a.containers,(function(e,t){r(t.children,t,a.containers)}),"array")};return o(),a},unsetDrag:function(e){$A.loop(e.containers,(function(e,t){$A.loop(t.children,(function(e,t){var n=$A.data(t,"actions");n&&($A.remove(n.button),$A.remove(n.menu),$A.destroy(n.DC))}),"array")}),"array"),e.destroy()}}),"setFootnotes"in $A||$A.extend({setFootnotes:function(e,t){return this._4X&&(t=e,e=this._X),$A.isPlainObject(e)&&(e=(t=e).footnotes||null),e?($A.query(e,t.context||document,(function(e,t){$A(t).flowsTo($A.getAttr(t,"href")),$A.svgFix(t)})),e=$A.setSkipLink(e,t),$A._XR.call(this,e)):null}}),
+*/function Y(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}!function(e){!function(){var t=window.AccNamePrototypeNameSpace||window;t&&"string"==typeof t&&t.length&&(window[t]={},t=window[t]),t.getAccNameVersion="2.60",t.getAccName=t.calcNames=function(e,t,r,a){var o=(a=a||{}).document||document,i={name:"",desc:"",error:""},s=!1,l=!1;try{if(!e||1!==e.nodeType)return i;var c=e,u=n(e.getAttribute("role")||""),d={name:[],desc:[]},f=[],p=function(e,t,a,i,u,A,M){(M=M||{}).tag=M.tag||!1,M.role=M.role||!1,M.go=M.go||!1;var I={name:"",title:""},E=!1,F=function(e,t){for(var n=[];e;){if(e.id&&A[e.id]&&A[e.id].node&&-1===n.indexOf(e)?(n.push(e),e=A[e.id].node):e=e.parentNode,e&&e===t)return!0;if(!e||e===A.top||e===o.body)return!1}return!1},L={before:"",after:""};M.tag||M.role||-1!==d[A.computingDesc?"desc":"name"].indexOf(e)||(L=j(e,null),r&&(-1===L.before.indexOf(" [ARIA] ")&&-1===L.before.indexOf(" aria-")&&-1===L.before.indexOf(" accName: ")||(L.before=""),-1===L.after.indexOf(" [ARIA] ")&&-1===L.after.indexOf(" aria-")&&-1===L.after.indexOf(" accDescription: ")||(L.after="")));var V=function(e,t,r){var a={name:"",title:""};if(!e)return a;var o=!(!e||1!==e.nodeType||!R(e)),i=e,l=t(e)||{};if(l.name&&l.name.length&&(a.name+=l.name),!l.skip&&!function(e,t){if(!t||!e||1!==t.nodeType||1!==e.nodeType)return!1;var n=h(e),r=e.nodeName.toLowerCase(),a=function(e,t){return n&&t.roles.indexOf(n)>=0||!n&&t.tags.indexOf(r)>=0};return a(0,y)?e!==t||e.id&&A[e.id]&&A[e.id].node?!(F(e,A.top)&&"select"!==e.nodeName.toLowerCase()||a(0,v)):!m(e):!(!a(0,b)&&(e!==c||a(0,v))||!(n||-1===["section"].indexOf(r)||e.getAttribute("aria-labelledby")||e.getAttribute("aria-label"))||M.go)}(e,A.top))for(M.go&&(M.go=!1),e=e.firstChild;e;)a.name+=V(e,t,r).name,e=e.nextSibling;return a.name+=l.owns||"",c===i&&r===i&&!n(a.name)&&n(l.title)?a.name=B(l.title):c===i&&r===i&&n(l.title)&&(a.title=B(l.title)),c===i&&r===i&&n(l.desc)&&(a.title=B(l.desc)),c===i&&r===i&&n(l.placeholder)&&!n(a.name)?(a.name=B(l.placeholder),s=!0):c===i&&r===i&&n(l.placeholder)&&!n(a.title)&&(a.title=B(l.placeholder)),(o||l.isWidget)&&(a.name=B(a.name)),a};return I=V(e,(function(s){var v=0,b=null,y=[],I=[],R={name:"",title:"",owns:"",skip:!1},F=!!(s&&1===s.nodeType&&i&&i.length&&-1!==i.indexOf(s)&&s===c&&s!==e),L=!1;if((a||!s||_(s,A.top))&&!u&&!F)return R;if(M.tag||M.role||-1!==d[A.computingDesc?"desc":"name"].indexOf(s))return R;d[A.computingDesc?"desc":"name"].push(s);var V="",H="",q={before:"",after:""},z=e===s?s:s.parentNode;if(M.tag||M.role||-1!==d[A.computingDesc?"desc":"name"].indexOf(z)||(d[A.computingDesc?"desc":"name"].push(z),q=j(z,e),r&&(-1===q.before.indexOf(" [ARIA] ")&&-1===q.before.indexOf(" aria-")&&-1===q.before.indexOf(" accName: ")||(q.before=""),-1===q.after.indexOf(" [ARIA] ")&&-1===q.after.indexOf(" aria-")&&-1===q.after.indexOf(" accDescription: ")||(q.after=""))),1===s.nodeType){var U=s.nodeName.toLowerCase(),G=h(s),Q=!M.tag&&!M.role&&s.getAttribute("aria-labelledby")||"",Z=!M.tag&&!M.role&&s.getAttribute("aria-describedby")||"",K=!M.tag&&!M.role&&s.getAttribute("aria-description"),J=!M.tag&&!M.role&&s.getAttribute("aria-label")||"",ee=!M.tag&&!M.role&&s.getAttribute("title")||"";if(s===c&&!G&&-1!==w.indexOf(U))return R;if(s===c&&(-1!==x.indexOf(G)||!G&&-1!==C.indexOf(U)))return R;var te=-1!==$.indexOf(U),ne=-1!==["input"].indexOf(U),re=-1!==D.indexOf(G),ae=-1!==T.indexOf(G),oe=-1!==N.indexOf(G),ie=re||ae||oe||"combobox"===G,se=(ie||-1!==S.indexOf(G))&&"link"!==G;R.isWidget=te||se;var le=!1,ce=!1,ue=s.getAttribute("aria-owns")||"",de=!(M.tag||M.role||F||!(s!==e&&(te||ie)||s.id&&A[s.id]&&A[s.id].target&&A[s.id].target===s));if(!t&&!M.tag&&!M.role&&Q){for(y=Q.split(/\s+/),I=[],v=0;v<y.length;v++)b=o.getElementById(y[v]),I.push(p(b,!0,a,[s],b===e,{ref:A,top:b}).name);V=n(I.join(" ")),n(V)&&(le=!0,L=!0,E=!0,R.skip=!0)}if(!t&&s===e&&!M.tag&&!M.role&&(Z||K)){if(Z){var fe;for(y=Z.split(/\s+/),I=[],v=0;v<y.length;v++)b=o.getElementById(y[v]),I.push(p(b,!0,!1,[s],!1,{ref:A,top:b,computingDesc:!0}).name);fe=n(I.join(" "))}else fe=n(K);n(fe)&&(R.desc=fe,ce=!0)}M.tag||M.role||le||!n(J)||de||n(V=J)&&(le=!0,L=!0,s===e&&(a=!0,E=!0));var pe=!M.tag&&!M.role&&!le&&"iframe"!==U&&G&&-1!==k.indexOf(G)&&!m(s)&&!O(s);if(!de){if(!M.tag&&!M.role&&!le&&s===e&&te){var ge=o.querySelectorAll("label"),he="",me=Y(s,"label")||!1;for(v=0;v<ge.length;v++)(ge[v]!==me||"string"==typeof me.getAttribute("for"))&&ge[v].getAttribute("for")!==s.id||P(ge[v],o.body,!0)||(he+=B(p(ge[v],!0,a,[s],!1,{ref:A,top:ge[v]}).name));n(V=he)&&(le=!0)}var ve=!M.tag&&!M.role&&ne&&(s.getAttribute("type")||"").toLowerCase()||!1,be=!M.tag&&!M.role&&ve&&n(s.getAttribute("value"))||!1,ye=pe&&"img"===U?"":n(s.alt||s.getAttribute("alt"));if(M.tag||M.role||le||pe||"img"!==G&&"img"!==U&&"image"!==ve||!ye&&!n(ee)||(V=n(ye)||n(ee),n(V)&&(le=!0)),M.tag||M.role||le||pe||"area"!==U||!ye||(V=n(ye),n(V)&&(le=!0)),"optgroup"===U&&(M.tag||M.role||le||pe||!s.getAttribute("label")||(V=n(s.getAttribute("label")),n(V)&&(le=!0)),R.skip=!0),!M.tag&&!M.role&&!le&&s===e&&ve&&-1!==["button","submit","reset"].indexOf(ve)){if(be)V=be;else switch(ve){case"submit":V="submit";break;case"reset":V="reset";break;default:V=""}n(V)&&(le=!0)}if(!M.tag&&!M.role&&le&&s===e&&ve&&-1!==["button","submit","reset"].indexOf(ve)&&be&&be!==V&&!R.desc&&(R.desc=be,ce=!0),M.tag||M.role||le||s!==e||!ve||"image"!==ve||(V="Submit Query",le=!0,l=!0),!(M.tag||M.role||le||s!==c||"group"!==G&&"radiogroup"!==G&&(G||"fieldset"!==U))){var Ae=g(s,["legend"],["legend"])||!1;Ae&&(V=n(p(Ae,t,!1,[],!1,{ref:A,top:Ae}).name)),n(V)&&(le=!0),a=!0}if(!(M.tag||M.role||le||s!==c||"table"!==G&&(G||"table"!==U))&&((Ae=g(s,["caption"],["caption"])||!1)&&(V=n(p(Ae,t,!1,[],!1,{ref:A,top:Ae}).name)),n(V)&&(le=!0),a=!0),!M.tag&&!M.role&&"svg"===U){var we=s.querySelector("title")||!1,xe=s===c&&s.querySelector("desc")||!1;if(!le&&we&&(V=n(p(we,!0,!1,[],!1,{ref:A,top:we}).name)),!ce&&xe){var Ce=n(p(xe,!0,!1,[],!1,{ref:A,top:xe}).name);n(Ce)&&(R.desc=Ce)}R.skip=!0}}M.tag||M.role||!de||i&&i.length&&-1!==i.indexOf(s)||(re?V=X(G,s,!0):ae||"combobox"===G&&te?V=X(G,s,!1,!0):oe?V=X(G,s,!1,!1,!0):!te||-1===["input","textarea"].indexOf(U)||se&&!ae?!te||"select"!==U||se&&"combobox"!==G||(V=X(G,s,!1,!1,!0,!0)):V=X(G,s,!1,!1,!1,!0),V=n(V)),M.tag||M.role||pe||!n(ee)||V&&" "===K||(R.title=n(ee));var $e=te&&n(s.getAttribute("type")||"").toLowerCase();$e||($e="text");var De=!M.tag&&!M.role&&s===c&&s===e&&(ae||te&&("textarea"===U||"input"===U&&-1!==["password","search","tel","text","url","email"].indexOf($e)))&&n(s.getAttribute("placeholder")||s.getAttribute("aria-placeholder"));De&&(R.placeholder=De);var Te=M.role&&M.role===G||!G&&M.tag&&M.tag===U;if(Te&&(V=n(p(s,t,!1,[],!1,{ref:A,top:s}).name),n(V)&&(a=!0)),!Te&&ue&&-1===["input","img","progress"].indexOf(U)){for(y=ue.split(/\s+/),I=[],v=0;v<y.length;v++)if((b=o.getElementById(y[v]))&&-1===f.indexOf(y[v])){f.push(y[v]);var Ne={ref:A,top:A.top};Ne[y[v]]={refNode:e,node:s,target:b},P(b,o.body,!0)||I.push(p(b,!0,a,[],!1,Ne).name)}H=I.join("")}}else M.tag||M.role||3!==s.nodeType||(V=s.data);return L||(V=q.before+V.replace(/\s+/g," ")+q.after),V.length&&!W(s,A.top,A)&&(R.name=V),R.owns=H,R}),e),E||(I.name=L.before+I.name.replace(/\s+/g," ")+L.after),I},g=function(e,t,n,r){for(e=e?e.firstChild:null;e;){var a=h(e)||!1;if(1===e.nodeType&&(!t&&!n||a&&n&&-1!==n.indexOf(a)||!a&&t&&-1!==t.indexOf(e.nodeName.toLowerCase())))return e;if(!r&&1===e.nodeType&&(t||n))return null;e=e.nextSibling}return e},h=function(e){var t=e&&e.getAttribute?(e.getAttribute("role")||"").toLowerCase():"";if(!n(t))return"";for(var r=function(e){return n(t).length>0&&e.roles.indexOf(t)>=0},a=t.split(/\s+/),o=0;o<a.length;o++)if(t=a[o],r(v)||r(b)||r(y)||r(A)||-1!==k.indexOf(t))return t;return""},m=function(e){var t=e.nodeName.toLowerCase();return!!e.getAttribute("tabindex")||(!("a"!==t||!e.getAttribute("href"))||-1!==["button","input","select","textarea"].indexOf(t)&&"hidden"!==(e.getAttribute("type")||"").toLowerCase())},v={roles:["button","checkbox","link","option","radio","switch","tab","treeitem","menuitem","menuitemcheckbox","menuitemradio","row","cell","gridcell","columnheader","rowheader","tooltip","heading"],tags:["a","button","summary","input","h1","h2","h3","h4","h5","h6","menuitem","option","tr","td","th"]},b={roles:["application","alert","log","marquee","timer","alertdialog","dialog","banner","complementary","form","main","navigation","region","search","article","document","feed","figure","img","math","toolbar","menu","menubar","grid","listbox","radiogroup","textbox","searchbox","spinbutton","scrollbar","slider","tablist","tabpanel","tree","treegrid","separator","rowgroup","group"],tags:["article","aside","body","select","datalist","optgroup","dialog","figure","footer","form","header","hr","iframe","img","textarea","input","main","math","menu","nav","section","thead","tbody","tfoot","fieldset"]},y={roles:["term","definition","directory","list","note","status","table","contentinfo"],tags:["dl","ul","ol","dd","details","output","table"]},A={roles:["legend","caption","code","deletion","emphasis","generic","insertion","paragraph","strong","subscript","superscript"],tags:["legend","caption","figcaption","code","del","em","div","span","ins","p","strong","sub","sup"]},w=["div","span"],x=["caption","code","deletion","emphasis","generic","insertion","none","paragraph","presentation","strong","subscript","superscript"],C=["caption","figcaption","code","del","em","div","span","ins","p","strong","sub","sup"],$=["button","input","select","textarea"],D=["scrollbar","slider","spinbutton"],T=["searchbox","textbox"],N=["grid","listbox","tablist","tree","treegrid"],S=["button","checkbox","link","switch","option","menu","menubar","menuitem","menuitemcheckbox","menuitemradio","radio","tab","treeitem","gridcell"],k=["presentation","none"],O=function(e){for(var t=["labelledby","label","describedby","busy","controls","current","details","disabled","dropeffect","errormessage","flowto","grabbed","haspopup","invalid","keyshortcuts","live","owns","roledescription"],r=0;r<t.length;r++){if(n(e.getAttribute("aria-"+t[r])))return!0}return!1},_=a.isHidden||function(e,t){return function(e){if(!e||1!==e.nodeType||e===t)return!1;if("true"===e.getAttribute("aria-hidden"))return!0;if(e.getAttribute("hidden"))return!0;var n=M(e);return"none"===n.display||"hidden"===n.visibility}(e)},P=function(e,t,n,r){for(;e&&e!==t;){if(!r&&1===e.nodeType&&_(e,t))return!0;r=!1,e=e.parentNode}return!1},M=a.getStyleObject||function(e){var t={};return o.defaultView&&o.defaultView.getComputedStyle?t=o.defaultView.getComputedStyle(e,""):e.currentStyle&&(t=e.currentStyle),t},I=function(e,t){var n=t;if(-1!==n.indexOf("attr("))for(var r=n.match(/attr\((.|\n|\r\n)*?\)/g),a=0;a<r.length;a++){var o=r[a].slice(5,-1);o=e.getAttribute(o)||"",n=n.replace(r[a],o)}return n=n.replace(/url\((.*?)\)\s+\/|url\((.*?)\)/g,"").replace(/^\s+|\s+$/g,"").replace(/\"/g,"")},R=function(e,t){var n=t||M(e);for(var r in E)for(var a=E[r],o=0;o<a.length;o++)if(n[r]&&(0===a[o].indexOf("!")&&-1===[a[o].slice(1),"inherit","initial","unset"].indexOf(n[r])||0===n[r].indexOf(a[o])))return!0;return!t&&e.nodeName&&-1!==F.indexOf(e.nodeName.toLowerCase())&&!(n.display&&0===n.display.indexOf("inline")&&"br"!==e.nodeName.toLowerCase())},E={display:["block","grid","table","flow-root","flex"],position:["absolute","fixed"],float:["left","right","inline"],clear:["left","right","both","inline"],overflow:["hidden","scroll","auto"],"column-count":["!auto"],"column-width":["!auto"],"column-span":["all"],contain:["layout","content","strict"]},F=["address","article","aside","blockquote","br","canvas","dd","div","dl","dt","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","legend","li","main","nav","noscript","ol","output","p","pre","section","table","td","tfoot","th","tr","ul","video"],X=function(e,t,r,a,o,i){var s="",l=!1;if(r&&!i)s=t.getAttribute("aria-valuetext")||t.getAttribute("aria-valuenow")||"";else if(a&&!i)s=H(t)||"";else if(o&&!i){var c=[];"grid"===e||"treegrid"===e?c=["gridcell","rowheader","columnheader"]:"listbox"===e?c=["option"]:"tablist"===e?c=["tab"]:"tree"===e&&(c=["treeitem"]),s=L(t,t.querySelectorAll('*[aria-selected="true"]'),!1,c),l=!0}return!(s=n(s))&&(r||a)&&t.value&&(s=t.value),l||s||!i||(s=o?L(t,t.querySelectorAll("option[selected]"),!0):t.value),s},B=function(e){return n(e).length?" "+e+" ":" "},L=function(e,t,n,r){if(!t||!t.length)return"";for(var a=[],o=0;o<t.length;o++){var i=h(t[o]);(!r||-1!==r.indexOf(i))&&a.push(n?H(t[o]):p(t[o],!0,!1,[],!1,{top:t[o]}).name)}return a.join(" ")},V=a.getPseudoElStyleObj||function(e,t){var n={};for(var r in E)n[r]=o.defaultView.getComputedStyle(e,t).getPropertyValue(r);return n.content=o.defaultView.getComputedStyle(e,t).getPropertyValue("content").replace(/^"|\\|"$/g,""),n},H=function(e,t){if(!t&&1===e.nodeType)return e.innerText||e.textContent||"";var n=V(e,t),r=n.content;return r&&"none"!==r?(R({},n)&&(":before"===t?r+=" ":":after"===t&&(r=" "+r)),r):""},j=a.getCSSText||function(e,t){return e&&1!==e.nodeType||e===t||-1!==["input","select","textarea","img","iframe","optgroup"].indexOf(e.nodeName.toLowerCase())?{before:"",after:""}:{before:I(e,H(e,":before")),after:I(e,H(e,":after"))}},Y=function(e,t,n,r){for(r=!!r;e;)if((e=e.parentNode)&&(n&&h(e)===n||t&&e.nodeName&&e.nodeName.toLowerCase()===t&&(!r||h(e).length<1)))return e;return{}},W=function(e,t,r,a){for(var o=[];e&&e!==t;)if(e.id&&r&&r[e.id]&&r[e.id].node&&-1===o.indexOf(e)?(o.push(e),e=r[e.id].node):e=e.parentNode,e&&e.getAttribute&&(n(e.getAttribute("aria-label"))||!a&&_(e,t)))return!0;return!1};if(P(e,o.body,!0,!(!e||!e.nodeName||"area"!==e.nodeName.toLowerCase())))return i;var q=p(e,!1,!1,[],!1,{top:e}),z=n(q.name.replace(/\s+/g," ")),U=n(q.title.replace(/\s+/g," "));i.hasUpperCase=!(!u||u===u.toLowerCase()),i.name=z,i.desc=U,d={name:[],desc:[]},f=[]}catch(e){i.error=e}return i.placeholder=s,i.userAgent=l,t&&"function"==typeof t?t.apply(e,[i,e]):i};var n=function(e){return"string"!=typeof e?"":e.replace(/^\s+|\s+$/g,"")};t.getAccNameMsg=t.getNames=function(e,n){var r=t.getAccName(e,null,!1,n);if(r.error)return r.error+"\n\nAn error has been thrown in AccName Prototype version "+t.getAccNameVersion+". Please copy this error message and the HTML markup that caused it, and submit both as a new GitHub issue at\nhttps://github.com/whatsock/w3c-alternative-text-computation";var a='accName: "'+r.name+'"\n\naccDesc: "'+r.desc+'"\n\n';return r.placeholder&&(a+="Name from placeholder: true\n\n"),r.userAgent&&(a+="Name from user agent: true\n\n"),a+="(Running AccName Computation Prototype version: "+t.getAccNameVersion+")"},e.exports&&(e.exports={getNames:t.getNames,calcNames:t.calcNames})}()}(j),$A.extend({hide:function(e,t,n,r){return this._4X&&(r=n,n=t,t=e,e=this._X),e=$A.morph(e),$A.isFn(n)&&(r=n,n=null),$A.isFn(t)&&(r=t,t=null,n=null),$A.isNode(e)&&Velocity(e,t||"transition.fadeOut",$A.extend({complete:function(){$A.isFn(r)&&r.call(e,e)}},n||{})),$A._XR.call(this,e)},show:function(e,t,n,r){return this._4X&&(r=n,n=t,t=e,e=this._X),e=$A.morph(e),$A.isFn(n)&&(r=n,n=null),$A.isFn(t)&&(r=t,t=null,n=null),$A.isNode(e)&&Velocity(e,t||"transition.fadeIn",$A.extend({complete:function(){$A.isFn(r)&&r.call(e,e)}},n||{})),$A._XR.call(this,e)}}),"RovingTabIndex"in $A||$A.extend({RovingTabIndex:function(e){var t=this;for(t.typed="",t.lastTyped="",t.nodes=e.nodes,t.container=e.container||!1,t.orientation=e.orientation&&e.orientation>=0&&e.orientation<=2?e.orientation:0,t.autoSwitch=e.autoSwitch||"off",t.index=e.startIndex&&e.startIndex>=0?e.startIndex:0,t.parent=!!(e.parent&&e.parent.nodes&&e.parent.nodes.length)&&e.parent,t.top=t;t.top.parent;)t.top=t.top.parent;if(t.children=new Map,t.trigger=!(!e.trigger||1!==e.trigger.nodeType)&&e.trigger,t.autoLoop=e.autoLoop||!1,$A.loop(e,(function(e,n){"on"===e.slice(0,2)&&$A.isFn(n)&&(t[e]=n)}),"object"),t.isTree=!0===e.isTree,t.parent&&t.trigger&&t.parent.children.set(t.trigger,t),t.dc=t.DC=e.dc||e.DC||null,e.breakPoint&&(e.breakPoint.horizontal>1||e.breakPoint.vertical>1)?t.breakPoint={horizontal:e.breakPoint.horizontal>1?e.breakPoint.horizontal:0,vertical:e.breakPoint.vertical>1?e.breakPoint.vertical:0,horizontalStop:!!e.breakPoint.horizontalStop,verticalStop:!!e.breakPoint.verticalStop}:t.breakPoint=!1,t.activate=function(e){var n=t;return $A.isNum(e)&&(e=t.nodes[e]||null,n=$A.data(e,"RTI")||t),e||(e=n.nodes[0]||null),$A.isNode(e)&&$A.isNum($A.data(e,"RTI-Index"))?(n=$A.data(e,"RTI"),$A.isHidden(e)||(n.index=$A.data(e,"RTI-Index"),$A.loop(n.nodes,(function(t,n){$A.setAttr(n,{tabindex:e===n?0:-1})}),"array")),n):n},t.setFocus=function(e,n,r){return(n=n||t).activate(this),r||this.focus(),n},t.focus=function(e){var n=t;return $A.isNum(e)&&(e=t.nodes[e]||null,n=$A.data(e,"RTI")||t),e||(e=n.nodes[0]||null),$A.isNode(e)&&$A.isNum($A.data(e,"RTI-Index"))?(n=$A.data(e,"RTI"),$A.isHidden(e)||(n.activate(e),e.focus()),n):n},t.off=function(){return $A.off(t.nodes,".RovingTabIndex"),t},t.on=function(){var e=[],n=0,r=0,a=0,o=new Map;t.off(),$A.loop(t.nodes,(function(i,s){$A.data(s,"RTI",t),$A.data(s,"RTI-Index",i),$A.data(s,"AccName",$A.trim($A.isFn(window.getAccName)&&window.getAccName(s).name||$A.getText(s)).toLowerCase()),t.breakPoint&&(e[r]||(e[r]=[]),e[r].push(s),o.set(s,{i:i,x:n,y:r}),a=r,t.breakPoint.horizontal===n?(n=0,r++):n++);var l={},c=function(e){l.alt=e.altKey,l.ctrl=e.ctrlKey,l.shift=e.shiftKey},u=function(e,n,r,a,o){a=a||$A.boundTo(r);var i=!1;return $A.loop(e,(function(e,s){if($A.isFn(t["on"+s]))var l=!1===t["on"+s].call(r,n,r,t,a,o,0===t.index,t.index===t.nodes.length-1);l&&(i=!0)}),"array"),i};$A.on(s,{click:function(e,n){var r=t.children.get(s),a=r&&r.DC||n;if(t.index=i,t.setFocus.apply(t.nodes[t.index],[e,t]),t.DC&&(t.DC.loading||t.DC.closing)||a&&(a.loading||a.closing))return e.preventDefault(),e.stopPropagation(),!1;u(["Click","Open"],e,s,a,0)},touchstart:function(e,n){var r=t.children.get(s),a=r&&r.DC||n;if(t.index=i,t.setFocus.apply(t.nodes[t.index],[e,t]),t.DC&&(t.DC.loading||t.DC.closing)||a&&(a.loading||a.closing))return e.preventDefault(),e.stopPropagation(),!1;u(["TouchStart"],e,s,a,0)},keydown:function(n,r){if(c(n),"semi"===t.autoSwitch||"full"===t.autoSwitch){var i=$A.getOrientation(t.nodes);"vertical"===i.orientation?t.orientation=2:"horizontal"===i.orientation&&(t.orientation="full"===t.autoSwitch&&i.lineWrap?0:1)}var d=$A.keyEvent(n),f=0,p=o.get(s),g=t.children.get(s),h=g&&g.DC||r,m=[],v=!1,b=!1;if(t.DC&&(t.DC.loading||t.DC.closing)||h&&(h.loading||h.closing))return n.preventDefault(),n.stopPropagation(),!1;if(d>=35&&d<=40){f=d>=37&&d<=40?d:0;var y=t.index,A=!1;f&&(t.arrowPressed=!0,m.push("Arrow")),37===d?l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftLeft"):m.push("ShiftLeft"):m.push("CtrlLeft"):m.push("Left"):38===d?l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftUp"):m.push("ShiftUp"):m.push("CtrlUp"):m.push("Up"):39===d?l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftRight"):m.push("ShiftRight"):m.push("CtrlRight"):m.push("Right"):40===d&&(l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftDown"):m.push("ShiftDown"):m.push("CtrlDown"):m.push("Down")),v=u(m,n,s,h,f),m=[],v&&(b=!0),l.alt||l.ctrl||l.shift||!(39===d&&2===t.orientation||40===d&&1===t.orientation)?l.alt||l.ctrl||l.shift||!(37===d&&2===t.orientation||38===d&&1===t.orientation)?37===d&&(0===t.orientation||1===t.orientation)||38===d&&(0===t.orientation||2===t.orientation)?(0===t.index&&(v=u(["Top"],n,s,h,f)),v&&(b=!0),t.breakPoint?!t.breakPoint.horizontal||37!==d||0!==t.orientation&&1!==t.orientation?!t.breakPoint.vertical||38!==d||0!==t.orientation&&2!==t.orientation||(p.y>0?t.index=o[e[p.y-1][p.x]].i:0===p.y&&$A.isFn(t.onBounds)&&t.onBounds.apply(s,[n,s,t,d])):p.x>0||0===p.x&&p.y>0&&!t.breakPoint.horizontalStop?t.index--:0===p.x&&0===p.y&&$A.isFn(t.onBounds)&&t.onBounds.apply(s,[n,s,t,d]):b||(t.index=0===t.index?t.autoLoop?t.nodes.length-1:y:t.index-1)):39===d&&(0===t.orientation||1===t.orientation)||40===d&&(0===t.orientation||2===t.orientation)?(t.index===t.nodes.length-1&&(v=u(["Bottom"],n,s,h,f)),v&&(b=!0),t.breakPoint?!t.breakPoint.horizontal||39!==d||0!==t.orientation&&1!==t.orientation?!t.breakPoint.vertical||40!==d||0!==t.orientation&&2!==t.orientation||(p.y<a?t.index=o[e[p.y+1][p.x]].i:p.y===a&&$A.isFn(t.onBounds)&&t.onBounds.apply(s,[n,s,t,d])):p.x<t.breakPoint.horizontal||p.x===t.breakPoint.horizontal&&p.y<a&&!t.breakPoint.horizontalStop?t.index++:p.x===t.breakPoint.horizontal&&p.y===a&&$A.isFn(t.onBounds)&&t.onBounds.apply(s,[n,s,t,d]):b||(t.index=t.index===t.nodes.length-1?t.autoLoop?0:y:t.index+1)):35===d?(l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftEnd"):m.push("ShiftEnd"):(m.push("CtrlEnd"),A=!0):m.push("End"),v=u(m,n,s,h,f),m=[],v&&(b=!0),!b&&t.breakPoint&&t.breakPoint.horizontal>0&&p.x<t.breakPoint.horizontal?t.index=o[e[p.y][t.breakPoint.horizontal]].i:b||(t.index=t.nodes.length-1)):36===d&&(l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftHome"):m.push("ShiftHome"):(m.push("CtrlHome"),A=!0):m.push("Home"),v=u(m,n,s,h,f),m=[],v&&(b=!0),!b&&t.breakPoint&&t.breakPoint.horizontal>0&&p.x>0?t.index=o[e[p.y][0]].i:b||(t.index=0)):(m.push("Close"),A=!0):(m.push("Open"),A=!0),b||A||t.index===y||t.setFocus.apply(t.nodes[t.index],[n,t]),n.stopPropagation(),n.preventDefault()}else 9!==d||l.alt||l.ctrl?27!==d||l.alt||l.ctrl||l.shift?46===d?l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftDelete"):m.push("ShiftDelete"):m.push("CtrlDelete"):m.push("Delete"):33===d||34===d?l.alt||l.ctrl||l.shift?!l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push(33===d?"CtrlShiftPageUp":"CtrlShiftPageDown"):m.push(33===d?"ShiftPageUp":"ShiftPageDown"):m.push(33===d?"CtrlPageUp":"CtrlPageDown"):m.push(33===d?"AltPageUp":"AltPageDown"):m.push(33===d?"PageUp":"PageDown"):13===d||32===d?13===d?(l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftEnter"):m.push("ShiftEnter"):m.push("CtrlEnter"):m.push("Enter"),m.push("Open")):32===d&&(l.alt||l.ctrl||l.shift?l.alt||!l.ctrl||l.shift?l.alt||l.ctrl||!l.shift?!l.alt&&l.ctrl&&l.shift&&m.push("CtrlShiftSpace"):m.push("ShiftSpace"):m.push("CtrlSpace"):m.push("Space")):!(d>=48&&d<=57||d>=65&&d<=90)||l.alt||l.ctrl||l.shift||(t.keyReset&&clearTimeout(t.keyReset),t.keyReset=setTimeout((function(){t.typed=""}),1e3),function(){t.lastTyped===d?t.typed=String.fromCharCode(d):t.typed+=String.fromCharCode(d);for(var e,n,r=t.isTree?t.top.treeNodes:t.nodes,a=0,o=t.isTree?$A.data(s,"RTI-TreeIndex"):t.index,i=o+1,l=r.length-1,c=!1;i<=l;i++)if(e=r[i],n=$A.data(e,"AccName")||"",!$A.isHidden(e)&&0===n.indexOf(t.typed.toLowerCase())){c=!0,t.focus(e);break}if(!c)for(;a<o;a++)if(e=r[a],n=$A.data(e,"AccName")||"",!$A.isHidden(e)&&0===n.indexOf(t.typed.toLowerCase())){t.focus(e);break}}(),t.lastTyped=d,n.stopPropagation(),n.preventDefault()):(m.push("Esc"),m.push("Close")):l.shift?m.push("ShiftTab"):m.push("Tab");u(m,n,s,h,f)},keyup:function(e,n){c(e);var r=[],a=t.children.get(s),o=a&&a.DC||n,i=$A.keyEvent(e),d=i>=37&&i<=40?i:0;if(t.DC&&(t.DC.loading||t.DC.closing)||o&&(o.loading||o.closing))return e.preventDefault(),e.stopPropagation(),!1;"a"!==e.key||l.alt||!l.ctrl||l.shift?"c"!==e.key||l.alt||!l.ctrl||l.shift?"x"!==e.key||l.alt||!l.ctrl||l.shift?"v"!==e.key||l.alt||!l.ctrl||l.shift||r.push("Paste"):r.push("Cut"):r.push("Copy"):r.push("SelectAll"),u(r,e,s,o,d)},focus:function(e,n){var r=t.children.get(s),a=r&&r.DC||n;t.index=i,t.setFocus.apply(t.nodes[t.index],[e,t]),u(["Focus"],e,s,a,0)}},".RovingTabIndex"),$A.setAttr(s,{tabindex:i===t.index?0:-1})}),"array")},t.isTree){t.top.treeNodes=[];var n=function(e,t){e.length&&$A.loop(e,(function(e,r){var a=t.children.get(r),o=t.top.treeNodes.length;$A.data(r,"RTI-TreeIndex",o),t.top.treeNodes[o]=r,a&&$A.isArray(a.nodes)&&n(a.nodes,a)}),"array")};n(t.top.nodes,t.top)}return t.on(),t}}),"scrollTo"in $A||$A.extend({isScrolling:!1,scrollTo:function(e,t,n){return this._4X&&(n=t,t=e,e=this._X),$A.isFn(t)&&(n=t,t=null),$A.isNode(e)||(e=$A.morph(e)),$A.isNode(e)&&($A.isScrolling=!0,window.Velocity(e,"scroll",$A.extend({duration:700,easing:"ease-in",complete:function(){$A.isScrolling=!1,$A.isFn(n)&&n.call(e,e,n.target)}},t||{}))),$A._XR.call(this,e)},moveTo:function(e,t,n){return this._4X&&(n=t,t=e,e=this._X),e=$A.morph(e),$A.isNode(e)&&$A.scrollTo(e,t,n||function(e){$A.focus(e)}),$A._XR.call(this,e)},skipTo:function(e,t,n,r){return this._4X&&(r=n,n=t,t=e,e=this._X),e=$A.morph(e),t=$A.morph(t),$A.isNode(e)&&$A.isNode(t)&&(e=$A.setSkipLink(e,$A.extend({target:t,skipReturn:!0,callback:r},n||{}))),$A._XR.call(this,e)},setSkipLink:function(e,t,n,r){this._4X&&(n=t,t=e,e=this._X),t||(t={});var a=t.callback||null,o=t.isOffScreen||!1,i=t.style||{},s=(n=t.context||n,!(!r&&!t.skipReturn));return $A.isNode(n,null,document)||(n=document),$A.query(e,n,(function(e,r){var l=t.target||$A.getAttr(r,"href");$A.isSelector(l)&&(l=n.querySelector(l)),$A.isNode(l)&&!$A.data(r,"_isBoundFn")&&($A.data(r,"_isBoundFn",!0),$A.bindObjects(r,l),$A.on(r,{click:function(e){$A.bindObjects(r,l),$A.isFn(a)&&(a.target=l),$A.moveTo(l,t.override||{},a),e.preventDefault()}}),o&&($A.setOffScreen(r),$A.on(r,{focus:function(e){$A.css(r,$A.extend({},$A.sraCSSClear,i||{}))},blur:function(e){$A.setOffScreen(r)}})),!s&&$A.isFocusable(l)&&$A.on(l,{click:function(e){$A.isFn(a)&&(a.target=$A.boundTo(l)),$A.moveTo($A.boundTo(l),t.override||{},a),e.preventDefault()}}))})),$A._XR.call(this,e)}}),"beep"in $A||$A.extend({beep:function(){new Audio("data:audio/wav;base64,//uQRAAAAWMSLwUIYAAsYkXgoQwAEaYLWfkWgAI0wWs/ItAAAGDgYtAgAyN+QWaAAihwMWm4G8QQRDiMcCBcH3Cc+CDv/7xA4Tvh9Rz/y8QADBwMWgQAZG/ILNAARQ4GLTcDeIIIhxGOBAuD7hOfBB3/94gcJ3w+o5/5eIAIAAAVwWgQAVQ2ORaIQwEMAJiDg95G4nQL7mQVWI6GwRcfsZAcsKkJvxgxEjzFUgfHoSQ9Qq7KNwqHwuB13MA4a1q/DmBrHgPcmjiGoh//EwC5nGPEmS4RcfkVKOhJf+WOgoxJclFz3kgn//dBA+ya1GhurNn8zb//9NNutNuhz31f////9vt///z+IdAEAAAK4LQIAKobHItEIYCGAExBwe8jcToF9zIKrEdDYIuP2MgOWFSE34wYiR5iqQPj0JIeoVdlG4VD4XA67mAcNa1fhzA1jwHuTRxDUQ//iYBczjHiTJcIuPyKlHQkv/LHQUYkuSi57yQT//uggfZNajQ3Vmz+Zt//+mm3Wm3Q576v////+32///5/EOgAAADVghQAAAAA//uQZAUAB1WI0PZugAAAAAoQwAAAEk3nRd2qAAAAACiDgAAAAAAABCqEEQRLCgwpBGMlJkIz8jKhGvj4k6jzRnqasNKIeoh5gI7BJaC1A1AoNBjJgbyApVS4IDlZgDU5WUAxEKDNmmALHzZp0Fkz1FMTmGFl1FMEyodIavcCAUHDWrKAIA4aa2oCgILEBupZgHvAhEBcZ6joQBxS76AgccrFlczBvKLC0QI2cBoCFvfTDAo7eoOQInqDPBtvrDEZBNYN5xwNwxQRfw8ZQ5wQVLvO8OYU+mHvFLlDh05Mdg7BT6YrRPpCBznMB2r//xKJjyyOh+cImr2/4doscwD6neZjuZR4AgAABYAAAABy1xcdQtxYBYYZdifkUDgzzXaXn98Z0oi9ILU5mBjFANmRwlVJ3/6jYDAmxaiDG3/6xjQQCCKkRb/6kg/wW+kSJ5//rLobkLSiKmqP/0ikJuDaSaSf/6JiLYLEYnW/+kXg1WRVJL/9EmQ1YZIsv/6Qzwy5qk7/+tEU0nkls3/zIUMPKNX/6yZLf+kFgAfgGyLFAUwY//uQZAUABcd5UiNPVXAAAApAAAAAE0VZQKw9ISAAACgAAAAAVQIygIElVrFkBS+Jhi+EAuu+lKAkYUEIsmEAEoMeDmCETMvfSHTGkF5RWH7kz/ESHWPAq/kcCRhqBtMdokPdM7vil7RG98A2sc7zO6ZvTdM7pmOUAZTnJW+NXxqmd41dqJ6mLTXxrPpnV8avaIf5SvL7pndPvPpndJR9Kuu8fePvuiuhorgWjp7Mf/PRjxcFCPDkW31srioCExivv9lcwKEaHsf/7ow2Fl1T/9RkXgEhYElAoCLFtMArxwivDJJ+bR1HTKJdlEoTELCIqgEwVGSQ+hIm0NbK8WXcTEI0UPoa2NbG4y2K00JEWbZavJXkYaqo9CRHS55FcZTjKEk3NKoCYUnSQ0rWxrZbFKbKIhOKPZe1cJKzZSaQrIyULHDZmV5K4xySsDRKWOruanGtjLJXFEmwaIbDLX0hIPBUQPVFVkQkDoUNfSoDgQGKPekoxeGzA4DUvnn4bxzcZrtJyipKfPNy5w+9lnXwgqsiyHNeSVpemw4bWb9psYeq//uQZBoABQt4yMVxYAIAAAkQoAAAHvYpL5m6AAgAACXDAAAAD59jblTirQe9upFsmZbpMudy7Lz1X1DYsxOOSWpfPqNX2WqktK0DMvuGwlbNj44TleLPQ+Gsfb+GOWOKJoIrWb3cIMeeON6lz2umTqMXV8Mj30yWPpjoSa9ujK8SyeJP5y5mOW1D6hvLepeveEAEDo0mgCRClOEgANv3B9a6fikgUSu/DmAMATrGx7nng5p5iimPNZsfQLYB2sDLIkzRKZOHGAaUyDcpFBSLG9MCQALgAIgQs2YunOszLSAyQYPVC2YdGGeHD2dTdJk1pAHGAWDjnkcLKFymS3RQZTInzySoBwMG0QueC3gMsCEYxUqlrcxK6k1LQQcsmyYeQPdC2YfuGPASCBkcVMQQqpVJshui1tkXQJQV0OXGAZMXSOEEBRirXbVRQW7ugq7IM7rPWSZyDlM3IuNEkxzCOJ0ny2ThNkyRai1b6ev//3dzNGzNb//4uAvHT5sURcZCFcuKLhOFs8mLAAEAt4UWAAIABAAAAAB4qbHo0tIjVkUU//uQZAwABfSFz3ZqQAAAAAngwAAAE1HjMp2qAAAAACZDgAAAD5UkTE1UgZEUExqYynN1qZvqIOREEFmBcJQkwdxiFtw0qEOkGYfRDifBui9MQg4QAHAqWtAWHoCxu1Yf4VfWLPIM2mHDFsbQEVGwyqQoQcwnfHeIkNt9YnkiaS1oizycqJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=").play()}}),"setAccordion"in $A||($A.addWidgetProfile("Accordion",{configure:function(e){return{exposeBounds:!0,exposeHiddenClose:!1,ariaControls:!0,ariaLabelledby:!0,isToggle:!1,allowMultiple:!1,escToClose:!1,returnFocus:!1,click:function(e,t){e.stopPropagation()},onCreate:function(e){$A.setAttr(e.trigger,"aria-expanded","false")},afterRender:function(e,t){e.trackPage&&$A.setPage(e.id)}}},role:function(e){return{role:"region"}},duringRender:function(e,t){$A.setAttr(e.triggerNode,"aria-expanded","true"),e.isToggle||$A.setAttr(e.triggerNode,"aria-disabled","true")},beforeRemove:function(e,t){$A.setAttr(e.triggerNode,"aria-expanded","false"),e.isToggle||$A.setAttr(e.triggerNode,"aria-disabled","false")}}),$A.extend({setAccordion:function(e,t){if(this._4X&&(t=e,e=this._X),$A.isPlainObject(e)&&(e=(t=e).trigger||t.content||null),!e)return null;var n=null;$A.isArray(e)?n=e:$A.isStr(e)&&(n=(t.context||document).querySelectorAll(e));var r=[],a=[],o=0;return $A.loop(n,(function(e,n){$A.isNative(n)||-1!==["button","link"].indexOf($A.getAttr(n,"role").toLowerCase()||"false")||$A.setAttr(n,"role","button"),$A.svgFix(n);var i=$A.get($A.getAttr(n,"data-root")),s=$A.toDC(n,$A.extend({widgetType:"Accordion",root:i},t||{}));r.push(s),$A.hasAttr(n,"data-active")&&(a.push(s),o=e)})),$A.map({siblings:r}),$A.updateDisabled(r),t.singleTabStop&&new $A.RovingTabIndex($A.extend({nodes:n,startIndex:o,orientation:2,autoSwitch:t.autoSwitch||"full",autoLoop:!0,onClick:function(e,t,n,r){r.render(),e.preventDefault()},onSpace:function(e,t,n,r){r.render(),e.preventDefault()},onEnter:function(e,t,n,r){r.render(),e.preventDefault()}},t.extendRTI||{})),$A.hasHash(r)||$A.loop(a,(function(e,t){t.render()}),"array"),1===r.length?r[0]:r}})),"setButton"in $A||($A.extend({setButton:function(e,t){this._4X&&(t=e,e=this._X),$A.isPlainObject(e)&&(e=(t=e).trigger||null);var n=function(e,n,r,a,o){if(r){var i=$A.getAttr(e,"role"),s="radio"===i,l="switch"===i,c=$A.hasAttr(e,"aria-pressed"),u=0;return"true"===n?u=1:s||c||l||"mixed"!==n?n="false":u=2,$A.data(e,"check",u),a&&(s&&$A.isArray(o)&&$A.loop(o,(function(t,n){n!==e&&$A.setAttr(n,"aria-checked","false")}),"array"),$A.setAttr(e,c?"aria-pressed":"aria-checked",n),"mixed"===n?($A.remClass(e,t.toggleClassName||"pressed checked"),$A.toggleClass(e,t.partialClassName||"partially-checked",!0)):($A.remClass(e,t.partialClassName||"partially-checked"),$A.toggleClass(e,t.toggleClassName||(c?"pressed":"checked"),"true"===n))),u}return!1},r=[];if($A.query(e,t.context||document,(function(e,a){var o=$A.isNode(a)&&($A.hasAttr(a,"data-controls")&&$A.morph($A.getAttr(a,"data-controls"))||$A.isFn(a.querySelector)&&a.querySelector("input"))||!1,i=$A.isNative(o)?o:$A.isNative(a)?a:null,s=$A.isNode(o)&&!$A.isNative(o)?o:$A.isNative(a)?null:a,l=!$A.isNode(i)&&$A.isNode(o)&&s!==a?o:null;if(l===s&&(s=a),$A.isNode(s)){$A.isNode(i)&&$A.isNode(s)&&$A.bindObjects(i,s);var c=n(s,$A.getAttr(s,"data-radio"),$A.hasAttr(s,"data-radio"),!0),u=n(s,$A.getAttr(s,"data-check"),$A.hasAttr(s,"data-check"),!0),d=n(s,$A.getAttr(s,"data-toggle"),$A.hasAttr(s,"data-toggle"),!0),f=n(s,$A.getAttr(s,"data-switch"),$A.hasAttr(s,"data-switch"),!0),p=$A.hasAttr(s,"data-required"),g=$A.hasAttr(s,"data-disabled");if($A.isNum(c))$A.setAttr(s,{role:"radio","aria-checked":c?"true":"false"}),r.push(s);else if($A.isNum(u)){$A.isNode(i)&&i.checked&&(u=1),$A.isNode(l)&&(l.id||(l.id=$A.genId()),$A.setAttr(s,{"aria-flowto":l.id,"aria-controls":l.id}));var h="false";1===u?h="true":2===u&&(h="mixed"),$A.setKBA11Y(s,"checkbox",(function(e,r){var a=this,o=$A.isDisabled(a),s=n(a,$A.getAttr(a,"aria-checked"),$A.hasAttr(a,"aria-checked"));!o&&$A.isFn(t.onActivate)&&t.onActivate.apply(a,[e,a,r||i,s,function(e){n(a,e,!0,!0)}])})),$A.setAttr(s,{"aria-checked":h})}else $A.isNum(f)?($A.isNode(i)&&i.checked&&(f=1),$A.isNode(l)&&(l.id||(l.id=$A.genId()),$A.setAttr(s,{"aria-flowto":l.id,"aria-controls":l.id})),h="false",1===f&&(h="true"),$A.setKBA11Y(s,"switch",(function(e,r){var a=this,o=$A.isDisabled(a),s=n(a,$A.getAttr(a,"aria-checked"),$A.hasAttr(a,"aria-checked"));!o&&$A.isFn(t.onActivate)&&t.onActivate.apply(a,[e,a,r||i,s,function(e){n(a,e,!0,!0)}])})),$A.setAttr(s,{"aria-checked":h})):(!1!==d&&($A.setAttr(s,"aria-pressed",d?"true":"false"),$A.isNode(l)&&(l.id||(l.id=$A.genId()),$A.setAttr(s,{"aria-flowto":l.id,"aria-controls":l.id}))),$A.setKBA11Y(s,"button",(function(e,r){var a=this,o=$A.isDisabled(a),i=n(a,$A.getAttr(a,"aria-pressed"),$A.hasAttr(a,"aria-pressed")),s=!1!==i?[e,a,r||l,i,function(e){n(a,e,!0,!0)}]:[e,a,r||l];!o&&$A.isFn(t.onActivate)&&t.onActivate.apply(a,s)})));!1===c&&!1===u&&!1===d&&!1===f||$A.on(s,"attributeChange",(function(e,t,r,a,o,s,l){if($A.isNode(i)){var c=n(t,a,!0);i.checked=!!c}}),{attributeFilter:["aria-checked","aria-pressed"]}),$A.svgFix(s),t.label&&$A.setAttr(s,"aria-label",t.label),($A.isNode(i)&&i.required||t.required||p)&&($A.setAttr(s,"aria-required","true"),$A.isNode(i)&&!i.required&&(i.required=!0)),($A.isNode(i)&&i.disabled||t.disabled||g)&&($A.setAttr(s,"aria-disabled","true"),$A.isNode(i)&&!i.disabled&&(i.disabled=!0)),$A.updateDisabled(s)}})),r.length){var a=t.container&&$A.morph(t.container)||$A.closest(r[0],(function(e){if("radiogroup"===$A.getAttr(e,"role"))return!0}));$A.isNode(a)||function(e){var t=[],n=[];$A.closest(e[0],(function(e){if($A.isNode(e)&&t.push(e),e===document.body)return!0})),$A.closest(e[e.length-1],(function(e){if($A.isNode(e)&&n.push(e),e===document.body)return!0})),t=t.reverse(),n=n.reverse();for(var r=null,o=0;o<t.length;o++)if(t[o]===n[o])r=t[o];else if(t[o]!==n[o])break;a=r}(r),$A.setAttr(a,"role","radiogroup"),new $A.RovingTabIndex($A.extend({nodes:r,startIndex:0,orientation:0,autoLoop:!0,onClick:function(e,r,a,o){var i=r,s=$A.isDisabled(i),l=n(i,$A.getAttr(i,"aria-checked"),$A.hasAttr(i,"aria-checked"));!s&&$A.isFn(t.onActivate)&&t.onActivate.apply(i,[e,i,o,l,function(e){n(i,e,!0,!0,a.nodes)}])},onSpace:function(e,t,n,r){n.onClick.apply(t,arguments)},onFocus:function(e,t,n,r){n.arrowPressed&&!$A.isTouch&&n.onClick.apply(t,arguments)}},t.extendRTI||{}))}return $A._XR.call(this,e)}}),$A.extend({setCheckbox:$A.setButton,setRadio:$A.setButton,setSwitch:$A.setButton})),"setCarousel"in $A||$A.extend({setCarousel:function(e){var t=$A.morph(e.container),n=$A.toDC(t.parentNode),r=$A.tns(e);return n.tns=r,n}}),"Combobox"in $A||$A.extend({Combobox:function(e){var t=e.select||!1,n=e.input||!1,r=$A.isFn(window.getAccName)&&window.getAccName(e.input).name||"",a=e.childNode||!1;if(!t||!n)return null;var o=-1!==["input","textarea"].indexOf(n.nodeName.toLowerCase());if(!o&&!a)return null;$A.setAttr(n,{role:"combobox","aria-expanded":"false","aria-autocomplete":"list","aria-haspopup":"listbox"});var i=$A.genId(),s=this,l=!1;n.id||(n.id=i);var c={id:i,role:"List",returnFocus:!1,exposeBounds:!0,exposeHiddenClose:!0,delay:e.delay||1e3,style:e.style,animate:e.animate,hiddenCloseName:"Close Popup",displayHiddenClose:!1,className:"toplevel-div clearfix",middleClass:"middle-div clearfix",listboxClass:"listbox clearfix",optionClass:"option clearfix",activeClass:"active",toggleClassName:"pressed",triggerNode:n,widgetType:"Combobox",autoCloseSameWidget:!0,cb:{selected:[],select:function(e,t,n){if(!$A.isNode(t)||!t.id)return $A.remAttr(e.triggerNode,["aria-activedescendant","aria-controls"]),void(e.cb.activeDescendant=!1);$A.remClass(e.cb.selected,e.activeClass),e.cb.selected=[],n?($A.setAttr(e.triggerNode,"aria-activedescendant",t.id),e.cb.activeDescendant=!0,$A.addClass(t,e.activeClass),e.cb.selected.push(t),s.scrollIntoView(t,e.scrollCallback,e)):($A.remAttr(e.triggerNode,["aria-activedescendant","aria-controls"]),e.cb.activeDescendant=!1)},key:"",charMin:0,baseId:i,baseInc:1,options:{},optionNodes:[],size:0,readonly:!1,multiple:!1,checked:!1,multipleDivider:function(e){return e.join("")},required:!1,parentTag:e.parentTag||"ul",childTag:e.childTag||"li",names:[],values:[],matches:[],value:"",showAll:!1,substringMatch:!1,wordMatch:!1,autoComplete:!1,currentOption:null,activeDescendant:!1,sIndex:-1,clicked:!1,mClicked:!1,isInput:o,setDefault:!0,bound:!1,fn:{update:function(){var e=this.dc;s.close(),e.cb.options={},e.cb.currentOption=null,e.cb.names=[],e.cb.values=[],e.cb.readonly=!e.cb.isInput||!!n.readOnly,e.cb.required=e.cb.isInput?!!n.required:"true"===$A.getAttr(e.triggerNode,"aria-required"),e.cb.multiple=!!$A.getAttr(e.cb.sel,"multiple"),e.cb.optionNodes=$A.query("option",e.cb.sel),e.cb.readonly&&(e.cb.substringMatch=e.cb.wordMatch=!1);for(var t=0;t<e.cb.optionNodes.length;t++){e.cb.baseInc++;var r=$A.trim($A.getText(e.cb.optionNodes[t])).replace(/<|>/g,""),a=e.cb.baseId+e.cb.baseInc,o="<"+e.cb.childTag+' role="option" tabindex="-1" id="'+a+'" data-value="'+e.cb.optionNodes[t].value+'" class="'+e.optionClass+'" ';e.cb.multiple&&(o+='aria-selected="false" '),o+="><a><span>"+r+"</span></a></"+e.cb.childTag+">",e.cb.options[e.cb.optionNodes[t].value]={content:o,id:a,so:e.cb.optionNodes[t],checked:e.cb.optionNodes[t].selected,no:r,v:e.cb.optionNodes[t].value,i:t},e.cb.names.push(r),e.cb.values.push(e.cb.optionNodes[t].value)}e.cb.sel.selectedIndex=e.cb.sel.selectedIndex>=0?e.cb.sel.selectedIndex:0,e.cb.multiple?(e.cb.autoComplete=!0,e.cb.fn.setValue(!1,!0)):e.cb.fn.setValue(e.cb.options[e.cb.optionNodes[e.cb.sel.selectedIndex].value],!0),e.cb.required&&e.cb.isInput&&$A.setAttr(e.triggerNode,{"aria-required":"true"})},render:function(e,t,n){var r=this.dc;if(r.cb.multiple&&!n)for(var a in r.cb.options){var o=r.cb.options[a];$A.setAttr(o.o,"aria-selected",o.checked?"true":"false")}if(r.cb.readonly){var i=r.cb.showAll;r.cb.showAll=!0}if(!r.cb.readonly&&!r.cb.showAll&&!r.cb.value)return r.cb.showAll=i,!0;if(!t&&(r.cb.sIndex=r.cb.sel.selectedIndex,r.cb.matches=[],r.loaded))return s.close((function(){s.open(!0)})),r;if(t&&r.cb.key){var l=r.cb.key.toLowerCase(),c=!1,u=r.cb.sIndex;r.cb.sIndex++;for(var d=r.cb.sIndex;d<r.cb.names.length;d++)if(0===$A.inArray(l,r.cb.names[d].toLowerCase())){c=!0,r.cb.sIndex=d;break}if(!c)for(r.cb.sIndex=0,d=r.cb.sIndex;d<u;d++)if(0===$A.inArray(l,r.cb.names[d].toLowerCase())){c=!0,r.cb.sIndex=d;break}c?(r.cb.multiple?(r.cb.currentOption=[],r.cb.currentOption[0]=r.cb.options[r.cb.values[r.cb.sIndex]],r.cb.value=r.cb.currentOption[0].no):(r.cb.currentOption=r.cb.options[r.cb.values[r.cb.sIndex]],r.cb.value=r.cb.currentOption.no),r.cb.multiple?r.cb.select(r,r.cb.currentOption[0].o,!0):r.cb.select(r,r.cb.currentOption.o,!0)):r.cb.sIndex=u}else{if(e||r.cb.showAll||r.cb.readonly)r.cb.matches=r.cb.values;else for(d=0;d<r.cb.names.length;d++)if(r.cb.wordMatch){for(var f=$A.trim(r.cb.value).toLowerCase().split(" "),p=$A.trim(r.cb.names[d]).toLowerCase().split(" "),g=0,h=0,m=0;m<f.length;m++){for(var v=0;v<p.length;v++)if($A.trim(f[m])&&$A.trim(p[v])&&-1!==$A.inArray($A.trim(f[m]),$A.trim(p[v]))&&$A.trim(f[m]).length===$A.trim(p[v]).length){h++;break}g++}g&&h&&g<=h&&r.cb.matches.push(r.cb.values[d])}else(!r.cb.wordMatch&&!r.cb.substringMatch&&0===$A.inArray(r.cb.value.toLowerCase(),r.cb.names[d].toLowerCase())||!r.cb.wordMatch&&r.cb.substringMatch&&-1!==$A.inArray(r.cb.value.toLowerCase(),r.cb.names[d].toLowerCase()))&&r.cb.matches.push(r.cb.values[d]);if(!r.cb.matches.length)return!0;r.cb.readonly?r.cb.sIndex=r.cb.sel.selectedIndex:r.cb.sIndex=0,r.cb.readonly&&(r.cb.showAll=i,r.cb.currentObject=r.cb.options[r.cb.matches[r.cb.sIndex]])}return!1},setAltTrigger:function(e){if(e&&1===e.nodeType){var t=this.dc;$A.setAttr(e,{role:"button","aria-expanded":"false"}),$A.setAttr(e,{"aria-label":$A.isFn(window.getAccName)&&window.getAccName(t.triggerNode).name||$A.getText(t.triggerNode)}),t.cb.altClicked=!1,$A.off(e,"click"),$A.on(e,"click",(function(e){t.cb.altClicked||(t.cb.altClicked=!0,t.loaded?(t.cb.multiple&&t.cb.mClicked&&(t.cb.fn.setValue(!1,!1,!0),t.cb.mClicked=!1),s.close()):s.open(),t.triggerNode.focus(),setTimeout((function(){t.cb.altClicked=!1}),300)),e.stopPropagation(),e.preventDefault()})),t.cb.altTrigger=e}},setValue:function(e,t,n){var r=this.dc;if(e&&!r.cb.multiple)r.cb.value=e.no,r.cb.currentOption=e,t||(e.so.selected=!0),!t&&r.cb.fn.onSelect&&$A.isFn(r.cb.fn.onSelect)?((i=r.cb.fn.onSelect.apply(r.triggerNode,[e.no,e.v,r.triggerNode,r.cb.sel]))||$A.isStr(i))&&(r.cb.value=i):r.cb.isInput?(n||r.cb.setDefault)&&(r.triggerNode.value=r.cb.value):(n||r.cb.setDefault)&&(r.cb.child.innerHTML=r.cb.value);else if(!e&&r.cb.multiple){var a=[];if(t){a=$A.query("option[selected]",r.cb.sel);for(var o=0;o<a.length;o++)r.cb.options[a[o].value].checked=!0}r.cb.currentOption=[],r.cb.value="";var i,s=[];for(var l in r.cb.options)e=r.cb.options[l],t||(e.checked="true"===$A.getAttr(e.o,"aria-selected"),e.so.selected=e.checked),e.checked&&(r.cb.currentOption.push(e),a.push(e.so),s.push(e.no));r.cb.value=r.cb.multipleDivider(s),!t&&r.cb.fn.onSelect&&$A.isFn(r.cb.fn.onSelect)?((i=r.cb.fn.onSelect.apply(r.triggerNode,[r.cb.value,a,r.triggerNode,r.cb.sel]))||$A.isStr(i))&&(r.cb.value=i):r.cb.isInput?(n||r.cb.setDefault)&&(r.triggerNode.value=r.cb.value):(n||r.cb.setDefault)&&(r.cb.child.innerHTML=r.cb.value)}r.cb.pValue=r.cb.value},checkValue:function(e){var t=this.dc;if(!(e&&e.length>=t.cb.charMin))return-1;for(var n=0;n<t.cb.names.length;n++)if($A.trim(e)&&$A.trim(e.toLowerCase())==$A.trim(t.cb.names[n].toLowerCase()))return n;return-1},unsetValue:function(e){var t=this.dc;!e&&t.cb.sel.selectedIndex>=0&&(t.cb.optionNodes[t.cb.sel.selectedIndex].selected=!1),t.cb.currentOption=null,t.cb.isInput?t.cb.value=t.triggerNode.value:t.cb.value=$A.getText(t.cb.child)},bind:function(){var e=this.dc;if(!e.cb.bound){$A.off(e.triggerNode,".4XCombobox");var t=!1,r=null,a=function(t){e.cb.altTrigger||(e.loaded?e.loaded&&s.close():s.open())};$A.on(e.triggerNode,{touchstart:function(n){t=!0,!r&&e.loaded&&a.call(this,n),r=setTimeout((function(){r=null}),1e3)},mousedown:function(e){e.stopPropagation()},click:function(t){e.cb.isInput||a.call(this,t),t.stopPropagation()},keydown:function(t){var n=$A.keyEvent(t);t.stopPropagation(),9===n?e.loaded&&(e.cb.autoComplete&&e.cb.activeDescendant&&(e.cb.multiple?e.cb.fn.setValue(!1,!1,!0):e.cb.fn.setValue(e.cb.options[e.cb.matches[e.cb.sIndex]],!1,!0)),s.close()):13!==n&&32!==n||e.cb.isInput||e.cb.activeDescendant||e.loaded?e.cb.multiple||13!==n&&32!==n||!e.cb.activeDescendant||!e.loaded?e.cb.multiple&&13===n&&e.cb.activeDescendant&&e.loaded?(e.cb.fn.setValue(!1,!1,!0),s.close(),d(),t.preventDefault()):e.cb.multiple&&32===n&&e.cb.activeDescendant&&e.loaded?($A.setAttr(e.cb.options[e.cb.matches[e.cb.sIndex]].o,"aria-selected","true"===$A.getAttr(e.cb.options[e.cb.matches[e.cb.sIndex]].o,"aria-selected")?"false":"true"),e.cb.autoSaveIfChecked&&e.cb.fn.setValue(!1,!1,!0),t.preventDefault()):e.cb.readonly&&(n>=48&&n<=57||n>=65&&n<=90)&&(e.cb.key+=String.fromCharCode(n),e.cb.fn.render(!1,!0,!0),e.cb.keyReset&&clearTimeout(e.cb.keyReset),e.cb.keyReset=setTimeout((function(){e.cb.key=""}),1500)):(e.cb.fn.setValue(e.cb.options[e.cb.matches[e.cb.sIndex]],!1,!0),s.close(),d(),t.preventDefault()):(s.open(),t.preventDefault()),e.cb.showAllIfEmpty&&this.value&&(e.cb.showAll=e.fn.showAll),e.cb.readonly&&e.loaded&&(37===n||39===n)?t.preventDefault():40!==n||e.cb.activeDescendant||e.loaded||this.value||!e.cb.showAllIfEmpty?40!==n||e.cb.activeDescendant||e.loaded||!e.cb.readonly?40===n&&!e.cb.activeDescendant&&e.loaded?(e.cb.sIndex=e.cb.readonly&&e.cb.showAll&&e.cb.sel.selectedIndex>=0?e.cb.sel.selectedIndex:0,e.cb.select(e,e.cb.options[e.cb.matches[e.cb.sIndex]].o,!0),t.preventDefault()):40===n&&e.cb.activeDescendant&&e.loaded?(e.cb.sIndex<e.cb.matches.length-1?e.cb.sIndex++:e.cb.sIndex=0,e.cb.select(e,e.cb.options[e.cb.matches[e.cb.sIndex]].o,!0),t.preventDefault()):t.altKey&&38===n&&e.cb.activeDescendant&&e.loaded?(e.cb.multiple?e.cb.fn.setValue(!1,!1,!0):e.cb.fn.setValue(e.cb.options[e.cb.matches[e.cb.sIndex]],!1,!0),s.close(),d(),t.preventDefault()):38===n&&e.cb.activeDescendant&&e.loaded?(e.cb.sIndex>0?e.cb.sIndex--:e.cb.sIndex=e.cb.matches.length-1,e.cb.select(e,e.cb.options[e.cb.matches[e.cb.sIndex]].o,!0),t.preventDefault()):27!==n&&37!==n&&39!==n||(e.cb.select(e),27===n&&s.close()):(e.cb.sIndex=(e.cb.readonly||e.cb.showAll)&&e.cb.sel.selectedIndex>=0?e.cb.sel.selectedIndex:0,$A.isNum(e.cb.sIndex)||(e.cb.sIndex=0),s.open(),t.preventDefault()):(e.cb.showAll=!0,e.cb.sIndex=(e.cb.readonly||e.cb.showAll)&&e.cb.sel.selectedIndex>=0?e.cb.sel.selectedIndex:0,$A.isNum(e.cb.sIndex)||(e.cb.sIndex=0),s.open(),t.preventDefault())},keyup:function(t){var r=$A.keyEvent(t);if(!e.cb.readonly&&9!==r){e.cb.isInput&&(e.cb.value=this.value);var a=e.cb.fn.checkValue(e.cb.value);if(e.cb.value&&-1!==a){var o=e.cb.options[e.cb.values[a]];e.cb.multiple?(e.cb.currentOption=[],e.cb.currentOption[0]=o):e.cb.currentOption=o,o.so.selected=!0,s.close()}else if(e.cb.value&&e.cb.value.length>=e.cb.charMin){var i=!(!e.cb.isInput||e.cb.readonly);i&&(e.cb.pValue&&e.cb.pValue===n.value||(e.cb.pValue=n.value,i=!1)),i||(e.cb.fn.render(),s.open(!0))}else e.cb.multiple||38===r||40===r||s.close()}},focus:function(e){},blur:function(n){t||e.cb.multiple||setTimeout((function(){e.cb.altClicked||(e.loaded&&(e.cb.autoComplete&&e.cb.activeDescendant&&!e.cb.clicked&&e.cb.fn.setValue(e.cb.options[e.cb.matches[e.cb.sIndex]],!1,!0),s.close()),e.cb.clicked=!1)}),150)}},null,".4XCombobox"),e.cb.bound=!0}},set:function(){var e=this.dc;e.cb.select(e),$A.setAttr(e.triggerNode,{"aria-expanded":"false"}),e.cb.isInput||(e.cb.baseInc++,e.cb.child.id||$A.setAttr(e.cb.child,{tabindex:"-1",id:e.cb.baseId+e.cb.baseInc}),$A.addIdRef(e.triggerNode,"aria-labelledby",e.cb.child.id))},onSelect:null,onOpen:null,onClose:null,onTriggerChange:null,setSize:function(){var e=this.dc,t=(e.cb.size||5)<=e.cb.matches.length?e.cb.size||5:e.cb.matches.length,n=e.cb.options[e.cb.matches[0]].o,r=$A.elementHeight(n);r=t*(r+=parseInt($A.css(n,"margin-top"),10)+parseInt($A.css(n,"margin-bottom"),10))+(parseInt($A.css(e.content,"padding-top"),10)+parseInt($A.css(e.content,"padding-bottom"),10)),$A.css(e.content,"height",r)}}},click:function(e,t){e.stopPropagation()},beforeRender:function(e){if(!e.cb.matches.length)return e.cancel=!0;e.fn.matches=e.cb.matches,e.cb.baseInc++,e.content=s.listboxNode=$A.create(e.cb.parentTag,{role:"listbox","aria-label":r,id:e.cb.baseId+e.cb.baseInc,"aria-multiselectable":e.cb.multiple?"true":"false"},null,e.listboxClass);for(var t=0;t<e.cb.matches.length;t++)$A.isNode(e.cb.options[e.cb.matches[t]].o)||(e.cb.options[e.cb.matches[t]].o=$A.toNode(e.cb.options[e.cb.matches[t]].content,!0)),e.content.appendChild(e.cb.options[e.cb.matches[t]].o)},duringRender:function(e){$A.addClass(e.container,e.middleClass)},afterRender:function(e){$A.setAttr(s.combobox,"aria-controls",s.listboxNode.id),e.cb.matches!==e.fn.matches&&(e.beforeRender(e),e.insert(e.content)),$A.query(e.cb.matches,(function(t,n){$A.off(e.cb.options[n].o,"click"),$A.on(e.cb.options[n].o,{click:function(t){if(e.cb.multiple){var r=e.cb.options[n].o;r&&$A.setAttr(r,"aria-selected","true"===$A.getAttr(r,"aria-selected")?"false":"true"),e.cb.mClicked=!0}else e.cb.fn.setValue(e.cb.options[n],!1,!0),e.cb.clicked=!0,s.close(),d();t.preventDefault()},focus:function(e){}})})),e.cb.sIndex>=0||(e.cb.sIndex=0),e.cb.readonly&&e.cb.select(e,e.cb.options[e.cb.matches[e.cb.sIndex]].o,!0),e.cb.fn.setSize(),"desktop"!==window.device.type&&setTimeout((function(){$A.announce(e.cb.options[e.cb.matches[e.cb.sIndex]].no,!1)}),1),$A.setAttr(e.triggerNode,"aria-expanded","true"),e.cb.altTrigger&&1===e.cb.altTrigger.nodeType&&($A.addClass(e.cb.altTrigger,e.toggleClassName),$A.setAttr(e.cb.altTrigger,"aria-expanded","true"),e.cb.fn.onTriggerChange&&$A.isFn(e.cb.fn.onTriggerChange)&&e.cb.fn.onTriggerChange.apply(e.cb.altTrigger,[e.cb.altTrigger,e.loaded])),e.cb.fn.onOpen&&$A.isFn(e.cb.fn.onOpen)&&e.cb.fn.onOpen.apply(e.triggerNode,[e])},beforeRemove:function(e){e.loaded&&e.cb.multiple&&e.cb.mClicked&&e.cb.fn.setValue(!1,!1,!0)},afterRemove:function(e){e.cb.mClicked=!1,e.cb.select(e),$A.setAttr(e.triggerNode,{"aria-expanded":"false"}),e.cb.altTrigger&&1===e.cb.altTrigger.nodeType&&($A.remClass(e.cb.altTrigger,e.toggleClassName),$A.setAttr(e.cb.altTrigger,{"aria-expanded":"false"}),e.cb.fn.onTriggerChange&&$A.isFn(e.cb.fn.onTriggerChange)&&e.cb.fn.onTriggerChange.apply(e.cb.altTrigger,[e.cb.altTrigger,e.loaded])),e.cb.fn.onClose&&$A.isFn(e.cb.fn.onClose)&&e.cb.fn.onClose.apply(e.triggerNode,[e])},onCreate:function(e){s.combobox=e.triggerNode,s.select=e.cb.sel},scrollConfig:e.scrollConfig||{}};$A.extend(c,e.override||{});var u=$A([c])[0];u.cb.dc=u.cb.fn.dc=s.dc=u,u.cb.sel=t,u.cb.child=a;var d=function(){u.cb.fn.onSelect&&$A.isFn(u.cb.fn.onSelect)||setTimeout((function(){!u.cb.multiple||u.cb.isInput?$A.announce(u.cb.value.toString(),!1,!0):u.cb.child&&$A.announce(u.cb.child,!1,!0)}),150)};return s.setCharMin=function(e){$A.isNum(e)&&e>=0&&(u.cb.charMin=e)},s.setShowAll=function(e){u.cb.showAll=u.fn.showAll=!!e},s.setShowAllIfEmpty=function(e){u.cb.showAllIfEmpty=!!e},s.setAutoSaveIfChecked=function(e){u.cb.autoSaveIfChecked=!!e},s.setSubstringMatch=function(e){u.cb.substringMatch=!!e},s.setWordMatch=function(e){u.cb.wordMatch=!!e},s.setTags=function(e){e.parentTag&&(u.cb.parentTag=e.parentTag),e.childTag&&(u.cb.childTag=e.childTag)},s.setOffset=function(e){isNaN(e.left)||(u.offsetLeft=e.left),isNaN(e.top)||(u.offsetTop=e.top)},s.setAutoComplete=function(e){u.cb.autoComplete=!!e},s.close=function(e){u.remove(e)},s.open=function(e){u.loaded||l&&(u.cb.fn.render(),u.render((function(){"desktop"===window.device.type&&u.cb.select(u,u.cb.options[u.cb.matches[u.cb.sIndex]].o,!0)})))},s.setAltTrigger=function(e){u.cb.fn.setAltTrigger(e)},s.setAutoPosition=function(e){!isNaN(e)&&e<10&&(u.autoPosition=e)},s.setSize=function(e){!isNaN(e)&&e>0&&(u.cb.size=e)},s.setPosAnchor=function(e){u.posAnchor=e},s.setTargetNode=function(e){u.targetNode=e},s.setClassNames=function(e){e.toplevelClass&&(u.className=e.toplevelClass),e.middleClass&&(u.middleClass=e.middleClass),e.listboxClass&&(u.listboxClass=e.listboxClass),e.optionClass&&(u.optionClass=e.optionClass),e.activeClass&&(u.activeClass=e.activeClass),e.toggleClass&&(u.toggleClassName=e.toggleClass)},s.setDefault=function(e){u.cb.setDefault=!!e},s.setMultipleDivider=function(e){e&&$A.isFn(e)&&(u.cb.multipleDivider=e)},s.clearAll=function(){for(var e in s.close(),u.cb.options){var t=u.cb.options[e];t.so.selected=!1,t.checked=!1,$A.setAttr(t.o,"aria-selected","false")}u.cb.isInput?u.triggerNode.value="":u.cb.child&&(u.cb.multiple?u.cb.fn.setValue(!1,!0):$A.empty(u.cb.child))},s.update=function(){u.cb.fn.update()},s.start=function(){l=!0,u.cb.fn.bind(),u.cb.fn.update(),document.activeElement===n&&(u.cb.readonly||u.cb.value)&&s.open()},s.stop=function(){l=!1,s.close()},s.onSelect=function(e){e&&$A.isFn(e)&&(u.cb.fn.onSelect=e)},s.onOpen=function(e){e&&$A.isFn(e)&&(u.cb.fn.onOpen=e)},s.onClose=function(e){e&&$A.isFn(e)&&(u.cb.fn.onClose=e)},s.onTriggerChange=function(e){e&&$A.isFn(e)&&(u.cb.fn.onTriggerChange=e)},s.setPromptText=function(e){$A.setAttr(n,"aria-description",e)},s.setCloseText=function(e){e?(u.exposeHiddenClose=!0,u.hiddenCloseName=e):u.exposeHiddenClose=!1},s.scrollIntoView=function(e,t,n){$A.scrollTo(e,$A.extend({duration:100,container:s.listboxNode,complete:function(){$A.isFn(t)&&t.call(e,e)}},n.scrollConfig||{}))},s.getValue=function(){if(u.cb.multiple){var e=[];for(var t in u.cb.options){var n=u.cb.options[t];n.checked&&n.so.selected&&e.push(n.so)}return e}return u.cb.sel.value},$A.on(window,"resize."+i,(function(){u&&u.loaded&&(u.setPosition(),u.cb.fn.setSize())})),$A(n).on("remove",(function(e,t){$A.off(window,"."+i)})),u.cb.isInput||$A.getAttr(u.triggerNode,"tabindex")||$A.setAttr(u.triggerNode,"tabindex","0"),u.cb.fn.set(),$A.remAttr(u.triggerNode,["data-controls"]),s}}),"setDatepicker"in $A||($A.addWidgetProfile("Datepicker",{configure:function(e){return{returnFocus:!1,allowRerender:!0,exposeBounds:!0,exposeHiddenClose:!1}},role:function(e){return{role:"dialog","aria-modal":"false","aria-label":e.role}},innerRole:function(e){return{role:"application"}}}),$A.extend({setDatepicker:function(e){var t=(e=e||{}).helpTextShort?e.helpTextShort:"Press F1 for help.",n=e.helpText?e.helpText:"Press the arrow keys to navigate by day, PageUp and PageDown to navigate by month, Alt+PageUp and Alt+PageDown to navigate by year, or Escape to cancel.",r=!0===e.monthOnly,a=r||!0===e.monthSelect,o=r||!0===e.yearSelect,i=r||!0===e.forceSelect,s=e.openOnFocusHelpText?e.openOnFocusHelpText:"Press Down arrow to browse the calendar, or Escape to close.",l=!1,c=!1,u=e.id||$A.genId(),d=$A.morph(e.toggle),f=$A.morph(e.input),p=!r&&!0===e.enableComments,g=$A.isFn(e.onActivate)?e.onActivate:function(t,n){f.value=n.formatDate(n),n.remove(),n.triggerClicked?$A.focus(e.returnFocusTo||d):$A.focus(e.returnFocusTo||f),n.triggerClicked=!1},h={},m=function(e){h.alt=e.altKey,h.ctrl=e.ctrlKey,h.shift=e.shiftKey},v=$A.genId(),b=$A([{id:u,role:e.role||"Calendar",widgetType:"Datepicker",autoCloseSameWidget:!0,trigger:d,target:f,on:"opendatepicker",disabled:!0===e.disabled,returnFocus:!1,openOnFocus:!0===e.openOnFocus,openOnFocusHelpText:s,showEscBtn:!0===e.showEscBtn,escBtnName:e.escBtnName||"Close",escBtnIcon:e.escBtnIcon||"&times;",tooltipTxt:e.tooltipTxt||"Press Escape to cancel",markedTxt:e.markedTxt||"Selected",disabledTxt:e.disabledTxt||"Disabled",commentedTxt:e.commentedTxt||"Has Comment",prevTxt:e.prevTxt||"Previous",nextTxt:e.nextTxt||"Next",monthTxt:e.monthTxt||"Month",yearTxt:e.yearTxt||"Year",leftButtonYearText:e.leftButtonYearText||"&#8656;",rightButtonYearText:e.rightButtonYearText||"&#8658;",leftButtonMonthText:e.leftButtonMonthText||"&#8592;",rightButtonMonthText:e.rightButtonMonthText||"&#8594;",drawFullCalendar:!0===e.drawFullCalendar,highlightToday:!$A.isBool(e.highlightToday)||e.highlightToday,pageUpDownNatural:!0,inputDateFormat:e.inputDateFormat||"MM/DD/YYYY",audibleDateFormat:e.audibleDateFormat||"dddd D MMMM YYYY",initialDate:e.initialDate instanceof Date?e.initialDate:new Date,minDate:void 0!==e.minDate?e.minDate instanceof Date?e.minDate:new Date((new Date).setDate((new Date).getDate()+e.minDate)):void 0,maxDate:void 0!==e.maxDate?e.maxDate instanceof Date?e.maxDate:new Date((new Date).setDate((new Date).getDate()+e.maxDate)):void 0,disableWeekdays:void 0!==e.disableWeekdays&&e.disableWeekdays,disableWeekends:void 0!==e.disableWeekends&&e.disableWeekends,className:e.className||"calendar",range:{disabledWDays:[],0:{name:e.months&&e.months[0]?e.months[0]:"January",max:31,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},1:{name:e.months&&e.months[1]?e.months[1]:"February",max:28,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},2:{name:e.months&&e.months[2]?e.months[2]:"March",max:31,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},3:{name:e.months&&e.months[3]?e.months[3]:"April",max:30,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},4:{name:e.months&&e.months[4]?e.months[4]:"May",max:31,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},5:{name:e.months&&e.months[5]?e.months[5]:"June",max:30,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},6:{name:e.months&&e.months[6]?e.months[6]:"July",max:31,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},7:{name:e.months&&e.months[7]?e.months[7]:"August",max:31,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},8:{name:e.months&&e.months[8]?e.months[8]:"September",max:30,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},9:{name:e.months&&e.months[9]?e.months[9]:"October",max:31,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},10:{name:e.months&&e.months[10]?e.months[10]:"November",max:30,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},11:{name:e.months&&e.months[11]?e.months[11]:"December",max:31,marked:{},disabled:{},disabledWDays:[],comments:{},message:{}},wDays:[{shrt:e.days&&e.days[0]?e.days[0].s:"S",lng:e.days&&e.days[0]?e.days[0].l:"Sunday"},{shrt:e.days&&e.days[1]?e.days[1].s:"M",lng:e.days&&e.days[1]?e.days[1].l:"Monday"},{shrt:e.days&&e.days[2]?e.days[2].s:"T",lng:e.days&&e.days[2]?e.days[2].l:"Tuesday"},{shrt:e.days&&e.days[3]?e.days[3].s:"W",lng:e.days&&e.days[3]?e.days[3].l:"Wednesday"},{shrt:e.days&&e.days[4]?e.days[4].s:"T",lng:e.days&&e.days[4]?e.days[4].l:"Thursday"},{shrt:e.days&&e.days[5]?e.days[5].s:"F",lng:e.days&&e.days[5]?e.days[5].l:"Friday"},{shrt:e.days&&e.days[6]?e.days[6].s:"S",lng:e.days&&e.days[6]?e.days[6].l:"Saturday"}],wdOffset:isNaN(e.wdOffset)?0:e.wdOffset},getWDay:function(e,t,n){t=$A.isNum(t)?t:e.range.current.wDay;var r=e.range.wdOffset;return r<0?t=t+r<0?7+r:t+r:r>0&&(t=t+r>6?t+r-6-1:t+r),n&&(t=6-t),t},getDateOrdinalSuffix:function(e){var t=e%10,n=e%100;return 1===t&&11!==n?e+"st":2===t&&12!==n?e+"nd":3===t&&13!==n?e+"rd":e+"th"},formatDate:function(e,t,n){t||(t={YYYY:e.range.current.year,YY:e.range.current.year.toString().slice(-2),MMMM:e.range[e.range.current.month].name,dddd:e.range.wDays[e.range.current.wDay].lng,MM:("00"+(e.range.current.month+1)).slice(-2),DD:("00"+e.range.current.mDay).slice(-2),Do:e.getDateOrdinalSuffix(e.range.current.mDay),M:e.range.current.month+1,D:e.range.current.mDay}),$A.isStr(n)||(n=e.inputDateFormat);var r=new RegExp(Object.keys(t).join("|"),"gi");return n.replace(r,(function(e){return t[e]}))},modifyDateValues:function(e,t){for(var n in t){var r=t[n];"month"===n&&(e.month+=r,r<0?e.month<0&&(e.month=11,e.year&&(e.year-=1)):e.month>11&&(e.month=0,e.year&&(e.year+=1)))}return e},setFocus:function(e,t,n){var a=this;return!!e&&(a.current=e,r||(a.query("td.dayInMonth.selected",(function(e,t){$A.setAttr(t,{tabindex:"-1"}),$A.remClass(t,"selected"),$A.data(t,"_Selected",0)})),$A.addClass(e,"selected"),$A.data(e,"_Selected",!0),$A.setAttr(e,{tabindex:"0"})),n||("PM"===a.navBtn?(a.buttons.pM.focus(),setTimeout((function(){$A.announce(a.range[a.range.current.month].name,!1,!0)}),1),a.navBtnS=!0):"NM"===a.navBtn?(a.buttons.nM.focus(),setTimeout((function(){$A.announce(a.range[a.range.current.month].name,!1,!0)}),1),a.navBtnS=!0):"PY"===a.navBtn?(a.buttons.pY.focus(),setTimeout((function(){$A.announce(a.range.current.year.toString(),!1,!0)}),1),a.navBtnS=!0):"NY"===a.navBtn?(a.buttons.nY.focus(),setTimeout((function(){$A.announce(a.range.current.year.toString(),!1,!0)}),1),a.navBtnS=!0):"CY"===a.navBtn||"CM"===a.navBtn||r&&(!a.openOnFocus||D)?a.buttons.cYS.hidden?a.buttons.cY.hidden||a.buttons.cY.focus():a.buttons.cYS.focus():(!a.openOnFocus||a.openOnFocus&&!l&&c)&&e.focus()),a.fn.navBtn?a.fn.navBtn="":a.navBtn="",!0)},setCurrent:function(e){e.date instanceof Date&&(e.range.current={mDay:e.date.getDate(),month:e.date.getMonth(),year:e.date.getFullYear(),wDay:e.date.getDay()})},setDayMarked:function(e,t,n){var r=t.getFullYear(),a=t.getMonth(),o=t.getDate();if(n)"object"!=typeof e.range[a].marked[r]&&(e.range[a].marked[r]=[]),e.range[a].marked[r].push(o);else if("object"==typeof e.range[a].marked[r]){var i=e.range[a].marked[r].indexOf(o);-1!==i&&delete e.range[a].marked[r][i]}},clearAllMarked:function(e){for(var t in e.range)e.range[t].marked={}},setDayDisabled:function(e,t,n){var r=t.getFullYear(),a=t.getMonth(),o=t.getDate();if(n)"object"!=typeof e.range[a].disabled[r]&&(e.range[a].disabled[r]=[]),e.range[a].disabled[r].push(o);else if("object"==typeof e.range[a].disabled[r]){var i=e.range[a].disabled[r].indexOf(o);-1!==i&&delete e.range[a].disabled[r][i]}},setMonthDisabled:function(e,t,n){var r=t.getFullYear(),a=t.getMonth();if(n){e.range[a].disabled[r]=[];for(var o=1;o<=e.range[a].max;o++)e.range[a].disabled[r].push(o)}else e.range[a].disabled[r]=[]},setDayOfWeekDisabled:function(e,t,n,r){var a=t.getFullYear(),o=t.getMonth();"object"!=typeof e.range[o].disabled[a]&&(e.range[o].disabled[a]=[]);for(var i=new Date(a,o,1),s=1;s<=e.range[o].max;s++)if(i.setDate(s),-1!==n.indexOf(i.getDay()))if(r)e.range[o].disabled[a].push(s);else{var l=e.range[o].marked[a].indexOf(s);-1!==l&&delete e.range[o].marked[a][l]}},setWeekdaysDisabled:function(e,t,n){e.setDayOfWeekDisabled(e,t,[1,2,3,4,5],n)},setWeekendsDisabled:function(e,t,n){e.setDayOfWeekDisabled(e,t,[0,6],n)},clearAllDisabled:function(e){for(var t in e.range)e.range[t].disabled={}},setMonthMessage:function(e,t,n){var r=t.getFullYear(),a=t.getMonth();$A.isStr(n)&&n.length>0?e.range[a].message[r]=n:delete e.range[a].message[r]},clearAllMessage:function(e){for(var t in e.range)e.range[t].message={}},isDisabledYear:function(e,t){for(var n=0;n<=11;n++)if(!e.isDisabledMonth(e,n,t))return!1;return!0},isDisabledMonth:function(e,t,n){for(var r=1;r<=e.range[t].max;r++)if(!e.isDisabledDate(e,r,new Date(n,t,r)))return!1;return!0},isDisabledDate:function(e,t,n,r){r||(r=e.range.current);var a=e.range[r.month].disabled[r.year],o=e.range[r.month].disabled["*"],i=e.range[r.month].disabledWDays,s=e.range.disabledWDays,l=n.getDay();return!!(a&&-1!==$A.inArray(t,a)||o&&-1!==$A.inArray(t,o)||i.length&&-1!==$A.inArray(l,i)||s.length&&-1!==$A.inArray(l,s)||e.isOutsideDateRange(n))},isOutsideDateRange:function(e){var t=this.createDateComparisonValue(e);return this.minDateComparisonValue&&t<this.minDateComparisonValue||this.maxDateComparisonValue&&t>this.maxDateComparisonValue},createDayCell:function(e,t,n,r,a){var o=this,i="<td ",s=o.createDateComparisonValue(new Date),l=o.createDateComparisonValue(t);l===s&&(i+='aria-current="date" '),r&&(i+='aria-disabled="true" '),i+='aria-label="';var c=o.range[o.range.current.month].comments[o.range.current.year],u=o.range[o.range.current.month].comments["*"],d="";c&&c[e]?d=c[e]:u&&u[e]&&(d=u[e]),d&&(i+=o.commentedTxt.replace(/<|>|\"/g,"")+" ");var f=t.getMonth(),p={YYYY:t.getFullYear(),MMMM:o.range[f].name,dddd:o.range.wDays[t.getDay()].lng,MM:("00"+(f+1)).slice(-2),DD:("00"+e).slice(-2),Do:o.getDateOrdinalSuffix(e),M:f+1,D:e},g=new RegExp(Object.keys(p).join("|"),"gi");i+=o.audibleDateFormat.replace(g,(function(e){return p[e]})),d&&(i+=d.replace(/<|>|\n/g," ").replace(/\"/g,'\\"')),i+='" role="button" tabindex="-1" ',i+='class="day '+(n||""),!0===o.highlightToday&&l===s&&(i+=" dayToday");var h=o.range[o.range.current.month].marked[o.range.current.year]&&-1!==o.range[o.range.current.month].marked[o.range.current.year].indexOf(e);return(a&&!r||h)&&(i+=" dayMarked"),r&&(i+=" disabled"),d&&(i+=" comment"),i+='" ',i+='title="',h?i+=o.markedTxt.replace(/<|>|\"/g,""):r&&(i+=o.disabledTxt.replace(/<|>|\"/g,"")),i+='" id="'+o.baseId+e+'"><span aria-hidden="true">'+e+"</span></td>"},createDateComparisonValue:function(e){return parseInt(e.getFullYear()+("00"+e.getMonth()).slice(-2)+("00"+e.getDate()).slice(-2),10)},presetDate:function(e,t,n,r){(e=e||this).initialDate=t||e.initialDate||new Date,e.minDate=n||e.minDate||null,e.maxDate=r||e.maxDate||null,e.setDateComparisons(e),e.date=e.isDisabledDate(e,e.initialDate.getDate(),e.initialDate)?new Date:e.initialDate,e.setCurrent(e),e.fn.current={},$A.extend(!0,e.fn.current,e.range.current)},setDate:function(e,t){void 0===t&&((e.minDate||e.maxDate)&&e.isOutsideDateRange(e.initialDate)?e.initialDate<e.minDate?t=e.minDate:e.initialDate>e.maxDate&&(t=e.maxDate):t=e.initialDate),e.date=t,e.setCurrent(e),e.fn.current={},$A.extend(!0,e.fn.current,e.range.current)},setDateComparisons:function(e){e.minDate instanceof Date&&(e.minDate.setHours(0,0,0,0),e.minDateComparisonValue=e.createDateComparisonValue(e.minDate)),e.maxDate instanceof Date&&(e.maxDate.setHours(0,0,0,0),e.maxDateComparisonValue=e.createDateComparisonValue(e.maxDate)),e.initialDate instanceof Date?e.currentDate=e.initialDate:e.currentDate=new Date,e.currentDateComparisonValue=e.createDateComparisonValue(e.currentDate)},storeCurrentDate:function(e){e.date=new Date(e.range.current.year,e.range.current.month,e.range.current.mDay)},setDisabled:function(e,t){"boolean"==typeof e?(t=e,e=this):e=e||this,e.disabled=!!t,$A.setAttr([f,d],"disabled",e.disabled),e.disabled||$A.remAttr([f,d],"disabled")},onceBeforeRender:function(e){e.date instanceof Date||(e.setDateComparisons(e),e.setDate(e))},rerenderTable:function(e){e.rerendering=!0,e.afterRemove(e),e.beforeRender(e),e.duringRender(e),e.afterRender(e),e.rerendering=!1},beforeRender:function(t){var n=f.value.replace(/\.|\-/g,"/"),s=f.value.split("/");2===s.length?s[1]>12?(2===s[1].length&&(s[1]="20"+s[1]),n=s[0]+"/01/"+s[1]):s[0]>12&&(2===s[0].length&&(s[0]="20"+s[0]),n=s[1]+"/01/"+s[0]):"DD/MM/YYYY"===e.inputDateFormat&&3===s.length?(2===s[2].length&&(s[2]="20"+s[2]),n=s[1]+"/"+s[0]+"/"+s[2]):"MM/DD/YYYY"===e.inputDateFormat&&3===s.length&&(2===s[2].length&&(s[2]="20"+s[2]),n=s[0]+"/"+s[1]+"/"+s[2]);var l,c=/^(0?[1-9]|1[0-2])\/(0?[1-9]|[12][0-9]|3[01])\/\d{4}$/.test(l=n)||/^(0?[1-9]|[12][0-9]|3[01])\/(0?[1-9]|1[0-2])\/\d{4}$/.test(l);c||(n=t.initialDate),!t.rerendering&&c&&n&&!t.isOutsideDateRange(new Date(n))&&t.presetDate(t,new Date(n)),t.disableWeekdays&&t.setWeekdaysDisabled(t,t.date,!0),t.disableWeekends&&t.setWeekendsDisabled(t,t.date,!0),!$A.isFn(e.configure)||t.stopConfigure||t.configureLoading||(t.configureLoading=t.cancel=!0,t.fn.navBtn=t.navBtn,!0===e.configure.apply(t,[t])&&setTimeout((function(){t.render()}),1)),1===t.range.current.month&&(t.range[1].max=1===new Date(t.range.current.year,1,29).getMonth()?29:28),t.baseId=v,t.prevBtnId=t.baseId+"p",t.currentBtnId=t.baseId+"c",t.nextBtnId=t.baseId+"n";var u=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:-1}),d=new Date;d.setMonth(u.month),d.setFullYear(u.year);var p=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:1}),g=new Date;g.setMonth(p.month),g.setFullYear(p.year);var h="";if(!e.condenseYear){var m=!t.isOutsideDateRange(new Date(t.range.current.year-1,0,1)),b=!t.isOutsideDateRange(new Date(t.range.current.year+1,0,1));h='<tr class="yearSelector" role="presentation"><td class="nav prev btn year'+(m?"":" disabled")+'" accesskey="1" title="'+t.prevTxt.replace(/<|>|\"/g,"")+" "+t.yearTxt.replace(/<|>|\"/g,"")+'" aria-label="'+t.prevTxt.replace(/<|>|\"/g,"")+" "+t.yearTxt.replace(/<|>|\"/g,"")+'"'+(m?' tabindex="0"':' aria-disabled="true" tabindex="-1"')+' role="button" id="'+t.prevBtnId+'Y"><span aria-hidden="true">'+t.leftButtonYearText+'</span></td><td colspan="5" class="year" role="presentation" title="'+t.tooltipTxt.replace(/<|>|\"/g,"")+'">'+(o?"<select "+(i?"":"hidden ")+'class="nav current select year" id="'+t.currentBtnId+'Y" title="'+t.yearTxt.replace(/<|>|\"/g,"")+'" aria-label="'+t.yearTxt.replace(/<|>|\"/g,"")+'">'+function(){var n=e.yearSelectMin||t.range.current.year,r=e.yearSelectMax||t.range.current.year,a="";for(t.minDate instanceof Date&&(n=Math.min(n,t.minDate.getFullYear())),t.maxDate instanceof Date&&(r=Math.max(r,t.maxDate.getFullYear()));n<=r;)t.isDisabledYear(t,n)||(a+="<option"+(n===t.range.current.year?' selected="selected"':"")+" value="+n+">"+n+"</option>"),n++;return a}()+"</select><span "+(i?"hidden ":"")+'class="nav current btn year" tabindex="0" role="button" id="'+t.currentBtnId+'YB">'+t.range.current.year+"</span>":"<span>"+t.range.current.year+"</span>")+'</td><td class="nav next btn year'+(b?"":" disabled")+'" accesskey="2" title="'+t.nextTxt.replace(/<|>|\"/g,"")+" "+t.yearTxt.replace(/<|>|\"/g,"")+'" aria-label="'+t.nextTxt.replace(/<|>|\"/g,"")+" "+t.yearTxt.replace(/<|>|\"/g,"")+'"'+(b?' tabindex="0"':' aria-disabled="true" tabindex="-1"')+' role="button" id="'+t.nextBtnId+'Y"><span aria-hidden="true">'+t.rightButtonYearText+"</span></td></tr>"}var y=!t.isOutsideDateRange(new Date(u.year,u.month,t.range[u.month].max)),A=!t.isOutsideDateRange(new Date(p.year,p.month,1)),w='<tr class="monthSelector" role="presentation"><td class="nav prev btn month'+(y?"":" disabled")+'" accesskey="3" title="'+t.prevTxt.replace(/<|>|\"/g,"")+" "+t.monthTxt.replace(/<|>|\"/g,"")+'" aria-label="'+t.prevTxt.replace(/<|>|\"/g,"")+" "+t.monthTxt.replace(/<|>|\"/g,"")+'"'+(y?' tabindex="0"':' aria-disabled="true" tabindex="-1"')+' role="button" id="'+t.prevBtnId+'"><span aria-hidden="true">'+t.leftButtonMonthText+'</span></td><td colspan="5" class="month" role="presentation">'+(a?"<select "+(i?"":"hidden ")+'class="nav current select month" id="'+t.currentBtnId+'M" title="'+t.monthTxt.replace(/<|>|\"/g,"")+'" aria-label="'+t.monthTxt.replace(/<|>|\"/g,"")+'">'+function(){for(var n="",r=0;r<=11;r++)t.isDisabledMonth(t,r,t.range.current.year)||(n+="<option value="+r+(r===t.range.current.month?' selected="selected"':"")+">"+t.range[r].name+(e.condenseYear?" "+t.range.current.year:"")+"</option>");return n}()+"</select><span "+(i?"hidden ":"")+'class="nav current btn month" tabindex="0" role="button" id="'+t.currentBtnId+'MB">'+t.range[t.range.current.month].name+(e.condenseYear?" "+t.range.current.year:"")+"</span>":"<span>"+t.range[t.range.current.month].name+(e.condenseYear?" "+t.range.current.year:"")+"</span>")+'</td><td class="nav next btn month'+(A?"":" disabled")+'" accesskey="4" title="'+t.nextTxt.replace(/<|>|\"/g,"")+" "+t.monthTxt.replace(/<|>|\"/g,"")+'" aria-label="'+t.nextTxt.replace(/<|>|\"/g,"")+" "+t.monthTxt.replace(/<|>|\"/g,"")+'"'+(A?' tabindex="0"':' aria-disabled="true" tabindex="-1"')+' role="button" id="'+t.nextBtnId+'"><span aria-hidden="true">'+t.rightButtonMonthText+"</span></td></tr>";t.content="",t.content+='<table role="presentation" class="calendar">'+h+w+'<tr role="presentation" aria-hidden="true"'+(r?' hidden="hidden">':">"),t.iter=0;for(var x=0;x<7;x++){var C=t.getWDay(t,x),$=t.range.wDays[C];x||(t.iter=t.iterE=C+6>6?-1+C:C+6,t.iterS=C),t.content+='<th scope="col" class="week" title="'+$.lng+'" role="presentation"><span>'+$.shrt+"</span></th>"}t.content+='</tr><tr role="presentation"'+(r?' hidden="hidden">':">");var D=new Date;D.setDate(1),D.setMonth(t.range.current.month),D.setFullYear(t.range.current.year);var N=D.getDay();D.setDate(t.range[t.range.current.month].max);var S=D.getDay(),k=t.iterS;if(!0===t.drawFullCalendar)var O=new Date(u.year,u.month+1,0).getDate()-new Date(t.range.current.year,t.range.current.month,0).getDay()+t.range.wdOffset;for(;k!==N;)k=k+1>6?0:k+1,!0===t.drawFullCalendar?(d.setDate(O),t.content+=t.createDayCell(O,d,"dayInPrevMonth",t.isDisabledDate(t,O,d)),++O):t.content+='<td class="empty" role="presentation"><span>&nbsp;</span></td>';for(t.range.track={},x=1;x<=31;x++)t.range.track[t.baseId+x]=x;for(x=1;x<=t.range[t.range.current.month].max;x++){D.setDate(x);var _=x===t.fn.current.mDay&&t.range.current.month===t.fn.current.month&&t.range.current.year===t.fn.current.year;t.content+=t.createDayCell(x,D,"dayInMonth",t.isDisabledDate(t,x,D),_),(k=D.getDay())===t.iter&&x<t.range[t.range.current.month].max&&(t.content+='</tr><tr role="presentation"'+(r?' hidden="hidden">':">"))}for(!0===t.drawFullCalendar&&(O=1);S!==t.iter;)S=S+1>6?0:S+1,!0===t.drawFullCalendar?(g.setDate(O),t.content+=t.createDayCell(O,g,"dayInNextMonth",t.isDisabledDate(t,O,g)),++O):t.content+='<td class="empty" role="presentation"><span>&nbsp;</span></td>';t.content+="</tr></table>",$A.isNode(t.messageContainer)||(t.messageContainerId=$A.genId(),t.messageContainer=$A.create("div",{id:t.messageContainerId},{},"monthMessage")),t.range[t.range.current.month].message[t.range.current.year]?(t.messageContainer.innerHTML="<p>"+t.range[t.range.current.month].message[t.range.current.year]+"</p>",$A.setAttr(t.container,"aria-labelledby",t.messageContainerId)):(T||(t.messageContainer.innerHTML="<p>"+t.helpTextShort+"</p>"),$A.remAttr(t.container,"aria-labelledby")),t.showEscBtn&&(t.content+='<button id="'+t.baseId+'esc" aria-label="'+t.escBtnName+'" title="'+t.escBtnName+'" class="esc-button">'+t.escBtnIcon+"</button>")},mouseEnter:function(e,t){t.mouseWithin=!0},mouseLeave:function(e,t){t.mouseWithin=!1},click:function(e,t){e.stopPropagation()},keyDown:function(e,t){112===$A.keyEvent(e)&&($A.remAttr(t.container,"aria-labelledby"),t.container.appendChild(t.messageContainer),$A.setAttr(t.messageContainer,{role:"alert"}),T||(t.messageContainer.innerHTML="<p>"+t.helpText+"</p>"),e.preventDefault(),e.stopPropagation())},updateDisabled:function(){this.query('td[aria-disabled="true"]',(function(e,t){$A.data(t,"disabled",!0)}))},updateCommented:function(){this.query("td.comment",(function(e,t){$A.data(t,"_HasComment",!0)}))},duringRender:function(e){e.rerendering?e.container.innerHTML=e.content:(e.datepickerLoaded=!1,e.setAttr({title:T?"":e.helpTextShort})),e.messageContainer.innerHTML&&e.container.appendChild(e.messageContainer)},afterRender:function(t){t.buttons={esc:t.showEscBtn?t.container.querySelector("button.esc-button"):null,pY:e.condenseYear?null:$A.get(t.prevBtnId+"Y"),nY:e.condenseYear?null:$A.get(t.nextBtnId+"Y"),pM:$A.get(t.prevBtnId),nM:$A.get(t.nextBtnId)},!e.condenseYear&&t.disableNavPrevYearBtn&&$A.setAttr(t.buttons.pY,"aria-disabled","true"),!e.condenseYear&&t.disableNavNextYearBtn&&$A.setAttr(t.buttons.nY,"aria-disabled","true"),t.disableNavPrevMonthBtn&&$A.setAttr(t.buttons.pM,"aria-disabled","true"),t.disableNavNextMonthBtn&&$A.setAttr(t.buttons.nM,"aria-disabled","true"),t.prevCurrent||(t.prevCurrent={}),$A.extend(!0,t.prevCurrent,t.range.current),t.updateDisabled(),t.updateCommented();var n,s,u,d=function(){if(!t.disableNavNextMonthBtn||!$A.data(t.buttons.nM,"disabled")){$A.extend(!0,t.prevCurrent,t.range.current);var e=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:1});if(t.isOutsideDateRange(new Date(e.year,e.month,1)))t.date=t.maxDate;else{var n=t.range.current.mDay>t.range[e.month].max?t.range[e.month].max:t.range.current.mDay,r=new Date(e.year,e.month,n);t.isOutsideDateRange(r)?t.date=t.maxDate:t.date=r}t.setCurrent(t),t.rerenderTable(t)}},w=function(){if(!t.disableNavPrevMonthBtn||!$A.data(t.buttons.pM,"disabled")){$A.extend(!0,t.prevCurrent,t.range.current);var e=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:-1});if(t.isOutsideDateRange(new Date(e.year,e.month,t.range[e.month].max)))t.date=t.minDate;else{var n=t.range.current.mDay>t.range[e.month].max?t.range[e.month].max:t.range.current.mDay,r=new Date(e.year,e.month,n);t.isOutsideDateRange(r)?t.date=t.minDate:t.date=r}t.setCurrent(t),t.rerenderTable(t)}},x=function(n){if((n||!(!e.condenseYear&&$A.data(t.buttons.pY,"disabled")||e.condenseYear&&t.disableNavPrevYearBtn))&&(!n||!(!e.condenseYear&&$A.data(t.buttons.nY,"disabled")||e.condenseYear&&t.disableNavNextYearBtn))){$A.extend(!0,t.prevCurrent,t.range.current);var r=t.range.current.month,a=n?t.range.current.year+1:t.range.current.year-1;1===r&&(t.range[1].max=28);var o=t.range.current.mDay>t.range[r].max?t.range[r].max:t.range.current.mDay,i=new Date(a,r,o);t.isOutsideDateRange(i)||(t.date=i,t.setCurrent(t),t.rerenderTable(t))}},C=!1;r||$A.on("#"+t.containerId+" td.day",{focus:function(e){if($A.data(this,"_HasComment")){var n=t.range[t.range.current.month].comments[t.range.current.year],r=t.range[t.range.current.month].comments["*"],a="";n&&n[t.range.current.mDay]?a=n[t.range.current.mDay]:r&&r[t.range.current.mDay]&&(a=r[t.range.current.mDay]),(a=$A.trim(a.replace(/<|>/g,"")))&&(y.content=a,y.rerender((function(){A.openEditor&&(A.openEditor=!1,A.loaded&&A.reset())})))}else y.loaded&&y.remove()},click:function(e){if($A.hasClass(this,"dayInPrevMonth")){var n=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:-1});t.date=new Date(n.year,n.month,t.range.track[this.id])}else if($A.hasClass(this,"dayInNextMonth")){var r=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:1});t.date=new Date(r.year,r.month,t.range.track[this.id])}else t.date.setDate(t.range.track[this.id]);t.setCurrent(t),$A.data(this,"_Selected")||!p&&!$A.data(this,"_HasComment")?$A.data(this,"disabled")?(e.stopPropagation(),e.preventDefault()):($A.extend(!0,t.fn.current,t.range.current),l=!1,c=!0,t.storeCurrentDate(t),g.apply(this,[e,t,f])):t.setFocus(this),e.preventDefault()},keydown:function(n){m(n);var r=$A.keyEvent(n);if(13===r)C=!0,$A.data(this,"disabled")||($A.extend(!0,t.fn.current,t.range.current),l=!1,c=!0,t.storeCurrentDate(t),g.apply(this,[n,t,f])),n.preventDefault();else if(32===r&&p&&e.editor&&e.editor.show&&!A.openEditor)A.openEditor=!0,A.reset(),n.preventDefault();else if(r>=37&&r<=40||27===r||r>=33&&r<=36){var a=t.range.current.wDay;if(37===r){if($A.extend(!0,t.prevCurrent,t.range.current),t.range.current.mDay>1)t.range.current.mDay--,t.range.current.wDay=a?a-1:6,t.setFocus(t.range.index[t.range.current.mDay-1],this);else if(1===t.range.current.mDay&&!$A.data(t.buttons.pM,"disabled")){var o=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:-1}),i=t.range[o.month].max;1===o.month&&(i=1===new Date(o.year,1,29).getMonth()?29:28),t.date=new Date(o.year,o.month,i),t.setCurrent(t),t.rerenderTable(t)}}else if(39===r)$A.extend(!0,t.prevCurrent,t.range.current),t.range.current.mDay<t.range[t.range.current.month].max?(t.range.current.mDay++,t.range.current.wDay=6===a?0:a+1,t.setFocus(t.range.index[t.range.current.mDay-1],this)):t.range.current.mDay!=t.range[t.range.current.month].max||$A.data(t.buttons.nM,"disabled")||(o=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:1}),t.date=new Date(o.year,o.month,1),t.setCurrent(t),t.rerenderTable(t));else if(38===r){if($A.extend(!0,t.prevCurrent,t.range.current),t.range.current.mDay-7>0)t.range.current.mDay-=7,t.setFocus(t.range.index[t.range.current.mDay-1],this);else if(!$A.data(t.buttons.pM,"disabled")){1===(o=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:-1})).month&&1===new Date(o.year,1,29).getMonth()?t.range[o.month].max=29:1===o.month&&(t.range[o.month].max=28),i=t.range[o.month].max+(t.range.current.mDay-7);var s=new Date(o.year,o.month,i);t.isOutsideDateRange(s)||(t.date=s,t.setCurrent(t),t.rerenderTable(t))}}else if(40===r)$A.extend(!0,t.prevCurrent,t.range.current),t.range.current.mDay+7<=t.range[t.range.current.month].max?(t.range.current.mDay+=7,t.setFocus(t.range.index[t.range.current.mDay-1],this)):$A.data(t.buttons.nM,"disabled")||(o=t.modifyDateValues({month:t.range.current.month,year:t.range.current.year},{month:1}),i=t.range.current.mDay+7-t.range[t.range.current.month].max,s=new Date(o.year,o.month,i),t.isOutsideDateRange(s)||(t.date=s,t.setCurrent(t),t.rerenderTable(t)));else if(27===r)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f);else if(33===r)$A.extend(!0,t.prevCurrent,t.range.current),t.pageUpDownNatural?h.alt?x(!1):w():h.alt?x(!0):d();else if(34===r)$A.extend(!0,t.prevCurrent,t.range.current),t.pageUpDownNatural?h.alt?x(!0):d():h.alt?x(!1):w();else if(36===r){if($A.extend(!0,t.prevCurrent,t.range.current),a!==t.iterS&&t.range.current.mDay>1){for(;t.range.current.wDay!==t.iterS&&$A.get(t.baseId+(t.range.current.mDay-1));)t.range.current.wDay=t.range.current.wDay-1<0?6:t.range.current.wDay-1,t.range.current.mDay--;t.setFocus(t.range.index[t.range.current.mDay-1],this)}}else if(35===r&&($A.extend(!0,t.prevCurrent,t.range.current),a!==t.iterE&&t.range.current.mDay<t.range[t.range.current.month].max)){for(;t.range.current.wDay!==t.iterE&&$A.get(t.baseId+(t.range.current.mDay+1));)t.range.current.wDay=t.range.current.wDay+1>6?0:t.range.current.wDay+1,t.range.current.mDay++;t.setFocus(t.range.index[t.range.current.mDay-1],this)}n.preventDefault()}else if(9!==r||h.alt||h.ctrl||h.shift)9!==r||h.alt||h.ctrl||!h.shift||($A.extend(!0,t.prevCurrent,t.range.current),t.navUpdate(),u=t.nav[t.nav.length-1],$A.isNode(u)?u.focus():p&&A.loaded&&A.commentBtn.focus(),n.preventDefault());else{if($A.extend(!0,t.prevCurrent,t.range.current),p&&A.loaded)$A.isHidden(A.textarea)?A.commentBtn.focus():A.textarea.focus();else{t.navUpdate();var u=t.nav[0];$A.isNode(u)&&u.focus()}n.preventDefault()}},keyup:function(e){m(e),13!==$A.keyEvent(e)||C||t.isAdd||($A.data(this,"disabled")||($A.extend(!0,t.fn.current,t.range.current),t.setFocus.firstOpen||(l=!1,c=!0,t.storeCurrentDate(t),g.apply(this,[e,t,f]))),e.preventDefault()),C=t.setFocus.firstOpen=t.isAdd=!1}},"."+v),t.showEscBtn&&$A.on(t.buttons.esc,{click:function(n){t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f),n.preventDefault()},keydown:function(n){m(n);var r=$A.keyEvent(n);if(27===r||13===r||32===r)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f);else if(9!==r||h.alt||h.ctrl||h.shift)9!==r||h.alt||h.ctrl||!h.shift||(a=t.navTo(this,0),$A.isNode(a)?a.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else{var a=t.navTo(this,1);$A.isNode(a)?a.focus():b.current.focus(),n.preventDefault()}},keyup:function(e){m(e)}},"."+v),o&&!e.condenseYear&&(n=$A.get("#"+t.currentBtnId+"Y"),s=n.querySelectorAll("option"),t.buttons.cYS=n,t.buttons.cY=$A.get("#"+t.currentBtnId+"YB"),$A.on(n,{keydown:function(n){m(n);var a=$A.keyEvent(n);if(13===a)r&&(l=!1,c=!0,t.storeCurrentDate(t),g.apply(this,[n,t,f]));else if(27===a)i?(t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f)):(t.buttons.cYS.hidden=!0,t.buttons.cY.hidden=!1,t.buttons.cY.focus()),n.stopPropagation(),n.preventDefault();else if(9!==a||h.alt||h.ctrl||h.shift)9===a&&!h.alt&&!h.ctrl&&h.shift&&i&&(o=t.navTo(this,0),$A.isNode(o)?o.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else if(i){var o=t.navTo(this,1);$A.isNode(o)?o.focus():b.current.focus(),n.preventDefault()}},keyup:function(e){m(e)},change:function(e){var n;t.navBtn="CY",n=function(){for(var e=0;e<s.length;e++)if(s[e].selected)return parseInt($A.getAttr(s[e],"value"));return t.range.current.year}(),i||(t.buttons.cYS.hidden=!0,t.buttons.cY.hidden=!1),n!==t.range.current.year?(t.initialDate=new Date(n,t.range.current.month,t.range.current.mDay),t.setDate(t),t.rerenderTable(t)):t.buttons[i?"cYS":"cY"].focus()}},"."+v),$A.on(t.buttons.cY,{click:function(e){i||(t.buttons.cY.hidden=!0,t.buttons.cYS.hidden=!1,t.buttons.cYS.focus()),e.preventDefault()},keydown:function(n){m(n);var r=$A.keyEvent(n);if(13===r||32===r)i||(t.buttons.cY.hidden=!0,t.buttons.cYS.hidden=!1,t.buttons.cYS.focus()),n.preventDefault();else if(27===r)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f);else if(9!==r||h.alt||h.ctrl||h.shift)9!==r||h.alt||h.ctrl||!h.shift||(a=t.navTo(this,0),$A.isNode(a)?a.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else{var a=t.navTo(this,1);$A.isNode(a)?a.focus():b.current.focus(),n.preventDefault()}},keyup:function(e){m(e)}},"."+v)),a&&(function(){var n=$A.get("#"+t.currentBtnId+"M"),a=n.querySelectorAll("option");t.buttons.cMS=n,t.buttons.cM=$A.get("#"+t.currentBtnId+"MB"),$A.on(n,{click:function(e){r&&(l=!1,c=!0,t.storeCurrentDate(t),g.apply(this,[e,t,f]))},keydown:function(n){m(n);var a=$A.keyEvent(n);if(13===a)r&&(l=!1,c=!0,t.storeCurrentDate(t),g.apply(this,[n,t,f]));else if(27===a)i?(t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f)):(t.buttons.cMS.hidden=!0,t.buttons.cM.hidden=!1,t.buttons.cM.focus()),n.stopPropagation(),n.preventDefault();else if(9!==a||h.alt||h.ctrl||h.shift)9===a&&!h.alt&&!h.ctrl&&h.shift&&i&&(o=t.navTo(this,0),$A.isNode(o)?o.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else if(i){var o=t.navTo(this,1);$A.isNode(o)?o.focus():b.current.focus(),n.preventDefault()}},keyup:function(e){m(e)},change:function(e){var n;t.navBtn="cM",n=function(){for(var e=0;e<a.length;e++)if(a[e].selected)return parseInt($A.getAttr(a[e],"value"));return t.range.current.month}(),i||(t.buttons.cMS.hidden=!0,t.buttons.cM.hidden=!1),n!==t.range.current.month?(t.initialDate=new Date(t.range.current.year,n,t.range.current.mDay),t.setDate(t),t.rerenderTable(t)):t.buttons[i?"cMS":"cM"].focus(),r&&(l=!1,c=!0,t.storeCurrentDate(t),g.apply(this,[e,t,f]))}},"."+v)}(),$A.on(t.buttons.cM,{click:function(e){i||(t.buttons.cM.hidden=!0,t.buttons.cMS.hidden=!1,t.buttons.cMS.focus()),e.preventDefault()},keydown:function(n){m(n);var r=$A.keyEvent(n);if(13===r||32===r)i||(t.buttons.cM.hidden=!0,t.buttons.cMS.hidden=!1,t.buttons.cMS.focus()),n.preventDefault();else if(27===r)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f);else if(9!==r||h.alt||h.ctrl||h.shift)9!==r||h.alt||h.ctrl||!h.shift||(a=t.navTo(this,0),$A.isNode(a)?a.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else{var a=t.navTo(this,1);$A.isNode(a)?a.focus():b.current.focus(),n.preventDefault()}},keyup:function(e){m(e)}},"."+v)),$A.on(t.buttons.pM,{click:function(e){t.navBtn="PM",w(),e.preventDefault()},keydown:function(n){m(n);var r=$A.keyEvent(n);if(13===r||32===r)t.navBtn="PM",w(),n.preventDefault();else if(27===r)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f),n.preventDefault();else if(e.condenseYear||38!==r)if(39===r)t.buttons.nM.focus(),n.preventDefault();else if(37===r||40===r)n.preventDefault();else if(9!==r||h.alt||h.ctrl||h.shift)9!==r||h.alt||h.ctrl||!h.shift||(a=t.navTo(this,0),$A.isNode(a)?a.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else{var a=t.navTo(this,1);$A.isNode(a)?a.focus():b.current.focus(),n.preventDefault()}else t.buttons.pY.focus(),n.preventDefault()},keyup:function(e){m(e)}},"."+v),$A.on(t.buttons.nM,{click:function(e){t.navBtn="NM",d(),e.preventDefault()},keydown:function(n){m(n);var a=$A.keyEvent(n);if(13===a||32===a)t.navBtn="NM",d(),n.preventDefault();else if(27===a)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f),n.preventDefault();else if(e.condenseYear||38!==a)if(37===a)t.buttons.pM.focus(),n.preventDefault();else if(39===a||40===a)n.preventDefault();else if(9!==a||h.alt||h.ctrl||h.shift)9!==a||h.alt||h.ctrl||!h.shift||(t.navUpdate(),o=t.navTo(this,0),$A.isNode(o)?o.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else{if(r){t.navUpdate();var o=t.nav[0];$A.isNode(o)&&o.focus()}else b.current.focus();n.preventDefault()}else t.buttons.nY.focus(),n.preventDefault()},keyup:function(e){m(e)}},"."+v),e.condenseYear||$A.on(t.buttons.pY,{click:function(e){t.navBtn="PY",x(),e.preventDefault()},keydown:function(n){m(n);var a=$A.keyEvent(n);if(13===a||32===a)t.navBtn="PY",x(),n.preventDefault();else if(27===a)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f),n.preventDefault();else if(39===a)t.buttons.nY.focus(),n.preventDefault();else if(40===a)t.buttons.pM.focus(),n.preventDefault();else if(37===a||38===a)n.preventDefault();else if(9!==a||h.alt||h.ctrl||h.shift)9!==a||h.alt||h.ctrl||!h.shift||(o=t.navTo(this,0),$A.isNode(o)?o.focus():p&&A.loaded?A.commentBtn.focus():r?t.buttons.nM.focus():b.current.focus(),n.preventDefault());else{var o=t.navTo(this,1);$A.isNode(o)?o.focus():b.current.focus(),n.preventDefault()}},keyup:function(e){m(e)}},"."+v),e.condenseYear||$A.on(t.buttons.nY,{click:function(e){t.navBtn="NY",x(!0),e.preventDefault()},keydown:function(n){m(n);var r=$A.keyEvent(n);if(13===r||32===r)t.navBtn="NY",x(!0),n.preventDefault();else if(27===r)t.remove(),l=!1,c=!0,$A.focus(e.returnFocusTo||f),n.preventDefault();else if(37===r)t.buttons.pY.focus(),n.preventDefault();else if(40===r)t.buttons.nM.focus(),n.preventDefault();else if(38===r||39===r)n.preventDefault();else if(9!==r||h.alt||h.ctrl||h.shift)9!==r||h.alt||h.ctrl||!h.shift||(a=t.navTo(this,0),$A.isNode(a)?a.focus():p&&A.loaded?A.commentBtn.focus():b.current.focus(),n.preventDefault());else{var a=t.navTo(this,1);$A.isNode(a)?a.focus():b.current.focus(),n.preventDefault()}},keyup:function(e){m(e)}},"."+v),u=["esc","pY","cY","cYS","nY","pM","cM","cMS","nM"],t.navUpdate=function(){t.nav=[];for(var e=0;e<u.length;e++){var n=t.buttons[u[e]];n&&!$A.isDisabled(n)&&!$A.isHidden(n)&&$A.isFocusable(n)&&t.nav.push(n)}},t.navUpdate(),t.navTo=function(e,n){return t.navUpdate(),r?e!==t.nav[0]||n?e===t.nav[t.nav.length-1]&&n?t.nav[0]:t.nav[$A.inArray(e,t.nav)+(n?1:-1)]:t.nav[t.nav.length-1]:!t.nav.length||e===t.nav[0]&&!n||e===t.nav[t.nav.length-1]&&n?null:t.nav[$A.inArray(e,t.nav)+(n?1:-1)]||null},t.range.index=t.container.querySelectorAll("td.dayInMonth"),t.setFocus.firstOpen=!0,t.setFocus(t.range.index[t.range.current.mDay-1]),t.rerendering||(p&&e.editor&&e.editor.show&&A.render(),t.openOnFocus&&$A.setAttr(f,"aria-expanded","true"),$A.setAttr(t.triggerNode,"aria-expanded","true"),setTimeout((function(){t.datepickerLoaded=!0}),750)),D=!1},helpTextShort:t,helpText:n,afterRemove:function(t){t.rerendering||(e.resetCurrent&&(t.date=new Date,t.setCurrent(t),$A.extend(!0,t.fn.current,t.range.current)),p&&y.remove(),p&&e.editor&&e.editor.show&&(A.lock=!1,A.remove()),$A.setAttr(t.triggerNode,"aria-expanded","false")),$A.isFn(e.configure)&&(t.lock=t.configureLoading=!1)}}],e)[0],y=$A(b,[{id:u+"commentTooltip",role:e.comments&&e.comments.role||"Comment",widgetType:"Datepicker",returnFocus:!1,className:e.comments&&e.comments.className||"commentTooltip",beforeRender:function(e){e.targetNode=e.parent.wrapper}}],e.comments&&e.comments.config||{})[0],A=$A(b,[{id:u+"commentAdd",role:e.editor&&e.editor.role||"Edit",widgetType:"Datepicker",className:e.editor&&e.editor.className||"commentAdd",openEditor:!1,content:'<textarea style="visibility: hidden; display: none;" class="commentTa" title="'+y.role+'"></textarea><button title="'+(e.editor&&e.editor.role||"Edit")+" "+y.role+'" class="commentBtn">'+(e.editor&&e.editor.role||"Edit")+"</button>",beforeRender:function(e){e.targetNode=e.parent.wrapper},click:function(e,t){e.stopPropagation()},duringRender:function(e){$A.setAttr(e.wrapper,{role:"dialog","aria-modal":"false","aria-label":e.role}),$A.setAttr(e.container,"role","application")},add:function(e){var t=$A.trim(e.textarea.value.replace(/<|>|\n/g," "));e.comments[e.parent.range.current.year]||(e.comments[e.parent.range.current.year]={}),e.comments[e.parent.range.current.year][e.parent.range.current.mDay]=t;var n=e.parent.range.current.mDay+", "+e.parent.range.wDays[e.parent.range.current.wDay].lng+" "+e.parent.range[e.parent.range.current.month].name+" "+e.parent.range.current.year,r="";(e.parent.range[e.parent.range.current.month].disabled[e.parent.range.current.year]&&-1!==$A.inArray(e.parent.range.current.mDay,e.parent.range[e.parent.range.current.month].disabled[e.parent.range.current.year])||e.parent.range[e.parent.range.current.month].disabled["*"]&&-1!==$A.inArray(e.parent.range.current.mDay,e.parent.range[e.parent.range.current.month].disabled["*"]))&&(r+=e.parent.disabledTxt.replace(/<|>|\"/g,"")+" "),t?($A.addClass(e.parent.current,"comment"),$A.data(e.parent.current,"_HasComment",!0),r+=e.parent.commentedTxt.replace(/<|>|\"/g,"")+" "):($A.remClass(e.parent.current,"comment"),$A.data(e.parent.current,"_HasComment",!1)),n=r+n,$A.setAttr(e.parent.current,{title:$A.trim(r),"aria-label":n+" "+t.replace(/\"/g,'"')})},reset:function(){var t=this;if(t.loaded)if(t.openEditor){t.textarea?($A.css(t.textarea,{visibility:"",display:""}),t.css("left",t.parent.wrapper.offsetLeft)):t.textarea=t.query("textarea",(function(){$A.css(this,{visibility:"",display:""}),t.css("left",t.parent.wrapper.offsetLeft),$A.on(this,{focus:function(e){y.loaded&&y.remove()},keydown:function(e){var n=$A.keyEvent(e);this.value.length>800&&(this.value=this.value.substring(0,799)),13===n?(t.parent.isAdd=!0,t.add.apply(this,[t]),t.parent.current.focus(),t.openEditor=!1,t.reset(),e.preventDefault()):27===n&&(t.parent.current.focus(),t.openEditor=!1,t.reset(),e.preventDefault())}},"."+v)}))[0],$A.setAttr(t.textarea,{title:t.parent.range.current.mDay+", "+t.parent.range.wDays[t.parent.range.current.wDay].lng+" "+t.parent.range[t.parent.range.current.month].name+" "+t.parent.range.current.year}).focus(),t.comments=t.parent.range[t.parent.range.current.month].comments;var n=t.comments[t.parent.range.current.year]&&t.comments[t.parent.range.current.year][t.parent.range.current.mDay]||t.comments["*"]&&t.comments["*"][t.parent.range.current.mDay]||"";n&&(t.textarea.value=n),$A.setAttr(t.commentBtn,{title:(e.editor&&e.editor.action1||"Save")+" "+y.role}).innerHTML=e.editor&&e.editor.action1||"Save"}else t.textarea&&(t.textarea.value="",$A.css(t.textarea,{visibility:"hidden",display:"none"})),t.css("left",t.parent.wrapper.offsetLeft+t.parent.wrapper.offsetWidth-t.wrapper.offsetWidth),$A.setAttr(t.commentBtn,{title:(e.editor&&e.editor.role||"Edit")+" "+y.role}).innerHTML=e.editor&&e.editor.role||"Edit"},afterRender:function(e){e.textarea=e.container.querySelector("textarea"),e.commentBtn=e.container.querySelector("button"),$A.on(e.commentBtn,{focus:function(e){y.loaded&&y.remove()},click:function(t){e.openEditor?(e.parent.isAdd=!0,e.add.apply(e.commentBtn,[e]),e.parent.current.focus(),e.openEditor=!1,e.reset()):(e.openEditor=!0,e.reset()),t.preventDefault()},keydown:function(t){var n=$A.keyEvent(t);if(27===n)e.openEditor&&(e.parent.current.focus(),e.openEditor=!1,e.reset()),t.preventDefault();else if(9!==n||t.altKey||t.shiftKey||t.ctrlKey)9!==n||h.alt||h.ctrl||!h.shift||($A.isHidden(A.textarea)?b.current.focus():A.textarea.focus(),t.preventDefault());else{var r=e.parent.nav[0];$A.isNode(r)?r.focus():b.current.focus(),t.preventDefault()}}},"."+v),e.reset(),e.lock=!0,$A.on(e.textarea,"keydown",(function(t){var n=$A.keyEvent(t);27===n?(e.openEditor&&(e.parent.current.focus(),e.openEditor=!1,e.reset()),t.preventDefault()):9!==n||t.altKey||t.ctrlKey||!t.shiftKey?13===n&&(e.commentBtn.click(),t.preventDefault()):(b.current.focus(),t.preventDefault())}),"."+v)},beforeRemove:function(e){e.openEditor=!1,e.textarea=null,e.parent.setFocus.firstOpen=!0},lock:!(p&&e.editor&&e.editor.show)}],e.editor&&e.editor.config||{})[0];$A.on(window,"resize",(function(e){b.setPosition(),y.setPosition(),A.setPosition(),A.reset()}),"."+v),$A.setAttr(d,"aria-expanded","false");var w=b,x=!1,C=function(){x=!1},$=function(){x||w.loaded||w.disabled?!x&&w.loaded&&(x=!0,w.remove(),l=!1,c=!1,setTimeout(C,1e3)):(x=!0,l=!1,c=!0,D=!0,$A.trigger(this,"opendatepicker"),setTimeout(C,1e3))},D=!1;$A.on(d,{click:function(e){$.call(this),e.preventDefault()},keydown:function(e){32===$A.keyEvent(e)&&($.call(this),e.preventDefault(),e.stopPropagation())}},"."+v);var T=!1;return!0===e.openOnFocus?($A.setAttr(f,"aria-expanded","false"),$A.on(f,{touchstart:function(e){T=!0,x||w.loaded||l||c||w.disabled||(x=!0,$A.trigger(d,"opendatepicker"),e.preventDefault(),setTimeout(C,1e3))},focus:function(t){!T||x||w.loaded||l||!c?x||w.loaded||l||c||w.disabled||(x=!0,$A.trigger(d,"opendatepicker"),T||setTimeout((function(){$A.announce(w.openOnFocusHelpText)}),1),setTimeout(C,1e3)):(t.preventDefault(),this.blur(),d&&$A.focus(e.returnFocusTo||d)),l=!0,c=!1},mousedown:function(e){this.blur(),l=c=!1,this.focus()},blur:function(e){w.loaded&&l&&!c&&!w.mouseWithin&&w.remove(),l=!1},keydown:function(e){var t=$A.keyEvent(e);40===t&&l&&!c&&w.loaded?(l=!1,c=!0,r?w.buttons.cMS.hidden?w.buttons.cM.hidden||w.buttons.cM.focus():w.buttons.cMS.focus():w.setFocus(w.range.index[w.range.current.mDay-1]),e.preventDefault(),e.stopPropagation()):40!==t||w.loaded||x||w.disabled?27===t&&l&&!c&&w.loaded?(l=!1,c=!1,w.remove(),e.preventDefault(),e.stopPropagation()):9===t&&l&&!c&&w.loaded&&e.shiftKey?(l=!1,c=!1,w.remove()):9===t&&l&&!c&&w.loaded&&!e.shiftKey&&(l=!1,c=!0,r?w.buttons.cMS.hidden?w.buttons.cM.hidden||w.buttons.cM.focus():w.buttons.cMS.focus():w.setFocus(w.range.index[w.range.current.mDay-1]),setTimeout((function(){$A.announce(w.helpTextShort)}),1),e.preventDefault(),e.stopPropagation()):(x=!0,l=!0,c=!1,$A.trigger(d,"opendatepicker"),setTimeout(C,1e3),l=!1,c=!0,r?w.buttons.cMS.hidden?w.buttons.cM.hidden||w.buttons.cM.focus():w.buttons.cMS.focus():w.setFocus(w.range.index[w.range.current.mDay-1]),e.preventDefault(),e.stopPropagation())}},"."+v)):$A.on(f,{touchstart:function(e){T=!0},focus:function(t){!T||x||w.loaded||l||!c||(t.preventDefault(),this.blur(),d&&$A.focus(e.returnFocusTo||d)),l=!0,c=!1}}),w.setDisabled(w,w.disabled),$A(d).describedBy(f).controls(f),$A.on("body","click",(function(e){b.datepickerLoaded&&b.remove()}),"."+v),b}})),"setDialog"in $A||($A.addWidgetProfile("Dialog",{track:[],configure:function(e){var t=this,n={};if(e.isModal&&t.track.length){var r=t.track[t.track.length-1].css("z-index")||1e3;n["z-index"]=r+2}return{style:n,isModal:!0,isAlert:!1,exposeBounds:!0,forceFocus:!0,forceFocusWithin:!0,returnFocus:!0,exposeHiddenClose:!0,circularTabbing:!0,preload:!0,preloadImages:!0,preloadCSS:!0,className:"modal",root:"body",append:!0,escToClose:!0,on:"click",click:function(e,t){e.stopPropagation()}}},role:function(e){var t={};return t.role=e.isAlert?"alertdialog":"dialog",t["aria-modal"]=e.isModal?"true":"false",t},beforeRender:function(e,t){e.isModal&&(e.backdrop=$A(this.backdrop).on({click:function(t){e.remove(),t.stopPropagation()}}).css($A.isNum(e.style["z-index"])&&e.style["z-index"]>1?{zIndex:e.style["z-index"]-1}:{}).appendTo("body").return())},afterRender:function(e,t){this.track.push(e),$A.hideBackground(e.wrapper),e.announce=!0===e.isAlert},afterRemove:function(e,t){var n=this;n.track.splice(n.track.length-1,1),n.track.length?(e.isModal&&$A.hideBackground(n.track[n.track.length-1].wrapper),e.rerouteFocus=n.track[n.track.length-1]):e.isModal&&$A.showBackground(),e.isModal&&$A.isNode(e.backdrop,null,null,11)&&$A.remove(e.backdrop)},backdrop:'<div class="modalBackdrop"></div>'}),$A.extend({setDialog:function(e,t){this._4X&&(t=e,e=this._X),$A.isPlainObject(e)&&(e=(t=e).trigger||t.content||null);var n=[],r=function(e){n.push($A.toDC(e,$A.extend({widgetType:"Dialog"},t||{})))};return e?$A.query(e,t.context||document,(function(e,t){r(t)})):r(),1===n.length?n[0]:n}})),"setDrag"in $A||$A.extend({setDrag:function(e){var t=(e=$A.extend(!0,{render:"append",sort:!1,dragula:{revertOnSpill:!0,invalid:function(e,t){return!1},accepts:function(e,t,r,a){return!!n||r!==t}},menu:{manualDrop:function(e,t,n,r,a,o){return!1},tag:{render:"append",button:'<a aria-label="Actions" class="aria-action-menu-button">&darr;</a>',menu:'<ul hidden class="drag top menu"></ul>',move:'<li><a data-action="move" class="menu-action move">Move to %DROPNAME%</a></li>',copy:'<li><a data-action="copy" class="menu-action copy">Copy to %DROPNAME%</a></li>',up:'<li><a data-action="up" class="menu-action up">Move Up</a></li>',left:'<li><a data-action="up" class="menu-action left">Move Left</a></li>',down:'<li><a data-action="down" class="menu-action down">Move Down</a></li>',right:'<li><a data-action="down" class="menu-action right">Move Right</a></li>',custom:[],customActivate:null,invalid:function(e,t,n,r){return!1}}}},e)).dragula.copy||!1,n=e.sort||e.dragula.copySortSource||!1,r=function(o,i,s){if($A.isArray(o))$A.loop(o,(function(e,t){r(t,i,s)}),"array");else{var l=$A.data(o,"actions");if(l&&($A.remove(l.button),$A.remove(l.menu),$A.destroy(l.DC)),$A.isArray(s)&&s.length){if(l={button:$A.morph(e.menu.tag.button),menu:$A.morph(e.menu.tag.menu),children:[],dragElement:o,sourceContainer:i},n){var c=$A.getOrientation(i.children),u="horizontal"===c.orientation&&!c.lineWrap;if($A.previous(o)){var d=$A.morph(e.menu.tag[u?"left":"up"]);l.children.push(d),l.menu.appendChild(d)}if($A.next(o)){var f=$A.morph(e.menu.tag[u?"right":"down"]);l.children.push(f),l.menu.appendChild(f)}}$A.loop(s,(function(n,r){var a=($A.getAttr(r,"data-dropname")||"").replace(/<|>/g,"");if(!a)throw"The drop-zone container element is missing a unique and informative data-dropname attribute.";var s=$A.morph(e.menu.tag[t?"copy":"move"].replace("%DROPNAME%",a));e.dragula.accepts(o,r,i)&&r!==i&&($A.data(s,"DropContainer",r),l.children.push(s),l.menu.appendChild(s))}),"array"),$A.loop(e.menu.tag.custom,(function(t,n){var r=$A.morph(n);e.menu.tag.invalid(o,$A.getAttr(r.firstChild,"data-action"),i)||(l.children.push(r),l.menu.appendChild(r))}),"array"),$A[e.menu.tag.render](l.button,o),$A.after(l.menu,l.button),$A(l.button).describedBy(o),$A.setKBA11Y(l.button,"button"),$A(l.button).on("click mousedown mouseup mousemove touchstart touchend touchmove",(function(e){e.stopPropagation()})),l.DC=$A.setMenu(l.button,$A.extend(!0,{toggleHide:!0,onActivate:function(r,o,s,c,u,d,f){var p=$A.data(o.parentNode,"DropContainer");s.DC.top.remove((function(){var s=$A.previous(l.dragElement),c=$A.next(l.dragElement),u=c||i,d=$A.getAttr(o,"data-action");a.emit("beforeClone",l.dragElement),!n||"up"!==d&&"down"!==d?p?a.emit("drop",l.dragElement,p,i,c,(function(){e.menu.manualDrop(l.dragElement,p,i,d,l,u)||$A[e.render](t?l.dragElement.cloneNode(!0):l.dragElement,p),a.emit("dragend",l.dragElement),$A.data(c,"actions")&&(u=$A.data(c,"actions").button),$A.focus(u)})):$A.isFn(e.menu.tag.customActivate)&&(e.menu.manualDrop(l.dragElement,p,i,d,l,c)||e.menu.tag.customActivate(r,l.dragElement,i,d,l,u),a.emit("dragend",l.dragElement),$A.data(c,"actions")&&(u=$A.data(c,"actions").button),$A.focus(u)):a.emit("drop",l.dragElement,p,i,c,(function(){e.menu.manualDrop(l.dragElement,p,i,d,l,u)||("up"===d?($A.before(l.dragElement,s),a.emit("dragend",l.dragElement),$A.data(l.dragElement,"actions")&&(u=$A.data(l.dragElement,"actions").button),$A.focus(u)):"down"===d&&($A.after(l.dragElement,c),a.emit("dragend",l.dragElement),$A.data(l.dragElement,"actions")&&(u=$A.data(l.dragElement,"actions").button),$A.focus(u)))}))}))},animate:{onRender:function(e,t,n){Velocity(t,"transition.slideUpIn",{complete:function(){n()}})},onRemove:function(e,t,n){Velocity(t,"transition.slideUpOut",{complete:function(){n()}})}},click:function(e,t){e.stopPropagation()},mouseDown:function(e,t){e.stopPropagation()},mouseUp:function(e,t){e.stopPropagation()},mouseMove:function(e,t){e.stopPropagation()},touchStart:function(e,t){e.stopPropagation()},touchEnd:function(e,t){e.stopPropagation()},touchMove:function(e,t){e.stopPropagation()}},e.menu)),$A.data(o,"actions",l)}}},a=dragula(e.dragula).on("beforeClone",(function(e){r(e)})).on("drop",(function(e,t,n,r,a){$A.isFn(a)&&a()})).on("dragend",(function(e){o()})),o=function(){$A.loop(a.containers,(function(e,t){r(t.children,t,a.containers)}),"array")};return o(),a},unsetDrag:function(e){$A.loop(e.containers,(function(e,t){$A.loop(t.children,(function(e,t){var n=$A.data(t,"actions");n&&($A.remove(n.button),$A.remove(n.menu),$A.destroy(n.DC))}),"array")}),"array"),e.destroy()}}),"setFootnotes"in $A||$A.extend({setFootnotes:function(e,t){return this._4X&&(t=e,e=this._X),$A.isPlainObject(e)&&(e=(t=e).footnotes||null),e?($A.query(e,t.context||document,(function(e,t){$A(t).flowsTo($A.getAttr(t,"href")),$A.svgFix(t)})),e=$A.setSkipLink(e,t),$A._XR.call(this,e)):null}}),
 /*@license
 ARIA Grid Module 2.0 for Apex 4X
 Author: Bryan Garaventa (https://www.linkedin.com/in/bgaraventa)
diff --git a/Format.sh b/Format.sh
index 4d546206..316149de 100644
--- a/Format.sh
+++ b/Format.sh
@@ -1,5 +1,5 @@
 #!/bin/bash
-prettier --write "4X\\4X.Max.js" 2>> FormatErrors.txt
+prettier --write "4X\\4X.Max.js" 2> FormatErrors.txt
 prettier --write "4X\\4X.Max.Export.js" 2>> FormatErrors.txt
 prettier --write "index.js" 2>> FormatErrors.txt
 prettier --write "rollup.config.js" 2>> FormatErrors.txt
@@ -7,7 +7,7 @@ prettier --write ".\/**\/*.css" 2>> FormatErrors.txt
 prettier --write ".\/4X\/Modules\/*{.js,.json}" 2>> FormatErrors.txt
 prettier --write ".\/4X\/Standard\/Modules\/*{.js,.json}" 2>> FormatErrors.txt
 prettier --write ".\/Templates\/**\/*{.js,.json}" 2>> FormatErrors.txt
-js-beautify -r --type="html" ".\/**\/*.{htm,html}" 2>> FormatErrors.txt
+prettier --write "**/*.htm" "**/*.html" 2>> FormatErrors.txt
 uglifyjs 4X\/4X.Max.js --comments --compress --mangle --output 4X\/4X.js 2>> FormatErrors.txt
 uglifyjs 4X\/Modules\/AccName.js --comments --compress --mangle --output 4X\/Min\/AccName.js 2>> FormatErrors.txt
 uglifyjs 4X\/Modules\/Accordion.js --comments --compress --mangle --output 4X\/Min\/Accordion.js 2>> FormatErrors.txt
diff --git a/FormatInstall.sh b/FormatInstall.sh
index 9d6e128d..f42ad279 100644
--- a/FormatInstall.sh
+++ b/FormatInstall.sh
@@ -1,5 +1,4 @@
 #!/bin/bash
 npm audit fix --force
 npm -g install prettier
-npm -g install js-beautify
 npm -g install uglify-js
\ No newline at end of file
diff --git a/Help/Module Dependency Index.txt b/Help/Module Dependency Index.txt
new file mode 100644
index 00000000..81fce963
--- /dev/null
+++ b/Help/Module Dependency Index.txt	
@@ -0,0 +1,35 @@
+Core: 4X.js - REQUIRED!
+
+Module file: CurrentDevice.js - Has no dependencies; is common dependency of other modules.
+Module file: Dragdealer.js - Has no dependencies; is common dependency of other modules.
+Module file: Dragula.js - Requires Dragula.css; is common dependency of other modules.
+Module file: TinySlider.js - Requires TinySlider.css; is common dependency of other modules.
+Module file: Velocity.js - Has no dependencies; is common dependency of other modules.
+Module file: VelocityUI.js - Requires Velocity.js; is common dependency of other modules.
+Module file: AccName.js - Has no dependencies; is common dependency of other modules.
+Module file: Animate.js - Requires Velocity.js, VelocityUI.js; is common dependency of other modules.
+Module file: RovingTabIndex.js - Requires AccName.js; is common dependency of other modules.
+Module file: SmoothScroll.js - Requires Velocity.js, VelocityUI.js, Animate.js; is common dependency of other modules.
+Module file: Beep.js - Has no dependencies.
+
+Module file: Accordion.js - Requires AccName.js, RovingTabIndex.js.
+Module file: Button.js - Requires AccName.js, RovingTabIndex.js.
+Module file: Carousel.js - Requires TinySlider.css, TinySlider.js.
+Module file: Combobox.js - Requires Velocity.js, VelocityUI.js, Animate.js, SmoothScroll.js, AccName.js, CurrentDevice.js.
+Module file: Datepicker.js - Has no dependencies.
+Module file: Dialog.js - Has no dependencies.
+Module file: Drag.js - Requires Dragula.css, Dragula.js, Velocity.js, VelocityUI.js, Animate.js, AccName.js, RovingTabIndex.js, Menu.js.
+Module file: Footnote.js - Requires Velocity.js, VelocityUI.js, Animate.js, SmoothScroll.js.
+Module file: Grid.js - Has no dependencies.
+Module file: Listbox.js - Requires AccName.js, RovingTabIndex.js.
+Module file: Menu.js - Requires AccName.js, RovingTabIndex.js.
+Module file: Popup.js - Has no dependencies.
+Module file: Slider.js - Requires CurrentDevice.js, Dragdealer.js.
+Module file: Tab.js - Requires AccName.js, RovingTabIndex.js.
+Module file: Tooltip.js - Has no dependencies.
+Module file: Tree.js - Requires AccName.js, RovingTabIndex.js.
+
+Module file: Straylight.js - Requires all other widget modules.
+
+Module file: Dragula.css - Requires Dragula.js.
+Module file: TinySlider.css - Requires TinySlider.js.
\ No newline at end of file
diff --git a/Help/Module Imports/Dynamic Components/Accordion.txt b/Help/Module Imports/Widgets/Accordion.txt
similarity index 99%
rename from Help/Module Imports/Dynamic Components/Accordion.txt
rename to Help/Module Imports/Widgets/Accordion.txt
index ede56a41..2175500f 100644
--- a/Help/Module Imports/Dynamic Components/Accordion.txt	
+++ b/Help/Module Imports/Widgets/Accordion.txt	
@@ -63,6 +63,8 @@ $A.setAccordion( DOM-NodeList-or-CSS-Selector-forTriggering-Elements , {
 // Configure functionality key / value mappings
 });
 
+Module file: Accordion.js - Requires AccName.js, RovingTabIndex.js.
+
 Parameters
 
 1: A DOM element list or CSS selector to specify the group of triggering elements.
diff --git a/Help/Module Imports/Dynamic Components/Button.txt b/Help/Module Imports/Widgets/Button.txt
similarity index 98%
rename from Help/Module Imports/Dynamic Components/Button.txt
rename to Help/Module Imports/Widgets/Button.txt
index d4b6bb44..0abea5c5 100644
--- a/Help/Module Imports/Dynamic Components/Button.txt	
+++ b/Help/Module Imports/Widgets/Button.txt	
@@ -52,6 +52,8 @@ $A.setButton( DOM-Node-or-CSS-Selector-forTriggering-Element , {
 // Configure functionality key / value mappings
 });
 
+Module file: Button.js - Requires AccName.js, RovingTabIndex.js.
+
 Parameters
 
 1: A DOM element or CSS selector to specify the triggering element.
diff --git a/Help/Module Imports/Dynamic Components/Carousel.txt b/Help/Module Imports/Widgets/Carousel.txt
similarity index 99%
rename from Help/Module Imports/Dynamic Components/Carousel.txt
rename to Help/Module Imports/Widgets/Carousel.txt
index 81423dda..f48499d8 100644
--- a/Help/Module Imports/Dynamic Components/Carousel.txt	
+++ b/Help/Module Imports/Widgets/Carousel.txt	
@@ -42,6 +42,8 @@ container: ".my-slider"
 // Configure functionality key / value mappings
 });
 
+Module file: Carousel.js - Requires TinySlider.css, TinySlider.js.
+
 Parameters
 
 1: A configuration map to customize behaviors and options.
diff --git a/Help/Module Imports/Dynamic Components/Checkbox.txt b/Help/Module Imports/Widgets/Checkbox.txt
similarity index 98%
rename from Help/Module Imports/Dynamic Components/Checkbox.txt
rename to Help/Module Imports/Widgets/Checkbox.txt
index 2f487f71..aa5232a3 100644
--- a/Help/Module Imports/Dynamic Components/Checkbox.txt	
+++ b/Help/Module Imports/Widgets/Checkbox.txt	
@@ -52,6 +52,8 @@ $A.setCheckbox( DOM-Node-or-CSS-Selector-forTriggering-Element , {
 // Configure functionality key / value mappings
 });
 
+Module file: Button.js - Requires AccName.js, RovingTabIndex.js.
+
 Parameters
 
 1: A DOM element or CSS selector to specify the triggering element.
diff --git a/Help/Module Imports/Dynamic Components/Combobox.txt b/Help/Module Imports/Widgets/Combobox.txt
similarity index 98%
rename from Help/Module Imports/Dynamic Components/Combobox.txt
rename to Help/Module Imports/Widgets/Combobox.txt
index 61f94239..7eb33a08 100644
--- a/Help/Module Imports/Dynamic Components/Combobox.txt	
+++ b/Help/Module Imports/Widgets/Combobox.txt	
@@ -69,6 +69,8 @@ var myCombobox = new $A.Combobox({
 
 myCombobox.start();
 
+Module file: Combobox.js - Requires Velocity.js, VelocityUI.js, Animate.js, SmoothScroll.js, AccName.js, CurrentDevice.js.
+
 Parameters
 
 1: A configuration map to customize behaviors and options.
diff --git a/Help/Module Imports/Dynamic Components/Datepicker.txt b/Help/Module Imports/Widgets/Datepicker.txt
similarity index 99%
rename from Help/Module Imports/Dynamic Components/Datepicker.txt
rename to Help/Module Imports/Widgets/Datepicker.txt
index 85841d24..41e6220e 100644
--- a/Help/Module Imports/Dynamic Components/Datepicker.txt	
+++ b/Help/Module Imports/Widgets/Datepicker.txt	
@@ -30,6 +30,8 @@ var myCalendarDC = $A.setDatepicker({
 // Configuration key / value map
 });
 
+Module file: Datepicker.js - Has no dependencies.
+
 Parameters
 
 1: A configuration map to customize behaviors and options.
diff --git a/Help/Module Imports/Dynamic Components/Dialog.txt b/Help/Module Imports/Widgets/Dialog.txt
similarity index 99%
rename from Help/Module Imports/Dynamic Components/Dialog.txt
rename to Help/Module Imports/Widgets/Dialog.txt
index 8fbe48b0..406ddb76 100644
--- a/Help/Module Imports/Dynamic Components/Dialog.txt	
+++ b/Help/Module Imports/Widgets/Dialog.txt	
@@ -39,6 +39,8 @@ var myDialogDC = $A.setDialog( domNodeOrCSSSelector, {
 // Configure functionality key / value mappings
 });
 
+Module file: Dialog.js - Has no dependencies.
+
 Parameters
 
 1: A DOM node or CSS selector to specify either the dialog container element or the dialog triggering element. If referencing a triggering element, the data-controls attribute can be used to specify the id of the associated dialog container.
diff --git a/Help/Module Imports/Dynamic Components/Drag.txt b/Help/Module Imports/Widgets/Drag.txt
similarity index 98%
rename from Help/Module Imports/Dynamic Components/Drag.txt
rename to Help/Module Imports/Widgets/Drag.txt
index cfab6162..23d14ecd 100644
--- a/Help/Module Imports/Dynamic Components/Drag.txt	
+++ b/Help/Module Imports/Widgets/Drag.txt	
@@ -57,6 +57,8 @@ drake.on("dragend", function(dragElement) {
 // DOM element "originalDragElement" was cloned as "dragElementClone", of "type" ('mirror' or 'copy'). Fired for mirror images and when "copy: true"
 });
 
+Module file: Drag.js - Requires Dragula.css, Dragula.js, Velocity.js, VelocityUI.js, Animate.js, AccName.js, RovingTabIndex.js, Menu.js.
+
 Parameters
 
 1: A configuration map to customize behaviors and options.
diff --git a/Help/Module Imports/Dynamic Components/Footnote.txt b/Help/Module Imports/Widgets/Footnote.txt
similarity index 94%
rename from Help/Module Imports/Dynamic Components/Footnote.txt
rename to Help/Module Imports/Widgets/Footnote.txt
index 06d70d97..48e156ef 100644
--- a/Help/Module Imports/Dynamic Components/Footnote.txt	
+++ b/Help/Module Imports/Widgets/Footnote.txt	
@@ -30,6 +30,8 @@ $A.setFootnotes( DOM-NodeList-or-CSS-Selector-forFootnote-Links , {
 // Configuration key / value map
 });
 
+Module file: Footnote.js - Requires Velocity.js, VelocityUI.js, Animate.js, SmoothScroll.js.
+
 Parameters
 
 1: A DOM element list or CSS selector to specify the footnote triggering elements.
diff --git a/Help/Module Imports/Dynamic Components/Grid.txt b/Help/Module Imports/Widgets/Grid.txt
similarity index 99%
rename from Help/Module Imports/Dynamic Components/Grid.txt
rename to Help/Module Imports/Widgets/Grid.txt
index b674d850..1aa07904 100644
--- a/Help/Module Imports/Dynamic Components/Grid.txt	
+++ b/Help/Module Imports/Widgets/Grid.txt	
@@ -27,6 +27,8 @@ var grid = new $A.Grid("dataGridId");
 
 grid.open();
 
+Module file: Grid.js - Has no dependencies.
+
 Parameters
 
 1: An id reference pointing to the grid container element.
diff --git a/Help/Module Imports/Dynamic Components/Listbox.txt b/Help/Module Imports/Widgets/Listbox.txt
similarity index 99%
rename from Help/Module Imports/Dynamic Components/Listbox.txt
rename to Help/Module Imports/Widgets/Listbox.txt
index 9d3384d0..a4833c29 100644
--- a/Help/Module Imports/Dynamic Components/Listbox.txt	
+++ b/Help/Module Imports/Widgets/Listbox.txt	
@@ -50,6 +50,8 @@ var myListboxDC = $A.setListbox({
 // Configuration key / value mappings
 });
 
+Module file: Listbox.js - Requires AccName.js, RovingTabIndex.js.
+
 Parameters
 
 1: A configuration map to customize behaviors and options.
diff --git a/Help/Module Imports/Dynamic Components/Menu.txt b/Help/Module Imports/Widgets/Menu.txt
similarity index 99%
rename from Help/Module Imports/Dynamic Components/Menu.txt
rename to Help/Module Imports/Widgets/Menu.txt
index 7fd6a3b9..d78b9eb5 100644
--- a/Help/Module Imports/Dynamic Components/Menu.txt	
+++ b/Help/Module Imports/Widgets/Menu.txt	
@@ -86,6 +86,8 @@ var myMenuDC = $A.setMenu( DOM-Node-or-CSS-Selector-forTriggering-Element , {
 // Configure functionality key / value mappings
 });
 
+Module file: Menu.js - Requires AccName.js, RovingTabIndex.js.
+
 Parameters
 
 1: A DOM element or CSS selector to specify the triggering element.
diff --git a/Help/Module Imports/Dynamic Components/Popup.txt b/Help/Module Imports/Widgets/Popup.txt
similarity index 99%
rename from Help/Module Imports/Dynamic Components/Popup.txt
rename to Help/Module Imports/Widgets/Popup.txt
index 0050d586..048b7aa1 100644
--- a/Help/Module Imports/Dynamic Components/Popup.txt	
+++ b/Help/Module Imports/Widgets/Popup.txt	
@@ -38,6 +38,8 @@ var myPopupDC = $A.setPopup( "#popupTriggerId", {
   // Configure functionality key / value mappings
 });
 
+Module file: Popup.js - Has no dependencies.
+
 Parameters
 
 1: A DOM element or CSS selector to specify the triggering element.
diff --git a/Help/Module Imports/Dynamic Components/Radio.txt b/Help/Module Imports/Widgets/Radio.txt
similarity index 98%
rename from Help/Module Imports/Dynamic Components/Radio.txt
rename to Help/Module Imports/Widgets/Radio.txt
index 0e7d5517..37d404df 100644
--- a/Help/Module Imports/Dynamic Components/Radio.txt	
+++ b/Help/Module Imports/Widgets/Radio.txt	
@@ -47,6 +47,8 @@ $A.setRadio( DOM-Node-or-CSS-Selector-forTriggering-Element , {
 // Configure functionality key / value mappings
 });
 
+Module file: Button.js - Requires AccName.js, RovingTabIndex.js.
+
 Parameters
 
 1: A DOM element or CSS selector to specify the triggering element.
diff --git a/Help/Module Imports/Dynamic Components/Slider.txt b/Help/Module Imports/Widgets/Slider.txt
similarity index 98%
rename from Help/Module Imports/Dynamic Components/Slider.txt
rename to Help/Module Imports/Widgets/Slider.txt
index 828d46c0..7db0d472 100644
--- a/Help/Module Imports/Dynamic Components/Slider.txt	
+++ b/Help/Module Imports/Widgets/Slider.txt	
@@ -21,6 +21,8 @@ var ariaSlider = new $A.Slider(".slider.bar", {
 // Configure functionality key / value mappings
 });
 
+Module file: Slider.js - Requires CurrentDevice.js, Dragdealer.js.
+
 Parameters
 
 1: A DOM element or CSS selector to specify the slider handle's container (slideBar) element.
diff --git a/Help/Module Imports/Dynamic Components/Switch.txt b/Help/Module Imports/Widgets/Switch.txt
similarity index 98%
rename from Help/Module Imports/Dynamic Components/Switch.txt
rename to Help/Module Imports/Widgets/Switch.txt
index 59031fc8..ad0a346e 100644
--- a/Help/Module Imports/Dynamic Components/Switch.txt	
+++ b/Help/Module Imports/Widgets/Switch.txt	
@@ -46,6 +46,8 @@ $A.setSwitch( DOM-Node-or-CSS-Selector-forTriggering-Element , {
 // Configure functionality key / value mappings
 });
 
+Module file: Button.js - Requires AccName.js, RovingTabIndex.js.
+
 Parameters
 
 1: A DOM element or CSS selector to specify the triggering element.
diff --git a/Help/Module Imports/Dynamic Components/Tab.txt b/Help/Module Imports/Widgets/Tab.txt
similarity index 99%
rename from Help/Module Imports/Dynamic Components/Tab.txt
rename to Help/Module Imports/Widgets/Tab.txt
index 2a9e5167..d02b4cf7 100644
--- a/Help/Module Imports/Dynamic Components/Tab.txt	
+++ b/Help/Module Imports/Widgets/Tab.txt	
@@ -60,6 +60,8 @@ $A.setTab( DOM-NodeList-or-CSS-Selector-forTriggering-Elements , {
 // Configure functionality key / value mappings
 });
 
+Module file: Tab.js - Requires AccName.js, RovingTabIndex.js.
+
 Parameters
 
 1: A DOM element list or CSS selector to specify the group of triggering elements.
diff --git a/Help/Module Imports/Dynamic Components/Tooltip.txt b/Help/Module Imports/Widgets/Tooltip.txt
similarity index 99%
rename from Help/Module Imports/Dynamic Components/Tooltip.txt
rename to Help/Module Imports/Widgets/Tooltip.txt
index 2519379a..f01fd57d 100644
--- a/Help/Module Imports/Dynamic Components/Tooltip.txt	
+++ b/Help/Module Imports/Widgets/Tooltip.txt	
@@ -64,6 +64,8 @@ var myTooltipDC = $A.setTooltip( DOM-Node-or-CSS-Selector-forTriggering-Element
   // Configure functionality key / value mappings
 });
 
+Module file: Tooltip.js - Has no dependencies.
+
 Parameters
 
 1: A DOM element or CSS selector to specify the triggering element.
diff --git a/Help/Module Imports/Dynamic Components/Tree.txt b/Help/Module Imports/Widgets/Tree.txt
similarity index 98%
rename from Help/Module Imports/Dynamic Components/Tree.txt
rename to Help/Module Imports/Widgets/Tree.txt
index 12de25aa..4ae99a06 100644
--- a/Help/Module Imports/Dynamic Components/Tree.txt	
+++ b/Help/Module Imports/Widgets/Tree.txt	
@@ -73,6 +73,8 @@ var myTreeDC = $A.setTree( DOM-Node-or-CSS-Selector-forRoot-Container, {
 // Configure functionality key / value mappings
 });
 
+Module file: Tree.js - Requires AccName.js, RovingTabIndex.js.
+
 Parameters
 
 1: A DOM element or CSS selector to specify the top level container element of the tree structure.
diff --git a/Templates/Accordions/External - Straylight/files/accordions.htm b/Templates/Accordions/External - Straylight/files/accordions.htm
index f33b1b2e..2bf272c2 100644
--- a/Templates/Accordions/External - Straylight/files/accordions.htm	
+++ b/Templates/Accordions/External - Straylight/files/accordions.htm	
@@ -1,19 +1,15 @@
 <html>
-
-<body>
-
+  <body>
     <div hidden class="content" id="accordion-sect1">
-        <p>Section One Content</p>
+      <p>Section One Content</p>
     </div>
 
     <div hidden class="content" id="accordion-sect2">
-        <p>Section Two Content</p>
+      <p>Section Two Content</p>
     </div>
 
     <div hidden class="content" id="accordion-sect3">
-        <p>Section Three Content</p>
+      <p>Section Three Content</p>
     </div>
-
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/Accordions/External - Straylight/index.htm b/Templates/Accordions/External - Straylight/index.htm
index 51114cc4..47bd62a9 100644
--- a/Templates/Accordions/External - Straylight/index.htm	
+++ b/Templates/Accordions/External - Straylight/index.htm	
@@ -1,54 +1,85 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Accordion (Straylight External Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/accordion.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Accordion (Straylight External Content) - Apex 4X Technical Style
+      Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/accordion.css" />
     <script src="/4X/4X.js#Straylight"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External%20-%20Straylight/index.htm" aria-current="page">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal%20-%20Straylight/index.htm">Internal - Straylight</a></li>
-                        <li><a href="../Internal%20-%20Single%20Tab%20Stop/index.htm">Internal - Single Tab Stop</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <!-- Attributes explained:
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a
+                  href="../External%20-%20Straylight/index.htm"
+                  aria-current="page"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal%20-%20Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Internal%20-%20Single%20Tab%20Stop/index.htm"
+                  >Internal - Single Tab Stop</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <!-- Attributes explained:
             * data-controls : The resource path and pointer to the ID attribute of the accordion content container element.
             * data-root : The ID attribute of the container element where the accordion content will be inserted when rendered. (This must not be inside the triggering element)
             * data-name : The shared group name that links all associated accordion triggering elements together.
@@ -60,98 +91,159 @@ <h2>Template Examples</h2>
 
 All other 4X API features are available as documented in the folder: /Help/DC API from the root folder.
             -->
-                <div class="demo-block flex-container">
-                    <div class="aria-accordion component flex-item">
-                        <h1 class="pageTitle">ARIA Accordion <small>(Straylight External Content)</small></h1>
-                        <h2>
-                            <button class="aria-accordion-trigger" data-name="SharedGroupName" data-controls="files/accordions.htm#accordion-sect1" data-root="sect1" data-active id="accordion1id">
-                                Section One
-                            </button>
-                        </h2>
-                        <div id="sect1" class="insertContent"></div>
-                        <h2>
-                            <button class="aria-accordion-trigger" data-name="SharedGroupName" data-controls="files/accordions.htm#accordion-sect2" data-root="sect2" id="accordion2id">
-                                Section Two
-                            </button>
-                        </h2>
-                        <div id="sect2" class="insertContent"></div>
-                        <h2>
-                            <button aria-disabled="true" title="Disabled" class="aria-accordion-trigger" data-name="SharedGroupName" data-controls="files/accordions.htm#accordion-sect3" data-root="sect3" id="accordion3id">
-                                Section Three
-                            </button>
-                        </h2>
-                        <div id="sect3" class="insertContent"></div>
-                        <div class="note">
-                            <p>The third (Section Three) accordion section is deliberately disabled.</p>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The accordion controls are keyboard accessible:</h2>
-                        <ul>
-                            <li>Press <kbd>Tab</kbd> to navigate between accordion controls.</li>
-                            <li>Press <kbd>Enter</kbd> to expand an accordion section.</li>
-                            <li>Mouse users can click the desired accordion as usual to activate.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+          <div class="demo-block flex-container">
+            <div class="aria-accordion component flex-item">
+              <h1 class="pageTitle">
+                ARIA Accordion <small>(Straylight External Content)</small>
+              </h1>
+              <h2>
+                <button
+                  class="aria-accordion-trigger"
+                  data-name="SharedGroupName"
+                  data-controls="files/accordions.htm#accordion-sect1"
+                  data-root="sect1"
+                  data-active
+                  id="accordion1id"
+                >
+                  Section One
+                </button>
+              </h2>
+              <div id="sect1" class="insertContent"></div>
+              <h2>
+                <button
+                  class="aria-accordion-trigger"
+                  data-name="SharedGroupName"
+                  data-controls="files/accordions.htm#accordion-sect2"
+                  data-root="sect2"
+                  id="accordion2id"
+                >
+                  Section Two
+                </button>
+              </h2>
+              <div id="sect2" class="insertContent"></div>
+              <h2>
+                <button
+                  aria-disabled="true"
+                  title="Disabled"
+                  class="aria-accordion-trigger"
+                  data-name="SharedGroupName"
+                  data-controls="files/accordions.htm#accordion-sect3"
+                  data-root="sect3"
+                  id="accordion3id"
+                >
+                  Section Three
+                </button>
+              </h2>
+              <div id="sect3" class="insertContent"></div>
+              <div class="note">
+                <p>
+                  The third (Section Three) accordion section is deliberately
+                  disabled.
+                </p>
+              </div>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>The accordion controls are keyboard accessible:</h2>
+              <ul>
+                <li>
+                  Press <kbd>Tab</kbd> to navigate between accordion controls.
+                </li>
+                <li>Press <kbd>Enter</kbd> to expand an accordion section.</li>
+                <li>
+                  Mouse users can click the desired accordion as usual to
+                  activate.
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Accordions/External/files/accordions.htm b/Templates/Accordions/External/files/accordions.htm
index b4f33220..bc0d4689 100644
--- a/Templates/Accordions/External/files/accordions.htm
+++ b/Templates/Accordions/External/files/accordions.htm
@@ -1,45 +1,37 @@
 <html>
-
-<body>
+  <body>
     <div id="accordion-sect1">
-        <p>
-            Section One Content
-        </p>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                // alert(DC.id);
-            })();
-        </script>
+      <p>Section One Content</p>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          // alert(DC.id);
+        })();
+      </script>
     </div>
     <div id="accordion-sect2">
-        <p>
-            Section Two Content
-        </p>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                // alert(DC.id);
-            })();
-        </script>
+      <p>Section Two Content</p>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          // alert(DC.id);
+        })();
+      </script>
     </div>
     <div id="accordion-sect3">
-        <p>
-            Section Three Content
-        </p>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                // alert(DC.id);
-            })();
-        </script>
+      <p>Section Three Content</p>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          // alert(DC.id);
+        })();
+      </script>
     </div>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/Accordions/External/index.htm b/Templates/Accordions/External/index.htm
index 852c5296..8198a9b2 100644
--- a/Templates/Accordions/External/index.htm
+++ b/Templates/Accordions/External/index.htm
@@ -1,55 +1,83 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Accordion (External Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/accordion.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Accordion (External Content) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/accordion.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="index.htm" aria-current="page">External</a></li>
-                        <li><a href="../External%20-%20Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal%20-%20Straylight/index.htm">Internal - Straylight</a></li>
-                        <li><a href="../Internal%20-%20Single%20Tab%20Stop/index.htm">Internal - Single Tab Stop</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <!-- Attributes explained:
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="index.htm" aria-current="page">External</a></li>
+              <li>
+                <a href="../External%20-%20Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal%20-%20Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Internal%20-%20Single%20Tab%20Stop/index.htm"
+                  >Internal - Single Tab Stop</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <!-- Attributes explained:
             * data-controls : The resource path and pointer to the ID attribute of the accordion content container element.
             * data-root : The ID attribute of the container element where the accordion content will be inserted when rendered. (This must not be inside the triggering element)
             * data-active : Specifies that the referenced accordion node will open automatically. Only one accordion node per group should include this attribute.
@@ -58,98 +86,156 @@ <h2>Template Examples</h2>
 
 All other 4X API features are available as documented in the folder: /Help/DC API from the root folder.
             -->
-                <div class="demo-block flex-container">
-                    <div class="aria-accordion component flex-item">
-                        <h1 class="pageTitle">ARIA Accordion <small>(External Content)</small></h1>
-                        <h2>
-                            <button class="aria-accordion-trigger" data-controls="files/accordions.htm#accordion-sect1" data-root="sect1" data-active id="accordion1id">
-                                Section One
-                            </button>
-                        </h2>
-                        <div id="sect1" class="insertContent"></div>
-                        <h2>
-                            <button class="aria-accordion-trigger" data-controls="files/accordions.htm#accordion-sect2" data-root="sect2" id="accordion2id">
-                                Section Two
-                            </button>
-                        </h2>
-                        <div id="sect2" class="insertContent"></div>
-                        <h2>
-                            <button aria-disabled="true" title="Disabled" class="aria-accordion-trigger" data-controls="files/accordions.htm#accordion-sect3" data-root="sect3" id="accordion3id">
-                                Section Three
-                            </button>
-                        </h2>
-                        <div id="sect3" class="insertContent"></div>
-                        <div class="note">
-                            <p>The third (Section Three) accordion section is deliberately disabled.</p>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The accordion controls are keyboard accessible:</h2>
-                        <ul>
-                            <li>Press <kbd>Tab</kbd> to navigate between accordion controls.</li>
-                            <li>Press <kbd>Enter</kbd> to expand an accordion section.</li>
-                            <li>Mouse users can click the desired accordion as usual to activate.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+          <div class="demo-block flex-container">
+            <div class="aria-accordion component flex-item">
+              <h1 class="pageTitle">
+                ARIA Accordion <small>(External Content)</small>
+              </h1>
+              <h2>
+                <button
+                  class="aria-accordion-trigger"
+                  data-controls="files/accordions.htm#accordion-sect1"
+                  data-root="sect1"
+                  data-active
+                  id="accordion1id"
+                >
+                  Section One
+                </button>
+              </h2>
+              <div id="sect1" class="insertContent"></div>
+              <h2>
+                <button
+                  class="aria-accordion-trigger"
+                  data-controls="files/accordions.htm#accordion-sect2"
+                  data-root="sect2"
+                  id="accordion2id"
+                >
+                  Section Two
+                </button>
+              </h2>
+              <div id="sect2" class="insertContent"></div>
+              <h2>
+                <button
+                  aria-disabled="true"
+                  title="Disabled"
+                  class="aria-accordion-trigger"
+                  data-controls="files/accordions.htm#accordion-sect3"
+                  data-root="sect3"
+                  id="accordion3id"
+                >
+                  Section Three
+                </button>
+              </h2>
+              <div id="sect3" class="insertContent"></div>
+              <div class="note">
+                <p>
+                  The third (Section Three) accordion section is deliberately
+                  disabled.
+                </p>
+              </div>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>The accordion controls are keyboard accessible:</h2>
+              <ul>
+                <li>
+                  Press <kbd>Tab</kbd> to navigate between accordion controls.
+                </li>
+                <li>Press <kbd>Enter</kbd> to expand an accordion section.</li>
+                <li>
+                  Mouse users can click the desired accordion as usual to
+                  activate.
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Accordions/Internal - Single Tab Stop/index.htm b/Templates/Accordions/Internal - Single Tab Stop/index.htm
index a88c5ed6..d7c78c02 100644
--- a/Templates/Accordions/Internal - Single Tab Stop/index.htm	
+++ b/Templates/Accordions/Internal - Single Tab Stop/index.htm	
@@ -1,55 +1,86 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Single Tab Stop ARIA Accordion (Internal Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/accordion.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Single Tab Stop ARIA Accordion (Internal Content) - Apex 4X Technical
+      Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/accordion.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External%20-%20Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal%20-%20Straylight/index.htm">Internal - Straylight</a></li>
-                        <li><a href="../Internal%20-%20Single%20Tab%20Stop/index.htm" aria-current="page">Internal - Single Tab Stop</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <!-- Attributes explained:
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External%20-%20Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal%20-%20Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Internal%20-%20Single%20Tab%20Stop/index.htm"
+                  aria-current="page"
+                  >Internal - Single Tab Stop</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <!-- Attributes explained:
             * data-controls : The resource path and pointer to the ID attribute of the accordion content container element.
             * data-root : The ID attribute of the container element where the accordion content will be inserted when rendered. (This must not be inside the triggering element)
             * data-active : Specifies that the referenced accordion node will open automatically. Only one accordion node per group should include this
@@ -59,119 +90,173 @@ <h2>Template Examples</h2>
             E.G $A(uniqueID).render();
 
 All other 4X API features are available as documented in the folder: /Help/DC API from the root folder.-->
-                <div class="demo-block flex-container">
-                    <div class="aria-accordion component flex-item">
-                        <h1 class="pageTitle">Single Tab Stop ARIA Accordion <small>(Internal Content)</small></h1>
-                        <h2>
-                            <button class="aria-accordion-trigger" data-controls="accordion-sect1" data-root="sect1" data-active id="accordion1id">
-                                Section One
-                            </button>
-                        </h2>
-                        <div id="sect1" class="insertContent">
-
-                            <div hidden class="content" id="accordion-sect1">
-                                <p>Section One Content</p>
-                            </div>
-
-                        </div>
-                        <h2>
-                            <button class="aria-accordion-trigger" data-controls="accordion-sect2" data-root="sect2" id="accordion2id">
-                                Section Two
-                            </button>
-                        </h2>
-                        <div id="sect2" class="insertContent">
-
-                            <div hidden class="content" id="accordion-sect2">
-                                <p>Section Two Content</p>
-                            </div>
-
-                        </div>
-                        <h2>
-                            <button aria-disabled="true" title="Disabled" class="aria-accordion-trigger" data-controls="accordion-sect3" data-root="sect3" id="accordion3id">
-                                Section Three
-                            </button>
-                        </h2>
-                        <div id="sect3" class="insertContent">
-
-                            <div hidden class="content" id="accordion-sect3">
-                                <p>Section Three Content</p>
-                            </div>
-
-                        </div>
-
-                        <div class="note">
-                            <p>The third (Section Three) accordion section is deliberately disabled.</p>
-                        </div>
-
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The accordion controls are keyboard accessible:</h2>
-                        <ul>
-                            <li>Press <kbd>Tab</kbd> to navigate to the first accordion control.</li>
-                            <li>Press the Arrow keys to move focus between accordion controls.</li>
-                            <li>Press <kbd>Enter</kbd> to expand an accordion section.</li>
-                            <li>Mouse users can click the desired accordion as usual to activate.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
+          <div class="demo-block flex-container">
+            <div class="aria-accordion component flex-item">
+              <h1 class="pageTitle">
+                Single Tab Stop ARIA Accordion <small>(Internal Content)</small>
+              </h1>
+              <h2>
+                <button
+                  class="aria-accordion-trigger"
+                  data-controls="accordion-sect1"
+                  data-root="sect1"
+                  data-active
+                  id="accordion1id"
+                >
+                  Section One
+                </button>
+              </h2>
+              <div id="sect1" class="insertContent">
+                <div hidden class="content" id="accordion-sect1">
+                  <p>Section One Content</p>
                 </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
+              </div>
+              <h2>
+                <button
+                  class="aria-accordion-trigger"
+                  data-controls="accordion-sect2"
+                  data-root="sect2"
+                  id="accordion2id"
+                >
+                  Section Two
+                </button>
+              </h2>
+              <div id="sect2" class="insertContent">
+                <div hidden class="content" id="accordion-sect2">
+                  <p>Section Two Content</p>
                 </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+              </div>
+              <h2>
+                <button
+                  aria-disabled="true"
+                  title="Disabled"
+                  class="aria-accordion-trigger"
+                  data-controls="accordion-sect3"
+                  data-root="sect3"
+                  id="accordion3id"
+                >
+                  Section Three
+                </button>
+              </h2>
+              <div id="sect3" class="insertContent">
+                <div hidden class="content" id="accordion-sect3">
+                  <p>Section Three Content</p>
                 </div>
+              </div>
+
+              <div class="note">
+                <p>
+                  The third (Section Three) accordion section is deliberately
+                  disabled.
+                </p>
+              </div>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>The accordion controls are keyboard accessible:</h2>
+              <ul>
+                <li>
+                  Press <kbd>Tab</kbd> to navigate to the first accordion
+                  control.
+                </li>
+                <li>
+                  Press the Arrow keys to move focus between accordion controls.
+                </li>
+                <li>Press <kbd>Enter</kbd> to expand an accordion section.</li>
+                <li>
+                  Mouse users can click the desired accordion as usual to
+                  activate.
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Accordions/Internal - Straylight/index.htm b/Templates/Accordions/Internal - Straylight/index.htm
index cf91990e..58819efb 100644
--- a/Templates/Accordions/Internal - Straylight/index.htm	
+++ b/Templates/Accordions/Internal - Straylight/index.htm	
@@ -1,54 +1,85 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Accordion (Straylight Internal Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/accordion.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Accordion (Straylight Internal Content) - Apex 4X Technical Style
+      Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/accordion.css" />
     <script src="/4X/4X.js#Straylight"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External%20-%20Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal%20-%20Straylight/index.htm" aria-current="page">Internal - Straylight</a></li>
-                        <li><a href="../Internal%20-%20Single%20Tab%20Stop/index.htm">Internal - Single Tab Stop</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <!-- Attributes explained:
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External%20-%20Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a
+                  href="../Internal%20-%20Straylight/index.htm"
+                  aria-current="page"
+                  >Internal - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Internal%20-%20Single%20Tab%20Stop/index.htm"
+                  >Internal - Single Tab Stop</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <!-- Attributes explained:
             * data-controls : The resource path and pointer to the ID attribute of the accordion content container element.
             * data-root : The ID attribute of the container element where the accordion content will be inserted when rendered. (This must not be inside the triggering element)
             * data-name : The shared group name that links all associated accordion triggering elements together.
@@ -60,118 +91,172 @@ <h2>Template Examples</h2>
 
             All other 4X API features are available as documented in the folder: /Help/DC API from the root folder.
             -->
-                <div class="demo-block flex-container">
-                    <div class="aria-accordion component flex-item">
-                        <h1 class="pageTitle">ARIA Accordion <small>(Straylight Internal Content)</small></h1>
-                        <h2>
-                            <button class="aria-accordion-trigger" data-name="SharedGroupName" data-controls="accordion-sect1" data-root="sect1" data-active id="accordion1id">
-                                Section One
-                            </button>
-                        </h2>
-                        <div id="sect1" class="insertContent">
-
-                            <div hidden class="content" id="accordion-sect1">
-                                <p>Section One Content</p>
-                            </div>
-
-                        </div>
-                        <h2>
-                            <button class="aria-accordion-trigger" data-name="SharedGroupName" data-controls="accordion-sect2" data-root="sect2" id="accordion2id">
-                                Section Two
-                            </button>
-                        </h2>
-                        <div id="sect2" class="insertContent">
-
-                            <div hidden class="content" id="accordion-sect2">
-                                <p>Section Two Content</p>
-                            </div>
-
-                        </div>
-                        <h2>
-                            <button aria-disabled="true" title="Disabled" class="aria-accordion-trigger" data-name="SharedGroupName" data-controls="accordion-sect3" data-root="sect3" id="accordion3id">
-                                Section Three
-                            </button>
-                        </h2>
-                        <div id="sect3" class="insertContent">
-
-                            <div hidden class="content" id="accordion-sect3">
-                                <p>Section Three Content</p>
-                            </div>
-
-                        </div>
-
-                        <div class="note">
-                            <p>The third (Section Three) accordion section is deliberately disabled.</p>
-                        </div>
-
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The accordion controls are keyboard accessible:</h2>
-                        <ul>
-                            <li>Press <kbd>Tab</kbd> to navigate between accordion controls.</li>
-                            <li>Press <kbd>Enter</kbd> to expand an accordion section.</li>
-                            <li>Mouse users can click the desired accordion as usual to activate.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
+          <div class="demo-block flex-container">
+            <div class="aria-accordion component flex-item">
+              <h1 class="pageTitle">
+                ARIA Accordion <small>(Straylight Internal Content)</small>
+              </h1>
+              <h2>
+                <button
+                  class="aria-accordion-trigger"
+                  data-name="SharedGroupName"
+                  data-controls="accordion-sect1"
+                  data-root="sect1"
+                  data-active
+                  id="accordion1id"
+                >
+                  Section One
+                </button>
+              </h2>
+              <div id="sect1" class="insertContent">
+                <div hidden class="content" id="accordion-sect1">
+                  <p>Section One Content</p>
                 </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
+              </div>
+              <h2>
+                <button
+                  class="aria-accordion-trigger"
+                  data-name="SharedGroupName"
+                  data-controls="accordion-sect2"
+                  data-root="sect2"
+                  id="accordion2id"
+                >
+                  Section Two
+                </button>
+              </h2>
+              <div id="sect2" class="insertContent">
+                <div hidden class="content" id="accordion-sect2">
+                  <p>Section Two Content</p>
                 </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+              </div>
+              <h2>
+                <button
+                  aria-disabled="true"
+                  title="Disabled"
+                  class="aria-accordion-trigger"
+                  data-name="SharedGroupName"
+                  data-controls="accordion-sect3"
+                  data-root="sect3"
+                  id="accordion3id"
+                >
+                  Section Three
+                </button>
+              </h2>
+              <div id="sect3" class="insertContent">
+                <div hidden class="content" id="accordion-sect3">
+                  <p>Section Three Content</p>
                 </div>
+              </div>
+
+              <div class="note">
+                <p>
+                  The third (Section Three) accordion section is deliberately
+                  disabled.
+                </p>
+              </div>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>The accordion controls are keyboard accessible:</h2>
+              <ul>
+                <li>
+                  Press <kbd>Tab</kbd> to navigate between accordion controls.
+                </li>
+                <li>Press <kbd>Enter</kbd> to expand an accordion section.</li>
+                <li>
+                  Mouse users can click the desired accordion as usual to
+                  activate.
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Accordions/Internal/index.htm b/Templates/Accordions/Internal/index.htm
index 94a2bd2d..1a87efcd 100644
--- a/Templates/Accordions/Internal/index.htm
+++ b/Templates/Accordions/Internal/index.htm
@@ -1,55 +1,85 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Accordion (Internal Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/accordion.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Accordion (Internal Content) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/accordion.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External%20-%20Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm" aria-current="page">Internal</a></li>
-                        <li><a href="../Internal%20-%20Straylight/index.htm">Internal - Straylight</a></li>
-                        <li><a href="../Internal%20-%20Single%20Tab%20Stop/index.htm">Internal - Single Tab Stop</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <!-- Attributes explained:
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External%20-%20Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Internal/index.htm" aria-current="page">Internal</a>
+              </li>
+              <li>
+                <a href="../Internal%20-%20Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Internal%20-%20Single%20Tab%20Stop/index.htm"
+                  >Internal - Single Tab Stop</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <!-- Attributes explained:
             * data-controls : The resource path and pointer to the ID attribute of the accordion content container element.
             * data-root : The ID attribute of the container element where the accordion content will be inserted when rendered. (This must not be inside the triggering element)
             * data-active : Specifies that the referenced accordion node will open automatically. Only one accordion node per group should include this
@@ -59,117 +89,169 @@ <h2>Template Examples</h2>
             E.G $A(uniqueID).render();
 
 All other 4X API features are available as documented in the folder: /Help/DC API from the root folder.-->
-                <div class="demo-block flex-container">
-                    <div class="aria-accordion component flex-item">
-                        <h1 class="pageTitle">ARIA Accordion <small>(Internal Content)</small></h1>
-                        <h2>
-                            <button class="aria-accordion-trigger" data-controls="accordion-sect1" data-root="sect1" data-active id="accordion1id">
-                                Section One
-                            </button>
-                        </h2>
-                        <div id="sect1" class="insertContent">
-
-                            <div hidden class="content" id="accordion-sect1">
-                                <p>Section One Content</p>
-                            </div>
-
-                        </div>
-                        <h2>
-                            <button class="aria-accordion-trigger" data-controls="accordion-sect2" data-root="sect2" id="accordion2id">
-                                Section Two
-                            </button>
-                        </h2>
-                        <div id="sect2" class="insertContent">
-
-                            <div hidden class="content" id="accordion-sect2">
-                                <p>Section Two Content</p>
-                            </div>
-
-                        </div>
-                        <h2>
-                            <button aria-disabled="true" title="Disabled" class="aria-accordion-trigger" data-controls="accordion-sect3" data-root="sect3" id="accordion3id">
-                                Section Three
-                            </button>
-                        </h2>
-                        <div id="sect3" class="insertContent">
-
-                            <div hidden class="content" id="accordion-sect3">
-                                <p>Section Three Content</p>
-                            </div>
-
-                            <div class="note">
-                                <p>The third (Section Three) accordion section is deliberately disabled.</p>
-                            </div>
-
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The accordion controls are keyboard accessible:</h2>
-                        <ul>
-                            <li>Press <kbd>Tab</kbd> to navigate between accordion controls.</li>
-                            <li>Press <kbd>Enter</kbd> to expand an accordion section.</li>
-                            <li>Mouse users can click the desired accordion as usual to activate.</li>
-                        </ul>
-                    </div>
+          <div class="demo-block flex-container">
+            <div class="aria-accordion component flex-item">
+              <h1 class="pageTitle">
+                ARIA Accordion <small>(Internal Content)</small>
+              </h1>
+              <h2>
+                <button
+                  class="aria-accordion-trigger"
+                  data-controls="accordion-sect1"
+                  data-root="sect1"
+                  data-active
+                  id="accordion1id"
+                >
+                  Section One
+                </button>
+              </h2>
+              <div id="sect1" class="insertContent">
+                <div hidden class="content" id="accordion-sect1">
+                  <p>Section One Content</p>
                 </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
+              </div>
+              <h2>
+                <button
+                  class="aria-accordion-trigger"
+                  data-controls="accordion-sect2"
+                  data-root="sect2"
+                  id="accordion2id"
+                >
+                  Section Two
+                </button>
+              </h2>
+              <div id="sect2" class="insertContent">
+                <div hidden class="content" id="accordion-sect2">
+                  <p>Section Two Content</p>
                 </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
+              </div>
+              <h2>
+                <button
+                  aria-disabled="true"
+                  title="Disabled"
+                  class="aria-accordion-trigger"
+                  data-controls="accordion-sect3"
+                  data-root="sect3"
+                  id="accordion3id"
+                >
+                  Section Three
+                </button>
+              </h2>
+              <div id="sect3" class="insertContent">
+                <div hidden class="content" id="accordion-sect3">
+                  <p>Section Three Content</p>
                 </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+
+                <div class="note">
+                  <p>
+                    The third (Section Three) accordion section is deliberately
+                    disabled.
+                  </p>
                 </div>
+              </div>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>The accordion controls are keyboard accessible:</h2>
+              <ul>
+                <li>
+                  Press <kbd>Tab</kbd> to navigate between accordion controls.
+                </li>
+                <li>Press <kbd>Enter</kbd> to expand an accordion section.</li>
+                <li>
+                  Mouse users can click the desired accordion as usual to
+                  activate.
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Accordions/index.htm b/Templates/Accordions/index.htm
index 50aff0cc..f77c63e8 100644
--- a/Templates/Accordions/index.htm
+++ b/Templates/Accordions/index.htm
@@ -1,88 +1,176 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Accordions - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Accordions</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="External/index.htm">External</a></li>
-                        <li><a href="External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="Internal/index.htm">Internal</a></li>
-                        <li><a href="Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                        <li><a href="Internal - Single Tab Stop/index.htm">Internal - Single Tab Stop</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>All accordion triggering elements should be in the tab order, pressing Enter or Space should expand the desired accordion panel, the expanded state should be toggled appropriately on the triggering element, and the expanded accordion panel should be rendered directly after the triggering element in the tab order.</p>
-
-                    <p>Though similar in both concept and execution to Tab controls, accordions are not the same. A Tab control has a series of grouped triggering elements that expand and collapse, the rendered content of which is inserted directly after the triggering element group when opened. The container element insertion point for all Tab control triggering elements is shared between them. Also, the group of triggering elements in a Tab control has only one tab stop. The arrow keys are then used to switch focus between each Tab, and the Enter or Space key is used to expand the desired Tab content panel.</p>
-
-                    <p>In contrast, an Accordion has a series of triggering elements that expand and collapse, the rendered content of which is inserted directly after the triggering element when opened. The container element insertion points for Accordions are not shared. Also, all Accordion links appear in the tab order. The reason why ARIA attributes such as role="tablist" and role="tab" are not included within accordions, is because the insertion of inline content would place dynamic content sections within the same Tablist container, making it impossible to determine the order of nested Tab controls when present within the inserted content. The chosen implementation should always match the UI that it's being applied to, to prevent confusion.</p>
-
-                    <p>The 4X ARIA Accordion module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <p>Note: An accordion is a composite widget, meaning that it is comprised of different ARIA roles and supporting attributes.</p>
-
-                    <p>The following attributes are handled automatically by the Accordion module:</p>
-
-                    <ul>
-                        <li> role=button</li>
-                        <li> aria-expanded</li>
-                        <li> aria-controls</li>
-                        <li> role=region</li>
-                        <li> aria-labelledby</li>
-                        <li> tabindex</li>
-                    </ul>
-
-                    <p>Available attributes for the triggering element:</p>
-
-                    <ul>
-                        <li> data-controls : The resource path and pointer to the ID attribute of the accordion container element.</li>
-                        <li> data-root : The ID attribute of the container element where the accordion content will be inserted when rendered. (This must not be inside the triggering element)</li>
-                        <li> data-active : Specifies that the referenced accordion node will open automatically. Only one accordion node per group should include this attribute.</li>
-                        <li> aria-disabled : When set to "true" on the triggering element, will automatically disable associated functionality.</li>
-                    </ul>
-
-                    <p>Note: When dynamically disabling a triggering element, the 4X setDisabled() function should be used to set the disabled state of the triggering element. This will ensure proper background mapping.</p>
-
-                    <div>
-                        <pre><code class="language-javascript">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Accordions</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="External/index.htm">External</a></li>
+              <li>
+                <a href="External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="Internal - Single Tab Stop/index.htm"
+                  >Internal - Single Tab Stop</a
+                >
+              </li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              All accordion triggering elements should be in the tab order,
+              pressing Enter or Space should expand the desired accordion panel,
+              the expanded state should be toggled appropriately on the
+              triggering element, and the expanded accordion panel should be
+              rendered directly after the triggering element in the tab order.
+            </p>
+
+            <p>
+              Though similar in both concept and execution to Tab controls,
+              accordions are not the same. A Tab control has a series of grouped
+              triggering elements that expand and collapse, the rendered content
+              of which is inserted directly after the triggering element group
+              when opened. The container element insertion point for all Tab
+              control triggering elements is shared between them. Also, the
+              group of triggering elements in a Tab control has only one tab
+              stop. The arrow keys are then used to switch focus between each
+              Tab, and the Enter or Space key is used to expand the desired Tab
+              content panel.
+            </p>
+
+            <p>
+              In contrast, an Accordion has a series of triggering elements that
+              expand and collapse, the rendered content of which is inserted
+              directly after the triggering element when opened. The container
+              element insertion points for Accordions are not shared. Also, all
+              Accordion links appear in the tab order. The reason why ARIA
+              attributes such as role="tablist" and role="tab" are not included
+              within accordions, is because the insertion of inline content
+              would place dynamic content sections within the same Tablist
+              container, making it impossible to determine the order of nested
+              Tab controls when present within the inserted content. The chosen
+              implementation should always match the UI that it's being applied
+              to, to prevent confusion.
+            </p>
+
+            <p>
+              The 4X ARIA Accordion module automatically configures all required
+              ARIA attributes and focus handling, in strict accordance with the
+              ARIA specification.
+            </p>
+
+            <p>
+              Note: An accordion is a composite widget, meaning that it is
+              comprised of different ARIA roles and supporting attributes.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the
+              Accordion module:
+            </p>
+
+            <ul>
+              <li>role=button</li>
+              <li>aria-expanded</li>
+              <li>aria-controls</li>
+              <li>role=region</li>
+              <li>aria-labelledby</li>
+              <li>tabindex</li>
+            </ul>
+
+            <p>Available attributes for the triggering element:</p>
+
+            <ul>
+              <li>
+                data-controls : The resource path and pointer to the ID
+                attribute of the accordion container element.
+              </li>
+              <li>
+                data-root : The ID attribute of the container element where the
+                accordion content will be inserted when rendered. (This must not
+                be inside the triggering element)
+              </li>
+              <li>
+                data-active : Specifies that the referenced accordion node will
+                open automatically. Only one accordion node per group should
+                include this attribute.
+              </li>
+              <li>
+                aria-disabled : When set to "true" on the triggering element,
+                will automatically disable associated functionality.
+              </li>
+            </ul>
+
+            <p>
+              Note: When dynamically disabling a triggering element, the 4X
+              setDisabled() function should be used to set the disabled state of
+              the triggering element. This will ensure proper background
+              mapping.
+            </p>
+
+            <div>
+              <pre><code class="language-javascript">
 $A.setDisabled(triggeringElement, boolean);
 </code></pre>
-                    </div>
+            </div>
 
-                    <h2>HTML syntax</h2>
+            <h2>HTML syntax</h2>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;h2>
+            <div>
+              <pre><code class="language-markup">&lt;h2>
   &lt;button data-active data-root="root-id-for-billing" data-controls="accordion-panel-id-for-billing" > BILLING &lt;/button>
 &lt;/h2>
 
@@ -101,31 +189,47 @@ <h2>HTML syntax</h2>
     Expandable content for the shipping section here. (Content hidden by default via the hidden attribute on the accordion panel.)
   &lt;/div>
 &lt;/div></code></pre>
-                    </div>
+            </div>
 
-                    <p>IMPORTANT: The triggering element must not include any other active elements, otherwise these will not be accessible to non-sighted screen reader users.</p>
+            <p>
+              IMPORTANT: The triggering element must not include any other
+              active elements, otherwise these will not be accessible to
+              non-sighted screen reader users.
+            </p>
 
-                    <p>When aria-disabled="true" is set on an accordion triggering element, functionality for that accordion panel will automatically be disabled.</p>
+            <p>
+              When aria-disabled="true" is set on an accordion triggering
+              element, functionality for that accordion panel will automatically
+              be disabled.
+            </p>
 
-                    <h2>JavaScript syntax</h2>
+            <h2>JavaScript syntax</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">$A.setAccordion( domNodeListOrCSSSelectorForTriggeringElements , {
+            <div>
+              <pre><code class="language-javascript">$A.setAccordion( domNodeListOrCSSSelectorForTriggeringElements , {
 // Configure functionality key / value mappings
 });</code></pre>
-                    </div>
+            </div>
 
-                    <h2>Parameters</h2>
+            <ul>
+              <li>Module file: Accordion.js</li>
+              <li>Requires: AccName.js, RovingTabIndex.js.</li>
+              <li>Recommended: Velocity.js, VelocityUI.js.</li>
+            </ul>
 
-                    <ol>
-                        <li>A DOM element or CSS selector to specify the triggering elements</li>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <h2>Parameters</h2>
 
-                    <h3>Configuration</h3>
+            <ol>
+              <li>
+                A DOM element or CSS selector to specify the triggering elements
+              </li>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <div>
-                        <pre><code class="language-javascript">{
+            <h3>Configuration</h3>
+
+            <div>
+              <pre><code class="language-javascript">{
 
 // Optionally set a single tab stop for associated accordion triggering elements.
 singleTabStop: false,
@@ -230,12 +334,12 @@ <h3>Configuration</h3>
 // To view available options, reference the help docs located at: "Help/DC API/DC Object Configuration"
 
 }</code></pre>
-                    </div>
+            </div>
 
-                    <h2>Programmatic control</h2>
+            <h2>Programmatic control</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">// Get the DC object for the accordion using its triggering element id.
+            <div>
+              <pre><code class="language-javascript">// Get the DC object for the accordion using its triggering element id.
 var DC = $A("accordionTriggerId");
 
 // Open the accordion manually.
@@ -250,67 +354,96 @@ <h2>Programmatic control</h2>
 
 // Additional DC API properties and methods can be applied here as well.
 // To view available options, reference the help docs located at: "Help/DC API/DC Object Properties and Methods"</code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Buttons/Standard/index.htm b/Templates/Buttons/Standard/index.htm
index 04be2211..ca66c8d6 100644
--- a/Templates/Buttons/Standard/index.htm
+++ b/Templates/Buttons/Standard/index.htm
@@ -1,139 +1,190 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Standard Buttons - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/buttons.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/buttons.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Standard/index.htm" aria-current="page">Standard</a></li>
-                        <li><a href="../Toggle/index.htm">Toggle</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Standard Buttons</h1>
-                        <section class="sample-block">
-
-                            <!--
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../Standard/index.htm" aria-current="page">Standard</a>
+              </li>
+              <li><a href="../Toggle/index.htm">Toggle</a></li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Standard Buttons</h1>
+              <section class="sample-block">
+                <!--
 IMPORTANT: The internal markup for an ARIA Button must never include any other types of active elements.
 Otherwise, based on how ARIA works in accordance with the spec, none of the embedded controls will be accessible to non-sighted screen reader users.
 -->
 
-                            <ul>
-                                <li>
-                                    <a class="aria-button SF">
-                                        <span>San Francisco</span>
-                                    </a>
-                                </li>
-                            </ul>
-
-                        </section>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The simulated buttons are optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus to the buttons using the keyboard.</li>
-                            <li>Press <kbd>Enter</kbd> or <kbd>Space</kbd> to activate a button.</li>
-                            <li>Mouse users can click the desired button to activate as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+                <ul>
+                  <li>
+                    <a class="aria-button SF">
+                      <span>San Francisco</span>
+                    </a>
+                  </li>
+                </ul>
+              </section>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The simulated buttons are optimized for screen reader and
+                keyboard only users:
+              </h2>
+              <ul>
+                <li>Set focus to the buttons using the keyboard.</li>
+                <li>
+                  Press <kbd>Enter</kbd> or <kbd>Space</kbd> to activate a
+                  button.
+                </li>
+                <li>
+                  Mouse users can click the desired button to activate as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Buttons/Toggle/index.htm b/Templates/Buttons/Toggle/index.htm
index 10fe957a..7ad0907a 100644
--- a/Templates/Buttons/Toggle/index.htm
+++ b/Templates/Buttons/Toggle/index.htm
@@ -1,154 +1,215 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Toggle Buttons - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/buttons.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/buttons.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Standard/index.htm">Standard</a></li>
-                        <li><a href="../Toggle/index.htm" aria-current="page">Toggle</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Toggle Buttons</h1>
-                        <section class="sample-block">
-
-                            <!--
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Standard/index.htm">Standard</a></li>
+              <li>
+                <a href="../Toggle/index.htm" aria-current="page">Toggle</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Toggle Buttons</h1>
+              <section class="sample-block">
+                <!--
 IMPORTANT: The internal markup for an ARIA Button must never include any other types of active elements.
 Otherwise, based on how ARIA works in accordance with the spec, none of the embedded controls will be accessible to non-sighted screen reader users.
 -->
 
-                            <ul>
-                                <li>
-                                    <span data-toggle="true" class="aria-button toggle like pressed">
-                                        <span>Like</span>
-                                        <input hidden checked type="checkbox" name="Like" />
-                                    </span>
-                                </li>
-                                <li>
-                                    <div data-toggle class="aria-button toggle favorite">
-                                        <span>Favorite</span>
-                                        <input hidden type="checkbox" name="Favorite" />
-                                    </div>
-                                </li>
-                                <li>
-                                    <div data-toggle class="aria-button toggle help" data-controls=".help-content">
-                                        <span>Help</span>
-                                    </div>
-                                    <div hidden class="help-content">
-                                        <p><b><big>Nobody expects the Spanish Inquisition.</big></b></p>
-                                    </div>
-                                </li>
-                            </ul>
-
-                        </section>
+                <ul>
+                  <li>
+                    <span
+                      data-toggle="true"
+                      class="aria-button toggle like pressed"
+                    >
+                      <span>Like</span>
+                      <input hidden checked type="checkbox" name="Like" />
+                    </span>
+                  </li>
+                  <li>
+                    <div data-toggle class="aria-button toggle favorite">
+                      <span>Favorite</span>
+                      <input hidden type="checkbox" name="Favorite" />
                     </div>
-                    <div class="keyboard flex-item">
-                        <h2>The simulated toggle buttons are optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus to the buttons using the keyboard.</li>
-                            <li>Press <kbd>Enter</kbd> or <kbd>Space</kbd> to toggle a button.</li>
-                            <li>Mouse users can click the desired button to activate as usual.</li>
-                        </ul>
+                  </li>
+                  <li>
+                    <div
+                      data-toggle
+                      class="aria-button toggle help"
+                      data-controls=".help-content"
+                    >
+                      <span>Help</span>
                     </div>
-                </div>
-
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+                    <div hidden class="help-content">
+                      <p>
+                        <b
+                          ><big>Nobody expects the Spanish Inquisition.</big></b
+                        >
+                      </p>
+                    </div>
+                  </li>
+                </ul>
+              </section>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The simulated toggle buttons are optimized for screen reader and
+                keyboard only users:
+              </h2>
+              <ul>
+                <li>Set focus to the buttons using the keyboard.</li>
+                <li>
+                  Press <kbd>Enter</kbd> or <kbd>Space</kbd> to toggle a button.
+                </li>
+                <li>
+                  Mouse users can click the desired button to activate as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Buttons/index.htm b/Templates/Buttons/index.htm
index 1c073a1c..a1aab6d9 100644
--- a/Templates/Buttons/index.htm
+++ b/Templates/Buttons/index.htm
@@ -1,121 +1,179 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Buttons - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Buttons</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="Standard/index.htm">Standard</a></li>
-                        <li><a href="Toggle/index.htm">Toggle</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>The toggle button should be focusable using the keyboard, and toggle its pressed state when pressing the Spacebar or Enter key.</p>
-
-                    <p>The 4X ARIA Button module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <p>The following attributes are handled automatically by the Button module:</p>
-
-                    <ul>
-                        <li> role=button</li>
-                        <li> aria-pressed</li>
-                        <li> tabindex</li>
-                    </ul>
-
-                    <p>Available attributes for toggle button elements:</p>
-
-                    <ul>
-                        <li> data-toggle : May be set to "false" or "true" to set the current state of a toggle button control when rendered.</li>
-                        <li> aria-disabled : When set to "true" on the triggering element, will automatically disable associated functionality.</li>
-                    </ul>
-
-                    <p>Note: When dynamically disabling a triggering element, the 4X setDisabled() function should be used to set the disabled state of the triggering element. This will ensure proper background mapping.</p>
-
-                    <div>
-                        <pre><code class="language-javascript">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Buttons</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="Standard/index.htm">Standard</a></li>
+              <li><a href="Toggle/index.htm">Toggle</a></li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              The toggle button should be focusable using the keyboard, and
+              toggle its pressed state when pressing the Spacebar or Enter key.
+            </p>
+
+            <p>
+              The 4X ARIA Button module automatically configures all required
+              ARIA attributes and focus handling, in strict accordance with the
+              ARIA specification.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the Button
+              module:
+            </p>
+
+            <ul>
+              <li>role=button</li>
+              <li>aria-pressed</li>
+              <li>tabindex</li>
+            </ul>
+
+            <p>Available attributes for toggle button elements:</p>
+
+            <ul>
+              <li>
+                data-toggle : May be set to "false" or "true" to set the current
+                state of a toggle button control when rendered.
+              </li>
+              <li>
+                aria-disabled : When set to "true" on the triggering element,
+                will automatically disable associated functionality.
+              </li>
+            </ul>
+
+            <p>
+              Note: When dynamically disabling a triggering element, the 4X
+              setDisabled() function should be used to set the disabled state of
+              the triggering element. This will ensure proper background
+              mapping.
+            </p>
+
+            <div>
+              <pre><code class="language-javascript">
 $A.setDisabled(triggeringElement, boolean);
 </code></pre>
-                    </div>
+            </div>
 
-                    <h2>HTML syntax</h2>
+            <h2>HTML syntax</h2>
 
-                    <h3>Standard Button</h3>
+            <h3>Standard Button</h3>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;div class="aria-button" >
+            <div>
+              <pre><code class="language-markup">&lt;div class="aria-button" >
   Markup with button name
 &lt;/div></code></pre>
-                    </div>
+            </div>
 
-                    <h3>Standard Toggle Unpressed</h3>
+            <h3>Standard Toggle Unpressed</h3>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;div data-toggle >
+            <div>
+              <pre><code class="language-markup">&lt;div data-toggle >
   Markup with toggle name
   &lt;input hidden type="checkbox" name="OptionalBoundCheckbox" />
 &lt;/div></code></pre>
-                    </div>
+            </div>
 
-                    <h3>Standard Toggle Pressed</h3>
+            <h3>Standard Toggle Pressed</h3>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;div data-toggle="true" >
+            <div>
+              <pre><code class="language-markup">&lt;div data-toggle="true" >
   Markup with toggle name
   &lt;input checked hidden type="checkbox" name="OptionalBoundCheckbox" />
 &lt;/div></code></pre>
-                    </div>
-
-                    <p>IMPORTANT: The focusable active element must not include any other exposed active elements, otherwise these will not be accessible to non-sighted screen reader users.</p>
-
-                    <p>Whenever a hidden checkbox is embedded within the simulated control, it will automatically reflect the toggled state of the parent element. This makes it possible to implement custom toggle controls that can be submitted in the same manner as native form controls. This, however, is optional, and may be removed without having any negative impact on the functionality of the simulated toggle control.</p>
-
-                    <h2>JavaScript syntax</h2>
+            </div>
 
-                    <div>
-                        <pre><code class="language-javascript">$A.setButton( domNodeOrCSSSelectorForTriggeringElement , {
+            <p>
+              IMPORTANT: The focusable active element must not include any other
+              exposed active elements, otherwise these will not be accessible to
+              non-sighted screen reader users.
+            </p>
+
+            <p>
+              Whenever a hidden checkbox is embedded within the simulated
+              control, it will automatically reflect the toggled state of the
+              parent element. This makes it possible to implement custom toggle
+              controls that can be submitted in the same manner as native form
+              controls. This, however, is optional, and may be removed without
+              having any negative impact on the functionality of the simulated
+              toggle control.
+            </p>
+
+            <h2>JavaScript syntax</h2>
+
+            <div>
+              <pre><code class="language-javascript">$A.setButton( domNodeOrCSSSelectorForTriggeringElement , {
 // Configure functionality key / value mappings
 });</code></pre>
-                    </div>
+            </div>
+
+            <ul>
+              <li>Module file: Button.js</li>
+              <li>Requires: AccName.js, RovingTabIndex.js.</li>
+              <li>Recommended: Velocity.js, VelocityUI.js.</li>
+            </ul>
 
-                    <h2>Parameters</h2>
+            <h2>Parameters</h2>
 
-                    <ol>
-                        <li>A DOM element or CSS selector to specify the triggering element</li>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <ol>
+              <li>
+                A DOM element or CSS selector to specify the triggering element
+              </li>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <h3>Configuration</h3>
+            <h3>Configuration</h3>
 
-                    <div>
-                        <pre><code class="language-javascript">{
+            <div>
+              <pre><code class="language-javascript">{
 
 // Set an explicit name for the button.
 // If undefined, the accessible name will default to the text content within the button element.
@@ -149,67 +207,96 @@ <h3>Configuration</h3>
 }
 
 }</code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Carousels/AutoRotate/index.htm b/Templates/Carousels/AutoRotate/index.htm
index 7868b763..8c471380 100644
--- a/Templates/Carousels/AutoRotate/index.htm
+++ b/Templates/Carousels/AutoRotate/index.htm
@@ -1,154 +1,199 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>AutoRotating ARIA Carousel - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../AutoRotate/index.htm" aria-current="page">AutoRotate</a></li>
-                        <li><a href="../ManualRotate/index.htm">ManualRotate</a></li>
-                        <li><a href="../Slideshow/index.htm">Slideshow</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">AutoRotating ARIA Carousel</h1>
-                        <section class="sample-block">
-
-                            <div class="carousel-wrapper">
-
-                                <div class="my-slider">
-                                    <div class="slide s01">
-                                        <div>1</div>
-                                    </div>
-                                    <div class="slide s02">
-                                        <div>2</div>
-                                    </div>
-                                    <div class="slide s03">
-                                        <div>3</div>
-                                    </div>
-                                    <div class="slide s04">
-                                        <div>4</div>
-                                    </div>
-                                    <div class="slide s05">
-                                        <div>5</div>
-                                    </div>
-                                    <div class="slide s06">
-                                        <div>6</div>
-                                    </div>
-                                </div>
-
-                                <div id="controls">
-                                    <button class="previous">Previous</button>
-                                    <button class="next">Next</button>
-                                    <button class="auto"></button>
-                                </div>
-
-                            </div>
-
-                        </section>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../AutoRotate/index.htm" aria-current="page"
+                  >AutoRotate</a
+                >
+              </li>
+              <li><a href="../ManualRotate/index.htm">ManualRotate</a></li>
+              <li><a href="../Slideshow/index.htm">Slideshow</a></li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">AutoRotating ARIA Carousel</h1>
+              <section class="sample-block">
+                <div class="carousel-wrapper">
+                  <div class="my-slider">
+                    <div class="slide s01">
+                      <div>1</div>
                     </div>
-                    <div class="keyboard flex-item">
-                        <h2>The carousel functionality is optimized for screen reader and keyboard only users:</h2>
-
+                    <div class="slide s02">
+                      <div>2</div>
                     </div>
-                </div>
+                    <div class="slide s03">
+                      <div>3</div>
+                    </div>
+                    <div class="slide s04">
+                      <div>4</div>
+                    </div>
+                    <div class="slide s05">
+                      <div>5</div>
+                    </div>
+                    <div class="slide s06">
+                      <div>6</div>
+                    </div>
+                  </div>
 
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+                  <div id="controls">
+                    <button class="previous">Previous</button>
+                    <button class="next">Next</button>
+                    <button class="auto"></button>
+                  </div>
                 </div>
+              </section>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The carousel functionality is optimized for screen reader and
+                keyboard only users:
+              </h2>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Carousels/ManualRotate/index.htm b/Templates/Carousels/ManualRotate/index.htm
index 4d1741c7..d4bfefb8 100644
--- a/Templates/Carousels/ManualRotate/index.htm
+++ b/Templates/Carousels/ManualRotate/index.htm
@@ -1,153 +1,198 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Manualy Rotating ARIA Carousel - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../AutoRotate/index.htm">AutoRotate</a></li>
-                        <li><a href="../ManualRotate/index.htm" aria-current="page">ManualRotate</a></li>
-                        <li><a href="../Slideshow/index.htm">Slideshow</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Manualy Rotating ARIA Carousel</h1>
-                        <section class="sample-block">
-
-                            <div class="carousel-wrapper">
-
-                                <div class="my-slider">
-                                    <div class="slide s01">
-                                        <div>1</div>
-                                    </div>
-                                    <div class="slide s02">
-                                        <div>2</div>
-                                    </div>
-                                    <div class="slide s03">
-                                        <div>3</div>
-                                    </div>
-                                    <div class="slide s04">
-                                        <div>4</div>
-                                    </div>
-                                    <div class="slide s05">
-                                        <div>5</div>
-                                    </div>
-                                    <div class="slide s06">
-                                        <div>6</div>
-                                    </div>
-                                </div>
-
-                                <div id="controls">
-                                    <button class="previous">Previous</button>
-                                    <button class="next">Next</button>
-                                </div>
-
-                            </div>
-
-                        </section>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../AutoRotate/index.htm">AutoRotate</a></li>
+              <li>
+                <a href="../ManualRotate/index.htm" aria-current="page"
+                  >ManualRotate</a
+                >
+              </li>
+              <li><a href="../Slideshow/index.htm">Slideshow</a></li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Manualy Rotating ARIA Carousel</h1>
+              <section class="sample-block">
+                <div class="carousel-wrapper">
+                  <div class="my-slider">
+                    <div class="slide s01">
+                      <div>1</div>
                     </div>
-                    <div class="keyboard flex-item">
-                        <h2>The carousel functionality is optimized for screen reader and keyboard only users:</h2>
-
+                    <div class="slide s02">
+                      <div>2</div>
                     </div>
-                </div>
+                    <div class="slide s03">
+                      <div>3</div>
+                    </div>
+                    <div class="slide s04">
+                      <div>4</div>
+                    </div>
+                    <div class="slide s05">
+                      <div>5</div>
+                    </div>
+                    <div class="slide s06">
+                      <div>6</div>
+                    </div>
+                  </div>
 
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+                  <div id="controls">
+                    <button class="previous">Previous</button>
+                    <button class="next">Next</button>
+                  </div>
                 </div>
+              </section>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The carousel functionality is optimized for screen reader and
+                keyboard only users:
+              </h2>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Carousels/Slideshow/index.htm b/Templates/Carousels/Slideshow/index.htm
index df7553fd..24244759 100644
--- a/Templates/Carousels/Slideshow/index.htm
+++ b/Templates/Carousels/Slideshow/index.htm
@@ -1,153 +1,198 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Slideshow Carousel - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../AutoRotate/index.htm">AutoRotate</a></li>
-                        <li><a href="../ManualRotate/index.htm">ManualRotate</a></li>
-                        <li><a href="../Slideshow/index.htm" aria-current="page">Slideshow</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Slideshow Carousel</h1>
-                        <section class="sample-block">
-
-                            <div class="carousel-wrapper">
-
-                                <div class="my-slider">
-                                    <div class="slide s01">
-                                        <div>1</div>
-                                    </div>
-                                    <div class="slide s02">
-                                        <div>2</div>
-                                    </div>
-                                    <div class="slide s03">
-                                        <div>3</div>
-                                    </div>
-                                    <div class="slide s04">
-                                        <div>4</div>
-                                    </div>
-                                    <div class="slide s05">
-                                        <div>5</div>
-                                    </div>
-                                    <div class="slide s06">
-                                        <div>6</div>
-                                    </div>
-                                </div>
-
-                                <div id="controls">
-                                    <button class="previous">Previous</button>
-                                    <button class="next">Next</button>
-                                </div>
-
-                            </div>
-
-                        </section>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../AutoRotate/index.htm">AutoRotate</a></li>
+              <li><a href="../ManualRotate/index.htm">ManualRotate</a></li>
+              <li>
+                <a href="../Slideshow/index.htm" aria-current="page"
+                  >Slideshow</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">ARIA Slideshow Carousel</h1>
+              <section class="sample-block">
+                <div class="carousel-wrapper">
+                  <div class="my-slider">
+                    <div class="slide s01">
+                      <div>1</div>
                     </div>
-                    <div class="keyboard flex-item">
-                        <h2>The carousel functionality is optimized for screen reader and keyboard only users:</h2>
-
+                    <div class="slide s02">
+                      <div>2</div>
                     </div>
-                </div>
+                    <div class="slide s03">
+                      <div>3</div>
+                    </div>
+                    <div class="slide s04">
+                      <div>4</div>
+                    </div>
+                    <div class="slide s05">
+                      <div>5</div>
+                    </div>
+                    <div class="slide s06">
+                      <div>6</div>
+                    </div>
+                  </div>
 
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+                  <div id="controls">
+                    <button class="previous">Previous</button>
+                    <button class="next">Next</button>
+                  </div>
                 </div>
+              </section>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The carousel functionality is optimized for screen reader and
+                keyboard only users:
+              </h2>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Carousels/index.htm b/Templates/Carousels/index.htm
index bba25cfc..be9a98a8 100644
--- a/Templates/Carousels/index.htm
+++ b/Templates/Carousels/index.htm
@@ -1,54 +1,90 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Carousels - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Carousels</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="AutoRotate/index.htm">AutoRotate</a></li>
-                        <li><a href="ManualRotate/index.htm">ManualRotate</a></li>
-                        <li><a href="Slideshow/index.htm">Slideshow</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Carousels</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="AutoRotate/index.htm">AutoRotate</a></li>
+              <li><a href="ManualRotate/index.htm">ManualRotate</a></li>
+              <li><a href="Slideshow/index.htm">Slideshow</a></li>
+            </ul>
+          </nav>
 
-                    <h2>Expected behaviors</h2>
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
 
-                    <p>The beginning and ending boundaries of the region should be conveyed to screen reader users, content changes should be announced to screen reader users only when a navigation button is manually activated and not when auto-rotate is enabled, all navigation buttons should be keyboard accessible, auto-rotation should stop when an element within the carousel receives focus to ensure accessibility for keyboard-only users, and auto-rotation should stop when the mouse is moved over the carousel region to ensure accessibility for low vision users.</p>
+            <p>
+              The beginning and ending boundaries of the region should be
+              conveyed to screen reader users, content changes should be
+              announced to screen reader users only when a navigation button is
+              manually activated and not when auto-rotate is enabled, all
+              navigation buttons should be keyboard accessible, auto-rotation
+              should stop when an element within the carousel receives focus to
+              ensure accessibility for keyboard-only users, and auto-rotation
+              should stop when the mouse is moved over the carousel region to
+              ensure accessibility for low vision users.
+            </p>
 
-                    <p>The 4X ARIA Carousel module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
+            <p>
+              The 4X ARIA Carousel module automatically configures all required
+              ARIA attributes and focus handling, in strict accordance with the
+              ARIA specification.
+            </p>
 
-                    <p>(A heavily modified version of Tiny-Slider.JS has been imported for this purpose, originally authored by William Lin, it was updated here to improve accessibility for screen reader and keyboard-only users.)</p>
+            <p>
+              (A heavily modified version of Tiny-Slider.JS has been imported
+              for this purpose, originally authored by William Lin, it was
+              updated here to improve accessibility for screen reader and
+              keyboard-only users.)
+            </p>
 
-                    <h2>HTML syntax</h2>
+            <h2>HTML syntax</h2>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;div class="carousel-wrapper">
+            <div>
+              <pre><code class="language-markup">&lt;div class="carousel-wrapper">
 
     &lt;div class="my-slider">
         &lt;div class="slide s01">
@@ -71,408 +107,681 @@ <h2>HTML syntax</h2>
     &lt;/div>
 
 &lt;/div></code></pre>
-                    </div>
+            </div>
 
-                    <p>NOTE: Individual slides may include any type of content, such as images, text, structural markup, links buttons and form fields, or any other. Which ever type of content is chosen, however, it is always important to ensure that such content is tested to ensure accessibility.</p>
+            <p>
+              NOTE: Individual slides may include any type of content, such as
+              images, text, structural markup, links buttons and form fields, or
+              any other. Which ever type of content is chosen, however, it is
+              always important to ensure that such content is tested to ensure
+              accessibility.
+            </p>
 
-                    <h2>JavaScript syntax</h2>
+            <h2>JavaScript syntax</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">var carouselDC = $A.setCarousel({
+            <div>
+              <pre><code class="language-javascript">var carouselDC = $A.setCarousel({
 container: ".my-slider"
 // Configure functionality key / value mappings
 });</code></pre>
-                    </div>
+            </div>
 
-                    <h2>Parameters</h2>
+            <ul>
+              <li>Module file: Carousel.js</li>
+              <li>Requires: TinySlider.css, TinySlider.js.</li>
+              <li>Recommended: Velocity.js, VelocityUI.js.</li>
+            </ul>
 
-                    <ol>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <h2>Parameters</h2>
 
-                    <h3>Configuration</h3>
+            <ol>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <p>Imported from: <a href="https://github.com/ganlanyuan/tiny-slider" target="git">https://github.com/ganlanyuan/tiny-slider</a></p>
+            <h3>Configuration</h3>
 
-                    <table>
-                        <thead>
-                            <tr>
-                                <th> Option </th>
-                                <th> Type </th>
-                                <th> Description </th>
-                            </tr>
-                        </thead>
-                        <tr>
-                            <td role="rowheader"> 'container' </td>
-                            <td> Node </td>
-                            <td> Default: ''.slider''. <br> The slider container element or selector. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'mode' </td>
-                            <td> "carousel" or "gallery" </td>
-                            <td> Default: "carousel". <br> Controls animation behaviour. <br> With 'carousel' everything slides to the side, while 'gallery' uses fade animations and changes all slides at once. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'axis' </td>
-                            <td> "horizontal" or "vertical" </td>
-                            <td> Default: "horizontal". <br> The axis of the slider. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'items' </td>
-                            <td> positive number </td>
-                            <td> Default: 1. <br> Number of slides being displayed in the viewport.<br>If slides less or equal than 'items', the slider won't be initialized. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'gutter' </td>
-                            <td> positive integer </td>
-                            <td> Default: 0. <br> Space between slides (in "px"). </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'edgePadding' </td>
-                            <td> positive integer </td>
-                            <td> Default: 0. <br> Space on the outside (in "px"). </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'fixedWidth' </td>
-                            <td> positive integer </td>
-                            <td> Default: false. <br> Controls 'width' attribute of the slides. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'autoWidth' </td>
-                            <td> Boolean </td>
-                            <td> Default: false. <br> If 'true', the width of each slide will be its natural width as a 'inline-block' box. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'viewportMax' (was 'fixedWidthViewportWidth') </td>
-                            <td> positive integer </td>
-                            <td> Default: false. <br> Maximum viewport width for 'fixedWidth'/'autoWidth'. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'slideBy' </td>
-                            <td> positive number or "page" </td>
-                            <td> Default: 1. <br> Number of slides going on one "click". </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'center' (v2.9.2+) </td>
-                            <td> Boolean </td>
-                            <td> Default: false. <br> Center the active slide in the viewport. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'controls' </td>
-                            <td> Boolean </td>
-                            <td> Default: true. <br> Controls the display and functionalities of 'controls' components (prev/next buttons). If 'true', display the 'controls' and add all functionalities. <br>For better accessibility, when a prev/next button is focused, user will be able to control the slider using left/right arrow keys.</td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'controlsPosition' </td>
-                            <td> "top" or "bottom" </td>
-                            <td> Default: "top". <br> Controls 'controls' position. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'controlsText' </td>
-                            <td> (Text Markup) or Array </td>
-                            <td> Default: ["prev", "next"]. <br> Text or markup in the prev/next buttons. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'controlsContainer' </td>
-                            <td> Node </td>
-                            <td> Default: false. <br> The container element/selector around the prev/next buttons. <br> 'controlsContainer' must have at least 2 child elements. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'prevButton' </td>
-                            <td> Node </td>
-                            <td> Default: false. <br> Customized previous buttons. <br> This option will be ignored if 'controlsContainer' is a Node element or a CSS selector. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'nextButton' </td>
-                            <td> Node </td>
-                            <td> Default: false. <br> Customized next buttons. <br> This option will be ignored if 'controlsContainer' is a Node element or a CSS selector. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'nav' </td>
-                            <td> Boolean </td>
-                            <td> Default: true. <br> Controls the display and functionalities of 'nav' components (dots). If 'true', display the 'nav' and add all functionalities. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'navPosition' </td>
-                            <td> "top" or "bottom" </td>
-                            <td> Default: "top". <br> Controls 'nav' position. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'navContainer' </td>
-                            <td> Node </td>
-                            <td> Default: false. <br> The container element/selector around the dots. <br> 'navContainer' must have at least same number of children as the slides. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'navAsThumbnails' </td>
-                            <td> Boolean </td>
-                            <td> Default: false. <br> Indicate if the dots are thumbnails. If 'true', they will always be visible even when more than 1 slides displayed in the viewport. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'arrowKeys' </td>
-                            <td> Boolean </td>
-                            <td> Default: false. <br> Allows using arrow keys to switch slides. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'speed' </td>
-                            <td> positive integer </td>
-                            <td> Default: 300. <br> Speed of the slide animation (in "ms"). </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'autoplay' </td>
-                            <td> Boolean </td>
-                            <td> Default: false. <br> Toggles the automatic change of slides. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'autoplayPosition' </td>
-                            <td> "top" or "bottom" </td>
-                            <td> Default: "top". <br> Controls 'autoplay' position. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'autoplayTimeout' </td>
-                            <td> positive integer </td>
-                            <td> Default: 5000. <br> Time between 2 'autoplay' slides change (in "ms"). </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'autoplayDirection' </td>
-                            <td> "forward" or "backward" </td>
-                            <td> Default: "forward". <br> Direction of slide movement (ascending/descending the slide index). </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'autoplayText' </td>
-                            <td> Array (Text </td>
-                            <td> Default: ["start", "stop"]. <br> Text or markup in the autoplay start/stop button. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'autoplayHoverPause' </td>
-                            <td> Boolean </td>
-                            <td> Default: false. <br> Stops sliding on mouseover. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'autoplayButton' </td>
-                            <td> Node </td>
-                            <td> Default: false. <br> The customized autoplay start/stop button or selector. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'autoplayButtonOutput' </td>
-                            <td> Boolean </td>
-                            <td> Default: true. <br> Output 'autoplayButton' markup when 'autoplay' is true but a customized 'autoplayButton' is not provided. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'autoplayResetOnVisibility' </td>
-                            <td> Boolean </td>
-                            <td> Default: true. <br> Pauses the sliding when the page is invisible and resumes it when the page becomes visible again. ([Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)) </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'animateIn' </td>
-                            <td> String </td>
-                            <td> Default: "tns-fadeIn". <br> Name of intro animation 'class'. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'animateOut' </td>
-                            <td> String </td>
-                            <td> Default: "tns-fadeOut". <br> Name of outro animation 'class'. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'animateNormal' </td>
-                            <td> String </td>
-                            <td> Default: "tns-normal". <br> Name of default animation 'class'. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'animateDelay' </td>
-                            <td> positive integer </td>
-                            <td> Default: false. <br> Time between each 'gallery' animation (in "ms"). </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'loop' </td>
-                            <td> Boolean </td>
-                            <td> Default: true. <br> Moves throughout all the slides seamlessly. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'rewind' </td>
-                            <td> Boolean </td>
-                            <td> Default: false. <br> Moves to the opposite edge when reaching the first or last slide. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'autoHeight' </td>
-                            <td> Boolean </td>
-                            <td> Default: false. <br> Height of slider container changes according to each slide's height. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'responsive' </td>
-                            <td> Object: { <br>&emsp;breakpoint: { <br>&emsp;&emsp;key: value<br>&emsp;} <br>} </td>
-                            <td> Default: false. <br>Breakpoint: Integer.<br>Defines options for different viewport widths (see [Responsive Options]). <br> </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'lazyload' </td>
-                            <td> Boolean </td>
-                            <td> Default: false. <br> Enables lazyloading images that are currently not viewed, thus saving bandwidth . <br> NOTE: <br>+ Class '.tns-lazy-img' need to be set on every image you want to lazyload if option 'lazyloadSelector' is not specified; <br>+ 'data-src' attribute with its value of the real image 'src' is required; <br>+ 'width' attribute for every image is required for 'autoWidth' slider. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'lazyloadSelector' (v2.9.1+) </td>
-                            <td> String </td>
-                            <td> Default: ''.tns-lazy-img''. <br> The CSS selector for lazyload images. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'touch' </td>
-                            <td> Boolean </td>
-                            <td> Default: true. <br> Activates input detection for touch devices. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'mouseDrag' </td>
-                            <td> Boolean </td>
-                            <td> Default: false. <br> Changing slides by dragging them. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'swipeAngle' </td>
-                            <td> positive integer </td>
-                            <td> Default: 15. <br> Swipe or drag will not be triggered if the angle is not inside the range when set. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'preventActionWhenRunning' (v2.9.1+) </td>
-                            <td> Boolean </td>
-                            <td> Default: false. <br> Prevent next transition while slider is transforming. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'preventScrollOnTouch' (v2.9.1+) </td>
-                            <td> "auto" </td>
-                            <td> Default: false. <br> Prevent page from scrolling on 'touchmove'. If set to "auto", the slider will first check if the touch direction matches the slider axis, then decide whether prevent the page scrolling or not. If set to "force", the slider will always prevent the page scrolling. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'nested' </td>
-                            <td> "inner" or "outer" </td>
-                            <td> Default: false. <br> Define the relationship between nested sliders. <br>Make sure you run the inner slider first, otherwise the height of the inner slider container will be wrong. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'freezable' </td>
-                            <td> Boolean </td>
-                            <td> Default: true. <br> Indicate whether the slider will be frozen ('controls', 'nav', 'autoplay' and other functions will stop work) when all slides can be displayed in one page. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'disable' </td>
-                            <td> Boolean </td>
-                            <td> Default: false. <br> Disable slider. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'startIndex' </td>
-                            <td> positive integer </td>
-                            <td> Default: 0. <br> The initial 'index' of the slider. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'onInit' </td>
-                            <td> Function </td>
-                            <td> Default: false. <br> Callback to be run on initialization. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'useLocalStorage' </td>
-                            <td> Boolean </td>
-                            <td> Default: true. <br> Save browser capability variables to [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and without detecting them everytime the slider runs if set to 'true'. </td>
-                        </tr>
-                        <tr>
-                            <td role="rowheader"> 'nonce'</td>
-                            <td> String / false </td>
-                            <td> Default: false. <br> Optional Nonce attribute for inline style tag to allow slider usage without 'unsafe-inline Content Security Policy source. </td>
-                        </tr>
-                    </table>
+            <p>
+              Imported from:
+              <a href="https://github.com/ganlanyuan/tiny-slider" target="git"
+                >https://github.com/ganlanyuan/tiny-slider</a
+              >
+            </p>
 
-                    <h3>Responsive options</h3>
+            <table>
+              <thead>
+                <tr>
+                  <th>Option</th>
+                  <th>Type</th>
+                  <th>Description</th>
+                </tr>
+              </thead>
+              <tr>
+                <td role="rowheader">'container'</td>
+                <td>Node</td>
+                <td>
+                  Default: ''.slider''. <br />
+                  The slider container element or selector.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'mode'</td>
+                <td>"carousel" or "gallery"</td>
+                <td>
+                  Default: "carousel". <br />
+                  Controls animation behaviour. <br />
+                  With 'carousel' everything slides to the side, while 'gallery'
+                  uses fade animations and changes all slides at once.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'axis'</td>
+                <td>"horizontal" or "vertical"</td>
+                <td>
+                  Default: "horizontal". <br />
+                  The axis of the slider.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'items'</td>
+                <td>positive number</td>
+                <td>
+                  Default: 1. <br />
+                  Number of slides being displayed in the viewport.<br />If
+                  slides less or equal than 'items', the slider won't be
+                  initialized.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'gutter'</td>
+                <td>positive integer</td>
+                <td>
+                  Default: 0. <br />
+                  Space between slides (in "px").
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'edgePadding'</td>
+                <td>positive integer</td>
+                <td>
+                  Default: 0. <br />
+                  Space on the outside (in "px").
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'fixedWidth'</td>
+                <td>positive integer</td>
+                <td>
+                  Default: false. <br />
+                  Controls 'width' attribute of the slides.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'autoWidth'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: false. <br />
+                  If 'true', the width of each slide will be its natural width
+                  as a 'inline-block' box.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">
+                  'viewportMax' (was 'fixedWidthViewportWidth')
+                </td>
+                <td>positive integer</td>
+                <td>
+                  Default: false. <br />
+                  Maximum viewport width for 'fixedWidth'/'autoWidth'.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'slideBy'</td>
+                <td>positive number or "page"</td>
+                <td>
+                  Default: 1. <br />
+                  Number of slides going on one "click".
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'center' (v2.9.2+)</td>
+                <td>Boolean</td>
+                <td>
+                  Default: false. <br />
+                  Center the active slide in the viewport.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'controls'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: true. <br />
+                  Controls the display and functionalities of 'controls'
+                  components (prev/next buttons). If 'true', display the
+                  'controls' and add all functionalities. <br />For better
+                  accessibility, when a prev/next button is focused, user will
+                  be able to control the slider using left/right arrow keys.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'controlsPosition'</td>
+                <td>"top" or "bottom"</td>
+                <td>
+                  Default: "top". <br />
+                  Controls 'controls' position.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'controlsText'</td>
+                <td>(Text Markup) or Array</td>
+                <td>
+                  Default: ["prev", "next"]. <br />
+                  Text or markup in the prev/next buttons.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'controlsContainer'</td>
+                <td>Node</td>
+                <td>
+                  Default: false. <br />
+                  The container element/selector around the prev/next buttons.
+                  <br />
+                  'controlsContainer' must have at least 2 child elements.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'prevButton'</td>
+                <td>Node</td>
+                <td>
+                  Default: false. <br />
+                  Customized previous buttons. <br />
+                  This option will be ignored if 'controlsContainer' is a Node
+                  element or a CSS selector.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'nextButton'</td>
+                <td>Node</td>
+                <td>
+                  Default: false. <br />
+                  Customized next buttons. <br />
+                  This option will be ignored if 'controlsContainer' is a Node
+                  element or a CSS selector.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'nav'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: true. <br />
+                  Controls the display and functionalities of 'nav' components
+                  (dots). If 'true', display the 'nav' and add all
+                  functionalities.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'navPosition'</td>
+                <td>"top" or "bottom"</td>
+                <td>
+                  Default: "top". <br />
+                  Controls 'nav' position.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'navContainer'</td>
+                <td>Node</td>
+                <td>
+                  Default: false. <br />
+                  The container element/selector around the dots. <br />
+                  'navContainer' must have at least same number of children as
+                  the slides.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'navAsThumbnails'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: false. <br />
+                  Indicate if the dots are thumbnails. If 'true', they will
+                  always be visible even when more than 1 slides displayed in
+                  the viewport.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'arrowKeys'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: false. <br />
+                  Allows using arrow keys to switch slides.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'speed'</td>
+                <td>positive integer</td>
+                <td>
+                  Default: 300. <br />
+                  Speed of the slide animation (in "ms").
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'autoplay'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: false. <br />
+                  Toggles the automatic change of slides.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'autoplayPosition'</td>
+                <td>"top" or "bottom"</td>
+                <td>
+                  Default: "top". <br />
+                  Controls 'autoplay' position.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'autoplayTimeout'</td>
+                <td>positive integer</td>
+                <td>
+                  Default: 5000. <br />
+                  Time between 2 'autoplay' slides change (in "ms").
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'autoplayDirection'</td>
+                <td>"forward" or "backward"</td>
+                <td>
+                  Default: "forward". <br />
+                  Direction of slide movement (ascending/descending the slide
+                  index).
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'autoplayText'</td>
+                <td>Array (Text</td>
+                <td>
+                  Default: ["start", "stop"]. <br />
+                  Text or markup in the autoplay start/stop button.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'autoplayHoverPause'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: false. <br />
+                  Stops sliding on mouseover.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'autoplayButton'</td>
+                <td>Node</td>
+                <td>
+                  Default: false. <br />
+                  The customized autoplay start/stop button or selector.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'autoplayButtonOutput'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: true. <br />
+                  Output 'autoplayButton' markup when 'autoplay' is true but a
+                  customized 'autoplayButton' is not provided.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'autoplayResetOnVisibility'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: true. <br />
+                  Pauses the sliding when the page is invisible and resumes it
+                  when the page becomes visible again. ([Page Visibility
+                  API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API))
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'animateIn'</td>
+                <td>String</td>
+                <td>
+                  Default: "tns-fadeIn". <br />
+                  Name of intro animation 'class'.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'animateOut'</td>
+                <td>String</td>
+                <td>
+                  Default: "tns-fadeOut". <br />
+                  Name of outro animation 'class'.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'animateNormal'</td>
+                <td>String</td>
+                <td>
+                  Default: "tns-normal". <br />
+                  Name of default animation 'class'.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'animateDelay'</td>
+                <td>positive integer</td>
+                <td>
+                  Default: false. <br />
+                  Time between each 'gallery' animation (in "ms").
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'loop'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: true. <br />
+                  Moves throughout all the slides seamlessly.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'rewind'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: false. <br />
+                  Moves to the opposite edge when reaching the first or last
+                  slide.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'autoHeight'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: false. <br />
+                  Height of slider container changes according to each slide's
+                  height.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'responsive'</td>
+                <td>
+                  Object: { <br />&emsp;breakpoint: { <br />&emsp;&emsp;key:
+                  value<br />&emsp;} <br />}
+                </td>
+                <td>
+                  Default: false. <br />Breakpoint: Integer.<br />Defines
+                  options for different viewport widths (see [Responsive
+                  Options]). <br />
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'lazyload'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: false. <br />
+                  Enables lazyloading images that are currently not viewed, thus
+                  saving bandwidth . <br />
+                  NOTE: <br />+ Class '.tns-lazy-img' need to be set on every
+                  image you want to lazyload if option 'lazyloadSelector' is not
+                  specified; <br />+ 'data-src' attribute with its value of the
+                  real image 'src' is required; <br />+ 'width' attribute for
+                  every image is required for 'autoWidth' slider.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'lazyloadSelector' (v2.9.1+)</td>
+                <td>String</td>
+                <td>
+                  Default: ''.tns-lazy-img''. <br />
+                  The CSS selector for lazyload images.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'touch'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: true. <br />
+                  Activates input detection for touch devices.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'mouseDrag'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: false. <br />
+                  Changing slides by dragging them.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'swipeAngle'</td>
+                <td>positive integer</td>
+                <td>
+                  Default: 15. <br />
+                  Swipe or drag will not be triggered if the angle is not inside
+                  the range when set.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'preventActionWhenRunning' (v2.9.1+)</td>
+                <td>Boolean</td>
+                <td>
+                  Default: false. <br />
+                  Prevent next transition while slider is transforming.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'preventScrollOnTouch' (v2.9.1+)</td>
+                <td>"auto"</td>
+                <td>
+                  Default: false. <br />
+                  Prevent page from scrolling on 'touchmove'. If set to "auto",
+                  the slider will first check if the touch direction matches the
+                  slider axis, then decide whether prevent the page scrolling or
+                  not. If set to "force", the slider will always prevent the
+                  page scrolling.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'nested'</td>
+                <td>"inner" or "outer"</td>
+                <td>
+                  Default: false. <br />
+                  Define the relationship between nested sliders. <br />Make
+                  sure you run the inner slider first, otherwise the height of
+                  the inner slider container will be wrong.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'freezable'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: true. <br />
+                  Indicate whether the slider will be frozen ('controls', 'nav',
+                  'autoplay' and other functions will stop work) when all slides
+                  can be displayed in one page.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'disable'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: false. <br />
+                  Disable slider.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'startIndex'</td>
+                <td>positive integer</td>
+                <td>
+                  Default: 0. <br />
+                  The initial 'index' of the slider.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'onInit'</td>
+                <td>Function</td>
+                <td>
+                  Default: false. <br />
+                  Callback to be run on initialization.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'useLocalStorage'</td>
+                <td>Boolean</td>
+                <td>
+                  Default: true. <br />
+                  Save browser capability variables to
+                  [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
+                  and without detecting them everytime the slider runs if set to
+                  'true'.
+                </td>
+              </tr>
+              <tr>
+                <td role="rowheader">'nonce'</td>
+                <td>String / false</td>
+                <td>
+                  Default: false. <br />
+                  Optional Nonce attribute for inline style tag to allow slider
+                  usage without 'unsafe-inline Content Security Policy source.
+                </td>
+              </tr>
+            </table>
 
-                    <p>The following options can be redefined in the 'responsive' object declaration.</p>
+            <h3>Responsive options</h3>
 
-                    <ul>
-                        <li>'startIndex'</li>
-                        <li>'items'</li>
-                        <li>'slideBy'</li>
-                        <li>'speed'</li>
-                        <li>'autoHeight'</li>
-                        <li>'fixedWidth'</li>
-                        <li>'edgePadding'</li>
-                        <li>'gutter'</li>
-                        <li>'center'</li>
-                        <li>'controls'</li>
-                        <li>'controlsText'</li>
-                        <li>'nav'</li>
-                        <li>'autoplay'</li>
-                        <li>'autoplayHoverPause'</li>
-                        <li>'autoplayResetOnVisibility'</li>
-                        <li>'autoplayText'</li>
-                        <li>'autoplayTimeout'</li>
-                        <li>'touch'</li>
-                        <li>'mouseDrag'</li>
-                        <li>'arrowKeys'</li>
-                        <li>'disable'</li>
-                    </ul>
+            <p>
+              The following options can be redefined in the 'responsive' object
+              declaration.
+            </p>
 
-                    <h3>Properties and methods</h3>
+            <ul>
+              <li>'startIndex'</li>
+              <li>'items'</li>
+              <li>'slideBy'</li>
+              <li>'speed'</li>
+              <li>'autoHeight'</li>
+              <li>'fixedWidth'</li>
+              <li>'edgePadding'</li>
+              <li>'gutter'</li>
+              <li>'center'</li>
+              <li>'controls'</li>
+              <li>'controlsText'</li>
+              <li>'nav'</li>
+              <li>'autoplay'</li>
+              <li>'autoplayHoverPause'</li>
+              <li>'autoplayResetOnVisibility'</li>
+              <li>'autoplayText'</li>
+              <li>'autoplayTimeout'</li>
+              <li>'touch'</li>
+              <li>'mouseDrag'</li>
+              <li>'arrowKeys'</li>
+              <li>'disable'</li>
+            </ul>
 
-                    <p>Once initialized, the carousel DC object provides access to the tinySlider object instance to allow properties and methods to be accessed directly.</p>
+            <h3>Properties and methods</h3>
 
-                    <div>
-                        <pre><code class="language-javascript">// Reference the tinySlider object instance.
+            <p>
+              Once initialized, the carousel DC object provides access to the
+              tinySlider object instance to allow properties and methods to be
+              accessed directly.
+            </p>
 
-var tinySliderInstance = carouselDC.tns;</code></pre>
-                    </div>
+            <div>
+              <pre><code class="language-javascript">// Reference the tinySlider object instance.
 
-                    <p>To learn more about accessing specific properties and methods, as well as setting custom events, visit: <a href="https://github.com/ganlanyuan/tiny-slider" target="git">https://github.com/ganlanyuan/tiny-slider</a></p>
+var tinySliderInstance = carouselDC.tns;</code></pre>
+            </div>
 
-                </section>
-            </main>
+            <p>
+              To learn more about accessing specific properties and methods, as
+              well as setting custom events, visit:
+              <a href="https://github.com/ganlanyuan/tiny-slider" target="git"
+                >https://github.com/ganlanyuan/tiny-slider</a
+              >
+            </p>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Checkboxes/Standard/index.htm b/Templates/Checkboxes/Standard/index.htm
index a10f8d38..39cce1ce 100644
--- a/Templates/Checkboxes/Standard/index.htm
+++ b/Templates/Checkboxes/Standard/index.htm
@@ -1,150 +1,202 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Standard Checkboxes - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/checkboxes.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/checkboxes.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Standard/index.htm" aria-current="page">Standard</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Standard Checkboxes</h1>
-                        <section class="sample-block">
-
-                            <!--
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../Standard/index.htm" aria-current="page">Standard</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Standard Checkboxes</h1>
+              <section class="sample-block">
+                <!--
 IMPORTANT: The internal markup for an ARIA Checkbox must never include any other types of exposed active elements.
 Otherwise, based on how ARIA works in accordance with the spec, none of the embedded controls will be accessible to non-sighted screen reader users.
 -->
 
-                            <ul>
-                                <li>
-                                    <div data-check class="aria-checkbox agree">
-                                        <span>I Agree</span>
-                                        <input hidden type="checkbox" name="Agree" />
-                                    </div>
-                                </li>
-                                <li>
-                                    <div data-check class="aria-checkbox subscribe checked">
-                                        <span>Subscribe to Notifications</span>
-                                        <input checked hidden type="checkbox" name="Subscribe" />
-                                    </div>
-                                </li>
-                                <li>
-                                    <div data-check="mixed" class="aria-checkbox happy">
-                                        <span>Are you happy?</span>
-                                    </div>
-                                </li>
-                            </ul>
-
-                        </section>
+                <ul>
+                  <li>
+                    <div data-check class="aria-checkbox agree">
+                      <span>I Agree</span>
+                      <input hidden type="checkbox" name="Agree" />
                     </div>
-                    <div class="keyboard flex-item">
-                        <h2>The simulated checkboxes are optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus to the checkboxes using the keyboard.</li>
-                            <li>Press <kbd>Enter</kbd> or <kbd>Space</kbd> to activate a checkbox.</li>
-                            <li>Mouse users can click the desired checkbox to activate as usual.</li>
-                        </ul>
+                  </li>
+                  <li>
+                    <div data-check class="aria-checkbox subscribe checked">
+                      <span>Subscribe to Notifications</span>
+                      <input checked hidden type="checkbox" name="Subscribe" />
                     </div>
-                </div>
-
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+                  </li>
+                  <li>
+                    <div data-check="mixed" class="aria-checkbox happy">
+                      <span>Are you happy?</span>
+                    </div>
+                  </li>
+                </ul>
+              </section>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The simulated checkboxes are optimized for screen reader and
+                keyboard only users:
+              </h2>
+              <ul>
+                <li>Set focus to the checkboxes using the keyboard.</li>
+                <li>
+                  Press <kbd>Enter</kbd> or <kbd>Space</kbd> to activate a
+                  checkbox.
+                </li>
+                <li>
+                  Mouse users can click the desired checkbox to activate as
+                  usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Checkboxes/index.htm b/Templates/Checkboxes/index.htm
index d5144b94..947f4dd0 100644
--- a/Templates/Checkboxes/index.htm
+++ b/Templates/Checkboxes/index.htm
@@ -1,121 +1,178 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Checkboxes - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
+  </head>
 
-</head>
-
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Checkboxes</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="Standard/index.htm">Standard</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>The checkbox should be focusable using the keyboard, and toggle its checkable state when pressing the Spacebar or Enter key.</p>
-
-                    <p>The 4X ARIA Checkbox module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <p>The following attributes are handled automatically by the Checkbox module:</p>
-
-                    <ul>
-                        <li> role=checkbox</li>
-                        <li> aria-checked</li>
-                        <li> tabindex</li>
-                    </ul>
-
-                    <p>Available attributes for checkbox elements:</p>
-
-                    <ul>
-                        <li> data-check : May be set to "false", "true", or "mixed" to set the current state of a checkable control when rendered.</li>
-                        <li> aria-disabled : When set to "true" on the triggering element, will automatically disable associated functionality.</li>
-                    </ul>
-
-                    <p>Note: When dynamically disabling a triggering element, the 4X setDisabled() function should be used to set the disabled state of the triggering element. This will ensure proper background mapping.</p>
-
-                    <div>
-                        <pre><code class="language-javascript">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Checkboxes</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="Standard/index.htm">Standard</a></li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              The checkbox should be focusable using the keyboard, and toggle
+              its checkable state when pressing the Spacebar or Enter key.
+            </p>
+
+            <p>
+              The 4X ARIA Checkbox module automatically configures all required
+              ARIA attributes and focus handling, in strict accordance with the
+              ARIA specification.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the Checkbox
+              module:
+            </p>
+
+            <ul>
+              <li>role=checkbox</li>
+              <li>aria-checked</li>
+              <li>tabindex</li>
+            </ul>
+
+            <p>Available attributes for checkbox elements:</p>
+
+            <ul>
+              <li>
+                data-check : May be set to "false", "true", or "mixed" to set
+                the current state of a checkable control when rendered.
+              </li>
+              <li>
+                aria-disabled : When set to "true" on the triggering element,
+                will automatically disable associated functionality.
+              </li>
+            </ul>
+
+            <p>
+              Note: When dynamically disabling a triggering element, the 4X
+              setDisabled() function should be used to set the disabled state of
+              the triggering element. This will ensure proper background
+              mapping.
+            </p>
+
+            <div>
+              <pre><code class="language-javascript">
 $A.setDisabled(triggeringElement, boolean);
 </code></pre>
-                    </div>
+            </div>
 
-                    <h2>HTML syntax</h2>
+            <h2>HTML syntax</h2>
 
-                    <h3>Standard Unchecked</h3>
+            <h3>Standard Unchecked</h3>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;div data-check >
+            <div>
+              <pre><code class="language-markup">&lt;div data-check >
   Markup with checkbox name
   &lt;input hidden type="checkbox" name="OptionalBoundCheckbox" />
 &lt;/div></code></pre>
-                    </div>
+            </div>
 
-                    <h3>Standard Checked</h3>
+            <h3>Standard Checked</h3>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;div data-check="true" >
+            <div>
+              <pre><code class="language-markup">&lt;div data-check="true" >
   Markup with checkbox name
   &lt;input checked hidden type="checkbox" name="OptionalBoundCheckbox" />
 &lt;/div></code></pre>
-                    </div>
+            </div>
 
-                    <h3>Standard Partially-Checked</h3>
+            <h3>Standard Partially-Checked</h3>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;div data-check="mixed" >
+            <div>
+              <pre><code class="language-markup">&lt;div data-check="mixed" >
   Markup with checkbox name
 &lt;/div></code></pre>
-                    </div>
-
-                    <p>IMPORTANT: The focusable active element must not include any other exposed active elements, otherwise these will not be accessible to non-sighted screen reader users.</p>
-
-                    <p>Whenever a hidden checkbox is embedded within the simulated control, it will automatically reflect the toggled state of the parent element. This makes it possible to implement custom toggle controls that can be submitted in the same manner as native form controls. This, however, is optional, and may be removed without having any negative impact on the functionality of the simulated toggle control.</p>
-
-                    <h2>JavaScript syntax</h2>
+            </div>
 
-                    <div>
-                        <pre><code class="language-javascript">$A.setCheckbox( domNodeOrCSSSelectorForTriggeringElement , {
+            <p>
+              IMPORTANT: The focusable active element must not include any other
+              exposed active elements, otherwise these will not be accessible to
+              non-sighted screen reader users.
+            </p>
+
+            <p>
+              Whenever a hidden checkbox is embedded within the simulated
+              control, it will automatically reflect the toggled state of the
+              parent element. This makes it possible to implement custom toggle
+              controls that can be submitted in the same manner as native form
+              controls. This, however, is optional, and may be removed without
+              having any negative impact on the functionality of the simulated
+              toggle control.
+            </p>
+
+            <h2>JavaScript syntax</h2>
+
+            <div>
+              <pre><code class="language-javascript">$A.setCheckbox( domNodeOrCSSSelectorForTriggeringElement , {
 // Configure functionality key / value mappings
 });</code></pre>
-                    </div>
+            </div>
+
+            <ul>
+              <li>Module file: Button.js</li>
+              <li>Requires: AccName.js, RovingTabIndex.js.</li>
+              <li>Recommended: Velocity.js, VelocityUI.js.</li>
+            </ul>
 
-                    <h2>Parameters</h2>
+            <h2>Parameters</h2>
 
-                    <ol>
-                        <li>A DOM element or CSS selector to specify the triggering element</li>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <ol>
+              <li>
+                A DOM element or CSS selector to specify the triggering element
+              </li>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <h3>Configuration</h3>
+            <h3>Configuration</h3>
 
-                    <div>
-                        <pre><code class="language-javascript">{
+            <div>
+              <pre><code class="language-javascript">{
 
 // Set an explicit name for the checkbox.
 // If undefined, the accessible name will default to the text content within the checkbox element.
@@ -154,67 +211,96 @@ <h3>Configuration</h3>
 }
 
 }</code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Comboboxes/Native Inputs, Editable and Readonly/index.htm b/Templates/Comboboxes/Native Inputs, Editable and Readonly/index.htm
index 6f6eac74..543200a0 100644
--- a/Templates/Comboboxes/Native Inputs, Editable and Readonly/index.htm	
+++ b/Templates/Comboboxes/Native Inputs, Editable and Readonly/index.htm	
@@ -1,426 +1,587 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Comboboxes (Native Inputs, Editable and Readonly) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/combobox.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Comboboxes (Native Inputs, Editable and Readonly) - Apex 4X Technical
+      Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/combobox.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="index.htm" aria-current="page">Native Inputs, Editable and Readonly</a></li>
-                        <li><a href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm">Native Inputs, Editable with Substring Match</a></li>
-                        <li><a href="../Native%20Inputs,%20Editable%20with%20Word%20Match/index.htm">Native Inputs, Editable with Word Match</a></li>
-                        <li><a href="../Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match/index.htm">Native Inputs, Multiselect Editable with Substring Match</a></li>
-                        <li><a href="../Simulated,%20Readonly/index.htm">Simulated, Readonly</a></li>
-                        <li><a href="../Simulated,%20Readonly%20Multiselect/index.htm">Simulated, Readonly Multiselect</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Combobox <small>(Native Inputs, Editable and Readonly)</small></h1>
-                        <div class="form--container editable-readonly">
-                            <form id="frm1">
-                                <fieldset>
-                                    <legend> Home Address</legend>
-                                    <p>
-                                        <label for="strt">Street:</label>
-                                        <input type="text" name="street" required aria-required="true" id="strt">
-                                    </p>
-                                    <p>
-                                        <label for="cty">City:</label>
-                                        <input type="text" name="city" required aria-required="true" id="cty">
-                                    </p>
-                                    <p>
-                                        <label for="stt">State or province:</label>
-                                        <input type="text" name="state-input-value" required id="stt" class="aria-combobox">
-                                        <!-- For editable Input elements:
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="index.htm" aria-current="page"
+                  >Native Inputs, Editable and Readonly</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm"
+                  >Native Inputs, Editable with Substring Match</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Editable%20with%20Word%20Match/index.htm"
+                  >Native Inputs, Editable with Word Match</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match/index.htm"
+                  >Native Inputs, Multiselect Editable with Substring Match</a
+                >
+              </li>
+              <li>
+                <a href="../Simulated,%20Readonly/index.htm"
+                  >Simulated, Readonly</a
+                >
+              </li>
+              <li>
+                <a href="../Simulated,%20Readonly%20Multiselect/index.htm"
+                  >Simulated, Readonly Multiselect</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Combobox
+                <small>(Native Inputs, Editable and Readonly)</small>
+              </h1>
+              <div class="form--container editable-readonly">
+                <form id="frm1">
+                  <fieldset>
+                    <legend>Home Address</legend>
+                    <p>
+                      <label for="strt">Street:</label>
+                      <input
+                        type="text"
+                        name="street"
+                        required
+                        aria-required="true"
+                        id="strt"
+                      />
+                    </p>
+                    <p>
+                      <label for="cty">City:</label>
+                      <input
+                        type="text"
+                        name="city"
+                        required
+                        aria-required="true"
+                        id="cty"
+                      />
+                    </p>
+                    <p>
+                      <label for="stt">State or province:</label>
+                      <input
+                        type="text"
+                        name="state-input-value"
+                        required
+                        id="stt"
+                        class="aria-combobox"
+                      />
+                      <!-- For editable Input elements:
                                         To ensure accessibility for non-sighted touch screen device users, a dynamic Close icon is needed.
                                         This must include an active element role such as 'button' or 'link', and include informative label text. -->
-                                        <img id="mobileCloseIcon" class="hidden" src="img/close.png" role="button" title="Close State Dropdown" aria-label="Close State Dropdown">
-                                    </p>
-                                    <p>
-                                        <label for="zp">Zipcode:</label>
-                                        <input type="text" name="zipcode" required aria-required="true" id="zp">
-                                    </p>
-                                    <p class="select--container">
-                                        <label for="ctry">Country:</label>
-                                        <input type="text" name="country-input-value" required readonly id="ctry" class="aria-combobox">
-                                        <!--
+                      <img
+                        id="mobileCloseIcon"
+                        class="hidden"
+                        src="img/close.png"
+                        role="button"
+                        title="Close State Dropdown"
+                        aria-label="Close State Dropdown"
+                      />
+                    </p>
+                    <p>
+                      <label for="zp">Zipcode:</label>
+                      <input
+                        type="text"
+                        name="zipcode"
+                        required
+                        aria-required="true"
+                        id="zp"
+                      />
+                    </p>
+                    <p class="select--container">
+                      <label for="ctry">Country:</label>
+                      <input
+                        type="text"
+                        name="country-input-value"
+                        required
+                        readonly
+                        id="ctry"
+                        class="aria-combobox"
+                      />
+                      <!--
                                         For readonly Input elements:
                                         To ensure accessibility for sighted mouse and non-sighted touch screen device users, a dynamic Toggle icon is needed.
                                         This must include informative label text.
                                         -->
-                                        <img id="ctryIcon" class="btn--select--expand" title="Country selector" src="img/down.svg" alt="Open options">
-                                    </p>
-                                </fieldset>
-                                <p>
-                                    <input type="submit" value="Submit">
-                                </p>
-                            </form>
-                        </div>
-                        <div class="note">
-                            <p>The State field is an editable ARIA Combobox widget that uses a native Input element. The Country field is a readonly ARIA Combobox widget that uses a native Input element.</p>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The native input comboboxes are optimized for screen reader and keyboard only users.</h2>
-                        <ul>
-                            <li>Set focus to the State or Country fields to open the combobox control.</li>
-                            <li>Within a combobox that is not readonly, first type into the field, then press the <kbd class="down">Down</kbd> arrow
-                                to navigate into the dropdown and use the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate available options.</li>
-                            <li>Press any other letter or number, or the <kbd class="left">Left</kbd> or <kbd class="right">Right</kbd> arrow keys to then
-                                move focus back into the Input for editing.</li>
-                            <li>Within a combobox that is readonly, press the <kbd class="down">Down</kbd> arrow or click the trigger icon to open the dropdown.</li>
-                            <li>Press any letter or number within a readonly field to jump to an option starting with that character or digit.</li>
-                            <li>Press <kbd>Enter</kbd> or <kbd>Alt</kbd>+<kbd>Up</kbd> to close the dropdown and save the selection.</li>
-                            <li>To cancel, press <kbd>Escape</kbd>, <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> to close the dropdown.</li>
-                            <li>Sighted mouse users can click the desired option to save the selection and close the dropdown.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
+                      <img
+                        id="ctryIcon"
+                        class="btn--select--expand"
+                        title="Country selector"
+                        src="img/down.svg"
+                        alt="Open options"
+                      />
                     </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+                  </fieldset>
+                  <p>
+                    <input type="submit" value="Submit" />
+                  </p>
+                </form>
+              </div>
+              <div class="note">
+                <p>
+                  The State field is an editable ARIA Combobox widget that uses
+                  a native Input element. The Country field is a readonly ARIA
+                  Combobox widget that uses a native Input element.
+                </p>
+              </div>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>
+                The native input comboboxes are optimized for screen reader and
+                keyboard only users.
+              </h2>
+              <ul>
+                <li>
+                  Set focus to the State or Country fields to open the combobox
+                  control.
+                </li>
+                <li>
+                  Within a combobox that is not readonly, first type into the
+                  field, then press the <kbd class="down">Down</kbd> arrow to
+                  navigate into the dropdown and use the
+                  <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate available
+                  options.
+                </li>
+                <li>
+                  Press any other letter or number, or the
+                  <kbd class="left">Left</kbd> or
+                  <kbd class="right">Right</kbd> arrow keys to then move focus
+                  back into the Input for editing.
+                </li>
+                <li>
+                  Within a combobox that is readonly, press the
+                  <kbd class="down">Down</kbd> arrow or click the trigger icon
+                  to open the dropdown.
+                </li>
+                <li>
+                  Press any letter or number within a readonly field to jump to
+                  an option starting with that character or digit.
+                </li>
+                <li>
+                  Press <kbd>Enter</kbd> or <kbd>Alt</kbd>+<kbd>Up</kbd> to
+                  close the dropdown and save the selection.
+                </li>
+                <li>
+                  To cancel, press <kbd>Escape</kbd>, <kbd>Tab</kbd> or
+                  <kbd>Shift</kbd>+<kbd>Tab</kbd> to close the dropdown.
+                </li>
+                <li>
+                  Sighted mouse users can click the desired option to save the
+                  selection and close the dropdown.
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-    <select name="state-select-value" id="states" style="display: none;">
-        <option value="Alabama">Alabama</option>
-        <option value="Alaska">Alaska</option>
-        <option value="Arizona">Arizona</option>
-        <option value="Arkansas">Arkansas</option>
-        <option value="California">California</option>
-        <option value="Colorado">Colorado</option>
-        <option value="Connecticut">Connecticut</option>
-        <option value="Delaware">Delaware</option>
-        <option value="Florida">Florida</option>
-        <option value="Georgia">Georgia</option>
-        <option value="Hawaii">Hawaii</option>
-        <option value="Idaho">Idaho</option>
-        <option value="Illinois">Illinois</option>
-        <option value="Indiana">Indiana</option>
-        <option value="Iowa">Iowa</option>
-        <option value="Kansas">Kansas</option>
-        <option value="Kentucky">Kentucky</option>
-        <option value="Louisiana">Louisiana</option>
-        <option value="Maine">Maine</option>
-        <option value="Maryland">Maryland</option>
-        <option value="Massachusetts">Massachusetts</option>
-        <option value="Michigan">Michigan</option>
-        <option value="Minnesota">Minnesota</option>
-        <option value="Mississippi">Mississippi</option>
-        <option value="Missouri">Missouri</option>
-        <option value="Montana">Montana</option>
-        <option value="Nebraska">Nebraska</option>
-        <option value="Nevada">Nevada</option>
-        <option value="New Hampshire">New Hampshire</option>
-        <option value="New Jersey">New Jersey</option>
-        <option value="New Mexico">New Mexico</option>
-        <option value="New York">New York</option>
-        <option value="North Carolina">North Carolina</option>
-        <option value="North Dakota">North Dakota</option>
-        <option value="Ohio">Ohio</option>
-        <option value="Oklahoma">Oklahoma</option>
-        <option value="Oregon">Oregon</option>
-        <option value="Pennsylvania">Pennsylvania</option>
-        <option value="Rhode Island">Rhode Island</option>
-        <option value="South Carolina">South Carolina</option>
-        <option value="South Dakota">South Dakota</option>
-        <option value="Tennessee">Tennessee</option>
-        <option value="Texas">Texas</option>
-        <option value="Utah">Utah</option>
-        <option value="Vermont">Vermont</option>
-        <option value="Virginia">Virginia</option>
-        <option value="Washington">Washington</option>
-        <option value="West Virginia">West Virginia</option>
-        <option value="Wisconsin">Wisconsin</option>
-        <option value="Wyoming">Wyoming</option>
+    <select name="state-select-value" id="states" style="display: none">
+      <option value="Alabama">Alabama</option>
+      <option value="Alaska">Alaska</option>
+      <option value="Arizona">Arizona</option>
+      <option value="Arkansas">Arkansas</option>
+      <option value="California">California</option>
+      <option value="Colorado">Colorado</option>
+      <option value="Connecticut">Connecticut</option>
+      <option value="Delaware">Delaware</option>
+      <option value="Florida">Florida</option>
+      <option value="Georgia">Georgia</option>
+      <option value="Hawaii">Hawaii</option>
+      <option value="Idaho">Idaho</option>
+      <option value="Illinois">Illinois</option>
+      <option value="Indiana">Indiana</option>
+      <option value="Iowa">Iowa</option>
+      <option value="Kansas">Kansas</option>
+      <option value="Kentucky">Kentucky</option>
+      <option value="Louisiana">Louisiana</option>
+      <option value="Maine">Maine</option>
+      <option value="Maryland">Maryland</option>
+      <option value="Massachusetts">Massachusetts</option>
+      <option value="Michigan">Michigan</option>
+      <option value="Minnesota">Minnesota</option>
+      <option value="Mississippi">Mississippi</option>
+      <option value="Missouri">Missouri</option>
+      <option value="Montana">Montana</option>
+      <option value="Nebraska">Nebraska</option>
+      <option value="Nevada">Nevada</option>
+      <option value="New Hampshire">New Hampshire</option>
+      <option value="New Jersey">New Jersey</option>
+      <option value="New Mexico">New Mexico</option>
+      <option value="New York">New York</option>
+      <option value="North Carolina">North Carolina</option>
+      <option value="North Dakota">North Dakota</option>
+      <option value="Ohio">Ohio</option>
+      <option value="Oklahoma">Oklahoma</option>
+      <option value="Oregon">Oregon</option>
+      <option value="Pennsylvania">Pennsylvania</option>
+      <option value="Rhode Island">Rhode Island</option>
+      <option value="South Carolina">South Carolina</option>
+      <option value="South Dakota">South Dakota</option>
+      <option value="Tennessee">Tennessee</option>
+      <option value="Texas">Texas</option>
+      <option value="Utah">Utah</option>
+      <option value="Vermont">Vermont</option>
+      <option value="Virginia">Virginia</option>
+      <option value="Washington">Washington</option>
+      <option value="West Virginia">West Virginia</option>
+      <option value="Wisconsin">Wisconsin</option>
+      <option value="Wyoming">Wyoming</option>
     </select>
-    <select name="country-select-value" id="countries" style="display: none;">
-        <option value="Afghanistan">Afghanistan</option>
-        <option value="Albania">Albania</option>
-        <option value="Algeria">Algeria</option>
-        <option value="Andorra">Andorra</option>
-        <option value="Angola">Angola</option>
-        <option value="Antigua &amp;amp; Deps">Antigua &amp; Deps</option>
-        <option value="Argentina">Argentina</option>
-        <option value="Armenia">Armenia</option>
-        <option value="Australia">Australia</option>
-        <option value="Austria">Austria</option>
-        <option value="Azerbaijan">Azerbaijan</option>
-        <option value="Bahamas">Bahamas</option>
-        <option value="Bahrain">Bahrain</option>
-        <option value="Bangladesh">Bangladesh</option>
-        <option value="Barbados">Barbados</option>
-        <option value="Belarus">Belarus</option>
-        <option value="Belgium">Belgium</option>
-        <option value="Belize">Belize</option>
-        <option value="Benin">Benin</option>
-        <option value="Bhutan">Bhutan</option>
-        <option value="Bolivia">Bolivia</option>
-        <option value="Bosnia Herzegovina">Bosnia Herzegovina</option>
-        <option value="Botswana">Botswana</option>
-        <option value="Brazil">Brazil</option>
-        <option value="Brunei">Brunei</option>
-        <option value="Bulgaria">Bulgaria</option>
-        <option value="Burkina">Burkina</option>
-        <option value="Burundi">Burundi</option>
-        <option value="Cambodia">Cambodia</option>
-        <option value="Cameroon">Cameroon</option>
-        <option value="Canada">Canada</option>
-        <option value="Cape Verde">Cape Verde</option>
-        <option value="Central African Rep">Central African Rep</option>
-        <option value="Chad">Chad</option>
-        <option value="Chile">Chile</option>
-        <option value="China">China</option>
-        <option value="Colombia">Colombia</option>
-        <option value="Comoros">Comoros</option>
-        <option value="Congo">Congo</option>
-        <option value="Congo {Democratic Rep}">Congo {Democratic Rep}</option>
-        <option value="Costa Rica">Costa Rica</option>
-        <option value="Croatia">Croatia</option>
-        <option value="Cuba">Cuba</option>
-        <option value="Cyprus">Cyprus</option>
-        <option value="Czech Republic">Czech Republic</option>
-        <option value="Denmark">Denmark</option>
-        <option value="Djibouti">Djibouti</option>
-        <option value="Dominica">Dominica</option>
-        <option value="Dominican Republic">Dominican Republic</option>
-        <option value="East Timor">East Timor</option>
-        <option value="Ecuador">Ecuador</option>
-        <option value="Egypt">Egypt</option>
-        <option value="El Salvador">El Salvador</option>
-        <option value="Equatorial Guinea">Equatorial Guinea</option>
-        <option value="Eritrea">Eritrea</option>
-        <option value="Estonia">Estonia</option>
-        <option value="Ethiopia">Ethiopia</option>
-        <option value="Fiji">Fiji</option>
-        <option value="Finland">Finland</option>
-        <option value="France">France</option>
-        <option value="Gabon">Gabon</option>
-        <option value="Gambia">Gambia</option>
-        <option value="Georgia">Georgia</option>
-        <option value="Germany">Germany</option>
-        <option value="Ghana">Ghana</option>
-        <option value="Greece">Greece</option>
-        <option value="Grenada">Grenada</option>
-        <option value="Guatemala">Guatemala</option>
-        <option value="Guinea">Guinea</option>
-        <option value="Guinea-Bissau">Guinea-Bissau</option>
-        <option value="Guyana">Guyana</option>
-        <option value="Haiti">Haiti</option>
-        <option value="Honduras">Honduras</option>
-        <option value="Hungary">Hungary</option>
-        <option value="Iceland">Iceland</option>
-        <option value="India">India</option>
-        <option value="Indonesia">Indonesia</option>
-        <option value="Iran">Iran</option>
-        <option value="Iraq">Iraq</option>
-        <option value="Ireland {Republic}">Ireland {Republic}</option>
-        <option value="Israel">Israel</option>
-        <option value="Italy">Italy</option>
-        <option value="Ivory Coast">Ivory Coast</option>
-        <option value="Jamaica">Jamaica</option>
-        <option value="Japan">Japan</option>
-        <option value="Jordan">Jordan</option>
-        <option value="Kazakhstan">Kazakhstan</option>
-        <option value="Kenya">Kenya</option>
-        <option value="Kiribati">Kiribati</option>
-        <option value="Korea North">Korea North</option>
-        <option value="Korea South">Korea South</option>
-        <option value="Kosovo">Kosovo</option>
-        <option value="Kuwait">Kuwait</option>
-        <option value="Kyrgyzstan">Kyrgyzstan</option>
-        <option value="Laos">Laos</option>
-        <option value="Latvia">Latvia</option>
-        <option value="Lebanon">Lebanon</option>
-        <option value="Lesotho">Lesotho</option>
-        <option value="Liberia">Liberia</option>
-        <option value="Libya">Libya</option>
-        <option value="Liechtenstein">Liechtenstein</option>
-        <option value="Lithuania">Lithuania</option>
-        <option value="Luxembourg">Luxembourg</option>
-        <option value="Macedonia">Macedonia</option>
-        <option value="Madagascar">Madagascar</option>
-        <option value="Malawi">Malawi</option>
-        <option value="Malaysia">Malaysia</option>
-        <option value="Maldives">Maldives</option>
-        <option value="Mali">Mali</option>
-        <option value="Malta">Malta</option>
-        <option value="Marshall Islands">Marshall Islands</option>
-        <option value="Mauritania">Mauritania</option>
-        <option value="Mauritius">Mauritius</option>
-        <option value="Mexico">Mexico</option>
-        <option value="Micronesia">Micronesia</option>
-        <option value="Moldova">Moldova</option>
-        <option value="Monaco">Monaco</option>
-        <option value="Mongolia">Mongolia</option>
-        <option value="Montenegro">Montenegro</option>
-        <option value="Morocco">Morocco</option>
-        <option value="Mozambique">Mozambique</option>
-        <option value="Myanmar">Myanmar</option>
-        <option value=" {Burma}"> {Burma}</option>
-        <option value="Namibia">Namibia</option>
-        <option value="Nauru">Nauru</option>
-        <option value="Nepal">Nepal</option>
-        <option value="Netherlands">Netherlands</option>
-        <option value="New Zealand">New Zealand</option>
-        <option value="Nicaragua">Nicaragua</option>
-        <option value="Niger">Niger</option>
-        <option value="Nigeria">Nigeria</option>
-        <option value="Norway">Norway</option>
-        <option value="Oman">Oman</option>
-        <option value="Pakistan">Pakistan</option>
-        <option value="Palau">Palau</option>
-        <option value="Panama">Panama</option>
-        <option value="Papua New Guinea">Papua New Guinea</option>
-        <option value="Paraguay">Paraguay</option>
-        <option value="Peru">Peru</option>
-        <option value="Philippines">Philippines</option>
-        <option value="Poland">Poland</option>
-        <option value="Portugal">Portugal</option>
-        <option value="Qatar">Qatar</option>
-        <option value="Romania">Romania</option>
-        <option value="Russian Federation">Russian Federation</option>
-        <option value="Rwanda">Rwanda</option>
-        <option value="St Kitts &amp;amp; Nevis">St Kitts &amp; Nevis</option>
-        <option value="St Lucia">St Lucia</option>
-        <option value="Saint Vincent &amp;amp; the Grenadines">Saint Vincent &amp; the Grenadines</option>
-        <option value="Samoa">Samoa</option>
-        <option value="San Marino">San Marino</option>
-        <option value="Sao Tome &amp;amp; Principe">Sao Tome &amp; Principe</option>
-        <option value="Saudi Arabia">Saudi Arabia</option>
-        <option value="Senegal">Senegal</option>
-        <option value="Serbia">Serbia</option>
-        <option value="Seychelles">Seychelles</option>
-        <option value="Sierra Leone">Sierra Leone</option>
-        <option value="Singapore">Singapore</option>
-        <option value="Slovakia">Slovakia</option>
-        <option value="Slovenia">Slovenia</option>
-        <option value="Solomon Islands">Solomon Islands</option>
-        <option value="Somalia">Somalia</option>
-        <option value="South Africa">South Africa</option>
-        <option value="Spain">Spain</option>
-        <option value="Sri Lanka">Sri Lanka</option>
-        <option value="Sudan">Sudan</option>
-        <option value="Suriname">Suriname</option>
-        <option value="Swaziland">Swaziland</option>
-        <option value="Sweden">Sweden</option>
-        <option value="Switzerland">Switzerland</option>
-        <option value="Syria">Syria</option>
-        <option value="Taiwan">Taiwan</option>
-        <option value="Tajikistan">Tajikistan</option>
-        <option value="Tanzania">Tanzania</option>
-        <option value="Thailand">Thailand</option>
-        <option value="Togo">Togo</option>
-        <option value="Tonga">Tonga</option>
-        <option value="Trinidad &amp;amp; Tobago">Trinidad &amp; Tobago</option>
-        <option value="Tunisia">Tunisia</option>
-        <option value="Turkey">Turkey</option>
-        <option value="Turkmenistan">Turkmenistan</option>
-        <option value="Tuvalu">Tuvalu</option>
-        <option value="Uganda">Uganda</option>
-        <option value="Ukraine">Ukraine</option>
-        <option value="United Arab Emirates">United Arab Emirates</option>
-        <option value="United Kingdom">United Kingdom</option>
-        <option selected value="United States">United States</option>
-        <option value="Uruguay">Uruguay</option>
-        <option value="Uzbekistan">Uzbekistan</option>
-        <option value="Vanuatu">Vanuatu</option>
-        <option value="Vatican City">Vatican City</option>
-        <option value="Venezuela">Venezuela</option>
-        <option value="Vietnam">Vietnam</option>
-        <option value="Yemen">Yemen</option>
-        <option value="Zambia">Zambia</option>
-        <option value="Zimbabwe">Zimbabwe</option>
+    <select name="country-select-value" id="countries" style="display: none">
+      <option value="Afghanistan">Afghanistan</option>
+      <option value="Albania">Albania</option>
+      <option value="Algeria">Algeria</option>
+      <option value="Andorra">Andorra</option>
+      <option value="Angola">Angola</option>
+      <option value="Antigua &amp;amp; Deps">Antigua &amp; Deps</option>
+      <option value="Argentina">Argentina</option>
+      <option value="Armenia">Armenia</option>
+      <option value="Australia">Australia</option>
+      <option value="Austria">Austria</option>
+      <option value="Azerbaijan">Azerbaijan</option>
+      <option value="Bahamas">Bahamas</option>
+      <option value="Bahrain">Bahrain</option>
+      <option value="Bangladesh">Bangladesh</option>
+      <option value="Barbados">Barbados</option>
+      <option value="Belarus">Belarus</option>
+      <option value="Belgium">Belgium</option>
+      <option value="Belize">Belize</option>
+      <option value="Benin">Benin</option>
+      <option value="Bhutan">Bhutan</option>
+      <option value="Bolivia">Bolivia</option>
+      <option value="Bosnia Herzegovina">Bosnia Herzegovina</option>
+      <option value="Botswana">Botswana</option>
+      <option value="Brazil">Brazil</option>
+      <option value="Brunei">Brunei</option>
+      <option value="Bulgaria">Bulgaria</option>
+      <option value="Burkina">Burkina</option>
+      <option value="Burundi">Burundi</option>
+      <option value="Cambodia">Cambodia</option>
+      <option value="Cameroon">Cameroon</option>
+      <option value="Canada">Canada</option>
+      <option value="Cape Verde">Cape Verde</option>
+      <option value="Central African Rep">Central African Rep</option>
+      <option value="Chad">Chad</option>
+      <option value="Chile">Chile</option>
+      <option value="China">China</option>
+      <option value="Colombia">Colombia</option>
+      <option value="Comoros">Comoros</option>
+      <option value="Congo">Congo</option>
+      <option value="Congo {Democratic Rep}">Congo {Democratic Rep}</option>
+      <option value="Costa Rica">Costa Rica</option>
+      <option value="Croatia">Croatia</option>
+      <option value="Cuba">Cuba</option>
+      <option value="Cyprus">Cyprus</option>
+      <option value="Czech Republic">Czech Republic</option>
+      <option value="Denmark">Denmark</option>
+      <option value="Djibouti">Djibouti</option>
+      <option value="Dominica">Dominica</option>
+      <option value="Dominican Republic">Dominican Republic</option>
+      <option value="East Timor">East Timor</option>
+      <option value="Ecuador">Ecuador</option>
+      <option value="Egypt">Egypt</option>
+      <option value="El Salvador">El Salvador</option>
+      <option value="Equatorial Guinea">Equatorial Guinea</option>
+      <option value="Eritrea">Eritrea</option>
+      <option value="Estonia">Estonia</option>
+      <option value="Ethiopia">Ethiopia</option>
+      <option value="Fiji">Fiji</option>
+      <option value="Finland">Finland</option>
+      <option value="France">France</option>
+      <option value="Gabon">Gabon</option>
+      <option value="Gambia">Gambia</option>
+      <option value="Georgia">Georgia</option>
+      <option value="Germany">Germany</option>
+      <option value="Ghana">Ghana</option>
+      <option value="Greece">Greece</option>
+      <option value="Grenada">Grenada</option>
+      <option value="Guatemala">Guatemala</option>
+      <option value="Guinea">Guinea</option>
+      <option value="Guinea-Bissau">Guinea-Bissau</option>
+      <option value="Guyana">Guyana</option>
+      <option value="Haiti">Haiti</option>
+      <option value="Honduras">Honduras</option>
+      <option value="Hungary">Hungary</option>
+      <option value="Iceland">Iceland</option>
+      <option value="India">India</option>
+      <option value="Indonesia">Indonesia</option>
+      <option value="Iran">Iran</option>
+      <option value="Iraq">Iraq</option>
+      <option value="Ireland {Republic}">Ireland {Republic}</option>
+      <option value="Israel">Israel</option>
+      <option value="Italy">Italy</option>
+      <option value="Ivory Coast">Ivory Coast</option>
+      <option value="Jamaica">Jamaica</option>
+      <option value="Japan">Japan</option>
+      <option value="Jordan">Jordan</option>
+      <option value="Kazakhstan">Kazakhstan</option>
+      <option value="Kenya">Kenya</option>
+      <option value="Kiribati">Kiribati</option>
+      <option value="Korea North">Korea North</option>
+      <option value="Korea South">Korea South</option>
+      <option value="Kosovo">Kosovo</option>
+      <option value="Kuwait">Kuwait</option>
+      <option value="Kyrgyzstan">Kyrgyzstan</option>
+      <option value="Laos">Laos</option>
+      <option value="Latvia">Latvia</option>
+      <option value="Lebanon">Lebanon</option>
+      <option value="Lesotho">Lesotho</option>
+      <option value="Liberia">Liberia</option>
+      <option value="Libya">Libya</option>
+      <option value="Liechtenstein">Liechtenstein</option>
+      <option value="Lithuania">Lithuania</option>
+      <option value="Luxembourg">Luxembourg</option>
+      <option value="Macedonia">Macedonia</option>
+      <option value="Madagascar">Madagascar</option>
+      <option value="Malawi">Malawi</option>
+      <option value="Malaysia">Malaysia</option>
+      <option value="Maldives">Maldives</option>
+      <option value="Mali">Mali</option>
+      <option value="Malta">Malta</option>
+      <option value="Marshall Islands">Marshall Islands</option>
+      <option value="Mauritania">Mauritania</option>
+      <option value="Mauritius">Mauritius</option>
+      <option value="Mexico">Mexico</option>
+      <option value="Micronesia">Micronesia</option>
+      <option value="Moldova">Moldova</option>
+      <option value="Monaco">Monaco</option>
+      <option value="Mongolia">Mongolia</option>
+      <option value="Montenegro">Montenegro</option>
+      <option value="Morocco">Morocco</option>
+      <option value="Mozambique">Mozambique</option>
+      <option value="Myanmar">Myanmar</option>
+      <option value=" {Burma}">{Burma}</option>
+      <option value="Namibia">Namibia</option>
+      <option value="Nauru">Nauru</option>
+      <option value="Nepal">Nepal</option>
+      <option value="Netherlands">Netherlands</option>
+      <option value="New Zealand">New Zealand</option>
+      <option value="Nicaragua">Nicaragua</option>
+      <option value="Niger">Niger</option>
+      <option value="Nigeria">Nigeria</option>
+      <option value="Norway">Norway</option>
+      <option value="Oman">Oman</option>
+      <option value="Pakistan">Pakistan</option>
+      <option value="Palau">Palau</option>
+      <option value="Panama">Panama</option>
+      <option value="Papua New Guinea">Papua New Guinea</option>
+      <option value="Paraguay">Paraguay</option>
+      <option value="Peru">Peru</option>
+      <option value="Philippines">Philippines</option>
+      <option value="Poland">Poland</option>
+      <option value="Portugal">Portugal</option>
+      <option value="Qatar">Qatar</option>
+      <option value="Romania">Romania</option>
+      <option value="Russian Federation">Russian Federation</option>
+      <option value="Rwanda">Rwanda</option>
+      <option value="St Kitts &amp;amp; Nevis">St Kitts &amp; Nevis</option>
+      <option value="St Lucia">St Lucia</option>
+      <option value="Saint Vincent &amp;amp; the Grenadines">
+        Saint Vincent &amp; the Grenadines
+      </option>
+      <option value="Samoa">Samoa</option>
+      <option value="San Marino">San Marino</option>
+      <option value="Sao Tome &amp;amp; Principe">
+        Sao Tome &amp; Principe
+      </option>
+      <option value="Saudi Arabia">Saudi Arabia</option>
+      <option value="Senegal">Senegal</option>
+      <option value="Serbia">Serbia</option>
+      <option value="Seychelles">Seychelles</option>
+      <option value="Sierra Leone">Sierra Leone</option>
+      <option value="Singapore">Singapore</option>
+      <option value="Slovakia">Slovakia</option>
+      <option value="Slovenia">Slovenia</option>
+      <option value="Solomon Islands">Solomon Islands</option>
+      <option value="Somalia">Somalia</option>
+      <option value="South Africa">South Africa</option>
+      <option value="Spain">Spain</option>
+      <option value="Sri Lanka">Sri Lanka</option>
+      <option value="Sudan">Sudan</option>
+      <option value="Suriname">Suriname</option>
+      <option value="Swaziland">Swaziland</option>
+      <option value="Sweden">Sweden</option>
+      <option value="Switzerland">Switzerland</option>
+      <option value="Syria">Syria</option>
+      <option value="Taiwan">Taiwan</option>
+      <option value="Tajikistan">Tajikistan</option>
+      <option value="Tanzania">Tanzania</option>
+      <option value="Thailand">Thailand</option>
+      <option value="Togo">Togo</option>
+      <option value="Tonga">Tonga</option>
+      <option value="Trinidad &amp;amp; Tobago">Trinidad &amp; Tobago</option>
+      <option value="Tunisia">Tunisia</option>
+      <option value="Turkey">Turkey</option>
+      <option value="Turkmenistan">Turkmenistan</option>
+      <option value="Tuvalu">Tuvalu</option>
+      <option value="Uganda">Uganda</option>
+      <option value="Ukraine">Ukraine</option>
+      <option value="United Arab Emirates">United Arab Emirates</option>
+      <option value="United Kingdom">United Kingdom</option>
+      <option selected value="United States">United States</option>
+      <option value="Uruguay">Uruguay</option>
+      <option value="Uzbekistan">Uzbekistan</option>
+      <option value="Vanuatu">Vanuatu</option>
+      <option value="Vatican City">Vatican City</option>
+      <option value="Venezuela">Venezuela</option>
+      <option value="Vietnam">Vietnam</option>
+      <option value="Yemen">Yemen</option>
+      <option value="Zambia">Zambia</option>
+      <option value="Zimbabwe">Zimbabwe</option>
     </select>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Comboboxes/Native Inputs, Editable and Readonly/js/setup.js b/Templates/Comboboxes/Native Inputs, Editable and Readonly/js/setup.js
index 281defea..2af5a5fe 100644
--- a/Templates/Comboboxes/Native Inputs, Editable and Readonly/js/setup.js	
+++ b/Templates/Comboboxes/Native Inputs, Editable and Readonly/js/setup.js	
@@ -68,8 +68,8 @@ $A.import(["CurrentDevice", "Combobox"], { defer: true }, function () {
     window.device.type === "mobile"
       ? 3
       : window.device.type === "tablet"
-      ? 5
-      : 7,
+        ? 5
+        : 7,
   );
 
   // Get the Close icon triggering element for sighted mouse and touch device users
@@ -163,8 +163,8 @@ $A.import(["CurrentDevice", "Combobox"], { defer: true }, function () {
     window.device.type === "mobile"
       ? 3
       : window.device.type === "tablet"
-      ? 5
-      : 7,
+        ? 5
+        : 7,
   );
 
   myCountryCombobox.start();
diff --git a/Templates/Comboboxes/Native Inputs, Editable with Substring Match/index.htm b/Templates/Comboboxes/Native Inputs, Editable with Substring Match/index.htm
index 18dbf7ea..2bbd8836 100644
--- a/Templates/Comboboxes/Native Inputs, Editable with Substring Match/index.htm	
+++ b/Templates/Comboboxes/Native Inputs, Editable with Substring Match/index.htm	
@@ -1,316 +1,581 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Comboboxes (Native Inputs, Editable with Substring Match) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/combobox.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Comboboxes (Native Inputs, Editable with Substring Match) - Apex 4X
+      Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/combobox.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Native%20Inputs,%20Editable%20and%20Readonly/index.htm">Native Inputs, Editable and Readonly</a></li>
-                        <li><a href="index.htm" aria-current="page">Native Inputs, Editable with Substring Match</a></li>
-                        <li><a href="../Native%20Inputs,%20Editable%20with%20Word%20Match/index.htm">Native Inputs, Editable with Word Match</a></li>
-                        <li><a href="../Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match/index.htm">Native Inputs, Multiselect Editable with Substring Match</a></li>
-                        <li><a href="../Simulated,%20Readonly/index.htm">Simulated, Readonly</a></li>
-                        <li><a href="../Simulated,%20Readonly%20Multiselect/index.htm">Simulated, Readonly Multiselect</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Combobox <small>(Native Inputs, Editable and Substring Match)</small></h1>
-                        <div class="form--container">
-                            <form method="post" action="#">
-                                <fieldset>
-                                    <legend> Author Search</legend>
-                                    <p class="select--container">
-                                        <label for="authrEdit">Author name:</label>
-                                        <input type="text" name="author-input-value" required id="authrEdit" class="aria-combobox">
-                                        <!--
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Editable%20and%20Readonly/index.htm"
+                  >Native Inputs, Editable and Readonly</a
+                >
+              </li>
+              <li>
+                <a href="index.htm" aria-current="page"
+                  >Native Inputs, Editable with Substring Match</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Editable%20with%20Word%20Match/index.htm"
+                  >Native Inputs, Editable with Word Match</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match/index.htm"
+                  >Native Inputs, Multiselect Editable with Substring Match</a
+                >
+              </li>
+              <li>
+                <a href="../Simulated,%20Readonly/index.htm"
+                  >Simulated, Readonly</a
+                >
+              </li>
+              <li>
+                <a href="../Simulated,%20Readonly%20Multiselect/index.htm"
+                  >Simulated, Readonly Multiselect</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Combobox
+                <small>(Native Inputs, Editable and Substring Match)</small>
+              </h1>
+              <div class="form--container">
+                <form method="post" action="#">
+                  <fieldset>
+                    <legend>Author Search</legend>
+                    <p class="select--container">
+                      <label for="authrEdit">Author name:</label>
+                      <input
+                        type="text"
+                        name="author-input-value"
+                        required
+                        id="authrEdit"
+                        class="aria-combobox"
+                      />
+                      <!--
                                         For editable Input elements:
                                         To ensure accessibility for non-sighted touch screen device users, a dynamic Close icon is needed.
                                         This must include an active element role such as 'button' or 'link', and include informative label text.
                                         -->
-                                        <img id="mobileCloseIcon" class="hidden" src="img/close.png" role="button" title="Close Suggestion Dropdown" alt="Close" aria-label="Close Suggestion Dropdown">
-                                    </p>
-                                    <p>
-                                        <input type="submit" id="authrBtn" value="Submit">
-                                    </p>
-                                </fieldset>
-                            </form>
-                        </div>
-                        <div class="note">
-                            <p>The Author field is an editable ARIA Combobox widget that uses a native Input element.
-                                <br />
-                                Substring matches are used to render suggestions.
-                                <br />
-                                Type "fantasy", "humor", "scifi", or other strings to match.
-                            </p>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The native input combobox is optomized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus to the Author field to open the combobox control.</li>
-                            <li>Within the combobox, first type into the field, then press the <kbd class="down">Down</kbd> arrow to navigate
-                                into the dropdown and use the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate available options.</li>
-                            <li>Press any other letter or number, or the <kbd class="left">Left</kbd> or <kbd class="right">Right</kbd> arrow keys to then move focus back into the Input for editing.</li>
-                            <li>Press <kbd>Enter</kbd> or <kbd>Alt</kbd>+<kbd>Up</kbd> to close the dropdown and save the selection.</li>
-                            <li>To cancel, press <kbd>Escape</kbd>, <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> to close the dropdown.</li>
-                            <li>Sighted mouse users can click the desired option to save the selection and close the dropdown.</li>
-                        </ul>
-                    </div>
-                </div>
-                <select name="authors" id="authors" style="display: none;">
-                    <option value="Abercrombie, Joe">Abercrombie, Joe - (Fantasy)</option>
-                    <option value="Adams, Douglas">Adams, Douglas - (SciFi,Humor)</option>
-                    <option value="Aldiss, Brian">Aldiss, Brian - (Fantasy,SciFi)</option>
-                    <option value="Alexander, Lloyd">Alexander, Lloyd - (Fantasy)</option>
-                    <option value="Anderson, Kevin J.">Anderson, Kevin J. - (SciFi,Fantasy)</option>
-                    <option value="Anthony, Piers">Anthony, Piers - (Fantasy)</option>
-                    <option value="Asher, Neal">Asher, Neal - (SciFi)</option>
-                    <option value="Axler, James">Axler, James - (SciFi,PostApocalyptic)</option>
-                    <option value="Baker, Kage">Baker, Kage - (Fantasy)</option>
-                    <option value="Barker, Clive">Barker, Clive - (Fantasy,Horror)</option>
-                    <option value="Barlow, Steve and Skidmore, Steve">Barlow, Steve and Skidmore, Steve - (Fantasy)</option>
-                    <option value="Beagle, Peter S.">Beagle, Peter S. - (Fantasy,Humor,FairyTale)</option>
-                    <option value="Bear, Elizabeth">Bear, Elizabeth - (SciFi,Fantasy,CyberPunk)</option>
-                    <option value="Bear, Greg">Bear, Greg - (SciFi)</option>
-                    <option value="Bellairs, John">Bellairs, John - (DarkFantasy,Mystery,Humor)</option>
-                    <option value="Brin, David">Brin, David - (SciFi)</option>
-                    <option value="Brooks, Terry">Brooks, Terry - (Fantasy)</option>
-                    <option value="Bryson, Bill">Bryson, Bill - (Memoir,Humor)</option>
-                    <option value="Buckell, Tobias S.">Buckell, Tobias S. - (SciFi,CyberPunk)</option>
-                    <option value="Butcher, Jim">Butcher, Jim - (Fantasy,Mystery)</option>
-                    <option value="Camp, L. Sprague de">Camp, L. Sprague de - (Fantasy)</option>
-                    <option value="Canavan, Trudi">Canavan, Trudi - (Fantasy)</option>
-                    <option value="Card, Orson Scott">Card, Orson Scott - (Fantasy)</option>
-                    <option value="Carman, Patrick">Carman, Patrick - (Fantasy)</option>
-                    <option value="Cervantes, Miguel de">Cervantes, Miguel de - (Classical,Humor)</option>
-                    <option value="Chalker, Jack L.">Chalker, Jack L. - (Fantasy)</option>
-                    <option value="Cherryh, C. J.">Cherryh, C. J. - (SciFi,Fantasy)</option>
-                    <option value="Clarke, Susanna">Clarke, Susanna - (Fantasy)</option>
-                    <option value="Cline, Ernest">Cline, Ernest - (SciFi)</option>
-                    <option value="Collins, Suzanne">Collins, Suzanne - (SciFi, Futuristic)</option>
-                    <option value="Constantine, Storm">Constantine, Storm - Fantasy</option>
-                    <option value="Cooper, Susan">Cooper, Susan - (Fantasy)</option>
-                    <option value="Correia, Larry">Correia, Larry - (SciFi,Fantasy)</option>
-                    <option value="Crichton, Michael">Crichton, Michael - (SciFi,Suspense)</option>
-                    <option value="Dick, Philip K.">Dick, Philip K. - (SciFi)</option>
-                    <option value="Donaldson, Stephen R.">Donaldson, Stephen R. - (Fantasy)</option>
-                    <option value="Drake, David">Drake, David - (SciFi)</option>
-                    <option value="DuPrau, Jeanne">DuPrau, Jeanne - (Fantasy)</option>
-                    <option value="Eddings, David">Eddings, David - (Fantasy)</option>
-                    <option value="Elliott, Kate">Elliott, Kate - (Fantasy)</option>
-                    <option value="Erikson, Steven">Erikson, Steven - (Fantasy)</option>
-                    <option value="Evans, Chris">Evans, Chris - (Fantasy)</option>
-                    <option value="Farland, David">Farland, David - (Fantasy,SciFi)</option>
-                    <option value="Feist, Raymond E.">Feist, Raymond E. - (Fantasy,Mythology)</option>
-                    <option value="Fisher, Jude">Fisher, Jude - (Fantasy)</option>
-                    <option value="Flynn, Michael">Flynn, Michael - (SciFi)</option>
-                    <option value="Foster, Alan Dean">Foster, Alan Dean - (SciFi,Fantasy)</option>
-                    <option value="Friedman, C. S.">Friedman, C. S. - (Fantasy)</option>
-                    <option value="Frost, Gregory">Frost, Gregory - (Fantasy)</option>
-                    <option value="Funke, Cornelia">Funke, Cornelia - (Fantasy)</option>
-                    <option value="Gaiman, Neil">Gaiman, Neil - (Fantasy)</option>
-                    <option value="Gemmell, David">Gemmell, David - (Fantasy)</option>
-                    <option value="Gibson, William">Gibson, William - (SciFi,CyberPunk)</option>
-                    <option value="Gischler, Victor">Gischler, Victor - (Fantasy)</option>
-                    <option value="Goodkind, Terry">Goodkind, Terry - (Fantasy)</option>
-                    <option value="Greenwood, Ed">Greenwood, Ed - (Fantasy)</option>
-                    <option value="Grossman, Lev">Grossman, Lev - (Fantasy)</option>
-                    <option value="Haldeman, Joe">Haldeman, Joe - (SciFi)</option>
-                    <option value="Hamilton, Peter F.">Hamilton, Peter F. - (SciFi)</option>
-                    <option value="Heinlein, Robert A.">Heinlein, Robert A. - (Fantasy,SciFi)</option>
-                    <option value="Hendee, Barb and J. C.">Hendee, Barb and J. C. - (Fantasy)</option>
-                    <option value="Herbert, Frank and Brian">Herbert, Frank and Brian - (SciFi)</option>
-                    <option value="Hines, Jim C.">Hines, Jim C. - (Fantasy)</option>
-                    <option value="Hobb, Robin">Hobb, Robin - (Fantasy)</option>
-                    <option value="Holdstock, Robert">Holdstock, Robert - (DarkFantasy)</option>
-                    <option value="Holt, Tom">Holt, Tom - (Fantasy,Humor)</option>
-                    <option value="Horowitz, Anthony">Horowitz, Anthony - (Fantasy)</option>
-                    <option value="Hulick, Douglas">Hulick, Douglas - (Fantasy)</option>
-                    <option value="Huntington, Geoffrey">Huntington, Geoffrey - (Fantasy)</option>
-                    <option value="Irving, John">Irving, John - (Contemporary)</option>
-                    <option value="Jordan, Robert">Jordan, Robert - (Fantasy)</option>
-                    <option value="Kay, Guy Gavriel">Kay, Guy Gavriel - (Fantasy)</option>
-                    <option value="King, Stephen">King, Stephen - (Horror,DarkFantasy)</option>
-                    <option value="Knox, Elizabeth">Knox, Elizabeth - (Fantasy)</option>
-                    <option value="Koch, G. J.">Koch, G. J. - (SciFi)</option>
-                    <option value="Koontz, Dean">Koontz, Dean - (Horror,DarkFantasy)</option>
-                    <option value="Lackey, Mercedes &amp;amp; Norton, Andre">Lackey, Mercedes &amp; Norton, Andre - (Fantasy)</option>
-                    <option value="Lake, Jay">Lake, Jay - (SciFi,Fantasy)</option>
-                    <option value="Landy, Derek">Landy, Derek - (Fantasy)</option>
-                    <option value="Lawhead, Stephen R.">Lawhead, Stephen R. - (Fantasy)</option>
-                    <option value="Leiber, Fritz">Leiber, Fritz - (Fantasy,SciFi)</option>
-                    <option value="Lewis, C. S.">Lewis, C. S. - (Fantasy)</option>
-                    <option value="Lynch, Scott">Lynch, Scott - (Fantasy)</option>
-                    <option value="MacHale, D. J.">MacHale, D. J. - (Fantasy)</option>
-                    <option value="Martin, George R. R.">Martin, George R. R. - (Fantasy)</option>
-                    <option value="McClellan, Brian">McClellan, Brian - (Fantasy)</option>
-                    <option value="McKiernan, Dennis L.">McKiernan, Dennis L. - (Fantasy)</option>
-                    <option value="McKillip, Patricia A.">McKillip, Patricia A. - (Fantasy)</option>
-                    <option value="Mead, Richelle">Mead, Richelle - (Fantasy)</option>
-                    <option value="Miller, Walter M.">Miller, Walter M. - (PostApocalyptic,Humor)</option>
-                    <option value="Modesitt Jr, L. E.">Modesitt Jr, L. E. - (Fantasy)</option>
-                    <option value="Moers, Walter">Moers, Walter - (Fantasy)</option>
-                    <option value="Moorcock, Michael">Moorcock, Michael - (Fantasy)</option>
-                    <option value="Morgan, Richard K.">Morgan, Richard K. - (SciFi,CyberPunk,Fantasy)</option>
-                    <option value="Morgenstern, Erin">Morgenstern, Erin - (Fantasy)</option>
-                    <option value="Mosley, Walter">Mosley, Walter - (Fantasy)</option>
-                    <option value="Murphy, Pat">Murphy, Pat - (SciFi,Humor)</option>
-                    <option value="Newcomb, Robert">Newcomb, Robert - (Fantasy)</option>
-                    <option value="Niven, Larry">Niven, Larry - (SciFi)</option>
-                    <option value="Nix, Garth">Nix, Garth - (Fantasy)</option>
-                    <option value="Norton, Andre">Norton, Andre - (Fantasy)</option>
-                    <option value="Owen, James A.">Owen, James A. - (Fantasy)</option>
-                    <option value="Pelevin, Victor">Pelevin, Victor - (Fantasy)</option>
-                    <option value="Pohl, Frederik">Pohl, Frederik - (SciFi)</option>
-                    <option value="Pratchett, Terry">Pratchett, Terry - (Fantasy,Humor)</option>
-                    <option value="Pullman, Philip">Pullman, Philip - (Fantasy)</option>
-                    <option value="Rankin, Robert">Rankin, Robert - (Fantasy,Humor)</option>
-                    <option value="Rehder, Ben">Rehder, Ben - (Humor,Mystery)</option>
-                    <option value="Revis, Beth">Revis, Beth - (SciFi)</option>
-                    <option value="Reynolds, Alastair">Reynolds, Alastair - (SciFi)</option>
-                    <option value="Robbins, Tom">Robbins, Tom - (Fiction,Humor)</option>
-                    <option value="Rosenberg, Joel">Rosenberg, Joel - (Fantasy)</option>
-                    <option value="Rothfuss, Patrick">Rothfuss, Patrick - (Fantasy)</option>
-                    <option value="Rowling, J. K.">Rowling, J. K. - (Fantasy)</option>
-                    <option value="Saberhagen, Fred">Saberhagen, Fred - (SciFi,Fantasy)</option>
-                    <option value="Sage, Angie">Sage, Angie - (Fantasy)</option>
-                    <option value="Salvatore, R. A.">Salvatore, R. A. - (Fantasy)</option>
-                    <option value="Sanderson, Brandon">Sanderson, Brandon - (Fantasy)</option>
-                    <option value="Scalzi, John">Scalzi, John - (SciFi,Fantasy)</option>
-                    <option value="Schafer, Courtney">Schafer, Courtney - (Fantasy)</option>
-                    <option value="Scholes, Ken">Scholes, Ken - (Fantasy)</option>
-                    <option value="Schroeder, Karl">Schroeder, Karl - (SciFi)</option>
-                    <option value="Sheffield, Charles">Sheffield, Charles - (SciFi)</option>
-                    <option value="Shinn, Sharon">Shinn, Sharon - (Fantasy)</option>
-                    <option value="Silverberg, Robert">Silverberg, Robert - (Fantasy,SciFi)</option>
-                    <option value="Simmons, Dan">Simmons, Dan - (SciFi)</option>
-                    <option value="Staveley, Brian">Staveley, Brian - (Fantasy)</option>
-                    <option value="Steinbeck, John">Steinbeck, John - (Humor)</option>
-                    <option value="Stephenson, Neal">Stephenson, Neal - (SciFi,CyberPunk)</option>
-                    <option value="Sterling, Bruce">Sterling, Bruce - (CyberPunk,SciFi)</option>
-                    <option value="Stewart, Paul &amp;amp; Riddell, Chris">Stewart, Paul &amp; Riddell, Chris - (Fantasy)</option>
-                    <option value="Stirling, S. M.">Stirling, S. M. - (SciFi)</option>
-                    <option value="Straub, Peter">Straub, Peter - (Horror)</option>
-                    <option value="Strieber, Whitley">Strieber, Whitley - (Horror)</option>
-                    <option value="Stroud, Jonathan">Stroud, Jonathan - (Fantasy)</option>
-                    <option value="Sturges, Matthew">Sturges, Matthew - (Fantasy)</option>
-                    <option value="Sullivan, Michael J.">Sullivan, Michael J. - (Fantasy)</option>
-                    <option value="Swanwick, Michael">Swanwick, Michael - (Fantasy)</option>
-                    <option value="Taylor, G. P.">Taylor, G. P. - (Fantasy)</option>
-                    <option value="Theroux, Marcel">Theroux, Marcel - (PostApocalyptic)</option>
-                    <option value="Tolkien, J. R. R.">Tolkien, J. R. R. - (Fantasy)</option>
-                    <option value="Turtledove, Harry">Turtledove, Harry - (SciFi,HistoricalFiction,Fantasy)</option>
-                    <option value="Van Vogt, A. E.">Van Vogt, A. E. - (SciFi)</option>
-                    <option value="Vance, Jack">Vance, Jack - (SciFi)</option>
-                    <option value="Weeks, Brent">Weeks, Brent - (Fantasy)</option>
-                    <option value="Weis, Margaret and Hickman, Tracy">Weis, Margaret and Hickman, Tracy - (Fantasy)</option>
-                    <option value="Wexler, Django">Wexler, Django - (Fantasy)</option>
-                    <option value="White, T. H.">White, T. H. - (Fantasy,Humor)</option>
-                    <option value="Williams, Tad">Williams, Tad - (Fantasy)</option>
-                    <option value="Winters, Ben">Winters, Ben - (PreApocalyptic,Mystery)</option>
-                    <option value="Wolfe, Gene">Wolfe, Gene - (SciFi,Fantasy)</option>
-                    <option value="Wright, John C.">Wright, John C. - (SciFi)</option>
-                    <option value="Zahn, Timothy">Zahn, Timothy - (SciFi)</option>
-                    <option value="Zelazny, Roger">Zelazny, Roger - (Fantasy)</option>
-                    <option value="Zicree, Marc Scott">Zicree, Marc Scott - (Fantasy)</option>
-                    <option value="Zink, Michelle">Zink, Michelle - (Fantasy)</option>
-                </select>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
+                      <img
+                        id="mobileCloseIcon"
+                        class="hidden"
+                        src="img/close.png"
+                        role="button"
+                        title="Close Suggestion Dropdown"
+                        alt="Close"
+                        aria-label="Close Suggestion Dropdown"
+                      />
+                    </p>
                     <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
+                      <input type="submit" id="authrBtn" value="Submit" />
                     </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+                  </fieldset>
+                </form>
+              </div>
+              <div class="note">
+                <p>
+                  The Author field is an editable ARIA Combobox widget that uses
+                  a native Input element.
+                  <br />
+                  Substring matches are used to render suggestions.
+                  <br />
+                  Type "fantasy", "humor", "scifi", or other strings to match.
+                </p>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The native input combobox is optomized for screen reader and
+                keyboard only users:
+              </h2>
+              <ul>
+                <li>
+                  Set focus to the Author field to open the combobox control.
+                </li>
+                <li>
+                  Within the combobox, first type into the field, then press the
+                  <kbd class="down">Down</kbd> arrow to navigate into the
+                  dropdown and use the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate available
+                  options.
+                </li>
+                <li>
+                  Press any other letter or number, or the
+                  <kbd class="left">Left</kbd> or
+                  <kbd class="right">Right</kbd> arrow keys to then move focus
+                  back into the Input for editing.
+                </li>
+                <li>
+                  Press <kbd>Enter</kbd> or <kbd>Alt</kbd>+<kbd>Up</kbd> to
+                  close the dropdown and save the selection.
+                </li>
+                <li>
+                  To cancel, press <kbd>Escape</kbd>, <kbd>Tab</kbd> or
+                  <kbd>Shift</kbd>+<kbd>Tab</kbd> to close the dropdown.
+                </li>
+                <li>
+                  Sighted mouse users can click the desired option to save the
+                  selection and close the dropdown.
+                </li>
+              </ul>
+            </div>
+          </div>
+          <select name="authors" id="authors" style="display: none">
+            <option value="Abercrombie, Joe">
+              Abercrombie, Joe - (Fantasy)
+            </option>
+            <option value="Adams, Douglas">
+              Adams, Douglas - (SciFi,Humor)
+            </option>
+            <option value="Aldiss, Brian">
+              Aldiss, Brian - (Fantasy,SciFi)
+            </option>
+            <option value="Alexander, Lloyd">
+              Alexander, Lloyd - (Fantasy)
+            </option>
+            <option value="Anderson, Kevin J.">
+              Anderson, Kevin J. - (SciFi,Fantasy)
+            </option>
+            <option value="Anthony, Piers">Anthony, Piers - (Fantasy)</option>
+            <option value="Asher, Neal">Asher, Neal - (SciFi)</option>
+            <option value="Axler, James">
+              Axler, James - (SciFi,PostApocalyptic)
+            </option>
+            <option value="Baker, Kage">Baker, Kage - (Fantasy)</option>
+            <option value="Barker, Clive">
+              Barker, Clive - (Fantasy,Horror)
+            </option>
+            <option value="Barlow, Steve and Skidmore, Steve">
+              Barlow, Steve and Skidmore, Steve - (Fantasy)
+            </option>
+            <option value="Beagle, Peter S.">
+              Beagle, Peter S. - (Fantasy,Humor,FairyTale)
+            </option>
+            <option value="Bear, Elizabeth">
+              Bear, Elizabeth - (SciFi,Fantasy,CyberPunk)
+            </option>
+            <option value="Bear, Greg">Bear, Greg - (SciFi)</option>
+            <option value="Bellairs, John">
+              Bellairs, John - (DarkFantasy,Mystery,Humor)
+            </option>
+            <option value="Brin, David">Brin, David - (SciFi)</option>
+            <option value="Brooks, Terry">Brooks, Terry - (Fantasy)</option>
+            <option value="Bryson, Bill">Bryson, Bill - (Memoir,Humor)</option>
+            <option value="Buckell, Tobias S.">
+              Buckell, Tobias S. - (SciFi,CyberPunk)
+            </option>
+            <option value="Butcher, Jim">
+              Butcher, Jim - (Fantasy,Mystery)
+            </option>
+            <option value="Camp, L. Sprague de">
+              Camp, L. Sprague de - (Fantasy)
+            </option>
+            <option value="Canavan, Trudi">Canavan, Trudi - (Fantasy)</option>
+            <option value="Card, Orson Scott">
+              Card, Orson Scott - (Fantasy)
+            </option>
+            <option value="Carman, Patrick">Carman, Patrick - (Fantasy)</option>
+            <option value="Cervantes, Miguel de">
+              Cervantes, Miguel de - (Classical,Humor)
+            </option>
+            <option value="Chalker, Jack L.">
+              Chalker, Jack L. - (Fantasy)
+            </option>
+            <option value="Cherryh, C. J.">
+              Cherryh, C. J. - (SciFi,Fantasy)
+            </option>
+            <option value="Clarke, Susanna">Clarke, Susanna - (Fantasy)</option>
+            <option value="Cline, Ernest">Cline, Ernest - (SciFi)</option>
+            <option value="Collins, Suzanne">
+              Collins, Suzanne - (SciFi, Futuristic)
+            </option>
+            <option value="Constantine, Storm">
+              Constantine, Storm - Fantasy
+            </option>
+            <option value="Cooper, Susan">Cooper, Susan - (Fantasy)</option>
+            <option value="Correia, Larry">
+              Correia, Larry - (SciFi,Fantasy)
+            </option>
+            <option value="Crichton, Michael">
+              Crichton, Michael - (SciFi,Suspense)
+            </option>
+            <option value="Dick, Philip K.">Dick, Philip K. - (SciFi)</option>
+            <option value="Donaldson, Stephen R.">
+              Donaldson, Stephen R. - (Fantasy)
+            </option>
+            <option value="Drake, David">Drake, David - (SciFi)</option>
+            <option value="DuPrau, Jeanne">DuPrau, Jeanne - (Fantasy)</option>
+            <option value="Eddings, David">Eddings, David - (Fantasy)</option>
+            <option value="Elliott, Kate">Elliott, Kate - (Fantasy)</option>
+            <option value="Erikson, Steven">Erikson, Steven - (Fantasy)</option>
+            <option value="Evans, Chris">Evans, Chris - (Fantasy)</option>
+            <option value="Farland, David">
+              Farland, David - (Fantasy,SciFi)
+            </option>
+            <option value="Feist, Raymond E.">
+              Feist, Raymond E. - (Fantasy,Mythology)
+            </option>
+            <option value="Fisher, Jude">Fisher, Jude - (Fantasy)</option>
+            <option value="Flynn, Michael">Flynn, Michael - (SciFi)</option>
+            <option value="Foster, Alan Dean">
+              Foster, Alan Dean - (SciFi,Fantasy)
+            </option>
+            <option value="Friedman, C. S.">Friedman, C. S. - (Fantasy)</option>
+            <option value="Frost, Gregory">Frost, Gregory - (Fantasy)</option>
+            <option value="Funke, Cornelia">Funke, Cornelia - (Fantasy)</option>
+            <option value="Gaiman, Neil">Gaiman, Neil - (Fantasy)</option>
+            <option value="Gemmell, David">Gemmell, David - (Fantasy)</option>
+            <option value="Gibson, William">
+              Gibson, William - (SciFi,CyberPunk)
+            </option>
+            <option value="Gischler, Victor">
+              Gischler, Victor - (Fantasy)
+            </option>
+            <option value="Goodkind, Terry">Goodkind, Terry - (Fantasy)</option>
+            <option value="Greenwood, Ed">Greenwood, Ed - (Fantasy)</option>
+            <option value="Grossman, Lev">Grossman, Lev - (Fantasy)</option>
+            <option value="Haldeman, Joe">Haldeman, Joe - (SciFi)</option>
+            <option value="Hamilton, Peter F.">
+              Hamilton, Peter F. - (SciFi)
+            </option>
+            <option value="Heinlein, Robert A.">
+              Heinlein, Robert A. - (Fantasy,SciFi)
+            </option>
+            <option value="Hendee, Barb and J. C.">
+              Hendee, Barb and J. C. - (Fantasy)
+            </option>
+            <option value="Herbert, Frank and Brian">
+              Herbert, Frank and Brian - (SciFi)
+            </option>
+            <option value="Hines, Jim C.">Hines, Jim C. - (Fantasy)</option>
+            <option value="Hobb, Robin">Hobb, Robin - (Fantasy)</option>
+            <option value="Holdstock, Robert">
+              Holdstock, Robert - (DarkFantasy)
+            </option>
+            <option value="Holt, Tom">Holt, Tom - (Fantasy,Humor)</option>
+            <option value="Horowitz, Anthony">
+              Horowitz, Anthony - (Fantasy)
+            </option>
+            <option value="Hulick, Douglas">Hulick, Douglas - (Fantasy)</option>
+            <option value="Huntington, Geoffrey">
+              Huntington, Geoffrey - (Fantasy)
+            </option>
+            <option value="Irving, John">Irving, John - (Contemporary)</option>
+            <option value="Jordan, Robert">Jordan, Robert - (Fantasy)</option>
+            <option value="Kay, Guy Gavriel">
+              Kay, Guy Gavriel - (Fantasy)
+            </option>
+            <option value="King, Stephen">
+              King, Stephen - (Horror,DarkFantasy)
+            </option>
+            <option value="Knox, Elizabeth">Knox, Elizabeth - (Fantasy)</option>
+            <option value="Koch, G. J.">Koch, G. J. - (SciFi)</option>
+            <option value="Koontz, Dean">
+              Koontz, Dean - (Horror,DarkFantasy)
+            </option>
+            <option value="Lackey, Mercedes &amp;amp; Norton, Andre">
+              Lackey, Mercedes &amp; Norton, Andre - (Fantasy)
+            </option>
+            <option value="Lake, Jay">Lake, Jay - (SciFi,Fantasy)</option>
+            <option value="Landy, Derek">Landy, Derek - (Fantasy)</option>
+            <option value="Lawhead, Stephen R.">
+              Lawhead, Stephen R. - (Fantasy)
+            </option>
+            <option value="Leiber, Fritz">
+              Leiber, Fritz - (Fantasy,SciFi)
+            </option>
+            <option value="Lewis, C. S.">Lewis, C. S. - (Fantasy)</option>
+            <option value="Lynch, Scott">Lynch, Scott - (Fantasy)</option>
+            <option value="MacHale, D. J.">MacHale, D. J. - (Fantasy)</option>
+            <option value="Martin, George R. R.">
+              Martin, George R. R. - (Fantasy)
+            </option>
+            <option value="McClellan, Brian">
+              McClellan, Brian - (Fantasy)
+            </option>
+            <option value="McKiernan, Dennis L.">
+              McKiernan, Dennis L. - (Fantasy)
+            </option>
+            <option value="McKillip, Patricia A.">
+              McKillip, Patricia A. - (Fantasy)
+            </option>
+            <option value="Mead, Richelle">Mead, Richelle - (Fantasy)</option>
+            <option value="Miller, Walter M.">
+              Miller, Walter M. - (PostApocalyptic,Humor)
+            </option>
+            <option value="Modesitt Jr, L. E.">
+              Modesitt Jr, L. E. - (Fantasy)
+            </option>
+            <option value="Moers, Walter">Moers, Walter - (Fantasy)</option>
+            <option value="Moorcock, Michael">
+              Moorcock, Michael - (Fantasy)
+            </option>
+            <option value="Morgan, Richard K.">
+              Morgan, Richard K. - (SciFi,CyberPunk,Fantasy)
+            </option>
+            <option value="Morgenstern, Erin">
+              Morgenstern, Erin - (Fantasy)
+            </option>
+            <option value="Mosley, Walter">Mosley, Walter - (Fantasy)</option>
+            <option value="Murphy, Pat">Murphy, Pat - (SciFi,Humor)</option>
+            <option value="Newcomb, Robert">Newcomb, Robert - (Fantasy)</option>
+            <option value="Niven, Larry">Niven, Larry - (SciFi)</option>
+            <option value="Nix, Garth">Nix, Garth - (Fantasy)</option>
+            <option value="Norton, Andre">Norton, Andre - (Fantasy)</option>
+            <option value="Owen, James A.">Owen, James A. - (Fantasy)</option>
+            <option value="Pelevin, Victor">Pelevin, Victor - (Fantasy)</option>
+            <option value="Pohl, Frederik">Pohl, Frederik - (SciFi)</option>
+            <option value="Pratchett, Terry">
+              Pratchett, Terry - (Fantasy,Humor)
+            </option>
+            <option value="Pullman, Philip">Pullman, Philip - (Fantasy)</option>
+            <option value="Rankin, Robert">
+              Rankin, Robert - (Fantasy,Humor)
+            </option>
+            <option value="Rehder, Ben">Rehder, Ben - (Humor,Mystery)</option>
+            <option value="Revis, Beth">Revis, Beth - (SciFi)</option>
+            <option value="Reynolds, Alastair">
+              Reynolds, Alastair - (SciFi)
+            </option>
+            <option value="Robbins, Tom">Robbins, Tom - (Fiction,Humor)</option>
+            <option value="Rosenberg, Joel">Rosenberg, Joel - (Fantasy)</option>
+            <option value="Rothfuss, Patrick">
+              Rothfuss, Patrick - (Fantasy)
+            </option>
+            <option value="Rowling, J. K.">Rowling, J. K. - (Fantasy)</option>
+            <option value="Saberhagen, Fred">
+              Saberhagen, Fred - (SciFi,Fantasy)
+            </option>
+            <option value="Sage, Angie">Sage, Angie - (Fantasy)</option>
+            <option value="Salvatore, R. A.">
+              Salvatore, R. A. - (Fantasy)
+            </option>
+            <option value="Sanderson, Brandon">
+              Sanderson, Brandon - (Fantasy)
+            </option>
+            <option value="Scalzi, John">Scalzi, John - (SciFi,Fantasy)</option>
+            <option value="Schafer, Courtney">
+              Schafer, Courtney - (Fantasy)
+            </option>
+            <option value="Scholes, Ken">Scholes, Ken - (Fantasy)</option>
+            <option value="Schroeder, Karl">Schroeder, Karl - (SciFi)</option>
+            <option value="Sheffield, Charles">
+              Sheffield, Charles - (SciFi)
+            </option>
+            <option value="Shinn, Sharon">Shinn, Sharon - (Fantasy)</option>
+            <option value="Silverberg, Robert">
+              Silverberg, Robert - (Fantasy,SciFi)
+            </option>
+            <option value="Simmons, Dan">Simmons, Dan - (SciFi)</option>
+            <option value="Staveley, Brian">Staveley, Brian - (Fantasy)</option>
+            <option value="Steinbeck, John">Steinbeck, John - (Humor)</option>
+            <option value="Stephenson, Neal">
+              Stephenson, Neal - (SciFi,CyberPunk)
+            </option>
+            <option value="Sterling, Bruce">
+              Sterling, Bruce - (CyberPunk,SciFi)
+            </option>
+            <option value="Stewart, Paul &amp;amp; Riddell, Chris">
+              Stewart, Paul &amp; Riddell, Chris - (Fantasy)
+            </option>
+            <option value="Stirling, S. M.">Stirling, S. M. - (SciFi)</option>
+            <option value="Straub, Peter">Straub, Peter - (Horror)</option>
+            <option value="Strieber, Whitley">
+              Strieber, Whitley - (Horror)
+            </option>
+            <option value="Stroud, Jonathan">
+              Stroud, Jonathan - (Fantasy)
+            </option>
+            <option value="Sturges, Matthew">
+              Sturges, Matthew - (Fantasy)
+            </option>
+            <option value="Sullivan, Michael J.">
+              Sullivan, Michael J. - (Fantasy)
+            </option>
+            <option value="Swanwick, Michael">
+              Swanwick, Michael - (Fantasy)
+            </option>
+            <option value="Taylor, G. P.">Taylor, G. P. - (Fantasy)</option>
+            <option value="Theroux, Marcel">
+              Theroux, Marcel - (PostApocalyptic)
+            </option>
+            <option value="Tolkien, J. R. R.">
+              Tolkien, J. R. R. - (Fantasy)
+            </option>
+            <option value="Turtledove, Harry">
+              Turtledove, Harry - (SciFi,HistoricalFiction,Fantasy)
+            </option>
+            <option value="Van Vogt, A. E.">Van Vogt, A. E. - (SciFi)</option>
+            <option value="Vance, Jack">Vance, Jack - (SciFi)</option>
+            <option value="Weeks, Brent">Weeks, Brent - (Fantasy)</option>
+            <option value="Weis, Margaret and Hickman, Tracy">
+              Weis, Margaret and Hickman, Tracy - (Fantasy)
+            </option>
+            <option value="Wexler, Django">Wexler, Django - (Fantasy)</option>
+            <option value="White, T. H.">White, T. H. - (Fantasy,Humor)</option>
+            <option value="Williams, Tad">Williams, Tad - (Fantasy)</option>
+            <option value="Winters, Ben">
+              Winters, Ben - (PreApocalyptic,Mystery)
+            </option>
+            <option value="Wolfe, Gene">Wolfe, Gene - (SciFi,Fantasy)</option>
+            <option value="Wright, John C.">Wright, John C. - (SciFi)</option>
+            <option value="Zahn, Timothy">Zahn, Timothy - (SciFi)</option>
+            <option value="Zelazny, Roger">Zelazny, Roger - (Fantasy)</option>
+            <option value="Zicree, Marc Scott">
+              Zicree, Marc Scott - (Fantasy)
+            </option>
+            <option value="Zink, Michelle">Zink, Michelle - (Fantasy)</option>
+          </select>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Comboboxes/Native Inputs, Editable with Substring Match/js/setup.js b/Templates/Comboboxes/Native Inputs, Editable with Substring Match/js/setup.js
index 22c326c5..4cca4e49 100644
--- a/Templates/Comboboxes/Native Inputs, Editable with Substring Match/js/setup.js	
+++ b/Templates/Comboboxes/Native Inputs, Editable with Substring Match/js/setup.js	
@@ -87,8 +87,8 @@ $A.import(["CurrentDevice", "Combobox"], { defer: true }, function () {
     window.device.type === "mobile"
       ? 3
       : window.device.type === "tablet"
-      ? 5
-      : 7,
+        ? 5
+        : 7,
   );
 
   // Get the Close icon triggering element for sighted mouse and touch device users
diff --git a/Templates/Comboboxes/Native Inputs, Editable with Word Match/index.htm b/Templates/Comboboxes/Native Inputs, Editable with Word Match/index.htm
index cc22d19e..4baebad2 100644
--- a/Templates/Comboboxes/Native Inputs, Editable with Word Match/index.htm	
+++ b/Templates/Comboboxes/Native Inputs, Editable with Word Match/index.htm	
@@ -1,249 +1,380 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Comboboxes (Native Inputs, Editable with Word Match) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/combobox.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Comboboxes (Native Inputs, Editable with Word Match) - Apex 4X
+      Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/combobox.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm">Native Inputs, Editable and Readonly</a></li>
-                        <li><a href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm">Native Inputs, Editable with Substring Match</a></li>
-                        <li><a href="index.htm" aria-current="page">Native Inputs, Editable with Word Match</a></li>
-                        <li><a href="../Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match/index.htm">Native Inputs, Multiselect Editable with Substring Match</a></li>
-                        <li><a href="../Simulated,%20Readonly/index.htm">Simulated, Readonly</a></li>
-                        <li><a href="../Simulated,%20Readonly%20Multiselect/index.htm">Simulated, Readonly Multiselect</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Combobox <small>(Native Inputs, Editable with Word Match)</small></h1>
-                        <div class="form--container wordmatch">
-                            <form method="post" action="#">
-                                <fieldset>
-                                    <legend> Search for hardware devices</legend>
-                                    <p class="select--container--wordmatch">
-                                        <label for="hardwareEdit">Hardware</label>
-                                        <input type="text" name="hardware" id="hardwareEdit" class="aria-combobox">
-                                    </p>
-                                    <p>
-                                        <input type="submit" id="hardwareBtn" value="Submit">
-                                    </p>
-                                    <p id="autoSuggest">
-                                        <!--
-                                Suggested items will be inserted here as a static container.
-                                -->
-                                    </p>
-                                </fieldset>
-                            </form>
-                        </div>
-                        <div class="note">
-                            <p>The Hardware field is an editable ARIA Combobox widget that uses a native Input element.
-                                <br>
-                                Word matches are used to render suggestions.
-                                <br>
-                                Type "modem", "printer", "video card", or other strings to match.
-                            </p>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2> The native input combobox is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus to the State or Country fields to open the combobox control.</li>
-                            <li>Within a combobox that is not readonly, first type into the field, then press the <kbd class="down">Down</kbd> arrow
-                                to navigate into the dropdown and use the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate available options.</li>
-                            <li>Press any other letter or number, or the <kbd class="left">Left</kbd> or <kbd class="right">Right</kbd> arrow keys to then
-                                move focus back into the Input for editing.</li>
-                            <li>Within a combobox that is readonly, press the <kbd class="down">Down</kbd> arrow or click the trigger icon to open the dropdown.</li>
-                            <li>Press any letter or number within a readonly field to jump to an option starting with that character or digit.</li>
-                            <li>Press <kbd>Enter</kbd> or <kbd>Alt</kbd>+<kbd>Up</kbd> to close the dropdown and save the selection.</li>
-                            <li>To cancel, press <kbd>Escape</kbd>, <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> to close the dropdown.</li>
-                            <li>Sighted mouse users can click the desired option to save the selection and close the dropdown.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm"
+                  >Native Inputs, Editable and Readonly</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm"
+                  >Native Inputs, Editable with Substring Match</a
+                >
+              </li>
+              <li>
+                <a href="index.htm" aria-current="page"
+                  >Native Inputs, Editable with Word Match</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match/index.htm"
+                  >Native Inputs, Multiselect Editable with Substring Match</a
+                >
+              </li>
+              <li>
+                <a href="../Simulated,%20Readonly/index.htm"
+                  >Simulated, Readonly</a
+                >
+              </li>
+              <li>
+                <a href="../Simulated,%20Readonly%20Multiselect/index.htm"
+                  >Simulated, Readonly Multiselect</a
+                >
+              </li>
+            </ul>
+          </nav>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Combobox
+                <small>(Native Inputs, Editable with Word Match)</small>
+              </h1>
+              <div class="form--container wordmatch">
+                <form method="post" action="#">
+                  <fieldset>
+                    <legend>Search for hardware devices</legend>
+                    <p class="select--container--wordmatch">
+                      <label for="hardwareEdit">Hardware</label>
+                      <input
+                        type="text"
+                        name="hardware"
+                        id="hardwareEdit"
+                        class="aria-combobox"
+                      />
+                    </p>
                     <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
+                      <input type="submit" id="hardwareBtn" value="Submit" />
+                    </p>
+                    <p id="autoSuggest">
+                      <!--
+                                Suggested items will be inserted here as a static container.
+                                -->
                     </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+                  </fieldset>
+                </form>
+              </div>
+              <div class="note">
+                <p>
+                  The Hardware field is an editable ARIA Combobox widget that
+                  uses a native Input element.
+                  <br />
+                  Word matches are used to render suggestions.
+                  <br />
+                  Type "modem", "printer", "video card", or other strings to
+                  match.
+                </p>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The native input combobox is optimized for screen reader and
+                keyboard only users:
+              </h2>
+              <ul>
+                <li>
+                  Set focus to the State or Country fields to open the combobox
+                  control.
+                </li>
+                <li>
+                  Within a combobox that is not readonly, first type into the
+                  field, then press the <kbd class="down">Down</kbd> arrow to
+                  navigate into the dropdown and use the
+                  <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate available
+                  options.
+                </li>
+                <li>
+                  Press any other letter or number, or the
+                  <kbd class="left">Left</kbd> or
+                  <kbd class="right">Right</kbd> arrow keys to then move focus
+                  back into the Input for editing.
+                </li>
+                <li>
+                  Within a combobox that is readonly, press the
+                  <kbd class="down">Down</kbd> arrow or click the trigger icon
+                  to open the dropdown.
+                </li>
+                <li>
+                  Press any letter or number within a readonly field to jump to
+                  an option starting with that character or digit.
+                </li>
+                <li>
+                  Press <kbd>Enter</kbd> or <kbd>Alt</kbd>+<kbd>Up</kbd> to
+                  close the dropdown and save the selection.
+                </li>
+                <li>
+                  To cancel, press <kbd>Escape</kbd>, <kbd>Tab</kbd> or
+                  <kbd>Shift</kbd>+<kbd>Tab</kbd> to close the dropdown.
+                </li>
+                <li>
+                  Sighted mouse users can click the desired option to save the
+                  selection and close the dropdown.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-    <select name="hardware-select" id="devicesId" style="display: none;">
-        <option value="ATI video card">ATI video card</option>
-        <option value="Alliance Promotion video cards">Alliance Promotion video cards</option>
-        <option value="Aztech CD drives">Aztech CD drives</option>
-        <option value="Boca modem">Boca modem</option>
-        <option value="Boca video card">Boca video card</option>
-        <option value="BTC CD Drives">BTC CD Drives</option>
-        <option value="Canon printer">Canon printer</option>
-        <option value="Chips video card">Chips video card</option>
-        <option value="Cirrus Logic video card">Cirrus Logic video card</option>
-        <option value="Citizen printer">Citizen printer</option>
-        <option value="Creative CD Drives">Creative CD Drives</option>
-        <option value="Creative modem">Creative modem</option>
-        <option value="Creative sound card">Creative sound card</option>
-        <option value="COM port">COM port</option>
-        <option value="Conner hard drive">Conner hard drive</option>
-        <option value="Diamond video card">Diamond video card</option>
-        <option value="Dip switches">Dip switches</option>
-        <option value="Epson printer">Epson printer</option>
-        <option value="Epson scanner">Epson scanner</option>
-        <option value="Floppy drive">Floppy drive</option>
-        <option value="Fujitsu hard drive">Fujitsu hard drive</option>
-        <option value="Funai CD Drives">Funai CD Drives</option>
-        <option value="Goldstar CD Drives">Goldstar CD Drives</option>
-        <option value="Hard drive">Hard drive</option>
-        <option value="Heat sink">Heat sink</option>
-        <option value="Hercules video card">Hercules video card</option>
-        <option value="Hewlett Packard CD-ROM">Hewlett Packard CD-ROM</option>
-        <option value="Hewlett Packard Printer">Hewlett Packard Printer</option>
-        <option value="Hewlett Packard scanner">Hewlett Packard scanner</option>
-        <option value="Infrared port">Infrared port</option>
-        <option value="Intel OverDrive processor">Intel OverDrive processor</option>
-        <option value="Intel Pentium processor">Intel Pentium processor</option>
-        <option value="IntelliMouse">IntelliMouse</option>
-        <option value="Iomega Jaz drive">Iomega Jaz drive</option>
-        <option value="Jaz drive">Jaz drive</option>
-        <option value="Lexmark printer">Lexmark printer</option>
-        <option value="LG Electronics CD drives">LG Electronics CD drives</option>
-        <option value="LITE-ON CD drives">LITE-ON CD drives</option>
-        <option value="Matrox video card">Matrox video card</option>
-        <option value="Maxtor hard drive">Maxtor hard drive</option>
-        <option value="Mitsumi CD drives">Mitsumi CD drives</option>
-        <option value="Mustek scanner">Mustek scanner</option>
-        <option value="NEC CD-ROM">NEC CD-ROM</option>
-        <option value="NEC floppy drive">NEC floppy drive</option>
-        <option value="NEC hard drive">NEC hard drive</option>
-        <option value="NEC monitor">NEC monitor</option>
-        <option value="NEC printers">NEC printers</option>
-        <option value="Network card">Network card</option>
-        <option value="NICad batteries">NICad batteries</option>
-        <option value="NiMH batteries">NiMH batteries</option>
-        <option value="Number Nine video card">Number Nine video card</option>
-        <option value="Oak Technologies video   card">Oak Technologies video card</option>
-        <option value="Okidata printer">Okidata printer</option>
-        <option value="Packard Bell drawer   scanner">Packard Bell drawer scanner</option>
-        <option value="Packard Bell printer">Packard Bell printer</option>
-        <option value="Packard Bell sound card">Packard Bell sound card</option>
-        <option value="Paradise video card">Paradise video card</option>
-        <option value="Parallel port">Parallel port</option>
-        <option value="Palm Pilot">Palm Pilot</option>
-        <option value="Panasonic CD drives">Panasonic CD drives</option>
-        <option value="Panasonic printers">Panasonic printers</option>
-        <option value="PCMCIA and PC Card">PCMCIA and PC Card</option>
-        <option value="Pioneer CD drives">Pioneer CD drives</option>
-        <option value="Plextor CD drives">Plextor CD drives</option>
-        <option value="Power supply">Power supply</option>
-        <option value="Power management">Power management</option>
-        <option value="Quantum   hard drive">Quantum hard drive</option>
-        <option value="Riser board">Riser board</option>
-        <option value="S3 video card">S3 video card</option>
-        <option value="Serial port">Serial port</option>
-        <option value="SIS video card">SIS video card</option>
-        <option value="Sony CD-ROM">Sony CD-ROM</option>
-        <option value="Star printer">Star printer</option>
-        <option value="Surge suppressor">Surge suppressor</option>
-        <option value="Tandy printer">Tandy printer</option>
-        <option value="Tape drive">Tape drive</option>
-        <option value="Tektronix printers">Tektronix printers</option>
-        <option value="Texas Instruments printers">Texas Instruments printers</option>
-        <option value="Top drawer scanner">Top drawer scanner</option>
-        <option value="Toshiba CD-ROM">Toshiba CD-ROM</option>
-        <option value="Toshiba printers">Toshiba printers</option>
-        <option value="Video card">Video card</option>
-        <option value="Western digital hard drive">Western digital hard drive</option>
-        <option value="Western digital video card">Western digital video card</option>
-        <option value="Worm drive">Worm drive</option>
-        <option value="Xircom network cards">Xircom network cards</option>
-        <option value="Zip drive">Zip drive</option>
+    <select name="hardware-select" id="devicesId" style="display: none">
+      <option value="ATI video card">ATI video card</option>
+      <option value="Alliance Promotion video cards">
+        Alliance Promotion video cards
+      </option>
+      <option value="Aztech CD drives">Aztech CD drives</option>
+      <option value="Boca modem">Boca modem</option>
+      <option value="Boca video card">Boca video card</option>
+      <option value="BTC CD Drives">BTC CD Drives</option>
+      <option value="Canon printer">Canon printer</option>
+      <option value="Chips video card">Chips video card</option>
+      <option value="Cirrus Logic video card">Cirrus Logic video card</option>
+      <option value="Citizen printer">Citizen printer</option>
+      <option value="Creative CD Drives">Creative CD Drives</option>
+      <option value="Creative modem">Creative modem</option>
+      <option value="Creative sound card">Creative sound card</option>
+      <option value="COM port">COM port</option>
+      <option value="Conner hard drive">Conner hard drive</option>
+      <option value="Diamond video card">Diamond video card</option>
+      <option value="Dip switches">Dip switches</option>
+      <option value="Epson printer">Epson printer</option>
+      <option value="Epson scanner">Epson scanner</option>
+      <option value="Floppy drive">Floppy drive</option>
+      <option value="Fujitsu hard drive">Fujitsu hard drive</option>
+      <option value="Funai CD Drives">Funai CD Drives</option>
+      <option value="Goldstar CD Drives">Goldstar CD Drives</option>
+      <option value="Hard drive">Hard drive</option>
+      <option value="Heat sink">Heat sink</option>
+      <option value="Hercules video card">Hercules video card</option>
+      <option value="Hewlett Packard CD-ROM">Hewlett Packard CD-ROM</option>
+      <option value="Hewlett Packard Printer">Hewlett Packard Printer</option>
+      <option value="Hewlett Packard scanner">Hewlett Packard scanner</option>
+      <option value="Infrared port">Infrared port</option>
+      <option value="Intel OverDrive processor">
+        Intel OverDrive processor
+      </option>
+      <option value="Intel Pentium processor">Intel Pentium processor</option>
+      <option value="IntelliMouse">IntelliMouse</option>
+      <option value="Iomega Jaz drive">Iomega Jaz drive</option>
+      <option value="Jaz drive">Jaz drive</option>
+      <option value="Lexmark printer">Lexmark printer</option>
+      <option value="LG Electronics CD drives">LG Electronics CD drives</option>
+      <option value="LITE-ON CD drives">LITE-ON CD drives</option>
+      <option value="Matrox video card">Matrox video card</option>
+      <option value="Maxtor hard drive">Maxtor hard drive</option>
+      <option value="Mitsumi CD drives">Mitsumi CD drives</option>
+      <option value="Mustek scanner">Mustek scanner</option>
+      <option value="NEC CD-ROM">NEC CD-ROM</option>
+      <option value="NEC floppy drive">NEC floppy drive</option>
+      <option value="NEC hard drive">NEC hard drive</option>
+      <option value="NEC monitor">NEC monitor</option>
+      <option value="NEC printers">NEC printers</option>
+      <option value="Network card">Network card</option>
+      <option value="NICad batteries">NICad batteries</option>
+      <option value="NiMH batteries">NiMH batteries</option>
+      <option value="Number Nine video card">Number Nine video card</option>
+      <option value="Oak Technologies video   card">
+        Oak Technologies video card
+      </option>
+      <option value="Okidata printer">Okidata printer</option>
+      <option value="Packard Bell drawer   scanner">
+        Packard Bell drawer scanner
+      </option>
+      <option value="Packard Bell printer">Packard Bell printer</option>
+      <option value="Packard Bell sound card">Packard Bell sound card</option>
+      <option value="Paradise video card">Paradise video card</option>
+      <option value="Parallel port">Parallel port</option>
+      <option value="Palm Pilot">Palm Pilot</option>
+      <option value="Panasonic CD drives">Panasonic CD drives</option>
+      <option value="Panasonic printers">Panasonic printers</option>
+      <option value="PCMCIA and PC Card">PCMCIA and PC Card</option>
+      <option value="Pioneer CD drives">Pioneer CD drives</option>
+      <option value="Plextor CD drives">Plextor CD drives</option>
+      <option value="Power supply">Power supply</option>
+      <option value="Power management">Power management</option>
+      <option value="Quantum   hard drive">Quantum hard drive</option>
+      <option value="Riser board">Riser board</option>
+      <option value="S3 video card">S3 video card</option>
+      <option value="Serial port">Serial port</option>
+      <option value="SIS video card">SIS video card</option>
+      <option value="Sony CD-ROM">Sony CD-ROM</option>
+      <option value="Star printer">Star printer</option>
+      <option value="Surge suppressor">Surge suppressor</option>
+      <option value="Tandy printer">Tandy printer</option>
+      <option value="Tape drive">Tape drive</option>
+      <option value="Tektronix printers">Tektronix printers</option>
+      <option value="Texas Instruments printers">
+        Texas Instruments printers
+      </option>
+      <option value="Top drawer scanner">Top drawer scanner</option>
+      <option value="Toshiba CD-ROM">Toshiba CD-ROM</option>
+      <option value="Toshiba printers">Toshiba printers</option>
+      <option value="Video card">Video card</option>
+      <option value="Western digital hard drive">
+        Western digital hard drive
+      </option>
+      <option value="Western digital video card">
+        Western digital video card
+      </option>
+      <option value="Worm drive">Worm drive</option>
+      <option value="Xircom network cards">Xircom network cards</option>
+      <option value="Zip drive">Zip drive</option>
     </select>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Comboboxes/Native Inputs, Editable with Word Match/js/setup.js b/Templates/Comboboxes/Native Inputs, Editable with Word Match/js/setup.js
index 944d314a..97b40915 100644
--- a/Templates/Comboboxes/Native Inputs, Editable with Word Match/js/setup.js	
+++ b/Templates/Comboboxes/Native Inputs, Editable with Word Match/js/setup.js	
@@ -72,8 +72,8 @@ $A.import(["CurrentDevice", "Combobox"], { defer: true }, function () {
     window.device.type === "mobile"
       ? 3
       : window.device.type === "tablet"
-      ? 5
-      : 7,
+        ? 5
+        : 7,
   );
 
   // Disable the offscreen Close link for mobile touch screen users
diff --git a/Templates/Comboboxes/Native Inputs, Multiselect Editable with Substring Match/index.htm b/Templates/Comboboxes/Native Inputs, Multiselect Editable with Substring Match/index.htm
index 84571376..9c143518 100644
--- a/Templates/Comboboxes/Native Inputs, Multiselect Editable with Substring Match/index.htm	
+++ b/Templates/Comboboxes/Native Inputs, Multiselect Editable with Substring Match/index.htm	
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
diff --git a/Templates/Comboboxes/Native Inputs, Multiselect Editable with Substring Match/js/setup.js b/Templates/Comboboxes/Native Inputs, Multiselect Editable with Substring Match/js/setup.js
index 84626264..d493843e 100644
--- a/Templates/Comboboxes/Native Inputs, Multiselect Editable with Substring Match/js/setup.js	
+++ b/Templates/Comboboxes/Native Inputs, Multiselect Editable with Substring Match/js/setup.js	
@@ -93,8 +93,8 @@ $A.import(["CurrentDevice", "Combobox"], { defer: true }, function () {
     window.device.type === "mobile"
       ? 3
       : window.device.type === "tablet"
-      ? 5
-      : 7,
+        ? 5
+        : 7,
   );
 
   // Get the Close icon triggering element for sighted mouse and touch device users
diff --git a/Templates/Comboboxes/Simulated, Readonly Multiselect/index.htm b/Templates/Comboboxes/Simulated, Readonly Multiselect/index.htm
index d5138aa2..dbc506f3 100644
--- a/Templates/Comboboxes/Simulated, Readonly Multiselect/index.htm	
+++ b/Templates/Comboboxes/Simulated, Readonly Multiselect/index.htm	
@@ -1,351 +1,469 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Comboboxes (Simulated, Readonly Multiselect) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/combobox.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Comboboxes (Simulated, Readonly Multiselect) - Apex 4X Technical
+      Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/combobox.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm">Native Inputs, Editable and Readonly</a></li>
-                        <li><a href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm">Native Inputs, Editable with Substring Match</a></li>
-                        <li><a href="../Native%20Inputs,%20Editable%20with%20Word%20Match/index.htm">Native Inputs, Editable with Word Match</a></li>
-                        <li><a href="../Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match/index.htm">Native Inputs, Multiselect Editable with Substring Match</a></li>
-                        <li><a href="../Simulated,%20Readonly/index.htm">Simulated, Readonly</a></li>
-                        <li><a href="index.htm" aria-current="page">Simulated, Readonly Multiselect</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item simMulti--readonly">
-                        <h1 class="pageTitle">ARIA Combobox <small>(Simulated, Readonly Multiselect)</small></h1>
-                        <h2> Select all of the languages that you speak, or want to speak.</h2>
-                        <form id="frm" class="clearfix">
-                            <span aria-labelledby="langChild" id="langBtnId" class="aria-combobox button">
-                                <span id="langChild">Select Languages</span>
-                                <sup></sup>
-                            </span>
-                            <div id="insertionPoint">
-                                <!--
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm"
+                  >Native Inputs, Editable and Readonly</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm"
+                  >Native Inputs, Editable with Substring Match</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Editable%20with%20Word%20Match/index.htm"
+                  >Native Inputs, Editable with Word Match</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match/index.htm"
+                  >Native Inputs, Multiselect Editable with Substring Match</a
+                >
+              </li>
+              <li>
+                <a href="../Simulated,%20Readonly/index.htm"
+                  >Simulated, Readonly</a
+                >
+              </li>
+              <li>
+                <a href="index.htm" aria-current="page"
+                  >Simulated, Readonly Multiselect</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item simMulti--readonly">
+              <h1 class="pageTitle">
+                ARIA Combobox <small>(Simulated, Readonly Multiselect)</small>
+              </h1>
+              <h2>
+                Select all of the languages that you speak, or want to speak.
+              </h2>
+              <form id="frm" class="clearfix">
+                <span
+                  aria-labelledby="langChild"
+                  id="langBtnId"
+                  class="aria-combobox button"
+                >
+                  <span id="langChild">Select Languages</span>
+                  <sup></sup>
+                </span>
+                <div id="insertionPoint">
+                  <!--
                                     Selected values will be dynamically inserted here.
                                     -->
-                            </div>
-                            <p><button type="reset" id="clearAll">Clear All</button></p>
-                            <!--This button should have type="button" but it breaks the functionality-->
-                            <p><button class="btn--set--alert">Test saved value</button></p>
-                            <select multiple="multiple" name="language" id="languagesId" style="display: none;">
-                                <option value="Acholi">Acholi</option>
-                                <option value="Afrikaans">Afrikaans</option>
-                                <option value="Akan">Akan</option>
-                                <option value="Albanian">Albanian</option>
-                                <option value="Amharic">Amharic</option>
-                                <option value="Arabic">Arabic</option>
-                                <option value="Aramaic">Aramaic</option>
-                                <option value="Armenian">Armenian</option>
-                                <option value="Bambara">Bambara</option>
-                                <option value="Bantu">Bantu</option>
-                                <option value="Bari">Bari</option>
-                                <option value="Basque">Basque</option>
-                                <option value="Behdini">Behdini</option>
-                                <option value="Belarusan">Belarusan</option>
-                                <option value="Bemba">Bemba</option>
-                                <option value="Bengali">Bengali</option>
-                                <option value="Berber">Berber</option>
-                                <option value="Bikol">Bikol</option>
-                                <option value="Bosnian">Bosnian</option>
-                                <option value="Bulgarian">Bulgarian</option>
-                                <option value="Cambodian  (Khmer)">Cambodian (Khmer)</option>
-                                <option value="Cantonese">Cantonese</option>
-                                <option value="Cape Verdean">Cape Verdean</option>
-                                <option value="Catalan">Catalan</option>
-                                <option value="Cebuano">Cebuano</option>
-                                <option value="Chaldean">Chaldean</option>
-                                <option value="Chamorro">Chamorro</option>
-                                <option value="Chichewa">Chichewa</option>
-                                <option value="Chimwiini">Chimwiini</option>
-                                <option value="Chiu Chow">Chiu Chow</option>
-                                <option value="Chuukese">Chuukese</option>
-                                <option value="Cree">Cree</option>
-                                <option value="Croatian Czech">Croatian Czech</option>
-                                <option value="Danish">Danish</option>
-                                <option value="Dari">Dari</option>
-                                <option value="Dinka">Dinka</option>
-                                <option value="Dula">Dula</option>
-                                <option value="Dutch">Dutch</option>
-                                <option value="English">English</option>
-                                <option value="Estonian">Estonian</option>
-                                <option value="Ewe">Ewe</option>
-                                <option value="Fante">Fante</option>
-                                <option value="Farsi">Farsi</option>
-                                <option value="Fiji Hindi">Fiji Hindi</option>
-                                <option value="Finnish">Finnish</option>
-                                <option value="Flemish">Flemish</option>
-                                <option value="Foochow">Foochow</option>
-                                <option value="French">French</option>
-                                <option value="French Creole">French Creole</option>
-                                <option value="Fukienese">Fukienese</option>
-                                <option value="Fulani">Fulani</option>
-                                <option value="Fulfulde">Fulfulde</option>
-                                <option value="Ga">Ga</option>
-                                <option value="Galician">Galician</option>
-                                <option value="Georgian">Georgian</option>
-                                <option value="German">German</option>
-                                <option value="Greek">Greek</option>
-                                <option value="Guarani">Guarani</option>
-                                <option value="Guizhou">Guizhou</option>
-                                <option value="Gujarati">Gujarati</option>
-                                <option value="Haitian Creole">Haitian Creole</option>
-                                <option value="Hakha">Hakha</option>
-                                <option value="Hakka">Hakka</option>
-                                <option value="Hamery">Hamery</option>
-                                <option value="Hausa">Hausa</option>
-                                <option value="Hebrew Hindi">Hebrew Hindi</option>
-                                <option value="Hindko">Hindko</option>
-                                <option value="Hmong">Hmong</option>
-                                <option value="Hokkien">Hokkien</option>
-                                <option value="Huizhou">Huizhou</option>
-                                <option value="Hunanese">Hunanese</option>
-                                <option value="Hungarian">Hungarian</option>
-                                <option value="Ibanag">Ibanag</option>
-                                <option value="Ibo">Ibo</option>
-                                <option value="Icelandic">Icelandic</option>
-                                <option value="Ilocano">Ilocano</option>
-                                <option value="Ilonggo">Ilonggo</option>
-                                <option value="Indonesian">Indonesian</option>
-                                <option value="Inupiaq">Inupiaq</option>
-                                <option value="Italian">Italian</option>
-                                <option value="Japanese">Japanese</option>
-                                <option value="Javanese">Javanese</option>
-                                <option value="Jola">Jola</option>
-                                <option value="Kachi">Kachi</option>
-                                <option value="Kannada">Kannada</option>
-                                <option value="Karen">Karen</option>
-                                <option value="Karon">Karon</option>
-                                <option value="Kashmiri">Kashmiri</option>
-                                <option value="Kayah">Kayah</option>
-                                <option value="Kazakh">Kazakh</option>
-                                <option value="Kinyarwanda">Kinyarwanda</option>
-                                <option value="Kirghiz">Kirghiz</option>
-                                <option value="Kirundi">Kirundi</option>
-                                <option value="Korean">Korean</option>
-                                <option value="Krahn">Krahn</option>
-                                <option value="Kribati">Kribati</option>
-                                <option value="Kunama">Kunama</option>
-                                <option value="Kurdish">Kurdish</option>
-                                <option value="Kurmanji">Kurmanji</option>
-                                <option value="Lahu">Lahu</option>
-                                <option value="Laotian">Laotian</option>
-                                <option value="Latvian">Latvian</option>
-                                <option value="Liberian">Liberian</option>
-                                <option value="Lingala">Lingala</option>
-                                <option value="Lithuanian">Lithuanian</option>
-                                <option value="Luo">Luo</option>
-                                <option value="Luxembourgeois">Luxembourgeois</option>
-                                <option value="Maay Maay">Maay Maay</option>
-                                <option value="Macedonian">Macedonian</option>
-                                <option value="Maharathi">Maharathi</option>
-                                <option value="Malay">Malay</option>
-                                <option value="Malayalam">Malayalam</option>
-                                <option value="Maltese">Maltese</option>
-                                <option value="Mam">Mam</option>
-                                <option value="Mandarin">Mandarin</option>
-                                <option value="Mandingo">Mandingo</option>
-                                <option value="Maninka">Maninka</option>
-                                <option value="Marathi">Marathi</option>
-                                <option value="Marshallese">Marshallese</option>
-                                <option value="Mien">Mien</option>
-                                <option value="Mina">Mina</option>
-                                <option value="Mixteco">Mixteco</option>
-                                <option value="Moldavian">Moldavian</option>
-                                <option value="Mongolian">Mongolian</option>
-                                <option value="Montenegrin">Montenegrin</option>
-                                <option value="Motlockese">Motlockese</option>
-                                <option value="Myanmar">Myanmar</option>
-                                <option value="Navajo">Navajo</option>
-                                <option value="Neopolitan">Neopolitan</option>
-                                <option value="Nepali">Nepali</option>
-                                <option value="Nigerian Pidgin">Nigerian Pidgin</option>
-                                <option value="Norwegian">Norwegian</option>
-                                <option value="Nuer">Nuer</option>
-                                <option value="Nyanja">Nyanja</option>
-                                <option value="Ojibway">Ojibway</option>
-                                <option value="Oromo">Oromo</option>
-                                <option value="Pampangan">Pampangan</option>
-                                <option value="Pangasinan">Pangasinan</option>
-                                <option value="Papago">Papago</option>
-                                <option value="Papiamento">Papiamento</option>
-                                <option value="Pashto">Pashto</option>
-                                <option value="Patois">Patois</option>
-                                <option value="Pidgin Creole">Pidgin Creole</option>
-                                <option value="Polish">Polish</option>
-                                <option value="Portuguese">Portuguese</option>
-                                <option value="Punjabi">Punjabi</option>
-                                <option value="Quechua">Quechua</option>
-                                <option value="Romanian">Romanian</option>
-                                <option value="Romansch">Romansch</option>
-                                <option value="Russian">Russian</option>
-                                <option value="Samoan">Samoan</option>
-                                <option value="Serahule">Serahule</option>
-                                <option value="Serbian">Serbian</option>
-                                <option value="Serbo Croatian">Serbo Croatian</option>
-                                <option value="Shanghainese">Shanghainese</option>
-                                <option value="Shona">Shona</option>
-                                <option value="Sierra Leone Creole">Sierra Leone Creole</option>
-                                <option value="Sindhi">Sindhi</option>
-                                <option value="Sinhalese">Sinhalese</option>
-                                <option value="Slovak">Slovak</option>
-                                <option value="Slovene">Slovene</option>
-                                <option value="Somali">Somali</option>
-                                <option value="Sorani">Sorani</option>
-                                <option value="Sousu">Sousu</option>
-                                <option value="Spanish">Spanish</option>
-                                <option value="Sudanese">Sudanese</option>
-                                <option value="Swahili">Swahili</option>
-                                <option value="Swedish">Swedish</option>
-                                <option value="Tagalog">Tagalog</option>
-                                <option value="Taiwanese">Taiwanese</option>
-                                <option value="Tajik">Tajik</option>
-                                <option value="Tamil">Tamil</option>
-                                <option value="Telegu">Telegu</option>
-                                <option value="Temne">Temne</option>
-                                <option value="Thai">Thai</option>
-                                <option value="Tibetan">Tibetan</option>
-                                <option value="Tigrinya">Tigrinya</option>
-                                <option value="Toishanese">Toishanese</option>
-                                <option value="Tonga">Tonga</option>
-                                <option value="Tongan">Tongan</option>
-                                <option value="Turkish">Turkish</option>
-                                <option value="Twi">Twi</option>
-                                <option value="Tzotzil">Tzotzil</option>
-                                <option value="Ukrainian">Ukrainian</option>
-                                <option value="Urdu">Urdu</option>
-                                <option value="Uyghur">Uyghur</option>
-                                <option value="Uzbek">Uzbek</option>
-                                <option value="Vietnamese">Vietnamese</option>
-                                <option value="Visayan">Visayan</option>
-                                <option value="West African Creole">West African Creole</option>
-                                <option value="Wolof">Wolof</option>
-                                <option value="Xhosa">Xhosa</option>
-                                <option value="Yapese">Yapese</option>
-                                <option value="Yemen">Yemen</option>
-                                <option value="Yiddish">Yiddish</option>
-                                <option value="Yoruba">Yoruba</option>
-                                <option value="Yucatecan">Yucatecan</option>
-                                <option value="Yupik">Yupik</option>
-                                <option value="Zulu">Zulu</option>
-                            </select>
-                        </form>
-                        <div class="note">
-                            <p>The Language field is a readonly ARIA Combobox widget that uses simulated button markup.</p>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The simulated combobox is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Click the Language button to open the combobox control.</li>
-                            <li>Within the combobox, press the <kbd class="down">Down</kbd> arrow to navigate into the dropdown and use the
-                                <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate available options.
-                            </li>
-                            <li>Press the Spacebar to toggle the checked state of specific options.</li>
-                            <li>Press any letter or number within a readonly field to jump to an option starting with that character or digit.</li>
-                            <li>Press <kbd>Enter</kbd> or <kbd>Alt</kbd>+<kbd>Up</kbd> to close the dropdown and save the selection.</li>
-                            <li>To cancel, press <kbd>Escape</kbd>, <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> to close the dropdown.</li>
-                            <li>Sighted mouse users can click the desired option to toggle the checked state, then click the combobox field once again to save the selection and close the dropdown.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
                 </div>
+                <p><button type="reset" id="clearAll">Clear All</button></p>
+                <!--This button should have type="button" but it breaks the functionality-->
+                <p><button class="btn--set--alert">Test saved value</button></p>
+                <select
+                  multiple="multiple"
+                  name="language"
+                  id="languagesId"
+                  style="display: none"
+                >
+                  <option value="Acholi">Acholi</option>
+                  <option value="Afrikaans">Afrikaans</option>
+                  <option value="Akan">Akan</option>
+                  <option value="Albanian">Albanian</option>
+                  <option value="Amharic">Amharic</option>
+                  <option value="Arabic">Arabic</option>
+                  <option value="Aramaic">Aramaic</option>
+                  <option value="Armenian">Armenian</option>
+                  <option value="Bambara">Bambara</option>
+                  <option value="Bantu">Bantu</option>
+                  <option value="Bari">Bari</option>
+                  <option value="Basque">Basque</option>
+                  <option value="Behdini">Behdini</option>
+                  <option value="Belarusan">Belarusan</option>
+                  <option value="Bemba">Bemba</option>
+                  <option value="Bengali">Bengali</option>
+                  <option value="Berber">Berber</option>
+                  <option value="Bikol">Bikol</option>
+                  <option value="Bosnian">Bosnian</option>
+                  <option value="Bulgarian">Bulgarian</option>
+                  <option value="Cambodian  (Khmer)">Cambodian (Khmer)</option>
+                  <option value="Cantonese">Cantonese</option>
+                  <option value="Cape Verdean">Cape Verdean</option>
+                  <option value="Catalan">Catalan</option>
+                  <option value="Cebuano">Cebuano</option>
+                  <option value="Chaldean">Chaldean</option>
+                  <option value="Chamorro">Chamorro</option>
+                  <option value="Chichewa">Chichewa</option>
+                  <option value="Chimwiini">Chimwiini</option>
+                  <option value="Chiu Chow">Chiu Chow</option>
+                  <option value="Chuukese">Chuukese</option>
+                  <option value="Cree">Cree</option>
+                  <option value="Croatian Czech">Croatian Czech</option>
+                  <option value="Danish">Danish</option>
+                  <option value="Dari">Dari</option>
+                  <option value="Dinka">Dinka</option>
+                  <option value="Dula">Dula</option>
+                  <option value="Dutch">Dutch</option>
+                  <option value="English">English</option>
+                  <option value="Estonian">Estonian</option>
+                  <option value="Ewe">Ewe</option>
+                  <option value="Fante">Fante</option>
+                  <option value="Farsi">Farsi</option>
+                  <option value="Fiji Hindi">Fiji Hindi</option>
+                  <option value="Finnish">Finnish</option>
+                  <option value="Flemish">Flemish</option>
+                  <option value="Foochow">Foochow</option>
+                  <option value="French">French</option>
+                  <option value="French Creole">French Creole</option>
+                  <option value="Fukienese">Fukienese</option>
+                  <option value="Fulani">Fulani</option>
+                  <option value="Fulfulde">Fulfulde</option>
+                  <option value="Ga">Ga</option>
+                  <option value="Galician">Galician</option>
+                  <option value="Georgian">Georgian</option>
+                  <option value="German">German</option>
+                  <option value="Greek">Greek</option>
+                  <option value="Guarani">Guarani</option>
+                  <option value="Guizhou">Guizhou</option>
+                  <option value="Gujarati">Gujarati</option>
+                  <option value="Haitian Creole">Haitian Creole</option>
+                  <option value="Hakha">Hakha</option>
+                  <option value="Hakka">Hakka</option>
+                  <option value="Hamery">Hamery</option>
+                  <option value="Hausa">Hausa</option>
+                  <option value="Hebrew Hindi">Hebrew Hindi</option>
+                  <option value="Hindko">Hindko</option>
+                  <option value="Hmong">Hmong</option>
+                  <option value="Hokkien">Hokkien</option>
+                  <option value="Huizhou">Huizhou</option>
+                  <option value="Hunanese">Hunanese</option>
+                  <option value="Hungarian">Hungarian</option>
+                  <option value="Ibanag">Ibanag</option>
+                  <option value="Ibo">Ibo</option>
+                  <option value="Icelandic">Icelandic</option>
+                  <option value="Ilocano">Ilocano</option>
+                  <option value="Ilonggo">Ilonggo</option>
+                  <option value="Indonesian">Indonesian</option>
+                  <option value="Inupiaq">Inupiaq</option>
+                  <option value="Italian">Italian</option>
+                  <option value="Japanese">Japanese</option>
+                  <option value="Javanese">Javanese</option>
+                  <option value="Jola">Jola</option>
+                  <option value="Kachi">Kachi</option>
+                  <option value="Kannada">Kannada</option>
+                  <option value="Karen">Karen</option>
+                  <option value="Karon">Karon</option>
+                  <option value="Kashmiri">Kashmiri</option>
+                  <option value="Kayah">Kayah</option>
+                  <option value="Kazakh">Kazakh</option>
+                  <option value="Kinyarwanda">Kinyarwanda</option>
+                  <option value="Kirghiz">Kirghiz</option>
+                  <option value="Kirundi">Kirundi</option>
+                  <option value="Korean">Korean</option>
+                  <option value="Krahn">Krahn</option>
+                  <option value="Kribati">Kribati</option>
+                  <option value="Kunama">Kunama</option>
+                  <option value="Kurdish">Kurdish</option>
+                  <option value="Kurmanji">Kurmanji</option>
+                  <option value="Lahu">Lahu</option>
+                  <option value="Laotian">Laotian</option>
+                  <option value="Latvian">Latvian</option>
+                  <option value="Liberian">Liberian</option>
+                  <option value="Lingala">Lingala</option>
+                  <option value="Lithuanian">Lithuanian</option>
+                  <option value="Luo">Luo</option>
+                  <option value="Luxembourgeois">Luxembourgeois</option>
+                  <option value="Maay Maay">Maay Maay</option>
+                  <option value="Macedonian">Macedonian</option>
+                  <option value="Maharathi">Maharathi</option>
+                  <option value="Malay">Malay</option>
+                  <option value="Malayalam">Malayalam</option>
+                  <option value="Maltese">Maltese</option>
+                  <option value="Mam">Mam</option>
+                  <option value="Mandarin">Mandarin</option>
+                  <option value="Mandingo">Mandingo</option>
+                  <option value="Maninka">Maninka</option>
+                  <option value="Marathi">Marathi</option>
+                  <option value="Marshallese">Marshallese</option>
+                  <option value="Mien">Mien</option>
+                  <option value="Mina">Mina</option>
+                  <option value="Mixteco">Mixteco</option>
+                  <option value="Moldavian">Moldavian</option>
+                  <option value="Mongolian">Mongolian</option>
+                  <option value="Montenegrin">Montenegrin</option>
+                  <option value="Motlockese">Motlockese</option>
+                  <option value="Myanmar">Myanmar</option>
+                  <option value="Navajo">Navajo</option>
+                  <option value="Neopolitan">Neopolitan</option>
+                  <option value="Nepali">Nepali</option>
+                  <option value="Nigerian Pidgin">Nigerian Pidgin</option>
+                  <option value="Norwegian">Norwegian</option>
+                  <option value="Nuer">Nuer</option>
+                  <option value="Nyanja">Nyanja</option>
+                  <option value="Ojibway">Ojibway</option>
+                  <option value="Oromo">Oromo</option>
+                  <option value="Pampangan">Pampangan</option>
+                  <option value="Pangasinan">Pangasinan</option>
+                  <option value="Papago">Papago</option>
+                  <option value="Papiamento">Papiamento</option>
+                  <option value="Pashto">Pashto</option>
+                  <option value="Patois">Patois</option>
+                  <option value="Pidgin Creole">Pidgin Creole</option>
+                  <option value="Polish">Polish</option>
+                  <option value="Portuguese">Portuguese</option>
+                  <option value="Punjabi">Punjabi</option>
+                  <option value="Quechua">Quechua</option>
+                  <option value="Romanian">Romanian</option>
+                  <option value="Romansch">Romansch</option>
+                  <option value="Russian">Russian</option>
+                  <option value="Samoan">Samoan</option>
+                  <option value="Serahule">Serahule</option>
+                  <option value="Serbian">Serbian</option>
+                  <option value="Serbo Croatian">Serbo Croatian</option>
+                  <option value="Shanghainese">Shanghainese</option>
+                  <option value="Shona">Shona</option>
+                  <option value="Sierra Leone Creole">
+                    Sierra Leone Creole
+                  </option>
+                  <option value="Sindhi">Sindhi</option>
+                  <option value="Sinhalese">Sinhalese</option>
+                  <option value="Slovak">Slovak</option>
+                  <option value="Slovene">Slovene</option>
+                  <option value="Somali">Somali</option>
+                  <option value="Sorani">Sorani</option>
+                  <option value="Sousu">Sousu</option>
+                  <option value="Spanish">Spanish</option>
+                  <option value="Sudanese">Sudanese</option>
+                  <option value="Swahili">Swahili</option>
+                  <option value="Swedish">Swedish</option>
+                  <option value="Tagalog">Tagalog</option>
+                  <option value="Taiwanese">Taiwanese</option>
+                  <option value="Tajik">Tajik</option>
+                  <option value="Tamil">Tamil</option>
+                  <option value="Telegu">Telegu</option>
+                  <option value="Temne">Temne</option>
+                  <option value="Thai">Thai</option>
+                  <option value="Tibetan">Tibetan</option>
+                  <option value="Tigrinya">Tigrinya</option>
+                  <option value="Toishanese">Toishanese</option>
+                  <option value="Tonga">Tonga</option>
+                  <option value="Tongan">Tongan</option>
+                  <option value="Turkish">Turkish</option>
+                  <option value="Twi">Twi</option>
+                  <option value="Tzotzil">Tzotzil</option>
+                  <option value="Ukrainian">Ukrainian</option>
+                  <option value="Urdu">Urdu</option>
+                  <option value="Uyghur">Uyghur</option>
+                  <option value="Uzbek">Uzbek</option>
+                  <option value="Vietnamese">Vietnamese</option>
+                  <option value="Visayan">Visayan</option>
+                  <option value="West African Creole">
+                    West African Creole
+                  </option>
+                  <option value="Wolof">Wolof</option>
+                  <option value="Xhosa">Xhosa</option>
+                  <option value="Yapese">Yapese</option>
+                  <option value="Yemen">Yemen</option>
+                  <option value="Yiddish">Yiddish</option>
+                  <option value="Yoruba">Yoruba</option>
+                  <option value="Yucatecan">Yucatecan</option>
+                  <option value="Yupik">Yupik</option>
+                  <option value="Zulu">Zulu</option>
+                </select>
+              </form>
+              <div class="note">
+                <p>
+                  The Language field is a readonly ARIA Combobox widget that
+                  uses simulated button markup.
+                </p>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The simulated combobox is optimized for screen reader and
+                keyboard only users:
+              </h2>
+              <ul>
+                <li>Click the Language button to open the combobox control.</li>
+                <li>
+                  Within the combobox, press the
+                  <kbd class="down">Down</kbd> arrow to navigate into the
+                  dropdown and use the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate available
+                  options.
+                </li>
+                <li>
+                  Press the Spacebar to toggle the checked state of specific
+                  options.
+                </li>
+                <li>
+                  Press any letter or number within a readonly field to jump to
+                  an option starting with that character or digit.
+                </li>
+                <li>
+                  Press <kbd>Enter</kbd> or <kbd>Alt</kbd>+<kbd>Up</kbd> to
+                  close the dropdown and save the selection.
+                </li>
+                <li>
+                  To cancel, press <kbd>Escape</kbd>, <kbd>Tab</kbd> or
+                  <kbd>Shift</kbd>+<kbd>Tab</kbd> to close the dropdown.
+                </li>
+                <li>
+                  Sighted mouse users can click the desired option to toggle the
+                  checked state, then click the combobox field once again to
+                  save the selection and close the dropdown.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Comboboxes/Simulated, Readonly Multiselect/js/setup.js b/Templates/Comboboxes/Simulated, Readonly Multiselect/js/setup.js
index 3f43cb6e..86d59d2e 100644
--- a/Templates/Comboboxes/Simulated, Readonly Multiselect/js/setup.js	
+++ b/Templates/Comboboxes/Simulated, Readonly Multiselect/js/setup.js	
@@ -63,8 +63,8 @@ $A.import(["CurrentDevice", "Combobox"], { defer: true }, function () {
     window.device.type === "mobile"
       ? 3
       : window.device.type === "tablet"
-      ? 5
-      : 7,
+        ? 5
+        : 7,
   );
 
   // Set specific text for the hidden Close link encountered by screen reader users
diff --git a/Templates/Comboboxes/Simulated, Readonly/index.htm b/Templates/Comboboxes/Simulated, Readonly/index.htm
index 29d72101..9e4a8ae2 100644
--- a/Templates/Comboboxes/Simulated, Readonly/index.htm	
+++ b/Templates/Comboboxes/Simulated, Readonly/index.htm	
@@ -1,349 +1,453 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Comboboxes (Simulated, Readonly) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/combobox.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Comboboxes (Simulated, Readonly) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/combobox.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg">
-                </a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm">Native Inputs, Editable and Readonly</a></li>
-                        <li><a href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm">Native Inputs, Editable with Substring Match</a></li>
-                        <li><a href="../Native%20Inputs,%20Editable%20with%20Word%20Match/index.htm">Native Inputs, Editable with Word Match</a></li>
-                        <li><a href="../Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match/index.htm">Native Inputs, Multiselect Editable with Substring Match</a></li>
-                        <li><a href="index.htm" aria-current="page">Simulated, Readonly</a></li>
-                        <li><a href="../Simulated,%20Readonly%20Multiselect/index.htm">Simulated, Readonly Multiselect</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item sim--readonly">
-                        <h1 class="pageTitle">ARIA Combobox <small>(Simulated, Readonly)</small></h1>
-                        <h2> Some random page with a language selector</h2>
-                        <form id="frm" class="clearfix">
-                            <span title="Choose language" aria-label="Choose language" id="langBtnId" class="aria-combobox button">
-                                <span id="langChild">
-                                    <!--
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+            />
+          </a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm"
+                  >Native Inputs, Editable and Readonly</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm"
+                  >Native Inputs, Editable with Substring Match</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Editable%20with%20Word%20Match/index.htm"
+                  >Native Inputs, Editable with Word Match</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match/index.htm"
+                  >Native Inputs, Multiselect Editable with Substring Match</a
+                >
+              </li>
+              <li>
+                <a href="index.htm" aria-current="page">Simulated, Readonly</a>
+              </li>
+              <li>
+                <a href="../Simulated,%20Readonly%20Multiselect/index.htm"
+                  >Simulated, Readonly Multiselect</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item sim--readonly">
+              <h1 class="pageTitle">
+                ARIA Combobox <small>(Simulated, Readonly)</small>
+              </h1>
+              <h2>Some random page with a language selector</h2>
+              <form id="frm" class="clearfix">
+                <span
+                  title="Choose language"
+                  aria-label="Choose language"
+                  id="langBtnId"
+                  class="aria-combobox button"
+                >
+                  <span id="langChild">
+                    <!--
                                     Selected values will be dynamically inserted here.
                                     -->
-
-                                </span>
-                                <sup></sup>
-                            </span>
-                            <p><button class="btn--set--alert">Test saved value</button></p>
-                            <select name="language" id="languagesId" style="display: none;">
-                                <option value="Acholi">Acholi</option>
-                                <option value="Afrikaans">Afrikaans</option>
-                                <option value="Akan">Akan</option>
-                                <option value="Albanian">Albanian</option>
-                                <option value="Amharic">Amharic</option>
-                                <option value="Arabic">Arabic</option>
-                                <option value="Aramaic">Aramaic</option>
-                                <option value="Armenian">Armenian</option>
-                                <option value="Bambara">Bambara</option>
-                                <option value="Bantu">Bantu</option>
-                                <option value="Bari">Bari</option>
-                                <option value="Basque">Basque</option>
-                                <option value="Behdini">Behdini</option>
-                                <option value="Belarusan">Belarusan</option>
-                                <option value="Bemba">Bemba</option>
-                                <option value="Bengali">Bengali</option>
-                                <option value="Berber">Berber</option>
-                                <option value="Bikol">Bikol</option>
-                                <option value="Bosnian">Bosnian</option>
-                                <option value="Bulgarian">Bulgarian</option>
-                                <option value="Cambodian  (Khmer)">Cambodian (Khmer)</option>
-                                <option value="Cantonese">Cantonese</option>
-                                <option value="Cape Verdean">Cape Verdean</option>
-                                <option value="Catalan">Catalan</option>
-                                <option value="Cebuano">Cebuano</option>
-                                <option value="Chaldean">Chaldean</option>
-                                <option value="Chamorro">Chamorro</option>
-                                <option value="Chichewa">Chichewa</option>
-                                <option value="Chimwiini">Chimwiini</option>
-                                <option value="Chiu Chow">Chiu Chow</option>
-                                <option value="Chuukese">Chuukese</option>
-                                <option value="Cree">Cree</option>
-                                <option value="Croatian Czech">Croatian Czech</option>
-                                <option value="Danish">Danish</option>
-                                <option value="Dari">Dari</option>
-                                <option value="Dinka">Dinka</option>
-                                <option value="Dula">Dula</option>
-                                <option value="Dutch">Dutch</option>
-                                <option selected value="English">English</option>
-                                <option value="Estonian">Estonian</option>
-                                <option value="Ewe">Ewe</option>
-                                <option value="Fante">Fante</option>
-                                <option value="Farsi">Farsi</option>
-                                <option value="Fiji Hindi">Fiji Hindi</option>
-                                <option value="Finnish">Finnish</option>
-                                <option value="Flemish">Flemish</option>
-                                <option value="Foochow">Foochow</option>
-                                <option value="French">French</option>
-                                <option value="French Creole">French Creole</option>
-                                <option value="Fukienese">Fukienese</option>
-                                <option value="Fulani">Fulani</option>
-                                <option value="Fulfulde">Fulfulde</option>
-                                <option value="Ga">Ga</option>
-                                <option value="Galician">Galician</option>
-                                <option value="Georgian">Georgian</option>
-                                <option value="German">German</option>
-                                <option value="Greek">Greek</option>
-                                <option value="Guarani">Guarani</option>
-                                <option value="Guizhou">Guizhou</option>
-                                <option value="Gujarati">Gujarati</option>
-                                <option value="Haitian Creole">Haitian Creole</option>
-                                <option value="Hakha">Hakha</option>
-                                <option value="Hakka">Hakka</option>
-                                <option value="Hamery">Hamery</option>
-                                <option value="Hausa">Hausa</option>
-                                <option value="Hebrew Hindi">Hebrew Hindi</option>
-                                <option value="Hindko">Hindko</option>
-                                <option value="Hmong">Hmong</option>
-                                <option value="Hokkien">Hokkien</option>
-                                <option value="Huizhou">Huizhou</option>
-                                <option value="Hunanese">Hunanese</option>
-                                <option value="Hungarian">Hungarian</option>
-                                <option value="Ibanag">Ibanag</option>
-                                <option value="Ibo">Ibo</option>
-                                <option value="Icelandic">Icelandic</option>
-                                <option value="Ilocano">Ilocano</option>
-                                <option value="Ilonggo">Ilonggo</option>
-                                <option value="Indonesian">Indonesian</option>
-                                <option value="Inupiaq">Inupiaq</option>
-                                <option value="Italian">Italian</option>
-                                <option value="Japanese">Japanese</option>
-                                <option value="Javanese">Javanese</option>
-                                <option value="Jola">Jola</option>
-                                <option value="Kachi">Kachi</option>
-                                <option value="Kannada">Kannada</option>
-                                <option value="Karen">Karen</option>
-                                <option value="Karon">Karon</option>
-                                <option value="Kashmiri">Kashmiri</option>
-                                <option value="Kayah">Kayah</option>
-                                <option value="Kazakh">Kazakh</option>
-                                <option value="Kinyarwanda">Kinyarwanda</option>
-                                <option value="Kirghiz">Kirghiz</option>
-                                <option value="Kirundi">Kirundi</option>
-                                <option value="Korean">Korean</option>
-                                <option value="Krahn">Krahn</option>
-                                <option value="Kribati">Kribati</option>
-                                <option value="Kunama">Kunama</option>
-                                <option value="Kurdish">Kurdish</option>
-                                <option value="Kurmanji">Kurmanji</option>
-                                <option value="Lahu">Lahu</option>
-                                <option value="Laotian">Laotian</option>
-                                <option value="Latvian">Latvian</option>
-                                <option value="Liberian">Liberian</option>
-                                <option value="Lingala">Lingala</option>
-                                <option value="Lithuanian">Lithuanian</option>
-                                <option value="Luo">Luo</option>
-                                <option value="Luxembourgeois">Luxembourgeois</option>
-                                <option value="Maay Maay">Maay Maay</option>
-                                <option value="Macedonian">Macedonian</option>
-                                <option value="Maharathi">Maharathi</option>
-                                <option value="Malay">Malay</option>
-                                <option value="Malayalam">Malayalam</option>
-                                <option value="Maltese">Maltese</option>
-                                <option value="Mam">Mam</option>
-                                <option value="Mandarin">Mandarin</option>
-                                <option value="Mandingo">Mandingo</option>
-                                <option value="Maninka">Maninka</option>
-                                <option value="Marathi">Marathi</option>
-                                <option value="Marshallese">Marshallese</option>
-                                <option value="Mien">Mien</option>
-                                <option value="Mina">Mina</option>
-                                <option value="Mixteco">Mixteco</option>
-                                <option value="Moldavian">Moldavian</option>
-                                <option value="Mongolian">Mongolian</option>
-                                <option value="Montenegrin">Montenegrin</option>
-                                <option value="Motlockese">Motlockese</option>
-                                <option value="Myanmar">Myanmar</option>
-                                <option value="Navajo">Navajo</option>
-                                <option value="Neopolitan">Neopolitan</option>
-                                <option value="Nepali">Nepali</option>
-                                <option value="Nigerian Pidgin">Nigerian Pidgin</option>
-                                <option value="Norwegian">Norwegian</option>
-                                <option value="Nuer">Nuer</option>
-                                <option value="Nyanja">Nyanja</option>
-                                <option value="Ojibway">Ojibway</option>
-                                <option value="Oromo">Oromo</option>
-                                <option value="Pampangan">Pampangan</option>
-                                <option value="Pangasinan">Pangasinan</option>
-                                <option value="Papago">Papago</option>
-                                <option value="Papiamento">Papiamento</option>
-                                <option value="Pashto">Pashto</option>
-                                <option value="Patois">Patois</option>
-                                <option value="Pidgin Creole">Pidgin Creole</option>
-                                <option value="Polish">Polish</option>
-                                <option value="Portuguese">Portuguese</option>
-                                <option value="Punjabi">Punjabi</option>
-                                <option value="Quechua">Quechua</option>
-                                <option value="Romanian">Romanian</option>
-                                <option value="Romansch">Romansch</option>
-                                <option value="Russian">Russian</option>
-                                <option value="Samoan">Samoan</option>
-                                <option value="Serahule">Serahule</option>
-                                <option value="Serbian">Serbian</option>
-                                <option value="Serbo Croatian">Serbo Croatian</option>
-                                <option value="Shanghainese">Shanghainese</option>
-                                <option value="Shona">Shona</option>
-                                <option value="Sierra Leone Creole">Sierra Leone Creole</option>
-                                <option value="Sindhi">Sindhi</option>
-                                <option value="Sinhalese">Sinhalese</option>
-                                <option value="Slovak">Slovak</option>
-                                <option value="Slovene">Slovene</option>
-                                <option value="Somali">Somali</option>
-                                <option value="Sorani">Sorani</option>
-                                <option value="Sousu">Sousu</option>
-                                <option value="Spanish">Spanish</option>
-                                <option value="Sudanese">Sudanese</option>
-                                <option value="Swahili">Swahili</option>
-                                <option value="Swedish">Swedish</option>
-                                <option value="Tagalog">Tagalog</option>
-                                <option value="Taiwanese">Taiwanese</option>
-                                <option value="Tajik">Tajik</option>
-                                <option value="Tamil">Tamil</option>
-                                <option value="Telegu">Telegu</option>
-                                <option value="Temne">Temne</option>
-                                <option value="Thai">Thai</option>
-                                <option value="Tibetan">Tibetan</option>
-                                <option value="Tigrinya">Tigrinya</option>
-                                <option value="Toishanese">Toishanese</option>
-                                <option value="Tonga">Tonga</option>
-                                <option value="Tongan">Tongan</option>
-                                <option value="Turkish">Turkish</option>
-                                <option value="Twi">Twi</option>
-                                <option value="Tzotzil">Tzotzil</option>
-                                <option value="Ukrainian">Ukrainian</option>
-                                <option value="Urdu">Urdu</option>
-                                <option value="Uyghur">Uyghur</option>
-                                <option value="Uzbek">Uzbek</option>
-                                <option value="Vietnamese">Vietnamese</option>
-                                <option value="Visayan">Visayan</option>
-                                <option value="West African Creole">West African Creole</option>
-                                <option value="Wolof">Wolof</option>
-                                <option value="Xhosa">Xhosa</option>
-                                <option value="Yapese">Yapese</option>
-                                <option value="Yemen">Yemen</option>
-                                <option value="Yiddish">Yiddish</option>
-                                <option value="Yoruba">Yoruba</option>
-                                <option value="Yucatecan">Yucatecan</option>
-                                <option value="Yupik">Yupik</option>
-                                <option value="Zulu">Zulu</option>
-                            </select>
-                        </form>
-                        <div class="note">
-                            <p>The Language field is a readonly ARIA Combobox widget that uses simulated button markup.</p>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The simulated combobox is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Click the Language button to open the combobox control.</li>
-                            <li>Within the combobox, press the <kbd class="down">Down</kbd> arrow to navigate into the dropdown and use the
-                                <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate available options.
-                            </li>
-                            <li>Press any letter or number within a readonly field to jump to an option starting with that character or digit.</li>
-                            <li>Press <kbd>Enter</kbd> or <kbd>Alt</kbd>+<kbd>Up</kbd> to close the dropdown and save the selection.</li>
-                            <li>To cancel, press <kbd>Escape</kbd>, <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> to close the dropdown.</li>
-                            <li>Sighted mouse users can click the desired option to save the selection and close the dropdown.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+                  </span>
+                  <sup></sup>
+                </span>
+                <p><button class="btn--set--alert">Test saved value</button></p>
+                <select name="language" id="languagesId" style="display: none">
+                  <option value="Acholi">Acholi</option>
+                  <option value="Afrikaans">Afrikaans</option>
+                  <option value="Akan">Akan</option>
+                  <option value="Albanian">Albanian</option>
+                  <option value="Amharic">Amharic</option>
+                  <option value="Arabic">Arabic</option>
+                  <option value="Aramaic">Aramaic</option>
+                  <option value="Armenian">Armenian</option>
+                  <option value="Bambara">Bambara</option>
+                  <option value="Bantu">Bantu</option>
+                  <option value="Bari">Bari</option>
+                  <option value="Basque">Basque</option>
+                  <option value="Behdini">Behdini</option>
+                  <option value="Belarusan">Belarusan</option>
+                  <option value="Bemba">Bemba</option>
+                  <option value="Bengali">Bengali</option>
+                  <option value="Berber">Berber</option>
+                  <option value="Bikol">Bikol</option>
+                  <option value="Bosnian">Bosnian</option>
+                  <option value="Bulgarian">Bulgarian</option>
+                  <option value="Cambodian  (Khmer)">Cambodian (Khmer)</option>
+                  <option value="Cantonese">Cantonese</option>
+                  <option value="Cape Verdean">Cape Verdean</option>
+                  <option value="Catalan">Catalan</option>
+                  <option value="Cebuano">Cebuano</option>
+                  <option value="Chaldean">Chaldean</option>
+                  <option value="Chamorro">Chamorro</option>
+                  <option value="Chichewa">Chichewa</option>
+                  <option value="Chimwiini">Chimwiini</option>
+                  <option value="Chiu Chow">Chiu Chow</option>
+                  <option value="Chuukese">Chuukese</option>
+                  <option value="Cree">Cree</option>
+                  <option value="Croatian Czech">Croatian Czech</option>
+                  <option value="Danish">Danish</option>
+                  <option value="Dari">Dari</option>
+                  <option value="Dinka">Dinka</option>
+                  <option value="Dula">Dula</option>
+                  <option value="Dutch">Dutch</option>
+                  <option selected value="English">English</option>
+                  <option value="Estonian">Estonian</option>
+                  <option value="Ewe">Ewe</option>
+                  <option value="Fante">Fante</option>
+                  <option value="Farsi">Farsi</option>
+                  <option value="Fiji Hindi">Fiji Hindi</option>
+                  <option value="Finnish">Finnish</option>
+                  <option value="Flemish">Flemish</option>
+                  <option value="Foochow">Foochow</option>
+                  <option value="French">French</option>
+                  <option value="French Creole">French Creole</option>
+                  <option value="Fukienese">Fukienese</option>
+                  <option value="Fulani">Fulani</option>
+                  <option value="Fulfulde">Fulfulde</option>
+                  <option value="Ga">Ga</option>
+                  <option value="Galician">Galician</option>
+                  <option value="Georgian">Georgian</option>
+                  <option value="German">German</option>
+                  <option value="Greek">Greek</option>
+                  <option value="Guarani">Guarani</option>
+                  <option value="Guizhou">Guizhou</option>
+                  <option value="Gujarati">Gujarati</option>
+                  <option value="Haitian Creole">Haitian Creole</option>
+                  <option value="Hakha">Hakha</option>
+                  <option value="Hakka">Hakka</option>
+                  <option value="Hamery">Hamery</option>
+                  <option value="Hausa">Hausa</option>
+                  <option value="Hebrew Hindi">Hebrew Hindi</option>
+                  <option value="Hindko">Hindko</option>
+                  <option value="Hmong">Hmong</option>
+                  <option value="Hokkien">Hokkien</option>
+                  <option value="Huizhou">Huizhou</option>
+                  <option value="Hunanese">Hunanese</option>
+                  <option value="Hungarian">Hungarian</option>
+                  <option value="Ibanag">Ibanag</option>
+                  <option value="Ibo">Ibo</option>
+                  <option value="Icelandic">Icelandic</option>
+                  <option value="Ilocano">Ilocano</option>
+                  <option value="Ilonggo">Ilonggo</option>
+                  <option value="Indonesian">Indonesian</option>
+                  <option value="Inupiaq">Inupiaq</option>
+                  <option value="Italian">Italian</option>
+                  <option value="Japanese">Japanese</option>
+                  <option value="Javanese">Javanese</option>
+                  <option value="Jola">Jola</option>
+                  <option value="Kachi">Kachi</option>
+                  <option value="Kannada">Kannada</option>
+                  <option value="Karen">Karen</option>
+                  <option value="Karon">Karon</option>
+                  <option value="Kashmiri">Kashmiri</option>
+                  <option value="Kayah">Kayah</option>
+                  <option value="Kazakh">Kazakh</option>
+                  <option value="Kinyarwanda">Kinyarwanda</option>
+                  <option value="Kirghiz">Kirghiz</option>
+                  <option value="Kirundi">Kirundi</option>
+                  <option value="Korean">Korean</option>
+                  <option value="Krahn">Krahn</option>
+                  <option value="Kribati">Kribati</option>
+                  <option value="Kunama">Kunama</option>
+                  <option value="Kurdish">Kurdish</option>
+                  <option value="Kurmanji">Kurmanji</option>
+                  <option value="Lahu">Lahu</option>
+                  <option value="Laotian">Laotian</option>
+                  <option value="Latvian">Latvian</option>
+                  <option value="Liberian">Liberian</option>
+                  <option value="Lingala">Lingala</option>
+                  <option value="Lithuanian">Lithuanian</option>
+                  <option value="Luo">Luo</option>
+                  <option value="Luxembourgeois">Luxembourgeois</option>
+                  <option value="Maay Maay">Maay Maay</option>
+                  <option value="Macedonian">Macedonian</option>
+                  <option value="Maharathi">Maharathi</option>
+                  <option value="Malay">Malay</option>
+                  <option value="Malayalam">Malayalam</option>
+                  <option value="Maltese">Maltese</option>
+                  <option value="Mam">Mam</option>
+                  <option value="Mandarin">Mandarin</option>
+                  <option value="Mandingo">Mandingo</option>
+                  <option value="Maninka">Maninka</option>
+                  <option value="Marathi">Marathi</option>
+                  <option value="Marshallese">Marshallese</option>
+                  <option value="Mien">Mien</option>
+                  <option value="Mina">Mina</option>
+                  <option value="Mixteco">Mixteco</option>
+                  <option value="Moldavian">Moldavian</option>
+                  <option value="Mongolian">Mongolian</option>
+                  <option value="Montenegrin">Montenegrin</option>
+                  <option value="Motlockese">Motlockese</option>
+                  <option value="Myanmar">Myanmar</option>
+                  <option value="Navajo">Navajo</option>
+                  <option value="Neopolitan">Neopolitan</option>
+                  <option value="Nepali">Nepali</option>
+                  <option value="Nigerian Pidgin">Nigerian Pidgin</option>
+                  <option value="Norwegian">Norwegian</option>
+                  <option value="Nuer">Nuer</option>
+                  <option value="Nyanja">Nyanja</option>
+                  <option value="Ojibway">Ojibway</option>
+                  <option value="Oromo">Oromo</option>
+                  <option value="Pampangan">Pampangan</option>
+                  <option value="Pangasinan">Pangasinan</option>
+                  <option value="Papago">Papago</option>
+                  <option value="Papiamento">Papiamento</option>
+                  <option value="Pashto">Pashto</option>
+                  <option value="Patois">Patois</option>
+                  <option value="Pidgin Creole">Pidgin Creole</option>
+                  <option value="Polish">Polish</option>
+                  <option value="Portuguese">Portuguese</option>
+                  <option value="Punjabi">Punjabi</option>
+                  <option value="Quechua">Quechua</option>
+                  <option value="Romanian">Romanian</option>
+                  <option value="Romansch">Romansch</option>
+                  <option value="Russian">Russian</option>
+                  <option value="Samoan">Samoan</option>
+                  <option value="Serahule">Serahule</option>
+                  <option value="Serbian">Serbian</option>
+                  <option value="Serbo Croatian">Serbo Croatian</option>
+                  <option value="Shanghainese">Shanghainese</option>
+                  <option value="Shona">Shona</option>
+                  <option value="Sierra Leone Creole">
+                    Sierra Leone Creole
+                  </option>
+                  <option value="Sindhi">Sindhi</option>
+                  <option value="Sinhalese">Sinhalese</option>
+                  <option value="Slovak">Slovak</option>
+                  <option value="Slovene">Slovene</option>
+                  <option value="Somali">Somali</option>
+                  <option value="Sorani">Sorani</option>
+                  <option value="Sousu">Sousu</option>
+                  <option value="Spanish">Spanish</option>
+                  <option value="Sudanese">Sudanese</option>
+                  <option value="Swahili">Swahili</option>
+                  <option value="Swedish">Swedish</option>
+                  <option value="Tagalog">Tagalog</option>
+                  <option value="Taiwanese">Taiwanese</option>
+                  <option value="Tajik">Tajik</option>
+                  <option value="Tamil">Tamil</option>
+                  <option value="Telegu">Telegu</option>
+                  <option value="Temne">Temne</option>
+                  <option value="Thai">Thai</option>
+                  <option value="Tibetan">Tibetan</option>
+                  <option value="Tigrinya">Tigrinya</option>
+                  <option value="Toishanese">Toishanese</option>
+                  <option value="Tonga">Tonga</option>
+                  <option value="Tongan">Tongan</option>
+                  <option value="Turkish">Turkish</option>
+                  <option value="Twi">Twi</option>
+                  <option value="Tzotzil">Tzotzil</option>
+                  <option value="Ukrainian">Ukrainian</option>
+                  <option value="Urdu">Urdu</option>
+                  <option value="Uyghur">Uyghur</option>
+                  <option value="Uzbek">Uzbek</option>
+                  <option value="Vietnamese">Vietnamese</option>
+                  <option value="Visayan">Visayan</option>
+                  <option value="West African Creole">
+                    West African Creole
+                  </option>
+                  <option value="Wolof">Wolof</option>
+                  <option value="Xhosa">Xhosa</option>
+                  <option value="Yapese">Yapese</option>
+                  <option value="Yemen">Yemen</option>
+                  <option value="Yiddish">Yiddish</option>
+                  <option value="Yoruba">Yoruba</option>
+                  <option value="Yucatecan">Yucatecan</option>
+                  <option value="Yupik">Yupik</option>
+                  <option value="Zulu">Zulu</option>
+                </select>
+              </form>
+              <div class="note">
+                <p>
+                  The Language field is a readonly ARIA Combobox widget that
+                  uses simulated button markup.
+                </p>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The simulated combobox is optimized for screen reader and
+                keyboard only users:
+              </h2>
+              <ul>
+                <li>Click the Language button to open the combobox control.</li>
+                <li>
+                  Within the combobox, press the
+                  <kbd class="down">Down</kbd> arrow to navigate into the
+                  dropdown and use the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate available
+                  options.
+                </li>
+                <li>
+                  Press any letter or number within a readonly field to jump to
+                  an option starting with that character or digit.
+                </li>
+                <li>
+                  Press <kbd>Enter</kbd> or <kbd>Alt</kbd>+<kbd>Up</kbd> to
+                  close the dropdown and save the selection.
+                </li>
+                <li>
+                  To cancel, press <kbd>Escape</kbd>, <kbd>Tab</kbd> or
+                  <kbd>Shift</kbd>+<kbd>Tab</kbd> to close the dropdown.
+                </li>
+                <li>
+                  Sighted mouse users can click the desired option to save the
+                  selection and close the dropdown.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Comboboxes/Simulated, Readonly/js/setup.js b/Templates/Comboboxes/Simulated, Readonly/js/setup.js
index 191b02e5..7b5af465 100644
--- a/Templates/Comboboxes/Simulated, Readonly/js/setup.js	
+++ b/Templates/Comboboxes/Simulated, Readonly/js/setup.js	
@@ -56,8 +56,8 @@ $A.import(["CurrentDevice", "Combobox"], { defer: true }, function () {
     window.device.type === "mobile"
       ? 3
       : window.device.type === "tablet"
-      ? 5
-      : 7,
+        ? 5
+        : 7,
   );
 
   // Set specific text for the hidden Close link encountered by screen reader users
diff --git a/Templates/Comboboxes/index.htm b/Templates/Comboboxes/index.htm
index 0b763045..7fa1ea31 100644
--- a/Templates/Comboboxes/index.htm
+++ b/Templates/Comboboxes/index.htm
@@ -1,117 +1,217 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Comboboxes - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Comboboxes</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li class="mobile--componentName"><a href="../index.htm">Back to Components</a></li>
-                        <li class="mobile--componentName"><a href="Native%20Inputs,%20Editable%20and%20Readonly/index.htm">Native Inputs, Editable and Readonly</a></li>
-                        <li class="mobile--componentName"><a href="Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm">Native Inputs, Editable with Substring Match</a></li>
-                        <li class="mobile--componentName"><a href="Native%20Inputs,%20Editable%20with%20Word%20Match/index.htm">Native Inputs, Editable with Word Match</a></li>
-                        <li class="mobile--componentName"><a href="Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match/index.htm">Native Inputs, Multiselect Editable with Substring Match</a></li>
-                        <li class="mobile--componentName"><a href="Simulated,%20Readonly/index.htm">Simulated, Readonly</a></li>
-                        <li class="mobile--componentName"><a href="Simulated,%20Readonly%20Multiselect/index.htm">Simulated, Readonly Multiselect</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <ul>
-                        <li> All Combobox controls are keyboard focusable unless explicitly disabled, and must include an accessible close or toggle icon for sighted mouse and mobile touch device users when applicable.</li>
-                        <li> Interactive editable Combobox controls that use an Input+type=text element, open using the Down arrow, are navigated using Up and Down, are saved and closed by pressing Alt+Up or Enter, are canceled and closed by pressing Escape, and support uninterrupted editability when Left or Right or any other non-control key is pressed.</li>
-                        <li> Interactive readonly Combobox controls that use an Input+type=text element, open using the Down arrow, are navigated using Up and Down, are saved and closed by pressing Alt+Up or Enter, are canceled and closed by pressing Escape, and require a toggleable triggering element for sighted mouse and mobile touch device users.</li>
-                        <li> Interactive Combobox controls that use simulated active elements such as Divs or Spans, are readonly by default, open using the Down arrow or Enter key, are navigated using Up and Down, are saved and closed by pressing Alt+Up or Enter, are canceled and closed by pressing Escape, and act as their own actionable toggle control.</li>
-                    </ul>
-
-                    <p>The 4X ARIA Combobox module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA 1.2 specification.</p>
-
-                    <p>The following attributes are handled automatically by the Combobox module:</p>
-
-                    <ul>
-                        <li> role=combobox</li>
-                        <li> aria-activedescendant</li>
-                        <li> aria-expanded</li>
-                        <li> aria-controls</li>
-                        <li> aria-autocomplete</li>
-                        <li> aria-haspopup</li>
-                        <li> aria-description</li>
-                        <li> role=listbox</li>
-                        <li> role=option</li>
-                        <li> tabindex</li>
-                    </ul>
-
-                    <h2>HTML syntax</h2>
-
-                    <div>
-                        <pre><code class="language-markup">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Comboboxes</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li class="mobile--componentName">
+                <a href="../index.htm">Back to Components</a>
+              </li>
+              <li class="mobile--componentName">
+                <a href="Native%20Inputs,%20Editable%20and%20Readonly/index.htm"
+                  >Native Inputs, Editable and Readonly</a
+                >
+              </li>
+              <li class="mobile--componentName">
+                <a
+                  href="Native%20Inputs,%20Editable%20with%20Substring%20Match/index.htm"
+                  >Native Inputs, Editable with Substring Match</a
+                >
+              </li>
+              <li class="mobile--componentName">
+                <a
+                  href="Native%20Inputs,%20Editable%20with%20Word%20Match/index.htm"
+                  >Native Inputs, Editable with Word Match</a
+                >
+              </li>
+              <li class="mobile--componentName">
+                <a
+                  href="Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match/index.htm"
+                  >Native Inputs, Multiselect Editable with Substring Match</a
+                >
+              </li>
+              <li class="mobile--componentName">
+                <a href="Simulated,%20Readonly/index.htm"
+                  >Simulated, Readonly</a
+                >
+              </li>
+              <li class="mobile--componentName">
+                <a href="Simulated,%20Readonly%20Multiselect/index.htm"
+                  >Simulated, Readonly Multiselect</a
+                >
+              </li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <ul>
+              <li>
+                All Combobox controls are keyboard focusable unless explicitly
+                disabled, and must include an accessible close or toggle icon
+                for sighted mouse and mobile touch device users when applicable.
+              </li>
+              <li>
+                Interactive editable Combobox controls that use an
+                Input+type=text element, open using the Down arrow, are
+                navigated using Up and Down, are saved and closed by pressing
+                Alt+Up or Enter, are canceled and closed by pressing Escape, and
+                support uninterrupted editability when Left or Right or any
+                other non-control key is pressed.
+              </li>
+              <li>
+                Interactive readonly Combobox controls that use an
+                Input+type=text element, open using the Down arrow, are
+                navigated using Up and Down, are saved and closed by pressing
+                Alt+Up or Enter, are canceled and closed by pressing Escape, and
+                require a toggleable triggering element for sighted mouse and
+                mobile touch device users.
+              </li>
+              <li>
+                Interactive Combobox controls that use simulated active elements
+                such as Divs or Spans, are readonly by default, open using the
+                Down arrow or Enter key, are navigated using Up and Down, are
+                saved and closed by pressing Alt+Up or Enter, are canceled and
+                closed by pressing Escape, and act as their own actionable
+                toggle control.
+              </li>
+            </ul>
+
+            <p>
+              The 4X ARIA Combobox module automatically configures all required
+              ARIA attributes and focus handling, in strict accordance with the
+              ARIA 1.2 specification.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the Combobox
+              module:
+            </p>
+
+            <ul>
+              <li>role=combobox</li>
+              <li>aria-activedescendant</li>
+              <li>aria-expanded</li>
+              <li>aria-controls</li>
+              <li>aria-autocomplete</li>
+              <li>aria-haspopup</li>
+              <li>aria-description</li>
+              <li>role=listbox</li>
+              <li>role=option</li>
+              <li>tabindex</li>
+            </ul>
+
+            <h2>HTML syntax</h2>
+
+            <div>
+              <pre><code class="language-markup">
 &lt;label for="comboboxId"> Unique Name: &lt;/label>
 &lt;input type="text" id="comboboxId" >
 </code></pre>
-                    </div>
+            </div>
 
-                    <p>For simulated active elements, any combination of HTML container markup with embedded tags is supported.</p>
+            <p>
+              For simulated active elements, any combination of HTML container
+              markup with embedded tags is supported.
+            </p>
 
-                    <div>
-                        <pre><code class="language-markup">
+            <div>
+              <pre><code class="language-markup">
 &lt;div title="Set your location" id="comboboxId">
   &lt;span id="valueTextId">
     &lt;!-- Selected values will be dynamically inserted here. -->
   &lt;/span>
 &lt;/div>
 </code></pre>
-                    </div>
-
-                    <p>IMPORTANT: The focusable combobox element must not include any other active elements, otherwise these will not be accessible to non-sighted screen reader users.</p>
-
-                    <p>It is equally important not to use aria-label on the simulated combobox to set the accessible name. Otherwise, it will prevent non-sighted screen reader users from being able to read the current value within the embedded markup.</p>
-
-                    <h3>Hidden Select element</h3>
-
-                    <p>All Combobox controls are bound to a standard Select element instance, which may be hidden within the page, or dynamically generated using JavaScript to support dynamic population via AJAX.</p>
+            </div>
 
-                    <div>
-                        <pre><code class="language-markup">
+            <p>
+              IMPORTANT: The focusable combobox element must not include any
+              other active elements, otherwise these will not be accessible to
+              non-sighted screen reader users.
+            </p>
+
+            <p>
+              It is equally important not to use aria-label on the simulated
+              combobox to set the accessible name. Otherwise, it will prevent
+              non-sighted screen reader users from being able to read the
+              current value within the embedded markup.
+            </p>
+
+            <h3>Hidden Select element</h3>
+
+            <p>
+              All Combobox controls are bound to a standard Select element
+              instance, which may be hidden within the page, or dynamically
+              generated using JavaScript to support dynamic population via AJAX.
+            </p>
+
+            <div>
+              <pre><code class="language-markup">
 &lt;select hidden id="hiddenSelectId">
   &lt;option value="value1"> ONE &lt;/option>
   &lt;option value="value2"> TWO &lt;/option>
 &lt;/select>
 </code></pre>
-                    </div>
+            </div>
 
-                    <p>To enable multiselect functionality, add the 'multiple' attribute to the hidden select element.</p>
+            <p>
+              To enable multiselect functionality, add the 'multiple' attribute
+              to the hidden select element.
+            </p>
 
-                    <p>To set a default value for the Combobox other than index[0], add the 'selected' attribute to the default option.</p>
+            <p>
+              To set a default value for the Combobox other than index[0], add
+              the 'selected' attribute to the default option.
+            </p>
 
-                    <h2>JavaScript syntax</h2>
+            <h2>JavaScript syntax</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">
+            <div>
+              <pre><code class="language-javascript">
 var myCombobox = new $A.Combobox({
   select: $A.get("hiddenSelectId"), // Required
   input: $A.get("comboboxId"), // Required
@@ -127,18 +227,26 @@ <h2>JavaScript syntax</h2>
 
 myCombobox.start();
 </code></pre>
-                    </div>
+            </div>
+
+            <ul>
+              <li>Module file: Combobox.js</li>
+              <li>
+                Requires: Velocity.js, VelocityUI.js, Animate.js,
+                SmoothScroll.js, AccName.js, CurrentDevice.js.
+              </li>
+            </ul>
 
-                    <h2>Parameters</h2>
+            <h2>Parameters</h2>
 
-                    <ol>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <ol>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <h3>Configuration</h3>
+            <h3>Configuration</h3>
 
-                    <div>
-                        <pre><code class="language-javascript">{
+            <div>
+              <pre><code class="language-javascript">{
 
 // The hidden Select element DOM node that will be bound to the Combobox control.
 select: selectElementDOMNode ,
@@ -155,16 +263,19 @@ <h3>Configuration</h3>
 }
 
 }</code></pre>
-                    </div>
+            </div>
 
-                    <h2>Programmatic control</h2>
+            <h2>Programmatic control</h2>
 
-                    <p>After a Combobox control is instantiated, the following public properties and methods are available.</p>
+            <p>
+              After a Combobox control is instantiated, the following public
+              properties and methods are available.
+            </p>
 
-                    <h3>Methods</h3>
+            <h3>Methods</h3>
 
-                    <div>
-                        <pre><code class="language-javascript">// Set the listbox to render all Select Options regardless of the current value
+            <div>
+              <pre><code class="language-javascript">// Set the listbox to render all Select Options regardless of the current value
 myCombobox.setShowAll(Boolean); // Default: False
 
 // Enable full listbox content browsing from the keyboard when the down arrow key is pressed. (Applicable only when the value is empty.)
@@ -297,77 +408,106 @@ <h3>Methods</h3>
 // Necessary for non-sighted touch screen device users to detect the end of the Combobox listbox when rendered
 // To disable the offscreen Close link when needed, pass a null value ("") to the method.
 myCombobox.setCloseText(String); // Default: 'Close Popup'</code></pre>
-                    </div>
+            </div>
 
-                    <h3>Properties</h3>
+            <h3>Properties</h3>
 
-                    <div>
-                        <pre><code class="language-javascript">// Access the hidden Select element DOM node
+            <div>
+              <pre><code class="language-javascript">// Access the hidden Select element DOM node
 var selectElement = myCombobox.select;
 
 // Access the role=combobox element DOM node
 var comboboxElement = myCombobox.combobox;</code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Datepickers/Basic - Straylight/index.htm b/Templates/Datepickers/Basic - Straylight/index.htm
index 865e09f9..e637b543 100644
--- a/Templates/Datepickers/Basic - Straylight/index.htm	
+++ b/Templates/Datepickers/Basic - Straylight/index.htm	
@@ -1,155 +1,289 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Date Picker (Straylight Basic) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/datepicker.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Date Picker (Straylight Basic) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/datepicker.css" />
     <script src="/4X/4X.js#Straylight"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Basic/index.htm">Basic</a></li>
-                        <li><a href="../Basic - Straylight/index.htm" aria-current="page">Basic - Straylight</a></li>
-                        <li><a href="../Basic Short/index.htm">Basic Short</a></li>
-                        <li><a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a></li>
-                        <li><a href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm">Basic, ReadOnly Auto Open plus Disabled Ranges</a></li>
-                        <li><a href="../With Absolute Disabled Date Ranges/index.htm">With Absolute Disabled Date Ranges</a></li>
-                        <li><a href="../With Complex Custom Disabled Date Ranges/index.htm">With Complex Custom Disabled Date Ranges</a></li>
-                        <li><a href="../With Custom Date Formats/index.htm">With Custom Date Formats</a></li>
-                        <li><a href="../With Disabled Weekends/index.htm">With Disabled Weekends</a></li>
-                        <li><a href="../With Editable Tooltip Comments/index.htm">With Editable Tooltip Comments</a></li>
-                        <li><a href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm">With Full Calendar Display, Condense Year and Natural PageUpDown</a></li>
-                        <li><a href="../With Relative Disabled Date Ranges/index.htm">With Relative Disabled Date Ranges</a></li>
-                        <li><a href="../With Tooltip Comments/index.htm">With Tooltip Comments</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Date Picker <small> (Basic Straylight)</small></h1>
-                        <div class="dateField">
-                            <div class="dateField--flex-item">
-                                <!-- Attributes explained:
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Basic/index.htm">Basic</a></li>
+              <li>
+                <a href="../Basic - Straylight/index.htm" aria-current="page"
+                  >Basic - Straylight</a
+                >
+              </li>
+              <li><a href="../Basic Short/index.htm">Basic Short</a></li>
+              <li>
+                <a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a>
+              </li>
+              <li>
+                <a
+                  href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm"
+                  >Basic, ReadOnly Auto Open plus Disabled Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Absolute Disabled Date Ranges/index.htm"
+                  >With Absolute Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Complex Custom Disabled Date Ranges/index.htm"
+                  >With Complex Custom Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Custom Date Formats/index.htm"
+                  >With Custom Date Formats</a
+                >
+              </li>
+              <li>
+                <a href="../With Disabled Weekends/index.htm"
+                  >With Disabled Weekends</a
+                >
+              </li>
+              <li>
+                <a href="../With Editable Tooltip Comments/index.htm"
+                  >With Editable Tooltip Comments</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm"
+                  >With Full Calendar Display, Condense Year and Natural
+                  PageUpDown</a
+                >
+              </li>
+              <li>
+                <a href="../With Relative Disabled Date Ranges/index.htm"
+                  >With Relative Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Tooltip Comments/index.htm"
+                  >With Tooltip Comments</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Date Picker <small> (Basic Straylight)</small>
+              </h1>
+              <div class="dateField">
+                <div class="dateField--flex-item">
+                  <!-- Attributes explained:
                                 * class="aria-date-picker" : The class name that specifies an accessible calendar picker. (Must be on the link or button triggering element.)
                                 * controls : The id value for the associated input element where stored dates will be saved after a date is selected. (The id of the input element must match the controls attribute value on the triggering element.) This value is also registered as the ID of the date picker DC object, making it possible to invoke the object programmatically.
                                 -->
-                                <label for="date">Set Date:</label>
-                                <input placeholder="MM/DD/YYYY" id="date" type="text" name="birthdate">
-                                <button data-controls="date" id="dateIcon" class="accCalendar aria-date-picker">
-                                    <img src="img/calendar-button.svg" alt="Calendar" title="Calendar">
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The calendar is keyboard accessible:</h2>
-                        <ul>
-                            <li>When the calendar is opened, focus is set on the current date.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> arrow keys to navigate the row by week day.</li>
-                            <li>Press the <kbd class="home">Home</kbd> and <kbd class="end">End</kbd> keys to jump to the beginning or end of the current row.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate between weeks on the same week day.</li>
-                            <li>Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to navigate backwards or forwards by month.</li>
-                            <li>Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or forwards by year.</li>
-                            <li>Press the <kbd>Enter</kbd> key to activate the selected date.</li>
-                            <li>Press <kbd>Escape</kbd> to close the calendar without making a selection.</li>
-                            <li>Mouse users can click the desired date buttons as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                        <li>
-                            Code contributor:
-                            <a target="ext" href="https://dannya.com">Danny Allen</a>
-                        </li>
-                    </ul>
+                  <label for="date">Set Date:</label>
+                  <input
+                    placeholder="MM/DD/YYYY"
+                    id="date"
+                    type="text"
+                    name="birthdate"
+                  />
+                  <button
+                    data-controls="date"
+                    id="dateIcon"
+                    class="accCalendar aria-date-picker"
+                  >
+                    <img
+                      src="img/calendar-button.svg"
+                      alt="Calendar"
+                      title="Calendar"
+                    />
+                  </button>
                 </div>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The calendar is keyboard accessible:</h2>
+              <ul>
+                <li>
+                  When the calendar is opened, focus is set on the current date.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> arrow keys to navigate the row
+                  by week day.
+                </li>
+                <li>
+                  Press the <kbd class="home">Home</kbd> and
+                  <kbd class="end">End</kbd> keys to jump to the beginning or
+                  end of the current row.
+                </li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate between
+                  weeks on the same week day.
+                </li>
+                <li>
+                  Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to
+                  navigate backwards or forwards by month.
+                </li>
+                <li>
+                  Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and
+                  <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or
+                  forwards by year.
+                </li>
+                <li>
+                  Press the <kbd>Enter</kbd> key to activate the selected date.
+                </li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the calendar without making a
+                  selection.
+                </li>
+                <li>
+                  Mouse users can click the desired date buttons as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+              <li>
+                Code contributor:
+                <a target="ext" href="https://dannya.com">Danny Allen</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Datepickers/Basic Short/index.htm b/Templates/Datepickers/Basic Short/index.htm
index 47df30cf..12209497 100644
--- a/Templates/Datepickers/Basic Short/index.htm	
+++ b/Templates/Datepickers/Basic Short/index.htm	
@@ -1,148 +1,265 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Date Picker (Basic Short) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/datepicker.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Date Picker (Basic Short) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/datepicker.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Basic/index.htm">Basic</a></li>
-                        <li><a href="../Basic - Straylight/index.htm">Basic - Straylight</a></li>
-                        <li><a href="../Basic Short/index.htm" aria-current="page">Basic Short</a></li>
-                        <li><a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a></li>
-                        <li><a href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm">Basic, ReadOnly Auto Open plus Disabled Ranges</a></li>
-                        <li><a href="../With Absolute Disabled Date Ranges/index.htm">With Absolute Disabled Date Ranges</a></li>
-                        <li><a href="../With Complex Custom Disabled Date Ranges/index.htm">With Complex Custom Disabled Date Ranges</a></li>
-                        <li><a href="../With Custom Date Formats/index.htm">With Custom Date Formats</a></li>
-                        <li><a href="../With Disabled Weekends/index.htm">With Disabled Weekends</a></li>
-                        <li><a href="../With Editable Tooltip Comments/index.htm">With Editable Tooltip Comments</a></li>
-                        <li><a href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm">With Full Calendar Display, Condense Year and Natural PageUpDown</a></li>
-                        <li><a href="../With Relative Disabled Date Ranges/index.htm">With Relative Disabled Date Ranges</a></li>
-                        <li><a href="../With Tooltip Comments/index.htm">With Tooltip Comments</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Date Picker <small> (Basic Short)</small></h1>
-                        <div class="dateField">
-                            <div class="dateField--flex-item">
-                                <label for="dateId">Set Short Date:</label>
-                                <input placeholder="MM/YY" id="dateId" type="text" name="date" />
-                                <button id="dateIcon" class="accCalendar aria-date-picker">
-                                    <img src="img/calendar-button.svg" alt="Calendar" title="Calendar" />
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The calendar is keyboard accessible:</h2>
-                        <ul>
-                            <li>When the calendar is opened, focus is set on the current year.</li>
-                            <li>Press the <kbd>Space</kbd> key to open the Year and Month select fields.</li>
-                            <li>Press the <kbd>Enter</kbd> key on the Year or Month select field to save the selected date.</li>
-                            <li>Press <kbd>Escape</kbd> to close the calendar without making a selection.</li>
-                            <li>Mouse users can click the desired date buttons as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                        <li>
-                            Code contributor:
-                            <a target="ext" href="https://dannya.com">Danny Allen</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Basic/index.htm">Basic</a></li>
+              <li>
+                <a href="../Basic - Straylight/index.htm">Basic - Straylight</a>
+              </li>
+              <li>
+                <a href="../Basic Short/index.htm" aria-current="page"
+                  >Basic Short</a
+                >
+              </li>
+              <li>
+                <a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a>
+              </li>
+              <li>
+                <a
+                  href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm"
+                  >Basic, ReadOnly Auto Open plus Disabled Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Absolute Disabled Date Ranges/index.htm"
+                  >With Absolute Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Complex Custom Disabled Date Ranges/index.htm"
+                  >With Complex Custom Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Custom Date Formats/index.htm"
+                  >With Custom Date Formats</a
+                >
+              </li>
+              <li>
+                <a href="../With Disabled Weekends/index.htm"
+                  >With Disabled Weekends</a
+                >
+              </li>
+              <li>
+                <a href="../With Editable Tooltip Comments/index.htm"
+                  >With Editable Tooltip Comments</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm"
+                  >With Full Calendar Display, Condense Year and Natural
+                  PageUpDown</a
+                >
+              </li>
+              <li>
+                <a href="../With Relative Disabled Date Ranges/index.htm"
+                  >With Relative Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Tooltip Comments/index.htm"
+                  >With Tooltip Comments</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Date Picker <small> (Basic Short)</small>
+              </h1>
+              <div class="dateField">
+                <div class="dateField--flex-item">
+                  <label for="dateId">Set Short Date:</label>
+                  <input
+                    placeholder="MM/YY"
+                    id="dateId"
+                    type="text"
+                    name="date"
+                  />
+                  <button id="dateIcon" class="accCalendar aria-date-picker">
+                    <img
+                      src="img/calendar-button.svg"
+                      alt="Calendar"
+                      title="Calendar"
+                    />
+                  </button>
                 </div>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The calendar is keyboard accessible:</h2>
+              <ul>
+                <li>
+                  When the calendar is opened, focus is set on the current year.
+                </li>
+                <li>
+                  Press the <kbd>Space</kbd> key to open the Year and Month
+                  select fields.
+                </li>
+                <li>
+                  Press the <kbd>Enter</kbd> key on the Year or Month select
+                  field to save the selected date.
+                </li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the calendar without making a
+                  selection.
+                </li>
+                <li>
+                  Mouse users can click the desired date buttons as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+              <li>
+                Code contributor:
+                <a target="ext" href="https://dannya.com">Danny Allen</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Datepickers/Basic, Auto Open/index.htm b/Templates/Datepickers/Basic, Auto Open/index.htm
index 74797683..b6b5da77 100644
--- a/Templates/Datepickers/Basic, Auto Open/index.htm	
+++ b/Templates/Datepickers/Basic, Auto Open/index.htm	
@@ -1,154 +1,289 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Date Picker (Basic, Auto Open) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/datepicker.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Date Picker (Basic, Auto Open) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/datepicker.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Basic/index.htm">Basic</a></li>
-                        <li><a href="../Basic - Straylight/index.htm">Basic - Straylight</a></li>
-                        <li><a href="../Basic Short/index.htm">Basic Short</a></li>
-                        <li><a href="../Basic, Auto Open/index.htm" aria-current="page">Basic, Auto Open</a></li>
-                        <li><a href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm">Basic, ReadOnly Auto Open plus Disabled Ranges</a></li>
-                        <li><a href="../With Absolute Disabled Date Ranges/index.htm">With Absolute Disabled Date Ranges</a></li>
-                        <li><a href="../With Complex Custom Disabled Date Ranges/index.htm">With Complex Custom Disabled Date Ranges</a></li>
-                        <li><a href="../With Custom Date Formats/index.htm">With Custom Date Formats</a></li>
-                        <li><a href="../With Disabled Weekends/index.htm">With Disabled Weekends</a></li>
-                        <li><a href="../With Editable Tooltip Comments/index.htm">With Editable Tooltip Comments</a></li>
-                        <li><a href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm">With Full Calendar Display, Condense Year and Natural PageUpDown</a></li>
-                        <li><a href="../With Relative Disabled Date Ranges/index.htm">With Relative Disabled Date Ranges</a></li>
-                        <li><a href="../With Tooltip Comments/index.htm">With Tooltip Comments</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Date Picker <small> (Basic, Auto Open)</small></h1>
-                        <div class="dateField">
-                            <div class="dateField--flex-item">
-                                <label for="date">Set Date:</label>
-                                <input placeholder="MM/DD/YYYY" id="date" type="text" name="date">
-                                <kbd id="keyboardHint" hidden class="down"></kbd>
-                                <button id="dateIcon" class="accCalendar aria-date-picker">
-                                    <img src="img/calendar-button.svg" alt="Calendar" title="Calendar">
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The calendar is keyboard accessible:</h2>
-                        <ul>
-                            <li>Set focus to the input field to automatically open the calendar, focus will remain on the input field.</li>
-                            <li>When the input has focus, press the <kbd class="down">Down</kbd> arrow to set focus on the current date within the calendar.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> arrow keys to navigate the row by week day.</li>
-                            <li>Press the <kbd class="home">Home</kbd> and <kbd class="end">End</kbd> keys to jump to the beginning or end of the current row.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate between weeks on the same week day.</li>
-                            <li>Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to navigate backwards or forwards by month.</li>
-                            <li>Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or forwards by year.</li>
-                            <li>Press the <kbd>Enter</kbd> key to activate the selected date.</li>
-                            <li>Press <kbd>Escape</kbd> to close the calendar without making a selection.</li>
-                            <li>Mouse users can click the desired date buttons as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                        <li>
-                            Code contributor:
-                            <a target="ext" href="https://dannya.com">Danny Allen</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Basic/index.htm">Basic</a></li>
+              <li>
+                <a href="../Basic - Straylight/index.htm">Basic - Straylight</a>
+              </li>
+              <li><a href="../Basic Short/index.htm">Basic Short</a></li>
+              <li>
+                <a href="../Basic, Auto Open/index.htm" aria-current="page"
+                  >Basic, Auto Open</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm"
+                  >Basic, ReadOnly Auto Open plus Disabled Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Absolute Disabled Date Ranges/index.htm"
+                  >With Absolute Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Complex Custom Disabled Date Ranges/index.htm"
+                  >With Complex Custom Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Custom Date Formats/index.htm"
+                  >With Custom Date Formats</a
+                >
+              </li>
+              <li>
+                <a href="../With Disabled Weekends/index.htm"
+                  >With Disabled Weekends</a
+                >
+              </li>
+              <li>
+                <a href="../With Editable Tooltip Comments/index.htm"
+                  >With Editable Tooltip Comments</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm"
+                  >With Full Calendar Display, Condense Year and Natural
+                  PageUpDown</a
+                >
+              </li>
+              <li>
+                <a href="../With Relative Disabled Date Ranges/index.htm"
+                  >With Relative Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Tooltip Comments/index.htm"
+                  >With Tooltip Comments</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Date Picker <small> (Basic, Auto Open)</small>
+              </h1>
+              <div class="dateField">
+                <div class="dateField--flex-item">
+                  <label for="date">Set Date:</label>
+                  <input
+                    placeholder="MM/DD/YYYY"
+                    id="date"
+                    type="text"
+                    name="date"
+                  />
+                  <kbd id="keyboardHint" hidden class="down"></kbd>
+                  <button id="dateIcon" class="accCalendar aria-date-picker">
+                    <img
+                      src="img/calendar-button.svg"
+                      alt="Calendar"
+                      title="Calendar"
+                    />
+                  </button>
                 </div>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The calendar is keyboard accessible:</h2>
+              <ul>
+                <li>
+                  Set focus to the input field to automatically open the
+                  calendar, focus will remain on the input field.
+                </li>
+                <li>
+                  When the input has focus, press the
+                  <kbd class="down">Down</kbd> arrow to set focus on the current
+                  date within the calendar.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> arrow keys to navigate the row
+                  by week day.
+                </li>
+                <li>
+                  Press the <kbd class="home">Home</kbd> and
+                  <kbd class="end">End</kbd> keys to jump to the beginning or
+                  end of the current row.
+                </li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate between
+                  weeks on the same week day.
+                </li>
+                <li>
+                  Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to
+                  navigate backwards or forwards by month.
+                </li>
+                <li>
+                  Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and
+                  <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or
+                  forwards by year.
+                </li>
+                <li>
+                  Press the <kbd>Enter</kbd> key to activate the selected date.
+                </li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the calendar without making a
+                  selection.
+                </li>
+                <li>
+                  Mouse users can click the desired date buttons as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+              <li>
+                Code contributor:
+                <a target="ext" href="https://dannya.com">Danny Allen</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Datepickers/Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm b/Templates/Datepickers/Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm
index ce3b6777..a0a89426 100644
--- a/Templates/Datepickers/Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm	
+++ b/Templates/Datepickers/Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm	
@@ -1,155 +1,292 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Date Picker (Basic, ReadOnly Auto Open plus Disabled Ranges) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/datepicker.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Date Picker (Basic, ReadOnly Auto Open plus Disabled Ranges) - Apex
+      4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/datepicker.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg">
-                </a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Basic/index.htm">Basic</a></li>
-                        <li><a href="../Basic - Straylight/index.htm">Basic - Straylight</a></li>
-                        <li><a href="../Basic Short/index.htm">Basic Short</a></li>
-                        <li><a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a></li>
-                        <li><a href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm" aria-current="page">Basic, ReadOnly Auto Open plus Disabled Ranges</a></li>
-                        <li><a href="../With Absolute Disabled Date Ranges/index.htm">With Absolute Disabled Date Ranges</a></li>
-                        <li><a href="../With Complex Custom Disabled Date Ranges/index.htm">With Complex Custom Disabled Date Ranges</a></li>
-                        <li><a href="../With Custom Date Formats/index.htm">With Custom Date Formats</a></li>
-                        <li><a href="../With Disabled Weekends/index.htm">With Disabled Weekends</a></li>
-                        <li><a href="../With Editable Tooltip Comments/index.htm">With Editable Tooltip Comments</a></li>
-                        <li><a href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm">With Full Calendar Display, Condense Year and Natural PageUpDown</a></li>
-                        <li><a href="../With Relative Disabled Date Ranges/index.htm">With Relative Disabled Date Ranges</a></li>
-                        <li><a href="../With Tooltip Comments/index.htm">With Tooltip Comments</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Date Picker <small> (Basic, ReadOnly Auto Open plus Disabled Ranges)</small></h1>
-                        <div class="dateField">
-                            <div class="dateField--flex-item">
-                                <label for="date">Set Date:</label>
-                                <input readonly placeholder="MM/DD/YYYY" id="date" type="text" name="date">
-                                <kbd id="keyboardHint" hidden class="down"></kbd>
-                                <button id="dateIcon" class="accCalendar aria-date-picker">
-                                    <img src="img/calendar-button.svg" alt="Calendar" title="Calendar">
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The calendar is keyboard accessible:</h2>
-                        <ul>
-                            <li>Set focus to the input field to automatically open the calendar, focus will remain on the input field.</li>
-                            <li>When the input has focus, press the <kbd class="down">Down</kbd> arrow to set focus on the current date within the calendar.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> arrow keys to navigate the row by week day.</li>
-                            <li>Press the <kbd class="home">Home</kbd> and <kbd class="end">End</kbd> keys to jump to the beginning or end of the current row.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate between weeks on the same week day.</li>
-                            <li>Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to navigate backwards or forwards by month.</li>
-                            <li>Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or forwards by year.</li>
-                            <li>Press the <kbd>Enter</kbd> key to activate the selected date.</li>
-                            <li>Press <kbd>Escape</kbd> to close the calendar without making a selection.</li>
-                            <li>Mouse users can click the desired date buttons as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+            />
+          </a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                        <li>
-                            Code contributor:
-                            <a target="ext" href="https://dannya.com">Danny Allen</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Basic/index.htm">Basic</a></li>
+              <li>
+                <a href="../Basic - Straylight/index.htm">Basic - Straylight</a>
+              </li>
+              <li><a href="../Basic Short/index.htm">Basic Short</a></li>
+              <li>
+                <a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a>
+              </li>
+              <li>
+                <a
+                  href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm"
+                  aria-current="page"
+                  >Basic, ReadOnly Auto Open plus Disabled Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Absolute Disabled Date Ranges/index.htm"
+                  >With Absolute Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Complex Custom Disabled Date Ranges/index.htm"
+                  >With Complex Custom Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Custom Date Formats/index.htm"
+                  >With Custom Date Formats</a
+                >
+              </li>
+              <li>
+                <a href="../With Disabled Weekends/index.htm"
+                  >With Disabled Weekends</a
+                >
+              </li>
+              <li>
+                <a href="../With Editable Tooltip Comments/index.htm"
+                  >With Editable Tooltip Comments</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm"
+                  >With Full Calendar Display, Condense Year and Natural
+                  PageUpDown</a
+                >
+              </li>
+              <li>
+                <a href="../With Relative Disabled Date Ranges/index.htm"
+                  >With Relative Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Tooltip Comments/index.htm"
+                  >With Tooltip Comments</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Date Picker
+                <small> (Basic, ReadOnly Auto Open plus Disabled Ranges)</small>
+              </h1>
+              <div class="dateField">
+                <div class="dateField--flex-item">
+                  <label for="date">Set Date:</label>
+                  <input
+                    readonly
+                    placeholder="MM/DD/YYYY"
+                    id="date"
+                    type="text"
+                    name="date"
+                  />
+                  <kbd id="keyboardHint" hidden class="down"></kbd>
+                  <button id="dateIcon" class="accCalendar aria-date-picker">
+                    <img
+                      src="img/calendar-button.svg"
+                      alt="Calendar"
+                      title="Calendar"
+                    />
+                  </button>
                 </div>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The calendar is keyboard accessible:</h2>
+              <ul>
+                <li>
+                  Set focus to the input field to automatically open the
+                  calendar, focus will remain on the input field.
+                </li>
+                <li>
+                  When the input has focus, press the
+                  <kbd class="down">Down</kbd> arrow to set focus on the current
+                  date within the calendar.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> arrow keys to navigate the row
+                  by week day.
+                </li>
+                <li>
+                  Press the <kbd class="home">Home</kbd> and
+                  <kbd class="end">End</kbd> keys to jump to the beginning or
+                  end of the current row.
+                </li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate between
+                  weeks on the same week day.
+                </li>
+                <li>
+                  Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to
+                  navigate backwards or forwards by month.
+                </li>
+                <li>
+                  Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and
+                  <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or
+                  forwards by year.
+                </li>
+                <li>
+                  Press the <kbd>Enter</kbd> key to activate the selected date.
+                </li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the calendar without making a
+                  selection.
+                </li>
+                <li>
+                  Mouse users can click the desired date buttons as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+              <li>
+                Code contributor:
+                <a target="ext" href="https://dannya.com">Danny Allen</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Datepickers/Basic/index.htm b/Templates/Datepickers/Basic/index.htm
index a33661d4..0dac3089 100644
--- a/Templates/Datepickers/Basic/index.htm
+++ b/Templates/Datepickers/Basic/index.htm
@@ -1,152 +1,280 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Date Picker (Basic) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/datepicker.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/datepicker.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Basic/index.htm" aria-current="page">Basic</a></li>
-                        <li><a href="../Basic - Straylight/index.htm">Basic - Straylight</a></li>
-                        <li><a href="../Basic Short/index.htm">Basic Short</a></li>
-                        <li><a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a></li>
-                        <li><a href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm">Basic, ReadOnly Auto Open plus Disabled Ranges</a></li>
-                        <li><a href="../With Absolute Disabled Date Ranges/index.htm">With Absolute Disabled Date Ranges</a></li>
-                        <li><a href="../With Complex Custom Disabled Date Ranges/index.htm">With Complex Custom Disabled Date Ranges</a></li>
-                        <li><a href="../With Custom Date Formats/index.htm">With Custom Date Formats</a></li>
-                        <li><a href="../With Disabled Weekends/index.htm">With Disabled Weekends</a></li>
-                        <li><a href="../With Editable Tooltip Comments/index.htm">With Editable Tooltip Comments</a></li>
-                        <li><a href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm">With Full Calendar Display, Condense Year and Natural PageUpDown</a></li>
-                        <li><a href="../With Relative Disabled Date Ranges/index.htm">With Relative Disabled Date Ranges</a></li>
-                        <li><a href="../With Tooltip Comments/index.htm">With Tooltip Comments</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Date Picker <small> (Basic)</small></h1>
-                        <div class="dateField">
-                            <div class="dateField--flex-item">
-                                <label for="dateId">Set Date:</label>
-                                <input placeholder="MM/DD/YYYY" id="dateId" type="text" name="date" />
-                                <button id="dateIcon" class="accCalendar aria-date-picker">
-                                    <img src="img/calendar-button.svg" alt="Calendar" title="Calendar" />
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The calendar is keyboard accessible:</h2>
-                        <ul>
-                            <li>When the calendar is opened, focus is set on the current date.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> arrow keys to navigate the row by week day.</li>
-                            <li>Press the <kbd class="home">Home</kbd> and <kbd class="end">End</kbd> keys to jump to the beginning or end of the current row.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate between weeks on the same week day.</li>
-                            <li>Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to navigate backwards or forwards by month.</li>
-                            <li>Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or forwards by year.</li>
-                            <li>Press the <kbd>Enter</kbd> key to activate the selected date.</li>
-                            <li>Press <kbd>Escape</kbd> to close the calendar without making a selection.</li>
-                            <li>Mouse users can click the desired date buttons as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                        <li>
-                            Code contributor:
-                            <a target="ext" href="https://dannya.com">Danny Allen</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../Basic/index.htm" aria-current="page">Basic</a>
+              </li>
+              <li>
+                <a href="../Basic - Straylight/index.htm">Basic - Straylight</a>
+              </li>
+              <li><a href="../Basic Short/index.htm">Basic Short</a></li>
+              <li>
+                <a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a>
+              </li>
+              <li>
+                <a
+                  href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm"
+                  >Basic, ReadOnly Auto Open plus Disabled Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Absolute Disabled Date Ranges/index.htm"
+                  >With Absolute Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Complex Custom Disabled Date Ranges/index.htm"
+                  >With Complex Custom Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Custom Date Formats/index.htm"
+                  >With Custom Date Formats</a
+                >
+              </li>
+              <li>
+                <a href="../With Disabled Weekends/index.htm"
+                  >With Disabled Weekends</a
+                >
+              </li>
+              <li>
+                <a href="../With Editable Tooltip Comments/index.htm"
+                  >With Editable Tooltip Comments</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm"
+                  >With Full Calendar Display, Condense Year and Natural
+                  PageUpDown</a
+                >
+              </li>
+              <li>
+                <a href="../With Relative Disabled Date Ranges/index.htm"
+                  >With Relative Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Tooltip Comments/index.htm"
+                  >With Tooltip Comments</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Date Picker <small> (Basic)</small>
+              </h1>
+              <div class="dateField">
+                <div class="dateField--flex-item">
+                  <label for="dateId">Set Date:</label>
+                  <input
+                    placeholder="MM/DD/YYYY"
+                    id="dateId"
+                    type="text"
+                    name="date"
+                  />
+                  <button id="dateIcon" class="accCalendar aria-date-picker">
+                    <img
+                      src="img/calendar-button.svg"
+                      alt="Calendar"
+                      title="Calendar"
+                    />
+                  </button>
                 </div>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The calendar is keyboard accessible:</h2>
+              <ul>
+                <li>
+                  When the calendar is opened, focus is set on the current date.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> arrow keys to navigate the row
+                  by week day.
+                </li>
+                <li>
+                  Press the <kbd class="home">Home</kbd> and
+                  <kbd class="end">End</kbd> keys to jump to the beginning or
+                  end of the current row.
+                </li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate between
+                  weeks on the same week day.
+                </li>
+                <li>
+                  Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to
+                  navigate backwards or forwards by month.
+                </li>
+                <li>
+                  Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and
+                  <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or
+                  forwards by year.
+                </li>
+                <li>
+                  Press the <kbd>Enter</kbd> key to activate the selected date.
+                </li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the calendar without making a
+                  selection.
+                </li>
+                <li>
+                  Mouse users can click the desired date buttons as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+              <li>
+                Code contributor:
+                <a target="ext" href="https://dannya.com">Danny Allen</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Datepickers/With Absolute Disabled Date Ranges/index.htm b/Templates/Datepickers/With Absolute Disabled Date Ranges/index.htm
index 4b6272cb..a17cd2f8 100644
--- a/Templates/Datepickers/With Absolute Disabled Date Ranges/index.htm	
+++ b/Templates/Datepickers/With Absolute Disabled Date Ranges/index.htm	
@@ -1,163 +1,297 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Date Picker (with Absolute Disabled Date Ranges) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/datepicker.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Date Picker (with Absolute Disabled Date Ranges) - Apex 4X Technical
+      Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/datepicker.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Basic/index.htm">Basic</a></li>
-                        <li><a href="../Basic - Straylight/index.htm">Basic - Straylight</a></li>
-                        <li><a href="../Basic Short/index.htm">Basic Short</a></li>
-                        <li><a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a></li>
-                        <li><a href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm">Basic, ReadOnly Auto Open plus Disabled Ranges</a></li>
-                        <li><a href="../With Absolute Disabled Date Ranges/index.htm" aria-current="page">With Absolute Disabled Date Ranges</a></li>
-                        <li><a href="../With Complex Custom Disabled Date Ranges/index.htm">With Complex Custom Disabled Date Ranges</a></li>
-                        <li><a href="../With Custom Date Formats/index.htm">With Custom Date Formats</a></li>
-                        <li><a href="../With Disabled Weekends/index.htm">With Disabled Weekends</a></li>
-                        <li><a href="../With Editable Tooltip Comments/index.htm">With Editable Tooltip Comments</a></li>
-                        <li><a href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm">With Full Calendar Display, Condense Year and Natural PageUpDown</a></li>
-                        <li><a href="../With Relative Disabled Date Ranges/index.htm">With Relative Disabled Date Ranges</a></li>
-                        <li><a href="../With Tooltip Comments/index.htm">With Tooltip Comments</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Date Picker <small> (With Absolute Disabled Date Ranges)</small></h1>
-                        <div class="description">
-                            <p>
-                                Configure absolute and relative disabled date ranges (no earlier than 1st January 2020, and no later than 3 days after today).
-                            </p>
-                            <code>
-                                {<br>
-                                &nbsp;&nbsp;minDate: new Date(2018, 0, 1),<br>
-                                &nbsp;&nbsp;maxDate: 3<br>
-                                }
-                            </code>
-                        </div>
-                        <div class="dateField">
-                            <div class="dateField--flex-item">
-                                <label for="date">Set Date:</label>
-                                <input id="date" type="text" name="date" placeholder="MM/DD/YYYY">
-                                <button id="dateIcon" class="accCalendar aria-date-picker">
-                                    <img src="img/calendar-button.svg" alt="Calendar" title="Calendar">
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The calendar is keyboard accessible:</h2>
-                        <ul>
-                            <li>When the calendar is opened, focus is set on the current date.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> arrow keys to navigate the row by week day.</li>
-                            <li>Press the <kbd class="home">Home</kbd> and <kbd class="end">End</kbd> keys to jump to the beginning or end of the current row.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate between weeks on the same week day.</li>
-                            <li>Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to navigate backwards or forwards by month.</li>
-                            <li>Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or forwards by year.</li>
-                            <li>Press the <kbd>Enter</kbd> key to activate the selected date.</li>
-                            <li>Press <kbd>Escape</kbd> to close the calendar without making a selection.</li>
-                            <li>Mouse users can click the desired date buttons as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                        <li>
-                            Code contributor:
-                            <a target="ext" href="https://dannya.com">Danny Allen</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Basic/index.htm">Basic</a></li>
+              <li>
+                <a href="../Basic - Straylight/index.htm">Basic - Straylight</a>
+              </li>
+              <li><a href="../Basic Short/index.htm">Basic Short</a></li>
+              <li>
+                <a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a>
+              </li>
+              <li>
+                <a
+                  href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm"
+                  >Basic, ReadOnly Auto Open plus Disabled Ranges</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Absolute Disabled Date Ranges/index.htm"
+                  aria-current="page"
+                  >With Absolute Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Complex Custom Disabled Date Ranges/index.htm"
+                  >With Complex Custom Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Custom Date Formats/index.htm"
+                  >With Custom Date Formats</a
+                >
+              </li>
+              <li>
+                <a href="../With Disabled Weekends/index.htm"
+                  >With Disabled Weekends</a
+                >
+              </li>
+              <li>
+                <a href="../With Editable Tooltip Comments/index.htm"
+                  >With Editable Tooltip Comments</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm"
+                  >With Full Calendar Display, Condense Year and Natural
+                  PageUpDown</a
+                >
+              </li>
+              <li>
+                <a href="../With Relative Disabled Date Ranges/index.htm"
+                  >With Relative Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Tooltip Comments/index.htm"
+                  >With Tooltip Comments</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Date Picker
+                <small> (With Absolute Disabled Date Ranges)</small>
+              </h1>
+              <div class="description">
+                <p>
+                  Configure absolute and relative disabled date ranges (no
+                  earlier than 1st January 2020, and no later than 3 days after
+                  today).
+                </p>
+                <code>
+                  {<br />
+                  &nbsp;&nbsp;minDate: new Date(2018, 0, 1),<br />
+                  &nbsp;&nbsp;maxDate: 3<br />
+                  }
+                </code>
+              </div>
+              <div class="dateField">
+                <div class="dateField--flex-item">
+                  <label for="date">Set Date:</label>
+                  <input
+                    id="date"
+                    type="text"
+                    name="date"
+                    placeholder="MM/DD/YYYY"
+                  />
+                  <button id="dateIcon" class="accCalendar aria-date-picker">
+                    <img
+                      src="img/calendar-button.svg"
+                      alt="Calendar"
+                      title="Calendar"
+                    />
+                  </button>
                 </div>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The calendar is keyboard accessible:</h2>
+              <ul>
+                <li>
+                  When the calendar is opened, focus is set on the current date.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> arrow keys to navigate the row
+                  by week day.
+                </li>
+                <li>
+                  Press the <kbd class="home">Home</kbd> and
+                  <kbd class="end">End</kbd> keys to jump to the beginning or
+                  end of the current row.
+                </li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate between
+                  weeks on the same week day.
+                </li>
+                <li>
+                  Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to
+                  navigate backwards or forwards by month.
+                </li>
+                <li>
+                  Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and
+                  <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or
+                  forwards by year.
+                </li>
+                <li>
+                  Press the <kbd>Enter</kbd> key to activate the selected date.
+                </li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the calendar without making a
+                  selection.
+                </li>
+                <li>
+                  Mouse users can click the desired date buttons as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+              <li>
+                Code contributor:
+                <a target="ext" href="https://dannya.com">Danny Allen</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Datepickers/With Complex Custom Disabled Date Ranges/index.htm b/Templates/Datepickers/With Complex Custom Disabled Date Ranges/index.htm
index 7af8c28f..9bfb5a82 100644
--- a/Templates/Datepickers/With Complex Custom Disabled Date Ranges/index.htm	
+++ b/Templates/Datepickers/With Complex Custom Disabled Date Ranges/index.htm	
@@ -1,164 +1,297 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Date Picker (with Complex Custom Disabled Date Ranges) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/datepicker.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Date Picker (with Complex Custom Disabled Date Ranges) - Apex 4X
+      Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/datepicker.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Basic/index.htm">Basic</a></li>
-                        <li><a href="../Basic - Straylight/index.htm">Basic - Straylight</a></li>
-                        <li><a href="../Basic Short/index.htm">Basic Short</a></li>
-                        <li><a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a></li>
-                        <li><a href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm">Basic, ReadOnly Auto Open plus Disabled Ranges</a></li>
-                        <li><a href="../With Absolute Disabled Date Ranges/index.htm">With Absolute Disabled Date Ranges</a></li>
-                        <li><a href="../With Complex Custom Disabled Date Ranges/index.htm" aria-current="page">With Complex Custom Disabled Date Ranges</a></li>
-                        <li><a href="../With Custom Date Formats/index.htm">With Custom Date Formats</a></li>
-                        <li><a href="../With Disabled Weekends/index.htm">With Disabled Weekends</a></li>
-                        <li><a href="../With Editable Tooltip Comments/index.htm">With Editable Tooltip Comments</a></li>
-                        <li><a href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm">With Full Calendar Display, Condense Year and Natural PageUpDown</a></li>
-                        <li><a href="../With Relative Disabled Date Ranges/index.htm">With Relative Disabled Date Ranges</a></li>
-                        <li><a href="../With Tooltip Comments/index.htm">With Tooltip Comments</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Date Picker <small> (With Complex Custom Disabled Date Ranges)</small></h1>
-                        <div class="description">
-                            <p>
-                                Complex custom disabled date ranges defined inside the "ajax" function config option.
-                            </p>
-                            <code>
-                                {<br />
-                                &nbsp;&nbsp;ajax: function(dc, save){<br />
-                                &nbsp;&nbsp;&nbsp;&nbsp;// js/see setup.js<br />
-                                &nbsp;&nbsp;}<br />
-                                }
-                            </code>
-                        </div>
-                        <div class="dateField">
-                            <div class="dateField--flex-item">
-                                <label for="date">Set Date:</label>
-                                <input id="date" type="text" name="date" placeholder="MM/DD/YYYY">
-                                <button id="dateIcon" class="accCalendar aria-date-picker">
-                                    <img src="img/calendar-button.svg" alt="Calendar" title="Calendar">
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The calendar is keyboard accessible:</h2>
-                        <ul>
-                            <li>When the calendar is opened, focus is set on the current date.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> arrow keys to navigate the row by week day.</li>
-                            <li>Press the <kbd class="home">Home</kbd> and <kbd class="end">End</kbd> keys to jump to the beginning or end of the current row.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate between weeks on the same week day.</li>
-                            <li>Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to navigate backwards or forwards by month.</li>
-                            <li>Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or forwards by year.</li>
-                            <li>Press the <kbd>Enter</kbd> key to activate the selected date.</li>
-                            <li>Press <kbd>Escape</kbd> to close the calendar without making a selection.</li>
-                            <li>Mouse users can click the desired date buttons as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                        <li>
-                            Code contributor:
-                            <a target="ext" href="https://dannya.com">Danny Allen</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Basic/index.htm">Basic</a></li>
+              <li>
+                <a href="../Basic - Straylight/index.htm">Basic - Straylight</a>
+              </li>
+              <li><a href="../Basic Short/index.htm">Basic Short</a></li>
+              <li>
+                <a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a>
+              </li>
+              <li>
+                <a
+                  href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm"
+                  >Basic, ReadOnly Auto Open plus Disabled Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Absolute Disabled Date Ranges/index.htm"
+                  >With Absolute Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Complex Custom Disabled Date Ranges/index.htm"
+                  aria-current="page"
+                  >With Complex Custom Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Custom Date Formats/index.htm"
+                  >With Custom Date Formats</a
+                >
+              </li>
+              <li>
+                <a href="../With Disabled Weekends/index.htm"
+                  >With Disabled Weekends</a
+                >
+              </li>
+              <li>
+                <a href="../With Editable Tooltip Comments/index.htm"
+                  >With Editable Tooltip Comments</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm"
+                  >With Full Calendar Display, Condense Year and Natural
+                  PageUpDown</a
+                >
+              </li>
+              <li>
+                <a href="../With Relative Disabled Date Ranges/index.htm"
+                  >With Relative Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Tooltip Comments/index.htm"
+                  >With Tooltip Comments</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Date Picker
+                <small> (With Complex Custom Disabled Date Ranges)</small>
+              </h1>
+              <div class="description">
+                <p>
+                  Complex custom disabled date ranges defined inside the "ajax"
+                  function config option.
+                </p>
+                <code>
+                  {<br />
+                  &nbsp;&nbsp;ajax: function(dc, save){<br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;// js/see setup.js<br />
+                  &nbsp;&nbsp;}<br />
+                  }
+                </code>
+              </div>
+              <div class="dateField">
+                <div class="dateField--flex-item">
+                  <label for="date">Set Date:</label>
+                  <input
+                    id="date"
+                    type="text"
+                    name="date"
+                    placeholder="MM/DD/YYYY"
+                  />
+                  <button id="dateIcon" class="accCalendar aria-date-picker">
+                    <img
+                      src="img/calendar-button.svg"
+                      alt="Calendar"
+                      title="Calendar"
+                    />
+                  </button>
                 </div>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The calendar is keyboard accessible:</h2>
+              <ul>
+                <li>
+                  When the calendar is opened, focus is set on the current date.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> arrow keys to navigate the row
+                  by week day.
+                </li>
+                <li>
+                  Press the <kbd class="home">Home</kbd> and
+                  <kbd class="end">End</kbd> keys to jump to the beginning or
+                  end of the current row.
+                </li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate between
+                  weeks on the same week day.
+                </li>
+                <li>
+                  Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to
+                  navigate backwards or forwards by month.
+                </li>
+                <li>
+                  Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and
+                  <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or
+                  forwards by year.
+                </li>
+                <li>
+                  Press the <kbd>Enter</kbd> key to activate the selected date.
+                </li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the calendar without making a
+                  selection.
+                </li>
+                <li>
+                  Mouse users can click the desired date buttons as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+              <li>
+                Code contributor:
+                <a target="ext" href="https://dannya.com">Danny Allen</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Datepickers/With Custom Date Formats/index.htm b/Templates/Datepickers/With Custom Date Formats/index.htm
index 93470c40..0ef20b0b 100644
--- a/Templates/Datepickers/With Custom Date Formats/index.htm	
+++ b/Templates/Datepickers/With Custom Date Formats/index.htm	
@@ -1,162 +1,292 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Date Picker (with Custom Date Formats) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/datepicker.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Date Picker (with Custom Date Formats) - Apex 4X Technical Style
+      Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/datepicker.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Basic/index.htm">Basic</a></li>
-                        <li><a href="../Basic - Straylight/index.htm">Basic - Straylight</a></li>
-                        <li><a href="../Basic Short/index.htm">Basic Short</a></li>
-                        <li><a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a></li>
-                        <li><a href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm">Basic, ReadOnly Auto Open plus Disabled Ranges</a></li>
-                        <li><a href="../With Absolute Disabled Date Ranges/index.htm">With Absolute Disabled Date Ranges</a></li>
-                        <li><a href="../With Complex Custom Disabled Date Ranges/index.htm">With Complex Custom Disabled Date Ranges</a></li>
-                        <li><a href="../With Custom Date Formats/index.htm" aria-current="page">With Custom Date Formats</a></li>
-                        <li><a href="../With Disabled Weekends/index.htm">With Disabled Weekends</a></li>
-                        <li><a href="../With Editable Tooltip Comments/index.htm">With Editable Tooltip Comments</a></li>
-                        <li><a href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm">With Full Calendar Display, Condense Year and Natural PageUpDown</a></li>
-                        <li><a href="../With Relative Disabled Date Ranges/index.htm">With Relative Disabled Date Ranges</a></li>
-                        <li><a href="../With Tooltip Comments/index.htm">With Tooltip Comments</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Date Picker <small> (With Custom Date Formats)</small></h1>
-                        <div class="description">
-                            <p>
-                                Configured visual and audible date formats.
-                            </p>
-                            <code>
-                                {<br />
-                                &nbsp;&nbsp;inputDateFormat: 'DD/MM/YYYY',<br />
-                                &nbsp;&nbsp;audibleDateFormat: 'D, MMMM YYYY (dddd)'<br />
-                                }
-                            </code>
-                        </div>
-                        <div class="dateField">
-                            <div class="dateField--flex-item">
-                                <label for="date">Set Date:</label>
-                                <input id="date" type="text" name="date" placeholder="MM/DD/YYYY">
-                                <button id="dateIcon" class="accCalendar aria-date-picker">
-                                    <img src="img/calendar-button.svg" alt="Calendar" title="Calendar"></button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The calendar is keyboard accessible:</h2>
-                        <ul>
-                            <li>When the calendar is opened, focus is set on the current date.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> arrow keys to navigate the row by week day.</li>
-                            <li>Press the <kbd class="home">Home</kbd> and <kbd class="end">End</kbd> keys to jump to the beginning or end of the current row.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate between weeks on the same week day.</li>
-                            <li>Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to navigate backwards or forwards by month.</li>
-                            <li>Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or forwards by year.</li>
-                            <li>Press the <kbd>Enter</kbd> key to activate the selected date.</li>
-                            <li>Press <kbd>Escape</kbd> to close the calendar without making a selection.</li>
-                            <li>Mouse users can click the desired date buttons as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                        <li>
-                            Code contributor:
-                            <a target="ext" href="https://dannya.com">Danny Allen</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Basic/index.htm">Basic</a></li>
+              <li>
+                <a href="../Basic - Straylight/index.htm">Basic - Straylight</a>
+              </li>
+              <li><a href="../Basic Short/index.htm">Basic Short</a></li>
+              <li>
+                <a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a>
+              </li>
+              <li>
+                <a
+                  href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm"
+                  >Basic, ReadOnly Auto Open plus Disabled Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Absolute Disabled Date Ranges/index.htm"
+                  >With Absolute Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Complex Custom Disabled Date Ranges/index.htm"
+                  >With Complex Custom Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Custom Date Formats/index.htm"
+                  aria-current="page"
+                  >With Custom Date Formats</a
+                >
+              </li>
+              <li>
+                <a href="../With Disabled Weekends/index.htm"
+                  >With Disabled Weekends</a
+                >
+              </li>
+              <li>
+                <a href="../With Editable Tooltip Comments/index.htm"
+                  >With Editable Tooltip Comments</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm"
+                  >With Full Calendar Display, Condense Year and Natural
+                  PageUpDown</a
+                >
+              </li>
+              <li>
+                <a href="../With Relative Disabled Date Ranges/index.htm"
+                  >With Relative Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Tooltip Comments/index.htm"
+                  >With Tooltip Comments</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Date Picker <small> (With Custom Date Formats)</small>
+              </h1>
+              <div class="description">
+                <p>Configured visual and audible date formats.</p>
+                <code>
+                  {<br />
+                  &nbsp;&nbsp;inputDateFormat: 'DD/MM/YYYY',<br />
+                  &nbsp;&nbsp;audibleDateFormat: 'D, MMMM YYYY (dddd)'<br />
+                  }
+                </code>
+              </div>
+              <div class="dateField">
+                <div class="dateField--flex-item">
+                  <label for="date">Set Date:</label>
+                  <input
+                    id="date"
+                    type="text"
+                    name="date"
+                    placeholder="MM/DD/YYYY"
+                  />
+                  <button id="dateIcon" class="accCalendar aria-date-picker">
+                    <img
+                      src="img/calendar-button.svg"
+                      alt="Calendar"
+                      title="Calendar"
+                    />
+                  </button>
                 </div>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The calendar is keyboard accessible:</h2>
+              <ul>
+                <li>
+                  When the calendar is opened, focus is set on the current date.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> arrow keys to navigate the row
+                  by week day.
+                </li>
+                <li>
+                  Press the <kbd class="home">Home</kbd> and
+                  <kbd class="end">End</kbd> keys to jump to the beginning or
+                  end of the current row.
+                </li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate between
+                  weeks on the same week day.
+                </li>
+                <li>
+                  Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to
+                  navigate backwards or forwards by month.
+                </li>
+                <li>
+                  Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and
+                  <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or
+                  forwards by year.
+                </li>
+                <li>
+                  Press the <kbd>Enter</kbd> key to activate the selected date.
+                </li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the calendar without making a
+                  selection.
+                </li>
+                <li>
+                  Mouse users can click the desired date buttons as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+              <li>
+                Code contributor:
+                <a target="ext" href="https://dannya.com">Danny Allen</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Datepickers/With Disabled Weekends/index.htm b/Templates/Datepickers/With Disabled Weekends/index.htm
index 46765054..95cb8762 100644
--- a/Templates/Datepickers/With Disabled Weekends/index.htm	
+++ b/Templates/Datepickers/With Disabled Weekends/index.htm	
@@ -1,162 +1,290 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Date Picker (with Disabled Weekends) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/datepicker.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Date Picker (with Disabled Weekends) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/datepicker.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Basic/index.htm">Basic</a></li>
-                        <li><a href="../Basic - Straylight/index.htm">Basic - Straylight</a></li>
-                        <li><a href="../Basic Short/index.htm">Basic Short</a></li>
-                        <li><a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a></li>
-                        <li><a href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm">Basic, ReadOnly Auto Open plus Disabled Ranges</a></li>
-                        <li><a href="../With Absolute Disabled Date Ranges/index.htm">With Absolute Disabled Date Ranges</a></li>
-                        <li><a href="../With Complex Custom Disabled Date Ranges/index.htm">With Complex Custom Disabled Date Ranges</a></li>
-                        <li><a href="../With Custom Date Formats/index.htm">With Custom Date Formats</a></li>
-                        <li><a href="../With Disabled Weekends/index.htm" aria-current="page">With Disabled Weekends</a></li>
-                        <li><a href="../With Editable Tooltip Comments/index.htm">With Editable Tooltip Comments</a></li>
-                        <li><a href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm">With Full Calendar Display, Condense Year and Natural PageUpDown</a></li>
-                        <li><a href="../With Relative Disabled Date Ranges/index.htm">With Relative Disabled Date Ranges</a></li>
-                        <li><a href="../With Tooltip Comments/index.htm">With Tooltip Comments</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Date Picker <small> (With Disabled Weekends)</small></h1>
-                        <div class="description">
-                            <p>
-                                Disable weekend days.
-                            </p>
-                            <code>
-                                { <br>
-                                &nbsp;&nbsp;disableWeekends: true <br>
-                                }
-                            </code>
-                        </div>
-                        <div class="dateField">
-                            <div class="dateField--flex-item">
-                                <label for="date">Set Date:</label>
-                                <input id="date" type="text" name="date" placeholder="MM/DD/YYYY">
-                                <button id="dateIcon" class="accCalendar aria-date-picker">
-                                    <img src="img/calendar-button.svg" alt="Calendar" title="Calendar">
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The calendar is keyboard accessible:</h2>
-                        <ul>
-                            <li>When the calendar is opened, focus is set on the current date.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> arrow keys to navigate the row by week day.</li>
-                            <li>Press the <kbd class="home">Home</kbd> and <kbd class="end">End</kbd> keys to jump to the beginning or end of the current row.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate between weeks on the same week day.</li>
-                            <li>Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to navigate backwards or forwards by month.</li>
-                            <li>Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or forwards by year.</li>
-                            <li>Press the <kbd>Enter</kbd> key to activate the selected date.</li>
-                            <li>Press <kbd>Escape</kbd> to close the calendar without making a selection.</li>
-                            <li>Mouse users can click the desired date buttons as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                        <li>
-                            Code contributor:
-                            <a target="ext" href="https://dannya.com">Danny Allen</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Basic/index.htm">Basic</a></li>
+              <li>
+                <a href="../Basic - Straylight/index.htm">Basic - Straylight</a>
+              </li>
+              <li><a href="../Basic Short/index.htm">Basic Short</a></li>
+              <li>
+                <a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a>
+              </li>
+              <li>
+                <a
+                  href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm"
+                  >Basic, ReadOnly Auto Open plus Disabled Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Absolute Disabled Date Ranges/index.htm"
+                  >With Absolute Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Complex Custom Disabled Date Ranges/index.htm"
+                  >With Complex Custom Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Custom Date Formats/index.htm"
+                  >With Custom Date Formats</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Disabled Weekends/index.htm"
+                  aria-current="page"
+                  >With Disabled Weekends</a
+                >
+              </li>
+              <li>
+                <a href="../With Editable Tooltip Comments/index.htm"
+                  >With Editable Tooltip Comments</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm"
+                  >With Full Calendar Display, Condense Year and Natural
+                  PageUpDown</a
+                >
+              </li>
+              <li>
+                <a href="../With Relative Disabled Date Ranges/index.htm"
+                  >With Relative Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Tooltip Comments/index.htm"
+                  >With Tooltip Comments</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Date Picker <small> (With Disabled Weekends)</small>
+              </h1>
+              <div class="description">
+                <p>Disable weekend days.</p>
+                <code>
+                  { <br />
+                  &nbsp;&nbsp;disableWeekends: true <br />
+                  }
+                </code>
+              </div>
+              <div class="dateField">
+                <div class="dateField--flex-item">
+                  <label for="date">Set Date:</label>
+                  <input
+                    id="date"
+                    type="text"
+                    name="date"
+                    placeholder="MM/DD/YYYY"
+                  />
+                  <button id="dateIcon" class="accCalendar aria-date-picker">
+                    <img
+                      src="img/calendar-button.svg"
+                      alt="Calendar"
+                      title="Calendar"
+                    />
+                  </button>
                 </div>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The calendar is keyboard accessible:</h2>
+              <ul>
+                <li>
+                  When the calendar is opened, focus is set on the current date.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> arrow keys to navigate the row
+                  by week day.
+                </li>
+                <li>
+                  Press the <kbd class="home">Home</kbd> and
+                  <kbd class="end">End</kbd> keys to jump to the beginning or
+                  end of the current row.
+                </li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate between
+                  weeks on the same week day.
+                </li>
+                <li>
+                  Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to
+                  navigate backwards or forwards by month.
+                </li>
+                <li>
+                  Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and
+                  <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or
+                  forwards by year.
+                </li>
+                <li>
+                  Press the <kbd>Enter</kbd> key to activate the selected date.
+                </li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the calendar without making a
+                  selection.
+                </li>
+                <li>
+                  Mouse users can click the desired date buttons as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+              <li>
+                Code contributor:
+                <a target="ext" href="https://dannya.com">Danny Allen</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Datepickers/With Editable Tooltip Comments/index.htm b/Templates/Datepickers/With Editable Tooltip Comments/index.htm
index cfdeee11..53cb33a7 100644
--- a/Templates/Datepickers/With Editable Tooltip Comments/index.htm	
+++ b/Templates/Datepickers/With Editable Tooltip Comments/index.htm	
@@ -1,152 +1,284 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Date Picker (with Editable Tooltip Comments) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/datepicker.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Date Picker (with Editable Tooltip Comments) - Apex 4X Technical
+      Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/datepicker.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Basic/index.htm">Basic</a></li>
-                        <li><a href="../Basic - Straylight/index.htm">Basic - Straylight</a></li>
-                        <li><a href="../Basic Short/index.htm">Basic Short</a></li>
-                        <li><a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a></li>
-                        <li><a href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm">Basic, ReadOnly Auto Open plus Disabled Ranges</a></li>
-                        <li><a href="../With Absolute Disabled Date Ranges/index.htm">With Absolute Disabled Date Ranges</a></li>
-                        <li><a href="../With Complex Custom Disabled Date Ranges/index.htm">With Complex Custom Disabled Date Ranges</a></li>
-                        <li><a href="../With Custom Date Formats/index.htm">With Custom Date Formats</a></li>
-                        <li><a href="../With Disabled Weekends/index.htm">With Disabled Weekends</a></li>
-                        <li><a href="../With Editable Tooltip Comments/index.htm" aria-current="page">With Editable Tooltip Comments</a></li>
-                        <li><a href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm">With Full Calendar Display, Condense Year and Natural PageUpDown</a></li>
-                        <li><a href="../With Relative Disabled Date Ranges/index.htm">With Relative Disabled Date Ranges</a></li>
-                        <li><a href="../With Tooltip Comments/index.htm">With Tooltip Comments</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Date Picker <small> (with Editable Tooltip Comments)</small></h1>
-                        <div class="dateField">
-                            <div class="dateField--flex-item">
-                                <label for="date">Set Date:</label>
-                                <input placeholder="MM/DD/YYYY" id="date" type="text" name="date">
-                                <button id="dateIcon" class="accCalendar aria-date-picker">
-                                    <img src="img/calendar-button.svg" alt="Calendar" title="Calendar">
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The calendar is keyboard accessible:</h2>
-                        <ul>
-                            <li>When the calendar is opened, focus is set on the current date.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> arrow keys to navigate the row by week day.</li>
-                            <li>Press the <kbd class="home">Home</kbd> and <kbd class="end">End</kbd> keys to jump to the beginning or end of the current row.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate between weeks on the same week day.</li>
-                            <li>Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to navigate backwards or forwards by month.</li>
-                            <li>Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or forwards by year.</li>
-                            <li>Press the <kbd>Enter</kbd> key to activate the selected date.</li>
-                            <li>Press <kbd>Escape</kbd> to close the calendar without making a selection.</li>
-                            <li>Mouse users can click the desired date buttons as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                        <li>
-                            Code contributor:
-                            <a target="ext" href="https://dannya.com">Danny Allen</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Basic/index.htm">Basic</a></li>
+              <li>
+                <a href="../Basic - Straylight/index.htm">Basic - Straylight</a>
+              </li>
+              <li><a href="../Basic Short/index.htm">Basic Short</a></li>
+              <li>
+                <a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a>
+              </li>
+              <li>
+                <a
+                  href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm"
+                  >Basic, ReadOnly Auto Open plus Disabled Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Absolute Disabled Date Ranges/index.htm"
+                  >With Absolute Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Complex Custom Disabled Date Ranges/index.htm"
+                  >With Complex Custom Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Custom Date Formats/index.htm"
+                  >With Custom Date Formats</a
+                >
+              </li>
+              <li>
+                <a href="../With Disabled Weekends/index.htm"
+                  >With Disabled Weekends</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Editable Tooltip Comments/index.htm"
+                  aria-current="page"
+                  >With Editable Tooltip Comments</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm"
+                  >With Full Calendar Display, Condense Year and Natural
+                  PageUpDown</a
+                >
+              </li>
+              <li>
+                <a href="../With Relative Disabled Date Ranges/index.htm"
+                  >With Relative Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Tooltip Comments/index.htm"
+                  >With Tooltip Comments</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Date Picker
+                <small> (with Editable Tooltip Comments)</small>
+              </h1>
+              <div class="dateField">
+                <div class="dateField--flex-item">
+                  <label for="date">Set Date:</label>
+                  <input
+                    placeholder="MM/DD/YYYY"
+                    id="date"
+                    type="text"
+                    name="date"
+                  />
+                  <button id="dateIcon" class="accCalendar aria-date-picker">
+                    <img
+                      src="img/calendar-button.svg"
+                      alt="Calendar"
+                      title="Calendar"
+                    />
+                  </button>
                 </div>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The calendar is keyboard accessible:</h2>
+              <ul>
+                <li>
+                  When the calendar is opened, focus is set on the current date.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> arrow keys to navigate the row
+                  by week day.
+                </li>
+                <li>
+                  Press the <kbd class="home">Home</kbd> and
+                  <kbd class="end">End</kbd> keys to jump to the beginning or
+                  end of the current row.
+                </li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate between
+                  weeks on the same week day.
+                </li>
+                <li>
+                  Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to
+                  navigate backwards or forwards by month.
+                </li>
+                <li>
+                  Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and
+                  <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or
+                  forwards by year.
+                </li>
+                <li>
+                  Press the <kbd>Enter</kbd> key to activate the selected date.
+                </li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the calendar without making a
+                  selection.
+                </li>
+                <li>
+                  Mouse users can click the desired date buttons as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+              <li>
+                Code contributor:
+                <a target="ext" href="https://dannya.com">Danny Allen</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Datepickers/With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm b/Templates/Datepickers/With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm
index f123c414..1e04745e 100644
--- a/Templates/Datepickers/With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm	
+++ b/Templates/Datepickers/With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm	
@@ -1,172 +1,308 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Date Picker (with Full Calendar Display, Condense Year and Natural PageUpDown) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/datepicker.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Date Picker (with Full Calendar Display, Condense Year and Natural
+      PageUpDown) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/datepicker.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Basic/index.htm">Basic</a></li>
-                        <li><a href="../Basic - Straylight/index.htm">Basic - Straylight</a></li>
-                        <li><a href="../Basic Short/index.htm">Basic Short</a></li>
-                        <li><a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a></li>
-                        <li><a href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm">Basic, ReadOnly Auto Open plus Disabled Ranges</a></li>
-                        <li><a href="../With Absolute Disabled Date Ranges/index.htm">With Absolute Disabled Date Ranges</a></li>
-                        <li><a href="../With Complex Custom Disabled Date Ranges/index.htm">With Complex Custom Disabled Date Ranges</a></li>
-                        <li><a href="../With Custom Date Formats/index.htm">With Custom Date Formats</a></li>
-                        <li><a href="../With Disabled Weekends/index.htm">With Disabled Weekends</a></li>
-                        <li><a href="../With Editable Tooltip Comments/index.htm">With Editable Tooltip Comments</a></li>
-                        <li><a href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm" aria-current="page">With Full Calendar Display, Condense Year and Natural PageUpDown</a></li>
-                        <li><a href="../With Relative Disabled Date Ranges/index.htm">With Relative Disabled Date Ranges</a></li>
-                        <li><a href="../With Tooltip Comments/index.htm">With Tooltip Comments</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Date Picker <small> (with Full Calendar Display, Condense Year and Natural PageUpDown)</small></h1>
-                        <div class="description">
-                            <ul>
-                                <li>
-                                    Condense the year display by removing the year nav buttons
-                                </li>
-                                <li>
-                                    Draw the full calendar, including days in the previous and next months
-                                </li>
-                                <li>
-                                    Make the PageUp key go to the previous month, and the PageDown key go to the next month
-                                </li>
-                            </ul>
-                            <code>
-                                {<br />
-                                &nbsp;&nbsp;condenseYear: true,<br />
-                                &nbsp;&nbsp;drawFullCalendar: true,<br />
-                                &nbsp;&nbsp;pageUpDownNatural: true<br />
-                                }
-                            </code>
-                        </div>
-                        <div class="dateField">
-                            <div class="dateField--flex-item">
-                                <label for="date">Set Date:</label>
-                                <input id="date" type="text" name="date" placeholder="MM/DD/YYYY">
-                                <button id="dateIcon" class="accCalendar aria-date-picker">
-                                    <img src="img/calendar-button.svg" alt="Calendar" title="Calendar">
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The calendar is keyboard accessible:</h2>
-                        <ul>
-                            <li>When the calendar is opened, focus is set on the current date.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> arrow keys to navigate the row by week day.</li>
-                            <li>Press the <kbd class="home">Home</kbd> and <kbd class="end">End</kbd> keys to jump to the beginning or end of the current row.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate between weeks on the same week day.</li>
-                            <li>Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to navigate backwards or forwards by month.</li>
-                            <li>Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or forwards by year.</li>
-                            <li>Press the <kbd>Enter</kbd> key to activate the selected date.</li>
-                            <li>Press <kbd>Escape</kbd> to close the calendar without making a selection.</li>
-                            <li>Mouse users can click the desired date buttons as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                        <li>
-                            Code contributor:
-                            <a target="ext" href="https://dannya.com">Danny Allen</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Basic/index.htm">Basic</a></li>
+              <li>
+                <a href="../Basic - Straylight/index.htm">Basic - Straylight</a>
+              </li>
+              <li><a href="../Basic Short/index.htm">Basic Short</a></li>
+              <li>
+                <a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a>
+              </li>
+              <li>
+                <a
+                  href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm"
+                  >Basic, ReadOnly Auto Open plus Disabled Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Absolute Disabled Date Ranges/index.htm"
+                  >With Absolute Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Complex Custom Disabled Date Ranges/index.htm"
+                  >With Complex Custom Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Custom Date Formats/index.htm"
+                  >With Custom Date Formats</a
+                >
+              </li>
+              <li>
+                <a href="../With Disabled Weekends/index.htm"
+                  >With Disabled Weekends</a
+                >
+              </li>
+              <li>
+                <a href="../With Editable Tooltip Comments/index.htm"
+                  >With Editable Tooltip Comments</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm"
+                  aria-current="page"
+                  >With Full Calendar Display, Condense Year and Natural
+                  PageUpDown</a
+                >
+              </li>
+              <li>
+                <a href="../With Relative Disabled Date Ranges/index.htm"
+                  >With Relative Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Tooltip Comments/index.htm"
+                  >With Tooltip Comments</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Date Picker
+                <small>
+                  (with Full Calendar Display, Condense Year and Natural
+                  PageUpDown)</small
+                >
+              </h1>
+              <div class="description">
+                <ul>
+                  <li>
+                    Condense the year display by removing the year nav buttons
+                  </li>
+                  <li>
+                    Draw the full calendar, including days in the previous and
+                    next months
+                  </li>
+                  <li>
+                    Make the PageUp key go to the previous month, and the
+                    PageDown key go to the next month
+                  </li>
+                </ul>
+                <code>
+                  {<br />
+                  &nbsp;&nbsp;condenseYear: true,<br />
+                  &nbsp;&nbsp;drawFullCalendar: true,<br />
+                  &nbsp;&nbsp;pageUpDownNatural: true<br />
+                  }
+                </code>
+              </div>
+              <div class="dateField">
+                <div class="dateField--flex-item">
+                  <label for="date">Set Date:</label>
+                  <input
+                    id="date"
+                    type="text"
+                    name="date"
+                    placeholder="MM/DD/YYYY"
+                  />
+                  <button id="dateIcon" class="accCalendar aria-date-picker">
+                    <img
+                      src="img/calendar-button.svg"
+                      alt="Calendar"
+                      title="Calendar"
+                    />
+                  </button>
                 </div>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The calendar is keyboard accessible:</h2>
+              <ul>
+                <li>
+                  When the calendar is opened, focus is set on the current date.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> arrow keys to navigate the row
+                  by week day.
+                </li>
+                <li>
+                  Press the <kbd class="home">Home</kbd> and
+                  <kbd class="end">End</kbd> keys to jump to the beginning or
+                  end of the current row.
+                </li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate between
+                  weeks on the same week day.
+                </li>
+                <li>
+                  Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to
+                  navigate backwards or forwards by month.
+                </li>
+                <li>
+                  Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and
+                  <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or
+                  forwards by year.
+                </li>
+                <li>
+                  Press the <kbd>Enter</kbd> key to activate the selected date.
+                </li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the calendar without making a
+                  selection.
+                </li>
+                <li>
+                  Mouse users can click the desired date buttons as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+              <li>
+                Code contributor:
+                <a target="ext" href="https://dannya.com">Danny Allen</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Datepickers/With Relative Disabled Date Ranges/index.htm b/Templates/Datepickers/With Relative Disabled Date Ranges/index.htm
index 6658e9fc..c53f7af1 100644
--- a/Templates/Datepickers/With Relative Disabled Date Ranges/index.htm	
+++ b/Templates/Datepickers/With Relative Disabled Date Ranges/index.htm	
@@ -1,152 +1,288 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Date Picker (with Relative Disabled Date Ranges) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/datepicker.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Date Picker (with Relative Disabled Date Ranges) - Apex 4X Technical
+      Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/datepicker.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Basic/index.htm">Basic</a></li>
-                        <li><a href="../Basic - Straylight/index.htm">Basic - Straylight</a></li>
-                        <li><a href="../Basic Short/index.htm">Basic Short</a></li>
-                        <li><a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a></li>
-                        <li><a href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm">Basic, ReadOnly Auto Open plus Disabled Ranges</a></li>
-                        <li><a href="../With Absolute Disabled Date Ranges/index.htm">With Absolute Disabled Date Ranges</a></li>
-                        <li><a href="../With Complex Custom Disabled Date Ranges/index.htm">With Complex Custom Disabled Date Ranges</a></li>
-                        <li><a href="../With Custom Date Formats/index.htm">With Custom Date Formats</a></li>
-                        <li><a href="../With Disabled Weekends/index.htm">With Disabled Weekends</a></li>
-                        <li><a href="../With Editable Tooltip Comments/index.htm">With Editable Tooltip Comments</a></li>
-                        <li><a href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm">With Full Calendar Display, Condense Year and Natural PageUpDown</a></li>
-                        <li><a href="../With Relative Disabled Date Ranges/index.htm" aria-current="page">With Relative Disabled Date Ranges</a></li>
-                        <li><a href="../With Tooltip Comments/index.htm">With Tooltip Comments</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Date Picker <small> (With Relative Disabled Date Ranges)</small></h1>
-                        <div class="dateField">
-                            <div class="dateField--flex-item">
-                                <label for="date">Set Date:</label>
-                                <input id="date" type="text" name="date" placeholder="MM/DD/YYYY">
-                                <button href="#" id="dateIcon" class="accCalendar aria-date-picker">
-                                    <img src="img/calendar-button.svg" alt="Calendar" title="Calendar">
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The calendar is keyboard accessible:</h2>
-                        <ul>
-                            <li>When the calendar is opened, focus is set on the current date.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> arrow keys to navigate the row by week day.</li>
-                            <li>Press the <kbd class="home">Home</kbd> and <kbd class="end">End</kbd> keys to jump to the beginning or end of the current row.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate between weeks on the same week day.</li>
-                            <li>Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to navigate backwards or forwards by month.</li>
-                            <li>Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or forwards by year.</li>
-                            <li>Press the <kbd>Enter</kbd> key to activate the selected date.</li>
-                            <li>Press <kbd>Escape</kbd> to close the calendar without making a selection.</li>
-                            <li>Mouse users can click the desired date buttons as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                        <li>
-                            Code contributor:
-                            <a target="ext" href="https://dannya.com">Danny Allen</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Basic/index.htm">Basic</a></li>
+              <li>
+                <a href="../Basic - Straylight/index.htm">Basic - Straylight</a>
+              </li>
+              <li><a href="../Basic Short/index.htm">Basic Short</a></li>
+              <li>
+                <a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a>
+              </li>
+              <li>
+                <a
+                  href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm"
+                  >Basic, ReadOnly Auto Open plus Disabled Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Absolute Disabled Date Ranges/index.htm"
+                  >With Absolute Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Complex Custom Disabled Date Ranges/index.htm"
+                  >With Complex Custom Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Custom Date Formats/index.htm"
+                  >With Custom Date Formats</a
+                >
+              </li>
+              <li>
+                <a href="../With Disabled Weekends/index.htm"
+                  >With Disabled Weekends</a
+                >
+              </li>
+              <li>
+                <a href="../With Editable Tooltip Comments/index.htm"
+                  >With Editable Tooltip Comments</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm"
+                  >With Full Calendar Display, Condense Year and Natural
+                  PageUpDown</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Relative Disabled Date Ranges/index.htm"
+                  aria-current="page"
+                  >With Relative Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Tooltip Comments/index.htm"
+                  >With Tooltip Comments</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Date Picker
+                <small> (With Relative Disabled Date Ranges)</small>
+              </h1>
+              <div class="dateField">
+                <div class="dateField--flex-item">
+                  <label for="date">Set Date:</label>
+                  <input
+                    id="date"
+                    type="text"
+                    name="date"
+                    placeholder="MM/DD/YYYY"
+                  />
+                  <button
+                    href="#"
+                    id="dateIcon"
+                    class="accCalendar aria-date-picker"
+                  >
+                    <img
+                      src="img/calendar-button.svg"
+                      alt="Calendar"
+                      title="Calendar"
+                    />
+                  </button>
                 </div>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The calendar is keyboard accessible:</h2>
+              <ul>
+                <li>
+                  When the calendar is opened, focus is set on the current date.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> arrow keys to navigate the row
+                  by week day.
+                </li>
+                <li>
+                  Press the <kbd class="home">Home</kbd> and
+                  <kbd class="end">End</kbd> keys to jump to the beginning or
+                  end of the current row.
+                </li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate between
+                  weeks on the same week day.
+                </li>
+                <li>
+                  Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to
+                  navigate backwards or forwards by month.
+                </li>
+                <li>
+                  Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and
+                  <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or
+                  forwards by year.
+                </li>
+                <li>
+                  Press the <kbd>Enter</kbd> key to activate the selected date.
+                </li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the calendar without making a
+                  selection.
+                </li>
+                <li>
+                  Mouse users can click the desired date buttons as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+              <li>
+                Code contributor:
+                <a target="ext" href="https://dannya.com">Danny Allen</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Datepickers/With Tooltip Comments/index.htm b/Templates/Datepickers/With Tooltip Comments/index.htm
index b07013fa..77435366 100644
--- a/Templates/Datepickers/With Tooltip Comments/index.htm	
+++ b/Templates/Datepickers/With Tooltip Comments/index.htm	
@@ -1,151 +1,280 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Date Picker (with Tooltip Comments) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/datepicker.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Date Picker (with Tooltip Comments) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/datepicker.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Basic/index.htm">Basic</a></li>
-                        <li><a href="../Basic - Straylight/index.htm">Basic - Straylight</a></li>
-                        <li><a href="../Basic Short/index.htm">Basic Short</a></li>
-                        <li><a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a></li>
-                        <li><a href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm">Basic, ReadOnly Auto Open plus Disabled Ranges</a></li>
-                        <li><a href="../With Absolute Disabled Date Ranges/index.htm">With Absolute Disabled Date Ranges</a></li>
-                        <li><a href="../With Complex Custom Disabled Date Ranges/index.htm">With Complex Custom Disabled Date Ranges</a></li>
-                        <li><a href="../With Custom Date Formats/index.htm">With Custom Date Formats</a></li>
-                        <li><a href="../With Disabled Weekends/index.htm">With Disabled Weekends</a></li>
-                        <li><a href="../With Editable Tooltip Comments/index.htm">With Editable Tooltip Comments</a></li>
-                        <li><a href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm">With Full Calendar Display, Condense Year and Natural PageUpDown</a></li>
-                        <li><a href="../With Relative Disabled Date Ranges/index.htm">With Relative Disabled Date Ranges</a></li>
-                        <li><a href="../With Tooltip Comments/index.htm" aria-current="page">With Tooltip Comments</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Date Picker <small> (With Tooltip Comments)</small></h1>
-                        <div class="dateField">
-                            <div class="dateField--flex-item">
-                                <label for="date">Set Date:</label>
-                                <input placeholder="MM/DD/YYYY" id="date" type="text" name="date">
-                                <button id="dateIcon" class="accCalendar aria-date-picker"><img src="img/calendar-button.svg" alt="Calendar" title="Calendar">
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The calendar is keyboard accessible:</h2>
-                        <ul>
-                            <li>When the calendar is opened, focus is set on the current date.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> arrow keys to navigate the row by week day.</li>
-                            <li>Press the <kbd class="home">Home</kbd> and <kbd class="end">End</kbd> keys to jump to the beginning or end of the current row.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> arrow keys to navigate between weeks on the same week day.</li>
-                            <li>Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to navigate backwards or forwards by month.</li>
-                            <li>Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or forwards by year.</li>
-                            <li>Press the <kbd>Enter</kbd> key to activate the selected date.</li>
-                            <li>Press <kbd>Escape</kbd> to close the calendar without making a selection.</li>
-                            <li>Mouse users can click the desired date buttons as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                        <li>
-                            Code contributor:
-                            <a target="ext" href="https://dannya.com">Danny Allen</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Basic/index.htm">Basic</a></li>
+              <li>
+                <a href="../Basic - Straylight/index.htm">Basic - Straylight</a>
+              </li>
+              <li><a href="../Basic Short/index.htm">Basic Short</a></li>
+              <li>
+                <a href="../Basic, Auto Open/index.htm">Basic, Auto Open</a>
+              </li>
+              <li>
+                <a
+                  href="../Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm"
+                  >Basic, ReadOnly Auto Open plus Disabled Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Absolute Disabled Date Ranges/index.htm"
+                  >With Absolute Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Complex Custom Disabled Date Ranges/index.htm"
+                  >With Complex Custom Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Custom Date Formats/index.htm"
+                  >With Custom Date Formats</a
+                >
+              </li>
+              <li>
+                <a href="../With Disabled Weekends/index.htm"
+                  >With Disabled Weekends</a
+                >
+              </li>
+              <li>
+                <a href="../With Editable Tooltip Comments/index.htm"
+                  >With Editable Tooltip Comments</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm"
+                  >With Full Calendar Display, Condense Year and Natural
+                  PageUpDown</a
+                >
+              </li>
+              <li>
+                <a href="../With Relative Disabled Date Ranges/index.htm"
+                  >With Relative Disabled Date Ranges</a
+                >
+              </li>
+              <li>
+                <a href="../With Tooltip Comments/index.htm" aria-current="page"
+                  >With Tooltip Comments</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Date Picker <small> (With Tooltip Comments)</small>
+              </h1>
+              <div class="dateField">
+                <div class="dateField--flex-item">
+                  <label for="date">Set Date:</label>
+                  <input
+                    placeholder="MM/DD/YYYY"
+                    id="date"
+                    type="text"
+                    name="date"
+                  />
+                  <button id="dateIcon" class="accCalendar aria-date-picker">
+                    <img
+                      src="img/calendar-button.svg"
+                      alt="Calendar"
+                      title="Calendar"
+                    />
+                  </button>
                 </div>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The calendar is keyboard accessible:</h2>
+              <ul>
+                <li>
+                  When the calendar is opened, focus is set on the current date.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> arrow keys to navigate the row
+                  by week day.
+                </li>
+                <li>
+                  Press the <kbd class="home">Home</kbd> and
+                  <kbd class="end">End</kbd> keys to jump to the beginning or
+                  end of the current row.
+                </li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> arrow keys to navigate between
+                  weeks on the same week day.
+                </li>
+                <li>
+                  Press the <kbd>PageDown</kbd> and <kbd>PageUp</kbd> keys to
+                  navigate backwards or forwards by month.
+                </li>
+                <li>
+                  Press <kbd>Alt</kbd>+<kbd>PageDown</kbd> and
+                  <kbd>Alt</kbd>+<kbd>PageUp</kbd> to navigate backwards or
+                  forwards by year.
+                </li>
+                <li>
+                  Press the <kbd>Enter</kbd> key to activate the selected date.
+                </li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the calendar without making a
+                  selection.
+                </li>
+                <li>
+                  Mouse users can click the desired date buttons as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+              <li>
+                Code contributor:
+                <a target="ext" href="https://dannya.com">Danny Allen</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Datepickers/index.htm b/Templates/Datepickers/index.htm
index c0f72965..75af07d8 100644
--- a/Templates/Datepickers/index.htm
+++ b/Templates/Datepickers/index.htm
@@ -1,103 +1,195 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Date Pickers - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
+    <meta name="description" content="Scalable ARIA Components" />
     <meta name="Author" content="Bryan Garaventa" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Datepickers</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li class="mobile--componentName"><a href="../index.htm">Back to Components</a></li>
-                        <li class="mobile--componentName"><a href="Basic/index.htm">Basic</a></li>
-                        <li class="mobile--componentName"><a href="Basic - Straylight/index.htm">Basic - Straylight</a></li>
-                        <li class="mobile--componentName"><a href="Basic Short/index.htm">Basic Short</a></li>
-                        <li class="mobile--componentName"><a href="Basic, Auto Open/index.htm">Basic, Auto Open</a></li>
-                        <li class="mobile--componentName"><a href="Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm">Basic, ReadOnly Auto Open plus Disabled Ranges</a></li>
-                        <li class="mobile--componentName"><a href="With Absolute Disabled Date Ranges/index.htm">With Absolute Disabled Date Ranges</a></li>
-                        <li class="mobile--componentName"><a href="With Complex Custom Disabled Date Ranges/index.htm">With Complex Custom Disabled Date Ranges</a></li>
-                        <li class="mobile--componentName"><a href="With Custom Date Formats/index.htm">With Custom Date Formats</a></li>
-                        <li class="mobile--componentName"><a href="With Disabled Weekends/index.htm">With Disabled Weekends</a></li>
-                        <li class="mobile--componentName"><a href="With Editable Tooltip Comments/index.htm">With Editable Tooltip Comments</a></li>
-                        <li class="mobile--componentName extlong"><a href="With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm">With Full Calendar Display, Condense Year and Natural PageUpDown</a></li>
-                        <li class="mobile--componentName"><a href="With Relative Disabled Date Ranges/index.htm">With Relative Disabled Date Ranges</a></li>
-                        <li class="mobile--componentName"><a href="With Tooltip Comments/index.htm">With Tooltip Comments</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>An external triggering element should activate the datepicker for touch support, focus should move into the datepicker when selecting a date using the keyboard, the arrow keys should move between calendar cells and the calendar should scroll automatically between months, PageUp/PageDown should switch between months, Alt+PageUp/PageDown should switch between years, Enter should activate the selected date, and pressing Escape or Tab should close the calendar and return focus to the triggering element.</p>
-
-                    <p>The 4X ARIA Datepicker module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <p>Note: A datepicker is a composite widget, meaning that it is comprised of different ARIA roles and supporting attributes.</p>
-
-                    <p>The following attributes are handled automatically by the Datepicker module:</p>
-
-                    <ul>
-                        <li> role=dialog</li>
-                        <li> role=application</li>
-                        <li> role=button</li>
-                        <li> role=presentation</li>
-                        <li> aria-hidden</li>
-                        <li> aria-label</li>
-                        <li> aria-disabled</li>
-                        <li> aria-current</li>
-                        <li> tabindex</li>
-                    </ul>
-
-                    <h2>HTML syntax</h2>
-
-                    <div>
-                        <pre><code class="language-markup">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Datepickers</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li class="mobile--componentName">
+                <a href="../index.htm">Back to Components</a>
+              </li>
+              <li class="mobile--componentName">
+                <a href="Basic/index.htm">Basic</a>
+              </li>
+              <li class="mobile--componentName">
+                <a href="Basic - Straylight/index.htm">Basic - Straylight</a>
+              </li>
+              <li class="mobile--componentName">
+                <a href="Basic Short/index.htm">Basic Short</a>
+              </li>
+              <li class="mobile--componentName">
+                <a href="Basic, Auto Open/index.htm">Basic, Auto Open</a>
+              </li>
+              <li class="mobile--componentName">
+                <a
+                  href="Basic, ReadOnly Auto Open plus Disabled Ranges/index.htm"
+                  >Basic, ReadOnly Auto Open plus Disabled Ranges</a
+                >
+              </li>
+              <li class="mobile--componentName">
+                <a href="With Absolute Disabled Date Ranges/index.htm"
+                  >With Absolute Disabled Date Ranges</a
+                >
+              </li>
+              <li class="mobile--componentName">
+                <a href="With Complex Custom Disabled Date Ranges/index.htm"
+                  >With Complex Custom Disabled Date Ranges</a
+                >
+              </li>
+              <li class="mobile--componentName">
+                <a href="With Custom Date Formats/index.htm"
+                  >With Custom Date Formats</a
+                >
+              </li>
+              <li class="mobile--componentName">
+                <a href="With Disabled Weekends/index.htm"
+                  >With Disabled Weekends</a
+                >
+              </li>
+              <li class="mobile--componentName">
+                <a href="With Editable Tooltip Comments/index.htm"
+                  >With Editable Tooltip Comments</a
+                >
+              </li>
+              <li class="mobile--componentName extlong">
+                <a
+                  href="With Full Calendar Display, Condense Year and Natural PageUpDown/index.htm"
+                  >With Full Calendar Display, Condense Year and Natural
+                  PageUpDown</a
+                >
+              </li>
+              <li class="mobile--componentName">
+                <a href="With Relative Disabled Date Ranges/index.htm"
+                  >With Relative Disabled Date Ranges</a
+                >
+              </li>
+              <li class="mobile--componentName">
+                <a href="With Tooltip Comments/index.htm"
+                  >With Tooltip Comments</a
+                >
+              </li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              An external triggering element should activate the datepicker for
+              touch support, focus should move into the datepicker when
+              selecting a date using the keyboard, the arrow keys should move
+              between calendar cells and the calendar should scroll
+              automatically between months, PageUp/PageDown should switch
+              between months, Alt+PageUp/PageDown should switch between years,
+              Enter should activate the selected date, and pressing Escape or
+              Tab should close the calendar and return focus to the triggering
+              element.
+            </p>
+
+            <p>
+              The 4X ARIA Datepicker module automatically configures all
+              required ARIA attributes and focus handling, in strict accordance
+              with the ARIA specification.
+            </p>
+
+            <p>
+              Note: A datepicker is a composite widget, meaning that it is
+              comprised of different ARIA roles and supporting attributes.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the
+              Datepicker module:
+            </p>
+
+            <ul>
+              <li>role=dialog</li>
+              <li>role=application</li>
+              <li>role=button</li>
+              <li>role=presentation</li>
+              <li>aria-hidden</li>
+              <li>aria-label</li>
+              <li>aria-disabled</li>
+              <li>aria-current</li>
+              <li>tabindex</li>
+            </ul>
+
+            <h2>HTML syntax</h2>
+
+            <div>
+              <pre><code class="language-markup">
 &lt;label for="dateInputId"> Departure date: &lt;/label>
 &lt;input placeholder="MM/DD/YYYY" id="dateInputId" type="text">
 &lt;button title="Datepicker" id="dateCalendarIconId">&lt;!-- Calendar Icon Here -->&lt;/button>
 </code></pre>
-                    </div>
+            </div>
 
-                    <h2>JavaScript syntax</h2>
+            <h2>JavaScript syntax</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">var myCalendarDC = $A.setDatepicker({
+            <div>
+              <pre><code class="language-javascript">var myCalendarDC = $A.setDatepicker({
 // Configuration key / value map
 });</code></pre>
-                    </div>
+            </div>
+
+            <ul>
+              <li>Module file: Datepicker.js</li>
+              <li>Has no dependencies.</li>
+              <li>Recommended: Velocity.js, VelocityUI.js.</li>
+            </ul>
 
-                    <h2>Parameters</h2>
+            <h2>Parameters</h2>
 
-                    <ol>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <ol>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <h3>Configuration</h3>
+            <h3>Configuration</h3>
 
-                    <div>
-                        <pre><code class="language-javascript">{
+            <div>
+              <pre><code class="language-javascript">{
 
 // Unique ID for the datepicker instance
 // After instantiation, can be referenced using: var DC = $A("UniqueCalendarId");
@@ -363,12 +455,12 @@ <h3>Configuration</h3>
 }
 
 }</code></pre>
-                    </div>
+            </div>
 
-                    <h2>Programmatic control</h2>
+            <h2>Programmatic control</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">// Get a reference to the calendar DC instance using its id.
+            <div>
+              <pre><code class="language-javascript">// Get a reference to the calendar DC instance using its id.
 var dc = $A('UniqueCalendarId');
 
 // Manually open the calendar.
@@ -402,14 +494,18 @@ <h2>Programmatic control</h2>
 dc.setDate(dc, dateObj);
 
 dc.presetDate(dc, initialDateObj, minDateObj, maxDateObj);</code></pre>
-                    </div>
+            </div>
 
-                    <h2>Implementation notes</h2>
+            <h2>Implementation notes</h2>
 
-                    <p>For more granular access to date string values that exist within each calendar object instance, you can access the internal variables like so:</p>
+            <p>
+              For more granular access to date string values that exist within
+              each calendar object instance, you can access the internal
+              variables like so:
+            </p>
 
-                    <div>
-                        <pre><code class="language-javascript">var weekday = dc.range.wDays[dc.range.current.wDay].lng; // = 'Friday'
+            <div>
+              <pre><code class="language-javascript">var weekday = dc.range.wDays[dc.range.current.wDay].lng; // = 'Friday'
 
 var monthName = dc.range[dc.range.current.month].name; // = 'November'
 
@@ -418,71 +514,100 @@ <h2>Implementation notes</h2>
 var day = dc.range.current.mDay; // = '30'
 
 var year = dc.range.current.year; // = '2012'</code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                        <li>
-                            Code contributor:
-                            <a target="ext" href="https://dannya.com">Danny Allen</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+              <li>
+                Code contributor:
+                <a target="ext" href="https://dannya.com">Danny Allen</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Dialogs/External - Alert (Session Timeout)/files/login-dialog.htm b/Templates/Dialogs/External - Alert (Session Timeout)/files/login-dialog.htm
index a2b5e842..2a29fa07 100644
--- a/Templates/Dialogs/External - Alert (Session Timeout)/files/login-dialog.htm	
+++ b/Templates/Dialogs/External - Alert (Session Timeout)/files/login-dialog.htm	
@@ -1,36 +1,30 @@
 <html>
-
-<body>
-
+  <body>
     <!-- Important
                      When Implementing a Close link or button, the className must match the "closeClassName" property within the script declaration.
                     Doing so will automatically bind the close methods with this element, and set keyboard focus properly when the DC object is closed. If closeClassName is not specified, the default class will be set to "CloseDC" instead.
                     -->
     <div hidden id="dialog-timeout">
-        <form id="xForm">
-            <h1>
-                IMPORTANT: YOUR SESSION IS ABOUT TO EXPIRE.
-            </h1>
-            <p>
-                <button type="submit">CONTINUE SESSION</button>
-                <span> | </span>
-                <button class="CloseDC">CANCEL</button>
-            </p>
-        </form>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                $A("#xForm").on("submit", function(ev) {
-                    alert("Do something.");
-                    DC.remove();
-                    ev.preventDefault();
-                });
-            })();
-        </script>
+      <form id="xForm">
+        <h1>IMPORTANT: YOUR SESSION IS ABOUT TO EXPIRE.</h1>
+        <p>
+          <button type="submit">CONTINUE SESSION</button>
+          <span> | </span>
+          <button class="CloseDC">CANCEL</button>
+        </p>
+      </form>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          $A("#xForm").on("submit", function (ev) {
+            alert("Do something.");
+            DC.remove();
+            ev.preventDefault();
+          });
+        })();
+      </script>
     </div>
-
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/Dialogs/External - Alert (Session Timeout)/index.htm b/Templates/Dialogs/External - Alert (Session Timeout)/index.htm
index a436a339..af7ac110 100644
--- a/Templates/Dialogs/External - Alert (Session Timeout)/index.htm	
+++ b/Templates/Dialogs/External - Alert (Session Timeout)/index.htm	
@@ -1,133 +1,210 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Session Timeout Alert Dialog (External Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/dialog.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Session Timeout Alert Dialog (External Content) - Apex 4X Technical Style
+      Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/dialog.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="index.htm" aria-current="page"
+                  >External - Alert (Session Timeout)</a
+                >
+              </li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Alert/index.htm">Internal - Alert</a>
+              </li>
+              <li>
+                <a href="../Internal - Alert (Session Timeout)/index.htm"
+                  >Internal - Alert (Session Timeout)</a
+                >
+              </li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                Session Timeout Alert Dialog <small>External Content</small>
+              </h1>
+              <p>
+                <button id="triggerId" class="lightbox">
+                  Set 4 second timeout.
+                </button>
+              </p>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="index.htm" aria-current="page">External - Alert (Session Timeout)</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Alert/index.htm">Internal - Alert</a></li>
-                        <li><a href="../Internal - Alert (Session Timeout)/index.htm">Internal - Alert (Session Timeout)</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>
+                The dialog is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>Activate the Login button to open the dialog.</li>
+                <li>
+                  Screen reader users will be confined within the dialog
+                  content, and will not be able to see the background page
+                  content. (Confirmed in both Windows platform and iOS touch
+                  screen devices)
+                </li>
+                <li>
+                  Keyboard focus is automatically restricted to active elements
+                  within the dialog.
+                </li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Session Timeout Alert Dialog <small>External Content</small></h1>
-                        <p>
-                            <button id="triggerId" class="lightbox">
-                                Set 4 second timeout.
-                            </button>
-                        </p>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The dialog is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the Login button to open the dialog.</li>
-                            <li>Screen reader users will be confined within the dialog content, and will
-                                not be able to see the background page content. (Confirmed in both Windows
-                                platform and iOS touch screen devices)</li>
-                            <li>Keyboard focus is automatically restricted to active elements within the dialog.</li>
-                        </ul>
-                    </div>
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Dialogs/External - Straylight/files/login-dialog.htm b/Templates/Dialogs/External - Straylight/files/login-dialog.htm
index 1f3a7cd9..07f206d2 100644
--- a/Templates/Dialogs/External - Straylight/files/login-dialog.htm	
+++ b/Templates/Dialogs/External - Straylight/files/login-dialog.htm	
@@ -1,40 +1,50 @@
 <html>
-
-<body>
+  <body>
     <!-- Important
              When Implementing a Close link or button, the className must match the "closeClassName" property within the script declaration.
             Doing so will automatically bind the close methods with this element, and set keyboard focus properly when the DC object is closed.
             -->
     <div id="dialog-login">
-        <form id="lbForm">
-            <p><label for="uname">Username:</label> <input type="text" id="uname" name="uname" /></p>
-            <p><label for="pass">Password:</label> <input type="password" id="pass" name="pass" /></p>
-            <p class="buttons-bar"><input type="submit" id="lbSubmit" value="OK" />
-                <input type="reset" class="lbClose CloseDC" id="lbCancel" value="Cancel" />
-            </p>
-        </form>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                var frm = $A.get("lbForm");
-                $A(frm).on("submit", function(ev) {
-                    if (!frm.uname.value) {
-                        alert("Woops! You forgot your username...");
-                        frm.uname.focus();
-                    } else if (!frm.pass.value) {
-                        alert("Woops! You forgot your password...");
-                        frm.pass.focus();
-                    } else {
-                        alert("WOW!");
-                        DC.remove();
-                    }
-                    ev.preventDefault();
-                });
-            })();
-        </script>
+      <form id="lbForm">
+        <p>
+          <label for="uname">Username:</label>
+          <input type="text" id="uname" name="uname" />
+        </p>
+        <p>
+          <label for="pass">Password:</label>
+          <input type="password" id="pass" name="pass" />
+        </p>
+        <p class="buttons-bar">
+          <input type="submit" id="lbSubmit" value="OK" />
+          <input
+            type="reset"
+            class="lbClose CloseDC"
+            id="lbCancel"
+            value="Cancel"
+          />
+        </p>
+      </form>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          var frm = $A.get("lbForm");
+          $A(frm).on("submit", function (ev) {
+            if (!frm.uname.value) {
+              alert("Woops! You forgot your username...");
+              frm.uname.focus();
+            } else if (!frm.pass.value) {
+              alert("Woops! You forgot your password...");
+              frm.pass.focus();
+            } else {
+              alert("WOW!");
+              DC.remove();
+            }
+            ev.preventDefault();
+          });
+        })();
+      </script>
     </div>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/Dialogs/External - Straylight/index.htm b/Templates/Dialogs/External - Straylight/index.htm
index 1697deaf..9f9ccb61 100644
--- a/Templates/Dialogs/External - Straylight/index.htm	
+++ b/Templates/Dialogs/External - Straylight/index.htm	
@@ -1,131 +1,208 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Straylight Dialog (External Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/dialog.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Straylight Dialog (External Content) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/dialog.css" />
     <script src="/4X/4X.js#Straylight"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="index.htm" aria-current="page"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Alert/index.htm">Internal - Alert</a>
+              </li>
+              <li>
+                <a href="../Internal - Alert (Session Timeout)/index.htm"
+                  >Internal - Alert (Session Timeout)</a
+                >
+              </li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                Straylight Dialog <small>External Content</small>
+              </h1>
+              <p>
+                <button
+                  id="triggerId"
+                  data-role="Member Login"
+                  data-controls="files/login-dialog.htm#dialog-login"
+                  class="aria-dialog lightbox"
+                >
+                  Login
+                </button>
+              </p>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="index.htm" aria-current="page">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Alert/index.htm">Internal - Alert</a></li>
-                        <li><a href="../Internal - Alert (Session Timeout)/index.htm">Internal - Alert (Session Timeout)</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>
+                The dialog is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>Activate the Login button to open the dialog.</li>
+                <li>
+                  Screen reader users will be confined within the dialog
+                  content, and will not be able to see the background page
+                  content. (Confirmed in both Windows platform and iOS touch
+                  screen devices)
+                </li>
+                <li>
+                  Keyboard focus is automatically restricted to active elements
+                  within the dialog.
+                </li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Straylight Dialog <small>External Content</small></h1>
-                        <p>
-                            <button id="triggerId" data-role="Member Login" data-controls="files/login-dialog.htm#dialog-login" class="aria-dialog lightbox">
-                                Login
-                            </button>
-                        </p>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The dialog is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the Login button to open the dialog.</li>
-                            <li>Screen reader users will be confined within the dialog content, and will
-                                not be able to see the background page content. (Confirmed in both Windows
-                                platform and iOS touch screen devices)</li>
-                            <li>Keyboard focus is automatically restricted to active elements within the dialog.</li>
-                        </ul>
-                    </div>
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Dialogs/External/files/login-dialog.htm b/Templates/Dialogs/External/files/login-dialog.htm
index 1f3a7cd9..07f206d2 100644
--- a/Templates/Dialogs/External/files/login-dialog.htm
+++ b/Templates/Dialogs/External/files/login-dialog.htm
@@ -1,40 +1,50 @@
 <html>
-
-<body>
+  <body>
     <!-- Important
              When Implementing a Close link or button, the className must match the "closeClassName" property within the script declaration.
             Doing so will automatically bind the close methods with this element, and set keyboard focus properly when the DC object is closed.
             -->
     <div id="dialog-login">
-        <form id="lbForm">
-            <p><label for="uname">Username:</label> <input type="text" id="uname" name="uname" /></p>
-            <p><label for="pass">Password:</label> <input type="password" id="pass" name="pass" /></p>
-            <p class="buttons-bar"><input type="submit" id="lbSubmit" value="OK" />
-                <input type="reset" class="lbClose CloseDC" id="lbCancel" value="Cancel" />
-            </p>
-        </form>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                var frm = $A.get("lbForm");
-                $A(frm).on("submit", function(ev) {
-                    if (!frm.uname.value) {
-                        alert("Woops! You forgot your username...");
-                        frm.uname.focus();
-                    } else if (!frm.pass.value) {
-                        alert("Woops! You forgot your password...");
-                        frm.pass.focus();
-                    } else {
-                        alert("WOW!");
-                        DC.remove();
-                    }
-                    ev.preventDefault();
-                });
-            })();
-        </script>
+      <form id="lbForm">
+        <p>
+          <label for="uname">Username:</label>
+          <input type="text" id="uname" name="uname" />
+        </p>
+        <p>
+          <label for="pass">Password:</label>
+          <input type="password" id="pass" name="pass" />
+        </p>
+        <p class="buttons-bar">
+          <input type="submit" id="lbSubmit" value="OK" />
+          <input
+            type="reset"
+            class="lbClose CloseDC"
+            id="lbCancel"
+            value="Cancel"
+          />
+        </p>
+      </form>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          var frm = $A.get("lbForm");
+          $A(frm).on("submit", function (ev) {
+            if (!frm.uname.value) {
+              alert("Woops! You forgot your username...");
+              frm.uname.focus();
+            } else if (!frm.pass.value) {
+              alert("Woops! You forgot your password...");
+              frm.pass.focus();
+            } else {
+              alert("WOW!");
+              DC.remove();
+            }
+            ev.preventDefault();
+          });
+        })();
+      </script>
     </div>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/Dialogs/External/index.htm b/Templates/Dialogs/External/index.htm
index 47691ccc..5f005baa 100644
--- a/Templates/Dialogs/External/index.htm
+++ b/Templates/Dialogs/External/index.htm
@@ -1,133 +1,205 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Dialog (External Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/dialog.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/dialog.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="index.htm" aria-current="page">External</a></li>
+              <li>
+                <a href="../External - Alert (Session Timeout)/index.htm"
+                  >External - Alert (Session Timeout)</a
+                >
+              </li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Alert/index.htm">Internal - Alert</a>
+              </li>
+              <li>
+                <a href="../Internal - Alert (Session Timeout)/index.htm"
+                  >Internal - Alert (Session Timeout)</a
+                >
+              </li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Dialog <small>External Content</small></h1>
+              <p>
+                <button id="triggerId" class="aria-dialog lightbox">
+                  Login
+                </button>
+              </p>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="index.htm" aria-current="page">External</a></li>
-                        <li><a href="../External - Alert (Session Timeout)/index.htm">External - Alert (Session Timeout)</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Alert/index.htm">Internal - Alert</a></li>
-                        <li><a href="../Internal - Alert (Session Timeout)/index.htm">Internal - Alert (Session Timeout)</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>
+                The dialog is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>Activate the Login button to open the dialog.</li>
+                <li>
+                  Screen reader users will be confined within the dialog
+                  content, and will not be able to see the background page
+                  content. (Confirmed in both Windows platform and iOS touch
+                  screen devices)
+                </li>
+                <li>
+                  Keyboard focus is automatically restricted to active elements
+                  within the dialog.
+                </li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Dialog <small>External Content</small></h1>
-                        <p>
-                            <button id="triggerId" class="aria-dialog lightbox">
-                                Login
-                            </button>
-                        </p>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The dialog is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the Login button to open the dialog.</li>
-                            <li>Screen reader users will be confined within the dialog content, and will
-                                not be able to see the background page content. (Confirmed in both Windows
-                                platform and iOS touch screen devices)</li>
-                            <li>Keyboard focus is automatically restricted to active elements within the dialog.</li>
-                        </ul>
-                    </div>
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Dialogs/Internal - Alert (Session Timeout)/index.htm b/Templates/Dialogs/Internal - Alert (Session Timeout)/index.htm
index cebd9d17..5b9ddf8f 100644
--- a/Templates/Dialogs/Internal - Alert (Session Timeout)/index.htm	
+++ b/Templates/Dialogs/Internal - Alert (Session Timeout)/index.htm	
@@ -1,151 +1,225 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Session Timeout Alert Dialog (Internal Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/dialog.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Session Timeout Alert Dialog (Internal Content) - Apex 4X Technical Style
+      Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/dialog.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Alert (Session Timeout)/index.htm">External - Alert (Session Timeout)</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Alert/index.htm">Internal - Alert</a></li>
-                        <li><a href="index.htm" aria-current="page">Internal - Alert (Session Timeout)</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Session Timeout Alert Dialog <small>Internal Content</small></h1>
-                        <p>
-                            <button id="triggerId" class="lightbox">
-                                Set 4 second timeout.
-                            </button>
-                        </p>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Alert (Session Timeout)/index.htm"
+                  >External - Alert (Session Timeout)</a
+                >
+              </li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Alert/index.htm">Internal - Alert</a>
+              </li>
+              <li>
+                <a href="index.htm" aria-current="page"
+                  >Internal - Alert (Session Timeout)</a
+                >
+              </li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                Session Timeout Alert Dialog <small>Internal Content</small>
+              </h1>
+              <p>
+                <button id="triggerId" class="lightbox">
+                  Set 4 second timeout.
+                </button>
+              </p>
 
-                        <!-- Important
+              <!-- Important
                      When Implementing a Close link or button, the className must match the "closeClassName" property within the script declaration.
                     Doing so will automatically bind the close methods with this element, and set keyboard focus properly when the DC object is closed. If closeClassName is not specified, the default class will be set to "CloseDC" instead.
                     -->
-                        <div hidden id="dialog-timeout">
-                            <form id="xForm" action="#">
-                                <h1>
-                                    IMPORTANT: YOUR SESSION IS ABOUT TO EXPIRE.
-                                </h1>
-                                <p>
-                                    <button type="submit">CONTINUE SESSION</button>
-                                    <span> | </span>
-                                    <button class="CloseDC">CANCEL</button>
-                                </p>
-                            </form>
-                        </div>
-
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The dialog is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the Login button to open the dialog.</li>
-                            <li>Screen reader users will be confined within the dialog content, and will
-                                not be able to see the background page content. (Confirmed in both Windows
-                                platform and iOS touch screen devices)</li>
-                            <li>Keyboard focus is automatically restricted to active elements within the dialog.</li>
-                        </ul>
-                    </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+              <div hidden id="dialog-timeout">
+                <form id="xForm" action="#">
+                  <h1>IMPORTANT: YOUR SESSION IS ABOUT TO EXPIRE.</h1>
+                  <p>
+                    <button type="submit">CONTINUE SESSION</button>
+                    <span> | </span>
+                    <button class="CloseDC">CANCEL</button>
+                  </p>
+                </form>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The dialog is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>Activate the Login button to open the dialog.</li>
+                <li>
+                  Screen reader users will be confined within the dialog
+                  content, and will not be able to see the background page
+                  content. (Confirmed in both Windows platform and iOS touch
+                  screen devices)
+                </li>
+                <li>
+                  Keyboard focus is automatically restricted to active elements
+                  within the dialog.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Dialogs/Internal - Alert/index.htm b/Templates/Dialogs/Internal - Alert/index.htm
index 4c0f234a..aac5e5d1 100644
--- a/Templates/Dialogs/Internal - Alert/index.htm	
+++ b/Templates/Dialogs/Internal - Alert/index.htm	
@@ -1,155 +1,235 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Alert Dialog (Internal Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/dialog.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Alert Dialog (Internal Content) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/dialog.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Alert (Session Timeout)/index.htm">External - Alert (Session Timeout)</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="index.htm" aria-current="page">Internal - Alert</a></li>
-                        <li><a href="../Internal - Alert (Session Timeout)/index.htm">Internal - Alert (Session Timeout)</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Alert Dialog <small>Internal Content</small></h1>
-                        <p>
-                            <button id="triggerId" class="aria-dialog lightbox">
-                                Login
-                            </button>
-                        </p>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Alert (Session Timeout)/index.htm"
+                  >External - Alert (Session Timeout)</a
+                >
+              </li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="index.htm" aria-current="page">Internal - Alert</a>
+              </li>
+              <li>
+                <a href="../Internal - Alert (Session Timeout)/index.htm"
+                  >Internal - Alert (Session Timeout)</a
+                >
+              </li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                Alert Dialog <small>Internal Content</small>
+              </h1>
+              <p>
+                <button id="triggerId" class="aria-dialog lightbox">
+                  Login
+                </button>
+              </p>
 
-                        <!-- Important
+              <!-- Important
                      When Implementing a Close link or button, the className must match the "closeClassName" property within the script declaration.
                     Doing so will automatically bind the close methods with this element, and set keyboard focus properly when the DC object is closed. If closeClassName is not specified, the default class will be set to "CloseDC" instead.
                     -->
-                        <div hidden id="dialog-login">
-                            <form id="lbForm">
-                                <p>
-                                    <label for="uname">Username:</label>
-                                    <input type="text" id="uname" name="uname">
-                                </p>
-                                <p>
-                                    <label for="pass">Password:</label>
-                                    <input type="password" id="pass" name="pass">
-                                </p>
-                                <p class="buttons-bar">
-                                    <input type="submit" id="lbSubmit" value="OK">
-                                    <input type="reset" class="lbClose CloseDC" id="lbCancel" value="Cancel">
-                                </p>
-                            </form>
-                        </div>
-
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The dialog is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the Login button to open the dialog.</li>
-                            <li>Screen reader users will be confined within the dialog content, and will
-                                not be able to see the background page content. (Confirmed in both Windows
-                                platform and iOS touch screen devices)</li>
-                            <li>Keyboard focus is automatically restricted to active elements within the dialog.</li>
-                        </ul>
-                    </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+              <div hidden id="dialog-login">
+                <form id="lbForm">
+                  <p>
+                    <label for="uname">Username:</label>
+                    <input type="text" id="uname" name="uname" />
+                  </p>
+                  <p>
+                    <label for="pass">Password:</label>
+                    <input type="password" id="pass" name="pass" />
+                  </p>
+                  <p class="buttons-bar">
+                    <input type="submit" id="lbSubmit" value="OK" />
+                    <input
+                      type="reset"
+                      class="lbClose CloseDC"
+                      id="lbCancel"
+                      value="Cancel"
+                    />
+                  </p>
+                </form>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The dialog is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>Activate the Login button to open the dialog.</li>
+                <li>
+                  Screen reader users will be confined within the dialog
+                  content, and will not be able to see the background page
+                  content. (Confirmed in both Windows platform and iOS touch
+                  screen devices)
+                </li>
+                <li>
+                  Keyboard focus is automatically restricted to active elements
+                  within the dialog.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Dialogs/Internal - Straylight/index.htm b/Templates/Dialogs/Internal - Straylight/index.htm
index 3aacfe5c..dbd3aaca 100644
--- a/Templates/Dialogs/Internal - Straylight/index.htm	
+++ b/Templates/Dialogs/Internal - Straylight/index.htm	
@@ -1,174 +1,259 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Straylight Dialog (Internal Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/dialog.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Straylight Dialog (Internal Content) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/dialog.css" />
     <script src="/4X/4X.js#Straylight"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Alert (Session Timeout)/index.htm">External - Alert (Session Timeout)</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Alert/index.htm">Internal - Alert</a></li>
-                        <li><a href="../Internal - Alert (Session Timeout)/index.htm">Internal - Alert (Session Timeout)</a></li>
-                        <li><a href="index.htm" aria-current="page">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Straylight Dialog <small>Internal Content</small></h1>
-                        <p>
-                            <button id="triggerId" data-role="Member Login" data-controls="dialog-login" class="aria-dialog lightbox">
-                                Login
-                            </button>
-                        </p>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Alert (Session Timeout)/index.htm"
+                  >External - Alert (Session Timeout)</a
+                >
+              </li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Alert/index.htm">Internal - Alert</a>
+              </li>
+              <li>
+                <a href="../Internal - Alert (Session Timeout)/index.htm"
+                  >Internal - Alert (Session Timeout)</a
+                >
+              </li>
+              <li>
+                <a href="index.htm" aria-current="page"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                Straylight Dialog <small>Internal Content</small>
+              </h1>
+              <p>
+                <button
+                  id="triggerId"
+                  data-role="Member Login"
+                  data-controls="dialog-login"
+                  class="aria-dialog lightbox"
+                >
+                  Login
+                </button>
+              </p>
 
-                        <!-- Important
+              <!-- Important
                      When Implementing a Close link or button, the className must match the "closeClassName" property within the script declaration.
                     Doing so will automatically bind the close methods with this element, and set keyboard focus properly when the DC object is closed. If closeClassName is not specified, the default class will be set to "CloseDC" instead.
                     -->
-                        <div hidden id="dialog-login">
-                            <form id="lbForm">
-                                <p>
-                                    <label for="uname">Username:</label>
-                                    <input type="text" id="uname" name="uname">
-                                </p>
-                                <p>
-                                    <label for="pass">Password:</label>
-                                    <input type="password" id="pass" name="pass">
-                                </p>
-                                <p class="buttons-bar">
-                                    <input type="submit" id="lbSubmit" value="OK">
-                                    <input type="reset" class="lbClose CloseDC" id="lbCancel" value="Cancel">
-                                </p>
-                            </form>
-                            <script>
-                                (function() {
-                                    var frm = $A.get("lbForm");
-                                    $A(frm).on("submit", function(ev) {
-                                        var DC = $A("triggerId");
-                                        // DC provides access to the originating DC object instance.
-                                        if (!frm.uname.value) {
-                                            alert("Woops! You forgot your username...");
-                                            frm.uname.focus();
-                                        } else if (!frm.pass.value) {
-                                            alert("Woops! You forgot your password...");
-                                            frm.pass.focus();
-                                        } else {
-                                            alert("WOW!");
-                                            DC.remove();
-                                        }
-                                        ev.preventDefault();
-                                    });
-                                })();
-                            </script>
-                        </div>
-
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The dialog is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the Login button to open the dialog.</li>
-                            <li>Screen reader users will be confined within the dialog content, and will
-                                not be able to see the background page content. (Confirmed in both Windows
-                                platform and iOS touch screen devices)</li>
-                            <li>Keyboard focus is automatically restricted to active elements within the dialog.</li>
-                        </ul>
-                    </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+              <div hidden id="dialog-login">
+                <form id="lbForm">
+                  <p>
+                    <label for="uname">Username:</label>
+                    <input type="text" id="uname" name="uname" />
+                  </p>
+                  <p>
+                    <label for="pass">Password:</label>
+                    <input type="password" id="pass" name="pass" />
+                  </p>
+                  <p class="buttons-bar">
+                    <input type="submit" id="lbSubmit" value="OK" />
+                    <input
+                      type="reset"
+                      class="lbClose CloseDC"
+                      id="lbCancel"
+                      value="Cancel"
+                    />
+                  </p>
+                </form>
+                <script>
+                  (function () {
+                    var frm = $A.get("lbForm");
+                    $A(frm).on("submit", function (ev) {
+                      var DC = $A("triggerId");
+                      // DC provides access to the originating DC object instance.
+                      if (!frm.uname.value) {
+                        alert("Woops! You forgot your username...");
+                        frm.uname.focus();
+                      } else if (!frm.pass.value) {
+                        alert("Woops! You forgot your password...");
+                        frm.pass.focus();
+                      } else {
+                        alert("WOW!");
+                        DC.remove();
+                      }
+                      ev.preventDefault();
+                    });
+                  })();
+                </script>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The dialog is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>Activate the Login button to open the dialog.</li>
+                <li>
+                  Screen reader users will be confined within the dialog
+                  content, and will not be able to see the background page
+                  content. (Confirmed in both Windows platform and iOS touch
+                  screen devices)
+                </li>
+                <li>
+                  Keyboard focus is automatically restricted to active elements
+                  within the dialog.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Dialogs/Internal/index.htm b/Templates/Dialogs/Internal/index.htm
index 2d5a4a47..43165741 100644
--- a/Templates/Dialogs/Internal/index.htm
+++ b/Templates/Dialogs/Internal/index.htm
@@ -1,155 +1,231 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Dialog (Internal Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/dialog.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/dialog.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Alert (Session Timeout)/index.htm">External - Alert (Session Timeout)</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="index.htm" aria-current="page">Internal</a></li>
-                        <li><a href="../Internal - Alert/index.htm">Internal - Alert</a></li>
-                        <li><a href="../Internal - Alert (Session Timeout)/index.htm">Internal - Alert (Session Timeout)</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Dialog <small>Internal Content</small></h1>
-                        <p>
-                            <button id="triggerId" class="aria-dialog lightbox">
-                                Login
-                            </button>
-                        </p>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Alert (Session Timeout)/index.htm"
+                  >External - Alert (Session Timeout)</a
+                >
+              </li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="index.htm" aria-current="page">Internal</a></li>
+              <li>
+                <a href="../Internal - Alert/index.htm">Internal - Alert</a>
+              </li>
+              <li>
+                <a href="../Internal - Alert (Session Timeout)/index.htm"
+                  >Internal - Alert (Session Timeout)</a
+                >
+              </li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Dialog <small>Internal Content</small></h1>
+              <p>
+                <button id="triggerId" class="aria-dialog lightbox">
+                  Login
+                </button>
+              </p>
 
-                        <!-- Important
+              <!-- Important
                      When Implementing a Close link or button, the className must match the "closeClassName" property within the script declaration.
                     Doing so will automatically bind the close methods with this element, and set keyboard focus properly when the DC object is closed. If closeClassName is not specified, the default class will be set to "CloseDC" instead.
                     -->
-                        <div hidden id="dialog-login">
-                            <form id="lbForm">
-                                <p>
-                                    <label for="uname">Username:</label>
-                                    <input type="text" id="uname" name="uname">
-                                </p>
-                                <p>
-                                    <label for="pass">Password:</label>
-                                    <input type="password" id="pass" name="pass">
-                                </p>
-                                <p class="buttons-bar">
-                                    <input type="submit" id="lbSubmit" value="OK">
-                                    <input type="reset" class="lbClose CloseDC" id="lbCancel" value="Cancel">
-                                </p>
-                            </form>
-                        </div>
-
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The dialog is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the Login button to open the dialog.</li>
-                            <li>Screen reader users will be confined within the dialog content, and will
-                                not be able to see the background page content. (Confirmed in both Windows
-                                platform and iOS touch screen devices)</li>
-                            <li>Keyboard focus is automatically restricted to active elements within the dialog.</li>
-                        </ul>
-                    </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+              <div hidden id="dialog-login">
+                <form id="lbForm">
+                  <p>
+                    <label for="uname">Username:</label>
+                    <input type="text" id="uname" name="uname" />
+                  </p>
+                  <p>
+                    <label for="pass">Password:</label>
+                    <input type="password" id="pass" name="pass" />
+                  </p>
+                  <p class="buttons-bar">
+                    <input type="submit" id="lbSubmit" value="OK" />
+                    <input
+                      type="reset"
+                      class="lbClose CloseDC"
+                      id="lbCancel"
+                      value="Cancel"
+                    />
+                  </p>
+                </form>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The dialog is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>Activate the Login button to open the dialog.</li>
+                <li>
+                  Screen reader users will be confined within the dialog
+                  content, and will not be able to see the background page
+                  content. (Confirmed in both Windows platform and iOS touch
+                  screen devices)
+                </li>
+                <li>
+                  Keyboard focus is automatically restricted to active elements
+                  within the dialog.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Dialogs/index.htm b/Templates/Dialogs/index.htm
index a88fcc76..ce12b67c 100644
--- a/Templates/Dialogs/index.htm
+++ b/Templates/Dialogs/index.htm
@@ -1,114 +1,194 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Dialogs - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
+    <meta name="description" content="Scalable ARIA Components" />
     <meta name="Author" content="Bryan Garaventa" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Dialogs</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="External/index.htm">External</a></li>
-                        <li><a href="External - Alert (Session Timeout)/index.htm">External - Alert (Session Timeout)</a></li>
-                        <li><a href="External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="Internal/index.htm">Internal</a></li>
-                        <li><a href="Internal - Alert/index.htm">Internal - Alert</a></li>
-                        <li><a href="Internal - Alert (Session Timeout)/index.htm">Internal - Alert (Session Timeout)</a></li>
-                        <li><a href="Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>Move focus into the dialog when it is rendered, ensure that the background content is hidden from screen reader users, ensure that the beginning and ending boundaries are conveyed to screen reader users, make sure the dialog can be closed from the keyboard, ensure that circular tabbing confines keyboard focus within the dialog content, and move focus back to the triggering element after the dialog is removed.</p>
-
-                    <p>The 4X ARIA Dialog module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <p>The following attributes are handled automatically by the Dialog module:</p>
-
-                    <ul>
-                        <li> role=dialog/alertdialog</li>
-                        <li> aria-label</li>
-                        <li> aria-hidden</li>
-                        <li> inert</li>
-                    </ul>
-
-                    <p>Available attributes for the triggering element:</p>
-
-                    <ul>
-                        <li> data-controls : The resource path and pointer to the ID attribute of the dialog container element. May consist of a traditional id reference within the same document, or a url+id reference for pulling a dialog in from an external resource. E.G. data-controls="path/get.php?type=login#dialogContainerId"</li>
-                    </ul>
-
-                    <h2>HTML syntax</h2>
-
-                    <h3>Triggering Element (Optional)</h3>
-
-                    <div>
-                        <pre><code class="language-markup">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Dialogs</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="External/index.htm">External</a></li>
+              <li>
+                <a href="External - Alert (Session Timeout)/index.htm"
+                  >External - Alert (Session Timeout)</a
+                >
+              </li>
+              <li>
+                <a href="External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="Internal/index.htm">Internal</a></li>
+              <li><a href="Internal - Alert/index.htm">Internal - Alert</a></li>
+              <li>
+                <a href="Internal - Alert (Session Timeout)/index.htm"
+                  >Internal - Alert (Session Timeout)</a
+                >
+              </li>
+              <li>
+                <a href="Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              Move focus into the dialog when it is rendered, ensure that the
+              background content is hidden from screen reader users, ensure that
+              the beginning and ending boundaries are conveyed to screen reader
+              users, make sure the dialog can be closed from the keyboard,
+              ensure that circular tabbing confines keyboard focus within the
+              dialog content, and move focus back to the triggering element
+              after the dialog is removed.
+            </p>
+
+            <p>
+              The 4X ARIA Dialog module automatically configures all required
+              ARIA attributes and focus handling, in strict accordance with the
+              ARIA specification.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the Dialog
+              module:
+            </p>
+
+            <ul>
+              <li>role=dialog/alertdialog</li>
+              <li>aria-label</li>
+              <li>aria-hidden</li>
+              <li>inert</li>
+            </ul>
+
+            <p>Available attributes for the triggering element:</p>
+
+            <ul>
+              <li>
+                data-controls : The resource path and pointer to the ID
+                attribute of the dialog container element. May consist of a
+                traditional id reference within the same document, or a url+id
+                reference for pulling a dialog in from an external resource.
+                E.G. data-controls="path/get.php?type=login#dialogContainerId"
+              </li>
+            </ul>
+
+            <h2>HTML syntax</h2>
+
+            <h3>Triggering Element (Optional)</h3>
+
+            <div>
+              <pre><code class="language-markup">
 &lt;button id="dialogTriggerId"> SIGN-IN &lt;/button>
 </code></pre>
-                    </div>
+            </div>
 
-                    <p>To ensure the greatest level of accessibility, a triggering element should always consist of a native button or link. However, it is not necessary to have a triggering element to create a new dialog.</p>
+            <p>
+              To ensure the greatest level of accessibility, a triggering
+              element should always consist of a native button or link. However,
+              it is not necessary to have a triggering element to create a new
+              dialog.
+            </p>
 
-                    <h3>Dialog Container</h3>
+            <h3>Dialog Container</h3>
 
-                    <div>
-                        <pre><code class="language-markup">
+            <div>
+              <pre><code class="language-markup">
 &lt;div hidden id="dialogId">
   &lt;button aria-label="Close" class="CloseDC">&lt;!-- Close Icon Here -->&lt;/button>
   &lt;div> Dialog content... &lt;/div>
 &lt;/div>
 </code></pre>
-                    </div>
-
-                    <p>When Implementing a Close link or button, the className must match the "closeClassName" property within the script declaration. Doing so will automatically bind the close methods with this element, and set keyboard focus properly when the dialog is closed. If closeClassName is not specified, the default class will be set to "CloseDC" instead. The aria-label attribute provides an informative name for non-sighted screen reader users no matter what the visible icon is set to.</p>
-
-                    <h2>JavaScript syntax</h2>
+            </div>
 
-                    <div>
-                        <pre><code class="language-javascript">
+            <p>
+              When Implementing a Close link or button, the className must match
+              the "closeClassName" property within the script declaration. Doing
+              so will automatically bind the close methods with this element,
+              and set keyboard focus properly when the dialog is closed. If
+              closeClassName is not specified, the default class will be set to
+              "CloseDC" instead. The aria-label attribute provides an
+              informative name for non-sighted screen reader users no matter
+              what the visible icon is set to.
+            </p>
+
+            <h2>JavaScript syntax</h2>
+
+            <div>
+              <pre><code class="language-javascript">
 var myDialogDC = $A.setDialog( domNodeOrCSSSelector, {
 // Configure functionality key / value mappings
 });
 </code></pre>
-                    </div>
-
-                    <h2>Parameters</h2>
-
-                    <ol>
-                        <li>A DOM node or CSS selector to specify either the dialog container element or the dialog triggering element. If referencing a triggering element, the data-controls attribute can be used to specify the id of the associated dialog container.</li>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
-
-                    <h3>Configuration</h3>
+            </div>
 
-                    <div>
-                        <pre><code class="language-javascript">
+            <ul>
+              <li>Module file: Dialog.js</li>
+              <li>Has no dependencies.</li>
+              <li>Recommended: Velocity.js, VelocityUI.js.</li>
+            </ul>
+
+            <h2>Parameters</h2>
+
+            <ol>
+              <li>
+                A DOM node or CSS selector to specify either the dialog
+                container element or the dialog triggering element. If
+                referencing a triggering element, the data-controls attribute
+                can be used to specify the id of the associated dialog
+                container.
+              </li>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
+
+            <h3>Configuration</h3>
+
+            <div>
+              <pre><code class="language-javascript">
 {
 
 // Unique ID for the dialog instance
@@ -211,12 +291,12 @@ <h3>Configuration</h3>
 
 }
 </code></pre>
-                    </div>
+            </div>
 
-                    <h2>Programmatic control</h2>
+            <h2>Programmatic control</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">
+            <div>
+              <pre><code class="language-javascript">
 // Use the DC object that is returned by the $A.setDialog() function.
 
 // Open the dialog manually.
@@ -232,67 +312,96 @@ <h2>Programmatic control</h2>
 // Additional DC API properties and methods can be applied here as well.
 // To view available options, reference the help docs located at: "Help/DC API/DC Object Properties and Methods"
 </code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Drag/Copy/index.htm b/Templates/Drag/Copy/index.htm
index bcf4608b..4a71468d 100644
--- a/Templates/Drag/Copy/index.htm
+++ b/Templates/Drag/Copy/index.htm
@@ -1,155 +1,261 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Copy Drag and Drop - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Copy/index.htm" aria-current="page">Copy</a></li>
-                        <li><a href="../Move/index.htm">Move</a></li>
-                        <li><a href="../Simple/index.htm">Simple</a></li>
-                        <li><a href="../Sort/index.htm">Sort</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Copy Drag and Drop</h1>
-                        <section class="sample-block">
-
-                            <div class="demo-block">
-                                <div class="booksWrapper">
-                                    <div role="region" aria-label="Books" class="availableBooks">
-                                        <h3>Books</h3>
-                                        <div data-dropname="Bookshelf" class="drop-list" id="options">
-                                            <div class="book"><img data-label="A Short History of Nearly Everything by Bill Bryson" data-price="15.94" src="img/AShortHistoryOfNearlyEverything.jpg" alt="A Short History of Nearly Everything by Bill Bryson ($15.94)" title="A Short History of Nearly Everything by Bill Bryson ($15.94)" /></div>
-                                            <div class="book"><img data-label="Fierce Invalids Home From Hot Climates by Tom Robbins" data-price="10.90" src="img/FierceInvalidsHomeFromHotClimates.jpg" alt="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)" title="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)" /></div>
-                                            <div class="book"><img data-label="Neuromancer by William Gibson" data-price="12.50" src="img/Neuromancer.jpg" alt="Neuromancer by William Gibson ($12.50)" title="Neuromancer by William Gibson ($12.50)" /></div>
-                                            <div class="book"><img data-label="Swords and Deviltry by Fritz Leiber" data-price="10.99" src="img/SwordsAndDeviltry.jpg" alt="Swords and Deviltry by Fritz Leiber ($10.99)" title="Swords and Deviltry by Fritz Leiber ($10.99)" /></div>
-                                            <div class="book"><img data-label="The Magicians by Lev Grossman" data-price="16.01" src="img/TheMagicians.jpg" alt="The Magicians by Lev Grossman ($16.01)" title="The Magicians by Lev Grossman ($16.01)" /></div>
-                                            <div class="book"><img data-label="The Face in the Frost by John Bellairs" data-price="9.11" src="img/TheFaceInTheFrost.jpg" alt="The Face in the Frost by John Bellairs ($9.11)" title="The Face in the Frost by John Bellairs ($9.11)" /></div>
-                                        </div>
-                                    </div>
-                                    <div role="region" aria-label="Cart" class="chosenBooks">
-                                        <h3>Cart</h3>
-                                        <div data-dropname="Shopping Cart" class="drop-list" id="selections">
-                                        </div>
-                                    </div>
-                                    <div role="region" aria-label="Wish List" class="wishlist">
-                                        <h3>Wish List</h3>
-                                        <div data-dropname="Wish List" class="drop-list" id="wishedFor">
-                                        </div>
-                                    </div>
-                                </div>
-                                <div role="region" aria-label="Purchase Total" class="totals">
-                                    <div role="heading" aria-level="3" id="subtotals">
-                                        <p>Quantity: <span id="quantity">0</span></p>
-                                        <p>Subtotal: <span id="subtotal">$0.00</span></p>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Copy/index.htm" aria-current="page">Copy</a></li>
+              <li><a href="../Move/index.htm">Move</a></li>
+              <li><a href="../Simple/index.htm">Simple</a></li>
+              <li><a href="../Sort/index.htm">Sort</a></li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Copy Drag and Drop</h1>
+              <section class="sample-block">
+                <div class="demo-block">
+                  <div class="booksWrapper">
+                    <div
+                      role="region"
+                      aria-label="Books"
+                      class="availableBooks"
+                    >
+                      <h3>Books</h3>
+                      <div
+                        data-dropname="Bookshelf"
+                        class="drop-list"
+                        id="options"
+                      >
+                        <div class="book">
+                          <img
+                            data-label="A Short History of Nearly Everything by Bill Bryson"
+                            data-price="15.94"
+                            src="img/AShortHistoryOfNearlyEverything.jpg"
+                            alt="A Short History of Nearly Everything by Bill Bryson ($15.94)"
+                            title="A Short History of Nearly Everything by Bill Bryson ($15.94)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="Fierce Invalids Home From Hot Climates by Tom Robbins"
+                            data-price="10.90"
+                            src="img/FierceInvalidsHomeFromHotClimates.jpg"
+                            alt="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)"
+                            title="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="Neuromancer by William Gibson"
+                            data-price="12.50"
+                            src="img/Neuromancer.jpg"
+                            alt="Neuromancer by William Gibson ($12.50)"
+                            title="Neuromancer by William Gibson ($12.50)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="Swords and Deviltry by Fritz Leiber"
+                            data-price="10.99"
+                            src="img/SwordsAndDeviltry.jpg"
+                            alt="Swords and Deviltry by Fritz Leiber ($10.99)"
+                            title="Swords and Deviltry by Fritz Leiber ($10.99)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="The Magicians by Lev Grossman"
+                            data-price="16.01"
+                            src="img/TheMagicians.jpg"
+                            alt="The Magicians by Lev Grossman ($16.01)"
+                            title="The Magicians by Lev Grossman ($16.01)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="The Face in the Frost by John Bellairs"
+                            data-price="9.11"
+                            src="img/TheFaceInTheFrost.jpg"
+                            alt="The Face in the Frost by John Bellairs ($9.11)"
+                            title="The Face in the Frost by John Bellairs ($9.11)"
+                          />
+                        </div>
+                      </div>
                     </div>
-                    <div class="keyboard flex-item">
-                        <h2>The drag and drop functionality is optimized for screen reader and keyboard only users:</h2>
-
+                    <div role="region" aria-label="Cart" class="chosenBooks">
+                      <h3>Cart</h3>
+                      <div
+                        data-dropname="Shopping Cart"
+                        class="drop-list"
+                        id="selections"
+                      ></div>
                     </div>
+                    <div role="region" aria-label="Wish List" class="wishlist">
+                      <h3>Wish List</h3>
+                      <div
+                        data-dropname="Wish List"
+                        class="drop-list"
+                        id="wishedFor"
+                      ></div>
+                    </div>
+                  </div>
+                  <div role="region" aria-label="Purchase Total" class="totals">
+                    <div role="heading" aria-level="3" id="subtotals">
+                      <p>Quantity: <span id="quantity">0</span></p>
+                      <p>Subtotal: <span id="subtotal">$0.00</span></p>
+                    </div>
+                  </div>
                 </div>
-
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+              </section>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>
+                The drag and drop functionality is optimized for screen reader
+                and keyboard only users:
+              </h2>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Drag/Move/index.htm b/Templates/Drag/Move/index.htm
index ab5f3703..db97f09f 100644
--- a/Templates/Drag/Move/index.htm
+++ b/Templates/Drag/Move/index.htm
@@ -1,155 +1,261 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Move Drag and Drop - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Copy/index.htm">Copy</a></li>
-                        <li><a href="../Move/index.htm" aria-current="page">Move</a></li>
-                        <li><a href="../Simple/index.htm">Simple</a></li>
-                        <li><a href="../Sort/index.htm">Sort</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Move Drag and Drop</h1>
-                        <section class="sample-block">
-
-                            <div class="demo-block">
-                                <div class="booksWrapper">
-                                    <div role="region" aria-label="Books" class="availableBooks">
-                                        <h3>Books</h3>
-                                        <div data-dropname="Bookshelf" class="drop-list" id="options">
-                                            <div class="book"><img data-label="A Short History of Nearly Everything by Bill Bryson" data-price="15.94" src="img/AShortHistoryOfNearlyEverything.jpg" alt="A Short History of Nearly Everything by Bill Bryson ($15.94)" title="A Short History of Nearly Everything by Bill Bryson ($15.94)" /></div>
-                                            <div class="book"><img data-label="Fierce Invalids Home From Hot Climates by Tom Robbins" data-price="10.90" src="img/FierceInvalidsHomeFromHotClimates.jpg" alt="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)" title="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)" /></div>
-                                            <div class="book"><img data-label="Neuromancer by William Gibson" data-price="12.50" src="img/Neuromancer.jpg" alt="Neuromancer by William Gibson ($12.50)" title="Neuromancer by William Gibson ($12.50)" /></div>
-                                            <div class="book"><img data-label="Swords and Deviltry by Fritz Leiber" data-price="10.99" src="img/SwordsAndDeviltry.jpg" alt="Swords and Deviltry by Fritz Leiber ($10.99)" title="Swords and Deviltry by Fritz Leiber ($10.99)" /></div>
-                                            <div class="book"><img data-label="The Magicians by Lev Grossman" data-price="16.01" src="img/TheMagicians.jpg" alt="The Magicians by Lev Grossman ($16.01)" title="The Magicians by Lev Grossman ($16.01)" /></div>
-                                            <div class="book"><img data-label="The Face in the Frost by John Bellairs" data-price="9.11" src="img/TheFaceInTheFrost.jpg" alt="The Face in the Frost by John Bellairs ($9.11)" title="The Face in the Frost by John Bellairs ($9.11)" /></div>
-                                        </div>
-                                    </div>
-                                    <div role="region" aria-label="Cart" class="chosenBooks">
-                                        <h3>Cart</h3>
-                                        <div data-dropname="Shopping Cart" class="drop-list" id="selections">
-                                        </div>
-                                    </div>
-                                    <div role="region" aria-label="Wish List" class="wishlist">
-                                        <h3>Wish List</h3>
-                                        <div data-dropname="Wish List" class="drop-list" id="wishedFor">
-                                        </div>
-                                    </div>
-                                </div>
-                                <div role="region" aria-label="Purchase Total" class="totals">
-                                    <div role="heading" aria-level="3" id="subtotals">
-                                        <p>Quantity: <span id="quantity">0</span></p>
-                                        <p>Subtotal: <span id="subtotal">$0.00</span></p>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Copy/index.htm">Copy</a></li>
+              <li><a href="../Move/index.htm" aria-current="page">Move</a></li>
+              <li><a href="../Simple/index.htm">Simple</a></li>
+              <li><a href="../Sort/index.htm">Sort</a></li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Move Drag and Drop</h1>
+              <section class="sample-block">
+                <div class="demo-block">
+                  <div class="booksWrapper">
+                    <div
+                      role="region"
+                      aria-label="Books"
+                      class="availableBooks"
+                    >
+                      <h3>Books</h3>
+                      <div
+                        data-dropname="Bookshelf"
+                        class="drop-list"
+                        id="options"
+                      >
+                        <div class="book">
+                          <img
+                            data-label="A Short History of Nearly Everything by Bill Bryson"
+                            data-price="15.94"
+                            src="img/AShortHistoryOfNearlyEverything.jpg"
+                            alt="A Short History of Nearly Everything by Bill Bryson ($15.94)"
+                            title="A Short History of Nearly Everything by Bill Bryson ($15.94)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="Fierce Invalids Home From Hot Climates by Tom Robbins"
+                            data-price="10.90"
+                            src="img/FierceInvalidsHomeFromHotClimates.jpg"
+                            alt="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)"
+                            title="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="Neuromancer by William Gibson"
+                            data-price="12.50"
+                            src="img/Neuromancer.jpg"
+                            alt="Neuromancer by William Gibson ($12.50)"
+                            title="Neuromancer by William Gibson ($12.50)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="Swords and Deviltry by Fritz Leiber"
+                            data-price="10.99"
+                            src="img/SwordsAndDeviltry.jpg"
+                            alt="Swords and Deviltry by Fritz Leiber ($10.99)"
+                            title="Swords and Deviltry by Fritz Leiber ($10.99)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="The Magicians by Lev Grossman"
+                            data-price="16.01"
+                            src="img/TheMagicians.jpg"
+                            alt="The Magicians by Lev Grossman ($16.01)"
+                            title="The Magicians by Lev Grossman ($16.01)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="The Face in the Frost by John Bellairs"
+                            data-price="9.11"
+                            src="img/TheFaceInTheFrost.jpg"
+                            alt="The Face in the Frost by John Bellairs ($9.11)"
+                            title="The Face in the Frost by John Bellairs ($9.11)"
+                          />
+                        </div>
+                      </div>
                     </div>
-                    <div class="keyboard flex-item">
-                        <h2>The drag and drop functionality is optimized for screen reader and keyboard only users:</h2>
-
+                    <div role="region" aria-label="Cart" class="chosenBooks">
+                      <h3>Cart</h3>
+                      <div
+                        data-dropname="Shopping Cart"
+                        class="drop-list"
+                        id="selections"
+                      ></div>
                     </div>
+                    <div role="region" aria-label="Wish List" class="wishlist">
+                      <h3>Wish List</h3>
+                      <div
+                        data-dropname="Wish List"
+                        class="drop-list"
+                        id="wishedFor"
+                      ></div>
+                    </div>
+                  </div>
+                  <div role="region" aria-label="Purchase Total" class="totals">
+                    <div role="heading" aria-level="3" id="subtotals">
+                      <p>Quantity: <span id="quantity">0</span></p>
+                      <p>Subtotal: <span id="subtotal">$0.00</span></p>
+                    </div>
+                  </div>
                 </div>
-
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+              </section>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>
+                The drag and drop functionality is optimized for screen reader
+                and keyboard only users:
+              </h2>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Drag/Simple/index.htm b/Templates/Drag/Simple/index.htm
index 48f80be0..e80a63b5 100644
--- a/Templates/Drag/Simple/index.htm
+++ b/Templates/Drag/Simple/index.htm
@@ -1,144 +1,249 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Simple Move Drag and Drop - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Copy/index.htm">Copy</a></li>
-                        <li><a href="../Move/index.htm">Move</a></li>
-                        <li><a href="../Simple/index.htm" aria-current="page">Simple</a></li>
-                        <li><a href="../Sort/index.htm">Sort</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Simple Move Drag and Drop</h1>
-                        <section class="sample-block">
-
-                            <div class="demo-block">
-                                <div class="booksWrapper">
-                                    <div role="region" aria-label="Books" class="availableBooks">
-                                        <h3>Books</h3>
-                                        <div data-dropname="Bookshelf" class="drop-list" id="options">
-                                            <div class="book"><img data-label="Fierce Invalids Home From Hot Climates by Tom Robbins" data-price="10.90" src="img/FierceInvalidsHomeFromHotClimates.jpg" alt="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)" title="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)" /></div>
-                                            <div class="book"><img data-label="The Magicians by Lev Grossman" data-price="16.01" src="img/TheMagicians.jpg" alt="The Magicians by Lev Grossman ($16.01)" title="The Magicians by Lev Grossman ($16.01)" /></div>
-                                            <div class="book"><img data-label="A Short History of Nearly Everything by Bill Bryson" data-price="15.94" src="img/AShortHistoryOfNearlyEverything.jpg" alt="A Short History of Nearly Everything by Bill Bryson ($15.94)" title="A Short History of Nearly Everything by Bill Bryson ($15.94)" /></div>
-                                            <div class="book"><img data-label="Neuromancer by William Gibson" data-price="12.50" src="img/Neuromancer.jpg" alt="Neuromancer by William Gibson ($12.50)" title="Neuromancer by William Gibson ($12.50)" /></div>
-                                            <div class="book"><img data-label="Snow Crash by Neal Stevenson" data-price="14.44" src="img/SnowCrash.jpg" alt="Snow Crash by Neal Stevenson ($14.44)" title="Snow Crash by Neal Stevenson ($14.44)" /></div>
-                                            <div class="book"><img data-label="Altered Carbon by Richard K. Morgan" data-price="15.40" src="img/AlteredCarbon.jpg" alt="Altered Carbon by Richard K. Morgan ($15.40)" title="Altered Carbon by Richard K. Morgan ($15.40)" /></div>
-                                        </div>
-                                    </div>
-                                    <div role="region" aria-label="Cart" class="chosenBooks">
-                                        <h3>Cart</h3>
-                                        <div data-dropname="Shopping Cart" class="drop-list" id="selections">
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Copy/index.htm">Copy</a></li>
+              <li><a href="../Move/index.htm">Move</a></li>
+              <li>
+                <a href="../Simple/index.htm" aria-current="page">Simple</a>
+              </li>
+              <li><a href="../Sort/index.htm">Sort</a></li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Simple Move Drag and Drop</h1>
+              <section class="sample-block">
+                <div class="demo-block">
+                  <div class="booksWrapper">
+                    <div
+                      role="region"
+                      aria-label="Books"
+                      class="availableBooks"
+                    >
+                      <h3>Books</h3>
+                      <div
+                        data-dropname="Bookshelf"
+                        class="drop-list"
+                        id="options"
+                      >
+                        <div class="book">
+                          <img
+                            data-label="Fierce Invalids Home From Hot Climates by Tom Robbins"
+                            data-price="10.90"
+                            src="img/FierceInvalidsHomeFromHotClimates.jpg"
+                            alt="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)"
+                            title="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="The Magicians by Lev Grossman"
+                            data-price="16.01"
+                            src="img/TheMagicians.jpg"
+                            alt="The Magicians by Lev Grossman ($16.01)"
+                            title="The Magicians by Lev Grossman ($16.01)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="A Short History of Nearly Everything by Bill Bryson"
+                            data-price="15.94"
+                            src="img/AShortHistoryOfNearlyEverything.jpg"
+                            alt="A Short History of Nearly Everything by Bill Bryson ($15.94)"
+                            title="A Short History of Nearly Everything by Bill Bryson ($15.94)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="Neuromancer by William Gibson"
+                            data-price="12.50"
+                            src="img/Neuromancer.jpg"
+                            alt="Neuromancer by William Gibson ($12.50)"
+                            title="Neuromancer by William Gibson ($12.50)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="Snow Crash by Neal Stevenson"
+                            data-price="14.44"
+                            src="img/SnowCrash.jpg"
+                            alt="Snow Crash by Neal Stevenson ($14.44)"
+                            title="Snow Crash by Neal Stevenson ($14.44)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="Altered Carbon by Richard K. Morgan"
+                            data-price="15.40"
+                            src="img/AlteredCarbon.jpg"
+                            alt="Altered Carbon by Richard K. Morgan ($15.40)"
+                            title="Altered Carbon by Richard K. Morgan ($15.40)"
+                          />
+                        </div>
+                      </div>
                     </div>
-                    <div class="keyboard flex-item">
-                        <h2>The drag and drop functionality is optimized for screen reader and keyboard only users:</h2>
-
+                    <div role="region" aria-label="Cart" class="chosenBooks">
+                      <h3>Cart</h3>
+                      <div
+                        data-dropname="Shopping Cart"
+                        class="drop-list"
+                        id="selections"
+                      ></div>
                     </div>
+                  </div>
                 </div>
-
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+              </section>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>
+                The drag and drop functionality is optimized for screen reader
+                and keyboard only users:
+              </h2>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Drag/Sort/index.htm b/Templates/Drag/Sort/index.htm
index 28011d65..e2aa828b 100644
--- a/Templates/Drag/Sort/index.htm
+++ b/Templates/Drag/Sort/index.htm
@@ -1,137 +1,221 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Simple Sort Drag and Drop - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Copy/index.htm">Copy</a></li>
-                        <li><a href="../Move/index.htm">Move</a></li>
-                        <li><a href="../Simple/index.htm">Simple</a></li>
-                        <li><a href="../Sort/index.htm" aria-current="page">Sort</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Simple Sort Drag and Drop</h1>
-                        <section class="sample-block">
-
-                            <div class="demo-block">
-                                <div class="booksWrapper">
-                                    <div role="region" aria-label="Books" class="availableBooks">
-                                        <h3>Books</h3>
-                                        <div data-dropname="Bookshelf" class="drop-list" id="options">
-                                            <div class="book"><img data-label="Fierce Invalids Home From Hot Climates by Tom Robbins" data-price="10.90" src="img/FierceInvalidsHomeFromHotClimates.jpg" alt="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)" title="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)" /></div>
-                                            <div class="book"><img data-label="Neuromancer by William Gibson" data-price="12.50" src="img/Neuromancer.jpg" alt="Neuromancer by William Gibson ($12.50)" title="Neuromancer by William Gibson ($12.50)" /></div>
-                                            <div class="book"><img data-label="Snow Crash by Neal Stevenson" data-price="14.44" src="img/SnowCrash.jpg" alt="Snow Crash by Neal Stevenson ($14.44)" title="Snow Crash by Neal Stevenson ($14.44)" /></div>
-                                            <div class="book"><img data-label="Altered Carbon by Richard K. Morgan" data-price="15.40" src="img/AlteredCarbon.jpg" alt="Altered Carbon by Richard K. Morgan ($15.40)" title="Altered Carbon by Richard K. Morgan ($15.40)" /></div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The drag and drop functionality is optimized for screen reader and keyboard only users:</h2>
-
-                    </div>
-                </div>
-
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Copy/index.htm">Copy</a></li>
+              <li><a href="../Move/index.htm">Move</a></li>
+              <li><a href="../Simple/index.htm">Simple</a></li>
+              <li><a href="../Sort/index.htm" aria-current="page">Sort</a></li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Simple Sort Drag and Drop</h1>
+              <section class="sample-block">
+                <div class="demo-block">
+                  <div class="booksWrapper">
+                    <div
+                      role="region"
+                      aria-label="Books"
+                      class="availableBooks"
+                    >
+                      <h3>Books</h3>
+                      <div
+                        data-dropname="Bookshelf"
+                        class="drop-list"
+                        id="options"
+                      >
+                        <div class="book">
+                          <img
+                            data-label="Fierce Invalids Home From Hot Climates by Tom Robbins"
+                            data-price="10.90"
+                            src="img/FierceInvalidsHomeFromHotClimates.jpg"
+                            alt="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)"
+                            title="Fierce Invalids Home From Hot Climates by Tom Robbins ($10.90)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="Neuromancer by William Gibson"
+                            data-price="12.50"
+                            src="img/Neuromancer.jpg"
+                            alt="Neuromancer by William Gibson ($12.50)"
+                            title="Neuromancer by William Gibson ($12.50)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="Snow Crash by Neal Stevenson"
+                            data-price="14.44"
+                            src="img/SnowCrash.jpg"
+                            alt="Snow Crash by Neal Stevenson ($14.44)"
+                            title="Snow Crash by Neal Stevenson ($14.44)"
+                          />
+                        </div>
+                        <div class="book">
+                          <img
+                            data-label="Altered Carbon by Richard K. Morgan"
+                            data-price="15.40"
+                            src="img/AlteredCarbon.jpg"
+                            alt="Altered Carbon by Richard K. Morgan ($15.40)"
+                            title="Altered Carbon by Richard K. Morgan ($15.40)"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
+              </section>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>
+                The drag and drop functionality is optimized for screen reader
+                and keyboard only users:
+              </h2>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Drag/index.htm b/Templates/Drag/index.htm
index 0de1c306..97585e08 100644
--- a/Templates/Drag/index.htm
+++ b/Templates/Drag/index.htm
@@ -1,73 +1,111 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Drag and Drop - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Drag and Drop</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="Copy/index.htm">Copy</a></li>
-                        <li><a href="Move/index.htm">Move</a></li>
-                        <li><a href="Simple/index.htm">Simple</a></li>
-                        <li><a href="Sort/index.htm">Sort</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>Move focus between each menu button icon, press Space, Enter, or Down to open the dropdown menu, arrow to and activate the desired drop target.</p>
-
-                    <p>The 4X ARIA Drag module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <h2>HTML syntax</h2>
-
-                    <h3>Source</h3>
-
-                    <div>
-                        <pre><code class="language-markup">&lt;div class="source-container">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Drag and Drop</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="Copy/index.htm">Copy</a></li>
+              <li><a href="Move/index.htm">Move</a></li>
+              <li><a href="Simple/index.htm">Simple</a></li>
+              <li><a href="Sort/index.htm">Sort</a></li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              Move focus between each menu button icon, press Space, Enter, or
+              Down to open the dropdown menu, arrow to and activate the desired
+              drop target.
+            </p>
+
+            <p>
+              The 4X ARIA Drag module automatically configures all required ARIA
+              attributes and focus handling, in strict accordance with the ARIA
+              specification.
+            </p>
+
+            <h2>HTML syntax</h2>
+
+            <h3>Source</h3>
+
+            <div>
+              <pre><code class="language-markup">&lt;div class="source-container">
 &lt;div class="draggable">
 [Embedded markup for element to drag and drop here.]
 &lt;/div>
 &lt;/div></code></pre>
-                    </div>
-
-                    <h3>Target</h3>
-
-                    <div>
-                        <pre><code class="language-markup">&lt;div class="target-container">&lt;/div></code></pre>
-                    </div>
+            </div>
 
-                    <p>IMPORTANT: Any element that is draggable must be a first child element of its source container element, and all draggable elements must be wrapped within a container element that supports innerHTML such as a div or span element. To ensure accessibility, the top level draggable element must never consist of a focusable active element such as a link, form field, or simulated active element type that is meant to be directly actionable by itself. All such controls must instead be wrapped within a draggable div element which is the first child of the source container element. This is necessary to ensure that the keyboard accessible menu button element is rendered within the correct context element during execution.</p>
+            <h3>Target</h3>
 
-                    <h2>JavaScript syntax</h2>
+            <div>
+              <pre><code class="language-markup">&lt;div class="target-container">&lt;/div></code></pre>
+            </div>
 
-                    <div>
-                        <pre><code class="language-javascript">var drake = $A.setDrag({
+            <p>
+              IMPORTANT: Any element that is draggable must be a first child
+              element of its source container element, and all draggable
+              elements must be wrapped within a container element that supports
+              innerHTML such as a div or span element. To ensure accessibility,
+              the top level draggable element must never consist of a focusable
+              active element such as a link, form field, or simulated active
+              element type that is meant to be directly actionable by itself.
+              All such controls must instead be wrapped within a draggable div
+              element which is the first child of the source container element.
+              This is necessary to ensure that the keyboard accessible menu
+              button element is rendered within the correct context element
+              during execution.
+            </p>
+
+            <h2>JavaScript syntax</h2>
+
+            <div>
+              <pre><code class="language-javascript">var drake = $A.setDrag({
 // Configure functionality key / value mappings
 });
 
@@ -100,18 +138,26 @@ <h2>JavaScript syntax</h2>
 .on("cloned", function(dragElementClone, originalDragElement, type) {
 // DOM element "originalDragElement" was cloned as "dragElementClone", of "type" ('mirror' or 'copy'). Fired for mirror images and when "copy: true"
 });</code></pre>
-                    </div>
+            </div>
 
-                    <h2>Parameters</h2>
+            <ul>
+              <li>Module file: Drag.js</li>
+              <li>
+                Requires: Dragula.css, Dragula.js, Velocity.js, VelocityUI.js,
+                Animate.js, AccName.js, RovingTabIndex.js, Menu.js.
+              </li>
+            </ul>
 
-                    <ol>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <h2>Parameters</h2>
 
-                    <h3>Configuration</h3>
+            <ol>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <div>
-                        <pre><code class="language-javascript">{
+            <h3>Configuration</h3>
+
+            <div>
+              <pre><code class="language-javascript">{
 
 // Specify where dragged elements will be inserted within the drop target container element.
 // Applicable when using the keyboard to perform a manual drag and drop action using the accessible ARIA dropdown menu button.
@@ -235,67 +281,96 @@ <h3>Configuration</h3>
 }
 
 }</code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Footnotes/Internal - Straylight/index.htm b/Templates/Footnotes/Internal - Straylight/index.htm
index e795d553..57cd1bf8 100644
--- a/Templates/Footnotes/Internal - Straylight/index.htm	
+++ b/Templates/Footnotes/Internal - Straylight/index.htm	
@@ -1,174 +1,374 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Straylight Footnotes (Internal Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/footnote.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Straylight Footnotes (Internal Content) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/footnote.css" />
     <script src="/4X/4X.js#Straylight"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg">
-                </a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+            />
+          </a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Straylight/index.htm" aria-current="page"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="aria-accordion component flex-item">
+              <h1 class="pageTitle">
+                Straylight Footnotes <small>Internal Content</small>
+              </h1>
+              <p>
+                Some say that the Azores are the legendary peaks of
+                <span class="aria-footnote"
+                  >Atlantis<a aria-description="Atlantis" href="#f1"
+                    ><sup>1</sup></a
+                  ></span
+                >
+                after it was swallowed by the sea, which is easy to believe,
+                especially after visiting
+                <span class="aria-footnote"
+                  >Furnas<a aria-description="Furnas" href="#f3"
+                    ><sup>2</sup></a
+                  ></span
+                >; bells ringing from church steeples, storm driven thunder
+                clouds over head, old manor homes with their windows sparkling
+                in the sunlight, wind-swept mountain ridges over crystalline
+                lakes, its haunting beauty is unparalleled.
+              </p>
+              <p>
+                "Going home" is a concept with entirely different significance
+                for those who have been uprooted from their home and now live
+                elsewhere. TO me going home is returning to the paradisiacal
+                island of
+                <span class="aria-footnote"
+                  >Sao Miguel<a aria-description="Sao Miguel" href="#f2"
+                    ><sup>3</sup></a
+                  ></span
+                >, where at every corner is a discovery and a memory. The valley
+                of
+                <span class="aria-footnote"
+                  >Furnas<a aria-description="Furnas" href="#f3"
+                    ><sup>4</sup></a
+                  ></span
+                >, with the exception of a few road upgrades and Wi-Fi, has
+                remained the same as I always remembered.
+                <span class="aria-footnote"
+                  >Furnas<a aria-description="Furnas" href="#f3"
+                    ><sup>5</sup></a
+                  ></span
+                >
+                is a magical village where volcanic fumaroles, effervescent
+                springs, and geysers are part of the natural landscape.
+                Everywhere the scents of baking bread and fresh fruit mingle
+                with the scent of the ever breathing volcano.
+              </p>
+              <p>
+                The valley of
+                <span class="aria-footnote"
+                  >Furnas<a aria-description="Furnas" href="#f3"
+                    ><sup>6</sup></a
+                  ></span
+                >
+                nestles within Sao Miguel's volcanic crater, venting hot mineral
+                springs where fresh corn is cooked in burlap sacks immersed in
+                boiling fumaroles; where botanical gardens are home to black and
+                white swans, and exotic plants and fauna from around the world.
+                The botanical gardens of the Hotel Terra Nostra are world
+                renowned for its age and the variety of species there, but to me
+                it is what I imagined the Garden of Eden to be.
+              </p>
+              <p>
+                The sounds are as magical as the sights. Countless little birds
+                call the tree tops home, and delight visitors with their
+                constant singing; various creeks murmur in tune with the
+                rustling foliage. The main feature of the gardens is the
+                swimming pool fed by a natural hot ferrous spring; it is large
+                enough to often be confused by tourists as a small lake.
+                Swimming in the pool is a mystical experience; the water is warm
+                and constantly pouring into the pool. Due to the minerals, one
+                becomes noticeably more buoyant and time ceases to have its
+                normal meaning. On cold days, the mist hovers and iridescent
+                dragon flies are easily mistaken for fairies.
+              </p>
+              <p>
+                AS a child, this park was my playground. I played in its caves,
+                climbed its trees, swam for daily eternities and could not
+                conceive that anyone could ever be alive and not have such a
+                garden to visit. As an adult returning as often as I can, this
+                park gives the constant assurance that, although I live
+                elsewhere, I still belong to the
+                <span class="aria-footnote"
+                  >Azores<a aria-description="Azores" href="#f4"
+                    ><sup>7</sup></a
+                  ></span
+                >. Furnas is a paradise where the soft clopping of hooves on
+                cobbled streets, the babbling of the brook beneath the mill at
+                twilight, and the smell of fresh baked bread and wild
+                blackberries filling the crisp morning air, call to my heart
+                with a ceaseless whisper to come home.
+              </p>
+              <p>
+                <i>
+                  (From the travel log of Ana Cristina Wallenstein-Garaventa)</i
+                >
+              </p>
+              <div id="footnotesDil" class="intro">&nbsp;</div>
+              <div
+                role="region"
+                aria-label="Footnotes"
+                id="footnotes"
+                class="intro tal"
+              >
+                <p role="region" aria-label="Definition">
+                  <a
+                    title="Go Back"
+                    aria-label="Go Back"
+                    href="#"
+                    class="footnote"
+                    id="f1"
+                    ><span>&#8224;</span></a
+                  >
+                  Atlantis (in Greek, "island of Atlas") is a legendary island
+                  first mentioned in Plato's Footnotesues Timaeus and Critias,
+                  written about 360 BC. According to Plato, Atlantis was a naval
+                  power lying "in front of the Pillars of Hercules" that
+                  conquered many parts of Western Europe and Africa 9,000 years
+                  before the time of Solon, or approximately 9600 BC. After a
+                  failed attempt to invade Athens, Atlantis sank into the ocean
+                  "in a single day and night of misfortune".
+                  <a
+                    href="https://en.wikipedia.org/wiki/Atlantis"
+                    target="_blank"
+                    >Atlantis - Wikipedia, the free encyclopedia</a
+                  >
+                </p>
+                <p role="region" aria-label="Definition">
+                  <a
+                    title="Go Back"
+                    aria-label="Go Back"
+                    href="#"
+                    class="footnote"
+                    id="f2"
+                    ><span>&#8224;</span></a
+                  >
+                  S&#227;o Miguel Island (Portuguese for Saint Michael),
+                  nicknamed "The Green Island", is the largest and most populous
+                  island in the Portuguese Azores archipelago. The island covers
+                  759 km2 (293 sq mi) and has around 140,000 inhabitants, 45,000
+                  of these people located in the largest city in the
+                  archipelago: Ponta Delgada.
+                  <a
+                    href="https://en.wikipedia.org/wiki/S%C3%A3o_Miguel_Island"
+                    target="_blank"
+                    >S&#227;o Miguel Island - Wikipedia, the free
+                    encyclopedia</a
+                  >
+                </p>
+                <p role="region" aria-label="Definition">
+                  <a
+                    title="Go Back"
+                    aria-label="Go Back"
+                    href="#"
+                    class="footnote"
+                    id="f3"
+                    ><span>&#8224;</span></a
+                  >
+                  Furnas is a civil parish in the municipality of
+                  Povoa&#231;&#227;o on the island of S&#227;o Miguel in the
+                  Azores. The population in 2001 was 1,541, its density is
+                  44.76/km&#178; and the area is 34.43 km&#178;. The parish is
+                  one of the largest in the island and in the Azores. It is
+                  located east of Lagoa and Ponta Delgada, west of
+                  Povoa&#231;&#227;o and southeast of Ribeira Grande.
+                  <a href="https://en.wikipedia.org/wiki/Furnas" target="_blank"
+                    >Furnas - Wikipedia, the free encyclopedia</a
+                  >
+                </p>
+                <p role="region" aria-label="Definition">
+                  <a
+                    title="Go Back"
+                    aria-label="Go Back"
+                    href="#"
+                    class="footnote"
+                    id="f4"
+                    ><span>&#8224;</span></a
+                  >
+                  The Archipelago of the Azores is composed of nine volcanic
+                  islands situated in the middle of the North Atlantic Ocean,
+                  and is located about 1,500 km (930 mi) west from Lisbon and
+                  about 3,900 km (2,400 mi) east from the east coast of North
+                  America. The islands, and their economic exclusion zone, form
+                  the Autonomous Region of the Azores, one of the two autonomous
+                  regions of Portugal. Its main industries are: agriculture,
+                  dairy farming (for cheese and butter products primarily),
+                  minor livestock ranching, fishing and tourism, which is
+                  becoming the major service activity in the region; added to
+                  which, the government of the Azores employs a large percentage
+                  of the population directly or indirectly in many aspects of
+                  the service and tertiary sectors.
+                  <a href="https://en.wikipedia.org/wiki/Azores" target="_blank"
+                    >Azores - Wikipedia, the free encyclopedia</a
+                  >
+                </p>
+              </div>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm" aria-current="page">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>The footnotes are keyboard accessible:</h2>
+              <ul>
+                <li>
+                  Press the <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd>
+                  keys to jump between footnotes.
+                </li>
+                <li>
+                  Press the <kbd>Enter</kbd> key to jump to and from each
+                  footnote.
+                </li>
+                <li>Mouse users can click the desired footnote as usual.</li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="aria-accordion component flex-item">
-                        <h1 class="pageTitle">Straylight Footnotes <small>Internal Content</small></h1>
-                        <p> Some say that the Azores are the legendary peaks of <span class="aria-footnote">Atlantis<a aria-description="Atlantis" href="#f1"><sup>1</sup></a></span> after it was swallowed by the sea, which is easy to believe, especially after visiting <span class="aria-footnote">Furnas<a aria-description="Furnas" href="#f3"><sup>2</sup></a></span>; bells ringing from church steeples, storm driven thunder clouds over head, old manor homes with their windows sparkling in the sunlight, wind-swept mountain ridges over crystalline lakes, its haunting beauty is unparalleled.</p>
-                        <p> "Going home" is a concept with entirely different significance for those who have been uprooted from their home and now live elsewhere. TO me going home is returning to the paradisiacal island of <span class="aria-footnote">Sao Miguel<a aria-description="Sao Miguel" href="#f2"><sup>3</sup></a></span>, where at every corner is a discovery and a memory. The valley of <span class="aria-footnote">Furnas<a aria-description="Furnas" href="#f3"><sup>4</sup></a></span>, with the exception of a few road upgrades and Wi-Fi, has remained the same as I always remembered. <span class="aria-footnote">Furnas<a aria-description="Furnas" href="#f3"><sup>5</sup></a></span> is a magical village where volcanic fumaroles, effervescent springs, and geysers are part of the natural landscape. Everywhere the scents of baking bread and fresh fruit mingle with the scent of the ever breathing volcano.</p>
-                        <p> The valley of <span class="aria-footnote">Furnas<a aria-description="Furnas" href="#f3"><sup>6</sup></a></span> nestles within Sao Miguel's volcanic crater, venting hot mineral springs where fresh corn is cooked in burlap sacks immersed in boiling fumaroles; where botanical gardens are home to black and white swans, and exotic plants and fauna from around the world. The botanical gardens of the Hotel Terra Nostra are world renowned for its age and the variety of species there, but to me it is what I imagined the Garden of Eden to be.</p>
-                        <p> The sounds are as magical as the sights. Countless little birds call the tree tops home, and delight visitors with their constant singing; various creeks murmur in tune with the rustling foliage. The main feature of the gardens is the swimming pool fed by a natural hot ferrous spring; it is large enough to often be confused by tourists as a small lake. Swimming in the pool is a mystical experience; the water is warm and constantly pouring into the pool. Due to the minerals, one becomes noticeably more buoyant and time ceases to have its normal meaning. On cold days, the mist hovers and iridescent dragon flies are easily mistaken for fairies.</p>
-                        <p> AS a child, this park was my playground. I played in its caves, climbed its trees, swam for daily eternities and could not conceive that anyone could ever be alive and not have such a garden to visit. As an adult returning as often as I can, this park gives the constant assurance that, although I live elsewhere, I still belong to the <span class="aria-footnote">Azores<a aria-description="Azores" href="#f4"><sup>7</sup></a></span>. Furnas is a paradise where the soft clopping of hooves on cobbled streets, the babbling of the brook beneath the mill at twilight, and the smell of fresh baked bread and wild blackberries filling the crisp morning air, call to my heart with a ceaseless whisper to come home. </p>
-                        <p><i> (From the travel log of Ana Cristina Wallenstein-Garaventa)</i></p>
-                        <div id="footnotesDil" class="intro">
-                            &nbsp;
-                        </div>
-                        <div role="region" aria-label="Footnotes" id="footnotes" class="intro tal">
-                            <p role="region" aria-label="Definition">
-                                <a title="Go Back" aria-label="Go Back" href="#" class="footnote" id="f1"><span>&#8224;</span></a>
-                                Atlantis (in Greek, "island of Atlas") is a legendary island first mentioned in Plato's
-                                Footnotesues Timaeus and Critias, written about 360 BC. According to Plato, Atlantis was a
-                                naval power lying "in front of the Pillars of Hercules" that conquered many parts of
-                                Western Europe and Africa 9,000 years before the time of Solon, or approximately 9600
-                                BC. After a failed attempt to invade Athens, Atlantis sank into the ocean "in a single
-                                day and night of misfortune".
-                                <a href="https://en.wikipedia.org/wiki/Atlantis" target="_blank">Atlantis - Wikipedia, the free encyclopedia</a>
-                            </p>
-                            <p role="region" aria-label="Definition">
-                                <a title="Go Back" aria-label="Go Back" href="#" class="footnote" id="f2"><span>&#8224;</span></a>
-                                S&#227;o Miguel Island (Portuguese for Saint Michael), nicknamed "The Green Island",
-                                is the largest and most populous island in the Portuguese Azores archipelago. The island
-                                covers 759 km2 (293 sq mi) and has around 140,000 inhabitants, 45,000 of these people
-                                located in the largest city in the archipelago: Ponta Delgada.
-                                <a href="https://en.wikipedia.org/wiki/S%C3%A3o_Miguel_Island" target="_blank">S&#227;o Miguel Island - Wikipedia, the free encyclopedia</a>
-                            </p>
-                            <p role="region" aria-label="Definition">
-                                <a title="Go Back" aria-label="Go Back" href="#" class="footnote" id="f3"><span>&#8224;</span></a>
-                                Furnas is a civil parish in the municipality of Povoa&#231;&#227;o on the island of
-                                S&#227;o Miguel in the Azores. The population in 2001 was 1,541, its density
-                                is 44.76/km&#178; and the area is 34.43 km&#178;. The parish is one of the largest
-                                in the island and in the Azores. It is located east of Lagoa and Ponta Delgada, west
-                                of Povoa&#231;&#227;o and southeast of Ribeira Grande.
-                                <a href="https://en.wikipedia.org/wiki/Furnas" target="_blank">Furnas - Wikipedia, the free encyclopedia</a>
-                            </p>
-                            <p role="region" aria-label="Definition">
-                                <a title="Go Back" aria-label="Go Back" href="#" class="footnote" id="f4"><span>&#8224;</span></a>
-                                The Archipelago of the Azores is composed of nine volcanic islands situated in
-                                the middle of the North Atlantic Ocean, and is located about 1,500 km (930 mi)
-                                west from Lisbon and about 3,900 km (2,400 mi) east from the east coast of North
-                                America. The islands, and their economic exclusion zone, form the Autonomous Region
-                                of the Azores, one of the two autonomous regions of Portugal. Its main industries
-                                are: agriculture, dairy farming (for cheese and butter products primarily), minor
-                                livestock ranching, fishing and tourism, which is becoming the major service
-                                activity in the region; added to which, the government of the Azores employs a
-                                large percentage of the population directly or indirectly in many aspects of the
-                                service and tertiary sectors.
-                                <a href="https://en.wikipedia.org/wiki/Azores" target="_blank">Azores - Wikipedia, the free encyclopedia</a>
-                            </p>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The footnotes are keyboard accessible:</h2>
-                        <ul>
-                            <li>Press the <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> keys to jump between footnotes.</li>
-                            <li>Press the <kbd>Enter</kbd> key to jump to and from each footnote.</li>
-                            <li>Mouse users can click the desired footnote as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Footnotes/Internal/index.htm b/Templates/Footnotes/Internal/index.htm
index 0ef6a9e1..c601d069 100644
--- a/Templates/Footnotes/Internal/index.htm
+++ b/Templates/Footnotes/Internal/index.htm
@@ -1,175 +1,373 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Footnotes (Internal Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/footnote.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/footnote.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg">
-                </a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+            />
+          </a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="index.htm" aria-current="page">Internal</a></li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="aria-accordion component flex-item">
+              <h1 class="pageTitle">
+                Footnotes <small>Internal Content</small>
+              </h1>
+              <p>
+                Some say that the Azores are the legendary peaks of
+                <span class="aria-footnote"
+                  >Atlantis<a aria-description="Atlantis" href="#f1"
+                    ><sup>1</sup></a
+                  ></span
+                >
+                after it was swallowed by the sea, which is easy to believe,
+                especially after visiting
+                <span class="aria-footnote"
+                  >Furnas<a aria-description="Furnas" href="#f3"
+                    ><sup>2</sup></a
+                  ></span
+                >; bells ringing from church steeples, storm driven thunder
+                clouds over head, old manor homes with their windows sparkling
+                in the sunlight, wind-swept mountain ridges over crystalline
+                lakes, its haunting beauty is unparalleled.
+              </p>
+              <p>
+                "Going home" is a concept with entirely different significance
+                for those who have been uprooted from their home and now live
+                elsewhere. TO me going home is returning to the paradisiacal
+                island of
+                <span class="aria-footnote"
+                  >Sao Miguel<a aria-description="Sao Miguel" href="#f2"
+                    ><sup>3</sup></a
+                  ></span
+                >, where at every corner is a discovery and a memory. The valley
+                of
+                <span class="aria-footnote"
+                  >Furnas<a aria-description="Furnas" href="#f3"
+                    ><sup>4</sup></a
+                  ></span
+                >, with the exception of a few road upgrades and Wi-Fi, has
+                remained the same as I always remembered.
+                <span class="aria-footnote"
+                  >Furnas<a aria-description="Furnas" href="#f3"
+                    ><sup>5</sup></a
+                  ></span
+                >
+                is a magical village where volcanic fumaroles, effervescent
+                springs, and geysers are part of the natural landscape.
+                Everywhere the scents of baking bread and fresh fruit mingle
+                with the scent of the ever breathing volcano.
+              </p>
+              <p>
+                The valley of
+                <span class="aria-footnote"
+                  >Furnas<a aria-description="Furnas" href="#f3"
+                    ><sup>6</sup></a
+                  ></span
+                >
+                nestles within Sao Miguel's volcanic crater, venting hot mineral
+                springs where fresh corn is cooked in burlap sacks immersed in
+                boiling fumaroles; where botanical gardens are home to black and
+                white swans, and exotic plants and fauna from around the world.
+                The botanical gardens of the Hotel Terra Nostra are world
+                renowned for its age and the variety of species there, but to me
+                it is what I imagined the Garden of Eden to be.
+              </p>
+              <p>
+                The sounds are as magical as the sights. Countless little birds
+                call the tree tops home, and delight visitors with their
+                constant singing; various creeks murmur in tune with the
+                rustling foliage. The main feature of the gardens is the
+                swimming pool fed by a natural hot ferrous spring; it is large
+                enough to often be confused by tourists as a small lake.
+                Swimming in the pool is a mystical experience; the water is warm
+                and constantly pouring into the pool. Due to the minerals, one
+                becomes noticeably more buoyant and time ceases to have its
+                normal meaning. On cold days, the mist hovers and iridescent
+                dragon flies are easily mistaken for fairies.
+              </p>
+              <p>
+                AS a child, this park was my playground. I played in its caves,
+                climbed its trees, swam for daily eternities and could not
+                conceive that anyone could ever be alive and not have such a
+                garden to visit. As an adult returning as often as I can, this
+                park gives the constant assurance that, although I live
+                elsewhere, I still belong to the
+                <span class="aria-footnote"
+                  >Azores<a aria-description="Azores" href="#f4"
+                    ><sup>7</sup></a
+                  ></span
+                >. Furnas is a paradise where the soft clopping of hooves on
+                cobbled streets, the babbling of the brook beneath the mill at
+                twilight, and the smell of fresh baked bread and wild
+                blackberries filling the crisp morning air, call to my heart
+                with a ceaseless whisper to come home.
+              </p>
+              <p>
+                <i>
+                  (From the travel log of Ana Cristina Wallenstein-Garaventa)</i
+                >
+              </p>
+              <div id="footnotesDil" class="intro">&nbsp;</div>
+              <div
+                role="region"
+                aria-label="Footnotes"
+                id="footnotes"
+                class="intro tal"
+              >
+                <p role="region" aria-label="Definition">
+                  <a
+                    title="Go Back"
+                    aria-label="Go Back"
+                    href="#"
+                    class="footnote"
+                    id="f1"
+                    ><span>&#8224;</span></a
+                  >
+                  Atlantis (in Greek, "island of Atlas") is a legendary island
+                  first mentioned in Plato's Footnotesues Timaeus and Critias,
+                  written about 360 BC. According to Plato, Atlantis was a naval
+                  power lying "in front of the Pillars of Hercules" that
+                  conquered many parts of Western Europe and Africa 9,000 years
+                  before the time of Solon, or approximately 9600 BC. After a
+                  failed attempt to invade Athens, Atlantis sank into the ocean
+                  "in a single day and night of misfortune".
+                  <a
+                    href="https://en.wikipedia.org/wiki/Atlantis"
+                    target="_blank"
+                    >Atlantis - Wikipedia, the free encyclopedia</a
+                  >
+                </p>
+                <p role="region" aria-label="Definition">
+                  <a
+                    title="Go Back"
+                    aria-label="Go Back"
+                    href="#"
+                    class="footnote"
+                    id="f2"
+                    ><span>&#8224;</span></a
+                  >
+                  S&#227;o Miguel Island (Portuguese for Saint Michael),
+                  nicknamed "The Green Island", is the largest and most populous
+                  island in the Portuguese Azores archipelago. The island covers
+                  759 km2 (293 sq mi) and has around 140,000 inhabitants, 45,000
+                  of these people located in the largest city in the
+                  archipelago: Ponta Delgada.
+                  <a
+                    href="https://en.wikipedia.org/wiki/S%C3%A3o_Miguel_Island"
+                    target="_blank"
+                    >S&#227;o Miguel Island - Wikipedia, the free
+                    encyclopedia</a
+                  >
+                </p>
+                <p role="region" aria-label="Definition">
+                  <a
+                    title="Go Back"
+                    aria-label="Go Back"
+                    href="#"
+                    class="footnote"
+                    id="f3"
+                    ><span>&#8224;</span></a
+                  >
+                  Furnas is a civil parish in the municipality of
+                  Povoa&#231;&#227;o on the island of S&#227;o Miguel in the
+                  Azores. The population in 2001 was 1,541, its density is
+                  44.76/km&#178; and the area is 34.43 km&#178;. The parish is
+                  one of the largest in the island and in the Azores. It is
+                  located east of Lagoa and Ponta Delgada, west of
+                  Povoa&#231;&#227;o and southeast of Ribeira Grande.
+                  <a href="https://en.wikipedia.org/wiki/Furnas" target="_blank"
+                    >Furnas - Wikipedia, the free encyclopedia</a
+                  >
+                </p>
+                <p role="region" aria-label="Definition">
+                  <a
+                    title="Go Back"
+                    aria-label="Go Back"
+                    href="#"
+                    class="footnote"
+                    id="f4"
+                    ><span>&#8224;</span></a
+                  >
+                  The Archipelago of the Azores is composed of nine volcanic
+                  islands situated in the middle of the North Atlantic Ocean,
+                  and is located about 1,500 km (930 mi) west from Lisbon and
+                  about 3,900 km (2,400 mi) east from the east coast of North
+                  America. The islands, and their economic exclusion zone, form
+                  the Autonomous Region of the Azores, one of the two autonomous
+                  regions of Portugal. Its main industries are: agriculture,
+                  dairy farming (for cheese and butter products primarily),
+                  minor livestock ranching, fishing and tourism, which is
+                  becoming the major service activity in the region; added to
+                  which, the government of the Azores employs a large percentage
+                  of the population directly or indirectly in many aspects of
+                  the service and tertiary sectors.
+                  <a href="https://en.wikipedia.org/wiki/Azores" target="_blank"
+                    >Azores - Wikipedia, the free encyclopedia</a
+                  >
+                </p>
+              </div>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="index.htm" aria-current="page">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>The footnotes are keyboard accessible:</h2>
+              <ul>
+                <li>
+                  Press the <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd>
+                  keys to jump between footnotes.
+                </li>
+                <li>
+                  Press the <kbd>Enter</kbd> key to jump to and from each
+                  footnote.
+                </li>
+                <li>Mouse users can click the desired footnote as usual.</li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="aria-accordion component flex-item">
-                        <h1 class="pageTitle">Footnotes <small>Internal Content</small></h1>
-                        <p> Some say that the Azores are the legendary peaks of <span class="aria-footnote">Atlantis<a aria-description="Atlantis" href="#f1"><sup>1</sup></a></span> after it was swallowed by the sea, which is easy to believe, especially after visiting <span class="aria-footnote">Furnas<a aria-description="Furnas" href="#f3"><sup>2</sup></a></span>; bells ringing from church steeples, storm driven thunder clouds over head, old manor homes with their windows sparkling in the sunlight, wind-swept mountain ridges over crystalline lakes, its haunting beauty is unparalleled.</p>
-                        <p> "Going home" is a concept with entirely different significance for those who have been uprooted from their home and now live elsewhere. TO me going home is returning to the paradisiacal island of <span class="aria-footnote">Sao Miguel<a aria-description="Sao Miguel" href="#f2"><sup>3</sup></a></span>, where at every corner is a discovery and a memory. The valley of <span class="aria-footnote">Furnas<a aria-description="Furnas" href="#f3"><sup>4</sup></a></span>, with the exception of a few road upgrades and Wi-Fi, has remained the same as I always remembered. <span class="aria-footnote">Furnas<a aria-description="Furnas" href="#f3"><sup>5</sup></a></span> is a magical village where volcanic fumaroles, effervescent springs, and geysers are part of the natural landscape. Everywhere the scents of baking bread and fresh fruit mingle with the scent of the ever breathing volcano.</p>
-                        <p> The valley of <span class="aria-footnote">Furnas<a aria-description="Furnas" href="#f3"><sup>6</sup></a></span> nestles within Sao Miguel's volcanic crater, venting hot mineral springs where fresh corn is cooked in burlap sacks immersed in boiling fumaroles; where botanical gardens are home to black and white swans, and exotic plants and fauna from around the world. The botanical gardens of the Hotel Terra Nostra are world renowned for its age and the variety of species there, but to me it is what I imagined the Garden of Eden to be.</p>
-                        <p> The sounds are as magical as the sights. Countless little birds call the tree tops home, and delight visitors with their constant singing; various creeks murmur in tune with the rustling foliage. The main feature of the gardens is the swimming pool fed by a natural hot ferrous spring; it is large enough to often be confused by tourists as a small lake. Swimming in the pool is a mystical experience; the water is warm and constantly pouring into the pool. Due to the minerals, one becomes noticeably more buoyant and time ceases to have its normal meaning. On cold days, the mist hovers and iridescent dragon flies are easily mistaken for fairies.</p>
-                        <p> AS a child, this park was my playground. I played in its caves, climbed its trees, swam for daily eternities and could not conceive that anyone could ever be alive and not have such a garden to visit. As an adult returning as often as I can, this park gives the constant assurance that, although I live elsewhere, I still belong to the <span class="aria-footnote">Azores<a aria-description="Azores" href="#f4"><sup>7</sup></a></span>. Furnas is a paradise where the soft clopping of hooves on cobbled streets, the babbling of the brook beneath the mill at twilight, and the smell of fresh baked bread and wild blackberries filling the crisp morning air, call to my heart with a ceaseless whisper to come home. </p>
-                        <p><i> (From the travel log of Ana Cristina Wallenstein-Garaventa)</i></p>
-                        <div id="footnotesDil" class="intro">
-                            &nbsp;
-                        </div>
-                        <div role="region" aria-label="Footnotes" id="footnotes" class="intro tal">
-                            <p role="region" aria-label="Definition">
-                                <a title="Go Back" aria-label="Go Back" href="#" class="footnote" id="f1"><span>&#8224;</span></a>
-                                Atlantis (in Greek, "island of Atlas") is a legendary island first mentioned in Plato's
-                                Footnotesues Timaeus and Critias, written about 360 BC. According to Plato, Atlantis was a
-                                naval power lying "in front of the Pillars of Hercules" that conquered many parts of
-                                Western Europe and Africa 9,000 years before the time of Solon, or approximately 9600
-                                BC. After a failed attempt to invade Athens, Atlantis sank into the ocean "in a single
-                                day and night of misfortune".
-                                <a href="https://en.wikipedia.org/wiki/Atlantis" target="_blank">Atlantis - Wikipedia, the free encyclopedia</a>
-                            </p>
-                            <p role="region" aria-label="Definition">
-                                <a title="Go Back" aria-label="Go Back" href="#" class="footnote" id="f2"><span>&#8224;</span></a>
-                                S&#227;o Miguel Island (Portuguese for Saint Michael), nicknamed "The Green Island",
-                                is the largest and most populous island in the Portuguese Azores archipelago. The island
-                                covers 759 km2 (293 sq mi) and has around 140,000 inhabitants, 45,000 of these people
-                                located in the largest city in the archipelago: Ponta Delgada.
-                                <a href="https://en.wikipedia.org/wiki/S%C3%A3o_Miguel_Island" target="_blank">S&#227;o Miguel Island - Wikipedia, the free encyclopedia</a>
-                            </p>
-                            <p role="region" aria-label="Definition">
-                                <a title="Go Back" aria-label="Go Back" href="#" class="footnote" id="f3"><span>&#8224;</span></a>
-                                Furnas is a civil parish in the municipality of Povoa&#231;&#227;o on the island of
-                                S&#227;o Miguel in the Azores. The population in 2001 was 1,541, its density
-                                is 44.76/km&#178; and the area is 34.43 km&#178;. The parish is one of the largest
-                                in the island and in the Azores. It is located east of Lagoa and Ponta Delgada, west
-                                of Povoa&#231;&#227;o and southeast of Ribeira Grande.
-                                <a href="https://en.wikipedia.org/wiki/Furnas" target="_blank">Furnas - Wikipedia, the free encyclopedia</a>
-                            </p>
-                            <p role="region" aria-label="Definition">
-                                <a title="Go Back" aria-label="Go Back" href="#" class="footnote" id="f4"><span>&#8224;</span></a>
-                                The Archipelago of the Azores is composed of nine volcanic islands situated in
-                                the middle of the North Atlantic Ocean, and is located about 1,500 km (930 mi)
-                                west from Lisbon and about 3,900 km (2,400 mi) east from the east coast of North
-                                America. The islands, and their economic exclusion zone, form the Autonomous Region
-                                of the Azores, one of the two autonomous regions of Portugal. Its main industries
-                                are: agriculture, dairy farming (for cheese and butter products primarily), minor
-                                livestock ranching, fishing and tourism, which is becoming the major service
-                                activity in the region; added to which, the government of the Azores employs a
-                                large percentage of the population directly or indirectly in many aspects of the
-                                service and tertiary sectors.
-                                <a href="https://en.wikipedia.org/wiki/Azores" target="_blank">Azores - Wikipedia, the free encyclopedia</a>
-                            </p>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The footnotes are keyboard accessible:</h2>
-                        <ul>
-                            <li>Press the <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> keys to jump between footnotes.</li>
-                            <li>Press the <kbd>Enter</kbd> key to jump to and from each footnote.</li>
-                            <li>Mouse users can click the desired footnote as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Footnotes/index.htm b/Templates/Footnotes/index.htm
index 3dbf3889..6c8ae9a1 100644
--- a/Templates/Footnotes/index.htm
+++ b/Templates/Footnotes/index.htm
@@ -1,90 +1,141 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Footnotes - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
+    <meta name="description" content="Scalable ARIA Components" />
     <meta name="Author" content="Bryan Garaventa" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Footnotes</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="Internal/index.htm">Internal</a></li>
-                        <li><a href="Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>Each footnote must be actionable using both the keyboard and the mouse, focus must move to the beginning of the definition when activated, and focus must move back to the footnote when the back link is activated.</p>
-
-                    <p>The 4X ARIA Footnote module automatically configures all required focus handling and interaction events to ensure accessibility.</p>
-
-                    <p>The following attributes are handled automatically by the Footnote module:</p>
-
-                    <ul>
-                        <li> aria-controls</li>
-                        <li> aria-flowto</li>
-                    </ul>
-
-                    <h2>HTML syntax</h2>
-
-                    <p>The Footnote module utilizes traditional skip link syntax, which consists of a standard link with an href attribute. The href attribute includes an id reference to the associated footnote definition, by pointing to a back link at the beginning of the definition content.</p>
-
-                    <div>
-                        <pre><code class="language-markup">&lt;!-- The footnote skip link -->
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Footnotes</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              Each footnote must be actionable using both the keyboard and the
+              mouse, focus must move to the beginning of the definition when
+              activated, and focus must move back to the footnote when the back
+              link is activated.
+            </p>
+
+            <p>
+              The 4X ARIA Footnote module automatically configures all required
+              focus handling and interaction events to ensure accessibility.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the Footnote
+              module:
+            </p>
+
+            <ul>
+              <li>aria-controls</li>
+              <li>aria-flowto</li>
+            </ul>
+
+            <h2>HTML syntax</h2>
+
+            <p>
+              The Footnote module utilizes traditional skip link syntax, which
+              consists of a standard link with an href attribute. The href
+              attribute includes an id reference to the associated footnote
+              definition, by pointing to a back link at the beginning of the
+              definition content.
+            </p>
+
+            <div>
+              <pre><code class="language-markup">&lt;!-- The footnote skip link -->
 
 [Key Word or Phrase Here] &lt;a class="aria-footnote" href="#footnoteId1">&lt;sup>1&lt;/sup>&lt;/a>
 
 &lt;!-- The footnote back link -->
 
 &lt;a id="footnoteId1" href="#" class="footnote-back-link" aria-label="Go Back" >&#8224;&lt;/a> [Definition Content Here]</code></pre>
-                    </div>
+            </div>
 
-                    <p>Multiple footnotes that reference the same definition are supported automatically.</p>
+            <p>
+              Multiple footnotes that reference the same definition are
+              supported automatically.
+            </p>
 
-                    <h2>JavaScript syntax</h2>
+            <h2>JavaScript syntax</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">$A.setFootnotes( DOMNodeListOrCSSSelectorForFootnoteLinks , {
+            <div>
+              <pre><code class="language-javascript">$A.setFootnotes( DOMNodeListOrCSSSelectorForFootnoteLinks , {
 // Configuration key / value map
 });</code></pre>
-                    </div>
+            </div>
+
+            <ul>
+              <li>Module file: Footnote.js</li>
+              <li>
+                Requires: Velocity.js, VelocityUI.js, Animate.js,
+                SmoothScroll.js.
+              </li>
+            </ul>
 
-                    <h2>Parameters</h2>
+            <h2>Parameters</h2>
 
-                    <ol>
-                        <li>A DOM element or CSS selector to specify the triggering element</li>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <ol>
+              <li>
+                A DOM element or CSS selector to specify the triggering element
+              </li>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <h3>Configuration</h3>
+            <h3>Configuration</h3>
 
-                    <div>
-                        <pre><code class="language-javascript">{
+            <div>
+              <pre><code class="language-javascript">{
 
 // Modify the smooth scrolling animation effects.
 override: {
@@ -93,67 +144,96 @@ <h3>Configuration</h3>
 }
 
 }</code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Grids/Dynamic/index.htm b/Templates/Grids/Dynamic/index.htm
index 31c670e6..e1c3d6af 100644
--- a/Templates/Grids/Dynamic/index.htm
+++ b/Templates/Grids/Dynamic/index.htm
@@ -1,193 +1,355 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Dynamic ARIA Grid - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/extra.css">
-    <link rel="stylesheet" type="text/css" href="css/grid.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/extra.css" />
+    <link rel="stylesheet" type="text/css" href="css/grid.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Dynamic/index.htm" aria-current="page">Dynamic</a></li>
-                        <li><a href="../Editable/index.htm">Editable</a></li>
-                        <li><a href="../ReadOnly/index.htm">ReadOnly</a></li>
-                        <li><a href="../Selectable/index.htm">Selectable</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block wide--grid flex-container">
-                    <div class="component wide--grid flex-item">
-                        <h1 class="pageTitle">Dynamic ARIA Grid</h1>
-                        <section class="sample-block">
-
-                            <h2><span>Student Records</span>:<span id="pTotal"></span></h2>
-
-                            <div id="popupId" hidden></div>
-
-                            <div class="h--scroll">
-
-                                <div class="mode clearfix" role="region" aria-label="mode">
-                                    <p><label for="rr"><input type="radio" id="rr" name="mode" checked="checked" /> ReadOnly</label>
-                                        <label for="rs"> <input type="radio" id="rs" name="mode" /> Selectable</label>
-                                        <label for="re"><input type="radio" id="re" name="mode" /> Editable</label></p>
-                                    <div class="modify clearfix" role="region" aria-label="modify" id="mro">
-                                        <button id="buv">
-                                            Programmatically update the value of row "5" field "personal-email" if passed via AJAX
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="configure clearfix" hidden role="region" aria-label="configuration" id="msc">
-                                    <p><label for="cbms"><input type="checkbox" id="cbms" /> Allow multiSelect</label></p>
-                                    <p><label for="cbp"><input type="checkbox" id="cbp" /> Preserve row selection across pages</label></p>
-                                    <p><label for="cbd"><input type="checkbox" id="cbd" /> Allow delete of selected rows</label></p>
-                                    <p><label for="cdbl"><input type="checkbox" id="cdbl" /> Use double click</label></p>
-                                </div>
-                                <div class="modify clearfix" hidden role="region" aria-label="modify" id="mmm">
-                                    <ul>
-                                        <li><button id="bsa">Select All</button></li>
-                                        <li><button id="bua">Unselect All</button></li>
-                                        <li><button id="bs246">Select row 2, 4, and 6 on page 1</button></li>
-                                        <li><button id="bgs">Get Selected</button></li>
-                                        <li><button id="bd" disabled="disabled">Delete Selected</button></li>
-                                        <li><button id="bda" disabled="disabled">Delete All</button></li>
-                                        <li><button id="bc">Close Grid</button></li>
-                                        <li><button id="bo">Open Grid</button></li>
-                                    </ul>
-                                </div>
-                                <div id="dataGridId">
-                                </div>
-                                <div role="region" aria-label="pagination" class="paginate clearfix" id="pgn">
-                                    <button class="paginate" id="btnFirst">First Page</button>
-                                    <button class="paginate" id="btnPrev">Previous Page</button>
-                                    <button class="paginate" id="btnNext">Next Page</button>
-                                    <button class="paginate" id="btnLast">Last Page</button>
-                                    <input title="Page" type="text" id="goTo" /><button id="btnGo"><span>Go</span></button>
-                                </div>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../Dynamic/index.htm" aria-current="page">Dynamic</a>
+              </li>
+              <li><a href="../Editable/index.htm">Editable</a></li>
+              <li><a href="../ReadOnly/index.htm">ReadOnly</a></li>
+              <li><a href="../Selectable/index.htm">Selectable</a></li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block wide--grid flex-container">
+            <div class="component wide--grid flex-item">
+              <h1 class="pageTitle">Dynamic ARIA Grid</h1>
+              <section class="sample-block">
+                <h2><span>Student Records</span>:<span id="pTotal"></span></h2>
 
-                            </div>
+                <div id="popupId" hidden></div>
 
-                        </section>
-                    </div>
-                    <div class="keyboard wide--grid flex-item">
-                        <h2>The grid is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus to the grid and enter Applications Mode if using a screen reader like JAWS or NVDA.</li>
-                            <li>Press <kbd class="up">Up</kbd> or <kbd class="down">Down</kbd> to navigate by row. (Infinite scrolling is supported)</li>
-                            <li>Press <kbd><kbd>Control</kbd>+<kbd>Spacebar</kbd></kbd> to announce the current row when using a screen reader.</li>
-                            <li>Press <kbd><kbd>Alt</kbd>+<kbd>Up</kbd></kbd> or <kbd><kbd>Alt</kbd>+<kbd>Down</kbd></kbd> to set focus to the first or last row on the current page.</li>
-                            <li>Press <kbd class="left">Left</kbd> or <kbd class="right">Right</kbd> to navigate left or right by cell.</li>
-                            <li>Press <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to move to the first or last cell on the current row.</li>
-                            <li>Press <kbd><kbd>Control</kbd>+<kbd>Home</kbd></kbd> or <kbd><kbd>Control</kbd>+<kbd>End</kbd></kbd> to move to the first row on the first page or the last row on the last page.</li>
-                            <li>Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to open the previous or next page and set focus to the first row.</li>
-                            <li>Press Alt+PageUp or Alt+PageDown to open the first or last page and set focus to the first row.</li>
-                            <li>For mode 'Selectable':
-                                <ul>
-                                    <li>Press <kbd>Space</kbd> to toggle row selection, or click to activate using a mouse.</li>
-                                    <li>If multiSelect is enabled, press <kbd><kbd>Control</kbd>+<kbd>A</kbd></kbd> to select all rows on the current page.</li>
-                                    <li>If Delete is enabled, press <kbd>Delete</kbd> to remove all selected rows.</li>
-                                </ul>
-                            </li>
-                            <li>For mode 'Editable':
-                                <ul>
-                                    <li>Press <kbd>Enter</kbd> or <kbd>Space</kbd> to edit or toggle a cell, or click to activate using a mouse.</li>
-                                </ul>
-                            </li>
-                        </ul>
+                <div class="h--scroll">
+                  <div class="mode clearfix" role="region" aria-label="mode">
+                    <p>
+                      <label for="rr"
+                        ><input
+                          type="radio"
+                          id="rr"
+                          name="mode"
+                          checked="checked"
+                        />
+                        ReadOnly</label
+                      >
+                      <label for="rs">
+                        <input type="radio" id="rs" name="mode" />
+                        Selectable</label
+                      >
+                      <label for="re"
+                        ><input type="radio" id="re" name="mode" />
+                        Editable</label
+                      >
+                    </p>
+                    <div
+                      class="modify clearfix"
+                      role="region"
+                      aria-label="modify"
+                      id="mro"
+                    >
+                      <button id="buv">
+                        Programmatically update the value of row "5" field
+                        "personal-email" if passed via AJAX
+                      </button>
                     </div>
-                </div>
-
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
+                  </div>
+                  <div
+                    class="configure clearfix"
+                    hidden
+                    role="region"
+                    aria-label="configuration"
+                    id="msc"
+                  >
                     <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
+                      <label for="cbms"
+                        ><input type="checkbox" id="cbms" /> Allow
+                        multiSelect</label
+                      >
                     </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
+                    <p>
+                      <label for="cbp"
+                        ><input type="checkbox" id="cbp" /> Preserve row
+                        selection across pages</label
+                      >
+                    </p>
+                    <p>
+                      <label for="cbd"
+                        ><input type="checkbox" id="cbd" /> Allow delete of
+                        selected rows</label
+                      >
+                    </p>
+                    <p>
+                      <label for="cdbl"
+                        ><input type="checkbox" id="cdbl" /> Use double
+                        click</label
+                      >
+                    </p>
+                  </div>
+                  <div
+                    class="modify clearfix"
+                    hidden
+                    role="region"
+                    aria-label="modify"
+                    id="mmm"
+                  >
                     <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
+                      <li><button id="bsa">Select All</button></li>
+                      <li><button id="bua">Unselect All</button></li>
+                      <li>
+                        <button id="bs246">
+                          Select row 2, 4, and 6 on page 1
+                        </button>
+                      </li>
+                      <li><button id="bgs">Get Selected</button></li>
+                      <li>
+                        <button id="bd" disabled="disabled">
+                          Delete Selected
+                        </button>
+                      </li>
+                      <li>
+                        <button id="bda" disabled="disabled">Delete All</button>
+                      </li>
+                      <li><button id="bc">Close Grid</button></li>
+                      <li><button id="bo">Open Grid</button></li>
                     </ul>
+                  </div>
+                  <div id="dataGridId"></div>
+                  <div
+                    role="region"
+                    aria-label="pagination"
+                    class="paginate clearfix"
+                    id="pgn"
+                  >
+                    <button class="paginate" id="btnFirst">First Page</button>
+                    <button class="paginate" id="btnPrev">Previous Page</button>
+                    <button class="paginate" id="btnNext">Next Page</button>
+                    <button class="paginate" id="btnLast">Last Page</button>
+                    <input title="Page" type="text" id="goTo" /><button
+                      id="btnGo"
+                    >
+                      <span>Go</span>
+                    </button>
+                  </div>
                 </div>
+              </section>
             </div>
-        </footer>
+            <div class="keyboard wide--grid flex-item">
+              <h2>
+                The grid is optimized for screen reader and keyboard only users:
+              </h2>
+              <ul>
+                <li>
+                  Set focus to the grid and enter Applications Mode if using a
+                  screen reader like JAWS or NVDA.
+                </li>
+                <li>
+                  Press <kbd class="up">Up</kbd> or
+                  <kbd class="down">Down</kbd> to navigate by row. (Infinite
+                  scrolling is supported)
+                </li>
+                <li>
+                  Press <kbd><kbd>Control</kbd>+<kbd>Spacebar</kbd></kbd> to
+                  announce the current row when using a screen reader.
+                </li>
+                <li>
+                  Press <kbd><kbd>Alt</kbd>+<kbd>Up</kbd></kbd> or
+                  <kbd><kbd>Alt</kbd>+<kbd>Down</kbd></kbd> to set focus to the
+                  first or last row on the current page.
+                </li>
+                <li>
+                  Press <kbd class="left">Left</kbd> or
+                  <kbd class="right">Right</kbd> to navigate left or right by
+                  cell.
+                </li>
+                <li>
+                  Press <kbd class="home">Home</kbd> or
+                  <kbd class="end">End</kbd> to move to the first or last cell
+                  on the current row.
+                </li>
+                <li>
+                  Press <kbd><kbd>Control</kbd>+<kbd>Home</kbd></kbd> or
+                  <kbd><kbd>Control</kbd>+<kbd>End</kbd></kbd> to move to the
+                  first row on the first page or the last row on the last page.
+                </li>
+                <li>
+                  Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to open the
+                  previous or next page and set focus to the first row.
+                </li>
+                <li>
+                  Press Alt+PageUp or Alt+PageDown to open the first or last
+                  page and set focus to the first row.
+                </li>
+                <li>
+                  For mode 'Selectable':
+                  <ul>
+                    <li>
+                      Press <kbd>Space</kbd> to toggle row selection, or click
+                      to activate using a mouse.
+                    </li>
+                    <li>
+                      If multiSelect is enabled, press
+                      <kbd><kbd>Control</kbd>+<kbd>A</kbd></kbd> to select all
+                      rows on the current page.
+                    </li>
+                    <li>
+                      If Delete is enabled, press <kbd>Delete</kbd> to remove
+                      all selected rows.
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  For mode 'Editable':
+                  <ul>
+                    <li>
+                      Press <kbd>Enter</kbd> or <kbd>Space</kbd> to edit or
+                      toggle a cell, or click to activate using a mouse.
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Grids/Dynamic/js/setup.js b/Templates/Grids/Dynamic/js/setup.js
index 6bf2cc36..0535ca36 100644
--- a/Templates/Grids/Dynamic/js/setup.js
+++ b/Templates/Grids/Dynamic/js/setup.js
@@ -216,16 +216,16 @@ $A.import("Grid", { defer: true }, function () {
             spin === 2
               ? "Rincewind"
               : spin === 1
-              ? "Ponder Stibbons"
-              : "Hrun the Barbarian",
+                ? "Ponder Stibbons"
+                : "Hrun the Barbarian",
         },
         "personal-email": {
           value:
             spin === 2
               ? "wizzard@whatsock.com"
               : spin === 1
-              ? "ponder@whatsock.com"
-              : "aarg@whatsock.com",
+                ? "ponder@whatsock.com"
+                : "aarg@whatsock.com",
         },
         "personal-city": {
           value: "Ankh-Morpork",
diff --git a/Templates/Grids/Editable/index.htm b/Templates/Grids/Editable/index.htm
index cd1a62c9..4921e00c 100644
--- a/Templates/Grids/Editable/index.htm
+++ b/Templates/Grids/Editable/index.htm
@@ -1,162 +1,254 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Editable ARIA Grid - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/extra.css">
-    <link rel="stylesheet" type="text/css" href="css/grid.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/extra.css" />
+    <link rel="stylesheet" type="text/css" href="css/grid.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Dynamic/index.htm">Dynamic</a></li>
-                        <li><a href="../Editable/index.htm" aria-current="page">Editable</a></li>
-                        <li><a href="../ReadOnly/index.htm">ReadOnly</a></li>
-                        <li><a href="../Selectable/index.htm">Selectable</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block wide--grid flex-container">
-                    <div class="component wide--grid flex-item">
-                        <h1 class="pageTitle">Editable ARIA Grid</h1>
-                        <section class="sample-block">
-
-                            <h2>
-                                <span>Student Records</span>:
-                                <span id="pTotal"></span>
-                            </h2>
-
-                            <div id="popupId" hidden></div>
-
-                            <div id="dataGridId"></div>
-
-                            <div class="h--scroll">
-
-                                <div role="region" aria-label="pagination" class="paginate clearfix" id="pgn">
-                                    <button class="paginate" id="btnFirst" title="First Page"><span aria-hidden="true">&#8656;</span></button>
-                                    <button class="paginate" id="btnPrev" title="Previous Page"><span aria-hidden="true">&#8592;</span></button>
-                                    <button class="paginate" id="btnNext" title="Next Page"><span aria-hidden="true">&#8594;</span></button>
-                                    <button class="paginate" id="btnLast" title="Last Page"><span aria-hidden="true">&#8658;</span></button>
-                                    <input title="Page" type="text" id="goTo" />
-                                    <button class="paginate" id="btnGo"><span>Go</span></button>
-                                </div>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Dynamic/index.htm">Dynamic</a></li>
+              <li>
+                <a href="../Editable/index.htm" aria-current="page">Editable</a>
+              </li>
+              <li><a href="../ReadOnly/index.htm">ReadOnly</a></li>
+              <li><a href="../Selectable/index.htm">Selectable</a></li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block wide--grid flex-container">
+            <div class="component wide--grid flex-item">
+              <h1 class="pageTitle">Editable ARIA Grid</h1>
+              <section class="sample-block">
+                <h2>
+                  <span>Student Records</span>:
+                  <span id="pTotal"></span>
+                </h2>
 
-                            </div>
+                <div id="popupId" hidden></div>
 
-                        </section>
-                    </div>
-                    <div class="keyboard wide--grid flex-item">
-                        <h2>The grid is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus to the grid and enter Applications Mode if using a screen reader like JAWS or NVDA.</li>
-                            <li>Press <kbd class="up">Up</kbd> or <kbd class="down">Down</kbd> to navigate by row. (Infinite scrolling is supported)</li>
-                            <li>Press <kbd><kbd>Control</kbd>+<kbd>Spacebar</kbd></kbd> to announce the current row when using a screen reader.</li>
-                            <li>Press <kbd><kbd>Alt</kbd>+<kbd>Up</kbd></kbd> or <kbd><kbd>Alt</kbd>+<kbd>Down</kbd></kbd> to set focus to the first or last row on the current page.</li>
-                            <li>Press <kbd class="left">Left</kbd> or <kbd class="right">Right</kbd> to navigate left or right by cell.</li>
-                            <li>Press <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to move to the first or last cell on the current row.</li>
-                            <li>Press <kbd><kbd>Control</kbd>+<kbd>Home</kbd></kbd> or <kbd><kbd>Control</kbd>+<kbd>End</kbd></kbd> to move to the first row on the first page or the last row on the last page.</li>
-                            <li>Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to open the previous or next page and set focus to the first row.</li>
-                            <li>Press Alt+PageUp or Alt+PageDown to open the first or last page and set focus to the first row.</li>
-                            <li>For mode 'Editable':
-                                <ul>
-                                    <li>Press <kbd>Enter</kbd> or <kbd>Space</kbd> to edit or toggle a cell, or click to activate using a mouse.</li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
+                <div id="dataGridId"></div>
 
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+                <div class="h--scroll">
+                  <div
+                    role="region"
+                    aria-label="pagination"
+                    class="paginate clearfix"
+                    id="pgn"
+                  >
+                    <button class="paginate" id="btnFirst" title="First Page">
+                      <span aria-hidden="true">&#8656;</span>
+                    </button>
+                    <button class="paginate" id="btnPrev" title="Previous Page">
+                      <span aria-hidden="true">&#8592;</span>
+                    </button>
+                    <button class="paginate" id="btnNext" title="Next Page">
+                      <span aria-hidden="true">&#8594;</span>
+                    </button>
+                    <button class="paginate" id="btnLast" title="Last Page">
+                      <span aria-hidden="true">&#8658;</span>
+                    </button>
+                    <input title="Page" type="text" id="goTo" />
+                    <button class="paginate" id="btnGo"><span>Go</span></button>
+                  </div>
                 </div>
+              </section>
+            </div>
+            <div class="keyboard wide--grid flex-item">
+              <h2>
+                The grid is optimized for screen reader and keyboard only users:
+              </h2>
+              <ul>
+                <li>
+                  Set focus to the grid and enter Applications Mode if using a
+                  screen reader like JAWS or NVDA.
+                </li>
+                <li>
+                  Press <kbd class="up">Up</kbd> or
+                  <kbd class="down">Down</kbd> to navigate by row. (Infinite
+                  scrolling is supported)
+                </li>
+                <li>
+                  Press <kbd><kbd>Control</kbd>+<kbd>Spacebar</kbd></kbd> to
+                  announce the current row when using a screen reader.
+                </li>
+                <li>
+                  Press <kbd><kbd>Alt</kbd>+<kbd>Up</kbd></kbd> or
+                  <kbd><kbd>Alt</kbd>+<kbd>Down</kbd></kbd> to set focus to the
+                  first or last row on the current page.
+                </li>
+                <li>
+                  Press <kbd class="left">Left</kbd> or
+                  <kbd class="right">Right</kbd> to navigate left or right by
+                  cell.
+                </li>
+                <li>
+                  Press <kbd class="home">Home</kbd> or
+                  <kbd class="end">End</kbd> to move to the first or last cell
+                  on the current row.
+                </li>
+                <li>
+                  Press <kbd><kbd>Control</kbd>+<kbd>Home</kbd></kbd> or
+                  <kbd><kbd>Control</kbd>+<kbd>End</kbd></kbd> to move to the
+                  first row on the first page or the last row on the last page.
+                </li>
+                <li>
+                  Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to open the
+                  previous or next page and set focus to the first row.
+                </li>
+                <li>
+                  Press Alt+PageUp or Alt+PageDown to open the first or last
+                  page and set focus to the first row.
+                </li>
+                <li>
+                  For mode 'Editable':
+                  <ul>
+                    <li>
+                      Press <kbd>Enter</kbd> or <kbd>Space</kbd> to edit or
+                      toggle a cell, or click to activate using a mouse.
+                    </li>
+                  </ul>
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Grids/Editable/js/setup.js b/Templates/Grids/Editable/js/setup.js
index 493d4226..85304664 100644
--- a/Templates/Grids/Editable/js/setup.js
+++ b/Templates/Grids/Editable/js/setup.js
@@ -153,16 +153,16 @@ $A.import("Grid", { defer: true }, function () {
             spin === 2
               ? "Rincewind"
               : spin === 1
-              ? "Ponder Stibbons"
-              : "Hrun the Barbarian",
+                ? "Ponder Stibbons"
+                : "Hrun the Barbarian",
         },
         "personal-email": {
           value:
             spin === 2
               ? "wizzard@whatsock.com"
               : spin === 1
-              ? "ponder@whatsock.com"
-              : "aarg@whatsock.com",
+                ? "ponder@whatsock.com"
+                : "aarg@whatsock.com",
         },
         "personal-city": {
           value: "Ankh-Morpork",
diff --git a/Templates/Grids/ReadOnly/index.htm b/Templates/Grids/ReadOnly/index.htm
index a58394ab..81c0faf4 100644
--- a/Templates/Grids/ReadOnly/index.htm
+++ b/Templates/Grids/ReadOnly/index.htm
@@ -1,163 +1,252 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ReadOnly ARIA Grid - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/extra.css">
-    <link rel="stylesheet" type="text/css" href="css/grid.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/extra.css" />
+    <link rel="stylesheet" type="text/css" href="css/grid.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Dynamic/index.htm">Dynamic</a></li>
-                        <li><a href="../Editable/index.htm">Editable</a></li>
-                        <li><a href="../ReadOnly/index.htm" aria-current="page">ReadOnly</a></li>
-                        <li><a href="../Selectable/index.htm">Selectable</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block wide--grid flex-container">
-                    <div class="component wide--grid flex-item">
-                        <h1 class="pageTitle">ReadOnly ARIA Grid</h1>
-                        <section class="sample-block">
-
-                            <h2>
-                                <span>Student Records</span>:
-                                <span id="pTotal"></span>
-                            </h2>
-
-                            <div id="popupId" hidden></div>
-
-                            <div class="modify clearfix" role="region" aria-label="modify">
-                                <button id="buv">
-                                    Programmatically update the value of row "5" field "personal-email" if passed via AJAX
-                                </button>
-                            </div>
-
-                            <div id="dataGridId"></div>
-
-                            <div class="h--scroll">
-
-                                <div role="region" aria-label="pagination" class="paginate clearfix" id="pgn">
-                                    <button class="paginate" id="btnFirst" title="First Page"><span aria-hidden="true">&#8656;</span></button>
-                                    <button class="paginate" id="btnPrev" title="Previous Page"><span aria-hidden="true">&#8592;</span></button>
-                                    <button class="paginate" id="btnNext" title="Next Page"><span aria-hidden="true">&#8594;</span></button>
-                                    <button class="paginate" id="btnLast" title="Last Page"><span aria-hidden="true">&#8658;</span></button>
-                                    <input title="Page" type="text" id="goTo" />
-                                    <button class="paginate" id="btnGo"><span>Go</span></button>
-                                </div>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Dynamic/index.htm">Dynamic</a></li>
+              <li><a href="../Editable/index.htm">Editable</a></li>
+              <li>
+                <a href="../ReadOnly/index.htm" aria-current="page">ReadOnly</a>
+              </li>
+              <li><a href="../Selectable/index.htm">Selectable</a></li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block wide--grid flex-container">
+            <div class="component wide--grid flex-item">
+              <h1 class="pageTitle">ReadOnly ARIA Grid</h1>
+              <section class="sample-block">
+                <h2>
+                  <span>Student Records</span>:
+                  <span id="pTotal"></span>
+                </h2>
 
-                            </div>
+                <div id="popupId" hidden></div>
 
-                        </section>
-                    </div>
-                    <div class="keyboard wide--grid flex-item">
-                        <h2>The grid is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus to the grid and enter Applications Mode if using a screen reader like JAWS or NVDA.</li>
-                            <li>Press <kbd class="up">Up</kbd> or <kbd class="down">Down</kbd> to navigate by row. (Infinite scrolling is supported)</li>
-                            <li>Press <kbd><kbd>Control</kbd>+<kbd>Spacebar</kbd></kbd> to announce the current row when using a screen reader.</li>
-                            <li>Press <kbd><kbd>Alt</kbd>+<kbd>Up</kbd></kbd> or <kbd><kbd>Alt</kbd>+<kbd>Down</kbd></kbd> to set focus to the first or last row on the current page.</li>
-                            <li>Press <kbd class="left">Left</kbd> or <kbd class="right">Right</kbd> to navigate left or right by cell.</li>
-                            <li>Press <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to move to the first or last cell on the current row.</li>
-                            <li>Press <kbd><kbd>Control</kbd>+<kbd>Home</kbd></kbd> or <kbd><kbd>Control</kbd>+<kbd>End</kbd></kbd> to move to the first row on the first page or the last row on the last page.</li>
-                            <li>Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to open the previous or next page and set focus to the first row.</li>
-                            <li>Press Alt+PageUp or Alt+PageDown to open the first or last page and set focus to the first row.</li>
-                        </ul>
-                    </div>
+                <div class="modify clearfix" role="region" aria-label="modify">
+                  <button id="buv">
+                    Programmatically update the value of row "5" field
+                    "personal-email" if passed via AJAX
+                  </button>
                 </div>
 
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+                <div id="dataGridId"></div>
+
+                <div class="h--scroll">
+                  <div
+                    role="region"
+                    aria-label="pagination"
+                    class="paginate clearfix"
+                    id="pgn"
+                  >
+                    <button class="paginate" id="btnFirst" title="First Page">
+                      <span aria-hidden="true">&#8656;</span>
+                    </button>
+                    <button class="paginate" id="btnPrev" title="Previous Page">
+                      <span aria-hidden="true">&#8592;</span>
+                    </button>
+                    <button class="paginate" id="btnNext" title="Next Page">
+                      <span aria-hidden="true">&#8594;</span>
+                    </button>
+                    <button class="paginate" id="btnLast" title="Last Page">
+                      <span aria-hidden="true">&#8658;</span>
+                    </button>
+                    <input title="Page" type="text" id="goTo" />
+                    <button class="paginate" id="btnGo"><span>Go</span></button>
+                  </div>
                 </div>
+              </section>
+            </div>
+            <div class="keyboard wide--grid flex-item">
+              <h2>
+                The grid is optimized for screen reader and keyboard only users:
+              </h2>
+              <ul>
+                <li>
+                  Set focus to the grid and enter Applications Mode if using a
+                  screen reader like JAWS or NVDA.
+                </li>
+                <li>
+                  Press <kbd class="up">Up</kbd> or
+                  <kbd class="down">Down</kbd> to navigate by row. (Infinite
+                  scrolling is supported)
+                </li>
+                <li>
+                  Press <kbd><kbd>Control</kbd>+<kbd>Spacebar</kbd></kbd> to
+                  announce the current row when using a screen reader.
+                </li>
+                <li>
+                  Press <kbd><kbd>Alt</kbd>+<kbd>Up</kbd></kbd> or
+                  <kbd><kbd>Alt</kbd>+<kbd>Down</kbd></kbd> to set focus to the
+                  first or last row on the current page.
+                </li>
+                <li>
+                  Press <kbd class="left">Left</kbd> or
+                  <kbd class="right">Right</kbd> to navigate left or right by
+                  cell.
+                </li>
+                <li>
+                  Press <kbd class="home">Home</kbd> or
+                  <kbd class="end">End</kbd> to move to the first or last cell
+                  on the current row.
+                </li>
+                <li>
+                  Press <kbd><kbd>Control</kbd>+<kbd>Home</kbd></kbd> or
+                  <kbd><kbd>Control</kbd>+<kbd>End</kbd></kbd> to move to the
+                  first row on the first page or the last row on the last page.
+                </li>
+                <li>
+                  Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to open the
+                  previous or next page and set focus to the first row.
+                </li>
+                <li>
+                  Press Alt+PageUp or Alt+PageDown to open the first or last
+                  page and set focus to the first row.
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Grids/ReadOnly/js/setup.js b/Templates/Grids/ReadOnly/js/setup.js
index 3ee6b049..1233003f 100644
--- a/Templates/Grids/ReadOnly/js/setup.js
+++ b/Templates/Grids/ReadOnly/js/setup.js
@@ -115,16 +115,16 @@ $A.import("Grid", { defer: true }, function () {
             spin === 2
               ? "Rincewind"
               : spin === 1
-              ? "Ponder Stibbons"
-              : "Hrun the Barbarian",
+                ? "Ponder Stibbons"
+                : "Hrun the Barbarian",
         },
         "personal-email": {
           value:
             spin === 2
               ? "wizzard@whatsock.com"
               : spin === 1
-              ? "ponder@whatsock.com"
-              : "aarg@whatsock.com",
+                ? "ponder@whatsock.com"
+                : "aarg@whatsock.com",
         },
         "personal-city": {
           value: "Ankh-Morpork",
diff --git a/Templates/Grids/Selectable/index.htm b/Templates/Grids/Selectable/index.htm
index 88f19301..27968409 100644
--- a/Templates/Grids/Selectable/index.htm
+++ b/Templates/Grids/Selectable/index.htm
@@ -1,206 +1,295 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Selectable ARIA Grid - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/extra.css">
-    <link rel="stylesheet" type="text/css" href="css/grid.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/extra.css" />
+    <link rel="stylesheet" type="text/css" href="css/grid.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Dynamic/index.htm">Dynamic</a></li>
-                        <li><a href="../Editable/index.htm">Editable</a></li>
-                        <li><a href="../ReadOnly/index.htm">ReadOnly</a></li>
-                        <li><a href="../Selectable/index.htm" aria-current="page">Selectable</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block wide--grid flex-container">
-                    <div class="component wide--grid flex-item">
-                        <h1 class="pageTitle">Selectable ARIA Grid</h1>
-                        <section class="sample-block">
-
-                            <h2>
-                                <span>Student Records</span>:
-                                <span id="pTotal"></span>
-                            </h2>
-
-                            <div id="popupId" hidden></div>
-
-                            <div class="configure clearfix" role="region" aria-label="configuration">
-                                <label for="cbms">
-                                    <input type="checkbox" id="cbms" />
-                                    Allow multiSelect
-                                </label>
-                                <label for="cbp">
-                                    <input type="checkbox" id="cbp" />
-                                    Preserve row selection across pages
-                                </label>
-                                <label for="cbd">
-                                    <input type="checkbox" id="cbd" />
-                                    Allow delete of selected rows
-                                </label>
-                            </div>
-
-                            <div class="modify clearfix" role="region" aria-label="modify">
-                                <button id="bsa">
-                                    Select All
-                                </button>
-                                <button id="bua">
-                                    Unselect All
-                                </button>
-                                <button id="bs246">
-                                    Select row 2, 4, and 6 on page 1
-                                </button>
-                                <button id="bgs">
-                                    Get Selected
-                                </button>
-                                <button id="bd" disabled="disabled">
-                                    Delete Selected
-                                </button>
-                                <button id="bda" disabled="disabled">
-                                    Delete All
-                                </button>
-                                <button id="bc">
-                                    Close Grid
-                                </button>
-                                <button id="bo">
-                                    Open Grid
-                                </button>
-                            </div>
-
-                            <div id="dataGridId"></div>
-
-                            <div class="h--scroll">
-
-                                <div role="region" aria-label="pagination" class="paginate clearfix" id="pgn">
-                                    <button class="paginate" id="btnFirst" title="First Page"><span aria-hidden="true">&#8656;</span></button>
-                                    <button class="paginate" id="btnPrev" title="Previous Page"><span aria-hidden="true">&#8592;</span></button>
-                                    <button class="paginate" id="btnNext" title="Next Page"><span aria-hidden="true">&#8594;</span></button>
-                                    <button class="paginate" id="btnLast" title="Last Page"><span aria-hidden="true">&#8658;</span></button>
-                                    <input title="Page" type="text" id="goTo" />
-                                    <button class="paginate" id="btnGo"><span>Go</span></button>
-                                </div>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Dynamic/index.htm">Dynamic</a></li>
+              <li><a href="../Editable/index.htm">Editable</a></li>
+              <li><a href="../ReadOnly/index.htm">ReadOnly</a></li>
+              <li>
+                <a href="../Selectable/index.htm" aria-current="page"
+                  >Selectable</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block wide--grid flex-container">
+            <div class="component wide--grid flex-item">
+              <h1 class="pageTitle">Selectable ARIA Grid</h1>
+              <section class="sample-block">
+                <h2>
+                  <span>Student Records</span>:
+                  <span id="pTotal"></span>
+                </h2>
 
-                            </div>
+                <div id="popupId" hidden></div>
 
-                        </section>
-                    </div>
-                    <div class="keyboard wide--grid flex-item">
-                        <h2>The grid is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus to the grid and enter Applications Mode if using a screen reader like JAWS or NVDA.</li>
-                            <li>Press <kbd class="up">Up</kbd> or <kbd class="down">Down</kbd> to navigate by row. (Infinite scrolling is supported)</li>
-                            <li>Press <kbd><kbd>Control</kbd>+<kbd>Spacebar</kbd></kbd> to announce the current row when using a screen reader.</li>
-                            <li>Press <kbd><kbd>Alt</kbd>+<kbd>Up</kbd></kbd> or <kbd><kbd>Alt</kbd>+<kbd>Down</kbd></kbd> to set focus to the first or last row on the current page.</li>
-                            <li>Press <kbd class="left">Left</kbd> or <kbd class="right">Right</kbd> to navigate left or right by cell.</li>
-                            <li>Press <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to move to the first or last cell on the current row.</li>
-                            <li>Press <kbd><kbd>Control</kbd>+<kbd>Home</kbd></kbd> or <kbd><kbd>Control</kbd>+<kbd>End</kbd></kbd> to move to the first row on the first page or the last row on the last page.</li>
-                            <li>Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to open the previous or next page and set focus to the first row.</li>
-                            <li>Press Alt+PageUp or Alt+PageDown to open the first or last page and set focus to the first row.</li>
-                            <li>For mode 'Selectable':
-                                <ul>
-                                    <li>Press <kbd>Space</kbd> to toggle row selection, or click to activate using a mouse.</li>
-                                    <li>If multiSelect is enabled, press <kbd><kbd>Control</kbd>+<kbd>A</kbd></kbd> to select all rows on the current page.</li>
-                                    <li>If Delete is enabled, press <kbd>Delete</kbd> to remove all selected rows.</li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </div>
+                <div
+                  class="configure clearfix"
+                  role="region"
+                  aria-label="configuration"
+                >
+                  <label for="cbms">
+                    <input type="checkbox" id="cbms" />
+                    Allow multiSelect
+                  </label>
+                  <label for="cbp">
+                    <input type="checkbox" id="cbp" />
+                    Preserve row selection across pages
+                  </label>
+                  <label for="cbd">
+                    <input type="checkbox" id="cbd" />
+                    Allow delete of selected rows
+                  </label>
                 </div>
 
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
+                <div class="modify clearfix" role="region" aria-label="modify">
+                  <button id="bsa">Select All</button>
+                  <button id="bua">Unselect All</button>
+                  <button id="bs246">Select row 2, 4, and 6 on page 1</button>
+                  <button id="bgs">Get Selected</button>
+                  <button id="bd" disabled="disabled">Delete Selected</button>
+                  <button id="bda" disabled="disabled">Delete All</button>
+                  <button id="bc">Close Grid</button>
+                  <button id="bo">Open Grid</button>
                 </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+
+                <div id="dataGridId"></div>
+
+                <div class="h--scroll">
+                  <div
+                    role="region"
+                    aria-label="pagination"
+                    class="paginate clearfix"
+                    id="pgn"
+                  >
+                    <button class="paginate" id="btnFirst" title="First Page">
+                      <span aria-hidden="true">&#8656;</span>
+                    </button>
+                    <button class="paginate" id="btnPrev" title="Previous Page">
+                      <span aria-hidden="true">&#8592;</span>
+                    </button>
+                    <button class="paginate" id="btnNext" title="Next Page">
+                      <span aria-hidden="true">&#8594;</span>
+                    </button>
+                    <button class="paginate" id="btnLast" title="Last Page">
+                      <span aria-hidden="true">&#8658;</span>
+                    </button>
+                    <input title="Page" type="text" id="goTo" />
+                    <button class="paginate" id="btnGo"><span>Go</span></button>
+                  </div>
                 </div>
+              </section>
+            </div>
+            <div class="keyboard wide--grid flex-item">
+              <h2>
+                The grid is optimized for screen reader and keyboard only users:
+              </h2>
+              <ul>
+                <li>
+                  Set focus to the grid and enter Applications Mode if using a
+                  screen reader like JAWS or NVDA.
+                </li>
+                <li>
+                  Press <kbd class="up">Up</kbd> or
+                  <kbd class="down">Down</kbd> to navigate by row. (Infinite
+                  scrolling is supported)
+                </li>
+                <li>
+                  Press <kbd><kbd>Control</kbd>+<kbd>Spacebar</kbd></kbd> to
+                  announce the current row when using a screen reader.
+                </li>
+                <li>
+                  Press <kbd><kbd>Alt</kbd>+<kbd>Up</kbd></kbd> or
+                  <kbd><kbd>Alt</kbd>+<kbd>Down</kbd></kbd> to set focus to the
+                  first or last row on the current page.
+                </li>
+                <li>
+                  Press <kbd class="left">Left</kbd> or
+                  <kbd class="right">Right</kbd> to navigate left or right by
+                  cell.
+                </li>
+                <li>
+                  Press <kbd class="home">Home</kbd> or
+                  <kbd class="end">End</kbd> to move to the first or last cell
+                  on the current row.
+                </li>
+                <li>
+                  Press <kbd><kbd>Control</kbd>+<kbd>Home</kbd></kbd> or
+                  <kbd><kbd>Control</kbd>+<kbd>End</kbd></kbd> to move to the
+                  first row on the first page or the last row on the last page.
+                </li>
+                <li>
+                  Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to open the
+                  previous or next page and set focus to the first row.
+                </li>
+                <li>
+                  Press Alt+PageUp or Alt+PageDown to open the first or last
+                  page and set focus to the first row.
+                </li>
+                <li>
+                  For mode 'Selectable':
+                  <ul>
+                    <li>
+                      Press <kbd>Space</kbd> to toggle row selection, or click
+                      to activate using a mouse.
+                    </li>
+                    <li>
+                      If multiSelect is enabled, press
+                      <kbd><kbd>Control</kbd>+<kbd>A</kbd></kbd> to select all
+                      rows on the current page.
+                    </li>
+                    <li>
+                      If Delete is enabled, press <kbd>Delete</kbd> to remove
+                      all selected rows.
+                    </li>
+                  </ul>
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Grids/Selectable/js/setup.js b/Templates/Grids/Selectable/js/setup.js
index 54c35423..c8a3b4db 100644
--- a/Templates/Grids/Selectable/js/setup.js
+++ b/Templates/Grids/Selectable/js/setup.js
@@ -138,16 +138,16 @@ $A.import("Grid", { defer: true }, function () {
             spin === 2
               ? "Rincewind"
               : spin === 1
-              ? "Ponder Stibbons"
-              : "Hrun the Barbarian",
+                ? "Ponder Stibbons"
+                : "Hrun the Barbarian",
         },
         "personal-email": {
           value:
             spin === 2
               ? "wizzard@whatsock.com"
               : spin === 1
-              ? "ponder@whatsock.com"
-              : "aarg@whatsock.com",
+                ? "ponder@whatsock.com"
+                : "aarg@whatsock.com",
         },
         "personal-city": {
           value: "Ankh-Morpork",
diff --git a/Templates/Grids/index.htm b/Templates/Grids/index.htm
index 75fb5a00..6da33cf1 100644
--- a/Templates/Grids/index.htm
+++ b/Templates/Grids/index.htm
@@ -1,87 +1,123 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Grids - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Grids</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="Dynamic/index.htm">Dynamic</a></li>
+              <li><a href="Editable/index.htm">Editable</a></li>
+              <li><a href="ReadOnly/index.htm">ReadOnly</a></li>
+              <li><a href="Selectable/index.htm">Selectable</a></li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              An ARIA grid should have only one tab stop, the arrow keys should
+              move focus between each cell, Home and End should move focus to
+              the beginning or end of a row, PageUp and PageDown should open the
+              previous or next page of the grid, Ctrl+Home and Ctrl+End should
+              move focus to the first or last page in the grid, and Space or
+              Enter should activate the current cell or row.
+            </p>
+
+            <p>
+              The 4X ARIA Grid module automatically configures all required ARIA
+              attributes and focus handling, in strict accordance with the ARIA
+              specification.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the Grid
+              module:
+            </p>
+
+            <ul>
+              <li>role=grid/rowgroup/row/gridcell/columnheader/rowheader</li>
+              <li>aria-multiselectable</li>
+              <li>aria-selected</li>
+              <li>aria-readonly</li>
+              <li>tabindex</li>
+            </ul>
+
+            <h2>HTML syntax</h2>
+
+            <div>
+              <pre><code class="language-markup">&lt;div id="dataGridId">&lt;/div></code></pre>
             </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Grids</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="Dynamic/index.htm">Dynamic</a></li>
-                        <li><a href="Editable/index.htm">Editable</a></li>
-                        <li><a href="ReadOnly/index.htm">ReadOnly</a></li>
-                        <li><a href="Selectable/index.htm">Selectable</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>An ARIA grid should have only one tab stop, the arrow keys should move focus between each cell, Home and End should move focus to the beginning or end of a row, PageUp and PageDown should open the previous or next page of the grid, Ctrl+Home and Ctrl+End should move focus to the first or last page in the grid, and Space or Enter should activate the current cell or row.</p>
-
-                    <p>The 4X ARIA Grid module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <p>The following attributes are handled automatically by the Grid module:</p>
-
-                    <ul>
-                        <li> role=grid/rowgroup/row/gridcell/columnheader/rowheader</li>
-                        <li> aria-multiselectable</li>
-                        <li> aria-selected</li>
-                        <li> aria-readonly</li>
-                        <li> tabindex</li>
-                    </ul>
 
-                    <h2>HTML syntax</h2>
+            <h2>JavaScript syntax</h2>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;div id="dataGridId">&lt;/div></code></pre>
-                    </div>
-
-                    <h2>JavaScript syntax</h2>
-
-                    <div>
-                        <pre><code class="language-javascript">var grid = new $A.Grid("dataGridId");
+            <div>
+              <pre><code class="language-javascript">var grid = new $A.Grid("dataGridId");
 
 // Configure settings here prior to invocation
 
 // Then invoke the Grid for auto-rendering when interacted with.
 
 grid.open();</code></pre>
-                    </div>
+            </div>
+
+            <ul>
+              <li>Module file: Grid.js</li>
+              <li>Has no dependencies.</li>
+            </ul>
 
-                    <h2>Parameters</h2>
+            <h2>Parameters</h2>
 
-                    <ol>
-                        <li>An id reference pointing to the grid container element.</li>
-                    </ol>
+            <ol>
+              <li>An id reference pointing to the grid container element.</li>
+            </ol>
 
-                    <h3>Programmatic Control</h3>
+            <h3>Programmatic Control</h3>
 
-                    <div>
-                        <pre><code class="language-javascript">// Set the registered columns including unique IDs and label text
+            <div>
+              <pre><code class="language-javascript">// Set the registered columns including unique IDs and label text
 // The order of items in the array will dictate the default column ordering when rendered
 
 grid.mapColumnNames([
@@ -477,67 +513,96 @@ <h3>Programmatic Control</h3>
 
 // Access the container DOM node
 var myContainer = grid.container;</code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Listboxes/Checkable/index.htm b/Templates/Listboxes/Checkable/index.htm
index ed3d4e34..49778156 100644
--- a/Templates/Listboxes/Checkable/index.htm
+++ b/Templates/Listboxes/Checkable/index.htm
@@ -1,168 +1,272 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Checkable ARIA Listbox - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/listbox.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/listbox.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Checkable/index.htm" aria-current="page">Checkable</a></li>
-                        <li><a href="../Multiselect/index.htm">Multiselect</a></li>
-                        <li><a href="../Sortable/index.htm">Sortable</a></li>
-                        <li><a href="../Standard/index.htm">Standard</a></li>
-                        <li><a href="../Standard%20-%20Straylight/index.htm">Standard - Straylight</a></li>
-                        <li><a href="../Standard%20(External)/index.htm">Standard (External)</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Listbox <small>(Checkable)</small></h1>
-                        <div class="sample">
-
-                            <!--
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../Checkable/index.htm" aria-current="page"
+                  >Checkable</a
+                >
+              </li>
+              <li><a href="../Multiselect/index.htm">Multiselect</a></li>
+              <li><a href="../Sortable/index.htm">Sortable</a></li>
+              <li><a href="../Standard/index.htm">Standard</a></li>
+              <li>
+                <a href="../Standard%20-%20Straylight/index.htm"
+                  >Standard - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Standard%20(External)/index.htm"
+                  >Standard (External)</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">ARIA Listbox <small>(Checkable)</small></h1>
+              <div class="sample">
+                <!--
 If the checkable property is not set to true within the setup script,
 use the check attribute to specify individual options that should be made checkable.
 -->
 
-                            <ul id="listboxId" class="aria-listbox">
-                                <li>
-                                    <button class="option" data-check="true" data-controls="test1id">
-                                        <span class="lbl">One</span>
-                                    </button>
-                                    <input checked hidden type="checkbox" name="test1" id="test1id" value="One" />
-                                </li>
-                                <li>
-                                    <button class="option" data-check data-controls="test2id">
-                                        <span class="lbl">Two</span>
-                                    </button>
-                                    <input hidden type="checkbox" name="test2" id="test2id" value="Two" />
-                                </li>
-                                <li>
-                                    <button class="option" data-check data-controls="test3id">
-                                        <span class="lbl">Three</span>
-                                    </button>
-                                    <input hidden type="checkbox" name="test3" id="test3id" value="Three" />
-                                </li>
-                                <li>
-                                    <button class="option" data-check data-controls="test4id">
-                                        <span class="lbl">Four</span>
-                                    </button>
-                                    <input hidden type="checkbox" name="test4" id="test4id" value="Four" />
-                                </li>
-                                <li>
-                                    <button class="option" data-check data-controls="test5id">
-                                        <span class="lbl">Five</span>
-                                    </button>
-                                    <input hidden type="checkbox" name="test5" id="test5id" value="Five" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    note <div class="keyboard flex-item">
-                        <h2>The Listbox is keyboard accessible:</h2>
-                        <ul>
-                            <li>Set focus on the Listbox.</li>
-                            <li>Press the Arrow keys to change options, or press <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to jump to the beginning or end of the list.</li>
-                            <li>Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to jump backward or forward incrementally.</li>
-                            <li>Press any letter or number to jump to an item starting with that character or digit.</li>
-                            <li>Press the <kbd>Spacebar</kbd> to toggle the independant checked state of the focused option.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+                <ul id="listboxId" class="aria-listbox">
+                  <li>
+                    <button
+                      class="option"
+                      data-check="true"
+                      data-controls="test1id"
+                    >
+                      <span class="lbl">One</span>
+                    </button>
+                    <input
+                      checked
+                      hidden
+                      type="checkbox"
+                      name="test1"
+                      id="test1id"
+                      value="One"
+                    />
+                  </li>
+                  <li>
+                    <button class="option" data-check data-controls="test2id">
+                      <span class="lbl">Two</span>
+                    </button>
+                    <input
+                      hidden
+                      type="checkbox"
+                      name="test2"
+                      id="test2id"
+                      value="Two"
+                    />
+                  </li>
+                  <li>
+                    <button class="option" data-check data-controls="test3id">
+                      <span class="lbl">Three</span>
+                    </button>
+                    <input
+                      hidden
+                      type="checkbox"
+                      name="test3"
+                      id="test3id"
+                      value="Three"
+                    />
+                  </li>
+                  <li>
+                    <button class="option" data-check data-controls="test4id">
+                      <span class="lbl">Four</span>
+                    </button>
+                    <input
+                      hidden
+                      type="checkbox"
+                      name="test4"
+                      id="test4id"
+                      value="Four"
+                    />
+                  </li>
+                  <li>
+                    <button class="option" data-check data-controls="test5id">
+                      <span class="lbl">Five</span>
+                    </button>
+                    <input
+                      hidden
+                      type="checkbox"
+                      name="test5"
+                      id="test5id"
+                      value="Five"
+                    />
+                  </li>
+                </ul>
+              </div>
             </div>
-        </footer>
+            note
+            <div class="keyboard flex-item">
+              <h2>The Listbox is keyboard accessible:</h2>
+              <ul>
+                <li>Set focus on the Listbox.</li>
+                <li>
+                  Press the Arrow keys to change options, or press
+                  <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to
+                  jump to the beginning or end of the list.
+                </li>
+                <li>
+                  Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to jump
+                  backward or forward incrementally.
+                </li>
+                <li>
+                  Press any letter or number to jump to an item starting with
+                  that character or digit.
+                </li>
+                <li>
+                  Press the <kbd>Spacebar</kbd> to toggle the independant
+                  checked state of the focused option.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Listboxes/Multiselect/index.htm b/Templates/Listboxes/Multiselect/index.htm
index b3e1fdae..a14fcebf 100644
--- a/Templates/Listboxes/Multiselect/index.htm
+++ b/Templates/Listboxes/Multiselect/index.htm
@@ -1,155 +1,229 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Multiselect ARIA Listbox - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/listbox.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/listbox.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Checkable/index.htm">Checkable</a></li>
-                        <li><a href="index.htm" aria-current="page">Multiselect</a></li>
-                        <li><a href="../Sortable/index.htm">Sortable</a></li>
-                        <li><a href="../Standard/index.htm">Standard</a></li>
-                        <li><a href="../Standard%20-%20Straylight/index.htm">Standard - Straylight</a></li>
-                        <li><a href="../Standard%20(External)/index.htm">Standard (External)</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle" id="multiselectLbl1">ARIA Listbox <small>(Multiselect)</small></h1>
-
-
-                        <div class="sample">
-
-                            <div class="multiselectWrapper">
-                                <ul id="listboxId" class="aria-listbox"></ul>
-                            </div>
-
-                            <div class="selectLabel">
-                                <label for="standardSelectId">Multiselect field</label>
-                                <select multiple size="5" id="standardSelectId" name="stuff">
-                                    <option value="multiselectOpt1">Apple</option>
-                                    <option value="multiselectOpt2">Grape</option>
-                                    <option value="multiselectOpt3">Banana</option>
-                                    <option value="multiselectOpt4">Orange</option>
-                                    <option value="multiselectOpt5">Shoe</option>
-                                </select>
-                            </div>
-
-                        </div>
-
-                        <div class="note">
-                            <p>The ARIA Multiselect Listbox and standard Select element mirror each other.</p>
-                        </div>
-
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The Listbox is keyboard accessible:</h2>
-                        <ul>
-                            <li>Set focus on the Listbox or the Select field.</li>
-                            <li>Press the Arrow keys to change options, or press <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to jump to the beginning or end of the list.</li>
-                            <li>Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to jump backward or forward incrementally.</li>
-                            <li>Press any letter or number to jump to an item starting with that character or digit.</li>
-                            <li>Press the <kbd>Spacebar</kbd> to toggle checkability on the ARIA Listbox.</li>
-                            <li>In IE, press <kbd>Shift</kbd>+<kbd>F8</kbd> on the standard Select field to select non-contiguous items using the <kbd>Spacebar</kbd>.</li>
-                            <li>in Firefox, hold down the <kbd>Control</kbd> key and use the Arrows on the standard Select field to select non-contiguous items using the Spacebar.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Checkable/index.htm">Checkable</a></li>
+              <li><a href="index.htm" aria-current="page">Multiselect</a></li>
+              <li><a href="../Sortable/index.htm">Sortable</a></li>
+              <li><a href="../Standard/index.htm">Standard</a></li>
+              <li>
+                <a href="../Standard%20-%20Straylight/index.htm"
+                  >Standard - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Standard%20(External)/index.htm"
+                  >Standard (External)</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle" id="multiselectLbl1">
+                ARIA Listbox <small>(Multiselect)</small>
+              </h1>
+
+              <div class="sample">
+                <div class="multiselectWrapper">
+                  <ul id="listboxId" class="aria-listbox"></ul>
                 </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+
+                <div class="selectLabel">
+                  <label for="standardSelectId">Multiselect field</label>
+                  <select multiple size="5" id="standardSelectId" name="stuff">
+                    <option value="multiselectOpt1">Apple</option>
+                    <option value="multiselectOpt2">Grape</option>
+                    <option value="multiselectOpt3">Banana</option>
+                    <option value="multiselectOpt4">Orange</option>
+                    <option value="multiselectOpt5">Shoe</option>
+                  </select>
                 </div>
+              </div>
+
+              <div class="note">
+                <p>
+                  The ARIA Multiselect Listbox and standard Select element
+                  mirror each other.
+                </p>
+              </div>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>The Listbox is keyboard accessible:</h2>
+              <ul>
+                <li>Set focus on the Listbox or the Select field.</li>
+                <li>
+                  Press the Arrow keys to change options, or press
+                  <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to
+                  jump to the beginning or end of the list.
+                </li>
+                <li>
+                  Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to jump
+                  backward or forward incrementally.
+                </li>
+                <li>
+                  Press any letter or number to jump to an item starting with
+                  that character or digit.
+                </li>
+                <li>
+                  Press the <kbd>Spacebar</kbd> to toggle checkability on the
+                  ARIA Listbox.
+                </li>
+                <li>
+                  In IE, press <kbd>Shift</kbd>+<kbd>F8</kbd> on the standard
+                  Select field to select non-contiguous items using the
+                  <kbd>Spacebar</kbd>.
+                </li>
+                <li>
+                  in Firefox, hold down the <kbd>Control</kbd> key and use the
+                  Arrows on the standard Select field to select non-contiguous
+                  items using the Spacebar.
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Listboxes/Sortable/index.htm b/Templates/Listboxes/Sortable/index.htm
index ab6e0cb0..11467455 100644
--- a/Templates/Listboxes/Sortable/index.htm
+++ b/Templates/Listboxes/Sortable/index.htm
@@ -1,146 +1,239 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Sortable ARIA Listbox - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/listbox.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/listbox.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Checkable/index.htm">Checkable</a></li>
-                        <li><a href="../Multiselect/index.htm">Multiselect</a></li>
-                        <li><a href="index.htm" aria-current="page">Sortable</a></li>
-                        <li><a href="../Standard/index.htm">Standard</a></li>
-                        <li><a href="../Standard%20-%20Straylight/index.htm">Standard - Straylight</a></li>
-                        <li><a href="../Standard%20(External)/index.htm">Standard (External)</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Listbox <small> (Sortable)</small></h1>
-                        <div class="sample">
-                            <div class="sortableWrapper">
-                                <ul class="aria-listbox" id="listboxId">
-                                    <li><button class="option orange" id="sortableOptOrange"><span>Orange</span></button></li>
-                                    <li><button class="option purple" id="sortableOptPurple"><span>Purple</span></button></li>
-                                    <li><button class="option green" id="sortableOptGreen"><span>Green</span></button></li>
-                                    <li><button class="option blue" id="sortableOptBlue"><span>Blue</span></button></li>
-                                    <li><button class="option black" id="sortableOptBlack"><span>Black</span></button></li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="note">
-                            <p>The list items within the ARIA Listbox are sortable.</p>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The sortable listbox is keyboard accessible:</h2>
-                        <ul>
-                            <li>Set focus on the Listbox or the Select field.</li>
-                            <li>Press the Arrow keys to change options,
-                                or press <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to jump to the beginning or end of the list.</li>
-                            <li>Press <kbd>PageDown</kbd> or <kbd>PageUp</kbd> to jump backward or forward incrementally.</li>
-                            <li>Press any letter or number to jump to an item starting with that character or digit.</li>
-                            <li>Press the <kbd>Spacebar</kbd> to toggle grabbability on the ARIA Listbox.</li>
-                            <li>Use the Arrow keys to navigate to a new location, then use the <kbd>Spacebar</kbd> to drop the grabbed item.</li>
-                            <li>Press <kbd>Escape</kbd> to cancel a grab action without dropping.</li>
-                            <li>Mouse users can click a list item to grab it, then click another item to drop the grabbed item in that location.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Checkable/index.htm">Checkable</a></li>
+              <li><a href="../Multiselect/index.htm">Multiselect</a></li>
+              <li><a href="index.htm" aria-current="page">Sortable</a></li>
+              <li><a href="../Standard/index.htm">Standard</a></li>
+              <li>
+                <a href="../Standard%20-%20Straylight/index.htm"
+                  >Standard - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Standard%20(External)/index.htm"
+                  >Standard (External)</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">ARIA Listbox <small> (Sortable)</small></h1>
+              <div class="sample">
+                <div class="sortableWrapper">
+                  <ul class="aria-listbox" id="listboxId">
+                    <li>
+                      <button class="option orange" id="sortableOptOrange">
+                        <span>Orange</span>
+                      </button>
+                    </li>
+                    <li>
+                      <button class="option purple" id="sortableOptPurple">
+                        <span>Purple</span>
+                      </button>
+                    </li>
+                    <li>
+                      <button class="option green" id="sortableOptGreen">
+                        <span>Green</span>
+                      </button>
+                    </li>
+                    <li>
+                      <button class="option blue" id="sortableOptBlue">
+                        <span>Blue</span>
+                      </button>
+                    </li>
+                    <li>
+                      <button class="option black" id="sortableOptBlack">
+                        <span>Black</span>
+                      </button>
+                    </li>
+                  </ul>
                 </div>
+              </div>
+              <div class="note">
+                <p>The list items within the ARIA Listbox are sortable.</p>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The sortable listbox is keyboard accessible:</h2>
+              <ul>
+                <li>Set focus on the Listbox or the Select field.</li>
+                <li>
+                  Press the Arrow keys to change options, or press
+                  <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to
+                  jump to the beginning or end of the list.
+                </li>
+                <li>
+                  Press <kbd>PageDown</kbd> or <kbd>PageUp</kbd> to jump
+                  backward or forward incrementally.
+                </li>
+                <li>
+                  Press any letter or number to jump to an item starting with
+                  that character or digit.
+                </li>
+                <li>
+                  Press the <kbd>Spacebar</kbd> to toggle grabbability on the
+                  ARIA Listbox.
+                </li>
+                <li>
+                  Use the Arrow keys to navigate to a new location, then use the
+                  <kbd>Spacebar</kbd> to drop the grabbed item.
+                </li>
+                <li>
+                  Press <kbd>Escape</kbd> to cancel a grab action without
+                  dropping.
+                </li>
+                <li>
+                  Mouse users can click a list item to grab it, then click
+                  another item to drop the grabbed item in that location.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Listboxes/Standard (External)/files/listbox.htm b/Templates/Listboxes/Standard (External)/files/listbox.htm
index 448d5830..d6fd7fde 100644
--- a/Templates/Listboxes/Standard (External)/files/listbox.htm	
+++ b/Templates/Listboxes/Standard (External)/files/listbox.htm	
@@ -1,15 +1,11 @@
 <html>
-
-<body>
-
+  <body>
     <select hidden title="Choose one or the other" id="standardSelectId">
-        <option value="standardOpt1">One</option>
-        <option value="standardOpt2">Two</option>
-        <option value="standardOpt3">Three</option>
-        <option value="standardOpt4">Four</option>
-        <option value="standardOpt5">Five</option>
+      <option value="standardOpt1">One</option>
+      <option value="standardOpt2">Two</option>
+      <option value="standardOpt3">Three</option>
+      <option value="standardOpt4">Four</option>
+      <option value="standardOpt5">Five</option>
     </select>
-
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/Listboxes/Standard (External)/index.htm b/Templates/Listboxes/Standard (External)/index.htm
index 0c301577..d36e63e5 100644
--- a/Templates/Listboxes/Standard (External)/index.htm	
+++ b/Templates/Listboxes/Standard (External)/index.htm	
@@ -1,133 +1,202 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Standard ARIA Listbox (External) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/listbox.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Standard ARIA Listbox (External) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/listbox.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Checkable/index.htm">Checkable</a></li>
+              <li><a href="../Multiselect/index.htm">Multiselect</a></li>
+              <li><a href="../Sortable/index.htm">Sortable</a></li>
+              <li><a href="../Standard/index.htm">Standard</a></li>
+              <li>
+                <a href="../Standard%20-%20Straylight/index.htm"
+                  >Standard - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Standard%20(External)/index.htm" aria-current="page"
+                  >Standard (External)</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Listbox <small>(Standard External)</small>
+              </h1>
+              <div class="sample">
+                <div class="standardWrapper listbox-root"></div>
+              </div>
+              <div class="note">
+                <p>
+                  The ARIA Listbox and standard Select element mirror each
+                  other.
+                </p>
+              </div>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Checkable/index.htm">Checkable</a></li>
-                        <li><a href="../Multiselect/index.htm">Multiselect</a></li>
-                        <li><a href="../Sortable/index.htm">Sortable</a></li>
-                        <li><a href="../Standard/index.htm">Standard</a></li>
-                        <li><a href="../Standard%20-%20Straylight/index.htm">Standard - Straylight</a></li>
-                        <li><a href="../Standard%20(External)/index.htm" aria-current="page">Standard (External)</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>The Listbox is keyboard accessible:</h2>
+              <ul>
+                <li>Set focus on the Listbox.</li>
+                <li>
+                  Press the Arrow keys to change options, or press
+                  <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to
+                  jump to the beginning or end of the list.
+                </li>
+                <li>
+                  Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to jump
+                  backward or forward incrementally.
+                </li>
+                <li>
+                  Press any letter or number to jump to an item starting with
+                  that character or digit.
+                </li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Listbox <small>(Standard External)</small></h1>
-                        <div class="sample">
-                            <div class="standardWrapper listbox-root"></div>
-                        </div>
-                        <div class="note">
-                            <p>The ARIA Listbox and standard Select element mirror each other.</p>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The Listbox is keyboard accessible:</h2>
-                        <ul>
-                            <li>Set focus on the Listbox.</li>
-                            <li>Press the Arrow keys to change options, or press <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to jump to the beginning or end of the list.</li>
-                            <li>Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to jump backward or forward incrementally.</li>
-                            <li>Press any letter or number to jump to an item starting with that character or digit.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Listboxes/Standard - Straylight/index.htm b/Templates/Listboxes/Standard - Straylight/index.htm
index bdc82de8..e082fdfc 100644
--- a/Templates/Listboxes/Standard - Straylight/index.htm	
+++ b/Templates/Listboxes/Standard - Straylight/index.htm	
@@ -1,140 +1,217 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Standard ARIA Listbox (Straylight Internal Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/listbox.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Standard ARIA Listbox (Straylight Internal Content) - Apex 4X Technical
+      Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/listbox.css" />
     <script src="/4X/4X.js#Straylight"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Checkable/index.htm">Checkable</a></li>
-                        <li><a href="../Multiselect/index.htm">Multiselect</a></li>
-                        <li><a href="../Sortable/index.htm">Sortable</a></li>
-                        <li><a href="../Standard/index.htm">Standard</a></li>
-                        <li><a href="../Standard%20-%20Straylight/index.htm" aria-current="page">Standard - Straylight</a></li>
-                        <li><a href="../Standard%20(External)/index.htm">Standard (External)</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Listbox <small>(Straylight Internal Content)</small></h1>
-                        <div class="sample">
-                            <div class="standardWrapper">
-                                <select hidden title="Choose one or the other" id="standardSelectId" class="aria-listbox-root">
-                                    <option value="standardOpt1">One</option>
-                                    <option value="standardOpt2">Two</option>
-                                    <option value="standardOpt3">Three</option>
-                                    <option value="standardOpt4">Four</option>
-                                    <option value="standardOpt5">Five</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="note">
-                            <p>The ARIA Listbox and standard Select element mirror each other.</p>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The Listbox is keyboard accessible:</h2>
-                        <ul>
-                            <li>Set focus on the Listbox.</li>
-                            <li>Press the Arrow keys to change options, or press <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to jump to the beginning or end of the list.</li>
-                            <li>Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to jump backward or forward incrementally.</li>
-                            <li>Press any letter or number to jump to an item starting with that character or digit.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Checkable/index.htm">Checkable</a></li>
+              <li><a href="../Multiselect/index.htm">Multiselect</a></li>
+              <li><a href="../Sortable/index.htm">Sortable</a></li>
+              <li><a href="../Standard/index.htm">Standard</a></li>
+              <li>
+                <a
+                  href="../Standard%20-%20Straylight/index.htm"
+                  aria-current="page"
+                  >Standard - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Standard%20(External)/index.htm"
+                  >Standard (External)</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                ARIA Listbox <small>(Straylight Internal Content)</small>
+              </h1>
+              <div class="sample">
+                <div class="standardWrapper">
+                  <select
+                    hidden
+                    title="Choose one or the other"
+                    id="standardSelectId"
+                    class="aria-listbox-root"
+                  >
+                    <option value="standardOpt1">One</option>
+                    <option value="standardOpt2">Two</option>
+                    <option value="standardOpt3">Three</option>
+                    <option value="standardOpt4">Four</option>
+                    <option value="standardOpt5">Five</option>
+                  </select>
                 </div>
+              </div>
+              <div class="note">
+                <p>
+                  The ARIA Listbox and standard Select element mirror each
+                  other.
+                </p>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The Listbox is keyboard accessible:</h2>
+              <ul>
+                <li>Set focus on the Listbox.</li>
+                <li>
+                  Press the Arrow keys to change options, or press
+                  <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to
+                  jump to the beginning or end of the list.
+                </li>
+                <li>
+                  Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to jump
+                  backward or forward incrementally.
+                </li>
+                <li>
+                  Press any letter or number to jump to an item starting with
+                  that character or digit.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Listboxes/Standard/index.htm b/Templates/Listboxes/Standard/index.htm
index 4b7c7ac7..d9a62379 100644
--- a/Templates/Listboxes/Standard/index.htm
+++ b/Templates/Listboxes/Standard/index.htm
@@ -1,141 +1,212 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Standard ARIA Listbox - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/listbox.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/listbox.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Checkable/index.htm">Checkable</a></li>
-                        <li><a href="../Multiselect/index.htm">Multiselect</a></li>
-                        <li><a href="../Sortable/index.htm">Sortable</a></li>
-                        <li><a href="../Standard/index.htm" aria-current="page">Standard</a></li>
-                        <li><a href="../Standard%20-%20Straylight/index.htm">Standard - Straylight</a></li>
-                        <li><a href="../Standard%20(External)/index.htm">Standard (External)</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">ARIA Listbox <small>(Standard)</small></h1>
-                        <div class="sample">
-                            <div class="standardWrapper">
-                                <select hidden title="Choose one or the other" id="standardSelectId">
-                                    <option value="standardOpt1">One</option>
-                                    <option value="standardOpt2">Two</option>
-                                    <option value="standardOpt3">Three</option>
-                                    <option value="standardOpt4">Four</option>
-                                    <option value="standardOpt5">Five</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="note">
-                            <p>The ARIA Listbox and standard Select element mirror each other.</p>
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The Listbox is keyboard accessible:</h2>
-                        <ul>
-                            <li>Set focus on the Listbox.</li>
-                            <li>Press the Arrow keys to change options, or press <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to jump to the beginning or end of the list.</li>
-                            <li>Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to jump backward or forward incrementally.</li>
-                            <li>Press any letter or number to jump to an item starting with that character or digit.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Checkable/index.htm">Checkable</a></li>
+              <li><a href="../Multiselect/index.htm">Multiselect</a></li>
+              <li><a href="../Sortable/index.htm">Sortable</a></li>
+              <li>
+                <a href="../Standard/index.htm" aria-current="page">Standard</a>
+              </li>
+              <li>
+                <a href="../Standard%20-%20Straylight/index.htm"
+                  >Standard - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Standard%20(External)/index.htm"
+                  >Standard (External)</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">ARIA Listbox <small>(Standard)</small></h1>
+              <div class="sample">
+                <div class="standardWrapper">
+                  <select
+                    hidden
+                    title="Choose one or the other"
+                    id="standardSelectId"
+                  >
+                    <option value="standardOpt1">One</option>
+                    <option value="standardOpt2">Two</option>
+                    <option value="standardOpt3">Three</option>
+                    <option value="standardOpt4">Four</option>
+                    <option value="standardOpt5">Five</option>
+                  </select>
                 </div>
+              </div>
+              <div class="note">
+                <p>
+                  The ARIA Listbox and standard Select element mirror each
+                  other.
+                </p>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>The Listbox is keyboard accessible:</h2>
+              <ul>
+                <li>Set focus on the Listbox.</li>
+                <li>
+                  Press the Arrow keys to change options, or press
+                  <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to
+                  jump to the beginning or end of the list.
+                </li>
+                <li>
+                  Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to jump
+                  backward or forward incrementally.
+                </li>
+                <li>
+                  Press any letter or number to jump to an item starting with
+                  that character or digit.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Listboxes/index.htm b/Templates/Listboxes/index.htm
index 25b250d5..fa804d0e 100644
--- a/Templates/Listboxes/index.htm
+++ b/Templates/Listboxes/index.htm
@@ -1,116 +1,174 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Listboxes - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Listboxes</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="Checkable/index.htm">Checkable</a></li>
-                        <li><a href="Multiselect/index.htm">Multiselect</a></li>
-                        <li><a href="Sortable/index.htm">Sortable</a></li>
-                        <li><a href="Standard/index.htm">Standard</a></li>
-                        <li><a href="Standard%20-%20Straylight/index.htm">Standard - Straylight</a></li>
-                        <li><a href="Standard%20(External)/index.htm">Standard (External)</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>ARIA Listboxes should only receive one tab stop, the Up/Down/Home/End keys should move focus appropriately, typing letters or numbers should jump ahead to the next matching option, and every listbox and option element should be explicitly labeled.</p>
-
-                    <p>The 4X ARIA Listbox module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <p>The following attributes are handled automatically by the Listbox module:</p>
-
-                    <ul>
-                        <li> role=listbox</li>
-                        <li> role=option</li>
-                        <li> aria-checked</li>
-                        <li> aria-multiselectable</li>
-                        <li> aria-selected</li>
-                        <li> tabindex</li>
-                    </ul>
-
-                    <p>Available attributes for listbox option elements:</p>
-
-                    <ul>
-                        <li> data-check : May be set to "false", "true", or "mixed" to set the current state of a checkable option when rendered.</li>
-                    </ul>
-
-                    <h2>HTML syntax</h2>
-
-                    <h3>Standard</h3>
-
-                    <div>
-                        <pre><code class="language-markup">&lt;ul id="listboxId">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Listboxes</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="Checkable/index.htm">Checkable</a></li>
+              <li><a href="Multiselect/index.htm">Multiselect</a></li>
+              <li><a href="Sortable/index.htm">Sortable</a></li>
+              <li><a href="Standard/index.htm">Standard</a></li>
+              <li>
+                <a href="Standard%20-%20Straylight/index.htm"
+                  >Standard - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="Standard%20(External)/index.htm"
+                  >Standard (External)</a
+                >
+              </li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              ARIA Listboxes should only receive one tab stop, the
+              Up/Down/Home/End keys should move focus appropriately, typing
+              letters or numbers should jump ahead to the next matching option,
+              and every listbox and option element should be explicitly labeled.
+            </p>
+
+            <p>
+              The 4X ARIA Listbox module automatically configures all required
+              ARIA attributes and focus handling, in strict accordance with the
+              ARIA specification.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the Listbox
+              module:
+            </p>
+
+            <ul>
+              <li>role=listbox</li>
+              <li>role=option</li>
+              <li>aria-checked</li>
+              <li>aria-multiselectable</li>
+              <li>aria-selected</li>
+              <li>tabindex</li>
+            </ul>
+
+            <p>Available attributes for listbox option elements:</p>
+
+            <ul>
+              <li>
+                data-check : May be set to "false", "true", or "mixed" to set
+                the current state of a checkable option when rendered.
+              </li>
+            </ul>
+
+            <h2>HTML syntax</h2>
+
+            <h3>Standard</h3>
+
+            <div>
+              <pre><code class="language-markup">&lt;ul id="listboxId">
   &lt;li>
     &lt;button>
       Accessible name and markup.
     &lt;/button>
   &lt;/li>
 &lt;/ul></code></pre>
-                    </div>
+            </div>
 
-                    <h3>Checkable</h3>
+            <h3>Checkable</h3>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;ul id="listboxId">
+            <div>
+              <pre><code class="language-markup">&lt;ul id="listboxId">
   &lt;li>
     &lt;button data-check="false" >
       Accessible name and markup.
     &lt;/button>
   &lt;/li>
 &lt;/ul></code></pre>
-                    </div>
-
-                    <p>IMPORTANT: The focusable active element must not include any other active elements, otherwise these will not be accessible to non-sighted screen reader users.</p>
-
-                    <p>Whenever a hidden checkbox is embedded within a checkable option control or referenced using the data-controls attribute, it will automatically reflect the toggled state of the parent element. This makes it possible to implement custom toggle controls that can be submitted in the same manner as native form controls. This, however, is optional, and may be removed without having any negative impact on the functionality of the simulated toggle control.</p>
-
-                    <h2>JavaScript syntax</h2>
+            </div>
 
-                    <div>
-                        <pre><code class="language-javascript">var myListboxDC = $A.setListbox({
+            <p>
+              IMPORTANT: The focusable active element must not include any other
+              active elements, otherwise these will not be accessible to
+              non-sighted screen reader users.
+            </p>
+
+            <p>
+              Whenever a hidden checkbox is embedded within a checkable option
+              control or referenced using the data-controls attribute, it will
+              automatically reflect the toggled state of the parent element.
+              This makes it possible to implement custom toggle controls that
+              can be submitted in the same manner as native form controls. This,
+              however, is optional, and may be removed without having any
+              negative impact on the functionality of the simulated toggle
+              control.
+            </p>
+
+            <h2>JavaScript syntax</h2>
+
+            <div>
+              <pre><code class="language-javascript">var myListboxDC = $A.setListbox({
 // Configuration key / value mappings
 });</code></pre>
-                    </div>
+            </div>
+
+            <ul>
+              <li>Module file: Listbox.js</li>
+              <li>Requires: AccName.js, RovingTabIndex.js.</li>
+            </ul>
 
-                    <h2>Parameters</h2>
+            <h2>Parameters</h2>
 
-                    <ol>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <ol>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <h3>Configuration</h3>
+            <h3>Configuration</h3>
 
-                    <div>
-                        <pre><code class="language-javascript">{
+            <div>
+              <pre><code class="language-javascript">{
 
 // Set an explicit name for the listbox.
 // Otherwise, if a select element is specified, the accessible name of the select element will be set as the listbox name instead.
@@ -207,26 +265,29 @@ <h3>Configuration</h3>
 }
 
 }</code></pre>
-                    </div>
+            </div>
 
-                    <h2>Programmatic control</h2>
+            <h2>Programmatic control</h2>
 
-                    <p>Since the Listbox control is an instantiated object, all of the following public properties and methods are available.</p>
+            <p>
+              Since the Listbox control is an instantiated object, all of the
+              following public properties and methods are available.
+            </p>
 
-                    <h3>Properties</h3>
+            <h3>Properties</h3>
 
-                    <div>
-                        <pre><code class="language-javascript">var listboxElement = myListbox.listbox; // The Listbox DOM node for the element with role="listbox"
+            <div>
+              <pre><code class="language-javascript">var listboxElement = myListbox.listbox; // The Listbox DOM node for the element with role="listbox"
 
 var optionElementsArray = myListbox.options; // The array of list option DOM nodes that contain role="option"
 
 var optionNodesArray = myListbox.optionNodes; // The array of native select option DOM nodes</code></pre>
-                    </div>
+            </div>
 
-                    <h3>Methods</h3>
+            <h3>Methods</h3>
 
-                    <div>
-                        <pre><code class="language-javascript">// Force the listbox widget to redraw itself and recompute all child options and reset all event handlers.
+            <div>
+              <pre><code class="language-javascript">// Force the listbox widget to redraw itself and recompute all child options and reset all event handlers.
 // Only applicable when a native select element is bound to the listbox.
 // This is necessary when new options are added, removed, or reordered within the bound select element to ensure proper keyboard accessibility.
 myListbox.update();
@@ -236,67 +297,96 @@ <h3>Methods</h3>
 // Otherwise, if there is a bound select element, the value of the select element will be returned.
 // Otherwise, all selected option elements will be returned.
 var listboxValue = myListbox.value();</code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Menus/External - Straylight/files/menus.htm b/Templates/Menus/External - Straylight/files/menus.htm
index 211749c1..79c53aab 100644
--- a/Templates/Menus/External - Straylight/files/menus.htm	
+++ b/Templates/Menus/External - Straylight/files/menus.htm	
@@ -1,48 +1,82 @@
 <html>
-
-<body>
-
+  <body>
     <ul hidden class="top menu" id="settings-menu">
-        <li><a href="#" class="has-submenu">Profile</a>
+      <li>
+        <a href="#" class="has-submenu">Profile</a>
+        <ul hidden class="menu">
+          <li>
+            <a href="#" class="has-submenu">Personal</a>
             <ul hidden class="menu">
-                <li><a href="#" class="has-submenu">Personal</a>
-                    <ul hidden class="menu">
-                        <li><a href="#" class="link" id="personal-name">Name</a></li>
-                        <li><a href="#" class="link" id="personal-interests">Interests</a></li>
-                        <li><a href="#" class="link" id="personal-education">Education</a></li>
-                    </ul>
-                </li>
-                <li><a href="#" class="has-submenu">Business</a>
-                    <ul hidden class="menu">
-                        <li><a href="#" class="link" id="business-name">Name</a></li>
-                        <li><a href="#" class="link" id="business-contact">Contact</a></li>
-                    </ul>
-                </li>
+              <li><a href="#" class="link" id="personal-name">Name</a></li>
+              <li>
+                <a href="#" class="link" id="personal-interests">Interests</a>
+              </li>
+              <li>
+                <a href="#" class="link" id="personal-education">Education</a>
+              </li>
             </ul>
-        </li>
-        <li><a href="#" class="has-submenu">Checkable Options</a>
+          </li>
+          <li>
+            <a href="#" class="has-submenu">Business</a>
             <ul hidden class="menu">
-                <li><a data-check href="#" class="link" id="settings-editor">Editor</a></li>
-                <li><a data-check="true" href="#" class="link" id="settings-cookies">Cookies</a></li>
-                <li><a data-check="mixed" href="#" class="link" id="settings-toolbar">Toolbar</a></li>
+              <li><a href="#" class="link" id="business-name">Name</a></li>
+              <li>
+                <a href="#" class="link" id="business-contact">Contact</a>
+              </li>
             </ul>
-        </li>
-        <li><a href="#" class="has-submenu">Radio Options</a>
-            <ul hidden class="menu">
-                <li><a data-radio href="#" class="link" id="account-username">Username</a></li>
-                <li><a data-radio="true" href="#" class="link" id="account-password">Password</a></li>
-            </ul>
-        </li>
-        <li><a aria-disabled="true" title="Disabled" href="#" class="has-submenu">Services</a>
-            <ul hidden class="menu">
-                <li><a href="#" class="link" id="services-campaigns">Campaigns</a></li>
-                <li><a href="#" class="link" id="services-payments">Payments</a></li>
-            </ul>
-        </li>
-        <li><a aria-disabled="true" href="#" class="link" id="properties">Properties...</a></li>
-        <li><a href="https://google.com/" class="link" id="help">Help...</a></li>
+          </li>
+        </ul>
+      </li>
+      <li>
+        <a href="#" class="has-submenu">Checkable Options</a>
+        <ul hidden class="menu">
+          <li>
+            <a data-check href="#" class="link" id="settings-editor">Editor</a>
+          </li>
+          <li>
+            <a data-check="true" href="#" class="link" id="settings-cookies"
+              >Cookies</a
+            >
+          </li>
+          <li>
+            <a data-check="mixed" href="#" class="link" id="settings-toolbar"
+              >Toolbar</a
+            >
+          </li>
+        </ul>
+      </li>
+      <li>
+        <a href="#" class="has-submenu">Radio Options</a>
+        <ul hidden class="menu">
+          <li>
+            <a data-radio href="#" class="link" id="account-username"
+              >Username</a
+            >
+          </li>
+          <li>
+            <a data-radio="true" href="#" class="link" id="account-password"
+              >Password</a
+            >
+          </li>
+        </ul>
+      </li>
+      <li>
+        <a aria-disabled="true" title="Disabled" href="#" class="has-submenu"
+          >Services</a
+        >
+        <ul hidden class="menu">
+          <li>
+            <a href="#" class="link" id="services-campaigns">Campaigns</a>
+          </li>
+          <li><a href="#" class="link" id="services-payments">Payments</a></li>
+        </ul>
+      </li>
+      <li>
+        <a aria-disabled="true" href="#" class="link" id="properties"
+          >Properties...</a
+        >
+      </li>
+      <li><a href="https://google.com/" class="link" id="help">Help...</a></li>
     </ul>
-
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/Menus/External - Straylight/index.htm b/Templates/Menus/External - Straylight/index.htm
index 7f109fe4..7e6065a8 100644
--- a/Templates/Menus/External - Straylight/index.htm	
+++ b/Templates/Menus/External - Straylight/index.htm	
@@ -1,137 +1,216 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Straylight Menu (External Content) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/menus.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/menus.css" />
     <script src="/4X/4X.js#Straylight"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm" aria-current="page"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Simulated Textbox (Right-Click)/index.htm"
+                  >Simulated Textbox (Right-Click)</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                Straylight Menu <small>External Content</small>
+              </h1>
+              <section>
+                <p>
+                  <button
+                    data-menu="files/menus.htm#settings-menu"
+                    class="aria-menu"
+                    id="menuButtonId"
+                  >
+                    Settings
+                  </button>
+                </p>
+              </section>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm" aria-current="page">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                        <li><a href="../Simulated Textbox (Right-Click)/index.htm">Simulated Textbox (Right-Click)</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>
+                The menu is optimized for screen reader and keyboard only users:
+              </h2>
+              <ul>
+                <li>Activate the triggering element using the keyboard.</li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> Arrow keys to move focus between
+                  the menu options.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> Arrow keys to open or close
+                  submenus.
+                </li>
+                <li>
+                  Press any letter or number to jump to a menu item starting
+                  with that character or digit.
+                </li>
+                <li>Press <kbd>Enter</kbd> to activate a menu option.</li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the currently open menu.
+                </li>
+                <li>
+                  Press <kbd>Tab</kbd> or set focus back on the triggering
+                  element to close the menu and all submenus.
+                </li>
+                <li>Mouse users can click the desired menu option as usual.</li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Straylight Menu <small>External Content</small></h1>
-                        <section>
-                            <p>
-
-                                <button data-menu="files/menus.htm#settings-menu" class="aria-menu" id="menuButtonId">Settings</button>
-
-                            </p>
-                        </section>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The menu is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the triggering element using the keyboard.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> Arrow keys to move focus between the menu options.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> Arrow keys to open or close submenus.</li>
-                            <li>Press any letter or number to jump to a menu item starting with that character or digit.</li>
-                            <li>Press <kbd>Enter</kbd> to activate a menu option.</li>
-                            <li>Press <kbd>Escape</kbd> to close the currently open menu.</li>
-                            <li>Press <kbd>Tab</kbd> or set focus back on the triggering element to close the menu and all submenus.</li>
-                            <li>Mouse users can click the desired menu option as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Menus/External/files/menus.htm b/Templates/Menus/External/files/menus.htm
index 211749c1..79c53aab 100644
--- a/Templates/Menus/External/files/menus.htm
+++ b/Templates/Menus/External/files/menus.htm
@@ -1,48 +1,82 @@
 <html>
-
-<body>
-
+  <body>
     <ul hidden class="top menu" id="settings-menu">
-        <li><a href="#" class="has-submenu">Profile</a>
+      <li>
+        <a href="#" class="has-submenu">Profile</a>
+        <ul hidden class="menu">
+          <li>
+            <a href="#" class="has-submenu">Personal</a>
             <ul hidden class="menu">
-                <li><a href="#" class="has-submenu">Personal</a>
-                    <ul hidden class="menu">
-                        <li><a href="#" class="link" id="personal-name">Name</a></li>
-                        <li><a href="#" class="link" id="personal-interests">Interests</a></li>
-                        <li><a href="#" class="link" id="personal-education">Education</a></li>
-                    </ul>
-                </li>
-                <li><a href="#" class="has-submenu">Business</a>
-                    <ul hidden class="menu">
-                        <li><a href="#" class="link" id="business-name">Name</a></li>
-                        <li><a href="#" class="link" id="business-contact">Contact</a></li>
-                    </ul>
-                </li>
+              <li><a href="#" class="link" id="personal-name">Name</a></li>
+              <li>
+                <a href="#" class="link" id="personal-interests">Interests</a>
+              </li>
+              <li>
+                <a href="#" class="link" id="personal-education">Education</a>
+              </li>
             </ul>
-        </li>
-        <li><a href="#" class="has-submenu">Checkable Options</a>
+          </li>
+          <li>
+            <a href="#" class="has-submenu">Business</a>
             <ul hidden class="menu">
-                <li><a data-check href="#" class="link" id="settings-editor">Editor</a></li>
-                <li><a data-check="true" href="#" class="link" id="settings-cookies">Cookies</a></li>
-                <li><a data-check="mixed" href="#" class="link" id="settings-toolbar">Toolbar</a></li>
+              <li><a href="#" class="link" id="business-name">Name</a></li>
+              <li>
+                <a href="#" class="link" id="business-contact">Contact</a>
+              </li>
             </ul>
-        </li>
-        <li><a href="#" class="has-submenu">Radio Options</a>
-            <ul hidden class="menu">
-                <li><a data-radio href="#" class="link" id="account-username">Username</a></li>
-                <li><a data-radio="true" href="#" class="link" id="account-password">Password</a></li>
-            </ul>
-        </li>
-        <li><a aria-disabled="true" title="Disabled" href="#" class="has-submenu">Services</a>
-            <ul hidden class="menu">
-                <li><a href="#" class="link" id="services-campaigns">Campaigns</a></li>
-                <li><a href="#" class="link" id="services-payments">Payments</a></li>
-            </ul>
-        </li>
-        <li><a aria-disabled="true" href="#" class="link" id="properties">Properties...</a></li>
-        <li><a href="https://google.com/" class="link" id="help">Help...</a></li>
+          </li>
+        </ul>
+      </li>
+      <li>
+        <a href="#" class="has-submenu">Checkable Options</a>
+        <ul hidden class="menu">
+          <li>
+            <a data-check href="#" class="link" id="settings-editor">Editor</a>
+          </li>
+          <li>
+            <a data-check="true" href="#" class="link" id="settings-cookies"
+              >Cookies</a
+            >
+          </li>
+          <li>
+            <a data-check="mixed" href="#" class="link" id="settings-toolbar"
+              >Toolbar</a
+            >
+          </li>
+        </ul>
+      </li>
+      <li>
+        <a href="#" class="has-submenu">Radio Options</a>
+        <ul hidden class="menu">
+          <li>
+            <a data-radio href="#" class="link" id="account-username"
+              >Username</a
+            >
+          </li>
+          <li>
+            <a data-radio="true" href="#" class="link" id="account-password"
+              >Password</a
+            >
+          </li>
+        </ul>
+      </li>
+      <li>
+        <a aria-disabled="true" title="Disabled" href="#" class="has-submenu"
+          >Services</a
+        >
+        <ul hidden class="menu">
+          <li>
+            <a href="#" class="link" id="services-campaigns">Campaigns</a>
+          </li>
+          <li><a href="#" class="link" id="services-payments">Payments</a></li>
+        </ul>
+      </li>
+      <li>
+        <a aria-disabled="true" href="#" class="link" id="properties"
+          >Properties...</a
+        >
+      </li>
+      <li><a href="https://google.com/" class="link" id="help">Help...</a></li>
     </ul>
-
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/Menus/External/index.htm b/Templates/Menus/External/index.htm
index 29addcb4..2c7cf8fc 100644
--- a/Templates/Menus/External/index.htm
+++ b/Templates/Menus/External/index.htm
@@ -1,138 +1,211 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Menu (External Content) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/menus.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/menus.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../External/index.htm" aria-current="page">External</a>
+              </li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Simulated Textbox (Right-Click)/index.htm"
+                  >Simulated Textbox (Right-Click)</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Menu <small>External Content</small></h1>
+              <section>
+                <p>
+                  <button class="aria-menu" id="menuButtonId">Settings</button>
+                </p>
+              </section>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm" aria-current="page">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                        <li><a href="../Simulated Textbox (Right-Click)/index.htm">Simulated Textbox (Right-Click)</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>
+                The menu is optimized for screen reader and keyboard only users:
+              </h2>
+              <ul>
+                <li>Activate the triggering element using the keyboard.</li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> Arrow keys to move focus between
+                  the menu options.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> Arrow keys to open or close
+                  submenus.
+                </li>
+                <li>
+                  Press any letter or number to jump to a menu item starting
+                  with that character or digit.
+                </li>
+                <li>Press <kbd>Enter</kbd> to activate a menu option.</li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the currently open menu.
+                </li>
+                <li>
+                  Press <kbd>Tab</kbd> or set focus back on the triggering
+                  element to close the menu and all submenus.
+                </li>
+                <li>Mouse users can click the desired menu option as usual.</li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Menu <small>External Content</small></h1>
-                        <section>
-                            <p>
-
-                                <button class="aria-menu" id="menuButtonId">Settings</button>
-
-                            </p>
-                        </section>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The menu is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the triggering element using the keyboard.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> Arrow keys to move focus between the menu options.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> Arrow keys to open or close submenus.</li>
-                            <li>Press any letter or number to jump to a menu item starting with that character or digit.</li>
-                            <li>Press <kbd>Enter</kbd> to activate a menu option.</li>
-                            <li>Press <kbd>Escape</kbd> to close the currently open menu.</li>
-                            <li>Press <kbd>Tab</kbd> or set focus back on the triggering element to close the menu and all submenus.</li>
-                            <li>Mouse users can click the desired menu option as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Menus/Internal - Straylight/index.htm b/Templates/Menus/Internal - Straylight/index.htm
index e440371f..b302ebbe 100644
--- a/Templates/Menus/Internal - Straylight/index.htm	
+++ b/Templates/Menus/Internal - Straylight/index.htm	
@@ -1,178 +1,340 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Straylight Menu (Internal Content) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/menus.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/menus.css" />
     <script src="/4X/4X.js#Straylight"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm" aria-current="page">Internal - Straylight</a></li>
-                        <li><a href="../Simulated Textbox (Right-Click)/index.htm">Simulated Textbox (Right-Click)</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Straylight Menu <small>Internal Content</small></h1>
-                        <section>
-                            <p>
-
-                                <button data-menu="settings-menu" class="aria-menu" id="menuButtonId">Settings</button>
-
-                                <ul hidden class="top menu" id="settings-menu">
-                                    <li><a href="#" class="has-submenu">Profile</a>
-                                        <ul hidden class="menu">
-                                            <li><a href="#" class="has-submenu">Personal</a>
-                                                <ul hidden class="menu">
-                                                    <li><a href="#" class="link" id="personal-name">Name</a></li>
-                                                    <li><a href="#" class="link" id="personal-interests">Interests</a></li>
-                                                    <li><a href="#" class="link" id="personal-education">Education</a></li>
-                                                </ul>
-                                            </li>
-                                            <li><a href="#" class="has-submenu">Business</a>
-                                                <ul hidden class="menu">
-                                                    <li><a href="#" class="link" id="business-name">Name</a></li>
-                                                    <li><a href="#" class="link" id="business-contact">Contact</a></li>
-                                                </ul>
-                                            </li>
-                                        </ul>
-                                    </li>
-                                    <li><a href="#" class="has-submenu">Checkable Options</a>
-                                        <ul hidden class="menu">
-                                            <li><a data-check href="#" class="link" id="settings-editor">Editor</a></li>
-                                            <li><a data-check="true" href="#" class="link" id="settings-cookies">Cookies</a></li>
-                                            <li><a data-check="mixed" href="#" class="link" id="settings-toolbar">Toolbar</a></li>
-                                        </ul>
-                                    </li>
-                                    <li><a href="#" class="has-submenu">Radio Options</a>
-                                        <ul hidden class="menu">
-                                            <li><a data-radio href="#" class="link" id="account-username">Username</a></li>
-                                            <li><a data-radio="true" href="#" class="link" id="account-password">Password</a></li>
-                                        </ul>
-                                    </li>
-                                    <li><a aria-disabled="true" title="Disabled" href="#" class="has-submenu">Services</a>
-                                        <ul hidden class="menu">
-                                            <li><a href="#" class="link" id="services-campaigns">Campaigns</a></li>
-                                            <li><a href="#" class="link" id="services-payments">Payments</a></li>
-                                        </ul>
-                                    </li>
-                                    <li><a aria-disabled="true" href="#" class="link" id="properties">Properties...</a></li>
-                                    <li><a href="https://google.com/" class="link" id="help">Help...</a></li>
-                                </ul>
-
-                            </p>
-                        </section>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The menu is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the triggering element using the keyboard.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> Arrow keys to move focus between the menu options.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> Arrow keys to open or close submenus.</li>
-                            <li>Press any letter or number to jump to a menu item starting with that character or digit.</li>
-                            <li>Press <kbd>Enter</kbd> to activate a menu option.</li>
-                            <li>Press <kbd>Escape</kbd> to close the currently open menu.</li>
-                            <li>Press <kbd>Tab</kbd> or set focus back on the triggering element to close the menu and all submenus.</li>
-                            <li>Mouse users can click the desired menu option as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Straylight/index.htm" aria-current="page"
+                  >Internal - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Simulated Textbox (Right-Click)/index.htm"
+                  >Simulated Textbox (Right-Click)</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                Straylight Menu <small>Internal Content</small>
+              </h1>
+              <section>
+                <p>
+                  <button
+                    data-menu="settings-menu"
+                    class="aria-menu"
+                    id="menuButtonId"
+                  >
+                    Settings
+                  </button>
+                </p>
+                <ul hidden class="top menu" id="settings-menu">
+                  <li>
+                    <a href="#" class="has-submenu">Profile</a>
+                    <ul hidden class="menu">
+                      <li>
+                        <a href="#" class="has-submenu">Personal</a>
+                        <ul hidden class="menu">
+                          <li>
+                            <a href="#" class="link" id="personal-name">Name</a>
+                          </li>
+                          <li>
+                            <a href="#" class="link" id="personal-interests"
+                              >Interests</a
+                            >
+                          </li>
+                          <li>
+                            <a href="#" class="link" id="personal-education"
+                              >Education</a
+                            >
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <a href="#" class="has-submenu">Business</a>
+                        <ul hidden class="menu">
+                          <li>
+                            <a href="#" class="link" id="business-name">Name</a>
+                          </li>
+                          <li>
+                            <a href="#" class="link" id="business-contact"
+                              >Contact</a
+                            >
+                          </li>
+                        </ul>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <a href="#" class="has-submenu">Checkable Options</a>
+                    <ul hidden class="menu">
+                      <li>
+                        <a data-check href="#" class="link" id="settings-editor"
+                          >Editor</a
+                        >
+                      </li>
+                      <li>
+                        <a
+                          data-check="true"
+                          href="#"
+                          class="link"
+                          id="settings-cookies"
+                          >Cookies</a
+                        >
+                      </li>
+                      <li>
+                        <a
+                          data-check="mixed"
+                          href="#"
+                          class="link"
+                          id="settings-toolbar"
+                          >Toolbar</a
+                        >
+                      </li>
                     </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
+                  </li>
+                  <li>
+                    <a href="#" class="has-submenu">Radio Options</a>
+                    <ul hidden class="menu">
+                      <li>
+                        <a
+                          data-radio
+                          href="#"
+                          class="link"
+                          id="account-username"
+                          >Username</a
+                        >
+                      </li>
+                      <li>
+                        <a
+                          data-radio="true"
+                          href="#"
+                          class="link"
+                          id="account-password"
+                          >Password</a
+                        >
+                      </li>
                     </ul>
-                </div>
+                  </li>
+                  <li>
+                    <a
+                      aria-disabled="true"
+                      title="Disabled"
+                      href="#"
+                      class="has-submenu"
+                      >Services</a
+                    >
+                    <ul hidden class="menu">
+                      <li>
+                        <a href="#" class="link" id="services-campaigns"
+                          >Campaigns</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="link" id="services-payments"
+                          >Payments</a
+                        >
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <a
+                      aria-disabled="true"
+                      href="#"
+                      class="link"
+                      id="properties"
+                      >Properties...</a
+                    >
+                  </li>
+                  <li>
+                    <a href="https://google.com/" class="link" id="help"
+                      >Help...</a
+                    >
+                  </li>
+                </ul>
+              </section>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>
+                The menu is optimized for screen reader and keyboard only users:
+              </h2>
+              <ul>
+                <li>Activate the triggering element using the keyboard.</li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> Arrow keys to move focus between
+                  the menu options.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> Arrow keys to open or close
+                  submenus.
+                </li>
+                <li>
+                  Press any letter or number to jump to a menu item starting
+                  with that character or digit.
+                </li>
+                <li>Press <kbd>Enter</kbd> to activate a menu option.</li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the currently open menu.
+                </li>
+                <li>
+                  Press <kbd>Tab</kbd> or set focus back on the triggering
+                  element to close the menu and all submenus.
+                </li>
+                <li>Mouse users can click the desired menu option as usual.</li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Menus/Internal/index.htm b/Templates/Menus/Internal/index.htm
index 8e6c56c8..ffffe80f 100644
--- a/Templates/Menus/Internal/index.htm
+++ b/Templates/Menus/Internal/index.htm
@@ -1,179 +1,341 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Menu (Internal Content) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/menus.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/menus.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm" aria-current="page">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                        <li><a href="../Simulated Textbox (Right-Click)/index.htm">Simulated Textbox (Right-Click)</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Menu <small>Internal Content</small></h1>
-                        <section>
-                            <p>
-
-                                <button data-menu="settings-menu" class="aria-menu" id="menuButtonId">Settings</button>
-
-                                <ul hidden class="top menu" id="settings-menu">
-                                    <li><a href="#" class="has-submenu">Profile</a>
-                                        <ul hidden class="menu">
-                                            <li><a href="#" class="has-submenu">Personal</a>
-                                                <ul hidden class="menu">
-                                                    <li><a href="#" class="link" id="personal-name">Name</a></li>
-                                                    <li><a href="#" class="link" id="personal-interests">Interests</a></li>
-                                                    <li><a href="#" class="link" id="personal-education">Education</a></li>
-                                                </ul>
-                                            </li>
-                                            <li><a href="#" class="has-submenu">Business</a>
-                                                <ul hidden class="menu">
-                                                    <li><a href="#" class="link" id="business-name">Name</a></li>
-                                                    <li><a href="#" class="link" id="business-contact">Contact</a></li>
-                                                </ul>
-                                            </li>
-                                        </ul>
-                                    </li>
-                                    <li><a href="#" class="has-submenu">Checkable Options</a>
-                                        <ul hidden class="menu">
-                                            <li><a data-check href="#" class="link" id="settings-editor">Editor</a></li>
-                                            <li><a data-check="true" href="#" class="link" id="settings-cookies">Cookies</a></li>
-                                            <li><a data-check="mixed" href="#" class="link" id="settings-toolbar">Toolbar</a></li>
-                                        </ul>
-                                    </li>
-                                    <li><a href="#" class="has-submenu">Radio Options</a>
-                                        <ul hidden class="menu">
-                                            <li><a data-radio href="#" class="link" id="account-username">Username</a></li>
-                                            <li><a data-radio="true" href="#" class="link" id="account-password">Password</a></li>
-                                        </ul>
-                                    </li>
-                                    <li><a aria-disabled="true" title="Disabled" href="#" class="has-submenu">Services</a>
-                                        <ul hidden class="menu">
-                                            <li><a href="#" class="link" id="services-campaigns">Campaigns</a></li>
-                                            <li><a href="#" class="link" id="services-payments">Payments</a></li>
-                                        </ul>
-                                    </li>
-                                    <li><a aria-disabled="true" href="#" class="link" id="properties">Properties...</a></li>
-                                    <li><a href="https://google.com/" class="link" id="help">Help...</a></li>
-                                </ul>
-
-                            </p>
-                        </section>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The menu is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the triggering element using the keyboard.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> Arrow keys to move focus between the menu options.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> Arrow keys to open or close submenus.</li>
-                            <li>Press any letter or number to jump to a menu item starting with that character or digit.</li>
-                            <li>Press <kbd>Enter</kbd> to activate a menu option.</li>
-                            <li>Press <kbd>Escape</kbd> to close the currently open menu.</li>
-                            <li>Press <kbd>Tab</kbd> or set focus back on the triggering element to close the menu and all submenus.</li>
-                            <li>Mouse users can click the desired menu option as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Internal/index.htm" aria-current="page">Internal</a>
+              </li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Simulated Textbox (Right-Click)/index.htm"
+                  >Simulated Textbox (Right-Click)</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Menu <small>Internal Content</small></h1>
+              <section>
+                <p>
+                  <button
+                    data-menu="settings-menu"
+                    class="aria-menu"
+                    id="menuButtonId"
+                  >
+                    Settings
+                  </button>
+                </p>
+                <ul hidden class="top menu" id="settings-menu">
+                  <li>
+                    <a href="#" class="has-submenu">Profile</a>
+                    <ul hidden class="menu">
+                      <li>
+                        <a href="#" class="has-submenu">Personal</a>
+                        <ul hidden class="menu">
+                          <li>
+                            <a href="#" class="link" id="personal-name">Name</a>
+                          </li>
+                          <li>
+                            <a href="#" class="link" id="personal-interests"
+                              >Interests</a
+                            >
+                          </li>
+                          <li>
+                            <a href="#" class="link" id="personal-education"
+                              >Education</a
+                            >
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <a href="#" class="has-submenu">Business</a>
+                        <ul hidden class="menu">
+                          <li>
+                            <a href="#" class="link" id="business-name">Name</a>
+                          </li>
+                          <li>
+                            <a href="#" class="link" id="business-contact"
+                              >Contact</a
+                            >
+                          </li>
+                        </ul>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <a href="#" class="has-submenu">Checkable Options</a>
+                    <ul hidden class="menu">
+                      <li>
+                        <a data-check href="#" class="link" id="settings-editor"
+                          >Editor</a
+                        >
+                      </li>
+                      <li>
+                        <a
+                          data-check="true"
+                          href="#"
+                          class="link"
+                          id="settings-cookies"
+                          >Cookies</a
+                        >
+                      </li>
+                      <li>
+                        <a
+                          data-check="mixed"
+                          href="#"
+                          class="link"
+                          id="settings-toolbar"
+                          >Toolbar</a
+                        >
+                      </li>
                     </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
+                  </li>
+                  <li>
+                    <a href="#" class="has-submenu">Radio Options</a>
+                    <ul hidden class="menu">
+                      <li>
+                        <a
+                          data-radio
+                          href="#"
+                          class="link"
+                          id="account-username"
+                          >Username</a
+                        >
+                      </li>
+                      <li>
+                        <a
+                          data-radio="true"
+                          href="#"
+                          class="link"
+                          id="account-password"
+                          >Password</a
+                        >
+                      </li>
                     </ul>
-                </div>
+                  </li>
+                  <li>
+                    <a
+                      aria-disabled="true"
+                      title="Disabled"
+                      href="#"
+                      class="has-submenu"
+                      >Services</a
+                    >
+                    <ul hidden class="menu">
+                      <li>
+                        <a href="#" class="link" id="services-campaigns"
+                          >Campaigns</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="link" id="services-payments"
+                          >Payments</a
+                        >
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <a
+                      aria-disabled="true"
+                      href="#"
+                      class="link"
+                      id="properties"
+                      >Properties...</a
+                    >
+                  </li>
+                  <li>
+                    <a href="https://google.com/" class="link" id="help"
+                      >Help...</a
+                    >
+                  </li>
+                </ul>
+              </section>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>
+                The menu is optimized for screen reader and keyboard only users:
+              </h2>
+              <ul>
+                <li>Activate the triggering element using the keyboard.</li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> Arrow keys to move focus between
+                  the menu options.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> Arrow keys to open or close
+                  submenus.
+                </li>
+                <li>
+                  Press any letter or number to jump to a menu item starting
+                  with that character or digit.
+                </li>
+                <li>Press <kbd>Enter</kbd> to activate a menu option.</li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the currently open menu.
+                </li>
+                <li>
+                  Press <kbd>Tab</kbd> or set focus back on the triggering
+                  element to close the menu and all submenus.
+                </li>
+                <li>Mouse users can click the desired menu option as usual.</li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Menus/Simulated Textbox (Right-Click)/index.htm b/Templates/Menus/Simulated Textbox (Right-Click)/index.htm
index 68622be0..78fc0d57 100644
--- a/Templates/Menus/Simulated Textbox (Right-Click)/index.htm	
+++ b/Templates/Menus/Simulated Textbox (Right-Click)/index.htm	
@@ -1,181 +1,357 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Simulated Textbox Menu (Right-Click) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/menus.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Simulated Textbox Menu (Right-Click) - 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/menus.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                        <li><a href="../Simulated Textbox (Right-Click)/index.htm" aria-current="page">Simulated Textbox (Right-Click)</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Simulated Textbox Menu <small>Right-Click</small></h1>
-                        <h2 id="titleId">Blackboard</h2>
-                        <section>
-                            <p class="root">
-
-                                <div data-menu="settings-menu" class="blackboard" id="blackboardId" tabindex="0" contenteditable="true" role="textbox" aria-multiline="true" aria-labelledby="titleId"></div>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+              <li>
+                <a
+                  href="../Simulated Textbox (Right-Click)/index.htm"
+                  aria-current="page"
+                  >Simulated Textbox (Right-Click)</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                Simulated Textbox Menu <small>Right-Click</small>
+              </h1>
+              <h2 id="titleId">Blackboard</h2>
+              <section>
+                <p class="root"></p>
 
-                                <ul hidden class="top menu" id="settings-menu">
-                                    <li><a href="#" class="has-submenu">Profile</a>
-                                        <ul hidden class="menu">
-                                            <li><a href="#" class="has-submenu">Personal</a>
-                                                <ul hidden class="menu">
-                                                    <li><a href="#" class="link" id="personal-name">Name</a></li>
-                                                    <li><a href="#" class="link" id="personal-interests">Interests</a></li>
-                                                    <li><a href="#" class="link" id="personal-education">Education</a></li>
-                                                </ul>
-                                            </li>
-                                            <li><a href="#" class="has-submenu">Business</a>
-                                                <ul hidden class="menu">
-                                                    <li><a href="#" class="link" id="business-name">Name</a></li>
-                                                    <li><a href="#" class="link" id="business-contact">Contact</a></li>
-                                                </ul>
-                                            </li>
-                                        </ul>
-                                    </li>
-                                    <li><a href="#" class="has-submenu">Checkable Options</a>
-                                        <ul hidden class="menu">
-                                            <li><a data-check href="#" class="link" id="settings-editor">Editor</a></li>
-                                            <li><a data-check="true" href="#" class="link" id="settings-cookies">Cookies</a></li>
-                                            <li><a data-check="mixed" href="#" class="link" id="settings-toolbar">Toolbar</a></li>
-                                        </ul>
-                                    </li>
-                                    <li><a href="#" class="has-submenu">Radio Options</a>
-                                        <ul hidden class="menu">
-                                            <li><a data-radio href="#" class="link" id="account-username">Username</a></li>
-                                            <li><a data-radio="true" href="#" class="link" id="account-password">Password</a></li>
-                                        </ul>
-                                    </li>
-                                    <li><a aria-disabled="true" title="Disabled" href="#" class="has-submenu">Services</a>
-                                        <ul hidden class="menu">
-                                            <li><a href="#" class="link" id="services-campaigns">Campaigns</a></li>
-                                            <li><a href="#" class="link" id="services-payments">Payments</a></li>
-                                        </ul>
-                                    </li>
-                                    <li><a aria-disabled="true" href="#" class="link" id="properties">Properties...</a></li>
-                                    <li><a href="https://google.com/" class="link" id="help">Help...</a></li>
-                                </ul>
+                <div
+                  data-menu="settings-menu"
+                  class="blackboard"
+                  id="blackboardId"
+                  tabindex="0"
+                  contenteditable="true"
+                  role="textbox"
+                  aria-multiline="true"
+                  aria-labelledby="titleId"
+                ></div>
 
-                            </p>
-                        </section>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The menu is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus to the edit field.</li>
-                            <li>Activate the menu using the keyboard by pressing Shift+F10 or the Applications key.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> Arrow keys to move focus between the menu options.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> Arrow keys to open or close submenus.</li>
-                            <li>Press any letter or number to jump to a menu item starting with that character or digit.</li>
-                            <li>Press <kbd>Enter</kbd> to activate a menu option.</li>
-                            <li>Press <kbd>Escape</kbd> to close the currently open menu.</li>
-                            <li>Press <kbd>Tab</kbd> or set focus back on the triggering element to close the menu and all submenus.</li>
-                            <li>Mouse users can right-click the edit field and click the desired menu option as usual.</li>
+                <ul hidden class="top menu" id="settings-menu">
+                  <li>
+                    <a href="#" class="has-submenu">Profile</a>
+                    <ul hidden class="menu">
+                      <li>
+                        <a href="#" class="has-submenu">Personal</a>
+                        <ul hidden class="menu">
+                          <li>
+                            <a href="#" class="link" id="personal-name">Name</a>
+                          </li>
+                          <li>
+                            <a href="#" class="link" id="personal-interests"
+                              >Interests</a
+                            >
+                          </li>
+                          <li>
+                            <a href="#" class="link" id="personal-education"
+                              >Education</a
+                            >
+                          </li>
                         </ul>
-                    </div>
-                </div>
-
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
+                      </li>
+                      <li>
+                        <a href="#" class="has-submenu">Business</a>
+                        <ul hidden class="menu">
+                          <li>
+                            <a href="#" class="link" id="business-name">Name</a>
+                          </li>
+                          <li>
+                            <a href="#" class="link" id="business-contact"
+                              >Contact</a
+                            >
+                          </li>
+                        </ul>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <a href="#" class="has-submenu">Checkable Options</a>
+                    <ul hidden class="menu">
+                      <li>
+                        <a data-check href="#" class="link" id="settings-editor"
+                          >Editor</a
+                        >
+                      </li>
+                      <li>
+                        <a
+                          data-check="true"
+                          href="#"
+                          class="link"
+                          id="settings-cookies"
+                          >Cookies</a
+                        >
+                      </li>
+                      <li>
+                        <a
+                          data-check="mixed"
+                          href="#"
+                          class="link"
+                          id="settings-toolbar"
+                          >Toolbar</a
+                        >
+                      </li>
                     </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
+                  </li>
+                  <li>
+                    <a href="#" class="has-submenu">Radio Options</a>
+                    <ul hidden class="menu">
+                      <li>
+                        <a
+                          data-radio
+                          href="#"
+                          class="link"
+                          id="account-username"
+                          >Username</a
+                        >
+                      </li>
+                      <li>
+                        <a
+                          data-radio="true"
+                          href="#"
+                          class="link"
+                          id="account-password"
+                          >Password</a
+                        >
+                      </li>
                     </ul>
-                </div>
+                  </li>
+                  <li>
+                    <a
+                      aria-disabled="true"
+                      title="Disabled"
+                      href="#"
+                      class="has-submenu"
+                      >Services</a
+                    >
+                    <ul hidden class="menu">
+                      <li>
+                        <a href="#" class="link" id="services-campaigns"
+                          >Campaigns</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="link" id="services-payments"
+                          >Payments</a
+                        >
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <a
+                      aria-disabled="true"
+                      href="#"
+                      class="link"
+                      id="properties"
+                      >Properties...</a
+                    >
+                  </li>
+                  <li>
+                    <a href="https://google.com/" class="link" id="help"
+                      >Help...</a
+                    >
+                  </li>
+                </ul>
+              </section>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>
+                The menu is optimized for screen reader and keyboard only users:
+              </h2>
+              <ul>
+                <li>Set focus to the edit field.</li>
+                <li>
+                  Activate the menu using the keyboard by pressing Shift+F10 or
+                  the Applications key.
+                </li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> Arrow keys to move focus between
+                  the menu options.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> Arrow keys to open or close
+                  submenus.
+                </li>
+                <li>
+                  Press any letter or number to jump to a menu item starting
+                  with that character or digit.
+                </li>
+                <li>Press <kbd>Enter</kbd> to activate a menu option.</li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the currently open menu.
+                </li>
+                <li>
+                  Press <kbd>Tab</kbd> or set focus back on the triggering
+                  element to close the menu and all submenus.
+                </li>
+                <li>
+                  Mouse users can right-click the edit field and click the
+                  desired menu option as usual.
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Menus/index.htm b/Templates/Menus/index.htm
index b07d80d4..f92d1ce1 100644
--- a/Templates/Menus/index.htm
+++ b/Templates/Menus/index.htm
@@ -1,93 +1,147 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Menus - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Menus</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="External/index.htm">External</a></li>
-                        <li><a href="External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="Internal/index.htm">Internal</a></li>
-                        <li><a href="Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                        <li><a href="Simulated Textbox (Right-Click)/index.htm">Simulated Textbox (Right-Click)</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>Move focus into the menu when it is rendered, ensure that each menu has only one tab stop and that available menu items can be navigated using the arrow keys, make sure the menu can be closed from the keyboard, and move focus back to the triggering element after the menu is removed.</p>
-
-                    <p>The 4X ARIA Menu module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <p>The following attributes are handled automatically by the Menu module:</p>
-
-                    <ul>
-                        <li> role=menu</li>
-                        <li> role=menuitem/menuitemcheckbox/menuitemradio</li>
-                        <li> aria-checked</li>
-                        <li> aria-haspopup</li>
-                        <li> aria-orientation</li>
-                        <li> tabindex</li>
-                    </ul>
-
-                    <p>Available attributes for the triggering element:</p>
-
-                    <ul>
-                        <li> menu : The resource path and pointer to the ID attribute of the menu container element.</li>
-                    </ul>
-
-                    <p>Available attributes for menu item links:</p>
-
-                    <ul>
-                        <li> data-menu : The resource path and pointer to the ID attribute of the submenu container element.</li>
-                        <li> data-radio : May be set to "false" or "true" to set the current state of a radio menu item when rendered.</li>
-                        <li> data-check : May be set to "false", "true", or "mixed" to set the current state of a checkbox menu item when rendered.</li>
-                    </ul>
-
-                    <h2>HTML syntax</h2>
-
-                    <h3>Standard Menu</h3>
-
-                    <div>
-                        <pre><code class="language-markup">&lt;ul id="menuId">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Menus</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="External/index.htm">External</a></li>
+              <li>
+                <a href="External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="Simulated Textbox (Right-Click)/index.htm"
+                  >Simulated Textbox (Right-Click)</a
+                >
+              </li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              Move focus into the menu when it is rendered, ensure that each
+              menu has only one tab stop and that available menu items can be
+              navigated using the arrow keys, make sure the menu can be closed
+              from the keyboard, and move focus back to the triggering element
+              after the menu is removed.
+            </p>
+
+            <p>
+              The 4X ARIA Menu module automatically configures all required ARIA
+              attributes and focus handling, in strict accordance with the ARIA
+              specification.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the Menu
+              module:
+            </p>
+
+            <ul>
+              <li>role=menu</li>
+              <li>role=menuitem/menuitemcheckbox/menuitemradio</li>
+              <li>aria-checked</li>
+              <li>aria-haspopup</li>
+              <li>aria-orientation</li>
+              <li>tabindex</li>
+            </ul>
+
+            <p>Available attributes for the triggering element:</p>
+
+            <ul>
+              <li>
+                menu : The resource path and pointer to the ID attribute of the
+                menu container element.
+              </li>
+            </ul>
+
+            <p>Available attributes for menu item links:</p>
+
+            <ul>
+              <li>
+                data-menu : The resource path and pointer to the ID attribute of
+                the submenu container element.
+              </li>
+              <li>
+                data-radio : May be set to "false" or "true" to set the current
+                state of a radio menu item when rendered.
+              </li>
+              <li>
+                data-check : May be set to "false", "true", or "mixed" to set
+                the current state of a checkbox menu item when rendered.
+              </li>
+            </ul>
+
+            <h2>HTML syntax</h2>
+
+            <h3>Standard Menu</h3>
+
+            <div>
+              <pre><code class="language-markup">&lt;ul id="menuId">
   &lt;li>
     &lt;a href=" ... " >
       Accessible name and markup.
     &lt;/a>
   &lt;/li>
 &lt;/ul></code></pre>
-                    </div>
+            </div>
 
-                    <h3>Standard Menu Including Submenu</h3>
+            <h3>Standard Menu Including Submenu</h3>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;ul id="menuId">
+            <div>
+              <pre><code class="language-markup">&lt;ul id="menuId">
   &lt;li>
     &lt;a href=" ... " >
       Accessible name and markup.
@@ -101,24 +155,24 @@ <h3>Standard Menu Including Submenu</h3>
     &lt;/ul>
   &lt;/li>
 &lt;/ul></code></pre>
-                    </div>
+            </div>
 
-                    <h3>Standard Menu Including Checkable Items</h3>
+            <h3>Standard Menu Including Checkable Items</h3>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;ul id="menuId">
+            <div>
+              <pre><code class="language-markup">&lt;ul id="menuId">
   &lt;li>
     &lt;a data-check="false" href=" ... " >
       Accessible name and markup.
     &lt;/a>
   &lt;/li>
 &lt;/ul></code></pre>
-                    </div>
+            </div>
 
-                    <h3>Standard Menu Including Checkable Radios</h3>
+            <h3>Standard Menu Including Checkable Radios</h3>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;ul id="menuId">
+            <div>
+              <pre><code class="language-markup">&lt;ul id="menuId">
   &lt;li>
     &lt;a data-radio href=" ... " >
       Accessible name and markup.
@@ -130,29 +184,42 @@ <h3>Standard Menu Including Checkable Radios</h3>
     &lt;/a>
   &lt;/li>
 &lt;/ul></code></pre>
-                    </div>
+            </div>
 
-                    <p>IMPORTANT: An ARIA Menu must never include any other active elements other than those specified as menu items. Otherwise, all such additional active elements will be undiscoverable and inaccessible to non-sighted screen reader users.</p>
+            <p>
+              IMPORTANT: An ARIA Menu must never include any other active
+              elements other than those specified as menu items. Otherwise, all
+              such additional active elements will be undiscoverable and
+              inaccessible to non-sighted screen reader users.
+            </p>
 
-                    <h2>JavaScript syntax</h2>
+            <h2>JavaScript syntax</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">var myMenuDC = $A.setMenu( domNodeOrCSSSelectorForTriggeringElement , {
+            <div>
+              <pre><code class="language-javascript">var myMenuDC = $A.setMenu( domNodeOrCSSSelectorForTriggeringElement , {
 // Configure functionality key / value mappings
 });</code></pre>
-                    </div>
+            </div>
+
+            <ul>
+              <li>Module file: Menu.js</li>
+              <li>Requires: AccName.js, RovingTabIndex.js.</li>
+              <li>Recommended: Velocity.js, VelocityUI.js.</li>
+            </ul>
 
-                    <h2>Parameters</h2>
+            <h2>Parameters</h2>
 
-                    <ol>
-                        <li>A DOM element or CSS selector to specify the triggering element</li>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <ol>
+              <li>
+                A DOM element or CSS selector to specify the triggering element
+              </li>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <h3>Configuration</h3>
+            <h3>Configuration</h3>
 
-                    <div>
-                        <pre><code class="language-javascript">{
+            <div>
+              <pre><code class="language-javascript">{
 
 // Optionally set a unique ID for the menu DC object, which can be referenced through $A('uniqueId')
 // If not specified, the id of the triggering element will be used instead.
@@ -267,12 +334,12 @@ <h3>Configuration</h3>
 // To view available options, reference the help docs located at: "Help/DC API/DC Object Configuration"
 
 }</code></pre>
-                    </div>
+            </div>
 
-                    <h2>Programmatic control</h2>
+            <h2>Programmatic control</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">// Get the DC object for the top level menu using its id.
+            <div>
+              <pre><code class="language-javascript">// Get the DC object for the top level menu using its id.
 var DC = $A("menuTriggerId");
 
 // Open the menu manually.
@@ -287,67 +354,96 @@ <h2>Programmatic control</h2>
 
 // Additional DC API properties and methods can be applied here as well.
 // To view available options, reference the help docs located at: "Help/DC API/DC Object Properties and Methods"</code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Popups/External - Straylight/files/popup-excerpt.htm b/Templates/Popups/External - Straylight/files/popup-excerpt.htm
index 8ce006b5..00d89019 100644
--- a/Templates/Popups/External - Straylight/files/popup-excerpt.htm	
+++ b/Templates/Popups/External - Straylight/files/popup-excerpt.htm	
@@ -1,42 +1,37 @@
 <html>
-
-<body>
-
-
+  <body>
     <!-- Important
     When Implementing a Close link or button, the className must match the "closeClassName" property within the script declaration.
     (If not explicitly set, the default value "CloseDC" is configured within the module script file, and should be used for all Close links or buttons)
     Doing so will automatically bind the close methods with this element, and set keyboard focus properly when the DC object is closed.
     -->
     <div hidden id="popupId" class="container--popup">
-        <h4>Hamlet: Act 3, Scene 2</h4>
-        <button class="CloseDC">
-            <img src="img/ic_close.svg" alt="Close Popup" title="Close Popup" />
-        </button>
-        <dl>
-            <dt>HAMLET</dt>
-            <dd>Do you see yonder cloud that's almost in shape of a camel?</dd>
-            <dt>POLONIUS</dt>
-            <dd>By th' mass, and 'tis like a camel indeed.</dd>
-            <dt>HAMLET</dt>
-            <dd>Methinks it is like a weasel.</dd>
-            <dt>POLONIUS</dt>
-            <dd>It is backed like a weasel.</dd>
-            <dt>HAMLET</dt>
-            <dd>Or like a whale.</dd>
-            <dt>POLONIUS</dt>
-            <dd>Very like a whale.</dd>
-        </dl>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                // alert(DC.id);
-            })();
-        </script>
+      <h4>Hamlet: Act 3, Scene 2</h4>
+      <button class="CloseDC">
+        <img src="img/ic_close.svg" alt="Close Popup" title="Close Popup" />
+      </button>
+      <dl>
+        <dt>HAMLET</dt>
+        <dd>Do you see yonder cloud that's almost in shape of a camel?</dd>
+        <dt>POLONIUS</dt>
+        <dd>By th' mass, and 'tis like a camel indeed.</dd>
+        <dt>HAMLET</dt>
+        <dd>Methinks it is like a weasel.</dd>
+        <dt>POLONIUS</dt>
+        <dd>It is backed like a weasel.</dd>
+        <dt>HAMLET</dt>
+        <dd>Or like a whale.</dd>
+        <dt>POLONIUS</dt>
+        <dd>Very like a whale.</dd>
+      </dl>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          // alert(DC.id);
+        })();
+      </script>
     </div>
-
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/Popups/External - Straylight/index.htm b/Templates/Popups/External - Straylight/index.htm
index 3c94d74d..9e162949 100644
--- a/Templates/Popups/External - Straylight/index.htm	
+++ b/Templates/Popups/External - Straylight/index.htm	
@@ -1,130 +1,206 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Straylight Popup (External Content) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Straylight Popup (External Content) - 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js#Straylight"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm" aria-current="page"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Alert/index.htm">Internal - Alert</a>
+              </li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                Straylight Popup <small>External Content</small>
+              </h1>
+              <p>
+                <button
+                  data-role="Hamlet Excerpt"
+                  data-controls="files/popup-excerpt.htm#popupId"
+                  id="triggerId"
+                  class="aria-popup"
+                >
+                  Show me the Shakespeare Quote of the Day!
+                </button>
+              </p>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm" aria-current="page">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Alert/index.htm">Internal - Alert</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>
+                The popup is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>Activate the Quote button to open the popup.</li>
+                <li>
+                  The content will be inserted inline with the triggering
+                  element, and focus will automatically move to the beginning of
+                  the new content.
+                </li>
+                <li>
+                  Press <kbd>Tab</kbd> to set focus to the Close link and press
+                  <kbd>Enter</kbd> to close the popup, or press
+                  <kbd>Escape</kbd> to close the popup directly.
+                </li>
+                <li>
+                  When closed, focus will move back to the triggering element.
+                </li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Straylight Popup <small>External Content</small></h1>
-                        <p>
-                            <button data-role="Hamlet Excerpt" data-controls="files/popup-excerpt.htm#popupId" id="triggerId" class="aria-popup">Show me the Shakespeare Quote of the Day!</button>
-                        </p>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The popup is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the Quote button to open the popup.</li>
-                            <li>The content will be inserted inline with the triggering element,
-                                and focus will automatically move to the beginning of the new content.</li>
-                            <li>Press <kbd>Tab</kbd> to set focus to the Close link and press <kbd>Enter</kbd> to close the popup,
-                                or press <kbd>Escape</kbd> to close the popup directly.</li>
-                            <li>When closed, focus will move back to the triggering element.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Popups/External/files/popup-excerpt.htm b/Templates/Popups/External/files/popup-excerpt.htm
index 8ce006b5..00d89019 100644
--- a/Templates/Popups/External/files/popup-excerpt.htm
+++ b/Templates/Popups/External/files/popup-excerpt.htm
@@ -1,42 +1,37 @@
 <html>
-
-<body>
-
-
+  <body>
     <!-- Important
     When Implementing a Close link or button, the className must match the "closeClassName" property within the script declaration.
     (If not explicitly set, the default value "CloseDC" is configured within the module script file, and should be used for all Close links or buttons)
     Doing so will automatically bind the close methods with this element, and set keyboard focus properly when the DC object is closed.
     -->
     <div hidden id="popupId" class="container--popup">
-        <h4>Hamlet: Act 3, Scene 2</h4>
-        <button class="CloseDC">
-            <img src="img/ic_close.svg" alt="Close Popup" title="Close Popup" />
-        </button>
-        <dl>
-            <dt>HAMLET</dt>
-            <dd>Do you see yonder cloud that's almost in shape of a camel?</dd>
-            <dt>POLONIUS</dt>
-            <dd>By th' mass, and 'tis like a camel indeed.</dd>
-            <dt>HAMLET</dt>
-            <dd>Methinks it is like a weasel.</dd>
-            <dt>POLONIUS</dt>
-            <dd>It is backed like a weasel.</dd>
-            <dt>HAMLET</dt>
-            <dd>Or like a whale.</dd>
-            <dt>POLONIUS</dt>
-            <dd>Very like a whale.</dd>
-        </dl>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                // alert(DC.id);
-            })();
-        </script>
+      <h4>Hamlet: Act 3, Scene 2</h4>
+      <button class="CloseDC">
+        <img src="img/ic_close.svg" alt="Close Popup" title="Close Popup" />
+      </button>
+      <dl>
+        <dt>HAMLET</dt>
+        <dd>Do you see yonder cloud that's almost in shape of a camel?</dd>
+        <dt>POLONIUS</dt>
+        <dd>By th' mass, and 'tis like a camel indeed.</dd>
+        <dt>HAMLET</dt>
+        <dd>Methinks it is like a weasel.</dd>
+        <dt>POLONIUS</dt>
+        <dd>It is backed like a weasel.</dd>
+        <dt>HAMLET</dt>
+        <dd>Or like a whale.</dd>
+        <dt>POLONIUS</dt>
+        <dd>Very like a whale.</dd>
+      </dl>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          // alert(DC.id);
+        })();
+      </script>
     </div>
-
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/Popups/External/index.htm b/Templates/Popups/External/index.htm
index 6f6ba24a..9c448d69 100644
--- a/Templates/Popups/External/index.htm
+++ b/Templates/Popups/External/index.htm
@@ -1,131 +1,200 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Popup (External Content) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../External/index.htm" aria-current="page">External</a>
+              </li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Alert/index.htm">Internal - Alert</a>
+              </li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Popup <small>External Content</small></h1>
+              <p>
+                <button id="triggerId" class="aria-popup">
+                  Show me the Shakespeare Quote of the Day!
+                </button>
+              </p>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm" aria-current="page">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Alert/index.htm">Internal - Alert</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>
+                The popup is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>Activate the Quote button to open the popup.</li>
+                <li>
+                  The content will be inserted inline with the triggering
+                  element, and focus will automatically move to the beginning of
+                  the new content.
+                </li>
+                <li>
+                  Press <kbd>Tab</kbd> to set focus to the Close link and press
+                  <kbd>Enter</kbd> to close the popup, or press
+                  <kbd>Escape</kbd> to close the popup directly.
+                </li>
+                <li>
+                  When closed, focus will move back to the triggering element.
+                </li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Popup <small>External Content</small></h1>
-                        <p>
-                            <button id="triggerId" class="aria-popup">Show me the Shakespeare Quote of the Day!</button>
-                        </p>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The popup is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the Quote button to open the popup.</li>
-                            <li>The content will be inserted inline with the triggering element,
-                                and focus will automatically move to the beginning of the new content.</li>
-                            <li>Press <kbd>Tab</kbd> to set focus to the Close link and press <kbd>Enter</kbd> to close the popup,
-                                or press <kbd>Escape</kbd> to close the popup directly.</li>
-                            <li>When closed, focus will move back to the triggering element.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Popups/Internal - Alert/index.htm b/Templates/Popups/Internal - Alert/index.htm
index 8ca8825f..c242a6e0 100644
--- a/Templates/Popups/Internal - Alert/index.htm	
+++ b/Templates/Popups/Internal - Alert/index.htm	
@@ -1,158 +1,235 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Alert Popup (Internal Content) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Alert/index.htm" aria-current="page">Internal - Alert</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Alert Popup <small>Internal Content</small></h1>
-                        <p>
-                            <button id="triggerId" class="aria-popup">Show me the Shakespeare Quote of the Day!</button>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Alert/index.htm" aria-current="page"
+                  >Internal - Alert</a
+                >
+              </li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                Alert Popup <small>Internal Content</small>
+              </h1>
+              <p>
+                <button id="triggerId" class="aria-popup">
+                  Show me the Shakespeare Quote of the Day!
+                </button>
 
-                            <!-- Important
+                <!-- Important
     When Implementing a Close link or button, the className must match the "closeClassName" property within the script declaration.
     (If not explicitly set, the default value "CloseDC" is configured within the module script file, and should be used for all Close links or buttons)
     Doing so will automatically bind the close methods with this element, and set keyboard focus properly when the DC object is closed.
     -->
-                            <div hidden id="popupId" class="container--popup">
-                                <h4>Hamlet: Act 3, Scene 2</h4>
-                                <button class="CloseDC">
-                                    <img src="img/ic_close.svg" alt="Close Popup" title="Close Popup" />
-                                </button>
-                                <dl>
-                                    <dt>HAMLET</dt>
-                                    <dd>Do you see yonder cloud that's almost in shape of a camel?</dd>
-                                    <dt>POLONIUS</dt>
-                                    <dd>By th' mass, and 'tis like a camel indeed.</dd>
-                                    <dt>HAMLET</dt>
-                                    <dd>Methinks it is like a weasel.</dd>
-                                    <dt>POLONIUS</dt>
-                                    <dd>It is backed like a weasel.</dd>
-                                    <dt>HAMLET</dt>
-                                    <dd>Or like a whale.</dd>
-                                    <dt>POLONIUS</dt>
-                                    <dd>Very like a whale.</dd>
-                                </dl>
-                            </div>
+              </p>
 
-                        </p>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The popup is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the Quote button to open the popup.</li>
-                            <li>The content will be inserted inline with the triggering element,
-                                and focus will automatically move to the beginning of the new content.</li>
-                            <li>Press <kbd>Tab</kbd> to set focus to the Close link and press <kbd>Enter</kbd> to close the popup,
-                                or press <kbd>Escape</kbd> to close the popup directly.</li>
-                            <li>When closed, focus will move back to the triggering element.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+              <div hidden id="popupId" class="container--popup">
+                <h4>Hamlet: Act 3, Scene 2</h4>
+                <button class="CloseDC">
+                  <img
+                    src="img/ic_close.svg"
+                    alt="Close Popup"
+                    title="Close Popup"
+                  />
+                </button>
+                <dl>
+                  <dt>HAMLET</dt>
+                  <dd>
+                    Do you see yonder cloud that's almost in shape of a camel?
+                  </dd>
+                  <dt>POLONIUS</dt>
+                  <dd>By th' mass, and 'tis like a camel indeed.</dd>
+                  <dt>HAMLET</dt>
+                  <dd>Methinks it is like a weasel.</dd>
+                  <dt>POLONIUS</dt>
+                  <dd>It is backed like a weasel.</dd>
+                  <dt>HAMLET</dt>
+                  <dd>Or like a whale.</dd>
+                  <dt>POLONIUS</dt>
+                  <dd>Very like a whale.</dd>
+                </dl>
+              </div>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>
+                The popup is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>Activate the Quote button to open the popup.</li>
+                <li>
+                  The content will be inserted inline with the triggering
+                  element, and focus will automatically move to the beginning of
+                  the new content.
+                </li>
+                <li>
+                  Press <kbd>Tab</kbd> to set focus to the Close link and press
+                  <kbd>Enter</kbd> to close the popup, or press
+                  <kbd>Escape</kbd> to close the popup directly.
+                </li>
+                <li>
+                  When closed, focus will move back to the triggering element.
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Popups/Internal - Straylight/index.htm b/Templates/Popups/Internal - Straylight/index.htm
index 40d405a3..4e61bd7b 100644
--- a/Templates/Popups/Internal - Straylight/index.htm	
+++ b/Templates/Popups/Internal - Straylight/index.htm	
@@ -1,157 +1,239 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Straylight Popup (Internal Content) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Straylight Popup (Internal Content) - 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js#Straylight"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Alert/index.htm">Internal - Alert</a></li>
-                        <li><a href="../Internal - Straylight/index.htm" aria-current="page">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Straylight Popup <small>Internal Content</small></h1>
-                        <p>
-                            <button data-role="Hamlet Excerpt" data-controls="popupId" id="triggerId" class="aria-popup">Show me the Shakespeare Quote of the Day!</button>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Alert/index.htm">Internal - Alert</a>
+              </li>
+              <li>
+                <a href="../Internal - Straylight/index.htm" aria-current="page"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                Straylight Popup <small>Internal Content</small>
+              </h1>
+              <p>
+                <button
+                  data-role="Hamlet Excerpt"
+                  data-controls="popupId"
+                  id="triggerId"
+                  class="aria-popup"
+                >
+                  Show me the Shakespeare Quote of the Day!
+                </button>
 
-                            <!-- Important
+                <!-- Important
     When Implementing a Close link or button, the className must match the "closeClassName" property within the script declaration.
     (If not explicitly set, the default value "CloseDC" is configured within the module script file, and should be used for all Close links or buttons)
     Doing so will automatically bind the close methods with this element, and set keyboard focus properly when the DC object is closed.
     -->
-                            <div hidden id="popupId" class="container--popup">
-                                <h4>Hamlet: Act 3, Scene 2</h4>
-                                <button class="CloseDC">
-                                    <img src="img/ic_close.svg" alt="Close Popup" title="Close Popup" />
-                                </button>
-                                <dl>
-                                    <dt>HAMLET</dt>
-                                    <dd>Do you see yonder cloud that's almost in shape of a camel?</dd>
-                                    <dt>POLONIUS</dt>
-                                    <dd>By th' mass, and 'tis like a camel indeed.</dd>
-                                    <dt>HAMLET</dt>
-                                    <dd>Methinks it is like a weasel.</dd>
-                                    <dt>POLONIUS</dt>
-                                    <dd>It is backed like a weasel.</dd>
-                                    <dt>HAMLET</dt>
-                                    <dd>Or like a whale.</dd>
-                                    <dt>POLONIUS</dt>
-                                    <dd>Very like a whale.</dd>
-                                </dl>
-                            </div>
+              </p>
 
-                        </p>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The popup is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the Quote button to open the popup.</li>
-                            <li>The content will be inserted inline with the triggering element,
-                                and focus will automatically move to the beginning of the new content.</li>
-                            <li>Press <kbd>Tab</kbd> to set focus to the Close link and press <kbd>Enter</kbd> to close the popup,
-                                or press <kbd>Escape</kbd> to close the popup directly.</li>
-                            <li>When closed, focus will move back to the triggering element.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+              <div hidden id="popupId" class="container--popup">
+                <h4>Hamlet: Act 3, Scene 2</h4>
+                <button class="CloseDC">
+                  <img
+                    src="img/ic_close.svg"
+                    alt="Close Popup"
+                    title="Close Popup"
+                  />
+                </button>
+                <dl>
+                  <dt>HAMLET</dt>
+                  <dd>
+                    Do you see yonder cloud that's almost in shape of a camel?
+                  </dd>
+                  <dt>POLONIUS</dt>
+                  <dd>By th' mass, and 'tis like a camel indeed.</dd>
+                  <dt>HAMLET</dt>
+                  <dd>Methinks it is like a weasel.</dd>
+                  <dt>POLONIUS</dt>
+                  <dd>It is backed like a weasel.</dd>
+                  <dt>HAMLET</dt>
+                  <dd>Or like a whale.</dd>
+                  <dt>POLONIUS</dt>
+                  <dd>Very like a whale.</dd>
+                </dl>
+              </div>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>
+                The popup is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>Activate the Quote button to open the popup.</li>
+                <li>
+                  The content will be inserted inline with the triggering
+                  element, and focus will automatically move to the beginning of
+                  the new content.
+                </li>
+                <li>
+                  Press <kbd>Tab</kbd> to set focus to the Close link and press
+                  <kbd>Enter</kbd> to close the popup, or press
+                  <kbd>Escape</kbd> to close the popup directly.
+                </li>
+                <li>
+                  When closed, focus will move back to the triggering element.
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Popups/Internal/index.htm b/Templates/Popups/Internal/index.htm
index 34f979ab..98fcd289 100644
--- a/Templates/Popups/Internal/index.htm
+++ b/Templates/Popups/Internal/index.htm
@@ -1,159 +1,233 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Popup (Internal Content) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm" aria-current="page">Internal</a></li>
-                        <li><a href="../Internal - Alert/index.htm">Internal - Alert</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Popup <small>Internal Content</small></h1>
-                        <p>
-                            <button id="triggerId" class="aria-popup">Show me the Shakespeare Quote of the Day!</button>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Internal/index.htm" aria-current="page">Internal</a>
+              </li>
+              <li>
+                <a href="../Internal - Alert/index.htm">Internal - Alert</a>
+              </li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Popup <small>Internal Content</small></h1>
+              <p>
+                <button id="triggerId" class="aria-popup">
+                  Show me the Shakespeare Quote of the Day!
+                </button>
 
-                            <!-- Important
+                <!-- Important
     When Implementing a Close link or button, the className must match the "closeClassName" property within the script declaration.
     (If not explicitly set, the default value "CloseDC" is configured within the module script file, and should be used for all Close links or buttons)
     Doing so will automatically bind the close methods with this element, and set keyboard focus properly when the DC object is closed.
     -->
-                            <div hidden id="popupId" class="container--popup">
-                                <h4>Hamlet: Act 3, Scene 2</h4>
-                                <button class="CloseDC">
-                                    <img src="img/ic_close.svg" alt="Close Popup" title="Close Popup" />
-                                </button>
-                                <dl>
-                                    <dt>HAMLET</dt>
-                                    <dd>Do you see yonder cloud that's almost in shape of a camel?</dd>
-                                    <dt>POLONIUS</dt>
-                                    <dd>By th' mass, and 'tis like a camel indeed.</dd>
-                                    <dt>HAMLET</dt>
-                                    <dd>Methinks it is like a weasel.</dd>
-                                    <dt>POLONIUS</dt>
-                                    <dd>It is backed like a weasel.</dd>
-                                    <dt>HAMLET</dt>
-                                    <dd>Or like a whale.</dd>
-                                    <dt>POLONIUS</dt>
-                                    <dd>Very like a whale.</dd>
-                                </dl>
-                            </div>
-
-                        </p>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The popup is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Activate the Quote button to open the popup.</li>
-                            <li>The content will be inserted inline with the triggering element,
-                                and focus will automatically move to the beginning of the new content.</li>
-                            <li>Press <kbd>Tab</kbd> to set focus to the Close link and press <kbd>Enter</kbd> to close the popup,
-                                or press <kbd>Escape</kbd> to close the popup directly.</li>
-                            <li>When closed, focus will move back to the triggering element.</li>
-                        </ul>
-                    </div>
-                </div>
+              </p>
 
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+              <div hidden id="popupId" class="container--popup">
+                <h4>Hamlet: Act 3, Scene 2</h4>
+                <button class="CloseDC">
+                  <img
+                    src="img/ic_close.svg"
+                    alt="Close Popup"
+                    title="Close Popup"
+                  />
+                </button>
+                <dl>
+                  <dt>HAMLET</dt>
+                  <dd>
+                    Do you see yonder cloud that's almost in shape of a camel?
+                  </dd>
+                  <dt>POLONIUS</dt>
+                  <dd>By th' mass, and 'tis like a camel indeed.</dd>
+                  <dt>HAMLET</dt>
+                  <dd>Methinks it is like a weasel.</dd>
+                  <dt>POLONIUS</dt>
+                  <dd>It is backed like a weasel.</dd>
+                  <dt>HAMLET</dt>
+                  <dd>Or like a whale.</dd>
+                  <dt>POLONIUS</dt>
+                  <dd>Very like a whale.</dd>
+                </dl>
+              </div>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The popup is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>Activate the Quote button to open the popup.</li>
+                <li>
+                  The content will be inserted inline with the triggering
+                  element, and focus will automatically move to the beginning of
+                  the new content.
+                </li>
+                <li>
+                  Press <kbd>Tab</kbd> to set focus to the Close link and press
+                  <kbd>Enter</kbd> to close the popup, or press
+                  <kbd>Escape</kbd> to close the popup directly.
+                </li>
+                <li>
+                  When closed, focus will move back to the triggering element.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Popups/index.htm b/Templates/Popups/index.htm
index 23d5c4fa..acd657a2 100644
--- a/Templates/Popups/index.htm
+++ b/Templates/Popups/index.htm
@@ -1,110 +1,175 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Popups - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Popups</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="External/index.htm">External</a></li>
-                        <li><a href="External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="Internal/index.htm">Internal</a></li>
-                        <li><a href="Internal - Alert/index.htm">Internal - Alert</a></li>
-                        <li><a href="Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>Move focus into the popup when it is rendered, ensure that the beginning and ending boundaries are conveyed to screen reader users, make sure the popup can be closed from the keyboard, ensure that circular tabbing confines keyboard focus within the popup content, and move focus back to the triggering element after the popup is removed.</p>
-
-                    <p>The 4X ARIA Popup module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <p>The following attributes are handled automatically by the Popup module:</p>
-
-                    <ul>
-                        <li> role=region</li>
-                        <li> aria-labelledby</li>
-                        <li> aria-expanded</li>
-                    </ul>
-
-                    <p>Available attributes for the triggering element:</p>
-
-                    <ul>
-                        <li>data-controls : The resource path and pointer to the ID attribute of the popup container element. May consist of a traditional id reference within the same document, or a url+id reference for pulling a popup in from an external resource. E.G. data-controls="path/get.php?type=moreInfo#popupContainerId"</li>
-                    </ul>
-
-                    <h2>HTML syntax</h2>
-
-                    <h3>Triggering Element</h3>
-
-                    <div>
-                        <pre><code class="language-markup">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Popups</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="External/index.htm">External</a></li>
+              <li>
+                <a href="External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="Internal/index.htm">Internal</a></li>
+              <li><a href="Internal - Alert/index.htm">Internal - Alert</a></li>
+              <li>
+                <a href="Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              Move focus into the popup when it is rendered, ensure that the
+              beginning and ending boundaries are conveyed to screen reader
+              users, make sure the popup can be closed from the keyboard, ensure
+              that circular tabbing confines keyboard focus within the popup
+              content, and move focus back to the triggering element after the
+              popup is removed.
+            </p>
+
+            <p>
+              The 4X ARIA Popup module automatically configures all required
+              ARIA attributes and focus handling, in strict accordance with the
+              ARIA specification.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the Popup
+              module:
+            </p>
+
+            <ul>
+              <li>role=region</li>
+              <li>aria-labelledby</li>
+              <li>aria-expanded</li>
+            </ul>
+
+            <p>Available attributes for the triggering element:</p>
+
+            <ul>
+              <li>
+                data-controls : The resource path and pointer to the ID
+                attribute of the popup container element. May consist of a
+                traditional id reference within the same document, or a url+id
+                reference for pulling a popup in from an external resource. E.G.
+                data-controls="path/get.php?type=moreInfo#popupContainerId"
+              </li>
+            </ul>
+
+            <h2>HTML syntax</h2>
+
+            <h3>Triggering Element</h3>
+
+            <div>
+              <pre><code class="language-markup">
 &lt;button id="popupTriggerId"> MORE INFO &lt;/button>
 </code></pre>
-                    </div>
+            </div>
 
-                    <p>To ensure the greatest level of accessibility, a triggering element should always consist of a native button or link.</p>
+            <p>
+              To ensure the greatest level of accessibility, a triggering
+              element should always consist of a native button or link.
+            </p>
 
-                    <h3>Popup Container</h3>
+            <h3>Popup Container</h3>
 
-                    <div>
-                        <pre><code class="language-markup">
+            <div>
+              <pre><code class="language-markup">
 &lt;div hidden id="popupId">
   &lt;button aria-label="Close" class="CloseDC">&lt;!-- Close Icon Here -->&lt;/button>
   &lt;div> Popup content... &lt;/div>
 &lt;/div>
 </code></pre>
-                    </div>
-
-                    <p>When Implementing a Close link or button, the className must match the "closeClassName" property within the script declaration. Doing so will automatically bind the close methods with this element, and set keyboard focus properly when the popup is closed. If closeClassName is not specified, the default class will be set to "CloseDC" instead. The aria-label attribute provides an informative name for non-sighted screen reader users no matter what the visible icon is set to.</p>
-
-                    <h2>JavaScript syntax</h2>
+            </div>
 
-                    <div>
-                        <pre><code class="language-javascript">
+            <p>
+              When Implementing a Close link or button, the className must match
+              the "closeClassName" property within the script declaration. Doing
+              so will automatically bind the close methods with this element,
+              and set keyboard focus properly when the popup is closed. If
+              closeClassName is not specified, the default class will be set to
+              "CloseDC" instead. The aria-label attribute provides an
+              informative name for non-sighted screen reader users no matter
+              what the visible icon is set to.
+            </p>
+
+            <h2>JavaScript syntax</h2>
+
+            <div>
+              <pre><code class="language-javascript">
 var myPopupDC = $A.setPopup( "#popupTriggerId", {
   // Configure functionality key / value mappings
 });
 </code></pre>
-                    </div>
+            </div>
 
-                    <h2>Parameters</h2>
+            <ul>
+              <li>Module file: Popup.js</li>
+              <li>Has no dependencies.</li>
+              <li>Recommended: Velocity.js, VelocityUI.js.</li>
+            </ul>
 
-                    <ol>
-                        <li>A DOM element or CSS selector to specify the triggering element</li>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <h2>Parameters</h2>
 
-                    <h3>Configuration</h3>
+            <ol>
+              <li>
+                A DOM element or CSS selector to specify the triggering element
+              </li>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <div>
-                        <pre><code class="language-javascript">
+            <h3>Configuration</h3>
+
+            <div>
+              <pre><code class="language-javascript">
 {
 
 // Unique ID for the popup instance
@@ -206,12 +271,12 @@ <h3>Configuration</h3>
 
 }
 </code></pre>
-                    </div>
+            </div>
 
-                    <h2>Programmatic control</h2>
+            <h2>Programmatic control</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">
+            <div>
+              <pre><code class="language-javascript">
 // Use the DC object that is returned by the $A.setPopup() function.
 
 // Open the popup manually.
@@ -227,67 +292,96 @@ <h2>Programmatic control</h2>
 // Additional DC API properties and methods can be applied here as well.
 // To view available options, reference the help docs located at: "Help/DC API/DC Object Properties and Methods"
 </code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Radios/Standard/index.htm b/Templates/Radios/Standard/index.htm
index 5ba84dd6..f61cf09d 100644
--- a/Templates/Radios/Standard/index.htm
+++ b/Templates/Radios/Standard/index.htm
@@ -1,152 +1,202 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Standard Radios - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Standard/index.htm" aria-current="page">Standard</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Standard Radios</h1>
-                        <section class="sample-block">
-
-                            <!--
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../Standard/index.htm" aria-current="page">Standard</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Standard Radios</h1>
+              <section class="sample-block">
+                <!--
 IMPORTANT: The internal markup for an ARIA Radio must never include any other types of exposed active elements.
 Otherwise, based on how ARIA works in accordance with the spec, none of the embedded controls will be accessible to non-sighted screen reader users.
 -->
 
-                            <form>
-                                <fieldset>
-                                    <legend>What do you want to be when you grow up?</legend>
-
-                                    <div data-radio class="aria-radio future">
-                                        <span>A Banana</span>
-                                        <input hidden type="radio" name="Future" value="Banana" />
-                                    </div>
+                <form>
+                  <fieldset>
+                    <legend>What do you want to be when you grow up?</legend>
 
-                                    <div data-radio class="aria-radio future">
-                                        <span>A Carrot</span>
-                                        <input hidden type="radio" name="Future" value="Carrot" />
-                                    </div>
-
-                                    <div data-radio class="aria-radio future">
-                                        <span>A Donkey</span>
-                                        <input hidden type="radio" name="Future" value="Donkey" />
-                                    </div>
-
-                                </fieldset>
-                            </form>
-
-                        </section>
+                    <div data-radio class="aria-radio future">
+                      <span>A Banana</span>
+                      <input hidden type="radio" name="Future" value="Banana" />
                     </div>
-                    <div class="keyboard flex-item">
-                        <h2>The simulated radios are optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus to the radios using the keyboard.</li>
-                            <li>Press <kbd>Enter</kbd> or <kbd>Space</kbd> to activate a radio.</li>
-                            <li>Mouse users can click the desired radio to activate as usual.</li>
-                        </ul>
+
+                    <div data-radio class="aria-radio future">
+                      <span>A Carrot</span>
+                      <input hidden type="radio" name="Future" value="Carrot" />
                     </div>
-                </div>
 
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+                    <div data-radio class="aria-radio future">
+                      <span>A Donkey</span>
+                      <input hidden type="radio" name="Future" value="Donkey" />
+                    </div>
+                  </fieldset>
+                </form>
+              </section>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>
+                The simulated radios are optimized for screen reader and
+                keyboard only users:
+              </h2>
+              <ul>
+                <li>Set focus to the radios using the keyboard.</li>
+                <li>
+                  Press <kbd>Enter</kbd> or <kbd>Space</kbd> to activate a
+                  radio.
+                </li>
+                <li>
+                  Mouse users can click the desired radio to activate as usual.
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Radios/index.htm b/Templates/Radios/index.htm
index 7f8dd330..e3bbef6e 100644
--- a/Templates/Radios/index.htm
+++ b/Templates/Radios/index.htm
@@ -1,113 +1,173 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Radios - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Radios</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="Standard/index.htm">Standard</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>The radio should be focusable using the keyboard, and toggle its checkable state when arrowing between other radios within the same group or when pressing the Spacebar or Enter key. Multiple radios within the same group should have only one tab stop.</p>
-
-                    <p>The 4X ARIA Radio module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <p>The following attributes are handled automatically by the Radio module:</p>
-
-                    <ul>
-                        <li> role=radiogroup</li>
-                        <li> role=radio</li>
-                        <li> aria-checked</li>
-                        <li> tabindex</li>
-                    </ul>
-
-                    <p>Available attributes for radio elements:</p>
-
-                    <ul>
-                        <li> data-radio : May be set to "false" or "true" to set the current state of a checkable control when rendered.</li>
-                        <li> aria-disabled : When set to "true" on the triggering element, will automatically disable associated functionality.</li>
-                    </ul>
-
-                    <p>Note: When dynamically disabling a triggering element, the 4X setDisabled() function should be used to set the disabled state of the triggering element. This will ensure proper background mapping.</p>
-
-                    <div>
-                        <pre><code class="language-javascript">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Radios</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="Standard/index.htm">Standard</a></li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              The radio should be focusable using the keyboard, and toggle its
+              checkable state when arrowing between other radios within the same
+              group or when pressing the Spacebar or Enter key. Multiple radios
+              within the same group should have only one tab stop.
+            </p>
+
+            <p>
+              The 4X ARIA Radio module automatically configures all required
+              ARIA attributes and focus handling, in strict accordance with the
+              ARIA specification.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the Radio
+              module:
+            </p>
+
+            <ul>
+              <li>role=radiogroup</li>
+              <li>role=radio</li>
+              <li>aria-checked</li>
+              <li>tabindex</li>
+            </ul>
+
+            <p>Available attributes for radio elements:</p>
+
+            <ul>
+              <li>
+                data-radio : May be set to "false" or "true" to set the current
+                state of a checkable control when rendered.
+              </li>
+              <li>
+                aria-disabled : When set to "true" on the triggering element,
+                will automatically disable associated functionality.
+              </li>
+            </ul>
+
+            <p>
+              Note: When dynamically disabling a triggering element, the 4X
+              setDisabled() function should be used to set the disabled state of
+              the triggering element. This will ensure proper background
+              mapping.
+            </p>
+
+            <div>
+              <pre><code class="language-javascript">
 $A.setDisabled(triggeringElement, boolean);
 </code></pre>
-                    </div>
+            </div>
 
-                    <h2>HTML syntax</h2>
+            <h2>HTML syntax</h2>
 
-                    <h3>Standard Unchecked</h3>
+            <h3>Standard Unchecked</h3>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;div data-radio >
+            <div>
+              <pre><code class="language-markup">&lt;div data-radio >
 Markup with radio name
 &lt;input hidden type="radio" name="OptionalBoundRadio" />
 &lt;/div></code></pre>
-                    </div>
+            </div>
 
-                    <h3>Standard Checked</h3>
+            <h3>Standard Checked</h3>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;div data-radio="true" >
+            <div>
+              <pre><code class="language-markup">&lt;div data-radio="true" >
 Markup with radio name
 &lt;input checked hidden type="radio" name="OptionalBoundRadio" />
 &lt;/div></code></pre>
-                    </div>
-
-                    <p>IMPORTANT: The focusable active element must not include any other exposed active elements, otherwise these will not be accessible to non-sighted screen reader users.</p>
-
-                    <p>Whenever a hidden checkbox is embedded within the simulated control, it will automatically reflect the toggled state of the parent element. This makes it possible to implement custom toggle controls that can be submitted in the same manner as native form controls. This, however, is optional, and may be removed without having any negative impact on the functionality of the simulated toggle control.</p>
-
-                    <h2>JavaScript syntax</h2>
+            </div>
 
-                    <div>
-                        <pre><code class="language-javascript">$A.setRadio( domNodeOrCSSSelectorForTriggeringElements , {
+            <p>
+              IMPORTANT: The focusable active element must not include any other
+              exposed active elements, otherwise these will not be accessible to
+              non-sighted screen reader users.
+            </p>
+
+            <p>
+              Whenever a hidden checkbox is embedded within the simulated
+              control, it will automatically reflect the toggled state of the
+              parent element. This makes it possible to implement custom toggle
+              controls that can be submitted in the same manner as native form
+              controls. This, however, is optional, and may be removed without
+              having any negative impact on the functionality of the simulated
+              toggle control.
+            </p>
+
+            <h2>JavaScript syntax</h2>
+
+            <div>
+              <pre><code class="language-javascript">$A.setRadio( domNodeOrCSSSelectorForTriggeringElements , {
 // Configure functionality key / value mappings
 });</code></pre>
-                    </div>
+            </div>
+
+            <ul>
+              <li>Module file: Button.js</li>
+              <li>Requires: AccName.js, RovingTabIndex.js.</li>
+              <li>Recommended: Velocity.js, VelocityUI.js.</li>
+            </ul>
 
-                    <h2>Parameters</h2>
+            <h2>Parameters</h2>
 
-                    <ol>
-                        <li>A DOM element or CSS selector to specify the triggering elements</li>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <ol>
+              <li>
+                A DOM element or CSS selector to specify the triggering elements
+              </li>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <h3>Configuration</h3>
+            <h3>Configuration</h3>
 
-                    <div>
-                        <pre><code class="language-javascript">{
+            <div>
+              <pre><code class="language-javascript">{
 
 // Set an explicit name for the radio.
 // If undefined, the accessible name will default to the text content within the radio element.
@@ -137,67 +197,96 @@ <h3>Configuration</h3>
 }
 
 }</code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Sliders/Horizontal/index.htm b/Templates/Sliders/Horizontal/index.htm
index 3cadc000..7554016d 100644
--- a/Templates/Sliders/Horizontal/index.htm
+++ b/Templates/Sliders/Horizontal/index.htm
@@ -1,147 +1,201 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Horizontal ARIA Slider - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../Horizontal/index.htm" aria-current="page"
+                  >Horizontal</a
+                >
+              </li>
+              <li><a href="../Vertical/index.htm">Vertical</a></li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Horizontal ARIA Slider</h1>
+              <section class="sample-block">
+                <table class="sample">
+                  <tr>
+                    <td>
+                      <div class="slider wrapper">
+                        <div class="slider decrease button"><b>-10</b></div>
+                        <div class="slider bar">
+                          <div class="slider handle"></div>
+                        </div>
+                        <div class="slider increase button"><b>10</b></div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <b id="value">0</b>
+                    </td>
+                  </tr>
+                </table>
+              </section>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Horizontal/index.htm" aria-current="page">Horizontal</a></li>
-                        <li><a href="../Vertical/index.htm">Vertical</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>
+                The slider functionality is optimized for screen reader and
+                keyboard only users:
+              </h2>
+              <ul>
+                <li>Set focus on the slider.</li>
+                <li>Press the Arrow keys to move the slider.</li>
+                <li>
+                  Press <kbd class="home">Home</kbd> or
+                  <kbd class="end">End</kbd> to jump to the beginning or end.
+                </li>
+                <li>
+                  Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to jump by
+                  increments of 10%.
+                </li>
+                <li>Mouse users can drag the slider as usual.</li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Horizontal ARIA Slider</h1>
-                        <section class="sample-block">
-
-                            <table class="sample">
-                                <tr>
-                                    <td>
-                                        <div class="slider wrapper">
-                                            <div class="slider decrease button"><b>-10</b></div>
-                                            <div class="slider bar">
-                                                <div class="slider handle"></div>
-                                            </div>
-                                            <div class="slider increase button"><b>10</b></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>
-                                        <b id="value">0</b>
-                                    </td>
-                                </tr>
-                            </table>
-
-                        </section>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The slider functionality is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus on the slider.</li>
-                            <li>Press the Arrow keys to move the slider.</li>
-                            <li>Press <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to jump to the beginning or end.</li>
-                            <li>Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to jump by increments of 10%.</li>
-                            <li>Mouse users can drag the slider as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Sliders/Vertical/index.htm b/Templates/Sliders/Vertical/index.htm
index 7f4d5d6a..26d67ea8 100644
--- a/Templates/Sliders/Vertical/index.htm
+++ b/Templates/Sliders/Vertical/index.htm
@@ -1,170 +1,226 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Vertical ARIA Slider - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../Horizontal/index.htm">Horizontal</a></li>
+              <li>
+                <a href="../Vertical/index.htm" aria-current="page">Vertical</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Vertical ARIA Slider</h1>
+              <section class="sample-block">
+                <table class="sample">
+                  <tr>
+                    <td>
+                      <div class="slider wrapper">
+                        <div class="slider increase button"><b>11 PM</b></div>
+                        <div class="slider bar">
+                          <div class="slider handle"></div>
+                        </div>
+                        <div class="slider decrease button"><b>12 AM</b></div>
+                      </div>
+                    </td>
+                    <td>
+                      <select
+                        id="syncSelect"
+                        size="24"
+                        title="Mirrored select field"
+                      >
+                        <option value="23">11:00 PM</option>
+                        <option value="22">10:00 PM</option>
+                        <option value="21">9:00 PM</option>
+                        <option value="20">8:00 PM</option>
+                        <option value="19">7:00 PM</option>
+                        <option value="18">6:00 PM</option>
+                        <option value="17">5:00 PM</option>
+                        <option value="16">4:00 PM</option>
+                        <option value="15">3:00 PM</option>
+                        <option value="14">2:00 PM</option>
+                        <option value="13">1:00 PM</option>
+                        <option value="12">12:00 PM</option>
+                        <option value="11">11:00 AM</option>
+                        <option value="10">10:00 AM</option>
+                        <option value="9">9:00 AM</option>
+                        <option value="8">8:00 AM</option>
+                        <option value="7">7:00 AM</option>
+                        <option value="6">6:00 AM</option>
+                        <option value="5">5:00 AM</option>
+                        <option value="4">4:00 AM</option>
+                        <option value="3">3:00 AM</option>
+                        <option value="2">2:00 AM</option>
+                        <option value="1">1:00 AM</option>
+                        <option value="0">12:00 AM</option>
+                      </select>
+                    </td>
+                  </tr>
+                </table>
+              </section>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Horizontal/index.htm">Horizontal</a></li>
-                        <li><a href="../Vertical/index.htm" aria-current="page">Vertical</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>
+                The slider functionality is optimized for screen reader and
+                keyboard only users:
+              </h2>
+              <ul>
+                <li>Set focus on the slider.</li>
+                <li>Press the Arrow keys to move the slider.</li>
+                <li>
+                  Press <kbd class="home">Home</kbd> or
+                  <kbd class="end">End</kbd> to jump to the beginning or end.
+                </li>
+                <li>
+                  Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to jump by
+                  increments of 10%.
+                </li>
+                <li>Mouse users can drag the slider as usual.</li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Vertical ARIA Slider</h1>
-                        <section class="sample-block">
-
-                            <table class="sample">
-                                <tr>
-                                    <td>
-                                        <div class="slider wrapper">
-                                            <div class="slider increase button"><b>11 PM</b></div>
-                                            <div class="slider bar">
-                                                <div class="slider handle"></div>
-                                            </div>
-                                            <div class="slider decrease button"><b>12 AM</b></div>
-                                        </div>
-                                    </td>
-                                    <td>
-                                        <select id="syncSelect" size="24" title="Mirrored select field">
-                                            <option value="23">11:00 PM</option>
-                                            <option value="22">10:00 PM</option>
-                                            <option value="21">9:00 PM</option>
-                                            <option value="20">8:00 PM</option>
-                                            <option value="19">7:00 PM</option>
-                                            <option value="18">6:00 PM</option>
-                                            <option value="17">5:00 PM</option>
-                                            <option value="16">4:00 PM</option>
-                                            <option value="15">3:00 PM</option>
-                                            <option value="14">2:00 PM</option>
-                                            <option value="13">1:00 PM</option>
-                                            <option value="12">12:00 PM</option>
-                                            <option value="11">11:00 AM</option>
-                                            <option value="10">10:00 AM</option>
-                                            <option value="9">9:00 AM</option>
-                                            <option value="8">8:00 AM</option>
-                                            <option value="7">7:00 AM</option>
-                                            <option value="6">6:00 AM</option>
-                                            <option value="5">5:00 AM</option>
-                                            <option value="4">4:00 AM</option>
-                                            <option value="3">3:00 AM</option>
-                                            <option value="2">2:00 AM</option>
-                                            <option value="1">1:00 AM</option>
-                                            <option value="0">12:00 AM</option>
-                                        </select>
-                                    </td>
-                                </tr>
-                            </table>
-
-                        </section>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The slider functionality is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus on the slider.</li>
-                            <li>Press the Arrow keys to move the slider.</li>
-                            <li>Press <kbd class="home">Home</kbd> or <kbd class="end">End</kbd> to jump to the beginning or end.</li>
-                            <li>Press <kbd>PageUp</kbd> or <kbd>PageDown</kbd> to jump by increments of 10%.</li>
-                            <li>Mouse users can drag the slider as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Sliders/index.htm b/Templates/Sliders/index.htm
index abbf0037..4250e547 100644
--- a/Templates/Sliders/index.htm
+++ b/Templates/Sliders/index.htm
@@ -1,52 +1,78 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Sliders - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
+    <meta name="description" content="Scalable ARIA Components" />
     <meta name="Author" content="Bryan Garaventa" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Sliders</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="Horizontal/index.htm">Horizontal</a></li>
-                        <li><a href="Vertical/index.htm">Vertical</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>Set focus to the slider, press the arrow keys to move it backward or forward, press Home or End to move the slider to the beginning or end, press PageUp or PageDown to move it backward or forward in increments of 10%.</p>
-
-                    <p>The 4X ARIA Slider module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <h2>HTML syntax</h2>
-
-                    <div>
-                        <pre><code class="language-markup">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Sliders</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="Horizontal/index.htm">Horizontal</a></li>
+              <li><a href="Vertical/index.htm">Vertical</a></li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              Set focus to the slider, press the arrow keys to move it backward
+              or forward, press Home or End to move the slider to the beginning
+              or end, press PageUp or PageDown to move it backward or forward in
+              increments of 10%.
+            </p>
+
+            <p>
+              The 4X ARIA Slider module automatically configures all required
+              ARIA attributes and focus handling, in strict accordance with the
+              ARIA specification.
+            </p>
+
+            <h2>HTML syntax</h2>
+
+            <div>
+              <pre><code class="language-markup">
 &lt;div class="slider wrapper">
   &lt;div class="slider decrease button">0&lt;/div>
   &lt;div class="slider bar">
@@ -55,29 +81,37 @@ <h2>HTML syntax</h2>
   &lt;div class="slider increase button">100&lt;/div>
 &lt;/div>
 </code></pre>
-                    </div>
+            </div>
 
-                    <h2>JavaScript syntax</h2>
+            <h2>JavaScript syntax</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">
+            <div>
+              <pre><code class="language-javascript">
 var ariaSlider = new $A.Slider(".slider.bar", {
 // Configure functionality key / value mappings
 });
 </code></pre>
-                    </div>
+            </div>
 
-                    <h2>Parameters</h2>
+            <ul>
+              <li>Module file: Slider.js</li>
+              <li>Requires: CurrentDevice.js, Dragdealer.js.</li>
+            </ul>
 
-                    <ol>
-                        <li>A DOM element or CSS selector to specify the slider handle's container (slideBar) element.</li>
-                        <li>A configuration map to customize behaviors and options.</li>
-                    </ol>
+            <h2>Parameters</h2>
 
-                    <h3>Configuration</h3>
+            <ol>
+              <li>
+                A DOM element or CSS selector to specify the slider handle's
+                container (slideBar) element.
+              </li>
+              <li>A configuration map to customize behaviors and options.</li>
+            </ol>
 
-                    <div>
-                        <pre><code class="language-javascript">{
+            <h3>Configuration</h3>
+
+            <div>
+              <pre><code class="language-javascript">{
 
 label: "Accessible name for the slider",
 
@@ -148,12 +182,12 @@ <h3>Configuration</h3>
 }
 
 }</code></pre>
-                    </div>
+            </div>
 
-                    <h2>Slider Instance Properties and Methods</h2>
+            <h2>Slider Instance Properties and Methods</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">
+            <div>
+              <pre><code class="language-javascript">
 
 // Access the Dragdealer instance object.
   ariaSlider.dd
@@ -190,67 +224,96 @@ <h2>Slider Instance Properties and Methods</h2>
   ariaSlider.pageDown();
 
 </code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Switches/Standard/index.htm b/Templates/Switches/Standard/index.htm
index 55f09865..b3e390a4 100644
--- a/Templates/Switches/Standard/index.htm
+++ b/Templates/Switches/Standard/index.htm
@@ -1,154 +1,214 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Standard Switches - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Standard/index.htm" aria-current="page">Standard</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Standard Switches</h1>
-                        <section class="sample-block">
-
-                            <!--
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../Standard/index.htm" aria-current="page">Standard</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Standard Switches</h1>
+              <section class="sample-block">
+                <!--
 IMPORTANT: The internal markup for an ARIA Switch must never include any other types of exposed active elements.
 Otherwise, based on how ARIA works in accordance with the spec, none of the embedded controls will be accessible to non-sighted screen reader users.
 -->
 
-                            <ul class="switch--container">
-                                <li>
-                                    <div data-switch class="aria-switch thermostat">
-                                        <span class="aria-switch__label">Thermostat</span>
-                                        <span class="aria-switch__button" aria-hidden="true"></span>
-                                        <input hidden type="switch" name="Thermostat" />
-                                    </div>
-                                </li>
-                                <li>
-                                    <div data-switch="true" class="aria-switch security">
-                                        <span class="aria-switch__label">Security</span>
-                                        <span class="aria-switch__button" aria-hidden="true"></span>
-                                        <input checked hidden type="switch" name="Security" />
-                                    </div>
-                                </li>
-                                <li>
-                                    <div data-switch class="aria-switch lights">
-                                        <span class="aria-switch__label">Lights</span>
-                                        <span class="aria-switch__button" aria-hidden="true"></span>
-                                        <input hidden type="switch" name="Lights" />
-                                    </div>
-                                </li>
-                            </ul>
-
-                        </section>
+                <ul class="switch--container">
+                  <li>
+                    <div data-switch class="aria-switch thermostat">
+                      <span class="aria-switch__label">Thermostat</span>
+                      <span
+                        class="aria-switch__button"
+                        aria-hidden="true"
+                      ></span>
+                      <input hidden type="switch" name="Thermostat" />
                     </div>
-                    <div class="keyboard flex-item">
-                        <h2>The simulated switches are optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus to the switches using the keyboard.</li>
-                            <li>Press <kbd>Enter</kbd> or <kbd>Space</kbd> to activate a switch.</li>
-                            <li>Mouse users can click the desired switch to activate as usual.</li>
-                        </ul>
+                  </li>
+                  <li>
+                    <div data-switch="true" class="aria-switch security">
+                      <span class="aria-switch__label">Security</span>
+                      <span
+                        class="aria-switch__button"
+                        aria-hidden="true"
+                      ></span>
+                      <input checked hidden type="switch" name="Security" />
                     </div>
-                </div>
-
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+                  </li>
+                  <li>
+                    <div data-switch class="aria-switch lights">
+                      <span class="aria-switch__label">Lights</span>
+                      <span
+                        class="aria-switch__button"
+                        aria-hidden="true"
+                      ></span>
+                      <input hidden type="switch" name="Lights" />
+                    </div>
+                  </li>
+                </ul>
+              </section>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The simulated switches are optimized for screen reader and
+                keyboard only users:
+              </h2>
+              <ul>
+                <li>Set focus to the switches using the keyboard.</li>
+                <li>
+                  Press <kbd>Enter</kbd> or <kbd>Space</kbd> to activate a
+                  switch.
+                </li>
+                <li>
+                  Mouse users can click the desired switch to activate as usual.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Switches/index.htm b/Templates/Switches/index.htm
index e3e21354..24b3f65f 100644
--- a/Templates/Switches/index.htm
+++ b/Templates/Switches/index.htm
@@ -1,112 +1,170 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Switches - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Switches</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="Standard/index.htm">Standard</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>The switch should be focusable using the keyboard, and toggle its switchable state when pressing the Spacebar or Enter key.</p>
-
-                    <p>The 4X ARIA Switch module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <p>The following attributes are handled automatically by the Switch module:</p>
-
-                    <ul>
-                        <li> role=switch</li>
-                        <li> aria-checked</li>
-                        <li> tabindex</li>
-                    </ul>
-
-                    <p>Available attributes for switch elements:</p>
-
-                    <ul>
-                        <li> data-switch : May be set to "false" or "true" to set the current state of a switchable control when rendered.</li>
-                        <li> aria-disabled : When set to "true" on the triggering element, will automatically disable associated functionality.</li>
-                    </ul>
-
-                    <p>Note: When dynamically disabling a triggering element, the 4X setDisabled() function should be used to set the disabled state of the triggering element. This will ensure proper background mapping.</p>
-
-                    <div>
-                        <pre><code class="language-javascript">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Switches</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="Standard/index.htm">Standard</a></li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              The switch should be focusable using the keyboard, and toggle its
+              switchable state when pressing the Spacebar or Enter key.
+            </p>
+
+            <p>
+              The 4X ARIA Switch module automatically configures all required
+              ARIA attributes and focus handling, in strict accordance with the
+              ARIA specification.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the Switch
+              module:
+            </p>
+
+            <ul>
+              <li>role=switch</li>
+              <li>aria-checked</li>
+              <li>tabindex</li>
+            </ul>
+
+            <p>Available attributes for switch elements:</p>
+
+            <ul>
+              <li>
+                data-switch : May be set to "false" or "true" to set the current
+                state of a switchable control when rendered.
+              </li>
+              <li>
+                aria-disabled : When set to "true" on the triggering element,
+                will automatically disable associated functionality.
+              </li>
+            </ul>
+
+            <p>
+              Note: When dynamically disabling a triggering element, the 4X
+              setDisabled() function should be used to set the disabled state of
+              the triggering element. This will ensure proper background
+              mapping.
+            </p>
+
+            <div>
+              <pre><code class="language-javascript">
 $A.setDisabled(triggeringElement, boolean);
 </code></pre>
-                    </div>
+            </div>
 
-                    <h2>HTML syntax</h2>
+            <h2>HTML syntax</h2>
 
-                    <h3>Standard Off</h3>
+            <h3>Standard Off</h3>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;div data-switch >
+            <div>
+              <pre><code class="language-markup">&lt;div data-switch >
   Markup with switch name
   &lt;input hidden type="checkbox" name="OptionalBoundCheckbox" />
 &lt;/div></code></pre>
-                    </div>
+            </div>
 
-                    <h3>Standard On</h3>
+            <h3>Standard On</h3>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;div data-switch="true" >
+            <div>
+              <pre><code class="language-markup">&lt;div data-switch="true" >
   Markup with switch name
   &lt;input checked hidden type="checkbox" name="OptionalBoundCheckbox" />
 &lt;/div></code></pre>
-                    </div>
-
-                    <p>IMPORTANT: The focusable active element must not include any other exposed active elements, otherwise these will not be accessible to non-sighted screen reader users.</p>
-
-                    <p>Whenever a hidden checkbox is embedded within the simulated control, it will automatically reflect the toggled state of the parent element. This makes it possible to implement custom toggle controls that can be submitted in the same manner as native form controls. This, however, is optional, and may be removed without having any negative impact on the functionality of the simulated toggle control.</p>
-
-                    <h2>JavaScript syntax</h2>
+            </div>
 
-                    <div>
-                        <pre><code class="language-javascript">$A.setSwitch( domNodeOrCSSSelectorForTriggeringElement , {
+            <p>
+              IMPORTANT: The focusable active element must not include any other
+              exposed active elements, otherwise these will not be accessible to
+              non-sighted screen reader users.
+            </p>
+
+            <p>
+              Whenever a hidden checkbox is embedded within the simulated
+              control, it will automatically reflect the toggled state of the
+              parent element. This makes it possible to implement custom toggle
+              controls that can be submitted in the same manner as native form
+              controls. This, however, is optional, and may be removed without
+              having any negative impact on the functionality of the simulated
+              toggle control.
+            </p>
+
+            <h2>JavaScript syntax</h2>
+
+            <div>
+              <pre><code class="language-javascript">$A.setSwitch( domNodeOrCSSSelectorForTriggeringElement , {
 // Configure functionality key / value mappings
 });</code></pre>
-                    </div>
+            </div>
+
+            <ul>
+              <li>Module file: Button.js</li>
+              <li>Requires: AccName.js, RovingTabIndex.js.</li>
+              <li>Recommended: Velocity.js, VelocityUI.js.</li>
+            </ul>
 
-                    <h2>Parameters</h2>
+            <h2>Parameters</h2>
 
-                    <ol>
-                        <li>A DOM element or CSS selector to specify the triggering element</li>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <ol>
+              <li>
+                A DOM element or CSS selector to specify the triggering element
+              </li>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <h3>Configuration</h3>
+            <h3>Configuration</h3>
 
-                    <div>
-                        <pre><code class="language-javascript">{
+            <div>
+              <pre><code class="language-javascript">{
 
 // Set an explicit name for the switch.
 // If undefined, the accessible name will default to the text content within the switch element.
@@ -140,67 +198,96 @@ <h3>Configuration</h3>
 }
 
 }</code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Tabs/External - Straylight/files/tabs.html b/Templates/Tabs/External - Straylight/files/tabs.html
index 08f62e93..5f8c4034 100644
--- a/Templates/Tabs/External - Straylight/files/tabs.html	
+++ b/Templates/Tabs/External - Straylight/files/tabs.html	
@@ -1,63 +1,51 @@
 <html>
-
-<body>
-
+  <body>
     <div id="tab1content" class="aria-tabpanel">
-        <div>
-            Tab Panel One Content
-        </div>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                // alert(DC.id);
-            })();
-        </script>
+      <div>Tab Panel One Content</div>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          // alert(DC.id);
+        })();
+      </script>
     </div>
 
     <div id="tab2content" class="aria-tabpanel">
-        <div>
-            Tab Panel Two Content
-        </div>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                // alert(DC.id);
-            })();
-        </script>
+      <div>Tab Panel Two Content</div>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          // alert(DC.id);
+        })();
+      </script>
     </div>
 
     <div id="tab3content" class="aria-tabpanel">
-        <div>
-            Tab Panel Three Content
-        </div>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                // alert(DC.id);
-            })();
-        </script>
+      <div>Tab Panel Three Content</div>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          // alert(DC.id);
+        })();
+      </script>
     </div>
 
     <div id="tab4content" class="aria-tabpanel">
-        <div>
-            Tab Panel Four Content
-        </div>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                // alert(DC.id);
-            })();
-        </script>
+      <div>Tab Panel Four Content</div>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          // alert(DC.id);
+        })();
+      </script>
     </div>
-
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/Tabs/External - Straylight/index.htm b/Templates/Tabs/External - Straylight/index.htm
index f85c1445..747e6204 100644
--- a/Templates/Tabs/External - Straylight/index.htm	
+++ b/Templates/Tabs/External - Straylight/index.htm	
@@ -1,142 +1,229 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Tabs (Straylight External Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/tabs.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Tabs (Straylight External Content) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/tabs.css" />
     <script src="/4X/4X.js#Straylight"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="index.htm" aria-current="page"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                Tabs <small>(Straylight External Content)</small>
+              </h1>
+              <div class="aria-tablist">
+                <button
+                  id="Tab1Id"
+                  class="aria-tab tab1"
+                  data-controls="files/tabs.html#tab1content"
+                  data-root="tabInsertId"
+                  data-active
+                >
+                  Name 1
+                </button>
+                <button
+                  id="Tab2Id"
+                  class="aria-tab tab2"
+                  data-controls="files/tabs.html#tab2content"
+                  data-root="tabInsertId"
+                >
+                  Name 2
+                </button>
+                <button
+                  id="Tab3Id"
+                  class="aria-tab tab3"
+                  data-controls="files/tabs.html#tab3content"
+                  data-root="tabInsertId"
+                >
+                  Name 3
+                </button>
+                <button
+                  id="Tab4Id"
+                  aria-disabled="true"
+                  title="Disabled"
+                  class="aria-tab tab4"
+                  data-controls="files/tabs.html#tab4content"
+                  data-root="tabInsertId"
+                >
+                  Name 4
+                </button>
+              </div>
+              <div class="content" id="tabInsertId"></div>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="index.htm" aria-current="page">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>The tab controls are keyboard accessible:</h2>
+              <ul>
+                <li>Set focus on the tab control.</li>
+                <li>Press the Arrow keys to move focus between tabs.</li>
+                <li>
+                  Press <kbd>Home</kbd> or <kbd>End</kbd> to move to the first
+                  or last tab.
+                </li>
+                <li>
+                  Press any letter or number to jump to a tab starting with that
+                  character or digit.
+                </li>
+                <li>
+                  Press the <kbd>Spacebar</kbd> to open (or optionally toggle if
+                  configured) the selected tab.
+                </li>
+                <li>Mouse users can click the desired tab as usual.</li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Tabs <small>(Straylight External Content)</small></h1>
-                        <div class="aria-tablist">
-                            <button id="Tab1Id" class="aria-tab tab1" data-controls="files/tabs.html#tab1content" data-root="tabInsertId" data-active>
-                                Name 1
-                            </button>
-                            <button id="Tab2Id" class="aria-tab tab2" data-controls="files/tabs.html#tab2content" data-root="tabInsertId">
-                                Name 2
-                            </button>
-                            <button id="Tab3Id" class="aria-tab tab3" data-controls="files/tabs.html#tab3content" data-root="tabInsertId">
-                                Name 3
-                            </button>
-                            <button id="Tab4Id" aria-disabled="true" title="Disabled" class="aria-tab tab4" data-controls="files/tabs.html#tab4content" data-root="tabInsertId">
-                                Name 4
-                            </button>
-                        </div>
-                        <div class="content" id="tabInsertId">
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The tab controls are keyboard accessible:</h2>
-                        <ul>
-                            <li>Set focus on the tab control.</li>
-                            <li>Press the Arrow keys to move focus between tabs.</li>
-                            <li>Press <kbd>Home</kbd> or <kbd>End</kbd> to move to the first or last tab.</li>
-                            <li>Press any letter or number to jump to a tab starting with that character or digit.</li>
-                            <li>Press the <kbd>Spacebar</kbd> to open (or optionally toggle if configured) the selected tab.</li>
-                            <li>Mouse users can click the desired tab as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Tabs/External/files/tabs.html b/Templates/Tabs/External/files/tabs.html
index 08f62e93..5f8c4034 100644
--- a/Templates/Tabs/External/files/tabs.html
+++ b/Templates/Tabs/External/files/tabs.html
@@ -1,63 +1,51 @@
 <html>
-
-<body>
-
+  <body>
     <div id="tab1content" class="aria-tabpanel">
-        <div>
-            Tab Panel One Content
-        </div>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                // alert(DC.id);
-            })();
-        </script>
+      <div>Tab Panel One Content</div>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          // alert(DC.id);
+        })();
+      </script>
     </div>
 
     <div id="tab2content" class="aria-tabpanel">
-        <div>
-            Tab Panel Two Content
-        </div>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                // alert(DC.id);
-            })();
-        </script>
+      <div>Tab Panel Two Content</div>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          // alert(DC.id);
+        })();
+      </script>
     </div>
 
     <div id="tab3content" class="aria-tabpanel">
-        <div>
-            Tab Panel Three Content
-        </div>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                // alert(DC.id);
-            })();
-        </script>
+      <div>Tab Panel Three Content</div>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          // alert(DC.id);
+        })();
+      </script>
     </div>
 
     <div id="tab4content" class="aria-tabpanel">
-        <div>
-            Tab Panel Four Content
-        </div>
-        <script>
-            (function() {
-                // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
-                // DC provides access to the originating DC object instance.
-                // E.G. DC.container is the container element where this content is rendered within.
-                // alert(DC.id);
-            })();
-        </script>
+      <div>Tab Panel Four Content</div>
+      <script>
+        (function () {
+          // The DC object is automatically declared when an embedded script is included within an external content resource to be imported.
+          // DC provides access to the originating DC object instance.
+          // E.G. DC.container is the container element where this content is rendered within.
+          // alert(DC.id);
+        })();
+      </script>
     </div>
-
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/Tabs/External/index.htm b/Templates/Tabs/External/index.htm
index 9f8dd1de..67ad0003 100644
--- a/Templates/Tabs/External/index.htm
+++ b/Templates/Tabs/External/index.htm
@@ -1,143 +1,226 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Tabs (External Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/tabs.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/tabs.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="index.htm" aria-current="page">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Tabs <small>(External Content)</small></h1>
+              <div class="aria-tablist">
+                <button
+                  id="Tab1Id"
+                  class="aria-tab tab1"
+                  data-controls="files/tabs.html#tab1content"
+                  data-root="tabInsertId"
+                  data-active
+                >
+                  Name 1
+                </button>
+                <button
+                  id="Tab2Id"
+                  class="aria-tab tab2"
+                  data-controls="files/tabs.html#tab2content"
+                  data-root="tabInsertId"
+                >
+                  Name 2
+                </button>
+                <button
+                  id="Tab3Id"
+                  class="aria-tab tab3"
+                  data-controls="files/tabs.html#tab3content"
+                  data-root="tabInsertId"
+                >
+                  Name 3
+                </button>
+                <button
+                  id="Tab4Id"
+                  aria-disabled="true"
+                  title="Disabled"
+                  class="aria-tab tab4"
+                  data-controls="files/tabs.html#tab4content"
+                  data-root="tabInsertId"
+                >
+                  Name 4
+                </button>
+              </div>
+              <div class="content" id="tabInsertId"></div>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="index.htm" aria-current="page">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>The tab controls are keyboard accessible:</h2>
+              <ul>
+                <li>Set focus on the tab control.</li>
+                <li>Press the Arrow keys to move focus between tabs.</li>
+                <li>
+                  Press <kbd>Home</kbd> or <kbd>End</kbd> to move to the first
+                  or last tab.
+                </li>
+                <li>
+                  Press any letter or number to jump to a tab starting with that
+                  character or digit.
+                </li>
+                <li>
+                  Press the <kbd>Spacebar</kbd> to open (or optionally toggle if
+                  configured) the selected tab.
+                </li>
+                <li>Mouse users can click the desired tab as usual.</li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Tabs <small>(External Content)</small></h1>
-                        <div class="aria-tablist">
-                            <button id="Tab1Id" class="aria-tab tab1" data-controls="files/tabs.html#tab1content" data-root="tabInsertId" data-active>
-                                Name 1
-                            </button>
-                            <button id="Tab2Id" class="aria-tab tab2" data-controls="files/tabs.html#tab2content" data-root="tabInsertId">
-                                Name 2
-                            </button>
-                            <button id="Tab3Id" class="aria-tab tab3" data-controls="files/tabs.html#tab3content" data-root="tabInsertId">
-                                Name 3
-                            </button>
-                            <button id="Tab4Id" aria-disabled="true" title="Disabled" class="aria-tab tab4" data-controls="files/tabs.html#tab4content" data-root="tabInsertId">
-                                Name 4
-                            </button>
-                        </div>
-                        <div class="content" id="tabInsertId">
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The tab controls are keyboard accessible:</h2>
-                        <ul>
-                            <li>Set focus on the tab control.</li>
-                            <li>Press the Arrow keys to move focus between tabs.</li>
-                            <li>Press <kbd>Home</kbd> or <kbd>End</kbd> to move to the first or last tab.</li>
-                            <li>Press any letter or number to jump to a tab starting with that character or digit.</li>
-                            <li>Press the <kbd>Spacebar</kbd> to open (or optionally toggle if configured) the selected tab.</li>
-                            <li>Mouse users can click the desired tab as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Tabs/Internal - Straylight/index.htm b/Templates/Tabs/Internal - Straylight/index.htm
index 27687ab9..f36710f4 100644
--- a/Templates/Tabs/Internal - Straylight/index.htm	
+++ b/Templates/Tabs/Internal - Straylight/index.htm	
@@ -1,159 +1,245 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>ARIA Tabs (Straylight Internal Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/tabs.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      ARIA Tabs (Straylight Internal Content) - Apex 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/tabs.css" />
     <script src="/4X/4X.js#Straylight"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="index.htm" aria-current="page">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Tabs <small>(Straylight Internal Content)</small></h1>
-                        <div class="aria-tablist">
-                            <button id="Tab1Id" class="aria-tab tab1" data-controls="tab1content" data-root="tabInsertId" data-active>
-                                Name 1
-                            </button>
-                            <button id="Tab2Id" class="aria-tab tab2" data-controls="tab2content" data-root="tabInsertId">
-                                Name 2
-                            </button>
-                            <button id="Tab3Id" class="aria-tab tab3" data-controls="tab3content" data-root="tabInsertId">
-                                Name 3
-                            </button>
-                            <button id="Tab4Id" aria-disabled="true" title="Disabled" class="aria-tab tab4" data-controls="tab4content" data-root="tabInsertId">
-                                Name 4
-                            </button>
-                        </div>
-                        <div class="content" id="tabInsertId">
-
-                            <div hidden class="aria-tabpanel content" id="tab1content">
-                                <p>Tab Panel One Content
-                            </div>
-
-                            <div hidden class="aria-tabpanel content" id="tab2content">
-                                <p>Tab Panel Two Content
-                            </div>
-
-                            <div hidden class="aria-tabpanel content" id="tab3content">
-                                <p>Tab Panel Three Content
-                            </div>
-
-                            <div hidden class="aria-tabpanel content" id="tab4content">
-                                <p>Tab Panel Four Content
-                            </div>
-
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The tab controls are keyboard accessible:</h2>
-                        <ul>
-                            <li>Set focus on the tab control.</li>
-                            <li>Press the Arrow keys to move focus between tabs.</li>
-                            <li>Press <kbd>Home</kbd> or <kbd>End</kbd> to move to the first or last tab.</li>
-                            <li>Press any letter or number to jump to a tab starting with that character or digit.</li>
-                            <li>Press the <kbd>Spacebar</kbd> to open (or optionally toggle if configured) the selected tab.</li>
-                            <li>Mouse users can click the desired tab as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="index.htm" aria-current="page"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                Tabs <small>(Straylight Internal Content)</small>
+              </h1>
+              <div class="aria-tablist">
+                <button
+                  id="Tab1Id"
+                  class="aria-tab tab1"
+                  data-controls="tab1content"
+                  data-root="tabInsertId"
+                  data-active
+                >
+                  Name 1
+                </button>
+                <button
+                  id="Tab2Id"
+                  class="aria-tab tab2"
+                  data-controls="tab2content"
+                  data-root="tabInsertId"
+                >
+                  Name 2
+                </button>
+                <button
+                  id="Tab3Id"
+                  class="aria-tab tab3"
+                  data-controls="tab3content"
+                  data-root="tabInsertId"
+                >
+                  Name 3
+                </button>
+                <button
+                  id="Tab4Id"
+                  aria-disabled="true"
+                  title="Disabled"
+                  class="aria-tab tab4"
+                  data-controls="tab4content"
+                  data-root="tabInsertId"
+                >
+                  Name 4
+                </button>
+              </div>
+              <div class="content" id="tabInsertId">
+                <div hidden class="aria-tabpanel content" id="tab1content">
+                  <p>Tab Panel One Content</p>
                 </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
+
+                <div hidden class="aria-tabpanel content" id="tab2content">
+                  <p>Tab Panel Two Content</p>
                 </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+
+                <div hidden class="aria-tabpanel content" id="tab3content">
+                  <p>Tab Panel Three Content</p>
                 </div>
+
+                <div hidden class="aria-tabpanel content" id="tab4content">
+                  <p>Tab Panel Four Content</p>
+                </div>
+              </div>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>The tab controls are keyboard accessible:</h2>
+              <ul>
+                <li>Set focus on the tab control.</li>
+                <li>Press the Arrow keys to move focus between tabs.</li>
+                <li>
+                  Press <kbd>Home</kbd> or <kbd>End</kbd> to move to the first
+                  or last tab.
+                </li>
+                <li>
+                  Press any letter or number to jump to a tab starting with that
+                  character or digit.
+                </li>
+                <li>
+                  Press the <kbd>Spacebar</kbd> to open (or optionally toggle if
+                  configured) the selected tab.
+                </li>
+                <li>Mouse users can click the desired tab as usual.</li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Tabs/Internal/index.htm b/Templates/Tabs/Internal/index.htm
index e303150a..3ea563db 100644
--- a/Templates/Tabs/Internal/index.htm
+++ b/Templates/Tabs/Internal/index.htm
@@ -1,160 +1,242 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Tabs (Internal Content) - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/tabs.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/tabs.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="index.htm" aria-current="page">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Tabs <small>(Internal Content)</small></h1>
-                        <div class="aria-tablist">
-                            <button id="Tab1Id" class="aria-tab tab1" data-controls="tab1content" data-root="tabInsertId" data-active>
-                                Name 1
-                            </button>
-                            <button id="Tab2Id" class="aria-tab tab2" data-controls="tab2content" data-root="tabInsertId">
-                                Name 2
-                            </button>
-                            <button id="Tab3Id" class="aria-tab tab3" data-controls="tab3content" data-root="tabInsertId">
-                                Name 3
-                            </button>
-                            <button id="Tab4Id" aria-disabled="true" title="Disabled" class="aria-tab tab4" data-controls="tab4content" data-root="tabInsertId">
-                                Name 4
-                            </button>
-                        </div>
-                        <div class="content" id="tabInsertId">
-
-                            <div hidden class="aria-tabpanel content" id="tab1content">
-                                <p>Tab Panel One Content
-                            </div>
-
-                            <div hidden class="aria-tabpanel content" id="tab2content">
-                                <p>Tab Panel Two Content
-                            </div>
-
-                            <div hidden class="aria-tabpanel content" id="tab3content">
-                                <p>Tab Panel Three Content
-                            </div>
-
-                            <div hidden class="aria-tabpanel content" id="tab4content">
-                                <p>Tab Panel Four Content
-                            </div>
-
-                        </div>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The tab controls are keyboard accessible:</h2>
-                        <ul>
-                            <li>Set focus on the tab control.</li>
-                            <li>Press the Arrow keys to move focus between tabs.</li>
-                            <li>Press <kbd>Home</kbd> or <kbd>End</kbd> to move to the first or last tab.</li>
-                            <li>Press any letter or number to jump to a tab starting with that character or digit.</li>
-                            <li>Press the <kbd>Spacebar</kbd> to open (or optionally toggle if configured) the selected tab.</li>
-                            <li>Mouse users can click the desired tab as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="index.htm" aria-current="page">Internal</a></li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Tabs <small>(Internal Content)</small></h1>
+              <div class="aria-tablist">
+                <button
+                  id="Tab1Id"
+                  class="aria-tab tab1"
+                  data-controls="tab1content"
+                  data-root="tabInsertId"
+                  data-active
+                >
+                  Name 1
+                </button>
+                <button
+                  id="Tab2Id"
+                  class="aria-tab tab2"
+                  data-controls="tab2content"
+                  data-root="tabInsertId"
+                >
+                  Name 2
+                </button>
+                <button
+                  id="Tab3Id"
+                  class="aria-tab tab3"
+                  data-controls="tab3content"
+                  data-root="tabInsertId"
+                >
+                  Name 3
+                </button>
+                <button
+                  id="Tab4Id"
+                  aria-disabled="true"
+                  title="Disabled"
+                  class="aria-tab tab4"
+                  data-controls="tab4content"
+                  data-root="tabInsertId"
+                >
+                  Name 4
+                </button>
+              </div>
+              <div class="content" id="tabInsertId">
+                <div hidden class="aria-tabpanel content" id="tab1content">
+                  <p>Tab Panel One Content</p>
                 </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
+
+                <div hidden class="aria-tabpanel content" id="tab2content">
+                  <p>Tab Panel Two Content</p>
                 </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+
+                <div hidden class="aria-tabpanel content" id="tab3content">
+                  <p>Tab Panel Three Content</p>
                 </div>
+
+                <div hidden class="aria-tabpanel content" id="tab4content">
+                  <p>Tab Panel Four Content</p>
+                </div>
+              </div>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>The tab controls are keyboard accessible:</h2>
+              <ul>
+                <li>Set focus on the tab control.</li>
+                <li>Press the Arrow keys to move focus between tabs.</li>
+                <li>
+                  Press <kbd>Home</kbd> or <kbd>End</kbd> to move to the first
+                  or last tab.
+                </li>
+                <li>
+                  Press any letter or number to jump to a tab starting with that
+                  character or digit.
+                </li>
+                <li>
+                  Press the <kbd>Spacebar</kbd> to open (or optionally toggle if
+                  configured) the selected tab.
+                </li>
+                <li>Mouse users can click the desired tab as usual.</li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Tabs/index.htm b/Templates/Tabs/index.htm
index 663ce4c6..99f9e194 100644
--- a/Templates/Tabs/index.htm
+++ b/Templates/Tabs/index.htm
@@ -1,87 +1,169 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Tabs - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Tabs</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="External/index.htm">External</a></li>
-                        <li><a href="External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="Internal/index.htm">Internal</a></li>
-                        <li><a href="Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>The group of triggering elements should have only one tab stop, the arrow keys should move focus between each Tab in the group, pressing Enter or Space should expand the desired Tab panel, the expanded state should be toggled appropriately on the triggering element, and the expanded Tab panel should be rendered directly after the group of triggering elements in the tab order.</p>
-
-                    <p>Though similar in both concept and execution to Tab controls, accordions are not the same. A Tab control has a series of grouped triggering elements that expand and collapse, the rendered content of which is inserted directly after the triggering element group when opened. The container element insertion point for all Tab control triggering elements is shared between them. Also, the group of triggering elements in a Tab control has only one tab stop. The arrow keys are then used to switch focus between each Tab, and the Enter or Space key is used to expand the desired Tab content panel.</p>
-
-                    <p>In contrast, an Accordion has a series of triggering elements that expand and collapse, the rendered content of which is inserted directly after the triggering element when opened. The container element insertion points for Accordions are not shared. Also, all Accordion links appear in the tab order. The reason why ARIA attributes such as role="tablist" and role="tab" are not included within accordions, is because the insertion of inline content would place dynamic content sections within the same Tablist container, making it impossible to determine the order of nested Tab controls when present within the inserted content. The chosen implementation should always match the UI that it's being applied to, to prevent confusion.</p>
-
-                    <p>The 4X ARIA Tab module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <p>The following attributes are handled automatically by the TabList module:</p>
-
-                    <ul>
-                        <li> role=tablist</li>
-                        <li> role=tab</li>
-                        <li> aria-expanded</li>
-                        <li> aria-selected</li>
-                        <li> aria-controls</li>
-                        <li> role=tabpanel</li>
-                        <li> aria-labelledby</li>
-                        <li> tabindex</li>
-                    </ul>
-
-                    <p>Available attributes for the triggering element:</p>
-
-                    <ul>
-                        <li> data-controls : The resource path and pointer to the ID attribute of the tab content container element.</li>
-                        <li> data-root : The ID attribute of the container element where the tab content will be inserted when rendered. (This must not be inside the triggering element)</li>
-                        <li> data-active : Specifies that the referenced tab node will open automatically. Only one tab node per group should include this attribute.</li>
-                        <li> aria-disabled : When set to "true" on the triggering element, will automatically disable associated functionality.</li>
-                    </ul>
-
-                    <p>Note: When dynamically disabling a triggering element, the 4X setDisabled() function should be used to set the disabled state of the triggering element. This will ensure proper background mapping.</p>
-
-                    <div>
-                        <pre><code class="language-javascript">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Tabs</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="External/index.htm">External</a></li>
+              <li>
+                <a href="External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li><a href="Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              The group of triggering elements should have only one tab stop,
+              the arrow keys should move focus between each Tab in the group,
+              pressing Enter or Space should expand the desired Tab panel, the
+              expanded state should be toggled appropriately on the triggering
+              element, and the expanded Tab panel should be rendered directly
+              after the group of triggering elements in the tab order.
+            </p>
+
+            <p>
+              Though similar in both concept and execution to Tab controls,
+              accordions are not the same. A Tab control has a series of grouped
+              triggering elements that expand and collapse, the rendered content
+              of which is inserted directly after the triggering element group
+              when opened. The container element insertion point for all Tab
+              control triggering elements is shared between them. Also, the
+              group of triggering elements in a Tab control has only one tab
+              stop. The arrow keys are then used to switch focus between each
+              Tab, and the Enter or Space key is used to expand the desired Tab
+              content panel.
+            </p>
+
+            <p>
+              In contrast, an Accordion has a series of triggering elements that
+              expand and collapse, the rendered content of which is inserted
+              directly after the triggering element when opened. The container
+              element insertion points for Accordions are not shared. Also, all
+              Accordion links appear in the tab order. The reason why ARIA
+              attributes such as role="tablist" and role="tab" are not included
+              within accordions, is because the insertion of inline content
+              would place dynamic content sections within the same Tablist
+              container, making it impossible to determine the order of nested
+              Tab controls when present within the inserted content. The chosen
+              implementation should always match the UI that it's being applied
+              to, to prevent confusion.
+            </p>
+
+            <p>
+              The 4X ARIA Tab module automatically configures all required ARIA
+              attributes and focus handling, in strict accordance with the ARIA
+              specification.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the TabList
+              module:
+            </p>
+
+            <ul>
+              <li>role=tablist</li>
+              <li>role=tab</li>
+              <li>aria-expanded</li>
+              <li>aria-selected</li>
+              <li>aria-controls</li>
+              <li>role=tabpanel</li>
+              <li>aria-labelledby</li>
+              <li>tabindex</li>
+            </ul>
+
+            <p>Available attributes for the triggering element:</p>
+
+            <ul>
+              <li>
+                data-controls : The resource path and pointer to the ID
+                attribute of the tab content container element.
+              </li>
+              <li>
+                data-root : The ID attribute of the container element where the
+                tab content will be inserted when rendered. (This must not be
+                inside the triggering element)
+              </li>
+              <li>
+                data-active : Specifies that the referenced tab node will open
+                automatically. Only one tab node per group should include this
+                attribute.
+              </li>
+              <li>
+                aria-disabled : When set to "true" on the triggering element,
+                will automatically disable associated functionality.
+              </li>
+            </ul>
+
+            <p>
+              Note: When dynamically disabling a triggering element, the 4X
+              setDisabled() function should be used to set the disabled state of
+              the triggering element. This will ensure proper background
+              mapping.
+            </p>
+
+            <div>
+              <pre><code class="language-javascript">
 $A.setDisabled(triggeringElement, boolean);
 </code></pre>
-                    </div>
+            </div>
 
-                    <h2>HTML syntax</h2>
+            <h2>HTML syntax</h2>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;div class="tab-list">
+            <div>
+              <pre><code class="language-markup">&lt;div class="tab-list">
   &lt;button data-active data-root="root-container-id" data-controls="tab-panel-id-for-system" > SYSTEM &lt;/button>
   &lt;button data-root="root-container-id" data-controls="tab-panel-id-for-network" > NETWORK &lt;/button>
 &lt;/div>
@@ -97,31 +179,46 @@ <h2>HTML syntax</h2>
   &lt;/div>
 
 &lt;/div></code></pre>
-                    </div>
+            </div>
 
-                    <p>IMPORTANT: The triggering element must not include any other active elements, otherwise these will not be accessible to non-sighted screen reader users.</p>
+            <p>
+              IMPORTANT: The triggering element must not include any other
+              active elements, otherwise these will not be accessible to
+              non-sighted screen reader users.
+            </p>
 
-                    <p>When aria-disabled="true" is set on a tab triggering element, functionality for that panel will automatically be disabled.</p>
+            <p>
+              When aria-disabled="true" is set on a tab triggering element,
+              functionality for that panel will automatically be disabled.
+            </p>
 
-                    <h2>JavaScript syntax</h2>
+            <h2>JavaScript syntax</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">$A.setTab( domNodeListOrCSSSelectorForTriggeringElements , {
+            <div>
+              <pre><code class="language-javascript">$A.setTab( domNodeListOrCSSSelectorForTriggeringElements , {
 // Configure functionality key / value mappings
 });</code></pre>
-                    </div>
+            </div>
 
-                    <h2>Parameters</h2>
+            <ul>
+              <li>Module file: Tab.js</li>
+              <li>Requires: AccName.js, RovingTabIndex.js.</li>
+              <li>Recommended: Velocity.js, VelocityUI.js.</li>
+            </ul>
 
-                    <ol>
-                        <li>A DOM element or CSS selector to specify the triggering elements</li>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <h2>Parameters</h2>
 
-                    <h3>Configuration</h3>
+            <ol>
+              <li>
+                A DOM element or CSS selector to specify the triggering elements
+              </li>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <div>
-                        <pre><code class="language-javascript">{
+            <h3>Configuration</h3>
+
+            <div>
+              <pre><code class="language-javascript">{
 
 // Auto configure orientation using dynamic switching based on the visual layout of focusable elements.
 // "off"=Inactive, "semi"=Switches between vertical and horizontal only, "full"= Switches between vertical, horizontal, and both when line-wrapping is detected.
@@ -215,12 +312,12 @@ <h3>Configuration</h3>
 // To view available options, reference the help docs located at: "Help/DC API/DC Object Configuration"
 
 }</code></pre>
-                    </div>
+            </div>
 
-                    <h2>Programmatic control</h2>
+            <h2>Programmatic control</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">// Get the DC object for the tab using its triggering element id.
+            <div>
+              <pre><code class="language-javascript">// Get the DC object for the tab using its triggering element id.
 var DC = $A("tabTriggerId");
 
 // Open the tab panel manually.
@@ -235,67 +332,96 @@ <h2>Programmatic control</h2>
 
 // Additional DC API properties and methods can be applied here as well.
 // To view available options, reference the help docs located at: "Help/DC API/DC Object Properties and Methods"</code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Tooltips/Error (External)/files/errors.htm b/Templates/Tooltips/Error (External)/files/errors.htm
index 7310f3cd..b3eeb750 100644
--- a/Templates/Tooltips/Error (External)/files/errors.htm	
+++ b/Templates/Tooltips/Error (External)/files/errors.htm	
@@ -1,15 +1,7 @@
 <html>
+  <body>
+    <div id="name-err">Your name is required!</div>
 
-<body>
-
-    <div id="name-err">
-        Your name is required!
-    </div>
-
-    <div id="email-err">
-        Your email is required!
-    </div>
-
-</body>
-
-</html>
\ No newline at end of file
+    <div id="email-err">Your email is required!</div>
+  </body>
+</html>
diff --git a/Templates/Tooltips/Error (External)/index.htm b/Templates/Tooltips/Error (External)/index.htm
index ea2f30ce..88bb4c94 100644
--- a/Templates/Tooltips/Error (External)/index.htm	
+++ b/Templates/Tooltips/Error (External)/index.htm	
@@ -1,138 +1,220 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>External Error Tooltip - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../Error (External)/index.htm" aria-current="page"
+                  >Error (External)</a
+                >
+              </li>
+              <li><a href="../Error (Inline)/index.htm">Error (Inline)</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Help (Responsive)/index.htm">Help (Responsive)</a>
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Error Tooltip <small>External</small></h1>
+
+              <form
+                id="contactForm"
+                action="#"
+                onsubmit="if (!this.submit.disabled) alert('Do something...'); return false;"
+              >
+                <p>
+                  <label class="required" for="your_name">Your name:</label>
+                  <input
+                    data-error="files/errors.htm#name-err"
+                    class="has-error-tooltip"
+                    type="text"
+                    name="name"
+                    id="your_name"
+                  />
+                </p>
+                <p>
+                  <label class="required" for="your_email">Your email:</label>
+                  <input
+                    data-error="files/errors.htm#email-err"
+                    class="has-error-tooltip"
+                    type="text"
+                    name="email"
+                    id="your_email"
+                  />
+                </p>
+                <p class="buttons-bar">
+                  <input type="submit" name="submit" value="Submit" disabled />
+                </p>
+              </form>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Error (External)/index.htm" aria-current="page">Error (External)</a></li>
-                        <li><a href="../Error (Inline)/index.htm">Error (Inline)</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Help (Responsive)/index.htm">Help (Responsive)</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>
+                The tooltip is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>
+                  Set focus on one of the Focus fields, then press
+                  <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate
+                  between them.
+                </li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Error Tooltip <small>External</small></h1>
-
-                        <form id="contactForm" action="#" onsubmit="if (!this.submit.disabled) alert('Do something...'); return false;">
-                            <p><label class="required" for="your_name">Your name:</label>
-                                <input data-error="files/errors.htm#name-err" class="has-error-tooltip" type="text" name="name" id="your_name" />
-                            </p>
-                            <p><label class="required" for="your_email">Your email:</label>
-                                <input data-error="files/errors.htm#email-err" class="has-error-tooltip" type="text" name="email" id="your_email" />
-                            </p>
-                            <p class="buttons-bar"><input type="submit" name="submit" value="Submit" disabled /></p>
-                        </form>
-
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The tooltip is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus on one of the Focus fields,
-                                then press <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate between them.</li>
-                        </ul>
-                    </div>
-                </div>
-
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Tooltips/Error (Inline)/index.htm b/Templates/Tooltips/Error (Inline)/index.htm
index 8605f357..22745b1e 100644
--- a/Templates/Tooltips/Error (Inline)/index.htm	
+++ b/Templates/Tooltips/Error (Inline)/index.htm	
@@ -1,138 +1,222 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Inline Error Tooltip - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../Error (External)/index.htm">Error (External)</a>
+              </li>
+              <li>
+                <a href="../Error (Inline)/index.htm" aria-current="page"
+                  >Error (Inline)</a
+                >
+              </li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Help (Responsive)/index.htm">Help (Responsive)</a>
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Error Tooltip <small>Inline</small></h1>
+
+              <form
+                id="contactForm"
+                action="#"
+                onsubmit="if (!this.submit.disabled) alert('Do something...'); return false;"
+              >
+                <p>
+                  <label class="required" for="your_name">Your name:</label>
+                  <input
+                    data-error="Your name is required!"
+                    class="has-error-tooltip"
+                    type="text"
+                    name="name"
+                    id="your_name"
+                  />
+                </p>
+                <p>
+                  <label class="required" for="your_email">Your email:</label>
+                  <input
+                    data-error="Your email is required!"
+                    class="has-error-tooltip"
+                    type="text"
+                    name="email"
+                    id="your_email"
+                  />
+                </p>
+                <p class="buttons-bar">
+                  <input type="submit" name="submit" value="Submit" disabled />
+                </p>
+              </form>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Error (External)/index.htm">Error (External)</a></li>
-                        <li><a href="../Error (Inline)/index.htm" aria-current="page">Error (Inline)</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Help (Responsive)/index.htm">Help (Responsive)</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>
+                The tooltip is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>
+                  Set focus on one of the Focus fields, then press
+                  <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate
+                  between them.
+                </li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Error Tooltip <small>Inline</small></h1>
-
-                        <form id="contactForm" action="#" onsubmit="if (!this.submit.disabled) alert('Do something...'); return false;">
-                            <p><label class="required" for="your_name">Your name:</label>
-                                <input data-error="Your name is required!" class="has-error-tooltip" type="text" name="name" id="your_name" />
-                            </p>
-                            <p><label class="required" for="your_email">Your email:</label>
-                                <input data-error="Your email is required!" class="has-error-tooltip" type="text" name="email" id="your_email" />
-                            </p>
-                            <p class="buttons-bar"><input type="submit" name="submit" value="Submit" disabled /></p>
-                        </form>
-
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The tooltip is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus on one of the Focus fields,
-                                then press <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate between them.</li>
-                        </ul>
-                    </div>
-                </div>
-
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Tooltips/External - Straylight/files/tooltips.htm b/Templates/Tooltips/External - Straylight/files/tooltips.htm
index 1a0e822d..74fd987a 100644
--- a/Templates/Tooltips/External - Straylight/files/tooltips.htm	
+++ b/Templates/Tooltips/External - Straylight/files/tooltips.htm	
@@ -1,27 +1,24 @@
 <!doctype html>
 <html lang="en">
-
-<body>
-
+  <body>
     <div hidden id="quote-tooltip">
-        <p>"It is a mistake to think you can solve any major problems just with potatoes.", Douglas Adams</p>
+      <p>
+        "It is a mistake to think you can solve any major problems just with
+        potatoes.", Douglas Adams
+      </p>
     </div>
 
     <div hidden id="password-tooltip">
-        <p>
-            Important:
-        </p>
-        <ul>
-            <li> Must be 8 characters in length.</li>
-            <li> Must not contain special characters.</li>
-            <li> Must not contain any whitespace characters.</li>
-        </ul>
+      <p>Important:</p>
+      <ul>
+        <li>Must be 8 characters in length.</li>
+        <li>Must not contain special characters.</li>
+        <li>Must not contain any whitespace characters.</li>
+      </ul>
     </div>
 
     <div hidden id="hover-tooltip">
-        <p>Wow, look at that!</p>
+      <p>Wow, look at that!</p>
     </div>
-
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/Tooltips/External - Straylight/index.htm b/Templates/Tooltips/External - Straylight/index.htm
index 2ade84a8..5dd2e511 100644
--- a/Templates/Tooltips/External - Straylight/index.htm	
+++ b/Templates/Tooltips/External - Straylight/index.htm	
@@ -1,141 +1,240 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Straylight Tooltip (External Content) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Straylight Tooltip (External Content) - 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js#Straylight"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../Error (External)/index.htm">Error (External)</a>
+              </li>
+              <li><a href="../Error (Inline)/index.htm">Error (Inline)</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm" aria-current="page"
+                  >External - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Help (Responsive)/index.htm">Help (Responsive)</a>
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                Straylight Tooltip <small>External Content</small>
+              </h1>
+              <section>
+                <h2>Tooltip with manual click to render</h2>
+                <p>
+                  <a
+                    data-mode="click"
+                    data-tooltip="files/tooltips.htm#quote-tooltip"
+                    role="button"
+                    id="helpIcon"
+                    href="#"
+                    class="helpIcon aria-tooltip"
+                    ><img
+                      src="img/ic_help.svg"
+                      alt="What is the greatest secret known to man?"
+                      title="What is the greatest secret known to man?"
+                  /></a>
+                </p>
+              </section>
+              <section>
+                <h2>Tooltip with explicit onFocus to render</h2>
+                <p>
+                  <label for="pWord">Password:</label>
+                  <input
+                    data-mode="focus"
+                    data-delay="1000"
+                    data-tooltip="files/tooltips.htm#password-tooltip"
+                    id="pWord"
+                    type="password"
+                    class="aria-tooltip"
+                  />
+                </p>
+              </section>
+              <section>
+                <h2>Tooltip with hover support to render</h2>
+                <p>
+                  <button
+                    data-delay="600"
+                    data-timeout="3000"
+                    data-tooltip="files/tooltips.htm#hover-tooltip"
+                    class="action-btn aria-tooltip"
+                    onclick="alert('Do something else.')"
+                  >
+                    Action
+                  </button>
+                </p>
+              </section>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Error (External)/index.htm">Error (External)</a></li>
-                        <li><a href="../Error (Inline)/index.htm">Error (Inline)</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm" aria-current="page">External - Straylight</a></li>
-                        <li><a href="../Help (Responsive)/index.htm">Help (Responsive)</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>
+                The tooltip is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>
+                  Set focus on one of the Focus fields, then press
+                  <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate
+                  between them.
+                </li>
+                <li>
+                  Tabbing away from an active element with a tooltip, or
+                  pressing <kbd>Escape</kbd>, will close the tooltip.
+                </li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Straylight Tooltip <small>External Content</small></h1>
-                        <section>
-                            <h2>Tooltip with manual click to render</h2>
-                            <p><a data-mode="click" data-tooltip="files/tooltips.htm#quote-tooltip" role="button" id="helpIcon" href="#" class="helpIcon aria-tooltip"><img src="img/ic_help.svg" alt="What is the greatest secret known to man?" title="What is the greatest secret known to man?" /></a></p>
-                        </section>
-                        <section>
-                            <h2>Tooltip with explicit onFocus to render</h2>
-                            <p><label for="pWord">Password:</label>
-                                <input data-mode="focus" data-delay="1000" data-tooltip="files/tooltips.htm#password-tooltip" id="pWord" type="password" class="aria-tooltip" />
-                            </p>
-                        </section>
-                        <section>
-                            <h2>Tooltip with hover support to render</h2>
-                            <p><button data-delay="600" data-timeout="3000" data-tooltip="files/tooltips.htm#hover-tooltip" class="action-btn aria-tooltip" onclick="alert('Do something else.')">Action</button></p>
-                        </section>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The tooltip is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus on one of the Focus fields,
-                                then press <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate between them.</li>
-                            <li>Tabbing away from an active element with a tooltip, or pressing <kbd>Escape</kbd>, will close the tooltip.</li>
-                        </ul>
-                    </div>
-                </div>
-
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Tooltips/External/files/tooltips.htm b/Templates/Tooltips/External/files/tooltips.htm
index 044b741d..28900ab4 100644
--- a/Templates/Tooltips/External/files/tooltips.htm
+++ b/Templates/Tooltips/External/files/tooltips.htm
@@ -1,26 +1,23 @@
 <html>
-
-<body>
-
+  <body>
     <div id="quote-tooltip">
-        <p>"It is a mistake to think you can solve any major problems just with potatoes.", Douglas Adams</p>
+      <p>
+        "It is a mistake to think you can solve any major problems just with
+        potatoes.", Douglas Adams
+      </p>
     </div>
 
     <div id="password-tooltip">
-        <p>
-            Important:
-        </p>
-        <ul>
-            <li> Must be 8 characters in length.</li>
-            <li> Must not contain special characters.</li>
-            <li> Must not contain any whitespace characters.</li>
-        </ul>
+      <p>Important:</p>
+      <ul>
+        <li>Must be 8 characters in length.</li>
+        <li>Must not contain special characters.</li>
+        <li>Must not contain any whitespace characters.</li>
+      </ul>
     </div>
 
     <div id="hover-tooltip">
-        <p>Wow, look at that!</p>
+      <p>Wow, look at that!</p>
     </div>
-
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/Tooltips/External/index.htm b/Templates/Tooltips/External/index.htm
index 09bdb6b9..0371a799 100644
--- a/Templates/Tooltips/External/index.htm
+++ b/Templates/Tooltips/External/index.htm
@@ -1,142 +1,227 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Tooltip (External Content) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../Error (External)/index.htm">Error (External)</a>
+              </li>
+              <li><a href="../Error (Inline)/index.htm">Error (Inline)</a></li>
+              <li>
+                <a href="../External/index.htm" aria-current="page">External</a>
+              </li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Help (Responsive)/index.htm">Help (Responsive)</a>
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Tooltip <small>External Content</small></h1>
+              <section>
+                <h2>Tooltip with manual click to render</h2>
+                <p>
+                  <a
+                    role="button"
+                    id="helpIcon"
+                    href="#"
+                    class="helpIcon aria-tooltip"
+                    ><img
+                      src="img/ic_help.svg"
+                      alt="What is the greatest secret known to man?"
+                      title="What is the greatest secret known to man?"
+                  /></a>
+                </p>
+              </section>
+              <section>
+                <h2>Tooltip with explicit onFocus to render</h2>
+                <p>
+                  <label for="pWord">Password:</label>
+                  <input id="pWord" type="password" />
+                </p>
+              </section>
+              <section>
+                <h2>Tooltip with hover support to render</h2>
+                <p>
+                  <button
+                    class="action-btn"
+                    onclick="alert('Do something else.')"
+                  >
+                    Action
+                  </button>
+                </p>
+              </section>
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Error (External)/index.htm">Error (External)</a></li>
-                        <li><a href="../Error (Inline)/index.htm">Error (Inline)</a></li>
-                        <li><a href="../External/index.htm" aria-current="page">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Help (Responsive)/index.htm">Help (Responsive)</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <h2>
+                The tooltip is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>
+                  Set focus on one of the Focus fields, then press
+                  <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate
+                  between them.
+                </li>
+                <li>
+                  Tabbing away from an active element with a tooltip, or
+                  pressing <kbd>Escape</kbd>, will close the tooltip.
+                </li>
+              </ul>
             </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Tooltip <small>External Content</small></h1>
-                        <section>
-                            <h2>Tooltip with manual click to render</h2>
-                            <p><a role="button" id="helpIcon" href="#" class="helpIcon aria-tooltip"><img src="img/ic_help.svg" alt="What is the greatest secret known to man?" title="What is the greatest secret known to man?" /></a></p>
-                        </section>
-                        <section>
-                            <h2>Tooltip with explicit onFocus to render</h2>
-                            <p><label for="pWord">Password:</label>
-                                <input id="pWord" type="password" />
-                            </p>
-                        </section>
-                        <section>
-                            <h2>Tooltip with hover support to render</h2>
-                            <p><button class="action-btn" onclick="alert('Do something else.')">Action</button></p>
-                        </section>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The tooltip is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus on one of the Focus fields,
-                                then press <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate between them.</li>
-                            <li>Tabbing away from an active element with a tooltip, or pressing <kbd>Escape</kbd>, will close the tooltip.</li>
-                        </ul>
-                    </div>
-                </div>
-
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Tooltips/Help (Responsive)/index.htm b/Templates/Tooltips/Help (Responsive)/index.htm
index 82b676bd..77ccb740 100644
--- a/Templates/Tooltips/Help (Responsive)/index.htm	
+++ b/Templates/Tooltips/Help (Responsive)/index.htm	
@@ -1,139 +1,218 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Responsive Help Tooltip - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Error (External)/index.htm">Error (External)</a></li>
-                        <li><a href="../Error (Inline)/index.htm">Error (Inline)</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Help (Responsive)/index.htm" aria-current="page">Help (Responsive)</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Help Tooltip <small>Responsive</small></h1>
-
-                        <h2>Pop Quiz</h2>
-                        <form id="questionForm" action="#" onsubmit="if (!this.submit.disabled) alert('Do something...'); return false;">
-                            <p><label for="questionId">What is the Latin name for our planet?<span class="clrRed">*</span></label>
-                                <input required type="text" name="question" id="questionId" required class="has-help-tooltip" />
-                            </p>
-
-                            <p class="buttons-bar"><input type="submit" name="submit" value="Submit" disabled />
-                                |
-                                <input type="reset" name="reset" value="Reset" />
-                            </p>
-                        </form>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../Error (External)/index.htm">Error (External)</a>
+              </li>
+              <li><a href="../Error (Inline)/index.htm">Error (Inline)</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Help (Responsive)/index.htm" aria-current="page"
+                  >Help (Responsive)</a
+                >
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Help Tooltip <small>Responsive</small></h1>
 
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The tooltip is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Type text into the edit field and the tooltip will update accordingly using validation logic. (The answer is "Terra".)</li>
-                        </ul>
-                    </div>
-                </div>
+              <h2>Pop Quiz</h2>
+              <form
+                id="questionForm"
+                action="#"
+                onsubmit="if (!this.submit.disabled) alert('Do something...'); return false;"
+              >
+                <p>
+                  <label for="questionId"
+                    >What is the Latin name for our planet?<span class="clrRed"
+                      >*</span
+                    ></label
+                  >
+                  <input
+                    required
+                    type="text"
+                    name="question"
+                    id="questionId"
+                    required
+                    class="has-help-tooltip"
+                  />
+                </p>
 
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+                <p class="buttons-bar">
+                  <input type="submit" name="submit" value="Submit" disabled />
+                  |
+                  <input type="reset" name="reset" value="Reset" />
+                </p>
+              </form>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The tooltip is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>
+                  Type text into the edit field and the tooltip will update
+                  accordingly using validation logic. (The answer is "Terra".)
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Tooltips/Internal - Straylight/index.htm b/Templates/Tooltips/Internal - Straylight/index.htm
index 59fae763..2661a9c1 100644
--- a/Templates/Tooltips/Internal - Straylight/index.htm	
+++ b/Templates/Tooltips/Internal - Straylight/index.htm	
@@ -1,153 +1,250 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Straylight Tooltip (Internal Content) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Straylight Tooltip (Internal Content) - 4X Technical Style Guide
+    </title>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js#Straylight"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Error (External)/index.htm">Error (External)</a></li>
-                        <li><a href="../Error (Inline)/index.htm">Error (Inline)</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Help (Responsive)/index.htm">Help (Responsive)</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm" aria-current="page">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Straylight Tooltip <small>Internal Content</small></h1>
-                        <section>
-                            <h2>Tooltip with manual click to render</h2>
-                            <!-- Here the tooltip attribute is used to set the tooltip content. -->
-                            <p><a data-mode="click" data-tooltip='<p>"It is a mistake to think you can solve any major problems just with potatoes.", Douglas Adams</p>' role="button" id="helpIcon" href="#" class="helpIcon aria-tooltip"><img src="img/ic_help.svg" alt="What is the greatest secret known to man?" title="What is the greatest secret known to man?" /></a></p>
-                        </section>
-                        <section>
-                            <h2>Tooltip with explicit onFocus to render</h2>
-                            <!-- Here the tooltip attribute is used to reference the id of the hidden tooltip container element. -->
-                            <p><label for="pWord">Password:</label>
-                                <input data-mode="focus" data-delay="1000" data-tooltip="#password-tooltip" id="pWord" type="password" class="aria-tooltip" />
-                            </p>
-                            <div hidden id="password-tooltip">
-                                <p>
-                                    Important:
-                                </p>
-                                <ul>
-                                    <li> Must be 8 characters in length.</li>
-                                    <li> Must not contain special characters.</li>
-                                    <li> Must not contain any whitespace characters.</li>
-                                </ul>
-                            </div>
-                        </section>
-                        <section>
-                            <h2>Tooltip with hover support to render</h2>
-                            <p><button data-delay="600" data-timeout="3000" data-tooltip='<div id="hover-tooltip"><p>Wow, look at that!</p></div>' class="action-btn aria-tooltip" onclick="alert('Do something else.')">Action</button></p>
-                        </section>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The tooltip is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus on one of the Focus fields,
-                                then press <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate between them.</li>
-                            <li>Tabbing away from an active element with a tooltip, or pressing <kbd>Escape</kbd>, will close the tooltip.</li>
-                        </ul>
-                    </div>
-                </div>
-
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../Error (External)/index.htm">Error (External)</a>
+              </li>
+              <li><a href="../Error (Inline)/index.htm">Error (Inline)</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Help (Responsive)/index.htm">Help (Responsive)</a>
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="../Internal - Straylight/index.htm" aria-current="page"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">
+                Straylight Tooltip <small>Internal Content</small>
+              </h1>
+              <section>
+                <h2>Tooltip with manual click to render</h2>
+                <!-- Here the tooltip attribute is used to set the tooltip content. -->
+                <p>
+                  <a
+                    data-mode="click"
+                    data-tooltip='<p>"It is a mistake to think you can solve any major problems just with potatoes.", Douglas Adams</p>'
+                    role="button"
+                    id="helpIcon"
+                    href="#"
+                    class="helpIcon aria-tooltip"
+                    ><img
+                      src="img/ic_help.svg"
+                      alt="What is the greatest secret known to man?"
+                      title="What is the greatest secret known to man?"
+                  /></a>
+                </p>
+              </section>
+              <section>
+                <h2>Tooltip with explicit onFocus to render</h2>
+                <!-- Here the tooltip attribute is used to reference the id of the hidden tooltip container element. -->
+                <p>
+                  <label for="pWord">Password:</label>
+                  <input
+                    data-mode="focus"
+                    data-delay="1000"
+                    data-tooltip="#password-tooltip"
+                    id="pWord"
+                    type="password"
+                    class="aria-tooltip"
+                  />
+                </p>
+                <div hidden id="password-tooltip">
+                  <p>Important:</p>
+                  <ul>
+                    <li>Must be 8 characters in length.</li>
+                    <li>Must not contain special characters.</li>
+                    <li>Must not contain any whitespace characters.</li>
+                  </ul>
                 </div>
+              </section>
+              <section>
+                <h2>Tooltip with hover support to render</h2>
+                <p>
+                  <button
+                    data-delay="600"
+                    data-timeout="3000"
+                    data-tooltip='<div id="hover-tooltip"><p>Wow, look at that!</p></div>'
+                    class="action-btn aria-tooltip"
+                    onclick="alert('Do something else.')"
+                  >
+                    Action
+                  </button>
+                </p>
+              </section>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The tooltip is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>
+                  Set focus on one of the Focus fields, then press
+                  <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate
+                  between them.
+                </li>
+                <li>
+                  Tabbing away from an active element with a tooltip, or
+                  pressing <kbd>Escape</kbd>, will close the tooltip.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Tooltips/Internal/index.htm b/Templates/Tooltips/Internal/index.htm
index f2b3ef82..4b47ba7e 100644
--- a/Templates/Tooltips/Internal/index.htm
+++ b/Templates/Tooltips/Internal/index.htm
@@ -1,154 +1,243 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Tooltip (Internal Content) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../Error (External)/index.htm">Error (External)</a></li>
-                        <li><a href="../Error (Inline)/index.htm">Error (Inline)</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="../Help (Responsive)/index.htm">Help (Responsive)</a></li>
-                        <li><a href="../Internal/index.htm" aria-current="page">Internal</a></li>
-                        <li><a href="../Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Tooltip <small>Internal Content</small></h1>
-                        <section>
-                            <h2>Tooltip with manual click to render</h2>
-                            <!-- Here the tooltip attribute is used to set the tooltip content. -->
-                            <p><a data-tooltip='<p>"It is a mistake to think you can solve any major problems just with potatoes.", Douglas Adams</p>' role="button" id="helpIcon" href="#" class="helpIcon aria-tooltip"><img src="img/ic_help.svg" alt="What is the greatest secret known to man?" title="What is the greatest secret known to man?" /></a></p>
-                        </section>
-                        <section>
-                            <h2>Tooltip with explicit onFocus to render</h2>
-                            <!-- Here the tooltip attribute is used to reference the id of the hidden tooltip container element. -->
-                            <p><label for="pWord">Password:</label>
-                                <input data-tooltip="#password-tooltip" id="pWord" type="password" />
-                            </p>
-                            <div hidden id="password-tooltip">
-                                <p>
-                                    Important:
-                                </p>
-                                <ul>
-                                    <li> Must be 8 characters in length.</li>
-                                    <li> Must not contain special characters.</li>
-                                    <li> Must not contain any whitespace characters.</li>
-                                </ul>
-                            </div>
-                        </section>
-                        <section>
-                            <h2>Tooltip with hover support to render</h2>
-                            <!-- Here the tooltip content is specified within setup.js via the content property. -->
-                            <p><button class="action-btn" onclick="alert('Do something else.')">Action</button></p>
-                        </section>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The tooltip is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus on one of the Focus fields,
-                                then press <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate between them.</li>
-                            <li>Tabbing away from an active element with a tooltip, or pressing <kbd>Escape</kbd>, will close the tooltip.</li>
-                        </ul>
-                    </div>
-                </div>
-            </main>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../Error (External)/index.htm">Error (External)</a>
+              </li>
+              <li><a href="../Error (Inline)/index.htm">Error (Inline)</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="../Help (Responsive)/index.htm">Help (Responsive)</a>
+              </li>
+              <li>
+                <a href="../Internal/index.htm" aria-current="page">Internal</a>
+              </li>
+              <li>
+                <a href="../Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Tooltip <small>Internal Content</small></h1>
+              <section>
+                <h2>Tooltip with manual click to render</h2>
+                <!-- Here the tooltip attribute is used to set the tooltip content. -->
+                <p>
+                  <a
+                    data-tooltip='<p>"It is a mistake to think you can solve any major problems just with potatoes.", Douglas Adams</p>'
+                    role="button"
+                    id="helpIcon"
+                    href="#"
+                    class="helpIcon aria-tooltip"
+                    ><img
+                      src="img/ic_help.svg"
+                      alt="What is the greatest secret known to man?"
+                      title="What is the greatest secret known to man?"
+                  /></a>
+                </p>
+              </section>
+              <section>
+                <h2>Tooltip with explicit onFocus to render</h2>
+                <!-- Here the tooltip attribute is used to reference the id of the hidden tooltip container element. -->
+                <p>
+                  <label for="pWord">Password:</label>
+                  <input
+                    data-tooltip="#password-tooltip"
+                    id="pWord"
+                    type="password"
+                  />
+                </p>
+                <div hidden id="password-tooltip">
+                  <p>Important:</p>
+                  <ul>
+                    <li>Must be 8 characters in length.</li>
+                    <li>Must not contain special characters.</li>
+                    <li>Must not contain any whitespace characters.</li>
+                  </ul>
                 </div>
+              </section>
+              <section>
+                <h2>Tooltip with hover support to render</h2>
+                <!-- Here the tooltip content is specified within setup.js via the content property. -->
+                <p>
+                  <button
+                    class="action-btn"
+                    onclick="alert('Do something else.')"
+                  >
+                    Action
+                  </button>
+                </p>
+              </section>
             </div>
-        </footer>
+            <div class="keyboard flex-item">
+              <h2>
+                The tooltip is optimized for screen reader and keyboard only
+                users:
+              </h2>
+              <ul>
+                <li>
+                  Set focus on one of the Focus fields, then press
+                  <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate
+                  between them.
+                </li>
+                <li>
+                  Tabbing away from an active element with a tooltip, or
+                  pressing <kbd>Escape</kbd>, will close the tooltip.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Tooltips/index.htm b/Templates/Tooltips/index.htm
index 7438bea8..b89c53ae 100644
--- a/Templates/Tooltips/index.htm
+++ b/Templates/Tooltips/index.htm
@@ -1,96 +1,159 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Tooltips - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Tooltips</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="Error (External)/index.htm">Error (External)</a></li>
-                        <li><a href="Error (Inline)/index.htm">Error (Inline)</a></li>
-                        <li><a href="External/index.htm">External</a></li>
-                        <li><a href="External - Straylight/index.htm">External - Straylight</a></li>
-                        <li><a href="Help (Responsive)/index.htm">Help (Responsive)</a></li>
-                        <li><a href="Internal/index.htm">Internal</a></li>
-                        <li><a href="Internal - Straylight/index.htm">Internal - Straylight</a></li>
-                    </ul>
-                </nav>
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <ul>
-                        <li> Hover tooltips appear when moused over and when the triggering element receives focus, then close when the mouse moves away or when focus moves to a different element. </li>
-                        <li> Manual tooltips appear when the triggering element is activated, then close when clicked again or when focus moves to a different element. </li>
-                        <li> Responsive tooltips appear when validation criteria are met when typing, and close when focus moves to a different element. </li>
-                        <li> Error tooltips appear when focus moves away from a field that fails validation, then close when focus moves back to the triggering element.</li>
-                    </ul>
-
-                    <p>The 4X ARIA Tooltip module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <p>The following attributes are handled automatically by the Tooltip module:</p>
-
-                    <ul>
-                        <li> role=tooltip</li>
-                        <li> aria-describedby</li>
-                        <li> aria-description</li>
-                        <li> role=region</li>
-                        <li> aria-label</li>
-                    </ul>
-
-                    <p>Available attributes for the triggering element:</p>
-
-                    <ul>
-                        <li>data-tooltip : The resource path and pointer to the ID attribute of the tooltip container element. May consist of a traditional id reference within the same document, or a url+id reference for pulling a tooltip in from an external resource, or the tooltip markup and message that should be displayed visually when triggered.</li>
-                        <li>data-error : The resource path and pointer to the ID attribute of the error container element. May consist of a traditional id reference within the same document, or a url+id reference for pulling an error tooltip in from an external resource, or the error tooltip markup and message that should be displayed visually when triggered.</li>
-                    </ul>
-
-                    <h2>HTML syntax</h2>
-
-                    <p>There are many options for setting the content of a tooltip.</p>
-
-                    <h3>Using embedded markup to create a tooltip</h3>
-
-                    <div>
-                        <pre><code class="language-markup">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Tooltips</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="Error (External)/index.htm">Error (External)</a></li>
+              <li><a href="Error (Inline)/index.htm">Error (Inline)</a></li>
+              <li><a href="External/index.htm">External</a></li>
+              <li>
+                <a href="External - Straylight/index.htm"
+                  >External - Straylight</a
+                >
+              </li>
+              <li>
+                <a href="Help (Responsive)/index.htm">Help (Responsive)</a>
+              </li>
+              <li><a href="Internal/index.htm">Internal</a></li>
+              <li>
+                <a href="Internal - Straylight/index.htm"
+                  >Internal - Straylight</a
+                >
+              </li>
+            </ul>
+          </nav>
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <ul>
+              <li>
+                Hover tooltips appear when moused over and when the triggering
+                element receives focus, then close when the mouse moves away or
+                when focus moves to a different element.
+              </li>
+              <li>
+                Manual tooltips appear when the triggering element is activated,
+                then close when clicked again or when focus moves to a different
+                element.
+              </li>
+              <li>
+                Responsive tooltips appear when validation criteria are met when
+                typing, and close when focus moves to a different element.
+              </li>
+              <li>
+                Error tooltips appear when focus moves away from a field that
+                fails validation, then close when focus moves back to the
+                triggering element.
+              </li>
+            </ul>
+
+            <p>
+              The 4X ARIA Tooltip module automatically configures all required
+              ARIA attributes and focus handling, in strict accordance with the
+              ARIA specification.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the Tooltip
+              module:
+            </p>
+
+            <ul>
+              <li>role=tooltip</li>
+              <li>aria-describedby</li>
+              <li>aria-description</li>
+              <li>role=region</li>
+              <li>aria-label</li>
+            </ul>
+
+            <p>Available attributes for the triggering element:</p>
+
+            <ul>
+              <li>
+                data-tooltip : The resource path and pointer to the ID attribute
+                of the tooltip container element. May consist of a traditional
+                id reference within the same document, or a url+id reference for
+                pulling a tooltip in from an external resource, or the tooltip
+                markup and message that should be displayed visually when
+                triggered.
+              </li>
+              <li>
+                data-error : The resource path and pointer to the ID attribute
+                of the error container element. May consist of a traditional id
+                reference within the same document, or a url+id reference for
+                pulling an error tooltip in from an external resource, or the
+                error tooltip markup and message that should be displayed
+                visually when triggered.
+              </li>
+            </ul>
+
+            <h2>HTML syntax</h2>
+
+            <p>There are many options for setting the content of a tooltip.</p>
+
+            <h3>Using embedded markup to create a tooltip</h3>
+
+            <div>
+              <pre><code class="language-markup">
 &lt;button data-tooltip='&lt;p>Your email address is required to verify your account, but will not be used for any other purpose.&lt;/p>'> Why do we need this? &lt;/button>
 </code></pre>
-                    </div>
+            </div>
 
-                    <h3>Using CSS selector to reference a tooltip</h3>
+            <h3>Using CSS selector to reference a tooltip</h3>
 
-                    <div>
-                        <pre><code class="language-markup">
+            <div>
+              <pre><code class="language-markup">
 &lt;label for="passwordId"> Password: &lt;/label>
 &lt;input data-tooltip="#passwordTooltipId" id="passwordId" type="password">
 </code></pre>
-                    </div>
+            </div>
 
-                    <div>
-                        <pre><code class="language-markup">
+            <div>
+              <pre><code class="language-markup">
 &lt;div hidden id="passwordTooltipId">
     &lt;p> Important! &lt;/p>
     &lt;ul>
@@ -100,57 +163,74 @@ <h3>Using CSS selector to reference a tooltip</h3>
     &lt;/ul>
 &lt;/div>
 </code></pre>
-                    </div>
+            </div>
 
-                    <h3>Using URL+id to reference an external tooltip</h3>
+            <h3>Using URL+id to reference an external tooltip</h3>
 
-                    <div>
-                        <pre><code class="language-markup">
+            <div>
+              <pre><code class="language-markup">
 &lt;button data-tooltip="url/tooltips.php?type=help#tooltipContainerId"> What is this? &lt;/button>
 </code></pre>
-                    </div>
+            </div>
 
-                    <h3>Using standard markup for any focusable element configured with JS setup script</h3>
+            <h3>
+              Using standard markup for any focusable element configured with JS
+              setup script
+            </h3>
 
-                    <div>
-                        <pre><code class="language-markup">
+            <div>
+              <pre><code class="language-markup">
 &lt;a class="hasTooltip" href="URL"> ONE &lt;/a>
 </code></pre>
-                    </div>
+            </div>
 
-                    <div>
-                        <pre><code class="language-markup">
+            <div>
+              <pre><code class="language-markup">
 &lt;button class="hasTooltip"> TWO &lt;/button>
 </code></pre>
-                    </div>
+            </div>
 
-                    <div>
-                        <pre><code class="language-markup">
+            <div>
+              <pre><code class="language-markup">
 &lt;input class="hasTooltip" type="text" title="THREE" >
 </code></pre>
-                    </div>
+            </div>
 
-                    <p>The data-error attribute may be implemented using the same syntax as the data-tooltip attribute, and both data-error and data-tooltip attributes are supported on the same element. However, the data-error attribute is only valid on native input elements.</p>
+            <p>
+              The data-error attribute may be implemented using the same syntax
+              as the data-tooltip attribute, and both data-error and
+              data-tooltip attributes are supported on the same element.
+              However, the data-error attribute is only valid on native input
+              elements.
+            </p>
 
-                    <h2>JavaScript syntax</h2>
+            <h2>JavaScript syntax</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">var myTooltipDC = $A.setTooltip( domNodeOrCSSSelectorForTriggeringElement , {
+            <div>
+              <pre><code class="language-javascript">var myTooltipDC = $A.setTooltip( domNodeOrCSSSelectorForTriggeringElement , {
   // Configure functionality key / value mappings
 });</code></pre>
-                    </div>
+            </div>
 
-                    <h2>Parameters</h2>
+            <ul>
+              <li>Module file: Tooltip.js</li>
+              <li>Has no dependencies.</li>
+              <li>Recommended: Velocity.js, VelocityUI.js.</li>
+            </ul>
 
-                    <ol>
-                        <li>A DOM element or CSS selector to specify the triggering element</li>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <h2>Parameters</h2>
 
-                    <h3>Configuration</h3>
+            <ol>
+              <li>
+                A DOM element or CSS selector to specify the triggering element
+              </li>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <div>
-                        <pre><code class="language-javascript">
+            <h3>Configuration</h3>
+
+            <div>
+              <pre><code class="language-javascript">
 {
 
 // Unique ID for the tooltip instance
@@ -286,12 +366,12 @@ <h3>Configuration</h3>
 
 }
 </code></pre>
-                    </div>
+            </div>
 
-                    <h2>Programmatic control</h2>
+            <h2>Programmatic control</h2>
 
-                    <div>
-                        <pre><code class="language-javascript">
+            <div>
+              <pre><code class="language-javascript">
 // Use the DC object that is returned by the $A.setTooltip() function.
 
 // Open the tooltip manually.
@@ -307,67 +387,96 @@ <h2>Programmatic control</h2>
 // Additional DC API properties and methods can be applied here as well.
 // To view available options, reference the help docs located at: "Help/DC API/DC Object Properties and Methods"
 </code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Trees/External/files/tree.htm b/Templates/Trees/External/files/tree.htm
index 2cebab76..f4d3d694 100644
--- a/Templates/Trees/External/files/tree.htm
+++ b/Templates/Trees/External/files/tree.htm
@@ -1,80 +1,202 @@
 <html>
-
-<body>
-
+  <body>
     <!-- The tree structure does not require ID attribute mapping, and may be nested to any level.
 The focusable A tags may include any type of markup for formatting purposes. -->
 
     <ul aria-label="Digital Library Index" class="top tree">
-
-        <!-- First branch -->
-        <li><a href="#" class="branch"><span>Cyberpunk</span></a>
+      <!-- First branch -->
+      <li>
+        <a href="#" class="branch"><span>Cyberpunk</span></a>
+        <ul hidden class="tree">
+          <li>
+            <a href="#" class="branch"><span>Neal Stephenson</span></a>
             <ul hidden class="tree">
-                <li><a href="#" class="branch"><span>Neal Stephenson</span></a>
-                    <ul hidden class="tree">
-                        <li><a data-author="Neal Stephenson" data-check href="#" class="leaf"><span>Snow Crash</span></a></li>
-                        <li><a data-author="Neal Stephenson" data-check href="#" class="leaf"><span>The Diamond Age</span></a></li>
-                    </ul>
-                </li>
-                <li><a href="#" class="branch"><span>Richard K. Morgan</span></a>
-                    <ul hidden class="tree">
-                        <li><a data-author="Richard K. Morgan" data-check href="#" class="leaf"><span>Altered Carbon</span></a></li>
-                        <li><a data-author="Richard K. Morgan" data-check href="#" class="leaf"><span>Broken Angels</span></a></li>
-                        <li><a data-author="Richard K. Morgan" data-check href="#" class="leaf"><span>Woken Furies</span></a></li>
-                    </ul>
-                </li>
-                <li><a href="#" class="branch"><span>William Gibson</span></a>
-                    <ul hidden class="tree">
-                        <li><a data-author="William Gibson" data-check href="#" class="leaf"><span>Neuromancer</span></a></li>
-                        <li><a data-author="William Gibson" data-check href="#" class="leaf"><span>Count Zero</span></a></li>
-                        <li><a data-author="William Gibson" data-check href="#" class="leaf"><span>Mona Lisa Overdrive</span></a></li>
-                    </ul>
-                </li>
+              <li>
+                <a
+                  data-author="Neal Stephenson"
+                  data-check
+                  href="#"
+                  class="leaf"
+                  ><span>Snow Crash</span></a
+                >
+              </li>
+              <li>
+                <a
+                  data-author="Neal Stephenson"
+                  data-check
+                  href="#"
+                  class="leaf"
+                  ><span>The Diamond Age</span></a
+                >
+              </li>
             </ul>
-        </li>
-
-        <!-- Third branch -->
-        <li><a href="#" class="branch"><span>Humor</span></a>
+          </li>
+          <li>
+            <a href="#" class="branch"><span>Richard K. Morgan</span></a>
             <ul hidden class="tree">
-                <li><a href="#" class="branch"><span>Christopher Moore</span></a>
-                    <ul hidden class="tree">
-                        <li><a data-author="Christopher Moore" data-check href="#" class="leaf"><span>Bloodsucking Fiends</span></a></li>
-                        <li><a data-author="Christopher Moore" data-check href="#" class="leaf"><span>Fluke</span></a></li>
-                        <li><a data-author="Christopher Moore" data-check href="#" class="leaf"><span>Lamb, The Gospel According to Biff</span></a></li>
-                    </ul>
-                </li>
-                <li><a href="#" class="branch"><span>Tom Robbins</span></a>
-                    <ul hidden class="tree">
-                        <li><a data-author="Tom Robbins" data-check href="#" class="leaf"><span>Fierce Invalids Home from Hot Climates</span></a></li>
-                    </ul>
-                </li>
+              <li>
+                <a
+                  data-author="Richard K. Morgan"
+                  data-check
+                  href="#"
+                  class="leaf"
+                  ><span>Altered Carbon</span></a
+                >
+              </li>
+              <li>
+                <a
+                  data-author="Richard K. Morgan"
+                  data-check
+                  href="#"
+                  class="leaf"
+                  ><span>Broken Angels</span></a
+                >
+              </li>
+              <li>
+                <a
+                  data-author="Richard K. Morgan"
+                  data-check
+                  href="#"
+                  class="leaf"
+                  ><span>Woken Furies</span></a
+                >
+              </li>
             </ul>
-        </li>
+          </li>
+          <li>
+            <a href="#" class="branch"><span>William Gibson</span></a>
+            <ul hidden class="tree">
+              <li>
+                <a data-author="William Gibson" data-check href="#" class="leaf"
+                  ><span>Neuromancer</span></a
+                >
+              </li>
+              <li>
+                <a data-author="William Gibson" data-check href="#" class="leaf"
+                  ><span>Count Zero</span></a
+                >
+              </li>
+              <li>
+                <a data-author="William Gibson" data-check href="#" class="leaf"
+                  ><span>Mona Lisa Overdrive</span></a
+                >
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
 
+      <!-- Third branch -->
+      <li>
+        <a href="#" class="branch"><span>Humor</span></a>
+        <ul hidden class="tree">
+          <li>
+            <a href="#" class="branch"><span>Christopher Moore</span></a>
+            <ul hidden class="tree">
+              <li>
+                <a
+                  data-author="Christopher Moore"
+                  data-check
+                  href="#"
+                  class="leaf"
+                  ><span>Bloodsucking Fiends</span></a
+                >
+              </li>
+              <li>
+                <a
+                  data-author="Christopher Moore"
+                  data-check
+                  href="#"
+                  class="leaf"
+                  ><span>Fluke</span></a
+                >
+              </li>
+              <li>
+                <a
+                  data-author="Christopher Moore"
+                  data-check
+                  href="#"
+                  class="leaf"
+                  ><span>Lamb, The Gospel According to Biff</span></a
+                >
+              </li>
+            </ul>
+          </li>
+          <li>
+            <a href="#" class="branch"><span>Tom Robbins</span></a>
+            <ul hidden class="tree">
+              <li>
+                <a data-author="Tom Robbins" data-check href="#" class="leaf"
+                  ><span>Fierce Invalids Home from Hot Climates</span></a
+                >
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
 
-        <!-- Second branch -->
-        <li><a href="#" class="branch"><span>Fantasy</span></a>
+      <!-- Second branch -->
+      <li>
+        <a href="#" class="branch"><span>Fantasy</span></a>
+        <ul hidden class="tree">
+          <li>
+            <a href="#" class="branch"><span>Jim Butcher</span></a>
             <ul hidden class="tree">
-                <li><a href="#" class="branch"><span>Jim Butcher</span></a>
-                    <ul hidden class="tree">
-                        <li><a data-author="Jim Butcher" data-check href="#" class="leaf"><span>Storm Front</span></a></li>
-                        <li><a data-author="Jim Butcher" data-check href="#" class="leaf"><span>Fool Moon</span></a></li>
-                    </ul>
-                </li>
-                <li><a href="#" class="branch"><span>Victor Gischler</span></a>
-                    <ul hidden class="tree">
-                        <li><a data-author="Victor Gischler" data-check href="#" class="leaf"><span>Ink Mage</span></a></li>
-                        <li><a data-author="Victor Gischler" data-check href="#" class="leaf"><span>The Tattooed Duchess</span></a></li>
-                        <li><a data-author="Victor Gischler" data-check href="#" class="leaf"><span>A Painted Goddess</span></a></li>
-                    </ul>
-                </li>
+              <li>
+                <a data-author="Jim Butcher" data-check href="#" class="leaf"
+                  ><span>Storm Front</span></a
+                >
+              </li>
+              <li>
+                <a data-author="Jim Butcher" data-check href="#" class="leaf"
+                  ><span>Fool Moon</span></a
+                >
+              </li>
             </ul>
-        </li>
+          </li>
+          <li>
+            <a href="#" class="branch"><span>Victor Gischler</span></a>
+            <ul hidden class="tree">
+              <li>
+                <a
+                  data-author="Victor Gischler"
+                  data-check
+                  href="#"
+                  class="leaf"
+                  ><span>Ink Mage</span></a
+                >
+              </li>
+              <li>
+                <a
+                  data-author="Victor Gischler"
+                  data-check
+                  href="#"
+                  class="leaf"
+                  ><span>The Tattooed Duchess</span></a
+                >
+              </li>
+              <li>
+                <a
+                  data-author="Victor Gischler"
+                  data-check
+                  href="#"
+                  class="leaf"
+                  ><span>A Painted Goddess</span></a
+                >
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
 
-        <li><a aria-disabled="true" href="https://www.goodreads.com/" class="leaf"><span>Goodreads...</span></a></li>
-        <li><a href="https://google.com/" class="leaf"><span>Help...</span></a></li>
+      <li>
+        <a aria-disabled="true" href="https://www.goodreads.com/" class="leaf"
+          ><span>Goodreads...</span></a
+        >
+      </li>
+      <li>
+        <a href="https://google.com/" class="leaf"><span>Help...</span></a>
+      </li>
     </ul>
-
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/Trees/External/index.htm b/Templates/Trees/External/index.htm
index 19ce8dcb..d0350bf1 100644
--- a/Templates/Trees/External/index.htm
+++ b/Templates/Trees/External/index.htm
@@ -1,146 +1,219 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Tree (External Content) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm" aria-current="page">External</a></li>
-                        <li><a href="../Internal/index.htm">Internal</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Tree <small>External Content</small></h1>
-                        <section class="sample-block">
-
-                            <div class="viewport">
-
-                                <div id="container">
-                                    <div class="treeview" role="navigation" aria-label="Library"></div>
-                                </div>
-
-                                <div class="books" role="region" aria-labelledby="readingListHeadingId">
-                                    <h3 id="readingListHeadingId">Reading List</h3>
-                                    <div>
-                                        <ul id="readingList"></ul>
-                                    </div>
-                                </div>
-
-                            </div>
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li>
+                <a href="../External/index.htm" aria-current="page">External</a>
+              </li>
+              <li><a href="../Internal/index.htm">Internal</a></li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Tree <small>External Content</small></h1>
+              <section class="sample-block">
+                <div class="viewport">
+                  <div id="container">
+                    <div
+                      class="treeview"
+                      role="navigation"
+                      aria-label="Library"
+                    ></div>
+                  </div>
 
-                        </section>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The tree is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus to the tree using the keyboard.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> Arrow keys to move focus between the tree options.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> Arrow keys to open or close subtrees.</li>
-                            <li>Press the Ctrl+<kbd class="left">Left</kbd> and Ctrl+<kbd class="right">Right</kbd> Arrow keys to open or close groups of subtrees.</li>
-                            <li>Press any letter or number to jump to a tree item starting with that character or digit.</li>
-                            <li>Press <kbd>Enter</kbd> to activate a tree option.</li>
-                            <li>Press <kbd>Escape</kbd> to close the currently open tree.</li>
-                            <li>Mouse users can click the desired tree option to toggle as usual.</li>
-                        </ul>
+                  <div
+                    class="books"
+                    role="region"
+                    aria-labelledby="readingListHeadingId"
+                  >
+                    <h3 id="readingListHeadingId">Reading List</h3>
+                    <div>
+                      <ul id="readingList"></ul>
                     </div>
+                  </div>
                 </div>
-
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
+              </section>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>
+                The tree is optimized for screen reader and keyboard only users:
+              </h2>
+              <ul>
+                <li>Set focus to the tree using the keyboard.</li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> Arrow keys to move focus between
+                  the tree options.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> Arrow keys to open or close
+                  subtrees.
+                </li>
+                <li>
+                  Press the Ctrl+<kbd class="left">Left</kbd> and Ctrl+<kbd
+                    class="right"
+                    >Right</kbd
+                  >
+                  Arrow keys to open or close groups of subtrees.
+                </li>
+                <li>
+                  Press any letter or number to jump to a tree item starting
+                  with that character or digit.
+                </li>
+                <li>Press <kbd>Enter</kbd> to activate a tree option.</li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the currently open tree.
+                </li>
+                <li>
+                  Mouse users can click the desired tree option to toggle as
+                  usual.
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Trees/Internal/index.htm b/Templates/Trees/Internal/index.htm
index 9ee6a8db..7c1f3a3f 100644
--- a/Templates/Trees/Internal/index.htm
+++ b/Templates/Trees/Internal/index.htm
@@ -1,221 +1,466 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Tree (Internal Content) - 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="bypass">
-        <ul class="list-unstyled">
-            <li>
-                <a class="skip--link" href="javascript:void(0);" onclick="document.getElementById('main').focus();">
-                    Skip to Main Content
-                </a>
-            </li>
-        </ul>
+      <ul class="list-unstyled">
+        <li>
+          <a
+            class="skip--link"
+            href="javascript:void(0);"
+            onclick="document.getElementById('main').focus();"
+          >
+            Skip to Main Content
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
-            </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <li><a href="../External/index.htm">External</a></li>
-                        <li><a href="../Internal/index.htm" aria-current="page">Internal</a></li>
-                    </ul>
-                </nav>
-            </div>
-            <main id="main" class="main" tabindex="-1">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle">Tree <small>Internal Content</small></h1>
-                        <section class="sample-block">
-
-                            <div class="viewport">
-
-                                <div id="container">
-                                    <div class="treeview" role="navigation" aria-label="Library">
-
-                                        <!-- Tree structure does not require ID attribute mapping, and may be nested to any level.
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <li><a href="../External/index.htm">External</a></li>
+              <li>
+                <a href="../Internal/index.htm" aria-current="page">Internal</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main" tabindex="-1">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle">Tree <small>Internal Content</small></h1>
+              <section class="sample-block">
+                <div class="viewport">
+                  <div id="container">
+                    <div
+                      class="treeview"
+                      role="navigation"
+                      aria-label="Library"
+                    >
+                      <!-- Tree structure does not require ID attribute mapping, and may be nested to any level.
 The focusable A tags may include any type of markup for formatting purposes. -->
 
-                                        <ul aria-label="Digital Library Index" class="top tree">
-
-                                            <!-- First branch -->
-                                            <li><a href="#" class="branch"><span>Cyberpunk</span></a>
-                                                <ul hidden class="tree">
-                                                    <li><a href="#" class="branch"><span>Neal Stephenson</span></a>
-                                                        <ul hidden class="tree">
-                                                            <li><a data-author="Neal Stephenson" data-check href="#" class="leaf"><span>Snow Crash</span></a></li>
-                                                            <li><a data-author="Neal Stephenson" data-check href="#" class="leaf"><span>The Diamond Age</span></a></li>
-                                                        </ul>
-                                                    </li>
-                                                    <li><a href="#" class="branch"><span>Richard K. Morgan</span></a>
-                                                        <ul hidden class="tree">
-                                                            <li><a data-author="Richard K. Morgan" data-check href="#" class="leaf"><span>Altered Carbon</span></a></li>
-                                                            <li><a data-author="Richard K. Morgan" data-check href="#" class="leaf"><span>Broken Angels</span></a></li>
-                                                            <li><a data-author="Richard K. Morgan" data-check href="#" class="leaf"><span>Woken Furies</span></a></li>
-                                                        </ul>
-                                                    </li>
-                                                    <li><a href="#" class="branch"><span>William Gibson</span></a>
-                                                        <ul hidden class="tree">
-                                                            <li><a data-author="William Gibson" data-check href="#" class="leaf"><span>Neuromancer</span></a></li>
-                                                            <li><a data-author="William Gibson" data-check href="#" class="leaf"><span>Count Zero</span></a></li>
-                                                            <li><a data-author="William Gibson" data-check href="#" class="leaf"><span>Mona Lisa Overdrive</span></a></li>
-                                                        </ul>
-                                                    </li>
-                                                </ul>
-                                            </li>
-
-                                            <!-- Third branch -->
-                                            <li><a href="#" class="branch"><span>Humor</span></a>
-                                                <ul hidden class="tree">
-                                                    <li><a href="#" class="branch"><span>Christopher Moore</span></a>
-                                                        <ul hidden class="tree">
-                                                            <li><a data-author="Christopher Moore" data-check href="#" class="leaf"><span>Bloodsucking Fiends</span></a></li>
-                                                            <li><a data-author="Christopher Moore" data-check href="#" class="leaf"><span>Fluke</span></a></li>
-                                                            <li><a data-author="Christopher Moore" data-check href="#" class="leaf"><span>Lamb, The Gospel According to Biff</span></a></li>
-                                                        </ul>
-                                                    </li>
-                                                    <li><a href="#" class="branch"><span>Tom Robbins</span></a>
-                                                        <ul hidden class="tree">
-                                                            <li><a data-author="Tom Robbins" data-check href="#" class="leaf"><span>Fierce Invalids Home from Hot Climates</span></a></li>
-                                                        </ul>
-                                                    </li>
-                                                </ul>
-                                            </li>
-
-
-                                            <!-- Second branch -->
-                                            <li><a href="#" class="branch"><span>Fantasy</span></a>
-                                                <ul hidden class="tree">
-                                                    <li><a href="#" class="branch"><span>Jim Butcher</span></a>
-                                                        <ul hidden class="tree">
-                                                            <li><a data-author="Jim Butcher" data-check href="#" class="leaf"><span>Storm Front</span></a></li>
-                                                            <li><a data-author="Jim Butcher" data-check href="#" class="leaf"><span>Fool Moon</span></a></li>
-                                                        </ul>
-                                                    </li>
-                                                    <li><a href="#" class="branch"><span>Victor Gischler</span></a>
-                                                        <ul hidden class="tree">
-                                                            <li><a data-author="Victor Gischler" data-check href="#" class="leaf"><span>Ink Mage</span></a></li>
-                                                            <li><a data-author="Victor Gischler" data-check href="#" class="leaf"><span>The Tattooed Duchess</span></a></li>
-                                                            <li><a data-author="Victor Gischler" data-check href="#" class="leaf"><span>A Painted Goddess</span></a></li>
-                                                        </ul>
-                                                    </li>
-                                                </ul>
-                                            </li>
-
-                                            <li><a aria-disabled="true" href="https://www.goodreads.com/" class="leaf"><span>Goodreads...</span></a></li>
-                                            <li><a href="https://google.com/" class="leaf"><span>Help...</span></a></li>
-                                        </ul>
-
-                                    </div>
-                                </div>
-
-                                <div class="books" role="region" aria-labelledby="readingListHeadingId">
-                                    <h3 id="readingListHeadingId">Reading List</h3>
-                                    <div>
-                                        <ul id="readingList"></ul>
-                                    </div>
-                                </div>
-
-                            </div>
-
-                        </section>
-                    </div>
-                    <div class="keyboard flex-item">
-                        <h2>The tree is optimized for screen reader and keyboard only users:</h2>
-                        <ul>
-                            <li>Set focus to the tree using the keyboard.</li>
-                            <li>Press the <kbd class="up">Up</kbd> and <kbd class="down">Down</kbd> Arrow keys to move focus between the tree options.</li>
-                            <li>Press the <kbd class="left">Left</kbd> and <kbd class="right">Right</kbd> Arrow keys to open or close subtrees.</li>
-                            <li>Press the Ctrl+<kbd class="left">Left</kbd> and Ctrl+<kbd class="right">Right</kbd> Arrow keys to open or close groups of subtrees.</li>
-                            <li>Press any letter or number to jump to a tree item starting with that character or digit.</li>
-                            <li>Press <kbd>Enter</kbd> to activate a tree option.</li>
-                            <li>Press <kbd>Escape</kbd> to close the currently open tree.</li>
-                            <li>Mouse users can click the desired tree option to toggle as usual.</li>
-                        </ul>
-                    </div>
-                </div>
-
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
+                      <ul aria-label="Digital Library Index" class="top tree">
+                        <!-- First branch -->
                         <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
+                          <a href="#" class="branch"><span>Cyberpunk</span></a>
+                          <ul hidden class="tree">
+                            <li>
+                              <a href="#" class="branch"
+                                ><span>Neal Stephenson</span></a
+                              >
+                              <ul hidden class="tree">
+                                <li>
+                                  <a
+                                    data-author="Neal Stephenson"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span>Snow Crash</span></a
+                                  >
+                                </li>
+                                <li>
+                                  <a
+                                    data-author="Neal Stephenson"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span>The Diamond Age</span></a
+                                  >
+                                </li>
+                              </ul>
+                            </li>
+                            <li>
+                              <a href="#" class="branch"
+                                ><span>Richard K. Morgan</span></a
+                              >
+                              <ul hidden class="tree">
+                                <li>
+                                  <a
+                                    data-author="Richard K. Morgan"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span>Altered Carbon</span></a
+                                  >
+                                </li>
+                                <li>
+                                  <a
+                                    data-author="Richard K. Morgan"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span>Broken Angels</span></a
+                                  >
+                                </li>
+                                <li>
+                                  <a
+                                    data-author="Richard K. Morgan"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span>Woken Furies</span></a
+                                  >
+                                </li>
+                              </ul>
+                            </li>
+                            <li>
+                              <a href="#" class="branch"
+                                ><span>William Gibson</span></a
+                              >
+                              <ul hidden class="tree">
+                                <li>
+                                  <a
+                                    data-author="William Gibson"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span>Neuromancer</span></a
+                                  >
+                                </li>
+                                <li>
+                                  <a
+                                    data-author="William Gibson"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span>Count Zero</span></a
+                                  >
+                                </li>
+                                <li>
+                                  <a
+                                    data-author="William Gibson"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span>Mona Lisa Overdrive</span></a
+                                  >
+                                </li>
+                              </ul>
+                            </li>
+                          </ul>
                         </li>
+
+                        <!-- Third branch -->
                         <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
+                          <a href="#" class="branch"><span>Humor</span></a>
+                          <ul hidden class="tree">
+                            <li>
+                              <a href="#" class="branch"
+                                ><span>Christopher Moore</span></a
+                              >
+                              <ul hidden class="tree">
+                                <li>
+                                  <a
+                                    data-author="Christopher Moore"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span>Bloodsucking Fiends</span></a
+                                  >
+                                </li>
+                                <li>
+                                  <a
+                                    data-author="Christopher Moore"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span>Fluke</span></a
+                                  >
+                                </li>
+                                <li>
+                                  <a
+                                    data-author="Christopher Moore"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span
+                                      >Lamb, The Gospel According to Biff</span
+                                    ></a
+                                  >
+                                </li>
+                              </ul>
+                            </li>
+                            <li>
+                              <a href="#" class="branch"
+                                ><span>Tom Robbins</span></a
+                              >
+                              <ul hidden class="tree">
+                                <li>
+                                  <a
+                                    data-author="Tom Robbins"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span
+                                      >Fierce Invalids Home from Hot
+                                      Climates</span
+                                    ></a
+                                  >
+                                </li>
+                              </ul>
+                            </li>
+                          </ul>
                         </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
+
+                        <!-- Second branch -->
                         <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
+                          <a href="#" class="branch"><span>Fantasy</span></a>
+                          <ul hidden class="tree">
+                            <li>
+                              <a href="#" class="branch"
+                                ><span>Jim Butcher</span></a
+                              >
+                              <ul hidden class="tree">
+                                <li>
+                                  <a
+                                    data-author="Jim Butcher"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span>Storm Front</span></a
+                                  >
+                                </li>
+                                <li>
+                                  <a
+                                    data-author="Jim Butcher"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span>Fool Moon</span></a
+                                  >
+                                </li>
+                              </ul>
+                            </li>
+                            <li>
+                              <a href="#" class="branch"
+                                ><span>Victor Gischler</span></a
+                              >
+                              <ul hidden class="tree">
+                                <li>
+                                  <a
+                                    data-author="Victor Gischler"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span>Ink Mage</span></a
+                                  >
+                                </li>
+                                <li>
+                                  <a
+                                    data-author="Victor Gischler"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span>The Tattooed Duchess</span></a
+                                  >
+                                </li>
+                                <li>
+                                  <a
+                                    data-author="Victor Gischler"
+                                    data-check
+                                    href="#"
+                                    class="leaf"
+                                    ><span>A Painted Goddess</span></a
+                                  >
+                                </li>
+                              </ul>
+                            </li>
+                          </ul>
                         </li>
+
                         <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+                          <a
+                            aria-disabled="true"
+                            href="https://www.goodreads.com/"
+                            class="leaf"
+                            ><span>Goodreads...</span></a
+                          >
                         </li>
                         <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
+                          <a href="https://google.com/" class="leaf"
+                            ><span>Help...</span></a
+                          >
                         </li>
-                    </ul>
+                      </ul>
+                    </div>
+                  </div>
+
+                  <div
+                    class="books"
+                    role="region"
+                    aria-labelledby="readingListHeadingId"
+                  >
+                    <h3 id="readingListHeadingId">Reading List</h3>
+                    <div>
+                      <ul id="readingList"></ul>
+                    </div>
+                  </div>
                 </div>
+              </section>
+            </div>
+            <div class="keyboard flex-item">
+              <h2>
+                The tree is optimized for screen reader and keyboard only users:
+              </h2>
+              <ul>
+                <li>Set focus to the tree using the keyboard.</li>
+                <li>
+                  Press the <kbd class="up">Up</kbd> and
+                  <kbd class="down">Down</kbd> Arrow keys to move focus between
+                  the tree options.
+                </li>
+                <li>
+                  Press the <kbd class="left">Left</kbd> and
+                  <kbd class="right">Right</kbd> Arrow keys to open or close
+                  subtrees.
+                </li>
+                <li>
+                  Press the Ctrl+<kbd class="left">Left</kbd> and Ctrl+<kbd
+                    class="right"
+                    >Right</kbd
+                  >
+                  Arrow keys to open or close groups of subtrees.
+                </li>
+                <li>
+                  Press any letter or number to jump to a tree item starting
+                  with that character or digit.
+                </li>
+                <li>Press <kbd>Enter</kbd> to activate a tree option.</li>
+                <li>
+                  Press <kbd>Escape</kbd> to close the currently open tree.
+                </li>
+                <li>
+                  Mouse users can click the desired tree option to toggle as
+                  usual.
+                </li>
+              </ul>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/Trees/index.htm b/Templates/Trees/index.htm
index 52fe8ef6..d2fde3b3 100644
--- a/Templates/Trees/index.htm
+++ b/Templates/Trees/index.htm
@@ -1,75 +1,108 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>ARIA Trees - Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../_common/_doc_files/css/components-style.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../_common/_doc_files/css/components-style.css"
+    />
     <script src="../_common/_doc_files/prism.js"></script>
+  </head>
 
-</head>
-
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>ARIA Trees</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2 class="parent--page">Template Examples</h2>
-                    <ul>
-                        <li><a href="../index.htm">Back to Components</a></li>
-                        <li><a href="External/index.htm">External</a></li>
-                        <li><a href="Internal/index.htm">Internal</a></li>
-                    </ul>
-                </nav>
-                <section class="section--instructions">
-
-                    <h2>Expected behaviors</h2>
-
-                    <p>Ensure that each tree has only one tab stop and that available tree items can be navigated using the arrow keys in the same manner as a native Windows TreeView control.</p>
-
-                    <p>The 4X ARIA Tree module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.</p>
-
-                    <p>The following attributes are handled automatically by the Tree module:</p>
-
-                    <ul>
-                        <li> role=tree</li>
-                        <li> role=group</li>
-                        <li> role=treeitem</li>
-                        <li> aria-expanded</li>
-                        <li> aria-checked</li>
-                        <li> aria-owns</li>
-                        <li> aria-level</li>
-                        <li> aria-multiselectable</li>
-                        <li> aria-selected</li>
-                        <li> tabindex</li>
-                    </ul>
-
-                    <p>Available attributes for tree item links:</p>
-
-                    <ul>
-                        <li> data-controls : The resource path and pointer to the ID attribute of the subtree container element.</li>
-                        <li> data-check : May be set to "false", "true", or "mixed" to set the current state of a checkbox tree item when rendered.</li>
-                    </ul>
-
-                    <h2>HTML syntax</h2>
-
-                    <h3>Standard Tree</h3>
-
-                    <div>
-                        <pre><code class="language-markup">&lt;ul class="aria-tree top">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>ARIA Trees</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2 class="parent--page">Template Examples</h2>
+            <ul>
+              <li><a href="../index.htm">Back to Components</a></li>
+              <li><a href="External/index.htm">External</a></li>
+              <li><a href="Internal/index.htm">Internal</a></li>
+            </ul>
+          </nav>
+          <section class="section--instructions">
+            <h2>Expected behaviors</h2>
+
+            <p>
+              Ensure that each tree has only one tab stop and that available
+              tree items can be navigated using the arrow keys in the same
+              manner as a native Windows TreeView control.
+            </p>
+
+            <p>
+              The 4X ARIA Tree module automatically configures all required ARIA
+              attributes and focus handling, in strict accordance with the ARIA
+              specification.
+            </p>
+
+            <p>
+              The following attributes are handled automatically by the Tree
+              module:
+            </p>
+
+            <ul>
+              <li>role=tree</li>
+              <li>role=group</li>
+              <li>role=treeitem</li>
+              <li>aria-expanded</li>
+              <li>aria-checked</li>
+              <li>aria-owns</li>
+              <li>aria-level</li>
+              <li>aria-multiselectable</li>
+              <li>aria-selected</li>
+              <li>tabindex</li>
+            </ul>
+
+            <p>Available attributes for tree item links:</p>
+
+            <ul>
+              <li>
+                data-controls : The resource path and pointer to the ID
+                attribute of the subtree container element.
+              </li>
+              <li>
+                data-check : May be set to "false", "true", or "mixed" to set
+                the current state of a checkbox tree item when rendered.
+              </li>
+            </ul>
+
+            <h2>HTML syntax</h2>
+
+            <h3>Standard Tree</h3>
+
+            <div>
+              <pre><code class="language-markup">&lt;ul class="aria-tree top">
   &lt;li>
     &lt;a>
       Name One
@@ -85,12 +118,12 @@ <h3>Standard Tree</h3>
 
   &lt;/li>
 &lt;/ul></code></pre>
-                    </div>
+            </div>
 
-                    <h3>Standard Tree Including Checkable Items</h3>
+            <h3>Standard Tree Including Checkable Items</h3>
 
-                    <div>
-                        <pre><code class="language-markup">&lt;ul class="aria-tree top">
+            <div>
+              <pre><code class="language-markup">&lt;ul class="aria-tree top">
   &lt;li>
     &lt;a>
       Name One
@@ -106,33 +139,58 @@ <h3>Standard Tree Including Checkable Items</h3>
 
   &lt;/li>
 &lt;/ul></code></pre>
-                    </div>
-
-                    <p>IMPORTANT: An ARIA Tree must never include any other active elements other than those specified as tree items. Otherwise, all such additional active elements will be undiscoverable and inaccessible to non-sighted screen reader users.</p>
-
-                    <p>Whenever a hidden checkbox is embedded within a checkable tree item element, it will automatically reflect the toggled state of the parent element. This makes it possible to implement custom toggle controls that can be submitted in the same manner as native form controls. This, however, is optional, and may be removed without having any negative impact on the functionality of the simulated toggle control.</p>
-
-                    <h2>JavaScript syntax</h2>
+            </div>
 
-                    <div>
-                        <pre><code class="language-javascript">var myTreeDC = $A.setTree( DOMNodeOrCSSSelectorForRootContainer, {
+            <p>
+              IMPORTANT: An ARIA Tree must never include any other active
+              elements other than those specified as tree items. Otherwise, all
+              such additional active elements will be undiscoverable and
+              inaccessible to non-sighted screen reader users.
+            </p>
+
+            <p>
+              Whenever a hidden checkbox is embedded within a checkable tree
+              item element, it will automatically reflect the toggled state of
+              the parent element. This makes it possible to implement custom
+              toggle controls that can be submitted in the same manner as native
+              form controls. This, however, is optional, and may be removed
+              without having any negative impact on the functionality of the
+              simulated toggle control.
+            </p>
+
+            <h2>JavaScript syntax</h2>
+
+            <div>
+              <pre><code class="language-javascript">var myTreeDC = $A.setTree( DOMNodeOrCSSSelectorForRootContainer, {
 // Configure functionality key / value mappings
 });</code></pre>
-                    </div>
+            </div>
 
-                    <h2>Parameters</h2>
+            <ul>
+              <li>Module file: Tree.js</li>
+              <li>Requires: AccName.js, RovingTabIndex.js.</li>
+              <li>Recommended: Velocity.js, VelocityUI.js.</li>
+            </ul>
 
-                    <ol>
-                        <li>A DOM element or CSS selector to specify the top level container element of the tree structure</li>
-                        <li>A configuration map to customize behaviors and options</li>
-                    </ol>
+            <h2>Parameters</h2>
 
-                    <p>If there is no tree structure to reference, the configuration map can be passed as the first parameter.</p>
+            <ol>
+              <li>
+                A DOM element or CSS selector to specify the top level container
+                element of the tree structure
+              </li>
+              <li>A configuration map to customize behaviors and options</li>
+            </ol>
 
-                    <h3>Configuration</h3>
+            <p>
+              If there is no tree structure to reference, the configuration map
+              can be passed as the first parameter.
+            </p>
 
-                    <div>
-                        <pre><code class="language-javascript">{
+            <h3>Configuration</h3>
+
+            <div>
+              <pre><code class="language-javascript">{
 
 // Optionally specify the content to be rendered when referencing external content.
 // If set, the content property will be auto-populated with the returned content.
@@ -247,67 +305,96 @@ <h3>Configuration</h3>
 // To view available options, reference the help docs located at: "Help/DC API/DC Object Configuration"
 
 }</code></pre>
-                    </div>
-
-                </section>
-            </main>
-        </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
             </div>
-        </footer>
+          </section>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Templates/_common/_doc_files/autosize.js b/Templates/_common/_doc_files/autosize.js
index 97e914a9..1f83d921 100644
--- a/Templates/_common/_doc_files/autosize.js
+++ b/Templates/_common/_doc_files/autosize.js
@@ -2,8 +2,8 @@
   typeof exports === "object" && typeof module !== "undefined"
     ? (module.exports = factory())
     : typeof define === "function" && define.amd
-    ? define(factory)
-    : ((global = global || self), (global.autosize = factory()));
+      ? define(factory)
+      : ((global = global || self), (global.autosize = factory()));
 })(this, function () {
   var map =
     typeof Map === "function"
diff --git a/Templates/_common/_doc_files/prism.js b/Templates/_common/_doc_files/prism.js
index 42152539..24b1b9ec 100644
--- a/Templates/_common/_doc_files/prism.js
+++ b/Templates/_common/_doc_files/prism.js
@@ -6,9 +6,9 @@ var _self =
   typeof window !== "undefined"
     ? window // if in browser
     : typeof WorkerGlobalScope !== "undefined" &&
-      self instanceof WorkerGlobalScope
-    ? self // if in worker
-    : {}; // if in node js
+        self instanceof WorkerGlobalScope
+      ? self // if in worker
+      : {}; // if in node js
 
 /**
  * Prism: Lightweight, robust, elegant syntax highlighting
diff --git a/Templates/_common/index template.htm b/Templates/_common/index template.htm
index c727e1f6..3d489833 100644
--- a/Templates/_common/index template.htm	
+++ b/Templates/_common/index template.htm	
@@ -1,111 +1,147 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title></title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- I have uploaded the CSS styles -->
-    <link rel="stylesheet" type="text/css" href="../../_common/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="css/customize.css">
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../_common/css/components-style.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/customize.css" />
     <script src="/4X/4X.js"></script>
     <script src="js/setup.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header flex-container">
-            <div class="logo flex-item">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../../_common/img/whatsock.svg"></a>
-            </div>
-            <div class="site-name flex-item">
-                <strong>Apex 4X</strong> Technical Style Guide
+      <header class="header flex-container">
+        <div class="logo flex-item">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../../_common/img/whatsock.svg"
+          /></a>
+        </div>
+        <div class="site-name flex-item">
+          <strong>Apex 4X</strong> Technical Style Guide
+        </div>
+      </header>
+      <div class="wrapper">
+        <div class="left-aside">
+          <nav>
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <h2>Template Examples</h2>
+            <ul>
+              <li><a href="../../index.htm">Back to Components</a></li>
+              <li><a href="../index.htm">Back to Parent Widget</a></li>
+              <!-- Other nav items go here -->
+              <!-- add aria-current="page" to current page link-->
+            </ul>
+          </nav>
+        </div>
+        <main id="main" class="main">
+          <div class="demo-block flex-container">
+            <div class="component flex-item">
+              <h1 class="pageTitle"></h1>
+              <!-- Component content goes here -->
             </div>
-        </header>
-        <div class="wrapper">
-            <div class="left-aside">
-                <nav>
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <h2>Template Examples</h2>
-                    <ul>
-                        <li><a href="../../index.htm">Back to Components</a></li>
-                        <li><a href="../index.htm">Back to Parent Widget</a></li>
-                        <!-- Other nav items go here -->
-                        <!-- add aria-current="page" to current page link-->
-                    </ul>
-                </nav>
+            <div class="keyboard flex-item">
+              <!-- Keyboard directions go here -->
+              <!-- replace <p> above list of instructions with a <h2>-->
+              <!-- Unwrap nested <kbd>s -->
             </div>
-            <main id="main" class="main">
-                <div class="demo-block flex-container">
-                    <div class="component flex-item">
-                        <h1 class="pageTitle"></h1>
-                        <!-- Component content goes here -->
-                    </div>
-                    <div class="keyboard flex-item">
-                        <!-- Keyboard directions go here -->
-                        <!-- replace <p> above list of instructions with a <h2>-->
-                        <!-- Unwrap nested <kbd>s -->
-                    </div>
-                </div>
-
-            </main>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Templates/index.htm b/Templates/index.htm
index 85ada8d7..33698dfc 100644
--- a/Templates/index.htm
+++ b/Templates/index.htm
@@ -1,114 +1,155 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="_common/_doc_files/css/global.css">
-</head>
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="_common/_doc_files/css/global.css"
+    />
+  </head>
 
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/img/whatsock.svg">
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>Widget Templates</strong> </h1>
-                <nav class="navigation--parent">
-                    <p><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></p>
-                    <ul>
-                        <li><a href="Accordions/index.htm">Accordions</a></li>
-                        <li><a href="Buttons/index.htm">Buttons</a></li>
-                        <li><a href="Carousels/index.htm">Carousels</a></li>
-                        <li><a href="Checkboxes/index.htm">Checkboxes</a></li>
-                        <li><a href="Comboboxes/index.htm">Comboboxes</a></li>
-                        <li><a href="Datepickers/index.htm">Datepickers</a></li>
-                        <li><a href="Dialogs/index.htm">Dialogs</a></li>
-                        <li><a href="Drag/index.htm">Drag and Drop</a></li>
-                        <li><a href="Footnotes/index.htm">Footnotes</a></li>
-                        <li><a href="Grids/index.htm">Grids</a></li>
-                        <li><a href="Listboxes/index.htm">Listboxes</a></li>
-                        <li><a href="Menus/index.htm">Menus</a></li>
-                        <li><a href="Popups/index.htm">Popups</a></li>
-                        <li><a href="Radios/index.htm">Radios</a></li>
-                        <li><a href="Sliders/index.htm">Sliders</a></li>
-                        <li><a href="Switches/index.htm">Switches</a></li>
-                        <li><a href="Tabs/index.htm">Tabs</a></li>
-                        <li><a href="Tooltips/index.htm">Tooltips</a></li>
-                        <li><a href="Trees/index.htm">Trees</a></li>
-                    </ul>
-                </nav>
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="/Templates/_common/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>Widget Templates</strong></h1>
+          <nav class="navigation--parent">
+            <p>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </p>
+            <ul>
+              <li><a href="Accordions/index.htm">Accordions</a></li>
+              <li><a href="Buttons/index.htm">Buttons</a></li>
+              <li><a href="Carousels/index.htm">Carousels</a></li>
+              <li><a href="Checkboxes/index.htm">Checkboxes</a></li>
+              <li><a href="Comboboxes/index.htm">Comboboxes</a></li>
+              <li><a href="Datepickers/index.htm">Datepickers</a></li>
+              <li><a href="Dialogs/index.htm">Dialogs</a></li>
+              <li><a href="Drag/index.htm">Drag and Drop</a></li>
+              <li><a href="Footnotes/index.htm">Footnotes</a></li>
+              <li><a href="Grids/index.htm">Grids</a></li>
+              <li><a href="Listboxes/index.htm">Listboxes</a></li>
+              <li><a href="Menus/index.htm">Menus</a></li>
+              <li><a href="Popups/index.htm">Popups</a></li>
+              <li><a href="Radios/index.htm">Radios</a></li>
+              <li><a href="Sliders/index.htm">Sliders</a></li>
+              <li><a href="Switches/index.htm">Switches</a></li>
+              <li><a href="Tabs/index.htm">Tabs</a></li>
+              <li><a href="Tooltips/index.htm">Tooltips</a></li>
+              <li><a href="Trees/index.htm">Trees</a></li>
+            </ul>
+          </nav>
 
-                <div>
-                    <p class="dark--bg">
-                        All available ARIA widget templates are available for immediate use. None require any prior knowledge of ARIA to implement.
-                    </p>
-                </div>
-            </main>
+          <div>
+            <p class="dark--bg">
+              All available ARIA widget templates are available for immediate
+              use. None require any prior knowledge of ARIA to implement.
+            </p>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Tutorials/Beginner-Conclusion.htm b/Tutorials/Beginner-Conclusion.htm
index f61bb29d..fcf18c97 100644
--- a/Tutorials/Beginner-Conclusion.htm
+++ b/Tutorials/Beginner-Conclusion.htm
@@ -1,159 +1,244 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Apex 4X ? Beginner Conclusion</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/css/components-style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/css/components-style.css"
+    />
 
     <style type="text/css">
-        .conclusion {
-            padding-top: 1em;
-        }
-
-        nav>ul>li>a[aria-current="page"] {
-            border-top: 2px solid var(--navLinkBackground);
-        }
-
-        .pagination .flex-container-row {
-            display: flex;
-            flex-flow: row wrap;
-            justify-content: center;
-            margin: auto;
-            padding: 1em;
-        }
-
+      .conclusion {
+        padding-top: 1em;
+      }
+
+      nav > ul > li > a[aria-current="page"] {
+        border-top: 2px solid var(--navLinkBackground);
+      }
+
+      .pagination .flex-container-row {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        margin: auto;
+        padding: 1em;
+      }
+
+      .pagination .flex-container-row .flex-item {
+        flex: 1 0 100%;
+      }
+
+      .pagination .flex-container-row .flex-item:nth-child(2) {
+        text-align: right;
+      }
+
+      @media (min-width: 70em) {
         .pagination .flex-container-row .flex-item {
-            flex: 1 0 100%;
+          flex: 1 0 0;
+          text-align: left;
         }
 
         .pagination .flex-container-row .flex-item:nth-child(2) {
-            text-align: right;
-        }
-
-        @media (min-width: 70em) {
-            .pagination .flex-container-row .flex-item {
-                flex: 1 0 0;
-                text-align: left;
-            }
-
-            .pagination .flex-container-row .flex-item:nth-child(2) {
-                text-align: right;
-            }
+          text-align: right;
         }
+      }
     </style>
+  </head>
 
-</head>
-
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-            <nav aria-label="main" class="navigation--parent">
-
-                <ul>
-                    <li><a href="../Templates/index.htm">Widget Templates</a></li>
-                </ul>
-
-                <h2 class="parent--page">Steps</h2>
-                <ul>
-                    <li><a href="Beginner-Introduction.htm">Introduction</a></li>
-                    <li><a href="Beginner-Example-01.htm">1. Form Rendering (Using Core Functions)</a></li>
-                    <li><a href="Beginner-Example-02.htm">2. ARIA Button Rendering (Using Core Functions)</a></li>
-                    <li><a href="Beginner-Example-03.htm">3. DC Objects (Converting Elements)</a></li>
-                    <li><a href="Beginner-Example-04.htm">4. Date Picker (Using Modules)</a></li>
-                    <li><a href="Beginner-Example-05.htm">5. Menu Module (Dynamic Loading)</a></li>
-                    <li><a href="Beginner-Conclusion.htm" aria-current="page">Beginner Conclusion</a></li>
-                </ul>
-            </nav>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>Beginner Conclusion</strong></h1>
-
-                <div class="section--instructions">
-                    <section class="preamble">
-                        <p> With these examples, you should now have a better idea about the various ways that 4X can be used to build feature rich accessible web technologies.</p>
-                        <p>This does, however, only scratch the surface of what is possible.</p>
-                        <p>To access all of these examples, including all of the help documents that were referenced in the Beginner Tutorial,
-                            <a class="templatesLink" target="_blank" href="https://github.com/whatsock/apex">download Apex 4X</a></p>
-                        <p>
-                            Otherwise,
-                            <a id="templatesLink" class="templatesLink" href="../Templates/index.htm">click here to browse the accessible Widget templates</a>.
-                        </p>
-                    </section>
-
-                    <nav aria-label="pagination" class="pagination">
-                        <div class="flex-container-row">
-                            <div class="flex-item"><a href="Beginner-Example-05.htm">&lt;&lt; Previous example</a></div>
-                            <div class="flex-item"></div>
-                        </div>
-                    </nav>
-                </div>
-
-            </main>
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
+        <nav aria-label="main" class="navigation--parent">
+          <ul>
+            <li><a href="../Templates/index.htm">Widget Templates</a></li>
+          </ul>
+
+          <h2 class="parent--page">Steps</h2>
+          <ul>
+            <li><a href="Beginner-Introduction.htm">Introduction</a></li>
+            <li>
+              <a href="Beginner-Example-01.htm"
+                >1. Form Rendering (Using Core Functions)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-02.htm"
+                >2. ARIA Button Rendering (Using Core Functions)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-03.htm"
+                >3. DC Objects (Converting Elements)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-04.htm"
+                >4. Date Picker (Using Modules)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-05.htm"
+                >5. Menu Module (Dynamic Loading)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Conclusion.htm" aria-current="page"
+                >Beginner Conclusion</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>Beginner Conclusion</strong></h1>
+
+          <div class="section--instructions">
+            <section class="preamble">
+              <p>
+                With these examples, you should now have a better idea about the
+                various ways that 4X can be used to build feature rich
+                accessible web technologies.
+              </p>
+              <p>
+                This does, however, only scratch the surface of what is
+                possible.
+              </p>
+              <p>
+                To access all of these examples, including all of the help
+                documents that were referenced in the Beginner Tutorial,
+                <a
+                  class="templatesLink"
+                  target="_blank"
+                  href="https://github.com/whatsock/apex"
+                  >download Apex 4X</a
+                >
+              </p>
+              <p>
+                Otherwise,
+                <a
+                  id="templatesLink"
+                  class="templatesLink"
+                  href="../Templates/index.htm"
+                  >click here to browse the accessible Widget templates</a
+                >.
+              </p>
+            </section>
+
+            <nav aria-label="pagination" class="pagination">
+              <div class="flex-container-row">
                 <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+                  <a href="Beginner-Example-05.htm"
+                    >&lt;&lt; Previous example</a
+                  >
                 </div>
-            </div>
-        </footer>
+                <div class="flex-item"></div>
+              </div>
+            </nav>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
-
-</html>
\ No newline at end of file
+  </body>
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/Tutorials/Beginner-Example-01.htm b/Tutorials/Beginner-Example-01.htm
index 8e75d0bf..46e340c3 100644
--- a/Tutorials/Beginner-Example-01.htm
+++ b/Tutorials/Beginner-Example-01.htm
@@ -1,338 +1,455 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Apex 4X Beginner Tutorial | Example 1 - Form Rendering (Using Core Functions)</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/Buttons/Standard/css/buttons.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/prism.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Apex 4X Beginner Tutorial | Example 1 - Form Rendering (Using Core
+      Functions)
+    </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/css/components-style.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/Buttons/Standard/css/buttons.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/prism.css"
+    />
     <script src="../Templates/_common/_doc_files/prism.js"></script>
-
     <script src="../4X/4X.js"></script>
     <script src="../4X/Standard/Min/Beep.js"></script>
     <script src="../4X/Standard/Min/Velocity.js"></script>
     <script src="../4X/Standard/Min/VelocityUI.js"></script>
     <script src="../4X/Standard/Min/Animate.js"></script>
-
     <style type="text/css">
-        a.templatesLink:focus,
-        a.templatesLink:hover {
-            text-decoration: none;
-        }
-
-        textarea {
-            min-width: 90%;
-        }
-
-        nav>ul>li>a[aria-current="page"] {
-            border-top: 2px solid var(--navLinkBackground);
-        }
-
+      a.templatesLink:focus,
+      a.templatesLink:hover {
+        text-decoration: none;
+      }
+
+      textarea {
+        min-width: 90%;
+      }
+
+      nav > ul > li > a[aria-current="page"] {
+        border-top: 2px solid var(--navLinkBackground);
+      }
+
+      .btn--example {
+        margin: 1em 0;
+        background: var(--whatsock-orange-main);
+        border: 2px solid #774b04;
+        border-radius: 0.5em;
+        padding: 0.5em 1em;
+        font-weight: 700;
+        font-size: 1rem;
+      }
+
+      @media (min-width: 400px) {
         .btn--example {
-            margin: 1em 0;
-            background: var(--whatsock-orange-main);
-            border: 2px solid #774b04;
-            border-radius: 0.5em;
-            padding: 0.5em 1em;
-            font-weight: 700;
-            font-size: 1rem;
-        }
-
-        @media (min-width: 400px) {
-            .btn--example {
-            font-size: 1.2rem;
-            }
-        }
-
-        /*Example 1 Form Styles*/
-        #frm1 form p+p {
-            margin-top: 1em;
+          font-size: 1.2rem;
         }
-
-        #frm1 fieldset {
-            border: 2px groove threedface;
-            margin-bottom: 2em;
-            padding: 1em;
-            padding-top: 0;
-            position: relative;
-            margin-top: 2em;
-        }
-
-        #frm1 legend {
-            font-family: Helvetica, Arial, sans-serif;
-            font-size: 1.3rem;
-            font-weight: 400;
-            padding-bottom: 1.5em;
-            text-transform: uppercase;
-        }
-
-        .form--container {
-            border-radius: 3px;
-            list-style-type: none;
-            max-width: 38em;
-            padding: 0;
-        }
-
-        .form--container p {
-            display: flex;
-            flex-flow: row wrap;
-            justify-content: flex-end;
-            padding: .5em;
-        }
-
-        .form--container p label {
-            flex: 1;
-            padding: .5em 1em .5em 0;
-            font-weight: 700;
-        }
-
+      }
+
+      /*Example 1 Form Styles*/
+      #frm1 form p + p {
+        margin-top: 1em;
+      }
+
+      #frm1 fieldset {
+        border: 2px groove threedface;
+        margin-bottom: 2em;
+        padding: 1em;
+        padding-top: 0;
+        position: relative;
+        margin-top: 2em;
+      }
+
+      #frm1 legend {
+        font-family: Helvetica, Arial, sans-serif;
+        font-size: 1.3rem;
+        font-weight: 400;
+        padding-bottom: 1.5em;
+        text-transform: uppercase;
+      }
+
+      .form--container {
+        border-radius: 3px;
+        list-style-type: none;
+        max-width: 38em;
+        padding: 0;
+      }
+
+      .form--container p {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: flex-end;
+        padding: 0.5em;
+      }
+
+      .form--container p label {
+        flex: 1;
+        padding: 0.5em 1em 0.5em 0;
+        font-weight: 700;
+      }
+
+      .form--container p input {
+        flex: 3;
+        min-width: 13em;
+        padding: 0.5em;
+        border: 1px solid #c0c0c0;
+        border-radius: 2px;
+        font-size: 100%;
+        padding: 0.5em 1em;
+      }
+
+      .form--container p input[type="submit"] {
+        border-radius: 0.5em;
+        flex: none;
+        min-width: 6em;
+      }
+
+      .form--container span.error {
+        color: #be0b0b;
+        font-size: 85%;
+      }
+
+      @media (min-width: 33em) {
         .form--container p input {
-            flex: 3;
-            min-width: 13em;
-            padding: .5em;
-            border: 1px solid #c0c0c0;
-            border-radius: 2px;
-            font-size: 100%;
-            padding: 0.5em 1em;
+          min-width: 15em;
         }
+      }
 
-        .form--container p input[type="submit"] {
-            border-radius: 0.5em;
-            flex: none;
-            min-width: 6em;
-        }
+      .pagination .flex-container-row {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        margin: auto;
+        padding: 1em;
+      }
 
-        .form--container span.error {
-            color: #be0b0b;
-            font-size: 85%;
-        }
-
-        @media (min-width: 33em) {
-            .form--container p input {
-                min-width: 15em;
-            }
-        }
+      .pagination .flex-container-row .flex-item {
+        flex: 1 0 auto;
+      }
 
-        .pagination .flex-container-row {
-            display: flex;
-            flex-flow: row wrap;
-            justify-content: center;
-            margin: auto;
-            padding: 1em;
-        }
+      .pagination .flex-container-row .flex-item:nth-child(2) {
+        text-align: right;
+      }
 
+      @media (min-width: 70em) {
         .pagination .flex-container-row .flex-item {
-            flex: 1 0 auto;
+          flex: 1 0 0;
+          text-align: left;
         }
 
         .pagination .flex-container-row .flex-item:nth-child(2) {
-            text-align: right;
-        }
-
-        @media (min-width: 70em) {
-            .pagination .flex-container-row .flex-item {
-                flex: 1 0 0;
-                text-align: left;
-            }
-
-            .pagination .flex-container-row .flex-item:nth-child(2) {
-                text-align: right;
-            }
+          text-align: right;
         }
+      }
     </style>
+  </head>
 
-</head>
-
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-            <nav aria-label="main" class="navigation--parent">
-
-                <ul>
-                    <li><a href="../Templates/index.htm">Widget Templates</a></li>
-                </ul>
-
-                <h2 class="parent--page">Steps</h2>
-                <ul>
-                    <li><a href="Beginner-Introduction.htm">Introduction</a></li>
-                    <li><a href="Beginner-Example-01.htm" aria-current="page">1. Form Rendering (Using Core Functions)</a></li>
-                    <li><a href="Beginner-Example-02.htm">2. ARIA Button Rendering (Using Core Functions)</a></li>
-                    <li><a href="Beginner-Example-03.htm">3. DC Objects (Converting Elements)</a></li>
-                    <li><a href="Beginner-Example-04.htm">4. Date Picker (Using Modules)</a></li>
-                    <li><a href="Beginner-Example-05.htm">5. Menu Module (Dynamic Loading)</a></li>
-                    <li><a href="Beginner-Conclusion.htm">Beginner Conclusion</a></li>
-                </ul>
-            </nav>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>Example 1 &mdash; Form Rendering (Using Core Functions)</strong></h1>
-
-                <div class="section--instructions">
-                    <section class="preamble">
-                        <p>This first example is very basic, and demonstrates one of the core 4X methods for ARIA support.</p>
-                        <p>In this case, when a form is submitted and a dynamic inline error message is generated, 4X is used to associate the error with the field and set focus to the field in error. This will cause screen readers to automatically announce the error message when the field receives focus. This is accomplished by setting the Description property for the form field in the accessibility tree.</p>
-                        <p>Since the result of this example will not be obvious to sighted users who are not running a screen reader, it will be important to install Visual ARIA to understand what is happening. There are several options for doing this.</p>
-                        <ul>
-                            <li><a target="_blank" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk?hl=en-GB">Visual ARIA for Chrome</a></li>
-                            <li><a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA for Firefox</a></li>
-                            <li><a target="_blank" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA for Web</a></li>
-                        </ul>
-                        <p>You may need to restart your browser and return to this page after installing the Chrome or Firefox extension.</p>
-                        <p>After running the example code below, activate Visual ARIA and mouse over the form fields to see how 4X has dynamically set the Description property for the form field in error.</p>
-                    </section>
-
-                    <div>
-                        <section class="section--example">
-                            <h2>Example 1 &mdash; Coding Sandbox</h2>
-                            <p>
-                                Using core 4X features to add enhanced accessibility for assistive technology users.
-                            </p>
-                            <textarea title="Example 1 markup" id="example1.1">
-                                              <div class="form--container">
-                                                  <form id="frm1">
-                                                      <fieldset>
-                                                          <legend> Home Address</legend>
-                                                          <p>
-                                                              <label for="strt">Street:</label> 
-                                                              <input type="text" name="street" aria-required="true" id="strt">
-                                                              <span hidden id="error-01" class="error">Error! Required field. Please enter a Street number and name.</span>
-                                                          </p>
-                                                          <p>
-                                                              <label for="cty">City:</label> 
-                                                              <input type="text" name="city"  aria-required="true" id="cty">
-                                                          </p>
-                                                          <p>
-                                                              <label for="zp">Postcode:</label> 
-                                                              <input type="text" name="postcode"  aria-required="true" id="pc">
-                                                          </p>
-                                                          <p class="select--container">
-                                                              <label for="ctry">Country:</label>
-                                                              <input type="text" name="country-input-value"  aria-required="true" id="ctry">
-                                                          </p>
-                                                      </fieldset>
-                                                  </form>
-                                              </div>
-                                  </textarea>
-
-                    </div>
-
-                    <div>
-                        <textarea title="Example 1 JS" id="example1.2">
-                                  // Show the error.
-                                  // Set the Description property for the form field in error and reference the associated error message, then move focus to the field.
-                                  // Help/Module Imports/Actions/Show
-                                  // Help/ARIA Development/DescribedBy
-                                                                    // Help/ARIA Development/Focus
-
-                                  $A("#error-01").show(function() {
-                                    $A("#strt").describedBy("#error-01").focus();
-                                  });
-                                  </textarea>
-                    </div>
-
-                    <div>
-                        <button class="btn--example example1">Render Example 1</button>
-                        <div role="region" aria-label="Rendered Markup" id="example1"></div>
-                        <script>
-                            (function() {
-                                var markup = $A.get("example1.1"),
-                                    js = $A.get("example1.2"),
-                                    div = $A.get("example1");
-                                $A.on("button.example1", "click", function(ev) {
-                                    try {
-                                        div.innerHTML = markup.value;
-                                        var f = new Function("window,document,$A", js.value);
-                                        f.call(window, window, document, $A);
-                                        $A.beep();
-                                    } catch (e) {
-                                        throw e;
-                                    }
-                                });
-                            })();
-                        </script>
-                    </div>
-
-                    </section>
-
-                    <nav aria-label="pagination" class="pagination">
-                        <div class="flex-container-row">
-                            <div class="flex-item"><a href="Beginner-Introduction.htm">&lt;&lt; Previous example</a></div>
-                            <div class="flex-item"><a href="Beginner-Example-02.htm">Next example &gt;&gt;</a></div>
-                        </div>
-                    </nav>
-
-                </div>
-            </main>
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
+        <nav aria-label="main" class="navigation--parent">
+          <ul>
+            <li><a href="../Templates/index.htm">Widget Templates</a></li>
+          </ul>
+          <h2 class="parent--page">Steps</h2>
+          <ul>
+            <li><a href="Beginner-Introduction.htm">Introduction</a></li>
+            <li>
+              <a href="Beginner-Example-01.htm" aria-current="page"
+                >1. Form Rendering (Using Core Functions)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-02.htm"
+                >2. ARIA Button Rendering (Using Core Functions)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-03.htm"
+                >3. DC Objects (Converting Elements)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-04.htm"
+                >4. Date Picker (Using Modules)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-05.htm"
+                >5. Menu Module (Dynamic Loading)</a
+              >
+            </li>
+            <li><a href="Beginner-Conclusion.htm">Beginner Conclusion</a></li>
+          </ul>
+        </nav>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1>
+            <strong
+              >Example 1 &mdash; Form Rendering (Using Core Functions)</strong
+            >
+          </h1>
+          <div class="section--instructions">
+            <section class="preamble">
+              <p>
+                This first example is very basic, and demonstrates one of the
+                core 4X methods for ARIA support.
+              </p>
+              <p>
+                In this case, when a form is submitted and a dynamic inline
+                error message is generated, 4X is used to associate the error
+                with the field and set focus to the field in error. This will
+                cause screen readers to automatically announce the error message
+                when the field receives focus. This is accomplished by setting
+                the Description property for the form field in the accessibility
+                tree.
+              </p>
+              <p>
+                Since the result of this example will not be obvious to sighted
+                users who are not running a screen reader, it will be important
+                to install Visual ARIA to understand what is happening. There
+                are several options for doing this.
+              </p>
+              <ul>
+                <li>
+                  <a
+                    target="_blank"
+                    href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk?hl=en-GB"
+                    >Visual ARIA for Chrome</a
+                  >
+                </li>
+                <li>
+                  <a
+                    target="_blank"
+                    href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                    >Visual ARIA for Firefox</a
+                  >
+                </li>
+                <li>
+                  <a
+                    target="_blank"
+                    href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                    >Visual ARIA for Web</a
+                  >
+                </li>
+              </ul>
+              <p>
+                You may need to restart your browser and return to this page
+                after installing the Chrome or Firefox extension.
+              </p>
+              <p>
+                After running the example code below, activate Visual ARIA and
+                mouse over the form fields to see how 4X has dynamically set the
+                Description property for the form field in error.
+              </p>
+            </section>
+            <div>
+              <section class="section--example">
+                <h2>Example 1 &mdash; Coding Sandbox</h2>
+                <p>
+                  Using core 4X features to add enhanced accessibility for
+                  assistive technology users.
+                </p>
+                <textarea title="Example 1 markup" id="example1.1">
+                                <div class="form--container">
+                                    <form id="frm1">
+                                        <fieldset>
+                                            <legend> Home Address</legend>
+                                            <p>
+                                                <label for="strt">Street:</label>
+                                                <input type="text" name="street" aria-required="true" id="strt">
+                                                <span hidden id="error-01" class="error">Error! Required field. Please enter a Street number and name.</span>
+                                            </p>
+                                            <p>
+                                                <label for="cty">City:</label>
+                                                <input type="text" name="city" aria-required="true" id="cty">
+                                            </p>
+                                            <p>
+                                                <label for="zp">Postcode:</label>
+                                                <input type="text" name="postcode" aria-required="true" id="pc">
+                                            </p>
+                                            <p class="select--container">
+                                                <label for="ctry">Country:</label>
+                                                <input type="text" name="country-input-value" aria-required="true" id="ctry">
+                                            </p>
+                                        </fieldset>
+                                    </form>
+                                </div>
+                            </textarea
+                >
+                <div>
+                  <textarea title="Example 1 JS" id="example1.2">
+                                    // Show the error.
+                                    // Set the Description property for the form field in error and reference the associated error message, then move focus to the field.
+                                    // Help/Module Imports/Actions/Show
+                                    // Help/ARIA Development/DescribedBy
+                                    // Help/ARIA Development/Focus
+                                    $A("#error-01").show(function() {
+                                        $A("#strt").describedBy("#error-01").focus();
+                                    });
+                                </textarea
+                  >
                 </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
+                <div>
+                  <button class="btn--example example1">
+                    Render Example 1
+                  </button>
+                  <div
+                    role="region"
+                    aria-label="Rendered Markup"
+                    id="example1"
+                  ></div>
+                  <script>
+                    (function () {
+                      var markup = $A.get("example1.1"),
+                        js = $A.get("example1.2"),
+                        div = $A.get("example1");
+                      $A.on("button.example1", "click", function (ev) {
+                        try {
+                          div.innerHTML = markup.value;
+                          var f = new Function("window,document,$A", js.value);
+                          f.call(window, window, document, $A);
+                          $A.beep();
+                        } catch (e) {
+                          throw e;
+                        }
+                      });
+                    })();
+                  </script>
                 </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
+              </section>
+              <nav aria-label="pagination" class="pagination">
+                <div class="flex-container-row">
+                  <div class="flex-item">
+                    <a href="Beginner-Introduction.htm"
+                      >&lt;&lt; Previous example</a
+                    >
+                  </div>
+                  <div class="flex-item">
+                    <a href="Beginner-Example-02.htm">Next example &gt;&gt;</a>
+                  </div>
                 </div>
+              </nav>
             </div>
-        </footer>
+          </div>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
-<script src="../Templates/_common/_doc_files/autosize.js"></script>
-<script>
+  </body>
+
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+  <script src="../Templates/_common/_doc_files/autosize.js"></script>
+  <script>
     autosize($A.query("textarea"));
-</script>
-
-</html>
\ No newline at end of file
+  </script>
+</html>
diff --git a/Tutorials/Beginner-Example-02.htm b/Tutorials/Beginner-Example-02.htm
index bdb99564..15921cb7 100644
--- a/Tutorials/Beginner-Example-02.htm
+++ b/Tutorials/Beginner-Example-02.htm
@@ -1,149 +1,202 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Apex 4X Beginner Tutorial | Example 2 - ARIA Button Rendering (Using Core Functions)</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/Buttons/Standard/css/buttons.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/prism.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Apex 4X Beginner Tutorial | Example 2 - ARIA Button Rendering (Using Core
+      Functions)
+    </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/css/components-style.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/Buttons/Standard/css/buttons.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/prism.css"
+    />
     <script src="../Templates/_common/_doc_files/prism.js"></script>
 
     <script src="../4X/4X.js"></script>
     <script src="../4X/Standard/Min/Beep.js"></script>
 
     <style type="text/css">
-        a.templatesLink:focus,
-        a.templatesLink:hover {
-            text-decoration: none;
-        }
-
-        textarea {
-            min-width: 90%;
-        }
-
-        nav>ul>li>a[aria-current="page"] {
-            border-top: 2px solid var(--navLinkBackground);
-        }
-
+      a.templatesLink:focus,
+      a.templatesLink:hover {
+        text-decoration: none;
+      }
+
+      textarea {
+        min-width: 90%;
+      }
+
+      nav > ul > li > a[aria-current="page"] {
+        border-top: 2px solid var(--navLinkBackground);
+      }
+
+      .btn--example {
+        margin: 1em 0;
+        background: var(--whatsock-orange-main);
+        border: 2px solid #774b04;
+        border-radius: 0.5em;
+        padding: 0.5em 1em;
+        font-weight: 700;
+        font-size: 1rem;
+      }
+
+      @media (min-width: 400px) {
         .btn--example {
-            margin: 1em 0;
-            background: var(--whatsock-orange-main);
-            border: 2px solid #774b04;
-            border-radius: 0.5em;
-            padding: 0.5em 1em;
-            font-weight: 700;
-            font-size: 1rem;
-        }
-
-        @media (min-width: 400px) {
-            .btn--example {
-            font-size: 1.2rem;
-            }
-        }
-
-        .btn--example:focus {
-            outline: 5px solid var(--whatsock-red);
+          font-size: 1.2rem;
         }
-
-        .render--aria-button {
-            margin-top: 1em;
-            background: var(--whatsockBeige);
-            width: 10em;
-            padding: 0.5em 1.3em;
-            text-align: center;
-            font-weight: 700;
-            border: 3px solid var(--whatsock-red);
-            border-radius: 1em;
-        }
-
-        .render--aria-button:focus {
-            outline: 4px solid #262626;
-        }
-
-        .pagination .flex-container-row {
-            display: flex;
-            flex-flow: row wrap;
-            justify-content: center;
-            margin: auto;
-            padding: 1em;
-        }
-
+      }
+
+      .btn--example:focus {
+        outline: 5px solid var(--whatsock-red);
+      }
+
+      .render--aria-button {
+        margin-top: 1em;
+        background: var(--whatsockBeige);
+        width: 10em;
+        padding: 0.5em 1.3em;
+        text-align: center;
+        font-weight: 700;
+        border: 3px solid var(--whatsock-red);
+        border-radius: 1em;
+      }
+
+      .render--aria-button:focus {
+        outline: 4px solid #262626;
+      }
+
+      .pagination .flex-container-row {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        margin: auto;
+        padding: 1em;
+      }
+
+      .pagination .flex-container-row .flex-item {
+        flex: 1 0 auto;
+      }
+
+      .pagination .flex-container-row .flex-item:nth-child(2) {
+        text-align: right;
+      }
+
+      @media (min-width: 70em) {
         .pagination .flex-container-row .flex-item {
-            flex: 1 0 auto;
+          flex: 1 0 0;
+          text-align: left;
         }
 
         .pagination .flex-container-row .flex-item:nth-child(2) {
-            text-align: right;
-        }
-
-        @media (min-width: 70em) {
-            .pagination .flex-container-row .flex-item {
-                flex: 1 0 0;
-                text-align: left;
-            }
-
-            .pagination .flex-container-row .flex-item:nth-child(2) {
-                text-align: right;
-            }
+          text-align: right;
         }
+      }
     </style>
+  </head>
 
-</head>
-
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-            <nav aria-label="main" class="navigation--parent">
-
-                <ul>
-                    <li><a href="../Templates/index.htm">Widget Templates</a></li>
-                </ul>
-
-                <h2 class="parent--page">Steps</h2>
-                <ul>
-                    <li><a href="Beginner-Introduction.htm">Introduction</a></li>
-                    <li><a href="Beginner-Example-01.htm">1. Form Rendering (Using Core Functions)</a></li>
-                    <li><a href="Beginner-Example-02.htm" aria-current="page">2. ARIA Button Rendering (Using Core Functions)</a></li>
-                    <li><a href="Beginner-Example-03.htm">3. DC Objects (Converting Elements)</a></li>
-                    <li><a href="Beginner-Example-04.htm">4. Date Picker (Using Modules)</a></li>
-                    <li><a href="Beginner-Example-05.htm">5. Menu Module (Dynamic Loading)</a></li>
-                    <li><a href="Beginner-Conclusion.htm">Beginner Conclusion</a></li>
-                </ul>
-            </nav>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>Example 2 &mdash; ARIA Button Rendering (Using Core Functions)</strong></h1>
-
-                <div class="section--instructions">
-
-                    <section class="preamble">
-                        <p>This is another basic example that uses a core 4X method to convert a static element into a fully accessible one for both screen reader and sighted keyboard-only users.</p>
-                        <p>After the simulated button is rendered, activate Visual ARIA to observe how the accessibility mapping for the element has changed, plus use the keyboard by pressing Tab to navigate to the button and see how this now works.</p>
-                    </section>
-                    <section>
-                        <h2>Example 2 &mdash; Coding Sandbox</h2>
-                        <p>
-                            Using core 4X features to add keyboard support and accessible role information to a simulated active element for assistive technology users.
-                        </p>
-                        <textarea title="Example 2 markup" id="example2.1">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+        <nav aria-label="main" class="navigation--parent">
+          <ul>
+            <li><a href="../Templates/index.htm">Widget Templates</a></li>
+          </ul>
+
+          <h2 class="parent--page">Steps</h2>
+          <ul>
+            <li><a href="Beginner-Introduction.htm">Introduction</a></li>
+            <li>
+              <a href="Beginner-Example-01.htm"
+                >1. Form Rendering (Using Core Functions)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-02.htm" aria-current="page"
+                >2. ARIA Button Rendering (Using Core Functions)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-03.htm"
+                >3. DC Objects (Converting Elements)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-04.htm"
+                >4. Date Picker (Using Modules)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-05.htm"
+                >5. Menu Module (Dynamic Loading)</a
+              >
+            </li>
+            <li><a href="Beginner-Conclusion.htm">Beginner Conclusion</a></li>
+          </ul>
+        </nav>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1>
+            <strong
+              >Example 2 &mdash; ARIA Button Rendering (Using Core
+              Functions)</strong
+            >
+          </h1>
+
+          <div class="section--instructions">
+            <section class="preamble">
+              <p>
+                This is another basic example that uses a core 4X method to
+                convert a static element into a fully accessible one for both
+                screen reader and sighted keyboard-only users.
+              </p>
+              <p>
+                After the simulated button is rendered, activate Visual ARIA to
+                observe how the accessibility mapping for the element has
+                changed, plus use the keyboard by pressing Tab to navigate to
+                the button and see how this now works.
+              </p>
+            </section>
+            <section>
+              <h2>Example 2 &mdash; Coding Sandbox</h2>
+              <p>
+                Using core 4X features to add keyboard support and accessible
+                role information to a simulated active element for assistive
+                technology users.
+              </p>
+              <textarea title="Example 2 markup" id="example2.1">
                                   <div class="example2 render--aria-button">
                                     What?
                                   </div>
-                                  </textarea>
-
-
-                        <div>
+                                  </textarea
+              >
 
-                            <textarea title="Example 2 JS" id="example2.2">
+              <div>
+                <textarea title="Example 2 JS" id="example2.2">
                                                     // Convert the DIV tag into a keyboard accessible button that is accessible to screen reader users.
                                                     // Help/ARIA Development/SetKeyboardA11Y
                                                     
@@ -152,106 +205,138 @@ <h2>Example 2 &mdash; Coding Sandbox</h2>
                                                         alert("ALRIGHT!");
                                                       }
                                                     );
-                                                    </textarea>
-                        </div>
-
-                        <div>
-                            <button class="btn--example">Render Example 2</button>
-                            <div id="example2"></div>
-                            <script>
-                                (function() {
-                                    var markup = $A.get("example2.1"),
-                                        js = $A.get("example2.2"),
-                                        div = $A.get("example2");
-                                    $A.on("button.btn--example", "click", function(ev) {
-                                        try {
-                                            div.innerHTML = markup.value;
-                                            var f = new Function("window,document,$A", js.value);
-                                            f.call(window, window, document, $A);
-                                            $A.beep();
-                                        } catch (e) {
-                                            throw e;
-                                        }
-                                    });
-                                })();
-                            </script>
-                        </div>
-
-                    </section>
-
-                    <nav aria-label="pagination" class="pagination">
-                        <div class="flex-container-row">
-                            <div class="flex-item"><a href="Beginner-Example-01.htm">&lt;&lt; Previous example</a></div>
-                            <div class="flex-item"><a href="Beginner-Example-03.htm">Next example &gt;&gt;</a></div>
-                        </div>
-                    </nav>
-
-
+                                                    </textarea
+                >
+              </div>
+
+              <div>
+                <button class="btn--example">Render Example 2</button>
+                <div id="example2"></div>
+                <script>
+                  (function () {
+                    var markup = $A.get("example2.1"),
+                      js = $A.get("example2.2"),
+                      div = $A.get("example2");
+                    $A.on("button.btn--example", "click", function (ev) {
+                      try {
+                        div.innerHTML = markup.value;
+                        var f = new Function("window,document,$A", js.value);
+                        f.call(window, window, document, $A);
+                        $A.beep();
+                      } catch (e) {
+                        throw e;
+                      }
+                    });
+                  })();
+                </script>
+              </div>
+            </section>
+
+            <nav aria-label="pagination" class="pagination">
+              <div class="flex-container-row">
+                <div class="flex-item">
+                  <a href="Beginner-Example-01.htm"
+                    >&lt;&lt; Previous example</a
+                  >
                 </div>
-
-        </div>
+                <div class="flex-item">
+                  <a href="Beginner-Example-03.htm">Next example &gt;&gt;</a>
+                </div>
+              </div>
+            </nav>
+          </div>
         </main>
-    </div>
-    <footer class="footer">
+      </div>
+      <footer class="footer">
         <div class="flex-container-row">
-            <div class="flex-item">
-                <h2>License</h2>
-                <p>
-                    Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                </p>
-            </div>
-            <div class="flex-item">
-                <h2>Resources</h2>
-                <ul>
-                    <li>
-                        <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                    </li>
-                </ul>
-            </div>
-            <div class="flex-item">
-                <h2>Acknowledgements</h2>
-                <ul class="list--horizontal">
-                    <li>
-                        Author and developer:
-                        <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                    </li>
-                    <li>
-                        Website designer:
-                        <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                    </li>
-                    <li>
-                        Style and markup editor:
-                        <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                    </li>
-                </ul>
-            </div>
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-    </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
-<script src="../Templates/_common/_doc_files/autosize.js"></script>
-<script>
+  </body>
+
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+  <script src="../Templates/_common/_doc_files/autosize.js"></script>
+  <script>
     autosize($A.query("textarea"));
-</script>
-
-</html>
\ No newline at end of file
+  </script>
+</html>
diff --git a/Tutorials/Beginner-Example-03.htm b/Tutorials/Beginner-Example-03.htm
index 56944f0d..e990835a 100644
--- a/Tutorials/Beginner-Example-03.htm
+++ b/Tutorials/Beginner-Example-03.htm
@@ -1,13 +1,24 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Apex 4X Beginner Tutorial | Example 3 - DC Objects</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/prism.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/css/components-style.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/prism.css"
+    />
     <script src="../Templates/_common/_doc_files/prism.js"></script>
 
     <script src="../4X/4X.js"></script>
@@ -17,172 +28,206 @@
     <script src="../4X/Standard/Min/Animate.js"></script>
 
     <style type="text/css">
-        a.templatesLink:focus,
-        a.templatesLink:hover {
-            text-decoration: none;
-        }
-
-        textarea {
-            min-width: 90%;
-        }
-
-        nav>ul>li>a[aria-current="page"] {
-            border-top: 2px solid var(--navLinkBackground);
-        }
-
+      a.templatesLink:focus,
+      a.templatesLink:hover {
+        text-decoration: none;
+      }
+
+      textarea {
+        min-width: 90%;
+      }
+
+      nav > ul > li > a[aria-current="page"] {
+        border-top: 2px solid var(--navLinkBackground);
+      }
+
+      .btn--example {
+        margin: 1em 0;
+        background: var(--whatsock-orange-main);
+        border: 2px solid #774b04;
+        border-radius: 0.5em;
+        padding: 0.5em 1em;
+        font-weight: 700;
+        font-size: 1rem;
+      }
+
+      @media (min-width: 400px) {
         .btn--example {
-            margin: 1em 0;
-            background: var(--whatsock-orange-main);
-            border: 2px solid #774b04;
-            border-radius: 0.5em;
-            padding: 0.5em 1em;
-            font-weight: 700;
-            font-size: 1rem;
-        }
-
-        @media (min-width: 400px) {
-            .btn--example {
-            font-size: 1.2rem;
-            }
-        }
-
-        .btn--example:focus {
-            outline: 5px solid var(--whatsock-red);
+          font-size: 1.2rem;
         }
-
-        .render--aria-button {
-            margin-top: 1em;
-            background: var(--whatsockBeige);
-            width: 10em;
-            padding: 0.5em 1.3em;
-            text-align: center;
-            font-weight: 700;
-            border: 3px solid var(--whatsock-red);
-            border-radius: 1em;
-        }
-
-        .render--aria-button:focus {
-            outline: 4px solid #262626;
-        }
-
-        .pagination .flex-container-row {
-            display: flex;
-            flex-flow: row wrap;
-            justify-content: center;
-            margin: auto;
-            padding: 1em;
-        }
-
+      }
+
+      .btn--example:focus {
+        outline: 5px solid var(--whatsock-red);
+      }
+
+      .render--aria-button {
+        margin-top: 1em;
+        background: var(--whatsockBeige);
+        width: 10em;
+        padding: 0.5em 1.3em;
+        text-align: center;
+        font-weight: 700;
+        border: 3px solid var(--whatsock-red);
+        border-radius: 1em;
+      }
+
+      .render--aria-button:focus {
+        outline: 4px solid #262626;
+      }
+
+      .pagination .flex-container-row {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        margin: auto;
+        padding: 1em;
+      }
+
+      .pagination .flex-container-row .flex-item {
+        flex: 1 0 auto;
+      }
+
+      .pagination .flex-container-row .flex-item:nth-child(2) {
+        text-align: right;
+      }
+
+      @font-face {
+        font-family: "paint";
+        src: url("./fonts/AcylicalHand-Thick.ttf") format("truetype");
+      }
+
+      @font-face {
+        font-family: "tag";
+        src: url("./fonts/UrbanDecay.ttf") format("truetype");
+      }
+
+      .blackboard {
+        font-size: 10pt;
+        position: fixed;
+        z-index: 1;
+        top: 20%;
+        text-align: left;
+        padding: 20px 50px;
+        background-color: black;
+        border: 1px solid #286278;
+        box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
+        background-image: url("./img/BlackStoneAnthracite.jpg");
+      }
+
+      .blackboard .paint {
+        padding: 20px 20px;
+        color: #ccff15;
+        font-family: paint;
+      }
+
+      .blackboard .tag {
+        padding: 20px 20px;
+        color: #ff3131;
+        font-family: tag;
+      }
+
+      @media (min-width: 70em) {
         .pagination .flex-container-row .flex-item {
-            flex: 1 0 auto;
+          flex: 1 0 0;
+          text-align: left;
         }
 
         .pagination .flex-container-row .flex-item:nth-child(2) {
-            text-align: right;
-        }
-
-        @font-face {
-            font-family: "paint";
-            src: url("./fonts/AcylicalHand-Thick.ttf") format("truetype");
-        }
-
-        @font-face {
-            font-family: "tag";
-            src: url("./fonts/UrbanDecay.ttf") format("truetype");
-        }
-
-        .blackboard {
-            font-size: 10pt;
-            position: fixed;
-            z-index: 1;
-            top: 20%;
-            text-align: left;
-            padding: 20px 50px;
-            background-color: black;
-            border: 1px solid #286278;
-            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
-            background-image: url("./img/BlackStoneAnthracite.jpg");
-        }
-
-        .blackboard .paint {
-            padding: 20px 20px;
-            color: #ccff15;
-            font-family: paint;
-        }
-
-        .blackboard .tag {
-            padding: 20px 20px;
-            color: #FF3131;
-            font-family: tag;
-        }
-
-        @media (min-width: 70em) {
-            .pagination .flex-container-row .flex-item {
-                flex: 1 0 0;
-                text-align: left;
-            }
-
-            .pagination .flex-container-row .flex-item:nth-child(2) {
-                text-align: right;
-            }
+          text-align: right;
         }
+      }
     </style>
+  </head>
 
-</head>
-
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-            <nav aria-label="main" class="navigation--parent">
-
-                <ul>
-                    <li><a href="../Templates/index.htm">Widget Templates</a></li>
-                </ul>
-
-                <h2 class="parent--page">Steps</h2>
-                <ul>
-                    <li><a href="Beginner-Introduction.htm">Introduction</a></li>
-                    <li><a href="Beginner-Example-01.htm">1. Form Rendering (Using Core Functions)</a></li>
-                    <li><a href="Beginner-Example-02.htm">2. ARIA Button Rendering (Using Core Functions)</a></li>
-                    <li><a href="Beginner-Example-03.htm" aria-current="page">3. DC Objects (Converting Elements)</a></li>
-                    <li><a href="Beginner-Example-04.htm">4. Date Picker (Using Modules)</a></li>
-                    <li><a href="Beginner-Example-05.htm">5. Menu Module (Dynamic Loading)</a></li>
-                    <li><a href="Beginner-Conclusion.htm">Beginner Conclusion</a></li>
-                </ul>
-            </nav>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>Example 3 &mdash; DC Objects</strong></h1>
-
-                <div class="section--instructions">
-
-                    <section class="preamble">
-                        <p>This example uses a core 4X method to convert an element into a DC (Dynamic Component) object.</p>
-                        <p>This will give the element access to all of the properties and methods documented in the folder "Help/DC API/DC Object Properties and Methods", which can be used to add advanced functionality.</p>
-                        <p>DC objects can be used for any purpose; be remapped to provide parent/child/sibling relationships that are separate from the DOM order hierarchy, and remain persistent even when they don't exist in the DOM.</p>
-                    </section>
-                    <section>
-                        <h2>Example 3 &mdash; Coding Sandbox</h2>
-                        <p>
-                            Convert a standard element into a DC object and add dynamic functionality.
-                        </p>
-                        <textarea title="Example 3 markup" id="example3.1">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+        <nav aria-label="main" class="navigation--parent">
+          <ul>
+            <li><a href="../Templates/index.htm">Widget Templates</a></li>
+          </ul>
+
+          <h2 class="parent--page">Steps</h2>
+          <ul>
+            <li><a href="Beginner-Introduction.htm">Introduction</a></li>
+            <li>
+              <a href="Beginner-Example-01.htm"
+                >1. Form Rendering (Using Core Functions)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-02.htm"
+                >2. ARIA Button Rendering (Using Core Functions)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-03.htm" aria-current="page"
+                >3. DC Objects (Converting Elements)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-04.htm"
+                >4. Date Picker (Using Modules)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-05.htm"
+                >5. Menu Module (Dynamic Loading)</a
+              >
+            </li>
+            <li><a href="Beginner-Conclusion.htm">Beginner Conclusion</a></li>
+          </ul>
+        </nav>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>Example 3 &mdash; DC Objects</strong></h1>
+
+          <div class="section--instructions">
+            <section class="preamble">
+              <p>
+                This example uses a core 4X method to convert an element into a
+                DC (Dynamic Component) object.
+              </p>
+              <p>
+                This will give the element access to all of the properties and
+                methods documented in the folder "Help/DC API/DC Object
+                Properties and Methods", which can be used to add advanced
+                functionality.
+              </p>
+              <p>
+                DC objects can be used for any purpose; be remapped to provide
+                parent/child/sibling relationships that are separate from the
+                DOM order hierarchy, and remain persistent even when they don't
+                exist in the DOM.
+              </p>
+            </section>
+            <section>
+              <h2>Example 3 &mdash; Coding Sandbox</h2>
+              <p>
+                Convert a standard element into a DC object and add dynamic
+                functionality.
+              </p>
+              <textarea title="Example 3 markup" id="example3.1">
                                                                     <div hidden class="blackboard">
                                                                       <div class="paint">SHE WALKS IN BEAUTY</div>
                                                                       <div class="paint">LIKE THE NIGHT</div>
                                                                       <div class="tag">BYRON</div>
                                                                     </div>
-                                  </textarea>
-
-                        <div>
+                                  </textarea
+              >
 
-                            <textarea title="Example 3 JS" id="example3.2">
+              <div>
+                <textarea title="Example 3 JS" id="example3.2">
                                                                     // Convert the div with class "blackboard" into a DC object, add configuration options, render the hidden element, then fire an alert to announce the new message to screen reader users.
 
                                                                     // Help/$A API/DC Objects/ToDC
@@ -231,106 +276,138 @@ <h2>Example 3 &mdash; Coding Sandbox</h2>
                                                                     // Fire an alert for screen reader users to announce the content of the DC object.
                                                                     // Help/DC API/DC Object Properties and Methods/ARIA Methods/Alert
                                                                     .alert();
-                                                    </textarea>
-                        </div>
-
-                        <div>
-                            <button class="btn--example">Render Example 3</button>
-                            <div id="example3"></div>
-                            <script>
-                                (function() {
-                                    var markup = $A.get("example3.1"),
-                                        js = $A.get("example3.2"),
-                                        div = $A.get("example3");
-                                    $A.on("button.btn--example", "click", function(ev) {
-                                        try {
-                                            div.innerHTML = markup.value;
-                                            var f = new Function("window,document,$A", js.value);
-                                            f.call(window, window, document, $A);
-                                            $A.beep();
-                                        } catch (e) {
-                                            throw e;
-                                        }
-                                    });
-                                })();
-                            </script>
-                        </div>
-
-                    </section>
-
-                    <nav aria-label="pagination" class="pagination">
-                        <div class="flex-container-row">
-                            <div class="flex-item"><a href="Beginner-Example-02.htm">&lt;&lt; Previous example</a></div>
-                            <div class="flex-item"><a href="Beginner-Example-04.htm">Next example &gt;&gt;</a></div>
-                        </div>
-                    </nav>
-
-
+                                                    </textarea
+                >
+              </div>
+
+              <div>
+                <button class="btn--example">Render Example 3</button>
+                <div id="example3"></div>
+                <script>
+                  (function () {
+                    var markup = $A.get("example3.1"),
+                      js = $A.get("example3.2"),
+                      div = $A.get("example3");
+                    $A.on("button.btn--example", "click", function (ev) {
+                      try {
+                        div.innerHTML = markup.value;
+                        var f = new Function("window,document,$A", js.value);
+                        f.call(window, window, document, $A);
+                        $A.beep();
+                      } catch (e) {
+                        throw e;
+                      }
+                    });
+                  })();
+                </script>
+              </div>
+            </section>
+
+            <nav aria-label="pagination" class="pagination">
+              <div class="flex-container-row">
+                <div class="flex-item">
+                  <a href="Beginner-Example-02.htm"
+                    >&lt;&lt; Previous example</a
+                  >
                 </div>
-
-        </div>
+                <div class="flex-item">
+                  <a href="Beginner-Example-04.htm">Next example &gt;&gt;</a>
+                </div>
+              </div>
+            </nav>
+          </div>
         </main>
-    </div>
-    <footer class="footer">
+      </div>
+      <footer class="footer">
         <div class="flex-container-row">
-            <div class="flex-item">
-                <h2>License</h2>
-                <p>
-                    Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                </p>
-            </div>
-            <div class="flex-item">
-                <h2>Resources</h2>
-                <ul>
-                    <li>
-                        <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                    </li>
-                </ul>
-            </div>
-            <div class="flex-item">
-                <h2>Acknowledgements</h2>
-                <ul class="list--horizontal">
-                    <li>
-                        Author and developer:
-                        <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                    </li>
-                    <li>
-                        Website designer:
-                        <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                    </li>
-                    <li>
-                        Style and markup editor:
-                        <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                    </li>
-                </ul>
-            </div>
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-    </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
-<script src="../Templates/_common/_doc_files/autosize.js"></script>
-<script>
+  </body>
+
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+  <script src="../Templates/_common/_doc_files/autosize.js"></script>
+  <script>
     autosize($A.query("textarea"));
-</script>
-
-</html>
\ No newline at end of file
+  </script>
+</html>
diff --git a/Tutorials/Beginner-Example-04.htm b/Tutorials/Beginner-Example-04.htm
index 72fb731f..eff684d0 100644
--- a/Tutorials/Beginner-Example-04.htm
+++ b/Tutorials/Beginner-Example-04.htm
@@ -1,14 +1,31 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Apex 4X Beginner Tutorial | Example 4 - Date Picker (Using Modules)</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/Datepickers/Basic/css/datepicker.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Apex 4X Beginner Tutorial | Example 4 - Date Picker (Using Modules)
+    </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/css/components-style.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/Datepickers/Basic/css/datepicker.css"
+    />
     <script src="../Templates/_common/_doc_files/prism.js"></script>
 
     <script src="../4X/4X.js"></script>
@@ -19,168 +36,209 @@
     <script src="../4X/Standard/Min/Datepicker.js"></script>
 
     <style type="text/css">
-        a.templatesLink:focus,
-        a.templatesLink:hover {
-            text-decoration: none;
-        }
-
-        textarea {
-            min-width: 90%;
-        }
-
-        .calendar--beginner-tutorial {
-            position: relative;
-        }
-
-        .calendar--beginner-tutorial .calendar {
-            top: 2em;
-        }
-
-        div#example4 {
-            position: relative;
-        }
-
-        button#dateIcon2 {
-            top: -1.6em;
-            position: absolute;
-        }
-
-        nav>ul>li>a[aria-current="page"] {
-            border-top: 2px solid var(--navLinkBackground);
-        }
-
-        /*removing some of the Prism spacing as there is way tooo much padding amd margin space*/
-        .prism--restyling {
-            display: flex;
-        }
-
-        .prism--restyling>pre[class*="language-"] {
-            padding: 0 1em 1.5em 1em;
-        }
-
-        code[class*="language-"],
-        pre[class*="language-"] {
-            white-space: pre-line;
-        }
-
-        .prism--restyling>pre[class*="language-"] .token.punctuation {
-            opacity: 1;
-        }
-
-        p.prism--before {
-            margin-bottom: 0;
-        }
-
+      a.templatesLink:focus,
+      a.templatesLink:hover {
+        text-decoration: none;
+      }
+
+      textarea {
+        min-width: 90%;
+      }
+
+      .calendar--beginner-tutorial {
+        position: relative;
+      }
+
+      .calendar--beginner-tutorial .calendar {
+        top: 2em;
+      }
+
+      div#example4 {
+        position: relative;
+      }
+
+      button#dateIcon2 {
+        top: -1.6em;
+        position: absolute;
+      }
+
+      nav > ul > li > a[aria-current="page"] {
+        border-top: 2px solid var(--navLinkBackground);
+      }
+
+      /*removing some of the Prism spacing as there is way tooo much padding amd margin space*/
+      .prism--restyling {
+        display: flex;
+      }
+
+      .prism--restyling > pre[class*="language-"] {
+        padding: 0 1em 1.5em 1em;
+      }
+
+      code[class*="language-"],
+      pre[class*="language-"] {
+        white-space: pre-line;
+      }
+
+      .prism--restyling > pre[class*="language-"] .token.punctuation {
+        opacity: 1;
+      }
+
+      p.prism--before {
+        margin-bottom: 0;
+      }
+
+      .btn--example {
+        margin: 1em 0;
+        background: var(--whatsock-orange-main);
+        border: 2px solid #774b04;
+        border-radius: 0.5em;
+        padding: 0.5em 1em;
+        font-weight: 700;
+        font-size: 1rem;
+      }
+
+      @media (min-width: 400px) {
         .btn--example {
-            margin: 1em 0;
-            background: var(--whatsock-orange-main);
-            border: 2px solid #774b04;
-            border-radius: 0.5em;
-            padding: 0.5em 1em;
-            font-weight: 700;
-            font-size: 1rem;
+          font-size: 1.2rem;
         }
+      }
 
-        @media (min-width: 400px) {
-            .btn--example {
-            font-size: 1.2rem;
-            }
-        }
+      .btn--example:focus {
+        outline: 5px solid var(--whatsock-red);
+      }
 
-        .btn--example:focus {
-            outline: 5px solid var(--whatsock-red);
-        }
+      .pagination .flex-container-row {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        margin: auto;
+        padding: 1em;
+      }
 
-        .pagination .flex-container-row {
-            display: flex;
-            flex-flow: row wrap;
-            justify-content: center;
-            margin: auto;
-            padding: 1em;
-        }
+      .pagination .flex-container-row .flex-item {
+        flex: 1 0 auto;
+      }
 
+      .pagination .flex-container-row .flex-item:nth-child(2) {
+        text-align: right;
+      }
+
+      @media (min-width: 70em) {
         .pagination .flex-container-row .flex-item {
-            flex: 1 0 auto;
+          flex: 1 0 0;
+          text-align: left;
         }
 
         .pagination .flex-container-row .flex-item:nth-child(2) {
-            text-align: right;
-        }
-
-        @media (min-width: 70em) {
-            .pagination .flex-container-row .flex-item {
-                flex: 1 0 0;
-                text-align: left;
-            }
-
-            .pagination .flex-container-row .flex-item:nth-child(2) {
-                text-align: right;
-            }
+          text-align: right;
         }
+      }
     </style>
+  </head>
 
-</head>
-
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-            <nav aria-label="main" class="navigation--parent">
-
-                <ul>
-                    <li><a href="../Templates/index.htm">Widget Templates</a></li>
-                </ul>
-
-                <h2 class="parent--page">Steps</h2>
-                <ul>
-                    <li><a href="Beginner-Introduction.htm">Introduction</a></li>
-                    <li><a href="Beginner-Example-01.htm">1. Form Rendering (Using Core Functions)</a></li>
-                    <li><a href="Beginner-Example-02.htm">2. ARIA Button Rendering (Using Core Functions)</a></li>
-                    <li><a href="Beginner-Example-03.htm">3. DC Objects (Converting Elements)</a></li>
-                    <li><a href="Beginner-Example-04.htm" aria-current="page">4. Date Picker (Using Modules)</a></li>
-                    <li><a href="Beginner-Example-05.htm">5. Menu Module (Dynamic Loading)</a></li>
-                    <li><a href="Beginner-Conclusion.htm">Beginner Conclusion</a></li>
-                </ul>
-            </nav>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>Example 4 &mdash; Date Picker (Using Modules)</strong></h1>
-
-                <div class="section--instructions">
-
-                    <section class="preamble">
-                        <p>4X also includes the ability to load modules to extend its core functionality. No special format or syntax is needed to do this; any valid JavaScript can be loaded as a module. However, one of the benefits of using modules is that shared modules need only be loaded once, no matter how many other modules depend on that shared module to function properly.</p>
-                        <p>The standard script tag can be used to load modules into 4X. This does, however, require that shared modules be loaded in the correct order.</p>
-                        <p>All available modules that can be loaded using the standard script tag are located in the folder: <strong>"4X/Standard"</strong>.</p>
-                        <p>Whenever a module requires another shared module to be loaded in advance, these dependencies are documented at the top of the relevant module file for easy referencing.</p>
-                    </section>
-
-                    <section>
-                        <h2>Example 4 &mdash; Coding Sandbox</h2>
-                        <p>Using standard modules to import the Datepicker module into 4X.</p>
-                        <div>
-
-                            <textarea title="Example 4 markup" id="example4.1">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+        <nav aria-label="main" class="navigation--parent">
+          <ul>
+            <li><a href="../Templates/index.htm">Widget Templates</a></li>
+          </ul>
+
+          <h2 class="parent--page">Steps</h2>
+          <ul>
+            <li><a href="Beginner-Introduction.htm">Introduction</a></li>
+            <li>
+              <a href="Beginner-Example-01.htm"
+                >1. Form Rendering (Using Core Functions)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-02.htm"
+                >2. ARIA Button Rendering (Using Core Functions)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-03.htm"
+                >3. DC Objects (Converting Elements)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-04.htm" aria-current="page"
+                >4. Date Picker (Using Modules)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-05.htm"
+                >5. Menu Module (Dynamic Loading)</a
+              >
+            </li>
+            <li><a href="Beginner-Conclusion.htm">Beginner Conclusion</a></li>
+          </ul>
+        </nav>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1>
+            <strong>Example 4 &mdash; Date Picker (Using Modules)</strong>
+          </h1>
+
+          <div class="section--instructions">
+            <section class="preamble">
+              <p>
+                4X also includes the ability to load modules to extend its core
+                functionality. No special format or syntax is needed to do this;
+                any valid JavaScript can be loaded as a module. However, one of
+                the benefits of using modules is that shared modules need only
+                be loaded once, no matter how many other modules depend on that
+                shared module to function properly.
+              </p>
+              <p>
+                The standard script tag can be used to load modules into 4X.
+                This does, however, require that shared modules be loaded in the
+                correct order.
+              </p>
+              <p>
+                All available modules that can be loaded using the standard
+                script tag are located in the folder:
+                <strong>"4X/Standard"</strong>.
+              </p>
+              <p>
+                Whenever a module requires another shared module to be loaded in
+                advance, these dependencies are documented at the top of the
+                relevant module file for easy referencing.
+              </p>
+            </section>
+
+            <section>
+              <h2>Example 4 &mdash; Coding Sandbox</h2>
+              <p>
+                Using standard modules to import the Datepicker module into 4X.
+              </p>
+              <div>
+                <textarea title="Example 4 markup" id="example4.1">
                                   <label for="dateId2">Set Date:</label>
                                   <input placeholder="MM/DD/YYYY" id="dateId2" type="text" name="date">
                                   <button id="dateIcon2" class="accCalendar aria-date-picker">
                                     <img src="../Templates/Datepickers/Basic/img/calendar-button.svg" alt="Calendar" title="Calendar" />
                                   </button>
-                                  </textarea>
-
-                        </div>
+                                  </textarea
+                >
+              </div>
 
-                        <div>
-
-                            <textarea title="Example 4 JS" id="example4.2">
+              <div>
+                <textarea title="Example 4 JS" id="example4.2">
                                   // Create a datepicker that includes animation effects.
                                   // Help/VelocityUI-Effects-Index
-                                  // Help/Module Imports/Dynamic Components/Datepicker
+                                  // Help/Module Imports/Widgets/Datepicker
                                   
                                   var datepicker = $A.setDatepicker({
                                   
@@ -217,105 +275,142 @@ <h2>Example 4 &mdash; Coding Sandbox</h2>
                                   });
                                   
                                   datepicker.render(); // Manually open the datepicker.
-                                  </textarea>
-
-                        </div>
-
-                        <div class="calendar--beginner-tutorial">
-                            <button class="example4 btn--example">Render Example 4</button>
-                            <div role="region" aria-label="Rendered Markup" id="example4"></div>
-                            <script>
-                                (function() {
-                                    var markup = $A.get("example4.1"),
-                                        js = $A.get("example4.2"),
-                                        div = $A.get("example4");
-                                    $A.on("button.example4", "click", function(ev) {
-                                        try {
-                                            div.innerHTML = markup.value;
-                                            var f = new Function("window,document,$A", js.value);
-                                            f.call(window, window, document, $A);
-                                            $A.beep();
-                                        } catch (e) {
-                                            throw e;
-                                        }
-                                    });
-                                })();
-                            </script>
-                        </div>
-
-                        <nav aria-label="pagination" class="pagination">
-                            <div class="flex-container-row">
-                                <div class="flex-item"><a href="Beginner-Example-03.htm">&lt;&lt; Previous example</a></div>
-                                <div class="flex-item"><a href="Beginner-Example-05.htm">Next example &gt;&gt;</a></div>
-                            </div>
-                        </nav>
-
+                                  </textarea
+                >
+              </div>
+
+              <div class="calendar--beginner-tutorial">
+                <button class="example4 btn--example">Render Example 4</button>
+                <div
+                  role="region"
+                  aria-label="Rendered Markup"
+                  id="example4"
+                ></div>
+                <script>
+                  (function () {
+                    var markup = $A.get("example4.1"),
+                      js = $A.get("example4.2"),
+                      div = $A.get("example4");
+                    $A.on("button.example4", "click", function (ev) {
+                      try {
+                        div.innerHTML = markup.value;
+                        var f = new Function("window,document,$A", js.value);
+                        f.call(window, window, document, $A);
+                        $A.beep();
+                      } catch (e) {
+                        throw e;
+                      }
+                    });
+                  })();
+                </script>
+              </div>
+            </section>
+
+            <nav aria-label="pagination" class="pagination">
+              <div class="flex-container-row">
+                <div class="flex-item">
+                  <a href="Beginner-Example-03.htm"
+                    >&lt;&lt; Previous example</a
+                  >
                 </div>
-
-        </div>
-
+                <div class="flex-item">
+                  <a href="Beginner-Example-05.htm">Next example &gt;&gt;</a>
+                </div>
+              </div>
+            </nav>
+          </div>
         </main>
-    </div>
-    <footer class="footer">
+      </div>
+      <footer class="footer">
         <div class="flex-container-row">
-            <div class="flex-item">
-                <h2>License</h2>
-                <p>
-                    Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                </p>
-            </div>
-            <div class="flex-item">
-                <h2>Resources</h2>
-                <ul>
-                    <li>
-                        <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                    </li>
-                </ul>
-            </div>
-            <div class="flex-item">
-                <h2>Acknowledgements</h2>
-                <ul class="list--horizontal">
-                    <li>
-                        Author and developer:
-                        <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                    </li>
-                    <li>
-                        Website designer:
-                        <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                    </li>
-                    <li>
-                        Style and markup editor:
-                        <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                    </li>
-                </ul>
-            </div>
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-    </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
-<script src="../Templates/_common/_doc_files/autosize.js"></script>
-<script>
+  </body>
+
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+  <script src="../Templates/_common/_doc_files/autosize.js"></script>
+  <script>
     autosize($A.query("textarea"));
-</script>
-
-</html>
\ No newline at end of file
+  </script>
+</html>
diff --git a/Tutorials/Beginner-Example-05.htm b/Tutorials/Beginner-Example-05.htm
index 46d29bf1..4695289d 100644
--- a/Tutorials/Beginner-Example-05.htm
+++ b/Tutorials/Beginner-Example-05.htm
@@ -1,152 +1,210 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Apex 4X Beginner Tutorial | Example 5 - Menu Module (Dynamic Loading)</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/prism.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/Menus/Internal/css/menus.css">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>
+      Apex 4X Beginner Tutorial | Example 5 - Menu Module (Dynamic Loading)
+    </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/css/components-style.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/prism.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/Menus/Internal/css/menus.css"
+    />
     <script src="../Templates/_common/_doc_files/prism.js"></script>
 
     <script src="../4X/4X.js"></script>
     <script src="../4X/Standard/Min/Beep.js"></script>
 
     <style type="text/css">
-        a.templatesLink:focus,
-        a.templatesLink:hover {
-            text-decoration: none;
-        }
-
-        textarea {
-            min-width: 90%;
-        }
-
-        button.aria-menu {
-            color: var(--bodyText);
-            background: var(--whatsock-orange-main) url(../img/sprite.svg) right -290px no-repeat;
-            margin-bottom: 0;
-        }
-
-        ul.top.menu {
-            margin: 0;
-            margin-bottom: 1em;
-        }
-
-        ul.menu {
-            margin-left: 10.1em;
-        }
-
-        nav>ul>li>a[aria-current="page"] {
-            border-top: 2px solid var(--navLinkBackground);
-        }
-
+      a.templatesLink:focus,
+      a.templatesLink:hover {
+        text-decoration: none;
+      }
+
+      textarea {
+        min-width: 90%;
+      }
+
+      button.aria-menu {
+        color: var(--bodyText);
+        background: var(--whatsock-orange-main) url(../img/sprite.svg) right -290px
+          no-repeat;
+        margin-bottom: 0;
+      }
+
+      ul.top.menu {
+        margin: 0;
+        margin-bottom: 1em;
+      }
+
+      ul.menu {
+        margin-left: 10.1em;
+      }
+
+      nav > ul > li > a[aria-current="page"] {
+        border-top: 2px solid var(--navLinkBackground);
+      }
+
+      .btn--example {
+        margin: 1em 0;
+        background: var(--whatsock-orange-main);
+        border: 2px solid #774b04;
+        border-radius: 0.5em;
+        padding: 0.5em 1em;
+        font-weight: 700;
+        font-size: 1rem;
+      }
+
+      @media (min-width: 400px) {
         .btn--example {
-            margin: 1em 0;
-            background: var(--whatsock-orange-main);
-            border: 2px solid #774b04;
-            border-radius: 0.5em;
-            padding: 0.5em 1em;
-            font-weight: 700;
-            font-size: 1rem;
+          font-size: 1.2rem;
         }
+      }
 
-        @media (min-width: 400px) {
-            .btn--example {
-            font-size: 1.2rem;
-            }
-        }
+      .btn--example:focus {
+        outline: 5px solid var(--whatsock-red);
+      }
 
-        .btn--example:focus {
-            outline: 5px solid var(--whatsock-red);
-        }
+      .pagination .flex-container-row {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        margin: auto;
+        padding: 1em;
+      }
 
-        .pagination .flex-container-row {
-            display: flex;
-            flex-flow: row wrap;
-            justify-content: center;
-            margin: auto;
-            padding: 1em;
-        }
+      .pagination .flex-container-row .flex-item {
+        flex: 1 0 auto;
+      }
+
+      .pagination .flex-container-row .flex-item:nth-child(2) {
+        text-align: right;
+      }
 
+      @media (min-width: 70em) {
         .pagination .flex-container-row .flex-item {
-            flex: 1 0 auto;
+          flex: 1 0 0;
+          text-align: left;
         }
 
         .pagination .flex-container-row .flex-item:nth-child(2) {
-            text-align: right;
-        }
-
-        @media (min-width: 70em) {
-            .pagination .flex-container-row .flex-item {
-                flex: 1 0 0;
-                text-align: left;
-            }
-
-            .pagination .flex-container-row .flex-item:nth-child(2) {
-                text-align: right;
-            }
+          text-align: right;
         }
+      }
     </style>
+  </head>
 
-</head>
-
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-            <nav aria-label="main" class="navigation--parent">
-
-                <ul>
-                    <li><a href="../Templates/index.htm">Widget Templates</a></li>
-                </ul>
-
-                <h2 class="parent--page">Steps</h2>
-                <ul>
-                    <li><a href="Beginner-Introduction.htm">Introduction</a></li>
-                    <li><a href="Beginner-Example-01.htm">1. Form Rendering (Using Core Functions)</a></li>
-                    <li><a href="Beginner-Example-02.htm">2. ARIA Button Rendering (Using Core Functions)</a></li>
-                    <li><a href="Beginner-Example-03.htm">3. DC Objects (Converting Elements)</a></li>
-                    <li><a href="Beginner-Example-04.htm">4. Date Picker (Using Modules)</a></li>
-                    <li><a href="Beginner-Example-05.htm" aria-current="page">5. Menu Module (Dynamic Loading)</a></li>
-                    <li><a href="Beginner-Conclusion.htm">Beginner Conclusion</a></li>
-                </ul>
-            </nav>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>Example 5 &mdash; Menu Module (Dynamic Loading)</strong></h1>
-
-                <div class="section--instructions">
-
-                    <section class="preamble">
-                        <p> In contrast to standard loading, 4X includes the ability to automatically load modules, including all shared module dependencies without requiring any additional script tags. </p>
-                        <p>The value of importing modules dynamically is that there is no need to hardcode script tags within each webpage. Instead, the requisit modules are loaded dynamically as-needed, which is faster and more responsive when running complex web apps.</p>
-                        <p>Dynamic modularization also includes:</p>
-                        <ul>
-                            <li>On-demand imports, even within if/else statements.</li>
-                            <li>Internal caching for shared modules, increasing speed.</li>
-                            <li>Automatic queuing for sequential imports, ensuring correct load order.</li>
-                            <li>Shared props between modules within the same import scope, allowing variables to be passed between external modules.</li>
-                            <li>Optional deferment, ensuring that callbacks execute after the page finishes loading.</li>
-                        </ul>
-                    </section>
-
-                    <section>
-                        <h2>Example 5 &mdash; Coding Sandbox</h2>
-                        <p>
-                            Using dynamic loading to import the Animate and Menu modules into 4X.
-                        </p>
-
-                        <div>
-
-                            <textarea title="Example 5 markup" id="example5.1">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+        <nav aria-label="main" class="navigation--parent">
+          <ul>
+            <li><a href="../Templates/index.htm">Widget Templates</a></li>
+          </ul>
+
+          <h2 class="parent--page">Steps</h2>
+          <ul>
+            <li><a href="Beginner-Introduction.htm">Introduction</a></li>
+            <li>
+              <a href="Beginner-Example-01.htm"
+                >1. Form Rendering (Using Core Functions)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-02.htm"
+                >2. ARIA Button Rendering (Using Core Functions)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-03.htm"
+                >3. DC Objects (Converting Elements)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-04.htm"
+                >4. Date Picker (Using Modules)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-05.htm" aria-current="page"
+                >5. Menu Module (Dynamic Loading)</a
+              >
+            </li>
+            <li><a href="Beginner-Conclusion.htm">Beginner Conclusion</a></li>
+          </ul>
+        </nav>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1>
+            <strong>Example 5 &mdash; Menu Module (Dynamic Loading)</strong>
+          </h1>
+
+          <div class="section--instructions">
+            <section class="preamble">
+              <p>
+                In contrast to standard loading, 4X includes the ability to
+                automatically load modules, including all shared module
+                dependencies without requiring any additional script tags.
+              </p>
+              <p>
+                The value of importing modules dynamically is that there is no
+                need to hardcode script tags within each webpage. Instead, the
+                requisit modules are loaded dynamically as-needed, which is
+                faster and more responsive when running complex web apps.
+              </p>
+              <p>Dynamic modularization also includes:</p>
+              <ul>
+                <li>On-demand imports, even within if/else statements.</li>
+                <li>Internal caching for shared modules, increasing speed.</li>
+                <li>
+                  Automatic queuing for sequential imports, ensuring correct
+                  load order.
+                </li>
+                <li>
+                  Shared props between modules within the same import scope,
+                  allowing variables to be passed between external modules.
+                </li>
+                <li>
+                  Optional deferment, ensuring that callbacks execute after the
+                  page finishes loading.
+                </li>
+              </ul>
+            </section>
+
+            <section>
+              <h2>Example 5 &mdash; Coding Sandbox</h2>
+              <p>
+                Using dynamic loading to import the Animate and Menu modules
+                into 4X.
+              </p>
+
+              <div>
+                <textarea title="Example 5 markup" id="example5.1">
                                   <button data-menu="settings-menu" class="aria-menu" id="menuButtonId">Settings</button>
                                   
                                   <ul hidden class="top menu" id="settings-menu">
@@ -169,13 +227,12 @@ <h2>Example 5 &mdash; Coding Sandbox</h2>
                                     </li>
                                     <li><a href="https://google.com/" class="link" id="help">Help...</a></li>
                                   </ul>
-                                  </textarea>
-
-                        </div>
+                                  </textarea
+                >
+              </div>
 
-                        <div>
-
-                            <textarea title="Example 5 JS" id="example5.2">
+              <div>
+                <textarea title="Example 5 JS" id="example5.2">
                                   // Use the import function to load the Animate and Menu modules and execute a callback.
                                   // Help/$A API/Import and Fetch APIs/Import
                                   
@@ -190,7 +247,7 @@ <h2>Example 5 &mdash; Coding Sandbox</h2>
                                   
                                   // Create a menu that includes animation effects.
                                   // Help/VelocityUI-Effects-Index
-                                  // Help/Module Imports/Dynamic Components/Menu
+                                  // Help/Module Imports/Widgets/Menu
                                   
                                   var menu = $A.setMenu("#menuButtonId", {
                                   
@@ -230,105 +287,142 @@ <h2>Example 5 &mdash; Coding Sandbox</h2>
                                   });
                                   
                                   });
-                                  </textarea>
-
-                        </div>
-
-                        <div>
-                            <button class="example5 btn--example">Render Example 5</button>
-                            <div role="region" aria-label="Rendered Markup" id="example5"></div>
-                            <script>
-                                (function() {
-                                    var markup = $A.get("example5.1"),
-                                        js = $A.get("example5.2"),
-                                        div = $A.get("example5");
-                                    $A.on("button.example5", "click", function(ev) {
-                                        try {
-                                            div.innerHTML = markup.value;
-                                            var f = new Function("window,document,$A", js.value);
-                                            f.call(window, window, document, $A);
-                                            $A.beep();
-                                        } catch (e) {
-                                            throw e;
-                                        }
-                                    });
-                                })();
-                            </script>
-                        </div>
-
-                        <nav aria-label="pagination" class="pagination">
-                            <div class="flex-container-row">
-                                <div class="flex-item"><a href="Beginner-Example-04.htm">&lt;&lt; Previous example</a></div>
-                                <div class="flex-item"><a href="Beginner-Conclusion.htm">Next example &gt;&gt;</a></div>
-                            </div>
-                        </nav>
-
+                                  </textarea
+                >
+              </div>
+
+              <div>
+                <button class="example5 btn--example">Render Example 5</button>
+                <div
+                  role="region"
+                  aria-label="Rendered Markup"
+                  id="example5"
+                ></div>
+                <script>
+                  (function () {
+                    var markup = $A.get("example5.1"),
+                      js = $A.get("example5.2"),
+                      div = $A.get("example5");
+                    $A.on("button.example5", "click", function (ev) {
+                      try {
+                        div.innerHTML = markup.value;
+                        var f = new Function("window,document,$A", js.value);
+                        f.call(window, window, document, $A);
+                        $A.beep();
+                      } catch (e) {
+                        throw e;
+                      }
+                    });
+                  })();
+                </script>
+              </div>
+            </section>
+
+            <nav aria-label="pagination" class="pagination">
+              <div class="flex-container-row">
+                <div class="flex-item">
+                  <a href="Beginner-Example-04.htm"
+                    >&lt;&lt; Previous example</a
+                  >
                 </div>
-
-        </div>
-
+                <div class="flex-item">
+                  <a href="Beginner-Conclusion.htm">Next example &gt;&gt;</a>
+                </div>
+              </div>
+            </nav>
+          </div>
         </main>
-    </div>
-    <footer class="footer">
+      </div>
+      <footer class="footer">
         <div class="flex-container-row">
-            <div class="flex-item">
-                <h2>License</h2>
-                <p>
-                    Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                </p>
-            </div>
-            <div class="flex-item">
-                <h2>Resources</h2>
-                <ul>
-                    <li>
-                        <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                    </li>
-                </ul>
-            </div>
-            <div class="flex-item">
-                <h2>Acknowledgements</h2>
-                <ul class="list--horizontal">
-                    <li>
-                        Author and developer:
-                        <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                    </li>
-                    <li>
-                        Website designer:
-                        <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                    </li>
-                    <li>
-                        Style and markup editor:
-                        <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                    </li>
-                </ul>
-            </div>
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-    </footer>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
-<script src="../Templates/_common/_doc_files/autosize.js"></script>
-<script>
+  </body>
+
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+  <script src="../Templates/_common/_doc_files/autosize.js"></script>
+  <script>
     autosize($A.query("textarea"));
-</script>
-
-</html>
\ No newline at end of file
+  </script>
+</html>
diff --git a/Tutorials/Beginner-Introduction.htm b/Tutorials/Beginner-Introduction.htm
index f014aac3..9c33589a 100644
--- a/Tutorials/Beginner-Introduction.htm
+++ b/Tutorials/Beginner-Introduction.htm
@@ -1,222 +1,322 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Apex 4X | Beginner Tutorial Introduction</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/css/global.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/css/components-style.css">
-    <link rel="stylesheet" type="text/css" href="../Templates/_common/_doc_files/prism.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/css/global.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/css/components-style.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../Templates/_common/_doc_files/prism.css"
+    />
     <script src="../Templates/_common/_doc_files/prism.js"></script>
     <style type="text/css">
-        .conclusion {
-            padding-top: 1em;
-        }
-
-        /*removing some of the Prism spacing as there is way tooo much padding amd margin space*/
-        .prism--restyling {
-            display: flex;
-        }
-
-        .prism--restyling>pre[class*="language-"] {
-            padding: 0 1em 1.5em 1em;
-        }
-
-        code[class*="language-"],
-        pre[class*="language-"] {
-            white-space: pre-line;
-        }
-
-        .prism--restyling>pre[class*="language-"] .token.punctuation {
-            opacity: 1;
-        }
-
-        p.prism--before {
-            margin-bottom: 0;
-        }
-
-        nav>ul>li>a[aria-current="page"] {
-            border-top: 2px solid var(--navLinkBackground);
-        }
-
-        .pagination .flex-container-row {
-            display: flex;
-            flex-flow: row wrap;
-            justify-content: center;
-            margin: auto;
-            padding: 1em;
-        }
-
+      .conclusion {
+        padding-top: 1em;
+      }
+
+      /*removing some of the Prism spacing as there is way tooo much padding amd margin space*/
+      .prism--restyling {
+        display: flex;
+      }
+
+      .prism--restyling > pre[class*="language-"] {
+        padding: 0 1em 1.5em 1em;
+      }
+
+      code[class*="language-"],
+      pre[class*="language-"] {
+        white-space: pre-line;
+      }
+
+      .prism--restyling > pre[class*="language-"] .token.punctuation {
+        opacity: 1;
+      }
+
+      p.prism--before {
+        margin-bottom: 0;
+      }
+
+      nav > ul > li > a[aria-current="page"] {
+        border-top: 2px solid var(--navLinkBackground);
+      }
+
+      .pagination .flex-container-row {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        margin: auto;
+        padding: 1em;
+      }
+
+      .pagination .flex-container-row .flex-item {
+        flex: 1 0 100%;
+      }
+
+      .pagination .flex-container-row .flex-item:nth-child(2) {
+        text-align: right;
+      }
+
+      @media (min-width: 70em) {
         .pagination .flex-container-row .flex-item {
-            flex: 1 0 100%;
+          flex: 1 0 0;
+          text-align: left;
         }
 
         .pagination .flex-container-row .flex-item:nth-child(2) {
-            text-align: right;
-        }
-
-        @media (min-width: 70em) {
-            .pagination .flex-container-row .flex-item {
-                flex: 1 0 0;
-                text-align: left;
-            }
-
-            .pagination .flex-container-row .flex-item:nth-child(2) {
-                text-align: right;
-            }
+          text-align: right;
         }
+      }
     </style>
+  </head>
 
-</head>
-
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="https://whatsock.com">
-                    <img alt="WhatSock : Changing the world one step at a time" src="../Templates/_common/_doc_files/img/whatsock.svg">
-                </a>
-            </div>
-            <nav aria-label="main" class="navigation--parent">
-
-                <ul>
-                    <li><a href="../Templates/index.htm">Widget Templates</a></li>
-                </ul>
-
-                <h2 class="parent--page">Steps</h2>
-                <ul>
-                    <li><a href="Beginner-Introduction.htm" aria-current="page">Introduction</a></li>
-                    <li><a href="Beginner-Example-01.htm">1. Form Rendering (Using Core Functions)</a></li>
-                    <li><a href="Beginner-Example-02.htm">2. ARIA Button Rendering (Using Core Functions)</a></li>
-                    <li><a href="Beginner-Example-03.htm">3. DC Objects (Converting Elements)</a></li>
-                    <li><a href="Beginner-Example-04.htm">4. Date Picker (Using Modules)</a></li>
-                    <li><a href="Beginner-Example-05.htm">5. Menu Module (Dynamic Loading)</a></li>
-                    <li><a href="Beginner-Conclusion.htm">Beginner Conclusion</a></li>
-                </ul>
-            </nav>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>Beginner Tutorial &mdash; Introduction</strong></h1>
-
-                <section class="section--instructions">
-
-                    <h2>4X</h2>
-
-                    <p class="prism--before">
-                        4X is a rendering API that includes a collection of powerful ARIA-related functions for building feature-rich internet applications that ensure accessibility for people with disabilities.
-                    </p>
-
-                    <p>How to load:</p>
-
-                    <div class="prism--restyling">
-
-                        <pre><code class="language-markup">
+      <header class="header">
+        <div class="logo">
+          <a href="https://whatsock.com">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="../Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+        <nav aria-label="main" class="navigation--parent">
+          <ul>
+            <li><a href="../Templates/index.htm">Widget Templates</a></li>
+          </ul>
+
+          <h2 class="parent--page">Steps</h2>
+          <ul>
+            <li>
+              <a href="Beginner-Introduction.htm" aria-current="page"
+                >Introduction</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-01.htm"
+                >1. Form Rendering (Using Core Functions)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-02.htm"
+                >2. ARIA Button Rendering (Using Core Functions)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-03.htm"
+                >3. DC Objects (Converting Elements)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-04.htm"
+                >4. Date Picker (Using Modules)</a
+              >
+            </li>
+            <li>
+              <a href="Beginner-Example-05.htm"
+                >5. Menu Module (Dynamic Loading)</a
+              >
+            </li>
+            <li><a href="Beginner-Conclusion.htm">Beginner Conclusion</a></li>
+          </ul>
+        </nav>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>Beginner Tutorial &mdash; Introduction</strong></h1>
+
+          <section class="section--instructions">
+            <h2>4X</h2>
+
+            <p class="prism--before">
+              4X is a rendering API that includes a collection of powerful
+              ARIA-related functions for building feature-rich internet
+              applications that ensure accessibility for people with
+              disabilities.
+            </p>
+
+            <p>How to load:</p>
+
+            <div class="prism--restyling">
+              <pre><code class="language-markup">
                             &lt;script src="4X/4X.js">&lt;/script>
                         </code></pre>
+            </div>
 
-                    </div>
-
-
-                    <p>
-                        Once loaded, all the properties and methods documented within the following Help subfolders at the root of this project are available for immediate use:
-                    </p>
-
-                    <ul>
-                        <li>Help/$A API</li>
-                        <li>Help/ARIA Development</li>
-                        <li>Help/DC API</li>
-                    </ul>
-
-                    <p>
-                        If you haven't done so already, you should
-                        <a class="templatesLink" target="_blank" href="https://github.com/whatsock/apex">download Apex 4X</a>.
-                        This will allow you to follow along with the referenced help documents that are included within the tutorial.</p>
-
-                    <h3 id="WS">Local Webserver</h3>
-
-                    <p>If you don't already have a local webserver up and running, it is important to do so before continuing with this tutorial. This will ensure that all of the examples run correctly within the practice sessions.</p>
-
-                    <p>You can check this by looking at the address bar. If you see "file://" at the beginning, then you are not running a local webserver. You should see "localhost" at the beginning instead.</p>
-
-                    <p>To install and run a local webserver, simply do the following.</p>
-
-                    <ol>
-                        <li><a href="https://nodejs.org/en/download/" target="_blank">Install NodeJS.</a></li>
-                        <li>Run the script file "WebserverInstall.sh" from the project root: Installs a local webserver. (Need only be done once.)</li>
-                        <li>Run the script file "WebserverRun.sh" from the project root: Starts the local webserver.</li>
-                        <li>After this is done, return to this page and <a href="/Tutorials/Beginner-Introduction.htm#next">click here to refresh the page using the local webserver before continuing</a>.</li>
-                    </ol>
-
-                    <nav aria-label="pagination" class="pagination">
-                        <div class="flex-container-row">
-                            <div class="flex-item"></div>
-                            <div class="flex-item"><a href="Beginner-Example-01.htm" id="next">Next example &gt;&gt;</a></div>
-                        </div>
-                    </nav>
-
-                </section>
-
-        </div>
-
+            <p>
+              Once loaded, all the properties and methods documented within the
+              following Help subfolders at the root of this project are
+              available for immediate use:
+            </p>
+
+            <ul>
+              <li>Help/$A API</li>
+              <li>Help/ARIA Development</li>
+              <li>Help/DC API</li>
+            </ul>
+
+            <p>
+              If you haven't done so already, you should
+              <a
+                class="templatesLink"
+                target="_blank"
+                href="https://github.com/whatsock/apex"
+                >download Apex 4X</a
+              >. This will allow you to follow along with the referenced help
+              documents that are included within the tutorial.
+            </p>
+
+            <h3 id="WS">Local Webserver</h3>
+
+            <p>
+              If you don't already have a local webserver up and running, it is
+              important to do so before continuing with this tutorial. This will
+              ensure that all of the examples run correctly within the practice
+              sessions.
+            </p>
+
+            <p>
+              You can check this by looking at the address bar. If you see
+              "file://" at the beginning, then you are not running a local
+              webserver. You should see "localhost" at the beginning instead.
+            </p>
+
+            <p>
+              To install and run a local webserver, simply do the following.
+            </p>
+
+            <ol>
+              <li>
+                <a href="https://nodejs.org/en/download/" target="_blank"
+                  >Install NodeJS.</a
+                >
+              </li>
+              <li>
+                Run the script file "WebserverInstall.sh" from the project root:
+                Installs a local webserver. (Need only be done once.)
+              </li>
+              <li>
+                Run the script file "WebserverRun.sh" from the project root:
+                Starts the local webserver.
+              </li>
+              <li>
+                After this is done, return to this page and
+                <a href="/Tutorials/Beginner-Introduction.htm#next"
+                  >click here to refresh the page using the local webserver
+                  before continuing</a
+                >.
+              </li>
+            </ol>
+          </section>
+
+          <nav aria-label="pagination" class="pagination">
+            <div class="flex-container-row">
+              <div class="flex-item"></div>
+              <div class="flex-item">
+                <a href="Beginner-Example-01.htm" id="next"
+                  >Next example &gt;&gt;</a
+                >
+              </div>
+            </div>
+          </nav>
         </main>
-    </div>
-    <footer class="footer">
+      </div>
+      <footer class="footer">
         <div class="flex-container-row">
-            <div class="flex-item">
-                <h2>License</h2>
-                <p>
-                    Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                </p>
-            </div>
-            <div class="flex-item">
-                <h2>Resources</h2>
-                <ul>
-                    <li>
-                        <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                    </li>
-                    <li>
-                        <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                    </li>
-                </ul>
-            </div>
-            <div class="flex-item">
-                <h2>Acknowledgements</h2>
-                <ul class="list--horizontal">
-                    <li>
-                        Author and developer:
-                        <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                    </li>
-                    <li>
-                        Website designer:
-                        <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                    </li>
-                    <li>
-                        Style and markup editor:
-                        <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                    </li>
-                </ul>
-            </div>
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-    </footer>
+      </footer>
     </div>
-</body>
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=template"></script>
-
-</html>
\ No newline at end of file
+  </body>
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=template"
+  ></script>
+</html>
diff --git a/WhatSock/index.htm b/WhatSock/index.htm
index 11864523..fbd89253 100644
--- a/WhatSock/index.htm
+++ b/WhatSock/index.htm
@@ -1,118 +1,246 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
+  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Apex 4X</title>
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-    <meta name="description" content="Apex 4X is a comprehensive ARIA development suite for advanced web development." />
-    <meta name="keywords" content="ARIA, wai-aria, w3c, interface designs, user interface automation, internet application design, user interface components, application user interface design, dynamic content management, interface designers, rich interface application, dynamic content management system, interface designing, rich internet app, rich internet apps, user interface design web, application ui, ria development, rich internet application design, ui web design, web design user interface, ui interface design, ui designing, automation ui, accessible rich internet applications, rich user interface design" />
+    <meta
+      name="description"
+      content="Apex 4X is a comprehensive ARIA development suite for advanced web development."
+    />
+    <meta
+      name="keywords"
+      content="ARIA, wai-aria, w3c, interface designs, user interface automation, internet application design, user interface components, application user interface design, dynamic content management, interface designers, rich interface application, dynamic content management system, interface designing, rich internet app, rich internet apps, user interface design web, application ui, ria development, rich internet application design, ui web design, web design user interface, ui interface design, ui designing, automation ui, accessible rich internet applications, rich user interface design"
+    />
     <meta name="Author" content="Bryan Garaventa" />
     <link rel="stylesheet" type="text/css" href="css/global.css" />
-</head>
-
-<body>
-
+  </head>
 
+  <body>
     <div id="container">
-
-        <header>
-            <h1><strong>Apex 4X</strong></h1>
-            <p class="logo"><img alt="WhatSock : Changing the world one step at a time" src="/Templates/_common/img/whatsock.svg" /></p>
-
-            <nav>
-                <ul class="menuList">
-                    <li><a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a></li>
-                    <li><a href="https://github.com/whatsock/apex">Download Apex 4X</a></li>
-                    <li><a href="https://whatsock.com/Templates">Widget Templates</a></li>
-                    <li><a href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA for Web</a></li>
-                    <li><a href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk?hl=en-GB">Visual ARIA for Chrome</a></li>
-                    <li><a href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA for Firefox</a></li>
-                    <li><a href="https://whatsock.com/training/matrices">ARIA Role Matrices</a></li>
-                    <li><a href="https://whatsock.com/training">Accessibility Tree Guide</a></li>
-                </ul>
-            </nav>
-        </header>
-
-        <div id="wrapper">
-
-            <div id="mContent">
-                <div id="mcOverview">
-                    <main>
-                        <article>
-                            <h2>Overview</h2>
-                            <div class="intro content">
-
-                                <p>Apex 4X is a comprehensive ARIA development suite, including a core collection of powerful ARIA development utilities and functions, plus a full index of scalable ARIA design pattern templates. It also includes two APIs that are specifically designed to enhance and facilitate advanced ARIA development.</p>
-
-                                <p>ARIA stands for Accessible Rich Internet Applications, and is a technical specification published by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI). The purpose, to map simulated web controls to equivalent control types on the platform Accessibility API, and to provide various mechanisms to enhance the accessibility of web technologies for people with disabilities.</p>
-
-                                <p>Apex 4X provides a comprehensive suite of ARIA related processes to make developing accessible technologies easier and more reliable and does not expose the accessibility layer where it can be casually changed by those who do not understand it. This makes it possible for developers who have no prior background in accessible development, to create and implement accessible web technologies for people with disabilities regardless.</p>
-
-                                <p>The $A API provides all core functionality, including dynamic modularization for swappable components, advanced ARIA development features and processes, data management, DOM related methods and processes, dynamic import methods, visual effect methods for content display and animation, and chaining.</p>
-
-                                <p>The DC (Dynamic Component) API provides direct access to individually configurable components and widgets. Each DC instance includes the ability to control dynamic behaviors, manage content and events, utilize lifecycle methods, pass custom props between other DC instances and external resources, control rendering processes, plus manage visual effects and animation.</p>
-
-                                <p>To learn more, view the <a href="/Tutorials/Beginner-Introduction.htm">Beginner Tutorial</a>.</p>
-
-                                <h3>Accessible Widget Templates</h3>
-
-                                <p>All of the following ARIA widget templates are available for immediate use. None of them require any prior knowledge of ARIA to implement.</p>
-
-                                <nav>
-                                    <ul class="templates-list">
-                                        <li><a href="/Templates/Accordions/index.htm">Accordions</a></li>
-                                        <li><a href="/Templates/Buttons/index.htm">Buttons</a></li>
-                                        <li><a href="/Templates/Carousels/index.htm">Carousels</a></li>
-                                        <li><a href="/Templates/Checkboxes/index.htm">Checkboxes</a></li>
-                                        <li><a href="/Templates/Comboboxes/index.htm">Comboboxes</a></li>
-                                        <li><a href="/Templates/Datepickers/index.htm">Datepickers</a></li>
-                                        <li><a href="/Templates/Dialogs/index.htm">Dialogs</a></li>
-                                        <li><a href="/Templates/Drag/index.htm">Drag and Drop</a></li>
-                                        <li><a href="/Templates/Footnotes/index.htm">Footnotes</a></li>
-                                        <li><a href="/Templates/Grids/index.htm">Grids</a></li>
-                                        <li><a href="/Templates/Listboxes/index.htm">Listboxes</a></li>
-                                        <li><a href="/Templates/Menus/index.htm">Menus</a></li>
-                                        <li><a href="/Templates/Popups/index.htm">Popups</a></li>
-                                        <li><a href="/Templates/Radios/index.htm">Radios</a></li>
-                                        <li><a href="/Templates/Sliders/index.htm">Sliders</a></li>
-                                        <li><a href="/Templates/Switches/index.htm">Switches</a></li>
-                                        <li><a href="/Templates/Tabs/index.htm">Tabs</a></li>
-                                        <li><a href="/Templates/Tooltips/index.htm">Tooltips</a></li>
-                                        <li><a href="/Templates/Trees/index.htm">Trees</a></li>
-                                    </ul>
-                                </nav>
-
-                                <h3>Download</h3>
-
-                                <p>Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.</p>
-
-                                <p><a href="https://github.com/whatsock/apex">Download Apex 4X from GitHub.</a></p>
-                            </div>
-                        </article>
-                    </main>
-
-                    <aside>
-                        <section class="honors">
-                            <a href="https://www.thersa.org/" target="_blank">
-                                <img src="img/rsa_fellowship_logo.jpg" alt="Supported by the Royal Society of Arts" title="Supported by the Royal Society of Arts" /></a>
-                        </section>
-                    </aside>
-
+      <header>
+        <h1><strong>Apex 4X</strong></h1>
+        <p class="logo">
+          <img
+            alt="WhatSock : Changing the world one step at a time"
+            src="/Templates/_common/img/whatsock.svg"
+          />
+        </p>
+
+        <nav>
+          <ul class="menuList">
+            <li>
+              <a href="/Tutorials/Beginner-Introduction.htm"
+                >Beginner Tutorial</a
+              >
+            </li>
+            <li>
+              <a href="https://github.com/whatsock/apex">Download Apex 4X</a>
+            </li>
+            <li>
+              <a href="https://whatsock.com/Templates">Widget Templates</a>
+            </li>
+            <li>
+              <a
+                href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                >Visual ARIA for Web</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk?hl=en-GB"
+                >Visual ARIA for Chrome</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                >Visual ARIA for Firefox</a
+              >
+            </li>
+            <li>
+              <a href="https://whatsock.com/training/matrices"
+                >ARIA Role Matrices</a
+              >
+            </li>
+            <li>
+              <a href="https://whatsock.com/training"
+                >Accessibility Tree Guide</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </header>
+
+      <div id="wrapper">
+        <div id="mContent">
+          <div id="mcOverview">
+            <main>
+              <article>
+                <h2>Overview</h2>
+                <div class="intro content">
+                  <p>
+                    Apex 4X is a comprehensive ARIA development suite, including
+                    a core collection of powerful ARIA development utilities and
+                    functions, plus a full index of scalable ARIA design pattern
+                    templates. It also includes two APIs that are specifically
+                    designed to enhance and facilitate advanced ARIA
+                    development.
+                  </p>
+
+                  <p>
+                    ARIA stands for Accessible Rich Internet Applications, and
+                    is a technical specification published by the World Wide Web
+                    Consortium (W3C) Web Accessibility Initiative (WAI). The
+                    purpose, to map simulated web controls to equivalent control
+                    types on the platform Accessibility API, and to provide
+                    various mechanisms to enhance the accessibility of web
+                    technologies for people with disabilities.
+                  </p>
+
+                  <p>
+                    Apex 4X provides a comprehensive suite of ARIA related
+                    processes to make developing accessible technologies easier
+                    and more reliable and does not expose the accessibility
+                    layer where it can be casually changed by those who do not
+                    understand it. This makes it possible for developers who
+                    have no prior background in accessible development, to
+                    create and implement accessible web technologies for people
+                    with disabilities regardless.
+                  </p>
+
+                  <p>
+                    The $A API provides all core functionality, including
+                    dynamic modularization for swappable components, advanced
+                    ARIA development features and processes, data management,
+                    DOM related methods and processes, dynamic import methods,
+                    visual effect methods for content display and animation, and
+                    chaining.
+                  </p>
+
+                  <p>
+                    The DC (Dynamic Component) API provides direct access to
+                    individually configurable components and widgets. Each DC
+                    instance includes the ability to control dynamic behaviors,
+                    manage content and events, utilize lifecycle methods, pass
+                    custom props between other DC instances and external
+                    resources, control rendering processes, plus manage visual
+                    effects and animation.
+                  </p>
+
+                  <p>
+                    To learn more, view the
+                    <a href="/Tutorials/Beginner-Introduction.htm"
+                      >Beginner Tutorial</a
+                    >.
+                  </p>
+
+                  <h3>Accessible Widget Templates</h3>
+
+                  <p>
+                    All of the following ARIA widget templates are available for
+                    immediate use. None of them require any prior knowledge of
+                    ARIA to implement.
+                  </p>
+
+                  <nav>
+                    <ul class="templates-list">
+                      <li>
+                        <a href="/Templates/Accordions/index.htm">Accordions</a>
+                      </li>
+                      <li>
+                        <a href="/Templates/Buttons/index.htm">Buttons</a>
+                      </li>
+                      <li>
+                        <a href="/Templates/Carousels/index.htm">Carousels</a>
+                      </li>
+                      <li>
+                        <a href="/Templates/Checkboxes/index.htm">Checkboxes</a>
+                      </li>
+                      <li>
+                        <a href="/Templates/Comboboxes/index.htm">Comboboxes</a>
+                      </li>
+                      <li>
+                        <a href="/Templates/Datepickers/index.htm"
+                          >Datepickers</a
+                        >
+                      </li>
+                      <li>
+                        <a href="/Templates/Dialogs/index.htm">Dialogs</a>
+                      </li>
+                      <li>
+                        <a href="/Templates/Drag/index.htm">Drag and Drop</a>
+                      </li>
+                      <li>
+                        <a href="/Templates/Footnotes/index.htm">Footnotes</a>
+                      </li>
+                      <li><a href="/Templates/Grids/index.htm">Grids</a></li>
+                      <li>
+                        <a href="/Templates/Listboxes/index.htm">Listboxes</a>
+                      </li>
+                      <li><a href="/Templates/Menus/index.htm">Menus</a></li>
+                      <li><a href="/Templates/Popups/index.htm">Popups</a></li>
+                      <li><a href="/Templates/Radios/index.htm">Radios</a></li>
+                      <li>
+                        <a href="/Templates/Sliders/index.htm">Sliders</a>
+                      </li>
+                      <li>
+                        <a href="/Templates/Switches/index.htm">Switches</a>
+                      </li>
+                      <li><a href="/Templates/Tabs/index.htm">Tabs</a></li>
+                      <li>
+                        <a href="/Templates/Tooltips/index.htm">Tooltips</a>
+                      </li>
+                      <li><a href="/Templates/Trees/index.htm">Trees</a></li>
+                    </ul>
+                  </nav>
+
+                  <h3>Download</h3>
+
+                  <p>
+                    Apex 4X including all template design patterns is
+                    distributed under the terms of the Open Source Initiative
+                    OSI - MIT License, and may be freely used for any purpose
+                    within any web technology.
+                  </p>
+
+                  <p>
+                    <a href="https://github.com/whatsock/apex"
+                      >Download Apex 4X from GitHub.</a
+                    >
+                  </p>
                 </div>
-            </div>
+              </article>
+            </main>
+
+            <aside>
+              <section class="honors">
+                <a href="https://www.thersa.org/" target="_blank">
+                  <img
+                    src="img/rsa_fellowship_logo.jpg"
+                    alt="Supported by the Royal Society of Arts"
+                    title="Supported by the Royal Society of Arts"
+                /></a>
+              </section>
+            </aside>
+          </div>
         </div>
-
-        <footer>
-            <p class="copyright">Website &copy;<script>
-                    document.write(new Date().getFullYear());
-                </script> WhatSock.com. All rights reserved.</p>
-        </footer>
-
-
+      </div>
+
+      <footer>
+        <p class="copyright">
+          Website &copy;
+          <script>
+            document.write(new Date().getFullYear());
+          </script>
+          WhatSock.com. All rights reserved.
+        </p>
+      </footer>
     </div>
-</body>
-
-<script async src="https://api.whatsock.com/accdc-updates.js?4x=home"></script>
+  </body>
 
-</html>
\ No newline at end of file
+  <script
+    async
+    src="https://api.whatsock.com/accdc-updates.js?4x=home"
+  ></script>
+</html>
diff --git a/index.htm b/index.htm
index 7d6dc304..43afde5b 100644
--- a/index.htm
+++ b/index.htm
@@ -1,75 +1,96 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Apex 4X Technical Style Guide</title>
-    <meta name="description" content="Scalable ARIA Components">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="Templates/_common/_doc_files/css/global.css">
+    <meta name="description" content="Scalable ARIA Components" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="Templates/_common/_doc_files/css/global.css"
+    />
 
     <style type="text/css">
-        h2.heading--onblack {
-            color: #ffcc00;
-            font-family: Frutiger, Helvetica, Arial, sans-serif;
-            font-size: 1.8rem;
-            font-weight: 700;
-            line-height: 1.2;
-            margin-bottom: 1.2em;
-            margin-top: 1.2em;
-        }
+      h2.heading--onblack {
+        color: #ffcc00;
+        font-family: Frutiger, Helvetica, Arial, sans-serif;
+        font-size: 1.8rem;
+        font-weight: 700;
+        line-height: 1.2;
+        margin-bottom: 1.2em;
+        margin-top: 1.2em;
+      }
 
-        a.templatesLink {
-            padding: 5px;
-            font-size: 1.3em;
-            color: #fff;
-        }
+      a.templatesLink {
+        padding: 5px;
+        font-size: 1.3em;
+        color: #fff;
+      }
 
-        a.templatesLink:focus,
-        a.templatesLink:hover {
-            text-decoration: none;
-        }
+      a.templatesLink:focus,
+      a.templatesLink:hover {
+        text-decoration: none;
+      }
 
-        div.tooltip {
-            position: absolute;
-            width: auto;
-            color: var(--globalWhite);
-            background: var(--whatsock-black);
-            padding: 0.3em 0.5em;
-            -webkit-box-shadow: 0 1px 1px #afafaf, inset 0 1px 0 var(--tooltip-boxshadow);
-            -moz-box-shadow: 0 1px 1px #afafaf, inset 0 1px 0 var(--tooltip-boxshadow);
-            box-shadow: 0 1px 1px #afafaf, inset 0 1px 0 var(--tooltip-boxshadow);
-            z-index: 100;
-        }
+      div.tooltip {
+        position: absolute;
+        width: auto;
+        color: var(--globalWhite);
+        background: var(--whatsock-black);
+        padding: 0.3em 0.5em;
+        -webkit-box-shadow:
+          0 1px 1px #afafaf,
+          inset 0 1px 0 var(--tooltip-boxshadow);
+        -moz-box-shadow:
+          0 1px 1px #afafaf,
+          inset 0 1px 0 var(--tooltip-boxshadow);
+        box-shadow:
+          0 1px 1px #afafaf,
+          inset 0 1px 0 var(--tooltip-boxshadow);
+        z-index: 100;
+      }
     </style>
+  </head>
 
-</head>
-
-<body>
+  <body>
     <div class="outer-wrapper">
-        <header class="header">
-            <div class="logo">
-                <a href="WhatSock/index.htm">
-                    <img alt="WhatSock : Changing the world one step at a time" src="Templates/_common/_doc_files/img/whatsock.svg" />
-                </a>
-            </div>
-        </header>
-        <div class="wrapper">
-            <main id="main" class="main">
-                <h1><strong>Apex 4X</strong></h1>
-<h2 class="heading--onblack">Version: <strong id="version"></strong></h2>
-                <nav class="navigation--parent">
-                    <ul>
-                        <li><a href="Tutorials/Beginner-Introduction.htm">Start Beginner Tutorial</a></li>
-                        <li><a id="templatesLink" href="Templates/index.htm">Browse Accessible Widget Templates</a></li>
-                    </ul>
-                </nav>
-                <h2 class="heading--onblack">Test 4X</h2>
-                <div>
-                    <button class="testBtn">Test Script</button>
-                </div>
-                <div>
-                    <textarea style="min-width: 90%;" id="testScript">
+      <header class="header">
+        <div class="logo">
+          <a href="WhatSock/index.htm">
+            <img
+              alt="WhatSock : Changing the world one step at a time"
+              src="Templates/_common/_doc_files/img/whatsock.svg"
+            />
+          </a>
+        </div>
+      </header>
+      <div class="wrapper">
+        <main id="main" class="main">
+          <h1><strong>Apex 4X</strong></h1>
+          <h2 class="heading--onblack">
+            Version: <strong id="version"></strong>
+          </h2>
+          <nav class="navigation--parent">
+            <ul>
+              <li>
+                <a href="Tutorials/Beginner-Introduction.htm"
+                  >Start Beginner Tutorial</a
+                >
+              </li>
+              <li>
+                <a id="templatesLink" href="Templates/index.htm"
+                  >Browse Accessible Widget Templates</a
+                >
+              </li>
+            </ul>
+          </nav>
+          <h2 class="heading--onblack">Test 4X</h2>
+          <div>
+            <button class="testBtn">Test Script</button>
+          </div>
+          <div>
+            <textarea style="min-width: 90%" id="testScript">
 // Experiment with 4X
 
 // Create a tooltip for the link "Browse Accessible Widget Templates"
@@ -103,71 +124,100 @@ <h2 class="heading--onblack">Test 4X</h2>
 });
 
 tooltip.render(); // Optionally render the tooltip manually using the DC.render method.
-</textarea>
-                </div>
-                <div>
-                    <button class="testBtn">Test Script</button>
-                </div>
-                <p class="dark--bg">
-                    All available ARIA widget templates are available for immediate use. None require any prior knowledge of ARIA to implement.
-                </p>
-            </main>
+</textarea
+            >
+          </div>
+          <div>
+            <button class="testBtn">Test Script</button>
+          </div>
+          <p class="dark--bg">
+            All available ARIA widget templates are available for immediate use.
+            None require any prior knowledge of ARIA to implement.
+          </p>
+        </main>
+      </div>
+      <footer class="footer">
+        <div class="flex-container-row">
+          <div class="flex-item">
+            <h2>License</h2>
+            <p>
+              Apex 4X including all template design patterns is distributed
+              under the terms of the Open Source Initiative OSI - MIT License,
+              and may be freely used for any purpose within any web technology.
+            </p>
+          </div>
+          <div class="flex-item">
+            <h2>Resources</h2>
+            <ul>
+              <li>
+                <a target="ext" href="https://github.com/WhatSock/apex"
+                  >Apex 4X on GitHub</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
+                  >Visual ARIA Bookmarklet</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
+                  >Visual ARIA Chrome Extension</a
+                >
+              </li>
+              <li>
+                <a
+                  target="ext"
+                  href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
+                  >Visual ARIA Firefox Extension</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://github.com/AccDC/visual-aria"
+                  >Visual ARIA on GitHub</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/matrices/"
+                  >ARIA Role Conformance Matrices</a
+                >
+              </li>
+              <li>
+                <a target="ext" href="https://whatsock.com/training/"
+                  >Accessibility Tree Training Guide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <div class="flex-item">
+            <h2>Acknowledgements</h2>
+            <ul class="list--horizontal">
+              <li>
+                Author and developer:
+                <a target="ext" href="https://www.linkedin.com/in/bgaraventa"
+                  >Bryan Garaventa</a
+                >
+              </li>
+              <li>
+                Website designer:
+                <a target="ext" href="https://gericci.me/">Angela Ricci</a>
+              </li>
+              <li>
+                Style and markup editor:
+                <a
+                  target="ext"
+                  href="https://www.linkedin.com/in/laurence-lewis-77520365/"
+                  >Laurence Lewis</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <footer class="footer">
-            <div class="flex-container-row">
-                <div class="flex-item">
-                    <h2>License</h2>
-                    <p>
-                        Apex 4X including all template design patterns is distributed under the terms of the Open Source Initiative OSI - MIT License, and may be freely used for any purpose within any web technology.
-                    </p>
-                </div>
-                <div class="flex-item">
-                    <h2>Resources</h2>
-                    <ul>
-                        <li>
-                            <a target="ext" href="https://github.com/WhatSock/apex">Apex 4X on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">Visual ARIA Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk">Visual ARIA Chrome Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/">Visual ARIA Firefox Extension</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://github.com/AccDC/visual-aria">Visual ARIA on GitHub</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/matrices/">ARIA Role Conformance Matrices</a>
-                        </li>
-                        <li>
-                            <a target="ext" href="https://whatsock.com/training/">Accessibility Tree Training Guide</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="flex-item">
-                    <h2>Acknowledgements</h2>
-                    <ul class="list--horizontal">
-                        <li>
-                            Author and developer:
-                            <a target="ext" href="https://www.linkedin.com/in/bgaraventa">Bryan Garaventa</a>
-                        </li>
-                        <li>
-                            Website designer:
-                            <a target="ext" href="https://gericci.me/">Angela Ricci</a>
-                        </li>
-                        <li>
-                            Style and markup editor:
-                            <a target="ext" href="https://www.linkedin.com/in/laurence-lewis-77520365/">Laurence Lewis</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </footer>
+      </footer>
     </div>
     <script type="module" src="/index.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
index de55c112..e10f9ced 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "apex4x",
-  "version": "2023.8.1-2.15",
+  "version": "2023.8.1-2.17",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "apex4x",
-      "version": "2023.8.1-2.15",
+      "version": "2023.8.1-2.17",
       "license": "MIT",
       "dependencies": {
         "apex4x": "^2023.8.1-2.15"
@@ -434,9 +434,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001636",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz",
-      "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==",
+      "version": "1.0.30001637",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001637.tgz",
+      "integrity": "sha512-1x0qRI1mD1o9e+7mBI7XtzFAP4XszbHaVWsMiGbSPLYekKTJF7K+FNk6AsXH4sUpc+qrsI3pVgf1Jdl/uGkuSQ==",
       "dev": true,
       "funding": [
         {
@@ -2701,9 +2701,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001636",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz",
-      "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==",
+      "version": "1.0.30001637",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001637.tgz",
+      "integrity": "sha512-1x0qRI1mD1o9e+7mBI7XtzFAP4XszbHaVWsMiGbSPLYekKTJF7K+FNk6AsXH4sUpc+qrsI3pVgf1Jdl/uGkuSQ==",
       "dev": true
     },
     "chalk": {
diff --git a/package.json b/package.json
index 90d3cf28..e774112c 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
   },
   "name": "apex4x",
   "description": "The Comprehensive ARIA Development Suite",
-  "version": "2023.8.1-2.15",
+  "version": "2023.8.1-2.17",
   "main": "./Bundle/4X.js",
   "type": "module",
   "scripts": {