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