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