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

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