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

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