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 .mr_holds_no_formats {
1210   padding: 5px;
1211   margin-left: 25px;
1212   font-size: 110%;
1213   font-weight: bold;
1214   color: [% css_colors.text_invert %];
1215   background: [% css_colors.primary %];
1216 }
1217
1218 .holds_item_row_separator td {
1219   border-top: 2px dashed [% css_colors.accent_medium %];
1220 }
1221
1222 .big-strong {font-weight: bold; font-size: [% css_fonts.size_bigger %]; }
1223
1224 .results_header_btns, .results_header_sel {
1225     float:left;
1226 }
1227
1228 /*
1229  * .various_containers a = shortcut to putting .opac-button on every 'a' with
1230  *     the tradeoff of increased stylesheet complexity (TODO: rethink?)
1231  */
1232
1233 .opac-multiline-button > a,
1234 .opac-button, .results_header_btns a, #simple-detail-view-links a, .dash_account_buttons a {
1235     color: [% css_colors.button_text %];
1236     font-weight: bold;
1237     text-decoration: none;
1238     cursor: pointer !important;
1239     -moz-border-radius: 5px;
1240     border-radius: 5px;
1241     border: 1px solid [% css_colors.primary %];
1242     background:  [% css_colors.primary_fade %];
1243     margin: 0.5em;
1244     padding: 0.3em;
1245     display: inline-block;
1246 }
1247
1248 .opac-multiline-button > a:hover,
1249 .opac-button:hover, .results_header_btns a:hover, #simple-detail-view-links a:hover, #dash_wrapper a.opac-button:hover {
1250     background: [% css_colors.primary %];
1251 }
1252
1253 .opac-button:disabled {
1254     color: [% css_colors.accent_medium %];
1255     cursor: pointer !important;
1256     border: 1px solid [% css_colors.accent_light %];
1257     background-color: [% css_colors.accent_lighter %];
1258 }
1259
1260 /* Firefox adds its own special space to inputs; this gets us closer */
1261 button.opac-button::-moz-focus-inner, input.opac-button::-moz-focus-inner {
1262     padding: 0;
1263     border: 0;
1264 }
1265
1266 .opac-button-header, #dash_wrapper .opac-button {
1267     background: [% css_colors.control %];
1268     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
1269     font-size: [% css_fonts.size_base %];
1270 }
1271 a.opac-button-header:hover, #dash_wrapper a.opac-button:hover {
1272     border-color: [% css_colors.control %];
1273 }
1274
1275 .opac-multiline-button > a {
1276     display: inline-block;
1277 }
1278
1279 #myopac_checked_div {
1280     padding: 0px;
1281 }
1282
1283 .rdetail-mfhd-head {
1284     margin-top: 5px;
1285     padding-top: 5px;
1286     background-color: [% css_colors.table_heading %];
1287 }
1288
1289 .rdetail-mfhd-type {
1290     padding-left: 1em;
1291 }
1292
1293 .rdetail-mfhd-bottom {
1294     border-bottom: thin solid [% css_colors.border_dark %];
1295     width: 100%;
1296 }
1297
1298 #rdetail_record_details {
1299     clear: both;
1300     margin-top: 1em;
1301 }
1302
1303 .rdetail_content {
1304     margin-left: 1.5em;
1305     padding-left: 1.5em;
1306 }
1307
1308 .rdetail_content_type, .rdetail_subject_type {
1309     vertical-align: top;
1310     font-weight: bold;
1311 }
1312
1313 .bookbag-item-row td { vertical-align: top; }
1314
1315 .error { color: [% css_colors.text_alert %]; font-weight: bold; }
1316 .success {
1317     color: [% css_colors.text_greatnews %];
1318     font-weight: bold;
1319 }
1320
1321 .rdetail_related_subjects {
1322     margin-top: 1.5em;
1323 }
1324
1325 .rdetail_related_series {
1326     margin-top: 1.5em;
1327 }
1328
1329 #rdetail_openurl {
1330     margin-top: 1em;
1331 }
1332
1333 .rdetail_openurl_entry {
1334     margin-left: 1em;
1335     padding-left: 1em;
1336 }
1337 .bookbag-controls-holder { width: 100%; }
1338 .bookbag-controls-holder:nth-child(odd) { background-color: [% css_colors.accent_lighter2 %]; }
1339 .bookbag-controls-holder:nth-child(even) { background-color: [% css_colors.accent_lightest %]; }
1340 .bookbag-controls-holder .most {
1341     padding-left: 0;
1342     margin-right: 5em;
1343 }
1344 h2.bookbag-name { margin-bottom: 0em; padding-bottom: 0em; }
1345 .bookbag-share .fixed { min-width: 4em; }
1346 .bookbag-specific { margin-left: 1em; }
1347 .bookbag-specific div.sort { float: left; width: 45%; text-align: left; }
1348 .bookbag-specific div.meta { float: right; width: 54%; text-align: right; }
1349 #bbag-name-desc-form tr th { vertical-align: middle; }
1350 #bbag-name-desc-form .saver { vertical-align: middle; text-align: center; }
1351 .bookbag-description {
1352     padding-top: 0em;
1353     font-style: italic;
1354     max-width: 40em;
1355 }
1356 #bbag-edit-description { width: 20em; }
1357 #bbag-edit-name { width: 20em; }
1358 textarea { font-family: sans-serif; }
1359 table.bookbag-specific {
1360     border-right: 1px solid [% css_colors.accent_dark %];
1361     border-bottom: 1px solid [% css_colors.accent_medium %];
1362     margin-bottom: 2ex;
1363 }
1364 .bookbag-share {
1365     float: left;
1366     padding: 5px 0;
1367 }
1368 .bookbag-controls {
1369     float: left;
1370     padding: 5px 0px 0px 10px;
1371 }
1372
1373 .bookbag-specific td.list_checkbox {
1374     padding-left: 10px !important;
1375 }
1376 .bookbag-specific td.list_entry {
1377     min-width: 10em;
1378     padding-left: 5px !important;
1379 }
1380 .bookbag-specific td.list_actions {
1381     white-space: nowrap !important;
1382 }
1383 .bookbag-paginator-selected { color: [% css_colors.text_alert %]; }
1384
1385 .list_is_empty {
1386     padding: 8px 0px 6px 0px;
1387     width: 100%;
1388     border: 0;
1389     font-size: [% css_fonts.size_bigger %];
1390     text-align: center;
1391     font-style: italic;
1392 }
1393 .save-notes { padding-bottom: 1.5ex; }
1394
1395 .nonbreaking-wrapper {
1396     display: inline-block;
1397 }
1398
1399 /* Moved from semiauto.css */
1400 .adv_global_input_container {
1401     border-bottom: none;
1402     clear: both;
1403 }
1404 .opac-auto-013 {
1405     border-bottom: none;
1406     *height: 0px;
1407 }
1408 .adv_global_filter_sort {
1409     border: none;
1410     width: 100%;
1411 }
1412 .clear-both { clear: both; }
1413 .common-no-pad {
1414     clear: both;
1415     height: 0px;
1416     margin: 0px;
1417     padding: 0px;
1418 }
1419 .common-full-pad {
1420     clear: both;
1421     height: 15px;
1422 }
1423 .alert { color: [% css_colors.text_alert %]; }
1424 .float-left { float: left; }
1425 .float-right { float: right; }
1426
1427 .saved-searches-header { width: 100%; font-weight: bold; font-size: [% css_fonts.size_bigger %]; }
1428 .saved-searches-header .button { float: right; width: 28px; }
1429 .saved-searches-header .text { float: left; padding-right: 1em; margin: 0.5ex 0;}
1430 .saved-searches-header {font-weight: bold; font-size: [% css_fonts.size_bigger %]; }
1431 .saved-searches { border-bottom: 1px solid [% css_colors.accent_medium %]; padding-right: 1em; }
1432 #staff-saved-search { /* wraps .saved-searches-header and .saved-searches on the record page */
1433     border-right: 1px solid [% css_colors.accent_darker %];
1434 }
1435 .result_item_circulated {
1436     padding-top: 4px;
1437 }
1438
1439 .result_item_circulated span {
1440     position: relative;
1441     top:-3px;
1442     left:3px;
1443 }
1444
1445 #search-only-bookbag-container { margin: 2ex 0; font-weight: bold; }
1446 #result-bookbag-heading { text-align: center; margin: 2ex; }
1447
1448 .result-bookbag-name { font-size: [% css_fonts.size_bigger %]; font-weight: bold; }
1449 .result-bookbag-description { font-size: [% css_fonts.size_bigger %]; font-style: italic; }
1450 .result-bookbag-item-note { font-style: italic; }
1451 .lowhits-bookbag-name { font-weight: bold; }
1452 .oils_AS { font-weight: bold; color: [% css_colors.text_match %]; }
1453 .oils_AS_match_term { text-align: left; color: [% css_colors.text %]; }
1454 .oils_AS_match_field {
1455     font-size: [% css_fonts.size_smallest %]; padding: 0.65em 0;
1456     text-align: right; color: [% css_colors.accent_medium %];
1457 }
1458 table.result_holdings_table {
1459     margin-top: 1em;
1460     margin-bottom: 1em;
1461 }
1462 table.result_holdings_table thead tr {
1463     background: [% css_colors.table_heading %];
1464 }
1465 table.result_holdings_table thead tr th {
1466     font-weight: bold;
1467 }
1468 span.preflib {
1469     margin: 0 2em 0 2em;
1470 }
1471 a.preflib_change {
1472   vertical-align: super;
1473   font-size: [% css_fonts.size_smaller %];
1474   line-height: normal;
1475   text-decoration: none;
1476 }
1477 .rdetail-holding-group { margin-left: 1.5em; }
1478 .rdetail-holding-group span { margin-left: 1.5em; }
1479 .rdetail-holding-group .paging { margin-left: 1.5em; }
1480 #rdetail_deleted_exp {
1481     font-weight: bold;
1482     padding: 1em;
1483     margin: 1em;
1484     border: thick solid [% css_colors.border_alert %];
1485 }
1486
1487 #ac_tab_wrapper { width : 100%; }
1488 .ac_tab { float: left; padding-right: 10px; font-size: [% css_fonts.size_big %]; padding: 5px; border: 1px solid [% css_colors.primary_offset %]; }
1489 .ac_tab_selected { background-color: [% css_colors.primary_offset %]; }
1490 .ac_tab_selected a { color: [% css_colors.text_invert %]; }
1491 #ac_content { clear: both; width: 100%; margin-top: 10px; }
1492
1493 /* Popmenu styles used for making css menus. */
1494 .popmenu {
1495     margin: 0;
1496     padding: 0;
1497 }
1498 .popmenu li {
1499     list-style: none;
1500 }
1501 .popmenu li a {
1502     display: block;
1503     padding: 3px 5px;
1504 }
1505 .popmenu li ul {
1506     display: none;
1507     width: 10em; /* Width to help Opera out */
1508     background-color: [% css_colors.primary %];
1509 }
1510 .popmenu li:hover ul {
1511     display: block;
1512     position: absolute;
1513     margin: 0;
1514     padding: 0;
1515     border-color: [% css_colors.border_dark %];
1516     border-width: 1px;
1517     border-style: solid;
1518 }
1519 .popmenu li:hover li {
1520     float: none;
1521 }
1522 .popmenu li:hover li a {
1523     background-color: [% css_colors.primary %];
1524     color: [% css_colors.accent_ultralight %];
1525 }
1526 .popmenu li li a:hover {
1527     background-color: [% css_colors.accent_ultralight %];
1528     color: [% css_colors.primary %];
1529 }
1530 /* Styles for the temporary list entry. */
1531 .popmenu li:hover li[class~="temporary"] a {
1532     background-color: [% css_colors.primary %];
1533     color: [% css_colors.accent_ultralight %];
1534 }
1535 .popmenu li li[class~="temporary"] a:hover {
1536     background-color: [% css_colors.accent_ultralight %];
1537     color: [% css_colors.primary %];
1538 }
1539 /* Styles for the default list entry. */
1540 .popmenu li:hover li[class~="default"] a {
1541     background-color: [% css_colors.primary %];
1542     color: [% css_colors.accent_ultralight %];
1543 }
1544 .popmenu li li[class~="default"] a:hover {
1545     background-color: [% css_colors.accent_ultralight %];
1546     color: [% css_colors.primary %];
1547 }
1548 /* Styles for the new list entry. */
1549 .popmenu li:hover li[class~="new"] a {
1550     background-color: [% css_colors.primary %];
1551     color: [% css_colors.accent_ultralight %];
1552 }
1553 .popmenu li li[class~="new"] a:hover {
1554     background-color: [% css_colors.accent_ultralight %];
1555     color: [% css_colors.primary %];
1556 }
1557 /* Style to add a divider on the menu. */
1558 .popmenu li li[class~="divider"] {
1559     border-bottom-width: 1px;
1560     border-bottom-color: [% css_colors.border_dark %];
1561     border-bottom-style: solid;
1562 }
1563
1564 #locale_picker_form {
1565     float: right;
1566     padding: 0.5em;
1567     margin-top: 2em;
1568     border-right: thin [% css_colors.control %] solid;
1569 }
1570
1571 #locale_picker_form * {
1572     margin: 0;
1573     padding: 0;
1574     vertical-align: middle;
1575 }
1576
1577 #patron_usr_barcode_not_found {
1578     font-weight: bold; color: [% css_colors.text_alert %];
1579 }
1580
1581 .record_title {
1582     font-weight: bold;
1583 }
1584
1585 .record_author {
1586     font-style: italic;
1587 }
1588
1589 .password_message {
1590     padding-top: 1em;
1591     padding-bottom: 0.5em;
1592         font-style: italic;
1593 }
1594
1595 #maintenance_message {
1596     padding: 5px;
1597     width: 100%;
1598     background-color: [% css_colors.text_alert %];
1599     color: [% css_colors.text_invert %];
1600     text-align: center;
1601 }
1602
1603 #search-box > span {
1604     margin: 0 1em;
1605 }
1606 .browse-error {
1607     font-weight: bold;
1608     font-color: #c00;
1609 }
1610 .browse-result-sources, .browse-result-authority-bib-links {
1611     margin-left: 1em;
1612 }
1613 .browse-result-best-match {
1614     font-weight: bold;
1615 }
1616 .browse-pager {
1617     margin: 2ex 0;
1618 }
1619 .browse-result-list {
1620     padding-bottom: 0.5ex;
1621 }
1622 .browse-shortcuts {
1623     font-size: [% css_fonts.size_bigger %];
1624 }
1625 .browse-result-authority-field-name {
1626     font-style: italic;
1627     margin-right: 1em;
1628 }
1629 .browse-leading-article-warning {
1630     font-style: italic;
1631     font-size: [% css_fonts.size_big %];
1632 }
1633 .browse-public-general-note {
1634     font-size: [% css_fonts.size_big %];
1635 }
1636 .browse-public-general-note-label { }
1637 .browse-public-general-note-institution {
1638     font-style: normal;
1639     font-weight: bold;
1640 }
1641 .browse-public-general-note-body {
1642     font-style: italic;
1643 }
1644
1645 .bib_peer_type {
1646     font-weight: bold;
1647 }
1648
1649 #main-content-register {
1650     margin-left: 40px;
1651     font-size: [% css_fonts.size_bigger %];
1652 }
1653
1654 #main-content-register table {
1655     padding: 20px;
1656     margin-top: 18px;
1657     border-collapse: collapse;
1658 }
1659
1660 #main-content-register td {
1661     text-align: left;
1662 }
1663
1664 #main-content-register td:not(:first-child) {
1665     padding-left: 20px;
1666 }
1667
1668 .patron-reg-invalid {
1669     font-weight: bold;
1670     color: red;
1671     padding-right: 10px;
1672 }
1673
1674 .result_footer_nav1 {
1675     clear: both;
1676 }
1677
1678 .small_view_only, #refine_hits, #return_to_hits {
1679     display: none;
1680 }
1681
1682 .rdetail_authors_div {
1683     margin-bottom: 1em;
1684 }
1685
1686 #search_query_label, #search_qtype_label, #search_itype_label, #search_locg_label {
1687     white-space: nowrap;
1688     display: inline-block;
1689 }
1690
1691 .result_table_title_cell {
1692     padding-top: 4px;
1693     padding-bottom: 4px;
1694 }
1695
1696 .record_title {
1697     font-size: [% css_fonts.size_bigger %];
1698 }
1699
1700 .mobile_view {
1701    display:none;
1702 }
1703
1704 @media only screen and (max-width: 800px) {
1705     .facet_sidebar_hidden, .result_block_hidden {
1706         display: none;
1707     }
1708     .facet_sidebar_visible, .result_block_visible {
1709         display: inline ! important;
1710     }
1711     #acct_select, #acct_prefs_select {
1712         display: inline-block;
1713     }
1714 #acct_tabs, #acct_prefs_tabs {
1715          display:none;
1716      }
1717 }
1718
1719 @media only screen and (max-width: 600px) {
1720     input, select {
1721         font-size: [% css_fonts.size_big %];
1722     }
1723     span .nav_arrow_fix {
1724         display: none;
1725     }
1726     #header {
1727         padding: 0px;
1728         margin: 0px;
1729     }
1730     #homesearch_main_logo img {
1731         width:75%;
1732     }
1733     #format_selector {
1734         display:none;
1735     }
1736     #your-acct-login {
1737         padding: 0px;
1738         padding-top: 5px;
1739     }
1740     #your-acct-login a {
1741         margin: 0px;
1742         padding: 5px;
1743     }
1744     #topnav_logo {
1745         margin: 0;
1746     }
1747     #topnav_logo img {
1748         width: 200px;
1749     }
1750     #locale_picker_form {
1751         display: none;
1752     }
1753     #gold-links-holder {
1754         display: none;
1755     }
1756     #simple-detail-view-links {
1757         display: none;
1758     }
1759     #acct_tabs a, #acct_fines_tabs a {
1760        padding: 2px 4px 3px 4px;
1761        -moz-border-radius: 6px 6px 0px 0px;
1762        border-radius: 6px 6px 0px 0px;
1763        font-size: [% css_fonts.size_base %];
1764        margin: 0px 5px 0px 0px;
1765     }
1766
1767     #dash_wrapper div {
1768         background: transparent;
1769         padding: 0px;
1770     }
1771     #dash_wrapper {
1772         position: static;
1773         top: auto;
1774     }
1775     #dash_wrapper .opac-button {
1776         top: 0px;
1777     }
1778     .small_view_only {
1779         display: inline !important;
1780     }
1781     #dash_identity a {
1782         float:left;
1783     }
1784     #dashboard {
1785         display: none;
1786     }
1787     #holds_box form blockquote {
1788         margin-left: 10px;
1789         margin-right: 2px;
1790     }
1791     #holds_box form blockquote select {
1792         width: 100%;
1793     }
1794     #myopac_sum_fines_placehold {
1795         display:none;
1796     }
1797     #myopac_sum_fines {
1798         display: none;
1799     }
1800     .results_header_lbl {
1801         display: none;
1802     }
1803     .results_header_nav1 span.h1 {
1804         display: none;
1805     }
1806     .preflib {
1807         display: none;
1808     }
1809     .start_end_links_span {
1810         display: block;
1811     }
1812     .invisible {
1813         display: none;
1814     }
1815     .result_table_pic_header {
1816         padding-left: 0px !important;
1817         padding-right: 5px;
1818         width: 0px !important;
1819         margin: 0px;
1820     }
1821     .result_table_pic {
1822         width: 55px;
1823         padding: 0px;
1824         margin: 0px;
1825     }
1826     tr[name=results_isbn_tr], tr[name=results_phys_desc_tr], tr[name=results_pub_tr] strong, .result_count {
1827          display: none;
1828     }
1829     tr.result_table_title_cell[name=bib_cn_list] .result_holdings_table th:nth-child(4),
1830     tr.result_table_title_cell[name=bib_cn_list] .result_holdings_table td:nth-child(4) {
1831         display:none;
1832     }
1833     .results_info_table td {
1834         padding: 0px;
1835     }
1836     #results_header_bar {
1837         background-color: inherit;
1838     }
1839     .results_header_btns a {
1840         margin: 0.3em;
1841     }
1842     #main-content {
1843         margin: 0 1px;
1844     }
1845     #rdetails_status thead {
1846         display: none;
1847     }
1848     #rdetails_status tr {
1849         display: block;
1850         margin-top: 3px;
1851     }
1852     #rdetails_status td {
1853         display: block;
1854         padding: 1px;
1855     }
1856     .copy_details_row {
1857         background-color: [% css_colors.accent_lightest %];
1858     }
1859     .copy_details_offers_row {
1860         background-color: [% css_colors.accent_lightest %];
1861     }
1862     select#pickup_lib.search-wrapper-locg {
1863         width: 100%;
1864     }
1865     #search-wrapper #search-box {
1866         width: 85%;
1867         padding-top: 5px;
1868     }
1869     #main-content-home {
1870         padding: 0px;
1871         margin: 0px;
1872     }
1873     /* Make use of full width in mobile mode */
1874     .facet_box_wrapper .box_wrapper .box,
1875     .facet_template .facet,
1876     .facet_box_temp {
1877         width: inherit;
1878     }
1879     .facet_template .count {
1880         padding-left: 1em;
1881     }
1882     #facet_sidebar {
1883         margin-top: 0.5em;
1884     }
1885     #adv_search_parent {
1886         font-size: [% css_fonts.size_smaller %];
1887     }
1888     #adv_search_filters {
1889         position: relative;
1890         width: 300px;
1891     }
1892     #format_actions {
1893         float: left;
1894     }
1895     .rdetail_aux_utils {
1896         padding: 0px;
1897         border: none;
1898     }
1899     .result_metadata {
1900         width: inherit;
1901     }
1902     div#rdetail_actions_div {
1903         float: none;
1904     }
1905     h2.rdetail_uris {
1906         clear: both;
1907     }
1908     .search_catalog_lbl {
1909         margin-left: 0;
1910         white-space: nowrap;
1911     }
1912     .adv_search_catalog_lbl {
1913         margin-top: 0;
1914         white-space: nowrap;
1915     }
1916     .browse_the_catalog_lbl {
1917         white-space: nowrap;
1918     }
1919     .mobile_hide {
1920         display: none;
1921     }
1922     #dash_user {
1923         display: block;
1924         padding: 0.5em;
1925     }
1926     .dash_divider {
1927         display: none;
1928     }
1929     .dash_account_buttons {
1930         display: block;
1931     }
1932     .searchbar { line-height: 1.5em; }
1933     #browse-controls { line-height: 1.5em; }
1934     #search_query_label, #search_qtype_label, #search_itype_label, #search_locg_label {
1935         display: block;
1936     }
1937     .bookshelf td {
1938         display: block;
1939         width: 100%;
1940     }
1941     .bookshelf table thead tr {
1942         display: block;
1943     }
1944     #lowhits_help { width: inherit; }
1945     #adv_search_tabs a{
1946         font-size: [% css_fonts.size_small %];
1947         margin: 2px 2px 0px 2px;
1948         padding: 2px 2px 5px 2px;
1949         -moz-border-radius: 10px 0px 0px 0px;
1950         border-radius: 7px 7px 0px 0px;
1951     }
1952     #adv_global_tbody td {
1953         border-bottom: thin solid [% css_colors.accent_light %];
1954     }
1955     #adv_global_addrow td {
1956         border-bottom: none;
1957     }
1958         /* Force table to not be like tables anymore */
1959         table#acct_checked_main_header thead tr th {
1960                 display: block;
1961         }
1962         table#acct_checked_main_header tbody tr td {
1963                 display: block;
1964         }
1965
1966         /* Hide table headers (but not display: none;, for accessibility) */
1967         thead tr {
1968                 position: absolute;
1969                 top: -9999px;
1970                 left: -9999px;
1971         }
1972
1973         table#acct_checked_main_header tr { border: 1px solid #ddd; }
1974
1975         table#acct_checked_main_header td {
1976                 /* Behave  like a "row" */
1977                 border: none;
1978                 border-bottom: 1px solid #eee;
1979                 position: relative;
1980                 padding-left: 40%;
1981         }
1982
1983         table#acct_checked_main_header td:before {
1984                 /* Now like a table header */
1985                 position: absolute;
1986                 /* Top/left values mimic padding */
1987                 left: 2px;
1988                 width: 40%;
1989                 padding-right: 10px;
1990                 white-space: nowrap;
1991         }
1992
1993         table#acct_checked_main_header td:nth-of-type(1) { border-top: 5px solid #aaa; padding-top: 15px; background-color: #fff;}
1994         table#acct_checked_main_header td:nth-of-type(2):before { content: "[% l('Title / Author') %]";}
1995         table#acct_checked_main_header td:nth-of-type(3):before { content: "[% l('Renewals Left') %]"; }
1996         table#acct_checked_main_header td:nth-of-type(4):before { content: "[% l('Due Date') %]"; }
1997         table#acct_checked_main_header td:nth-of-type(5):before { content: "[% l('Barcode') %]"; }
1998         table#acct_checked_main_header td:nth-of-type(6):before { content: "[% l('Call number') %]"; }
1999
2000         table#acct_holds_main_header thead tr th {
2001                 display: block;
2002         }
2003         table#acct_holds_main_header tbody tr td {
2004                 display: block;
2005         }
2006
2007         table#acct_holds_main_header td {
2008                 /* Behave  like a "row" */
2009                 border: none;
2010                 border-bottom: 1px solid #eee;
2011                 position: relative;
2012                 padding-left: 40%;
2013         }
2014
2015
2016         table#acct_holds_main_header td:before {
2017                 /* Now like a table header */
2018                 position: absolute;
2019                 /* Top/left values mimic padding */
2020                 left: 2px;
2021                 width: 40%;
2022                 padding-right: 10px;
2023                 white-space: nowrap;
2024         }
2025
2026         table#acct_holds_main_header td:nth-of-type(1) { border-top: 5px solid #aaa; padding-top: 15px; background-color: #fff;}
2027         table#acct_holds_main_header td:nth-of-type(2):before { content: "[% l('Title') %]";}
2028         table#acct_holds_main_header td:nth-of-type(3):before { content: "[% l('Author') %]"; }
2029         table#acct_holds_main_header td:nth-of-type(4):before { content: "[% l('Format') %]"; }
2030         table#acct_holds_main_header td:nth-of-type(5):before { content: "[% l('Pickup Location') %]"; }
2031         table#acct_holds_main_header td:nth-of-type(6):before { content: "[% l('Activate') %]"; }
2032         table#acct_holds_main_header td:nth-of-type(7):before { content: "[% l('Cancel on') %]"; }
2033         table#acct_holds_main_header td:nth-of-type(8):before { content: "[% l('Active') %]"; }
2034         table#acct_holds_main_header td:nth-of-type(9):before { content: "[% l('Status') %]"; }
2035         table#acct_holds_main_header td.hold_notes:before { content: "[% l('Notes') %]"; }
2036
2037        /*Want to see these in mobile ONLY */
2038        .mobile_view{
2039           display:block;
2040        }
2041
2042        .mobile_search_lbl_clr{
2043           color:[% css_colors.mobile_header_text %];
2044        }
2045 }
2046
2047
2048 /*
2049 For text which is visible only to screen readers.
2050 Borrowed from http://getbootstrap.com/css/#helper-classes-screen-readers
2051 See also http://webaim.org/techniques/css/invisiblecontent/
2052 */
2053 .sr-only {
2054     position: absolute;
2055     width: 1px;
2056     height: 1px;
2057     padding: 0;
2058     margin: -1px;
2059     overflow: hidden;
2060     clip: rect(0, 0, 0, 0);
2061     border: 0;
2062 }