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