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