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