* luci-trunk: huge xhtml, css and accessibility improvement patch - thanks Alina!
[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-key {
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.smalltext {
578 background: #f5f5f5;
579 color: #000000;
580 border-top: 1px solid #666666;
581 border-right: 1px solid #666666;
582 border-bottom: 1px solid #666666;
583 font-size: 90%;
584 width: 80%;
585 margin-left: auto;
586 margin-right: auto;
587 border-collapse: collapse;
588 }
589
590 table.smalltext tr:hover td {
591 background-color: #bbddee;
592 color: #000000;
593 }
594
595 table.smalltext tr th {
596 padding: 0 0.25em;
597 border-left: 1px solid #666666;
598 text-align: left;
599 }
600
601 table.smalltext tr td {
602 padding: 0 0.25em;
603 border-top: 1px solid #666666;
604 border-left: 1px solid #666666;
605 }
606
607 table.cbi-section-table .cbi-rowstyle-1,
608 table.cbi-section-table .cbi-rowstyle-1 * {
609 background-color: #eeeeff;
610 color: #000000;
611 }
612
613 .cbi-section .cbi-rowstyle-1 h3 {
614 background-color: #eeeeff;
615 color: #555555;
616 }
617
618 .cbi-rowstyle-2 {
619 }
620
621 div.cbi-value {
622 clear: left;
623 vertical-align: middle;
624 padding-left: 0.25em;
625 border-bottom: 1px dotted #bbbbbb;
626 }
627
628 div.cbi-value:hover {
629 background: #f8f8f8;
630 color: #000000;
631 }
632
633 .cbi-value-title {
634 float: left;
635 width: 40%;
636 }
637
638 div.cbi-value-field {
639 width: 58%;
640 margin-left: 40%;
641 padding: 0.25em 0;
642 }
643
644 div.cbi-value-description {
645 font-size: 90%;
646 display: inline;
647 }
648
649 div.cbi-section-create {
650 clear: left;
651 white-space: nowrap;
652 }
653
654 div.cbi-map-descr {
655 margin-bottom: 1em;
656 }
657
658 div.cbi-optionals {
659 padding: 0.25em;
660 border-bottom: 1px dotted #bbbbbb;
661 }
662
663 div.cbi-section-remove {
664 float: right;
665 }
666
667 .cbi-section-node {
668 clear: both;
669 border-top: 1px dotted #bbbbbb;
670 border-left: 1px dotted #bbbbbb;
671 border-right: 1px dotted #bbbbbb;
672 border-bottom: none;
673 padding-bottom: 0;
674 }
675
676 .cbi-section-node table div {
677 padding-bottom: 0;
678 border-bottom: none;
679 }
680
681 .cbi-section-node div.cbi-section-table-row {
682 margin: 0.25em;
683 }
684
685 table.cbi-section-table {
686 width: 100%;
687 font-size: 95%;
688 }
689
690 table.cbi-section-table th,
691 table.cbi-section-table td {
692 text-align: center;
693 }
694
695 tr.cbi-section-table-descr th {
696 font-weight: normal;
697 font-size: 90%;
698 }
699
700 td.cbi-section-table-optionals {
701 text-align: left !important;
702 padding-top: 1em;
703 }
704
705 .cbi-value-helpicon img {
706 vertical-align: bottom;
707 }
708
709 div.cbi-error {
710 font-size: 95%;
711 font-weight: bold;
712 color: #ff0000;
713 background-color: #ffffff;
714 }
715
716 td.cbi-value-error {
717 border-color: red;
718 }
719
720 .cbi-value-error input,
721 .cbi-value-error select {
722 color: red;
723 background-color: #ffcccc;
724 }
725
726 .cbi-section-error {
727 color: red;
728 background-color: white;
729 font-size: 95%;
730 border: 1px dotted red;
731 margin: 3px;
732 padding: 3px;
733 }
734
735 .right {
736 text-align: right;
737 }
738
739 .luci {
740 position: fixed;
741 bottom: 0;
742 left: 0;
743 text-align: right;
744 }
745
746 .luci a:link,
747 .luci a:visited {
748 background-color: transparent;
749 color: #666666;
750 text-decoration: none;
751 font-size: 70%;
752 }
753
754 .inline {
755 display: inline;
756 }
757
758 .error500 {
759 white-space: normal;
760 border: 1px dotted #ff0000;
761 background-color: #ffffff;
762 color: #000000;
763 padding: 0.5em;
764 }
765
766 #memorybar {
767 width: 200px;
768 height: 8px;
769 border: 1px solid #bbb;
770 color: black;
771 background-color: red;
772 }
773
774 #memfree, #membuffers, #memcached {
775 float: right;
776 border: 1px solid #bbb;
777 height: 6px;
778 }
779
780 #memfree {
781 background-color: green;
782 color: black;
783 }
784
785 #membuffers {
786 background-color: yellow;
787 color: black;
788 }
789
790 #memcached {
791 background-color: #ffa500;
792 color: black;
793 }
794
795
796 /* obligatory IE6 Voodoo Code */
797
798 * html body {
799 padding-left: 50% !important;
800 }
801
802 * html div#header {
803 margin-left: -100% !important;
804 }
805
806 * html div#menubar {
807 margin-left: -100% !important;
808 width: 200% !important;
809 }
810
811 * html div#maincontent {
812 margin-left: -80% !important;
813 width: 160% !important;
814 }
815
816 * html div.cbi-value-description {
817 margin-left: 40%;
818 }
819
820 }