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     display: block;
2443     font-style: italic;
2444 }
2445
2446 #CheckAll,
2447 #CheckNone,
2448 .CheckAll,
2449 .CheckNone {
2450     font-weight: normal;
2451     margin: 0 .5em;
2452     text-decoration: underline;
2453 }
2454
2455 .sep {
2456     color: #888;
2457     padding: 0 .2em 0 .5em;
2458     text-shadow: 1px 1px 0 #FFF;
2459 }
2460
2461 %page-first-child {
2462     border-bottom-left-radius: 3px;
2463     border-top-left-radius: 3px;
2464     border-width: 1px;
2465 }
2466
2467 %page-last-child {
2468     border-bottom-right-radius: 3px;
2469     border-top-right-radius: 3px;
2470     border-width: 1px 1px 1px 0;
2471 }
2472
2473 %page-middle-child {
2474     background-color: #FFFFFF;
2475     border-color: #DDDDDD;
2476     border-image: none;
2477     border-style: solid;
2478     border-width: 1px 1px 1px 0;
2479     float: left;
2480     font-size: 11.9px;
2481     line-height: 20px;
2482     padding: 4px 12px;
2483     text-decoration: none;
2484 }
2485
2486 .pages {
2487     margin: 20px 0;
2488
2489     span {
2490         &:first-child {
2491             @extend %page-first-child;
2492         }
2493
2494         &:last-child {
2495             @extend %page-last-child;
2496         }
2497     }
2498
2499     a {
2500         @extend %page-middle-child;
2501
2502         &:first-child {
2503             @extend %page-first-child;
2504         }
2505
2506         &:last-child {
2507             @extend %page-last-child;
2508         }
2509     }
2510
2511     .inactive {
2512         @extend %page-middle-child;
2513         background-color: #F5F5F5;
2514     }
2515
2516     .currentPage {
2517         @extend %page-middle-child;
2518     }
2519
2520     a[rel='last'] {
2521         border-bottom-right-radius: 3px;
2522         border-top-right-radius: 3px;
2523     }
2524 }
2525
2526 .hold-message {
2527     @include border-radius-all( 3px );
2528     background-color: #FFF0B1;
2529     display: inline-block;
2530     margin: .5em;
2531     padding: .2em .5em;
2532 }
2533
2534 .reserve_date,
2535 .expiration_date {
2536     white-space: nowrap;
2537 }
2538
2539 .close {
2540     color: #0088CC;
2541     filter: none;
2542     float: none;
2543     font-size: inherit;
2544     font-weight: normal;
2545     opacity: inherit;
2546     position: inherit;
2547     right: auto;
2548     text-shadow: none;
2549     top: auto;
2550 }
2551
2552 .close:hover {
2553     color: #538200;
2554     filter: inherit;
2555     font-size: inherit;
2556     opacity: inherit;
2557 }
2558
2559 /* Redefine a new style for Bootstrap's class "close" since we use that already */
2560 /* Use <a class="closebtn" href="#">&times;</a> */
2561
2562 .modal-header .closebtn {
2563     margin-top: 2px;
2564 }
2565
2566 .closebtn {
2567     color: #000000;
2568     float: right;
2569     font-size: 20px;
2570     font-weight: bold;
2571     line-height: 20px;
2572     opacity: .2;
2573     text-shadow: 0 1px 0 #FFFFFF;
2574
2575     &:hover {
2576         color: #000000;
2577         cursor: pointer;
2578         opacity: .4;
2579         text-decoration: none;
2580     }
2581 }
2582
2583 button.closebtn {
2584     background: transparent;
2585     border: 0;
2586     cursor: pointer;
2587     padding: 0;
2588 }
2589
2590 .modal {
2591     form {
2592         margin: 0;
2593     }
2594 }
2595
2596 #loginModal {
2597     margin-left: -200px;
2598     width: 400px;
2599
2600     input {
2601         box-sizing: border-box;
2602         display: block;
2603         font-size: 150%;
2604         height: auto;
2605         padding: .4em;
2606         width: 100%;
2607
2608         &[type='submit'] {
2609             font-size: 100%;
2610             padding: .5em;
2611             transition: background-color .5s ease;
2612
2613             &:hover {
2614                 background: #77b50f none;
2615             }
2616         }
2617     }
2618
2619     .closebtn {
2620         color: #C00;
2621         opacity: 1;
2622
2623         &:hover {
2624             opacity: .4;
2625         }
2626     }
2627
2628     .modal-header,
2629     .modal-body,
2630     .modal-footer {
2631         font-size: 120%;
2632         padding: 1em 2em;
2633     }
2634 }
2635
2636 .nologininstructions,
2637 .forgotpassword,
2638 .patronregistration {
2639     padding-top: 1em;
2640 }
2641
2642 .btn-group {
2643     label,
2644     select {
2645         font-size: 13px;
2646     }
2647 }
2648
2649 .span2 select {
2650     width: 100%;
2651 }
2652
2653 .item-status {
2654     display: block;
2655     font-size: 95%;
2656     margin-bottom: .5em;
2657 }
2658
2659 .available {
2660     color: #006600;
2661 }
2662
2663 .unavailable {
2664     color: #990033;
2665 }
2666
2667 .waiting,
2668 .intransit,
2669 .notforloan,
2670 .checkedout,
2671 .lost,
2672 .notonhold {
2673     display: block;
2674 }
2675
2676 .notforloan {
2677     color: #900;
2678 }
2679
2680 .lost {
2681     color: #666;
2682 }
2683
2684 .suggestion {
2685     background-color: #F0F3F3;
2686     border: 1px solid #F0F3F3;
2687     color: #727272;
2688     margin: 1em auto;
2689     padding: .5em;
2690     width: 35%;
2691 }
2692
2693 .librarypulldown .transl1 {
2694     width: auto;
2695 }
2696
2697 .nolibrarypulldown {
2698     width: 68%;
2699
2700     .transl1 {
2701         width: 87%;
2702     }
2703 }
2704
2705 #opac-main-search {
2706     select {
2707         max-width: 12em;
2708         width: auto;
2709     }
2710 }
2711
2712 #logo {
2713     background: transparent url( "../images/koha-green-logo.png" ) no-repeat scroll 0%;
2714     border: 0;
2715     float: left !important;
2716     margin: 0;
2717     padding: 0;
2718     width: 100px;
2719
2720     a {
2721         border: 0;
2722         cursor: pointer;
2723         display: block;
2724         height: 0 !important;
2725         margin: 0;
2726         overflow: hidden;
2727         padding: 40px 0 0;
2728         text-decoration: none;
2729         width: 100px;
2730          &:focus {
2731         background-color: transparent;
2732          }
2733     }
2734 }
2735
2736 #user-menu-trigger {
2737     display: none;
2738
2739     i {
2740         padding: 14px 0 0;
2741         width: 14px;
2742     }
2743
2744     .caret {
2745         border-bottom-color: #999999;
2746         border-top-color: #999999;
2747         margin-top: 18px;
2748     }
2749 }
2750
2751 #header-region .icon-white {
2752     background-image: url(/opac-tmpl/bootstrap/lib/bootstrap/img/glyphicons-halflings.png);
2753 }
2754
2755 /* Class to be added to toolbar when it starts being fixed at the top of the screen*/
2756 .floating {
2757     box-shadow: 0 3px 2px 0 rgba( 0, 0, 0, .4 );
2758     margin-top: 0;
2759 }
2760
2761 .tdlabel {
2762     display: none;
2763     font-weight: bold;
2764 }
2765
2766 #ulactioncontainer {
2767     min-width: 16em;
2768 }
2769
2770 .notesrow {
2771     label {
2772         font-weight: bold;
2773     }
2774
2775     span {
2776         display: block;
2777     }
2778 }
2779
2780 .thumbnail-shelfbrowser span {
2781     margin: 0 auto;
2782 }
2783
2784 .table {
2785     .sorting_asc {
2786         background: url( "../images/asc.gif" ) no-repeat scroll 100% 80% #E2E8E8;
2787         padding-right: 19px;
2788     }
2789
2790     .sorting_desc {
2791         background: url( "../images/desc.gif" ) no-repeat scroll 100% 80% #E2E8E8;
2792         padding-right: 19px;
2793     }
2794
2795     .sorting {
2796         background: url( "../images/ascdesc.gif" ) no-repeat scroll 100% 75% #E2E8E8;
2797         padding-right: 19px;
2798     }
2799
2800     .nosort,
2801     .nosort.sorting_asc,
2802     .nosort.sorting_desc,
2803     .nosort.sorting {
2804         background: #E2E8E8 none;
2805         padding-right: 19px;
2806     }
2807
2808     th,
2809     td {
2810         line-height: 135%;
2811     }
2812 }
2813
2814 .table-bordered {
2815     border-radius: 0;
2816     thead:first-child tr:first-child > th {
2817         &:last-child {
2818         border-radius: 0;
2819         }
2820         &:first-child {
2821         border-radius: 0;
2822         }
2823     }
2824     tbody:last-child tr:last-child > td {
2825         &:last-child {
2826         border-radius: 0;
2827         }
2828         &:first-child {
2829         border-radius: 0;
2830         }
2831     }
2832 }
2833
2834 .tags,
2835 .shelves {
2836     ul {
2837         display: inline;
2838         list-style: none;
2839         margin-left: 0;
2840
2841         li {
2842             display: inline;
2843         }
2844     }
2845 }
2846
2847 .coverimages {
2848     float: right;
2849 }
2850
2851 #i18nMenu {
2852     margin-left: 1em;
2853
2854     li {
2855         font-size: 85%;
2856
2857         li {
2858             font-size: 100%;
2859
2860             > a {
2861                 font-size: 100%;
2862             }
2863
2864             &:hover {
2865                 color: #FFF;
2866             }
2867         }
2868
2869         a {
2870             color: $links;
2871         }
2872     }
2873
2874     .dropdown-menu {
2875         li {
2876             p {
2877                 clear: both;
2878                 display: block;
2879                 font-weight: normal;
2880                 line-height: 20px;
2881                 padding: 3px 20px;
2882                 white-space: nowrap;
2883             }
2884         }
2885     }
2886 }
2887
2888 #subjectsList,
2889 #authorSearch {
2890     label {
2891         display: inline;
2892         vertical-align: middle;
2893     }
2894
2895     ul {
2896         border-bottom: 1px solid #EEE;
2897         list-style-type: none;
2898         margin: 0;
2899         padding: .6em 0;
2900     }
2901
2902     li {
2903         list-style-type: none;
2904         margin: 0;
2905         padding: 0;
2906     }
2907 }
2908
2909
2910 #overdrive-results,
2911 #recordedbooks-results,
2912 #openlibrary-results {
2913     font-weight: bold;
2914     padding-left: 1em;
2915 }
2916
2917 .throbber {
2918     vertical-align: middle;
2919 }
2920
2921 #overdrive-results-list .star-rating-control {
2922     display: block;
2923     overflow: auto;
2924 }
2925
2926 #shelfbrowser {
2927     table {
2928         margin: 0;
2929     }
2930
2931     table,
2932     td,
2933     th {
2934         border: 0;
2935         font-size: 90%;
2936         text-align: center;
2937     }
2938
2939     td,
2940     th {
2941         padding: 3px 5px;
2942         width: 20%;
2943     }
2944
2945     a {
2946         display: block;
2947         font-size: 110%;
2948         font-weight: bold;
2949         text-decoration: none;
2950     }
2951
2952     #browser_next,
2953     #browser_previous {
2954         background-image: url( "../images/sprite.png" );
2955         background-repeat: no-repeat;
2956         width: 16px;
2957
2958         a {
2959             cursor: pointer;
2960             display: block;
2961             height: 0 !important;
2962             margin: 0;
2963             overflow: hidden;
2964             padding: 50px 0 0;
2965             text-decoration: none;
2966             width: 16px;
2967         }
2968     }
2969
2970     #browser_previous {
2971         background-position: -9px -1007px;
2972     }
2973
2974     #browser_next {
2975         background-position: -9px -1057px;
2976     }
2977 }
2978
2979 #holds {
2980     margin: 0 auto;
2981     max-width: 800px;
2982 }
2983
2984 .holdrow {
2985     border-bottom: 1px solid #CCC;
2986     clear: both;
2987     margin-bottom: .5em;
2988     padding: 0 1em 1em 1em;
2989
2990     fieldset {
2991         border: 0;
2992         float: none;
2993         margin: 0;
2994
2995         .label {
2996             font-size: 14px;
2997         }
2998     }
2999
3000     label {
3001         display: inline;
3002     }
3003 }
3004
3005 .hold-options {
3006     clear: both;
3007 }
3008
3009 .toggle-hold-options {
3010     background-color: #EEE;
3011     clear: both;
3012     display: block;
3013     font-weight: bold;
3014     margin: 1em 0;
3015     padding: .5em;
3016 }
3017
3018 .copiesrow {
3019     clear: both;
3020 }
3021
3022 #idreambooksreadometer {
3023     float: right;
3024 }
3025
3026 .idreambookslegend {
3027     font-size: small;
3028 }
3029
3030 .idreambookssummary {
3031     a {
3032         color: #707070;
3033         text-decoration: none;
3034     }
3035
3036     img {
3037         vertical-align: middle;
3038     }
3039 }
3040
3041 .idbresult {
3042     color: #29ADE4;
3043     margin: .5em;
3044     padding: .5em;
3045     text-align: center;
3046
3047     img {
3048         padding-right: 6px;
3049         vertical-align: middle;
3050     }
3051
3052     a,
3053     a:visited {
3054         text-decoration: none;
3055         color: #29ADE4;
3056     }
3057 }
3058
3059 .js-show {
3060     display: none;
3061 }
3062
3063 .modal-nojs {
3064     .modal-header,
3065     .modal-footer {
3066         display: none;
3067     }
3068 }
3069
3070 .contents {
3071     width: 75%;
3072
3073     .t:first-child::before {
3074         content: "→ ";
3075     }
3076
3077     .t::before {
3078         content: "\A → ";
3079         white-space: pre;
3080     }
3081
3082     .t {
3083         font-weight: bold;
3084         display: inline;
3085     }
3086
3087     .r {
3088         display: inline;
3089     }
3090 }
3091
3092
3093 .contentblock {
3094     font-size: 95%;
3095     line-height: 135%;
3096     margin-left: 2em;
3097     position: relative;
3098 }
3099
3100 .m880 {
3101     display: block;
3102     float: right;
3103     padding-left: 20px;
3104     text-align: right;
3105     width: 50%;
3106 }
3107
3108 #memberentry-form {
3109     input.error {
3110         border-color: #C00;
3111         box-shadow: 0 1px 1px #C00 inset, 0 0 8px #C00;
3112         color: #F00;
3113         outline: 0 none;
3114
3115         &:focus {
3116             border-color: #C00;
3117             box-shadow: 0 1px 1px #C00 inset, 0 0 8px #C00;
3118             color: #F00;
3119             outline: 0 none;
3120         }
3121
3122         label.error {
3123             color: #C00;
3124             float: none;
3125             font-size: 90%;
3126         }
3127     }
3128 }
3129
3130
3131 #illrequests {
3132     .illrequest-actions {
3133         margin-bottom: 20px;
3134         padding-top: 20px;
3135
3136         .btn,
3137         .cancel {
3138             margin-right: 5px;
3139         }
3140     }
3141
3142     #illrequests-create-button {
3143         margin-bottom: 20px;
3144     }
3145
3146     .bg-info {
3147         overflow: auto;
3148         position: relative;
3149
3150         #search-summary {
3151             position: absolute;
3152             top: 50%;
3153             transform: translateY( -50% );
3154         }
3155
3156     }
3157
3158     #freeform-fields .custom-name {
3159         float: left;
3160         margin-right: 1em;
3161         text-align: right;
3162         width: 8em;
3163     }
3164
3165     .dropdown:hover .dropdown-menu.nojs {
3166         display: block;
3167     }
3168 }
3169
3170 #dc_fieldset {
3171     border: 1px solid #DDDDDD;
3172     border-radius: 10px;
3173     border-width: 1px;
3174     padding: 5px;
3175 }
3176
3177 .label_dc {
3178     cursor: pointer;
3179     display: inline;
3180     margin: 0;
3181     padding: 0;
3182 }
3183
3184 .btn-danger {
3185     color: white !important;
3186 }
3187
3188 .count_label {
3189     $base: #369;
3190     background-color: $base;
3191     border-radius: 5px;
3192     color: #FFF;
3193     display: inline-block;
3194     font-weight: bold;
3195     min-width: 1.5em;
3196     padding: .2em;
3197     text-align: center;
3198     text-shadow: 0 -1px 0 rgba( 0, 0, 0, .25 );
3199
3200     &:hover {
3201         background-color: lighten( $base, 20% );
3202     }
3203 }
3204
3205 .user_overdues_count,
3206 .user_fines_count {
3207     background-color: #990000;
3208
3209     &:hover {
3210         background-color: lighten( #990000, 10% );
3211     }
3212 }
3213
3214 .user_holds_waiting_count {
3215     background-color: #538200;
3216
3217     &:hover {
3218         background-color: lighten( #538200, 10% );
3219     }
3220 }
3221
3222 #user_summary {
3223     border: 1px solid #EAEAE6;
3224     margin-bottom: 1em;
3225     padding-bottom: .5em;
3226
3227     h3 {
3228         background-color: #E2E8E8;
3229         color: #727272;
3230         margin-top: 0;
3231         padding: .2em 0;
3232         text-align: center;
3233     }
3234
3235     ul {
3236         list-style-type: none;
3237         margin: 0 0 .2em 0;
3238
3239         a {
3240             display: block;
3241             font-weight: bold;
3242             padding: .2em 1em;
3243         }
3244     }
3245 }
3246
3247
3248 @import "responsive";