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 #myopac_loading {
 986     width:100%;
 987     text-align:center;
 988     padding-top:20px;
 989     font-size: [% css_fonts.size_bigger %];
 990     font-weight:bold;
 991 }
 992
 993 .chili_link {
 994     width:100px !important;
 995     text-align: center !important;
 996 }
 997
 998 .chili_review div.chili_link div {
 999     margin: auto;
1000 }
1001
1002 [%- IF we_want_to_turn_on_facet_styling.defined; %]
1003 /* some facet styling */
1004 .facetClassContainer { margin: 2px; border: 1px solid [% css_colors.accent_light %]; }
1005 .facetClassLabelContainer { border: 1px solid [% css_colors.accent_light %]; }
1006 .facetClassLabel { font-weight: bold; text-align: center; }
1007 .facetFieldContainer {  }
1008 .facetFieldLabel { padding-left: 2px; margin-top: 5px; margin-bottom: 5px; font-weight: bold; text-align: left; }
1009 .extraFacetFieldsWrapper { }
1010 .toggleExtraFacetFieldsButton { float: right; margin: 0px; padding: 0px; }
1011 .facetFieldLineCount {
1012     display: inline-block;
1013     border-right: 1px solid [% css_colors.accent_light %];
1014     color: [% css_colors.accent_mediumdark %];
1015     width: 3em;
1016     margin-right: 3px
1017 }
1018 .facetField { border-top: 1px solid [% css_colors.accent_light %]; }
1019 .facetFields { padding-left: 5px; }
1020 .facetFieldLineValue { overflow: hidden; text-overflow: ellipsis; }
1021 [%- END -%]
1022
1023 div#facet_sidebar {
1024     float: left;
1025     margin-right: 1em;
1026 }
1027
1028 .facet_box_temp {
1029     padding-bottom:3px;
1030 }
1031
1032 .facet_box_temp .header {
1033     height: 2.3em;
1034     background:[% css_colors.primary %];
1035     -moz-border-top-left-radius: 5px;
1036     border-top-left-radius: 5px;
1037     -moz-border-top-right-radius: 5px;
1038     border-top-right-radius: 5px;
1039     font-weight:bold;
1040     color:[% css_colors.text_invert %];
1041     padding-top:4px;
1042 }
1043
1044 .facet_box_temp .header .title {
1045     float:left;
1046     padding-top:6px;
1047     padding-left:12px;
1048 }
1049
1050 .facet_box_temp .header a.button {
1051     float:right;
1052     padding-top:6px;
1053     padding-right:6px;
1054     color:[% css_colors.text_invert %];
1055 }
1056
1057 .facet_box_wrapper .box_wrapper .box {
1058     border-top:1px solid [% css_colors.border_standard %];
1059     border-left:1px solid [% css_colors.border_standard %];
1060     border-right:1px solid [% css_colors.border_standard %];
1061     padding: 0 0.5em;
1062     width: 14em;
1063     overflow: hidden;
1064 }
1065
1066 .facet_template {
1067     box-sizing: border-box;
1068     -moz-box-sizing: border-box;
1069     display: table;
1070     margin: 0.5em 0;
1071     width: 100%;
1072 }
1073
1074 .facet_template div {
1075     display: table-cell;
1076     padding: 2px;
1077 }
1078
1079 .facet_template .count {
1080     text-align: right;
1081     color: [% css_colors.accent_mediumdark %];
1082 }
1083
1084 .facet_template_selected {
1085     background-color: [% css_colors.accent_lighter2 %];
1086     border: 1px solid [% css_colors.accent_medium %];
1087 }
1088
1089 #footer-wrap {
1090     background: linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1091     background: -moz-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1092     background: -o-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1093     background: -webkit-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1094     background-color: [% css_colors.primary %];
1095 }
1096
1097 #footer {
1098     padding-top:5px;
1099     padding-bottom: 10px;
1100     margin-left: 1em;
1101     font-size: [% css_fonts.size_small %];
1102 }
1103
1104 #footer a {
1105     color: [% css_colors.text_invert %];
1106     text-decoration: none;
1107     text-shadow: 0 0 0.2em [% css_colors.primary %], 0 0 0.2em [% css_colors.primary %];
1108 }
1109
1110 #copyright_text, #footer_logo {
1111     color: [% css_colors.text_invert %];
1112 }
1113
1114 .color_4 {
1115     font-weight: bold;
1116 }
1117
1118 .advanced_div { padding-top: 15px; }
1119 #adv_global_search { width: 100%; }
1120 #adv_global_search select { width: 13em; }
1121 #adv_global_addrow td { padding-top: 7px; }
1122 #adv_global_input_table { width: 100%; }
1123 #adv_global_input_table select { width: 7em; }
1124 .adv_adv_link {
1125     font-size: [% css_fonts.size_smaller %];
1126     color: [% css_colors.text_alert %];
1127 }
1128 #acct_prefs_header { float: left; }
1129 .search_page_nav_link {
1130     cursor: pointer;
1131     padding-left: 1em;
1132 }
1133 #opac.result.sort { width: 160px; }
1134 .renew-summary { font-size: [% css_fonts.size_bigger %]; font-style: italic; margin: 0.5ex 0; }
1135 .failure-text { margin-left: 4em; font-style: italic; color: [% css_colors.text_alert %]; }
1136 .refine-controls { font-size: [% css_fonts.size_bigger %]; padding: 0.5ex 0; }
1137 #adv_search_refine input[type=text] { border: 1px inset [% css_colors.accent_light %] !important; }
1138 #adv_search_refine select { border: 1px inset [% css_colors.accent_light %] !important; }
1139 #adv_search_refine {
1140     padding-left: 5em; background-color: [% css_colors.accent_lighter2 %]; margin: 2ex 0;
1141 }
1142 .row-remover { position: relative; top: 1px; vertical-align: middle; }
1143 .subtle-button {
1144     background-color: [% css_colors.background %];
1145     color: [% css_colors.primary %]; text-decoration: none;
1146     padding: 0; border: 0; margin: 0;
1147     vertical-align: middle;
1148 }
1149 .subtle-button:hover { text-decoration: underline; cursor: pointer; }
1150 .no-dec:hover { text-decoration: none; }
1151 .pending-addr td { background-color: [% css_colors.background_alert %] !important; border: 0 !important; }
1152
1153 #account-update-email table { text-align: center; padding: 20px; margin-top: 18px; border-collapse: collapse; }
1154 #account-update-email table td { padding: 5px 15px 5px 15px; border-bottom: 1px solid [% css_colors.accent_lighter %]; text-align: left;}
1155 #account-update-email-error { font-size: [% css_fonts.size_biggest %]; padding: 10px; border:1px solid [% css_colors.border_standard %];}
1156 a.dash-link:hover { text-decoration: underline !important; }
1157 #list_create_table td { vertical-align: middle; padding: 0 8px; }
1158 #list_create_table {
1159     background-color: [% css_colors.accent_light %];
1160     padding-bottom: 4px;
1161     margin-bottom: 10px;
1162     border-bottom: 1px dotted [% css_colors.accent_medium %];
1163 }
1164 .list-create-table-buttons input[type=image] { margin-top: 2px; }
1165 .result_table_format_cell { padding: 0px 10px; text-align: center; }
1166 .results_row_count { font-weight: bold; }
1167 #hold_editor h1 { font-size: [% css_fonts.size_bigger %]; font-weight: bold; }
1168 #hold_editor h2 { font-size: [% css_fonts.size_big %]; font-weight: normal; text-indent: 2em; font-style: italic; }
1169 #hold_editor h1, #hold_editor h2 { margin: 2px 0; }
1170 #hold_editor_table { background-color: [% css_colors.accent_lighter %]; padding: 0.5em; }
1171 #hold_editor_table th { text-align: right; padding-right: 1em; }
1172 #hold_editor_table td { padding: 0.25em 0; }
1173 .fmt-note { vertical-align: middle; padding-left: 1em !important; }
1174 .hold-editor-controls { text-align: center; padding-top: 1em !important; }
1175 .hold-editor-controls a { padding-left: 2em; }
1176
1177 .text-right { text-align: right; }
1178 .text-right-top { text-align: right; vertical-align: top; }
1179 .rdetail-author-div {
1180     padding-bottom: 10px;
1181     display: inline-block;
1182 }
1183
1184 .invisible { visibility: hidden; }
1185 .rdetail-extras-summary { margin: 10px; }
1186 .staff-hold { background-color: [% css_colors.accent_lightest %]; }
1187 .expert-search tbody tr th { text-align: right; padding-left: 2em; }
1188 .expert-search-row { padding-top: 10px; }
1189 #adv_expert_row label { font-weight: bold; }
1190
1191 .bookshelf thead tr td {
1192     border-bottom: 1px dashed [% css_colors.accent_dark %];
1193     padding-bottom: 1ex;
1194 }
1195 .cn_browse_item { padding: 2ex; }
1196 .results-paginator-list { padding-left: 1em; }
1197 .results-paginator-selected { color: [% css_colors.text_alert %]; }
1198 .inactive-hold { background: [% css_colors.accent_lightest %]; }
1199
1200 #hold-items-list td { padding: 5px; margin-bottom: 20px; }
1201 .hold-items-list-title { font-size: [% css_fonts.size_bigger %]; }
1202 .hold-items-list-problem { color: [% css_colors.text_alert %]; }
1203
1204 .big-strong {font-weight: bold; font-size: [% css_fonts.size_bigger %]; }
1205
1206 .results_header_btns, .results_header_sel {
1207     float:left;
1208 }
1209
1210 /*
1211  * .various_containers a = shortcut to putting .opac-button on every 'a' with
1212  *     the tradeoff of increased stylesheet complexity (TODO: rethink?)
1213  */
1214
1215 .opac-multiline-button > a,
1216 .opac-button, .results_header_btns a, #simple-detail-view-links a, .dash_account_buttons a {
1217     color: [% css_colors.button_text %];
1218     font-weight: bold;
1219     text-decoration: none;
1220     cursor: pointer !important;
1221     -moz-border-radius: 5px;
1222     border-radius: 5px;
1223     border: 1px solid [% css_colors.primary %];
1224     background:  [% css_colors.primary_fade %];
1225     margin: 0.5em;
1226     padding: 0.3em;
1227     display: inline-block;
1228 }
1229
1230 .opac-multiline-button > a:hover,
1231 .opac-button:hover, .results_header_btns a:hover, #simple-detail-view-links a:hover, #dash_wrapper a.opac-button:hover {
1232     background: [% css_colors.primary %];
1233 }
1234
1235 .opac-button:disabled {
1236     color: [% css_colors.accent_medium %];
1237     cursor: pointer !important;
1238     border: 1px solid [% css_colors.accent_light %];
1239     background-color: [% css_colors.accent_lighter %];
1240 }
1241
1242 /* Firefox adds its own special space to inputs; this gets us closer */
1243 button.opac-button::-moz-focus-inner, input.opac-button::-moz-focus-inner {
1244     padding: 0;
1245     border: 0;
1246 }
1247
1248 .opac-button-header, #dash_wrapper .opac-button {
1249     background: [% css_colors.control %];
1250     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
1251     font-size: [% css_fonts.size_base %];
1252 }
1253 a.opac-button-header:hover, #dash_wrapper a.opac-button:hover {
1254     border-color: [% css_colors.control %];
1255 }
1256
1257 .opac-multiline-button > a {
1258     display: inline-block;
1259 }
1260
1261 #myopac_checked_div {
1262     padding: 0px;
1263 }
1264
1265 .rdetail-mfhd-head {
1266     margin-top: 5px;
1267     padding-top: 5px;
1268     background-color: [% css_colors.table_heading %];
1269 }
1270
1271 .rdetail-mfhd-type {
1272     padding-left: 1em;
1273 }
1274
1275 .rdetail-mfhd-bottom {
1276     border-bottom: thin solid [% css_colors.border_dark %];
1277     width: 100%;
1278 }
1279
1280 #rdetail_record_details {
1281     clear: both;
1282     margin-top: 1em;
1283 }
1284
1285 .rdetail_content {
1286     margin-left: 1.5em;
1287     padding-left: 1.5em;
1288 }
1289
1290 .rdetail_content_type, .rdetail_subject_type {
1291     vertical-align: top;
1292     font-weight: bold;
1293 }
1294
1295 .bookbag-item-row td { vertical-align: top; }
1296
1297 .error { color: [% css_colors.text_alert %]; font-weight: bold; }
1298 .success {
1299     color: [% css_colors.text_greatnews %];
1300     font-weight: bold;
1301 }
1302
1303 .rdetail_related_subjects {
1304     margin-top: 1.5em;
1305 }
1306
1307 .rdetail_related_series {
1308     margin-top: 1.5em;
1309 }
1310
1311 #rdetail_openurl {
1312     margin-top: 1em;
1313 }
1314
1315 .rdetail_openurl_entry {
1316     margin-left: 1em;
1317     padding-left: 1em;
1318 }
1319 .bookbag-controls-holder { width: 100%; }
1320 .bookbag-controls-holder:nth-child(odd) { background-color: [% css_colors.accent_lighter2 %]; }
1321 .bookbag-controls-holder:nth-child(even) { background-color: [% css_colors.accent_lightest %]; }
1322 .bookbag-controls-holder .most {
1323     padding-left: 0;
1324     margin-right: 5em;
1325 }
1326 h2.bookbag-name { margin-bottom: 0em; padding-bottom: 0em; }
1327 .bookbag-share .fixed { min-width: 4em; }
1328 .bookbag-specific { margin-left: 1em; }
1329 .bookbag-specific div.sort { float: left; width: 45%; text-align: left; }
1330 .bookbag-specific div.meta { float: right; width: 54%; text-align: right; }
1331 #bbag-name-desc-form tr th { vertical-align: middle; }
1332 #bbag-name-desc-form .saver { vertical-align: middle; text-align: center; }
1333 .bookbag-description {
1334     padding-top: 0em;
1335     font-style: italic;
1336     max-width: 40em;
1337 }
1338 #bbag-edit-description { width: 20em; }
1339 #bbag-edit-name { width: 20em; }
1340 textarea { font-family: sans-serif; }
1341 table.bookbag-specific {
1342     border-right: 1px solid [% css_colors.accent_dark %];
1343     border-bottom: 1px solid [% css_colors.accent_medium %];
1344     margin-bottom: 2ex;
1345 }
1346 .bookbag-share {
1347     float: left;
1348     padding: 5px 0;
1349 }
1350 .bookbag-controls {
1351     float: left;
1352     padding: 5px 0px 0px 10px;
1353 }
1354
1355 .bookbag-specific td.list_checkbox {
1356     padding-left: 10px !important;
1357 }
1358 .bookbag-specific td.list_entry {
1359     min-width: 10em;
1360     padding-left: 5px !important;
1361 }
1362 .bookbag-specific td.list_actions {
1363     white-space: nowrap !important;
1364 }
1365 .bookbag-paginator-selected { color: [% css_colors.text_alert %]; }
1366
1367 .list_is_empty {
1368     padding: 8px 0px 6px 0px;
1369     width: 100%;
1370     border: 0;
1371     font-size: [% css_fonts.size_bigger %];
1372     text-align: center;
1373     font-style: italic;
1374 }
1375 .save-notes { padding-bottom: 1.5ex; }
1376
1377 .nonbreaking-wrapper {
1378     display: inline-block;
1379 }
1380
1381 /* Moved from semiauto.css */
1382 .adv_global_input_container {
1383     border-bottom: none;
1384     clear: both;
1385 }
1386 .opac-auto-013 {
1387     border-bottom: none;
1388     *height: 0px;
1389 }
1390 .adv_global_filter_sort {
1391     border: none;
1392     width: 100%;
1393 }
1394 .clear-both { clear: both; }
1395 .common-no-pad {
1396     clear: both;
1397     height: 0px;
1398     margin: 0px;
1399     padding: 0px;
1400 }
1401 .common-full-pad {
1402     clear: both;
1403     height: 15px;
1404 }
1405 .alert { color: [% css_colors.text_alert %]; }
1406 .float-left { float: left; }
1407 .float-right { float: right; }
1408
1409 .saved-searches-header { width: 100%; font-weight: bold; font-size: [% css_fonts.size_bigger %]; }
1410 .saved-searches-header .button { float: right; width: 28px; }
1411 .saved-searches-header .text { float: left; padding-right: 1em; margin: 0.5ex 0;}
1412 .saved-searches-header {font-weight: bold; font-size: [% css_fonts.size_bigger %]; }
1413 .saved-searches { border-bottom: 1px solid [% css_colors.accent_medium %]; padding-right: 1em; }
1414 #staff-saved-search { /* wraps .saved-searches-header and .saved-searches on the record page */
1415     border-right: 1px solid [% css_colors.accent_darker %];
1416 }
1417 .result_item_circulated {
1418     padding-top: 4px;
1419 }
1420
1421 .result_item_circulated span {
1422     position: relative;
1423     top:-3px;
1424     left:3px;
1425 }
1426
1427 #search-only-bookbag-container { margin: 2ex 0; font-weight: bold; }
1428 #result-bookbag-heading { text-align: center; margin: 2ex; }
1429
1430 .result-bookbag-name { font-size: [% css_fonts.size_bigger %]; font-weight: bold; }
1431 .result-bookbag-description { font-size: [% css_fonts.size_bigger %]; font-style: italic; }
1432 .result-bookbag-item-note { font-style: italic; }
1433 .lowhits-bookbag-name { font-weight: bold; }
1434 .oils_AS { font-weight: bold; color: [% css_colors.text_match %]; }
1435 .oils_AS_match_term { text-align: left; color: [% css_colors.text %]; }
1436 .oils_AS_match_field {
1437     font-size: [% css_fonts.size_smallest %]; padding: 0.65em 0;
1438     text-align: right; color: [% css_colors.accent_medium %];
1439 }
1440 table.result_holdings_table {
1441     margin-top: 1em;
1442     margin-bottom: 1em;
1443 }
1444 table.result_holdings_table thead tr {
1445     background: [% css_colors.table_heading %];
1446 }
1447 table.result_holdings_table thead tr th {
1448     font-weight: bold;
1449 }
1450 span.preflib {
1451     margin: 0 2em 0 2em;
1452 }
1453 a.preflib_change {
1454   vertical-align: super;
1455   font-size: [% css_fonts.size_smaller %];
1456   line-height: normal;
1457   text-decoration: none;
1458 }
1459 .rdetail-holding-group { margin-left: 1.5em; }
1460 .rdetail-holding-group span { margin-left: 1.5em; }
1461 .rdetail-holding-group .paging { margin-left: 1.5em; }
1462 #rdetail_deleted_exp {
1463     font-weight: bold;
1464     padding: 1em;
1465     margin: 1em;
1466     border: thick solid [% css_colors.border_alert %];
1467 }
1468
1469 #ac_tab_wrapper { width : 100%; }
1470 .ac_tab { float: left; padding-right: 10px; font-size: [% css_fonts.size_big %]; padding: 5px; border: 1px solid [% css_colors.primary_offset %]; }
1471 .ac_tab_selected { background-color: [% css_colors.primary_offset %]; }
1472 .ac_tab_selected a { color: [% css_colors.text_invert %]; }
1473 #ac_content { clear: both; width: 100%; margin-top: 10px; }
1474
1475 /* Popmenu styles used for making css menus. */
1476 .popmenu {
1477     margin: 0;
1478     padding: 0;
1479 }
1480 .popmenu li {
1481     list-style: none;
1482 }
1483 .popmenu li a {
1484     display: block;
1485     padding: 3px 5px;
1486 }
1487 .popmenu li ul {
1488     display: none;
1489     width: 10em; /* Width to help Opera out */
1490     background-color: [% css_colors.primary %];
1491 }
1492 .popmenu li:hover ul {
1493     display: block;
1494     position: absolute;
1495     margin: 0;
1496     padding: 0;
1497     border-color: [% css_colors.border_dark %];
1498     border-width: 1px;
1499     border-style: solid;
1500 }
1501 .popmenu li:hover li {
1502     float: none;
1503 }
1504 .popmenu li:hover li a {
1505     background-color: [% css_colors.primary %];
1506     color: [% css_colors.accent_ultralight %];
1507 }
1508 .popmenu li li a:hover {
1509     background-color: [% css_colors.accent_ultralight %];
1510     color: [% css_colors.primary %];
1511 }
1512 /* Styles for the temporary list entry. */
1513 .popmenu li:hover li[class~="temporary"] a {
1514     background-color: [% css_colors.primary %];
1515     color: [% css_colors.accent_ultralight %];
1516 }
1517 .popmenu li li[class~="temporary"] a:hover {
1518     background-color: [% css_colors.accent_ultralight %];
1519     color: [% css_colors.primary %];
1520 }
1521 /* Styles for the default list entry. */
1522 .popmenu li:hover li[class~="default"] a {
1523     background-color: [% css_colors.primary %];
1524     color: [% css_colors.accent_ultralight %];
1525 }
1526 .popmenu li li[class~="default"] a:hover {
1527     background-color: [% css_colors.accent_ultralight %];
1528     color: [% css_colors.primary %];
1529 }
1530 /* Styles for the new list entry. */
1531 .popmenu li:hover li[class~="new"] a {
1532     background-color: [% css_colors.primary %];
1533     color: [% css_colors.accent_ultralight %];
1534 }
1535 .popmenu li li[class~="new"] a:hover {
1536     background-color: [% css_colors.accent_ultralight %];
1537     color: [% css_colors.primary %];
1538 }
1539 /* Style to add a divider on the menu. */
1540 .popmenu li li[class~="divider"] {
1541     border-bottom-width: 1px;
1542     border-bottom-color: [% css_colors.border_dark %];
1543     border-bottom-style: solid;
1544 }
1545
1546 #locale_picker_form {
1547     float: right;
1548     padding: 0.5em;
1549     margin-top: 2em;
1550     border-right: thin [% css_colors.control %] solid;
1551 }
1552
1553 #locale_picker_form * {
1554     margin: 0;
1555     padding: 0;
1556     vertical-align: middle;
1557 }
1558
1559 #patron_usr_barcode_not_found {
1560     font-weight: bold; color: [% css_colors.text_alert %];
1561 }
1562
1563 .record_title {
1564     font-weight: bold;
1565 }
1566
1567 .record_author {
1568     font-style: italic;
1569 }
1570
1571 .password_message {
1572     padding-top: 1em;
1573     padding-bottom: 0.5em;
1574         font-style: italic;
1575 }
1576
1577 #maintenance_message {
1578     padding: 5px;
1579     width: 100%;
1580     background-color: [% css_colors.text_alert %];
1581     color: [% css_colors.text_invert %];
1582     text-align: center;
1583 }
1584
1585 #search-box > span {
1586     margin: 0 1em;
1587 }
1588 .browse-error {
1589     font-weight: bold;
1590     font-color: #c00;
1591 }
1592 .browse-result-sources, .browse-result-authority-bib-links {
1593     margin-left: 1em;
1594 }
1595 .browse-result-best-match {
1596     font-weight: bold;
1597 }
1598 .browse-pager {
1599     margin: 2ex 0;
1600 }
1601 .browse-result-list {
1602     padding-bottom: 0.5ex;
1603 }
1604 .browse-shortcuts {
1605     font-size: [% css_fonts.size_bigger %];
1606 }
1607 .browse-result-authority-field-name {
1608     font-style: italic;
1609     margin-right: 1em;
1610 }
1611 .browse-leading-article-warning {
1612     font-style: italic;
1613     font-size: [% css_fonts.size_big %];
1614 }
1615 .browse-public-general-note {
1616     font-size: [% css_fonts.size_big %];
1617 }
1618 .browse-public-general-note-label { }
1619 .browse-public-general-note-institution {
1620     font-style: normal;
1621     font-weight: bold;
1622 }
1623 .browse-public-general-note-body {
1624     font-style: italic;
1625 }
1626
1627 .bib_peer_type {
1628     font-weight: bold;
1629 }
1630
1631 #main-content-register {
1632     margin-left: 40px;
1633     font-size: [% css_fonts.size_bigger %];
1634 }
1635
1636 #main-content-register table {
1637     padding: 20px;
1638     margin-top: 18px;
1639     border-collapse: collapse;
1640 }
1641
1642 #main-content-register td {
1643     text-align: left;
1644 }
1645
1646 #main-content-register td:not(:first-child) {
1647     padding-left: 20px;
1648 }
1649
1650 .patron-reg-invalid {
1651     font-weight: bold;
1652     color: red;
1653     padding-right: 10px;
1654 }
1655
1656 .result_footer_nav1 {
1657     clear: both;
1658 }
1659
1660 .small_view_only, #refine_hits, #return_to_hits {
1661     display: none;
1662 }
1663
1664 .rdetail_authors_div {
1665     margin-bottom: 1em;
1666 }
1667
1668 #search_query_label, #search_qtype_label, #search_itype_label, #search_locg_label {
1669     white-space: nowrap;
1670     display: inline-block;
1671 }
1672
1673 .result_table_title_cell {
1674     padding-top: 4px;
1675     padding-bottom: 4px;
1676 }
1677
1678 .record_title {
1679     font-size: [% css_fonts.size_bigger %];
1680 }
1681
1682 @media only screen and (max-width: 800px) {
1683     .facet_sidebar_hidden, .result_block_hidden {
1684         display: none;
1685     }
1686     .facet_sidebar_visible, .result_block_visible {
1687         display: inline ! important;
1688     }
1689     #acct_select, #acct_prefs_select {
1690         display: inline-block;
1691     }
1692 #acct_tabs, #acct_prefs_tabs {
1693          display:none;
1694      }
1695 }
1696
1697 @media only screen and (max-width: 600px) {
1698     input, select {
1699         font-size: [% css_fonts.size_big %];
1700     }
1701     span .nav_arrow_fix {
1702         display: none;
1703     }
1704     #header {
1705         padding: 0px;
1706         margin: 0px;
1707     }
1708     #homesearch_main_logo img {
1709         width:75%;
1710     }
1711     #format_selector {
1712         display:none;
1713     }
1714     #your-acct-login {
1715         padding: 0px;
1716         padding-top: 5px;
1717     }
1718     #your-acct-login a {
1719         margin: 0px;
1720         padding: 5px;
1721     }
1722     #topnav_logo {
1723         margin: 0;
1724     }
1725     #topnav_logo img {
1726         width: 200px;
1727     }
1728     #locale_picker_form {
1729         display: none;
1730     }
1731     #gold-links-holder {
1732         display: none;
1733     }
1734     #simple-detail-view-links {
1735         display: none;
1736     }
1737     #acct_tabs a, #acct_fines_tabs a {
1738        padding: 2px 4px 3px 4px;
1739        -moz-border-radius: 6px 6px 0px 0px;
1740        border-radius: 6px 6px 0px 0px;
1741        font-size: [% css_fonts.size_base %];
1742        margin: 0px 5px 0px 0px;
1743     }
1744
1745     #dash_wrapper div {
1746         background: transparent;
1747         padding: 0px;
1748     }
1749     #dash_wrapper {
1750         position: static;
1751         top: auto;
1752     }
1753     #dash_wrapper .opac-button {
1754         top: 0px;
1755     }
1756     .small_view_only {
1757         display: inline !important;
1758     }
1759     #dash_identity a {
1760         float:left;
1761     }
1762     #dashboard {
1763         display: none;
1764     }
1765     #holds_box form blockquote {
1766         margin-left: 10px;
1767         margin-right: 2px;
1768     }
1769     #holds_box form blockquote select {
1770         width: 100%;
1771     }
1772     #myopac_sum_fines_placehold {
1773         display:none;
1774     }
1775     #myopac_sum_fines {
1776         display: none;
1777     }
1778     .results_header_lbl {
1779         display: none;
1780     }
1781     .results_header_nav1 span.h1 {
1782         display: none;
1783     }
1784     .preflib {
1785         display: none;
1786     }
1787     .start_end_links_span {
1788         display: block;
1789     }
1790     .invisible {
1791         display: none;
1792     }
1793     .result_table_pic_header {
1794         padding-left: 0px !important;
1795         padding-right: 5px;
1796         width: 0px !important;
1797         margin: 0px;
1798     }
1799     .result_table_pic {
1800         width: 55px;
1801         padding: 0px;
1802         margin: 0px;
1803     }
1804     tr[name=results_isbn_tr], tr[name=results_phys_desc_tr], tr[name=results_pub_tr] strong, .result_count {
1805          display: none;
1806     }
1807     tr.result_table_title_cell[name=bib_cn_list] .result_holdings_table th:nth-child(4),
1808     tr.result_table_title_cell[name=bib_cn_list] .result_holdings_table td:nth-child(4) {
1809         display:none;
1810     }
1811     .results_info_table td {
1812         padding: 0px;
1813     }
1814     #results_header_bar {
1815         background-color: inherit;
1816     }
1817     .results_header_btns a {
1818         margin: 0.3em;
1819     }
1820     #main-content {
1821         margin: 0 1px;
1822     }
1823     #rdetails_status thead {
1824         display: none;
1825     }
1826     #rdetails_status tr {
1827         display: block;
1828         margin-top: 3px;
1829     }
1830     #rdetails_status td {
1831         display: block;
1832         padding: 1px;
1833     }
1834     .copy_details_row {
1835         background-color: [% css_colors.accent_lightest %];
1836     }
1837     .copy_details_offers_row {
1838         background-color: [% css_colors.accent_lightest %];
1839     }
1840     select#pickup_lib.search-wrapper-locg {
1841         width: 100%;
1842     }
1843     #search-wrapper #search-box {
1844         width: 85%;
1845         padding-top: 5px;
1846     }
1847     #main-content-home {
1848         padding: 0px;
1849         margin: 0px;
1850     }
1851     /* Make use of full width in mobile mode */
1852     .facet_box_wrapper .box_wrapper .box,
1853     .facet_template .facet,
1854     .facet_box_temp {
1855         width: inherit;
1856     }
1857     .facet_template .count {
1858         padding-left: 1em;
1859     }
1860     #facet_sidebar {
1861         margin-top: 0.5em;
1862     }
1863     #adv_search_parent {
1864         font-size: [% css_fonts.size_smaller %];
1865     }
1866     #adv_search_filters {
1867         position: relative;
1868         width: 300px;
1869     }
1870     #format_actions {
1871         float: left;
1872     }
1873     .rdetail_aux_utils {
1874         padding: 0px;
1875         border: none;
1876     }
1877     .result_metadata {
1878         width: inherit;
1879     }
1880     div#rdetail_actions_div {
1881         float: none;
1882     }
1883     h2.rdetail_uris {
1884         clear: both;
1885     }
1886     .search_catalog_lbl {
1887         margin-left: 0;
1888         white-space: nowrap;
1889     }
1890     .adv_search_catalog_lbl {
1891         margin-top: 0;
1892         white-space: nowrap;
1893     }
1894     .browse_the_catalog_lbl {
1895         white-space: nowrap;
1896     }
1897     .mobile_hide {
1898         display: none;
1899     }
1900     #dash_user {
1901         display: block;
1902         padding: 0.5em;
1903     }
1904     .dash_divider {
1905         display: none;
1906     }
1907     .dash_account_buttons {
1908         display: block;
1909     }
1910     .searchbar { line-height: 1.5em; }
1911     #browse-controls { line-height: 1.5em; }
1912     #search_query_label, #search_qtype_label, #search_itype_label, #search_locg_label {
1913         display: block;
1914     }
1915     .bookshelf td {
1916         display: block;
1917         width: 100%;
1918     }
1919     .bookshelf table thead tr {
1920         display: block;
1921     }
1922     #lowhits_help { width: inherit; }
1923     #adv_search_tabs a{
1924         font-size: [% css_fonts.size_small %];
1925         margin: 2px 2px 0px 2px;
1926         padding: 2px 2px 5px 2px;
1927         -moz-border-radius: 10px 0px 0px 0px;
1928         border-radius: 7px 7px 0px 0px;
1929     }
1930     #adv_global_tbody td {
1931         border-bottom: thin solid [% css_colors.accent_light %];
1932     }
1933     #adv_global_addrow td {
1934         border-bottom: none;
1935     }
1936         /* Force table to not be like tables anymore */
1937         table#acct_checked_main_header thead tr th {
1938                 display: block;
1939         }
1940         table#acct_checked_main_header tbody tr td {
1941                 display: block;
1942         }
1943
1944         /* Hide table headers (but not display: none;, for accessibility) */
1945         thead tr {
1946                 position: absolute;
1947                 top: -9999px;
1948                 left: -9999px;
1949         }
1950
1951         table#acct_checked_main_header tr { border: 1px solid #ddd; }
1952
1953         table#acct_checked_main_header td {
1954                 /* Behave  like a "row" */
1955                 border: none;
1956                 border-bottom: 1px solid #eee;
1957                 position: relative;
1958                 padding-left: 40%;
1959         }
1960
1961         table#acct_checked_main_header td:before {
1962                 /* Now like a table header */
1963                 position: absolute;
1964                 /* Top/left values mimic padding */
1965                 left: 2px;
1966                 width: 40%;
1967                 padding-right: 10px;
1968                 white-space: nowrap;
1969         }
1970
1971         table#acct_checked_main_header td:nth-of-type(1) { border-top: 5px solid #aaa; padding-top: 15px; background-color: #fff;}
1972         table#acct_checked_main_header td:nth-of-type(2):before { content: "[% l('Title / Author') %]";}
1973         table#acct_checked_main_header td:nth-of-type(3):before { content: "[% l('Renewals Left') %]"; }
1974         table#acct_checked_main_header td:nth-of-type(4):before { content: "[% l('Due Date') %]"; }
1975         table#acct_checked_main_header td:nth-of-type(5):before { content: "[% l('Barcode') %]"; }
1976         table#acct_checked_main_header td:nth-of-type(6):before { content: "[% l('Call number') %]"; }
1977
1978         table#acct_holds_main_header thead tr th {
1979                 display: block;
1980         }
1981         table#acct_holds_main_header tbody tr td {
1982                 display: block;
1983         }
1984
1985         table#acct_holds_main_header td {
1986                 /* Behave  like a "row" */
1987                 border: none;
1988                 border-bottom: 1px solid #eee;
1989                 position: relative;
1990                 padding-left: 40%;
1991         }
1992
1993
1994         table#acct_holds_main_header td:before {
1995                 /* Now like a table header */
1996                 position: absolute;
1997                 /* Top/left values mimic padding */
1998                 left: 2px;
1999                 width: 40%;
2000                 padding-right: 10px;
2001                 white-space: nowrap;
2002         }
2003
2004         table#acct_holds_main_header td:nth-of-type(1) { border-top: 5px solid #aaa; padding-top: 15px; background-color: #fff;}
2005         table#acct_holds_main_header td:nth-of-type(2):before { content: "[% l('Title') %]";}
2006         table#acct_holds_main_header td:nth-of-type(3):before { content: "[% l('Author') %]"; }
2007         table#acct_holds_main_header td:nth-of-type(4):before { content: "[% l('Format') %]"; }
2008         table#acct_holds_main_header td:nth-of-type(5):before { content: "[% l('Pickup Location') %]"; }
2009         table#acct_holds_main_header td:nth-of-type(6):before { content: "[% l('Activate') %]"; }
2010         table#acct_holds_main_header td:nth-of-type(7):before { content: "[% l('Cancel on') %]"; }
2011         table#acct_holds_main_header td:nth-of-type(8):before { content: "[% l('Active') %]"; }
2012         table#acct_holds_main_header td:nth-of-type(9):before { content: "[% l('Status') %]"; }
2013         table#acct_holds_main_header td.hold_notes:before { content: "[% l('Notes') %]"; }
2014 }
2015
2016
2017 /*
2018 For text which is visible only to screen readers.
2019 Borrowed from http://getbootstrap.com/css/#helper-classes-screen-readers
2020 See also http://webaim.org/techniques/css/invisiblecontent/
2021 */
2022 .sr-only {
2023     position: absolute;
2024     width: 1px;
2025     height: 1px;
2026     padding: 0;
2027     margin: -1px;
2028     overflow: hidden;
2029     clip: rect(0, 0, 0, 0);
2030     border: 0;
2031 }