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