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