* 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 }