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 }