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