data/web/style.css

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