]> git.evergreen-ils.org Git - Evergreen.git/blob - Open-ILS/src/templates/opac/css/style.css.tt2
LP#1681943 Improve Responsive Design in My Lists
[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     rtl = ctx.get_i18n_l(ctx.eg_locale).rtl;
5 %]
6
7 body {
8     margin:0;
9     font-family: Arial, Helvetica, sans-serif;
10     font-size: [% css_fonts.size_base %];
11     background: [% css_colors.primary %];
12     [% IF rtl == 't' -%]
13     direction: rtl;
14     [%- END %]
15 }
16
17 button, input {
18     font-family: Arial, Helvetica, sans-serif;
19     font-size: [% css_fonts.size_base %];
20 }
21
22 img {
23     border: none;
24 }
25
26 #topnav_logo {
27     margin: 2em 0;
28 }
29
30 #homesearch_main_logo {
31     padding-top: 60px;
32     margin: auto;
33     width: 50%;
34 }
35
36 a {
37     color: [% css_colors.primary %];
38 }
39
40 #search-wrapper input[type=text] {
41     margin:0;
42     padding:0;
43 }
44
45 #search-wrapper select, .results_header_lbl select {
46     border:1px solid [% css_colors.border_standard %];
47     margin:0;
48     padding:0;
49     width: 12em;
50 }
51
52 .searchbar {
53     font-weight: bold;
54     padding-top: 10px;
55     [% IF rtl == 't' -%]
56     margin-right: 1em;
57     [%- ELSE %]
58     margin-left: 1em;
59     [%- END %]
60 }
61
62 .refine_search {
63     padding-bottom: 7px;
64     margin-left: 1em;
65 }
66
67 /*
68 #search-wrapper select {
69     border:0px solid [% css_colors.border_dark %];
70     filter:alpha(opacity=0);
71     -moz-opacity:0;
72     -khtml-opacity:0;
73     opacity:0;
74     padding:0;
75     margin:0;
76     height:18px;
77 }
78 */
79 h1 {
80     margin:0;
81     margin-bottom: 5px;
82     font-size: [% css_fonts.size_biggest %];
83     font-weight:normal;
84 }
85
86 h2 {
87     font-size: [% css_fonts.size_bigger %];
88     font-weight:bold;
89 }
90
91 h2.graphic880 {
92     font-size: [% css_fonts.size_bigger %];
93     font-weight:normal;
94 }
95
96 .hide_me, .hidden {
97     display: none;
98     visibility: hidden;
99 }
100
101 div.select-box-wrapper {
102     position:absolute;
103     padding-top:2px;
104     overflow:hidden;
105     [% IF rtl == 't' -%]
106     padding-right: 3px;
107     text-align:right;
108     [%- ELSE %]
109     padding-left:3px;
110     text-align:left;
111     [%- END %]
112 }
113
114 #dash_wrapper {
115     [% IF rtl == 't' -%]
116     margin-right: 0.5em;
117     [%- ELSE %]
118     margin-left: 0.5em;
119     [%- END %]
120 }
121
122 #dash_wrapper div {
123     background: [% css_colors.primary %];
124     border-radius: 5px;
125     padding: 0em 1em;
126 }
127
128 .dash_divider {
129     margin: 1em;
130     color: [% css_colors.primary_fade %];
131     display:inline-block;
132 }
133
134 #dashboard, #dashboard_e {
135     margin-top: 1em;
136     height: 3em;
137 }
138
139 #dashboard span.dash-align a, #dashboard_e span.dash-align a {
140     font-weight: bold;
141     text-decoration: none;
142 }
143
144 #dash_user {
145     font-weight: bold;
146 }
147
148 #logout_link {
149     [% IF rtl == 't' -%]
150     right: 1px;
151     [%- ELSE %]
152     left: 1px;
153     [%- END %]
154 }
155
156 #dash_checked, #dash_e_checked { color: [% css_colors.text_attention %]; }
157 #dash_holds, #dash_e_holds { color: [% css_colors.text_attention %]; }
158 #dash_pickup, #dash_e_pickup { color: [% css_colors.text_goodnews %]; }
159
160 /*  
161 #dash_fines { color: [% css_colors.text_badnews %]; }
162 the color contrast between "text_badnews" and "primary"
163 is too low for WCAG compliance.  Use "text_attention" 
164 for now until a better color is picked - if needed.
165 */
166 #dash_fines { color: [% css_colors.text_attention %]; }
167
168 #dash_wrapper #dash_user_message_button_container {
169     display: inline;
170     padding: 0;
171 }
172 #dash_wrapper #unread_message_count_floater {
173     position: absolute;
174     background-color: [% css_colors.text_alert %];
175     padding-left: 0.2em;
176     padding-right: 0.2em;
177     display: inline-block;
178     font-size: 95%;
179     border-radius: 0;
180     z-index: 2;
181     margin-top: 0.2em;
182     [% IF rtl == 't' -%]
183     margin-right: -1.5em;
184     [%- ELSE %]
185     margin-left: -1.5em;
186     [%- END %]
187 }
188
189 #header-wrap {
190     background: linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
191     background: -moz-linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
192     background: -o-linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
193     background: -webkit-linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
194     background-color: [% css_colors.primary_fade %];
195 }
196 #header {
197     color: [% css_colors.background %];
198     margin-left: 1em;
199     margin-right: 1em;
200     font-size: [% css_fonts.size_small %];
201 }
202
203 #header a {
204     color: [% css_colors.background %];
205 }
206
207 #header a:hover {
208     color: [% css_colors.text_invert %];
209     text-decoration: none;
210 }
211
212 #header-links {
213     color: [% css_colors.text_invert %];
214     font-size: [% css_fonts.size_small %];
215     font-weight: bold;
216     position: relative;
217     top:4px;
218     
219 }
220
221 #header-links a {
222     color: [% css_colors.text_invert %];
223     display: block;
224     text-decoration: none;
225     [% IF rtl == 't' -%]
226     float: right;
227     margin-left: 22px;
228     [%- ELSE %]
229     float:left;
230     margin-right:22px;
231     [%- END %]
232 }
233
234 #header-links a:hover {
235     color: [% css_colors.text_invert %];
236     text-shadow: 0 0 0.2em [% css_colors.primary %], 0 0 0.2em [% css_colors.primary %];
237     text-decoration: none;
238 }
239
240 #header #header-links2 {
241     position:relative;
242     top:-8px;
243     color: [% css_colors.text_invert %];
244     padding-bottom: 15px;
245 }
246
247 #header #header-links2 a {
248     color: [% css_colors.text_invert %];
249 }
250
251 #header #header-links2 a:hover {
252     text-decoration: underline;
253 }
254
255 #your-acct-login {
256     padding-top:2em;
257 }
258
259 #gold-links {
260     [% IF rtl == 't' -%]
261     margin-right: 1em;
262     padding-right: 0px;
263     [%- ELSE %]
264     margin-left: 1em;
265     padding-left:0px;
266     [%- END %]
267 }
268
269 #gold-links-home {
270     margin:auto;
271     [% IF rtl == 't' -%]
272     padding-right: 0px;
273     [%- ELSE %]
274     padding-left:0px;
275     [%- END %]
276 }
277
278 #gold-links-holder {
279     height: 24px;
280     background: [% css_colors.background_invert %];
281 }
282
283 #util-bar {
284     [% IF rtl == 't' -%]
285     margin-right: 1em;
286     padding-right: 0px;
287     [%- ELSE %]
288     margin-left: 1em;
289     padding-left:0px;
290     [%- END %]
291     height:0px;
292 }
293
294 #search-wrapper {
295     border-bottom: 1px solid [% css_colors.border_standard %];
296     padding-bottom: 5px;
297     background: [% css_colors.background %];
298 }
299
300 #search-wrapper #breadcrumb {
301     margin-top:0px;
302     font-size: [% css_fonts.size_smaller %];
303     [% IF rtl == 't' -%]
304     float: right;
305     [%- ELSE %]
306     float:left;
307     [%- END %]
308 }
309
310 #search-wrapper #search-within {
311     margin-top:10px;
312     position:relative;
313     [% IF rtl == 't' -%]
314     float: left;
315     right: -173px;
316     [%- ELSE %]
317     float:right;
318     left:-173px;
319     [%- END %]
320 }
321
322 #search-wrapper #breadcrumb a {
323     color: [% css_colors.text %];
324 }
325
326 #search-wrapper #search_frm label {
327     font-size: [% css_fonts.size_smaller %];
328 }
329
330 #search-wrapper #search-box {
331     [% IF rtl == 't' -%]
332     margin-right: 1em;
333     padding-right: 0px;
334     [%- ELSE %]
335     margin-left: 1em;
336     padding-left: 0px;
337     [%- END %]
338     padding-top: 10px;
339     padding-bottom: 10px;
340 }
341
342 #adv_search_tabs, #acct_tabs, #acct_fines_tabs, #acct_checked_tabs, #acct_holds_tabs, #acct_prefs_tabs, #results_header_inner{
343     [% IF rtl == 't' -%]
344     margin-right:2px;
345     [%- ELSE %]
346     margin-left: 2px;
347     [%- END %]
348     overflow: auto;
349 }
350
351 #adv_search_tabs a, #acct_tabs a, #acct_fines_tabs a, #acct_checked_tabs a, #acct_holds_tabs a, #acct_prefs_tabs a {
352     [% IF rtl == 't' -%]
353     float: right;
354     margin: 10px 0px 0px 7px;
355     -moz-border-radius: 10px 10px 0px 0px;
356     border-radius: 10px 10px 0px 0px;
357     [%- ELSE %]
358     float: left;
359     margin: 10px 7px 0px 0px;
360     -moz-border-radius: 10px 10px 0px 0px; 
361     border-radius: 10px 10px 0px 0px;
362     [%- END %]
363     text-align: center;
364     vertical-align: middle;
365     display: block;
366     padding: 10px 0px 10px 0px;
367     font-weight: bold;
368     color: [% css_colors.text_invert %];
369     background: [% css_colors.control %];
370     font-weight: bold;
371     text-decoration: none;
372 }
373
374 #adv_search_tabs a, #acct_tabs a, #acct_fines_tabs a {
375     padding: 1em 1em 0.5em;
376 }
377
378 #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 {
379     background: [% css_colors.primary %]; 
380     color: [% css_colors.text_invert %];
381     text-decoration: none;
382 }
383
384 #adv_search_filters {
385     position: relative;
386 }
387 #adv_search_rows {
388     border-bottom: none;
389 }
390 .adv_filter_block {
391     [% IF rtl == 't' -%]
392     float: right;
393     [%- ELSE %]
394     float: left;
395     [%- END %]
396     padding: 15px;
397     clear: both;
398 }
399 .adv_filter_block_item {
400     [% IF rtl == 't' -%]
401     float: right;
402     [%- ELSE %]
403     float: left;
404     [%- END %]
405     padding: 5px;
406 }
407
408 #adv_special_block {
409     [% IF rtl == 't' -%]
410     float: right;
411     [%- ELSE %]
412     float: left;
413     [%- END %]
414     padding: 5px;
415     margin-top: 5px;
416 }
417
418 #adv_search_submit {
419     [% IF rtl == 't' -%]
420     margin-right: 10px;
421     [%- ELSE %]
422     margin-left: 10px;
423     [%- END %]
424     position: relative;
425 }
426
427 .checkbox_col {
428     width: 1%;
429     [% IF rtl == 't' -%]
430     padding-right: 10px !important;
431     [%- ELSE %]
432     padding-left: 10px !important;
433     [%- END %]
434 }
435
436 #adv_search.on, #num_search.on, #expert_search.on {
437     color: [% css_colors.accent_darker %];
438     background: [% css_colors.background %];
439     text-decoration: none;
440 }
441
442 #adv_search_tabs a.acct-tab-on, #acct_tabs a.acct-tab-on, #acct_fines_tabs a.acct-tab-on {
443     color: [% css_colors.accent_darker %];
444     background: [% css_colors.background %];
445     text-decoration: none;
446 }
447
448 .acct-tab-off {
449     background: [% css_colors.control %];
450 }
451
452 #acct_checked_tabs a, #acct_holds_tabs a, #acct_prefs_tabs a {
453     margin-top: 0px;
454     font-size: [% css_fonts.size_smaller %];
455     color: [% css_colors.accent_darker %];
456     padding: 10px 10px 10px 10px;
457 }
458
459 #acct_checked_tabs div.selected a, #acct_holds_tabs div.selected a, #acct_prefs_tabs div.selected a {
460     background: [% css_colors.accent_lightest %];
461     color: [% css_colors.accent_darker %];
462 }
463
464 #acct_checked_tabs, #acct_holds_tabs, #acct_prefs_tabs {
465     padding-bottom: 12px;
466     color: [% css_colors.accent_medium %];
467 }
468
469 #acct_select, #acct_prefs_select {
470      display: none;
471 }
472
473 #mobile_acct_search_links {
474       background: [% css_colors.primary_fade %];
475 }
476
477 .rdetail_header {
478     [% IF rtl == 't' -%]
479     padding: 5px 0px 6px 7px;
480     margin-right: 1em;
481     [%- ELSE %]
482     padding: 5px 7px 6px 0px;
483     margin-left: 1em;
484     [%- END %]
485     border-bottom: 1px dotted [% css_colors.accent_light %];
486 }
487
488 .rdetail_results a {
489     color:[% css_colors.primary_fade %];
490     font-weight:bold;
491     font-size: [% css_fonts.size_bigger %];
492 }
493
494 .rdetail_result_count {
495     color: [% css_colors.text %];
496     font-weight: normal;
497     display: inline-block;
498     [% IF rtl == 't' -%]
499     padding-right: 1em;
500     [%- ELSE %]
501     padding-left: 1em;
502     [%- END %]
503 }
504
505 .rdetail_result_nav {
506     font-weight:normal;
507     display: inline-block;
508     [% IF rtl == 't' -%]
509     padding-right: 1em;
510     [%- ELSE %]
511     padding-left: 1em;
512     [%- END %]
513 }
514
515 #rdetail_details_table {
516     margin-top: 15px;
517 }
518
519 #rdetail_image { border: none; }
520 #rdetail_image_cell {
521     padding-top: 3px;
522     [% IF rtl == 't' -%]
523     padding-left: 10px;
524     [%- ELSE %]
525     padding-right: 10px;
526     [%- END %]
527 }
528
529 h2.rdetail_uris {
530     margin-top: 1em;
531 }
532 div.rdetail_uris {
533     padding: 0.5em 1em 0.5em 1em;
534     background-color: [% css_colors.accent_lighter2 %];
535 }
536 div.rdetail_uris ul li {
537     position: relative;
538     [% IF rtl == 't' -%]
539     right: 1em;
540     [%- ELSE %]
541     left: 1em;
542     [%- END %]
543 }
544
545 div.rdetail_show_copies {
546     margin-top: 1em;
547 }
548
549 div#rdetail_actions_div {
550     background: [% css_colors.background %];
551     [% IF rtl == 't' -%]
552     float: left;
553     [%- ELSE %]
554     float: right;
555     [%- END %]
556 }
557
558 span#rdetail_copy_counts {
559     display: inline-block;
560     vertical-align: top;
561     [% IF rtl == 't' -%]
562     border-left: thin;
563     margin-left: 1em;
564     padding-left: 1em;
565     [%- ELSE %]
566     border-right: thin;
567     margin-right: 1em;
568     padding-right: 1em;
569     [%- END %]
570 }
571
572 span#rdetail_hold_counts {
573     display: inline-block;
574     vertical-align: top;
575 }
576 span#rdetail_hold_counts p {
577     [% IF rtl == 't' -%]
578     padding-right: 2em;
579     [%- ELSE %]
580     padding-left: 2em;
581     [%- END %]
582 }
583
584 #rdetail_image_div {
585     [% IF rtl == 't' -%]
586     float: right;
587     margin-left: 1em;
588     [%- ELSE %]
589     float: left;
590     margin-right: 1em;
591     [%- END %]
592 }
593
594 .rdetail_aux_utils {
595     padding-bottom: 6px;
596     [% IF rtl == 't' -%]
597     border-right: 1px dotted #ccc;
598     padding-right:17px;
599     padding-left:70px;
600     [%- ELSE %]
601     border-left:1px dotted [% css_colors.accent_light %];
602     padding-left: 17px;
603     padding-right: 70px;
604     [%- END %]
605 }
606
607 div.place_hold {
608     border-bottom: 1px dotted [% css_colors.accent_light %];
609     padding-top: 10px;
610 }
611
612 div.toggle_list { padding-top: 6px; }
613
614 div.share_record {
615     padding-top: 6px;
616     border-top: 1px dotted [% css_colors.accent_light %];
617 }
618
619 div.format_icon {
620     [% IF rtl == 't' -%]
621     float: left;
622     margin-left: 17px;
623     [%- ELSE %]
624     float: right;
625     margin-right: 17px;
626     [%- END %]
627 }
628
629 #metarecord_population {
630     overflow: hidden;
631     width: 40%;
632     padding-bottom: 10px;
633 }
634
635 .metarecord_population_span_link {
636     line-height: 20px;
637 }
638
639 .metarecord_population_format {
640     border-right: thin;
641     display: inline-block;
642     margin-right: 1em;
643     padding-right: 1em;
644     vertical-align: top;
645 }
646
647 .metarecord_population_item_lang {
648     display: inline-block;
649     vertical-align: top;
650 }
651
652 .metarecord_population_all {
653     padding-top:10px;
654 }
655
656 .results_aux_utils {
657     display: table-cell;
658 }
659
660 .result_util {
661     border-bottom: 1px dotted [% css_colors.accent_light %];
662     padding-top: 6px;
663     [% IF rtl == 't' -%]
664     padding-right: 1em;
665     [%- ELSE %]
666     padding-left: 1em;
667     [%- END %]
668 }
669
670 .results_reviews {
671     top: -5px;
672 }
673
674 #rdetail_copies {
675     padding-top: 1.5em;
676 }
677
678 #rdetails_status td {
679     [% IF rtl == 't' -%]
680     padding: 7px 13px 3px 0px;
681     [%- ELSE %]
682     padding: 7px 0px 3px 13px;
683     [%- END %]
684     white-space: nowrap;
685 }
686
687 #rdetails_status td[headers=copy_header_library], 
688 #rdetails_status td[headers=copy_header_shelfloc] {
689     white-space: normal;
690 }
691
692 #rdetails_status thead th {
693     [% IF rtl == 't' -%]
694     padding: 13px 13px 13px 0px;
695     text-align: right;
696     [%- ELSE %]
697     padding: 13px 0px 13px 13px;
698     text-align: left;
699     [%- END %]
700     background-color: [% css_colors.accent_lighter2 %];
701     font-size: [% css_fonts.size_smaller %];
702     font-weight: bold;
703 }
704
705 #rdetails_status tbody td {
706     [% IF rtl == 't' -%]
707     padding-right: 13px;
708     text-align: right;
709     [%- ELSE %]
710     padding-left: 13px;
711     text-align: left;
712     [%- END %]
713 }
714 #rdetails_status tbody td.copy_note {
715     color: [% css_colors.primary %];
716     text-wrap:normal;
717     white-space:pre-wrap !important;
718     word-wrap:normal;
719 }
720
721 .rdetail_extras {
722     background: [% css_colors.primary_fade %];
723     border: 1px solid [% css_colors.primary %];
724     padding-top:1px;
725     clear:both;
726 }
727
728 #rdetail_extras_div {
729     margin: 1em 0;
730 }
731
732 .rdetail_extras_hr {
733     [% IF rtl == 't' -%]
734     margin-right: 1px;
735     margin-left: 1px;
736     [%- ELSE %]
737     margin-left: 1px;
738     margin-right: 1px;
739     [%- END %]
740     height: 1px;
741     background: [% css_colors.accent_light %];
742 }
743
744 .rdetail_extras_link {
745     padding: 6px 12px;
746     font-size: [% css_fonts.size_smaller %];
747     font-weight: bold;
748 }
749
750 .rdetail_extras_lbl {
751     color: [% css_colors.text_invert %];
752     text-decoration: none;
753 }
754
755 ##rdetail_extras_expand, #rdetail_extras_collapse, #rdetail_locs_collapse {
756     [% IF rtl == 't' -%]
757     margin-right: 13px;
758     [%- ELSE %]
759     margin-left: 13px;
760     [%- END %]
761 }
762
763 #rdetail_locs_expand, #rdetail_locs_collapse {
764     [% IF rtl == 't' -%]
765     margin-right: 13px;
766     [%- ELSE %]
767     margin-left:13px;
768     [%- END %]
769     padding-bottom:3px;
770     margin-top:15px;
771 }
772
773 #rdetail_anotes_div .biography {
774     margin:0;
775 }
776
777 .almost-content-wrapper {
778     background: [% css_colors.background %];
779 }
780
781 #content-wrapper {
782     background: [% css_colors.background %];
783     min-height: 260px;
784     border-bottom: 1px solid [% css_colors.border_dark %];
785 }
786
787 .content-wrapper-record-page { top: -15px; position: relative; }
788
789 #main-content-home {
790     [% IF rtl == 't' -%]
791     padding-right: 17px;
792     margin-right: 1em;
793     [%- ELSE %]
794     padding-left: 17px;
795     margin-left: 1em;
796     [%- END %]
797 }
798 #main-content {
799     [% IF rtl == 't' -%]
800     padding-right: 0px;
801     [%- ELSE %]
802     padding-left: 0px;
803     [%- END %]
804     margin: 0 1em;
805     clear: both;
806 }
807
808 #main-content-after-bar {
809     [% IF rtl == 't' -%]
810     margin-right: 1em;
811     padding-right: 4px;
812     [%- ELSE %]
813     margin-left: 1em;
814     padding-left: 4px;
815     [%- END %]
816 }
817
818 #results-side-bar {
819     [% IF rtl == 't' -%]
820     float: right; 
821     margin-left: 5px;
822     [%- ELSE %]
823     float: left;
824     margin-right: 5px; 
825     [%- END %]
826     width: 174px;
827     background: [% css_colors.background %];
828 }
829
830 #main-content .login_boxes {
831     border: 1px solid [% css_colors.accent_lighter %];
832     background: linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
833     background: -moz-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
834     background: -ms-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
835     background: -o-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
836     background: -webkit-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
837
838     color: [% css_colors.accent_darker %];
839 }
840
841 #main-content .login_boxes h1 {
842     font-weight: normal;
843     font-size: [% css_fonts.size_biggest %];
844     margin:0;
845 }
846
847 #main-content .left_brain {
848     [% IF rtl == 't' -%]
849     padding-right: 28px;
850     [% ELSE -%]
851     padding-left:28px;
852     [% END -%]
853     padding-top:25px;
854 }
855
856 #main-content .left_brain input[type=text], #main-content .left_brain input[type=password] {
857     width:167px;
858     margin:0;
859     padding:0;
860     background: [% css_colors.background %];
861     font-size: [% css_fonts.size_bigger %];
862     color: [% css_colors.text %];
863 }
864
865 #main-content .left_brain .input_bg {
866     [% IF rtl == 't' -%]
867     padding: 10px 13px 0px 10px;
868     [% ELSE -%]
869     padding:10px 10px 0px 13px;
870     [% END -%]
871     width:167px;
872     height:29px;
873 }
874
875 .login-help-box {
876     [% IF rtl == 't' -%]
877     float: right;
878     margin-right: 2em;
879     [% ELSE -%]
880     float: left;
881     margin-left: 2em;
882     [% END -%]
883     width: 200px;
884     text-align: center;
885 }
886
887 .login-help-button {
888     font-size: [% css_fonts.size_biggest %];
889     padding: 1.5em;
890 }
891
892 #login-failed-message {
893     font-size: [% css_fonts.size_bigger %];
894     font-weight: bold;
895     color: [% css_colors.text_alert %];
896     padding-top: 1em;
897 }
898
899 #holds_temp_parent td {
900     border-bottom:1px solid [% css_colors.border_standard %];
901 }
902
903 #holds_temp_parent input, #holds_temp_parent select {
904     margin:0;
905 }
906
907 #holds_temp_parent tr td div {
908     margin-top: 10px;
909     margin-bottom: 10px;
910 }
911
912 #holds_temp_parent tr td div.format_icon {
913     margin-top: 6px;
914     margin-bottom: 6px;
915     float: none;
916 }
917
918 #results_header_bar {
919     background: [% css_colors.accent_medium %];
920     border-top:1px solid [% css_colors.accent_mediumdark %];
921     border-bottom:1px solid [% css_colors.accent_mediumdark %];
922 }
923
924 .results_header_lbl {
925     [% IF rtl == 't' -%]
926     float: right;
927     [% ELSE -%]
928     float: left;
929     [% END -%]
930     font-weight: bold;
931     color: [% css_colors.text %];
932     /* this border is not visible, but it keeps these labels the same size
933     as the buttons */
934     border: 1px solid [% css_colors.accent_medium %];
935     background: [% css_colors.accent_medium %];
936     margin: 0.5em 0.3em;
937     padding: 0.3em;
938 }
939 /* we need a negative margin on the select to allow the containing <label>
940 to determine the actual size of the element.  By doing this, we can increase
941 the odds that the buttons and the select will be the same size, and therefore
942 collapse correctly when the window width decreases */
943 .results_header_lbl select {
944     margin: -0.5em 0;
945 }
946
947 #limit_to_available {
948     vertical-align: middle;
949 }
950
951 .results_header_sel {
952     [% IF rtl == 't' -%]
953     float: right;
954     [% ELSE -%]
955     float:left;
956     [% END -%]
957     margin:0;
958 }
959
960 .results_header_nav1 {
961     [% IF rtl == 't' -%]
962     padding: 5px 0px 6px 7px;
963     [% ELSE -%]
964     padding: 5px 7px 6px 0px;
965     [% END -%]
966     border-bottom: 1px dotted [% css_colors.accent_light %];
967 }
968
969 .results_header_nav1 .h1 {
970     font-size: [% css_fonts.size_bigger %];
971     font-weight:bold;
972     color:[% css_colors.primary_fade %];
973 }
974
975 .table_no_border_space {
976   border-spacing: 0px;
977 }
978 .table_no_cell_pad td {
979   padding: 0px;
980 }
981 .table_no_border {
982   border-collapse: collapse;
983 }
984
985 #result_table_table {
986   margin-top:10px;
987 }
988
989 #result_table_div {
990     margin-top: 1em;
991 }
992
993 tr.result_table_row > td.results_row_count,
994 tr.result_table_row > td.result_table_pic_header,
995 tr.result_table_row > td.result_table_title_cell {
996     vertical-align: top;
997 }
998
999 .result_metadata {
1000     [% IF rtl == 't' -%]
1001     float: right;
1002     padding-left: 2em;
1003     [% ELSE -%]
1004     float: left;
1005     padding-right: 2em;
1006     [% END -%]
1007     width: 30em;
1008 }
1009
1010 tr.result_table_row:nth-child(n+2) > td {
1011     border-top: 1px solid [% css_colors.accent_lighter2 %];
1012 }
1013
1014 tr.result_table_row > td.result_table_pic_header {
1015     [% IF rtl == 't' -%]
1016     padding-right: 1em;
1017     [% ELSE -%]
1018     padding-left: 1em;
1019     [% END -%]
1020     white-space: nowrap;
1021     width: 78px;
1022 }
1023
1024 .result_number {
1025     [% IF rtl == 't' -%]
1026     padding-right: 1em;
1027     [% ELSE -%]
1028     padding-left: 1em;
1029     [% END -%]
1030     white-space: nowrap;
1031 }
1032
1033 .result_count_number {
1034    font-weight: bold;
1035 }
1036
1037 .result_table_subtable {
1038     width: 100%;
1039     padding-top: 1em;
1040 }
1041
1042 div.result_table_utils_cont {
1043     [% IF rtl == 't' -%]
1044     text-align: right;
1045     float: right;
1046     [% ELSE -%]
1047     text-align:left;
1048     float: left;
1049     [% END -%]
1050 }
1051
1052 #myopac_summary_div p {
1053     margin:0;
1054     margin-bottom: 10px;
1055 }
1056
1057 #acct_sum_checked_table td {
1058     padding-bottom:5px;
1059 }
1060
1061 .zero_search_hits_main {
1062     [% IF rtl == 't' -%]
1063     float: right;
1064     [% ELSE -%]
1065     float:left;
1066     [% END -%]
1067     width:300px;
1068     margin-top: 2ex;
1069 }
1070 .zero_search_hits_saved {
1071     [% IF rtl == 't' -%]
1072     float: right;
1073     margin-left: 2em;
1074     [% ELSE -%]
1075     float:left;
1076     margin-right: 2em;
1077     [% END -%]
1078     width:200px;
1079     margin-top: 2ex;
1080 }
1081
1082 #zero_search_hits p {
1083     margin-top:0;
1084 }
1085
1086 #zero_hits_term {
1087     font-weight: bold;
1088 }
1089
1090 #zero_search_hits #spell_check_link {
1091 }
1092
1093 #zero_search_hits #zero_hits_suggestions {
1094 }
1095
1096 #lowhits_help {
1097     [% IF rtl == 't' -%]
1098     float: left;
1099     [% ELSE -%]
1100     float: right;
1101     [% END-%]
1102     width: 353px;
1103     background: [% css_colors.accent_light %];
1104     padding: 10px;
1105     margin-top: 7px;
1106 }
1107
1108 .results_info_table td {
1109     [% IF rtl == 't' -%]
1110     padding-left: 10px;
1111     [% ELSE -%]
1112     padding-right: 10px;
1113     [% END-%]
1114 }
1115
1116 #myopac_holds_main_table {
1117     border-collapse: collapse;
1118 }
1119
1120 #myopac_holds_main_table td {
1121     border: 1px solid [% css_colors.border_dark %];
1122     
1123 }
1124
1125 .myopac-hold-available {
1126     color: [% css_colors.text_greatnews %];
1127     font-weight: bold;
1128 }
1129
1130 .myopac-hold-suspended {
1131     color: [% css_colors.text_badnews %];
1132     font-weight: bold;
1133 }
1134
1135 #myopac_prefs_div .data_grid {
1136     border-collapse:collapse;
1137 }
1138
1139 #myopac_prefs_div .data_grid td {
1140     [% IF rtl == 't' -%]
1141     padding: 6px 17px 7px 0px;
1142     [% ELSE -%]
1143     padding:6px 0px 7px 17px;
1144     [% END -%]
1145     background:[% css_colors.accent_ultralight %];
1146     border-bottom:3px solid [% css_colors.background %];
1147 }
1148
1149 .header_middle {
1150     [% IF rtl == 't' -%]
1151     padding: 0px 0px 0px 7px;
1152     [% ELSE -%]
1153     padding: 0px 7px 0px 0px;
1154     [% END -%]
1155     height:22px;
1156     font-size: [% css_fonts.size_bigger %];
1157     font-weight:bold;
1158     color:[% css_colors.primary_fade %];
1159     border-bottom: 1px dotted [% css_colors.accent_light %];
1160     clear: both;
1161 }
1162
1163 .header_middle a {
1164     font-weight: normal;
1165 }
1166
1167 #acct_sum_block {
1168     [% IF rtl == 't' -%]
1169     float: right;
1170     clear: right;
1171     [% ELSE -%]
1172     float: left;
1173     clear: left;
1174     [% END -%]
1175 }
1176
1177 .acct_sum_table {
1178     border-collapse: collapse;
1179     background: [% css_colors.accent_ultralight %];
1180 }
1181
1182 .acct_sum_table tr {
1183     border-bottom: 2px solid white;
1184 }
1185
1186 .acct_sum_table td {
1187     padding: 1em;
1188 }
1189
1190 .acct_sum_table a {
1191     text-transform: none;
1192     position:relative;
1193     top:-1px;
1194 }
1195
1196 .acct_sum_table .view_link {
1197     font-weight: normal;
1198 }
1199
1200 #myopac_sum_fines {
1201     [% IF rtl == 't' -%]
1202     float: left;
1203     padding: 15px 23px 0px 0px;
1204     [% ELSE -%]
1205     float:right;
1206     padding: 15px 0px 0px 23px;
1207     [% END -%]
1208     background: [% css_colors.accent_ultralight %];
1209     width: 177px;
1210     height: 166px;
1211 }
1212
1213 #myopac_sum_fines_placehold {
1214     [% IF rtl == 't' -%]
1215     float: left;
1216     [% ELSE -%]
1217     float: right;
1218     [% END -%]
1219     width: 177px;
1220     height: 166px;
1221 }
1222
1223 .acct_holds_temp td {
1224     [% IF rtl == 't' -%]
1225     text-align: right;
1226     [% ELSE -%]
1227     text-align: left;
1228     [% END -%]
1229 }
1230
1231 #acct_checked_tabs .align, #acct_holds_tabs .align, #acct_prefs_tabs .align {
1232     [% IF rtl == 't' -%]
1233     float: right;
1234     [% ELSE -%]
1235     float:left;
1236     [% END -%]
1237 }
1238
1239 #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 {
1240     border-collapse: collapse;
1241 }
1242
1243 .hold_notes {
1244     text-transform: none;
1245     font-weight: normal;
1246 }
1247
1248 .hold_note_title { font-weight: bold; }
1249
1250 #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 {
1251     background: [% css_colors.accent_lighter2 %];
1252     padding: 10px;
1253 }
1254
1255 #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 {
1256     [% IF rtl == 't' -%]
1257     text-align: right;
1258     [% ELSE -%]
1259     text-align: left;
1260     [% END -%]
1261     padding: 0px 10px 0px 10px;
1262 }
1263
1264 #acct_list_header select, #acct_list_header_anon select {
1265     font-weight:normal;
1266     text-transform:none;
1267 }
1268
1269 .search_catalog_lbl {
1270     font-size: [% css_fonts.size_bigger %];
1271 }
1272 .adv_search_catalog_lbl {
1273     font-size: [% css_fonts.size_bigger %];
1274 }
1275
1276 .browse_the_catalog_lbl {
1277     font-size: [% css_fonts.size_bigger %];
1278 }
1279
1280 .lbl1 {
1281     font-size: [% css_fonts.size_bigger %];
1282     font-weight:bold;
1283 }
1284
1285 .lbl2 {
1286     font-size: [% css_fonts.size_smaller %];
1287     font-weight:normal;
1288     position:relative;
1289     top:3px;
1290     max-width:300px;
1291 }
1292
1293 #myopac_tabs, #adv_search_parent, #fines_payments_wrapper {
1294     background: [% css_colors.primary_fade %];
1295     padding-top:5px;
1296     margin-bottom:20px;
1297 }
1298
1299 #fines_payments_wrapper {
1300     padding-left: 5px; 
1301     padding-right: 5px;
1302 }
1303
1304 .myopac_payments_table th {
1305     [% IF rtl == 't' -%]
1306     text-align: right; }
1307     [% ELSE -%]
1308     text-align: left;
1309     [% END -%]
1310 }
1311
1312 .myopac_payments_table thead th { border-bottom: 1px dashed [% css_colors.accent_darker %]; }
1313 .myopac_payments_table thead th:first-child { width: 8em; }
1314 .myopac_payments_table tbody tr:nth-child(odd) { background-color: [% css_colors.accent_lighter %]; }
1315 .myopac_payments_table form { display: inline; }
1316 .myopac_payments_table input[type="submit"] { padding: 1px; }
1317
1318 .payment-error {
1319     font-weight: bold; color: [% css_colors.text_alert %];
1320     padding: 10px; border: 1px solid [% css_colors.accent_medium_dark %];
1321 }
1322
1323 .payment-processing {
1324     font-weight: bold;
1325     color: [% css_colors.text_greatnews %];
1326     font-size: [% css_fonts.size_bigger %];
1327     padding: 10px; border: 1px solid [% css_colors.accent_medium_dark %];
1328     text-align: center;
1329 }
1330 #adv_search_input { width: 100%; }
1331 #adv_search_parent {
1332     margin-bottom:0px;
1333 }
1334 #search-submit-spinner {
1335     height: 16px;
1336     width: 16px;
1337 }
1338 div.adv_search_available {
1339     margin-top: 1em;
1340 }
1341
1342 #myopac_loading {
1343     width:100%;
1344     text-align:center;
1345     padding-top:20px;
1346     font-size: [% css_fonts.size_bigger %];
1347     font-weight:bold;
1348 }
1349
1350 .chili_link {
1351     width:100px !important;
1352     text-align: center !important;
1353 }
1354
1355 .chili_review div.chili_link div {
1356     margin: auto;
1357 }
1358
1359 /* styling for advanced search filters that display with searchbar */
1360
1361 #adv_filter_results_block h4 { display: inline; }
1362
1363 #adv_filter_results_block {
1364     margin-top: 6px;
1365 }
1366
1367 .adv_filter_results_block_label {
1368     font-weight:bold;
1369     [% IF rtl == 't' -%]
1370     padding: 4px 12px 4px 0px;
1371     [% ELSE -%]
1372     padding: 4px 0px 4px 12px;
1373     [% END -%]
1374 }
1375
1376 .adv_filter_results_group {
1377     font-size: 12px;
1378     display: inline-block;
1379     background:  [% css_colors.accent_lighter2 %];
1380     border-style: solid;
1381     border-color: [% css_colors.accent_medium %];
1382     border-width: 1px;
1383     border-radius: 4px;
1384     padding: 2px 4px 2px 4px;
1385 }
1386
1387 .adv_filter_results_group_wrapper {
1388     display: inline-block;
1389     [% IF rtl == 't' -%]
1390     margin-right: 1em;
1391     [% ELSE -%]
1392     margin-left: 1em;
1393     [% END -%]
1394     margin-bottom: 8px;
1395 }
1396
1397 .adv_filter_results_group_header {
1398     display: inline-block;
1399 }
1400
1401 .adv_filter_results_group_values {
1402     display: inline;
1403 }
1404
1405 .adv_search_result_filter {
1406     display: inline-block;
1407 }
1408
1409 .remove_filter {
1410     font-size: 16px;
1411     [% IF rtl == 't' -%]
1412     margin-right: 3px;
1413     [% ELSE -%]
1414     margin-left: 3px;
1415     [% END -%]
1416 }
1417
1418 a.remove_filter {
1419     text-decoration: none;
1420     color: [% css_colors.accent_dark %];
1421 }
1422
1423 #filter_hits {
1424      display: inline-block;
1425 }
1426
1427 #refine_search_link {
1428     display: inline-block;
1429 }
1430
1431 [%- IF we_want_to_turn_on_facet_styling.defined; %]
1432 /* some facet styling */
1433 .facetClassContainer { margin: 2px; border: 1px solid [% css_colors.accent_light %]; }
1434 .facetClassLabelContainer { border: 1px solid [% css_colors.accent_light %]; }
1435 .facetClassLabel { font-weight: bold; text-align: center; }
1436 .facetFieldContainer {  }
1437 .facetFieldLabel { padding-left: 2px; margin-top: 5px; margin-bottom: 5px; font-weight: bold; text-align: left; }
1438 .extraFacetFieldsWrapper { }
1439 .toggleExtraFacetFieldsButton { float: right; margin: 0px; padding: 0px; }
1440 .facetFieldLineCount {
1441     display: inline-block;
1442     border-right: 1px solid [% css_colors.accent_light %];
1443     color: [% css_colors.accent_mediumdark %];
1444     width: 3em;
1445     margin-right: 3px
1446 }
1447 .facetField { border-top: 1px solid [% css_colors.accent_light %]; }
1448 .facetFields { padding-left: 5px; }
1449 .facetFieldLineValue { overflow: hidden; text-overflow: ellipsis; }
1450 [%- END -%]
1451
1452 div#facet_sidebar {
1453     [% IF rtl == 't' -%]
1454     float: right;
1455     margin-left: 1em;
1456     [% ELSE -%]
1457     float: left;
1458     margin-right: 1em;
1459     [% END-%]
1460 }
1461
1462 .facet_box_temp {
1463     padding-bottom:3px;
1464 }
1465
1466 .facet_box_temp .header {
1467     height: 2.3em;
1468     background:[% css_colors.primary %];
1469     -moz-border-top-left-radius: 5px;
1470     border-top-left-radius: 5px;
1471     -moz-border-top-right-radius: 5px;
1472     border-top-right-radius: 5px;
1473     font-weight:bold;
1474     color:[% css_colors.text_invert %];
1475     padding-top:4px;
1476 }
1477
1478 .facet_box_temp.filter_box_temp .header {
1479     background: [% css_colors.background_invert %] !important;
1480 }
1481
1482 .filter_box_label {
1483     color: [% css_colors.background_invert %];
1484     font-weight:bold;
1485     padding-top:4px;
1486     padding-bottom:4px;
1487     padding-left:12px;
1488 }
1489
1490 .facet_box_temp .header .title {
1491     [% IF rtl == 't' -%]
1492     float: right;
1493     padding-right: 12px;
1494     [% ELSE -%]
1495     float:left;
1496     padding-left:12px;
1497     [% END -%]
1498     padding-top:6px;
1499 }
1500
1501 /* in this context, where h4 is primarily for structure, 
1502    avoid the normal large font and margin for h4's */
1503 .facet_box_temp h4 {
1504     font-size : 100%; 
1505     margin: 0px;
1506 }
1507
1508 .facet_box_temp .header a.button {
1509     [% IF rtl == 't' -%]
1510     float: left;
1511     padding-left: 6px;
1512     [% ELSE -%]
1513     float:right;
1514     padding-right:6px;
1515     [% END -%]
1516     padding-top:6px;
1517     color:[% css_colors.text_invert %];
1518 }
1519
1520 .facet_box_wrapper .box_wrapper .box {
1521     border-top:1px solid [% css_colors.border_standard %];
1522     border-left:1px solid [% css_colors.border_standard %];
1523     border-right:1px solid [% css_colors.border_standard %];
1524     padding: 0 0.5em;
1525     width: 14em;
1526     overflow: hidden;
1527 }
1528
1529 .filter_box_wrapper {
1530     margin-bottom: 3px;
1531     padding: 2px;
1532     border: 1px solid [% css_colors.background_invert %];
1533     -moz-border-radius: 3px;
1534     border-radius: 3px;
1535     font-weight:bold;
1536     padding-top:4px;
1537 }
1538
1539 .facet_template {
1540     box-sizing: border-box;
1541     -moz-box-sizing: border-box;
1542     display: table;
1543     margin: 0.5em 0;
1544     width: 100%;
1545 }
1546
1547 .facet_template div {
1548     display: table-cell;
1549     padding: 2px;
1550 }
1551
1552 .facet_template.filter_template div {
1553     padding: 0px !important;
1554 }
1555
1556 .facet_template .count {
1557     text-align: right;
1558     color: [% css_colors.accent_mediumdark %];
1559 }
1560
1561 .facet_template_selected {
1562     background-color: [% css_colors.accent_lighter2 %];
1563     border: 1px solid [% css_colors.accent_medium %];
1564 }
1565
1566 #footer-wrap {
1567     background: linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1568     background: -moz-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1569     background: -o-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1570     background: -webkit-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
1571     background-color: [% css_colors.primary %];
1572 }
1573
1574 #footer {
1575     [% IF rtl == 't' -%]
1576     margin-right: 1em;
1577     [% ELSE -%]
1578     margin-left: 1em;
1579     [% END -%]
1580     padding-top:5px;
1581     padding-bottom: 10px;
1582     font-size: [% css_fonts.size_small %];
1583 }
1584
1585 #footer a {
1586     color: [% css_colors.text_invert %];
1587     text-decoration: none;
1588     text-shadow: 0 0 0.2em [% css_colors.primary %], 0 0 0.2em [% css_colors.primary %];
1589 }
1590
1591 #copyright_text, #footer_logo {
1592     color: [% css_colors.text_invert %];
1593 }
1594
1595 .color_4 {
1596     font-weight: bold;
1597 }
1598
1599 .advanced_div { padding-top: 15px; }
1600 #adv_global_search { width: 100%; }
1601 #adv_global_search select { width: 13em; }
1602 #adv_global_addrow td { padding-top: 7px; }
1603 [% IF rtl == 't' -%]
1604 #adv_global_addrow.td-search-left{text-align:right;}
1605 [% END -%]
1606 #adv_global_input_table { width: 100%; }
1607 #adv_global_input_table select { width: 7em; }
1608 .adv_adv_link {
1609     font-size: [% css_fonts.size_smaller %];
1610     color: [% css_colors.text_alert %];
1611 }
1612 #acct_prefs_header {
1613     [% IF rtl == 't' -%]
1614     float: right;
1615     [% ELSE -%]
1616     float: left;
1617     [% END -%]
1618 }
1619 .search_page_nav_link {
1620     cursor: pointer;
1621     [% IF rtl == 't' -%]
1622     padding-right: 1em;
1623     [% ELSE -%]
1624     padding-left: 1em;
1625     [% END -%]
1626 }
1627 #opac.result.sort { width: 160px; }
1628 .renew-summary, .message-update-summary { font-size: [% css_fonts.size_bigger %]; font-style: italic; margin: 0.5ex 0; }
1629 .failure-text {
1630     [% IF rtl == 't' -%]
1631     margin-right: 4em;
1632     [% ELSE -%]
1633     margin-left: 4em;
1634     [% END -%]
1635     font-style: italic;
1636     color: [% css_colors.text_alert %];
1637 }
1638 .refine-controls { font-size: [% css_fonts.size_bigger %]; padding: 0.5ex 0; }
1639 #adv_search_refine input[type=text] { border: 1px inset [% css_colors.accent_light %] !important; }
1640 #adv_search_refine select { border: 1px inset [% css_colors.accent_light %] !important; }
1641 #adv_search_refine {
1642     [% IF rtl == 't' -%]
1643     padding-right: 5em;
1644     [% ELSE -%]
1645     padding-left: 5em;
1646     [% END -%]
1647     background-color: [% css_colors.accent_lighter2 %];
1648     margin: 2ex 0;
1649 }
1650 .row-remover { position: relative; top: 1px; vertical-align: middle; }
1651 .subtle-button {
1652     background-color: [% css_colors.background %];
1653     color: [% css_colors.primary %]; text-decoration: none;
1654     padding: 0; border: 0; margin: 0;
1655     vertical-align: middle;
1656 }
1657 .subtle-button:hover { text-decoration: underline; cursor: pointer; }
1658 .no-dec:hover { text-decoration: none; }
1659 .pending-addr td { background-color: [% css_colors.background_alert %] !important; border: 0 !important; }
1660
1661 #account-update-email table { text-align: center; padding: 20px; margin-top: 18px; border-collapse: collapse; }
1662 #account-update-email table td {
1663     [% IF rtl == 't' -%]
1664     text-align: right;
1665     [% ELSE -%]
1666     text-align: left;
1667     [% END -%]
1668     padding: 5px 15px 5px 15px;
1669     border-bottom: 1px solid [% css_colors.accent_lighter %];
1670 }
1671 #account-update-email-error { font-size: [% css_fonts.size_biggest %]; padding: 10px; border:1px solid [% css_colors.border_standard %];}
1672 a.dash-link:hover { text-decoration: underline !important; }
1673 #list_create_table td { vertical-align: middle; padding: 0 8px; }
1674 #list_create_table {
1675     background-color: [% css_colors.accent_light %];
1676     padding-bottom: 4px;
1677     margin-bottom: 10px;
1678     border-bottom: 1px dotted [% css_colors.accent_medium %];
1679     width: 100%;
1680 }
1681 .list_create_table_label {
1682     width: 30%;
1683 }
1684 #list_description, #list_create_name {
1685         width: 500px;
1686 }
1687 .list-create-table-buttons input[type=image] { margin-top: 2px; }
1688 .result_table_format_cell { padding: 0px 10px; text-align: center; }
1689 .results_row_count { font-weight: bold; }
1690 #hold_editor h1 { font-size: [% css_fonts.size_bigger %]; font-weight: bold; }
1691 #hold_editor h2 { font-size: [% css_fonts.size_big %]; font-weight: normal; text-indent: 2em; font-style: italic; }
1692 #hold_editor h1, #hold_editor h2 { margin: 2px 0; }
1693 #hold_editor_table { background-color: [% css_colors.accent_lighter %]; padding: 0.5em; }
1694 #hold_editor_table th {
1695     [% IF rtl == 't' -%]
1696     text-align: left;
1697     padding-left: 1em;
1698     [% ELSE -%]
1699     text-align: right;
1700     padding-right: 1em;
1701     [% END -%]
1702 }
1703 #hold_editor_table td { padding: 0.25em 0; }
1704 .fmt-note {
1705     [% IF rtl == 't' -%]
1706     padding-right: 1em !important;
1707     [% ELSE -%]
1708     padding-left: 1em !important;
1709     [% END -%]
1710     vertical-align: middle;
1711 }
1712 .hold-editor-controls { text-align: center; padding-top: 1em !important; }
1713 .hold-editor-controls a { padding-left: 2em; }
1714
1715 .text-right {
1716     [% IF rtl == 't' -%]
1717     text-align: left;
1718     [% ELSE -%]
1719     text-align: right;
1720     [% END -%]
1721 }
1722 .text-right-top {
1723     [% IF rtl == 't' -%]
1724     text-align: right;
1725     [% ELSE -%]
1726     vertical-align: top;
1727     [% END -%]
1728 }
1729 .rdetail-author-div {
1730     padding-bottom: 10px;
1731     display: inline-block;
1732 }
1733
1734 .invisible { visibility: hidden; }
1735 .rdetail-extras-summary { margin: 10px; }
1736 .staff-hold { background-color: [% css_colors.accent_lightest %]; }
1737 .expert-search tbody tr th {
1738     [% IF rtl == 't' -%]
1739     text-align: left;
1740     padding-right: 2em;
1741     [% ELSE -%]
1742     text-align: right;
1743     padding-left: 2em;
1744     [% END -%]
1745 }
1746 .expert-search-row { padding-top: 10px; }
1747 #adv_expert_row label { font-weight: bold; }
1748
1749 .bookshelf tr.browse_border td {
1750     border-bottom: 1px dashed [% css_colors.accent_dark %];
1751     font-size: 1px;
1752     height: 1px;
1753     padding-bottom: 1ex;
1754 }
1755 .cn_browse_item { padding: 2ex; }
1756 .results-paginator-list {
1757     [% IF rtl == 't' -%]
1758     padding-right: 1em;
1759     [% ELSE -%]
1760     padding-left: 1em;
1761     [% END -%]
1762 }
1763 .results-paginator-selected { color: [% css_colors.text_alert %]; }
1764 .inactive-hold { background: [% css_colors.accent_lightest %]; }
1765 .unread-patron-message { font-weight: bold; }
1766
1767 #hold-items-list td { padding: 5px; margin-bottom: 20px; }
1768 .hold-items-list-title { 
1769   font-size: [% css_fonts.size_bigger %];
1770   margin-bottom: 20px;
1771 }
1772 .hold-items-list-problem { color: [% css_colors.text_alert %]; }
1773
1774 .hold_success_links > span { margin: 0 2em; }
1775
1776 .radio-parts-selection { 
1777    width: 75%;
1778    margin-bottom: 20px;
1779 }
1780
1781 .parts-radio-option { 
1782   display: inline-block;
1783   width:15em;
1784 }
1785
1786 .mr_holds_no_formats { 
1787   [% IF rtl == 't' -%]
1788   margin-right: 25px;
1789   [% ELSE -%]
1790   margin-left: 25px;
1791   [% END -%]
1792   padding: 5px;
1793   font-size: 110%;
1794   font-weight: bold;
1795   color: [% css_colors.text_invert %]; 
1796   background: [% css_colors.primary %];
1797 }
1798  
1799 .holds_item_row_separator td {
1800   border-top: 2px dashed [% css_colors.accent_medium %];
1801 }
1802
1803 .big-strong {font-weight: bold; font-size: [% css_fonts.size_bigger %]; }
1804
1805 .results_header_btns, .results_header_sel {
1806     [% IF rtl == 't' -%]
1807     float: right;
1808     [% ELSE -%]
1809     float:left;
1810     [% END -%]
1811 }
1812
1813 /*
1814  * .various_containers a = shortcut to putting .opac-button on every 'a' with
1815  *     the tradeoff of increased stylesheet complexity (TODO: rethink?)
1816  */
1817
1818 .opac-multiline-button > a,
1819 .opac-button, .results_header_btns a, #simple-detail-view-links a, .dash_account_buttons a {
1820     color: [% css_colors.button_text %];
1821     font-weight: bold; 
1822     text-decoration: none;
1823     cursor: pointer !important;
1824     -moz-border-radius: 5px;
1825     border-radius: 5px;
1826     border: 1px solid [% css_colors.primary %];
1827     background:  [% css_colors.primary_fade %];
1828     margin: 0.5em;
1829     padding: 0.3em;
1830     display: inline-block;
1831 }
1832
1833 .opac-multiline-button > a:hover,
1834 .opac-button:hover, .results_header_btns a:hover, #simple-detail-view-links a:hover, #dash_wrapper a.opac-button:hover {
1835     background: [% css_colors.primary %];
1836 }
1837
1838 .opac-button:disabled {
1839     color: [% css_colors.accent_medium %];
1840     cursor: pointer !important;
1841     border: 1px solid [% css_colors.accent_light %];
1842     background-color: [% css_colors.accent_lighter %];
1843 }
1844
1845 /* Firefox adds its own special space to inputs; this gets us closer */
1846 button.opac-button::-moz-focus-inner, input.opac-button::-moz-focus-inner {
1847     padding: 0;
1848     border: 0;
1849 }
1850
1851 .opac-button-header, #dash_wrapper .opac-button {
1852     background: [% css_colors.control %];
1853     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
1854     font-size: [% css_fonts.size_base %];
1855 }
1856 a.opac-button-header:hover, #dash_wrapper a.opac-button:hover {
1857     border-color: [% css_colors.control %];
1858 }
1859
1860 .opac-multiline-button > a {
1861     display: inline-block;
1862 }
1863
1864 #myopac_checked_div {
1865     padding: 0px;
1866 }
1867
1868 .rdetail-mfhd-head {
1869     margin-top: 5px;
1870     padding-top: 5px;
1871     background-color: [% css_colors.table_heading %];
1872 }
1873
1874 .rdetail-mfhd-type {
1875     [% IF rtl == 't' -%]
1876     padding-right: 1em;
1877     [% ELSE -%]
1878     padding-left: 1em;
1879     [% END -%]
1880 }
1881
1882 .rdetail-mfhd-bottom {
1883     border-bottom: thin solid [% css_colors.border_dark %];
1884     width: 100%;
1885 }
1886
1887 #rdetail_record_details {
1888     clear: both;
1889     margin-top: 1em;
1890 }
1891
1892 .rdetail_content {
1893     [% IF rtl == 't' -%]
1894     margin-right: 1.5em;
1895     padding-right: 1.5em;
1896     [% ELSE -%]
1897     margin-left: 1.5em;
1898     padding-left: 1.5em;
1899     [% END -%]
1900 }
1901
1902 .rdetail_content_type, .rdetail_subject_type {
1903     vertical-align: top;
1904     font-weight: bold;
1905 }
1906
1907 .bookbag-item-row td { vertical-align: top; }
1908
1909 .error { color: [% css_colors.text_alert %]; font-weight: bold; }
1910 .success {
1911     color: [% css_colors.text_greatnews %];
1912     font-weight: bold;
1913 }
1914
1915 .rdetail_related_subjects {
1916     margin-top: 1.5em;
1917 }
1918
1919 .rdetail_related_series {
1920     margin-top: 1.5em;
1921 }
1922
1923 #rdetail_openurl {
1924     margin-top: 1em;
1925 }
1926
1927 .rdetail_openurl_entry {
1928     [% IF rtl == 't' -%]
1929     margin-right: 1em;
1930     padding-right: 1em;
1931     [% ELSE -%]
1932     margin-left: 1em;
1933     padding-left: 1em;
1934     [% END -%]
1935 }
1936 .bookbag-controls-holder { width: 100%; }
1937 .bookbag-controls-holder:nth-child(odd) { background-color: [% css_colors.accent_lighter2 %]; }
1938 .bookbag-controls-holder:nth-child(even) { background-color: [% css_colors.accent_lightest %]; }
1939 .bookbag-controls-holder .most {
1940     [% IF rtl == 't' -%]
1941     padding-right: 0;
1942     margin-left: 5em;
1943     [% ELSE -%]
1944     padding-left: 0;
1945     margin-right: 5em;
1946     [% END -%]
1947 }
1948 .bookbag-controls-title-block {
1949     float:left;
1950     width:40%;
1951 }
1952 .bookbag-controls-button-block {
1953     float:left;
1954     width:50%;
1955 }
1956 h2.bookbag-name { margin-bottom: 0em; padding-bottom: 0em; }
1957 .bookbag-share .fixed { min-width: 4em; }
1958 .bookbag-specific {
1959     [% IF rtl == 't' -%]
1960     margin-right: 1em;
1961     [% ELSE -%]
1962     margin-left: 1em;
1963     [% END -%]
1964 }
1965 .bookbag-specific div.sort {
1966     [% IF rtl == 't' -%]
1967     float: right;
1968     text-align: right;
1969     margin-right: 15px;
1970     [% ELSE -%]
1971     float: left;
1972     text-align: left;
1973     margin-left: 15px;
1974     [% END -%]
1975     width: 40%;
1976 }
1977 .bookbag-specific div.meta {
1978     [% IF rtl == 't' -%]
1979     float: left;
1980     text-align: left;
1981     [% ELSE -%]
1982     float: right;
1983     text-align: right;
1984     [% END -%]
1985     width: 54%;
1986     border: 1px solid [% css_colors.accent_light %];
1987     padding: 5px;
1988     margin-top: 5px;
1989 }
1990 #bbag-name-desc-form tr th { vertical-align: middle; }
1991 #bbag-name-desc-form .saver { vertical-align: middle; text-align: center; }
1992 .bookbag-description {
1993     padding-top: 0em;
1994     font-style: italic;
1995     max-width: 40em;
1996 }
1997 .bbag-edit-desc-label {
1998     float:left;
1999     width:8em;
2000 }
2001 .bbag-edit-desc-save {
2002     clear:both;
2003     margin-bottom:10px;
2004 }
2005 #bbag-edit-description { width: 20em; float:left;}
2006 #bbag-edit-name { width: 20em; float: left; }
2007 .bbag-action {
2008     margin-left: 15px;
2009 }
2010 .bbag-navigate-list {
2011     padding-left: 32px;
2012     float:left;
2013 }
2014 .bbag-navigate-list-pages {
2015     padding-left: 10px;
2016     float:left;
2017 }
2018 textarea { font-family: sans-serif; }
2019 table.bookbag-specific {
2020     border-right: 1px solid [% css_colors.accent_dark %];
2021     border-bottom: 1px solid [% css_colors.accent_medium %];
2022     margin-bottom: 2ex;
2023 }
2024 .bookbag-share {
2025     [% IF rtl == 't' -%]
2026     float: right;
2027     padding: 0px 10px 0px 0px;
2028     [% ELSE -%]
2029     float: left;
2030     padding: 0px 0px 0px 10px;
2031     [% END -%]
2032 }
2033 .bookbag-share .fixed { min-width: 6em; }
2034 .bookbag-controls {
2035     [% IF rtl == 't' -%]
2036     float: right;
2037     padding: 0px 10px 0px 0px;
2038     [% ELSE -%]
2039     float: left;
2040     padding: 0px 0px 0px 10px;
2041     [% END -%]
2042 }
2043 .bookbag-specific td.list_checkbox {
2044     [% IF rtl == 't' -%]
2045     padding-right: 10px !important;
2046     [% ELSE -%]
2047     padding-left: 10px !important;
2048     [% END -%]
2049 }
2050 .bookbag-specific td.list_entry {
2051     min-width: 10em;
2052     [% IF rtl == 't' -%]
2053     padding-right: 5px !important;
2054     [% ELSE -%]
2055     padding-left: 5px !important;
2056     [% END -%]
2057 }
2058 .bookbag-specific td.list_actions {
2059     white-space: nowrap !important;
2060 }
2061 .bookbag-paginator-selected { color: [% css_colors.text_alert %]; }
2062
2063 .list_is_empty {
2064     padding: 8px 0px 6px 0px;
2065     width: 100%;
2066     border: 0;
2067     font-size: [% css_fonts.size_bigger %];
2068     text-align: center;
2069     font-style: italic;
2070 }
2071 .save-notes { padding-bottom: 1.5ex; }
2072
2073 .nonbreaking-wrapper {
2074     display: inline-block;
2075 }
2076
2077 /* Moved from semiauto.css */
2078 .adv_global_input_container {
2079     border-bottom: none;
2080     clear: both;
2081 }
2082 .opac-auto-013 {
2083     border-bottom: none;
2084     *height: 0px;
2085 }
2086 .adv_global_filter_sort {
2087     border: none;
2088     width: 100%;
2089 }
2090 .clear-both { clear: both; }
2091 .common-no-pad {
2092     clear: both;
2093     height: 0px;
2094     margin: 0px;
2095     padding: 0px;
2096 }
2097 .common-full-pad {
2098     clear: both;
2099     height: 15px;
2100 }
2101 .alert { color: [% css_colors.text_alert %]; }
2102 .float-left {
2103     [% IF rtl == 't' -%]
2104     float: right;
2105     [% ELSE -%]
2106     float: left;
2107     [% END -%]
2108 }
2109 .float-right {
2110     [% IF rtl == 't' -%]
2111     float: left;
2112     [% ELSE -%]
2113     float: right;
2114     [% END -%]
2115 }
2116
2117 .saved-searches-header { width: 100%; font-weight: bold; font-size: [% css_fonts.size_bigger %]; }
2118 .saved-searches-header .button {
2119     [% IF rtl == 't' -%]
2120     float: left;
2121     [% ELSE -%]
2122     float: right;
2123     width: 28px;
2124     [% END -%]
2125 }
2126 .saved-searches-header .text {
2127     [% IF rtl == 't' -%]
2128     float: right;
2129     padding-left: 1em;
2130     [% ELSE -%]
2131     float: left;
2132     padding-right: 1em;
2133     [% END -%]
2134     margin: 0.5ex 0;
2135 }
2136 .saved-searches-header {font-weight: bold; font-size: [% css_fonts.size_bigger %]; }
2137 .saved-searches { border-bottom: 1px solid [% css_colors.accent_medium %]; padding-right: 1em; }
2138 #staff-saved-search { /* wraps .saved-searches-header and .saved-searches on the record page */
2139     [% IF rtl == 't' -%]
2140     border-left: 1px solid [% css_colors.accent_darker %];
2141     [% ELSE -%]
2142     border-right: 1px solid [% css_colors.accent_darker %];
2143     [% END -%]
2144 }
2145 .result_item_circulated {
2146     padding-top: 4px;
2147 }
2148
2149 .result_item_circulated span {
2150     position: relative;
2151     top:-3px;
2152     [% IF rtl == 't' -%]
2153     right: 3px;
2154     [% ELSE -%]
2155     left:3px;
2156     [% END -%]
2157 }
2158
2159 #search-only-bookbag-container { margin: 2ex 0; font-weight: bold; }
2160 #result-bookbag-heading { text-align: center; margin: 2ex; }
2161
2162 .result-bookbag-name { font-size: [% css_fonts.size_bigger %]; font-weight: bold; }
2163 .result-bookbag-description { font-size: [% css_fonts.size_bigger %]; font-style: italic; }
2164 .result-bookbag-item-note { font-style: italic; }
2165 .lowhits-bookbag-name { font-weight: bold; }
2166 .oils_AS { font-weight: bold; color: [% css_colors.text_match %]; }
2167 .oils_AS_match_term {
2168     [% IF rtl == 't' -%]
2169     text-align: right;
2170     [% ELSE -%]
2171     text-align: left;
2172     [% END -%]
2173     color: [% css_colors.text %];
2174 }
2175 .oils_AS_match_field {
2176     font-size: [% css_fonts.size_smallest %]; padding: 0.65em 0;
2177     [% IF rtl == 't' -%]
2178     text-align: left;
2179     [% ELSE -%]
2180     text-align: right;
2181     [% END -%]
2182     color: [% css_colors.accent_medium %];
2183 }
2184 table.result_holdings_table {
2185     margin-top: 1em;
2186     margin-bottom: 1em;
2187 }
2188 table.result_holdings_table thead tr {
2189     background: [% css_colors.table_heading %];
2190 }
2191 table.result_holdings_table thead tr th {
2192     font-weight: bold;
2193 }
2194 span.preflib {
2195     margin: 0 2em 0 2em;
2196 }
2197 a.preflib_change {
2198   vertical-align: super;
2199   font-size: [% css_fonts.size_smaller %];
2200   line-height: normal;
2201   text-decoration: none;
2202 }
2203 .rdetail-holding-group {
2204     [% IF rtl == 't' -%]
2205     margin-right: 1.5em;
2206     [% ELSE -%]
2207     margin-left: 1.5em;
2208     [% END -%]
2209 }
2210 .rdetail-holding-group span {
2211     [% IF rtl == 't' -%]
2212     margin-right: 1.5em;
2213     [% ELSE -%]
2214     margin-left: 1.5em;
2215     [% END -%]
2216 }
2217 .rdetail-holding-group .paging {
2218     [% IF rtl == 't' -%]
2219     margin-right: 1.5em;
2220     [% ELSE -%]
2221     margin-left: 1.5em;
2222     [% END -%]
2223 }
2224 #rdetail_deleted_exp {
2225     font-weight: bold;
2226     padding: 1em;
2227     margin: 1em;
2228     border: thick solid [% css_colors.border_alert %];
2229 }
2230
2231 #ac_tab_wrapper { width : 100%; }
2232 .ac_tab {
2233     [% IF rtl == 't' -%]
2234     float: right;
2235     padding-left: 10px;
2236     [% ELSE -%]
2237     float: left;
2238     padding-right: 10px;
2239     [% END -%]
2240     font-size: [% css_fonts.size_big %];
2241     padding: 5px;
2242     border: 1px solid [% css_colors.primary_offset %];
2243 }
2244 .ac_tab_selected { background-color: [% css_colors.primary_offset %]; }
2245 .ac_tab_selected a { color: [% css_colors.text_invert %]; }
2246 #ac_content { clear: both; width: 100%; margin-top: 10px; }
2247
2248 /* Popmenu styles used for making css menus. */
2249 .popmenu {
2250     margin: 0;
2251     padding: 0;
2252 }
2253 .popmenu li {
2254     list-style: none;
2255 }
2256 .popmenu li a {
2257     display: block;
2258     padding: 3px 5px;
2259 }
2260 .popmenu li ul {
2261     display: none; 
2262     width: 10em; /* Width to help Opera out */
2263     background-color: [% css_colors.primary %];
2264 }
2265 .popmenu li:hover ul {
2266     display: block;
2267     position: absolute;
2268     margin: 0;
2269     padding: 0;
2270     border-color: [% css_colors.border_dark %];
2271     border-width: 1px;
2272     border-style: solid;
2273 }
2274 .popmenu li:hover li {
2275     float: none;
2276 }
2277 .popmenu li:hover li a {
2278     background-color: [% css_colors.primary %]; 
2279     color: [% css_colors.accent_ultralight %];
2280 }
2281 .popmenu li li a:hover {
2282     background-color: [% css_colors.accent_ultralight %]; 
2283     color: [% css_colors.primary %];
2284 }
2285 /* Styles for the temporary list entry. */
2286 .popmenu li:hover li[class~="temporary"] a {
2287     background-color: [% css_colors.primary %]; 
2288     color: [% css_colors.accent_ultralight %];
2289 }
2290 .popmenu li li[class~="temporary"] a:hover {
2291     background-color: [% css_colors.accent_ultralight %]; 
2292     color: [% css_colors.primary %];
2293 }
2294 /* Styles for the default list entry. */
2295 .popmenu li:hover li[class~="default"] a {
2296     background-color: [% css_colors.primary %]; 
2297     color: [% css_colors.accent_ultralight %];
2298 }
2299 .popmenu li li[class~="default"] a:hover {
2300     background-color: [% css_colors.accent_ultralight %]; 
2301     color: [% css_colors.primary %];
2302 }
2303 /* Styles for the new list entry. */
2304 .popmenu li:hover li[class~="new"] a {
2305     background-color: [% css_colors.primary %]; 
2306     color: [% css_colors.accent_ultralight %];
2307 }
2308 .popmenu li li[class~="new"] a:hover {
2309     background-color: [% css_colors.accent_ultralight %]; 
2310     color: [% css_colors.primary %];
2311 }
2312 /* Style to add a divider on the menu. */
2313 .popmenu li li[class~="divider"] {
2314     border-bottom-width: 1px;
2315     border-bottom-color: [% css_colors.border_dark %];
2316     border-bottom-style: solid;
2317 }
2318     
2319 #locale_picker_form {
2320     [% IF rtl == 't' -%]
2321     float: left;
2322     border-left: thin [% css_colors.control %] solid;
2323     [% ELSE -%]
2324     float: right;
2325     border-right: thin [% css_colors.control %] solid;
2326     [% END -%]
2327     padding: 0.5em;
2328     margin-top: 2em;
2329 }
2330
2331 #locale_picker_form * {
2332     margin: 0;
2333     padding: 0;
2334     vertical-align: middle;
2335 }
2336
2337 #patron_usr_barcode_not_found {
2338     font-weight: bold; color: [% css_colors.text_alert %];
2339 }
2340
2341 .record_title {
2342     font-weight: bold;
2343 }
2344
2345 .record_author {
2346     font-style: italic;
2347 }
2348
2349 .password_message {
2350     padding-top: 1em;
2351     padding-bottom: 0.5em;
2352         font-style: italic;
2353 }
2354
2355 #maintenance_message {
2356     padding: 5px;
2357     width: 100%;
2358     background-color: [% css_colors.text_alert %];
2359     color: [% css_colors.text_invert %];
2360     text-align: center;
2361 }
2362
2363 #search-box > span {
2364     margin: 0 1em;
2365 }
2366 .browse-error {
2367     font-weight: bold;
2368     font-color: #c00;
2369 }
2370 .browse-result-sources, .browse-result-authority-bib-links {
2371     [% IF rtl == 't' -%]
2372     margin-right: 1em;
2373     [% ELSE -%]
2374     margin-left: 1em;
2375     [% END -%]
2376 }
2377 .browse-result-best-match {
2378     font-weight: bold;
2379 }
2380 .browse-pager {
2381     margin: 2ex 0;
2382 }
2383 .browse-result-list {
2384     padding-bottom: 0.5ex;
2385 }
2386 .browse-shortcuts {
2387     font-size: [% css_fonts.size_bigger %];
2388 }
2389 .browse-result-authority-field-name {
2390     font-style: italic;
2391     [% IF rtl == 't' -%]
2392     margin-left: 1em;
2393     [% ELSE -%]
2394     margin-right: 1em;
2395     [% END -%]
2396 }
2397 .browse-leading-article-warning {
2398     font-style: italic;
2399     font-size: [% css_fonts.size_big %];
2400 }
2401 .browse-public-general-note {
2402     font-size: [% css_fonts.size_big %];
2403 }
2404 .browse-public-general-note-label { }
2405 .browse-public-general-note-institution {
2406     font-style: normal;
2407     font-weight: bold;
2408 }
2409 .browse-public-general-note-body {
2410     font-style: italic;
2411 }
2412
2413 .bib_peer_type {
2414     font-weight: bold;
2415 }
2416
2417 #main-content-register {
2418     [% IF rtl == 't' -%]
2419     margin-right: 40px;
2420     [% ELSE -%]
2421     margin-left: 40px;
2422     [% END -%]
2423     font-size: [% css_fonts.size_bigger %];
2424 }
2425
2426 #main-content-register table { 
2427     padding: 20px; 
2428     margin-top: 18px; 
2429     border-collapse: collapse;
2430 }
2431
2432 #main-content-register td {
2433     [% IF rtl == 't' -%]
2434     text-align: right;
2435     [% ELSE -%]
2436     text-align: left;
2437     [% END -%]
2438 }
2439
2440 #main-content-register td:not(:first-child) {
2441     [% IF rtl == 't' -%]
2442     padding-right: 20px;
2443     [% ELSE -%]
2444     padding-left: 20px;
2445     [% END -%]
2446 }
2447
2448 .patron-reg-invalid {
2449     font-weight: bold;
2450     color: red;
2451     [% IF rtl == 't' -%]
2452     padding-left: 10px;
2453     [% ELSE -%]
2454     padding-right: 10px;
2455     [% END -%]
2456 }
2457
2458 .result_footer_nav1 {
2459     clear: both;
2460 }
2461
2462 .small_view_only, #filter_hits, #refine_hits, #return_to_hits {
2463     display: none;
2464 }
2465
2466 .rdetail_authors_div {
2467     margin-bottom: 1em;
2468 }
2469
2470 #search_query_label, #search_qtype_label, #search_itype_label, #search_locg_label {
2471     white-space: nowrap;
2472     display: inline-block;
2473 }
2474
2475 .result_table_title_cell {
2476     padding-top: 4px;
2477     padding-bottom: 4px;
2478 }
2479
2480 .record_title {
2481     font-size: [% css_fonts.size_bigger %];
2482 }
2483
2484 /* styling for sms text call number */
2485 .sms_text pre {
2486     font-family: Arial, Helvetica, sans-serif;
2487     font-size: [% css_fonts.size_medium %];
2488     background: [% css_colors.accent_lightest %];
2489     padding: .5%;
2490     /* Allow text to wrap */
2491     white-space: pre-wrap;       /* css-3 */
2492     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
2493     white-space: -pre-wrap;      /* Opera 4-6 */
2494     white-space: -o-pre-wrap;    /* Opera 7 */
2495     word-wrap: break-word;       /* Internet Explorer 5.5+ */
2496 }
2497
2498 .mobile_view {
2499    display:none;
2500 }
2501
2502 /* patron message center */
2503 #myopac_message_tbody {
2504     vertical-align: top;
2505 }
2506 .myopac_message_message {
2507     white-space: pre-wrap;
2508 }
2509
2510 @media only screen and (max-width: 800px) {
2511     .facet_sidebar_hidden, .result_block_hidden {
2512         display: none;
2513     }
2514     .facet_sidebar_visible, .result_block_visible {
2515         display: inline ! important;
2516     }
2517     #acct_select, #acct_prefs_select {
2518         display: inline-block;
2519     }
2520     #acct_tabs, #acct_prefs_tabs {
2521          display:none;
2522      }
2523     .radio-parts-selection { width: 90%; }
2524     #list_description, #list_create_name {
2525         width: 300px;
2526     }
2527 }
2528
2529 @media only screen and (max-width: 600px) {
2530     input, select {
2531         font-size: [% css_fonts.size_big %];
2532     }
2533     span .nav_arrow_fix {
2534         display: none;
2535     }
2536     #header {
2537         padding: 0px;
2538         margin: 0px;
2539     }
2540     #homesearch_main_logo img {
2541         width:75%;
2542     }
2543     #format_selector {
2544         display:none;
2545     }
2546     #your-acct-login {
2547         padding: 0px;
2548         padding-top: 5px;
2549     }
2550     #your-acct-login a {
2551         margin: 0px;
2552         padding: 5px;
2553     }
2554     #topnav_logo {
2555         margin: 0;
2556     }
2557     #topnav_logo img {
2558         width: 200px;
2559     }
2560     #locale_picker_form {
2561         display: none;
2562     }
2563     #gold-links-holder {
2564         display: none;
2565     }
2566     #simple-detail-view-links {
2567         display: none;
2568     }
2569     #acct_tabs a, #acct_fines_tabs a {
2570        [% IF rtl == 't' -%]
2571        -moz-border-radius: 6px 0px 0px 6px;
2572        border-radius: 6px 0px 0px 6px;
2573        margin: 0px 0px 0px 5px;
2574        [% ELSE -%]
2575        -moz-border-radius: 6px 6px 0px 0px;
2576        border-radius: 6px 6px 0px 0px;
2577        margin: 0px 5px 0px 0px;
2578        [% END -%]
2579        padding: 2px 4px 3px 4px;
2580        font-size: [% css_fonts.size_base %];
2581     }
2582     .bookbag-controls-title-block {
2583         clear:left;
2584         width:90%;
2585     }
2586     .bookbag-controls-button-block {
2587         clear:left;
2588         width;90%;
2589     }
2590     .bookbag-specific {
2591         margin-left: 0px;
2592     }
2593     .bookbag-specific div.sort {
2594         float: left;
2595         width: 95%;
2596         margin: 5px 0px 5px 0px;
2597         text-align: left;
2598         border: 1px #ccc solid;
2599         padding:5px;
2600     }
2601     .bookbag-specific div.meta {
2602         float: left;
2603         width: 95%;
2604         margin-left:0px;
2605         margin-bottom:5px;
2606         padding:5px;
2607         text-align: left;
2608     }
2609     #bbag-edit-name {
2610         float: left;
2611         width: 220px;
2612     }
2613     #bbag-edit-description {
2614         width: 220px;
2615         margin-top:5px;
2616     }
2617     .bbag-content {
2618         padding:5px;
2619         border:1px #ccc solid;
2620     }
2621     .bbag-action {
2622         margin-left:0px;
2623         margin-bottom:5px;
2624     }
2625     .bbag-action-field {
2626         width:230px;
2627     }
2628     .bookbag-specific div.sort select {
2629         width:180px;
2630     }
2631     .bookbag-specific td.list_checkbox {
2632         padding-left: 0px !important;
2633     }
2634     .bookbag-specific td.list_entry {
2635         min-width: 5em;
2636         padding-left: 5px !important;
2637     }
2638     .bbag-navigate-list {
2639         display: none;
2640     }
2641     .bbag-navigate-list-pages {
2642         text-align:right;
2643         float:right;
2644     }
2645     #dash_wrapper div {
2646         background: transparent;
2647         padding: 0px;
2648     }
2649     #dash_wrapper {
2650         position: static;
2651         top: auto;
2652     }
2653     #dash_wrapper .opac-button {
2654         top: 0px;
2655     }
2656     .small_view_only, #filter_hits {
2657         display: inline !important;
2658     }
2659     #dash_identity a {
2660         [% IF rtl == 't' -%]
2661         float:right;
2662         [% ELSE -%]
2663         float:left;
2664         [% END -%]
2665     }
2666     #dashboard, #dashboard_e {
2667         display: none;
2668     }
2669     #holds_box form blockquote {
2670         [% IF rtl == 't' -%]
2671         margin-right: 10px;
2672         margin-left: 2px;
2673         [% ELSE -%]
2674         margin-left: 10px;
2675         margin-right: 2px;
2676         [% END -%]
2677     }
2678     #holds_box form blockquote select {
2679         width: 100%;
2680     }
2681     #myopac_sum_fines_placehold {
2682         display:none;
2683     }
2684     #myopac_sum_fines {
2685         display: none;
2686     }
2687     #list_description, #list_create_name {
2688         width: 170px;
2689     }
2690     .results_header_lbl {
2691         display: none;
2692     }
2693     .results_header_nav1 span.h1 {
2694         display: none;
2695     }
2696     .preflib {
2697         display: none;
2698     }
2699     .start_end_links_span {
2700         display: block;
2701     }
2702     .invisible {
2703         display: none;
2704     }
2705     .result_table_pic_header {
2706         [% IF rtl == 't' -%]
2707         padding-right: 0px !important;
2708         padding-left: 5px;
2709         [% ELSE -%]
2710         padding-left: 0px !important;
2711         padding-right: 5px;
2712         [% END -%]
2713         width: 0px !important;
2714         margin: 0px;
2715     }
2716     .result_table_pic {
2717         width: 55px;
2718         padding: 0px;
2719         margin: 0px;
2720     }
2721     tr[name=results_isbn_tr], tr[name=results_phys_desc_tr], tr[name=results_pub_tr] strong, .result_count {
2722          display: none;
2723     }
2724     tr.result_table_title_cell[name=bib_cn_list] .result_holdings_table th:nth-child(4),
2725     tr.result_table_title_cell[name=bib_cn_list] .result_holdings_table td:nth-child(4) {
2726         display:none;
2727     }
2728     .results_info_table td {
2729         padding: 0px;
2730     }
2731     #results_header_bar {
2732         background-color: inherit;
2733     }
2734     .results_header_btns a {
2735         margin: 0.3em;
2736     }
2737     .adv_filter_results_hide {
2738         display: none;
2739     }
2740     .adv_filter_results_show {
2741         display: block;
2742     }
2743     .adv_filter_results_block_label {
2744         display: block;
2745     }
2746     .adv_filter_results_group_wrapper {
2747         display: block;
2748     }
2749     #main-content {
2750         margin: 0 1px;
2751     }
2752     #rdetails_status thead {
2753         display: none;
2754     }
2755     #rdetails_status tr {
2756         display: block;
2757         margin-top: 3px;
2758     }
2759     #rdetails_status td {
2760         display: block;
2761         padding: 1px;
2762     }
2763     .copy_details_row {
2764         background-color: [% css_colors.accent_lightest %];
2765     }
2766     .copy_details_offers_row {
2767         background-color: [% css_colors.accent_lightest %];
2768     }
2769     select#pickup_lib.search-wrapper-locg {
2770         width: 100%;
2771     }
2772     #search-wrapper #search-box {
2773         width: 85%;
2774         padding-top: 5px;
2775     }
2776     #main-content-home {
2777         padding: 0px;
2778         margin: 0px;
2779     }
2780     /* Make use of full width in mobile mode */
2781     .facet_box_wrapper .box_wrapper .box,
2782     .facet_template .facet,
2783     .facet_box_temp {
2784         width: inherit;
2785     }
2786     .facet_template .count {
2787         [% IF rtl == 't' -%]
2788         padding-right: 1em;
2789         [% ELSE -%]
2790         padding-left: 1em;
2791         [% END -%]
2792     }
2793     #facet_sidebar {
2794         margin-top: 0.5em;
2795     }
2796     #adv_search_parent {
2797         font-size: [% css_fonts.size_smaller %];
2798     }
2799     #adv_search_filters {                                                                                                                             
2800         position: relative;                                                                                                                           
2801         width: 300px;
2802     }
2803     #format_actions {
2804         [% IF rtl == 't' -%]
2805         float: right;
2806         [% ELSE -%]
2807         float: left;
2808         [% END -%]
2809     }
2810     .rdetail_aux_utils {
2811         padding: 0px;
2812         border: none;
2813     }
2814     .result_metadata {
2815         width: inherit;
2816     }
2817     div#rdetail_actions_div {
2818         float: none;
2819     }
2820     h2.rdetail_uris {
2821         clear: both;
2822     }
2823     #metarecord_population {
2824         overflow: hidden;
2825         width: 100%;
2826     }
2827     .metarecord_population_span_link {
2828     }
2829     .metarecord_population_item_lang {
2830         float: none;
2831     }
2832     .search_catalog_lbl {
2833         [% IF rtl == 't' -%]
2834         margin-right: 0;
2835         [% ELSE -%]
2836         margin-left: 0;
2837         [% END -%]
2838         white-space: nowrap;
2839     }
2840     .adv_search_catalog_lbl { 
2841         margin-top: 0;
2842         white-space: nowrap;
2843     }
2844     .browse_the_catalog_lbl {
2845         white-space: nowrap;
2846     }
2847     .mobile_hide {
2848         display: none;
2849     } 
2850     #dash_user {
2851         display: block;
2852         padding: 0.5em;
2853     }
2854     .dash_divider {
2855         display: none;
2856     }
2857     .dash_account_buttons {
2858         display: block;
2859     } 
2860     .searchbar { line-height: 1.5em; }
2861     #browse-controls { line-height: 1.5em; }
2862     #search_query_label, #search_qtype_label, #search_itype_label, #search_locg_label {
2863         display: block;
2864     }
2865     .bookshelf td {
2866         display: block;
2867         width: 100%;
2868     }
2869     .bookshelf table thead tr {
2870         display: block;
2871     }
2872     #lowhits_help { width: inherit; }
2873     #adv_search_tabs a{                                                                                                                           
2874         font-size: [% css_fonts.size_small %];
2875         margin: 2px 2px 0px 2px;
2876         padding: 2px 2px 5px 2px; 
2877         -moz-border-radius: 10px 0px 0px 0px;
2878         [% IF rtl == 't' -%]
2879         border-radius: 7px 0px 0px 7px;
2880         [% ELSE -%]
2881         border-radius: 7px 7px 0px 0px;
2882         [% END -%]
2883     }
2884     #adv_global_tbody td {
2885         border-bottom: thin solid [% css_colors.accent_light %];
2886     }
2887     #adv_global_addrow td {
2888         border-bottom: none;
2889     }
2890         /* Force table to not be like tables anymore */
2891         table#acct_checked_main_header thead tr th, table#acct_holds_main_header thead tr th, table#acct_checked_hist_header thead tr th, table#acct_holds_hist_header thead tr th, table#ebook_circs_main_table thead tr th, table#ebook_holds_main_table thead tr th {
2892                 display: block;
2893         }
2894         table#acct_checked_main_header tbody tr td, table#acct_holds_main_header tbody tr td, table#acct_checked_hist_header tbody tr td, table#acct_holds_hist_header tbody tr td, table#ebook_circs_main_table tbody tr td, table#ebook_holds_main_table tbody tr td {
2895                 display: block;
2896         }
2897
2898         /* Hide table headers (but not display: none;, for accessibility) */
2899         thead tr {
2900                 position: absolute;
2901                 top: -9999px;
2902                 [% IF rtl == 't' -%]
2903                 right: -9999px;
2904                 [% ELSE -%]
2905                 left: -9999px;
2906                 [% END -%]
2907         }
2908
2909         table#acct_checked_main_header, table#acct_holds_main_header, table#acct_checked_hist_header, table#acct_holds_hist_header, table#ebook_circs_main_table, table#ebook_holds_main_table {
2910                 width: 90%;
2911         }
2912
2913         table#acct_checked_main_header tr, table#acct_holds_main_header tr, table#acct_checked_hist_header tr { border: 1px solid #ddd; }
2914
2915         /* Holds history gets large white border to mimic header cell on other
2916            account screens that provide visual cue for next title. We should do
2917            the same for ebook tables too since we have no actions on those
2918            tables. If actions get added, we should move those tables out of
2919            here. */
2920
2921         table#acct_holds_hist_header tr, table#ebook_circs_main_table tr, table#ebook_holds_main_table tr { border-top: 25px solid #fff; }
2922
2923
2924         table#acct_checked_main_header td, table#acct_holds_main_header td, table#acct_checked_hist_header td, table#acct_holds_hist_header td, table#ebook_circs_main_table td, table#ebook_holds_main_table td {
2925                 /* Behave  like a "row" */
2926                 border: none;
2927                 border-bottom: 1px solid #eee;
2928                 position: relative;
2929                 [% IF rtl == 't' -%]
2930                 padding-right: 40%;
2931                 [% ELSE -%]
2932                 padding-left: 40%;
2933                 [% END -%]
2934         }
2935
2936          table#acct_checked_main_header td:before, table#acct_holds_main_header td:before, table#acct_checked_hist_header td:before, table#acct_holds_hist_header td:before, table#ebook_circs_main_table td:before, table#ebook_holds_main_table td:before {
2937                 /* Now like a table header */
2938                 position: absolute;
2939                 /* Top/left values mimic padding */
2940                 top: 2px;
2941                 width: 40%;
2942                 [% IF rtl == 't' -%]
2943                 right: 2px;
2944                 padding-left: 10px;
2945                 [% ELSE -%]
2946                 left: 2px;
2947                 padding-right: 10px;
2948                 [% END -%]
2949                 white-space: nowrap;
2950         }
2951
2952         table#acct_checked_main_header td:nth-of-type(1) { border-top: 5px solid #aaa; padding-top: 15px; background-color: #fff;}
2953         table#acct_checked_main_header td:nth-of-type(2):before { content: "[% l('Title') %]";}
2954         table#acct_checked_main_header td:nth-of-type(3):before { content: "[% l('Author') %]"; }
2955         table#acct_checked_main_header td:nth-of-type(4):before { content: "[% l('Renewals Left') %]"; }
2956         table#acct_checked_main_header td:nth-of-type(5):before { content: "[% l('Due Date') %]"; }
2957         table#acct_checked_main_header td:nth-of-type(6):before { content: "[% l('Barcode') %]"; }
2958         table#acct_checked_main_header td:nth-of-type(7):before { content: "[% l('Call number') %]"; }
2959
2960      table#acct_checked_hist_header td:nth-of-type(1) { border-top: 5px solid #aaa; padding-top: 15px; background-color: #fff;}
2961         table#acct_checked_hist_header td:nth-of-type(2):before { content: "[% l('Title') %]";}
2962         table#acct_checked_hist_header td:nth-of-type(3):before { content: "[% l('Author') %]"; }
2963         table#acct_checked_hist_header td:nth-of-type(4):before { content: "[% l('Checkout Date') %]"; }
2964         table#acct_checked_hist_header td:nth-of-type(5):before { content: "[% l('Due Date') %]"; }
2965         table#acct_checked_hist_header td:nth-of-type(6):before { content: "[% l('Date Returned') %]"; }
2966         table#acct_checked_hist_header td:nth-of-type(7):before { content: "[% l('Barcode') %]"; }
2967         table#acct_checked_hist_header td:nth-of-type(8):before { content: "[% l('Call number') %]"; }
2968
2969         table#acct_holds_main_header td:nth-of-type(1) { border-top: 5px solid #aaa; padding-top: 15px; background-color: #fff;}
2970         table#acct_holds_main_header td:nth-of-type(2):before { content: "[% l('Title') %]";}
2971         table#acct_holds_main_header td:nth-of-type(3):before { content: "[% l('Author') %]"; }
2972         table#acct_holds_main_header td:nth-of-type(4):before { content: "[% l('Format') %]"; }
2973         table#acct_holds_main_header td:nth-of-type(5):before { content: "[% l('Pickup Location') %]"; }
2974         table#acct_holds_main_header td:nth-of-type(6):before { content: "[% l('Cancel on') %]"; }
2975         table#acct_holds_main_header td:nth-of-type(7):before { content: "[% l('Status') %]"; }
2976         table#acct_holds_main_header td.hold_notes:before { content: "[% l('Notes') %]"; }
2977
2978         table#acct_holds_hist_header td:nth-of-type(1):before { content: "[% l('Title') %]";}
2979         table#acct_holds_hist_header td:nth-of-type(2):before { content: "[% l('Author') %]"; }
2980         table#acct_holds_hist_header td:nth-of-type(3):before { content: "[% l('Format') %]"; }
2981         table#acct_holds_hist_header td:nth-of-type(4):before { content: "[% l('Pickup Location') %]"; }
2982         table#acct_holds_hist_header td:nth-of-type(8):before { content: "[% l('Status') %]"; }
2983
2984         table#ebook_circs_main_table td:nth-of-type(1):before { content: "[% l('Title') %]"; }
2985         table#ebook_circs_main_table td:nth-of-type(2):before { content: "[% l('Author') %]"; }
2986         table#ebook_circs_main_table td:nth-of-type(3):before { content: "[% l('Due Date') %]"; }
2987         table#ebook_circs_main_table td:nth-of-type(4):before { content: "[% l('Actions') %]"; }
2988
2989         table#ebook_holds_main_table td:nth-of-type(1):before { content: "[% l('Title') %]"; }
2990         table#ebook_holds_main_table td:nth-of-type(2):before { content: "[% l('Author') %]"; }
2991         table#ebook_holds_main_table td:nth-of-type(3):before { content: "[% l('Due Date') %]"; }
2992         table#ebook_holds_main_table td:nth-of-type(4):before { content: "[% l('Actions') %]"; }
2993
2994
2995
2996        /*Want to see these in mobile ONLY */
2997        .mobile_view{
2998           display:block;
2999        }
3000
3001        .mobile_search_lbl_clr{
3002           color:[% css_colors.mobile_header_text %];
3003        }
3004 }
3005
3006
3007 /* 
3008 For text which is visible only to screen readers.
3009 Borrowed from http://getbootstrap.com/css/#helper-classes-screen-readers 
3010 See also http://webaim.org/techniques/css/invisiblecontent/
3011 */
3012 .sr-only {                                                                     
3013     position: absolute;                                                          
3014     width: 1px;                                                                  
3015     height: 1px;                                                                 
3016     padding: 0;                                                                  
3017     margin: -1px;                                                                
3018     overflow: hidden;                                                            
3019     clip: rect(0, 0, 0, 0);                                                      
3020     border: 0;                                                                   
3021 }
3022
3023 /* Make added rows in Expert Search have bold labels like the initial row */
3024 label[for*=expert_]
3025 {
3026     font-weight: bold;
3027 }  
3028
3029 .sort_deemphasize {
3030     font-weight: lighter;
3031     font-size: 70%;
3032 }
3033
3034 #results-page-depth-hint {
3035     text-align: center;
3036     font-style: italic;
3037 }
3038
3039 #clear-history-confirm {
3040   font-weight: bold;
3041   color: [% css_colors.text_badnews %]; 
3042   padding: 10px;
3043 }
3044
3045 /*Inline rules from other templates files*/
3046
3047 .td-left{
3048     [% IF rtl == 't' -%]
3049     text-align:right;
3050     [% ELSE -%]
3051     text-align:left;
3052     [% END -%]
3053     width:100%;
3054 }
3055 .td-search-left{
3056     [% IF rtl == 't' -%]
3057     text-align:right;
3058     [% ELSE -%]
3059     text-align:left;
3060     [% END -%]
3061 }
3062 #myopac_summary_div{padding:0px;}
3063 .div-left{
3064     [% IF rtl == 't' -%]
3065     float: right;
3066     [% ELSE -%]
3067     float: left;
3068     [% END -%]
3069 }
3070 .td-right{
3071     [% IF rtl == 't' -%]
3072     text-align:left;
3073     [% ELSE -%]
3074     text-align:right;
3075     [% END -%]
3076 }
3077 .login-form-left{
3078     [% IF rtl == 't' -%]
3079     float: right;
3080     margin-left: 40px;
3081     [% ELSE -%]
3082     float: left;
3083     margin-right: 40px;
3084     [% END -%]
3085     padding-bottom: 10px;
3086 }
3087 .hold-div{
3088     [% IF rtl == 't' -%]
3089     padding-right: 10px;
3090     [% ELSE -%]
3091     padding-left: 10px;
3092     [% END -%]
3093     padding-bottom: 15px;
3094 }
3095 .hold-span{font-weight: bold;}
3096 .padding-left-6{
3097     [% IF rtl == 't' -%]
3098     padding-right: 6px;
3099     [% ELSE -%]
3100     padding-left: 6px;
3101     [% END -%]
3102 }
3103 .padding-left-10{
3104     [% IF rtl == 't' -%]
3105     padding-right:10px;
3106     [% ELSE -%]
3107     padding-left:10px;
3108     [% END -%]
3109 }
3110 .padding-left-5{
3111     [% IF rtl == 't' -%]
3112     padding-right: 5px;
3113     [% ELSE -%]
3114     padding-left: 5px;
3115     [% END -%]
3116 }
3117
3118 /* Rules from metarecord_hold_filters.tt2 */
3119
3120 .metarecord_filters{
3121       padding: 5px;
3122       margin-top: 5px;
3123       border-bottom: 1px solid #333;
3124       border-top: 1px solid #333; }
3125 .metarecord_filter_container{
3126     [% IF rtl == 't' -%]
3127     float : right;
3128     margin-left: 10px;
3129     [% ELSE -%]
3130     float : left;
3131     margin-right: 10px;
3132     [% END -%]
3133 }
3134 .metarecord_filter_container select{padding: 2px;width: 13em; /* consistent w/ adv search selectors */}
3135 .metarecord_filter_header{padding-bottom: 5px;}