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