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