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