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