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     #sorting-form {
  29         display: none;
  30     }
  31 }
  32
  33 .fa {
  34     &.fa-icon-black,
  35     &.fa-icon-white {
  36         color: #000;
  37     }
  38
  39     &.danger {
  40         color: #C00;
  41     }
  42 }
  43
  44 .popup {
  45     padding-left: 0;
  46     padding-right: 0;
  47
  48     .main {
  49         font-size: 90%;
  50         padding: 0 1em;
  51     }
  52
  53     legend {
  54         line-height: 1.5em;
  55         margin-bottom: .5em;
  56     }
  57 }
  58
  59 a {
  60     color: $links;
  61
  62     &.cancel {
  63         padding-left: 1em;
  64     }
  65
  66     &:visited {
  67         color: $links;
  68     }
  69
  70     &.title {
  71         font-size: 108%;
  72         font-weight: bold;
  73     }
  74
  75     &.btn-link {
  76         &:focus,
  77         &:hover {
  78             text-decoration: none;
  79         }
  80     }
  81
  82     &.login-link {
  83         color: #005580;
  84         font-weight: bold;
  85
  86         &.loginModal-trigger {
  87             color: #85ca11;
  88         }
  89     }
  90
  91     .idreambooksrating {
  92         color: #29ADE4;
  93         font-size: 30px;
  94         line-height: 30px;
  95         padding-left: 85px;
  96         text-decoration: none;
  97     }
  98
  99     &.reviewlink,
 100     &.reviewlink:visited {
 101         color: black;
 102         font-weight: normal;
 103         text-decoration: none;
 104     }
 105
 106     &.OpenURL img {
 107         vertical-align: middle;
 108     }
 109
 110     &.brief {
 111
 112         padding-left: 27px;
 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             color: #006699;
 837
 838             &:link {
 839                 color: #006699;
 840             }
 841
 842             &:visited {
 843                 color: #006699;
 844             }
 845         }
 846     }
 847
 848     .ui-state-hover a {
 849         color: #990033;
 850
 851         &:link {
 852             color: #990033;
 853         }
 854
 855         &:visited {
 856             color: #990033;
 857         }
 858     }
 859 }
 860
 861 .ui-tabs-nav {
 862     &.ui-widget-header {
 863         background: none;
 864         border: 0;
 865     }
 866 }
 867
 868 .ui-corner-top {
 869     border-radius: 0px;
 870 }
 871
 872 .statictabs {
 873     ul {
 874         background: none repeat scroll 0 0 transparent;
 875         border: 0 none;
 876         border-bottom-left-radius: 4px;
 877         border-bottom-right-radius: 4px;
 878         border-top-left-radius: 4px;
 879         border-top-right-radius: 4px;
 880         color: #222222;
 881         font-size: 100%;
 882         font-weight: bold;
 883         line-height: 1.3;
 884         list-style: none outside none;
 885         margin: 0;
 886         outline: 0 none;
 887         padding: .2em .2em 0;
 888         text-decoration: none;
 889
 890         &::before {
 891             content: "";
 892             display: table;
 893         }
 894
 895         &::after {
 896             clear: both;
 897             content: "";
 898             display: table;
 899         }
 900     }
 901
 902     li {
 903         background: none repeat scroll 0 0 #E6F0F2;
 904         border: 1px solid #B9D8D9;
 905         border-bottom: 0 none !important;
 906         border-top-left-radius: 4px;
 907         border-top-right-radius: 4px;
 908         color: #555555;
 909         float: left;
 910         font-weight: normal;
 911         list-style: none outside none;
 912         margin-bottom: 0;
 913         margin-right: .4em;
 914         padding: 0;
 915         position: relative;
 916         top: 1px;
 917         white-space: nowrap;
 918
 919         &.active {
 920             background-color: #FFFFFF;
 921             color: #212121;
 922             font-weight: normal;
 923             padding-bottom: 1px;
 924
 925             a {
 926                 background: none repeat scroll 0 0 transparent;
 927                 color: #000000;
 928                 cursor: text;
 929                 font-weight: bold;
 930                 outline: 0 none;
 931             }
 932         }
 933
 934         a {
 935             color: #004D99;
 936             cursor: pointer;
 937             float: left;
 938             padding: .5em 1em;
 939             text-decoration: none;
 940
 941             &:hover {
 942                 background-color: #EDF4F5;
 943                 border-top-left-radius: 4px;
 944                 border-top-right-radius: 4px;
 945                 color: #538200;
 946             }
 947         }
 948     }
 949
 950     .tabs-container {
 951         background: none repeat scroll 0 0 transparent;
 952         border: 1px solid #B9D8D9;
 953         border-bottom-left-radius: 4px;
 954         border-bottom-right-radius: 4px;
 955         color: #222222;
 956         display: block;
 957         padding: 1em 1.4em;
 958     }
 959 }
 960
 961 /* End jQueryUI tab styles */
 962
 963 /* jQuery UI Datepicker */
 964
 965 .ui-datepicker {
 966     @include shadowed;
 967     table {
 968         border: 0;
 969         border-collapse: collapse;
 970         font-size: .9em;
 971         margin: 0 0 .4em;
 972         width: 100%;
 973     }
 974
 975     th {
 976         background: transparent none;
 977         border: 0;
 978         font-weight: bold;
 979         padding: .7em .3em;
 980         text-align: center;
 981     }
 982 }
 983
 984 .ui-datepicker-trigger {
 985     margin: 0 3px;
 986     vertical-align: middle;
 987 }
 988
 989 /* End jQueryUI datepicker styles */
 990
 991
 992 /* jQueryUI Core */
 993
 994 .ui-widget-content {
 995     background: #FFFFFF none;
 996     border: 1px solid #AAA;
 997     color: #222222;
 998
 999     a,
1000     a:visited {
1001         color: $links;
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 .nav_pages {
1653     border-top: 1px solid #DDD;
1654     padding: .6em;
1655
1656     ul {
1657         display: inline-block;
1658         margin: 0;
1659         padding: 0;
1660     }
1661
1662     li {
1663         color: #999;
1664         list-style: none;
1665         padding: 4px;
1666
1667         a {
1668             &:hover {
1669                 text-decoration: underline;
1670             }
1671         }
1672     }
1673 }
1674
1675 /* action buttons */
1676 #action {
1677     background-color: #F0F3F3;
1678     border: 1px solid #E8E8E8;
1679     margin: .5em 0 0 0;
1680     padding: .5em;
1681
1682     li {
1683         list-style: none;
1684         margin: .2em;
1685         padding: .2em 0;
1686     }
1687
1688     a {
1689         font-weight: bold;
1690         text-decoration: none;
1691         text-align: left;
1692     }
1693 }
1694
1695 #export,
1696 #moresearches_menu {
1697     li {
1698         margin: 0;
1699         padding: 0;
1700
1701         a {
1702             font-weight: normal;
1703
1704             &.menu-inactive {
1705                 font-weight: bold;
1706             }
1707         }
1708     }
1709 }
1710
1711 .highlight_controls {
1712     float: left;
1713     margin-top: 3px;
1714 }
1715
1716 input {
1717     &.hold {
1718
1719         &.disabled {
1720
1721         }
1722     }
1723
1724     &.editshelf {
1725
1726         &:active {
1727
1728         }
1729     }
1730 }
1731
1732 .newshelf {
1733
1734     &.disabled {
1735     }
1736 }
1737
1738 .links a {
1739     font-weight: bold;
1740 }
1741
1742 #tagslist li {
1743     display: inline;
1744 }
1745
1746 .tag_results_input {
1747     font-size: 12px;
1748     margin-left: 1em;
1749     padding: .3em;
1750
1751     input[type="text"] {
1752         font-size: inherit;
1753         margin: 0;
1754         padding: 0;
1755     }
1756
1757     label {
1758         display: inline;
1759     }
1760 }
1761
1762 .tagsinput {
1763     input[type="text"] {
1764         font-size: inherit;
1765         margin: 0;
1766         padding: 0;
1767     }
1768
1769     label {
1770         display: inline;
1771     }
1772 }
1773
1774 .branch-info-tooltip {
1775     display: none;
1776 }
1777
1778 .ui-tooltip-content p {
1779     margin: .3em 0;
1780 }
1781
1782 #social_networks {
1783     margin-top: .5em;
1784
1785     a {
1786         border: 1px solid transparent;
1787         border-radius: 4px;
1788         display: inline-block;
1789         min-width: 1em;
1790         padding: .5em;
1791         text-align: center;
1792     }
1793
1794     a:hover,
1795     a:active {
1796         border: 1px solid #EEE;
1797     }
1798
1799     span {
1800         color: #274D7F;
1801         display: block;
1802         float: left;
1803         font-size: 85%;
1804         font-weight: bold;
1805         line-height: 2em;
1806         margin: .5em;
1807     }
1808
1809     div {
1810         float: left;
1811     }
1812
1813     #facebook {
1814         color: #4267B2;
1815     }
1816
1817     #twitter {
1818         color: #1DA1F2;
1819     }
1820
1821     #linkedin {
1822         color: #0073b0;
1823     }
1824
1825     #email {
1826         color: #666;
1827     }
1828 }
1829
1830 #marc {
1831     td,
1832     th {
1833         background-color: transparent;
1834         border: 0;
1835         padding: 3px 5px;
1836         text-align: left;
1837     }
1838
1839     td:first-child {
1840         text-indent: 2em;
1841     }
1842
1843     p {
1844         padding-bottom: .6em;
1845
1846         .label {
1847             font-weight: bold;
1848         }
1849     }
1850
1851     ul {
1852         padding-bottom: .6em;
1853     }
1854
1855     .results_summary {
1856         clear: left;
1857
1858         ul {
1859             clear: none;
1860             display: inline;
1861             float: none;
1862             list-style: none;
1863             margin: 0;
1864             padding: 0;
1865         }
1866
1867         li {
1868             display: inline;
1869         }
1870     }
1871 }
1872
1873 #items,
1874 #items td,
1875 #items th {
1876     border: 1px solid #EEE;
1877     font-size: 90%;
1878 }
1879
1880 #plainmarc {
1881     table {
1882         border: 0;
1883         font-family: monospace;
1884         font-size: 95%;
1885         margin: .7em 0 0;
1886     }
1887
1888     th {
1889         background-color: #FFF;
1890         border: 0;
1891         padding: 2px;
1892         text-align: left;
1893         vertical-align: top;
1894         white-space: nowrap;
1895     }
1896
1897     td {
1898         border: 0;
1899         padding: 2px;
1900         vertical-align: top;
1901     }
1902 }
1903
1904 #renewcontrols {
1905     float: right;
1906     font-size: 66%;
1907 }
1908
1909 #renewall_link {
1910     i:first-child {
1911         left: 5px;
1912     }
1913 }
1914
1915 .authref {
1916     text-indent: 2em;
1917
1918     .label {
1919         font-style: italic;
1920     }
1921 }
1922
1923 .authstanza {
1924     margin-top: 1em;
1925
1926     li {
1927         margin-left: .5em;
1928     }
1929 }
1930
1931 .authstanzaheading {
1932     font-weight: bold;
1933 }
1934
1935 .authorizedheading {
1936     font-weight: bold;
1937 }
1938
1939 .authres_notes,
1940 .authres_seealso,
1941 .authres_otherscript {
1942     padding-top: .5em;
1943 }
1944
1945 .authres_notes {
1946     font-style: italic;
1947 }
1948
1949 #didyoumean {
1950     @include border-radius-all( 3px );
1951     background-color: #EEE;
1952     border: 1px solid #E8E8E8;
1953     box-sizing: border-box;
1954     margin: .5em 1.5em;
1955     padding: .5em;
1956     text-align: left;
1957
1958     &.dym-loaded {
1959         background-color: #FFFBEA;
1960         border-color: #F4ECBE;
1961     }
1962 }
1963
1964 .suggestionlabel {
1965     font-weight: bold;
1966 }
1967
1968 .searchsuggestion {
1969     display: inline-block;
1970     padding: .2em .5em;
1971 }
1972
1973 .authlink {
1974     padding-left: .25em;
1975 }
1976
1977 #hierarchies {
1978     a {
1979         color: #069;
1980         font-weight: normal;
1981         text-decoration: underline;
1982
1983         &:hover {
1984             color: #990033;
1985         }
1986     }
1987 }
1988
1989 #top-pages {
1990     margin: 0 0 .5em;
1991 }
1992
1993 .dropdown-menu {
1994     border-radius: 0px;
1995     > li {
1996         > a {
1997             font-size: 90%;
1998             &:hover {
1999                 background: #85ca11 none;
2000             }
2001             &:focus {
2002             background: #85ca11 none;
2003             }
2004         }
2005     }
2006 }
2007
2008 #cartDetails,
2009 #cartUpdate,
2010 #holdDetails {
2011     background-color: #FFF;
2012     border: 1px solid rgba( 0, 0, 0, .2 );
2013     border-radius: 6px;
2014     box-shadow: 0 5px 10px rgba( 0, 0, 0, .2 );
2015     color: black;
2016     display: none;
2017     font-size: 90%;
2018     margin: 0;
2019     padding: 8px 20px;
2020     text-align: center;
2021     width: 180px;
2022     z-index: 2;
2023 }
2024
2025 #cartmenulink {
2026     white-space: nowrap;
2027 }
2028
2029 #search-facets,
2030 #menu {
2031     border: 1px solid #D2D2CF;
2032
2033     ul {
2034         margin: 0;
2035         padding: .3em;
2036     }
2037
2038     form {
2039         margin: 0;
2040     }
2041
2042     h4 {
2043         font-size: 90%;
2044         margin: 0 0 .6em 0;
2045         text-align: center;
2046
2047         a {
2048             background-color: #F0F3F3;
2049             border-bottom: 1px solid #D8D8D8;
2050                         display: block;
2051             font-weight: bold;
2052             padding: .7em .2em;
2053             text-decoration: none;
2054         }
2055     }
2056
2057     li {
2058         font-size: 90%;
2059         font-weight: bold;
2060         list-style-type: none;
2061
2062         li {
2063             font-size: 95%;
2064             font-weight: normal;
2065             line-height: 125%;
2066             margin-bottom: 2px;
2067             padding: .1em .2em;
2068         }
2069
2070         &.showmore {
2071             a {
2072                 font-weight: bold;
2073                 text-indent: 1em;
2074             }
2075         }
2076     }
2077
2078     a {
2079         font-weight: normal;
2080         text-decoration: underline;
2081     }
2082
2083     .facet-count {
2084         display: inline-block;
2085     }
2086
2087 }
2088
2089 #menu {
2090     font-size: 94%;
2091
2092     li {
2093         list-style-type: none;
2094
2095         a {
2096             background-color: #F0F3F3;
2097             border: 1px solid #D8D8D8;
2098             border-bottom-color: #999;
2099             display: block;
2100             font-size: 111%;
2101             margin: .4em 0;
2102             margin-right: -1px;
2103             padding: .4em .6em;
2104             text-decoration: none;
2105
2106             &:hover {
2107                 background: #EAEEF5;
2108             }
2109         }
2110
2111         &.active {
2112             a {
2113                 background-color: #FFF;
2114                 background-image: none;
2115                 border-right-width: 0;
2116                 font-weight: bold;
2117
2118                 &:hover {
2119                     background-color: #FFF;
2120                 }
2121             }
2122         }
2123     }
2124
2125     h4 {
2126         display: none;
2127     }
2128 }
2129
2130 #addto {
2131     max-width: 10em;
2132 }
2133
2134 /* Search results add to cart (lists disabled) */
2135
2136 .searchresults {
2137     p {
2138         margin: 0;
2139         padding: 0 0 .6em 0;
2140
2141         &.details {
2142             color: #979797;
2143         }
2144     }
2145
2146     .commentline {
2147         @include border-radius-all( 3px );
2148         @include shadowed;
2149         background-color: rgba( 255, 255, 204, .4 );
2150         border: 1px solid #CCC;
2151         display: inline-block;
2152         margin: .3em;
2153         padding: .4em;
2154
2155         .yours {
2156             background-color: rgba( 239, 254, 213, .4 );
2157         }
2158     }
2159
2160     .commenter {
2161         color: #666;
2162         font-size: 85%;
2163     }
2164 }
2165
2166 .commentline .avatar {
2167     float: right;
2168     padding-left: .5em;
2169 }
2170
2171 /* style for search terms in catalogsearch */
2172 .term {
2173     /* color: blue; */
2174     background-color: #FFFFCC;
2175     color: #990000;
2176 }
2177
2178 /* style for shelving location in catalogsearch */
2179 .shelvingloc {
2180     font-style: italic;
2181 }
2182
2183 #CheckAll,
2184 #CheckNone,
2185 .CheckAll,
2186 .CheckNone {
2187     font-weight: normal;
2188     margin: 0 .5em;
2189     text-decoration: underline;
2190 }
2191
2192 .sep {
2193     color: #888;
2194     padding: 0 .2em 0 .5em;
2195     text-shadow: 1px 1px 0 #FFF;
2196 }
2197
2198 %page-first-child {
2199     border-bottom-left-radius: 3px;
2200     border-top-left-radius: 3px;
2201     border-width: 1px;
2202 }
2203
2204 %page-last-child {
2205     border-bottom-right-radius: 3px;
2206     border-top-right-radius: 3px;
2207     border-width: 1px 1px 1px 0;
2208 }
2209
2210 %page-middle-child {
2211     background-color: #FFFFFF;
2212     border-color: #DDDDDD;
2213     border-image: none;
2214     border-style: solid;
2215     border-width: 1px 1px 1px 0;
2216     float: left;
2217     font-size: 11.9px;
2218     line-height: 20px;
2219     padding: 4px 12px;
2220     text-decoration: none;
2221 }
2222
2223 .pages {
2224     margin: 20px 0;
2225
2226     span {
2227         &:first-child {
2228             @extend %page-first-child;
2229         }
2230
2231         &:last-child {
2232             @extend %page-last-child;
2233         }
2234     }
2235
2236     a {
2237         @extend %page-middle-child;
2238
2239         &:first-child {
2240             @extend %page-first-child;
2241         }
2242
2243         &:last-child {
2244             @extend %page-last-child;
2245         }
2246     }
2247
2248     .inactive {
2249         @extend %page-middle-child;
2250         background-color: #F5F5F5;
2251     }
2252
2253     .currentPage {
2254         @extend %page-middle-child;
2255     }
2256
2257     a[rel='last'] {
2258         border-bottom-right-radius: 3px;
2259         border-top-right-radius: 3px;
2260     }
2261 }
2262
2263 .hold-message {
2264     @include border-radius-all( 3px );
2265     background-color: #FFF0B1;
2266     display: inline-block;
2267     margin: .5em;
2268     padding: .2em .5em;
2269 }
2270
2271 .reserve_date,
2272 .expiration_date {
2273     white-space: nowrap;
2274 }
2275
2276 .close {
2277     color: #0088CC;
2278     filter: none;
2279     float: none;
2280     font-size: inherit;
2281     font-weight: normal;
2282     opacity: inherit;
2283     position: inherit;
2284     right: auto;
2285     text-shadow: none;
2286     top: auto;
2287 }
2288
2289 .close:hover {
2290     color: #005580;
2291     filter: inherit;
2292     font-size: inherit;
2293     opacity: inherit;
2294 }
2295
2296 /* Redefine a new style for Bootstrap's class "close" since we use that already */
2297 /* Use <a class="closebtn" href="#">&times;</a> */
2298
2299 .modal-header .closebtn {
2300     margin-top: 2px;
2301 }
2302
2303 .closebtn {
2304     color: #000000;
2305     float: right;
2306     font-size: 20px;
2307     font-weight: bold;
2308     line-height: 20px;
2309     opacity: .2;
2310     text-shadow: 0 1px 0 #FFFFFF;
2311
2312     &:hover {
2313         color: #000000;
2314         cursor: pointer;
2315         opacity: .4;
2316         text-decoration: none;
2317     }
2318 }
2319
2320 button {
2321     &.btn-link {
2322         &:focus,
2323         &:hover {
2324             text-decoration: none;
2325         }
2326     }
2327
2328     &.closebtn {
2329         background: transparent;
2330         border: 0;
2331         cursor: pointer;
2332         padding: 0;
2333     }
2334
2335     &.remove {
2336         &:hover {
2337             color: #900;
2338
2339             i {
2340                 &.fa {
2341                     color: #c60000;
2342                 }
2343             }
2344         }
2345     }
2346 }
2347
2348 .btn-link {
2349     &.btn-lg {
2350         font-size: 100%;
2351     }
2352 }
2353
2354 .btn.disabled,
2355 .btn[disabled] {
2356     &:hover {
2357         color: #333;
2358         filter: alpha(opacity=65);
2359         opacity: 0.65;
2360     }
2361     i {
2362         &.fa,
2363         &.fa:hover {
2364             color: #333;
2365             filter: alpha(opacity=65);
2366             opacity: 0.65;
2367         }
2368     }
2369 }
2370
2371 .modal {
2372     form {
2373         margin: 0;
2374     }
2375 }
2376
2377 #loginModal {
2378     margin-left: -200px;
2379     width: 400px;
2380
2381     input {
2382         box-sizing: border-box;
2383         display: block;
2384         font-size: 150%;
2385         height: auto;
2386         padding: .4em;
2387         width: 100%;
2388
2389         &[type='submit'] {
2390             font-size: 100%;
2391             padding: .5em;
2392             transition: background-color .5s ease;
2393
2394             &:hover {
2395                 background: #77b50f none;
2396             }
2397         }
2398     }
2399
2400     .closebtn {
2401         color: #C00;
2402         opacity: 1;
2403
2404         &:hover {
2405             opacity: .4;
2406         }
2407     }
2408
2409     .modal-header,
2410     .modal-body,
2411     .modal-footer {
2412         font-size: 120%;
2413         padding: 1em 2em;
2414     }
2415 }
2416
2417 .nologininstructions,
2418 .forgotpassword,
2419 .patronregistration {
2420     padding-top: 1em;
2421 }
2422
2423 .btn-group {
2424     label,
2425     select {
2426         font-size: 13px;
2427     }
2428 }
2429
2430 .span2 select {
2431     width: 100%;
2432 }
2433
2434 .item-status {
2435     display: block;
2436     font-size: 95%;
2437     margin-bottom: .5em;
2438 }
2439
2440 .available {
2441     color: #006600;
2442 }
2443
2444 .unavailable {
2445     color: #990033;
2446 }
2447
2448 .ItemSummary .LabelCallNumber::before {
2449     content: " [";
2450 }
2451
2452 .ItemSummary .CallNumber::after {
2453     content: "]";
2454 }
2455
2456 .waiting,
2457 .intransit,
2458 .notforloan,
2459 .checkedout,
2460 .lost,
2461 .notonhold {
2462     display: block;
2463 }
2464
2465 .notforloan {
2466     color: #900;
2467 }
2468
2469 .lost {
2470     color: #666;
2471 }
2472
2473 .suggestion {
2474     background-color: #F0F3F3;
2475     border: 1px solid #F0F3F3;
2476     color: #727272;
2477     margin: 1em auto;
2478     padding: .5em;
2479     width: 35%;
2480 }
2481
2482 .librarypulldown .transl1 {
2483     width: auto;
2484 }
2485
2486 .nolibrarypulldown {
2487     width: 68%;
2488
2489     .transl1 {
2490         width: 87%;
2491     }
2492 }
2493
2494 #opac-main-search {
2495     select {
2496         max-width: 12em;
2497         width: auto;
2498     }
2499 }
2500
2501 #logo {
2502     background: transparent url( "../images/koha-green-logo.png" ) no-repeat scroll 0%;
2503     border: 0;
2504     float: left !important;
2505     margin: 0;
2506     padding: 0;
2507     width: 100px;
2508
2509     a {
2510         border: 0;
2511         cursor: pointer;
2512         display: block;
2513         height: 0 !important;
2514         margin: 0;
2515         overflow: hidden;
2516         padding: 40px 0 0;
2517         text-decoration: none;
2518         width: 100px;
2519          &:focus {
2520         background-color: transparent;
2521          }
2522     }
2523 }
2524
2525 #user-menu-trigger {
2526     display: none;
2527
2528     i {
2529         padding: 14px 0 0;
2530         width: 14px;
2531     }
2532
2533     .caret {
2534         border-bottom-color: #999999;
2535         border-top-color: #999999;
2536         margin-top: 18px;
2537     }
2538 }
2539
2540 #header-region .icon-white {
2541     background-image: url(/opac-tmpl/bootstrap/lib/bootstrap/img/glyphicons-halflings.png);
2542 }
2543
2544 /* Class to be added to toolbar when it starts being fixed at the top of the screen*/
2545 .floating {
2546     box-shadow: 0 3px 2px 0 rgba( 0, 0, 0, .4 );
2547     margin-top: 0;
2548     z-index: 5;
2549 }
2550
2551 .tdlabel {
2552     display: none;
2553     font-weight: bold;
2554 }
2555
2556 #ulactioncontainer {
2557     min-width: 16em;
2558 }
2559
2560 .notesrow {
2561     label {
2562         font-weight: bold;
2563     }
2564
2565     span {
2566         display: block;
2567     }
2568 }
2569
2570 .thumbnail-shelfbrowser span {
2571     margin: 0 auto;
2572 }
2573
2574 .table {
2575     .sorting_asc {
2576         background: url( "../images/asc.gif" ) no-repeat scroll 100% 80% #E2E8E8;
2577         padding-right: 19px;
2578     }
2579
2580     .sorting_desc {
2581         background: url( "../images/desc.gif" ) no-repeat scroll 100% 80% #E2E8E8;
2582         padding-right: 19px;
2583     }
2584
2585     .sorting {
2586         background: url( "../images/ascdesc.gif" ) no-repeat scroll 100% 75% #E2E8E8;
2587         padding-right: 19px;
2588     }
2589
2590     .nosort,
2591     .nosort.sorting_asc,
2592     .nosort.sorting_desc,
2593     .nosort.sorting {
2594         background: #E2E8E8 none;
2595         padding-right: 19px;
2596     }
2597
2598     th,
2599     td {
2600         line-height: 135%;
2601     }
2602 }
2603
2604 .table-bordered {
2605     border-radius: 0;
2606     thead:first-child tr:first-child > th {
2607         &:last-child {
2608         border-radius: 0;
2609         }
2610         &:first-child {
2611         border-radius: 0;
2612         }
2613     }
2614     tbody:last-child tr:last-child > td {
2615         &:last-child {
2616         border-radius: 0;
2617         }
2618         &:first-child {
2619         border-radius: 0;
2620         }
2621     }
2622 }
2623
2624 .tags,
2625 .shelves {
2626     ul {
2627         display: inline;
2628         list-style: none;
2629         margin-left: 0;
2630
2631         li {
2632             display: inline;
2633         }
2634     }
2635 }
2636
2637 .coverimages {
2638     float: right;
2639 }
2640
2641 #termsList {
2642     label {
2643         display: inline;
2644         vertical-align: middle;
2645     }
2646
2647     ul {
2648         border-bottom: 1px solid #EEE;
2649         list-style-type: none;
2650         margin: 0;
2651         padding: .6em 0;
2652     }
2653
2654     li {
2655         list-style-type: none;
2656         margin: 0;
2657         padding: 0;
2658     }
2659 }
2660
2661
2662 #overdrive-results,
2663 #recordedbooks-results,
2664 #openlibrary-results {
2665     font-weight: bold;
2666     padding-left: 1em;
2667 }
2668
2669 .throbber {
2670     vertical-align: middle;
2671 }
2672
2673 #overdrive-results-list .star-rating-control {
2674     display: block;
2675     overflow: auto;
2676 }
2677
2678 #shelfbrowser {
2679     table {
2680         margin: 0;
2681     }
2682
2683     table,
2684     td,
2685     th {
2686         border: 0;
2687         font-size: 90%;
2688         text-align: center;
2689     }
2690
2691     td,
2692     th {
2693         padding: 3px 5px;
2694         width: 20%;
2695
2696         &.nav-cell {
2697             padding: 0;
2698             vertical-align: middle;
2699             width: 1em;
2700         }
2701     }
2702
2703     a {
2704         display: block;
2705         font-size: 110%;
2706         font-weight: bold;
2707         text-decoration: none;
2708     }
2709
2710     #browser_previous {
2711         a {
2712             transform: rotate(-90deg);
2713             white-space: nowrap;
2714
2715             i {
2716                 padding: 0 .5em;
2717             }
2718         }
2719     }
2720
2721     #browser_next {
2722         a {
2723             transform: rotate(90deg);
2724             white-space: nowrap;
2725
2726             i {
2727                 padding: 0 .5em;
2728             }
2729         }
2730     }
2731 }
2732
2733 #holds {
2734     margin: 0 auto;
2735     max-width: 800px;
2736 }
2737
2738 .holdrow {
2739     border-bottom: 1px solid #CCC;
2740     clear: both;
2741     margin-bottom: .5em;
2742     padding: 0 1em 1em 1em;
2743
2744     fieldset {
2745         border: 0;
2746         float: none;
2747         margin: 0;
2748
2749         .label {
2750             font-size: 14px;
2751         }
2752     }
2753
2754     label {
2755         display: inline;
2756     }
2757 }
2758
2759 .hold-options {
2760     clear: both;
2761 }
2762
2763 .toggle-hold-options {
2764     background-color: #EEE;
2765     clear: both;
2766     display: block;
2767     font-weight: bold;
2768     margin: 1em 0;
2769     padding: .5em;
2770 }
2771
2772 .copiesrow {
2773     clear: both;
2774 }
2775
2776 #idreambooksreadometer {
2777     float: right;
2778 }
2779
2780 .idreambookslegend {
2781     font-size: small;
2782 }
2783
2784 .idreambookssummary {
2785     a {
2786         color: #707070;
2787         text-decoration: none;
2788     }
2789
2790     img {
2791         vertical-align: middle;
2792     }
2793 }
2794
2795 .idbresult {
2796     color: #29ADE4;
2797     margin: .5em;
2798     padding: .5em;
2799     text-align: center;
2800
2801     img {
2802         padding-right: 6px;
2803         vertical-align: middle;
2804     }
2805
2806     a,
2807     a:visited {
2808         text-decoration: none;
2809         color: #29ADE4;
2810     }
2811 }
2812
2813 .js-show {
2814     display: none;
2815 }
2816
2817 .modal-nojs {
2818     .modal-header,
2819     .modal-footer {
2820         display: none;
2821     }
2822 }
2823
2824 .contents {
2825     width: 75%;
2826
2827     .t:first-child::before {
2828         content: "→ ";
2829     }
2830
2831     .t::before {
2832         content: "\A → ";
2833         white-space: pre;
2834     }
2835
2836     .t {
2837         font-weight: bold;
2838         display: inline;
2839     }
2840
2841     .r {
2842         display: inline;
2843     }
2844 }
2845
2846
2847 .contentblock {
2848     font-size: 95%;
2849     line-height: 135%;
2850     margin-left: 2em;
2851     position: relative;
2852 }
2853
2854 .m880 {
2855     display: block;
2856     float: right;
2857     padding-left: 20px;
2858     text-align: right;
2859     width: 50%;
2860 }
2861
2862 #memberentry-form {
2863     input.error {
2864         border-color: #C00;
2865         box-shadow: 0 1px 1px #C00 inset, 0 0 8px #C00;
2866         color: #F00;
2867         outline: 0 none;
2868
2869         &:focus {
2870             border-color: #C00;
2871             box-shadow: 0 1px 1px #C00 inset, 0 0 8px #C00;
2872             color: #F00;
2873             outline: 0 none;
2874         }
2875
2876         label.error {
2877             color: #C00;
2878             float: none;
2879             font-size: 90%;
2880         }
2881     }
2882 }
2883
2884
2885 #illrequests {
2886     .illrequest-actions {
2887         margin-bottom: 20px;
2888         padding-top: 20px;
2889
2890         .btn,
2891         .cancel {
2892             margin-right: 5px;
2893         }
2894     }
2895
2896     #illrequests-create-button {
2897         margin-bottom: 20px;
2898     }
2899
2900     .bg-info {
2901         overflow: auto;
2902         position: relative;
2903
2904         #search-summary {
2905             position: absolute;
2906             top: 50%;
2907             transform: translateY( -50% );
2908         }
2909
2910     }
2911
2912     #freeform-fields .custom-name {
2913         float: left;
2914         margin-right: 1em;
2915         text-align: right;
2916         width: 8em;
2917     }
2918
2919     .dropdown:hover .dropdown-menu.nojs {
2920         display: block;
2921     }
2922 }
2923
2924 #dc_fieldset {
2925     border: 1px solid #DDDDDD;
2926     border-radius: 10px;
2927     border-width: 1px;
2928     padding: 5px;
2929 }
2930
2931 .label_dc {
2932     cursor: pointer;
2933     display: inline;
2934     margin: 0;
2935     padding: 0;
2936 }
2937
2938 .btn-danger {
2939     color: white !important;
2940 }
2941
2942 .count_label {
2943     $base: #369;
2944     background-color: $base;
2945     border-radius: 5px;
2946     color: #FFF;
2947     display: inline-block;
2948     font-weight: bold;
2949     min-width: 1.5em;
2950     padding: .2em;
2951     text-align: center;
2952     text-shadow: 0 -1px 0 rgba( 0, 0, 0, .25 );
2953
2954     &:hover {
2955         background-color: lighten( $base, 20% );
2956     }
2957 }
2958
2959 .user_overdues_count,
2960 .user_fines_count {
2961     background-color: #990000;
2962
2963     &:hover {
2964         background-color: lighten( #990000, 10% );
2965     }
2966 }
2967
2968 .user_holds_waiting_count {
2969     background-color: #538200;
2970
2971     &:hover {
2972         background-color: lighten( #538200, 10% );
2973     }
2974 }
2975
2976 #user_summary {
2977     border: 1px solid #EAEAE6;
2978     margin-bottom: 1em;
2979     padding-bottom: .5em;
2980
2981     h3 {
2982         background-color: #E2E8E8;
2983         color: #727272;
2984         margin-top: 0;
2985         padding: .2em 0;
2986         text-align: center;
2987     }
2988
2989     ul {
2990         list-style-type: none;
2991         margin: 0 0 .2em 0;
2992
2993         a {
2994             display: block;
2995             font-weight: bold;
2996             padding: .2em 1em;
2997         }
2998     }
2999 }
3000
3001 .adlibris-cover {
3002     max-height: 120px;
3003 }
3004
3005 .adlibris-cover-big {
3006     max-height: 200px;
3007 }
3008
3009 /* jQuery Bar Rating plugin for star ratings */
3010
3011 $star-default: #D2D2D2;
3012 $star-active: #C24A4A;
3013 $star-selected: #EDB867;
3014
3015 .br-wrapper {
3016     display: inline-block;
3017 }
3018
3019 .br-theme-fontawesome-stars {
3020
3021     .br-widget {
3022         height: 28px;
3023         white-space: nowrap;
3024
3025         a {
3026             -webkit-font-smoothing: antialiased;
3027             font: normal normal normal 20px/1 FontAwesome;
3028             margin-right: 2px;
3029             text-decoration: none;
3030             text-rendering: auto;
3031
3032             &::after {
3033                 color: $star-default;
3034                 content: "\f005";
3035             }
3036
3037             &.br-active {
3038                 &::after {
3039                     color: $star-active;
3040                 }
3041             }
3042
3043             &.br-selected {
3044                 &::after {
3045                     color: $star-selected;
3046                 }
3047             }
3048         }
3049
3050
3051         .br-current-rating {
3052             display: none;
3053         }
3054     }
3055
3056     .br-readonly {
3057         a {
3058             cursor: default;
3059         }
3060     }
3061
3062 }
3063
3064 #cancel_rating_text {
3065     a {
3066         color: #C24A4A;
3067     }
3068 }
3069
3070 @media print {
3071     .br-theme-fontawesome-stars {
3072
3073         .br-widget {
3074             a {
3075                 &::after {
3076                     color: #000000;
3077                     content: "\f006";
3078                 }
3079
3080                 &.br-active::after,
3081                 &.br-selected::after {
3082                     color: #000000;
3083                     content: "\f005";
3084                 }
3085             }
3086
3087         }
3088
3089     }
3090 }
3091
3092 /* END jQuery Bar Rating plugin for star ratings */
3093
3094 #qrcode {
3095     margin-left: 35px;
3096
3097     img,
3098     canvas {
3099         margin-top: 1em;
3100     }
3101 }
3102
3103 /*opac browse search*/
3104 #browse-search {
3105
3106     form {
3107         label {
3108             display: inline-block;
3109             margin-right:5px;
3110         }
3111
3112         [type=submit] {
3113             margin-top: 10px;
3114         }
3115     }
3116
3117     #browse-resultswrapper {
3118        margin-top: 4em;
3119
3120         @media (min-width: 768px) and (max-width: 984px) {
3121             margin-top: 2em;
3122         }
3123
3124         @media (max-width: 767px) {
3125             margin-top: 1em;
3126         }
3127     }
3128     #browse-searchresults, #browse-selectionsearch {
3129         border: 1px solid #E3E3E3;
3130         border-radius: 4px;
3131         padding: 0;
3132         overflow-y: auto;
3133         max-height: 31em;
3134         margin-bottom: 2em;
3135     }
3136     #browse-searchresults {
3137         max-height: 31em;
3138         list-style: none;
3139         padding: 10px;
3140
3141         a {
3142             display: block;
3143             margin-bottom: 5px;
3144
3145             &.selected {
3146                 background-color:#EEE;
3147             }
3148         }
3149
3150         li:last-child a {
3151             margin-bottom: 0;
3152         }
3153
3154         @media (max-width: 767px) {
3155             max-height: 13em;
3156         }
3157     }
3158     #browse-selection {
3159         margin-top: -40px;
3160         padding-top: 0;
3161
3162         @media (max-width: 767px) {
3163             margin-top: 0;
3164         }
3165     }
3166     #browse-selectionsearch ol {
3167         list-style: none;
3168         margin: 0;
3169
3170         li {
3171             padding: 1em;
3172
3173             &:nth-child(odd) {
3174                 background-color: #F4F4F4;
3175             }
3176         }
3177     }
3178    #browse-selectionsearch p.subjects {
3179         font-size: 0.9em;
3180         margin-bottom: 0;
3181     }
3182     #browse-selectionsearch h4 {
3183         margin: 0;
3184     }
3185     .error, .no-results {
3186         background-color: #EEE;
3187         border: 1px solid #E8E8E8;
3188         text-align: left;
3189         padding: 0.5em;
3190         border-radius: 3px;
3191     }
3192     .loading {
3193         text-align: center;
3194
3195         img {
3196             margin:0.5em 0;
3197             position: relative;
3198             left: -5px;
3199         }
3200     }
3201 }
3202 /*end browse search*/
3203
3204 @import "responsive";