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

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