* luci-0.8: backport new layout for apply messages
[project/luci.git] / themes / openwrt.org / htdocs / luci-static / openwrt.org / cascade.css
1 * {
2 margin: 0;
3 padding: 0;
4 }
5
6 body {
7 background-color: #4a6b7c;
8 background-image: url(bg.jpg);
9 background-position: bottom center;
10 background-attachment: fixed;
11 background-repeat: repeat-x;
12 color: #ffffff;
13 font-family: Verdana, Arial, sans-serif;
14 font-size: 100%;
15 line-height: 100%;
16 }
17
18 code {
19 font-family: monospace;
20 white-space: pre;
21 }
22
23 div#content ul {
24 margin-left: 2em;
25 }
26
27 .warning {
28 color: red !important;
29 font-weight: bold;
30 }
31
32 .clear {
33 clear: both;
34 height: 1px;
35 }
36
37 .hidden {
38 display: none;
39 }
40
41 .error {
42 color: #ff0000;
43 }
44
45 #header {
46 min-height: 98px;
47 background-image: url(header.png);
48 background-repeat: no-repeat;
49 background-position: left center;
50 background-color: #557788;
51 text-align: right;
52 }
53
54 #header .info {
55 padding: 1em 1em;
56 font-size: 70%;
57 line-height: 160%;
58 }
59
60 #header .title {
61 display: none;
62 }
63
64 .pathbar {
65 display: none;
66 }
67
68 .menubar {
69 width: 100%;
70 min-height: 1.8em;
71 background: #000000;
72 color: #ffffff;
73 }
74
75 .mainmenu {
76 float: left;
77 width: auto;
78 min-height: 1.8em;
79 background: #000000;
80 color: #ffffff;
81 }
82
83 .mainmenu div {
84 float: left;
85 }
86
87 .mainmenu li {
88 white-space: nowrap;
89 }
90
91 .mainmenu div ul {
92 display: none;
93 position: absolute;
94 background: #000000;
95 color: #ffffff;
96 border-width: 0 1px 1px 1px;
97 border-style: solid;
98 border-color: #444444;
99 list-style-type: none;
100 }
101
102 .mainmenu ul li:hover > ul,
103 .mainmenu div:hover > ul {
104 display: block;
105 }
106
107 .mainmenu ul li > ul {
108 left: 100%;
109 margin-top: -1.8em;
110 border-width: 1px;
111 }
112
113 .modemenu a,
114 .mainmenu a {
115 display: block;
116 padding: 0.5em;
117 color: #ffffff;
118 text-decoration: none;
119 font-size: 80%;
120 }
121
122 .mainmenu .active a,
123 .modemenu .active a {
124 color: #ffff00;
125 font-weight: bold;
126 }
127
128 .mainmenu li:hover > span > a,
129 .mainmenu div:hover > a {
130 font-weight: bold;
131 }
132
133 .modemenu a:hover,
134 .modemenu a:focus,
135 .mainmenu a:hover,
136 .mainmenu a:focus {
137 color: #ffff00;
138 font-weight: bold;
139 }
140
141 .mainmenu div.preactive > a {
142 color: #ffff00;
143 font-weight: bold;
144 }
145
146 .modemenu ul {
147 width: auto;
148 background: #000000;
149 color: #ffffff;
150 list-style-type: none;
151 }
152
153 .modemenu li {
154 float: right;
155 }
156
157 #content {
158 clear: both;
159 width: 80%;
160 margin: 0 auto;
161 padding: 0.5em;
162 background: #f5f5f5;
163 color: #000000;
164 border-width: 0 1px 1px 1px;
165 border-style: solid;
166 border-color: #444444;
167 font-size: 80%;
168 }
169
170 #content h1 {
171 margin: 0.25em 0 0.5em 0;
172 font-size: 150%;
173 font-weight: normal;
174 }
175
176 #content h2 {
177 margin: 0.5em 0;
178 font-size: 120%;
179 font-weight: normal;
180 text-decoration: underline;
181 }
182
183 #content p {
184 margin-bottom: 1em;
185 }
186
187 .cbi-section {
188 margin-bottom: 0.5em;
189 padding: 0.5em 1em;
190 border: 1px dotted #555555;
191 background-color: #ffffff;
192 }
193
194 .cbi-section legend {
195 font-size: 110%;
196 font-weight: bold;
197 height: 1em;
198 padding: 0 0.25em;
199 color: #555555;
200 }
201
202 .cbi-section h2 {
203 margin: 0em 0 0.5em -0.5em !important;
204 }
205
206 .cbi-section h3 {
207 height: 1.5em;
208 font-size: 90%;
209 color: #555555;
210 }
211
212 .cbi-section-descr {
213 margin-bottom: 0.5em;
214 font-size: 95%;
215 }
216
217 .cbi-title-ref {
218 color: inherit;
219 text-decoration: none;
220 padding-right: 18px;
221 background: url('../resources/cbi/link.gif') no-repeat scroll right center;
222 background-color: inherit;
223 }
224
225 ul.cbi-apply {
226 font-size: 90%;
227 }
228
229 input[type=submit],
230 input[type=reset],
231 input[type=image],
232 label {
233 cursor: pointer;
234 }
235
236
237 select,
238 input,
239 textarea {
240 background: #eeeeee;
241 color: #000000;
242 border-width: 1px;
243 border-color: #000000;
244 }
245
246 input[type=image] {
247 border: none;
248 }
249
250 input:focus,
251 input:hover,
252 select:focus,
253 select:hover,
254 textarea:focus,
255 textarea:hover {
256 background-color: #ffffff;
257 }
258
259 select,
260 input[type=text],
261 input[type=password] {
262 width: 20em;
263 }
264
265 td select,
266 td input[type=text],
267 td input[type=password] {
268 width: 99%;
269 }
270
271 input.cbi-input-user {
272 background: url('../resources/cbi/user.gif') no-repeat scroll 1px center;
273 background-color: inherit;
274 padding-left: 17px;
275 }
276
277 input.cbi-input-key {
278 background: url('../resources/cbi/key.gif') no-repeat scroll 1px center;
279 background-color: inherit;
280 padding-left: 17px;
281 }
282
283 input.cbi-input-find {
284 background: url('../resources/cbi/find.gif') no-repeat scroll 1px center;
285 background-color: inherit;
286 padding-left: 17px;
287 }
288
289 input.cbi-input-reload {
290 background: url('../resources/cbi/reload.gif') no-repeat scroll 1px center;
291 background-color: inherit;
292 padding-left: 17px;
293 }
294
295 input.cbi-input-add,
296 input.cbi-button-add {
297 background: url('../resources/cbi/add.gif') no-repeat scroll 1px center;
298 background-color: inherit;
299 padding-left: 17px;
300 padding-right: 1px;
301 }
302
303 input.cbi-input-fieldadd,
304 input.cbi-button-fieldadd {
305 background: url(../resources/cbi/fieldadd.gif) no-repeat scroll 1px center;
306 background-color: inherit;
307 padding-left: 17px;
308 padding-right: 1px;
309 }
310
311 input.cbi-input-reset,
312 input.cbi-button-reset {
313 background: url('../resources/cbi/reset.gif') no-repeat scroll 1px center;
314 background-color: inherit;
315 padding-left: 17px;
316 padding-right: 1px;
317 }
318
319 input.cbi-input-save,
320 input.cbi-button-save {
321 background: url('../resources/cbi/save.gif') no-repeat scroll 1px center;
322 background-color: inherit;
323 padding-left: 17px;
324 padding-right: 1px;
325 }
326
327 input.cbi-input-apply,
328 input.cbi-button-apply {
329 background: url('../resources/cbi/apply.gif') no-repeat scroll 1px center;
330 background-color: inherit;
331 padding-left: 17px;
332 padding-right: 1px;
333 }
334
335 input.cbi-input-remove,
336 div.cbi-section-remove input {
337 background: url('../resources/cbi/remove.gif') no-repeat scroll 1px center;
338 background-color: inherit;
339 padding-left: 17px;
340 padding-right: 1px;
341 }
342
343 div.cbi-section-remove input {
344 border-bottom: none;
345 }
346
347 textarea {
348 margin-left: -1px;
349 margin-bottom: 0.5em;
350 }
351
352 form > div > input[type=submit],
353 form > div > input[type=reset] {
354 float: right;
355 margin-left: 0.5em;
356 }
357
358 table.smalltext {
359 background: #f5f5f5;
360 border-top: 1px solid #666666;
361 border-right: 1px solid #666666;
362 border-bottom: 1px solid #666666;
363 font-size: 90%;
364 width: 80%;
365 margin-left: auto;
366 margin-right: auto;
367 border-collapse: collapse;
368 }
369
370 table.smalltext tr:hover td {
371 background-color: #bbddee;
372 }
373
374 table.smalltext tr th {
375 padding: 0 0.25em;
376 border-left: 1px solid #666666;
377 text-align: left;
378 }
379
380 table.smalltext tr td {
381 padding: 0 0.25em;
382 border-top: 1px solid #666666;
383 border-left: 1px solid #666666;
384 }
385
386 .cbi-rowstyle-1 {
387 background-color: #eeeeff;
388 }
389
390 .cbi-rowstyle-2 {
391
392 }
393
394 div.cbi-value {
395 clear: left;
396 vertical-align: middle;
397 padding-left: 0.25em;
398 border-bottom: 1px dotted #bbbbbb;
399 }
400
401 div.cbi-value:hover {
402 background: #f8f8f8;
403 }
404
405 div.cbi-value:last-child {
406 border: none;
407 }
408
409 .cbi-value-title {
410 float: left;
411 width: 40%;
412 }
413
414 div.cbi-value-field {
415 width: 58%;
416 margin: 0.25em 0 0.25em 40%;
417 }
418
419 div.cbi-value-description {
420 font-size: 90%;
421 display: inline;
422 }
423
424 div.cbi-section-create {
425 clear: left;
426 }
427
428 div.cbi-map-descr {
429 margin-bottom: 1em;
430 }
431
432 div.cbi-optionals {
433 margin: 0.5em 0;
434 padding: 0 0.25em;
435 }
436
437 div.cbi-section-remove {
438 float: right;
439 }
440
441 .cbi-section-node {
442 clear: both;
443 border: 1px dotted #bbbbbb;
444 padding-bottom: 0;
445 }
446
447 .cbi-section-node div.cbi-section-table-row {
448 margin: 0.25em;
449 }
450
451 table.cbi-section-table {
452 width: 100%;
453 font-size: 95%;
454 }
455
456 table.cbi-section-table th,
457 table.cbi-section-table td {
458 text-align: center;
459 }
460
461 tr.cbi-section-table-descr th {
462 font-weight: normal;
463 font-size: 90%;
464 }
465
466 td.cbi-section-table-optionals {
467 text-align: left !important;
468 padding-top: 1em;
469 }
470
471 .cbi-value-helpicon img {
472 vertical-align: bottom;
473 }
474
475 div.cbi-error {
476 font-size: 95%;
477 font-weight: bold;
478 color: #FF0000;
479 }
480
481 td.cbi-value-error {
482 border-color: red !important;
483 }
484
485 .cbi-value-error input,
486 .cbi-value-error select {
487 color: red !important;
488 background-color: #FFCCCC;
489 }
490
491 .cbi-section-error {
492 color: red;
493 font-size: 95%;
494 border: 1px dotted red;
495 margin: 3px;
496 padding: 3px;
497 }
498
499 .right {
500 text-align: right;
501 }
502
503 .luci {
504 position: fixed;
505 bottom: 0;
506 left: 0;
507 text-align: right;
508 }
509
510 .luci a {
511 color: #666666;
512 text-decoration: none;
513 font-size: 70%;
514 }
515
516 .inline {
517 display: inline;
518 }
519
520 .error500 {
521 white-space: normal;
522 border: 1px dotted #FF0000;
523 background-color: #FFFFFF;
524 padding: 0.5em;
525 }
526
527 #memorybar {
528 width:200px;
529 height:8px;
530 border:1px solid #bbb;
531 background-color:red
532 }
533
534 #memfree, #membuffers, #memcached {
535 float:right;
536 border:1px solid #bbb;
537 height:6px;
538 }
539
540 #memfree {
541 background-color:green;
542 }
543
544 #membuffers {
545 background-color:yellow;
546 }
547
548 #memcached {
549 background-color:orange;
550 }
551
552
553 /* obligatory IE6 Voodoo Code */
554 * html body {
555 padding-left: 50% !important;
556 }
557
558 * html div#header {
559 margin-left: -100% !important;
560 }
561
562 * html div.menubar {
563 margin-left: -100% !important;
564 width: 200% !important;
565 }
566
567 * html div#content {
568 margin-left: -80% !important;
569 width: 160% !important;
570 }
571
572 * html div.mainmenu div.hover ul,
573 * html div.mainmenu div li.hover ul,
574 * html div.mainmenu div li li.hover ul,
575 * html div.mainmenu div li li li.hover ul,
576 * html div.mainmenu div li li li li.hover ul {
577 display: block !important;
578 margin-left: 3em;
579 }
580
581 * html div.mainmenu div.hover ul {
582 margin-left: 0;
583 }
584
585 * html div.mainmenu .hover ul ul,
586 * html div.mainmenu .hover ul ul ul,
587 * html div.mainmenu .hover ul ul ul ul,
588 * html div.mainmenu .hover ul ul ul ul ul {
589 display: none !important;
590 }
591
592 * html div.mainmenu li {
593 height: 1em !important;
594 width: 10em !important;
595 }
596
597 * html .mainmenu {
598 height: 1.8em;
599 }
600
601 * html div.cbi-value-description {
602 margin-left: 40%;
603 }