koha-dev.rot13.org Git - srvgit/blob - koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss

   1 /* Bootstrap variable customizations */
   2 $headings-color: #727272;
   3 $headings-font-weight: 600;
   4 $enable-gradients: false;
   5
   6 $info:#2679cc;
   7 $danger: rgb(185, 32, 32);
   8
   9 $font-size-base: 1rem;
  10 $h1-font-size: $font-size-base * 1.5;
  11 $h2-font-size: $font-size-base * 1.4;
  12 $h3-font-size: $font-size-base * 1.3;
  13 $h4-font-size: $font-size-base * 1.2;
  14 $h5-font-size: $font-size-base * 1.1;
  15 $h6-font-size: $font-size-base;
  16
  17 $input-btn-focus-width: 1px;
  18 $input-btn-focus-color: #85CA11;
  19 $input-btn-focus-box-shadow: 0 1px 1px $input-btn-focus-width $input-btn-focus-color;
  20
  21 $color: #999999;
  22 $links: #0076B2;
  23 $links-hover: #005580;
  24 $footer-height: 45px;
  25
  26 $sci-link-color: #0076B6;
  27 $sci-heading-color: #727272;
  28
  29 @mixin shadowed {
  30     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
  31 }
  32
  33 @mixin border-radius-all($radius: 3px) {
  34     border-radius: $radius;
  35 }
  36
  37
  38 /* Bootstrap imports */
  39 @import "../../../../../node_modules/bootstrap/scss/functions";
  40 @import "../../../../../node_modules/bootstrap/scss/variables";
  41 @import "../../../../../node_modules/bootstrap/scss/mixins";
  42 @import "../../../../../node_modules/bootstrap/scss/alert";
  43 // @import "../../../../../node_modules/bootstrap/scss/badge";
  44 @import "../../../../../node_modules/bootstrap/scss/breadcrumb";
  45 @import "../../../../../node_modules/bootstrap/scss/button-group";
  46 @import "../../../../../node_modules/bootstrap/scss/buttons";
  47 // @import "../../../../../node_modules/bootstrap/scss/card";
  48 // @import "../../../../../node_modules/bootstrap/scss/carousel";
  49 @import "../../../../../node_modules/bootstrap/scss/close";
  50 // @import "../../../../../node_modules/bootstrap/scss/code";
  51 @import "../../../../../node_modules/bootstrap/scss/custom-forms";
  52 @import "../../../../../node_modules/bootstrap/scss/dropdown";
  53 @import "../../../../../node_modules/bootstrap/scss/forms";
  54 @import "../../../../../node_modules/bootstrap/scss/grid";
  55 // @import "../../../../../node_modules/bootstrap/scss/images";
  56 @import "../../../../../node_modules/bootstrap/scss/input-group";
  57 // @import "../../../../../node_modules/bootstrap/scss/jumbotron";
  58 // @import "../../../../../node_modules/bootstrap/scss/list-group";
  59 // @import "../../../../../node_modules/bootstrap/scss/media";
  60 @import "../../../../../node_modules/bootstrap/scss/modal";
  61 @import "../../../../../node_modules/bootstrap/scss/navbar";
  62 @import "../../../../../node_modules/bootstrap/scss/nav";
  63 @import "../../../../../node_modules/bootstrap/scss/pagination";
  64 // @import "../../../../../node_modules/bootstrap/scss/popover";
  65 @import "../../../../../node_modules/bootstrap/scss/print";
  66 // @import "../../../../../node_modules/bootstrap/scss/progress";
  67 @import "../../../../../node_modules/bootstrap/scss/reboot";
  68 @import "../../../../../node_modules/bootstrap/scss/root";
  69 // @import "../../../../../node_modules/bootstrap/scss/spinners";
  70 @import "../../../../../node_modules/bootstrap/scss/tables";
  71 // @import "../../../../../node_modules/bootstrap/scss/toasts";
  72 // @import "../../../../../node_modules/bootstrap/scss/tooltip";
  73 @import "../../../../../node_modules/bootstrap/scss/transitions";
  74 @import "../../../../../node_modules/bootstrap/scss/type";
  75 @import "../../../../../node_modules/bootstrap/scss/utilities";
  76
  77 /* Koha imports */
  78 @import "fonts";
  79
  80 // Sticky footer styles
  81 html,
  82 body {
  83     height: 100%;
  84     // The html and body elements cannot have any padding or margin.
  85 }
  86
  87 body {
  88     background: #FCF9FC none;
  89     display: flex;
  90     height: 100%;
  91     flex-direction: column;
  92 }
  93
  94 a {
  95     &:link,
  96     &:visited {
  97         color: $links;
  98
  99         &.btn {
 100             color: #FFF;
 101
 102             &.btn-link {
 103                 color: $links;
 104
 105                 &.disabled {
 106                     color: #333;
 107                 }
 108             }
 109         }
 110     }
 111 }
 112
 113 a,
 114 button {
 115     &:hover,
 116     &:active {
 117         color: $links-hover;
 118
 119         &.btn {
 120             color: #FFF;
 121
 122             &.btn-link {}
 123         }
 124     }
 125
 126     &.btn-link {
 127
 128         &:focus,
 129         &:hover {
 130             // border: 1px solid $input-btn-focus-color;
 131             box-shadow: none;
 132             text-decoration: none;
 133         }
 134     }
 135 }
 136
 137 caption {
 138     caption-side: top;
 139     color: #727272;
 140     font-size: 110%;
 141     font-weight: bold;
 142     margin: 0;
 143     text-align: left;
 144 }
 145
 146 h1 {
 147     &#libraryname {
 148         background: transparent url( "../images/logo-koha.png" ) no-repeat scroll 0%;
 149         border: 0;
 150         float: left !important;
 151         margin: 0;
 152         padding: 0;
 153         width: 120px;
 154
 155         a {
 156             border: 0;
 157             cursor: pointer;
 158             display: block;
 159             height: 0 !important;
 160             margin: 0;
 161             overflow: hidden;
 162             padding: 40px 0 0;
 163             text-decoration: none;
 164             width: 120px;
 165         }
 166     }
 167 }
 168
 169 .dropdown-menu-right {
 170     left: auto;
 171     right: 0;
 172 }
 173
 174 .fa {
 175     &.fa-icon-black,
 176     &.fa-icon-white {
 177         color: #000;
 178     }
 179
 180     &.danger {
 181         color: #C00;
 182     }
 183 }
 184
 185 .navbar-nav {
 186     margin-right: 0;
 187
 188     & > li {
 189         & > a {
 190             color: #777777;
 191             font-weight: bold;
 192         }
 193
 194         & > .dropdown-menu {
 195             &.dropdown-menu-right {
 196                 &::after {
 197                     left: unset;
 198                     right: 10px;
 199                 }
 200
 201                 &::before {
 202                     left: unset;
 203                     right: 9px;
 204                 }
 205             }
 206         }
 207     }
 208
 209 }
 210
 211 .main {
 212     background-color: #FFF;
 213     border: 1px solid #F0F3F3;
 214     margin: 15px;
 215     padding: 1rem 0;
 216 }
 217
 218 .alert {
 219     &.alert-info,
 220     &.alert-warning {
 221         color: #000;
 222     }
 223 }
 224
 225 .btn-primary,
 226 .btn-primary:link,
 227 .btn-primary:visited {
 228     $base-bg: #77b50f;
 229     background-color: $base-bg;
 230     background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
 231     background-position: 0;
 232     border: 1px solid darken( $base-bg, 5% );
 233     font-family: 'NotoSans';
 234
 235     &:hover,
 236     &:active,
 237     &:focus {
 238         $base-bg: darken( $base-bg, 2);
 239         background-color: $base-bg;
 240         background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
 241         border-color: darken($base-bg, 5%);
 242         box-shadow: 0 0 0 1px lighten(saturate($base-bg, 0.5), 4);
 243     }
 244 }
 245
 246 .btn-danger,
 247 .btn-danger:link,
 248 .btn-danger:visited {
 249     $base-bg: #B92020;
 250     background-color: $base-bg;
 251     background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
 252     background-position: 0;
 253     border: 1px solid darken( $base-bg, 5% );
 254     font-family: 'NotoSans';
 255
 256     &:hover,
 257     &:active,
 258     &:focus {
 259         $base-bg: darken( $base-bg, 2);
 260         background-color: $base-bg;
 261         background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
 262     }
 263 }
 264
 265 input[type="text"],
 266 input[type="password"],
 267 select,
 268 textarea,
 269 .form-control {
 270     &:focus {
 271         border-color: #85ca11;
 272         box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194,228,136,.6)
 273     }
 274 }
 275
 276 [class^="icon-"] {
 277     vertical-align: 0;
 278 }
 279 [class*=" icon-"] {
 280     vertical-align: 0;
 281 }
 282
 283 /* jQuery UI standard tabs */
 284 .ui-tabs-nav .ui-tabs-active a,
 285 .ui-tabs-nav a:hover,
 286 .ui-tabs-nav a:focus,
 287 .ui-tabs-nav a:active,
 288 .ui-tabs-nav span.a {
 289     background: none repeat scroll 0 0 transparent;
 290     outline: 0 none;
 291 }
 292
 293 .ui-widget,
 294 .ui-widget a,
 295 .ui-widget input,
 296 .ui-widget select,
 297 .ui-widget textarea,
 298 .ui-widget button {
 299     font-family: 'NotoSans';
 300     font-size: inherit;
 301 }
 302
 303 ul {
 304     &.ui-tabs-nav {
 305         li {
 306             list-style: none;
 307         }
 308     }
 309 }
 310
 311 .ui-tabs {
 312     .ui-tabs-nav {
 313         li {
 314             background: #F0F3F3 none;
 315             border-color: #D8D8D8;
 316             margin-right: .4em;
 317
 318             &.ui-tabs-active {
 319                 background-color: #FFF;
 320                 border: 1px solid #D8D8D8;
 321                 border-bottom: 0;
 322
 323                 a {
 324                     color: #727272;
 325                     font-weight: bold;
 326                 }
 327
 328                 &.ui-state-hover {
 329                     background: #FFF none;
 330                     &.ui-state-active {
 331                         background: #FFF none;
 332                     }
 333                 }
 334             }
 335
 336             &.ui-state-default.ui-state-hover {
 337                 background: #F3F3F3 none;
 338             }
 339         }
 340     }
 341
 342     .ui-tabs-panel {
 343         border: 1px solid #D8D8D8;
 344         margin-bottom: 1em;
 345     }
 346
 347     &.ui-widget-content {
 348         background: transparent none;
 349         border: 0;
 350     }
 351
 352     .ui-state-default {
 353         a {
 354             &:link {
 355                 color: #006699;
 356             }
 357
 358             &:visited {
 359                 color: #006699;
 360             }
 361         }
 362     }
 363
 364     .ui-state-hover a {
 365         &:link {
 366             color: #990033;
 367         }
 368
 369         &:visited {
 370             color: #990033;
 371         }
 372     }
 373 }
 374
 375 .ui-tabs-nav {
 376     &.ui-widget-header {
 377         background: none;
 378         border: 0;
 379     }
 380 }
 381
 382 .ui-corner-top {
 383     border-radius: 0px;
 384 }
 385
 386 .statictabs {
 387     ul {
 388         background: none repeat scroll 0 0 transparent;
 389         border: 0 none;
 390         border-bottom-left-radius: 4px;
 391         border-bottom-right-radius: 4px;
 392         border-top-left-radius: 4px;
 393         border-top-right-radius: 4px;
 394         color: #222222;
 395         font-size: 100%;
 396         font-weight: bold;
 397         line-height: 1.3;
 398         list-style: none outside none;
 399         margin: 0;
 400         outline: 0 none;
 401         padding: .2em .2em 0;
 402         text-decoration: none;
 403
 404         &::before {
 405             content: "";
 406             display: table;
 407         }
 408
 409         &::after {
 410             clear: both;
 411             content: "";
 412             display: table;
 413         }
 414     }
 415
 416     li {
 417         background: none repeat scroll 0 0 #E6F0F2;
 418         border: 1px solid #B9D8D9;
 419         border-bottom: 0 none !important;
 420         border-top-left-radius: 4px;
 421         border-top-right-radius: 4px;
 422         color: #555555;
 423         float: left;
 424         font-weight: normal;
 425         list-style: none outside none;
 426         margin-bottom: 0;
 427         margin-right: .4em;
 428         padding: 0;
 429         position: relative;
 430         top: 1px;
 431         white-space: nowrap;
 432
 433         &.active {
 434             background-color: #FFFFFF;
 435             color: #212121;
 436             font-weight: normal;
 437             padding-bottom: 1px;
 438
 439             a {
 440                 background: none repeat scroll 0 0 transparent;
 441                 color: #000000;
 442                 cursor: text;
 443                 font-weight: bold;
 444                 outline: 0 none;
 445             }
 446         }
 447
 448         a {
 449             color: #004D99;
 450             cursor: pointer;
 451             float: left;
 452             padding: .5em 1em;
 453             text-decoration: none;
 454
 455             &:hover {
 456                 background-color: #EDF4F5;
 457                 border-top-left-radius: 4px;
 458                 border-top-right-radius: 4px;
 459                 color: #538200;
 460             }
 461         }
 462     }
 463
 464     .tabs-container {
 465         background: none repeat scroll 0 0 transparent;
 466         border: 1px solid #B9D8D9;
 467         border-bottom-left-radius: 4px;
 468         border-bottom-right-radius: 4px;
 469         color: #222222;
 470         display: block;
 471         padding: 1em 1.4em;
 472     }
 473 }
 474
 475 /* End jQueryUI tab styles */
 476
 477 /* jQuery UI Datepicker */
 478
 479 .ui-datepicker {
 480     @include shadowed;
 481     table {
 482         border: 0;
 483         border-collapse: collapse;
 484         font-size: .9em;
 485         margin: 0 0 .4em;
 486         width: 100%;
 487     }
 488
 489     th {
 490         background: transparent none;
 491         border: 0;
 492         font-weight: bold;
 493         padding: .7em .3em;
 494         text-align: center;
 495     }
 496 }
 497
 498 .ui-datepicker-trigger {
 499     margin: 0 3px;
 500     vertical-align: middle;
 501 }
 502
 503 /* End jQueryUI datepicker styles */
 504
 505
 506 /* jQueryUI Core */
 507
 508 .ui-widget-content {
 509     background: #FFFFFF none;
 510     border: 1px solid #AAA;
 511     color: #222222;
 512
 513     a:link,
 514     a:visited {
 515         color: $links;
 516     }
 517     a:hover,
 518     a:active {
 519         color: $links-hover;
 520     }
 521 }
 522
 523 .ui-widget-header {
 524     background: #E6F0F2 none;
 525     border: 1px solid #AAA;
 526     color: #222222;
 527     font-weight: bold;
 528 }
 529
 530 .ui-state-default,
 531 .ui-widget-content .ui-state-default,
 532 .ui-widget-header .ui-state-default {
 533     background: #F4F8F9 none;
 534     border: 1px solid #AAA;
 535     color: #555555;
 536     font-weight: normal;
 537 }
 538
 539 .ui-state-hover,
 540 .ui-widget-content .ui-state-hover,
 541 .ui-widget-header .ui-state-hover,
 542 .ui-state-focus,
 543 .ui-widget-content .ui-state-focus,
 544 .ui-widget-header .ui-state-focus {
 545     background: #E6F0F2 none;
 546     border: 1px solid #AAA;
 547     color: #212121;
 548     font-weight: normal;
 549 }
 550
 551 .ui-state-active,
 552 .ui-widget-content .ui-state-active,
 553 .ui-widget-header .ui-state-active {
 554     background: #FFFFFF none;
 555     border: 1px solid #AAAAAA;
 556     color: #212121;
 557     font-weight: normal;
 558 }
 559
 560 .ui-state-highlight,
 561 .ui-widget-content .ui-state-highlight,
 562 .ui-widget-header .ui-state-highlight {
 563     background: #FBF9EE;
 564     border: 1px solid #FCEFA1;
 565     color: #363636;
 566 }
 567
 568 .ui-state-error,
 569 .ui-widget-content .ui-state-error,
 570 .ui-widget-header .ui-state-error {
 571     background: #FEF1EC;
 572     border: 1px solid #CD0A0A;
 573     color: #CD0A0A;
 574 }
 575
 576 /* end jQueryUI core */
 577
 578 .close {
 579     color: #0088CC;
 580     filter: none;
 581     float: none;
 582     font-size: inherit;
 583     font-weight: normal;
 584     opacity: inherit;
 585     position: inherit;
 586     right: auto;
 587     text-shadow: none;
 588     top: auto;
 589 }
 590
 591 .close:hover {
 592     color: #005580;
 593     filter: inherit;
 594     font-size: inherit;
 595     opacity: inherit;
 596 }
 597
 598 /* Redefine a new style for Bootstrap's class "close" since we use that already */
 599 /* Use <a class="closebtn" href="#">&times;</a> */
 600
 601 .modal-header .closebtn {
 602     margin-top: 2px;
 603 }
 604
 605 .closebtn {
 606     color: #000000;
 607     float: right;
 608     font-size: 20px;
 609     font-weight: bold;
 610     line-height: 20px;
 611     opacity: .2;
 612     text-shadow: 0 1px 0 #FFFFFF;
 613
 614     &:hover {
 615         color: #000000;
 616         cursor: pointer;
 617         opacity: .4;
 618         text-decoration: none;
 619     }
 620 }
 621
 622 button {
 623     &.btn-link {
 624         color: $links;
 625         &:focus,
 626         &:hover {
 627             color: $links-hover;
 628             text-decoration: none;
 629         }
 630     }
 631
 632     &.closebtn {
 633         background: transparent;
 634         border: 0;
 635         cursor: pointer;
 636         padding: 0;
 637     }
 638
 639     &.remove {
 640         &:hover {
 641             color: #900;
 642
 643             i {
 644                 &.fa {
 645                     color: #c60000;
 646                 }
 647             }
 648         }
 649     }
 650 }
 651
 652 .btn-default {
 653     color: #212529;
 654     background-color: #666666;
 655     border-color: #666666;
 656 }
 657
 658 .btn-link {
 659     &.btn-lg {
 660         font-size: 100%;
 661     }
 662 }
 663
 664 .btn.disabled,
 665 .btn[disabled] {
 666     &:hover {
 667         color: #333;
 668         filter: alpha(opacity=65);
 669         opacity: 0.65;
 670     }
 671     i {
 672         &.fa,
 673         &.fa:hover {
 674             color: #333;
 675             filter: alpha(opacity=65);
 676             opacity: 0.65;
 677         }
 678     }
 679 }
 680
 681 .modal {
 682     form {
 683         margin: 0;
 684     }
 685 }
 686
 687 .nav-link {
 688     &.active {
 689         font-weight: bold;
 690     }
 691 }
 692
 693 .tab-content {
 694     padding: 15px 0;
 695 }
 696
 697 #logo {
 698     background: transparent url( "../images/koha-green-logo.svg" ) no-repeat scroll 0%;
 699     border: 0;
 700     float: left !important;
 701     margin: 0;
 702     padding: 0;
 703     width: 100px;
 704
 705     a {
 706         border: 0;
 707         cursor: pointer;
 708         display: block;
 709         height: 0 !important;
 710         margin: 0;
 711         overflow: hidden;
 712         padding: 40px 0 0;
 713         text-decoration: none;
 714         width: 100px;
 715         &:focus {
 716             background-color: transparent;
 717         }
 718     }
 719 }
 720
 721 #changelanguage {
 722     background-color: #FFF;
 723     border-top: 1px solid #EEE;
 724     padding: 0 1rem;
 725     flex-shrink: 0;
 726
 727     .navbar-text {
 728         font-weight: bold;
 729     }
 730 }
 731
 732 .fonts-loaded {
 733     body,
 734     button,
 735     input,
 736     optgroup,
 737     option,
 738     select,
 739     textarea {
 740         font-family: "NotoSans";
 741     }
 742 }
 743
 744 .navbar {
 745     .divider-vertical {
 746         border-left-color: #FCF9FC;
 747         border-right-color: #FCF9FC;
 748     }
 749
 750     .nav {
 751         li {
 752             &.dropdown {
 753                 > a {
 754                     &:focus {
 755                         .caret {
 756                             border-bottom-color: #85CA11;
 757                             border-top-color: #85CA11;
 758                         }
 759                     }
 760
 761                     &:hover {
 762                         .caret {
 763                             border-bottom-color: #85CA11;
 764                             border-top-color: #85CA11;
 765                         }
 766                     }
 767                 }
 768             }
 769         }
 770     }
 771 }
 772
 773 .navbar-inverse {
 774     .brand {
 775         color: #9FE1FF;
 776         font-weight: bold;
 777     }
 778
 779     .navbar-inner {
 780         background: #FCF9FC none;
 781         border-color: #FCF9FC;
 782         box-shadow: none;
 783
 784         ul {
 785             &.dropdown-menu {
 786                 a {
 787                     &:hover {
 788                         color: #FFF;
 789                     }
 790                 }
 791             }
 792         }
 793
 794         li {
 795             > a {
 796                 color: #727272;
 797                 font-weight: bold;
 798                 text-shadow: none;
 799
 800                 &:hover {
 801                     color: #85CA11;
 802                 }
 803
 804                 &:focus {
 805                     color: #85CA11;
 806                 }
 807             }
 808
 809             &.dropdown {
 810                 > a {
 811                     &:hover {
 812                         .caret {
 813                             border-bottom-color: #85CA11;
 814                             border-top-color: #85CA11;
 815                         }
 816                     }
 817
 818                     &:focus {
 819                         .caret {
 820                             border-bottom-color: #85CA11;
 821                             border-top-color: #85CA11;
 822                         }
 823                     }
 824                 }
 825
 826                 &.open {
 827                     > .dropdown-toggle {
 828                         background-color: transparent;
 829                         color: #85CA11;
 830
 831                         .caret {
 832                             border-bottom-color: #85CA11;
 833                             border-top-color: #85CA11;
 834
 835                             &:hover {
 836                                 border-bottom-color: #85CA11;
 837                                 border-top-color: #85CA11;
 838                             }
 839                         }
 840                     }
 841                 }
 842             }
 843         }
 844     }
 845 }
 846
 847 .navbar-inner {
 848     background: #FCF9FC none;
 849 }
 850
 851 .navbar-fixed-bottom {
 852     &.navbar-static-bottom {
 853         position: static;
 854     }
 855
 856     .navbar-inner {
 857         box-shadow: none;
 858         min-height: $footer-height;
 859     }
 860 }
 861
 862 // Wrapper for page content to push down footer
 863 #wrap {
 864     height: auto !important;
 865     height: 100%;
 866     margin: 0 auto -#{$footer-height + 1};
 867     // Negative indent footer by its height
 868     min-height: 100%;
 869     padding-left: 40px;
 870     padding-right: 40px;
 871 }
 872
 873 #changelanguage {
 874     clear: both;
 875     // Set the fixed height of the footer here
 876     min-height: $footer-height;
 877
 878     .nav {
 879         > .active {
 880             > p {
 881                 padding: 0 15px;
 882             }
 883         }
 884     }
 885 }
 886
 887 #i18nMenu {
 888     margin-left: 1em;
 889
 890     li {
 891         font-size: 85%;
 892
 893         a {
 894             &:hover {
 895                 color: #85CA11;
 896             }
 897         }
 898
 899         li {
 900             font-size: 100%;
 901
 902             > a {
 903                 font-size: 100%;
 904
 905                 &:hover {
 906                     color: #FFF;
 907                 }
 908             }
 909
 910         }
 911
 912         a {
 913             color: $links;
 914         }
 915     }
 916
 917     .dropdown-menu {
 918         li {
 919             p {
 920                 clear: both;
 921                 display: block;
 922                 font-weight: normal;
 923                 line-height: 20px;
 924                 padding: 3px 20px;
 925                 white-space: nowrap;
 926             }
 927         }
 928     }
 929 }
 930
 931 .dropdown-menu {
 932     border-radius: 0px;
 933     > li {
 934         > a {
 935             font-size: 90%;
 936             &:hover {
 937                 background: #85ca11 none;
 938             }
 939             &:focus {
 940             background: #85ca11 none;
 941             }
 942         }
 943     }
 944 }
 945
 946 #koha_url {
 947     p {
 948         color: #666666;
 949         float: right;
 950         margin: 0;
 951     }
 952 }
 953
 954 #wrapper {
 955     flex: 1 0 auto;
 956     padding-left: 40px;
 957     padding-right: 40px;
 958 }