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