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

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