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