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  --blue: #129fea;
 923  --darkgray: #242424;
 924  --lightgray: #cad2d3;
 925  --darkergray: #191919;
 926 }
 927
 928 body {
 929  color:#aaa;
 930  background: var(--darkgray);
 931 }
 932
 933 .pure-img-responsive {
 934  max-width:100%;
 935  height:auto
 936 }
 937
 938 #layout,
 939 #menu,
 940 .menu-link {
 941  -webkit-transition:all 0.2s ease-out;
 942  -moz-transition:all 0.2s ease-out;
 943  -ms-transition:all 0.2s ease-out;
 944  -o-transition:all 0.2s ease-out;
 945  transition:all 0.2s ease-out
 946 }
 947 #layout {
 948  position:relative;
 949  left:0;
 950  padding-left:0
 951 }
 952 #layout.active #menu {
 953  left:var(--slide);
 954  width:var(--slide)
 955 }
 956 #layout.active .menu-link {
 957  left:var(--slide)
 958 }
 959 .content {
 960  margin:0 auto;
 961  padding:0 2em;
 962  max-width: 100em;
 963  margin-bottom: 5em;
 964  line-height:1.6em
 965 }
 966 .header {
 967  margin:0;
 968  color: var(--darkgray);
 969  text-align:center
 970 }
 971 .header h1 {
 972  color: var(--blue);
 973  margin:.4em 0;
 974  padding-top: 0.5em;
 975  font-size: 2em;
 976  font-weight: bold;
 977  font-variant-caps: small-caps
 978 }
 979 .header h2 {
 980  font-weight:300;
 981  color:#ccc;
 982  padding:0;
 983  margin-top:0
 984 }
 985 .content-subhead {
 986  margin: 5em 0 2em 0;
 987  font-weight:300;
 988  color: var(--lightgray)
 989 }
 990 #menu {
 991  margin-left:calc(var(--slide)* -1);
 992  width:var(--slide);
 993  height: 100vh;
 994  position:fixed;
 995  top:0;
 996  left:0;
 997  bottom:0;
 998  z-index:1000;
 999  background: var(--darkergray);
1000  overflow-y:auto;
1001  -webkit-overflow-scrolling:touch
1002 }
1003 #menu a {
1004  color: var(--lightgray);
1005  border:none;
1006  padding:.6em 0.3em .6em 0.6em
1007 }
1008 #menu .pure-menu,
1009 #menu .pure-menu ul {
1010  border:none;
1011  background:transparent
1012 }
1013 #menu .pure-menu ul,
1014 #menu .pure-menu .menu-item-divided {
1015  border-top: 0.1em solid var(--darkgray)
1016 }
1017 #menu .pure-menu li a:hover,
1018 #menu .pure-menu li a:focus {
1019  background: var(--darkgray);
1020  color: var(--lightgray);
1021 }
1022 #menu .pure-menu-selected,
1023 #menu .pure-menu-heading {
1024  background: var(--blue);
1025 }
1026 #menu .pure-menu-selected a {
1027  color: white
1028 }
1029 #menu .pure-menu-heading {
1030  letter-spacing:.15em;
1031  text-transform:uppercase;
1032  color: white;
1033  margin:0;
1034  text-align:center;
1035  padding:.6em 0.3em .6em 0.3em
1036 }
1037 .menu-link {
1038  position:fixed;
1039  display:block;
1040  top:0;
1041  left:0;
1042  background: black;
1043  background:rgba(0,0,0,0.42);
1044  font-size: 1em;
1045  z-index:10;
1046  width:2em;
1047  height:auto;
1048  padding:2.1em 1.6em
1049 }
1050 .menu-link:hover,
1051 .menu-link:focus {
1052  background: black;
1053 }
1054 .menu-link span {
1055  position:relative;
1056  display:block
1057 }
1058 .menu-link span,
1059 .menu-link span:before,
1060 .menu-link span:after {
1061  background-color: var(--blue);
1062  width:100%;
1063  height:.2em
1064 }
1065 .menu-link span:before,
1066 .menu-link span:after {
1067  position:absolute;
1068  margin-top:-.6em;
1069  content:" "
1070 }
1071 .menu-link span:after {
1072  margin-top:.6em
1073 }
1074 @media(min-width:800px) {
1075  .header,
1076  .content {
1077   padding-left:2em;
1078   padding-right:2em
1079  }
1080  #layout {
1081   padding-left:var(--slide);
1082   left:0
1083  }
1084  #menu {
1085   left:var(--slide)
1086  }
1087  .menu-link {
1088   position:fixed;
1089   left:var(--slide);
1090   display:none
1091  }
1092  #layout.active .menu-link {
1093   left:var(--slide)
1094  }
1095 }
1096
1097 /* Sliders */
1098
1099 input[type=range] {
1100  -webkit-appearance:none;
1101  margin:0 0 0 0;
1102  width:100%;
1103  background: transparent;
1104 }
1105
1106 input[type=range]:focus {
1107  outline:none
1108 }
1109
1110 input[type=range]::-webkit-slider-runnable-track {
1111  width:100%;
1112  height: 0.4em;
1113  cursor:pointer;
1114  animate:0.2s;
1115  box-shadow: none
1116  background: var(--blue);
1117  border-radius: 0.3em;
1118  border: none
1119 }
1120
1121 input[type=range]::-webkit-slider-thumb {
1122  box-shadow: none;
1123  border: 0.1em solid var(--lightgray)
1124  height: 2em;
1125  width: 2em;
1126  border-radius: 2em;
1127  background: var(--lightgray)
1128  cursor:pointer;
1129  -webkit-appearance:none;
1130  margin-top: 0.85em
1131 }
1132
1133 input[type=range]:focus::-webkit-slider-runnable-track {
1134  background: var(--blue)
1135 }
1136
1137 input[type=range]::-moz-range-track {
1138  width: 100%;
1139  height: 0.4em;
1140  cursor: pointer;
1141  animate:0.2s;
1142  box-shadow: none;
1143  background: var(--blue);
1144  border-radius: 0.3em;
1145  border: none
1146 }
1147
1148 input[type=range]::-moz-range-thumb {
1149  box-shadow: none;
1150  border: 0.1em solid var(--blue);
1151  height: 2em;
1152  width: 2em;
1153  border-radius: 2em;
1154  background: var(--lightgray);
1155  cursor:pointer
1156 }
1157
1158 input[type=range]::-ms-track {
1159  width:100%;
1160  height: 0.4em;
1161  cursor:pointer;
1162  animate:0.2s;
1163  background:transparent;
1164  border-color:transparent;
1165  color:transparent
1166 }
1167
1168 input[type=range]::-ms-fill-lower {
1169  background: var(--lightgray);
1170  border: none;
1171  border-radius: 0.6em;
1172  box-shadow: none
1173 }
1174
1175 input[type=range]::-ms-fill-upper {
1176  background: var(--lightgray);
1177  border: none;
1178  border-radius: 0.6em;
1179  box-shadow: none
1180 }
1181
1182 input[type=range]::-ms-thumb {
1183  margin-top:0.1em;
1184  box-shadow: nonel
1185  border: 0.1em solid var(--blue);
1186  height: 2em;
1187  width: 2em;
1188  border-radius: 2em;
1189  background: var(--lightgray);
1190  cursor:pointer
1191 }
1192
1193 input[type=range]:focus::-ms-fill-lower {
1194  background: var(--lightgray);
1195 }
1196
1197 input[type=range]:focus::-ms-fill-upper {
1198  background: var(--lightgray);
1199 }
1200
1201
1202 .hide {
1203  display:none
1204 }
1205
1206 /* footer */
1207
1208 footer {
1209  text-align:center;
1210  position: absolute;
1211  bottom: 1rem;
1212  width: 100%
1213 }
1214 footer a {
1215  display: inline-block;
1216  text-decoration: none
1217 }
1218
1219 /* notification button */
1220
1221 .notification {
1222   position: fixed;
1223   right: 0.5em;
1224   top: 0.5em;
1225   background-color: var(--darkgray);
1226   z-index:200;
1227   word-wrap: anywhere;
1228   float: right;
1229  }
1230
1231 /* notification message */
1232
1233 .message {
1234   position: fixed;
1235   right: 1em;
1236   bottom: 0.5em;
1237   z-index:200;
1238   float: right;
1239   color:#fff;
1240 }
1241
1242 .message-text {
1243   background-color: var(--darkgray);
1244   border:0.2em solid var(--blue);
1245   box-shadow:inset 0 0.1em 1.1em 0 var(--blue);
1246   word-wrap: anywhere;
1247   font-weight: bolder;
1248   font-size: 120%;
1249   padding: 1em;
1250   border-radius: 0.5em;
1251   position: relative;
1252 }
1253
1254 .close-button {
1255     content: 'X';
1256     position: absolute;
1257     right: -1em;
1258     top: -1em;
1259     width: 1.2em;
1260     padding: 0.1em 0.1em 0.1em 0.1em;
1261     text-decoration: none;
1262     text-shadow: none;
1263     text-align: center;
1264     font-weight: bold;
1265     background: var(--darkgray);
1266     color: white;
1267     border: 0.2em solid var(--blue);
1268     border-radius: 1em;
1269     box-shadow:inset 0 0.1em 1.1em 0 var(--blue);
1270 }
1271
1272 .fadeout {
1273     animation: fadeOut 5s ease;
1274     opacity:0;
1275 }
1276
1277 @keyframes fadeOut {
1278   0% {opacity:1;}
1279   100% {opacity:0;}
1280 }
1281
1282 /* modal dialog */
1283
1284 .modal {
1285   position: fixed; /* Stay in place */
1286   z-index: 2000; /* Sit on top */
1287   left: 0;
1288   top: 0;
1289   width: 100%; /* Full width */
1290   height: 100%; /* Full height */
1291   overflow: auto; /* Enable scroll if needed */
1292   background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
1293 }
1294 .modal-content {
1295   -webkit-appearance:button;
1296   cursor:pointer;
1297   letter-spacing:.05em;
1298   text-transform:uppercase;
1299   color:var(--lightgray);
1300   font-size:90%;
1301   border:0.2em solid var(--blue);
1302   border-radius:6px;
1303   box-shadow:inset 0 0.1em 1.1em 0 var(--blue);
1304   padding: 1em;
1305   width: max-content;
1306   min-width: 30%;
1307   background-color: var(--darkgray);
1308   margin: 10% auto;
1309   padding: 1rem
1310 }
1311 .table-header {
1312   font-weight: bold;
1313   font-size: 120%;
1314   text-align: center;
1315   border-bottom: var(--blue) solid 0.1em;
1316 }
1317
1318 /* overlapping hint button */
1319
1320 .hinted {
1321   position: relative;
1322 }
1323
1324 .hint {
1325   cursor: pointer;
1326   width: 1rem;
1327   background: transparent;
1328   color: var(--darkgray);
1329   padding: .5em .6em;
1330   border: none;
1331   box-shadow: none;
1332   position: absolute;
1333   top: 0em;
1334   right: 0em;
1335   line-height: 1.15em;
1336   font-size: 100%;
1337 }
1338
1339 /* Spacing */
1340 fieldset .pure-u-1 {
1341   margin-top: 1.5em
1342 }
1343
1344 /* checkbox as a switch */
1345
1346 input[type=checkbox].switch {
1347     display: none;
1348 }
1349 label.switch.socket {
1350     position: relative;
1351     width: auto;
1352     padding-left: 4em;
1353 }
1354 span.switch.slider {
1355   display: inline-block;
1356 }
1357 label.switch.socket span.switch.slider:before {
1358     content: "";
1359     color: gray;
1360     width: 3em;
1361     height: 1.4em;
1362     border-radius: 1em;
1363     position: absolute;
1364     left: 0;
1365     top: 0;
1366     border:0.2em solid var(--blue);
1367     box-shadow:inset 0 0.1em 1.1em 0 var(--blue)
1368 }
1369 label.switch span.switch.slider:after {
1370     content: "";
1371     width: 1rem;
1372     height: 1rem;
1373     background: var(--blue);
1374     border-radius: 1em;
1375     position: absolute;
1376     left: 0.4rem;
1377     top: 0.4rem;
1378     transition: 0.2s;
1379 }
1380 label.switch.socket input[type=checkbox]:checked + span.slider:before {
1381     background: var(--lightgray);
1382 }
1383
1384 label.switch.socket input[type=checkbox]:checked + span.slider:after {
1385     background: white;
1386     left: 1.9em;
1387 }
1388
1389 /* Time setter */
1390
1391 .inline-input.inline-input.inline-input {
1392   display: inline-block;
1393   width: calc(100% - 5em)
1394 }
1395
1396 .send-button {
1397  display:inline-block;
1398  font-family:inherit;
1399  font-size:100%;
1400  line-height: 1.15em;
1401  padding: .5em 1em;
1402  color:rgba(0,0,0,.8);
1403  border:none transparent;
1404  background-color:#e6e6e6;
1405  text-decoration:none;
1406  border-radius:2px;
1407  vertical-align: middle;
1408  margin-left: 1em;
1409  width: 2em;
1410  text-align: center;
1411 }
1412
1413 /* weekdays */
1414
1415 .week {
1416     width: 100%;
1417     border-collapse: collapse;
1418     border-spacing: 0;
1419 }
1420 .week td {
1421   padding: 0
1422 }
1423 .weekday, .weekday-selected {
1424     font-size: min(4vw, 100%rem);
1425     text-align: center;
1426     margin: 0.2vw;
1427     padding: 0.2em;
1428     border-radius: 5em;
1429     border:0.2em solid var(--blue);
1430     box-shadow:inset 0 0.1em 1.1em 0 var(--blue);
1431     color: gray
1432 }
1433 .weekday-selected {
1434     background: var(--lightgray);
1435     color: black
1436 }
1437
1438 /* Hide arrows */
1439
1440 input[type=number] {
1441   appearance: textfield;
1442 }
1443
1444 /* fill all screen */
1445
1446 #layout {
1447   min-height: 100vh;
1448 }
1449
1450 /* Text table */
1451
1452 .texttable {
1453   border-collapse: collapse;
1454   border-spacing: 0;
1455   width: 100%;
1456 }
1457
1458 .texttable td {
1459   padding: 0
1460 }
1461
1462 .value-name.value-name {
1463   width: 50%;
1464   padding-right: 1em;
1465 }
1466
1467 /* Config */
1468
1469 input[type=file]::file-selector-button {
1470     display: none;
1471 }
1472
1473 input[type=file]::-webkit-file-upload-button {
1474     display: block;
1475     width: 0;
1476     height: 0;
1477     margin-left: -100%;
1478 }
1479
1480 input[type=file]::-ms-browse {
1481     display: none;
1482 }
1483
1484 .row-button.row-button.row-button {
1485   display: inline-block;
1486   margin: 0 2em 0 2em
1487 }
1488
1489 /* fonts */
1490
1491 @font-face {
1492   font-family: "icons";
1493   font-style: normal;
1494   font-weight: 400;
1495   src: url("/icons.woff2") format("woff2");
1496 }
1497 .hint, .icon {
1498   font-family: icons;
1499 }
1500 .icon {
1501   margin-right: 0.5em;
1502 }