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