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