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

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