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