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