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 }