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