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

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