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