Мелкие правки веб-интерфейса

[esp-clock.git] / data / web / style.css

diff --git a/data/web/style.css b/data/web/style.css
index c83b6842c619fcd41bed2f951b17a616f93f550c..877162148e010cefe5c7957058cab9d09d9d58be 100644 (file)
--- a/data/web/style.css
+++ b/data/web/style.css
@@ -1,79 +1,54 @@
-.pure-button:focus,
-a:active,
-a:hover {
- outline:0
-}
-.pure-table,
-table {
- border-collapse:collapse;
- border-spacing:0
-}
-html {
- font-family:sans-serif;
- -ms-text-size-adjust:100%;
+/*!
+Pure v3.0.0
+Copyright 2013 Yahoo!
+Licensed under the BSD License.
+https://github.com/pure-css/pure/blob/master/LICENSE
+*/
+/*!
+normalize.css v | MIT License | https://necolas.github.io/normalize.css/
+Copyright (c) Nicolas Gallagher and Jonathan Neal
+*/
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html {
+ line-height:1.15;

  -webkit-text-size-adjust:100%
 }
 body {
  margin:0
 }
  -webkit-text-size-adjust:100%
 }
 body {
  margin:0
 }

-pre {
- font-family:inherit;
- font-weight:700;
- display:contents;
- white-space:pre-wrap;
- margin:0
-}
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
+main {

  display:block
 }
  display:block
 }

-audio,
-canvas,
-progress,
-video {
- display:inline-block;
- vertical-align:baseline
+h1 {
+ font-size:2em;
+ margin:.67em 0

 }
 }

-audio:not([controls]) {
- display:none;
- height:0
+hr {
+ box-sizing:content-box;
+ height:0;
+ overflow:visible

 }
 }

-[hidden],
-template {
- display:none
+pre {
+ font-family:monospace,monospace;
+ font-size:1em

 }
 a {
  background-color:transparent
 }
 abbr[title] {
 }
 a {
  background-color:transparent
 }
 abbr[title] {

- border-bottom:1px dotted
+ border-bottom:none;
+ text-decoration:underline;
+ -webkit-text-decoration:underline dotted;
+ text-decoration:underline dotted

 }
 b,
 }
 b,

-optgroup,

 strong {
 strong {

- font-weight:700
-}
-dfn {
- font-style:italic
-}
-h1 {
- font-size:2em;
- margin:.67em 0
+ font-weight:bolder

 }
 }

-mark {
- background:#ff0;
- color:#000
+code,
+kbd,
+samp {
+ font-family:monospace,monospace;
+ font-size:1em

 }
 small {
  font-size:80%
 }
 small {
  font-size:80%


@@ -85,117 +60,103 @@ sup {
  position:relative;
  vertical-align:baseline
 }
  position:relative;
  vertical-align:baseline
 }

-sup {
- top:-.5em
-}

 sub {
  bottom:-.25em
 }
 sub {
  bottom:-.25em
 }

-img {
- border:0
-}
-svg:not(:root) {
- overflow:hidden
-}
-figure {
- margin:1em 40px
-}
-hr {
- border:0;
- height:2px;
- width:80%;
- background-image:-webkit-linear-gradient(left,#292929,#1f8dd6,#292929);
- background-image:-moz-linear-gradient(left,#292929,#1f8dd6,#292929);
- background-image:-ms-linear-gradient(left,#292929,#1f8dd6,#292929);
- background-image:-o-linear-gradient(left,#292929,#1f8dd6,#292929)
-}
-textarea {
- overflow:auto
+sup {
+ top:-.5em

 }
 }

-code,
-kbd,
-samp {
- font-family:monospace,monospace;
- font-size:1em
+img {
+ border-style:none

 }
 button,
 input,
 optgroup,
 select,
 textarea {
 }
 button,
 input,
 optgroup,
 select,
 textarea {

- color:inherit;
- font:inherit
+ font-family:inherit;
+ font-size:100%;
+ line-height:1.15;
+ margin:0

 }
 }

-.pure-button,
+button,

 input {
 input {

- line-height:normal
-}
-button {

  overflow:visible
 }
 button,
 select {
  text-transform:none
 }
  overflow:visible
 }
 button,
 select {
  text-transform:none
 }

-button,
-html input[type=button],
-input[type=reset],
-input[type=submit] {
- -webkit-appearance:button;
- cursor:pointer;
- letter-spacing:.05em;
- background:transparent;
- text-transform:uppercase;
- color:#aaa;
- font-size:90%;
- border:2px solid #2497e3;
- border-radius:6px;
- box-shadow:inset 0 1px 11px 0 #1f8dd6
-}
-button[disabled],
-html input[disabled] {
- cursor:default
+[type=button],
+[type=reset],
+[type=submit],
+button {
+ -webkit-appearance:button

 }
 }

-button::-moz-focus-inner,
-input::-moz-focus-inner {
- border:0;
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner,
+button::-moz-focus-inner {
+ border-style:none;

  padding:0
 }
  padding:0
 }

-input[type=checkbox],
-input[type=radio] {
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring,
+button:-moz-focusring {
+ outline:1px dotted ButtonText
+}
+fieldset {
+ padding:.35em .75em .625em
+}
+legend {
+ box-sizing:border-box;
+ color:inherit;
+ display:table;
+ max-width:100%;
+ padding:0;
+ white-space:normal
+}
+progress {
+ vertical-align:baseline
+}
+textarea {
+ overflow:auto
+}
+[type=checkbox],
+[type=radio] {

  box-sizing:border-box;
  box-sizing:border-box;

- vertical-align:middle;

  padding:0
 }
  padding:0
 }

-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {

  height:auto
 }
  height:auto
 }

-input[type=search] {
+[type=search] {

  -webkit-appearance:textfield;
  -webkit-appearance:textfield;

- box-sizing:content-box
+ outline-offset:-2px

 }
 }

-.pure-button,
-.pure-form input:not([type]),
-.pure-menu {
- box-sizing:border-box
-}
-input[type=search]::-webkit-search-cancel-button,
-input[type=search]::-webkit-search-decoration {
+[type=search]::-webkit-search-decoration {

  -webkit-appearance:none
 }
  -webkit-appearance:none
 }

-fieldset {
- border:1px solid silver;
- margin:0 2px;
- padding:.35em .625em .75em
+::-webkit-file-upload-button {
+ -webkit-appearance:button;
+ font:inherit

 }
 }

-legend,
-td,
-th {
- padding:0
+details {
+ display:block

 }
 }

-legend {
- border:0
+summary {
+ display:list-item
+}
+template {
+ display:none
+}
+[hidden] {
+ display:none
+}
+html {
+ font-family:sans-serif

 }
 .hidden,
 [hidden] {
 }
 .hidden,
 [hidden] {


@@ -207,30 +168,14 @@ legend {
  display:block
 }
 .pure-g {
  display:block
 }
 .pure-g {

- letter-spacing:-.31em;
- text-rendering:optimizespeed;
- font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
- display:-webkit-box;
- display:-webkit-flex;
- display:-ms-flexbox;

  display:flex;
  display:flex;

- -webkit-flex-flow:row wrap;
- -ms-flex-flow:row wrap;

  flex-flow:row wrap;
  flex-flow:row wrap;

- -webkit-align-content:flex-start;
- -ms-flex-line-pack:start;

  align-content:flex-start
 }
  align-content:flex-start
 }

-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
- table .pure-g {
-  display:block
- }
-}
-.opera-only :-o-prefocus,
-.pure-g {
- word-spacing:-.43em
+.pure-u {
+ display:inline-block;
+ vertical-align:top

 }
 }

-.pure-u,

 .pure-u-1,
 .pure-u-1-1,
 .pure-u-1-12,
 .pure-u-1,
 .pure-u-1-1,
 .pure-u-1-12,


@@ -277,16 +222,11 @@ legend {
 .pure-u-7-8,
 .pure-u-8-24,
 .pure-u-9-24 {
 .pure-u-7-8,
 .pure-u-8-24,
 .pure-u-9-24 {

+ display:inline-block;

  letter-spacing:normal;
  word-spacing:normal;
  letter-spacing:normal;
  word-spacing:normal;

- vertical-align:text-top;
- text-rendering:auto;
- display:inline-block;
- zoom:1;
- margin:20px 0 0
-}
-.pure-g [class*=pure-u] {
- font-family:sans-serif
+ vertical-align:top;
+ text-rendering:auto

 }
 .pure-u-1-24 {
  width:4.1667%
 }
 .pure-u-1-24 {
  width:4.1667%


@@ -392,16 +332,15 @@ legend {
 }
 .pure-button {
  display:inline-block;
 }
 .pure-button {
  display:inline-block;

- zoom:1;
+ line-height:normal;

  white-space:nowrap;
  vertical-align:middle;
  text-align:center;
  cursor:pointer;
  -webkit-user-drag:none;
  -webkit-user-select:none;
  white-space:nowrap;
  vertical-align:middle;
  text-align:center;
  cursor:pointer;
  -webkit-user-drag:none;
  -webkit-user-select:none;

- -moz-user-select:none;
- -ms-user-select:none;
- user-select:none
+ user-select:none;
+ box-sizing:border-box

 }
 .pure-button::-moz-focus-inner {
  padding:0;
 }
 .pure-button::-moz-focus-inner {
  padding:0;


@@ -413,32 +352,36 @@ legend {
 }
 .opera-only :-o-prefocus,
 .pure-button-group {
 }
 .opera-only :-o-prefocus,
 .pure-button-group {

- word-spacing:-.43em
+ word-spacing:-0.43em
+}
+.pure-button-group .pure-button {
+ letter-spacing:normal;
+ word-spacing:normal;
+ vertical-align:top;
+ text-rendering:auto

 }
 .pure-button {
  font-family:inherit;
  font-size:100%;
  padding:.5em 1em;
 }
 .pure-button {
  font-family:inherit;
  font-size:100%;
  padding:.5em 1em;

- color:#444;

  color:rgba(0,0,0,.8);
  color:rgba(0,0,0,.8);

- border:1px solid #999;
- border:transparent;
- background-color:#E6E6E6;
+ border:none transparent;
+ background-color:#e6e6e6;

  text-decoration:none;
  border-radius:2px
 }
 .pure-button-hover,
  text-decoration:none;
  border-radius:2px
 }
 .pure-button-hover,

+.pure-button:focus,

 .pure-button:hover {
 .pure-button:hover {

- border:2px solid #61c6ff;
- box-shadow:inset 0 1px 15px 0 #1f8dd6;
- filter:alpha(opacity=90);
- background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));

  background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))
 }
  background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))
 }

+.pure-button:focus {
+ outline:0
+}

 .pure-button-active,
 .pure-button:active {
  box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;
 .pure-button-active,
 .pure-button:active {
  box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;

- border-color:#000\9
+ border-color:#000

 }
 .pure-button-disabled,
 .pure-button-disabled:active,
 }
 .pure-button-disabled,
 .pure-button-disabled:active,


@@ -447,7 +390,6 @@ legend {
 .pure-button[disabled] {
  border:none;
  background-image:none;
 .pure-button[disabled] {
  border:none;
  background-image:none;

- filter:alpha(opacity=40);

  opacity:.4;
  cursor:not-allowed;
  box-shadow:none;
  opacity:.4;
  cursor:not-allowed;
  box-shadow:none;


@@ -464,13 +406,8 @@ a.pure-button-selected {
  color:#fff
 }
 .pure-button-group .pure-button {
  color:#fff
 }
 .pure-button-group .pure-button {

- letter-spacing:normal;
- word-spacing:normal;
- vertical-align:top;
- text-rendering:auto;

  margin:0;
  border-radius:0;
  margin:0;
  border-radius:0;

- border-right:1px solid #111;

  border-right:1px solid rgba(0,0,0,.2)
 }
 .pure-button-group .pure-button:first-child {
  border-right:1px solid rgba(0,0,0,.2)
 }
 .pure-button-group .pure-button:first-child {


@@ -482,28 +419,27 @@ a.pure-button-selected {
  border-bottom-right-radius:2px;
  border-right:none
 }
  border-bottom-right-radius:2px;
  border-right:none
 }

-.pure-form input[type=password],
-.pure-form input[type=email],
-.pure-form input[type=url],
+.pure-form input[type=color],

 .pure-form input[type=date],
 .pure-form input[type=date],

-.pure-form input[type=month],
-.pure-form input[type=time],
-.pure-form input[type=datetime],

 .pure-form input[type=datetime-local],
 .pure-form input[type=datetime-local],

-.pure-form input[type=week],
-.pure-form input[type=tel],
-.pure-form input[type=color],
+.pure-form input[type=datetime],
+.pure-form input[type=email],
+.pure-form input[type=month],

 .pure-form input[type=number],
 .pure-form input[type=number],

+.pure-form input[type=password],

 .pure-form input[type=search],
 .pure-form input[type=search],

+.pure-form input[type=tel],

 .pure-form input[type=text],
 .pure-form input[type=text],

+.pure-form input[type=time],
+.pure-form input[type=url],
+.pure-form input[type=week],

 .pure-form select,
 .pure-form textarea {
 .pure-form select,
 .pure-form textarea {

- background:#292828;

  padding:.5em .6em;
  display:inline-block;
  border:1px solid #ccc;
  padding:.5em .6em;
  display:inline-block;
  border:1px solid #ccc;

- box-shadow:inset 0 1px 10px #1f8dd6;
- border-radius:8px;
+ box-shadow:inset 0 1px 3px #ddd;
+ border-radius:4px;

  vertical-align:middle;
  box-sizing:border-box
 }
  vertical-align:middle;
  box-sizing:border-box
 }


@@ -512,61 +448,71 @@ a.pure-button-selected {
  display:inline-block;
  border:1px solid #ccc;
  box-shadow:inset 0 1px 3px #ddd;
  display:inline-block;
  border:1px solid #ccc;
  box-shadow:inset 0 1px 3px #ddd;

- border-radius:4px
+ border-radius:4px;
+ box-sizing:border-box

 }
 .pure-form input[type=color] {
 }
 .pure-form input[type=color] {

- padding:.1em .4em
+ padding:.2em .5em

 }
 }

-.pure-form input:not([type]):focus,
-.pure-form input[type=password]:focus,
-.pure-form input[type=email]:focus,
-.pure-form input[type=url]:focus,
+.pure-form input[type=color]:focus,

 .pure-form input[type=date]:focus,
 .pure-form input[type=date]:focus,

-.pure-form input[type=month]:focus,
-.pure-form input[type=time]:focus,
-.pure-form input[type=datetime]:focus,

 .pure-form input[type=datetime-local]:focus,
 .pure-form input[type=datetime-local]:focus,

-.pure-form input[type=week]:focus,
-.pure-form input[type=tel]:focus,
-.pure-form input[type=color]:focus,
+.pure-form input[type=datetime]:focus,
+.pure-form input[type=email]:focus,
+.pure-form input[type=month]:focus,

 .pure-form input[type=number]:focus,
 .pure-form input[type=number]:focus,

+.pure-form input[type=password]:focus,

 .pure-form input[type=search]:focus,
 .pure-form input[type=search]:focus,

+.pure-form input[type=tel]:focus,

 .pure-form input[type=text]:focus,
 .pure-form input[type=text]:focus,

+.pure-form input[type=time]:focus,
+.pure-form input[type=url]:focus,
+.pure-form input[type=week]:focus,

 .pure-form select:focus,
 .pure-form textarea:focus {
  outline:0;
 .pure-form select:focus,
 .pure-form textarea:focus {
  outline:0;

- border-color:#129FEA
+ border-color:#129fea
+}
+.pure-form input:not([type]):focus {
+ outline:0;
+ border-color:#129fea

 }
 }

-.pure-form input[type=file]:focus,

 .pure-form input[type=checkbox]:focus,
 .pure-form input[type=checkbox]:focus,

+.pure-form input[type=file]:focus,

 .pure-form input[type=radio]:focus {
 .pure-form input[type=radio]:focus {

- outline:#129FEA auto 1px
+ outline:thin solid #129FEA;
+ outline:1px auto #129FEA

 }
 .pure-form .pure-checkbox,
 .pure-form .pure-radio {
 }
 .pure-form .pure-checkbox,
 .pure-form .pure-radio {

+ margin:.5em 0;

  display:block
 }
  display:block
 }

-.pure-form input:not([type])[disabled],
-.pure-form input[type=password][disabled],
-.pure-form input[type=email][disabled],
-.pure-form input[type=url][disabled],
+.pure-form input[type=color][disabled],

 .pure-form input[type=date][disabled],
 .pure-form input[type=date][disabled],

-.pure-form input[type=month][disabled],
-.pure-form input[type=time][disabled],
-.pure-form input[type=datetime][disabled],

 .pure-form input[type=datetime-local][disabled],
 .pure-form input[type=datetime-local][disabled],

-.pure-form input[type=week][disabled],
-.pure-form input[type=tel][disabled],
-.pure-form input[type=color][disabled],
+.pure-form input[type=datetime][disabled],
+.pure-form input[type=email][disabled],
+.pure-form input[type=month][disabled],

 .pure-form input[type=number][disabled],
 .pure-form input[type=number][disabled],

+.pure-form input[type=password][disabled],

 .pure-form input[type=search][disabled],
 .pure-form input[type=search][disabled],

+.pure-form input[type=tel][disabled],

 .pure-form input[type=text][disabled],
 .pure-form input[type=text][disabled],

+.pure-form input[type=time][disabled],
+.pure-form input[type=url][disabled],
+.pure-form input[type=week][disabled],

 .pure-form select[disabled],
 .pure-form textarea[disabled] {
  cursor:not-allowed;
  background-color:#eaeded;
  color:#cad2d3
 }
 .pure-form select[disabled],
 .pure-form textarea[disabled] {
  cursor:not-allowed;
  background-color:#eaeded;
  color:#cad2d3
 }

+.pure-form input:not([type])[disabled] {
+ cursor:not-allowed;
+ background-color:#eaeded;
+ color:#cad2d3
+}

 .pure-form input[readonly],
 .pure-form select[readonly],
 .pure-form textarea[readonly] {
 .pure-form input[readonly],
 .pure-form select[readonly],
 .pure-form textarea[readonly] {


@@ -580,15 +526,15 @@ a.pure-button-selected {
  color:#b94a48;
  border-color:#e9322d
 }
  color:#b94a48;
  border-color:#e9322d
 }

-.pure-form input[type=file]:focus:invalid:focus,

 .pure-form input[type=checkbox]:focus:invalid:focus,
 .pure-form input[type=checkbox]:focus:invalid:focus,

+.pure-form input[type=file]:focus:invalid:focus,

 .pure-form input[type=radio]:focus:invalid:focus {
  outline-color:#e9322d
 }
 .pure-form select {
  height:2.25em;
  border:1px solid #ccc;
 .pure-form input[type=radio]:focus:invalid:focus {
  outline-color:#e9322d
 }
 .pure-form select {
  height:2.25em;
  border:1px solid #ccc;

- background:#292929
+ background-color:#fff

 }
 .pure-form select[multiple] {
  height:auto
 }
 .pure-form select[multiple] {
  height:auto


@@ -609,29 +555,31 @@ a.pure-button-selected {
  color:#333;
  border-bottom:1px solid #e5e5e5
 }
  color:#333;
  border-bottom:1px solid #e5e5e5
 }

-.pure-form-stacked input:not([type]),
-.pure-form-stacked input[type=password],
-.pure-form-stacked input[type=email],
-.pure-form-stacked input[type=url],
+.pure-form-stacked input[type=color],

 .pure-form-stacked input[type=date],
 .pure-form-stacked input[type=date],

-.pure-form-stacked input[type=month],
-.pure-form-stacked input[type=time],
-.pure-form-stacked input[type=datetime],

 .pure-form-stacked input[type=datetime-local],
 .pure-form-stacked input[type=datetime-local],

-.pure-form-stacked input[type=week],
-.pure-form-stacked input[type=tel],
-.pure-form-stacked input[type=color],
+.pure-form-stacked input[type=datetime],
+.pure-form-stacked input[type=email],

 .pure-form-stacked input[type=file],
 .pure-form-stacked input[type=file],

+.pure-form-stacked input[type=month],

 .pure-form-stacked input[type=number],
 .pure-form-stacked input[type=number],

+.pure-form-stacked input[type=password],

 .pure-form-stacked input[type=search],
 .pure-form-stacked input[type=search],

+.pure-form-stacked input[type=tel],

 .pure-form-stacked input[type=text],
 .pure-form-stacked input[type=text],

+.pure-form-stacked input[type=time],
+.pure-form-stacked input[type=url],
+.pure-form-stacked input[type=week],

 .pure-form-stacked label,
 .pure-form-stacked select,
 .pure-form-stacked textarea {
  display:block;
 .pure-form-stacked label,
 .pure-form-stacked select,
 .pure-form-stacked textarea {
  display:block;

- margin:0 0 5px
+ margin:.25em 0
+}
+.pure-form-stacked input:not([type]) {
+ display:block;
+ margin:.25em 0

 }
 }

-.pure-form-aligned .pure-help-inline,

 .pure-form-aligned input,
 .pure-form-aligned select,
 .pure-form-aligned textarea,
 .pure-form-aligned input,
 .pure-form-aligned select,
 .pure-form-aligned textarea,


@@ -715,7 +663,6 @@ a.pure-button-selected {
 .pure-form .pure-input-1-4 {
  width:25%
 }
 .pure-form .pure-input-1-4 {
  width:25%
 }

-.pure-form .pure-help-inline,

 .pure-form-message-inline {
  display:inline-block;
  padding-left:.3em;
 .pure-form-message-inline {
  display:inline-block;
  padding-left:.3em;


@@ -728,44 +675,44 @@ a.pure-button-selected {
  color:#666;
  font-size:.875em
 }
  color:#666;
  font-size:.875em
 }

-@media only screen and (max-width : 480px) {
+@media only screen and (max-width :480px) {

  .pure-form button[type=submit] {
   margin:.7em 0 0
  }
  .pure-form input:not([type]),
  .pure-form button[type=submit] {
   margin:.7em 0 0
  }
  .pure-form input:not([type]),

- .pure-form input[type=password],
- .pure-form input[type=email],
- .pure-form input[type=url],
+ .pure-form input[type=color],

  .pure-form input[type=date],
  .pure-form input[type=date],

- .pure-form input[type=month],
- .pure-form input[type=time],
- .pure-form input[type=datetime],

  .pure-form input[type=datetime-local],
  .pure-form input[type=datetime-local],

- .pure-form input[type=week],
- .pure-form input[type=tel],
- .pure-form input[type=color],
+ .pure-form input[type=datetime],
+ .pure-form input[type=email],
+ .pure-form input[type=month],

  .pure-form input[type=number],
  .pure-form input[type=number],

+ .pure-form input[type=password],

  .pure-form input[type=search],
  .pure-form input[type=search],

+ .pure-form input[type=tel],

  .pure-form input[type=text],
  .pure-form input[type=text],

+ .pure-form input[type=time],
+ .pure-form input[type=url],
+ .pure-form input[type=week],

  .pure-form label {
   margin-bottom:.3em;
   display:block
  }
  .pure-group input:not([type]),
  .pure-form label {
   margin-bottom:.3em;
   display:block
  }
  .pure-group input:not([type]),

- .pure-group input[type=password],
- .pure-group input[type=email],
- .pure-group input[type=url],
+ .pure-group input[type=color],

  .pure-group input[type=date],
  .pure-group input[type=date],

- .pure-group input[type=month],
- .pure-group input[type=time],
- .pure-group input[type=datetime],

  .pure-group input[type=datetime-local],
  .pure-group input[type=datetime-local],

- .pure-group input[type=week],
- .pure-group input[type=tel],
- .pure-group input[type=color],
+ .pure-group input[type=datetime],
+ .pure-group input[type=email],
+ .pure-group input[type=month],

  .pure-group input[type=number],
  .pure-group input[type=number],

+ .pure-group input[type=password],

  .pure-group input[type=search],
  .pure-group input[type=search],

- .pure-group input[type=text] {
+ .pure-group input[type=tel],
+ .pure-group input[type=text],
+ .pure-group input[type=time],
+ .pure-group input[type=url],
+ .pure-group input[type=week] {

   margin-bottom:0
  }
  .pure-form-aligned .pure-control-group label {
   margin-bottom:0
  }
  .pure-form-aligned .pure-control-group label {


@@ -775,9 +722,8 @@ a.pure-button-selected {
   width:100%
  }
  .pure-form-aligned .pure-controls {
   width:100%
  }
  .pure-form-aligned .pure-controls {

-  margin:1.5em 0 0
+  margin:1.5em 0 0 0

  }
  }

- .pure-form .pure-help-inline,

  .pure-form-message,
  .pure-form-message-inline {
   display:block;
  .pure-form-message,
  .pure-form-message-inline {
   display:block;


@@ -785,6 +731,9 @@ a.pure-button-selected {
   padding:.2em 0 .8em
  }
 }
   padding:.2em 0 .8em
  }
 }

+.pure-menu {
+ box-sizing:border-box
+}

 .pure-menu-fixed {
  position:fixed;
  left:0;
 .pure-menu-fixed {
  position:fixed;
  left:0;


@@ -822,7 +771,6 @@ a.pure-button-selected {
 .pure-menu-horizontal .pure-menu-item,
 .pure-menu-horizontal .pure-menu-separator {
  display:inline-block;
 .pure-menu-horizontal .pure-menu-item,
 .pure-menu-horizontal .pure-menu-separator {
  display:inline-block;

- zoom:1;

  vertical-align:middle
 }
 .pure-menu-item .pure-menu-item {
  vertical-align:middle
 }
 .pure-menu-item .pure-menu-item {


@@ -869,13 +817,8 @@ a.pure-button-selected {
  white-space:nowrap;
  overflow-y:hidden;
  overflow-x:auto;
  white-space:nowrap;
  overflow-y:hidden;
  overflow-x:auto;

- -ms-overflow-style:none;
- -webkit-overflow-scrolling:touch;

  padding:.5em 0
 }
  padding:.5em 0
 }

-.pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar {
- display:none
-}

 .pure-menu-horizontal .pure-menu-children .pure-menu-separator,
 .pure-menu-separator {
  background-color:#ccc;
 .pure-menu-horizontal .pure-menu-children .pure-menu-separator,
 .pure-menu-separator {
  background-color:#ccc;


@@ -901,7 +844,6 @@ a.pure-button-selected {
 .pure-menu-children {
  background-color:#fff
 }
 .pure-menu-children {
  background-color:#fff
 }

-.pure-menu-disabled,

 .pure-menu-heading,
 .pure-menu-link {
  padding:.5em 1em
 .pure-menu-heading,
 .pure-menu-link {
  padding:.5em 1em


@@ -910,18 +852,21 @@ a.pure-button-selected {
  opacity:.5
 }
 .pure-menu-disabled .pure-menu-link:hover {
  opacity:.5
 }
 .pure-menu-disabled .pure-menu-link:hover {

- background-color:transparent
+ background-color:transparent;
+ cursor:default

 }
 .pure-menu-active>.pure-menu-link,
 .pure-menu-link:focus,
 .pure-menu-link:hover {
  background-color:#eee
 }
 }
 .pure-menu-active>.pure-menu-link,
 .pure-menu-link:focus,
 .pure-menu-link:hover {
  background-color:#eee
 }

-.pure-menu-selected .pure-menu-link,
-.pure-menu-selected .pure-menu-link:visited {
+.pure-menu-selected>.pure-menu-link,
+.pure-menu-selected>.pure-menu-link:visited {

  color:#000
 }
 .pure-table {
  color:#000
 }
 .pure-table {

+ border-collapse:collapse;
+ border-spacing:0;

  empty-cells:show;
  border:1px solid #cbcbcb
 }
  empty-cells:show;
  border:1px solid #cbcbcb
 }


@@ -940,10 +885,6 @@ a.pure-button-selected {
  overflow:visible;
  padding:.5em 1em
 }
  overflow:visible;
  padding:.5em 1em
 }

-.pure-table td:first-child,
-.pure-table th:first-child {
- border-left-width:0
-}

 .pure-table thead {
  background-color:#e0e0e0;
  color:#000;
 .pure-table thead {
  background-color:#e0e0e0;
  color:#000;


@@ -953,7 +894,9 @@ a.pure-button-selected {
 .pure-table td {
  background-color:transparent
 }
 .pure-table td {
  background-color:transparent
 }

-.pure-table-odd td,
+.pure-table-odd td {
+ background-color:#f2f2f2
+}

 .pure-table-striped tr:nth-child(2n-1) td {
  background-color:#f2f2f2
 }
 .pure-table-striped tr:nth-child(2n-1) td {
  background-color:#f2f2f2
 }


@@ -965,23 +908,35 @@ a.pure-button-selected {
 }
 .pure-table-horizontal td,
 .pure-table-horizontal th {
 }
 .pure-table-horizontal td,
 .pure-table-horizontal th {

- border-width:0 0 1px;
+ border-width:0 0 1px 0;

  border-bottom:1px solid #cbcbcb
 }
 .pure-table-horizontal tbody>tr:last-child>td {
  border-bottom-width:0
 }
  border-bottom:1px solid #cbcbcb
 }
 .pure-table-horizontal tbody>tr:last-child>td {
  border-bottom-width:0
 }

+
+/* custom styles */
+

 :root {
 :root {

- --slide:250px
-}
+ --slide: 25em;
+ --accent: #129fea;
+ --dark-gray: #242424;
+ --light-gray: #cad2d3;
+ --darker-gray: #191919;
+ --black-opacity: rgba(0,0,0,0.4);
+ --light: white;
+}
+

 body {
 body {

- color:#aaa;
- background:#292929
+ color:var(--light-gray);
+ background: var(--dark-gray);

 }
 }

+

 .pure-img-responsive {
  max-width:100%;
  height:auto
 }
 .pure-img-responsive {
  max-width:100%;
  height:auto
 }

+

 #layout,
 #menu,
 .menu-link {
 #layout,
 #menu,
 .menu-link {


@@ -1006,47 +961,49 @@ body {
 .content {
  margin:0 auto;
  padding:0 2em;
 .content {
  margin:0 auto;
  padding:0 2em;

- max-width:800px;
- margin-bottom:50px;
+ max-width: 100em;
+ margin-bottom: 5em;

  line-height:1.6em
 }
 .header {
  margin:0;
  line-height:1.6em
 }
 .header {
  margin:0;

- color:#333;
+ color: var(--dark-gray);

  text-align:center
 }
 .header h1 {
  text-align:center
 }
 .header h1 {

- color:#2497e3;
+ color: var(--accent);

  margin:.4em 0;
  margin:.4em 0;

- font-size:2em;
- font-weight:300;
- font-family:fantasy
+ padding-top: 0.5em;
+ font-size: 2em;
+ font-weight: bold;
+ font-variant-caps: small-caps

 }
 .header h2 {
  font-weight:300;
 }
 .header h2 {
  font-weight:300;

- color:#ccc;
+ color: var(--light-gray);

  padding:0;
  margin-top:0
 }
 .content-subhead {
  padding:0;
  margin-top:0
 }
 .content-subhead {

- margin:50px 0 20px 0;
+ margin: 5em 0 2em 0;

  font-weight:300;
  font-weight:300;

- color:#888
+ color: var(--light-gray)

 }
 #menu {
  margin-left:calc(var(--slide)* -1);
  width:var(--slide);
 }
 #menu {
  margin-left:calc(var(--slide)* -1);
  width:var(--slide);

+ height: 100vh;

  position:fixed;
  top:0;
  left:0;
  bottom:0;
  z-index:1000;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  z-index:1000;

- background:#191818;
+ background: var(--darker-gray);

  overflow-y:auto;
  -webkit-overflow-scrolling:touch
 }
 #menu a {
  overflow-y:auto;
  -webkit-overflow-scrolling:touch
 }
 #menu a {

- color:#888;
+ color: var(--light-gray);

  border:none;
  padding:.6em 0.3em .6em 0.6em
 }
  border:none;
  padding:.6em 0.3em .6em 0.6em
 }


@@ -1057,24 +1014,24 @@ body {
 }
 #menu .pure-menu ul,
 #menu .pure-menu .menu-item-divided {
 }
 #menu .pure-menu ul,
 #menu .pure-menu .menu-item-divided {

- border-top:1px solid #333
+ border-top: 0.1em solid var(--dark-gray)

 }
 #menu .pure-menu li a:hover,
 #menu .pure-menu li a:focus {
 }
 #menu .pure-menu li a:hover,
 #menu .pure-menu li a:focus {

- background:#333;
- color:#aaa
+ background: var(--dark-gray);
+ color: var(--light-gray);

 }
 #menu .pure-menu-selected,
 #menu .pure-menu-heading {
 }
 #menu .pure-menu-selected,
 #menu .pure-menu-heading {

- background:#1f8dd6
+ background: var(--accent);

 }
 #menu .pure-menu-selected a {
 }
 #menu .pure-menu-selected a {

- color:#fff
+ color: var(--light)

 }
 #menu .pure-menu-heading {
  letter-spacing:.15em;
  text-transform:uppercase;
 }
 #menu .pure-menu-heading {
  letter-spacing:.15em;
  text-transform:uppercase;

- color:#fff;
+ color: var(--light);

  margin:0;
  text-align:center;
  padding:.6em 0.3em .6em 0.3em
  margin:0;
  text-align:center;
  padding:.6em 0.3em .6em 0.3em


@@ -1084,9 +1041,9 @@ body {
  display:block;
  top:0;
  left:0;
  display:block;
  top:0;
  left:0;

- background:#000;
+ background: black;

  background:rgba(0,0,0,0.42);
  background:rgba(0,0,0,0.42);

- font-size:10px;
+ font-size: 1em;

  z-index:10;
  width:2em;
  height:auto;
  z-index:10;
  width:2em;
  height:auto;


@@ -1094,7 +1051,7 @@ body {
 }
 .menu-link:hover,
 .menu-link:focus {
 }
 .menu-link:hover,
 .menu-link:focus {

- background:#000
+ background: black;

 }
 .menu-link span {
  position:relative;
 }
 .menu-link span {
  position:relative;


@@ -1103,7 +1060,7 @@ body {
 .menu-link span,
 .menu-link span:before,
 .menu-link span:after {
 .menu-link span,
 .menu-link span:before,
 .menu-link span:after {

- background-color:#2497e3;
+ background-color: var(--accent);

  width:100%;
  height:.2em
 }
  width:100%;
  height:.2em
 }


@@ -1138,110 +1095,194 @@ body {
   left:var(--slide)
  }
 }
   left:var(--slide)
  }
 }

-@media(max-width:48em) {
- #layout.active {
-  position:relative;
-  left:var(--slide)
- }
-}
+
+/* Sliders */
+

 input[type=range] {
  -webkit-appearance:none;
  margin:0 0 0 0;
  width:100%;
 input[type=range] {
  -webkit-appearance:none;
  margin:0 0 0 0;
  width:100%;

- background:#292929
+ background: transparent;

 }
 }

+

 input[type=range]:focus {
  outline:none
 }
 input[type=range]:focus {
  outline:none
 }

+

 input[type=range]::-webkit-slider-runnable-track {
  width:100%;
 input[type=range]::-webkit-slider-runnable-track {
  width:100%;

- height:4px;
+ height: 0.4em;

  cursor:pointer;
  animate:0.2s;
  cursor:pointer;
  animate:0.2s;

- box-shadow:0 0 0px #000000;
- background:#2497E3;
- border-radius:3px;
- border:0 solid #000000
+ box-shadow: none
+ background: var(--accent);
+ border-radius: 0.3em;
+ border: none

 }
 }

+

 input[type=range]::-webkit-slider-thumb {
 input[type=range]::-webkit-slider-thumb {

- box-shadow:0 0 0px #000000;
- border:1px solid rgb(148,148,148);
- height:20px;
- width:20px;
- border-radius:40px;
- background:#F0F0F0;
+ box-shadow: none;
+ border: 0.1em solid var(--light-gray)
+ height: 2em;
+ width: 2em;
+ border-radius: 2em;
+ background: var(--light-gray)

  cursor:pointer;
  -webkit-appearance:none;
  cursor:pointer;
  -webkit-appearance:none;

- margin-top:-8.5px
+ margin-top: 0.85em

 }
 }

+

 input[type=range]:focus::-webkit-slider-runnable-track {
 input[type=range]:focus::-webkit-slider-runnable-track {

- background:#2497E3
+ background: var(--accent)

 }
 }

+

 input[type=range]::-moz-range-track {
 input[type=range]::-moz-range-track {

- width:100%;
- height:4px;
- cursor:pointer;
+ width: 100%;
+ height: 0.4em;
+ cursor: pointer;

  animate:0.2s;
  animate:0.2s;

- box-shadow:0 0 0px #000000;
- background:#2497E3;
- border-radius:3px;
- border:0 solid #000000
+ box-shadow: none;
+ background: var(--accent);
+ border-radius: 0.3em;
+ border: none

 }
 }

+

 input[type=range]::-moz-range-thumb {
 input[type=range]::-moz-range-thumb {

- box-shadow:0 0 0px #000000;
- border:1px solid #2497E3;
- height:20px;
- width:20px;
- border-radius:30px;
- background:#A1D0FF;
+ box-shadow: none;
+ border: 0.1em solid var(--accent);
+ height: 2em;
+ width: 2em;
+ border-radius: 2em;
+ background: var(--light-gray);

  cursor:pointer
 }
  cursor:pointer
 }

+

 input[type=range]::-ms-track {
  width:100%;
 input[type=range]::-ms-track {
  width:100%;

- height:4px;
+ height: 0.4em;

  cursor:pointer;
  animate:0.2s;
  background:transparent;
  border-color:transparent;
  color:transparent
 }
  cursor:pointer;
  animate:0.2s;
  background:transparent;
  border-color:transparent;
  color:transparent
 }

+

 input[type=range]::-ms-fill-lower {
 input[type=range]::-ms-fill-lower {

- background:#2497E3;
- border:0 solid #000000;
- border-radius:6px;
- box-shadow:0 0 0px #000000
+ background: var(--light-gray);
+ border: none;
+ border-radius: 0.6em;
+ box-shadow: none

 }
 }

+

 input[type=range]::-ms-fill-upper {
 input[type=range]::-ms-fill-upper {

- background:#2497E3;
- border:0 solid #000000;
- border-radius:6px;
- box-shadow:0 0 0px #000000
+ background: var(--light-gray);
+ border: none;
+ border-radius: 0.6em;
+ box-shadow: none

 }
 }

+

 input[type=range]::-ms-thumb {
 input[type=range]::-ms-thumb {

- margin-top:1px;
- box-shadow:0 0 0px #000000;
- border:1px solid #2497E3;
- height:20px;
- width:20px;
- border-radius:40px;
- background:#A1D0FF;
+ margin-top:0.1em;
+ box-shadow: nonel
+ border: 0.1em solid var(--accent);
+ height: 2em;
+ width: 2em;
+ border-radius: 2em;
+ background: var(--light-gray);

  cursor:pointer
 }
  cursor:pointer
 }

+

 input[type=range]:focus::-ms-fill-lower {
 input[type=range]:focus::-ms-fill-lower {

- background:#2497E3
+ background: var(--light-gray);

 }
 }

+

 input[type=range]:focus::-ms-fill-upper {
 input[type=range]:focus::-ms-fill-upper {

- background:#2497E3
+ background: var(--light-gray);

 }
 }

+
+

 .hide {
  display:none
 }
 .hide {
  display:none
 }

+
+/* footer */
+

 footer {
 footer {

- text-align:center
+ text-align:center;
+ position: absolute;
+ bottom: 1rem;
+ width: 100%

 }
 }

+footer a {
+ display: inline-block;
+ text-decoration: none
+}
+
+/* notification button */
+

 .notification {
 .notification {

+  position: fixed;
+  right: 0.5em;
+  top: 0.5em;
+  background-color: var(--dark-gray);
+  z-index:200;
+  word-wrap: anywhere;

   float: right;
  }
   float: right;
  }

+
+/* notification message */
+
+.message {
+  position: fixed;
+  right: 1em;
+  bottom: 0.5em;
+  z-index:200;
+  float: right;
+  color: var(--light);
+}
+
+.message-text {
+  background-color: var(--dark-gray);
+  border:0.2em solid var(--accent);
+  box-shadow:inset 0 0.1em 1.1em 0 var(--accent);
+  word-wrap: anywhere;
+  font-weight: bolder;
+  font-size: 120%;
+  padding: 1em;
+  border-radius: 0.5em;
+  position: relative;
+}
+
+.close-button {
+    content: 'X';
+    position: absolute;
+    right: -1em;
+    top: -1em;
+    width: 1.2em;
+    padding: 0.1em 0.1em 0.1em 0.1em;
+    text-decoration: none;
+    text-shadow: none;
+    text-align: center;
+    font-weight: bold;
+    background: var(--dark-gray);
+    color: var(--light);
+    border: 0.2em solid var(--accent);
+    border-radius: 1em;
+    box-shadow:inset 0 0.1em 1.1em 0 var(--accent);
+}
+
+.fadeout {
+    animation: fadeOut 5s ease;
+    opacity:0;
+}
+
+@keyframes fadeOut {
+  0% {opacity:1;}
+  100% {opacity:0;}
+}
+
+/* modal dialog */ 
+ 

 .modal {
   position: fixed; /* Stay in place */
   z-index: 2000; /* Sit on top */
 .modal {
   position: fixed; /* Stay in place */
   z-index: 2000; /* Sit on top */


@@ -1250,22 +1291,22 @@ footer {
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */

-  background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
+  background-color: var(--black-opacity); /* Black w/ opacity */

 }
 .modal-content {
   -webkit-appearance:button;
   cursor:pointer;
   letter-spacing:.05em;
   text-transform:uppercase;
 }
 .modal-content {
   -webkit-appearance:button;
   cursor:pointer;
   letter-spacing:.05em;
   text-transform:uppercase;

-  color:#aaa;
+  color:var(--light-gray);

   font-size:90%;
   font-size:90%;

-  border:2px solid #2497e3;
+  border:0.2em solid var(--accent);

   border-radius:6px;
   border-radius:6px;

-  box-shadow:inset 0 1px 11px 0 #1f8dd6
-  padding: 1rem;
+  box-shadow:inset 0 0.1em 1.1em 0 var(--accent);
+  padding: 1em;

   width: max-content;
   min-width: 30%;
   width: max-content;
   min-width: 30%;

-  background-color: #333;
+  background-color: var(--dark-gray);

   margin: 10% auto;
   padding: 1rem
 }
   margin: 10% auto;
   padding: 1rem
 }


@@ -1273,76 +1314,197 @@ footer {
   font-weight: bold;
   font-size: 120%;
   text-align: center;
   font-weight: bold;
   font-size: 120%;
   text-align: center;

-  border-bottom: lightgray solid 1px;
+  border-bottom: var(--accent) solid 0.1em;
+}
+
+/* overlapping hint button */
+
+.hinted {
+  position: relative;

 }
 }

+

 .hint {
   cursor: pointer;
   width: 1rem;
   background: transparent;
 .hint {
   cursor: pointer;
   width: 1rem;
   background: transparent;

-  color: #aaa;
-  font-size: 90%;
+  color: var(--dark-gray);
+  padding: .5em .6em;

   border: none;
   box-shadow: none;
   border: none;
   box-shadow: none;

-  display: inline-block;
-  vertical-align: super;
-  margin-left: -2rem;
-  z-index:1;
-}
+  position: absolute;
+  top: 0em;
+  right: 0em;
+  line-height: 1.15em;
+  font-size: 100%;
+}
+
+/* Spacing */
+fieldset .pure-u-1 {
+  margin-top: 1.5em
+}
+
+/* checkbox as a switch */
+

 input[type=checkbox].switch {
     display: none;
 }
 label.switch.socket {
     position: relative;
     width: auto;
 input[type=checkbox].switch {
     display: none;
 }
 label.switch.socket {
     position: relative;
     width: auto;

-    text-indent: 2.5em;
+    padding-left: 4em;

 }
 span.switch.slider {
   display: inline-block;
 }
 label.switch.socket span.switch.slider:before {
     content: "";
 }
 span.switch.slider {
   display: inline-block;
 }
 label.switch.socket span.switch.slider:before {
     content: "";

-    color: gray;
-    width: 4em;
-    height: 2em;
-    border-radius: 5em;
+    color: var(--darkgray);
+    width: 3em;
+    height: 1.4em;
+    border-radius: 1em;

     position: absolute;
     left: 0;
     position: absolute;
     left: 0;

-    border:2px solid #2497e3;
-    box-shadow:inset 0 1px 11px 0 #1f8dd6
+    top: 0;
+    border:0.2em solid var(--accent);
+    box-shadow:inset 0 0.1em 1.1em 0 var(--accent)

 }
 label.switch span.switch.slider:after {
     content: "";
 }
 label.switch span.switch.slider:after {
     content: "";

-    width: 1.5rem;
-    height: 1.5rem;
-    background: #2497e3;
-    border-radius: 5.5ex;
+    width: 1rem;
+    height: 1rem;
+    background: var(--accent);
+    border-radius: 1em;

     position: absolute;
     left: 0.4rem;
     top: 0.4rem;
     transition: 0.2s;
 }
 label.switch.socket input[type=checkbox]:checked + span.slider:before {
     position: absolute;
     left: 0.4rem;
     top: 0.4rem;
     transition: 0.2s;
 }
 label.switch.socket input[type=checkbox]:checked + span.slider:before {

-    color: White;
-    background: #0a3660;
-    content: "";
-    background: D;
+    background: var(--light-gray);

 }
 }

+

 label.switch.socket input[type=checkbox]:checked + span.slider:after {
 label.switch.socket input[type=checkbox]:checked + span.slider:after {

-    background: white;
-    left: 2.4em;
+    background: var(--light);
+    left: 1.9em;
+}
+
+/* Time setter */
+
+.inline-input.inline-input.inline-input {
+  display: inline-block;
+  width: calc(100% - 5em)
+}
+
+.send-button {
+ display:inline-block;
+ font-family:inherit;
+ font-size:100%;
+ line-height: 1.15em;
+ padding: .5em 1em;
+ color: var(--dark-gray);
+ border:none transparent;
+ background-color: var(--light-gray);
+ text-decoration:none;
+ border-radius:2px;
+ vertical-align: middle;
+ margin-left: 1em;
+ width: 2em;
+ text-align: center;
+}
+
+.pure-button {
+ color: var(--dark-gray);
+ border:none transparent;
+ background-color: var(--light-gray);
+}
+
+/* weekdays */
+
+.week {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+.week td {
+  padding: 0

 }
 .weekday, .weekday-selected {
 }
 .weekday, .weekday-selected {

-    font-size: 110%;
+    font-size: min(4vw, 100%rem);

     text-align: center;
     text-align: center;

-    margin: 0.5em;
-    width: 4em;
-    height: 1.5em;
+    margin: 0.2vw;
+    padding: 0.2em;

     border-radius: 5em;
     border-radius: 5em;

-    border:2px solid #2497e3;
-    box-shadow:inset 0 1px 11px 0 #1f8dd6;
-    color: gray
+    border:0.2em solid var(--accent);
+    box-shadow:inset 0 0.1em 1.1em 0 var(--accent);
+    color: var(--light-gray)

 }
 .weekday-selected {
 }
 .weekday-selected {

-    background: #0a3660;
-    color: white
+    background: var(--light-gray);
+    color: var(--darker-gray);
+}
+
+/* Hide arrows */
+
+input[type=number] {
+  appearance: textfield;
+}
+
+/* fill all screen */
+
+#layout { 
+  min-height: 100vh; 
+}
+
+/* Text table */
+
+.texttable {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}
+
+.texttable td {
+  padding: 0
+}
+
+.value-name.value-name {
+  width: 50%;
+  padding-right: 1em;
+}
+
+/* Config */
+
+input[type=file]::file-selector-button {
+    display: none;
+}
+
+input[type=file]::-webkit-file-upload-button {
+    display: block;
+    width: 0;
+    height: 0;
+    margin-left: -100%;
+}
+
+input[type=file]::-ms-browse {
+    display: none;
+}
+
+.row-button.row-button.row-button {
+  display: inline-block;
+  margin: 0 2em 1em 2em
+}
+
+/* fonts */
+
+@font-face {
+  font-family: "icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/icons.woff2") format("woff2");
+}
+.hint, .icon {
+  font-family: icons;
+}
+.icon {
+  margin-right: 0.5em;

 }
 }