themes/openwrt: implement CSS classes for up and down buttons
[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 .cbi-input-invalid {
531 background-image: url('../resources/cbi/reset.gif');
532 background-repeat: no-repeat;
533 background-position: right;
534 color: #FF0000 !important;
535 border-color: #FF0000;
536 }
537
538 div.cbi-section-remove input {
539 border-bottom: none;
540 }
541
542 textarea {
543 margin-left: -1px;
544 margin-bottom: 0.5em;
545 }
546
547 form > div > input[type=submit],
548 form > div > input[type=reset] {
549 float: right;
550 margin-left: 0.5em;
551 }
552
553 table td,
554 table th {
555 color: #000000;
556 }
557
558 table.smalltext {
559 background: #f5f5f5;
560 color: #000000;
561 border-top: 1px solid #666666;
562 border-right: 1px solid #666666;
563 border-bottom: 1px solid #666666;
564 font-size: 90%;
565 width: 80%;
566 margin-left: auto;
567 margin-right: auto;
568 border-collapse: collapse;
569 }
570
571 table.smalltext tr:hover td {
572 background-color: #bbddee;
573 color: #000000;
574 }
575
576 table.smalltext tr th {
577 padding: 0 0.25em;
578 border-left: 1px solid #666666;
579 text-align: left;
580 }
581
582 table.smalltext tr td {
583 padding: 0 0.25em;
584 border-top: 1px solid #666666;
585 border-left: 1px solid #666666;
586 }
587
588 table.cbi-section-table .cbi-rowstyle-1 {
589 background-color: #eeeeff;
590 color: #000000;
591 }
592
593 table.cbi-section-table .cbi-rowstyle-1:hover,
594 table.cbi-section-table .cbi-rowstyle-2:hover {
595 background-color: #b2c8d4;
596 color: #000000;
597 }
598
599 .cbi-section .cbi-rowstyle-1 h3 {
600 background-color: #eeeeff;
601 color: #555555;
602 }
603
604 .cbi-rowstyle-2 {
605 color: #000000;
606 }
607
608 div.cbi-value {
609 clear: left;
610 vertical-align: middle;
611 padding: 0.25em 0.6em;
612 border-bottom: 1px dotted #bbbbbb;
613 }
614
615 div.cbi-value:hover {
616 background: #f8f8f8;
617 color: #000000;
618 }
619
620 .cbi-value-title {
621 float: left;
622 width: 40%;
623 line-height: 1.8em;
624 }
625
626 div.cbi-value-field {
627 width: 58%;
628 margin-left: 40%;
629 padding: 0.25em 0;
630 }
631
632 div.cbi-value-description {
633 font-size: 90%;
634 display: inline;
635 }
636
637 div.cbi-section-create {
638 clear: left;
639 white-space: nowrap;
640 vertical-align: top;
641 }
642
643 div.cbi-section-create .cbi-button {
644 margin: 0.25em;
645 }
646
647 input.cbi-section-create-name {
648 margin-right: -0.25em;
649 }
650
651 div.cbi-map-descr {
652 margin-bottom: 1em;
653 }
654
655 div.cbi-optionals {
656 padding: 0.25em;
657 border-bottom: 1px dotted #bbbbbb;
658 }
659
660 div.cbi-section-remove {
661 float: right;
662 }
663
664 .cbi-section-node {
665 clear: both;
666 border: 1px solid #BBBBBB;
667 border-radius: 3px;
668 padding-bottom: 0;
669 position: relative;
670 }
671
672 .cbi-section-node-tabbed {
673 border-top-left-radius: 0;
674 }
675
676 .cbi-section-node .cbi-value-last {
677 border-bottom: none;
678 }
679
680 .cbi-section-node table div {
681 padding-bottom: 0;
682 border-bottom: none;
683 }
684
685 .cbi-section-node div.cbi-section-table-row {
686 margin: 0.25em;
687 }
688
689 table.cbi-section-table {
690 width: 100%;
691 font-size: 95%;
692 }
693
694 table.cbi-section-table th,
695 table.cbi-section-table td {
696 text-align: center;
697 }
698
699 tr.cbi-section-table-descr th {
700 font-weight: normal;
701 font-size: 90%;
702 }
703
704 td.cbi-section-table-optionals {
705 text-align: left !important;
706 padding-top: 1em;
707 }
708
709 .cbi-value-helpicon img {
710 vertical-align: bottom;
711 }
712
713 div.cbi-error {
714 font-size: 95%;
715 font-weight: bold;
716 color: #ff0000;
717 background-color: #ffffff;
718 }
719
720 td.cbi-value-error {
721 border-color: red;
722 }
723
724 .cbi-value-error input,
725 .cbi-value-error select {
726 color: red;
727 background-color: #ffcccc;
728 }
729
730 .cbi-section-error {
731 color: red;
732 background-color: white;
733 font-size: 95%;
734 border: 1px dotted red;
735 margin: 3px;
736 padding: 3px;
737 }
738
739 .cbi-value-field var {
740 color: #2222FF;
741 }
742
743 ul.cbi-tabmenu {
744 padding: 3px 0;
745 margin-left: 0 !important;
746 list-style-type: none;
747 position: relative;
748 z-index: 10;
749 top: 4px;
750 line-height: 20px;
751 }
752
753 ul.cbi-tabmenu li.cbi-tab,
754 ul.cbi-tabmenu li.cbi-tab-disabled {
755 display: inline;
756 margin: 0;
757 }
758
759 ul.cbi-tabmenu li.cbi-tab a,
760 ul.cbi-tabmenu li.cbi-tab-disabled a {
761 text-decoration: none;
762 padding: 3px 7px;
763 margin-right: 3px;
764 border: 1px solid #BBBBBB;
765 border-bottom: none;
766 border-radius: 3px 3px 0 0;
767 background-color: #EEEEEE;
768 color: #BBBBBB;
769 }
770
771 ul.cbi-tabmenu li.cbi-tab-highlighted a {
772 color: #000000;
773 background-color: #FFEEAA;
774 }
775
776 ul.cbi-tabmenu li a:hover {
777 color: #000000;
778 }
779
780 ul.cbi-tabmenu li.cbi-tab a {
781 padding-top: 4px;
782 color: #000000;
783 background-color: #FFFFFF;
784 }
785
786 div.cbi-tab-descr {
787 background-image: url(/luci-static/resources/cbi/help.gif);
788 background-position: 0.25em 50%;
789 background-repeat: no-repeat;
790 border-bottom: 1px solid #CCCCCC;
791 margin: 0.25em 0.25em 2em;
792 padding: 0.5em 0.5em 0.5em 2em;
793 }
794
795 .left {
796 text-align: left !important;
797 }
798
799 .right {
800 text-align: right !important;
801 }
802
803 .luci {
804 position: absolute;
805 bottom: 0;
806 left: 1em;
807 height: 1.5em;
808 font-size: 80%;
809 }
810
811 .luci a:link,
812 .luci a:visited {
813 background-color: transparent;
814 color: #666666;
815 text-decoration: none;
816 font-size: 70%;
817 }
818
819 .inline {
820 display: inline;
821 }
822
823 .error500 {
824 white-space: normal;
825 border: 1px dotted #ff0000;
826 background-color: #ffffff;
827 color: #000000;
828 padding: 0.5em;
829 }
830
831 .errorbox {
832 border: 1px solid #FF0000;
833 background-color: #FFCCCC;
834 padding: 5px;
835 margin-bottom: 5px;
836 }
837
838 .errorbox a {
839 color: #000000 !important;
840 }
841
842
843 .uci-change-list {
844 font-family: monospace;
845 }
846
847 .uci-change-list ins,
848 .uci-change-legend-label ins {
849 text-decoration: none;
850 border: 1px solid #00FF00;
851 background-color: #CCFFCC;
852 display: block;
853 padding: 2px;
854 }
855
856 .uci-change-list del,
857 .uci-change-legend-label del {
858 text-decoration: none;
859 border: 1px solid #FF0000;
860 background-color: #FFCCCC;
861 display: block;
862 font-style: normal;
863 padding: 2px;
864 }
865
866 .uci-change-list var,
867 .uci-change-legend-label var {
868 text-decoration: none;
869 border: 1px solid #CCCCCC;
870 background-color: #EEEEEE;
871 display: block;
872 font-style: normal;
873 padding: 2px;
874 }
875
876 .uci-change-list var ins,
877 .uci-change-list var del {
878 /*display: inline;*/
879 border: none;
880 white-space: pre;
881 font-style: normal;
882 padding: 0px;
883 }
884
885 .uci-change-legend {
886 padding: 5px;
887 }
888
889 .uci-change-legend-label {
890 width: 150px;
891 float: left;
892 font-size: 80%;
893 }
894
895 .uci-change-legend-label>ins,
896 .uci-change-legend-label>del,
897 .uci-change-legend-label>var {
898 float: left;
899 margin-right: 4px;
900 width: 10px;
901 height: 10px;
902 display: block;
903 }
904
905 .uci-change-legend-label var ins,
906 .uci-change-legend-label var del {
907 line-height: 6px;
908 border: none;
909 }
910
911
912 }