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