themes/openwrt: add more button CSS classes
[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 .cbi-section .cbi-rowstyle-1 h3 {
628 background-color: #eeeeff;
629 color: #555555;
630 }
631
632 .cbi-rowstyle-2 {
633 color: #000000;
634 }
635
636 div.cbi-value {
637 clear: left;
638 vertical-align: middle;
639 padding: 0.25em 0.6em;
640 border-bottom: 1px dotted #bbbbbb;
641 }
642
643 div.cbi-value:hover {
644 background: #f8f8f8;
645 color: #000000;
646 }
647
648 .cbi-value-title {
649 float: left;
650 width: 40%;
651 line-height: 1.8em;
652 }
653
654 div.cbi-value-field {
655 width: 58%;
656 margin-left: 40%;
657 padding: 0.25em 0;
658 }
659
660 div.cbi-value-description {
661 font-size: 90%;
662 display: inline;
663 }
664
665 div.cbi-section-create {
666 clear: left;
667 white-space: nowrap;
668 vertical-align: top;
669 }
670
671 div.cbi-section-create .cbi-button {
672 margin: 0.25em;
673 }
674
675 input.cbi-section-create-name {
676 margin-right: -0.25em;
677 }
678
679 div.cbi-map-descr {
680 margin-bottom: 1em;
681 }
682
683 div.cbi-optionals {
684 padding: 0.25em;
685 border-bottom: 1px dotted #bbbbbb;
686 }
687
688 div.cbi-section-remove {
689 float: right;
690 }
691
692 .cbi-section-node {
693 clear: both;
694 border: 1px solid #BBBBBB;
695 border-radius: 3px;
696 padding-bottom: 0;
697 position: relative;
698 }
699
700 .cbi-section-node-tabbed {
701 border-top-left-radius: 0;
702 }
703
704 .cbi-section-node .cbi-value-last {
705 border-bottom: none;
706 }
707
708 .cbi-section-node table div {
709 padding-bottom: 0;
710 border-bottom: none;
711 }
712
713 .cbi-section-node div.cbi-section-table-row {
714 margin: 0.25em;
715 }
716
717 table.cbi-section-table {
718 width: 100%;
719 font-size: 95%;
720 }
721
722 table.cbi-section-table th,
723 table.cbi-section-table td {
724 text-align: center;
725 }
726
727 tr.cbi-section-table-descr th {
728 font-weight: normal;
729 font-size: 90%;
730 }
731
732 td.cbi-section-table-optionals {
733 text-align: left !important;
734 padding-top: 1em;
735 }
736
737 .cbi-value-helpicon img {
738 vertical-align: bottom;
739 }
740
741 div.cbi-error {
742 font-size: 95%;
743 font-weight: bold;
744 color: #ff0000;
745 background-color: #ffffff;
746 }
747
748 td.cbi-value-error {
749 border-color: red;
750 }
751
752 .cbi-value-error input,
753 .cbi-value-error select {
754 color: red;
755 background-color: #ffcccc;
756 }
757
758 .cbi-section-error {
759 color: red;
760 background-color: white;
761 font-size: 95%;
762 border: 1px dotted red;
763 margin: 3px;
764 padding: 3px;
765 }
766
767 .cbi-value-field var {
768 color: #2222FF;
769 }
770
771 ul.cbi-tabmenu {
772 padding: 3px 0;
773 margin-left: 0 !important;
774 list-style-type: none;
775 position: relative;
776 z-index: 10;
777 top: 4px;
778 line-height: 20px;
779 }
780
781 ul.cbi-tabmenu li.cbi-tab,
782 ul.cbi-tabmenu li.cbi-tab-disabled {
783 display: inline;
784 margin: 0;
785 }
786
787 ul.cbi-tabmenu li.cbi-tab a,
788 ul.cbi-tabmenu li.cbi-tab-disabled a {
789 text-decoration: none;
790 padding: 3px 7px;
791 margin-right: 3px;
792 border: 1px solid #BBBBBB;
793 border-bottom: none;
794 border-radius: 3px 3px 0 0;
795 background-color: #EEEEEE;
796 color: #BBBBBB;
797 }
798
799 ul.cbi-tabmenu li.cbi-tab-highlighted a {
800 color: #000000;
801 background-color: #FFEEAA;
802 }
803
804 ul.cbi-tabmenu li a:hover {
805 color: #000000;
806 }
807
808 ul.cbi-tabmenu li.cbi-tab a {
809 padding-top: 4px;
810 color: #000000;
811 background-color: #FFFFFF;
812 }
813
814 div.cbi-tab-descr {
815 background-image: url(/luci-static/resources/cbi/help.gif);
816 background-position: 0.25em 50%;
817 background-repeat: no-repeat;
818 border-bottom: 1px solid #CCCCCC;
819 margin: 0.25em 0.25em 2em;
820 padding: 0.5em 0.5em 0.5em 2em;
821 }
822
823 .left {
824 text-align: left !important;
825 }
826
827 .right {
828 text-align: right !important;
829 }
830
831 .luci {
832 position: absolute;
833 bottom: 0;
834 left: 1em;
835 height: 1.5em;
836 font-size: 80%;
837 }
838
839 .luci a:link,
840 .luci a:visited {
841 background-color: transparent;
842 color: #666666;
843 text-decoration: none;
844 font-size: 70%;
845 }
846
847 .inline {
848 display: inline;
849 }
850
851 .error500 {
852 white-space: normal;
853 border: 1px dotted #ff0000;
854 background-color: #ffffff;
855 color: #000000;
856 padding: 0.5em;
857 }
858
859 .errorbox {
860 border: 1px solid #FF0000;
861 background-color: #FFCCCC;
862 padding: 5px;
863 margin-bottom: 5px;
864 }
865
866 .errorbox a {
867 color: #000000 !important;
868 }
869
870
871 .uci-change-list {
872 font-family: monospace;
873 }
874
875 .uci-change-list ins,
876 .uci-change-legend-label ins {
877 text-decoration: none;
878 border: 1px solid #00FF00;
879 background-color: #CCFFCC;
880 display: block;
881 padding: 2px;
882 }
883
884 .uci-change-list del,
885 .uci-change-legend-label del {
886 text-decoration: none;
887 border: 1px solid #FF0000;
888 background-color: #FFCCCC;
889 display: block;
890 font-style: normal;
891 padding: 2px;
892 }
893
894 .uci-change-list var,
895 .uci-change-legend-label var {
896 text-decoration: none;
897 border: 1px solid #CCCCCC;
898 background-color: #EEEEEE;
899 display: block;
900 font-style: normal;
901 padding: 2px;
902 }
903
904 .uci-change-list var ins,
905 .uci-change-list var del {
906 /*display: inline;*/
907 border: none;
908 white-space: pre;
909 font-style: normal;
910 padding: 0px;
911 }
912
913 .uci-change-legend {
914 padding: 5px;
915 }
916
917 .uci-change-legend-label {
918 width: 150px;
919 float: left;
920 font-size: 80%;
921 }
922
923 .uci-change-legend-label>ins,
924 .uci-change-legend-label>del,
925 .uci-change-legend-label>var {
926 float: left;
927 margin-right: 4px;
928 width: 10px;
929 height: 10px;
930 display: block;
931 }
932
933 .uci-change-legend-label var ins,
934 .uci-change-legend-label var del {
935 line-height: 6px;
936 border: none;
937 }
938
939
940 }