themes/openwrt: add some new CSS classes used by firewall ui
[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-input-placeholder {
361         color: #AAAAAA;
362 }
363
364 input[type=submit],
365 input[type=reset],
366 input[type=image],
367 input[type=button] {
368         cursor: pointer;
369 }
370
371 select,
372 input,
373 textarea {
374         background: #eeeeee;
375         color: #000000;
376         border-width: 1px;
377         border-color: #000000;
378 }
379
380 input[type=image] {
381         border: none;
382 }
383
384 input:focus,
385 input:hover,
386 select:focus,
387 select:hover {
388         background-color: #ffffff;
389         color: #000000;
390 }
391
392 select,
393 input[type=text],
394 input[type=password] {
395         width: 20em;
396 }
397
398 td select,
399 td input[type=text],
400 td input[type=password] {
401         width: 99%;
402 }
403
404 img.cbi-image-button {
405         cursor: pointer;
406         margin: 0 2px;
407         vertical-align: middle;
408 }
409
410 input.cbi-button {
411         background-color: #EEEEEE;
412         background-repeat: no-repeat;
413         background-position: 1px center;
414         border: 1px solid #CCCCCC;
415         border-radius: 3px;
416 }
417
418 input.cbi-button:hover {
419         border-color: #4A6B7C;
420         background-color: #FFFFFF;
421 }
422
423 input.cbi-button[disabled] {
424         color: #CCCCCC;
425         border-color: #CCCCCC;
426         background-color: #EEEEEE;
427         cursor: default;
428 }
429
430 input.cbi-input-user {
431         background-image: url('../resources/cbi/user.gif');
432         background-repeat: no-repeat;
433         background-position: 1px center;
434         color: #000000;
435         text-indent: 17px;
436 }
437
438 input.cbi-input-password {
439         background-image: url('../resources/cbi/key.gif');
440         background-repeat: no-repeat;
441         background-position: 1px center;
442         color: #000000;
443         text-indent: 17px;
444 }
445
446 input.cbi-input-find {
447         background-image: url('../resources/cbi/find.gif');
448         color: #000000;
449         padding-left: 17px;
450 }
451
452 input.cbi-input-reload {
453         background-image: url('../resources/cbi/reload.gif');
454         color: #000000;
455         padding-left: 17px;
456 }
457
458 input.cbi-input-add,
459 input.cbi-button-add {
460         background-image: url('../resources/cbi/add.gif');
461         color: #000000;
462         padding-left: 17px;
463         padding-right: 1px;
464 }
465
466 input.cbi-input-fieldadd,
467 input.cbi-button-fieldadd {
468         background-image: url(../resources/cbi/fieldadd.gif);
469         color: #000000;
470         padding-left: 17px;
471         padding-right: 1px;
472 }
473
474 input.cbi-input-reset,
475 input.cbi-button-reset {
476         background-image: url('../resources/cbi/reset.gif');
477         color: #000000;
478         padding-left: 17px;
479         padding-right: 1px;
480 }
481
482 input.cbi-input-save,
483 input.cbi-button-save {
484         background-image: url('../resources/cbi/save.gif');
485         color: #000000;
486         padding-left: 17px;
487         padding-right: 1px;
488 }
489
490 input.cbi-input-apply,
491 input.cbi-button-apply {
492         background-image: url('../resources/cbi/apply.gif');
493         color: #000000;
494         padding-left: 17px;
495         padding-right: 1px;
496 }
497
498 input.cbi-input-link,
499 input.cbi-button-link {
500         background-image: url('../resources/cbi/link.gif');
501         color: #000000;
502         padding-left: 17px;
503         padding-right: 1px;
504 }
505
506 input.cbi-input-remove,
507 div.cbi-section-remove input {
508         background-image: url('../resources/cbi/remove.gif');
509         color: #000000;
510         padding-left: 17px;
511         padding-right: 1px;
512 }
513
514 .cbi-input-invalid {
515         background-image: url('../resources/cbi/reset.gif');
516         background-repeat: no-repeat;
517         background-position: right;
518         color: #FF0000 !important;
519         border-color: #FF0000;
520 }
521
522 div.cbi-section-remove input {
523         border-bottom: none;
524 }
525
526 textarea {
527         margin-left: -1px;
528         margin-bottom: 0.5em;
529 }
530
531 form > div > input[type=submit],
532 form > div > input[type=reset] {
533         float: right;
534         margin-left: 0.5em;
535 }
536
537 table td,
538 table th {
539         color: #000000;
540 }
541
542 table.smalltext {
543         background: #f5f5f5;
544         color: #000000;
545         border-top: 1px solid #666666;
546         border-right: 1px solid #666666;
547         border-bottom: 1px solid #666666;
548         font-size: 90%;
549         width: 80%;
550         margin-left: auto;
551         margin-right: auto;
552         border-collapse: collapse;
553 }
554
555 table.smalltext tr:hover td {
556         background-color: #bbddee;
557         color: #000000;
558 }
559
560 table.smalltext tr th {
561         padding: 0 0.25em;
562         border-left: 1px solid #666666;
563         text-align: left;
564 }
565
566 table.smalltext tr td {
567         padding: 0 0.25em;
568         border-top: 1px solid #666666;
569         border-left: 1px solid #666666;
570 }
571
572 table.cbi-section-table .cbi-rowstyle-1 {
573         background-color: #eeeeff;
574         color: #000000;
575 }
576
577 table.cbi-section-table .cbi-rowstyle-1:hover,
578 table.cbi-section-table .cbi-rowstyle-2:hover {
579         background-color: #b2c8d4;
580         color: #000000;
581 }
582
583 .cbi-section .cbi-rowstyle-1 h3 {
584         background-color: #eeeeff;
585         color: #555555;
586 }
587
588 .cbi-rowstyle-2 {
589         color: #000000;
590 }
591
592 div.cbi-value {
593         clear: left;
594         vertical-align: middle;
595         padding: 0.25em 0.6em;
596         border-bottom: 1px dotted #bbbbbb;
597 }
598
599 div.cbi-value:hover {
600         background: #f8f8f8;
601         color: #000000;
602 }
603
604 .cbi-value-title {
605         float: left;
606         width: 40%;
607         line-height: 1.8em;
608 }
609
610 div.cbi-value-field {
611         width: 58%;
612         margin-left: 40%;
613         padding: 0.25em 0;
614 }
615
616 div.cbi-value-description {
617         font-size: 90%;
618         display: inline;
619 }
620
621 div.cbi-section-create {
622         clear: left;
623         white-space: nowrap;
624         vertical-align: top;
625 }
626
627 div.cbi-section-create .cbi-button {
628         margin: 0.25em;
629 }
630
631 input.cbi-section-create-name {
632         margin-right: -0.25em;
633 }
634
635 div.cbi-map-descr {
636         margin-bottom: 1em;
637 }
638
639 div.cbi-optionals {
640         padding: 0.25em;
641         border-bottom: 1px dotted #bbbbbb;
642 }
643
644 div.cbi-section-remove {
645         float: right;
646 }
647
648 .cbi-section-node {
649         clear: both;
650         border: 1px solid #BBBBBB;
651         border-radius: 3px;
652         padding-bottom: 0;
653         position: relative;
654 }
655
656 .cbi-section-node-tabbed {
657         border-top-left-radius: 0;
658 }
659
660 .cbi-section-node .cbi-value-last {
661         border-bottom: none;
662 }
663
664 .cbi-section-node table div {
665         padding-bottom: 0;
666         border-bottom: none;
667 }
668
669 .cbi-section-node div.cbi-section-table-row {
670         margin: 0.25em;
671 }
672
673 table.cbi-section-table {
674         width: 100%;
675         font-size: 95%;
676 }
677
678 table.cbi-section-table th,
679 table.cbi-section-table td {
680         text-align: center;
681 }
682
683 tr.cbi-section-table-descr th {
684         font-weight: normal;
685         font-size: 90%;
686 }
687
688 td.cbi-section-table-optionals {
689         text-align: left !important;
690         padding-top: 1em;
691 }
692
693 .cbi-value-helpicon img {
694         vertical-align: bottom;
695 }
696
697 div.cbi-error {
698         font-size: 95%;
699         font-weight: bold;
700         color: #ff0000;
701         background-color: #ffffff;
702 }
703
704 td.cbi-value-error {
705         border-color: red;
706 }
707
708 .cbi-value-error input,
709 .cbi-value-error select {
710         color: red;
711         background-color: #ffcccc;
712 }
713
714 .cbi-section-error {
715         color: red;
716         background-color: white;
717         font-size: 95%;
718         border: 1px dotted red;
719         margin: 3px;
720         padding: 3px;
721 }
722
723 .cbi-value-field var {
724         color: #2222FF;
725 }
726
727 ul.cbi-tabmenu {
728         padding: 3px 0;
729         margin-left: 0 !important;
730         list-style-type: none;
731         position: relative;
732         z-index: 10;
733         top: 4px;
734         line-height: 20px;
735 }
736
737 ul.cbi-tabmenu li.cbi-tab,
738 ul.cbi-tabmenu li.cbi-tab-disabled {
739         display: inline;
740         margin: 0;
741 }
742
743 ul.cbi-tabmenu li.cbi-tab a,
744 ul.cbi-tabmenu li.cbi-tab-disabled a {
745         text-decoration: none;
746         padding: 3px 7px;
747         margin-right: 3px;
748         border: 1px solid #BBBBBB;
749         border-bottom: none;
750         border-radius: 3px 3px 0 0;
751         background-color: #EEEEEE;
752         color: #BBBBBB;
753 }
754
755 ul.cbi-tabmenu li.cbi-tab-highlighted a {
756         color: #000000;
757         background-color: #FFEEAA;
758 }
759
760 ul.cbi-tabmenu li a:hover {
761         color: #000000;
762 }
763
764 ul.cbi-tabmenu li.cbi-tab a {
765         padding-top: 4px;
766         color: #000000;
767         background-color: #FFFFFF;
768 }
769
770 div.cbi-tab-descr {
771         background-image: url(/luci-static/resources/cbi/help.gif);
772         background-position: 0.25em 50%;
773         background-repeat: no-repeat;
774         border-bottom: 1px solid #CCCCCC;
775         margin: 0.25em 0.25em 2em;
776         padding: 0.5em 0.5em 0.5em 2em;
777 }
778
779 .left {
780         text-align: left !important;
781 }
782
783 .right {
784         text-align: right !important;
785 }
786
787 .luci {
788         position: absolute;
789         bottom: 0;
790         left: 1em;
791         height: 1.5em;
792         font-size: 80%;
793 }
794
795 .luci a:link,
796 .luci a:visited {
797         background-color: transparent;
798         color: #666666;
799         text-decoration: none;
800         font-size: 70%;
801 }
802
803 .inline {
804         display: inline;
805 }
806
807 .error500 {
808         white-space: normal;
809         border: 1px dotted #ff0000;
810         background-color: #ffffff;
811         color: #000000;
812         padding: 0.5em;
813 }
814
815 .errorbox {
816         border: 1px solid #FF0000;
817         background-color: #FFCCCC;
818         padding: 5px;
819         margin-bottom: 5px;
820 }
821
822 .errorbox a {
823         color: #000000 !important;
824 }
825
826
827 .uci-change-list {
828         font-family: monospace;
829 }
830
831 .uci-change-list ins,
832 .uci-change-legend-label ins {
833         text-decoration: none;
834         border: 1px solid #00FF00;
835         background-color: #CCFFCC;
836         display: block;
837         padding: 2px;
838 }
839
840 .uci-change-list del,
841 .uci-change-legend-label del {
842         text-decoration: none;
843         border: 1px solid #FF0000;
844         background-color: #FFCCCC;
845         display: block;
846         font-style: normal;
847         padding: 2px;
848 }
849
850 .uci-change-list var,
851 .uci-change-legend-label var {
852         text-decoration: none;
853         border: 1px solid #CCCCCC;
854         background-color: #EEEEEE;
855         display: block;
856         font-style: normal;
857         padding: 2px;
858 }
859
860 .uci-change-list var ins,
861 .uci-change-list var del {
862         /*display: inline;*/
863         border: none;
864         white-space: pre;
865         font-style: normal;
866         padding: 0px;
867 }
868
869 .uci-change-legend {
870         padding: 5px;
871 }
872
873 .uci-change-legend-label {
874         width: 150px;
875         float: left;
876         font-size: 80%;
877 }
878
879 .uci-change-legend-label>ins,
880 .uci-change-legend-label>del,
881 .uci-change-legend-label>var {
882         float: left;
883         margin-right: 4px;
884         width: 10px;
885         height: 10px;
886         display: block;
887 }
888
889 .uci-change-legend-label var ins,
890 .uci-change-legend-label var del {
891         line-height: 6px;
892         border: none;
893 }
894
895
896 }