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

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