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