49db5025f27f382a10c5715a2605d41cbd177b4b
[emels.git] / emels / static / admin / css / base.css
1 /*
2     DJANGO Admin styles
3 */
4
5 @import url(fonts.css);
6
7 body {
8     margin: 0;
9     padding: 0;
10     font-size: 14px;
11     font-family: "Roboto","Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
12     color: #333;
13     background: #fff;
14 }
15
16 /* LINKS */
17
18 a:link, a:visited {
19     color: #447e9b;
20     text-decoration: none;
21 }
22
23 a:focus, a:hover {
24     color: #036;
25 }
26
27 a:focus {
28     text-decoration: underline;
29 }
30
31 a img {
32     border: none;
33 }
34
35 a.section:link, a.section:visited {
36     color: #fff;
37     text-decoration: none;
38 }
39
40 a.section:focus, a.section:hover {
41     text-decoration: underline;
42 }
43
44 /* GLOBAL DEFAULTS */
45
46 p, ol, ul, dl {
47     margin: .2em 0 .8em 0;
48 }
49
50 p {
51     padding: 0;
52     line-height: 140%;
53 }
54
55 h1,h2,h3,h4,h5 {
56     font-weight: bold;
57 }
58
59 h1 {
60     margin: 0 0 20px;
61     font-weight: 300;
62     font-size: 20px;
63     color: #666;
64 }
65
66 h2 {
67     font-size: 16px;
68     margin: 1em 0 .5em 0;
69 }
70
71 h2.subhead {
72     font-weight: normal;
73     margin-top: 0;
74 }
75
76 h3 {
77     font-size: 14px;
78     margin: .8em 0 .3em 0;
79     color: #666;
80     font-weight: bold;
81 }
82
83 h4 {
84     font-size: 12px;
85     margin: 1em 0 .8em 0;
86     padding-bottom: 3px;
87 }
88
89 h5 {
90     font-size: 10px;
91     margin: 1.5em 0 .5em 0;
92     color: #666;
93     text-transform: uppercase;
94     letter-spacing: 1px;
95 }
96
97 ul li {
98     list-style-type: square;
99     padding: 1px 0;
100 }
101
102 li ul {
103     margin-bottom: 0;
104 }
105
106 li, dt, dd {
107     font-size: 13px;
108     line-height: 20px;
109 }
110
111 dt {
112     font-weight: bold;
113     margin-top: 4px;
114 }
115
116 dd {
117     margin-left: 0;
118 }
119
120 form {
121     margin: 0;
122     padding: 0;
123 }
124
125 fieldset {
126     margin: 0;
127     padding: 0;
128     border: none;
129     border-top: 1px solid #eee;
130 }
131
132 blockquote {
133     font-size: 11px;
134     color: #777;
135     margin-left: 2px;
136     padding-left: 10px;
137     border-left: 5px solid #ddd;
138 }
139
140 code, pre {
141     font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
142     color: #666;
143     font-size: 12px;
144 }
145
146 pre.literal-block {
147     margin: 10px;
148     background: #eee;
149     padding: 6px 8px;
150 }
151
152 code strong {
153     color: #930;
154 }
155
156 hr {
157     clear: both;
158     color: #eee;
159     background-color: #eee;
160     height: 1px;
161     border: none;
162     margin: 0;
163     padding: 0;
164     font-size: 1px;
165     line-height: 1px;
166 }
167
168 /* TEXT STYLES & MODIFIERS */
169
170 .small {
171     font-size: 11px;
172 }
173
174 .tiny {
175     font-size: 10px;
176 }
177
178 p.tiny {
179     margin-top: -2px;
180 }
181
182 .mini {
183     font-size: 10px;
184 }
185
186 p.mini {
187     margin-top: -3px;
188 }
189
190 .help, p.help, form p.help {
191     font-size: 11px;
192     color: #999;
193 }
194
195 .help-tooltip {
196     cursor: help;
197 }
198
199 p img, h1 img, h2 img, h3 img, h4 img, td img {
200     vertical-align: middle;
201 }
202
203 .quiet, a.quiet:link, a.quiet:visited {
204     color: #999;
205     font-weight: normal;
206 }
207
208 .float-right {
209     float: right;
210 }
211
212 .float-left {
213     float: left;
214 }
215
216 .clear {
217     clear: both;
218 }
219
220 .align-left {
221     text-align: left;
222 }
223
224 .align-right {
225     text-align: right;
226 }
227
228 .example {
229     margin: 10px 0;
230     padding: 5px 10px;
231     background: #efefef;
232 }
233
234 .nowrap {
235     white-space: nowrap;
236 }
237
238 /* TABLES */
239
240 table {
241     border-collapse: collapse;
242     border-color: #ccc;
243 }
244
245 td, th {
246     font-size: 13px;
247     line-height: 16px;
248     border-bottom: 1px solid #eee;
249     vertical-align: top;
250     padding: 8px;
251     font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
252 }
253
254 th {
255     font-weight: 600;
256     text-align: left;
257 }
258
259 thead th,
260 tfoot td {
261     color: #666;
262     padding: 5px 10px;
263     font-size: 11px;
264     background: #fff;
265     border: none;
266     border-top: 1px solid #eee;
267     border-bottom: 1px solid #eee;
268 }
269
270 tfoot td {
271     border-bottom: none;
272     border-top: 1px solid #eee;
273 }
274
275 thead th.required {
276     color: #000;
277 }
278
279 tr.alt {
280     background: #f6f6f6;
281 }
282
283 .row1 {
284     background: #fff;
285 }
286
287 .row2 {
288     background: #f9f9f9;
289 }
290
291 /* SORTABLE TABLES */
292
293 thead th {
294     padding: 5px 10px;
295     line-height: normal;
296     text-transform: uppercase;
297     background: #f6f6f6;
298 }
299
300 thead th a:link, thead th a:visited {
301     color: #666;
302 }
303
304 thead th.sorted {
305     background: #eee;
306 }
307
308 thead th.sorted .text {
309     padding-right: 42px;
310 }
311
312 table thead th .text span {
313     padding: 8px 10px;
314     display: block;
315 }
316
317 table thead th .text a {
318     display: block;
319     cursor: pointer;
320     padding: 8px 10px;
321 }
322
323 table thead th .text a:focus, table thead th .text a:hover {
324     background: #eee;
325 }
326
327 thead th.sorted a.sortremove {
328     visibility: hidden;
329 }
330
331 table thead th.sorted:hover a.sortremove {
332     visibility: visible;
333 }
334
335 table thead th.sorted .sortoptions {
336     display: block;
337     padding: 9px 5px 0 5px;
338     float: right;
339     text-align: right;
340 }
341
342 table thead th.sorted .sortpriority {
343     font-size: .8em;
344     min-width: 12px;
345     text-align: center;
346     vertical-align: 3px;
347     margin-left: 2px;
348     margin-right: 2px;
349 }
350
351 table thead th.sorted .sortoptions a {
352     position: relative;
353     width: 14px;
354     height: 14px;
355     display: inline-block;
356     background: url(../img/sorting-icons.svg) 0 0 no-repeat;
357     background-size: 14px auto;
358 }
359
360 table thead th.sorted .sortoptions a.sortremove {
361     background-position: 0 0;
362 }
363
364 table thead th.sorted .sortoptions a.sortremove:after {
365     content: '\\';
366     position: absolute;
367     top: -6px;
368     left: 3px;
369     font-weight: 200;
370     font-size: 18px;
371     color: #999;
372 }
373
374 table thead th.sorted .sortoptions a.sortremove:focus:after,
375 table thead th.sorted .sortoptions a.sortremove:hover:after {
376     color: #447e9b;
377 }
378
379 table thead th.sorted .sortoptions a.sortremove:focus,
380 table thead th.sorted .sortoptions a.sortremove:hover {
381     background-position: 0 -14px;
382 }
383
384 table thead th.sorted .sortoptions a.ascending {
385     background-position: 0 -28px;
386 }
387
388 table thead th.sorted .sortoptions a.ascending:focus,
389 table thead th.sorted .sortoptions a.ascending:hover {
390     background-position: 0 -42px;
391 }
392
393 table thead th.sorted .sortoptions a.descending {
394     top: 1px;
395     background-position: 0 -56px;
396 }
397
398 table thead th.sorted .sortoptions a.descending:focus,
399 table thead th.sorted .sortoptions a.descending:hover {
400     background-position: 0 -70px;
401 }
402
403 /* FORM DEFAULTS */
404
405 input, textarea, select, .form-row p, form .button {
406     margin: 2px 0;
407     padding: 2px 3px;
408     vertical-align: middle;
409     font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
410     font-weight: normal;
411     font-size: 13px;
412 }
413
414 textarea {
415     vertical-align: top;
416 }
417
418 input[type=text], input[type=password], input[type=email], input[type=url],
419 input[type=number], textarea, select, .vTextField {
420     border: 1px solid #ccc;
421     border-radius: 4px;
422     padding: 5px 6px;
423     margin-top: 0;
424 }
425
426 input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
427 input[type=url]:focus, input[type=number]:focus, textarea:focus, select:focus,
428 .vTextField:focus {
429     border-color: #999;
430 }
431
432 select {
433     height: 30px;
434 }
435
436 select[multiple] {
437     min-height: 150px;
438 }
439
440 /* FORM BUTTONS */
441
442 .button, input[type=submit], input[type=button], .submit-row input, a.button {
443     background: #79aec8;
444     padding: 10px 15px;
445     border: none;
446     border-radius: 4px;
447     color: #fff;
448     cursor: pointer;
449 }
450
451 a.button {
452     padding: 4px 5px;
453 }
454
455 .button:active, input[type=submit]:active, input[type=button]:active,
456 .button:focus, input[type=submit]:focus, input[type=button]:focus,
457 .button:hover, input[type=submit]:hover, input[type=button]:hover {
458     background: #609ab6;
459 }
460
461 .button[disabled], input[type=submit][disabled], input[type=button][disabled] {
462     opacity: 0.4;
463 }
464
465 .button.default, input[type=submit].default, .submit-row input.default {
466     float: right;
467     border: none;
468     font-weight: 400;
469     background: #417690;
470 }
471
472 .button.default:active, input[type=submit].default:active,
473 .button.default:focus, input[type=submit].default:focus,
474 .button.default:hover, input[type=submit].default:hover {
475     background: #205067;
476 }
477
478 .button[disabled].default,
479 input[type=submit][disabled].default,
480 input[type=button][disabled].default {
481     opacity: 0.4;
482 }
483
484
485 /* MODULES */
486
487 .module {
488     border: none;
489     margin-bottom: 30px;
490     background: #fff;
491 }
492
493 .module p, .module ul, .module h3, .module h4, .module dl, .module pre {
494     padding-left: 10px;
495     padding-right: 10px;
496 }
497
498 .module blockquote {
499     margin-left: 12px;
500 }
501
502 .module ul, .module ol {
503     margin-left: 1.5em;
504 }
505
506 .module h3 {
507     margin-top: .6em;
508 }
509
510 .module h2, .module caption, .inline-group h2 {
511     margin: 0;
512     padding: 8px;
513     font-weight: 400;
514     font-size: 13px;
515     text-align: left;
516     background: #79aec8;
517     color: #fff;
518 }
519
520 .module caption,
521 .inline-group h2 {
522     font-size: 12px;
523     letter-spacing: 0.5px;
524     text-transform: uppercase;
525 }
526
527 .module table {
528     border-collapse: collapse;
529 }
530
531 /* MESSAGES & ERRORS */
532
533 ul.messagelist {
534     padding: 0;
535     margin: 0;
536 }
537
538 ul.messagelist li {
539     display: block;
540     font-weight: 400;
541     font-size: 13px;
542     padding: 10px 10px 10px 65px;
543     margin: 0 0 10px 0;
544     background: #dfd url(../img/icon-yes.svg) 40px 12px no-repeat;
545     background-size: 16px auto;
546     color: #333;
547 }
548
549 ul.messagelist li.warning {
550     background: #ffc url(../img/icon-alert.svg) 40px 14px no-repeat;
551     background-size: 14px auto;
552 }
553
554 ul.messagelist li.error {
555     background: #ffefef url(../img/icon-no.svg) 40px 12px no-repeat;
556     background-size: 16px auto;
557 }
558
559 .errornote {
560     font-size: 14px;
561     font-weight: 700;
562     display: block;
563     padding: 10px 12px;
564     margin: 0 0 10px 0;
565     color: #ba2121;
566     border: 1px solid #ba2121;
567     border-radius: 4px;
568     background-color: #fff;
569     background-position: 5px 12px;
570 }
571
572 ul.errorlist {
573     margin: 0 0 4px;
574     padding: 0;
575     color: #ba2121;
576     background: #fff;
577 }
578
579 ul.errorlist li {
580     font-size: 13px;
581     display: block;
582     margin-bottom: 4px;
583 }
584
585 ul.errorlist li:first-child {
586     margin-top: 0;
587 }
588
589 ul.errorlist li a {
590     color: inherit;
591     text-decoration: underline;
592 }
593
594 td ul.errorlist {
595     margin: 0;
596     padding: 0;
597 }
598
599 td ul.errorlist li {
600     margin: 0;
601 }
602
603 .form-row.errors {
604     margin: 0;
605     border: none;
606     border-bottom: 1px solid #eee;
607     background: none;
608 }
609
610 .form-row.errors ul.errorlist li {
611     padding-left: 0;
612 }
613
614 .errors input, .errors select, .errors textarea {
615     border: 1px solid #ba2121;
616 }
617
618 div.system-message {
619     background: #ffc;
620     margin: 10px;
621     padding: 6px 8px;
622     font-size: .8em;
623 }
624
625 div.system-message p.system-message-title {
626     padding: 4px 5px 4px 25px;
627     margin: 0;
628     color: #c11;
629     background: #ffefef url(../img/icon-no.svg) 5px 5px no-repeat;
630 }
631
632 .description {
633     font-size: 12px;
634     padding: 5px 0 0 12px;
635 }
636
637 /* BREADCRUMBS */
638
639 div.breadcrumbs {
640     background: #79aec8;
641     padding: 10px 40px;
642     border: none;
643     font-size: 14px;
644     color: #c4dce8;
645     text-align: left;
646 }
647
648 div.breadcrumbs a {
649     color: #fff;
650 }
651
652 div.breadcrumbs a:focus, div.breadcrumbs a:hover {
653     color: #c4dce8;
654 }
655
656 /* ACTION ICONS */
657
658 .addlink {
659     padding-left: 16px;
660     background: url(../img/icon-addlink.svg) 0 1px no-repeat;
661 }
662
663 .changelink, .inlinechangelink {
664     padding-left: 16px;
665     background: url(../img/icon-changelink.svg) 0 1px no-repeat;
666 }
667
668 .deletelink {
669     padding-left: 16px;
670     background: url(../img/icon-deletelink.svg) 0 1px no-repeat;
671 }
672
673 a.deletelink:link, a.deletelink:visited {
674     color: #CC3434;
675 }
676
677 a.deletelink:focus, a.deletelink:hover {
678     color: #993333;
679     text-decoration: none;
680 }
681
682 /* OBJECT TOOLS */
683
684 .object-tools {
685     font-size: 10px;
686     font-weight: bold;
687     padding-left: 0;
688     float: right;
689     position: relative;
690     margin-top: -48px;
691 }
692
693 .form-row .object-tools {
694     margin-top: 5px;
695     margin-bottom: 5px;
696     float: none;
697     height: 2em;
698     padding-left: 3.5em;
699 }
700
701 .object-tools li {
702     display: block;
703     float: left;
704     margin-left: 5px;
705     height: 16px;
706 }
707
708 .object-tools a {
709     border-radius: 15px;
710 }
711
712 .object-tools a:link, .object-tools a:visited {
713     display: block;
714     float: left;
715     padding: 3px 12px;
716     background: #999;
717     font-weight: 400;
718     font-size: 11px;
719     text-transform: uppercase;
720     letter-spacing: 0.5px;
721     color: #fff;
722 }
723
724 .object-tools a:focus, .object-tools a:hover {
725     background-color: #417690;
726 }
727
728 .object-tools a:focus{
729     text-decoration: none;
730 }
731
732 .object-tools a.viewsitelink, .object-tools a.golink,.object-tools a.addlink {
733     background-repeat: no-repeat;
734     background-position: 93% center;
735     padding-right: 26px;
736 }
737
738 .object-tools a.viewsitelink, .object-tools a.golink {
739     background-image: url(../img/tooltag-arrowright.svg);
740 }
741
742 .object-tools a.addlink {
743     background-image: url(../img/tooltag-add.svg);
744 }
745
746 /* OBJECT HISTORY */
747
748 table#change-history {
749     width: 100%;
750 }
751
752 table#change-history tbody th {
753     width: 16em;
754 }
755
756 /* PAGE STRUCTURE */
757
758 #container {
759     position: relative;
760     width: 100%;
761     min-width: 980px;
762     padding: 0;
763 }
764
765 #content {
766     padding: 20px 40px;
767 }
768
769 .dashboard #content {
770     width: 600px;
771 }
772
773 #content-main {
774     float: left;
775     width: 100%;
776 }
777
778 #content-related {
779     float: right;
780     width: 260px;
781     position: relative;
782     margin-right: -300px;
783 }
784
785 #footer {
786     clear: both;
787     padding: 10px;
788 }
789
790 /* COLUMN TYPES */
791
792 .colMS {
793     margin-right: 300px;
794 }
795
796 .colSM {
797     margin-left: 300px;
798 }
799
800 .colSM #content-related {
801     float: left;
802     margin-right: 0;
803     margin-left: -300px;
804 }
805
806 .colSM #content-main {
807     float: right;
808 }
809
810 .popup .colM {
811     width: auto;
812 }
813
814 /* HEADER */
815
816 #header {
817     width: auto;
818     height: 40px;
819     padding: 10px 40px;
820     background: #417690;
821     line-height: 40px;
822     color: #ffc;
823     overflow: hidden;
824 }
825
826 #header a:link, #header a:visited {
827     color: #fff;
828 }
829
830 #header a:focus , #header a:hover {
831     text-decoration: underline;
832 }
833
834 #branding {
835     float: left;
836 }
837
838 #branding h1 {
839     padding: 0;
840     margin: 0 20px 0 0;
841     font-weight: 300;
842     font-size: 24px;
843     color: #f5dd5d;
844 }
845
846 #branding h1, #branding h1 a:link, #branding h1 a:visited {
847     color: #f5dd5d;
848 }
849
850 #branding h2 {
851     padding: 0 10px;
852     font-size: 14px;
853     margin: -8px 0 8px 0;
854     font-weight: normal;
855     color: #ffc;
856 }
857
858 #branding a:hover {
859     text-decoration: none;
860 }
861
862 #user-tools {
863     float: right;
864     padding: 0;
865     margin: 0 0 0 20px;
866     font-weight: 300;
867     font-size: 11px;
868     letter-spacing: 0.5px;
869     text-transform: uppercase;
870     text-align: right;
871 }
872
873 #user-tools a {
874     border-bottom: 1px solid rgba(255, 255, 255, 0.25);
875 }
876
877 #user-tools a:focus, #user-tools a:hover {
878     text-decoration: none;
879     border-bottom-color: #79aec8;
880     color: #79aec8;
881 }
882
883 /* SIDEBAR */
884
885 #content-related {
886     background: #f8f8f8;
887 }
888
889 #content-related .module {
890     background: none;
891 }
892
893 #content-related h3 {
894     font-size: 14px;
895     color: #666;
896     padding: 0 16px;
897     margin: 0 0 16px;
898 }
899
900 #content-related h4 {
901     font-size: 13px;
902 }
903
904 #content-related p {
905     padding-left: 16px;
906     padding-right: 16px;
907 }
908
909 #content-related .actionlist {
910     padding: 0;
911     margin: 16px;
912 }
913
914 #content-related .actionlist li {
915     line-height: 1.2;
916     margin-bottom: 10px;
917     padding-left: 18px;
918 }
919
920 #content-related .module h2 {
921     background: none;
922     padding: 16px;
923     margin-bottom: 16px;
924     border-bottom: 1px solid #eaeaea;
925     font-size: 18px;
926     color: #333;
927 }
928
929 .delete-confirmation form input[type="submit"] {
930     background: #ba2121;
931     border-radius: 4px;
932     padding: 10px 15px;
933     color: #fff;
934 }
935
936 .delete-confirmation form input[type="submit"]:active,
937 .delete-confirmation form input[type="submit"]:focus,
938 .delete-confirmation form input[type="submit"]:hover {
939     background: #a41515;
940 }
941
942 .delete-confirmation form .cancel-link {
943     display: inline-block;
944     vertical-align: middle;
945     height: 15px;
946     line-height: 15px;
947     background: #ddd;
948     border-radius: 4px;
949     padding: 10px 15px;
950     color: #333;
951     margin: 0 0 0 10px;
952 }
953
954 .delete-confirmation form .cancel-link:active,
955 .delete-confirmation form .cancel-link:focus,
956 .delete-confirmation form .cancel-link:hover {
957     background: #ccc;
958 }
959
960 /* POPUP */
961 .popup #content {
962     padding: 20px;
963 }
964
965 .popup #container {
966     min-width: 0;
967 }
968
969 .popup #header {
970     padding: 10px 20px;
971 }