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