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     h4 {
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     li {
2080         font-size: 90%;
2081         font-weight: bold;
2082         list-style-type: none;
2083
2084         li {
2085             font-size: 95%;
2086             font-weight: normal;
2087             line-height: 125%;
2088             margin-bottom: 2px;
2089             padding: .1em .2em;
2090         }
2091
2092         &.showmore {
2093             a {
2094                 font-weight: bold;
2095                 text-indent: 1em;
2096             }
2097         }
2098     }
2099
2100     a {
2101         font-weight: normal;
2102         text-decoration: underline;
2103     }
2104
2105     .facet-count {
2106         display: inline-block;
2107     }
2108
2109 }
2110
2111 #menu {
2112     font-size: 94%;
2113
2114     li {
2115         list-style-type: none;
2116
2117         a {
2118             background-color: #F0F3F3;
2119             border: 1px solid #D8D8D8;
2120             border-bottom-color: #999;
2121             display: block;
2122             font-size: 111%;
2123             margin: .4em 0;
2124             margin-right: -1px;
2125             padding: .4em .6em;
2126             text-decoration: none;
2127
2128             &:hover {
2129                 background: #EAEEF5;
2130             }
2131         }
2132
2133         &.active {
2134             a {
2135                 background-color: #FFF;
2136                 background-image: none;
2137                 border-right-width: 0;
2138                 font-weight: bold;
2139
2140                 &:hover {
2141                     background-color: #FFF;
2142                 }
2143             }
2144         }
2145     }
2146
2147     h4 {
2148         display: none;
2149     }
2150 }
2151
2152 #addto {
2153     max-width: 10em;
2154 }
2155
2156 /* Search results add to cart (lists disabled) */
2157
2158 .searchresults {
2159     p {
2160         margin: 0;
2161         padding: 0 0 .6em 0;
2162
2163         &.details {
2164             color: #979797;
2165         }
2166     }
2167
2168     .commentline {
2169         @include border-radius-all( 3px );
2170         @include shadowed;
2171         background-color: rgba( 255, 255, 204, .4 );
2172         border: 1px solid #CCC;
2173         display: inline-block;
2174         margin: .3em;
2175         padding: .4em;
2176
2177         .yours {
2178             background-color: rgba( 239, 254, 213, .4 );
2179         }
2180     }
2181
2182     .commenter {
2183         color: #666;
2184         font-size: 85%;
2185     }
2186 }
2187
2188 .commentline .avatar {
2189     float: right;
2190     padding-left: .5em;
2191 }
2192
2193 /* style for search terms in catalogsearch */
2194 .term {
2195     /* color: blue; */
2196     background-color: #FFFFCC;
2197     color: #990000;
2198 }
2199
2200 /* style for shelving location in catalogsearch */
2201 .shelvingloc {
2202     font-style: italic;
2203 }
2204
2205 #CheckAll,
2206 #CheckNone,
2207 .CheckAll,
2208 .CheckNone {
2209     font-weight: normal;
2210     margin: 0 .5em;
2211     text-decoration: underline;
2212 }
2213
2214 .sep {
2215     color: #888;
2216     padding: 0 .2em 0 .5em;
2217     text-shadow: 1px 1px 0 #FFF;
2218 }
2219
2220 %page-first-child {
2221     border-bottom-left-radius: 3px;
2222     border-top-left-radius: 3px;
2223     border-width: 1px;
2224 }
2225
2226 %page-last-child {
2227     border-bottom-right-radius: 3px;
2228     border-top-right-radius: 3px;
2229     border-width: 1px 1px 1px 0;
2230 }
2231
2232 %page-middle-child {
2233     background-color: #FFFFFF;
2234     border-color: #DDDDDD;
2235     border-image: none;
2236     border-style: solid;
2237     border-width: 1px 1px 1px 0;
2238     float: left;
2239     font-size: 11.9px;
2240     line-height: 20px;
2241     padding: 4px 12px;
2242     text-decoration: none;
2243 }
2244
2245 .pages {
2246     margin: 20px 0;
2247
2248     span {
2249         &:first-child {
2250             @extend %page-first-child;
2251         }
2252
2253         &:last-child {
2254             @extend %page-last-child;
2255         }
2256     }
2257
2258     a {
2259         @extend %page-middle-child;
2260
2261         &:first-child {
2262             @extend %page-first-child;
2263         }
2264
2265         &:last-child {
2266             @extend %page-last-child;
2267         }
2268     }
2269
2270     .inactive {
2271         @extend %page-middle-child;
2272         background-color: #F5F5F5;
2273     }
2274
2275     .currentPage {
2276         @extend %page-middle-child;
2277     }
2278
2279     a[rel='last'] {
2280         border-bottom-right-radius: 3px;
2281         border-top-right-radius: 3px;
2282     }
2283 }
2284
2285 .hold-message {
2286     @include border-radius-all( 3px );
2287     background-color: #FFF0B1;
2288     display: inline-block;
2289     margin: .5em;
2290     padding: .2em .5em;
2291 }
2292
2293 .reserve_date,
2294 .expiration_date {
2295     white-space: nowrap;
2296 }
2297
2298 .close {
2299     color: #0088CC;
2300     filter: none;
2301     float: none;
2302     font-size: inherit;
2303     font-weight: normal;
2304     opacity: inherit;
2305     position: inherit;
2306     right: auto;
2307     text-shadow: none;
2308     top: auto;
2309 }
2310
2311 .close:hover {
2312     color: #005580;
2313     filter: inherit;
2314     font-size: inherit;
2315     opacity: inherit;
2316 }
2317
2318 /* Redefine a new style for Bootstrap's class "close" since we use that already */
2319 /* Use <a class="closebtn" href="#">&times;</a> */
2320
2321 .modal-header .closebtn {
2322     margin-top: 2px;
2323 }
2324
2325 .closebtn {
2326     color: #000000;
2327     float: right;
2328     font-size: 20px;
2329     font-weight: bold;
2330     line-height: 20px;
2331     opacity: .2;
2332     text-shadow: 0 1px 0 #FFFFFF;
2333
2334     &:hover {
2335         color: #000000;
2336         cursor: pointer;
2337         opacity: .4;
2338         text-decoration: none;
2339     }
2340 }
2341
2342 button {
2343     &.btn-link {
2344         color: $links;
2345         &:focus,
2346         &:hover {
2347             color: $links-hover;
2348             text-decoration: none;
2349         }
2350     }
2351
2352     &.closebtn {
2353         background: transparent;
2354         border: 0;
2355         cursor: pointer;
2356         padding: 0;
2357     }
2358
2359     &.remove {
2360         &:hover {
2361             color: #900;
2362
2363             i {
2364                 &.fa {
2365                     color: #c60000;
2366                 }
2367             }
2368         }
2369     }
2370 }
2371
2372 .btn-link {
2373     &.btn-lg {
2374         font-size: 100%;
2375     }
2376 }
2377
2378 .btn.disabled,
2379 .btn[disabled] {
2380     &:hover {
2381         color: #333;
2382         filter: alpha(opacity=65);
2383         opacity: 0.65;
2384     }
2385     i {
2386         &.fa,
2387         &.fa:hover {
2388             color: #333;
2389             filter: alpha(opacity=65);
2390             opacity: 0.65;
2391         }
2392     }
2393 }
2394
2395 .modal {
2396     form {
2397         margin: 0;
2398     }
2399 }
2400
2401 #loginModal {
2402     margin-left: -200px;
2403     width: 400px;
2404
2405     input {
2406         box-sizing: border-box;
2407         display: block;
2408         font-size: 150%;
2409         height: auto;
2410         padding: .4em;
2411         width: 100%;
2412
2413         &[type='submit'] {
2414             font-size: 100%;
2415             padding: .5em;
2416             transition: background-color .5s ease;
2417
2418             &:hover {
2419                 background: #77b50f none;
2420             }
2421         }
2422     }
2423
2424     .closebtn {
2425         color: #C00;
2426         opacity: 1;
2427
2428         &:hover {
2429             opacity: .4;
2430         }
2431     }
2432
2433     .modal-header,
2434     .modal-body,
2435     .modal-footer {
2436         font-size: 120%;
2437         padding: 1em 2em;
2438     }
2439 }
2440
2441 .nologininstructions,
2442 .forgotpassword,
2443 .patronregistration {
2444     padding-top: 1em;
2445 }
2446
2447 .btn-group {
2448     label,
2449     select {
2450         font-size: 13px;
2451     }
2452 }
2453
2454 .span2 select {
2455     width: 100%;
2456 }
2457
2458 .item-status {
2459     display: block;
2460     font-size: 95%;
2461     margin-bottom: .5em;
2462 }
2463
2464 .available {
2465     color: #006600;
2466 }
2467
2468 .unavailable {
2469     color: #990033;
2470 }
2471
2472 .ItemSummary .LabelCallNumber::before {
2473     content: " [";
2474 }
2475
2476 .ItemSummary .CallNumber::after {
2477     content: "]";
2478 }
2479
2480 .waiting,
2481 .intransit,
2482 .notforloan,
2483 .checkedout,
2484 .lost,
2485 .notonhold {
2486     display: block;
2487 }
2488
2489 .notforloan {
2490     color: #900;
2491 }
2492
2493 .lost {
2494     color: #666;
2495 }
2496
2497 .suggestion {
2498     background-color: #F0F3F3;
2499     border: 1px solid #F0F3F3;
2500     color: #727272;
2501     margin: 1em auto;
2502     padding: .5em;
2503     width: 35%;
2504 }
2505
2506 .librarypulldown .transl1 {
2507     width: auto;
2508 }
2509
2510 .nolibrarypulldown {
2511     width: 68%;
2512
2513     .transl1 {
2514         width: 87%;
2515     }
2516 }
2517
2518 #opac-main-search {
2519     select {
2520         max-width: 12em;
2521         width: auto;
2522     }
2523 }
2524
2525 #logo {
2526     background: transparent url( "../images/koha-green-logo.png" ) no-repeat scroll 0%;
2527     border: 0;
2528     float: left !important;
2529     margin: 0;
2530     padding: 0;
2531     width: 100px;
2532
2533     a {
2534         border: 0;
2535         cursor: pointer;
2536         display: block;
2537         height: 0 !important;
2538         margin: 0;
2539         overflow: hidden;
2540         padding: 40px 0 0;
2541         text-decoration: none;
2542         width: 100px;
2543          &:focus {
2544         background-color: transparent;
2545          }
2546     }
2547 }
2548
2549 #user-menu-trigger {
2550     display: none;
2551
2552     i {
2553         padding: 14px 0 0;
2554         width: 14px;
2555     }
2556
2557     .caret {
2558         border-bottom-color: #999999;
2559         border-top-color: #999999;
2560         margin-top: 18px;
2561     }
2562 }
2563
2564 #header-region .icon-white {
2565     background-image: url(/opac-tmpl/bootstrap/lib/bootstrap/img/glyphicons-halflings.png);
2566 }
2567
2568 /* Class to be added to toolbar when it starts being fixed at the top of the screen*/
2569 .floating {
2570     box-shadow: 0 3px 2px 0 rgba( 0, 0, 0, .4 );
2571     margin-top: 0;
2572     z-index: 5;
2573 }
2574
2575 .tdlabel {
2576     display: none;
2577     font-weight: bold;
2578 }
2579
2580 #ulactioncontainer {
2581     min-width: 16em;
2582 }
2583
2584 .notesrow {
2585     label {
2586         font-weight: bold;
2587     }
2588
2589     span {
2590         display: block;
2591     }
2592 }
2593
2594 .thumbnail-shelfbrowser span {
2595     margin: 0 auto;
2596 }
2597
2598 .table {
2599     .sorting_asc {
2600         background: url( "../images/asc.gif" ) no-repeat scroll 100% 80% #E2E8E8;
2601         padding-right: 19px;
2602     }
2603
2604     .sorting_desc {
2605         background: url( "../images/desc.gif" ) no-repeat scroll 100% 80% #E2E8E8;
2606         padding-right: 19px;
2607     }
2608
2609     .sorting {
2610         background: url( "../images/ascdesc.gif" ) no-repeat scroll 100% 75% #E2E8E8;
2611         padding-right: 19px;
2612     }
2613
2614     .nosort,
2615     .nosort.sorting_asc,
2616     .nosort.sorting_desc,
2617     .nosort.sorting {
2618         background: #E2E8E8 none;
2619         padding-right: 19px;
2620     }
2621
2622     th,
2623     td {
2624         line-height: 135%;
2625     }
2626 }
2627
2628 .table-bordered {
2629     border-radius: 0;
2630     thead:first-child tr:first-child > th {
2631         &:last-child {
2632         border-radius: 0;
2633         }
2634         &:first-child {
2635         border-radius: 0;
2636         }
2637     }
2638     tbody:last-child tr:last-child > td {
2639         &:last-child {
2640         border-radius: 0;
2641         }
2642         &:first-child {
2643         border-radius: 0;
2644         }
2645     }
2646 }
2647
2648 .tags,
2649 .shelves {
2650     ul {
2651         display: inline;
2652         list-style: none;
2653         margin-left: 0;
2654
2655         li {
2656             display: inline;
2657         }
2658     }
2659 }
2660
2661 .coverimages {
2662     float: right;
2663 }
2664
2665 #termsList {
2666     label {
2667         display: inline;
2668         vertical-align: middle;
2669     }
2670
2671     ul {
2672         border-bottom: 1px solid #EEE;
2673         list-style-type: none;
2674         margin: 0;
2675         padding: .6em 0;
2676     }
2677
2678     li {
2679         list-style-type: none;
2680         margin: 0;
2681         padding: 0;
2682     }
2683 }
2684
2685
2686 #overdrive-results,
2687 #recordedbooks-results,
2688 #openlibrary-results {
2689     font-weight: bold;
2690     padding-left: 1em;
2691 }
2692
2693 .throbber {
2694     vertical-align: middle;
2695 }
2696
2697 #overdrive-results-list .star-rating-control {
2698     display: block;
2699     overflow: auto;
2700 }
2701
2702 #shelfbrowser {
2703     table {
2704         margin: 0;
2705     }
2706
2707     table,
2708     td,
2709     th {
2710         border: 0;
2711         font-size: 90%;
2712         text-align: center;
2713     }
2714
2715     td,
2716     th {
2717         padding: 3px 5px;
2718         width: 20%;
2719
2720         &.nav-cell {
2721             padding: 0;
2722             vertical-align: middle;
2723             width: 1em;
2724         }
2725     }
2726
2727     a {
2728         display: block;
2729         font-size: 110%;
2730         font-weight: bold;
2731         text-decoration: none;
2732     }
2733
2734     #browser_previous {
2735         a {
2736             transform: rotate(-90deg);
2737             white-space: nowrap;
2738
2739             i {
2740                 padding: 0 .5em;
2741             }
2742         }
2743     }
2744
2745     #browser_next {
2746         a {
2747             transform: rotate(90deg);
2748             white-space: nowrap;
2749
2750             i {
2751                 padding: 0 .5em;
2752             }
2753         }
2754     }
2755 }
2756
2757 #holds {
2758     margin: 0 auto;
2759     max-width: 800px;
2760 }
2761
2762 .holdrow {
2763     border-bottom: 1px solid #CCC;
2764     clear: both;
2765     margin-bottom: .5em;
2766     padding: 0 1em 1em 1em;
2767
2768     fieldset {
2769         border: 0;
2770         float: none;
2771         margin: 0;
2772
2773         .label {
2774             font-size: 14px;
2775         }
2776     }
2777
2778     label {
2779         display: inline;
2780     }
2781 }
2782
2783 .hold-options {
2784     clear: both;
2785 }
2786
2787 .toggle-hold-options {
2788     background-color: #EEE;
2789     clear: both;
2790     display: block;
2791     font-weight: bold;
2792     margin: 1em 0;
2793     padding: .5em;
2794 }
2795
2796 .copiesrow {
2797     clear: both;
2798 }
2799
2800 #idreambooksreadometer {
2801     float: right;
2802 }
2803
2804 .idreambookslegend {
2805     font-size: small;
2806 }
2807
2808 .idreambookssummary {
2809     a {
2810         color: #707070;
2811         text-decoration: none;
2812     }
2813
2814     img {
2815         vertical-align: middle;
2816     }
2817 }
2818
2819 .idbresult {
2820     color: #29ADE4;
2821     margin: .5em;
2822     padding: .5em;
2823     text-align: center;
2824
2825     img {
2826         padding-right: 6px;
2827         vertical-align: middle;
2828     }
2829
2830     a,
2831     a:visited {
2832         text-decoration: none;
2833         color: #29ADE4;
2834     }
2835 }
2836
2837 .js-show {
2838     display: none;
2839 }
2840
2841 .modal-nojs {
2842     .modal-header,
2843     .modal-footer {
2844         display: none;
2845     }
2846 }
2847
2848 .contents {
2849     width: 75%;
2850
2851     .t:first-child::before {
2852         content: "→ ";
2853     }
2854
2855     .t::before {
2856         content: "\A → ";
2857         white-space: pre;
2858     }
2859
2860     .t {
2861         font-weight: bold;
2862         display: inline;
2863     }
2864
2865     .r {
2866         display: inline;
2867     }
2868 }
2869
2870
2871 .contentblock {
2872     font-size: 95%;
2873     line-height: 135%;
2874     margin-left: 2em;
2875     position: relative;
2876 }
2877
2878 .m880 {
2879     display: block;
2880     float: right;
2881     padding-left: 20px;
2882     text-align: right;
2883     width: 50%;
2884 }
2885
2886 #memberentry-form {
2887     input.error {
2888         border-color: #C00;
2889         box-shadow: 0 1px 1px #C00 inset, 0 0 8px #C00;
2890         color: #F00;
2891         outline: 0 none;
2892
2893         &:focus {
2894             border-color: #C00;
2895             box-shadow: 0 1px 1px #C00 inset, 0 0 8px #C00;
2896             color: #F00;
2897             outline: 0 none;
2898         }
2899
2900         label.error {
2901             color: #C00;
2902             float: none;
2903             font-size: 90%;
2904         }
2905     }
2906 }
2907
2908
2909 #illrequests {
2910     .illrequest-actions {
2911         margin-bottom: 20px;
2912         padding-top: 20px;
2913
2914         .btn,
2915         .cancel {
2916             margin-right: 5px;
2917         }
2918     }
2919
2920     #illrequests-create-button {
2921         margin-bottom: 20px;
2922     }
2923
2924     .bg-info {
2925         overflow: auto;
2926         position: relative;
2927
2928         #search-summary {
2929             position: absolute;
2930             top: 50%;
2931             transform: translateY( -50% );
2932         }
2933
2934     }
2935
2936     #freeform-fields .custom-name {
2937         float: left;
2938         margin-right: 1em;
2939         text-align: right;
2940         width: 8em;
2941     }
2942
2943     .dropdown:hover .dropdown-menu.nojs {
2944         display: block;
2945     }
2946
2947 }
2948
2949 .ill_availability_sourcename {
2950     margin-top: 20px;
2951 }
2952
2953 #continue-request-row {
2954     text-align: center;
2955 }
2956
2957 #dc_fieldset {
2958     border: 1px solid #DDDDDD;
2959     border-radius: 10px;
2960     border-width: 1px;
2961     padding: 5px;
2962 }
2963
2964 .label_dc {
2965     cursor: pointer;
2966     display: inline;
2967     margin: 0;
2968     padding: 0;
2969 }
2970
2971 .btn-danger {
2972     color: white !important;
2973 }
2974
2975 .count_label {
2976     $base: #369;
2977     background-color: $base;
2978     border-radius: 5px;
2979     color: #FFF;
2980     display: inline-block;
2981     font-weight: bold;
2982     min-width: 1.5em;
2983     padding: .2em;
2984     text-align: center;
2985     text-shadow: 0 -1px 0 rgba( 0, 0, 0, .25 );
2986
2987     &:hover {
2988         background-color: lighten( $base, 20% );
2989     }
2990 }
2991
2992 .user_overdues_count,
2993 .user_fines_count {
2994     background-color: #990000;
2995
2996     &:hover {
2997         background-color: lighten( #990000, 10% );
2998     }
2999 }
3000
3001 .user_holds_waiting_count {
3002     background-color: #538200;
3003
3004     &:hover {
3005         background-color: lighten( #538200, 10% );
3006     }
3007 }
3008
3009 #user_summary {
3010     border: 1px solid #EAEAE6;
3011     margin-bottom: 1em;
3012     padding-bottom: .5em;
3013
3014     h3 {
3015         background-color: #E2E8E8;
3016         color: #727272;
3017         margin-top: 0;
3018         padding: .2em 0;
3019         text-align: center;
3020     }
3021
3022     ul {
3023         list-style-type: none;
3024         margin: 0 0 .2em 0;
3025
3026         a {
3027             display: block;
3028             font-weight: bold;
3029             padding: .2em 1em;
3030         }
3031     }
3032 }
3033
3034 .adlibris-cover {
3035     max-height: 120px;
3036 }
3037
3038 .adlibris-cover-big {
3039     max-height: 200px;
3040 }
3041
3042 /* jQuery Bar Rating plugin for star ratings */
3043
3044 $star-default: #D2D2D2;
3045 $star-active: #C24A4A;
3046 $star-selected: #EDB867;
3047
3048 .br-wrapper {
3049     display: inline-block;
3050 }
3051
3052 .br-theme-fontawesome-stars {
3053
3054     .br-widget {
3055         height: 28px;
3056         white-space: nowrap;
3057
3058         a {
3059             -webkit-font-smoothing: antialiased;
3060             font: normal normal normal 20px/1 FontAwesome;
3061             margin-right: 2px;
3062             text-decoration: none;
3063             text-rendering: auto;
3064
3065             &::after {
3066                 color: $star-default;
3067                 content: "\f005";
3068             }
3069
3070             &.br-active {
3071                 &::after {
3072                     color: $star-active;
3073                 }
3074             }
3075
3076             &.br-selected {
3077                 &::after {
3078                     color: $star-selected;
3079                 }
3080             }
3081         }
3082
3083
3084         .br-current-rating {
3085             display: none;
3086         }
3087     }
3088
3089     .br-readonly {
3090         a {
3091             cursor: default;
3092         }
3093     }
3094
3095 }
3096
3097 #cancel_rating_text {
3098     a {
3099         color: #C24A4A;
3100     }
3101 }
3102
3103 @media print {
3104     .br-theme-fontawesome-stars {
3105
3106         .br-widget {
3107             a {
3108                 &::after {
3109                     color: #000000;
3110                     content: "\f006";
3111                 }
3112
3113                 &.br-active::after,
3114                 &.br-selected::after {
3115                     color: #000000;
3116                     content: "\f005";
3117                 }
3118             }
3119
3120         }
3121
3122     }
3123 }
3124
3125 /* END jQuery Bar Rating plugin for star ratings */
3126
3127 #qrcode {
3128     margin-left: 35px;
3129
3130     img,
3131     canvas {
3132         margin-top: 1em;
3133     }
3134 }
3135
3136 /*opac browse search*/
3137 #browse-search {
3138
3139     form {
3140         label {
3141             display: inline-block;
3142             margin-right:5px;
3143         }
3144
3145         [type=submit] {
3146             margin-top: 10px;
3147         }
3148     }
3149
3150     #browse-resultswrapper {
3151        margin-top: 4em;
3152
3153         @media (min-width: 768px) and (max-width: 984px) {
3154             margin-top: 2em;
3155         }
3156
3157         @media (max-width: 767px) {
3158             margin-top: 1em;
3159         }
3160     }
3161     #browse-searchresults, #browse-selectionsearch {
3162         border: 1px solid #E3E3E3;
3163         border-radius: 4px;
3164         padding: 0;
3165         overflow-y: auto;
3166         max-height: 31em;
3167         margin-bottom: 2em;
3168     }
3169     #browse-searchresults {
3170         max-height: 31em;
3171         list-style: none;
3172         padding: 10px;
3173
3174         a {
3175             display: block;
3176             margin-bottom: 5px;
3177
3178             &.selected {
3179                 background-color:#EEE;
3180             }
3181         }
3182
3183         li:last-child a {
3184             margin-bottom: 0;
3185         }
3186
3187         @media (max-width: 767px) {
3188             max-height: 13em;
3189         }
3190     }
3191     #browse-selection {
3192         margin-top: -40px;
3193         padding-top: 0;
3194
3195         @media (max-width: 767px) {
3196             margin-top: 0;
3197         }
3198     }
3199     #browse-selectionsearch ol {
3200         list-style: none;
3201         margin: 0;
3202
3203         li {
3204             padding: 1em;
3205
3206             &:nth-child(odd) {
3207                 background-color: #F4F4F4;
3208             }
3209         }
3210     }
3211    #browse-selectionsearch p.subjects {
3212         font-size: 0.9em;
3213         margin-bottom: 0;
3214     }
3215     #browse-selectionsearch h4 {
3216         margin: 0;
3217     }
3218     .error, .no-results {
3219         background-color: #EEE;
3220         border: 1px solid #E8E8E8;
3221         text-align: left;
3222         padding: 0.5em;
3223         border-radius: 3px;
3224     }
3225     .loading {
3226         text-align: center;
3227
3228         img {
3229             margin:0.5em 0;
3230             position: relative;
3231             left: -5px;
3232         }
3233     }
3234 }
3235 /*end browse search*/
3236
3237 @import "responsive";