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