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
1656 #disabled {
1657     a {
1658         color: #999;
1659
1660         &:hover {
1661             color: #999;
1662         }
1663     }
1664 }
1665
1666 #disabled2 {
1667     a {
1668         color: #999;
1669     }
1670 }
1671
1672
1673 .patroninfo {
1674     margin-top: -.5em;
1675
1676     h5 {
1677         border-right: 1px solid #B9D8D9;
1678         margin-bottom: 0;
1679         padding-bottom: .5em;
1680         padding-left: -.5em;
1681         padding-top: .3em;
1682
1683         &:empty {
1684             border-right: 0;
1685         }
1686     }
1687
1688     ul {
1689         border: 0;
1690         border-bottom: 0;
1691         border-right: 1px solid #B9D8D9;
1692         border-top: 0;
1693         margin: 0;
1694         padding: 0;
1695
1696         li {
1697             list-style-type: none;
1698             margin: 0;
1699         }
1700     }
1701
1702     + #menu {
1703         margin-right: 0;
1704     }
1705 }
1706
1707 #patronbasics {
1708     div {
1709         background: transparent url("../img/patron-blank.min.svg") 10px 5px no-repeat;
1710         border: 1px solid #CCCCCC;
1711         height: 125px;
1712         margin: .3em 0 .3em .3em;
1713         padding: 0;
1714         width: 105px;
1715     }
1716 }
1717
1718 #patronimage {
1719     border: 1px solid #CCCCCC;
1720     margin: .3em 0 .3em .3em;
1721     max-width: 140px;
1722     padding: .2em;
1723 }
1724
1725 .patronviews {
1726     border-right: 1px solid #000;
1727     border-top: 1px solid #000;
1728     margin-bottom: .5em;
1729     padding: .5em 0;
1730 }
1731
1732 .column-tool {
1733     font-size: 80%;
1734 }
1735
1736 .hint {
1737     color: #666;
1738     font-size: 95%;
1739 }
1740
1741 .yui-b {
1742     fieldset {
1743         &.brief {
1744             padding: .4em .7em;
1745
1746             fieldset {
1747                 margin: 0 .3em;
1748                 padding: .5em;
1749
1750                 legend {
1751                     font-size: 85%;
1752                 }
1753             }
1754
1755             li {
1756
1757                 &.checkbox {
1758
1759                     input {
1760                         #tools_holidays & {
1761                             margin-left: 0;
1762                         }
1763                     }
1764
1765                     label {
1766                         display: inline;
1767
1768                         #tools_holidays & {
1769                             margin-left: 20px;
1770                         }
1771                     }
1772                 }
1773
1774                 &.dateinsert {
1775                     label {
1776                         display: inline;
1777                     }
1778
1779                     span {
1780                         &.label {
1781                             display: inline;
1782                         }
1783                     }
1784                 }
1785
1786                 &.radio {
1787                     padding: .7em 0;
1788
1789                     input {
1790                         padding: .3em 0;
1791
1792                         #tools_holidays & {
1793                             margin-left: 0;
1794                         }
1795                     }
1796
1797                     label {
1798                         display: inline;
1799
1800                         #tools_holidays & {
1801                             margin-left: 20px;
1802                         }
1803
1804                         span {
1805                             &.label {
1806                                 display: inline;
1807                             }
1808                         }
1809                     }
1810                 }
1811             }
1812
1813             ol {
1814                 font-size: 85%;
1815                 margin: 0;
1816                 padding: 0;
1817             }
1818
1819             select,
1820             [type=text] {
1821                 width: 100%;
1822             }
1823         }
1824
1825         &.rows {
1826             div {
1827                 &.hint {
1828                     margin-left: 10.5em;
1829                 }
1830             }
1831
1832             td {
1833                 label {
1834                     width: auto;
1835                 }
1836
1837                 span {
1838                     &.label {
1839                         width: auto;
1840                     }
1841                 }
1842             }
1843         }
1844     }
1845 }
1846
1847 #yui-main {
1848     .yui-b {
1849         fieldset {
1850             &.brief {
1851                 select,
1852                 [type=text] {
1853                     width: auto;
1854                 }
1855             }
1856         }
1857     }
1858 }
1859
1860 .btn-toolbar {
1861     fieldset {
1862         &.action {
1863             margin-top: 0;
1864         }
1865     }
1866
1867     .dropdown-menu {
1868         font-size: 13px;
1869     }
1870 }
1871
1872 .rows {
1873     .label {
1874         white-space: normal;
1875     }
1876 }
1877
1878 .checkedout {
1879     color: #999999;
1880     font-style: italic;
1881 }
1882
1883 .subfield_not_filled {
1884     background-color: #FFFF99;
1885 }
1886
1887 .content_hidden {
1888     display: none;
1889     visibility: hidden; // you propably don't need to change this one
1890 }
1891
1892 // the property for the displayed tab
1893 .content_visible {
1894     display: block;
1895     visibility: visible; // you propably don't need to change this one
1896 }
1897
1898 #z3950searcht {
1899     table {
1900         border: 0;
1901         padding: 20px;
1902     }
1903 }
1904
1905 #z3950_search_targets {
1906     height: 338px;
1907     overflow-y: auto;
1908 }
1909
1910 #z3950_search_targets_acq {
1911     height: 308px;
1912     overflow-y: auto;
1913 }
1914
1915 .z3950checks {
1916     padding-left: 1em;
1917 }
1918
1919 .error {
1920     color: #CC0000;
1921 }
1922
1923 .status_ok {
1924     background-color: #90EE90;
1925 }
1926
1927 .status_warn {
1928     background-color: #FF0000;
1929 }
1930
1931 // Font Awesome icons
1932 i {
1933     &.error {
1934         color: #CC0000;
1935     }
1936
1937     &.success {
1938         color: #008000;
1939     }
1940
1941     &.warn {
1942         color: #FFA500;
1943     }
1944 }
1945
1946 .checkout-setting {
1947     font-size: 85%;
1948     padding-top: .3em;
1949
1950     input {
1951         vertical-align: middle;
1952     }
1953
1954     label {
1955         font-size: inherit;
1956         font-weight: normal;
1957     }
1958 }
1959
1960 .checkout-settings {
1961     background-color: #F4F8F9;
1962     border-radius: 0;
1963     border-top: 2px solid #B9D8D9;
1964     display: none;
1965     margin-left: -1em;
1966     margin-right: -1em;
1967     margin-top: 1em;
1968     padding: 1em 1em 0;
1969 }
1970
1971 #show-checkout-settings {
1972     margin-top: .5em;
1973 }
1974
1975 .blocker {
1976     color: #990000;
1977 }
1978
1979 .inaccurate-item-statuses {
1980     color: #990000;
1981 }
1982
1983 .circmessage {
1984     li {
1985         list-style: url("../img/arrow-bullet.gif");
1986         margin-bottom: .2em;
1987     }
1988 }
1989
1990 #circ_needsconfirmation {
1991     margin: auto;
1992 }
1993
1994 .dialog {
1995     border: 1px solid #BCBCBC;
1996     border-radius: 2px;
1997     margin: 1em auto;
1998     padding: .5em;
1999     text-align: center;
2000     width: 65%;
2001
2002     a {
2003         &.approve {
2004             display: inline-block;
2005         }
2006     }
2007
2008     button,
2009     a.approve {
2010         background: #FFF none;
2011         border: 1px outset #999999;
2012         border-left-color: #666;
2013         border-top-color: #666;
2014         margin: .4em;
2015         padding: .4em;
2016         white-space: pre-line;
2017
2018         &:active {
2019             border: 1px inset #999999;
2020         }
2021
2022         &:hover {
2023             background-color: #FFC;
2024         }
2025     }
2026
2027     h2,
2028     h3,
2029     h4 {
2030         margin: auto;
2031         text-align: center;
2032     }
2033
2034     input {
2035         background-color: #FFFFFF;
2036         border: 1px solid #BCBCBC;
2037         margin: .4em;
2038         padding: .4em .4em .4em 25px;
2039
2040         &:hover {
2041             background-color: #FFC;
2042         }
2043
2044         &[type="submit"] {
2045             background: #FFF none;
2046         }
2047     }
2048
2049     li {
2050         list-style-position: inside;
2051     }
2052
2053     table {
2054         margin: .5em auto;
2055
2056         td {
2057             text-align: left;
2058         }
2059
2060         th {
2061             text-align: right;
2062         }
2063     }
2064 }
2065
2066 .alert {
2067     background: linear-gradient(to bottom, #FEF8D3 0%, #FFEC91 9%, #FFED87 89%, #F9DC00 100%);
2068     border: 1px solid #E0C726;
2069     color: inherit;
2070     text-align: center;
2071     text-shadow: none;
2072
2073     strong {
2074         color: #900;
2075     }
2076
2077     // Redefine a new style for Bootstrap's class "close" since we use that already
2078     // Use <a class="closebtn" href="#">&times;</a>
2079     .closebtn {
2080         line-height: 20px;
2081         position: relative;
2082         right: -21px;
2083         top: -2px;
2084     }
2085 }
2086
2087 .approve,
2088 .success {
2089     i {
2090         &.fa {
2091             color: #008000;
2092         }
2093     }
2094 }
2095
2096 .deny {
2097     i {
2098         &.fa {
2099             color: #CC0000;
2100         }
2101     }
2102 }
2103
2104 .new {
2105     i {
2106         &.fa {
2107             color: #425FAF;
2108         }
2109     }
2110 }
2111
2112 .accesskey {
2113     text-decoration: underline;
2114 }
2115
2116 .missing {
2117     background-color: #FFFFCC;
2118 }
2119
2120 .term {
2121     background-color: #FFC;
2122     color: #990000;
2123 }
2124
2125 // style for shelving location in catalogsearch
2126 .shelvingloc {
2127     display: block;
2128     font-style: italic;
2129 }
2130
2131 #menu {
2132     border-right: 1px solid #B9D8D9;
2133     margin-right: .5em;
2134     padding-bottom: 2em;
2135     padding-top: 1em;
2136
2137     li {
2138         a {
2139             background: linear-gradient(to bottom, #E8F0F6 0%, #E8F0F6 96%, #C1C1C1 100%);
2140             border: 1px solid #B9D8D9;
2141             border-bottom-left-radius: 5px;
2142             border-top-left-radius: 5px;
2143             display: block;
2144             font-size: 111%;
2145             margin: .5em 0;
2146             margin-right: -1px;
2147             padding: .4em .3em;
2148             text-decoration: none;
2149
2150             &:hover {
2151                 background: linear-gradient(to bottom, #FAFAFA 0%, #FFFFFF 96%, #E6E6E6 97%, #CCCCCC 99%, #C1C1C1 100%);
2152                 border-bottom: 1px solid #85CA11;
2153                 border-left: 1px solid #85CA11;
2154                 border-top: 1px solid #85CA11;
2155             }
2156         }
2157
2158         &.active {
2159             a {
2160                 background-color: #FFFFFF;
2161                 background-image: none;
2162                 border-bottom: 1px solid #85CA11;
2163                 border-left: 1px solid #85CA11;
2164                 border-right: 0;
2165                 border-top: 1px solid #85CA11;
2166                 color: #000000;
2167                 font-weight: bold;
2168
2169                 &:hover {
2170                     background-color: #FFFFFF;
2171                     color: #538200;
2172                 }
2173             }
2174         }
2175     }
2176
2177     ul {
2178         li {
2179             list-style-type: none;
2180         }
2181     }
2182 }
2183
2184
2185 #logo {
2186     background: transparent url("../img/koha-logo-medium.png") no-repeat scroll 0%;
2187     margin: .75em .3em .75em .7em;
2188
2189     a {
2190         border: 0;
2191         cursor: pointer;
2192         display: block;
2193         height: 0 !important;
2194         margin: 0;
2195         overflow: hidden;
2196         padding: 44px 0 0;
2197         text-decoration: none;
2198         width: 180px;
2199     }
2200 }
2201
2202 #closewindow {
2203     margin-top: 2em;
2204     text-align: center;
2205
2206     a {
2207         font-weight: bold;
2208     }
2209 }
2210
2211 .barcode {
2212     font-size: 200%;
2213     vertical-align: middle;
2214 }
2215
2216 li {
2217     &.email {
2218         overflow: hidden;
2219         text-overflow: ellipsis;
2220         white-space: nowrap;
2221     }
2222 }
2223
2224 .patronbriefinfo {
2225     li {
2226         &.email {
2227             font-size: 87%;
2228             padding: 0 10px 0 0;
2229             width: 90%;
2230         }
2231     }
2232 }
2233
2234 .empty {
2235     color: #CCC;
2236 }
2237
2238 .address {
2239     font-size: 110%;
2240
2241     li {
2242         list-style-type: none;
2243     }
2244 }
2245
2246 .title {
2247     font-size: 105%;
2248     font-weight: bold;
2249 }
2250
2251 .hold {
2252     float: right;
2253     font-size: 90%;
2254     margin: 0;
2255 }
2256
2257 .thumbnail {
2258     display: block;
2259     margin: auto;
2260
2261     > li {
2262         list-style-type: none;
2263     }
2264 }
2265
2266 #searchresults {
2267     ul {
2268         li {
2269             clear: left;
2270             font-size: 90%;
2271             list-style: url("../img/item-bullet.gif");
2272             padding: .2em 0;
2273
2274             img {
2275                 float: left;
2276                 margin: 3px 5px 3px -5px;
2277             }
2278         }
2279
2280         span {
2281             &.status {
2282                 clear: left;
2283                 color: #900;
2284                 display: block;
2285             }
2286
2287             &.unavailable {
2288                 clear: left;
2289                 display: block;
2290             }
2291         }
2292
2293         table {
2294             td {
2295                 vertical-align: top;
2296             }
2297         }
2298     }
2299
2300     &.unavailability {
2301         strong {
2302             display: block;
2303         }
2304     }
2305 }
2306
2307 #searchheader {
2308     background-color: #E6F0F2;
2309     border: 1px solid #B9D8D9;
2310     border-radius: 5px 5px 0 0;
2311     font-size: 80%;
2312     margin: 0 0 .5em -1px;
2313     padding: .4em 0 .4em 1em;
2314
2315     &.floating {
2316         border-radius: 0;
2317         margin-top: 0;
2318     }
2319
2320     .btn-group {
2321         > .btn {
2322             &:first-child {
2323                 margin-left: .7em;
2324             }
2325         }
2326     }
2327
2328     form {
2329         float: right;
2330         padding: 5px 5px 3px 0;
2331
2332         &.fz3950 {
2333             float: right;
2334             font-size: 125%;
2335             padding: 0 0 0 5em;
2336         }
2337
2338         &.fz3950bigrpad {
2339             float: right;
2340             font-size: 125%;
2341             padding: 5px 25em 0 0;
2342         }
2343     }
2344 }
2345
2346 #search-facets {
2347     border: 1px solid #B9D8D9;
2348     border-radius: 5px 5px 0 0;
2349
2350     h4 {
2351         background-color: #E6F0F2;
2352         border-bottom: 1px solid #B9D8D9;
2353         border-radius: 5px 5px 0 0;
2354         font-size: 90%;
2355         margin: 0;
2356         padding: .4em .2em;
2357         text-align: center;
2358     }
2359
2360     ul {
2361         margin: 0;
2362         padding: .3em;
2363
2364         li {
2365             font-weight: bold;
2366             list-style-type: none;
2367         }
2368     }
2369
2370     li {
2371         li {
2372             font-size: 85%;
2373             font-weight: normal;
2374             margin-bottom: 2px;
2375             padding: .1em .2em;
2376         }
2377
2378         &.showmore {
2379             font-weight: bold;
2380             text-indent: 1em;
2381         }
2382     }
2383 }
2384
2385 .facet-count {
2386     display: inline-block;
2387 }
2388
2389 #bookcoverimg {
2390     text-align: center;
2391 }
2392
2393 .searchhighlightblob {
2394     font-size: 75%;
2395     font-style: italic;
2396 }
2397
2398 #displayexample {
2399     background-color: #CCCCCC;
2400     margin-bottom: 10px;
2401     padding: 5px;
2402 }
2403
2404 #irregularity_summary {
2405     vertical-align: top;
2406 }
2407
2408 #toplevelmenu {
2409     padding: 0;
2410 }
2411
2412 #CheckAll,
2413 #CheckNone,
2414 #CheckPending {
2415     font-weight: normal;
2416     margin: 0 .5em 0 0;
2417 }
2418
2419 .lost,
2420 .dmg,
2421 .wdn {
2422     color: #990000;
2423     display: block;
2424 }
2425
2426 .datedue {
2427     color: #999;
2428     display: block;
2429     font-style: italic;
2430 }
2431
2432 .waitinghere,
2433 .credit {
2434     color: #669900;
2435 }
2436
2437 #mainuserblock {
2438     border: 1px solid #E8E8E8;
2439     margin-top: .5em;
2440     padding: .5em;
2441 }
2442
2443 .labeledmarc-table {
2444     border: 0;
2445 }
2446
2447 .labeledmarc-label {
2448     border: 0;
2449     color: #000000;
2450     font-size: 11pt;
2451     font-style: italic;
2452     padding: 5;
2453 }
2454
2455 .labeledmarc-value {
2456     border: 0;
2457     color: #000;
2458     font-size: 10pt;
2459     padding: 5;
2460 }
2461
2462 #marcPreview {
2463     table {
2464         border: 0;
2465         font-family: $font-monospace;
2466         font-size: 95%;
2467         margin: .7em 0 0;
2468     }
2469
2470     tbody {
2471         tr {
2472             &:nth-child(2n+1) {
2473                 td {
2474                     background-color: #FFFFFF;
2475                 }
2476             }
2477         }
2478     }
2479
2480     td {
2481         border: 0;
2482         padding: 2px;
2483         vertical-align: top;
2484     }
2485
2486     th {
2487         background-color: #FFFFFF;
2488         border: 0;
2489         padding: 2px;
2490         text-align: left;
2491         vertical-align: top;
2492         white-space: nowrap;
2493     }
2494
2495     &.modal-dialog {
2496         width: 80%;
2497     }
2498 }
2499
2500 .modal-dialog {
2501     &.modal-wide {
2502         width: 80%;
2503     }
2504 }
2505
2506 @media (max-width: 767px) {
2507     #marcPreview {
2508         margin: 0;
2509         width: auto;
2510     }
2511 }
2512
2513 #cartDetails {
2514     background-color: #FFFFFF;
2515     border: 1px solid #739ACF;
2516     box-shadow: 1px 1px 3px 0 #666;
2517     color: #000;
2518     display: none;
2519     margin: 0;
2520     padding: 10px;
2521     text-align: center;
2522     width: 180px;
2523     z-index: 50;
2524 }
2525
2526 #cartmenulink {
2527     background: transparent url("../img/cart-small.gif") left center no-repeat;
2528     padding-left: 15px;
2529 }
2530
2531 #basketcount {
2532     span {
2533         display: inline;
2534         font-size: 90%;
2535         font-weight: normal;
2536         padding: 0;
2537     }
2538 }
2539
2540 #moremenu {
2541     display: none;
2542 }
2543
2544 .results_summary {
2545     color: #707070;
2546     display: block;
2547     font-size: 85%;
2548     padding: 0 0 .5em;
2549
2550     a {
2551         font-weight: normal;
2552     }
2553
2554     .label {
2555         color: #202020;
2556     }
2557 }
2558
2559 .child_fund_amount {
2560     font-style: italic;
2561 }
2562
2563 .number_box {
2564     font-size: 105%;
2565     line-height: 200%;
2566
2567     a,
2568     span {
2569         background-color: #E4ECF5;
2570         border: 1px solid #A4BEDD;
2571         border-radius: 4px;
2572         font-weight: bold;
2573         padding: .1em .4em;
2574         text-decoration: none;
2575
2576         &:hover {
2577             background-color: #EBEFF7;
2578         }
2579     }
2580 }
2581
2582 .container {
2583     border: 1px solid #EEE;
2584     margin: 1em 0;
2585     padding: 1em;
2586 }
2587
2588 .import_export {
2589     position: relative;
2590
2591     .export_ok {
2592         background: #E3E3E3 none;
2593         border: 0;
2594         cursor: pointer;
2595         margin-left: 20px;
2596         padding: 10px;
2597     }
2598
2599     .import_export_options {
2600         background: #FFFFFF;
2601         border: 1px solid #CDCDCD;
2602         left: 60px;
2603         padding: 10px;
2604         position: absolute;
2605         top: 0;
2606         width: 300px;
2607         z-index: 1;
2608     }
2609 }
2610
2611 .import_export_options {
2612     background: #E3E3E3 none;
2613     border: 0;
2614     cursor: pointer;
2615     margin-left: 20px;
2616     padding: 10px;
2617
2618     fieldset {
2619         &.rows {
2620             li {
2621                 label {
2622                     width: 16em;
2623                 }
2624             }
2625         }
2626     }
2627
2628     .importing {
2629         background: none;
2630         padding: inherit;
2631     }
2632 }
2633
2634 .form_import {
2635     fieldset {
2636         &.rows {
2637             li {
2638                 label {
2639                     width: auto;
2640                 }
2641             }
2642         }
2643     }
2644
2645     .input_import {
2646         border: 1px solid #BCBCBC;
2647     }
2648 }
2649
2650 .importing {
2651     position: relative;
2652
2653     .importing_msg {
2654         padding-bottom: 10px;
2655         padding-left: 10px;
2656     }
2657 }
2658
2659
2660 .field_hint {
2661     color: #808080;
2662     font-style: italic;
2663     padding-left: 1em;
2664 }
2665
2666 .m880 {
2667     display: block;
2668     float: right;
2669     padding-left: 20px;
2670     text-align: right;
2671     width: 50%;
2672 }
2673
2674 .advsearch {
2675     margin: 0;
2676
2677     table {
2678         border-collapse: separate;
2679         border-spacing: 5px;
2680         border-width: 0;
2681     }
2682
2683     td {
2684         border: 1px solid #EEE;
2685         padding: .3em .4em;
2686     }
2687 }
2688
2689 #circ_circulation_issue {
2690     position: relative;
2691 }
2692
2693 #clearscreen {
2694     position: absolute;
2695     right: 0;
2696     top: 0;
2697
2698     a {
2699         background-color: #EEE;
2700         border-radius: 0 0 0 5px;
2701         color: #CCC;
2702         display: block;
2703         font-size: 160%;
2704         font-weight: bold;
2705         padding: 0 .7em .2em;
2706         text-decoration: none;
2707         text-shadow: 0 -1px 0 #666;
2708
2709         &:hover {
2710             color: #CC0000;
2711         }
2712     }
2713 }
2714
2715 #printclearscreen {
2716     position: absolute;
2717     right: 43px;
2718     top: 0;
2719
2720     a {
2721         background-color: #EEE;
2722         border-radius: 0 0 0 5px;
2723         color: #CCC;
2724         display: block;
2725         font-size: 160%;
2726         font-weight: bold;
2727         padding: 0 .7em .2em;
2728         text-decoration: none;
2729         text-shadow: 0 -1px 0 #666;
2730
2731         &:hover {
2732             color: #CC0000;
2733         }
2734     }
2735 }
2736 .pager {
2737     background-color: #E8E8E8;
2738     border: 1px solid #BCBCBC;
2739     border-radius: 5px;
2740     display: inline-block;
2741     font-size: 85%;
2742     margin: .4em 0;
2743     padding: .3em .5em;
2744
2745     img {
2746         vertical-align: middle;
2747
2748         &.last {
2749             padding-right: 5px;
2750         }
2751     }
2752
2753     input {
2754         &.pagedisplay {
2755             background-color: transparent;
2756             border: 0;
2757             font-weight: bold;
2758             text-align: center;
2759         }
2760     }
2761
2762     p {
2763         margin: 0;
2764     }
2765 }
2766
2767 .no-image {
2768     background-color: #FFFFFF;
2769     border: 1px solid #AAAAAA;
2770     border-radius: 3px;
2771     color: #979797;
2772     display: block;
2773     font-size: 86%;
2774     font-weight: bold;
2775     text-align: center;
2776     width: 75px;
2777 }
2778
2779 #acqui_order_supplierlist {
2780     > div {
2781         &.supplier {
2782             border: 1px solid #EEEEEE;
2783             margin: .5em;
2784             padding: 1em;
2785         }
2786
2787         > div {
2788             > .baskets {
2789                 margin-top: .5em;
2790             }
2791         }
2792
2793         > span {
2794             &.action {
2795                 margin-left: 5em;
2796             }
2797
2798             &.suppliername {
2799                 display: inline;
2800                 font-size: 1.7em;
2801                 margin-bottom: .5em;
2802             }
2803         }
2804     }
2805 }
2806
2807 #ADD-contact {
2808     margin: 0 0 8px 8px;
2809 }
2810
2811 #contact-template {
2812     display: none;
2813 }
2814
2815 // Override core jQueryUI widgets
2816 .ui-widget-content {
2817     background: #FFFFFF none;
2818     border: 1px solid #B9D8D9;
2819     color: #222222;
2820 }
2821
2822 .ui-widget-header {
2823     background: #E6F0F2 none;
2824     border: 1px solid #B9D8D9;
2825     color: #222222;
2826     font-weight: bold;
2827 }
2828
2829 .ui-state-default,
2830 .ui-widget-content .ui-state-default,
2831 .ui-widget-header .ui-state-default {
2832     background: #F4F8F9 none;
2833     border: 1px solid #B9D8D9;
2834     color: #555555;
2835     font-weight: normal;
2836 }
2837
2838 .ui-state-hover,
2839 .ui-widget-content .ui-state-hover,
2840 .ui-widget-header .ui-state-hover,
2841 .ui-state-focus,
2842 .ui-widget-content .ui-state-focus,
2843 .ui-widget-header .ui-state-focus {
2844     background: #E6F0F2 none;
2845     border: 1px solid #B9D8D9;
2846     color: #212121;
2847     font-weight: normal;
2848 }
2849
2850 .ui-state-active,
2851 .ui-widget-content .ui-state-active,
2852 .ui-widget-header .ui-state-active {
2853     background: #FFFFFF none;
2854     border: 1px solid #AAAAAA;
2855     color: #212121;
2856     font-weight: normal;
2857 }
2858
2859 .ui-state-highlight,
2860 .ui-widget-content .ui-state-highlight,
2861 .ui-widget-header .ui-state-highlight {
2862     background: #FFF4C6;
2863     border: 1px solid #FED22F;
2864     color: #363636;
2865 }
2866
2867 .ui-state-error,
2868 .ui-widget-content .ui-state-error,
2869 .ui-widget-header .ui-state-error {
2870     background: #FEF1EC;
2871     border: 1px solid #CD0A0A;
2872     color: #CD0A0A;
2873 }
2874
2875 // Override jQuery Autocomplete
2876 .ui-autocomplete {
2877     box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
2878     cursor: default;
2879     position: absolute;
2880
2881     &.ui-widget-content {
2882         .ui-state-hover {
2883             background: #E6F0F2 none;
2884             border: 1px solid #B9D8D9;
2885             color: #212121;
2886             font-weight: normal;
2887         }
2888     }
2889 }
2890
2891 .ui-autocomplete-loading {
2892     background: #FFF url("../img/spinner-small.gif") right center no-repeat;
2893 }
2894
2895 // jQuery UI standard tabs
2896 .ui-menu {
2897     li {
2898         list-style: none;
2899     }
2900 }
2901
2902 .ui-tabs-nav {
2903     .ui-tabs-active a,
2904     a:hover,
2905     a:focus,
2906     a:active,
2907     span.a {
2908         background: none repeat scroll 0 0 transparent;
2909         outline: 0 none;
2910     }
2911
2912     &.ui-widget-header {
2913         background: none;
2914         border: 0;
2915     }
2916 }
2917
2918 .ui-tabs {
2919     .ui-tabs-nav {
2920         li {
2921             background: #E6F0F2 none;
2922             border: 1px solid #B9D8D9;
2923             margin-right: .4em;
2924             top: 1px;
2925
2926             &.ui-tabs-active {
2927                 background-color: #FFFFFF;
2928                 border: 1px solid #B9D8D9;
2929                 border-bottom-width: 0;
2930
2931                 a {
2932                     color: #000;
2933                     font-weight: bold;
2934                 }
2935
2936                 &.ui-state-hover {
2937                     background: #FFF none;
2938                 }
2939             }
2940
2941             &.ui-state-default {
2942                 &.ui-state-hover {
2943                     background: #EDF4F5 none;
2944                 }
2945             }
2946         }
2947     }
2948
2949     .ui-tabs-panel {
2950         border: 1px solid #B9D8D9;
2951     }
2952
2953     &.ui-widget-content {
2954         background: transparent none;
2955         border: 0;
2956     }
2957
2958     .ui-state-default {
2959         a {
2960             color: #004D99;
2961
2962             &:link,
2963             &:visited {
2964                 color: #004D99;
2965             }
2966         }
2967     }
2968
2969     .ui-state-hover {
2970         a {
2971             color: #538200;
2972
2973             &:link,
2974             &:visited {
2975                 color: #538200;
2976             }
2977         }
2978     }
2979
2980 }
2981
2982 .ui-widget {
2983     font-family: inherit;
2984     font-size: inherit;
2985
2986     input,
2987     select,
2988     textarea,
2989     button {
2990         font-family: inherit;
2991         font-size: inherit;
2992     }
2993 }
2994
2995 .statictabs {
2996     ul {
2997         background: none repeat scroll 0 0 transparent;
2998         border: 0 none;
2999         border-bottom-left-radius: 4px;
3000         border-bottom-right-radius: 4px;
3001         border-top-left-radius: 4px;
3002         border-top-right-radius: 4px;
3003         color: #222222;
3004         font-size: 100%;
3005         font-weight: bold;
3006         line-height: 1.3;
3007         list-style: none outside none;
3008         margin: 0;
3009         outline: 0 none;
3010         padding: .2em .2em 0;
3011         text-decoration: none;
3012
3013         &::after {
3014             clear: both;
3015         }
3016
3017         &::before,
3018         &::after {
3019             content: "";
3020             display: table;
3021         }
3022
3023         li {
3024             background: none repeat scroll 0 0 #E6F0F2;
3025             border: 1px solid #B9D8D9;
3026             border-bottom: 0 none;
3027             border-top-left-radius: 4px;
3028             border-top-right-radius: 4px;
3029             color: #555555;
3030             float: left;
3031             font-weight: normal;
3032             list-style: none outside none;
3033             margin-bottom: 0;
3034             margin-right: .4em;
3035             padding: 0;
3036             position: relative;
3037             top: 1px;
3038             white-space: nowrap;
3039
3040             &.active {
3041                 background-color: #FFFFFF;
3042                 color: #212121;
3043                 font-weight: normal;
3044                 padding-bottom: 1px;
3045
3046                 a {
3047                     background: none repeat scroll 0 0 transparent;
3048                     color: #000000;
3049                     cursor: text;
3050                     font-weight: bold;
3051                     outline: 0 none;
3052                     top: 1px;
3053                 }
3054             }
3055
3056             a {
3057                 color: #004D99;
3058                 cursor: pointer;
3059                 float: left;
3060                 padding: .5em 1em;
3061                 text-decoration: none;
3062
3063                 &:hover {
3064                     background-color: #EDF4F5;
3065                     border-top-left-radius: 4px;
3066                     border-top-right-radius: 4px;
3067                     color: #538200;
3068                 }
3069             }
3070         }
3071     }
3072
3073     .tabs-container {
3074         background: none repeat scroll 0 0 transparent;
3075         border: 1px solid #B9D8D9;
3076         border-bottom-left-radius: 4px;
3077         border-bottom-right-radius: 4px;
3078         color: #222222;
3079         display: block;
3080         padding: 1em 1.4em;
3081     }
3082 }
3083
3084 .authref {
3085     font-style: normal;
3086     text-indent: 4em;
3087 }
3088
3089 .seefrom,
3090 .seealso {
3091     font-style: italic;
3092     text-indent: 2em;
3093 }
3094
3095 #authfinderops {
3096     float: right;
3097 }
3098
3099 .authorizedheading {
3100     font-weight: bold;
3101 }
3102
3103 .authres_notes,
3104 .authres_seealso,
3105 .authres_otherscript {
3106     padding-top: 3px;
3107 }
3108
3109 .authres_notes {
3110     font-style: italic;
3111 }
3112
3113
3114 .contents {
3115     width: 75%;
3116
3117     .r {
3118         display: inline;
3119     }
3120
3121     .t {
3122         display: inline;
3123         font-weight: bold;
3124
3125         &:first-child {
3126             &::before {
3127                 content: "→ ";
3128             }
3129         }
3130
3131         &::before {
3132             content: "\A→ ";
3133             white-space: pre;
3134         }
3135     }
3136 }
3137
3138 .contentblock {
3139     margin-left: 2em;
3140     position: relative;
3141 }
3142
3143 #hierarchies {
3144     a {
3145         color: #069;
3146         font-weight: normal;
3147         text-decoration: underline;
3148
3149         &:hover {
3150             color: #990033;
3151         }
3152     }
3153 }
3154
3155 #didyoumeanopac,
3156 #didyoumeanintranet {
3157     float: left;
3158     width: 260px;
3159 }
3160
3161 .pluginlist {
3162     padding-bottom: 10px;
3163 }
3164
3165 .plugin {
3166     margin: 0 1em 1em 0;
3167 }
3168
3169 .pluginname {
3170     background-color: #E6F0F2;
3171     cursor: move;
3172     margin: .3em;
3173     padding-bottom: 4px;
3174     padding-left: .2em;
3175
3176     .ui-icon {
3177         float: right;
3178     }
3179 }
3180
3181 .plugindesc {
3182     padding: .4em;
3183 }
3184
3185 .ui-sortable-placeholder {
3186     border: 1px dotted #000;
3187     height: 80px;
3188     visibility: visible;
3189
3190     * {
3191         visibility: hidden;
3192     }
3193 }
3194
3195 // jQuery UI Datepicker
3196 .ui-datepicker {
3197     box-shadow: 1px 1px 3px 0 #666;
3198
3199     table {
3200         border: 0;
3201         border-collapse: collapse;
3202         font-size: .9em;
3203         margin: 0 0 .4em;
3204         width: 100%;
3205     }
3206
3207     th {
3208         background: transparent none;
3209         border: 0;
3210         font-weight: bold;
3211         padding: .7em .3em;
3212         text-align: center;
3213     }
3214 }
3215
3216 .ui-datepicker-trigger {
3217     margin: 0 3px;
3218     vertical-align: middle;
3219 }
3220
3221 // css for timepicker
3222 .ui-timepicker-div {
3223     dl {
3224         text-align: left;
3225
3226         dd {
3227             margin: 0 10px 10px 65px;
3228         }
3229
3230         dt {
3231             height: 25px;
3232             margin-bottom: -25px;
3233         }
3234
3235         td {
3236             font-size: 90%;
3237         }
3238     }
3239
3240     .ui-widget-header {
3241         margin-bottom: 8px;
3242     }
3243 }
3244
3245 .ui-tpicker-grid-label {
3246     background: none;
3247     border: 0;
3248     margin: 0;
3249     padding: 0;
3250 }
3251
3252 .ui_tpicker_second,
3253 .ui_tpicker_millisec,
3254 .ui_tpicker_microsec {
3255     display: none;
3256 }
3257
3258 // jQuery UI Accordion
3259 .ui-accordion-header,
3260 .ui-widget-content .ui-accordion-header {
3261     font-size: 110%;
3262     font-weight: bold;
3263 }
3264
3265 video {
3266     width: 480px;
3267 }
3268
3269 // Bootstrap overrides
3270 button,
3271 .btn {
3272     border-color: #ADADAD #ADADAD #949494;
3273     font-family: $font-main;
3274
3275     &.btn-link {
3276         border: 0;
3277     }
3278 }
3279
3280 .btn-xs,
3281 .btn-group-xs > .btn {
3282     font-size: 10.5px;
3283     padding: 3px 5px;
3284 }
3285
3286 #toolbar {
3287     .dropdown-menu {
3288         border-top-width: 1px;
3289         font-size: 13px;
3290     }
3291
3292     &.floating {
3293         border-radius: 0;
3294         margin-top: 0;
3295     }
3296 }
3297
3298 .dropdown-menu {
3299     border-color: rgba(0, 0, 0, .2);
3300     border-top: 0;
3301     font-size: 12px;
3302
3303     li {
3304         list-style: none outside none;
3305
3306         > a,
3307         &.nav-header {
3308             padding: 4px 20px;
3309             cursor: pointer;
3310
3311             &:hover,
3312             &:focus {
3313                 background-image: linear-gradient(to bottom, #0088CC, #0077B3);
3314                 background-repeat: repeat-x;
3315                 color: #FFFFFF;
3316                 text-decoration: none;
3317             }
3318         }
3319     }
3320 }
3321
3322 .navbar {
3323     color: #333;
3324     min-height: 20px;
3325
3326     .nav {
3327         > li {
3328             list-style: none outside none;
3329             padding: 0 .6em;
3330
3331             > a {
3332                 color: #004D99;
3333                 font-weight: bold;
3334                 padding: .4em .2em;
3335
3336                 &:focus,
3337                 &:hover {
3338                     color: #538200;
3339                 }
3340             }
3341         }
3342
3343         li {
3344             .dropdown {
3345                 &.open > .dropdown-toggle:focus,
3346                 &.active > .dropdown-toggle:focus,
3347                 &.open.active > .dropdown-toggle:focus {
3348                     background: #E6F0F2 none;
3349                     box-shadow: none;
3350                 }
3351             }
3352         }
3353     }
3354
3355
3356 }
3357
3358 #changelanguage {
3359     min-height: $language-footer-min-height;
3360
3361     .dropdown-menu {
3362         > li {
3363             > a,
3364             > span {
3365                 padding: 5px 15px;
3366             }
3367         }
3368     }
3369
3370     .navbar-text {
3371         margin: 0;
3372
3373         span {
3374             display: block;
3375             line-height: 20px;
3376         }
3377     }
3378 }
3379
3380 .loggedout {
3381     color: #004D99;
3382     font-weight: bold;
3383     padding: .4em .2em;
3384 }
3385
3386 .navbar-static-top {
3387     .navbar-inner {
3388         background: #E6F0F2 none;
3389         border: 0;
3390         box-shadow: none;
3391         min-height: 0;
3392         padding-left: 0;
3393     }
3394 }
3395
3396 .navbar-fixed-bottom {
3397     .navbar-inner {
3398         min-height: 0;
3399         padding: .4em 0;
3400     }
3401
3402     .nav > li {
3403         border-right: 1px solid #CCC;
3404
3405         > a {
3406             font-weight: normal;
3407         }
3408
3409         &:last-child {
3410             border-right: 0;
3411         }
3412
3413         &.navbar-text {
3414             line-height: normal;
3415             padding: .4em .7em;
3416         }
3417     }
3418 }
3419
3420 .tooltip {
3421     &.bottom {
3422         .tooltip-arrow {
3423             border-bottom-color: #EEE;
3424         }
3425
3426         .tooltip-inner {
3427             background-color: #FFFFFF;
3428             border: 1px solid rgba(0, 0, 0, .2);
3429             box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
3430             color: #000;
3431             font-size: 120%;
3432             padding: 1em;
3433         }
3434     }
3435 }
3436
3437 .separator {
3438     color: #666;
3439     padding: 0 .2em;
3440 }
3441
3442 .close {
3443     filter: none;
3444     float: none;
3445     font-size: inherit;
3446     font-weight: normal;
3447     line-height: 1.5;
3448     opacity: inherit;
3449     position: inherit;
3450     right: auto;
3451     text-shadow: none;
3452     top: auto;
3453
3454     &:hover {
3455         color: inherit;
3456         filter: inherit;
3457         font-size: inherit;
3458         opacity: inherit;
3459     }
3460 }
3461
3462
3463 label {
3464     .radio &,
3465     .checkbox & {
3466         margin-left: 20px;
3467         padding-left: 0;
3468     }
3469 }
3470
3471 .radio {
3472     input {
3473         &[type="radio"] {
3474             margin-left: 0;
3475             position: relative;
3476         }
3477     }
3478 }
3479
3480 .checkbox {
3481     input {
3482         &[type="checkbox"] {
3483             margin-left: 0;
3484             position: relative;
3485         }
3486     }
3487 }
3488
3489 .modal-header {
3490     .closebtn {
3491         margin-top: 4px;
3492     }
3493 }
3494
3495 .closebtn {
3496     color: #000;
3497     filter: alpha(opacity = 20);
3498     float: right;
3499     font-size: 21px;
3500     font-weight: bold;
3501     line-height: 1;
3502     opacity: .2;
3503     text-shadow: 0 1px 0 #FFFFFF;
3504
3505     &:hover,
3506     &:focus {
3507         color: #000;
3508         cursor: pointer;
3509         filter: alpha(opacity = 50);
3510         opacity: .5;
3511         text-decoration: none;
3512     }
3513 }
3514
3515 .modal-body {
3516     background-color: #FFF;
3517     overflow-y: auto;
3518
3519     fieldset,
3520     ol {
3521         background-color: transparent;
3522         border: 0;
3523         margin: 0;
3524         padding: 0;
3525     }
3526 }
3527
3528 .modal-content {
3529     background-color: #EDF4F6;
3530 }
3531
3532 .btn-group {
3533     label,
3534     select {
3535         font-size: 13px;
3536     }
3537 }
3538
3539 .tooltip-inner {
3540     white-space: pre-wrap;
3541 }
3542
3543 pre {
3544     background-color: transparent;
3545     border: 0;
3546     border-radius: 0;
3547     color: inherit;
3548     display: block;
3549     font-size: inherit;
3550     line-height: inherit;
3551     margin: 0;
3552     padding: 0;
3553     word-break: break-all;
3554     word-wrap: break-word;
3555 }
3556
3557 code {
3558     background-color: transparent;
3559     border-radius: 0;
3560     color: inherit;
3561     font-size: inherit;
3562     padding: 0;
3563 }
3564
3565 .pagination > li > a,
3566 .pagination > li > span {
3567     font-weight: bold;
3568 }
3569
3570 // End Bootstrap overrides
3571
3572 .waiting {
3573     cursor: wait;
3574 }
3575
3576 #jobpanel,
3577 #jobstatus,
3578 #jobfailed {
3579     display: none;
3580 }
3581
3582 #jobstatus {
3583     margin: .4em;
3584 }
3585
3586 #jobprogress {
3587     background: url("../img/progress.png") -300px 0 no-repeat;
3588     border: 1px solid #666;
3589     display: inline-block;
3590     height: 10px;
3591     width: 200px;
3592  }
3593
3594 .progress_panel {
3595     border: 2px solid #EEE;
3596     border-radius: 5px;
3597     clear: both;
3598     font-size: 120%;
3599     margin: 1em 0;
3600     padding: 1em;
3601 }
3602
3603 progress {
3604     width: 50%;
3605 }
3606
3607 #selections {
3608     white-space: normal;
3609     width: 100%;
3610
3611     input {
3612         margin: 0 2px;
3613         vertical-align: middle;
3614     }
3615
3616     span {
3617         background-color: #EBF3FF;
3618         border-radius: 5px;
3619         font-size: 75%;
3620         line-height: 240%;
3621         margin: 3px;
3622         padding: 3px;
3623         white-space: nowrap;
3624
3625         &.selected {
3626             background-color: #CCE0FC;
3627         }
3628     }
3629 }
3630
3631 #changepasswordf {
3632     input {
3633         &[type="text"],
3634         &[type="password"] {
3635             font-family: $font-monospace;
3636             font-size: 140%;
3637             padding: .3em;
3638         }
3639     }
3640 }
3641
3642 // Class to be added to toolbar when it starts being fixed at the top of the screen
3643
3644 .floating {
3645     box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .5);
3646 }
3647
3648 .inline {
3649     display: inline;
3650 }
3651
3652 .nowrap {
3653     white-space: nowrap;
3654 }
3655
3656 .tag_editor {
3657     background: transparent url("../img/edit-tag.png") top left no-repeat;
3658     display: block;
3659     float: left;
3660     height: 16px;
3661     margin: 4px;
3662     overflow: hidden;
3663     text-indent: 100%;
3664     white-space: nowrap;
3665     width: 16px;
3666 }
3667
3668 .browse-controls {
3669     margin-left: 1.1em;
3670     margin-right: .5em;
3671     padding-bottom: 1em;
3672     padding-top: 1em;
3673 }
3674
3675 #browse-return-to-results {
3676     border-top-left-radius: 3px;
3677     border-top-right-radius: 3px;
3678     display: block;
3679     text-align: center;
3680 }
3681
3682 .browse-button {
3683     color: #004D99;
3684     display: inline-block;
3685     padding: .4em .6em;
3686
3687     &:hover {
3688         background: #FAFAFA;
3689     }
3690 }
3691
3692 span {
3693     &.browse-button {
3694         background: #FAFAFA;
3695         color: #222;
3696     }
3697
3698     &.circ-hlt {
3699         color: #CC0000;
3700         font-weight: bold;
3701     }
3702
3703     &.expired {
3704         color: #990000;
3705         font-style: italic;
3706     }
3707
3708     &.name {
3709         font-style: italic;
3710         font-weight: bold;
3711     }
3712
3713     &.permissiondesc {
3714         font-weight: normal;
3715     }
3716
3717     &.required {
3718         color: #C00;
3719         font-style: italic;
3720         margin-left: .5em;
3721     }
3722 }
3723
3724
3725 .result-biblio-itemtype {
3726     float: right;
3727     font-size: 85%;
3728     margin: .5em;
3729     padding: .5em;
3730     text-align: center;
3731
3732     img {
3733         display: block;
3734         margin: auto;
3735         margin-bottom: 2px;
3736     }
3737 }
3738
3739 .browse-label,
3740 .browse-prev-next {
3741     border: 1px solid #B9D8D9;
3742 }
3743
3744 .browse-label {
3745     background-color: #E8F0F6;
3746     border-top-left-radius: 5px;
3747     border-top-right-radius: 5px;
3748 }
3749
3750 .browse-prev-next {
3751     border-bottom-left-radius: 5px;
3752     border-bottom-right-radius: 5px;
3753     border-top-width: 0;
3754 }
3755
3756 #browse-previous {
3757     border-bottom-left-radius: 5px;
3758     border-right: 1px solid #B9D8D9;
3759     padding-right: 1em;
3760 }
3761
3762 #browse-next {
3763     border-bottom-right-radius: 5px;
3764     border-top-width: 0;
3765     float: right;
3766     padding-right: 1em;
3767 }
3768
3769 .loading-overlay {
3770     background-color: #FFFFFF;
3771     cursor: wait;
3772     height: 100%;
3773     left: 0;
3774     opacity: .7;
3775     position: fixed;
3776     top: 0;
3777     width: 100%;
3778     z-index: 1000;
3779
3780     div {
3781         background: transparent url("../img/loading.gif") top left no-repeat;
3782         font-size: 175%;
3783         font-weight: bold;
3784         height: 2em;
3785         left: 50%;
3786         margin: -1em 0 0 -2.5em;
3787         padding-left: 50px;
3788         position: absolute;
3789         top: 50%;
3790         width: 15em;
3791     }
3792 }
3793
3794 #merge_invoices {
3795     display: none;
3796     margin: 1em auto;
3797 }
3798
3799 #merge {
3800     margin: .5em 0 0;
3801 }
3802
3803 #merge_table {
3804     tr {
3805         &.active {
3806             td {
3807                 background-color: #FFFFCC;
3808             }
3809         }
3810     }
3811 }
3812
3813 .renewals {
3814     display: block;
3815     font-size: .8em;
3816     padding: .5em;
3817 }
3818
3819 #transport-types {
3820     padding-top: .5px;
3821 }
3822
3823 #i18nMenu {
3824     .navbar-text {
3825         .currentlanguage {
3826             color: #000;
3827             font-weight: bold;
3828         }
3829     }
3830
3831     a {
3832         &.currentlanguage {
3833             &:link,
3834             &:visited {
3835                 font-weight: bold;
3836             }
3837         }
3838
3839         .sublanguage-selected {
3840             color: #000;
3841             font-weight: bold;
3842         }
3843     }
3844 }
3845
3846 .onsite_checkout-select {
3847     label,
3848     #circ_circulation_issue & {
3849         font-size: inherit;
3850         font-weight: normal;
3851     }
3852 }
3853
3854 .onsite_checkout {
3855     color: #CC0000;
3856 }
3857
3858 .onsite-checkout-only {
3859     background-color: rgba(255, 242, 206, .5);
3860     border: 1px solid #FFF2CE;
3861     border-radius: 4px;
3862 }
3863
3864 .branchgriditem {
3865     background-color: #FFFFFF;
3866     border: 1px solid #B9D8D9;
3867     border-radius: 3px;
3868     display: table-cell;
3869     float: left;
3870     margin: 3px;
3871     padding: .3em;
3872 }
3873
3874 .branchgridrow {
3875     display: table-row;
3876 }
3877
3878 .branchselector {
3879     display: table;
3880 }
3881
3882 .hq-author {
3883     font-weight: bold;
3884 }
3885
3886 #cn_browser_table_wrapper > #cn_browser_table {
3887     margin: auto;
3888     width: 90%;
3889 }
3890
3891 #new_rule {
3892     background-color: #F4F8F9;
3893     border: 2px solid #B9D8D9;
3894     border-radius: 5px;
3895     display: none;
3896     margin: .3em;
3897     padding: .3em;
3898 }
3899
3900
3901 .blocks {
3902     margin-bottom: .3em;
3903 }
3904
3905 .remove_rule {
3906     font-size: 80%;
3907     padding-left: .7em;
3908 }
3909
3910 .underline {
3911     text-decoration: underline;
3912 }
3913
3914 .overline {
3915     text-decoration: overline;
3916 }
3917
3918 .order-control {
3919     padding-right: 5px;
3920 }
3921
3922 #borrower_message {
3923     margin-top: 10px;
3924 }
3925
3926 .form-group {
3927     margin-bottom: 10px;
3928
3929     label {
3930         font-weight: bold;
3931     }
3932 }
3933
3934
3935 .form-message {
3936     background-color: #FFF;
3937     border: 1px solid #A4BEDD;
3938     border-radius: 5px;
3939     margin: 1em;
3940     padding: .5em;
3941 }
3942
3943 .modal-textarea {
3944     width: 98%;
3945 }
3946
3947 #pat_member {
3948     #patron_list_dialog,
3949     #searchresults {
3950         display: none;
3951     }
3952 }
3953
3954 #patron_search {
3955     #filters {
3956         display: none;
3957     }
3958 }
3959
3960 #fixedlengthbuilderaction {
3961     border: 3px solid #E6F0F2;
3962     left: 80%;
3963     padding: 5px;
3964     position: relative;
3965     top: -80px;
3966     width: 12%;
3967 }
3968
3969 .navbar-default {
3970     .navbar-nav {
3971         > .open {
3972             > a {
3973                 &:hover,
3974                 &:focus {
3975                     background: #E6F0F2 none;
3976                     box-shadow: none;
3977                 }
3978             }
3979         }
3980     }
3981
3982     &.navbar-fixed-bottom {
3983         .navbar-nav {
3984             > .open {
3985                 > a {
3986                     &:hover,
3987                     &:focus {
3988                         background: transparent none;
3989                         box-shadow: none;
3990                     }
3991                 }
3992             }
3993         }
3994     }
3995 }
3996
3997 #interlibraryloans {
3998     #dataPreviewLabel {
3999         margin: .3em 0;
4000     }
4001
4002     .bg-info {
4003         overflow: auto;
4004         position: relative;
4005     }
4006
4007     .format {
4008         h4 {
4009             margin-bottom: 20px;
4010         }
4011
4012         h5 {
4013             margin-top: 20px;
4014         }
4015
4016         input {
4017             margin: 10px 0;
4018         }
4019
4020         li {
4021             list-style: none;
4022         }
4023     }
4024
4025     #add-new-fields {
4026         margin: 1em;
4027     }
4028
4029     #column-toggle,
4030     #reset-toggle {
4031         font-weight: 700;
4032         line-height: 1.5em;
4033         margin: 15px 0;
4034     }
4035
4036     #freeform-fields {
4037         .custom-name {
4038             margin-right: 1em;
4039             text-align: right;
4040             width: 9em;
4041         }
4042
4043         .delete-new-field {
4044             margin-left: 1em;
4045         }
4046     }
4047
4048     #search-summary {
4049         position: absolute;
4050         top: 50%;
4051         transform: translateY(-50%);
4052     }
4053 }
4054
4055 .ill-view-panel {
4056     margin-top: 15px;
4057
4058     .notesopac {
4059         display: inline-block;
4060     }
4061 }
4062
4063 #requestattributes {
4064     font-family: monospace;
4065     line-height: 1.3em;
4066 }
4067
4068 #ill-requests {
4069     width: 100% !important;
4070 }
4071
4072 #stockrotation {
4073     h3 {
4074         margin: 30px 0 10px 0;
4075     }
4076     .dialog {
4077         h3 {
4078             margin: 10px 0;
4079         }
4080         margin-bottom: 20px;
4081     }
4082     .highlight_stage {
4083         font-weight: bold;
4084     }
4085 }
4086
4087 #catalog_stockrotation .highlight_stage {
4088     font-weight: bold;
4089 }
4090
4091 #stockrotation {
4092     #rota_form {
4093         textarea {
4094             width: 300px;
4095             height: 100px;
4096         }
4097         #name {
4098             width: 300px;
4099         }
4100         fieldset {
4101             width: auto;
4102         }
4103     }
4104     #stage_form fieldset, #add_rota_item_form fieldset {
4105         width: auto;
4106     }
4107     .dialog.alert {
4108         ul {
4109             margin: 20px 0;
4110         }
4111         li {
4112             list-style-type: none;
4113         }
4114     }
4115 }
4116
4117 #catalog_stockrotation {
4118     .item_select_rota {
4119         vertical-align: middle;
4120     }
4121     h1 {
4122         margin-bottom: 20px;
4123     }
4124 }
4125
4126 #stockrotation td.actions, #catalog_stockrotation td.actions {
4127     vertical-align: middle;
4128 }
4129
4130 #stockrotation .stage, #catalog_stockrotation .stage {
4131     display: inline-block;
4132     padding: 5px 7px;
4133     margin: 3px 0 3px 0;
4134     border-radius: 5px;
4135     background-color: rgba(0, 0, 0, 0.1);
4136 }
4137
4138 #stage_list_headings {
4139     font-weight: bold;
4140     span {
4141         padding: 3px;
4142     }
4143 }
4144
4145 #manage_stages {
4146     ul {
4147         padding-left: 0;
4148     }
4149     li {
4150         list-style: none;
4151         margin-bottom: 5px;
4152         span {
4153             padding: 6px 3px;
4154         }
4155     }
4156     .stagename {
4157         width: 15em;
4158         display: inline-block;
4159     }
4160     .stageduration {
4161         width: 10em;
4162         display: inline-block;
4163     }
4164     .stageactions {
4165         display: inline-block;
4166     }
4167     li:nth-child(odd) {
4168         background-color: #F3F3F3;
4169     }
4170     .drag_handle {
4171         margin-right: 6px;
4172         cursor: move;
4173     }
4174     .drag_placeholder {
4175         height: 2em;
4176         border: 1px dotted #aaa;
4177     }
4178     h3 {
4179         display: inline-block;
4180     }
4181     #ajax_status {
4182         display: inline-block;
4183         border: 1px solid #bcbcbc;
4184         border-radius: 5px;
4185         padding: 5px;
4186         margin-left: 10px;
4187         background: #f3f3f3;
4188     }
4189     #manage_stages_help {
4190         margin: 20px 0;
4191     }
4192 }
4193
4194 #helper {
4195     span {
4196         display: none;
4197     }
4198 }
4199
4200 #logged-in-info-full {
4201     display: none;
4202 }
4203
4204 .loggedin-menu-label {
4205     color: #777;
4206     font-size: 12px;
4207     line-height: 1.42857143;
4208     padding: 4px 12px;
4209     white-space: nowrap;
4210
4211     span {
4212         color: #000;
4213         font-weight: bold;
4214     }
4215
4216     &.divider {
4217         padding: 0;
4218     }
4219 }
4220
4221 .lastborrower {
4222     background-color: #E6F0F2;
4223     border: 1px solid #95C6D0;
4224     box-shadow: 1px 1px 1px 0 #999;
4225     color: #CC0000;
4226     margin: .4em 0;
4227     padding: .3em .5em .3em .5em;
4228 }
4229
4230 #lastborrower-ref {
4231     border-radius: 5px 0px 0px 5px;
4232     float: left;
4233 }
4234
4235 #lastborrower-remove {
4236     border-radius: 0px 5px 5px 0px;
4237     cursor: pointer;
4238     float: right;
4239 }
4240
4241 #lastborrower-window {
4242     display: none;
4243     position: absolute;
4244     right: 5px;
4245     top: 100px;
4246 }
4247
4248 /* ==== MODULE LINKS - Start ==== */
4249 .buttons-list {
4250     // List containing the module links
4251     margin-bottom: 30px;
4252     padding: 0;
4253
4254     li {
4255         // Standard attributes for the list elements
4256         list-style-type: none;
4257
4258         a {
4259             &.circ-button {
4260                 // Class used for each module link
4261                 background-color: #F4F8F9;
4262                 background-position: 5px 3px;
4263                 background-repeat: no-repeat;
4264                 border: 2px solid #B9D8D9;
4265                 border-radius: 6px;
4266                 box-sizing: content-box;
4267                 color: #000000;
4268                 display: block;
4269                 font-size: 110%;
4270                 font-weight: bold;
4271                 margin: .5em 0;
4272                 max-width: 260px;
4273                 padding: 8px;
4274                 text-decoration: none;
4275
4276                 &:hover {
4277                     // Class used for each module link hover state
4278                     border-color: #538200;
4279                     color: #538200;
4280                 }
4281             }
4282         }
4283     }
4284 }
4285
4286 .about h2 {
4287     border-bottom: 1px solid #B9D8D9;
4288     padding: .5em .2em;
4289     margin:  .5em 0;
4290 }
4291
4292 .columns-3 {
4293     columns: 3 auto;
4294     column-gap: 2.5em;
4295 }
4296
4297 .columns-4 {
4298     columns: 4 auto;
4299     column-gap: 2em;
4300 }
4301
4302 // ==== MODULE LINKS - End ====
4303
4304 #catalog-search-link {
4305     border-right: 1px solid lighten( #E6F0F2, 15% );
4306     padding-right: .3em;
4307 }
4308
4309 #catalog-search-dropdown {
4310     padding: 0;
4311
4312     & > a {
4313         border-left: 1px solid darken( #B4D2D8, 5% );
4314         margin-right: .6em;
4315         padding: .4em .6em;
4316
4317         &:hover,
4318         &.catalog-search-dropdown-hover {
4319             background-color: darken( #E6F0F2, 5% );
4320             border-left: 1px solid darken( #B4D2D8, 15% );
4321         }
4322     }
4323 }
4324
4325 .adlibris-cover {
4326     max-height: 120px;
4327 }
4328
4329 .adlibris-cover-big {
4330     max-height: 200px;
4331 }
4332
4333 #tools_holidays {
4334     .radio,
4335     .checkbox {
4336         label {
4337             margin-left: 0;
4338         }
4339     }
4340 }
4341
4342 @media (min-width: 200px) {
4343     .navbar-nav > li {
4344         float: left;
4345     }
4346
4347     .navbar-right {
4348         float: right !important;
4349         margin-right: -15px;
4350     }
4351
4352     .navbar-nav {
4353         float: left;
4354         margin: 0;
4355
4356         .open {
4357             .dropdown-menu {
4358                 background-color: #FFF;
4359                 border: 1px solid rgba(0, 0, 0, .15);
4360                 box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
4361                 float: left;
4362                 position: absolute;
4363                 width: auto;
4364
4365                 &.dropdown-menu-left {
4366                     left: auto;
4367                     right: 0;
4368                 }
4369
4370                 &.dropdown-menu-right {
4371                     right: auto;
4372                 }
4373             }
4374         }
4375     }
4376
4377     .navbar-default {
4378         .navbar-nav {
4379             .open {
4380                 .dropdown-menu {
4381                     > li {
4382                         > a {
4383                             &:hover,
4384                             &:focus {
4385                                 background-color: #0081C2;
4386                                 background-image: linear-gradient(to bottom, #0088CC, #0077B3);
4387                                 background-repeat: repeat-x;
4388                                 color: #FFFFFF;
4389                                 text-decoration: none;
4390                             }
4391                         }
4392                     }
4393                 }
4394             }
4395         }
4396     }
4397 }
4398
4399 @media (min-width: 800px) {
4400     #helper {
4401         i {
4402             display: none;
4403         }
4404
4405         span {
4406             display: inline;
4407         }
4408     }
4409
4410     #logged-in-info-full {
4411         display: inline;
4412     }
4413
4414     #logged-in-info-brief {
4415         display: none;
4416     }
4417
4418     .loggedin-menu-label {
4419         display: none;
4420     }
4421 }
4422
4423 div#makechart ol li {
4424     list-style: none;
4425 }