3bb931cf2389e77fc642c4cd3d7e370bfb9f66d1
[esp-clock.git] / data / web / style.css
1 /* pure-min  */
2
3 .pure-button:focus,
4 a:active,
5 a:hover {
6  outline:0
7 }
8 .pure-table,
9 table {
10  border-collapse:collapse;
11  border-spacing:0
12 }
13 html {
14  font-family:sans-serif;
15  -ms-text-size-adjust:100%;
16  -webkit-text-size-adjust:100%
17 }
18 body {
19  margin:0
20 }
21 pre {
22  font-family:inherit;
23  font-weight:700;
24  display:contents;
25  white-space:pre-wrap;
26  margin:0
27 }
28 article,
29 aside,
30 details,
31 figcaption,
32 figure,
33 footer,
34 header,
35 hgroup,
36 main,
37 menu,
38 nav,
39 section,
40 summary {
41  display:block
42 }
43 audio,
44 canvas,
45 progress,
46 video {
47  display:inline-block;
48  vertical-align:baseline
49 }
50 audio:not([controls]) {
51  display:none;
52  height:0
53 }
54 [hidden],
55 template {
56  display:none
57 }
58 a {
59  background-color:transparent
60 }
61 abbr[title] {
62  border-bottom:1px dotted
63 }
64 b,
65 optgroup,
66 strong {
67  font-weight:700
68 }
69 dfn {
70  font-style:italic
71 }
72 h1 {
73  font-size:2em;
74  margin:.67em 0
75 }
76 mark {
77  background:#ff0;
78  color:#000
79 }
80 small {
81  font-size:80%
82 }
83 sub,
84 sup {
85  font-size:75%;
86  line-height:0;
87  position:relative;
88  vertical-align:baseline
89 }
90 sup {
91  top:-.5em
92 }
93 sub {
94  bottom:-.25em
95 }
96 img {
97  border:0
98 }
99 svg:not(:root) {
100  overflow:hidden
101 }
102 figure {
103  margin:1em 40px
104 }
105 hr {
106  border:0;
107  height:2px;
108  width:80%;
109  background-image:-webkit-linear-gradient(left,#292929,#1f8dd6,#292929);
110  background-image:-moz-linear-gradient(left,#292929,#1f8dd6,#292929);
111  background-image:-ms-linear-gradient(left,#292929,#1f8dd6,#292929);
112  background-image:-o-linear-gradient(left,#292929,#1f8dd6,#292929)
113 }
114 textarea {
115  overflow:auto
116 }
117 code,
118 kbd,
119 samp {
120  font-family:monospace,monospace;
121  font-size:1em
122 }
123 button,
124 input,
125 optgroup,
126 select,
127 textarea {
128  color:inherit;
129  font:inherit
130 }
131 .pure-button,
132 input {
133  line-height:normal
134 }
135 button {
136  overflow:visible
137 }
138 button,
139 select {
140  text-transform:none
141 }
142 button,
143 html input[type=button],
144 input[type=reset],
145 input[type=submit] {
146  -webkit-appearance:button;
147  cursor:pointer;
148  letter-spacing:.05em;
149  background:transparent;
150  text-transform:uppercase;
151  color:#aaa;
152  font-size:90%;
153  border:2px solid #2497e3;
154  border-radius:6px;
155  box-shadow:inset 0 1px 11px 0 #1f8dd6
156 }
157 button[disabled],
158 html input[disabled] {
159  cursor:default
160 }
161 button::-moz-focus-inner,
162 input::-moz-focus-inner {
163  border:0;
164  padding:0
165 }
166 input[type=checkbox],
167 input[type=radio] {
168  box-sizing:border-box;
169  vertical-align:middle;
170  padding:0
171 }
172 input[type=number]::-webkit-inner-spin-button,
173 input[type=number]::-webkit-outer-spin-button {
174  height:auto
175 }
176 input[type=search] {
177  -webkit-appearance:textfield;
178  box-sizing:content-box
179 }
180 .pure-button,
181 .pure-form input:not([type]),
182 .pure-menu {
183  box-sizing:border-box
184 }
185 input[type=search]::-webkit-search-cancel-button,
186 input[type=search]::-webkit-search-decoration {
187  -webkit-appearance:none
188 }
189 fieldset {
190  border:1px solid silver;
191  margin:0 2px;
192  padding:.35em .625em .75em
193 }
194 legend,
195 td,
196 th {
197  padding:0
198 }
199 legend {
200  border:0
201 }
202 .hidden,
203 [hidden] {
204  display:none!important
205 }
206 .pure-img {
207  max-width:100%;
208  height:auto;
209  display:block
210 }
211 .pure-g {
212  letter-spacing:-.31em;
213  text-rendering:optimizespeed;
214  font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
215  display:-webkit-box;
216  display:-webkit-flex;
217  display:-ms-flexbox;
218  display:flex;
219  -webkit-flex-flow:row wrap;
220  -ms-flex-flow:row wrap;
221  flex-flow:row wrap;
222  -webkit-align-content:flex-start;
223  -ms-flex-line-pack:start;
224  align-content:flex-start
225 }
226 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
227  table .pure-g {
228   display:block
229  }
230 }
231 .opera-only :-o-prefocus,
232 .pure-g {
233  word-spacing:-.43em
234 }
235 .pure-u,
236 .pure-u-1,
237 .pure-u-1-1,
238 .pure-u-1-12,
239 .pure-u-1-2,
240 .pure-u-1-24,
241 .pure-u-1-3,
242 .pure-u-1-4,
243 .pure-u-1-5,
244 .pure-u-1-6,
245 .pure-u-1-8,
246 .pure-u-10-24,
247 .pure-u-11-12,
248 .pure-u-11-24,
249 .pure-u-12-24,
250 .pure-u-13-24,
251 .pure-u-14-24,
252 .pure-u-15-24,
253 .pure-u-16-24,
254 .pure-u-17-24,
255 .pure-u-18-24,
256 .pure-u-19-24,
257 .pure-u-2-24,
258 .pure-u-2-3,
259 .pure-u-2-5,
260 .pure-u-20-24,
261 .pure-u-21-24,
262 .pure-u-22-24,
263 .pure-u-23-24,
264 .pure-u-24-24,
265 .pure-u-3-24,
266 .pure-u-3-4,
267 .pure-u-3-5,
268 .pure-u-3-8,
269 .pure-u-4-24,
270 .pure-u-4-5,
271 .pure-u-5-12,
272 .pure-u-5-24,
273 .pure-u-5-5,
274 .pure-u-5-6,
275 .pure-u-5-8,
276 .pure-u-6-24,
277 .pure-u-7-12,
278 .pure-u-7-24,
279 .pure-u-7-8,
280 .pure-u-8-24,
281 .pure-u-9-24 {
282  letter-spacing:normal;
283  word-spacing:normal;
284  vertical-align:text-top;
285  text-rendering:auto;
286  display:inline-block;
287  zoom:1;
288  margin:20px 0 0
289 }
290 .pure-g [class*=pure-u] {
291  font-family:sans-serif
292 }
293 .pure-u-1-24 {
294  width:4.1667%
295 }
296 .pure-u-1-12,
297 .pure-u-2-24 {
298  width:8.3333%
299 }
300 .pure-u-1-8,
301 .pure-u-3-24 {
302  width:12.5%
303 }
304 .pure-u-1-6,
305 .pure-u-4-24 {
306  width:16.6667%
307 }
308 .pure-u-1-5 {
309  width:20%
310 }
311 .pure-u-5-24 {
312  width:20.8333%
313 }
314 .pure-u-1-4,
315 .pure-u-6-24 {
316  width:25%
317 }
318 .pure-u-7-24 {
319  width:29.1667%
320 }
321 .pure-u-1-3,
322 .pure-u-8-24 {
323  width:33.3333%
324 }
325 .pure-u-3-8,
326 .pure-u-9-24 {
327  width:37.5%
328 }
329 .pure-u-2-5 {
330  width:40%
331 }
332 .pure-u-10-24,
333 .pure-u-5-12 {
334  width:41.6667%
335 }
336 .pure-u-11-24 {
337  width:45.8333%
338 }
339 .pure-u-1-2,
340 .pure-u-12-24 {
341  width:50%
342 }
343 .pure-u-13-24 {
344  width:54.1667%
345 }
346 .pure-u-14-24,
347 .pure-u-7-12 {
348  width:58.3333%
349 }
350 .pure-u-3-5 {
351  width:60%
352 }
353 .pure-u-15-24,
354 .pure-u-5-8 {
355  width:62.5%
356 }
357 .pure-u-16-24,
358 .pure-u-2-3 {
359  width:66.6667%
360 }
361 .pure-u-17-24 {
362  width:70.8333%
363 }
364 .pure-u-18-24,
365 .pure-u-3-4 {
366  width:75%
367 }
368 .pure-u-19-24 {
369  width:79.1667%
370 }
371 .pure-u-4-5 {
372  width:80%
373 }
374 .pure-u-20-24,
375 .pure-u-5-6 {
376  width:83.3333%
377 }
378 .pure-u-21-24,
379 .pure-u-7-8 {
380  width:87.5%
381 }
382 .pure-u-11-12,
383 .pure-u-22-24 {
384  width:91.6667%
385 }
386 .pure-u-23-24 {
387  width:95.8333%
388 }
389 .pure-u-1,
390 .pure-u-1-1,
391 .pure-u-24-24,
392 .pure-u-5-5 {
393  width:100%
394 }
395 .pure-button {
396  display:inline-block;
397  zoom:1;
398  white-space:nowrap;
399  vertical-align:middle;
400  text-align:center;
401  cursor:pointer;
402  -webkit-user-drag:none;
403  -webkit-user-select:none;
404  -moz-user-select:none;
405  -ms-user-select:none;
406  user-select:none
407 }
408 .pure-button::-moz-focus-inner {
409  padding:0;
410  border:0
411 }
412 .pure-button-group {
413  letter-spacing:-.31em;
414  text-rendering:optimizespeed
415 }
416 .opera-only :-o-prefocus,
417 .pure-button-group {
418  word-spacing:-.43em
419 }
420 .pure-button {
421  font-family:inherit;
422  font-size:100%;
423  padding:.5em 1em;
424  color:#444;
425  color:rgba(0,0,0,.8);
426  border:1px solid #999;
427  border:transparent;
428  background-color:#E6E6E6;
429  text-decoration:none;
430  border-radius:2px
431 }
432 .pure-button-hover,
433 .pure-button:hover {
434  border:2px solid #61c6ff;
435  box-shadow:inset 0 1px 15px 0 #1f8dd6;
436  filter:alpha(opacity=90);
437  background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
438  background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))
439 }
440 .pure-button-active,
441 .pure-button:active {
442  box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;
443  border-color:#000\9
444 }
445 .pure-button-disabled,
446 .pure-button-disabled:active,
447 .pure-button-disabled:focus,
448 .pure-button-disabled:hover,
449 .pure-button[disabled] {
450  border:none;
451  background-image:none;
452  filter:alpha(opacity=40);
453  opacity:.4;
454  cursor:not-allowed;
455  box-shadow:none;
456  pointer-events:none
457 }
458 .pure-button-hidden {
459  display:none
460 }
461 .pure-button-primary,
462 .pure-button-selected,
463 a.pure-button-primary,
464 a.pure-button-selected {
465  background-color :#0078e7;
466  color:#fff
467 }
468 .pure-button-group .pure-button {
469  letter-spacing:normal;
470  word-spacing:normal;
471  vertical-align:top;
472  text-rendering:auto;
473  margin:0;
474  border-radius:0;
475  border-right:1px solid #111;
476  border-right:1px solid rgba(0,0,0,.2)
477 }
478 .pure-button-group .pure-button:first-child {
479  border-top-left-radius:2px;
480  border-bottom-left-radius:2px
481 }
482 .pure-button-group .pure-button:last-child {
483  border-top-right-radius:2px;
484  border-bottom-right-radius:2px;
485  border-right:none
486 }
487 .pure-form input[type=password],
488 .pure-form input[type=email],
489 .pure-form input[type=url],
490 .pure-form input[type=date],
491 .pure-form input[type=month],
492 .pure-form input[type=time],
493 .pure-form input[type=datetime],
494 .pure-form input[type=datetime-local],
495 .pure-form input[type=week],
496 .pure-form input[type=tel],
497 .pure-form input[type=color],
498 .pure-form input[type=number],
499 .pure-form input[type=search],
500 .pure-form input[type=text],
501 .pure-form select,
502 .pure-form textarea {
503  background:#292828;
504  padding:.5em .6em;
505  display:inline-block;
506  border:1px solid #ccc;
507  box-shadow:inset 0 1px 10px #1f8dd6;
508  border-radius:8px;
509  vertical-align:middle;
510  box-sizing:border-box
511 }
512 .pure-form input:not([type]) {
513  padding:.5em .6em;
514  display:inline-block;
515  border:1px solid #ccc;
516  box-shadow:inset 0 1px 3px #ddd;
517  border-radius:4px
518 }
519 .pure-form input[type=color] {
520  padding:.1em .4em
521 }
522 .pure-form input:not([type]):focus,
523 .pure-form input[type=password]:focus,
524 .pure-form input[type=email]:focus,
525 .pure-form input[type=url]:focus,
526 .pure-form input[type=date]:focus,
527 .pure-form input[type=month]:focus,
528 .pure-form input[type=time]:focus,
529 .pure-form input[type=datetime]:focus,
530 .pure-form input[type=datetime-local]:focus,
531 .pure-form input[type=week]:focus,
532 .pure-form input[type=tel]:focus,
533 .pure-form input[type=color]:focus,
534 .pure-form input[type=number]:focus,
535 .pure-form input[type=search]:focus,
536 .pure-form input[type=text]:focus,
537 .pure-form select:focus,
538 .pure-form textarea:focus {
539  outline:0;
540  border-color:#129FEA
541 }
542 .pure-form input[type=file]:focus,
543 .pure-form input[type=checkbox]:focus,
544 .pure-form input[type=radio]:focus {
545  outline:#129FEA auto 1px
546 }
547 .pure-form .pure-checkbox,
548 .pure-form .pure-radio {
549  display:block
550 }
551 .pure-form input:not([type])[disabled],
552 .pure-form input[type=password][disabled],
553 .pure-form input[type=email][disabled],
554 .pure-form input[type=url][disabled],
555 .pure-form input[type=date][disabled],
556 .pure-form input[type=month][disabled],
557 .pure-form input[type=time][disabled],
558 .pure-form input[type=datetime][disabled],
559 .pure-form input[type=datetime-local][disabled],
560 .pure-form input[type=week][disabled],
561 .pure-form input[type=tel][disabled],
562 .pure-form input[type=color][disabled],
563 .pure-form input[type=number][disabled],
564 .pure-form input[type=search][disabled],
565 .pure-form input[type=text][disabled],
566 .pure-form select[disabled],
567 .pure-form textarea[disabled] {
568  cursor:not-allowed;
569  background-color:#eaeded;
570  color:#cad2d3
571 }
572 .pure-form input[readonly],
573 .pure-form select[readonly],
574 .pure-form textarea[readonly] {
575  background-color:#eee;
576  color:#777;
577  border-color:#ccc
578 }
579 .pure-form input:focus:invalid,
580 .pure-form select:focus:invalid,
581 .pure-form textarea:focus:invalid {
582  color:#b94a48;
583  border-color:#e9322d
584 }
585 .pure-form input[type=file]:focus:invalid:focus,
586 .pure-form input[type=checkbox]:focus:invalid:focus,
587 .pure-form input[type=radio]:focus:invalid:focus {
588  outline-color:#e9322d
589 }
590 .pure-form select {
591  height:2.25em;
592  border:1px solid #ccc;
593  background:#292929
594 }
595 .pure-form select[multiple] {
596  height:auto
597 }
598 .pure-form label {
599  margin:.5em 0 .2em
600 }
601 .pure-form fieldset {
602  margin:0;
603  padding:.35em 0 .75em;
604  border:0
605 }
606 .pure-form legend {
607  display:block;
608  width:100%;
609  padding:.3em 0;
610  margin-bottom:.3em;
611  color:#333;
612  border-bottom:1px solid #e5e5e5
613 }
614 .pure-form-stacked input:not([type]),
615 .pure-form-stacked input[type=password],
616 .pure-form-stacked input[type=email],
617 .pure-form-stacked input[type=url],
618 .pure-form-stacked input[type=date],
619 .pure-form-stacked input[type=month],
620 .pure-form-stacked input[type=time],
621 .pure-form-stacked input[type=datetime],
622 .pure-form-stacked input[type=datetime-local],
623 .pure-form-stacked input[type=week],
624 .pure-form-stacked input[type=tel],
625 .pure-form-stacked input[type=color],
626 .pure-form-stacked input[type=file],
627 .pure-form-stacked input[type=number],
628 .pure-form-stacked input[type=search],
629 .pure-form-stacked input[type=text],
630 .pure-form-stacked label,
631 .pure-form-stacked select,
632 .pure-form-stacked textarea {
633  display:block;
634  margin:0 0 5px
635 }
636 .pure-form-aligned .pure-help-inline,
637 .pure-form-aligned input,
638 .pure-form-aligned select,
639 .pure-form-aligned textarea,
640 .pure-form-message-inline {
641  display:inline-block;
642  vertical-align:middle
643 }
644 .pure-form-aligned textarea {
645  vertical-align:top
646 }
647 .pure-form-aligned .pure-control-group {
648  margin-bottom:.5em
649 }
650 .pure-form-aligned .pure-control-group label {
651  text-align:right;
652  display:inline-block;
653  vertical-align:middle;
654  width:10em;
655  margin:0 1em 0 0
656 }
657 .pure-form-aligned .pure-controls {
658  margin:1.5em 0 0 11em
659 }
660 .pure-form .pure-input-rounded,
661 .pure-form input.pure-input-rounded {
662  border-radius:2em;
663  padding:.5em 1em
664 }
665 .pure-form .pure-group fieldset {
666  margin-bottom:10px
667 }
668 .pure-form .pure-group input,
669 .pure-form .pure-group textarea {
670  display:block;
671  padding:10px;
672  margin:0 0 -1px;
673  border-radius:0;
674  position:relative;
675  top:-1px
676 }
677 .pure-form .pure-group input:focus,
678 .pure-form .pure-group textarea:focus {
679  z-index:3
680 }
681 .pure-form .pure-group input:first-child,
682 .pure-form .pure-group textarea:first-child {
683  top:1px;
684  border-radius:4px 4px 0 0;
685  margin:0
686 }
687 .pure-form .pure-group input:first-child:last-child,
688 .pure-form .pure-group textarea:first-child:last-child {
689  top:1px;
690  border-radius:4px;
691  margin:0
692 }
693 .pure-form .pure-group input:last-child,
694 .pure-form .pure-group textarea:last-child {
695  top:-2px;
696  border-radius:0 0 4px 4px;
697  margin:0
698 }
699 .pure-form .pure-group button {
700  margin:.35em 0
701 }
702 .pure-form .pure-input-1 {
703  width:100%
704 }
705 .pure-form .pure-input-3-4 {
706  width:75%
707 }
708 .pure-form .pure-input-2-3 {
709  width:66%
710 }
711 .pure-form .pure-input-1-2 {
712  width:50%
713 }
714 .pure-form .pure-input-1-3 {
715  width:33%
716 }
717 .pure-form .pure-input-1-4 {
718  width:25%
719 }
720 .pure-form .pure-help-inline,
721 .pure-form-message-inline {
722  display:inline-block;
723  padding-left:.3em;
724  color:#666;
725  vertical-align:middle;
726  font-size:.875em
727 }
728 .pure-form-message {
729  display:block;
730  color:#666;
731  font-size:.875em
732 }
733 @media only screen and (max-width : 480px) {
734  .pure-form button[type=submit] {
735   margin:.7em 0 0
736  }
737  .pure-form input:not([type]),
738  .pure-form input[type=password],
739  .pure-form input[type=email],
740  .pure-form input[type=url],
741  .pure-form input[type=date],
742  .pure-form input[type=month],
743  .pure-form input[type=time],
744  .pure-form input[type=datetime],
745  .pure-form input[type=datetime-local],
746  .pure-form input[type=week],
747  .pure-form input[type=tel],
748  .pure-form input[type=color],
749  .pure-form input[type=number],
750  .pure-form input[type=search],
751  .pure-form input[type=text],
752  .pure-form label {
753   margin-bottom:.3em;
754   display:block
755  }
756  .pure-group input:not([type]),
757  .pure-group input[type=password],
758  .pure-group input[type=email],
759  .pure-group input[type=url],
760  .pure-group input[type=date],
761  .pure-group input[type=month],
762  .pure-group input[type=time],
763  .pure-group input[type=datetime],
764  .pure-group input[type=datetime-local],
765  .pure-group input[type=week],
766  .pure-group input[type=tel],
767  .pure-group input[type=color],
768  .pure-group input[type=number],
769  .pure-group input[type=search],
770  .pure-group input[type=text] {
771   margin-bottom:0
772  }
773  .pure-form-aligned .pure-control-group label {
774   margin-bottom:.3em;
775   text-align:left;
776   display:block;
777   width:100%
778  }
779  .pure-form-aligned .pure-controls {
780   margin:1.5em 0 0
781  }
782  .pure-form .pure-help-inline,
783  .pure-form-message,
784  .pure-form-message-inline {
785   display:block;
786   font-size:.75em;
787   padding:.2em 0 .8em
788  }
789 }
790 .pure-menu-fixed {
791  position:fixed;
792  left:0;
793  top:0;
794  z-index:3
795 }
796 .pure-menu-item,
797 .pure-menu-list {
798  position:relative
799 }
800 .pure-menu-list {
801  list-style:none;
802  margin:0;
803  padding:0
804 }
805 .pure-menu-item {
806  padding:0;
807  margin:0;
808  height:100%
809 }
810 .pure-menu-heading,
811 .pure-menu-link {
812  display:block;
813  text-decoration:none;
814  white-space:nowrap
815 }
816 .pure-menu-horizontal {
817  width:100%;
818  white-space:nowrap
819 }
820 .pure-menu-horizontal .pure-menu-list {
821  display:inline-block
822 }
823 .pure-menu-horizontal .pure-menu-heading,
824 .pure-menu-horizontal .pure-menu-item,
825 .pure-menu-horizontal .pure-menu-separator {
826  display:inline-block;
827  zoom:1;
828  vertical-align:middle
829 }
830 .pure-menu-item .pure-menu-item {
831  display:block
832 }
833 .pure-menu-children {
834  display:none;
835  position:absolute;
836  left:100%;
837  top:0;
838  margin:0;
839  padding:0;
840  z-index:3
841 }
842 .pure-menu-horizontal .pure-menu-children {
843  left:0;
844  top:auto;
845  width:inherit
846 }
847 .pure-menu-active>.pure-menu-children,
848 .pure-menu-allow-hover:hover>.pure-menu-children {
849  display:block;
850  position:absolute
851 }
852 .pure-menu-has-children>.pure-menu-link:after {
853  padding-left:.5em;
854  content:"\25B8";
855  font-size:small
856 }
857 .pure-menu-horizontal .pure-menu-has-children>.pure-menu-link:after {
858  content:"\25BE"
859 }
860 .pure-menu-scrollable {
861  overflow-y:scroll;
862  overflow-x:hidden
863 }
864 .pure-menu-scrollable .pure-menu-list {
865  display:block
866 }
867 .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
868  display:inline-block
869 }
870 .pure-menu-horizontal.pure-menu-scrollable {
871  white-space:nowrap;
872  overflow-y:hidden;
873  overflow-x:auto;
874  -ms-overflow-style:none;
875  -webkit-overflow-scrolling:touch;
876  padding:.5em 0
877 }
878 .pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar {
879  display:none
880 }
881 .pure-menu-horizontal .pure-menu-children .pure-menu-separator,
882 .pure-menu-separator {
883  background-color:#ccc;
884  height:1px;
885  margin:.3em 0
886 }
887 .pure-menu-horizontal .pure-menu-separator {
888  width:1px;
889  height:1.3em;
890  margin:0 .3em
891 }
892 .pure-menu-horizontal .pure-menu-children .pure-menu-separator {
893  display:block;
894  width:auto
895 }
896 .pure-menu-heading {
897  text-transform:uppercase;
898  color:#565d64
899 }
900 .pure-menu-link {
901  color:#777
902 }
903 .pure-menu-children {
904  background-color:#fff
905 }
906 .pure-menu-disabled,
907 .pure-menu-heading,
908 .pure-menu-link {
909  padding:.5em 1em
910 }
911 .pure-menu-disabled {
912  opacity:.5
913 }
914 .pure-menu-disabled .pure-menu-link:hover {
915  background-color:transparent
916 }
917 .pure-menu-active>.pure-menu-link,
918 .pure-menu-link:focus,
919 .pure-menu-link:hover {
920  background-color:#eee
921 }
922 .pure-menu-selected .pure-menu-link,
923 .pure-menu-selected .pure-menu-link:visited {
924  color:#000
925 }
926 .pure-table {
927  empty-cells:show;
928  border:1px solid #cbcbcb
929 }
930 .pure-table caption {
931  color:#000;
932  font:italic 85%/1 arial,sans-serif;
933  padding:1em 0;
934  text-align:center
935 }
936 .pure-table td,
937 .pure-table th {
938  border-left:1px solid #cbcbcb;
939  border-width:0 0 0 1px;
940  font-size:inherit;
941  margin:0;
942  overflow:visible;
943  padding:.5em 1em
944 }
945 .pure-table td:first-child,
946 .pure-table th:first-child {
947  border-left-width:0
948 }
949 .pure-table thead {
950  background-color:#e0e0e0;
951  color:#000;
952  text-align:left;
953  vertical-align:bottom
954 }
955 .pure-table td {
956  background-color:transparent
957 }
958 .pure-table-odd td,
959 .pure-table-striped tr:nth-child(2n-1) td {
960  background-color:#f2f2f2
961 }
962 .pure-table-bordered td {
963  border-bottom:1px solid #cbcbcb
964 }
965 .pure-table-bordered tbody>tr:last-child>td {
966  border-bottom-width:0
967 }
968 .pure-table-horizontal td,
969 .pure-table-horizontal th {
970  border-width:0 0 1px;
971  border-bottom:1px solid #cbcbcb
972 }
973 .pure-table-horizontal tbody>tr:last-child>td {
974  border-bottom-width:0
975 }
976 :root {
977  --slide:250px
978 }
979
980 /* custom styles */
981
982 body {
983  color:#aaa;
984  background:#242424;
985 }
986
987 .pure-img-responsive {
988  max-width:100%;
989  height:auto
990 }
991
992 #layout,
993 #menu,
994 .menu-link {
995  -webkit-transition:all 0.2s ease-out;
996  -moz-transition:all 0.2s ease-out;
997  -ms-transition:all 0.2s ease-out;
998  -o-transition:all 0.2s ease-out;
999  transition:all 0.2s ease-out
1000 }
1001 #layout {
1002  position:relative;
1003  left:0;
1004  padding-left:0
1005 }
1006 #layout.active #menu {
1007  left:var(--slide);
1008  width:var(--slide)
1009 }
1010 #layout.active .menu-link {
1011  left:var(--slide)
1012 }
1013 .content {
1014  margin:0 auto;
1015  padding:0 2em;
1016  max-width:800px;
1017  margin-bottom:50px;
1018  line-height:1.6em
1019 }
1020 .header {
1021  margin:0;
1022  color:#333;
1023  text-align:center
1024 }
1025 .header h1 {
1026  color:dodgerblue;
1027  margin:.4em 0;
1028  font-size:2.4em;
1029  font-weight: bold;
1030  font-variant-caps: small-caps
1031 }
1032 .header h2 {
1033  font-weight:300;
1034  color:#ccc;
1035  padding:0;
1036  margin-top:0
1037 }
1038 .content-subhead {
1039  margin:50px 0 20px 0;
1040  font-weight:300;
1041  color:#888
1042 }
1043 #menu {
1044  margin-left:calc(var(--slide)* -1);
1045  width:var(--slide);
1046  position:fixed;
1047  top:0;
1048  left:0;
1049  bottom:0;
1050  z-index:1000;
1051  background:#181818;
1052  overflow-y:auto;
1053  -webkit-overflow-scrolling:touch
1054 }
1055 #menu a {
1056  color:#888;
1057  border:none;
1058  padding:.6em 0.3em .6em 0.6em
1059 }
1060 #menu .pure-menu,
1061 #menu .pure-menu ul {
1062  border:none;
1063  background:transparent
1064 }
1065 #menu .pure-menu ul,
1066 #menu .pure-menu .menu-item-divided {
1067  border-top:1px solid #333
1068 }
1069 #menu .pure-menu li a:hover,
1070 #menu .pure-menu li a:focus {
1071  background:#333;
1072  color:#aaa
1073 }
1074 #menu .pure-menu-selected,
1075 #menu .pure-menu-heading {
1076  background:dodgerblue
1077 }
1078 #menu .pure-menu-selected a {
1079  color:#fff
1080 }
1081 #menu .pure-menu-heading {
1082  letter-spacing:.15em;
1083  text-transform:uppercase;
1084  color:#fff;
1085  margin:0;
1086  text-align:center;
1087  padding:.6em 0.3em .6em 0.3em
1088 }
1089 .menu-link {
1090  position:fixed;
1091  display:block;
1092  top:0;
1093  left:0;
1094  background:#000;
1095  background:rgba(0,0,0,0.42);
1096  font-size:10px;
1097  z-index:10;
1098  width:2em;
1099  height:auto;
1100  padding:2.1em 1.6em
1101 }
1102 .menu-link:hover,
1103 .menu-link:focus {
1104  background:#000
1105 }
1106 .menu-link span {
1107  position:relative;
1108  display:block
1109 }
1110 .menu-link span,
1111 .menu-link span:before,
1112 .menu-link span:after {
1113  background-color:dodgerblue;
1114  width:100%;
1115  height:.2em
1116 }
1117 .menu-link span:before,
1118 .menu-link span:after {
1119  position:absolute;
1120  margin-top:-.6em;
1121  content:" "
1122 }
1123 .menu-link span:after {
1124  margin-top:.6em
1125 }
1126 @media(min-width:800px) {
1127  .header,
1128  .content {
1129   padding-left:2em;
1130   padding-right:2em
1131  }
1132  #layout {
1133   padding-left:var(--slide);
1134   left:0
1135  }
1136  #menu {
1137   left:var(--slide)
1138  }
1139  .menu-link {
1140   position:fixed;
1141   left:var(--slide);
1142   display:none
1143  }
1144  #layout.active .menu-link {
1145   left:var(--slide)
1146  }
1147 }
1148 @media(max-width:48em) {
1149  #layout.active {
1150   position:relative;
1151   left:var(--slide)
1152  }
1153 }
1154 input[type=range] {
1155  -webkit-appearance:none;
1156  margin:0 0 0 0;
1157  width:100%;
1158  background:#292929
1159 }
1160 input[type=range]:focus {
1161  outline:none
1162 }
1163 input[type=range]::-webkit-slider-runnable-track {
1164  width:100%;
1165  height:4px;
1166  cursor:pointer;
1167  animate:0.2s;
1168  box-shadow:0 0 0px #000000;
1169  background:dodgerblue;
1170  border-radius:3px;
1171  border:0 solid #000000
1172 }
1173 input[type=range]::-webkit-slider-thumb {
1174  box-shadow:0 0 0px #000000;
1175  border:1px solid rgb(148,148,148);
1176  height:20px;
1177  width:20px;
1178  border-radius:40px;
1179  background:#F0F0F0;
1180  cursor:pointer;
1181  -webkit-appearance:none;
1182  margin-top:-8.5px
1183 }
1184 input[type=range]:focus::-webkit-slider-runnable-track {
1185  background:dodgerblue
1186 }
1187 input[type=range]::-moz-range-track {
1188  width:100%;
1189  height:4px;
1190  cursor:pointer;
1191  animate:0.2s;
1192  box-shadow:0 0 0px #000000;
1193  background:dodgerblue;
1194  border-radius:3px;
1195  border:0 solid #000000
1196 }
1197 input[type=range]::-moz-range-thumb {
1198  box-shadow:0 0 0px #000000;
1199  border:1px solid dodgerblue;
1200  height:20px;
1201  width:20px;
1202  border-radius:30px;
1203  background:lightskyblue;
1204  cursor:pointer
1205 }
1206 input[type=range]::-ms-track {
1207  width:100%;
1208  height:4px;
1209  cursor:pointer;
1210  animate:0.2s;
1211  background:transparent;
1212  border-color:transparent;
1213  color:transparent
1214 }
1215 input[type=range]::-ms-fill-lower {
1216  background:dodgerblue;
1217  border:0 solid #000000;
1218  border-radius:6px;
1219  box-shadow:0 0 0px #000000
1220 }
1221 input[type=range]::-ms-fill-upper {
1222  background:dodgerblue;
1223  border:0 solid #000000;
1224  border-radius:6px;
1225  box-shadow:0 0 0px #000000
1226 }
1227 input[type=range]::-ms-thumb {
1228  margin-top:1px;
1229  box-shadow:0 0 0px #000000;
1230  border:1px solid dodgerblue;
1231  height:20px;
1232  width:20px;
1233  border-radius:40px;
1234  background:lightskyblue;
1235  cursor:pointer
1236 }
1237 input[type=range]:focus::-ms-fill-lower {
1238  background:dodgerblue
1239 }
1240 input[type=range]:focus::-ms-fill-upper {
1241  background:dodgerblue
1242 }
1243 .hide {
1244  display:none
1245 }
1246
1247 /* footer */
1248
1249 footer {
1250  text-align:center;
1251  position: absolute;
1252  bottom: 1rem;
1253  width: 100%
1254 }
1255 footer a {
1256  display: inline-block;
1257  text-decoration: none
1258 }
1259
1260 /* notification button/message */
1261
1262 .notification {
1263   float: right;
1264  }
1265
1266 /* modal dialog */ 
1267  
1268 .modal {
1269   position: fixed; /* Stay in place */
1270   z-index: 2000; /* Sit on top */
1271   left: 0;
1272   top: 0;
1273   width: 100%; /* Full width */
1274   height: 100%; /* Full height */
1275   overflow: auto; /* Enable scroll if needed */
1276   background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
1277 }
1278 .modal-content {
1279   -webkit-appearance:button;
1280   cursor:pointer;
1281   letter-spacing:.05em;
1282   text-transform:uppercase;
1283   color:#aaa;
1284   font-size:90%;
1285   border:2px solid dodgerblue;
1286   border-radius:6px;
1287   box-shadow:inset 0 1px 11px 0 steelblue
1288   padding: 1rem;
1289   width: max-content;
1290   min-width: 30%;
1291   background-color: #333;
1292   margin: 10% auto;
1293   padding: 1rem
1294 }
1295 .table-header {
1296   font-weight: bold;
1297   font-size: 120%;
1298   text-align: center;
1299   border-bottom: lightgray solid 1px;
1300 }
1301
1302 /* overlapping hint button */
1303
1304 .hint {
1305   cursor: pointer;
1306   width: 1rem;
1307   background: transparent;
1308   color: #aaa;
1309   font-size: 90%;
1310   border: none;
1311   box-shadow: none;
1312   display: inline-block;
1313   vertical-align: text-bottom;
1314   margin-left: -2rem;
1315   z-index:1;
1316 }
1317
1318 /* checkbox as a switch */
1319
1320 input[type=checkbox].switch {
1321     display: none;
1322 }
1323 label.switch.socket {
1324     position: relative;
1325     width: auto;
1326     text-indent: 2.5em;
1327 }
1328 span.switch.slider {
1329   display: inline-block;
1330 }
1331 label.switch.socket span.switch.slider:before {
1332     content: "";
1333     color: gray;
1334     width: 4em;
1335     height: 2em;
1336     border-radius: 5em;
1337     position: absolute;
1338     left: 0;
1339     border:2px solid dodgerblue;
1340     box-shadow:inset 0 1px 11px 0 steelblue
1341 }
1342 label.switch span.switch.slider:after {
1343     content: "";
1344     width: 1.5rem;
1345     height: 1.5rem;
1346     background: dodgerblue;
1347     border-radius: 5.5ex;
1348     position: absolute;
1349     left: 0.4rem;
1350     top: 0.4rem;
1351     transition: 0.2s;
1352 }
1353 label.switch.socket input[type=checkbox]:checked + span.slider:before {
1354     color: White;
1355     background: darkslategray;
1356     content: "";
1357     background: D;
1358 }
1359 label.switch.socket input[type=checkbox]:checked + span.slider:after {
1360     background: white;
1361     left: 2.4em;
1362 }
1363
1364 /* weekdays */
1365
1366 .week {
1367     width: 100%;
1368 }
1369 .weekday, .weekday-selected {
1370     font-size: min(4vw, 100%rem);
1371     text-align: center;
1372     margin: 0.5vw;
1373     padding: 0.4em;
1374     border-radius: 5em;
1375     border:2px solid dodgerblue;
1376     box-shadow:inset 0 1px 11px 0 steelblue;
1377     color: gray
1378 }
1379 .weekday-selected {
1380     background: darkslategray;
1381     color: white
1382 }
1383
1384 input[type=number] {
1385   appearance: textfield;
1386 }
1387
1388 /* fill all screen */
1389
1390 #layout { 
1391   min-height: 100vh; 
1392 }
1393
1394 /* fonts */
1395
1396 @font-face {
1397   font-family: "icons";
1398   font-style: normal;
1399   font-weight: 400;
1400   src: url("/icons.woff2") format("woff2");
1401 }
1402 .hint, .icon {
1403   font-family: icons;
1404 }
1405 .icon {
1406   margin-right: 0.5em;
1407 }