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