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

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