themes/freifunk-generic: Add possibility to use custom logo/header
[project/luci.git] / themes / freifunk-generic / htdocs / luci-static / freifunk-generic / cascade.css
1 @charset "utf-8";
2
3 @media all {
4
5 html {
6 min-height: 100%;
7 height: auto;
8 }
9
10 body {
11 color: #ccc;
12 background:#e5eef5 url(bg.jpg) repeat-x top left;
13 font-family: Verdana, Arial, sans-serif;
14 font-size: 100%;
15 line-height: 100%;
16 padding-bottom: 1.5em;
17 }
18
19 html, body {
20 height: 99%;
21 }
22
23 * {
24 margin: 0;
25 padding: 0;
26 }
27
28 abbr,
29 acronym {
30 font-style: normal;
31 font-variant: normal;
32 }
33
34 abbr[title],
35 acronym[title] {
36 border-bottom: 1px dotted;
37 cursor: help;
38 }
39
40 a:link abbr[title],
41 a:visited abbr[title],
42 a:link acronym[title],
43 a:visited acronym[title] {
44 cursor: pointer;
45 }
46
47 code {
48 font-family: monospace;
49 white-space: pre;
50 }
51
52 #maincontent ul {
53 margin-left: 2em;
54 }
55
56 .warning {
57 color: red;
58 background-color: white;
59 font-weight: bold;
60 text-decoration: blink;
61 }
62
63 .clear {
64 clear: both;
65 }
66
67 a img {
68 border: 0;
69 }
70
71 .skiplink,
72 .navigation,
73 .hidden {
74 position: absolute;
75 left: -1000px;
76 top: -1000px;
77 width: 0px;
78 height: 0px;
79 overflow: hidden;
80 display: inline;
81 }
82
83 .error {
84 color: #f00;
85 background-color: white;
86 }
87
88 .errorbox {
89 border: 1px solid #F00;
90 background-color: #FCC;
91 padding: 5px;
92 }
93
94 #header {height: auto;
95 background: #FFF url(header.jpg) repeat-x left bottom;
96 color: #ccc;
97 font-weight: bold;
98 text-align:right;
99 }
100
101 .header_left img {
102 padding: 10px 10px 0px 10px;
103 }
104
105 .header_banner {
106 overflow:hidden;
107 padding-bottom: 6px;
108 text-align:left;
109 }
110
111 .header_banner img{
112 padding: 0px;
113 }
114
115 .header_left{
116 text-align:left;
117 }
118
119 .header_left a{
120 color: #dc0067;
121 font: bold 36px Helvetica;
122 text-decoration: none;
123 }
124
125 .header_left .spacer {
126 height: 12px;
127 min-height:12px;
128 width:99%;
129 }
130
131 #header h1,
132 .header_right {
133 position: absolute;
134 text-align: right;
135 top: 10px;
136 right: 10px;
137 font-size: 70%;
138 font-weight: normal;
139 line-height: 160%;
140 }
141
142 ul.dropdowns {
143 float: left;
144 margin: 0;
145 padding: 0;
146 width: auto;
147 list-style: none;
148 }
149
150 html>body ul.dropdowns {
151 position: relative;
152 }
153
154 ul.dropdowns li,
155 ul.dropdowns ul {
156 margin: 0;
157 padding: 0;
158 list-style: none;
159 }
160
161 ul.dropdowns li {
162 float: left;
163 position: relative;
164 white-space: nowrap;
165 }
166
167 ul.dropdowns li ul {
168 position: absolute;
169 z-index: 1000;
170 top: auto;
171 min-width: 10em;
172 }
173
174 ul.dropdowns li li {
175 float: none;
176 position: relative;
177 }
178
179 ul.dropdowns li a {
180 display: block;
181 }
182
183 ul.dropdowns ul li ul {
184 top: 0;
185 }
186
187 ul.dropdowns li ul,
188 ul.dropdowns li.over ul ul,
189 ul.dropdowns li.focus ul ul,
190 ul.dropdowns li:hover ul ul,
191 ul.dropdowns li.over ul ul ul,
192 ul.dropdowns li.focus ul ul ul,
193 ul.dropdowns li:hover ul ul ul,
194 ul.dropdowns li.over ul ul ul ul,
195 ul.dropdowns li.focus ul ul ul ul,
196 ul.dropdowns li:hover ul ul ul ul {
197 left: -3000px;
198 }
199
200 ul.dropdowns li.over ul,
201 ul.dropdowns li.focus ul,
202 ul.dropdowns li:hover ul {
203 left: 0;
204 }
205
206 ul.dropdowns ul li.over ul,
207 ul.dropdowns ul li.focus ul,
208 ul.dropdowns ul li:hover ul,
209 ul.dropdowns ul ul li.over ul,
210 ul.dropdowns ul ul li.focus ul,
211 ul.dropdowns ul ul li:hover ul,
212 ul.dropdowns ul ul ul li.over ul,
213 ul.dropdowns ul ul ul li.focus ul,
214 ul.dropdowns ul ul ul li:hover ul {
215 left: 100%;
216 }
217
218 #menubar {
219 position: relative;
220 width: 100%;
221 background: #FFF;
222 color: #004a9c;
223 }
224
225 #menubar .warning {
226 color: red;
227 background-color: #FFF;
228 }
229
230 #menubar ul.dropdowns {
231 min-height: 1.8em;
232 background: #FFF;
233 color: #004a9c;
234 }
235
236 #menubar ul.dropdowns li ul {
237 background: #FFF;
238 color: #004a9c;
239 border-width: 0 1px 1px 1px;
240 border-style: dashed;
241 border-color: #5a5a5a;
242 }
243
244 #menubar ul.dropdowns ul li ul {
245 border-width: 1px;
246 }
247
248 html #menubar a:link,
249 html #menubar a:visited {
250 position: relative;
251 display: block;
252 padding: 0.5em;
253 background: #FFF;
254 color: #004a9c;
255 text-decoration: none;
256 font-size: 80%;
257 font-weight: normal;
258 }
259
260 html #menubar a:link:hover,
261 html #menubar a:visited:hover,
262 html #menubar a:link:active,
263 html #menubar a:visited:active,
264 #menubar a:link:focus,
265 #menubar a:visited:focus {
266 background: #F2F2F2;
267 color: #e60076;
268 }
269
270 html #menubar a:link.active,
271 html #menubar a:visited.active,
272 html #menubar a:link.preactive,
273 html #menubar a:visited.preactive {
274 background: #FFF;
275 color: #e60076;
276 }
277
278 html #menubar a:link.warning,
279 html #menubar a:visited.warning {
280 background: #FFF;
281 color: red;
282 font-weight: bold;
283 text-decoration: blink;
284 }
285
286 #menubar ul.dropdowns li.over>a,
287 #menubar ul.dropdowns li.focus>a,
288 #menubar ul.dropdowns li:hover>a {
289 }
290
291 .lang_de #submenu_mini_system { min-width: 13.3em; }
292 * html .lang_de #submenu_mini_system { width: 13.3em; }
293
294 .lang_pt-br #submenu_mini_network { min-width: 14em; }
295 * html .lang_pt-br #submenu_mini_network { width: 14em; }
296
297 .lang_pt-br #submenu_mini_system { min-width: 11.5em; }
298 * html .lang_pt-br #submenu_mini_system { width: 11.5em; }
299
300 .lang_ru #submenu_mini_system { min-width: 18em; }
301 * html .lang_ru #submenu_mini_system { width: 18em; }
302
303 .lang_pt-br #submenu_admin_index { min-width: 11em; }
304 * html .lang_pt-br #submenu_admin_index { width: 11em; }
305
306 .lang_ru #submenu_admin_index { min-width: 15.5em; }
307 * html .lang_ru #submenu_admin_index { width: 15.5em; }
308
309 .lang_ru #submenu_admin_status { min-width: 10.5em; }
310 * html .lang_ru #submenu_admin_status { width: 10.5em; }
311
312 .lang_de #submenu_admin_system { min-width: 13.3em; }
313 * html .lang_de #submenu_admin_system { width: 13.3em; }
314
315 .lang_fr #submenu_admin_system { min-width: 14.5em; }
316 * html .lang_fr #submenu_admin_system { width: 14.5em; }
317
318 .lang_pt-br #submenu_admin_system { min-width: 11.5em; }
319 * html .lang_pt-br #submenu_admin_system { width: 11.5em; }
320
321 .lang_ru #submenu_admin_system { min-width: 18em; }
322 * html .lang_ru #submenu_admin_system { width: 18em; }
323
324 #submenu_admin_services_chillispot { min-width: 15.5em; }
325 * html #submenu_admin_services_chillispot { width: 15.5em; }
326
327 #submenu_admin_services_coovachilli { min-width: 15em; }
328 * html #submenu_admin_services_coovachilli { width: 15em; }
329
330 .lang_ru #submenu_admin_network_routes { min-width: 15.3em; }
331 * html .lang_ru #submenu_admin_network_routes { width: 15.3em; }
332
333 #submenu_admin_network_firewall { min-width: 14em; }
334 * html #submenu_admin_network_firewall { width: 14em; }
335
336 .lang_de #submenu_admin_network_firewall { min-width: 16.5em; }
337 * html .lang_de #submenu_admin_network_firewall { width: 16.5em; }
338
339 .lang_pt-br #submenu_admin_network_firewall { min-width: 15em; }
340 * html .lang_pt-br #submenu_admin_network_firewall { width: 15em; }
341
342 #modemenu {
343 width: auto;
344 background: #000;
345 color: #fff;
346 list-style: none;
347 margin-right: 1px;
348 }
349
350 #modemenu li {
351 float: right;
352 list-style: none;
353 }
354
355 #savemenu {
356 float: right;
357 margin-right: 2em;
358 }
359
360 .lang_de #submenu_admin_uci {
361 width: 12em;
362 }
363
364 .lang_ru #submenu_admin_uci {
365 width: 11.5em;
366 }
367
368 textarea#syslog {
369 width: 98%;
370 min-height: 500px;
371 border: 3px solid #ccc;
372 padding: 5px;
373 font-family: monospace;
374 }
375
376 #maincontent {
377 clear: both;
378 width: 80%;
379 margin: 0 auto;
380 margin-top: 2em;
381 padding: 0.5em;
382 color: #000;
383 font-size: 80%;
384 background: #fff url(bg.jpg) repeat-x center bottom;
385 border: 1px dashed #ccc;
386 }
387
388 #maincontent h2 {
389 font:normal bold 150% "Trebuchet MS", Verdana, sans-serif;
390 margin: 0.25em 0 0.7em 0;
391 border-bottom: 1px solid;
392 padding: 10px 0 4px 0;
393 color: #404040;
394 }
395
396 #maincontent h3 {
397 margin: 0.5em 0 1.1em 0;
398 font:italic bold 125% "Trebuchet MS", Verdana, sans-serif;
399 color: #404040;
400 }
401
402 #maincontent p {
403 margin-bottom: 1em;
404 }
405
406 .cbi-section {
407 margin-bottom: 0.5em;
408 padding: 0.5em 1em;
409 border: 1px dotted #555;
410 background-color: #fff;
411 color: #000;
412 }
413
414 .cbi-section legend {
415 font-size: 110%;
416 font-weight: bold;
417 height: 1em;
418 padding: 0 0.25em;
419 background-color: transparent;
420 color: #404040 ;
421 }
422
423 .cbi-section h2 {
424 margin: 0em 0 0.5em -0.5em !important;
425 }
426
427 .cbi-section h3 {
428 text-decoration: none !important;
429 font-weight: bold !important;
430 color: #555 !important;
431 margin: 0.25em !important;
432 font-size: 100% !important;
433 }
434
435 .cbi-section-descr {
436 margin-bottom: 0.5em;
437 font-size: 95%;
438 }
439
440 .cbi-title-ref {
441 color: inherit;
442 text-decoration: none;
443 padding-right: 18px;
444 background: url('../resources/cbi/link.gif') no-repeat scroll right center;
445 background-color: inherit;
446 }
447
448 ul.cbi-apply {
449 font-size: 90%;
450 }
451
452 ul.cbi-tabmenu {
453 padding: 3px 0;
454 margin-left: 0 !important;
455 margin-bottom: -1px;
456 list-style-type: none;
457 }
458
459 ul.cbi-tabmenu li.cbi-tab,
460 ul.cbi-tabmenu li.cbi-tab-disabled {
461 display: inline;
462 margin: 0;
463 }
464
465 ul.cbi-tabmenu li.cbi-tab a,
466 ul.cbi-tabmenu li.cbi-tab-disabled a {
467 text-decoration: none;
468 padding: 3px 7px;
469 margin-right: 3px;
470 border: 1px outset #000;
471 border-bottom: none;
472 background-color: #eee;
473 color: #bbb;
474 }
475
476 ul.cbi-tabmenu li.cbi-tab-highlighted a {
477 color: #000;
478 background-color: #FFEEAA;
479 }
480
481 ul.cbi-tabmenu li a:hover {
482 color: #000;
483 }
484
485 ul.cbi-tabmenu li.cbi-tab a {
486 position: relative;
487 top: 1px;
488 padding-top: 4px;
489 color: #000;
490 background-color: #fff;
491 }
492
493 div.cbi-tab-descr {
494 background-image: url(/luci-static/resources/cbi/help.gif);
495 background-position: 0.25em 50%;
496 background-repeat: no-repeat;
497 border-bottom: 1px solid #ccc;
498 margin: 0.25em 0.25em 2em;
499 padding: 0.5em 0.5em 0.5em 2em;
500 }
501
502 input[type=submit],
503 input[type=reset],
504 input[type=image],
505 input[type=button] {
506 cursor: pointer;
507 }
508
509 select,
510 input,
511 textarea {
512 background: #fff;
513 color: #000;
514 border: 1px solid #ccc;
515 }
516
517 input[type=image] {
518 border: none;
519 }
520
521 input:focus,
522 input:hover,
523 select:focus,
524 select:hover,
525 textarea:focus,
526 textarea:hover {
527 background-color: #fff;
528 color: #000;
529 }
530
531 select,
532 input[type=text],
533 input[type=password] {
534 width: 20em;
535 }
536
537 td select,
538 td input[type=text],
539 td input[type=password] {
540 width: 99%;
541 }
542
543 input.cbi-input-user {
544 background: url('../resources/cbi/user.gif') no-repeat scroll 1px center;
545 background-color: inherit;
546 color: #000;
547 text-indent: 17px;
548 }
549
550 input.cbi-input-password {
551 background: url('../resources/cbi/key.gif') no-repeat scroll 1px center;
552 background-color: inherit;
553 color: #000;
554 text-indent: 17px;
555 }
556
557 input.cbi-input-find {
558 background: url('../resources/cbi/find.gif') no-repeat scroll 1px center;
559 background-color: inherit;
560 color: #000;
561 padding-left: 17px;
562 }
563
564 input.cbi-input-reload {
565 background: url('../resources/cbi/reload.gif') no-repeat scroll 1px center;
566 background-color: inherit;
567 color: #000;
568 padding-left: 17px;
569 }
570
571 input.cbi-button{
572 margin-top: 1.3em;
573 }
574
575 input.cbi-input-add,
576 input.cbi-button-add {
577 background: url('../resources/cbi/add.gif') no-repeat scroll 1px center;
578 background-color: inherit;
579 color: #000;
580 padding-left: 17px;
581 padding-right: 1px;
582 border: 1px solid #FFF;
583 }
584
585 input.cbi-input-fieldadd,
586 input.cbi-button-fieldadd {
587 background: url(../resources/cbi/fieldadd.gif) no-repeat scroll 1px center;
588 background-color: inherit;
589 color: #000;
590 padding-left: 17px;
591 padding-right: 1px;
592 }
593
594 input.cbi-input-reset,
595 input.cbi-button-reset {
596 background: url('../resources/cbi/reset.gif') no-repeat scroll 1px center;
597 background-color: inherit;
598 color: #000;
599 padding-left: 17px;
600 padding-right: 1px;
601 border: none;
602 }
603
604 input.cbi-input-save,
605 input.cbi-button-save {
606 background: url('../resources/cbi/save.gif') no-repeat scroll 1px center;
607 background-color: inherit;
608 color: #000;
609 padding-left: 17px;
610 padding-right: 1px;
611 border: none;
612 }
613
614 input.cbi-input-apply,
615 input.cbi-button-apply {
616 background: url('../resources/cbi/apply.gif') no-repeat scroll 1px center;
617 background-color: inherit;
618 color: #000;
619 padding-left: 17px;
620 padding-right: 1px;
621 }
622
623 input.cbi-input-link,
624 input.cbi-button-link {
625 background: url('../resources/cbi/link.gif') no-repeat scroll 1px center;
626 background-color: inherit;
627 color: #000;
628 padding-left: 17px;
629 padding-right: 1px;
630 border: none;
631 }
632
633 input.cbi-input-remove,
634 div.cbi-section-remove input {
635 background: url('../resources/cbi/remove.gif') no-repeat scroll 1px center;
636 background-color: inherit;
637 color: #000;
638 padding-left: 17px;
639 padding-right: 1px;
640 border: 1px solid #fff;
641 }
642
643 div.cbi-section-remove input {
644 border-bottom: none;
645 }
646
647 textarea {
648 margin-left: -1px;
649 margin-bottom: 0.5em;
650 }
651
652 form > div > input[type=submit],
653 form > div > input[type=reset] {
654 float: right;
655 margin-left: 0.5em;
656 }
657
658 table td,
659 table th {
660 color: #000;
661 }
662
663 table.smalltext {
664 background: #f5f5f5;
665 color: #000;
666 border: 1px solid #666;
667 font-size: 90%;
668 width: 80%;
669 margin-left: auto;
670 margin-right: auto;
671 border-collapse: collapse;
672 }
673
674 table.smalltext tr:hover td {
675 background-color: #bbddee;
676 color: #000;
677 }
678
679 table.smalltext tr th {
680 padding: 0 0.25em;
681 border-left: 1px dotted #666;
682 text-align: left;
683 }
684
685 table.smalltext tr td {
686 padding: 0.2em;
687 border-top: 1px dotted #666;
688 border-left: 1px dotted #666;
689 }
690
691 table.cbi-section-table .cbi-rowstyle-1,
692 table.cbi-section-table .cbi-rowstyle-1 * {
693 background-color: #f1f6fa;
694 color: #000;
695 }
696
697 .cbi-section .cbi-rowstyle-1 h3 {
698 background-color: #f1f6fa;
699 color: #555;
700 }
701
702 .cbi-rowstyle-2 {
703 color: #000;
704 }
705
706 div.cbi-value {
707 clear: left;
708 vertical-align: middle;
709 padding-left: 0.25em;
710 border-bottom: 1px dashed #bbb;
711 }
712
713 div.cbi-value:hover {
714 background: #f8f8f8;
715 color: #000;
716 }
717
718 .cbi-value-title {
719 float: left;
720 width: 40%;
721 line-height: 1.8em;
722 }
723
724 div.cbi-value-field {
725 width: 58%;
726 margin-left: 40%;
727 padding: 0.25em 0;
728 }
729
730 div.cbi-value-description {
731 font-size: 90%;
732 display: inline;
733 }
734
735 div.cbi-section-create {
736 clear: left;
737 white-space: nowrap;
738 vertical-align: top;
739 }
740
741 div.cbi-tblsection-create {
742 border-bottom: 1px dotted #bbb;
743 }
744
745 div.cbi-section-create .cbi-button {
746 margin: 0.25em;
747 }
748
749 input.cbi-section-create-name {
750 margin-right: -0.25em;
751 border-top-width: 1px;
752 border-right-width: 1px;
753 border-bottom-width: 1px;
754 border-left-width: 1px;
755 border-top-color: #999;
756 border-right-color: #999;
757 border-bottom-color: #999;
758 border-left-color: #999;
759 }
760
761 div.cbi-map-descr {
762 margin-bottom: 1em;
763 }
764
765 div.cbi-optionals {
766 padding: 0.25em;
767 border-bottom: 1px dotted #bbb;
768 }
769
770 div.cbi-section-remove {
771 float: right;
772 }
773
774 .cbi-section-node {
775 clear: both;
776 border-top: 1px dotted #bbb;
777 border-left: 1px dotted #bbb;
778 border-right: 1px dotted #bbb;
779 border-bottom: none;
780 padding-bottom: 0;
781 }
782
783 .cbi-section-node table div {
784 padding-bottom: 0;
785 border-bottom: none;
786 }
787
788 .cbi-section-node div.cbi-section-table-row {
789 margin: 0.25em;
790 }
791
792 table.cbi-section-table {
793 width: 100%;
794 font-size: 95%;
795 }
796
797 table.cbi-section-table th,
798 table.cbi-section-table td {
799 text-align: center;
800 }
801
802 tr.cbi-section-table-descr th {
803 font-weight: normal;
804 font-size: 90%;
805 }
806
807 td.cbi-section-table-optionals {
808 text-align: left !important;
809 padding-top: 1em;
810 }
811
812 .cbi-value-helpicon img {
813 vertical-align: bottom;
814 }
815
816 div.cbi-error {
817 font-size: 95%;
818 font-weight: bold;
819 color: #f00;
820 background-color: #fff;
821 }
822
823 td.cbi-value-error {
824 border-color: red;
825 }
826
827 .cbi-value-error input,
828 .cbi-value-error select {
829 color: red;
830 background-color: #fcc;
831 }
832
833 .cbi-section-error {
834 color: red;
835 background-color: white;
836 font-size: 95%;
837 border: 1px dotted red;
838 margin: 3px;
839 padding: 3px;
840 }
841
842 .right {
843 text-align: right;
844 }
845
846 .footer, .push {
847 height: 2em;
848 }
849
850 .footer {
851 width: 99%;
852 padding: 0.3em;
853 }
854
855 .wrapper {
856 min-height: 100%;
857 height: auto !important;
858 height: 100%;
859 margin: 0 auto -2em;
860 }
861
862 .luci a:link,
863 .luci a:visited,
864 .exectime {
865 color: #666;
866 text-decoration: none;
867 font-size: 70%;
868 }
869
870 .inline {
871 display: inline;
872 }
873
874 .error500 {
875 white-space: normal;
876 border: 1px dotted #f00;
877 background-color: #fff;
878 color: #000;
879 padding: 0.5em;
880 }
881 }