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,
1313 .cbi-page-actions .cbi-button-reset {
1315 padding: 5px 14px 6px;
1316 background-color: #0064cd;
1317 background-repeat: repeat-x;
1318 background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
1319 background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
1320 background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
1321 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
1322 background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
1323 background-image: -o-linear-gradient(top, #049cdb, #0064cd);
1324 background-image: linear-gradient(top, #049cdb, #0064cd);
1325 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
1326 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1327 border-color: #0064cd #0064cd #003f81;
1328 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1331 .cbi-input-invalid {
1333 border-color: #FF0000;
1338 background-position: center center;
1339 background-image: url('../resources/cbi/up.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1340 background-image: url('../resources/cbi/up.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1341 background-image: url('../resources/cbi/up.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1342 background-image: url('../resources/cbi/up.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1343 background-image: url('../resources/cbi/up.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1344 background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1349 background-position: center center;
1350 background-image: url('../resources/cbi/down.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1351 background-image: url('../resources/cbi/down.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1352 background-image: url('../resources/cbi/down.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1353 background-image: url('../resources/cbi/down.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1354 background-image: url('../resources/cbi/down.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1355 background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1360 background-position: 6px center, left top;
1362 background-image: url('../resources/cbi/find.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1363 background-image: url('../resources/cbi/find.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1364 background-image: url('../resources/cbi/find.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1365 background-image: url('../resources/cbi/find.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1366 background-image: url('../resources/cbi/find.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1367 background-image: url('../resources/cbi/find.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1372 background-position: 6px center, left top;
1374 background-image: url('../resources/cbi/add.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1375 background-image: url('../resources/cbi/add.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1376 background-image: url('../resources/cbi/add.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1377 background-image: url('../resources/cbi/add.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1378 background-image: url('../resources/cbi/add.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1379 background-image: url('../resources/cbi/add.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1384 background-position: 6px center, left top;
1386 background-image: url('../resources/cbi/apply.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1387 background-image: url('../resources/cbi/apply.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1388 background-image: url('../resources/cbi/apply.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1389 background-image: url('../resources/cbi/apply.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1390 background-image: url('../resources/cbi/apply.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1391 background-image: url('../resources/cbi/apply.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1396 background-position: 6px center, left top;
1398 background-image: url('../resources/cbi/reset.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1399 background-image: url('../resources/cbi/reset.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1400 background-image: url('../resources/cbi/reset.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1401 background-image: url('../resources/cbi/reset.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1402 background-image: url('../resources/cbi/reset.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1403 background-image: url('../resources/cbi/reset.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1408 background-position: 6px center, left top;
1410 background-image: url('../resources/cbi/edit.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1411 background-image: url('../resources/cbi/edit.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1412 background-image: url('../resources/cbi/edit.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1413 background-image: url('../resources/cbi/edit.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1414 background-image: url('../resources/cbi/edit.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1415 background-image: url('../resources/cbi/edit.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1420 background-position: 6px center, left top;
1422 background-image: url('../resources/cbi/remove.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1423 background-image: url('../resources/cbi/remove.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1424 background-image: url('../resources/cbi/remove.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1425 background-image: url('../resources/cbi/remove.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1426 background-image: url('../resources/cbi/remove.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1427 background-image: url('../resources/cbi/remove.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1432 background-position: 6px center, left top;
1434 background-image: url('../resources/cbi/reload.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1435 background-image: url('../resources/cbi/reload.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1436 background-image: url('../resources/cbi/reload.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1437 background-image: url('../resources/cbi/reload.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1438 background-image: url('../resources/cbi/reload.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1439 background-image: url('../resources/cbi/reload.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1444 background-position: 6px center, left top;
1446 background-image: url('../resources/cbi/link.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1447 background-image: url('../resources/cbi/link.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1448 background-image: url('../resources/cbi/link.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1449 background-image: url('../resources/cbi/link.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1450 background-image: url('../resources/cbi/link.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1451 background-image: url('../resources/cbi/link.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1454 .btn.active, .btn:active {
1455 -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1456 -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1457 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1462 background-image: none;
1463 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1464 filter: alpha(opacity=65);
1465 -khtml-opacity: 0.65;
1468 -webkit-box-shadow: none;
1469 -moz-box-shadow: none;
1475 background-image: none;
1476 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1477 filter: alpha(opacity=65);
1478 -khtml-opacity: 0.65;
1481 -webkit-box-shadow: none;
1482 -moz-box-shadow: none;
1488 line-height: normal;
1489 padding: 9px 14px 9px;
1490 -webkit-border-radius: 6px;
1491 -moz-border-radius: 6px;
1496 padding: 7px 9px 7px;
1500 /* Button icons for specific pages */
1501 .Startup .cbi-section-table input.cbi-input-apply,
1502 .Startup .cbi-section-table input.cbi-button-apply {
1503 background-image: url("../resources/cbi/apply.gif");
1504 background-position: 7px 4px;
1505 padding: 3px 9px 3px 27px;
1508 .Processes .cbi-section-table input.cbi-input-reload,
1509 .Startup .cbi-section-table input.cbi-input-reload {
1510 background-image: url("../resources/cbi/reload.gif");
1511 background-position: 7px 4px;
1512 padding: 3px 9px 3px 27px;
1515 .Processes .cbi-section-table input.cbi-input-remove,
1516 .Processes .cbi-section-table div.cbi-section-remove input,
1517 .Startup .cbi-section-table input.cbi-input-remove,
1518 .Startup .cbi-section-table div.cbi-section-remove input {
1519 background-image: url("../resources/cbi/remove.gif");
1520 background-position: 7px 4px;
1521 padding: 3px 9px 3px 27px;
1524 .Processes .cbi-section-table input.cbi-input-reset,
1525 .Processes .cbi-section-table input.cbi-button-reset,
1526 .Startup .cbi-section-table input.cbi-input-reset,
1527 .Startup .cbi-section-table input.cbi-button-reset {
1528 background-image: url("../resources/cbi/reset.gif");
1529 background-position: 7px 4px;
1530 padding: 3px 9px 3px 27px;
1533 .Startup .cbi-section-table input.cbi-input-save,
1534 .Startup .cbi-section-table input.cbi-button-save {
1535 background-image: url("../resources/cbi/save.gif");
1536 background-position: 7px 4px;
1537 padding: 3px 9px 3px 27px;
1540 :root .alert-message, :root .btn {
1541 border-radius: 0 \0;
1544 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1554 line-height: 13.5px;
1555 text-shadow: 0 1px 0 #ffffff;
1556 filter: alpha(opacity=25);
1557 -khtml-opacity: 0.25;
1564 text-decoration: none;
1565 filter: alpha(opacity=40);
1566 -khtml-opacity: 0.4;
1574 margin-bottom: 18px;
1576 background-color: #eedc94;
1577 background-repeat: repeat-x;
1578 background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
1579 background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
1580 background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
1581 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
1582 background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
1583 background-image: -o-linear-gradient(top, #fceec1, #eedc94);
1584 background-image: linear-gradient(top, #fceec1, #eedc94);
1585 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
1586 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1587 border-color: #eedc94 #eedc94 #e4c652;
1588 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1589 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1591 border-style: solid;
1592 -webkit-border-radius: 4px;
1593 -moz-border-radius: 4px;
1595 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1596 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1597 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1600 .alert-message .close {
1610 .alert-message.danger p a,
1611 .alert-message.error p a,
1612 .alert-message.success p a,
1613 .alert-message.info p a {
1625 .alert-message div {
1631 .alert-message .btn {
1632 -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1633 -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1634 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1638 padding: 1px 3px 2px;
1641 color: #ffffff !important;
1642 text-transform: uppercase;
1643 white-space: nowrap;
1644 background-color: #bfbfbf;
1645 -webkit-border-radius: 3px;
1646 -moz-border-radius: 3px;
1657 text-decoration: none;
1661 background-color: #c43c35;
1665 background-color: #f89406;
1669 background-color: #46a546;
1673 background-color: #62cffc;
1676 /* LuCI specific items */
1677 .hidden { display: none }
1684 border: 1px solid #CCCCCC;
1685 border-radius: 3px 3px 3px 3px;
1687 display: inline-block;
1697 form.inline { display: inline }
1699 header .pull-right { padding-top: 8px; }
1701 #modemenu li:last-child span.divider { display: none }
1703 #syslog { width: 100%; }
1705 .cbi-section-table tbody tr:nth-child(odd) td, .cbi-section-table tbody tr:nth-child(odd) th {
1706 background-color: #f9f9f9;
1709 .cbi-section-table tbody tr:hover td, .cbi-section-table tbody tr:hover th {
1710 background-color: #f5f5f5;
1713 .cbi-section-table tr.cbi-section-table-descr th {
1714 font-weight: normal;
1717 .left { text-align: left !important; }
1719 .right { text-align: right !important; }
1721 .cbi-value-field { line-height: 1.5em; }
1723 .cbi-value-field input[type=checkbox],
1724 .cbi-value-field input[type=radio] {
1730 .cbi-value-field table td {
1734 table.cbi-section-table input,
1735 table.cbi-section-table textarea,
1736 table.cbi-section-table select {
1740 table.cbi-section-table td.cbi-section-table-cell {
1741 white-space: nowrap;
1745 .cbi-value-description { display: inline; }
1747 .cbi-value-description img { vertical-align: middle; }
1750 background-color: #FFFFFF;
1751 border: 1px solid #CCCCCC;
1754 white-space: nowrap;
1755 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1756 background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1757 background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1758 background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1759 background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1760 background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1761 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1762 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1763 -webkit-border-radius: 4px;
1764 -moz-border-radius: 4px;
1766 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1767 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1768 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1771 .ifacebox .ifacebox-head {
1772 border-bottom: 1px solid #CCCCCC;
1776 .ifacebox .ifacebox-body {
1781 display: inline-block;
1782 white-space: nowrap;
1783 background-color: #FFFFFF;
1784 border: 1px solid #CCCCCC;
1787 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1788 background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1789 background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1790 background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1791 background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1792 background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1793 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1794 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1795 -webkit-border-radius: 4px;
1796 -moz-border-radius: 4px;
1798 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1799 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1800 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1803 .ifacebadge-active {
1804 border-color: #000000;
1811 display: inline-block;
1812 white-space: nowrap;
1814 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1821 display: inline-block;
1830 border: 1px dashed #AAAAAA;
1837 td.cbi-value-field var {
1843 font-family: monospace;
1846 .uci-change-list ins,
1847 .uci-change-legend-label ins {
1848 text-decoration: none;
1849 border: 1px solid #00FF00;
1850 background-color: #CCFFCC;
1855 .uci-change-list del,
1856 .uci-change-legend-label del {
1857 text-decoration: none;
1858 border: 1px solid #FF0000;
1859 background-color: #FFCCCC;
1865 .uci-change-list var,
1866 .uci-change-legend-label var {
1867 text-decoration: none;
1868 border: 1px solid #CCCCCC;
1869 background-color: #EEEEEE;
1875 .uci-change-list var ins,
1876 .uci-change-list var del {
1877 /*display: inline;*/
1884 .uci-change-legend {
1888 .uci-change-legend-label {
1893 .uci-change-legend-label>ins,
1894 .uci-change-legend-label>del,
1895 .uci-change-legend-label>var {
1903 .uci-change-legend-label var ins,
1904 .uci-change-legend-label var del {