61e4d4296fae9a1bd61bd5875a30a750f293c48a
[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 textarea#syslog {
215 width: 98%;
216 min-height: 500px;
217 border: 3px solid #cccccc;
218 padding: 5px;
219 font-family: monospace;
220 }
221
222 .cbi-section {
223 margin-bottom: 0.5em;
224 padding: 0.5em 1em;
225 border: 1px dotted #555555;
226 background-color: #ffffff;
227 background-color: rgba(255, 255, 255, 0.8);
228 color: #000000;
229 }
230
231 .cbi-section legend {
232 font-size: 110%;
233 font-weight: bold;
234 height: 1em;
235 padding: 0 0.25em;
236 background-color: transparent;
237 color: #555555;
238 }
239
240 *+html .cbi-section legend {
241 background-color: #ffffff;
242 background-color: rgba(255, 255, 255, 0.8);
243 color: #555555;
244 }
245
246 * html .cbi-section legend {
247 background-color: #ffffff;
248 background-color: rgba(255, 255, 255, 0.8);
249 color: #555555;
250 }
251
252 .cbi-section h2 {
253 margin: 0em 0 0.5em -0.5em !important;
254 }
255
256 .cbi-section h3 {
257 height: 1.5em;
258 font-size: 90%;
259 background-color: #ffffff;
260 background-color: rgba(255, 255, 255, 0.8);
261 color: #555555;
262 }
263
264 .cbi-section-descr {
265 margin-bottom: 0.5em;
266 font-size: 95%;
267 }
268
269 .cbi-title-ref {
270 color: inherit;
271 text-decoration: none;
272 padding-right: 18px;
273 background: url('../resources/cbi/link.gif') no-repeat scroll right center;
274 background-color: inherit;
275 }
276
277 ul.cbi-apply {
278 font-size: 90%;
279 }
280
281 input[type=submit],
282 input[type=reset],
283 input[type=image] {
284 cursor: pointer;
285 }
286
287
288 select,
289 input,
290 textarea {
291 background: #eeeeee;
292 color: #000000;
293 border-width: 1px;
294 border-color: #000000;
295 }
296
297 input[type=image] {
298 border: none;
299 }
300
301 input:focus,
302 input:hover,
303 select:focus,
304 select:hover,
305 textarea:focus,
306 textarea:hover {
307 background-color: #ffffff;
308 color: #000000;
309 }
310
311 select,
312 input[type=text],
313 input[type=password] {
314 width: 20em;
315 }
316
317 td select,
318 td input[type=text],
319 td input[type=password] {
320 width: 99%;
321 }
322
323 input.cbi-input-user {
324 background: url('../resources/cbi/user.gif') no-repeat scroll 1px center;
325 background-color: inherit;
326 color: #000000;
327 padding-left: 17px;
328 }
329
330 input.cbi-input-password {
331 background: url('../resources/cbi/key.gif') no-repeat scroll 1px center;
332 background-color: inherit;
333 color: #000000;
334 padding-left: 17px;
335 }
336
337 input.cbi-input-find {
338 background: url('../resources/cbi/find.gif') no-repeat scroll 1px center;
339 background-color: inherit;
340 color: #000000;
341 padding-left: 17px;
342 }
343
344 input.cbi-input-reload {
345 background: url('../resources/cbi/reload.gif') no-repeat scroll 1px center;
346 background-color: inherit;
347 color: #000000;
348 padding-left: 17px;
349 }
350
351 input.cbi-input-add,
352 input.cbi-button-add {
353 background: url('../resources/cbi/add.gif') no-repeat scroll 1px center;
354 background-color: inherit;
355 color: #000000;
356 padding-left: 17px;
357 padding-right: 1px;
358 }
359
360 input.cbi-input-fieldadd,
361 input.cbi-button-fieldadd {
362 background: url(../resources/cbi/fieldadd.gif) no-repeat scroll 1px center;
363 background-color: inherit;
364 color: #000000;
365 padding-left: 17px;
366 padding-right: 1px;
367 }
368
369 input.cbi-input-reset,
370 input.cbi-button-reset {
371 background: url('../resources/cbi/reset.gif') no-repeat scroll 1px center;
372 background-color: inherit;
373 color: #000000;
374 padding-left: 17px;
375 padding-right: 1px;
376 }
377
378 input.cbi-input-save,
379 input.cbi-button-save {
380 background: url('../resources/cbi/save.gif') no-repeat scroll 1px center;
381 background-color: inherit;
382 color: #000000;
383 padding-left: 17px;
384 padding-right: 1px;
385 }
386
387 input.cbi-input-apply,
388 input.cbi-button-apply {
389 background: url('../resources/cbi/apply.gif') no-repeat scroll 1px center;
390 background-color: inherit;
391 color: #000000;
392 padding-left: 17px;
393 padding-right: 1px;
394 }
395
396 input.cbi-input-remove,
397 div.cbi-section-remove input {
398 background: url('../resources/cbi/remove.gif') no-repeat scroll 1px center;
399 background-color: inherit;
400 color: #000000;
401 padding-left: 17px;
402 padding-right: 1px;
403 }
404
405 div.cbi-section-remove input {
406 border-bottom: none;
407 }
408
409 textarea {
410 margin-left: -1px;
411 margin-bottom: 0.5em;
412 }
413
414 form > div > input[type=submit],
415 form > div > input[type=reset] {
416 float: right;
417 margin-left: 0.5em;
418 }
419
420 table.smalltext {
421 background: #f5f5f5;
422 color: #000000;
423 border-top: 1px solid #666666;
424 border-right: 1px solid #666666;
425 border-bottom: 1px solid #666666;
426 font-size: 90%;
427 width: 80%;
428 margin-left: auto;
429 margin-right: auto;
430 border-collapse: collapse;
431 }
432
433 table.smalltext tr:hover td {
434 background-color: #bbddee;
435 color: #000000;
436 }
437
438 table.smalltext tr th {
439 padding: 0 0.25em;
440 border-left: 1px solid #666666;
441 text-align: left;
442 }
443
444 table.smalltext tr td {
445 padding: 0 0.25em;
446 border-top: 1px solid #666666;
447 border-left: 1px solid #666666;
448 }
449
450 table.cbi-section-table .cbi-rowstyle-1,
451 table.cbi-section-table .cbi-rowstyle-1 * {
452 background-color: #eeeeff;
453 color: #000000;
454 }
455
456 .cbi-section .cbi-rowstyle-1 h3 {
457 background-color: #eeeeff;
458 color: #555555;
459 }
460
461 .cbi-rowstyle-2 {
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 color: #000000;
474 }
475
476 .cbi-value-title {
477 float: left;
478 width: 40%;
479 }
480
481 div.cbi-value-field {
482 width: 58%;
483 margin-left: 40%;
484 padding: 0.25em 0;
485 }
486
487 div.cbi-value-description {
488 font-size: 90%;
489 display: inline;
490 }
491
492 div.cbi-section-create {
493 clear: left;
494 white-space: nowrap;
495 }
496
497 div.cbi-map-descr {
498 margin-bottom: 1em;
499 }
500
501 div.cbi-optionals {
502 padding: 0.25em;
503 border-bottom: 1px dotted #bbbbbb;
504 }
505
506 div.cbi-section-remove {
507 float: right;
508 }
509
510 .cbi-section-node {
511 clear: both;
512 border-top: 1px dotted #bbbbbb;
513 border-left: 1px dotted #bbbbbb;
514 border-right: 1px dotted #bbbbbb;
515 border-bottom: none;
516 padding-bottom: 0;
517 }
518
519 .cbi-section-node table div {
520 padding-bottom: 0;
521 border-bottom: none;
522 }
523
524 .cbi-section-node div.cbi-section-table-row {
525 margin: 0.25em;
526 }
527
528 table.cbi-section-table {
529 width: 100%;
530 font-size: 95%;
531 }
532
533 table.cbi-section-table th,
534 table.cbi-section-table td {
535 text-align: center;
536 }
537
538 tr.cbi-section-table-descr th {
539 font-weight: normal;
540 font-size: 90%;
541 }
542
543 td.cbi-section-table-optionals {
544 text-align: left !important;
545 padding-top: 1em;
546 }
547
548 .cbi-value-helpicon img {
549 vertical-align: bottom;
550 }
551
552 div.cbi-error {
553 font-size: 95%;
554 font-weight: bold;
555 color: #ff0000;
556 background-color: #ffffff;
557 }
558
559 td.cbi-value-error {
560 border-color: red;
561 }
562
563 .cbi-value-error input,
564 .cbi-value-error select {
565 color: red;
566 background-color: #ffcccc;
567 }
568
569 .cbi-section-error {
570 color: red;
571 background-color: white;
572 font-size: 95%;
573 border: 1px dotted red;
574 margin: 3px;
575 padding: 3px;
576 }
577
578 .right {
579 text-align: right;
580 }
581
582 .luci {
583 position: fixed;
584 bottom: 0;
585 left: 0;
586 text-align: right;
587 color: #ffffff;
588 }
589
590 .luci a:link,
591 .luci a:visited {
592 background-color: transparent;
593 color: #ffffff;
594 text-decoration: none;
595 font-size: 70%;
596 }
597
598 .inline {
599 display: inline;
600 }
601
602 .error500 {
603 white-space: normal;
604 border: 1px dotted #ff0000;
605 background-color: #ffffff;
606 color: #000000;
607 padding: 0.5em;
608 }
609
610 /* obligatory IE6 Voodoo Code */
611
612 * html body {
613 padding-left: 50% !important;
614 }
615
616 * html div#header {
617 margin-left: -100% !important;
618 }
619
620 * html div.menubar {
621 margin-left: -100% !important;
622 width: 200% !important;
623 }
624
625 * html div#maincontent {
626 margin-left: -80% !important;
627 width: 160% !important;
628 }
629
630 * html div.cbi-value-description {
631 margin-left: 40%;
632 }
633
634 }