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