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