koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss

   1 @import "mixins";
   2 @import "tables";
   3 @import "flatpickr";
   4
   5 ::selection {
   6     background: #538200;
   7     color: #FFFFFF;
   8 }
   9
  10 a {
  11     &:link,
  12     &:visited {
  13         color: #004D99;
  14         text-decoration: none;
  15     }
  16
  17     &:hover,
  18     &:active {
  19         color: #538200;
  20         text-decoration: none;
  21     }
  22
  23     &:hover {
  24         .term {
  25             color: #FF9090;
  26         }
  27     }
  28
  29     &.btn {
  30         &:link,
  31         &:visited {
  32             color: #333333;
  33         }
  34
  35         &.btn-link {
  36             &:link,
  37             &:visited {
  38                 color: #004D99;
  39             }
  40
  41             &:hover {
  42                 color: #538200;
  43             }
  44         }
  45     }
  46
  47     &.cancel {
  48         padding-left: 1em;
  49     }
  50
  51     &.cartRemove {
  52         color: #CC3333;
  53         font-size: 90%;
  54         margin: 0;
  55         padding: 0;
  56     }
  57
  58     &.clear_date {
  59         color: #C33;
  60         font-size: 130%;
  61
  62         &:hover {
  63             color: #FF9090;
  64         }
  65     }
  66
  67     &.close {
  68         &:hover {
  69             color: #538200;
  70         }
  71     }
  72
  73
  74     &.csv {
  75         background-image: url("../img/famfamfam/silk/page_white_excel.png");
  76     }
  77
  78     &.dropdown-toggle {
  79         white-space: nowrap;
  80     }
  81
  82     &.incart {
  83         color: #666;
  84     }
  85
  86     &.disabled {
  87         color: #999999;
  88     }
  89
  90     &.document {
  91         background-position: left middle;
  92         background-repeat: no-repeat;
  93         display: inline-block;
  94         min-height: 20px;
  95         padding-left: 20px;
  96     }
  97
  98     &.highlight_toggle {
  99         display: none;
 100     }
 101
 102     .localimage {
 103         img {
 104             border: 1px solid #0000CC;
 105             margin: 0 .5em;
 106             padding: .3em;
 107         }
 108     }
 109
 110     &.pdf {
 111         background-image: url("../img/famfamfam/silk/page_white_acrobat.png");
 112     }
 113
 114     &.submit {
 115         @include default-button;
 116         display: inline-block;
 117
 118         &:active {
 119             border: 1px inset #999999;
 120         }
 121
 122         &:disabled {
 123             @include disabled-button;
 124         }
 125     }
 126
 127     &.term {
 128         text-decoration: underline;
 129     }
 130
 131     &.xml {
 132         background-image: url("../img/famfamfam/silk/page_white_code.png");
 133     }
 134
 135 }
 136
 137 aside {
 138     h5 {
 139         font-size: 100%;
 140         margin: .5em 0;
 141     }
 142
 143     fieldset {
 144         &.brief {
 145             padding: .4em .7em;
 146
 147             button + button,
 148             input + input {
 149                 margin-left: 5px;
 150             }
 151
 152             fieldset {
 153                 border-width: 1px;
 154                 border-radius: 0;
 155                 margin: 0 0 .5em 0;
 156                 padding: .5em;
 157
 158                 legend {
 159                     font-size: 95%;
 160                     margin: 0;
 161                 }
 162
 163                 &.action {
 164                     margin-left: 0;
 165                     padding: .5em 0;
 166                 }
 167             }
 168
 169             input, select {
 170                 height: calc(1.5em + .75rem + 2px);
 171             }
 172
 173             label {
 174                 margin: .5em 0 0 0;
 175             }
 176
 177             li {
 178                 &.checkbox {
 179                     label {
 180                         display: inline;
 181                         margin-left: 0;
 182                     }
 183                 }
 184
 185                 &.dateinsert {
 186                     label {
 187                         display: inline;
 188                     }
 189
 190                     span {
 191                         &.label {
 192                             display: inline;
 193                         }
 194                     }
 195                 }
 196
 197                 &.radio {
 198                     padding: .7em 0;
 199
 200                     input {
 201                         padding: .3em 0;
 202                     }
 203
 204                     label {
 205                         display: inline;
 206                     }
 207
 208                     span {
 209                         &.label {
 210                             display: inline;
 211                         }
 212                     }
 213                 }
 214             }
 215
 216             ol {
 217                 margin: 0;
 218                 padding: 0;
 219             }
 220
 221             select,
 222             [type="text"] {
 223                 width: 100%;
 224             }
 225
 226             .hasDatepicker,
 227             .flatpickr-input {
 228                 margin-right: 3px;
 229                 width: calc(100% - 20px);
 230             }
 231         }
 232     }
 233 }
 234
 235 button {
 236     @include default-button;
 237
 238     &:active {
 239         border: 1px inset #999999;
 240     }
 241
 242     &:disabled {
 243         @include disabled-button;
 244     }
 245
 246     &.closebtn {
 247         background: transparent;
 248         border: 0;
 249         cursor: pointer;
 250         padding: 0;
 251     }
 252 }
 253
 254 main {
 255     &::after {
 256         clear: both;
 257         content: " ";
 258         display: table;
 259     }
 260 }
 261
 262 body {
 263     font-family: $font-main;
 264     font-size: 13px;
 265     line-height: 1.22;
 266     padding: 0 0 4em;
 267     text-align: left;
 268
 269     &.nobackdrop {
 270         .modal-backdrop {
 271             opacity: 0;
 272         }
 273     }
 274 }
 275
 276 br {
 277     &.clear {
 278         clear: both;
 279         line-height: 1px;
 280     }
 281 }
 282
 283 form {
 284     display: inline;
 285
 286     &.confirm {
 287         display: block;
 288         font-size: 110%;
 289         line-height: 130%;
 290
 291         ul {
 292             padding: 1em 0;
 293
 294             li {
 295                 list-style-type: none;
 296             }
 297         }
 298
 299         .notification_method {
 300             background-color: #FFE;
 301             border: 1px solid #CCC;
 302             border-radius: 5px;
 303             display: inline-block;
 304             margin: .5em 0;
 305             padding: .1em .3em;
 306
 307             &.none {
 308                 background-color: #EEE;
 309             }
 310         }
 311
 312         .hold-found-barcode {
 313             display: inline-block;
 314             font-size: 90%;
 315         }
 316     }
 317 }
 318
 319 h1 {
 320     font-size: 161.6%;
 321     font-weight: bold;
 322
 323     &#logo {
 324         border: 0 none;
 325         float: left;
 326         margin: .75em .3em .75em .7em;
 327         padding: 0;
 328         width: 180px;
 329     }
 330 }
 331
 332 h2 {
 333     font-size: 146.5%;
 334     font-weight: bold;
 335 }
 336
 337 h3 {
 338     font-size: 131%;
 339     font-weight: bold;
 340 }
 341
 342 h4 {
 343     font-size: 116%;
 344     font-weight: bold;
 345 }
 346
 347 h5 {
 348     font-size: 100%;
 349     font-weight: bold;
 350 }
 351
 352 h6 {
 353     font-size: 93%;
 354     font-weight: bold;
 355 }
 356
 357 h1,
 358 h2,
 359 h3,
 360 h4,
 361 h5,
 362 h6 {
 363     margin: .3em 0;
 364 }
 365
 366 hr {
 367     clear: both;
 368     margin: 1em 0;
 369 }
 370
 371 p {
 372     margin: .5em 0;
 373 }
 374
 375 strong {
 376     font-weight: bold;
 377
 378     em {
 379         font-style: italic;
 380         font-weight: bold;
 381     }
 382
 383     em & {
 384         font-style: italic;
 385         font-weight: bold;
 386     }
 387 }
 388
 389 em,
 390 cite {
 391     font-style: italic;
 392 }
 393
 394 input,
 395 textarea {
 396     &:focus {
 397         border-color: #538200;
 398         border-radius: 4px;
 399     }
 400 }
 401
 402 input {
 403     &[type="checkbox"],
 404     &[type="radio"] {
 405         margin: 0;
 406         vertical-align: middle;
 407     }
 408
 409     &[type="submit"],
 410     &[type="button"] {
 411         &:active {
 412             border: 1px inset #999999;
 413         }
 414     }
 415
 416     &[type="submit"],
 417     &[type="reset"],
 418     &[type="button"] {
 419         @include default-button;
 420
 421         &:active {
 422             border: 1px inset #999999;
 423         }
 424
 425         &:disabled {
 426             @include disabled-button;
 427         }
 428     }
 429
 430     &.submit {
 431         @include default-button;
 432
 433         &:active {
 434             border: 1px inset #999999;
 435         }
 436
 437         &:disabled {
 438             @include disabled-button;
 439         }
 440     }
 441 }
 442
 443 .input-warning {
 444     background-color: #FF9;
 445     border-color: #900;
 446 }
 447
 448 label,
 449 .label {
 450     color: #000;
 451     display: inline;
 452     font-size: inherit;
 453     font-weight: normal;
 454     max-width: inherit;
 455     padding: 0;
 456     vertical-align: middle;
 457
 458     input {
 459         &[type="checkbox"],
 460         &[type="radio"],
 461         &[type="checkbox"],
 462         &[type="radio"] {
 463             margin-top: 0;
 464         }
 465     }
 466
 467     &.circ_barcode {
 468         display: inline-block;
 469         font-size: 105%;
 470         font-weight: bold;
 471         margin-bottom: 1rem;
 472         max-width: 75%;
 473     }
 474
 475     &.required {
 476         color: #C00;
 477     }
 478 }
 479
 480 .subfield-label {
 481     font-style: italic;
 482
 483     span {
 484         &.subfield-code {
 485             font-weight: bold;
 486         }
 487     }
 488 }
 489
 490 .members-update-table {
 491     padding-top: 10px;
 492 }
 493
 494 #navmenulist {
 495     li {
 496         border-bottom: 1px solid #EEE;
 497         list-style: $nav-menu-bullet;
 498         padding: .2em 0;
 499
 500         a {
 501             text-decoration: none;
 502
 503             &.current {
 504                 font-weight: bold;
 505             }
 506         }
 507     }
 508 }
 509
 510 .main {
 511     margin-bottom: $language-footer-min-height * 1.5;
 512     margin-top: 1em;
 513 }
 514
 515 #login_controls {
 516     padding: .4em .5em;
 517     position: absolute;
 518     right: .5em;
 519 }
 520
 521 ul {
 522     padding-left: 1.1em;
 523
 524     li {
 525         list-style-type: disc;
 526
 527         input {
 528             &.submit {
 529                 font-size: 87%;
 530                 padding: 2px;
 531             }
 532         }
 533
 534         li {
 535             list-style-type: circle;
 536         }
 537     }
 538
 539     .toolbar {
 540         padding-left: 0;
 541
 542         button {
 543             font-family: $font-main;
 544             padding-bottom: 2px;
 545         }
 546
 547         li {
 548             display: inline;
 549             list-style: none;
 550         }
 551     }
 552
 553     &.budget_hierarchy {
 554         margin-left: 0;
 555         padding-left: 0;
 556
 557         li {
 558             display: inline;
 559
 560             &::after {
 561                 content: " -> ";
 562             }
 563
 564             &:first-child {
 565                 &::after {
 566                     content: "";
 567                 }
 568             }
 569
 570             &:last-child {
 571                 &::after {
 572                     content: "";
 573                 }
 574             }
 575         }
 576     }
 577
 578     // For Font Awesome icon bullets
 579     &.fa-ul {
 580         li {
 581             list-style-type: none;
 582         }
 583     }
 584
 585     &.ui-tabs-nav {
 586         li {
 587             list-style: none;
 588         }
 589     }
 590 }
 591
 592 ol {
 593     padding-left: 1.5em;
 594
 595     li {
 596         list-style: decimal;
 597     }
 598
 599     &.bibliodetails {
 600         float: left;
 601         margin: 0 0 1em 1em;
 602     }
 603 }
 604
 605
 606 .gradient {
 607     background-image: linear-gradient(to bottom, rgb(230, 240, 242) 1%, rgb(255, 255, 255) 99%);
 608     display: inline-block;
 609     width: 100%;
 610 }
 611
 612 .cart-controls {
 613     border-top: 1px solid #E8E8E8;
 614     padding: 7px 0;
 615 }
 616
 617 #editions {
 618     table,
 619     td {
 620         border: 0;
 621     }
 622 }
 623
 624 .overdue,
 625 .debit {
 626     color: #CC0000;
 627     font-weight: bold;
 628 }
 629
 630 .strong {
 631     font-weight: bold;
 632 }
 633
 634 .problem {
 635     color: #990000;
 636     font-weight: bold;
 637 }
 638
 639 fieldset {
 640     background-color: #F4F8F9;
 641     border: 2px solid #B9D8D9;
 642     border-radius: 5px;
 643     margin: 1em 1em 1em 0;
 644     padding: 1em;
 645
 646     + fieldset {
 647         &.action {
 648             padding-top: 20px;
 649         }
 650     }
 651
 652     &.lastchecked {
 653         border-bottom-left-radius: 0;
 654         border-bottom-right-radius: 0;
 655         border-bottom-width: 0;
 656         margin-bottom: 0;
 657         margin-right: 0;
 658     }
 659
 660     .standard {
 661         background-color:#f4f8f9 !important;
 662     }
 663
 664     .contrast {
 665         background-color:#F3F3F3 !important;
 666     }
 667
 668     &.action {
 669         background-color: transparent;
 670         border: 0;
 671         clear: both;
 672         float: none;
 673         margin: .9em 0 0;
 674         padding: .4em;
 675         width: auto;
 676     }
 677
 678     &.brief {
 679         border: 2px solid #B9D8D9;
 680
 681         div {
 682             &.hint {
 683                 margin-bottom: .4em;
 684             }
 685         }
 686
 687         label {
 688             display: block;
 689             font-weight: bold;
 690             padding: .3em 0;
 691
 692             &.inline {
 693                 display: inline;
 694                 float: none;
 695                 margin-left: 1em;
 696                 width: auto;
 697             }
 698         }
 699
 700         li {
 701             &[aria-disabled="true"] {
 702                 color: #999;
 703             }
 704
 705             &.inline {
 706                 display: inline;
 707                 float: none;
 708                 margin-left: 1em;
 709                 width: auto;
 710             }
 711
 712             &.radio,
 713             &.checkbox {
 714                 label {
 715                     display: inline;
 716                 }
 717             }
 718         }
 719
 720         ol,
 721         li {
 722             list-style-type: none;
 723         }
 724
 725         span {
 726             .label {
 727                 display: block;
 728                 font-weight: bold;
 729                 padding: .3em 0;
 730                 text-align: left;
 731             }
 732         }
 733
 734         .action {
 735             margin-left: 1em;
 736         }
 737     }
 738
 739     &.rows {
 740         border: 2px solid #B9D8D9;
 741         border-width: 1px;
 742         clear: left;
 743         float: left;
 744         font-size: 90%;
 745         margin: .9em 0 0;
 746         padding: 0;
 747         width: 100%;
 748
 749         fieldset {
 750             background-color: transparent;
 751             border-width: 1px;
 752             margin: 1em;
 753             padding: .3em;
 754
 755             &.action {
 756                 padding: 1em;
 757             }
 758         }
 759
 760         &.inputnote {
 761             clear: left;
 762             float: left;
 763             margin: 1em 0 0 11em;
 764         }
 765
 766
 767         &.left {
 768             label {
 769                 text-align: left;
 770                 width: 8em;
 771             }
 772
 773             li {
 774                 padding-bottom: .4em;
 775             }
 776
 777             span {
 778                 label {
 779                     text-align: left;
 780                     width: 8em;
 781                 }
 782             }
 783         }
 784
 785         &.ui-accordion-content {
 786             border-top-left-radius: 0;
 787             border-top-right-radius: 0;
 788             margin: 0;
 789             padding: 0;
 790             width: 100%;
 791
 792             table {
 793                 margin: 0;
 794             }
 795         }
 796
 797         &.unselected {
 798             background-color: #FFFFFF;
 799             border: 0;
 800             border-width: 0;
 801         }
 802
 803         caption {
 804             font-size: 120%;
 805         }
 806
 807         div {
 808             &.hint {
 809                 margin: .5em 0;
 810                 margin-left: 10.5em;
 811             }
 812         }
 813
 814         label {
 815             float: left;
 816             font-weight: bold;
 817             margin-right: 1em;
 818             text-align: right;
 819             width: 9em;
 820
 821             &.error {
 822                 float: none;
 823                 margin-left: 1em;
 824                 width: auto;
 825             }
 826
 827             &.inline {
 828                 display: inline;
 829                 float: none;
 830                 margin-left: 1em;
 831             }
 832
 833             &.radio {
 834                 display: inline-block;
 835                 margin: 0 1em 0 0;
 836                 padding: 0;
 837                 width: auto;
 838             }
 839
 840             &.yesno {
 841                 float: none;
 842                 width: auto;
 843             }
 844         }
 845
 846         legend {
 847             font-size: 110%;
 848             font-weight: bold;
 849             margin-left: 1em;
 850         }
 851
 852         li {
 853             clear: left;
 854             float: left;
 855             list-style-type: none;
 856             padding-bottom: 1em;
 857             width: 100%;
 858
 859             &[aria-disabled="true"] {
 860                 color: #999;
 861             }
 862
 863             &.radio {
 864                 margin: 0;
 865                 padding-left: 9em;
 866                 width: auto;
 867
 868                 input + label {
 869                     margin-left: 0;
 870                     padding-left: 0;
 871                 }
 872
 873                 label {
 874                     float: none;
 875                     margin: 0 0 0 1em;
 876                     width: auto;
 877                 }
 878             }
 879
 880             input + label {
 881                 margin-left: 0;
 882                 padding-left: 0;
 883             }
 884
 885             fieldset {
 886                 margin-left: 10em;
 887
 888                 label {
 889                     width: 6em;
 890                 }
 891
 892                 li.radio {
 893                     padding-left: 0;
 894                 }
 895             }
 896
 897             legend {
 898                 margin-bottom: 0;
 899             }
 900         }
 901
 902         ol {
 903             list-style-type: none;
 904             padding: 1em 1em 0;
 905
 906             &.radio {
 907                 label {
 908                     float: none;
 909                     margin-left: 20px;
 910                     margin-right: 30px;
 911                     padding-left: 0;
 912                     vertical-align: middle;
 913                     width: auto;
 914
 915                     &.radio {
 916                         float: left;
 917                         margin-right: 1em;
 918                         margin-top: 0;
 919                         width: 9em;
 920                     }
 921                 }
 922
 923                 input {
 924                     &[type="checkbox"],
 925                     &[type="radio"] {
 926                         margin-left: -20px;
 927                     }
 928                 }
 929             }
 930         }
 931
 932         p {
 933             margin: 1em 0 1em 1em;
 934         }
 935
 936         span {
 937             &.label {
 938                 float: left;
 939                 font-weight: bold;
 940                 margin-right: 1em;
 941                 text-align: right;
 942                 width: 9em;
 943             }
 944         }
 945
 946         table {
 947             clear: both;
 948             font-size: 105%;
 949             margin: 1em 0 1em 1em;
 950
 951             &.dataTable {
 952                 margin: 0;
 953             }
 954
 955             &.mceListBox {
 956                 margin: 0;
 957             }
 958         }
 959
 960         td {
 961             label {
 962                 float: none;
 963                 font-weight: normal;
 964                 width: auto;
 965             }
 966         }
 967
 968         .inputnote {
 969             clear: left;
 970             float: left;
 971             margin: 1em 0 0 11em;
 972         }
 973
 974         + h3 {
 975             clear: both;
 976             padding-top: .5em;
 977         }
 978
 979         .dataTables_wrapper {
 980             label {
 981                 font-weight: 400;
 982                 width: unset;
 983             }
 984         }
 985
 986         .dropdown-menu {
 987             li {
 988                 padding-bottom: 0;
 989             }
 990         }
 991     }
 992 }
 993
 994 #multi_receiving {
 995     fieldset {
 996         &.rows {
 997             label {
 998                 width: 50%;
 999             }
1000         }
1001     }
1002 }
1003
1004 legend {
1005     background-color: #FFFFFF;
1006     border: 2px solid #B9D8D9;
1007     border-radius: 3px;
1008     font-size: 123.1%;
1009     font-weight: bold;
1010     padding: .2em .5em;
1011     width: auto;
1012 }
1013
1014 details {
1015     > summary {
1016         cursor: pointer;
1017
1018         &::before {
1019             content: "\f0da";
1020             display: inline-block;
1021             font-family: FontAwesome;
1022             width: 1em;
1023         }
1024
1025         &.checkouts-by-itemtype {
1026             li {
1027                 display: inline-block;
1028             }
1029         }
1030     }
1031 }
1032
1033 details[open] {
1034     > summary {
1035         &::before {
1036             content: "\f0d7";
1037         }
1038     }
1039 }
1040
1041
1042 #floating-save {
1043     background-color: rgba(185, 216, 217, .6);
1044     bottom: 3%;
1045     position: fixed;
1046     right: 1%;
1047     width: 150px;
1048 }
1049
1050 #breadcrumbs {
1051     background-color: #E6F0F2;
1052     clear: both;
1053     margin: 0;
1054     padding: .8em .5em .8em 10px;
1055     position: relative;
1056
1057     .title {
1058         font-style: italic;
1059         font-weight: normal;
1060     }
1061 }
1062
1063 #header {
1064     + #breadcrumbs {
1065         margin-top: 1em;
1066     }
1067
1068     > .container-fluid {
1069         padding: 0;
1070     }
1071 }
1072
1073 div {
1074     &.action {
1075         background-color: transparent;
1076         border: 0;
1077         clear: both;
1078         float: none;
1079         margin: .9em 0 0;
1080         padding: .4em;
1081         width: auto;
1082     }
1083
1084     .renew_formfield {
1085         margin-bottom: 1em;
1086     }
1087
1088     .circmessage {
1089         margin-bottom: .3em;
1090         padding: 0 .4em .4em;
1091
1092         &:first-child {
1093             margin-top: 1em;
1094         }
1095     }
1096
1097     &.first {
1098         fieldset {
1099             margin-right: 0;
1100         }
1101     }
1102
1103     &.help {
1104         margin: .9em 0 0;
1105     }
1106
1107     &.justify {
1108         text-align: justify;
1109     }
1110
1111     &.message {
1112         background: linear-gradient(to bottom, #FFFFFF 0%, #F4F6FA 2%, #EAEEF5 23%, #E8EDF6 94%, #CDDBF2 100%);
1113         border: 1px solid #BCBCBC;
1114         text-align: center;
1115         width: 55%;
1116
1117         ul,
1118         h5 {
1119             padding-left: 25%;
1120             text-align: left;
1121         }
1122
1123         ul + h4 {
1124             margin-top: .7em;
1125         }
1126     }
1127
1128     &.note {
1129         background: linear-gradient(to bottom, #F4F6FA 0%, #E8EDF6 100%); // W3C
1130         border: 1px solid #BCBCBC;
1131         margin: .5em 0;
1132         padding: .5em;
1133
1134         i {
1135             &.fa-exclamation {
1136                 color: #CC0000;
1137                 font-style: italic;
1138                 padding: 0 .3em;
1139             }
1140         }
1141     }
1142
1143     // Tools > automatic_item_modification_by_age
1144     &.rules {
1145         display: block;
1146     }
1147
1148     &[class$="_table_controls"] {
1149         padding: .7em 0;
1150     }
1151
1152     &.results {
1153         padding: .7em 0;
1154     }
1155
1156     &.rule {
1157         background-color: #F4F8F9;
1158         border: 2px solid #B9D8D9;
1159         border-radius: 5px;
1160         margin: .3em;
1161         padding: .3em;
1162     }
1163
1164     &.lastchecked {
1165         border: 2px solid #BCDB89;
1166         border-bottom-left-radius: 5px;
1167         border-bottom-right-radius: 5px;
1168         padding: .2em 1em;
1169     }
1170
1171     &.listgroup {
1172         clear: left;
1173
1174         h4 {
1175             font-style: italic;
1176
1177             a {
1178                 font-size: 80%;
1179             }
1180         }
1181
1182         input {
1183             font-size: 90%;
1184             padding: .2em .6em;
1185         }
1186     }
1187
1188     &.sysprefs {
1189         h3 {
1190             margin: .2em 0 .2em .4em;
1191         }
1192
1193         dl {
1194             margin-left: 1.5em;
1195         }
1196
1197         &.hint {
1198             float: right;
1199             margin: .7em;
1200             padding: .5em;
1201             width: 25%;
1202         }
1203     }
1204
1205     &.rows {
1206         clear: left;
1207         float: left;
1208         margin: 0;
1209         padding: 0;
1210         width: 100%;
1211
1212         + div {
1213             &.rows {
1214                 margin-top: .6em;
1215             }
1216         }
1217
1218         li {
1219             border-bottom: 1px solid #EEE;
1220             clear: left;
1221             float: left;
1222             list-style-type: none;
1223             padding: .275em;
1224             width: 100%;
1225         }
1226
1227         ol {
1228             list-style-type: none;
1229             padding: .5em 1em 0 0;
1230
1231             li {
1232                 li {
1233                     border-bottom: 0;
1234                 }
1235             }
1236         }
1237
1238         p {
1239             margin-left: 10em;
1240         }
1241
1242         span {
1243             &.label {
1244                 float: left;
1245                 font-weight: bold;
1246                 margin-right: 1em;
1247                 padding-top: 0;
1248                 text-align: left;
1249                 width: 9em;
1250             }
1251         }
1252     }
1253
1254     &.pages {
1255         margin: .5em 0;
1256
1257         a {
1258             font-weight: bold;
1259             padding: 1px 5px;
1260             text-decoration: none;
1261
1262             &:link,
1263             &:visited {
1264                 background-color: #EEEEEE;
1265                 color: #3366CC;
1266             }
1267
1268             &:hover,
1269             &:active {
1270                 background-color: #FFC;
1271             }
1272         }
1273
1274         .current,
1275         .currentPage {
1276             background-color: #E6FCB7;
1277             color: #666;
1278             font-weight: bold;
1279             padding: 1px 5px;
1280         }
1281
1282         .inactive {
1283             background-color: #F3F3F3;
1284             color: #BCBCBC;
1285             font-weight: bold;
1286             padding: 1px 5px;
1287         }
1288     }
1289
1290     .browse {
1291         margin: .5em 0;
1292     }
1293 }
1294
1295 #header_search {
1296     background-position: .5em .5em;
1297     background-repeat: no-repeat;
1298     float: left;
1299     margin: .3em 0 .5em;
1300
1301     input {
1302         &[type="submit"] {
1303             border-radius: 3px;
1304             padding: .2em .8em;
1305         }
1306     }
1307
1308     div {
1309         &.residentsearch {
1310             border: 0;
1311             border-bottom: 1px solid #85CA11;
1312             padding: 0 0 .2em;
1313         }
1314     }
1315
1316     ul {
1317         &.ui-tabs-nav {
1318             margin-left: 1em;
1319             padding-top: 0;
1320
1321             li {
1322                 &.ui-state-default {
1323                     background: transparent none;
1324                     border: 0;
1325                     top: 0;
1326
1327                     a {
1328                         padding: .3em .6em;
1329                     }
1330                 }
1331
1332                 &.ui-tabs-active {
1333                     background-color: #FFFFF1;
1334                     border: 1px solid #85CA11;
1335                     border-top-width: 0;
1336                     top: -2px;
1337
1338                     a {
1339                         text-decoration: none;
1340                     }
1341                 }
1342             }
1343         }
1344     }
1345
1346     .ui-corner-top {
1347         border-radius: 0 0 4px 4px;
1348     }
1349
1350     > div,
1351     > ul {
1352         display: none;
1353
1354         > li {
1355             display: none;
1356
1357             &:first-of-type {
1358                 display: block;
1359             }
1360         }
1361
1362         &:first-of-type {
1363             display: block;
1364         }
1365     }
1366
1367     .head-searchbox {
1368         font-size: 1.3em;
1369         width: 30em;
1370     }
1371 }
1372
1373 #reserves,
1374 #checkouts {
1375     border: 1px solid #B9D8D9;
1376     padding: 1em;
1377 }
1378
1379 #sales {
1380     display: none;
1381 }
1382
1383 .tip {
1384     color: #808080;
1385 }
1386
1387 .single-line {
1388     white-space: nowrap;
1389 }
1390
1391 .ex {
1392     font-family: $font-monospace;
1393     font-weight: bold;
1394 }
1395
1396 dt {
1397     font-weight: bold;
1398 }
1399
1400 dd {
1401     font-size: 90%;
1402     font-weight: normal;
1403     padding: .2em .2em .2em 2.5em;
1404 }
1405
1406 #toolbar,
1407 .btn-toolbar {
1408     background-color: #EDF4F6;
1409     border: 1px solid #E6F0F2;
1410     border-radius: 5px 5px 0 0;
1411     margin: 0;
1412     padding: 5px;
1413
1414     .dropdown-menu {
1415         border-top-width: 1px;
1416         font-size: 13px;
1417     }
1418
1419     &.floating {
1420         border-radius: 0;
1421         margin-top: 0;
1422         z-index: 300;
1423     }
1424
1425     a.addtocart {
1426         display: block;
1427     }
1428
1429     a.cartRemove {
1430         padding: 6px 12px;
1431         font-size: 12px;
1432         display: none;
1433     }
1434
1435     a.addtocart.incart {
1436         display: none;
1437     }
1438
1439     a.cartRemove.incart {
1440         display: block;
1441     }
1442 }
1443
1444 #disabled {
1445     a {
1446         color: #999;
1447
1448         &:hover {
1449             color: #999;
1450         }
1451     }
1452 }
1453
1454 #disabled2 {
1455     a {
1456         color: #999;
1457     }
1458 }
1459
1460
1461 .patroninfo {
1462     margin-top: -.5em;
1463
1464     h5 {
1465         border-right: 1px solid #B9D8D9;
1466         margin-bottom: 0;
1467         padding-bottom: .5em;
1468         padding-left: 0em;
1469         padding-top: .5em;
1470
1471         &:empty {
1472             border-right: 0;
1473         }
1474     }
1475
1476     ul {
1477         border: 0;
1478         border-bottom: 0;
1479         border-right: 1px solid #B9D8D9;
1480         border-top: 0;
1481         margin: 0;
1482         padding: 0;
1483
1484         li {
1485             list-style-type: none;
1486             margin: 0;
1487         }
1488     }
1489
1490     + #menu {
1491         margin-right: 0;
1492     }
1493
1494     > div {
1495         border-right: 1px solid #B9D8D9;
1496         width: 100%;
1497     }
1498
1499     &.is-staff {
1500         h5 {
1501             background-color: #EEE;
1502         }
1503     }
1504 }
1505
1506 .patroninfo-section {
1507     padding: .5em;
1508     margin: .5em;
1509
1510     .rows {
1511         padding: .5em;
1512     }
1513 }
1514
1515 .patroninfo-heading {
1516     background-color: rgba(237, 244, 246, .4);
1517     padding: .5em;
1518     margin-bottom: .3em;
1519     clear: both;
1520
1521     h3 {
1522         display: inline-block;
1523     }
1524
1525     .btn {
1526         float: right;
1527     }
1528 }
1529
1530 /* Patron image */
1531
1532 .patronimage-container {
1533     padding: .2em;
1534     position: relative;
1535
1536     &:hover {
1537         .patronimage {
1538             opacity: .8;
1539         }
1540
1541         .patronimage-controls {
1542             opacity: 1;
1543         }
1544     }
1545 }
1546
1547 .patronimage {
1548     border: 1px solid #EEE;
1549     display: block;
1550     max-width: 160px;
1551     margin: auto;
1552     opacity: 1;
1553     transition: .2s ease;
1554
1555     &.empty {
1556         background: transparent url( "../img/patron-blank.min.svg" ) center 5px no-repeat;
1557         height: 125px;
1558         padding: 0;
1559         width: 80%;
1560     }
1561 }
1562
1563 .patronimage-controls {
1564     left: 50%;
1565     opacity: 0;
1566     position: absolute;
1567     text-align: center;
1568     top: 80%;
1569     transform: translate( -50%, -50% );
1570     transition: .5s ease;
1571 }
1572
1573 .patronimage-control {
1574     padding: 1em 2em;
1575  }
1576
1577 #patronImageEdit input[type="file" ] {
1578     display: inline-block;
1579 }
1580
1581 .patronviews {
1582     border-right: 1px solid #000;
1583     border-top: 1px solid #000;
1584     margin-bottom: .5em;
1585     padding: .5em 0;
1586 }
1587
1588 .column-tool {
1589     font-size: 80%;
1590 }
1591
1592 .hint {
1593     color: #666;
1594     font-size: 95%;
1595 }
1596
1597 .dropdown-menu {
1598     li {
1599         list-style-type: none;
1600     }
1601 }
1602
1603 .btn-toolbar {
1604     fieldset {
1605         &.action {
1606             margin-top: 0;
1607         }
1608     }
1609
1610     .dropdown-menu {
1611         font-size: 13px;
1612     }
1613 }
1614
1615 .rows {
1616     .label {
1617         white-space: normal;
1618     }
1619 }
1620
1621 .readonly,
1622 input[type='text']:read-only {
1623     background: #EEE url("../img/locked.png") center left no-repeat;
1624     border-style: inset;
1625     border-width: 1px;
1626     cursor: default;
1627     padding-left: 15px;
1628 }
1629
1630 .readonly:focus,
1631 input[type='text']:read-only:focus {
1632     border-color: unset;
1633     border-radius: unset;
1634 }
1635
1636 .checkedout {
1637     color: #999999;
1638     font-style: italic;
1639 }
1640
1641 .subfield_not_filled {
1642     background-color: #FFFF99;
1643 }
1644
1645 .important_subfield_not_filled {
1646     background-color : #FFFFCC;
1647 }
1648
1649 .content_hidden {
1650     display: none;
1651     visibility: hidden; // you propably don't need to change this one
1652 }
1653
1654 // the property for the displayed tab
1655 .content_visible {
1656     display: block;
1657     visibility: visible; // you propably don't need to change this one
1658 }
1659
1660 #z3950searcht {
1661     table {
1662         border: 0;
1663         padding: 20px;
1664     }
1665 }
1666
1667 #z3950_search_targets {
1668     height: 338px;
1669     overflow-y: auto;
1670 }
1671
1672 #z3950_search_targets_acq {
1673     height: 308px;
1674     overflow-y: auto;
1675 }
1676
1677 .z3950checks {
1678     padding-left: 1em;
1679 }
1680
1681 .error {
1682     color: #CC0000;
1683 }
1684
1685 // Font Awesome icons
1686 i {
1687     &.error {
1688         color: #CC0000;
1689     }
1690
1691     &.success {
1692         color: #008000;
1693     }
1694
1695     &.warn {
1696         color: #FFA500;
1697     }
1698 }
1699
1700 .circ-setting {
1701     font-size: 85%;
1702     padding-top: .3em;
1703
1704     input {
1705         vertical-align: middle;
1706     }
1707
1708     label {
1709         font-size: inherit;
1710         font-weight: normal;
1711     }
1712 }
1713
1714 .circ-settings {
1715     background-color: #F4F8F9;
1716     border-radius: 0;
1717     border-top: 2px solid #B9D8D9;
1718     display: none;
1719     margin-left: -1em;
1720     margin-right: -1em;
1721     margin-top: 1em;
1722     padding: 1em 1em 0;
1723 }
1724
1725 #show-circ-settings {
1726     margin-top: .5em;
1727 }
1728
1729 .checkin-active-setting {
1730     background-color: #FFC;
1731     border-radius: 3px;
1732     box-shadow: 1px 1px 2px 0 rgba(102, 102, 102, .5);
1733     margin: .5em;
1734     padding: .5em;
1735 }
1736
1737 .form-control-group {
1738     white-space: nowrap;
1739 }
1740
1741 .form-group {
1742     label {
1743         display: block;
1744         margin-bottom: 5px;
1745     }
1746
1747     div {
1748         &.hint {
1749             margin: 5px 0;
1750         }
1751     }
1752 }
1753
1754 .blocker,
1755 .inaccurate-item-statuses {
1756     color: #990000;
1757 }
1758
1759 .circmessage {
1760     li {
1761         list-style: $nav-menu-bullet;
1762         margin-bottom: .4em;
1763     }
1764 }
1765
1766 #circ_needsconfirmation {
1767     margin: auto;
1768 }
1769
1770 .dialog {
1771     border: 1px solid #BCBCBC;
1772     border-radius: 2px;
1773     margin: 1em auto;
1774     padding: .5em;
1775     text-align: center;
1776     width: 65%;
1777
1778     a {
1779         &.approve {
1780             display: inline-block;
1781         }
1782     }
1783
1784     button,
1785     a.approve {
1786         background: #FFF none;
1787         border: 1px outset #999999;
1788         border-left-color: #666;
1789         border-top-color: #666;
1790         margin: .4em;
1791         padding: .4em;
1792         white-space: pre-line;
1793
1794         &:active {
1795             border: 1px inset #999999;
1796         }
1797
1798         &:hover {
1799             background-color: #FFC;
1800         }
1801     }
1802
1803     h2,
1804     h3,
1805     h4 {
1806         margin: 5px auto;
1807         text-align: center;
1808     }
1809
1810     input {
1811         background-color: #FFFFFF;
1812         border: 1px solid #BCBCBC;
1813         margin: .4em;
1814         padding: .4em .4em .4em 25px;
1815
1816         &:hover {
1817             background-color: #FFC;
1818         }
1819
1820         &[type="submit"] {
1821             background: #FFF none;
1822         }
1823
1824         &.flatpickr-input {
1825             padding: 3px 3px 3px 20px;
1826         }
1827     }
1828
1829     li {
1830         list-style-position: inside;
1831     }
1832
1833     p {
1834         margin-top: 0;
1835         &+p {
1836             margin-top: 5px;
1837         }
1838     }
1839
1840     table {
1841         margin: .5em auto;
1842
1843         td {
1844             text-align: left;
1845         }
1846
1847         th {
1848             text-align: right;
1849         }
1850     }
1851
1852     &.alert,
1853     &.error {
1854         background: linear-gradient(to bottom, #FEF8D3 0%, #FFEC91 9%, #FFED87 89%, #F9DC00 100%);
1855         border: 1px solid #E0C726;
1856         color: inherit;
1857         text-align: center;
1858         text-shadow: none;
1859
1860         strong {
1861             color: #900;
1862         }
1863     }
1864 }
1865
1866
1867 .approve,
1868 .success {
1869     i {
1870         &.fa {
1871             color: #008000;
1872         }
1873     }
1874 }
1875
1876 .deny {
1877     i {
1878         &.fa {
1879             color: #CC0000;
1880         }
1881     }
1882 }
1883
1884 .new {
1885     i {
1886         &.fa {
1887             color: #425FAF;
1888         }
1889     }
1890 }
1891
1892 .warning {
1893     i {
1894         &.fa-exclamation-triangle {
1895             color: #FFD700;
1896             text-shadow: 0 -1px 0 rgba( 0, 0, 0, .3);
1897         }
1898     }
1899 }
1900
1901 .accesskey {
1902     text-decoration: underline;
1903 }
1904
1905 .missing {
1906     background-color: #FFFFCC;
1907 }
1908
1909 .term {
1910     background-color: #FFC;
1911     color: #990000;
1912 }
1913
1914 // style for shelving location in catalogsearch
1915 .shelvingloc {
1916     display: block;
1917     font-style: italic;
1918 }
1919
1920 #menu {
1921     border-right: 1px solid #B9D8D9;
1922     margin-right: .5em;
1923     padding-bottom: 2em;
1924     padding-top: 1em;
1925
1926     li {
1927         a {
1928             background: linear-gradient(to bottom, #E8F0F6 0%, #E8F0F6 96%, #C1C1C1 100%);
1929             border: 1px solid #B9D8D9;
1930             border-bottom-left-radius: 5px;
1931             border-top-left-radius: 5px;
1932             display: block;
1933             font-size: 111%;
1934             margin: .5em 0;
1935             margin-right: -1px;
1936             padding: .4em .3em;
1937             text-decoration: none;
1938
1939             &:hover {
1940                 background: linear-gradient(to bottom, #FAFAFA 0%, #FFFFFF 96%, #E6E6E6 97%, #CCCCCC 99%, #C1C1C1 100%);
1941                 border-bottom: 1px solid #85CA11;
1942                 border-left: 1px solid #85CA11;
1943                 border-top: 1px solid #85CA11;
1944             }
1945         }
1946
1947         &.active {
1948             a {
1949                 background-color: #FFFFFF;
1950                 background-image: none;
1951                 border-bottom: 1px solid #85CA11;
1952                 border-left: 1px solid #85CA11;
1953                 border-right: 0;
1954                 border-top: 1px solid #85CA11;
1955                 color: #000000;
1956                 font-weight: bold;
1957
1958                 &:hover {
1959                     background-color: #FFFFFF;
1960                     color: #538200;
1961                 }
1962             }
1963         }
1964     }
1965
1966     ul {
1967         li {
1968             list-style-type: none;
1969         }
1970     }
1971 }
1972
1973
1974 #logo {
1975     background: transparent url("../img/koha-logo-medium.png") no-repeat scroll 0%;
1976     margin: .75em .3em .75em .7em;
1977
1978     a {
1979         border: 0;
1980         cursor: pointer;
1981         display: block;
1982         height: 0 !important;
1983         margin: 0;
1984         overflow: hidden;
1985         padding: 44px 0 0;
1986         text-decoration: none;
1987         width: 180px;
1988     }
1989 }
1990
1991 #closewindow {
1992     margin-top: 2em;
1993     text-align: center;
1994
1995     a {
1996         font-weight: bold;
1997     }
1998 }
1999
2000 .barcode {
2001     font-size: 200%;
2002     vertical-align: middle;
2003 }
2004
2005 li {
2006     &.email {
2007         overflow: hidden;
2008         text-overflow: ellipsis;
2009         white-space: nowrap;
2010     }
2011 }
2012
2013 .patronbriefinfo {
2014     li {
2015         &.email {
2016             font-size: 87%;
2017             padding: 0 10px 0 0;
2018             width: 90%;
2019         }
2020     }
2021 }
2022
2023 .empty {
2024     color: #CCC;
2025 }
2026
2027 .address {
2028     font-size: 110%;
2029
2030     li {
2031         list-style-type: none;
2032     }
2033 }
2034
2035 .title {
2036     font-weight: bold;
2037 }
2038
2039 .hold {
2040     float: right;
2041     font-size: 90%;
2042     margin: 0;
2043 }
2044
2045 .thumbnail {
2046     display: block;
2047     margin: auto;
2048 }
2049
2050 .thumbnails {
2051     li {
2052         display: inline-block;
2053         list-style-type: none;
2054         margin: 4px;
2055     }
2056
2057     .remove {
2058         border-top: 1px solid #EEE;
2059         display: block;
2060         font-size: 90%;
2061         margin: 4px -4px 2px -4px;
2062         padding-top: .5em;
2063         text-align: center;
2064     }
2065
2066     & + p {
2067         border-top: 1px solid #eee;
2068         margin-top: 1em;
2069         padding-top: 1em;
2070     }
2071 }
2072
2073 #searchresults {
2074     ul {
2075         li {
2076             clear: left;
2077             font-size: 90%;
2078             list-style: url("../img/item-bullet.svg");
2079             padding: .2em 0;
2080
2081             &.result_itype_image {
2082                 list-style: none;
2083                 list-style-type: none;
2084             }
2085
2086             img {
2087                 float: left;
2088                 margin: 3px 5px 3px -5px;
2089                 max-width: 25px;
2090             }
2091         }
2092     }
2093
2094     span {
2095         &.status {
2096             clear: left;
2097             color: #900;
2098             display: block;
2099         }
2100
2101         &.unavailable {
2102             clear: left;
2103             display: block;
2104         }
2105     }
2106
2107     table {
2108         td {
2109             vertical-align: top;
2110         }
2111     }
2112
2113     &.unavailability {
2114         strong {
2115             display: block;
2116         }
2117     }
2118 }
2119
2120 #searchresults {
2121     .address {
2122         ul {
2123             margin: 0;
2124             padding-left: 0;
2125             li {
2126                 clear: none;
2127                 float: left;
2128                 list-style: none;
2129                 margin-left: 1ch;
2130                 padding: 0;
2131             }
2132         }
2133     }
2134 }
2135
2136 .searchheader {
2137     background-color: #E6F0F2;
2138     border: 1px solid #B9D8D9;
2139     border-radius: 5px 5px 0 0;
2140     font-size: 80%;
2141     margin: 0 0 .5em -1px;
2142     padding: .4em 0 .4em 1em;
2143
2144     &.floating {
2145         border-radius: 0;
2146         margin-top: 0;
2147     }
2148
2149     .btn-group {
2150         > .btn {
2151             &:first-child {
2152                 margin-left: .7em;
2153             }
2154         }
2155     }
2156
2157     form {
2158         float: right;
2159         padding: 5px 5px 3px 0;
2160
2161         &.fz3950 {
2162             float: right;
2163             font-size: 125%;
2164             padding: 0 0 0 5em;
2165         }
2166
2167         &.fz3950bigrpad {
2168             float: right;
2169             font-size: 125%;
2170             padding: 5px 25em 0 0;
2171         }
2172     }
2173 }
2174
2175 #search-facets {
2176     border: 1px solid #B9D8D9;
2177     border-radius: 5px 5px 0 0;
2178
2179     h4 {
2180         background-color: #E6F0F2;
2181         border-bottom: 1px solid #B9D8D9;
2182         border-radius: 5px 5px 0 0;
2183         font-size: 90%;
2184         margin: 0;
2185         padding: .4em .2em;
2186         text-align: center;
2187     }
2188
2189     ul {
2190         margin: 0;
2191         padding: .3em;
2192
2193         li {
2194             font-weight: bold;
2195             list-style-type: none;
2196         }
2197     }
2198
2199     li {
2200         li {
2201             font-size: 85%;
2202             font-weight: normal;
2203             margin-bottom: 2px;
2204             padding: .1em .2em;
2205         }
2206
2207         &.showmore {
2208             font-weight: bold;
2209             text-indent: 1em;
2210         }
2211     }
2212 }
2213
2214 .facet-count {
2215     display: inline-block;
2216 }
2217
2218 .bookcoverimg {
2219     text-align: center;
2220 }
2221
2222 .custom_cover_image {
2223     img {
2224         max-width: 140px;
2225     }
2226 }
2227
2228 #biblio-cover-slider {
2229     border: 1px solid #b9d8d9;
2230     border-radius: 3px;
2231     margin: 5px;
2232     padding: 10px 5px 5px 5px;
2233     min-height: 175px;
2234 }
2235
2236 .cover-slides {
2237     background: #FFF url("../img/spinner-small.gif") center center no-repeat;
2238
2239     .hint {
2240         font-size: 90%;
2241         padding: .5em 0;
2242     }
2243
2244     a {
2245         &.nav-active {
2246             &:link,
2247             &:visited {
2248                 color: #85ca11;
2249             }
2250         }
2251     }
2252 }
2253
2254 td {
2255     &.bookcoverimg {
2256         background: #FFF url("../img/spinner-small.gif") center center no-repeat;
2257         min-width: 120px;
2258         text-align: center;
2259     }
2260
2261     .cover-slides {
2262         background: transparent none;
2263         border: 0;
2264         margin: 0;
2265         min-height: unset;
2266         padding: 0;
2267     }
2268 }
2269
2270 .cover-image {
2271     display: none;
2272
2273     img {
2274         height: auto;
2275         max-width: 100%;
2276     }
2277 }
2278
2279 .cover-nav {
2280     display: inline-block;
2281     padding: 3px 4px;
2282 }
2283
2284 .searchhighlightblob {
2285     font-size: 75%;
2286     font-style: italic;
2287 }
2288
2289 #irregularity_summary {
2290     vertical-align: top;
2291 }
2292
2293 #CheckAll,
2294 #CheckNone,
2295 #CheckPending {
2296     font-weight: normal;
2297     margin: 0 .5em 0 0;
2298 }
2299
2300 .lost,
2301 .dmg,
2302 .wdn {
2303     color: #990000;
2304     display: block;
2305 }
2306
2307 .datedue {
2308     color: #999;
2309     display: block;
2310     font-style: italic;
2311 }
2312
2313 .waitinghere,
2314 .credit {
2315     color: #669900;
2316 }
2317
2318 #mainuserblock {
2319     border: 1px solid #E8E8E8;
2320     margin-top: .5em;
2321     padding: .5em;
2322 }
2323
2324 .labeledmarc-table {
2325     border: 0;
2326 }
2327
2328 .labeledmarc-label {
2329     border: 0;
2330     color: #000000;
2331     font-size: 11pt;
2332     font-style: italic;
2333     padding: 5;
2334 }
2335
2336 .labeledmarc-value {
2337     border: 0;
2338     color: #000;
2339     font-size: 10pt;
2340     padding: 5;
2341 }
2342
2343 #marcPreview {
2344     table {
2345         border: 0;
2346         font-family: $font-monospace;
2347         font-size: 95%;
2348         margin: .7em 0 0;
2349     }
2350
2351     tbody {
2352         tr {
2353             &:nth-child(2n+1) {
2354                 td {
2355                     background-color: #FFFFFF;
2356                 }
2357             }
2358         }
2359     }
2360
2361     td {
2362         border: 0;
2363         padding: 2px;
2364         vertical-align: top;
2365     }
2366
2367     th {
2368         background-color: #FFFFFF;
2369         border: 0;
2370         padding: 2px;
2371         text-align: left;
2372         vertical-align: top;
2373         white-space: nowrap;
2374     }
2375
2376     &.modal-dialog {
2377         width: 80%;
2378     }
2379 }
2380
2381 .modal-dialog {
2382     .dialog {
2383         border-radius: 0;
2384         border-width: 1px 0 0 0;
2385         clear: both;
2386         margin: 15px -15px -15px -15px;
2387         padding: 15px;
2388         text-align: left;
2389         width: unset;
2390
2391         h3 {
2392             margin: unset;
2393             text-align: left;
2394         }
2395
2396         &.alert {
2397             background: #FFFADE none;
2398             border-color: #E0C726;
2399         }
2400
2401         &.message {
2402             background: #E8EDF6 none;
2403             border-color: #A4BEDD;
2404         }
2405     }
2406
2407     &.modal-wide {
2408         width: 80%;
2409     }
2410 }
2411
2412 #cartDetails {
2413     background-color: #FFFFFF;
2414     border: 1px solid #739ACF;
2415     box-shadow: 1px 1px 3px 0 #666;
2416     color: #000;
2417     display: none;
2418     margin: 0;
2419     padding: 10px;
2420     text-align: center;
2421     width: 180px;
2422     z-index: 50;
2423 }
2424
2425 #cartmenulink {
2426     padding-left: 15px;
2427
2428     i.fa.fa-shopping-cart {
2429         padding-right: 7px;
2430     }
2431 }
2432
2433 #basketcount {
2434     span {
2435         display: inline;
2436         font-size: 90%;
2437         font-weight: normal;
2438         padding: 0;
2439     }
2440 }
2441
2442 #moremenu {
2443     display: none;
2444 }
2445
2446 .results_summary {
2447     color: #202020;
2448     display: block;
2449     font-size: 85%;
2450     padding: 0 0 .5em;
2451
2452     a {
2453         font-weight: normal;
2454     }
2455
2456     .label {
2457         color: #707070;
2458     }
2459 }
2460
2461 .child_fund_amount {
2462     font-style: italic;
2463 }
2464
2465 .number_box {
2466     font-size: 105%;
2467     line-height: 200%;
2468
2469     a,
2470     span {
2471         background-color: #E4ECF5;
2472         border: 1px solid #A4BEDD;
2473         border-radius: 4px;
2474         font-weight: bold;
2475         padding: .1em .4em;
2476         text-decoration: none;
2477
2478         &:hover {
2479             background-color: #EBEFF7;
2480         }
2481     }
2482 }
2483
2484 .container {
2485     border: 1px solid #EEE;
2486     margin: 1em 0;
2487     padding: 1em;
2488 }
2489
2490 .import_export {
2491     position: relative;
2492
2493     .export_ok {
2494         background: #E3E3E3 none;
2495         border: 0;
2496         cursor: pointer;
2497         margin-left: 20px;
2498         padding: 10px;
2499     }
2500
2501     .import_export_options {
2502         background: #FFFFFF;
2503         border: 1px solid #CDCDCD;
2504         left: 60px;
2505         padding: 10px;
2506         position: absolute;
2507         top: 0;
2508         width: 300px;
2509         z-index: 1;
2510     }
2511 }
2512
2513 .import_export_options {
2514     background: #E3E3E3 none;
2515     border: 0;
2516     cursor: pointer;
2517     margin-left: 20px;
2518     padding: 10px;
2519
2520     fieldset {
2521         &.rows {
2522             li {
2523                 label {
2524                     width: 16em;
2525                 }
2526             }
2527         }
2528     }
2529
2530     .importing {
2531         background: none;
2532         padding: inherit;
2533     }
2534 }
2535
2536 .form_import {
2537     fieldset {
2538         &.rows {
2539             li {
2540                 label {
2541                     width: auto;
2542                 }
2543             }
2544         }
2545     }
2546
2547     .input_import {
2548         border: 1px solid #BCBCBC;
2549     }
2550 }
2551
2552 .importing {
2553     position: relative;
2554
2555     .importing_msg {
2556         padding-bottom: 10px;
2557         padding-left: 10px;
2558     }
2559 }
2560
2561
2562 .field_hint {
2563     color: #808080;
2564     font-style: italic;
2565     padding-left: 1em;
2566 }
2567
2568 .m880 {
2569     display: block;
2570     float: right;
2571     padding-left: 20px;
2572     text-align: right;
2573     width: 50%;
2574 }
2575
2576 .advsearch {
2577     margin: 0;
2578
2579     table {
2580         border-collapse: separate;
2581         border-spacing: 5px;
2582         border-width: 0;
2583     }
2584
2585     td {
2586         border: 1px solid #EEE;
2587         padding: .3em .4em;
2588     }
2589 }
2590
2591 #circ_circulation_issue {
2592     position: relative;
2593 }
2594
2595 #renew_as_unseen_label {
2596     margin-left: 1em;
2597 }
2598
2599 #renew_as_unseen_checkbox {
2600     margin-right: 1em;
2601 }
2602
2603 #clearscreen {
2604     position: absolute;
2605     right: 0;
2606     top: 0;
2607
2608     a {
2609         background-color: #EEE;
2610         border-radius: 0 0 0 5px;
2611         color: #CCC;
2612         display: block;
2613         font-size: 160%;
2614         font-weight: bold;
2615         padding: 0 .7em .2em;
2616         text-decoration: none;
2617         text-shadow: 0 -1px 0 #666;
2618
2619         &:hover {
2620             color: #CC0000;
2621         }
2622     }
2623 }
2624
2625 #printclearscreen {
2626     position: absolute;
2627     right: 43px;
2628     top: 0;
2629
2630     a {
2631         background-color: #EEE;
2632         border-radius: 0 0 0 5px;
2633         color: #CCC;
2634         display: block;
2635         font-size: 160%;
2636         font-weight: bold;
2637         padding: 0 .7em .2em;
2638         text-decoration: none;
2639         text-shadow: 0 -1px 0 #666;
2640
2641         &:hover {
2642             color: #CC0000;
2643         }
2644     }
2645 }
2646
2647 .no-image {
2648     background-color: #FFFFFF;
2649     border: 1px solid #AAAAAA;
2650     border-radius: 3px;
2651     color: #979797;
2652     display: block;
2653     font-size: 86%;
2654     font-weight: bold;
2655     margin: 1em auto;
2656     padding: 1em;
2657     text-align: center;
2658     width: 75px;
2659 }
2660
2661 #acqui_order_supplierlist {
2662     > div {
2663         &.supplier {
2664             border: 1px solid #EEEEEE;
2665             margin: .5em;
2666             padding: 1em;
2667         }
2668
2669         > div {
2670             > .baskets {
2671                 margin-top: .5em;
2672             }
2673         }
2674
2675         > span {
2676             &.action {
2677                 margin-left: 5em;
2678             }
2679
2680             &.suppliername {
2681                 display: inline;
2682                 font-size: 1.7em;
2683                 margin-bottom: .5em;
2684             }
2685         }
2686     }
2687 }
2688
2689 #ADD-contact {
2690     margin: 0 0 8px 8px;
2691 }
2692
2693 #contact-template {
2694     display: none;
2695 }
2696
2697 // Override core jQueryUI widgets
2698 .ui-widget-content {
2699     background: #FFFFFF none;
2700     border: 1px solid #B9D8D9;
2701     color: #222222;
2702 }
2703
2704 .ui-widget-header {
2705     background: #E6F0F2 none;
2706     border: 1px solid #B9D8D9;
2707     color: #222222;
2708     font-weight: bold;
2709 }
2710
2711 .ui-state-default,
2712 .ui-widget-content .ui-state-default,
2713 .ui-widget-header .ui-state-default {
2714     background: #F4F8F9 none;
2715     border: 1px solid #B9D8D9;
2716     color: #555555;
2717     font-weight: normal;
2718 }
2719
2720 .ui-state-hover,
2721 .ui-widget-content .ui-state-hover,
2722 .ui-widget-header .ui-state-hover,
2723 .ui-state-focus,
2724 .ui-widget-content .ui-state-focus,
2725 .ui-widget-header .ui-state-focus {
2726     background: #E6F0F2 none;
2727     border: 1px solid #B9D8D9;
2728     color: #212121;
2729     font-weight: normal;
2730 }
2731
2732 .ui-state-active,
2733 .ui-widget-content .ui-state-active,
2734 .ui-widget-header .ui-state-active {
2735     background: #FFFFFF none;
2736     border: 1px solid #AAAAAA;
2737     color: #212121;
2738     font-weight: normal;
2739 }
2740
2741 .ui-state-highlight,
2742 .ui-widget-content .ui-state-highlight,
2743 .ui-widget-header .ui-state-highlight {
2744     background: #FFF4C6;
2745     border: 1px solid #FED22F;
2746     color: #363636;
2747 }
2748
2749 .ui-state-error,
2750 .ui-widget-content .ui-state-error,
2751 .ui-widget-header .ui-state-error {
2752     background: #FEF1EC;
2753     border: 1px solid #CD0A0A;
2754     color: #CD0A0A;
2755 }
2756
2757 // Override jQuery Autocomplete
2758 .ui-autocomplete {
2759     box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
2760     cursor: default;
2761     position: absolute;
2762
2763     &.ui-widget-content {
2764         .ui-state-hover {
2765             background: #E6F0F2 none;
2766             border: 1px solid #B9D8D9;
2767             color: #212121;
2768             font-weight: normal;
2769         }
2770     }
2771 }
2772
2773 .ui-autocomplete-loading {
2774     background: #FFF url("../img/spinner-small.gif") right center no-repeat;
2775 }
2776
2777 // jQuery UI standard tabs
2778 .ui-menu {
2779     li {
2780         list-style: none;
2781     }
2782 }
2783
2784 .ui-tabs-nav {
2785     .ui-tabs-active a,
2786     a:hover,
2787     a:focus,
2788     a:active,
2789     span.a {
2790         background: none repeat scroll 0 0 transparent;
2791         outline: 0 none;
2792     }
2793
2794     &.ui-widget-header {
2795         background: none;
2796         border: 0;
2797     }
2798 }
2799
2800 .ui-tabs {
2801     .ui-tabs-nav {
2802         li {
2803             background: #E6F0F2 none;
2804             border: 1px solid #B9D8D9;
2805             margin-right: .4em;
2806             top: 1px;
2807
2808             &.ui-tabs-active {
2809                 background-color: #FFFFFF;
2810                 border: 1px solid #B9D8D9;
2811                 border-bottom-width: 0;
2812
2813                 a {
2814                     color: #000;
2815                     font-weight: bold;
2816                 }
2817
2818                 &.ui-state-hover {
2819                     background: #FFF none;
2820                 }
2821             }
2822
2823             &.ui-state-default {
2824                 &.ui-state-hover {
2825                     background: #EDF4F5 none;
2826                 }
2827             }
2828         }
2829     }
2830
2831     .ui-tabs-panel {
2832         border: 1px solid #B9D8D9;
2833     }
2834
2835     &.ui-widget-content {
2836         background: transparent none;
2837         border: 0;
2838     }
2839
2840     .ui-state-default {
2841         a {
2842             color: #004D99;
2843
2844             &:link,
2845             &:visited {
2846                 color: #004D99;
2847             }
2848         }
2849     }
2850
2851     .ui-state-hover {
2852         a {
2853             color: #538200;
2854
2855             &:link,
2856             &:visited {
2857                 color: #538200;
2858             }
2859         }
2860     }
2861
2862 }
2863
2864 .ui-widget {
2865     font-family: inherit;
2866     font-size: inherit;
2867
2868     input,
2869     select,
2870     textarea,
2871     button {
2872         font-family: inherit;
2873         font-size: inherit;
2874     }
2875 }
2876
2877 .statictabs {
2878     > ul {
2879         background: none repeat scroll 0 0 transparent;
2880         border: 0 none;
2881         border-bottom-left-radius: 4px;
2882         border-bottom-right-radius: 4px;
2883         border-top-left-radius: 4px;
2884         border-top-right-radius: 4px;
2885         color: #222222;
2886         font-size: 100%;
2887         font-weight: bold;
2888         line-height: 1.3;
2889         list-style: none outside none;
2890         margin: 0;
2891         outline: 0 none;
2892         padding: .2em .2em 0;
2893         text-decoration: none;
2894
2895         &::after {
2896             clear: both;
2897         }
2898
2899         &::before,
2900         &::after {
2901             content: "";
2902             display: table;
2903         }
2904
2905         li {
2906             background: none repeat scroll 0 0 #E6F0F2;
2907             border: 1px solid #B9D8D9;
2908             border-bottom: 0 none;
2909             border-top-left-radius: 4px;
2910             border-top-right-radius: 4px;
2911             color: #555555;
2912             float: left;
2913             font-weight: normal;
2914             list-style: none outside none;
2915             margin-bottom: 0;
2916             margin-right: .4em;
2917             padding: 0;
2918             position: relative;
2919             top: 1px;
2920             white-space: nowrap;
2921
2922             &.active {
2923                 background-color: #FFFFFF;
2924                 color: #212121;
2925                 font-weight: normal;
2926                 padding-bottom: 1px;
2927
2928                 a {
2929                     background: none repeat scroll 0 0 transparent;
2930                     color: #000000;
2931                     cursor: text;
2932                     font-weight: bold;
2933                     outline: 0 none;
2934                     top: 1px;
2935                 }
2936             }
2937
2938             a {
2939                 color: #004D99;
2940                 cursor: pointer;
2941                 float: left;
2942                 padding: .5em 1em;
2943                 text-decoration: none;
2944
2945                 &:hover {
2946                     background-color: #EDF4F5;
2947                     border-top-left-radius: 4px;
2948                     border-top-right-radius: 4px;
2949                     color: #538200;
2950                 }
2951             }
2952         }
2953     }
2954
2955     .tabs-container {
2956         background: none repeat scroll 0 0 transparent;
2957         border: 1px solid #B9D8D9;
2958         border-bottom-left-radius: 4px;
2959         border-bottom-right-radius: 4px;
2960         color: #222222;
2961         display: block;
2962         padding: 1em 1.4em;
2963     }
2964 }
2965
2966 .toptabs {
2967         .ui-tabs-panel {
2968             background: #FFF none;
2969         }
2970 }
2971
2972 .authref {
2973     font-style: normal;
2974     text-indent: 4em;
2975 }
2976
2977 .seefrom,
2978 .seealso {
2979     font-style: italic;
2980     text-indent: 2em;
2981 }
2982
2983 #authfinderops {
2984     float: right;
2985 }
2986
2987 .authorizedheading {
2988     font-weight: bold;
2989 }
2990
2991 .authres_notes,
2992 .authres_seealso,
2993 .authres_otherscript {
2994     padding-top: 3px;
2995 }
2996
2997 .authres_notes {
2998     font-style: italic;
2999 }
3000
3001
3002 .contents {
3003     width: 75%;
3004
3005     .newline::after {
3006         content: "\A → ";
3007         white-space: pre;
3008     }
3009
3010     .t {
3011         font-weight: bold;
3012         display: inline;
3013     }
3014
3015     .r {
3016         display: inline;
3017     }
3018 }
3019
3020
3021 .contentblock {
3022     font-size: 95%;
3023     line-height: 135%;
3024     margin-left: 2em;
3025     position: relative;
3026
3027     :first-child::before {
3028         content: "→ ";
3029     }
3030 }
3031
3032 #hierarchies {
3033     a {
3034         color: #069;
3035         font-weight: normal;
3036         text-decoration: underline;
3037
3038         &:hover {
3039             color: #990033;
3040         }
3041     }
3042 }
3043
3044 #didyoumeanopac,
3045 #didyoumeanintranet {
3046     float: left;
3047     width: 260px;
3048 }
3049
3050 .pluginlist {
3051     padding-bottom: 10px;
3052 }
3053
3054 .plugin {
3055     margin: 0 1em 1em 0;
3056 }
3057
3058 .pluginname {
3059     background-color: #E6F0F2;
3060     cursor: move;
3061     margin: .3em;
3062     padding-bottom: 4px;
3063     padding-left: .2em;
3064
3065     .ui-icon {
3066         float: right;
3067     }
3068 }
3069
3070 .plugindesc {
3071     padding: .4em;
3072 }
3073
3074 .ui-sortable-placeholder {
3075     border: 1px dotted #000;
3076     height: 80px;
3077     visibility: visible;
3078
3079     * {
3080         visibility: hidden;
3081     }
3082 }
3083
3084 // jQuery UI Datepicker
3085 .ui-datepicker {
3086     box-shadow: 1px 1px 3px 0 #666;
3087
3088     table {
3089         border: 0;
3090         border-collapse: collapse;
3091         font-size: .9em;
3092         margin: 0 0 .4em;
3093         width: 100%;
3094     }
3095
3096     th {
3097         background: transparent none;
3098         border: 0;
3099         font-weight: bold;
3100         padding: .7em .3em;
3101         text-align: center;
3102     }
3103 }
3104
3105 .ui-datepicker-trigger {
3106     vertical-align: middle;
3107 }
3108
3109 // css for timepicker
3110 .ui-timepicker-div {
3111     dl {
3112         text-align: left;
3113
3114         dd {
3115             margin: 0 10px 10px 65px;
3116         }
3117
3118         dt {
3119             height: 25px;
3120             margin-bottom: -25px;
3121         }
3122
3123         td {
3124             font-size: 90%;
3125         }
3126     }
3127
3128     .ui-widget-header {
3129         margin-bottom: 8px;
3130     }
3131 }
3132
3133 .ui-tpicker-grid-label {
3134     background: none;
3135     border: 0;
3136     margin: 0;
3137     padding: 0;
3138 }
3139
3140 .ui_tpicker_second,
3141 .ui_tpicker_millisec,
3142 .ui_tpicker_microsec {
3143     display: none;
3144 }
3145
3146 // jQuery UI Accordion
3147 .ui-accordion-header,
3148 .ui-widget-content .ui-accordion-header {
3149     font-size: 110%;
3150     font-weight: bold;
3151 }
3152
3153 video {
3154     width: 480px;
3155 }
3156
3157 // Bootstrap overrides
3158
3159 .dropdown-header {
3160     border-top: 1px solid #EEE;
3161     color: #000;
3162     font-weight: bold;
3163     margin-top: 5px;
3164     padding-left: 10px;
3165
3166     &:first-child {
3167         border-top: 0;
3168     }
3169 }
3170
3171 nav {
3172     background: #E6F0F2 none;
3173     border: 0;
3174
3175     &.breadcrumb {
3176         background-color: #E6F0F2;
3177         clear: both;
3178         margin: 0;
3179         padding: .8em .5em .8em 10px;
3180         position: relative;
3181
3182         ol {
3183             margin: 0;
3184             padding-left: 0;
3185             list-style: none;
3186         }
3187
3188         li {
3189             display: inline;
3190
3191             &+li::before {
3192                 background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1yaWdodCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNy4zNyAwbDUuMzUgNy4zYy4yLjIuMi41MSAwIC43bC01LjM4IDhoLTQuMmw1LjY0LTguMzVMMy4xMy4wMXoiLz48L3N2Zz4=") 50% 50% no-repeat;
3193                 background-size: 8px;
3194                 content: '';
3195                 display: inline-block;
3196                 height: .8em;
3197                 width: .8em;
3198             }
3199
3200         }
3201
3202         [aria-current="page"] {
3203             color: #000;
3204             font-weight: 700;
3205             text-decoration: none;
3206         }
3207     }
3208
3209
3210 }
3211
3212 .navbar-collapse {
3213     background: #E6F0F2 none;
3214     box-shadow: none;
3215 }
3216
3217 .navbar-nav {
3218     li {
3219         list-style: none;
3220
3221         &.open {
3222             li {
3223                 a {
3224                     font-weight: normal;
3225                 }
3226             }
3227         }
3228
3229         a {
3230             font-weight: bold;
3231             padding-bottom: .4em;
3232             padding-top: .4em;
3233         }
3234     }
3235 }
3236
3237 .nav .open > a,
3238 .nav .open > a:hover,
3239 .nav .open > a:focus {
3240     background-color: transparent;
3241     border: 0;
3242 }
3243
3244 .nav > li > a:hover,
3245 .nav > li > a:focus {
3246     background-color: transparent;
3247     text-decoration: none;
3248 }
3249
3250 .pagination {
3251     margin:.5em .8em;
3252
3253     .active {
3254         a {
3255             background-color: #5A9EAA;
3256             border-color: #5A9EAA;
3257
3258             &:hover,
3259             &:focus {
3260                 background-color: #5A9EAA;
3261                 border-color: #5A9EAA;
3262             }
3263         }
3264
3265         span {
3266             background-color: #5A9EAA;
3267             border-color: #5A9EAA;
3268
3269             &:hover,
3270             &:focus {
3271                 background-color: #5A9EAA;
3272                 border-color: #5A9EAA;
3273             }
3274         }
3275     }
3276 }
3277
3278 button,
3279 .btn {
3280     border-color: #ADADAD #ADADAD #949494;
3281     font-family: $font-main;
3282
3283     &.btn-link {
3284         border: 0;
3285     }
3286 }
3287
3288 .btn-xs,
3289 .btn-group-xs > .btn {
3290     font-size: 10.5px;
3291     padding: 3px 5px;
3292 }
3293
3294 #toolbar {
3295     .dropdown-menu {
3296         border-top-width: 1px;
3297         font-size: 13px;
3298     }
3299
3300     &.floating {
3301         border-radius: 0;
3302         margin-top: 0;
3303     }
3304 }
3305
3306 #changelanguage {
3307     background: #FFF none;
3308     border-top: 1px solid #EEE;
3309     min-height: $language-footer-min-height;
3310
3311     .dropdown-menu {
3312         > li {
3313             > a,
3314             > span {
3315                 padding: 5px 15px;
3316             }
3317         }
3318     }
3319
3320     .navbar-text {
3321         margin: 0;
3322
3323         span {
3324             display: block;
3325             line-height: 20px;
3326         }
3327     }
3328
3329     .navbar-nav {
3330         li {
3331             a {
3332                 line-height: 20px;
3333             }
3334         }
3335     }
3336 }
3337
3338 .loggedout {
3339     color: #004D99;
3340     font-weight: bold;
3341     padding: .4em .2em;
3342 }
3343
3344 .navbar-fixed-bottom {
3345     .navbar-inner {
3346         min-height: 0;
3347         padding: .4em 0;
3348     }
3349
3350     .nav > li {
3351         border-right: 1px solid #CCC;
3352
3353         > a {
3354             font-weight: normal;
3355         }
3356
3357         &:last-child {
3358             border-right: 0;
3359         }
3360
3361         &.navbar-text {
3362             line-height: normal;
3363             padding: .4em .7em;
3364         }
3365     }
3366 }
3367
3368 .tooltip {
3369     &.bottom {
3370         .tooltip-arrow {
3371             border-bottom-color: #EEE;
3372         }
3373
3374         .tooltip-inner {
3375             background-color: #FFFFFF;
3376             border: 1px solid rgba(0, 0, 0, .2);
3377             box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
3378             color: #000;
3379             font-size: 120%;
3380             padding: 1em;
3381         }
3382     }
3383 }
3384
3385 .separator {
3386     color: #666;
3387     padding: 0 .2em;
3388 }
3389
3390 .close {
3391     filter: none;
3392     float: none;
3393     font-size: inherit;
3394     font-weight: normal;
3395     line-height: 1.5;
3396     opacity: inherit;
3397     position: inherit;
3398     right: auto;
3399     text-shadow: none;
3400     top: auto;
3401
3402     &:hover {
3403         color: inherit;
3404         filter: inherit;
3405         font-size: inherit;
3406         opacity: inherit;
3407     }
3408 }
3409
3410
3411 label {
3412     .radio &,
3413     .checkbox & {
3414         margin-left: 20px;
3415         padding-left: 0;
3416     }
3417
3418     &.tip {
3419         display: block;
3420         margin: .5em 0;
3421     }
3422
3423     &.disabled {
3424         color: #CCC;
3425         cursor: not-allowed;
3426     }
3427 }
3428
3429 .radio {
3430     input {
3431         &[type="radio"] {
3432             margin-left: 0;
3433             position: relative;
3434         }
3435     }
3436 }
3437
3438 .checkbox {
3439     input {
3440         &[type="checkbox"] {
3441             margin-left: 0;
3442             position: relative;
3443         }
3444     }
3445 }
3446
3447 .modal-header {
3448     .closebtn {
3449         margin-top: 4px;
3450     }
3451 }
3452
3453 .closebtn {
3454     color: #000;
3455     filter: alpha(opacity = 20);
3456     float: right;
3457     font-size: 21px;
3458     font-weight: bold;
3459     line-height: 1;
3460     opacity: .2;
3461     text-shadow: 0 1px 0 #FFFFFF;
3462
3463     &:hover,
3464     &:focus {
3465         color: #000;
3466         cursor: pointer;
3467         filter: alpha(opacity = 50);
3468         opacity: .5;
3469         text-decoration: none;
3470     }
3471 }
3472
3473 .modal-body {
3474     background-color: #FFF;
3475     overflow-y: auto;
3476
3477     fieldset,
3478     ol {
3479         background-color: transparent;
3480         border: 0;
3481         margin: 0;
3482         padding: 0;
3483     }
3484 }
3485
3486 .modal-content {
3487     background-color: #EDF4F6;
3488 }
3489
3490 .btn-group {
3491     label,
3492     select {
3493         font-size: 13px;
3494     }
3495 }
3496
3497 .tooltip-inner {
3498     white-space: pre-wrap;
3499 }
3500
3501 pre {
3502     background-color: transparent;
3503     border: 0;
3504     border-radius: 0;
3505     color: inherit;
3506     display: block;
3507     font-size: inherit;
3508     line-height: inherit;
3509     margin: 0;
3510     padding: 0;
3511     word-break: break-all;
3512     word-wrap: break-word;
3513 }
3514
3515 code {
3516     background-color: transparent;
3517     border-radius: 0;
3518     color: inherit;
3519     font-size: inherit;
3520     padding: 0;
3521 }
3522
3523 .pagination > li > a,
3524 .pagination > li > span {
3525     font-weight: bold;
3526 }
3527
3528 // End Bootstrap overrides
3529
3530 .waiting {
3531     cursor: wait;
3532 }
3533
3534 #jobpanel,
3535 #jobstatus,
3536 #jobfailed {
3537     display: none;
3538 }
3539
3540 #jobstatus {
3541     margin: .4em;
3542 }
3543
3544 #jobprogress {
3545     background: url("../img/progress.png") -300px 0 no-repeat;
3546     border: 1px solid #666;
3547     display: inline-block;
3548     height: 10px;
3549     width: 200px;
3550  }
3551
3552 .progress_panel {
3553     border: 2px solid #EEE;
3554     border-radius: 5px;
3555     clear: both;
3556     font-size: 120%;
3557     margin: 1em 0;
3558     padding: 1em;
3559 }
3560
3561 progress {
3562     width: 50%;
3563 }
3564
3565 #selections {
3566     white-space: normal;
3567     width: 100%;
3568
3569     input {
3570         margin: 0 2px;
3571         vertical-align: middle;
3572     }
3573
3574     span {
3575         background-color: #EBF3FF;
3576         border-radius: 5px;
3577         display: inline-block;
3578         font-size: 75%;
3579         margin: 3px;
3580         padding: 3px;
3581         white-space: nowrap;
3582
3583         &.selected {
3584             background-color: #CCE0FC;
3585         }
3586     }
3587 }
3588
3589 #changepasswordf {
3590     input {
3591         &[type="text"],
3592         &[type="password"] {
3593             font-family: $font-monospace;
3594             font-size: 140%;
3595             padding: .3em;
3596         }
3597     }
3598 }
3599
3600 // Class to be added to toolbar when it starts being fixed at the top of the screen
3601
3602 .floating {
3603     box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .5);
3604     z-index: 100;
3605 }
3606
3607 .inline {
3608     display: inline;
3609 }
3610
3611 .nowrap {
3612     white-space: nowrap;
3613 }
3614
3615 .tag_editor {
3616     background: transparent url("../img/edit-tag.png") top left no-repeat;
3617     display: block;
3618     float: left;
3619     height: 16px;
3620     margin: 4px;
3621     overflow: hidden;
3622     text-indent: 100%;
3623     white-space: nowrap;
3624     width: 16px;
3625
3626     &.upload {
3627         background: transparent none;
3628         font-size: 90%;
3629         height: unset;
3630         overflow: unset;
3631         text-indent: unset;
3632         width: unset;
3633     }
3634 }
3635
3636 .browse-controls {
3637     margin-left: 1.1em;
3638     margin-right: .5em;
3639     padding-bottom: 1em;
3640     padding-top: 1em;
3641 }
3642
3643 #browse-return-to-results {
3644     background-color: #E8F0F6;
3645     border: 1px solid #B9D8D9;
3646     border-bottom-width: 0;
3647     border-top-left-radius: 5px;
3648     border-top-right-radius: 5px;
3649     display: block;
3650     padding: .5em;
3651     text-align: center;
3652 }
3653
3654 .browse-button {
3655     background-color: #FFF;
3656     border: 1px solid #B9D8D9;
3657     color: #004D99;
3658     display: block;
3659     overflow: hidden;
3660     padding: .4em .6em;
3661     text-align: center;
3662     white-space: nowrap;
3663     width: 100%;
3664
3665     &:hover {
3666         background: #FAFAFA;
3667     }
3668 }
3669
3670 span {
3671     &.browse-button {
3672         background: #FAFAFA;
3673         color: #222;
3674     }
3675
3676     &.circ-hlt {
3677         color: #CC0000;
3678         font-weight: bold;
3679     }
3680
3681     &.expired {
3682         color: #990000;
3683         font-style: italic;
3684     }
3685
3686     &.name {
3687         font-style: italic;
3688         font-weight: bold;
3689     }
3690
3691     &.required {
3692         color: #C00;
3693         font-style: italic;
3694         margin-left: .5em;
3695     }
3696
3697     &.important {
3698         color: #EAC117;
3699         font-style: italic;
3700         margin-left: .5em;
3701     }
3702
3703     &[class*=" label-"] {
3704         color: #FFF;
3705         display: inline;
3706         font-size: 75%;
3707         font-weight: normal;
3708         padding: .2em .6em .3em;
3709     }
3710 }
3711
3712
3713 .result-biblio-itemtype {
3714     float: right;
3715     font-size: 85%;
3716     margin: .5em;
3717     padding: .5em;
3718     text-align: center;
3719
3720     img {
3721         display: block;
3722         margin: auto;
3723         margin-bottom: 2px;
3724     }
3725 }
3726
3727 #browse-previous {
3728     border-bottom-width: 0;
3729 }
3730
3731 #browse-next {
3732     border-bottom-right-radius: 5px;
3733     border-bottom-left-radius: 5px;
3734 }
3735
3736 .loading-overlay {
3737     background-color: #FFFFFF;
3738     cursor: wait;
3739     height: 100%;
3740     left: 0;
3741     opacity: .7;
3742     position: fixed;
3743     top: 0;
3744     width: 100%;
3745     z-index: 1000;
3746
3747     div {
3748         background: transparent url("../img/loading.gif") top left no-repeat;
3749         font-size: 175%;
3750         font-weight: bold;
3751         height: 2em;
3752         left: 50%;
3753         margin: -1em 0 0 -2.5em;
3754         padding-left: 50px;
3755         position: absolute;
3756         top: 50%;
3757         width: 15em;
3758     }
3759 }
3760
3761 #merge_invoices {
3762     display: none;
3763     margin: 1em auto;
3764 }
3765
3766 #merge_table {
3767     tr {
3768         &.active {
3769             td {
3770                 background-color: #FFFFCC;
3771             }
3772         }
3773     }
3774 }
3775
3776 input.renew {
3777     margin-right: 1em;
3778 }
3779
3780 .renewals {
3781     display: block;
3782     font-size: .8em;
3783     padding: .5em;
3784 }
3785
3786 .date-select {
3787     label {
3788         display: inline-block;
3789         width: 40%;
3790     }
3791 }
3792
3793 #newonholdduedate {
3794     display: none;
3795 }
3796
3797 #transport-types {
3798     padding-top: .5px;
3799 }
3800
3801 #i18nMenu {
3802     .navbar-text {
3803         .currentlanguage {
3804             color: #000;
3805             font-weight: bold;
3806         }
3807     }
3808
3809     a {
3810         &.currentlanguage {
3811             &:link,
3812             &:visited {
3813                 font-weight: bold;
3814             }
3815         }
3816
3817         .sublanguage-selected {
3818             color: #000;
3819             font-weight: bold;
3820         }
3821     }
3822 }
3823
3824 .onsite_checkout-select {
3825     label,
3826     #circ_circulation_issue & {
3827         font-size: inherit;
3828         font-weight: normal;
3829     }
3830 }
3831
3832 .onsite_checkout {
3833     color: #CC0000;
3834 }
3835
3836 .onsite-checkout-only {
3837     background-color: rgba(255, 242, 206, .5);
3838     border: 1px solid #FFF2CE;
3839     border-radius: 4px;
3840 }
3841
3842 .branchgriditem {
3843     background-color: #FFFFFF;
3844     border: 1px solid #B9D8D9;
3845     border-radius: 3px;
3846     display: table-cell;
3847     float: left;
3848     margin: 3px;
3849     padding: .3em;
3850 }
3851
3852 .branchgridrow {
3853     display: table-row;
3854 }
3855
3856 .branchselector {
3857     display: table;
3858 }
3859
3860 .hq-author {
3861     font-weight: bold;
3862 }
3863
3864 #cn_browser_table_wrapper > #cn_browser_table {
3865     margin: auto;
3866     width: 90%;
3867 }
3868
3869 #new_rule {
3870     background-color: #F4F8F9;
3871     border: 2px solid #B9D8D9;
3872     border-radius: 5px;
3873     display: none;
3874     margin: .3em;
3875     padding: .3em;
3876 }
3877
3878
3879 .blocks {
3880     margin-bottom: .3em;
3881 }
3882
3883 .remove_rule {
3884     font-size: 80%;
3885     padding-left: .7em;
3886 }
3887
3888 .underline {
3889     text-decoration: underline;
3890 }
3891
3892 .overline {
3893     text-decoration: overline;
3894 }
3895
3896 .order-control {
3897     padding-right: 5px;
3898 }
3899
3900 #borrower_message {
3901     margin-top: 10px;
3902 }
3903
3904 .form-group {
3905     margin-bottom: 10px;
3906
3907     label {
3908         font-weight: bold;
3909     }
3910 }
3911
3912
3913 .form-message {
3914     background-color: #FFF;
3915     border: 1px solid #A4BEDD;
3916     border-radius: 5px;
3917     margin: 1em;
3918     padding: .5em;
3919 }
3920
3921 .modal-textarea {
3922     width: 98%;
3923 }
3924
3925 #pat_member {
3926     #patron_list_dialog,
3927     #searchresults {
3928         display: none;
3929     }
3930 }
3931
3932 #patron_search {
3933     #filters {
3934         display: none;
3935     }
3936 }
3937
3938 #fixedlengthbuilderaction {
3939     border: 3px solid #E6F0F2;
3940     left: 80%;
3941     padding: 5px;
3942     position: relative;
3943     top: -80px;
3944     width: 12%;
3945 }
3946
3947 #interlibraryloans {
3948     #dataPreviewLabel {
3949         margin: .3em 0;
3950     }
3951
3952     .bg-info {
3953         overflow: auto;
3954         position: relative;
3955     }
3956
3957     .format {
3958         h4 {
3959             margin-bottom: 20px;
3960         }
3961
3962         h5 {
3963             margin-top: 20px;
3964         }
3965
3966         input {
3967             margin: 10px 0;
3968         }
3969
3970         li {
3971             list-style: none;
3972         }
3973     }
3974
3975     #add-new-fields {
3976         margin: 1em;
3977     }
3978
3979     #column-toggle,
3980     #reset-toggle {
3981         font-weight: 700;
3982         line-height: 1.5em;
3983         margin: 15px 0;
3984     }
3985
3986     #freeform-fields {
3987         .custom-name {
3988             margin-right: 1em;
3989             text-align: right;
3990             width: 9em;
3991         }
3992
3993         .delete-new-field {
3994             margin-left: 1em;
3995         }
3996     }
3997
3998     #search-summary {
3999         position: absolute;
4000         top: 50%;
4001         transform: translateY(-50%);
4002     }
4003
4004     #generic_confirm_search_count {
4005         margin: 1em 0 1em 10em;
4006     }
4007
4008     #generic_confirm_search {
4009         display: block;
4010         visibility: hidden;
4011         margin: 1em 0 1em 10em;
4012     }
4013
4014     #partnerSearch {
4015         .modal-dialog {
4016             width: 50vw;
4017         }
4018         .modal-body {
4019             max-height: 70vh;
4020         }
4021     }
4022 }
4023
4024 .ill-view-panel {
4025     margin-top: 15px;
4026
4027     .notesopac {
4028         display: inline-block;
4029     }
4030 }
4031
4032 #illfilter_dateplaced_start,
4033 #illfilter_datemodified_start,
4034 #illfilter_dateplaced_end,
4035 #illfilter_datemodified_end {
4036     width: 80%;
4037 }
4038
4039 #requestattributes {
4040     font-family: monospace;
4041     line-height: 1.3em;
4042 }
4043
4044 #ill-requests {
4045     width: 100% !important;
4046 }
4047
4048 .ar-title, .hq-title {
4049     .biblio-title {
4050         font-weight: bold;
4051     }
4052 }
4053
4054 #ill-issue-title {
4055     margin: 20px 0 30px 0;
4056 }
4057
4058 .ill_availability_sourcename {
4059     margin-top: 20px;
4060 }
4061
4062 #stockrotation {
4063     h3 {
4064         margin: 30px 0 10px 0;
4065     }
4066     .dialog {
4067         h3 {
4068             margin: 10px 0;
4069         }
4070         margin-bottom: 20px;
4071     }
4072     .highlight_stage {
4073         font-weight: bold;
4074     }
4075 }
4076
4077 #catalog_stockrotation .highlight_stage {
4078     font-weight: bold;
4079 }
4080
4081 #stockrotation {
4082     #rota_form {
4083         textarea {
4084             width: 300px;
4085             height: 100px;
4086         }
4087         #name {
4088             width: 300px;
4089         }
4090         fieldset {
4091             width: auto;
4092         }
4093     }
4094     #stage_form fieldset, #add_rota_item_form fieldset {
4095         width: auto;
4096     }
4097     .dialog.alert {
4098         ul {
4099             margin: 20px 0;
4100         }
4101         li {
4102             list-style-type: none;
4103         }
4104     }
4105 }
4106
4107 #catalog_stockrotation {
4108     .item_select_rota {
4109         vertical-align: middle;
4110     }
4111     h1 {
4112         margin-bottom: 20px;
4113     }
4114 }
4115
4116 #stockrotation td.actions, #catalog_stockrotation td.actions {
4117     vertical-align: middle;
4118 }
4119
4120 #stockrotation .stage, #catalog_stockrotation .stage {
4121     display: inline-block;
4122     padding: 5px 7px;
4123     margin: 3px 0 3px 0;
4124     border-radius: 5px;
4125     background-color: rgba(0, 0, 0, 0.1);
4126 }
4127
4128 #stage_list_headings {
4129     font-weight: bold;
4130     span {
4131         padding: 3px;
4132     }
4133 }
4134
4135 #manage_stages {
4136     ul {
4137         padding-left: 0;
4138     }
4139     li {
4140         list-style: none;
4141         margin-bottom: 5px;
4142         span {
4143             padding: 6px 3px;
4144         }
4145     }
4146     .stagename {
4147         width: 15em;
4148         display: inline-block;
4149     }
4150     .stageduration {
4151         width: 10em;
4152         display: inline-block;
4153     }
4154     .stageactions {
4155         display: inline-block;
4156     }
4157     li:nth-child(odd) {
4158         background-color: #F3F3F3;
4159     }
4160     .drag_handle {
4161         margin-right: 6px;
4162         cursor: move;
4163     }
4164     .drag_placeholder {
4165         height: 2em;
4166         border: 1px dotted #aaa;
4167     }
4168     h3 {
4169         display: inline-block;
4170     }
4171     #ajax_status {
4172         display: inline-block;
4173         border: 1px solid #bcbcbc;
4174         border-radius: 5px;
4175         padding: 5px;
4176         margin-left: 10px;
4177         background: #f3f3f3;
4178     }
4179     #manage_stages_help {
4180         margin: 20px 0;
4181     }
4182 }
4183
4184 #payForm {
4185     fieldset {
4186         &.rows {
4187             padding-left: 1em;
4188             padding-right: 2em;
4189         }
4190     }
4191 }
4192
4193 #helper {
4194     span {
4195         display: none;
4196     }
4197 }
4198
4199 #logged-in-info-full {
4200     display: none;
4201 }
4202
4203 .loggedin-menu-label {
4204     color: #777;
4205     font-size: 12px;
4206     line-height: 1.42857143;
4207     padding: 4px 12px;
4208     white-space: nowrap;
4209
4210     span {
4211         color: #000;
4212         font-weight: bold;
4213     }
4214
4215     &.divider {
4216         padding: 0;
4217     }
4218 }
4219
4220 .lastborrower {
4221     background-color: #E6F0F2;
4222     border: 1px solid #95C6D0;
4223     box-shadow: 1px 1px 1px 0 #999;
4224     color: #CC0000;
4225     margin: .4em 0;
4226     padding: .3em .5em .3em .5em;
4227 }
4228
4229 #lastborrower-ref {
4230     border-radius: 5px 0px 0px 5px;
4231     float: left;
4232 }
4233
4234 #lastborrower-remove {
4235     border-radius: 0px 5px 5px 0px;
4236     cursor: pointer;
4237     float: right;
4238 }
4239
4240 #lastborrower-window {
4241     display: none;
4242     position: absolute;
4243     right: 5px;
4244     top: 0px;
4245 }
4246
4247 /* ==== MODULE LINKS - Start ==== */
4248 .buttons-list {
4249     // List containing the module links
4250     margin-bottom: 30px;
4251     padding: 0;
4252
4253     li {
4254         // Standard attributes for the list elements
4255         list-style-type: none;
4256
4257         a {
4258             &.circ-button {
4259                 // Class used for each module link
4260                 background-color: #F4F8F9;
4261                 background-position: 5px 3px;
4262                 background-repeat: no-repeat;
4263                 border: 2px solid #B9D8D9;
4264                 border-radius: 6px;
4265                 box-sizing: content-box;
4266                 color: #000000;
4267                 display: block;
4268                 font-size: 110%;
4269                 font-weight: bold;
4270                 margin: .5em 0;
4271                 max-width: 260px;
4272                 padding: 8px;
4273                 text-decoration: none;
4274
4275                 &:hover {
4276                     // Class used for each module link hover state
4277                     border-color: #538200;
4278                     color: #538200;
4279                 }
4280             }
4281         }
4282     }
4283 }
4284
4285 .about h2 {
4286     border-bottom: 1px solid #B9D8D9;
4287     padding: .5em .2em;
4288     margin:  .5em 0;
4289 }
4290
4291 .columns-2 {
4292     columns: 2 auto;
4293     column-gap: 2.5em;
4294 }
4295
4296 .columns-3 {
4297     columns: 3 auto;
4298     column-gap: 2.5em;
4299 }
4300
4301 .columns-4 {
4302     columns: 4 auto;
4303     column-gap: 2em;
4304 }
4305
4306 // ==== MODULE LINKS - End ====
4307
4308 #catalog-search-link {
4309     border-right: 1px solid lighten( #E6F0F2, 15% );
4310     padding-right: .3em;
4311 }
4312
4313 #catalog-search-dropdown {
4314     padding: 0;
4315
4316     & > a {
4317         border-left: 1px solid darken( #B4D2D8, 5% );
4318         margin-right: .6em;
4319         padding: .4em .6em;
4320
4321         &:hover,
4322         &.catalog-search-dropdown-hover {
4323             background-color: darken( #E6F0F2, 5% );
4324             border-left: 1px solid darken( #B4D2D8, 15% );
4325         }
4326     }
4327 }
4328
4329 .adlibris-cover {
4330     max-height: 120px;
4331 }
4332
4333 .adlibris-cover-big {
4334     max-height: 200px;
4335 }
4336
4337 #tools_holidays {
4338     .radio,
4339     .checkbox {
4340         label {
4341             margin-left: 0;
4342         }
4343     }
4344 }
4345
4346 /* Permissions */
4347
4348 #permissionstree {
4349     display: inline-block;
4350
4351     label {
4352         cursor: pointer;
4353
4354         &:hover {
4355             color: #004d99;
4356         }
4357     }
4358 }
4359
4360 .main_permission {
4361     font-size: 110%;
4362     font-weight: bold;
4363 }
4364
4365 .permissioncode {
4366     color: #666;
4367     font-style: italic;
4368 }
4369
4370 .permission-highlight {
4371     background-color: #FFC !important;
4372 }
4373
4374 .togglechildren_on,
4375 .togglechildren_off {
4376     float: right;
4377 }
4378
4379 .togglechildren_off,
4380 .children {
4381     display: none;
4382 }
4383
4384 .open {
4385     .togglechildren_off {
4386         display: inline;
4387     }
4388
4389     .togglechildren_on {
4390         display: none;
4391     }
4392 }
4393
4394 .parent {
4395     border: 1px solid #DDD;
4396     border-bottom-width: 0;
4397     padding: 5px;
4398
4399     &:last-child {
4400         border-bottom-width: 1px;
4401     }
4402
4403     &:nth-child(odd) {
4404         background-color: #F8F8F8;
4405     }
4406 }
4407
4408
4409 .superlibrarian-hint {
4410     color: #000;
4411     padding: .2em 0;
4412     text-indent: 2em;
4413 }
4414
4415 .child-flags {
4416     background-color: #FFF;
4417     border: 1px solid #DDD;
4418     border-bottom-width: 0;
4419     margin: 0 5px 0 20px;
4420     padding: 5px;
4421
4422     &:first-child {
4423         margin-top: 10px;
4424     }
4425
4426     &:last-child {
4427         border-bottom-width: 1px;
4428     }
4429
4430     &:nth-child(odd) {
4431         background-color: #EEE;
4432     }
4433 }
4434
4435 .header-menu-link {
4436     display: none;
4437     font-weight: bold;
4438     padding: .4em .6em;
4439 }
4440
4441 #user-menu {
4442     position: absolute;
4443     right: 5px;
4444     top: 0;
4445 }
4446
4447 div#makechart ol li {
4448     list-style: none;
4449 }
4450
4451 div .suggestion_note {
4452     background: transparent none;
4453     border-style: dotted;
4454     border-width: 1px 0 0 0;
4455     font-size: 90%;
4456     padding: 2px 0 0 0;
4457
4458     i {
4459         color: #CCC;
4460     }
4461 }
4462
4463 .ac-library {
4464     background-color: #EEE;
4465     border-radius: 4px;
4466     color: #000;
4467     display: inline-block;
4468     font-size: 80%;
4469     padding: 1px 4px;
4470 }
4471
4472 .ac-currentlibrary {
4473     .ac-library {
4474         background-color: #E6FCB7;
4475         font-weight: bold;
4476
4477     }
4478 }
4479
4480 .currentlibrary {
4481     background-color: #E6FCB7;
4482     display: inline-block;
4483     padding: 2px 4px;
4484 }
4485
4486 .availability {
4487     .item_count {
4488         font-weight: bold;
4489         padding: 2px;
4490
4491         &::after {
4492             content: ")";
4493         }
4494
4495         &::before {
4496             content: "(";
4497         }
4498     }
4499
4500     .item_counts {
4501         font-weight: bold;
4502         white-space: nowrap;
4503     }
4504
4505     .results_available_count {
4506         font-weight: bold;
4507         margin-bottom: .5em;
4508     }
4509
4510     .results_checkedout {
4511         color: #900;
4512         margin: .3em 0;
4513     }
4514
4515     .results_unavailable {
4516         color: #555;
4517         font-style: italic;
4518         margin: .3em 0;
4519     }
4520
4521     .result_item_details {
4522         display:inline-block;
4523         white-space:nowrap
4524     }
4525 }
4526
4527 @media (min-width: 200px) {
4528
4529 }
4530
4531 @media (max-width: 767px) {
4532     .header-menu-link {
4533         display: inline-block;
4534     }
4535
4536     #catalog-search-link {
4537         display: none;
4538         padding: 0;
4539     }
4540
4541     #cartmenulink {
4542         background: transparent none;
4543         padding-left: 1.5em;
4544     }
4545
4546     #changelanguage {
4547         li {
4548             float: left;
4549
4550             li {
4551                 float: none;
4552             }
4553         }
4554
4555         .open {
4556             .dropdown-menu {
4557                 background-color: #FFF;
4558                 border: 1px solid #ccc;
4559                 position: absolute;
4560             }
4561         }
4562     }
4563
4564     #header {
4565         background-color: #FFF;
4566         border: 1px solid #CCC;
4567         margin-bottom: 1em;
4568
4569         a {
4570             font-weight: normal;
4571             padding-left: 1.5em;
4572
4573             &:hover {
4574                 background-color: #0070A9;
4575                 color: #FFF;
4576             }
4577         }
4578
4579         ul {
4580             border: 0;
4581             box-shadow: unset;
4582             float: none;
4583             left: auto;
4584             position: relative;
4585             right: auto;
4586
4587             &.dropdown-menu {
4588                 display: block;
4589             }
4590         }
4591
4592         .dropdown-menu {
4593             li {
4594                 a {
4595                     color: #004D99;
4596
4597                     &:hover {
4598                         color: #FFF;
4599                     }
4600                 }
4601             }
4602         }
4603
4604         .dropdown-toggle {
4605             display: none;
4606         }
4607     }
4608
4609     h1#logo {
4610         float: none;
4611         margin: auto;
4612     }
4613
4614     #marcPreview {
4615         margin: 0;
4616         width: auto;
4617     }
4618
4619     .navbar-fixed-bottom .nav > li {
4620         border-right: 0;
4621     }
4622
4623     #user-menu {
4624         .open {
4625             .dropdown-menu {
4626                 background-color: #FFF;
4627                 border: 1px solid #ccc;
4628                 position: absolute;
4629             }
4630         }
4631
4632         li {
4633             float: left;
4634
4635             li {
4636                 float: none;
4637             }
4638         }
4639     }
4640 }
4641
4642 @media (max-width: 768px) {
4643     .navbar-nav {
4644         li {
4645
4646             a {
4647                 padding: .4em .6em;
4648             }
4649         }
4650     }
4651 }
4652
4653 @media only screen and ( max-width: 768px ) {
4654     .browse-button {
4655         display: inline-block;
4656         width: 50%;
4657     }
4658
4659     #browse-previous {
4660         border-bottom-left-radius: 5px;
4661         border-bottom-width: 1px;
4662         border-right-width: 0;
4663     }
4664
4665     #browse-next {
4666         border-bottom-left-radius: 0;
4667         border-bottom-right-radius: 5px;
4668     }
4669 }
4670
4671 @media (min-width: 800px) {
4672
4673
4674
4675     #helper {
4676         i {
4677             display: none;
4678         }
4679
4680         span {
4681             display: inline;
4682         }
4683     }
4684
4685     #logged-in-info-full {
4686         display: inline;
4687     }
4688
4689     #logged-in-info-brief {
4690         display: none;
4691     }
4692
4693     .loggedin-menu-label {
4694         display: none;
4695     }
4696 }
4697
4698 @media only screen and ( min-width: 1200px ) {
4699     .browse-button {
4700         display: inline-block;
4701         width: 50%;
4702     }
4703
4704     #browse-previous {
4705         border-bottom-left-radius: 5px;
4706         border-bottom-width: 1px;
4707         border-right-width: 0;
4708     }
4709
4710     #browse-next {
4711         border-bottom-left-radius: 0;
4712         border-bottom-right-radius: 5px;
4713     }
4714 }
4715
4716 @media print {
4717     body.modalprinter * {
4718         visibility: hidden;
4719     }
4720
4721     body.modalprinter .modal-dialog.focused {
4722         position: absolute;
4723         padding: 0;
4724         margin: 0;
4725         left: 0;
4726         top: 0;
4727     }
4728
4729     body.modalprinter .modal-dialog.focused .modal-content {
4730         border-width: 0;
4731     }
4732
4733     body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title,
4734     body.modalprinter .modal-dialog.focused .modal-content .modal-body,
4735     body.modalprinter .modal-dialog.focused .modal-content .modal-body * {
4736         visibility: visible;
4737     }
4738
4739     body.modalprinter .modal-dialog.focused .modal-content .modal-header,
4740     body.modalprinter .modal-dialog.focused .modal-content .modal-body {
4741         padding: 0;
4742     }
4743
4744     body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title {
4745         margin-bottom: 20px;
4746     }
4747 }