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