themes: add new button classes to remaining themes as well
[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 img.cbi-image-button {
324         cursor: pointer;
325         margin: 0 2px;
326         vertical-align: middle;
327 }
328
329 input.cbi-input-user {
330         background: url('../resources/cbi/user.gif') no-repeat scroll 1px center;
331         background-color: inherit;
332         color: #000000;
333         padding-left: 17px;
334 }
335
336 input.cbi-input-password {
337         background: url('../resources/cbi/key.gif') no-repeat scroll 1px center;
338         background-color: inherit;
339         color: #000000;
340         padding-left: 17px;
341 }
342
343 input.cbi-input-find {
344         background: url('../resources/cbi/find.gif') no-repeat scroll 1px center;
345         background-color: inherit;
346         color: #000000;
347         padding-left: 17px;
348 }
349
350 input.cbi-input-reload {
351         background: url('../resources/cbi/reload.gif') no-repeat scroll 1px center;
352         background-color: inherit;
353         color: #000000;
354         padding-left: 17px;
355 }
356
357 input.cbi-input-add,
358 input.cbi-button-add {
359         background: url('../resources/cbi/add.gif') no-repeat scroll 1px center;
360         background-color: inherit;
361         color: #000000;
362         padding-left: 17px;
363         padding-right: 1px;
364 }
365
366 input.cbi-input-fieldadd,
367 input.cbi-button-fieldadd {
368         background: url(../resources/cbi/fieldadd.gif) no-repeat scroll 1px center;
369         background-color: inherit;
370         color: #000000;
371         padding-left: 17px;
372         padding-right: 1px;
373 }
374
375 input.cbi-input-reset,
376 input.cbi-button-reset {
377         background: url('../resources/cbi/reset.gif') no-repeat scroll 1px center;
378         background-color: inherit;
379         color: #000000;
380         padding-left: 17px;
381         padding-right: 1px;
382 }
383
384 input.cbi-input-save,
385 input.cbi-button-save {
386         background: url('../resources/cbi/save.gif') no-repeat scroll 1px center;
387         background-color: inherit;
388         color: #000000;
389         padding-left: 17px;
390         padding-right: 1px;
391 }
392
393 input.cbi-input-apply,
394 input.cbi-button-apply {
395         background: url('../resources/cbi/apply.gif') no-repeat scroll 1px center;
396         background-color: inherit;
397         color: #000000;
398         padding-left: 17px;
399         padding-right: 1px;
400 }
401
402 input.cbi-input-remove,
403 div.cbi-section-remove input {
404         background: url('../resources/cbi/remove.gif') no-repeat scroll 1px center;
405         background-color: inherit;
406         color: #000000;
407         padding-left: 17px;
408         padding-right: 1px;
409 }
410
411 input.cbi-button-up {
412         background-image: url('../resources/cbi/up.gif');
413         padding-left: 11px;
414         padding-right: 1px;
415 }
416
417 input.cbi-button-down {
418         background-image: url('../resources/cbi/down.gif');
419         padding-left: 11px;
420         padding-right: 1px;
421 }
422
423 input.cbi-button-edit {
424         background-image: url('../resources/cbi/edit.gif');
425         color: #000000;
426         padding-left: 17px;
427         padding-right: 1px;
428 }
429
430 input.cbi-button-reload {
431         background-image: url('../resources/cbi/reload.gif');
432         color: #000000;
433         padding-left: 17px;
434         padding-right: 1px;
435 }
436
437 input.cbi-button-reset {
438         background-image: url('../resources/cbi/reset.gif');
439         color: #000000;
440         padding-left: 17px;
441         padding-right: 1px;
442 }
443
444 input.cbi-button-remove {
445         background-image: url('../resources/cbi/remove.gif');
446         color: #000000;
447         padding-left: 17px;
448         padding-right: 1px;
449 }
450
451 .cbi-input-invalid {
452         background-image: url('../resources/cbi/reset.gif');
453         background-repeat: no-repeat;
454         background-position: right;
455         color: #FF0000 !important;
456         border-color: #FF0000;
457 }
458
459 div.cbi-section-remove input {
460         border-bottom: none;
461 }
462
463 textarea {
464         margin-left: -1px;
465         margin-bottom: 0.5em;
466 }
467
468 form > div > input[type=submit],
469 form > div > input[type=reset] {
470         float: right;
471         margin-left: 0.5em;
472 }
473
474 table.smalltext {
475         background: #f5f5f5;
476         color: #000000;
477         border-top: 1px solid #666666;
478         border-right: 1px solid #666666;
479         border-bottom: 1px solid #666666;
480         font-size: 90%;
481         width: 80%;
482         margin-left: auto;
483         margin-right: auto;
484         border-collapse: collapse;
485 }
486
487 table.smalltext tr:hover td {
488         background-color: #bbddee;
489         color: #000000;
490 }
491
492 table.smalltext tr th {
493         padding: 0 0.25em;
494         border-left: 1px solid #666666;
495         text-align: left;
496 }
497
498 table.smalltext tr td {
499         padding: 0 0.25em;
500         border-top: 1px solid #666666;
501         border-left: 1px solid #666666;
502 }
503
504 table.cbi-section-table .cbi-rowstyle-1,
505 table.cbi-section-table .cbi-rowstyle-1 * {
506         background-color: #eeeeff;
507         color: #000000;
508 }
509
510 .cbi-section .cbi-rowstyle-1 h3 {
511         background-color: #eeeeff;
512         color: #555555;
513 }
514
515 .cbi-rowstyle-2 {
516 }
517
518 div.cbi-value {
519         clear: left;
520         vertical-align: middle;
521         padding-left: 0.25em;
522         border-bottom: 1px dotted #bbbbbb;
523 }
524
525 div.cbi-value:hover {
526         background: #f8f8f8;
527         color: #000000;
528 }
529
530 .cbi-value-title {
531         float: left;
532         width: 40%;
533 }
534
535 div.cbi-value-field {
536         width: 58%;
537         margin-left: 40%;
538         padding: 0.25em 0;
539 }
540
541 div.cbi-value-description {
542         font-size: 90%;
543         display: inline;
544 }
545
546 div.cbi-section-create {
547         clear: left;
548         white-space: nowrap;
549 }
550
551 div.cbi-map-descr {
552         margin-bottom: 1em;
553 }
554
555 div.cbi-optionals {
556         padding: 0.25em;
557         border-bottom: 1px dotted #bbbbbb;
558 }
559
560 div.cbi-section-remove {
561         float: right;
562 }
563
564 .cbi-section-node {
565         clear: both;
566         border-top: 1px dotted #bbbbbb;
567         border-left: 1px dotted #bbbbbb;
568         border-right: 1px dotted #bbbbbb;
569         border-bottom: none;
570         padding-bottom: 0;
571 }
572
573 .cbi-section-node table div {
574         padding-bottom: 0;
575         border-bottom: none;
576 }
577
578 .cbi-section-node div.cbi-section-table-row {
579         margin: 0.25em;
580 }
581
582 table.cbi-section-table {
583         width: 100%;
584         font-size: 95%;
585 }
586
587 table.cbi-section-table th,
588 table.cbi-section-table td {
589         text-align: center;
590 }
591
592 tr.cbi-section-table-descr th {
593         font-weight: normal;
594         font-size: 90%;
595 }
596
597 td.cbi-section-table-optionals {
598         text-align: left !important;
599         padding-top: 1em;
600 }
601
602 .cbi-value-helpicon img {
603         vertical-align: bottom;
604 }
605
606 div.cbi-error {
607         font-size: 95%;
608         font-weight: bold;
609         color: #ff0000;
610         background-color: #ffffff;
611 }
612
613 td.cbi-value-error {
614         border-color: red;
615 }
616
617 .cbi-value-error input,
618 .cbi-value-error select {
619         color: red;
620         background-color: #ffcccc;
621 }
622
623 .cbi-section-error {
624         color: red;
625         background-color: white;
626         font-size: 95%;
627         border: 1px dotted red;
628         margin: 3px;
629         padding: 3px;
630 }
631
632 .left {
633         text-align: left !important;
634 }
635
636 .right {
637         text-align: right !important;
638 }
639
640 .luci {
641         position: fixed;
642         bottom: 0;
643         left: 0;
644         text-align: right;
645         color: #ffffff;
646 }
647
648 .luci a:link,
649 .luci a:visited {
650         background-color: transparent;
651         color: #ffffff;
652         text-decoration: none;
653         font-size: 70%;
654 }
655
656 .inline {
657         display: inline;
658 }
659
660 .error500 {
661         white-space: normal;
662         border: 1px dotted #ff0000;
663         background-color: #ffffff;
664         color: #000000;
665         padding: 0.5em;
666 }
667
668 /* obligatory IE6 Voodoo Code */
669
670 * html body {
671         padding-left: 50% !important;
672 }
673
674 * html div#header {
675         margin-left: -100% !important;
676 }
677
678 * html div.menubar {
679         margin-left: -100% !important;
680         width: 200% !important;
681 }
682
683 * html div#maincontent {
684         margin-left: -80% !important;
685         width: 160% !important;
686 }
687
688 * html div.cbi-value-description {
689         margin-left: 40%;
690 }
691
692 }