diff --git a/RpiLedBars/web/README.md b/RpiLedBars/web/README.md
new file mode 100644
index 0000000..0d1c4c1
--- /dev/null
+++ b/RpiLedBars/web/README.md
@@ -0,0 +1,3 @@
+https://www.sliderrevolution.com/resources/css-range-slider/
+https://iro.js.org/guide.html
+https://javascript.info/websocket
diff --git a/RpiLedBars/web/flat_slider.css b/RpiLedBars/web/flat_slider.css
new file mode 100644
index 0000000..f5382cd
--- /dev/null
+++ b/RpiLedBars/web/flat_slider.css
@@ -0,0 +1,207 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,600);
+body {
+ background: #434d5a;
+ font-family: "Roboto";
+}
+
+h1 {
+ color: #7e8c9f;
+ padding: 0;
+ margin: 0;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: default;
+ text-align: center;
+}
+
+p {
+ color: #c7cdd5;
+ text-align: center;
+ margin: 0.5em 1em;
+ font-weight: 300;
+ font-size: 1.3em;
+}
+
+p:nth-of-type(1) {
+ margin-top: 3em;
+}
+
+p:last-child {
+ font-weight: 100;
+ font-size: 1em;
+}
+
+p:last-child a {
+ font-weight: 300;
+}
+
+.stuff {
+ padding: 50px 50px 50px;
+ max-width: 900px;
+ margin: auto;
+}
+
+
+/* #flat-slider .ui-slider-handle,
+#flat-slider .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line,
+#flat-slider .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
+#flat-slider .ui-slider-range {
+ background-color: #25daa5
+}
+
+#flat-slider-vertical-1 .ui-slider-handle,
+#flat-slider-vertical-1 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line,
+#flat-slider-vertical-1 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
+#flat-slider-vertical-1 .ui-slider-range {
+ background-color: #f27793
+}
+
+#flat-slider-vertical-2 .ui-slider-handle,
+#flat-slider-vertical-2 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line,
+#flat-slider-vertical-2 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
+#flat-slider-vertical-2 .ui-slider-range {
+ background-color: #bd77f2
+}
+
+#flat-slider-vertical-3 .ui-slider-handle,
+#flat-slider-vertical-3 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line,
+#flat-slider-vertical-3 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
+#flat-slider-vertical-3 .ui-slider-range {
+ background-color: #67c3ec
+}
+
+[id*=flat-slider].ui-slider {
+ background: #e8e2d3;
+ border: none;
+ border-radius: 0
+}
+
+[id*=flat-slider].ui-slider .ui-slider-handle {
+ width: 20px;
+ height: 20px;
+ border-radius: 50% 50% 0;
+ border-color: transparent;
+ transition: border .4s ease
+}
+
+[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-active,
+[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-focus,
+[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-hover {
+ border-color: #172f38
+}
+
+[id*=flat-slider].ui-slider .ui-slider-pip .ui-slider-line {
+ background: #e8e2d3;
+ transition: all .4s ease
+}
+
+[id*=flat-slider].ui-slider.ui-slider-horizontal {
+ height: 6px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-handle {
+ -webkit-transform: rotateZ(45deg);
+ transform: rotateZ(45deg);
+ top: -25px;
+ margin-left: -10px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip {
+ top: 10px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip .ui-slider-line {
+ width: 2px;
+ height: 10px;
+ margin-left: -1px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line {
+ height: 20px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
+ height: 12px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical {
+ width: 6px;
+ height: 125px;
+ display: inline-block;
+ margin: 0 15%
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle {
+ -webkit-transform: rotateZ(-45deg);
+ transform: rotateZ(-45deg);
+ left: -25px;
+ margin-bottom: -10px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip {
+ left: 10px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip .ui-slider-line {
+ height: 2px;
+ width: 10px;
+ margin-top: -1px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line {
+ width: 20px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
+ width: 12px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle .ui-slider-tip,
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle[class*=ui-state-] .ui-slider-tip {
+ visibility: visible;
+ opacity: 1;
+ border: none;
+ background: 0 0;
+ left: 50%;
+ width: 30px;
+ margin-left: -15px;
+ text-align: center;
+ color: #fff;
+ font-weight: 400;
+ top: 10px;
+ -webkit-transform: rotateZ(45deg);
+ transform: rotateZ(45deg)
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle .ui-slider-tip:before,
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle[class*=ui-state-] .ui-slider-tip:before {
+ display: none
+}
+
+[id*=flat-slider].ui-slider,
+[id*=flat-slider].ui-slider .ui-slider-pip .ui-slider-line {
+ background: #7e8c9f;
+}
+
+[id*=flat-slider].ui-slider .ui-slider-handle .ui-slider-tip:after {
+ border-left-color: #434d5a;
+}
+
+[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-hover,
+[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-focus,
+[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-active {
+ border-color: white;
+}
+
+.ui-widget-content .ui-slider-handle.ui-state-focus {
+ outline: 0;
+ border-color: #434d5a
+}
+
+*,
+:after,
+:before {
+ box-sizing: border-box
+} */
\ No newline at end of file
diff --git a/RpiLedBars/web/flat_slider.js b/RpiLedBars/web/flat_slider.js
new file mode 100644
index 0000000..c3cb22a
--- /dev/null
+++ b/RpiLedBars/web/flat_slider.js
@@ -0,0 +1,53 @@
+$(function() {
+ $.extend($.ui.slider.prototype.options, {
+ animate: 300
+ });
+
+ $("#flat-slider")
+ .slider({
+ max: 50,
+ min: 0,
+ range: true,
+ values: [15, 35]
+ })
+ .slider("pips", {
+ first: "pip",
+ last: "pip"
+ });
+
+ $("#flat-slider-vertical-1")
+ .slider({
+ max: 150,
+ min: 0,
+ range: "min",
+ value: 25,
+ orientation: "vertical"
+ })
+ .slider("float");
+
+ $("#flat-slider-vertical-2")
+ .slider({
+ max: 4,
+ min: 0,
+ range: "min",
+ value: 2,
+ orientation: "vertical"
+ })
+ .slider("float");
+
+ $("#flat-slider-vertical-3")
+ .slider({
+ max: 25,
+ min: 0,
+ range: "min",
+ value: 0,
+ orientation: "vertical"
+ });
+
+ $("#flat-slider-vertical-1, #flat-slider-vertical-2, #flat-slider-vertical-3")
+ .slider("pips", {
+ first: "pip",
+ last: "pip"
+ })
+ .slider("float");
+});
\ No newline at end of file
diff --git a/RpiLedBars/web/index.css b/RpiLedBars/web/index.css
new file mode 100644
index 0000000..00734a4
--- /dev/null
+++ b/RpiLedBars/web/index.css
@@ -0,0 +1,30 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,600);
+body {
+ background: #434d5a;
+ font-family: "Roboto";
+}
+
+h1 {
+ color: #7e8c9f;
+ padding: 0;
+ margin: 0;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: default;
+ text-align: center;
+}
+
+#picker {
+ display: flex;
+ justify-content: space-around;
+}
+
+.IroColorPicker {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-content: center;
+ justify-content: space-around;
+}
\ No newline at end of file
diff --git a/RpiLedBars/web/index.html b/RpiLedBars/web/index.html
new file mode 100644
index 0000000..1ea02f0
--- /dev/null
+++ b/RpiLedBars/web/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+ Config
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Tropicananass Leds
+
+
+
+
+
\ No newline at end of file
diff --git a/RpiLedBars/web/index.js b/RpiLedBars/web/index.js
new file mode 100644
index 0000000..7e83363
--- /dev/null
+++ b/RpiLedBars/web/index.js
@@ -0,0 +1,49 @@
+let socket = new WebSocket("ws://192.168.1.130:8080");
+
+socket.onopen = function(e) {
+ alert("[open] Connection established");
+};
+
+socket.onmessage = function(event) {
+ alert(`[message] Data received from server: ${event.data}`);
+};
+
+socket.onclose = function(event) {
+ if (event.wasClean) {
+ alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
+ } else {
+ // e.g. server process killed or network down
+ // event.code is usually 1006 in this case
+ alert('[close] Connection died');
+ }
+};
+
+socket.onerror = function(error) {
+ alert(`[error] ${error.message}`);
+};
+
+var colorPicker = new iro.ColorPicker('#picker', {
+ colors: [
+ 'hsl(0, 100, 50)', // pure red
+ 'hsl(180, 50, 100)' // pure green
+ ],
+ layout: [{
+ component: iro.ui.Wheel,
+ options: {}
+ }, {
+ component: iro.ui.Box,
+ options: {}
+ }],
+ display: "flex",
+ handleRadius: 14,
+});
+
+// make a handler function
+function colorChangeCallback(color) {
+ console.log("{index: " + color.index + ", h: " + color.hsl.h + ", s: " + color.hsl.s + ", l: " + color.hsl.l + "}");
+ socket.send("{" + color.index + "," + color.hsl.h + "," + color.hsl.s + "," + color.hsl.l + "}");
+}
+
+// start listening to the color change event
+// colorChangeCallback will be called whenever the color changes
+colorPicker.on("color:change", colorChangeCallback);
\ No newline at end of file
diff --git a/RpiLedBars/web/index_model.html b/RpiLedBars/web/index_model.html
new file mode 100644
index 0000000..9fe8339
--- /dev/null
+++ b/RpiLedBars/web/index_model.html
@@ -0,0 +1,38 @@
+
+
+
+
+ Config
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
HALO
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/RpiLedBars/web/iro.js b/RpiLedBars/web/iro.js
new file mode 100644
index 0000000..55e7eb4
--- /dev/null
+++ b/RpiLedBars/web/iro.js
@@ -0,0 +1,1787 @@
+/*!
+ * iro.js v5.5.2
+ * 2016-2021 James Daniel
+ * Licensed under MPL 2.0
+ * github.com/jaames/iro.js
+ */
+
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+ typeof define === 'function' && define.amd ? define(factory) :
+ (global = global || self, global.iro = factory());
+}(this, function () { 'use strict';
+
+ var n,u,t,i,r,o,f={},e=[],c=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|^--/i;function s(n,l){for(var u in l){ n[u]=l[u]; }return n}function a(n){var l=n.parentNode;l&&l.removeChild(n);}function h(n,l,u){var t,i,r,o,f=arguments;if(l=s({},l),arguments.length>3){ for(u=[u],t=3;t -1;
+ var num = parseFloat(str);
+ return isPercentage ? max / 100 * num : num;
+ }
+ /**
+ * @desc Parse hex str to an int
+ * @param str - hex string to parse
+ */
+
+
+ function parseHexInt(str) {
+ return parseInt(str, 16);
+ }
+ /**
+ * @desc Convert nunber into to 2-digit hex
+ * @param int - number to convert
+ */
+
+
+ function intToHex(_int) {
+ return _int.toString(16).padStart(2, '0');
+ }
+
+ var IroColor =
+ /*#__PURE__*/
+ function () {
+ /**
+ * @constructor Color object
+ * @param value - initial color value
+ */
+ function IroColor(value, onChange) {
+ // The default Color value
+ this.$ = {
+ h: 0,
+ s: 0,
+ v: 0,
+ a: 1
+ };
+ if (value) { this.set(value); } // The watch callback function for this Color will be stored here
+
+ this.onChange = onChange;
+ this.initialValue = _extends({}, this.$); // copy initial value
+ }
+ /**
+ * @desc Set the Color from any valid value
+ * @param value - new color value
+ */
+
+
+ var _proto = IroColor.prototype;
+
+ _proto.set = function set(value) {
+ if (typeof value === 'string') {
+ if (/^(?:#?|0x?)[0-9a-fA-F]{3,8}$/.test(value)) {
+ this.hexString = value;
+ } else if (/^rgba?/.test(value)) {
+ this.rgbString = value;
+ } else if (/^hsla?/.test(value)) {
+ this.hslString = value;
+ }
+ } else if (typeof value === 'object') {
+ if (value instanceof IroColor) {
+ this.hsva = value.hsva;
+ } else if ('r' in value && 'g' in value && 'b' in value) {
+ this.rgb = value;
+ } else if ('h' in value && 's' in value && 'v' in value) {
+ this.hsv = value;
+ } else if ('h' in value && 's' in value && 'l' in value) {
+ this.hsl = value;
+ } else if ('kelvin' in value) {
+ this.kelvin = value.kelvin;
+ }
+ } else {
+ throw new Error('Invalid color value');
+ }
+ }
+ /**
+ * @desc Shortcut to set a specific channel value
+ * @param format - hsv | hsl | rgb
+ * @param channel - individual channel to set, for example if model = hsl, chanel = h | s | l
+ * @param value - new value for the channel
+ */
+ ;
+
+ _proto.setChannel = function setChannel(format, channel, value) {
+ var _extends2;
+
+ this[format] = _extends({}, this[format], (_extends2 = {}, _extends2[channel] = value, _extends2));
+ }
+ /**
+ * @desc Reset color back to its initial value
+ */
+ ;
+
+ _proto.reset = function reset() {
+ this.hsva = this.initialValue;
+ }
+ /**
+ * @desc make new Color instance with the same value as this one
+ */
+ ;
+
+ _proto.clone = function clone() {
+ return new IroColor(this);
+ }
+ /**
+ * @desc remove color onChange
+ */
+ ;
+
+ _proto.unbind = function unbind() {
+ this.onChange = undefined;
+ }
+ /**
+ * @desc Convert hsv object to rgb
+ * @param hsv - hsv color object
+ */
+ ;
+
+ IroColor.hsvToRgb = function hsvToRgb(hsv) {
+ var h = hsv.h / 60;
+ var s = hsv.s / 100;
+ var v = hsv.v / 100;
+ var i = floor(h);
+ var f = h - i;
+ var p = v * (1 - s);
+ var q = v * (1 - f * s);
+ var t = v * (1 - (1 - f) * s);
+ var mod = i % 6;
+ var r = [v, q, p, p, t, v][mod];
+ var g = [t, v, v, q, p, p][mod];
+ var b = [p, p, t, v, v, q][mod];
+ return {
+ r: clamp(r * 255, 0, 255),
+ g: clamp(g * 255, 0, 255),
+ b: clamp(b * 255, 0, 255)
+ };
+ }
+ /**
+ * @desc Convert rgb object to hsv
+ * @param rgb - rgb object
+ */
+ ;
+
+ IroColor.rgbToHsv = function rgbToHsv(rgb) {
+ var r = rgb.r / 255;
+ var g = rgb.g / 255;
+ var b = rgb.b / 255;
+ var max = Math.max(r, g, b);
+ var min = Math.min(r, g, b);
+ var delta = max - min;
+ var hue = 0;
+ var value = max;
+ var saturation = max === 0 ? 0 : delta / max;
+
+ switch (max) {
+ case min:
+ hue = 0; // achromatic
+
+ break;
+
+ case r:
+ hue = (g - b) / delta + (g < b ? 6 : 0);
+ break;
+
+ case g:
+ hue = (b - r) / delta + 2;
+ break;
+
+ case b:
+ hue = (r - g) / delta + 4;
+ break;
+ }
+
+ return {
+ h: hue * 60 % 360,
+ s: clamp(saturation * 100, 0, 100),
+ v: clamp(value * 100, 0, 100)
+ };
+ }
+ /**
+ * @desc Convert hsv object to hsl
+ * @param hsv - hsv object
+ */
+ ;
+
+ IroColor.hsvToHsl = function hsvToHsl(hsv) {
+ var s = hsv.s / 100;
+ var v = hsv.v / 100;
+ var l = (2 - s) * v;
+ var divisor = l <= 1 ? l : 2 - l; // Avoid division by zero when lightness is close to zero
+
+ var saturation = divisor < 1e-9 ? 0 : s * v / divisor;
+ return {
+ h: hsv.h,
+ s: clamp(saturation * 100, 0, 100),
+ l: clamp(l * 50, 0, 100)
+ };
+ }
+ /**
+ * @desc Convert hsl object to hsv
+ * @param hsl - hsl object
+ */
+ ;
+
+ IroColor.hslToHsv = function hslToHsv(hsl) {
+ var l = hsl.l * 2;
+ var s = hsl.s * (l <= 100 ? l : 200 - l) / 100; // Avoid division by zero when l + s is near 0
+
+ var saturation = l + s < 1e-9 ? 0 : 2 * s / (l + s);
+ return {
+ h: hsl.h,
+ s: clamp(saturation * 100, 0, 100),
+ v: clamp((l + s) / 2, 0, 100)
+ };
+ }
+ /**
+ * @desc Convert a kelvin temperature to an approx, RGB value
+ * @param kelvin - kelvin temperature
+ */
+ ;
+
+ IroColor.kelvinToRgb = function kelvinToRgb(kelvin) {
+ var temp = kelvin / 100;
+ var r, g, b;
+
+ if (temp < 66) {
+ r = 255;
+ g = -155.25485562709179 - 0.44596950469579133 * (g = temp - 2) + 104.49216199393888 * log(g);
+ b = temp < 20 ? 0 : -254.76935184120902 + 0.8274096064007395 * (b = temp - 10) + 115.67994401066147 * log(b);
+ } else {
+ r = 351.97690566805693 + 0.114206453784165 * (r = temp - 55) - 40.25366309332127 * log(r);
+ g = 325.4494125711974 + 0.07943456536662342 * (g = temp - 50) - 28.0852963507957 * log(g);
+ b = 255;
+ }
+
+ return {
+ r: clamp(floor(r), 0, 255),
+ g: clamp(floor(g), 0, 255),
+ b: clamp(floor(b), 0, 255)
+ };
+ }
+ /**
+ * @desc Convert an RGB color to an approximate kelvin temperature
+ * @param kelvin - kelvin temperature
+ */
+ ;
+
+ IroColor.rgbToKelvin = function rgbToKelvin(rgb) {
+ var r = rgb.r,
+ b = rgb.b;
+ var eps = 0.4;
+ var minTemp = KELVIN_MIN;
+ var maxTemp = KELVIN_MAX;
+ var temp;
+
+ while (maxTemp - minTemp > eps) {
+ temp = (maxTemp + minTemp) * 0.5;
+
+ var _rgb = IroColor.kelvinToRgb(temp);
+
+ if (_rgb.b / _rgb.r >= b / r) {
+ maxTemp = temp;
+ } else {
+ minTemp = temp;
+ }
+ }
+
+ return temp;
+ };
+
+ _createClass(IroColor, [{
+ key: "hsv",
+ get: function get() {
+ // value is cloned to allow changes to be made to the values before passing them back
+ var value = this.$;
+ return {
+ h: value.h,
+ s: value.s,
+ v: value.v
+ };
+ },
+ set: function set(newValue) {
+ var oldValue = this.$;
+ newValue = _extends({}, oldValue, newValue); // If this Color is being watched for changes we need to compare the new and old values to check the difference
+ // Otherwise we can just be lazy
+
+ if (this.onChange) {
+ // Compute changed values
+ var changes = {
+ h: false,
+ v: false,
+ s: false,
+ a: false
+ };
+
+ for (var key in oldValue) {
+ changes[key] = newValue[key] != oldValue[key];
+ }
+
+ this.$ = newValue; // If the value has changed, call hook callback
+
+ if (changes.h || changes.s || changes.v || changes.a) { this.onChange(this, changes); }
+ } else {
+ this.$ = newValue;
+ }
+ }
+ }, {
+ key: "hsva",
+ get: function get() {
+ return _extends({}, this.$);
+ },
+ set: function set(value) {
+ this.hsv = value;
+ }
+ }, {
+ key: "hue",
+ get: function get() {
+ return this.$.h;
+ },
+ set: function set(value) {
+ this.hsv = {
+ h: value
+ };
+ }
+ }, {
+ key: "saturation",
+ get: function get() {
+ return this.$.s;
+ },
+ set: function set(value) {
+ this.hsv = {
+ s: value
+ };
+ }
+ }, {
+ key: "value",
+ get: function get() {
+ return this.$.v;
+ },
+ set: function set(value) {
+ this.hsv = {
+ v: value
+ };
+ }
+ }, {
+ key: "alpha",
+ get: function get() {
+ return this.$.a;
+ },
+ set: function set(value) {
+ this.hsv = _extends({}, this.hsv, {
+ a: value
+ });
+ }
+ }, {
+ key: "kelvin",
+ get: function get() {
+ return IroColor.rgbToKelvin(this.rgb);
+ },
+ set: function set(value) {
+ this.rgb = IroColor.kelvinToRgb(value);
+ }
+ }, {
+ key: "red",
+ get: function get() {
+ var rgb = this.rgb;
+ return rgb.r;
+ },
+ set: function set(value) {
+ this.rgb = _extends({}, this.rgb, {
+ r: value
+ });
+ }
+ }, {
+ key: "green",
+ get: function get() {
+ var rgb = this.rgb;
+ return rgb.g;
+ },
+ set: function set(value) {
+ this.rgb = _extends({}, this.rgb, {
+ g: value
+ });
+ }
+ }, {
+ key: "blue",
+ get: function get() {
+ var rgb = this.rgb;
+ return rgb.b;
+ },
+ set: function set(value) {
+ this.rgb = _extends({}, this.rgb, {
+ b: value
+ });
+ }
+ }, {
+ key: "rgb",
+ get: function get() {
+ var _IroColor$hsvToRgb = IroColor.hsvToRgb(this.$),
+ r = _IroColor$hsvToRgb.r,
+ g = _IroColor$hsvToRgb.g,
+ b = _IroColor$hsvToRgb.b;
+
+ return {
+ r: round(r),
+ g: round(g),
+ b: round(b)
+ };
+ },
+ set: function set(value) {
+ this.hsv = _extends({}, IroColor.rgbToHsv(value), {
+ a: value.a === undefined ? 1 : value.a
+ });
+ }
+ }, {
+ key: "rgba",
+ get: function get() {
+ return _extends({}, this.rgb, {
+ a: this.alpha
+ });
+ },
+ set: function set(value) {
+ this.rgb = value;
+ }
+ }, {
+ key: "hsl",
+ get: function get() {
+ var _IroColor$hsvToHsl = IroColor.hsvToHsl(this.$),
+ h = _IroColor$hsvToHsl.h,
+ s = _IroColor$hsvToHsl.s,
+ l = _IroColor$hsvToHsl.l;
+
+ return {
+ h: round(h),
+ s: round(s),
+ l: round(l)
+ };
+ },
+ set: function set(value) {
+ this.hsv = _extends({}, IroColor.hslToHsv(value), {
+ a: value.a === undefined ? 1 : value.a
+ });
+ }
+ }, {
+ key: "hsla",
+ get: function get() {
+ return _extends({}, this.hsl, {
+ a: this.alpha
+ });
+ },
+ set: function set(value) {
+ this.hsl = value;
+ }
+ }, {
+ key: "rgbString",
+ get: function get() {
+ var rgb = this.rgb;
+ return "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")";
+ },
+ set: function set(value) {
+ var match;
+ var r,
+ g,
+ b,
+ a = 1;
+
+ if (match = REGEX_FUNCTIONAL_RGB.exec(value)) {
+ r = parseUnit(match[1], 255);
+ g = parseUnit(match[2], 255);
+ b = parseUnit(match[3], 255);
+ } else if (match = REGEX_FUNCTIONAL_RGBA.exec(value)) {
+ r = parseUnit(match[1], 255);
+ g = parseUnit(match[2], 255);
+ b = parseUnit(match[3], 255);
+ a = parseUnit(match[4], 1);
+ }
+
+ if (match) {
+ this.rgb = {
+ r: r,
+ g: g,
+ b: b,
+ a: a
+ };
+ } else {
+ throw new Error('Invalid rgb string');
+ }
+ }
+ }, {
+ key: "rgbaString",
+ get: function get() {
+ var rgba = this.rgba;
+ return "rgba(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ", " + rgba.a + ")";
+ },
+ set: function set(value) {
+ this.rgbString = value;
+ }
+ }, {
+ key: "hexString",
+ get: function get() {
+ var rgb = this.rgb;
+ return "#" + intToHex(rgb.r) + intToHex(rgb.g) + intToHex(rgb.b);
+ },
+ set: function set(value) {
+ var match;
+ var r,
+ g,
+ b,
+ a = 255;
+
+ if (match = REGEX_HEX_3.exec(value)) {
+ r = parseHexInt(match[1]) * 17;
+ g = parseHexInt(match[2]) * 17;
+ b = parseHexInt(match[3]) * 17;
+ } else if (match = REGEX_HEX_4.exec(value)) {
+ r = parseHexInt(match[1]) * 17;
+ g = parseHexInt(match[2]) * 17;
+ b = parseHexInt(match[3]) * 17;
+ a = parseHexInt(match[4]) * 17;
+ } else if (match = REGEX_HEX_6.exec(value)) {
+ r = parseHexInt(match[1]);
+ g = parseHexInt(match[2]);
+ b = parseHexInt(match[3]);
+ } else if (match = REGEX_HEX_8.exec(value)) {
+ r = parseHexInt(match[1]);
+ g = parseHexInt(match[2]);
+ b = parseHexInt(match[3]);
+ a = parseHexInt(match[4]);
+ }
+
+ if (match) {
+ this.rgb = {
+ r: r,
+ g: g,
+ b: b,
+ a: a / 255
+ };
+ } else {
+ throw new Error('Invalid hex string');
+ }
+ }
+ }, {
+ key: "hex8String",
+ get: function get() {
+ var rgba = this.rgba;
+ return "#" + intToHex(rgba.r) + intToHex(rgba.g) + intToHex(rgba.b) + intToHex(floor(rgba.a * 255));
+ },
+ set: function set(value) {
+ this.hexString = value;
+ }
+ }, {
+ key: "hslString",
+ get: function get() {
+ var hsl = this.hsl;
+ return "hsl(" + hsl.h + ", " + hsl.s + "%, " + hsl.l + "%)";
+ },
+ set: function set(value) {
+ var match;
+ var h,
+ s,
+ l,
+ a = 1;
+
+ if (match = REGEX_FUNCTIONAL_HSL.exec(value)) {
+ h = parseUnit(match[1], 360);
+ s = parseUnit(match[2], 100);
+ l = parseUnit(match[3], 100);
+ } else if (match = REGEX_FUNCTIONAL_HSLA.exec(value)) {
+ h = parseUnit(match[1], 360);
+ s = parseUnit(match[2], 100);
+ l = parseUnit(match[3], 100);
+ a = parseUnit(match[4], 1);
+ }
+
+ if (match) {
+ this.hsl = {
+ h: h,
+ s: s,
+ l: l,
+ a: a
+ };
+ } else {
+ throw new Error('Invalid hsl string');
+ }
+ }
+ }, {
+ key: "hslaString",
+ get: function get() {
+ var hsla = this.hsla;
+ return "hsla(" + hsla.h + ", " + hsla.s + "%, " + hsla.l + "%, " + hsla.a + ")";
+ },
+ set: function set(value) {
+ this.hslString = value;
+ }
+ }]);
+
+ return IroColor;
+ }();
+
+ var sliderDefaultOptions = {
+ sliderShape: 'bar',
+ sliderType: 'value',
+ minTemperature: 2200,
+ maxTemperature: 11000
+ };
+ /**
+ * @desc Get the bounding dimensions of the slider
+ * @param props - slider props
+ */
+
+ function getSliderDimensions(props) {
+ var _sliderSize;
+
+ var width = props.width,
+ sliderSize = props.sliderSize,
+ borderWidth = props.borderWidth,
+ handleRadius = props.handleRadius,
+ padding = props.padding,
+ sliderShape = props.sliderShape;
+ var ishorizontal = props.layoutDirection === 'horizontal'; // automatically calculate sliderSize if its not defined
+
+ sliderSize = (_sliderSize = sliderSize) != null ? _sliderSize : padding * 2 + handleRadius * 2;
+
+ if (sliderShape === 'circle') {
+ return {
+ handleStart: props.padding + props.handleRadius,
+ handleRange: width - padding * 2 - handleRadius * 2,
+ width: width,
+ height: width,
+ cx: width / 2,
+ cy: width / 2,
+ radius: width / 2 - borderWidth / 2
+ };
+ } else {
+ return {
+ handleStart: sliderSize / 2,
+ handleRange: width - sliderSize,
+ radius: sliderSize / 2,
+ x: 0,
+ y: 0,
+ width: ishorizontal ? sliderSize : width,
+ height: ishorizontal ? width : sliderSize
+ };
+ }
+ }
+ /**
+ * @desc Get the current slider value for a given color, as a percentage
+ * @param props - slider props
+ * @param color
+ */
+
+ function getCurrentSliderValue(props, color) {
+ var hsva = color.hsva;
+ var rgb = color.rgb;
+
+ switch (props.sliderType) {
+ case 'red':
+ return rgb.r / 2.55;
+
+ case 'green':
+ return rgb.g / 2.55;
+
+ case 'blue':
+ return rgb.b / 2.55;
+
+ case 'alpha':
+ return hsva.a * 100;
+
+ case 'kelvin':
+ var minTemperature = props.minTemperature,
+ maxTemperature = props.maxTemperature;
+ var temperatureRange = maxTemperature - minTemperature;
+ var percent = (color.kelvin - minTemperature) / temperatureRange * 100; // clmap percentage
+
+ return Math.max(0, Math.min(percent, 100));
+
+ case 'hue':
+ return hsva.h /= 3.6;
+
+ case 'saturation':
+ return hsva.s;
+
+ case 'value':
+ default:
+ return hsva.v;
+ }
+ }
+ /**
+ * @desc Get the current slider value from user input
+ * @param props - slider props
+ * @param x - global input x position
+ * @param y - global input y position
+ */
+
+ function getSliderValueFromInput(props, x, y) {
+ var _getSliderDimensions = getSliderDimensions(props),
+ handleRange = _getSliderDimensions.handleRange,
+ handleStart = _getSliderDimensions.handleStart;
+
+ var handlePos;
+
+ if (props.layoutDirection === 'horizontal') {
+ handlePos = -1 * y + handleRange + handleStart;
+ } else {
+ handlePos = x - handleStart;
+ } // clamp handle position
+
+
+ handlePos = Math.max(Math.min(handlePos, handleRange), 0);
+ var percent = Math.round(100 / handleRange * handlePos);
+
+ switch (props.sliderType) {
+ case 'kelvin':
+ var minTemperature = props.minTemperature,
+ maxTemperature = props.maxTemperature;
+ var temperatureRange = maxTemperature - minTemperature;
+ return minTemperature + temperatureRange * (percent / 100);
+
+ case 'alpha':
+ return percent / 100;
+
+ case 'hue':
+ return percent * 3.6;
+
+ case 'red':
+ case 'blue':
+ case 'green':
+ return percent * 2.55;
+
+ default:
+ return percent;
+ }
+ }
+ /**
+ * @desc Get the current handle position for a given color
+ * @param props - slider props
+ * @param color
+ */
+
+ function getSliderHandlePosition(props, color) {
+ var _getSliderDimensions2 = getSliderDimensions(props),
+ width = _getSliderDimensions2.width,
+ height = _getSliderDimensions2.height,
+ handleRange = _getSliderDimensions2.handleRange,
+ handleStart = _getSliderDimensions2.handleStart;
+
+ var ishorizontal = props.layoutDirection === 'horizontal';
+ var sliderValue = getCurrentSliderValue(props, color);
+ var midPoint = ishorizontal ? width / 2 : height / 2;
+ var handlePos = handleStart + sliderValue / 100 * handleRange;
+
+ if (ishorizontal) {
+ handlePos = -1 * handlePos + handleRange + handleStart * 2;
+ }
+
+ return {
+ x: ishorizontal ? midPoint : handlePos,
+ y: ishorizontal ? handlePos : midPoint
+ };
+ }
+ /**
+ * @desc Get the gradient stops for a slider
+ * @param props - slider props
+ * @param color
+ */
+
+ function getSliderGradient(props, color) {
+ var hsv = color.hsv;
+ var rgb = color.rgb;
+
+ switch (props.sliderType) {
+ case 'red':
+ return [[0, "rgb(" + 0 + "," + rgb.g + "," + rgb.b + ")"], [100, "rgb(" + 255 + "," + rgb.g + "," + rgb.b + ")"]];
+
+ case 'green':
+ return [[0, "rgb(" + rgb.r + "," + 0 + "," + rgb.b + ")"], [100, "rgb(" + rgb.r + "," + 255 + "," + rgb.b + ")"]];
+
+ case 'blue':
+ return [[0, "rgb(" + rgb.r + "," + rgb.g + "," + 0 + ")"], [100, "rgb(" + rgb.r + "," + rgb.g + "," + 255 + ")"]];
+
+ case 'alpha':
+ return [[0, "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ",0)"], [100, "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"]];
+
+ case 'kelvin':
+ var stops = [];
+ var min = props.minTemperature;
+ var max = props.maxTemperature;
+ var numStops = 8;
+ var range = max - min;
+
+ for (var kelvin = min, stop = 0; kelvin < max; kelvin += range / numStops, stop += 1) {
+ var _IroColor$kelvinToRgb = IroColor.kelvinToRgb(kelvin),
+ r = _IroColor$kelvinToRgb.r,
+ g = _IroColor$kelvinToRgb.g,
+ b = _IroColor$kelvinToRgb.b;
+
+ stops.push([100 / numStops * stop, "rgb(" + r + "," + g + "," + b + ")"]);
+ }
+
+ return stops;
+
+ case 'hue':
+ return [[0, '#f00'], [16.666, '#ff0'], [33.333, '#0f0'], [50, '#0ff'], [66.666, '#00f'], [83.333, '#f0f'], [100, '#f00']];
+
+ case 'saturation':
+ var noSat = IroColor.hsvToHsl({
+ h: hsv.h,
+ s: 0,
+ v: hsv.v
+ });
+ var fullSat = IroColor.hsvToHsl({
+ h: hsv.h,
+ s: 100,
+ v: hsv.v
+ });
+ return [[0, "hsl(" + noSat.h + "," + noSat.s + "%," + noSat.l + "%)"], [100, "hsl(" + fullSat.h + "," + fullSat.s + "%," + fullSat.l + "%)"]];
+
+ case 'value':
+ default:
+ var hsl = IroColor.hsvToHsl({
+ h: hsv.h,
+ s: hsv.s,
+ v: 100
+ });
+ return [[0, '#000'], [100, "hsl(" + hsl.h + "," + hsl.s + "%," + hsl.l + "%)"]];
+ }
+ }
+
+ var TAU = Math.PI * 2; // javascript's modulo operator doesn't produce positive numbers with negative input
+ // https://dev.to/maurobringolf/a-neat-trick-to-compute-modulo-of-negative-numbers-111e
+
+ var mod = function mod(a, n) {
+ return (a % n + n) % n;
+ }; // distance between points (x, y) and (0, 0)
+
+
+ var dist = function dist(x, y) {
+ return Math.sqrt(x * x + y * y);
+ };
+ /**
+ * @param props - wheel props
+ * @internal
+ */
+
+
+ function getHandleRange(props) {
+ return props.width / 2 - props.padding - props.handleRadius - props.borderWidth;
+ }
+ /**
+ * Returns true if point (x, y) lands inside the wheel
+ * @param props - wheel props
+ * @param x
+ * @param y
+ */
+
+
+ function isInputInsideWheel(props, x, y) {
+ var _getWheelDimensions = getWheelDimensions(props),
+ cx = _getWheelDimensions.cx,
+ cy = _getWheelDimensions.cy;
+
+ var r = props.width / 2;
+ return dist(cx - x, cy - y) < r;
+ }
+ /**
+ * @desc Get the point as the center of the wheel
+ * @param props - wheel props
+ */
+
+ function getWheelDimensions(props) {
+ var r = props.width / 2;
+ return {
+ width: props.width,
+ radius: r - props.borderWidth,
+ cx: r,
+ cy: r
+ };
+ }
+ /**
+ * @desc Translate an angle according to wheelAngle and wheelDirection
+ * @param props - wheel props
+ * @param angle - input angle
+ */
+
+ function translateWheelAngle(props, angle, invert) {
+ var wheelAngle = props.wheelAngle;
+ var wheelDirection = props.wheelDirection; // inverted and clockwisee
+
+ if (invert && wheelDirection === 'clockwise') { angle = wheelAngle + angle; } // clockwise (input handling)
+ else if (wheelDirection === 'clockwise') { angle = 360 - wheelAngle + angle; } // inverted and anticlockwise
+ else if (invert && wheelDirection === 'anticlockwise') { angle = wheelAngle + 180 - angle; } // anticlockwise (input handling)
+ else if (wheelDirection === 'anticlockwise') { angle = wheelAngle - angle; }
+ return mod(angle, 360);
+ }
+ /**
+ * @desc Get the current handle position for a given color
+ * @param props - wheel props
+ * @param color
+ */
+
+ function getWheelHandlePosition(props, color) {
+ var hsv = color.hsv;
+
+ var _getWheelDimensions2 = getWheelDimensions(props),
+ cx = _getWheelDimensions2.cx,
+ cy = _getWheelDimensions2.cy;
+
+ var handleRange = getHandleRange(props);
+ var handleAngle = (180 + translateWheelAngle(props, hsv.h, true)) * (TAU / 360);
+ var handleDist = hsv.s / 100 * handleRange;
+ var direction = props.wheelDirection === 'clockwise' ? -1 : 1;
+ return {
+ x: cx + handleDist * Math.cos(handleAngle) * direction,
+ y: cy + handleDist * Math.sin(handleAngle) * direction
+ };
+ }
+ /**
+ * @desc Get the current wheel value from user input
+ * @param props - wheel props
+ * @param x - global input x position
+ * @param y - global input y position
+ */
+
+ function getWheelValueFromInput(props, x, y) {
+ var _getWheelDimensions3 = getWheelDimensions(props),
+ cx = _getWheelDimensions3.cx,
+ cy = _getWheelDimensions3.cy;
+
+ var handleRange = getHandleRange(props);
+ x = cx - x;
+ y = cy - y; // Calculate the hue by converting the angle to radians
+
+ var hue = translateWheelAngle(props, Math.atan2(-y, -x) * (360 / TAU)); // Find the point's distance from the center of the wheel
+ // This is used to show the saturation level
+
+ var handleDist = Math.min(dist(x, y), handleRange);
+ return {
+ h: Math.round(hue),
+ s: Math.round(100 / handleRange * handleDist)
+ };
+ }
+ /**
+ * @desc Get the bounding dimensions of the box
+ * @param props - box props
+ */
+
+ function getBoxDimensions(props) {
+ var width = props.width,
+ boxHeight = props.boxHeight,
+ padding = props.padding,
+ handleRadius = props.handleRadius;
+ return {
+ width: width,
+ height: boxHeight != null ? boxHeight : width,
+ radius: padding + handleRadius
+ };
+ }
+ /**
+ * @desc Get the current box value from user input
+ * @param props - box props
+ * @param x - global input x position
+ * @param y - global input y position
+ */
+
+ function getBoxValueFromInput(props, x, y) {
+ var _getBoxDimensions = getBoxDimensions(props),
+ width = _getBoxDimensions.width,
+ height = _getBoxDimensions.height,
+ radius = _getBoxDimensions.radius;
+
+ var handleStart = radius;
+ var handleRangeX = width - radius * 2;
+ var handleRangeY = height - radius * 2;
+ var percentX = (x - handleStart) / handleRangeX * 100;
+ var percentY = (y - handleStart) / handleRangeY * 100;
+ return {
+ s: Math.max(0, Math.min(percentX, 100)),
+ v: Math.max(0, Math.min(100 - percentY, 100))
+ };
+ }
+ /**
+ * @desc Get the current box handle position for a given color
+ * @param props - box props
+ * @param color
+ */
+
+ function getBoxHandlePosition(props, color) {
+ var _getBoxDimensions2 = getBoxDimensions(props),
+ width = _getBoxDimensions2.width,
+ height = _getBoxDimensions2.height,
+ radius = _getBoxDimensions2.radius;
+
+ var hsv = color.hsv;
+ var handleStart = radius;
+ var handleRangeX = width - radius * 2;
+ var handleRangeY = height - radius * 2;
+ return {
+ x: handleStart + hsv.s / 100 * handleRangeX,
+ y: handleStart + (handleRangeY - hsv.v / 100 * handleRangeY)
+ };
+ }
+ /**
+ * @desc Get the gradient stops for a box
+ * @param props - box props
+ * @param color
+ */
+
+ function getBoxGradients(props, color) {
+ var hue = color.hue;
+ return [// saturation gradient
+ [[0, '#fff'], [100, "hsl(" + hue + ",100%,50%)"]], // lightness gradient
+ [[0, 'rgba(0,0,0,0)'], [100, '#000']]];
+ }
+
+ // Keep track of html elements for resolveSvgUrl
+ // getElementsByTagName returns a live HTMLCollection, which stays in sync with the DOM tree
+ // So it only needs to be called once
+ var BASE_ELEMENTS;
+ /**
+ * @desc Resolve an SVG reference URL
+ * This is required to work around how Safari and iOS webviews handle gradient URLS under certain conditions
+ * If a page is using a client-side routing library which makes use of the HTML tag,
+ * Safari won't be able to render SVG gradients properly (as they are referenced by URLs)
+ * More info on the problem:
+ * https://stackoverflow.com/questions/19742805/angular-and-svg-filters/19753427#19753427
+ * https://github.com/jaames/iro.js/issues/18
+ * https://github.com/jaames/iro.js/issues/45
+ * https://github.com/jaames/iro.js/pull/89
+ * @props url - SVG reference URL
+ */
+
+ function resolveSvgUrl(url) {
+ if (!BASE_ELEMENTS) { BASE_ELEMENTS = document.getElementsByTagName('base'); } // Sniff useragent string to check if the user is running Safari
+
+ var ua = window.navigator.userAgent;
+ var isSafari = /^((?!chrome|android).)*safari/i.test(ua);
+ var isIos = /iPhone|iPod|iPad/i.test(ua);
+ var location = window.location;
+ return (isSafari || isIos) && BASE_ELEMENTS.length > 0 ? location.protocol + "//" + location.host + location.pathname + location.search + url : url;
+ }
+ /**
+ * @desc Given a specifc (x, y) position, test if there's a handle there and return its index, else return null.
+ * This is used for components like the box and wheel which support multiple handles when multicolor is active
+ * @props x - point x position
+ * @props y - point y position
+ * @props handlePositions - array of {x, y} coords for each handle
+ */
+
+ function getHandleAtPoint(props, x, y, handlePositions) {
+ for (var i = 0; i < handlePositions.length; i++) {
+ var dX = handlePositions[i].x - x;
+ var dY = handlePositions[i].y - y;
+ var dist = Math.sqrt(dX * dX + dY * dY);
+
+ if (dist < props.handleRadius) {
+ return i;
+ }
+ }
+
+ return null;
+ }
+
+ function cssBorderStyles(props) {
+ return {
+ boxSizing: 'border-box',
+ border: props.borderWidth + "px solid " + props.borderColor
+ };
+ }
+ function cssGradient(type, direction, stops) {
+ return type + "-gradient(" + direction + ", " + stops.map(function (_ref) {
+ var o = _ref[0],
+ col = _ref[1];
+ return col + " " + o + "%";
+ }).join(',') + ")";
+ }
+ function cssValue(value) {
+ if (typeof value === 'string') { return value; }
+ return value + "px";
+ }
+
+ var iroColorPickerOptionDefaults = {
+ width: 300,
+ height: 300,
+ color: '#fff',
+ colors: [],
+ padding: 6,
+ layoutDirection: 'vertical',
+ borderColor: '#fff',
+ borderWidth: 0,
+ handleRadius: 8,
+ activeHandleRadius: null,
+ handleSvg: null,
+ handleProps: {
+ x: 0,
+ y: 0
+ },
+ wheelLightness: true,
+ wheelAngle: 0,
+ wheelDirection: 'anticlockwise',
+ sliderSize: null,
+ sliderMargin: 12,
+ boxHeight: null
+ };
+
+ var SECONDARY_EVENTS = ["mousemove" /* MouseMove */, "touchmove" /* TouchMove */, "mouseup" /* MouseUp */, "touchend" /* TouchEnd */];
+ // Base component class for iro UI components
+ // This extends the Preact component class to allow them to react to mouse/touch input events by themselves
+ var IroComponentWrapper = /*@__PURE__*/(function (Component) {
+ function IroComponentWrapper(props) {
+ Component.call(this, props);
+ // Generate unique ID for the component
+ // This can be used to generate unique IDs for gradients, etc
+ this.uid = (Math.random() + 1).toString(36).substring(5);
+ }
+
+ if ( Component ) IroComponentWrapper.__proto__ = Component;
+ IroComponentWrapper.prototype = Object.create( Component && Component.prototype );
+ IroComponentWrapper.prototype.constructor = IroComponentWrapper;
+ IroComponentWrapper.prototype.render = function render (props) {
+ var eventHandler = this.handleEvent.bind(this);
+ var rootProps = {
+ onMouseDown: eventHandler,
+ // https://github.com/jaames/iro.js/issues/126
+ // https://github.com/preactjs/preact/issues/2113#issuecomment-553408767
+ ontouchstart: eventHandler,
+ };
+ var isHorizontal = props.layoutDirection === 'horizontal';
+ var margin = props.margin === null ? props.sliderMargin : props.margin;
+ var rootStyles = {
+ overflow: 'visible',
+ display: isHorizontal ? 'inline-block' : 'block'
+ };
+ // first component shouldn't have any margin
+ if (props.index > 0) {
+ rootStyles[isHorizontal ? 'marginLeft' : 'marginTop'] = margin;
+ }
+ return (h(d, null, props.children(this.uid, rootProps, rootStyles)));
+ };
+ // More info on handleEvent:
+ // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
+ // TL;DR this lets us have a single point of entry for multiple events, and we can avoid callback/binding hell
+ IroComponentWrapper.prototype.handleEvent = function handleEvent (e) {
+ var this$1 = this;
+
+ var inputHandler = this.props.onInput;
+ // Get the screen position of the component
+ var bounds = this.base.getBoundingClientRect();
+ // Prefect default browser action
+ e.preventDefault();
+ // Detect if the event is a touch event by checking if it has the `touches` property
+ // If it is a touch event, use the first touch input
+ var point = e.touches ? e.changedTouches[0] : e;
+ var x = point.clientX - bounds.left;
+ var y = point.clientY - bounds.top;
+ switch (e.type) {
+ case "mousedown" /* MouseDown */:
+ case "touchstart" /* TouchStart */:
+ var result = inputHandler(x, y, 0 /* Start */);
+ if (result !== false) {
+ SECONDARY_EVENTS.forEach(function (event) {
+ document.addEventListener(event, this$1, { passive: false });
+ });
+ }
+ break;
+ case "mousemove" /* MouseMove */:
+ case "touchmove" /* TouchMove */:
+ inputHandler(x, y, 1 /* Move */);
+ break;
+ case "mouseup" /* MouseUp */:
+ case "touchend" /* TouchEnd */:
+ inputHandler(x, y, 2 /* End */);
+ SECONDARY_EVENTS.forEach(function (event) {
+ document.removeEventListener(event, this$1, { passive: false });
+ });
+ break;
+ }
+ };
+
+ return IroComponentWrapper;
+ }(m));
+
+ function IroHandle(props) {
+ var radius = props.r;
+ var url = props.url;
+ var cx = radius;
+ var cy = radius;
+ return (h("svg", { className: ("IroHandle IroHandle--" + (props.index) + " " + (props.isActive ? 'IroHandle--isActive' : '')), style: {
+ '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0);',
+ transform: ("translate(" + (cssValue(props.x)) + ", " + (cssValue(props.y)) + ")"),
+ willChange: 'transform',
+ top: cssValue(-radius),
+ left: cssValue(-radius),
+ width: cssValue(radius * 2),
+ height: cssValue(radius * 2),
+ position: 'absolute',
+ overflow: 'visible'
+ } },
+ url && (h("use", Object.assign({ xlinkHref: resolveSvgUrl(url) }, props.props))),
+ !url && (h("circle", { cx: cx, cy: cy, r: radius, fill: "none", "stroke-width": 2, stroke: "#000" })),
+ !url && (h("circle", { cx: cx, cy: cy, r: radius - 2, fill: props.fill, "stroke-width": 2, stroke: "#fff" }))));
+ }
+ IroHandle.defaultProps = {
+ fill: 'none',
+ x: 0,
+ y: 0,
+ r: 8,
+ url: null,
+ props: { x: 0, y: 0 }
+ };
+
+ function IroSlider(props) {
+ var activeIndex = props.activeIndex;
+ var activeColor = (activeIndex !== undefined && activeIndex < props.colors.length) ? props.colors[activeIndex] : props.color;
+ var ref = getSliderDimensions(props);
+ var width = ref.width;
+ var height = ref.height;
+ var radius = ref.radius;
+ var handlePos = getSliderHandlePosition(props, activeColor);
+ var gradient = getSliderGradient(props, activeColor);
+ function handleInput(x, y, type) {
+ var value = getSliderValueFromInput(props, x, y);
+ props.parent.inputActive = true;
+ activeColor[props.sliderType] = value;
+ props.onInput(type, props.id);
+ }
+ return (h(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("div", Object.assign({}, rootProps, { className: "IroSlider", style: Object.assign({}, {position: 'relative',
+ width: cssValue(width),
+ height: cssValue(height),
+ borderRadius: cssValue(radius),
+ // checkered bg to represent alpha
+ background: "conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0)",
+ backgroundSize: '8px 8px'},
+ rootStyles) }),
+ h("div", { className: "IroSliderGradient", style: Object.assign({}, {position: 'absolute',
+ top: 0,
+ left: 0,
+ width: "100%",
+ height: "100%",
+ borderRadius: cssValue(radius),
+ background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)},
+ cssBorderStyles(props)) }),
+ h(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y }))); }));
+ }
+ IroSlider.defaultProps = Object.assign({}, sliderDefaultOptions);
+
+ function IroBox(props) {
+ var ref = getBoxDimensions(props);
+ var width = ref.width;
+ var height = ref.height;
+ var radius = ref.radius;
+ var colors = props.colors;
+ var colorPicker = props.parent;
+ var activeIndex = props.activeIndex;
+ var activeColor = (activeIndex !== undefined && activeIndex < props.colors.length) ? props.colors[activeIndex] : props.color;
+ var gradients = getBoxGradients(props, activeColor);
+ var handlePositions = colors.map(function (color) { return getBoxHandlePosition(props, color); });
+ function handleInput(x, y, inputType) {
+ if (inputType === 0 /* Start */) {
+ // getHandleAtPoint() returns the index for the handle if the point 'hits' it, or null otherwise
+ var activeHandle = getHandleAtPoint(props, x, y, handlePositions);
+ // If the input hit a handle, set it as the active handle, but don't update the color
+ if (activeHandle !== null) {
+ colorPicker.setActiveColor(activeHandle);
+ }
+ // If the input didn't hit a handle, set the currently active handle to that position
+ else {
+ colorPicker.inputActive = true;
+ activeColor.hsv = getBoxValueFromInput(props, x, y);
+ props.onInput(inputType, props.id);
+ }
+ }
+ // move is fired when the user has started dragging
+ else if (inputType === 1 /* Move */) {
+ colorPicker.inputActive = true;
+ activeColor.hsv = getBoxValueFromInput(props, x, y);
+ }
+ // let the color picker fire input:start, input:move or input:end events
+ props.onInput(inputType, props.id);
+ }
+ return (h(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("div", Object.assign({}, rootProps, { className: "IroBox", style: Object.assign({}, {width: cssValue(width),
+ height: cssValue(height),
+ position: 'relative'},
+ rootStyles) }),
+ h("div", { className: "IroBox", style: Object.assign({}, {width: '100%',
+ height: '100%',
+ borderRadius: cssValue(radius)},
+ cssBorderStyles(props),
+ {background: cssGradient('linear', 'to bottom', gradients[1])
+ + ',' +
+ cssGradient('linear', 'to right', gradients[0])}) }),
+ colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (h(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }),
+ h(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.activeHandleRadius || props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); }));
+ }
+
+ var HUE_GRADIENT_CLOCKWISE = 'conic-gradient(red, yellow, lime, aqua, blue, magenta, red)';
+ var HUE_GRADIENT_ANTICLOCKWISE = 'conic-gradient(red, magenta, blue, aqua, lime, yellow, red)';
+ function IroWheel(props) {
+ var ref = getWheelDimensions(props);
+ var width = ref.width;
+ var colors = props.colors;
+ var borderWidth = props.borderWidth;
+ var colorPicker = props.parent;
+ var activeColor = props.color;
+ var hsv = activeColor.hsv;
+ var handlePositions = colors.map(function (color) { return getWheelHandlePosition(props, color); });
+ var circleStyles = {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ borderRadius: '50%',
+ boxSizing: 'border-box'
+ };
+ function handleInput(x, y, inputType) {
+ if (inputType === 0 /* Start */) {
+ // input hitbox is a square,
+ // so we want to ignore any initial clicks outside the circular shape of the wheel
+ if (!isInputInsideWheel(props, x, y)) {
+ // returning false will cease all event handling for this interaction
+ return false;
+ }
+ // getHandleAtPoint() returns the index for the handle if the point 'hits' it, or null otherwise
+ var activeHandle = getHandleAtPoint(props, x, y, handlePositions);
+ // If the input hit a handle, set it as the active handle, but don't update the color
+ if (activeHandle !== null) {
+ colorPicker.setActiveColor(activeHandle);
+ }
+ // If the input didn't hit a handle, set the currently active handle to that position
+ else {
+ colorPicker.inputActive = true;
+ activeColor.hsv = getWheelValueFromInput(props, x, y);
+ props.onInput(inputType, props.id);
+ }
+ }
+ // move is fired when the user has started dragging
+ else if (inputType === 1 /* Move */) {
+ colorPicker.inputActive = true;
+ activeColor.hsv = getWheelValueFromInput(props, x, y);
+ }
+ // let the color picker fire input:start, input:move or input:end events
+ props.onInput(inputType, props.id);
+ }
+ return (h(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("div", Object.assign({}, rootProps, { className: "IroWheel", style: Object.assign({}, {width: cssValue(width),
+ height: cssValue(width),
+ position: 'relative'},
+ rootStyles) }),
+ h("div", { className: "IroWheelHue", style: Object.assign({}, circleStyles,
+ {transform: ("rotateZ(" + (props.wheelAngle + 90) + "deg)"),
+ background: props.wheelDirection === 'clockwise' ? HUE_GRADIENT_CLOCKWISE : HUE_GRADIENT_ANTICLOCKWISE}) }),
+ h("div", { className: "IroWheelSaturation", style: Object.assign({}, circleStyles,
+ {background: 'radial-gradient(circle closest-side, #fff, transparent)'}) }),
+ props.wheelLightness && (h("div", { className: "IroWheelLightness", style: Object.assign({}, circleStyles,
+ {background: '#000',
+ opacity: 1 - hsv.v / 100}) })),
+ h("div", { className: "IroWheelBorder", style: Object.assign({}, circleStyles,
+ cssBorderStyles(props)) }),
+ colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (h(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }),
+ h(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.activeHandleRadius || props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); }));
+ }
+
+ function createWidget(WidgetComponent) {
+ var widgetFactory = function (parent, props) {
+ var widget; // will become an instance of the widget component class
+ var widgetRoot = document.createElement('div');
+ // Render widget into a temp DOM node
+ I(h(WidgetComponent, Object.assign({}, {ref: function (ref) { return widget = ref; }},
+ props)), widgetRoot);
+ function mountWidget() {
+ var container = parent instanceof Element ? parent : document.querySelector(parent);
+ container.appendChild(widget.base);
+ widget.onMount(container);
+ }
+ // Mount it into the DOM when the page document is ready
+ if (document.readyState !== 'loading') {
+ mountWidget();
+ }
+ else {
+ document.addEventListener('DOMContentLoaded', mountWidget);
+ }
+ return widget;
+ };
+ // Allow the widget factory to inherit component prototype + static class methods
+ // This makes it easier for plugin authors to extend the base widget component
+ widgetFactory.prototype = WidgetComponent.prototype;
+ Object.assign(widgetFactory, WidgetComponent);
+ // Add reference to base component too
+ widgetFactory.__component = WidgetComponent;
+ return widgetFactory;
+ }
+
+ var IroColorPicker = /*@__PURE__*/(function (Component) {
+ function IroColorPicker(props) {
+ var this$1 = this;
+
+ Component.call(this, props);
+ this.colors = [];
+ this.inputActive = false;
+ this.events = {};
+ this.activeEvents = {};
+ this.deferredEvents = {};
+ this.id = props.id;
+ var colors = props.colors.length > 0 ? props.colors : [props.color];
+ colors.forEach(function (colorValue) { return this$1.addColor(colorValue); });
+ this.setActiveColor(0);
+ // Pass all the props into the component's state,
+ // Except we want to add the color object and make sure that refs aren't passed down to children
+ this.state = Object.assign({}, props,
+ {color: this.color,
+ colors: this.colors,
+ layout: props.layout});
+ }
+
+ if ( Component ) IroColorPicker.__proto__ = Component;
+ IroColorPicker.prototype = Object.create( Component && Component.prototype );
+ IroColorPicker.prototype.constructor = IroColorPicker;
+ // Plubic multicolor API
+ /**
+ * @desc Add a color to the color picker
+ * @param color new color to add
+ * @param index optional color index
+ */
+ IroColorPicker.prototype.addColor = function addColor (color, index) {
+ if ( index === void 0 ) index = this.colors.length;
+
+ // Create a new iro.Color
+ // Also bind it to onColorChange, so whenever the color changes it updates the color picker
+ var newColor = new IroColor(color, this.onColorChange.bind(this));
+ // Insert color @ the given index
+ this.colors.splice(index, 0, newColor);
+ // Reindex colors
+ this.colors.forEach(function (color, index) { return color.index = index; });
+ // Update picker state if necessary
+ if (this.state) {
+ this.setState({ colors: this.colors });
+ }
+ // Fire color init event
+ this.deferredEmit('color:init', newColor);
+ };
+ /**
+ * @desc Remove a color from the color picker
+ * @param index color index
+ */
+ IroColorPicker.prototype.removeColor = function removeColor (index) {
+ var color = this.colors.splice(index, 1)[0];
+ // Destroy the color object -- this unbinds it from the color picker
+ color.unbind();
+ // Reindex colors
+ this.colors.forEach(function (color, index) { return color.index = index; });
+ // Update picker state if necessary
+ if (this.state) {
+ this.setState({ colors: this.colors });
+ }
+ // If the active color was removed, default active color to 0
+ if (color.index === this.color.index) {
+ this.setActiveColor(0);
+ }
+ // Fire color remove event
+ this.emit('color:remove', color);
+ };
+ /**
+ * @desc Set the currently active color
+ * @param index color index
+ */
+ IroColorPicker.prototype.setActiveColor = function setActiveColor (index) {
+ this.color = this.colors[index];
+ if (this.state) {
+ this.setState({ color: this.color });
+ }
+ // Fire color switch event
+ this.emit('color:setActive', this.color);
+ };
+ /**
+ * @desc Replace all of the current colorPicker colors
+ * @param newColorValues list of new colors to add
+ */
+ IroColorPicker.prototype.setColors = function setColors (newColorValues, activeColorIndex) {
+ var this$1 = this;
+ if ( activeColorIndex === void 0 ) activeColorIndex = 0;
+
+ // Unbind color events
+ this.colors.forEach(function (color) { return color.unbind(); });
+ // Destroy old colors
+ this.colors = [];
+ // Add new colors
+ newColorValues.forEach(function (colorValue) { return this$1.addColor(colorValue); });
+ // Reset active color
+ this.setActiveColor(activeColorIndex);
+ this.emit('color:setAll', this.colors);
+ };
+ // Public ColorPicker events API
+ /**
+ * @desc Set a callback function for an event
+ * @param eventList event(s) to listen to
+ * @param callback - Function called when the event is fired
+ */
+ IroColorPicker.prototype.on = function on (eventList, callback) {
+ var this$1 = this;
+
+ var events = this.events;
+ // eventList can be an eventType string or an array of eventType strings
+ (!Array.isArray(eventList) ? [eventList] : eventList).forEach(function (eventType) {
+ // Add event callback
+ (events[eventType] || (events[eventType] = [])).push(callback);
+ // Call deferred events
+ // These are events that can be stored until a listener for them is added
+ if (this$1.deferredEvents[eventType]) {
+ // Deffered events store an array of arguments from when the event was called
+ this$1.deferredEvents[eventType].forEach(function (args) {
+ callback.apply(null, args);
+ });
+ // Clear deferred events
+ this$1.deferredEvents[eventType] = [];
+ }
+ });
+ };
+ /**
+ * @desc Remove a callback function for an event added with on()
+ * @param eventList - event(s) to listen to
+ * @param callback - original callback function to remove
+ */
+ IroColorPicker.prototype.off = function off (eventList, callback) {
+ var this$1 = this;
+
+ (!Array.isArray(eventList) ? [eventList] : eventList).forEach(function (eventType) {
+ var callbackList = this$1.events[eventType];
+ // this.emitHook('event:off', eventType, callback);
+ if (callbackList)
+ { callbackList.splice(callbackList.indexOf(callback), 1); }
+ });
+ };
+ /**
+ * @desc Emit an event
+ * @param eventType event to emit
+ */
+ IroColorPicker.prototype.emit = function emit (eventType) {
+ var this$1 = this;
+ var args = [], len = arguments.length - 1;
+ while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];
+
+ var activeEvents = this.activeEvents;
+ var isEventActive = activeEvents.hasOwnProperty(eventType) ? activeEvents[eventType] : false;
+ // Prevent event callbacks from firing if the event is already active
+ // This stops infinite loops if something in an event callback causes the same event to be fired again
+ // (e.g. setting the color inside a color:change callback)
+ if (!isEventActive) {
+ activeEvents[eventType] = true;
+ var callbackList = this.events[eventType] || [];
+ callbackList.forEach(function (fn) { return fn.apply(this$1, args); });
+ activeEvents[eventType] = false;
+ }
+ };
+ /**
+ * @desc Emit an event now, or save it for when the relevent event listener is added
+ * @param eventType - The name of the event to emit
+ */
+ IroColorPicker.prototype.deferredEmit = function deferredEmit (eventType) {
+ var ref;
+
+ var args = [], len = arguments.length - 1;
+ while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];
+ var deferredEvents = this.deferredEvents;
+ (ref = this).emit.apply(ref, [ eventType ].concat( args ));
+ (deferredEvents[eventType] || (deferredEvents[eventType] = [])).push(args);
+ };
+ // Public utility methods
+ IroColorPicker.prototype.setOptions = function setOptions (newOptions) {
+ this.setState(newOptions);
+ };
+ /**
+ * @desc Resize the color picker
+ * @param width - new width
+ */
+ IroColorPicker.prototype.resize = function resize (width) {
+ this.setOptions({ width: width });
+ };
+ /**
+ * @desc Reset the color picker to the initial color provided in the color picker options
+ */
+ IroColorPicker.prototype.reset = function reset () {
+ this.colors.forEach(function (color) { return color.reset(); });
+ this.setState({ colors: this.colors });
+ };
+ /**
+ * @desc Called by the createWidget wrapper when the element is mounted into the page
+ * @param container - the container element for this ColorPicker instance
+ */
+ IroColorPicker.prototype.onMount = function onMount (container) {
+ this.el = container;
+ this.deferredEmit('mount', this);
+ };
+ // Internal methods
+ /**
+ * @desc React to a color update
+ * @param color - current color
+ * @param changes - shows which h,s,v,a color channels changed
+ */
+ IroColorPicker.prototype.onColorChange = function onColorChange (color, changes) {
+ this.setState({ color: this.color });
+ if (this.inputActive) {
+ this.inputActive = false;
+ this.emit('input:change', color, changes);
+ }
+ this.emit('color:change', color, changes);
+ };
+ /**
+ * @desc Handle input from a UI control element
+ * @param type - event type
+ */
+ IroColorPicker.prototype.emitInputEvent = function emitInputEvent (type, originId) {
+ if (type === 0 /* Start */) {
+ this.emit('input:start', this.color, originId);
+ }
+ else if (type === 1 /* Move */) {
+ this.emit('input:move', this.color, originId);
+ }
+ else if (type === 2 /* End */) {
+ this.emit('input:end', this.color, originId);
+ }
+ };
+ IroColorPicker.prototype.render = function render (props, state) {
+ var this$1 = this;
+
+ var layout = state.layout;
+ // use layout shorthands
+ if (!Array.isArray(layout)) {
+ switch (layout) {
+ // TODO: implement some?
+ default:
+ layout = [
+ { component: IroWheel },
+ { component: IroSlider } ];
+ }
+ // add transparency slider to the layout
+ if (state.transparency) {
+ layout.push({
+ component: IroSlider,
+ options: {
+ sliderType: 'alpha'
+ }
+ });
+ }
+ }
+ return (h("div", { class: "IroColorPicker", id: state.id, style: {
+ display: state.display
+ } }, layout.map(function (ref, componentIndex) {
+ var UiComponent = ref.component;
+ var options = ref.options;
+
+ return (h(UiComponent, Object.assign({}, state, options, { ref: undefined, onInput: this$1.emitInputEvent.bind(this$1), parent: this$1, index: componentIndex })));
+ })));
+ };
+
+ return IroColorPicker;
+ }(m));
+ IroColorPicker.defaultProps = Object.assign({}, iroColorPickerOptionDefaults,
+ {colors: [],
+ display: 'block',
+ id: null,
+ layout: 'default',
+ margin: null});
+ var IroColorPickerWidget = createWidget(IroColorPicker);
+
+ var iro;
+ (function (iro) {
+ iro.version = "5.5.2"; // replaced by @rollup/plugin-replace; see rollup.config.js
+ iro.Color = IroColor;
+ iro.ColorPicker = IroColorPickerWidget;
+ var ui;
+ (function (ui) {
+ ui.h = h;
+ ui.ComponentBase = IroComponentWrapper;
+ ui.Handle = IroHandle;
+ ui.Slider = IroSlider;
+ ui.Wheel = IroWheel;
+ ui.Box = IroBox;
+ })(ui = iro.ui || (iro.ui = {}));
+ })(iro || (iro = {}));
+ var iro$1 = iro;
+
+ return iro$1;
+
+}));
diff --git a/RpiLedBars/web/slider/app.min.css b/RpiLedBars/web/slider/app.min.css
new file mode 100644
index 0000000..64fcf63
--- /dev/null
+++ b/RpiLedBars/web/slider/app.min.css
@@ -0,0 +1,8285 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+html {
+ font-family: sans-serif;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block
+}
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block;
+ vertical-align: baseline
+}
+
+audio:not([controls]) {
+ display: none;
+ height: 0
+}
+
+[hidden],
+template {
+ display: none
+}
+
+a {
+ background-color: transparent
+}
+
+a:active,
+a:hover {
+ outline: 0
+}
+
+dfn {
+ font-style: italic
+}
+
+mark {
+ background: #ff0;
+ color: #000
+}
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline
+}
+
+sup {
+ top: -.5em
+}
+
+sub {
+ bottom: -.25em
+}
+
+img {
+ border: 0
+}
+
+svg:not(:root) {
+ overflow: hidden
+}
+
+figure {
+ margin: 1em 40px
+}
+
+hr {
+ box-sizing: content-box
+}
+
+pre {
+ overflow: auto
+}
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ color: inherit;
+ font: inherit;
+ margin: 0
+}
+
+button {
+ overflow: visible
+}
+
+button,
+select {
+ text-transform: none
+}
+
+button,
+html input[type=button],
+input[type=reset],
+input[type=submit] {
+ -webkit-appearance: button;
+ cursor: pointer
+}
+
+button[disabled],
+html input[disabled] {
+ cursor: default
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0
+}
+
+input {
+ line-height: normal
+}
+
+input[type=checkbox],
+input[type=radio] {
+ box-sizing: border-box;
+ padding: 0
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+ height: auto
+}
+
+input[type=search] {
+ -webkit-appearance: textfield;
+ box-sizing: content-box
+}
+
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-decoration {
+ -webkit-appearance: none
+}
+
+fieldset {
+ border: 1px solid silver;
+ margin: 0 2px;
+ padding: .35em .625em .75em
+}
+
+legend {
+ border: 0;
+ padding: 0
+}
+
+textarea {
+ overflow: auto
+}
+
+optgroup {
+ font-weight: 700
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0
+}
+
+meta.foundation-version {
+ font-family: "/5.4.7/"
+}
+
+meta.foundation-mq-small {
+ font-family: "/only screen and (min-width:501px)/";
+ width: 501px
+}
+
+meta.foundation-mq-medium {
+ font-family: "/only screen and (min-width:701px)/";
+ width: 701px
+}
+
+meta.foundation-mq-large {
+ font-family: "/only screen and (min-width:901px)/";
+ width: 901px
+}
+
+meta.foundation-mq-xlarge {
+ font-family: "/only screen and (min-width:1101px)/";
+ width: 1101px
+}
+
+meta.foundation-mq-xxlarge {
+ font-family: "/only screen and (min-width:1301px)/";
+ width: 1301px
+}
+
+meta.foundation-data-attribute-namespace {
+ font-family: false
+}
+
+body,
+html {
+ height: 100%
+}
+
+*,
+:after,
+:before {
+ box-sizing: border-box
+}
+
+body,
+html {
+ font-size: 100%
+}
+
+body {
+ background: #fff;
+ padding: 0;
+ margin: 0;
+ font-style: normal;
+ line-height: 1.5;
+ position: relative;
+ cursor: auto
+}
+
+a:hover {
+ cursor: pointer
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+ -ms-interpolation-mode: bicubic
+}
+
+#map_canvas embed,
+#map_canvas img,
+#map_canvas object,
+.map_canvas embed,
+.map_canvas img,
+.map_canvas object {
+ max-width: none!important
+}
+
+.left {
+ float: left!important
+}
+
+.right {
+ float: right!important
+}
+
+.clearfix:after,
+.clearfix:before {
+ content: " ";
+ display: table
+}
+
+.clearfix:after {
+ clear: both
+}
+
+.hide {
+ display: none!important;
+ visibility: hidden
+}
+
+.invisible {
+ visibility: hidden
+}
+
+.antialiased {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale
+}
+
+img {
+ display: inline-block;
+ vertical-align: middle
+}
+
+textarea {
+ height: auto;
+ min-height: 50px
+}
+
+select {
+ width: 100%
+}
+
+.row {
+ max-width: 62.5rem
+}
+
+.row:after,
+.row:before {
+ content: " ";
+ display: table
+}
+
+.row:after {
+ clear: both
+}
+
+.row.collapse>.column,
+.row.collapse>.columns {
+ padding-left: 0;
+ padding-right: 0
+}
+
+.row.collapse .row {
+ margin-left: 0;
+ margin-right: 0
+}
+
+.row .row {
+ width: auto;
+ margin: 0 -.9375rem;
+ max-width: none
+}
+
+.row .row:after,
+.row .row:before {
+ content: " ";
+ display: table
+}
+
+.row .row:after {
+ clear: both
+}
+
+.row .row.collapse {
+ width: auto;
+ margin: 0;
+ max-width: none
+}
+
+.row .row.collapse:after,
+.row .row.collapse:before {
+ content: " ";
+ display: table
+}
+
+.row .row.collapse:after {
+ clear: both
+}
+
+.column,
+.columns {
+ padding-left: .9375rem;
+ padding-right: .9375rem;
+ width: 100%;
+ float: left
+}
+
+[class*=column]+[class*=column]:last-child {
+ float: right
+}
+
+[class*=column]+[class*=column].end {
+ float: left
+}
+
+@media only screen and (min-width:501px) {
+ .small-push-0 {
+ position: relative;
+ left: 0;
+ right: auto
+ }
+ .small-pull-0 {
+ position: relative;
+ right: 0;
+ left: auto
+ }
+ .small-push-1 {
+ position: relative;
+ left: 8.33333%;
+ right: auto
+ }
+ .small-pull-1 {
+ position: relative;
+ right: 8.33333%;
+ left: auto
+ }
+ .small-push-2 {
+ position: relative;
+ left: 16.66667%;
+ right: auto
+ }
+ .small-pull-2 {
+ position: relative;
+ right: 16.66667%;
+ left: auto
+ }
+ .small-push-3 {
+ position: relative;
+ left: 25%;
+ right: auto
+ }
+ .small-pull-3 {
+ position: relative;
+ right: 25%;
+ left: auto
+ }
+ .small-push-4 {
+ position: relative;
+ left: 33.33333%;
+ right: auto
+ }
+ .small-pull-4 {
+ position: relative;
+ right: 33.33333%;
+ left: auto
+ }
+ .small-push-5 {
+ position: relative;
+ left: 41.66667%;
+ right: auto
+ }
+ .small-pull-5 {
+ position: relative;
+ right: 41.66667%;
+ left: auto
+ }
+ .small-push-6 {
+ position: relative;
+ left: 50%;
+ right: auto
+ }
+ .small-pull-6 {
+ position: relative;
+ right: 50%;
+ left: auto
+ }
+ .small-push-7 {
+ position: relative;
+ left: 58.33333%;
+ right: auto
+ }
+ .small-pull-7 {
+ position: relative;
+ right: 58.33333%;
+ left: auto
+ }
+ .small-push-8 {
+ position: relative;
+ left: 66.66667%;
+ right: auto
+ }
+ .small-pull-8 {
+ position: relative;
+ right: 66.66667%;
+ left: auto
+ }
+ .small-push-9 {
+ position: relative;
+ left: 75%;
+ right: auto
+ }
+ .small-pull-9 {
+ position: relative;
+ right: 75%;
+ left: auto
+ }
+ .small-push-10 {
+ position: relative;
+ left: 83.33333%;
+ right: auto
+ }
+ .small-pull-10 {
+ position: relative;
+ right: 83.33333%;
+ left: auto
+ }
+ .small-push-11 {
+ position: relative;
+ left: 91.66667%;
+ right: auto
+ }
+ .small-pull-11 {
+ position: relative;
+ right: 91.66667%;
+ left: auto
+ }
+ .column,
+ .columns {
+ position: relative;
+ padding-left: .9375rem;
+ padding-right: .9375rem;
+ float: left
+ }
+ .small-1 {
+ width: 8.33333%
+ }
+ .small-2 {
+ width: 16.66667%
+ }
+ .small-3 {
+ width: 25%
+ }
+ .small-4 {
+ width: 33.33333%
+ }
+ .small-5 {
+ width: 41.66667%
+ }
+ .small-6 {
+ width: 50%
+ }
+ .small-7 {
+ width: 58.33333%
+ }
+ .small-8 {
+ width: 66.66667%
+ }
+ .small-9 {
+ width: 75%
+ }
+ .small-10 {
+ width: 83.33333%
+ }
+ .small-11 {
+ width: 91.66667%
+ }
+ .small-12 {
+ width: 100%
+ }
+ .small-offset-0 {
+ margin-left: 0!important
+ }
+ .small-offset-1 {
+ margin-left: 8.33333%!important
+ }
+ .small-offset-2 {
+ margin-left: 16.66667%!important
+ }
+ .small-offset-3 {
+ margin-left: 25%!important
+ }
+ .small-offset-4 {
+ margin-left: 33.33333%!important
+ }
+ .small-offset-5 {
+ margin-left: 41.66667%!important
+ }
+ .small-offset-6 {
+ margin-left: 50%!important
+ }
+ .small-offset-7 {
+ margin-left: 58.33333%!important
+ }
+ .small-offset-8 {
+ margin-left: 66.66667%!important
+ }
+ .small-offset-9 {
+ margin-left: 75%!important
+ }
+ .small-offset-10 {
+ margin-left: 83.33333%!important
+ }
+ .small-offset-11 {
+ margin-left: 91.66667%!important
+ }
+ .small-reset-order {
+ margin-left: 0;
+ margin-right: 0;
+ left: auto;
+ right: auto;
+ float: left
+ }
+ .column.small-centered,
+ .columns.small-centered {
+ margin-left: auto;
+ margin-right: auto;
+ float: none
+ }
+ .column.small-uncentered,
+ .columns.small-uncentered {
+ margin-left: 0;
+ margin-right: 0;
+ float: left
+ }
+ .column.small-centered:last-child,
+ .columns.small-centered:last-child {
+ float: none
+ }
+ .column.small-uncentered:last-child,
+ .columns.small-uncentered:last-child {
+ float: left
+ }
+ .column.small-uncentered.opposite,
+ .columns.small-uncentered.opposite {
+ float: right
+ }
+}
+
+@media only screen and (min-width:701px) {
+ .medium-push-0 {
+ position: relative;
+ left: 0;
+ right: auto
+ }
+ .medium-pull-0 {
+ position: relative;
+ right: 0;
+ left: auto
+ }
+ .medium-push-1 {
+ position: relative;
+ left: 8.33333%;
+ right: auto
+ }
+ .medium-pull-1 {
+ position: relative;
+ right: 8.33333%;
+ left: auto
+ }
+ .medium-push-2 {
+ position: relative;
+ left: 16.66667%;
+ right: auto
+ }
+ .medium-pull-2 {
+ position: relative;
+ right: 16.66667%;
+ left: auto
+ }
+ .medium-push-3 {
+ position: relative;
+ left: 25%;
+ right: auto
+ }
+ .medium-pull-3 {
+ position: relative;
+ right: 25%;
+ left: auto
+ }
+ .medium-push-4 {
+ position: relative;
+ left: 33.33333%;
+ right: auto
+ }
+ .medium-pull-4 {
+ position: relative;
+ right: 33.33333%;
+ left: auto
+ }
+ .medium-push-5 {
+ position: relative;
+ left: 41.66667%;
+ right: auto
+ }
+ .medium-pull-5 {
+ position: relative;
+ right: 41.66667%;
+ left: auto
+ }
+ .medium-push-6 {
+ position: relative;
+ left: 50%;
+ right: auto
+ }
+ .medium-pull-6 {
+ position: relative;
+ right: 50%;
+ left: auto
+ }
+ .medium-push-7 {
+ position: relative;
+ left: 58.33333%;
+ right: auto
+ }
+ .medium-pull-7 {
+ position: relative;
+ right: 58.33333%;
+ left: auto
+ }
+ .medium-push-8 {
+ position: relative;
+ left: 66.66667%;
+ right: auto
+ }
+ .medium-pull-8 {
+ position: relative;
+ right: 66.66667%;
+ left: auto
+ }
+ .medium-push-9 {
+ position: relative;
+ left: 75%;
+ right: auto
+ }
+ .medium-pull-9 {
+ position: relative;
+ right: 75%;
+ left: auto
+ }
+ .medium-push-10 {
+ position: relative;
+ left: 83.33333%;
+ right: auto
+ }
+ .medium-pull-10 {
+ position: relative;
+ right: 83.33333%;
+ left: auto
+ }
+ .medium-push-11 {
+ position: relative;
+ left: 91.66667%;
+ right: auto
+ }
+ .medium-pull-11 {
+ position: relative;
+ right: 91.66667%;
+ left: auto
+ }
+ .column,
+ .columns {
+ position: relative;
+ padding-left: .9375rem;
+ padding-right: .9375rem;
+ float: left
+ }
+ .medium-1 {
+ width: 8.33333%
+ }
+ .medium-2 {
+ width: 16.66667%
+ }
+ .medium-3 {
+ width: 25%
+ }
+ .medium-4 {
+ width: 33.33333%
+ }
+ .medium-5 {
+ width: 41.66667%
+ }
+ .medium-6 {
+ width: 50%
+ }
+ .medium-7 {
+ width: 58.33333%
+ }
+ .medium-8 {
+ width: 66.66667%
+ }
+ .medium-9 {
+ width: 75%
+ }
+ .medium-10 {
+ width: 83.33333%
+ }
+ .medium-11 {
+ width: 91.66667%
+ }
+ .medium-12 {
+ width: 100%
+ }
+ .medium-offset-0 {
+ margin-left: 0!important
+ }
+ .medium-offset-1 {
+ margin-left: 8.33333%!important
+ }
+ .medium-offset-2 {
+ margin-left: 16.66667%!important
+ }
+ .medium-offset-3 {
+ margin-left: 25%!important
+ }
+ .medium-offset-4 {
+ margin-left: 33.33333%!important
+ }
+ .medium-offset-5 {
+ margin-left: 41.66667%!important
+ }
+ .medium-offset-6 {
+ margin-left: 50%!important
+ }
+ .medium-offset-7 {
+ margin-left: 58.33333%!important
+ }
+ .medium-offset-8 {
+ margin-left: 66.66667%!important
+ }
+ .medium-offset-9 {
+ margin-left: 75%!important
+ }
+ .medium-offset-10 {
+ margin-left: 83.33333%!important
+ }
+ .medium-offset-11 {
+ margin-left: 91.66667%!important
+ }
+ .medium-reset-order {
+ margin-left: 0;
+ margin-right: 0;
+ left: auto;
+ right: auto;
+ float: left
+ }
+ .column.medium-centered,
+ .columns.medium-centered {
+ margin-left: auto;
+ margin-right: auto;
+ float: none
+ }
+ .column.medium-uncentered,
+ .columns.medium-uncentered {
+ margin-left: 0;
+ margin-right: 0;
+ float: left
+ }
+ .column.medium-centered:last-child,
+ .columns.medium-centered:last-child {
+ float: none
+ }
+ .column.medium-uncentered:last-child,
+ .columns.medium-uncentered:last-child {
+ float: left
+ }
+ .column.medium-uncentered.opposite,
+ .columns.medium-uncentered.opposite {
+ float: right
+ }
+ .push-0 {
+ position: relative;
+ left: 0;
+ right: auto
+ }
+ .pull-0 {
+ position: relative;
+ right: 0;
+ left: auto
+ }
+ .push-1 {
+ position: relative;
+ left: 8.33333%;
+ right: auto
+ }
+ .pull-1 {
+ position: relative;
+ right: 8.33333%;
+ left: auto
+ }
+ .push-2 {
+ position: relative;
+ left: 16.66667%;
+ right: auto
+ }
+ .pull-2 {
+ position: relative;
+ right: 16.66667%;
+ left: auto
+ }
+ .push-3 {
+ position: relative;
+ left: 25%;
+ right: auto
+ }
+ .pull-3 {
+ position: relative;
+ right: 25%;
+ left: auto
+ }
+ .push-4 {
+ position: relative;
+ left: 33.33333%;
+ right: auto
+ }
+ .pull-4 {
+ position: relative;
+ right: 33.33333%;
+ left: auto
+ }
+ .push-5 {
+ position: relative;
+ left: 41.66667%;
+ right: auto
+ }
+ .pull-5 {
+ position: relative;
+ right: 41.66667%;
+ left: auto
+ }
+ .push-6 {
+ position: relative;
+ left: 50%;
+ right: auto
+ }
+ .pull-6 {
+ position: relative;
+ right: 50%;
+ left: auto
+ }
+ .push-7 {
+ position: relative;
+ left: 58.33333%;
+ right: auto
+ }
+ .pull-7 {
+ position: relative;
+ right: 58.33333%;
+ left: auto
+ }
+ .push-8 {
+ position: relative;
+ left: 66.66667%;
+ right: auto
+ }
+ .pull-8 {
+ position: relative;
+ right: 66.66667%;
+ left: auto
+ }
+ .push-9 {
+ position: relative;
+ left: 75%;
+ right: auto
+ }
+ .pull-9 {
+ position: relative;
+ right: 75%;
+ left: auto
+ }
+ .push-10 {
+ position: relative;
+ left: 83.33333%;
+ right: auto
+ }
+ .pull-10 {
+ position: relative;
+ right: 83.33333%;
+ left: auto
+ }
+ .push-11 {
+ position: relative;
+ left: 91.66667%;
+ right: auto
+ }
+ .pull-11 {
+ position: relative;
+ right: 91.66667%;
+ left: auto
+ }
+}
+
+@media only screen and (min-width:901px) {
+ .large-push-0 {
+ position: relative;
+ left: 0;
+ right: auto
+ }
+ .large-pull-0 {
+ position: relative;
+ right: 0;
+ left: auto
+ }
+ .large-push-1 {
+ position: relative;
+ left: 8.33333%;
+ right: auto
+ }
+ .large-pull-1 {
+ position: relative;
+ right: 8.33333%;
+ left: auto
+ }
+ .large-push-2 {
+ position: relative;
+ left: 16.66667%;
+ right: auto
+ }
+ .large-pull-2 {
+ position: relative;
+ right: 16.66667%;
+ left: auto
+ }
+ .large-push-3 {
+ position: relative;
+ left: 25%;
+ right: auto
+ }
+ .large-pull-3 {
+ position: relative;
+ right: 25%;
+ left: auto
+ }
+ .large-push-4 {
+ position: relative;
+ left: 33.33333%;
+ right: auto
+ }
+ .large-pull-4 {
+ position: relative;
+ right: 33.33333%;
+ left: auto
+ }
+ .large-push-5 {
+ position: relative;
+ left: 41.66667%;
+ right: auto
+ }
+ .large-pull-5 {
+ position: relative;
+ right: 41.66667%;
+ left: auto
+ }
+ .large-push-6 {
+ position: relative;
+ left: 50%;
+ right: auto
+ }
+ .large-pull-6 {
+ position: relative;
+ right: 50%;
+ left: auto
+ }
+ .large-push-7 {
+ position: relative;
+ left: 58.33333%;
+ right: auto
+ }
+ .large-pull-7 {
+ position: relative;
+ right: 58.33333%;
+ left: auto
+ }
+ .large-push-8 {
+ position: relative;
+ left: 66.66667%;
+ right: auto
+ }
+ .large-pull-8 {
+ position: relative;
+ right: 66.66667%;
+ left: auto
+ }
+ .large-push-9 {
+ position: relative;
+ left: 75%;
+ right: auto
+ }
+ .large-pull-9 {
+ position: relative;
+ right: 75%;
+ left: auto
+ }
+ .large-push-10 {
+ position: relative;
+ left: 83.33333%;
+ right: auto
+ }
+ .large-pull-10 {
+ position: relative;
+ right: 83.33333%;
+ left: auto
+ }
+ .large-push-11 {
+ position: relative;
+ left: 91.66667%;
+ right: auto
+ }
+ .large-pull-11 {
+ position: relative;
+ right: 91.66667%;
+ left: auto
+ }
+ .column,
+ .columns {
+ position: relative;
+ padding-left: .9375rem;
+ padding-right: .9375rem;
+ float: left
+ }
+ .large-1 {
+ width: 8.33333%
+ }
+ .large-2 {
+ width: 16.66667%
+ }
+ .large-3 {
+ width: 25%
+ }
+ .large-4 {
+ width: 33.33333%
+ }
+ .large-5 {
+ width: 41.66667%
+ }
+ .large-6 {
+ width: 50%
+ }
+ .large-7 {
+ width: 58.33333%
+ }
+ .large-8 {
+ width: 66.66667%
+ }
+ .large-9 {
+ width: 75%
+ }
+ .large-10 {
+ width: 83.33333%
+ }
+ .large-11 {
+ width: 91.66667%
+ }
+ .large-12 {
+ width: 100%
+ }
+ .large-offset-0 {
+ margin-left: 0!important
+ }
+ .large-offset-1 {
+ margin-left: 8.33333%!important
+ }
+ .large-offset-2 {
+ margin-left: 16.66667%!important
+ }
+ .large-offset-3 {
+ margin-left: 25%!important
+ }
+ .large-offset-4 {
+ margin-left: 33.33333%!important
+ }
+ .large-offset-5 {
+ margin-left: 41.66667%!important
+ }
+ .large-offset-6 {
+ margin-left: 50%!important
+ }
+ .large-offset-7 {
+ margin-left: 58.33333%!important
+ }
+ .large-offset-8 {
+ margin-left: 66.66667%!important
+ }
+ .large-offset-9 {
+ margin-left: 75%!important
+ }
+ .large-offset-10 {
+ margin-left: 83.33333%!important
+ }
+ .large-offset-11 {
+ margin-left: 91.66667%!important
+ }
+ .large-reset-order {
+ margin-left: 0;
+ margin-right: 0;
+ left: auto;
+ right: auto;
+ float: left
+ }
+ .column.large-centered,
+ .columns.large-centered {
+ margin-left: auto;
+ margin-right: auto;
+ float: none
+ }
+ .column.large-uncentered,
+ .columns.large-uncentered {
+ margin-left: 0;
+ margin-right: 0;
+ float: left
+ }
+ .column.large-centered:last-child,
+ .columns.large-centered:last-child {
+ float: none
+ }
+ .column.large-uncentered:last-child,
+ .columns.large-uncentered:last-child {
+ float: left
+ }
+ .column.large-uncentered.opposite,
+ .columns.large-uncentered.opposite {
+ float: right
+ }
+ .push-0 {
+ position: relative;
+ left: 0;
+ right: auto
+ }
+ .pull-0 {
+ position: relative;
+ right: 0;
+ left: auto
+ }
+ .push-1 {
+ position: relative;
+ left: 8.33333%;
+ right: auto
+ }
+ .pull-1 {
+ position: relative;
+ right: 8.33333%;
+ left: auto
+ }
+ .push-2 {
+ position: relative;
+ left: 16.66667%;
+ right: auto
+ }
+ .pull-2 {
+ position: relative;
+ right: 16.66667%;
+ left: auto
+ }
+ .push-3 {
+ position: relative;
+ left: 25%;
+ right: auto
+ }
+ .pull-3 {
+ position: relative;
+ right: 25%;
+ left: auto
+ }
+ .push-4 {
+ position: relative;
+ left: 33.33333%;
+ right: auto
+ }
+ .pull-4 {
+ position: relative;
+ right: 33.33333%;
+ left: auto
+ }
+ .push-5 {
+ position: relative;
+ left: 41.66667%;
+ right: auto
+ }
+ .pull-5 {
+ position: relative;
+ right: 41.66667%;
+ left: auto
+ }
+ .push-6 {
+ position: relative;
+ left: 50%;
+ right: auto
+ }
+ .pull-6 {
+ position: relative;
+ right: 50%;
+ left: auto
+ }
+ .push-7 {
+ position: relative;
+ left: 58.33333%;
+ right: auto
+ }
+ .pull-7 {
+ position: relative;
+ right: 58.33333%;
+ left: auto
+ }
+ .push-8 {
+ position: relative;
+ left: 66.66667%;
+ right: auto
+ }
+ .pull-8 {
+ position: relative;
+ right: 66.66667%;
+ left: auto
+ }
+ .push-9 {
+ position: relative;
+ left: 75%;
+ right: auto
+ }
+ .pull-9 {
+ position: relative;
+ right: 75%;
+ left: auto
+ }
+ .push-10 {
+ position: relative;
+ left: 83.33333%;
+ right: auto
+ }
+ .pull-10 {
+ position: relative;
+ right: 83.33333%;
+ left: auto
+ }
+ .push-11 {
+ position: relative;
+ left: 91.66667%;
+ right: auto
+ }
+ .pull-11 {
+ position: relative;
+ right: 91.66667%;
+ left: auto
+ }
+}
+
+@media only screen and (min-width:1101px) {
+ .xlarge-push-0 {
+ position: relative;
+ left: 0;
+ right: auto
+ }
+ .xlarge-pull-0 {
+ position: relative;
+ right: 0;
+ left: auto
+ }
+ .xlarge-push-1 {
+ position: relative;
+ left: 8.33333%;
+ right: auto
+ }
+ .xlarge-pull-1 {
+ position: relative;
+ right: 8.33333%;
+ left: auto
+ }
+ .xlarge-push-2 {
+ position: relative;
+ left: 16.66667%;
+ right: auto
+ }
+ .xlarge-pull-2 {
+ position: relative;
+ right: 16.66667%;
+ left: auto
+ }
+ .xlarge-push-3 {
+ position: relative;
+ left: 25%;
+ right: auto
+ }
+ .xlarge-pull-3 {
+ position: relative;
+ right: 25%;
+ left: auto
+ }
+ .xlarge-push-4 {
+ position: relative;
+ left: 33.33333%;
+ right: auto
+ }
+ .xlarge-pull-4 {
+ position: relative;
+ right: 33.33333%;
+ left: auto
+ }
+ .xlarge-push-5 {
+ position: relative;
+ left: 41.66667%;
+ right: auto
+ }
+ .xlarge-pull-5 {
+ position: relative;
+ right: 41.66667%;
+ left: auto
+ }
+ .xlarge-push-6 {
+ position: relative;
+ left: 50%;
+ right: auto
+ }
+ .xlarge-pull-6 {
+ position: relative;
+ right: 50%;
+ left: auto
+ }
+ .xlarge-push-7 {
+ position: relative;
+ left: 58.33333%;
+ right: auto
+ }
+ .xlarge-pull-7 {
+ position: relative;
+ right: 58.33333%;
+ left: auto
+ }
+ .xlarge-push-8 {
+ position: relative;
+ left: 66.66667%;
+ right: auto
+ }
+ .xlarge-pull-8 {
+ position: relative;
+ right: 66.66667%;
+ left: auto
+ }
+ .xlarge-push-9 {
+ position: relative;
+ left: 75%;
+ right: auto
+ }
+ .xlarge-pull-9 {
+ position: relative;
+ right: 75%;
+ left: auto
+ }
+ .xlarge-push-10 {
+ position: relative;
+ left: 83.33333%;
+ right: auto
+ }
+ .xlarge-pull-10 {
+ position: relative;
+ right: 83.33333%;
+ left: auto
+ }
+ .xlarge-push-11 {
+ position: relative;
+ left: 91.66667%;
+ right: auto
+ }
+ .xlarge-pull-11 {
+ position: relative;
+ right: 91.66667%;
+ left: auto
+ }
+ .column,
+ .columns {
+ position: relative;
+ padding-left: .9375rem;
+ padding-right: .9375rem;
+ float: left
+ }
+ .xlarge-1 {
+ width: 8.33333%
+ }
+ .xlarge-2 {
+ width: 16.66667%
+ }
+ .xlarge-3 {
+ width: 25%
+ }
+ .xlarge-4 {
+ width: 33.33333%
+ }
+ .xlarge-5 {
+ width: 41.66667%
+ }
+ .xlarge-6 {
+ width: 50%
+ }
+ .xlarge-7 {
+ width: 58.33333%
+ }
+ .xlarge-8 {
+ width: 66.66667%
+ }
+ .xlarge-9 {
+ width: 75%
+ }
+ .xlarge-10 {
+ width: 83.33333%
+ }
+ .xlarge-11 {
+ width: 91.66667%
+ }
+ .xlarge-12 {
+ width: 100%
+ }
+ .xlarge-offset-0 {
+ margin-left: 0!important
+ }
+ .xlarge-offset-1 {
+ margin-left: 8.33333%!important
+ }
+ .xlarge-offset-2 {
+ margin-left: 16.66667%!important
+ }
+ .xlarge-offset-3 {
+ margin-left: 25%!important
+ }
+ .xlarge-offset-4 {
+ margin-left: 33.33333%!important
+ }
+ .xlarge-offset-5 {
+ margin-left: 41.66667%!important
+ }
+ .xlarge-offset-6 {
+ margin-left: 50%!important
+ }
+ .xlarge-offset-7 {
+ margin-left: 58.33333%!important
+ }
+ .xlarge-offset-8 {
+ margin-left: 66.66667%!important
+ }
+ .xlarge-offset-9 {
+ margin-left: 75%!important
+ }
+ .xlarge-offset-10 {
+ margin-left: 83.33333%!important
+ }
+ .xlarge-offset-11 {
+ margin-left: 91.66667%!important
+ }
+ .xlarge-reset-order {
+ margin-left: 0;
+ margin-right: 0;
+ left: auto;
+ right: auto;
+ float: left
+ }
+ .column.xlarge-centered,
+ .columns.xlarge-centered {
+ margin-left: auto;
+ margin-right: auto;
+ float: none
+ }
+ .column.xlarge-uncentered,
+ .columns.xlarge-uncentered {
+ margin-left: 0;
+ margin-right: 0;
+ float: left
+ }
+ .column.xlarge-centered:last-child,
+ .columns.xlarge-centered:last-child {
+ float: none
+ }
+ .column.xlarge-uncentered:last-child,
+ .columns.xlarge-uncentered:last-child {
+ float: left
+ }
+ .column.xlarge-uncentered.opposite,
+ .columns.xlarge-uncentered.opposite {
+ float: right
+ }
+}
+
+@media only screen and (min-width:1301px) {
+ .xxlarge-push-0 {
+ position: relative;
+ left: 0;
+ right: auto
+ }
+ .xxlarge-pull-0 {
+ position: relative;
+ right: 0;
+ left: auto
+ }
+ .xxlarge-push-1 {
+ position: relative;
+ left: 8.33333%;
+ right: auto
+ }
+ .xxlarge-pull-1 {
+ position: relative;
+ right: 8.33333%;
+ left: auto
+ }
+ .xxlarge-push-2 {
+ position: relative;
+ left: 16.66667%;
+ right: auto
+ }
+ .xxlarge-pull-2 {
+ position: relative;
+ right: 16.66667%;
+ left: auto
+ }
+ .xxlarge-push-3 {
+ position: relative;
+ left: 25%;
+ right: auto
+ }
+ .xxlarge-pull-3 {
+ position: relative;
+ right: 25%;
+ left: auto
+ }
+ .xxlarge-push-4 {
+ position: relative;
+ left: 33.33333%;
+ right: auto
+ }
+ .xxlarge-pull-4 {
+ position: relative;
+ right: 33.33333%;
+ left: auto
+ }
+ .xxlarge-push-5 {
+ position: relative;
+ left: 41.66667%;
+ right: auto
+ }
+ .xxlarge-pull-5 {
+ position: relative;
+ right: 41.66667%;
+ left: auto
+ }
+ .xxlarge-push-6 {
+ position: relative;
+ left: 50%;
+ right: auto
+ }
+ .xxlarge-pull-6 {
+ position: relative;
+ right: 50%;
+ left: auto
+ }
+ .xxlarge-push-7 {
+ position: relative;
+ left: 58.33333%;
+ right: auto
+ }
+ .xxlarge-pull-7 {
+ position: relative;
+ right: 58.33333%;
+ left: auto
+ }
+ .xxlarge-push-8 {
+ position: relative;
+ left: 66.66667%;
+ right: auto
+ }
+ .xxlarge-pull-8 {
+ position: relative;
+ right: 66.66667%;
+ left: auto
+ }
+ .xxlarge-push-9 {
+ position: relative;
+ left: 75%;
+ right: auto
+ }
+ .xxlarge-pull-9 {
+ position: relative;
+ right: 75%;
+ left: auto
+ }
+ .xxlarge-push-10 {
+ position: relative;
+ left: 83.33333%;
+ right: auto
+ }
+ .xxlarge-pull-10 {
+ position: relative;
+ right: 83.33333%;
+ left: auto
+ }
+ .xxlarge-push-11 {
+ position: relative;
+ left: 91.66667%;
+ right: auto
+ }
+ .xxlarge-pull-11 {
+ position: relative;
+ right: 91.66667%;
+ left: auto
+ }
+ .column,
+ .columns {
+ position: relative;
+ padding-left: .9375rem;
+ padding-right: .9375rem;
+ float: left
+ }
+ .xxlarge-1 {
+ width: 8.33333%
+ }
+ .xxlarge-2 {
+ width: 16.66667%
+ }
+ .xxlarge-3 {
+ width: 25%
+ }
+ .xxlarge-4 {
+ width: 33.33333%
+ }
+ .xxlarge-5 {
+ width: 41.66667%
+ }
+ .xxlarge-6 {
+ width: 50%
+ }
+ .xxlarge-7 {
+ width: 58.33333%
+ }
+ .xxlarge-8 {
+ width: 66.66667%
+ }
+ .xxlarge-9 {
+ width: 75%
+ }
+ .xxlarge-10 {
+ width: 83.33333%
+ }
+ .xxlarge-11 {
+ width: 91.66667%
+ }
+ .xxlarge-12 {
+ width: 100%
+ }
+ .xxlarge-offset-0 {
+ margin-left: 0!important
+ }
+ .xxlarge-offset-1 {
+ margin-left: 8.33333%!important
+ }
+ .xxlarge-offset-2 {
+ margin-left: 16.66667%!important
+ }
+ .xxlarge-offset-3 {
+ margin-left: 25%!important
+ }
+ .xxlarge-offset-4 {
+ margin-left: 33.33333%!important
+ }
+ .xxlarge-offset-5 {
+ margin-left: 41.66667%!important
+ }
+ .xxlarge-offset-6 {
+ margin-left: 50%!important
+ }
+ .xxlarge-offset-7 {
+ margin-left: 58.33333%!important
+ }
+ .xxlarge-offset-8 {
+ margin-left: 66.66667%!important
+ }
+ .xxlarge-offset-9 {
+ margin-left: 75%!important
+ }
+ .xxlarge-offset-10 {
+ margin-left: 83.33333%!important
+ }
+ .xxlarge-offset-11 {
+ margin-left: 91.66667%!important
+ }
+ .xxlarge-reset-order {
+ margin-left: 0;
+ margin-right: 0;
+ left: auto;
+ right: auto;
+ float: left
+ }
+ .column.xxlarge-centered,
+ .columns.xxlarge-centered {
+ margin-left: auto;
+ margin-right: auto;
+ float: none
+ }
+ .column.xxlarge-uncentered,
+ .columns.xxlarge-uncentered {
+ margin-left: 0;
+ margin-right: 0;
+ float: left
+ }
+ .column.xxlarge-centered:last-child,
+ .columns.xxlarge-centered:last-child {
+ float: none
+ }
+ .column.xxlarge-uncentered:last-child,
+ .columns.xxlarge-uncentered:last-child {
+ float: left
+ }
+ .column.xxlarge-uncentered.opposite,
+ .columns.xxlarge-uncentered.opposite {
+ float: right
+ }
+}
+
+[class*=block-grid-] {
+ display: block;
+ padding: 0;
+ margin: 0 -.625rem
+}
+
+[class*=block-grid-]:after,
+[class*=block-grid-]:before {
+ content: " ";
+ display: table
+}
+
+[class*=block-grid-]:after {
+ clear: both
+}
+
+[class*=block-grid-]>li {
+ display: block;
+ height: auto;
+ float: left;
+ padding: 0 .625rem 1.25rem
+}
+
+@media only screen and (min-width:501px) {
+ .small-block-grid-1>li {
+ width: 100%;
+ list-style: none
+ }
+ .small-block-grid-1>li:nth-of-type(1n) {
+ clear: none
+ }
+ .small-block-grid-1>li:nth-of-type(1n+1) {
+ clear: both
+ }
+ .small-block-grid-2>li {
+ width: 50%;
+ list-style: none
+ }
+ .small-block-grid-2>li:nth-of-type(1n) {
+ clear: none
+ }
+ .small-block-grid-2>li:nth-of-type(2n+1) {
+ clear: both
+ }
+ .small-block-grid-3>li {
+ width: 33.33333%;
+ list-style: none
+ }
+ .small-block-grid-3>li:nth-of-type(1n) {
+ clear: none
+ }
+ .small-block-grid-3>li:nth-of-type(3n+1) {
+ clear: both
+ }
+ .small-block-grid-4>li {
+ width: 25%;
+ list-style: none
+ }
+ .small-block-grid-4>li:nth-of-type(1n) {
+ clear: none
+ }
+ .small-block-grid-4>li:nth-of-type(4n+1) {
+ clear: both
+ }
+ .small-block-grid-5>li {
+ width: 20%;
+ list-style: none
+ }
+ .small-block-grid-5>li:nth-of-type(1n) {
+ clear: none
+ }
+ .small-block-grid-5>li:nth-of-type(5n+1) {
+ clear: both
+ }
+ .small-block-grid-6>li {
+ width: 16.66667%;
+ list-style: none
+ }
+ .small-block-grid-6>li:nth-of-type(1n) {
+ clear: none
+ }
+ .small-block-grid-6>li:nth-of-type(6n+1) {
+ clear: both
+ }
+ .small-block-grid-7>li {
+ width: 14.28571%;
+ list-style: none
+ }
+ .small-block-grid-7>li:nth-of-type(1n) {
+ clear: none
+ }
+ .small-block-grid-7>li:nth-of-type(7n+1) {
+ clear: both
+ }
+ .small-block-grid-8>li {
+ width: 12.5%;
+ list-style: none
+ }
+ .small-block-grid-8>li:nth-of-type(1n) {
+ clear: none
+ }
+ .small-block-grid-8>li:nth-of-type(8n+1) {
+ clear: both
+ }
+ .small-block-grid-9>li {
+ width: 11.11111%;
+ list-style: none
+ }
+ .small-block-grid-9>li:nth-of-type(1n) {
+ clear: none
+ }
+ .small-block-grid-9>li:nth-of-type(9n+1) {
+ clear: both
+ }
+ .small-block-grid-10>li {
+ width: 10%;
+ list-style: none
+ }
+ .small-block-grid-10>li:nth-of-type(1n) {
+ clear: none
+ }
+ .small-block-grid-10>li:nth-of-type(10n+1) {
+ clear: both
+ }
+ .small-block-grid-11>li {
+ width: 9.09091%;
+ list-style: none
+ }
+ .small-block-grid-11>li:nth-of-type(1n) {
+ clear: none
+ }
+ .small-block-grid-11>li:nth-of-type(11n+1) {
+ clear: both
+ }
+ .small-block-grid-12>li {
+ width: 8.33333%;
+ list-style: none
+ }
+ .small-block-grid-12>li:nth-of-type(1n) {
+ clear: none
+ }
+ .small-block-grid-12>li:nth-of-type(12n+1) {
+ clear: both
+ }
+}
+
+@media only screen and (min-width:701px) {
+ .medium-block-grid-1>li {
+ width: 100%;
+ list-style: none
+ }
+ .medium-block-grid-1>li:nth-of-type(1n) {
+ clear: none
+ }
+ .medium-block-grid-1>li:nth-of-type(1n+1) {
+ clear: both
+ }
+ .medium-block-grid-2>li {
+ width: 50%;
+ list-style: none
+ }
+ .medium-block-grid-2>li:nth-of-type(1n) {
+ clear: none
+ }
+ .medium-block-grid-2>li:nth-of-type(2n+1) {
+ clear: both
+ }
+ .medium-block-grid-3>li {
+ width: 33.33333%;
+ list-style: none
+ }
+ .medium-block-grid-3>li:nth-of-type(1n) {
+ clear: none
+ }
+ .medium-block-grid-3>li:nth-of-type(3n+1) {
+ clear: both
+ }
+ .medium-block-grid-4>li {
+ width: 25%;
+ list-style: none
+ }
+ .medium-block-grid-4>li:nth-of-type(1n) {
+ clear: none
+ }
+ .medium-block-grid-4>li:nth-of-type(4n+1) {
+ clear: both
+ }
+ .medium-block-grid-5>li {
+ width: 20%;
+ list-style: none
+ }
+ .medium-block-grid-5>li:nth-of-type(1n) {
+ clear: none
+ }
+ .medium-block-grid-5>li:nth-of-type(5n+1) {
+ clear: both
+ }
+ .medium-block-grid-6>li {
+ width: 16.66667%;
+ list-style: none
+ }
+ .medium-block-grid-6>li:nth-of-type(1n) {
+ clear: none
+ }
+ .medium-block-grid-6>li:nth-of-type(6n+1) {
+ clear: both
+ }
+ .medium-block-grid-7>li {
+ width: 14.28571%;
+ list-style: none
+ }
+ .medium-block-grid-7>li:nth-of-type(1n) {
+ clear: none
+ }
+ .medium-block-grid-7>li:nth-of-type(7n+1) {
+ clear: both
+ }
+ .medium-block-grid-8>li {
+ width: 12.5%;
+ list-style: none
+ }
+ .medium-block-grid-8>li:nth-of-type(1n) {
+ clear: none
+ }
+ .medium-block-grid-8>li:nth-of-type(8n+1) {
+ clear: both
+ }
+ .medium-block-grid-9>li {
+ width: 11.11111%;
+ list-style: none
+ }
+ .medium-block-grid-9>li:nth-of-type(1n) {
+ clear: none
+ }
+ .medium-block-grid-9>li:nth-of-type(9n+1) {
+ clear: both
+ }
+ .medium-block-grid-10>li {
+ width: 10%;
+ list-style: none
+ }
+ .medium-block-grid-10>li:nth-of-type(1n) {
+ clear: none
+ }
+ .medium-block-grid-10>li:nth-of-type(10n+1) {
+ clear: both
+ }
+ .medium-block-grid-11>li {
+ width: 9.09091%;
+ list-style: none
+ }
+ .medium-block-grid-11>li:nth-of-type(1n) {
+ clear: none
+ }
+ .medium-block-grid-11>li:nth-of-type(11n+1) {
+ clear: both
+ }
+ .medium-block-grid-12>li {
+ width: 8.33333%;
+ list-style: none
+ }
+ .medium-block-grid-12>li:nth-of-type(1n) {
+ clear: none
+ }
+ .medium-block-grid-12>li:nth-of-type(12n+1) {
+ clear: both
+ }
+}
+
+@media only screen and (min-width:901px) {
+ .large-block-grid-1>li {
+ width: 100%;
+ list-style: none
+ }
+ .large-block-grid-1>li:nth-of-type(1n) {
+ clear: none
+ }
+ .large-block-grid-1>li:nth-of-type(1n+1) {
+ clear: both
+ }
+ .large-block-grid-2>li {
+ width: 50%;
+ list-style: none
+ }
+ .large-block-grid-2>li:nth-of-type(1n) {
+ clear: none
+ }
+ .large-block-grid-2>li:nth-of-type(2n+1) {
+ clear: both
+ }
+ .large-block-grid-3>li {
+ width: 33.33333%;
+ list-style: none
+ }
+ .large-block-grid-3>li:nth-of-type(1n) {
+ clear: none
+ }
+ .large-block-grid-3>li:nth-of-type(3n+1) {
+ clear: both
+ }
+ .large-block-grid-4>li {
+ width: 25%;
+ list-style: none
+ }
+ .large-block-grid-4>li:nth-of-type(1n) {
+ clear: none
+ }
+ .large-block-grid-4>li:nth-of-type(4n+1) {
+ clear: both
+ }
+ .large-block-grid-5>li {
+ width: 20%;
+ list-style: none
+ }
+ .large-block-grid-5>li:nth-of-type(1n) {
+ clear: none
+ }
+ .large-block-grid-5>li:nth-of-type(5n+1) {
+ clear: both
+ }
+ .large-block-grid-6>li {
+ width: 16.66667%;
+ list-style: none
+ }
+ .large-block-grid-6>li:nth-of-type(1n) {
+ clear: none
+ }
+ .large-block-grid-6>li:nth-of-type(6n+1) {
+ clear: both
+ }
+ .large-block-grid-7>li {
+ width: 14.28571%;
+ list-style: none
+ }
+ .large-block-grid-7>li:nth-of-type(1n) {
+ clear: none
+ }
+ .large-block-grid-7>li:nth-of-type(7n+1) {
+ clear: both
+ }
+ .large-block-grid-8>li {
+ width: 12.5%;
+ list-style: none
+ }
+ .large-block-grid-8>li:nth-of-type(1n) {
+ clear: none
+ }
+ .large-block-grid-8>li:nth-of-type(8n+1) {
+ clear: both
+ }
+ .large-block-grid-9>li {
+ width: 11.11111%;
+ list-style: none
+ }
+ .large-block-grid-9>li:nth-of-type(1n) {
+ clear: none
+ }
+ .large-block-grid-9>li:nth-of-type(9n+1) {
+ clear: both
+ }
+ .large-block-grid-10>li {
+ width: 10%;
+ list-style: none
+ }
+ .large-block-grid-10>li:nth-of-type(1n) {
+ clear: none
+ }
+ .large-block-grid-10>li:nth-of-type(10n+1) {
+ clear: both
+ }
+ .large-block-grid-11>li {
+ width: 9.09091%;
+ list-style: none
+ }
+ .large-block-grid-11>li:nth-of-type(1n) {
+ clear: none
+ }
+ .large-block-grid-11>li:nth-of-type(11n+1) {
+ clear: both
+ }
+ .large-block-grid-12>li {
+ width: 8.33333%;
+ list-style: none
+ }
+ .large-block-grid-12>li:nth-of-type(1n) {
+ clear: none
+ }
+ .large-block-grid-12>li:nth-of-type(12n+1) {
+ clear: both
+ }
+}
+
+.button,
+button {
+ border-style: solid;
+ border-width: 0;
+ cursor: pointer;
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ font-weight: 400;
+ line-height: normal;
+ margin: 0 0 1.25rem;
+ position: relative;
+ text-decoration: none;
+ text-align: center;
+ -webkit-appearance: none;
+ -webkit-border-radius: 0;
+ display: inline-block;
+ font-size: 1rem;
+ background-color: #008cba;
+ border-color: #007095;
+ color: #fff
+}
+
+.button:focus,
+.button:hover,
+button:focus,
+button:hover {
+ background-color: #007095;
+ color: #fff
+}
+
+.button.secondary,
+button.secondary {
+ background-color: #e7e7e7;
+ border-color: #b9b9b9;
+ color: #333
+}
+
+.button.secondary:focus,
+.button.secondary:hover,
+button.secondary:focus,
+button.secondary:hover {
+ background-color: #b9b9b9;
+ color: #333
+}
+
+.button.success,
+button.success {
+ background-color: #43ac6a;
+ border-color: #368a55;
+ color: #fff
+}
+
+.button.success:focus,
+.button.success:hover,
+button.success:focus,
+button.success:hover {
+ background-color: #368a55;
+ color: #fff
+}
+
+.button.alert,
+button.alert {
+ background-color: #f04124;
+ border-color: #cf2a0e;
+ color: #fff
+}
+
+.button.alert:focus,
+.button.alert:hover,
+button.alert:focus,
+button.alert:hover {
+ background-color: #cf2a0e;
+ color: #fff
+}
+
+.button.warning,
+button.warning {
+ background-color: #f08a24;
+ border-color: #cf6e0e;
+ color: #fff
+}
+
+.button.warning:focus,
+.button.warning:hover,
+button.warning:focus,
+button.warning:hover {
+ background-color: #cf6e0e;
+ color: #fff
+}
+
+.button.info,
+button.info {
+ background-color: #a0d3e8;
+ border-color: #61b6d9;
+ color: #333
+}
+
+.button.info:focus,
+.button.info:hover,
+button.info:focus,
+button.info:hover {
+ background-color: #61b6d9;
+ color: #fff
+}
+
+.button.large,
+button.large {
+ padding: 1.125rem 2.25rem 1.1875rem;
+ font-size: 1.25rem
+}
+
+.button.small,
+button.small {
+ padding: .875rem 1.75rem .9375rem;
+ font-size: .8125rem
+}
+
+.button.tiny,
+button.tiny {
+ padding: .625rem 1.25rem .6875rem;
+ font-size: .6875rem
+}
+
+.button.expand,
+button.expand {
+ padding-right: 0;
+ padding-left: 0;
+ width: 100%
+}
+
+.button.left-align,
+button.left-align {
+ text-align: left;
+ text-indent: .75rem
+}
+
+.button.right-align,
+button.right-align {
+ text-align: right;
+ padding-right: .75rem
+}
+
+.button.radius,
+button.radius {
+ border-radius: 3px
+}
+
+.button.round,
+button.round {
+ border-radius: 1000px
+}
+
+.button.disabled,
+.button[disabled],
+button.disabled,
+button[disabled] {
+ background-color: #008cba;
+ border-color: #007095;
+ color: #fff;
+ cursor: default;
+ opacity: .7;
+ box-shadow: none
+}
+
+.button.disabled:focus,
+.button.disabled:hover,
+.button[disabled]:focus,
+.button[disabled]:hover,
+button.disabled:focus,
+button.disabled:hover,
+button[disabled]:focus,
+button[disabled]:hover {
+ color: #fff;
+ background-color: #008cba
+}
+
+.button.disabled.secondary,
+.button[disabled].secondary,
+button.disabled.secondary,
+button[disabled].secondary {
+ background-color: #e7e7e7;
+ border-color: #b9b9b9;
+ color: #333;
+ cursor: default;
+ opacity: .7;
+ box-shadow: none
+}
+
+.button.disabled.secondary:focus,
+.button.disabled.secondary:hover,
+.button[disabled].secondary:focus,
+.button[disabled].secondary:hover,
+button.disabled.secondary:focus,
+button.disabled.secondary:hover,
+button[disabled].secondary:focus,
+button[disabled].secondary:hover {
+ color: #333;
+ background-color: #e7e7e7
+}
+
+.button.disabled.success,
+.button[disabled].success,
+button.disabled.success,
+button[disabled].success {
+ background-color: #43ac6a;
+ border-color: #368a55;
+ color: #fff;
+ cursor: default;
+ opacity: .7;
+ box-shadow: none
+}
+
+.button.disabled.success:focus,
+.button.disabled.success:hover,
+.button[disabled].success:focus,
+.button[disabled].success:hover,
+button.disabled.success:focus,
+button.disabled.success:hover,
+button[disabled].success:focus,
+button[disabled].success:hover {
+ color: #fff;
+ background-color: #43ac6a
+}
+
+.button.disabled.alert,
+.button[disabled].alert,
+button.disabled.alert,
+button[disabled].alert {
+ background-color: #f04124;
+ border-color: #cf2a0e;
+ color: #fff;
+ cursor: default;
+ opacity: .7;
+ box-shadow: none
+}
+
+.button.disabled.alert:focus,
+.button.disabled.alert:hover,
+.button[disabled].alert:focus,
+.button[disabled].alert:hover,
+button.disabled.alert:focus,
+button.disabled.alert:hover,
+button[disabled].alert:focus,
+button[disabled].alert:hover {
+ color: #fff;
+ background-color: #f04124
+}
+
+.button.disabled.warning,
+.button[disabled].warning,
+button.disabled.warning,
+button[disabled].warning {
+ background-color: #f08a24;
+ border-color: #cf6e0e;
+ color: #fff;
+ cursor: default;
+ opacity: .7;
+ box-shadow: none
+}
+
+.button.disabled.warning:focus,
+.button.disabled.warning:hover,
+.button[disabled].warning:focus,
+.button[disabled].warning:hover,
+button.disabled.warning:focus,
+button.disabled.warning:hover,
+button[disabled].warning:focus,
+button[disabled].warning:hover {
+ color: #fff;
+ background-color: #f08a24
+}
+
+.button.disabled.info,
+.button[disabled].info,
+button.disabled.info,
+button[disabled].info {
+ background-color: #a0d3e8;
+ border-color: #61b6d9;
+ color: #333;
+ cursor: default;
+ opacity: .7;
+ box-shadow: none
+}
+
+.button.disabled.info:focus,
+.button.disabled.info:hover,
+.button[disabled].info:focus,
+.button[disabled].info:hover,
+button.disabled.info:focus,
+button.disabled.info:hover,
+button[disabled].info:focus,
+button[disabled].info:hover {
+ color: #fff;
+ background-color: #a0d3e8
+}
+
+button::-moz-focus-inner {
+ border: 0;
+ padding: 0
+}
+
+@media only screen and (min-width:701px) {
+ .button,
+ button {
+ display: inline-block
+ }
+}
+
+.button-group {
+ list-style: none;
+ margin: 0;
+ left: 0
+}
+
+.button-group:after,
+.button-group:before {
+ content: " ";
+ display: table
+}
+
+.button-group:after {
+ clear: both
+}
+
+.button-group>li {
+ margin: 0 -2px;
+ display: inline-block
+}
+
+.button-group>li .button,
+.button-group>li>button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, .5)
+}
+
+.button-group>li:first-child .button,
+.button-group>li:first-child button {
+ border-left: 0
+}
+
+.button-group.stack>li {
+ display: inline-block;
+ display: block;
+ margin: 0;
+ float: none
+}
+
+.button-group.stack>li .button,
+.button-group.stack>li>button {
+ border-left: 1px solid
+}
+
+.button-group.stack>li:first-child .button,
+.button-group.stack>li:first-child button {
+ border-left: 0
+}
+
+.button-group.stack>li .button,
+.button-group.stack>li>button {
+ border-top: 1px solid;
+ border-color: rgba(255, 255, 255, .5);
+ border-left-width: 0;
+ margin: 0;
+ display: block
+}
+
+.button-group.stack>li:first-child .button,
+.button-group.stack>li:first-child button {
+ border-top: 0
+}
+
+.button-group.stack-for-small>li {
+ margin: 0 -2px;
+ display: inline-block
+}
+
+.button-group.stack-for-small>li .button,
+.button-group.stack-for-small>li>button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, .5)
+}
+
+.button-group.stack-for-small>li:first-child .button,
+.button-group.stack-for-small>li:first-child button {
+ border-left: 0
+}
+
+@media only screen and (min-width:501px) and (max-width:700px) {
+ .button-group.stack-for-small>li {
+ display: inline-block;
+ display: block;
+ margin: 0
+ }
+ .button-group.stack-for-small>li .button,
+ .button-group.stack-for-small>li>button {
+ border-left: 1px solid
+ }
+ .button-group.stack-for-small>li:first-child .button,
+ .button-group.stack-for-small>li:first-child button {
+ border-left: 0
+ }
+ .button-group.stack-for-small>li .button,
+ .button-group.stack-for-small>li>button {
+ border-top: 1px solid;
+ border-color: rgba(255, 255, 255, .5);
+ border-left-width: 0;
+ margin: 0;
+ display: block
+ }
+ .button-group.stack-for-small>li:first-child .button,
+ .button-group.stack-for-small>li:first-child button {
+ border-top: 0
+ }
+}
+
+.button-group.radius>* {
+ margin: 0 -2px;
+ display: inline-block
+}
+
+.button-group.radius>* .button,
+.button-group.radius>*>button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, .5)
+}
+
+.button-group.radius>:first-child .button,
+.button-group.radius>:first-child button {
+ border-left: 0
+}
+
+.button-group.radius>*,
+.button-group.radius>*>.button,
+.button-group.radius>*>a,
+.button-group.radius>*>button {
+ border-radius: 0
+}
+
+.button-group.radius>:first-child,
+.button-group.radius>:first-child>.button,
+.button-group.radius>:first-child>a,
+.button-group.radius>:first-child>button {
+ -webkit-border-bottom-left-radius: 3px;
+ -webkit-border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ border-top-left-radius: 3px
+}
+
+.button-group.radius>:last-child,
+.button-group.radius>:last-child>.button,
+.button-group.radius>:last-child>a,
+.button-group.radius>:last-child>button {
+ -webkit-border-bottom-right-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px
+}
+
+.button-group.radius.stack>* {
+ display: inline-block;
+ display: block;
+ margin: 0
+}
+
+.button-group.radius.stack>* .button,
+.button-group.radius.stack>*>button {
+ border-left: 1px solid
+}
+
+.button-group.radius.stack>:first-child .button,
+.button-group.radius.stack>:first-child button {
+ border-left: 0
+}
+
+.button-group.radius.stack>* .button,
+.button-group.radius.stack>*>button {
+ border-top: 1px solid;
+ border-color: rgba(255, 255, 255, .5);
+ border-left-width: 0;
+ margin: 0;
+ display: block
+}
+
+.button-group.radius.stack>:first-child .button,
+.button-group.radius.stack>:first-child button {
+ border-top: 0
+}
+
+.button-group.radius.stack>*,
+.button-group.radius.stack>*>.button,
+.button-group.radius.stack>*>a,
+.button-group.radius.stack>*>button {
+ border-radius: 0
+}
+
+.button-group.radius.stack>:first-child,
+.button-group.radius.stack>:first-child>.button,
+.button-group.radius.stack>:first-child>a,
+.button-group.radius.stack>:first-child>button {
+ -webkit-top-left-radius: 3px;
+ -webkit-top-right-radius: 3px;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px
+}
+
+.button-group.radius.stack>:last-child,
+.button-group.radius.stack>:last-child>.button,
+.button-group.radius.stack>:last-child>a,
+.button-group.radius.stack>:last-child>button {
+ -webkit-bottom-left-radius: 3px;
+ -webkit-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px
+}
+
+@media only screen and (min-width:701px) {
+ .button-group.radius.stack-for-small>* {
+ margin: 0 -2px;
+ display: inline-block
+ }
+ .button-group.radius.stack-for-small>* .button,
+ .button-group.radius.stack-for-small>*>button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, .5)
+ }
+ .button-group.radius.stack-for-small>:first-child .button,
+ .button-group.radius.stack-for-small>:first-child button {
+ border-left: 0
+ }
+ .button-group.radius.stack-for-small>*,
+ .button-group.radius.stack-for-small>*>.button,
+ .button-group.radius.stack-for-small>*>a,
+ .button-group.radius.stack-for-small>*>button {
+ border-radius: 0
+ }
+ .button-group.radius.stack-for-small>:first-child,
+ .button-group.radius.stack-for-small>:first-child>.button,
+ .button-group.radius.stack-for-small>:first-child>a,
+ .button-group.radius.stack-for-small>:first-child>button {
+ -webkit-border-bottom-left-radius: 3px;
+ -webkit-border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ border-top-left-radius: 3px
+ }
+ .button-group.radius.stack-for-small>:last-child,
+ .button-group.radius.stack-for-small>:last-child>.button,
+ .button-group.radius.stack-for-small>:last-child>a,
+ .button-group.radius.stack-for-small>:last-child>button {
+ -webkit-border-bottom-right-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px
+ }
+}
+
+@media only screen and (min-width:501px) and (max-width:700px) {
+ .button-group.radius.stack-for-small>* {
+ display: inline-block;
+ display: block;
+ margin: 0
+ }
+ .button-group.radius.stack-for-small>* .button,
+ .button-group.radius.stack-for-small>*>button {
+ border-left: 1px solid
+ }
+ .button-group.radius.stack-for-small>:first-child .button,
+ .button-group.radius.stack-for-small>:first-child button {
+ border-left: 0
+ }
+ .button-group.radius.stack-for-small>* .button,
+ .button-group.radius.stack-for-small>*>button {
+ border-top: 1px solid;
+ border-color: rgba(255, 255, 255, .5);
+ border-left-width: 0;
+ margin: 0;
+ display: block
+ }
+ .button-group.radius.stack-for-small>:first-child .button,
+ .button-group.radius.stack-for-small>:first-child button {
+ border-top: 0
+ }
+ .button-group.radius.stack-for-small>*,
+ .button-group.radius.stack-for-small>*>.button,
+ .button-group.radius.stack-for-small>*>a,
+ .button-group.radius.stack-for-small>*>button {
+ border-radius: 0
+ }
+ .button-group.radius.stack-for-small>:first-child,
+ .button-group.radius.stack-for-small>:first-child>.button,
+ .button-group.radius.stack-for-small>:first-child>a,
+ .button-group.radius.stack-for-small>:first-child>button {
+ -webkit-top-left-radius: 3px;
+ -webkit-top-right-radius: 3px;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px
+ }
+ .button-group.radius.stack-for-small>:last-child,
+ .button-group.radius.stack-for-small>:last-child>.button,
+ .button-group.radius.stack-for-small>:last-child>a,
+ .button-group.radius.stack-for-small>:last-child>button {
+ -webkit-bottom-left-radius: 3px;
+ -webkit-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px
+ }
+}
+
+.button-group.round>* {
+ margin: 0 -2px;
+ display: inline-block
+}
+
+.button-group.round>* .button,
+.button-group.round>*>button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, .5)
+}
+
+.button-group.round>:first-child .button,
+.button-group.round>:first-child button {
+ border-left: 0
+}
+
+.button-group.round>*,
+.button-group.round>*>.button,
+.button-group.round>*>a,
+.button-group.round>*>button {
+ border-radius: 0
+}
+
+.button-group.round>:first-child,
+.button-group.round>:first-child>.button,
+.button-group.round>:first-child>a,
+.button-group.round>:first-child>button {
+ -webkit-border-bottom-left-radius: 1000px;
+ -webkit-border-top-left-radius: 1000px;
+ border-bottom-left-radius: 1000px;
+ border-top-left-radius: 1000px
+}
+
+.button-group.round>:last-child,
+.button-group.round>:last-child>.button,
+.button-group.round>:last-child>a,
+.button-group.round>:last-child>button {
+ -webkit-border-bottom-right-radius: 1000px;
+ -webkit-border-top-right-radius: 1000px;
+ border-bottom-right-radius: 1000px;
+ border-top-right-radius: 1000px
+}
+
+.button-group.round.stack>* {
+ display: inline-block;
+ display: block;
+ margin: 0
+}
+
+.button-group.round.stack>* .button,
+.button-group.round.stack>*>button {
+ border-left: 1px solid
+}
+
+.button-group.round.stack>:first-child .button,
+.button-group.round.stack>:first-child button {
+ border-left: 0
+}
+
+.button-group.round.stack>* .button,
+.button-group.round.stack>*>button {
+ border-top: 1px solid;
+ border-color: rgba(255, 255, 255, .5);
+ border-left-width: 0;
+ margin: 0;
+ display: block
+}
+
+.button-group.round.stack>:first-child .button,
+.button-group.round.stack>:first-child button {
+ border-top: 0
+}
+
+.button-group.round.stack>*,
+.button-group.round.stack>*>.button,
+.button-group.round.stack>*>a,
+.button-group.round.stack>*>button {
+ border-radius: 0
+}
+
+.button-group.round.stack>:first-child,
+.button-group.round.stack>:first-child>.button,
+.button-group.round.stack>:first-child>a,
+.button-group.round.stack>:first-child>button {
+ -webkit-top-left-radius: 1rem;
+ -webkit-top-right-radius: 1rem;
+ border-top-left-radius: 1rem;
+ border-top-right-radius: 1rem
+}
+
+.button-group.round.stack>:last-child,
+.button-group.round.stack>:last-child>.button,
+.button-group.round.stack>:last-child>a,
+.button-group.round.stack>:last-child>button {
+ -webkit-bottom-left-radius: 1rem;
+ -webkit-bottom-right-radius: 1rem;
+ border-bottom-left-radius: 1rem;
+ border-bottom-right-radius: 1rem
+}
+
+@media only screen and (min-width:701px) {
+ .button-group.round.stack-for-small>* {
+ margin: 0 -2px;
+ display: inline-block
+ }
+ .button-group.round.stack-for-small>* .button,
+ .button-group.round.stack-for-small>*>button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, .5)
+ }
+ .button-group.round.stack-for-small>:first-child .button,
+ .button-group.round.stack-for-small>:first-child button {
+ border-left: 0
+ }
+ .button-group.round.stack-for-small>*,
+ .button-group.round.stack-for-small>*>.button,
+ .button-group.round.stack-for-small>*>a,
+ .button-group.round.stack-for-small>*>button {
+ border-radius: 0
+ }
+ .button-group.round.stack-for-small>:first-child,
+ .button-group.round.stack-for-small>:first-child>.button,
+ .button-group.round.stack-for-small>:first-child>a,
+ .button-group.round.stack-for-small>:first-child>button {
+ -webkit-border-bottom-left-radius: 1000px;
+ -webkit-border-top-left-radius: 1000px;
+ border-bottom-left-radius: 1000px;
+ border-top-left-radius: 1000px
+ }
+ .button-group.round.stack-for-small>:last-child,
+ .button-group.round.stack-for-small>:last-child>.button,
+ .button-group.round.stack-for-small>:last-child>a,
+ .button-group.round.stack-for-small>:last-child>button {
+ -webkit-border-bottom-right-radius: 1000px;
+ -webkit-border-top-right-radius: 1000px;
+ border-bottom-right-radius: 1000px;
+ border-top-right-radius: 1000px
+ }
+}
+
+@media only screen and (min-width:501px) and (max-width:700px) {
+ .button-group.round.stack-for-small>* {
+ display: inline-block;
+ display: block;
+ margin: 0
+ }
+ .button-group.round.stack-for-small>* .button,
+ .button-group.round.stack-for-small>*>button {
+ border-left: 1px solid
+ }
+ .button-group.round.stack-for-small>:first-child .button,
+ .button-group.round.stack-for-small>:first-child button {
+ border-left: 0
+ }
+ .button-group.round.stack-for-small>* .button,
+ .button-group.round.stack-for-small>*>button {
+ border-top: 1px solid;
+ border-color: rgba(255, 255, 255, .5);
+ border-left-width: 0;
+ margin: 0;
+ display: block
+ }
+ .button-group.round.stack-for-small>:first-child .button,
+ .button-group.round.stack-for-small>:first-child button {
+ border-top: 0
+ }
+ .button-group.round.stack-for-small>*,
+ .button-group.round.stack-for-small>*>.button,
+ .button-group.round.stack-for-small>*>a,
+ .button-group.round.stack-for-small>*>button {
+ border-radius: 0
+ }
+ .button-group.round.stack-for-small>:first-child,
+ .button-group.round.stack-for-small>:first-child>.button,
+ .button-group.round.stack-for-small>:first-child>a,
+ .button-group.round.stack-for-small>:first-child>button {
+ -webkit-top-left-radius: 1rem;
+ -webkit-top-right-radius: 1rem;
+ border-top-left-radius: 1rem;
+ border-top-right-radius: 1rem
+ }
+ .button-group.round.stack-for-small>:last-child,
+ .button-group.round.stack-for-small>:last-child>.button,
+ .button-group.round.stack-for-small>:last-child>a,
+ .button-group.round.stack-for-small>:last-child>button {
+ -webkit-bottom-left-radius: 1rem;
+ -webkit-bottom-right-radius: 1rem;
+ border-bottom-left-radius: 1rem;
+ border-bottom-right-radius: 1rem
+ }
+}
+
+.button-group.even-2 li {
+ margin: 0 -2px;
+ display: inline-block;
+ width: 50%
+}
+
+.button-group.even-2 li .button,
+.button-group.even-2 li>button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, .5)
+}
+
+.button-group.even-2 li:first-child .button,
+.button-group.even-2 li:first-child button {
+ border-left: 0
+}
+
+.button-group.even-2 li .button,
+.button-group.even-2 li button {
+ width: 100%
+}
+
+.button-group.even-3 li {
+ margin: 0 -2px;
+ display: inline-block;
+ width: 33.33333%
+}
+
+.button-group.even-3 li .button,
+.button-group.even-3 li>button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, .5)
+}
+
+.button-group.even-3 li:first-child .button,
+.button-group.even-3 li:first-child button {
+ border-left: 0
+}
+
+.button-group.even-3 li .button,
+.button-group.even-3 li button {
+ width: 100%
+}
+
+.button-group.even-4 li {
+ margin: 0 -2px;
+ display: inline-block;
+ width: 25%
+}
+
+.button-group.even-4 li .button,
+.button-group.even-4 li>button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, .5)
+}
+
+.button-group.even-4 li:first-child .button,
+.button-group.even-4 li:first-child button {
+ border-left: 0
+}
+
+.button-group.even-4 li .button,
+.button-group.even-4 li button {
+ width: 100%
+}
+
+.button-group.even-5 li {
+ margin: 0 -2px;
+ display: inline-block;
+ width: 20%
+}
+
+.button-group.even-5 li .button,
+.button-group.even-5 li>button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, .5)
+}
+
+.button-group.even-5 li:first-child .button,
+.button-group.even-5 li:first-child button {
+ border-left: 0
+}
+
+.button-group.even-5 li .button,
+.button-group.even-5 li button {
+ width: 100%
+}
+
+.button-group.even-6 li {
+ margin: 0 -2px;
+ display: inline-block;
+ width: 16.66667%
+}
+
+.button-group.even-6 li .button,
+.button-group.even-6 li>button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, .5)
+}
+
+.button-group.even-6 li:first-child .button,
+.button-group.even-6 li:first-child button {
+ border-left: 0
+}
+
+.button-group.even-6 li .button,
+.button-group.even-6 li button {
+ width: 100%
+}
+
+.button-group.even-7 li {
+ margin: 0 -2px;
+ display: inline-block;
+ width: 14.28571%
+}
+
+.button-group.even-7 li .button,
+.button-group.even-7 li>button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, .5)
+}
+
+.button-group.even-7 li:first-child .button,
+.button-group.even-7 li:first-child button {
+ border-left: 0
+}
+
+.button-group.even-7 li .button,
+.button-group.even-7 li button {
+ width: 100%
+}
+
+.button-group.even-8 li {
+ margin: 0 -2px;
+ display: inline-block;
+ width: 12.5%
+}
+
+.button-group.even-8 li .button,
+.button-group.even-8 li>button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, .5)
+}
+
+.button-group.even-8 li:first-child .button,
+.button-group.even-8 li:first-child button {
+ border-left: 0
+}
+
+.button-group.even-8 li .button,
+.button-group.even-8 li button {
+ width: 100%
+}
+
+.button-bar:after,
+.button-bar:before {
+ content: " ";
+ display: table
+}
+
+.button-bar:after {
+ clear: both
+}
+
+.button-bar .button-group {
+ float: left;
+ margin-right: .625rem
+}
+
+.button-bar .button-group div {
+ overflow: hidden
+}
+
+.clearing-thumbs,
+[data-clearing] {
+ margin-bottom: 0;
+ margin-left: 0;
+ list-style: none
+}
+
+.clearing-thumbs:after,
+.clearing-thumbs:before,
+[data-clearing]:after,
+[data-clearing]:before {
+ content: " ";
+ display: table
+}
+
+.clearing-thumbs:after,
+[data-clearing]:after {
+ clear: both
+}
+
+.clearing-thumbs li,
+[data-clearing] li {
+ float: left;
+ margin-right: 10px
+}
+
+.clearing-thumbs[class*=block-grid-] li,
+[data-clearing][class*=block-grid-] li {
+ margin-right: 0
+}
+
+.clearing-blackout {
+ background: #333;
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: 998
+}
+
+.clearing-blackout .clearing-close {
+ display: block
+}
+
+.clearing-container {
+ position: relative;
+ z-index: 998;
+ height: 100%;
+ overflow: hidden;
+ margin: 0
+}
+
+.clearing-touch-label {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ color: #aaa;
+ font-size: .6em
+}
+
+.visible-img {
+ height: 95%;
+ position: relative
+}
+
+.visible-img img {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ margin-left: -50%;
+ max-height: 100%;
+ max-width: 100%
+}
+
+.clearing-caption {
+ color: #ccc;
+ font-size: .875em;
+ line-height: 1.3;
+ margin-bottom: 0;
+ text-align: center;
+ bottom: 0;
+ background: #333;
+ width: 100%;
+ padding: 10px 30px 20px;
+ position: absolute;
+ left: 0
+}
+
+.clearing-close {
+ z-index: 999;
+ padding-left: 20px;
+ padding-top: 10px;
+ font-size: 30px;
+ line-height: 1;
+ color: #ccc;
+ display: none
+}
+
+.clearing-close:focus,
+.clearing-close:hover {
+ color: #ccc
+}
+
+.clearing-assembled .clearing-container {
+ height: 100%
+}
+
+.clearing-assembled .clearing-container .carousel>ul,
+.clearing-feature li {
+ display: none
+}
+
+.clearing-feature li.clearing-featured-img {
+ display: block
+}
+
+@media only screen and (min-width:701px) {
+ .clearing-main-next,
+ .clearing-main-prev {
+ position: absolute;
+ height: 100%;
+ width: 40px;
+ top: 0
+ }
+ .clearing-main-next>span,
+ .clearing-main-prev>span {
+ position: absolute;
+ top: 50%;
+ display: block;
+ width: 0;
+ height: 0;
+ border: 12px solid
+ }
+ .clearing-main-next>span:hover,
+ .clearing-main-prev>span:hover {
+ opacity: .8
+ }
+ .clearing-main-prev {
+ left: 0
+ }
+ .clearing-main-prev>span {
+ left: 5px;
+ border-color: transparent;
+ border-right-color: #ccc
+ }
+ .clearing-main-next {
+ right: 0
+ }
+ .clearing-main-next>span {
+ border-color: transparent;
+ border-left-color: #ccc
+ }
+ .clearing-main-next.disabled,
+ .clearing-main-prev.disabled {
+ opacity: .3
+ }
+ .clearing-assembled .clearing-container .carousel {
+ background: rgba(51, 51, 51, .8);
+ height: 120px;
+ margin-top: 10px;
+ text-align: center
+ }
+ .clearing-assembled .clearing-container .carousel>ul {
+ display: inline-block;
+ z-index: 999;
+ height: 100%;
+ position: relative;
+ float: none
+ }
+ .clearing-assembled .clearing-container .carousel>ul li {
+ display: block;
+ width: 120px;
+ min-height: inherit;
+ float: left;
+ overflow: hidden;
+ margin-right: 0;
+ padding: 0;
+ position: relative;
+ cursor: pointer;
+ opacity: .4;
+ clear: none
+ }
+ .clearing-assembled .clearing-container .carousel>ul li.fix-height img {
+ height: 100%;
+ max-width: none
+ }
+ .clearing-assembled .clearing-container .carousel>ul li a.th {
+ border: none;
+ box-shadow: none;
+ display: block
+ }
+ .clearing-assembled .clearing-container .carousel>ul li img {
+ cursor: pointer!important;
+ width: 100%!important
+ }
+ .clearing-assembled .clearing-container .carousel>ul li.visible {
+ opacity: 1
+ }
+ .clearing-assembled .clearing-container .carousel>ul li:hover {
+ opacity: .8
+ }
+ .clearing-assembled .clearing-container .visible-img {
+ background: #333;
+ overflow: hidden;
+ height: 85%
+ }
+ .clearing-close {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+ padding-left: 0;
+ padding-top: 0
+ }
+}
+
+.icon-bar {
+ width: 100%;
+ font-size: 0;
+ display: inline-block;
+ background: #333
+}
+
+.icon-bar>* {
+ text-align: center;
+ width: 25%;
+ margin: 0 auto;
+ display: block;
+ float: left
+}
+
+.icon-bar>* i,
+.icon-bar>* img {
+ display: block;
+ margin: 0 auto
+}
+
+.icon-bar>* i {
+ vertical-align: middle
+}
+
+.icon-bar.label-right>* i,
+.icon-bar.label-right>* img {
+ margin: 0 .0625rem 0 0;
+ display: inline-block
+}
+
+.icon-bar.label-right>* i+label,
+.icon-bar.label-right>* img+label {
+ margin-top: 0
+}
+
+.icon-bar.label-right>* label {
+ display: inline-block
+}
+
+.icon-bar.vertical.label-right>* {
+ text-align: left
+}
+
+.icon-bar.small-vertical,
+.icon-bar.vertical {
+ height: 100%;
+ width: auto
+}
+
+.icon-bar.small-vertical .item,
+.icon-bar.vertical .item {
+ width: auto;
+ margin: auto;
+ float: none
+}
+
+@media only screen and (min-width:701px) {
+ .icon-bar.medium-vertical {
+ height: 100%;
+ width: auto
+ }
+ .icon-bar.medium-vertical .item {
+ width: auto;
+ margin: auto;
+ float: none
+ }
+}
+
+@media only screen and (min-width:901px) {
+ .icon-bar.large-vertical {
+ height: 100%;
+ width: auto
+ }
+ .icon-bar.large-vertical .item {
+ width: auto;
+ margin: auto;
+ float: none
+ }
+}
+
+.icon-bar>* {
+ font-size: 1rem;
+ padding: 1.25rem
+}
+
+.icon-bar>* i+label,
+.icon-bar>* img+label {
+ margin-top: .0625rem
+}
+
+.icon-bar>* i {
+ font-size: 1.875rem
+}
+
+.icon-bar>* img {
+ width: 1.875rem;
+ height: 1.875rem
+}
+
+.icon-bar>:hover {
+ background: #008cba
+}
+
+.icon-bar>* i,
+.icon-bar>* label {
+ color: #fff
+}
+
+.icon-bar.two-up .item {
+ width: 50%
+}
+
+.icon-bar.two-up.small-vertical .item,
+.icon-bar.two-up.vertical .item {
+ width: auto
+}
+
+@media only screen and (min-width:701px) {
+ .icon-bar.two-up.medium-vertical .item {
+ width: auto
+ }
+}
+
+@media only screen and (min-width:901px) {
+ .icon-bar.two-up.large-vertical .item {
+ width: auto
+ }
+}
+
+.icon-bar.three-up .item {
+ width: 33.3333%
+}
+
+.icon-bar.three-up.small-vertical .item,
+.icon-bar.three-up.vertical .item {
+ width: auto
+}
+
+@media only screen and (min-width:701px) {
+ .icon-bar.three-up.medium-vertical .item {
+ width: auto
+ }
+}
+
+@media only screen and (min-width:901px) {
+ .icon-bar.three-up.large-vertical .item {
+ width: auto
+ }
+}
+
+.icon-bar.four-up .item {
+ width: 25%
+}
+
+.icon-bar.four-up.small-vertical .item,
+.icon-bar.four-up.vertical .item {
+ width: auto
+}
+
+@media only screen and (min-width:701px) {
+ .icon-bar.four-up.medium-vertical .item {
+ width: auto
+ }
+}
+
+@media only screen and (min-width:901px) {
+ .icon-bar.four-up.large-vertical .item {
+ width: auto
+ }
+}
+
+.icon-bar.five-up .item {
+ width: 20%
+}
+
+.icon-bar.five-up.small-vertical .item,
+.icon-bar.five-up.vertical .item {
+ width: auto
+}
+
+@media only screen and (min-width:701px) {
+ .icon-bar.five-up.medium-vertical .item {
+ width: auto
+ }
+}
+
+@media only screen and (min-width:901px) {
+ .icon-bar.five-up.large-vertical .item {
+ width: auto
+ }
+}
+
+.icon-bar.six-up .item {
+ width: 16.66667%
+}
+
+.icon-bar.six-up.small-vertical .item,
+.icon-bar.six-up.vertical .item {
+ width: auto
+}
+
+@media only screen and (min-width:701px) {
+ .icon-bar.six-up.medium-vertical .item {
+ width: auto
+ }
+}
+
+@media only screen and (min-width:901px) {
+ .icon-bar.six-up.large-vertical .item {
+ width: auto
+ }
+}
+
+.inline-list,
+.share-links {
+ padding: 0;
+ list-style: none;
+ overflow: hidden
+}
+
+.inline-list>li,
+.share-links>li {
+ list-style: none;
+ float: left;
+ margin-left: 1.375rem;
+ display: block
+}
+
+.inline-list>li>*,
+.share-links>li>* {
+ display: block
+}
+
+.keystroke,
+kbd {
+ background-color: #ededed;
+ border-color: #ddd;
+ color: #222;
+ border-style: solid;
+ border-width: 1px;
+ margin: 0;
+ font-family: Consolas, Menlo, Courier, monospace;
+ font-size: inherit;
+ padding: .125rem .25rem 0;
+ border-radius: 3px
+}
+
+.label {
+ font-weight: 400;
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ text-align: center;
+ text-decoration: none;
+ line-height: 1;
+ white-space: nowrap;
+ display: inline-block;
+ position: relative;
+ margin-bottom: inherit;
+ padding: .25rem .5rem;
+ font-size: .6875rem;
+ background-color: #008cba;
+ color: #fff
+}
+
+.label.radius {
+ border-radius: 3px
+}
+
+.label.round {
+ border-radius: 1000px
+}
+
+.label.alert {
+ background-color: #f04124;
+ color: #fff
+}
+
+.label.warning {
+ background-color: #f08a24;
+ color: #fff
+}
+
+.label.success {
+ background-color: #43ac6a;
+ color: #fff
+}
+
+.label.secondary {
+ background-color: #e7e7e7;
+ color: #333
+}
+
+.label.info {
+ background-color: #a0d3e8;
+ color: #333
+}
+
+.side-nav {
+ display: block;
+ margin: 0;
+ padding: .875rem 0;
+ list-style-type: none;
+ list-style-position: outside;
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif
+}
+
+.side-nav li {
+ margin: 0 0 .4375rem;
+ font-size: .875rem;
+ font-weight: 400
+}
+
+.side-nav li a:not(.button) {
+ display: block;
+ color: #008cba;
+ margin: 0;
+ padding: .4375rem .875rem
+}
+
+.side-nav li a:not(.button):focus,
+.side-nav li a:not(.button):hover {
+ background: rgba(0, 0, 0, .025);
+ color: #1cc7ff
+}
+
+.side-nav li.active>a:first-child:not(.button) {
+ color: #1cc7ff;
+ font-weight: 400;
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif
+}
+
+.side-nav li.divider {
+ border-top: 1px solid;
+ height: 0;
+ padding: 0;
+ list-style: none;
+ border-top-color: #fff
+}
+
+.side-nav li.heading {
+ color: #008cba;
+ font-size: .875rem;
+ font-weight: 700;
+ text-transform: uppercase
+}
+
+.dropdown.button,
+button.dropdown {
+ position: relative;
+ outline: 0;
+ padding-right: 3.5625rem
+}
+
+.dropdown.button::after,
+button.dropdown::after {
+ position: absolute;
+ content: "";
+ width: 0;
+ height: 0;
+ display: block;
+ border-style: solid;
+ top: 50%;
+ border-width: .375rem;
+ right: 1.40625rem;
+ margin-top: -.15625rem;
+ border-color: #fff transparent transparent
+}
+
+.dropdown.button.tiny,
+button.dropdown.tiny {
+ padding-right: 2.625rem
+}
+
+.dropdown.button.tiny:after,
+button.dropdown.tiny:after {
+ border-width: .375rem;
+ right: 1.125rem;
+ margin-top: -.125rem
+}
+
+.dropdown.button.tiny::after,
+button.dropdown.tiny::after {
+ border-color: #fff transparent transparent
+}
+
+.dropdown.button.small,
+button.dropdown.small {
+ padding-right: 3.0625rem
+}
+
+.dropdown.button.small::after,
+button.dropdown.small::after {
+ border-width: .4375rem;
+ right: 1.3125rem;
+ margin-top: -.15625rem;
+ border-color: #fff transparent transparent
+}
+
+.dropdown.button.large,
+button.dropdown.large {
+ padding-right: 3.625rem
+}
+
+.dropdown.button.large::after,
+button.dropdown.large::after {
+ border-width: .3125rem;
+ right: 1.71875rem;
+ margin-top: -.15625rem;
+ border-color: #fff transparent transparent
+}
+
+.dropdown.button.secondary:after,
+button.dropdown.secondary:after {
+ border-color: #333 transparent transparent
+}
+
+.split.button {
+ position: relative;
+ padding-right: 5.0625rem
+}
+
+.split.button span {
+ display: block;
+ height: 100%;
+ position: absolute;
+ right: 0;
+ top: 0;
+ border-left: solid 1px
+}
+
+.split.button span:after {
+ position: absolute;
+ content: "";
+ width: 0;
+ height: 0;
+ display: block;
+ border-style: inset;
+ left: 50%
+}
+
+.split.button span:active {
+ background-color: rgba(0, 0, 0, .1)
+}
+
+.split.button span {
+ border-left-color: rgba(255, 255, 255, .5);
+ width: 3.09375rem
+}
+
+.split.button span:after {
+ border-top-style: solid;
+ border-width: .375rem;
+ top: 48%;
+ margin-left: -.375rem;
+ border-color: #fff transparent transparent
+}
+
+.split.button.secondary span {
+ border-left-color: rgba(255, 255, 255, .5)
+}
+
+.split.button.alert span,
+.split.button.success span {
+ border-left-color: rgba(255, 255, 255, .5)
+}
+
+.split.button.tiny {
+ padding-right: 3.75rem
+}
+
+.split.button.tiny span {
+ width: 2.25rem
+}
+
+.split.button.tiny span:after {
+ border-top-style: solid;
+ border-width: .375rem;
+ top: 48%;
+ margin-left: -.375rem
+}
+
+.split.button.small {
+ padding-right: 4.375rem
+}
+
+.split.button.small span {
+ width: 2.625rem
+}
+
+.split.button.small span:after {
+ border-top-style: solid;
+ border-width: .4375rem;
+ top: 48%;
+ margin-left: -.375rem
+}
+
+.split.button.large {
+ padding-right: 5.5rem
+}
+
+.split.button.large span {
+ width: 3.4375rem
+}
+
+.split.button.large span:after {
+ border-top-style: solid;
+ border-width: .3125rem;
+ top: 48%;
+ margin-left: -.375rem
+}
+
+.split.button.expand {
+ padding-left: 2rem
+}
+
+.split.button.secondary span:after {
+ border-color: #333 transparent transparent
+}
+
+.split.button.radius span {
+ -webkit-border-bottom-right-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px
+}
+
+.split.button.round span {
+ -webkit-border-bottom-right-radius: 1000px;
+ -webkit-border-top-right-radius: 1000px;
+ border-bottom-right-radius: 1000px;
+ border-top-right-radius: 1000px
+}
+
+.switch {
+ padding: 0;
+ border: none;
+ position: relative;
+ outline: 0;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none
+}
+
+.switch label {
+ display: block;
+ margin-bottom: 1rem;
+ position: relative;
+ text-indent: 100%;
+ cursor: pointer;
+ transition: left .15s ease-out
+}
+
+.switch input {
+ opacity: 0;
+ position: absolute;
+ top: 9px;
+ left: 10px;
+ padding: 0
+}
+
+.switch input+label {
+ margin-left: 0;
+ margin-right: 0
+}
+
+.switch label:after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: .25rem;
+ left: .25rem;
+ transition: left .15s ease-out;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0)
+}
+
+.switch label {
+ width: 4rem;
+ height: 2rem
+}
+
+.switch label:after {
+ width: 1.5rem;
+ height: 1.5rem
+}
+
+.switch input:checked+label:after {
+ left: 2.25rem
+}
+
+.switch label {
+ color: transparent;
+ background: #ddd
+}
+
+.switch label:after {
+ background: #fff
+}
+
+.switch input:checked+label {
+ background: #008cba
+}
+
+.switch.large label {
+ width: 5rem;
+ height: 2.5rem
+}
+
+.switch.large label:after {
+ width: 2rem;
+ height: 2rem
+}
+
+.switch.large input:checked+label:after {
+ left: 2.75rem
+}
+
+.switch.small label {
+ width: 3.5rem;
+ height: 1.75rem
+}
+
+.switch.small label:after {
+ width: 1.25rem;
+ height: 1.25rem
+}
+
+.switch.small input:checked+label:after {
+ left: 2rem
+}
+
+.switch.tiny label {
+ width: 3rem;
+ height: 1.5rem
+}
+
+.switch.tiny label:after {
+ width: 1rem;
+ height: 1rem
+}
+
+.switch.tiny input:checked+label:after {
+ left: 1.75rem
+}
+
+.switch.radius label {
+ border-radius: 4px
+}
+
+.switch.radius label:after {
+ border-radius: 3px
+}
+
+.switch.round {
+ border-radius: 1000px
+}
+
+.switch.round label,
+.switch.round label:after {
+ border-radius: 2rem
+}
+
+table {
+ background: #fff;
+ margin-bottom: 1.25rem;
+ border: 1px solid #ddd;
+ table-layout: auto
+}
+
+table caption {
+ background: 0 0;
+ color: #222;
+ font-size: 1rem;
+ font-weight: 700
+}
+
+table thead {
+ background: #f5f5f5
+}
+
+table thead tr td,
+table thead tr th {
+ padding: .5rem .625rem .625rem;
+ font-size: .875rem;
+ font-weight: 700;
+ color: #222
+}
+
+table tfoot {
+ background: #f5f5f5
+}
+
+table tfoot tr td,
+table tfoot tr th {
+ padding: .5rem .625rem .625rem;
+ font-size: .875rem;
+ font-weight: 700;
+ color: #222
+}
+
+table tr td,
+table tr th {
+ padding: .5625rem .625rem;
+ font-size: .875rem;
+ color: #222;
+ text-align: left
+}
+
+table tr.alt,
+table tr.even,
+table tr:nth-of-type(even) {
+ background: #f9f9f9
+}
+
+table tbody tr td,
+table tbody tr th,
+table tfoot tr td,
+table tfoot tr th,
+table thead tr th,
+table tr td {
+ display: table-cell;
+ line-height: 1.125rem
+}
+
+.tabs {
+ margin-bottom: 0!important
+}
+
+.tabs:after,
+.tabs:before {
+ content: " ";
+ display: table
+}
+
+.tabs:after {
+ clear: both
+}
+
+.tabs .tab-title,
+.tabs dd {
+ position: relative;
+ margin-bottom: 0!important;
+ list-style: none;
+ float: left
+}
+
+.tabs .tab-title>a,
+.tabs dd>a {
+ outline: 0;
+ display: block;
+ background-color: #efefef;
+ color: #222;
+ font-size: 1rem
+}
+
+.tabs .tab-title>a:hover,
+.tabs dd>a:hover {
+ background-color: #e1e1e1
+}
+
+.tabs .tab-title.active a,
+.tabs dd.active a {
+ background-color: #fff;
+ color: #222
+}
+
+.tabs.radius .tab:first-child a,
+.tabs.radius dd:first-child a {
+ -webkit-border-bottom-left-radius: 3px;
+ -webkit-border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ border-top-left-radius: 3px
+}
+
+.tabs.radius .tab:last-child a,
+.tabs.radius dd:last-child a {
+ -webkit-border-bottom-right-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px
+}
+
+.tabs.vertical .tab-title,
+.tabs.vertical dd {
+ position: inherit;
+ float: none;
+ display: block;
+ top: auto
+}
+
+.tabs-content {
+ width: 100%
+}
+
+.tabs-content:after,
+.tabs-content:before {
+ content: " ";
+ display: table
+}
+
+.tabs-content:after {
+ clear: both
+}
+
+.tabs-content>.content {
+ display: none;
+ float: left;
+ padding: .9375rem 0;
+ width: 100%
+}
+
+.tabs-content>.content.active {
+ display: block;
+ float: none
+}
+
+.tabs-content>.content.contained {
+ padding: .9375rem
+}
+
+.tabs-content.vertical {
+ display: block
+}
+
+.tabs-content.vertical>.content {
+ padding: 0 .9375rem
+}
+
+@media only screen and (min-width:701px) {
+ .tabs.vertical {
+ width: 20%;
+ max-width: 20%;
+ float: left;
+ margin: 0 0 1.25rem
+ }
+ .tabs-content.vertical {
+ width: 80%;
+ max-width: 80%;
+ float: left;
+ margin-left: -1px;
+ padding-left: 1rem
+ }
+}
+
+.no-js .tabs-content>.content {
+ display: block;
+ float: none
+}
+
+.has-tip {
+ border-bottom: dotted 1px #ccc;
+ cursor: help;
+ font-weight: 700;
+ color: #333
+}
+
+.has-tip:focus,
+.has-tip:hover {
+ border-bottom: dotted 1px #003f54;
+ color: #008cba
+}
+
+.has-tip.tip-left,
+.has-tip.tip-right {
+ float: none!important
+}
+
+.tooltip {
+ display: none;
+ position: absolute;
+ z-index: 1006;
+ font-weight: 400;
+ font-size: .875rem;
+ line-height: 1.3;
+ padding: .75rem;
+ max-width: 300px;
+ left: 50%;
+ width: 100%;
+ color: #fff;
+ background: #333
+}
+
+.tooltip>.nub {
+ display: block;
+ left: 5px;
+ position: absolute;
+ width: 0;
+ height: 0;
+ border: 5px solid;
+ border-color: transparent transparent #333;
+ top: -10px;
+ pointer-events: none
+}
+
+.tooltip>.nub.rtl {
+ left: auto;
+ right: 5px
+}
+
+.tooltip.radius {
+ border-radius: 3px
+}
+
+.tooltip.round {
+ border-radius: 1000px
+}
+
+.tooltip.round>.nub {
+ left: 2rem
+}
+
+.tooltip.opened {
+ color: #008cba!important;
+ border-bottom: dotted 1px #003f54!important
+}
+
+.tap-to-close {
+ display: block;
+ font-size: .625rem;
+ color: #777;
+ font-weight: 400
+}
+
+@media only screen and (min-width:701px) {
+ .tooltip>.nub {
+ border-color: transparent transparent #333;
+ top: -10px
+ }
+ .tooltip.tip-top>.nub {
+ border-color: #333 transparent transparent;
+ top: auto;
+ bottom: -10px
+ }
+ .tooltip.tip-left,
+ .tooltip.tip-right {
+ float: none!important
+ }
+ .tooltip.tip-left>.nub {
+ border-color: transparent transparent transparent #333;
+ right: -10px;
+ left: auto;
+ top: 50%;
+ margin-top: -5px
+ }
+ .tooltip.tip-right>.nub {
+ border-color: transparent #333 transparent transparent;
+ right: auto;
+ left: -10px;
+ top: 50%;
+ margin-top: -5px
+ }
+}
+
+.text-left {
+ text-align: left!important
+}
+
+.text-right {
+ text-align: right!important
+}
+
+.text-center {
+ text-align: center!important
+}
+
+.text-justify {
+ text-align: justify!important
+}
+
+@media only screen and (min-width:501px) and (max-width:700px) {
+ .small-only-text-left {
+ text-align: left!important
+ }
+ .small-only-text-right {
+ text-align: right!important
+ }
+ .small-only-text-center {
+ text-align: center!important
+ }
+ .small-only-text-justify {
+ text-align: justify!important
+ }
+}
+
+@media only screen and (min-width:501px) {
+ .small-text-left {
+ text-align: left!important
+ }
+ .small-text-right {
+ text-align: right!important
+ }
+ .small-text-center {
+ text-align: center!important
+ }
+ .small-text-justify {
+ text-align: justify!important
+ }
+}
+
+@media only screen and (min-width:701px) and (max-width:900px) {
+ .medium-only-text-left {
+ text-align: left!important
+ }
+ .medium-only-text-right {
+ text-align: right!important
+ }
+ .medium-only-text-center {
+ text-align: center!important
+ }
+ .medium-only-text-justify {
+ text-align: justify!important
+ }
+}
+
+@media only screen and (min-width:701px) {
+ .medium-text-left {
+ text-align: left!important
+ }
+ .medium-text-right {
+ text-align: right!important
+ }
+ .medium-text-center {
+ text-align: center!important
+ }
+ .medium-text-justify {
+ text-align: justify!important
+ }
+}
+
+@media only screen and (min-width:901px) and (max-width:1100px) {
+ .large-only-text-left {
+ text-align: left!important
+ }
+ .large-only-text-right {
+ text-align: right!important
+ }
+ .large-only-text-center {
+ text-align: center!important
+ }
+ .large-only-text-justify {
+ text-align: justify!important
+ }
+}
+
+@media only screen and (min-width:901px) {
+ .large-text-left {
+ text-align: left!important
+ }
+ .large-text-right {
+ text-align: right!important
+ }
+ .large-text-center {
+ text-align: center!important
+ }
+ .large-text-justify {
+ text-align: justify!important
+ }
+}
+
+@media only screen and (min-width:1101px) and (max-width:1300px) {
+ .xlarge-only-text-left {
+ text-align: left!important
+ }
+ .xlarge-only-text-right {
+ text-align: right!important
+ }
+ .xlarge-only-text-center {
+ text-align: center!important
+ }
+ .xlarge-only-text-justify {
+ text-align: justify!important
+ }
+}
+
+@media only screen and (min-width:1101px) {
+ .xlarge-text-left {
+ text-align: left!important
+ }
+ .xlarge-text-right {
+ text-align: right!important
+ }
+ .xlarge-text-center {
+ text-align: center!important
+ }
+ .xlarge-text-justify {
+ text-align: justify!important
+ }
+}
+
+@media only screen and (min-width:1301px) and (max-width:99999999px) {
+ .xxlarge-only-text-left {
+ text-align: left!important
+ }
+ .xxlarge-only-text-right {
+ text-align: right!important
+ }
+ .xxlarge-only-text-center {
+ text-align: center!important
+ }
+ .xxlarge-only-text-justify {
+ text-align: justify!important
+ }
+}
+
+@media only screen and (min-width:1301px) {
+ .xxlarge-text-left {
+ text-align: left!important
+ }
+ .xxlarge-text-right {
+ text-align: right!important
+ }
+ .xxlarge-text-center {
+ text-align: center!important
+ }
+ .xxlarge-text-justify {
+ text-align: justify!important
+ }
+}
+
+blockquote,
+dd,
+div,
+dl,
+dt,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+li,
+ol,
+p,
+pre,
+td,
+th,
+ul {
+ margin: 0;
+ padding: 0
+}
+
+a {
+ text-decoration: none;
+ line-height: inherit
+}
+
+a:focus,
+a:hover {
+ color: #0078a0
+}
+
+a img {
+ border: none
+}
+
+p {
+ font-family: inherit;
+ font-weight: 400;
+ font-size: 1rem;
+ line-height: 1.6;
+ margin-bottom: 1.25rem;
+ text-rendering: optimizeLegibility
+}
+
+p.lead {
+ font-size: 1.21875rem;
+ line-height: 1.6
+}
+
+p aside {
+ font-size: .875rem;
+ line-height: 1.35;
+ font-style: italic
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-style: normal;
+ text-rendering: optimizeLegibility;
+ margin-top: .2rem;
+ margin-bottom: .5rem;
+ line-height: 1.4
+}
+
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small {
+ font-size: 60%
+}
+
+h1 {
+ font-size: 2.125rem
+}
+
+h2 {
+ font-size: 1.6875rem
+}
+
+h3 {
+ font-size: 1.375rem
+}
+
+h4,
+h5 {
+ font-size: 1.125rem
+}
+
+h6 {
+ font-size: 1rem
+}
+
+.subheader {
+ line-height: 1.4;
+ color: #6f6f6f;
+ font-weight: 400;
+ margin-top: .2rem;
+ margin-bottom: .5rem
+}
+
+hr {
+ border: solid #ddd;
+ border-width: 1px 0 0;
+ clear: both;
+ margin: 1.25rem 0 1.1875rem;
+ height: 0
+}
+
+em,
+i {
+ font-style: italic;
+ line-height: inherit
+}
+
+b,
+strong {
+ font-weight: 700;
+ line-height: inherit
+}
+
+small {
+ line-height: inherit
+}
+
+code {
+ border-width: 1px;
+ border-style: solid
+}
+
+dl,
+ol,
+ul {
+ font-size: 1rem;
+ line-height: 1.6;
+ margin-bottom: 1.25rem;
+ list-style-position: outside;
+ font-family: inherit
+}
+
+ul {
+ margin-left: 1.1rem
+}
+
+ul.no-bullet {
+ margin-left: 0
+}
+
+ul.no-bullet li ol,
+ul.no-bullet li ul {
+ margin-left: 1.25rem;
+ margin-bottom: 0;
+ list-style: none
+}
+
+ul li ol,
+ul li ul {
+ margin-left: 1.25rem;
+ margin-bottom: 0
+}
+
+ul.circle li ul,
+ul.disc li ul,
+ul.square li ul {
+ list-style: inherit
+}
+
+ul.square {
+ list-style-type: square;
+ margin-left: 1.1rem
+}
+
+ul.circle {
+ list-style-type: circle;
+ margin-left: 1.1rem
+}
+
+ul.disc {
+ list-style-type: disc;
+ margin-left: 1.1rem
+}
+
+ul.no-bullet {
+ list-style: none
+}
+
+ol {
+ margin-left: 1.4rem
+}
+
+ol li ol,
+ol li ul {
+ margin-left: 1.25rem;
+ margin-bottom: 0
+}
+
+dl dt {
+ margin-bottom: .3rem;
+ font-weight: 700
+}
+
+dl dd {
+ margin-bottom: .75rem
+}
+
+abbr,
+acronym {
+ text-transform: uppercase;
+ font-size: 90%;
+ color: #222;
+ cursor: help
+}
+
+abbr {
+ text-transform: none
+}
+
+abbr[title] {
+ border-bottom: 1px dotted #ddd
+}
+
+blockquote {
+ margin: 0 0 1.25rem;
+ padding: .5625rem 1.25rem 0 1.1875rem;
+ border-left: 1px solid #ddd
+}
+
+blockquote cite {
+ display: block;
+ font-size: .8125rem;
+ color: #555
+}
+
+blockquote cite:before {
+ content: "\2014 \0020"
+}
+
+blockquote cite a,
+blockquote cite a:visited {
+ color: #555
+}
+
+blockquote,
+blockquote p {
+ line-height: 1.6;
+ color: #6f6f6f
+}
+
+.vcard {
+ display: inline-block;
+ margin: 0 0 1.25rem;
+ border: 1px solid #ddd;
+ padding: .625rem .75rem
+}
+
+.vcard li {
+ margin: 0;
+ display: block
+}
+
+.vcard .fn {
+ font-weight: 700;
+ font-size: .9375rem
+}
+
+.vevent .summary {
+ font-weight: 700
+}
+
+.vevent abbr {
+ cursor: default;
+ text-decoration: none;
+ font-weight: 700;
+ border: none;
+ padding: 0 .0625rem
+}
+
+@media only screen and (min-width:701px) {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ line-height: 1.4
+ }
+ h1 {
+ font-size: 2.75rem
+ }
+ h2 {
+ font-size: 2.3125rem
+ }
+ h3 {
+ font-size: 1.6875rem
+ }
+ h4 {
+ font-size: 1.4375rem
+ }
+ h5 {
+ font-size: 1.125rem
+ }
+ h6 {
+ font-size: 1rem
+ }
+}
+
+.print-only {
+ display: none!important
+}
+
+@media print {
+ * {
+ background: 0 0!important;
+ color: #000!important;
+ box-shadow: none!important;
+ text-shadow: none!important
+ }
+ a,
+ a:visited {
+ text-decoration: underline
+ }
+ a[href]:after {
+ content: " (" attr(href) ")"
+ }
+ abbr[title]:after {
+ content: " (" attr(title) ")"
+ }
+ .ir a:after,
+ a[href^="javascript:"]:after,
+ a[href^="#"]:after {
+ content: ""
+ }
+ blockquote,
+ pre {
+ border: 1px solid #999;
+ page-break-inside: avoid
+ }
+ thead {
+ display: table-header-group
+ }
+ img,
+ tr {
+ page-break-inside: avoid
+ }
+ img {
+ max-width: 100%!important
+ }
+ @page {
+ margin: .5cm
+ }
+ h2,
+ h3,
+ p {
+ orphans: 3;
+ widows: 3
+ }
+ h2,
+ h3 {
+ page-break-after: avoid
+ }
+ .hide-on-print {
+ display: none!important
+ }
+ .print-only {
+ display: block!important
+ }
+ .hide-for-print {
+ display: none!important
+ }
+ .show-for-print {
+ display: inherit!important
+ }
+}
+
+.off-canvas-wrap {
+ -webkit-backface-visibility: hidden;
+ position: relative;
+ width: 100%;
+ overflow: hidden
+}
+
+.off-canvas-wrap.move-left,
+.off-canvas-wrap.move-right {
+ min-height: 100%;
+ -webkit-overflow-scrolling: touch
+}
+
+.inner-wrap {
+ -webkit-backface-visibility: hidden;
+ position: relative;
+ width: 100%;
+ transition: -webkit-transform 500ms ease;
+ transition: transform 500ms ease
+}
+
+.inner-wrap:after,
+.inner-wrap:before {
+ content: " ";
+ display: table
+}
+
+.inner-wrap:after {
+ clear: both
+}
+
+.tab-bar {
+ -webkit-backface-visibility: hidden;
+ background: #333;
+ color: #fff;
+ height: 2.8125rem;
+ line-height: 2.8125rem;
+ position: relative
+}
+
+.tab-bar h1,
+.tab-bar h2,
+.tab-bar h3,
+.tab-bar h4,
+.tab-bar h5,
+.tab-bar h6 {
+ color: #fff;
+ font-weight: 700;
+ line-height: 2.8125rem;
+ margin: 0
+}
+
+.tab-bar h1,
+.tab-bar h2,
+.tab-bar h3,
+.tab-bar h4 {
+ font-size: 1.125rem
+}
+
+.left-small {
+ width: 2.8125rem;
+ height: 2.8125rem;
+ position: absolute;
+ top: 0;
+ border-right: solid 1px #1a1a1a;
+ left: 0
+}
+
+.right-small {
+ width: 2.8125rem;
+ height: 2.8125rem;
+ position: absolute;
+ top: 0;
+ border-left: solid 1px #1a1a1a;
+ right: 0
+}
+
+.tab-bar-section {
+ padding: 0 .625rem;
+ position: absolute;
+ text-align: center;
+ height: 2.8125rem;
+ top: 0
+}
+
+@media only screen and (min-width:701px) {
+ .tab-bar-section.left,
+ .tab-bar-section.right {
+ text-align: left
+ }
+}
+
+.tab-bar-section.left {
+ left: 0;
+ right: 2.8125rem
+}
+
+.tab-bar-section.right {
+ left: 2.8125rem;
+ right: 0
+}
+
+.tab-bar-section.middle {
+ left: 2.8125rem;
+ right: 2.8125rem
+}
+
+.tab-bar .menu-icon {
+ text-indent: 2.1875rem;
+ width: 2.8125rem;
+ height: 2.8125rem;
+ display: block;
+ padding: 0;
+ color: #fff;
+ position: relative;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0)
+}
+
+.tab-bar .menu-icon span::after {
+ content: "";
+ position: absolute;
+ display: block;
+ height: 0;
+ top: 50%;
+ margin-top: -.5rem;
+ left: .90625rem;
+ box-shadow: 0 0 0 1px #fff, 0 7px 0 1px #fff, 0 14px 0 1px #fff;
+ width: 1rem
+}
+
+.tab-bar .menu-icon span:hover:after {
+ box-shadow: 0 0 0 1px #b3b3b3, 0 7px 0 1px #b3b3b3, 0 14px 0 1px #b3b3b3
+}
+
+.left-off-canvas-menu {
+ -webkit-backface-visibility: hidden;
+ width: 15.625rem;
+ top: 0;
+ bottom: 0;
+ position: absolute;
+ overflow-x: hidden;
+ overflow-y: auto;
+ background: #333;
+ z-index: 1001;
+ box-sizing: content-box;
+ transition: -webkit-transform 500ms ease 0s;
+ transition: transform 500ms ease 0s;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+ -ms-transform: translate(-100.5%, 0);
+ -webkit-transform: translate3d(-100.5%, 0, 0);
+ -ms-transform: translate3d(-100.5%, 0, 0);
+ transform: translate3d(-100.5%, 0, 0);
+ left: 0
+}
+
+.left-off-canvas-menu * {
+ -webkit-backface-visibility: hidden
+}
+
+.right-off-canvas-menu {
+ -webkit-backface-visibility: hidden;
+ width: 15.625rem;
+ top: 0;
+ bottom: 0;
+ position: absolute;
+ overflow-x: hidden;
+ overflow-y: auto;
+ background: #333;
+ z-index: 1001;
+ box-sizing: content-box;
+ transition: -webkit-transform 500ms ease 0s;
+ transition: transform 500ms ease 0s;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+ -ms-transform: translate(100.5%, 0);
+ -webkit-transform: translate3d(100.5%, 0, 0);
+ -ms-transform: translate3d(100.5%, 0, 0);
+ transform: translate3d(100.5%, 0, 0);
+ right: 0
+}
+
+.right-off-canvas-menu * {
+ -webkit-backface-visibility: hidden
+}
+
+ul.off-canvas-list {
+ list-style-type: none;
+ padding: 0;
+ margin: 0
+}
+
+ul.off-canvas-list li label {
+ display: block;
+ padding: .3rem .9375rem;
+ color: #999;
+ text-transform: uppercase;
+ font-size: .75rem;
+ font-weight: 700;
+ background: #444;
+ border-top: 1px solid #5e5e5e;
+ border-bottom: none;
+ margin: 0
+}
+
+ul.off-canvas-list li a {
+ display: block;
+ padding: .66667rem;
+ color: rgba(255, 255, 255, .7);
+ border-bottom: 1px solid #262626;
+ transition: background 300ms ease
+}
+
+ul.off-canvas-list li a:hover {
+ background: #242424
+}
+
+.move-right>.inner-wrap {
+ -ms-transform: translate(15.625rem, 0);
+ -webkit-transform: translate3d(15.625rem, 0, 0);
+ -ms-transform: translate3d(15.625rem, 0, 0);
+ transform: translate3d(15.625rem, 0, 0)
+}
+
+.move-right .exit-off-canvas {
+ -webkit-backface-visibility: hidden;
+ transition: background 300ms ease;
+ cursor: pointer;
+ box-shadow: -4px 0 4px rgba(0, 0, 0, .5), 4px 0 4px rgba(0, 0, 0, .5);
+ display: block;
+ position: absolute;
+ background: rgba(255, 255, 255, .2);
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1002;
+ -webkit-tap-highlight-color: transparent
+}
+
+@media only screen and (min-width:701px) {
+ .move-right .exit-off-canvas:hover {
+ background: rgba(255, 255, 255, .05)
+ }
+}
+
+.move-left>.inner-wrap {
+ -ms-transform: translate(-15.625rem, 0);
+ -webkit-transform: translate3d(-15.625rem, 0, 0);
+ -ms-transform: translate3d(-15.625rem, 0, 0);
+ transform: translate3d(-15.625rem, 0, 0)
+}
+
+.move-left .exit-off-canvas {
+ -webkit-backface-visibility: hidden;
+ transition: background 300ms ease;
+ cursor: pointer;
+ box-shadow: -4px 0 4px rgba(0, 0, 0, .5), 4px 0 4px rgba(0, 0, 0, .5);
+ display: block;
+ position: absolute;
+ background: rgba(255, 255, 255, .2);
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1002;
+ -webkit-tap-highlight-color: transparent
+}
+
+@media only screen and (min-width:701px) {
+ .move-left .exit-off-canvas:hover {
+ background: rgba(255, 255, 255, .05)
+ }
+}
+
+.offcanvas-overlap .left-off-canvas-menu,
+.offcanvas-overlap .right-off-canvas-menu {
+ -ms-transform: none;
+ -webkit-transform: none;
+ transform: none;
+ z-index: 1003
+}
+
+.offcanvas-overlap .exit-off-canvas {
+ -webkit-backface-visibility: hidden;
+ transition: background 300ms ease;
+ cursor: pointer;
+ box-shadow: -4px 0 4px rgba(0, 0, 0, .5), 4px 0 4px rgba(0, 0, 0, .5);
+ display: block;
+ position: absolute;
+ background: rgba(255, 255, 255, .2);
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1002;
+ -webkit-tap-highlight-color: transparent
+}
+
+@media only screen and (min-width:701px) {
+ .offcanvas-overlap .exit-off-canvas:hover {
+ background: rgba(255, 255, 255, .05)
+ }
+}
+
+.offcanvas-overlap-left .right-off-canvas-menu {
+ -ms-transform: none;
+ -webkit-transform: none;
+ transform: none;
+ z-index: 1003
+}
+
+.offcanvas-overlap-left .exit-off-canvas {
+ -webkit-backface-visibility: hidden;
+ transition: background 300ms ease;
+ cursor: pointer;
+ box-shadow: -4px 0 4px rgba(0, 0, 0, .5), 4px 0 4px rgba(0, 0, 0, .5);
+ display: block;
+ position: absolute;
+ background: rgba(255, 255, 255, .2);
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1002;
+ -webkit-tap-highlight-color: transparent
+}
+
+@media only screen and (min-width:701px) {
+ .offcanvas-overlap-left .exit-off-canvas:hover {
+ background: rgba(255, 255, 255, .05)
+ }
+}
+
+.offcanvas-overlap-right .left-off-canvas-menu {
+ -ms-transform: none;
+ -webkit-transform: none;
+ transform: none;
+ z-index: 1003
+}
+
+.offcanvas-overlap-right .exit-off-canvas {
+ -webkit-backface-visibility: hidden;
+ transition: background 300ms ease;
+ cursor: pointer;
+ box-shadow: -4px 0 4px rgba(0, 0, 0, .5), 4px 0 4px rgba(0, 0, 0, .5);
+ display: block;
+ position: absolute;
+ background: rgba(255, 255, 255, .2);
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1002;
+ -webkit-tap-highlight-color: transparent
+}
+
+@media only screen and (min-width:701px) {
+ .offcanvas-overlap-right .exit-off-canvas:hover {
+ background: rgba(255, 255, 255, .05)
+ }
+}
+
+.no-csstransforms .left-off-canvas-menu {
+ left: -15.625rem
+}
+
+.no-csstransforms .right-off-canvas-menu {
+ right: -15.625rem
+}
+
+.no-csstransforms .move-left>.inner-wrap {
+ right: 15.625rem
+}
+
+.no-csstransforms .move-right>.inner-wrap {
+ left: 15.625rem
+}
+
+.left-submenu {
+ -webkit-backface-visibility: hidden;
+ width: 15.625rem;
+ top: 0;
+ bottom: 0;
+ position: absolute;
+ margin: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ background: #333;
+ z-index: 1002;
+ box-sizing: content-box;
+ -webkit-overflow-scrolling: touch;
+ -ms-transform: translate(-100%, 0);
+ -webkit-transform: translate3d(-100%, 0, 0);
+ -ms-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ left: 0;
+ transition: -webkit-transform 500ms ease;
+ transition: transform 500ms ease
+}
+
+.left-submenu * {
+ -webkit-backface-visibility: hidden
+}
+
+.left-submenu .back>a {
+ padding: .3rem .9375rem;
+ color: #999;
+ text-transform: uppercase;
+ font-weight: 700;
+ background: #444;
+ border-top: 1px solid #5e5e5e;
+ border-bottom: none;
+ margin: 0
+}
+
+.left-submenu .back>a:hover {
+ background: #303030;
+ border-top: 1px solid #5e5e5e;
+ border-bottom: none
+}
+
+.left-submenu .back>a:before {
+ content: "\AB";
+ margin-right: .5rem;
+ display: inline
+}
+
+.left-submenu.move-right {
+ -ms-transform: translate(0, 0);
+ -webkit-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0)
+}
+
+.right-submenu {
+ -webkit-backface-visibility: hidden;
+ width: 15.625rem;
+ top: 0;
+ bottom: 0;
+ position: absolute;
+ margin: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ background: #333;
+ z-index: 1002;
+ box-sizing: content-box;
+ -webkit-overflow-scrolling: touch;
+ -ms-transform: translate(100%, 0);
+ -webkit-transform: translate3d(100%, 0, 0);
+ -ms-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ right: 0;
+ transition: -webkit-transform 500ms ease;
+ transition: transform 500ms ease
+}
+
+.right-submenu * {
+ -webkit-backface-visibility: hidden
+}
+
+.right-submenu .back>a {
+ padding: .3rem .9375rem;
+ color: #999;
+ text-transform: uppercase;
+ font-weight: 700;
+ background: #444;
+ border-top: 1px solid #5e5e5e;
+ border-bottom: none;
+ margin: 0
+}
+
+.right-submenu .back>a:hover {
+ background: #303030;
+ border-top: 1px solid #5e5e5e;
+ border-bottom: none
+}
+
+.right-submenu .back>a:after {
+ content: "\BB";
+ margin-left: .5rem;
+ display: inline
+}
+
+.right-submenu.move-left {
+ -ms-transform: translate(0, 0);
+ -webkit-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0)
+}
+
+.left-off-canvas-menu ul.off-canvas-list li.has-submenu>a:after {
+ content: "\BB";
+ margin-left: .5rem;
+ display: inline
+}
+
+.right-off-canvas-menu ul.off-canvas-list li.has-submenu>a:before {
+ content: "\AB";
+ margin-right: .5rem;
+ display: inline
+}
+
+@media only screen and (min-width:501px) {
+ .hide-for-large,
+ .hide-for-large-only,
+ .hide-for-large-up,
+ .hide-for-medium,
+ .hide-for-medium-only,
+ .hide-for-medium-up,
+ .hide-for-xlarge-only,
+ .hide-for-xlarge-up,
+ .hide-for-xxlarge-only,
+ .hide-for-xxlarge-up,
+ .show-for-large-down,
+ .show-for-medium-down,
+ .show-for-small,
+ .show-for-small-down,
+ .show-for-small-only,
+ .show-for-small-up {
+ display: inherit!important
+ }
+ .hide-for-large-down,
+ .hide-for-medium-down,
+ .hide-for-small,
+ .hide-for-small-down,
+ .hide-for-small-only,
+ .hide-for-small-up,
+ .show-for-large,
+ .show-for-large-only,
+ .show-for-large-up,
+ .show-for-medium,
+ .show-for-medium-only,
+ .show-for-medium-up,
+ .show-for-xlarge-only,
+ .show-for-xlarge-up,
+ .show-for-xxlarge-only,
+ .show-for-xxlarge-up {
+ display: none!important
+ }
+ .hidden-for-large,
+ .hidden-for-large-only,
+ .hidden-for-large-up,
+ .hidden-for-medium,
+ .hidden-for-medium-only,
+ .hidden-for-medium-up,
+ .hidden-for-xlarge-only,
+ .hidden-for-xlarge-up,
+ .hidden-for-xxlarge-only,
+ .hidden-for-xxlarge-up,
+ .visible-for-large-down,
+ .visible-for-medium-down,
+ .visible-for-small,
+ .visible-for-small-down,
+ .visible-for-small-only,
+ .visible-for-small-up {
+ position: static!important;
+ height: auto;
+ width: auto;
+ overflow: visible;
+ clip: auto
+ }
+ .hidden-for-large-down,
+ .hidden-for-medium-down,
+ .hidden-for-small,
+ .hidden-for-small-down,
+ .hidden-for-small-only,
+ .hidden-for-small-up,
+ .visible-for-large,
+ .visible-for-large-only,
+ .visible-for-large-up,
+ .visible-for-medium,
+ .visible-for-medium-only,
+ .visible-for-medium-up,
+ .visible-for-xlarge-only,
+ .visible-for-xlarge-up,
+ .visible-for-xxlarge-only,
+ .visible-for-xxlarge-up {
+ position: absolute!important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px)
+ }
+ table.hide-for-large,
+ table.hide-for-large-only,
+ table.hide-for-large-up,
+ table.hide-for-medium,
+ table.hide-for-medium-only,
+ table.hide-for-medium-up,
+ table.hide-for-xlarge-only,
+ table.hide-for-xlarge-up,
+ table.hide-for-xxlarge-only,
+ table.hide-for-xxlarge-up,
+ table.show-for-large-down,
+ table.show-for-medium-down,
+ table.show-for-small,
+ table.show-for-small-down,
+ table.show-for-small-only,
+ table.show-for-small-up {
+ display: table!important
+ }
+ thead.hide-for-large,
+ thead.hide-for-large-only,
+ thead.hide-for-large-up,
+ thead.hide-for-medium,
+ thead.hide-for-medium-only,
+ thead.hide-for-medium-up,
+ thead.hide-for-xlarge-only,
+ thead.hide-for-xlarge-up,
+ thead.hide-for-xxlarge-only,
+ thead.hide-for-xxlarge-up,
+ thead.show-for-large-down,
+ thead.show-for-medium-down,
+ thead.show-for-small,
+ thead.show-for-small-down,
+ thead.show-for-small-only,
+ thead.show-for-small-up {
+ display: table-header-group!important
+ }
+ tbody.hide-for-large,
+ tbody.hide-for-large-only,
+ tbody.hide-for-large-up,
+ tbody.hide-for-medium,
+ tbody.hide-for-medium-only,
+ tbody.hide-for-medium-up,
+ tbody.hide-for-xlarge-only,
+ tbody.hide-for-xlarge-up,
+ tbody.hide-for-xxlarge-only,
+ tbody.hide-for-xxlarge-up,
+ tbody.show-for-large-down,
+ tbody.show-for-medium-down,
+ tbody.show-for-small,
+ tbody.show-for-small-down,
+ tbody.show-for-small-only,
+ tbody.show-for-small-up {
+ display: table-row-group!important
+ }
+ tr.hide-for-large,
+ tr.hide-for-large-only,
+ tr.hide-for-large-up,
+ tr.hide-for-medium,
+ tr.hide-for-medium-only,
+ tr.hide-for-medium-up,
+ tr.hide-for-xlarge-only,
+ tr.hide-for-xlarge-up,
+ tr.hide-for-xxlarge-only,
+ tr.hide-for-xxlarge-up,
+ tr.show-for-large-down,
+ tr.show-for-medium-down,
+ tr.show-for-small,
+ tr.show-for-small-down,
+ tr.show-for-small-only,
+ tr.show-for-small-up {
+ display: table-row!important
+ }
+ td.hide-for-large,
+ td.hide-for-large-only,
+ td.hide-for-large-up,
+ td.hide-for-medium,
+ td.hide-for-medium-only,
+ td.hide-for-medium-up,
+ td.hide-for-xlarge-only,
+ td.hide-for-xlarge-up,
+ td.hide-for-xxlarge-only,
+ td.hide-for-xxlarge-up,
+ td.show-for-large-down,
+ td.show-for-medium-down,
+ td.show-for-small,
+ td.show-for-small-down,
+ td.show-for-small-only,
+ td.show-for-small-up,
+ th.hide-for-large,
+ th.hide-for-large-only,
+ th.hide-for-large-up,
+ th.hide-for-medium,
+ th.hide-for-medium-only,
+ th.hide-for-medium-up,
+ th.hide-for-xlarge-only,
+ th.hide-for-xlarge-up,
+ th.hide-for-xxlarge-only,
+ th.hide-for-xxlarge-up,
+ th.show-for-large-down,
+ th.show-for-medium-down,
+ th.show-for-small,
+ th.show-for-small-down,
+ th.show-for-small-only,
+ th.show-for-small-up {
+ display: table-cell!important
+ }
+}
+
+@media only screen and (min-width:701px) {
+ .hide-for-large,
+ .hide-for-large-only,
+ .hide-for-large-up,
+ .hide-for-small,
+ .hide-for-small-down,
+ .hide-for-small-only,
+ .hide-for-xlarge-only,
+ .hide-for-xlarge-up,
+ .hide-for-xxlarge-only,
+ .hide-for-xxlarge-up,
+ .show-for-large-down,
+ .show-for-medium,
+ .show-for-medium-down,
+ .show-for-medium-only,
+ .show-for-medium-up,
+ .show-for-small-up {
+ display: inherit!important
+ }
+ .hide-for-large-down,
+ .hide-for-medium,
+ .hide-for-medium-down,
+ .hide-for-medium-only,
+ .hide-for-medium-up,
+ .hide-for-small-up,
+ .show-for-large,
+ .show-for-large-only,
+ .show-for-large-up,
+ .show-for-small,
+ .show-for-small-down,
+ .show-for-small-only,
+ .show-for-xlarge-only,
+ .show-for-xlarge-up,
+ .show-for-xxlarge-only,
+ .show-for-xxlarge-up {
+ display: none!important
+ }
+ .hidden-for-large,
+ .hidden-for-large-only,
+ .hidden-for-large-up,
+ .hidden-for-small,
+ .hidden-for-small-down,
+ .hidden-for-small-only,
+ .hidden-for-xlarge-only,
+ .hidden-for-xlarge-up,
+ .hidden-for-xxlarge-only,
+ .hidden-for-xxlarge-up,
+ .visible-for-large-down,
+ .visible-for-medium,
+ .visible-for-medium-down,
+ .visible-for-medium-only,
+ .visible-for-medium-up,
+ .visible-for-small-up {
+ position: static!important;
+ height: auto;
+ width: auto;
+ overflow: visible;
+ clip: auto
+ }
+ .hidden-for-large-down,
+ .hidden-for-medium,
+ .hidden-for-medium-down,
+ .hidden-for-medium-only,
+ .hidden-for-medium-up,
+ .hidden-for-small-up,
+ .visible-for-large,
+ .visible-for-large-only,
+ .visible-for-large-up,
+ .visible-for-small,
+ .visible-for-small-down,
+ .visible-for-small-only,
+ .visible-for-xlarge-only,
+ .visible-for-xlarge-up,
+ .visible-for-xxlarge-only,
+ .visible-for-xxlarge-up {
+ position: absolute!important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px)
+ }
+ table.hide-for-large,
+ table.hide-for-large-only,
+ table.hide-for-large-up,
+ table.hide-for-small,
+ table.hide-for-small-down,
+ table.hide-for-small-only,
+ table.hide-for-xlarge-only,
+ table.hide-for-xlarge-up,
+ table.hide-for-xxlarge-only,
+ table.hide-for-xxlarge-up,
+ table.show-for-large-down,
+ table.show-for-medium,
+ table.show-for-medium-down,
+ table.show-for-medium-only,
+ table.show-for-medium-up,
+ table.show-for-small-up {
+ display: table!important
+ }
+ thead.hide-for-large,
+ thead.hide-for-large-only,
+ thead.hide-for-large-up,
+ thead.hide-for-small,
+ thead.hide-for-small-down,
+ thead.hide-for-small-only,
+ thead.hide-for-xlarge-only,
+ thead.hide-for-xlarge-up,
+ thead.hide-for-xxlarge-only,
+ thead.hide-for-xxlarge-up,
+ thead.show-for-large-down,
+ thead.show-for-medium,
+ thead.show-for-medium-down,
+ thead.show-for-medium-only,
+ thead.show-for-medium-up,
+ thead.show-for-small-up {
+ display: table-header-group!important
+ }
+ tbody.hide-for-large,
+ tbody.hide-for-large-only,
+ tbody.hide-for-large-up,
+ tbody.hide-for-small,
+ tbody.hide-for-small-down,
+ tbody.hide-for-small-only,
+ tbody.hide-for-xlarge-only,
+ tbody.hide-for-xlarge-up,
+ tbody.hide-for-xxlarge-only,
+ tbody.hide-for-xxlarge-up,
+ tbody.show-for-large-down,
+ tbody.show-for-medium,
+ tbody.show-for-medium-down,
+ tbody.show-for-medium-only,
+ tbody.show-for-medium-up,
+ tbody.show-for-small-up {
+ display: table-row-group!important
+ }
+ tr.hide-for-large,
+ tr.hide-for-large-only,
+ tr.hide-for-large-up,
+ tr.hide-for-small,
+ tr.hide-for-small-down,
+ tr.hide-for-small-only,
+ tr.hide-for-xlarge-only,
+ tr.hide-for-xlarge-up,
+ tr.hide-for-xxlarge-only,
+ tr.hide-for-xxlarge-up,
+ tr.show-for-large-down,
+ tr.show-for-medium,
+ tr.show-for-medium-down,
+ tr.show-for-medium-only,
+ tr.show-for-medium-up,
+ tr.show-for-small-up {
+ display: table-row!important
+ }
+ td.hide-for-large,
+ td.hide-for-large-only,
+ td.hide-for-large-up,
+ td.hide-for-small,
+ td.hide-for-small-down,
+ td.hide-for-small-only,
+ td.hide-for-xlarge-only,
+ td.hide-for-xlarge-up,
+ td.hide-for-xxlarge-only,
+ td.hide-for-xxlarge-up,
+ td.show-for-large-down,
+ td.show-for-medium,
+ td.show-for-medium-down,
+ td.show-for-medium-only,
+ td.show-for-medium-up,
+ td.show-for-small-up,
+ th.hide-for-large,
+ th.hide-for-large-only,
+ th.hide-for-large-up,
+ th.hide-for-small,
+ th.hide-for-small-down,
+ th.hide-for-small-only,
+ th.hide-for-xlarge-only,
+ th.hide-for-xlarge-up,
+ th.hide-for-xxlarge-only,
+ th.hide-for-xxlarge-up,
+ th.show-for-large-down,
+ th.show-for-medium,
+ th.show-for-medium-down,
+ th.show-for-medium-only,
+ th.show-for-medium-up,
+ th.show-for-small-up {
+ display: table-cell!important
+ }
+}
+
+@media only screen and (min-width:901px) {
+ .hide-for-medium,
+ .hide-for-medium-down,
+ .hide-for-medium-only,
+ .hide-for-small,
+ .hide-for-small-down,
+ .hide-for-small-only,
+ .hide-for-xlarge-only,
+ .hide-for-xlarge-up,
+ .hide-for-xxlarge-only,
+ .hide-for-xxlarge-up,
+ .show-for-large,
+ .show-for-large-down,
+ .show-for-large-only,
+ .show-for-large-up,
+ .show-for-medium-up,
+ .show-for-small-up {
+ display: inherit!important
+ }
+ .hide-for-large,
+ .hide-for-large-down,
+ .hide-for-large-only,
+ .hide-for-large-up,
+ .hide-for-medium-up,
+ .hide-for-small-up,
+ .show-for-medium,
+ .show-for-medium-down,
+ .show-for-medium-only,
+ .show-for-small,
+ .show-for-small-down,
+ .show-for-small-only,
+ .show-for-xlarge-only,
+ .show-for-xlarge-up,
+ .show-for-xxlarge-only,
+ .show-for-xxlarge-up {
+ display: none!important
+ }
+ .hidden-for-medium,
+ .hidden-for-medium-down,
+ .hidden-for-medium-only,
+ .hidden-for-small,
+ .hidden-for-small-down,
+ .hidden-for-small-only,
+ .hidden-for-xlarge-only,
+ .hidden-for-xlarge-up,
+ .hidden-for-xxlarge-only,
+ .hidden-for-xxlarge-up,
+ .visible-for-large,
+ .visible-for-large-down,
+ .visible-for-large-only,
+ .visible-for-large-up,
+ .visible-for-medium-up,
+ .visible-for-small-up {
+ position: static!important;
+ height: auto;
+ width: auto;
+ overflow: visible;
+ clip: auto
+ }
+ .hidden-for-large,
+ .hidden-for-large-down,
+ .hidden-for-large-only,
+ .hidden-for-large-up,
+ .hidden-for-medium-up,
+ .hidden-for-small-up,
+ .visible-for-medium,
+ .visible-for-medium-down,
+ .visible-for-medium-only,
+ .visible-for-small,
+ .visible-for-small-down,
+ .visible-for-small-only,
+ .visible-for-xlarge-only,
+ .visible-for-xlarge-up,
+ .visible-for-xxlarge-only,
+ .visible-for-xxlarge-up {
+ position: absolute!important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px)
+ }
+ table.hide-for-medium,
+ table.hide-for-medium-down,
+ table.hide-for-medium-only,
+ table.hide-for-small,
+ table.hide-for-small-down,
+ table.hide-for-small-only,
+ table.hide-for-xlarge-only,
+ table.hide-for-xlarge-up,
+ table.hide-for-xxlarge-only,
+ table.hide-for-xxlarge-up,
+ table.show-for-large,
+ table.show-for-large-down,
+ table.show-for-large-only,
+ table.show-for-large-up,
+ table.show-for-medium-up,
+ table.show-for-small-up {
+ display: table!important
+ }
+ thead.hide-for-medium,
+ thead.hide-for-medium-down,
+ thead.hide-for-medium-only,
+ thead.hide-for-small,
+ thead.hide-for-small-down,
+ thead.hide-for-small-only,
+ thead.hide-for-xlarge-only,
+ thead.hide-for-xlarge-up,
+ thead.hide-for-xxlarge-only,
+ thead.hide-for-xxlarge-up,
+ thead.show-for-large,
+ thead.show-for-large-down,
+ thead.show-for-large-only,
+ thead.show-for-large-up,
+ thead.show-for-medium-up,
+ thead.show-for-small-up {
+ display: table-header-group!important
+ }
+ tbody.hide-for-medium,
+ tbody.hide-for-medium-down,
+ tbody.hide-for-medium-only,
+ tbody.hide-for-small,
+ tbody.hide-for-small-down,
+ tbody.hide-for-small-only,
+ tbody.hide-for-xlarge-only,
+ tbody.hide-for-xlarge-up,
+ tbody.hide-for-xxlarge-only,
+ tbody.hide-for-xxlarge-up,
+ tbody.show-for-large,
+ tbody.show-for-large-down,
+ tbody.show-for-large-only,
+ tbody.show-for-large-up,
+ tbody.show-for-medium-up,
+ tbody.show-for-small-up {
+ display: table-row-group!important
+ }
+ tr.hide-for-medium,
+ tr.hide-for-medium-down,
+ tr.hide-for-medium-only,
+ tr.hide-for-small,
+ tr.hide-for-small-down,
+ tr.hide-for-small-only,
+ tr.hide-for-xlarge-only,
+ tr.hide-for-xlarge-up,
+ tr.hide-for-xxlarge-only,
+ tr.hide-for-xxlarge-up,
+ tr.show-for-large,
+ tr.show-for-large-down,
+ tr.show-for-large-only,
+ tr.show-for-large-up,
+ tr.show-for-medium-up,
+ tr.show-for-small-up {
+ display: table-row!important
+ }
+ td.hide-for-medium,
+ td.hide-for-medium-down,
+ td.hide-for-medium-only,
+ td.hide-for-small,
+ td.hide-for-small-down,
+ td.hide-for-small-only,
+ td.hide-for-xlarge-only,
+ td.hide-for-xlarge-up,
+ td.hide-for-xxlarge-only,
+ td.hide-for-xxlarge-up,
+ td.show-for-large,
+ td.show-for-large-down,
+ td.show-for-large-only,
+ td.show-for-large-up,
+ td.show-for-medium-up,
+ td.show-for-small-up,
+ th.hide-for-medium,
+ th.hide-for-medium-down,
+ th.hide-for-medium-only,
+ th.hide-for-small,
+ th.hide-for-small-down,
+ th.hide-for-small-only,
+ th.hide-for-xlarge-only,
+ th.hide-for-xlarge-up,
+ th.hide-for-xxlarge-only,
+ th.hide-for-xxlarge-up,
+ th.show-for-large,
+ th.show-for-large-down,
+ th.show-for-large-only,
+ th.show-for-large-up,
+ th.show-for-medium-up,
+ th.show-for-small-up {
+ display: table-cell!important
+ }
+}
+
+@media only screen and (min-width:1101px) {
+ .hide-for-large,
+ .hide-for-large-down,
+ .hide-for-large-only,
+ .hide-for-medium,
+ .hide-for-medium-down,
+ .hide-for-medium-only,
+ .hide-for-small,
+ .hide-for-small-down,
+ .hide-for-small-only,
+ .hide-for-xxlarge-only,
+ .hide-for-xxlarge-up,
+ .show-for-large-up,
+ .show-for-medium-up,
+ .show-for-small-up,
+ .show-for-xlarge-only,
+ .show-for-xlarge-up {
+ display: inherit!important
+ }
+ .hide-for-large-up,
+ .hide-for-medium-up,
+ .hide-for-small-up,
+ .hide-for-xlarge-only,
+ .hide-for-xlarge-up,
+ .show-for-large,
+ .show-for-large-down,
+ .show-for-large-only,
+ .show-for-medium,
+ .show-for-medium-down,
+ .show-for-medium-only,
+ .show-for-small,
+ .show-for-small-down,
+ .show-for-small-only,
+ .show-for-xxlarge-only,
+ .show-for-xxlarge-up {
+ display: none!important
+ }
+ .hidden-for-large,
+ .hidden-for-large-down,
+ .hidden-for-large-only,
+ .hidden-for-medium,
+ .hidden-for-medium-down,
+ .hidden-for-medium-only,
+ .hidden-for-small,
+ .hidden-for-small-down,
+ .hidden-for-small-only,
+ .hidden-for-xxlarge-only,
+ .hidden-for-xxlarge-up,
+ .visible-for-large-up,
+ .visible-for-medium-up,
+ .visible-for-small-up,
+ .visible-for-xlarge-only,
+ .visible-for-xlarge-up {
+ position: static!important;
+ height: auto;
+ width: auto;
+ overflow: visible;
+ clip: auto
+ }
+ .hidden-for-large-up,
+ .hidden-for-medium-up,
+ .hidden-for-small-up,
+ .hidden-for-xlarge-only,
+ .hidden-for-xlarge-up,
+ .visible-for-large,
+ .visible-for-large-down,
+ .visible-for-large-only,
+ .visible-for-medium,
+ .visible-for-medium-down,
+ .visible-for-medium-only,
+ .visible-for-small,
+ .visible-for-small-down,
+ .visible-for-small-only,
+ .visible-for-xxlarge-only,
+ .visible-for-xxlarge-up {
+ position: absolute!important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px)
+ }
+ table.hide-for-large,
+ table.hide-for-large-down,
+ table.hide-for-large-only,
+ table.hide-for-medium,
+ table.hide-for-medium-down,
+ table.hide-for-medium-only,
+ table.hide-for-small,
+ table.hide-for-small-down,
+ table.hide-for-small-only,
+ table.hide-for-xxlarge-only,
+ table.hide-for-xxlarge-up,
+ table.show-for-large-up,
+ table.show-for-medium-up,
+ table.show-for-small-up,
+ table.show-for-xlarge-only,
+ table.show-for-xlarge-up {
+ display: table!important
+ }
+ thead.hide-for-large,
+ thead.hide-for-large-down,
+ thead.hide-for-large-only,
+ thead.hide-for-medium,
+ thead.hide-for-medium-down,
+ thead.hide-for-medium-only,
+ thead.hide-for-small,
+ thead.hide-for-small-down,
+ thead.hide-for-small-only,
+ thead.hide-for-xxlarge-only,
+ thead.hide-for-xxlarge-up,
+ thead.show-for-large-up,
+ thead.show-for-medium-up,
+ thead.show-for-small-up,
+ thead.show-for-xlarge-only,
+ thead.show-for-xlarge-up {
+ display: table-header-group!important
+ }
+ tbody.hide-for-large,
+ tbody.hide-for-large-down,
+ tbody.hide-for-large-only,
+ tbody.hide-for-medium,
+ tbody.hide-for-medium-down,
+ tbody.hide-for-medium-only,
+ tbody.hide-for-small,
+ tbody.hide-for-small-down,
+ tbody.hide-for-small-only,
+ tbody.hide-for-xxlarge-only,
+ tbody.hide-for-xxlarge-up,
+ tbody.show-for-large-up,
+ tbody.show-for-medium-up,
+ tbody.show-for-small-up,
+ tbody.show-for-xlarge-only,
+ tbody.show-for-xlarge-up {
+ display: table-row-group!important
+ }
+ tr.hide-for-large,
+ tr.hide-for-large-down,
+ tr.hide-for-large-only,
+ tr.hide-for-medium,
+ tr.hide-for-medium-down,
+ tr.hide-for-medium-only,
+ tr.hide-for-small,
+ tr.hide-for-small-down,
+ tr.hide-for-small-only,
+ tr.hide-for-xxlarge-only,
+ tr.hide-for-xxlarge-up,
+ tr.show-for-large-up,
+ tr.show-for-medium-up,
+ tr.show-for-small-up,
+ tr.show-for-xlarge-only,
+ tr.show-for-xlarge-up {
+ display: table-row!important
+ }
+ td.hide-for-large,
+ td.hide-for-large-down,
+ td.hide-for-large-only,
+ td.hide-for-medium,
+ td.hide-for-medium-down,
+ td.hide-for-medium-only,
+ td.hide-for-small,
+ td.hide-for-small-down,
+ td.hide-for-small-only,
+ td.hide-for-xxlarge-only,
+ td.hide-for-xxlarge-up,
+ td.show-for-large-up,
+ td.show-for-medium-up,
+ td.show-for-small-up,
+ td.show-for-xlarge-only,
+ td.show-for-xlarge-up,
+ th.hide-for-large,
+ th.hide-for-large-down,
+ th.hide-for-large-only,
+ th.hide-for-medium,
+ th.hide-for-medium-down,
+ th.hide-for-medium-only,
+ th.hide-for-small,
+ th.hide-for-small-down,
+ th.hide-for-small-only,
+ th.hide-for-xxlarge-only,
+ th.hide-for-xxlarge-up,
+ th.show-for-large-up,
+ th.show-for-medium-up,
+ th.show-for-small-up,
+ th.show-for-xlarge-only,
+ th.show-for-xlarge-up {
+ display: table-cell!important
+ }
+}
+
+@media only screen and (min-width:1301px) {
+ .hide-for-large,
+ .hide-for-large-down,
+ .hide-for-large-only,
+ .hide-for-medium,
+ .hide-for-medium-down,
+ .hide-for-medium-only,
+ .hide-for-small,
+ .hide-for-small-down,
+ .hide-for-small-only,
+ .hide-for-xlarge-only,
+ .show-for-large-up,
+ .show-for-medium-up,
+ .show-for-small-up,
+ .show-for-xlarge-up,
+ .show-for-xxlarge-only,
+ .show-for-xxlarge-up {
+ display: inherit!important
+ }
+ .hide-for-large-up,
+ .hide-for-medium-up,
+ .hide-for-small-up,
+ .hide-for-xlarge-up,
+ .hide-for-xxlarge-only,
+ .hide-for-xxlarge-up,
+ .show-for-large,
+ .show-for-large-down,
+ .show-for-large-only,
+ .show-for-medium,
+ .show-for-medium-down,
+ .show-for-medium-only,
+ .show-for-small,
+ .show-for-small-down,
+ .show-for-small-only,
+ .show-for-xlarge-only {
+ display: none!important
+ }
+ .hidden-for-large,
+ .hidden-for-large-down,
+ .hidden-for-large-only,
+ .hidden-for-medium,
+ .hidden-for-medium-down,
+ .hidden-for-medium-only,
+ .hidden-for-small,
+ .hidden-for-small-down,
+ .hidden-for-small-only,
+ .hidden-for-xlarge-only,
+ .visible-for-large-up,
+ .visible-for-medium-up,
+ .visible-for-small-up,
+ .visible-for-xlarge-up,
+ .visible-for-xxlarge-only,
+ .visible-for-xxlarge-up {
+ position: static!important;
+ height: auto;
+ width: auto;
+ overflow: visible;
+ clip: auto
+ }
+ .hidden-for-large-up,
+ .hidden-for-medium-up,
+ .hidden-for-small-up,
+ .hidden-for-xlarge-up,
+ .hidden-for-xxlarge-only,
+ .hidden-for-xxlarge-up,
+ .visible-for-large,
+ .visible-for-large-down,
+ .visible-for-large-only,
+ .visible-for-medium,
+ .visible-for-medium-down,
+ .visible-for-medium-only,
+ .visible-for-small,
+ .visible-for-small-down,
+ .visible-for-small-only,
+ .visible-for-xlarge-only {
+ position: absolute!important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px)
+ }
+ table.hide-for-large,
+ table.hide-for-large-down,
+ table.hide-for-large-only,
+ table.hide-for-medium,
+ table.hide-for-medium-down,
+ table.hide-for-medium-only,
+ table.hide-for-small,
+ table.hide-for-small-down,
+ table.hide-for-small-only,
+ table.hide-for-xlarge-only,
+ table.show-for-large-up,
+ table.show-for-medium-up,
+ table.show-for-small-up,
+ table.show-for-xlarge-up,
+ table.show-for-xxlarge-only,
+ table.show-for-xxlarge-up {
+ display: table!important
+ }
+ thead.hide-for-large,
+ thead.hide-for-large-down,
+ thead.hide-for-large-only,
+ thead.hide-for-medium,
+ thead.hide-for-medium-down,
+ thead.hide-for-medium-only,
+ thead.hide-for-small,
+ thead.hide-for-small-down,
+ thead.hide-for-small-only,
+ thead.hide-for-xlarge-only,
+ thead.show-for-large-up,
+ thead.show-for-medium-up,
+ thead.show-for-small-up,
+ thead.show-for-xlarge-up,
+ thead.show-for-xxlarge-only,
+ thead.show-for-xxlarge-up {
+ display: table-header-group!important
+ }
+ tbody.hide-for-large,
+ tbody.hide-for-large-down,
+ tbody.hide-for-large-only,
+ tbody.hide-for-medium,
+ tbody.hide-for-medium-down,
+ tbody.hide-for-medium-only,
+ tbody.hide-for-small,
+ tbody.hide-for-small-down,
+ tbody.hide-for-small-only,
+ tbody.hide-for-xlarge-only,
+ tbody.show-for-large-up,
+ tbody.show-for-medium-up,
+ tbody.show-for-small-up,
+ tbody.show-for-xlarge-up,
+ tbody.show-for-xxlarge-only,
+ tbody.show-for-xxlarge-up {
+ display: table-row-group!important
+ }
+ tr.hide-for-large,
+ tr.hide-for-large-down,
+ tr.hide-for-large-only,
+ tr.hide-for-medium,
+ tr.hide-for-medium-down,
+ tr.hide-for-medium-only,
+ tr.hide-for-small,
+ tr.hide-for-small-down,
+ tr.hide-for-small-only,
+ tr.hide-for-xlarge-only,
+ tr.show-for-large-up,
+ tr.show-for-medium-up,
+ tr.show-for-small-up,
+ tr.show-for-xlarge-up,
+ tr.show-for-xxlarge-only,
+ tr.show-for-xxlarge-up {
+ display: table-row!important
+ }
+ td.hide-for-large,
+ td.hide-for-large-down,
+ td.hide-for-large-only,
+ td.hide-for-medium,
+ td.hide-for-medium-down,
+ td.hide-for-medium-only,
+ td.hide-for-small,
+ td.hide-for-small-down,
+ td.hide-for-small-only,
+ td.hide-for-xlarge-only,
+ td.show-for-large-up,
+ td.show-for-medium-up,
+ td.show-for-small-up,
+ td.show-for-xlarge-up,
+ td.show-for-xxlarge-only,
+ td.show-for-xxlarge-up,
+ th.hide-for-large,
+ th.hide-for-large-down,
+ th.hide-for-large-only,
+ th.hide-for-medium,
+ th.hide-for-medium-down,
+ th.hide-for-medium-only,
+ th.hide-for-small,
+ th.hide-for-small-down,
+ th.hide-for-small-only,
+ th.hide-for-xlarge-only,
+ th.show-for-large-up,
+ th.show-for-medium-up,
+ th.show-for-small-up,
+ th.show-for-xlarge-up,
+ th.show-for-xxlarge-only,
+ th.show-for-xxlarge-up {
+ display: table-cell!important
+ }
+}
+
+.hide-for-portrait,
+.show-for-landscape {
+ display: inherit!important
+}
+
+.hide-for-landscape,
+.show-for-portrait {
+ display: none!important
+}
+
+table.hide-for-landscape,
+table.show-for-portrait {
+ display: table!important
+}
+
+thead.hide-for-landscape,
+thead.show-for-portrait {
+ display: table-header-group!important
+}
+
+tbody.hide-for-landscape,
+tbody.show-for-portrait {
+ display: table-row-group!important
+}
+
+tr.hide-for-landscape,
+tr.show-for-portrait {
+ display: table-row!important
+}
+
+td.hide-for-landscape,
+td.show-for-portrait,
+th.hide-for-landscape,
+th.show-for-portrait {
+ display: table-cell!important
+}
+
+@media only screen and (orientation:landscape) {
+ .hide-for-portrait,
+ .show-for-landscape {
+ display: inherit!important
+ }
+ .hide-for-landscape,
+ .show-for-portrait {
+ display: none!important
+ }
+ table.hide-for-portrait,
+ table.show-for-landscape {
+ display: table!important
+ }
+ thead.hide-for-portrait,
+ thead.show-for-landscape {
+ display: table-header-group!important
+ }
+ tbody.hide-for-portrait,
+ tbody.show-for-landscape {
+ display: table-row-group!important
+ }
+ tr.hide-for-portrait,
+ tr.show-for-landscape {
+ display: table-row!important
+ }
+ td.hide-for-portrait,
+ td.show-for-landscape,
+ th.hide-for-portrait,
+ th.show-for-landscape {
+ display: table-cell!important
+ }
+}
+
+@media only screen and (orientation:portrait) {
+ .hide-for-landscape,
+ .show-for-portrait {
+ display: inherit!important
+ }
+ .hide-for-portrait,
+ .show-for-landscape {
+ display: none!important
+ }
+ table.hide-for-landscape,
+ table.show-for-portrait {
+ display: table!important
+ }
+ thead.hide-for-landscape,
+ thead.show-for-portrait {
+ display: table-header-group!important
+ }
+ tbody.hide-for-landscape,
+ tbody.show-for-portrait {
+ display: table-row-group!important
+ }
+ tr.hide-for-landscape,
+ tr.show-for-portrait {
+ display: table-row!important
+ }
+ td.hide-for-landscape,
+ td.show-for-portrait,
+ th.hide-for-landscape,
+ th.show-for-portrait {
+ display: table-cell!important
+ }
+}
+
+.show-for-touch {
+ display: none!important
+}
+
+.hide-for-touch,
+.touch .show-for-touch {
+ display: inherit!important
+}
+
+.touch .hide-for-touch {
+ display: none!important
+}
+
+.touch table.show-for-touch,
+table.hide-for-touch {
+ display: table!important
+}
+
+.touch thead.show-for-touch,
+thead.hide-for-touch {
+ display: table-header-group!important
+}
+
+.touch tbody.show-for-touch,
+tbody.hide-for-touch {
+ display: table-row-group!important
+}
+
+.touch tr.show-for-touch,
+tr.hide-for-touch {
+ display: table-row!important
+}
+
+.touch td.show-for-touch,
+.touch th.show-for-touch,
+td.hide-for-touch,
+th.hide-for-touch {
+ display: table-cell!important
+}
+
+@media print {
+ .show-for-print {
+ display: block
+ }
+ .hide-for-print {
+ display: none
+ }
+ table.show-for-print {
+ display: table!important
+ }
+ thead.show-for-print {
+ display: table-header-group!important
+ }
+ tbody.show-for-print {
+ display: table-row-group!important
+ }
+ tr.show-for-print {
+ display: table-row!important
+ }
+ td.show-for-print,
+ th.show-for-print {
+ display: table-cell!important
+ }
+}
+
+@font-face {
+ font-family: ghpages;
+ src: url(../fonts/ghpages.eot?yziqsy);
+ src: url(../fonts/ghpages.eot?#iefixyziqsy) format("embedded-opentype"), url(../fonts/ghpages.woff?yziqsy) format("woff"), url(../fonts/ghpages.ttf?yziqsy) format("truetype"), url(../fonts/ghpages.svg?yziqsy#ghpages) format("svg");
+ font-weight: 400;
+ font-style: normal
+}
+
+.anchor[href^="#"]:before,
+.icon,
+.label.tip {
+ font-family: ghpages;
+ speak: none;
+ font-style: normal;
+ font-weight: 400;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale
+}
+
+.icon--arrow-left:before {
+ content: "\e094"
+}
+
+.icon--arrow-right:before {
+ content: "\e095"
+}
+
+.icon--arrow-up:before {
+ content: "\e096"
+}
+
+.icon--arrow-down:before {
+ content: "\e097"
+}
+
+.icon--plus:before {
+ content: "\e114"
+}
+
+.icon--minus:before {
+ content: "\e115"
+}
+
+.icon--check:before {
+ content: "\e116"
+}
+
+.icon--cross:before {
+ content: "\e117"
+}
+
+.icon--menu:before {
+ content: "\e120"
+}
+
+.icon--download:before {
+ content: "\e122"
+}
+
+.anchor[href^="#"]:before,
+.icon--anchor:before {
+ content: "\e600"
+}
+
+.icon--question:before,
+.label.tip:before {
+ content: "\e601"
+}
+
+.icon--eye:before {
+ content: "\e602"
+}
+
+.icon--stackoverflow:before {
+ content: "\e603"
+}
+
+.icon--github:before {
+ content: "\e604"
+}
+
+.icon--twitter:before {
+ content: "\e605"
+}
+
+body {
+ font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+ font-weight: 300;
+ color: #434d5a;
+ background: #434d5a;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+ font-weight: 600;
+ color: #171b20
+}
+
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small {
+ font-family: Handlee, serif;
+ font-weight: 300;
+ display: block;
+ line-height: 1em;
+ color: #596677
+}
+
+h1 {
+ font-weight: 100
+}
+
+a,
+code a>.com,
+pre a>.com {
+ color: #de6262;
+ transition: color .2s ease
+}
+
+a:hover,
+code a>.com:hover,
+pre a>.com:hover {
+ color: #00c7d7
+}
+
+a>.com {
+ border-bottom: 1px dotted
+}
+
+small {
+ font-size: .8em
+}
+
+pre .pln {
+ color: #eee
+}
+
+@media screen {
+ pre .str {
+ color: #81E77E
+ }
+ pre .kwd {
+ color: #c9c
+ }
+ pre .com {
+ color: #999
+ }
+ pre .typ {
+ color: #69c
+ }
+ pre .lit {
+ color: #f99157
+ }
+ pre .clo,
+ pre .opn,
+ pre .pun {
+ color: #dedede
+ }
+ pre .tag {
+ color: #f2777a
+ }
+ pre .atn {
+ color: #f99157
+ }
+ pre .atv {
+ color: #5cd
+ }
+ pre .dec {
+ color: #f99157
+ }
+ pre .var {
+ color: #f2777a
+ }
+ pre .fun {
+ color: #69c
+ }
+}
+
+@media screen {
+ pre.lang-css .pln {
+ color: #81E77E
+ }
+ pre.lang-css .kwd {
+ color: #dedede
+ }
+ pre.lang-css .lit {
+ color: #f2777a
+ }
+}
+
+code .pln {
+ color: #30566D
+}
+
+@media screen {
+ code .kwd,
+ code .str {
+ color: #F84E5F
+ }
+ code .com {
+ color: #85b6ff
+ }
+ code .lit,
+ code .typ {
+ color: #30566D
+ }
+ code .pun {
+ color: #333
+ }
+ code .clo,
+ code .opn {
+ color: #ccc
+ }
+ code .tag {
+ color: #f2777a
+ }
+ code .atn {
+ color: #f99157
+ }
+ code .atv {
+ color: #6cc
+ }
+ code .dec {
+ color: #f99157
+ }
+ code .var {
+ color: #f2777a
+ }
+ code .fun {
+ color: #69c
+ }
+}
+
+@media print,
+projection {
+ .str {
+ color: #060
+ }
+ .kwd {
+ color: #006;
+ font-weight: 700
+ }
+ .com {
+ color: #600;
+ font-style: italic
+ }
+ .typ {
+ color: #404;
+ font-weight: 700
+ }
+ .lit {
+ color: #044
+ }
+ .clo,
+ .opn,
+ .pun {
+ color: #440
+ }
+ .tag {
+ color: #006;
+ font-weight: 700
+ }
+ .atn {
+ color: #404
+ }
+ .atv {
+ color: #060
+ }
+}
+
+pre.prettyprint {
+ background: #434d5a;
+ font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
+ font-size: 12px;
+ line-height: 1.5
+}
+
+ol.linenums {
+ margin-top: 0;
+ margin-bottom: 0;
+ color: #FFF
+}
+
+pre.prettyprint {
+ padding: 1.2em 2em;
+ margin: 0 .2em 2em;
+ border: 0;
+ white-space: pre;
+ overflow-x: auto
+}
+
+@media only screen and (min-width:501px) {
+ pre.prettyprint {
+ padding: 1.8em 4em;
+ margin: 0 -4em 2em
+ }
+}
+
+@media only screen and (min-width:901px) {
+ pre.prettyprint {
+ padding: 1.8em 6.7em;
+ margin: 0 -6.7em 2em
+ }
+}
+
+.row>.column>pre.prettyprint,
+.row>.columns>pre.prettyprint {
+ margin: 0 .2em 2em;
+ padding: 1.8em 2em
+}
+
+pre.prettyprint ol {
+ padding-left: 30px;
+ list-style-type: decimal
+}
+
+code {
+ font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
+ font-weight: 400;
+ color: #d8007b;
+ background-color: #f5f9ff;
+ border-color: #ebf3ff;
+ border-radius: 2px;
+ padding: .03em .3em .1em
+}
+
+.ui-slider.ui-slider-horizontal {
+ margin-bottom: 4em
+}
+
+.ui-slider.ui-slider-horizontal .ui-slider-handle {
+ width: 15px;
+ height: 25px;
+ margin-left: -7px;
+ top: -7px
+}
+
+.ui-slider.ui-slider-vertical .ui-slider-handle {
+ width: 25px;
+ height: 15px;
+ margin-bottom: -7px;
+ left: -7px
+}
+
+.ui-widget-content .ui-slider-handle.ui-state-default {
+ background: #434d5a;
+ border-color: #434d5a
+}
+
+.ui-widget-content .ui-slider-handle.ui-state-active,
+.ui-widget-content .ui-slider-handle.ui-state-focus,
+.ui-widget-content .ui-slider-handle.ui-state-hover {
+ background: #00c7d7;
+ border-color: #00c7d7
+}
+
+.ui-widget-content .ui-slider-handle.ui-state-focus {
+ outline: 0;
+ border-color: #434d5a
+}
+
+.block {
+ padding: 4em 1em
+}
+
+.block:nth-child(1) {
+ padding-top: 0
+}
+
+@media only screen and (max-width:500px) {
+ .block:nth-child(1) {
+ padding-bottom: 0
+ }
+}
+
+.block:nth-child(even) {
+ background: #fff
+}
+
+.block:nth-child(even) .sub-block {
+ border-bottom-color: #c7cdd5
+}
+
+@media only screen and (min-width:501px) {
+ .block {
+ padding: 4em 3em
+ }
+}
+
+@media only screen and (min-width:901px) {
+ .block {
+ padding: 4em 5em
+ }
+}
+
+.sub-block {
+ padding: 3em .5em;
+ margin: 0 -.5em;
+ border-bottom: 1px solid #ffdac4
+}
+
+.sub-block:nth-child(1) {
+ padding-top: 0
+}
+
+@media only screen and (min-width:501px) {
+ .sub-block {
+ padding: 3em 1em;
+ margin: 0 -1em
+ }
+}
+
+@media only screen and (min-width:901px) {
+ .sub-block {
+ padding: 4em 2em;
+ margin: 0 -2em
+ }
+}
+
+.sub-block:last-child {
+ padding-bottom: 0;
+ border-bottom: none
+}
+
+.row {
+ width: auto;
+ margin: 0 -.9375rem
+}
+
+.tabs .tab-title,
+.tabs dd {
+ width: 25%
+}
+
+@media screen and (min-width:750px) {
+ .tabs .tab-title,
+ .tabs dd {
+ width: auto
+ }
+}
+
+.tabs .tab-title>a,
+.tabs dd>a {
+ font-family: inherit;
+ padding: .3em 0;
+ text-align: center;
+ background: 0 0
+}
+
+@media screen and (min-width:750px) {
+ .tabs .tab-title>a,
+ .tabs dd>a {
+ padding: .4em 2em
+ }
+}
+
+.tabs .tab-title.active>a,
+.tabs dd.active>a {
+ background: #434d5a;
+ color: #fffaf7
+}
+
+.tabs {
+ padding: 0 1em;
+ margin: 2em 0 0
+}
+
+.tabs.code {
+ font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace
+}
+
+.tabs .anchor[href^="#"]:before,
+.tabs .icon,
+.tabs .label.tip {
+ position: relative;
+ top: 2px;
+ font-size: 1.1em
+}
+
+.tabs-content {
+ margin-bottom: 2em
+}
+
+.tabs-content [id$="-result"] {
+ padding: 3em 0 1em;
+ border-top: 1px solid
+}
+
+@media only screen and (max-width:500px) {
+ .tabs-content [id$="-result"] {
+ padding-left: 2em;
+ padding-right: 2em
+ }
+}
+
+.tabs-content [id$="-html"],
+.tabs-content [id$="-css"],
+.tabs-content [id$="-js"] {
+ padding: 0
+}
+
+.button,
+button {
+ background: linear-gradient(160deg, #24a4dc 0, #295dbb 100%);
+ text-shadow: 0 1px 1px #204891;
+ padding: 1em 2em .9em;
+ border-radius: 2px;
+ box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0);
+ transition: all .2s ease
+}
+
+.button.dark,
+button.dark {
+ background: linear-gradient(160deg, #2c4c54 0, #362a44 100%)
+}
+
+.button.grey,
+button.grey {
+ background: linear-gradient(160deg, #8d9496 0, #585c5e 100%)
+}
+
+.button:hover,
+button:hover {
+ box-shadow: inset 0 0 1px 1px #204891
+}
+
+.button .anchor[href^="#"]:before,
+.button .icon,
+.button .label.tip,
+button .anchor[href^="#"]:before,
+button .icon,
+button .label.tip {
+ display: inline-block
+}
+
+.button .icon.left,
+.button .left.anchor[href^="#"]:before,
+.button .left.label.tip,
+button .icon.left,
+button .left.anchor[href^="#"]:before,
+button .left.label.tip {
+ margin-right: 1em
+}
+
+.button .icon.right,
+.button .right.anchor[href^="#"]:before,
+.button .right.label.tip,
+button .icon.right,
+button .right.anchor[href^="#"]:before,
+button .right.label.tip {
+ margin-left: 1em
+}
+
+.label.tip {
+ position: absolute;
+ -webkit-transform: translate(-3.5em, 2px);
+ -ms-transform: translate(-3.5em, 2px);
+ transform: translate(-3.5em, 2px)
+}
+
+.inline-list,
+.share-links {
+ margin: 0 0 1em
+}
+
+.inline-list li,
+.share-links li {
+ display: inline-block;
+ margin: .5em 1em;
+ float: none
+}
+
+@media screen and (max-width:1000px) {
+ .table-wrapper {
+ overflow-x: scroll
+ }
+ .table-wrapper table {
+ min-width: 800px
+ }
+}
+
+table {
+ font-weight: 400;
+ width: 100%
+}
+
+table tr td,
+table tr th {
+ border-right: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
+ vertical-align: top
+}
+
+table tr td:last-child,
+table tr th:last-child {
+ border-right: none
+}
+
+table tr:last-child td,
+table tr:last-child th {
+ border-bottom: none
+}
+
+table tr.divider td {
+ height: 3px;
+ background: #ddd;
+ padding: 0;
+ border: none
+}
+
+table code {
+ font-weight: 400
+}
+
+table p {
+ font-size: inherit;
+ margin-top: 0
+}
+
+table p:last-child,
+table p:only-child {
+ margin: 0
+}
+
+.emoji {
+ font-size: 1em;
+ max-height: 1em;
+ position: relative;
+ top: -2px
+}
+
+body.nav--active {
+ overflow: hidden
+}
+
+@media only screen and (min-width:701px) {
+ body.nav--active {
+ overflow: auto
+ }
+}
+
+.sidebar {
+ position: fixed;
+ width: 84%;
+ font-size: 1em;
+ padding: 1em 1.5em 4em;
+ top: 0;
+ left: 0;
+ height: 100%;
+ background: #434d5a;
+ color: #fffaf7;
+ overflow: auto;
+ z-index: 4815;
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ transition: -webkit-transform .3s ease, width .3s ease, padding .3s ease;
+ transition: transform .3s ease, width .3s ease, padding .3s ease
+}
+
+.sidebar--open {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0)
+}
+
+@media only screen and (min-width:701px) {
+ .sidebar {
+ font-size: .8em;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ width: 220px
+ }
+}
+
+@media only screen and (min-width:901px) {
+ .sidebar {
+ width: 280px;
+ font-size: 1em
+ }
+}
+
+.sidebar__title {
+ font-size: 1.4em;
+ color: #fffaf7
+}
+
+.sidebar__nav {
+ list-style: none;
+ margin: 0;
+ padding: 0 1em;
+ font-size: 1em
+}
+
+.sidebar__item a {
+ display: block;
+ padding: .2em 0;
+ color: #c7cdd5;
+ transition: all .2s ease
+}
+
+.sidebar__item a:hover {
+ color: #f3f4f6
+}
+
+.sidebar__item:before {
+ content: "\2023";
+ position: absolute;
+ -webkit-transform: translate(-2em, .1em);
+ -ms-transform: translate(-2em, .1em);
+ transform: translate(-2em, .1em);
+ opacity: 0;
+ transition: all .2s ease
+}
+
+.sidebar__item--active:before,
+.sidebar__item:hover:before {
+ -webkit-transform: translate(-1em, .1em);
+ -ms-transform: translate(-1em, .1em);
+ transform: translate(-1em, .1em);
+ opacity: 1
+}
+
+.sidebar__item--active>a,
+.sidebar__item--active>a:hover {
+ color: #00c7d7
+}
+
+.sidebar__item .sidebar__nav {
+ font-size: .9em
+}
+
+.sidebar__toggle {
+ position: fixed;
+ font-size: 1.5em;
+ width: 1em;
+ height: 1em;
+ bottom: .3em;
+ right: .3em;
+ padding: 1em;
+ overflow: hidden;
+ border-radius: 4px;
+ background: #434d5a;
+ transition: all .4s ease;
+ z-index: 4815162342
+}
+
+@media only screen and (min-width:701px) {
+ .sidebar__toggle {
+ opacity: 0;
+ -webkit-transform: translate(5em, 0);
+ -ms-transform: translate(5em, 0);
+ transform: translate(5em, 0)
+ }
+}
+
+.sidebar__toggle [class^=icon] {
+ position: absolute;
+ width: 1em;
+ height: 1em;
+ left: 50%;
+ top: 50%;
+ margin: -.5em 0 0 -.5em;
+ transition: all .3s ease
+}
+
+.sidebar__toggle .icon--cross {
+ opacity: 0;
+ -webkit-transform: translate(-2em, 0);
+ -ms-transform: translate(-2em, 0);
+ transform: translate(-2em, 0)
+}
+
+.sidebar__toggle--active {
+ color: #00c7d7
+}
+
+.sidebar__toggle--active .icon--cross {
+ opacity: 1;
+ -webkit-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0)
+}
+
+.sidebar__toggle--active .icon--menu {
+ opacity: 0;
+ -webkit-transform: translate(2em, 0);
+ -ms-transform: translate(2em, 0);
+ transform: translate(2em, 0)
+}
+
+.content {
+ padding-left: 0;
+ padding-bottom: 12em;
+ transition: -webkit-transform .3s ease, width .3s ease, padding .3s ease;
+ transition: transform .3s ease, width .3s ease, padding .3s ease
+}
+
+@media only screen and (min-width:701px) {
+ .content {
+ padding-left: 220px
+ }
+}
+
+@media only screen and (min-width:901px) {
+ .content {
+ padding-left: 280px
+ }
+}
+
+.content__main h2 {
+ font-size: 2em
+}
+
+.content__main h3 {
+ font-size: 1.5em;
+ color: #596677
+}
+
+.content__main h4 {
+ font-size: 1.3em;
+ color: #596677
+}
+
+.content__main h2 .emoji,
+.content__main h3 .emoji,
+.content__main h4 .emoji {
+ top: -3px
+}
+
+.uppercase {
+ text-transform: uppercase
+}
+
+@media screen and (max-width:1100px) {
+ .install-columns .column,
+ .install-columns .columns {
+ float: none;
+ width: 100%;
+ position: static
+ }
+}
+
+.header {
+ margin: 1em -1em 0;
+ padding: 4em 0 4.5em;
+ text-align: center;
+ color: #fffaf7;
+ background: linear-gradient(148deg, #de6262 10%, #ffb88c 90%);
+ box-shadow: inset 0 0 100px -20px rgba(192, 72, 100, .4);
+ text-shadow: 0 1px 1px rgba(192, 72, 100, .7)
+}
+
+@media only screen and (min-width:501px) {
+ .header {
+ margin: 2em -1em 0;
+ border-radius: 4px
+ }
+}
+
+@media only screen and (min-width:901px) {
+ .header {
+ margin: 3em -2em 0
+ }
+}
+
+@media only screen and (min-width:1301px) {
+ .header {
+ padding: 3em 4em 3.5em;
+ text-align: left
+ }
+}
+
+.header a {
+ color: #fff
+}
+
+.header small {
+ color: #fff;
+ opacity: .8
+}
+
+@media screen and (max-width:900px) {
+ .header h1 {
+ font-size: 2em
+ }
+}
+
+.share-links {
+ text-align: center;
+ font-weight: 400
+}
+
+.share-links .share-links__item {
+ margin: .5em 1em
+}
+
+@media screen and (max-width:936px) {
+ .share-links .share-links__item {
+ font-size: .9em;
+ margin: .5em
+ }
+}
+
+@media screen and (max-width:430px) {
+ .share-links .share-links__item {
+ margin: .4em 0 0;
+ display: block
+ }
+ .share-links .share-links__item:nth-child(1) {
+ margin-top: 0
+ }
+}
+
+@media only screen and (min-width:1301px) {
+ .share-links {
+ text-align: left
+ }
+}
+
+@media only screen and (max-width:500px) {
+ .share-links {
+ margin: 1em 0
+ }
+}
+
+.options-table tr td:nth-child(2) {
+ min-width: 18em
+}
+
+.step-table tr td {
+ vertical-align: middle
+}
+
+.step-table tr td:nth-child(3) {
+ min-width: 350px
+}
+
+.step-table .ui-slider.ui-slider-horizontal {
+ margin: .6em 0 1.4em;
+ height: 5px;
+ background: #00c7d7;
+ border-color: #00c7d7
+}
+
+.step-table .ui-slider.ui-slider-horizontal .ui-slider-handle {
+ height: 17px
+}
+
+.step-table .ui-slider.ui-slider-horizontal .ui-slider-pip {
+ top: 8px
+}
+
+.step-table .ui-slider.ui-slider-horizontal .ui-slider-pip[class*=ui-slider-pip-selected] {
+ color: #d8007b
+}
+
+.browser-list {
+ list-style: none;
+ padding: 0;
+ margin: 2em 0;
+ overflow: hidden
+}
+
+.browser-list__item {
+ float: left;
+ width: 16%;
+ margin: 0 2%;
+ text-align: center;
+ font-weight: 800
+}
+
+.anchor[href^="#"] {
+ color: #434d5a
+}
+
+.anchor[href^="#"]:before {
+ position: absolute;
+ font-size: .7em;
+ -webkit-transform: translate(-3em, .5em);
+ -ms-transform: translate(-3em, .5em);
+ transform: translate(-3em, .5em);
+ transition: all .2s ease;
+ color: #de6262;
+ opacity: 0
+}
+
+.anchor[href^="#"]:focus,
+.anchor[href^="#"]:hover,
+.block:target>h2>.anchor,
+.sub-block:target>h3>.anchor {
+ outline: 0
+}
+
+@media only screen and (min-width:701px) {
+ .anchor[href^="#"]:focus:before,
+ .anchor[href^="#"]:hover:before {
+ opacity: 1;
+ -webkit-transform: translate(-1.5em, .5em);
+ -ms-transform: translate(-1.5em, .5em);
+ transform: translate(-1.5em, .5em)
+ }
+}
+
+@media only screen and (min-width:701px) {
+ .block:target>h2>.anchor:before,
+ .sub-block:target>h3>.anchor:before {
+ opacity: 1;
+ -webkit-transform: translate(-1.5em, .5em);
+ -ms-transform: translate(-1.5em, .5em);
+ transform: translate(-1.5em, .5em)
+ }
+}
+
+#circles-slider.ui-slider {
+ border-radius: 20px;
+ background: #434d5a;
+ border: none;
+ height: 10px;
+ margin: 1em 4em 4em
+}
+
+#circles-slider .ui-slider-handle {
+ border-radius: 23px;
+ height: 23px;
+ width: 23px;
+ top: -7px;
+ margin-left: -11px;
+ border: 2px solid #fffaf7
+}
+
+#circles-slider .ui-slider-pip {
+ top: 3px
+}
+
+#circles-slider .ui-slider-pip .ui-slider-line {
+ width: 4px;
+ height: 4px;
+ border-radius: 4px;
+ margin-left: -2px;
+ background: #fffaf7
+}
+
+#circles-slider .ui-slider-pip.ui-slider-pip-first,
+#circles-slider .ui-slider-pip.ui-slider-pip-last {
+ top: -7px
+}
+
+#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-line,
+#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-line {
+ display: none
+}
+
+#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label,
+#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label {
+ margin: 0
+}
+
+#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
+ left: -2em;
+ text-align: right
+}
+
+#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label {
+ left: 2em;
+ text-align: left
+}
+
+#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
+ font-weight: 400
+}
+
+#circles-slider .ui-slider-pip.ui-slider-pip-selected {
+ font-weight: 700
+}
+
+#circles-slider .ui-slider-pip.ui-slider-pip-selected,
+#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
+ color: #434d5a
+}
+
+#alternating-slider .ui-slider-pip .ui-slider-line {
+ height: 8px;
+ top: -5px
+}
+
+#alternating-slider .ui-slider-pip:nth-child(even) {
+ top: -33px;
+ height: 15px;
+ -webkit-transform: scale(.8) translateY(3px);
+ -ms-transform: scale(.8) translateY(3px);
+ transform: scale(.8) translateY(3px);
+ opacity: .8
+}
+
+#alternating-slider .ui-slider-pip:nth-child(even) .ui-slider-line {
+ top: 22px;
+ height: 9px
+}
+
+#alternating-slider .ui-slider-pip:nth-child(even).ui-slider-pip-selected-1 .ui-slider-label,
+#alternating-slider .ui-slider-pip:nth-child(even).ui-slider-pip-selected-2 .ui-slider-label,
+#alternating-slider .ui-slider-pip:nth-child(even).ui-slider-pip-selected-3 .ui-slider-label,
+#alternating-slider .ui-slider-pip:nth-child(even).ui-slider-pip-selected-4 .ui-slider-label {
+ top: -3px
+}
+
+#alternating-slider .ui-slider-pip-initial-1 .ui-slider-label {
+ color: #E80949
+}
+
+#alternating-slider .ui-slider-pip-initial-2 .ui-slider-label {
+ color: #FF03CB
+}
+
+#alternating-slider .ui-slider-pip-initial-3 .ui-slider-label {
+ color: #C309E8
+}
+
+#alternating-slider .ui-slider-pip-initial-4 .ui-slider-label {
+ color: #920AFF
+}
+
+#alternating-slider .ui-slider-pip-selected-1 .ui-slider-label,
+#alternating-slider .ui-slider-pip-selected-2 .ui-slider-label,
+#alternating-slider .ui-slider-pip-selected-3 .ui-slider-label,
+#alternating-slider .ui-slider-pip-selected-4 .ui-slider-label {
+ color: #fff;
+ width: 2.4em;
+ padding: 4px 0;
+ margin-left: -1.2em;
+ border-radius: 2px
+}
+
+#alternating-slider .ui-slider-pip-selected-1 .ui-slider-label {
+ background-color: #E80949
+}
+
+#alternating-slider .ui-slider-pip-selected-2 .ui-slider-label {
+ background-color: #FF03CB
+}
+
+#alternating-slider .ui-slider-pip-selected-3 .ui-slider-label {
+ background-color: #C309E8
+}
+
+#alternating-slider .ui-slider-pip-selected-4 .ui-slider-label {
+ background-color: #920AFF
+}
+
+#alternating-slider .ui-slider-tip {
+ width: 34px;
+ margin-left: -17px;
+ top: -1px;
+ background: #00c7d7;
+ color: #fff;
+ border: none;
+ line-height: 27px;
+ height: 25px
+}
+
+#alternating-slider .ui-slider-tip:after,
+#alternating-slider .ui-slider-tip:before {
+ display: none
+}
+
+#alternating-slider .ui-slider-handle.ui-state-active .ui-slider-tip,
+#alternating-slider .ui-slider-handle.ui-state-focus .ui-slider-tip,
+#alternating-slider .ui-slider-handle.ui-state-hover .ui-slider-tip,
+#alternating-slider .ui-slider-handle:focus .ui-slider-tip,
+#alternating-slider .ui-slider-handle:hover .ui-slider-tip {
+ top: -1px
+}
+
+#alternating-slider .ui-slider-handle.ui-state-focus {
+ z-index: 100
+}
+
+#scale-slider.ui-slider {
+ border-radius: 0;
+ background: #c7cdd5;
+ border: none;
+ height: 2px;
+ margin: 1em 4em 4em
+}
+
+@media screen and (max-width:1040px) {
+ #scale-slider.ui-slider {
+ margin: 1em .5em 4em
+ }
+}
+
+#scale-slider.ui-slider .ui-slider-range {
+ background: linear-gradient(to right, #434d5a 0, #00c7d7 50%, #434d5a 100%);
+ border: 1px solid rgba(67, 77, 90, .5);
+ height: 4px;
+ top: -1px;
+ transition: all .2s ease-out
+}
+
+#scale-slider .ui-slider-handle {
+ border-radius: 2px;
+ height: 20px;
+ width: 12px;
+ top: -26px;
+ border: none
+}
+
+#scale-slider .ui-slider-handle:nth-of-type(n+1) {
+ -webkit-transform: rotateZ(-10deg);
+ transform: rotateZ(-10deg);
+ margin-left: -9px
+}
+
+#scale-slider .ui-slider-handle:nth-of-type(n+2) {
+ -webkit-transform: rotateZ(10deg);
+ transform: rotateZ(10deg);
+ margin-left: -3px
+}
+
+#scale-slider .ui-slider-handle:after {
+ content: "";
+ border: 6px solid transparent;
+ width: 0;
+ height: 0;
+ position: absolute;
+ bottom: -11px;
+ border-top-color: #434d5a
+}
+
+#scale-slider .ui-slider-handle.ui-slider-handle.ui-state-active:after,
+#scale-slider .ui-slider-handle.ui-slider-handle.ui-state-focus:after,
+#scale-slider .ui-slider-handle.ui-slider-handle.ui-state-hover:after {
+ border-top-color: #00c7d7
+}
+
+#scale-slider .ui-slider-pip {
+ top: 2px
+}
+
+#scale-slider .ui-slider-pip .ui-slider-label {
+ display: none;
+ background: rgba(67, 77, 90, 0);
+ color: #434d5a;
+ border-radius: 4px;
+ padding: .3em 0;
+ width: 2.4em;
+ margin-left: -1.2em;
+ transition: all .2s ease-out
+}
+
+#scale-slider .ui-slider-pip .ui-slider-line {
+ height: 4px
+}
+
+#scale-slider .ui-slider-pip:nth-of-type(5n+3) .ui-slider-line {
+ height: 8px
+}
+
+#scale-slider .ui-slider-pip:nth-of-type(10n+3) .ui-slider-line {
+ height: 12px
+}
+
+#scale-slider .ui-slider-pip:nth-of-type(10n+3) .ui-slider-label {
+ top: 16px;
+ display: block
+}
+
+#scale-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-line {
+ margin-left: -1px
+}
+
+#scale-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-label,
+#scale-slider .ui-slider-pip.ui-slider-pip-selected-first .ui-slider-label,
+#scale-slider .ui-slider-pip.ui-slider-pip-selected-second .ui-slider-label {
+ background: rgba(67, 77, 90, .7);
+ color: #fffaf7
+}
+
+#styling-rainbow-result {
+ padding: 5em 5em 1em
+}
+
+#rainbow-slider {
+ background: linear-gradient(to right, #390000 0, #ff4c4c 16%, #f7f733 32%, #3be240 50%, #6dccff 68%, #ca5aed 84%, #4c0041 100%) no-repeat;
+ background-size: cover;
+ border-radius: 30px;
+ border: none;
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
+ height: 10px
+}
+
+#rainbow-slider .ui-slider-handle {
+ background: rgba(255, 255, 255, .21);
+ border-color: rgba(0, 0, 0, .56);
+ box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, .89);
+ border-radius: 20px;
+ top: -8px
+}
+
+#rainbow-slider .ui-slider-handle.ui-state-active,
+#rainbow-slider .ui-slider-handle.ui-state-focus,
+#rainbow-slider .ui-slider-handle.ui-state-hover,
+#rainbow-slider .ui-slider-handle:focus,
+#rainbow-slider .ui-slider-handle:hover {
+ background: rgba(255, 255, 255, .21)
+}
+
+#rainbow-slider .ui-slider-pip .ui-slider-label {
+ width: 6em;
+ margin-left: -3em
+}
+
+#rainbow-slider .ui-slider-pip .ui-slider-label[data-value="0"] {
+ color: #390000
+}
+
+#rainbow-slider .ui-slider-pip .ui-slider-label[data-value="1"] {
+ color: #ff4c4c
+}
+
+#rainbow-slider .ui-slider-pip .ui-slider-label[data-value="2"] {
+ color: #ed6b25
+}
+
+#rainbow-slider .ui-slider-pip .ui-slider-label[data-value="3"] {
+ color: #f7f733
+}
+
+#rainbow-slider .ui-slider-pip .ui-slider-label[data-value="4"] {
+ color: #8beb3a
+}
+
+#rainbow-slider .ui-slider-pip .ui-slider-label[data-value="5"] {
+ color: #3be240
+}
+
+#rainbow-slider .ui-slider-pip .ui-slider-label[data-value="6"] {
+ color: #46dbce
+}
+
+#rainbow-slider .ui-slider-pip .ui-slider-label[data-value="7"] {
+ color: #6dccff
+}
+
+#rainbow-slider .ui-slider-pip .ui-slider-label[data-value="8"] {
+ color: #ad6bef
+}
+
+#rainbow-slider .ui-slider-pip .ui-slider-label[data-value="9"] {
+ color: #ca5aed
+}
+
+#rainbow-slider .ui-slider-pip .ui-slider-label[data-value="10"] {
+ color: #4c0041
+}
+
+#rainbow-slider .ui-slider-pip .ui-slider-line {
+ top: 1px
+}
+
+#rainbow-slider .ui-slider-pip:nth-of-type(odd) {
+ top: auto;
+ bottom: 32px
+}
+
+#rainbow-slider .ui-slider-pip:nth-of-type(odd) .ui-slider-line {
+ top: 21px
+}
+
+#styling-flat .vertical {
+ text-align: center
+}
+
+[id*=flat-slider].ui-slider {
+ background: #e8e2d3;
+ border: none;
+ border-radius: 0
+}
+
+[id*=flat-slider].ui-slider .ui-slider-handle {
+ width: 20px;
+ height: 20px;
+ border-radius: 50% 50% 0;
+ border-color: transparent;
+ transition: border .4s ease
+}
+
+[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-active,
+[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-focus,
+[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-hover {
+ border-color: #172f38
+}
+
+[id*=flat-slider].ui-slider .ui-slider-pip .ui-slider-line {
+ background: #e8e2d3;
+ transition: all .4s ease
+}
+
+[id*=flat-slider].ui-slider.ui-slider-horizontal {
+ height: 6px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-handle {
+ -webkit-transform: rotateZ(45deg);
+ transform: rotateZ(45deg);
+ top: -25px;
+ margin-left: -10px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip {
+ top: 10px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip .ui-slider-line {
+ width: 2px;
+ height: 10px;
+ margin-left: -1px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line {
+ height: 20px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
+ height: 12px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical {
+ width: 6px;
+ height: 125px;
+ display: inline-block;
+ margin: 0 15%
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle {
+ -webkit-transform: rotateZ(-45deg);
+ transform: rotateZ(-45deg);
+ left: -25px;
+ margin-bottom: -10px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip {
+ left: 10px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip .ui-slider-line {
+ height: 2px;
+ width: 10px;
+ margin-top: -1px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line {
+ width: 20px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
+ width: 12px
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle .ui-slider-tip,
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle[class*=ui-state-] .ui-slider-tip {
+ visibility: visible;
+ opacity: 1;
+ border: none;
+ background: 0 0;
+ left: 50%;
+ width: 30px;
+ margin-left: -15px;
+ text-align: center;
+ color: #fff;
+ font-weight: 400;
+ top: 10px;
+ -webkit-transform: rotateZ(45deg);
+ transform: rotateZ(45deg)
+}
+
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle .ui-slider-tip:before,
+[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle[class*=ui-state-] .ui-slider-tip:before {
+ display: none
+}
+
+#flat-slider .ui-slider-handle,
+#flat-slider .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line,
+#flat-slider .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
+#flat-slider .ui-slider-range {
+ background-color: #25daa5
+}
+
+#flat-slider-vertical-1 .ui-slider-handle,
+#flat-slider-vertical-1 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line,
+#flat-slider-vertical-1 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
+#flat-slider-vertical-1 .ui-slider-range {
+ background-color: #f27793
+}
+
+#flat-slider-vertical-2 .ui-slider-handle,
+#flat-slider-vertical-2 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line,
+#flat-slider-vertical-2 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
+#flat-slider-vertical-2 .ui-slider-range {
+ background-color: #bd77f2
+}
+
+#flat-slider-vertical-3 .ui-slider-handle,
+#flat-slider-vertical-3 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line,
+#flat-slider-vertical-3 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
+#flat-slider-vertical-3 .ui-slider-range {
+ background-color: #67c3ec
+}
+
+#double-label-slider.ui-slider {
+ margin-top: 24px;
+ height: 6px;
+ background: #ddd;
+ border: none;
+ border-radius: 0
+}
+
+#double-label-slider.ui-slider .ui-slider-handle {
+ background: #25daa5;
+ border: none;
+ width: 18px;
+ height: 18px;
+ margin-left: -9px;
+ border-radius: 100%;
+ transition: box-shadow .2s ease
+}
+
+#double-label-slider.ui-slider .ui-slider-handle.ui-state-active,
+#double-label-slider.ui-slider .ui-slider-handle.ui-state-focus,
+#double-label-slider.ui-slider .ui-slider-handle.ui-state-hover {
+ box-shadow: 0 0 0 2px #25daa5
+}
+
+#double-label-slider.ui-slider .ui-slider-pip {
+ top: -3px
+}
+
+#double-label-slider.ui-slider .ui-slider-pip .ui-slider-line {
+ background: #fff;
+ width: 12px;
+ height: 12px;
+ margin-left: -6px;
+ box-shadow: 0 0 0 2px #25daa5;
+ border-radius: 100%;
+ transition: all .4s ease
+}
+
+#double-label-slider.ui-slider .ui-slider-pip .ui-slider-label,
+#double-label-slider.ui-slider .ui-slider-pip .ui-slider-label i,
+#double-label-slider.ui-slider .ui-slider-pip .ui-slider-label span {
+ width: 100px;
+ margin-left: -50px;
+ text-align: center
+}
+
+#double-label-slider.ui-slider .ui-slider-pip .ui-slider-label {
+ color: #888
+}
+
+#double-label-slider.ui-slider .ui-slider-pip .ui-slider-label i {
+ font-style: normal;
+ font-size: 1.8em;
+ position: absolute;
+ top: -36px
+}
+
+@media screen and (max-width:500px) {
+ #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label i {
+ font-size: 1.4em
+ }
+}
+
+#double-label-slider.ui-slider .ui-slider-pip .ui-slider-label span {
+ opacity: .6;
+ font-size: 1.2em;
+ line-height: 1.3;
+ position: absolute;
+ top: 18px;
+ transition: opacity .3s ease
+}
+
+@media screen and (max-width:500px) {
+ #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label span {
+ font-size: 1.1em
+ }
+}
+
+#double-label-slider.ui-slider .ui-slider-pip.ui-slider-pip-initial .ui-slider-label,
+#double-label-slider.ui-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-label,
+#double-label-slider.ui-slider .ui-slider-pip:focus .ui-slider-label,
+#double-label-slider.ui-slider .ui-slider-pip:hover .ui-slider-label {
+ font-weight: 400
+}
+
+#double-label-slider.ui-slider .ui-slider-pip.ui-slider-pip-initial .ui-slider-label span,
+#double-label-slider.ui-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-label span,
+#double-label-slider.ui-slider .ui-slider-pip:focus .ui-slider-label span,
+#double-label-slider.ui-slider .ui-slider-pip:hover .ui-slider-label span {
+ opacity: 1
+}
+
+#double-label-slider.ui-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-label {
+ color: #000
+}
+
+.emoji-slider-question {
+ font-size: 1.4em;
+ transition: all .15s ease
+}
+
+@media screen and (max-width:950px) {
+ .emoji-slider-question {
+ font-size: 1.2em
+ }
+}
+
+#emoji-slider {
+ height: 5px;
+ margin-top: 100px
+}
+
+#emoji-slider .ui-slider-handle {
+ top: -6px;
+ height: 16px;
+ width: 16px;
+ -webkit-transform: rotateZ(45deg);
+ transform: rotateZ(45deg)
+}
+
+#emoji-slider .ui-slider-pip {
+ top: -50px;
+ margin-left: -1.2em
+}
+
+#emoji-slider .emoji {
+ max-height: 2em;
+ -webkit-transform: scale(.9);
+ -ms-transform: scale(.9);
+ transform: scale(.9);
+ transition: -webkit-transform .2s ease-out;
+ transition: transform .2s ease-out
+}
+
+@media screen and (max-width:950px) {
+ #emoji-slider .emoji {
+ -webkit-transform: scale(.7);
+ -ms-transform: scale(.7);
+ transform: scale(.7)
+ }
+}
+
+#emoji-slider .ui-slider-pip-selected .emoji {
+ -webkit-transform: scale(1.3) translateY(-5px);
+ -ms-transform: scale(1.3) translateY(-5px);
+ transform: scale(1.3) translateY(-5px)
+}
+
+@media screen and (max-width:950px) {
+ #emoji-slider .ui-slider-pip-selected .emoji {
+ -webkit-transform: scale(1.1) translateY(-5px);
+ -ms-transform: scale(1.1) translateY(-5px);
+ transform: scale(1.1) translateY(-5px)
+ }
+}
+
+#emoji-slider .ui-slider-line {
+ display: none
+}
+
+#styling-after-slider {
+ margin-top: 3em
+}
+
+#styling-after-slider .ui-slider-pip {
+ top: -12px
+}
+
+#styling-after-slider .ui-slider-pip .ui-slider-label {
+ top: -18px
+}
+
+#prefix-suffix-slider .ui-slider-label {
+ margin-left: -1.75em
+}
+
+@media screen and (max-width:1040px) {
+ #prefix-suffix-slider .ui-slider-pip:nth-of-type(2n+1) .ui-slider-label {
+ display: none
+ }
+}
+
+#hanzi-labels-slider {
+ font-family: SimHei, Hei, sans-serif
+}
+
+#hanzi-labels-slider .ui-slider-handle .ui-slider-tip {
+ font-size: 1.4em;
+ width: 42px;
+ margin-left: -22px;
+ height: 33px;
+ line-height: 30px;
+ top: -40px;
+ background: #434d5a;
+ border-color: #434d5a;
+ color: #fff
+}
+
+#hanzi-labels-slider .ui-slider-handle .ui-slider-tip:after,
+#hanzi-labels-slider .ui-slider-handle .ui-slider-tip:before {
+ border-top-color: #434d5a
+}
+
+#hanzi-labels-slider .ui-slider-pip {
+ font-size: 1.2em
+}
+
+#steps-fivepercent-slider .ui-slider-tip {
+ visibility: visible;
+ opacity: 1;
+ top: -30px
+}
+
+#vertical-slider {
+ height: 150px;
+ margin-left: 30px
+}
+
+@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,600);
+[id*=flat-slider].ui-slider,
+[id*=flat-slider].ui-slider .ui-slider-pip .ui-slider-line {
+ background: #7e8c9f;
+}
+
+[id*=flat-slider].ui-slider .ui-slider-handle .ui-slider-tip:after {
+ border-left-color: #434d5a;
+}
+
+[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-hover,
+[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-focus,
+[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-active {
+ border-color: white;
+}
+
+body {
+ background: #434d5a;
+ font-family: "Roboto";
+}
+
+h1 {
+ color: #7e8c9f;
+ padding: 0;
+ margin: 0;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: default;
+}
+
+p {
+ color: #c7cdd5;
+ text-align: center;
+ margin: 0.5em 1em;
+ font-weight: 300;
+ font-size: 1.3em;
+}
+
+p:nth-of-type(1) {
+ margin-top: 3em;
+}
+
+p:last-child {
+ font-weight: 100;
+ font-size: 1em;
+}
+
+p:last-child a {
+ font-weight: 300;
+}
+
+.stuff {
+ padding: 50px 50px 50px;
+ max-width: 900px;
+ margin: auto;
+}
\ No newline at end of file
diff --git a/RpiLedBars/web/slider/jquery-ui-slider-pips.css b/RpiLedBars/web/slider/jquery-ui-slider-pips.css
new file mode 100644
index 0000000..94a1755
--- /dev/null
+++ b/RpiLedBars/web/slider/jquery-ui-slider-pips.css
@@ -0,0 +1,326 @@
+/*! jQuery-ui-Slider-Pips - v1.11.4 - 2016-09-04
+* Copyright (c) 2016 Simon Goellner ; Licensed MIT */
+
+/* HORIZONTAL */
+/* increase bottom margin to fit the pips */
+.ui-slider-horizontal.ui-slider-pips {
+ margin-bottom: 1.4em;
+}
+
+/* default hide the labels and pips that arnt visible */
+/* we just use css to hide incase we want to show certain */
+/* labels/pips individually later */
+.ui-slider-pips .ui-slider-label,
+.ui-slider-pips .ui-slider-pip-hide {
+ display: none;
+}
+
+/* now we show any labels that we've set to show in the options */
+.ui-slider-pips .ui-slider-pip-label .ui-slider-label {
+ display: block;
+}
+
+/* PIP/LABEL WRAPPER */
+/* position each pip absolutely just below the default slider */
+/* and also prevent accidental selection */
+.ui-slider-pips .ui-slider-pip {
+ width: 2em;
+ height: 1em;
+ line-height: 1em;
+ position: absolute;
+ font-size: 0.8em;
+ color: #999;
+ overflow: visible;
+ text-align: center;
+ top: 20px;
+ left: 20px;
+ margin-left: -1em;
+ cursor: pointer;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ui-state-disabled.ui-slider-pips .ui-slider-pip {
+ cursor: default;
+}
+
+/* little pip/line position & size */
+.ui-slider-pips .ui-slider-line {
+ background: #999;
+ width: 1px;
+ height: 3px;
+ position: absolute;
+ left: 50%;
+}
+
+/* the text label postion & size */
+/* it overflows so no need for width to be accurate */
+.ui-slider-pips .ui-slider-label {
+ position: absolute;
+ top: 5px;
+ left: 50%;
+ margin-left: -1em;
+ width: 2em;
+}
+
+/* make it easy to see when we hover a label */
+.ui-slider-pips:not(.ui-slider-disabled) .ui-slider-pip:hover .ui-slider-label {
+ color: black;
+ font-weight: bold;
+}
+
+/* VERTICAL */
+/* vertical slider needs right-margin, not bottom */
+.ui-slider-vertical.ui-slider-pips {
+ margin-bottom: 1em;
+ margin-right: 2em;
+}
+
+/* align vertical pips left and to right of the slider */
+.ui-slider-vertical.ui-slider-pips .ui-slider-pip {
+ text-align: left;
+ top: auto;
+ left: 20px;
+ margin-left: 0;
+ margin-bottom: -0.5em;
+}
+
+/* vertical line/pip should be horizontal instead */
+.ui-slider-vertical.ui-slider-pips .ui-slider-line {
+ width: 3px;
+ height: 1px;
+ position: absolute;
+ top: 50%;
+ left: 0;
+}
+
+.ui-slider-vertical.ui-slider-pips .ui-slider-label {
+ top: 50%;
+ left: 0.5em;
+ margin-left: 0;
+ margin-top: -0.5em;
+ width: 2em;
+}
+
+/* FLOATING HORIZTONAL TOOLTIPS */
+/* remove the godawful looking focus outline on handle and float */
+.ui-slider-float .ui-slider-handle:focus,
+.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label,
+.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
+.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label,
+.ui-slider-float .ui-slider-handle:focus .ui-slider-tip-label
+.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label {
+ outline: none;
+}
+
+/* style tooltips on handles and on labels */
+/* also has a nice transition */
+.ui-slider-float .ui-slider-tip,
+.ui-slider-float .ui-slider-tip-label {
+ position: absolute;
+ visibility: hidden;
+ top: -40px;
+ display: block;
+ width: 34px;
+ margin-left: -18px;
+ left: 50%;
+ height: 20px;
+ line-height: 20px;
+ background: white;
+ border-radius: 3px;
+ border: 1px solid #888;
+ text-align: center;
+ font-size: 12px;
+ opacity: 0;
+ color: #333;
+ -webkit-transition-property: opacity, top, visibility;
+ transition-property: opacity, top, visibility;
+ -webkit-transition-timing-function: ease-in;
+ transition-timing-function: ease-in;
+ -webkit-transition-duration: 200ms, 200ms, 0ms;
+ transition-duration: 200ms, 200ms, 0ms;
+ -webkit-transition-delay: 0ms, 0ms, 200ms;
+ transition-delay: 0ms, 0ms, 200ms;
+}
+
+/* show the tooltip on hover or focus */
+/* also switch transition delay around */
+.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
+.ui-slider-float .ui-slider-handle.ui-state-hover .ui-slider-tip,
+.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
+.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip,
+.ui-slider-float .ui-slider-handle.ui-state-active .ui-slider-tip,
+.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
+ opacity: 1;
+ top: -30px;
+ visibility: visible;
+ -webkit-transition-timing-function: ease-out;
+ transition-timing-function: ease-out;
+ -webkit-transition-delay: 200ms, 200ms, 0ms;
+ transition-delay: 200ms, 200ms, 0ms;
+}
+
+/* put label tooltips below slider */
+.ui-slider-float .ui-slider-pip .ui-slider-tip-label {
+ top: 42px;
+}
+
+.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
+ top: 32px;
+ font-weight: normal;
+}
+
+/* give the tooltip a css triangle arrow */
+.ui-slider-float .ui-slider-tip:after,
+.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
+ content: " ";
+ width: 0;
+ height: 0;
+ border: 5px solid rgba(255, 255, 255, 0);
+ border-top-color: white;
+ position: absolute;
+ bottom: -10px;
+ left: 50%;
+ margin-left: -5px;
+}
+
+/* put a 1px border on the tooltip arrow to match tooltip border */
+.ui-slider-float .ui-slider-tip:before,
+.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
+ content: " ";
+ width: 0;
+ height: 0;
+ border: 5px solid rgba(255, 255, 255, 0);
+ border-top-color: #888;
+ position: absolute;
+ bottom: -11px;
+ left: 50%;
+ margin-left: -5px;
+}
+
+/* switch the arrow to top on labels */
+.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
+ border: 5px solid rgba(255, 255, 255, 0);
+ border-bottom-color: white;
+ top: -10px;
+}
+
+.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
+ border: 5px solid rgba(255, 255, 255, 0);
+ border-bottom-color: #888;
+ top: -11px;
+}
+
+/* FLOATING VERTICAL TOOLTIPS */
+/* tooltip floats to left of handle */
+.ui-slider-vertical.ui-slider-float .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-tip-label {
+ top: 50%;
+ margin-top: -11px;
+ width: 34px;
+ margin-left: 0px;
+ left: -60px;
+ color: #333;
+ -webkit-transition-duration: 200ms, 200ms, 0;
+ transition-duration: 200ms, 200ms, 0;
+ -webkit-transition-property: opacity, left, visibility;
+ transition-property: opacity, left, visibility;
+ -webkit-transition-delay: 0, 0, 200ms;
+ transition-delay: 0, 0, 200ms;
+}
+
+.ui-slider-vertical.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-hover .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-active .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
+ top: 50%;
+ margin-top: -11px;
+ left: -50px;
+}
+
+/* put label tooltips to right of slider */
+.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label {
+ left: 47px;
+}
+
+.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
+ left: 37px;
+}
+
+/* give the tooltip a css triangle arrow */
+.ui-slider-vertical.ui-slider-float .ui-slider-tip:after,
+.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
+ border: 5px solid rgba(255, 255, 255, 0);
+ border-left-color: white;
+ border-top-color: transparent;
+ position: absolute;
+ bottom: 50%;
+ margin-bottom: -5px;
+ right: -10px;
+ margin-left: 0;
+ top: auto;
+ left: auto;
+}
+
+.ui-slider-vertical.ui-slider-float .ui-slider-tip:before,
+.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
+ border: 5px solid rgba(255, 255, 255, 0);
+ border-left-color: #888;
+ border-top-color: transparent;
+ position: absolute;
+ bottom: 50%;
+ margin-bottom: -5px;
+ right: -11px;
+ margin-left: 0;
+ top: auto;
+ left: auto;
+}
+
+.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
+ border: 5px solid rgba(255, 255, 255, 0);
+ border-right-color: white;
+ right: auto;
+ left: -10px;
+}
+
+.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
+ border: 5px solid rgba(255, 255, 255, 0);
+ border-right-color: #888;
+ right: auto;
+ left: -11px;
+}
+
+/* SELECTED STATES */
+/* Comment out this chuck of code if you don't want to have
+ the new label colours shown */
+.ui-slider-pips [class*=ui-slider-pip-initial] {
+ font-weight: bold;
+ color: #14CA82;
+}
+
+.ui-slider-pips .ui-slider-pip-initial-2 {
+ color: #1897C9;
+}
+
+.ui-slider-pips [class*=ui-slider-pip-selected] {
+ font-weight: bold;
+ color: #FF7A00;
+}
+
+.ui-slider-pips .ui-slider-pip-inrange {
+ color: black;
+}
+
+.ui-slider-pips .ui-slider-pip-selected-2 {
+ color: #E70081;
+}
+
+.ui-slider-pips [class*=ui-slider-pip-selected] .ui-slider-line,
+.ui-slider-pips .ui-slider-pip-inrange .ui-slider-line {
+ background: black;
+}
diff --git a/RpiLedBars/web/slider/jquery-ui-slider-pips.js b/RpiLedBars/web/slider/jquery-ui-slider-pips.js
new file mode 100644
index 0000000..8a5c695
--- /dev/null
+++ b/RpiLedBars/web/slider/jquery-ui-slider-pips.js
@@ -0,0 +1,812 @@
+/*! jQuery-ui-Slider-Pips - v1.11.4 - 2016-09-04
+* Copyright (c) 2016 Simon Goellner ; Licensed MIT */
+
+(function($) {
+
+ "use strict";
+
+ var extensionMethods = {
+
+
+
+
+
+ // pips
+
+ pips: function( settings ) {
+
+ var slider = this,
+ i, j, p,
+ collection = "",
+ mousedownHandlers,
+ min = slider._valueMin(),
+ max = slider._valueMax(),
+ pips = ( max - min ) / slider.options.step,
+ $handles = slider.element.find(".ui-slider-handle"),
+ $pips;
+
+ var options = {
+
+ first: "label",
+ /* "label", "pip", false */
+
+ last: "label",
+ /* "label", "pip", false */
+
+ rest: "pip",
+ /* "label", "pip", false */
+
+ labels: false,
+ /* [array], { first: "string", rest: [array], last: "string" }, false */
+
+ prefix: "",
+ /* "", string */
+
+ suffix: "",
+ /* "", string */
+
+ step: ( pips > 100 ) ? Math.floor( pips * 0.05 ) : 1,
+ /* number */
+
+ formatLabel: function(value) {
+ return this.prefix + value + this.suffix;
+ }
+ /* function
+ must return a value to display in the pip labels */
+
+ };
+
+ if ( $.type( settings ) === "object" || $.type( settings ) === "undefined" ) {
+
+ $.extend( options, settings );
+ slider.element.data("pips-options", options );
+
+ } else {
+
+ if ( settings === "destroy" ) {
+
+ destroy();
+
+ } else if ( settings === "refresh" ) {
+
+ slider.element.slider( "pips", slider.element.data("pips-options") );
+
+ }
+
+ return;
+
+ }
+
+
+ // we don't want the step ever to be a floating point or negative
+ // (or 0 actually, so we'll set it to 1 in that case).
+ slider.options.pipStep = Math.abs( Math.round( options.step ) ) || 1;
+
+ // get rid of all pips that might already exist.
+ slider.element
+ .off( ".selectPip" )
+ .addClass("ui-slider-pips")
+ .find(".ui-slider-pip")
+ .remove();
+
+ // small object with functions for marking pips as selected.
+
+ var selectPip = {
+
+ single: function(value) {
+
+ this.resetClasses();
+
+ $pips
+ .filter(".ui-slider-pip-" + this.classLabel(value) )
+ .addClass("ui-slider-pip-selected");
+
+ if ( slider.options.range ) {
+
+ $pips.each(function(k, v) {
+
+ var pipVal = $(v).children(".ui-slider-label").data("value");
+
+ if (( slider.options.range === "min" && pipVal < value ) ||
+ ( slider.options.range === "max" && pipVal > value )) {
+
+ $(v).addClass("ui-slider-pip-inrange");
+
+ }
+
+ });
+
+ }
+
+ },
+
+ range: function(values) {
+
+ this.resetClasses();
+
+ for ( i = 0; i < values.length; i++ ) {
+
+ $pips
+ .filter(".ui-slider-pip-" + this.classLabel(values[i]) )
+ .addClass("ui-slider-pip-selected-" + ( i + 1 ) );
+
+ }
+
+ if ( slider.options.range ) {
+
+ $pips.each(function(k, v) {
+
+ var pipVal = $(v).children(".ui-slider-label").data("value");
+
+ if ( pipVal > values[0] && pipVal < values[1] ) {
+
+ $(v).addClass("ui-slider-pip-inrange");
+
+ }
+
+ });
+
+ }
+
+ },
+
+ classLabel: function(value) {
+
+ return value.toString().replace(".", "-");
+
+ },
+
+ resetClasses: function() {
+
+ var regex = /(^|\s*)(ui-slider-pip-selected|ui-slider-pip-inrange)(-{1,2}\d+|\s|$)/gi;
+
+ $pips.removeClass( function(index, css) {
+ return ( css.match(regex) || [] ).join(" ");
+ });
+
+ }
+
+ };
+
+ function getClosestHandle( val ) {
+
+ var h, k,
+ sliderVals,
+ comparedVals,
+ closestVal,
+ tempHandles = [],
+ closestHandle = 0;
+
+ if ( slider.values() && slider.values().length ) {
+
+ // get the current values of the slider handles
+ sliderVals = slider.values();
+
+ // find the offset value from the `val` for each
+ // handle, and store it in a new array
+ comparedVals = $.map( sliderVals, function(v) {
+ return Math.abs( v - val );
+ });
+
+ // figure out the closest handles to the value
+ closestVal = Math.min.apply( Math, comparedVals );
+
+ // if a comparedVal is the closestVal, then
+ // set the value accordingly, and set the closest handle.
+ for ( h = 0; h < comparedVals.length; h++ ) {
+ if ( comparedVals[h] === closestVal ) {
+ tempHandles.push(h);
+ }
+ }
+
+ // set the closest handle to the first handle in array,
+ // just incase we have no _lastChangedValue to compare to.
+ closestHandle = tempHandles[0];
+
+ // now we want to find out if any of the closest handles were
+ // the last changed handle, if so we specify that handle to change
+ for ( k = 0; k < tempHandles.length; k++ ) {
+ if ( slider._lastChangedValue === tempHandles[k] ) {
+ closestHandle = tempHandles[k];
+ }
+ }
+
+ if ( slider.options.range && tempHandles.length === 2 ) {
+
+ if ( val > sliderVals[1] ) {
+
+ closestHandle = tempHandles[1];
+
+ } else if ( val < sliderVals[0] ) {
+
+ closestHandle = tempHandles[0];
+
+ }
+
+ }
+
+ }
+
+ return closestHandle;
+
+ }
+
+ function destroy() {
+
+ slider.element
+ .off(".selectPip")
+ .on("mousedown.slider", slider.element.data("mousedown-original") )
+ .removeClass("ui-slider-pips")
+ .find(".ui-slider-pip")
+ .remove();
+
+ }
+
+ // when we click on a label, we want to make sure the
+ // slider's handle actually goes to that label!
+ // so we check all the handles and see which one is closest
+ // to the label we clicked. If 2 handles are equidistant then
+ // we move both of them. We also want to trigger focus on the
+ // handle.
+
+ // without this method the label is just treated like a part
+ // of the slider and there's no accuracy in the selected value
+
+ function labelClick( label, e ) {
+
+ if (slider.option("disabled")) {
+ return;
+ }
+
+ var val = $(label).data("value"),
+ indexToChange = getClosestHandle( val );
+
+ if ( slider.values() && slider.values().length ) {
+
+ slider.options.values[ indexToChange ] = slider._trimAlignValue( val );
+
+ } else {
+
+ slider.options.value = slider._trimAlignValue( val );
+
+ }
+
+ slider._refreshValue();
+ slider._change( e, indexToChange );
+
+ }
+
+ // method for creating a pip. We loop this for creating all
+ // the pips.
+
+ function createPip( which ) {
+
+ var label,
+ percent,
+ number = which,
+ classes = "ui-slider-pip",
+ css = "",
+ value = slider.value(),
+ values = slider.values(),
+ labelValue,
+ classLabel,
+ labelIndex;
+
+ if ( which === "first" ) {
+
+ number = 0;
+
+ } else if ( which === "last" ) {
+
+ number = pips;
+
+ }
+
+ // labelValue is the actual value of the pip based on the min/step
+ labelValue = min + ( slider.options.step * number );
+
+ // classLabel replaces any decimals with hyphens
+ classLabel = labelValue.toString().replace(".", "-");
+
+ // get the index needed for selecting labels out of the array
+ labelIndex = ( number + min ) - min;
+
+ // we need to set the human-readable label to either the
+ // corresponding element in the array, or the appropriate
+ // item in the object... or an empty string.
+
+ if ( $.type(options.labels) === "array" ) {
+
+ label = options.labels[ labelIndex ] || "";
+
+ } else if ( $.type( options.labels ) === "object" ) {
+
+ if ( which === "first" ) {
+
+ // set first label
+ label = options.labels.first || "";
+
+ } else if ( which === "last" ) {
+
+ // set last label
+ label = options.labels.last || "";
+
+ } else if ( $.type( options.labels.rest ) === "array" ) {
+
+ // set other labels, but our index should start at -1
+ // because of the first pip.
+ label = options.labels.rest[ labelIndex - 1 ] || "";
+
+ } else {
+
+ // urrggh, the options must be f**ked, just show nothing.
+ label = labelValue;
+
+ }
+
+ } else {
+
+ label = labelValue;
+
+ }
+
+
+
+
+ if ( which === "first" ) {
+
+ // first Pip on the Slider
+ percent = "0%";
+
+ classes += " ui-slider-pip-first";
+ classes += ( options.first === "label" ) ? " ui-slider-pip-label" : "";
+ classes += ( options.first === false ) ? " ui-slider-pip-hide" : "";
+
+ } else if ( which === "last" ) {
+
+ // last Pip on the Slider
+ percent = "100%";
+
+ classes += " ui-slider-pip-last";
+ classes += ( options.last === "label" ) ? " ui-slider-pip-label" : "";
+ classes += ( options.last === false ) ? " ui-slider-pip-hide" : "";
+
+ } else {
+
+ // all other Pips
+ percent = (( 100 / pips ) * which ).toFixed(4) + "%";
+
+ classes += ( options.rest === "label" ) ? " ui-slider-pip-label" : "";
+ classes += ( options.rest === false ) ? " ui-slider-pip-hide" : "";
+
+ }
+
+ classes += " ui-slider-pip-" + classLabel;
+
+
+ // add classes for the initial-selected values.
+ if ( values && values.length ) {
+
+ for ( i = 0; i < values.length; i++ ) {
+
+ if ( labelValue === values[i] ) {
+
+ classes += " ui-slider-pip-initial-" + ( i + 1 );
+ classes += " ui-slider-pip-selected-" + ( i + 1 );
+
+ }
+
+ }
+
+ if ( slider.options.range ) {
+
+ if ( labelValue > values[0] &&
+ labelValue < values[1] ) {
+
+ classes += " ui-slider-pip-inrange";
+
+ }
+
+ }
+
+ } else {
+
+ if ( labelValue === value ) {
+
+ classes += " ui-slider-pip-initial";
+ classes += " ui-slider-pip-selected";
+
+ }
+
+ if ( slider.options.range ) {
+
+ if (( slider.options.range === "min" && labelValue < value ) ||
+ ( slider.options.range === "max" && labelValue > value )) {
+
+ classes += " ui-slider-pip-inrange";
+
+ }
+
+ }
+
+ }
+
+
+
+ css = ( slider.options.orientation === "horizontal" ) ?
+ "left: " + percent :
+ "bottom: " + percent;
+
+
+ // add this current pip to the collection
+ return "" +
+ "" +
+ "" + options.formatLabel(label) + "" +
+ "";
+
+ }
+
+ // create our first pip
+ collection += createPip("first");
+
+ // for every stop in the slider where we need a pip; create one.
+ for ( p = slider.options.pipStep; p < pips; p += slider.options.pipStep ) {
+ collection += createPip( p );
+ }
+
+ // create our last pip
+ collection += createPip("last");
+
+ // append the collection of pips.
+ slider.element.append( collection );
+
+ // store the pips for setting classes later.
+ $pips = slider.element.find(".ui-slider-pip");
+
+
+
+ // store the mousedown handlers for later, just in case we reset
+ // the slider, the handler would be lost!
+
+ if ( $._data( slider.element.get(0), "events").mousedown &&
+ $._data( slider.element.get(0), "events").mousedown.length ) {
+
+ mousedownHandlers = $._data( slider.element.get(0), "events").mousedown;
+
+ } else {
+
+ mousedownHandlers = slider.element.data("mousedown-handlers");
+
+ }
+
+ slider.element.data("mousedown-handlers", mousedownHandlers.slice() );
+
+ // loop through all the mousedown handlers on the slider,
+ // and store the original namespaced (.slider) event handler so
+ // we can trigger it later.
+ for ( j = 0; j < mousedownHandlers.length; j++ ) {
+ if ( mousedownHandlers[j].namespace === "slider" ) {
+ slider.element.data("mousedown-original", mousedownHandlers[j].handler );
+ }
+ }
+
+ // unbind the mousedown.slider event, because it interferes with
+ // the labelClick() method (stops smooth animation), and decide
+ // if we want to trigger the original event based on which element
+ // was clicked.
+ slider.element
+ .off("mousedown.slider")
+ .on("mousedown.selectPip", function(e) {
+
+ var $target = $(e.target),
+ closest = getClosestHandle( $target.data("value") ),
+ $handle = $handles.eq( closest );
+
+ $handle.addClass("ui-state-active");
+
+ if ( $target.is(".ui-slider-label") ) {
+
+ labelClick( $target, e );
+
+ slider.element
+ .one("mouseup.selectPip", function() {
+
+ $handle
+ .removeClass("ui-state-active")
+ .focus();
+
+ });
+
+ } else {
+
+ var originalMousedown = slider.element.data("mousedown-original");
+ originalMousedown(e);
+
+ }
+
+ });
+
+
+
+
+ slider.element.on( "slide.selectPip slidechange.selectPip", function(e, ui) {
+
+ var $slider = $(this),
+ value = $slider.slider("value"),
+ values = $slider.slider("values");
+
+ if ( ui ) {
+
+ value = ui.value;
+ values = ui.values;
+
+ }
+
+ if ( slider.values() && slider.values().length ) {
+
+ selectPip.range( values );
+
+ } else {
+
+ selectPip.single( value );
+
+ }
+
+ });
+
+
+
+
+ },
+
+
+
+
+
+
+
+
+ // floats
+
+ float: function( settings ) {
+
+ var i,
+ slider = this,
+ min = slider._valueMin(),
+ max = slider._valueMax(),
+ value = slider._value(),
+ values = slider._values(),
+ tipValues = [],
+ $handles = slider.element.find(".ui-slider-handle");
+
+ var options = {
+
+ handle: true,
+ /* false */
+
+ pips: false,
+ /* true */
+
+ labels: false,
+ /* [array], { first: "string", rest: [array], last: "string" }, false */
+
+ prefix: "",
+ /* "", string */
+
+ suffix: "",
+ /* "", string */
+
+ event: "slidechange slide",
+ /* "slidechange", "slide", "slidechange slide" */
+
+ formatLabel: function(value) {
+ return this.prefix + value + this.suffix;
+ }
+ /* function
+ must return a value to display in the floats */
+
+ };
+
+ if ( $.type( settings ) === "object" || $.type( settings ) === "undefined" ) {
+
+ $.extend( options, settings );
+ slider.element.data("float-options", options );
+
+ } else {
+
+ if ( settings === "destroy" ) {
+
+ destroy();
+
+ } else if ( settings === "refresh" ) {
+
+ slider.element.slider( "float", slider.element.data("float-options") );
+
+ }
+
+ return;
+
+ }
+
+
+
+
+ if ( value < min ) {
+ value = min;
+ }
+
+ if ( value > max ) {
+ value = max;
+ }
+
+ if ( values && values.length ) {
+
+ for ( i = 0; i < values.length; i++ ) {
+
+ if ( values[i] < min ) {
+ values[i] = min;
+ }
+
+ if ( values[i] > max ) {
+ values[i] = max;
+ }
+
+ }
+
+ }
+
+ // add a class for the CSS
+ slider.element
+ .addClass("ui-slider-float")
+ .find(".ui-slider-tip, .ui-slider-tip-label")
+ .remove();
+
+
+
+ function destroy() {
+
+ slider.element
+ .off(".sliderFloat")
+ .removeClass("ui-slider-float")
+ .find(".ui-slider-tip, .ui-slider-tip-label")
+ .remove();
+
+ }
+
+
+ function getPipLabels( values ) {
+
+ // when checking the array we need to divide
+ // by the step option, so we store those values here.
+
+ var vals = [],
+ steppedVals = $.map( values, function(v) {
+ return Math.ceil(( v - min ) / slider.options.step);
+ });
+
+ // now we just get the values we need to return
+ // by looping through the values array and assigning the
+ // label if it exists.
+
+ if ( $.type( options.labels ) === "array" ) {
+
+ for ( i = 0; i < values.length; i++ ) {
+
+ vals[i] = options.labels[ steppedVals[i] ] || values[i];
+
+ }
+
+ } else if ( $.type( options.labels ) === "object" ) {
+
+ for ( i = 0; i < values.length; i++ ) {
+
+ if ( values[i] === min ) {
+
+ vals[i] = options.labels.first || min;
+
+ } else if ( values[i] === max ) {
+
+ vals[i] = options.labels.last || max;
+
+ } else if ( $.type( options.labels.rest ) === "array" ) {
+
+ vals[i] = options.labels.rest[ steppedVals[i] - 1 ] || values[i];
+
+ } else {
+
+ vals[i] = values[i];
+
+ }
+
+ }
+
+ } else {
+
+ for ( i = 0; i < values.length; i++ ) {
+
+ vals[i] = values[i];
+
+ }
+
+ }
+
+ return vals;
+
+ }
+
+ // apply handle tip if settings allows.
+ if ( options.handle ) {
+
+ // we need to set the human-readable label to either the
+ // corresponding element in the array, or the appropriate
+ // item in the object... or an empty string.
+
+ tipValues = ( slider.values() && slider.values().length ) ?
+ getPipLabels( values ) :
+ getPipLabels( [ value ] );
+
+ for ( i = 0; i < tipValues.length; i++ ) {
+
+ $handles
+ .eq( i )
+ .append( $(""+ options.formatLabel(tipValues[i]) +"") );
+
+ }
+
+ }
+
+ if ( options.pips ) {
+
+ // if this slider also has pip-labels, we make those into tips, too.
+ slider.element.find(".ui-slider-label").each(function(k, v) {
+
+ var $this = $(v),
+ val = [ $this.data("value") ],
+ label,
+ $tip;
+
+
+ label = options.formatLabel( getPipLabels( val )[0] );
+
+ // create a tip element
+ $tip =
+ $("" + label + "")
+ .insertAfter( $this );
+
+ });
+
+ }
+
+ // check that the event option is actually valid against our
+ // own list of the slider's events.
+ if ( options.event !== "slide" &&
+ options.event !== "slidechange" &&
+ options.event !== "slide slidechange" &&
+ options.event !== "slidechange slide" ) {
+
+ options.event = "slidechange slide";
+
+ }
+
+ // when slider changes, update handle tip label.
+ slider.element
+ .off(".sliderFloat")
+ .on( options.event + ".sliderFloat", function( e, ui ) {
+
+ var uiValue = ( $.type( ui.value ) === "array" ) ? ui.value : [ ui.value ],
+ val = options.formatLabel( getPipLabels( uiValue )[0] );
+
+ $(ui.handle)
+ .find(".ui-slider-tip")
+ .html( val );
+
+ });
+
+ }
+
+ };
+
+ $.extend(true, $.ui.slider.prototype, extensionMethods);
+
+})(jQuery);
diff --git a/RpiLedBars/web/slider/jquery-ui-slider-pips.min.css b/RpiLedBars/web/slider/jquery-ui-slider-pips.min.css
new file mode 100644
index 0000000..7badd71
--- /dev/null
+++ b/RpiLedBars/web/slider/jquery-ui-slider-pips.min.css
@@ -0,0 +1,4 @@
+/*! jQuery-ui-Slider-Pips - v1.11.4 - 2016-09-04
+* Copyright (c) 2016 Simon Goellner ; Licensed MIT */
+
+.ui-slider-horizontal.ui-slider-pips{margin-bottom:1.4em}.ui-slider-pips .ui-slider-label,.ui-slider-pips .ui-slider-pip-hide{display:none}.ui-slider-pips .ui-slider-pip-label .ui-slider-label{display:block}.ui-slider-pips .ui-slider-pip{width:2em;height:1em;line-height:1em;position:absolute;font-size:0.8em;color:#999;overflow:visible;text-align:center;top:20px;left:20px;margin-left:-1em;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui-state-disabled.ui-slider-pips .ui-slider-pip{cursor:default}.ui-slider-pips .ui-slider-line{background:#999;width:1px;height:3px;position:absolute;left:50%}.ui-slider-pips .ui-slider-label{position:absolute;top:5px;left:50%;margin-left:-1em;width:2em}.ui-slider-pips:not(.ui-slider-disabled) .ui-slider-pip:hover .ui-slider-label{color:black;font-weight:bold}.ui-slider-vertical.ui-slider-pips{margin-bottom:1em;margin-right:2em}.ui-slider-vertical.ui-slider-pips .ui-slider-pip{text-align:left;top:auto;left:20px;margin-left:0;margin-bottom:-0.5em}.ui-slider-vertical.ui-slider-pips .ui-slider-line{width:3px;height:1px;position:absolute;top:50%;left:0}.ui-slider-vertical.ui-slider-pips .ui-slider-label{top:50%;left:0.5em;margin-left:0;margin-top:-0.5em;width:2em}.ui-slider-float .ui-slider-handle:focus,.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label,.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label,.ui-slider-float .ui-slider-handle:focus .ui-slider-tip-label .ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label{outline:none}.ui-slider-float .ui-slider-tip,.ui-slider-float .ui-slider-tip-label{position:absolute;visibility:hidden;top:-40px;display:block;width:34px;margin-left:-18px;left:50%;height:20px;line-height:20px;background:white;border-radius:3px;border:1px solid #888;text-align:center;font-size:12px;opacity:0;color:#333;-webkit-transition-property:opacity, top, visibility;transition-property:opacity, top, visibility;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transition-duration:200ms, 200ms, 0ms;transition-duration:200ms, 200ms, 0ms;-webkit-transition-delay:0ms, 0ms, 200ms;transition-delay:0ms, 0ms, 200ms}.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,.ui-slider-float .ui-slider-handle.ui-state-hover .ui-slider-tip,.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip,.ui-slider-float .ui-slider-handle.ui-state-active .ui-slider-tip,.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label{opacity:1;top:-30px;visibility:visible;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition-delay:200ms, 200ms, 0ms;transition-delay:200ms, 200ms, 0ms}.ui-slider-float .ui-slider-pip .ui-slider-tip-label{top:42px}.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label{top:32px;font-weight:normal}.ui-slider-float .ui-slider-tip:after,.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after{content:" ";width:0;height:0;border:5px solid rgba(255,255,255,0);border-top-color:#fff;position:absolute;bottom:-10px;left:50%;margin-left:-5px}.ui-slider-float .ui-slider-tip:before,.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before{content:" ";width:0;height:0;border:5px solid rgba(255,255,255,0);border-top-color:#888;position:absolute;bottom:-11px;left:50%;margin-left:-5px}.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after{border:5px solid rgba(255,255,255,0);border-bottom-color:#fff;top:-10px}.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before{border:5px solid rgba(255,255,255,0);border-bottom-color:#888;top:-11px}.ui-slider-vertical.ui-slider-float .ui-slider-tip,.ui-slider-vertical.ui-slider-float .ui-slider-tip-label{top:50%;margin-top:-11px;width:34px;margin-left:0px;left:-60px;color:#333;-webkit-transition-duration:200ms, 200ms, 0;transition-duration:200ms, 200ms, 0;-webkit-transition-property:opacity, left, visibility;transition-property:opacity, left, visibility;-webkit-transition-delay:0, 0, 200ms;transition-delay:0, 0, 200ms}.ui-slider-vertical.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-hover .ui-slider-tip,.ui-slider-vertical.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip,.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-active .ui-slider-tip,.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label{top:50%;margin-top:-11px;left:-50px}.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label{left:47px}.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label{left:37px}.ui-slider-vertical.ui-slider-float .ui-slider-tip:after,.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after{border:5px solid rgba(255,255,255,0);border-left-color:#fff;border-top-color:transparent;position:absolute;bottom:50%;margin-bottom:-5px;right:-10px;margin-left:0;top:auto;left:auto}.ui-slider-vertical.ui-slider-float .ui-slider-tip:before,.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before{border:5px solid rgba(255,255,255,0);border-left-color:#888;border-top-color:transparent;position:absolute;bottom:50%;margin-bottom:-5px;right:-11px;margin-left:0;top:auto;left:auto}.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after{border:5px solid rgba(255,255,255,0);border-right-color:#fff;right:auto;left:-10px}.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before{border:5px solid rgba(255,255,255,0);border-right-color:#888;right:auto;left:-11px}.ui-slider-pips [class*=ui-slider-pip-initial]{font-weight:bold;color:#14CA82}.ui-slider-pips .ui-slider-pip-initial-2{color:#1897C9}.ui-slider-pips [class*=ui-slider-pip-selected]{font-weight:bold;color:#FF7A00}.ui-slider-pips .ui-slider-pip-inrange{color:black}.ui-slider-pips .ui-slider-pip-selected-2{color:#E70081}.ui-slider-pips [class*=ui-slider-pip-selected] .ui-slider-line,.ui-slider-pips .ui-slider-pip-inrange .ui-slider-line{background:black}
diff --git a/RpiLedBars/web/slider/jquery-ui-slider-pips.min.js b/RpiLedBars/web/slider/jquery-ui-slider-pips.min.js
new file mode 100644
index 0000000..a866ead
--- /dev/null
+++ b/RpiLedBars/web/slider/jquery-ui-slider-pips.min.js
@@ -0,0 +1,4 @@
+/*! jQuery-ui-Slider-Pips - v1.11.4 - 2016-09-04
+* Copyright (c) 2016 Simon Goellner ; Licensed MIT */
+
+!function(e){"use strict";var i={pips:function(i){function l(i){var l,s,t,a,n,r=[],o=0;if(u.values()&&u.values().length){for(t=u.values(),a=e.map(t,function(e){return Math.abs(e-i)}),n=Math.min.apply(Math,a),l=0;lt[1]?o=r[1]:iv[0]&&tt||"max"===u.options.range&&t>f)&&(p+=" ui-slider-pip-inrange");return d="horizontal"===u.options.orientation?"left: "+s:"bottom: "+s,''+g.formatLabel(l)+""}var n,r,o,p,d,u=this,f="",c=u._valueMin(),v=u._valueMax(),h=(v-c)/u.options.step,m=u.element.find(".ui-slider-handle"),g={first:"label",last:"label",rest:"pip",labels:!1,prefix:"",suffix:"",step:h>100?Math.floor(.05*h):1,formatLabel:function(e){return this.prefix+e+this.suffix}};if("object"!==e.type(i)&&"undefined"!==e.type(i))return void("destroy"===i?s():"refresh"===i&&u.element.slider("pips",u.element.data("pips-options")));e.extend(g,i),u.element.data("pips-options",g),u.options.pipStep=Math.abs(Math.round(g.step))||1,u.element.off(".selectPip").addClass("ui-slider-pips").find(".ui-slider-pip").remove();var b={single:function(i){this.resetClasses(),d.filter(".ui-slider-pip-"+this.classLabel(i)).addClass("ui-slider-pip-selected"),u.options.range&&d.each(function(l,s){var t=e(s).children(".ui-slider-label").data("value");("min"===u.options.range&&i>t||"max"===u.options.range&&t>i)&&e(s).addClass("ui-slider-pip-inrange")})},range:function(i){for(this.resetClasses(),n=0;ni[0]&&to;o+=u.options.pipStep)f+=a(o);for(f+=a("last"),u.element.append(f),d=u.element.find(".ui-slider-pip"),p=e._data(u.element.get(0),"events").mousedown&&e._data(u.element.get(0),"events").mousedown.length?e._data(u.element.get(0),"events").mousedown:u.element.data("mousedown-handlers"),u.element.data("mousedown-handlers",p.slice()),r=0;ro&&(o=n),o>r&&(o=r),p&&p.length)for(t=0;tr&&(p[t]=r);if(a.element.addClass("ui-slider-float").find(".ui-slider-tip, .ui-slider-tip-label").remove(),f.handle)for(d=s(a.values()&&a.values().length?p:[o]),t=0;t'+f.formatLabel(d[t])+""));f.pips&&a.element.find(".ui-slider-label").each(function(i,l){var t,a,n=e(l),r=[n.data("value")];t=f.formatLabel(s(r)[0]),a=e(''+t+"").insertAfter(n)}),"slide"!==f.event&&"slidechange"!==f.event&&"slide slidechange"!==f.event&&"slidechange slide"!==f.event&&(f.event="slidechange slide"),a.element.off(".sliderFloat").on(f.event+".sliderFloat",function(i,l){var t="array"===e.type(l.value)?l.value:[l.value],a=f.formatLabel(s(t)[0]);e(l.handle).find(".ui-slider-tip").html(a)})}};e.extend(!0,e.ui.slider.prototype,i)}(jQuery);
\ No newline at end of file