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