Open-ILS/src/templates/opac/css/style.css.tt2

   1 [%-
   2     PROCESS "opac/parts/css/colors.tt2";
   3     PROCESS "opac/parts/css/fonts.tt2";
   4     rtl = ctx.get_i18n_l(ctx.eg_locale).rtl;
   5 %]
   6
   7 body {
   8     margin:0;
   9     font-family: Arial, Helvetica, sans-serif;
  10     font-size: [% css_fonts.size_base %];
  11     background-color: [% css_colors.primary %];
  12     [% IF rtl == 't' -%]
  13     direction: rtl;
  14     [%- END %]
  15 }
  16
  17 button, input {
  18     font-family: Arial, Helvetica, sans-serif;
  19     font-size: [% css_fonts.size_base %];
  20 }
  21
  22 img {
  23     border: none;
  24 }
  25
  26 #topnav_logo {
  27     margin: 2em 0;
  28 }
  29
  30 #homesearch_main_logo {
  31     padding-top: 60px;
  32     margin: auto;
  33     width: 50%;
  34 }
  35
  36 a {
  37     color: [% css_colors.link %];
  38 }
  39
  40 #search-wrapper input[type=text] {
  41     margin:0;
  42     padding:0;
  43 }
  44
  45 #search-wrapper select, .results_header_lbl select {
  46     border:1px solid [% css_colors.border_standard %];
  47     margin:0;
  48     padding:0;
  49     width: 12em;
  50 }
  51
  52 .searchbar {
  53     font-weight: bold;
  54     padding-top: 10px;
  55     [% IF rtl == 't' -%]
  56     margin-right: 1em;
  57     [%- ELSE %]
  58     margin-left: 1em;
  59     [%- END %]
  60 }
  61
  62 .refine_search {
  63     padding-bottom: 7px;
  64     margin-left: 1em;
  65 }
  66
  67 /*
  68 #search-wrapper select {
  69     border:0px solid [% css_colors.border_dark %];
  70     filter:alpha(opacity=0);
  71     -khtml-opacity:0;
  72     opacity:0;
  73     padding:0;
  74     margin:0;
  75     height:18px;
  76 }
  77 */
  78 h1 {
  79     margin:0;
  80     margin-bottom: 5px;
  81     font-size: [% css_fonts.size_biggest %];
  82     font-weight:normal;
  83 }
  84
  85 h2 {
  86     font-size: [% css_fonts.size_bigger %];
  87     font-weight:bold;
  88 }
  89
  90 h2.graphic880 {
  91     font-size: [% css_fonts.size_bigger %];
  92     font-weight:normal;
  93 }
  94
  95 .hide_me, .hidden {
  96     display: none;
  97     visibility: hidden;
  98 }
  99
 100 div.select-box-wrapper {
 101     position:absolute;
 102     padding-top:2px;
 103     overflow:hidden;
 104     [% IF rtl == 't' -%]
 105     padding-right: 3px;
 106     text-align:right;
 107     [%- ELSE %]
 108     padding-left:3px;
 109     text-align:left;
 110     [%- END %]
 111 }
 112
 113 #dash_wrapper {
 114     [% IF rtl == 't' -%]
 115     margin-right: 0.5em;
 116     [%- ELSE %]
 117     margin-left: 0.5em;
 118     [%- END %]
 119 }
 120
 121 #dash_wrapper div {
 122     background-color: [% css_colors.primary %];
 123     border-radius: 5px;
 124     padding: 0em 1em;
 125 }
 126
 127 .dash_divider {
 128     margin: 1em;
 129     color: [% css_colors.primary_fade %];
 130     display:inline-block;
 131 }
 132
 133 #dashboard, #dashboard_e {
 134     margin-top: 1em;
 135     height: 3em;
 136 }
 137
 138 #dashboard span.dash-align a, #dashboard_e span.dash-align a {
 139     font-weight: bold;
 140     text-decoration: none;
 141 }
 142
 143 #dash_user {
 144     font-weight: bold;
 145 }
 146
 147 #logout_link {
 148     [% IF rtl == 't' -%]
 149     right: 1px;
 150     [%- ELSE %]
 151     left: 1px;
 152     [%- END %]
 153 }
 154
 155 #dash_checked, #dash_e_checked { color: [% css_colors.text_attention %]; }
 156 #dash_holds, #dash_e_holds { color: [% css_colors.text_attention %]; }
 157 #dash_pickup, #dash_e_pickup { color: [% css_colors.text_goodnews %]; }
 158
 159 /*
 160 #dash_fines { color: [% css_colors.text_badnews %]; }
 161 the color contrast between "text_badnews" and "primary"
 162 is too low for WCAG compliance.  Use "text_attention"
 163 for now until a better color is picked - if needed.
 164 */
 165 #dash_fines { color: [% css_colors.text_attention %]; }
 166
 167 #dash_wrapper #dash_user_message_button_container {
 168     display: inline;
 169     padding: 0;
 170 }
 171 #dash_wrapper #unread_message_count_floater {
 172     position: absolute;
 173     background-color: [% css_colors.text_alert %];
 174     padding-left: 0.2em;
 175     padding-right: 0.2em;
 176     display: inline-block;
 177     font-size: 95%;
 178     border-radius: 0;
 179     z-index: 2;
 180     margin-top: 0.2em;
 181     [% IF rtl == 't' -%]
 182     margin-right: -1.5em;
 183     [%- ELSE %]
 184     margin-left: -1.5em;
 185     [%- END %]
 186 }
 187
 188 #header-wrap {
 189     background-color: [% css_colors.primary_fade %];
 190     background-image: -moz-linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
 191     background-image: -o-linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
 192     background-image: -webkit-linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
 193     background-image: linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
 194 }
 195 #header {
 196     color: [% css_colors.background %];
 197     margin-left: 1em;
 198     margin-right: 1em;
 199     font-size: [% css_fonts.size_small %];
 200 }
 201
 202 #header a {
 203     color: [% css_colors.background %];
 204 }
 205
 206 #header a:hover {
 207     color: [% css_colors.text_invert %];
 208     text-decoration: none;
 209 }
 210
 211 #header-links {
 212     color: [% css_colors.text_invert %];
 213     font-size: [% css_fonts.size_small %];
 214     font-weight: bold;
 215     position: relative;
 216     top:4px;
 217
 218 }
 219
 220 #header-links a {
 221     color: [% css_colors.text_invert %];
 222     display: block;
 223     text-decoration: none;
 224     [% IF rtl == 't' -%]
 225     float: right;
 226     margin-left: 22px;
 227     [%- ELSE %]
 228     float:left;
 229     margin-right:22px;
 230     [%- END %]
 231 }
 232
 233 #header-links a:hover {
 234     color: [% css_colors.text_invert %];
 235     text-shadow: 0 0 0.2em [% css_colors.primary %], 0 0 0.2em [% css_colors.primary %];
 236     text-decoration: none;
 237 }
 238
 239 #header #header-links2 {
 240     position:relative;
 241     top:-8px;
 242     color: [% css_colors.text_invert %];
 243     padding-bottom: 15px;
 244 }
 245
 246 #header #header-links2 a {
 247     color: [% css_colors.text_invert %];
 248 }
 249
 250 #header #header-links2 a:hover {
 251     text-decoration: underline;
 252 }
 253
 254 #your-acct-login {
 255     padding-top:2em;
 256 }
 257
 258 #gold-links {
 259     [% IF rtl == 't' -%]
 260     margin-right: 1em;
 261     padding-right: 0px;
 262     [%- ELSE %]
 263     margin-left: 1em;
 264     padding-left:0px;
 265     [%- END %]
 266 }
 267
 268 #gold-links-home {
 269     margin:auto;
 270     [% IF rtl == 't' -%]
 271     padding-right: 0px;
 272     [%- ELSE %]
 273     padding-left:0px;
 274     [%- END %]
 275 }
 276
 277 #gold-links-holder {
 278     height: 24px;
 279     background-color: [% css_colors.background_invert %];
 280 }
 281
 282 #util-bar {
 283     [% IF rtl == 't' -%]
 284     margin-right: 1em;
 285     padding-right: 0px;
 286     [%- ELSE %]
 287     margin-left: 1em;
 288     padding-left:0px;
 289     [%- END %]
 290     height:0px;
 291 }
 292
 293 #search-wrapper {
 294     border-bottom: 1px solid [% css_colors.border_standard %];
 295     padding-bottom: 5px;
 296     background-color: [% css_colors.background %];
 297 }
 298
 299 #search-wrapper #breadcrumb {
 300     margin-top:0px;
 301     font-size: [% css_fonts.size_smaller %];
 302     [% IF rtl == 't' -%]
 303     float: right;
 304     [%- ELSE %]
 305     float:left;
 306     [%- END %]
 307 }
 308
 309 #search-wrapper #search-within {
 310     margin-top:10px;
 311     position:relative;
 312     [% IF rtl == 't' -%]
 313     float: left;
 314     right: -173px;
 315     [%- ELSE %]
 316     float:right;
 317     left:-173px;
 318     [%- END %]
 319 }
 320
 321 #search-wrapper #breadcrumb a {
 322     color: [% css_colors.text %];
 323 }
 324
 325 #search-wrapper #search_frm label {
 326     font-size: [% css_fonts.size_smaller %];
 327 }
 328
 329 #search-wrapper #search-box {
 330     [% IF rtl == 't' -%]
 331     margin-right: 1em;
 332     padding-right: 0px;
 333     [%- ELSE %]
 334     margin-left: 1em;
 335     padding-left: 0px;
 336     [%- END %]
 337     padding-top: 10px;
 338     padding-bottom: 10px;
 339 }
 340
 341 #adv_search_tabs, #acct_tabs, #acct_fines_tabs, #acct_checked_tabs, #acct_holds_tabs, #acct_prefs_tabs, #results_header_inner{
 342     [% IF rtl == 't' -%]
 343     margin-right:2px;
 344     [%- ELSE %]
 345     margin-left: 2px;
 346     [%- END %]
 347     overflow: auto;
 348 }
 349
 350 #adv_search_tabs a, #acct_tabs a, #acct_fines_tabs a, #acct_checked_tabs a, #acct_holds_tabs a, #acct_prefs_tabs a {
 351     [% IF rtl == 't' -%]
 352     float: right;
 353     margin: 10px 0px 0px 7px;
 354     border-radius: 10px 10px 0px 0px;
 355     [%- ELSE %]
 356     float: left;
 357     margin: 10px 7px 0px 0px;
 358     border-radius: 10px 10px 0px 0px;
 359     [%- END %]
 360     text-align: center;
 361     vertical-align: middle;
 362     display: block;
 363     padding: 10px 0px 10px 0px;
 364     font-weight: bold;
 365     color: [% css_colors.text_invert %];
 366     background-color: [% css_colors.control %];
 367     font-weight: bold;
 368     text-decoration: none;
 369 }
 370
 371 #adv_search_tabs a, #acct_tabs a, #acct_fines_tabs a {
 372     padding: 1em 1em 0.5em;
 373 }
 374
 375 #adv_search_tabs a:hover, #acct_tabs a:hover, #acct_fines_tabs a:hover, #acct_checked_tabs a:hover, #acct_holds_tabs a:hover, #acct_prefs_tabs a:hover {
 376     background-color: [% css_colors.primary %];
 377     color: [% css_colors.text_invert %];
 378     text-decoration: none;
 379 }
 380
 381 #adv_search_filters {
 382     position: relative;
 383 }
 384 #adv_search_rows {
 385     border-bottom: none;
 386 }
 387 .adv_filter_block {
 388     [% IF rtl == 't' -%]
 389     float: right;
 390     [%- ELSE %]
 391     float: left;
 392     [%- END %]
 393     padding: 15px;
 394     clear: both;
 395 }
 396 .adv_filter_block_item {
 397     [% IF rtl == 't' -%]
 398     float: right;
 399     [%- ELSE %]
 400     float: left;
 401     [%- END %]
 402     padding: 5px;
 403 }
 404
 405 #adv_special_block {
 406     [% IF rtl == 't' -%]
 407     float: right;
 408     [%- ELSE %]
 409     float: left;
 410     [%- END %]
 411     padding: 5px;
 412     margin-top: 5px;
 413 }
 414
 415 #adv_search_submit {
 416     [% IF rtl == 't' -%]
 417     margin-right: 10px;
 418     [%- ELSE %]
 419     margin-left: 10px;
 420     [%- END %]
 421     position: relative;
 422 }
 423
 424 .checkbox_col {
 425     width: 1%;
 426     [% IF rtl == 't' -%]
 427     padding-right: 10px !important;
 428     [%- ELSE %]
 429     padding-left: 10px !important;
 430     [%- END %]
 431 }
 432
 433 #adv_search.on, #num_search.on, #expert_search.on {
 434     color: [% css_colors.accent_darker %];
 435     background-color: [% css_colors.background %];
 436     text-decoration: none;
 437 }
 438
 439 #adv_search_tabs a.acct-tab-on, #acct_tabs a.acct-tab-on, #acct_fines_tabs a.acct-tab-on {
 440     color: [% css_colors.accent_darker %];
 441     background-color: [% css_colors.background %];
 442     text-decoration: none;
 443 }
 444
 445 .acct-tab-off {
 446     background-color: [% css_colors.control %];
 447 }
 448
 449 #acct_checked_tabs a, #acct_holds_tabs a, #acct_prefs_tabs a {
 450     margin-top: 0px;
 451     font-size: [% css_fonts.size_smaller %];
 452     color: [% css_colors.accent_darker %];
 453     padding: 10px 10px 10px 10px;
 454 }
 455
 456 #acct_checked_tabs div.selected a, #acct_holds_tabs div.selected a, #acct_prefs_tabs div.selected a {
 457     background-color: [% css_colors.accent_lightest %];
 458     color: [% css_colors.accent_darker %];
 459 }
 460
 461 #acct_checked_tabs, #acct_holds_tabs, #acct_prefs_tabs {
 462     padding-bottom: 12px;
 463     color: [% css_colors.accent_medium %];
 464 }
 465
 466 #acct_select, #acct_prefs_select {
 467      display: none;
 468 }
 469
 470 #mobile_acct_search_links {
 471       background-color: [% css_colors.primary_fade %];
 472 }
 473
 474 .rdetail_header {
 475     [% IF rtl == 't' -%]
 476     padding: 5px 0px 6px 7px;
 477     margin-right: 1em;
 478     [%- ELSE %]
 479     padding: 5px 7px 6px 0px;
 480     margin-left: 1em;
 481     [%- END %]
 482     border-bottom: 1px dotted [% css_colors.accent_light %];
 483 }
 484
 485 .rdetail_results a {
 486     color:[% css_colors.primary_fade %];
 487     font-weight:bold;
 488     font-size: [% css_fonts.size_bigger %];
 489 }
 490
 491 .rdetail_result_count {
 492     color: [% css_colors.text %];
 493     font-weight: normal;
 494     display: inline-block;
 495     [% IF rtl == 't' -%]
 496     padding-right: 1em;
 497     [%- ELSE %]
 498     padding-left: 1em;
 499     [%- END %]
 500 }
 501
 502 .rdetail_result_nav {
 503     font-weight:normal;
 504     display: inline-block;
 505     [% IF rtl == 't' -%]
 506     padding-right: 1em;
 507     [%- ELSE %]
 508     padding-left: 1em;
 509     [%- END %]
 510 }
 511
 512 #rdetail_details_table {
 513     margin-top: 15px;
 514 }
 515
 516 #rdetail_image { border: none; }
 517 #rdetail_image_cell {
 518     padding-top: 3px;
 519     [% IF rtl == 't' -%]
 520     padding-left: 10px;
 521     [%- ELSE %]
 522     padding-right: 10px;
 523     [%- END %]
 524 }
 525
 526 h2.rdetail_uris {
 527     margin-top: 1em;
 528 }
 529 div.rdetail_uris {
 530     padding: 0.5em 1em 0.5em 1em;
 531     background-color: [% css_colors.accent_lighter2 %];
 532 }
 533 div.rdetail_uris ul li {
 534     position: relative;
 535     [% IF rtl == 't' -%]
 536     right: 1em;
 537     [%- ELSE %]
 538     left: 1em;
 539     [%- END %]
 540 }
 541
 542 div.rdetail_show_copies {
 543     margin-top: 1em;
 544 }
 545
 546 div#rdetail_actions_div {
 547     background-color: [% css_colors.background %];
 548     [% IF rtl == 't' -%]
 549     float: left;
 550     [%- ELSE %]
 551     float: right;
 552     [%- END %]
 553 }
 554
 555 span#rdetail_copy_counts {
 556     display: inline-block;
 557     vertical-align: top;
 558     [% IF rtl == 't' -%]
 559     border-left: thin;
 560     margin-left: 1em;
 561     padding-left: 1em;
 562     [%- ELSE %]
 563     border-right: thin;
 564     margin-right: 1em;
 565     padding-right: 1em;
 566     [%- END %]
 567 }
 568
 569 span#rdetail_hold_counts {
 570     display: inline-block;
 571     vertical-align: top;
 572 }
 573 span#rdetail_hold_counts p {
 574     [% IF rtl == 't' -%]
 575     padding-right: 2em;
 576     [%- ELSE %]
 577     padding-left: 2em;
 578     [%- END %]
 579 }
 580
 581 #rdetail_image_div {
 582     [% IF rtl == 't' -%]
 583     float: right;
 584     margin-left: 1em;
 585     [%- ELSE %]
 586     float: left;
 587     margin-right: 1em;
 588     [%- END %]
 589 }
 590
 591 .rdetail_aux_utils {
 592     padding-bottom: 6px;
 593     [% IF rtl == 't' -%]
 594     border-right: 1px dotted [% css_colors.accent_light %];
 595     padding-right:17px;
 596     padding-left:70px;
 597     [%- ELSE %]
 598     border-left:1px dotted [% css_colors.accent_light %];
 599     padding-left: 17px;
 600     padding-right: 70px;
 601     [%- END %]
 602 }
 603
 604 div.place_hold {
 605     border-bottom: 1px dotted [% css_colors.accent_light %];
 606     padding-top: 10px;
 607 }
 608
 609 div.toggle_list { padding-top: 6px; }
 610
 611 div.share_record {
 612     padding-top: 6px;
 613     border-top: 1px dotted [% css_colors.accent_light %];
 614 }
 615
 616 div.format_icon {
 617     [% IF rtl == 't' -%]
 618     float: left;
 619     margin-left: 17px;
 620     [%- ELSE %]
 621     float: right;
 622     margin-right: 17px;
 623     [%- END %]
 624 }
 625
 626 #metarecord_population {
 627     overflow: hidden;
 628     width: 40%;
 629     padding-bottom: 10px;
 630 }
 631
 632 .metarecord_population_span_link {
 633     line-height: 20px;
 634 }
 635
 636 .metarecord_population_format {
 637     border-right: thin;
 638     display: inline-block;
 639     margin-right: 1em;
 640     padding-right: 1em;
 641     vertical-align: top;
 642 }
 643
 644 .metarecord_population_item_lang {
 645     display: inline-block;
 646     vertical-align: top;
 647 }
 648
 649 .metarecord_population_all {
 650     padding-top:10px;
 651 }
 652
 653 .results_aux_utils {
 654     display: table-cell;
 655 }
 656
 657 .result_util {
 658     border-bottom: 1px dotted [% css_colors.accent_light %];
 659     padding-top: 6px;
 660     [% IF rtl == 't' -%]
 661     padding-right: 1em;
 662     [%- ELSE %]
 663     padding-left: 1em;
 664     [%- END %]
 665 }
 666
 667 .results_reviews {
 668     top: -5px;
 669 }
 670
 671 #rdetail_copies {
 672     padding-top: 1.5em;
 673 }
 674
 675 #rdetails_status td,
 676 #course_material_table td {
 677     [% IF rtl == 't' -%]
 678     padding: 7px 13px 3px 0px;
 679     [%- ELSE %]
 680     padding: 7px 0px 3px 13px;
 681     [%- END %]
 682 }
 683
 684 #rdetails_status td[headers=copy_header_library],
 685 #rdetails_status td[headers=copy_header_shelfloc] {
 686     white-space: normal;
 687 }
 688
 689 #rdetails_status thead th,
 690 #course_material_table thead th {
 691     [% IF rtl == 't' -%]
 692     padding: 13px 13px 13px 0px;
 693     text-align: right;
 694     [%- ELSE %]
 695     padding: 13px 0px 13px 13px;
 696     text-align: left;
 697     [%- END %]
 698     background-color: [% css_colors.accent_lighter2 %];
 699     font-size: [% css_fonts.size_smaller %];
 700     font-weight: bold;
 701 }
 702
 703 #rdetails_status tbody td,
 704 #course_material_table tbody td {
 705     [% IF rtl == 't' -%]
 706     padding-right: 13px;
 707     text-align: right;
 708     [%- ELSE %]
 709     padding-left: 13px;
 710     text-align: left;
 711     [%- END %]
 712 }
 713 #rdetails_status tbody td.copy_note
 714 #course_material_table tbody {
 715     color: [% css_colors.primary %];
 716     text-wrap:normal;
 717     white-space:pre-wrap !important;
 718     word-wrap:normal;
 719 }
 720
 721 #rdetails_status tbody td.copy_tag {
 722     border-color: [% css_colors.primary %];
 723     border-style: dashed;
 724     border-width: 2px;
 725 }
 726 #rdetails_status tbody .copy_tag_value {
 727     font-weight: bolder;
 728 }
 729
 730 .rdetail_extras {
 731     background-color: [% css_colors.primary_fade %];
 732     border: 1px solid [% css_colors.primary %];
 733     padding-top:1px;
 734     clear:both;
 735 }
 736
 737 #rdetail_extras_div {
 738     margin: 1em 0;
 739 }
 740
 741 .rdetail_extras_hr {
 742     [% IF rtl == 't' -%]
 743     margin-right: 1px;
 744     margin-left: 1px;
 745     [%- ELSE %]
 746     margin-left: 1px;
 747     margin-right: 1px;
 748     [%- END %]
 749     height: 1px;
 750     background-color: [% css_colors.accent_light %];
 751 }
 752
 753 .rdetail_extras_link {
 754     padding: 6px 12px;
 755     font-size: [% css_fonts.size_smaller %];
 756     font-weight: bold;
 757 }
 758
 759 .rdetail_extras_lbl {
 760     color: [% css_colors.text_invert %];
 761     text-decoration: none;
 762 }
 763
 764 #rdetail_extras_expand, #rdetail_extras_collapse, #rdetail_locs_collapse {
 765     [% IF rtl == 't' -%]
 766     margin-right: 13px;
 767     [%- ELSE %]
 768     margin-left: 13px;
 769     [%- END %]
 770 }
 771
 772 #rdetail_locs_expand, #rdetail_locs_collapse {
 773     [% IF rtl == 't' -%]
 774     margin-right: 13px;
 775     [%- ELSE %]
 776     margin-left:13px;
 777     [%- END %]
 778     padding-bottom:3px;
 779     margin-top:15px;
 780 }
 781
 782 #rdetail_anotes_div .biography {
 783     margin:0;
 784 }
 785
 786 #gbp_extra, #gbp_arrow_down_link {
 787     display: none;
 788 }
 789
 790 .almost-content-wrapper {
 791     background-color: [% css_colors.background %];
 792 }
 793
 794 #content-wrapper {
 795     background-color: [% css_colors.background %];
 796     min-height: 260px;
 797     border-bottom: 1px solid [% css_colors.border_dark %];
 798 }
 799
 800 .content-wrapper-record-page { top: -15px; position: relative; }
 801
 802 #main-content-home {
 803     [% IF rtl == 't' -%]
 804     padding-right: 17px;
 805     margin-right: 1em;
 806     [%- ELSE %]
 807     padding-left: 17px;
 808     margin-left: 1em;
 809     [%- END %]
 810 }
 811 #main-content {
 812     [% IF rtl == 't' -%]
 813     padding-right: 0px;
 814     [%- ELSE %]
 815     padding-left: 0px;
 816     [%- END %]
 817     margin: 0 1em;
 818     clear: both;
 819 }
 820
 821 #main-content-after-bar {
 822     [% IF rtl == 't' -%]
 823     margin-right: 1em;
 824     padding-right: 4px;
 825     [%- ELSE %]
 826     margin-left: 1em;
 827     padding-left: 4px;
 828     [%- END %]
 829 }
 830
 831 #results-side-bar {
 832     [% IF rtl == 't' -%]
 833     float: right;
 834     margin-left: 5px;
 835     [%- ELSE %]
 836     float: left;
 837     margin-right: 5px;
 838     [%- END %]
 839     width: 174px;
 840     background-color: [% css_colors.background %];
 841 }
 842
 843 #main-content .login_boxes {
 844     border: 1px solid [% css_colors.accent_lighter %];
 845     background-color: [% css_colors.accent_lightest %];
 846     background-image: -moz-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
 847     background-image: -ms-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
 848     background-image: -o-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
 849     background-image: -webkit-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
 850     background-image: linear-gradient(to bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
 851     color: [% css_colors.accent_darker %];
 852 }
 853
 854 #main-content .login_boxes h1 {
 855     font-weight: normal;
 856     font-size: [% css_fonts.size_biggest %];
 857     margin:0;
 858 }
 859
 860 #main-content .left_brain {
 861     [% IF rtl == 't' -%]
 862     padding-right: 28px;
 863     [% ELSE -%]
 864     padding-left:28px;
 865     [% END -%]
 866     padding-top:25px;
 867 }
 868
 869 #main-content .left_brain input[type=text], #main-content .left_brain input[type=password] {
 870     width:167px;
 871     margin:0;
 872     padding:0;
 873     background-color: [% css_colors.background %];
 874     font-size: [% css_fonts.size_bigger %];
 875     color: [% css_colors.text %];
 876 }
 877
 878 #main-content .left_brain .input_bg {
 879     [% IF rtl == 't' -%]
 880     padding: 10px 13px 0px 10px;
 881     [% ELSE -%]
 882     padding:10px 10px 0px 13px;
 883     [% END -%]
 884     width:167px;
 885     height:29px;
 886 }
 887
 888 .login-help-box {
 889     [% IF rtl == 't' -%]
 890     float: right;
 891     margin-right: 2em;
 892     [% ELSE -%]
 893     float: left;
 894     margin-left: 2em;
 895     [% END -%]
 896     width: 200px;
 897     text-align: center;
 898 }
 899
 900 .login-help-button {
 901     font-size: [% css_fonts.size_biggest %];
 902     padding: 1.5em;
 903 }
 904
 905 #login-failed-message {
 906     font-size: [% css_fonts.size_bigger %];
 907     font-weight: bold;
 908     color: [% css_colors.text_alert %];
 909     padding-top: 1em;
 910 }
 911
 912 #holds_temp_parent td {
 913     border-bottom:1px solid [% css_colors.border_standard %];
 914 }
 915
 916 #holds_temp_parent input, #holds_temp_parent select {
 917     margin:0;
 918 }
 919
 920 #holds_temp_parent tr td div {
 921     margin-top: 10px;
 922     margin-bottom: 10px;
 923 }
 924
 925 #holds_temp_parent tr td div.format_icon {
 926     margin-top: 6px;
 927     margin-bottom: 6px;
 928     float: none;
 929 }
 930
 931 #results_header_bar {
 932     background-color: [% css_colors.accent_medium %];
 933     border-top:1px solid [% css_colors.accent_mediumdark %];
 934     border-bottom:1px solid [% css_colors.accent_mediumdark %];
 935 }
 936
 937 .results_header_lbl {
 938     [% IF rtl == 't' -%]
 939     float: right;
 940     [% ELSE -%]
 941     float: left;
 942     [% END -%]
 943     font-weight: bold;
 944     color: [% css_colors.text %];
 945     /* this border is not visible, but it keeps these labels the same size
 946     as the buttons */
 947     border: 1px solid [% css_colors.accent_medium %];
 948     background-color: [% css_colors.accent_medium %];
 949     margin: 0.5em 0.3em;
 950     padding: 0.3em;
 951 }
 952 /* we need a negative margin on the select to allow the containing <label>
 953 to determine the actual size of the element.  By doing this, we can increase
 954 the odds that the buttons and the select will be the same size, and therefore
 955 collapse correctly when the window width decreases */
 956 .results_header_lbl select {
 957     margin: -0.5em 0;
 958 }
 959
 960 #limit_to_available {
 961     vertical-align: middle;
 962 }
 963
 964 .results_header_sel {
 965     [% IF rtl == 't' -%]
 966     float: right;
 967     [% ELSE -%]
 968     float:left;
 969     [% END -%]
 970     margin:0;
 971 }
 972
 973 .results_header_nav1 {
 974     [% IF rtl == 't' -%]
 975     padding: 5px 0px 6px 7px;
 976     [% ELSE -%]
 977     padding: 5px 7px 6px 0px;
 978     [% END -%]
 979     border-bottom: 1px dotted [% css_colors.accent_light %];
 980 }
 981
 982 .results_header_nav1 .h1 {
 983     font-size: [% css_fonts.size_bigger %];
 984     font-weight:bold;
 985     color:[% css_colors.primary_fade %];
 986 }
 987
 988 .table_no_border_space {
 989   border-spacing: 0px;
 990 }
 991 .table_no_cell_pad td {
 992   padding: 0px;
 993 }
 994 .table_no_border {
 995   border-collapse: collapse;
 996 }
 997
 998 #result_table_table {
 999   margin-top:10px;
1000 }
1001
1002 #result_table_div {
1003     margin-top: 1em;
1004 }
1005
1006 tr.result_table_row > td.results_row_count,
1007 tr.result_table_row > td.result_table_pic_header,
1008 tr.result_table_row > td.result_table_title_cell {
1009     vertical-align: top;
1010 }
1011
1012 .result_metadata {
1013     [% IF rtl == 't' -%]
1014     float: right;
1015     padding-left: 2em;
1016     [% ELSE -%]
1017     float: left;
1018     padding-right: 2em;
1019     [% END -%]
1020     width: 30em;
1021 }
1022
1023 tr.result_table_row:nth-child(n+2) > td {
1024     border-top: 1px solid [% css_colors.accent_lighter2 %];
1025 }
1026
1027 tr.result_table_row > td.result_table_pic_header {
1028     [% IF rtl == 't' -%]
1029     padding-right: 1em;
1030     [% ELSE -%]
1031     padding-left: 1em;
1032     [% END -%]
1033     white-space: nowrap;
1034     width: 78px;
1035 }
1036
1037 /* styles for selecting records in the results set */
1038 .result_table_row_selected {
1039     background-color: [% css_colors.item_selected %];
1040 }
1041 #selected_records_summary, #clear_basket {
1042     margin-left: 5em;
1043 }
1044
1045 /* styles for the basket */
1046 #record_basket {
1047     [% IF rtl == 't' -%]
1048     float: left;
1049     margin-left: 5em;
1050     [% ELSE; %]
1051     float: right;
1052     margin-right: 5em;
1053     [% END; %]
1054 }
1055 #record_basket_icon {
1056     [% IF rtl == 't' -%]
1057     float: left;
1058     margin-left: 2em;
1059     [% ELSE; %]
1060     float: right;
1061     margin-right: 2em;
1062     [% END; %]
1063     position: relative;
1064 }
1065 #record_basket_count_floater {
1066     background-color: [% css_colors.accent_lighter %];
1067     position: absolute;
1068     top: -3px;
1069     right: -3px; /* relative to icon, so don't want to adjust for RTL */
1070     z-index: 2;
1071     border-radius: 50%;
1072 }
1073 #record_basket_count_floater a {
1074     text-decoration: none;
1075 }
1076 #basket_actions {
1077     [% IF rtl == 't' -%]
1078     float: left;
1079     [% ELSE; %]
1080     float: right;
1081     [% END; %]
1082 }
1083 #basket_actions select {
1084     border-color: rgb(169, 169, 169);
1085 }
1086
1087 .result_number {
1088     [% IF rtl == 't' -%]
1089     padding-right: 1em;
1090     [% ELSE -%]
1091     padding-left: 1em;
1092     [% END -%]
1093     white-space: nowrap;
1094 }
1095
1096 .result_count_number {
1097    font-weight: bold;
1098 }
1099
1100 .result_table_subtable {
1101     width: 100%;
1102     padding-top: 1em;
1103 }
1104
1105 div.result_table_utils_cont {
1106     [% IF rtl == 't' -%]
1107     text-align: right;
1108     float: right;
1109     [% ELSE -%]
1110     text-align:left;
1111     float: left;
1112     [% END -%]
1113 }
1114
1115 #myopac_summary_div p {
1116     margin:0;
1117     margin-bottom: 10px;
1118 }
1119
1120 #acct_sum_checked_table td {
1121     padding-bottom:5px;
1122 }
1123
1124 .zero_search_hits_main {
1125     [% IF rtl == 't' -%]
1126     float: right;
1127     [% ELSE -%]
1128     float:left;
1129     [% END -%]
1130     width:300px;
1131     margin-top: 2ex;
1132 }
1133 .zero_search_hits_saved {
1134     [% IF rtl == 't' -%]
1135     float: right;
1136     margin-left: 2em;
1137     [% ELSE -%]
1138     float:left;
1139     margin-right: 2em;
1140     [% END -%]
1141     width:200px;
1142     margin-top: 2ex;
1143 }
1144
1145 #zero_search_hits p {
1146     margin-top:0;
1147 }
1148
1149 #zero_hits_term {
1150     font-weight: bold;
1151 }
1152
1153 #zero_search_hits #spell_check_link {
1154 }
1155
1156 #zero_search_hits #zero_hits_suggestions {
1157 }
1158
1159 #lowhits_help {
1160     [% IF rtl == 't' -%]
1161     float: left;
1162     [% ELSE -%]
1163     float: right;
1164     [% END-%]
1165     width: 353px;
1166     background-color: [% css_colors.accent_light %];
1167     padding: 10px;
1168     margin-top: 7px;
1169 }
1170
1171 .results_info_table td {
1172     [% IF rtl == 't' -%]
1173     padding-left: 10px;
1174     [% ELSE -%]
1175     padding-right: 10px;
1176     [% END-%]
1177 }
1178
1179 #myopac_holds_main_table {
1180     border-collapse: collapse;
1181 }
1182
1183 #myopac_holds_main_table td {
1184     border: 1px solid [% css_colors.border_dark %];
1185
1186 }
1187
1188 .myopac-hold-available {
1189     color: [% css_colors.text_greatnews %];
1190     font-weight: bold;
1191 }
1192
1193 .myopac-hold-suspended {
1194     color: [% css_colors.text_badnews %];
1195     font-weight: bold;
1196 }
1197
1198 #myopac_prefs_div .data_grid {
1199     border-collapse:collapse;
1200 }
1201
1202 #myopac_prefs_div .data_grid td {
1203     [% IF rtl == 't' -%]
1204     padding: 6px 17px 7px 0px;
1205     [% ELSE -%]
1206     padding:6px 0px 7px 17px;
1207     [% END -%]
1208     background-color:[% css_colors.accent_ultralight %];
1209     border-bottom:3px solid [% css_colors.background %];
1210 }
1211
1212 .header_middle {
1213     [% IF rtl == 't' -%]
1214     padding: 0px 0px 0px 7px;
1215     [% ELSE -%]
1216     padding: 0px 7px 0px 0px;
1217     [% END -%]
1218     height:22px;
1219     font-size: [% css_fonts.size_bigger %];
1220     font-weight:bold;
1221     color:[% css_colors.primary_fade %];
1222     border-bottom: 1px dotted [% css_colors.accent_light %];
1223     clear: both;
1224 }
1225
1226 .header_middle a {
1227     font-weight: normal;
1228 }
1229
1230 #acct_sum_block {
1231     [% IF rtl == 't' -%]
1232     float: right;
1233     clear: right;
1234     [% ELSE -%]
1235     float: left;
1236     clear: left;
1237     [% END -%]
1238 }
1239
1240 .acct_sum_table {
1241     border-collapse: collapse;
1242     background-color: [% css_colors.accent_ultralight %];
1243 }
1244
1245 .acct_sum_table tr {
1246     border-bottom: 2px solid white;
1247 }
1248
1249 .acct_sum_table td {
1250     padding: 1em;
1251 }
1252
1253 .acct_sum_table a {
1254     text-transform: none;
1255     position:relative;
1256     top:-1px;
1257 }
1258
1259 .acct_sum_table .view_link {
1260     font-weight: normal;
1261 }
1262
1263 #myopac_sum_fines {
1264     [% IF rtl == 't' -%]
1265     float: left;
1266     padding: 15px 23px 0px 0px;
1267     [% ELSE -%]
1268     float:right;
1269     padding: 15px 0px 0px 23px;
1270     [% END -%]
1271     width: 177px;
1272 }
1273
1274 .cc_logo_img
1275 {
1276    width: 79%;
1277     [% IF rtl == 't' -%]
1278       padding-right: .5em;
1279     [% ELSE -%]
1280        padding-left: .5em;
1281     [% END -%]
1282 }
1283
1284 #myopac_sum_fines_placehold {
1285     [% IF rtl == 't' -%]
1286     float: left;
1287     [% ELSE -%]
1288     float: right;
1289     [% END -%]
1290     width: 177px;
1291     height: 166px;
1292 }
1293
1294 .acct_holds_temp td {
1295     [% IF rtl == 't' -%]
1296     text-align: right;
1297     [% ELSE -%]
1298     text-align: left;
1299     [% END -%]
1300 }
1301
1302 #acct_checked_tabs .align, #acct_holds_tabs .align, #acct_prefs_tabs .align {
1303     [% IF rtl == 't' -%]
1304     float: right;
1305     [% ELSE -%]
1306     float:left;
1307     [% END -%]
1308 }
1309
1310 #acct_checked_main_header, #acct_holds_main_header, #acct_fines_main_header, #acct_fees_main_header, #acct_checked_hist_header, #acct_holds_hist_header, #acct_list_header, #acct_list_header_anon, #temp_list_holds, #acct_messages_main_header, #ebook_circs_main_table, #ebook_holds_main_table {
1311     border-collapse: collapse;
1312 }
1313
1314 .acct_fines_header
1315 {
1316    width: 100%;
1317    padding-bottom:1em;
1318    [% IF rtl == 't' -%]
1319    float: right;
1320    [% ELSE -%]
1321    float:left;
1322    [% END -%]
1323 }
1324
1325 /* tables for entering payment information */
1326 #acct_fines_main_header,
1327 #acct_fees_main_header
1328 {
1329    width: 100%;
1330 }
1331
1332 /* tables for entering payment information */
1333 #billing_info_table
1334 {
1335     width: auto;
1336     [% IF rtl == 't' -%]
1337     float: right;
1338     [% ELSE -%]
1339     float:left;
1340     [% END -%]
1341     display:inline;
1342     padding-left: 1em;
1343     padding-right: 1em;
1344 }
1345
1346 /* tables for entering payment information */
1347 #credit_card_info_table
1348 {
1349     width: auto;
1350     display: block;
1351 }
1352
1353 /* tables for entering payment information */
1354 #billing_info_table td,
1355 #credit_card_info_table td
1356 {
1357    [% IF rtl == 't' -%]
1358     padding-right: .5em;
1359     [% ELSE -%]
1360     padding-left: .5em;
1361     [% END -%]
1362
1363 }
1364
1365 /* div for the payment buttons with the total */
1366 #payment_actions
1367 {
1368    width: auto;
1369    display: block;
1370    padding: 1em 0 0 1em;
1371    text-align:center;
1372 }
1373
1374 /* Stripe's payment form */
1375 #payment-form
1376 {
1377     background-color: [% css_colors.accent_ultralight %];
1378     width: 50%;
1379 }
1380 #card-element
1381 {
1382     padding: 10px;
1383 }
1384
1385 /* text to state what is seen on cc statement */
1386 .cc_disclaimer
1387 {
1388    font-style:italic;
1389    font-size: 90%;
1390    color:[% css_colors.primary_fade %];
1391 }
1392
1393 .hold_notes {
1394     text-transform: none;
1395     font-weight: normal;
1396 }
1397
1398 .hold_note_title { font-weight: bold; }
1399 #acct_checked_main_header td, #acct_holds_main_header td, #acct_fines_main_header td, #acct_fines_confirm_header td, #acct_fees_main_header td,#acct_checked_hist_header td, #acct_holds_hist_header td, #acct_list_header td, #acct_list_header_anon td, #temp_list_holds td, #acct_messages_main_header td, #ebook_circs_main_table td, #ebook_holds_main_table td, #acct_reservations_main_header td {
1400     background-color: [% css_colors.background %];
1401     padding: 10px;
1402          border: 1px solid #d3d3d3;
1403 }
1404
1405 #acct_checked_main_header th, #acct_holds_main_header th, #acct_fines_main_header th, #acct_fines_confirm_header th, #acct_fees_main_header th, #acct_checked_hist_header th, #acct_holds_hist_header th, #acct_list_header th, #acct_list_header_anon th, #temp_list_holds th, #acct_messages_main_header th, #ebook_holds_main_table th, #acct_reservations_main_header th {
1406     [% IF rtl == 't' -%]
1407     text-align: right;
1408     [% ELSE -%]
1409     text-align: left;
1410     [% END -%]
1411     padding: 0px 10px 0px 10px;
1412 }
1413
1414 #acct_list_header select, #acct_list_header_anon select {
1415     font-weight:normal;
1416     text-transform:none;
1417 }
1418
1419 .search_catalog_lbl {
1420     font-size: [% css_fonts.size_bigger %];
1421 }
1422 .adv_search_catalog_lbl {
1423     font-size: [% css_fonts.size_bigger %];
1424 }
1425
1426 .browse_the_catalog_lbl {
1427     font-size: [% css_fonts.size_bigger %];
1428 }
1429
1430 .lbl1 {
1431     font-size: [% css_fonts.size_bigger %];
1432     font-weight:bold;
1433 }
1434
1435 .lbl2 {
1436     font-size: [% css_fonts.size_smaller %];
1437     font-weight:normal;
1438     position:relative;
1439     top:3px;
1440     max-width:300px;
1441 }
1442
1443 #myopac_tabs, #adv_search_parent, #fines_payments_wrapper {
1444     background-color: [% css_colors.primary_fade %];
1445     padding-top:5px;
1446     margin-bottom:20px;
1447 }
1448
1449 #fines_payments_wrapper {
1450     padding-left: 5px;
1451     padding-right: 5px;
1452 }
1453
1454 .myopac_payments_table th {
1455     [% IF rtl == 't' -%]
1456     text-align: right; }
1457     [% ELSE -%]
1458     text-align: left;
1459     [% END -%]
1460 }
1461
1462 .myopac_payments_table thead th { border-bottom: 1px dashed [% css_colors.accent_darker %]; }
1463 .myopac_payments_table thead th:first-child { width: 8em; }
1464 .myopac_payments_table tbody tr:nth-child(odd) { background-color: [% css_colors.accent_lighter %]; }
1465 .myopac_payments_table form { display: inline; }
1466 .myopac_payments_table input[type="submit"] { padding: 1px; }
1467
1468 .cc_header
1469 {
1470    padding-top:1em;
1471    background-color: [% css_colors.accent_lighter %];
1472 }
1473
1474 .payment-error {
1475     font-weight: bold; color: [% css_colors.text_alert %];
1476     padding: 10px; border: 1px solid [% css_colors.accent_medium_dark %];
1477 }
1478
1479 .payment-processing {
1480     font-weight: bold;
1481     color: [% css_colors.text_greatnews %];
1482     font-size: [% css_fonts.size_bigger %];
1483     padding: 10px; border: 1px solid [% css_colors.accent_medium_dark %];
1484     text-align: center;
1485 }
1486 #adv_search_input { width: 100%; }
1487 #adv_search_parent {
1488     margin-bottom:0px;
1489 }
1490 #search-submit-spinner {
1491     height: 16px;
1492     width: 16px;
1493 }
1494 div.adv_search_available {
1495     margin-top: 1em;
1496 }
1497
1498 #myopac_loading {
1499     width:100%;
1500     text-align:center;
1501     padding-top:20px;
1502     font-size: [% css_fonts.size_bigger %];
1503     font-weight:bold;
1504 }
1505
1506 .chili_link {
1507     width:100px !important;
1508     text-align: center !important;
1509 }
1510
1511 .chili_review div.chili_link div {
1512     margin: auto;
1513 }
1514
1515 /* styling for advanced search filters that display with searchbar */
1516
1517 #adv_filter_results_block h4 { display: inline; }
1518
1519 #adv_filter_results_block {
1520     margin-top: 6px;
1521 }
1522
1523 .adv_filter_results_block_label {
1524     font-weight:bold;
1525     [% IF rtl == 't' -%]
1526     padding: 4px 12px 4px 0px;
1527     [% ELSE -%]
1528     padding: 4px 0px 4px 12px;
1529     [% END -%]
1530 }
1531
1532 .adv_filter_results_group {
1533     font-size: 12px;
1534     display: inline-block;
1535     background-color:  [% css_colors.accent_lighter2 %];
1536     border-style: solid;
1537     border-color: [% css_colors.accent_medium %];
1538     border-width: 1px;
1539     border-radius: 4px;
1540     padding: 2px 4px 2px 4px;
1541 }
1542
1543 .adv_filter_results_group_wrapper {
1544     display: inline-block;
1545     [% IF rtl == 't' -%]
1546     margin-right: 1em;
1547     [% ELSE -%]
1548     margin-left: 1em;
1549     [% END -%]
1550     margin-bottom: 8px;
1551 }
1552
1553 .adv_filter_results_group_header {
1554     display: inline-block;
1555 }
1556
1557 .adv_filter_results_group_values {
1558     display: inline;
1559 }
1560
1561 .adv_search_result_filter {
1562     display: inline-block;
1563 }
1564
1565 .remove_filter {
1566     font-size: 16px;
1567     [% IF rtl == 't' -%]
1568     margin-right: 3px;
1569     [% ELSE -%]
1570     margin-left: 3px;
1571     [% END -%]
1572 }
1573
1574 a.remove_filter {
1575     text-decoration: none;
1576     color: [% css_colors.accent_dark %];
1577 }
1578
1579 #filter_hits {
1580      display: inline-block;
1581 }
1582
1583 #refine_search_link {
1584     display: inline-block;
1585 }
1586
1587 [%- IF we_want_to_turn_on_facet_styling.defined; %]
1588 /* some facet styling */
1589 .facetClassContainer { margin: 2px; border: 1px solid [% css_colors.accent_light %]; }
1590 .facetClassLabelContainer { border: 1px solid [% css_colors.accent_light %]; }
1591 .facetClassLabel { font-weight: bold; text-align: center; }
1592 .facetFieldContainer {  }
1593 .facetFieldLabel { padding-left: 2px; margin-top: 5px; margin-bottom: 5px; font-weight: bold; text-align: left; }
1594 .extraFacetFieldsWrapper { }
1595 .toggleExtraFacetFieldsButton { float: right; margin: 0px; padding: 0px; }
1596 .facetFieldLineCount {
1597     display: inline-block;
1598     border-right: 1px solid [% css_colors.accent_light %];
1599     color: [% css_colors.accent_mediumdark %];
1600     width: 3em;
1601     margin-right: 3px
1602 }
1603 .facetField { border-top: 1px solid [% css_colors.accent_light %]; }
1604 .facetFields { padding-left: 5px; }
1605 .facetFieldLineValue { overflow: hidden; text-overflow: ellipsis; }
1606 [%- END -%]
1607
1608 div#facet_sidebar {
1609     [% IF rtl == 't' -%]
1610     float: right;
1611     margin-left: 1em;
1612     [% ELSE -%]
1613     float: left;
1614     margin-right: 1em;
1615     [% END-%]
1616 }
1617
1618 .facet_box_temp {
1619     padding-bottom:3px;
1620 }
1621
1622 .facet_box_temp .header {
1623     height: 2.3em;
1624     background-color:[% css_colors.primary %];
1625     border-top-left-radius: 5px;
1626     border-top-right-radius: 5px;
1627     font-weight:bold;
1628     color:[% css_colors.text_invert %];
1629     padding-top:4px;
1630 }
1631
1632 .facet_box_temp.filter_box_temp .header {
1633     background-color: [% css_colors.background_invert %] !important;
1634 }
1635
1636 .filter_box_label {
1637     color: [% css_colors.background_invert %];
1638     font-weight:bold;
1639     padding-top:4px;
1640     padding-bottom:4px;
1641     padding-left:12px;
1642 }
1643
1644 .facet_box_temp .header .title {
1645     [% IF rtl == 't' -%]
1646     float: right;
1647     padding-right: 12px;
1648     [% ELSE -%]
1649     float:left;
1650     padding-left:12px;
1651     [% END -%]
1652     padding-top:6px;
1653 }
1654
1655 /* in this context, where h4 is primarily for structure,
1656    avoid the normal large font and margin for h4's */
1657 .facet_box_temp h4 {
1658     font-size : 100%;
1659     margin: 0px;
1660 }
1661
1662 .facet_box_temp .header a.button {
1663     [% IF rtl == 't' -%]
1664     float: left;
1665     padding-left: 6px;
1666     [% ELSE -%]
1667     float:right;
1668     padding-right:6px;
1669     [% END -%]
1670     padding-top:6px;
1671     color:[% css_colors.text_invert %];
1672 }
1673
1674 .facet_box_wrapper .box_wrapper .box {
1675     border-top:1px solid [% css_colors.border_standard %];
1676     border-left:1px solid [% css_colors.border_standard %];
1677     border-right:1px solid [% css_colors.border_standard %];
1678     padding: 0 0.5em;
1679     width: 14em;
1680     overflow: hidden;
1681 }
1682
1683 .filter_box_wrapper {
1684     margin-bottom: 3px;
1685     padding: 2px;
1686     border: 1px solid [% css_colors.background_invert %];
1687     border-radius: 3px;
1688     font-weight:bold;
1689     padding-top:4px;
1690 }
1691
1692 .facet_template {
1693     box-sizing: border-box;
1694     -moz-box-sizing: border-box;
1695     display: table;
1696     margin: 0.5em 0;
1697     width: 100%;
1698 }
1699
1700 .facet_template div {
1701     display: table-cell;
1702     padding: 2px;
1703 }
1704
1705 .facet_template.filter_template div {
1706     padding: 0px !important;
1707 }
1708
1709 .facet_template .count {
1710     text-align: right;
1711     color: [% css_colors.accent_mediumdark %];
1712 }
1713
1714 .facet_template_selected {
1715     background-color: [% css_colors.accent_lighter2 %];
1716     border: 1px solid [% css_colors.accent_medium %];
1717 }
1718
1719 #footer-wrap {
1720     background-color: [% css_colors.primary %];
1721     background-image: -moz-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1722     background-image: -o-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1723     background-image: -webkit-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1724     background-image: linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1725 }
1726
1727 #footer {
1728     [% IF rtl == 't' -%]
1729     margin-right: 1em;
1730     [% ELSE -%]
1731     margin-left: 1em;
1732     [% END -%]
1733     padding-top:5px;
1734     padding-bottom: 10px;
1735     font-size: [% css_fonts.size_small %];
1736 }
1737
1738 #footer a {
1739     color: [% css_colors.text_invert %];
1740     text-decoration: none;
1741     text-shadow: 0 0 0.2em [% css_colors.primary %], 0 0 0.2em [% css_colors.primary %];
1742 }
1743
1744 #copyright_text, #footer_logo {
1745     color: [% css_colors.text_invert %];
1746 }
1747
1748 .color_4 {
1749     font-weight: bold;
1750 }
1751
1752 .advanced_div { padding-top: 15px; }
1753 #adv_global_search { width: 100%; }
1754 #adv_global_search select { width: 13em; }
1755 #adv_global_addrow td { padding-top: 7px; }
1756 [% IF rtl == 't' -%]
1757 #adv_global_addrow.td-search-left{text-align:right;}
1758 [% END -%]
1759 #adv_global_input_table { width: 100%; }
1760 #adv_global_input_table select { width: 7em; }
1761 .adv_adv_link {
1762     font-size: [% css_fonts.size_smaller %];
1763     color: [% css_colors.text_alert %];
1764 }
1765 #acct_prefs_header {
1766     [% IF rtl == 't' -%]
1767     float: right;
1768     [% ELSE -%]
1769     float: left;
1770     [% END -%]
1771 }
1772 .search_page_nav_link {
1773     cursor: pointer;
1774     [% IF rtl == 't' -%]
1775     padding-right: 1em;
1776     [% ELSE -%]
1777     padding-left: 1em;
1778     [% END -%]
1779 }
1780 #opac.result.sort { width: 160px; }
1781 .renew-summary, .message-update-summary { font-size: [% css_fonts.size_bigger %]; font-style: italic; margin: 0.5ex 0; }
1782 .failure-text {
1783     [% IF rtl == 't' -%]
1784     margin-right: 4em;
1785     [% ELSE -%]
1786     margin-left: 4em;
1787     [% END -%]
1788     font-style: italic;
1789     color: [% css_colors.text_alert %];
1790 }
1791 .refine-controls { font-size: [% css_fonts.size_bigger %]; padding: 0.5ex 0; }
1792 #adv_search_refine input[type=text] { border: 1px inset [% css_colors.accent_light %] !important; }
1793 #adv_search_refine select { border: 1px inset [% css_colors.accent_light %] !important; }
1794 #adv_search_refine {
1795     [% IF rtl == 't' -%]
1796     padding-right: 5em;
1797     [% ELSE -%]
1798     padding-left: 5em;
1799     [% END -%]
1800     background-color: [% css_colors.accent_lighter2 %];
1801     margin: 2ex 0;
1802 }
1803 .row-remover { position: relative; top: 1px; vertical-align: middle; }
1804 .subtle-button {
1805     background-color: [% css_colors.background %];
1806     color: [% css_colors.primary %]; text-decoration: none;
1807     padding: 0; border: 0; margin: 0;
1808     vertical-align: middle;
1809 }
1810 .subtle-button:hover { text-decoration: underline; cursor: pointer; }
1811 .no-dec:hover { text-decoration: none; }
1812 .pending-addr td { background-color: [% css_colors.background_alert %] !important; border: 0 !important; }
1813
1814 #account-update-email table { text-align: center; padding: 20px; margin-top: 18px; border-collapse: collapse; }
1815 #account-update-email table td {
1816     [% IF rtl == 't' -%]
1817     text-align: right;
1818     [% ELSE -%]
1819     text-align: left;
1820     [% END -%]
1821     padding: 5px 15px 5px 15px;
1822     border-bottom: 1px solid [% css_colors.accent_lighter %];
1823 }
1824 #account-update-email-error { font-size: [% css_fonts.size_biggest %]; padding: 10px; border:1px solid [% css_colors.border_standard %];}
1825 a.dash-link:hover { text-decoration: underline !important; }
1826 #list_create_table td { vertical-align: middle; padding: 0 8px; }
1827 #list_create_table {
1828     background-color: [% css_colors.accent_light %];
1829     padding-bottom: 4px;
1830     margin-bottom: 10px;
1831     border-bottom: 1px dotted [% css_colors.accent_medium %];
1832     width: 100%;
1833 }
1834 .list_create_table_label {
1835     width: 30%;
1836 }
1837 #list_description, #list_create_name {
1838         width: 500px;
1839 }
1840 .list-create-table-buttons input[type=image] { margin-top: 2px; }
1841 .result_table_format_cell { padding: 0px 10px; text-align: center; }
1842 .results_row_count { font-weight: bold; }
1843 #hold_editor h1 { font-size: [% css_fonts.size_bigger %]; font-weight: bold; }
1844 #hold_editor h2 { font-size: [% css_fonts.size_big %]; font-weight: normal; text-indent: 2em; font-style: italic; }
1845 #hold_editor h1, #hold_editor h2 { margin: 2px 0; }
1846 #hold_editor_table { background-color: [% css_colors.accent_lighter %]; padding: 0.5em; }
1847 #hold_editor_table th {
1848     [% IF rtl == 't' -%]
1849     text-align: left;
1850     padding-left: 1em;
1851     [% ELSE -%]
1852     text-align: right;
1853     padding-right: 1em;
1854     [% END -%]
1855 }
1856 #hold_editor_table td { padding: 0.25em 0; }
1857 .fmt-note {
1858     [% IF rtl == 't' -%]
1859     padding-right: 1em !important;
1860     [% ELSE -%]
1861     padding-left: 1em !important;
1862     [% END -%]
1863     vertical-align: middle;
1864 }
1865 .hold-editor-controls { text-align: center; padding-top: 1em !important; }
1866 .hold-editor-controls a { padding-left: 2em; }
1867
1868 .text-right {
1869     [% IF rtl == 't' -%]
1870     text-align: left;
1871     [% ELSE -%]
1872     text-align: right;
1873     [% END -%]
1874 }
1875 .text-right-top {
1876     [% IF rtl == 't' -%]
1877     text-align: right;
1878     [% ELSE -%]
1879     vertical-align: top;
1880     [% END -%]
1881 }
1882 .rdetail-author-div, .course-instructor-div {
1883     padding-bottom: 10px;
1884     display: inline-block;
1885 }
1886
1887 .invisible { visibility: hidden; }
1888 .rdetail-extras-summary { margin: 10px; }
1889 .staff-hold { background-color: [% css_colors.accent_lightest %]; }
1890 .expert-search tbody tr th {
1891     [% IF rtl == 't' -%]
1892     text-align: left;
1893     padding-right: 2em;
1894     [% ELSE -%]
1895     text-align: right;
1896     padding-left: 2em;
1897     [% END -%]
1898 }
1899 .expert-search-row { padding-top: 10px; }
1900 #adv_expert_row label { font-weight: bold; }
1901
1902 .bookshelf tr.browse_border td {
1903     border-bottom: 1px dashed [% css_colors.accent_dark %];
1904     font-size: 1px;
1905     height: 1px;
1906     padding-bottom: 1ex;
1907 }
1908 .cn_browse_item { padding: 2ex; }
1909 .results-paginator-list {
1910     [% IF rtl == 't' -%]
1911     padding-right: 1em;
1912     [% ELSE -%]
1913     padding-left: 1em;
1914     [% END -%]
1915 }
1916 .results-paginator-selected { color: [% css_colors.text_alert %]; }
1917 .inactive-hold { background-color: [% css_colors.accent_lightest %]; }
1918 .unread-patron-message { font-weight: bold; }
1919
1920 #hold-items-list td { padding: 5px; margin-bottom: 20px; }
1921 .hold-items-list-title {
1922   font-size: [% css_fonts.size_bigger %];
1923   margin-bottom: 20px;
1924 }
1925 .hold-items-list-problem { color: [% css_colors.text_alert %]; }
1926
1927 .hold_success_links > span { margin: 0 2em; }
1928
1929 .radio-parts-selection {
1930    width: 75%;
1931    margin-bottom: 20px;
1932 }
1933
1934 .parts-radio-option {
1935   display: inline-block;
1936   width:15em;
1937 }
1938
1939 .mr_holds_no_formats {
1940   [% IF rtl == 't' -%]
1941   margin-right: 25px;
1942   [% ELSE -%]
1943   margin-left: 25px;
1944   [% END -%]
1945   padding: 5px;
1946   font-size: 110%;
1947   font-weight: bold;
1948   color: [% css_colors.text_invert %];
1949   background-color: [% css_colors.primary %];
1950 }
1951
1952 .holds_item_row_separator td {
1953   border-top: 2px dashed [% css_colors.accent_medium %];
1954 }
1955
1956 .big-strong {font-weight: bold; font-size: [% css_fonts.size_bigger %]; }
1957
1958 .results_header_btns, .results_header_sel {
1959     [% IF rtl == 't' -%]
1960     float: right;
1961     [% ELSE -%]
1962     float:left;
1963     [% END -%]
1964 }
1965
1966 /*
1967  * .various_containers a = shortcut to putting .opac-button on every 'a' with
1968  *     the tradeoff of increased stylesheet complexity (TODO: rethink?)
1969  */
1970
1971 .opac-multiline-button > a,
1972 .opac-button, .results_header_btns a, #simple-detail-view-links a, .dash_account_buttons a {
1973     color: [% css_colors.button_text %];
1974     font-weight: bold;
1975     text-decoration: none;
1976     cursor: pointer !important;
1977     border-radius: 5px;
1978     border: 1px solid [% css_colors.primary %];
1979     background-color:  [% css_colors.primary_fade %];
1980     margin: 0.5em;
1981     padding: 0.3em;
1982     display: inline-block;
1983 }
1984
1985 .opac-multiline-button > a:hover,
1986 .opac-button:hover, .results_header_btns a:hover, #simple-detail-view-links a:hover, #dash_wrapper a.opac-button:hover {
1987     background-color: [% css_colors.primary %];
1988 }
1989
1990 .opac-button:disabled {
1991     color: [% css_colors.accent_medium %];
1992     cursor: pointer !important;
1993     border: 1px solid [% css_colors.accent_light %];
1994     background-color: [% css_colors.accent_lighter %];
1995 }
1996
1997 /* Firefox adds its own special space to inputs; this gets us closer */
1998 button.opac-button::-moz-focus-inner, input.opac-button::-moz-focus-inner {
1999     padding: 0;
2000     border: 0;
2001 }
2002
2003 .opac-button-header, #dash_wrapper .opac-button {
2004     background-color: [% css_colors.control %];
2005     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
2006     font-size: [% css_fonts.size_base %];
2007 }
2008 a.opac-button-header:hover, #dash_wrapper a.opac-button:hover {
2009     border-color: [% css_colors.control %];
2010 }
2011
2012 .opac-multiline-button > a {
2013     display: inline-block;
2014 }
2015
2016 #myopac_checked_div {
2017     padding: 0px;
2018 }
2019
2020 .rdetail-mfhd-head {
2021     margin-top: 5px;
2022     padding-top: 5px;
2023     background-color: [% css_colors.table_heading %];
2024 }
2025
2026 .rdetail-mfhd-type {
2027     [% IF rtl == 't' -%]
2028     padding-right: 1em;
2029     [% ELSE -%]
2030     padding-left: 1em;
2031     [% END -%]
2032 }
2033
2034 .rdetail-mfhd-bottom {
2035     border-bottom: thin solid [% css_colors.border_dark %];
2036     width: 100%;
2037 }
2038
2039 #rdetail_record_details {
2040     clear: both;
2041     margin-top: 1em;
2042 }
2043
2044 .rdetail_content {
2045     [% IF rtl == 't' -%]
2046     margin-right: 1.5em;
2047     padding-right: 1.5em;
2048     [% ELSE -%]
2049     margin-left: 1.5em;
2050     padding-left: 1.5em;
2051     [% END -%]
2052 }
2053
2054 .rdetail_content_type, .rdetail_subject_type {
2055     vertical-align: top;
2056     font-weight: bold;
2057 }
2058
2059 .bookbag-item-row td { vertical-align: top; }
2060
2061 .error { color: [% css_colors.text_alert %]; font-weight: bold; }
2062 .success {
2063     color: [% css_colors.text_greatnews %];
2064     font-weight: bold;
2065 }
2066
2067 .rdetail_related_subjects {
2068     margin-top: 1.5em;
2069 }
2070
2071 .rdetail_related_series {
2072     margin-top: 1.5em;
2073 }
2074
2075 #rdetail_openurl {
2076     margin-top: 1em;
2077 }
2078
2079 .rdetail_openurl_entry {
2080     [% IF rtl == 't' -%]
2081     margin-right: 1em;
2082     padding-right: 1em;
2083     [% ELSE -%]
2084     margin-left: 1em;
2085     padding-left: 1em;
2086     [% END -%]
2087 }
2088 .bookbag-controls-holder { width: 100%; }
2089 .bookbag-controls-holder:nth-child(odd) { background-color: [% css_colors.accent_lighter2 %]; }
2090 .bookbag-controls-holder:nth-child(even) { background-color: [% css_colors.accent_lightest %]; }
2091 .bookbag-controls-holder .most {
2092     [% IF rtl == 't' -%]
2093     padding-right: 0;
2094     margin-left: 5em;
2095     [% ELSE -%]
2096     padding-left: 0;
2097     margin-right: 5em;
2098     [% END -%]
2099 }
2100 .bookbag-controls-title-block {
2101     [% IF rtl == 't' -%]
2102     float:right;
2103     [% ELSE -%]
2104     float:left;
2105     [% END -%]
2106     width:40%;
2107 }
2108 .bookbag-controls-button-block {
2109     [% IF rtl == 't' -%]
2110     float:right;
2111     [% ELSE -%]
2112     float:left;
2113     [% END -%]
2114     width:50%;
2115 }
2116 h2.bookbag-name { margin-bottom: 0em; padding-bottom: 0em; }
2117 .bookbag-share .fixed { min-width: 4em; }
2118 .bookbag-specific {
2119     [% IF rtl == 't' -%]
2120     margin-right: 1em;
2121     [% ELSE -%]
2122     margin-left: 1em;
2123     [% END -%]
2124 }
2125 .bookbag-specific div.sort {
2126     [% IF rtl == 't' -%]
2127     float: right;
2128     text-align: right;
2129     margin-right: 15px;
2130     [% ELSE -%]
2131     float: left;
2132     text-align: left;
2133     margin-left: 15px;
2134     [% END -%]
2135     width: 40%;
2136 }
2137 .bookbag-specific div.meta {
2138     background-color: [% css_colors.accent_light %];
2139     [% IF rtl == 't' -%]
2140     float: left;
2141     text-align: left;
2142     [% ELSE -%]
2143     float: right;
2144     text-align: right;
2145     [% END -%]
2146     width: 54%;
2147     border: 1px solid [% css_colors.accent_light %];
2148     padding: 5px;
2149     margin-top: 5px;
2150 }
2151 #bbag-name-desc-form tr th { vertical-align: middle; }
2152 #bbag-name-desc-form .saver { vertical-align: middle; text-align: center; }
2153 .bookbag-description {
2154     padding-top: 0em;
2155     font-style: italic;
2156     max-width: 40em;
2157 }
2158 .bbag-edit-desc-label {
2159     [% IF rtl == 't' -%]
2160     float:right;
2161     [% ELSE -%]
2162     float:left;
2163     [% END -%]
2164     width:8em;
2165 }
2166 .bbag-edit-desc-save {
2167     clear:both;
2168     margin-bottom:10px;
2169 }
2170 #bbag-edit-description {
2171     width: 20em;
2172     [% IF rtl == 't' -%]
2173     float:right;
2174     [% ELSE -%]
2175     float:left;
2176     [% END -%]
2177 }
2178 #bbag-edit-name {
2179     width: 20em;
2180     [% IF rtl == 't' -%]
2181     float: right;
2182     [% ELSE -%]
2183     float: left;
2184     [% END -%]
2185 }
2186 .bbag-action {
2187     [% IF rtl == 't' -%]
2188     margin-right: 15px;
2189     [% ELSE -%]
2190     margin-left: 15px;
2191     [% END -%]
2192 }
2193 .bbag-navigate-list {
2194     [% IF rtl == 't' -%]
2195     padding-right: 32px;
2196     float:right;
2197     [% ELSE -%]
2198     padding-left: 32px;
2199     float:left;
2200     [% END -%]
2201 }
2202 .bbag-navigate-list-pages {
2203     [% IF rtl == 't' -%]
2204     padding-right: 10px;
2205     float:right;
2206     [% ELSE -%]
2207     padding-left: 10px;
2208     float:left;
2209     [% END -%]
2210 }
2211 textarea { font-family: sans-serif; }
2212 table.bookbag-specific {
2213     border-right: 1px solid [% css_colors.accent_dark %];
2214     border-bottom: 1px solid [% css_colors.accent_medium %];
2215     margin-bottom: 2ex;
2216     width: 100%;
2217 }
2218 .bookbag-share {
2219     [% IF rtl == 't' -%]
2220     float: right;
2221     padding: 0px 10px 0px 0px;
2222     [% ELSE -%]
2223     float: left;
2224     padding: 0px 0px 0px 10px;
2225     [% END -%]
2226 }
2227 .bookbag-share .fixed { min-width: 6em; }
2228 .bookbag-controls {
2229     [% IF rtl == 't' -%]
2230     float: right;
2231     padding: 0px 10px 0px 0px;
2232     [% ELSE -%]
2233     float: left;
2234     padding: 0px 0px 0px 10px;
2235     [% END -%]
2236 }
2237 .bookbag-specific td.list_checkbox {
2238     [% IF rtl == 't' -%]
2239     padding-right: 10px !important;
2240     [% ELSE -%]
2241     padding-left: 10px !important;
2242     [% END -%]
2243 }
2244 .bookbag-specific td.list_entry {
2245     min-width: 10em;
2246     [% IF rtl == 't' -%]
2247     padding-right: 5px !important;
2248     [% ELSE -%]
2249     padding-left: 5px !important;
2250     [% END -%]
2251 }
2252 .bookbag-specific td.list_actions {
2253     white-space: nowrap !important;
2254 }
2255 .bookbag-paginator-selected { color: [% css_colors.text_alert %]; }
2256
2257 .list_is_empty {
2258     padding: 8px 0px 6px 0px;
2259     width: 100%;
2260     border: 0;
2261     font-size: [% css_fonts.size_bigger %];
2262     text-align: center;
2263     font-style: italic;
2264 }
2265 .save-notes { padding-bottom: 1.5ex; }
2266
2267 .nonbreaking-wrapper {
2268     display: inline-block;
2269 }
2270
2271 /* Moved from semiauto.css */
2272 .adv_global_input_container {
2273     border-bottom: none;
2274     clear: both;
2275 }
2276 .opac-auto-013 {
2277     border-bottom: none;
2278     *height: 0px;
2279 }
2280 .adv_global_filter_sort {
2281     border: none;
2282     width: 100%;
2283 }
2284 .clear-both { clear: both; }
2285 .common-no-pad {
2286     clear: both;
2287     height: 0px;
2288     margin: 0px;
2289     padding: 0px;
2290 }
2291 .common-full-pad {
2292     clear: both;
2293     height: 15px;
2294 }
2295 .alert { color: [% css_colors.text_alert %]; }
2296 .float-left {
2297     [% IF rtl == 't' -%]
2298     float: right;
2299     [% ELSE -%]
2300     float: left;
2301     [% END -%]
2302 }
2303 .float-right {
2304     [% IF rtl == 't' -%]
2305     float: left;
2306     [% ELSE -%]
2307     float: right;
2308     [% END -%]
2309 }
2310
2311 .saved-searches-header { width: 100%; font-weight: bold; font-size: [% css_fonts.size_bigger %]; }
2312 .saved-searches-header .button {
2313     [% IF rtl == 't' -%]
2314     float: left;
2315     [% ELSE -%]
2316     float: right;
2317     width: 28px;
2318     [% END -%]
2319 }
2320 .saved-searches-header .text {
2321     [% IF rtl == 't' -%]
2322     float: right;
2323     padding-left: 1em;
2324     [% ELSE -%]
2325     float: left;
2326     padding-right: 1em;
2327     [% END -%]
2328     margin: 0.5ex 0;
2329 }
2330 .saved-searches-header {font-weight: bold; font-size: [% css_fonts.size_bigger %]; }
2331 .saved-searches { border-bottom: 1px solid [% css_colors.accent_medium %]; padding-right: 1em; }
2332 #staff-saved-search { /* wraps .saved-searches-header and .saved-searches on the record page */
2333     [% IF rtl == 't' -%]
2334     border-left: 1px solid [% css_colors.accent_darker %];
2335     [% ELSE -%]
2336     border-right: 1px solid [% css_colors.accent_darker %];
2337     [% END -%]
2338 }
2339 .result_item_circulated {
2340     padding-top: 4px;
2341 }
2342
2343 .result_item_circulated span {
2344     position: relative;
2345     top:-3px;
2346     [% IF rtl == 't' -%]
2347     right: 3px;
2348     [% ELSE -%]
2349     left:3px;
2350     [% END -%]
2351 }
2352
2353 #search-only-bookbag-container { margin: 2ex 0; font-weight: bold; }
2354 #result-bookbag-heading { text-align: center; margin: 2ex; }
2355
2356 .result-bookbag-name { font-size: [% css_fonts.size_bigger %]; font-weight: bold; }
2357 .result-bookbag-description { font-size: [% css_fonts.size_bigger %]; font-style: italic; }
2358 .result-bookbag-item-note { font-style: italic; }
2359 .lowhits-bookbag-name { font-weight: bold; }
2360 .oils_AS { font-weight: bold; color: [% css_colors.text_match %]; }
2361 .oils_AS_match_term {
2362     [% IF rtl == 't' -%]
2363     text-align: right;
2364     [% ELSE -%]
2365     text-align: left;
2366     [% END -%]
2367     color: [% css_colors.text %];
2368 }
2369 .oils_AS_match_field {
2370     font-size: [% css_fonts.size_smallest %]; padding: 0.65em 0;
2371     [% IF rtl == 't' -%]
2372     text-align: left;
2373     [% ELSE -%]
2374     text-align: right;
2375     [% END -%]
2376     color: [% css_colors.accent_medium %];
2377 }
2378 table.result_holdings_table {
2379     margin-top: 1em;
2380     margin-bottom: 1em;
2381 }
2382 table.result_holdings_table thead tr {
2383     background-color: [% css_colors.table_heading %];
2384 }
2385 table.result_holdings_table thead tr th {
2386     font-weight: bold;
2387 }
2388 span.preflib {
2389     margin: 0 2em 0 2em;
2390 }
2391 a.preflib_change {
2392   vertical-align: super;
2393   font-size: [% css_fonts.size_smaller %];
2394   line-height: normal;
2395   text-decoration: none;
2396 }
2397 .rdetail-holding-group {
2398     [% IF rtl == 't' -%]
2399     margin-right: 1.5em;
2400     [% ELSE -%]
2401     margin-left: 1.5em;
2402     [% END -%]
2403 }
2404 .rdetail-holding-group span {
2405     [% IF rtl == 't' -%]
2406     margin-right: 1.5em;
2407     [% ELSE -%]
2408     margin-left: 1.5em;
2409     [% END -%]
2410 }
2411 .rdetail-holding-group .paging {
2412     [% IF rtl == 't' -%]
2413     margin-right: 1.5em;
2414     [% ELSE -%]
2415     margin-left: 1.5em;
2416     [% END -%]
2417 }
2418 #rdetail_deleted_exp {
2419     font-weight: bold;
2420     padding: 1em;
2421     margin: 1em;
2422     border: thick solid [% css_colors.border_alert %];
2423 }
2424
2425 #ac_tab_wrapper { width : 100%; }
2426 .ac_tab {
2427     [% IF rtl == 't' -%]
2428     float: right;
2429     padding-left: 10px;
2430     [% ELSE -%]
2431     float: left;
2432     padding-right: 10px;
2433     [% END -%]
2434     font-size: [% css_fonts.size_big %];
2435     padding: 5px;
2436     border: 1px solid [% css_colors.primary_offset %];
2437 }
2438 .ac_tab_selected { background-color: [% css_colors.primary_offset %]; }
2439 .ac_tab_selected a { color: [% css_colors.text_invert %]; }
2440 #ac_content { clear: both; width: 100%; margin-top: 10px; }
2441
2442 /* Popmenu styles used for making css menus. */
2443 .popmenu {
2444     margin: 0;
2445     padding: 0;
2446 }
2447 .popmenu li {
2448     list-style: none;
2449 }
2450 .popmenu li a {
2451     display: block;
2452     padding: 3px 5px;
2453 }
2454 .popmenu li ul {
2455     display: none;
2456     width: 10em; /* Width to help Opera out */
2457     background-color: [% css_colors.primary %];
2458 }
2459 .popmenu li:hover ul {
2460     display: block;
2461     position: absolute;
2462     margin: 0;
2463     padding: 0;
2464     border-color: [% css_colors.border_dark %];
2465     border-width: 1px;
2466     border-style: solid;
2467     z-index: 1;
2468 }
2469 .popmenu li:hover li {
2470     float: none;
2471 }
2472 .popmenu li:hover li a {
2473     background-color: [% css_colors.primary %] !important;
2474     color: [% css_colors.accent_ultralight %] !important;
2475 }
2476 .popmenu li li a:hover {
2477     background-color: [% css_colors.accent_ultralight %] !important;
2478     color: [% css_colors.primary %] !important;
2479 }
2480 /* Styles for the basket entry. */
2481 .popmenu li:hover li[class~="temporary"] a {
2482     background-color: [% css_colors.primary %];
2483     color: [% css_colors.accent_ultralight %];
2484 }
2485 .popmenu li li[class~="temporary"] a:hover {
2486     background-color: [% css_colors.accent_ultralight %];
2487     color: [% css_colors.primary %];
2488 }
2489 /* Styles for the default list entry. */
2490 .popmenu li:hover li[class~="default"] a {
2491     background-color: [% css_colors.primary %];
2492     color: [% css_colors.accent_ultralight %];
2493 }
2494 .popmenu li li[class~="default"] a:hover {
2495     background-color: [% css_colors.accent_ultralight %];
2496     color: [% css_colors.primary %];
2497 }
2498 /* Styles for the new list entry. */
2499 .popmenu li:hover li[class~="new"] a {
2500     background-color: [% css_colors.primary %];
2501     color: [% css_colors.accent_ultralight %];
2502 }
2503 .popmenu li li[class~="new"] a:hover {
2504     background-color: [% css_colors.accent_ultralight %];
2505     color: [% css_colors.primary %];
2506 }
2507 /* Style to add a divider on the menu. */
2508 .popmenu li li[class~="divider"] {
2509     border-bottom-width: 1px;
2510     border-bottom-color: [% css_colors.border_dark %];
2511     border-bottom-style: solid;
2512 }
2513
2514 #locale_picker_form {
2515     [% IF rtl == 't' -%]
2516     float: left;
2517     border-left: thin [% css_colors.control %] solid;
2518     [% ELSE -%]
2519     float: right;
2520     border-right: thin [% css_colors.control %] solid;
2521     [% END -%]
2522     padding: 0.5em;
2523     margin-top: 2em;
2524 }
2525
2526 #locale_picker_form * {
2527     margin: 0;
2528     padding: 0;
2529     vertical-align: middle;
2530 }
2531
2532 #patron_usr_barcode_not_found {
2533     font-weight: bold; color: [% css_colors.text_alert %];
2534 }
2535
2536 .record_title {
2537     font-weight: bold;
2538 }
2539
2540 .record_author {
2541     font-style: italic;
2542 }
2543
2544 .password_message {
2545     padding-top: 1em;
2546     padding-bottom: 0.5em;
2547         font-style: italic;
2548 }
2549
2550 #maintenance_message {
2551     padding: 5px;
2552     width: 100%;
2553     background-color: [% css_colors.text_alert %];
2554     color: [% css_colors.text_invert %];
2555     text-align: center;
2556 }
2557
2558 #search-box > span {
2559     margin: 0 1em;
2560 }
2561 .browse-error {
2562     font-weight: bold;
2563     font-color: #c00;
2564 }
2565 .browse-result-sources, .browse-result-authority-bib-links {
2566     [% IF rtl == 't' -%]
2567     margin-right: 1em;
2568     [% ELSE -%]
2569     margin-left: 1em;
2570     [% END -%]
2571 }
2572 .browse-result-best-match {
2573     font-weight: bold;
2574 }
2575 .browse-pager {
2576     margin: 2ex 0;
2577 }
2578 .browse-result-list {
2579     padding-bottom: 0.5ex;
2580 }
2581 .browse-shortcuts {
2582     font-size: [% css_fonts.size_bigger %];
2583 }
2584 .browse-result-authority-field-name {
2585     font-style: italic;
2586     [% IF rtl == 't' -%]
2587     margin-left: 1em;
2588     [% ELSE -%]
2589     margin-right: 1em;
2590     [% END -%]
2591 }
2592 .browse-leading-article-warning {
2593     font-style: italic;
2594     font-size: [% css_fonts.size_big %];
2595 }
2596 .browse-public-general-note {
2597     font-size: [% css_fonts.size_big %];
2598 }
2599 .browse-public-general-note-label { }
2600 .browse-public-general-note-institution {
2601     font-style: normal;
2602     font-weight: bold;
2603 }
2604 .browse-public-general-note-body {
2605     font-style: italic;
2606 }
2607
2608 .bib_peer_type {
2609     font-weight: bold;
2610 }
2611
2612 #main-content-register {
2613     [% IF rtl == 't' -%]
2614     margin-right: 40px;
2615     [% ELSE -%]
2616     margin-left: 40px;
2617     [% END -%]
2618     font-size: [% css_fonts.size_bigger %];
2619 }
2620
2621 #main-content-register table {
2622     padding: 20px;
2623     margin-top: 18px;
2624     border-collapse: collapse;
2625 }
2626
2627 #main-content-register td {
2628     [% IF rtl == 't' -%]
2629     text-align: right;
2630     [% ELSE -%]
2631     text-align: left;
2632     [% END -%]
2633 }
2634
2635 #main-content-register td:not(:first-child) {
2636     [% IF rtl == 't' -%]
2637     padding-right: 20px;
2638     [% ELSE -%]
2639     padding-left: 20px;
2640     [% END -%]
2641 }
2642
2643 .patron-reg-invalid {
2644     font-weight: bold;
2645     color: red;
2646     [% IF rtl == 't' -%]
2647     padding-left: 10px;
2648     [% ELSE -%]
2649     padding-right: 10px;
2650     [% END -%]
2651 }
2652
2653 .result_footer_nav1 {
2654     clear: both;
2655 }
2656
2657 .small_view_only, #filter_hits, #refine_hits, #return_to_hits {
2658     display: none;
2659 }
2660
2661 .rdetail_authors_div, .course_instructors_div {
2662     margin-bottom: 1em;
2663 }
2664
2665 #search_query_label, #search_qtype_label, #search_itype_label, #search_locg_label {
2666     white-space: nowrap;
2667     display: inline-block;
2668 }
2669
2670 .result_table_title_cell {
2671     padding-top: 4px;
2672     padding-bottom: 4px;
2673 }
2674
2675 .record_title {
2676     font-size: [% css_fonts.size_bigger %];
2677 }
2678
2679 /* styling for sms text call number */
2680 .sms_text pre {
2681     font-family: Arial, Helvetica, sans-serif;
2682     font-size: [% css_fonts.size_medium %];
2683     background-color: [% css_colors.accent_lightest %];
2684     padding: .5%;
2685     /* Allow text to wrap */
2686     white-space: pre-wrap;       /* css-3 */
2687     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
2688     white-space: -pre-wrap;      /* Opera 4-6 */
2689     white-space: -o-pre-wrap;    /* Opera 7 */
2690     word-wrap: break-word;       /* Internet Explorer 5.5+ */
2691 }
2692
2693 .mobile_view {
2694    display:none;
2695 }
2696
2697 /* patron message center */
2698 #myopac_message_tbody {
2699     vertical-align: top;
2700 }
2701 .myopac_message_message {
2702     white-space: pre-wrap;
2703 }
2704
2705 @media only screen and (max-width: 800px) {
2706     .facet_sidebar_hidden, .result_block_hidden {
2707         display: none;
2708     }
2709     .facet_sidebar_visible, .result_block_visible {
2710         display: inline ! important;
2711     }
2712     #acct_select, #acct_prefs_select {
2713         display: inline-block;
2714     }
2715     #acct_tabs, #acct_prefs_tabs {
2716          display:none;
2717      }
2718     .radio-parts-selection { width: 90%; }
2719     #list_description, #list_create_name {
2720         width: 300px;
2721     }
2722 }
2723
2724 @media only screen and (max-width: 600px) {
2725     input, select {
2726         font-size: [% css_fonts.size_big %];
2727     }
2728     span .nav_arrow_fix {
2729         display: none;
2730     }
2731     #header {
2732         padding: 0px;
2733         margin: 0px;
2734     }
2735     #homesearch_main_logo img {
2736         width:75%;
2737     }
2738     #format_selector {
2739         display:none;
2740     }
2741     #your-acct-login {
2742         padding: 0px;
2743         padding-top: 5px;
2744     }
2745     #your-acct-login a {
2746         margin: 0px;
2747         padding: 5px;
2748     }
2749     #topnav_logo {
2750         margin: 0;
2751     }
2752     #topnav_logo img {
2753         width: 200px;
2754     }
2755     #locale_picker_form {
2756         display: none;
2757     }
2758     #gold-links-holder {
2759         display: none;
2760     }
2761     #simple-detail-view-links {
2762         display: none;
2763     }
2764     #acct_tabs a, #acct_fines_tabs a {
2765        [% IF rtl == 't' -%]
2766        border-radius: 6px 0px 0px 6px;
2767        margin: 0px 0px 0px 5px;
2768        [% ELSE -%]
2769        border-radius: 6px 6px 0px 0px;
2770        margin: 0px 5px 0px 0px;
2771        [% END -%]
2772        padding: 2px 4px 3px 4px;
2773        font-size: [% css_fonts.size_base %];
2774     }
2775     .bookbag-controls-title-block {
2776         [% IF rtl == 't' -%]
2777         clear:right;
2778         [% ELSE -%]
2779         clear:left;
2780         [% END -%]
2781         width:90%;
2782     }
2783     .bookbag-controls-button-block {
2784         [% IF rtl == 't' -%]
2785         clear:right;
2786         [% ELSE -%]
2787         clear:left;
2788         [% END -%]
2789         width;90%;
2790     }
2791     .bookbag-specific {
2792         [% IF rtl == 't' -%]
2793         margin-right: 0px;
2794         [% ELSE -%]
2795         margin-left: 0px;
2796         [% END -%]
2797     }
2798     .bookbag-specific div.sort {
2799         [% IF rtl == 't' -%]
2800         float: right;
2801         text-align: right;
2802         [% ELSE -%]
2803         float: left;
2804         text-align: left;
2805         [% END -%]
2806         width: 95%;
2807         margin: 5px 0px 5px 0px;
2808         border: 1px solid [% css_colors.accent_light %];
2809         padding:5px;
2810     }
2811     .bookbag-specific div.meta {
2812         [% IF rtl == 't' -%]
2813         float: right;
2814         margin-right:0px;
2815         text-align: right;
2816         [% ELSE -%]
2817         float: left;
2818         margin-left:0px;
2819         text-align: left;
2820         [% END -%]
2821         width: 95%;
2822         margin-bottom:5px;
2823         padding:5px;
2824     }
2825     #bbag-edit-name {
2826         [% IF rtl == 't' -%]
2827         float: right;
2828         [% ELSE -%]
2829         float: left;
2830         [% END -%]
2831         width: 220px;
2832     }
2833     #bbag-edit-description {
2834         width: 220px;
2835         margin-top:5px;
2836     }
2837     .bbag-content {
2838         padding:5px;
2839         border:1px solid [% css_colors.accent_light %];
2840     }
2841     .bbag-action {
2842         [% IF rtl == 't' -%]
2843         margin-right:0px;
2844         [% ELSE -%]
2845         margin-left:0px;
2846         [% END -%]
2847         margin-bottom:5px;
2848     }
2849     .bbag-action-field {
2850         width:230px;
2851     }
2852     .bookbag-specific div.sort select {
2853         width:180px;
2854     }
2855     .bookbag-specific tr {
2856         display: block;
2857         border-bottom: 1px solid [% css_colors.border_standard %];
2858     }
2859     .bookbag-specific td.list_checkbox {
2860         [% IF rtl == 't' -%]
2861         padding-right: 0px !important;
2862         [% ELSE -%]
2863         padding-left: 0px !important;
2864         [% END -%]
2865     }
2866     .bookbag-specific td.list_entry {
2867         display: inline-block;
2868         min-width: 5em;
2869         [% IF rtl == 't' -%]
2870         padding-right: 40% !important;
2871         [% ELSE -%]
2872         padding-left: 40% !important;
2873         [% END -%]
2874     }
2875     .bookbag-specific td.list_entry:before {
2876         content: attr(data-label);
2877         position: absolute;
2878         [% IF rtl == 't' -%]
2879         right: 10px;
2880         [% ELSE -%]
2881         left: 10px;
2882         [% END -%]
2883     }
2884     .bbag-navigate-list {
2885         display: none;
2886     }
2887     .bbag-navigate-list-pages {
2888         [% IF rtl == 't' -%]
2889         text-align:left;
2890         float:left;
2891         [% ELSE -%]
2892         text-align:right;
2893         float:right;
2894         [% END -%]
2895     }
2896     #dash_wrapper div {
2897         background-color: transparent;
2898         padding: 0px;
2899     }
2900     #dash_wrapper {
2901         position: static;
2902         top: auto;
2903     }
2904     #dash_wrapper .opac-button {
2905         top: 0px;
2906     }
2907     .small_view_only, #filter_hits {
2908         display: inline !important;
2909     }
2910     #dash_identity a {
2911         [% IF rtl == 't' -%]
2912         float:right;
2913         [% ELSE -%]
2914         float:left;
2915         [% END -%]
2916     }
2917     #dashboard, #dashboard_e {
2918         display: none;
2919     }
2920     #holds_box form blockquote {
2921         [% IF rtl == 't' -%]
2922         margin-right: 10px;
2923         margin-left: 2px;
2924         [% ELSE -%]
2925         margin-left: 10px;
2926         margin-right: 2px;
2927         [% END -%]
2928     }
2929     #holds_box form blockquote select {
2930         width: 100%;
2931     }
2932     #myopac_sum_fines_placehold {
2933         display:none;
2934     }
2935     #myopac_sum_fines {
2936         display: none;
2937     }
2938     #list_description, #list_create_name {
2939         width: 170px;
2940     }
2941     .results_header_lbl {
2942         display: none;
2943     }
2944     .results_header_nav1 span.h1 {
2945         display: none;
2946     }
2947     .preflib {
2948         display: none;
2949     }
2950     .start_end_links_span {
2951         display: block;
2952     }
2953     .invisible {
2954         display: none;
2955     }
2956     .result_table_pic_header {
2957         [% IF rtl == 't' -%]
2958         padding-right: 0px !important;
2959         padding-left: 5px;
2960         [% ELSE -%]
2961         padding-left: 0px !important;
2962         padding-right: 5px;
2963         [% END -%]
2964         width: 0px !important;
2965         margin: 0px;
2966     }
2967     .result_table_pic {
2968         width: 55px;
2969         padding: 0px;
2970         margin: 0px;
2971     }
2972     tr[name=results_isbn_tr], tr[name=results_phys_desc_tr], tr[name=results_pub_tr] strong, .result_count {
2973          display: none;
2974     }
2975     tr.result_table_title_cell[name=bib_cn_list] .result_holdings_table th:nth-child(4),
2976     tr.result_table_title_cell[name=bib_cn_list] .result_holdings_table td:nth-child(4) {
2977         display:none;
2978     }
2979     .results_info_table td {
2980         padding: 0px;
2981     }
2982     #results_header_bar {
2983         background-color: inherit;
2984     }
2985     .results_header_btns a {
2986         margin: 0.3em;
2987     }
2988     .adv_filter_results_hide {
2989         display: none;
2990     }
2991     .adv_filter_results_show {
2992         display: block;
2993     }
2994     .adv_filter_results_block_label {
2995         display: block;
2996     }
2997     .adv_filter_results_group_wrapper {
2998         display: block;
2999     }
3000     #main-content {
3001         margin: 0 1px;
3002     }
3003     #rdetails_status thead,
3004     #course_material_table thead {
3005         display: none;
3006     }
3007     #rdetails_status tr,
3008     #course_material_table tr {
3009         display: block;
3010         margin-top: 3px;
3011     }
3012     #rdetails_status td,
3013     #course_material_table td {
3014         display: block;
3015         padding: 1px;
3016     }
3017     .copy_details_row {
3018         background-color: [% css_colors.accent_lightest %];
3019     }
3020     .copy_details_offers_row {
3021         background-color: [% css_colors.accent_lightest %];
3022     }
3023     select#pickup_lib.search-wrapper-locg {
3024         width: 100%;
3025     }
3026     #search-wrapper #search-box {
3027         width: 85%;
3028         padding-top: 5px;
3029     }
3030     #main-content-home {
3031         padding: 0px;
3032         margin: 0px;
3033     }
3034     /* Make use of full width in mobile mode */
3035     .facet_box_wrapper .box_wrapper .box,
3036     .facet_template .facet,
3037     .facet_box_temp {
3038         width: inherit;
3039     }
3040     .facet_template .count {
3041         [% IF rtl == 't' -%]
3042         padding-right: 1em;
3043         [% ELSE -%]
3044         padding-left: 1em;
3045         [% END -%]
3046     }
3047     #facet_sidebar {
3048         margin-top: 0.5em;
3049     }
3050     #adv_search_parent {
3051         font-size: [% css_fonts.size_smaller %];
3052     }
3053     #adv_search_filters {
3054         position: relative;
3055         width: 300px;
3056     }
3057     #format_actions {
3058         [% IF rtl == 't' -%]
3059         float: right;
3060         [% ELSE -%]
3061         float: left;
3062         [% END -%]
3063     }
3064     .rdetail_aux_utils {
3065         padding: 0px;
3066         border: none;
3067     }
3068     .result_metadata {
3069         width: inherit;
3070     }
3071     div#rdetail_actions_div {
3072         float: none;
3073     }
3074     h2.rdetail_uris {
3075         clear: both;
3076     }
3077     #metarecord_population {
3078         overflow: hidden;
3079         width: 100%;
3080     }
3081     .metarecord_population_span_link {
3082     }
3083     .metarecord_population_item_lang {
3084         float: none;
3085     }
3086     .search_catalog_lbl {
3087         [% IF rtl == 't' -%]
3088         margin-right: 0;
3089         [% ELSE -%]
3090         margin-left: 0;
3091         [% END -%]
3092         white-space: nowrap;
3093     }
3094     .adv_search_catalog_lbl {
3095         margin-top: 0;
3096         white-space: nowrap;
3097     }
3098     .browse_the_catalog_lbl {
3099         white-space: nowrap;
3100     }
3101     .mobile_hide {
3102         display: none;
3103     }
3104     #dash_user {
3105         display: block;
3106         padding: 0.5em;
3107     }
3108     .dash_divider {
3109         display: none;
3110     }
3111     .dash_account_buttons {
3112         display: block;
3113     }
3114     .searchbar { line-height: 1.5em; }
3115     #browse-controls { line-height: 1.5em; }
3116     #search_query_label, #search_qtype_label, #search_itype_label, #search_locg_label {
3117         display: block;
3118     }
3119     .bookshelf td {
3120         display: block;
3121         width: 100%;
3122     }
3123     .bookshelf table thead tr {
3124         display: block;
3125     }
3126     #lowhits_help { width: inherit; }
3127     #adv_search_tabs a{
3128         font-size: [% css_fonts.size_small %];
3129         margin: 2px 2px 0px 2px;
3130         padding: 2px 2px 5px 2px;
3131         [% IF rtl == 't' -%]
3132         border-radius: 7px 0px 0px 7px;
3133         [% ELSE -%]
3134         border-radius: 7px 7px 0px 0px;
3135         [% END -%]
3136     }
3137     #adv_global_tbody td {
3138         border-bottom: thin solid [% css_colors.accent_light %];
3139     }
3140     #adv_global_addrow td {
3141         border-bottom: none;
3142     }
3143         /* Force table to not be like tables anymore */
3144         table#acct_checked_main_header thead tr th, table#acct_holds_main_header thead tr th, table#acct_checked_hist_header thead tr th, table#acct_holds_hist_header thead tr th, table#ebook_circs_main_table thead tr th, table#ebook_holds_main_table thead tr th, table#acct_reservations_main_header tr th{
3145                 display: block;
3146         }
3147         table#acct_checked_main_header tbody tr td, table#acct_holds_main_header tbody tr td, table#acct_checked_hist_header tbody tr td, table#acct_holds_hist_header tbody tr td, table#ebook_circs_main_table tbody tr td, table#ebook_holds_main_table tbody tr td {
3148                 display: block;
3149         }
3150
3151         /* Hide table headers (but not display: none;, for accessibility) */
3152         thead tr {
3153                 position: absolute;
3154                 top: -9999px;
3155                 [% IF rtl == 't' -%]
3156                 right: -9999px;
3157                 [% ELSE -%]
3158                 left: -9999px;
3159                 [% END -%]
3160         }
3161
3162         table#acct_checked_main_header, table#acct_holds_main_header, table#acct_checked_hist_header, table#acct_holds_hist_header, table#ebook_circs_main_table, table#ebook_holds_main_table, table#acct_reservations_main_header {
3163                 width: 90%;
3164         }
3165
3166         table#acct_checked_main_header tr, table#acct_holds_main_header tr, table#acct_checked_hist_header tr, table#acct_reservations_main_header { border: 1px solid #ddd; }
3167
3168         /* Holds history gets large white border to mimic header cell on other
3169            account screens that provide visual cue for next title. We should do
3170            the same for ebook tables too since we have no actions on those
3171            tables. If actions get added, we should move those tables out of
3172            here. */
3173
3174         table#acct_holds_hist_header tr, table#ebook_circs_main_table tr, table#ebook_holds_main_table tr { border-top: 25px solid #fff; }
3175
3176
3177         table#acct_checked_main_header td, table#acct_holds_main_header td, table#acct_checked_hist_header td, table#acct_holds_hist_header td, table#ebook_circs_main_table td, table#ebook_holds_main_table td, table#acct_reservations_main_header td {
3178                 /* Behave  like a "row" */
3179                 border: none;
3180                 border-bottom: 1px solid #eee;
3181                 position: relative;
3182                 [% IF rtl == 't' -%]
3183                 padding-right: 40%;
3184                 [% ELSE -%]
3185                 padding-left: 40%;
3186                 [% END -%]
3187         }
3188
3189          table#acct_checked_main_header td:before, table#acct_holds_main_header td:before, table#acct_checked_hist_header td:before, table#acct_holds_hist_header td:before, table#ebook_circs_main_table td:before, table#ebook_holds_main_table td:before, table#acct_reservations_main_header td {
3190                 /* Now like a table header */
3191                 position: absolute;
3192                 /* Top/left values mimic padding */
3193                 top: 2px;
3194                 width: 40%;
3195                 [% IF rtl == 't' -%]
3196                 right: 2px;
3197                 padding-left: 10px;
3198                 [% ELSE -%]
3199                 left: 2px;
3200                 padding-right: 10px;
3201                 [% END -%]
3202                 white-space: nowrap;
3203         }
3204
3205         table#acct_checked_main_header td:nth-of-type(1) { border-top: 5px solid #aaa; padding-top: 15px; background-color: #fff;}
3206         table#acct_checked_main_header td:nth-of-type(2):before { content: "[% l('Title') %]";}
3207         table#acct_checked_main_header td:nth-of-type(3):before { content: "[% l('Author') %]"; }
3208         table#acct_checked_main_header td:nth-of-type(4):before { content: "[% l('Renewals Left') %]"; }
3209         table#acct_checked_main_header td:nth-of-type(5):before { content: "[% l('Due Date') %]"; }
3210         table#acct_checked_main_header td:nth-of-type(6):before { content: "[% l('Barcode') %]"; }
3211         table#acct_checked_main_header td:nth-of-type(7):before { content: "[% l('Call number') %]"; }
3212
3213      table#acct_checked_hist_header td:nth-of-type(1) { border-top: 5px solid #aaa; padding-top: 15px; background-color: #fff;}
3214         table#acct_checked_hist_header td:nth-of-type(2):before { content: "[% l('Title') %]";}
3215         table#acct_checked_hist_header td:nth-of-type(3):before { content: "[% l('Author') %]"; }
3216         table#acct_checked_hist_header td:nth-of-type(4):before { content: "[% l('Checkout Date') %]"; }
3217         table#acct_checked_hist_header td:nth-of-type(5):before { content: "[% l('Due Date') %]"; }
3218         table#acct_checked_hist_header td:nth-of-type(6):before { content: "[% l('Date Returned') %]"; }
3219         table#acct_checked_hist_header td:nth-of-type(7):before { content: "[% l('Barcode') %]"; }
3220         table#acct_checked_hist_header td:nth-of-type(8):before { content: "[% l('Call number') %]"; }
3221
3222         table#acct_holds_main_header td:nth-of-type(1) { border-top: 5px solid #aaa; padding-top: 15px; background-color: #fff;}
3223         table#acct_holds_main_header td:nth-of-type(2):before { content: "[% l('Title') %]";}
3224         table#acct_holds_main_header td:nth-of-type(3):before { content: "[% l('Author') %]"; }
3225         table#acct_holds_main_header td:nth-of-type(4):before { content: "[% l('Format') %]"; }
3226         table#acct_holds_main_header td:nth-of-type(5):before { content: "[% l('Pickup Location') %]"; }
3227         table#acct_holds_main_header td:nth-of-type(6):before { content: "[% l('Cancel on') %]"; }
3228         table#acct_holds_main_header td:nth-of-type(7):before { content: "[% l('Status') %]"; }
3229         table#acct_holds_main_header td.hold_notes:before { content: "[% l('Notes') %]"; }
3230
3231         table#acct_holds_hist_header td:nth-of-type(1):before { content: "[% l('Title') %]";}
3232         table#acct_holds_hist_header td:nth-of-type(2):before { content: "[% l('Author') %]"; }
3233         table#acct_holds_hist_header td:nth-of-type(3):before { content: "[% l('Format') %]"; }
3234         table#acct_holds_hist_header td:nth-of-type(4):before { content: "[% l('Pickup Location') %]"; }
3235         table#acct_holds_hist_header td:nth-of-type(8):before { content: "[% l('Status') %]"; }
3236
3237         table#ebook_circs_main_table td:nth-of-type(1):before { content: "[% l('Title') %]"; }
3238         table#ebook_circs_main_table td:nth-of-type(2):before { content: "[% l('Author') %]"; }
3239         table#ebook_circs_main_table td:nth-of-type(3):before { content: "[% l('Due Date') %]"; }
3240         table#ebook_circs_main_table td:nth-of-type(4):before { content: "[% l('Actions') %]"; }
3241
3242         table#ebook_holds_main_table td:nth-of-type(1):before { content: "[% l('Title') %]"; }
3243         table#ebook_holds_main_table td:nth-of-type(2):before { content: "[% l('Author') %]"; }
3244         table#ebook_holds_main_table td:nth-of-type(3):before { content: "[% l('Due Date') %]"; }
3245         table#ebook_holds_main_table td:nth-of-type(4):before { content: "[% l('Actions') %]"; }
3246
3247
3248
3249        /*Want to see these in mobile ONLY */
3250        .mobile_view{
3251           display:block;
3252        }
3253
3254        .mobile_search_lbl_clr{
3255           color:[% css_colors.mobile_header_text %];
3256        }
3257 }
3258
3259
3260 /*
3261 For text which is visible only to screen readers.
3262 Borrowed from http://getbootstrap.com/css/#helper-classes-screen-readers
3263 See also http://webaim.org/techniques/css/invisiblecontent/
3264 */
3265 .sr-only {
3266     position: absolute;
3267     width: 1px;
3268     height: 1px;
3269     padding: 0;
3270     margin: -1px;
3271     overflow: hidden;
3272     clip: rect(0, 0, 0, 0);
3273     border: 0;
3274 }
3275
3276 /* Make added rows in Expert Search have bold labels like the initial row */
3277 label[for*=expert_]
3278 {
3279     font-weight: bold;
3280 }
3281
3282 .sort_deemphasize {
3283     font-weight: lighter;
3284     font-size: 70%;
3285 }
3286
3287 #results-page-depth-hint {
3288     text-align: center;
3289     font-style: italic;
3290 }
3291
3292 #clear-history-confirm {
3293   font-weight: bold;
3294   color: [% css_colors.text_badnews %];
3295   padding: 10px;
3296 }
3297
3298 /*Inline rules from other templates files*/
3299
3300 .td-left{
3301     [% IF rtl == 't' -%]
3302     text-align:right;
3303     [% ELSE -%]
3304     text-align:left;
3305     [% END -%]
3306     width:100%;
3307 }
3308 .td-search-left{
3309     [% IF rtl == 't' -%]
3310     text-align:right;
3311     [% ELSE -%]
3312     text-align:left;
3313     [% END -%]
3314 }
3315 #myopac_summary_div{padding:0px;}
3316 .div-left{
3317     [% IF rtl == 't' -%]
3318     float: right;
3319     [% ELSE -%]
3320     float: left;
3321     [% END -%]
3322 }
3323 .td-right{
3324     [% IF rtl == 't' -%]
3325     text-align:left;
3326     [% ELSE -%]
3327     text-align:right;
3328     [% END -%]
3329 }
3330 .login-form-left{
3331     [% IF rtl == 't' -%]
3332     float: right;
3333     margin-left: 40px;
3334     [% ELSE -%]
3335     float: left;
3336     margin-right: 40px;
3337     [% END -%]
3338     padding-bottom: 10px;
3339 }
3340 .hold-div{
3341     [% IF rtl == 't' -%]
3342     padding-right: 10px;
3343     [% ELSE -%]
3344     padding-left: 10px;
3345     [% END -%]
3346     padding-bottom: 15px;
3347 }
3348 .hold-span{font-weight: bold;}
3349 .padding-left-6{
3350     [% IF rtl == 't' -%]
3351     padding-right: 6px;
3352     [% ELSE -%]
3353     padding-left: 6px;
3354     [% END -%]
3355 }
3356 .padding-left-10{
3357     [% IF rtl == 't' -%]
3358     padding-right:10px;
3359     [% ELSE -%]
3360     padding-left:10px;
3361     [% END -%]
3362 }
3363 .padding-left-5{
3364     [% IF rtl == 't' -%]
3365     padding-right: 5px;
3366     [% ELSE -%]
3367     padding-left: 5px;
3368     [% END -%]
3369 }
3370
3371 /* Rules from metarecord_hold_filters.tt2 */
3372
3373 .metarecord_filters{
3374       padding: 5px;
3375       margin-top: 5px;
3376       border-bottom: 1px solid #333;
3377       border-top: 1px solid #333; }
3378 .metarecord_filter_container{
3379     [% IF rtl == 't' -%]
3380     float : right;
3381     margin-left: 10px;
3382     [% ELSE -%]
3383     float : left;
3384     margin-right: 10px;
3385     [% END -%]
3386 }
3387 .metarecord_filter_container select{padding: 2px;width: 13em; /* consistent w/ adv search selectors */}
3388 .metarecord_filter_header{padding-bottom: 5px;}
3389
3390 /* Toggled items. */
3391 /* A block that is initially hidden and shown by clicking an anchor. */
3392 [id^="toggled-block-"]{
3393     display: none;
3394 }
3395 [id^="toggled-block-"]:target{
3396     display: block;
3397 }
3398 /* Inline text that is initially hidden and shown by clicking an anchor. Useful on a span. */
3399 [id^="toggled-inline-"]{
3400     display: none;
3401 }
3402 [id^="toggled-inline-"]:target{
3403     display: inline;
3404 }
3405
3406 .oils_SH {
3407     font-weight: bolder;
3408     background-color: #99ff99;
3409 }
3410
3411 .oils_SH.identifier {
3412     font-weight: bolder;
3413     background-color: #42b0f4;
3414 }
3415
3416 /*
3417   Carousels
3418 */
3419
3420 .carousel {
3421     width: 40%;
3422     margin: 0 auto;
3423 }
3424 .carousel-title {
3425     font-size: 150%;
3426     font-weight: bold;
3427     text-align: center;
3428 }
3429 .carousel-entry {
3430     max-width: 150px;
3431 }
3432 .carousel-entry-image {
3433     width: 100%;
3434     height: auto;
3435 }
3436 .carousel .glide__arrow {
3437     color: [% css_colors.button_text %];
3438     font-weight: bold !important;
3439     text-decoration: none !important;
3440     cursor: pointer;
3441     border-radius: 5px;
3442     border: 1px solid [% css_colors.primary %];
3443     background-color:  [% css_colors.primary_fade %];
3444     margin: 0.5em;
3445     padding: 0.3em;
3446     display: inline-block;
3447 }
3448 .carousel .glide__arrow--right {
3449     right: -5em;
3450 }
3451 .carousel .glide__arrow--left {
3452     left: -5em;
3453 }
3454 .archived_course {
3455     color: [% css_colors.text_badnews %];
3456     font-weight: bold;
3457 }
3458 .course_details {
3459     padding-top: 1em;
3460 }
3461 .course_details_div {
3462     padding-bottom: 1em;
3463 }