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