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