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