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