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