Merge pull request #770 from arturdm/patch-1
[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 }
504
505 input[type=checkbox], input[type=radio] {
506         width: auto;
507         height: auto;
508         padding: 0;
509         margin: 3px 0;
510         *margin-top: 0;
511         /* IE6-7 */
512
513         line-height: normal;
514         border: none;
515 }
516
517 input[type=file] {
518         background-color: #ffffff;
519         padding: initial;
520         border: initial;
521         line-height: initial;
522         -webkit-box-shadow: none;
523         -moz-box-shadow: none;
524         box-shadow: none;
525         width: auto !important;
526 }
527
528 input[type=button], input[type=reset], input[type=submit] {
529         width: auto;
530         height: auto;
531 }
532
533 select, input[type=file] {
534         *height: auto;
535         *margin-top: 4px;
536         /* For IE7, add top margin to align select with labels */
537 }
538
539 select[multiple] {
540         height: inherit;
541         background-color: #ffffff;
542 }
543
544 textarea {
545         height: auto;
546 }
547
548 .uneditable-input {
549         background-color: #ffffff;
550         display: block;
551         border-color: #eee;
552         -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
553         -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
554         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
555         cursor: not-allowed;
556 }
557
558 ::-moz-placeholder {
559         color: #bfbfbf;
560 }
561
562 ::-webkit-input-placeholder {
563         color: #bfbfbf;
564 }
565
566 input, textarea {
567         -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
568         -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
569         -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
570         -o-transition: border linear 0.2s, box-shadow linear 0.2s;
571         transition: border linear 0.2s, box-shadow linear 0.2s;
572         -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
573         -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
574         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
575 }
576
577 input:focus, textarea:focus {
578         outline: 0;
579         border-color: rgba(82, 168, 236, 0.8);
580         -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
581         -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
582         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
583 }
584
585 input[type=file]:focus, input[type=checkbox]:focus, select:focus {
586         -webkit-box-shadow: none;
587         -moz-box-shadow: none;
588         box-shadow: none;
589         outline: 1px dotted #666;
590 }
591
592 form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline {
593         color: #b94a48;
594 }
595
596 form .clearfix.error input, form .clearfix.error textarea {
597         color: #b94a48;
598         border-color: #ee5f5b;
599 }
600
601 form .clearfix.error input:focus, form .clearfix.error textarea:focus {
602         border-color: #e9322d;
603         -webkit-box-shadow: 0 0 6px #f8b9b7;
604         -moz-box-shadow: 0 0 6px #f8b9b7;
605         box-shadow: 0 0 6px #f8b9b7;
606 }
607
608 form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on {
609         color: #b94a48;
610         background-color: #fce6e6;
611         border-color: #b94a48;
612 }
613
614 form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline {
615         color: #c09853;
616 }
617
618 form .clearfix.warning input, form .clearfix.warning textarea {
619         color: #c09853;
620         border-color: #ccae64;
621 }
622
623 form .clearfix.warning input:focus, form .clearfix.warning textarea:focus {
624         border-color: #be9a3f;
625         -webkit-box-shadow: 0 0 6px #e5d6b1;
626         -moz-box-shadow: 0 0 6px #e5d6b1;
627         box-shadow: 0 0 6px #e5d6b1;
628 }
629
630 form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on {
631         color: #c09853;
632         background-color: #d2b877;
633         border-color: #c09853;
634 }
635
636 form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline {
637         color: #468847;
638 }
639
640 form .clearfix.success input, form .clearfix.success textarea {
641         color: #468847;
642         border-color: #57a957;
643 }
644
645 form .clearfix.success input:focus, form .clearfix.success textarea:focus {
646         border-color: #458845;
647         -webkit-box-shadow: 0 0 6px #9acc9a;
648         -moz-box-shadow: 0 0 6px #9acc9a;
649         box-shadow: 0 0 6px #9acc9a;
650 }
651
652 form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on {
653         color: #468847;
654         background-color: #bcddbc;
655         border-color: #468847;
656 }
657
658 input[disabled],
659 select[disabled],
660 textarea[disabled],
661 input[readonly],
662 select[readonly],
663 textarea[readonly] {
664         background-color: #f5f5f5;
665         border-color: #ddd;
666 }
667
668 .actions,
669 .cbi-page-actions {
670         background: #f5f5f5;
671         margin-bottom: 18px;
672         padding: 17px 20px 18px 150px;
673         border-top: 1px solid #ddd;
674         -webkit-border-radius: 0 0 3px 3px;
675         -moz-border-radius: 0 0 3px 3px;
676         border-radius: 0 0 3px 3px;
677         text-align: right;
678 }
679
680 .actions .secondary-action,
681 .cbi-page-actions .secondary-action{
682         float: right;
683 }
684
685 .actions .secondary-action a,
686 .cbi-page-actions .secondary-action a {
687         line-height: 30px;
688 }
689
690 .actions .secondary-action a:hover,
691 .cbi-page-actions .secondary-action a:hover {
692         text-decoration: underline;
693 }
694
695 .help-inline, .help-block {
696         font-size: 13px;
697         line-height: 18px;
698         color: #bfbfbf;
699 }
700
701 .help-inline {
702         padding-left: 5px;
703         *position: relative;
704         /* IE6-7 */
705
706         *top: -5px;
707         /* IE6-7 */
708
709 }
710
711 .help-block {
712         display: block;
713         max-width: 600px;
714 }
715
716 /*
717  * Tables.less
718  * Tables for, you guessed it, tabular data
719  * ---------------------------------------- */
720 table {
721         width: 100%;
722         margin-bottom: 18px;
723         padding: 0;
724         font-size: 13px;
725         border-collapse: collapse;
726 }
727
728 table th, table td {
729         padding: 10px 10px 9px;
730         line-height: 18px;
731         text-align: left;
732 }
733
734 table th {
735         padding-top: 9px;
736         font-weight: bold;
737         vertical-align: middle;
738 }
739
740 table td {
741         vertical-align: top;
742         border-top: 1px solid #ddd;
743 }
744
745 table tbody th {
746         border-top: 1px solid #ddd;
747         vertical-align: top;
748 }
749
750 /* Patterns.less
751  * Repeatable UI elements outside the base styles provided from the scaffolding
752  * ---------------------------------------------------------------------------- */
753 header {
754         height: 40px;
755         position: fixed;
756         top: 0;
757         left: 0;
758         right: 0;
759         z-index: 10000;
760         overflow: visible;
761         color: #BFBFBF;
762 }
763
764 header a {
765         color: #bfbfbf;
766         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
767 }
768
769 header h3 a:hover, header .brand:hover, header ul .active > a {
770         background-color: #333;
771         background-color: rgba(255, 255, 255, 0.05);
772         color: #ffffff;
773         text-decoration: none;
774 }
775
776 header h3 {
777         position: relative;
778 }
779
780 header h3 a, header .brand {
781         float: left;
782         display: block;
783         padding: 8px 20px 12px;
784         margin-left: -20px;
785         color: #ffffff;
786         font-size: 20px;
787         font-weight: 200;
788         line-height: 1;
789 }
790
791 header p {
792         margin: 0;
793         line-height: 40px;
794 }
795
796 header .fill {
797         background-color: #222;
798         background-color: #222222;
799         background-repeat: repeat-x;
800         background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
801         background-image: -moz-linear-gradient(top, #333333, #222222);
802         background-image: -ms-linear-gradient(top, #333333, #222222);
803         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
804         background-image: -webkit-linear-gradient(top, #333333, #222222);
805         background-image: -o-linear-gradient(top, #333333, #222222);
806         background-image: linear-gradient(top, #333333, #222222);
807         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
808         -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
809         -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
810         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
811         padding: 0 5px;
812 }
813
814 header div > ul, .nav {
815         display: block;
816         float: left;
817         margin: 0 10px 0 0;
818         position: relative;
819         left: 0;
820 }
821
822 header div > ul > li, .nav > li {
823         display: block;
824         float: left;
825 }
826
827 header div > ul a, .nav a {
828         display: block;
829         float: none;
830         padding: 10px 10px 11px;
831         line-height: 19px;
832         text-decoration: none;
833 }
834
835 header div > ul a:hover, .nav a:hover {
836         color: #ffffff;
837         text-decoration: none;
838 }
839
840 header div > ul .active > a, .nav .active > a {
841         background-color: #222;
842         background-color: rgba(0, 0, 0, 0.5);
843 }
844
845 header div > ul.secondary-nav, .nav.secondary-nav {
846         float: right;
847         margin-left: 10px;
848         margin-right: 0;
849 }
850
851 header div > ul.secondary-nav .menu-dropdown,
852 .nav.secondary-nav .menu-dropdown,
853 header div > ul.secondary-nav .dropdown-menu,
854 .nav.secondary-nav .dropdown-menu {
855         right: 0;
856         border: 0;
857 }
858
859 header div > ul a.menu:hover,
860 .nav a.menu:hover,
861 header div > ul li.open .menu,
862 .nav li.open .menu,
863 header div > ul .dropdown-toggle:hover,
864 .nav .dropdown-toggle:hover,
865 header div > ul .dropdown.open .dropdown-toggle,
866 .nav .dropdown.open .dropdown-toggle {
867         background: #444;
868         background: rgba(255, 255, 255, 0.05);
869 }
870
871 header div > ul .menu-dropdown,
872 .nav .menu-dropdown,
873 header div > ul .dropdown-menu,
874 .nav .dropdown-menu {
875         background-color: #333;
876 }
877
878 header div > ul .menu-dropdown a.menu,
879 .nav .menu-dropdown a.menu,
880 header div > ul .dropdown-menu a.menu,
881 .nav .dropdown-menu a.menu,
882 header div > ul .menu-dropdown .dropdown-toggle,
883 .nav .menu-dropdown .dropdown-toggle,
884 header div > ul .dropdown-menu .dropdown-toggle,
885 .nav .dropdown-menu .dropdown-toggle {
886         color: #ffffff;
887 }
888
889 header div > ul .menu-dropdown a.menu.open,
890 .nav .menu-dropdown a.menu.open,
891 header div > ul .dropdown-menu a.menu.open,
892 .nav .dropdown-menu a.menu.open,
893 header div > ul .menu-dropdown .dropdown-toggle.open,
894 .nav .menu-dropdown .dropdown-toggle.open,
895 header div > ul .dropdown-menu .dropdown-toggle.open,
896 .nav .dropdown-menu .dropdown-toggle.open {
897         background: #444;
898         background: rgba(255, 255, 255, 0.05);
899 }
900
901 header div > ul .menu-dropdown li a,
902 .nav .menu-dropdown li a,
903 header div > ul .dropdown-menu li a,
904 .nav .dropdown-menu li a {
905         color: #999;
906         text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
907 }
908
909 header div > ul .menu-dropdown li a:hover,
910 .nav .menu-dropdown li a:hover,
911 header div > ul .dropdown-menu li a:hover,
912 .nav .dropdown-menu li a:hover {
913         background-color: #191919;
914         background-repeat: repeat-x;
915         background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
916         background-image: -moz-linear-gradient(top, #292929, #191919);
917         background-image: -ms-linear-gradient(top, #292929, #191919);
918         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));
919         background-image: -webkit-linear-gradient(top, #292929, #191919);
920         background-image: -o-linear-gradient(top, #292929, #191919);
921         background-image: linear-gradient(top, #292929, #191919);
922         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
923         color: #ffffff;
924 }
925
926 header div > ul .menu-dropdown .active a,
927 .nav .menu-dropdown .active a,
928 header div > ul .dropdown-menu .active a,
929 .nav .dropdown-menu .active a {
930         color: #ffffff;
931 }
932
933 header div > ul .menu-dropdown .divider,
934 .nav .menu-dropdown .divider,
935 header div > ul .dropdown-menu .divider,
936 .nav .dropdown-menu .divider {
937         background-color: #222;
938         border-color: #444;
939 }
940
941 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
942         padding: 4px 15px;
943 }
944
945 li.menu, .dropdown {
946         position: relative;
947 }
948
949 a.menu:after, .dropdown-toggle:after {
950         width: 0;
951         height: 0;
952         display: inline-block;
953         content: "&darr;";
954         text-indent: -99999px;
955         vertical-align: top;
956         margin-top: 8px;
957         margin-left: 4px;
958         border-left: 4px solid transparent;
959         border-right: 4px solid transparent;
960         border-top: 4px solid #ffffff;
961         filter: alpha(opacity=50);
962         -khtml-opacity: 0.5;
963         -moz-opacity: 0.5;
964         opacity: 0.5;
965 }
966
967 .menu-dropdown, .dropdown-menu {
968         background-color: #ffffff;
969         float: left;
970         position: absolute;
971         top: 40px;
972         left: -9999px;
973         z-index: 900;
974         min-width: 160px;
975         max-width: 220px;
976         _width: 160px;
977         margin-left: 0;
978         margin-right: 0;
979         padding: 6px 0;
980         zoom: 1;
981         border-color: #999;
982         border-color: rgba(0, 0, 0, 0.2);
983         border-style: solid;
984         border-width: 0 1px 1px;
985         -webkit-border-radius: 0 0 6px 6px;
986         -moz-border-radius: 0 0 6px 6px;
987         border-radius: 0 0 6px 6px;
988         -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
989         -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
990         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
991         -webkit-background-clip: padding-box;
992         -moz-background-clip: padding-box;
993         background-clip: padding-box;
994 }
995
996 .menu-dropdown li, .dropdown-menu li {
997         float: none;
998         display: block;
999         background-color: none;
1000 }
1001
1002 .menu-dropdown .divider, .dropdown-menu .divider {
1003         height: 1px;
1004         margin: 5px 0;
1005         overflow: hidden;
1006         background-color: #eee;
1007         border-bottom: 1px solid #ffffff;
1008 }
1009
1010 header .dropdown-menu a, .dropdown-menu a {
1011         display: block;
1012         padding: 4px 15px;
1013         clear: both;
1014         font-weight: normal;
1015         line-height: 18px;
1016         color: #808080;
1017         text-shadow: 0 1px 0 #ffffff;
1018 }
1019
1020 header .dropdown-menu a:hover,
1021 .dropdown-menu a:hover,
1022 header .dropdown-menu a.hover,
1023 .dropdown-menu a.hover {
1024         background-color: #dddddd;
1025         background-repeat: repeat-x;
1026         background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
1027         background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
1028         background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
1029         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
1030         background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
1031         background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
1032         background-image: linear-gradient(top, #eeeeee, #dddddd);
1033         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
1034         color: #404040;
1035         text-decoration: none;
1036         -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
1037         -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
1038         box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
1039 }
1040
1041 .open .menu,
1042 .dropdown.open .menu,
1043 .open .dropdown-toggle,
1044 .dropdown.open .dropdown-toggle {
1045         color: #ffffff;
1046         background: #ccc;
1047         background: rgba(0, 0, 0, 0.3);
1048 }
1049
1050 .open .menu-dropdown,
1051 .dropdown.open .menu-dropdown,
1052 .open .dropdown-menu,
1053 .dropdown.open .dropdown-menu {
1054         left: 0;
1055 }
1056
1057 .dropdown:hover ul.dropdown-menu {
1058         left: 0;
1059 }
1060
1061 .dropdown-menu .dropdown-menu {
1062           position: absolute;
1063           left: 159px;
1064 }
1065
1066 .dropdown-menu li {
1067           position: relative;
1068 }
1069
1070 .tabs, .cbi-tabmenu {
1071         margin: 0 0 18px;
1072         padding: 0;
1073         list-style: none;
1074         zoom: 1;
1075 }
1076
1077 .tabs:before,
1078 .cbi-tabmenu:before,
1079 .tabs:after,
1080 .cbi-tabmenu:after {
1081         display: table;
1082         content: "";
1083         zoom: 1;
1084 }
1085
1086 .tabs:after, .cbi-tabmenu:after {
1087         clear: both;
1088 }
1089
1090 .tabs > li, .cbi-tabmenu > li {
1091         float: left;
1092 }
1093
1094 .tabs > li > a, .cbi-tabmenu > li > a {
1095         display: block;
1096 }
1097
1098 .tabs,
1099 .cbi-tabmenu {
1100         border-color: #ddd;
1101         border-style: solid;
1102         border-width: 0 0 1px;
1103 }
1104
1105 .tabs > li,
1106 .cbi-tabmenu > li {
1107         position: relative;
1108         margin-bottom: -1px;
1109 }
1110
1111 .cbi-tabmenu.map {
1112         margin: 0;
1113 }
1114
1115 .cbi-tabmenu.map > li {
1116         font-size: 16.5px;
1117         font-weight: bold;
1118 }
1119
1120 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1121         display: none;
1122 }
1123
1124 .tabs > li > a,
1125 .cbi-tabmenu > li > a {
1126         padding: 0 15px;
1127         margin-right: 2px;
1128         line-height: 34px;
1129         border: 1px solid transparent;
1130         -webkit-border-radius: 4px 4px 0 0;
1131         -moz-border-radius: 4px 4px 0 0;
1132         border-radius: 4px 4px 0 0;
1133 }
1134
1135 .tabs > li > a:hover,
1136 .cbi-tabmenu > li > a:hover {
1137         text-decoration: none;
1138         background-color: #eee;
1139         border-color: #eee #eee #ddd;
1140 }
1141
1142 .tabs .active > a, .tabs .active > a:hover,
1143 .cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover,
1144 .cbi-tab > a:link, .cbi-tab > a:hover {
1145         color: #808080;
1146         background-color: #ffffff;
1147         border: 1px solid #ddd;
1148         border-bottom-color: transparent;
1149         cursor: default;
1150 }
1151
1152 .tabs .menu-dropdown, .tabs .dropdown-menu,
1153 .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu {
1154         top: 35px;
1155         border-width: 1px;
1156         -webkit-border-radius: 0 6px 6px 6px;
1157         -moz-border-radius: 0 6px 6px 6px;
1158         border-radius: 0 6px 6px 6px;
1159 }
1160
1161 .tabs a.menu:after, .tabs .dropdown-toggle:after,
1162 .cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after {
1163         border-top-color: #999;
1164         margin-top: 15px;
1165         margin-left: 5px;
1166 }
1167
1168 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle,
1169 .cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle {
1170         border-color: #999;
1171 }
1172
1173 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after,
1174 .cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after {
1175         border-top-color: #555;
1176 }
1177
1178 .tab-content > .tab-pane,
1179 .tab-content > div {
1180         display: none;
1181 }
1182
1183 .tab-content > .active {
1184         display: block;
1185 }
1186
1187 .breadcrumb {
1188         padding: 7px 14px;
1189         margin: 0 0 18px;
1190         background-color: #f5f5f5;
1191         background-repeat: repeat-x;
1192         background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
1193         background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
1194         background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
1195         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
1196         background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
1197         background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
1198         background-image: linear-gradient(top, #ffffff, #f5f5f5);
1199         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
1200         border: 1px solid #ddd;
1201         -webkit-border-radius: 3px;
1202         -moz-border-radius: 3px;
1203         border-radius: 3px;
1204         -webkit-box-shadow: inset 0 1px 0 #ffffff;
1205         -moz-box-shadow: inset 0 1px 0 #ffffff;
1206         box-shadow: inset 0 1px 0 #ffffff;
1207 }
1208
1209 .breadcrumb li {
1210         display: inline;
1211         text-shadow: 0 1px 0 #ffffff;
1212 }
1213
1214 .breadcrumb .divider {
1215         padding: 0 5px;
1216         color: #bfbfbf;
1217 }
1218
1219 .breadcrumb .active a {
1220         color: #404040;
1221 }
1222
1223 footer {
1224         margin-top: 17px;
1225         padding-top: 17px;
1226         border-top: 1px solid #eee;
1227 }
1228
1229 .btn.danger,
1230 .alert-message.danger,
1231 .btn.danger:hover,
1232 .alert-message.danger:hover,
1233 .btn.error,
1234 .alert-message.error,
1235 .btn.error:hover,
1236 .alert-message.error:hover,
1237 .btn.success,
1238 .alert-message.success,
1239 .btn.success:hover,
1240 .alert-message.success:hover,
1241 .btn.info,
1242 .alert-message.info,
1243 .btn.info:hover,
1244 .alert-message.info:hover {
1245         color: #ffffff;
1246 }
1247
1248 .btn .close, .alert-message .close {
1249         font-family: Arial, sans-serif;
1250         line-height: 18px;
1251 }
1252
1253 .btn.danger,
1254 .alert-message.danger,
1255 .btn.error,
1256 .alert-message.error {
1257         background-color: #c43c35;
1258         background-repeat: repeat-x;
1259         background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
1260         background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
1261         background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
1262         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
1263         background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
1264         background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
1265         background-image: linear-gradient(top, #ee5f5b, #c43c35);
1266         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
1267         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1268         border-color: #c43c35 #c43c35 #882a25;
1269         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1270 }
1271
1272 .btn.success, .alert-message.success {
1273         background-color: #57a957;
1274         background-repeat: repeat-x;
1275         background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
1276         background-image: -moz-linear-gradient(top, #62c462, #57a957);
1277         background-image: -ms-linear-gradient(top, #62c462, #57a957);
1278         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
1279         background-image: -webkit-linear-gradient(top, #62c462, #57a957);
1280         background-image: -o-linear-gradient(top, #62c462, #57a957);
1281         background-image: linear-gradient(top, #62c462, #57a957);
1282         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
1283         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1284         border-color: #57a957 #57a957 #3d773d;
1285         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1286 }
1287
1288 .btn.info, .alert-message.info {
1289         background-color: #339bb9;
1290         background-repeat: repeat-x;
1291         background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
1292         background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
1293         background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
1294         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
1295         background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
1296         background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
1297         background-image: linear-gradient(top, #5bc0de, #339bb9);
1298         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
1299         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1300         border-color: #339bb9 #339bb9 #22697d;
1301         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1302 }
1303
1304 .btn,
1305 .cbi-button {
1306         cursor: pointer;
1307         display: inline-block;
1308         background-color: #e6e6e6;
1309         background-repeat: no-repeat;
1310         background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1311         background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1312         background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1313         background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1314         background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1315         background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1316         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1317         padding: 5px 14px 6px;
1318         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1319         color: #333;
1320         font-size: 13px;
1321         line-height: normal;
1322         border: 1px solid #ccc;
1323         border-bottom-color: #bbb;
1324         -webkit-border-radius: 4px;
1325         -moz-border-radius: 4px;
1326         border-radius: 4px;
1327         -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1328         -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1329         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1330 }
1331
1332 .btn:hover,
1333 .cbi-button:hover {
1334         color: #333;
1335         text-decoration: none;
1336 }
1337
1338 .btn:focus,
1339 .cbi-button:focus {
1340         outline: 1px dotted #666;
1341 }
1342
1343 .btn.primary,
1344 .cbi-page-actions .cbi-button-apply,
1345 .cbi-page-actions .cbi-button-save,
1346 .cbi-page-actions .cbi-button-reset {
1347         color: #ffffff;
1348         padding: 5px 14px 6px;
1349         background-color: #0064cd;
1350         background-repeat: repeat-x;
1351         background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
1352         background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
1353         background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
1354         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
1355         background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
1356         background-image: -o-linear-gradient(top, #049cdb, #0064cd);
1357         background-image: linear-gradient(top, #049cdb, #0064cd);
1358         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
1359         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1360         border-color: #0064cd #0064cd #003f81;
1361         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1362 }
1363
1364 .cbi-input-invalid,
1365 .cbi-value-error input {
1366         color: #FF0000;
1367         border-color: #FF0000;
1368 }
1369
1370 .cbi-button-up,
1371 .cbi-input-up {
1372         background-position: center center;
1373         background-image: url('../resources/cbi/up.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1374         background-image: url('../resources/cbi/up.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1375         background-image: url('../resources/cbi/up.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1376         background-image: url('../resources/cbi/up.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1377         background-image: url('../resources/cbi/up.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1378         background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1379 }
1380
1381 .cbi-button-down,
1382 .cbi-input-down {
1383         background-position: center center;
1384         background-image: url('../resources/cbi/down.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1385         background-image: url('../resources/cbi/down.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1386         background-image: url('../resources/cbi/down.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1387         background-image: url('../resources/cbi/down.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1388         background-image: url('../resources/cbi/down.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1389         background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1390 }
1391
1392 .cbi-button-find,
1393 .cbi-input-find {
1394         background-position: 6px center, left top;
1395         padding-left: 28px;
1396         background-image: url('../resources/cbi/find.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1397         background-image: url('../resources/cbi/find.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1398         background-image: url('../resources/cbi/find.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1399         background-image: url('../resources/cbi/find.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1400         background-image: url('../resources/cbi/find.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1401         background-image: url('../resources/cbi/find.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1402 }
1403
1404 .cbi-button-add,
1405 .cbi-input-add {
1406         background-position: 6px center, left top;
1407         padding-left: 28px;
1408         background-image: url('../resources/cbi/add.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1409         background-image: url('../resources/cbi/add.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1410         background-image: url('../resources/cbi/add.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1411         background-image: url('../resources/cbi/add.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1412         background-image: url('../resources/cbi/add.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1413         background-image: url('../resources/cbi/add.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1414 }
1415
1416 .cbi-button-apply,
1417 .cbi-input-apply {
1418         background-position: 6px center, left top;
1419         padding-left: 28px;
1420         background-image: url('../resources/cbi/apply.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1421         background-image: url('../resources/cbi/apply.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1422         background-image: url('../resources/cbi/apply.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1423         background-image: url('../resources/cbi/apply.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1424         background-image: url('../resources/cbi/apply.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1425         background-image: url('../resources/cbi/apply.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1426 }
1427
1428 .cbi-button-reset,
1429 .cbi-input-reset {
1430         background-position: 6px center, left top;
1431         padding-left: 28px;
1432         background-image: url('../resources/cbi/reset.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1433         background-image: url('../resources/cbi/reset.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1434         background-image: url('../resources/cbi/reset.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1435         background-image: url('../resources/cbi/reset.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1436         background-image: url('../resources/cbi/reset.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1437         background-image: url('../resources/cbi/reset.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1438 }
1439
1440 .cbi-button-edit,
1441 .cbi-input-edit {
1442         background-position: 6px center, left top;
1443         padding-left: 28px;
1444         background-image: url('../resources/cbi/edit.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1445         background-image: url('../resources/cbi/edit.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1446         background-image: url('../resources/cbi/edit.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1447         background-image: url('../resources/cbi/edit.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1448         background-image: url('../resources/cbi/edit.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1449         background-image: url('../resources/cbi/edit.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1450 }
1451
1452 .cbi-button-remove,
1453 .cbi-input-remove {
1454         background-position: 6px center, left top;
1455         padding-left: 28px;
1456         background-image: url('../resources/cbi/remove.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1457         background-image: url('../resources/cbi/remove.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1458         background-image: url('../resources/cbi/remove.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1459         background-image: url('../resources/cbi/remove.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1460         background-image: url('../resources/cbi/remove.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1461         background-image: url('../resources/cbi/remove.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1462 }
1463
1464 .cbi-button-reload,
1465 .cbi-input-reload {
1466         background-position: 6px center, left top;
1467         padding-left: 28px;
1468         background-image: url('../resources/cbi/reload.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1469         background-image: url('../resources/cbi/reload.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1470         background-image: url('../resources/cbi/reload.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1471         background-image: url('../resources/cbi/reload.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1472         background-image: url('../resources/cbi/reload.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1473         background-image: url('../resources/cbi/reload.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1474 }
1475
1476 .cbi-button-link,
1477 .cbi-input-link {
1478         background-position: 6px center, left top;
1479         padding-left: 28px;
1480         background-image: url('../resources/cbi/link.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1481         background-image: url('../resources/cbi/link.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1482         background-image: url('../resources/cbi/link.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1483         background-image: url('../resources/cbi/link.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1484         background-image: url('../resources/cbi/link.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1485         background-image: url('../resources/cbi/link.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1486 }
1487
1488 .cbi-button-download,
1489 .cbi-input-download {
1490         background-position: 6px center, left top;
1491         padding-left: 28px;
1492         background-image: url('../resources/cbi/download.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1493         background-image: url('../resources/cbi/download.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1494         background-image: url('../resources/cbi/download.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1495         background-image: url('../resources/cbi/download.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1496         background-image: url('../resources/cbi/download.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1497         background-image: url('../resources/cbi/download.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1498 }
1499
1500 .btn.active, .btn:active {
1501         -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1502         -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1503         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1504 }
1505
1506 .btn.disabled {
1507         cursor: default;
1508         background-image: none;
1509         filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1510         filter: alpha(opacity=65);
1511         -khtml-opacity: 0.65;
1512         -moz-opacity: 0.65;
1513         opacity: 0.65;
1514         -webkit-box-shadow: none;
1515         -moz-box-shadow: none;
1516         box-shadow: none;
1517 }
1518
1519 .btn[disabled] {
1520         cursor: default;
1521         background-image: none;
1522         filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1523         filter: alpha(opacity=65);
1524         -khtml-opacity: 0.65;
1525         -moz-opacity: 0.65;
1526         opacity: 0.65;
1527         -webkit-box-shadow: none;
1528         -moz-box-shadow: none;
1529         box-shadow: none;
1530 }
1531
1532 .btn.large {
1533         font-size: 15px;
1534         line-height: normal;
1535         padding: 9px 14px 9px;
1536         -webkit-border-radius: 6px;
1537         -moz-border-radius: 6px;
1538         border-radius: 6px;
1539 }
1540
1541 .btn.small {
1542         padding: 7px 9px 7px;
1543         font-size: 11px;
1544 }
1545
1546 /* Button icons for specific pages */
1547 .Startup .cbi-section-table input.cbi-input-apply,
1548 .Startup .cbi-section-table input.cbi-button-apply {
1549           background-image: url("../resources/cbi/apply.gif");
1550           background-position: 7px 4px;
1551           padding: 3px 9px 3px 27px;
1552 }
1553
1554 .Processes .cbi-section-table input.cbi-input-reload,
1555 .Startup .cbi-section-table input.cbi-input-reload {
1556           background-image: url("../resources/cbi/reload.gif");
1557           background-position: 7px 4px;
1558           padding: 3px 9px 3px 27px;
1559 }
1560
1561 .Processes .cbi-section-table input.cbi-input-remove,
1562 .Processes .cbi-section-table div.cbi-section-remove input,
1563 .Startup .cbi-section-table input.cbi-input-remove,
1564 .Startup .cbi-section-table div.cbi-section-remove input  {
1565           background-image: url("../resources/cbi/remove.gif");
1566           background-position: 7px 4px;
1567           padding: 3px 9px 3px 27px;
1568 }
1569
1570 .Processes .cbi-section-table input.cbi-input-reset,
1571 .Processes .cbi-section-table input.cbi-button-reset,
1572 .Startup .cbi-section-table input.cbi-input-reset,
1573 .Startup .cbi-section-table input.cbi-button-reset  {
1574           background-image: url("../resources/cbi/reset.gif");
1575           background-position: 7px 4px;
1576           padding: 3px 9px 3px 27px;
1577 }
1578
1579 .Startup .cbi-section-table input.cbi-input-save,
1580 .Startup .cbi-section-table input.cbi-button-save {
1581           background-image: url("../resources/cbi/save.gif");
1582           background-position: 7px 4px;
1583           padding: 3px 9px 3px 27px;
1584 }
1585
1586 :root .alert-message, :root .btn {
1587         border-radius: 0 0;
1588 }
1589
1590 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1591         padding: 0;
1592         border: 0;
1593 }
1594
1595 .close {
1596         float: right;
1597         color: #000000;
1598         font-size: 20px;
1599         font-weight: bold;
1600         line-height: 13.5px;
1601         text-shadow: 0 1px 0 #ffffff;
1602         filter: alpha(opacity=25);
1603         -khtml-opacity: 0.25;
1604         -moz-opacity: 0.25;
1605         opacity: 0.25;
1606 }
1607
1608 .close:hover {
1609         color: #000000;
1610         text-decoration: none;
1611         filter: alpha(opacity=40);
1612         -khtml-opacity: 0.4;
1613         -moz-opacity: 0.4;
1614         opacity: 0.4;
1615 }
1616
1617 .alert-message, .errorbox {
1618         position: relative;
1619         padding: 7px 15px;
1620         margin-bottom: 18px;
1621         color: #404040;
1622         background-color: #eedc94;
1623         background-repeat: repeat-x;
1624         background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
1625         background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
1626         background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
1627         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
1628         background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
1629         background-image: -o-linear-gradient(top, #fceec1, #eedc94);
1630         background-image: linear-gradient(top, #fceec1, #eedc94);
1631         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
1632         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1633         border-color: #eedc94 #eedc94 #e4c652;
1634         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1635         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1636         border-width: 1px;
1637         border-style: solid;
1638         -webkit-border-radius: 4px;
1639         -moz-border-radius: 4px;
1640         border-radius: 4px;
1641         -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1642         -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1643         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1644 }
1645
1646 .alert-message .close {
1647         margin-top: 1px;
1648         *margin-top: 0;
1649 }
1650
1651 .alert-message a {
1652         font-weight: bold;
1653         color: #404040;
1654 }
1655
1656 .alert-message.danger p a,
1657 .alert-message.error p a,
1658 .alert-message.success p a,
1659 .alert-message.info p a {
1660         color: #ffffff;
1661 }
1662
1663 .alert-message h5 {
1664         line-height: 18px;
1665 }
1666
1667 .alert-message p {
1668         margin-bottom: 0;
1669 }
1670
1671 .alert-message div {
1672         margin-top: 5px;
1673         margin-bottom: 2px;
1674         line-height: 28px;
1675 }
1676
1677 .alert-message .btn {
1678         -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1679         -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1680         box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1681 }
1682
1683 .label {
1684         padding: 1px 3px 2px;
1685         font-size: 9.75px;
1686         font-weight: bold;
1687         color: #ffffff !important;
1688         text-transform: uppercase;
1689         white-space: nowrap;
1690         background-color: #bfbfbf;
1691         -webkit-border-radius: 3px;
1692         -moz-border-radius: 3px;
1693         border-radius: 3px;
1694         text-shadow: none;
1695 }
1696
1697 a.label:link,
1698 a.label:visited {
1699         color: #ffffff;
1700 }
1701
1702 a.label:hover {
1703         text-decoration: none;
1704 }
1705
1706 .label.important {
1707         background-color: #c43c35;
1708 }
1709
1710 .label.warning {
1711         background-color: #f89406;
1712 }
1713
1714 .label.success {
1715         background-color: #46a546;
1716 }
1717
1718 .label.notice {
1719         background-color: #62cffc;
1720 }
1721
1722 /* LuCI specific items */
1723 .hidden { display: none }
1724
1725 #memtotal > div,
1726 #memfree > div,
1727 #memcache > div,
1728 #membuff > div,
1729 #conns > div  {
1730           border: 1px solid #CCCCCC;
1731           border-radius: 3px 3px 3px 3px;
1732           color: #808080;
1733           display: inline-block;
1734           font-size: 13px;
1735           height: 22 dpx;
1736           line-height: 18px;
1737 }
1738
1739 #xhr_poll_status {
1740           cursor: pointer;
1741 }
1742
1743 form.inline { display: inline }
1744
1745 header .pull-right { padding-top: 8px; }
1746
1747 #modemenu li:last-child span.divider { display: none }
1748
1749 #syslog {  width: 100%; }
1750
1751 .cbi-section-table tbody tr:nth-child(odd) td, .cbi-section-table tbody tr:nth-child(odd) th {
1752         background-color: #f9f9f9;
1753 }
1754
1755 .cbi-section-table tbody tr:hover td, .cbi-section-table tbody tr:hover th  {
1756         background-color: #f5f5f5;
1757 }
1758
1759 .cbi-section-table tr.cbi-section-table-descr th {
1760         font-weight: normal;
1761 }
1762
1763 .left { text-align: left !important; }
1764
1765 .right { text-align: right !important; }
1766
1767 .cbi-value-field { line-height: 1.5em; }
1768
1769 .cbi-value-field input[type=checkbox],
1770 .cbi-value-field input[type=radio] {
1771         margin-top: 8px;
1772         margin-right: 6px;
1773 }
1774
1775 table table td,
1776 .cbi-value-field table td {
1777         border: none;
1778 }
1779
1780 table.cbi-section-table input,
1781 table.cbi-section-table textarea,
1782 table.cbi-section-table select {
1783         width: auto;
1784 }
1785
1786 table.cbi-section-table td.cbi-section-table-cell {
1787         white-space: nowrap;
1788         text-align: right;
1789 }
1790
1791 table.cbi-section-table td.cbi-section-table-cell select {
1792         width: inherit;
1793 }
1794
1795 table.valign-middle td {
1796         vertical-align: middle;
1797 }
1798
1799 .cbi-value-description { display: inline; }
1800
1801 .cbi-value-description img { vertical-align: middle; }
1802
1803 .cbi-section-error {
1804         border: 1px solid #FF0000;
1805         border-radius: 3px;
1806         background-color: #FCE6E6;
1807         padding: 5px;
1808 }
1809
1810 .cbi-section-error ul { margin: 0 0 0 20px; }
1811
1812 .cbi-section-error ul li {
1813         color: #FF0000;
1814         font-weight: bold;
1815 }
1816
1817 .ifacebox {
1818         background-color: #FFFFFF;
1819         border: 1px solid #CCCCCC;
1820         margin: 0 10px;
1821         text-align: center;
1822         white-space: nowrap;
1823         background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1824         background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1825         background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1826         background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1827         background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1828         background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1829         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1830         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1831         -webkit-border-radius: 4px;
1832         -moz-border-radius: 4px;
1833         border-radius: 4px;
1834         -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1835         -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1836         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1837 }
1838
1839 .ifacebox .ifacebox-head {
1840         border-bottom: 1px solid #CCCCCC;
1841         padding: 2px;
1842 }
1843
1844 .ifacebox .ifacebox-body {
1845         padding: 6px;
1846 }
1847
1848 .ifacebadge {
1849         display: inline-block;
1850         white-space: nowrap;
1851         background-color: #FFFFFF;
1852         border: 1px solid #CCCCCC;
1853         padding: 2px;
1854         margin-left: 2px;
1855         background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1856         background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1857         background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1858         background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1859         background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1860         background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1861         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1862         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1863         -webkit-border-radius: 4px;
1864         -moz-border-radius: 4px;
1865         border-radius: 4px;
1866         -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1867         -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1868         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1869         cursor: default;
1870 }
1871
1872 .ifacebadge img {
1873         width: 16px;
1874         height: 16px;
1875         vertical-align: middle;
1876 }
1877
1878 .ifacebadge-active {
1879         border-color: #000000;
1880         font-weight: bold;
1881 }
1882
1883 .zonebadge {
1884         padding: 2px;
1885         border-radius: 4px;
1886         display: inline-block;
1887         white-space: nowrap;
1888         color: #666666;
1889         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1890         cursor: pointer;
1891 }
1892
1893 .zonebadge > em,
1894 .zonebadge > strong {
1895         margin: 5px;
1896         display: inline-block;
1897 }
1898
1899 .zonebadge input {
1900         width: 6em;
1901 }
1902
1903 .zonebadge-empty {
1904         border: 1px dashed #AAAAAA;
1905         color: #AAAAAA;
1906         font-style: italic;
1907         font-size: smaller;
1908 }
1909
1910 div.cbi-value var,
1911 td.cbi-value-field var {
1912         font-style: italic;
1913         color: #0069D6;
1914 }
1915
1916 .uci-change-list {
1917         font-family: monospace;
1918 }
1919
1920 .uci-change-list ins,
1921 .uci-change-legend-label ins {
1922         text-decoration: none;
1923         border: 1px solid #00FF00;
1924         background-color: #CCFFCC;
1925         display: block;
1926         padding: 2px;
1927 }
1928
1929 .uci-change-list del,
1930 .uci-change-legend-label del {
1931         text-decoration: none;
1932         border: 1px solid #FF0000;
1933         background-color: #FFCCCC;
1934         display: block;
1935         font-style: normal;
1936         padding: 2px;
1937 }
1938
1939 .uci-change-list var,
1940 .uci-change-legend-label var {
1941         text-decoration: none;
1942         border: 1px solid #CCCCCC;
1943         background-color: #EEEEEE;
1944         display: block;
1945         font-style: normal;
1946         padding: 2px;
1947 }
1948
1949 .uci-change-list var ins,
1950 .uci-change-list var del {
1951         /*display: inline;*/
1952         border: none;
1953         white-space: pre;
1954         font-style: normal;
1955         padding: 0px;
1956 }
1957
1958 .uci-change-legend {
1959         padding: 5px;
1960 }
1961
1962 .uci-change-legend-label {
1963         width: 150px;
1964         float: left;
1965 }
1966
1967 .uci-change-legend-label > ins,
1968 .uci-change-legend-label > del,
1969 .uci-change-legend-label > var {
1970         float: left;
1971         margin-right: 4px;
1972         width: 10px;
1973         height: 10px;
1974         display: block;
1975 }
1976
1977 .uci-change-legend-label var ins,
1978 .uci-change-legend-label var del {
1979         line-height: 6px;
1980         border: none;
1981 }