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