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

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