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