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 }