From ca73a7d47e8355dab1e63a924d3bfb57813db200 Mon Sep 17 00:00:00 2001 From: Tropicananass Date: Wed, 29 Sep 2021 22:56:10 +0100 Subject: [PATCH] starting web app --- RpiLedBars/web/README.md | 3 + RpiLedBars/web/flat_slider.css | 207 + RpiLedBars/web/flat_slider.js | 53 + RpiLedBars/web/index.css | 30 + RpiLedBars/web/index.html | 25 + RpiLedBars/web/index.js | 49 + RpiLedBars/web/index_model.html | 38 + RpiLedBars/web/iro.js | 1787 ++++ RpiLedBars/web/slider/app.min.css | 8285 +++++++++++++++++ .../web/slider/jquery-ui-slider-pips.css | 326 + .../web/slider/jquery-ui-slider-pips.js | 812 ++ .../web/slider/jquery-ui-slider-pips.min.css | 4 + .../web/slider/jquery-ui-slider-pips.min.js | 4 + 13 files changed, 11623 insertions(+) create mode 100644 RpiLedBars/web/README.md create mode 100644 RpiLedBars/web/flat_slider.css create mode 100644 RpiLedBars/web/flat_slider.js create mode 100644 RpiLedBars/web/index.css create mode 100644 RpiLedBars/web/index.html create mode 100644 RpiLedBars/web/index.js create mode 100644 RpiLedBars/web/index_model.html create mode 100644 RpiLedBars/web/iro.js create mode 100644 RpiLedBars/web/slider/app.min.css create mode 100644 RpiLedBars/web/slider/jquery-ui-slider-pips.css create mode 100644 RpiLedBars/web/slider/jquery-ui-slider-pips.js create mode 100644 RpiLedBars/web/slider/jquery-ui-slider-pips.min.css create mode 100644 RpiLedBars/web/slider/jquery-ui-slider-pips.min.js 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