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