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