X-Git-Url: https://git.rvb.name/esp-clock.git/blobdiff_plain/e1b7c70070cda97937a405a2c9e48d190b4391ef..c8479d5c8f2df8ff0395a0b49da752328581e5b1:/data/web/style.css?ds=sidebyside

diff --git a/data/web/style.css b/data/web/style.css
index 2cbe74b..fad4817 100644
--- 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
 }
-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
 }
-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] {
- border-bottom:1px dotted
+ border-bottom:none;
+ text-decoration:underline;
+ -webkit-text-decoration:underline dotted;
+ text-decoration:underline dotted
 }
 b,
-optgroup,
 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%
@@ -85,117 +60,103 @@ sup {
  position:relative;
  vertical-align:baseline
 }
-sup {
- top:-.5em
-}
 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 {
- color:inherit;
- font:inherit
+ font-family:inherit;
+ font-size:100%;
+ line-height:1.15;
+ margin:0
 }
-.pure-button,
+button,
 input {
- line-height:normal
-}
-button {
  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
 }
-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;
- vertical-align:middle;
  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
 }
-input[type=search] {
+[type=search] {
  -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
 }
-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] {
@@ -207,30 +168,14 @@ legend {
  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;
- -webkit-flex-flow:row wrap;
- -ms-flex-flow:row wrap;
  flex-flow:row wrap;
- -webkit-align-content:flex-start;
- -ms-flex-line-pack: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,
@@ -277,16 +222,11 @@ legend {
 .pure-u-7-8,
 .pure-u-8-24,
 .pure-u-9-24 {
+ display:inline-block;
  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%
@@ -392,16 +332,15 @@ legend {
 }
 .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;
- -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;
@@ -413,32 +352,36 @@ legend {
 }
 .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;
- color:#444;
  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,
+.pure-button:focus,
 .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))
 }
+.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;
- border-color:#000\9
+ border-color:#000
 }
 .pure-button-disabled,
 .pure-button-disabled:active,
@@ -447,7 +390,6 @@ legend {
 .pure-button[disabled] {
  border:none;
  background-image:none;
- filter:alpha(opacity=40);
  opacity:.4;
  cursor:not-allowed;
  box-shadow:none;
@@ -464,13 +406,8 @@ a.pure-button-selected {
  color:#fff
 }
 .pure-button-group .pure-button {
- letter-spacing:normal;
- word-spacing:normal;
- vertical-align:top;
- text-rendering:auto;
  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 {
@@ -482,28 +419,27 @@ a.pure-button-selected {
  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=month],
-.pure-form input[type=time],
-.pure-form input[type=datetime],
 .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=password],
 .pure-form input[type=search],
+.pure-form input[type=tel],
 .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 {
- background:#292828;
  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
 }
@@ -512,61 +448,71 @@ a.pure-button-selected {
  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] {
- 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=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=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=password]:focus,
 .pure-form input[type=search]:focus,
+.pure-form input[type=tel]: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;
- 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=file]: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 {
+ margin:.5em 0;
  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=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=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=password][disabled],
 .pure-form input[type=search][disabled],
+.pure-form input[type=tel][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 input:not([type])[disabled] {
+ cursor:not-allowed;
+ background-color:#eaeded;
+ color:#cad2d3
+}
 .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
 }
-.pure-form input[type=file]: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;
- background:#292929
+ background-color:#fff
 }
 .pure-form select[multiple] {
  height:auto
@@ -609,29 +555,31 @@ a.pure-button-selected {
  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=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=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=month],
 .pure-form-stacked input[type=number],
+.pure-form-stacked input[type=password],
 .pure-form-stacked input[type=search],
+.pure-form-stacked input[type=tel],
 .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;
- 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,
@@ -715,7 +663,6 @@ a.pure-button-selected {
 .pure-form .pure-input-1-4 {
  width:25%
 }
-.pure-form .pure-help-inline,
 .pure-form-message-inline {
  display:inline-block;
  padding-left:.3em;
@@ -728,44 +675,44 @@ a.pure-button-selected {
  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 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=month],
- .pure-form input[type=time],
- .pure-form input[type=datetime],
  .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=password],
  .pure-form input[type=search],
+ .pure-form input[type=tel],
  .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-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=month],
- .pure-group input[type=time],
- .pure-group input[type=datetime],
  .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=password],
  .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 {
@@ -775,9 +722,8 @@ a.pure-button-selected {
   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;
@@ -785,6 +731,9 @@ a.pure-button-selected {
   padding:.2em 0 .8em
  }
 }
+.pure-menu {
+ box-sizing:border-box
+}
 .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;
- zoom:1;
  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;
- -ms-overflow-style:none;
- -webkit-overflow-scrolling:touch;
  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;
@@ -901,7 +844,6 @@ a.pure-button-selected {
 .pure-menu-children {
  background-color:#fff
 }
-.pure-menu-disabled,
 .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 {
- 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-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 {
+ border-collapse:collapse;
+ border-spacing:0;
  empty-cells:show;
  border:1px solid #cbcbcb
 }
@@ -940,10 +885,6 @@ a.pure-button-selected {
  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;
@@ -953,7 +894,9 @@ a.pure-button-selected {
 .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
 }
@@ -965,23 +908,33 @@ a.pure-button-selected {
 }
 .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
 }
+
+/* custom styles */
+
 :root {
- --slide:250px
+ --slide: 25em;
+ --blue: #129fea;
+ --darkgray: #242424;
+ --lightgray: #cad2d3;
+ --darkergray: #191919;
 }
+
 body {
  color:#aaa;
- background:#292929
+ background: var(--darkgray);
 }
+
 .pure-img-responsive {
  max-width:100%;
  height:auto
 }
+
 #layout,
 #menu,
 .menu-link {
@@ -1006,21 +959,22 @@ body {
 .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;
- color:#333;
+ color: var(--darkgray);
  text-align:center
 }
 .header h1 {
- color:#2497e3;
+ color: var(--blue);
  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;
@@ -1029,24 +983,25 @@ body {
  margin-top:0
 }
 .content-subhead {
- margin:50px 0 20px 0;
+ margin: 5em 0 2em 0;
  font-weight:300;
- color:#888
+ color: var(--lightgray)
 }
 #menu {
  margin-left:calc(var(--slide)* -1);
  width:var(--slide);
+ height: 100vh;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  z-index:1000;
- background:#191818;
+ background: var(--darkergray);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch
 }
 #menu a {
- color:#888;
+ color: var(--lightgray);
  border:none;
  padding:.6em 0.3em .6em 0.6em
 }
@@ -1057,24 +1012,24 @@ body {
 }
 #menu .pure-menu ul,
 #menu .pure-menu .menu-item-divided {
- border-top:1px solid #333
+ border-top: 0.1em solid var(--darkgray)
 }
 #menu .pure-menu li a:hover,
 #menu .pure-menu li a:focus {
- background:#333;
- color:#aaa
+ background: var(--darkgray);
+ color: var(--lightgray);
 }
 #menu .pure-menu-selected,
 #menu .pure-menu-heading {
- background:#1f8dd6
+ background: var(--blue);
 }
 #menu .pure-menu-selected a {
- color:#fff
+ color: white
 }
 #menu .pure-menu-heading {
  letter-spacing:.15em;
  text-transform:uppercase;
- color:#fff;
+ color: white;
  margin:0;
  text-align:center;
  padding:.6em 0.3em .6em 0.3em
@@ -1084,9 +1039,9 @@ body {
  display:block;
  top:0;
  left:0;
- background:#000;
+ background: black;
  background:rgba(0,0,0,0.42);
- font-size:10px;
+ font-size: 1em;
  z-index:10;
  width:2em;
  height:auto;
@@ -1094,7 +1049,7 @@ body {
 }
 .menu-link:hover,
 .menu-link:focus {
- background:#000
+ background: black;
 }
 .menu-link span {
  position:relative;
@@ -1103,7 +1058,7 @@ body {
 .menu-link span,
 .menu-link span:before,
 .menu-link span:after {
- background-color:#2497e3;
+ background-color: var(--blue);
  width:100%;
  height:.2em
 }
@@ -1138,104 +1093,118 @@ body {
   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%;
- background:#292929
+ background: transparent;
 }
+
 input[type=range]:focus {
  outline:none
 }
+
 input[type=range]::-webkit-slider-runnable-track {
  width:100%;
- height:4px;
+ height: 0.4em;
  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(--blue);
+ border-radius: 0.3em;
+ border: none
 }
+
 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(--lightgray)
+ height: 2em;
+ width: 2em;
+ border-radius: 2em;
+ background: var(--lightgray)
  cursor:pointer;
  -webkit-appearance:none;
- margin-top:-8.5px
+ margin-top: 0.85em
 }
+
 input[type=range]:focus::-webkit-slider-runnable-track {
- background:#2497E3
+ background: var(--blue)
 }
+
 input[type=range]::-moz-range-track {
- width:100%;
- height:4px;
- cursor:pointer;
+ width: 100%;
+ height: 0.4em;
+ 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(--blue);
+ border-radius: 0.3em;
+ border: none
 }
+
 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(--blue);
+ height: 2em;
+ width: 2em;
+ border-radius: 2em;
+ background: var(--lightgray);
  cursor:pointer
 }
+
 input[type=range]::-ms-track {
  width:100%;
- height:4px;
+ height: 0.4em;
  cursor:pointer;
  animate:0.2s;
  background:transparent;
  border-color:transparent;
  color:transparent
 }
+
 input[type=range]::-ms-fill-lower {
- background:#2497E3;
- border:0 solid #000000;
- border-radius:6px;
- box-shadow:0 0 0px #000000
+ background: var(--lightgray);
+ border: none;
+ border-radius: 0.6em;
+ box-shadow: none
 }
+
 input[type=range]::-ms-fill-upper {
- background:#2497E3;
- border:0 solid #000000;
- border-radius:6px;
- box-shadow:0 0 0px #000000
+ background: var(--lightgray);
+ border: none;
+ border-radius: 0.6em;
+ box-shadow: none
 }
+
 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(--blue);
+ height: 2em;
+ width: 2em;
+ border-radius: 2em;
+ background: var(--lightgray);
  cursor:pointer
 }
+
 input[type=range]:focus::-ms-fill-lower {
- background:#2497E3
+ background: var(--lightgray);
 }
+
 input[type=range]:focus::-ms-fill-upper {
- background:#2497E3
+ background: var(--lightgray);
 }
+
+
 .hide {
  display:none
 }
+
+/* footer */
+
 footer {
  text-align:center;
  position: absolute;
@@ -1246,9 +1215,72 @@ footer a {
  display: inline-block;
  text-decoration: none
 }
+
+/* notification button */
+
 .notification {
+  position: fixed;
+  right: 0.5em;
+  top: 0.5em;
+  background-color: var(--darkgray);
+  z-index:200;
+  word-wrap: anywhere;
   float: right;
  }
+
+/* notification message */
+
+.message {
+  position: fixed;
+  right: 1em;
+  bottom: 0.5em;
+  z-index:200;
+  float: right;
+  color:#fff;
+}
+
+.message-text {
+  background-color: var(--darkgray);
+  border:0.2em solid var(--blue);
+  box-shadow:inset 0 0.1em 1.1em 0 var(--blue);
+  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(--darkgray);
+    color: white;
+    border: 0.2em solid var(--blue);
+    border-radius: 1em;
+    box-shadow:inset 0 0.1em 1.1em 0 var(--blue);
+}
+
+.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 */
@@ -1264,15 +1296,15 @@ footer a {
   cursor:pointer;
   letter-spacing:.05em;
   text-transform:uppercase;
-  color:#aaa;
+  color:var(--lightgray);
   font-size:90%;
-  border:2px solid #2497e3;
+  border:0.2em solid var(--blue);
   border-radius:6px;
-  box-shadow:inset 0 1px 11px 0 #1f8dd6
-  padding: 1rem;
+  box-shadow:inset 0 0.1em 1.1em 0 var(--blue);
+  padding: 1em;
   width: max-content;
   min-width: 30%;
-  background-color: #333;
+  background-color: var(--darkgray);
   margin: 10% auto;
   padding: 1rem
 }
@@ -1280,28 +1312,44 @@ footer a {
   font-weight: bold;
   font-size: 120%;
   text-align: center;
-  border-bottom: lightgray solid 1px;
+  border-bottom: var(--blue) solid 0.1em;
+}
+
+/* overlapping hint button */
+
+.hinted {
+  position: relative;
 }
+
 .hint {
   cursor: pointer;
   width: 1rem;
   background: transparent;
-  color: #aaa;
-  font-size: 90%;
+  color: var(--darkgray);
+  padding: .5em .6em;
   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;
-    text-indent: 2.5em;
+    padding-left: 4em;
 }
 span.switch.slider {
   display: inline-block;
@@ -1309,47 +1357,128 @@ span.switch.slider {
 label.switch.socket span.switch.slider:before {
     content: "";
     color: gray;
-    width: 4em;
-    height: 2em;
-    border-radius: 5em;
+    width: 3em;
+    height: 1.4em;
+    border-radius: 1em;
     position: absolute;
     left: 0;
-    border:2px solid #2497e3;
-    box-shadow:inset 0 1px 11px 0 #1f8dd6
+    top: 0;
+    border:0.2em solid var(--blue);
+    box-shadow:inset 0 0.1em 1.1em 0 var(--blue)
 }
 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(--blue);
+    border-radius: 1em;
     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(--lightgray);
 }
+
 label.switch.socket input[type=checkbox]:checked + span.slider:after {
     background: white;
-    left: 2.4em;
+    left: 1.9em;
+}
+
+/* Time setter */
+
+.timesetter {
+  display: inline;
+}
+
+.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:rgba(0,0,0,.8);
+ border:none transparent;
+ background-color:#e6e6e6;
+ text-decoration:none;
+ border-radius:2px;
+ vertical-align: middle;
+ margin-left: 1em;
+ width: 2em;
+ text-align: center;
+}
+
+/* weekdays */
+
+.week {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+.week td {
+  padding: 0
 }
 .weekday, .weekday-selected {
-    font-size: 110%;
+    font-size: min(4vw, 100%rem);
     text-align: center;
-    margin: 0.5em;
-    width: 4em;
-    height: 1.5em;
+    margin: 0.2vw;
+    padding: 0.2em;
     border-radius: 5em;
-    border:2px solid #2497e3;
-    box-shadow:inset 0 1px 11px 0 #1f8dd6;
+    border:0.2em solid var(--blue);
+    box-shadow:inset 0 0.1em 1.1em 0 var(--blue);
     color: gray
 }
 .weekday-selected {
-    background: #0a3660;
-    color: white
+    background: var(--lightgray);
+    color: black
+}
+
+/* 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;
+}
+
+/* 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;
 }