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