Raphaël G. Git Repositories - airbundle/blob - Resources/public/css/screen.css

   1 /* Reset link */
   2 a {
   3         /*text-decoration: none;*/
   4         color: #136;
   5 }
   6
   7 a:hover {
   8         text-decoration: underline solid #00c3f9;
   9 }
  10
  11 /* Font styling */
  12 html, body, dd, li, p, td {
  13         /* DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
  14         font-family: 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif;
  15 }
  16
  17 button, code, input, option, optgroup, pre, select, textarea {
  18         font-family: 'Droid Sans Mono', monospace;
  19 }
  20
  21 dt, h1, h2, h3, h4, h5, h6, label, legend, th, details {
  22         font-family: 'Droid Serif', serif;
  23 }
  24
  25 /* Default styling */
  26 h1 {
  27         font-size: 1.5rem;
  28         margin: 0;
  29         padding: 0 .6rem .6rem;
  30 }
  31
  32 h2 {
  33         font-size: 1.17rem;
  34         margin: 0;
  35         padding: 0 .5rem .5rem;
  36 }
  37
  38 h3 {
  39         font-size: 1rem;
  40         margin: 0;
  41         padding: 0 .4rem .4rem;
  42 }
  43
  44 h4 {
  45         font-size: .85rem;
  46         margin: 0;
  47         padding: 0 .3rem .3rem;
  48 }
  49
  50 h5 {
  51         font-size: .67rem;
  52         margin: 0;
  53         padding: 0 .2rem .2rem;
  54 }
  55
  56 h6 {
  57         font-size: .5rem;
  58         margin: 0;
  59         padding: 0 .1rem .1rem;
  60 }
  61
  62 ul {
  63         list-style: ' - ' inside none;
  64         margin: 0;
  65         padding: 0 .5rem .5rem;
  66 }
  67
  68 li {
  69         font-size: .9rem;
  70         margin: 0;
  71         padding: 0 .5rem .5rem;
  72 }
  73
  74 li:only-child,
  75 li:last-child,
  76 li:last-of-type {
  77         padding-bottom: 0;
  78 }
  79
  80 p {
  81         font-size: .9rem;
  82         margin: 0;
  83         padding: 0 .4rem .4rem;
  84 }
  85
  86 article,
  87 section,
  88 nav {
  89         margin: 0 .5rem .5rem;
  90         border: .1rem solid #00c3f9;
  91         border-top: 0;
  92         border-left: 0;
  93         border-radius: .5rem;
  94 }
  95
  96 article article {
  97         margin: 0 .3rem .3rem;
  98         border-radius: .4rem;
  99 }
 100
 101 article article article {
 102         margin: 0 .2rem .2rem;
 103         border-radius: .3rem;
 104 }
 105
 106 article section a.link {
 107         display: block;
 108         text-align: center;
 109         margin: 0 auto;
 110         padding: .5rem;
 111         /*display: flex;
 112         align-items: center;
 113         gap: .5rem;*/
 114 }
 115
 116 article section a.link img {
 117         /*width: 12rem;*/
 118         padding-right: .5rem;
 119         text-align: right;
 120         vertical-align: bottom;
 121 }
 122
 123 article section a.link span {
 124         width: 24rem;
 125         line-height: 50px;
 126         /*flex: 1 1;*/
 127 }
 128
 129 section {
 130         border-radius: .4rem;
 131 }
 132
 133 section .center {
 134         display: flex;
 135         flex-direction: row;
 136         justify-content: center;
 137         align-items: center;
 138         margin-bottom: .5rem;
 139         /*display: block;
 140         width: 24rem;*/
 141         /*margin: 0 auto;*/
 142         gap: .5rem;
 143 }
 144
 145 /*article {
 146         background-color: #cff;
 147 }
 148
 149 article article {
 150         background-color: white;
 151 }
 152
 153 article article article {
 154         border-radius: .3rem;
 155         background-color: #cff;
 156 }*/
 157
 158 header {
 159         margin: 0 0 .5rem;
 160         padding: .5rem;
 161         border-radius: .4rem .4rem 0 0;
 162         /*background-color: #369;
 163         border-radius: inherit;*/
 164         background-color: #00c3f9;
 165         color: #136;
 166 }
 167
 168 header h2,
 169 header h3,
 170 header h4,
 171 header h5,
 172 header h6,
 173 header p {
 174         padding-left: 0;
 175         padding-right: 0;
 176 }
 177
 178 header h2:last-child,
 179 header h3:last-child,
 180 header h4:last-child,
 181 header h5:last-child,
 182 header h6:last-child,
 183 header p:last-child {
 184         padding-bottom: 0;
 185 }
 186
 187 /*p:only-child,
 188 p:last-child,
 189 p:last-of-type {
 190         padding-bottom: 0;
 191 }*/
 192
 193 /*header h2:first-child {
 194         padding-top: .5rem;
 195 }
 196
 197 header h3:first-child {
 198         padding-top: .4rem;
 199 }
 200
 201 header h4:first-child {
 202         padding-top: .3rem;
 203 }
 204
 205 header h5:first-child {
 206         padding-top: .2rem;
 207 }
 208
 209 header h6:first-child {
 210         padding-top: .1rem;
 211 }
 212
 213 header p:last-child {
 214         padding-top: 0;
 215 }*/
 216
 217 /*article header {
 218         border-radius: .4rem .4rem 0 0;
 219 }*/
 220
 221 /*article article header {
 222         border-radius: .3rem .3rem 0 0;
 223         margin-bottom: .3rem;
 224 }
 225
 226 article article article header {
 227         border-radius: .2rem .2rem 0 0;
 228         margin-bottom: .2rem;
 229 }*/
 230
 231 /*header h1,
 232 header h2,
 233 header h3,
 234 header h4,
 235 header h5,
 236 header h6,
 237 header p {
 238         margin-bottom: 0;
 239         padding-bottom: 0;
 240 }*/
 241
 242 .ellipsis {
 243         /*Required for ellipsis on h2/h3/h4 in header*/
 244         display: grid;
 245         margin-bottom: 0;
 246 }
 247
 248 .ellipsis > * {
 249         overflow-x: hidden;
 250         text-overflow: ellipsis;
 251         white-space: nowrap;
 252 }
 253
 254 /*nav strong {
 255         display: block;
 256         font-size: 1.17rem;
 257         margin: 0 0 .5rem;
 258         padding: .4rem;
 259 }*/
 260
 261 strong {
 262         font-weight: bold;
 263 }
 264
 265 pre {
 266         margin: 0 .5rem .3rem;
 267         font-size: .8rem;
 268 }
 269
 270 dl {
 271         margin: 0 .5rem .5rem;
 272 }
 273
 274 dl:first-child,
 275 dl:only-child,
 276 dl:first-of-type {
 277         margin-top: .5rem;
 278 }
 279
 280 dt {
 281         color: #369;
 282         font-size: .9rem;
 283         font-weight: bold;
 284 }
 285
 286 dd {
 287         font-size: .9rem;
 288         margin-left: 1rem;
 289 }
 290
 291 .map figure,
 292 .multimap figure,
 293 .thumb figure {
 294         text-align: center;
 295 }
 296
 297 .map img,
 298 .multimap img,
 299 .thumb img {
 300         border-radius: .2rem;
 301         border: .1rem solid #00c3f9;
 302         aspect-ratio: 1;
 303 }
 304
 305 .map dd {
 306         margin: 0;
 307 }
 308
 309 .map dd img {
 310         width: 100%;
 311         width: calc(100% - .2rem);
 312         height: auto;
 313 }
 314
 315 .thumb img {
 316         width: 100%;
 317         width: calc(100% - 1.2rem);
 318 }
 319
 320 .four .multimap {
 321         grid-column: span 4;
 322 }
 323
 324 .three .multimap {
 325         grid-column: span 3;
 326 }
 327
 328 .two .multimap {
 329         grid-column: span 2;
 330 }
 331
 332 body {
 333         display: flex;
 334         flex-flow: column wrap;
 335         color: #036;
 336 }
 337
 338 nav ul {
 339         list-style: none inside none;
 340         gap: .5rem;
 341         /*margin: .5rem;*/
 342 }
 343
 344 nav ul ul {
 345         padding-top: .5rem;
 346 }
 347
 348 /*nav ul ul {
 349         margin-top: .5rem;
 350         margin-bottom: 0;
 351 }*/
 352
 353 /* Form */
 354 label {
 355         font-size: .8rem;
 356         white-space: nowrap;
 357 }
 358
 359 button,
 360 input,
 361 select,
 362 option,
 363 optgroup,
 364 textarea {
 365         border: .05rem solid #00c3f9;
 366         border-radius: .2rem;
 367         font-size: .75rem;
 368         color: #066;
 369         background-color: transparent;
 370         box-sizing: border-box;
 371 }
 372
 373 optgroup {
 374         border: none;
 375 }
 376
 377 /*option[selected='selected'],*/
 378 /*option:not(:checked),*/
 379 option:checked {
 380         background-color: #cff;
 381 }
 382
 383
 384 form {
 385         display: flex;
 386         flex-direction: column;
 387         flex-wrap: wrap;
 388         margin: 0 .5rem .5rem;
 389         text-align: center;
 390 }
 391
 392 form div {
 393         display: flex;
 394         align-content: space-around;
 395         justify-content: center;
 396         flex-direction: column;
 397         margin-bottom: .5rem;
 398 }
 399
 400 form div:only-child,
 401 form div:last-child,
 402 form div:last-of-type {
 403         margin-bottom: 0;
 404 }
 405
 406 form div.row {
 407         flex-direction: row;
 408         gap: .5rem;
 409         flex-wrap: wrap;
 410 }
 411
 412 form label {
 413         width: 12rem;
 414         line-height: 1.3rem;
 415         /*padding-right: 1rem;*/
 416         text-align: right;
 417         overflow-x: hidden;
 418         text-overflow: ellipsis;
 419 }
 420
 421 form label.captcha {
 422         line-height: normal;
 423 }
 424
 425 form label.captcha img {
 426         height: 1.325rem;
 427 }
 428
 429 form input,
 430 form option,
 431 form optgroup,
 432 form select,
 433 form textarea,
 434 form section section {
 435         width: 24rem;
 436         padding: .1rem;
 437         margin: 0 auto;
 438 }
 439
 440 form optgroup,
 441 form option {
 442         width: 100%;
 443 }
 444
 445 /*form optgroup {
 446         width: 23.8rem;
 447 }
 448
 449 form option {
 450         width: 23.6rem;
 451 }*/
 452
 453 /*Checkbox input*/
 454 form input[type='checkbox'] {
 455         width: 1.5rem;
 456 }
 457
 458 form select {
 459         padding: 0 .1rem .1rem .1rem;
 460 }
 461
 462 form button {
 463         width: 10rem;
 464         /*margin: .5rem auto 0 auto;*/
 465         /*margin: 0 auto;*/
 466         padding: 0 .1rem .2rem .1rem;
 467 }
 468
 469 /*form button img {
 470         float: left;
 471         padding: .5rem;
 472 }*/
 473
 474 form .message {
 475         margin: 0 0 .5rem 0;
 476 }
 477
 478 form div .message {
 479         margin: .25rem 0 0 0;
 480 }
 481
 482 /* Vertical form */
 483 .location .col label,
 484 .col label {
 485         width: 8rem;
 486         padding-right: 0;
 487         padding-bottom: .2rem;
 488         text-align: center;
 489         margin: 0 auto;
 490 }
 491
 492 .location .col input,
 493 .location .col textarea,
 494 .col input,
 495 .col option,
 496 .col optgroup,
 497 .col select,
 498 .col textarea {
 499         width: 8rem;
 500 }
 501
 502 .col button {
 503         width: 8rem;
 504 }
 505
 506 .col .row {
 507         flex-direction: column;
 508 }
 509
 510 .col div.date {
 511         flex-direction: row;
 512         justify-content: space-between;
 513 }
 514
 515 /* Header */
 516 #header {
 517         background-color: #cff;
 518         border: .1rem solid #136;
 519         border-top: 0;
 520         border-left: 0;
 521         border-radius: 0 0 .5rem .5rem;
 522         margin: 0 .5rem .5rem;
 523         display: flex;
 524         flex-direction: column;
 525         justify-content: space-between;
 526         font-weight: bold;
 527         line-height: 45px;
 528         padding: .5rem;
 529         gap: .5rem;
 530 }
 531
 532 #header div {
 533         display: flex;
 534         flex-direction: row;
 535         justify-content: space-between;
 536         gap: .5rem;
 537 }
 538
 539 #logo {
 540         padding: 0;
 541         white-space: nowrap;
 542         color: #09c;
 543         text-shadow: 1.5px 1.5px 3px #136;
 544         text-decoration: none;
 545         display: flex;
 546         font-family: 'Lemon', sans-serif;
 547         font-size: 2rem;
 548         line-height: 45px;
 549         gap: .5rem;
 550 }
 551
 552 #logo img,
 553 #logo span {
 554         margin: 0 auto;
 555 }
 556
 557 #title {
 558         margin: .25rem 0 0;
 559         padding: 0;
 560         border-bottom: 0 none;
 561         text-align: right;
 562         flex: 1 1 auto;
 563         font-family: 'Lemon', sans-serif;
 564         font-weight: normal;
 565         /*white-space: nowrap;*/
 566 }
 567
 568 #title a {
 569         text-decoration: none;
 570         color: #09c;
 571         text-shadow: 1.5px 1.5px 3px #136;
 572         /*overflow-x: hidden;
 573         text-overflow: ellipsis;*/
 574 }
 575
 576 #nav {
 577         display: flex;
 578         flex-wrap: wrap;
 579         gap: .5rem;
 580         line-height: 2.5rem;
 581         margin: 0;
 582         border: 0 none;
 583 }
 584
 585 #nav a {
 586         flex: 1 1 auto;
 587         border: .1rem solid #136;
 588         border-top: 0;
 589         border-left: 0;
 590         border-radius: .2rem;
 591         background-color: #00c3f9;
 592         color: #136;
 593         text-align: center;
 594         padding: 0 .25rem;
 595 }
 596
 597 /* Message */
 598 .message {
 599         margin: 0 .5rem .5rem;
 600         display: flex;
 601         flex-direction: row;
 602         justify-content: space-between;
 603         font-size: .9rem;
 604         padding: .2rem;
 605         border-radius: .2rem;
 606         text-align: center;
 607         border: .05rem solid transparent;
 608 }
 609
 610 .message::before,
 611 .message::after {
 612         margin: auto 0;
 613         padding: 0 .25rem;
 614 }
 615
 616 .message ul {
 617         margin: 0;
 618         padding: 0;
 619         list-style: none inside none;
 620         gap: .1rem;
 621 }
 622
 623 .message li {
 624         padding: .25rem;
 625 }
 626
 627 .mortal,
 628 .mortal button,
 629 .mortal select {
 630         /*border-color: #c33333;
 631         color: #c33333;*/
 632         border-color: #930;
 633         background-color: #f9c3c3;
 634         color: #930;
 635 }
 636
 637 .dangerous,
 638 .mortal {
 639         border-radius: .2rem;
 640         padding: .5rem 0;
 641 }
 642
 643 .error {
 644         border-color: #c33333;
 645         background-color: #f9c3c3;
 646         color: #c33333;
 647 }
 648
 649 .error::before,
 650 .error::after {
 651         /*XXX: display /!\ symbol */
 652         content: "⚠";
 653 }
 654
 655 .notice {
 656         border-color: #3333c3;
 657         background-color: #c3c3f9;
 658         color: #3333c3;
 659 }
 660
 661 .notice::before,
 662 .notice::after {
 663         /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
 664          * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
 665         /*XXX: display i symbol */
 666         content: "ℹ";
 667         /*XXX: display # symbol */
 668         /*content: "⌘";*/
 669 }
 670
 671 .dangerous,
 672 .dangerous button,
 673 .dangerous select {
 674         /*border-color: #c39333;
 675         background-color: #f9c333;
 676         color: #936333;*/
 677         border-color: #930;
 678         background-color: #fc9;
 679         color: #930;
 680 }
 681
 682 .warning {
 683         border-color: #c39333;
 684         background-color: #f9c333;
 685         color: #936333;
 686 }
 687
 688 .warning::before,
 689 .warning::after {
 690         /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
 691          * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
 692         content: "?";
 693         /*XXX: display # symbol */
 694         /*content: "⌘";*/
 695 }
 696
 697 /* Dashboard */
 698 #dashboard,
 699 #form,
 700 #recover,
 701 #regulation {
 702         /*border-radius: .5rem;*/
 703         /*border: .1rem solid #00c3f9;
 704         margin: .5rem;
 705         margin-top: 0;
 706         display: flex;
 707         flex-direction: column;*/
 708 }
 709
 710 .panel {
 711         display: flex;
 712         flex-direction: row;
 713         margin: 0 .5rem .5rem;
 714         gap: .5rem;
 715 }
 716
 717 .cell {
 718 }
 719
 720 .grid {
 721         display: grid;
 722         border-style: solid;
 723         border-color: #00c3f9;
 724         border-radius: .2rem;
 725         box-sizing: border-box;
 726         border-collapse: collapse;
 727         flex: 1 1 auto;
 728         margin: 0 0 auto 0;
 729         padding: 0;
 730         gap: .1rem;
 731 }
 732
 733 .grid article,
 734 .grid section {
 735         border-collapse: inherit;
 736         /*border-radius: inherit;*/
 737         border-style: inherit;
 738         /*border-width: .1rem;
 739         border-width: inherit;*/
 740         box-sizing: inherit;
 741         flex-grow: inherit;
 742         margin: 0;
 743         min-height: 5rem;
 744         overflow: hidden;
 745 }
 746
 747 /*.grid header {
 748         border-radius: .2rem .2rem 0 0;
 749         margin-bottom: 0;
 750 }*/
 751
 752 /*.grid ul {
 753         margin: .1rem;
 754         padding: .1rem;
 755         margin: 0;
 756 }*/
 757
 758 /*.grid section {
 759         border-color: inherit;
 760 }*/
 761
 762 /*.grid ul {
 763         display: block;
 764         margin: .1rem;
 765         font-size: .8rem;
 766         list-style: none inside none;
 767 }*/
 768
 769 .grid li {
 770         border-width: .1rem;
 771         border-style: solid;
 772         border-radius: .2rem;
 773         white-space: nowrap;
 774         padding: .1rem;
 775         display: flex;
 776         margin: 0 0 .1rem;
 777         flex-direction: row;
 778         justify-content: space-between;
 779         overflow-x: hidden;
 780         text-overflow: ellipsis;
 781 }
 782
 783 /*XXX: required by ul display:block for overflow:hidden*/
 784 .grid li:only-child,
 785 .grid li:last-child,
 786 .grid li:last-of-type {
 787         margin: 0;
 788 }
 789
 790 .grid a {
 791         /*TODO: voir pourquoi on a besoin d'un overflow-y de merde, sans une putain de scrollbar s'affiche dans certaines conditions sur chrome, depuis le passage de deux lignes de grid à 3 !!!*/
 792         /*Est-ce parce que le city est pas expanded ???*/
 793         overflow-y: clip;
 794         overflow-x: hidden;
 795         text-overflow: ellipsis;
 796 }
 797
 798 .grid p {
 799         padding: 0 0 .3rem;
 800         margin: 0;
 801 }
 802
 803 .grid p:only-child,
 804 .grid p:last-child,
 805 .grid p:last-of-type {
 806         padding: 0;
 807 }
 808
 809 .session header {
 810         margin-bottom: .5rem;
 811 }
 812
 813 .current {
 814         filter: hue-rotate(-90deg) saturate(2);
 815 }
 816
 817 .granted {
 818         background-color: #cff;
 819         border-color: #00c3f9;
 820 }
 821
 822 /*.granted,
 823 .granted a {
 824         background-color: #cff;
 825         border-color: #00c3f9;
 826 }
 827
 828 .disputed,
 829 .disputed a {
 830         border-color: #930;
 831         background-color: #fc9;
 832         color: #930;
 833 }*/
 834
 835 .highlight {
 836         filter: hue-rotate(60deg);
 837 }
 838
 839 .canceled {
 840         filter: hue-rotate(180deg) grayscale(33%);
 841 }
 842
 843 .locked {
 844         filter: hue-rotate(180deg);
 845 }
 846
 847 .pending {
 848         filter: grayscale(33%);
 849 }
 850
 851 .disabled {
 852         filter: grayscale(66%);
 853 }
 854
 855 /*.canceled,
 856 .canceled a,
 857 .canceled h2,
 858 .canceled header {
 859         color: #963;
 860         background-color: #fddddd;
 861         border-color: #963;
 862 }
 863
 864 .locked,
 865 .locked a {
 866         border-color: #930;
 867         background-color: #f9c3c3;
 868         color: #930;
 869 }
 870
 871 .pending,
 872 .pending a {
 873         background-color: #ccc;
 874         border-color: #066;
 875 }
 876
 877 .highlight,
 878 .highlight a,
 879 .highlight h3,
 880 .highlight h3 a {
 881         border-color: #3333c3;
 882         background-color: #c3c3f9;
 883         color: #606;
 884 }*/
 885
 886 .calendar header {
 887         margin-bottom: .1rem;
 888         display: grid;
 889 }
 890
 891 .calendar h3 {
 892         overflow-x: hidden;
 893         text-overflow: ellipsis;
 894         white-space: nowrap;
 895 }
 896
 897 .calendar ul {
 898         padding: 0 .1rem .1rem;
 899 }
 900
 901 /*.ellipsis {
 902         / *Required for ellipsis on h2/h3/h4 in header* /
 903         display: grid;
 904         margin-bottom: 0;
 905 }
 906
 907 .ellipsis > * {
 908         overflow-x: hidden;
 909         text-overflow: ellipsis;
 910         white-space: nowrap;
 911 }*/
 912
 913 .calendar a {
 914         display: grid;
 915         /*grid-template-columns: 1fr auto fit-content(1fr);*/
 916         grid-template-columns: max-content 1fr max-content;
 917         flex: 1 1 auto;
 918         grid-gap: .1rem;
 919         /*XXX: reset to visible to prevent scroll*/
 920         overflow-x: visible;
 921 }
 922
 923 .calendar .reducible {
 924         overflow-x: hidden;
 925         text-overflow: ellipsis;
 926         text-align: center;
 927 }
 928
 929 .calendar .glyph {
 930         font-family: 'Noto Emoji', 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif;
 931 }
 932
 933 .calendar .temperature,
 934 .calendar .rain,
 935 .calendar .rate {
 936         line-height: 1rem;
 937         text-align: right;
 938 }
 939
 940 .calendar .rate {
 941         text-align: center;
 942 }
 943
 944 .calendar .info {
 945         line-height: 1rem;
 946         text-align: right;
 947 }
 948
 949 .calendar .pseudonym {
 950         grid-column: span 2;
 951 }
 952
 953 .seven {
 954         grid-template-columns: repeat(7, 1fr);
 955 }
 956
 957 .four {
 958         grid-template-columns: repeat(4, 1fr);
 959 }
 960
 961 .three {
 962         grid-template-columns: repeat(3, 1fr);
 963 }
 964
 965 .two {
 966         grid-template-columns: repeat(2, 1fr);
 967 }
 968
 969 /*.city .grid h3,
 970 .location .grid h3,
 971 .city .grid h4,
 972 .location .grid h4 {
 973         border-style: none;
 974         margin: 0;
 975         flex: 1 1 auto;
 976         white-space: nowrap;
 977         overflow: hidden;
 978         text-overflow: ellipsis;
 979 }
 980
 981 .city .grid article,
 982 .location .grid article {
 983         min-height: auto;
 984         height: fit-content;
 985 }
 986
 987 .city .grid {
 988         gap: .5rem;
 989 }*/
 990
 991 .location form {
 992         margin: .5rem auto;
 993 }
 994
 995 .location form .row {
 996         flex-direction: column;
 997 }
 998
 999 .location form div {
1000         margin-left: auto;
1001         margin-right: auto;
1002 }
1003
1004 .location label {
1005         width: 20rem;
1006         padding-right: 0;
1007         text-align: center;
1008 }
1009
1010 .location input,
1011 .location textarea {
1012         width: 20rem;
1013         margin: 0 .1rem;
1014 }
1015
1016 .form {
1017         margin: 0;
1018         display: flex;
1019         flex-direction: column;
1020         gap: .5rem;
1021 }
1022
1023 .form h2 {
1024         font-size: 1.17rem;
1025         padding: .4rem;
1026 }
1027
1028 .form a {
1029         white-space: nowrap;
1030 }
1031
1032 .form section {
1033         margin: 0;
1034         border: .05rem solid #00c3f9;
1035         /*border-radius: .2rem;*/
1036         width: 100%;
1037 }
1038
1039 .form form {
1040         gap: .5rem;
1041 }
1042
1043 /* Footer */
1044 #footer {
1045         border: .1rem solid #00c3f9;
1046         border-radius: .5rem;
1047         margin: .5rem;
1048         margin-top: 0;
1049         padding: .5rem;
1050         text-align: center;
1051         font-size: .8rem;
1052         line-height: 2.5rem;
1053         display: flex;
1054         justify-content: space-between;
1055         background-color: #cff;
1056         gap: .5rem;
1057 }
1058
1059 #footer summary::after {
1060         display: none;
1061 }
1062
1063 #footer summary::-webkit-details-marker {
1064         display: none;
1065 }
1066
1067 #footer ul {
1068         list-style: none inside none;
1069         margin: 0;
1070 }
1071
1072 #footer a,
1073 #footer details {
1074         padding: 0 .5rem;
1075         border: .1rem solid #136;
1076     border-top: 0;
1077     border-left: 0;
1078     border-radius: .2rem;
1079         background-color: #00c3f9;
1080         color: #136;
1081         justify-content: center;
1082 }
1083
1084 #footer details a {
1085         padding: 0;
1086         border: 0 none;
1087 }
1088
1089 /* viewport responsive hack */
1090 @media ( max-width: 1400px ) {
1091         .location label,
1092         .location input,
1093         .location textarea {
1094                 width: 12rem;
1095         }
1096
1097         .session .three {
1098                 grid-template-columns: repeat(2, 1fr);
1099         }
1100 }
1101
1102 @media ( max-width: 1000px ) {
1103         .panel {
1104                 /*flex-flow: column-reverse wrap;*/
1105                 flex-flow: column wrap;
1106         }
1107
1108         .location .two {
1109                 grid-template-columns: repeat(2, 1fr);
1110         }
1111 }
1112
1113 @media ( max-width: 900px ) {
1114         .form {
1115                 flex-direction: row;
1116         }
1117
1118         form label {
1119                 line-height: 2rem;
1120         }
1121
1122         form label.captcha img {
1123                 height: auto;
1124                 padding: .25rem 0;
1125         }
1126
1127         form input,
1128         form option,
1129         form optgroup,
1130         form select,
1131         form textarea,
1132         form section section {
1133                 width: 20rem;
1134                 line-height: 2rem;
1135         }
1136
1137         form select {
1138                 height: 2.4rem;
1139         }
1140
1141         form button {
1142                 width: 6rem;
1143                 line-height: 2rem;
1144         }
1145
1146         .col label,
1147         .col input,
1148         .col option,
1149         .col optgroup,
1150         .col select,
1151         .col textarea {
1152                 width: 12rem;
1153         }
1154
1155         .col button {
1156                 width: 12rem;
1157         }
1158
1159         .seven {
1160                 grid-template-columns: repeat(4, 1fr);
1161         }
1162
1163         .calendar .sunday {
1164                 grid-column: span 2;
1165         }
1166
1167         /*.grid section:nth-child(7n) {
1168                 grid-column: span 2;
1169         }*/
1170
1171         .four {
1172                 grid-template-columns: repeat(3, 1fr);
1173         }
1174
1175         .three {
1176                 grid-template-columns: repeat(2, 1fr);
1177         }
1178
1179         .two {
1180                 grid-template-columns: repeat(1, 1fr);
1181         }
1182
1183         .four .multimap {
1184                 grid-column: span 3;
1185         }
1186
1187         .three .multimap {
1188                 grid-column: span 2;
1189         }
1190
1191         .two .multimap {
1192                 grid-column: span 1;
1193         }
1194
1195         /*#dashboard .seventh:nth-child(7n+1),
1196         #dashboard .seventh:nth-child(7n+2),
1197         #dashboard .seventh:nth-child(7n+3),
1198         #dashboard .seventh:nth-child(7n+4) {
1199                 width: calc(100% / 4 - (3/4*.1rem));
1200         }
1201
1202         #dashboard .seventh:nth-child(7n+5),
1203         #dashboard .seventh:nth-child(7n+6),
1204         #dashboard .seventh:nth-child(7n+7) {
1205                 width: calc(100% / 3 - (2/3*.1rem));
1206         }*/
1207 }
1208
1209 @media ( max-width: 700px ) {
1210         .session .three {
1211                 grid-template-columns: repeat(1, 1fr);
1212         }
1213
1214         .multimap img {
1215                 width: 100%;
1216                 width: calc(100% - .2rem);
1217                 height: auto;
1218         }
1219 }
1220
1221 @media ( max-width: 600px ) {
1222         form label {
1223                 margin: 0 auto;
1224         }
1225
1226         form input,
1227         form option,
1228         form optgroup,
1229         form select,
1230         form textarea,
1231         form section section {
1232                 width: 12rem;
1233                 margin: 0 auto;
1234         }
1235
1236         #logo {
1237                 flex-direction: column;
1238         }
1239
1240         .seven {
1241                 grid-template-columns: repeat(2, 1fr);
1242         }
1243
1244         /*.grid section:nth-child(7n) {
1245                 grid-column: span 2;
1246                 margin-bottom: .5rem;
1247         }
1248
1249         .grid section:only-child,
1250         .grid section:last-child,
1251         .grid section:last-of-type {
1252                 margin-bottom: 0;
1253         }*/
1254
1255         .calendar .sunday {
1256                 margin-bottom: .5rem;
1257         }
1258
1259         .calendar .sunday:only-child,
1260         .calendar .sunday:last-child {
1261                 margin-bottom: 0;
1262         }
1263
1264         .four {
1265                 grid-template-columns: repeat(2, 1fr);
1266         }
1267
1268         .three {
1269                 grid-template-columns: repeat(1, 1fr);
1270         }
1271
1272         .four .multimap {
1273                 grid-column: span 2;
1274         }
1275
1276         .three .multimap {
1277                 grid-column: span 1;
1278         }
1279
1280         .location .two {
1281                 grid-template-columns: repeat(1, 1fr);
1282         }
1283
1284         /*#dashboard .seventh:nth-child(n) {
1285                 width: calc(100% / 2 - .1rem);
1286         }
1287
1288         #dashboard .seventh:nth-child(7n) {
1289                 width: calc(100%);
1290         }*/
1291
1292         /*.city .two,
1293         .location .two {
1294                 grid-template-columns: 1fr;
1295         }
1296
1297         .city .grid article,
1298         .location .grid article {
1299                 overflow: hidden;
1300         }*/
1301 }
1302
1303 @media ( max-width: 450px ) {
1304         #header div {
1305                 flex-direction: column;
1306         }
1307
1308         #title {
1309                 text-align: center;
1310         }
1311
1312         #logo {
1313                 flex-direction: row;
1314         }
1315
1316         dd, p, #footer {
1317                 font-size: 110%;
1318         }
1319
1320         a, dd, figcaption, #footer {
1321                 /*XXX: required to validate Tap targets are sized appropriately*/
1322                 line-height: 3rem;
1323         }
1324
1325         figure,
1326         .calendar a {
1327                 line-height: normal;
1328         }
1329
1330         form .row,
1331         .grid,
1332         .form,
1333         #footer {
1334                 flex-direction: column;
1335         }
1336
1337         form label {
1338                 text-align: center;
1339         }
1340
1341         .seven {
1342                 grid-template-columns: repeat(1, 1fr);
1343         }
1344
1345         /*.grid section:nth-child(n) {
1346                 grid-column: auto;
1347         }*/
1348         .calendar .sunday {
1349                 grid-column: auto;
1350         }
1351
1352         .four {
1353                 grid-template-columns: repeat(1, 1fr);
1354         }
1355
1356         .four .multimap {
1357                 grid-column: span 1;
1358         }
1359 }
1360
1361 @media ( max-width: 320px ) {
1362         #logo {
1363                 flex-direction: column;
1364         }
1365
1366         #title {
1367                 white-space: normal;
1368         }
1369 }
1370
1371 @media ( max-width: 260px ) {
1372         .col label,
1373         .col input,
1374         .col option,
1375         .col optgroup,
1376         .col select,
1377         .col textarea {
1378                 width: 10rem;
1379         }
1380
1381         .col button {
1382                 width: 10rem;
1383         }
1384 }