3 * Copyright 2012 Nut & Bolt
4 * By David Menting <david@nut-bolt.nl>
5 * Based on Bootstrap v1.4.0
7 * Copyright 2011 Twitter, Inc
8 * Licensed under the Apache License v2.0
9 * http://www.apache.org/licenses/LICENSE-2.0
11 * Designed and built with all the love in the world @twitter by @mdo and @fat.
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 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
72 abbr[title], acronym[title] {
73 border-bottom: 1px dotted;
77 border-collapse: collapse;
92 -webkit-text-size-adjust: 100%;
93 -ms-text-size-adjust: 100%;
117 vertical-align: baseline;
127 -ms-interpolation-mode: bicubic;
135 vertical-align: baseline;
136 *vertical-align: middle;
142 button::-moz-focus-inner, input::-moz-focus-inner {
147 input[type="button"],
149 input[type="submit"] {
151 -webkit-appearance: button;
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;
159 input[type="search"]::-webkit-search-decoration {
160 -webkit-appearance: none;
168 * Basic and global styles for generating a grid system, structural layout, and page templates
169 * ------------------------------------------------------------------------------------------- */
171 background-color: #ffffff;
173 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
187 .container:before, .container:after {
197 text-decoration: none;
198 line-height: inherit;
199 font-weight: inherit;
203 text-decoration: underline;
212 * Headings, body text, lists, code, and more for a versatile and durable typography system
213 * ---------------------------------------------------------------------------------------- */
282 text-transform: uppercase;
285 margin: 0 0 18px 25px;
322 border-bottom: 1px solid #eee;
330 font-weight: inherit;
331 line-height: inherit;
333 small { font-size: 0.9em }
341 font-family: Monaco, Andale Mono, Courier New, monospace;
343 -webkit-border-radius: 3px;
344 -moz-border-radius: 3px;
348 background-color: #fee9cc;
349 color: rgba(0, 0, 0, 0.75);
353 background-color: #f5f5f5;
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;
365 white-space: pre-wrap;
366 word-wrap: break-word;
369 * Base styles for various input types, form layouts, and states
370 * ------------------------------------------------------------- */
384 *padding: 0 0 5px 0px;
397 form .clearfix:before, form .clearfix:after,
398 form .cbi-value:before, form .cbi-value:after {
404 form .cbi-value:after {
411 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
417 form .cbi-value-field {
420 form .cbi-value label.cbi-value-title {
429 input[type=checkbox], input[type=radio] {
436 display: inline-block;
443 border: 1px solid #ccc;
444 -webkit-border-radius: 3px;
445 -moz-border-radius: 3px;
451 input[type=checkbox], input[type=radio] {
463 background-color: #ffffff;
466 line-height: initial;
467 -webkit-box-shadow: none;
468 -moz-box-shadow: none;
471 input[type=button], input[type=reset], input[type=submit] {
475 select, input[type=file] {
480 /* For IE7, add top margin to align select with labels */
484 background-color: #ffffff;
490 background-color: #ffffff;
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);
501 ::-webkit-input-placeholder {
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);
514 input:focus, textarea:focus {
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);
521 input[type=file]:focus, input[type=checkbox]:focus, select:focus {
522 -webkit-box-shadow: none;
523 -moz-box-shadow: none;
525 outline: 1px dotted #666;
527 form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline {
530 form .clearfix.error input, form .clearfix.error textarea {
532 border-color: #ee5f5b;
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;
540 form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on {
542 background-color: #fce6e6;
543 border-color: #b94a48;
545 form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline {
548 form .clearfix.warning input, form .clearfix.warning textarea {
550 border-color: #ccae64;
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;
558 form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on {
560 background-color: #d2b877;
561 border-color: #c09853;
563 form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline {
566 form .clearfix.success input, form .clearfix.success textarea {
568 border-color: #57a957;
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;
576 form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on {
578 background-color: #bcddbc;
579 border-color: #468847;
587 background-color: #f5f5f5;
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;
600 .actions .secondary-action,
601 .cbi-page-actions .secondary-action{
604 .actions .secondary-action a,
605 .cbi-page-actions .secondary-action a {
608 .actions .secondary-action a:hover,
609 .cbi-page-actions .secondary-action a:hover {
610 text-decoration: underline;
612 .help-inline, .help-block {
632 * Tables for, you guessed it, tabular data
633 * ---------------------------------------- */
639 border-collapse: collapse;
642 padding: 10px 10px 9px;
649 vertical-align: middle;
653 border-top: 1px solid #ddd;
656 border-top: 1px solid #ddd;
660 * Repeatable UI elements outside the base styles provided from the scaffolding
661 * ---------------------------------------------------------------------------- */
674 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
676 header h3 a:hover, header .brand:hover, header ul .active > a {
677 background-color: #333;
678 background-color: rgba(255, 255, 255, 0.05);
680 text-decoration: none;
685 header h3 a, header .brand {
688 padding: 8px 20px 12px;
700 background-color: #222;
701 background-color: #222222;
702 background-repeat: repeat-x;
703 background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
704 background-image: -moz-linear-gradient(top, #333333, #222222);
705 background-image: -ms-linear-gradient(top, #333333, #222222);
706 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
707 background-image: -webkit-linear-gradient(top, #333333, #222222);
708 background-image: -o-linear-gradient(top, #333333, #222222);
709 background-image: linear-gradient(top, #333333, #222222);
710 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
711 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
712 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
713 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
715 header div > ul, .nav {
722 header div > ul > li, .nav > li {
726 header div > ul a, .nav a {
729 padding: 10px 10px 11px;
731 text-decoration: none;
733 header div > ul a:hover, .nav a:hover {
735 text-decoration: none;
737 header div > ul .active > a, .nav .active > a {
738 background-color: #222;
739 background-color: rgba(0, 0, 0, 0.5);
741 header div > ul.secondary-nav, .nav.secondary-nav {
746 header div > ul.secondary-nav .menu-dropdown,
747 .nav.secondary-nav .menu-dropdown,
748 header div > ul.secondary-nav .dropdown-menu,
749 .nav.secondary-nav .dropdown-menu {
753 header div > ul a.menu:hover,
755 header div > ul li.open .menu,
757 header div > ul .dropdown-toggle:hover,
758 .nav .dropdown-toggle:hover,
759 header div > ul .dropdown.open .dropdown-toggle,
760 .nav .dropdown.open .dropdown-toggle {
762 background: rgba(255, 255, 255, 0.05);
764 header div > ul .menu-dropdown,
766 header div > ul .dropdown-menu,
767 .nav .dropdown-menu {
768 background-color: #333;
770 header div > ul .menu-dropdown a.menu,
771 .nav .menu-dropdown a.menu,
772 header div > ul .dropdown-menu a.menu,
773 .nav .dropdown-menu a.menu,
774 header div > ul .menu-dropdown .dropdown-toggle,
775 .nav .menu-dropdown .dropdown-toggle,
776 header div > ul .dropdown-menu .dropdown-toggle,
777 .nav .dropdown-menu .dropdown-toggle {
780 header div > ul .menu-dropdown a.menu.open,
781 .nav .menu-dropdown a.menu.open,
782 header div > ul .dropdown-menu a.menu.open,
783 .nav .dropdown-menu a.menu.open,
784 header div > ul .menu-dropdown .dropdown-toggle.open,
785 .nav .menu-dropdown .dropdown-toggle.open,
786 header div > ul .dropdown-menu .dropdown-toggle.open,
787 .nav .dropdown-menu .dropdown-toggle.open {
789 background: rgba(255, 255, 255, 0.05);
791 header div > ul .menu-dropdown li a,
792 .nav .menu-dropdown li a,
793 header div > ul .dropdown-menu li a,
794 .nav .dropdown-menu li a {
796 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
798 header div > ul .menu-dropdown li a:hover,
799 .nav .menu-dropdown li a:hover,
800 header div > ul .dropdown-menu li a:hover,
801 .nav .dropdown-menu li a:hover {
802 background-color: #191919;
803 background-repeat: repeat-x;
804 background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
805 background-image: -moz-linear-gradient(top, #292929, #191919);
806 background-image: -ms-linear-gradient(top, #292929, #191919);
807 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));
808 background-image: -webkit-linear-gradient(top, #292929, #191919);
809 background-image: -o-linear-gradient(top, #292929, #191919);
810 background-image: linear-gradient(top, #292929, #191919);
811 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
814 header div > ul .menu-dropdown .active a,
815 .nav .menu-dropdown .active a,
816 header div > ul .dropdown-menu .active a,
817 .nav .dropdown-menu .active a {
820 header div > ul .menu-dropdown .divider,
821 .nav .menu-dropdown .divider,
822 header div > ul .dropdown-menu .divider,
823 .nav .dropdown-menu .divider {
824 background-color: #222;
827 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
833 a.menu:after, .dropdown-toggle:after {
836 display: inline-block;
838 text-indent: -99999px;
842 border-left: 4px solid transparent;
843 border-right: 4px solid transparent;
844 border-top: 4px solid #ffffff;
845 filter: alpha(opacity=50);
850 .menu-dropdown, .dropdown-menu {
851 background-color: #ffffff;
865 border-color: rgba(0, 0, 0, 0.2);
867 border-width: 0 1px 1px;
868 -webkit-border-radius: 0 0 6px 6px;
869 -moz-border-radius: 0 0 6px 6px;
870 border-radius: 0 0 6px 6px;
871 -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
872 -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
873 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
874 -webkit-background-clip: padding-box;
875 -moz-background-clip: padding-box;
876 background-clip: padding-box;
878 .menu-dropdown li, .dropdown-menu li {
881 background-color: none;
883 .menu-dropdown .divider, .dropdown-menu .divider {
887 background-color: #eee;
888 border-bottom: 1px solid #ffffff;
890 header .dropdown-menu a, .dropdown-menu a {
897 text-shadow: 0 1px 0 #ffffff;
899 header .dropdown-menu a:hover,
900 .dropdown-menu a:hover,
901 header .dropdown-menu a.hover,
902 .dropdown-menu a.hover {
903 background-color: #dddddd;
904 background-repeat: repeat-x;
905 background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
906 background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
907 background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
908 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
909 background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
910 background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
911 background-image: linear-gradient(top, #eeeeee, #dddddd);
912 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
914 text-decoration: none;
915 -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
916 -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
917 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
920 .dropdown.open .menu,
921 .open .dropdown-toggle,
922 .dropdown.open .dropdown-toggle {
925 background: rgba(0, 0, 0, 0.3);
927 .open .menu-dropdown,
928 .dropdown.open .menu-dropdown,
929 .open .dropdown-menu,
930 .dropdown.open .dropdown-menu {
933 .dropdown:hover ul.dropdown-menu {
936 .dropdown-menu .dropdown-menu {
943 .tabs, .cbi-tabmenu {
957 .tabs:after, .cbi-tabmenu:after {
960 .tabs > li, .cbi-tabmenu > li {
963 .tabs > li > a, .cbi-tabmenu > li > a {
970 border-width: 0 0 1px;
978 .cbi-tabmenu > li > a {
982 border: 1px solid transparent;
983 -webkit-border-radius: 4px 4px 0 0;
984 -moz-border-radius: 4px 4px 0 0;
985 border-radius: 4px 4px 0 0;
987 .tabs > li > a:hover,
988 .cbi-tabmenu > li > a:hover {
989 text-decoration: none;
990 background-color: #eee;
991 border-color: #eee #eee #ddd;
993 .tabs .active > a, .tabs .active > a:hover,
994 .cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover,
995 .cbi-tab > a:link, .cbi-tab > a:hover {
997 background-color: #ffffff;
998 border: 1px solid #ddd;
999 border-bottom-color: transparent;
1002 .tabs .menu-dropdown, .tabs .dropdown-menu,
1003 .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu {
1006 -webkit-border-radius: 0 6px 6px 6px;
1007 -moz-border-radius: 0 6px 6px 6px;
1008 border-radius: 0 6px 6px 6px;
1010 .tabs a.menu:after, .tabs .dropdown-toggle:after,
1011 .cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after {
1012 border-top-color: #999;
1016 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle,
1017 .cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle {
1020 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after,
1021 .cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after {
1022 border-top-color: #555;
1024 .tab-content > .tab-pane,
1025 .tab-content > div {
1028 .tab-content > .active {
1034 background-color: #f5f5f5;
1035 background-repeat: repeat-x;
1036 background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
1037 background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
1038 background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
1039 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
1040 background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
1041 background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
1042 background-image: linear-gradient(top, #ffffff, #f5f5f5);
1043 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
1044 border: 1px solid #ddd;
1045 -webkit-border-radius: 3px;
1046 -moz-border-radius: 3px;
1048 -webkit-box-shadow: inset 0 1px 0 #ffffff;
1049 -moz-box-shadow: inset 0 1px 0 #ffffff;
1050 box-shadow: inset 0 1px 0 #ffffff;
1054 text-shadow: 0 1px 0 #ffffff;
1056 .breadcrumb .divider {
1060 .breadcrumb .active a {
1066 border-top: 1px solid #eee;
1069 .alert-message.danger,
1071 .alert-message.danger:hover,
1073 .alert-message.error,
1075 .alert-message.error:hover,
1077 .alert-message.success,
1079 .alert-message.success:hover,
1081 .alert-message.info,
1083 .alert-message.info:hover {
1086 .btn .close, .alert-message .close {
1087 font-family: Arial, sans-serif;
1091 .alert-message.danger,
1093 .alert-message.error {
1094 background-color: #c43c35;
1095 background-repeat: repeat-x;
1096 background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
1097 background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
1098 background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
1099 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
1100 background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
1101 background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
1102 background-image: linear-gradient(top, #ee5f5b, #c43c35);
1103 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
1104 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1105 border-color: #c43c35 #c43c35 #882a25;
1106 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1108 .btn.success, .alert-message.success {
1109 background-color: #57a957;
1110 background-repeat: repeat-x;
1111 background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
1112 background-image: -moz-linear-gradient(top, #62c462, #57a957);
1113 background-image: -ms-linear-gradient(top, #62c462, #57a957);
1114 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
1115 background-image: -webkit-linear-gradient(top, #62c462, #57a957);
1116 background-image: -o-linear-gradient(top, #62c462, #57a957);
1117 background-image: linear-gradient(top, #62c462, #57a957);
1118 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
1119 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1120 border-color: #57a957 #57a957 #3d773d;
1121 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1123 .btn.info, .alert-message.info {
1124 background-color: #339bb9;
1125 background-repeat: repeat-x;
1126 background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
1127 background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
1128 background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
1129 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
1130 background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
1131 background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
1132 background-image: linear-gradient(top, #5bc0de, #339bb9);
1133 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
1134 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1135 border-color: #339bb9 #339bb9 #22697d;
1136 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1141 display: inline-block;
1142 background-color: #e6e6e6;
1143 background-repeat: no-repeat;
1144 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1145 background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1146 background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1147 background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1148 background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1149 background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1150 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1151 padding: 5px 14px 6px;
1152 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1155 line-height: normal;
1156 border: 1px solid #ccc;
1157 border-bottom-color: #bbb;
1158 -webkit-border-radius: 4px;
1159 -moz-border-radius: 4px;
1161 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1162 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1163 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1168 text-decoration: none;
1172 outline: 1px dotted #666;
1175 .cbi-page-actions .cbi-button-apply,
1176 .cbi-page-actions .cbi-button-save {
1178 background-color: #0064cd;
1179 background-repeat: repeat-x;
1180 background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
1181 background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
1182 background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
1183 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
1184 background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
1185 background-image: -o-linear-gradient(top, #049cdb, #0064cd);
1186 background-image: linear-gradient(top, #049cdb, #0064cd);
1187 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
1188 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1189 border-color: #0064cd #0064cd #003f81;
1190 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1193 background-position: center center;
1194 background-image: url('../resources/cbi/up.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1195 background-image: url('../resources/cbi/up.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1196 background-image: url('../resources/cbi/up.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1197 background-image: url('../resources/cbi/up.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1198 background-image: url('../resources/cbi/up.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1199 background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1202 background-position: center center;
1203 background-image: url('../resources/cbi/down.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1204 background-image: url('../resources/cbi/down.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1205 background-image: url('../resources/cbi/down.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1206 background-image: url('../resources/cbi/down.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1207 background-image: url('../resources/cbi/down.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1208 background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1210 .btn.active, .btn:active {
1211 -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1212 -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1213 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1217 background-image: none;
1218 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1219 filter: alpha(opacity=65);
1220 -khtml-opacity: 0.65;
1223 -webkit-box-shadow: none;
1224 -moz-box-shadow: none;
1229 background-image: none;
1230 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1231 filter: alpha(opacity=65);
1232 -khtml-opacity: 0.65;
1235 -webkit-box-shadow: none;
1236 -moz-box-shadow: none;
1241 line-height: normal;
1242 padding: 9px 14px 9px;
1243 -webkit-border-radius: 6px;
1244 -moz-border-radius: 6px;
1248 padding: 7px 9px 7px;
1251 /* Button icons for specific pages */
1252 .Startup .cbi-section-table input.cbi-input-apply,
1253 .Startup .cbi-section-table input.cbi-button-apply {
1254 background-image: url("../resources/cbi/apply.gif");
1255 background-position: 7px 4px;
1256 padding: 3px 9px 3px 27px;
1258 .Processes .cbi-section-table input.cbi-input-reload,
1259 .Startup .cbi-section-table input.cbi-input-reload {
1260 background-image: url("../resources/cbi/reload.gif");
1261 background-position: 7px 4px;
1262 padding: 3px 9px 3px 27px;
1264 .Processes .cbi-section-table input.cbi-input-remove,
1265 .Processes .cbi-section-table div.cbi-section-remove input,
1266 .Startup .cbi-section-table input.cbi-input-remove,
1267 .Startup .cbi-section-table div.cbi-section-remove input {
1268 background-image: url("../resources/cbi/remove.gif");
1269 background-position: 7px 4px;
1270 padding: 3px 9px 3px 27px;
1272 .Processes .cbi-section-table input.cbi-input-reset,
1273 .Processes .cbi-section-table input.cbi-button-reset,
1274 .Startup .cbi-section-table input.cbi-input-reset,
1275 .Startup .cbi-section-table input.cbi-button-reset {
1276 background-image: url("../resources/cbi/reset.gif");
1277 background-position: 7px 4px;
1278 padding: 3px 9px 3px 27px;
1280 .Startup .cbi-section-table input.cbi-input-save,
1281 .Startup .cbi-section-table input.cbi-button-save {
1282 background-image: url("../resources/cbi/save.gif");
1283 background-position: 7px 4px;
1284 padding: 3px 9px 3px 27px;
1286 :root .alert-message, :root .btn {
1287 border-radius: 0 \0;
1289 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1298 line-height: 13.5px;
1299 text-shadow: 0 1px 0 #ffffff;
1300 filter: alpha(opacity=25);
1301 -khtml-opacity: 0.25;
1307 text-decoration: none;
1308 filter: alpha(opacity=40);
1309 -khtml-opacity: 0.4;
1316 margin-bottom: 18px;
1318 background-color: #eedc94;
1319 background-repeat: repeat-x;
1320 background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
1321 background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
1322 background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
1323 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
1324 background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
1325 background-image: -o-linear-gradient(top, #fceec1, #eedc94);
1326 background-image: linear-gradient(top, #fceec1, #eedc94);
1327 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
1328 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1329 border-color: #eedc94 #eedc94 #e4c652;
1330 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1331 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1333 border-style: solid;
1334 -webkit-border-radius: 4px;
1335 -moz-border-radius: 4px;
1337 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1338 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1339 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1341 .alert-message .close {
1349 .alert-message.danger p a,
1350 .alert-message.error p a,
1351 .alert-message.success p a,
1352 .alert-message.info p a {
1361 .alert-message div {
1366 .alert-message .btn {
1367 -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1368 -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1369 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1372 padding: 1px 3px 2px;
1375 color: #ffffff !important;
1376 text-transform: uppercase;
1377 white-space: nowrap;
1378 background-color: #bfbfbf;
1379 -webkit-border-radius: 3px;
1380 -moz-border-radius: 3px;
1389 text-decoration: none;
1392 background-color: #c43c35;
1395 background-color: #f89406;
1398 background-color: #46a546;
1401 background-color: #62cffc;
1403 /* LuCI specific items */
1404 .hidden { display: none }
1410 border: 1px solid #CCCCCC;
1411 border-radius: 3px 3px 3px 3px;
1413 display: inline-block;
1421 form.inline { display: inline }
1422 header .pull-right { padding-top: 8px; }
1423 #modemenu li:last-child span.divider { display: none }
1424 #syslog { width: 100%; }
1425 .cbi-section-table tbody tr:nth-child(odd) td, .cbi-section-table tbody tr:nth-child(odd) th {
1426 background-color: #f9f9f9;
1428 .cbi-section-table tbody tr:hover td, .cbi-section-table tbody tr:hover th {
1429 background-color: #f5f5f5;
1431 .left { text-align: left !important; }
1432 .right { text-align: right !important; }
1433 .cbi-value-field { line-height: 1.5em; }
1434 .cbi-value-field input[type=checkbox],
1435 .cbi-value-field input[type=radio] {
1440 .cbi-value-field table td {
1443 table.cbi-section-table input,
1444 table.cbi-section-table textarea,
1445 table.cbi-section-table select {
1448 table.cbi-section-table td.cbi-section-table-cell {
1449 white-space: nowrap;
1452 .cbi-value-description { display: inline; }
1453 .cbi-value-description img { vertical-align: middle; }
1455 background-color: #FFFFFF;
1456 border: 1px solid #CCCCCC;
1459 white-space: nowrap;
1460 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1461 background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1462 background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1463 background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1464 background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1465 background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1466 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1467 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1468 -webkit-border-radius: 4px;
1469 -moz-border-radius: 4px;
1471 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1472 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1473 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1475 .ifacebox .ifacebox-head {
1476 border-bottom: 1px solid #CCCCCC;
1479 .ifacebox .ifacebox-body {
1483 display: inline-block;
1484 white-space: nowrap;
1485 background-color: #FFFFFF;
1486 border: 1px solid #CCCCCC;
1489 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1490 background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1491 background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1492 background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1493 background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1494 background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1495 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1496 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1497 -webkit-border-radius: 4px;
1498 -moz-border-radius: 4px;
1500 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1501 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1502 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1504 .ifacebadge-active {
1505 border-color: #000000;
1511 display: inline-block;
1512 white-space: nowrap;
1514 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1520 display: inline-block;
1527 border: 1px dashed #AAAAAA;
1533 td.cbi-value-field var {