diff --git a/README.md b/README.md index e8c5726..823ae76 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,8 @@ The Library runs fine on any kind of **ESP8266** and **ESP32** (NodeMCU Boards, - Public Access to ESPAsyncServer - Graph Widget (Persist save graph in local storage #10) - Inline CSS styles by @iangray001 +- Separators by @iangray001 +- Grouped controls by @iangray001 ## Further Roadmap @@ -304,6 +306,18 @@ Then all widgets for the tab need to be added to it by specifying the tab as the `ESPUI.addControl( ControlType::Text, "Text Title:", "a Text Field", ControlColor::Alizarin, tab1, &textCall );` +### Separators + +![separators](docs/ui_separators.png) + +You can use separators to break up the UI and better organise your controls. Adding a separator will force any following controls onto the subsequent line. Add separators as follows: + +``` +ESPUI.separator("Separator name"); +//or +ESPUI.addControl(ControlType::Separator, "Separator name", "", ControlColor::None, maintab); +``` + ### Initialisation of the UI After all the elements are configured you can use `ESPUI.begin("Some Title");` @@ -389,6 +403,33 @@ Note: The images in this example are formed by setting a Label to contain an `", ControlColor::Peterriver); ``` +### Grouped controls + +Normally, whenever a control is added to the UI, an new panel is generated. However, when addings the control you can +set the "parent" of the control to an existing other control. This allows you to add multiple widgets into the same +panel. For example: + +``` + panel1 = ESPUI.addControl(ControlType::Button, "Button Set", "Button A", ControlColor::Turquoise, Control::noParent, btncallback); + ESPUI.addControl(ControlType::Button, "", "Button B", ControlColor::None, panel1, btncallback); + ESPUI.addControl(ControlType::Button, "", "Button C", ControlColor::None, panel1, btncallback); +``` + +The first call to `addControl` has no parent (or it could be set to a tab), so therefore a new panel is added containing one button +with the value `Button A`. The two subsequent calls have their parent set to the control we added in the first so instead of adding +a new panel, buttons are added to the existing panel from `Button A`. The result is the following: + +![Grouped buttons](docs/ui_groupedbuttons.png) + +The grouped controls operate entirely independently, and can be assigned different callbacks, or updated separately. The grouping +is purely visual. + +Most controls can be grouped this way, but the result is not always visually pleasant. This works best with labels, sliders, switchers, +and buttons. + +![Other grouped elements](docs/ui_groupedbuttons2.png) + +If you group too many elements it might throw the layout of the rest of the UI out of line. Consider adding separators to correct this. # Notes for Development diff --git a/data/css/style.css b/data/css/style.css index c1be6ee..30ae24a 100644 --- a/data/css/style.css +++ b/data/css/style.css @@ -13,22 +13,44 @@ .card { min-height: 100px; - margin-top: 2%; border-radius: 6px; box-shadow: 0 4px 4px rgba(204, 197, 185, 0.5); padding-left: 20px; padding-right: 20px; - margin-bottom: 10px; + margin-bottom: 40px; min-width: 500px; color: #fff; } + +@media (min-width: 1205px) { + .wide.card { + min-width: 1075px; + } +} + +@media (min-width: 1790px) { + .wide.card { + min-width: 1650px; + } +} + @media (max-width: 630px) { .card { min-width: 98%; } } +.sectionbreak.columns { + color: black; +} + +.sectionbreak.columns hr { + border: none; + height: 2px; + background-color: #666 +} + .card-slider {} .turquoise { @@ -137,7 +159,7 @@ .column, .columns { - margin-right: 2%; + margin-right: 35px; } .column:first-child, @@ -423,6 +445,8 @@ button:active { button, .button { margin-bottom: 1rem; + margin-left: 0.3rem; + margin-right: 0.3rem; } /* Utilities @@ -576,7 +600,8 @@ hr { display: block; font-size: 14px; height: 26px; - margin-bottom: 12px; + margin-left: 0.3rem; + margin-right: 0.3rem; position: relative; width: 60px; -webkit-transition: background-color 0.2s ease-in-out; @@ -933,6 +958,7 @@ input[id^="num"] { body div>ul.navigation { margin: 0; + margin-bottom: 30px; padding: 0; border-bottom: 3px solid #666; overflow: hidden; diff --git a/data/css/style.min.css b/data/css/style.min.css index 4497794..1d83c6b 100644 --- a/data/css/style.min.css +++ b/data/css/style.min.css @@ -1 +1 @@ -.container{position:relative;width:79%;margin:20px;box-sizing:border-box}.column,.columns{width:100%;float:left}.card{min-height:100px;margin-top:2%;border-radius:6px;box-shadow:0 4px 4px rgba(204,197,185,0.5);padding-left:20px;padding-right:20px;margin-bottom:10px;min-width:500px;color:#fff}@media(max-width:630px){.card{min-width:98%}}.turquoise{background:#1abc9c;border-bottom:#16a085 3px solid}.emerald{background:#2ecc71;border-bottom:#27ae60 3px solid}.peterriver{background:#3498db;border-bottom:#2980b9 3px solid}.wetasphalt{background:#34495e;border-bottom:#2c3e50 3px solid}.sunflower{background:#f1c40f;border-bottom:#e6bb0f 3px solid}.carrot{background:#e67e22;border-bottom:#d35400 3px solid}.alizarin{background:#e74c3c;border-bottom:#c0392b 3px solid}.dark{background:#444857;border-bottom:#444857 3px solid}.label{box-sizing:border-box;white-space:nowrap;border-radius:.2em;padding:.12em .4em .14em;text-align:center;color:#fff;font-weight:700;line-height:1.3;margin-bottom:5px;display:inline-block;white-space:nowrap;vertical-align:baseline;position:relative;top:-.15em;background-color:#999;margin-bottom:10px}.label-wrap{width:90%;white-space:pre-wrap;word-wrap:break-word}.label.color-blue{background-color:#6f9ad1}.label.color-red{background-color:#d37c7c}.label.color-green{background-color:#9bc268}.label.color-orange{background-color:#dea154}.label.color-yellow{background-color:#e9d641}.label.color-purple{background-color:#9f83d1}@media(min-width:400px){.container{width:84%}}@media(min-width:630px){.container{width:98%}.column,.columns{margin-right:2%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}}html{font-size:62.5%}body{margin:0;font-size:1.5em;line-height:1;font-weight:400;font-family:"Open Sans",sans-serif;color:#222;background-color:#ecf0f1}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:300}h1{font-size:4rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media(min-width:630px){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2rem}h6{font-size:1.5rem}}p{margin-top:0}a{color:#1eaedb}a:hover{color:#0fa0ce}button{display:inline-block;padding:10px;border-radius:3px;color:#fff;background-color:#999}button:active{background-color:#666;transform:translateX(4px) translateY(4px)}#mainHeader{display:inline-block}#conStatus{position:inherit;font-size:.75em}button,.button{margin-bottom:1rem}.u-full-width{width:100%;box-sizing:border-box}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right}.u-pull-left{float:left}.tcenter{text-align:center}hr{margin-top:.5rem;margin-bottom:1.2rem;border-width:0;border-top:1px solid #e1e1e1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}.control{background-color:#ddd;background-image:linear-gradient(hsla(0,0%,0%,0.1),hsla(0,0%,100%,0.1));border-radius:50%;box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,0.5),0 0 1px 1px hsla(0,0%,100%,0.75),0 0 1px 2px hsla(0,0%,100%,0.25),0 0 1px 3px hsla(0,0%,100%,0.25),0 0 1px 4px hsla(0,0%,100%,0.25),0 0 1px 6px hsla(0,0%,0%,0.75);height:9em;margin:3em auto;position:relative;width:9em}.control ul{height:100%;padding:0;transform:rotate(45deg)}.control li{border-radius:100% 0 0 0;box-shadow:inset -1px -1px 1px hsla(0,0%,100%,0.5),0 0 1px hsla(0,0%,0%,0.75);display:inline-block;height:50%;overflow:hidden;width:50%}.control ul li:nth-child(2){transform:rotate(90deg)}.control ul li:nth-child(3){transform:rotate(-90deg)}.control ul li:nth-child(4){transform:rotate(180deg)}.control ul a{height:200%;position:relative;transform:rotate(-45deg);width:200%}.control a:hover,.control a:focus{background-color:hsla(0,0%,100%,0.25)}.control a{border-radius:50%;color:#333;display:block;font:bold 1em/3 sans-serif;text-align:center;text-decoration:none;text-shadow:0 1px 1px hsla(0,0%,100%,0.4);transition:.15s}.control .confirm{background-color:#ddd;background-image:linear-gradient(hsla(0,0%,0%,0.15),hsla(0,0%,100%,0.25));box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,0.5),0 0 1px 1px hsla(0,0%,100%,0.25),0 0 1px 2px hsla(0,0%,100%,0.25),0 0 1px 3px hsla(0,0%,100%,0.25),0 0 1px 4px hsla(0,0%,100%,0.25),0 0 1px 6px hsla(0,0%,0%,0.85);left:50%;line-height:3;margin:-1.5em;position:absolute;top:50%;width:3em}.control .confirm:hover,.control .confirm:focus{background-color:#eee}.switch{display:inline-block !important;background-color:#bebebe;border-radius:4px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);color:#fff;cursor:pointer;display:block;font-size:14px;height:26px;margin-bottom:12px;position:relative;width:60px;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}.switch.checked{background-color:#76d21d}.switch input[type="checkbox"]{display:none;cursor:pointer;height:10px;left:12px;position:absolute;top:8px;width:10px}.in{position:absolute;top:8px;left:12px;-webkit-transition:left .08s ease-in-out;-moz-transition:left .08s ease-in-out;-o-transition:left .08s ease-in-out;-ms-transition:left .08s ease-in-out;transition:left .08s ease-in-out}.switch.checked div{left:38px}.switch .in:before{background:#fff;background:-moz-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#f0f0f0));background:-webkit-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-o-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-ms-linear-gradient(top,#fff 0,#f0f0f0 100%);background:linear-gradient(to bottom,#fff 0,#f0f0f0 100%);border:1px solid #fff;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,0.3);content:"";height:18px;position:absolute;top:-5px;left:-9px;width:26px}.switch .in:after{background:#f0f0f0;background:-moz-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f0f0f0),color-stop(100%,#fff));background:-webkit-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-o-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-ms-linear-gradient(top,#f0f0f0 0,#fff 100%);background:linear-gradient(to bottom,#f0f0f0 0,#fff 100%);border-radius:10px;content:"";height:12px;margin:-1px 0 0 -1px;position:absolute;width:12px}.rkmd-slider{display:block;position:relative;font-size:16px;font-family:"Roboto",sans-serif}.rkmd-slider input[type="range"]{overflow:hidden;position:absolute;width:1px;height:1px;opacity:0}.rkmd-slider input[type="range"]+.slider{display:block;position:relative;width:100%;height:27px;border-radius:13px;background-color:#bebebe}@media(pointer:fine){.rkmd-slider input[type="range"]+.slider{height:4px;border-radius:0}}.rkmd-slider input[type="range"]+.slider .slider-fill{display:block;position:absolute;width:0;height:100%;user-select:none;z-index:1}.rkmd-slider input[type="range"]+.slider .slider-handle{cursor:pointer;position:absolute;top:12px;left:0;width:15px;height:15px;margin-left:-8px;border-radius:50%;transition:all .2s ease;user-select:none;z-index:2}@media(pointer:fine){.rkmd-slider input[type="range"]+.slider .slider-handle{top:-5.5px}}.rkmd-slider input[type="range"]:disabled+.slider{background-color:#b0b0b0 !important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle{cursor:default !important;background-color:#b0b0b0 !important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill .slider-label,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle .slider-label{display:none;background-color:#b0b0b0 !important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active{top:-5.5px;width:15px;height:15px;margin-left:-8px}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active .slider-label,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active .slider-label{display:none;border-radius:50%;transform:none}.rkmd-slider input[type="range"]:disabled+.slider .slider-handle:active{box-shadow:none !important;transform:scale(1) !important}.rkmd-slider.slider-discrete .slider .slider-handle{position:relative;z-index:1}.rkmd-slider.slider-discrete .slider .slider-handle .slider-label{position:absolute;top:-17.5px;left:4px;width:30px;height:30px;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;border-radius:50%;-webkit-transform:scale(1) rotate(-45deg);transform:scale(1) rotate(-45deg);-webkit-transition:all .2s ease;transition:all .2s ease}@media(pointer:fine){.rkmd-slider.slider-discrete .slider .slider-handle .slider-label{left:-2px;-webkit-transform:scale(0.5) rotate(-45deg);transform:scale(0.5) rotate(-45deg)}}.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span{position:absolute;top:7px;left:0;width:100%;color:#fff;font-size:16px;text-align:center;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media(pointer:fine){.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span{font-size:12px}}.rkmd-slider.slider-discrete .slider .slider-handle.is-active{top:0;margin-left:-2px;width:4px;height:4px}.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label{top:-15px;left:-2px;border-radius:15px 15px 15px 0;-webkit-transform:rotate(-45deg) translate(23px,-25px);transform:rotate(-45deg) translate(23px,-25px)}.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label span{opacity:1}.rkmd-slider.slider-discrete.slider-turquoise .slider-label{background-color:#16a085}.rkmd-slider.slider-discrete.slider-emerald .slider-label{background-color:#27ae60}.peterriver{background:#3498db;border-bottom:#2980b9 3px solid}.rkmd-slider.slider-discrete.slider-peterriver .slider-label{background-color:#2980b9}.wetasphalt{background:#34495e;border-bottom:#2c3e50 3px solid}.rkmd-slider.slider-discrete.slider-wetasphalt .slider-label{background-color:#2c3e50}.sunflower{background:#f1c40f;border-bottom:#e6bb0f 3px solid}.rkmd-slider.slider-discrete.slider-sunflower .slider-label{background-color:#e6bb0f}.carrot{background:#e67e22;border-bottom:#d35400 3px solid}.rkmd-slider.slider-discrete.slider-carrot .slider-label{background-color:#d35400}.alizarin{background:#e74c3c;border-bottom:#c0392b 3px solid}.rkmd-slider.slider-discrete.slider-alizarin .slider-label{background-color:#c0392b}input{margin:0 auto 1.2rem auto;padding:2px 5px;width:100%;box-sizing:border-box;border:0;border-radius:4px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background:rgba(255,255,255,0.8)}select{margin:0 auto 1.2rem auto;padding:2px 5px;width:100%;box-sizing:border-box;border:0;border-radius:4px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background:rgba(255,255,255,0.8)}input[id^="num"]{max-width:6em;width:auto;text-align:right;font-weight:bold;font-size:115%}body div>ul.navigation{margin:0;padding:0;border-bottom:3px solid #666;overflow:hidden}ul.navigation li{list-style:none;float:left;margin-right:4px}ul.navigation li.controls{float:right}ul.navigation li a{font-weight:bold;display:inline-block;padding:6px 12px;color:#888;outline:0;text-decoration:none;background:#f3f3f3;background:-webkit-gradient(linear,0 0,0 bottom,from(#eee),to(#e4e4e4));background:-moz-linear-gradient(#eee,#e4e4e4);background:linear-gradient(#eee,#e4e4e4);-pie-background:linear-gradient(#eee,#e4e4e4)}ul.navigation li.active a{pointer-events:none;color:white;background:#666;background:-webkit-gradient(linear,0 0,0 bottom,from(#888),to(#666));background:-moz-linear-gradient(#888,#666);background:linear-gradient(#888,#666);-pie-background:linear-gradient(#888,#666)}div.tabscontent>div{padding:0 15px}#tabsnav:empty{display:none}.range-slider{margin:0}.range-slider{width:100%}.range-slider__range{-webkit-appearance:none;width:calc(100% - (45px));height:10px;border-radius:5px;outline:0;padding:0;margin:0}.range-slider__value{display:inline-block;position:relative;width:30px;color:#fff;line-height:20px;text-align:center;border-radius:3px;padding:5px 5px;margin-left:2px}.range-slider__value:after{position:absolute;top:8px;left:-7px;width:0;height:0;content:""}::-moz-range-track{border:0}input::-moz-focus-inner,input::-moz-focus-outer{border:0}svg{display:block;width:100%;height:100%}.y-axis path,.x-axis path{stroke:gray;stroke-width:1;fill:none}.series{stroke:steelblue;stroke-width:3;fill:none}.data-points circle{stroke:steelblue;stroke-width:2;fill:white}.data-points text{display:none}.data-points circle:hover{fill:steelblue;stroke-width:6}.data-points circle:hover+text{display:inline-block}text{text-anchor:end} \ No newline at end of file +.container{position:relative;width:79%;margin:20px;box-sizing:border-box}.column,.columns{width:100%;float:left}.card{min-height:100px;border-radius:6px;box-shadow:0 4px 4px rgba(204,197,185,0.5);padding-left:20px;padding-right:20px;margin-bottom:40px;min-width:500px;color:#fff}@media(min-width:1205px){.wide.card{min-width:1075px}}@media(min-width:1790px){.wide.card{min-width:1650px}}@media(max-width:630px){.card{min-width:98%}}.sectionbreak.columns{color:black}.sectionbreak.columns hr{border:0;height:2px;background-color:#666}.turquoise{background:#1abc9c;border-bottom:#16a085 3px solid}.emerald{background:#2ecc71;border-bottom:#27ae60 3px solid}.peterriver{background:#3498db;border-bottom:#2980b9 3px solid}.wetasphalt{background:#34495e;border-bottom:#2c3e50 3px solid}.sunflower{background:#f1c40f;border-bottom:#e6bb0f 3px solid}.carrot{background:#e67e22;border-bottom:#d35400 3px solid}.alizarin{background:#e74c3c;border-bottom:#c0392b 3px solid}.dark{background:#444857;border-bottom:#444857 3px solid}.label{box-sizing:border-box;white-space:nowrap;border-radius:.2em;padding:.12em .4em .14em;text-align:center;color:#fff;font-weight:700;line-height:1.3;margin-bottom:5px;display:inline-block;white-space:nowrap;vertical-align:baseline;position:relative;top:-.15em;background-color:#999;margin-bottom:10px}.label-wrap{width:90%;white-space:pre-wrap;word-wrap:break-word}.label.color-blue{background-color:#6f9ad1}.label.color-red{background-color:#d37c7c}.label.color-green{background-color:#9bc268}.label.color-orange{background-color:#dea154}.label.color-yellow{background-color:#e9d641}.label.color-purple{background-color:#9f83d1}@media(min-width:400px){.container{width:84%}}@media(min-width:630px){.container{width:98%}.column,.columns{margin-right:35px}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}}html{font-size:62.5%}body{margin:0;font-size:1.5em;line-height:1;font-weight:400;font-family:"Open Sans",sans-serif;color:#222;background-color:#ecf0f1}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:300}h1{font-size:4rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media(min-width:630px){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2rem}h6{font-size:1.5rem}}p{margin-top:0}a{color:#1eaedb}a:hover{color:#0fa0ce}button{display:inline-block;padding:10px;border-radius:3px;color:#fff;background-color:#999}button:active{background-color:#666;transform:translateX(4px) translateY(4px)}#mainHeader{display:inline-block}#conStatus{position:inherit;font-size:.75em}button,.button{margin-bottom:1rem;margin-left:.3rem;margin-right:.3rem}.u-full-width{width:100%;box-sizing:border-box}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right}.u-pull-left{float:left}.tcenter{text-align:center}hr{margin-top:.5rem;margin-bottom:1.2rem;border-width:0;border-top:1px solid #e1e1e1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}.control{background-color:#ddd;background-image:linear-gradient(hsla(0,0%,0%,0.1),hsla(0,0%,100%,0.1));border-radius:50%;box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,0.5),0 0 1px 1px hsla(0,0%,100%,0.75),0 0 1px 2px hsla(0,0%,100%,0.25),0 0 1px 3px hsla(0,0%,100%,0.25),0 0 1px 4px hsla(0,0%,100%,0.25),0 0 1px 6px hsla(0,0%,0%,0.75);height:9em;margin:3em auto;position:relative;width:9em}.control ul{height:100%;padding:0;transform:rotate(45deg)}.control li{border-radius:100% 0 0 0;box-shadow:inset -1px -1px 1px hsla(0,0%,100%,0.5),0 0 1px hsla(0,0%,0%,0.75);display:inline-block;height:50%;overflow:hidden;width:50%}.control ul li:nth-child(2){transform:rotate(90deg)}.control ul li:nth-child(3){transform:rotate(-90deg)}.control ul li:nth-child(4){transform:rotate(180deg)}.control ul a{height:200%;position:relative;transform:rotate(-45deg);width:200%}.control a:hover,.control a:focus{background-color:hsla(0,0%,100%,0.25)}.control a{border-radius:50%;color:#333;display:block;font:bold 1em/3 sans-serif;text-align:center;text-decoration:none;text-shadow:0 1px 1px hsla(0,0%,100%,0.4);transition:.15s}.control .confirm{background-color:#ddd;background-image:linear-gradient(hsla(0,0%,0%,0.15),hsla(0,0%,100%,0.25));box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,0.5),0 0 1px 1px hsla(0,0%,100%,0.25),0 0 1px 2px hsla(0,0%,100%,0.25),0 0 1px 3px hsla(0,0%,100%,0.25),0 0 1px 4px hsla(0,0%,100%,0.25),0 0 1px 6px hsla(0,0%,0%,0.85);left:50%;line-height:3;margin:-1.5em;position:absolute;top:50%;width:3em}.control .confirm:hover,.control .confirm:focus{background-color:#eee}.switch{display:inline-block !important;background-color:#bebebe;border-radius:4px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);color:#fff;cursor:pointer;display:block;font-size:14px;height:26px;margin-left:.3rem;margin-right:.3rem;position:relative;width:60px;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}.switch.checked{background-color:#76d21d}.switch input[type="checkbox"]{display:none;cursor:pointer;height:10px;left:12px;position:absolute;top:8px;width:10px}.in{position:absolute;top:8px;left:12px;-webkit-transition:left .08s ease-in-out;-moz-transition:left .08s ease-in-out;-o-transition:left .08s ease-in-out;-ms-transition:left .08s ease-in-out;transition:left .08s ease-in-out}.switch.checked div{left:38px}.switch .in:before{background:#fff;background:-moz-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#f0f0f0));background:-webkit-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-o-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-ms-linear-gradient(top,#fff 0,#f0f0f0 100%);background:linear-gradient(to bottom,#fff 0,#f0f0f0 100%);border:1px solid #fff;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,0.3);content:"";height:18px;position:absolute;top:-5px;left:-9px;width:26px}.switch .in:after{background:#f0f0f0;background:-moz-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f0f0f0),color-stop(100%,#fff));background:-webkit-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-o-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-ms-linear-gradient(top,#f0f0f0 0,#fff 100%);background:linear-gradient(to bottom,#f0f0f0 0,#fff 100%);border-radius:10px;content:"";height:12px;margin:-1px 0 0 -1px;position:absolute;width:12px}.rkmd-slider{display:block;position:relative;font-size:16px;font-family:"Roboto",sans-serif}.rkmd-slider input[type="range"]{overflow:hidden;position:absolute;width:1px;height:1px;opacity:0}.rkmd-slider input[type="range"]+.slider{display:block;position:relative;width:100%;height:27px;border-radius:13px;background-color:#bebebe}@media(pointer:fine){.rkmd-slider input[type="range"]+.slider{height:4px;border-radius:0}}.rkmd-slider input[type="range"]+.slider .slider-fill{display:block;position:absolute;width:0;height:100%;user-select:none;z-index:1}.rkmd-slider input[type="range"]+.slider .slider-handle{cursor:pointer;position:absolute;top:12px;left:0;width:15px;height:15px;margin-left:-8px;border-radius:50%;transition:all .2s ease;user-select:none;z-index:2}@media(pointer:fine){.rkmd-slider input[type="range"]+.slider .slider-handle{top:-5.5px}}.rkmd-slider input[type="range"]:disabled+.slider{background-color:#b0b0b0 !important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle{cursor:default !important;background-color:#b0b0b0 !important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill .slider-label,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle .slider-label{display:none;background-color:#b0b0b0 !important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active{top:-5.5px;width:15px;height:15px;margin-left:-8px}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active .slider-label,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active .slider-label{display:none;border-radius:50%;transform:none}.rkmd-slider input[type="range"]:disabled+.slider .slider-handle:active{box-shadow:none !important;transform:scale(1) !important}.rkmd-slider.slider-discrete .slider .slider-handle{position:relative;z-index:1}.rkmd-slider.slider-discrete .slider .slider-handle .slider-label{position:absolute;top:-17.5px;left:4px;width:30px;height:30px;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;border-radius:50%;-webkit-transform:scale(1) rotate(-45deg);transform:scale(1) rotate(-45deg);-webkit-transition:all .2s ease;transition:all .2s ease}@media(pointer:fine){.rkmd-slider.slider-discrete .slider .slider-handle .slider-label{left:-2px;-webkit-transform:scale(0.5) rotate(-45deg);transform:scale(0.5) rotate(-45deg)}}.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span{position:absolute;top:7px;left:0;width:100%;color:#fff;font-size:16px;text-align:center;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media(pointer:fine){.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span{font-size:12px}}.rkmd-slider.slider-discrete .slider .slider-handle.is-active{top:0;margin-left:-2px;width:4px;height:4px}.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label{top:-15px;left:-2px;border-radius:15px 15px 15px 0;-webkit-transform:rotate(-45deg) translate(23px,-25px);transform:rotate(-45deg) translate(23px,-25px)}.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label span{opacity:1}.rkmd-slider.slider-discrete.slider-turquoise .slider-label{background-color:#16a085}.rkmd-slider.slider-discrete.slider-emerald .slider-label{background-color:#27ae60}.peterriver{background:#3498db;border-bottom:#2980b9 3px solid}.rkmd-slider.slider-discrete.slider-peterriver .slider-label{background-color:#2980b9}.wetasphalt{background:#34495e;border-bottom:#2c3e50 3px solid}.rkmd-slider.slider-discrete.slider-wetasphalt .slider-label{background-color:#2c3e50}.sunflower{background:#f1c40f;border-bottom:#e6bb0f 3px solid}.rkmd-slider.slider-discrete.slider-sunflower .slider-label{background-color:#e6bb0f}.carrot{background:#e67e22;border-bottom:#d35400 3px solid}.rkmd-slider.slider-discrete.slider-carrot .slider-label{background-color:#d35400}.alizarin{background:#e74c3c;border-bottom:#c0392b 3px solid}.rkmd-slider.slider-discrete.slider-alizarin .slider-label{background-color:#c0392b}input{margin:0 auto 1.2rem auto;padding:2px 5px;width:100%;box-sizing:border-box;border:0;border-radius:4px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background:rgba(255,255,255,0.8)}select{margin:0 auto 1.2rem auto;padding:2px 5px;width:100%;box-sizing:border-box;border:0;border-radius:4px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background:rgba(255,255,255,0.8)}input[id^="num"]{max-width:6em;width:auto;text-align:right;font-weight:bold;font-size:115%}body div>ul.navigation{margin:0;margin-bottom:30px;padding:0;border-bottom:3px solid #666;overflow:hidden}ul.navigation li{list-style:none;float:left;margin-right:4px}ul.navigation li.controls{float:right}ul.navigation li a{font-weight:bold;display:inline-block;padding:6px 12px;color:#888;outline:0;text-decoration:none;background:#f3f3f3;background:-webkit-gradient(linear,0 0,0 bottom,from(#eee),to(#e4e4e4));background:-moz-linear-gradient(#eee,#e4e4e4);background:linear-gradient(#eee,#e4e4e4);-pie-background:linear-gradient(#eee,#e4e4e4)}ul.navigation li.active a{pointer-events:none;color:white;background:#666;background:-webkit-gradient(linear,0 0,0 bottom,from(#888),to(#666));background:-moz-linear-gradient(#888,#666);background:linear-gradient(#888,#666);-pie-background:linear-gradient(#888,#666)}div.tabscontent>div{padding:0 15px}#tabsnav:empty{display:none}.range-slider{margin:0}.range-slider{width:100%}.range-slider__range{-webkit-appearance:none;width:calc(100% - (45px));height:10px;border-radius:5px;outline:0;padding:0;margin:0}.range-slider__value{display:inline-block;position:relative;width:30px;color:#fff;line-height:20px;text-align:center;border-radius:3px;padding:5px 5px;margin-left:2px}.range-slider__value:after{position:absolute;top:8px;left:-7px;width:0;height:0;content:""}::-moz-range-track{border:0}input::-moz-focus-inner,input::-moz-focus-outer{border:0}svg{display:block;width:100%;height:100%}.y-axis path,.x-axis path{stroke:gray;stroke-width:1;fill:none}.series{stroke:steelblue;stroke-width:3;fill:none}.data-points circle{stroke:steelblue;stroke-width:2;fill:white}.data-points text{display:none}.data-points circle:hover{fill:steelblue;stroke-width:6}.data-points circle:hover+text{display:inline-block}text{text-anchor:end} \ No newline at end of file diff --git a/data/js/controls.js b/data/js/controls.js index f8a8101..3a57493 100644 --- a/data/js/controls.js +++ b/data/js/controls.js @@ -52,7 +52,10 @@ const UPDATE_STEP = 116; const UI_GAUGE = 17; const UPDATE_GAUGE = 117; const UI_ACCEL = 18; -const UPTDATE_ACCEL = 117; +const UPDATE_ACCEL = 118; + +const UI_SEPARATOR = 19; +const UPDATE_SEPARATOR = 119; const UP = 0; const DOWN = 1; @@ -233,9 +236,6 @@ function start() { var e = document.body; var center = ""; - panelStyle = data.hasOwnProperty('panelStyle') ? " style='" + data.panelStyle + "'" : ""; - elementStyle = data.hasOwnProperty('elementStyle') ? " style='" + data.elementStyle + "'" : ""; - switch (data.type) { case UI_INITIAL_GUI: // Clear current elements @@ -272,366 +272,130 @@ function start() { $("#mainHeader").html(data.label); break; + /* + Most elements have the same behaviour when added. + */ case UI_LABEL: - var parent; - if (data.parentControl) { - parent = $("#tab" + data.parentControl); - } else { - parent = $("#row"); - } - if (data.visible) { - parent.append( - "
" + - "
" + - data.label + - "
" + - "" + - data.value + - "" + - "
" - ); - } + case UI_NUMBER: + case UI_TEXT_INPUT: + case UI_SELECT: + case UI_GAUGE: + case UI_SEPARATOR: + if (data.visible) addToHTML(data); break; + /* + These elements must call additional functions after being added to the DOM + */ case UI_BUTTON: - var parent; - if (data.parentControl) { - parent = $("#tab" + data.parentControl); - } else { - parent = $("#row"); + if (data.visible) { + addToHTML(data); + $("#btn" + data.id).on({ + touchstart: function (e) { + e.preventDefault(); + buttonclick(data.id, true); + }, + touchend: function (e) { + e.preventDefault(); + buttonclick(data.id, false); + }, + }); } - if (data.visible) { - parent.append( - "
" + - "
" + - data.label + - "
" + - "
" - ); - $("#btn" + data.id).on({ - touchstart: function (e) { - e.preventDefault(); - buttonclick(data.id, true); - }, - touchend: function (e) { - e.preventDefault(); - buttonclick(data.id, false); - }, - }); - } break; case UI_SWITCHER: - var parent; - if (data.parentControl) { - parent = $("#tab" + data.parentControl); - } else { - parent = $("#row"); + if (data.visible) { + addToHTML(data); + switcher(data.id, data.value); } - if (data.visible) { - parent.append( - "
" + - "
" + - data.label + - "
" + - "" + - "
" - ); - switcher(data.id, data.value); - } break; case UI_CPAD: case UI_PAD: - var parent; - if (data.parentControl) { - parent = $("#tab" + data.parentControl); - } else { - parent = $("#row"); - } - if (data.visible) { - parent.append( - "
" + - "
" + - data.label + - "
" + - "" + - "
" - ); - - $("#pf" + data.id).on({ - touchstart: function (e) { - e.preventDefault(); - padclick(UP, data.id, true); - }, - touchend: function (e) { - e.preventDefault(); - padclick(UP, data.id, false); - }, - }); - $("#pl" + data.id).on({ - touchstart: function (e) { - e.preventDefault(); - padclick(LEFT, data.id, true); - }, - touchend: function (e) { - e.preventDefault(); - padclick(LEFT, data.id, false); - }, - }); - $("#pr" + data.id).on({ - touchstart: function (e) { - e.preventDefault(); - padclick(RIGHT, data.id, true); - }, - touchend: function (e) { - e.preventDefault(); - padclick(RIGHT, data.id, false); - }, - }); - $("#pb" + data.id).on({ - touchstart: function (e) { - e.preventDefault(); - padclick(DOWN, data.id, true); - }, - touchend: function (e) { - e.preventDefault(); - padclick(DOWN, data.id, false); - }, - }); - $("#pc" + data.id).on({ - touchstart: function (e) { - e.preventDefault(); - padclick(CENTER, data.id, true); - }, - touchend: function (e) { - e.preventDefault(); - padclick(CENTER, data.id, false); - }, - }); - } + if (data.visible) { + addToHTML(data); + $("#pf" + data.id).on({ + touchstart: function (e) { + e.preventDefault(); + padclick(UP, data.id, true); + }, + touchend: function (e) { + e.preventDefault(); + padclick(UP, data.id, false); + }, + }); + $("#pl" + data.id).on({ + touchstart: function (e) { + e.preventDefault(); + padclick(LEFT, data.id, true); + }, + touchend: function (e) { + e.preventDefault(); + padclick(LEFT, data.id, false); + }, + }); + $("#pr" + data.id).on({ + touchstart: function (e) { + e.preventDefault(); + padclick(RIGHT, data.id, true); + }, + touchend: function (e) { + e.preventDefault(); + padclick(RIGHT, data.id, false); + }, + }); + $("#pb" + data.id).on({ + touchstart: function (e) { + e.preventDefault(); + padclick(DOWN, data.id, true); + }, + touchend: function (e) { + e.preventDefault(); + padclick(DOWN, data.id, false); + }, + }); + $("#pc" + data.id).on({ + touchstart: function (e) { + e.preventDefault(); + padclick(CENTER, data.id, true); + }, + touchend: function (e) { + e.preventDefault(); + padclick(CENTER, data.id, false); + }, + }); + } break; - //https://codepen.io/seanstopnik/pen/CeLqA case UI_SLIDER: - var parent; - if (data.parentControl) { - parent = $("#tab" + data.parentControl); - } else { - parent = $("#row"); + //https://codepen.io/seanstopnik/pen/CeLqA + if (data.visible) { + addToHTML(data); + rangeSlider(!sliderContinuous); } - if (data.visible) { - parent.append( - "
" + - "
" + - data.label + - "
" + - "
" + - "" + - "" + - data.value + - "" + - "
" + - "
" - ); - rangeSlider(!sliderContinuous); - } - break; - - case UI_NUMBER: - var parent; - if (data.parentControl) { - parent = $("#tab" + data.parentControl); - } else { - parent = $("#row"); - } - if (data.visible) { - parent.append( - "
" + - "
" + - data.label + - "
" + - "" + - "
" - ); - } - break; - - case UI_TEXT_INPUT: - var parent; - if (data.parentControl) { - parent = $("#tab" + data.parentControl); - } else { - parent = $("#row"); - } - if (data.visible) { - parent.append( - "
" + - "
" + - data.label + - "
" + - "" + - "
" - ); - } break; case UI_TAB: - if (data.visible) { - $("#tabsnav").append( - "
  • " + data.value + "
    • " - ); - $("#tabscontent").append("
    "); + if (data.visible) { + $("#tabsnav").append( + "
  • " + data.value + "
    • " + ); + $("#tabscontent").append("
    "); - tabs = $(".tabscontent").tabbedContent({ loop: true }).data("api"); - // switch to tab... - $("a") - .filter(function () { - return $(this).attr("href") === "#click-to-switch"; - }) - .on("click", function (e) { - var tab = prompt("Tab to switch to (number or id)?"); - if (!tabs.switchTab(tab)) { - alert("That tab does not exist :\\"); - } - e.preventDefault(); - }); - } - break; - - case UI_SELECT: - var parent; - if (data.parentControl) { - parent = $("#tab" + data.parentControl); - } else { - parent = $("#row"); - } - if (data.visible) { - parent.append( - "
    " + - "
    " + - data.label + - "
    " + - "" + - "
    " - ); - } - break; case UI_ACCEL: if (hasAccel) break; - var parent; - if (data.parentControl) { - parent = $("#tab" + data.parentControl); - } else { - parent = $("#row"); - } hasAccel = true; - if (data.visible) { - parent.append( - "
    " + - "
    " + - data.label + - "
    " + - "ACCEL // Not implemented fully!
    " +
-            "
    "
-        );
-
-        requestOrientationPermission();
-		}
+		    if (data.visible) {
+          addToHTML(data);
+          requestOrientationPermission();
+		    }
         break;
 
+      /*
+       * Update messages change the value/style of a component without adding new HTML
+       */
       case UPDATE_LABEL:
         $("#l" + data.id).html(data.value);
         if(data.hasOwnProperty('elementStyle')) {
@@ -964,3 +657,108 @@ var rangeSlider = function (isDiscrete) {
     }
   });
 };
+
+
+var addToHTML = function(data) {
+  panelStyle = data.hasOwnProperty('panelStyle') ? " style='" + data.panelStyle + "' " : "";
+  elementStyle = data.hasOwnProperty('elementStyle') ? " style='" + data.elementStyle + "' " : "";
+
+  if(!data.hasOwnProperty('parentControl') || $("#tab" + data.parentControl).length > 0) {
+    //We add the control with its own panel
+    var parent = data.hasOwnProperty('parentControl') ? 
+      $("#tab" + data.parentControl) :
+      $("#row");
+
+    var html = "";
+    switch(data.type) {
+      case UI_LABEL:
+      case UI_BUTTON:
+      case UI_SWITCHER:
+      case UI_CPAD:
+      case UI_PAD:
+      case UI_SLIDER:
+      case UI_NUMBER:
+      case UI_TEXT_INPUT:
+      case UI_SELECT:
+      case UI_GRAPH:
+      case UI_GAUGE:
+      case UI_ACCEL:
+        html = "
    " + data.label + "
    " +
+        elementHTML(data.type, data.id, data.value, elementStyle) +
+        "
    ";
+        break;
+      case UI_SEPARATOR:
+        html = "
    " +
+        "
    " + data.label + "
    ";
+        break;
+    }
+
+    parent.append(html);
+
+  } else {
+    //We are adding to an existing panel so we only need the HTML for the element
+    var parent = $("#id" + data.parentControl);
+    parent.append(elementHTML(data.type, data.id, data.value, elementStyle));
+  }
+}
+
+var elementHTML = function(type, id, value, elementStyle) {
+  switch(type) {
+    case UI_LABEL:
+      return "" + value + "";
+    case UI_BUTTON:
+      return "";
+    case UI_SWITCHER:
+      return "";
+    case UI_CPAD:
+    case UI_PAD:
+      return "";
+    case UI_SLIDER:
+      return "
    " + 
+        "" + 
+        value + "
    ";
+    case UI_NUMBER:
+      return "";
+    case UI_TEXT_INPUT:
+      return "";
+    case UI_SELECT:
+      return "";
+    case UI_ACCEL:
+      return "ACCEL // Not implemented fully!
    ";
+    default:
+      return "";
+  }
+}
\ No newline at end of file
diff --git a/data/js/controls.min.js b/data/js/controls.min.js
index 6667c78..1c0f96a 100644
--- a/data/js/controls.min.js
+++ b/data/js/controls.min.js
@@ -1,4 +1,4 @@
-const UI_INITIAL_GUI=200;const UI_RELOAD=201;const UPDATE_OFFSET=100;const UI_EXTEND_GUI=210;const UI_TITEL=0;const UI_PAD=1;const UPDATE_PAD=101;const UI_CPAD=2;const UPDATE_CPAD=102;const UI_BUTTON=3;const UPDATE_BUTTON=103;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;const UI_SELECT=12;const UPDATE_SELECT=112;const UI_OPTION=13;const UPDATE_OPTION=113;const UI_MIN=14;const UPDATE_MIN=114;const UI_MAX=15;const UPDATE_MAX=115;const UI_STEP=16;const UPDATE_STEP=116;const UI_GAUGE=17;const UPDATE_GAUGE=117;const UI_ACCEL=18;const UPTDATE_ACCEL=117;const UP=0;const DOWN=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_DARK=7;const C_NONE=255;var graphData=new Array();var hasAccel=false;var sliderContinuous=false;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
+const UI_INITIAL_GUI=200;const UI_RELOAD=201;const UPDATE_OFFSET=100;const UI_EXTEND_GUI=210;const UI_TITEL=0;const UI_PAD=1;const UPDATE_PAD=101;const UI_CPAD=2;const UPDATE_CPAD=102;const UI_BUTTON=3;const UPDATE_BUTTON=103;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;const UI_SELECT=12;const UPDATE_SELECT=112;const UI_OPTION=13;const UPDATE_OPTION=113;const UI_MIN=14;const UPDATE_MIN=114;const UI_MAX=15;const UPDATE_MAX=115;const UI_STEP=16;const UPDATE_STEP=116;const UI_GAUGE=17;const UPDATE_GAUGE=117;const UI_ACCEL=18;const UPDATE_ACCEL=118;const UI_SEPARATOR=19;const UPDATE_SEPARATOR=119;const UP=0;const DOWN=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_DARK=7;const C_NONE=255;var graphData=new Array();var hasAccel=false;var sliderContinuous=false;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
 var websock;var websockConnected=false;function requestOrientationPermission(){}
 function saveGraphData(){localStorage.setItem("espuigraphs",JSON.stringify(graphData));}
 function restoreGraphData(id){var savedData=localStorage.getItem("espuigraphs",graphData);if(savedData!=null){savedData=JSON.parse(savedData);return savedData[id];}
@@ -7,185 +7,13 @@ function restart(){$(document).add("*").off();$("#row").html("");websock.close()
 function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart,});}
 function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
 function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);if(window.location.port!=""||window.location.port!=80||window.location.port!=443){websock=new WebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws");}else{websock=new WebSocket("ws://"+window.location.hostname+"/ws");}
-websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";panelStyle=data.hasOwnProperty('panelStyle')?" style='"+data.panelStyle+"'":"";elementStyle=data.hasOwnProperty('elementStyle')?" style='"+data.elementStyle+"'":"";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
-data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_EXTEND_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-""+
-data.value+
-""+
-"
    ");}
-break;case UI_BUTTON:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-"
    ");$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);},touchend:function(e){e.preventDefault();buttonclick(data.id,false);},});}
-break;case UI_SWITCHER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-""+
-"
    ");switcher(data.id,data.value);}
-break;case UI_CPAD:case UI_PAD:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-""+
-"
    ");$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(UP,data.id,true);},touchend:function(e){e.preventDefault();padclick(UP,data.id,false);},});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);},touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);},});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);},touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);},});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(DOWN,data.id,true);},touchend:function(e){e.preventDefault();padclick(DOWN,data.id,false);},});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);},touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);},});}
-break;case UI_SLIDER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-"
    "+
-""+
-""+
-data.value+
-""+
-"
    "+
-"
    ");rangeSlider(!sliderContinuous);}
-break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-""+
-"
    ");}
-break;case UI_TEXT_INPUT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-""+
-"
    ");}
+websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
+data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_EXTEND_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GAUGE:case UI_SEPARATOR:if(data.visible)addToHTML(data);break;case UI_BUTTON:if(data.visible){addToHTML(data);$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);},touchend:function(e){e.preventDefault();buttonclick(data.id,false);},});}
+break;case UI_SWITCHER:if(data.visible){addToHTML(data);switcher(data.id,data.value);}
+break;case UI_CPAD:case UI_PAD:if(data.visible){addToHTML(data);$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(UP,data.id,true);},touchend:function(e){e.preventDefault();padclick(UP,data.id,false);},});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);},touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);},});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);},touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);},});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(DOWN,data.id,true);},touchend:function(e){e.preventDefault();padclick(DOWN,data.id,false);},});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);},touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);},});}
+break;case UI_SLIDER:if(data.visible){addToHTML(data);rangeSlider(!sliderContinuous);}
 break;case UI_TAB:if(data.visible){$("#tabsnav").append("
  • "+data.value+"
    • ");$("#tabscontent").append("
    ");tabs=$(".tabscontent").tabbedContent({loop:true}).data("api");$("a").filter(function(){return $(this).attr("href")==="#click-to-switch";}).on("click",function(e){var tab=prompt("Tab to switch to (number or id)?");if(!tabs.switchTab(tab)){alert("That tab does not exist :\\");}
 e.preventDefault();});}
-break;case UI_SELECT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-""+
-"
    ");}
-break;case UI_ACCEL:if(hasAccel)break;var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-hasAccel=true;if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-"ACCEL // Not implemented fully!
    "+
-"
    ");requestOrientationPermission();}
+break;case UI_GRAPH:if(data.visible){addToHTML(data);graphData[data.id]=restoreGraphData(data.id);renderGraphSvg(graphData[data.id],"graph"+data.id);}
+break;case ADD_GRAPH_POINT:var ts=Math.round(new Date().getTime()/1000);graphData[data.id].push({x:ts,y:data.value});saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case CLEAR_GRAPH:graphData[data.id]=[];saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case UI_ACCEL:if(hasAccel)break;hasAccel=true;if(data.visible){addToHTML(data);requestOrientationPermission();}
 break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);if(data.hasOwnProperty('elementStyle')){$("#l"+data.id).attr("style",data.elementStyle);}
 break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
 break;case UPDATE_SLIDER:slider_move($("#id"+data.id),data.value,"100",false);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
@@ -269,4 +48,38 @@ function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else
 function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case UP:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case DOWN:if(isdown)websock.send("pbdown:"+number);else websock.send("pbup:"+number);break;case LEFT:if(isdown)websock.send("pldown:"+number);else websock.send("plup:"+number);break;case RIGHT:if(isdown)websock.send("prdown:"+number);else websock.send("prup:"+number);break;}}
 function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}
 var rangeSlider=function(isDiscrete){var range=$(".range-slider__range");var slidercb=function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));};range.on({input:function(){$(this).next().html(this.value)}});range.each(function(){$(this).next().html(this.value);if($(this).attr("callbackSet")!="true"){if(!isDiscrete){$(this).on({input:slidercb});}else{$(this).on({change:slidercb});}
-$(this).attr("callbackSet","true");}});};
\ No newline at end of file
+$(this).attr("callbackSet","true");}});};var addToHTML=function(data){panelStyle=data.hasOwnProperty('panelStyle')?" style='"+data.panelStyle+"' ":"";elementStyle=data.hasOwnProperty('elementStyle')?" style='"+data.elementStyle+"' ":"";if(!data.hasOwnProperty('parentControl')||$("#tab"+data.parentControl).length>0){var parent=data.hasOwnProperty('parentControl')?$("#tab"+data.parentControl):$("#row");var html="";switch(data.type){case UI_LABEL:case UI_BUTTON:case UI_SWITCHER:case UI_CPAD:case UI_PAD:case UI_SLIDER:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GRAPH:case UI_GAUGE:case UI_ACCEL:html="
    "+data.label+"
    "+
+elementHTML(data.type,data.id,data.value,elementStyle)+
+"
    ";break;case UI_SEPARATOR:html="
    "+
+"
    "+data.label+"
    ";break;}
+parent.append(html);}else{var parent=$("#id"+data.parentControl);parent.append(elementHTML(data.type,data.id,data.value,elementStyle));}}
+var elementHTML=function(type,id,value,elementStyle){switch(type){case UI_LABEL:return""+value+"";case UI_BUTTON:return"";case UI_SWITCHER:return"";case UI_CPAD:case UI_PAD:return"";case UI_SLIDER:return"
    "+
+""+
+value+"
    ";case UI_NUMBER:return"";case UI_TEXT_INPUT:return"";case UI_SELECT:return"";case UI_ACCEL:return"ACCEL // Not implemented fully!
    ";default:return"";}}
\ No newline at end of file
diff --git a/docs/ui_groupedbuttons.png b/docs/ui_groupedbuttons.png
new file mode 100644
index 0000000..55a13c3
Binary files /dev/null and b/docs/ui_groupedbuttons.png differ
diff --git a/docs/ui_groupedbuttons2.png b/docs/ui_groupedbuttons2.png
new file mode 100644
index 0000000..0e4ddd2
Binary files /dev/null and b/docs/ui_groupedbuttons2.png differ
diff --git a/docs/ui_separators.png b/docs/ui_separators.png
new file mode 100644
index 0000000..d355bac
Binary files /dev/null and b/docs/ui_separators.png differ
diff --git a/src/ESPUI.cpp b/src/ESPUI.cpp
index 41589b9..3fd67fe 100644
--- a/src/ESPUI.cpp
+++ b/src/ESPUI.cpp
@@ -714,6 +714,10 @@ uint16_t ESPUIClass::gauge(const char* label, ControlColor color, int number, in
     return numberId;
 }
 
+uint16_t ESPUIClass::separator(const char* label) {
+    return addControl(ControlType::Separator, label, "", ControlColor::Alizarin, Control::noParent, nullptr);
+}
+
 uint16_t ESPUIClass::accelerometer(const char* label, void (*callback)(Control*, int), ControlColor color)
 {
     return addControl(ControlType::Accel, label, "", color, Control::noParent, callback);
diff --git a/src/ESPUI.h b/src/ESPUI.h
index af26ce3..946b71c 100644
--- a/src/ESPUI.h
+++ b/src/ESPUI.h
@@ -56,6 +56,7 @@ enum ControlType : uint8_t
     Step,
     Gauge,
     Accel,
+    Separator,
 
     UpdateOffset = 100,
     UpdatePad = 101,
@@ -75,6 +76,7 @@ enum ControlType : uint8_t
     UpdateStep,
     UpdateGauge,
     UpdateAccel,
+    UpdateSeparator,
 
     InitialGui = 200,
     Reload = 201,
@@ -256,6 +258,7 @@ public:
     uint16_t graph(const char* label, ControlColor color); // Create Graph display
     uint16_t gauge(const char* label, ControlColor color, int value, int min = 0,
         int max = 100); // Create Gauge display
+    uint16_t separator(const char* label); //Create separator
 
     // Input only
     uint16_t accelerometer(const char* label, void (*callback)(Control*, int), ControlColor color);
diff --git a/src/dataControlsJS.h b/src/dataControlsJS.h
index 35a274a..fc06d73 100644
--- a/src/dataControlsJS.h
+++ b/src/dataControlsJS.h
@@ -1,5 +1,5 @@
 const char JS_CONTROLS[] PROGMEM = R"=====(
-const UI_INITIAL_GUI=200;const UI_RELOAD=201;const UPDATE_OFFSET=100;const UI_EXTEND_GUI=210;const UI_TITEL=0;const UI_PAD=1;const UPDATE_PAD=101;const UI_CPAD=2;const UPDATE_CPAD=102;const UI_BUTTON=3;const UPDATE_BUTTON=103;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;const UI_SELECT=12;const UPDATE_SELECT=112;const UI_OPTION=13;const UPDATE_OPTION=113;const UI_MIN=14;const UPDATE_MIN=114;const UI_MAX=15;const UPDATE_MAX=115;const UI_STEP=16;const UPDATE_STEP=116;const UI_GAUGE=17;const UPDATE_GAUGE=117;const UI_ACCEL=18;const UPTDATE_ACCEL=117;const UP=0;const DOWN=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_DARK=7;const C_NONE=255;var graphData=new Array();var hasAccel=false;var sliderContinuous=false;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
+const UI_INITIAL_GUI=200;const UI_RELOAD=201;const UPDATE_OFFSET=100;const UI_EXTEND_GUI=210;const UI_TITEL=0;const UI_PAD=1;const UPDATE_PAD=101;const UI_CPAD=2;const UPDATE_CPAD=102;const UI_BUTTON=3;const UPDATE_BUTTON=103;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;const UI_SELECT=12;const UPDATE_SELECT=112;const UI_OPTION=13;const UPDATE_OPTION=113;const UI_MIN=14;const UPDATE_MIN=114;const UI_MAX=15;const UPDATE_MAX=115;const UI_STEP=16;const UPDATE_STEP=116;const UI_GAUGE=17;const UPDATE_GAUGE=117;const UI_ACCEL=18;const UPDATE_ACCEL=118;const UI_SEPARATOR=19;const UPDATE_SEPARATOR=119;const UP=0;const DOWN=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_DARK=7;const C_NONE=255;var graphData=new Array();var hasAccel=false;var sliderContinuous=false;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
 var websock;var websockConnected=false;function requestOrientationPermission(){}
 function saveGraphData(){localStorage.setItem("espuigraphs",JSON.stringify(graphData));}
 function restoreGraphData(id){var savedData=localStorage.getItem("espuigraphs",graphData);if(savedData!=null){savedData=JSON.parse(savedData);return savedData[id];}
@@ -8,185 +8,13 @@ function restart(){$(document).add("*").off();$("#row").html("");websock.close()
 function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart,});}
 function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
 function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);if(window.location.port!=""||window.location.port!=80||window.location.port!=443){websock=new WebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws");}else{websock=new WebSocket("ws://"+window.location.hostname+"/ws");}
-websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";panelStyle=data.hasOwnProperty('panelStyle')?" style='"+data.panelStyle+"'":"";elementStyle=data.hasOwnProperty('elementStyle')?" style='"+data.elementStyle+"'":"";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
-data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_EXTEND_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-""+
-data.value+
-""+
-"
    ");}
-break;case UI_BUTTON:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-"
    ");$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);},touchend:function(e){e.preventDefault();buttonclick(data.id,false);},});}
-break;case UI_SWITCHER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-""+
-"
    ");switcher(data.id,data.value);}
-break;case UI_CPAD:case UI_PAD:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-""+
-"
    ");$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(UP,data.id,true);},touchend:function(e){e.preventDefault();padclick(UP,data.id,false);},});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);},touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);},});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);},touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);},});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(DOWN,data.id,true);},touchend:function(e){e.preventDefault();padclick(DOWN,data.id,false);},});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);},touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);},});}
-break;case UI_SLIDER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-"
    "+
-""+
-""+
-data.value+
-""+
-"
    "+
-"
    ");rangeSlider(!sliderContinuous);}
-break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-""+
-"
    ");}
-break;case UI_TEXT_INPUT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-""+
-"
    ");}
+websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
+data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_EXTEND_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GAUGE:case UI_SEPARATOR:if(data.visible)addToHTML(data);break;case UI_BUTTON:if(data.visible){addToHTML(data);$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);},touchend:function(e){e.preventDefault();buttonclick(data.id,false);},});}
+break;case UI_SWITCHER:if(data.visible){addToHTML(data);switcher(data.id,data.value);}
+break;case UI_CPAD:case UI_PAD:if(data.visible){addToHTML(data);$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(UP,data.id,true);},touchend:function(e){e.preventDefault();padclick(UP,data.id,false);},});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);},touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);},});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);},touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);},});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(DOWN,data.id,true);},touchend:function(e){e.preventDefault();padclick(DOWN,data.id,false);},});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);},touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);},});}
+break;case UI_SLIDER:if(data.visible){addToHTML(data);rangeSlider(!sliderContinuous);}
 break;case UI_TAB:if(data.visible){$("#tabsnav").append("
  • "+data.value+"
    • ");$("#tabscontent").append("
    ");tabs=$(".tabscontent").tabbedContent({loop:true}).data("api");$("a").filter(function(){return $(this).attr("href")==="#click-to-switch";}).on("click",function(e){var tab=prompt("Tab to switch to (number or id)?");if(!tabs.switchTab(tab)){alert("That tab does not exist :\\");}
 e.preventDefault();});}
-break;case UI_SELECT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-""+
-"
    ");}
-break;case UI_ACCEL:if(hasAccel)break;var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-hasAccel=true;if(data.visible){parent.append("
    "+
-"
    "+
-data.label+
-"
    "+
-"ACCEL // Not implemented fully!
    "+
-"
    ");requestOrientationPermission();}
+break;case UI_GRAPH:if(data.visible){addToHTML(data);graphData[data.id]=restoreGraphData(data.id);renderGraphSvg(graphData[data.id],"graph"+data.id);}
+break;case ADD_GRAPH_POINT:var ts=Math.round(new Date().getTime()/1000);graphData[data.id].push({x:ts,y:data.value});saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case CLEAR_GRAPH:graphData[data.id]=[];saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case UI_ACCEL:if(hasAccel)break;hasAccel=true;if(data.visible){addToHTML(data);requestOrientationPermission();}
 break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);if(data.hasOwnProperty('elementStyle')){$("#l"+data.id).attr("style",data.elementStyle);}
 break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
 break;case UPDATE_SLIDER:slider_move($("#id"+data.id),data.value,"100",false);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
@@ -270,7 +49,41 @@ function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else
 function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case UP:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case DOWN:if(isdown)websock.send("pbdown:"+number);else websock.send("pbup:"+number);break;case LEFT:if(isdown)websock.send("pldown:"+number);else websock.send("plup:"+number);break;case RIGHT:if(isdown)websock.send("prdown:"+number);else websock.send("prup:"+number);break;}}
 function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}
 var rangeSlider=function(isDiscrete){var range=$(".range-slider__range");var slidercb=function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));};range.on({input:function(){$(this).next().html(this.value)}});range.each(function(){$(this).next().html(this.value);if($(this).attr("callbackSet")!="true"){if(!isDiscrete){$(this).on({input:slidercb});}else{$(this).on({change:slidercb});}
-$(this).attr("callbackSet","true");}});};
+$(this).attr("callbackSet","true");}});};var addToHTML=function(data){panelStyle=data.hasOwnProperty('panelStyle')?" style='"+data.panelStyle+"' ":"";elementStyle=data.hasOwnProperty('elementStyle')?" style='"+data.elementStyle+"' ":"";if(!data.hasOwnProperty('parentControl')||$("#tab"+data.parentControl).length>0){var parent=data.hasOwnProperty('parentControl')?$("#tab"+data.parentControl):$("#row");var html="";switch(data.type){case UI_LABEL:case UI_BUTTON:case UI_SWITCHER:case UI_CPAD:case UI_PAD:case UI_SLIDER:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GRAPH:case UI_GAUGE:case UI_ACCEL:html="
    "+data.label+"
    "+
+elementHTML(data.type,data.id,data.value,elementStyle)+
+"
    ";break;case UI_SEPARATOR:html="
    "+
+"
    "+data.label+"
    ";break;}
+parent.append(html);}else{var parent=$("#id"+data.parentControl);parent.append(elementHTML(data.type,data.id,data.value,elementStyle));}}
+var elementHTML=function(type,id,value,elementStyle){switch(type){case UI_LABEL:return""+value+"";case UI_BUTTON:return"";case UI_SWITCHER:return"";case UI_CPAD:case UI_PAD:return"";case UI_SLIDER:return"
    "+
+""+
+value+"
    ";case UI_NUMBER:return"";case UI_TEXT_INPUT:return"";case UI_SELECT:return"";case UI_ACCEL:return"ACCEL // Not implemented fully!
    ";default:return"";}}
 )=====";
 
-const uint8_t JS_CONTROLS_GZIP[3564] PROGMEM = { 31,139,8,0,182,30,210,97,2,255,237,91,109,115,219,54,18,254,158,95,65,51,157,136,60,43,122,73,226,52,149,76,103,20,89,73,212,42,182,207,150,155,206,165,57,15,68,66,22,199,20,201,146,160,95,234,234,191,223,226,141,4,40,74,86,236,180,157,222,228,139,45,46,22,139,7,187,11,236,2,92,186,81,152,18,227,116,120,54,60,24,142,135,189,209,217,187,211,161,243,172,213,234,186,178,225,120,48,58,236,237,3,173,45,105,71,251,189,241,224,236,240,237,219,147,193,216,105,171,188,131,95,198,131,131,125,46,163,173,208,199,195,241,96,228,40,132,35,144,88,146,199,72,197,32,195,179,62,165,60,211,153,250,156,235,89,193,245,230,116,60,62,60,112,158,235,124,130,218,110,61,47,56,71,189,55,0,226,133,206,200,137,237,214,139,130,239,228,227,112,220,127,63,56,118,118,116,214,156,222,110,237,40,220,163,225,62,208,94,150,120,57,181,221,122,89,112,30,156,126,120,3,180,239,117,78,65,109,183,190,87,212,5,122,4,131,28,157,142,157,87,58,183,210,210,110,189,42,122,188,59,238,29,189,119,126,16,132,222,254,62,167,156,29,29,14,15,40,171,104,232,143,6,189,99,193,220,110,253,160,140,216,123,227,180,75,6,225,52,197,32,39,131,209,160,15,210,74,54,145,228,182,98,149,195,163,241,144,234,191,100,22,73,110,43,102,249,48,4,66,201,42,140,214,86,108,242,161,247,139,211,46,217,131,209,218,170,41,198,131,35,167,93,182,4,35,182,21,59,188,235,157,190,27,56,237,146,29,4,181,173,152,161,215,239,83,223,40,76,48,102,156,130,172,8,200,61,123,255,240,227,65,238,215,163,193,219,113,238,191,199,195,119,239,199,185,151,246,7,7,99,48,186,156,96,255,108,124,122,252,239,211,195,225,201,32,23,213,63,27,124,24,28,247,70,197,58,233,159,29,13,160,215,241,240,103,232,250,44,39,126,28,140,123,39,71,239,123,35,69,252,217,201,233,193,219,209,225,71,109,140,126,239,248,248,112,156,123,117,255,172,55,26,254,167,119,12,170,126,153,147,246,123,199,63,229,30,218,63,59,56,60,24,56,207,118,118,186,151,40,49,206,19,20,207,246,17,65,78,136,175,140,94,146,160,27,203,102,45,51,148,246,92,23,7,206,20,5,41,102,164,52,240,61,156,244,163,144,248,97,22,101,169,104,154,102,161,75,252,40,52,220,40,136,146,126,128,210,212,98,63,135,158,125,43,126,56,7,217,124,130,147,156,222,77,175,124,226,206,20,62,148,98,85,103,157,4,147,44,9,77,248,243,91,22,249,41,54,187,130,69,168,80,50,224,57,78,80,224,229,205,133,62,37,71,140,9,78,18,255,18,39,57,83,161,95,201,116,133,9,74,227,25,10,72,206,148,235,91,242,164,89,56,13,162,43,69,14,87,191,108,119,81,146,68,69,127,105,10,217,140,2,255,119,148,248,97,206,64,45,33,27,61,148,92,152,93,15,79,81,22,16,73,52,187,139,197,35,170,249,43,60,73,35,247,162,171,252,6,51,132,216,37,216,43,91,33,193,191,101,56,37,135,137,143,67,130,40,233,8,39,115,63,77,225,151,101,223,46,30,229,156,41,186,196,239,164,3,64,83,16,185,40,56,33,81,130,206,113,35,197,100,72,240,220,50,113,26,103,62,243,147,212,172,255,120,114,120,208,72,9,204,226,220,159,222,88,185,251,216,118,87,17,156,192,248,81,162,200,246,193,194,204,131,96,68,143,185,155,54,214,121,229,88,133,240,174,63,181,242,174,91,78,152,5,129,125,91,200,98,160,98,148,164,184,224,178,187,92,135,197,144,159,124,239,51,128,228,228,79,159,203,120,81,66,64,5,223,89,94,228,102,115,208,156,221,64,158,103,153,255,50,237,70,52,157,194,162,248,206,50,31,39,209,21,60,207,200,60,176,76,211,238,10,83,52,220,32,130,177,193,169,185,20,85,52,172,186,19,176,66,150,14,192,55,18,24,97,133,249,168,244,156,23,198,72,240,60,186,196,124,49,153,108,149,60,61,79,48,14,77,123,137,21,112,106,124,9,246,42,184,56,104,134,194,104,26,7,145,33,16,80,144,79,30,191,122,249,124,167,91,209,171,152,186,70,13,173,91,55,240,221,139,142,208,92,125,161,77,122,134,66,47,192,63,251,169,63,241,3,159,220,244,129,112,14,10,186,5,59,110,149,21,240,228,201,150,212,121,99,230,123,30,14,237,219,220,32,116,1,20,254,42,140,148,179,195,204,7,151,240,99,228,167,4,135,176,189,152,151,249,152,46,27,211,172,87,99,169,51,173,51,199,186,242,67,47,186,106,80,135,164,163,52,226,40,33,91,142,105,254,241,71,117,203,171,214,170,150,23,47,158,231,246,101,251,233,71,60,57,129,223,152,88,230,85,218,105,54,205,237,114,199,89,148,146,16,205,241,182,217,89,110,164,82,183,205,230,21,168,188,187,192,128,247,222,194,133,140,71,210,97,163,48,138,113,232,72,205,90,248,146,208,173,58,76,163,0,67,255,115,16,201,57,13,202,183,129,207,173,242,77,130,175,1,95,110,235,98,205,20,254,79,146,12,119,23,221,2,26,91,77,155,96,99,140,32,178,188,198,52,105,152,210,214,72,163,132,42,9,60,6,82,223,97,46,118,151,4,202,238,149,54,35,104,104,120,108,47,162,173,216,201,253,118,18,121,55,140,230,194,19,78,192,217,186,49,10,49,236,135,55,1,176,65,151,6,132,223,195,171,240,40,1,253,39,228,198,170,21,237,53,251,181,9,75,129,114,214,204,109,198,92,52,110,155,53,240,36,179,139,3,76,71,90,35,80,229,168,16,169,54,75,161,34,102,179,118,114,19,99,17,181,245,131,70,167,98,159,164,36,130,38,105,136,46,171,200,160,76,88,190,68,109,130,117,201,134,41,167,28,176,237,151,147,144,74,62,240,117,70,167,162,147,40,72,27,211,40,25,32,0,47,230,229,236,177,120,4,209,246,154,155,247,150,178,119,74,225,77,48,219,245,69,87,113,5,43,239,5,126,98,119,39,9,70,23,93,169,137,226,180,212,249,123,0,240,163,93,167,188,23,36,56,136,144,103,149,185,217,33,174,147,59,38,241,137,244,151,0,77,112,192,76,52,71,126,248,30,35,208,175,180,80,193,80,150,199,142,94,29,58,51,88,2,32,49,55,36,127,236,115,109,216,183,252,209,17,30,144,187,177,202,35,182,60,133,147,121,21,88,86,202,100,155,125,128,165,180,6,138,97,179,130,152,189,235,249,151,134,239,57,53,223,51,183,185,31,248,222,246,35,179,102,152,219,234,82,129,13,4,182,48,167,70,174,34,154,187,102,243,48,53,32,135,243,12,194,215,37,176,63,82,114,90,97,79,120,182,169,176,61,104,53,119,103,59,123,114,12,166,16,74,107,2,113,119,150,52,57,71,10,67,50,52,193,18,24,125,145,73,56,76,142,193,254,62,189,130,28,168,150,143,112,137,130,12,179,17,168,80,46,190,9,147,221,99,106,209,45,193,79,203,255,52,83,192,126,253,39,154,98,146,17,18,113,99,76,72,120,151,57,104,151,40,156,195,110,130,97,41,133,208,135,117,103,137,143,165,117,174,27,52,136,217,53,181,75,22,175,237,192,243,143,42,211,242,78,123,185,97,169,186,25,90,209,157,167,95,36,202,220,25,75,136,58,69,100,178,111,113,35,78,48,221,25,246,249,73,130,46,120,5,132,16,81,103,112,187,139,58,147,2,134,186,143,12,145,65,45,120,238,167,59,159,188,86,249,230,126,170,251,241,133,77,225,164,155,238,5,60,228,210,225,173,194,77,28,199,108,155,175,77,176,28,164,127,30,13,205,10,12,58,99,209,217,15,107,123,187,126,24,103,196,160,225,218,169,177,30,147,232,186,198,65,148,48,68,97,159,26,88,14,74,211,105,205,103,217,177,171,182,17,150,166,116,95,166,4,54,111,125,183,202,135,144,222,84,72,92,246,38,122,65,216,145,15,244,247,183,248,162,120,21,36,85,114,32,145,108,136,174,153,208,121,224,239,237,34,67,219,201,98,228,241,197,124,122,84,55,170,183,50,101,27,91,199,45,246,49,166,142,120,170,171,99,239,201,227,31,94,238,180,186,187,77,4,254,0,48,238,132,195,110,212,190,4,81,117,7,13,84,242,80,80,244,206,239,75,48,85,242,107,144,130,135,66,162,119,146,95,2,169,146,95,131,52,217,4,82,147,187,84,113,2,112,28,177,60,95,155,128,181,240,194,169,159,204,107,43,176,243,123,210,250,230,224,69,135,181,240,221,18,252,195,159,40,114,185,29,237,54,97,145,232,27,16,93,239,212,95,239,25,84,213,37,113,223,160,90,37,67,13,170,12,98,240,112,136,204,31,31,12,82,147,178,4,51,121,56,76,190,148,31,140,83,23,179,4,116,242,112,160,108,49,61,24,167,38,101,9,166,251,112,152,98,217,60,24,104,73,206,218,180,143,189,33,251,191,9,207,244,225,41,191,89,248,58,161,90,201,205,18,122,11,41,132,139,254,60,83,171,76,15,121,250,198,250,212,140,185,15,219,105,11,254,163,107,167,214,110,193,47,158,137,213,202,103,137,213,105,165,58,250,217,25,151,171,156,86,43,185,152,212,77,206,162,234,54,203,68,156,48,9,214,214,210,101,206,146,3,241,23,167,223,242,59,213,105,184,91,136,219,57,214,189,51,9,144,123,209,173,48,47,5,29,102,243,74,239,9,217,27,184,53,206,2,7,60,118,55,46,89,249,147,126,8,128,120,219,92,127,239,80,188,205,254,102,198,135,152,145,222,156,151,96,111,96,57,218,235,158,118,235,189,233,44,105,84,191,184,205,21,171,165,166,52,87,3,30,121,203,33,199,164,67,206,18,60,117,106,138,105,41,157,106,76,193,111,22,41,102,213,141,240,146,49,203,194,242,9,209,126,212,63,26,186,0,120,154,96,175,207,159,173,219,32,138,226,14,141,133,11,155,221,205,91,38,138,125,62,50,2,238,169,31,128,197,173,60,54,210,87,81,236,53,226,119,22,153,249,41,224,33,4,206,197,116,98,166,237,192,225,247,49,155,247,83,18,61,229,71,90,179,187,96,17,219,100,116,179,174,70,89,186,30,0,142,19,39,209,60,38,150,57,70,19,131,68,134,56,227,195,47,139,47,60,35,74,96,170,246,107,126,15,190,69,231,211,224,76,208,195,130,71,219,190,69,1,78,168,136,25,34,84,166,225,69,56,53,194,136,24,248,218,79,137,209,249,245,87,102,227,138,192,94,21,183,89,181,199,183,245,170,93,219,194,154,116,191,100,193,242,14,75,119,42,114,101,242,230,251,173,77,94,98,211,89,97,148,194,108,76,221,18,71,149,109,202,26,143,98,246,98,149,194,231,63,55,221,113,36,133,15,134,41,119,133,66,185,204,170,25,125,24,110,58,29,234,12,203,108,84,231,116,67,229,75,68,76,43,245,127,199,150,93,248,21,91,170,144,45,153,250,237,210,18,150,222,47,127,21,22,116,125,7,22,90,217,244,23,129,73,9,142,239,64,195,138,202,190,109,11,234,182,48,245,207,179,4,51,60,172,62,165,116,239,32,121,92,36,92,127,73,154,222,200,9,32,81,223,0,242,210,151,79,66,248,103,103,169,166,70,158,15,187,160,45,72,171,89,195,201,229,185,181,220,183,110,10,168,121,23,205,208,165,202,66,102,111,146,58,31,16,153,53,146,40,3,27,208,114,3,144,8,62,68,75,117,198,254,28,126,53,225,228,209,170,66,218,136,179,116,102,221,94,119,72,90,191,233,20,254,5,113,167,84,112,116,31,228,10,110,165,240,177,83,161,176,79,159,191,242,120,178,204,240,219,130,80,22,196,199,225,104,100,188,25,24,61,131,233,198,88,151,231,178,69,131,178,115,252,119,158,79,88,165,39,221,98,101,129,163,205,219,255,100,163,230,229,148,172,220,229,31,101,98,166,49,163,73,139,198,136,225,207,99,158,250,96,207,152,102,65,112,179,165,222,106,32,58,69,12,233,45,45,185,228,6,103,164,210,36,246,212,62,19,20,148,239,195,185,241,118,33,117,173,20,28,101,132,70,184,114,159,184,188,139,174,175,132,44,121,134,82,58,206,74,88,212,139,215,162,232,65,68,74,105,191,245,69,53,252,252,164,10,146,145,23,154,69,232,85,123,84,67,202,223,165,174,121,103,6,7,145,150,249,186,213,105,127,25,180,244,193,216,248,133,159,184,34,162,21,139,150,150,154,128,92,5,101,221,132,152,97,42,165,119,127,29,80,113,177,68,101,177,251,145,92,24,0,187,183,101,117,73,247,129,165,92,150,176,109,133,157,249,191,10,182,146,168,123,25,151,159,10,151,206,20,15,133,182,36,236,62,224,68,121,139,74,42,222,18,23,223,149,116,150,123,242,24,78,129,136,88,244,85,38,85,150,117,159,57,241,208,196,233,178,18,92,22,26,178,50,70,203,60,13,47,194,232,42,100,33,147,94,19,176,179,189,41,211,148,34,119,160,237,123,142,246,85,207,147,39,121,203,174,94,178,199,143,22,178,48,173,188,128,87,170,65,45,73,228,74,80,187,85,104,160,232,96,151,160,58,142,182,161,216,183,2,140,94,6,205,183,153,167,249,39,1,226,131,132,167,226,19,0,249,88,212,251,75,74,81,220,47,41,121,41,191,36,240,218,125,249,148,151,234,219,178,146,82,169,120,21,60,230,118,117,100,149,73,64,229,20,10,236,18,180,130,86,133,153,227,19,192,214,33,90,137,99,241,136,222,135,85,92,246,155,118,3,211,98,68,229,158,75,92,112,125,106,125,22,33,69,191,241,98,52,118,79,198,169,33,45,236,21,145,177,146,147,95,52,41,133,184,115,156,166,8,178,55,165,144,81,173,25,231,248,68,78,199,19,60,238,151,32,207,145,49,64,208,217,74,45,202,239,83,150,51,165,1,27,185,99,110,195,127,86,79,45,184,213,81,180,204,177,106,20,182,167,175,27,38,220,96,20,229,22,182,106,12,190,55,175,27,132,108,50,136,188,115,173,28,130,38,168,107,71,64,147,13,198,208,46,173,42,141,34,246,242,181,134,217,96,32,181,192,140,55,215,253,148,22,14,176,111,6,196,79,93,236,132,210,20,105,116,209,25,37,150,44,174,30,46,127,185,73,55,159,122,105,64,81,230,172,84,56,243,87,160,157,85,72,98,247,110,40,177,171,97,209,54,255,213,130,167,27,8,158,174,18,76,223,48,175,22,189,129,250,226,201,42,209,180,24,96,181,232,96,3,209,193,42,209,236,253,253,106,217,201,6,178,147,10,217,218,119,36,50,145,22,134,79,225,112,128,153,163,177,95,142,248,192,8,158,153,139,23,222,237,195,14,222,145,165,110,118,254,173,135,244,115,4,226,47,177,50,116,121,219,82,190,154,144,66,244,15,59,164,36,63,188,83,150,254,129,80,33,142,201,51,138,185,180,139,12,122,29,140,50,79,12,97,190,104,151,213,3,37,217,173,101,217,43,96,221,33,94,22,21,240,175,221,148,151,198,197,103,23,126,186,239,167,110,130,137,120,145,194,152,156,149,241,77,249,96,209,157,56,74,156,211,226,140,30,185,32,125,161,19,136,3,228,98,171,249,223,95,247,183,155,231,117,147,133,50,254,34,155,149,98,176,11,142,206,114,228,212,66,34,165,136,52,114,177,16,175,193,87,133,220,85,29,187,204,1,85,128,46,28,149,39,200,189,56,193,144,243,109,57,38,181,138,201,191,170,82,213,35,59,21,104,165,34,22,210,223,84,22,174,11,141,231,209,234,113,235,98,212,238,130,197,247,255,1,115,164,240,143,108,62,0,0 };
+const uint8_t JS_CONTROLS_GZIP[3743] PROGMEM = { 31,139,8,0,160,250,217,97,2,255,197,91,91,119,218,72,18,126,247,175,144,149,57,65,44,132,75,110,147,128,229,28,130,73,194,14,49,94,27,79,230,108,38,235,35,68,99,116,44,36,141,36,124,25,135,255,190,213,213,23,117,11,129,25,156,157,125,137,81,169,186,250,235,170,234,238,186,40,110,24,36,169,113,222,191,232,31,247,71,253,206,224,226,227,121,223,126,222,104,180,93,241,226,180,55,24,118,142,128,214,20,180,147,163,206,168,119,49,252,240,225,172,55,178,155,42,111,239,183,81,239,248,136,201,104,42,244,81,127,212,27,216,10,225,4,36,230,228,33,41,155,164,127,209,165,148,231,58,83,151,113,61,207,184,222,159,143,70,195,99,251,133,206,199,169,205,198,139,140,115,208,121,15,32,94,234,140,140,216,108,188,204,248,206,190,244,71,221,79,189,83,251,149,206,42,233,205,198,43,133,123,208,63,2,218,235,28,47,163,54,27,175,51,206,227,243,207,239,129,246,179,206,201,169,205,198,207,138,186,64,143,96,144,147,243,145,253,70,231,86,222,52,27,111,178,17,31,79,59,39,159,236,183,156,208,57,58,98,148,139,147,97,255,152,178,242,23,221,65,175,115,202,153,155,141,183,202,140,157,247,118,51,103,16,70,83,12,114,214,27,244,186,32,45,103,19,65,110,42,86,25,158,140,250,84,255,57,179,8,114,83,49,203,231,62,16,114,86,65,90,83,177,201,231,206,111,118,51,103,15,164,53,85,83,140,122,39,118,51,111,9,36,54,21,59,124,236,156,127,236,217,205,156,29,56,181,169,152,161,211,237,82,223,200,153,128,83,155,111,84,197,156,116,78,59,163,33,152,241,109,94,55,242,141,242,74,238,132,163,225,151,99,185,15,6,189,15,35,233,239,167,253,143,159,70,210,171,187,189,227,17,56,137,80,72,247,98,116,126,250,175,243,97,255,172,39,69,117,47,122,159,123,167,157,65,182,175,186,23,39,61,24,117,218,255,21,134,62,151,196,47,189,81,231,236,228,83,103,160,136,191,56,59,63,254,48,24,126,209,230,232,118,78,79,135,35,185,11,186,23,157,65,255,223,157,83,48,205,107,73,58,234,156,254,34,61,186,123,113,60,60,238,217,207,95,189,106,95,59,177,113,25,59,209,236,200,73,29,59,32,55,70,39,142,157,59,171,140,111,102,78,210,113,93,226,219,83,199,79,8,146,18,223,155,144,184,27,6,169,23,44,194,69,194,95,77,23,129,155,122,97,96,184,161,31,198,93,223,73,18,11,127,246,39,229,123,254,195,62,94,204,199,36,150,244,118,114,227,165,238,76,225,115,18,162,234,172,21,147,116,17,7,38,252,243,199,34,244,18,98,182,57,11,87,161,96,32,115,18,59,254,68,190,206,244,41,56,34,146,146,56,246,174,73,44,153,50,253,10,166,27,146,58,73,52,115,252,84,50,73,125,11,158,100,17,76,253,240,70,145,195,212,47,222,187,78,28,135,217,120,97,10,241,218,241,189,63,157,216,11,36,3,181,132,120,57,113,226,43,179,61,33,83,103,225,167,130,104,182,151,203,61,170,249,27,50,78,66,247,170,173,252,6,51,4,196,77,201,36,111,133,152,252,177,32,73,58,140,61,18,164,14,37,157,144,120,238,37,9,252,178,202,247,203,61,201,153,56,215,228,163,112,0,120,229,135,174,227,159,165,97,236,92,146,90,66,210,126,74,230,150,73,146,104,225,161,159,36,102,245,159,103,195,227,90,146,194,42,46,189,233,157,37,221,167,92,110,43,130,99,152,63,140,21,217,30,88,24,61,8,102,156,160,187,105,115,93,22,206,149,9,111,123,83,75,14,221,183,131,133,239,151,239,51,89,8,42,114,226,132,100,92,229,54,211,97,54,229,87,111,242,13,64,50,242,215,111,121,188,78,156,130,10,126,178,38,161,187,152,131,230,202,53,103,50,177,204,127,152,229,90,56,157,194,166,248,201,50,159,196,225,13,60,207,210,185,111,153,102,185,205,77,81,115,253,16,230,6,167,102,82,84,209,176,235,206,192,10,139,164,7,190,17,195,12,107,204,71,165,75,94,152,35,38,243,240,154,176,205,100,226,46,121,118,25,19,18,152,229,21,86,192,169,241,197,100,82,192,197,64,35,10,163,110,28,135,6,71,64,65,62,125,242,230,245,139,87,237,130,81,217,210,53,106,96,221,187,190,231,94,181,184,230,170,75,109,209,51,39,152,248,228,87,47,241,198,158,239,165,119,93,32,92,130,130,238,193,142,251,121,5,60,125,186,47,116,94,155,121,147,9,9,202,247,210,32,116,3,100,254,202,141,36,217,97,229,189,107,248,49,240,146,148,4,112,188,152,215,114,78,23,231,52,171,197,88,170,168,117,116,172,27,47,152,132,55,53,234,144,116,150,90,20,198,233,190,109,154,223,191,23,191,121,211,88,247,230,229,203,23,210,190,120,158,126,33,227,51,248,77,82,203,188,73,90,245,186,89,201,15,156,133,73,26,56,115,82,49,91,171,47,169,212,138,89,191,1,149,183,151,4,240,238,44,156,203,216,19,14,27,6,97,68,2,91,104,214,34,215,41,61,170,131,36,244,9,140,191,4,145,140,211,160,124,91,248,220,58,223,76,201,45,224,147,182,206,246,76,230,255,105,188,32,237,101,59,131,134,187,105,27,108,200,8,34,243,123,76,147,70,40,109,131,52,74,40,146,192,238,64,234,59,232,98,15,73,160,236,147,220,97,4,47,106,19,60,139,232,91,98,75,191,29,135,147,59,164,185,240,68,98,112,54,113,31,82,246,90,122,23,17,126,35,234,65,127,171,224,12,162,164,212,25,39,129,115,93,68,6,160,176,53,82,245,21,248,60,78,147,191,206,225,72,205,95,240,133,124,224,71,72,167,162,227,208,79,106,211,48,238,57,0,158,248,132,46,207,62,196,179,30,110,178,91,166,186,123,202,222,202,93,29,156,185,92,93,182,21,53,91,114,20,216,160,220,30,199,196,185,106,11,77,100,153,75,235,255,3,128,165,89,173,252,62,139,137,31,58,19,43,207,141,9,85,75,26,61,245,82,159,48,141,250,206,152,248,104,162,185,227,5,159,136,3,250,21,22,202,24,242,242,48,13,106,137,39,150,147,200,199,44,233,144,36,22,243,203,71,12,158,149,151,60,232,109,9,119,192,163,211,39,101,216,218,163,240,211,232,243,192,98,190,171,131,96,73,219,202,160,251,252,40,186,184,113,26,152,21,100,131,251,31,47,141,52,92,184,51,60,198,91,217,126,42,223,147,90,20,19,170,243,35,22,255,80,85,46,210,148,30,5,112,201,88,92,68,149,158,20,96,149,42,74,33,193,100,23,25,252,220,95,178,27,75,95,155,72,30,31,94,29,219,173,112,225,8,177,140,221,241,17,96,78,44,205,135,165,222,233,239,173,148,23,77,119,214,93,228,76,216,162,207,79,170,187,234,174,72,134,170,59,132,232,63,30,34,77,168,30,15,82,147,178,2,51,126,60,76,76,245,30,143,83,23,179,2,116,252,120,160,52,91,125,60,78,77,202,10,76,247,241,48,89,178,252,120,160,57,57,27,119,55,150,123,30,222,124,49,141,15,207,240,206,179,246,87,238,200,21,177,163,206,251,85,153,250,165,236,68,16,68,65,46,113,224,123,135,7,142,17,6,115,144,68,22,145,93,2,30,182,14,169,209,138,89,46,25,179,152,76,237,18,149,160,208,75,135,252,1,143,153,138,121,80,119,14,15,234,32,178,240,182,151,115,78,188,107,195,155,224,84,154,176,131,58,188,161,99,233,56,27,4,212,116,1,240,52,38,147,46,123,182,32,55,12,163,22,53,211,178,140,49,141,101,58,145,199,102,118,128,123,234,249,16,200,88,210,108,52,132,199,244,235,39,43,157,121,9,224,73,83,8,207,233,194,204,178,109,219,16,37,210,117,63,75,195,103,236,44,133,84,23,157,201,68,186,89,85,29,128,94,230,0,199,142,226,112,30,65,56,57,114,198,70,26,26,108,32,253,101,5,88,93,48,32,181,1,159,124,199,98,156,125,186,158,26,99,130,17,22,60,150,193,218,62,137,169,136,153,147,82,153,198,36,36,137,17,132,169,65,110,33,137,48,90,191,255,142,129,114,129,207,21,184,20,43,149,73,243,67,212,7,35,186,44,42,97,176,25,137,170,247,73,2,1,135,155,114,27,232,172,109,246,152,25,45,140,48,225,161,118,99,63,205,202,158,176,221,158,89,50,208,5,236,146,160,50,143,160,47,4,133,77,70,40,247,161,160,97,80,1,132,131,58,147,121,104,174,174,232,115,127,219,229,120,147,162,165,84,76,195,11,162,69,202,76,192,151,149,120,127,66,242,87,190,23,171,68,87,152,123,129,169,95,155,43,88,58,191,253,93,88,156,219,7,176,208,10,229,223,4,6,82,217,232,1,52,88,28,126,248,36,147,5,148,175,220,119,190,217,43,149,25,113,144,183,1,1,156,116,248,226,236,250,210,90,29,91,53,145,150,157,253,186,243,228,234,217,45,220,180,137,253,217,73,103,181,56,92,128,91,211,164,21,36,194,138,105,193,103,228,205,225,87,189,217,104,52,138,144,214,162,69,50,179,238,111,91,105,82,189,107,101,218,128,93,152,43,91,237,130,92,193,173,148,219,91,5,10,251,250,237,7,207,39,106,214,212,124,162,198,90,102,239,101,201,21,83,226,135,47,170,141,133,190,220,214,86,58,41,152,69,170,161,91,150,119,112,135,19,83,3,160,225,77,112,18,135,17,28,154,119,86,137,167,76,103,233,157,79,74,101,118,205,169,130,132,3,195,107,238,193,234,136,98,72,50,232,222,16,83,195,125,209,48,223,53,90,205,191,6,45,121,52,54,22,50,176,32,224,130,22,228,44,109,135,131,92,5,101,213,4,103,54,149,202,210,223,7,148,39,131,84,22,92,133,138,48,0,182,179,101,117,73,187,192,82,146,82,140,80,200,109,250,131,176,229,68,237,100,92,150,30,175,92,205,143,133,182,34,108,23,112,60,205,86,73,89,22,153,181,89,91,171,35,89,154,79,129,92,58,139,75,242,131,22,149,151,181,203,154,216,177,199,232,162,209,33,234,104,88,165,179,204,243,224,42,8,111,2,131,86,192,104,52,135,33,152,41,206,207,229,158,128,76,223,31,218,90,147,251,233,83,249,230,64,175,154,177,27,90,212,134,242,27,120,173,26,34,39,32,190,166,4,117,88,129,6,178,1,229,28,84,219,214,14,20,72,105,24,24,189,202,207,142,153,103,178,227,197,251,109,207,120,135,75,60,102,237,44,65,201,122,87,130,34,59,85,130,192,90,83,226,73,118,162,202,109,129,36,43,232,114,30,179,162,180,243,120,185,13,158,203,162,20,93,184,132,12,187,0,173,160,85,97,74,124,28,216,38,68,107,113,44,247,104,218,130,249,218,51,126,70,95,224,19,36,36,132,214,3,149,116,132,231,33,95,27,223,248,149,162,39,38,72,195,116,134,81,3,90,183,230,55,99,33,39,203,7,148,58,243,156,36,137,115,73,108,165,150,168,182,68,24,62,214,148,224,233,10,243,75,144,103,139,59,128,211,113,167,102,221,165,4,115,130,196,199,153,91,102,5,254,98,187,128,115,171,179,48,210,134,89,240,76,223,52,77,176,197,44,244,240,221,48,7,59,155,55,77,146,110,51,137,72,141,11,167,160,201,236,198,25,156,241,22,115,176,163,122,147,81,248,89,190,209,48,91,76,164,86,34,217,235,170,151,76,224,164,195,150,24,255,169,139,29,83,154,34,141,110,58,35,199,178,136,138,167,147,229,17,122,248,84,115,19,242,78,131,210,100,96,69,148,214,58,36,145,251,48,148,200,213,176,104,135,255,122,193,211,45,4,79,215,9,166,53,170,245,162,183,80,95,52,94,39,154,150,19,215,139,246,183,16,237,175,19,141,21,192,245,178,227,45,100,199,5,178,181,54,169,8,164,185,225,19,72,14,8,58,26,254,178,121,255,28,158,209,197,51,239,246,224,4,111,193,72,247,138,118,234,100,43,83,248,185,3,226,175,137,50,117,254,216,82,154,130,66,136,222,183,20,146,188,224,65,89,122,255,59,19,135,242,140,108,45,205,44,130,222,4,35,207,19,193,53,159,189,23,245,199,156,236,198,170,236,53,176,30,16,47,202,146,236,99,14,165,192,152,117,21,189,228,200,75,220,152,164,188,222,133,76,246,218,251,77,249,30,199,29,219,202,61,167,221,51,250,205,5,225,11,93,64,228,59,46,177,234,255,249,253,168,82,191,172,154,120,149,177,162,39,22,115,177,74,209,90,189,57,181,43,145,82,120,24,185,92,242,146,233,186,43,119,221,192,54,58,160,10,208,117,124,127,236,184,87,103,4,98,190,125,219,164,86,49,217,71,3,170,122,196,160,12,173,80,196,82,248,155,202,194,116,161,241,236,173,159,183,202,103,109,47,151,162,11,44,243,238,76,207,152,128,223,103,1,159,253,96,4,249,206,52,48,86,164,69,187,92,180,88,161,117,187,150,105,182,213,16,218,222,34,52,95,145,169,190,150,82,169,250,214,192,83,234,83,165,242,247,239,242,102,45,168,114,213,124,18,92,166,179,195,134,86,239,218,70,238,187,77,98,179,142,54,107,184,131,143,108,238,134,235,77,80,45,77,82,26,120,107,91,111,185,102,192,238,205,84,172,23,21,183,86,89,158,195,150,34,203,239,74,238,128,150,169,168,246,55,92,122,160,216,165,244,38,164,31,209,45,230,65,66,3,227,137,145,178,15,4,104,89,183,56,10,198,74,254,236,149,104,13,176,18,175,121,80,7,210,193,44,174,211,218,47,119,10,89,56,66,133,86,87,139,44,85,45,131,195,58,49,118,8,114,197,171,172,113,188,203,10,19,246,197,17,138,20,75,165,141,13,152,109,195,42,116,36,203,61,189,92,78,113,136,141,191,85,45,54,95,111,223,77,67,242,60,87,134,103,39,4,138,128,209,5,3,11,34,48,233,216,252,195,191,131,4,148,135,90,133,75,69,232,83,219,221,123,82,165,168,45,3,255,125,118,19,59,17,85,167,108,17,81,57,135,102,190,123,47,102,97,97,41,206,131,189,250,117,51,241,142,21,141,77,128,83,137,101,217,144,170,129,247,39,109,71,152,106,119,171,136,147,93,133,104,114,9,146,241,41,48,229,62,22,64,217,26,41,206,228,97,133,240,190,144,89,177,68,241,176,105,190,147,151,49,28,137,101,214,76,219,99,190,203,71,121,1,167,225,149,130,21,8,187,132,131,198,225,109,137,205,45,166,14,131,46,93,148,152,138,126,120,198,150,135,145,21,118,97,54,204,45,252,249,160,142,203,82,214,189,114,92,137,245,7,142,196,201,63,122,129,109,191,240,25,96,173,171,200,108,164,118,239,13,221,72,20,156,169,24,169,144,149,91,9,87,77,63,68,96,45,195,167,79,222,190,126,213,104,103,141,199,135,102,103,237,238,109,1,228,184,53,12,241,206,24,240,211,128,109,33,232,204,26,2,127,103,4,216,76,223,22,129,206,172,33,24,111,68,80,103,238,96,241,122,19,115,166,119,38,160,202,28,103,234,197,243,210,26,148,188,147,190,37,76,206,93,12,212,21,64,135,191,80,140,204,237,41,68,112,99,117,151,179,59,88,248,184,178,23,213,144,87,219,149,250,9,192,246,40,50,151,140,185,7,171,105,192,95,231,214,46,53,27,13,165,73,202,15,26,92,141,30,34,21,77,200,99,108,216,96,120,8,23,114,160,68,253,16,195,147,86,92,84,185,184,66,44,145,45,130,199,108,120,129,183,198,16,141,95,181,87,78,51,19,151,138,213,26,222,242,101,139,101,9,70,209,218,224,160,197,64,87,240,240,20,128,233,10,44,83,87,96,41,241,205,174,208,88,145,39,223,142,46,64,163,20,139,10,177,240,192,74,94,124,88,113,249,11,64,68,137,134,67,201,38,214,138,59,133,83,179,32,78,204,60,245,46,23,49,65,153,188,125,199,63,148,128,23,174,195,59,230,21,25,155,40,84,124,128,177,170,104,140,8,185,232,47,253,193,192,120,223,51,58,6,146,141,77,202,198,233,89,177,253,127,96,120,22,154,114,88,248,96,212,233,199,224,176,179,230,17,211,45,153,24,83,184,197,238,246,213,13,233,208,182,36,137,195,57,173,230,50,144,72,146,32,15,85,238,49,228,83,82,123,236,170,139,64,179,69,178,194,69,74,155,226,146,57,66,45,22,252,55,136,255,2,191,111,104,3,4,55,0,0 };
diff --git a/src/dataStyleCSS.h b/src/dataStyleCSS.h
index 2ad2f97..4615248 100644
--- a/src/dataStyleCSS.h
+++ b/src/dataStyleCSS.h
@@ -1,5 +1,5 @@
 const char CSS_STYLE[] PROGMEM = R"=====(
-.container{position:relative;width:79%;margin:20px;box-sizing:border-box}.column,.columns{width:100%;float:left}.card{min-height:100px;margin-top:2%;border-radius:6px;box-shadow:0 4px 4px rgba(204,197,185,0.5);padding-left:20px;padding-right:20px;margin-bottom:10px;min-width:500px;color:#fff}@media(max-width:630px){.card{min-width:98%}}.turquoise{background:#1abc9c;border-bottom:#16a085 3px solid}.emerald{background:#2ecc71;border-bottom:#27ae60 3px solid}.peterriver{background:#3498db;border-bottom:#2980b9 3px solid}.wetasphalt{background:#34495e;border-bottom:#2c3e50 3px solid}.sunflower{background:#f1c40f;border-bottom:#e6bb0f 3px solid}.carrot{background:#e67e22;border-bottom:#d35400 3px solid}.alizarin{background:#e74c3c;border-bottom:#c0392b 3px solid}.dark{background:#444857;border-bottom:#444857 3px solid}.label{box-sizing:border-box;white-space:nowrap;border-radius:.2em;padding:.12em .4em .14em;text-align:center;color:#fff;font-weight:700;line-height:1.3;margin-bottom:5px;display:inline-block;white-space:nowrap;vertical-align:baseline;position:relative;top:-.15em;background-color:#999;margin-bottom:10px}.label-wrap{width:90%;white-space:pre-wrap;word-wrap:break-word}.label.color-blue{background-color:#6f9ad1}.label.color-red{background-color:#d37c7c}.label.color-green{background-color:#9bc268}.label.color-orange{background-color:#dea154}.label.color-yellow{background-color:#e9d641}.label.color-purple{background-color:#9f83d1}@media(min-width:400px){.container{width:84%}}@media(min-width:630px){.container{width:98%}.column,.columns{margin-right:2%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}}html{font-size:62.5%}body{margin:0;font-size:1.5em;line-height:1;font-weight:400;font-family:"Open Sans",sans-serif;color:#222;background-color:#ecf0f1}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:300}h1{font-size:4rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media(min-width:630px){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2rem}h6{font-size:1.5rem}}p{margin-top:0}a{color:#1eaedb}a:hover{color:#0fa0ce}button{display:inline-block;padding:10px;border-radius:3px;color:#fff;background-color:#999}button:active{background-color:#666;transform:translateX(4px) translateY(4px)}#mainHeader{display:inline-block}#conStatus{position:inherit;font-size:.75em}button,.button{margin-bottom:1rem}.u-full-width{width:100%;box-sizing:border-box}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right}.u-pull-left{float:left}.tcenter{text-align:center}hr{margin-top:.5rem;margin-bottom:1.2rem;border-width:0;border-top:1px solid #e1e1e1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}.control{background-color:#ddd;background-image:linear-gradient(hsla(0,0%,0%,0.1),hsla(0,0%,100%,0.1));border-radius:50%;box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,0.5),0 0 1px 1px hsla(0,0%,100%,0.75),0 0 1px 2px hsla(0,0%,100%,0.25),0 0 1px 3px hsla(0,0%,100%,0.25),0 0 1px 4px hsla(0,0%,100%,0.25),0 0 1px 6px hsla(0,0%,0%,0.75);height:9em;margin:3em auto;position:relative;width:9em}.control ul{height:100%;padding:0;transform:rotate(45deg)}.control li{border-radius:100% 0 0 0;box-shadow:inset -1px -1px 1px hsla(0,0%,100%,0.5),0 0 1px hsla(0,0%,0%,0.75);display:inline-block;height:50%;overflow:hidden;width:50%}.control ul li:nth-child(2){transform:rotate(90deg)}.control ul li:nth-child(3){transform:rotate(-90deg)}.control ul li:nth-child(4){transform:rotate(180deg)}.control ul a{height:200%;position:relative;transform:rotate(-45deg);width:200%}.control a:hover,.control a:focus{background-color:hsla(0,0%,100%,0.25)}.control a{border-radius:50%;color:#333;display:block;font:bold 1em/3 sans-serif;text-align:center;text-decoration:none;text-shadow:0 1px 1px hsla(0,0%,100%,0.4);transition:.15s}.control .confirm{background-color:#ddd;background-image:linear-gradient(hsla(0,0%,0%,0.15),hsla(0,0%,100%,0.25));box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,0.5),0 0 1px 1px hsla(0,0%,100%,0.25),0 0 1px 2px hsla(0,0%,100%,0.25),0 0 1px 3px hsla(0,0%,100%,0.25),0 0 1px 4px hsla(0,0%,100%,0.25),0 0 1px 6px hsla(0,0%,0%,0.85);left:50%;line-height:3;margin:-1.5em;position:absolute;top:50%;width:3em}.control .confirm:hover,.control .confirm:focus{background-color:#eee}.switch{display:inline-block !important;background-color:#bebebe;border-radius:4px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);color:#fff;cursor:pointer;display:block;font-size:14px;height:26px;margin-bottom:12px;position:relative;width:60px;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}.switch.checked{background-color:#76d21d}.switch input[type="checkbox"]{display:none;cursor:pointer;height:10px;left:12px;position:absolute;top:8px;width:10px}.in{position:absolute;top:8px;left:12px;-webkit-transition:left .08s ease-in-out;-moz-transition:left .08s ease-in-out;-o-transition:left .08s ease-in-out;-ms-transition:left .08s ease-in-out;transition:left .08s ease-in-out}.switch.checked div{left:38px}.switch .in:before{background:#fff;background:-moz-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#f0f0f0));background:-webkit-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-o-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-ms-linear-gradient(top,#fff 0,#f0f0f0 100%);background:linear-gradient(to bottom,#fff 0,#f0f0f0 100%);border:1px solid #fff;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,0.3);content:"";height:18px;position:absolute;top:-5px;left:-9px;width:26px}.switch .in:after{background:#f0f0f0;background:-moz-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f0f0f0),color-stop(100%,#fff));background:-webkit-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-o-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-ms-linear-gradient(top,#f0f0f0 0,#fff 100%);background:linear-gradient(to bottom,#f0f0f0 0,#fff 100%);border-radius:10px;content:"";height:12px;margin:-1px 0 0 -1px;position:absolute;width:12px}.rkmd-slider{display:block;position:relative;font-size:16px;font-family:"Roboto",sans-serif}.rkmd-slider input[type="range"]{overflow:hidden;position:absolute;width:1px;height:1px;opacity:0}.rkmd-slider input[type="range"]+.slider{display:block;position:relative;width:100%;height:27px;border-radius:13px;background-color:#bebebe}@media(pointer:fine){.rkmd-slider input[type="range"]+.slider{height:4px;border-radius:0}}.rkmd-slider input[type="range"]+.slider .slider-fill{display:block;position:absolute;width:0;height:100%;user-select:none;z-index:1}.rkmd-slider input[type="range"]+.slider .slider-handle{cursor:pointer;position:absolute;top:12px;left:0;width:15px;height:15px;margin-left:-8px;border-radius:50%;transition:all .2s ease;user-select:none;z-index:2}@media(pointer:fine){.rkmd-slider input[type="range"]+.slider .slider-handle{top:-5.5px}}.rkmd-slider input[type="range"]:disabled+.slider{background-color:#b0b0b0 !important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle{cursor:default !important;background-color:#b0b0b0 !important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill .slider-label,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle .slider-label{display:none;background-color:#b0b0b0 !important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active{top:-5.5px;width:15px;height:15px;margin-left:-8px}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active .slider-label,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active .slider-label{display:none;border-radius:50%;transform:none}.rkmd-slider input[type="range"]:disabled+.slider .slider-handle:active{box-shadow:none !important;transform:scale(1) !important}.rkmd-slider.slider-discrete .slider .slider-handle{position:relative;z-index:1}.rkmd-slider.slider-discrete .slider .slider-handle .slider-label{position:absolute;top:-17.5px;left:4px;width:30px;height:30px;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;border-radius:50%;-webkit-transform:scale(1) rotate(-45deg);transform:scale(1) rotate(-45deg);-webkit-transition:all .2s ease;transition:all .2s ease}@media(pointer:fine){.rkmd-slider.slider-discrete .slider .slider-handle .slider-label{left:-2px;-webkit-transform:scale(0.5) rotate(-45deg);transform:scale(0.5) rotate(-45deg)}}.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span{position:absolute;top:7px;left:0;width:100%;color:#fff;font-size:16px;text-align:center;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media(pointer:fine){.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span{font-size:12px}}.rkmd-slider.slider-discrete .slider .slider-handle.is-active{top:0;margin-left:-2px;width:4px;height:4px}.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label{top:-15px;left:-2px;border-radius:15px 15px 15px 0;-webkit-transform:rotate(-45deg) translate(23px,-25px);transform:rotate(-45deg) translate(23px,-25px)}.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label span{opacity:1}.rkmd-slider.slider-discrete.slider-turquoise .slider-label{background-color:#16a085}.rkmd-slider.slider-discrete.slider-emerald .slider-label{background-color:#27ae60}.peterriver{background:#3498db;border-bottom:#2980b9 3px solid}.rkmd-slider.slider-discrete.slider-peterriver .slider-label{background-color:#2980b9}.wetasphalt{background:#34495e;border-bottom:#2c3e50 3px solid}.rkmd-slider.slider-discrete.slider-wetasphalt .slider-label{background-color:#2c3e50}.sunflower{background:#f1c40f;border-bottom:#e6bb0f 3px solid}.rkmd-slider.slider-discrete.slider-sunflower .slider-label{background-color:#e6bb0f}.carrot{background:#e67e22;border-bottom:#d35400 3px solid}.rkmd-slider.slider-discrete.slider-carrot .slider-label{background-color:#d35400}.alizarin{background:#e74c3c;border-bottom:#c0392b 3px solid}.rkmd-slider.slider-discrete.slider-alizarin .slider-label{background-color:#c0392b}input{margin:0 auto 1.2rem auto;padding:2px 5px;width:100%;box-sizing:border-box;border:0;border-radius:4px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background:rgba(255,255,255,0.8)}select{margin:0 auto 1.2rem auto;padding:2px 5px;width:100%;box-sizing:border-box;border:0;border-radius:4px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background:rgba(255,255,255,0.8)}input[id^="num"]{max-width:6em;width:auto;text-align:right;font-weight:bold;font-size:115%}body div>ul.navigation{margin:0;padding:0;border-bottom:3px solid #666;overflow:hidden}ul.navigation li{list-style:none;float:left;margin-right:4px}ul.navigation li.controls{float:right}ul.navigation li a{font-weight:bold;display:inline-block;padding:6px 12px;color:#888;outline:0;text-decoration:none;background:#f3f3f3;background:-webkit-gradient(linear,0 0,0 bottom,from(#eee),to(#e4e4e4));background:-moz-linear-gradient(#eee,#e4e4e4);background:linear-gradient(#eee,#e4e4e4);-pie-background:linear-gradient(#eee,#e4e4e4)}ul.navigation li.active a{pointer-events:none;color:white;background:#666;background:-webkit-gradient(linear,0 0,0 bottom,from(#888),to(#666));background:-moz-linear-gradient(#888,#666);background:linear-gradient(#888,#666);-pie-background:linear-gradient(#888,#666)}div.tabscontent>div{padding:0 15px}#tabsnav:empty{display:none}.range-slider{margin:0}.range-slider{width:100%}.range-slider__range{-webkit-appearance:none;width:calc(100% - (45px));height:10px;border-radius:5px;outline:0;padding:0;margin:0}.range-slider__value{display:inline-block;position:relative;width:30px;color:#fff;line-height:20px;text-align:center;border-radius:3px;padding:5px 5px;margin-left:2px}.range-slider__value:after{position:absolute;top:8px;left:-7px;width:0;height:0;content:""}::-moz-range-track{border:0}input::-moz-focus-inner,input::-moz-focus-outer{border:0}svg{display:block;width:100%;height:100%}.y-axis path,.x-axis path{stroke:gray;stroke-width:1;fill:none}.series{stroke:steelblue;stroke-width:3;fill:none}.data-points circle{stroke:steelblue;stroke-width:2;fill:white}.data-points text{display:none}.data-points circle:hover{fill:steelblue;stroke-width:6}.data-points circle:hover+text{display:inline-block}text{text-anchor:end}
+.container{position:relative;width:79%;margin:20px;box-sizing:border-box}.column,.columns{width:100%;float:left}.card{min-height:100px;border-radius:6px;box-shadow:0 4px 4px rgba(204,197,185,0.5);padding-left:20px;padding-right:20px;margin-bottom:40px;min-width:500px;color:#fff}@media(min-width:1205px){.wide.card{min-width:1075px}}@media(min-width:1790px){.wide.card{min-width:1650px}}@media(max-width:630px){.card{min-width:98%}}.sectionbreak.columns{color:black}.sectionbreak.columns hr{border:0;height:2px;background-color:#666}.turquoise{background:#1abc9c;border-bottom:#16a085 3px solid}.emerald{background:#2ecc71;border-bottom:#27ae60 3px solid}.peterriver{background:#3498db;border-bottom:#2980b9 3px solid}.wetasphalt{background:#34495e;border-bottom:#2c3e50 3px solid}.sunflower{background:#f1c40f;border-bottom:#e6bb0f 3px solid}.carrot{background:#e67e22;border-bottom:#d35400 3px solid}.alizarin{background:#e74c3c;border-bottom:#c0392b 3px solid}.dark{background:#444857;border-bottom:#444857 3px solid}.label{box-sizing:border-box;white-space:nowrap;border-radius:.2em;padding:.12em .4em .14em;text-align:center;color:#fff;font-weight:700;line-height:1.3;margin-bottom:5px;display:inline-block;white-space:nowrap;vertical-align:baseline;position:relative;top:-.15em;background-color:#999;margin-bottom:10px}.label-wrap{width:90%;white-space:pre-wrap;word-wrap:break-word}.label.color-blue{background-color:#6f9ad1}.label.color-red{background-color:#d37c7c}.label.color-green{background-color:#9bc268}.label.color-orange{background-color:#dea154}.label.color-yellow{background-color:#e9d641}.label.color-purple{background-color:#9f83d1}@media(min-width:400px){.container{width:84%}}@media(min-width:630px){.container{width:98%}.column,.columns{margin-right:35px}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}}html{font-size:62.5%}body{margin:0;font-size:1.5em;line-height:1;font-weight:400;font-family:"Open Sans",sans-serif;color:#222;background-color:#ecf0f1}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:300}h1{font-size:4rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media(min-width:630px){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2rem}h6{font-size:1.5rem}}p{margin-top:0}a{color:#1eaedb}a:hover{color:#0fa0ce}button{display:inline-block;padding:10px;border-radius:3px;color:#fff;background-color:#999}button:active{background-color:#666;transform:translateX(4px) translateY(4px)}#mainHeader{display:inline-block}#conStatus{position:inherit;font-size:.75em}button,.button{margin-bottom:1rem;margin-left:.3rem;margin-right:.3rem}.u-full-width{width:100%;box-sizing:border-box}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right}.u-pull-left{float:left}.tcenter{text-align:center}hr{margin-top:.5rem;margin-bottom:1.2rem;border-width:0;border-top:1px solid #e1e1e1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}.control{background-color:#ddd;background-image:linear-gradient(hsla(0,0%,0%,0.1),hsla(0,0%,100%,0.1));border-radius:50%;box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,0.5),0 0 1px 1px hsla(0,0%,100%,0.75),0 0 1px 2px hsla(0,0%,100%,0.25),0 0 1px 3px hsla(0,0%,100%,0.25),0 0 1px 4px hsla(0,0%,100%,0.25),0 0 1px 6px hsla(0,0%,0%,0.75);height:9em;margin:3em auto;position:relative;width:9em}.control ul{height:100%;padding:0;transform:rotate(45deg)}.control li{border-radius:100% 0 0 0;box-shadow:inset -1px -1px 1px hsla(0,0%,100%,0.5),0 0 1px hsla(0,0%,0%,0.75);display:inline-block;height:50%;overflow:hidden;width:50%}.control ul li:nth-child(2){transform:rotate(90deg)}.control ul li:nth-child(3){transform:rotate(-90deg)}.control ul li:nth-child(4){transform:rotate(180deg)}.control ul a{height:200%;position:relative;transform:rotate(-45deg);width:200%}.control a:hover,.control a:focus{background-color:hsla(0,0%,100%,0.25)}.control a{border-radius:50%;color:#333;display:block;font:bold 1em/3 sans-serif;text-align:center;text-decoration:none;text-shadow:0 1px 1px hsla(0,0%,100%,0.4);transition:.15s}.control .confirm{background-color:#ddd;background-image:linear-gradient(hsla(0,0%,0%,0.15),hsla(0,0%,100%,0.25));box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,0.5),0 0 1px 1px hsla(0,0%,100%,0.25),0 0 1px 2px hsla(0,0%,100%,0.25),0 0 1px 3px hsla(0,0%,100%,0.25),0 0 1px 4px hsla(0,0%,100%,0.25),0 0 1px 6px hsla(0,0%,0%,0.85);left:50%;line-height:3;margin:-1.5em;position:absolute;top:50%;width:3em}.control .confirm:hover,.control .confirm:focus{background-color:#eee}.switch{display:inline-block !important;background-color:#bebebe;border-radius:4px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);color:#fff;cursor:pointer;display:block;font-size:14px;height:26px;margin-left:.3rem;margin-right:.3rem;position:relative;width:60px;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}.switch.checked{background-color:#76d21d}.switch input[type="checkbox"]{display:none;cursor:pointer;height:10px;left:12px;position:absolute;top:8px;width:10px}.in{position:absolute;top:8px;left:12px;-webkit-transition:left .08s ease-in-out;-moz-transition:left .08s ease-in-out;-o-transition:left .08s ease-in-out;-ms-transition:left .08s ease-in-out;transition:left .08s ease-in-out}.switch.checked div{left:38px}.switch .in:before{background:#fff;background:-moz-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#f0f0f0));background:-webkit-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-o-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-ms-linear-gradient(top,#fff 0,#f0f0f0 100%);background:linear-gradient(to bottom,#fff 0,#f0f0f0 100%);border:1px solid #fff;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,0.3);content:"";height:18px;position:absolute;top:-5px;left:-9px;width:26px}.switch .in:after{background:#f0f0f0;background:-moz-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f0f0f0),color-stop(100%,#fff));background:-webkit-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-o-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-ms-linear-gradient(top,#f0f0f0 0,#fff 100%);background:linear-gradient(to bottom,#f0f0f0 0,#fff 100%);border-radius:10px;content:"";height:12px;margin:-1px 0 0 -1px;position:absolute;width:12px}.rkmd-slider{display:block;position:relative;font-size:16px;font-family:"Roboto",sans-serif}.rkmd-slider input[type="range"]{overflow:hidden;position:absolute;width:1px;height:1px;opacity:0}.rkmd-slider input[type="range"]+.slider{display:block;position:relative;width:100%;height:27px;border-radius:13px;background-color:#bebebe}@media(pointer:fine){.rkmd-slider input[type="range"]+.slider{height:4px;border-radius:0}}.rkmd-slider input[type="range"]+.slider .slider-fill{display:block;position:absolute;width:0;height:100%;user-select:none;z-index:1}.rkmd-slider input[type="range"]+.slider .slider-handle{cursor:pointer;position:absolute;top:12px;left:0;width:15px;height:15px;margin-left:-8px;border-radius:50%;transition:all .2s ease;user-select:none;z-index:2}@media(pointer:fine){.rkmd-slider input[type="range"]+.slider .slider-handle{top:-5.5px}}.rkmd-slider input[type="range"]:disabled+.slider{background-color:#b0b0b0 !important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle{cursor:default !important;background-color:#b0b0b0 !important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill .slider-label,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle .slider-label{display:none;background-color:#b0b0b0 !important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active{top:-5.5px;width:15px;height:15px;margin-left:-8px}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active .slider-label,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active .slider-label{display:none;border-radius:50%;transform:none}.rkmd-slider input[type="range"]:disabled+.slider .slider-handle:active{box-shadow:none !important;transform:scale(1) !important}.rkmd-slider.slider-discrete .slider .slider-handle{position:relative;z-index:1}.rkmd-slider.slider-discrete .slider .slider-handle .slider-label{position:absolute;top:-17.5px;left:4px;width:30px;height:30px;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;border-radius:50%;-webkit-transform:scale(1) rotate(-45deg);transform:scale(1) rotate(-45deg);-webkit-transition:all .2s ease;transition:all .2s ease}@media(pointer:fine){.rkmd-slider.slider-discrete .slider .slider-handle .slider-label{left:-2px;-webkit-transform:scale(0.5) rotate(-45deg);transform:scale(0.5) rotate(-45deg)}}.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span{position:absolute;top:7px;left:0;width:100%;color:#fff;font-size:16px;text-align:center;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media(pointer:fine){.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span{font-size:12px}}.rkmd-slider.slider-discrete .slider .slider-handle.is-active{top:0;margin-left:-2px;width:4px;height:4px}.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label{top:-15px;left:-2px;border-radius:15px 15px 15px 0;-webkit-transform:rotate(-45deg) translate(23px,-25px);transform:rotate(-45deg) translate(23px,-25px)}.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label span{opacity:1}.rkmd-slider.slider-discrete.slider-turquoise .slider-label{background-color:#16a085}.rkmd-slider.slider-discrete.slider-emerald .slider-label{background-color:#27ae60}.peterriver{background:#3498db;border-bottom:#2980b9 3px solid}.rkmd-slider.slider-discrete.slider-peterriver .slider-label{background-color:#2980b9}.wetasphalt{background:#34495e;border-bottom:#2c3e50 3px solid}.rkmd-slider.slider-discrete.slider-wetasphalt .slider-label{background-color:#2c3e50}.sunflower{background:#f1c40f;border-bottom:#e6bb0f 3px solid}.rkmd-slider.slider-discrete.slider-sunflower .slider-label{background-color:#e6bb0f}.carrot{background:#e67e22;border-bottom:#d35400 3px solid}.rkmd-slider.slider-discrete.slider-carrot .slider-label{background-color:#d35400}.alizarin{background:#e74c3c;border-bottom:#c0392b 3px solid}.rkmd-slider.slider-discrete.slider-alizarin .slider-label{background-color:#c0392b}input{margin:0 auto 1.2rem auto;padding:2px 5px;width:100%;box-sizing:border-box;border:0;border-radius:4px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background:rgba(255,255,255,0.8)}select{margin:0 auto 1.2rem auto;padding:2px 5px;width:100%;box-sizing:border-box;border:0;border-radius:4px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background:rgba(255,255,255,0.8)}input[id^="num"]{max-width:6em;width:auto;text-align:right;font-weight:bold;font-size:115%}body div>ul.navigation{margin:0;margin-bottom:30px;padding:0;border-bottom:3px solid #666;overflow:hidden}ul.navigation li{list-style:none;float:left;margin-right:4px}ul.navigation li.controls{float:right}ul.navigation li a{font-weight:bold;display:inline-block;padding:6px 12px;color:#888;outline:0;text-decoration:none;background:#f3f3f3;background:-webkit-gradient(linear,0 0,0 bottom,from(#eee),to(#e4e4e4));background:-moz-linear-gradient(#eee,#e4e4e4);background:linear-gradient(#eee,#e4e4e4);-pie-background:linear-gradient(#eee,#e4e4e4)}ul.navigation li.active a{pointer-events:none;color:white;background:#666;background:-webkit-gradient(linear,0 0,0 bottom,from(#888),to(#666));background:-moz-linear-gradient(#888,#666);background:linear-gradient(#888,#666);-pie-background:linear-gradient(#888,#666)}div.tabscontent>div{padding:0 15px}#tabsnav:empty{display:none}.range-slider{margin:0}.range-slider{width:100%}.range-slider__range{-webkit-appearance:none;width:calc(100% - (45px));height:10px;border-radius:5px;outline:0;padding:0;margin:0}.range-slider__value{display:inline-block;position:relative;width:30px;color:#fff;line-height:20px;text-align:center;border-radius:3px;padding:5px 5px;margin-left:2px}.range-slider__value:after{position:absolute;top:8px;left:-7px;width:0;height:0;content:""}::-moz-range-track{border:0}input::-moz-focus-inner,input::-moz-focus-outer{border:0}svg{display:block;width:100%;height:100%}.y-axis path,.x-axis path{stroke:gray;stroke-width:1;fill:none}.series{stroke:steelblue;stroke-width:3;fill:none}.data-points circle{stroke:steelblue;stroke-width:2;fill:white}.data-points text{display:none}.data-points circle:hover{fill:steelblue;stroke-width:6}.data-points circle:hover+text{display:inline-block}text{text-anchor:end}
 )=====";
 
-const uint8_t CSS_STYLE_GZIP[3356] PROGMEM = { 31,139,8,0,190,230,204,97,2,255,213,27,219,110,235,184,241,87,212,4,1,98,172,164,234,110,91,194,46,250,216,183,2,221,151,22,197,246,128,150,168,72,136,44,185,18,125,146,172,161,127,239,144,212,133,23,41,118,146,179,40,122,124,146,216,212,204,112,238,28,14,105,59,109,106,130,202,26,183,151,83,211,149,164,108,234,184,197,21,34,229,119,156,188,148,25,41,226,237,254,33,57,162,246,169,172,99,207,57,189,38,135,230,213,234,202,223,203,250,41,62,52,109,134,91,11,70,122,59,109,170,243,177,54,135,191,221,133,35,187,142,243,144,228,85,131,72,92,225,156,0,24,106,179,203,177,172,173,2,151,79,5,161,0,64,147,211,183,72,115,138,189,135,100,32,219,162,172,60,119,113,52,206,89,160,172,121,137,29,35,56,189,178,159,246,233,128,30,61,39,48,221,253,214,116,119,161,233,216,225,38,57,161,44,3,222,44,58,29,103,120,28,105,217,132,158,48,223,161,33,164,57,2,15,116,8,62,115,158,67,198,18,200,209,180,241,125,158,231,253,95,142,56,43,209,227,17,189,14,16,145,15,16,155,203,44,12,31,222,239,30,250,222,38,231,246,63,231,166,236,240,229,128,210,231,167,182,57,215,89,124,239,162,67,186,79,147,73,99,108,226,123,55,66,206,46,52,124,144,166,107,170,50,235,109,124,196,45,170,50,9,215,195,105,186,117,85,92,111,139,112,228,136,184,39,76,112,219,130,229,90,9,221,15,246,187,236,160,161,239,119,206,97,47,162,191,96,130,186,83,129,42,162,160,7,251,16,107,232,169,143,67,105,246,238,92,131,161,95,148,201,115,55,13,156,92,197,198,209,225,224,228,34,54,168,178,109,228,137,113,180,197,158,167,162,102,126,24,56,210,196,168,42,127,71,109,89,203,200,219,32,245,53,125,167,142,191,247,14,34,114,134,218,103,9,49,8,130,93,184,85,17,249,168,136,88,161,3,174,46,139,193,144,188,20,37,193,86,119,66,41,142,235,230,165,69,39,197,167,109,15,31,71,191,140,109,23,62,25,118,64,127,185,240,59,33,248,149,88,32,213,83,29,167,184,6,155,10,206,152,228,16,176,214,11,15,158,173,227,36,21,4,239,20,76,182,175,184,118,8,158,156,149,221,169,66,111,113,89,51,216,67,213,164,207,75,44,130,223,144,50,69,213,48,245,1,117,152,34,36,122,98,160,113,106,217,110,8,188,206,170,179,6,38,247,251,253,66,124,13,10,179,232,76,67,110,216,67,106,16,217,56,181,152,61,78,94,64,87,236,93,124,104,49,122,182,232,231,1,223,102,147,128,12,103,49,188,198,169,163,124,143,50,87,6,109,113,182,0,153,249,219,116,155,202,144,79,45,198,245,2,236,254,144,122,209,78,134,109,90,84,63,45,177,144,97,228,134,129,12,252,134,43,8,140,5,96,188,207,162,64,225,247,116,110,79,213,18,229,125,190,243,65,184,49,25,77,89,39,112,134,100,52,101,114,62,190,11,32,27,105,208,83,234,82,160,105,238,210,114,248,96,198,33,113,78,0,113,94,182,29,177,210,162,172,178,9,88,28,28,17,89,14,118,122,187,169,241,68,123,126,63,174,17,129,29,77,255,182,48,9,121,105,212,85,196,183,253,233,31,133,40,192,84,10,140,71,249,203,155,115,171,140,251,142,45,81,207,193,129,85,144,189,76,190,43,95,85,22,169,118,58,252,29,215,202,131,48,146,169,179,56,84,96,162,80,38,95,151,154,10,182,1,149,74,163,190,243,20,234,213,2,11,123,87,81,206,11,174,52,17,217,58,172,91,197,34,69,217,102,3,236,138,194,192,28,28,172,147,225,84,177,40,57,88,60,114,25,138,105,174,201,243,14,19,235,240,102,73,158,176,48,218,73,174,179,83,60,99,198,152,125,196,92,28,149,233,184,91,133,213,25,67,240,36,115,101,92,166,229,69,18,1,193,227,204,229,97,25,221,15,236,21,145,4,199,52,151,135,101,74,129,191,38,212,236,191,230,226,168,76,39,244,100,100,193,197,204,149,113,153,64,228,172,137,36,70,131,185,50,174,208,218,175,9,37,68,141,185,60,44,83,218,202,142,71,22,133,34,43,34,237,162,85,145,170,21,253,40,177,41,82,219,135,107,66,169,33,104,190,243,236,86,63,210,226,213,124,239,225,173,234,87,162,219,92,127,164,123,87,95,144,99,117,97,133,11,212,74,56,142,60,59,124,232,15,77,246,54,128,198,78,50,63,117,109,90,87,72,101,141,84,244,192,122,199,63,231,232,88,86,111,241,221,223,78,184,54,126,69,117,119,103,118,240,27,60,181,45,243,177,100,242,104,5,169,47,188,105,238,228,110,95,184,102,225,153,133,111,22,129,89,132,102,17,93,132,141,136,163,84,49,118,216,2,95,34,39,190,227,0,9,65,176,160,85,57,183,189,164,194,4,74,56,86,227,208,106,15,234,38,128,234,11,79,192,243,237,104,1,51,92,67,245,69,84,29,209,95,195,11,4,60,207,94,96,214,95,152,210,217,49,220,240,34,90,104,167,227,46,161,134,12,53,146,80,67,29,53,82,81,157,213,186,69,82,119,168,41,50,176,61,93,67,76,185,178,244,190,38,147,183,194,106,223,159,36,167,232,209,101,240,33,23,35,156,29,122,20,23,13,221,113,13,163,78,142,156,20,247,135,51,248,76,125,89,44,189,199,186,223,229,187,105,113,95,224,75,27,207,229,226,122,160,29,163,148,214,226,75,85,112,20,37,4,234,211,46,111,218,99,204,222,65,221,142,255,241,8,155,230,141,49,125,254,39,251,220,223,31,161,12,252,43,70,192,197,34,187,253,61,148,138,191,18,68,206,221,220,34,40,235,2,130,140,8,81,107,111,33,106,7,214,76,123,16,95,217,6,80,117,218,103,43,63,87,21,183,170,88,156,172,180,21,206,22,221,118,11,40,243,46,252,125,180,19,69,97,149,235,133,247,31,216,251,233,9,77,78,23,177,49,65,248,86,235,162,109,190,250,162,21,61,128,59,176,34,25,115,187,209,150,156,59,103,252,72,145,220,113,223,104,220,99,151,190,250,185,0,143,81,14,179,152,118,219,188,140,111,207,86,154,95,40,0,48,16,223,221,77,59,56,130,14,21,78,210,10,163,22,164,37,5,167,210,54,213,210,70,36,203,68,255,41,143,232,9,199,212,172,136,238,116,192,221,128,246,99,1,158,240,232,152,206,3,251,111,187,27,115,30,161,234,101,99,27,197,73,195,81,237,188,33,83,214,176,14,24,142,65,101,28,127,52,42,225,198,116,4,24,237,249,86,0,240,150,0,60,1,192,191,6,16,92,3,136,36,128,145,131,100,200,72,251,201,192,177,15,155,114,116,38,77,178,214,29,219,83,159,30,172,96,156,171,203,220,214,122,152,2,221,17,194,177,109,32,148,240,99,16,102,248,105,51,99,86,229,69,86,50,37,96,80,118,29,93,215,22,21,193,186,69,215,11,50,46,166,164,129,107,106,89,154,204,104,31,39,46,202,44,195,117,50,246,196,30,68,49,129,223,184,38,5,223,237,61,122,155,139,38,224,222,145,5,84,113,252,5,28,235,26,82,176,128,228,238,116,36,52,154,193,99,102,208,251,23,218,204,220,30,131,176,20,107,166,55,36,120,83,24,200,155,20,178,161,22,115,75,46,39,208,185,232,97,52,196,42,20,91,147,93,184,65,104,98,133,16,175,50,195,197,199,63,251,134,80,216,232,221,33,54,146,225,180,105,17,147,179,134,138,140,15,78,61,211,85,103,9,54,92,27,92,67,182,27,118,51,199,244,13,236,234,143,63,42,187,132,11,233,5,84,180,249,225,217,196,251,159,103,147,29,68,26,175,127,193,202,98,181,51,54,232,98,139,215,185,147,115,162,3,44,16,103,194,155,107,20,107,216,141,139,249,101,52,136,234,145,211,248,138,99,222,99,140,123,187,123,41,73,90,44,46,242,198,159,202,227,169,105,9,170,201,66,209,113,192,244,165,172,2,129,220,150,31,237,230,48,109,176,214,60,104,131,190,108,127,35,214,52,233,185,237,224,253,169,41,153,239,234,110,63,84,95,148,254,24,197,145,222,178,247,104,99,127,37,39,71,180,176,130,34,253,240,92,18,75,240,110,85,50,195,246,58,3,163,14,91,64,184,57,147,196,58,54,191,127,12,161,249,32,253,238,67,240,31,128,29,205,107,167,5,78,159,23,123,158,219,40,243,220,108,4,52,202,250,116,38,255,34,111,39,252,243,29,67,2,107,222,253,54,185,7,75,34,138,177,166,197,13,244,203,27,43,146,25,36,23,222,193,147,177,78,163,237,223,178,190,172,3,206,196,22,204,70,31,26,176,15,121,223,86,43,80,205,45,148,186,235,64,215,0,84,253,27,89,249,253,194,119,234,59,42,254,160,116,80,67,124,192,176,244,200,167,67,114,177,31,51,217,212,108,10,186,50,41,160,225,192,31,135,190,12,154,139,54,18,226,160,189,9,137,19,49,25,203,148,0,123,195,99,200,228,253,230,14,134,31,29,70,121,35,14,177,60,55,76,180,89,156,228,83,12,54,159,67,3,19,125,6,79,199,25,133,95,198,100,25,78,172,214,153,97,164,188,231,169,199,145,206,124,24,41,101,188,169,122,31,163,102,183,26,43,86,56,198,128,181,159,194,134,102,61,201,111,216,230,64,118,27,198,252,141,158,195,5,229,150,254,177,158,195,125,100,193,121,192,165,62,224,57,87,24,108,62,135,182,234,57,239,227,189,231,57,75,152,74,241,206,246,241,154,7,120,211,58,22,179,242,157,58,15,125,179,224,22,67,234,244,168,15,180,207,199,204,234,192,31,133,45,250,208,74,208,86,64,97,5,165,171,166,212,40,251,123,3,34,52,98,151,76,162,45,173,8,236,124,11,150,3,117,59,176,202,233,188,92,211,183,13,237,228,144,55,122,204,112,101,134,159,236,27,37,19,54,253,99,93,176,213,26,40,46,237,160,172,85,48,99,87,105,88,206,226,28,108,188,185,220,204,224,48,107,160,77,234,244,55,75,105,12,127,173,188,172,170,53,145,21,213,58,137,184,169,60,119,180,81,134,43,156,18,190,70,255,14,43,80,134,95,99,247,227,76,20,168,206,42,124,81,86,249,229,28,197,156,151,31,29,141,166,8,5,155,135,115,137,198,19,217,78,83,19,45,106,133,101,20,85,213,84,196,172,75,229,125,205,104,170,168,60,219,218,192,237,117,155,197,96,30,218,112,201,38,15,88,112,44,135,190,132,242,249,227,84,37,151,48,63,143,46,27,51,195,57,58,87,228,74,97,255,131,185,159,62,176,3,237,47,203,34,147,147,43,211,63,94,24,187,236,44,222,99,253,178,32,51,41,193,1,111,141,162,31,38,198,15,182,206,26,97,197,78,203,41,128,53,95,40,64,255,85,54,166,62,248,92,147,81,186,162,227,207,51,118,41,170,240,163,187,89,243,146,145,52,204,153,182,152,76,146,169,65,166,175,78,203,89,248,70,122,138,2,87,138,68,119,107,79,117,98,48,249,15,61,23,25,253,199,215,54,190,84,106,171,105,75,90,114,128,242,89,181,146,172,63,209,173,165,81,155,117,168,244,206,174,67,44,236,237,164,69,96,101,252,250,10,240,57,53,243,8,243,150,84,54,136,64,59,77,215,196,92,128,233,191,238,3,70,119,66,107,27,230,173,182,16,59,115,43,113,186,34,54,215,128,122,195,80,151,87,106,75,175,181,171,231,170,110,162,160,173,219,108,3,178,48,218,233,131,234,192,31,100,103,174,74,65,39,158,186,248,223,72,86,201,226,142,156,169,189,41,34,133,206,85,160,164,239,15,207,164,184,44,207,3,243,110,209,211,11,224,144,54,69,167,95,206,186,173,7,103,157,15,4,31,61,40,158,77,203,3,188,77,242,49,240,31,41,36,183,215,232,106,239,231,211,241,243,116,231,86,209,151,94,37,240,27,183,55,17,29,174,226,94,37,201,47,226,126,249,250,237,13,28,205,51,92,103,138,209,255,242,165,222,27,152,154,103,184,206,20,163,255,213,171,194,55,240,52,77,112,149,37,78,254,75,247,143,111,224,135,83,191,202,12,167,253,197,27,205,55,176,51,210,191,202,16,167,222,179,178,108,186,171,195,14,68,13,126,230,61,28,142,14,7,157,244,172,69,168,108,87,207,231,199,70,155,243,149,51,5,65,55,252,155,0,97,104,142,63,142,189,219,244,124,105,249,191,99,155,215,192,101,246,239,159,239,234,243,241,238,55,225,198,67,132,143,3,147,140,127,97,97,103,151,27,164,203,73,244,240,80,172,4,220,225,202,21,109,76,255,114,174,236,26,125,47,159,216,121,225,124,9,107,62,176,150,189,204,159,27,162,244,114,137,210,19,234,37,106,244,40,187,42,59,152,150,188,85,152,175,244,243,61,139,68,186,82,76,151,71,21,121,60,212,234,164,107,27,42,148,129,46,154,176,239,94,182,161,166,96,45,140,193,179,119,187,93,210,156,9,133,164,231,243,75,39,168,82,110,242,233,235,150,134,41,109,12,58,99,175,48,111,155,227,35,61,125,219,152,164,129,55,1,125,41,61,209,165,142,45,69,49,71,240,247,218,146,50,160,117,42,65,238,27,161,117,205,15,171,49,186,12,21,152,69,111,52,146,110,56,10,98,122,99,247,245,37,205,80,135,248,156,90,192,4,92,45,64,226,22,157,0,188,201,96,223,85,200,12,117,85,27,19,104,15,49,97,19,40,178,135,158,237,47,244,240,102,10,6,86,73,245,247,244,57,232,43,198,199,19,121,147,54,185,144,115,233,94,117,108,209,142,225,164,12,207,217,69,126,240,237,27,255,46,193,168,57,116,58,1,155,168,78,135,224,225,120,176,215,72,89,91,221,176,12,40,199,161,230,218,72,199,113,202,206,141,182,96,39,239,158,195,122,153,181,111,223,190,35,250,133,138,229,0,90,105,196,250,242,151,164,164,67,110,246,29,43,125,219,161,223,117,27,57,11,135,12,44,93,180,102,181,179,206,230,112,14,114,229,48,209,218,78,9,125,234,159,58,66,79,190,143,185,151,241,9,160,168,77,159,47,99,122,231,41,120,0,96,71,234,176,185,175,113,107,234,227,160,100,90,197,140,136,221,247,39,165,169,171,119,173,185,7,188,89,232,181,236,140,19,34,133,105,191,206,31,46,29,36,191,103,28,131,151,190,37,252,253,120,221,45,161,237,156,193,225,104,247,30,119,35,112,71,48,174,232,119,98,100,12,95,196,200,16,65,22,11,236,206,72,203,54,173,240,21,108,143,99,179,136,151,209,169,101,149,0,208,169,15,215,34,25,141,149,25,162,117,188,159,164,57,164,251,136,236,9,119,174,58,45,192,253,112,157,245,255,5,99,157,41,226,200,56,0,0 };
+const uint8_t CSS_STYLE_GZIP[3424] PROGMEM = { 31,139,8,0,160,250,217,97,2,255,213,27,219,110,235,184,241,87,212,4,1,98,172,164,234,110,91,194,46,250,216,183,2,221,151,22,197,246,128,150,168,72,136,44,185,146,124,146,172,161,127,239,144,212,133,55,197,78,114,22,69,143,79,18,155,154,25,206,157,195,33,109,167,77,221,163,178,198,237,229,212,116,101,95,54,117,220,226,10,245,229,119,156,188,148,89,95,196,219,253,67,114,68,237,83,89,199,158,115,122,77,14,205,171,213,149,191,151,245,83,124,104,218,12,183,22,140,12,118,218,84,231,99,109,142,127,187,11,67,118,29,231,33,201,171,6,245,113,133,243,30,192,80,155,93,142,101,109,21,184,124,42,122,2,64,105,82,66,45,202,202,115,23,71,211,44,5,202,154,151,216,49,130,211,43,253,105,159,14,232,209,115,2,211,221,111,77,119,23,154,142,29,110,146,19,202,50,224,198,34,19,48,22,167,145,150,78,65,135,152,4,192,106,223,55,199,56,160,67,240,153,113,25,82,38,128,243,166,141,239,243,60,31,254,114,196,89,137,30,23,8,215,115,194,211,235,230,98,195,71,188,8,49,9,185,133,135,131,6,107,187,119,214,177,162,208,225,177,208,235,248,32,242,25,146,4,191,223,61,12,131,221,225,148,24,233,208,98,244,60,235,154,113,126,168,80,250,172,135,48,138,246,194,116,28,59,201,168,121,143,104,25,48,158,218,230,92,103,214,40,125,20,69,131,221,159,219,255,156,155,178,195,151,5,32,190,119,209,33,221,167,201,108,116,170,201,123,55,66,206,46,52,124,48,79,215,84,101,54,216,248,136,91,84,101,2,174,135,211,116,235,202,184,222,22,225,200,225,113,79,184,199,109,11,206,215,10,232,126,176,223,101,7,5,125,191,115,14,123,30,253,5,247,168,59,21,168,234,37,244,96,31,98,5,61,245,113,40,204,222,157,107,240,213,23,105,242,220,77,3,39,151,177,113,116,56,56,57,143,13,246,106,27,113,98,28,109,177,231,201,168,153,31,6,142,48,49,170,202,223,81,91,214,34,242,54,72,125,69,223,169,227,239,189,3,143,156,161,246,89,64,12,130,96,23,110,101,68,54,202,35,86,232,128,171,139,54,158,147,151,162,236,177,213,157,80,138,227,186,121,105,209,73,10,82,219,195,199,41,208,98,219,133,79,134,29,144,95,46,252,78,122,252,218,91,32,213,83,29,167,184,6,155,114,209,149,228,144,115,172,23,230,133,91,199,73,42,200,63,115,62,176,125,41,86,33,180,146,172,236,78,21,122,139,203,154,194,30,170,38,125,214,177,8,126,211,151,41,170,198,169,15,168,195,4,33,81,115,91,223,156,98,203,118,67,224,85,13,130,253,126,47,49,225,146,80,101,10,179,200,76,99,122,219,67,118,227,217,56,181,152,62,78,94,64,87,244,93,76,227,208,34,159,71,124,155,78,2,50,156,249,240,154,227,47,223,163,204,21,65,91,156,105,32,51,127,155,110,83,17,242,169,197,184,214,192,238,15,169,23,237,68,216,166,69,245,147,142,133,12,35,55,12,68,224,55,92,65,96,104,128,241,62,139,2,137,223,211,185,61,85,58,202,251,124,231,131,112,74,158,12,156,49,227,205,139,17,27,223,5,15,154,172,58,231,71,9,154,36,72,101,25,26,205,200,86,2,159,164,233,241,81,156,151,109,215,91,105,81,86,217,12,206,15,78,168,116,89,113,6,187,169,241,76,125,121,63,45,116,129,29,205,255,182,192,71,255,210,200,75,161,111,251,243,63,2,81,128,177,36,24,207,131,7,121,115,110,165,113,223,177,5,234,57,184,176,12,178,23,201,119,229,171,204,34,209,79,135,191,227,90,122,16,70,34,117,26,137,18,76,20,138,228,235,82,81,193,54,32,82,41,212,119,158,68,189,210,176,176,119,37,229,188,224,74,17,145,22,19,170,85,172,190,40,219,108,132,93,81,24,152,131,129,117,34,156,44,22,33,7,203,71,46,66,81,205,53,121,222,225,222,58,188,89,130,39,104,70,59,193,117,118,146,103,44,24,139,143,152,218,81,145,142,187,149,88,93,48,56,79,50,87,198,69,90,94,36,16,224,60,206,212,15,139,232,126,96,175,136,196,57,166,169,31,22,41,5,254,154,80,139,255,154,218,81,145,78,232,137,200,156,139,153,43,227,34,129,200,89,19,137,143,6,115,101,92,162,181,95,19,138,139,26,83,63,44,82,218,138,142,215,107,133,234,87,68,218,69,171,34,85,43,250,145,98,147,167,182,15,215,132,146,67,208,124,231,217,173,126,164,196,171,249,222,195,91,213,47,69,183,185,254,72,245,174,161,232,143,213,133,150,46,80,45,225,56,242,236,240,97,56,52,217,219,8,10,149,245,242,212,181,73,101,33,20,54,66,217,3,43,30,251,156,163,99,89,189,197,119,127,59,225,218,248,21,213,221,157,217,193,111,240,212,182,204,167,162,201,35,53,164,186,244,166,185,147,187,67,225,154,133,103,22,190,89,4,102,17,154,69,52,177,78,74,28,71,170,99,236,176,5,190,120,78,124,199,1,18,156,96,65,43,115,110,123,73,133,123,40,226,104,149,67,234,61,168,156,0,106,40,60,14,207,183,35,13,102,184,134,234,243,168,42,162,191,134,23,112,120,158,173,97,214,215,76,233,236,40,110,120,225,45,180,83,113,117,168,33,69,141,4,212,80,69,141,100,84,103,181,114,17,212,29,42,138,12,108,79,213,16,85,174,40,189,175,200,228,173,176,58,12,39,193,41,6,52,110,25,239,93,140,112,118,24,80,92,52,100,207,53,142,58,57,114,82,60,28,206,224,51,245,69,91,124,79,149,191,171,110,223,125,97,47,173,47,175,71,218,49,74,73,53,126,209,238,67,147,30,42,212,46,111,218,99,76,223,65,229,142,255,241,24,128,6,141,249,243,63,233,231,225,254,8,133,224,95,49,2,46,180,236,14,247,80,44,254,218,163,254,220,45,125,142,178,46,32,200,122,46,106,237,45,68,237,200,154,105,143,226,75,27,1,98,121,62,55,216,62,55,194,202,76,58,52,216,103,43,63,87,21,51,61,95,193,172,52,80,206,22,105,1,112,40,75,71,224,125,180,19,65,161,51,95,88,167,133,190,159,159,16,46,47,124,11,166,103,59,178,139,178,71,27,138,150,119,19,230,229,146,248,212,55,39,131,51,238,156,233,35,65,114,167,237,165,113,143,93,242,26,150,58,61,70,57,204,98,218,109,243,50,189,61,91,105,126,33,0,192,64,124,119,55,111,244,122,116,168,112,146,86,24,181,32,109,95,48,42,109,83,233,246,43,89,198,59,89,121,68,79,56,38,182,71,100,67,4,62,9,180,31,11,112,151,71,199,116,30,232,127,219,221,152,203,8,81,47,29,219,72,158,28,78,106,103,141,168,178,134,197,194,112,12,34,227,244,163,80,9,55,166,195,193,40,207,183,28,128,167,3,240,56,0,255,26,64,112,13,32,18,0,38,14,166,30,208,126,54,112,236,195,222,29,157,251,38,89,235,3,238,137,79,143,86,48,206,213,101,105,224,61,204,217,192,225,98,182,109,32,222,240,99,16,102,248,105,179,96,86,229,69,84,50,33,96,16,118,29,85,215,22,17,193,186,69,215,26,25,181,121,107,228,154,88,150,100,60,210,238,137,139,50,203,112,157,76,189,192,7,94,76,224,55,174,251,130,109,9,31,189,205,69,17,112,239,136,2,202,56,190,6,199,186,134,20,104,144,220,157,138,132,38,51,120,212,12,106,155,67,153,153,217,99,20,150,96,45,244,198,85,192,228,6,242,38,133,148,169,196,156,206,229,56,58,23,53,140,198,88,133,138,108,182,11,51,8,201,190,16,226,85,102,184,248,248,103,223,224,170,31,181,137,68,71,50,156,54,45,162,114,214,80,182,177,193,185,87,188,234,44,193,134,105,131,105,200,118,195,110,225,152,188,129,173,255,241,71,101,151,80,147,94,64,69,155,31,158,77,188,255,121,54,217,65,164,177,34,25,172,204,151,68,83,31,47,182,88,49,60,59,39,58,192,2,113,238,89,15,142,96,141,91,118,62,191,76,6,145,61,114,30,95,113,204,123,140,241,96,119,47,101,159,22,218,74,192,248,83,121,60,53,109,143,234,94,83,153,28,48,121,73,171,64,32,30,71,76,118,115,168,54,232,145,4,104,131,188,108,127,195,23,62,233,185,237,224,253,169,41,169,239,170,110,63,150,104,132,254,20,197,209,114,84,241,110,117,177,154,165,35,82,143,65,109,127,120,46,123,139,243,119,89,86,195,246,58,3,163,14,91,64,184,57,247,137,117,108,126,255,24,66,243,65,250,221,135,224,63,0,59,25,220,78,11,156,62,107,155,165,219,40,243,220,108,2,52,202,250,116,238,255,213,191,157,240,207,119,20,9,236,123,247,219,236,48,52,173,72,230,155,151,59,208,47,235,199,144,3,20,189,83,239,224,201,84,185,145,142,99,89,95,214,1,23,98,26,179,145,135,6,108,95,222,183,213,10,84,115,11,165,238,58,208,53,0,89,255,70,86,126,191,176,13,254,142,136,63,42,29,212,16,31,48,44,70,226,177,146,184,71,136,169,108,114,126,5,93,153,4,208,112,224,143,67,94,6,201,78,27,1,113,212,222,140,196,136,152,148,101,66,128,190,97,117,172,201,26,213,29,12,63,58,148,242,134,31,162,153,111,156,104,163,157,228,83,12,54,159,67,3,19,125,6,79,197,153,132,215,99,178,227,65,174,126,167,134,17,50,161,39,31,204,58,203,177,172,144,3,231,122,126,138,154,221,106,172,88,225,20,3,214,126,14,27,146,7,5,191,161,219,5,209,109,40,243,55,122,14,19,148,89,250,199,122,14,243,17,141,243,128,75,125,192,115,174,48,216,124,14,109,213,115,222,199,123,207,115,116,152,82,57,79,183,255,138,7,120,243,202,22,211,130,158,56,15,121,163,113,139,233,200,157,248,64,251,124,204,172,14,252,145,219,217,143,29,8,101,5,228,214,84,178,142,10,253,181,191,55,32,66,195,55,215,4,218,194,138,64,15,198,96,57,144,55,8,171,156,46,11,56,121,219,144,6,80,255,70,78,39,174,204,240,147,125,163,100,92,27,96,170,20,182,74,223,197,245,181,39,250,172,166,153,154,81,227,114,22,231,96,227,205,229,102,6,199,89,3,101,82,103,184,89,74,99,252,107,229,101,85,173,137,44,169,214,73,248,109,230,185,35,253,53,92,225,180,103,107,244,239,176,2,101,248,53,118,63,206,68,129,234,172,194,23,105,149,215,231,40,234,188,236,196,105,50,69,200,217,60,148,138,54,107,167,168,137,148,185,220,50,138,170,106,46,98,214,165,242,190,102,52,89,84,150,109,109,122,85,229,26,141,24,204,67,90,48,217,236,1,26,199,114,200,139,43,168,63,78,85,112,9,243,243,232,162,49,51,156,163,115,213,95,41,245,127,48,247,243,7,122,18,254,101,89,68,114,98,101,250,199,11,99,151,157,197,90,179,95,22,100,33,197,57,224,173,81,244,195,196,248,193,214,89,35,44,217,73,159,2,104,59,134,0,12,95,101,99,110,159,47,53,25,161,203,59,254,50,99,151,162,10,63,186,155,53,47,153,72,195,156,105,139,251,89,50,57,200,212,213,73,159,133,111,164,39,41,112,165,72,116,183,246,92,39,6,179,255,144,227,148,201,127,124,101,227,75,164,182,26,216,52,67,201,1,202,167,213,74,178,254,68,181,150,66,109,209,161,212,77,187,14,161,217,219,9,139,192,202,248,245,21,224,115,106,102,17,230,233,84,54,138,64,122,79,215,196,212,192,12,95,247,1,163,59,161,181,13,243,86,89,136,157,165,185,56,223,45,91,106,64,181,133,168,202,43,52,170,215,26,216,75,85,55,83,80,214,109,186,1,209,140,118,234,160,60,240,7,217,153,169,146,211,137,39,47,254,55,146,149,178,184,35,102,106,111,142,72,174,151,21,72,233,251,195,51,73,46,203,242,192,178,91,244,212,2,56,36,109,210,249,151,179,110,235,209,89,151,115,196,71,15,138,103,211,242,200,37,223,228,99,224,63,82,72,102,175,201,213,222,207,167,211,231,249,178,174,164,47,181,74,96,87,117,111,34,58,222,225,189,74,146,221,224,253,242,189,221,27,56,90,102,184,206,20,165,255,229,219,192,55,48,181,204,112,157,41,74,255,171,119,140,111,224,105,158,224,42,75,140,252,151,46,46,223,192,15,163,126,149,25,70,251,139,87,161,111,96,103,162,127,149,33,70,125,160,101,217,124,197,135,30,145,26,236,20,124,60,46,29,143,62,201,233,11,87,217,174,158,216,39,243,61,252,47,156,50,112,186,97,223,137,8,67,115,250,113,236,221,102,96,75,203,255,29,219,172,6,46,179,127,255,124,87,159,143,119,191,113,119,32,34,124,28,153,164,252,115,11,59,61,22,17,238,52,145,227,68,190,18,112,199,155,90,164,49,253,203,185,178,107,244,189,124,162,39,136,203,221,45,241,158,131,207,125,141,100,145,121,122,184,244,72,201,53,21,169,77,52,8,19,144,243,238,170,236,128,147,254,173,194,108,241,95,46,99,136,39,59,100,197,148,145,167,147,175,78,184,219,33,67,25,232,162,200,255,238,181,29,98,29,218,213,24,157,125,183,219,37,205,185,39,144,228,16,95,119,204,42,164,43,159,188,110,233,161,146,94,161,51,181,15,243,182,57,62,146,35,186,141,217,55,240,38,32,47,169,77,170,107,226,18,20,115,2,127,175,83,41,2,90,167,18,228,190,17,90,213,252,184,64,163,203,88,148,89,228,110,100,223,141,167,67,84,111,244,238,191,160,25,226,16,159,83,11,152,128,169,5,72,220,162,19,128,55,41,236,187,10,89,160,174,106,99,6,29,32,76,236,30,234,238,177,141,251,11,57,207,153,131,129,22,87,195,61,121,14,250,138,241,241,212,191,9,251,94,72,195,100,251,58,117,109,167,8,147,134,151,132,35,62,248,246,141,125,47,97,210,28,58,157,128,77,84,167,99,240,48,60,216,126,164,180,211,110,88,6,84,232,80,134,109,132,19,58,105,51,71,186,178,179,119,47,97,173,103,237,219,183,239,136,124,57,67,31,64,43,189,89,95,252,6,153,112,18,78,191,128,166,238,68,212,91,115,19,103,225,152,148,133,43,219,180,156,86,217,28,143,70,174,156,47,90,219,57,199,207,45,85,135,107,211,15,49,243,50,54,1,212,185,233,243,252,133,49,150,149,71,0,122,238,14,251,253,26,183,166,58,14,74,198,203,55,205,134,238,251,147,212,231,85,27,217,204,3,222,44,244,90,118,198,9,245,133,105,191,46,31,46,29,36,191,103,28,131,151,190,37,236,253,116,39,46,33,29,158,209,225,72,67,31,119,19,112,215,99,92,145,239,215,136,24,62,143,145,161,30,89,52,176,59,35,45,219,180,194,87,176,61,134,77,35,94,68,39,150,149,2,64,165,62,94,176,164,52,86,102,136,214,241,126,18,230,16,110,54,210,39,204,185,234,180,0,247,195,117,54,252,23,184,125,141,214,215,57,0,0 };