koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss

   1 @import "mixins";
   2
   3 body {
   4     background-color: #EAEAE6;
   5 }
   6
   7 /* Sticky footer styles */
   8 html,
   9 body {
  10     height: 100%;
  11     /* The html and body elements cannot have any padding or margin. */
  12 }
  13
  14 .no-js {
  15     .dateformat {
  16         display: inline;
  17         white-space: nowrap;
  18     }
  19
  20     .modal-body {
  21         padding: 0;
  22     }
  23
  24     .selections-toolbar {
  25         display: none;
  26     }
  27 }
  28
  29 .js {
  30     .dateformat {
  31         display: none;
  32     }
  33 }
  34
  35 /* Wrapper for page content to push down footer */
  36 #wrap {
  37     height: auto !important;
  38     height: 100%;
  39     min-height: 100%;
  40     /* Negative indent footer by it's height */
  41     // margin: 0 auto -60px;
  42 }
  43
  44 .fa.fa-icon-black,
  45 .fa.fa-icon-white {
  46     color: #FFF;
  47 }
  48
  49 #changelanguage {
  50     /* Set the fixed height of the footer here */
  51     // height: 60px;
  52     .nav {
  53         > .active {
  54             > p {
  55                 padding: 0 15px;
  56             }
  57         }
  58     }
  59 }
  60
  61 .popup {
  62     padding-left: 0;
  63     padding-right: 0;
  64
  65     .main {
  66         font-size: 90%;
  67         padding: 0 1em;
  68     }
  69
  70     legend {
  71         line-height: 1.5em;
  72         margin-bottom: .5em;
  73     }
  74 }
  75
  76 a {
  77     color: $links;
  78
  79     &.cancel {
  80         padding-left: 1em;
  81     }
  82
  83     &:visited {
  84         color: $links;
  85     }
  86
  87     &.title {
  88         font-size: 108%;
  89         font-weight: bold;
  90     }
  91
  92     &.btn {
  93         &:visited {
  94             color: #333;
  95         }
  96     }
  97
  98     &.btn-primary {
  99         &:visited {
 100             color: #FFF;
 101         }
 102     }
 103
 104     &.login-link {
 105         color: #A6D8ED;
 106         font-weight: bold;
 107     }
 108
 109     &.listmenulink {
 110         &:link,
 111         &:visited {
 112             color: #0076B2;
 113             font-weight: bold;
 114         }
 115
 116         &:hover,
 117         &:active {
 118             color: #FFF;
 119             font-weight: bold;
 120         }
 121     }
 122
 123     .idreambooksrating {
 124         color: #29ADE4;
 125         font-size: 30px;
 126         line-height: 30px;
 127         padding-left: 85px;
 128         text-decoration: none;
 129     }
 130
 131     &.reviewlink,
 132     &.reviewlink:visited {
 133         color: black;
 134         font-weight: normal;
 135         text-decoration: none;
 136     }
 137
 138     &.addtocart {
 139         @extend %initial_icon;
 140         background-position: -5px -265px; /* Cart */
 141         padding-left: 35px;
 142     }
 143
 144     &.addtoshelf {
 145         @extend %initial_icon;
 146         background-position: -5px -225px; /* Virtual shelf */
 147         padding-left: 35px;
 148     }
 149
 150     &.brief {
 151         @extend %initial_icon;
 152         background-position: -2px -868px; /* Zoom out */
 153         padding-left: 27px;
 154     }
 155
 156
 157
 158     &.detail {
 159         @extend %initial_icon;
 160         background-position: -2px -898px; /* Zoom in */
 161         padding-left: 27px;
 162     }
 163
 164     &.download {
 165         @extend %initial_icon;
 166         background-position: -5px -348px; /* Download */
 167         padding-left: 20px;
 168     }
 169
 170     &.editshelf {
 171         @extend %initial_icon;
 172         background-position: 2px -348px; /* List edit */
 173         padding-left: 26px;
 174     }
 175
 176     &.empty {
 177         @extend %initial_icon;
 178         background-position: 2px -598px; /* Trash */
 179         padding-left: 30px;
 180     }
 181
 182     &.hide {
 183         @extend %initial_icon;
 184         background-position: -3px -814px; /* Close */
 185         padding-left: 26px;
 186     }
 187
 188     &.highlight_toggle {
 189         @extend %initial_icon;
 190         background-position: -5px -841px; /* Highlight */
 191         display: none;
 192         padding-left: 35px;
 193     }
 194
 195     &.hold {
 196         @extend %initial_icon;
 197         background-position: -2px -453px; /* Toolbar place hold */
 198         padding-left: 23px;
 199
 200         &.disabled {
 201             @extend %initial_icon;
 202             background-position: -5px -621px; /* Place hold disabled */
 203         }
 204     }
 205
 206     &.incart {
 207         @extend %initial_icon;
 208         background-position: -5px -265px; /* Cart */
 209         color: #666;
 210         padding-left: 35px;
 211     }
 212
 213     &.new {
 214         @extend %initial_icon;
 215         background-image: url( "../images/sprite.png" ); /* New */
 216         background-position: -4px -922px;
 217         padding-left: 23px;
 218     }
 219
 220     &.print-small {
 221         @extend %initial_icon;
 222         background-position: 0 -423px; /* Toolbar print */
 223         padding-left: 30px;
 224     }
 225
 226     &.print-large {
 227         @extend %initial_icon;
 228         background-position: 0 -187px; /* Toolbar print */
 229         padding-left: 35px;
 230     }
 231
 232     &.removeitems {
 233         @extend %initial_icon;
 234         background-position: 2px -690px; /* Delete */
 235         padding-left: 25px;
 236
 237         &.disabled {
 238             @extend %initial_icon;
 239             background-position: 2px -712px; /* Delete disabled */
 240         }
 241     }
 242
 243     &.reserve {
 244         @extend %initial_icon;
 245         background-position: -6px -144px; /* Place hold */
 246         padding-left: 35px;
 247     }
 248
 249     &.article_request {
 250         @extend %initial_icon;
 251         background-position: 0 -24px; /* Place article request */
 252         padding-left: 35px;
 253     }
 254
 255     &.send {
 256         @extend %initial_icon;
 257         background-position: 2px -386px; /* Email */
 258         padding-left: 28px;
 259     }
 260
 261     &.sharelist {
 262         @extend %initial_icon;
 263         background-position: 2px -1148px; /* List share */
 264         padding-left: 26px;
 265     }
 266
 267     &.tag_add {
 268         @extend %initial_icon;
 269         background-position: 3px -1111px; /* Tag results */
 270         padding-left: 27px;
 271     }
 272
 273     &.removefromlist {
 274         @extend %initial_icon;
 275     }
 276 }
 277
 278 h1 {
 279     font-size: 140%;
 280     line-height: 150%;
 281
 282     &#libraryname {
 283         background: transparent url( "../images/logo-koha.png" ) no-repeat scroll 0%;
 284         border: 0;
 285         float: left !important;
 286         margin: 0;
 287         padding: 0;
 288         width: 120px;
 289
 290         a {
 291             border: 0;
 292             cursor: pointer;
 293             display: block;
 294             height: 0 !important;
 295             margin: 0;
 296             overflow: hidden;
 297             padding: 40px 0 0;
 298             text-decoration: none;
 299             width: 120px;
 300         }
 301     }
 302 }
 303
 304 h2 {
 305     font-size: 130%;
 306     line-height: 150%;
 307 }
 308
 309 h3 {
 310     font-size: 120%;
 311     line-height: 150%;
 312 }
 313
 314 h4 {
 315     font-size: 110%;
 316 }
 317
 318 h5 {
 319     font-size: 100%;
 320 }
 321
 322 caption {
 323     font-size: 120%;
 324     font-weight: bold;
 325     margin: 0;
 326     text-align: left;
 327 }
 328
 329 input,
 330 textarea {
 331     width: auto;
 332 }
 333
 334 .input-fluid {
 335     width: 50%;
 336 }
 337
 338 legend {
 339     font-size: 110%;
 340     font-weight: bold;
 341 }
 342
 343 table {
 344     font-size: 90%;
 345 }
 346
 347 table,
 348 td {
 349     background-color: #FFF;
 350 }
 351
 352 td {
 353     img {
 354         max-width: none;
 355     }
 356
 357     &.overdue {
 358         color: #CC3333;
 359     }
 360
 361     .sum {
 362         background-color: #FFC;
 363         font-weight: bold;
 364     }
 365
 366     .btn {
 367         white-space: nowrap;
 368     }
 369
 370     .btn-link {
 371         padding: 0;
 372     }
 373 }
 374
 375 th {
 376     background-color: #ECEDE6;
 377
 378     &.sum {
 379         text-align: right;
 380     }
 381
 382     &[scope=row] {
 383         background-color: transparent;
 384         text-align: right;
 385     }
 386 }
 387
 388 #advsearches,
 389 #booleansearch {
 390     label {
 391         display: inline;
 392     }
 393 }
 394
 395 #basketcount {
 396     display: inline;
 397     margin: 0;
 398     padding: 0;
 399
 400     span {
 401         @include border-radius-all( 3px );
 402         background-color: #FFC;
 403         color: #000;
 404         display: inline;
 405         font-size: 80%;
 406         font-weight: normal;
 407         margin: 0 0 0 .9em;
 408         padding: 0 .3em;
 409     }
 410 }
 411
 412
 413 #members {
 414     display: block;
 415
 416     p {
 417         color: #EEE;
 418     }
 419
 420     a {
 421         &.logout {
 422             color: #E8583C;
 423             font-weight: bold;
 424             padding: 0 .3em;
 425         }
 426     }
 427 }
 428
 429 #koha_url {
 430     p {
 431         color: #666666;
 432         float: right;
 433         margin: 0;
 434     }
 435 }
 436
 437 #moresearches {
 438     margin: .5em 0;
 439     padding: 0 .8em;
 440
 441     li {
 442         display: inline;
 443         white-space: nowrap;
 444
 445         &::after {
 446             content: " | ";
 447         }
 448
 449         &:last-child {
 450             &::after {
 451                 content: "";
 452             }
 453         }
 454
 455     }
 456
 457     ul {
 458         margin: 0;
 459     }
 460 }
 461
 462 #news {
 463     margin: .5em 0;
 464 }
 465
 466 .newscontainer {
 467     border: 1px solid #DDD;
 468     border-bottom-width: 0;
 469     border-top-left-radius: 5px;
 470     border-top-right-radius: 5px;
 471 }
 472
 473 .newsheader {
 474     background-color: #ECEDE6;
 475     border-bottom: 1px solid #DDD;
 476     margin: 0;
 477     padding: 8px;
 478 }
 479
 480 .newsbody {
 481     padding: 8px;
 482 }
 483
 484 .newsfooter {
 485     border-bottom: 1px solid #DDD;
 486     font-style: italic;
 487     padding: 4px 8px;
 488 }
 489
 490 #opacheader {
 491     background-color: #DDD;
 492 }
 493
 494 #selections,
 495 .selections {
 496     font-weight: bold;
 497 }
 498
 499 .actions {
 500     a {
 501         background-repeat: no-repeat;
 502         margin-right: 1em;
 503         text-decoration: none;
 504         white-space: nowrap;
 505
 506         &.hold {
 507             background-image: url( "../images/sprite.png" ); /* Place hold small */
 508             background-position: -5px -542px;
 509             padding-left: 21px;
 510         }
 511
 512         &.article_request {
 513             background-image: url( "../images/sprite.png" ); /* Place hold small */
 514             background-position: -2px -26px;
 515             padding-left: 21px;
 516         }
 517
 518         &.addtocart {
 519             background-image: url( "../images/sprite.png" ); /* Cart small */
 520             background-position: -5px -572px;
 521             padding-left: 20px;
 522         }
 523
 524         &.addtoshelf {
 525             background-image: url( "../images/sprite.png" ); /* MARC view */
 526             background-position: -5px -27px;
 527             padding-left: 20px;
 528         }
 529
 530         &.addtolist {
 531             background-position: -5px -27px;
 532             padding-left: 20px;
 533         }
 534
 535         &.tag_add {
 536             background-position: -5px -1110px;
 537             padding-left: 20px;
 538         }
 539
 540         /* List contents remove from list link */
 541         &.removefromlist {
 542             background-position: -8px -690px; /* Delete */
 543             padding-left: 15px;
 544         }
 545     }
 546 }
 547
 548 /* Override Bootstrap alert */
 549 .alert {
 550     background: linear-gradient( to bottom, #FFFBE5 0%, #FFF0B2 9%, #FFF1A8 89%, #F7E665 100% );
 551     border-color: #D6C43B;
 552     color: #333;
 553
 554     /* Redefine a new style for Bootstrap's class "close" since we use that already */
 555     /* Use <a class="closebtn" href="#">&times;</a> */
 556
 557     .closebtn {
 558         line-height: 20px;
 559         position: relative;
 560         right: -21px;
 561         top: -2px;
 562     }
 563 }
 564
 565 /* Override Bootstrap alert.alert-info */
 566 .alert-info {
 567     background: linear-gradient( to bottom, #F4F6FA 0%, #EAEEF5 4%, #E8EDF6 96%, #CDDBF2 100% );
 568     border-color: #C5D1E5;
 569     color: #333;
 570 }
 571
 572 /* Override Bootstrap alert.alert-success */
 573 .alert-success {
 574     background: linear-gradient( to bottom, #F8FFE8 0%, #E3F5AB 4%, #DCF48D 98%, #9EBF28 100% );
 575     border-color: #9FBA35;
 576     color: #333;
 577 }
 578
 579 .breadcrumb {
 580     @include border-radius-all( 7px );
 581     background-color: #F2F2EF;
 582     font-size: 85%;
 583     list-style: none outside none;
 584     margin: 10px 20px;
 585     padding: 5px 10px;
 586 }
 587
 588 .buttons-print {
 589     @extend %initial_icon;
 590     background-color: transparent;
 591     background-position: 0 -184px; /* Toolbar print */
 592     border: 0;
 593     color: #0076B2;
 594     font-size: 100%;
 595     padding-left: 35px;
 596 }
 597
 598 .form-inline {
 599     display: inline;
 600     margin: 0;
 601     padding: 0;
 602
 603     fieldset {
 604         margin: .3em 0;
 605         padding: .3em;
 606     }
 607 }
 608
 609 .main {
 610     @include border-radius-all( 7px );
 611     @include shadowed;
 612     background-color: #FFF;
 613     border: 1px solid #D2D2CF;
 614     margin-bottom: .5em;
 615     margin-top: .5em;
 616 }
 617
 618 .mastheadsearch {
 619     @include border-radius-all( 7px );
 620     background: linear-gradient( to bottom, #C7C7C1 38%, #A7A7A2 100% );
 621     margin: .5em 0;
 622     padding: .8em;
 623
 624     label {
 625         font-size: 115%;
 626         font-weight: bold;
 627     }
 628 }
 629
 630 .navbar-inverse {
 631     .brand {
 632         color: #9FE1FF;
 633         font-weight: bold;
 634     }
 635
 636     .nav {
 637         > li {
 638             > a {
 639                 color: #9FE1FF;
 640                 font-weight: bold;
 641             }
 642         }
 643     }
 644 }
 645
 646 .navbar-fixed-bottom {
 647     &.navbar-static-bottom {
 648         margin-top: .5em;
 649         position: static;
 650     }
 651 }
 652
 653 .table-striped tbody > tr:nth-child(odd) > td,
 654 .table-striped tbody > tr:nth-child(odd) > th {
 655     background-color: #F4F4F4;
 656 }
 657
 658
 659 /* jQuery UI standard tabs */
 660 .ui-tabs-nav .ui-tabs-active a,
 661 .ui-tabs-nav a:hover,
 662 .ui-tabs-nav a:focus,
 663 .ui-tabs-nav a:active,
 664 .ui-tabs-nav span.a {
 665     background: none repeat scroll 0 0 transparent;
 666     outline: 0 none;
 667 }
 668
 669 .ui-widget,
 670 .ui-widget input,
 671 .ui-widget select,
 672 .ui-widget textarea,
 673 .ui-widget button {
 674     font-family: inherit;
 675     font-size: inherit;
 676 }
 677
 678 ul {
 679     &.ui-tabs-nav {
 680         li {
 681             list-style: none;
 682         }
 683     }
 684 }
 685
 686 .ui-tabs {
 687     .ui-tabs-nav {
 688         li {
 689             background: #F3F3F3 none;
 690             border-color: #D8D8D8;
 691             margin-right: .4em;
 692
 693             &.ui-tabs-active {
 694                 background-color: #FFF;
 695                 border: 1px solid #D8D8D8;
 696                 border-bottom: 0;
 697
 698                 a {
 699                     color: #000;
 700                     font-weight: bold;
 701                 }
 702
 703                 &.ui-state-hover {
 704                     background: #FFF none;
 705                 }
 706             }
 707
 708             &.ui-state-default.ui-state-hover {
 709                 background: #F3F3F3 none;
 710             }
 711         }
 712     }
 713
 714     .ui-tabs-panel {
 715         border: 1px solid #D8D8D8;
 716         margin-bottom: 1em;
 717     }
 718
 719     &.ui-widget-content {
 720         background: transparent none;
 721         border: 0;
 722     }
 723
 724     .ui-state-default {
 725         a {
 726             color: #006699;
 727
 728             &:link {
 729                 color: #006699;
 730             }
 731
 732             &:visited {
 733                 color: #006699;
 734             }
 735         }
 736     }
 737
 738     .ui-state-hover a {
 739         color: #990033;
 740
 741         &:link {
 742             color: #990033;
 743         }
 744
 745         &:visited {
 746             color: #990033;
 747         }
 748     }
 749 }
 750
 751 .ui-tabs-nav {
 752     &.ui-widget-header {
 753         background: none;
 754         border: 0;
 755     }
 756 }
 757
 758 .statictabs {
 759     ul {
 760         background: none repeat scroll 0 0 transparent;
 761         border: 0 none;
 762         border-bottom-left-radius: 4px;
 763         border-bottom-right-radius: 4px;
 764         border-top-left-radius: 4px;
 765         border-top-right-radius: 4px;
 766         color: #222222;
 767         font-size: 100%;
 768         font-weight: bold;
 769         line-height: 1.3;
 770         list-style: none outside none;
 771         margin: 0;
 772         outline: 0 none;
 773         padding: .2em .2em 0;
 774         text-decoration: none;
 775
 776         &::before {
 777             content: "";
 778             display: table;
 779         }
 780
 781         &::after {
 782             clear: both;
 783             content: "";
 784             display: table;
 785         }
 786     }
 787
 788     li {
 789         background: none repeat scroll 0 0 #E6F0F2;
 790         border: 1px solid #B9D8D9;
 791         border-bottom: 0 none !important;
 792         border-top-left-radius: 4px;
 793         border-top-right-radius: 4px;
 794         color: #555555;
 795         float: left;
 796         font-weight: normal;
 797         list-style: none outside none;
 798         margin-bottom: 0;
 799         margin-right: .4em;
 800         padding: 0;
 801         position: relative;
 802         top: 1px;
 803         white-space: nowrap;
 804
 805         &.active {
 806             background-color: #FFFFFF;
 807             color: #212121;
 808             font-weight: normal;
 809             padding-bottom: 1px;
 810
 811             a {
 812                 background: none repeat scroll 0 0 transparent;
 813                 color: #000000;
 814                 cursor: text;
 815                 font-weight: bold;
 816                 outline: 0 none;
 817             }
 818         }
 819
 820         a {
 821             color: #004D99;
 822             cursor: pointer;
 823             float: left;
 824             padding: .5em 1em;
 825             text-decoration: none;
 826
 827             &:hover {
 828                 background-color: #EDF4F5;
 829                 border-top-left-radius: 4px;
 830                 border-top-right-radius: 4px;
 831                 color: #538200;
 832             }
 833         }
 834     }
 835
 836     .tabs-container {
 837         background: none repeat scroll 0 0 transparent;
 838         border: 1px solid #B9D8D9;
 839         border-bottom-left-radius: 4px;
 840         border-bottom-right-radius: 4px;
 841         color: #222222;
 842         display: block;
 843         padding: 1em 1.4em;
 844     }
 845 }
 846
 847 /* End jQueryUI tab styles */
 848
 849 /* jQuery UI Datepicker */
 850
 851 .ui-datepicker {
 852     @include shadowed;
 853     table {
 854         border: 0;
 855         border-collapse: collapse;
 856         font-size: .9em;
 857         margin: 0 0 .4em;
 858         width: 100%;
 859     }
 860
 861     th {
 862         background: transparent none;
 863         border: 0;
 864         font-weight: bold;
 865         padding: .7em .3em;
 866         text-align: center;
 867     }
 868 }
 869
 870 .ui-datepicker-trigger {
 871     margin: 0 3px;
 872     vertical-align: middle;
 873 }
 874
 875 /* End jQueryUI datepicker styles */
 876
 877
 878 /* jQueryUI Core */
 879
 880 .ui-widget-content {
 881     background: #FFFFFF none;
 882     border: 1px solid #AAA;
 883     color: #222222;
 884
 885     a,
 886     a:visited {
 887         color: $links;
 888     }
 889 }
 890
 891 .ui-widget-header {
 892     background: #E6F0F2 none;
 893     border: 1px solid #AAA;
 894     color: #222222;
 895     font-weight: bold;
 896 }
 897
 898 .ui-state-default,
 899 .ui-widget-content .ui-state-default,
 900 .ui-widget-header .ui-state-default {
 901     background: #F4F8F9 none;
 902     border: 1px solid #AAA;
 903     color: #555555;
 904     font-weight: normal;
 905 }
 906
 907 .ui-state-hover,
 908 .ui-widget-content .ui-state-hover,
 909 .ui-widget-header .ui-state-hover,
 910 .ui-state-focus,
 911 .ui-widget-content .ui-state-focus,
 912 .ui-widget-header .ui-state-focus {
 913     background: #E6F0F2 none;
 914     border: 1px solid #AAA;
 915     color: #212121;
 916     font-weight: normal;
 917 }
 918
 919 .ui-state-active,
 920 .ui-widget-content .ui-state-active,
 921 .ui-widget-header .ui-state-active {
 922     background: #FFFFFF none;
 923     border: 1px solid #AAAAAA;
 924     color: #212121;
 925     font-weight: normal;
 926 }
 927
 928 .ui-state-highlight,
 929 .ui-widget-content .ui-state-highlight,
 930 .ui-widget-header .ui-state-highlight {
 931     background: #FBF9EE;
 932     border: 1px solid #FCEFA1;
 933     color: #363636;
 934 }
 935
 936 .ui-state-error,
 937 .ui-widget-content .ui-state-error,
 938 .ui-widget-header .ui-state-error {
 939     background: #FEF1EC;
 940     border: 1px solid #CD0A0A;
 941     color: #CD0A0A;
 942 }
 943
 944 /* end jQueryUI core */
 945
 946 .item-thumbnail {
 947     max-width: none;
 948 }
 949
 950 .no-image {
 951     @include border-radius-all( 3px );
 952     background-color: #FFF;
 953     border: 1px solid #AAA;
 954     color: #979797;
 955     display: block;
 956     font-size: 86%;
 957     font-weight: bold;
 958     text-align: center;
 959     width: 75px;
 960 }
 961
 962 #bookcover {
 963     float: left;
 964     margin: 0;
 965     padding: 0;
 966
 967     .no-image {
 968         margin-bottom: 10px;
 969         margin-right: 10px;
 970     }
 971
 972     img {
 973         margin: 0 1em 1em 0;
 974     }
 975 }
 976
 977 .required {
 978     color: #C00;
 979 }
 980
 981
 982 .label {
 983     background-color: transparent;
 984     color: inherit;
 985     display: inline;
 986     font-weight: normal;
 987     padding: 0;
 988     text-shadow: none;
 989 }
 990
 991 .blabel {
 992     background-color: #999999;
 993     border-radius: 3px;
 994     color: #FFFFFF;
 995     display: inline-block;
 996     font-weight: bold;
 997     padding: 2px 4px;
 998     text-shadow: 0 -1px 0 rgba( 0, 0, 0, .25 );
 999 }
1000
1001 .label-important {
1002     background-color: #B94A48;
1003 }
1004
1005 .label-warning {
1006     background-color: #F89406;
1007 }
1008
1009 .label-success {
1010     background-color: #468847;
1011 }
1012
1013 .label-info {
1014     background-color: #3A87AD;
1015 }
1016
1017 .label-inverse {
1018     background-color: #333333;
1019 }
1020
1021 fieldset {
1022     &.rows {
1023         clear: left;
1024         float: left;
1025         font-size: 90%;
1026         margin: .9em 0 0;
1027         padding: 0;
1028         width: 100%;
1029
1030         legend {
1031             font-size: 130%;
1032             font-weight: bold;
1033         }
1034
1035         label,
1036         .label {
1037             float: left;
1038             font-weight: bold;
1039             margin-right: 1em;
1040             text-align: right;
1041             width: 9em;
1042         }
1043
1044         label {
1045             &.lradio {
1046                 float: none;
1047                 margin: inherit;
1048                 width: auto;
1049             }
1050         }
1051
1052         fieldset {
1053             margin: 0;
1054             padding: .3em;
1055         }
1056
1057         ol {
1058             list-style-type: none;
1059             padding: 1em 1em 0 1em;
1060
1061             &.lradio {
1062                 label {
1063                     float: none;
1064                     margin-right: 0;
1065                     width: auto;
1066
1067                     &.lradio {
1068                         float: left;
1069                         margin-right: 1em;
1070                         width: 12em;
1071                     }
1072                 }
1073             }
1074         }
1075
1076         li {
1077             clear: left;
1078             float: left;
1079             list-style-type: none;
1080             padding-bottom: 1em;
1081             width: 100%;
1082
1083             &.lradio {
1084                 padding-left: 8.5em;
1085                 width: auto;
1086
1087                 label {
1088                     float: none;
1089                     margin: 0 0 0 1em;
1090                     width: auto;
1091                 }
1092             }
1093         }
1094
1095         .hint {
1096             display: block;
1097             margin-left: 11em;
1098         }
1099     }
1100
1101     &.action {
1102         border: 0;
1103         clear: both;
1104         float: none;
1105         margin: 0;
1106         padding: 1em 0 .3em;
1107         width: auto;
1108
1109         p {
1110             margin-bottom: 1em;
1111         }
1112     }
1113
1114     table {
1115         font-size: 100%;
1116     }
1117 }
1118
1119 div {
1120     &.rows {
1121         float: left;
1122         clear: left;
1123         margin: 0;
1124         padding: 0;
1125         width: 100%;
1126
1127         + div.rows {
1128             margin-top: .6em;
1129         }
1130
1131         span {
1132             &.label {
1133                 float: left;
1134                 font-weight: bold;
1135                 margin-right: 1em;
1136                 text-align: left;
1137                 width: 9em;
1138             }
1139         }
1140
1141         ol {
1142             list-style-type: none;
1143             margin-left: 0;
1144             padding: .5em 1em 0 0;
1145
1146             li {
1147                 li {
1148                     border-bottom: 0;
1149                 }
1150             }
1151         }
1152
1153         li {
1154             border-bottom: 1px solid #EEE;
1155             clear: left;
1156             float: left;
1157             list-style-type: none;
1158             padding-bottom: .2em;
1159             padding-top: .1em;
1160             width: 100%;
1161         }
1162
1163         ul {
1164             li {
1165                 margin-left: 7.3em;
1166
1167                 &:first-child {
1168                     clear: none;
1169                     float: none;
1170                     margin-left: 0;
1171                 }
1172             }
1173         }
1174     }
1175 }
1176
1177 /* different sizes for different tags in opac-tags.tt */
1178
1179 .tagweight0 {
1180     font-size: 12px;
1181 }
1182
1183 .tagweight1 {
1184     font-size: 14px;
1185 }
1186
1187 .tagweight2 {
1188     font-size: 16px;
1189 }
1190
1191 .tagweight3 {
1192     font-size: 18px;
1193 }
1194
1195 .tagweight4 {
1196     font-size: 20px;
1197 }
1198
1199 .tagweight5 {
1200     font-size: 22px;
1201 }
1202
1203 .tagweight6 {
1204     font-size: 24px;
1205 }
1206
1207 .tagweight7 {
1208     font-size: 26px;
1209 }
1210
1211 .tagweight8 {
1212     font-size: 28px;
1213 }
1214
1215 .tagweight9 {
1216     font-size: 30px;
1217 }
1218
1219 .toolbar {
1220     background-color: #EEEEEE;
1221     border: 1px solid #E8E8E8;
1222     font-size: 85%;
1223     padding: 3px 3px 5px 5px;
1224     vertical-align: middle;
1225
1226     a {
1227         white-space: nowrap;
1228     }
1229
1230     label {
1231         display: inline;
1232         font-size: 100%;
1233         font-weight: bold;
1234         margin-left: .5em;
1235     }
1236
1237     select {
1238         font-size: 97%;
1239         height: auto;
1240         line-height: inherit;
1241         margin: 0;
1242         padding: 0;
1243         white-space: nowrap;
1244         width: auto;
1245     }
1246
1247     .hold,
1248     #tagsel_tag {
1249         font-size: 97%;
1250         font-weight: bold;
1251         padding-left: 28px;
1252     }
1253
1254     #tagsel_form {
1255         margin-top: .5em;
1256     }
1257
1258     li {
1259         display: inline;
1260         list-style: none;
1261
1262         a {
1263             border-left: 1px solid #E8E8E8;
1264         }
1265
1266         &:first-child {
1267             a {
1268                 border-left: 0;
1269             }
1270         }
1271     }
1272
1273     ul {
1274         padding-left: 0;
1275     }
1276 }
1277
1278 #basket {
1279     .toolbar {
1280         padding: 7px 5px 9px 9px;
1281     }
1282 }
1283
1284 #selections-toolbar,
1285 .selections-toolbar {
1286     background: linear-gradient( top, #B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100% );
1287     margin: 0 0 1em;
1288     padding-left: 10px;
1289     padding-top: .5em;
1290 }
1291
1292 .list-actions {
1293     display: inline;
1294 }
1295
1296 %tag_button_default {
1297     background-color: transparent;
1298     background-image: url( "../images/sprite.png" );
1299     background-position: 1px -643px;
1300     background-repeat: no-repeat;
1301     border: 0;
1302     color: #0076B2;
1303     cursor: pointer;
1304     font-size: 100%;
1305     padding-left: 25px;
1306     text-decoration: none;
1307 }
1308
1309 %tag_button_hover {
1310     color: #005580;
1311     text-decoration: underline;
1312 }
1313
1314 %tag_button_disabled {
1315     color: #888888;
1316     padding-left: 23px;
1317     text-decoration: none;
1318 }
1319
1320 #tagsel_tag {
1321     @extend %tag_button_default;
1322
1323     &.disabled {
1324         background-position: -1px -667px;
1325     }
1326 }
1327
1328 #selections-toolbar {
1329     input.hold {
1330         &:hover {
1331             @extend %tag_button_hover;
1332         }
1333
1334         &.disabled {
1335             @extend %tag_button_disabled;
1336
1337             &:hover {
1338                 @extend %tag_button_disabled;
1339             }
1340         }
1341     }
1342
1343     a.disabled {
1344         @extend %tag_button_disabled;
1345
1346         &:hover {
1347             @extend %tag_button_disabled;
1348         }
1349     }
1350 }
1351
1352 #tagsel_span input {
1353     &.submit {
1354         @extend %tag_button_default;
1355     }
1356
1357     &:hover {
1358         @extend %tag_button_hover;
1359     }
1360
1361     &.disabled {
1362         @extend %tag_button_disabled;
1363
1364         &:hover {
1365             @extend %tag_button_disabled;
1366         }
1367     }
1368
1369     &.hold.disabled {
1370         @extend %tag_button_disabled;
1371
1372         &:hover {
1373             @extend %tag_button_disabled;
1374         }
1375     }
1376 }
1377
1378 .selections-toolbar a.disabled {
1379     @extend %tag_button_disabled;
1380
1381     &:hover {
1382         @extend %tag_button_disabled;
1383     }
1384 }
1385
1386 .results_summary {
1387     color: #707070;
1388     display: block;
1389     font-size: 85%;
1390     padding: 0 0 .5em;
1391
1392     .results_summary {
1393         font-size: 100%;
1394     }
1395
1396     &.actions {
1397         margin-top: .5em;
1398     }
1399
1400     &.tagstatus {
1401         display: inline;
1402     }
1403
1404     .label {
1405         color: #202020;
1406     }
1407
1408     a {
1409         font-weight: normal;
1410     }
1411 }
1412
1413 #views {
1414     margin-bottom: .5em;
1415     padding: 0 2em .2em .2em;
1416 }
1417
1418 .view {
1419     background-color: #F3F3F3;
1420     border: 1px solid #C9C9C9;
1421     border-radius: 4px;
1422     display: inline-block;
1423     padding: .2em .5em;
1424     white-space: nowrap;
1425
1426     a,
1427     span {
1428         background-image: url( "../images/sprite.png" );
1429         background-repeat: no-repeat;
1430         font-size: 87%;
1431         padding-left: 15px;
1432         text-decoration: none;
1433     }
1434
1435     a {
1436         font-weight: normal;
1437     }
1438 }
1439
1440 #bibliodescriptions,
1441 #isbdcontents {
1442     clear: left;
1443     margin-top: .5em;
1444 }
1445
1446 .current-view {
1447     background-color: #FFF;
1448     font-weight: bold;
1449 }
1450
1451 #MARCview {
1452     background-position: -9px -27px;
1453 }
1454
1455 #ISBDview {
1456     background-position: -10px -56px;
1457 }
1458
1459 #Normalview {
1460     background-position: -8px 3px;
1461 }
1462
1463 /* pagination */
1464 .results-pagination {
1465     background-color: #F3F3F3;
1466     display: none;
1467     padding-bottom: 10px;
1468 }
1469
1470 .close_pagination {
1471     display: none;
1472 }
1473
1474 .back {
1475     float: right;
1476
1477     input {
1478         background: none !important;
1479         color: #999 !important;
1480     }
1481 }
1482
1483 .pagination_list {
1484     ul {
1485         margin: 0;
1486         padding: 0;
1487     }
1488
1489     li {
1490         border-top: 1px solid #DDDDDD;
1491         color: #999;
1492         float: bottom;
1493         list-style: none;
1494         padding: 4px;
1495
1496         &.highlight {
1497             background-color: #DDDDDD;
1498         }
1499
1500         a {
1501             padding-left: 0;
1502         }
1503     }
1504
1505     .li_pag_index {
1506         color: #636363;
1507         font-size: 90%;
1508         font-weight: bold;
1509         padding-right: 10px;
1510         text-align: right;
1511         width: 13px;
1512     }
1513 }
1514
1515 .pagination_footer {
1516     background-color: #E1E1E1;
1517     text-align: center;
1518
1519     .close_pagination {
1520         display: none;
1521     }
1522 }
1523
1524 .l_Results {
1525     background-color: #E1E1E1;
1526
1527     .close_pagination {
1528         float: right;
1529         padding: 8px 12px;
1530     }
1531 }
1532
1533 .nav_results {
1534     border: 1px solid #D0D0D0;
1535     font-size: 95%;
1536     font-weight: bold;
1537     margin-top: .5em;
1538     position: relative;
1539 }
1540
1541 #a_listResults {
1542     color: #006699;
1543     display: inline-block;
1544     padding: 8px 28px;
1545     text-decoration: none;
1546 }
1547
1548 .pg_menu {
1549     background-color: #F3F3F3;
1550     border-top: 1px solid #D0D0D0;
1551     margin: 0;
1552     white-space: nowrap;
1553
1554     li {
1555         color: #B2B2B2;
1556         display: inline-block;
1557         float: left;
1558         list-style: none;
1559         margin: 0;
1560
1561         &.back_results {
1562             a {
1563                 border-left: 1px solid #D0D0D0;
1564                 border-right: 1px solid #D0D0D0;
1565             }
1566         }
1567
1568         a,
1569         span {
1570             background-color: #F3F3F3;
1571             display: block;
1572             float: left;
1573             font-weight: normal;
1574             padding: .4em .5em;
1575             text-align: center;
1576             text-decoration: none;
1577         }
1578
1579         span {
1580             color: #B2B2B2;
1581         }
1582     }
1583 }
1584
1585 #listResults {
1586     li {
1587         color: #C5C5C5;
1588         display: inline-block;
1589         font-size: 80%;
1590         font-weight: normal;
1591         padding: 0;
1592         text-align: center;
1593
1594         a {
1595             background-color: #999999;
1596             color: #FFFFFF;
1597             display: block;
1598             font-weight: normal;
1599             min-width: 18px;
1600             text-decoration: none;
1601
1602             &:hover {
1603                 background-color: #006699;
1604             }
1605         }
1606
1607         .highlight {
1608             a {
1609                 background-color: #616161;
1610             }
1611         }
1612     }
1613 }
1614
1615 /* nav */
1616 .nav_pages {
1617     border-top: 1px solid #DDD;
1618     padding: .6em;
1619
1620     ul {
1621         display: inline-block;
1622         margin: 0;
1623         padding: 0;
1624     }
1625
1626     li {
1627         color: #999;
1628         list-style: none;
1629         padding: 4px;
1630
1631         a {
1632             &:hover {
1633                 text-decoration: underline;
1634             }
1635         }
1636     }
1637 }
1638
1639 /* action buttons */
1640 #action {
1641     background-color: #F3F3F3;
1642     border: 1px solid #E8E8E8;
1643     margin: .5em 0 0 0;
1644     padding-bottom: 3px;
1645
1646     li {
1647         list-style: none;
1648         margin: .2em;
1649         padding: .3em 0;
1650     }
1651
1652     a {
1653         font-weight: bold;
1654         text-decoration: none;
1655     }
1656 }
1657
1658 #export,
1659 #moresearches_menu {
1660     li {
1661         margin: 0;
1662         padding: 0;
1663
1664         a {
1665             font-weight: normal;
1666
1667             &.menu-inactive {
1668                 font-weight: bold;
1669             }
1670         }
1671     }
1672 }
1673
1674 #format,
1675 #furthersearches {
1676     padding-left: 35px;
1677 }
1678
1679 .highlight_controls {
1680     float: left;
1681 }
1682
1683 %initial_icon {
1684     background-image: url( "../images/sprite.png" );
1685     background-repeat: no-repeat;
1686     text-decoration: none;
1687 }
1688
1689 input {
1690     &.hold {
1691         @extend %initial_icon;
1692         background-color: transparent;
1693         background-position: -2px -453px; /* Toolbar place hold */
1694         border: 0;
1695         color: #0076B2;
1696         font-weight: bold;
1697         padding-left: 23px;
1698         text-decoration: none;
1699
1700         &.disabled {
1701             @extend %initial_icon;
1702             background-position: -5px -621px; /* Place hold disabled */
1703         }
1704     }
1705
1706     &.editshelf {
1707         @extend %initial_icon;
1708         background-color: transparent;
1709         background-position: 2px -734px; /* List edit */
1710         border: 0;
1711         color: #006699;
1712         cursor: pointer;
1713         filter: none;
1714         font-size: 100%;
1715         padding-left: 29px;
1716         text-decoration: none;
1717
1718         &:active {
1719             border: 0;
1720         }
1721     }
1722 }
1723
1724 .newshelf {
1725     @extend %initial_icon;
1726     background-position: 2px -764px; /* List new */
1727     border: 0;
1728     color: #006699;
1729     cursor: pointer;
1730     filter: none;
1731     font-size: 100%;
1732     padding-left: 28px;
1733
1734     &.disabled {
1735         @extend %initial_icon;
1736         background-position: -4px -791px; /* List new disabled */
1737     }
1738 }
1739
1740 .deleteshelf {
1741     @extend %initial_icon;
1742     background-color: transparent;
1743     background-position: 2px -687px; /* Delete */
1744     border: 0;
1745     color: #006699;
1746     cursor: pointer;
1747     filter: none;
1748     font-size: 100%;
1749     padding-left: 25px;
1750     text-decoration: none;
1751
1752     &:active {
1753         border: 0;
1754     }
1755
1756     &:hover {
1757         color: #990033;
1758     }
1759
1760     &.disabled {
1761         background-position: 0 -712px; /* Delete */
1762     }
1763 }
1764
1765 .links a {
1766     font-weight: bold;
1767 }
1768
1769 #tagslist li {
1770     display: inline;
1771 }
1772
1773 #login4tags {
1774     background-image: url( "../images/sprite.png" ); /* Tag results disabled */
1775     background-position: -6px -1130px;
1776     background-repeat: no-repeat;
1777     padding-left: 20px;
1778     text-decoration: none;
1779 }
1780
1781 .tag_results_input {
1782     font-size: 12px;
1783     margin-left: 1em;
1784     padding: .3em;
1785
1786     input[type="text"] {
1787         font-size: inherit;
1788         margin: 0;
1789         padding: 0;
1790     }
1791
1792     label {
1793         display: inline;
1794     }
1795 }
1796
1797 .tagsinput {
1798     input[type="text"] {
1799         font-size: inherit;
1800         margin: 0;
1801         padding: 0;
1802     }
1803
1804     label {
1805         display: inline;
1806     }
1807 }
1808
1809 .branch-info-tooltip {
1810     display: none;
1811 }
1812
1813 .ui-tooltip-content p {
1814     margin: .3em 0;
1815 }
1816
1817 #social_networks {
1818     a {
1819         background: transparent url( "../images/social-sprite.png" ) no-repeat;
1820         display: block;
1821         height: 20px !important;
1822         text-indent: -999em;
1823         width: 20px;
1824     }
1825
1826     span {
1827         color: #274D7F;
1828         display: block;
1829         float: left;
1830         font-size: 85%;
1831         font-weight: bold;
1832         line-height: 2em;
1833         margin: .5em 0 .5em .5em !important;
1834     }
1835
1836     div {
1837         float: left !important;
1838         margin: .5em 0 .5em .2em !important;
1839     }
1840
1841     #facebook {
1842         background-position: -7px -35px;
1843     }
1844
1845     #twitter {
1846         background-position: -7px -5px;
1847     }
1848
1849     #linkedin {
1850         background-position: -7px -95px;
1851     }
1852
1853     #delicious {
1854         background-position: -7px -66px;
1855     }
1856
1857     #email {
1858         background-position: -7px -126px;
1859     }
1860 }
1861
1862 #marc {
1863     td,
1864     th {
1865         background-color: transparent;
1866         border: 0;
1867         padding: 3px 5px;
1868         text-align: left;
1869     }
1870
1871     td:first-child {
1872         text-indent: 2em;
1873     }
1874
1875     p {
1876         padding-bottom: .6em;
1877
1878         .label {
1879             font-weight: bold;
1880         }
1881     }
1882
1883     ul {
1884         padding-bottom: .6em;
1885     }
1886
1887     .results_summary {
1888         clear: left;
1889
1890         ul {
1891             clear: none;
1892             display: inline;
1893             float: none;
1894             list-style: none;
1895             margin: 0;
1896             padding: 0;
1897         }
1898
1899         li {
1900             display: inline;
1901         }
1902     }
1903 }
1904
1905 #items,
1906 #items td,
1907 #items th {
1908     border: 1px solid #EEE;
1909     font-size: 90%;
1910 }
1911
1912 #plainmarc {
1913     table {
1914         border: 0;
1915         font-family: monospace;
1916         font-size: 95%;
1917         margin: .7em 0 0;
1918     }
1919
1920     th {
1921         background-color: #FFF;
1922         border: 0;
1923         padding: 2px;
1924         text-align: left;
1925         vertical-align: top;
1926         white-space: nowrap;
1927     }
1928
1929     td {
1930         border: 0;
1931         padding: 2px;
1932         vertical-align: top;
1933     }
1934 }
1935
1936 #renewcontrols {
1937     float: right;
1938     font-size: 66%;
1939
1940     a {
1941         background-repeat: no-repeat;
1942         padding: .1em .4em;
1943         padding-left: 18px;
1944         text-decoration: none;
1945     }
1946 }
1947
1948 #renewselected_link {
1949     background-image: url( "../images/sprite.png" );
1950     background-position: -5px -986px;
1951     background-repeat: no-repeat;
1952 }
1953
1954 #renewall_link {
1955     background-image: url( "../images/sprite.png" );
1956     background-position: -8px -967px;
1957     background-repeat: no-repeat;
1958 }
1959
1960 .authref {
1961     text-indent: 2em;
1962
1963     .label {
1964         font-style: italic;
1965     }
1966 }
1967
1968 .authstanza {
1969     margin-top: 1em;
1970
1971     li {
1972         margin-left: .5em;
1973     }
1974 }
1975
1976 .authstanzaheading {
1977     font-weight: bold;
1978 }
1979
1980 .authorizedheading {
1981     font-weight: bold;
1982 }
1983
1984 .authres_notes,
1985 .authres_seealso,
1986 .authres_otherscript {
1987     padding-top: .5em;
1988 }
1989
1990 .authres_notes {
1991     font-style: italic;
1992 }
1993
1994 #didyoumean {
1995     @include border-radius-all( 3px );
1996     background-color: #EEE;
1997     border: 1px solid #E8E8E8;
1998     box-sizing: border-box;
1999     margin: .5em 1.5em;
2000     padding: .5em;
2001     text-align: left;
2002
2003     &.dym-loaded {
2004         background-color: #FFFBEA;
2005         border-color: #F4ECBE;
2006     }
2007 }
2008
2009 .suggestionlabel {
2010     font-weight: bold;
2011 }
2012
2013 .searchsuggestion {
2014     display: inline-block;
2015     padding: .2em .5em;
2016 }
2017
2018 .authlink {
2019     padding-left: .25em;
2020 }
2021
2022 #hierarchies {
2023     a {
2024         color: #069;
2025         font-weight: normal;
2026         text-decoration: underline;
2027
2028         &:hover {
2029             color: #990033;
2030         }
2031     }
2032 }
2033
2034 #top-pages {
2035     margin: 0 0 .5em;
2036 }
2037
2038 .dropdown-menu {
2039     > li {
2040         > a {
2041             font-size: 90%;
2042         }
2043     }
2044 }
2045
2046 #cartDetails,
2047 #cartUpdate,
2048 #holdDetails,
2049 #listsDetails {
2050     background-color: #FFF;
2051     border: 1px solid rgba( 0, 0, 0, .2 );
2052     border-radius: 6px;
2053     box-shadow: 0 5px 10px rgba( 0, 0, 0, .2 );
2054     color: black;
2055     display: none;
2056     font-size: 90%;
2057     margin: 0;
2058     padding: 8px 20px;
2059     text-align: center;
2060     width: 180px;
2061     z-index: 2;
2062 }
2063
2064 #cartmenulink {
2065     white-space: nowrap;
2066 }
2067
2068 #search-facets,
2069 #menu {
2070     @include border-radius-all( 7px );
2071     border: 1px solid #D2D2CF;
2072
2073     ul {
2074         margin: 0;
2075         padding: .3em;
2076     }
2077
2078     form {
2079         margin: 0;
2080     }
2081
2082     h4 {
2083         font-size: 90%;
2084         margin: 0 0 .6em 0;
2085         text-align: center;
2086
2087         a {
2088             background-color: #F2F2EF;
2089             border-bottom: 1px solid #D8D8D8;
2090             border-radius: 8px 8px 0 0;
2091             display: block;
2092             font-weight: bold;
2093             padding: .7em .2em;
2094             text-decoration: none;
2095         }
2096     }
2097
2098     li {
2099         font-size: 90%;
2100         font-weight: bold;
2101         list-style-type: none;
2102
2103         li {
2104             font-size: 95%;
2105             font-weight: normal;
2106             line-height: 125%;
2107             margin-bottom: 2px;
2108             padding: .1em .2em;
2109         }
2110
2111         &.showmore {
2112             a {
2113                 font-weight: bold;
2114                 text-indent: 1em;
2115             }
2116         }
2117     }
2118
2119     a {
2120         font-weight: normal;
2121         text-decoration: underline;
2122     }
2123
2124     .facet-count {
2125         display: inline-block;
2126     }
2127
2128 }
2129
2130 #menu {
2131     font-size: 94%;
2132
2133     li {
2134         list-style-type: none;
2135
2136         a {
2137             background: #EEEEEE;
2138             border: 1px solid #D8D8D8;
2139             border-bottom-color: #999;
2140             border-radius: 5px 0 0 5px;
2141             display: block;
2142             font-size: 111%;
2143             margin: .4em 0;
2144             margin-right: -1px;
2145             padding: .4em .6em;
2146             text-decoration: none;
2147
2148             &:hover {
2149                 background: #EAEEF5;
2150             }
2151         }
2152
2153         &.active {
2154             a {
2155                 background-color: #FFF;
2156                 background-image: none;
2157                 border-right-width: 0;
2158                 font-weight: bold;
2159
2160                 &:hover {
2161                     background-color: #FFF;
2162                 }
2163             }
2164         }
2165     }
2166
2167     h4 {
2168         display: none;
2169     }
2170 }
2171
2172 #addto {
2173     max-width: 10em;
2174 }
2175
2176 /* Search results add to cart (lists disabled) */
2177 .addto {
2178     .addtocart {
2179         background-image: url( "../images/sprite.png" ); /* Cart */
2180         background-position: -5px -266px;
2181         background-repeat: no-repeat;
2182         padding-left: 33px;
2183         text-decoration: none;
2184     }
2185 }
2186
2187 .searchresults {
2188     p {
2189         margin: 0;
2190         padding: 0 0 .6em 0;
2191
2192         &.details {
2193             color: #979797;
2194         }
2195     }
2196
2197     a {
2198         &.highlight_toggle {
2199             background-image: url( "../images/sprite.png" ); /* Highlight */
2200             background-position: -11px -841px;
2201             background-repeat: no-repeat;
2202             display: none;
2203             font-weight: normal;
2204             padding: 0 10px 0 21px;
2205         }
2206     }
2207
2208     .commentline {
2209         @include border-radius-all( 3px );
2210         @include shadowed;
2211         background-color: rgba( 255, 255, 204, .4 );
2212         border: 1px solid #CCC;
2213         display: inline-block;
2214         margin: .3em;
2215         padding: .4em;
2216
2217         .yours {
2218             background-color: rgba( 239, 254, 213, .4 );
2219         }
2220     }
2221 }
2222
2223 .commentline .avatar {
2224     float: right;
2225     padding-left: .5em;
2226 }
2227
2228 /* style for search terms in catalogsearch */
2229 .term {
2230     /* color: blue; */
2231     background-color: #FFFFCC;
2232     color: #990000;
2233 }
2234
2235 /* style for shelving location in catalogsearch */
2236 .shelvingloc {
2237     display: block;
2238     font-style: italic;
2239 }
2240
2241 #CheckAll,
2242 #CheckNone,
2243 .CheckAll,
2244 .CheckNone {
2245     font-weight: normal;
2246     margin: 0 .5em;
2247     text-decoration: underline;
2248 }
2249
2250 .sep {
2251     color: #888;
2252     padding: 0 .2em 0 .5em;
2253     text-shadow: 1px 1px 0 #FFF;
2254 }
2255
2256 %page-first-child {
2257     border-bottom-left-radius: 3px;
2258     border-top-left-radius: 3px;
2259     border-width: 1px;
2260 }
2261
2262 %page-last-child {
2263     border-bottom-right-radius: 3px;
2264     border-top-right-radius: 3px;
2265     border-width: 1px 1px 1px 0;
2266 }
2267
2268 %page-middle-child {
2269     background-color: #FFFFFF;
2270     border-color: #DDDDDD;
2271     border-image: none;
2272     border-style: solid;
2273     border-width: 1px 1px 1px 0;
2274     float: left;
2275     font-size: 11.9px;
2276     line-height: 20px;
2277     padding: 4px 12px;
2278     text-decoration: none;
2279 }
2280
2281 .pages {
2282     margin: 20px 0;
2283
2284     span {
2285         &:first-child {
2286             @extend %page-first-child;
2287         }
2288
2289         &:last-child {
2290             @extend %page-last-child;
2291         }
2292     }
2293
2294     a {
2295         @extend %page-middle-child;
2296
2297         &:first-child {
2298             @extend %page-first-child;
2299         }
2300
2301         &:last-child {
2302             @extend %page-last-child;
2303         }
2304     }
2305
2306     .inactive {
2307         @extend %page-middle-child;
2308         background-color: #F5F5F5;
2309     }
2310
2311     .currentPage {
2312         @extend %page-middle-child;
2313     }
2314
2315     a[rel='last'] {
2316         border-bottom-right-radius: 3px;
2317         border-top-right-radius: 3px;
2318     }
2319 }
2320
2321 .hold-message {
2322     @include border-radius-all( 3px );
2323     background-color: #FFF0B1;
2324     display: inline-block;
2325     margin: .5em;
2326     padding: .2em .5em;
2327 }
2328
2329 .reserve_date,
2330 .expiration_date {
2331     white-space: nowrap;
2332 }
2333
2334 .close {
2335     color: #0088CC;
2336     filter: none;
2337     float: none;
2338     font-size: inherit;
2339     font-weight: normal;
2340     opacity: inherit;
2341     position: inherit;
2342     right: auto;
2343     text-shadow: none;
2344     top: auto;
2345 }
2346
2347 .close:hover {
2348     color: #538200;
2349     filter: inherit;
2350     font-size: inherit;
2351     opacity: inherit;
2352 }
2353
2354 /* Redefine a new style for Bootstrap's class "close" since we use that already */
2355 /* Use <a class="closebtn" href="#">&times;</a> */
2356
2357 .modal-header .closebtn {
2358     margin-top: 2px;
2359 }
2360
2361 .closebtn {
2362     color: #000000;
2363     float: right;
2364     font-size: 20px;
2365     font-weight: bold;
2366     line-height: 20px;
2367     opacity: .2;
2368     text-shadow: 0 1px 0 #FFFFFF;
2369
2370     &:hover {
2371         color: #000000;
2372         cursor: pointer;
2373         opacity: .4;
2374         text-decoration: none;
2375     }
2376 }
2377
2378 button.closebtn {
2379     background: transparent;
2380     border: 0;
2381     cursor: pointer;
2382     padding: 0;
2383 }
2384
2385 .modal {
2386     form {
2387         margin: 0;
2388     }
2389 }
2390
2391 #loginModal {
2392     margin-left: -200px;
2393     width: 400px;
2394
2395     input {
2396         box-sizing: border-box;
2397         display: block;
2398         font-size: 150%;
2399         height: auto;
2400         padding: .4em;
2401         width: 100%;
2402
2403         &[type='submit'] {
2404             background: #006DCC none;
2405             font-size: 100%;
2406             padding: .5em;
2407             transition: background-color .5s ease;
2408
2409             &:hover {
2410                 background: #0088CC none;
2411             }
2412         }
2413     }
2414
2415     .closebtn {
2416         color: #C00;
2417         opacity: 1;
2418
2419         &:hover {
2420             opacity: .4;
2421         }
2422     }
2423
2424     .modal-header,
2425     .modal-body,
2426     .modal-footer {
2427         font-size: 120%;
2428         padding: 1em 2em;
2429     }
2430 }
2431
2432 .nologininstructions,
2433 .forgotpassword,
2434 .patronregistration {
2435     padding-top: 1em;
2436 }
2437
2438 .btn-group {
2439     label,
2440     select {
2441         font-size: 13px;
2442     }
2443 }
2444
2445 .span2 select {
2446     width: 100%;
2447 }
2448
2449 .item-status {
2450     display: block;
2451     font-size: 95%;
2452     margin-bottom: .5em;
2453 }
2454
2455 .available {
2456     color: #006600;
2457 }
2458
2459 .unavailable {
2460     color: #990033;
2461 }
2462
2463 .waiting,
2464 .intransit,
2465 .notforloan,
2466 .checkedout,
2467 .lost,
2468 .notonhold {
2469     display: block;
2470 }
2471
2472 .notforloan {
2473     color: #900;
2474 }
2475
2476 .lost {
2477     color: #666;
2478 }
2479
2480 .suggestion {
2481     @include border-radius-all( 3px );
2482     background-color: #EEEEEB;
2483     border: 1px solid #DDDED3;
2484     margin: 1em auto;
2485     padding: .5em;
2486     width: 35%;
2487 }
2488
2489 .librarypulldown .transl1 {
2490     width: auto;
2491 }
2492
2493 .nolibrarypulldown {
2494     width: 68%;
2495
2496     .transl1 {
2497         width: 87%;
2498     }
2499 }
2500
2501 #opac-main-search {
2502     select {
2503         max-width: 12em;
2504         width: auto;
2505     }
2506 }
2507
2508 #logo {
2509     background: transparent url( "../images/koha-logo-navbar.png" ) no-repeat scroll 0%;
2510     border: 0;
2511     float: left !important;
2512     margin: 0;
2513     padding: 0;
2514     width: 100px;
2515
2516     a {
2517         border: 0;
2518         cursor: pointer;
2519         display: block;
2520         height: 0 !important;
2521         margin: 0;
2522         overflow: hidden;
2523         padding: 40px 0 0;
2524         text-decoration: none;
2525         width: 100px;
2526     }
2527 }
2528
2529 #user-menu-trigger {
2530     display: none;
2531
2532     i {
2533         padding: 14px 0 0;
2534         width: 14px;
2535     }
2536
2537     .caret {
2538         border-bottom-color: #999999;
2539         border-top-color: #999999;
2540         margin-top: 18px;
2541     }
2542 }
2543
2544 /* Class to be added to toolbar when it starts being fixed at the top of the screen*/
2545 .floating {
2546     box-shadow: 0 3px 2px 0 rgba( 0, 0, 0, .4 );
2547     margin-top: 0;
2548 }
2549
2550 .tdlabel {
2551     display: none;
2552     font-weight: bold;
2553 }
2554
2555 #ulactioncontainer {
2556     min-width: 16em;
2557 }
2558
2559 .notesrow {
2560     label {
2561         font-weight: bold;
2562     }
2563
2564     span {
2565         display: block;
2566     }
2567 }
2568
2569 .thumbnail-shelfbrowser span {
2570     margin: 0 auto;
2571 }
2572
2573 .table {
2574     .sorting_asc {
2575         background: url( "../images/asc.gif" ) no-repeat scroll right center #ECEDE6;
2576         padding-right: 19px;
2577     }
2578
2579     .sorting_desc {
2580         background: url( "../images/desc.gif" ) no-repeat scroll right center #ECEDE6;
2581         padding-right: 19px;
2582     }
2583
2584     .sorting {
2585         background: url( "../images/ascdesc.gif" ) no-repeat scroll right center #ECEDE6;
2586         padding-right: 19px;
2587     }
2588
2589     .nosort,
2590     .nosort.sorting_asc,
2591     .nosort.sorting_desc,
2592     .nosort.sorting {
2593         background: #ECEDE6 none;
2594         padding-right: 19px;
2595     }
2596
2597     th,
2598     td {
2599         line-height: 135%;
2600     }
2601 }
2602
2603 .tags,
2604 .shelves {
2605     ul {
2606         display: inline;
2607         list-style: none;
2608         margin-left: 0;
2609
2610         li {
2611             display: inline;
2612         }
2613     }
2614 }
2615
2616 .coverimages {
2617     float: right;
2618 }
2619
2620 #i18nMenu {
2621     margin-left: 1em;
2622
2623     li {
2624         font-size: 85%;
2625
2626         li {
2627             font-size: 100%;
2628
2629             > a {
2630                 font-size: 100%;
2631             }
2632
2633             &:hover {
2634                 color: #FFF;
2635             }
2636         }
2637
2638         a {
2639             color: $links;
2640         }
2641     }
2642
2643     .dropdown-menu {
2644         li {
2645             p {
2646                 clear: both;
2647                 display: block;
2648                 font-weight: normal;
2649                 line-height: 20px;
2650                 padding: 3px 20px;
2651                 white-space: nowrap;
2652             }
2653         }
2654     }
2655 }
2656
2657 #subjectsList,
2658 #authorSearch {
2659     label {
2660         display: inline;
2661         vertical-align: middle;
2662     }
2663
2664     ul {
2665         border-bottom: 1px solid #EEE;
2666         list-style-type: none;
2667         margin: 0;
2668         padding: .6em 0;
2669     }
2670
2671     li {
2672         list-style-type: none;
2673         margin: 0;
2674         padding: 0;
2675     }
2676 }
2677
2678
2679 #overdrive-results,
2680 #recordedbooks-results,
2681 #openlibrary-results {
2682     font-weight: bold;
2683     padding-left: 1em;
2684 }
2685
2686 .throbber {
2687     vertical-align: middle;
2688 }
2689
2690 #overdrive-results-list .star-rating-control {
2691     display: block;
2692     overflow: auto;
2693 }
2694
2695 #shelfbrowser {
2696     table {
2697         margin: 0;
2698     }
2699
2700     table,
2701     td,
2702     th {
2703         border: 0;
2704         font-size: 90%;
2705         text-align: center;
2706     }
2707
2708     td,
2709     th {
2710         padding: 3px 5px;
2711         width: 20%;
2712     }
2713
2714     a {
2715         display: block;
2716         font-size: 110%;
2717         font-weight: bold;
2718         text-decoration: none;
2719     }
2720
2721     #browser_next,
2722     #browser_previous {
2723         background-image: url( "../images/sprite.png" );
2724         background-repeat: no-repeat;
2725         width: 16px;
2726
2727         a {
2728             cursor: pointer;
2729             display: block;
2730             height: 0 !important;
2731             margin: 0;
2732             overflow: hidden;
2733             padding: 50px 0 0;
2734             text-decoration: none;
2735             width: 16px;
2736         }
2737     }
2738
2739     #browser_previous {
2740         background-position: -9px -1007px;
2741     }
2742
2743     #browser_next {
2744         background-position: -9px -1057px;
2745     }
2746 }
2747
2748 #holds {
2749     margin: 0 auto;
2750     max-width: 800px;
2751 }
2752
2753 .holdrow {
2754     border-bottom: 1px solid #CCC;
2755     clear: both;
2756     margin-bottom: .5em;
2757     padding: 0 1em 1em 1em;
2758
2759     fieldset {
2760         border: 0;
2761         float: none;
2762         margin: 0;
2763
2764         .label {
2765             font-size: 14px;
2766         }
2767     }
2768
2769     label {
2770         display: inline;
2771     }
2772 }
2773
2774 .hold-options {
2775     clear: both;
2776 }
2777
2778 .toggle-hold-options {
2779     background-color: #EEE;
2780     clear: both;
2781     display: block;
2782     font-weight: bold;
2783     margin: 1em 0;
2784     padding: .5em;
2785 }
2786
2787 .copiesrow {
2788     clear: both;
2789 }
2790
2791 #idreambooksreadometer {
2792     float: right;
2793 }
2794
2795 .idreambookslegend {
2796     font-size: small;
2797 }
2798
2799 .idreambookssummary {
2800     a {
2801         color: #707070;
2802         text-decoration: none;
2803     }
2804
2805     img {
2806         vertical-align: middle;
2807     }
2808 }
2809
2810 .idbresult {
2811     color: #29ADE4;
2812     margin: .5em;
2813     padding: .5em;
2814     text-align: center;
2815
2816     img {
2817         padding-right: 6px;
2818         vertical-align: middle;
2819     }
2820
2821     a,
2822     a:visited {
2823         text-decoration: none;
2824         color: #29ADE4;
2825     }
2826 }
2827
2828 .js-show {
2829     display: none;
2830 }
2831
2832 .modal-nojs {
2833     .modal-header,
2834     .modal-footer {
2835         display: none;
2836     }
2837 }
2838
2839 .contents {
2840     width: 75%;
2841
2842     .t:first-child::before {
2843         content: "→ ";
2844     }
2845
2846     .t::before {
2847         content: "\A → ";
2848         white-space: pre;
2849     }
2850
2851     .t {
2852         font-weight: bold;
2853         display: inline;
2854     }
2855
2856     .r {
2857         display: inline;
2858     }
2859 }
2860
2861
2862 .contentblock {
2863     font-size: 95%;
2864     line-height: 135%;
2865     margin-left: 2em;
2866     position: relative;
2867 }
2868
2869 .m880 {
2870     display: block;
2871     float: right;
2872     padding-left: 20px;
2873     text-align: right;
2874     width: 50%;
2875 }
2876
2877 #memberentry-form {
2878     input.error {
2879         border-color: #C00;
2880         box-shadow: 0 1px 1px #C00 inset, 0 0 8px #C00;
2881         color: #F00;
2882         outline: 0 none;
2883
2884         &:focus {
2885             border-color: #C00;
2886             box-shadow: 0 1px 1px #C00 inset, 0 0 8px #C00;
2887             color: #F00;
2888             outline: 0 none;
2889         }
2890
2891         label.error {
2892             color: #C00;
2893             float: none;
2894             font-size: 90%;
2895         }
2896     }
2897 }
2898
2899
2900 #illrequests {
2901     .illrequest-actions {
2902         margin-bottom: 20px;
2903         padding-top: 20px;
2904
2905         .btn,
2906         .cancel {
2907             margin-right: 5px;
2908         }
2909     }
2910
2911     #illrequests-create-button {
2912         margin-bottom: 20px;
2913     }
2914
2915     .bg-info {
2916         overflow: auto;
2917         position: relative;
2918
2919         #search-summary {
2920             position: absolute;
2921             top: 50%;
2922             transform: translateY( -50% );
2923         }
2924
2925     }
2926
2927     #freeform-fields .custom-name {
2928         float: left;
2929         margin-right: 1em;
2930         text-align: right;
2931         width: 8em;
2932     }
2933
2934     .dropdown:hover .dropdown-menu.nojs {
2935         display: block;
2936     }
2937 }
2938
2939 #dc_fieldset {
2940     border: 1px solid #DDDDDD;
2941     border-radius: 10px;
2942     border-width: 1px;
2943     padding: 5px;
2944 }
2945
2946 .label_dc {
2947     cursor: pointer;
2948     display: inline;
2949     margin: 0;
2950     padding: 0;
2951 }
2952
2953 .btn-danger {
2954     color: white !important;
2955 }
2956
2957 .count_label {
2958     $base: #369;
2959     background-color: $base;
2960     border-radius: 5px;
2961     color: #FFF;
2962     display: inline-block;
2963     font-weight: bold;
2964     min-width: 1.5em;
2965     padding: .2em;
2966     text-align: center;
2967     text-shadow: 0 -1px 0 rgba( 0, 0, 0, .25 );
2968
2969     &:hover {
2970         background-color: lighten( $base, 20% );
2971     }
2972 }
2973
2974 .user_overdues_count,
2975 .user_fines_count {
2976     background-color: #990000;
2977
2978     &:hover {
2979         background-color: lighten( #990000, 10% );
2980     }
2981 }
2982
2983 .user_holds_waiting_count {
2984     background-color: #538200;
2985
2986     &:hover {
2987         background-color: lighten( #538200, 10% );
2988     }
2989 }
2990
2991 #user_summary {
2992     border: 1px solid #EAEAE6;
2993     border-radius: 7px;
2994     margin-bottom: 1em;
2995     padding-bottom: .5em;
2996
2997     h3 {
2998         background-color: #EAEAE6;
2999         border-top-left-radius: 6px;
3000         border-top-right-radius: 6px;
3001         box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .2 );
3002         margin-top: 0;
3003         padding: .2em 0;
3004         text-align: center;
3005     }
3006
3007     ul {
3008         list-style-type: none;
3009         margin: 0 0 .2em 0;
3010
3011         a {
3012             display: block;
3013             font-weight: bold;
3014             padding: .2em 1em;
3015         }
3016     }
3017 }
3018
3019 @import "responsive";