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