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