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 }