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