Bug 21516: (ALTERNATE) Request notes CSS bug makes them unreadable
[koha.git] / koha-tmpl / intranet-tmpl / prog / css / src / staff-global.scss
1 @import url("../../lib/yui/reset-fonts-grids.css") screen;
2
3 $font-main: Arial, Verdana, Helvetica, sans-serif;
4 $font-monospace: "Courier New", Courier, monospace;
5 $language-footer-min-height: 20px;
6
7 @mixin default-button {
8     background: linear-gradient(to bottom, #FFFFFF 0%, #F7F7F7 35%, #E0E0E0 100%);
9     border: 1px outset #999999;
10     border-left-color: #666;
11     border-top-color: #666;
12     color: #333333;
13     padding: .25em;
14 }
15
16 @mixin disabled-button {
17     background: #EEE none;
18     border: 1px solid #C0C0C0;
19     color: #999;
20 }
21
22 ::selection {
23     background: #538200;
24     color: #FFFFFF;
25 }
26
27 a {
28     &:link,
29     &:visited {
30         color: #004D99;
31         text-decoration: none;
32     }
33
34     &:hover,
35     &:active {
36         color: #538200;
37         text-decoration: none;
38     }
39
40     &:hover {
41         .term {
42             color: #FF9090;
43         }
44     }
45
46     &.btn {
47         &:link,
48         &:visited {
49             color: #333333;
50         }
51
52         &.btn-link {
53             &:link,
54             &:visited {
55                 color: #004D99;
56             }
57
58             &:hover {
59                 color: #538200;
60             }
61         }
62     }
63
64     &.cancel {
65         padding-left: 1em;
66     }
67
68     &.cartRemove {
69         color: #CC3333;
70         font-size: 90%;
71         margin: 0;
72         padding: 0;
73     }
74
75     &.close {
76         &:hover {
77             color: #538200;
78         }
79     }
80
81
82     &.csv {
83         background-image: url("../img/famfamfam/silk/page_white_excel.png");
84     }
85
86     &.dropdown-toggle {
87         white-space: nowrap;
88     }
89
90     &.incart {
91         color: #666;
92     }
93
94     &.popup {
95         background: transparent url("../img/pop-up-link.png") center right no-repeat;
96         padding-right: 15px;
97     }
98
99     &.disabled {
100         color: #999999;
101     }
102
103     &.document {
104         background-position: left middle;
105         background-repeat: no-repeat;
106         display: inline-block;
107         min-height: 20px;
108         padding-left: 20px;
109     }
110
111     &.highlight_toggle {
112         display: none;
113     }
114
115     .localimage {
116         img {
117             border: 1px solid #0000CC;
118             margin: 0 .5em;
119             padding: .3em;
120         }
121     }
122
123     &.pdf {
124         background-image: url("../img/famfamfam/silk/page_white_acrobat.png");
125     }
126
127     &.submit {
128         @include default-button;
129         display: inline-block;
130
131         &:active {
132             border: 1px inset #999999;
133         }
134
135         &:disabled {
136             @include disabled-button;
137         }
138     }
139
140     &.term {
141         text-decoration: underline;
142     }
143
144     &.xml {
145         background-image: url("../img/famfamfam/silk/page_white_code.png");
146     }
147
148 }
149
150 aside {
151     h5 {
152         font-size: 100%;
153         margin: .5em 0;
154     }
155
156     fieldset {
157         &.brief {
158             margin: 0;
159             padding: .4em .7em;
160
161             fieldset {
162                 margin: 0;
163                 padding: .5em 0;
164
165                 legend {
166                     font-size: 85%;
167                 }
168             }
169
170             li {
171                 &.checkbox {
172                     label {
173                         display: inline;
174                     }
175                 }
176
177                 &.dateinsert {
178                     label {
179                         display: inline;
180                     }
181
182                     span {
183                         &.label {
184                             display: inline;
185                         }
186                     }
187                 }
188
189                 &.radio {
190                     padding: .7em 0;
191
192                     input {
193                         padding: .3em 0;
194                     }
195
196                     label {
197                         display: inline;
198                     }
199
200                     span {
201                         &.label {
202                             display: inline;
203                         }
204                     }
205                 }
206             }
207
208             ol {
209                 font-size: 85%;
210                 margin: 0;
211                 padding: 0;
212             }
213
214             select,
215             [type="text"] {
216                 width: 100%;
217             }
218         }
219     }
220 }
221
222 button {
223     @include default-button;
224
225     &:active {
226         border: 1px inset #999999;
227     }
228
229     &:disabled {
230         @include disabled-button;
231     }
232
233     &.closebtn {
234         background: transparent;
235         border: 0;
236         cursor: pointer;
237         padding: 0;
238     }
239 }
240
241 main {
242     .yui-b {
243         fieldset {
244             &.brief {
245                 [type="text"],
246                 select {
247                     width: auto;
248                 }
249             }
250         }
251     }
252 }
253
254 table {
255     border-collapse: collapse;
256     border-right: 1px solid #BCBCBC;
257     border-top: 1px solid #BCBCBC;
258
259     .btn-group {
260         white-space: nowrap;
261
262         .btn {
263             display: inline-block;
264             float: none;
265         }
266     }
267
268     &.indexes {
269         td {
270             vertical-align: middle;
271         }
272     }
273
274     > caption {
275         span {
276             &.actions {
277                 font-size: 66%;
278                 font-weight: normal;
279                 margin: 0 .5em 0 0;
280             }
281         }
282     }
283
284     &.invis {
285         border: 0;
286
287         tr,
288         td {
289             border: 0;
290         }
291     }
292
293     + table {
294         margin-top: 1em;
295     }
296 }
297
298 td,
299 th {
300     border-bottom: 1px solid #BCBCBC;
301     border-left: 1px solid #BCBCBC;
302     padding: .2em .3em;
303 }
304
305 td {
306     background-color: #FFFFFF;
307     vertical-align: top;
308
309     &.actions {
310         white-space: nowrap;
311     }
312
313     &.borderless {
314         border: 0 none;
315         border-collapse: separate;
316     }
317
318     &.data {
319         font-family: $font-monospace;
320         text-align: right;
321     }
322
323     &.total {
324         text-align: right;
325     }
326
327     input {
328         &.approve {
329             background-color: #FFC;
330         }
331     }
332 }
333
334
335 th {
336     background-color: #E8E8E8;
337     font-weight: bold;
338     text-align: center;
339
340     &.data {
341         font-family: $font-monospace;
342         text-align: right;
343     }
344 }
345
346 body {
347     font-family: $font-main;
348     padding: 0 0 4em;
349     text-align: left;
350 }
351
352 br {
353     &.clear {
354         clear: both;
355         line-height: 1px;
356     }
357 }
358
359 form {
360     display: inline;
361
362     &.confirm {
363         display: block;
364         text-align: center;
365     }
366 }
367
368 h1 {
369     font-size: 161.6%;
370     font-weight: bold;
371
372     &#logo {
373         border: 0 none;
374         float: left;
375         margin: .75em .3em .75em .7em;
376         padding: 0;
377         width: 180px;
378     }
379 }
380
381 h2 {
382     font-size: 146.5%;
383     font-weight: bold;
384 }
385
386 h3 {
387     font-size: 131%;
388     font-weight: bold;
389 }
390
391 h4 {
392     font-size: 116%;
393     font-weight: bold;
394 }
395
396 h5 {
397     font-size: 100%;
398     font-weight: bold;
399 }
400
401 h6 {
402     font-size: 93%;
403     font-weight: bold;
404 }
405
406 h1,
407 h2,
408 h3,
409 h4,
410 h5,
411 h6 {
412     margin: .3em 0;
413 }
414
415 hr {
416     clear: both;
417     margin: 1em 0;
418 }
419
420 p {
421     margin: .5em 0;
422 }
423
424 strong {
425     font-weight: bold;
426
427     em {
428         font-style: italic;
429         font-weight: bold;
430     }
431
432     em & {
433         font-style: italic;
434         font-weight: bold;
435     }
436 }
437
438 em,
439 cite {
440     font-style: italic;
441 }
442
443 input,
444 textarea {
445     line-height: normal;
446     padding: 2px 4px;
447
448     &:focus {
449         border-color: #538200;
450         border-radius: 4px;
451         border-style: solid;
452     }
453 }
454
455 input {
456     &[type="checkbox"],
457     &[type="radio"] {
458         margin: 0;
459         vertical-align: middle;
460     }
461
462     &[type="submit"],
463     &[type="button"] {
464         &:active {
465             border: 1px inset #999999;
466         }
467     }
468
469     &[type="submit"],
470     &[type="reset"],
471     &[type="button"] {
472         @include default-button;
473
474         &:active {
475             border: 1px inset #999999;
476         }
477
478         &:disabled {
479             @include disabled-button;
480         }
481     }
482
483     &.alert {
484         background-color: #FFFF99;
485         border-color: #900;
486     }
487
488     &.submit {
489         @include default-button;
490
491         &:active {
492             border: 1px inset #999999;
493         }
494
495         &:disabled {
496             @include disabled-button;
497         }
498     }
499
500     &.warning {
501         background: #FFF url("../img/famfamfam/silk/error.png") no-repeat 4px center;
502         padding: .25em .25em .25em 25px;
503     }
504 }
505
506 label,
507 .label {
508     color: #000;
509     display: inline;
510     font-size: inherit;
511     font-weight: normal;
512     max-width: inherit;
513     padding: 0;
514     vertical-align: middle;
515
516     input {
517         &[type="checkbox"],
518         &[type="radio"],
519         &[type="checkbox"],
520         &[type="radio"] {
521             margin-top: 0;
522         }
523     }
524
525     &.circ_barcode {
526         font-size: 105%;
527         font-weight: bold;
528     }
529
530     // Permissions Labels
531     &.permissioncode {
532         font-style: italic;
533
534         &::before {
535             content: "(";
536         }
537
538         &::after {
539             content: ")";
540         }
541     }
542
543     &.required {
544         color: #C00;
545     }
546 }
547
548 .subfield-label {
549     font-style: italic;
550
551     span {
552         &.subfield-code {
553             font-weight: bold;
554         }
555     }
556 }
557
558 .members-update-table {
559     padding-top: 10px;
560 }
561
562 #navmenulist {
563     li {
564         border-bottom: 1px solid #EEE;
565         list-style-image: url("../img/arrow-bullet.gif");
566         padding: .2em 0;
567
568         a {
569             text-decoration: none;
570
571             &.current {
572                 font-weight: bold;
573             }
574         }
575     }
576 }
577
578 #doc,
579 #doc1,
580 #doc2,
581 #doc3 {
582     padding-top: 1em;
583 }
584
585 .main {
586     margin-bottom: $language-footer-min-height * 1.5;
587     margin-top: 1em;
588 }
589
590 #login_controls {
591     padding: .4em .5em;
592     position: absolute;
593     right: .5em;
594 }
595
596 ul {
597     padding-left: 1.1em;
598
599     li {
600         list-style-type: disc;
601
602         input {
603             &.submit {
604                 font-size: 87%;
605                 padding: 2px;
606             }
607         }
608
609         li {
610             list-style-type: circle;
611         }
612     }
613
614     .toolbar {
615         padding-left: 0;
616
617         button {
618             font-family: $font-main;
619             padding-bottom: 2px;
620         }
621
622         li {
623             display: inline;
624             list-style: none;
625         }
626     }
627
628     &.budget_hierarchy {
629         margin-left: 0;
630         padding-left: 0;
631
632         li {
633             display: inline;
634
635             &::after {
636                 content: " -> ";
637             }
638
639             &:first-child {
640                 &::after {
641                     content: "";
642                 }
643             }
644
645             &:last-child {
646                 &::after {
647                     content: "";
648                 }
649             }
650         }
651     }
652
653     // For Font Awesome icon bullets
654     &.fa-ul {
655         li {
656             list-style-type: none;
657         }
658     }
659
660     &.ui-tabs-nav {
661         li {
662             list-style: none;
663         }
664     }
665 }
666
667 ol {
668     padding-left: 1.5em;
669
670     li {
671         list-style: decimal;
672     }
673
674     &.bibliodetails {
675         float: left;
676         margin: 0 0 1em 1em;
677
678         li {
679             border-bottom: 1px solid #E8E8E8;
680             list-style-type: none;
681             padding: .1em;
682         }
683
684         span {
685             &.label {
686                 border-right: 1px solid #E8E8E8;
687                 float: left;
688                 font-weight: bold;
689                 margin-right: 1em;
690                 width: 12em;
691             }
692         }
693     }
694 }
695
696
697 .gradient {
698     background-image: linear-gradient(to bottom, rgb(230, 240, 242) 1%, rgb(255, 255, 255) 99%);
699     display: inline-block;
700     width: 100%;
701 }
702
703 .cart-controls {
704     border-top: 1px solid #E8E8E8;
705     padding: 7px 0;
706 }
707
708 #editions {
709     table,
710     td {
711         border: 0;
712     }
713 }
714
715 .highlighted-row,
716 .highlighted-row td {
717     background-color: #FFD000 !important;
718 }
719
720 tbody {
721     tr {
722         &:nth-child(odd) {
723             td {
724                 background-color: #F3F3F3;
725                 border: 1px solid #BCBCBC;
726                 border-right: 1px solid #BCBCBC;
727             }
728         }
729     }
730 }
731
732 .overdue,
733 .debit {
734     color: #CC0000;
735     font-weight: bold;
736 }
737
738 .strong {
739     font-weight: bold;
740 }
741
742 tr {
743     &.clickable {
744         cursor: pointer;
745     }
746
747     &.expired {
748         td {
749             color: #999999;
750         }
751     }
752
753     &.highlight {
754         td {
755             background-color: #F6F6F6;
756             border-color: #BCBCBC;
757         }
758
759         th {
760             &[scope="row"] {
761                 background-color: #DDDDDD;
762                 border-color: #BCBCBC;
763             }
764         }
765
766         table {
767             &.invis {
768                 td {
769                     border: 0;
770                 }
771             }
772         }
773     }
774
775     &.odd {
776         &.onissue {
777             td {
778                 background-color: #FFFFE1;
779             }
780         }
781     }
782
783     &.ok {
784         td {
785             background-color: #FFFFCC;
786         }
787
788         &:nth-child(odd) {
789             td {
790                 background-color: #FFFFCC;
791             }
792         }
793
794         &:nth-child(even) {
795             td {
796                 background-color: #FFFFCC;
797             }
798         }
799     }
800
801     &.onissue {
802         td {
803             background-color: #FFFFCC;
804         }
805     }
806
807     &.reserved {
808         td {
809             background-color: #EEFFD4;
810         }
811     }
812
813     &.transfered {
814         td {
815             background-color: #E8F0F6;
816         }
817     }
818
819     &.warn {
820         td {
821             background-color: #FF9090;
822         }
823
824         &:nth-child(odd) {
825             td {
826                 background-color: #FF9090;
827             }
828         }
829     }
830 }
831
832 .table_borrowers {
833     tr {
834         &:hover {
835             td {
836                 background-color: #FFFF99;
837             }
838         }
839     }
840 }
841
842 tfoot {
843     td {
844         background-color: #F3F3F3;
845         font-weight: bold;
846     }
847 }
848
849 caption {
850     color: #000;
851     font-size: 133.9%;
852     font-weight: bold;
853     margin: .3em 0;
854 }
855
856 .problem {
857     background-color: #FFFFCC;
858     color: #990000;
859     font-weight: bold;
860     line-height: 1.7em;
861 }
862
863 fieldset {
864     background-color: #F4F8F9;
865     border: 2px solid #B9D8D9;
866     border-radius: 5px;
867     margin: 1em 1em 1em 0;
868     padding: 1em;
869
870     + fieldset {
871         &.action {
872             padding-top: 20px;
873         }
874     }
875
876     .lastchecked {
877         border-bottom-left-radius: 0;
878         border-bottom-right-radius: 0;
879         border-bottom-width: 0;
880         margin-bottom: 0;
881     }
882
883     .standard {
884         background-color:#f4f8f9 !important;
885     }
886
887     .contrast {
888         background-color:#F3F3F3 !important;
889     }
890
891     &.action {
892         background-color: transparent;
893         border: 0;
894         clear: both;
895         float: none;
896         margin: .9em 0 0;
897         padding: .4em;
898         width: auto;
899     }
900
901     &.brief {
902         border: 2px solid #B9D8D9;
903
904         div {
905             &.hint {
906                 margin-bottom: .4em;
907             }
908         }
909
910         label {
911             display: block;
912             font-weight: bold;
913             padding: .3em 0;
914
915             &.inline {
916                 display: inline;
917                 float: none;
918                 margin-left: 1em;
919                 width: auto;
920             }
921         }
922
923         li {
924             &[aria-disabled="true"] {
925                 color: #999;
926             }
927
928             &.inline {
929                 display: inline;
930                 float: none;
931                 margin-left: 1em;
932                 width: auto;
933             }
934
935             &.radio,
936             &.checkbox {
937                 label {
938                     display: inline;
939                 }
940             }
941         }
942
943         ol,
944         li {
945             list-style-type: none;
946         }
947
948         span {
949             .label {
950                 display: block;
951                 font-weight: bold;
952                 padding: .3em 0;
953                 text-align: left;
954             }
955         }
956     }
957
958     &.rows {
959         border: 2px solid #B9D8D9;
960         border-width: 1px;
961         clear: left;
962         float: left;
963         font-size: 90%;
964         margin: .9em 0 0;
965         padding: 0;
966         width: 100%;
967
968         fieldset {
969             background-color: transparent;
970             border-width: 1px;
971             margin: 1em;
972             padding: .3em;
973
974             &.action {
975                 padding: 1em;
976             }
977         }
978
979         &.inputnote {
980             clear: left;
981             float: left;
982             margin: 1em 0 0 11em;
983         }
984
985
986         &.left {
987             label {
988                 text-align: left;
989                 width: 8em;
990             }
991
992             li {
993                 padding-bottom: .4em;
994             }
995
996             span {
997                 label {
998                     text-align: left;
999                     width: 8em;
1000                 }
1001             }
1002         }
1003
1004         &.ui-accordion-content {
1005             border-top-left-radius: 0;
1006             border-top-right-radius: 0;
1007             margin: 0;
1008             padding: 0;
1009             width: auto;
1010
1011             table {
1012                 margin: 0;
1013             }
1014         }
1015
1016         &.unselected {
1017             background-color: #FFFFFF;
1018             border: 0;
1019             border-width: 0;
1020         }
1021
1022         caption {
1023             font-size: 120%;
1024         }
1025
1026         div {
1027             &.hint {
1028                 margin-bottom: .4em;
1029                 margin-left: 10.5em;
1030             }
1031         }
1032
1033         label {
1034             float: left;
1035             font-weight: bold;
1036             margin-right: 1em;
1037             text-align: right;
1038             width: 9em;
1039
1040             &.error {
1041                 float: none;
1042                 margin-left: 1em;
1043                 width: auto;
1044             }
1045
1046             &.inline {
1047                 display: inline;
1048                 float: none;
1049                 margin-left: 1em;
1050             }
1051
1052             &.yesno {
1053                 float: none;
1054                 width: auto;
1055             }
1056         }
1057
1058         legend {
1059             font-size: 110%;
1060             font-weight: bold;
1061             margin-left: 1em;
1062         }
1063
1064         li {
1065             clear: left;
1066             float: left;
1067             list-style-type: none;
1068             padding-bottom: 1em;
1069             width: 100%;
1070
1071             &[aria-disabled="true"] {
1072                 color: #999;
1073             }
1074
1075             &.radio {
1076                 padding-left: 9em;
1077                 width: auto;
1078
1079                 input + label {
1080                     margin-left: 0;
1081                     padding-left: 0;
1082                 }
1083
1084                 label {
1085                     float: none;
1086                     margin: 0 0 0 1em;
1087                     width: auto;
1088                 }
1089             }
1090
1091             input + label {
1092                 margin-left: 0;
1093                 padding-left: 0;
1094             }
1095         }
1096
1097         ol {
1098             list-style-type: none;
1099             padding: 1em 1em 0;
1100
1101             &.radio {
1102                 label {
1103                     float: none;
1104                     margin-left: 20px;
1105                     margin-right: 30px;
1106                     padding-left: 0;
1107                     vertical-align: middle;
1108                     width: auto;
1109
1110                     &.radio {
1111                         float: left;
1112                         margin-right: 1em;
1113                         margin-top: 0;
1114                         width: 9em;
1115                     }
1116                 }
1117
1118                 input {
1119                     &[type="checkbox"],
1120                     &[type="radio"] {
1121                         margin-left: -20px;
1122                     }
1123                 }
1124             }
1125         }
1126
1127         p {
1128             margin: 1em 0 1em 1em;
1129         }
1130
1131         span {
1132             &.label {
1133                 float: left;
1134                 font-weight: bold;
1135                 margin-right: 1em;
1136                 text-align: right;
1137                 width: 9em;
1138             }
1139         }
1140
1141         table {
1142             clear: both;
1143             font-size: 105%;
1144             margin: 1em 0 1em 1em;
1145
1146             &.mceListBox {
1147                 margin: 0;
1148             }
1149         }
1150
1151         td {
1152             label {
1153                 float: none;
1154                 font-weight: normal;
1155                 width: auto;
1156             }
1157         }
1158
1159         .inputnote {
1160             clear: left;
1161             float: left;
1162             margin: 1em 0 0 11em;
1163         }
1164
1165         + h3 {
1166             clear: both;
1167             padding-top: .5em;
1168         }
1169     }
1170 }
1171
1172 #multi_receiving {
1173     fieldset {
1174         &.rows {
1175             label {
1176                 width: 50%;
1177             }
1178         }
1179     }
1180 }
1181
1182 .yui-u {
1183     div {
1184         &.hint {
1185             margin-bottom: .4em;
1186         }
1187     }
1188
1189     fieldset {
1190         &.rows {
1191             div {
1192                 &.hint {
1193                     margin-left: 7.5em;
1194                 }
1195             }
1196
1197             label {
1198                 width: 10em;
1199             }
1200
1201             span {
1202                 &.label {
1203                     width: 10em;
1204                 }
1205             }
1206         }
1207     }
1208
1209     .rows {
1210         li {
1211             p {
1212                 label {
1213                     &.widelabel {
1214                         width: auto;
1215                     }
1216                 }
1217             }
1218         }
1219     }
1220 }
1221
1222 legend {
1223     background-color: #FFFFFF;
1224     border: 2px solid #B9D8D9;
1225     border-radius: 3px;
1226     font-size: 123.1%;
1227     font-weight: bold;
1228     padding: .2em .5em;
1229     width: auto;
1230 }
1231
1232 details {
1233     > summary {
1234         cursor: pointer;
1235
1236         &::before {
1237             content: "\f0da";
1238             display: inline-block;
1239             font-family: FontAwesome;
1240             width: 1em;
1241         }
1242
1243         &.checkouts-by-itemtype {
1244             li {
1245                 display: inline-block;
1246             }
1247         }
1248     }
1249 }
1250
1251 details[open] {
1252     > summary {
1253         &::before {
1254             content: "\f0d7";
1255         }
1256     }
1257 }
1258
1259
1260 #floating-save {
1261     background-color: rgba(185, 216, 217, .6);
1262     bottom: 3%;
1263     position: fixed;
1264     right: 1%;
1265     width: 150px;
1266 }
1267
1268 #breadcrumbs {
1269     background-color: #E6F0F2;
1270     clear: both;
1271     font-size: 90%;
1272     margin: 0;
1273     padding: .2em .5em .4em 10px;
1274 }
1275
1276 #header {
1277     &.navbar {
1278         margin-bottom: 0;
1279     }
1280
1281     &.navbar-default {
1282         background: #E6F0F2;
1283         border: 0;
1284         box-shadow: none;
1285     }
1286
1287     + #breadcrumbs {
1288         margin-top: 1em;
1289     }
1290
1291     > .container-fluid {
1292         padding: 0;
1293     }
1294 }
1295
1296 div {
1297     &.action {
1298         background-color: transparent;
1299         border: 0;
1300         clear: both;
1301         float: none;
1302         margin: .9em 0 0;
1303         padding: .4em;
1304         width: auto;
1305     }
1306
1307     .circmessage {
1308         margin-bottom: .3em;
1309         padding: 0 .4em .4em;
1310
1311         &:first-child {
1312             margin-top: 1em;
1313         }
1314     }
1315
1316     &.first {
1317         fieldset {
1318             margin-right: 0;
1319         }
1320     }
1321
1322     &.help {
1323         margin: .9em 0 0;
1324     }
1325
1326     &.justify {
1327         text-align: justify;
1328     }
1329
1330     &.message {
1331         background: linear-gradient(to bottom, #FFFFFF 0%, #F4F6FA 2%, #EAEEF5 23%, #E8EDF6 94%, #CDDBF2 100%);
1332         border: 1px solid #BCBCBC;
1333         text-align: center;
1334         width: 55%;
1335
1336         ul,
1337         h5 {
1338             padding-left: 25%;
1339             text-align: left;
1340         }
1341
1342         ul + h4 {
1343             margin-top: .7em;
1344         }
1345     }
1346
1347     &.note {
1348         background: linear-gradient(to bottom, #F4F6FA 0%, #E8EDF6 100%); // W3C
1349         border: 1px solid #BCBCBC;
1350         margin: .5em 0;
1351         padding: .5em;
1352
1353         i {
1354             &.fa-exclamation {
1355                 color: #CC0000;
1356                 font-style: italic;
1357                 padding: 0 .3em;
1358             }
1359         }
1360     }
1361
1362     // Tools > automatic_item_modification_by_age
1363     &.rules {
1364         display: block;
1365     }
1366
1367     &[class$="_table_controls"] {
1368         padding: .7em 0;
1369     }
1370
1371     &.results {
1372         padding: .7em 0;
1373     }
1374
1375     &.rule {
1376         background-color: #F4F8F9;
1377         border: 2px solid #B9D8D9;
1378         border-radius: 5px;
1379         margin: .3em;
1380         padding: .3em;
1381     }
1382
1383     &.lastchecked {
1384         border: 2px solid #BCDB89;
1385         border-bottom-left-radius: 5px;
1386         border-bottom-right-radius: 5px;
1387         padding: .2em 1em;
1388     }
1389
1390     &.listgroup {
1391         clear: left;
1392
1393         h4 {
1394             font-style: italic;
1395
1396             a {
1397                 font-size: 80%;
1398             }
1399         }
1400
1401         input {
1402             font-size: 80%;
1403         }
1404     }
1405
1406     &.sysprefs {
1407         h3 {
1408             margin: .2em 0 .2em .4em;
1409         }
1410
1411         dl {
1412             margin-left: 1.5em;
1413         }
1414
1415         &.hint {
1416             float: right;
1417             margin: .7em;
1418             padding: .5em;
1419             width: 25%;
1420         }
1421     }
1422
1423     &.rows {
1424         clear: left;
1425         float: left;
1426         margin: 0;
1427         padding: 0;
1428         width: 100%;
1429
1430         + div {
1431             &.rows {
1432                 margin-top: .6em;
1433             }
1434         }
1435
1436         li {
1437             border-bottom: 1px solid #EEE;
1438             clear: left;
1439             float: left;
1440             list-style-type: none;
1441             padding: .275em;
1442             width: 100%;
1443         }
1444
1445         ol {
1446             list-style-type: none;
1447             padding: .5em 1em 0 0;
1448
1449             li {
1450                 li {
1451                     border-bottom: 0;
1452                 }
1453             }
1454         }
1455
1456         p {
1457             margin-left: 10em;
1458         }
1459
1460         span {
1461             &.label {
1462                 float: left;
1463                 font-weight: bold;
1464                 margin-right: 1em;
1465                 padding-top: 0;
1466                 text-align: left;
1467                 width: 9em;
1468             }
1469         }
1470     }
1471
1472     &.pages {
1473         margin: .5em 0;
1474
1475         a {
1476             font-weight: bold;
1477             padding: 1px 5px;
1478             text-decoration: none;
1479
1480             &:link,
1481             &:visited {
1482                 background-color: #EEEEEE;
1483                 color: #3366CC;
1484             }
1485
1486             &:hover,
1487             &:active {
1488                 background-color: #FFC;
1489             }
1490         }
1491
1492         .current,
1493         .currentPage {
1494             background-color: #E6FCB7;
1495             color: #666;
1496             font-weight: bold;
1497             padding: 1px 5px;
1498         }
1499
1500         .inactive {
1501             background-color: #F3F3F3;
1502             color: #BCBCBC;
1503             font-weight: bold;
1504             padding: 1px 5px;
1505         }
1506     }
1507
1508     .browse {
1509         margin: .5em 0;
1510     }
1511 }
1512
1513 #header_search {
1514     background-position: .5em .5em;
1515     background-repeat: no-repeat;
1516     float: left;
1517     margin: .3em 0 .5em;
1518
1519     input {
1520         font-size: 1.3em;
1521
1522         &.submit {
1523             font-size: 1em;
1524         }
1525     }
1526
1527     div {
1528         &.residentsearch {
1529             border: 0;
1530             border-bottom: 1px solid #85CA11;
1531             padding: 0 0 .2em;
1532         }
1533     }
1534
1535     ul {
1536         &.ui-tabs-nav {
1537             margin-left: 1em;
1538             padding-top: 0;
1539
1540             li {
1541                 &.ui-state-default {
1542                     background: transparent none;
1543                     border: 0;
1544                     top: 0;
1545
1546                     a {
1547                         padding: .3em .6em;
1548                     }
1549                 }
1550
1551                 &.ui-tabs-active {
1552                     background-color: #FFFFF1;
1553                     border: 1px solid #85CA11;
1554                     border-top-width: 0;
1555                     top: -2px;
1556
1557                     a {
1558                         text-decoration: none;
1559                     }
1560                 }
1561             }
1562         }
1563     }
1564
1565     .ui-corner-top {
1566         border-radius: 0 0 4px 4px;
1567     }
1568
1569     > div,
1570     > ul {
1571         display: none;
1572
1573         > li {
1574             display: none;
1575
1576             &:first-of-type {
1577                 display: block;
1578             }
1579         }
1580
1581         &:first-of-type {
1582             display: block;
1583         }
1584     }
1585 }
1586
1587
1588 .head-searchbox {
1589     width: 30em;
1590 }
1591
1592 #reserves,
1593 #checkouts {
1594     border: 1px solid #B9D8D9;
1595     padding: 1em;
1596 }
1597
1598 .tip {
1599     color: #808080;
1600     font-size: 93%;
1601 }
1602
1603 .single-line {
1604     white-space: nowrap;
1605 }
1606
1607 .ex {
1608     font-family: $font-monospace;
1609     font-weight: bold;
1610 }
1611
1612 dt {
1613     font-weight: bold;
1614 }
1615
1616 dd {
1617     font-size: 90%;
1618     font-weight: normal;
1619     padding: .2em;
1620     text-indent: 2.5em;
1621 }
1622
1623 #toolbar,
1624 .btn-toolbar {
1625     background-color: #EDF4F6;
1626     border: 1px solid #E6F0F2;
1627     border-radius: 5px 5px 0 0;
1628     margin: 0;
1629     padding: 5px;
1630 }
1631
1632 #disabled {
1633     a {
1634         color: #999;
1635
1636         &:hover {
1637             color: #999;
1638         }
1639     }
1640 }
1641
1642 #disabled2 {
1643     a {
1644         color: #999;
1645     }
1646 }
1647
1648
1649 .patroninfo {
1650     margin-top: -.5em;
1651
1652     h5 {
1653         border-right: 1px solid #B9D8D9;
1654         margin-bottom: 0;
1655         padding-bottom: .5em;
1656         padding-left: -.5em;
1657         padding-top: .3em;
1658
1659         &:empty {
1660             border-right: 0;
1661         }
1662     }
1663
1664     ul {
1665         border: 0;
1666         border-bottom: 0;
1667         border-right: 1px solid #B9D8D9;
1668         border-top: 0;
1669         margin: 0;
1670         padding: 0;
1671
1672         li {
1673             list-style-type: none;
1674             margin: 0;
1675         }
1676     }
1677
1678     + #menu {
1679         margin-right: 0;
1680     }
1681 }
1682
1683 #patronbasics {
1684     div {
1685         background: transparent url("../img/patron-blank.min.svg") 10px 5px no-repeat;
1686         border: 1px solid #CCCCCC;
1687         height: 125px;
1688         margin: .3em 0 .3em .3em;
1689         padding: 0;
1690         width: 105px;
1691     }
1692 }
1693
1694 #patronimage {
1695     border: 1px solid #CCCCCC;
1696     margin: .3em 0 .3em .3em;
1697     max-width: 140px;
1698     padding: .2em;
1699 }
1700
1701 .patronviews {
1702     border-right: 1px solid #000;
1703     border-top: 1px solid #000;
1704     margin-bottom: .5em;
1705     padding: .5em 0;
1706 }
1707
1708 .column-tool {
1709     font-size: 80%;
1710 }
1711
1712 .hint {
1713     color: #666;
1714     font-size: 95%;
1715 }
1716
1717 .yui-b {
1718     fieldset {
1719         &.brief {
1720             padding: .4em .7em;
1721
1722             fieldset {
1723                 margin: 0 .3em;
1724                 padding: .5em;
1725
1726                 legend {
1727                     font-size: 85%;
1728                 }
1729             }
1730
1731             li {
1732
1733                 &.checkbox {
1734
1735                     input {
1736                         #tools_holidays & {
1737                             margin-left: 0;
1738                         }
1739                     }
1740
1741                     label {
1742                         display: inline;
1743
1744                         #tools_holidays & {
1745                             margin-left: 20px;
1746                         }
1747                     }
1748                 }
1749
1750                 &.dateinsert {
1751                     label {
1752                         display: inline;
1753                     }
1754
1755                     span {
1756                         &.label {
1757                             display: inline;
1758                         }
1759                     }
1760                 }
1761
1762                 &.radio {
1763                     padding: .7em 0;
1764
1765                     input {
1766                         padding: .3em 0;
1767
1768                         #tools_holidays & {
1769                             margin-left: 0;
1770                         }
1771                     }
1772
1773                     label {
1774                         display: inline;
1775
1776                         #tools_holidays & {
1777                             margin-left: 20px;
1778                         }
1779
1780                         span {
1781                             &.label {
1782                                 display: inline;
1783                             }
1784                         }
1785                     }
1786                 }
1787             }
1788
1789             ol {
1790                 font-size: 85%;
1791                 margin: 0;
1792                 padding: 0;
1793             }
1794
1795             select,
1796             [type=text] {
1797                 width: 100%;
1798             }
1799         }
1800
1801         &.rows {
1802             div {
1803                 &.hint {
1804                     margin-left: 10.5em;
1805                 }
1806             }
1807
1808             td {
1809                 label {
1810                     width: auto;
1811                 }
1812
1813                 span {
1814                     &.label {
1815                         width: auto;
1816                     }
1817                 }
1818             }
1819         }
1820     }
1821 }
1822
1823 #yui-main {
1824     .yui-b {
1825         fieldset {
1826             &.brief {
1827                 select,
1828                 [type=text] {
1829                     width: auto;
1830                 }
1831             }
1832         }
1833     }
1834 }
1835
1836 .btn-toolbar {
1837     fieldset {
1838         &.action {
1839             margin-top: 0;
1840         }
1841     }
1842
1843     .dropdown-menu {
1844         font-size: 13px;
1845     }
1846 }
1847
1848 .rows {
1849     .label {
1850         white-space: normal;
1851     }
1852 }
1853
1854 .checkedout {
1855     color: #999999;
1856     font-style: italic;
1857 }
1858
1859 .subfield_not_filled {
1860     background-color: #FFFF99;
1861 }
1862
1863 .content_hidden {
1864     display: none;
1865     visibility: hidden; // you propably don't need to change this one
1866 }
1867
1868 // the property for the displayed tab
1869 .content_visible {
1870     display: block;
1871     visibility: visible; // you propably don't need to change this one
1872 }
1873
1874 #z3950searcht {
1875     table {
1876         border: 0;
1877         padding: 20px;
1878     }
1879 }
1880
1881 #z3950_search_targets {
1882     height: 338px;
1883     overflow-y: auto;
1884 }
1885
1886 #z3950_search_targets_acq {
1887     height: 308px;
1888     overflow-y: auto;
1889 }
1890
1891 .z3950checks {
1892     padding-left: 1em;
1893 }
1894
1895 .error {
1896     color: #CC0000;
1897 }
1898
1899 .status_ok {
1900     background-color: #90EE90;
1901 }
1902
1903 .status_warn {
1904     background-color: #FF0000;
1905 }
1906
1907 // Font Awesome icons
1908 i {
1909     &.error {
1910         color: #CC0000;
1911     }
1912
1913     &.success {
1914         color: #008000;
1915     }
1916
1917     &.warn {
1918         color: #FFA500;
1919     }
1920 }
1921
1922 .checkout-setting {
1923     font-size: 85%;
1924     padding-top: .3em;
1925
1926     input {
1927         vertical-align: middle;
1928     }
1929
1930     label {
1931         font-size: inherit;
1932         font-weight: normal;
1933     }
1934 }
1935
1936 .checkout-settings {
1937     background-color: #F4F8F9;
1938     border-radius: 0;
1939     border-top: 2px solid #B9D8D9;
1940     display: none;
1941     margin-left: -1em;
1942     margin-right: -1em;
1943     margin-top: 1em;
1944     padding: 1em 1em 0;
1945 }
1946
1947 #show-checkout-settings {
1948     margin-top: .5em;
1949 }
1950
1951 .blocker {
1952     color: #990000;
1953 }
1954
1955 .inaccurate-item-statuses {
1956     color: #990000;
1957 }
1958
1959 .circmessage {
1960     li {
1961         list-style: url("../img/arrow-bullet.gif");
1962         margin-bottom: .2em;
1963     }
1964 }
1965
1966 #circ_needsconfirmation {
1967     margin: auto;
1968 }
1969
1970 .dialog {
1971     border: 1px solid #BCBCBC;
1972     border-radius: 2px;
1973     margin: 1em auto;
1974     padding: .5em;
1975     text-align: center;
1976     width: 65%;
1977
1978     a {
1979         &.approve {
1980             display: inline-block;
1981         }
1982     }
1983
1984     button,
1985     a.approve {
1986         background: #FFF none;
1987         border: 1px outset #999999;
1988         border-left-color: #666;
1989         border-top-color: #666;
1990         margin: .4em;
1991         padding: .4em;
1992         white-space: pre-line;
1993
1994         &:active {
1995             border: 1px inset #999999;
1996         }
1997
1998         &:hover {
1999             background-color: #FFC;
2000         }
2001     }
2002
2003     h2,
2004     h3,
2005     h4 {
2006         margin: auto;
2007         text-align: center;
2008     }
2009
2010     input {
2011         background-color: #FFFFFF;
2012         border: 1px solid #BCBCBC;
2013         margin: .4em;
2014         padding: .4em .4em .4em 25px;
2015
2016         &:hover {
2017             background-color: #FFC;
2018         }
2019
2020         &[type="submit"] {
2021             background: #FFF none;
2022         }
2023     }
2024
2025     li {
2026         list-style-position: inside;
2027     }
2028
2029     table {
2030         margin: .5em auto;
2031
2032         td {
2033             text-align: left;
2034         }
2035
2036         th {
2037             text-align: right;
2038         }
2039     }
2040 }
2041
2042 .alert {
2043     background: linear-gradient(to bottom, #FEF8D3 0%, #FFEC91 9%, #FFED87 89%, #F9DC00 100%);
2044     border: 1px solid #E0C726;
2045     color: inherit;
2046     text-align: center;
2047     text-shadow: none;
2048
2049     strong {
2050         color: #900;
2051     }
2052
2053     // Redefine a new style for Bootstrap's class "close" since we use that already
2054     // Use <a class="closebtn" href="#">&times;</a>
2055     .closebtn {
2056         line-height: 20px;
2057         position: relative;
2058         right: -21px;
2059         top: -2px;
2060     }
2061 }
2062
2063 .approve,
2064 .success {
2065     i {
2066         &.fa {
2067             color: #008000;
2068         }
2069     }
2070 }
2071
2072 .deny {
2073     i {
2074         &.fa {
2075             color: #CC0000;
2076         }
2077     }
2078 }
2079
2080 .new {
2081     i {
2082         &.fa {
2083             color: #425FAF;
2084         }
2085     }
2086 }
2087
2088 .accesskey {
2089     text-decoration: underline;
2090 }
2091
2092 .missing {
2093     background-color: #FFFFCC;
2094 }
2095
2096 .term {
2097     background-color: #FFC;
2098     color: #990000;
2099 }
2100
2101 // style for shelving location in catalogsearch
2102 .shelvingloc {
2103     display: block;
2104     font-style: italic;
2105 }
2106
2107 #menu {
2108     border-right: 1px solid #B9D8D9;
2109     margin-right: .5em;
2110     padding-bottom: 2em;
2111     padding-top: 1em;
2112
2113     li {
2114         a {
2115             background: linear-gradient(to bottom, #E8F0F6 0%, #E8F0F6 96%, #C1C1C1 100%);
2116             border: 1px solid #B9D8D9;
2117             border-bottom-left-radius: 5px;
2118             border-top-left-radius: 5px;
2119             display: block;
2120             font-size: 111%;
2121             margin: .5em 0;
2122             margin-right: -1px;
2123             padding: .4em .3em;
2124             text-decoration: none;
2125
2126             &:hover {
2127                 background: linear-gradient(to bottom, #FAFAFA 0%, #FFFFFF 96%, #E6E6E6 97%, #CCCCCC 99%, #C1C1C1 100%);
2128                 border-bottom: 1px solid #85CA11;
2129                 border-left: 1px solid #85CA11;
2130                 border-top: 1px solid #85CA11;
2131             }
2132         }
2133
2134         &.active {
2135             a {
2136                 background-color: #FFFFFF;
2137                 background-image: none;
2138                 border-bottom: 1px solid #85CA11;
2139                 border-left: 1px solid #85CA11;
2140                 border-right: 0;
2141                 border-top: 1px solid #85CA11;
2142                 color: #000000;
2143                 font-weight: bold;
2144
2145                 &:hover {
2146                     background-color: #FFFFFF;
2147                     color: #538200;
2148                 }
2149             }
2150         }
2151     }
2152
2153     ul {
2154         li {
2155             list-style-type: none;
2156         }
2157     }
2158 }
2159
2160
2161 #logo {
2162     background: transparent url("../img/koha-logo-medium.png") no-repeat scroll 0%;
2163     margin: .75em .3em .75em .7em;
2164
2165     a {
2166         border: 0;
2167         cursor: pointer;
2168         display: block;
2169         height: 0 !important;
2170         margin: 0;
2171         overflow: hidden;
2172         padding: 44px 0 0;
2173         text-decoration: none;
2174         width: 180px;
2175     }
2176 }
2177
2178 #closewindow {
2179     margin-top: 2em;
2180     text-align: center;
2181
2182     a {
2183         font-weight: bold;
2184     }
2185 }
2186
2187 .barcode {
2188     font-size: 200%;
2189     vertical-align: middle;
2190 }
2191
2192 li {
2193     &.email {
2194         overflow: hidden;
2195         text-overflow: ellipsis;
2196         white-space: nowrap;
2197     }
2198 }
2199
2200 .patronbriefinfo {
2201     li {
2202         &.email {
2203             font-size: 87%;
2204             padding: 0 10px 0 0;
2205             width: 90%;
2206         }
2207     }
2208 }
2209
2210 .empty {
2211     color: #CCC;
2212 }
2213
2214 .address {
2215     font-size: 110%;
2216
2217     li {
2218         list-style-type: none;
2219     }
2220 }
2221
2222 .title {
2223     font-size: 105%;
2224     font-weight: bold;
2225 }
2226
2227 .hold {
2228     float: right;
2229     font-size: 90%;
2230     margin: 0;
2231 }
2232
2233 .thumbnail {
2234     display: block;
2235     margin: auto;
2236
2237     > li {
2238         list-style-type: none;
2239     }
2240 }
2241
2242 #searchresults {
2243     ul {
2244         li {
2245             clear: left;
2246             font-size: 90%;
2247             list-style: url("../img/item-bullet.gif");
2248             padding: .2em 0;
2249
2250             img {
2251                 float: left;
2252                 margin: 3px 5px 3px -5px;
2253             }
2254         }
2255
2256         span {
2257             &.status {
2258                 clear: left;
2259                 color: #900;
2260                 display: block;
2261             }
2262
2263             &.unavailable {
2264                 clear: left;
2265                 display: block;
2266             }
2267         }
2268
2269         table {
2270             td {
2271                 vertical-align: top;
2272             }
2273         }
2274     }
2275
2276     &.unavailability {
2277         strong {
2278             display: block;
2279         }
2280     }
2281 }
2282
2283 #searchheader {
2284     background-color: #E6F0F2;
2285     border: 1px solid #B9D8D9;
2286     border-radius: 5px 5px 0 0;
2287     font-size: 80%;
2288     margin: 0 0 .5em -1px;
2289     padding: .4em 0 .4em 1em;
2290
2291     &.floating {
2292         border-radius: 0;
2293         margin-top: 0;
2294     }
2295
2296     .btn-group {
2297         > .btn {
2298             &:first-child {
2299                 margin-left: .7em;
2300             }
2301         }
2302     }
2303
2304     form {
2305         float: right;
2306         padding: 5px 5px 3px 0;
2307
2308         &.fz3950 {
2309             float: right;
2310             font-size: 125%;
2311             padding: 0 0 0 5em;
2312         }
2313
2314         &.fz3950bigrpad {
2315             float: right;
2316             font-size: 125%;
2317             padding: 5px 25em 0 0;
2318         }
2319     }
2320 }
2321
2322 #search-facets {
2323     border: 1px solid #B9D8D9;
2324     border-radius: 5px 5px 0 0;
2325
2326     h4 {
2327         background-color: #E6F0F2;
2328         border-bottom: 1px solid #B9D8D9;
2329         border-radius: 5px 5px 0 0;
2330         font-size: 90%;
2331         margin: 0;
2332         padding: .4em .2em;
2333         text-align: center;
2334     }
2335
2336     ul {
2337         margin: 0;
2338         padding: .3em;
2339
2340         li {
2341             font-weight: bold;
2342             list-style-type: none;
2343         }
2344     }
2345
2346     li {
2347         li {
2348             font-size: 85%;
2349             font-weight: normal;
2350             margin-bottom: 2px;
2351             padding: .1em .2em;
2352         }
2353
2354         &.showmore {
2355             font-weight: bold;
2356             text-indent: 1em;
2357         }
2358     }
2359 }
2360
2361 .facet-count {
2362     display: inline-block;
2363 }
2364
2365 #bookcoverimg {
2366     text-align: center;
2367 }
2368
2369 .searchhighlightblob {
2370     font-size: 75%;
2371     font-style: italic;
2372 }
2373
2374 #displayexample {
2375     background-color: #CCCCCC;
2376     margin-bottom: 10px;
2377     padding: 5px;
2378 }
2379
2380 #irregularity_summary {
2381     vertical-align: top;
2382 }
2383
2384 #toplevelmenu {
2385     padding: 0;
2386 }
2387
2388 #CheckAll,
2389 #CheckNone,
2390 #CheckPending {
2391     font-weight: normal;
2392     margin: 0 .5em 0 0;
2393 }
2394
2395 .lost,
2396 .dmg,
2397 .wdn {
2398     color: #990000;
2399     display: block;
2400 }
2401
2402 .datedue {
2403     color: #999;
2404     display: block;
2405     font-style: italic;
2406 }
2407
2408 .waitinghere,
2409 .credit {
2410     color: #669900;
2411 }
2412
2413 #mainuserblock {
2414     border: 1px solid #E8E8E8;
2415     margin-top: .5em;
2416     padding: .5em;
2417 }
2418
2419 .labeledmarc-table {
2420     border: 0;
2421 }
2422
2423 .labeledmarc-label {
2424     border: 0;
2425     color: #000000;
2426     font-size: 11pt;
2427     font-style: italic;
2428     padding: 5;
2429 }
2430
2431 .labeledmarc-value {
2432     border: 0;
2433     color: #000;
2434     font-size: 10pt;
2435     padding: 5;
2436 }
2437
2438 #marcPreview {
2439     table {
2440         border: 0;
2441         font-family: $font-monospace;
2442         font-size: 95%;
2443         margin: .7em 0 0;
2444     }
2445
2446     tbody {
2447         tr {
2448             &:nth-child(2n+1) {
2449                 td {
2450                     background-color: #FFFFFF;
2451                 }
2452             }
2453         }
2454     }
2455
2456     td {
2457         border: 0;
2458         padding: 2px;
2459         vertical-align: top;
2460     }
2461
2462     th {
2463         background-color: #FFFFFF;
2464         border: 0;
2465         padding: 2px;
2466         text-align: left;
2467         vertical-align: top;
2468         white-space: nowrap;
2469     }
2470
2471     &.modal-dialog {
2472         width: 80%;
2473     }
2474 }
2475
2476 .modal-dialog {
2477     &.modal-wide {
2478         width: 80%;
2479     }
2480 }
2481
2482 @media (max-width: 767px) {
2483     #marcPreview {
2484         margin: 0;
2485         width: auto;
2486     }
2487 }
2488
2489 #cartDetails {
2490     background-color: #FFFFFF;
2491     border: 1px solid #739ACF;
2492     box-shadow: 1px 1px 3px 0 #666;
2493     color: #000;
2494     display: none;
2495     margin: 0;
2496     padding: 10px;
2497     text-align: center;
2498     width: 180px;
2499     z-index: 50;
2500 }
2501
2502 #cartmenulink {
2503     background: transparent url("../img/cart-small.gif") left center no-repeat;
2504     padding-left: 15px;
2505 }
2506
2507 #basketcount {
2508     span {
2509         display: inline;
2510         font-size: 90%;
2511         font-weight: normal;
2512         padding: 0;
2513     }
2514 }
2515
2516 #moremenu {
2517     display: none;
2518 }
2519
2520 .results_summary {
2521     color: #707070;
2522     display: block;
2523     font-size: 85%;
2524     padding: 0 0 .5em;
2525
2526     a {
2527         font-weight: normal;
2528     }
2529
2530     .label {
2531         color: #202020;
2532     }
2533 }
2534
2535 .child_fund_amount {
2536     font-style: italic;
2537 }
2538
2539 .number_box {
2540     font-size: 105%;
2541     line-height: 200%;
2542
2543     a,
2544     span {
2545         background-color: #E4ECF5;
2546         border: 1px solid #A4BEDD;
2547         border-radius: 4px;
2548         font-weight: bold;
2549         padding: .1em .4em;
2550         text-decoration: none;
2551
2552         &:hover {
2553             background-color: #EBEFF7;
2554         }
2555     }
2556 }
2557
2558 .container {
2559     border: 1px solid #EEE;
2560     margin: 1em 0;
2561     padding: 1em;
2562 }
2563
2564 .import_export {
2565     position: relative;
2566
2567     .export_ok {
2568         background: #E3E3E3 none;
2569         border: 0;
2570         cursor: pointer;
2571         margin-left: 20px;
2572         padding: 10px;
2573     }
2574
2575     .import_export_options {
2576         background: #FFFFFF;
2577         border: 1px solid #CDCDCD;
2578         left: 60px;
2579         padding: 10px;
2580         position: absolute;
2581         top: 0;
2582         width: 300px;
2583         z-index: 1;
2584     }
2585 }
2586
2587 .import_export_options {
2588     background: #E3E3E3 none;
2589     border: 0;
2590     cursor: pointer;
2591     margin-left: 20px;
2592     padding: 10px;
2593
2594     fieldset {
2595         &.rows {
2596             li {
2597                 label {
2598                     width: 16em;
2599                 }
2600             }
2601         }
2602     }
2603
2604     .importing {
2605         background: none;
2606         padding: inherit;
2607     }
2608 }
2609
2610 .form_import {
2611     fieldset {
2612         &.rows {
2613             li {
2614                 label {
2615                     width: auto;
2616                 }
2617             }
2618         }
2619     }
2620
2621     .input_import {
2622         border: 1px solid #BCBCBC;
2623     }
2624 }
2625
2626 .importing {
2627     position: relative;
2628
2629     .importing_msg {
2630         padding-bottom: 10px;
2631         padding-left: 10px;
2632     }
2633 }
2634
2635
2636 .field_hint {
2637     color: #808080;
2638     font-style: italic;
2639     padding-left: 1em;
2640 }
2641
2642 .m880 {
2643     display: block;
2644     float: right;
2645     padding-left: 20px;
2646     text-align: right;
2647     width: 50%;
2648 }
2649
2650 .advsearch {
2651     margin: 0;
2652
2653     table {
2654         border-collapse: separate;
2655         border-spacing: 5px;
2656         border-width: 0;
2657     }
2658
2659     td {
2660         border: 1px solid #EEE;
2661         padding: .3em .4em;
2662     }
2663 }
2664
2665 #circ_circulation_issue {
2666     position: relative;
2667 }
2668
2669 #clearscreen {
2670     position: absolute;
2671     right: 0;
2672     top: 0;
2673
2674     a {
2675         background-color: #EEE;
2676         border-radius: 0 0 0 5px;
2677         color: #CCC;
2678         display: block;
2679         font-size: 160%;
2680         font-weight: bold;
2681         padding: 0 .7em .2em;
2682         text-decoration: none;
2683         text-shadow: 0 -1px 0 #666;
2684
2685         &:hover {
2686             color: #CC0000;
2687         }
2688     }
2689 }
2690
2691 .pager {
2692     background-color: #E8E8E8;
2693     border: 1px solid #BCBCBC;
2694     border-radius: 5px;
2695     display: inline-block;
2696     font-size: 85%;
2697     margin: .4em 0;
2698     padding: .3em .5em;
2699
2700     img {
2701         vertical-align: middle;
2702
2703         &.last {
2704             padding-right: 5px;
2705         }
2706     }
2707
2708     input {
2709         &.pagedisplay {
2710             background-color: transparent;
2711             border: 0;
2712             font-weight: bold;
2713             text-align: center;
2714         }
2715     }
2716
2717     p {
2718         margin: 0;
2719     }
2720 }
2721
2722 .no-image {
2723     background-color: #FFFFFF;
2724     border: 1px solid #AAAAAA;
2725     border-radius: 3px;
2726     color: #979797;
2727     display: block;
2728     font-size: 86%;
2729     font-weight: bold;
2730     text-align: center;
2731     width: 75px;
2732 }
2733
2734 #acqui_order_supplierlist {
2735     > div {
2736         &.supplier {
2737             border: 1px solid #EEEEEE;
2738             margin: .5em;
2739             padding: 1em;
2740         }
2741
2742         > div {
2743             > .baskets {
2744                 margin-top: .5em;
2745             }
2746         }
2747
2748         > span {
2749             &.action {
2750                 margin-left: 5em;
2751             }
2752
2753             &.suppliername {
2754                 display: inline;
2755                 font-size: 1.7em;
2756                 margin-bottom: .5em;
2757             }
2758         }
2759     }
2760 }
2761
2762 .supplier-contact-details {
2763     float: left;
2764 }
2765
2766 #ADD-contact {
2767     margin: 0 0 8px 8px;
2768 }
2769
2770 #contact-template {
2771     display: none;
2772 }
2773
2774 // Override core jQueryUI widgets
2775 .ui-widget-content {
2776     background: #FFFFFF none;
2777     border: 1px solid #B9D8D9;
2778     color: #222222;
2779 }
2780
2781 .ui-widget-header {
2782     background: #E6F0F2 none;
2783     border: 1px solid #B9D8D9;
2784     color: #222222;
2785     font-weight: bold;
2786 }
2787
2788 .ui-state-default,
2789 .ui-widget-content .ui-state-default,
2790 .ui-widget-header .ui-state-default {
2791     background: #F4F8F9 none;
2792     border: 1px solid #B9D8D9;
2793     color: #555555;
2794     font-weight: normal;
2795 }
2796
2797 .ui-state-hover,
2798 .ui-widget-content .ui-state-hover,
2799 .ui-widget-header .ui-state-hover,
2800 .ui-state-focus,
2801 .ui-widget-content .ui-state-focus,
2802 .ui-widget-header .ui-state-focus {
2803     background: #E6F0F2 none;
2804     border: 1px solid #B9D8D9;
2805     color: #212121;
2806     font-weight: normal;
2807 }
2808
2809 .ui-state-active,
2810 .ui-widget-content .ui-state-active,
2811 .ui-widget-header .ui-state-active {
2812     background: #FFFFFF none;
2813     border: 1px solid #AAAAAA;
2814     color: #212121;
2815     font-weight: normal;
2816 }
2817
2818 .ui-state-highlight,
2819 .ui-widget-content .ui-state-highlight,
2820 .ui-widget-header .ui-state-highlight {
2821     background: #FFF4C6;
2822     border: 1px solid #FED22F;
2823     color: #363636;
2824 }
2825
2826 .ui-state-error,
2827 .ui-widget-content .ui-state-error,
2828 .ui-widget-header .ui-state-error {
2829     background: #FEF1EC;
2830     border: 1px solid #CD0A0A;
2831     color: #CD0A0A;
2832 }
2833
2834 // Override jQuery Autocomplete
2835 .ui-autocomplete {
2836     box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
2837     cursor: default;
2838     position: absolute;
2839
2840     &.ui-widget-content {
2841         .ui-state-hover {
2842             background: #E6F0F2 none;
2843             border: 1px solid #B9D8D9;
2844             color: #212121;
2845             font-weight: normal;
2846         }
2847     }
2848 }
2849
2850 .ui-autocomplete-loading {
2851     background: #FFF url("../img/spinner-small.gif") right center no-repeat;
2852 }
2853
2854 // jQuery UI standard tabs
2855 .ui-menu {
2856     li {
2857         list-style: none;
2858     }
2859 }
2860
2861 .ui-tabs-nav {
2862     .ui-tabs-active a,
2863     a:hover,
2864     a:focus,
2865     a:active,
2866     span.a {
2867         background: none repeat scroll 0 0 transparent;
2868         outline: 0 none;
2869     }
2870
2871     &.ui-widget-header {
2872         background: none;
2873         border: 0;
2874     }
2875 }
2876
2877 .ui-tabs {
2878     .ui-tabs-nav {
2879         li {
2880             background: #E6F0F2 none;
2881             border: 1px solid #B9D8D9;
2882             margin-right: .4em;
2883             top: 1px;
2884
2885             &.ui-tabs-active {
2886                 background-color: #FFFFFF;
2887                 border: 1px solid #B9D8D9;
2888                 border-bottom-width: 0;
2889
2890                 a {
2891                     color: #000;
2892                     font-weight: bold;
2893                 }
2894
2895                 &.ui-state-hover {
2896                     background: #FFF none;
2897                 }
2898             }
2899
2900             &.ui-state-default {
2901                 &.ui-state-hover {
2902                     background: #EDF4F5 none;
2903                 }
2904             }
2905         }
2906     }
2907
2908     .ui-tabs-panel {
2909         border: 1px solid #B9D8D9;
2910     }
2911
2912     &.ui-widget-content {
2913         background: transparent none;
2914         border: 0;
2915     }
2916
2917     .ui-state-default {
2918         a {
2919             color: #004D99;
2920
2921             &:link,
2922             &:visited {
2923                 color: #004D99;
2924             }
2925         }
2926     }
2927
2928     .ui-state-hover {
2929         a {
2930             color: #538200;
2931
2932             &:link,
2933             &:visited {
2934                 color: #538200;
2935             }
2936         }
2937     }
2938
2939 }
2940
2941 .ui-widget {
2942     font-family: inherit;
2943     font-size: inherit;
2944
2945     input,
2946     select,
2947     textarea,
2948     button {
2949         font-family: inherit;
2950         font-size: inherit;
2951     }
2952 }
2953
2954 .statictabs {
2955     ul {
2956         background: none repeat scroll 0 0 transparent;
2957         border: 0 none;
2958         border-bottom-left-radius: 4px;
2959         border-bottom-right-radius: 4px;
2960         border-top-left-radius: 4px;
2961         border-top-right-radius: 4px;
2962         color: #222222;
2963         font-size: 100%;
2964         font-weight: bold;
2965         line-height: 1.3;
2966         list-style: none outside none;
2967         margin: 0;
2968         outline: 0 none;
2969         padding: .2em .2em 0;
2970         text-decoration: none;
2971
2972         &::after {
2973             clear: both;
2974         }
2975
2976         &::before,
2977         &::after {
2978             content: "";
2979             display: table;
2980         }
2981
2982         li {
2983             background: none repeat scroll 0 0 #E6F0F2;
2984             border: 1px solid #B9D8D9;
2985             border-bottom: 0 none;
2986             border-top-left-radius: 4px;
2987             border-top-right-radius: 4px;
2988             color: #555555;
2989             float: left;
2990             font-weight: normal;
2991             list-style: none outside none;
2992             margin-bottom: 0;
2993             margin-right: .4em;
2994             padding: 0;
2995             position: relative;
2996             top: 1px;
2997             white-space: nowrap;
2998
2999             &.active {
3000                 background-color: #FFFFFF;
3001                 color: #212121;
3002                 font-weight: normal;
3003                 padding-bottom: 1px;
3004
3005                 a {
3006                     background: none repeat scroll 0 0 transparent;
3007                     color: #000000;
3008                     cursor: text;
3009                     font-weight: bold;
3010                     outline: 0 none;
3011                     top: 1px;
3012                 }
3013             }
3014
3015             a {
3016                 color: #004D99;
3017                 cursor: pointer;
3018                 float: left;
3019                 padding: .5em 1em;
3020                 text-decoration: none;
3021
3022                 &:hover {
3023                     background-color: #EDF4F5;
3024                     border-top-left-radius: 4px;
3025                     border-top-right-radius: 4px;
3026                     color: #538200;
3027                 }
3028             }
3029         }
3030     }
3031
3032     .tabs-container {
3033         background: none repeat scroll 0 0 transparent;
3034         border: 1px solid #B9D8D9;
3035         border-bottom-left-radius: 4px;
3036         border-bottom-right-radius: 4px;
3037         color: #222222;
3038         display: block;
3039         padding: 1em 1.4em;
3040     }
3041 }
3042
3043 .authref {
3044     font-style: normal;
3045     text-indent: 4em;
3046 }
3047
3048 .seefrom,
3049 .seealso {
3050     font-style: italic;
3051     text-indent: 2em;
3052 }
3053
3054 #authfinderops {
3055     float: right;
3056 }
3057
3058 .authorizedheading {
3059     font-weight: bold;
3060 }
3061
3062 .authres_notes,
3063 .authres_seealso,
3064 .authres_otherscript {
3065     padding-top: 3px;
3066 }
3067
3068 .authres_notes {
3069     font-style: italic;
3070 }
3071
3072
3073 .contents {
3074     width: 75%;
3075
3076     .r {
3077         display: inline;
3078     }
3079
3080     .t {
3081         display: inline;
3082         font-weight: bold;
3083
3084         &:first-child {
3085             &::before {
3086                 content: "→ ";
3087             }
3088         }
3089
3090         &::before {
3091             content: "\A→ ";
3092             white-space: pre;
3093         }
3094     }
3095 }
3096
3097 .contentblock {
3098     margin-left: 2em;
3099     position: relative;
3100 }
3101
3102 #hierarchies {
3103     a {
3104         color: #069;
3105         font-weight: normal;
3106         text-decoration: underline;
3107
3108         &:hover {
3109             color: #990033;
3110         }
3111     }
3112 }
3113
3114 #didyoumeanopac,
3115 #didyoumeanintranet {
3116     float: left;
3117     width: 260px;
3118 }
3119
3120 .pluginlist {
3121     padding-bottom: 10px;
3122 }
3123
3124 .plugin {
3125     margin: 0 1em 1em 0;
3126 }
3127
3128 .pluginname {
3129     background-color: #E6F0F2;
3130     cursor: move;
3131     margin: .3em;
3132     padding-bottom: 4px;
3133     padding-left: .2em;
3134
3135     .ui-icon {
3136         float: right;
3137     }
3138 }
3139
3140 .plugindesc {
3141     padding: .4em;
3142 }
3143
3144 .ui-sortable-placeholder {
3145     border: 1px dotted #000;
3146     height: 80px;
3147     visibility: visible;
3148
3149     * {
3150         visibility: hidden;
3151     }
3152 }
3153
3154 // jQuery UI Datepicker
3155 .ui-datepicker {
3156     box-shadow: 1px 1px 3px 0 #666;
3157
3158     table {
3159         border: 0;
3160         border-collapse: collapse;
3161         font-size: .9em;
3162         margin: 0 0 .4em;
3163         width: 100%;
3164     }
3165
3166     th {
3167         background: transparent none;
3168         border: 0;
3169         font-weight: bold;
3170         padding: .7em .3em;
3171         text-align: center;
3172     }
3173 }
3174
3175 .ui-datepicker-trigger {
3176     margin: 0 3px;
3177     vertical-align: middle;
3178 }
3179
3180 // css for timepicker
3181 .ui-timepicker-div {
3182     dl {
3183         text-align: left;
3184
3185         dd {
3186             margin: 0 10px 10px 65px;
3187         }
3188
3189         dt {
3190             height: 25px;
3191             margin-bottom: -25px;
3192         }
3193
3194         td {
3195             font-size: 90%;
3196         }
3197     }
3198
3199     .ui-widget-header {
3200         margin-bottom: 8px;
3201     }
3202 }
3203
3204 .ui-tpicker-grid-label {
3205     background: none;
3206     border: 0;
3207     margin: 0;
3208     padding: 0;
3209 }
3210
3211 .ui_tpicker_second,
3212 .ui_tpicker_millisec,
3213 .ui_tpicker_microsec {
3214     display: none;
3215 }
3216
3217 // jQuery UI Accordion
3218 .ui-accordion-header,
3219 .ui-widget-content .ui-accordion-header {
3220     font-size: 110%;
3221     font-weight: bold;
3222 }
3223
3224 video {
3225     width: 480px;
3226 }
3227
3228 // Bootstrap overrides
3229 button,
3230 .btn {
3231     border-color: #ADADAD #ADADAD #949494;
3232     font-family: $font-main;
3233
3234     &.btn-link {
3235         border: 0;
3236     }
3237 }
3238
3239 .btn-xs,
3240 .btn-group-xs > .btn {
3241     font-size: 10.5px;
3242     padding: 3px 5px;
3243 }
3244
3245 #toolbar {
3246     .dropdown-menu {
3247         border-top-width: 1px;
3248         font-size: 13px;
3249     }
3250
3251     &.floating {
3252         border-radius: 0;
3253         margin-top: 0;
3254     }
3255 }
3256
3257 .dropdown-menu {
3258     border-color: rgba(0, 0, 0, .2);
3259     border-top: 0;
3260     font-size: 12px;
3261
3262     li {
3263         list-style: none outside none;
3264
3265         > a,
3266         &.nav-header {
3267             padding: 4px 20px;
3268             cursor: pointer;
3269
3270             &:hover,
3271             &:focus {
3272                 background-image: linear-gradient(to bottom, #0088CC, #0077B3);
3273                 background-repeat: repeat-x;
3274                 color: #FFFFFF;
3275                 text-decoration: none;
3276             }
3277         }
3278     }
3279 }
3280
3281 .navbar {
3282     color: #333;
3283     min-height: 20px;
3284
3285     .nav {
3286         > li {
3287             list-style: none outside none;
3288             padding: 0 .6em;
3289
3290             > a {
3291                 color: #004D99;
3292                 font-weight: bold;
3293                 padding: .4em .2em;
3294
3295                 &:focus,
3296                 &:hover {
3297                     color: #538200;
3298                 }
3299             }
3300         }
3301
3302         li {
3303             .dropdown {
3304                 &.open > .dropdown-toggle:focus,
3305                 &.active > .dropdown-toggle:focus,
3306                 &.open.active > .dropdown-toggle:focus {
3307                     background: #E6F0F2 none;
3308                     box-shadow: none;
3309                 }
3310             }
3311         }
3312     }
3313
3314
3315 }
3316
3317 #changelanguage {
3318     min-height: $language-footer-min-height;
3319
3320     .dropdown-menu {
3321         > li {
3322             > a,
3323             > span {
3324                 padding: 5px 15px;
3325             }
3326         }
3327     }
3328
3329     .navbar-text {
3330         margin: 0;
3331
3332         span {
3333             display: block;
3334             line-height: 20px;
3335         }
3336     }
3337 }
3338
3339 .loggedout {
3340     color: #004D99;
3341     font-weight: bold;
3342     padding: .4em .2em;
3343 }
3344
3345 .navbar-static-top {
3346     .navbar-inner {
3347         background: #E6F0F2 none;
3348         border: 0;
3349         box-shadow: none;
3350         min-height: 0;
3351         padding-left: 0;
3352     }
3353 }
3354
3355 .navbar-fixed-bottom {
3356     .navbar-inner {
3357         min-height: 0;
3358         padding: .4em 0;
3359     }
3360
3361     .nav > li {
3362         border-right: 1px solid #CCC;
3363
3364         > a {
3365             font-weight: normal;
3366         }
3367
3368         &:last-child {
3369             border-right: 0;
3370         }
3371
3372         &.navbar-text {
3373             line-height: normal;
3374             padding: .4em .7em;
3375         }
3376     }
3377 }
3378
3379 .tooltip {
3380     &.bottom {
3381         .tooltip-arrow {
3382             border-bottom-color: #EEE;
3383         }
3384
3385         .tooltip-inner {
3386             background-color: #FFFFFF;
3387             border: 1px solid rgba(0, 0, 0, .2);
3388             box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
3389             color: #000;
3390             font-size: 120%;
3391             padding: 1em;
3392         }
3393     }
3394 }
3395
3396 .separator {
3397     color: #666;
3398     padding: 0 .2em;
3399 }
3400
3401 .close {
3402     filter: none;
3403     float: none;
3404     font-size: inherit;
3405     font-weight: normal;
3406     line-height: 1.5;
3407     opacity: inherit;
3408     position: inherit;
3409     right: auto;
3410     text-shadow: none;
3411     top: auto;
3412
3413     &:hover {
3414         color: inherit;
3415         filter: inherit;
3416         font-size: inherit;
3417         opacity: inherit;
3418     }
3419 }
3420
3421
3422 label {
3423     .radio &,
3424     .checkbox & {
3425         margin-left: 20px;
3426         padding-left: 0;
3427     }
3428 }
3429
3430 .radio {
3431     input {
3432         &[type="radio"] {
3433             margin-left: 0;
3434             position: relative;
3435         }
3436     }
3437 }
3438
3439 .checkbox {
3440     input {
3441         &[type="checkbox"] {
3442             margin-left: 0;
3443             position: relative;
3444         }
3445     }
3446 }
3447
3448 .modal-header {
3449     .closebtn {
3450         margin-top: 4px;
3451     }
3452 }
3453
3454 .closebtn {
3455     color: #000;
3456     filter: alpha(opacity = 20);
3457     float: right;
3458     font-size: 21px;
3459     font-weight: bold;
3460     line-height: 1;
3461     opacity: .2;
3462     text-shadow: 0 1px 0 #FFFFFF;
3463
3464     &:hover,
3465     &:focus {
3466         color: #000;
3467         cursor: pointer;
3468         filter: alpha(opacity = 50);
3469         opacity: .5;
3470         text-decoration: none;
3471     }
3472 }
3473
3474 .modal-body {
3475     background-color: #FFF;
3476     overflow-y: auto;
3477 }
3478
3479 .modal-content {
3480     background-color: #EDF4F6;
3481 }
3482
3483 .btn-group {
3484     label,
3485     select {
3486         font-size: 13px;
3487     }
3488 }
3489
3490 .tooltip-inner {
3491     white-space: pre-wrap;
3492 }
3493
3494 pre {
3495     background-color: transparent;
3496     border: 0;
3497     border-radius: 0;
3498     color: inherit;
3499     display: block;
3500     font-size: inherit;
3501     line-height: inherit;
3502     margin: 0;
3503     padding: 0;
3504     word-break: break-all;
3505     word-wrap: break-word;
3506 }
3507
3508 code {
3509     background-color: transparent;
3510     border-radius: 0;
3511     color: inherit;
3512     font-size: inherit;
3513     padding: 0;
3514 }
3515
3516 .pagination > li > a,
3517 .pagination > li > span {
3518     font-weight: bold;
3519 }
3520
3521 // End Bootstrap overrides
3522
3523 .waiting {
3524     cursor: wait;
3525 }
3526
3527 #jobpanel,
3528 #jobstatus,
3529 #jobfailed {
3530     display: none;
3531 }
3532
3533 #jobstatus {
3534     margin: .4em;
3535 }
3536
3537 #jobprogress {
3538     background: url("../img/progress.png") -300px 0 no-repeat;
3539     border: 1px solid #666;
3540     display: inline-block;
3541     height: 10px;
3542     width: 200px;
3543  }
3544
3545 .progress_panel {
3546     border: 2px solid #EEE;
3547     border-radius: 5px;
3548     clear: both;
3549     font-size: 120%;
3550     margin: 1em 0;
3551     padding: 1em;
3552 }
3553
3554 progress {
3555     width: 50%;
3556 }
3557
3558 #selections {
3559     white-space: normal;
3560     width: 100%;
3561
3562     input {
3563         margin: 0 2px;
3564         vertical-align: middle;
3565     }
3566
3567     span {
3568         background-color: #EBF3FF;
3569         border-radius: 5px;
3570         font-size: 75%;
3571         line-height: 240%;
3572         margin: 3px;
3573         padding: 3px;
3574         white-space: nowrap;
3575
3576         &.selected {
3577             background-color: #CCE0FC;
3578         }
3579     }
3580 }
3581
3582 #changepasswordf {
3583     input {
3584         &[type="text"],
3585         &[type="password"] {
3586             font-family: $font-monospace;
3587             font-size: 140%;
3588             padding: .3em;
3589         }
3590     }
3591 }
3592
3593 // Class to be added to toolbar when it starts being fixed at the top of the screen
3594
3595 .floating {
3596     box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .5);
3597 }
3598
3599 .inline {
3600     display: inline;
3601 }
3602
3603 .nowrap {
3604     white-space: nowrap;
3605 }
3606
3607 .tag_editor {
3608     background: transparent url("../img/edit-tag.png") top left no-repeat;
3609     display: block;
3610     float: left;
3611     height: 16px;
3612     margin: 4px;
3613     overflow: hidden;
3614     text-indent: 100%;
3615     white-space: nowrap;
3616     width: 16px;
3617 }
3618
3619 .browse-controls {
3620     margin-left: 1.1em;
3621     margin-right: .5em;
3622     padding-bottom: 1em;
3623     padding-top: 1em;
3624 }
3625
3626 #browse-return-to-results {
3627     border-top-left-radius: 3px;
3628     border-top-right-radius: 3px;
3629     display: block;
3630     text-align: center;
3631 }
3632
3633 .browse-button {
3634     color: #004D99;
3635     display: inline-block;
3636     padding: .4em .6em;
3637
3638     &:hover {
3639         background: #FAFAFA;
3640     }
3641 }
3642
3643 span {
3644     &.browse-button {
3645         background: #FAFAFA;
3646         color: #222;
3647     }
3648
3649     &.circ-hlt {
3650         color: #CC0000;
3651         font-weight: bold;
3652     }
3653
3654     &.expired {
3655         color: #990000;
3656         font-style: italic;
3657     }
3658
3659     &.name {
3660         font-style: italic;
3661         font-weight: bold;
3662     }
3663
3664     &.permissiondesc {
3665         font-weight: normal;
3666     }
3667
3668     &.required {
3669         color: #C00;
3670         font-style: italic;
3671         margin-left: .5em;
3672     }
3673 }
3674
3675
3676 .result-biblio-itemtype {
3677     float: right;
3678     font-size: 85%;
3679     margin: .5em;
3680     padding: .5em;
3681     text-align: center;
3682
3683     img {
3684         display: block;
3685         margin: auto;
3686         margin-bottom: 2px;
3687     }
3688 }
3689
3690 .browse-label,
3691 .browse-prev-next {
3692     border: 1px solid #B9D8D9;
3693 }
3694
3695 .browse-label {
3696     background-color: #E8F0F6;
3697     border-top-left-radius: 5px;
3698     border-top-right-radius: 5px;
3699 }
3700
3701 .browse-prev-next {
3702     border-bottom-left-radius: 5px;
3703     border-bottom-right-radius: 5px;
3704     border-top-width: 0;
3705 }
3706
3707 #browse-previous {
3708     border-bottom-left-radius: 5px;
3709     border-right: 1px solid #B9D8D9;
3710     padding-right: 1em;
3711 }
3712
3713 #browse-next {
3714     border-bottom-right-radius: 5px;
3715     border-top-width: 0;
3716     float: right;
3717     padding-right: 1em;
3718 }
3719
3720 .loading-overlay {
3721     background-color: #FFFFFF;
3722     cursor: wait;
3723     height: 100%;
3724     left: 0;
3725     opacity: .7;
3726     position: fixed;
3727     top: 0;
3728     width: 100%;
3729     z-index: 1000;
3730
3731     div {
3732         background: transparent url("../img/loading.gif") top left no-repeat;
3733         font-size: 175%;
3734         font-weight: bold;
3735         height: 2em;
3736         left: 50%;
3737         margin: -1em 0 0 -2.5em;
3738         padding-left: 50px;
3739         position: absolute;
3740         top: 50%;
3741         width: 15em;
3742     }
3743 }
3744
3745 #merge_invoices {
3746     display: none;
3747     margin: 1em auto;
3748 }
3749
3750 #merge {
3751     margin: .5em 0 0;
3752 }
3753
3754 #merge_table {
3755     tr {
3756         &.active {
3757             td {
3758                 background-color: #FFFFCC;
3759             }
3760         }
3761     }
3762 }
3763
3764 .renewals {
3765     display: block;
3766     font-size: .8em;
3767     padding: .5em;
3768 }
3769
3770 #transport-types {
3771     padding-top: .5px;
3772 }
3773
3774 #i18nMenu {
3775     .navbar-text {
3776         .currentlanguage {
3777             color: #000;
3778             font-weight: bold;
3779         }
3780     }
3781
3782     a {
3783         &.currentlanguage {
3784             &:link,
3785             &:visited {
3786                 font-weight: bold;
3787             }
3788         }
3789
3790         .sublanguage-selected {
3791             color: #000;
3792             font-weight: bold;
3793         }
3794     }
3795 }
3796
3797 .onsite_checkout-select {
3798     label,
3799     #circ_circulation_issue & {
3800         font-size: inherit;
3801         font-weight: normal;
3802     }
3803 }
3804
3805 .onsite_checkout {
3806     color: #CC0000;
3807 }
3808
3809 .onsite-checkout-only {
3810     background-color: rgba(255, 242, 206, .5);
3811     border: 1px solid #FFF2CE;
3812     border-radius: 4px;
3813 }
3814
3815 .branchgriditem {
3816     background-color: #FFFFFF;
3817     border: 1px solid #B9D8D9;
3818     border-radius: 3px;
3819     display: table-cell;
3820     float: left;
3821     margin: 3px;
3822     padding: .3em;
3823 }
3824
3825 .branchgridrow {
3826     display: table-row;
3827 }
3828
3829 .branchselector {
3830     display: table;
3831 }
3832
3833 .hq-author {
3834     font-weight: bold;
3835 }
3836
3837 #cn_browser_table_wrapper > #cn_browser_table {
3838     margin: auto;
3839     width: 90%;
3840 }
3841
3842 #new_rule {
3843     background-color: #F4F8F9;
3844     border: 2px solid #B9D8D9;
3845     border-radius: 5px;
3846     display: none;
3847     margin: .3em;
3848     padding: .3em;
3849 }
3850
3851
3852 .blocks {
3853     margin-bottom: .3em;
3854 }
3855
3856 .remove_rule {
3857     font-size: 80%;
3858     padding-left: .7em;
3859 }
3860
3861 .underline {
3862     text-decoration: underline;
3863 }
3864
3865 .overline {
3866     text-decoration: overline;
3867 }
3868
3869 .order-control {
3870     padding-right: 5px;
3871 }
3872
3873 #borrower_message {
3874     margin-top: 10px;
3875 }
3876
3877 .form-group {
3878     margin-bottom: 10px;
3879
3880     label {
3881         font-weight: bold;
3882     }
3883 }
3884
3885 .modal-textarea {
3886     width: 98%;
3887 }
3888
3889 #pat_member {
3890     #patron_list_dialog,
3891     #searchresults {
3892         display: none;
3893     }
3894 }
3895
3896 #patron_search {
3897     #filters {
3898         display: none;
3899     }
3900 }
3901
3902 #fixedlengthbuilderaction {
3903     border: 3px solid #E6F0F2;
3904     left: 80%;
3905     padding: 5px;
3906     position: relative;
3907     top: -80px;
3908     width: 12%;
3909 }
3910
3911 .navbar-default {
3912     .navbar-nav {
3913         > .open {
3914             > a {
3915                 &:hover,
3916                 &:focus {
3917                     background: #E6F0F2 none;
3918                     box-shadow: none;
3919                 }
3920             }
3921         }
3922     }
3923
3924     &.navbar-fixed-bottom {
3925         .navbar-nav {
3926             > .open {
3927                 > a {
3928                     &:hover,
3929                     &:focus {
3930                         background: transparent none;
3931                         box-shadow: none;
3932                     }
3933                 }
3934             }
3935         }
3936     }
3937 }
3938
3939 #interlibraryloans {
3940     #dataPreviewLabel {
3941         margin: .3em 0;
3942     }
3943
3944     .bg-info {
3945         overflow: auto;
3946         position: relative;
3947     }
3948
3949     .format {
3950         h4 {
3951             margin-bottom: 20px;
3952         }
3953
3954         h5 {
3955             margin-top: 20px;
3956         }
3957
3958         input {
3959             margin: 10px 0;
3960         }
3961
3962         li {
3963             list-style: none;
3964         }
3965     }
3966
3967     #add-new-fields {
3968         margin: 1em;
3969     }
3970
3971     #column-toggle,
3972     #reset-toggle {
3973         font-weight: 700;
3974         line-height: 1.5em;
3975         margin: 15px 0;
3976     }
3977
3978     #freeform-fields {
3979         .custom-name {
3980             margin-right: 1em;
3981             text-align: right;
3982             width: 9em;
3983         }
3984
3985         .delete-new-field {
3986             margin-left: 1em;
3987         }
3988     }
3989
3990     #search-summary {
3991         position: absolute;
3992         top: 50%;
3993         transform: translateY(-50%);
3994     }
3995 }
3996
3997 .ill-view-panel {
3998     margin-top: 15px;
3999
4000     .notesopac {
4001         display: inline-block;
4002     }
4003 }
4004
4005 #requestattributes {
4006     font-family: monospace;
4007     line-height: 1.3em;
4008 }
4009
4010 #ill-requests {
4011     width: 100% !important;
4012 }
4013
4014 #stockrotation {
4015     h3 {
4016         margin: 30px 0 10px 0;
4017     }
4018     .dialog {
4019         h3 {
4020             margin: 10px 0;
4021         }
4022         margin-bottom: 20px;
4023     }
4024     .highlight_stage {
4025         font-weight: bold;
4026     }
4027 }
4028
4029 #catalog_stockrotation .highlight_stage {
4030     font-weight: bold;
4031 }
4032
4033 #stockrotation {
4034     #rota_form {
4035         textarea {
4036             width: 300px;
4037             height: 100px;
4038         }
4039         #name {
4040             width: 300px;
4041         }
4042         fieldset {
4043             width: auto;
4044         }
4045     }
4046     #stage_form fieldset, #add_rota_item_form fieldset {
4047         width: auto;
4048     }
4049     .dialog.alert {
4050         ul {
4051             margin: 20px 0;
4052         }
4053         li {
4054             list-style-type: none;
4055         }
4056     }
4057 }
4058
4059 #catalog_stockrotation {
4060     .item_select_rota {
4061         vertical-align: middle;
4062     }
4063     h1 {
4064         margin-bottom: 20px;
4065     }
4066 }
4067
4068 #stockrotation td.actions, #catalog_stockrotation td.actions {
4069     vertical-align: middle;
4070 }
4071
4072 #stockrotation .stage, #catalog_stockrotation .stage {
4073     display: inline-block;
4074     padding: 5px 7px;
4075     margin: 3px 0 3px 0;
4076     border-radius: 5px;
4077     background-color: rgba(0, 0, 0, 0.1);
4078 }
4079
4080 #stage_list_headings {
4081     font-weight: bold;
4082     span {
4083         padding: 3px;
4084     }
4085 }
4086
4087 #manage_stages {
4088     ul {
4089         padding-left: 0;
4090     }
4091     li {
4092         list-style: none;
4093         margin-bottom: 5px;
4094         span {
4095             padding: 6px 3px;
4096         }
4097     }
4098     .stagename {
4099         width: 15em;
4100         display: inline-block;
4101     }
4102     .stageduration {
4103         width: 10em;
4104         display: inline-block;
4105     }
4106     .stageactions {
4107         display: inline-block;
4108     }
4109     li:nth-child(odd) {
4110         background-color: #F3F3F3;
4111     }
4112     .drag_handle {
4113         margin-right: 6px;
4114         cursor: move;
4115     }
4116     .drag_placeholder {
4117         height: 2em;
4118         border: 1px dotted #aaa;
4119     }
4120     h3 {
4121         display: inline-block;
4122     }
4123     #ajax_status {
4124         display: inline-block;
4125         border: 1px solid #bcbcbc;
4126         border-radius: 5px;
4127         padding: 5px;
4128         margin-left: 10px;
4129         background: #f3f3f3;
4130     }
4131     #manage_stages_help {
4132         margin: 20px 0;
4133     }
4134 }
4135
4136 #helper {
4137     span {
4138         display: none;
4139     }
4140 }
4141
4142 #logged-in-info-full {
4143     display: none;
4144 }
4145
4146 .loggedin-menu-label {
4147     color: #777;
4148     font-size: 12px;
4149     line-height: 1.42857143;
4150     padding: 4px 12px;
4151     white-space: nowrap;
4152
4153     span {
4154         color: #000;
4155         font-weight: bold;
4156     }
4157
4158     &.divider {
4159         padding: 0;
4160     }
4161 }
4162
4163 .lastborrower {
4164     background-color: #E6F0F2;
4165     border: 1px solid #95C6D0;
4166     box-shadow: 1px 1px 1px 0 #999;
4167     color: #CC0000;
4168     margin: .4em 0;
4169     padding: .3em .5em .3em .5em;
4170 }
4171
4172 #lastborrower-ref {
4173     border-radius: 5px 0px 0px 5px;
4174     float: left;
4175 }
4176
4177 #lastborrower-remove {
4178     border-radius: 0px 5px 5px 0px;
4179     cursor: pointer;
4180     float: right;
4181 }
4182
4183 #lastborrower-window {
4184     display: none;
4185     position: absolute;
4186     right: 5px;
4187     top: 100px;
4188 }
4189
4190 /* ==== MODULE LINKS - Start ==== */
4191 .buttons-list {
4192     // List containing the module links
4193     margin-bottom: 30px;
4194     padding: 0;
4195
4196     li {
4197         // Standard attributes for the list elements
4198         list-style-type: none;
4199
4200         a {
4201             &.circ-button {
4202                 // Class used for each module link
4203                 background-color: #F4F8F9;
4204                 background-position: 5px 3px;
4205                 background-repeat: no-repeat;
4206                 border: 2px solid #B9D8D9;
4207                 border-radius: 6px;
4208                 box-sizing: content-box;
4209                 color: #000000;
4210                 display: block;
4211                 font-size: 110%;
4212                 font-weight: bold;
4213                 margin: .5em 0;
4214                 max-width: 260px;
4215                 padding: 8px;
4216                 text-decoration: none;
4217
4218                 &:hover {
4219                     // Class used for each module link hover state
4220                     border-color: #538200;
4221                     color: #538200;
4222                 }
4223             }
4224         }
4225     }
4226 }
4227
4228 .about h2 {
4229     border-bottom: 1px solid #B9D8D9;
4230     padding: .5em .2em;
4231     margin:  .5em 0;
4232 }
4233
4234 .columns-3 {
4235     columns: 3 auto;
4236     column-gap: 2.5em;
4237 }
4238
4239 .columns-4 {
4240     columns: 4 auto;
4241     column-gap: 2em;
4242 }
4243
4244 // ==== MODULE LINKS - End ====
4245
4246 #catalog-search-link {
4247     border-right: 1px solid lighten( #E6F0F2, 15% );
4248     padding-right: .3em;
4249 }
4250
4251 #catalog-search-dropdown {
4252     padding: 0;
4253
4254     & > a {
4255         border-left: 1px solid darken( #B4D2D8, 5% );
4256         margin-right: .6em;
4257         padding: .4em .6em;
4258
4259         &:hover,
4260         &.catalog-search-dropdown-hover {
4261             background-color: darken( #E6F0F2, 5% );
4262             border-left: 1px solid darken( #B4D2D8, 15% );
4263         }
4264     }
4265 }
4266
4267 .adlibris-cover {
4268     max-height: 120px;
4269 }
4270
4271 .adlibris-cover-big {
4272     max-height: 200px;
4273 }
4274
4275 #tools_holidays {
4276     .radio,
4277     .checkbox {
4278         label {
4279             margin-left: 0;
4280         }
4281     }
4282 }
4283
4284 @media (min-width: 200px) {
4285     .navbar-nav > li {
4286         float: left;
4287     }
4288
4289     .navbar-right {
4290         float: right !important;
4291         margin-right: -15px;
4292     }
4293
4294     .navbar-nav {
4295         float: left;
4296         margin: 0;
4297
4298         .open {
4299             .dropdown-menu {
4300                 background-color: #FFF;
4301                 border: 1px solid rgba(0, 0, 0, .15);
4302                 box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
4303                 float: left;
4304                 position: absolute;
4305                 width: auto;
4306
4307                 &.dropdown-menu-left {
4308                     left: auto;
4309                     right: 0;
4310                 }
4311
4312                 &.dropdown-menu-right {
4313                     right: auto;
4314                 }
4315             }
4316         }
4317     }
4318
4319     .navbar-default {
4320         .navbar-nav {
4321             .open {
4322                 .dropdown-menu {
4323                     > li {
4324                         > a {
4325                             &:hover,
4326                             &:focus {
4327                                 background-color: #0081C2;
4328                                 background-image: linear-gradient(to bottom, #0088CC, #0077B3);
4329                                 background-repeat: repeat-x;
4330                                 color: #FFFFFF;
4331                                 text-decoration: none;
4332                             }
4333                         }
4334                     }
4335                 }
4336             }
4337         }
4338     }
4339 }
4340
4341 @media (min-width: 800px) {
4342     #helper {
4343         i {
4344             display: none;
4345         }
4346
4347         span {
4348             display: inline;
4349         }
4350     }
4351
4352     #logged-in-info-full {
4353         display: inline;
4354     }
4355
4356     #logged-in-info-brief {
4357         display: none;
4358     }
4359
4360     .loggedin-menu-label {
4361         display: none;
4362     }
4363 }
4364
4365 div#makechart ol li {
4366     list-style: none;
4367 }