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 %]
   5
   6 body {
   7     margin:0;
   8     font-family: Arial, Helvetica, sans-serif;
   9     font-size: [% css_fonts.size_base %];
  10     background: [% css_colors.primary %];
  11 }
  12
  13 button, input {
  14     font-family: Arial, Helvetica, sans-serif;
  15     font-size: [% css_fonts.size_base %];
  16 }
  17
  18 img {
  19     border: none;
  20 }
  21
  22 #topnav_logo {
  23     margin: 2em 0;
  24 }
  25
  26 #homesearch_main_logo {
  27     padding-top: 60px;
  28     margin: auto;
  29     width: 50%;
  30 }
  31
  32 a {
  33     color: [% css_colors.primary %];
  34 }
  35
  36 #search-wrapper input[type=text] {
  37     margin:0;
  38     padding:0;
  39 }
  40
  41 #search-wrapper select, .results_header_lbl select {
  42     border:1px solid [% css_colors.border_standard %];
  43     margin:0;
  44     padding:0;
  45     width: 12em;
  46 }
  47
  48 .searchbar {
  49     font-weight: bold;
  50     padding-top: 10px;
  51     margin-left: 1em;
  52 }
  53
  54 .refine_search {
  55     padding-bottom: 7px;
  56     margin-left: 1em;
  57 }
  58
  59 /*
  60 #search-wrapper select {
  61     border:0px solid [% css_colors.border_dark %];
  62     filter:alpha(opacity=0);
  63     -moz-opacity:0;
  64     -khtml-opacity:0;
  65     opacity:0;
  66     padding:0;
  67     margin:0;
  68     height:18px;
  69 }
  70 */
  71 h1 {
  72     margin:0;
  73     margin-bottom: 5px;
  74     font-size: [% css_fonts.size_biggest %];
  75     font-weight:normal;
  76 }
  77
  78 h2 {
  79     font-size: [% css_fonts.size_bigger %];
  80     font-weight:bold;
  81 }
  82
  83 h2.graphic880 {
  84     font-size: [% css_fonts.size_bigger %];
  85     font-weight:normal;
  86 }
  87
  88 .hide_me, .hidden {
  89     display: none;
  90     visibility: hidden;
  91 }
  92
  93 div.select-box-wrapper {
  94     position:absolute;
  95     padding-top:2px;
  96     padding-left:3px;
  97     overflow:hidden;
  98     text-align:left;
  99 }
 100
 101 #dash_wrapper {
 102     margin-left: 0.5em;
 103 }
 104
 105 #dash_wrapper div {
 106     background: [% css_colors.primary %];
 107     border-radius: 5px;
 108     padding: 0em 1em;
 109 }
 110
 111 .dash_divider {
 112     margin: 1em;
 113     color: [% css_colors.primary_fade %];
 114     display:inline-block;
 115 }
 116
 117 #dashboard {
 118     margin-top: 1em;
 119     height: 3em;
 120 }
 121
 122 #dashboard span.dash-align a {
 123     font-weight: bold;
 124     text-decoration: none;
 125 }
 126
 127 #dash_user {
 128     font-weight: bold;
 129 }
 130
 131 #logout_link { left: 1px; }
 132
 133 #dash_checked { color: [% css_colors.text_attention %]; }
 134 #dash_holds { color: [% css_colors.text_attention %]; }
 135 #dash_pickup { color: [% css_colors.text_goodnews %]; }
 136
 137 /*
 138 #dash_fines { color: [% css_colors.text_badnews %]; }
 139 the color contrast between "text_badnews" and "primary"
 140 is too low for WCAG compliance.  Use "text_attention"
 141 for now until a better color is picked - if needed.
 142 */
 143 #dash_fines { color: [% css_colors.text_attention %]; }
 144
 145 #dash_wrapper #dash_user_message_button_container {
 146     display: inline;
 147     padding: 0;
 148 }
 149 #dash_wrapper #unread_message_count_floater {
 150     position: absolute;
 151     background-color: [% css_colors.text_alert %];
 152     padding-left: 0.2em;
 153     padding-right: 0.2em;
 154     display: inline-block;
 155     font-size: 95%;
 156     border-radius: 0;
 157     z-index: 2;
 158     margin-top: 0.2em;
 159     margin-left: -1.5em;
 160 }
 161
 162 #header-wrap {
 163     background: linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
 164     background: -moz-linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
 165     background: -o-linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
 166     background: -webkit-linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
 167     background-color: [% css_colors.primary_fade %];
 168 }
 169 #header {
 170     color: [% css_colors.background %];
 171     margin-left: 1em;
 172     margin-right: 1em;
 173     font-size: [% css_fonts.size_small %];
 174 }
 175
 176 #header a {
 177     color: [% css_colors.background %];
 178 }
 179
 180 #header a:hover {
 181     color: [% css_colors.text_invert %];
 182     text-decoration: none;
 183 }
 184
 185 #header-links {
 186     color: [% css_colors.text_invert %];
 187     font-size: [% css_fonts.size_small %];
 188     font-weight: bold;
 189     position: relative;
 190     top:4px;
 191
 192 }
 193
 194 #header-links a {
 195     color: [% css_colors.text_invert %];
 196     display: block;
 197     float:left;
 198     margin-right:22px;
 199     text-decoration: none;
 200 }
 201
 202 #header-links a:hover {
 203     color: [% css_colors.text_invert %];
 204     text-shadow: 0 0 0.2em [% css_colors.primary %], 0 0 0.2em [% css_colors.primary %];
 205     text-decoration: none;
 206 }
 207
 208 #header #header-links2 {
 209     position:relative;
 210     top:-8px;
 211     color: [% css_colors.text_invert %];
 212     padding-bottom: 15px;
 213 }
 214
 215 #header #header-links2 a {
 216     color: [% css_colors.text_invert %];
 217 }
 218
 219 #header #header-links2 a:hover {
 220     text-decoration: underline;
 221 }
 222
 223 #your-acct-login {
 224     padding-top:2em;
 225 }
 226
 227 #gold-links {
 228     margin-left: 1em;
 229     padding-left:0px;
 230 }
 231
 232 #gold-links-home {
 233     margin:auto;
 234     padding-left:0px;
 235 }
 236
 237 #gold-links-holder {
 238     height: 24px;
 239     background: [% css_colors.background_invert %];
 240 }
 241
 242 #util-bar {
 243     margin-left: 1em;
 244     padding-left:0px;
 245     height:0px;
 246 }
 247
 248 #search-wrapper {
 249     border-bottom: 1px solid [% css_colors.border_standard %];
 250     padding-bottom: 5px;
 251     background: [% css_colors.background %];
 252 }
 253
 254 #search-wrapper #breadcrumb {
 255     margin-top:0px;
 256     font-size: [% css_fonts.size_smaller %];
 257     float:left;
 258 }
 259
 260 #search-wrapper #search-within {
 261     margin-top:10px;
 262     float:right;
 263     position:relative;
 264     left:-173px;
 265 }
 266
 267 #search-wrapper #breadcrumb a {
 268     color: [% css_colors.text %];
 269 }
 270
 271 #search-wrapper #search_frm label {
 272     font-size: [% css_fonts.size_smaller %];
 273 }
 274
 275 #search-wrapper #search-box {
 276     margin-left: 1em;
 277     padding-left: 0px;
 278     padding-top: 10px;
 279     padding-bottom: 10px;
 280 }
 281
 282 #adv_search_tabs, #acct_tabs, #acct_fines_tabs, #acct_checked_tabs, #acct_holds_tabs, #acct_prefs_tabs, #results_header_inner{
 283     margin-left: 2px;
 284     overflow: auto;
 285 }
 286
 287 #adv_search_tabs a, #acct_tabs a, #acct_fines_tabs a, #acct_checked_tabs a, #acct_holds_tabs a, #acct_prefs_tabs a {
 288     float: left;
 289     text-align: center;
 290     vertical-align: middle;
 291     display: block;
 292     margin: 10px 7px 0px 0px;
 293     padding: 10px 0px 10px 0px;
 294     -moz-border-radius: 10px 10px 0px 0px;
 295     border-radius: 10px 10px 0px 0px;
 296     font-weight: bold;
 297     color: [% css_colors.text_invert %];
 298     background: [% css_colors.control %];
 299     font-weight: bold;
 300     text-decoration: none;
 301 }
 302
 303 #adv_search_tabs a, #acct_tabs a, #acct_fines_tabs a {
 304     padding: 1em 1em 0.5em;
 305 }
 306
 307 #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 {
 308     background: [% css_colors.primary %];
 309     color: [% css_colors.text_invert %];
 310     text-decoration: none;
 311 }
 312
 313 #adv_search_filters {
 314     position: relative;
 315 }
 316 #adv_search_rows {
 317     border-bottom: none;
 318 }
 319 .adv_filter_block {
 320     padding: 15px;
 321     float: left;
 322     clear: both;
 323 }
 324 .adv_filter_block_item {
 325     float: left;
 326     padding: 5px;
 327 }
 328
 329 #adv_special_block {
 330     float: left;
 331     padding: 5px;
 332     margin-top: 5px;
 333 }
 334
 335 #adv_search_submit {
 336     position: relative;
 337     margin-left: 10px;
 338
 339 }
 340
 341 .checkbox_col {
 342     width: 1%;
 343     padding-left: 10px !important;
 344 }
 345
 346 #adv_search.on, #num_search.on, #expert_search.on {
 347     color: [% css_colors.accent_darker %];
 348     background: [% css_colors.background %];
 349     text-decoration: none;
 350 }
 351
 352 #adv_search_tabs a.acct-tab-on, #acct_tabs a.acct-tab-on, #acct_fines_tabs a.acct-tab-on {
 353     color: [% css_colors.accent_darker %];
 354     background: [% css_colors.background %];
 355     text-decoration: none;
 356 }
 357
 358 .acct-tab-off {
 359     background: [% css_colors.control %];
 360 }
 361
 362 #acct_checked_tabs a, #acct_holds_tabs a, #acct_prefs_tabs a {
 363     margin-top: 0px;
 364     font-size: [% css_fonts.size_smaller %];
 365     color: [% css_colors.accent_darker %];
 366     padding: 10px 10px 10px 10px;
 367 }
 368
 369 #acct_checked_tabs div.selected a, #acct_holds_tabs div.selected a, #acct_prefs_tabs div.selected a {
 370     background: [% css_colors.accent_lightest %];
 371     color: [% css_colors.accent_darker %];
 372 }
 373
 374 #acct_checked_tabs, #acct_holds_tabs, #acct_prefs_tabs {
 375     padding-bottom: 12px;
 376     color: [% css_colors.accent_medium %];
 377 }
 378
 379 #acct_select, #acct_prefs_select {
 380      display: none;
 381 }
 382
 383 #mobile_acct_search_links {
 384       background: [% css_colors.primary_fade %];
 385 }
 386
 387 .rdetail_header {
 388     padding: 5px 7px 6px 0px;
 389     margin-left: 1em;
 390     border-bottom: 1px dotted [% css_colors.accent_light %];
 391 }
 392
 393 .rdetail_results a {
 394     color:[% css_colors.primary_fade %];
 395     font-weight:bold;
 396     font-size: [% css_fonts.size_bigger %];
 397 }
 398
 399 .rdetail_result_count {
 400     color: [% css_colors.text %];
 401     font-weight: normal;
 402     padding-left: 1em;
 403     display: inline-block;
 404 }
 405
 406 .rdetail_result_nav {
 407     font-weight:normal;
 408     padding-left: 1em;
 409     display: inline-block;
 410 }
 411
 412 #rdetail_details_table {
 413     margin-top: 15px;
 414 }
 415
 416 #rdetail_image { border: none; }
 417 #rdetail_image_cell {
 418     padding-top: 3px;
 419     padding-right: 10px;
 420 }
 421
 422 h2.rdetail_uris {
 423     margin-top: 1em;
 424 }
 425 div.rdetail_uris {
 426     padding: 0.5em 1em 0.5em 1em;
 427     background-color: [% css_colors.accent_lighter2 %];
 428 }
 429 div.rdetail_uris ul li {
 430     position: relative;
 431     left: 1em;
 432 }
 433
 434 div.rdetail_show_copies {
 435     margin-top: 1em;
 436 }
 437
 438 div#rdetail_actions_div {
 439     float: right;
 440     background: [% css_colors.background %];
 441 }
 442
 443 span#rdetail_copy_counts {
 444     display: inline-block;
 445     border-right: thin;
 446     vertical-align: top;
 447     margin-right: 1em;
 448     padding-right: 1em;
 449 }
 450
 451 span#rdetail_hold_counts {
 452     display: inline-block;
 453     vertical-align: top;
 454 }
 455 span#rdetail_hold_counts p {
 456     padding-left: 2em;
 457 }
 458
 459 #rdetail_image_div {
 460     float: left;
 461     margin-right: 1em;
 462 }
 463
 464 .rdetail_aux_utils {
 465     border-left:1px dotted [% css_colors.accent_light %];
 466     padding-left: 17px;
 467     padding-bottom: 6px;
 468     padding-right: 70px;
 469 }
 470
 471 div.place_hold {
 472     border-bottom: 1px dotted [% css_colors.accent_light %];
 473     padding-top: 10px;
 474 }
 475
 476 div.toggle_list { padding-top: 6px; }
 477
 478 div.share_record {
 479     padding-top: 6px;
 480     border-top: 1px dotted [% css_colors.accent_light %];
 481 }
 482
 483 div.format_icon {
 484     float: right;
 485     margin-right: 17px;
 486 }
 487
 488 .result_util {
 489     border-bottom: 1px dotted [% css_colors.accent_light %];
 490     padding-top: 6px;
 491 }
 492
 493 .results_aux_utils {
 494     display: table-cell;
 495 }
 496
 497 .result_util {
 498     padding-left: 1em;
 499 }
 500
 501 .results_reviews {
 502     top: -5px;
 503 }
 504
 505 #rdetail_copies {
 506     padding-top: 1.5em;
 507 }
 508
 509 #rdetails_status td {
 510     padding: 7px 0px 3px 13px;
 511     white-space: nowrap;
 512 }
 513
 514 #rdetails_status td[headers=copy_header_library],
 515 #rdetails_status td[headers=copy_header_shelfloc] {
 516     white-space: normal;
 517 }
 518
 519 #rdetails_status thead th {
 520     background-color: [% css_colors.accent_lighter2 %];
 521     padding: 13px 0px 13px 13px;
 522     font-size: [% css_fonts.size_smaller %];
 523     font-weight: bold;
 524     text-align: left;
 525 }
 526
 527 #rdetails_status tbody td {
 528     padding-left: 13px;
 529     text-align: left;
 530 }
 531 #rdetails_status tbody td.copy_note {
 532     color: [% css_colors.primary %];
 533     text-wrap:normal;
 534     white-space:pre-wrap !important;
 535     word-wrap:normal;
 536 }
 537
 538 .rdetail_extras {
 539     background: [% css_colors.primary_fade %];
 540     border: 1px solid [% css_colors.primary %];
 541     padding-top:1px;
 542     clear:both;
 543 }
 544
 545 #rdetail_extras_div {
 546     margin: 1em 0;
 547 }
 548
 549 .rdetail_extras_hr {
 550     height: 1px;
 551     background: [% css_colors.accent_light %];
 552     margin-left: 1px;
 553     margin-right: 1px;
 554 }
 555
 556 .rdetail_extras_link {
 557     padding: 6px 12px;
 558     font-size: [% css_fonts.size_smaller %];
 559     font-weight: bold;
 560 }
 561
 562 .rdetail_extras_lbl {
 563     color: [% css_colors.text_invert %];
 564     text-decoration: none;
 565 }
 566
 567 ##rdetail_extras_expand, #rdetail_extras_collapse, #rdetail_locs_collapse {
 568     margin-left: 13px;
 569 }
 570
 571 #rdetail_locs_expand, #rdetail_locs_collapse {
 572     padding-bottom:3px;
 573     margin-top:15px;
 574     margin-left:13px;
 575 }
 576
 577 #rdetail_anotes_div .biography {
 578     margin:0;
 579 }
 580
 581 .almost-content-wrapper {
 582     background: [% css_colors.background %];
 583 }
 584
 585 #content-wrapper {
 586     background: [% css_colors.background %];
 587     min-height: 260px;
 588     border-bottom: 1px solid [% css_colors.border_dark %];
 589 }
 590
 591 .content-wrapper-record-page { top: -15px; position: relative; }
 592
 593 #main-content-home {
 594     padding-left: 17px;
 595     margin-left: 1em;
 596 }
 597 #main-content {
 598     padding-left: 0px;
 599     margin: 0 1em;
 600     clear: both;
 601 }
 602
 603 #main-content-after-bar {
 604     margin-left: 1em;
 605     padding-left: 4px;
 606 }
 607
 608 #results-side-bar { float: left; width: 174px; margin-right: 5px; background: [% css_colors.background %]; }
 609
 610 #main-content .login_boxes {
 611     border: 1px solid [% css_colors.accent_lighter %];
 612     background: linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
 613     background: -moz-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
 614     background: -ms-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
 615     background: -o-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
 616     background: -webkit-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
 617
 618     color: [% css_colors.accent_darker %];
 619 }
 620
 621 #main-content .login_boxes h1 {
 622     font-weight: normal;
 623     font-size: [% css_fonts.size_biggest %];
 624     margin:0;
 625 }
 626
 627 #main-content .left_brain {
 628     padding-left:28px;
 629     padding-top:25px;
 630 }
 631
 632 #main-content .left_brain input[type=text], #main-content .left_brain input[type=password] {
 633     width:167px;
 634     margin:0;
 635     padding:0;
 636     background: [% css_colors.background %];
 637     font-size: [% css_fonts.size_bigger %];
 638     color: [% css_colors.text %];
 639 }
 640
 641 #main-content .left_brain .input_bg {
 642     padding:10px 10px 0px 13px;
 643     width:167px;
 644     height:29px;
 645 }
 646
 647 .login-help-box {
 648     float: left;
 649     width: 200px;
 650     text-align: center;
 651     margin-left: 2em;
 652 }
 653
 654 .login-help-button {
 655     font-size: [% css_fonts.size_biggest %];
 656     padding: 1.5em;
 657 }
 658
 659 #login-failed-message {
 660     font-size: [% css_fonts.size_bigger %];
 661     font-weight: bold;
 662     color: [% css_colors.text_alert %];
 663     padding-top: 1em;
 664 }
 665
 666 #holds_temp_parent td {
 667     border-bottom:1px solid [% css_colors.border_standard %];
 668 }
 669
 670 #holds_temp_parent input, #holds_temp_parent select {
 671     margin:0;
 672 }
 673
 674 #holds_temp_parent tr td div {
 675     margin-top: 10px;
 676     margin-bottom: 10px;
 677 }
 678
 679 #holds_temp_parent tr td div.format_icon {
 680     margin-top: 6px;
 681     margin-bottom: 6px;
 682     float: none;
 683 }
 684
 685 #results_header_bar {
 686     background: [% css_colors.accent_medium %];
 687     border-top:1px solid [% css_colors.accent_mediumdark %];
 688     border-bottom:1px solid [% css_colors.accent_mediumdark %];
 689 }
 690
 691 .results_header_lbl {
 692     font-weight: bold;
 693     float: left;
 694     color: [% css_colors.text %];
 695     /* this border is not visible, but it keeps these labels the same size
 696     as the buttons */
 697     border: 1px solid [% css_colors.accent_medium %];
 698     background: [% css_colors.accent_medium %];
 699     margin: 0.5em 0.3em;
 700     padding: 0.3em;
 701 }
 702 /* we need a negative margin on the select to allow the containing <label>
 703 to determine the actual size of the element.  By doing this, we can increase
 704 the odds that the buttons and the select will be the same size, and therefore
 705 collapse correctly when the window width decreases */
 706 .results_header_lbl select {
 707     margin: -0.5em 0;
 708 }
 709
 710 #limit_to_available {
 711     vertical-align: middle;
 712 }
 713
 714 .results_header_sel {
 715     /* width: 88px; */
 716     float:left;
 717     margin:0;
 718 }
 719
 720 .results_header_nav1 {
 721     padding: 5px 7px 6px 0px;
 722     border-bottom: 1px dotted [% css_colors.accent_light %];
 723 }
 724
 725 .results_header_nav1 .h1 {
 726     font-size: [% css_fonts.size_bigger %];
 727     font-weight:bold;
 728     color:[% css_colors.primary_fade %];
 729 }
 730
 731 .table_no_border_space {
 732   border-spacing: 0px;
 733 }
 734 .table_no_cell_pad td {
 735   padding: 0px;
 736 }
 737 .table_no_border {
 738   border-collapse: collapse;
 739 }
 740
 741 #result_table_table {
 742   margin-top:10px;
 743 }
 744
 745 #result_table_div {
 746     margin-top: 1em;
 747 }
 748
 749 tr.result_table_row > td.results_row_count,
 750 tr.result_table_row > td.result_table_pic_header,
 751 tr.result_table_row > td.result_table_title_cell {
 752     vertical-align: top;
 753 }
 754
 755 .result_metadata {
 756     float: left;
 757     width: 30em;
 758     padding-right: 2em;
 759 }
 760
 761 tr.result_table_row:nth-child(n+2) > td {
 762     border-top: 1px solid [% css_colors.accent_lighter2 %];
 763 }
 764
 765 tr.result_table_row > td.result_table_pic_header {
 766     white-space: nowrap;
 767     width: 78px;
 768     padding-left: 1em;
 769 }
 770
 771 .result_number {
 772     padding-left: 1em;
 773     white-space: nowrap;
 774 }
 775
 776 .result_count_number {
 777    font-weight: bold;
 778 }
 779
 780 .result_table_subtable {
 781     width: 100%;
 782     padding-top: 1em;
 783 }
 784
 785 div.result_table_utils_cont {
 786     text-align:left;
 787     float: left;
 788 }
 789
 790 .icon_text {
 791 }
 792
 793 #myopac_summary_div p {
 794     margin:0;
 795     margin-bottom: 10px;
 796 }
 797
 798 #acct_sum_checked_table td {
 799     padding-bottom:5px;
 800 }
 801
 802 .zero_search_hits_main { float:left; width:300px; margin-top: 2ex; }
 803 .zero_search_hits_saved { float:left; width:200px; margin-top: 2ex; margin-right: 2em; }
 804
 805 #zero_search_hits p {
 806     margin-top:0;
 807 }
 808
 809 #zero_hits_term {
 810     font-weight: bold;
 811 }
 812
 813 #zero_search_hits #spell_check_link {
 814 }
 815
 816 #zero_search_hits #zero_hits_suggestions {
 817 }
 818
 819 #lowhits_help {
 820     float: right;
 821     width: 353px;
 822     background: [% css_colors.accent_light %];
 823     padding: 10px;
 824     margin-top: 7px;
 825 }
 826
 827 .results_info_table td {
 828     padding-right: 10px;
 829 }
 830
 831 #myopac_holds_main_table {
 832     border-collapse: collapse;
 833 }
 834
 835 #myopac_holds_main_table td {
 836     border: 1px solid [% css_colors.border_dark %];
 837
 838 }
 839
 840 .myopac-hold-available {
 841     color: [% css_colors.text_greatnews %];
 842     font-weight: bold;
 843 }
 844
 845 .myopac-hold-suspended {
 846     color: [% css_colors.text_badnews %];
 847     font-weight: bold;
 848 }
 849
 850 #myopac_prefs_div .data_grid {
 851     border-collapse:collapse;
 852 }
 853
 854 #myopac_prefs_div .data_grid td {
 855     background:[% css_colors.accent_ultralight %];
 856     border-bottom:3px solid [% css_colors.background %];
 857     padding:6px 0px 7px 17px;
 858 }
 859
 860 .header_middle {
 861     height:22px;
 862     font-size: [% css_fonts.size_bigger %];
 863     font-weight:bold;
 864     color:[% css_colors.primary_fade %];
 865     padding: 0px 7px 0px 0px;
 866     border-bottom: 1px dotted [% css_colors.accent_light %];
 867     clear: both;
 868 }
 869
 870 .header_middle a {
 871     font-weight: normal;
 872 }
 873
 874 #acct_sum_block {
 875      float:left;
 876      clear:left;
 877 }
 878
 879 .acct_sum_table {
 880     border-collapse: collapse;
 881     background: [% css_colors.accent_ultralight %];
 882 }
 883
 884 .acct_sum_table tr {
 885     border-bottom: 2px solid white;
 886 }
 887
 888 .acct_sum_table td {
 889     padding: 1em;
 890 }
 891
 892 .acct_sum_table a {
 893     text-transform: none;
 894     position:relative;
 895     top:-1px;
 896 }
 897
 898 .acct_sum_table .view_link {
 899     font-weight: normal;
 900 }
 901
 902 #myopac_sum_fines {
 903     float:right;
 904     padding: 15px 0px 0px 23px;
 905     background: [% css_colors.accent_ultralight %];
 906     width: 177px;
 907     height: 166px;
 908 }
 909
 910 #myopac_sum_fines_placehold { float: right; width: 177px; height: 166px; }
 911
 912 .acct_holds_temp td {
 913     text-align: left;
 914 }
 915
 916 #acct_checked_tabs .align, #acct_holds_tabs .align, #acct_prefs_tabs .align {
 917     float:left;
 918     /*padding-left:10px;*/
 919 }
 920
 921 #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 {
 922     border-collapse: collapse;
 923 }
 924
 925 .hold_notes {
 926     text-transform: none;
 927     font-weight: normal;
 928 }
 929
 930 .hold_note_title { font-weight: bold; }
 931
 932 #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 td {
 933     background: [% css_colors.accent_lighter2 %];
 934     padding: 10px;
 935 }
 936
 937 #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 th {
 938     text-align: left;
 939     padding: 0px 10px 0px 10px;
 940 }
 941
 942 #acct_list_header select, #acct_list_header_anon select {
 943     font-weight:normal;
 944     text-transform:none;
 945 }
 946
 947 .search_catalog_lbl {
 948     font-size: [% css_fonts.size_bigger %];
 949 }
 950 .adv_search_catalog_lbl {
 951     font-size: [% css_fonts.size_bigger %];
 952 }
 953
 954 .browse_the_catalog_lbl {
 955     font-size: [% css_fonts.size_bigger %];
 956 }
 957
 958 .lbl1 {
 959     font-size: [% css_fonts.size_bigger %];
 960     font-weight:bold;
 961 }
 962
 963 .lbl2 {
 964     font-size: [% css_fonts.size_smaller %];
 965     font-weight:normal;
 966     position:relative;
 967     top:3px;
 968     max-width:300px;
 969 }
 970
 971 #myopac_tabs, #adv_search_parent, #fines_payments_wrapper {
 972     background: [% css_colors.primary_fade %];
 973     padding-top:5px;
 974     margin-bottom:20px;
 975 }
 976
 977 #fines_payments_wrapper {
 978     padding-left: 5px;
 979     padding-right: 5px;
 980 }
 981
 982 .myopac_payments_table th { text-align: left; }
 983 .myopac_payments_table thead th { border-bottom: 1px dashed [% css_colors.accent_darker %]; }
 984 .myopac_payments_table thead th:first-child { width: 8em; }
 985 .myopac_payments_table tbody tr:nth-child(odd) { background-color: [% css_colors.accent_lighter %]; }
 986 .myopac_payments_table form { display: inline; }
 987 .myopac_payments_table input[type="submit"] { padding: 1px; }
 988
 989 .payment-error {
 990     font-weight: bold; color: [% css_colors.text_alert %];
 991     padding: 10px; border: 1px solid [% css_colors.accent_medium_dark %];
 992 }
 993
 994 .payment-processing {
 995     font-weight: bold;
 996     color: [% css_colors.text_greatnews %];
 997     font-size: [% css_fonts.size_bigger %];
 998     padding: 10px; border: 1px solid [% css_colors.accent_medium_dark %];
 999     text-align: center;
1000 }
1001 #adv_search_input { width: 100%; }
1002 #adv_search_parent {
1003     margin-bottom:0px;
1004 }
1005 #search-submit-spinner {
1006     height: 16px;
1007     width: 16px;
1008 }
1009 div.adv_search_available {
1010     margin-top: 1em;
1011 }
1012
1013 #myopac_loading {
1014     width:100%;
1015     text-align:center;
1016     padding-top:20px;
1017     font-size: [% css_fonts.size_bigger %];
1018     font-weight:bold;
1019 }
1020
1021 .chili_link {
1022     width:100px !important;
1023     text-align: center !important;
1024 }
1025
1026 .chili_review div.chili_link div {
1027     margin: auto;
1028 }
1029
1030 [%- IF we_want_to_turn_on_facet_styling.defined; %]
1031 /* some facet styling */
1032 .facetClassContainer { margin: 2px; border: 1px solid [% css_colors.accent_light %]; }
1033 .facetClassLabelContainer { border: 1px solid [% css_colors.accent_light %]; }
1034 .facetClassLabel { font-weight: bold; text-align: center; }
1035 .facetFieldContainer {  }
1036 .facetFieldLabel { padding-left: 2px; margin-top: 5px; margin-bottom: 5px; font-weight: bold; text-align: left; }
1037 .extraFacetFieldsWrapper { }
1038 .toggleExtraFacetFieldsButton { float: right; margin: 0px; padding: 0px; }
1039 .facetFieldLineCount {
1040     display: inline-block;
1041     border-right: 1px solid [% css_colors.accent_light %];
1042     color: [% css_colors.accent_mediumdark %];
1043     width: 3em;
1044     margin-right: 3px
1045 }
1046 .facetField { border-top: 1px solid [% css_colors.accent_light %]; }
1047 .facetFields { padding-left: 5px; }
1048 .facetFieldLineValue { overflow: hidden; text-overflow: ellipsis; }
1049 [%- END -%]
1050
1051 div#facet_sidebar {
1052     float: left;
1053     margin-right: 1em;
1054 }
1055
1056 .facet_box_temp {
1057     padding-bottom:3px;
1058 }
1059
1060 .facet_box_temp .header {
1061     height: 2.3em;
1062     background:[% css_colors.primary %];
1063     -moz-border-top-left-radius: 5px;
1064     border-top-left-radius: 5px;
1065     -moz-border-top-right-radius: 5px;
1066     border-top-right-radius: 5px;
1067     font-weight:bold;
1068     color:[% css_colors.text_invert %];
1069     padding-top:4px;
1070 }
1071
1072 .facet_box_temp.filter_box_temp .header {
1073     background: [% css_colors.background_invert %] !important;
1074 }
1075
1076 .facet_box_temp .header .title {
1077     float:left;
1078     padding-top:6px;
1079     padding-left:12px;
1080 }
1081
1082 /* in this context, where h4 is primarily for structure,
1083    avoid the normal large font and margin for h4's */
1084 .facet_box_temp h4 {
1085     font-size : 100%;
1086     margin: 0px;
1087 }
1088
1089 .facet_box_temp .header a.button {
1090     float:right;
1091     padding-top:6px;
1092     padding-right:6px;
1093     color:[% css_colors.text_invert %];
1094 }
1095
1096 .facet_box_wrapper .box_wrapper .box {
1097     border-top:1px solid [% css_colors.border_standard %];
1098     border-left:1px solid [% css_colors.border_standard %];
1099     border-right:1px solid [% css_colors.border_standard %];
1100     padding: 0 0.5em;
1101     width: 14em;
1102     overflow: hidden;
1103 }
1104
1105 .facet_template {
1106     box-sizing: border-box;
1107     -moz-box-sizing: border-box;
1108     display: table;
1109     margin: 0.5em 0;
1110     width: 100%;
1111 }
1112
1113 .facet_template div {
1114     display: table-cell;
1115     padding: 2px;
1116 }
1117
1118 .facet_template.filter_template div {
1119     padding: 0px !important;
1120 }
1121
1122 .facet_template .count {
1123     text-align: right;
1124     color: [% css_colors.accent_mediumdark %];
1125 }
1126
1127 .facet_template_selected {
1128     background-color: [% css_colors.accent_lighter2 %];
1129     border: 1px solid [% css_colors.accent_medium %];
1130 }
1131
1132 #footer-wrap {
1133     background: linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1134     background: -moz-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1135     background: -o-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1136     background: -webkit-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1137     background-color: [% css_colors.primary %];
1138 }
1139
1140 #footer {
1141     padding-top:5px;
1142     padding-bottom: 10px;
1143     margin-left: 1em;
1144     font-size: [% css_fonts.size_small %];
1145 }
1146
1147 #footer a {
1148     color: [% css_colors.text_invert %];
1149     text-decoration: none;
1150     text-shadow: 0 0 0.2em [% css_colors.primary %], 0 0 0.2em [% css_colors.primary %];
1151 }
1152
1153 #copyright_text, #footer_logo {
1154     color: [% css_colors.text_invert %];
1155 }
1156
1157 .color_4 {
1158     font-weight: bold;
1159 }
1160
1161 .advanced_div { padding-top: 15px; }
1162 #adv_global_search { width: 100%; }
1163 #adv_global_search select { width: 13em; }
1164 #adv_global_addrow td { padding-top: 7px; }
1165 #adv_global_input_table { width: 100%; }
1166 #adv_global_input_table select { width: 7em; }
1167 .adv_adv_link {
1168     font-size: [% css_fonts.size_smaller %];
1169     color: [% css_colors.text_alert %];
1170 }
1171 #acct_prefs_header { float: left; }
1172 .search_page_nav_link {
1173     cursor: pointer;
1174     padding-left: 1em;
1175 }
1176 #opac.result.sort { width: 160px; }
1177 .renew-summary, .message-update-summary { font-size: [% css_fonts.size_bigger %]; font-style: italic; margin: 0.5ex 0; }
1178 .failure-text { margin-left: 4em; font-style: italic; color: [% css_colors.text_alert %]; }
1179 .refine-controls { font-size: [% css_fonts.size_bigger %]; padding: 0.5ex 0; }
1180 #adv_search_refine input[type=text] { border: 1px inset [% css_colors.accent_light %] !important; }
1181 #adv_search_refine select { border: 1px inset [% css_colors.accent_light %] !important; }
1182 #adv_search_refine {
1183     padding-left: 5em; background-color: [% css_colors.accent_lighter2 %]; margin: 2ex 0;
1184 }
1185 .row-remover { position: relative; top: 1px; vertical-align: middle; }
1186 .subtle-button {
1187     background-color: [% css_colors.background %];
1188     color: [% css_colors.primary %]; text-decoration: none;
1189     padding: 0; border: 0; margin: 0;
1190     vertical-align: middle;
1191 }
1192 .subtle-button:hover { text-decoration: underline; cursor: pointer; }
1193 .no-dec:hover { text-decoration: none; }
1194 .pending-addr td { background-color: [% css_colors.background_alert %] !important; border: 0 !important; }
1195
1196 #account-update-email table { text-align: center; padding: 20px; margin-top: 18px; border-collapse: collapse; }
1197 #account-update-email table td { padding: 5px 15px 5px 15px; border-bottom: 1px solid [% css_colors.accent_lighter %]; text-align: left;}
1198 #account-update-email-error { font-size: [% css_fonts.size_biggest %]; padding: 10px; border:1px solid [% css_colors.border_standard %];}
1199 a.dash-link:hover { text-decoration: underline !important; }
1200 #list_create_table td { vertical-align: middle; padding: 0 8px; }
1201 #list_create_table {
1202     background-color: [% css_colors.accent_light %];
1203     padding-bottom: 4px;
1204     margin-bottom: 10px;
1205     border-bottom: 1px dotted [% css_colors.accent_medium %];
1206 }
1207 .list-create-table-buttons input[type=image] { margin-top: 2px; }
1208 .result_table_format_cell { padding: 0px 10px; text-align: center; }
1209 .results_row_count { font-weight: bold; }
1210 #hold_editor h1 { font-size: [% css_fonts.size_bigger %]; font-weight: bold; }
1211 #hold_editor h2 { font-size: [% css_fonts.size_big %]; font-weight: normal; text-indent: 2em; font-style: italic; }
1212 #hold_editor h1, #hold_editor h2 { margin: 2px 0; }
1213 #hold_editor_table { background-color: [% css_colors.accent_lighter %]; padding: 0.5em; }
1214 #hold_editor_table th { text-align: right; padding-right: 1em; }
1215 #hold_editor_table td { padding: 0.25em 0; }
1216 .fmt-note { vertical-align: middle; padding-left: 1em !important; }
1217 .hold-editor-controls { text-align: center; padding-top: 1em !important; }
1218 .hold-editor-controls a { padding-left: 2em; }
1219
1220 .text-right { text-align: right; }
1221 .text-right-top { text-align: right; vertical-align: top; }
1222 .rdetail-author-div {
1223     padding-bottom: 10px;
1224     display: inline-block;
1225 }
1226
1227 .invisible { visibility: hidden; }
1228 .rdetail-extras-summary { margin: 10px; }
1229 .staff-hold { background-color: [% css_colors.accent_lightest %]; }
1230 .expert-search tbody tr th { text-align: right; padding-left: 2em; }
1231 .expert-search-row { padding-top: 10px; }
1232 #adv_expert_row label { font-weight: bold; }
1233
1234 .bookshelf tr.browse_border td {
1235     border-bottom: 1px dashed [% css_colors.accent_dark %];
1236     font-size: 1px;
1237     height: 1px;
1238     padding-bottom: 1ex;
1239 }
1240 .cn_browse_item { padding: 2ex; }
1241 .results-paginator-list { padding-left: 1em; }
1242 .results-paginator-selected { color: [% css_colors.text_alert %]; }
1243 .inactive-hold { background: [% css_colors.accent_lightest %]; }
1244 .unread-patron-message { font-weight: bold; }
1245
1246 #hold-items-list td { padding: 5px; margin-bottom: 20px; }
1247 .hold-items-list-title {
1248   font-size: [% css_fonts.size_bigger %];
1249   margin-bottom: 20px;
1250 }
1251 .hold-items-list-problem { color: [% css_colors.text_alert %]; }
1252
1253 .hold_success_links > span { margin: 0 2em; }
1254
1255 .radio-parts-selection {
1256    width: 75%;
1257    margin-bottom: 20px;
1258 }
1259
1260 .parts-radio-option {
1261   display: inline-block;
1262   width:15em;
1263 }
1264
1265 .mr_holds_no_formats {
1266   padding: 5px;
1267   margin-left: 25px;
1268   font-size: 110%;
1269   font-weight: bold;
1270   color: [% css_colors.text_invert %];
1271   background: [% css_colors.primary %];
1272 }
1273
1274 .holds_item_row_separator td {
1275   border-top: 2px dashed [% css_colors.accent_medium %];
1276 }
1277
1278 .big-strong {font-weight: bold; font-size: [% css_fonts.size_bigger %]; }
1279
1280 .results_header_btns, .results_header_sel {
1281     float:left;
1282 }
1283
1284 /*
1285  * .various_containers a = shortcut to putting .opac-button on every 'a' with
1286  *     the tradeoff of increased stylesheet complexity (TODO: rethink?)
1287  */
1288
1289 .opac-multiline-button > a,
1290 .opac-button, .results_header_btns a, #simple-detail-view-links a, .dash_account_buttons a {
1291     color: [% css_colors.button_text %];
1292     font-weight: bold;
1293     text-decoration: none;
1294     cursor: pointer !important;
1295     -moz-border-radius: 5px;
1296     border-radius: 5px;
1297     border: 1px solid [% css_colors.primary %];
1298     background:  [% css_colors.primary_fade %];
1299     margin: 0.5em;
1300     padding: 0.3em;
1301     display: inline-block;
1302 }
1303
1304 .opac-multiline-button > a:hover,
1305 .opac-button:hover, .results_header_btns a:hover, #simple-detail-view-links a:hover, #dash_wrapper a.opac-button:hover {
1306     background: [% css_colors.primary %];
1307 }
1308
1309 .opac-button:disabled {
1310     color: [% css_colors.accent_medium %];
1311     cursor: pointer !important;
1312     border: 1px solid [% css_colors.accent_light %];
1313     background-color: [% css_colors.accent_lighter %];
1314 }
1315
1316 /* Firefox adds its own special space to inputs; this gets us closer */
1317 button.opac-button::-moz-focus-inner, input.opac-button::-moz-focus-inner {
1318     padding: 0;
1319     border: 0;
1320 }
1321
1322 .opac-button-header, #dash_wrapper .opac-button {
1323     background: [% css_colors.control %];
1324     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
1325     font-size: [% css_fonts.size_base %];
1326 }
1327 a.opac-button-header:hover, #dash_wrapper a.opac-button:hover {
1328     border-color: [% css_colors.control %];
1329 }
1330
1331 .opac-multiline-button > a {
1332     display: inline-block;
1333 }
1334
1335 #myopac_checked_div {
1336     padding: 0px;
1337 }
1338
1339 .rdetail-mfhd-head {
1340     margin-top: 5px;
1341     padding-top: 5px;
1342     background-color: [% css_colors.table_heading %];
1343 }
1344
1345 .rdetail-mfhd-type {
1346     padding-left: 1em;
1347 }
1348
1349 .rdetail-mfhd-bottom {
1350     border-bottom: thin solid [% css_colors.border_dark %];
1351     width: 100%;
1352 }
1353
1354 #rdetail_record_details {
1355     clear: both;
1356     margin-top: 1em;
1357 }
1358
1359 .rdetail_content {
1360     margin-left: 1.5em;
1361     padding-left: 1.5em;
1362 }
1363
1364 .rdetail_content_type, .rdetail_subject_type {
1365     vertical-align: top;
1366     font-weight: bold;
1367 }
1368
1369 .bookbag-item-row td { vertical-align: top; }
1370
1371 .error { color: [% css_colors.text_alert %]; font-weight: bold; }
1372 .success {
1373     color: [% css_colors.text_greatnews %];
1374     font-weight: bold;
1375 }
1376
1377 .rdetail_related_subjects {
1378     margin-top: 1.5em;
1379 }
1380
1381 .rdetail_related_series {
1382     margin-top: 1.5em;
1383 }
1384
1385 #rdetail_openurl {
1386     margin-top: 1em;
1387 }
1388
1389 .rdetail_openurl_entry {
1390     margin-left: 1em;
1391     padding-left: 1em;
1392 }
1393 .bookbag-controls-holder { width: 100%; }
1394 .bookbag-controls-holder:nth-child(odd) { background-color: [% css_colors.accent_lighter2 %]; }
1395 .bookbag-controls-holder:nth-child(even) { background-color: [% css_colors.accent_lightest %]; }
1396 .bookbag-controls-holder .most {
1397     padding-left: 0;
1398     margin-right: 5em;
1399 }
1400 h2.bookbag-name { margin-bottom: 0em; padding-bottom: 0em; }
1401 .bookbag-share .fixed { min-width: 4em; }
1402 .bookbag-specific { margin-left: 1em; }
1403 .bookbag-specific div.sort { float: left; width: 45%; text-align: left; }
1404 .bookbag-specific div.meta { float: right; width: 54%; text-align: right; }
1405 #bbag-name-desc-form tr th { vertical-align: middle; }
1406 #bbag-name-desc-form .saver { vertical-align: middle; text-align: center; }
1407 .bookbag-description {
1408     padding-top: 0em;
1409     font-style: italic;
1410     max-width: 40em;
1411 }
1412 #bbag-edit-description { width: 20em; }
1413 #bbag-edit-name { width: 20em; }
1414 textarea { font-family: sans-serif; }
1415 table.bookbag-specific {
1416     border-right: 1px solid [% css_colors.accent_dark %];
1417     border-bottom: 1px solid [% css_colors.accent_medium %];
1418     margin-bottom: 2ex;
1419 }
1420 .bookbag-share {
1421     float: left;
1422     padding: 5px 0;
1423 }
1424 .bookbag-controls {
1425     float: left;
1426     padding: 5px 0px 0px 10px;
1427 }
1428
1429 .bookbag-specific td.list_checkbox {
1430     padding-left: 10px !important;
1431 }
1432 .bookbag-specific td.list_entry {
1433     min-width: 10em;
1434     padding-left: 5px !important;
1435 }
1436 .bookbag-specific td.list_actions {
1437     white-space: nowrap !important;
1438 }
1439 .bookbag-paginator-selected { color: [% css_colors.text_alert %]; }
1440
1441 .list_is_empty {
1442     padding: 8px 0px 6px 0px;
1443     width: 100%;
1444     border: 0;
1445     font-size: [% css_fonts.size_bigger %];
1446     text-align: center;
1447     font-style: italic;
1448 }
1449 .save-notes { padding-bottom: 1.5ex; }
1450
1451 .nonbreaking-wrapper {
1452     display: inline-block;
1453 }
1454
1455 /* Moved from semiauto.css */
1456 .adv_global_input_container {
1457     border-bottom: none;
1458     clear: both;
1459 }
1460 .opac-auto-013 {
1461     border-bottom: none;
1462     *height: 0px;
1463 }
1464 .adv_global_filter_sort {
1465     border: none;
1466     width: 100%;
1467 }
1468 .clear-both { clear: both; }
1469 .common-no-pad {
1470     clear: both;
1471     height: 0px;
1472     margin: 0px;
1473     padding: 0px;
1474 }
1475 .common-full-pad {
1476     clear: both;
1477     height: 15px;
1478 }
1479 .alert { color: [% css_colors.text_alert %]; }
1480 .float-left { float: left; }
1481 .float-right { float: right; }
1482
1483 .saved-searches-header { width: 100%; font-weight: bold; font-size: [% css_fonts.size_bigger %]; }
1484 .saved-searches-header .button { float: right; width: 28px; }
1485 .saved-searches-header .text { float: left; padding-right: 1em; margin: 0.5ex 0;}
1486 .saved-searches-header {font-weight: bold; font-size: [% css_fonts.size_bigger %]; }
1487 .saved-searches { border-bottom: 1px solid [% css_colors.accent_medium %]; padding-right: 1em; }
1488 #staff-saved-search { /* wraps .saved-searches-header and .saved-searches on the record page */
1489     border-right: 1px solid [% css_colors.accent_darker %];
1490 }
1491 .result_item_circulated {
1492     padding-top: 4px;
1493 }
1494
1495 .result_item_circulated span {
1496     position: relative;
1497     top:-3px;
1498     left:3px;
1499 }
1500
1501 #search-only-bookbag-container { margin: 2ex 0; font-weight: bold; }
1502 #result-bookbag-heading { text-align: center; margin: 2ex; }
1503
1504 .result-bookbag-name { font-size: [% css_fonts.size_bigger %]; font-weight: bold; }
1505 .result-bookbag-description { font-size: [% css_fonts.size_bigger %]; font-style: italic; }
1506 .result-bookbag-item-note { font-style: italic; }
1507 .lowhits-bookbag-name { font-weight: bold; }
1508 .oils_AS { font-weight: bold; color: [% css_colors.text_match %]; }
1509 .oils_AS_match_term { text-align: left; color: [% css_colors.text %]; }
1510 .oils_AS_match_field {
1511     font-size: [% css_fonts.size_smallest %]; padding: 0.65em 0;
1512     text-align: right; color: [% css_colors.accent_medium %];
1513 }
1514 table.result_holdings_table {
1515     margin-top: 1em;
1516     margin-bottom: 1em;
1517 }
1518 table.result_holdings_table thead tr {
1519     background: [% css_colors.table_heading %];
1520 }
1521 table.result_holdings_table thead tr th {
1522     font-weight: bold;
1523 }
1524 span.preflib {
1525     margin: 0 2em 0 2em;
1526 }
1527 a.preflib_change {
1528   vertical-align: super;
1529   font-size: [% css_fonts.size_smaller %];
1530   line-height: normal;
1531   text-decoration: none;
1532 }
1533 .rdetail-holding-group { margin-left: 1.5em; }
1534 .rdetail-holding-group span { margin-left: 1.5em; }
1535 .rdetail-holding-group .paging { margin-left: 1.5em; }
1536 #rdetail_deleted_exp {
1537     font-weight: bold;
1538     padding: 1em;
1539     margin: 1em;
1540     border: thick solid [% css_colors.border_alert %];
1541 }
1542
1543 #ac_tab_wrapper { width : 100%; }
1544 .ac_tab { float: left; padding-right: 10px; font-size: [% css_fonts.size_big %]; padding: 5px; border: 1px solid [% css_colors.primary_offset %]; }
1545 .ac_tab_selected { background-color: [% css_colors.primary_offset %]; }
1546 .ac_tab_selected a { color: [% css_colors.text_invert %]; }
1547 #ac_content { clear: both; width: 100%; margin-top: 10px; }
1548
1549 /* Popmenu styles used for making css menus. */
1550 .popmenu {
1551     margin: 0;
1552     padding: 0;
1553 }
1554 .popmenu li {
1555     list-style: none;
1556 }
1557 .popmenu li a {
1558     display: block;
1559     padding: 3px 5px;
1560 }
1561 .popmenu li ul {
1562     display: none;
1563     width: 10em; /* Width to help Opera out */
1564     background-color: [% css_colors.primary %];
1565 }
1566 .popmenu li:hover ul {
1567     display: block;
1568     position: absolute;
1569     margin: 0;
1570     padding: 0;
1571     border-color: [% css_colors.border_dark %];
1572     border-width: 1px;
1573     border-style: solid;
1574 }
1575 .popmenu li:hover li {
1576     float: none;
1577 }
1578 .popmenu li:hover li a {
1579     background-color: [% css_colors.primary %];
1580     color: [% css_colors.accent_ultralight %];
1581 }
1582 .popmenu li li a:hover {
1583     background-color: [% css_colors.accent_ultralight %];
1584     color: [% css_colors.primary %];
1585 }
1586 /* Styles for the temporary list entry. */
1587 .popmenu li:hover li[class~="temporary"] a {
1588     background-color: [% css_colors.primary %];
1589     color: [% css_colors.accent_ultralight %];
1590 }
1591 .popmenu li li[class~="temporary"] a:hover {
1592     background-color: [% css_colors.accent_ultralight %];
1593     color: [% css_colors.primary %];
1594 }
1595 /* Styles for the default list entry. */
1596 .popmenu li:hover li[class~="default"] a {
1597     background-color: [% css_colors.primary %];
1598     color: [% css_colors.accent_ultralight %];
1599 }
1600 .popmenu li li[class~="default"] a:hover {
1601     background-color: [% css_colors.accent_ultralight %];
1602     color: [% css_colors.primary %];
1603 }
1604 /* Styles for the new list entry. */
1605 .popmenu li:hover li[class~="new"] a {
1606     background-color: [% css_colors.primary %];
1607     color: [% css_colors.accent_ultralight %];
1608 }
1609 .popmenu li li[class~="new"] a:hover {
1610     background-color: [% css_colors.accent_ultralight %];
1611     color: [% css_colors.primary %];
1612 }
1613 /* Style to add a divider on the menu. */
1614 .popmenu li li[class~="divider"] {
1615     border-bottom-width: 1px;
1616     border-bottom-color: [% css_colors.border_dark %];
1617     border-bottom-style: solid;
1618 }
1619
1620 #locale_picker_form {
1621     float: right;
1622     padding: 0.5em;
1623     margin-top: 2em;
1624     border-right: thin [% css_colors.control %] solid;
1625 }
1626
1627 #locale_picker_form * {
1628     margin: 0;
1629     padding: 0;
1630     vertical-align: middle;
1631 }
1632
1633 #patron_usr_barcode_not_found {
1634     font-weight: bold; color: [% css_colors.text_alert %];
1635 }
1636
1637 .record_title {
1638     font-weight: bold;
1639 }
1640
1641 .record_author {
1642     font-style: italic;
1643 }
1644
1645 .password_message {
1646     padding-top: 1em;
1647     padding-bottom: 0.5em;
1648         font-style: italic;
1649 }
1650
1651 #maintenance_message {
1652     padding: 5px;
1653     width: 100%;
1654     background-color: [% css_colors.text_alert %];
1655     color: [% css_colors.text_invert %];
1656     text-align: center;
1657 }
1658
1659 #search-box > span {
1660     margin: 0 1em;
1661 }
1662 .browse-error {
1663     font-weight: bold;
1664     font-color: #c00;
1665 }
1666 .browse-result-sources, .browse-result-authority-bib-links {
1667     margin-left: 1em;
1668 }
1669 .browse-result-best-match {
1670     font-weight: bold;
1671 }
1672 .browse-pager {
1673     margin: 2ex 0;
1674 }
1675 .browse-result-list {
1676     padding-bottom: 0.5ex;
1677 }
1678 .browse-shortcuts {
1679     font-size: [% css_fonts.size_bigger %];
1680 }
1681 .browse-result-authority-field-name {
1682     font-style: italic;
1683     margin-right: 1em;
1684 }
1685 .browse-leading-article-warning {
1686     font-style: italic;
1687     font-size: [% css_fonts.size_big %];
1688 }
1689 .browse-public-general-note {
1690     font-size: [% css_fonts.size_big %];
1691 }
1692 .browse-public-general-note-label { }
1693 .browse-public-general-note-institution {
1694     font-style: normal;
1695     font-weight: bold;
1696 }
1697 .browse-public-general-note-body {
1698     font-style: italic;
1699 }
1700
1701 .bib_peer_type {
1702     font-weight: bold;
1703 }
1704
1705 #main-content-register {
1706     margin-left: 40px;
1707     font-size: [% css_fonts.size_bigger %];
1708 }
1709
1710 #main-content-register table {
1711     padding: 20px;
1712     margin-top: 18px;
1713     border-collapse: collapse;
1714 }
1715
1716 #main-content-register td {
1717     text-align: left;
1718 }
1719
1720 #main-content-register td:not(:first-child) {
1721     padding-left: 20px;
1722 }
1723
1724 .patron-reg-invalid {
1725     font-weight: bold;
1726     color: red;
1727     padding-right: 10px;
1728 }
1729
1730 .result_footer_nav1 {
1731     clear: both;
1732 }
1733
1734 .small_view_only, #refine_hits, #return_to_hits {
1735     display: none;
1736 }
1737
1738 .rdetail_authors_div {
1739     margin-bottom: 1em;
1740 }
1741
1742 #search_query_label, #search_qtype_label, #search_itype_label, #search_locg_label {
1743     white-space: nowrap;
1744     display: inline-block;
1745 }
1746
1747 .result_table_title_cell {
1748     padding-top: 4px;
1749     padding-bottom: 4px;
1750 }
1751
1752 .record_title {
1753     font-size: [% css_fonts.size_bigger %];
1754 }
1755
1756 /* styling for sms text call number */
1757 .sms_text pre {
1758     font-family: Arial, Helvetica, sans-serif;
1759     font-size: [% css_fonts.size_medium %];
1760     background: [% css_colors.accent_lightest %];
1761     padding: .5%;
1762     /* Allow text to wrap */
1763     white-space: pre-wrap;       /* css-3 */
1764     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
1765     white-space: -pre-wrap;      /* Opera 4-6 */
1766     white-space: -o-pre-wrap;    /* Opera 7 */
1767     word-wrap: break-word;       /* Internet Explorer 5.5+ */
1768 }
1769
1770 .mobile_view {
1771    display:none;
1772 }
1773
1774 /* patron message center */
1775 #myopac_message_tbody {
1776     vertical-align: top;
1777 }
1778 .myopac_message_message {
1779     white-space: pre-wrap;
1780 }
1781
1782 @media only screen and (max-width: 800px) {
1783     .facet_sidebar_hidden, .result_block_hidden {
1784         display: none;
1785     }
1786     .facet_sidebar_visible, .result_block_visible {
1787         display: inline ! important;
1788     }
1789     #acct_select, #acct_prefs_select {
1790         display: inline-block;
1791     }
1792     #acct_tabs, #acct_prefs_tabs {
1793          display:none;
1794      }
1795     .radio-parts-selection { width: 90%; }
1796 }
1797
1798 @media only screen and (max-width: 600px) {
1799     input, select {
1800         font-size: [% css_fonts.size_big %];
1801     }
1802     span .nav_arrow_fix {
1803         display: none;
1804     }
1805     #header {
1806         padding: 0px;
1807         margin: 0px;
1808     }
1809     #homesearch_main_logo img {
1810         width:75%;
1811     }
1812     #format_selector {
1813         display:none;
1814     }
1815     #your-acct-login {
1816         padding: 0px;
1817         padding-top: 5px;
1818     }
1819     #your-acct-login a {
1820         margin: 0px;
1821         padding: 5px;
1822     }
1823     #topnav_logo {
1824         margin: 0;
1825     }
1826     #topnav_logo img {
1827         width: 200px;
1828     }
1829     #locale_picker_form {
1830         display: none;
1831     }
1832     #gold-links-holder {
1833         display: none;
1834     }
1835     #simple-detail-view-links {
1836         display: none;
1837     }
1838     #acct_tabs a, #acct_fines_tabs a {
1839        padding: 2px 4px 3px 4px;
1840        -moz-border-radius: 6px 6px 0px 0px;
1841        border-radius: 6px 6px 0px 0px;
1842        font-size: [% css_fonts.size_base %];
1843        margin: 0px 5px 0px 0px;
1844     }
1845
1846     #dash_wrapper div {
1847         background: transparent;
1848         padding: 0px;
1849     }
1850     #dash_wrapper {
1851         position: static;
1852         top: auto;
1853     }
1854     #dash_wrapper .opac-button {
1855         top: 0px;
1856     }
1857     .small_view_only {
1858         display: inline !important;
1859     }
1860     #dash_identity a {
1861         float:left;
1862     }
1863     #dashboard {
1864         display: none;
1865     }
1866     #holds_box form blockquote {
1867         margin-left: 10px;
1868         margin-right: 2px;
1869     }
1870     #holds_box form blockquote select {
1871         width: 100%;
1872     }
1873     #myopac_sum_fines_placehold {
1874         display:none;
1875     }
1876     #myopac_sum_fines {
1877         display: none;
1878     }
1879     .results_header_lbl {
1880         display: none;
1881     }
1882     .results_header_nav1 span.h1 {
1883         display: none;
1884     }
1885     .preflib {
1886         display: none;
1887     }
1888     .start_end_links_span {
1889         display: block;
1890     }
1891     .invisible {
1892         display: none;
1893     }
1894     .result_table_pic_header {
1895         padding-left: 0px !important;
1896         padding-right: 5px;
1897         width: 0px !important;
1898         margin: 0px;
1899     }
1900     .result_table_pic {
1901         width: 55px;
1902         padding: 0px;
1903         margin: 0px;
1904     }
1905     tr[name=results_isbn_tr], tr[name=results_phys_desc_tr], tr[name=results_pub_tr] strong, .result_count {
1906          display: none;
1907     }
1908     tr.result_table_title_cell[name=bib_cn_list] .result_holdings_table th:nth-child(4),
1909     tr.result_table_title_cell[name=bib_cn_list] .result_holdings_table td:nth-child(4) {
1910         display:none;
1911     }
1912     .results_info_table td {
1913         padding: 0px;
1914     }
1915     #results_header_bar {
1916         background-color: inherit;
1917     }
1918     .results_header_btns a {
1919         margin: 0.3em;
1920     }
1921     #main-content {
1922         margin: 0 1px;
1923     }
1924     #rdetails_status thead {
1925         display: none;
1926     }
1927     #rdetails_status tr {
1928         display: block;
1929         margin-top: 3px;
1930     }
1931     #rdetails_status td {
1932         display: block;
1933         padding: 1px;
1934     }
1935     .copy_details_row {
1936         background-color: [% css_colors.accent_lightest %];
1937     }
1938     .copy_details_offers_row {
1939         background-color: [% css_colors.accent_lightest %];
1940     }
1941     select#pickup_lib.search-wrapper-locg {
1942         width: 100%;
1943     }
1944     #search-wrapper #search-box {
1945         width: 85%;
1946         padding-top: 5px;
1947     }
1948     #main-content-home {
1949         padding: 0px;
1950         margin: 0px;
1951     }
1952     /* Make use of full width in mobile mode */
1953     .facet_box_wrapper .box_wrapper .box,
1954     .facet_template .facet,
1955     .facet_box_temp {
1956         width: inherit;
1957     }
1958     .facet_template .count {
1959         padding-left: 1em;
1960     }
1961     #facet_sidebar {
1962         margin-top: 0.5em;
1963     }
1964     #adv_search_parent {
1965         font-size: [% css_fonts.size_smaller %];
1966     }
1967     #adv_search_filters {
1968         position: relative;
1969         width: 300px;
1970     }
1971     #format_actions {
1972         float: left;
1973     }
1974     .rdetail_aux_utils {
1975         padding: 0px;
1976         border: none;
1977     }
1978     .result_metadata {
1979         width: inherit;
1980     }
1981     div#rdetail_actions_div {
1982         float: none;
1983     }
1984     h2.rdetail_uris {
1985         clear: both;
1986     }
1987     .search_catalog_lbl {
1988         margin-left: 0;
1989         white-space: nowrap;
1990     }
1991     .adv_search_catalog_lbl {
1992         margin-top: 0;
1993         white-space: nowrap;
1994     }
1995     .browse_the_catalog_lbl {
1996         white-space: nowrap;
1997     }
1998     .mobile_hide {
1999         display: none;
2000     }
2001     #dash_user {
2002         display: block;
2003         padding: 0.5em;
2004     }
2005     .dash_divider {
2006         display: none;
2007     }
2008     .dash_account_buttons {
2009         display: block;
2010     }
2011     .searchbar { line-height: 1.5em; }
2012     #browse-controls { line-height: 1.5em; }
2013     #search_query_label, #search_qtype_label, #search_itype_label, #search_locg_label {
2014         display: block;
2015     }
2016     .bookshelf td {
2017         display: block;
2018         width: 100%;
2019     }
2020     .bookshelf table thead tr {
2021         display: block;
2022     }
2023     #lowhits_help { width: inherit; }
2024     #adv_search_tabs a{
2025         font-size: [% css_fonts.size_small %];
2026         margin: 2px 2px 0px 2px;
2027         padding: 2px 2px 5px 2px;
2028         -moz-border-radius: 10px 0px 0px 0px;
2029         border-radius: 7px 7px 0px 0px;
2030     }
2031     #adv_global_tbody td {
2032         border-bottom: thin solid [% css_colors.accent_light %];
2033     }
2034     #adv_global_addrow td {
2035         border-bottom: none;
2036     }
2037         /* Force table to not be like tables anymore */
2038         table#acct_checked_main_header thead tr th, table#acct_holds_main_header thead tr th, table#acct_checked_hist_header thead tr th, #acct_holds_hist_header thead tr th {
2039                 display: block;
2040         }
2041         table#acct_checked_main_header tbody tr td, table#acct_holds_main_header tbody tr td, table#acct_checked_hist_header tbody tr td, #acct_holds_hist_header tbody tr td {
2042                 display: block;
2043         }
2044
2045         /* Hide table headers (but not display: none;, for accessibility) */
2046         thead tr {
2047                 position: absolute;
2048                 top: -9999px;
2049                 left: -9999px;
2050         }
2051
2052         table#acct_checked_main_header, table#acct_holds_main_header, table#acct_checked_hist_header, #acct_holds_hist_header {
2053                 width: 90%;
2054         }
2055
2056         table#acct_checked_main_header tr, table#acct_holds_main_header tr, table#acct_checked_hist_header tr { border: 1px solid #ddd; }
2057
2058         /* Holds history gets large white border to mimic header cell on other
2059            account screens that provide visual cue for next title */
2060
2061         table#acct_holds_hist_header tr { border-top: 25px solid #fff; }
2062
2063
2064         table#acct_checked_main_header td, table#acct_holds_main_header td, table#acct_checked_hist_header td, #acct_holds_hist_header td {
2065                 /* Behave  like a "row" */
2066                 border: none;
2067                 border-bottom: 1px solid #eee;
2068                 position: relative;
2069                 padding-left: 40%;
2070         }
2071
2072          table#acct_checked_main_header td:before, table#acct_holds_main_header td:before, table#acct_checked_hist_header td:before, #acct_holds_hist_header td_before {
2073                 /* Now like a table header */
2074                 position: absolute;
2075                 /* Top/left values mimic padding */
2076                 top: 2px;
2077                 left: 2px;
2078                 width: 40%;
2079                 padding-right: 10px;
2080                 white-space: nowrap;
2081         }
2082
2083         table#acct_checked_main_header td:nth-of-type(1) { border-top: 5px solid #aaa; padding-top: 15px; background-color: #fff;}
2084         table#acct_checked_main_header td:nth-of-type(2):before { content: "[% l('Title') %]";}
2085         table#acct_checked_main_header td:nth-of-type(3):before { content: "[% l('Author') %]"; }
2086         table#acct_checked_main_header td:nth-of-type(4):before { content: "[% l('Renewals Left') %]"; }
2087         table#acct_checked_main_header td:nth-of-type(5):before { content: "[% l('Due Date') %]"; }
2088         table#acct_checked_main_header td:nth-of-type(6):before { content: "[% l('Barcode') %]"; }
2089         table#acct_checked_main_header td:nth-of-type(7):before { content: "[% l('Call number') %]"; }
2090
2091      table#acct_checked_hist_header td:nth-of-type(1) { border-top: 5px solid #aaa; padding-top: 15px; background-color: #fff;}
2092         table#acct_checked_hist_header td:nth-of-type(2):before { content: "[% l('Title') %]";}
2093         table#acct_checked_hist_header td:nth-of-type(3):before { content: "[% l('Author') %]"; }
2094         table#acct_checked_hist_header td:nth-of-type(4):before { content: "[% l('Checkout Date') %]"; }
2095         table#acct_checked_hist_header td:nth-of-type(5):before { content: "[% l('Due Date') %]"; }
2096         table#acct_checked_hist_header td:nth-of-type(6):before { content: "[% l('Date Returned') %]"; }
2097         table#acct_checked_hist_header td:nth-of-type(7):before { content: "[% l('Barcode') %]"; }
2098         table#acct_checked_hist_header td:nth-of-type(8):before { content: "[% l('Call number') %]"; }
2099
2100         table#acct_holds_main_header td:nth-of-type(1) { border-top: 5px solid #aaa; padding-top: 15px; background-color: #fff;}
2101         table#acct_holds_main_header td:nth-of-type(2):before { content: "[% l('Title') %]";}
2102         table#acct_holds_main_header td:nth-of-type(3):before { content: "[% l('Author') %]"; }
2103         table#acct_holds_main_header td:nth-of-type(4):before { content: "[% l('Format') %]"; }
2104         table#acct_holds_main_header td:nth-of-type(5):before { content: "[% l('Pickup Location') %]"; }
2105         table#acct_holds_main_header td:nth-of-type(6):before { content: "[% l('Cancel on') %]"; }
2106         table#acct_holds_main_header td:nth-of-type(7):before { content: "[% l('Status') %]"; }
2107         table#acct_holds_main_header td.hold_notes:before { content: "[% l('Notes') %]"; }
2108
2109         table#acct_holds_hist_header td:nth-of-type(1):before { content: "[% l('Title') %]";}
2110         table#acct_holds_hist_header td:nth-of-type(2):before { content: "[% l('Author') %]"; }
2111         table#acct_holds_hist_header td:nth-of-type(3):before { content: "[% l('Format') %]"; }
2112         table#acct_holds_hist_header td:nth-of-type(4):before { content: "[% l('Pickup Location') %]"; }
2113         table#acct_holds_hist_header td:nth-of-type(8):before { content: "[% l('Status') %]"; }
2114
2115
2116        /*Want to see these in mobile ONLY */
2117        .mobile_view{
2118           display:block;
2119        }
2120
2121        .mobile_search_lbl_clr{
2122           color:[% css_colors.mobile_header_text %];
2123        }
2124 }
2125
2126
2127 /*
2128 For text which is visible only to screen readers.
2129 Borrowed from http://getbootstrap.com/css/#helper-classes-screen-readers
2130 See also http://webaim.org/techniques/css/invisiblecontent/
2131 */
2132 .sr-only {
2133     position: absolute;
2134     width: 1px;
2135     height: 1px;
2136     padding: 0;
2137     margin: -1px;
2138     overflow: hidden;
2139     clip: rect(0, 0, 0, 0);
2140     border: 0;
2141 }
2142
2143 /* Make added rows in Expert Search have bold labels like the initial row */
2144 label[for*=expert_]
2145 {
2146     font-weight: bold;
2147 }
2148
2149 .sort_deemphasize {
2150     font-weight: lighter;
2151     font-size: 70%;
2152 }
2153
2154 #results-page-depth-hint {
2155     text-align: center;
2156     font-style: italic;
2157 }
2158
2159 #clear-history-confirm {
2160   font-weight: bold;
2161   color: [% css_colors.text_badnews %];
2162   padding: 10px;
2163 }