User interface improvements part #3
[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#content 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 #content {
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 #content h1 {
178         margin: 0.25em 0 0.5em 0;
179         font-size: 150%;
180         font-weight: normal;
181 }
182
183 #content h2 {
184         margin: 0.5em 0;
185         font-size: 120%;
186         font-weight: normal;
187         text-decoration: underline;
188 }
189
190 #content p {
191         margin-bottom: 1em;
192 }
193
194 .cbi-section {
195         margin-bottom: 0.5em;
196         padding: 0.5em 1em;
197         border: 1px dotted #555555;
198         background-color: #f2f3f9;
199 }
200
201 .cbi-section legend {
202         font-size: 110%;
203         font-weight: bold;
204         height: 1em;
205         padding: 0 0.25em;
206         color: #555555;
207 }
208
209 .cbi-section h2 {
210         margin: 0em 0 0.5em -0.5em !important;
211 }
212
213 .cbi-section h3 {
214         height: 1.5em;
215         font-size: 90%;
216         color: #555555;
217 }
218
219 .cbi-section-descr {
220         margin-bottom: 0.5em;
221         font-size: 95%;
222 }
223
224 input[type=submit],
225 input[type=reset],
226 input[type=image],
227 label {
228         cursor: pointer;
229 }
230
231 select,
232 input,
233 textarea {
234         background: #eeeeee;
235         color: #000000;
236         border-width: 1px;
237         border-color: #000000;
238 }
239
240 input[type=image] {
241         border: none;
242 }
243
244
245 input:focus,
246 input:hover,
247 select:focus,
248 select:hover,
249 textarea:focus,
250 textarea:hover {
251         background-color: #f2f3f9;
252 }
253
254 select,
255 input[type=text],
256 input[type=password] {
257         width: 20em;
258 }
259
260 td select,
261 td input[type=text],
262 td input[type=password] {
263         width: 99%;
264 }
265
266 input.cbi-input-user {
267         background: url('../resources/cbi/user.gif') no-repeat scroll 1px center;
268         background-color: inherit;
269         padding-left: 17px;
270 }
271
272 input.cbi-input-key {
273         background: url('../resources/cbi/key.gif') no-repeat scroll 1px center;
274         background-color: inherit;
275         padding-left: 17px;
276 }
277
278 input.cbi-input-add,
279 input.cbi-button-add {
280         background: url('../resources/cbi/add.gif') no-repeat scroll 1px center;
281         background-color: inherit;
282         padding-left: 17px;
283         padding-right: 1px;
284 }
285
286 input.cbi-input-fieldadd,
287 input.cbi-button-fieldadd {
288         background: url(../resources/cbi/fieldadd.gif) no-repeat scroll 1px center;
289         background-color: inherit;
290         padding-left: 17px;
291         padding-right: 1px;
292 }
293
294 input.cbi-input-reset,
295 input.cbi-button-reset {
296         background: url('../resources/cbi/reset.gif') no-repeat scroll 1px center;
297         background-color: inherit;
298         padding-left: 17px;
299         padding-right: 1px;
300 }
301
302 input.cbi-input-save,
303 input.cbi-button-save {
304         background: url('../resources/cbi/save.gif') no-repeat scroll 1px center;
305         background-color: inherit;
306         padding-left: 17px;
307         padding-right: 1px;
308 }
309
310 input.cbi-input-apply,
311 input.cbi-button-apply {
312         background: url('../resources/cbi/apply.gif') no-repeat scroll 1px center;
313         background-color: inherit;
314         padding-left: 17px;
315         padding-right: 1px;
316 }
317
318 input.cbi-input-remove,
319 div.cbi-section-remove input {
320         background: url('../resources/cbi/remove.gif') no-repeat scroll 1px center;
321         background-color: inherit;
322         padding-left: 17px;
323         padding-right: 1px;
324 }
325
326 div.cbi-section-remove input {
327         border-bottom: none;
328 }
329
330 textarea {
331         margin-left: -1px;
332         margin-bottom: 0.5em;
333 }
334
335 form > div > input[type=submit],
336 form > div > input[type=reset] {
337         float: right;
338         margin-left: 0.5em;
339 }
340
341 table.smalltext {
342         background: #f5f5f5;
343         border-top: 1px solid #666666;
344         border-right: 1px solid #666666;
345         border-bottom: 1px solid #666666;
346         font-size: 90%;
347         width: 80%;
348         margin-left: auto;
349         margin-right: auto;
350         border-collapse: collapse;
351 }
352
353 table.smalltext tr:hover td {
354         background-color: #bbddee;
355 }
356
357 table.smalltext tr th {
358         padding: 0 0.25em;
359         border-left: 1px solid #666666;
360         text-align: left;
361 }
362
363 table.smalltext tr td {
364         padding: 0 0.25em;
365         border-top: 1px solid #666666;
366         border-left: 1px solid #666666;
367 }
368
369 .cbi-rowstyle-1 {
370         background-color: #eeeeff;
371 }
372
373 .cbi-rowstyle-2 {
374
375 }
376
377 div.cbi-value {
378         clear: left;
379         vertical-align: middle;
380         padding-left: 0.25em;
381         border-bottom: 1px dotted #bbbbbb;
382 }
383
384 div.cbi-value:hover {
385         background: #f8f8f8;
386 }
387
388 div.cbi-value:last-child {
389         border: none;
390 }
391
392 .cbi-value-title {
393         float: left;
394         width: 40%;
395 }
396
397 div.cbi-value-field {
398         width: 58%;
399         margin: 0.25em 0 0.25em 40%;
400 }
401
402 div.cbi-value-description {
403         font-size: 90%;
404 }
405
406 div.cbi-value-field > div.cbi-value-description {
407         display: none;
408 }
409
410 div.cbi-value:hover div.cbi-value-field > div.cbi-value-description {
411         display: block;
412 }
413
414 div.cbi-section-create {
415         clear: left;
416 }
417
418 div.cbi-map-descr {
419         margin-bottom: 1em;
420 }
421
422 div.cbi-optionals {
423         margin: 0.5em 0;
424         padding: 0 0.25em;
425 }
426
427 div.cbi-section-remove {
428         float: right;
429 }
430
431 .cbi-section-node {
432         clear: both;
433         border: 1px dotted #bbbbbb;
434         padding-bottom: 0;
435 }
436
437 .cbi-section-node div.cbi-section-table-row {
438         margin: 0.25em;
439 }
440
441 table.cbi-section-table {
442         width: 100%;
443         font-size: 95%;
444 }
445
446 table.cbi-section-table th,
447 table.cbi-section-table td {
448         text-align: center;
449 }
450
451 tr.cbi-section-table-descr th {
452         font-weight: normal;
453         font-size: 90%;
454 }
455
456 td.cbi-section-table-optionals {
457         text-align: left !important;
458         padding-top: 1em;
459 }
460
461 .cbi-value-helpicon img {
462         vertical-align: bottom;
463 }
464
465 div.cbi-error {
466         font-size: 95%;
467         font-weight: bold;
468         color: #FF0000;
469 }
470
471 .right {
472         text-align: right;
473 }
474
475 .luci {
476         position: fixed;
477         bottom: 0;
478         left: 0;
479         text-align: right;
480 }
481
482 .luci a {
483         color: #666666;
484         text-decoration: none;
485         font-size: 70%;
486 }
487
488 .inline {
489         display: inline;
490 }
491
492 .error500 {
493         white-space: normal;
494         border: 1px dotted #FF0000;
495         background-color: #FFFFFF;
496         padding: 0.5em;
497 }
498
499 #memorybar {
500         width:200px;
501         height:8px;
502         border:1px solid #bbb;
503         background-color:red
504 }
505
506 #memfree, #membuffers, #memcached {
507         float:right;
508         border:1px solid #bbb;
509         height:6px;
510 }
511
512 #memfree {
513         background-color:green;
514 }
515
516 #membuffers {
517         background-color:yellow;
518 }
519
520 #memcached {
521         background-color:orange;
522 }
523
524
525 /* obligatory IE6 Voodoo Code */
526 * html body {
527         padding-left: 50% !important;
528 }
529
530 * html div#header {
531         margin-left: -100% !important;
532 }
533
534 * html div.menubar {
535         margin-left: -100% !important;
536         width: 200% !important;
537 }
538
539 * html div#content {
540         margin-left: -80% !important;
541         width: 160% !important;
542 }
543
544 * html div.mainmenu div.hover ul,
545 * html div.mainmenu div li.hover ul,
546 * html div.mainmenu div li li.hover ul,
547 * html div.mainmenu div li li li.hover ul,
548 * html div.mainmenu div li li li li.hover ul {
549         display: block !important;
550         margin-left: 3em;
551 }
552
553 * html div.mainmenu div.hover ul {
554         margin-left: 0;
555 }
556
557 * html div.mainmenu .hover ul ul,
558 * html div.mainmenu .hover ul ul ul,
559 * html div.mainmenu .hover ul ul ul ul,
560 * html div.mainmenu .hover ul ul ul ul ul {
561         display: none !important;
562 }
563
564 * html div.mainmenu li {
565         height: 1em !important;
566         width: 10em !important;
567 }
568
569 * html .mainmenu {
570         height: 1.8em;
571 }
572
573 * html div.cbi-value-description {
574         margin-left: 40%;
575 }