themes: add new image button CSS classes, patch by Kevin Locke <klocke@digitalengines...
[project/luci.git] / themes / freifunk-hannover / htdocs / luci-static / freifunk-hannover / cascade.css
1 @charset "utf-8";\r
2 \r
3 @media all {\r
4 \r
5 html {\r
6         min-height: 100%;\r
7         height: auto;\r
8 }\r
9 \r
10 body {\r
11         color: #ffffff;\r
12         background-color: #fff;\r
13         background-image: url(bg.jpg);\r
14         background-position: bottom center;\r
15         background-repeat: repeat-x;\r
16         font-family: Verdana, Arial, sans-serif;\r
17         font-size: 101%;\r
18         line-height: 100%;\r
19         padding-bottom: 1.5em;\r
20 }\r
21 \r
22 * {\r
23         margin: 0;\r
24         padding: 0;\r
25 }\r
26 \r
27 abbr,\r
28 acronym {\r
29         font-style: normal;\r
30         font-variant: normal;\r
31 }\r
32 \r
33 abbr[title],\r
34 acronym[title] {\r
35         border-bottom: 1px dotted;\r
36         cursor: help;\r
37 }\r
38 \r
39 a:link abbr[title],\r
40 a:visited abbr[title],\r
41 a:link acronym[title],\r
42 a:visited acronym[title] {\r
43         cursor: pointer;\r
44 }\r
45 \r
46 code {\r
47         font-family: monospace;\r
48         white-space: pre;\r
49 }\r
50 \r
51 #maincontent ul {\r
52         margin-left: 2em;\r
53 }\r
54 \r
55 .warning {\r
56         color: red;\r
57         background-color: white;\r
58         font-weight: bold;\r
59         text-decoration: blink;\r
60 }\r
61 \r
62 .clear {\r
63         clear: both;\r
64 }\r
65 \r
66 .skiplink,\r
67 .navigation,\r
68 .hidden {\r
69         position: absolute;\r
70         left: -1000px;\r
71         top: -1000px;\r
72         width: 0px;\r
73         height: 0px;\r
74         overflow: hidden;\r
75         display: inline;\r
76 }\r
77 \r
78 .error {\r
79         color: #ff0000;\r
80         background-color: white;\r
81 }\r
82 \r
83 #header {\r
84         min-height: 98px;\r
85         background-image: url(header.jpg);\r
86         background-repeat: no-repeat;\r
87         background-position: left bottom;\r
88         background-color: #FFFFFF;\r
89         color: #fff;\r
90         text-align: right;\r
91         font-weight: bold;\r
92 }\r
93 \r
94 #header h1 {\r
95         padding: 1em 1em 0 1em;\r
96 }\r
97 \r
98 #header p {\r
99         padding: 0 1em 1em 1em;\r
100 }\r
101 \r
102 #header h1,\r
103 #header p {\r
104         font-size: 70%;\r
105         font-weight: normal;\r
106         line-height: 160%;\r
107         text-align: right;\r
108 }\r
109 \r
110 ul.dropdowns {\r
111         float: left;\r
112         margin: 0;\r
113         padding: 0;\r
114         width: auto;\r
115         list-style: none;\r
116 }\r
117 \r
118 html>body ul.dropdowns {\r
119         position: relative;\r
120 }\r
121 \r
122 ul.dropdowns li,\r
123 ul.dropdowns ul {\r
124         margin: 0;\r
125         padding: 0;\r
126         list-style: none;\r
127 }\r
128 \r
129 ul.dropdowns li {\r
130         float: left;\r
131         position: relative;\r
132         white-space: nowrap;\r
133 }\r
134 \r
135 ul.dropdowns li ul {\r
136         position: absolute;\r
137         z-index: 1000;\r
138         top: auto;\r
139         min-width: 10em;\r
140 }\r
141 \r
142 ul.dropdowns li li {\r
143         float: none;\r
144         position: relative;\r
145 }\r
146 \r
147 ul.dropdowns li a {\r
148         display: block;\r
149 }\r
150 \r
151 ul.dropdowns ul li ul {\r
152         top: 0;\r
153 }\r
154 \r
155 ul.dropdowns li ul,\r
156 ul.dropdowns li.over ul ul,\r
157 ul.dropdowns li.focus ul ul,\r
158 ul.dropdowns li:hover ul ul,\r
159 ul.dropdowns li.over ul ul ul,\r
160 ul.dropdowns li.focus ul ul ul,\r
161 ul.dropdowns li:hover ul ul ul,\r
162 ul.dropdowns li.over ul ul ul ul,\r
163 ul.dropdowns li.focus ul ul ul ul,\r
164 ul.dropdowns li:hover ul ul ul ul {\r
165         left: -3000px;\r
166 }\r
167 \r
168 ul.dropdowns li.over ul,\r
169 ul.dropdowns li.focus ul,\r
170 ul.dropdowns li:hover ul {\r
171         left: 0;\r
172 }\r
173 \r
174 ul.dropdowns ul li.over ul,\r
175 ul.dropdowns ul li.focus ul,\r
176 ul.dropdowns ul li:hover ul,\r
177 ul.dropdowns ul ul li.over ul,\r
178 ul.dropdowns ul ul li.focus ul,\r
179 ul.dropdowns ul ul li:hover ul,\r
180 ul.dropdowns ul ul ul li.over ul,\r
181 ul.dropdowns ul ul ul li.focus ul,\r
182 ul.dropdowns ul ul ul li:hover ul {\r
183         left: 100%;\r
184 }\r
185 \r
186 #menubar {\r
187         position: relative;\r
188         width: 100%;\r
189         background: #FFF;\r
190         color: #004a9c;\r
191 }\r
192 \r
193 #menubar .warning {\r
194         color: red;\r
195         background-color: #FFF;\r
196 }\r
197 \r
198 #menubar ul.dropdowns {\r
199         min-height: 1.8em;\r
200         background: #FFF;\r
201         color: #004a9c;\r
202 }\r
203 \r
204 #menubar ul.dropdowns li ul {\r
205         background: #FFF;\r
206         color: #004a9c;\r
207         border-width: 0 1px 1px 1px;\r
208         border-style: dashed;\r
209         border-color: #5a5a5a;\r
210 }\r
211 \r
212 #menubar ul.dropdowns ul li ul {\r
213         border-width: 1px;\r
214 }\r
215 \r
216 html #menubar a:link,\r
217 html #menubar a:visited {\r
218         position: relative;\r
219         display: block;\r
220         padding: 0.5em;\r
221         background: #FFF;\r
222         color: #004a9c;\r
223         text-decoration: none;\r
224         font-size: 80%;\r
225         font-weight: normal;\r
226 }\r
227 \r
228 \r
229 html #menubar a:link:hover,\r
230 html #menubar a:visited:hover,\r
231 html #menubar a:link:active,\r
232 html #menubar a:visited:active,\r
233 #menubar a:link:focus,\r
234 #menubar a:visited:focus {\r
235         background: #F2F2F2;\r
236         color: #e60076;\r
237 }\r
238 \r
239 html #menubar a:link.active,\r
240 html #menubar a:visited.active,\r
241 html #menubar a:link.preactive,\r
242 html #menubar a:visited.preactive {\r
243         background: #FFF;\r
244         color: #e60076;\r
245 }\r
246 \r
247 html #menubar a:link.warning,\r
248 html #menubar a:visited.warning {\r
249         background: #FFF;\r
250         color: red;\r
251         font-weight: bold;\r
252         text-decoration: blink;\r
253 }\r
254 \r
255 #menubar ul.dropdowns li.over>a,\r
256 #menubar ul.dropdowns li.focus>a,\r
257 #menubar ul.dropdowns li:hover>a {\r
258 }\r
259 \r
260 .lang_de #submenu_mini_system { min-width: 13.3em; }\r
261 * html .lang_de #submenu_mini_system { width: 13.3em; }\r
262 \r
263 .lang_pt-br #submenu_mini_network { min-width: 14em; }\r
264 * html .lang_pt-br #submenu_mini_network { width: 14em; }\r
265 \r
266 .lang_pt-br #submenu_mini_system { min-width: 11.5em; }\r
267 * html .lang_pt-br #submenu_mini_system { width: 11.5em; }\r
268 \r
269 .lang_ru #submenu_mini_system { min-width: 18em; }\r
270 * html .lang_ru #submenu_mini_system { width: 18em; }\r
271 \r
272 .lang_pt-br #submenu_admin_index { min-width: 11em; }\r
273 * html .lang_pt-br #submenu_admin_index { width: 11em; }\r
274 \r
275 .lang_ru #submenu_admin_index { min-width: 15.5em; }\r
276 * html .lang_ru #submenu_admin_index { width: 15.5em; }\r
277 \r
278 .lang_ru #submenu_admin_status { min-width: 10.5em; }\r
279 * html .lang_ru #submenu_admin_status { width: 10.5em; }\r
280 \r
281 .lang_de #submenu_admin_system { min-width: 13.3em; }\r
282 * html .lang_de #submenu_admin_system { width: 13.3em; }\r
283 \r
284 .lang_fr #submenu_admin_system { min-width: 14.5em; }\r
285 * html .lang_fr #submenu_admin_system { width: 14.5em; }\r
286 \r
287 .lang_pt-br #submenu_admin_system { min-width: 11.5em; }\r
288 * html .lang_pt-br #submenu_admin_system { width: 11.5em; }\r
289 \r
290 .lang_ru #submenu_admin_system { min-width: 18em; }\r
291 * html .lang_ru #submenu_admin_system { width: 18em; }\r
292 \r
293 #submenu_admin_services_chillispot { min-width: 15.5em; }\r
294 * html #submenu_admin_services_chillispot { width: 15.5em; }\r
295 \r
296 #submenu_admin_services_coovachilli { min-width: 15em; }\r
297 * html #submenu_admin_services_coovachilli { width: 15em; }\r
298 \r
299 .lang_ru #submenu_admin_network_routes { min-width: 15.3em; }\r
300 * html .lang_ru #submenu_admin_network_routes { width: 15.3em; }\r
301 \r
302 #submenu_admin_network_firewall { min-width: 14em; }\r
303 * html #submenu_admin_network_firewall { width: 14em; }\r
304 \r
305 .lang_de #submenu_admin_network_firewall { min-width: 16.5em; }\r
306 * html .lang_de #submenu_admin_network_firewall { width: 16.5em; }\r
307 \r
308 .lang_pt-br #submenu_admin_network_firewall { min-width: 15em; }\r
309 * html .lang_pt-br #submenu_admin_network_firewall { width: 15em; }\r
310 \r
311 #modemenu {\r
312         width: auto;\r
313         background: #000000;\r
314         color: #ffffff;\r
315         list-style: none;\r
316         margin-right: 1px;\r
317 }\r
318 \r
319 #modemenu li {\r
320         float: right;\r
321         list-style: none;\r
322 }\r
323 \r
324 #savemenu {\r
325         float: right;\r
326         margin-right: 2em;\r
327 }\r
328 \r
329 .lang_de #submenu_admin_uci {\r
330         width: 12em;\r
331 }\r
332 \r
333 .lang_ru #submenu_admin_uci {\r
334         width: 11.5em;\r
335 }\r
336 \r
337 textarea#syslog {\r
338         width: 98%;\r
339         min-height: 500px;\r
340         border: 3px solid #cccccc;\r
341         padding: 5px;\r
342         font-family: monospace;\r
343 }\r
344 \r
345 #maincontent {\r
346         clear: both;\r
347         width: 80%;\r
348         margin: 0 auto;\r
349         padding: 0.5em;\r
350         color: #000000;\r
351         font-size: 80%;\r
352         background-color: #fff;\r
353         background-image: url(bg.jpg);\r
354         background-repeat: repeat-x;\r
355         background-position: center bottom;\r
356         border: 1px dashed #CCCCCC;\r
357 }\r
358 \r
359 #maincontent h2 {\r
360         font-size: 150%;\r
361         font-family: "Trebuchet MS", Verdana, sans-serif;\r
362         font-weight: bold;\r
363         margin: 0.25em 0 0.7em 0;\r
364         border-bottom: 1px solid;\r
365         padding-top: 10px;\r
366         padding-bottom: 4px;\r
367         color: #004d9e;\r
368 }\r
369 \r
370 #maincontent h3 {\r
371         margin: 0.5em 0 1.1em 0;\r
372         font-size: 125%;\r
373         font-weight: bold;\r
374         font-style: italic;\r
375         font-family: "Trebuchet MS", Verdana, sans-serif;\r
376         color: #004d9e;\r
377 }\r
378 \r
379 #maincontent p {\r
380         margin-bottom: 1em;\r
381 }\r
382 \r
383 .cbi-section {\r
384         margin-bottom: 0.5em;\r
385         padding: 0.5em 1em;\r
386         border: 1px dotted #555555;\r
387         background-color: #ffffff;\r
388         color: #000000;\r
389 }\r
390 \r
391 .cbi-section legend {\r
392         font-size: 110%;\r
393         font-weight: bold;\r
394         height: 1em;\r
395         padding: 0 0.25em;\r
396         background-color: transparent;\r
397         color: #394d9e;\r
398 }\r
399 \r
400 .cbi-section h2 {\r
401         margin: 0em 0 0.5em -0.5em !important;\r
402 }\r
403 \r
404 .cbi-section h3 {\r
405         text-decoration: none !important;\r
406         font-weight: bold !important;\r
407         color: #555555 !important;\r
408         margin: 0.25em !important;\r
409         font-size: 100% !important;\r
410 }\r
411 \r
412 .cbi-section-descr {\r
413         margin-bottom: 0.5em;\r
414         font-size: 95%;\r
415 }\r
416 \r
417 .cbi-title-ref {\r
418         color: inherit;\r
419         text-decoration: none;\r
420         padding-right: 18px;\r
421         background: url('../resources/cbi/link.gif') no-repeat scroll right center;\r
422         background-color: inherit;\r
423 }\r
424 \r
425 ul.cbi-apply {\r
426         font-size: 90%;\r
427 }\r
428 \r
429 input[type=submit],\r
430 input[type=reset],\r
431 input[type=image] {\r
432         cursor: pointer;\r
433 }\r
434 \r
435 \r
436 select,\r
437 input,\r
438 textarea {\r
439         background: #eeeeee;\r
440         color: #000000;\r
441         border: none;\r
442 }\r
443 \r
444 input[type=image] {\r
445         border: none;\r
446 }\r
447 \r
448 input:focus,\r
449 input:hover,\r
450 select:focus,\r
451 select:hover,\r
452 textarea:focus,\r
453 textarea:hover {\r
454         background-color: #ffffff;\r
455         color: #000000;\r
456 }\r
457 \r
458 select,\r
459 input[type=text],\r
460 input[type=password] {\r
461         width: 20em;\r
462 }\r
463 \r
464 td select,\r
465 td input[type=text],\r
466 td input[type=password] {\r
467         width: 99%;\r
468 }\r
469 \r
470 img.cbi-image-button {\r
471         cursor: pointer;\r
472         margin: 0 2px;\r
473         vertical-align: middle;\r
474 }\r
475 \r
476 input.cbi-input-user {\r
477         background: url('../resources/cbi/user.gif') no-repeat scroll 1px center;\r
478         background-color: inherit;\r
479         color: #000000;\r
480         text-indent: 17px;\r
481 }\r
482 \r
483 input.cbi-input-password {\r
484         background: url('../resources/cbi/key.gif') no-repeat scroll 1px center;\r
485         background-color: inherit;\r
486         color: #000000;\r
487         text-indent: 17px;\r
488 }\r
489 \r
490 input.cbi-input-find {\r
491         background: url('../resources/cbi/find.gif') no-repeat scroll 1px center;\r
492         background-color: inherit;\r
493         color: #000000;\r
494         padding-left: 17px;\r
495 }\r
496 \r
497 input.cbi-input-reload {\r
498         background: url('../resources/cbi/reload.gif') no-repeat scroll 1px center;\r
499         background-color: inherit;\r
500         color: #000000;\r
501         padding-left: 17px;\r
502 }\r
503 \r
504 input.cbi-input-add,\r
505 input.cbi-button-add {\r
506         background: url('../resources/cbi/add.gif') no-repeat scroll 1px center;\r
507         background-color: inherit;\r
508         color: #000000;\r
509         padding-left: 17px;\r
510         padding-right: 1px;\r
511         border: 1px solid #FFF; \r
512 }\r
513 \r
514 input.cbi-input-fieldadd,\r
515 input.cbi-button-fieldadd {\r
516         background: url(../resources/cbi/fieldadd.gif) no-repeat scroll 1px center;\r
517         background-color: inherit;\r
518         color: #000000;\r
519         padding-left: 17px;\r
520         padding-right: 1px;\r
521 }\r
522 \r
523 input.cbi-input-reset,\r
524 input.cbi-button-reset {\r
525         background: url('../resources/cbi/reset.gif') no-repeat scroll 1px center;\r
526         background-color: inherit;\r
527         color: #000000;\r
528         padding-left: 17px;\r
529         padding-right: 1px;\r
530         border: none;\r
531 }\r
532 \r
533 input.cbi-input-save,\r
534 input.cbi-button-save {\r
535         background: url('../resources/cbi/save.gif') no-repeat scroll 1px center;\r
536         background-color: inherit;\r
537         color: #000000;\r
538         padding-left: 17px;\r
539         padding-right: 1px;\r
540         border: none;   \r
541 }\r
542 \r
543 input.cbi-input-apply,\r
544 input.cbi-button-apply {\r
545         background: url('../resources/cbi/apply.gif') no-repeat scroll 1px center;\r
546         background-color: inherit;\r
547         color: #000000; \r
548         padding-left: 17px;\r
549         padding-right: 1px;\r
550         border: none;   \r
551 }\r
552 \r
553 input.cbi-input-remove,\r
554 div.cbi-section-remove input {\r
555         background: url('../resources/cbi/remove.gif') no-repeat scroll 1px center;\r
556         background-color: inherit;\r
557         color: #000000;\r
558         padding-left: 17px;\r
559         padding-right: 1px;\r
560                 border: 1px solid #fff;\r
561 }\r
562 \r
563 div.cbi-section-remove input {\r
564         border-bottom: none;\r
565 }\r
566 \r
567 textarea {\r
568         margin-left: -1px;\r
569         margin-bottom: 0.5em;\r
570 }\r
571 \r
572 form > div > input[type=submit],\r
573 form > div > input[type=reset] {\r
574         float: right;\r
575         margin-left: 0.5em;\r
576 }\r
577 \r
578 table td,\r
579 table th {\r
580         color: #000000;\r
581 }\r
582 \r
583 table.smalltext {\r
584         background: #f5f5f5;\r
585         color: #000000;\r
586         border-top: 1px solid #666666;\r
587         border-right: 1px solid #666666;\r
588         border-bottom: 1px solid #666666;\r
589         font-size: 90%;\r
590         width: 80%;\r
591         margin-left: auto;\r
592         margin-right: auto;\r
593         border-collapse: collapse;\r
594 }\r
595 \r
596 table.smalltext tr:hover td {\r
597         background-color: #bbddee;\r
598         color: #000000;\r
599 }\r
600 \r
601 table.smalltext tr th {\r
602         padding: 0 0.25em;\r
603         border-left: 1px solid #666666;\r
604         text-align: left;\r
605 }\r
606 \r
607 table.smalltext tr td {\r
608         padding: 0 0.25em;\r
609         border-top: 1px solid #666666;\r
610         border-left: 1px solid #666666;\r
611 }\r
612 \r
613 table.cbi-section-table .cbi-rowstyle-1,\r
614 table.cbi-section-table .cbi-rowstyle-1 * {\r
615         background-color: #f1f6fa;\r
616         color: #000000;\r
617 }\r
618 \r
619 .cbi-section .cbi-rowstyle-1 h3 {\r
620         background-color: #f1f6fa;\r
621         color: #555555;\r
622 }\r
623 \r
624 .cbi-rowstyle-2 {\r
625         color: #000000;\r
626 }\r
627 \r
628 div.cbi-value {\r
629         clear: left;\r
630         vertical-align: middle;\r
631         padding-left: 0.25em;\r
632         border-bottom: 1px dashed #bbbbbb;\r
633 }\r
634 \r
635 div.cbi-value:hover {\r
636         background: #f8f8f8;\r
637         color: #000000;\r
638 }\r
639 \r
640 .cbi-value-title {\r
641         float: left;\r
642         width: 40%;\r
643         line-height: 1.8em;\r
644 }\r
645 \r
646 div.cbi-value-field {\r
647         width: 58%;\r
648         margin-left: 40%;\r
649         padding: 0.25em 0;\r
650 }\r
651 \r
652 div.cbi-value-description {\r
653         font-size: 90%;\r
654         display: inline;\r
655 }\r
656 \r
657 div.cbi-section-create {\r
658         clear: left;\r
659         white-space: nowrap;\r
660         vertical-align: top;\r
661 }\r
662 \r
663 div.cbi-tblsection-create {\r
664         border-bottom: 1px dotted #bbbbbb;\r
665 }\r
666 \r
667 div.cbi-section-create .cbi-button {\r
668         margin: 0.25em;\r
669 }\r
670 \r
671 input.cbi-section-create-name {\r
672     border: ;\r
673         margin-right: -0.25em;\r
674         border-top-width: 1px;\r
675         border-right-width: 1px;\r
676         border-bottom-width: 1px;\r
677         border-left-width: 1px;\r
678         border-top-color: #999999;\r
679         border-right-color: #999999;\r
680         border-bottom-color: #999999;\r
681         border-left-color: #999999;\r
682 }\r
683 \r
684 div.cbi-map-descr {\r
685         margin-bottom: 1em;\r
686 }\r
687 \r
688 div.cbi-optionals {\r
689         padding: 0.25em;\r
690         border-bottom: 1px dotted #bbbbbb;\r
691 }\r
692 \r
693 div.cbi-section-remove {\r
694         float: right;\r
695 }\r
696 \r
697 .cbi-section-node {\r
698         clear: both;\r
699         border-top: 1px dotted #bbbbbb;\r
700         border-left: 1px dotted #bbbbbb;\r
701         border-right: 1px dotted #bbbbbb;\r
702         border-bottom: none;\r
703         padding-bottom: 0;\r
704 }\r
705 \r
706 .cbi-section-node table div {\r
707         padding-bottom: 0;\r
708         border-bottom: none;\r
709 }\r
710 \r
711 .cbi-section-node div.cbi-section-table-row {\r
712         margin: 0.25em;\r
713 }\r
714 \r
715 table.cbi-section-table {\r
716         width: 100%;\r
717         font-size: 95%;\r
718 }\r
719 \r
720 table.cbi-section-table th,\r
721 table.cbi-section-table td {\r
722         text-align: center;\r
723 }\r
724 \r
725 tr.cbi-section-table-descr th {\r
726         font-weight: normal;\r
727         font-size: 90%;\r
728 }\r
729 \r
730 td.cbi-section-table-optionals {\r
731         text-align: left !important;\r
732         padding-top: 1em;\r
733 }\r
734 \r
735 .cbi-value-helpicon img {\r
736         vertical-align: bottom;\r
737 }\r
738 \r
739 div.cbi-error {\r
740         font-size: 95%;\r
741         font-weight: bold;\r
742         color: #ff0000;\r
743         background-color: #ffffff;\r
744 }\r
745 \r
746 td.cbi-value-error {\r
747         border-color: red;\r
748 }\r
749 \r
750 .cbi-value-error input,\r
751 .cbi-value-error select {\r
752         color: red;\r
753         background-color: #ffcccc;\r
754 }\r
755 \r
756 .cbi-section-error {\r
757         color: red;\r
758         background-color: white;\r
759         font-size: 95%;\r
760         border: 1px dotted red;\r
761         margin: 3px;\r
762         padding: 3px;\r
763 }\r
764 \r
765 .right {\r
766         text-align: right;\r
767 }\r
768 \r
769 .luci {\r
770         position: fixed;\r
771         bottom: 0;\r
772         left: 0;\r
773         text-align: right;\r
774 }\r
775 \r
776 .luci a:link,\r
777 .luci a:visited {\r
778         background-color: transparent;\r
779         color: #666666;\r
780         text-decoration: none;\r
781         font-size: 70%;\r
782 }\r
783 \r
784 .inline {\r
785         display: inline;\r
786 }\r
787 \r
788 .error500 {\r
789         white-space: normal;\r
790         border: 1px dotted #ff0000;\r
791         background-color: #ffffff;\r
792         color: #000000;\r
793         padding: 0.5em;\r
794 }\r
795 \r
796 \r
797 }\r