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;
601 .actions .secondary-action,
602 .cbi-page-actions .secondary-action{
605 .actions .secondary-action a,
606 .cbi-page-actions .secondary-action a {
609 .actions .secondary-action a:hover,
610 .cbi-page-actions .secondary-action a:hover {
611 text-decoration: underline;
613 .help-inline, .help-block {
633 * Tables for, you guessed it, tabular data
634 * ---------------------------------------- */
640 border-collapse: collapse;
643 padding: 10px 10px 9px;
650 vertical-align: middle;
654 border-top: 1px solid #ddd;
657 border-top: 1px solid #ddd;
661 * Repeatable UI elements outside the base styles provided from the scaffolding
662 * ---------------------------------------------------------------------------- */
675 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
677 header h3 a:hover, header .brand:hover, header ul .active > a {
678 background-color: #333;
679 background-color: rgba(255, 255, 255, 0.05);
681 text-decoration: none;
686 header h3 a, header .brand {
689 padding: 8px 20px 12px;
701 background-color: #222;
702 background-color: #222222;
703 background-repeat: repeat-x;
704 background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
705 background-image: -moz-linear-gradient(top, #333333, #222222);
706 background-image: -ms-linear-gradient(top, #333333, #222222);
707 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
708 background-image: -webkit-linear-gradient(top, #333333, #222222);
709 background-image: -o-linear-gradient(top, #333333, #222222);
710 background-image: linear-gradient(top, #333333, #222222);
711 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
712 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
713 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
714 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
716 header div > ul, .nav {
723 header div > ul > li, .nav > li {
727 header div > ul a, .nav a {
730 padding: 10px 10px 11px;
732 text-decoration: none;
734 header div > ul a:hover, .nav a:hover {
736 text-decoration: none;
738 header div > ul .active > a, .nav .active > a {
739 background-color: #222;
740 background-color: rgba(0, 0, 0, 0.5);
742 header div > ul.secondary-nav, .nav.secondary-nav {
747 header div > ul.secondary-nav .menu-dropdown,
748 .nav.secondary-nav .menu-dropdown,
749 header div > ul.secondary-nav .dropdown-menu,
750 .nav.secondary-nav .dropdown-menu {
754 header div > ul a.menu:hover,
756 header div > ul li.open .menu,
758 header div > ul .dropdown-toggle:hover,
759 .nav .dropdown-toggle:hover,
760 header div > ul .dropdown.open .dropdown-toggle,
761 .nav .dropdown.open .dropdown-toggle {
763 background: rgba(255, 255, 255, 0.05);
765 header div > ul .menu-dropdown,
767 header div > ul .dropdown-menu,
768 .nav .dropdown-menu {
769 background-color: #333;
771 header div > ul .menu-dropdown a.menu,
772 .nav .menu-dropdown a.menu,
773 header div > ul .dropdown-menu a.menu,
774 .nav .dropdown-menu a.menu,
775 header div > ul .menu-dropdown .dropdown-toggle,
776 .nav .menu-dropdown .dropdown-toggle,
777 header div > ul .dropdown-menu .dropdown-toggle,
778 .nav .dropdown-menu .dropdown-toggle {
781 header div > ul .menu-dropdown a.menu.open,
782 .nav .menu-dropdown a.menu.open,
783 header div > ul .dropdown-menu a.menu.open,
784 .nav .dropdown-menu a.menu.open,
785 header div > ul .menu-dropdown .dropdown-toggle.open,
786 .nav .menu-dropdown .dropdown-toggle.open,
787 header div > ul .dropdown-menu .dropdown-toggle.open,
788 .nav .dropdown-menu .dropdown-toggle.open {
790 background: rgba(255, 255, 255, 0.05);
792 header div > ul .menu-dropdown li a,
793 .nav .menu-dropdown li a,
794 header div > ul .dropdown-menu li a,
795 .nav .dropdown-menu li a {
797 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
799 header div > ul .menu-dropdown li a:hover,
800 .nav .menu-dropdown li a:hover,
801 header div > ul .dropdown-menu li a:hover,
802 .nav .dropdown-menu li a:hover {
803 background-color: #191919;
804 background-repeat: repeat-x;
805 background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
806 background-image: -moz-linear-gradient(top, #292929, #191919);
807 background-image: -ms-linear-gradient(top, #292929, #191919);
808 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));
809 background-image: -webkit-linear-gradient(top, #292929, #191919);
810 background-image: -o-linear-gradient(top, #292929, #191919);
811 background-image: linear-gradient(top, #292929, #191919);
812 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
815 header div > ul .menu-dropdown .active a,
816 .nav .menu-dropdown .active a,
817 header div > ul .dropdown-menu .active a,
818 .nav .dropdown-menu .active a {
821 header div > ul .menu-dropdown .divider,
822 .nav .menu-dropdown .divider,
823 header div > ul .dropdown-menu .divider,
824 .nav .dropdown-menu .divider {
825 background-color: #222;
828 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
834 a.menu:after, .dropdown-toggle:after {
837 display: inline-block;
839 text-indent: -99999px;
843 border-left: 4px solid transparent;
844 border-right: 4px solid transparent;
845 border-top: 4px solid #ffffff;
846 filter: alpha(opacity=50);
851 .menu-dropdown, .dropdown-menu {
852 background-color: #ffffff;
866 border-color: rgba(0, 0, 0, 0.2);
868 border-width: 0 1px 1px;
869 -webkit-border-radius: 0 0 6px 6px;
870 -moz-border-radius: 0 0 6px 6px;
871 border-radius: 0 0 6px 6px;
872 -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
873 -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
874 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
875 -webkit-background-clip: padding-box;
876 -moz-background-clip: padding-box;
877 background-clip: padding-box;
879 .menu-dropdown li, .dropdown-menu li {
882 background-color: none;
884 .menu-dropdown .divider, .dropdown-menu .divider {
888 background-color: #eee;
889 border-bottom: 1px solid #ffffff;
891 header .dropdown-menu a, .dropdown-menu a {
898 text-shadow: 0 1px 0 #ffffff;
900 header .dropdown-menu a:hover,
901 .dropdown-menu a:hover,
902 header .dropdown-menu a.hover,
903 .dropdown-menu a.hover {
904 background-color: #dddddd;
905 background-repeat: repeat-x;
906 background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
907 background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
908 background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
909 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
910 background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
911 background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
912 background-image: linear-gradient(top, #eeeeee, #dddddd);
913 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
915 text-decoration: none;
916 -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
917 -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
918 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
921 .dropdown.open .menu,
922 .open .dropdown-toggle,
923 .dropdown.open .dropdown-toggle {
926 background: rgba(0, 0, 0, 0.3);
928 .open .menu-dropdown,
929 .dropdown.open .menu-dropdown,
930 .open .dropdown-menu,
931 .dropdown.open .dropdown-menu {
934 .dropdown:hover ul.dropdown-menu {
937 .dropdown-menu .dropdown-menu {
944 .tabs, .cbi-tabmenu {
958 .tabs:after, .cbi-tabmenu:after {
961 .tabs > li, .cbi-tabmenu > li {
964 .tabs > li > a, .cbi-tabmenu > li > a {
971 border-width: 0 0 1px;
979 .cbi-tabmenu > li > a {
983 border: 1px solid transparent;
984 -webkit-border-radius: 4px 4px 0 0;
985 -moz-border-radius: 4px 4px 0 0;
986 border-radius: 4px 4px 0 0;
988 .tabs > li > a:hover,
989 .cbi-tabmenu > li > a:hover {
990 text-decoration: none;
991 background-color: #eee;
992 border-color: #eee #eee #ddd;
994 .tabs .active > a, .tabs .active > a:hover,
995 .cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover,
996 .cbi-tab > a:link, .cbi-tab > a:hover {
998 background-color: #ffffff;
999 border: 1px solid #ddd;
1000 border-bottom-color: transparent;
1003 .tabs .menu-dropdown, .tabs .dropdown-menu,
1004 .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu {
1007 -webkit-border-radius: 0 6px 6px 6px;
1008 -moz-border-radius: 0 6px 6px 6px;
1009 border-radius: 0 6px 6px 6px;
1011 .tabs a.menu:after, .tabs .dropdown-toggle:after,
1012 .cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after {
1013 border-top-color: #999;
1017 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle,
1018 .cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle {
1021 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after,
1022 .cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after {
1023 border-top-color: #555;
1025 .tab-content > .tab-pane,
1026 .tab-content > div {
1029 .tab-content > .active {
1035 background-color: #f5f5f5;
1036 background-repeat: repeat-x;
1037 background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
1038 background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
1039 background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
1040 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
1041 background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
1042 background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
1043 background-image: linear-gradient(top, #ffffff, #f5f5f5);
1044 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
1045 border: 1px solid #ddd;
1046 -webkit-border-radius: 3px;
1047 -moz-border-radius: 3px;
1049 -webkit-box-shadow: inset 0 1px 0 #ffffff;
1050 -moz-box-shadow: inset 0 1px 0 #ffffff;
1051 box-shadow: inset 0 1px 0 #ffffff;
1055 text-shadow: 0 1px 0 #ffffff;
1057 .breadcrumb .divider {
1061 .breadcrumb .active a {
1067 border-top: 1px solid #eee;
1070 .alert-message.danger,
1072 .alert-message.danger:hover,
1074 .alert-message.error,
1076 .alert-message.error:hover,
1078 .alert-message.success,
1080 .alert-message.success:hover,
1082 .alert-message.info,
1084 .alert-message.info:hover {
1087 .btn .close, .alert-message .close {
1088 font-family: Arial, sans-serif;
1092 .alert-message.danger,
1094 .alert-message.error {
1095 background-color: #c43c35;
1096 background-repeat: repeat-x;
1097 background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
1098 background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
1099 background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
1100 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
1101 background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
1102 background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
1103 background-image: linear-gradient(top, #ee5f5b, #c43c35);
1104 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
1105 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1106 border-color: #c43c35 #c43c35 #882a25;
1107 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1109 .btn.success, .alert-message.success {
1110 background-color: #57a957;
1111 background-repeat: repeat-x;
1112 background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
1113 background-image: -moz-linear-gradient(top, #62c462, #57a957);
1114 background-image: -ms-linear-gradient(top, #62c462, #57a957);
1115 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
1116 background-image: -webkit-linear-gradient(top, #62c462, #57a957);
1117 background-image: -o-linear-gradient(top, #62c462, #57a957);
1118 background-image: linear-gradient(top, #62c462, #57a957);
1119 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
1120 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1121 border-color: #57a957 #57a957 #3d773d;
1122 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1124 .btn.info, .alert-message.info {
1125 background-color: #339bb9;
1126 background-repeat: repeat-x;
1127 background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
1128 background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
1129 background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
1130 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
1131 background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
1132 background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
1133 background-image: linear-gradient(top, #5bc0de, #339bb9);
1134 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
1135 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1136 border-color: #339bb9 #339bb9 #22697d;
1137 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1142 display: inline-block;
1143 background-color: #e6e6e6;
1144 background-repeat: no-repeat;
1145 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1146 background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1147 background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1148 background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1149 background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1150 background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1151 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1152 padding: 5px 14px 6px;
1153 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1156 line-height: normal;
1157 border: 1px solid #ccc;
1158 border-bottom-color: #bbb;
1159 -webkit-border-radius: 4px;
1160 -moz-border-radius: 4px;
1162 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1163 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1164 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1169 text-decoration: none;
1173 outline: 1px dotted #666;
1176 .cbi-page-actions .cbi-button-apply,
1177 .cbi-page-actions .cbi-button-save {
1179 background-color: #0064cd;
1180 background-repeat: repeat-x;
1181 background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
1182 background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
1183 background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
1184 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
1185 background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
1186 background-image: -o-linear-gradient(top, #049cdb, #0064cd);
1187 background-image: linear-gradient(top, #049cdb, #0064cd);
1188 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
1189 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1190 border-color: #0064cd #0064cd #003f81;
1191 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1194 background-position: center center;
1195 background-image: url('../resources/cbi/up.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1196 background-image: url('../resources/cbi/up.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1197 background-image: url('../resources/cbi/up.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1198 background-image: url('../resources/cbi/up.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1199 background-image: url('../resources/cbi/up.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1200 background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1203 background-position: center center;
1204 background-image: url('../resources/cbi/down.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1205 background-image: url('../resources/cbi/down.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1206 background-image: url('../resources/cbi/down.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1207 background-image: url('../resources/cbi/down.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1208 background-image: url('../resources/cbi/down.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1209 background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1211 .btn.active, .btn:active {
1212 -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1213 -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1214 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1218 background-image: none;
1219 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1220 filter: alpha(opacity=65);
1221 -khtml-opacity: 0.65;
1224 -webkit-box-shadow: none;
1225 -moz-box-shadow: none;
1230 background-image: none;
1231 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1232 filter: alpha(opacity=65);
1233 -khtml-opacity: 0.65;
1236 -webkit-box-shadow: none;
1237 -moz-box-shadow: none;
1242 line-height: normal;
1243 padding: 9px 14px 9px;
1244 -webkit-border-radius: 6px;
1245 -moz-border-radius: 6px;
1249 padding: 7px 9px 7px;
1252 /* Button icons for specific pages */
1253 .Startup .cbi-section-table input.cbi-input-apply,
1254 .Startup .cbi-section-table input.cbi-button-apply {
1255 background-image: url("../resources/cbi/apply.gif");
1256 background-position: 7px 4px;
1257 padding: 3px 9px 3px 27px;
1259 .Processes .cbi-section-table input.cbi-input-reload,
1260 .Startup .cbi-section-table input.cbi-input-reload {
1261 background-image: url("../resources/cbi/reload.gif");
1262 background-position: 7px 4px;
1263 padding: 3px 9px 3px 27px;
1265 .Processes .cbi-section-table input.cbi-input-remove,
1266 .Processes .cbi-section-table div.cbi-section-remove input,
1267 .Startup .cbi-section-table input.cbi-input-remove,
1268 .Startup .cbi-section-table div.cbi-section-remove input {
1269 background-image: url("../resources/cbi/remove.gif");
1270 background-position: 7px 4px;
1271 padding: 3px 9px 3px 27px;
1273 .Processes .cbi-section-table input.cbi-input-reset,
1274 .Processes .cbi-section-table input.cbi-button-reset,
1275 .Startup .cbi-section-table input.cbi-input-reset,
1276 .Startup .cbi-section-table input.cbi-button-reset {
1277 background-image: url("../resources/cbi/reset.gif");
1278 background-position: 7px 4px;
1279 padding: 3px 9px 3px 27px;
1281 .Startup .cbi-section-table input.cbi-input-save,
1282 .Startup .cbi-section-table input.cbi-button-save {
1283 background-image: url("../resources/cbi/save.gif");
1284 background-position: 7px 4px;
1285 padding: 3px 9px 3px 27px;
1287 :root .alert-message, :root .btn {
1288 border-radius: 0 \0;
1290 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1299 line-height: 13.5px;
1300 text-shadow: 0 1px 0 #ffffff;
1301 filter: alpha(opacity=25);
1302 -khtml-opacity: 0.25;
1308 text-decoration: none;
1309 filter: alpha(opacity=40);
1310 -khtml-opacity: 0.4;
1317 margin-bottom: 18px;
1319 background-color: #eedc94;
1320 background-repeat: repeat-x;
1321 background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
1322 background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
1323 background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
1324 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
1325 background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
1326 background-image: -o-linear-gradient(top, #fceec1, #eedc94);
1327 background-image: linear-gradient(top, #fceec1, #eedc94);
1328 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
1329 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1330 border-color: #eedc94 #eedc94 #e4c652;
1331 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1332 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1334 border-style: solid;
1335 -webkit-border-radius: 4px;
1336 -moz-border-radius: 4px;
1338 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1339 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1340 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1342 .alert-message .close {
1350 .alert-message.danger p a,
1351 .alert-message.error p a,
1352 .alert-message.success p a,
1353 .alert-message.info p a {
1362 .alert-message div {
1367 .alert-message .btn {
1368 -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1369 -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1370 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1373 padding: 1px 3px 2px;
1376 color: #ffffff !important;
1377 text-transform: uppercase;
1378 white-space: nowrap;
1379 background-color: #bfbfbf;
1380 -webkit-border-radius: 3px;
1381 -moz-border-radius: 3px;
1390 text-decoration: none;
1393 background-color: #c43c35;
1396 background-color: #f89406;
1399 background-color: #46a546;
1402 background-color: #62cffc;
1404 /* LuCI specific items */
1405 .hidden { display: none }
1411 border: 1px solid #CCCCCC;
1412 border-radius: 3px 3px 3px 3px;
1414 display: inline-block;
1422 form.inline { display: inline }
1423 header .pull-right { padding-top: 8px; }
1424 #modemenu li:last-child span.divider { display: none }
1425 #syslog { width: 100%; }
1426 .cbi-section-table tbody tr:nth-child(odd) td, .cbi-section-table tbody tr:nth-child(odd) th {
1427 background-color: #f9f9f9;
1429 .cbi-section-table tbody tr:hover td, .cbi-section-table tbody tr:hover th {
1430 background-color: #f5f5f5;
1432 .left { text-align: left !important; }
1433 .right { text-align: right !important; }
1434 .cbi-value-field { line-height: 1.5em; }
1435 .cbi-value-field input[type=checkbox],
1436 .cbi-value-field input[type=radio] {
1441 .cbi-value-field table td {
1444 table.cbi-section-table input,
1445 table.cbi-section-table textarea,
1446 table.cbi-section-table select {
1449 table.cbi-section-table td.cbi-section-table-cell {
1450 white-space: nowrap;
1453 .cbi-value-description { display: inline; }
1454 .cbi-value-description img { vertical-align: middle; }
1456 background-color: #FFFFFF;
1457 border: 1px solid #CCCCCC;
1460 white-space: nowrap;
1461 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1462 background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1463 background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1464 background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1465 background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1466 background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1467 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1468 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1469 -webkit-border-radius: 4px;
1470 -moz-border-radius: 4px;
1472 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1473 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1474 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1476 .ifacebox .ifacebox-head {
1477 border-bottom: 1px solid #CCCCCC;
1480 .ifacebox .ifacebox-body {
1484 display: inline-block;
1485 white-space: nowrap;
1486 background-color: #FFFFFF;
1487 border: 1px solid #CCCCCC;
1490 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1491 background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1492 background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1493 background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1494 background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1495 background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1496 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1497 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1498 -webkit-border-radius: 4px;
1499 -moz-border-radius: 4px;
1501 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1502 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1503 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1505 .ifacebadge-active {
1506 border-color: #000000;
1512 display: inline-block;
1513 white-space: nowrap;
1515 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1521 display: inline-block;
1528 border: 1px dashed #AAAAAA;
1534 td.cbi-value-field var {
1539 font-family: monospace;
1541 .uci-change-list ins,
1542 .uci-change-legend-label ins {
1543 text-decoration: none;
1544 border: 1px solid #00FF00;
1545 background-color: #CCFFCC;
1549 .uci-change-list del,
1550 .uci-change-legend-label del {
1551 text-decoration: none;
1552 border: 1px solid #FF0000;
1553 background-color: #FFCCCC;
1558 .uci-change-list var,
1559 .uci-change-legend-label var {
1560 text-decoration: none;
1561 border: 1px solid #CCCCCC;
1562 background-color: #EEEEEE;
1567 .uci-change-list var ins,
1568 .uci-change-list var del {
1569 /*display: inline;*/
1575 .uci-change-legend {
1578 .uci-change-legend-label {
1582 .uci-change-legend-label>ins,
1583 .uci-change-legend-label>del,
1584 .uci-change-legend-label>var {
1591 .uci-change-legend-label var ins,
1592 .uci-change-legend-label var del {