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     display: block;
1838     font-style: italic;
1839 }
1840
1841 #menu {
1842     border-right: 1px solid #B9D8D9;
1843     margin-right: .5em;
1844     padding-bottom: 2em;
1845     padding-top: 1em;
1846
1847     li {
1848         a {
1849             background: linear-gradient(to bottom, #E8F0F6 0%, #E8F0F6 96%, #C1C1C1 100%);
1850             border: 1px solid #B9D8D9;
1851             border-bottom-left-radius: 5px;
1852             border-top-left-radius: 5px;
1853             display: block;
1854             font-size: 111%;
1855             margin: .5em 0;
1856             margin-right: -1px;
1857             padding: .4em .3em;
1858             text-decoration: none;
1859
1860             &:hover {
1861                 background: linear-gradient(to bottom, #FAFAFA 0%, #FFFFFF 96%, #E6E6E6 97%, #CCCCCC 99%, #C1C1C1 100%);
1862                 border-bottom: 1px solid #85CA11;
1863                 border-left: 1px solid #85CA11;
1864                 border-top: 1px solid #85CA11;
1865             }
1866         }
1867
1868         &.active {
1869             a {
1870                 background-color: #FFFFFF;
1871                 background-image: none;
1872                 border-bottom: 1px solid #85CA11;
1873                 border-left: 1px solid #85CA11;
1874                 border-right: 0;
1875                 border-top: 1px solid #85CA11;
1876                 color: #000000;
1877                 font-weight: bold;
1878
1879                 &:hover {
1880                     background-color: #FFFFFF;
1881                     color: #538200;
1882                 }
1883             }
1884         }
1885     }
1886
1887     ul {
1888         li {
1889             list-style-type: none;
1890         }
1891     }
1892 }
1893
1894
1895 #logo {
1896     background: transparent url("../img/koha-logo-medium.png") no-repeat scroll 0%;
1897     margin: .75em .3em .75em .7em;
1898
1899     a {
1900         border: 0;
1901         cursor: pointer;
1902         display: block;
1903         height: 0 !important;
1904         margin: 0;
1905         overflow: hidden;
1906         padding: 44px 0 0;
1907         text-decoration: none;
1908         width: 180px;
1909     }
1910 }
1911
1912 #closewindow {
1913     margin-top: 2em;
1914     text-align: center;
1915
1916     a {
1917         font-weight: bold;
1918     }
1919 }
1920
1921 .barcode {
1922     font-size: 200%;
1923     vertical-align: middle;
1924 }
1925
1926 li {
1927     &.email {
1928         overflow: hidden;
1929         text-overflow: ellipsis;
1930         white-space: nowrap;
1931     }
1932 }
1933
1934 .patronbriefinfo {
1935     li {
1936         &.email {
1937             font-size: 87%;
1938             padding: 0 10px 0 0;
1939             width: 90%;
1940         }
1941     }
1942 }
1943
1944 .empty {
1945     color: #CCC;
1946 }
1947
1948 .address {
1949     font-size: 110%;
1950
1951     li {
1952         list-style-type: none;
1953     }
1954 }
1955
1956 .title {
1957     font-weight: bold;
1958 }
1959
1960 .hold {
1961     float: right;
1962     font-size: 90%;
1963     margin: 0;
1964 }
1965
1966 .thumbnail {
1967     display: block;
1968     margin: auto;
1969 }
1970
1971 .thumbnails {
1972     li {
1973         display: inline-block;
1974         list-style-type: none;
1975         margin: 4px;
1976     }
1977
1978     .remove {
1979         border-top: 1px solid #EEE;
1980         display: block;
1981         font-size: 90%;
1982         margin: 4px -4px 2px -4px;
1983         padding-top: .5em;
1984         text-align: center;
1985     }
1986
1987     & + p {
1988         border-top: 1px solid #eee;
1989         margin-top: 1em;
1990         padding-top: 1em;
1991     }
1992 }
1993
1994 #searchresults {
1995     ul {
1996         li {
1997             clear: left;
1998             font-size: 90%;
1999             list-style: url("../img/item-bullet.gif");
2000             padding: .2em 0;
2001
2002             img {
2003                 float: left;
2004                 margin: 3px 5px 3px -5px;
2005             }
2006         }
2007     }
2008
2009     span {
2010         &.status {
2011             clear: left;
2012             color: #900;
2013             display: block;
2014         }
2015
2016         &.unavailable {
2017             clear: left;
2018             display: block;
2019         }
2020     }
2021
2022     table {
2023         td {
2024             vertical-align: top;
2025         }
2026     }
2027
2028     &.unavailability {
2029         strong {
2030             display: block;
2031         }
2032     }
2033 }
2034
2035 #searchresults {
2036     .address {
2037         ul {
2038             margin: 0;
2039             padding-left: 0;
2040             li {
2041                 clear: none;
2042                 float: left;
2043                 list-style: none;
2044                 margin-left: 1ch;
2045                 padding: 0;
2046             }
2047         }
2048     }
2049 }
2050
2051 #searchheader {
2052     background-color: #E6F0F2;
2053     border: 1px solid #B9D8D9;
2054     border-radius: 5px 5px 0 0;
2055     font-size: 80%;
2056     margin: 0 0 .5em -1px;
2057     padding: .4em 0 .4em 1em;
2058
2059     &.floating {
2060         border-radius: 0;
2061         margin-top: 0;
2062     }
2063
2064     .btn-group {
2065         > .btn {
2066             &:first-child {
2067                 margin-left: .7em;
2068             }
2069         }
2070     }
2071
2072     form {
2073         float: right;
2074         padding: 5px 5px 3px 0;
2075
2076         &.fz3950 {
2077             float: right;
2078             font-size: 125%;
2079             padding: 0 0 0 5em;
2080         }
2081
2082         &.fz3950bigrpad {
2083             float: right;
2084             font-size: 125%;
2085             padding: 5px 25em 0 0;
2086         }
2087     }
2088 }
2089
2090 #search-facets {
2091     border: 1px solid #B9D8D9;
2092     border-radius: 5px 5px 0 0;
2093
2094     h4 {
2095         background-color: #E6F0F2;
2096         border-bottom: 1px solid #B9D8D9;
2097         border-radius: 5px 5px 0 0;
2098         font-size: 90%;
2099         margin: 0;
2100         padding: .4em .2em;
2101         text-align: center;
2102     }
2103
2104     ul {
2105         margin: 0;
2106         padding: .3em;
2107
2108         li {
2109             font-weight: bold;
2110             list-style-type: none;
2111         }
2112     }
2113
2114     li {
2115         li {
2116             font-size: 85%;
2117             font-weight: normal;
2118             margin-bottom: 2px;
2119             padding: .1em .2em;
2120         }
2121
2122         &.showmore {
2123             font-weight: bold;
2124             text-indent: 1em;
2125         }
2126     }
2127 }
2128
2129 .facet-count {
2130     display: inline-block;
2131 }
2132
2133 .bookcoverimg {
2134     text-align: center;
2135 }
2136
2137 .custom_cover_image {
2138     img {
2139         max-width: 140px;
2140     }
2141 }
2142
2143 #biblio-cover-slider {
2144     border: 1px solid #b9d8d9;
2145     border-radius: 3px;
2146     margin: 5px;
2147     padding: 10px 5px 5px 5px;
2148     min-height: 175px;
2149 }
2150
2151 .cover-slides {
2152     background: #FFF url("[% interface | html %]/[% theme | html %]/img/spinner-small.gif") center center no-repeat;
2153
2154     .hint {
2155         font-size: 90%;
2156         padding: .5em 0;
2157     }
2158
2159     a {
2160         &.nav-active {
2161             &:link,
2162             &:visited {
2163                 color: #85ca11;
2164             }
2165         }
2166     }
2167 }
2168
2169 .cover-image {
2170     display: none;
2171
2172     img {
2173         height: auto;
2174         max-width: 100%;
2175     }
2176 }
2177
2178 .cover-nav {
2179     display: inline-block;
2180     padding: 3px 4px;
2181 }
2182
2183 .searchhighlightblob {
2184     font-size: 75%;
2185     font-style: italic;
2186 }
2187
2188 #irregularity_summary {
2189     vertical-align: top;
2190 }
2191
2192 #CheckAll,
2193 #CheckNone,
2194 #CheckPending {
2195     font-weight: normal;
2196     margin: 0 .5em 0 0;
2197 }
2198
2199 .lost,
2200 .dmg,
2201 .wdn {
2202     color: #990000;
2203     display: block;
2204 }
2205
2206 .datedue {
2207     color: #999;
2208     display: block;
2209     font-style: italic;
2210 }
2211
2212 .waitinghere,
2213 .credit {
2214     color: #669900;
2215 }
2216
2217 #mainuserblock {
2218     border: 1px solid #E8E8E8;
2219     margin-top: .5em;
2220     padding: .5em;
2221 }
2222
2223 .labeledmarc-table {
2224     border: 0;
2225 }
2226
2227 .labeledmarc-label {
2228     border: 0;
2229     color: #000000;
2230     font-size: 11pt;
2231     font-style: italic;
2232     padding: 5;
2233 }
2234
2235 .labeledmarc-value {
2236     border: 0;
2237     color: #000;
2238     font-size: 10pt;
2239     padding: 5;
2240 }
2241
2242 #marcPreview {
2243     table {
2244         border: 0;
2245         font-family: $font-monospace;
2246         font-size: 95%;
2247         margin: .7em 0 0;
2248     }
2249
2250     tbody {
2251         tr {
2252             &:nth-child(2n+1) {
2253                 td {
2254                     background-color: #FFFFFF;
2255                 }
2256             }
2257         }
2258     }
2259
2260     td {
2261         border: 0;
2262         padding: 2px;
2263         vertical-align: top;
2264     }
2265
2266     th {
2267         background-color: #FFFFFF;
2268         border: 0;
2269         padding: 2px;
2270         text-align: left;
2271         vertical-align: top;
2272         white-space: nowrap;
2273     }
2274
2275     &.modal-dialog {
2276         width: 80%;
2277     }
2278 }
2279
2280 .modal-dialog {
2281     .dialog {
2282         border-radius: 0;
2283         border-width: 1px 0 0 0;
2284         margin: 15px -15px -15px -15px;
2285         padding: 15px;
2286         text-align: left;
2287         width: unset;
2288
2289         h3 {
2290             margin: unset;
2291             text-align: left;
2292         }
2293
2294         &.alert {
2295             background: #FFFADE none;
2296             border-color: #E0C726;
2297
2298             .problem {
2299                 background-color: transparent;
2300             }
2301         }
2302
2303         &.message {
2304             background: #E8EDF6 none;
2305             border-color: #A4BEDD;
2306
2307             .problem {
2308                 background-color: transparent;
2309             }
2310         }
2311     }
2312
2313     &.modal-wide {
2314         width: 80%;
2315     }
2316 }
2317
2318 #cartDetails {
2319     background-color: #FFFFFF;
2320     border: 1px solid #739ACF;
2321     box-shadow: 1px 1px 3px 0 #666;
2322     color: #000;
2323     display: none;
2324     margin: 0;
2325     padding: 10px;
2326     text-align: center;
2327     width: 180px;
2328     z-index: 50;
2329 }
2330
2331 #cartmenulink {
2332     padding-left: 15px;
2333
2334     i.fa.fa-shopping-cart {
2335         padding-right: 7px;
2336     }
2337 }
2338
2339 #basketcount {
2340     span {
2341         display: inline;
2342         font-size: 90%;
2343         font-weight: normal;
2344         padding: 0;
2345     }
2346 }
2347
2348 #moremenu {
2349     display: none;
2350 }
2351
2352 .results_summary {
2353     color: #707070;
2354     display: block;
2355     font-size: 85%;
2356     padding: 0 0 .5em;
2357
2358     a {
2359         font-weight: normal;
2360     }
2361
2362     .label {
2363         color: #202020;
2364     }
2365 }
2366
2367 .child_fund_amount {
2368     font-style: italic;
2369 }
2370
2371 .number_box {
2372     font-size: 105%;
2373     line-height: 200%;
2374
2375     a,
2376     span {
2377         background-color: #E4ECF5;
2378         border: 1px solid #A4BEDD;
2379         border-radius: 4px;
2380         font-weight: bold;
2381         padding: .1em .4em;
2382         text-decoration: none;
2383
2384         &:hover {
2385             background-color: #EBEFF7;
2386         }
2387     }
2388 }
2389
2390 .container {
2391     border: 1px solid #EEE;
2392     margin: 1em 0;
2393     padding: 1em;
2394 }
2395
2396 .import_export {
2397     position: relative;
2398
2399     .export_ok {
2400         background: #E3E3E3 none;
2401         border: 0;
2402         cursor: pointer;
2403         margin-left: 20px;
2404         padding: 10px;
2405     }
2406
2407     .import_export_options {
2408         background: #FFFFFF;
2409         border: 1px solid #CDCDCD;
2410         left: 60px;
2411         padding: 10px;
2412         position: absolute;
2413         top: 0;
2414         width: 300px;
2415         z-index: 1;
2416     }
2417 }
2418
2419 .import_export_options {
2420     background: #E3E3E3 none;
2421     border: 0;
2422     cursor: pointer;
2423     margin-left: 20px;
2424     padding: 10px;
2425
2426     fieldset {
2427         &.rows {
2428             li {
2429                 label {
2430                     width: 16em;
2431                 }
2432             }
2433         }
2434     }
2435
2436     .importing {
2437         background: none;
2438         padding: inherit;
2439     }
2440 }
2441
2442 .form_import {
2443     fieldset {
2444         &.rows {
2445             li {
2446                 label {
2447                     width: auto;
2448                 }
2449             }
2450         }
2451     }
2452
2453     .input_import {
2454         border: 1px solid #BCBCBC;
2455     }
2456 }
2457
2458 .importing {
2459     position: relative;
2460
2461     .importing_msg {
2462         padding-bottom: 10px;
2463         padding-left: 10px;
2464     }
2465 }
2466
2467
2468 .field_hint {
2469     color: #808080;
2470     font-style: italic;
2471     padding-left: 1em;
2472 }
2473
2474 .m880 {
2475     display: block;
2476     float: right;
2477     padding-left: 20px;
2478     text-align: right;
2479     width: 50%;
2480 }
2481
2482 .advsearch {
2483     margin: 0;
2484
2485     table {
2486         border-collapse: separate;
2487         border-spacing: 5px;
2488         border-width: 0;
2489     }
2490
2491     td {
2492         border: 1px solid #EEE;
2493         padding: .3em .4em;
2494     }
2495 }
2496
2497 #circ_circulation_issue {
2498     position: relative;
2499 }
2500
2501 #renew_as_unseen_label {
2502     margin-left: 1em;
2503 }
2504
2505 #renew_as_unseen_checkbox {
2506     margin-right: 1em;
2507 }
2508
2509 #clearscreen {
2510     position: absolute;
2511     right: 0;
2512     top: 0;
2513
2514     a {
2515         background-color: #EEE;
2516         border-radius: 0 0 0 5px;
2517         color: #CCC;
2518         display: block;
2519         font-size: 160%;
2520         font-weight: bold;
2521         padding: 0 .7em .2em;
2522         text-decoration: none;
2523         text-shadow: 0 -1px 0 #666;
2524
2525         &:hover {
2526             color: #CC0000;
2527         }
2528     }
2529 }
2530
2531 #printclearscreen {
2532     position: absolute;
2533     right: 43px;
2534     top: 0;
2535
2536     a {
2537         background-color: #EEE;
2538         border-radius: 0 0 0 5px;
2539         color: #CCC;
2540         display: block;
2541         font-size: 160%;
2542         font-weight: bold;
2543         padding: 0 .7em .2em;
2544         text-decoration: none;
2545         text-shadow: 0 -1px 0 #666;
2546
2547         &:hover {
2548             color: #CC0000;
2549         }
2550     }
2551 }
2552
2553 .no-image {
2554     background-color: #FFFFFF;
2555     border: 1px solid #AAAAAA;
2556     border-radius: 3px;
2557     color: #979797;
2558     display: block;
2559     font-size: 86%;
2560     font-weight: bold;
2561     text-align: center;
2562     width: 75px;
2563 }
2564
2565 #acqui_order_supplierlist {
2566     > div {
2567         &.supplier {
2568             border: 1px solid #EEEEEE;
2569             margin: .5em;
2570             padding: 1em;
2571         }
2572
2573         > div {
2574             > .baskets {
2575                 margin-top: .5em;
2576             }
2577         }
2578
2579         > span {
2580             &.action {
2581                 margin-left: 5em;
2582             }
2583
2584             &.suppliername {
2585                 display: inline;
2586                 font-size: 1.7em;
2587                 margin-bottom: .5em;
2588             }
2589         }
2590     }
2591 }
2592
2593 #ADD-contact {
2594     margin: 0 0 8px 8px;
2595 }
2596
2597 #contact-template {
2598     display: none;
2599 }
2600
2601 // Override core jQueryUI widgets
2602 .ui-widget-content {
2603     background: #FFFFFF none;
2604     border: 1px solid #B9D8D9;
2605     color: #222222;
2606 }
2607
2608 .ui-widget-header {
2609     background: #E6F0F2 none;
2610     border: 1px solid #B9D8D9;
2611     color: #222222;
2612     font-weight: bold;
2613 }
2614
2615 .ui-state-default,
2616 .ui-widget-content .ui-state-default,
2617 .ui-widget-header .ui-state-default {
2618     background: #F4F8F9 none;
2619     border: 1px solid #B9D8D9;
2620     color: #555555;
2621     font-weight: normal;
2622 }
2623
2624 .ui-state-hover,
2625 .ui-widget-content .ui-state-hover,
2626 .ui-widget-header .ui-state-hover,
2627 .ui-state-focus,
2628 .ui-widget-content .ui-state-focus,
2629 .ui-widget-header .ui-state-focus {
2630     background: #E6F0F2 none;
2631     border: 1px solid #B9D8D9;
2632     color: #212121;
2633     font-weight: normal;
2634 }
2635
2636 .ui-state-active,
2637 .ui-widget-content .ui-state-active,
2638 .ui-widget-header .ui-state-active {
2639     background: #FFFFFF none;
2640     border: 1px solid #AAAAAA;
2641     color: #212121;
2642     font-weight: normal;
2643 }
2644
2645 .ui-state-highlight,
2646 .ui-widget-content .ui-state-highlight,
2647 .ui-widget-header .ui-state-highlight {
2648     background: #FFF4C6;
2649     border: 1px solid #FED22F;
2650     color: #363636;
2651 }
2652
2653 .ui-state-error,
2654 .ui-widget-content .ui-state-error,
2655 .ui-widget-header .ui-state-error {
2656     background: #FEF1EC;
2657     border: 1px solid #CD0A0A;
2658     color: #CD0A0A;
2659 }
2660
2661 // Override jQuery Autocomplete
2662 .ui-autocomplete {
2663     box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
2664     cursor: default;
2665     position: absolute;
2666
2667     &.ui-widget-content {
2668         .ui-state-hover {
2669             background: #E6F0F2 none;
2670             border: 1px solid #B9D8D9;
2671             color: #212121;
2672             font-weight: normal;
2673         }
2674     }
2675 }
2676
2677 .ui-autocomplete-loading {
2678     background: #FFF url("../img/spinner-small.gif") right center no-repeat;
2679 }
2680
2681 // jQuery UI standard tabs
2682 .ui-menu {
2683     li {
2684         list-style: none;
2685     }
2686 }
2687
2688 .ui-tabs-nav {
2689     .ui-tabs-active a,
2690     a:hover,
2691     a:focus,
2692     a:active,
2693     span.a {
2694         background: none repeat scroll 0 0 transparent;
2695         outline: 0 none;
2696     }
2697
2698     &.ui-widget-header {
2699         background: none;
2700         border: 0;
2701     }
2702 }
2703
2704 .ui-tabs {
2705     .ui-tabs-nav {
2706         li {
2707             background: #E6F0F2 none;
2708             border: 1px solid #B9D8D9;
2709             margin-right: .4em;
2710             top: 1px;
2711
2712             &.ui-tabs-active {
2713                 background-color: #FFFFFF;
2714                 border: 1px solid #B9D8D9;
2715                 border-bottom-width: 0;
2716
2717                 a {
2718                     color: #000;
2719                     font-weight: bold;
2720                 }
2721
2722                 &.ui-state-hover {
2723                     background: #FFF none;
2724                 }
2725             }
2726
2727             &.ui-state-default {
2728                 &.ui-state-hover {
2729                     background: #EDF4F5 none;
2730                 }
2731             }
2732         }
2733     }
2734
2735     .ui-tabs-panel {
2736         border: 1px solid #B9D8D9;
2737     }
2738
2739     &.ui-widget-content {
2740         background: transparent none;
2741         border: 0;
2742     }
2743
2744     .ui-state-default {
2745         a {
2746             color: #004D99;
2747
2748             &:link,
2749             &:visited {
2750                 color: #004D99;
2751             }
2752         }
2753     }
2754
2755     .ui-state-hover {
2756         a {
2757             color: #538200;
2758
2759             &:link,
2760             &:visited {
2761                 color: #538200;
2762             }
2763         }
2764     }
2765
2766 }
2767
2768 .ui-widget {
2769     font-family: inherit;
2770     font-size: inherit;
2771
2772     input,
2773     select,
2774     textarea,
2775     button {
2776         font-family: inherit;
2777         font-size: inherit;
2778     }
2779 }
2780
2781 .statictabs {
2782     > ul {
2783         background: none repeat scroll 0 0 transparent;
2784         border: 0 none;
2785         border-bottom-left-radius: 4px;
2786         border-bottom-right-radius: 4px;
2787         border-top-left-radius: 4px;
2788         border-top-right-radius: 4px;
2789         color: #222222;
2790         font-size: 100%;
2791         font-weight: bold;
2792         line-height: 1.3;
2793         list-style: none outside none;
2794         margin: 0;
2795         outline: 0 none;
2796         padding: .2em .2em 0;
2797         text-decoration: none;
2798
2799         &::after {
2800             clear: both;
2801         }
2802
2803         &::before,
2804         &::after {
2805             content: "";
2806             display: table;
2807         }
2808
2809         li {
2810             background: none repeat scroll 0 0 #E6F0F2;
2811             border: 1px solid #B9D8D9;
2812             border-bottom: 0 none;
2813             border-top-left-radius: 4px;
2814             border-top-right-radius: 4px;
2815             color: #555555;
2816             float: left;
2817             font-weight: normal;
2818             list-style: none outside none;
2819             margin-bottom: 0;
2820             margin-right: .4em;
2821             padding: 0;
2822             position: relative;
2823             top: 1px;
2824             white-space: nowrap;
2825
2826             &.active {
2827                 background-color: #FFFFFF;
2828                 color: #212121;
2829                 font-weight: normal;
2830                 padding-bottom: 1px;
2831
2832                 a {
2833                     background: none repeat scroll 0 0 transparent;
2834                     color: #000000;
2835                     cursor: text;
2836                     font-weight: bold;
2837                     outline: 0 none;
2838                     top: 1px;
2839                 }
2840             }
2841
2842             a {
2843                 color: #004D99;
2844                 cursor: pointer;
2845                 float: left;
2846                 padding: .5em 1em;
2847                 text-decoration: none;
2848
2849                 &:hover {
2850                     background-color: #EDF4F5;
2851                     border-top-left-radius: 4px;
2852                     border-top-right-radius: 4px;
2853                     color: #538200;
2854                 }
2855             }
2856         }
2857     }
2858
2859     .tabs-container {
2860         background: none repeat scroll 0 0 transparent;
2861         border: 1px solid #B9D8D9;
2862         border-bottom-left-radius: 4px;
2863         border-bottom-right-radius: 4px;
2864         color: #222222;
2865         display: block;
2866         padding: 1em 1.4em;
2867     }
2868 }
2869
2870 .toptabs {
2871         .ui-tabs-panel {
2872             background: #FFF none;
2873         }
2874 }
2875
2876 .authref {
2877     font-style: normal;
2878     text-indent: 4em;
2879 }
2880
2881 .seefrom,
2882 .seealso {
2883     font-style: italic;
2884     text-indent: 2em;
2885 }
2886
2887 #authfinderops {
2888     float: right;
2889 }
2890
2891 .authorizedheading {
2892     font-weight: bold;
2893 }
2894
2895 .authres_notes,
2896 .authres_seealso,
2897 .authres_otherscript {
2898     padding-top: 3px;
2899 }
2900
2901 .authres_notes {
2902     font-style: italic;
2903 }
2904
2905
2906 .contents {
2907     width: 75%;
2908
2909     .newline::after {
2910         content: "\A → ";
2911         white-space: pre;
2912     }
2913
2914     .t {
2915         font-weight: bold;
2916         display: inline;
2917     }
2918
2919     .r {
2920         display: inline;
2921     }
2922 }
2923
2924
2925 .contentblock {
2926     font-size: 95%;
2927     line-height: 135%;
2928     margin-left: 2em;
2929     position: relative;
2930
2931     :first-child::before {
2932         content: "→ ";
2933     }
2934 }
2935
2936 #hierarchies {
2937     a {
2938         color: #069;
2939         font-weight: normal;
2940         text-decoration: underline;
2941
2942         &:hover {
2943             color: #990033;
2944         }
2945     }
2946 }
2947
2948 #didyoumeanopac,
2949 #didyoumeanintranet {
2950     float: left;
2951     width: 260px;
2952 }
2953
2954 .pluginlist {
2955     padding-bottom: 10px;
2956 }
2957
2958 .plugin {
2959     margin: 0 1em 1em 0;
2960 }
2961
2962 .pluginname {
2963     background-color: #E6F0F2;
2964     cursor: move;
2965     margin: .3em;
2966     padding-bottom: 4px;
2967     padding-left: .2em;
2968
2969     .ui-icon {
2970         float: right;
2971     }
2972 }
2973
2974 .plugindesc {
2975     padding: .4em;
2976 }
2977
2978 .ui-sortable-placeholder {
2979     border: 1px dotted #000;
2980     height: 80px;
2981     visibility: visible;
2982
2983     * {
2984         visibility: hidden;
2985     }
2986 }
2987
2988 // jQuery UI Datepicker
2989 .ui-datepicker {
2990     box-shadow: 1px 1px 3px 0 #666;
2991
2992     table {
2993         border: 0;
2994         border-collapse: collapse;
2995         font-size: .9em;
2996         margin: 0 0 .4em;
2997         width: 100%;
2998     }
2999
3000     th {
3001         background: transparent none;
3002         border: 0;
3003         font-weight: bold;
3004         padding: .7em .3em;
3005         text-align: center;
3006     }
3007 }
3008
3009 .ui-datepicker-trigger {
3010     vertical-align: middle;
3011 }
3012
3013 // css for timepicker
3014 .ui-timepicker-div {
3015     dl {
3016         text-align: left;
3017
3018         dd {
3019             margin: 0 10px 10px 65px;
3020         }
3021
3022         dt {
3023             height: 25px;
3024             margin-bottom: -25px;
3025         }
3026
3027         td {
3028             font-size: 90%;
3029         }
3030     }
3031
3032     .ui-widget-header {
3033         margin-bottom: 8px;
3034     }
3035 }
3036
3037 .ui-tpicker-grid-label {
3038     background: none;
3039     border: 0;
3040     margin: 0;
3041     padding: 0;
3042 }
3043
3044 .ui_tpicker_second,
3045 .ui_tpicker_millisec,
3046 .ui_tpicker_microsec {
3047     display: none;
3048 }
3049
3050 // jQuery UI Accordion
3051 .ui-accordion-header,
3052 .ui-widget-content .ui-accordion-header {
3053     font-size: 110%;
3054     font-weight: bold;
3055 }
3056
3057 video {
3058     width: 480px;
3059 }
3060
3061 // Bootstrap overrides
3062
3063 .dropdown-header {
3064     border-top: 1px solid #EEE;
3065     color: #000;
3066     font-weight: bold;
3067     margin-top: 5px;
3068     padding-left: 10px;
3069
3070     &:first-child {
3071         border-top: 0;
3072     }
3073 }
3074
3075 nav {
3076     background: #E6F0F2 none;
3077     border: 0;
3078 }
3079
3080 .navbar-collapse {
3081     background: #E6F0F2 none;
3082     box-shadow: none;
3083 }
3084
3085 .navbar-nav {
3086     li {
3087         list-style: none;
3088
3089         &.open {
3090             li {
3091                 a {
3092                     font-weight: normal;
3093                 }
3094             }
3095         }
3096
3097         a {
3098             font-weight: bold;
3099             padding-bottom: .4em;
3100             padding-top: .4em;
3101         }
3102     }
3103 }
3104
3105 .nav .open > a,
3106 .nav .open > a:hover,
3107 .nav .open > a:focus {
3108     background-color: transparent;
3109     border: 0;
3110 }
3111
3112 .nav > li > a:hover,
3113 .nav > li > a:focus {
3114     background-color: transparent;
3115     text-decoration: none;
3116 }
3117
3118 .pagination {
3119     margin:.5em .8em;
3120
3121     .active {
3122         a {
3123             background-color: #5A9EAA;
3124             border-color: #5A9EAA;
3125
3126             &:hover,
3127             &:focus {
3128                 background-color: #5A9EAA;
3129                 border-color: #5A9EAA;
3130             }
3131         }
3132
3133         span {
3134             background-color: #5A9EAA;
3135             border-color: #5A9EAA;
3136
3137             &:hover,
3138             &:focus {
3139                 background-color: #5A9EAA;
3140                 border-color: #5A9EAA;
3141             }
3142         }
3143     }
3144 }
3145
3146 button,
3147 .btn {
3148     border-color: #ADADAD #ADADAD #949494;
3149     font-family: $font-main;
3150
3151     &.btn-link {
3152         border: 0;
3153     }
3154 }
3155
3156 .btn-xs,
3157 .btn-group-xs > .btn {
3158     font-size: 10.5px;
3159     padding: 3px 5px;
3160 }
3161
3162 #toolbar {
3163     .dropdown-menu {
3164         border-top-width: 1px;
3165         font-size: 13px;
3166     }
3167
3168     &.floating {
3169         border-radius: 0;
3170         margin-top: 0;
3171     }
3172 }
3173
3174 #changelanguage {
3175     background: #FFF none;
3176     border-top: 1px solid #EEE;
3177     min-height: $language-footer-min-height;
3178
3179     .dropdown-menu {
3180         > li {
3181             > a,
3182             > span {
3183                 padding: 5px 15px;
3184             }
3185         }
3186     }
3187
3188     .navbar-text {
3189         margin: 0;
3190
3191         span {
3192             display: block;
3193             line-height: 20px;
3194         }
3195     }
3196
3197     .navbar-nav {
3198         li {
3199             a {
3200                 line-height: 20px;
3201             }
3202         }
3203     }
3204 }
3205
3206 .loggedout {
3207     color: #004D99;
3208     font-weight: bold;
3209     padding: .4em .2em;
3210 }
3211
3212 .navbar-fixed-bottom {
3213     .navbar-inner {
3214         min-height: 0;
3215         padding: .4em 0;
3216     }
3217
3218     .nav > li {
3219         border-right: 1px solid #CCC;
3220
3221         > a {
3222             font-weight: normal;
3223         }
3224
3225         &:last-child {
3226             border-right: 0;
3227         }
3228
3229         &.navbar-text {
3230             line-height: normal;
3231             padding: .4em .7em;
3232         }
3233     }
3234 }
3235
3236 .tooltip {
3237     &.bottom {
3238         .tooltip-arrow {
3239             border-bottom-color: #EEE;
3240         }
3241
3242         .tooltip-inner {
3243             background-color: #FFFFFF;
3244             border: 1px solid rgba(0, 0, 0, .2);
3245             box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
3246             color: #000;
3247             font-size: 120%;
3248             padding: 1em;
3249         }
3250     }
3251 }
3252
3253 .separator {
3254     color: #666;
3255     padding: 0 .2em;
3256 }
3257
3258 .close {
3259     filter: none;
3260     float: none;
3261     font-size: inherit;
3262     font-weight: normal;
3263     line-height: 1.5;
3264     opacity: inherit;
3265     position: inherit;
3266     right: auto;
3267     text-shadow: none;
3268     top: auto;
3269
3270     &:hover {
3271         color: inherit;
3272         filter: inherit;
3273         font-size: inherit;
3274         opacity: inherit;
3275     }
3276 }
3277
3278
3279 label {
3280     .radio &,
3281     .checkbox & {
3282         margin-left: 20px;
3283         padding-left: 0;
3284     }
3285
3286     &.tip {
3287         display: block;
3288         margin: .5em 0;
3289     }
3290 }
3291
3292 .radio {
3293     input {
3294         &[type="radio"] {
3295             margin-left: 0;
3296             position: relative;
3297         }
3298     }
3299 }
3300
3301 .checkbox {
3302     input {
3303         &[type="checkbox"] {
3304             margin-left: 0;
3305             position: relative;
3306         }
3307     }
3308 }
3309
3310 .modal-header {
3311     .closebtn {
3312         margin-top: 4px;
3313     }
3314 }
3315
3316 .closebtn {
3317     color: #000;
3318     filter: alpha(opacity = 20);
3319     float: right;
3320     font-size: 21px;
3321     font-weight: bold;
3322     line-height: 1;
3323     opacity: .2;
3324     text-shadow: 0 1px 0 #FFFFFF;
3325
3326     &:hover,
3327     &:focus {
3328         color: #000;
3329         cursor: pointer;
3330         filter: alpha(opacity = 50);
3331         opacity: .5;
3332         text-decoration: none;
3333     }
3334 }
3335
3336 .modal-body {
3337     background-color: #FFF;
3338     overflow-y: auto;
3339
3340     fieldset,
3341     ol {
3342         background-color: transparent;
3343         border: 0;
3344         margin: 0;
3345         padding: 0;
3346     }
3347 }
3348
3349 .modal-content {
3350     background-color: #EDF4F6;
3351 }
3352
3353 .btn-group {
3354     label,
3355     select {
3356         font-size: 13px;
3357     }
3358 }
3359
3360 .tooltip-inner {
3361     white-space: pre-wrap;
3362 }
3363
3364 pre {
3365     background-color: transparent;
3366     border: 0;
3367     border-radius: 0;
3368     color: inherit;
3369     display: block;
3370     font-size: inherit;
3371     line-height: inherit;
3372     margin: 0;
3373     padding: 0;
3374     word-break: break-all;
3375     word-wrap: break-word;
3376 }
3377
3378 code {
3379     background-color: transparent;
3380     border-radius: 0;
3381     color: inherit;
3382     font-size: inherit;
3383     padding: 0;
3384 }
3385
3386 .pagination > li > a,
3387 .pagination > li > span {
3388     font-weight: bold;
3389 }
3390
3391 // End Bootstrap overrides
3392
3393 .waiting {
3394     cursor: wait;
3395 }
3396
3397 #jobpanel,
3398 #jobstatus,
3399 #jobfailed {
3400     display: none;
3401 }
3402
3403 #jobstatus {
3404     margin: .4em;
3405 }
3406
3407 #jobprogress {
3408     background: url("../img/progress.png") -300px 0 no-repeat;
3409     border: 1px solid #666;
3410     display: inline-block;
3411     height: 10px;
3412     width: 200px;
3413  }
3414
3415 .progress_panel {
3416     border: 2px solid #EEE;
3417     border-radius: 5px;
3418     clear: both;
3419     font-size: 120%;
3420     margin: 1em 0;
3421     padding: 1em;
3422 }
3423
3424 progress {
3425     width: 50%;
3426 }
3427
3428 #selections {
3429     white-space: normal;
3430     width: 100%;
3431
3432     input {
3433         margin: 0 2px;
3434         vertical-align: middle;
3435     }
3436
3437     span {
3438         background-color: #EBF3FF;
3439         border-radius: 5px;
3440         font-size: 75%;
3441         line-height: 240%;
3442         margin: 3px;
3443         padding: 3px;
3444         white-space: nowrap;
3445
3446         &.selected {
3447             background-color: #CCE0FC;
3448         }
3449     }
3450 }
3451
3452 #changepasswordf {
3453     input {
3454         &[type="text"],
3455         &[type="password"] {
3456             font-family: $font-monospace;
3457             font-size: 140%;
3458             padding: .3em;
3459         }
3460     }
3461 }
3462
3463 // Class to be added to toolbar when it starts being fixed at the top of the screen
3464
3465 .floating {
3466     box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .5);
3467     z-index: 100;
3468 }
3469
3470 .inline {
3471     display: inline;
3472 }
3473
3474 .nowrap {
3475     white-space: nowrap;
3476 }
3477
3478 .tag_editor {
3479     background: transparent url("../img/edit-tag.png") top left no-repeat;
3480     display: block;
3481     float: left;
3482     height: 16px;
3483     margin: 4px;
3484     overflow: hidden;
3485     text-indent: 100%;
3486     white-space: nowrap;
3487     width: 16px;
3488
3489     &.upload {
3490         background: transparent none;
3491         font-size: 90%;
3492         height: unset;
3493         overflow: unset;
3494         text-indent: unset;
3495         width: unset;
3496     }
3497 }
3498
3499 .browse-controls {
3500     margin-left: 1.1em;
3501     margin-right: .5em;
3502     padding-bottom: 1em;
3503     padding-top: 1em;
3504 }
3505
3506 #browse-return-to-results {
3507     background-color: #E8F0F6;
3508     border: 1px solid #B9D8D9;
3509     border-bottom-width: 0;
3510     border-top-left-radius: 5px;
3511     border-top-right-radius: 5px;
3512     display: block;
3513     padding: .5em;
3514     text-align: center;
3515 }
3516
3517 .browse-button {
3518     background-color: #FFF;
3519     border: 1px solid #B9D8D9;
3520     color: #004D99;
3521     display: block;
3522     overflow: hidden;
3523     padding: .4em .6em;
3524     text-align: center;
3525     white-space: nowrap;
3526     width: 100%;
3527
3528     &:hover {
3529         background: #FAFAFA;
3530     }
3531 }
3532
3533 span {
3534     &.browse-button {
3535         background: #FAFAFA;
3536         color: #222;
3537     }
3538
3539     &.circ-hlt {
3540         color: #CC0000;
3541         font-weight: bold;
3542     }
3543
3544     &.expired {
3545         color: #990000;
3546         font-style: italic;
3547     }
3548
3549     &.name {
3550         font-style: italic;
3551         font-weight: bold;
3552     }
3553
3554     &.required {
3555         color: #C00;
3556         font-style: italic;
3557         margin-left: .5em;
3558     }
3559
3560     &.important {
3561         color: #EAC117;
3562         font-style: italic;
3563         margin-left: .5em;
3564     }
3565
3566     &[class*=" label-"] {
3567         color: #FFF;
3568         display: inline;
3569         font-size: 75%;
3570         font-weight: normal;
3571         padding: .2em .6em .3em;
3572     }
3573 }
3574
3575
3576 .result-biblio-itemtype {
3577     float: right;
3578     font-size: 85%;
3579     margin: .5em;
3580     padding: .5em;
3581     text-align: center;
3582
3583     img {
3584         display: block;
3585         margin: auto;
3586         margin-bottom: 2px;
3587     }
3588 }
3589
3590 #browse-previous {
3591     border-bottom-width: 0;
3592 }
3593
3594 #browse-next {
3595     border-bottom-right-radius: 5px;
3596     border-bottom-left-radius: 5px;
3597 }
3598
3599 .loading-overlay {
3600     background-color: #FFFFFF;
3601     cursor: wait;
3602     height: 100%;
3603     left: 0;
3604     opacity: .7;
3605     position: fixed;
3606     top: 0;
3607     width: 100%;
3608     z-index: 1000;
3609
3610     div {
3611         background: transparent url("../img/loading.gif") top left no-repeat;
3612         font-size: 175%;
3613         font-weight: bold;
3614         height: 2em;
3615         left: 50%;
3616         margin: -1em 0 0 -2.5em;
3617         padding-left: 50px;
3618         position: absolute;
3619         top: 50%;
3620         width: 15em;
3621     }
3622 }
3623
3624 #merge_invoices {
3625     display: none;
3626     margin: 1em auto;
3627 }
3628
3629 #merge {
3630     margin: .5em 0 0;
3631 }
3632
3633 #merge_table {
3634     tr {
3635         &.active {
3636             td {
3637                 background-color: #FFFFCC;
3638             }
3639         }
3640     }
3641 }
3642
3643 input.renew {
3644     margin-right: 1em;
3645 }
3646
3647 .renewals {
3648     display: block;
3649     font-size: .8em;
3650     padding: .5em;
3651 }
3652
3653 .dialog input#renewonholdduedate {
3654     padding: 2px;
3655 }
3656
3657 .date-select {
3658     label {
3659         display: inline-block;
3660         width: 40%;
3661     }
3662 }
3663
3664 #newonholdduedate {
3665     display: none;
3666 }
3667
3668 #transport-types {
3669     padding-top: .5px;
3670 }
3671
3672 #i18nMenu {
3673     .navbar-text {
3674         .currentlanguage {
3675             color: #000;
3676             font-weight: bold;
3677         }
3678     }
3679
3680     a {
3681         &.currentlanguage {
3682             &:link,
3683             &:visited {
3684                 font-weight: bold;
3685             }
3686         }
3687
3688         .sublanguage-selected {
3689             color: #000;
3690             font-weight: bold;
3691         }
3692     }
3693 }
3694
3695 .onsite_checkout-select {
3696     label,
3697     #circ_circulation_issue & {
3698         font-size: inherit;
3699         font-weight: normal;
3700     }
3701 }
3702
3703 .onsite_checkout {
3704     color: #CC0000;
3705 }
3706
3707 .onsite-checkout-only {
3708     background-color: rgba(255, 242, 206, .5);
3709     border: 1px solid #FFF2CE;
3710     border-radius: 4px;
3711 }
3712
3713 .branchgriditem {
3714     background-color: #FFFFFF;
3715     border: 1px solid #B9D8D9;
3716     border-radius: 3px;
3717     display: table-cell;
3718     float: left;
3719     margin: 3px;
3720     padding: .3em;
3721 }
3722
3723 .branchgridrow {
3724     display: table-row;
3725 }
3726
3727 .branchselector {
3728     display: table;
3729 }
3730
3731 .hq-author {
3732     font-weight: bold;
3733 }
3734
3735 #cn_browser_table_wrapper > #cn_browser_table {
3736     margin: auto;
3737     width: 90%;
3738 }
3739
3740 #new_rule {
3741     background-color: #F4F8F9;
3742     border: 2px solid #B9D8D9;
3743     border-radius: 5px;
3744     display: none;
3745     margin: .3em;
3746     padding: .3em;
3747 }
3748
3749
3750 .blocks {
3751     margin-bottom: .3em;
3752 }
3753
3754 .remove_rule {
3755     font-size: 80%;
3756     padding-left: .7em;
3757 }
3758
3759 .underline {
3760     text-decoration: underline;
3761 }
3762
3763 .overline {
3764     text-decoration: overline;
3765 }
3766
3767 .order-control {
3768     padding-right: 5px;
3769 }
3770
3771 #borrower_message {
3772     margin-top: 10px;
3773 }
3774
3775 .form-group {
3776     margin-bottom: 10px;
3777
3778     label {
3779         font-weight: bold;
3780     }
3781 }
3782
3783
3784 .form-message {
3785     background-color: #FFF;
3786     border: 1px solid #A4BEDD;
3787     border-radius: 5px;
3788     margin: 1em;
3789     padding: .5em;
3790 }
3791
3792 .modal-textarea {
3793     width: 98%;
3794 }
3795
3796 #pat_member {
3797     #patron_list_dialog,
3798     #searchresults {
3799         display: none;
3800     }
3801 }
3802
3803 #patron_search {
3804     #filters {
3805         display: none;
3806     }
3807 }
3808
3809 #fixedlengthbuilderaction {
3810     border: 3px solid #E6F0F2;
3811     left: 80%;
3812     padding: 5px;
3813     position: relative;
3814     top: -80px;
3815     width: 12%;
3816 }
3817
3818 #interlibraryloans {
3819     #dataPreviewLabel {
3820         margin: .3em 0;
3821     }
3822
3823     .bg-info {
3824         overflow: auto;
3825         position: relative;
3826     }
3827
3828     .format {
3829         h4 {
3830             margin-bottom: 20px;
3831         }
3832
3833         h5 {
3834             margin-top: 20px;
3835         }
3836
3837         input {
3838             margin: 10px 0;
3839         }
3840
3841         li {
3842             list-style: none;
3843         }
3844     }
3845
3846     #add-new-fields {
3847         margin: 1em;
3848     }
3849
3850     #column-toggle,
3851     #reset-toggle {
3852         font-weight: 700;
3853         line-height: 1.5em;
3854         margin: 15px 0;
3855     }
3856
3857     #freeform-fields {
3858         .custom-name {
3859             margin-right: 1em;
3860             text-align: right;
3861             width: 9em;
3862         }
3863
3864         .delete-new-field {
3865             margin-left: 1em;
3866         }
3867     }
3868
3869     #search-summary {
3870         position: absolute;
3871         top: 50%;
3872         transform: translateY(-50%);
3873     }
3874
3875     #generic_confirm_search_count {
3876         margin: 1em 0 1em 10em;
3877     }
3878
3879     #generic_confirm_search {
3880         display: block;
3881         visibility: hidden;
3882         margin: 1em 0 1em 10em;
3883     }
3884
3885     #partnerSearch {
3886         .modal-dialog {
3887             width: 50vw;
3888         }
3889         .modal-body {
3890             max-height: 70vh;
3891         }
3892     }
3893 }
3894
3895 .ill-view-panel {
3896     margin-top: 15px;
3897
3898     .notesopac {
3899         display: inline-block;
3900     }
3901 }
3902
3903 #illfilter_dateplaced_start,
3904 #illfilter_datemodified_start,
3905 #illfilter_dateplaced_end,
3906 #illfilter_datemodified_end {
3907     width: 80%;
3908 }
3909
3910 #requestattributes {
3911     font-family: monospace;
3912     line-height: 1.3em;
3913 }
3914
3915 #ill-requests {
3916     width: 100% !important;
3917 }
3918
3919 .ar-title, .hq-title {
3920     .biblio-title {
3921         font-weight: bold;
3922     }
3923 }
3924
3925 #ill-issue-title {
3926     margin: 20px 0 30px 0;
3927 }
3928
3929 .ill_availability_sourcename {
3930     margin-top: 20px;
3931 }
3932
3933 #stockrotation {
3934     h3 {
3935         margin: 30px 0 10px 0;
3936     }
3937     .dialog {
3938         h3 {
3939             margin: 10px 0;
3940         }
3941         margin-bottom: 20px;
3942     }
3943     .highlight_stage {
3944         font-weight: bold;
3945     }
3946 }
3947
3948 #catalog_stockrotation .highlight_stage {
3949     font-weight: bold;
3950 }
3951
3952 #stockrotation {
3953     #rota_form {
3954         textarea {
3955             width: 300px;
3956             height: 100px;
3957         }
3958         #name {
3959             width: 300px;
3960         }
3961         fieldset {
3962             width: auto;
3963         }
3964     }
3965     #stage_form fieldset, #add_rota_item_form fieldset {
3966         width: auto;
3967     }
3968     .dialog.alert {
3969         ul {
3970             margin: 20px 0;
3971         }
3972         li {
3973             list-style-type: none;
3974         }
3975     }
3976 }
3977
3978 #catalog_stockrotation {
3979     .item_select_rota {
3980         vertical-align: middle;
3981     }
3982     h1 {
3983         margin-bottom: 20px;
3984     }
3985 }
3986
3987 #stockrotation td.actions, #catalog_stockrotation td.actions {
3988     vertical-align: middle;
3989 }
3990
3991 #stockrotation .stage, #catalog_stockrotation .stage {
3992     display: inline-block;
3993     padding: 5px 7px;
3994     margin: 3px 0 3px 0;
3995     border-radius: 5px;
3996     background-color: rgba(0, 0, 0, 0.1);
3997 }
3998
3999 #stage_list_headings {
4000     font-weight: bold;
4001     span {
4002         padding: 3px;
4003     }
4004 }
4005
4006 #manage_stages {
4007     ul {
4008         padding-left: 0;
4009     }
4010     li {
4011         list-style: none;
4012         margin-bottom: 5px;
4013         span {
4014             padding: 6px 3px;
4015         }
4016     }
4017     .stagename {
4018         width: 15em;
4019         display: inline-block;
4020     }
4021     .stageduration {
4022         width: 10em;
4023         display: inline-block;
4024     }
4025     .stageactions {
4026         display: inline-block;
4027     }
4028     li:nth-child(odd) {
4029         background-color: #F3F3F3;
4030     }
4031     .drag_handle {
4032         margin-right: 6px;
4033         cursor: move;
4034     }
4035     .drag_placeholder {
4036         height: 2em;
4037         border: 1px dotted #aaa;
4038     }
4039     h3 {
4040         display: inline-block;
4041     }
4042     #ajax_status {
4043         display: inline-block;
4044         border: 1px solid #bcbcbc;
4045         border-radius: 5px;
4046         padding: 5px;
4047         margin-left: 10px;
4048         background: #f3f3f3;
4049     }
4050     #manage_stages_help {
4051         margin: 20px 0;
4052     }
4053 }
4054
4055 #payForm {
4056     fieldset {
4057         &.rows {
4058             padding-left: 1em;
4059             padding-right: 2em;
4060         }
4061     }
4062 }
4063
4064 #helper {
4065     span {
4066         display: none;
4067     }
4068 }
4069
4070 #logged-in-info-full {
4071     display: none;
4072 }
4073
4074 .loggedin-menu-label {
4075     color: #777;
4076     font-size: 12px;
4077     line-height: 1.42857143;
4078     padding: 4px 12px;
4079     white-space: nowrap;
4080
4081     span {
4082         color: #000;
4083         font-weight: bold;
4084     }
4085
4086     &.divider {
4087         padding: 0;
4088     }
4089 }
4090
4091 .lastborrower {
4092     background-color: #E6F0F2;
4093     border: 1px solid #95C6D0;
4094     box-shadow: 1px 1px 1px 0 #999;
4095     color: #CC0000;
4096     margin: .4em 0;
4097     padding: .3em .5em .3em .5em;
4098 }
4099
4100 #lastborrower-ref {
4101     border-radius: 5px 0px 0px 5px;
4102     float: left;
4103 }
4104
4105 #lastborrower-remove {
4106     border-radius: 0px 5px 5px 0px;
4107     cursor: pointer;
4108     float: right;
4109 }
4110
4111 #lastborrower-window {
4112     display: none;
4113     position: absolute;
4114     right: 5px;
4115     top: 0px;
4116 }
4117
4118 /* ==== MODULE LINKS - Start ==== */
4119 .buttons-list {
4120     // List containing the module links
4121     margin-bottom: 30px;
4122     padding: 0;
4123
4124     li {
4125         // Standard attributes for the list elements
4126         list-style-type: none;
4127
4128         a {
4129             &.circ-button {
4130                 // Class used for each module link
4131                 background-color: #F4F8F9;
4132                 background-position: 5px 3px;
4133                 background-repeat: no-repeat;
4134                 border: 2px solid #B9D8D9;
4135                 border-radius: 6px;
4136                 box-sizing: content-box;
4137                 color: #000000;
4138                 display: block;
4139                 font-size: 110%;
4140                 font-weight: bold;
4141                 margin: .5em 0;
4142                 max-width: 260px;
4143                 padding: 8px;
4144                 text-decoration: none;
4145
4146                 &:hover {
4147                     // Class used for each module link hover state
4148                     border-color: #538200;
4149                     color: #538200;
4150                 }
4151             }
4152         }
4153     }
4154 }
4155
4156 .about h2 {
4157     border-bottom: 1px solid #B9D8D9;
4158     padding: .5em .2em;
4159     margin:  .5em 0;
4160 }
4161
4162 .columns-2 {
4163     columns: 2 auto;
4164     column-gap: 2.5em;
4165 }
4166
4167 .columns-3 {
4168     columns: 3 auto;
4169     column-gap: 2.5em;
4170 }
4171
4172 .columns-4 {
4173     columns: 4 auto;
4174     column-gap: 2em;
4175 }
4176
4177 // ==== MODULE LINKS - End ====
4178
4179 #catalog-search-link {
4180     border-right: 1px solid lighten( #E6F0F2, 15% );
4181     padding-right: .3em;
4182 }
4183
4184 #catalog-search-dropdown {
4185     padding: 0;
4186
4187     & > a {
4188         border-left: 1px solid darken( #B4D2D8, 5% );
4189         margin-right: .6em;
4190         padding: .4em .6em;
4191
4192         &:hover,
4193         &.catalog-search-dropdown-hover {
4194             background-color: darken( #E6F0F2, 5% );
4195             border-left: 1px solid darken( #B4D2D8, 15% );
4196         }
4197     }
4198 }
4199
4200 .adlibris-cover {
4201     max-height: 120px;
4202 }
4203
4204 .adlibris-cover-big {
4205     max-height: 200px;
4206 }
4207
4208 #tools_holidays {
4209     .radio,
4210     .checkbox {
4211         label {
4212             margin-left: 0;
4213         }
4214     }
4215 }
4216
4217 /* Permissions */
4218
4219 #permissionstree {
4220     display: inline-block;
4221
4222     label {
4223         cursor: pointer;
4224
4225         &:hover {
4226             color: #004d99;
4227         }
4228     }
4229 }
4230
4231 .main_permission {
4232     font-size: 110%;
4233     font-weight: bold;
4234 }
4235
4236 .permissioncode {
4237     color: #666;
4238     font-style: italic;
4239 }
4240
4241 .permission-highlight {
4242     background-color: #FFC !important;
4243 }
4244
4245 .togglechildren_on,
4246 .togglechildren_off {
4247     float: right;
4248 }
4249
4250 .togglechildren_off,
4251 .children {
4252     display: none;
4253 }
4254
4255 .open {
4256     .togglechildren_off {
4257         display: inline;
4258     }
4259
4260     .togglechildren_on {
4261         display: none;
4262     }
4263 }
4264
4265 .parent {
4266     border: 1px solid #DDD;
4267     border-bottom-width: 0;
4268     padding: 5px;
4269
4270     &:last-child {
4271         border-bottom-width: 1px;
4272     }
4273
4274     &:nth-child(odd) {
4275         background-color: #F8F8F8;
4276     }
4277 }
4278
4279
4280 .superlibrarian-hint {
4281     color: #000;
4282     padding: .2em 0;
4283     text-indent: 2em;
4284 }
4285
4286 .child-flags {
4287     background-color: #FFF;
4288     border: 1px solid #DDD;
4289     border-bottom-width: 0;
4290     margin: 0 5px 0 20px;
4291     padding: 5px;
4292
4293     &:first-child {
4294         margin-top: 10px;
4295     }
4296
4297     &:last-child {
4298         border-bottom-width: 1px;
4299     }
4300
4301     &:nth-child(odd) {
4302         background-color: #EEE;
4303     }
4304 }
4305
4306 .header-menu-link {
4307     display: none;
4308     font-weight: bold;
4309     padding: .4em .6em;
4310 }
4311
4312 #user-menu {
4313     position: absolute;
4314     right: 5px;
4315     top: 0;
4316 }
4317
4318 div#makechart ol li {
4319     list-style: none;
4320 }
4321
4322 div .suggestion_note {
4323     background: transparent none;
4324     border-style: dotted;
4325     border-width: 1px 0 0 0;
4326     font-size: 90%;
4327     padding: 2px 0 0 0;
4328
4329     i {
4330         color: #CCC;
4331     }
4332 }
4333
4334 @media (min-width: 200px) {
4335
4336 }
4337
4338 @media (max-width: 767px) {
4339     .header-menu-link {
4340         display: inline-block;
4341     }
4342
4343     #catalog-search-link {
4344         display: none;
4345         padding: 0;
4346     }
4347
4348     #cartmenulink {
4349         background: transparent none;
4350         padding-left: 1.5em;
4351     }
4352
4353     #changelanguage {
4354         li {
4355             float: left;
4356
4357             li {
4358                 float: none;
4359             }
4360         }
4361
4362         .open {
4363             .dropdown-menu {
4364                 background-color: #FFF;
4365                 border: 1px solid #ccc;
4366                 position: absolute;
4367             }
4368         }
4369     }
4370
4371     #header {
4372         background-color: #FFF;
4373         border: 1px solid #CCC;
4374         margin-bottom: 1em;
4375
4376         a {
4377             font-weight: normal;
4378             padding-left: 1.5em;
4379
4380             &:hover {
4381                 background-color: #0070A9;
4382                 color: #FFF;
4383             }
4384         }
4385
4386         ul {
4387             border: 0;
4388             box-shadow: unset;
4389             float: none;
4390             left: auto;
4391             position: relative;
4392             right: auto;
4393
4394             &.dropdown-menu {
4395                 display: block;
4396             }
4397         }
4398
4399         .dropdown-menu {
4400             li {
4401                 a {
4402                     color: #004D99;
4403
4404                     &:hover {
4405                         color: #FFF;
4406                     }
4407                 }
4408             }
4409         }
4410
4411         .dropdown-toggle {
4412             display: none;
4413         }
4414     }
4415
4416     h1#logo {
4417         float: none;
4418         margin: auto;
4419     }
4420
4421     #marcPreview {
4422         margin: 0;
4423         width: auto;
4424     }
4425
4426     .navbar-fixed-bottom .nav > li {
4427         border-right: 0;
4428     }
4429
4430     #user-menu {
4431         .open {
4432             .dropdown-menu {
4433                 background-color: #FFF;
4434                 border: 1px solid #ccc;
4435                 position: absolute;
4436             }
4437         }
4438
4439         li {
4440             float: left;
4441
4442             li {
4443                 float: none;
4444             }
4445         }
4446     }
4447 }
4448
4449 @media (max-width: 768px) {
4450     .navbar-nav {
4451         li {
4452
4453             a {
4454                 padding: .4em .6em;
4455             }
4456         }
4457     }
4458 }
4459
4460 @media only screen and ( max-width: 768px ) {
4461     .browse-button {
4462         display: inline-block;
4463         width: 50%;
4464     }
4465
4466     #browse-previous {
4467         border-bottom-left-radius: 5px;
4468         border-bottom-width: 1px;
4469         border-right-width: 0;
4470     }
4471
4472     #browse-next {
4473         border-bottom-left-radius: 0;
4474         border-bottom-right-radius: 5px;
4475     }
4476 }
4477
4478 @media (min-width: 800px) {
4479
4480
4481
4482     #helper {
4483         i {
4484             display: none;
4485         }
4486
4487         span {
4488             display: inline;
4489         }
4490     }
4491
4492     #logged-in-info-full {
4493         display: inline;
4494     }
4495
4496     #logged-in-info-brief {
4497         display: none;
4498     }
4499
4500     .loggedin-menu-label {
4501         display: none;
4502     }
4503 }
4504
4505 @media only screen and ( min-width: 1200px ) {
4506     .browse-button {
4507         display: inline-block;
4508         width: 50%;
4509     }
4510
4511     #browse-previous {
4512         border-bottom-left-radius: 5px;
4513         border-bottom-width: 1px;
4514         border-right-width: 0;
4515     }
4516
4517     #browse-next {
4518         border-bottom-left-radius: 0;
4519         border-bottom-right-radius: 5px;
4520     }
4521 }
4522
4523 @media print {
4524     body.modalprinter * {
4525         visibility: hidden;
4526     }
4527
4528     body.modalprinter .modal-dialog.focused {
4529         position: absolute;
4530         padding: 0;
4531         margin: 0;
4532         left: 0;
4533         top: 0;
4534     }
4535
4536     body.modalprinter .modal-dialog.focused .modal-content {
4537         border-width: 0;
4538     }
4539
4540     body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title,
4541     body.modalprinter .modal-dialog.focused .modal-content .modal-body,
4542     body.modalprinter .modal-dialog.focused .modal-content .modal-body * {
4543         visibility: visible;
4544     }
4545
4546     body.modalprinter .modal-dialog.focused .modal-content .modal-header,
4547     body.modalprinter .modal-dialog.focused .modal-content .modal-body {
4548         padding: 0;
4549     }
4550
4551     body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title {
4552         margin-bottom: 20px;
4553     }
4554 }