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