6c1e3e3202b092611a5c1ba841cf49a8ab4d4b02
[project/luci.git] / themes / 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, body {
17 margin: 0;
18 padding: 0;
19 }
20 h1,
21 h2,
22 h3,
23 h4,
24 h5,
25 h6,
26 p,
27 pre,
28 a,
29 abbr,
30 acronym,
31 code,
32 del,
33 em,
34 img,
35 q,
36 s,
37 small,
38 strike,
39 strong,
40 sub,
41 sup,
42 tt,
43 var,
44 dd,
45 dl,
46 dt,
47 li,
48 ol,
49 ul,
50 fieldset,
51 form,
52 label,
53 legend,
54 button,
55 table,
56 caption,
57 tbody,
58 tfoot,
59 thead,
60 tr,
61 th,
62 td {
63 margin: 0;
64 padding: 0;
65 border: 0;
66 font-weight: normal;
67 font-style: normal;
68 font-size: 100%;
69 line-height: 1;
70 font-family: inherit;
71 }
72 abbr[title], acronym[title] {
73 border-bottom: 1px dotted;
74 cursor: help;
75 }
76 table {
77 border-collapse: collapse;
78 border-spacing: 0;
79 }
80 ol, ul {
81 list-style: none;
82 }
83 q:before,
84 q:after,
85 blockquote:before,
86 blockquote:after {
87 content: "";
88 }
89 html {
90 overflow-y: scroll;
91 font-size: 100%;
92 -webkit-text-size-adjust: 100%;
93 -ms-text-size-adjust: 100%;
94 }
95 a:focus {
96 outline: thin dotted;
97 }
98 a:hover, a:active {
99 outline: 0;
100 }
101 article,
102 aside,
103 details,
104 figcaption,
105 figure,
106 footer,
107 header,
108 hgroup,
109 nav,
110 section {
111 display: block;
112 }
113 sub, sup {
114 font-size: 75%;
115 line-height: 0;
116 position: relative;
117 vertical-align: baseline;
118 }
119 sup {
120 top: -0.5em;
121 }
122 sub {
123 bottom: -0.25em;
124 }
125 img {
126 border: 0;
127 -ms-interpolation-mode: bicubic;
128 }
129 button,
130 input,
131 select,
132 textarea {
133 font-size: 100%;
134 margin: 0;
135 vertical-align: baseline;
136 *vertical-align: middle;
137 }
138 button, input {
139 line-height: normal;
140 *overflow: visible;
141 }
142 button::-moz-focus-inner, input::-moz-focus-inner {
143 border: 0;
144 padding: 0;
145 }
146 button,
147 input[type="button"],
148 input[type="reset"],
149 input[type="submit"] {
150 cursor: pointer;
151 -webkit-appearance: button;
152 }
153 input[type="search"] {
154 -webkit-appearance: textfield;
155 -webkit-box-sizing: content-box;
156 -moz-box-sizing: content-box;
157 box-sizing: content-box;
158 }
159 input[type="search"]::-webkit-search-decoration {
160 -webkit-appearance: none;
161 }
162 textarea {
163 overflow: auto;
164 vertical-align: top;
165 }
166 /*
167 * Scaffolding
168 * Basic and global styles for generating a grid system, structural layout, and page templates
169 * ------------------------------------------------------------------------------------------- */
170 body {
171 background-color: #ffffff;
172 margin: 0;
173 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
174 font-size: 13px;
175 font-weight: normal;
176 line-height: 18px;
177 color: #404040;
178 padding-top: 58px;
179 }
180 .container {
181 width: 100%;
182 max-width: 940px;
183 margin-left: auto;
184 margin-right: auto;
185 zoom: 1;
186 }
187 .container:before, .container:after {
188 display: table;
189 content: "";
190 zoom: 1;
191 }
192 .container:after {
193 clear: both;
194 }
195 a {
196 color: #0069d6;
197 text-decoration: none;
198 line-height: inherit;
199 font-weight: inherit;
200 }
201 a:hover {
202 color: #00438a;
203 text-decoration: underline;
204 }
205 .pull-right {
206 float: right;
207 }
208 .pull-left {
209 float: left;
210 }
211 /* Typography.less
212 * Headings, body text, lists, code, and more for a versatile and durable typography system
213 * ---------------------------------------------------------------------------------------- */
214 p,
215 .cbi-map-descr,
216 .cbi-section-descr {
217 font-size: 13px;
218 font-weight: normal;
219 line-height: 18px;
220 margin-bottom: 9px;
221 }
222 p small {
223 font-size: 11px;
224 color: #bfbfbf;
225 }
226 h1,
227 h2,
228 h3,
229 h4,
230 h5,
231 h6 {
232 font-weight: bold;
233 color: #404040;
234 }
235 h1 small,
236 h2 small,
237 h3 small,
238 h4 small,
239 h5 small,
240 h6 small {
241 color: #bfbfbf;
242 }
243 h1 {
244 margin-bottom: 18px;
245 font-size: 30px;
246 line-height: 36px;
247 }
248 h1 small {
249 font-size: 18px;
250 }
251 h2 {
252 font-size: 24px;
253 line-height: 36px;
254 }
255 h2 small {
256 font-size: 14px;
257 }
258 h3,
259 h4,
260 h5,
261 h6 {
262 line-height: 36px;
263 }
264 h3 {
265 font-size: 18px;
266 }
267 h3 small {
268 font-size: 14px;
269 }
270 h4 {
271 font-size: 16px;
272 }
273 h4 small {
274 font-size: 12px;
275 }
276 h5 {
277 font-size: 14px;
278 }
279 h6 {
280 font-size: 13px;
281 color: #bfbfbf;
282 text-transform: uppercase;
283 }
284 ul, ol {
285 margin: 0 0 18px 25px;
286 }
287 ul ul,
288 ul ol,
289 ol ol,
290 ol ul {
291 margin-bottom: 0;
292 }
293 ul {
294 list-style: disc;
295 }
296 ol {
297 list-style: decimal;
298 }
299 li {
300 line-height: 18px;
301 color: #808080;
302 }
303 ul.unstyled {
304 list-style: none;
305 margin-left: 0;
306 }
307 dl {
308 margin-bottom: 18px;
309 }
310 dl dt, dl dd {
311 line-height: 18px;
312 }
313 dl dt {
314 font-weight: bold;
315 }
316 dl dd {
317 margin-left: 9px;
318 }
319 hr {
320 margin: 20px 0 19px;
321 border: 0;
322 border-bottom: 1px solid #eee;
323 }
324 strong {
325 font-style: inherit;
326 font-weight: bold;
327 }
328 em {
329 font-style: italic;
330 font-weight: inherit;
331 line-height: inherit;
332 }
333 small { font-size: 0.9em }
334 address {
335 display: block;
336 line-height: 18px;
337 margin-bottom: 18px;
338 }
339 code, pre {
340 padding: 0 3px 2px;
341 font-family: Monaco, Andale Mono, Courier New, monospace;
342 font-size: 12px;
343 -webkit-border-radius: 3px;
344 -moz-border-radius: 3px;
345 border-radius: 3px;
346 }
347 code {
348 background-color: #fee9cc;
349 color: rgba(0, 0, 0, 0.75);
350 padding: 1px 3px;
351 }
352 pre {
353 background-color: #f5f5f5;
354 display: block;
355 padding: 8.5px;
356 margin: 0 0 18px;
357 line-height: 18px;
358 font-size: 12px;
359 border: 1px solid #ccc;
360 border: 1px solid rgba(0, 0, 0, 0.15);
361 -webkit-border-radius: 3px;
362 -moz-border-radius: 3px;
363 border-radius: 3px;
364 white-space: pre;
365 white-space: pre-wrap;
366 word-wrap: break-word;
367 }
368 /* Forms.less
369 * Base styles for various input types, form layouts, and states
370 * ------------------------------------------------------------- */
371 form {
372 margin-bottom: 18px;
373 }
374 fieldset {
375 margin-bottom: 9px;
376 padding-top: 9px;
377 }
378 fieldset legend {
379 display: block;
380 font-size: 19.5px;
381 line-height: 1;
382 color: #404040;
383 padding-top: 20px;
384 *padding: 0 0 5px 0px;
385 /* IE6-7 */
386
387 *line-height: 1.5;
388 /* IE6-7 */
389
390 }
391 form .clearfix,
392 form .cbi-value {
393 margin-bottom: 18px;
394 zoom: 1;
395 overflow: hidden;
396 }
397 form .clearfix:before, form .clearfix:after,
398 form .cbi-value:before, form .cbi-value:after {
399 display: table;
400 content: "";
401 zoom: 1;
402 }
403 form .clearfix:after
404 form .cbi-value:after {
405 clear: both;
406 }
407 label,
408 input,
409 select,
410 textarea {
411 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
412 font-size: 13px;
413 font-weight: normal;
414 line-height: normal;
415 }
416 form .input,
417 form .cbi-value-field {
418 margin-left: 150px;
419 }
420 form .cbi-value label.cbi-value-title {
421 padding-top: 6px;
422 font-size: 13px;
423 line-height: 18px;
424 float: left;
425 width: 130px;
426 text-align: right;
427 color: #404040;
428 }
429 input[type=checkbox], input[type=radio] {
430 cursor: pointer;
431 }
432 input,
433 textarea,
434 select,
435 .uneditable-input {
436 display: inline-block;
437 width: 210px;
438 height: 18px;
439 padding: 4px;
440 font-size: 13px;
441 line-height: 18px;
442 color: #808080;
443 border: 1px solid #ccc;
444 -webkit-border-radius: 3px;
445 -moz-border-radius: 3px;
446 border-radius: 3px;
447 }
448 select {
449 padding: initial;
450 }
451 input[type=checkbox], input[type=radio] {
452 width: auto;
453 height: auto;
454 padding: 0;
455 margin: 3px 0;
456 *margin-top: 0;
457 /* IE6-7 */
458
459 line-height: normal;
460 border: none;
461 }
462 input[type=file] {
463 background-color: #ffffff;
464 padding: initial;
465 border: initial;
466 line-height: initial;
467 -webkit-box-shadow: none;
468 -moz-box-shadow: none;
469 box-shadow: none;
470 }
471 input[type=button], input[type=reset], input[type=submit] {
472 width: auto;
473 height: auto;
474 }
475 select, input[type=file] {
476 height: 27px;
477 *height: auto;
478 line-height: 27px;
479 *margin-top: 4px;
480 /* For IE7, add top margin to align select with labels */
481 }
482 select[multiple] {
483 height: inherit;
484 background-color: #ffffff;
485 }
486 textarea {
487 height: auto;
488 }
489 .uneditable-input {
490 background-color: #ffffff;
491 display: block;
492 border-color: #eee;
493 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
494 -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
495 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
496 cursor: not-allowed;
497 }
498 :-moz-placeholder {
499 color: #bfbfbf;
500 }
501 ::-webkit-input-placeholder {
502 color: #bfbfbf;
503 }
504 input, textarea {
505 -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
506 -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
507 -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
508 -o-transition: border linear 0.2s, box-shadow linear 0.2s;
509 transition: border linear 0.2s, box-shadow linear 0.2s;
510 -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
511 -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
512 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
513 }
514 input:focus, textarea:focus {
515 outline: 0;
516 border-color: rgba(82, 168, 236, 0.8);
517 -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
518 -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
519 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
520 }
521 input[type=file]:focus, input[type=checkbox]:focus, select:focus {
522 -webkit-box-shadow: none;
523 -moz-box-shadow: none;
524 box-shadow: none;
525 outline: 1px dotted #666;
526 }
527 form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline {
528 color: #b94a48;
529 }
530 form .clearfix.error input, form .clearfix.error textarea {
531 color: #b94a48;
532 border-color: #ee5f5b;
533 }
534 form .clearfix.error input:focus, form .clearfix.error textarea:focus {
535 border-color: #e9322d;
536 -webkit-box-shadow: 0 0 6px #f8b9b7;
537 -moz-box-shadow: 0 0 6px #f8b9b7;
538 box-shadow: 0 0 6px #f8b9b7;
539 }
540 form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on {
541 color: #b94a48;
542 background-color: #fce6e6;
543 border-color: #b94a48;
544 }
545 form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline {
546 color: #c09853;
547 }
548 form .clearfix.warning input, form .clearfix.warning textarea {
549 color: #c09853;
550 border-color: #ccae64;
551 }
552 form .clearfix.warning input:focus, form .clearfix.warning textarea:focus {
553 border-color: #be9a3f;
554 -webkit-box-shadow: 0 0 6px #e5d6b1;
555 -moz-box-shadow: 0 0 6px #e5d6b1;
556 box-shadow: 0 0 6px #e5d6b1;
557 }
558 form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on {
559 color: #c09853;
560 background-color: #d2b877;
561 border-color: #c09853;
562 }
563 form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline {
564 color: #468847;
565 }
566 form .clearfix.success input, form .clearfix.success textarea {
567 color: #468847;
568 border-color: #57a957;
569 }
570 form .clearfix.success input:focus, form .clearfix.success textarea:focus {
571 border-color: #458845;
572 -webkit-box-shadow: 0 0 6px #9acc9a;
573 -moz-box-shadow: 0 0 6px #9acc9a;
574 box-shadow: 0 0 6px #9acc9a;
575 }
576 form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on {
577 color: #468847;
578 background-color: #bcddbc;
579 border-color: #468847;
580 }
581 input[disabled],
582 select[disabled],
583 textarea[disabled],
584 input[readonly],
585 select[readonly],
586 textarea[readonly] {
587 background-color: #f5f5f5;
588 border-color: #ddd;
589 }
590 .actions,
591 .cbi-page-actions {
592 background: #f5f5f5;
593 margin-bottom: 18px;
594 padding: 17px 20px 18px 150px;
595 border-top: 1px solid #ddd;
596 -webkit-border-radius: 0 0 3px 3px;
597 -moz-border-radius: 0 0 3px 3px;
598 border-radius: 0 0 3px 3px;
599 text-align: right;
600 }
601 .actions .secondary-action,
602 .cbi-page-actions .secondary-action{
603 float: right;
604 }
605 .actions .secondary-action a,
606 .cbi-page-actions .secondary-action a {
607 line-height: 30px;
608 }
609 .actions .secondary-action a:hover,
610 .cbi-page-actions .secondary-action a:hover {
611 text-decoration: underline;
612 }
613 .help-inline, .help-block {
614 font-size: 13px;
615 line-height: 18px;
616 color: #bfbfbf;
617 }
618 .help-inline {
619 padding-left: 5px;
620 *position: relative;
621 /* IE6-7 */
622
623 *top: -5px;
624 /* IE6-7 */
625
626 }
627 .help-block {
628 display: block;
629 max-width: 600px;
630 }
631 /*
632 * Tables.less
633 * Tables for, you guessed it, tabular data
634 * ---------------------------------------- */
635 table {
636 width: 100%;
637 margin-bottom: 18px;
638 padding: 0;
639 font-size: 13px;
640 border-collapse: collapse;
641 }
642 table th, table td {
643 padding: 10px 10px 9px;
644 line-height: 18px;
645 text-align: left;
646 }
647 table th {
648 padding-top: 9px;
649 font-weight: bold;
650 vertical-align: middle;
651 }
652 table td {
653 vertical-align: top;
654 border-top: 1px solid #ddd;
655 }
656 table tbody th {
657 border-top: 1px solid #ddd;
658 vertical-align: top;
659 }
660 /* Patterns.less
661 * Repeatable UI elements outside the base styles provided from the scaffolding
662 * ---------------------------------------------------------------------------- */
663 header {
664 height: 40px;
665 position: fixed;
666 top: 0;
667 left: 0;
668 right: 0;
669 z-index: 10000;
670 overflow: visible;
671 color: #BFBFBF
672 }
673 header a {
674 color: #bfbfbf;
675 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
676 }
677 header h3 a:hover, header .brand:hover, header ul .active > a {
678 background-color: #333;
679 background-color: rgba(255, 255, 255, 0.05);
680 color: #ffffff;
681 text-decoration: none;
682 }
683 header h3 {
684 position: relative;
685 }
686 header h3 a, header .brand {
687 float: left;
688 display: block;
689 padding: 8px 20px 12px;
690 margin-left: -20px;
691 color: #ffffff;
692 font-size: 20px;
693 font-weight: 200;
694 line-height: 1;
695 }
696 header p {
697 margin: 0;
698 line-height: 40px;
699 }
700 header .fill {
701 background-color: #222;
702 background-color: #222222;
703 background-repeat: repeat-x;
704 background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
705 background-image: -moz-linear-gradient(top, #333333, #222222);
706 background-image: -ms-linear-gradient(top, #333333, #222222);
707 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
708 background-image: -webkit-linear-gradient(top, #333333, #222222);
709 background-image: -o-linear-gradient(top, #333333, #222222);
710 background-image: linear-gradient(top, #333333, #222222);
711 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
712 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
713 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
714 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
715 }
716 header div > ul, .nav {
717 display: block;
718 float: left;
719 margin: 0 10px 0 0;
720 position: relative;
721 left: 0;
722 }
723 header div > ul > li, .nav > li {
724 display: block;
725 float: left;
726 }
727 header div > ul a, .nav a {
728 display: block;
729 float: none;
730 padding: 10px 10px 11px;
731 line-height: 19px;
732 text-decoration: none;
733 }
734 header div > ul a:hover, .nav a:hover {
735 color: #ffffff;
736 text-decoration: none;
737 }
738 header div > ul .active > a, .nav .active > a {
739 background-color: #222;
740 background-color: rgba(0, 0, 0, 0.5);
741 }
742 header div > ul.secondary-nav, .nav.secondary-nav {
743 float: right;
744 margin-left: 10px;
745 margin-right: 0;
746 }
747 header div > ul.secondary-nav .menu-dropdown,
748 .nav.secondary-nav .menu-dropdown,
749 header div > ul.secondary-nav .dropdown-menu,
750 .nav.secondary-nav .dropdown-menu {
751 right: 0;
752 border: 0;
753 }
754 header div > ul a.menu:hover,
755 .nav a.menu:hover,
756 header div > ul li.open .menu,
757 .nav li.open .menu,
758 header div > ul .dropdown-toggle:hover,
759 .nav .dropdown-toggle:hover,
760 header div > ul .dropdown.open .dropdown-toggle,
761 .nav .dropdown.open .dropdown-toggle {
762 background: #444;
763 background: rgba(255, 255, 255, 0.05);
764 }
765 header div > ul .menu-dropdown,
766 .nav .menu-dropdown,
767 header div > ul .dropdown-menu,
768 .nav .dropdown-menu {
769 background-color: #333;
770 }
771 header div > ul .menu-dropdown a.menu,
772 .nav .menu-dropdown a.menu,
773 header div > ul .dropdown-menu a.menu,
774 .nav .dropdown-menu a.menu,
775 header div > ul .menu-dropdown .dropdown-toggle,
776 .nav .menu-dropdown .dropdown-toggle,
777 header div > ul .dropdown-menu .dropdown-toggle,
778 .nav .dropdown-menu .dropdown-toggle {
779 color: #ffffff;
780 }
781 header div > ul .menu-dropdown a.menu.open,
782 .nav .menu-dropdown a.menu.open,
783 header div > ul .dropdown-menu a.menu.open,
784 .nav .dropdown-menu a.menu.open,
785 header div > ul .menu-dropdown .dropdown-toggle.open,
786 .nav .menu-dropdown .dropdown-toggle.open,
787 header div > ul .dropdown-menu .dropdown-toggle.open,
788 .nav .dropdown-menu .dropdown-toggle.open {
789 background: #444;
790 background: rgba(255, 255, 255, 0.05);
791 }
792 header div > ul .menu-dropdown li a,
793 .nav .menu-dropdown li a,
794 header div > ul .dropdown-menu li a,
795 .nav .dropdown-menu li a {
796 color: #999;
797 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
798 }
799 header div > ul .menu-dropdown li a:hover,
800 .nav .menu-dropdown li a:hover,
801 header div > ul .dropdown-menu li a:hover,
802 .nav .dropdown-menu li a:hover {
803 background-color: #191919;
804 background-repeat: repeat-x;
805 background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
806 background-image: -moz-linear-gradient(top, #292929, #191919);
807 background-image: -ms-linear-gradient(top, #292929, #191919);
808 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));
809 background-image: -webkit-linear-gradient(top, #292929, #191919);
810 background-image: -o-linear-gradient(top, #292929, #191919);
811 background-image: linear-gradient(top, #292929, #191919);
812 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
813 color: #ffffff;
814 }
815 header div > ul .menu-dropdown .active a,
816 .nav .menu-dropdown .active a,
817 header div > ul .dropdown-menu .active a,
818 .nav .dropdown-menu .active a {
819 color: #ffffff;
820 }
821 header div > ul .menu-dropdown .divider,
822 .nav .menu-dropdown .divider,
823 header div > ul .dropdown-menu .divider,
824 .nav .dropdown-menu .divider {
825 background-color: #222;
826 border-color: #444;
827 }
828 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
829 padding: 4px 15px;
830 }
831 li.menu, .dropdown {
832 position: relative;
833 }
834 a.menu:after, .dropdown-toggle:after {
835 width: 0;
836 height: 0;
837 display: inline-block;
838 content: "&darr;";
839 text-indent: -99999px;
840 vertical-align: top;
841 margin-top: 8px;
842 margin-left: 4px;
843 border-left: 4px solid transparent;
844 border-right: 4px solid transparent;
845 border-top: 4px solid #ffffff;
846 filter: alpha(opacity=50);
847 -khtml-opacity: 0.5;
848 -moz-opacity: 0.5;
849 opacity: 0.5;
850 }
851 .menu-dropdown, .dropdown-menu {
852 background-color: #ffffff;
853 float: left;
854 display: none;
855 position: absolute;
856 top: 40px;
857 z-index: 900;
858 min-width: 160px;
859 max-width: 220px;
860 _width: 160px;
861 margin-left: 0;
862 margin-right: 0;
863 padding: 6px 0;
864 zoom: 1;
865 border-color: #999;
866 border-color: rgba(0, 0, 0, 0.2);
867 border-style: solid;
868 border-width: 0 1px 1px;
869 -webkit-border-radius: 0 0 6px 6px;
870 -moz-border-radius: 0 0 6px 6px;
871 border-radius: 0 0 6px 6px;
872 -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
873 -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
874 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
875 -webkit-background-clip: padding-box;
876 -moz-background-clip: padding-box;
877 background-clip: padding-box;
878 }
879 .menu-dropdown li, .dropdown-menu li {
880 float: none;
881 display: block;
882 background-color: none;
883 }
884 .menu-dropdown .divider, .dropdown-menu .divider {
885 height: 1px;
886 margin: 5px 0;
887 overflow: hidden;
888 background-color: #eee;
889 border-bottom: 1px solid #ffffff;
890 }
891 header .dropdown-menu a, .dropdown-menu a {
892 display: block;
893 padding: 4px 15px;
894 clear: both;
895 font-weight: normal;
896 line-height: 18px;
897 color: #808080;
898 text-shadow: 0 1px 0 #ffffff;
899 }
900 header .dropdown-menu a:hover,
901 .dropdown-menu a:hover,
902 header .dropdown-menu a.hover,
903 .dropdown-menu a.hover {
904 background-color: #dddddd;
905 background-repeat: repeat-x;
906 background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
907 background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
908 background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
909 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
910 background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
911 background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
912 background-image: linear-gradient(top, #eeeeee, #dddddd);
913 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
914 color: #404040;
915 text-decoration: none;
916 -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
917 -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
918 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
919 }
920 .open .menu,
921 .dropdown.open .menu,
922 .open .dropdown-toggle,
923 .dropdown.open .dropdown-toggle {
924 color: #ffffff;
925 background: #ccc;
926 background: rgba(0, 0, 0, 0.3);
927 }
928 .open .menu-dropdown,
929 .dropdown.open .menu-dropdown,
930 .open .dropdown-menu,
931 .dropdown.open .dropdown-menu {
932 display: block;
933 }
934 .dropdown:hover ul.dropdown-menu {
935 display: block;
936 }
937 .dropdown-menu .dropdown-menu {
938 position: absolute;
939 left: 159px;
940 }
941 .dropdown-menu li {
942 position: relative;
943 }
944 .tabs, .cbi-tabmenu {
945 margin: 0 0 18px;
946 padding: 0;
947 list-style: none;
948 zoom: 1;
949 }
950 .tabs:before,
951 .cbi-tabmenu:before,
952 .tabs:after,
953 .cbi-tabmenu:after {
954 display: table;
955 content: "";
956 zoom: 1;
957 }
958 .tabs:after, .cbi-tabmenu:after {
959 clear: both;
960 }
961 .tabs > li, .cbi-tabmenu > li {
962 float: left;
963 }
964 .tabs > li > a, .cbi-tabmenu > li > a {
965 display: block;
966 }
967 .tabs,
968 .cbi-tabmenu {
969 border-color: #ddd;
970 border-style: solid;
971 border-width: 0 0 1px;
972 }
973 .tabs > li,
974 .cbi-tabmenu > li {
975 position: relative;
976 margin-bottom: -1px;
977 }
978 .tabs > li > a,
979 .cbi-tabmenu > li > a {
980 padding: 0 15px;
981 margin-right: 2px;
982 line-height: 34px;
983 border: 1px solid transparent;
984 -webkit-border-radius: 4px 4px 0 0;
985 -moz-border-radius: 4px 4px 0 0;
986 border-radius: 4px 4px 0 0;
987 }
988 .tabs > li > a:hover,
989 .cbi-tabmenu > li > a:hover {
990 text-decoration: none;
991 background-color: #eee;
992 border-color: #eee #eee #ddd;
993 }
994 .tabs .active > a, .tabs .active > a:hover,
995 .cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover,
996 .cbi-tab > a:link, .cbi-tab > a:hover {
997 color: #808080;
998 background-color: #ffffff;
999 border: 1px solid #ddd;
1000 border-bottom-color: transparent;
1001 cursor: default;
1002 }
1003 .tabs .menu-dropdown, .tabs .dropdown-menu,
1004 .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu {
1005 top: 35px;
1006 border-width: 1px;
1007 -webkit-border-radius: 0 6px 6px 6px;
1008 -moz-border-radius: 0 6px 6px 6px;
1009 border-radius: 0 6px 6px 6px;
1010 }
1011 .tabs a.menu:after, .tabs .dropdown-toggle:after,
1012 .cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after {
1013 border-top-color: #999;
1014 margin-top: 15px;
1015 margin-left: 5px;
1016 }
1017 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle,
1018 .cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle {
1019 border-color: #999;
1020 }
1021 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after,
1022 .cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after {
1023 border-top-color: #555;
1024 }
1025 .tab-content > .tab-pane,
1026 .tab-content > div {
1027 display: none;
1028 }
1029 .tab-content > .active {
1030 display: block;
1031 }
1032 .breadcrumb {
1033 padding: 7px 14px;
1034 margin: 0 0 18px;
1035 background-color: #f5f5f5;
1036 background-repeat: repeat-x;
1037 background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
1038 background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
1039 background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
1040 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
1041 background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
1042 background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
1043 background-image: linear-gradient(top, #ffffff, #f5f5f5);
1044 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
1045 border: 1px solid #ddd;
1046 -webkit-border-radius: 3px;
1047 -moz-border-radius: 3px;
1048 border-radius: 3px;
1049 -webkit-box-shadow: inset 0 1px 0 #ffffff;
1050 -moz-box-shadow: inset 0 1px 0 #ffffff;
1051 box-shadow: inset 0 1px 0 #ffffff;
1052 }
1053 .breadcrumb li {
1054 display: inline;
1055 text-shadow: 0 1px 0 #ffffff;
1056 }
1057 .breadcrumb .divider {
1058 padding: 0 5px;
1059 color: #bfbfbf;
1060 }
1061 .breadcrumb .active a {
1062 color: #404040;
1063 }
1064 footer {
1065 margin-top: 17px;
1066 padding-top: 17px;
1067 border-top: 1px solid #eee;
1068 }
1069 .btn.danger,
1070 .alert-message.danger,
1071 .btn.danger:hover,
1072 .alert-message.danger:hover,
1073 .btn.error,
1074 .alert-message.error,
1075 .btn.error:hover,
1076 .alert-message.error:hover,
1077 .btn.success,
1078 .alert-message.success,
1079 .btn.success:hover,
1080 .alert-message.success:hover,
1081 .btn.info,
1082 .alert-message.info,
1083 .btn.info:hover,
1084 .alert-message.info:hover {
1085 color: #ffffff;
1086 }
1087 .btn .close, .alert-message .close {
1088 font-family: Arial, sans-serif;
1089 line-height: 18px;
1090 }
1091 .btn.danger,
1092 .alert-message.danger,
1093 .btn.error,
1094 .alert-message.error {
1095 background-color: #c43c35;
1096 background-repeat: repeat-x;
1097 background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
1098 background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
1099 background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
1100 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
1101 background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
1102 background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
1103 background-image: linear-gradient(top, #ee5f5b, #c43c35);
1104 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
1105 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1106 border-color: #c43c35 #c43c35 #882a25;
1107 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1108 }
1109 .btn.success, .alert-message.success {
1110 background-color: #57a957;
1111 background-repeat: repeat-x;
1112 background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
1113 background-image: -moz-linear-gradient(top, #62c462, #57a957);
1114 background-image: -ms-linear-gradient(top, #62c462, #57a957);
1115 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
1116 background-image: -webkit-linear-gradient(top, #62c462, #57a957);
1117 background-image: -o-linear-gradient(top, #62c462, #57a957);
1118 background-image: linear-gradient(top, #62c462, #57a957);
1119 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
1120 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1121 border-color: #57a957 #57a957 #3d773d;
1122 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1123 }
1124 .btn.info, .alert-message.info {
1125 background-color: #339bb9;
1126 background-repeat: repeat-x;
1127 background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
1128 background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
1129 background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
1130 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
1131 background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
1132 background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
1133 background-image: linear-gradient(top, #5bc0de, #339bb9);
1134 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
1135 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1136 border-color: #339bb9 #339bb9 #22697d;
1137 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1138 }
1139 .btn,
1140 .cbi-button {
1141 cursor: pointer;
1142 display: inline-block;
1143 background-color: #e6e6e6;
1144 background-repeat: no-repeat;
1145 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1146 background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1147 background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1148 background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1149 background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1150 background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1151 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1152 padding: 5px 14px 6px;
1153 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1154 color: #333;
1155 font-size: 13px;
1156 line-height: normal;
1157 border: 1px solid #ccc;
1158 border-bottom-color: #bbb;
1159 -webkit-border-radius: 4px;
1160 -moz-border-radius: 4px;
1161 border-radius: 4px;
1162 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1163 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1164 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1165 }
1166 .btn:hover,
1167 .cbi-button:hover {
1168 color: #333;
1169 text-decoration: none;
1170 }
1171 .btn:focus,
1172 .cbi-button:focus {
1173 outline: 1px dotted #666;
1174 }
1175 .btn.primary,
1176 .cbi-page-actions .cbi-button-apply,
1177 .cbi-page-actions .cbi-button-save {
1178 color: #ffffff;
1179 background-color: #0064cd;
1180 background-repeat: repeat-x;
1181 background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
1182 background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
1183 background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
1184 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
1185 background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
1186 background-image: -o-linear-gradient(top, #049cdb, #0064cd);
1187 background-image: linear-gradient(top, #049cdb, #0064cd);
1188 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
1189 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1190 border-color: #0064cd #0064cd #003f81;
1191 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1192 }
1193 .cbi-button-up {
1194 background-position: center center;
1195 background-image: url('../resources/cbi/up.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1196 background-image: url('../resources/cbi/up.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1197 background-image: url('../resources/cbi/up.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1198 background-image: url('../resources/cbi/up.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1199 background-image: url('../resources/cbi/up.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1200 background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1201 }
1202 .cbi-button-down {
1203 background-position: center center;
1204 background-image: url('../resources/cbi/down.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1205 background-image: url('../resources/cbi/down.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1206 background-image: url('../resources/cbi/down.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1207 background-image: url('../resources/cbi/down.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1208 background-image: url('../resources/cbi/down.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1209 background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1210 }
1211 .btn.active, .btn:active {
1212 -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1213 -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1214 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1215 }
1216 .btn.disabled {
1217 cursor: default;
1218 background-image: none;
1219 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1220 filter: alpha(opacity=65);
1221 -khtml-opacity: 0.65;
1222 -moz-opacity: 0.65;
1223 opacity: 0.65;
1224 -webkit-box-shadow: none;
1225 -moz-box-shadow: none;
1226 box-shadow: none;
1227 }
1228 .btn[disabled] {
1229 cursor: default;
1230 background-image: none;
1231 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1232 filter: alpha(opacity=65);
1233 -khtml-opacity: 0.65;
1234 -moz-opacity: 0.65;
1235 opacity: 0.65;
1236 -webkit-box-shadow: none;
1237 -moz-box-shadow: none;
1238 box-shadow: none;
1239 }
1240 .btn.large {
1241 font-size: 15px;
1242 line-height: normal;
1243 padding: 9px 14px 9px;
1244 -webkit-border-radius: 6px;
1245 -moz-border-radius: 6px;
1246 border-radius: 6px;
1247 }
1248 .btn.small {
1249 padding: 7px 9px 7px;
1250 font-size: 11px;
1251 }
1252 /* Button icons for specific pages */
1253 .Startup .cbi-section-table input.cbi-input-apply,
1254 .Startup .cbi-section-table input.cbi-button-apply {
1255 background-image: url("../resources/cbi/apply.gif");
1256 background-position: 7px 4px;
1257 padding: 3px 9px 3px 27px;
1258 }
1259 .Processes .cbi-section-table input.cbi-input-reload,
1260 .Startup .cbi-section-table input.cbi-input-reload {
1261 background-image: url("../resources/cbi/reload.gif");
1262 background-position: 7px 4px;
1263 padding: 3px 9px 3px 27px;
1264 }
1265 .Processes .cbi-section-table input.cbi-input-remove,
1266 .Processes .cbi-section-table div.cbi-section-remove input,
1267 .Startup .cbi-section-table input.cbi-input-remove,
1268 .Startup .cbi-section-table div.cbi-section-remove input {
1269 background-image: url("../resources/cbi/remove.gif");
1270 background-position: 7px 4px;
1271 padding: 3px 9px 3px 27px;
1272 }
1273 .Processes .cbi-section-table input.cbi-input-reset,
1274 .Processes .cbi-section-table input.cbi-button-reset,
1275 .Startup .cbi-section-table input.cbi-input-reset,
1276 .Startup .cbi-section-table input.cbi-button-reset {
1277 background-image: url("../resources/cbi/reset.gif");
1278 background-position: 7px 4px;
1279 padding: 3px 9px 3px 27px;
1280 }
1281 .Startup .cbi-section-table input.cbi-input-save,
1282 .Startup .cbi-section-table input.cbi-button-save {
1283 background-image: url("../resources/cbi/save.gif");
1284 background-position: 7px 4px;
1285 padding: 3px 9px 3px 27px;
1286 }
1287 :root .alert-message, :root .btn {
1288 border-radius: 0 \0;
1289 }
1290 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1291 padding: 0;
1292 border: 0;
1293 }
1294 .close {
1295 float: right;
1296 color: #000000;
1297 font-size: 20px;
1298 font-weight: bold;
1299 line-height: 13.5px;
1300 text-shadow: 0 1px 0 #ffffff;
1301 filter: alpha(opacity=25);
1302 -khtml-opacity: 0.25;
1303 -moz-opacity: 0.25;
1304 opacity: 0.25;
1305 }
1306 .close:hover {
1307 color: #000000;
1308 text-decoration: none;
1309 filter: alpha(opacity=40);
1310 -khtml-opacity: 0.4;
1311 -moz-opacity: 0.4;
1312 opacity: 0.4;
1313 }
1314 .alert-message {
1315 position: relative;
1316 padding: 7px 15px;
1317 margin-bottom: 18px;
1318 color: #404040;
1319 background-color: #eedc94;
1320 background-repeat: repeat-x;
1321 background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
1322 background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
1323 background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
1324 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
1325 background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
1326 background-image: -o-linear-gradient(top, #fceec1, #eedc94);
1327 background-image: linear-gradient(top, #fceec1, #eedc94);
1328 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
1329 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1330 border-color: #eedc94 #eedc94 #e4c652;
1331 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1332 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1333 border-width: 1px;
1334 border-style: solid;
1335 -webkit-border-radius: 4px;
1336 -moz-border-radius: 4px;
1337 border-radius: 4px;
1338 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1339 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1340 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1341 }
1342 .alert-message .close {
1343 margin-top: 1px;
1344 *margin-top: 0;
1345 }
1346 .alert-message a {
1347 font-weight: bold;
1348 color: #404040;
1349 }
1350 .alert-message.danger p a,
1351 .alert-message.error p a,
1352 .alert-message.success p a,
1353 .alert-message.info p a {
1354 color: #ffffff;
1355 }
1356 .alert-message h5 {
1357 line-height: 18px;
1358 }
1359 .alert-message p {
1360 margin-bottom: 0;
1361 }
1362 .alert-message div {
1363 margin-top: 5px;
1364 margin-bottom: 2px;
1365 line-height: 28px;
1366 }
1367 .alert-message .btn {
1368 -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1369 -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1370 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1371 }
1372 .label {
1373 padding: 1px 3px 2px;
1374 font-size: 9.75px;
1375 font-weight: bold;
1376 color: #ffffff !important;
1377 text-transform: uppercase;
1378 white-space: nowrap;
1379 background-color: #bfbfbf;
1380 -webkit-border-radius: 3px;
1381 -moz-border-radius: 3px;
1382 border-radius: 3px;
1383 text-shadow: none;
1384 }
1385 a.label:link,
1386 a.label:visited {
1387 color: #ffffff;
1388 }
1389 a.label:hover {
1390 text-decoration: none;
1391 }
1392 .label.important {
1393 background-color: #c43c35;
1394 }
1395 .label.warning {
1396 background-color: #f89406;
1397 }
1398 .label.success {
1399 background-color: #46a546;
1400 }
1401 .label.notice {
1402 background-color: #62cffc;
1403 }
1404 /* LuCI specific items */
1405 .hidden { display: none }
1406 #memtotal > div,
1407 #memfree > div,
1408 #memcache > div,
1409 #membuff > div,
1410 #conns > div {
1411 border: 1px solid #CCCCCC;
1412 border-radius: 3px 3px 3px 3px;
1413 color: #808080;
1414 display: inline-block;
1415 font-size: 13px;
1416 height: 22 dpx;
1417 line-height: 18px;
1418 }
1419 #xhr_poll_status {
1420 cursor: pointer;
1421 }
1422 form.inline { display: inline }
1423 header .pull-right { padding-top: 8px; }
1424 #modemenu li:last-child span.divider { display: none }
1425 #syslog { width: 100%; }
1426 .cbi-section-table tbody tr:nth-child(odd) td, .cbi-section-table tbody tr:nth-child(odd) th {
1427 background-color: #f9f9f9;
1428 }
1429 .cbi-section-table tbody tr:hover td, .cbi-section-table tbody tr:hover th {
1430 background-color: #f5f5f5;
1431 }
1432 .left { text-align: left !important; }
1433 .right { text-align: right !important; }
1434 .cbi-value-field { line-height: 1.5em; }
1435 .cbi-value-field input[type=checkbox],
1436 .cbi-value-field input[type=radio] {
1437 margin-top: 8px;
1438 margin-right: 6px;
1439 }
1440 table table td,
1441 .cbi-value-field table td {
1442 border: none;
1443 }
1444 table.cbi-section-table input,
1445 table.cbi-section-table textarea,
1446 table.cbi-section-table select {
1447 width: auto;
1448 }
1449 table.cbi-section-table td.cbi-section-table-cell {
1450 white-space: nowrap;
1451 text-align: right;
1452 }
1453 .cbi-value-description { display: inline; }
1454 .cbi-value-description img { vertical-align: middle; }
1455 .ifacebox {
1456 background-color: #FFFFFF;
1457 border: 1px solid #CCCCCC;
1458 margin: 0 10px;
1459 text-align: center;
1460 white-space: nowrap;
1461 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1462 background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1463 background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1464 background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1465 background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1466 background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1467 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1468 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1469 -webkit-border-radius: 4px;
1470 -moz-border-radius: 4px;
1471 border-radius: 4px;
1472 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1473 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1474 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1475 }
1476 .ifacebox .ifacebox-head {
1477 border-bottom: 1px solid #CCCCCC;
1478 padding: 2px;
1479 }
1480 .ifacebox .ifacebox-body {
1481 padding: 6px;
1482 }
1483 .ifacebadge {
1484 display: inline-block;
1485 white-space: nowrap;
1486 background-color: #FFFFFF;
1487 border: 1px solid #CCCCCC;
1488 padding: 2px;
1489 margin-left: 2px;
1490 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1491 background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1492 background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1493 background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1494 background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1495 background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1496 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1497 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1498 -webkit-border-radius: 4px;
1499 -moz-border-radius: 4px;
1500 border-radius: 4px;
1501 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1502 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1503 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1504 }
1505 .ifacebadge-active {
1506 border-color: #000000;
1507 font-weight: bold;
1508 }
1509 .zonebadge {
1510 padding: 2px;
1511 border-radius: 4px;
1512 display: inline-block;
1513 white-space: nowrap;
1514 color: #666666;
1515 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1516 cursor: pointer;
1517 }
1518 .zonebadge em,
1519 .zonebadge strong {
1520 margin: 5px;
1521 display: inline-block;
1522 }
1523 .zonebadge input {
1524 width: 6em;
1525 height: 1em;
1526 }
1527 .zonebadge-empty {
1528 border: 1px dashed #AAAAAA;
1529 color: #AAAAAA;
1530 font-style: italic;
1531 font-size: smaller;
1532 }
1533 div.cbi-value var,
1534 td.cbi-value-field var {
1535 font-style: italic;
1536 color: #0069D6;
1537 }