koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss

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