Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Delta Between Two Patch Sets: static/css/main.css

Issue 29453600: Issue 4961 - Fix card group field alignment on acceptableads.com (Closed) Base URL: https://hg.adblockplus.org/web.acceptableads.com
Left Patch Set: Rebase Created July 5, 2017, 9:19 p.m.
Right Patch Set: Move styling for cards on committee page to committee/index.html Created July 25, 2017, 1:33 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « pages/solutions/index.html ('k') | static/scss/_variables.scss » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 .m-a-na { 1 .m-a-na {
2 margin: 0 0 !important; } 2 margin: 0 0 !important; }
3 3
4 .m-t-na { 4 .m-t-na {
5 margin-top: 0 !important; } 5 margin-top: 0 !important; }
6 6
7 .m-b-na { 7 .m-b-na {
8 margin-bottom: 0 !important; } 8 margin-bottom: 0 !important; }
9 9
10 .m-x-na { 10 .m-x-na {
(...skipping 410 matching lines...) Expand 10 before | Expand all | Expand 10 after
421 border: none; 421 border: none;
422 outline: none; } 422 outline: none; }
423 423
424 h2 + .row, .center blockquote + .row, 424 h2 + .row, .center blockquote + .row,
425 h1 + .row, 425 h1 + .row,
426 h2 + hr + .row, .center blockquote + hr + .row, 426 h2 + hr + .row, .center blockquote + hr + .row,
427 h1 + hr + .row { 427 h1 + hr + .row {
428 margin-top: -16px; } 428 margin-top: -16px; }
429 429
430 .section { 430 .section {
431 margin: 96px 0; } 431 margin-bottom: 96px; }
432 @media (max-width: 768px) {
433 .section {
434 margin-bottom: 32px; } }
432 435
433 .section .section { 436 .section .section {
434 margin: 64px 0; } 437 margin-bottom: 64px; }
438 @media (max-width: 768px) {
439 .section .section {
440 margin-bottom: 32px; } }
435 441
436 h1, h2, .center blockquote, h3, .group.items .item::before, h4, h5, h6 .h1, .h2, .h3, .h4, .h5, .h6 { 442 h1, h2, .center blockquote, h3, .group.items .item::before, h4, h5, h6 .h1, .h2, .h3, .h4, .h5, .h6 {
437 text-transform: uppercase; 443 text-transform: uppercase;
438 font-weight: 700; 444 font-weight: 700;
439 line-height: 120%; } 445 line-height: 120%; }
440 446
441 h1, 447 h1,
442 .h1 { 448 .h1 {
443 margin: 96px 0 64px 0; 449 margin: 96px 0 64px 0;
444 text-transform: none; 450 text-transform: none;
445 font-size: 42px; 451 font-size: 42px;
446 font-weight: 300; } 452 font-weight: 300; }
453 @media (max-width: 768px) {
454 h1,
455 .h1 {
456 font-size: 30px;
457 margin-top: 32px; } }
458 @media (max-width: 544px) {
459 h1,
460 .h1 {
461 font-size: 26px;
462 margin-bottom: 44px; } }
447 463
448 h2, .center blockquote, 464 h2, .center blockquote,
449 .h2 { 465 .h2 {
450 margin: 64px 0 32px 0; 466 margin: 64px 0 32px 0;
451 font-size: 28px; 467 font-size: 28px;
452 font-weight: 700; } 468 font-weight: 700; }
469 @media (max-width: 768px) {
470 h2, .center blockquote,
471 .h2 {
472 font-size: 24px;
473 margin-top: 32px; } }
474 @media (max-width: 544px) {
475 h2, .center blockquote,
476 .h2 {
477 font-size: 22px;
478 margin-bottom: 16px; } }
453 479
454 h3, .card h1, .card h2, .card .center blockquote, .center .card blockquote, .car d h3, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .car d .h4, .card .h5, .card .h6, .group.items .item::before, 480 h3, .card h1, .card h2, .card .center blockquote, .center .card blockquote, .car d h3, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .car d .h4, .card .h5, .card .h6, .group.items .item::before,
455 .h3, 481 .h3,
456 .group.items .item h1, 482 .group.items .item h1,
457 .group.items .item h2, 483 .group.items .item h2,
458 .group.items .item .center blockquote, 484 .group.items .item .center blockquote,
459 .center .group.items .item blockquote, 485 .center .group.items .item blockquote,
460 .group.items .item h3, 486 .group.items .item h3,
461 .group.items .item .item::before, 487 .group.items .item .item::before,
462 .group.items .item h4, 488 .group.items .item h4,
463 .group.items .item h5, 489 .group.items .item h5,
464 .group.items .item h6 .h1, 490 .group.items .item h6 .h1,
465 h6 .group.items .item .h1, 491 h6 .group.items .item .h1,
466 .group.items .item .h2, 492 .group.items .item .h2,
467 .group.items .item .h3, 493 .group.items .item .h3,
468 .group.items .item .h4, 494 .group.items .item .h4,
469 .group.items .item .h5, 495 .group.items .item .h5,
470 .group.items .item .h6 { 496 .group.items .item .h6 {
471 margin: 64px 0 32px 0; 497 margin: 64px 0 32px 0;
472 font-size: 22px; 498 font-size: 22px;
473 font-weight: 700; } 499 font-weight: 700; }
500 @media (max-width: 768px) {
501 h3, .card h1, .card h2, .card .center blockquote, .center .card blockquote, .card h3, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6, .group.items .item::before,
502 .h3,
503 .group.items .item h1,
504 .group.items .item h2,
505 .group.items .item .center blockquote,
506 .center .group.items .item blockquote,
507 .group.items .item h3,
508 .group.items .item .item::before,
509 .group.items .item h4,
510 .group.items .item h5,
511 .group.items .item h6 .h1,
512 h6 .group.items .item .h1,
513 .group.items .item .h2,
514 .group.items .item .h3,
515 .group.items .item .h4,
516 .group.items .item .h5,
517 .group.items .item .h6 {
518 font-size: 20px;
519 margin-top: 32px; } }
520 @media (max-width: 544px) {
521 h3, .card h1, .card h2, .card .center blockquote, .center .card blockquote, .card h3, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6, .group.items .item::before,
522 .h3,
523 .group.items .item h1,
524 .group.items .item h2,
525 .group.items .item .center blockquote,
526 .center .group.items .item blockquote,
527 .group.items .item h3,
528 .group.items .item .item::before,
529 .group.items .item h4,
530 .group.items .item h5,
531 .group.items .item h6 .h1,
532 h6 .group.items .item .h1,
533 .group.items .item .h2,
534 .group.items .item .h3,
535 .group.items .item .h4,
536 .group.items .item .h5,
537 .group.items .item .h6 {
538 margin-bottom: 16px; } }
474 539
475 h4, 540 h4,
476 .h4 { 541 .h4 {
477 margin: 32px 0 16px 0; 542 margin: 32px 0 16px 0;
478 font-size: 20px; 543 font-size: 20px;
479 font-weight: 700; } 544 font-weight: 700; }
545 @media (max-width: 544px) {
546 h4,
547 .h4 {
548 font-size: 18px; } }
480 549
481 h5, .card.list h1, .card.list h2, .card.list .center blockquote, .center .card.l ist blockquote, .card.list h3, .card.list .group.items .item::before, .group.ite ms .card.list .item::before, .card.list h4, .card.list h5, .card.list h6 .h1, h6 .card.list .h1, .card.list .h2, .card.list .h3, .card.list .h4, .card.list .h5, .card.list .h6, #footer h1, #footer h2, #footer .center blockquote, .center #fo oter blockquote, #footer h3, #footer .group.items .item::before, .group.items #f ooter .item::before, #footer h4, #footer h5, #footer h6 .h1, h6 #footer .h1, #fo oter .h2, #footer .h3, #footer .h4, #footer .h5, #footer .h6, 550 h5, .card.list h1, .card.list h2, .card.list .center blockquote, .center .card.l ist blockquote, .card.list h3, .card.list .group.items .item::before, .group.ite ms .card.list .item::before, .card.list h4, .card.list h5, .card.list h6 .h1, h6 .card.list .h1, .card.list .h2, .card.list .h3, .card.list .h4, .card.list .h5, .card.list .h6, #footer h1, #footer h2, #footer .center blockquote, .center #fo oter blockquote, #footer h3, #footer .group.items .item::before, .group.items #f ooter .item::before, #footer h4, #footer h5, #footer h6 .h1, h6 #footer .h1, #fo oter .h2, #footer .h3, #footer .h4, #footer .h5, #footer .h6,
482 .h5 { 551 .h5 {
483 margin: 16px 0; 552 margin: 16px 0;
484 font-size: 18px; } 553 font-size: 18px; }
554 @media (max-width: 544px) {
555 h5, .card.list h1, .card.list h2, .card.list .center blockquote, .center .ca rd.list blockquote, .card.list h3, .card.list .group.items .item::before, .group .items .card.list .item::before, .card.list h4, .card.list h5, .card.list h6 .h1 , h6 .card.list .h1, .card.list .h2, .card.list .h3, .card.list .h4, .card.list .h5, .card.list .h6, #footer h1, #footer h2, #footer .center blockquote, .center #footer blockquote, #footer h3, #footer .group.items .item::before, .group.item s #footer .item::before, #footer h4, #footer h5, #footer h6 .h1, h6 #footer .h1, #footer .h2, #footer .h3, #footer .h4, #footer .h5, #footer .h6,
556 .h5 {
557 font-size: 16px; } }
485 558
486 h6, 559 h6,
487 .h6 { 560 .h6 {
488 margin: 16px 0; 561 margin: 16px 0;
489 font-size: 18px; 562 font-size: 18px;
490 font-weight: 400; } 563 font-weight: 400; }
564 @media (max-width: 544px) {
565 h6,
566 .h6 {
567 font-size: 16px; } }
491 568
492 html, 569 html,
493 body { 570 body {
494 color: #161616; 571 color: #161616;
495 font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetic a Neue", sans-serif; 572 font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetic a Neue", sans-serif;
496 font-size: 18px; 573 font-size: 18px;
497 font-weight: 300; 574 font-weight: 300;
498 line-height: 120%; } 575 line-height: 120%; }
576 @media (max-width: 544px) {
577 html,
578 body {
579 font-size: 16px; } }
499 580
500 small, 581 small,
501 .small { 582 .small {
502 margin-bottom: 8px; 583 margin-bottom: 8px;
503 font-size: 70%; 584 font-size: 70%;
504 line-height: 80%; } 585 line-height: 80%; }
505 586
506 blockquote, 587 blockquote,
507 p, 588 p,
508 ul, 589 ul,
(...skipping 91 matching lines...) Expand 10 before | Expand all | Expand 10 after
600 dt { 681 dt {
601 margin: 16px 0; } 682 margin: 16px 0; }
602 683
603 dd { 684 dd {
604 margin: 16px 0 32px 0; } 685 margin: 16px 0 32px 0; }
605 686
606 dt { 687 dt {
607 font-size: 20px; 688 font-size: 20px;
608 text-transform: uppercase; 689 text-transform: uppercase;
609 font-weight: 700; } 690 font-weight: 700; }
691 @media (max-width: 768px) {
692 dt {
693 font-size: 18px; } }
610 694
611 blockquote { 695 blockquote {
612 margin: 0; 696 margin: 0;
613 padding: 0 32px; 697 padding: 0 32px;
614 text-transform: uppercase; 698 text-transform: uppercase;
615 font-size: 18px; 699 font-size: 18px;
616 font-weight: 400; 700 font-weight: 400;
617 font-style: italic; } 701 font-style: italic; }
618 702
619 html[dir="ltr"] blockquote { 703 html[dir="ltr"] blockquote {
620 border-left: 4px solid #E1E1E1; } 704 border-left: 4px solid #E1E1E1; }
621 705
622 html[dir="rtl"] blockquote { 706 html[dir="rtl"] blockquote {
623 border-right: 4px solid #E1E1E1; } 707 border-right: 4px solid #E1E1E1; }
624 708
625 html .center blockquote { 709 html .center blockquote {
626 border: none; } 710 border: none; }
627 711
628 .center blockquote { 712 .center blockquote {
629 margin: 0; 713 margin: 0;
630 padding: 96px 0; 714 padding: 64px 0;
631 font-style: normal; } 715 font-style: normal; }
716 @media (max-width: 768px) {
717 .center blockquote {
718 font-size: 22px;
719 padding: 32px 0; } }
632 720
633 .center blockquote p:last-child { 721 .center blockquote p:last-child {
634 margin-top: -8px; } 722 margin-top: -8px; }
635 723
636 cite { 724 cite {
637 font-size: 14px; 725 font-size: 14px;
638 font-style: normal; } 726 font-style: normal; }
639 727
640 cite::before { 728 cite::before {
641 content: "-- "; } 729 content: "-- "; }
(...skipping 27 matching lines...) Expand all
669 width: 24px; 757 width: 24px;
670 height: 3px; 758 height: 3px;
671 margin: 16px 0; 759 margin: 16px 0;
672 border: none; 760 border: none;
673 background-color: #161616; } 761 background-color: #161616; }
674 762
675 h1 + hr, 763 h1 + hr,
676 h2 + hr, .center blockquote + hr { 764 h2 + hr, .center blockquote + hr {
677 position: absolute; 765 position: absolute;
678 margin: -32px 0 32px 0; } 766 margin: -32px 0 32px 0; }
767 @media (max-width: 544px) {
768 h1 + hr,
769 h2 + hr, .center blockquote + hr {
770 margin-top: -21px; } }
679 771
680 .center hr { 772 .center hr {
681 margin: 16px auto; } 773 margin: 16px auto; }
682 774
683 table { 775 table {
684 border-collapse: collapse !important; } 776 border-collapse: collapse !important; }
685 777
686 table td, 778 table td,
687 table th { 779 table th {
688 background-color: #FFFFFF; } 780 background-color: #FFFFFF; }
(...skipping 83 matching lines...) Expand 10 before | Expand all | Expand 10 after
772 864
773 .inline-buttons { 865 .inline-buttons {
774 margin-top: 64px; 866 margin-top: 64px;
775 margin-bottom: 64px; 867 margin-bottom: 64px;
776 text-align: right; } 868 text-align: right; }
777 869
778 @media (min-width: 544px) { 870 @media (min-width: 544px) {
779 .inline-buttons a, 871 .inline-buttons a,
780 .inline-buttons input { 872 .inline-buttons input {
781 margin-left: 16px; } } 873 margin-left: 16px; } }
874
875 .btn-container {
876 margin-top: 16px;
877 margin-bottom: 16px; }
878 @media (min-width: 544px) {
879 .btn-container {
880 margin-top: 32px;
881 margin-bottom: 32px; } }
882 @media (min-width: 768px) {
883 .btn-container {
884 margin-top: 64px;
885 margin-bottom: 64px; } }
782 886
783 input[type="email"], 887 input[type="email"],
784 input[type="number"], 888 input[type="number"],
785 input[type="search"], 889 input[type="search"],
786 input[type="text"], 890 input[type="text"],
787 input[type="tel"], 891 input[type="tel"],
788 input[type="url"], 892 input[type="url"],
789 input[type="password"], 893 input[type="password"],
790 textarea, 894 textarea,
791 select { 895 select {
(...skipping 145 matching lines...) Expand 10 before | Expand all | Expand 10 after
937 1041
938 .card { 1042 .card {
939 padding: 32px; 1043 padding: 32px;
940 color: #161616; 1044 color: #161616;
941 border: 1px solid #161616; 1045 border: 1px solid #161616;
942 background-color: #FFFFFF; } 1046 background-color: #FFFFFF; }
943 1047
944 .card h1, .card h2, .card .center blockquote, .center .card blockquote, .card h3 , .card .group.items .item::before, .group.items .card .item::before, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5 , .card .h6 { 1048 .card h1, .card h2, .card .center blockquote, .center .card blockquote, .card h3 , .card .group.items .item::before, .group.items .card .item::before, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5 , .card .h6 {
945 height: 48px; 1049 height: 48px;
946 margin: 16px 0 16px 0; } 1050 margin: 16px 0 16px 0; }
947 1051 @media (max-width: 544px) {
948 .card article .card-heading { 1052 .card h1, .card h2, .card .center blockquote, .center .card blockquote, .car d h3, .card .group.items .item::before, .group.items .card .item::before, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6 {
949 height: auto; } 1053 height: auto; } }
950 @media (min-width: 768px) {
951 .card article .card-heading {
952 height: 120px; } }
953 1054
954 .card-icon { 1055 .card-icon {
955 margin: 16px 0; } 1056 margin: 16px 0; }
956 1057
957 .center .card-icon { 1058 .center .card-icon {
958 margin: 48px 0 32px 0; } 1059 margin: 48px 0 32px 0; }
1060 @media (max-width: 768px) {
1061 .center .card-icon {
1062 margin-top: 32px; } }
1063 @media (max-width: 544px) {
1064 .center .card-icon {
1065 margin-top: 16px; } }
959 1066
960 img.card-icon, 1067 img.card-icon,
961 .card-icon img { 1068 .card-icon img {
962 height: 48px; } 1069 height: 48px; }
963 1070
964 .card img.block { 1071 .card img.block {
965 margin: 0; } 1072 margin: 0; }
966 1073
967 .card-summary { 1074 .card-summary {
968 margin: 32px 0; 1075 margin: 32px 0;
969 height: 64px; } 1076 height: 64px; }
1077 @media (max-width: 544px) {
1078 .card-summary {
1079 margin: 16px;
1080 height: auto; } }
970 1081
971 .card button, .card input[type="button"], .card input[type="reset"], .card input [type="submit"], .card .btn-outline-primary, .card .btn-outline-accent, .card .b tn-primary, .card .btn-accent { 1082 .card button, .card input[type="button"], .card input[type="reset"], .card input [type="submit"], .card .btn-outline-primary, .card .btn-outline-accent, .card .b tn-primary, .card .btn-accent {
972 display: block; 1083 display: block;
973 width: 100%; 1084 width: 100%;
974 margin-bottom: -8px; } 1085 margin-bottom: -8px; }
975 1086
976 .card li::before { 1087 .card li::before {
977 width: 32px; 1088 width: 32px;
978 text-align: left; } 1089 text-align: left; }
979 1090
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after
1035 left: 0; } 1146 left: 0; }
1036 1147
1037 html[dir="rtl"] .items .item::before { 1148 html[dir="rtl"] .items .item::before {
1038 right: 0; } 1149 right: 0; }
1039 1150
1040 .group-container { 1151 .group-container {
1041 width: 100%; 1152 width: 100%;
1042 max-width: 1140px; 1153 max-width: 1140px;
1043 margin: 0 auto; 1154 margin: 0 auto;
1044 padding: 96px 0; } 1155 padding: 96px 0; }
1156 @media (max-width: 992px) {
1157 .group-container {
1158 padding: 8px; } }
1045 1159
1046 .group-container > h1, .group-container > h2, .center .group-container > blockqu ote, .group-container > h3, .group.items .group-container > .item::before, .grou p-container > h4, .group-container > h5, h6 .group-container > .h1, .group-conta iner > .h2, .group-container > .h3, .group-container > .h4, .group-container > . h5, .group-container > .h6, 1160 .group-container > h1, .group-container > h2, .center .group-container > blockqu ote, .group-container > h3, .group.items .group-container > .item::before, .grou p-container > h4, .group-container > h5, h6 .group-container > .h1, .group-conta iner > .h2, .group-container > .h3, .group-container > .h4, .group-container > . h5, .group-container > .h6,
1047 .group-container > p { 1161 .group-container > p {
1048 margin: 96px auto; 1162 margin: 64px auto;
1049 padding: 0 16px; } 1163 padding: 0 16px; }
1164
1165 @media (max-width: 992px) {
1166 .group-container > p {
1167 margin: 32px auto; } }
1050 1168
1051 .group { 1169 .group {
1052 display: table; 1170 display: table;
1053 width: 100%; 1171 width: 100%;
1054 table-layout: fixed; } 1172 table-layout: fixed; }
1055 1173
1056 .group-container .group { 1174 .group-container .group {
1057 margin-bottom: 0; } 1175 margin-bottom: 0; }
1058 1176
1059 .group-container > h1, .group-container > h2, .center .group-container > blockqu ote, .group-container > h3, .group.items .group-container > .item::before, .grou p-container > h4, .group-container > h5, h6 .group-container > .h1, .group-conta iner > .h2, .group-container > .h3, .group-container > .h4, .group-container > . h5, .group-container > .h6 { 1177 .group-container > h1, .group-container > h2, .center .group-container > blockqu ote, .group-container > h3, .group.items .group-container > .item::before, .grou p-container > h4, .group-container > h5, h6 .group-container > .h1, .group-conta iner > .h2, .group-container > .h3, .group-container > .h4, .group-container > . h5, .group-container > .h6 {
1060 margin-top: 0; } 1178 margin-top: 0; }
1179 @media (max-width: 992px) {
1180 .group-container > h1, .group-container > h2, .center .group-container > blo ckquote, .group-container > h3, .group.items .group-container > .item::before, . group-container > h4, .group-container > h5, h6 .group-container > .h1, .group-c ontainer > .h2, .group-container > .h3, .group-container > .h4, .group-container > .h5, .group-container > .h6 {
1181 margin: 32px auto; } }
1061 1182
1062 .group .card, 1183 .group .card,
1063 .group .item { 1184 .group .item {
1064 display: table-cell; 1185 display: table-cell;
1065 vertical-align: top; } 1186 vertical-align: top; }
1066 1187
1067 .group.items .item::before { 1188 .group.items .item::before {
1068 margin-top: 16px; 1189 margin-top: 16px;
1069 text-align: center; 1190 text-align: center;
1070 width: 45px; } 1191 width: 45px; }
(...skipping 115 matching lines...) Expand 10 before | Expand all | Expand 10 after
1186 .group.cards { 1307 .group.cards {
1187 display: grid; 1308 display: grid;
1188 grid-template-columns: repeat(1, 1fr); } 1309 grid-template-columns: repeat(1, 1fr); }
1189 @media (min-width: 350px) { 1310 @media (min-width: 350px) {
1190 .group.cards { 1311 .group.cards {
1191 grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } } 1312 grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } }
1192 .group.cards .card { 1313 .group.cards .card {
1193 display: inline-grid; 1314 display: inline-grid;
1194 width: 100%; 1315 width: 100%;
1195 grid-template-rows: auto 1fr auto; } 1316 grid-template-rows: auto 1fr auto; }
1196 @media all { 1317 .group.cards .card-summary {
1197 .group.cards .card-summary { 1318 height: auto; }
1198 height: auto; } }
1199 @media (min-width: 992px) { 1319 @media (min-width: 992px) {
1200 .group-4.cards { 1320 .group-4.cards {
1201 grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); } } 1321 grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); } }
1202 @media (min-width: 768px) { 1322 @media (min-width: 768px) {
1203 .group-5.cards { 1323 .group-5.cards {
1204 grid-template-columns: repeat(auto-fit, minmax(33.3%, 1fr)); } } 1324 grid-template-columns: repeat(auto-fit, minmax(33.3%, 1fr)); } }
1205 @media (min-width: 992px) { 1325 @media (min-width: 992px) {
1206 .group-5.cards { 1326 .group-5.cards {
1207 grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); } } 1327 grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); } }
1208 @media all { 1328 .group-5.cards > div:nth-child(4),
1209 .group-5.cards > div:nth-child(4), 1329 .group-5.cards > div:nth-child(5) {
1210 .group-5.cards > div:nth-child(5) { 1330 margin-left: 0; }
1211 margin-left: 0; } } 1331 @media (min-width: 768px) and (max-width: 991px) {
1212 @media (min-width: 768px) and (max-width: 992px) {
1213 .group-5.cards > div:nth-child(4) { 1332 .group-5.cards > div:nth-child(4) {
1214 margin-left: 50%; } } 1333 margin-left: 50%; } }
1215 @media (min-width: 700px) and (max-width: 992px) { 1334 @media (min-width: 700px) and (max-width: 991px) {
1216 .group-5.cards > div:nth-child(5) { 1335 .group-5.cards > div:nth-child(5) {
1217 margin-left: 50%; } } } 1336 margin-left: 50%; } } }
1218 1337
1219 .masthead-img > img { 1338 .masthead-img > img {
1220 width: 100%; 1339 width: 100%;
1221 margin: 32px 0; } 1340 margin: 32px 0; }
1222 1341
1223 @media (max-width: 767px) { 1342 @media (max-width: 767px) {
1224 .masthead.bg-info { 1343 .masthead.bg-info {
1225 background-color: #FFFFFF; } } 1344 background-color: #FFFFFF; } }
(...skipping 11 matching lines...) Expand all
1237 .masthead .container { 1356 .masthead .container {
1238 padding: 0; } 1357 padding: 0; }
1239 .col-6.masthead-body { 1358 .col-6.masthead-body {
1240 padding: 16px 32px; } 1359 padding: 16px 32px; }
1241 .masthead-img img { 1360 .masthead-img img {
1242 padding: 32px 16px 0 16px; 1361 padding: 32px 16px 0 16px;
1243 margin: 0; } } 1362 margin: 0; } }
1244 1363
1245 .footnote { 1364 .footnote {
1246 margin-top: 64px; } 1365 margin-top: 64px; }
1366 @media (max-width: 768px) {
1367 .footnote {
1368 margin-top: 32px; } }
1247 1369
1248 .footnote-ref { 1370 .footnote-ref {
1249 font-weight: 700; 1371 font-weight: 700;
1250 font-size: 12px; } 1372 font-size: 12px; }
1251 1373
1252 .footnote li > p { 1374 .footnote li > p {
1253 margin: 0; 1375 margin: 0;
1254 display: inline-block; } 1376 display: inline-block; }
1255 1377
1256 #navbar { 1378 #navbar {
1257 width: 100%; 1379 width: 100%;
1258 height: 64px; 1380 height: 64px;
1259 padding: 0 32px; 1381 padding: 0 32px;
1260 background-color: #FFFFFF; 1382 background-color: #FFFFFF;
1261 line-height: 64px; } 1383 line-height: 64px; }
1262 #navbar img { 1384 #navbar img {
1263 height: 16px; 1385 height: 16px;
1264 margin: 0; } 1386 margin: 0; }
1265 1387
1266 .js #navbar { 1388 .js #navbar {
1267 position: fixed; 1389 position: fixed;
1268 z-index: 1; 1390 z-index: 1;
1269 top: 0; 1391 top: 0;
1270 left: 0; } 1392 left: 0; }
1271 1393
1394 .site-title {
1395 margin: 0;
1396 font-size: 17px;
1397 line-height: 64px;
1398 word-spacing: -2px; }
1399
1400 .site-title a {
1401 color: #161616;
1402 text-decoration: none;
1403 font-weight: 300; }
1404
1405 .site-title a strong {
1406 font-weight: 400; }
1407
1272 @media (min-width: 1200px) { 1408 @media (min-width: 1200px) {
1273 html[dir="rtl"] #navbar-logo { 1409 html[dir="rtl"] .site-title {
1274 margin-right: 208px; } 1410 margin-right: 208px; }
1275 html[dir="ltr"] #navbar-logo { 1411 html[dir="ltr"] .site-title {
1276 margin-left: 208px; } } 1412 margin-left: 208px; } }
1277 1413
1278 @media (max-width: 1199px) { 1414 @media (max-width: 1199px) {
1279 .js #navbar { 1415 .js #navbar {
1280 display: none; } } 1416 display: none; } }
1281 1417
1282 #sidebar { 1418 #sidebar {
1283 text-transform: uppercase; 1419 text-transform: uppercase;
1284 color: #FFFFFF; 1420 color: #FFFFFF;
1285 background-color: #161616; 1421 background-color: #161616;
1286 font-size: 16px; 1422 font-size: 16px;
1287 font-weight: 400; 1423 font-weight: 400;
1288 line-height: 100%; } 1424 line-height: 100%; }
1289 #sidebar ul, 1425 #sidebar ul,
1290 #sidebar li { 1426 #sidebar li {
1291 margin: 0; 1427 margin: 0;
1292 padding: 0; 1428 padding: 0;
1293 text-align: inherit; } 1429 text-align: inherit; }
1294 #sidebar a,
1295 #sidebar a:hover,
1296 #sidebar a:active {
1297 display: block;
1298 text-decoration: none;
1299 color: inherit; }
1300 #sidebar #sidebar-brand { 1430 #sidebar #sidebar-brand {
1301 height: 64px; 1431 height: 64px;
1302 line-height: 64px; } 1432 line-height: 64px; }
1303 #sidebar #sidebar-logo { 1433 #sidebar #sidebar-logo {
1304 display: block; 1434 display: block;
1305 padding: 0 32px; 1435 padding: 0 32px;
1306 text-align: inherit; 1436 text-align: inherit;
1307 background-color: #8CC63E; } 1437 background-color: #8CC63E; }
1308 #sidebar #sidebar-logo img { 1438 #sidebar #sidebar-logo img {
1309 width: 32px; 1439 width: 32px;
1310 height: 32px; 1440 height: 32px;
1311 vertical-align: middle; } 1441 vertical-align: middle; }
1312 #sidebar #sidebar-open, 1442 #sidebar #sidebar-open,
1313 #sidebar #sidebar-close, 1443 #sidebar #sidebar-close,
1314 #sidebar #sidebar-title { 1444 #sidebar .site-title {
1315 display: none; } 1445 display: none; }
1316 #sidebar #sidebar-close img { 1446 #sidebar #sidebar-close img {
1317 width: 20px; 1447 width: 20px;
1318 height: 20px; } 1448 height: 20px; }
1319 #sidebar #sidebar-open img { 1449 #sidebar #sidebar-open img {
1320 width: 36px; 1450 width: 36px;
1321 height: 18px; } 1451 height: 18px; }
1452
1453 #sidebar-menus a,
1454 #sidebar-menus a:hover,
1455 #sidebar-menus a:active {
1456 display: block;
1457 text-decoration: none;
1458 color: inherit; }
1322 1459
1323 @media (min-width: 1200px) { 1460 @media (min-width: 1200px) {
1324 #sidebar { 1461 #sidebar {
1325 position: absolute; 1462 position: absolute;
1326 top: 0; 1463 top: 0;
1327 width: 208px; } 1464 width: 208px; }
1328 .js #sidebar { 1465 .js #sidebar {
1329 position: fixed; 1466 position: fixed;
1330 z-index: 2; 1467 z-index: 2;
1331 height: 100%; } 1468 height: 100%; }
(...skipping 12 matching lines...) Expand all
1344 left: 0; 1481 left: 0;
1345 overflow: hidden; 1482 overflow: hidden;
1346 width: 100%; 1483 width: 100%;
1347 height: 64px; } 1484 height: 64px; }
1348 .js #sidebar.open { 1485 .js #sidebar.open {
1349 height: 100%; } 1486 height: 100%; }
1350 html[dir="ltr"].js #sidebar { 1487 html[dir="ltr"].js #sidebar {
1351 text-align: left; } 1488 text-align: left; }
1352 html[dir="rtl"].js #sidebar { 1489 html[dir="rtl"].js #sidebar {
1353 text-align: right; } 1490 text-align: right; }
1354 #sidebar #sidebar-title, 1491 #sidebar .site-title,
1355 #sidebar #sidebar-open { 1492 #sidebar #sidebar-open {
1356 display: block; } 1493 display: block; }
1357 #sidebar.open #sidebar-open { 1494 #sidebar.open #sidebar-open {
1358 display: none; } 1495 display: none; }
1359 #sidebar.open #sidebar-close { 1496 #sidebar.open #sidebar-close {
1360 display: block; } 1497 display: block; }
1361 #sidebar #sidebar-brand { 1498 #sidebar #sidebar-brand {
1362 background-color: #FFFFFF; } 1499 background-color: #FFFFFF; }
1363 #sidebar #sidebar-open, 1500 #sidebar #sidebar-open,
1364 #sidebar #sidebar-close, 1501 #sidebar #sidebar-close,
1365 #sidebar #sidebar-logo, 1502 #sidebar #sidebar-logo,
1366 #sidebar #sidebar-title { 1503 #sidebar .site-title {
1367 padding: 0 16px; } 1504 padding: 0 16px; }
1368 #sidebar #sidebar-open, 1505 #sidebar #sidebar-open,
1369 #sidebar #sidebar-close, 1506 #sidebar #sidebar-close,
1370 #sidebar #sidebar-title { 1507 #sidebar .site-title {
1371 height: 64px; 1508 height: 64px;
1372 line-height: 64px; } 1509 line-height: 64px; }
1373 #sidebar #sidebar-open, 1510 #sidebar #sidebar-open,
1374 #sidebar #sidebar-close { 1511 #sidebar #sidebar-close {
1375 width: 64px; 1512 width: 64px;
1376 min-width: 64px; 1513 min-width: 64px;
1377 margin: 0; 1514 margin: 0;
1378 color: #FFFFFF; 1515 color: #FFFFFF;
1379 border: none; 1516 border: none;
1380 background-color: #161616; 1517 background-color: #161616;
1381 font-size: 32px; } 1518 font-size: 32px; }
1382 #sidebar #sidebar-title img {
1383 display: inline-block;
1384 height: 16px;
1385 vertical-align: middle; }
1386 html[dir="ltr"] #sidebar-open, 1519 html[dir="ltr"] #sidebar-open,
1387 html[dir="ltr"] #sidebar-close, 1520 html[dir="ltr"] #sidebar-close,
1388 html[dir="ltr"] #sidebar-logo, 1521 html[dir="ltr"] #sidebar-logo,
1389 html[dir="ltr"] #sidebar-title { 1522 html[dir="ltr"] #sidebar .site-title {
1390 float: left; } 1523 float: left; }
1391 html[dir="rtl"] #sidebar-open, 1524 html[dir="rtl"] #sidebar-open,
1392 html[dir="rtl"] #sidebar-close, 1525 html[dir="rtl"] #sidebar-close,
1393 html[dir="rtl"] #sidebar-logo, 1526 html[dir="rtl"] #sidebar-logo,
1394 html[dir="rtl"] #sidebar-title { 1527 html[dir="rtl"] #sidebar .site-title {
1395 float: right; } } 1528 float: right; } }
1396 1529
1397 #primary-navigation li { 1530 #primary-navigation li {
1398 position: relative; } 1531 position: relative; }
1399 1532
1400 #primary-navigation ul ul li { 1533 #primary-navigation ul ul li {
1401 color: #8CC63E; 1534 color: #8CC63E;
1402 font-size: 14px; } 1535 font-size: 14px; }
1403 1536
1404 #primary-navigation .active > a { 1537 #primary-navigation .active > a {
(...skipping 165 matching lines...) Expand 10 before | Expand all | Expand 10 after
1570 padding-left: 208px; } 1703 padding-left: 208px; }
1571 html[dir="rtl"] .outer { 1704 html[dir="rtl"] .outer {
1572 padding-right: 208px; } } 1705 padding-right: 208px; } }
1573 1706
1574 #footer { 1707 #footer {
1575 padding-top: 64px; 1708 padding-top: 64px;
1576 padding-bottom: 96px; 1709 padding-bottom: 96px;
1577 font-size: 70%; 1710 font-size: 70%;
1578 background-color: #292929; 1711 background-color: #292929;
1579 color: #FFFFFF; } 1712 color: #FFFFFF; }
1713 @media (max-width: 768px) {
1714 #footer {
1715 padding-top: 32px;
1716 padding-bottom: 64px; } }
1717 @media (max-width: 544px) {
1718 #footer {
1719 padding-top: 16px;
1720 padding-bottom: 16px; } }
1580 #footer h1, #footer h2, #footer .center blockquote, .center #footer blockquote , #footer h3, #footer .group.items .item::before, .group.items #footer .item::be fore, #footer h4, #footer h5, #footer h6 .h1, h6 #footer .h1, #footer .h2, #foot er .h3, #footer .h4, #footer .h5, #footer .h6 { 1721 #footer h1, #footer h2, #footer .center blockquote, .center #footer blockquote , #footer h3, #footer .group.items .item::before, .group.items #footer .item::be fore, #footer h4, #footer h5, #footer h6 .h1, h6 #footer .h1, #footer .h2, #foot er .h3, #footer .h4, #footer .h5, #footer .h6 {
1581 position: relative; 1722 position: relative;
1582 margin-bottom: 32px; 1723 margin-bottom: 32px;
1583 padding-top: 8px; } 1724 padding-top: 8px; }
1725 @media (max-width: 544px) {
1726 #footer h1, #footer h2, #footer .center blockquote, .center #footer blockq uote, #footer h3, #footer .group.items .item::before, .group.items #footer .item ::before, #footer h4, #footer h5, #footer h6 .h1, h6 #footer .h1, #footer .h2, # footer .h3, #footer .h4, #footer .h5, #footer .h6 {
1727 margin-bottom: 16px; } }
1584 #footer h1::before, #footer h2::before, #footer .center blockquote::before, .c enter #footer blockquote::before, #footer h3::before, #footer .group.items .item ::before, .group.items #footer .item::before, #footer h4::before, #footer h5::be fore, #footer h6 .h1::before, h6 #footer .h1::before, #footer .h2::before, #foot er .h3::before, #footer .h4::before, #footer .h5::before, #footer .h6::before { 1728 #footer h1::before, #footer h2::before, #footer .center blockquote::before, .c enter #footer blockquote::before, #footer h3::before, #footer .group.items .item ::before, .group.items #footer .item::before, #footer h4::before, #footer h5::be fore, #footer h6 .h1::before, h6 #footer .h1::before, #footer .h2::before, #foot er .h3::before, #footer .h4::before, #footer .h5::before, #footer .h6::before {
1585 display: block; 1729 display: block;
1586 position: absolute; 1730 position: absolute;
1587 top: 0; 1731 top: 0;
1588 left: 0; 1732 left: 0;
1589 width: 16px; 1733 width: 16px;
1590 height: 0; 1734 height: 0;
1591 content: " "; 1735 content: " ";
1592 border-top: 2px solid #FFFFFF; } 1736 border-top: 2px solid #FFFFFF; }
1593 #footer a { 1737 #footer a {
1594 color: #FFFFFF; } 1738 color: #FFFFFF; }
1595 #footer a:hover { 1739 #footer a:hover {
1596 text-decoration: underline; 1740 text-decoration: underline;
1597 color: #8CC63E !important; } 1741 color: #8CC63E !important; }
1598 #footer p { 1742 #footer p {
1599 color: #E1E1E1; } 1743 color: #E1E1E1; }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld