8d0c434a98bf2566cfff59a6f9afd6c597615333
[project/luci.git] / themes / luci-theme-bootstrap / htdocs / luci-static / bootstrap / cascade.css
1 /*!
2  * LuCI Bootstrap Theme
3  * Copyright 2012 Nut & Bolt
4  * By David Menting <david@nut-bolt.nl>
5  * Based on Bootstrap v1.4.0
6  *
7  * Copyright 2011 Twitter, Inc
8  * Licensed under the Apache License v2.0
9  * http://www.apache.org/licenses/LICENSE-2.0
10  *
11  * Designed and built with all the love in the world @twitter by @mdo and @fat.
12  */
13 /* Reset.less
14  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here       that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
15  * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
16 html {
17         margin: 0;
18         padding: 0;
19 }
20
21 body {
22         margin: 0;
23         padding: 5px;
24 }
25
26 h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, q, s,
27 small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset,
28 form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {
29         margin: 0;
30         padding: 0;
31         border: 0;
32         font-weight: normal;
33         font-style: normal;
34         font-size: 100%;
35         line-height: 1;
36         font-family: inherit;
37 }
38
39 abbr[title], acronym[title] {
40         border-bottom: 1px dotted;
41         cursor: help;
42 }
43
44 table {
45         border-collapse: collapse;
46         border-spacing: 0;
47 }
48
49 ol, ul {
50         list-style: none;
51 }
52
53 q:before,
54 q:after,
55 blockquote:before,
56 blockquote:after {
57         content: "";
58 }
59
60 html {
61         overflow-y: scroll;
62         font-size: 100%;
63         -webkit-text-size-adjust: 100%;
64         -ms-text-size-adjust: 100%;
65 }
66
67 a:focus {
68         outline: thin dotted;
69 }
70
71 a:hover, a:active {
72         outline: 0;
73 }
74
75 article,
76 aside,
77 details,
78 figcaption,
79 figure,
80 footer,
81 header,
82 hgroup,
83 nav,
84 section {
85         display: block;
86 }
87
88 sub, sup {
89         font-size: 75%;
90         line-height: 0;
91         position: relative;
92         vertical-align: baseline;
93 }
94
95 sup {
96         top: -0.5em;
97 }
98
99 sub {
100         bottom: -0.25em;
101 }
102
103 img {
104         border: 0;
105         -ms-interpolation-mode: bicubic;
106 }
107
108 button,
109 input,
110 select,
111 option,
112 textarea {
113         font-size: 100%;
114         margin: 0;
115         -webkit-box-sizing: border-box;
116         -moz-box-sizing: border-box;
117         box-sizing: border-box;
118         vertical-align: baseline;
119         *vertical-align: middle;
120 }
121
122 button, input {
123         line-height: normal;
124         *overflow: visible;
125 }
126
127 button::-moz-focus-inner, input::-moz-focus-inner {
128         border: 0;
129         padding: 0;
130 }
131
132 button,
133 input[type="button"],
134 input[type="reset"],
135 input[type="submit"] {
136         cursor: pointer;
137         -webkit-appearance: button;
138 }
139
140 button[disabled],
141 input[type="button"][disabled],
142 input[type="reset"][disabled],
143 input[type="submit"][disabled] {
144         opacity: 0.7;
145 }
146
147 input[type="search"] {
148         -webkit-appearance: textfield;
149         -webkit-box-sizing: content-box;
150         -moz-box-sizing: content-box;
151         box-sizing: content-box;
152 }
153
154 input[type="search"]::-webkit-search-decoration {
155         -webkit-appearance: none;
156 }
157
158 textarea {
159         overflow: auto;
160         vertical-align: top;
161 }
162
163 /*
164  * Scaffolding
165  * Basic and global styles for generating a grid system, structural layout, and page templates
166  * ------------------------------------------------------------------------------------------- */
167 body {
168         background-color: #ffffff;
169         margin: 0;
170         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
171         font-size: 13px;
172         font-weight: normal;
173         line-height: 18px;
174         color: #404040;
175         padding-top: 58px;
176 }
177
178 .container {
179         width: 100%;
180         max-width: 940px;
181         margin-left: auto;
182         margin-right: auto;
183         zoom: 1;
184 }
185
186 .container:before, .container:after {
187         display: table;
188         content: "";
189         zoom: 1;
190 }
191
192 .container:after {
193         clear: both;
194 }
195
196 a {
197         color: #0069d6;
198         text-decoration: none;
199         line-height: inherit;
200         font-weight: inherit;
201 }
202
203 a:hover {
204         color: #00438a;
205         text-decoration: underline;
206 }
207
208 .pull-right {
209         float: right;
210 }
211
212 .pull-left {
213         float: left;
214 }
215
216 /* Typography.less
217  * Headings, body text, lists, code, and more for a versatile and durable typography system
218  * ---------------------------------------------------------------------------------------- */
219 p,
220 .cbi-map-descr,
221 .cbi-section-descr {
222         font-size: 13px;
223         font-weight: normal;
224         line-height: 18px;
225         margin-bottom: 9px;
226 }
227
228 p small {
229         font-size: 11px;
230         color: #bfbfbf;
231 }
232
233 h1,
234 h2,
235 h3,
236 h4,
237 h5,
238 h6 {
239         font-weight: bold;
240         color: #404040;
241 }
242
243 h1 small,
244 h2 small,
245 h3 small,
246 h4 small,
247 h5 small,
248 h6 small {
249         color: #bfbfbf;
250 }
251
252 h1 {
253         margin-bottom: 18px;
254         font-size: 30px;
255         line-height: 36px;
256 }
257
258 h1 small {
259         font-size: 18px;
260 }
261
262 h2 {
263         font-size: 24px;
264         line-height: 36px;
265 }
266
267 h2 small {
268         font-size: 14px;
269 }
270
271 h3,
272 h4,
273 h5,
274 h6 {
275         line-height: 36px;
276 }
277
278 h3 {
279         font-size: 18px;
280 }
281
282 h3 small {
283         font-size: 14px;
284 }
285
286 h4 {
287         font-size: 16px;
288 }
289
290 h4 small {
291         font-size: 12px;
292 }
293
294 h5 {
295         font-size: 14px;
296 }
297
298 h6 {
299         font-size: 13px;
300         color: #bfbfbf;
301         text-transform: uppercase;
302 }
303
304 ul, ol {
305         margin: 0 0 18px 25px;
306 }
307
308 ul ul,
309 ul ol,
310 ol ol,
311 ol ul {
312         margin-bottom: 0;
313 }
314
315 ul {
316         list-style: disc;
317 }
318
319 ol {
320         list-style: decimal;
321 }
322
323 li {
324         line-height: 18px;
325         color: #808080;
326 }
327
328 ul.unstyled {
329         list-style: none;
330         margin-left: 0;
331 }
332
333 dl {
334         margin-bottom: 18px;
335 }
336
337 dl dt, dl dd {
338         line-height: 18px;
339 }
340
341 dl dt {
342         font-weight: bold;
343 }
344
345 dl dd {
346         margin-left: 9px;
347 }
348
349 hr {
350         margin: 20px 0 19px;
351         border: 0;
352         border-bottom: 1px solid #eee;
353 }
354
355 strong {
356         font-style: inherit;
357         font-weight: bold;
358 }
359
360 em {
361         font-style: italic;
362         font-weight: inherit;
363         line-height: inherit;
364 }
365
366 small { font-size: 0.9em }
367
368 address {
369         display: block;
370         line-height: 18px;
371         margin-bottom: 18px;
372 }
373
374 code, pre {
375         padding: 0 3px 2px;
376         font-family: Monaco, Andale Mono, Courier New, monospace;
377         font-size: 12px;
378         -webkit-border-radius: 3px;
379         -moz-border-radius: 3px;
380         border-radius: 3px;
381 }
382
383 code {
384         background-color: #fee9cc;
385         color: rgba(0, 0, 0, 0.75);
386         padding: 1px 3px;
387 }
388
389 pre {
390         background-color: #f5f5f5;
391         display: block;
392         padding: 8.5px;
393         margin: 0 0 18px;
394         line-height: 18px;
395         font-size: 12px;
396         border: 1px solid #ccc;
397         border: 1px solid rgba(0, 0, 0, 0.15);
398         -webkit-border-radius: 3px;
399         -moz-border-radius: 3px;
400         border-radius: 3px;
401         white-space: pre;
402         white-space: pre-wrap;
403         word-wrap: break-word;
404 }
405
406 /* Forms.less
407  * Base styles for various input types, form layouts, and states
408  * ------------------------------------------------------------- */
409 form {
410         margin-bottom: 18px;
411 }
412
413 fieldset {
414         margin-bottom: 9px;
415         padding-top: 9px;
416 }
417
418 fieldset legend {
419         display: block;
420         font-size: 19.5px;
421         line-height: 1;
422         color: #404040;
423         padding-top: 20px;
424         *padding: 0 0 5px 0px;
425         /* IE6-7 */
426
427         *line-height: 1.5;
428         /* IE6-7 */
429
430 }
431 form .cbi-tab-descr {
432         line-height: 18px;
433         margin-bottom: 18px;
434 }
435
436 form .clearfix,
437 form .cbi-value {
438         margin-bottom: 18px;
439         zoom: 1;
440         overflow: hidden;
441 }
442
443 form .clearfix:before, form .clearfix:after,
444 form .cbi-value:before, form .cbi-value:after  {
445         display: table;
446         content: "";
447         zoom: 1;
448 }
449
450 form .clearfix:after,
451 form .cbi-value:after {
452         clear: both;
453 }
454
455 label,
456 input,
457 select,
458 textarea {
459         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
460         font-size: 13px;
461         font-weight: normal;
462         line-height: normal;
463 }
464
465 form .input,
466 form .cbi-value-field {
467         margin-left: 200px;
468 }
469
470 form .cbi-value label.cbi-value-title {
471         padding-top: 6px;
472         font-size: 13px;
473         line-height: 18px;
474         float: left;
475         width: 180px;
476         text-align: right;
477         color: #404040;
478 }
479
480 input[type=checkbox], input[type=radio] {
481         cursor: pointer;
482 }
483
484 input,
485 textarea,
486 select,
487 .uneditable-input {
488         display: inline-block;
489         width: 210px;
490         height: 30px;
491         padding: 4px;
492         font-size: 13px;
493         line-height: 18px;
494         color: #808080;
495         border: 1px solid #ccc;
496         -webkit-border-radius: 3px;
497         -moz-border-radius: 3px;
498         border-radius: 3px;
499 }
500
501 select {
502         padding: initial;
503         background: #fff;
504         box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1);
505 }
506
507 input[type=checkbox], input[type=radio] {
508         width: auto;
509         height: auto;
510         padding: 0;
511         margin: 3px 0;
512         *margin-top: 0;
513         /* IE6-7 */
514
515         line-height: normal;
516         border: none;
517 }
518
519 input[type=file] {
520         background-color: #ffffff;
521         padding: initial;
522         border: initial;
523         line-height: initial;
524         -webkit-box-shadow: none;
525         -moz-box-shadow: none;
526         box-shadow: none;
527         width: auto !important;
528 }
529
530 input[type=button], input[type=reset], input[type=submit] {
531         width: auto;
532         height: auto;
533 }
534
535 select, input[type=file] {
536         *height: auto;
537         *margin-top: 4px;
538         /* For IE7, add top margin to align select with labels */
539 }
540
541 select[multiple] {
542         height: inherit;
543         background-color: #ffffff;
544 }
545
546 textarea {
547         height: auto;
548 }
549
550 .uneditable-input {
551         background-color: #ffffff;
552         display: block;
553         border-color: #eee;
554         -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
555         -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
556         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
557         cursor: not-allowed;
558 }
559
560 ::-moz-placeholder {
561         color: #bfbfbf;
562 }
563
564 ::-webkit-input-placeholder {
565         color: #bfbfbf;
566 }
567
568 input, textarea {
569         -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
570         -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
571         -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
572         -o-transition: border linear 0.2s, box-shadow linear 0.2s;
573         transition: border linear 0.2s, box-shadow linear 0.2s;
574         -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
575         -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
576         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
577 }
578
579 input:focus, textarea:focus {
580         outline: 0;
581         border-color: rgba(82, 168, 236, 0.8);
582         -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
583         -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
584         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
585 }
586
587 input[type=file]:focus, input[type=checkbox]:focus, select:focus {
588         -webkit-box-shadow: none;
589         -moz-box-shadow: none;
590         box-shadow: none;
591         outline: 1px dotted #666;
592 }
593
594 form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline {
595         color: #b94a48;
596 }
597
598 form .clearfix.error input, form .clearfix.error textarea {
599         color: #b94a48;
600         border-color: #ee5f5b;
601 }
602
603 form .clearfix.error input:focus, form .clearfix.error textarea:focus {
604         border-color: #e9322d;
605         -webkit-box-shadow: 0 0 6px #f8b9b7;
606         -moz-box-shadow: 0 0 6px #f8b9b7;
607         box-shadow: 0 0 6px #f8b9b7;
608 }
609
610 form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on {
611         color: #b94a48;
612         background-color: #fce6e6;
613         border-color: #b94a48;
614 }
615
616 form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline {
617         color: #c09853;
618 }
619
620 form .clearfix.warning input, form .clearfix.warning textarea {
621         color: #c09853;
622         border-color: #ccae64;
623 }
624
625 form .clearfix.warning input:focus, form .clearfix.warning textarea:focus {
626         border-color: #be9a3f;
627         -webkit-box-shadow: 0 0 6px #e5d6b1;
628         -moz-box-shadow: 0 0 6px #e5d6b1;
629         box-shadow: 0 0 6px #e5d6b1;
630 }
631
632 form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on {
633         color: #c09853;
634         background-color: #d2b877;
635         border-color: #c09853;
636 }
637
638 form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline {
639         color: #468847;
640 }
641
642 form .clearfix.success input, form .clearfix.success textarea {
643         color: #468847;
644         border-color: #57a957;
645 }
646
647 form .clearfix.success input:focus, form .clearfix.success textarea:focus {
648         border-color: #458845;
649         -webkit-box-shadow: 0 0 6px #9acc9a;
650         -moz-box-shadow: 0 0 6px #9acc9a;
651         box-shadow: 0 0 6px #9acc9a;
652 }
653
654 form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on {
655         color: #468847;
656         background-color: #bcddbc;
657         border-color: #468847;
658 }
659
660 input[disabled],
661 select[disabled],
662 textarea[disabled],
663 input[readonly],
664 select[readonly],
665 textarea[readonly] {
666         background-color: #f5f5f5;
667         border-color: #ddd;
668 }
669
670 .actions,
671 .cbi-page-actions {
672         background: #f5f5f5;
673         margin-bottom: 18px;
674         padding: 17px 20px 18px 150px;
675         border-top: 1px solid #ddd;
676         -webkit-border-radius: 0 0 3px 3px;
677         -moz-border-radius: 0 0 3px 3px;
678         border-radius: 0 0 3px 3px;
679         text-align: right;
680 }
681
682 .actions .secondary-action,
683 .cbi-page-actions .secondary-action{
684         float: right;
685 }
686
687 .actions .secondary-action a,
688 .cbi-page-actions .secondary-action a {
689         line-height: 30px;
690 }
691
692 .actions .secondary-action a:hover,
693 .cbi-page-actions .secondary-action a:hover {
694         text-decoration: underline;
695 }
696
697 .help-inline, .help-block {
698         font-size: 13px;
699         line-height: 18px;
700         color: #bfbfbf;
701 }
702
703 .help-inline {
704         padding-left: 5px;
705         *position: relative;
706         /* IE6-7 */
707
708         *top: -5px;
709         /* IE6-7 */
710
711 }
712
713 .help-block {
714         display: block;
715         max-width: 600px;
716 }
717
718 /*
719  * Tables.less
720  * Tables for, you guessed it, tabular data
721  * ---------------------------------------- */
722 table {
723         width: 100%;
724         margin-bottom: 18px;
725         padding: 0;
726         font-size: 13px;
727         border-collapse: collapse;
728 }
729
730 table th, table td {
731         padding: 10px 10px 9px;
732         line-height: 18px;
733         text-align: left;
734 }
735
736 table th {
737         padding-top: 9px;
738         font-weight: bold;
739         vertical-align: middle;
740 }
741
742 table td {
743         vertical-align: top;
744         border-top: 1px solid #ddd;
745 }
746
747 table tbody th {
748         border-top: 1px solid #ddd;
749         vertical-align: top;
750 }
751
752 /* Patterns.less
753  * Repeatable UI elements outside the base styles provided from the scaffolding
754  * ---------------------------------------------------------------------------- */
755 header {
756         height: 40px;
757         position: fixed;
758         top: 0;
759         left: 0;
760         right: 0;
761         z-index: 10000;
762         overflow: visible;
763         color: #BFBFBF;
764 }
765
766 header a {
767         color: #bfbfbf;
768         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
769 }
770
771 header h3 a:hover, header .brand:hover, header ul .active > a {
772         background-color: #333;
773         background-color: rgba(255, 255, 255, 0.05);
774         color: #ffffff;
775         text-decoration: none;
776 }
777
778 header h3 {
779         position: relative;
780 }
781
782 header h3 a, header .brand {
783         float: left;
784         display: block;
785         padding: 8px 20px 12px;
786         margin-left: -20px;
787         color: #ffffff;
788         font-size: 20px;
789         font-weight: 200;
790         line-height: 1;
791 }
792
793 header p {
794         margin: 0;
795         line-height: 40px;
796 }
797
798 header .fill {
799         background-color: #222;
800         background-color: #222222;
801         background-repeat: repeat-x;
802         background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
803         background-image: -moz-linear-gradient(top, #333333, #222222);
804         background-image: -ms-linear-gradient(top, #333333, #222222);
805         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
806         background-image: -webkit-linear-gradient(top, #333333, #222222);
807         background-image: -o-linear-gradient(top, #333333, #222222);
808         background-image: linear-gradient(to bottom, #333333, #222222);
809         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
810         -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
811         -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
812         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
813         padding: 0 5px;
814 }
815
816 header div > ul, .nav {
817         display: block;
818         float: left;
819         margin: 0 10px 0 0;
820         position: relative;
821         left: 0;
822 }
823
824 header div > ul > li, .nav > li {
825         display: block;
826         float: left;
827 }
828
829 header div > ul a, .nav a {
830         display: block;
831         float: none;
832         padding: 10px 10px 11px;
833         line-height: 19px;
834         text-decoration: none;
835 }
836
837 header div > ul a:hover, .nav a:hover {
838         color: #ffffff;
839         text-decoration: none;
840 }
841
842 header div > ul .active > a, .nav .active > a {
843         background-color: #222;
844         background-color: rgba(0, 0, 0, 0.5);
845 }
846
847 header div > ul.secondary-nav, .nav.secondary-nav {
848         float: right;
849         margin-left: 10px;
850         margin-right: 0;
851 }
852
853 header div > ul.secondary-nav .menu-dropdown,
854 .nav.secondary-nav .menu-dropdown,
855 header div > ul.secondary-nav .dropdown-menu,
856 .nav.secondary-nav .dropdown-menu {
857         right: 0;
858         border: 0;
859 }
860
861 header div > ul a.menu:hover,
862 .nav a.menu:hover,
863 header div > ul li.open .menu,
864 .nav li.open .menu,
865 header div > ul .dropdown-toggle:hover,
866 .nav .dropdown-toggle:hover,
867 header div > ul .dropdown.open .dropdown-toggle,
868 .nav .dropdown.open .dropdown-toggle {
869         background: #444;
870         background: rgba(255, 255, 255, 0.05);
871 }
872
873 header div > ul .menu-dropdown,
874 .nav .menu-dropdown,
875 header div > ul .dropdown-menu,
876 .nav .dropdown-menu {
877         background-color: #333;
878 }
879
880 header div > ul .menu-dropdown a.menu,
881 .nav .menu-dropdown a.menu,
882 header div > ul .dropdown-menu a.menu,
883 .nav .dropdown-menu a.menu,
884 header div > ul .menu-dropdown .dropdown-toggle,
885 .nav .menu-dropdown .dropdown-toggle,
886 header div > ul .dropdown-menu .dropdown-toggle,
887 .nav .dropdown-menu .dropdown-toggle {
888         color: #ffffff;
889 }
890
891 header div > ul .menu-dropdown a.menu.open,
892 .nav .menu-dropdown a.menu.open,
893 header div > ul .dropdown-menu a.menu.open,
894 .nav .dropdown-menu a.menu.open,
895 header div > ul .menu-dropdown .dropdown-toggle.open,
896 .nav .menu-dropdown .dropdown-toggle.open,
897 header div > ul .dropdown-menu .dropdown-toggle.open,
898 .nav .dropdown-menu .dropdown-toggle.open {
899         background: #444;
900         background: rgba(255, 255, 255, 0.05);
901 }
902
903 header div > ul .menu-dropdown li a,
904 .nav .menu-dropdown li a,
905 header div > ul .dropdown-menu li a,
906 .nav .dropdown-menu li a {
907         color: #999;
908         text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
909 }
910
911 header div > ul .menu-dropdown li a:hover,
912 .nav .menu-dropdown li a:hover,
913 header div > ul .dropdown-menu li a:hover,
914 .nav .dropdown-menu li a:hover {
915         background-color: #191919;
916         background-repeat: repeat-x;
917         background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
918         background-image: -moz-linear-gradient(top, #292929, #191919);
919         background-image: -ms-linear-gradient(top, #292929, #191919);
920         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));
921         background-image: -webkit-linear-gradient(top, #292929, #191919);
922         background-image: -o-linear-gradient(top, #292929, #191919);
923         background-image: linear-gradient(to bottom, #292929, #191919);
924         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
925         color: #ffffff;
926 }
927
928 header div > ul .menu-dropdown .active a,
929 .nav .menu-dropdown .active a,
930 header div > ul .dropdown-menu .active a,
931 .nav .dropdown-menu .active a {
932         color: #ffffff;
933 }
934
935 header div > ul .menu-dropdown .divider,
936 .nav .menu-dropdown .divider,
937 header div > ul .dropdown-menu .divider,
938 .nav .dropdown-menu .divider {
939         background-color: #222;
940         border-color: #444;
941 }
942
943 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
944         padding: 4px 15px;
945 }
946
947 li.menu, .dropdown {
948         position: relative;
949 }
950
951 a.menu:after, .dropdown-toggle:after {
952         width: 0;
953         height: 0;
954         display: inline-block;
955         content: "&darr;";
956         text-indent: -99999px;
957         vertical-align: top;
958         margin-top: 8px;
959         margin-left: 4px;
960         border-left: 4px solid transparent;
961         border-right: 4px solid transparent;
962         border-top: 4px solid #ffffff;
963         filter: alpha(opacity=50);
964         -khtml-opacity: 0.5;
965         -moz-opacity: 0.5;
966         opacity: 0.5;
967 }
968
969 .menu-dropdown, .dropdown-menu {
970         background-color: #ffffff;
971         float: left;
972         position: absolute;
973         top: 40px;
974         left: -9999px;
975         z-index: 900;
976         min-width: 160px;
977         max-width: 220px;
978         _width: 160px;
979         margin-left: 0;
980         margin-right: 0;
981         padding: 6px 0;
982         zoom: 1;
983         border-color: #999;
984         border-color: rgba(0, 0, 0, 0.2);
985         border-style: solid;
986         border-width: 0 1px 1px;
987         -webkit-border-radius: 0 0 6px 6px;
988         -moz-border-radius: 0 0 6px 6px;
989         border-radius: 0 0 6px 6px;
990         -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
991         -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
992         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
993         -webkit-background-clip: padding-box;
994         -moz-background-clip: padding-box;
995         background-clip: padding-box;
996 }
997
998 .menu-dropdown li, .dropdown-menu li {
999         float: none;
1000         display: block;
1001         background-color: transparent;
1002 }
1003
1004 .menu-dropdown .divider, .dropdown-menu .divider {
1005         height: 1px;
1006         margin: 5px 0;
1007         overflow: hidden;
1008         background-color: #eee;
1009         border-bottom: 1px solid #ffffff;
1010 }
1011
1012 header .dropdown-menu a, .dropdown-menu a {
1013         display: block;
1014         padding: 4px 15px;
1015         clear: both;
1016         font-weight: normal;
1017         line-height: 18px;
1018         color: #808080;
1019         text-shadow: 0 1px 0 #ffffff;
1020 }
1021
1022 header .dropdown-menu a:hover,
1023 .dropdown-menu a:hover,
1024 header .dropdown-menu a.hover,
1025 .dropdown-menu a.hover {
1026         background-color: #dddddd;
1027         background-repeat: repeat-x;
1028         background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
1029         background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
1030         background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
1031         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
1032         background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
1033         background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
1034         background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
1035         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
1036         color: #404040;
1037         text-decoration: none;
1038         -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
1039         -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
1040         box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
1041 }
1042
1043 .open .menu,
1044 .dropdown.open .menu,
1045 .open .dropdown-toggle,
1046 .dropdown.open .dropdown-toggle {
1047         color: #ffffff;
1048         background: #ccc;
1049         background: rgba(0, 0, 0, 0.3);
1050 }
1051
1052 .open .menu-dropdown,
1053 .dropdown.open .menu-dropdown,
1054 .open .dropdown-menu,
1055 .dropdown.open .dropdown-menu {
1056         left: 0;
1057 }
1058
1059 .dropdown:hover ul.dropdown-menu {
1060         left: 0;
1061 }
1062
1063 .dropdown-menu .dropdown-menu {
1064           position: absolute;
1065           left: 159px;
1066 }
1067
1068 .dropdown-menu li {
1069           position: relative;
1070 }
1071
1072 .tabs, .cbi-tabmenu {
1073         margin: 0 0 18px;
1074         padding: 0;
1075         list-style: none;
1076         zoom: 1;
1077 }
1078
1079 .tabs:before,
1080 .cbi-tabmenu:before,
1081 .tabs:after,
1082 .cbi-tabmenu:after {
1083         display: table;
1084         content: "";
1085         zoom: 1;
1086 }
1087
1088 .tabs:after, .cbi-tabmenu:after {
1089         clear: both;
1090 }
1091
1092 .tabs > li, .cbi-tabmenu > li {
1093         float: left;
1094 }
1095
1096 .tabs > li > a, .cbi-tabmenu > li > a {
1097         display: block;
1098 }
1099
1100 .tabs,
1101 .cbi-tabmenu {
1102         border-color: #ddd;
1103         border-style: solid;
1104         border-width: 0 0 1px;
1105 }
1106
1107 .tabs > li,
1108 .cbi-tabmenu > li {
1109         position: relative;
1110         margin-bottom: -1px;
1111 }
1112
1113 .cbi-tabmenu.map {
1114         margin: 0;
1115 }
1116
1117 .cbi-tabmenu.map > li {
1118         font-size: 16.5px;
1119         font-weight: bold;
1120 }
1121
1122 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1123         display: none;
1124 }
1125
1126 .tabs > li > a,
1127 .cbi-tabmenu > li > a {
1128         padding: 0 15px;
1129         margin-right: 2px;
1130         line-height: 34px;
1131         border: 1px solid transparent;
1132         -webkit-border-radius: 4px 4px 0 0;
1133         -moz-border-radius: 4px 4px 0 0;
1134         border-radius: 4px 4px 0 0;
1135 }
1136
1137 .tabs > li > a:hover,
1138 .cbi-tabmenu > li > a:hover {
1139         text-decoration: none;
1140         background-color: #eee;
1141         border-color: #eee #eee #ddd;
1142 }
1143
1144 .tabs .active > a, .tabs .active > a:hover,
1145 .cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover,
1146 .cbi-tab > a:link, .cbi-tab > a:hover {
1147         color: #808080;
1148         background-color: #ffffff;
1149         border: 1px solid #ddd;
1150         border-bottom-color: transparent;
1151         cursor: default;
1152 }
1153
1154 .tabs .menu-dropdown, .tabs .dropdown-menu,
1155 .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu {
1156         top: 35px;
1157         border-width: 1px;
1158         -webkit-border-radius: 0 6px 6px 6px;
1159         -moz-border-radius: 0 6px 6px 6px;
1160         border-radius: 0 6px 6px 6px;
1161 }
1162
1163 .tabs a.menu:after, .tabs .dropdown-toggle:after,
1164 .cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after {
1165         border-top-color: #999;
1166         margin-top: 15px;
1167         margin-left: 5px;
1168 }
1169
1170 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle,
1171 .cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle {
1172         border-color: #999;
1173 }
1174
1175 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after,
1176 .cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after {
1177         border-top-color: #555;
1178 }
1179
1180 .tab-content > .tab-pane,
1181 .tab-content > div {
1182         display: none;
1183 }
1184
1185 .tab-content > .active {
1186         display: block;
1187 }
1188
1189 .breadcrumb {
1190         padding: 7px 14px;
1191         margin: 0 0 18px;
1192         background-color: #f5f5f5;
1193         background-repeat: repeat-x;
1194         background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
1195         background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
1196         background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
1197         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
1198         background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
1199         background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
1200         background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
1201         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
1202         border: 1px solid #ddd;
1203         -webkit-border-radius: 3px;
1204         -moz-border-radius: 3px;
1205         border-radius: 3px;
1206         -webkit-box-shadow: inset 0 1px 0 #ffffff;
1207         -moz-box-shadow: inset 0 1px 0 #ffffff;
1208         box-shadow: inset 0 1px 0 #ffffff;
1209 }
1210
1211 .breadcrumb li {
1212         display: inline;
1213         text-shadow: 0 1px 0 #ffffff;
1214 }
1215
1216 .breadcrumb .divider {
1217         padding: 0 5px;
1218         color: #bfbfbf;
1219 }
1220
1221 .breadcrumb .active a {
1222         color: #404040;
1223 }
1224
1225 footer {
1226         margin-top: 17px;
1227         padding-top: 17px;
1228         border-top: 1px solid #eee;
1229 }
1230
1231 .btn.danger,
1232 .alert-message.danger,
1233 .btn.danger:hover,
1234 .alert-message.danger:hover,
1235 .btn.error,
1236 .alert-message.error,
1237 .btn.error:hover,
1238 .alert-message.error:hover,
1239 .btn.success,
1240 .alert-message.success,
1241 .btn.success:hover,
1242 .alert-message.success:hover,
1243 .btn.info,
1244 .alert-message.info,
1245 .btn.info:hover,
1246 .alert-message.info:hover {
1247         color: #ffffff;
1248 }
1249
1250 .btn .close, .alert-message .close {
1251         font-family: Arial, sans-serif;
1252         line-height: 18px;
1253 }
1254
1255 .btn.danger,
1256 .alert-message.danger,
1257 .btn.error,
1258 .alert-message.error {
1259         background-color: #c43c35;
1260         background-repeat: repeat-x;
1261         background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
1262         background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
1263         background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
1264         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
1265         background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
1266         background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
1267         background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
1268         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
1269         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1270         border-color: #c43c35 #c43c35 #882a25;
1271         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1272 }
1273
1274 .btn.success, .alert-message.success {
1275         background-color: #57a957;
1276         background-repeat: repeat-x;
1277         background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
1278         background-image: -moz-linear-gradient(top, #62c462, #57a957);
1279         background-image: -ms-linear-gradient(top, #62c462, #57a957);
1280         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
1281         background-image: -webkit-linear-gradient(top, #62c462, #57a957);
1282         background-image: -o-linear-gradient(top, #62c462, #57a957);
1283         background-image: linear-gradient(to bottom, #62c462, #57a957);
1284         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
1285         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1286         border-color: #57a957 #57a957 #3d773d;
1287         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1288 }
1289
1290 .btn.info, .alert-message.info {
1291         background-color: #339bb9;
1292         background-repeat: repeat-x;
1293         background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
1294         background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
1295         background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
1296         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
1297         background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
1298         background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
1299         background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
1300         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
1301         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1302         border-color: #339bb9 #339bb9 #22697d;
1303         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1304 }
1305
1306 .btn,
1307 .cbi-button {
1308         cursor: pointer;
1309         display: inline-block;
1310         background-color: #e6e6e6;
1311         background-repeat: no-repeat;
1312         background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1313         background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1314         background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1315         background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1316         background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1317         background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1318         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1319         padding: 5px 14px 6px;
1320         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1321         color: #333;
1322         font-size: 13px;
1323         line-height: normal;
1324         border: 1px solid #ccc;
1325         border-bottom-color: #bbb;
1326         -webkit-border-radius: 4px;
1327         -moz-border-radius: 4px;
1328         border-radius: 4px;
1329         -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1330         -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1331         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1332 }
1333
1334 .btn:hover,
1335 .cbi-button:hover {
1336         color: #333;
1337         text-decoration: none;
1338 }
1339
1340 .btn:focus,
1341 .cbi-button:focus {
1342         outline: 1px dotted #666;
1343 }
1344
1345 .btn.primary,
1346 .cbi-page-actions .cbi-button-apply,
1347 .cbi-page-actions .cbi-button-save,
1348 .cbi-page-actions .cbi-button-reset {
1349         color: #ffffff;
1350         padding: 5px 14px 6px;
1351         background-color: #0064cd;
1352         background-repeat: repeat-x;
1353         background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
1354         background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
1355         background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
1356         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
1357         background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
1358         background-image: -o-linear-gradient(top, #049cdb, #0064cd);
1359         background-image: linear-gradient(to bottom, #049cdb, #0064cd);
1360         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
1361         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1362         border-color: #0064cd #0064cd #003f81;
1363         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1364 }
1365
1366 .cbi-input-invalid,
1367 .cbi-value-error input {
1368         color: #FF0000;
1369         border-color: #FF0000;
1370 }
1371
1372 .cbi-button-up,
1373 .cbi-input-up {
1374         background-position: center center;
1375         background-image: url('../resources/cbi/up.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1376         background-image: url('../resources/cbi/up.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1377         background-image: url('../resources/cbi/up.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1378         background-image: url('../resources/cbi/up.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1379         background-image: url('../resources/cbi/up.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1380         background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1381 }
1382
1383 .cbi-button-down,
1384 .cbi-input-down {
1385         background-position: center center;
1386         background-image: url('../resources/cbi/down.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1387         background-image: url('../resources/cbi/down.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1388         background-image: url('../resources/cbi/down.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1389         background-image: url('../resources/cbi/down.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1390         background-image: url('../resources/cbi/down.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1391         background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1392 }
1393
1394 .cbi-button-find,
1395 .cbi-input-find {
1396         background-position: 6px center, left top;
1397         padding-left: 28px;
1398         background-image: url('../resources/cbi/find.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1399         background-image: url('../resources/cbi/find.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1400         background-image: url('../resources/cbi/find.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1401         background-image: url('../resources/cbi/find.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1402         background-image: url('../resources/cbi/find.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1403         background-image: url('../resources/cbi/find.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1404 }
1405
1406 .cbi-button-add,
1407 .cbi-input-add {
1408         background-position: 6px center, left top;
1409         padding-left: 28px;
1410         background-image: url('../resources/cbi/add.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1411         background-image: url('../resources/cbi/add.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1412         background-image: url('../resources/cbi/add.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1413         background-image: url('../resources/cbi/add.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1414         background-image: url('../resources/cbi/add.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1415         background-image: url('../resources/cbi/add.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1416 }
1417
1418 .cbi-button-apply,
1419 .cbi-input-apply {
1420         background-position: 6px center, left top;
1421         padding-left: 28px;
1422         background-image: url('../resources/cbi/apply.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1423         background-image: url('../resources/cbi/apply.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1424         background-image: url('../resources/cbi/apply.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1425         background-image: url('../resources/cbi/apply.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1426         background-image: url('../resources/cbi/apply.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1427         background-image: url('../resources/cbi/apply.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1428 }
1429
1430 .cbi-button-reset,
1431 .cbi-input-reset {
1432         background-position: 6px center, left top;
1433         padding-left: 28px;
1434         background-image: url('../resources/cbi/reset.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1435         background-image: url('../resources/cbi/reset.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1436         background-image: url('../resources/cbi/reset.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1437         background-image: url('../resources/cbi/reset.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1438         background-image: url('../resources/cbi/reset.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1439         background-image: url('../resources/cbi/reset.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1440 }
1441
1442 .cbi-button-edit,
1443 .cbi-input-edit {
1444         background-position: 6px center, left top;
1445         padding-left: 28px;
1446         background-image: url('../resources/cbi/edit.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1447         background-image: url('../resources/cbi/edit.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1448         background-image: url('../resources/cbi/edit.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1449         background-image: url('../resources/cbi/edit.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1450         background-image: url('../resources/cbi/edit.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1451         background-image: url('../resources/cbi/edit.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1452 }
1453
1454 .cbi-button-remove,
1455 .cbi-input-remove {
1456         background-position: 6px center, left top;
1457         padding-left: 28px;
1458         background-image: url('../resources/cbi/remove.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1459         background-image: url('../resources/cbi/remove.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1460         background-image: url('../resources/cbi/remove.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1461         background-image: url('../resources/cbi/remove.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1462         background-image: url('../resources/cbi/remove.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1463         background-image: url('../resources/cbi/remove.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1464 }
1465
1466 .cbi-button-reload,
1467 .cbi-input-reload {
1468         background-position: 6px center, left top;
1469         padding-left: 28px;
1470         background-image: url('../resources/cbi/reload.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1471         background-image: url('../resources/cbi/reload.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1472         background-image: url('../resources/cbi/reload.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1473         background-image: url('../resources/cbi/reload.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1474         background-image: url('../resources/cbi/reload.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1475         background-image: url('../resources/cbi/reload.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1476 }
1477
1478 .cbi-button-link,
1479 .cbi-input-link {
1480         background-position: 6px center, left top;
1481         padding-left: 28px;
1482         background-image: url('../resources/cbi/link.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1483         background-image: url('../resources/cbi/link.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1484         background-image: url('../resources/cbi/link.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1485         background-image: url('../resources/cbi/link.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1486         background-image: url('../resources/cbi/link.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1487         background-image: url('../resources/cbi/link.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1488 }
1489
1490 .cbi-button-download,
1491 .cbi-input-download {
1492         background-position: 6px center, left top;
1493         padding-left: 28px;
1494         background-image: url('../resources/cbi/download.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1495         background-image: url('../resources/cbi/download.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1496         background-image: url('../resources/cbi/download.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1497         background-image: url('../resources/cbi/download.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1498         background-image: url('../resources/cbi/download.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1499         background-image: url('../resources/cbi/download.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1500 }
1501
1502 .btn.active, .btn:active {
1503         -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1504         -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1505         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1506 }
1507
1508 .btn.disabled {
1509         cursor: default;
1510         background-image: none;
1511         filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1512         filter: alpha(opacity=65);
1513         -khtml-opacity: 0.65;
1514         -moz-opacity: 0.65;
1515         opacity: 0.65;
1516         -webkit-box-shadow: none;
1517         -moz-box-shadow: none;
1518         box-shadow: none;
1519 }
1520
1521 .btn[disabled] {
1522         cursor: default;
1523         background-image: none;
1524         filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1525         filter: alpha(opacity=65);
1526         -khtml-opacity: 0.65;
1527         -moz-opacity: 0.65;
1528         opacity: 0.65;
1529         -webkit-box-shadow: none;
1530         -moz-box-shadow: none;
1531         box-shadow: none;
1532 }
1533
1534 .btn.large {
1535         font-size: 15px;
1536         line-height: normal;
1537         padding: 9px 14px 9px;
1538         -webkit-border-radius: 6px;
1539         -moz-border-radius: 6px;
1540         border-radius: 6px;
1541 }
1542
1543 .btn.small {
1544         padding: 7px 9px 7px;
1545         font-size: 11px;
1546 }
1547
1548 /* Button icons for specific pages */
1549 .Startup .cbi-section-table input.cbi-input-apply,
1550 .Startup .cbi-section-table input.cbi-button-apply {
1551           background-image: url("../resources/cbi/apply.gif");
1552           background-position: 7px 4px;
1553           padding: 3px 9px 3px 27px;
1554 }
1555
1556 .Processes .cbi-section-table input.cbi-input-reload,
1557 .Startup .cbi-section-table input.cbi-input-reload {
1558           background-image: url("../resources/cbi/reload.gif");
1559           background-position: 7px 4px;
1560           padding: 3px 9px 3px 27px;
1561 }
1562
1563 .Processes .cbi-section-table input.cbi-input-remove,
1564 .Processes .cbi-section-table div.cbi-section-remove input,
1565 .Startup .cbi-section-table input.cbi-input-remove,
1566 .Startup .cbi-section-table div.cbi-section-remove input  {
1567           background-image: url("../resources/cbi/remove.gif");
1568           background-position: 7px 4px;
1569           padding: 3px 9px 3px 27px;
1570 }
1571
1572 .Processes .cbi-section-table input.cbi-input-reset,
1573 .Processes .cbi-section-table input.cbi-button-reset,
1574 .Startup .cbi-section-table input.cbi-input-reset,
1575 .Startup .cbi-section-table input.cbi-button-reset  {
1576           background-image: url("../resources/cbi/reset.gif");
1577           background-position: 7px 4px;
1578           padding: 3px 9px 3px 27px;
1579 }
1580
1581 .Startup .cbi-section-table input.cbi-input-save,
1582 .Startup .cbi-section-table input.cbi-button-save {
1583           background-image: url("../resources/cbi/save.gif");
1584           background-position: 7px 4px;
1585           padding: 3px 9px 3px 27px;
1586 }
1587
1588 :root .alert-message, :root .btn {
1589         border-radius: 0 0;
1590 }
1591
1592 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1593         padding: 0;
1594         border: 0;
1595 }
1596
1597 .close {
1598         float: right;
1599         color: #000000;
1600         font-size: 20px;
1601         font-weight: bold;
1602         line-height: 13.5px;
1603         text-shadow: 0 1px 0 #ffffff;
1604         filter: alpha(opacity=25);
1605         -khtml-opacity: 0.25;
1606         -moz-opacity: 0.25;
1607         opacity: 0.25;
1608 }
1609
1610 .close:hover {
1611         color: #000000;
1612         text-decoration: none;
1613         filter: alpha(opacity=40);
1614         -khtml-opacity: 0.4;
1615         -moz-opacity: 0.4;
1616         opacity: 0.4;
1617 }
1618
1619 .alert-message, .errorbox {
1620         position: relative;
1621         padding: 7px 15px;
1622         margin-bottom: 18px;
1623         color: #404040;
1624         background-color: #eedc94;
1625         background-repeat: repeat-x;
1626         background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
1627         background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
1628         background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
1629         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
1630         background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
1631         background-image: -o-linear-gradient(top, #fceec1, #eedc94);
1632         background-image: linear-gradient(to bottom, #fceec1, #eedc94);
1633         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
1634         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1635         border-color: #eedc94 #eedc94 #e4c652;
1636         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1637         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1638         border-width: 1px;
1639         border-style: solid;
1640         -webkit-border-radius: 4px;
1641         -moz-border-radius: 4px;
1642         border-radius: 4px;
1643         -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1644         -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1645         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1646 }
1647
1648 .alert-message .close {
1649         margin-top: 1px;
1650         *margin-top: 0;
1651 }
1652
1653 .alert-message a {
1654         font-weight: bold;
1655         color: #404040;
1656 }
1657
1658 .alert-message.danger p a,
1659 .alert-message.error p a,
1660 .alert-message.success p a,
1661 .alert-message.info p a {
1662         color: #ffffff;
1663 }
1664
1665 .alert-message h5 {
1666         line-height: 18px;
1667 }
1668
1669 .alert-message p {
1670         margin-bottom: 0;
1671 }
1672
1673 .alert-message div {
1674         margin-top: 5px;
1675         margin-bottom: 2px;
1676         line-height: 28px;
1677 }
1678
1679 .alert-message .btn {
1680         -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1681         -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1682         box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1683 }
1684
1685 .label {
1686         padding: 1px 3px 2px;
1687         font-size: 9.75px;
1688         font-weight: bold;
1689         color: #ffffff !important;
1690         text-transform: uppercase;
1691         white-space: nowrap;
1692         background-color: #bfbfbf;
1693         -webkit-border-radius: 3px;
1694         -moz-border-radius: 3px;
1695         border-radius: 3px;
1696         text-shadow: none;
1697 }
1698
1699 a.label:link,
1700 a.label:visited {
1701         color: #ffffff;
1702 }
1703
1704 a.label:hover {
1705         text-decoration: none;
1706 }
1707
1708 .label.important {
1709         background-color: #c43c35;
1710 }
1711
1712 .label.warning {
1713         background-color: #f89406;
1714 }
1715
1716 .label.success {
1717         background-color: #46a546;
1718 }
1719
1720 .label.notice {
1721         background-color: #62cffc;
1722 }
1723
1724 /* LuCI specific items */
1725 .hidden { display: none }
1726
1727 #memtotal > div,
1728 #memfree > div,
1729 #memcache > div,
1730 #membuff > div,
1731 #conns > div  {
1732           border: 1px solid #CCCCCC;
1733           border-radius: 3px 3px 3px 3px;
1734           color: #808080;
1735           display: inline-block;
1736           font-size: 13px;
1737           line-height: 18px;
1738 }
1739
1740 #xhr_poll_status {
1741           cursor: pointer;
1742 }
1743
1744 form.inline { display: inline }
1745
1746 header .pull-right { padding-top: 8px; }
1747
1748 #modemenu li:last-child span.divider { display: none }
1749
1750 #syslog {  width: 100%; }
1751
1752 .cbi-section-table tbody tr:nth-child(odd) td, .cbi-section-table tbody tr:nth-child(odd) th {
1753         background-color: #f9f9f9;
1754 }
1755
1756 .cbi-section-table tbody tr:hover td, .cbi-section-table tbody tr:hover th  {
1757         background-color: #f5f5f5;
1758 }
1759
1760 .cbi-section-table tr.cbi-section-table-descr th {
1761         font-weight: normal;
1762 }
1763
1764 .left { text-align: left !important; }
1765
1766 .right { text-align: right !important; }
1767
1768 .cbi-value-field { line-height: 1.5em; }
1769
1770 .cbi-value-field input[type=checkbox],
1771 .cbi-value-field input[type=radio] {
1772         margin-top: 8px;
1773         margin-right: 6px;
1774 }
1775
1776 table table td,
1777 .cbi-value-field table td {
1778         border: none;
1779 }
1780
1781 table.cbi-section-table input,
1782 table.cbi-section-table textarea,
1783 table.cbi-section-table select {
1784         width: auto;
1785 }
1786
1787 table.cbi-section-table td.cbi-section-table-cell {
1788         white-space: nowrap;
1789         text-align: right;
1790 }
1791
1792 table.cbi-section-table td.cbi-section-table-cell select {
1793         width: inherit;
1794 }
1795
1796 table.valign-middle td {
1797         vertical-align: middle;
1798 }
1799
1800 .cbi-value-description { display: inline; }
1801
1802 .cbi-value-description img { vertical-align: middle; }
1803
1804 .cbi-section-error {
1805         border: 1px solid #FF0000;
1806         border-radius: 3px;
1807         background-color: #FCE6E6;
1808         padding: 5px;
1809 }
1810
1811 .cbi-section-error ul { margin: 0 0 0 20px; }
1812
1813 .cbi-section-error ul li {
1814         color: #FF0000;
1815         font-weight: bold;
1816 }
1817
1818 .ifacebox {
1819         background-color: #FFFFFF;
1820         border: 1px solid #CCCCCC;
1821         margin: 0 10px;
1822         text-align: center;
1823         white-space: nowrap;
1824         background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1825         background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1826         background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1827         background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1828         background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1829         background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1830         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1831         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1832         -webkit-border-radius: 4px;
1833         -moz-border-radius: 4px;
1834         border-radius: 4px;
1835         -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1836         -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1837         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1838 }
1839
1840 .ifacebox .ifacebox-head {
1841         border-bottom: 1px solid #CCCCCC;
1842         padding: 2px;
1843 }
1844
1845 .ifacebox .ifacebox-body {
1846         padding: 6px;
1847 }
1848
1849 .ifacebadge {
1850         display: inline-block;
1851         white-space: nowrap;
1852         background-color: #FFFFFF;
1853         border: 1px solid #CCCCCC;
1854         padding: 2px;
1855         margin-left: 2px;
1856         background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1857         background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1858         background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1859         background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1860         background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1861         background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1862         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1863         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1864         -webkit-border-radius: 4px;
1865         -moz-border-radius: 4px;
1866         border-radius: 4px;
1867         -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1868         -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1869         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1870         cursor: default;
1871 }
1872
1873 .ifacebadge img {
1874         width: 16px;
1875         height: 16px;
1876         vertical-align: middle;
1877 }
1878
1879 .ifacebadge-active {
1880         border-color: #000000;
1881         font-weight: bold;
1882 }
1883
1884 .zonebadge {
1885         padding: 2px;
1886         border-radius: 4px;
1887         display: inline-block;
1888         white-space: nowrap;
1889         color: #666666;
1890         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1891         cursor: pointer;
1892 }
1893
1894 .zonebadge > em,
1895 .zonebadge > strong {
1896         margin: 5px;
1897         display: inline-block;
1898 }
1899
1900 .zonebadge input {
1901         width: 6em;
1902 }
1903
1904 .zonebadge-empty {
1905         border: 1px dashed #AAAAAA;
1906         color: #AAAAAA;
1907         font-style: italic;
1908         font-size: smaller;
1909 }
1910
1911 div.cbi-value var,
1912 td.cbi-value-field var {
1913         font-style: italic;
1914         color: #0069D6;
1915 }
1916
1917 .uci-change-list {
1918         font-family: monospace;
1919 }
1920
1921 .uci-change-list ins,
1922 .uci-change-legend-label ins {
1923         text-decoration: none;
1924         border: 1px solid #00FF00;
1925         background-color: #CCFFCC;
1926         display: block;
1927         padding: 2px;
1928 }
1929
1930 .uci-change-list del,
1931 .uci-change-legend-label del {
1932         text-decoration: none;
1933         border: 1px solid #FF0000;
1934         background-color: #FFCCCC;
1935         display: block;
1936         font-style: normal;
1937         padding: 2px;
1938 }
1939
1940 .uci-change-list var,
1941 .uci-change-legend-label var {
1942         text-decoration: none;
1943         border: 1px solid #CCCCCC;
1944         background-color: #EEEEEE;
1945         display: block;
1946         font-style: normal;
1947         padding: 2px;
1948 }
1949
1950 .uci-change-list var ins,
1951 .uci-change-list var del {
1952         /*display: inline;*/
1953         border: none;
1954         white-space: pre;
1955         font-style: normal;
1956         padding: 0px;
1957 }
1958
1959 .uci-change-legend {
1960         padding: 5px;
1961 }
1962
1963 .uci-change-legend-label {
1964         width: 150px;
1965         float: left;
1966 }
1967
1968 .uci-change-legend-label > ins,
1969 .uci-change-legend-label > del,
1970 .uci-change-legend-label > var {
1971         float: left;
1972         margin-right: 4px;
1973         width: 10px;
1974         height: 10px;
1975         display: block;
1976 }
1977
1978 .uci-change-legend-label var ins,
1979 .uci-change-legend-label var del {
1980         line-height: 6px;
1981         border: none;
1982 }