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