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