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