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 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
21 h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, q, s,
22 small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset,
23 form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {
34 abbr[title], acronym[title] {
35 border-bottom: 1px dotted;
40 border-collapse: collapse;
58 -webkit-text-size-adjust: 100%;
59 -ms-text-size-adjust: 100%;
87 vertical-align: baseline;
100 -ms-interpolation-mode: bicubic;
109 vertical-align: baseline;
110 *vertical-align: middle;
118 button::-moz-focus-inner, input::-moz-focus-inner {
124 input[type="button"],
126 input[type="submit"] {
128 -webkit-appearance: button;
131 input[type="search"] {
132 -webkit-appearance: textfield;
133 -webkit-box-sizing: content-box;
134 -moz-box-sizing: content-box;
135 box-sizing: content-box;
138 input[type="search"]::-webkit-search-decoration {
139 -webkit-appearance: none;
149 * Basic and global styles for generating a grid system, structural layout, and page templates
150 * ------------------------------------------------------------------------------------------- */
152 background-color: #ffffff;
154 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
170 .container:before, .container:after {
182 text-decoration: none;
183 line-height: inherit;
184 font-weight: inherit;
189 text-decoration: underline;
201 * Headings, body text, lists, code, and more for a versatile and durable typography system
202 * ---------------------------------------------------------------------------------------- */
285 text-transform: uppercase;
289 margin: 0 0 18px 25px;
336 border-bottom: 1px solid #eee;
346 font-weight: inherit;
347 line-height: inherit;
350 small { font-size: 0.9em }
360 font-family: Monaco, Andale Mono, Courier New, monospace;
362 -webkit-border-radius: 3px;
363 -moz-border-radius: 3px;
368 background-color: #fee9cc;
369 color: rgba(0, 0, 0, 0.75);
374 background-color: #f5f5f5;
380 border: 1px solid #ccc;
381 border: 1px solid rgba(0, 0, 0, 0.15);
382 -webkit-border-radius: 3px;
383 -moz-border-radius: 3px;
386 white-space: pre-wrap;
387 word-wrap: break-word;
391 * Base styles for various input types, form layouts, and states
392 * ------------------------------------------------------------- */
408 *padding: 0 0 5px 0px;
423 form .clearfix:before, form .clearfix:after,
424 form .cbi-value:before, form .cbi-value:after {
431 form .cbi-value:after {
439 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
446 form .cbi-value-field {
450 form .cbi-value label.cbi-value-title {
460 input[type=checkbox], input[type=radio] {
468 display: inline-block;
475 border: 1px solid #ccc;
476 -webkit-border-radius: 3px;
477 -moz-border-radius: 3px;
485 input[type=checkbox], input[type=radio] {
498 background-color: #ffffff;
501 line-height: initial;
502 -webkit-box-shadow: none;
503 -moz-box-shadow: none;
507 input[type=button], input[type=reset], input[type=submit] {
512 select, input[type=file] {
517 /* For IE7, add top margin to align select with labels */
522 background-color: #ffffff;
530 background-color: #ffffff;
533 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
534 -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
535 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
543 ::-webkit-input-placeholder {
548 -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
549 -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
550 -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
551 -o-transition: border linear 0.2s, box-shadow linear 0.2s;
552 transition: border linear 0.2s, box-shadow linear 0.2s;
553 -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
554 -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
555 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
558 input:focus, textarea:focus {
560 border-color: rgba(82, 168, 236, 0.8);
561 -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
562 -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
563 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
566 input[type=file]:focus, input[type=checkbox]:focus, select:focus {
567 -webkit-box-shadow: none;
568 -moz-box-shadow: none;
570 outline: 1px dotted #666;
573 form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline {
577 form .clearfix.error input, form .clearfix.error textarea {
579 border-color: #ee5f5b;
582 form .clearfix.error input:focus, form .clearfix.error textarea:focus {
583 border-color: #e9322d;
584 -webkit-box-shadow: 0 0 6px #f8b9b7;
585 -moz-box-shadow: 0 0 6px #f8b9b7;
586 box-shadow: 0 0 6px #f8b9b7;
589 form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on {
591 background-color: #fce6e6;
592 border-color: #b94a48;
595 form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline {
599 form .clearfix.warning input, form .clearfix.warning textarea {
601 border-color: #ccae64;
604 form .clearfix.warning input:focus, form .clearfix.warning textarea:focus {
605 border-color: #be9a3f;
606 -webkit-box-shadow: 0 0 6px #e5d6b1;
607 -moz-box-shadow: 0 0 6px #e5d6b1;
608 box-shadow: 0 0 6px #e5d6b1;
611 form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on {
613 background-color: #d2b877;
614 border-color: #c09853;
617 form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline {
621 form .clearfix.success input, form .clearfix.success textarea {
623 border-color: #57a957;
626 form .clearfix.success input:focus, form .clearfix.success textarea:focus {
627 border-color: #458845;
628 -webkit-box-shadow: 0 0 6px #9acc9a;
629 -moz-box-shadow: 0 0 6px #9acc9a;
630 box-shadow: 0 0 6px #9acc9a;
633 form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on {
635 background-color: #bcddbc;
636 border-color: #468847;
645 background-color: #f5f5f5;
653 padding: 17px 20px 18px 150px;
654 border-top: 1px solid #ddd;
655 -webkit-border-radius: 0 0 3px 3px;
656 -moz-border-radius: 0 0 3px 3px;
657 border-radius: 0 0 3px 3px;
661 .actions .secondary-action,
662 .cbi-page-actions .secondary-action{
666 .actions .secondary-action a,
667 .cbi-page-actions .secondary-action a {
671 .actions .secondary-action a:hover,
672 .cbi-page-actions .secondary-action a:hover {
673 text-decoration: underline;
676 .help-inline, .help-block {
699 * Tables for, you guessed it, tabular data
700 * ---------------------------------------- */
706 border-collapse: collapse;
710 padding: 10px 10px 9px;
718 vertical-align: middle;
723 border-top: 1px solid #ddd;
727 border-top: 1px solid #ddd;
732 * Repeatable UI elements outside the base styles provided from the scaffolding
733 * ---------------------------------------------------------------------------- */
747 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
750 header h3 a:hover, header .brand:hover, header ul .active > a {
751 background-color: #333;
752 background-color: rgba(255, 255, 255, 0.05);
754 text-decoration: none;
761 header h3 a, header .brand {
764 padding: 8px 20px 12px;
778 background-color: #222;
779 background-color: #222222;
780 background-repeat: repeat-x;
781 background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
782 background-image: -moz-linear-gradient(top, #333333, #222222);
783 background-image: -ms-linear-gradient(top, #333333, #222222);
784 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
785 background-image: -webkit-linear-gradient(top, #333333, #222222);
786 background-image: -o-linear-gradient(top, #333333, #222222);
787 background-image: linear-gradient(top, #333333, #222222);
788 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
789 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
790 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
791 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
794 header div > ul, .nav {
802 header div > ul > li, .nav > li {
807 header div > ul a, .nav a {
810 padding: 10px 10px 11px;
812 text-decoration: none;
815 header div > ul a:hover, .nav a:hover {
817 text-decoration: none;
820 header div > ul .active > a, .nav .active > a {
821 background-color: #222;
822 background-color: rgba(0, 0, 0, 0.5);
825 header div > ul.secondary-nav, .nav.secondary-nav {
831 header div > ul.secondary-nav .menu-dropdown,
832 .nav.secondary-nav .menu-dropdown,
833 header div > ul.secondary-nav .dropdown-menu,
834 .nav.secondary-nav .dropdown-menu {
839 header div > ul a.menu:hover,
841 header div > ul li.open .menu,
843 header div > ul .dropdown-toggle:hover,
844 .nav .dropdown-toggle:hover,
845 header div > ul .dropdown.open .dropdown-toggle,
846 .nav .dropdown.open .dropdown-toggle {
848 background: rgba(255, 255, 255, 0.05);
851 header div > ul .menu-dropdown,
853 header div > ul .dropdown-menu,
854 .nav .dropdown-menu {
855 background-color: #333;
858 header div > ul .menu-dropdown a.menu,
859 .nav .menu-dropdown a.menu,
860 header div > ul .dropdown-menu a.menu,
861 .nav .dropdown-menu a.menu,
862 header div > ul .menu-dropdown .dropdown-toggle,
863 .nav .menu-dropdown .dropdown-toggle,
864 header div > ul .dropdown-menu .dropdown-toggle,
865 .nav .dropdown-menu .dropdown-toggle {
869 header div > ul .menu-dropdown a.menu.open,
870 .nav .menu-dropdown a.menu.open,
871 header div > ul .dropdown-menu a.menu.open,
872 .nav .dropdown-menu a.menu.open,
873 header div > ul .menu-dropdown .dropdown-toggle.open,
874 .nav .menu-dropdown .dropdown-toggle.open,
875 header div > ul .dropdown-menu .dropdown-toggle.open,
876 .nav .dropdown-menu .dropdown-toggle.open {
878 background: rgba(255, 255, 255, 0.05);
881 header div > ul .menu-dropdown li a,
882 .nav .menu-dropdown li a,
883 header div > ul .dropdown-menu li a,
884 .nav .dropdown-menu li a {
886 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
889 header div > ul .menu-dropdown li a:hover,
890 .nav .menu-dropdown li a:hover,
891 header div > ul .dropdown-menu li a:hover,
892 .nav .dropdown-menu li a:hover {
893 background-color: #191919;
894 background-repeat: repeat-x;
895 background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
896 background-image: -moz-linear-gradient(top, #292929, #191919);
897 background-image: -ms-linear-gradient(top, #292929, #191919);
898 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));
899 background-image: -webkit-linear-gradient(top, #292929, #191919);
900 background-image: -o-linear-gradient(top, #292929, #191919);
901 background-image: linear-gradient(top, #292929, #191919);
902 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
906 header div > ul .menu-dropdown .active a,
907 .nav .menu-dropdown .active a,
908 header div > ul .dropdown-menu .active a,
909 .nav .dropdown-menu .active a {
913 header div > ul .menu-dropdown .divider,
914 .nav .menu-dropdown .divider,
915 header div > ul .dropdown-menu .divider,
916 .nav .dropdown-menu .divider {
917 background-color: #222;
921 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
929 a.menu:after, .dropdown-toggle:after {
932 display: inline-block;
934 text-indent: -99999px;
938 border-left: 4px solid transparent;
939 border-right: 4px solid transparent;
940 border-top: 4px solid #ffffff;
941 filter: alpha(opacity=50);
947 .menu-dropdown, .dropdown-menu {
948 background-color: #ffffff;
962 border-color: rgba(0, 0, 0, 0.2);
964 border-width: 0 1px 1px;
965 -webkit-border-radius: 0 0 6px 6px;
966 -moz-border-radius: 0 0 6px 6px;
967 border-radius: 0 0 6px 6px;
968 -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
969 -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
970 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
971 -webkit-background-clip: padding-box;
972 -moz-background-clip: padding-box;
973 background-clip: padding-box;
976 .menu-dropdown li, .dropdown-menu li {
979 background-color: none;
982 .menu-dropdown .divider, .dropdown-menu .divider {
986 background-color: #eee;
987 border-bottom: 1px solid #ffffff;
990 header .dropdown-menu a, .dropdown-menu a {
997 text-shadow: 0 1px 0 #ffffff;
1000 header .dropdown-menu a:hover,
1001 .dropdown-menu a:hover,
1002 header .dropdown-menu a.hover,
1003 .dropdown-menu a.hover {
1004 background-color: #dddddd;
1005 background-repeat: repeat-x;
1006 background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
1007 background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
1008 background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
1009 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
1010 background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
1011 background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
1012 background-image: linear-gradient(top, #eeeeee, #dddddd);
1013 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
1015 text-decoration: none;
1016 -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
1017 -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
1018 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
1022 .dropdown.open .menu,
1023 .open .dropdown-toggle,
1024 .dropdown.open .dropdown-toggle {
1027 background: rgba(0, 0, 0, 0.3);
1030 .open .menu-dropdown,
1031 .dropdown.open .menu-dropdown,
1032 .open .dropdown-menu,
1033 .dropdown.open .dropdown-menu {
1037 .dropdown:hover ul.dropdown-menu {
1041 .dropdown-menu .dropdown-menu {
1050 .tabs, .cbi-tabmenu {
1058 .cbi-tabmenu:before,
1060 .cbi-tabmenu:after {
1066 .tabs:after, .cbi-tabmenu:after {
1070 .tabs > li, .cbi-tabmenu > li {
1074 .tabs > li > a, .cbi-tabmenu > li > a {
1081 border-style: solid;
1082 border-width: 0 0 1px;
1088 margin-bottom: -1px;
1092 .cbi-tabmenu > li > a {
1096 border: 1px solid transparent;
1097 -webkit-border-radius: 4px 4px 0 0;
1098 -moz-border-radius: 4px 4px 0 0;
1099 border-radius: 4px 4px 0 0;
1102 .tabs > li > a:hover,
1103 .cbi-tabmenu > li > a:hover {
1104 text-decoration: none;
1105 background-color: #eee;
1106 border-color: #eee #eee #ddd;
1109 .tabs .active > a, .tabs .active > a:hover,
1110 .cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover,
1111 .cbi-tab > a:link, .cbi-tab > a:hover {
1113 background-color: #ffffff;
1114 border: 1px solid #ddd;
1115 border-bottom-color: transparent;
1119 .tabs .menu-dropdown, .tabs .dropdown-menu,
1120 .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu {
1123 -webkit-border-radius: 0 6px 6px 6px;
1124 -moz-border-radius: 0 6px 6px 6px;
1125 border-radius: 0 6px 6px 6px;
1128 .tabs a.menu:after, .tabs .dropdown-toggle:after,
1129 .cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after {
1130 border-top-color: #999;
1135 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle,
1136 .cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle {
1140 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after,
1141 .cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after {
1142 border-top-color: #555;
1145 .tab-content > .tab-pane,
1146 .tab-content > div {
1150 .tab-content > .active {
1157 background-color: #f5f5f5;
1158 background-repeat: repeat-x;
1159 background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
1160 background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
1161 background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
1162 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
1163 background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
1164 background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
1165 background-image: linear-gradient(top, #ffffff, #f5f5f5);
1166 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
1167 border: 1px solid #ddd;
1168 -webkit-border-radius: 3px;
1169 -moz-border-radius: 3px;
1171 -webkit-box-shadow: inset 0 1px 0 #ffffff;
1172 -moz-box-shadow: inset 0 1px 0 #ffffff;
1173 box-shadow: inset 0 1px 0 #ffffff;
1178 text-shadow: 0 1px 0 #ffffff;
1181 .breadcrumb .divider {
1186 .breadcrumb .active a {
1193 border-top: 1px solid #eee;
1197 .alert-message.danger,
1199 .alert-message.danger:hover,
1201 .alert-message.error,
1203 .alert-message.error:hover,
1205 .alert-message.success,
1207 .alert-message.success:hover,
1209 .alert-message.info,
1211 .alert-message.info:hover {
1215 .btn .close, .alert-message .close {
1216 font-family: Arial, sans-serif;
1221 .alert-message.danger,
1223 .alert-message.error {
1224 background-color: #c43c35;
1225 background-repeat: repeat-x;
1226 background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
1227 background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
1228 background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
1229 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
1230 background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
1231 background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
1232 background-image: linear-gradient(top, #ee5f5b, #c43c35);
1233 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
1234 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1235 border-color: #c43c35 #c43c35 #882a25;
1236 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1239 .btn.success, .alert-message.success {
1240 background-color: #57a957;
1241 background-repeat: repeat-x;
1242 background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
1243 background-image: -moz-linear-gradient(top, #62c462, #57a957);
1244 background-image: -ms-linear-gradient(top, #62c462, #57a957);
1245 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
1246 background-image: -webkit-linear-gradient(top, #62c462, #57a957);
1247 background-image: -o-linear-gradient(top, #62c462, #57a957);
1248 background-image: linear-gradient(top, #62c462, #57a957);
1249 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
1250 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1251 border-color: #57a957 #57a957 #3d773d;
1252 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1255 .btn.info, .alert-message.info {
1256 background-color: #339bb9;
1257 background-repeat: repeat-x;
1258 background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
1259 background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
1260 background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
1261 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
1262 background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
1263 background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
1264 background-image: linear-gradient(top, #5bc0de, #339bb9);
1265 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
1266 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1267 border-color: #339bb9 #339bb9 #22697d;
1268 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1274 display: inline-block;
1275 background-color: #e6e6e6;
1276 background-repeat: no-repeat;
1277 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1278 background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1279 background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1280 background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1281 background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1282 background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1283 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1284 padding: 5px 14px 6px;
1285 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1288 line-height: normal;
1289 border: 1px solid #ccc;
1290 border-bottom-color: #bbb;
1291 -webkit-border-radius: 4px;
1292 -moz-border-radius: 4px;
1294 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1295 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1296 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1302 text-decoration: none;
1307 outline: 1px dotted #666;
1311 .cbi-page-actions .cbi-button-apply,
1312 .cbi-page-actions .cbi-button-save {
1314 background-color: #0064cd;
1315 background-repeat: repeat-x;
1316 background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
1317 background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
1318 background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
1319 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
1320 background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
1321 background-image: -o-linear-gradient(top, #049cdb, #0064cd);
1322 background-image: linear-gradient(top, #049cdb, #0064cd);
1323 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
1324 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1325 border-color: #0064cd #0064cd #003f81;
1326 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1330 background-position: center center;
1331 background-image: url('../resources/cbi/up.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1332 background-image: url('../resources/cbi/up.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1333 background-image: url('../resources/cbi/up.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1334 background-image: url('../resources/cbi/up.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1335 background-image: url('../resources/cbi/up.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1336 background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1340 background-position: center center;
1341 background-image: url('../resources/cbi/down.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1342 background-image: url('../resources/cbi/down.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1343 background-image: url('../resources/cbi/down.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1344 background-image: url('../resources/cbi/down.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1345 background-image: url('../resources/cbi/down.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1346 background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1349 .btn.active, .btn:active {
1350 -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1351 -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1352 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1357 background-image: none;
1358 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1359 filter: alpha(opacity=65);
1360 -khtml-opacity: 0.65;
1363 -webkit-box-shadow: none;
1364 -moz-box-shadow: none;
1370 background-image: none;
1371 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1372 filter: alpha(opacity=65);
1373 -khtml-opacity: 0.65;
1376 -webkit-box-shadow: none;
1377 -moz-box-shadow: none;
1383 line-height: normal;
1384 padding: 9px 14px 9px;
1385 -webkit-border-radius: 6px;
1386 -moz-border-radius: 6px;
1391 padding: 7px 9px 7px;
1395 /* Button icons for specific pages */
1396 .Startup .cbi-section-table input.cbi-input-apply,
1397 .Startup .cbi-section-table input.cbi-button-apply {
1398 background-image: url("../resources/cbi/apply.gif");
1399 background-position: 7px 4px;
1400 padding: 3px 9px 3px 27px;
1403 .Processes .cbi-section-table input.cbi-input-reload,
1404 .Startup .cbi-section-table input.cbi-input-reload {
1405 background-image: url("../resources/cbi/reload.gif");
1406 background-position: 7px 4px;
1407 padding: 3px 9px 3px 27px;
1410 .Processes .cbi-section-table input.cbi-input-remove,
1411 .Processes .cbi-section-table div.cbi-section-remove input,
1412 .Startup .cbi-section-table input.cbi-input-remove,
1413 .Startup .cbi-section-table div.cbi-section-remove input {
1414 background-image: url("../resources/cbi/remove.gif");
1415 background-position: 7px 4px;
1416 padding: 3px 9px 3px 27px;
1419 .Processes .cbi-section-table input.cbi-input-reset,
1420 .Processes .cbi-section-table input.cbi-button-reset,
1421 .Startup .cbi-section-table input.cbi-input-reset,
1422 .Startup .cbi-section-table input.cbi-button-reset {
1423 background-image: url("../resources/cbi/reset.gif");
1424 background-position: 7px 4px;
1425 padding: 3px 9px 3px 27px;
1428 .Startup .cbi-section-table input.cbi-input-save,
1429 .Startup .cbi-section-table input.cbi-button-save {
1430 background-image: url("../resources/cbi/save.gif");
1431 background-position: 7px 4px;
1432 padding: 3px 9px 3px 27px;
1435 :root .alert-message, :root .btn {
1436 border-radius: 0 \0;
1439 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1449 line-height: 13.5px;
1450 text-shadow: 0 1px 0 #ffffff;
1451 filter: alpha(opacity=25);
1452 -khtml-opacity: 0.25;
1459 text-decoration: none;
1460 filter: alpha(opacity=40);
1461 -khtml-opacity: 0.4;
1469 margin-bottom: 18px;
1471 background-color: #eedc94;
1472 background-repeat: repeat-x;
1473 background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
1474 background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
1475 background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
1476 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
1477 background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
1478 background-image: -o-linear-gradient(top, #fceec1, #eedc94);
1479 background-image: linear-gradient(top, #fceec1, #eedc94);
1480 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
1481 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1482 border-color: #eedc94 #eedc94 #e4c652;
1483 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1484 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1486 border-style: solid;
1487 -webkit-border-radius: 4px;
1488 -moz-border-radius: 4px;
1490 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1491 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1492 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1495 .alert-message .close {
1505 .alert-message.danger p a,
1506 .alert-message.error p a,
1507 .alert-message.success p a,
1508 .alert-message.info p a {
1520 .alert-message div {
1526 .alert-message .btn {
1527 -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1528 -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1529 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1533 padding: 1px 3px 2px;
1536 color: #ffffff !important;
1537 text-transform: uppercase;
1538 white-space: nowrap;
1539 background-color: #bfbfbf;
1540 -webkit-border-radius: 3px;
1541 -moz-border-radius: 3px;
1552 text-decoration: none;
1556 background-color: #c43c35;
1560 background-color: #f89406;
1564 background-color: #46a546;
1568 background-color: #62cffc;
1571 /* LuCI specific items */
1572 .hidden { display: none }
1579 border: 1px solid #CCCCCC;
1580 border-radius: 3px 3px 3px 3px;
1582 display: inline-block;
1592 form.inline { display: inline }
1594 header .pull-right { padding-top: 8px; }
1596 #modemenu li:last-child span.divider { display: none }
1598 #syslog { width: 100%; }
1600 .cbi-section-table tbody tr:nth-child(odd) td, .cbi-section-table tbody tr:nth-child(odd) th {
1601 background-color: #f9f9f9;
1604 .cbi-section-table tbody tr:hover td, .cbi-section-table tbody tr:hover th {
1605 background-color: #f5f5f5;
1608 .left { text-align: left !important; }
1610 .right { text-align: right !important; }
1612 .cbi-value-field { line-height: 1.5em; }
1614 .cbi-value-field input[type=checkbox],
1615 .cbi-value-field input[type=radio] {
1621 .cbi-value-field table td {
1625 table.cbi-section-table input,
1626 table.cbi-section-table textarea,
1627 table.cbi-section-table select {
1631 table.cbi-section-table td.cbi-section-table-cell {
1632 white-space: nowrap;
1636 .cbi-value-description { display: inline; }
1638 .cbi-value-description img { vertical-align: middle; }
1641 background-color: #FFFFFF;
1642 border: 1px solid #CCCCCC;
1645 white-space: nowrap;
1646 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1647 background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1648 background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1649 background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1650 background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1651 background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1652 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1653 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1654 -webkit-border-radius: 4px;
1655 -moz-border-radius: 4px;
1657 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1658 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1659 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1662 .ifacebox .ifacebox-head {
1663 border-bottom: 1px solid #CCCCCC;
1667 .ifacebox .ifacebox-body {
1672 display: inline-block;
1673 white-space: nowrap;
1674 background-color: #FFFFFF;
1675 border: 1px solid #CCCCCC;
1678 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1679 background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1680 background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1681 background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1682 background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1683 background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1684 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1685 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1686 -webkit-border-radius: 4px;
1687 -moz-border-radius: 4px;
1689 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1690 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1691 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1694 .ifacebadge-active {
1695 border-color: #000000;
1702 display: inline-block;
1703 white-space: nowrap;
1705 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1712 display: inline-block;
1721 border: 1px dashed #AAAAAA;
1728 td.cbi-value-field var {
1734 font-family: monospace;
1737 .uci-change-list ins,
1738 .uci-change-legend-label ins {
1739 text-decoration: none;
1740 border: 1px solid #00FF00;
1741 background-color: #CCFFCC;
1746 .uci-change-list del,
1747 .uci-change-legend-label del {
1748 text-decoration: none;
1749 border: 1px solid #FF0000;
1750 background-color: #FFCCCC;
1756 .uci-change-list var,
1757 .uci-change-legend-label var {
1758 text-decoration: none;
1759 border: 1px solid #CCCCCC;
1760 background-color: #EEEEEE;
1766 .uci-change-list var ins,
1767 .uci-change-list var del {
1768 /*display: inline;*/
1775 .uci-change-legend {
1779 .uci-change-legend-label {
1784 .uci-change-legend-label>ins,
1785 .uci-change-legend-label>del,
1786 .uci-change-legend-label>var {
1794 .uci-change-legend-label var ins,
1795 .uci-change-legend-label var del {