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