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