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