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